The concept of Mileage can be illustrated through the example below:
' +\r\n '12/04/2021 6.54pm: Shell Card charged for 30 liters
' +\r\n '17/04/2021 7.20pm: Shell card charged for 15 Liters
' +\r\n 'Distance travelled by Vehicle between two transactions: 250 KMs
' +\r\n 'Shell Card Mileage of the 12/04/2021 Transaction: 8.33 KM/L
'\r\n \r\n }\r\n ]).then((result) => {\r\n if (result.value) {\r\n const answers = JSON.stringify(result.value)\r\n // alert(result.value);\r\n this.setState({\r\n valueMileage: answers\r\n })\r\n }\r\n })\r\n }\r\n }\r\n );\r\n }\r\n\r\n OverCapacityChange() {\r\n this.setState({ overCapacityIsChecked: !this.state.overCapacityIsChecked },\r\n function () {\r\n\r\n if (this.state.overCapacityIsChecked) {\r\n Swal.mixin({\r\n\r\n confirmButtonText: 'Next →',\r\n showCancelButton: true,\r\n progressSteps: ['1', '2']\r\n }).queue([\r\n {\r\n input: 'radio',\r\n inputOptions: inputMileageOptions,\r\n title: 'Set the Maximum Threshold',\r\n //text: 'Acceptable Variance threshold per event'\r\n },\r\n {\r\n input: 'text',\r\n title: 'Set the Value',\r\n //text: 'Acceptable number of events'\r\n },\r\n ]).then((result) => {\r\n if (result.value) {\r\n const answers = JSON.stringify(result.value)\r\n // Swal.fire({\r\n // title: 'Location Mismatched Transactions',\r\n // html: `\r\n // Your Input:\r\n // ${answers} \r\n\r\n
\r\n \r\n \r\n\r\n \r\n \r\n \r\n Manage Suspicious Transactions\r\n \r\n {this.state.selectedItem} \r\n
\r\n \r\n\r\n \r\n\r\n \r\n\r\n\r\n\r\n\r\n
\r\n
Please Select Category
\r\n
\r\n\r\n
\r\n \r\n\r\n \r\n\r\n
\r\n\r\n
\r\n
\r\n
{this.state.selectedCategory}
\r\n
\r\n\r\n
\r\n \r\n\r\n \r\n\r\n
\r\n\r\n
\r\n
Select Suspicious Transaction \r\n
\r\n \r\n \r\n \r\n\r\n
\r\n \r\n
Location Mismatch \r\n {/*
\r\n */}\r\n\r\n
\r\n \r\n {/*
{\r\n this.setState({\r\n valueTransactionMismatchAlert: event.target.value,\r\n });\r\n }}> */}
\r\n
{\r\n const inputValue = event.target.value;\r\n if (/^[0-9]*\\.?[0-9]*$/.test(inputValue)) {\r\n this.setState({\r\n valueTransactionMismatchAlert: inputValue,\r\n hasError: false,\r\n });\r\n } else {\r\n this.setState({\r\n hasError: true,\r\n });\r\n }\r\n }}\r\n className={this.state.hasError ? 'error' : ''}\r\n />\r\n {this.state.hasError && Please enter only numeric characters.
}\r\n \r\n \r\n \r\n
\r\n
\r\n \r\n You will be alerted when the distance variation is greater than the allowed variation. The distance variation is the distance between the vehicle’s location and the Shell Card site where the transaction occurred.\r\n \r\n\r\n
\r\n :\r\n
\r\n\r\n }\r\n\r\n\r\n\r\n\r\n \r\n \r\n {/* \r\n \r\n \r\n
\r\n \r\n
Overcapacity \r\n
\r\n \r\n
\r\n \r\n Maximum Threshold : {this.state.valueOverCapacity}\r\n \r\n
\r\n
\r\n \r\n If enabled, you will receive an alert each time a Shell Card transaction occurs that is greater than the Maximum Threshold you have set.\r\n \r\n\r\n
\r\n :\r\n
\r\n\r\n }\r\n\r\n \r\n \r\n \r\n \r\n\r\n\r\n\r\n \r\n
\r\n \r\n
Volume Mismatch \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n
\r\n \r\n If enabled, you will receive an alert each time a Shell Card Transaction occurs that is greater than the tank fill recorded via the Fuel Sensor of the vehicle.\r\n \r\n\r\n
\r\n :\r\n
\r\n\r\n }\r\n\r\n \r\n */}\r\n {/* \r\n
*/}\r\n {/* \r\n \r\n \r\n
\r\n \r\n
Low Vehicle Shell Card \r\n
\r\n \r\n
\r\n \r\n Minimum Mileage : {this.state.valueMileage}\r\n \r\n
\r\n
\r\n \r\n If enabled, you will receive an alert each time a Shell Card Transaction occurs that is lower than the Minimum Mileage you have set.\r\n \r\n\r\n
\r\n :\r\n
\r\n\r\n }\r\n\r\n \r\n */}\r\n \r\n \r\n\r\n \r\n
\r\n \r\n
Off-Route \r\n
\r\n \r\n
\r\n {/* \r\n Acceptable [Variance, Events] : {this.state.valueRunning}\r\n */}\r\n \r\n
\r\n
\r\n \r\n If enabled, you will receive an alert each time a Shell Card Transaction occurs at a Shell station other than the ones selected by you on the map below.\r\n \r\n\r\n
\r\n :\r\n
\r\n\r\n }\r\n\r\n \r\n \r\n \r\n \r\n\r\n\r\n \r\n
\r\n \r\n
Excessive Daily \r\n
\r\n \r\n
\r\n \r\n {\r\n \r\n this.state.valueExcessiveFueling\r\n \r\n\r\n \r\n \r\n }\r\n \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n \r\n If enabled, you will be alerted each time a card is swiped beyond the allowed daily limit in Ltrs.\r\n \r\n\r\n
\r\n :\r\n
\r\n\r\n }\r\n\r\n \r\n \r\n\r\n \r\n
\r\n\r\n
\r\n
Select Medium to Receive Alerts \r\n \r\n\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n
\r\n\r\n\r\n {/*
SMS Details */}\r\n \r\n\r\n\r\n
\r\n \r\n \r\n\r\n {/*
Email Details */}\r\n \r\n\r\n\r\n\r\n
\r\n \r\n\r\n
\r\n\r\n {/*
*/}\r\n
\r\n SAVE \r\n
\r\n
\r\n \r\n\r\n //
\r\n\r\n {this.state.currentStep != 0 &&\r\n\r\n
Previous
\r\n }\r\n {this.state.currentStep != 3 &&\r\n\r\n
Next
\r\n\r\n }\r\n
\r\n \r\n \r\n \r\n \r\n\r\n );\r\n }\r\n};\r\n\r\nexport default TestStepper","import React, { Component, useState, useRef } from 'react'\r\nimport { CardDeck, Row, Col, Container, Card, Button, OverlayTrigger, Popover,Overlay } from 'react-bootstrap'\r\nimport { DataTable } from 'primereact/datatable';\r\nimport { Column } from 'primereact/column';\r\nimport 'primereact/resources/themes/saga-blue/theme.css';\r\nimport 'primereact/resources/primereact.min.css';\r\nimport 'primeicons/primeicons.css';\r\nimport 'bootstrap/dist/css/bootstrap.css';\r\nimport FeatherIcon from 'feather-icons-react';\r\nimport { Dialog } from 'primereact/dialog';\r\nimport { Toast } from 'primereact/toast';\r\nimport Swal from 'sweetalert2/dist/sweetalert2.js';\r\nimport '../../css/AdvanceDeleteButtonTable.css'\r\nimport 'bootstrap/dist/css/bootstrap.css';\r\nimport 'bootstrap/dist/css/bootstrap.css';\r\nimport '../../css/HomeMini.css';\r\nclass AdvanceTableWithoutSearch extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n \r\n \r\n this.dt = React.createRef();\r\n\r\n\r\n this.state = {\r\n Id:'',\r\n deleteProductDialog: true,\r\n globalSearchBox: '',\r\n data: this.props.data,\r\n columns: this.props.columns,\r\n datakeyName:this.props.datakeyName,\r\n PageSize:10,\r\n deletedObject:[],\r\n };\r\n\r\n this.onChange = this.onChange.bind(this);\r\n this.exportCSV=this.exportCSV.bind(this);\r\n this.saveAsExcelFile=this.saveAsExcelFile.bind(this);\r\n this.exportExcel=this.exportExcel.bind(this);\r\n this.actionBodyTemplate = this.actionBodyTemplate.bind(this);\r\n this.confirmDeleteProduct=this.confirmDeleteProduct.bind(this);\r\n this.hideDeleteProductDialog=this.hideDeleteProductDialog.bind(this);\r\n this.sendDeleteObject=this.sendDeleteObject.bind(this);\r\n }\r\n \r\n componentWillReceiveProps(nextProps) {\r\n this.setState({data: nextProps.data})\r\n }\r\n\r\n onChange(e) {\r\n console.log(e.target.value);\r\n this.setState(\r\n { [e.target.name]: e.target.value }\r\n )\r\n\r\n }\r\n \r\n exportCSV = () => {\r\n this.dt.current.exportCSV({ });\r\n }\r\n\r\n exportPdf = () => {\r\n const exportColumns = this.state.columns.map(col => ({ title: col.HeaderText, dataKey: col.MappingColomn }));\r\n import('jspdf').then(jsPDF => {\r\n import('jspdf-autotable').then(() => {\r\n const doc = new jsPDF.default(0, 0);\r\n doc.autoTable(exportColumns, this.state.data);\r\n doc.save('ExportedFile.pdf');\r\n })\r\n })\r\n }\r\n\r\n exportExcel = () => {\r\n \r\n import('xlsx').then(xlsx => {\r\n let ws = xlsx.utils.json_to_sheet(this.state.data);\r\n // const worksheet = xlsx.utils.json_to_sheet(this.dt);\r\n const worksheet = xlsx.utils.json_to_sheet(this.state.data);\r\n const workbook = { Sheets: { 'data': worksheet }, SheetNames: ['data'] };\r\n const excelBuffer = xlsx.write(workbook, { bookType: 'xlsx', type: 'array' });\r\n this.saveAsExcelFile(excelBuffer, 'ExportedFile');\r\n }\r\n );\r\n }\r\n\r\n saveAsExcelFile = (buffer, fileName) => {\r\n import('file-saver').then(FileSaver => {\r\n let EXCEL_TYPE = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8';\r\n let EXCEL_EXTENSION = '.xlsx';\r\n const data = new Blob([buffer], {\r\n type: EXCEL_TYPE\r\n });\r\n FileSaver.saveAs(data, fileName + '_export_' + new Date().getTime() + EXCEL_EXTENSION);\r\n });\r\n }\r\n\r\n actionBodyTemplate(rowData) {\r\n \r\n return (\r\n \r\n this.confirmDeleteProduct(rowData)}> \r\n \r\n \r\n \r\n );\r\n }\r\n\r\n async confirmDeleteProduct(Id) {\r\n \r\n \r\n console.log(\"Deleted Object\");\r\n Swal.fire({\r\n title: 'Are you sure?',\r\n text: \"You won't be able to undo this!\",\r\n icon: 'warning',\r\n showCancelButton: true,\r\n confirmButtonColor: '#3085d6',\r\n cancelButtonColor: '#d33',\r\n confirmButtonText: 'Yes, delete it'\r\n }).then((result) => {\r\n if (result.isConfirmed) {\r\n this.setState({deletedObject:Id});\r\n this.sendDeleteObject();\r\n\r\n // Swal.fire(\r\n // 'Deleted!',\r\n // 'Your file has been deleted.'+Id.value,\r\n // 'success'\r\n // )\r\n }\r\n })\r\n }\r\n hideDeleteProductDialog() {\r\n this.setState({ deleteProductDialog: false });\r\n }\r\n\r\n sendDeleteObject = () => {\r\n this.props.parentDeletedObjectCallback(this.state.deletedObject);\r\n } \r\n \r\n\r\n render() {\r\n \r\n return (\r\n <>\r\n \r\n this.toast = el} />\r\n \r\n \r\n {/*
\r\n \r\n \r\n {\r\n this.state.columns.map(\r\n (item, index) => \r\n // (\r\n \r\n // \r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nexport default AdvanceTableWithoutSearch;\r\n\r\n\r\n","import {connect} from 'react-redux'\r\nimport {selectBranch} from '../services/actions/action'\r\nimport ManageSuspiciousTransactions from '../Pages/ManageSuspiciousTransactions'\r\n\r\nconst mapStateToProps = state => ({\r\n data:state.userItems\r\n})\r\n\r\nconst mapDispatchToProps = dispatch => ({\r\n selectBranchHandler:data=>dispatch(selectBranch(data))\r\n})\r\n\r\nexport default connect(mapStateToProps,mapDispatchToProps)(ManageSuspiciousTransactions)","import React, { Component, useState, useRef } from 'react'\r\nimport { CardDeck, Row, Col, Container, Card, Button, OverlayTrigger, Popover,Overlay } from 'react-bootstrap'\r\nimport { DataTable } from 'primereact/datatable';\r\nimport { Column } from 'primereact/column';\r\n\r\nimport 'primereact/resources/themes/saga-blue/theme.css';\r\nimport 'primereact/resources/primereact.min.css';\r\nimport 'primeicons/primeicons.css';\r\n \r\nimport { InputText } from 'primereact/inputtext';\r\nimport FeatherIcon from 'feather-icons-react';\r\n\r\nclass BasicTable extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n globalSearchBox: '',\r\n data: this.props.data,\r\n columns: this.props.columns,\r\n PageSize:10\r\n };\r\n this.onChange = this.onChange.bind(this);\r\n }\r\n\r\n onChange(e) {\r\n console.log(e.target.value);\r\n this.setState(\r\n { [e.target.name]: e.target.value }\r\n )\r\n }\r\n componentWillReceiveProps(nextProps) {\r\n this.setState({data: nextProps.data})\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n \r\n {\r\n this.state.columns != null ?\r\n \r\n \r\n this.state.columns.map(\r\n (item, index) => (\r\n
\r\n\r\n \r\n }\r\n \r\n \r\n \r\n\r\n );\r\n }\r\n}\r\n\r\nexport default BasicTable;\r\n\r\n\r\n","import React, { Component } from 'react'\r\nimport 'bootstrap/dist/css/bootstrap.css';\r\nimport { CardDeck, Row, Col, Container, Card } from 'react-bootstrap'\r\nimport Select from 'react-select'\r\n\r\nimport HomeLarge from '../../components/HomeLarge';\r\nimport HomeMini from '../../components/HomeMini';\r\nimport axiosConfig from '../../config/axiosConfig'\r\n\r\nimport GroupVRNSelect from '../../containers/comps/GroupVRNSelectContainer'\r\n\r\nconst current = new Date();\r\n\r\nconst monthNames = [\"January\", \"February\", \"March\", \"April\", \"May\", \"June\",\r\n \"July\", \"August\", \"September\", \"October\", \"November\", \"December\"\r\n];\r\n\r\n\r\nconst customStyles = {\r\n option: (provided, state) => ({\r\n ...provided,\r\n color: state.isSelected ? 'black' : 'black',\r\n backgroundColor: state.isSelected ? 'yellow' : 'white',\r\n\r\n }),\r\n control: (provided) => ({\r\n ...provided,\r\n borderRadius: '50px',\r\n borderColor: 'Yellow',\r\n })\r\n}\r\n\r\n\r\nfunction Iframe(props) {\r\n console.log(\"URL Calling : \", props.src)\r\n return (\r\n \r\n \r\n
\r\n )\r\n}\r\n\r\n\r\n\r\nconst firstDate = new Date();\r\nconst currentDate = new Date();\r\n\r\nclass FleetOverviewGraph extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n fodata: {},\r\n\r\n firstDay: new Date(firstDate.getFullYear(), firstDate.getMonth(), 1),\r\n fromDate: new Date(currentDate.getFullYear(), currentDate.getMonth(), 2).toISOString().substring(0, 10), //new Date(date.getFullYear(), date.getMonth(), 1);\r\n toDate: new Date().toISOString().substring(0, 10),\r\n\r\n timeFrameDropDownOptionsNew: [\r\n { value: 0, label: monthNames[current.getMonth()]},\r\n { value: 1, label: monthNames[current.getMonth()-1] },\r\n { value: 2 , label: monthNames[current.getMonth()-2] },\r\n { value: 3, label: monthNames[current.getMonth()-3] }\r\n ],\r\n\r\n\r\n HSSETabOption: 1,\r\n HSSETabGroup: 0,\r\n HSSETabVehicle: 0,\r\n HSSEBarOption: 1,\r\n HSSEBarGroup: 0,\r\n HSSEBarVehicle: 0,\r\n HSSEPieOption: 1,\r\n HSSEPieGroup: 0,\r\n HSSEPieVehicle: 0,\r\n TimeFrameId: 'three_month',\r\n\r\n srcURL_Shell_Card_Transaction_Value_In_Litre_Pie: '',\r\n srcURL_Shell_Card_Transaction_Value_In_PKR_Pie: '',\r\n srcURL_Total_KMs_Travelled_Pie: '',\r\n srcURL_Total_Driven_Hours_Pie: '',\r\n srcURL_Average_Shell_Card_Mileage_Pie: '',\r\n\r\n srcURL_Shell_Card_Transaction_Value_In_Litre_bar: '',\r\n srcURL_Shell_Card_Transaction_Value_In_PKR_bar: '',\r\n srcURL_Total_KMs_Travelled_bar: '',\r\n srcURL_Total_Driven_Hours_bar: '',\r\n srcURL_Average_Shell_Card_Mileage_bar: '',\r\n\r\n srcURL_FleetBulletin: '',\r\n\r\n //reportBaseURL: 'http://localhost:40383/Charts?',\r\n reportBaseURL: 'https://shelltelematics.pk/TELEMATICSREPORTINGSERVICE/Charts?',\r\n reportExtraParams: '&rs:Command=Render&rc:Parameters=false&',\r\n reportViewType: '/SSSAS_TabularReports/',\r\n\r\n Option: '',\r\n Group: '',\r\n searchCriteria: 'vrn',\r\n VRNGroupMultiID: '',\r\n\r\n\r\n\r\n searchCriteria1: 'vrn',\r\n Option1: 'vrn',\r\n Group1: '0',\r\n Group1Id: '',\r\n Vehicle1: '',\r\n Vehicle1Id: '',\r\n TimeFrameId1: 0,\r\n\r\n searchCriteria2: 'vrn',\r\n Option2: 'vrn',\r\n Group2: '0',\r\n Group2Id: '',\r\n Vehicle2: '',\r\n Vehicle2Id: '',\r\n TimeFrameId2: 'three_month',\r\n VRNMappingMasterId: '',\r\n VRNGroupMasterId: '',\r\n };\r\n this.HSSETabOptionChange = this.HSSETabOptionChange.bind(this)\r\n this.HSSETabGroupChange = this.HSSETabGroupChange.bind(this)\r\n this.HSSETabVehicleChange = this.HSSETabVehicleChange.bind(this)\r\n\r\n this.optionChange = this.optionChange.bind(this)\r\n this.groupChange = this.groupChange.bind(this)\r\n this.vehicleChange = this.vehicleChange.bind(this)\r\n\r\n this.optionChange1 = this.optionChange1.bind(this)\r\n this.groupChange1 = this.groupChange1.bind(this)\r\n this.vehicleChange1 = this.vehicleChange1.bind(this)\r\n\r\n this.getFOData = this.getFOData.bind(this);\r\n this.getFOTable1Data = this.getFOTable1Data.bind(this);\r\n\r\n this.changeOptionTime = this.changeOptionTime.bind(this);\r\n this.changeOptionTime1 = this.changeOptionTime1.bind(this)\r\n this.changeOptionTime2 = this.changeOptionTime2.bind(this)\r\n\r\n this.optionChange2 = this.optionChange2.bind(this)\r\n this.groupChange2 = this.groupChange2.bind(this)\r\n this.vehicleChange2 = this.vehicleChange2.bind(this)\r\n\r\n\r\n\r\n }\r\n\r\n async changeOptionTime(selectedOption) {\r\n\r\n await this.setState({ TimeFrameId: selectedOption.value })\r\n }\r\n\r\n async changeOptionTime2(selectedOption) {\r\n\r\n await this.setState({ TimeFrameId2: selectedOption.value })\r\n }\r\n\r\n\r\n async HSSETabOptionChange(selectedOption) {\r\n\r\n if (selectedOption.value == 1) {\r\n await this.setState({ HSSETabOption: selectedOption, HSSETabGroup: 0, HSSETabVehicle: 0 })\r\n this.getFOTable1Data();\r\n }\r\n else\r\n this.setState({ HSSETabOption: selectedOption, HSSETabGroup: 0, HSSETabVehicle: 0 })\r\n\r\n console.log('selected dropdown Option is now ', this.state.HSSETabOption)\r\n }\r\n async HSSETabVehicleChange(selectedVehicle) {\r\n console.log(selectedVehicle)\r\n await this.setState({ HSSETabVehicle: selectedVehicle, HSSETabGroup: 0 })\r\n this.getFOTable1Data();\r\n\r\n }\r\n async HSSETabGroupChange(selectedGroup) {\r\n console.log(selectedGroup)\r\n await this.setState({ HSSETabGroup: selectedGroup, HSSETabVehicle: 0 })\r\n this.getFOTable1Data();\r\n\r\n }\r\n\r\n /*Start:For Pie Chart*/\r\n async changeOptionTime1(selectedOption) {\r\n\r\n await this.setState({ TimeFrameId1: selectedOption.value })\r\n\r\n this.bindAllPieChart();\r\n }\r\n\r\n async optionChange1(selectedOption) {\r\n\r\n if (selectedOption == 1) {\r\n await this.setState({ searchCriteria1: \"vrn\" })\r\n this.bindAllPieChart();\r\n }\r\n else\r\n await this.setState({ Option1: selectedOption, Group1: 0, Vehicle1: 0 })\r\n }\r\n\r\n async vehicleChange1(selectedVehicle) {\r\n\r\n\r\n await this.setState({ Vehicle1: selectedVehicle, Group1: 0 })\r\n\r\n }\r\n\r\n async groupChange1(selectedGroup) {\r\n console.log(\"Selected group are : \", selectedGroup)\r\n\r\n await this.setState({ searchCriteria1: \"vrngroup\", VRNGroupMasterId: selectedGroup })\r\n this.bindAllPieChart();\r\n\r\n }\r\n\r\n /*End: For Pie Chart*/\r\n\r\n /* Start of Tabular Data */\r\n\r\n async optionChange(selectedOption) {\r\n if (selectedOption == 1) {\r\n await this.setState({ searchCriteria: \"vrn\" })\r\n this.getTabularData();\r\n }\r\n else\r\n await this.setState({ Option: selectedOption, Group: 0 })\r\n }\r\n\r\n async vehicleChange(selectedVehicle) {\r\n\r\n\r\n // await this.setState({ Vehicle: selectedVehicle, Group: 0 })\r\n\r\n }\r\n\r\n async groupChange(selectedGroup) {\r\n\r\n await this.setState({ searchCriteria: \"vrngroup\", VRNGroupMultiID: selectedGroup })\r\n this.getTabularData();\r\n\r\n }\r\n\r\n /* End of Tabular Data */\r\n\r\n\r\n\r\n\r\n getFOData() {\r\n\r\n axiosConfig.post('Portal/GetFleetOverView', {\r\n \"UserAccountBranchID\": localStorage.getItem('selectedBranch'),\r\n \"SearchTypeId\": 1,\r\n \"CardMappingMasterId\": 0,\r\n \"VRNGroupMasterId\": 0,\r\n \"StartTime\": this.state.fromDate,\r\n \"EndTime\": this.state.toDate,\r\n })\r\n .then((res) => {\r\n this.setState({ fodata: res.data.fleetOverView[0] })\r\n })\r\n .catch(console.error)\r\n .finally(() => {\r\n\r\n });\r\n }\r\n\r\n\r\n componentDidMount() {\r\n\r\n this.getTabularData();\r\n\r\n this.getFOData();\r\n this.getFOTable1Data();\r\n\r\n this.bindAllPieChart();\r\n //this.bindAllBarChart();\r\n\r\n }\r\n\r\n async getTabularData() {\r\n let DateRange = this.state.TimeFrameId;\r\n let UserBranchID = localStorage.getItem('selectedBranch')\r\n let reportName = \"FleetMileageTransMinAvgMaxTrend\";\r\n let URL_PARAMETERS = 'reportName=' + reportName + '&DateRange=' + DateRange + '&userBranchID=' + UserBranchID + '&token=' + localStorage.getItem('token')\r\n if (this.state.searchCriteria == \"vrngroup\") {\r\n URL_PARAMETERS = 'reportName=' + reportName + '&VRNGroupingID=' + this.state.VRNGroupMultiID + '&DateRange=' + DateRange + '&userBranchID=' + UserBranchID + '&token=' + localStorage.getItem('token')\r\n }\r\n\r\n let reportViewType = this.state.reportViewType\r\n let ReportFullURL = this.state.reportBaseURL + URL_PARAMETERS\r\n console.log('URL Generated: ', ReportFullURL)\r\n await this.setState({ srcURL_FleetBulletin: ReportFullURL })\r\n }\r\n\r\n // \r\n getFOTable1Data() {\r\n\r\n axiosConfig.post('Portal/GetHighestFleetOverView_Deviation', {\r\n \"TimeFrame\": this.state.TimeFrameId,\r\n \"SearchTypeId\": this.state.HSSETabOption,\r\n \"CardMappingMasterId\": this.state.HSSETabVehicle,\r\n \"VRNGroupMasterId\": this.state.HSSETabGroup,\r\n \"UserAccountBranchID\": localStorage.getItem('selectedBranch'),\r\n })\r\n .then((res) => {\r\n this.setState({ mostDeviationData: res.data.deviation })\r\n })\r\n .catch(console.error)\r\n .finally(() => {\r\n\r\n });\r\n }\r\n\r\n async changeOptionTime(selectedOption) {\r\n await this.setState({ TimeFrameId: selectedOption.value })\r\n }\r\n\r\n async bindAllPieChart() {\r\n\r\n /*In Liter*/\r\n let MonthNo = this.state.TimeFrameId1;\r\n this.setState({ showReport: false })\r\n let UserBranchID = localStorage.getItem('selectedBranch')\r\n let reportName = \"PieChart_ShellCardLPKR\";\r\n let URL_PARAMETERS = 'reportName=' + reportName + '&SelectChartView=L&SelectedCriteria=' + this.state.searchCriteria1 + '&MonthNo=' + MonthNo + '&userBranchID=' + UserBranchID + '&token=' + localStorage.getItem('token')\r\n if (this.state.searchCriteria1 == \"vrngroup\") {\r\n URL_PARAMETERS = 'reportName=' + reportName + '&VRNGroupingID=' + this.state.VRNGroupMasterId + '&SelectChartView=L&SelectedCriteria=' + this.state.searchCriteria1 + '&MonthNo=' + MonthNo + '&userBranchID=' + UserBranchID + '&token=' + localStorage.getItem('token')\r\n }\r\n\r\n let reportViewType = this.state.reportViewType\r\n let ReportFullURL = this.state.reportBaseURL + URL_PARAMETERS\r\n await this.setState({ srcURL_Shell_Card_Transaction_Value_In_Litre_Pie: ReportFullURL, showReport: true })\r\n\r\n /*In PKTimeFrameId1R*/\r\n MonthNo = this.state.TimeFrameId1;\r\n this.setState({ showReport: false })\r\n UserBranchID = localStorage.getItem('selectedBranch')\r\n reportName = \"PieChart_ShellCardLPKR\";\r\n URL_PARAMETERS = 'reportName=' + reportName + '&SelectChartView=PKR&SelectedCriteria=' + this.state.searchCriteria1 + '&MonthNo=' + MonthNo + '&userBranchID=' + UserBranchID + '&token=' + localStorage.getItem('token')\r\n if (this.state.searchCriteria1 == \"vrngroup\") {\r\n URL_PARAMETERS = 'reportName=' + reportName + '&VRNGroupingID=' + this.state.VRNGroupMasterId + '&SelectChartView=PKR&SelectedCriteria=' + this.state.searchCriteria1 + '&MonthNo=' + MonthNo + '&userBranchID=' + UserBranchID + '&token=' + localStorage.getItem('token')\r\n }\r\n\r\n reportViewType = this.state.reportViewType\r\n ReportFullURL = this.state.reportBaseURL + URL_PARAMETERS\r\n console.log('URL Generated: ', ReportFullURL)\r\n await this.setState({ srcURL_Shell_Card_Transaction_Value_In_PKR_Pie: ReportFullURL, showReport: true })\r\n\r\n /*Total KMs Travelled*/\r\n MonthNo = this.state.TimeFrameId1;\r\n this.setState({ showReport: false })\r\n UserBranchID = localStorage.getItem('selectedBranch')\r\n reportName = \"PieChart_ShellCardKmHr\";\r\n URL_PARAMETERS = 'reportName=' + reportName + '&SelectChartView=Km&SelectedCriteria=' + this.state.searchCriteria1 + '&MonthNo=' + MonthNo + '&userBranchID=' + UserBranchID + '&token=' + localStorage.getItem('token')\r\n if (this.state.searchCriteria1 == \"vrngroup\") {\r\n URL_PARAMETERS = 'reportName=' + reportName + '&VRNGroupingID=' + this.state.VRNGroupMasterId + '&SelectChartView=Km&SelectedCriteria=' + this.state.searchCriteria1 + '&MonthNo=' + MonthNo + '&userBranchID=' + UserBranchID + '&token=' + localStorage.getItem('token')\r\n }\r\n\r\n reportViewType = this.state.reportViewType\r\n ReportFullURL = this.state.reportBaseURL + URL_PARAMETERS\r\n console.log('URL Generated: ', ReportFullURL)\r\n await this.setState({ srcURL_Total_KMs_Travelled_Pie: ReportFullURL, showReport: true })\r\n\r\n /*Total Driven Hours*/\r\n MonthNo = this.state.TimeFrameId1;\r\n this.setState({ showReport: false })\r\n UserBranchID = localStorage.getItem('selectedBranch')\r\n reportName = \"PieChart_ShellCardKmHr\";\r\n URL_PARAMETERS = 'reportName=' + reportName + '&SelectChartView=Hr&SelectedCriteria=' + this.state.searchCriteria1 + '&MonthNo=' + MonthNo + '&userBranchID=' + UserBranchID + '&token=' + localStorage.getItem('token')\r\n if (this.state.searchCriteria1 == \"vrngroup\") {\r\n URL_PARAMETERS = 'reportName=' + reportName + '&VRNGroupingID=' + this.state.VRNGroupMasterId + '&SelectChartView=Hr&SelectedCriteria=' + this.state.searchCriteria1 + '&MonthNo=' + MonthNo + '&userBranchID=' + UserBranchID + '&token=' + localStorage.getItem('token')\r\n }\r\n reportViewType = this.state.reportViewType\r\n ReportFullURL = this.state.reportBaseURL + URL_PARAMETERS\r\n console.log('URL Generated: ', ReportFullURL)\r\n await this.setState({ srcURL_Total_Driven_Hours_Pie: ReportFullURL, showReport: true })\r\n\r\n /*Average Shell Card Mileage (KM/L)*/\r\n MonthNo = this.state.TimeFrameId1;\r\n this.setState({ showReport: false })\r\n UserBranchID = localStorage.getItem('selectedBranch')\r\n reportName = \"PieChart_ShellCardKmPerLtr\";\r\n URL_PARAMETERS = 'reportName=' + reportName + '&SelectedCriteria=' + this.state.searchCriteria1 + '&MonthNo=' + MonthNo + '&userBranchID=' + UserBranchID + '&token=' + localStorage.getItem('token')\r\n if (this.state.searchCriteria1 == \"vrngroup\") {\r\n URL_PARAMETERS = 'reportName=' + reportName + '&VRNGroupingID=' + this.state.VRNGroupMasterId + '&SelectedCriteria=' + this.state.searchCriteria1 + '&MonthNo=' + MonthNo + '&userBranchID=' + UserBranchID + '&token=' + localStorage.getItem('token')\r\n }\r\n\r\n reportViewType = this.state.reportViewType\r\n ReportFullURL = this.state.reportBaseURL + URL_PARAMETERS\r\n console.log('URL Generated: ', ReportFullURL)\r\n await this.setState({ srcURL_Average_Shell_Card_Mileage_Pie: ReportFullURL, showReport: true })\r\n }\r\n\r\n /*Start:Bar Chart Area*/\r\n async bindAllBarChart() {\r\n\r\n\r\n\r\n /*In Liter*/\r\n let DateRange = this.state.TimeFrameId2;\r\n this.setState({ showReport: false })\r\n let UserBranchID = localStorage.getItem('selectedBranch')\r\n let reportName = \"BarChart_ShellCardLPKR\";\r\n let URL_PARAMETERS = 'reportName=' + reportName + '&SelectedAggegate=L&SelectedCriteria=' + this.state.searchCriteria2 + '&DateRange=' + DateRange + '&userBranchID=' + UserBranchID + '&token=' + localStorage.getItem('token')\r\n if (this.state.searchCriteria1 == \"vrngroup\" && this.state.VRNGroupMasterId != \"\") {\r\n URL_PARAMETERS = 'reportName=' + reportName + '&VRNGroupingID=' + this.state.VRNGroupMasterId + '&SelectedAggegate=L&SelectedCriteria=' + this.state.searchCriteria2 + '&DateRange=' + DateRange + '&userBranchID=' + UserBranchID + '&token=' + localStorage.getItem('token')\r\n }\r\n else if (this.state.searchCriteria1 == \"vrn\" && this.state.VRNMappingMasterId != \"\") {\r\n URL_PARAMETERS = 'reportName=' + reportName + '&MappingMasterID=' + this.state.VRNMappingMasterId + '&SelectedAggegate=L&SelectedCriteria=' + this.state.searchCriteria2 + '&DateRange=' + DateRange + '&userBranchID=' + UserBranchID + '&token=' + localStorage.getItem('token')\r\n }\r\n let reportViewType = this.state.reportViewType\r\n let ReportFullURL = this.state.reportBaseURL + URL_PARAMETERS\r\n console.log('URL Generated: ', ReportFullURL)\r\n await this.setState({ srcURL_Shell_Card_Transaction_Value_in_Litre_bar: ReportFullURL, showReport: true })\r\n\r\n /*In PKR*/\r\n DateRange = this.state.TimeFrameId2;\r\n this.setState({ showReport: false })\r\n UserBranchID = localStorage.getItem('selectedBranch')\r\n reportName = \"BarChart_ShellCardLPKR\";\r\n URL_PARAMETERS = 'reportName=' + reportName + '&SelectedAggegate=PKR&SelectedCriteria=' + this.state.searchCriteria2 + '&DateRange=' + DateRange + '&userBranchID=' + UserBranchID + '&token=' + localStorage.getItem('token')\r\n if (this.state.searchCriteria1 == \"vrngroup\" && this.state.VRNGroupMasterId != \"\") {\r\n URL_PARAMETERS = 'reportName=' + reportName + '&VRNGroupingID=' + this.state.VRNGroupMasterId + '&SelectedAggegate=PKR&SelectedCriteria=' + this.state.searchCriteria2 + '&DateRange=' + DateRange + '&userBranchID=' + UserBranchID + '&token=' + localStorage.getItem('token')\r\n }\r\n else if (this.state.searchCriteria1 == \"vrn\" && this.state.VRNMappingMasterId != \"\") {\r\n URL_PARAMETERS = 'reportName=' + reportName + '&MappingMasterID=' + this.state.VRNMappingMasterId + '&SelectedAggegate=PKR&SelectedCriteria=' + this.state.searchCriteria2 + '&DateRange=' + DateRange + '&userBranchID=' + UserBranchID + '&token=' + localStorage.getItem('token')\r\n }\r\n\r\n reportViewType = this.state.reportViewType\r\n ReportFullURL = this.state.reportBaseURL + URL_PARAMETERS\r\n console.log('URL Generated: ', ReportFullURL)\r\n await this.setState({ srcURL_Shell_Card_Transaction_Value_in_PKR_bar: ReportFullURL, showReport: true })\r\n\r\n /*Total Driven*/\r\n DateRange = this.state.TimeFrameId2;\r\n this.setState({ showReport: false })\r\n UserBranchID = localStorage.getItem('selectedBranch')\r\n reportName = \"BarChart_ShellCardKmHr\";\r\n URL_PARAMETERS = 'reportName=' + reportName + '&SelectedAggegate=Hr&SelectedCriteria=' + this.state.searchCriteria2 + '&DateRange=' + DateRange + '&userBranchID=' + UserBranchID + '&token=' + localStorage.getItem('token')\r\n\r\n if (this.state.searchCriteria1 == \"vrngroup\" && this.state.VRNGroupMasterId != \"\") {\r\n URL_PARAMETERS = 'reportName=' + reportName + '&VRNGroupingID=' + this.state.VRNGroupMasterId + '&SelectedAggegate=Hr&SelectedCriteria=' + this.state.searchCriteria2 + '&DateRange=' + DateRange + '&userBranchID=' + UserBranchID + '&token=' + localStorage.getItem('token')\r\n }\r\n else if (this.state.searchCriteria1 == \"vrn\" && this.state.VRNMappingMasterId != \"\") {\r\n URL_PARAMETERS = 'reportName=' + reportName + '&MappingMasterID=' + this.state.VRNMappingMasterId + '&SelectedAggegate=Hr&SelectedCriteria=' + this.state.searchCriteria2 + '&DateRange=' + DateRange + '&userBranchID=' + UserBranchID + '&token=' + localStorage.getItem('token')\r\n }\r\n\r\n\r\n reportViewType = this.state.reportViewType\r\n ReportFullURL = this.state.reportBaseURL + URL_PARAMETERS\r\n console.log('URL Generated: ', ReportFullURL)\r\n await this.setState({ srcURL_Total_Driven_Hours_bar: ReportFullURL, showReport: true })\r\n\r\n /*In Total KM*/\r\n DateRange = this.state.TimeFrameId2;\r\n this.setState({ showReport: false })\r\n UserBranchID = localStorage.getItem('selectedBranch')\r\n reportName = \"BarChart_ShellCardKmHr\";\r\n URL_PARAMETERS = 'reportName=' + reportName + '&SelectedAggegate=Km&SelectedCriteria=' + this.state.searchCriteria2 + '&DateRange=' + DateRange + '&userBranchID=' + UserBranchID + '&token=' + localStorage.getItem('token')\r\n if (this.state.searchCriteria1 == \"vrngroup\" && this.state.VRNGroupMasterId != \"\") {\r\n URL_PARAMETERS = 'reportName=' + reportName + '&VRNGroupingID=' + this.state.VRNGroupMasterId + '&SelectedAggegate=Km&SelectedCriteria=' + this.state.searchCriteria2 + '&DateRange=' + DateRange + '&userBranchID=' + UserBranchID + '&token=' + localStorage.getItem('token')\r\n }\r\n else if (this.state.searchCriteria1 == \"vrn\" && this.state.VRNMappingMasterId != \"\") {\r\n URL_PARAMETERS = 'reportName=' + reportName + '&MappingMasterID=' + this.state.VRNMappingMasterId + '&SelectedAggegate=Km&SelectedCriteria=' + this.state.searchCriteria2 + '&DateRange=' + DateRange + '&userBranchID=' + UserBranchID + '&token=' + localStorage.getItem('token')\r\n }\r\n\r\n reportViewType = this.state.reportViewType\r\n ReportFullURL = this.state.reportBaseURL + URL_PARAMETERS\r\n console.log('URL Generated: ', ReportFullURL)\r\n await this.setState({ srcURL_Total_KMs_Travelled_bar: ReportFullURL, showReport: true })\r\n\r\n\r\n /*Average Shell Card Mileage */\r\n DateRange = this.state.TimeFrameId2;\r\n this.setState({ showReport: false })\r\n UserBranchID = localStorage.getItem('selectedBranch')\r\n reportName = \"BarChart_ShellCardKmPerLtr\";\r\n URL_PARAMETERS = 'reportName=' + reportName + '&SelectedCriteria=' + this.state.searchCriteria2 + '&DateRange=' + DateRange + '&userBranchID=' + UserBranchID + '&token=' + localStorage.getItem('token')\r\n if (this.state.searchCriteria1 == \"vrngroup\" && this.state.VRNGroupMasterId != \"\") {\r\n URL_PARAMETERS = 'reportName=' + reportName + '&VRNGroupingID=' + this.state.VRNGroupMasterId + '&SelectedCriteria=' + this.state.searchCriteria2 + '&DateRange=' + DateRange + '&userBranchID=' + UserBranchID + '&token=' + localStorage.getItem('token')\r\n }\r\n else if (this.state.searchCriteria1 == \"vrn\" && this.state.VRNMappingMasterId != \"\") {\r\n URL_PARAMETERS = 'reportName=' + reportName + '&MappingMasterID=' + this.state.VRNMappingMasterId + '&SelectedCriteria=' + this.state.searchCriteria2 + '&DateRange=' + DateRange + '&userBranchID=' + UserBranchID + '&token=' + localStorage.getItem('token')\r\n }\r\n\r\n reportViewType = this.state.reportViewType\r\n ReportFullURL = this.state.reportBaseURL + URL_PARAMETERS\r\n console.log('URL Generated: ', ReportFullURL)\r\n await this.setState({ srcURL_Average_Shell_Card_Mileage_bar: ReportFullURL, showReport: true })\r\n }\r\n\r\n async optionChange2(selectedOption) {\r\n if (selectedOption == 1) {\r\n\r\n await this.setState({ Option2: selectedOption, Group2: 0, Vehicle2: 0 })\r\n await this.setState({ searchCriteria2: \"vrn\" })\r\n this.bindAllBarChart();\r\n }\r\n else\r\n await this.setState({ Option2: selectedOption, Group2: 0, Vehicle2: 0 })\r\n }\r\n\r\n async vehicleChange2(selectedVehicle) {\r\n await this.setState({ searchCriteria1: \"vrn\", VRNMappingMasterId: selectedVehicle })\r\n this.bindAllBarChart();\r\n }\r\n\r\n async groupChange2(selectedGroup) {\r\n\r\n await this.setState({ searchCriteria1: \"vrngroup\", VRNGroupMasterId: selectedGroup })\r\n this.bindAllBarChart();\r\n }\r\n\r\n render() {\r\n\r\n return (\r\n\r\n \r\n
\r\n \r\n \r\n \r\n \r\n For more details on your fleet’s performance, click here to visit My Reports
\r\n \r\n \r\n \r\n\r\n
\r\n\r\n \r\n\r\n \r\n \r\n\r\n \r\n\r\n
\r\n\r\n \r\n\r\n \r\n \r\n Fleet Bulletin \r\n \r\n\r\n\r\n \r\n \r\n
\r\n\r\n \r\n
Choose Time Frame \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n\r\n
\r\n\r\n \r\n
Choose Base \r\n \r\n \r\n\r\n
\r\n
\r\n\r\n
\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n
\r\n
\r\n\r\n \r\n \r\n\r\n\r\n \r\n\r\n
\r\n\r\n\r\n \r\n\r\n \r\n \r\n Fleet Summary \r\n \r\n\r\n\r\n \r\n \r\n
\r\n\r\n \r\n
Choose Time Frame \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n\r\n
\r\n\r\n \r\n
Choose Base \r\n \r\n \r\n\r\n
\r\n
\r\n\r\n
\r\n \r\n
\r\n\r\n \r\n \r\n\r\n\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n
\r\n \r\n
\r\n\r\n \r\n \r\n\r\n\r\n \r\n\r\n
\r\n\r\n\r\n {/* \r\n\r\n \r\n \r\n Fleet Analysis \r\n \r\n \r\n \r\n
\r\n\r\n \r\n
Choose Time Frame \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n\r\n
\r\n\r\n \r\n
Choose Base \r\n \r\n \r\n \r\n\r\n\r\n
\r\n
\r\n\r\n
\r\n \r\n
\r\n\r\n\r\n \r\n \r\n\r\n\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n\r\n
\r\n\r\n\r\n
\r\n \r\n
\r\n\r\n \r\n \r\n\r\n \r\n\r\n\r\n
*/}\r\n\r\n\r\n \r\n
\r\n \r\n
\r\n )\r\n}\r\n\r\nclass SuspiciousTransactionsGraph extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n\r\n\r\n data: [],\r\n columns: [\r\n { \"HeaderText\": \"VRN\", \"MappingColomn\": \"vrn\" },\r\n { \"HeaderText\": \"Total Suspicious Activity\", \"MappingColomn\": \"totalSuspiciousActivity\" },\r\n { \"HeaderText\": \"Last 3 Month Average\", \"MappingColomn\": \"last_3_months_average\" }\r\n ],\r\n PageSize: 5,\r\n timeFrameDropDownOptions: [\r\n { value: 0, label: monthNames[current.getMonth()]},\r\n { value: 1, label: monthNames[current.getMonth()-1] },\r\n { value: 2 , label: monthNames[current.getMonth()-2] },\r\n { value: 3, label: monthNames[current.getMonth()-3] }\r\n ],\r\n ViewDropDownOptions: [\r\n { value: 'No', label: 'ST(No)' },\r\n { value: 'PKR', label: 'ST(PKR)' }\r\n ],\r\n ViewDropDownOptionsNEW: [\r\n { value: 'No', label: 'ST(No)' },\r\n { value: 'PKR', label: 'ST(PKR)' }\r\n ],\r\n suspiciousdata: {},\r\n Option: 1,\r\n Group: 0,\r\n Vehicle: 0,\r\n TimeFrameId: 1,\r\n ViewId: 1,\r\n\r\n BulletInOption: '',\r\n BulletInGroup: '',\r\n BulletInsearchCriteria: 'vrn',\r\n BulletInVRNGroupMultiID: '',\r\n BulletTimeFrame: 'three_month',\r\n\r\n\r\n\r\n\r\n srcURL_Total_Suspicious_Transactions_bar: '',\r\n srcURL_Low_Vehicle_Shell_Card_Mileage_Transactions_Transactions_bar: '',\r\n srcURL_Overcapacity_Transactions_bar: '',\r\n srcURL_Location_Mismatch_Transactions_bar: '',\r\n srcURL_Deviated_Routes_Transactions_bar: '',\r\n srcURL_Excessive_Daily_Fueling_bar: '',\r\n srcURL_Volume_Mismatch_Transactions_bar: '',\r\n\r\n\r\n srcURL_Total_Suspicious_Transactions_Pie: '',\r\n srcURL_Low_Vehicle_Shell_Card_Mileage_Transactions_Transactions_Pie: '',\r\n srcURL_Overcapacity_Transactions_Pie: '',\r\n srcURL_Location_Mismatch_Transactions_Pie: '',\r\n srcURL_Deviated_Routes_Transactions_Pie: '',\r\n srcURL_Excessive_Daily_Fueling_Pie: '',\r\n srcURL_Volume_Mismatch_Transactions_Pie: '',\r\n\r\n srcURL_SuspiciousBulletin: '',\r\n\r\n\r\n\r\n searchCriteria2: 'vrn',\r\n Option2: 'vrn',\r\n Group2: '0',\r\n Group2Id: '',\r\n Vehicle2: '',\r\n Vehicle2Id: '',\r\n TimeFrameId2: 'three_month',\r\n\r\n\r\n searchCriteria1: 'vrn',\r\n Option1: 'vrn',\r\n Group1: '0',\r\n Group1Id: '',\r\n Vehicle1: '',\r\n Vehicle1Id: '',\r\n TimeFrameId1: 0,\r\n SelectChartView: 'No',\r\n SelectChartView1: 'No',\r\n SelectChartView2: 'No',\r\n SelectChartView3: 'No',\r\n //reportBaseURL: 'http://localhost:40383/Charts?',\r\n reportBaseURL: 'https://shelltelematics.pk/TELEMATICSREPORTINGSERVICE/Charts?',\r\n reportExtraParams: '&rs:Command=Render&rc:Parameters=false&',\r\n reportViewType: '/SSSAS_TabularReports/',\r\n VRNMappingMasterId: '',\r\n };\r\n this.getSuspiciousData = this.getSuspiciousData.bind(this);\r\n this.getSuspiciousTable1Data = this.getSuspiciousTable1Data.bind(this);\r\n this.optionChange = this.optionChange.bind(this)\r\n this.groupChange = this.groupChange.bind(this)\r\n this.vehicleChange = this.vehicleChange.bind(this)\r\n this.changeOptionTime = this.changeOptionTime.bind(this)\r\n this.changeOptionView = this.changeOptionView.bind(this)\r\n\r\n\r\n this.changeOptionTime1 = this.changeOptionTime1.bind(this)\r\n this.changeOptionTime2 = this.changeOptionTime2.bind(this)\r\n\r\n this.optionChange2 = this.optionChange2.bind(this)\r\n this.groupChange2 = this.groupChange2.bind(this)\r\n this.vehicleChange2 = this.vehicleChange2.bind(this)\r\n\r\n this.optionChange1 = this.optionChange1.bind(this)\r\n this.groupChange1 = this.groupChange1.bind(this)\r\n this.vehicleChange1 = this.vehicleChange1.bind(this)\r\n this.ViewOption1 = this.ViewOption1.bind(this)\r\n this.ViewOption2 = this.ViewOption2.bind(this)\r\n this.ViewOption3 = this.ViewOption3.bind(this)\r\n\r\n this.BulletInOptionChange = this.BulletInOptionChange.bind(this)\r\n this.BulletInVehicleChange = this.BulletInVehicleChange.bind(this)\r\n this.BulletInGroupChange = this.BulletInGroupChange.bind(this)\r\n }\r\n\r\n getSuspiciousData() {\r\n axiosConfig.post('Portal/GetDashBoardSuspiciousTransAnalytics', {\r\n \"UserAccountBranchID\": localStorage.getItem('selectedBranch'),\r\n \"SearchTypeId\": 1,\r\n \"CardMappingMasterId\": 0,\r\n \"VRNGroupMasterId\": 0,\r\n \"StartTime\": this.state.fromDate,\r\n \"EndTime\": this.state.toDate,\r\n })\r\n .then((res) => {\r\n this.setState({ suspiciousdata: res.data.suspiciousTranAnalytics[0] })\r\n })\r\n .catch(console.error)\r\n .finally(() => {\r\n\r\n });\r\n }\r\n\r\n componentDidMount() {\r\n\r\n this.getTabularData();\r\n this.getSuspiciousData();\r\n //this.getSuspiciousTable1Data();\r\n this.GenerateGeneric_BarGraph();\r\n this.GenerateGeneric_PieGraph();\r\n\r\n }\r\n\r\n\r\n async changeOptionView(selectedOption) {\r\n await this.setState({ SelectChartView: selectedOption.value })\r\n this.getTabularData()\r\n }\r\n\r\n async changeOptionTime(selectedOption) {\r\n await this.setState({ TimeFrameId: selectedOption.value })\r\n }\r\n\r\n async optionChange(selectedOption) {\r\n\r\n if (selectedOption == 1) {\r\n\r\n await this.setState({ Option: selectedOption, Group: 0, Vehicle: 0 })\r\n this.getSuspiciousTable1Data()\r\n }\r\n else\r\n await this.setState({ Option: selectedOption, Group: 0, Vehicle: 0 })\r\n }\r\n\r\n async vehicleChange(selectedVehicle) {\r\n\r\n\r\n await this.setState({ Vehicle: selectedVehicle, Group: 0 })\r\n this.getSuspiciousTable1Data()\r\n }\r\n\r\n async groupChange(selectedGroup) {\r\n\r\n await this.setState({ Group: selectedGroup, Vehicle: 0 })\r\n this.getSuspiciousTable1Data()\r\n }\r\n\r\n\r\n getSuspiciousTable1Data() {\r\n\r\n axiosConfig.post('Portal/GetHighestSuspiciousActivityEvent', {\r\n \"TimeFrame\": this.state.TimeFrameId,\r\n \"SearchTypeId\": this.state.Option,\r\n \"CardMappingMasterId\": this.state.Vehicle,\r\n \"VRNGroupMasterId\": this.state.Group,\r\n \"UserAccountBranchId\": localStorage.getItem('selectedBranch'),\r\n \"SuspicousViewId\": this.state.ViewId,\r\n })\r\n .then((res) => {\r\n this.setState({ data: res.data.suspiciousActivity })\r\n })\r\n .catch(console.error)\r\n .finally(() => {\r\n\r\n });\r\n }\r\n\r\n\r\n async GenerateGeneric_BarGraph() {\r\n\r\n let ReportName = \"BarChart_SuspeciousTrans\"\r\n\r\n /*Location Mismatch*/\r\n let DateRange = this.state.TimeFrameId2;\r\n this.setState({ showReport: false })\r\n let UserBranchID = localStorage.getItem('selectedBranch')\r\n let reportName = ReportName;\r\n let URL_PARAMETERS = 'reportName=' + reportName + '&SelectededSupect=Location Mismatch&SelectedCriteria=' + this.state.searchCriteria2 + '&SelectChartView=' + this.state.SelectChartView2 + '&DateRange=' + DateRange + '&userBranchID=' + UserBranchID + '&token=' + localStorage.getItem('token')\r\n\r\n if (this.state.searchCriteria1 == \"vrngroup\" && this.state.VRNGroupMasterId != \"\") {\r\n URL_PARAMETERS = 'reportName=' + reportName + '&VRNGroupingID=' + this.state.VRNGroupMasterId + '&SelectededSupect=Location Mismatch&SelectedCriteria=' + this.state.searchCriteria2 + '&DateRange=' + DateRange + '&userBranchID=' + UserBranchID + '&token=' + localStorage.getItem('token')\r\n }\r\n else if (this.state.searchCriteria1 == \"vrn\" && this.state.VRNMappingMasterId != \"\") {\r\n URL_PARAMETERS = 'reportName=' + reportName + '&MappingMasterID=' + this.state.VRNMappingMasterId + '&SelectededSupect=Location Mismatch&SelectedCriteria=' + this.state.searchCriteria2 + '&DateRange=' + DateRange + '&userBranchID=' + UserBranchID + '&token=' + localStorage.getItem('token')\r\n }\r\n let reportViewType = this.state.reportViewType\r\n let ReportFullURL = this.state.reportBaseURL + URL_PARAMETERS\r\n console.log('URL Generated: ', ReportFullURL)\r\n this.setState({ srcURL_Location_Mismatch_Transactions_bar: ReportFullURL, showReport: true })\r\n\r\n\r\n /*Low Vehicle Shel Card Milleage*/\r\n reportName = ReportName;\r\n URL_PARAMETERS = 'reportName=' + reportName + '&SelectededSupect=LVSCM&SelectedCriteria=' + this.state.searchCriteria2 + '&SelectChartView=' + this.state.SelectChartView2 + '&DateRange=' + DateRange + '&userBranchID=' + UserBranchID + '&token=' + localStorage.getItem('token')\r\n if (this.state.searchCriteria1 == \"vrngroup\" && this.state.VRNGroupMasterId != \"\") {\r\n URL_PARAMETERS = 'reportName=' + reportName + '&VRNGroupingID=' + this.state.VRNGroupMasterId + '&SelectededSupect=LVSCM&SelectedCriteria=' + this.state.searchCriteria2 + '&DateRange=' + DateRange + '&userBranchID=' + UserBranchID + '&token=' + localStorage.getItem('token')\r\n }\r\n else if (this.state.searchCriteria1 == \"vrn\" && this.state.VRNMappingMasterId != \"\") {\r\n URL_PARAMETERS = 'reportName=' + reportName + '&MappingMasterID=' + this.state.VRNMappingMasterId + '&SelectededSupect=LVSCM&SelectedCriteria=' + this.state.searchCriteria2 + '&DateRange=' + DateRange + '&userBranchID=' + UserBranchID + '&token=' + localStorage.getItem('token')\r\n }\r\n reportViewType = this.state.reportViewType\r\n ReportFullURL = this.state.reportBaseURL + URL_PARAMETERS\r\n console.log('URL Generated: ', ReportFullURL)\r\n await this.setState({ srcURL_Low_Vehicle_Shell_Card_Mileage_Transactions_Transactions_bar: ReportFullURL, showReport: true })\r\n\r\n\r\n /*Volume Mismatch*/\r\n reportName = ReportName;\r\n URL_PARAMETERS = 'reportName=' + reportName + '&SelectededSupect=Volume Mismatch&SelectedCriteria=' + this.state.searchCriteria2 + '&SelectChartView=' + this.state.SelectChartView2 + '&DateRange=' + DateRange + '&userBranchID=' + UserBranchID + '&token=' + localStorage.getItem('token')\r\n if (this.state.searchCriteria1 == \"vrngroup\" && this.state.VRNGroupMasterId != \"\") {\r\n URL_PARAMETERS = 'reportName=' + reportName + '&VRNGroupingID=' + this.state.VRNGroupMasterId + '&SelectededSupect=Volume Mismatch&SelectedCriteria=' + this.state.searchCriteria2 + '&DateRange=' + DateRange + '&userBranchID=' + UserBranchID + '&token=' + localStorage.getItem('token')\r\n }\r\n else if (this.state.searchCriteria1 == \"vrn\" && this.state.VRNMappingMasterId != \"\") {\r\n URL_PARAMETERS = 'reportName=' + reportName + '&MappingMasterID=' + this.state.VRNMappingMasterId + '&SelectededSupect=Volume Mismatch&SelectedCriteria=' + this.state.searchCriteria2 + '&DateRange=' + DateRange + '&userBranchID=' + UserBranchID + '&token=' + localStorage.getItem('token')\r\n }\r\n reportViewType = this.state.reportViewType\r\n ReportFullURL = this.state.reportBaseURL + URL_PARAMETERS\r\n console.log('URL Generated: ', ReportFullURL)\r\n await this.setState({ srcURL_Volume_Mismatch_Transactions_bar: ReportFullURL, showReport: true })\r\n\r\n\r\n /*Deviation*/\r\n reportName = ReportName;\r\n URL_PARAMETERS = 'reportName=' + reportName + '&SelectededSupect=Deviation&SelectedCriteria=' + this.state.searchCriteria2 + '&SelectChartView=' + this.state.SelectChartView2 + '&DateRange=' + DateRange + '&userBranchID=' + UserBranchID + '&token=' + localStorage.getItem('token')\r\n if (this.state.searchCriteria1 == \"vrngroup\" && this.state.VRNGroupMasterId != \"\") {\r\n URL_PARAMETERS = 'reportName=' + reportName + '&VRNGroupingID=' + this.state.VRNGroupMasterId + '&SelectededSupect=Deviation&SelectedCriteria=' + this.state.searchCriteria2 + '&DateRange=' + DateRange + '&userBranchID=' + UserBranchID + '&token=' + localStorage.getItem('token')\r\n }\r\n else if (this.state.searchCriteria1 == \"vrn\" && this.state.VRNMappingMasterId != \"\") {\r\n URL_PARAMETERS = 'reportName=' + reportName + '&MappingMasterID=' + this.state.VRNMappingMasterId + '&SelectededSupect=Deviation&SelectedCriteria=' + this.state.searchCriteria2 + '&DateRange=' + DateRange + '&userBranchID=' + UserBranchID + '&token=' + localStorage.getItem('token')\r\n }\r\n reportViewType = this.state.reportViewType\r\n ReportFullURL = this.state.reportBaseURL + URL_PARAMETERS\r\n console.log('URL Generated: ', ReportFullURL)\r\n await this.setState({ srcURL_Deviated_Routes_Transactions_bar: ReportFullURL, showReport: true })\r\n\r\n\r\n /*Excessive Fueling*/\r\n reportName = ReportName;\r\n URL_PARAMETERS = 'reportName=' + reportName + '&SelectededSupect=Excessive Fueling&SelectedCriteria=' + this.state.searchCriteria2 + '&SelectChartView=' + this.state.SelectChartView2 + '&DateRange=' + DateRange + '&userBranchID=' + UserBranchID + '&token=' + localStorage.getItem('token')\r\n if (this.state.searchCriteria1 == \"vrngroup\" && this.state.VRNGroupMasterId != \"\") {\r\n URL_PARAMETERS = 'reportName=' + reportName + '&VRNGroupingID=' + this.state.VRNGroupMasterId + '&SelectededSupect=Excessive Fueling&SelectedCriteria=' + this.state.searchCriteria2 + '&DateRange=' + DateRange + '&userBranchID=' + UserBranchID + '&token=' + localStorage.getItem('token')\r\n }\r\n else if (this.state.searchCriteria1 == \"vrn\" && this.state.VRNMappingMasterId != \"\") {\r\n URL_PARAMETERS = 'reportName=' + reportName + '&MappingMasterID=' + this.state.VRNMappingMasterId + '&SelectededSupect=Excessive Fueling&SelectedCriteria=' + this.state.searchCriteria2 + '&DateRange=' + DateRange + '&userBranchID=' + UserBranchID + '&token=' + localStorage.getItem('token')\r\n }\r\n\r\n reportViewType = this.state.reportViewType\r\n ReportFullURL = this.state.reportBaseURL + URL_PARAMETERS\r\n console.log('URL Generated: ', ReportFullURL)\r\n await this.setState({ srcURL_Excessive_Daily_Fueling_bar: ReportFullURL, showReport: true })\r\n\r\n }\r\n\r\n async GenerateGeneric_PieGraph() {\r\n\r\n let ReportName = \"PieChart_ShellSuspeciousCardTransaction\"\r\n\r\n // await this.setState({ searchCriteria1:\"vrngroup\",VRNGroupMasterId:selectedGroup})\r\n let MonthNo = this.state.TimeFrameId1;\r\n this.setState({ showReport: false })\r\n let UserBranchID = localStorage.getItem('selectedBranch')\r\n let reportName = ReportName;\r\n let URL_PARAMETERS = 'reportName=' + reportName + '&SelectededSupect=Location Mismatch&SelectChartView=' + this.state.SelectChartView1 + '&MonthNo=' + MonthNo + '&userBranchID=' + UserBranchID + '&token=' + localStorage.getItem('token')\r\n\r\n if (this.state.searchCriteria1 == \"vrngroup\") {\r\n URL_PARAMETERS = 'reportName=' + reportName + '&VRNGroupingID=' + this.state.VRNGroupMasterId + '&SelectededSupect=Location Mismatch&SelectChartView=' + this.state.SelectChartView1 + '&MonthNo=' + MonthNo + '&userBranchID=' + UserBranchID + '&token=' + localStorage.getItem('token')\r\n }\r\n\r\n\r\n let reportViewType = this.state.reportViewType\r\n let ReportFullURL = this.state.reportBaseURL + URL_PARAMETERS\r\n this.setState({ srcURL_Location_Mismatch_Transactions_Pie: ReportFullURL, showReport: true })\r\n\r\n reportName = ReportName;\r\n URL_PARAMETERS = 'reportName=' + reportName + '&SelectededSupect=LVSCM&SelectChartView=' + this.state.SelectChartView1 + '&MonthNo=' + MonthNo + '&userBranchID=' + UserBranchID + '&token=' + localStorage.getItem('token')\r\n if (this.state.searchCriteria1 == \"vrngroup\") {\r\n URL_PARAMETERS = 'reportName=' + reportName + '&VRNGroupingID=' + this.state.VRNGroupMasterId + '&SelectededSupect=LVSCM&SelectChartView=' + this.state.SelectChartView1 + '&MonthNo=' + MonthNo + '&userBranchID=' + UserBranchID + '&token=' + localStorage.getItem('token')\r\n }\r\n\r\n reportViewType = this.state.reportViewType\r\n ReportFullURL = this.state.reportBaseURL + URL_PARAMETERS\r\n await this.setState({ srcURL_Low_Vehicle_Shell_Card_Mileage_Transactions_Transactions_Pie: ReportFullURL, showReport: true })\r\n\r\n reportName = ReportName;\r\n URL_PARAMETERS = 'reportName=' + reportName + '&SelectededSupect=Volume Mismatch&SelectChartView=' + this.state.SelectChartView1 + '&MonthNo=' + MonthNo + '&userBranchID=' + UserBranchID + '&token=' + localStorage.getItem('token')\r\n if (this.state.searchCriteria1 == \"vrngroup\") {\r\n URL_PARAMETERS = 'reportName=' + reportName + '&VRNGroupingID=' + this.state.VRNGroupMasterId + '&SelectededSupect=Volume Mismatch&SelectChartView=' + this.state.SelectChartView1 + '&MonthNo=' + MonthNo + '&userBranchID=' + UserBranchID + '&token=' + localStorage.getItem('token')\r\n }\r\n\r\n reportViewType = this.state.reportViewType\r\n ReportFullURL = this.state.reportBaseURL + URL_PARAMETERS\r\n await this.setState({ srcURL_Volume_Mismatch_Transactions_Pie: ReportFullURL, showReport: true })\r\n\r\n reportName = ReportName;\r\n URL_PARAMETERS = 'reportName=' + reportName + '&SelectededSupect=Deviation&SelectChartView=' + this.state.SelectChartView1 + '&MonthNo=' + MonthNo + '&userBranchID=' + UserBranchID + '&token=' + localStorage.getItem('token')\r\n if (this.state.searchCriteria1 == \"vrngroup\") {\r\n URL_PARAMETERS = 'reportName=' + reportName + '&VRNGroupingID=' + this.state.VRNGroupMasterId + '&SelectededSupect=Deviation&SelectChartView=' + this.state.SelectChartView1 + '&MonthNo=' + MonthNo + '&userBranchID=' + UserBranchID + '&token=' + localStorage.getItem('token')\r\n }\r\n reportViewType = this.state.reportViewType\r\n ReportFullURL = this.state.reportBaseURL + URL_PARAMETERS\r\n await this.setState({ srcURL_Deviated_Routes_Transactions_Pie: ReportFullURL, showReport: true })\r\n\r\n reportName = ReportName;\r\n URL_PARAMETERS = 'reportName=' + reportName + '&SelectededSupect=Excessive Fueling&SelectChartView=' + this.state.SelectChartView1 + '&MonthNo=' + MonthNo + '&userBranchID=' + UserBranchID + '&token=' + localStorage.getItem('token')\r\n if (this.state.searchCriteria1 == \"vrngroup\") {\r\n URL_PARAMETERS = 'reportName=' + reportName + '&VRNGroupingID=' + this.state.VRNGroupMasterId + '&SelectededSupect=Excessive Fueling&SelectChartView=' + this.state.SelectChartView1 + '&MonthNo=' + MonthNo + '&userBranchID=' + UserBranchID + '&token=' + localStorage.getItem('token')\r\n }\r\n reportViewType = this.state.reportViewType\r\n ReportFullURL = this.state.reportBaseURL + URL_PARAMETERS\r\n await this.setState({ srcURL_Excessive_Daily_Fueling_Pie: ReportFullURL, showReport: true })\r\n\r\n }\r\n\r\n /*Start:For Pie Chart*/\r\n async changeOptionTime1(selectedOption) {\r\n\r\n await this.setState({ TimeFrameId1: selectedOption.value })\r\n\r\n this.GenerateGeneric_PieGraph();\r\n }\r\n\r\n async optionChange1(selectedOption) {\r\n\r\n if (selectedOption == 1) {\r\n await this.setState({ searchCriteria1: \"vrn\" })\r\n this.GenerateGeneric_PieGraph();\r\n\r\n }\r\n else\r\n await this.setState({ Option1: selectedOption, Group1: 0, Vehicle1: 0 })\r\n }\r\n\r\n async vehicleChange1(selectedVehicle) {\r\n\r\n\r\n await this.setState({ Vehicle1: selectedVehicle, Group1: 0 })\r\n\r\n }\r\n\r\n async groupChange1(selectedGroup) {\r\n\r\n await this.setState({ searchCriteria1: \"vrngroup\", VRNGroupMasterId: selectedGroup })\r\n this.GenerateGeneric_PieGraph();\r\n\r\n }\r\n\r\n async ViewOption1(selectedView) {\r\n if (selectedView.value === \"No\")\r\n await this.setState({ SelectChartView1: \"No\" })\r\n else\r\n await this.setState({ SelectChartView1: \"PKR\" })\r\n\r\n this.GenerateGeneric_PieGraph()\r\n }\r\n\r\n async ViewOption2(selectedView) {\r\n if (selectedView.value === \"No\")\r\n await this.setState({ SelectChartView2: \"No\" })\r\n else\r\n await this.setState({ SelectChartView2: \"PKR\" })\r\n\r\n this.GenerateGeneric_BarGraph()\r\n }\r\n\r\n async ViewOption3(selectedView) {\r\n\r\n console.log('ViewOption3');\r\n\r\n if (selectedView.value === \"No\")\r\n await this.setState({ SelectChartView3: \"No\" })\r\n else\r\n await this.setState({ SelectChartView3: \"PKR\" })\r\n\r\n this.getTabularData()\r\n }\r\n\r\n /*End: For Pie Chart*/\r\n\r\n /*Start:For Bar Chart*/\r\n async changeOptionTime2(selectedOption) {\r\n\r\n await this.setState({ TimeFrameId2: selectedOption.value })\r\n }\r\n\r\n async optionChange2(selectedOption) {\r\n if (selectedOption == 1) {\r\n\r\n await this.setState({ Option2: selectedOption, Group2: 0, Vehicle2: 0 })\r\n await this.setState({ searchCriteria2: \"vrn\" })\r\n this.GenerateGeneric_BarGraph();\r\n\r\n }\r\n else\r\n await this.setState({ Option2: selectedOption, Group2: 0, Vehicle2: 0 })\r\n }\r\n\r\n async vehicleChange2(selectedVehicle) {\r\n await this.setState({ searchCriteria1: \"vrn\", VRNMappingMasterId: selectedVehicle })\r\n this.GenerateGeneric_BarGraph();\r\n }\r\n\r\n async groupChange2(selectedGroup) {\r\n\r\n\r\n await this.setState({ searchCriteria1: \"vrngroup\", VRNGroupMasterId: selectedGroup })\r\n this.GenerateGeneric_BarGraph();\r\n // this.getHighestHSSEEventTable1Data()\r\n }\r\n\r\n\r\n /* Start of Tabular Data */\r\n\r\n async BulletInOptionChange(selectedOption) {\r\n if (selectedOption == 1) {\r\n await this.setState({ BulletInsearchCriteria: \"vrn\" })\r\n this.getTabularData();\r\n }\r\n else\r\n await this.setState({ BulletInOption: selectedOption, BulletInGroup: 0 })\r\n }\r\n\r\n async BulletInVehicleChange(selectedVehicle) {\r\n\r\n\r\n // await this.setState({ Vehicle: selectedVehicle, Group: 0 })\r\n\r\n }\r\n\r\n async BulletInGroupChange(selectedGroup) {\r\n\r\n await this.setState({ BulletInsearchCriteria: \"vrngroup\", BulletInVRNGroupMultiID: selectedGroup })\r\n this.getTabularData();\r\n\r\n }\r\n\r\n /* End of Tabular Data */\r\n\r\n async getTabularData() {\r\n let DateRange = this.state.BulletTimeFrame;\r\n // this.setState({ showReport: false })\r\n let UserBranchID = localStorage.getItem('selectedBranch')\r\n let reportName = \"SuspeciousTransMinAvgMaxTrend\";\r\n let URL_PARAMETERS = 'reportName=' + reportName + '&SelectChartView=' + this.state.SelectChartView3 + '&DateRange=' + DateRange + '&userBranchID=' + UserBranchID + '&token=' + localStorage.getItem('token')\r\n if (this.state.BulletInsearchCriteria == \"vrngroup\") {\r\n URL_PARAMETERS = 'reportName=' + reportName + '&SelectChartView=' + this.state.SelectChartView3 + '&VRNGroupingID=' + this.state.BulletInVRNGroupMultiID + '&DateRange=' + DateRange + '&userBranchID=' + UserBranchID + '&token=' + localStorage.getItem('token')\r\n }\r\n\r\n let reportViewType = this.state.reportViewType\r\n let ReportFullURL = this.state.reportBaseURL + URL_PARAMETERS\r\n console.log('URL Generated: ', ReportFullURL)\r\n await this.setState({ srcURL_SuspiciousBulletin: ReportFullURL })\r\n }\r\n\r\n render() {\r\n\r\n return (\r\n\r\n \r\n
\r\n\r\n
\r\n {/* \r\n \r\n */}\r\n \r\n \r\n \r\n \r\n For more details on your fleet’s performance, click here to visit My Reports
\r\n \r\n \r\n \r\n\r\n
\r\n\r\n \r\n \r\n \r\n \r\n
\r\n\r\n \r\n\r\n \r\n \r\n Suspicious Transactions Bulletin \r\n \r\n\r\n\r\n \r\n \r\n
\r\n\r\n \r\n
Choose View \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n\r\n
\r\n\r\n \r\n
Choose Base \r\n \r\n \r\n */}\r\n\r\n
\r\n
\r\n\r\n
\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n
\r\n
\r\n\r\n \r\n \r\n\r\n\r\n \r\n\r\n
\r\n\r\n \r\n\r\n \r\n \r\n Suspicious Transactions Summary \r\n \r\n\r\n\r\n \r\n \r\n
\r\n\r\n \r\n
Choose Time Frame \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n\r\n
\r\n\r\n \r\n
Choose View \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n\r\n
\r\n\r\n \r\n
Choose Base \r\n \r\n \r\n
\r\n
\r\n\r\n
\r\n \r\n
\r\n\r\n\r\n \r\n \r\n\r\n
\r\n\r\n \r\n\r\n \r\n\r\n \r\n\r\n \r\n \r\n\r\n\r\n \r\n
\r\n\r\n \r\n\r\n \r\n\r\n \r\n \r\n \r\n\r\n\r\n \r\n
\r\n\r\n\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n\r\n\r\n\r\n\r\n
\r\n
\r\n \r\n
\r\n\r\n \r\n \r\n\r\n\r\n \r\n\r\n
\r\n\r\n\r\n{/* \r\n \r\n\r\n \r\n \r\n Suspicious Transactions Analysis \r\n \r\n\r\n\r\n \r\n \r\n
\r\n\r\n \r\n
Choose Time Frame \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n\r\n
\r\n\r\n \r\n
Choose View \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n\r\n
\r\n\r\n \r\n
Choose Base \r\n \r\n \r\n
\r\n
\r\n\r\n
\r\n \r\n
\r\n\r\n \r\n \r\n
\r\n\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n\r\n\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n\r\n\r\n
\r\n\r\n\r\n
\r\n \r\n
\r\n\r\n \r\n \r\n\r\n\r\n \r\n\r\n
\r\n */}\r\n\r\n \r\n
\r\n \r\n
\r\n )\r\n}\r\n\r\nclass HSSEEventsGraph extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n showReport: false,\r\n firstDay: new Date(firstDate.getFullYear(), firstDate.getMonth(), 1),\r\n fromDate: new Date(currentDate.getFullYear(), currentDate.getMonth(), 2).toISOString().substring(0, 10), //new Date(date.getFullYear(), date.getMonth(), 1);\r\n toDate: new Date().toISOString().substring(0, 10),\r\n \"OVER_SPEEDING\": {\r\n currentMonthReading: 0,\r\n previosMonthReading: 0,\r\n percentDifferent: 1\r\n },\r\n \"HARSH_BRAKING\": {\r\n currentMonthReading: 59,\r\n previosMonthReading: 60,\r\n percentDifferent: 1\r\n },\r\n \"HARSH_TURN\": {\r\n currentMonthReading: 0,\r\n previosMonthReading: 0,\r\n percentDifferent: 1\r\n },\r\n \"SEAT_BELT_VIOLATION\": {\r\n currentMonthReading: 0,\r\n previosMonthReading: 0,\r\n percentDifferent: 1\r\n },\r\n \"IDLING_TIME\": {\r\n currentMonthReading: 0,\r\n previosMonthReading: 0,\r\n percentDifferent: 1\r\n },\r\n \"HARSH_ACCELERATION\": {\r\n currentMonthReading: 0,\r\n previosMonthReading: 0,\r\n percentDifferent: 1\r\n },\r\n \"HSSE_SCORE\": {\r\n currentMonthReading: 0,\r\n previosMonthReading: 0,\r\n percentDifferent: 0\r\n },\r\n\r\n data: [],\r\n columns: [\r\n { \"HeaderText\": \"VRN\", \"MappingColomn\": \"vrn\" },\r\n { \"HeaderText\": \"Total HSSE Incident\", \"MappingColomn\": \"current_Month_Events\" },\r\n { \"HeaderText\": \"Last 3 Month Average\", \"MappingColomn\": \"last_3_months_average\" }\r\n ],\r\n PageSize: 5,\r\n timeFrameDropDownOptions: [\r\n { value: '1', label: 'Last 3 months' },\r\n { value: '2', label: 'Last 6 months' },\r\n { value: '3', label: 'Last 12 months' }\r\n ],\r\n timeFrameDropDownOptionsNew: [\r\n { value: 0, label: monthNames[current.getMonth()]},\r\n { value: 1, label: monthNames[current.getMonth()-1] },\r\n { value: 2 , label: monthNames[current.getMonth()-2] },\r\n { value: 3, label: monthNames[current.getMonth()-3] }\r\n ],\r\n\r\n BulletInOption: '',\r\n BulletInGroup: '',\r\n BulletInsearchCriteria: 'vrn',\r\n BulletInVRNGroupMultiID: '',\r\n BulletTimeFrame: 'three_month',\r\n\r\n\r\n Option: 1,\r\n Group: 0,\r\n Vehicle: 0,\r\n TimeFrameId: 1,\r\n\r\n searchCriteria2: 'vrn',\r\n Option2: 'vrn',\r\n Group2: '0',\r\n Group2Id: '',\r\n Vehicle2: '',\r\n Vehicle2Id: '',\r\n TimeFrameId2: 'three_month',\r\n\r\n\r\n searchCriteria1: 'vrn',\r\n Option1: 'vrn',\r\n Group1: '0',\r\n Group1Id: '',\r\n Vehicle1: '',\r\n Vehicle1Id: '',\r\n TimeFrameId1: 0,\r\n\r\n\r\n srcURL_HSSEScore_Pie: '',\r\n srcURL_HSSEIncidents_Pie: '',\r\n srcURL_HSSEScore_bar: '',\r\n srcURL_HSSEIncidents_bar: '',\r\n srcURL_HSSEBulletin: '',\r\n //reportBaseURL: 'http://localhost:40383/Charts?',\r\n reportBaseURL: 'https://shelltelematics.pk/TELEMATICSREPORTINGSERVICE/Charts?',\r\n reportExtraParams: '&rs:Command=Render&rc:Parameters=false&',\r\n reportViewType: '/SSSAS_TabularReports/',\r\n VRNMappingMasterId: '',\r\n VRNGroupMasterId: '',\r\n\r\n };\r\n\r\n this.optionChange = this.optionChange.bind(this)\r\n this.groupChange = this.groupChange.bind(this)\r\n this.vehicleChange = this.vehicleChange.bind(this)\r\n this.changeOptionTime = this.changeOptionTime.bind(this)\r\n this.getHighestHSSEEventTable1Data = this.getHighestHSSEEventTable1Data.bind(this)\r\n this.changeOptionTime1 = this.changeOptionTime1.bind(this)\r\n this.changeOptionTime2 = this.changeOptionTime2.bind(this)\r\n\r\n this.optionChange2 = this.optionChange2.bind(this)\r\n this.groupChange2 = this.groupChange2.bind(this)\r\n this.vehicleChange2 = this.vehicleChange2.bind(this)\r\n\r\n this.optionChange1 = this.optionChange1.bind(this)\r\n this.groupChange1 = this.groupChange1.bind(this)\r\n this.vehicleChange1 = this.vehicleChange1.bind(this)\r\n\r\n this.HSSEIncident_Pie = this.HSSEIncident_Pie.bind(this)\r\n this.HSSEIncident_bar = this.HSSEIncident_bar.bind(this)\r\n this.HSSEScore_Pie = this.HSSEScore_Pie.bind(this)\r\n this.HSSEScore_bar = this.HSSEScore_bar.bind(this)\r\n\r\n this.BulletInOptionChange = this.BulletInOptionChange.bind(this)\r\n this.BulletInVehicleChange = this.BulletInVehicleChange.bind(this)\r\n this.BulletInGroupChange = this.BulletInGroupChange.bind(this)\r\n\r\n }\r\n\r\n getHSSEAnalyticsData() {\r\n axiosConfig.post('Portal/GetFuelingSafetyEventData', {\r\n \"UserAccountBranchID\": localStorage.getItem('selectedBranch'),\r\n \"SearchTypeId\": 1,\r\n \"CardMappingMasterId\": 0,\r\n \"VRNGroupMasterId\": 0,\r\n \"StartTime\": this.state.fromDate,\r\n \"EndTime\": this.state.toDate,\r\n // \"NoOfRecords\":10\r\n })\r\n .then((res) => {\r\n for (var i = 0; i < res.data.eventAnalytics.length; i++) {\r\n this.setState((prevState) => ({\r\n [res.data.eventAnalytics[i].event]: {\r\n currentMonthReading: res.data.eventAnalytics[i].currentMonthReading,\r\n percentDifferent: res.data.eventAnalytics[i].percentDifferent,\r\n previosMonthReading: res.data.eventAnalytics[i].previosMonthReading,\r\n }\r\n }));\r\n }\r\n })\r\n .catch(console.error)\r\n .finally(() => {\r\n });\r\n }\r\n\r\n componentDidMount() {\r\n\r\n this.getTabularData();\r\n\r\n this.getHSSEAnalyticsData();\r\n // this.getHighestHSSEEventTable1Data();\r\n\r\n this.HSSEScore_Pie();\r\n this.HSSEIncident_Pie();\r\n // this.HSSEIncident_bar();\r\n // this.HSSEScore_bar();\r\n\r\n }\r\n\r\n getHighestHSSEEventTable1Data() {\r\n\r\n axiosConfig.post('Portal/GetHighestHSSEIncidentEvent', {\r\n \"TimeFrame\": this.state.TimeFrameId,\r\n \"SearchTypeId\": this.state.Option,\r\n \"CardMappingMasterId\": this.state.Vehicle,\r\n \"VRNGroupMasterId\": this.state.Group,\r\n \"UserAccountBranchId\": localStorage.getItem('selectedBranch'),\r\n })\r\n .then((res) => {\r\n this.setState({ data: res.data.highestEvent })\r\n })\r\n .catch(console.error)\r\n .finally(() => {\r\n\r\n });\r\n }\r\n async changeOptionTime(selectedOption) {\r\n await this.setState({ TimeFrameId: selectedOption.value })\r\n }\r\n\r\n async optionChange(selectedOption) {\r\n // if (this.state.Option != selectedOption && selectedOption == 1) {\r\n if (selectedOption == 1) {\r\n\r\n await this.setState({ Option: selectedOption, Group: 0, Vehicle: 0 })\r\n\r\n this.getHighestHSSEEventTable1Data();\r\n\r\n }\r\n else\r\n await this.setState({ Option: selectedOption, Group: 0, Vehicle: 0 })\r\n }\r\n\r\n async vehicleChange(selectedVehicle) {\r\n\r\n\r\n await this.setState({ Vehicle: selectedVehicle, Group: 0 })\r\n this.getHighestHSSEEventTable1Data()\r\n }\r\n\r\n async groupChange(selectedGroup) {\r\n\r\n await this.setState({ Group: selectedGroup, Vehicle: 0 })\r\n this.getHighestHSSEEventTable1Data()\r\n }\r\n\r\n\r\n /*Start:For Pie Chart*/\r\n async changeOptionTime1(selectedOption) {\r\n\r\n await this.setState({ TimeFrameId1: selectedOption.value })\r\n\r\n this.HSSEScore_Pie();\r\n this.HSSEIncident_Pie();\r\n }\r\n\r\n async optionChange1(selectedOption) {\r\n\r\n if (selectedOption == 1) {\r\n\r\n // await this.setState({ Option1: selectedOption, Group1: 0, Vehicle1: 0 })\r\n await this.setState({ searchCriteria1: \"vrn\" })\r\n this.HSSEScore_Pie();\r\n this.HSSEIncident_Pie();\r\n\r\n }\r\n else\r\n await this.setState({ Option1: selectedOption, Group1: 0, Vehicle1: 0 })\r\n }\r\n\r\n async vehicleChange1(selectedVehicle) {\r\n\r\n\r\n await this.setState({ Vehicle1: selectedVehicle, Group1: 0 })\r\n\r\n }\r\n\r\n async groupChange1(selectedGroup) {\r\n\r\n await this.setState({ searchCriteria1: \"vrngroup\", VRNGroupMasterId: selectedGroup })\r\n this.HSSEScore_Pie();\r\n this.HSSEIncident_Pie();\r\n\r\n }\r\n\r\n /*End: For Pie Chart*/\r\n\r\n /*Start:For Bar Chart*/\r\n async changeOptionTime2(selectedOption) {\r\n\r\n await this.setState({ TimeFrameId2: selectedOption.value })\r\n }\r\n\r\n async optionChange2(selectedOption) {\r\n\r\n if (selectedOption == 1) {\r\n\r\n await this.setState({ Option2: selectedOption, Group2: 0, Vehicle2: 0 })\r\n await this.setState({ searchCriteria2: \"vrn\" })\r\n this.HSSEIncident_bar();\r\n this.HSSEScore_bar();\r\n }\r\n else\r\n await this.setState({ Option2: selectedOption, Group2: 0, Vehicle2: 0 })\r\n }\r\n\r\n async vehicleChange2(selectedVehicle) {\r\n\r\n\r\n await this.setState({ searchCriteria1: \"vrn\", VRNMappingMasterId: selectedVehicle })\r\n this.HSSEScore_bar();\r\n this.HSSEIncident_bar();\r\n }\r\n\r\n async groupChange2(selectedGroup) {\r\n\r\n await this.setState({ searchCriteria1: \"vrngroup\", VRNGroupMasterId: selectedGroup })\r\n this.HSSEScore_bar();\r\n this.HSSEIncident_bar();\r\n }\r\n\r\n\r\n async HSSEScore_Pie() {\r\n\r\n let MonthNo = this.state.TimeFrameId1;\r\n this.setState({ showReport: false })\r\n let UserBranchID = localStorage.getItem('selectedBranch')\r\n let reportName = \"PieChart_HSSEScore\";\r\n let URL_PARAMETERS = 'reportName=' + reportName + '&SelectedCriteria=' + this.state.searchCriteria2 + '&MonthNo=' + MonthNo + '&userBranchID=' + UserBranchID + '&token=' + localStorage.getItem('token')\r\n if (this.state.searchCriteria1 == \"vrngroup\") {\r\n URL_PARAMETERS = 'reportName=' + reportName + '&VRNGroupingID=' + this.state.VRNGroupMasterId + '&SelectedCriteria=' + this.state.searchCriteria1 + '&MonthNo=' + MonthNo + '&userBranchID=' + UserBranchID + '&token=' + localStorage.getItem('token')\r\n }\r\n let reportViewType = this.state.reportViewType\r\n let ReportFullURL = this.state.reportBaseURL + URL_PARAMETERS\r\n await this.setState({ srcURL_HSSEScore_Pie: ReportFullURL, showReport: true })\r\n }\r\n\r\n async HSSEIncident_Pie() {\r\n\r\n let MonthNo = this.state.TimeFrameId1;\r\n this.setState({ showReport: false })\r\n let UserBranchID = localStorage.getItem('selectedBranch')\r\n let reportName = \"PieChart_HSSEViolations\";\r\n let URL_PARAMETERS = 'reportName=' + reportName + '&SelectedCriteria=' + this.state.searchCriteria1 + '&MonthNo=' + MonthNo + '&userBranchID=' + UserBranchID + '&token=' + localStorage.getItem('token')\r\n if (this.state.searchCriteria1 == \"vrngroup\") {\r\n URL_PARAMETERS = 'reportName=' + reportName + '&VRNGroupingID=' + this.state.VRNGroupMasterId + '&SelectedCriteria=' + this.state.searchCriteria1 + '&MonthNo=' + MonthNo + '&userBranchID=' + UserBranchID + '&token=' + localStorage.getItem('token')\r\n }\r\n\r\n let reportViewType = this.state.reportViewType\r\n let ReportFullURL = this.state.reportBaseURL + URL_PARAMETERS\r\n await this.setState({ srcURL_HSSEIncidents_Pie: ReportFullURL, showReport: true })\r\n }\r\n\r\n async HSSEScore_bar() {\r\n\r\n let DateRange = this.state.TimeFrameId2;\r\n this.setState({ showReport: false })\r\n let UserBranchID = localStorage.getItem('selectedBranch')\r\n let reportName = \"BarChart_HSSEScore\";\r\n let URL_PARAMETERS = 'reportName=' + reportName + '&SelectedCriteria=' + this.state.searchCriteria2 + '&DateRange=' + DateRange + '&userBranchID=' + UserBranchID + '&token=' + localStorage.getItem('token')\r\n\r\n URL_PARAMETERS = 'reportName=' + reportName + '&SelectedCriteria=' + this.state.searchCriteria2 + '&DateRange=' + DateRange + '&userBranchID=' + UserBranchID + '&token=' + localStorage.getItem('token')\r\n if (this.state.searchCriteria1 == \"vrngroup\" && this.state.VRNGroupMasterId != \"\") {\r\n URL_PARAMETERS = 'reportName=' + reportName + '&VRNGroupingID=' + this.state.VRNGroupMasterId + '&SelectedCriteria=' + this.state.searchCriteria2 + '&DateRange=' + DateRange + '&userBranchID=' + UserBranchID + '&token=' + localStorage.getItem('token')\r\n }\r\n else if (this.state.searchCriteria1 == \"vrn\" && this.state.VRNMappingMasterId != \"\") {\r\n URL_PARAMETERS = 'reportName=' + reportName + '&MappingMasterID=' + this.state.VRNMappingMasterId + '&SelectedCriteria=' + this.state.searchCriteria2 + '&DateRange=' + DateRange + '&userBranchID=' + UserBranchID + '&token=' + localStorage.getItem('token')\r\n }\r\n\r\n let reportViewType = this.state.reportViewType\r\n let ReportFullURL = this.state.reportBaseURL + URL_PARAMETERS\r\n console.log('URL Generated: ', ReportFullURL)\r\n await this.setState({ srcURL_HSSEScore_bar: ReportFullURL, showReport: true })\r\n }\r\n async HSSEIncident_bar() {\r\n\r\n let DateRange = this.state.TimeFrameId2;\r\n this.setState({ showReport: false })\r\n let UserBranchID = localStorage.getItem('selectedBranch')\r\n let reportName = \"BarChart_HSSEViolations\";\r\n let URL_PARAMETERS = 'reportName=' + reportName + '&SelectedCriteria=' + this.state.searchCriteria2 + '&DateRange=' + DateRange + '&userBranchID=' + UserBranchID + '&token=' + localStorage.getItem('token')\r\n if (this.state.searchCriteria1 == \"vrngroup\" && this.state.VRNGroupMasterId != \"\") {\r\n URL_PARAMETERS = 'reportName=' + reportName + '&VRNGroupingID=' + this.state.VRNGroupMasterId + '&SelectedCriteria=' + this.state.searchCriteria2 + '&DateRange=' + DateRange + '&userBranchID=' + UserBranchID + '&token=' + localStorage.getItem('token')\r\n }\r\n else if (this.state.searchCriteria1 == \"vrn\" && this.state.VRNMappingMasterId != \"\") {\r\n URL_PARAMETERS = 'reportName=' + reportName + '&MappingMasterID=' + this.state.VRNMappingMasterId + '&SelectedCriteria=' + this.state.searchCriteria2 + '&DateRange=' + DateRange + '&userBranchID=' + UserBranchID + '&token=' + localStorage.getItem('token')\r\n }\r\n\r\n let reportViewType = this.state.reportViewType\r\n let ReportFullURL = this.state.reportBaseURL + URL_PARAMETERS\r\n console.log('URL Generated: ', ReportFullURL)\r\n await this.setState({ srcURL_HSSEIncident_bar: ReportFullURL, showReport: true })\r\n }\r\n\r\n /*End:For Bar Chart*/\r\n\r\n /* Start of Tabular Data */\r\n\r\n async BulletInOptionChange(selectedOption) {\r\n console.log(\"selected option is now \", selectedOption)\r\n if (selectedOption == 1) {\r\n await this.setState({ BulletInsearchCriteria: \"vrn\" })\r\n this.getTabularData();\r\n }\r\n else\r\n await this.setState({ BulletInOption: selectedOption, BulletInGroup: 0 })\r\n }\r\n \r\n async BulletInVehicleChange(selectedVehicle) {\r\n \r\n \r\n // await this.setState({ Vehicle: selectedVehicle, Group: 0 })\r\n \r\n }\r\n \r\n async BulletInGroupChange(selectedGroup) {\r\n //console.log(\"Select Groups are :\", selectedGroup)\r\n \r\n await this.setState({ BulletInsearchCriteria: \"vrngroup\", BulletInVRNGroupMultiID: selectedGroup })\r\n this.getTabularData();\r\n \r\n }\r\n \r\n /* End of Tabular Data */\r\n\r\n async getTabularData() {\r\n let DateRange = this.state.BulletTimeFrame;\r\n // this.setState({ showReport: false })\r\n let UserBranchID = localStorage.getItem('selectedBranch')\r\n let reportName = \"SafetyMinAvgMaxTrend\";\r\n let URL_PARAMETERS = 'reportName=' + reportName + '&DateRange=' + DateRange + '&userBranchID=' + UserBranchID + '&token=' + localStorage.getItem('token')\r\n if (this.state.BulletInsearchCriteria == \"vrngroup\") {\r\n URL_PARAMETERS = 'reportName=' + reportName + '&VRNGroupingID=' + this.state.BulletInVRNGroupMultiID + '&DateRange=' + DateRange + '&userBranchID=' + UserBranchID + '&token=' + localStorage.getItem('token')\r\n }\r\n \r\n let reportViewType = this.state.reportViewType\r\n let ReportFullURL = this.state.reportBaseURL + URL_PARAMETERS\r\n console.log('URL Generated: ', ReportFullURL)\r\n await this.setState({ srcURL_HSSEBulletin: ReportFullURL})\r\n }\r\n\r\n\r\n\r\n render() {\r\n\r\n return (\r\n\r\n \r\n\r\n
\r\n {/* \r\n \r\n */}\r\n \r\n \r\n \r\n \r\n For more details on your fleet’s performance, click here to visit My Reports
\r\n \r\n \r\n \r\n\r\n
\r\n\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n\r\n
\r\n \r\n
\r\n Safety \r\n \r\n
\r\n
\r\n \r\n {/* \r\n\r\n 3 Hours\" cssName=\"avatar bg-rgba-success p-50 m-0 mb-1\" />\r\n */}\r\n\r\n \r\n
\r\n\r\n\r\n \r\n\r\n \r\n \r\n Safety Bulletin \r\n \r\n\r\n\r\n \r\n \r\n
\r\n\r\n \r\n
Choose Time Frame \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n\r\n
\r\n\r\n \r\n
Choose Base \r\n \r\n \r\n\r\n
\r\n
\r\n\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n\r\n \r\n \r\n\r\n \r\n\r\n\r\n
\r\n\r\n \r\n\r\n \r\n \r\n Safety Summary \r\n \r\n\r\n\r\n \r\n \r\n
\r\n\r\n \r\n
Choose Time Frame \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n\r\n
\r\n\r\n \r\n
Choose Base \r\n \r\n \r\n
\r\n
\r\n\r\n
\r\n \r\n
\r\n \r\n \r\n\r\n\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n
\r\n \r\n
\r\n\r\n \r\n \r\n\r\n\r\n \r\n\r\n
\r\n{/* \r\n \r\n \r\n \r\n HSSE Analysis \r\n \r\n\r\n\r\n \r\n \r\n
\r\n\r\n \r\n
Choose Time Frame \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n\r\n
\r\n\r\n \r\n
Choose Base \r\n \r\n \r\n
\r\n
\r\n\r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n\r\n
\r\n
\r\n \r\n
\r\n\r\n \r\n \r\n\r\n\r\n\r\n \r\n
\r\n */}\r\n\r\n \r\n
console.log(evt)} \r\n onClick={this.onMarkerClick}\r\n\r\n\r\n />\r\n })\r\n }\r\n\r\n render() {\r\n if (!this.props.google) {\r\n return Loading...
;\r\n }\r\n\r\n return (\r\n\r\n\r\n \r\n Selected Pointers \r\n\r\n \r\n {/* David Copperfield \r\n The Portrait of a Lady \r\n The Trial */}\r\n\r\n {\r\n this.state.allSelectedPlaces.map((el, index) => {\r\n //console.log(el)\r\n return(\r\n \r\n \r\n\r\n \r\n \r\n {/* \r\n \r\n
{this.state.selectedPlace.name} \r\n \r\n \r\n \r\n \r\n
\r\n\r\n\r\n\r\n\r\n\r\n // \r\n\r\n // \r\n );\r\n }\r\n}\r\nexport default GoogleApiWrapper({\r\n apiKey: \"AIzaSyAyesbQMyKVVbBgKVi2g6VX7mop2z96jBo\",\r\n v: \"3.30\"\r\n})(MapContainer);\r\n","import React, { Component, useState, useRef } from 'react'\r\nimport { CardDeck, Row, Col, Container, Card, Button, OverlayTrigger, Popover,Overlay } from 'react-bootstrap'\r\nimport { DataTable } from 'primereact/datatable';\r\nimport { Column } from 'primereact/column';\r\nimport 'primereact/resources/themes/saga-blue/theme.css';\r\nimport 'primereact/resources/primereact.min.css';\r\nimport 'primeicons/primeicons.css';\r\nimport 'bootstrap/dist/css/bootstrap.css';\r\nimport FeatherIcon from 'feather-icons-react';\r\nclass SelectionTable extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n\r\n this.dt = React.createRef();\r\n\r\n\r\n this.state = {\r\n\r\n globalSearchBox: '',\r\n\r\n data: this.props.data,\r\n columns: this.props.columns,\r\n PageSize:5,\r\n selectedProducts: ''\r\n };\r\n\r\n this.onChange = this.onChange.bind(this);\r\n this.exportCSV=this.exportCSV.bind(this);\r\n this.saveAsExcelFile=this.saveAsExcelFile.bind(this);\r\n this.exportExcel=this.exportExcel.bind(this);\r\n this.onSelectionChange = this.onSelection.bind(this)\r\n }\r\n componentWillReceiveProps(nextProps) {\r\n this.setState({data: nextProps.data})\r\n }\r\n onChange(e) {\r\n console.log(e.target.value);\r\n this.setState(\r\n { [e.target.name]: e.target.value }\r\n )\r\n\r\n }\r\n\r\n onSelection(e) {\r\n console.log(e.value);\r\n this.setState(\r\n { selectedProducts: e.value }\r\n )\r\n\r\n }\r\n \r\n exportCSV = () => {\r\n this.dt.current.exportCSV({ });\r\n }\r\n\r\n exportPdf = () => {\r\n const exportColumns = this.state.columns.map(col => ({ title: col.HeaderText, dataKey: col.MappingColomn }));\r\n import('jspdf').then(jsPDF => {\r\n import('jspdf-autotable').then(() => {\r\n const doc = new jsPDF.default(0, 0);\r\n doc.autoTable(exportColumns, this.state.data);\r\n doc.save('ExportedFile.pdf');\r\n })\r\n })\r\n }\r\n\r\n exportExcel = () => {\r\n \r\n import('xlsx').then(xlsx => {\r\n let ws = xlsx.utils.json_to_sheet(this.state.data);\r\n // const worksheet = xlsx.utils.json_to_sheet(this.dt);\r\n const worksheet = xlsx.utils.json_to_sheet(this.state.data);\r\n const workbook = { Sheets: { 'data': worksheet }, SheetNames: ['data'] };\r\n const excelBuffer = xlsx.write(workbook, { bookType: 'xlsx', type: 'array' });\r\n this.saveAsExcelFile(excelBuffer, 'ExportedFile');\r\n }\r\n );\r\n }\r\n\r\n saveAsExcelFile = (buffer, fileName) => {\r\n import('file-saver').then(FileSaver => {\r\n let EXCEL_TYPE = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8';\r\n let EXCEL_EXTENSION = '.xlsx';\r\n const data = new Blob([buffer], {\r\n type: EXCEL_TYPE\r\n });\r\n FileSaver.saveAs(data, fileName + '_export_' + new Date().getTime() + EXCEL_EXTENSION);\r\n });\r\n }\r\n\r\n render() {\r\n return (\r\n <>\r\n \r\n {/*
\r\n \r\n */}\r\n \r\n
\r\n Excel \r\n PDF \r\n
\r\n
\r\n
\r\n\r\n
\r\n \r\n \r\n {/* \r\n \r\n */}\r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nexport default SelectionTable;\r\n\r\n\r\n","'use strict';\r\n\r\nimport React, { Component } from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport Stepper from 'react-stepper-horizontal';\r\nimport { Navbar, Nav, Container, Button, Dropdown, Row, Col, CardGroup, CardDeck, Card } from 'react-bootstrap';\r\nimport CustomHeader from '../components/Header'\r\nimport Swal from 'sweetalert2/dist/sweetalert2.js';\r\nimport \"../css/Managehssestyle.css\";\r\n// import Stepper from 'react-stepper-wizard'\r\nimport VehicleGroupBox from \"../components/VehicleGroupBox\";\r\nimport VehicleGroupBoxItem from \"../components/VehicleGroupBoxItem\";\r\nimport MapContainer from '../components/GoogleMapsNew'\r\nimport SelectionTable from '../components/Tables/SelectionTable'\r\nimport DatePicker from 'react-date-picker';\r\n\r\nimport '../css/Manage.css'\r\nimport Select from 'react-select'\r\n\r\nimport HeadingBox from '../components/HeadingBox'\r\n\r\nimport axiosConfig from '../config/axiosConfig'\r\n\r\nconst customStyles = {\r\n option: (provided, state) => ({\r\n ...provided,\r\n color: state.isSelected ? 'black' : 'black',\r\n backgroundColor: state.isSelected ? '#7367f0' : 'white'\r\n }),\r\n control: (provided) => ({\r\n ...provided,\r\n borderRadius: '20px',\r\n borderColor: '#7367f0'\r\n\r\n })\r\n}\r\n\r\nconst customStyles2 = {\r\n option: (provided, state) => ({\r\n ...provided,\r\n color: state.isSelected ? 'black' : 'black',\r\n backgroundColor: state.isSelected ? '#7367f0' : 'white'\r\n }),\r\n control: (provided) => ({\r\n ...provided,\r\n borderRadius: '20px',\r\n borderColor: '#7367f0'\r\n\r\n })\r\n}\r\n\r\nconst inputSMSOptions = new Promise((resolve) => {\r\n setTimeout(() => {\r\n resolve({\r\n '03331234567': '03331234567',\r\n '03109876541': '03109876541',\r\n 'both': 'Both'\r\n })\r\n }, 1000)\r\n})\r\n\r\nconst inputMileageOptions = new Promise((resolve) => {\r\n setTimeout(() => {\r\n resolve({\r\n 'PKR': 'PKR',\r\n 'Liters': 'Liters'\r\n\r\n })\r\n }, 1000)\r\n})\r\n\r\nconst inputEmailOptions = new Promise((resolve) => {\r\n setTimeout(() => {\r\n resolve({\r\n 'shariq@altpay.biz': 'shariq@altpay.biz',\r\n 'safee@altpay.biz': 'safee@altpay.biz',\r\n 'both': 'Both'\r\n })\r\n }, 1000)\r\n})\r\n\r\nconst currentDate = new Date();\r\n\r\nclass ManageDeclineTransaction extends Component {\r\n constructor() {\r\n super();\r\n this.state = {\r\n steps: [\r\n {\r\n title: 'Step One',\r\n onClick: (e) => {\r\n e.preventDefault()\r\n console.log('onClick', 1)\r\n }\r\n },\r\n {\r\n title: 'Step Two',\r\n onClick: (e) => {\r\n e.preventDefault()\r\n console.log('onClick', 2)\r\n }\r\n },\r\n {\r\n title: 'Step Three',\r\n onClick: (e) => {\r\n e.preventDefault()\r\n console.log('onClick', 2)\r\n }\r\n }\r\n ],\r\n\r\n\r\n\r\n data: [\r\n { \"id\": \"105001\", \"Amount\": \"540\", \"Site\": \"Marine Drive\", \"Quantity\": \"4.82\", \"Time\": \"13-April-2021\", \"Code\": \"05\", \"Description\": \"DO NOT HONOUR\", \"Product\": \"Shell Super\", \"Price\": \"112\" },\r\n { \"id\": \"105002\", \"Amount\": \"540\", \"Site\": \"Marine Drive\", \"Quantity\": \"4.82\", \"Time\": \"13-April-2021\", \"Code\": \"05\", \"Description\": \"DO NOT HONOUR\", \"Product\": \"Shell Super\", \"Price\": \"112\" },\r\n { \"id\": \"105003\", \"Amount\": \"540\", \"Site\": \"Marine Drive\", \"Quantity\": \"4.82\", \"Time\": \"13-April-2021\", \"Code\": \"05\", \"Description\": \"DO NOT HONOUR\", \"Product\": \"Shell Super\", \"Price\": \"112\" },\r\n { \"id\": \"105004\", \"Amount\": \"540\", \"Site\": \"Marine Drive\", \"Quantity\": \"4.82\", \"Time\": \"13-April-2021\", \"Code\": \"05\", \"Description\": \"DO NOT HONOUR\", \"Product\": \"Shell Super\", \"Price\": \"112\" },\r\n { \"id\": \"105005\", \"Amount\": \"540\", \"Site\": \"Marine Drive\", \"Quantity\": \"4.82\", \"Time\": \"13-April-2021\", \"Code\": \"05\", \"Description\": \"DO NOT HONOUR\", \"Product\": \"Shell Super\", \"Price\": \"112\" },\r\n { \"id\": \"105006\", \"Amount\": \"540\", \"Site\": \"Marine Drive\", \"Quantity\": \"4.82\", \"Time\": \"13-April-2021\", \"Code\": \"05\", \"Description\": \"DO NOT HONOUR\", \"Product\": \"Shell Super\", \"Price\": \"112\" },\r\n ],\r\n columns: [\r\n { \"HeaderText\": \"Transaction ID\", \"MappingColomn\": \"id\" },\r\n { \"HeaderText\": \"Transaction Amount\", \"MappingColomn\": \"Amount\" },\r\n { \"HeaderText\": \"Site\", \"MappingColomn\": \"Site\" },\r\n { \"HeaderText\": \"Quantity\", \"MappingColomn\": \"Quantity\" },\r\n { \"HeaderText\": \"Time\", \"MappingColomn\": \"Time\" },\r\n { \"HeaderText\": \"Status Code\", \"MappingColomn\": \"Code\" },\r\n { \"HeaderText\": \"Status Description\", \"MappingColomn\": \"Description\" },\r\n { \"HeaderText\": \"Product\", \"MappingColomn\": \"Product\" },\r\n { \"HeaderText\": \"Price\", \"MappingColomn\": \"Price\" }\r\n ],\r\n\r\n currentStep: 0,\r\n\r\n groups: [],\r\n vrnOptions: [],\r\n\r\n fromDate: new Date(currentDate.getFullYear(), currentDate.getMonth(), 1), //new Date(date.getFullYear(), date.getMonth(), 1);\r\n toDate: new Date()\r\n };\r\n this.onClickNext = this.onClickNext.bind(this);\r\n this.onClickPrevious = this.onClickPrevious.bind(this)\r\n\r\n\r\n this.changeGroup = this.changeGroup.bind(this)\r\n\r\n\r\n\r\n }\r\n\r\n componentDidMount() {\r\n const data = {\r\n UserBranchID: this.props.data.selectedBranchId,\r\n }\r\n axiosConfig.post('Portal/GetVRNGroupMapping', data)\r\n .then(res => {\r\n for (var i = 0; i < res.data.groupVRN.length; i++) {\r\n this.setState(prevState => ({\r\n groups: [...prevState.groups, { value: res.data.groupVRN[i].groupID, label: res.data.groupVRN[i].groupName, vrn: res.data.groupVRN[i].vrnModel }]\r\n }))\r\n }\r\n }\r\n )\r\n .catch(function (error) {\r\n }\r\n );\r\n }\r\n\r\n changeGroup(selectedOption) {\r\n console.log(selectedOption)\r\n var tmpArray = []\r\n console.log(tmpArray)\r\n\r\n this.setState({\r\n vrnOptions: []\r\n }, function () {\r\n let tmpArray = this.state.groups.find(groupid => groupid.value === selectedOption.value)\r\n tmpArray.vrn.map((el, index) => {\r\n\r\n this.setState(prevState => ({\r\n vrnOptions: [...prevState.vrnOptions,\r\n {\r\n value: el.mappingID,\r\n label: el.vrn\r\n }]\r\n }))\r\n\r\n })\r\n });\r\n }\r\n\r\n handleSubmit = (e) => {\r\n e.preventDefault();\r\n };\r\n\r\n onClickNext() {\r\n console.log(this.state.currentStep)\r\n if (this.state.currentStep < 2)\r\n this.setState({\r\n currentStep: this.state.currentStep + 1,\r\n });\r\n }\r\n\r\n onClickPrevious() {\r\n console.log(this.state.currentStep)\r\n if (this.state.currentStep > 0)\r\n this.setState({\r\n currentStep: this.state.currentStep - 1,\r\n });\r\n }\r\n\r\n render() {\r\n const { steps, currentStep } = this.state;\r\n const buttonStyle = { background: '#E0E0E0', width: 200, padding: 16, textAlign: 'center', margin: '0 auto', marginTop: 32 };\r\n\r\n return (\r\n\r\n
\r\n\r\n\r\n \r\n \r\n \r\n Manage Declined Transactions\r\n \r\n \r\n\r\n \r\n\r\n\r\n\r\n\r\n
\r\n
Please Select Vehicle Group
\r\n
\r\n\r\n
\r\n \r\n\r\n \r\n\r\n
\r\n\r\n
\r\n
\r\n
Please Select Vehicles
\r\n
\r\n\r\n
\r\n \r\n\r\n \r\n\r\n
\r\n\r\n
\r\n\r\n
\r\n From the Date \r\n To \r\n
\r\n\r\n
\r\n\r\n
\r\n\r\n
\r\n\r\n
\r\n
Previous
\r\n
Next
\r\n
\r\n \r\n \r\n \r\n );\r\n }\r\n};\r\n\r\nexport default ManageDeclineTransaction","import {connect} from 'react-redux'\r\nimport {selectBranch} from '../services/actions/action'\r\nimport ManageDeclinedTransaction from '../Pages/ManageDeclinedTransaction'\r\n\r\nconst mapStateToProps = state => ({\r\n data:state.userItems\r\n})\r\n\r\nconst mapDispatchToProps = dispatch => ({\r\n selectBranchHandler:data=>dispatch(selectBranch(data))\r\n})\r\n\r\nexport default connect(mapStateToProps,mapDispatchToProps)(ManageDeclinedTransaction)","import React, { Component } from 'react'\r\nimport { Navbar, Nav, Container, Button, Dropdown, Card } from 'react-bootstrap';\r\nimport 'bootstrap/dist/css/bootstrap.css';\r\nimport bootstrap from 'bootstrap'\r\nimport FeatherIcon from 'feather-icons-react';\r\nimport CusCard from '../components/CusCard'\r\nimport '../../node_modules/font-awesome/css/font-awesome.min.css'\r\nimport { Row } from 'react-bootstrap';\r\nimport CustomFooter from '../components/Footer';\r\nimport CustomHeader from '../components/Header'\r\n\r\n\r\n\r\nclass GraphsSection extends React.Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n }\r\n\r\n render() {\r\n\r\n return (\r\n\r\n\r\n
\r\n {/* \r\n
\r\n\r\n\r\n
\r\n\r\n\r\n\r\n );\r\n }\r\n}\r\n\r\n\r\nexport default GraphsSection;","import React from 'react'\r\nimport { Card } from 'react-bootstrap';\r\nimport 'bootstrap/dist/css/bootstrap.css';\r\nimport '../../node_modules/font-awesome/css/font-awesome.min.css'\r\nimport { Row } from 'react-bootstrap';\r\nimport HeadingBox from '../components/HeadingBox'\r\n\r\n\r\nconst date = new Date();\r\n\r\n\r\nfunction Iframe(props) {\r\n console.log(\"URL Calling : \", props.src)\r\n return (\r\n
\r\n \r\n
\r\n )\r\n}\r\n\r\nclass Finance extends React.Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n\r\n this.state = {\r\n\r\n fromDate: new Date(date.getFullYear(), date.getMonth(), 2).toISOString().substring(0, 10), //new Date(date.getFullYear(), date.getMonth(), 1);\r\n toDate: new Date().toISOString().substring(0, 10),\r\n\r\n srcURL_MonthToDateFees: '',\r\n srcURL_CardsVehicleMonthSummary: '',\r\n srcURL_CombinationHistoryReport: '',\r\n\r\n //reportBaseURL: 'http://localhost:40383/Reports?',\r\n //reportBaseURL: 'https://altpaymerchants.com/TELEMATICSREPORTINGSERVICE/Reports?',\r\n reportBaseURL: 'https://shelltelematics.pk/TELEMATICSREPORTINGSERVICE/Reports?',\r\n reportExtraParams: '&rs:Command=Render&rc:Parameters=false&',\r\n reportViewType: '/SSSAS_TabularReports/',\r\n\r\n\r\n }\r\n\r\n this.submitHandler = this.submitHandler.bind(this)\r\n this.changeHandler = this.changeHandler.bind(this)\r\n\r\n }\r\n componentDidMount() {\r\n\r\n this.MonthToDateFees();\r\n this.CardsVehicleMonthSummary();\r\n this.CombinationHistoryReport();\r\n\r\n }\r\n\r\n async MonthToDateFees() {\r\n\r\n let FromDate = this.state.fromDate;\r\n let ToDate = this.state.toDate;\r\n let UserBranchID = localStorage.getItem('selectedBranch')\r\n\r\n let reportName = \"MonthToDateFees\";\r\n let URL_PARAMETERS = 'reportName=' + reportName + '&FromDate=' + FromDate + '&ToDate=' + ToDate + '&userBranchID=' + UserBranchID + '&token=' + localStorage.getItem('token')\r\n\r\n let ReportFullURL = this.state.reportBaseURL + URL_PARAMETERS\r\n console.log('URL Generated: ', ReportFullURL)\r\n await this.setState({ srcURL_MonthToDateFees: ReportFullURL })\r\n }\r\n\r\n async CardsVehicleMonthSummary() {\r\n\r\n let FromDate = this.state.fromDate;\r\n let ToDate = this.state.toDate;\r\n let UserBranchID = localStorage.getItem('selectedBranch')\r\n\r\n let reportName = \"CardsVehicleMonthSummary\";\r\n let URL_PARAMETERS = 'reportName=' + reportName + '&FromDate=' + FromDate + '&ToDate=' + ToDate + '&userBranchID=' + UserBranchID + '&token=' + localStorage.getItem('token')\r\n\r\n let ReportFullURL = this.state.reportBaseURL + URL_PARAMETERS\r\n console.log('URL Generated: ', ReportFullURL)\r\n await this.setState({ srcURL_CardsVehicleMonthSummary: ReportFullURL })\r\n }\r\n\r\n\r\n async submitHandler(e) {\r\n this.CombinationHistoryReport();\r\n }\r\n\r\n async CombinationHistoryReport() {\r\n\r\n console.log('Inside CombinationHistoryReport')\r\n let FromDate = this.state.fromDate;\r\n let ToDate = this.state.toDate;\r\n let UserBranchID = localStorage.getItem('selectedBranch')\r\n\r\n let reportName = \"CombinationHistoryReport\";\r\n console.log('here');\r\n let URL_PARAMETERS = 'reportName=' + reportName + '&FromDate=' + FromDate + '&ToDate=' + ToDate + '&userBranchID=' + UserBranchID + '&token=' + localStorage.getItem('token')\r\n\r\n let ReportFullURL = this.state.reportBaseURL + URL_PARAMETERS\r\n console.log('URL Generated: ', ReportFullURL)\r\n await this.setState({ srcURL_CombinationHistoryReport: ReportFullURL })\r\n\r\n console.log(' exit CHR')\r\n }\r\n\r\n changeHandler(p) {\r\n var newState = {};\r\n newState[p.target.name] = p.target.value;\r\n this.setState(newState);\r\n }\r\n\r\n render() {\r\n return (\r\n
\r\n\r\n
\r\n \r\n
\r\n
\r\n\r\n
\r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n\r\n
\r\n \r\n \r\n \r\n\r\n \r\n\r\n \r\n \r\n
\r\n\r\n
\r\n\r\n
\r\n\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n Choose From Time \r\n
\r\n
\r\n
\r\n Choose To Time \r\n
\r\n
\r\n \r\n \r\n Generate Report \r\n
\r\n
\r\n \r\n \r\n\r\n \r\n\r\n
\r\n\r\n {/* \r\n
\r\n\r\n \r\n\r\n \r\n Combination History \r\n \r\n\r\n \r\n\r\n \r\n
\r\n
\r\n
\r\n \r\n Select Month \r\n January \r\n February \r\n March \r\n April \r\n May \r\n June \r\n July \r\n August \r\n Spetember \r\n October \r\n November \r\n December \r\n \r\n
\r\n
\r\n
\r\n
\r\n \r\n Select Year \r\n 2020 \r\n 2021 \r\n 2022 \r\n 2023 \r\n 2024 \r\n 2025 \r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n\r\n \r\n\r\n \r\n\r\n \r\n\r\n
\r\n */}\r\n\r\n
\r\n\r\n\r\n\r\n );\r\n }\r\n}\r\n\r\n\r\nexport default Finance;","import {connect} from 'react-redux'\r\nimport {selectBranch} from '../services/actions/action'\r\nimport Finance from '../Pages/Finance'\r\n\r\nconst mapStateToProps = state => ({\r\n data:state.userItems\r\n})\r\n\r\nconst mapDispatchToProps = dispatch => ({\r\n selectBranchHandler:data=>dispatch(selectBranch(data))\r\n})\r\n\r\nexport default connect(mapStateToProps,mapDispatchToProps)(Finance)","import React, { Component, useState, useRef } from 'react'\r\nimport { CardDeck, Row, Col, Container, Card, Button, OverlayTrigger, Popover, Overlay } from 'react-bootstrap'\r\nimport { DataTable } from 'primereact/datatable';\r\nimport { Column } from 'primereact/column';\r\nimport 'primereact/resources/themes/saga-blue/theme.css';\r\nimport 'primereact/resources/primereact.min.css';\r\nimport 'primeicons/primeicons.css';\r\nimport 'bootstrap/dist/css/bootstrap.css';\r\nimport FeatherIcon from 'feather-icons-react';\r\nclass AdvanceTable extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n debugger;\r\n console.log(this.props.data)\r\n this.dt = React.createRef();\r\n \r\n console.log(this.props.data)\r\n\r\n this.state = {\r\n\r\n globalSearchBox: '',\r\n\r\n data: this.props.data,\r\n columns: this.props.columns,\r\n // data: [\r\n // { \"id\": \"1000\", \"code\": \"f230fh0g3\", \"name\": \"Bamboo Watch\", \"description\": \"Product Description\", \"image\": \"bamboo-watch.jpg\", \"price\": 65, \"category\": \"Accessories\", \"quantity\": 24, \"inventoryStatus\": \"INSTOCK\", \"rating\": 5 },\r\n // { \"id\": \"1001\", \"code\": \"nvklal433\", \"name\": \"Black Watch\", \"description\": \"Product Description\", \"image\": \"black-watch.jpg\", \"price\": 72, \"category\": \"Accessories\", \"quantity\": 61, \"inventoryStatus\": \"INSTOCK\", \"rating\": 4 },\r\n // { \"id\": \"1002\", \"code\": \"zz21cz3c1\", \"name\": \"Blue Band\", \"description\": \"Product Description\", \"image\": \"blue-band.jpg\", \"price\": 79, \"category\": \"Fitness\", \"quantity\": 2, \"inventoryStatus\": \"LOWSTOCK\", \"rating\": 3 },\r\n // { \"id\": \"1003\", \"code\": \"244wgerg2\", \"name\": \"Blue T-Shirt\", \"description\": \"Product Description\", \"image\": \"blue-t-shirt.jpg\", \"price\": 29, \"category\": \"Clothing\", \"quantity\": 25, \"inventoryStatus\": \"INSTOCK\", \"rating\": 5 },\r\n // { \"id\": \"1004\", \"code\": \"h456wer53\", \"name\": \"Bracelet\", \"description\": \"Product Description\", \"image\": \"bracelet.jpg\", \"price\": 15, \"category\": \"Accessories\", \"quantity\": 73, \"inventoryStatus\": \"INSTOCK\", \"rating\": 4 },\r\n // { \"id\": \"1005\", \"code\": \"av2231fwg\", \"name\": \"Brown Purse\", \"description\": \"Product Description\", \"image\": \"brown-purse.jpg\", \"price\": 120, \"category\": \"Accessories\", \"quantity\": 0, \"inventoryStatus\": \"OUTOFSTOCK\", \"rating\": 4 },\r\n // { \"id\": \"1006\", \"code\": \"bib36pfvm\", \"name\": \"Chakra Bracelet\", \"description\": \"Product Description\", \"image\": \"chakra-bracelet.jpg\", \"price\": 32, \"category\": \"Accessories\", \"quantity\": 5, \"inventoryStatus\": \"LOWSTOCK\", \"rating\": 3 },\r\n // { \"id\": \"1007\", \"code\": \"mbvjkgip5\", \"name\": \"Galaxy Earrings\", \"description\": \"Product Description\", \"image\": \"galaxy-earrings.jpg\", \"price\": 34, \"category\": \"Accessories\", \"quantity\": 23, \"inventoryStatus\": \"INSTOCK\", \"rating\": 5 },\r\n // { \"id\": \"1008\", \"code\": \"vbb124btr\", \"name\": \"Game Controller\", \"description\": \"Product Description\", \"image\": \"game-controller.jpg\", \"price\": 99, \"category\": \"Electronics\", \"quantity\": 2, \"inventoryStatus\": \"LOWSTOCK\", \"rating\": 4 },\r\n // { \"id\": \"1009\", \"code\": \"cm230f032\", \"name\": \"Gaming Set\", \"description\": \"Product Description\", \"image\": \"gaming-set.jpg\", \"price\": 299, \"category\": \"Electronics\", \"quantity\": 63, \"inventoryStatus\": \"INSTOCK\", \"rating\": 3 }\r\n // ],\r\n // columns: [\r\n // {\"HeaderText\":\"Id\", \"MappingColomn\":\"id\"},\r\n // {\"HeaderText\":\"Code\", \"MappingColomn\":\"code\"},\r\n // {\"HeaderText\":\"Name\",\"MappingColomn\":\"name\"},\r\n // {\"HeaderText\":\"Description\",\"MappingColomn\":\"description\"},\r\n // {\"HeaderText\":\"Company\",\"MappingColomn\":\"image\"},\r\n // {\"HeaderText\":\"Category\",\"MappingColomn\":\"category\"}\r\n // ],\r\n PageSize: 10\r\n };\r\n\r\n this.onChange = this.onChange.bind(this);\r\n this.exportCSV = this.exportCSV.bind(this);\r\n this.saveAsExcelFile = this.saveAsExcelFile.bind(this);\r\n this.exportExcel = this.exportExcel.bind(this);\r\n }\r\n\r\n onChange(e) {\r\n console.log(e.target.value);\r\n this.setState(\r\n { [e.target.name]: e.target.value }\r\n )\r\n\r\n }\r\n\r\n exportCSV = () => {\r\n this.dt.current.exportCSV({});\r\n }\r\n\r\n exportPdf = () => {\r\n const exportColumns = this.state.columns.map(col => ({ title: col.HeaderText, dataKey: col.MappingColomn }));\r\n import('jspdf').then(jsPDF => {\r\n import('jspdf-autotable').then(() => {\r\n const doc = new jsPDF.default(0, 0);\r\n doc.autoTable(exportColumns, this.state.data);\r\n doc.save('ExportedFile.pdf');\r\n })\r\n })\r\n }\r\n\r\n // exportExcel = () => {\r\n\r\n // import('xlsx').then(xlsx => {\r\n // let ws = xlsx.utils.json_to_sheet(this.state.data);\r\n // // const worksheet = xlsx.utils.json_to_sheet(this.dt);\r\n // const worksheet = xlsx.utils.json_to_sheet(this.state.data);\r\n // const workbook = { Sheets: { 'data': worksheet }, SheetNames: ['data'] };\r\n // const excelBuffer = xlsx.write(workbook, { bookType: 'xlsx', type: 'array' });\r\n // this.saveAsExcelFile(excelBuffer, 'ExportedFile');\r\n // }\r\n // );\r\n // }\r\n\r\n exportExcel = () => {\r\n import('xlsx').then((xlsx) => {\r\n const exportData = this.state.data.map((item) => {\r\n const exportedItem = {};\r\n this.state.columns.forEach((col) => {\r\n exportedItem[col.HeaderText] = item[col.MappingColomn];\r\n });\r\n return exportedItem;\r\n });\r\n \r\n const worksheet = xlsx.utils.json_to_sheet(exportData);\r\n const workbook = {\r\n Sheets: { data: worksheet },\r\n SheetNames: ['data'],\r\n };\r\n const excelBuffer = xlsx.write(workbook, {\r\n bookType: 'xlsx',\r\n type: 'array',\r\n });\r\n this.saveAsExcelFile(excelBuffer, 'ExportedFile');\r\n });\r\n };\r\n \r\n\r\n saveAsExcelFile = (buffer, fileName) => {\r\n import('file-saver').then(FileSaver => {\r\n let EXCEL_TYPE = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8';\r\n let EXCEL_EXTENSION = '.xlsx';\r\n const data = new Blob([buffer], {\r\n type: EXCEL_TYPE\r\n });\r\n FileSaver.saveAs(data, fileName + '_export_' + new Date().getTime() + EXCEL_EXTENSION);\r\n });\r\n }\r\n\r\n componentWillReceiveProps(nextProps) {\r\n this.setState({data: nextProps.data})\r\n }\r\n\r\n\r\n render() {\r\n const {data} = this.state;\r\n return (\r\n <>\r\n\r\n {/*
\r\n \r\n */}\r\n \r\n
\r\n Excel \r\n PDF \r\n
\r\n
\r\n
\r\n\r\n
\r\n {\r\n this.state.columns.map(\r\n (item, index) => (\r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nexport default AdvanceTable;\r\n\r\n\r\n","import React, { Component } from \"react\";\r\nimport { Card, CardDeck, Row, Col, Container, Button } from \"react-bootstrap\";\r\nimport \"../css/Managehssestyle.css\";\r\nimport 'bootstrap/dist/css/bootstrap.css';\r\nimport '../css/customBootstrapExtended.css'\r\nimport '../css/UpdateUserProfile.css';\r\nimport '../css/MyReportstylee.css'\r\nimport AdvanceTable from '../components/Tables/AdvanceTable';\r\nimport CustomHeader from '../components/Header'\r\nimport GroupVRNSelect from '../containers/comps/GroupVRNSelectContainer'\r\nimport BasicTable from \"../components/Tables/BasicTable\";\r\nimport SelectionTable from \"../components/Tables/SelectionTable\";\r\nimport VRNBox from \"../components/VRNBox\";\r\nimport Stepper from 'react-stepper-horizontal';\r\nimport axios from 'axios'\r\n\r\n\r\nfunction Iframe(props) {\r\n console.log(\"URL Calling : \", props.src)\r\n return (\r\n \r\n \r\n
\r\n )\r\n}\r\n\r\nconst currentDate = new Date();\r\n\r\n\r\nclass MyReports extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n showReport: false,\r\n showTrendReport: false,\r\n srcTrendURL: '',\r\n srcURL: '',\r\n reportBaseURL: 'https://altpaymerchants.com/TELEMATICSREPORTINGSERVICE/Reports?',\r\n reportExtraParams: '&rs:Command=Render&rc:Parameters=false&',\r\n reportViewType: '/SSSAS_TabularReports/',\r\n UserBranchID: this.props.data.selectedBranchId,\r\n reportDuration: 3,\r\n reportName: '',\r\n reportStartDate: new Date(currentDate.getFullYear(), currentDate.getMonth(), 2).toISOString().substring(0, 10),\r\n reportEndDate: new Date().toISOString().substring(0, 10),\r\n trendReportType: '',\r\n trendReportDuration: '',\r\n GeneralReportsteps: [\r\n {\r\n title: 'Step One',\r\n onClick: (e) => {\r\n e.preventDefault()\r\n console.log('onClick', 1)\r\n }\r\n },\r\n {\r\n title: 'Step Two',\r\n onClick: (e) => {\r\n e.preventDefault()\r\n console.log('onClick', 2)\r\n }\r\n }\r\n ],\r\n GRcurrentStep: 0,\r\n TrendReportsteps: [\r\n {\r\n title: 'Step One',\r\n onClick: (e) => {\r\n e.preventDefault()\r\n console.log('onClick', 1)\r\n }\r\n },\r\n {\r\n title: 'Step Two',\r\n onClick: (e) => {\r\n e.preventDefault()\r\n console.log('onClick', 2)\r\n }\r\n }\r\n ],\r\n TRcurrentStep: 0,\r\n\r\n data: [\r\n { \"id\": \"ABC-123\", \"code\": \"500 KM\", \"name\": \"Jan\" },\r\n { \"id\": \"XYZ-456\", \"code\": \"89.6 KM\", \"name\": \"Feb\" },\r\n { \"id\": \"FDS-123\", \"code\": \"756 KM\", \"name\": \"Mar\" },\r\n ],\r\n columns: [\r\n { \"HeaderText\": \"VRN\", \"MappingColomn\": \"id\" },\r\n { \"HeaderText\": \"Mileage\", \"MappingColomn\": \"code\" },\r\n { \"HeaderText\": \"Month\", \"MappingColomn\": \"name\" }\r\n ],\r\n PageSize: 5,\r\n Option: 1,\r\n Group: 0,\r\n Vehicle: 0,\r\n TrendOption: 1,\r\n TrendGroup: 0,\r\n TrendVehicle: 0,\r\n\r\n };\r\n\r\n this.onClickNext_GR = this.onClickNext_GR.bind(this);\r\n this.onClickPrevious_GR = this.onClickPrevious_GR.bind(this)\r\n this.onClickNext_TR = this.onClickNext_TR.bind(this);\r\n this.onClickPrevious_TR = this.onClickPrevious_TR.bind(this)\r\n\r\n this.handleChange = this.handleChange.bind(this)\r\n\r\n this.optionChange = this.optionChange.bind(this)\r\n this.groupChange = this.groupChange.bind(this)\r\n this.vehicleChange = this.vehicleChange.bind(this)\r\n this.fetchReport = this.fetchReport.bind(this)\r\n\r\n this.TrendoptionChange = this.TrendoptionChange.bind(this)\r\n this.TrendgroupChange = this.TrendgroupChange.bind(this)\r\n this.TrendvehicleChange = this.TrendvehicleChange.bind(this)\r\n\r\n this.generalReportSubmitHandler = this.generalReportSubmitHandler.bind(this)\r\n this.trendReportSubmitHandler = this.trendReportSubmitHandler.bind(this)\r\n }\r\n\r\n onClickNext_GR() {\r\n console.log(this.state.GRcurrentStep)\r\n if (this.state.GRcurrentStep < 1)\r\n this.setState({\r\n GRcurrentStep: this.state.GRcurrentStep + 1,\r\n });\r\n }\r\n\r\n onClickPrevious_GR() {\r\n console.log(this.state.GRcurrentStep)\r\n if (this.state.GRcurrentStep > 0)\r\n this.setState({\r\n GRcurrentStep: this.state.GRcurrentStep - 1,\r\n });\r\n }\r\n\r\n onClickNext_TR() {\r\n console.log(this.state.TRcurrentStep)\r\n if (this.state.TRcurrentStep < 1)\r\n this.setState({\r\n TRcurrentStep: this.state.TRcurrentStep + 1,\r\n });\r\n }\r\n\r\n onClickPrevious_TR() {\r\n console.log(this.state.TRcurrentStep)\r\n if (this.state.TRcurrentStep > 0)\r\n this.setState({\r\n TRcurrentStep: this.state.TRcurrentStep - 1,\r\n });\r\n }\r\n\r\n fetchReport() {\r\n this.setState({ showReport: true })\r\n //alert(\"working\")\r\n }\r\n\r\n async optionChange(selectedOption) {\r\n //debugger;\r\n console.log(\"Selected Option is \", selectedOption)\r\n\r\n if (this.state.Option != selectedOption && selectedOption == 1) {\r\n await this.setState({ Option: selectedOption, Group: 0, Vehicle: 0 })\r\n //this.getAnalyticsData()\r\n }\r\n else\r\n this.setState({ Option: selectedOption, Group: 0, Vehicle: 0 })\r\n\r\n console.log('selected dropdown option is now ', this.state.Option)\r\n }\r\n\r\n async vehicleChange(selectedVehicle) {\r\n console.log(selectedVehicle)\r\n await this.setState({ Vehicle: selectedVehicle, Group: 0 })\r\n //this.getAnalyticsData()\r\n\r\n }\r\n\r\n async groupChange(selectedGroup) {\r\n console.log(selectedGroup)\r\n\r\n await this.setState({ Group: selectedGroup, Vehicle: 0 })\r\n //this.getAnalyticsData()\r\n\r\n }\r\n\r\n async TrendoptionChange(selectedOption) {\r\n //debugger;\r\n\r\n if (this.state.TrendOption != selectedOption && selectedOption == 1) {\r\n await this.setState({ TrendOption: selectedOption, TrendGroup: 0, TrendVehicle: 0 })\r\n //this.getAnalyticsData()\r\n }\r\n else\r\n this.setState({ TrendOption: selectedOption, TrendGroup: 0, TrendVehicle: 0 })\r\n\r\n console.log('selected dropdown option is now ', this.state.TrendOption)\r\n }\r\n\r\n async TrendvehicleChange(selectedVehicle) {\r\n console.log(selectedVehicle)\r\n await this.setState({ TrendVehicle: selectedVehicle, TrendGroup: 0 })\r\n //this.getAnalyticsData()\r\n\r\n }\r\n\r\n async TrendgroupChange(selectedGroup) {\r\n console.log(selectedGroup)\r\n\r\n await this.setState({ TrendGroup: selectedGroup, TrendVehicle: 0 })\r\n //this.getAnalyticsData()\r\n\r\n }\r\n\r\n handleChange(e) {\r\n this.setState({ [e.target.name]: e.target.value });\r\n }\r\n\r\n generalReportSubmitHandler(e) {\r\n console.log(\"Selected vehicle is \", this.state.Vehicle)\r\n e.preventDefault();\r\n console.log(\"Running Tabular Report\")\r\n this.setState({ showReport: false })\r\n let fromDate = this.GetFormattedDate(this.state.reportStartDate)\r\n let toDate = this.GetFormattedDate(this.state.reportEndDate)\r\n let UserBranchID = this.state.UserBranchID\r\n let reportName = this.state.reportName\r\n let URL_PARAMETERS = 'reportName=' + reportName + '&FromDate=' + fromDate + '&ToDate=' + toDate + '&userBranchID=' + UserBranchID + '&token=' + localStorage.getItem('token')\r\n if (this.state.Option == '2' || this.state.Option == '3') {\r\n if (this.state.Option == '2')\r\n URL_PARAMETERS += '&VRNGroupingID=' + this.state.Group\r\n else if (this.state.Option == '3')\r\n URL_PARAMETERS += '&MappingMasterID=' + this.state.Vehicle\r\n }\r\n let reportViewType = this.state.reportViewType\r\n let ReportFullURL = this.state.reportBaseURL + URL_PARAMETERS\r\n console.log('URL Generated: ', ReportFullURL)\r\n this.setState({ srcURL: ReportFullURL, showReport: true })\r\n }\r\n\r\n trendReportSubmitHandler(e) {\r\n console.log(\"Running Chart Report\")\r\n e.preventDefault();\r\n //alert(\"test\")\r\n console.log('Report type is ' + this.state.trendReportType + ' for the duration of : ' + this.state.trendReportDuration)\r\n this.setState({ showTrendReport: false })\r\n\r\n let UserBranchID = this.state.UserBranchID\r\n let reportDuration = this.state.trendReportDuration\r\n\r\n let reportName = this.state.trendReportType\r\n let reportViewType = this.state.reportViewType\r\n\r\n let URL_PARAMETERS = 'reportName=' + reportName + '&DateRange=' + reportDuration + '&SelectedCriteria=' + 'vrn' + '&userBranchID=' + UserBranchID + '&token=' + localStorage.getItem('token')\r\n\r\n if (this.state.TrendOption == '2' || this.state.TrendOption == '3') {\r\n if (this.state.TrendOption == '2')\r\n URL_PARAMETERS += '&VRNGroupingID=' + this.state.TrendGroup\r\n else if (this.state.TrendOption == '3')\r\n URL_PARAMETERS += '&MappingMasterID=' + this.state.TrendVehicle\r\n }\r\n\r\n let ReportFullURL = this.state.reportBaseURL + URL_PARAMETERS\r\n console.log('URL Generated: ', ReportFullURL)\r\n this.setState({ srcTrendURL: ReportFullURL, showTrendReport: true })\r\n\r\n\r\n }\r\n\r\n GetFormattedDate(dateToConvert) {\r\n var date = new Date(dateToConvert)\r\n return ((date.getMonth() > 8) ? (date.getMonth() + 1) : ('0' + (date.getMonth() + 1))) + '/' + ((date.getDate() > 9) ? date.getDate() : ('0' + date.getDate())) + '/' + date.getFullYear()\r\n }\r\n\r\n componentDidMount() {\r\n }\r\n\r\n render() {\r\n console.log(\"Report Props: \", this.props)\r\n const { GeneralReportsteps, GRcurrentStep } = this.state;\r\n const { TrendReportsteps, TRcurrentStep } = this.state;\r\n const buttonStyle = { background: '#E0E0E0', width: 200, padding: 16, textAlign: 'center', margin: '0 auto', marginTop: 32 };\r\n\r\n return (\r\n\r\n \r\n\r\n {/*
*/}\r\n\r\n
\r\n\r\n \r\n
\r\n
\r\n
\r\n
My Reports \r\n \r\n
\r\n
\r\n
Please select which report you want to view
\r\n\r\n\r\n
\r\n \r\n \r\n General Reports\r\n \r\n \r\n \r\n \r\n Trend Reports\r\n \r\n \r\n \r\n {/* Tab panes */}\r\n \r\n
\r\n \r\n
\r\n\r\n
\r\n \r\n General Reports\r\n \r\n \r\n\r\n \r\n \r\n
\r\n\r\n\r\n \r\n\r\n )}\r\n\r\n\r\n {GRcurrentStep === 1 && (\r\n <>\r\n\r\n \r\n\r\n\r\n\r\n \r\n\r\n )}\r\n\r\n\r\n \r\n\r\n {this.state.GRcurrentStep != 0 && \r\n
Previous
\r\n }\r\n \r\n {this.state.GRcurrentStep != 1 && \r\n
Next
\r\n }\r\n
\r\n \r\n
\r\n
\r\n \r\n
\r\n
\r\n \r\n Trend Reports\r\n \r\n \r\n\r\n \r\n \r\n
\r\n\r\n\r\n \r\n\r\n )}\r\n\r\n\r\n {TRcurrentStep === 1 && (\r\n <>\r\n \r\n\r\n \r\n )}\r\n\r\n \r\n \r\n {this.state.TRcurrentStep != 0 && \r\n
Previous
\r\n }\r\n\r\n {this.state.TRcurrentStep != 1 &&\r\n
Next
\r\n \r\n }\r\n \r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
![](\"imageassets/shell_logo.png\")
\r\n ![](\"imageassets/flag.png\")
\r\n