\n
\n\n \n
\n \n \n
\n \n \n
\n \n {props.progress2percent}\n
\n \n
\n \n // \n );\n}\n\nStatusComponent.inStorybook = true;\n","\nfunction padTo2Digits(num) {\n return num.toString().padStart(2, \"0\");\n}\nexport const getTime = (timestamp) => {\n let epoch_time = timestamp * 1000;\n var date_obj = new Date(epoch_time);\n const hours = date_obj.getHours();\n const minutes = date_obj.getMinutes();\n const time = `${padTo2Digits(hours)}:${padTo2Digits(minutes)}`;\n return time;\n};\n\nexport const getDateold = (timestamp) => {\n var currentDate = new Date(timestamp * 1000);\n const currentDayOfMonth = currentDate.getDate();\n const currentMonth = currentDate.getMonth(); // Be careful! January is 0, not 1\n const currentYear = currentDate.getFullYear();\n\n const dateString =\n currentDayOfMonth + \"/\" + (currentMonth + 1) + \"/\" + currentYear;\n return dateString;\n};\n\nexport const getDate = (timestamp) => {\n Date.prototype.monthNames = [\n \"January\",\n \"February\",\n \"March\",\n \"April\",\n \"May\",\n \"June\",\n \"July\",\n \"August\",\n \"September\",\n \"October\",\n \"November\",\n \"December\",\n ];\n\n Date.prototype.getMonthName = function () {\n return this.monthNames[this.getMonth()];\n };\n Date.prototype.getShortMonthName = function () {\n return this.getMonthName()?.substr(0, 3);\n };\n\n var currentDate = new Date(timestamp * 1000);\n const currentDayOfMonth = currentDate?.getDate();\n const currentMonth = currentDate?.getMonth(); // Be careful! January is 0, not 1\n const currentYear = currentDate?.getFullYear();\n\n return (\n (\"0\" + currentDayOfMonth)?.slice(-2) +\n \" \" +\n currentDate?.getShortMonthName()\n );\n\n // const dateString =\n // currentDayOfMonth + \"/\" + (currentMonth + 1) + \"/\" + currentYear;\n // return dateString;\n};\n\nexport const getDay = (timestamp) => {\n return new Date(timestamp * 1000)?.toString()?.substring(0, 3);\n};\n\nexport const formatYaxisNumber = (ynum) => {\n \n if (isNaN(ynum)) {\n return ynum;\n } else if (ynum < 0) {\n return parseInt(ynum / -100000) > 0\n ? parseFloat(ynum / 100000)\n .toFixed(1)\n .replace(/\\.0+$/, \"\") + \" l\"\n : parseInt(ynum / -1000) > 0\n ? parseFloat(ynum / 1000)\n .toFixed(1)\n .replace(/\\.0+$/, \"\") + \" k\"\n : ynum;\n } else {\n return parseInt(ynum / 100000) > 0\n ? parseFloat(ynum / 100000)\n .toFixed(1)\n .replace(/\\.0+$/, \"\") + \" l\"\n : parseInt(ynum / 1000) > 0\n ? parseFloat(ynum / 1000)\n .toFixed(1)\n .replace(/\\.0+$/, \"\") + \"k\"\n : ynum;\n }\n};\n\nexport const RevenueformatYaxisNumber = (value) => {\n var val = Math.abs(value)\n if (val >= 10000000) {\n val = (val / 10000000) + ' Cr';\n } else if (val >= 100000) {\n val = (val / 100000) + ' L';\n }\n else if (val >= 1000) {\n val = (val / 1000) + ' K';\n }\n return val;\n};\n","\nimport { React, useState, useEffect } from \"react\";\n\nexport function useWindowSize() {\n // Initialize state with undefined width/height so server and client renders match\n // Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/\n const [windowSize, setWindowSize] = useState({\n width: undefined,\n height: undefined,\n });\n useEffect(() => {\n // Handler to call on window resize\n function handleResize() {\n // Set window width/height to state\n setWindowSize({\n width: window.innerWidth,\n height: window.innerHeight,\n });\n }\n // Add event listener\n window.addEventListener(\"resize\", handleResize);\n // Call handler right away so state gets updated with initial window size\n handleResize();\n // Remove event listener on cleanup\n return () => window.removeEventListener(\"resize\", handleResize);\n }, []); // Empty array ensures that effect is only run on mount\n return windowSize;\n}\n","\nimport { React, useState, useEffect } from \"react\";\nimport ReactECharts from \"echarts-for-react\";\nimport * as echarts from \"echarts/core\";\nimport { BarChart } from \"echarts/charts\";\nimport {\n GridComponent,\n TooltipComponent,\n TitleComponent,\n} from \"echarts/components\";\nimport { CanvasRenderer } from \"echarts/renderers\";\nimport {\n getDate,\n getTime,\n getDay,\n formatYaxisNumber,\n} from \"components/common/dateTime\";\nimport { useWindowSize } from \"services/resizeservice\";\n\nfunction Energy(props) {\n echarts.registerTheme(\"my_theme\", {\n backgroundColor: \"#f4cccc\",\n });\n\n echarts.use([\n TitleComponent,\n TooltipComponent,\n GridComponent,\n BarChart,\n CanvasRenderer,\n ]);\n\n var xAxisData = [];\n var yAxisChargedData = [];\n var yAxisSoldData = [];\n const [echartInstance, setEchartInstance] = useState(null);\n const size = useWindowSize();\n\n useEffect(() => {\n echartInstance?.resize();\n }, [size.width]);\n\n if (props.loading === \"true\") {\n xAxisData = [];\n yAxisChargedData = [];\n yAxisSoldData = [];\n } else if (props.data != undefined && props.loading === \"false\") {\n // console.log('data====>',props.data, 'select value===>', props.selectValue)\n props.data.map(function (obj) {\n if (props.selectValue === \"HOUR_24\" || props.selectValue === \"HOUR_12\") {\n xAxisData.push(getTime(obj.endDate));\n } else if (props.selectValue === \"WEEK\") {\n xAxisData.push(getDay(obj.endDate));\n } else {\n xAxisData.push(getDate(obj.endDate));\n }\n yAxisChargedData.push(Number(obj.energyCharged).toFixed(2));\n yAxisSoldData.push(Number(obj.energySold).toFixed(2));\n });\n }\n if (props.selectValue == \"168\") {\n xAxisData = [\"Sun\", \"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\"];\n }\n\n const options = () => ({\n legend: {\n data: [\"Energy(Charged)\", \"Energy(Sold)\"],\n top: \"1%\",\n icon: \"circle\",\n left: \"8px\",\n top: \"12px\",\n bottom: \"12px\",\n itemWidth: 9,\n itemGap: 9.5,\n textStyle: {\n fontSize: \"9\",\n fontFamily: \"JioType\",\n fontStyle: \"normal\",\n color: \"#C1C1C1\",\n },\n },\n tooltip: {},\n grid: {\n left: \"13%\",\n right: \"6%\",\n bottom: \"3%\",\n top: 50,\n containLabel: true,\n },\n xAxis: {\n type: \"category\",\n data: xAxisData,\n nameLocation: \"middle\",\n nameGap: 40,\n axisTick: {\n show: false,\n },\n axisLabel: {\n rotate:\n props.selectValue === \"WEEK_2\" ||\n props.selectValue === \"MONTH\" ||\n props.selectValue === \"MONTH_3\"\n ? 30\n : 0,\n },\n nameTextStyle: {\n fontFamily: \"JioType\",\n fontStyle: \"normal\",\n fontWeight: 300,\n fontSize: \"12\",\n color: \"#000000\",\n },\n show: true,\n // data: props.dataVal[0].LabelVal\n },\n\n yAxis: {\n type: \"value\",\n name: \"Energy(KWh)\",\n nameLocation: \"middle\",\n nameGap:\n yAxisChargedData.every((element) => element === null) &&\n yAxisSoldData.every((element) => element === null)\n ? 10\n : 36,\n // min: 0,\n // max: 400,\n axisLabel: {\n formatter: formatYaxisNumber,\n },\n axisLine: {\n show: true,\n onZero: false,\n\n lineStyle: {\n width: 1,\n },\n },\n nameTextStyle: {\n fontFamily: \"JioType\",\n fontStyle: \"normal\",\n fontWeight: 300,\n fontSize: \"12\",\n color: \"#000000\",\n },\n },\n series: [\n {\n name: \"Energy(Sold)\",\n type: \"bar\",\n color: \"#23297A\",\n stack: \"one\",\n // data: [120, 200, 150, 80, 70, 110, data.data[0].energyCharged],\n data: yAxisSoldData,\n },\n {\n name: \"Energy(Charged)\",\n type: \"bar\",\n color: \" #D8E9FD\",\n stack: \"one\",\n // data: [120, 200, 150, 80, 70, 110, 130],\n data: yAxisChargedData,\n },\n ],\n });\n\n return (\n \n
\n \n \n
\n \n \n
\n \n {props.progress3percent}\n
\n \n
\n \n \n \n );\n}\n\nHeader.inStorybook = true;\n","\nimport axios from \"axios\";\nimport TokenService from \"./tokenlocalstorage.service\";\nimport notificationService from \"services/notification.service\";\nimport authService from \"services/auth.service\";\nimport jwt_decode from \"jwt-decode\";\n\nimport oauth from \"./axiosBaseAuthClient\";\n\nconst axiosClient = axios.create();\nvar test = false;\n\naxiosClient.defaults.baseURL = process.env.REACT_APP_ASSETS_IP_ADDRESS;\n// axiosClient.defaults.baseURL = 'http://34.219.48.250:8087/';\n\naxiosClient.defaults.headers = {\n \"Content-Type\": \"application/json\",\n Accept: \"application/json\",\n};\n\n//All request will wait 2 seconds before timeout\n// axiosClient.defaults.timeout = 2000;\n\naxiosClient.defaults.withCredentials = false;\n\naxiosClient.interceptors.request.use(\n (config) => {\n const token = TokenService.getLocalAccessToken();\n oauth.refreshToken(false);\n\n if (token && config.url !== \"bss/svc/login\") {\n config.headers[\"Authorization\"] = \"Bearer \" + token; // for Spring Boot back-end\n }\n\n // if (\n // token &&\n // config.url !== \"bss/svc/login\" &&\n // config.url !== \"bss/reset\" &&\n // config.url !== \"bss/sendEmail\"\n // && config.url !== \"bss/bss/svc/useRefreshToken\"\n // ) {\n // console.log(\"------------------->\", config.url);\n // //config.headers[\"Authorization\"] = \"Bearer \" + token; // for Spring Boot back-end\n // }\n\n // if (token && config.url === \"bss/svc/useRefreshToken\") {\n // config.headers[\"Authorization\"] =\n // \"Bearer \" + TokenService.getLocalRefreshToken(); // for Spring Boot back-end\n // }\n return config;\n },\n (error) => {\n return Promise.reject(error);\n }\n);\n\naxiosClient.interceptors.response.use(\n (res) => {\n notificationService.showSuccessResponseNotification(res.config.url);\n return res;\n },\n async (err) => {\n const originalConfig = err.config;\n notificationService.showErrorResponseNotification(originalConfig.url);\n\n //check refresh token is valid or not\n\n if (\n originalConfig.url !== \"/bss/svc/login\" &&\n originalConfig.url !== \"/bss/svc/useRefreshToken\" &&\n originalConfig.url !== \"/bss/refreshToken\" &&\n err.response\n ) {\n // Access Token was expired\n if (\n (err.response.status === 0 || err.response.status === 401) &&\n !originalConfig._retry\n ) {\n // originalConfig._retry = true;\n\n try {\n await oauth.refreshToken(true);\n return axiosClient(originalConfig);\n } catch (_error) {\n if (_error.response.status === 400) {\n authService.logout();\n window.location.href = \"/\";\n }\n return Promise.reject(_error);\n }\n }\n } else if (err.response.status == 400) {\n authService.logout();\n window.location.href = \"/\";\n } else if (\n originalConfig.url === \"/bss/svc/useRefreshToken\" &&\n err.response\n ) {\n if (err.response.status === 0 || err.response.status === 401) {\n authService.logout();\n window.location.href = \"/\";\n }\n }\n return Promise.reject(err);\n }\n);\n\nexport function getRequestInAssets(URL) {\n return axiosClient.get(`/${URL}`).then((response) => response.data);\n}\nexport function getRequestWithCancelTokenInAssets(URL, token) {\n return axiosClient\n .get(`/${URL}`, { cancelToken: token })\n .then((response) => response.data);\n}\nexport function postRequestInAssets(URL, payload) {\n return axiosClient.post(`/${URL}`, payload).then((response) => response);\n}\n\nexport function patchRequestInAssets(URL, payload) {\n return axiosClient.patch(`/${URL}`, payload).then((response) => response);\n}\n\nexport function putRequestInAssets(URL, payload) {\n return axiosClient.put(`/${URL}`, payload).then((response) => response);\n}\n\nexport function deleteRequestInAssets(URL) {\n return axiosClient.delete(`/${URL}`).then((response) => response);\n}\n\nexport function getSiteStatusRequest(URL) {\n return axiosClient.get(`/${URL}`).then((response) => response.data);\n}\n\nexport function getSitePerformanceRequest(URL) {\n return axiosClient.get(`/${URL}`).then((response) => response.data);\n}\n\nexport function GetStateRequest(URL) {\n return axiosClient.get(`/${URL}`).then((response) => response.data);\n}\n\nexport function postFormDataRequestOnEnterprise(URL, payload) {\n return axiosClient.post(`/${URL}`, payload).then((response) => response);\n}\n\nexport function putFormDataRequestOnEnterprise(URL, payload) {\n return axiosClient.put(`/${URL}`, payload).then((response) => response);\n}\n","\nimport axios from \"axios\";\nimport TokenService from \"./tokenlocalstorage.service\";\nimport notificationService from \"services/notification.service\";\nimport authService from \"services/auth.service\";\n\nimport oauth from \"./axiosBaseAuthClient\";\n\nconst axiosClient = axios.create();\n\nvar test = false;\n\naxiosClient.defaults.baseURL = process.env.REACT_APP_SERVICE_IP_ADDRESS;\n// axiosClient.defaults.baseURL = 'http://34.219.48.250:8085/';\n\naxiosClient.defaults.headers = {\n \"Content-Type\": \"application/json\",\n Accept: \"application/json\",\n};\n\n//All request will wait 2 seconds before timeout\n// axiosClient.defaults.timeout = 2000;\n\naxiosClient.defaults.withCredentials = false;\n\naxiosClient.interceptors.request.use(\n (config) => {\n const token = TokenService.getLocalAccessToken();\n oauth.refreshToken(false);\n if (token && config.url !== \"bss/svc/login\") {\n config.headers[\"Authorization\"] = \"Bearer \" + token; // for Spring Boot back-end\n }\n\n if (token && config.url === \"bss/refreshToken\") {\n // config.headers[\"Authorization\"] =\n // \"Bearer \" + TokenService.getLocalRefreshToken(); // for Spring Boot back-end\n }\n return config;\n },\n (error) => {\n return Promise.reject(error);\n }\n);\n\naxiosClient.interceptors.response.use(\n (res) => {\n notificationService.showSuccessResponseNotification(res.config.url);\n return res;\n },\n async (err) => {\n const originalConfig = err.config;\n notificationService.showErrorResponseNotification(originalConfig.url);\n //check refresh token is valid or not\n\n if (\n originalConfig.url !== \"/bss/svc/login\" &&\n originalConfig.url !== \"/bss/refreshToken\" &&\n err.response\n ) {\n // Access Token was expired\n if (\n err.response.status === 0 ||\n err.response.status === 401\n //&& !originalConfig._retry\n ) {\n // originalConfig._retry = true;\n\n try {\n await oauth.refreshToken(true);\n return axiosClient(originalConfig);\n } catch (_error) {\n if (_error.response.status === 400) {\n authService.logout();\n window.location.href = \"/\";\n }\n return Promise.reject(_error);\n }\n }\n } else if (originalConfig.url === \"/bss/refreshToken\" && err.response) {\n console.log(err, \"ERORR\");\n if (\n err.response.status === 0 ||\n err.response.status === 401 ||\n err.response.status === 400\n ) {\n authService.logout();\n window.location.href = \"/\";\n }\n }\n\n return Promise.reject(err);\n }\n);\n\nexport function getRequestInService(URL) {\n return axiosClient.get(`/${URL}`).then((response) => response.data);\n}\nexport function getRequestWithCancelTokenInService(URL, token) {\n return axiosClient\n .get(`/${URL}`, { cancelToken: token })\n .then((response) => response.data);\n}\nexport function postRequestInService(URL, payload) {\n return axiosClient.post(`/${URL}`, payload).then((response) => response);\n}\n\nexport function patchRequestInService(URL, payload) {\n return axiosClient.patch(`/${URL}`, payload).then((response) => response);\n}\n\nexport function putRequestInService(URL, payload) {\n return axiosClient.put(`/${URL}`, payload).then((response) => response);\n}\n\nexport function deleteRequestInService(URL) {\n return axiosClient.delete(`/${URL}`).then((response) => response);\n}\n","\nimport axios from \"axios\";\nimport TokenService from \"./tokenlocalstorage.service\";\nimport notificationService from \"services/notification.service\";\nimport authService from \"services/auth.service\";\n\nimport oauth from \"./axiosBaseAuthClient\";\n\nconst axiosClient = axios.create();\n\nvar test = false;\n\naxiosClient.defaults.baseURL = process.env.REACT_APP_FILE_DOWNLOAD_SERVICE;\n// axiosClient.defaults.baseURL = 'http://54.185.127.15/minio/files';\n\naxiosClient.defaults.headers = {\n \"Content-Type\": \"application/json\",\n Accept: \"application/json\",\n};\n\n//All request will wait 2 seconds before timeout\n// axiosClient.defaults.timeout = 2000;\n\naxiosClient.defaults.withCredentials = false;\naxiosClient.interceptors.request.use(\n (config) => {\n const token = TokenService.getLocalAccessToken();\n oauth.refreshToken(false);\n if (token && config.url !== \"bss/svc/useRefreshToken\") {\n config.headers[\"Authorization\"] = \"Bearer \" + token; // for Spring Boot back-end\n }\n // if (token && config.url === \"bss/svc/useRefreshToken\") {\n // // config.headers[\"Authorization\"] =\n // // \"Bearer \" + TokenService.getLocalRefreshToken(); // for Spring Boot back-end\n // // // \"Bearer \" + TokenService.getLocalRefreshToken() ; // for Spring Boot back-end\n // }\n return config;\n },\n (error) => {\n return Promise.reject(error);\n }\n);\n\naxiosClient.interceptors.response.use(\n (res) => {\n notificationService.showSuccessResponseNotification(res.config.url);\n return res;\n },\n async (err) => {\n const originalConfig = err.config;\n notificationService.showErrorResponseNotification(originalConfig.url);\n\n //check refresh token is valid or not\n\n if (\n originalConfig.url !== \"/bss/login\" &&\n originalConfig.url !== \"/bss/refreshToken\" &&\n err.response\n ) {\n // Access Token was expired\n if (\n (err.response.status === 0 || err.response.status === 401) &&\n !originalConfig._retry\n ) {\n // originalConfig._retry = false;\n try {\n await oauth.refreshToken(true);\n return axiosClient(originalConfig);\n } catch (_error) {\n if (_error.response.status === 400) {\n authService.logout();\n window.location.href = \"/\";\n }\n return Promise.reject(_error);\n }\n }\n } else if (originalConfig.url === \"/bss/refreshToken\" && err.response) {\n if (err.response.status === 0 || err.response.status === 401) {\n authService.logout();\n window.location.href = \"/\";\n }\n }\n\n return Promise.reject(err);\n }\n);\nexport function getCountryRequest(URL) {\n return axiosClient.get(`/${URL}`).then((response) => response.data);\n}\nexport function getSiteStatusRequest(URL) {\n return axiosClient.get(`/${URL}`).then((response) => response.data);\n}\n\nexport function getSitePerformanceRequest(URL) {\n return axiosClient.get(`/${URL}`).then((response) => response.data);\n}\n\nexport function GetStateRequest(URL) {\n return axiosClient.get(`/${URL}`).then((response) => response.data);\n}\n\nexport function getRequestInFileDownload(URL) {\n return axiosClient.get(`/${URL}`).then((response) => response.data);\n}\n\nexport function postRequest(URL, payload) {\n return axiosClient.post(`/${URL}`, payload).then((response) => response.data);\n}\n\nexport function patchRequest(URL, payload) {\n return axiosClient.patch(`/${URL}`, payload).then((response) => response);\n}\n\nexport function putRequest(URL, payload) {\n return axiosClient.put(`/${URL}`, payload).then((response) => response);\n}\n\nexport function deleteRequest(URL) {\n return axiosClient.delete(`/${URL}`).then((response) => response);\n}\n","\nimport React, { useState, useEffect, useCallback } from \"react\";\nimport cn from \"classnames\";\nimport { Link, useLocation } from \"react-router-dom\";\nimport styles from \"./Navigation.module.scss\";\nimport authService from \"services/auth.service\";\nimport LocalStorageService from \"services/tokenlocalstorage.service\";\nimport tokenlocalstorageService from \"services/tokenlocalstorage.service\";\nimport notificationService from \"services/notification.service\";\nimport {\n postRequestInService as postRequest,\n getRequestInService as getRequest,\n} from \"services/axiosServiceBaseClient\";\nimport { getRequestInFileDownload } from \"services/axiosFileDownloadService\";\nimport jwtDecode from \"jwt-decode\";\nimport axios from \"axios\";\n\nconst titleCase = (title) =>\n title\n ?.split(/ /g)\n .map((word) => `${word.substring(0, 1).toUpperCase()}${word.substring(1)}`)\n .join(\" \");\n\nvar navAdmin = {\n id: 1,\n username: titleCase(authService.getUserName()),\n pageGroups: [\n {\n id: 3_1,\n pageGroupName: \"Main\",\n pageLinks: [\n {\n id: 3_3_1,\n pageName: \"Dashboard\",\n img: require(\"assets/home_black.svg\").default,\n link: \"/Dashboard\",\n },\n {\n id: 3_3_2,\n pageName: \"Tracking\",\n img: require(\"assets/track.svg\").default,\n link: \"/Tracking\",\n },\n {\n id: 3_3_3,\n pageName: \"Swapping\",\n img: require(\"assets/Swapping.png\").default,\n link: \"/Swapping\",\n },\n {\n id: 3_3_3,\n pageName: \"Invoice\",\n img: require(\"assets/invoice 1.png\").default,\n link: \"/Invoice\",\n },\n {\n id: 3_3_3,\n pageName: \"Reports\",\n img: require(\"assets/repor 1(2).png\").default,\n link: \"/Reports\",\n },\n {\n id: 3_3_3,\n pageName: \"Alerts\",\n img: require(\"assets/alert.png\").default,\n link: \"/Alerts\",\n },\n ],\n },\n {\n id: 3_2,\n pageGroupName: \"Status\",\n pageLinks: [\n {\n id: 3_3_4,\n pageName: \"Sites\",\n img: require(\"assets/sites.png\").default,\n link: \"/sites\",\n },\n\n {\n id: 3_3_5,\n pageName: \"SwapStation\",\n img: require(\"assets/swapstation.png\").default,\n link: \"/SwapStation\",\n },\n {\n id: 3_3_6,\n pageName: \"Batteries\",\n img: require(\"assets/batteries.png\").default,\n link: \"/batteries\",\n },\n ],\n },\n {\n id: 3_3,\n pageGroupName: \"Operations\",\n pageLinks: [\n {\n id: 3_3_1,\n pageName: \"Schedule\",\n img: require(\"assets/Sechdule.png\").default,\n link: \"/Schedule\",\n },\n {\n id: 3_3_2,\n pageName: \"ServiceRequest\",\n img: require(\"assets/ServiceListing.png\").default,\n link: \"/ServiceRequest\",\n },\n ],\n },\n {\n id: 3_4,\n pageGroupName: \"Configuration\",\n pageLinks: [\n {\n id: 3_3_1,\n pageName: \"Users\",\n img: require(\"assets/Users.svg\").default,\n link: \"/Users\",\n },\n {\n id: 3_3_2,\n pageName: \"Assets\",\n // img: require(\"assets/assets.svg\").default,\n img: require(\"assets/flower.svg\").default,\n link: \"/Assets\",\n },\n {\n id: 3_3_3,\n pageName: \"Pricing\",\n img: require(\"assets/pricing.png\").default,\n link: \"/Pricing\",\n },\n ],\n },\n ],\n};\n\nvar navOperator = {\n id: 1,\n username: titleCase(authService.getUserName()),\n pageGroups: [\n {\n id: 3_1,\n pageGroupName: \"Main\",\n pageLinks: [\n {\n id: 3_3_1,\n pageName: \"Dashboard\",\n img: require(\"assets/Dashboard.png\").default,\n link: \"/Dashboard\",\n },\n {\n id: 3_3_2,\n pageName: \"Tracking\",\n img: require(\"assets/track.svg\").default,\n link: \"/Tracking\",\n },\n {\n id: 3_3_3,\n pageName: \"Swapping\",\n img: require(\"assets/Swapping.png\").default,\n link: \"/Swapping\",\n },\n {\n id: 3_3_3,\n pageName: \"Invoice\",\n img: require(\"assets/invoice 1.png\").default,\n link: \"/Invoice\",\n },\n {\n \n id: 3_3_3,\n pageName: \"Reports\",\n img: require(\"assets/repor 1(2).png\").default,\n link: \"/Reports\",\n },\n \n {\n id: 3_3_3,\n pageName: \"Alerts\",\n img: require(\"assets/alert.png\").default,\n link: \"/Alerts\",\n },\n ],\n },\n {\n id: 3_2,\n pageGroupName: \"Status\",\n pageLinks: [\n {\n id: 3_3_4,\n pageName: \"Sites\",\n img: require(\"assets/sites.png\").default,\n link: \"/sites\",\n },\n {\n id: 3_3_5,\n pageName: \"SwapStation\",\n img: require(\"assets/swapstation.png\").default,\n link: \"/SwapStation\",\n },\n {\n id: 3_3_6,\n pageName: \"Batteries\",\n img: require(\"assets/batteries.png\").default,\n link: \"/batteries\",\n },\n ],\n },\n {\n id: 3_3,\n pageGroupName: \"Operations\",\n pageLinks: [\n {\n id: 3_3_1,\n pageName: \"Schedule\",\n img: require(\"assets/Sechdule.png\").default,\n link: \"/Schedule\",\n },\n {\n id: 3_3_2,\n pageName: \"ServiceRequest\",\n img: require(\"assets/ServiceListing.png\").default,\n link: \"/ServiceRequest\",\n },\n ],\n },\n {\n id: 3_4,\n pageGroupName: \"Configuration\",\n pageLinks: [\n {\n id: 3_3_2,\n pageName: \"Assets\",\n // img: require(\"assets/asset.svg\").default,\n img: require(\"assets/flower.svg\").default,\n \n link: \"/Assets\",\n },\n {\n id: 3_3_3,\n pageName: \"Pricing\",\n img: require(\"assets/pricing.png\").default,\n link: \"/Pricing\",\n },\n ],\n },\n ],\n};\n\nvar testingOne = \"amhitted\"\nvar tabTemp=\"inactive\"\nvar navTemp = \"single\"\n\nexport default function Navigation(props) {\n const { pathname } = useLocation();\n const splitLocation = pathname.split(\"/\");\n const [userRole, setUserRole] = useState(\"\");\n const [nav, setNav] = useState(navOperator);\n const [choosenFileName, setChoosenFileName] = useState(\"No file Choosen\");\n const [image, setImage] = useState([]);\n const [email, setEmail] = useState(\"\");\n const [enterpriseName, setEnterpriseName] = useState(\"\");\n const [userEmail, setUserEmail] = useState(\"\");\n const [profilePicture, setProfilePicture] = useState(\"\");\n const [imgData, setImgData] = useState(null);\n const [imgUrl, setImgUrl] = useState(\"\");\n const [data, setData] = useState([]);\n const [name, setName] = useState(\"\")\n const [enterpriseUser, setEnterpriseUSer] = useState(\"\");\n var fileLocation = \"\";\n\n const initialFormValues = {\n profilePicture: \"\",\n };\n const [formValues, setFormValues] = useState(initialFormValues);\n const arrayBufferToBase64q = useCallback((buffer) => {\n var binary = \"\";\n var bytes = new Uint8Array(buffer);\n var len = bytes.byteLength;\n for (var i = 0; i < len; i++) {\n binary += String.fromCharCode(bytes[i]);\n }\n return window.btoa(binary);\n });\n // function bin2String(array) {\n // var result = \"\";\n // for (var i = 0; i < array.length; i++) {\n // result += String.fromCharCode(parseInt(array[i], 2));\n // }\n // return result;\n // }\n\n const downloadProfilePicture = useCallback(async (enterprise, imgPath) => {\n \n const encodeImgPath= encodeURIComponent(imgPath)\n await getRequestInFileDownload(\n `downloadFile/${enterprise}?fileName=${encodeImgPath}` //${imgPath} ${enterprise}\n ).then((res) => {\n if (res) {\n setData(res);\n if (res) {\n props.setImage(res);\n tokenlocalstorageService.setProfileImage(res);\n }\n }\n });\n });\n\n const editEventHandle = () => {\n document.getElementById(\"img-update\").click();\n };\n\n const avatarUpdateHandle = (event, email) => {\n if (event.target.files && event.target.files[0]) {\n let img = event.target.files[0];\n var size = parseFloat(img.size / (1024 * 1024)).toFixed(2); \n if(size > 2) {\n notificationService.showNonBlacklistedError(\"\", \"Please select image size less than 2 MB.\");\n return false\n }\n\n setChoosenFileName(img.name);\n var imgvar = \"\";\n imgvar = img;\n setImage(imgvar);\n var token = LocalStorageService.get(\"token\");\n var decode = jwtDecode(token);\n var email = decode.email;\n setEmail(email);\n // console.log(profilePicture, '.............PROFILE PICTURE')\n\n if (userRole === \"admin\") {\n const formData = new FormData();\n formData.append(\"file\", imgvar);\n\n // const updateAdminProfilePicture = (email)=>{\n postRequest(\"bss/svc/uploadAdminImage?emailId=\" + email, formData).then(\n (res) => {\n if (res.status === 200) {\n // getUserDetail();\n // console.log('<<<<<<<\n
\n \n \n
\n \n props.setNavOpen(!props.navOpen)}\n />\n
\n \n { localStorage.setItem(\"activeTabCount\", \"other\"); }} to=\"/Dashboard\">\n \n alert('It is clickable')}\n />\n \n
\n \n {/* */}\n {/* \n {\"SwapUp\"}\n
\n\n {\"BSS\"}\n
*/}\n\n
\n \n\n {/* \n {/* \n {displayHeader?.state && (\n
\n\n\n :\n \n
\n\n {/* implement here vikas */}\n {open ? (\n localAssetActiveCount !== \"zoneAsset\" ?\n \n \n setDropped(!dropped)}\n onClick={() => {\n if (localAssetActiveCount === \"other\") {\n // setDisplayHeader(LocalStorageService?.getDisplayHeader());\n headerForOtherNav();\n\n }\n }}\n />\n
\n \n \n \n {stateList.map((obj) => {\n return ;\n })}\n \n
\n )}\n\n {displayHeader?.city && (\n \n \n \n {cityList.map((obj) => {\n return ;\n })}\n \n
\n )}\n\n {displayHeader?.zone && (\n \n \n \n {zones.map((obj) => {\n return ;\n })}\n \n
\n )}\n\n \n \n
\n ) : (\n <>\n )}\n\n {/* upto here */}\n\n \n No Filter Criteria!
\n\n \n
\n \n \n {/* alert('It is clickable')}\n > */}\n \n <>\n
*/}\n \n
\n \n \n\n {/* */}\n \n
\n \n \n \n \n alert('vikas')}\n\n style={{\n borderRadius: \"100%\",\n width: \"25px\",\n height: \"25px\",\n display: \"block\",\n marginLeft: \"auto\",\n marginRight: \"auto\",\n }}\n />\n
\n \n
\n {/* handleLogout */}\n {/* */}\n\n {/* */}\n\n {/* \n
*/}\n {/* */}\n\n {/* \n
*/}\n \n
\n \n
\n \n \n
\n \n \n \n
\n \n
\n \n \n
\n \n \n
\n \n \n \n
\n {\"Filters\"}\n
\n \n\n \n
\n \n \n\n \n {open && (\n
\n )}\n \n \n
\n \n \n \n \n \n \n \n \n \n \n
\n\n \n \n \n {sitesList.map((obj) => {\n return ;\n })}\n \n
\n\n \n \n \n {chargerList.map((obj) => {\n return ;\n })}\n \n
\n\n \n {\n handleClickApply(\"reset\");\n }}\n >\n Reset\n \n {\n handleClickApply(\"submit\");\n }}\n >\n Apply\n \n
\n \n \n
\n \n \n \n \n {\"Energy\"}\n \n\n \n {\"Time\"}\n \n
\n \n \n
\n \n \n \n \n {\"Swapping\"}\n \n \n {\"Time\"}\n \n
\n \n \n
\n \n \n \n \n {\"Swap Station Fault\"}\n \n\n \n {\"Time\"}\n \n
\n \n \n
\n \n \n \n \n {\"Revenue\"}\n \n\n \n {\"Time\"}\n \n
\n \n \n
\n \n \n \n \n \n \n );\n}\n\nfunction SiteAnalytics(props) {\n return (\n <>\n \n \n {\"SOC\"}\n \n\n \n {\"Time\"}\n \n
\n \n
\n );\n}\n","\n/* eslint-disable array-callback-return */\nimport React, { useCallback, useState, useEffect } from \"react\";\nimport cn from \"classnames\";\nimport { getRequest } from \"../../services/axiosBaseClient\";\nimport styles from \"./Layout.module.scss\";\nimport LayoutComponent from \"./LayoutComponent\";\nimport { makePropGetter } from \"react-table\";\nimport { useParams } from \"react-router-dom\";\n\nvar data = {\n statusCode: 200,\n message: \"This is site list...\",\n error: false,\n data: [\n {\n faultySlots: 19,\n temperature: 30,\n name: \"string123\",\n occupiedSlots: 11,\n availableSlots: 10,\n swaps: 35,\n },\n ],\n};\n\nexport default function Layout(props) {\n const siteId = props.siteId;\n const enterprise = props.enterprise;\n const [siteData, setSiteData] = useState([]);\n\n const getSiteLayoutData = useCallback(async () => {\n console.log(\"am running\");\n await getRequest(\"bss/getSiteLayout?siteId=\" + siteId).then((res) => {\n if (res && res?.data) {\n setSiteData(res.data);\n }\n });\n }, []);\n\n useEffect(() => {\n getSiteLayoutData();\n }, [getSiteLayoutData]);\n\n return (\n \n
\n\n
\n\n
\n \n
\n\n \n
\n \n \n {props.data.totalSlots}\n
\n \n
\n \n \n {\"Swap Station\"+'\\n'+props.data.name}\n
\n \n {props.data.temperature}\n ℃\n
\n \n\n
\n
\n\n \n {'Available'}\n
\n \n \n
\n \n {props.data.availableSlots}\n\n \n
\n \n
\n\n \n {'Charging'}\n
\n \n \n
\n \n {props.data.occupiedSlots}\n\n \n
\n \n
\n\n \n {'Faulted'}\n
\n \n \n
\n \n {props.data.faultySlots}\n\n \n
\n \n\n
\n
\n \n {'No of Swaps'}\n
\n \n \n {props.data.swaps}\n
\n \n {siteData.map((i) => {\n return
\n \n
\n \n \n
\n \n {/* */}\n \n \n
\n \n \n
\n \n \n
\n \n \n\n \n \n
\n \n \n \n\n \n\n
\n \n {title}\n \n {/*
*/}\n\n\n
\n\n */}\n\n
\n
\n\n \n\n \n
\n \n \n {\"Site Address1\"}\n
\n {formErrors.siteAddress1}
\n\n
\n \n \n {\"Site Address2\"}\n
\n {formErrors.siteAddress2}
\n \n \n\n\n
\n\n \n\n \n
\n \n \n {\"Country\"}\n
\n\n {formErrors.countryId}
\n\n
\n \n\n \n
\n \n {\"State\"}\n
\n\n {formErrors.stateId}
\n\n
\n\n \n\n \n
\n \n \n {\"Latitude\"}\n
\n {formErrors.latitude}
\n\n
\n \n \n {\"Longitude\"}\n
\n {formErrors.logtitude}
\n \n \n\n\n
\n\n \n\n \n
\n \n \n {\"City\"}\n
\n {formErrors.city}
\n\n
\n \n \n {\"Pin Code\"}\n
\n {formErrors.pincode}
\n \n \n\n\n
\n \n \n \n \n \n \n );\n}\n\n// export default function Site(props) {\n// return (\n// <>\n// \n
\n\n \n\n \n
\n \n {\"Site Status\"}\n
\n {formErrors.siteStatus}
\n\n
\n \n \n {\"Number of Swap Stations\"}\n
\n {formErrors.numberOfswapStation}
\n\n {name}\n
\n\n\n \n {\n setPage(0);\n // history.push(`sites/site/${siteId}/${name}/${enterprise}/0`);\n history.push(`0`);\n //window.location.reload();\n ///sites/site/:id/:name/:enterpriseName/:view\n }}\n >\n {\"Analytics\"}\n \n
\n \n\n \n {\n setEchartInstance(instance);\n }}\n opts={{ renderer: \"svg\" }}\n option={options()}\n />\n
\n );\n}\n","\nimport React, { useState, useEffect, useMemo } from \"react\";\nimport styled from \"styled-components\";\nimport { useTable, usePagination, useSortBy } from \"react-table\";\n\nconst Styles = styled.div`\n padding: 1rem;\n overflow-x: auto;\n margin-bottom: 50px;\n width: 100%;\n table {\n border-collapse: separate;\n border-spacing: 0;\n border: 2px solid #f5f5ff;\n width: 100%;\n height: 50px;\n\n thead {\n background-color: #f5f5ff;\n }\n td {\n border: 1px rgb(201, 204, 216);\n border-style: solid none solid none;\n padding: 10px;\n }\n tr {\n height: 60px;\n width: 1086px;\n left: 309px;\n top: 350px;\n border-radius: 5px;\n }\n tr:hover{\n background:#f5f5ff;\n }\n th {\n color: #000000d8;\n }\n span {\n margin: 5px;\n }\n th,\n td {\n border-bottom: 1px solid #f5f5ff;\n border-right: 0px solid black;\n padding: 8px;\n white-space: nowrap;\n text-align: start;\n :last-child {\n border-right: 0;\n text-align: center;\n }\n }\n }\n .pagination {\n height: 50px;\n padding: 0.2rem 0;\n position: absolute;\n align-items: baseline;\n right: 14px;\n justify-content: end;\n bottom: 5px;\n button,\n select {\n margin: 2px;\n }\n button {\n border: 1px solid #999999;\n background-color: #dcdcdc; // #ffffff;\n color: #666666;\n margin: 16px 10px;\n }\n\n button:hover {\n border: 1px solid #999999; //#0099cc;\n }\n\n button:disabled,\n button[disabled] {\n border: 1px solid #999999;\n background-color: #ffffff; //#cccccc;\n }\n }\n\n @media(max-width: 1536px){\n .pagination {\n height: 50px;\n padding:0;\n right: 15px !important;\n // bottom: 15px !important;\n }\n }\n \n\n @media(max-width: 1280px){\n .pagination {\n height: 50px;\n padding:0;\n right: 15px !important;\n }\n }\n @media(max-width: 1098px){\n .pagination {\n height: 50px;\n padding:0;\n right: 14px !important ;\n select {\n margin: 2px 5px 0px 0px;\n }\n }\n }\n\n @media(max-width: 768px){\n .pagination {\n height: 50px;\n padding:0;\n right: -1px !important;\n select {\n margin: 2px 20px 0px 0px;\n }\n }\n }\n .double-screen-pagination {\n height: 50px;\n padding: 2rem 0 0 0;\n position: absolute;\n align-items: baseline;\n right: 15px;\n justify-content: end;\n button,\n select {\n margin: 2px;\n }\n button {\n border: 1px solid #999999;\n background-color: #dcdcdc; // #ffffff;\n color: #666666;\n margin: 16px 10px;\n }\n\n button:hover {\n border: 1px solid #999999; //#0099cc;\n }\n\n button:disabled,\n button[disabled] {\n border: 1px solid #999999;\n background-color: #ffffff; //#cccccc;\n }\n }\n @media(max-width: 1536px){\n .double-screen-pagination {\n height: 50px;\n padding:0;\n right: 0 !important;\n }\n }\n \n\n @media(max-width: 1280px){\n .double-screen-pagination {\n height: 50px;\n padding:0;\n right: 15px;\n }\n }\n @media(max-width: 1098px){\n .double-screen-pagination {\n height: 50px;\n padding:0;\n right: 0 !important ;\n }\n }\n\n @media(max-width: 768px){\n .double-screen-pagination {\n height: 50px;\n padding:0;\n right: 0;\n }\n }\n`;\n\nvar tempIndexValue=0;\nvar signTypeTemp;\n\nvar tempTab = localStorage.getItem(\"navTemp\");\nvar testOff = false;\nvar temTableKey = \"\";\n\nfunction Table({\n totalCount,\n columns,\n data,\n pagination,\n defaultFilterMethod,\n paginationDoubleScreen,\n activepageCount,\n paginationCountHanlde,\n scroll,\n scrollRef,\n tigger,\n tabTemp,\n tempKey,\n filterAction,\n tempBtnType,\n tempSearchTrigger,\n userfilterAction,\n}) {\n // Use the state and functions returned from useTable to build your UI\n\n const moveScroll = () => {\n window.scrollTo({ top: 0, left: 0, behavior: \"smooth\" });\n };\n const {\n getTableProps,\n getTableBodyProps,\n headerGroups,\n rows,\n prepareRow,\n page, // Instead of using 'rows', we'll use page,\n // which has only the rows for the active page\n\n // The rest of these things are super handy, too ;)\n canPreviousPage,\n canNextPage,\n gotoPage,\n pageOptions,\n nextPage,\n pageCount,\n previousPage,\n setPageSize,\n stateReducer,\n state: { pageIndex, pageSize },\n } = useTable(\n {\n sortTypes: {\n alphanumeric: (row1, row2, columnName) => {\n const rowOneColumn = row1.values[columnName];\n const rowTwoColumn = row2.values[columnName];\n if (rowOneColumn == null) {\n return 1;\n } else if (isNaN(rowOneColumn)) {\n return rowOneColumn?.toUpperCase() > rowTwoColumn?.toUpperCase()\n ? 1\n : -1;\n }\n return Number(rowOneColumn) > Number(rowTwoColumn) ? 1 : -1;\n },\n },\n columns,\n data,\n // initialState: { pageIndex: activepageCount ? activepageCount : 0 },\n initialState: {\n pageIndex:\n tigger == \"init\" && tempKey\n ? 0\n : tigger == \"amhitted\" || tabTemp == \"active\"\n ? 0\n : tigger == \"view\" && userfilterAction == 1 ? 0\n : tigger == \"view\" && userfilterAction == 0 ? tempIndexValue \n // ? tempIndexValue\n : tempIndexValue && signTypeTemp === \"front\" && tigger == \"view\" && userfilterAction == 0\n ? tempIndexValue + 1\n : tempIndexValue && signTypeTemp === \"back\" && tigger == \"view\" && userfilterAction == 0\n ? tempIndexValue - 1\n : 0,\n },\n defaultFilterMethod,\n },\n useSortBy,\n usePagination\n );\n const [typeMom, setTypeMom] = useState(\"\");\n const firstPageRows = rows.slice(0, 10);\n const [tableSrollTrigger, setTableScrollTigger] = useState(false);\n // Render the UI for your table\n\n useEffect(() => {\n paginationCountHanlde && paginationCountHanlde(pageIndex);\n setTypeMom(signTypeTemp);\n testOff = true;\n // temTableKey = tempKey;\n }, [pageIndex && tempIndexValue, tigger, userfilterAction]);\n\n const paginationMomentHandle = (signType) => {\n if (signType == \"front\") {\n // tigger= true\n tigger = \"init\";\n nextPage();\n tempIndexValue = pageIndex + 1;\n signTypeTemp = signType;\n setTypeMom(signType);\n } else {\n // tigger= true\n tigger = \"init\";\n previousPage();\n tempIndexValue = pageIndex - 1;\n signTypeTemp = signType;\n setTypeMom(signType);\n }\n // pageIndexTriggerSwtich = false;\n moveScroll();\n };\n\n return (\n <>\n \n {/* Showing {page.length} of {swapStationCount} Records */}\n Showing {(pageIndex ) * pageSize + 1}-{Math.min((pageIndex +1)* pageSize, totalCount)} of {totalCount} Records\n
}\n \n {\n // previousPage();\n // moveScroll();\n // }}\n\n onClick={() => {\n paginationMomentHandle(\"back\");\n setTableScrollTigger(() => true);\n }}\n disabled={!canPreviousPage}\n >\n {\"<\"}\n \n {\"\"}\n \n Page {pageIndex + 1} of{\" \"}\n {pageOptions.length === 0 ? 1 : pageOptions.length}{\" \"}\n \n {\n setTableScrollTigger(() => false);\n paginationMomentHandle(\"front\");\n }}\n // onClick={() =>{\n // nextPage();\n // moveScroll();\n // }}\n disabled={!canNextPage}\n >\n {\">\"}\n {\" \"}\n {\n setPageSize(Number(e.target.value));\n moveScroll();\n }}\n >\n {[10, 20, 30, 40, 50].map((pageSize) => (\n \n ))}\n \n
\n \n ) : (\n \"\"\n )}\n \n );\n}\nfunction filterCaseInsensitive(filter, row) {\n const id = filter.pivotId || filter.id;\n return (\n row[id] !== undefined ?\n String(row[id].toLowerCase()).startsWith(filter.value.toLowerCase())\n :\n true\n );\n}\nfunction ZoneTable(props) {\n return (\n \n ![]({require(\"assets/search.svg\").default}\n)
{\n searchHandle(e)\n // props?.onSearch(props?.filter,searchtValue)\n // // props.setFilterAction([2, props.filterAction[1] == 0 ? 1 : 0]);\n props?.setFilterAction && props?.setFilterAction([2, props?.filterAction[1] == 0 ? 1 : 0]);\n }}\n className={cn(styles.image_search_text)}\n />\n {\n setSearchBarData(e.target.value);\n setSearchValue(() =>e.target.value);\n // props.setSearch && props.setSearch(e.target.value);\n }}\n \n onKeyPress={(event) => {\n if (event.key === \"Enter\") {\n // props.onSearch(searchtValue);\n props?.onSearch(props?.filter,0, 10,\"init\",tempSearchvalueStore.trim());\n emptyErrorHandle()\n localStorage.setItem(\"tableSearchTigger\", \"active\");\n props?.setFilterAction && props?.setFilterAction([2, props?.filterAction[1] == 0 ? 1 : 0]);\n }\n }}\n />\n
\n );\n}\n","\nimport React, { useEffect, useState, useCallback } from \"react\";\nimport cn from \"classnames\";\n\nimport styles from \"./TableAndSearchMaster.module.scss\";\nimport notificationService from \"services/notification.service\";\n\nvar tempSearchvalueStore;\n\nexport default function NewSearch(props) {\n const { tempSearch } = props;\n\n const [searchtValue, setSearchValue] = useState(\"\");\n\n const setSearchBarData = (string) => {\n tempSearchvalueStore = string;\n localStorage.setItem(\"lastTableSearch\", string);\n // setSearchValue(string);\n // if (string === \"\") return props.onSearch(props?.filter);\n setSearchValue(string);\n if (string === \"\") return props.onSearch();\n };\n\n useEffect(() => {\n localStorage.setItem(\"tableSearchTigger\", \"inActive\");\n }, []);\n\n useEffect(() => {\n if (\n !tempSearch ||\n typeof tempSearch === \"object\" ||\n typeof tempSearch === \"undefined\" ||\n (typeof tempSearch === \"string\" && tempSearch?.trim().length === 0)\n ) {\n setSearchValue(\"\");\n } else {\n const valueCheck = localStorage.getItem(\"lastTableSearch\");\n console.log(valueCheck, \"valueCheck\");\n if (valueCheck) {\n tempSearchvalueStore = tempSearch;\n } else {\n tempSearchvalueStore = \"\";\n }\n setSearchValue(tempSearchvalueStore);\n }\n }, [tempSearch]);\n\n useEffect(() => {\n const valueCheck = localStorage.getItem(\"lastTableSearch\");\n if (valueCheck) {\n tempSearchvalueStore = tempSearch;\n } else {\n tempSearchvalueStore = \"\";\n }\n setSearchValue(tempSearchvalueStore);\n }, []);\n\n const emptyErrorHandle = () => {\n const trimValue = searchtValue.trim();\n console.log(trimValue,\"trimValue\")\n const searchLength = trimValue.length;\n if (searchLength === 0) {\n notificationService.showNonBlacklistedError(\"\", \"Please enter search criteria.\");\n }\n }\n\n const searchHandle = () => {\n localStorage.setItem(\"tableSearchTigger\", \"active\");\n emptyErrorHandle();\n props.onSearch(searchtValue.trim());\n };\n\n return (\n {\n searchHandle(e)\n // props?.onSearch(props?.filter,searchtValue)\n // // props.setFilterAction([2, props.filterAction[1] == 0 ? 1 : 0]);\n props?.setFilterAction && props?.setFilterAction([2, props?.filterAction[1] == 0 ? 1 : 0]);\n }}\n className={cn(styles.image_search_text)}\n />\n {\n setSearchBarData(e.target.value);\n setSearchValue(() =>e.target.value);\n // props.setSearch && props.setSearch(e.target.value);\n }}\n \n onKeyPress={(event) => {\n if (event.key === \"Enter\") {\n // props.onSearch(searchtValue);\n props?.onSearch(props?.filter,0, 10,\"init\",tempSearchvalueStore.trim());\n emptyErrorHandle()\n localStorage.setItem(\"tableSearchTigger\", \"active\");\n props?.setFilterAction && props?.setFilterAction([2, props?.filterAction[1] == 0 ? 1 : 0]);\n }\n }}\n />\n \n {\n searchHandle(e);\n // props?.onSearch(props?.filter,searchtValue)\n // // props.setFilterAction([2, props.filterAction[1] == 0 ? 1 : 0]);\n props?.setFilterAction &&\n props?.setFilterAction([2, props?.filterAction[1] == 0 ? 1 : 0]);\n }}\n className={cn(styles.image_search_text)}\n />\n {\n setSearchBarData(e.target.value);\n // props.setSearch && props.setSearch(e.target.value);\n }}\n value={tempSearchvalueStore}\n onKeyPress={(event) => {\n if (event.key === \"Enter\") {\n emptyErrorHandle()\n props.onSearch(searchtValue.trim());\n // props?.onSearch(props?.filter, searchtValue);\n localStorage.setItem(\"tableSearchTigger\", \"active\");\n props?.setFilterAction &&\n props?.setFilterAction([2, props?.filterAction[1] == 0 ? 1 : 0]);\n }\n }}\n />\n
\n );\n}\n","\nimport cn from \"classnames\";\nimport styles from \"./TableAndSearchMaster.module.scss\";\nimport Table from \"./Table\";\nimport Search from \"../common/Search\";\nimport Button from \"@material-ui/core/Button\";\nimport React, {\n useState,\n useEffect,\n useRef,\n Component,\n useCallback,\n} from \"react\";\nimport { Link, useHistory } from \"react-router-dom\";\nimport { getRequestInAssets } from \"services/axiosAssetsBaseClient\";\nimport {\n getSitePerformanceRequest,\n getSiteStatusRequest,\n} from \"../../services/axiosBaseClient\";\nimport { getRequest, postRequest } from \"services/axiosBaseClient\";\nimport LocalStorageService from \"services/tokenlocalstorage.service\";\nimport NewSearch from \"./NewSearch\";\n\nfunction TableAndSearchMaster1(props) {\n return (\n \n
\n );\n}\n\nvar noData = [];\nvar tempTab;\nvar tempSearchTrigger = \"inactive\"\nvar tempBtnType\n\nexport default function TableAndSearchMaster(props) {\n\n const history = useHistory();\n\n const scrollRef = useRef(null);\n\n const scrollFun = () => {\n !props.scroll && scrollRef?.current?.scrollTo(0, 0);\n };\n\n const filterInitialValue = {\n startDate: parseInt(Date.now() / 1000) - 86400,\n endDate: parseInt(Date.now() / 1000),\n siteId: \"\",\n chargerId: \"\",\n state: \"\",\n city: \"\",\n zoneId: \"\",\n charger: \"\",\n time: \"HOUR_24\",\n };\n\n const [sitesList, setSitesList] = useState([]);\n const [chargerList, setChargerList] = useState([]);\n const [open, setOpen] = React.useState(false);\n const [selectTime, setSelectTime] = useState(24);\n const [filter, setFilter] = useState(filterInitialValue);\n const [performanceData, setSitePerformanceData] = useState([]);\n const [performanceDataLabel, setSitePerformanceLabel] = useState([]);\n const [performanceDataLabelVal, setSitePerformanceLabelVal] = useState([]);\n const [filterAction, setFilterAction] = useState([0, 1]); \n const [userfilterAction, setUserFilterAction] = useState(0); \n\n const getSites = useCallback(async () => {\n await getRequestInAssets(\"bss/site/siteList\")\n .then((res) => {\n if (res.data != null) {\n setSitesList(res?.data);\n }\n })\n .catch((err) => {\n console.error(\"Error\", err);\n });\n }, []);\n\n useEffect(() => {\n getSites();\n }, []);\n\n\n // useEffect(()=>{\n // console.log(\"am runingggg\")\n // tempBtnType = localStorage.getItem(\"headerBtnType\");\n // tempSearchTrigger = localStorage.getItem(\"tableSearchTigger\");\n // if(tempBtnType ==\"reset\" || tempSearchTrigger ==\"active\" ) {\n // setFilterAction(1)\n // } else if(tempBtnType === \"submit\" || tempSearchTrigger ==\"active\") {\n // setFilterAction(1)\n // } else {\n // setFilterAction(0)\n // }\n // // if (props?.headerFilterParms && Object?.keys(props?.headerFilterParms).length > 0) {\n // // console.log(props?.headerFilterParms,\"props?.headerFilterParms\")\n // // setFilterAction(1);\n // // // filterAction=1\n // // console.log(filterAction,\"AMM RUNINGGGG\")\n // // } else {\n // // setFilterAction(1);\n // // // filterAction =0\n // // console.log(filterAction,\"AMM RUNINGGGG\")\n // // }\n // console.log(userfilterAction,\"userfilterAction\")\n // },[props.headerFilterParms, props.searchOpts.onSearch]);\n\n useEffect(()=>{\n tempBtnType = localStorage.getItem(\"headerBtnType\");\n tempSearchTrigger = localStorage.getItem(\"tableSearchTigger\");\n if(tempBtnType ==\"reset\" || tempSearchTrigger ==\"active\" ) {\n setUserFilterAction(1)\n } else if(tempBtnType === \"submit\" || tempSearchTrigger ==\"active\") {\n setUserFilterAction(1)\n } else {\n setUserFilterAction(0)\n }\n // const valueCheck = localStorage.getItem(\"lastTableSearch\")\n // tempBtnType = localStorage.getItem(\"headerBtnType\");\n // console.log(tempBtnType,\"tempBtnType\")\n // console.log(valueCheck.length,\"valueCheck\")\n // tempSearchTrigger = localStorage.getItem(\"tempSearchTrigger\");\n // console.log(tempSearchTrigger,\"tempSearchTrigger\")\n // if(tempBtnType ==\"reset\" || tempSearchTrigger ==\"active\" ) {\n // setUserFilterAction(1)\n // console.log(\"am run1\")\n // } else if(tempBtnType === \"submit\" || tempSearchTrigger ==\"active\" ) {\n // setUserFilterAction(1)\n // console.log(\"am run2\")\n // } else if (tempBtnType === \"off\" && valueCheck == 0) {\n // setUserFilterAction(0)\n // }\n // else {\n // console.log(\"am run3\")\n // setUserFilterAction(0)\n // }\n },[props.headerFilterParms, props.searchOpts.onSearch]);\n\n \n\n\n // const onSearchResult = (filter, data) => {\n // console.log(filter, data,\"DATAA\")\n // props.searchOpts.onSearch(filter);\n // };\n\n const getChargers = useCallback(async (siteId) => {\n await getRequestInAssets(\n \"bss/swappingStation/getswapStationInfo?siteId=\" + siteId\n )\n .then((res) => {\n if (res.data != null) {\n setChargerList(res?.data?.swapStationList);\n }\n })\n .catch((err) => {\n console.error(\"Error\", err);\n });\n }, []);\n\n const handleClick = (btnType) => {\n if (open) {\n // startDate: 1654490170,\n // endDate: 1655097566,\n // siteId: 1,\n // chargerId: 0,\n // state: \"\",\n // city: \"\",\n // zoneId: 0,\n // setOpen(false);\n if (btnType == \"reset\") {\n filter.time = filterInitialValue.time;\n filter.chargerId = \"\";\n filter.siteId = \"\";\n setFilter(filterInitialValue);\n setFilterAction([1, filterAction[1] == 0 ? 1 : 0]);\n props.onReset();\n getSitePerformanceData(\"False\", filter);\n setChargerList([]);\n } else if (btnType == \"apply\") {\n setFilterAction([1, filterAction[1] == 0 ? 1 : 0]);\n //topSites=False&timeFilterEnum=HOUR_12\n //cityId=1&name=nxjskabh&siteId=7&stateId=1&swapStationId=1&timeFilterEnum=MONTH_3&zoneId=1\"\n //cityId=1&name=nxjskabh&siteId=7&stateId=1&swapStationId=1&timeFilterEnum=MONTH_3&zoneId=1\"\n const headerFilterObj = JSON.parse(\n LocalStorageService.get(\"headerFilter\")\n );\n\n props.searchOpts.onFilterSearch(\n //if (searchString === undefined || searchString === \"\")\n // \"startDate=\" +\n // filter.startDate +\n // \"&endDate=\" +\n // filter.endDate +\n\n (filter?.siteId === undefined || filter?.siteId === \"\"\n ? \"\"\n : \"siteId=\" + filter.siteId) +\n (filter?.chargerId === undefined || filter?.chargerId === \"\"\n ? \"\"\n : \"&swapStationId=\" + filter.chargerId) +\n (filter?.time === undefined || filter?.time === \"\"\n ? \"\"\n : \"&timeFilterEnum=\" + filter.time) +\n (headerFilterObj?.stateId === undefined ||\n headerFilterObj?.stateId === \"\"\n ? \"\"\n : \"&stateId=\" + headerFilterObj.stateId) +\n (headerFilterObj?.cityId === undefined ||\n headerFilterObj?.cityId === \"\"\n ? \"\"\n : \"&cityId=\" + headerFilterObj.cityId) +\n (headerFilterObj?.zoneId === undefined ||\n headerFilterObj?.zoneId === \"\"\n ? \"\"\n : \"&zoneId=\" + headerFilterObj.zoneId)\n );\n } else {\n getSitePerformanceData(\"False\", filter);\n // setSelectTimeValue(selectTime);\n // getEnergyGraph(filter);\n // getSwappingGraph(filter);\n // getFaultGraph(filter);\n // getBatteryCount AndStatus(filter);\n }\n setOpen(false);\n } else {\n setOpen(true);\n }\n };\n\n const getSitePerformanceData = useCallback(async (e, filter) => {\n const payload = {\n city: \"\",\n endDate: filter.endDate,\n name: \"\",\n siteId: filter.siteId,\n startDate: filter.startDate,\n state: filter.state,\n zoneId: filter.zoneId,\n };\n // await getSitePerformanceRequest(\n // \"bss/getSiteperformance?topSites=\" + e + \"&timeFilterEnum=\" + filter?.time\n // )\n await getRequest(\n \"bss/getBatteryList?endDate=\" +\n payload.endDate +\n \"&siteId=\" +\n payload.siteId +\n \"&startDate=\" +\n payload.startDate\n )\n .then((res) => {\n if (res && res?.data) {\n setSitePerformanceData(res?.data);\n var optionData = res;\n var arraLabel = [];\n var arraLabel = [];\n var arraLabelval = [];\n var arr1 = [];\n var colorArr = [\"#9AAB04\", \"#1CAF9A\", \"#FF5C75\"];\n optionData.data.map(\n (person, index) => (\n (arr1 = []),\n arraLabel.push(person.siteName),\n (arr1 = [person.start, person.max, person.end]),\n arraLabelval.push({\n data: arr1,\n emphasis: {\n focus: \"series\",\n },\n type: \"line\",\n smooth: true,\n areaStyle: {\n color: colorArr[index],\n },\n })\n )\n );\n setSitePerformanceLabel(arraLabel);\n setSitePerformanceLabelVal(arraLabelval);\n }\n })\n .catch((err) => {\n console.error(\"Error\", err);\n });\n }, []);\n\n const getTime = (val) => {\n const endTime = Math.round(new Date().getTime() / 1000);\n const startTime = endTime - val * 3600;\n\n filter.endDate = endTime;\n filter.startDate = startTime;\n };\n\n // useEffect(() => {\n // getTime(24);\n // }, []);\n\n // const handleChange = (event) => {\n // const { name, value } = event.target;\n // setFilter({ ...filter, [name]: value });\n\n // if (event.target.name == \"time\") {\n // setSelectTime(event.target.value);\n // // getTime(event.target.value);\n // }\n // if (event.target.name == \"siteId\") {\n // getChargers(event.target.value);\n // }\n // };\n\n const handleChange = (event) => {\n const { name, value } = event.target;\n setFilter({ ...filter, [name]: value });\n\n if (event.target.name === \"time\") {\n setSelectTime(event.target.value);\n\n if (value === \"HOUR_12\") {\n setFilter({\n ...filter,\n startDate: parseInt(Date.now() / 1000) - 43200,\n endDate: parseInt(Date.now() / 1000),\n [name]: value,\n });\n setSelectTime(\"HOUR_12\");\n }\n if (value === \"HOUR_24\") {\n setFilter({\n ...filter,\n startDate: parseInt(Date.now() / 1000) - 86400,\n endDate: parseInt(Date.now() / 1000),\n [name]: value,\n });\n setSelectTime(\"HOUR_24\");\n }\n if (value === \"WEEK\") {\n setFilter({\n ...filter,\n startDate: parseInt(Date.now() / 1000) - 604800,\n endDate: parseInt(Date.now() / 1000),\n [name]: value,\n });\n setSelectTime(\"WEEK\");\n }\n if (value === \"WEEK_2\") {\n setFilter({\n ...filter,\n startDate: parseInt(Date.now() / 1000) - 1209600,\n endDate: parseInt(Date.now() / 1000),\n [name]: value,\n });\n setSelectTime(\"WEEK_2\");\n }\n if (value === \"MONTH\") {\n setFilter({\n ...filter,\n startDate: parseInt(Date.now() / 1000) - 2628000,\n endDate: parseInt(Date.now() / 1000),\n [name]: value,\n });\n setSelectTime(\"MONTH\");\n }\n if (value === \"MONTH_3\") {\n setFilter({\n ...filter,\n startDate: parseInt(Date.now() / 1000) - 7884000,\n endDate: parseInt(Date.now() / 1000),\n [name]: value,\n });\n setSelectTime(\"MONTH_3\");\n }\n if (value === null) {\n setFilter({\n ...filter,\n startDate: parseInt(Date.now() / 1000) - 86400,\n endDate: parseInt(Date.now() / 1000),\n [name]: value,\n });\n setSelectTime(\"HOUR_24\");\n }\n }\n\n if (event.target.name == \"siteId\") {\n setFilter({ ...filter, [name]: value, chargerId: \"\" });\n getChargers(event.target.value);\n }\n };\n\n const refOpen = useRef(open);\n function useOutsideAlerter(ref, ref1) {\n useEffect(() => {\n function handleClickOutside(event) {\n if (ref.current && !ref.current.contains(event.target)) {\n setOpen(false);\n refOpen.current = false;\n } else {\n if (\n refOpen.current &&\n ref1.current &&\n !ref1.current.contains(event.target)\n ) {\n refOpen.current = false;\n setOpen(false);\n } else {\n setOpen(true);\n refOpen.current = true;\n }\n }\n }\n\n // Bind the event listener\n document.addEventListener(\"mousedown\", handleClickOutside);\n return () => {\n // Unbind the event listener on clean up\n document.removeEventListener(\"mousedown\", handleClickOutside);\n };\n }, [ref, ref1]);\n }\n\n const wrapperRef = useRef(null);\n const wrapperRefInside = useRef(null);\n\n useOutsideAlerter(wrapperRef, wrapperRefInside);\n\n return (\n \n \n
\n \n
\n\n \n
\n\n \n \n
\n ) : (\n \"\"\n )}\n\n {props.searchOpts.addInvoice ? (\n \n
\n \n
\n \n
\n \n {props.searchOpts.filter ? (\n \n \n
\n \n \n \n {\"Filters\"}\n
\n\n \n
\n \n \n {open && (\n
\n )}\n \n \n
\n \n \n \n \n {/* */}\n \n \n \n \n \n \n
\n\n \n \n \n {sitesList?.map((obj) => {\n return (\n \n );\n })}\n \n
\n\n \n \n \n {chargerList &&\n chargerList?.map((obj) => {\n return (\n \n );\n })}\n \n
\n\n \n {\n handleClick(\"reset\");\n }}\n >\n Reset\n \n {\n handleClick(\"apply\");\n }}\n >\n Apply\n \n
\n \n
\n \n \n \n \n ) : (\n \"\"\n )}\n \n \n \n \n
\n \n \n \n \n {\"Add Invoice\"}\n
\n \n
\n \n \n {/*
*/}\n {props?.data?.length < 1 || props?.data == null ? (\n
\n \n );\n}\n","\nimport React, { useState, useEffect, useMemo } from \"react\";\nimport styled from \"styled-components\";\nimport { useTable, usePagination, useSortBy } from \"react-table\";\nimport { useHistory } from \"react-router-dom\";\n\nconst Styles = styled.div`\n padding: 1rem;\n\n margin-bottom: 50px;\n width: 100%;\n overflow-x: auto;\n table {\n border-collapse: separate;\n border-spacing: 0;\n border: 2px solid #f5f5ff;\n width: 100%;\n height: 50px;\n\n thead {\n background-color: #f5f5ff;\n }\n td {\n border: 1px rgb(201, 204, 216);\n border-style: solid none solid none;\n padding: 10px;\n }\n tr {\n height: 60px;\n width: 1086px;\n left: 309px;\n top: 350px;\n border-radius: 5px;\n }\n tr:hover {\n background: #f5f5ff;\n }\n th {\n color: #000000d8;\n }\n span {\n margin: 5px;\n }\n th,\n td {\n border-bottom: 1px solid #f5f5ff;\n border-right: 0px solid black;\n padding: 8px;\n white-space: nowrap;\n text-align: start;\n\n :last-child {\n border-right: 0;\n text-align: start;\n }\n }\n }\n .pagination {\n height: 50px;\n padding: 0.2rem 0;\n position: absolute;\n align-items: baseline;\n right: 14px;\n justify-content: end;\n button,\n select {\n margin: 2px 20px 0px 0px !important;\n }\n button {\n border: 1px solid #999999;\n background-color: #dcdcdc; // #ffffff;\n color: #666666;\n margin: 16px 10px;\n }\n\n button:hover {\n border: 1px solid #999999; //#0099cc;\n }\n\n button:disabled,\n button[disabled] {\n border: 1px solid #999999;\n background-color: #ffffff; //#cccccc;\n }\n }\n\n @media (max-width: 1536px) {\n .pagination {\n height: 50px;\n padding: 0;\n right: 14px !important;\n // bottom: 15px !important;\n }\n }\n\n @media (max-width: 1280px) {\n .pagination {\n height: 50px;\n padding: 0;\n right: 15px;\n }\n }\n @media (max-width: 1098px) {\n .pagination {\n height: 50px;\n padding: 0;\n right: 14px !important ;\n }\n }\n\n @media (max-width: 768px) {\n .pagination {\n height: 50px;\n padding: 0;\n right: -1px !important;\n }\n }\n .double-screen-pagination {\n height: 50px;\n padding: 0.2rem 0;\n position: absolute;\n align-items: baseline;\n right: 15px;\n justify-content: end;\n button,\n select {\n margin: 2px 0px 0px 0px;\n }\n button {\n border: 1px solid #999999;\n background-color: #dcdcdc; // #ffffff;\n color: #666666;\n margin: 16px 10px;\n }\n\n button:hover {\n border: 1px solid #999999; //#0099cc;\n }\n\n button:disabled,\n button[disabled] {\n border: 1px solid #999999;\n background-color: #ffffff; //#cccccc;\n }\n }\n\n @media (max-width: 1920px) {\n .double-screen-pagination {\n height: 50px;\n padding: 0;\n right: 18px !important;\n }\n }\n\n @media (max-width: 1536px) {\n .double-screen-pagination {\n height: 50px;\n padding: 0;\n right: 18px !important;\n }\n }\n\n @media (max-width: 1280px) {\n .double-screen-pagination {\n height: 50px;\n padding: 0;\n right: 18px !important;\n }\n }\n @media (max-width: 1098px) {\n .double-screen-pagination {\n height: 50px;\n padding: 0;\n right: 18px !important;\n }\n }\n\n @media (max-width: 768px) {\n .double-screen-pagination {\n height: 50px;\n padding: 0;\n right: 18px !important;\n }\n }\n`;\n\nvar typeMotion = \"\";\nvar totalPageCount = 0;\nvar tempTigger;\n\nfunction NewTableFilter({\n columns,\n data,\n pagination,\n defaultFilterMethod,\n paginationDoubleScreen,\n swapStationCount,\n pageLimitHandle,\n setCurrentPageLimit1,\n filterAction,\n // scroll,\n setPSize,\n paginationCountHanlde,\n tigger,\n tempHeaderFilter,\n filter,\n searchString,\n}) {\n // Use the state and functions returned from useTable to build your UI\n const moveScroll = () => {\n window.scrollTo({ top: 0, left: 0, behavior: \"smooth\" });\n // scroll();\n };\n const {\n getTableProps,\n getTableBodyProps,\n headerGroups,\n rows,\n prepareRow,\n page, // Instead of using 'rows', we'll use page,\n // which has only the rows for the active page\n\n // The rest of these things are super handy, too ;)\n canPreviousPage,\n canNextPage,\n gotoPage,\n pageOptions,\n nextPage,\n pageCount,\n previousPage,\n setPageSize,\n state: { pageIndex, pageSize },\n } = useTable(\n {\n columns,\n data,\n // <<<<<<< HEAD\n initialState: { pageIndex: tigger === \"amhitted\" ? 0 : 0, pageSize: 10, tempTigger : tigger },\n // disableSortRemove: false\n // =======\n // initialState: { pageIndex: 0 },\n // >>>>>>> 9f5c23a3b2a8d9a67b941ab1c2991b1e4b255a09\n defaultFilterMethod,\n },\n useSortBy,\n usePagination\n );\n\n const [currentPage, setCurrentPage] = useState(0);\n const [currentPageLimit, setCurrentPageLimit] = useState(10);\n const [rowDivided, setrowDivided] = useState(0);\n const [tableSrollTrigger, setTableScrollTigger] = useState(false);\n const [prevtableSrollTrigger, setPrevtableSrollTrigger] = useState(false);\n const [currentPageNumber, setCurrentPageNumber] = useState(0);\n\n const haneldCall = (type) => {\n tempTigger = \"init\";\n typeMotion = type;\n\n // type === \"back\" ? previousPage() : nextPage()\n if (type === \"back\") {\n if (currentPage > 0) {\n let currentPageNumbernew = currentPage -1;\n setCurrentPageNumber(currentPageNumbernew);\n setCurrentPage(currentPage - 1);\n pageLimitHandle(currentPageNumbernew, currentPageLimit, tigger, searchString);\n paginationCountHanlde && paginationCountHanlde( currentPageNumbernew , currentPageLimit, tigger, tempHeaderFilter)\n \n } else {\n return;\n }\n } else {\n if (currentPage < rowDivided) {\n let currentPageNumbernew = currentPage + 1;\n setCurrentPageNumber(currentPageNumbernew);\n setCurrentPage(currentPage + 1);\n pageLimitHandle(currentPageNumbernew, currentPageLimit, tigger, searchString);\n paginationCountHanlde && paginationCountHanlde(currentPageNumbernew, currentPageLimit, tigger, tempHeaderFilter)\n } else {\n return;\n }\n }\n \n moveScroll()\n };\n\n const selectPageLimitHandle = (e) => {\n setPageSize(e);\n setPSize && setPSize(e)\n setCurrentPageLimit(e);\n setCurrentPageLimit1(e);\n setCurrentPage(0);\n setCurrentPageNumber(0);\n pageLimitHandle(0, e, tigger, searchString);\n paginationCountHanlde && paginationCountHanlde(0, e, tigger)\n };\n \n\n useEffect(() => {\n if (!filterAction ) {\n setCurrentPageNumber(tigger == \"amhitted\" ? 0 : currentPageNumber);\n return;\n }\n\n if (filterAction[0] == 1) {\n if(tempTigger == \"amhitted\") {\n setPageSize(10);\n setCurrentPageLimit(10);\n setCurrentPageLimit1(10);\n setCurrentPageNumber(0);\n setCurrentPage(0);\n }\n else{\n setPageSize(10);\n setCurrentPageLimit(10);\n setCurrentPageLimit1(10);\n // currentPageNumber = tempTigger == \"amhitted\" ? 0 : currentPageNumber;\n\n setCurrentPage(tigger == \"init\" ? 0 : currentPageNumber); // pageLimitHandle && pageLimitHandle(currentPageNumber, currentPageLimit, tigger, searchString);\n }\n return;\n }\n if (filterAction[0] == 2) {\n setCurrentPage(0);\n setPageSize(10);\n setCurrentPageLimit(10);\n setCurrentPageLimit1(10);\n setCurrentPageNumber(0);\n return;\n }\n }, [filterAction]);\n\n useEffect(() => {\n console.log(tigger,\"=--==\",tempTigger,\"runigngg EVERY\")\n },[data])\n\n useEffect(() => {\n var tempCount = 0;\n if (swapStationCount) {\n // console.log(swapStationCount,\"swapStationCount_________\")\n // setrowDivided(0)\n if (pageSize == 10) {\n totalPageCount = swapStationCount % 10;\n tempCount = Math.floor(swapStationCount / 10);\n if (totalPageCount > 0) {\n // rowDivided = rowDivided + 1;\n setrowDivided(tempCount + 1);\n // currentPage = currentPage +1;\n } else {\n setrowDivided(tempCount);\n }\n } else if (pageSize == 20) {\n totalPageCount = swapStationCount % 20;\n tempCount = Math.floor(swapStationCount / 20);\n\n if (totalPageCount > 0) {\n // rowDivided = rowDivided + 1;\n setrowDivided(tempCount + 1);\n // currentPage = currentPage +1;\n } else {\n setrowDivided(tempCount);\n }\n } else if (pageSize == 30) {\n totalPageCount = swapStationCount % 30;\n tempCount = Math.floor(swapStationCount / 30);\n\n if (totalPageCount > 0) {\n // rowDivided = rowDivided + 1;\n setrowDivided(tempCount + 1);\n // currentPage = currentPage +1;\n } else {\n setrowDivided(tempCount);\n }\n } else if (pageSize == 40) {\n totalPageCount = swapStationCount % 40;\n tempCount = Math.floor(swapStationCount / 40);\n\n if (totalPageCount > 0) {\n // rowDivided = rowDivided + 1;\n setrowDivided(tempCount + 1);\n // currentPage = currentPage +1;\n } else {\n setrowDivided(tempCount);\n }\n } else if (pageSize == 50) {\n totalPageCount = swapStationCount % 50;\n tempCount = Math.floor(swapStationCount / 50);\n\n if (totalPageCount > 0) {\n // rowDivided = rowDivided + 1;\n setrowDivided(tempCount + 1);\n // currentPage = currentPage +1;\n } else {\n console.log(tempCount,\"am laast else\")\n setrowDivided(tempCount);\n }\n }\n }\n setCurrentPage(currentPageNumber)\n // console.log(currentPage,\"3944444444444++++\")\n // console.log(currentPageNumber,\"3955555555555===\")\n // paginationAssetsHandle();\n }, [swapStationCount, data]);\n\n const paginationAssetsHandle = () => {\n // setCurrentPage(currentPageNumber)\n // pageLimitHandle && pageLimitHandle(currentPageNumber, currentPageLimit, tigger, searchString);\n console.log(tigger,\"CHECKINGGG\")\n // tigger == \"amhitted\" ? setCurrentPage(0) : setCurrentPage(currentPageNumber)\n // if(tigger !== \"view\"){\n // console.log(tigger,\"am ifffffffffffffffff\")\n // // setCurrentPage(currentPageNumber)\n // } else {\n // console.log(tigger,\"am elcsssysysyy\")\n // // paginationCountHanlde && paginationCountHanlde(currentPageNumber, currentPageLimit, tigger)\n\n // // paginationCountHanlde && paginationCountHanlde(currentPageNumber, e, tigger)\n // }\n \n }\n\n const firstPageRows = rows.slice(0, 10);\n // Render the UI for your table\n\n useEffect(() => {\n window.scrollTo({ top: 0, left: 0, behavior: \"smooth\" })\n // prevtableSrollTrigger || currentPage > 0 && !canNextPage \n // ?\n // ( console.log(currentPage,\"am runing\"),\n // window.scrollTo({ top: 0, left: 0, behavior: \"smooth\" }))\n // : null\n },[prevtableSrollTrigger, currentPage, canNextPage])\n return (\n <>\n \n
\n ) : (\n \n \n
\n \n No Record Found\n
\n {window.scrollTo({ top: 0 })}\n\n
\n )}\n | \n {column.render(\"Header\")}\n \n {column.isSorted\n ? column.isSortedDesc\n ? \" ↓\"\n : \" ↑\"\n : \"\"}\n \n | \n ) : (\n <>\n )\n )}\n
|---|
| \n {cell.render(\"Cell\")}\n | \n );\n })}\n
\n
\n ) : (\n \"\"\n )}\n \n );\n}\nfunction filterCaseInsensitive(filter, row) {\n const id = filter.pivotId || filter.id;\n return row[id] !== undefined\n ? String(row[id].toLowerCase()).startsWith(filter.value.toLowerCase())\n : true;\n}\nfunction ZoneTable(props) {\n const history = useHistory();\n return (\n \n {/* Showing {page.length} of {swapStationCount} Records */}\n Showing {(currentPage ) * pageSize + 1}-{Math.min((currentPage +1)* pageSize, swapStationCount)} of {swapStationCount} Records\n
\n {/* \n
\n );\n}\n\nexport default function NewTableAndSearchMasterFilter(props) {\n const location = useLocation();\n const { pathname } = location;\n const [timePeriod, setTimePeriod] = useState(props?.timeInfo);\n const splitLocation = pathname.split(\"/\");\n\n const scrollRef = useRef(null);\n const scrollFun = () => {\n scrollRef?.current?.scrollTo(0, 0);\n };\n\n const filterInitialValue = {\n startDate: parseInt(Date.now() / 1000) - 86400,\n endDate: parseInt(Date.now() / 1000),\n siteId: props?.searchOpts?.disableFilter?.siteId\n ? props?.searchOpts.disableFilter.siteId\n : \"\",\n chargerId: props?.searchOpts?.disableFilter?.chargerId\n ? props?.searchOpts.disableFilter.chargerId\n : \"\",\n state: \"\",\n city: \"\",\n zoneId: \"\",\n cityId : null,\n stateId : null,\n time: timePeriod !== undefined ? timePeriod : \"HOUR_24\",\n };\n\n const [sitesList, setSitesList] = useState([]);\n const [chargerList, setChargerList] = useState([]);\n const [open, setOpen] = React.useState(false);\n const [selectTime, setSelectTime] = useState(24);\n const [filter, setFilter] = useState(filterInitialValue);\n const [performanceData, setSitePerformanceData] = useState([]);\n const [performanceDataLabel, setSitePerformanceLabel] = useState([]);\n const [performanceDataLabelVal, setSitePerformanceLabelVal] = useState([]);\n const [resetText, setResetText] = useState(false);\n const [currentPageLimit, setCurrentPageLimit] = useState(10);\n const [filterChange, setFilterChange] = useState(true);\n const [filterAction, setFilterAction] = useState([0, 1]); //filterAction[0] => 0 for start, 1 for reset, 2 for apply, filterAction[1] => for changin\n const [searchString, setSearchString] = useState(\"\");\n const [pSize, setPSize] = useState(\"\");\n const getSites = useCallback(async (filter) => {\n \n let callString = \"bss/site/siteList\";\n if (filter?.cityId > 0) {\n callString += \"?cityId=\" + filter.cityId;\n if (filter.stateId > 0) {\n callString += \"&stateId=\" + filter.stateId;\n }\n if (filter.zoneId > 0) {\n callString += \"&zoneId=\" + filter.zoneId;\n }\n } else if (filter?.stateId > 0) {\n callString += \"?stateId=\" + filter.stateId;\n\n if (filter.zoneId > 0) {\n callString += \"&zoneId=\" + filter.zoneId;\n }\n } else if (filter?.zoneId > 0) {\n callString += \"?zoneId=\" + filter.zoneId;\n }\n await getRequestInAssets(callString)\n .then((res) => {\n if (res.data != null) {\n setSitesList(res?.data);\n if (props?.searchOpts?.disableFilter?.chargerId) {\n getChargers(props?.searchOpts?.disableFilter?.siteId);\n }\n }\n })\n .catch((err) => {\n console.error(\"Error\", err);\n });\n }, []);\n\n const getChargers = useCallback(async (siteId) => {\n if (siteId == \"\" || siteId == null) {\n setChargerList([]);\n return null;\n }\n\n await getRequestInAssets(\n \"bss/swappingStation/getswapStationInfo?siteId=\" + siteId\n )\n .then((res) => {\n if (res.data != null) {\n setChargerList(res?.data?.swapStationList);\n }\n })\n .catch((err) => {\n console.error(\"Error\", err);\n });\n }, []);\n\n const handleClick = (btnType) => {\n if (open) {\n if (btnType == \"reset\") {\n filter.time = filterInitialValue.time;\n filter.chargerId = \"\";\n filter.siteId = \"\";\n // setFilter(filterInitialValue);\n setFilter({ ...filterInitialValue, time: \"HOUR_24\" });\n setFilterAction([\n 2,\n filterAction[1] == 0 ? 1 : 0,\n !filterChange ? 0 : 1,\n ]);\n setFilterChange(!filterChange);\n // props.onReset();\n setCurrentPageLimit(10);\n searchOnFilter(filterInitialValue, 0, 10, undefined);\n getSitePerformanceData(\"False\", filter);\n setChargerList([]);\n } else if (btnType == \"apply\") {\n const valueCheck = localStorage.getItem(\"lastTableSearch\");\n searchOnFilter(\n filter,\n 0,\n 10,\n typeof valueCheck === \"object\" ? \"\" : valueCheck\n );\n // searchOnFilter(filter);\n setFilterAction([\n 2,\n filterAction[1] == 0 ? 1 : 0,\n !filterChange ? 0 : 1,\n ]);\n setFilterChange(!filterChange);\n } else {\n getSitePerformanceData(\"False\", filter);\n }\n setOpen(false);\n } else {\n setOpen(true);\n }\n window.scrollTo({ top: 0, left: 0, behavior: \"smooth\" });\n };\n const paginator = (page, pageSize, tigger, searchString) => {\n searchOnFilter(filter, page, pageSize, tigger, searchString);\n };\n\n useEffect(() => {\n tempBtnType = localStorage.getItem(\"headerBtnType\");\n const valueCheck = localStorage.getItem(\"lastTableSearch\");\n searchOnFilter(\n filter,\n 0,\n 10,\n props.tigger,\n typeof valueCheck === \"object\" ? \"\" : valueCheck\n );\n\n if (tempBtnType == \"reset\" || tempBtnType == \"apply\") {\n setFilterAction([2, filterAction[1] == 0 ? 1 : 0, !filterChange ? 0 : 1]);\n } else {\n setFilterAction([1, filterAction[1] == 0 ? 1 : 0, !filterChange ? 0 : 1]);\n }\n const headerFilterObj = JSON.parse(LocalStorageService.get(\"headerFilter\"));\n getSites(headerFilterObj);\n }, [props.headerFilter]);\n\n const searchOnFilter = (filter, page, pageSize, tigger, searchString) => {\n setSearchString(searchString);\n const headerFilterObj = JSON.parse(LocalStorageService.get(\"headerFilter\"));\n if (searchString === undefined || searchString === \"\") {\n setResetText(!resetText);\n }\n if (splitLocation[1] === \"Invoice\") {\n props.searchOpts.onFilterSearch(\n (searchString === undefined || searchString === \"\"\n ? \"\"\n : \"invoiceNumber=\" + searchString + \"&\") +\n (page === undefined || typeof parseInt(page) !== \"number\"\n ? \"pageNumber=1\"\n : \"pageNumber=\" + ++page) +\n (pageSize === undefined || typeof parseInt(pageSize) !== \"number\"\n ? \"&pageSize=\" + currentPageLimit\n : \"&pageSize=\" + pageSize) +\n (headerFilterObj?.stateId === undefined ||\n headerFilterObj?.stateId === \"\"\n ? \"\"\n : \"&stateId=\" + headerFilterObj.stateId) +\n (headerFilterObj?.cityId === undefined ||\n headerFilterObj?.cityId === \"\"\n ? \"\"\n : \"&cityId=\" + headerFilterObj.cityId) +\n (headerFilterObj?.zoneId === undefined ||\n headerFilterObj?.zoneId === \"\"\n ? \"\"\n : \"&zoneId=\" + headerFilterObj.zoneId)\n );\n } else if (splitLocation[1] === \"Alerts\") {\n props.searchOpts.onFilterSearch(\n (searchString === undefined || searchString === \"\"\n ? \"\"\n : \"description=\" + searchString) +\n (page === undefined || typeof parseInt(page) !== \"number\"\n ? \"&offset=0\"\n : \"&offset=\" + page) +\n (pageSize === undefined || typeof parseInt(pageSize) !== \"number\"\n ? \"&pageSize=\" + currentPageLimit\n : \"&pageSize=\" + pageSize) +\n (filter?.siteId === undefined || filter?.siteId === \"\"\n ? \"\"\n : \"&siteId=\" + filter.siteId) +\n (filter?.chargerId === undefined || filter?.chargerId === \"\"\n ? \"\"\n : \"&swapStationId=\" + filter.chargerId) +\n (filter?.time === undefined || filter?.time === \"\"\n ? \"\"\n : \"&timeFilterEnum=\" + filter.time) +\n (headerFilterObj?.stateId === undefined ||\n headerFilterObj?.stateId === \"\"\n ? \"\"\n : \"&stateId=\" + headerFilterObj.stateId) +\n (headerFilterObj?.cityId === undefined ||\n headerFilterObj?.cityId === \"\"\n ? \"\"\n : \"&cityId=\" + headerFilterObj.cityId) +\n (headerFilterObj?.zoneId === undefined ||\n headerFilterObj?.zoneId === \"\"\n ? \"\"\n : \"&zoneId=\" + headerFilterObj.zoneId)\n );\n } else if (splitLocation[1] === \"Schedule\") {\n const headerFilter =\n // (filter?.siteId === undefined || filter?.siteId === \"\"\n // ? \"\"\n // : \"&siteId=\" + filter.siteId) +\n // (filter?.chargerId === undefined || filter?.chargerId === \"\"\n // ? \"\"\n // : \"&swapStationId=\" + filter.chargerId)\n // +\n // (filter?.time === undefined || filter?.time === \"\"\n // ? \"\"\n // : \"&timeFilterEnum=\" + filter.time)\n // +\n (page === undefined || typeof parseInt(page) !== \"number\"\n ? \"&offset=0\"\n : \"&offset=\" + page) +\n (pageSize === undefined || typeof parseInt(pageSize) !== \"number\"\n ? \"&limit=\" + currentPageLimit\n : \"&limit=\" + pageSize) +\n (headerFilterObj?.stateId === undefined ||\n headerFilterObj?.stateId === \"\"\n ? \"\"\n : \"&stateId=\" + headerFilterObj.stateId) +\n (headerFilterObj?.cityId === undefined || headerFilterObj?.cityId === \"\"\n ? \"\"\n : \"&cityId=\" + headerFilterObj.cityId) +\n (headerFilterObj?.zoneId === undefined || headerFilterObj?.zoneId === \"\"\n ? \"\"\n : \"&zoneId=\" + headerFilterObj.zoneId);\n tempHeaderFilter = headerFilter;\n props.searchOpts.onFilterSearch(headerFilter);\n } else {\n props.searchOpts.onFilterSearch(\n (page === undefined || typeof parseInt(page) !== \"number\"\n ? \"&offset=0\"\n : \"&offset=\" + page) +\n (pageSize === undefined || typeof parseInt(pageSize) !== \"number\"\n ? \"&limit=\" + currentPageLimit\n : \"&limit=\" + pageSize) +\n (searchString === undefined || searchString === \"\"\n ? \"\"\n : splitLocation[1] === \"sites\"\n ? \"&name=\" + searchString\n : splitLocation[1] === \"batteries\"\n ? \"&serialId=\" + searchString\n : splitLocation[1] === \"SwapStation\"\n ? \"&filter=\" + searchString\n : splitLocation[1] === \"Swapping\"\n ? \"&filter=\" + searchString\n : \"&filter=\" + searchString) +\n (filter?.siteId === undefined || filter?.siteId === \"\"\n ? \"\"\n : \"&siteId=\" + filter.siteId) +\n (filter?.chargerId === undefined || filter?.chargerId === \"\"\n ? \"\"\n : \"&swapStationId=\" + filter.chargerId) +\n (filter?.time === undefined || filter?.time === \"\"\n ? \"\"\n : \"&timeFilterEnum=\" + filter.time) +\n (headerFilterObj?.stateId === undefined ||\n headerFilterObj?.stateId === \"\"\n ? \"\"\n : \"&stateId=\" + headerFilterObj.stateId) +\n (headerFilterObj?.cityId === undefined ||\n headerFilterObj?.cityId === \"\"\n ? \"\"\n : \"&cityId=\" + headerFilterObj.cityId) +\n (headerFilterObj?.zoneId === undefined ||\n headerFilterObj?.zoneId === \"\"\n ? \"\"\n : \"&zoneId=\" + headerFilterObj.zoneId)\n );\n }\n };\n\n const getSitePerformanceData = useCallback(async (e, filter) => {\n const payload = {\n city: \"\",\n endDate: filter.endDate,\n name: \"\",\n siteId: filter.siteId,\n startDate: filter.startDate,\n state: filter.state,\n zoneId: filter.zoneId,\n };\n // await getSitePerformanceRequest(\n // \"bss/getSiteperformance?topSites=\" + e + \"&timeFilterEnum=\" + filter?.time\n // )\n await getRequest(\n \"bss/getBatteryList?endDate=\" +\n payload.endDate +\n \"&siteId=\" +\n payload.siteId +\n \"&startDate=\" +\n payload.startDate\n )\n .then((res) => {\n if (res && res?.data) {\n setSitePerformanceData(res?.data);\n var optionData = res;\n var arraLabel = [];\n var arraLabel = [];\n var arraLabelval = [];\n var arr1 = [];\n var colorArr = [\"#9AAB04\", \"#1CAF9A\", \"#FF5C75\"];\n optionData &&\n optionData?.data?.batteriesInfo?.map(\n (person, index) => (\n (arr1 = []),\n arraLabel.push(person.siteName),\n (arr1 = [person.start, person.max, person.end]),\n arraLabelval.push({\n data: arr1,\n emphasis: {\n focus: \"series\",\n },\n type: \"line\",\n smooth: true,\n areaStyle: {\n color: colorArr[index],\n },\n })\n )\n );\n setSitePerformanceLabel(arraLabel);\n setSitePerformanceLabelVal(arraLabelval);\n }\n })\n .catch((err) => {\n console.error(\"Error\", err);\n });\n }, []);\n\n const getTime = (val) => {\n const endTime = Math.round(new Date().getTime() / 1000);\n const startTime = endTime - val * 3600;\n\n filter.endDate = endTime;\n filter.startDate = startTime;\n };\n\n const handleChange = (event) => {\n const { name, value } = event.target;\n setFilter({ ...filter, [name]: value });\n\n if (event.target.name === \"time\") {\n setSelectTime(event.target.value);\n\n if (value === \"HOUR_12\") {\n setFilter({\n ...filter,\n startDate: parseInt(Date.now() / 1000) - 43200,\n endDate: parseInt(Date.now() / 1000),\n [name]: value,\n });\n setSelectTime(\"HOUR_12\");\n }\n if (value === \"HOUR_24\") {\n setFilter({\n ...filter,\n startDate: parseInt(Date.now() / 1000) - 86400,\n endDate: parseInt(Date.now() / 1000),\n [name]: value,\n });\n setSelectTime(\"HOUR_24\");\n }\n if (value === \"WEEK\") {\n setFilter({\n ...filter,\n startDate: parseInt(Date.now() / 1000) - 604800,\n endDate: parseInt(Date.now() / 1000),\n [name]: value,\n });\n setSelectTime(\"WEEK\");\n }\n if (value === \"WEEK_2\") {\n setFilter({\n ...filter,\n startDate: parseInt(Date.now() / 1000) - 1209600,\n endDate: parseInt(Date.now() / 1000),\n [name]: value,\n });\n setSelectTime(\"WEEK_2\");\n }\n if (value === \"MONTH\") {\n setFilter({\n ...filter,\n startDate: parseInt(Date.now() / 1000) - 2628000,\n endDate: parseInt(Date.now() / 1000),\n [name]: value,\n });\n setSelectTime(\"MONTH\");\n }\n if (value === \"MONTH_3\") {\n setFilter({\n ...filter,\n startDate: parseInt(Date.now() / 1000) - 7884000,\n endDate: parseInt(Date.now() / 1000),\n [name]: value,\n });\n setSelectTime(\"MONTH_3\");\n }\n if (value === null) {\n setFilter({\n ...filter,\n startDate: parseInt(Date.now() / 1000) - 86400,\n endDate: parseInt(Date.now() / 1000),\n [name]: value,\n });\n setSelectTime(\"HOUR_24\");\n }\n }\n\n if (event.target.name == \"siteId\") {\n setFilter({ ...filter, [name]: value, chargerId: \"\" });\n getChargers(event.target.value);\n }\n };\n\n const refOpen = useRef(open);\n function useOutsideAlerter(ref, ref1) {\n useEffect(() => {\n function handleClickOutside(event) {\n if (ref.current && !ref.current.contains(event.target)) {\n setOpen(false);\n refOpen.current = false;\n } else {\n if (\n refOpen.current &&\n ref1.current &&\n !ref1.current.contains(event.target)\n ) {\n refOpen.current = false;\n setOpen(false);\n } else {\n setOpen(true);\n refOpen.current = true;\n }\n }\n }\n\n // Bind the event listener\n document.addEventListener(\"mousedown\", handleClickOutside);\n return () => {\n // Unbind the event listener on clean up\n document.removeEventListener(\"mousedown\", handleClickOutside);\n };\n }, [ref, ref1]);\n }\n\n const wrapperRef = useRef(null);\n const wrapperRefInside = useRef(null);\n\n useOutsideAlerter(wrapperRef, wrapperRefInside);\n\n return (\n \n \n
\n \n
\n\n \n
\n\n \n \n
\n ) : (\n \"\"\n )}\n\n {props.searchOpts.buttonText === \"invoice\" ? (\n \n
\n \n {splitLocation[1] === \"Schedule\" ? (\n
\n \n {\"Schedule List\"}\n
\n ) : (\n\n {props.searchOpts.placeholder ==\n \"Search by Swap Station Name\" ? null : (\n
\n )}\n \n {props.searchOpts.filter ? (\n \n \n
\n \n \n \n {\"Filters\"}\n
\n\n \n
\n \n \n {open && (\n
\n )}\n \n \n
\n \n \n \n \n {/* */}\n \n \n \n \n \n \n
\n\n \n \n \n {sitesList?.map((obj) => {\n return (\n \n );\n })}\n \n
\n\n \n \n \n {chargerList &&\n chargerList?.map((obj) => {\n return (\n \n );\n })}\n \n
\n\n \n \n
\n \n \n \n \n ) : props.searchOpts.buttonText === \"schedule\" ? (\n \n \n
\n \n \n \n \n {\"Add Invoice\"}\n
\n \n
\n \n \n
\n \n \n \n \n ) : (\n \"\"\n )}\n \n \n \n \n
\n \n \n \n \n {\"Add Schedule\"}\n
\n \n
\n \n \n {/*
*/}\n {props?.data?.length < 1 || props?.data == null ? (\n
\n ) : (\n \n \n \n
\n \n No Record Found\n
\n {/* {window.scrollTo({ top: 0 })} */}\n{row.row?.original?.numOfSwapStations? row.row?.original?.numOfSwapStations : 0}
\n ) },\n // accessor: row => row.numOfSwapStations? row.numOfSwapStations: 0,\n },\n {\n Header: \"Today Energy(kWh)\",\n accessor: \"tdEnergy\",\n Cell: (row) => {\n return {Math.round(row.value * 100) / 100}
;\n },\n },\n {\n Header: \"Healthy\",\n accessor: \"healthy\",\n Cell: (row) => {\n return {row.row?.original?.healthy? row.row?.original?.healthy : 0}
;\n },\n },\n {\n Header: \"Under Maintenance\",\n accessor: \"underMaintainance\",\n Cell: (row) => { \n return(\n {row.row?.original?.underMaintainance? row.row?.original?.underMaintainance : 0}
\n ) },\n },\n {\n Header: \"Total Energy(kWh)\",\n accessor: \"tenergy\",\n Cell: (row) => {\n return {row.row?.original?.tenergy? row.row?.original?.tenergy : 0}
;\n },\n },\n {\n Header: \"Daily Avg Energy(kWh)\",\n accessor: \"dailyAvgEnergy\",\n Cell: (row) => {\n return {Math.round(row.value * 100) / 100}
\n },\n },\n // {\n // Header: \"Today Energy\",\n // accessor: \"tdEnergy\",\n // },\n\n {\n Header: \"Action\",\n accessor: \"siteId\",\n disableSortBy: true,\n Cell: (row) => {\n return (\n <>\n \n
\n \n\n \n \n \n
\n\n \n {\"Sites\"}\n
\n\n
\n\n \n
\n \n \n
\n \n
\n \n
\n \n
\n \n {\"Total Count\"}\n
\n\n {siteCount}\n
\n\n {\"Filters\"}\n
\n \n
\n \n
\n \n {open && (\n
\n )}\n \n \n
\n \n \n \n \n \n \n \n \n \n \n
\n\n \n {/* \n \n {sitesList.map((obj) => {\n return ;\n })}\n */}\n\n \n \n {sitesListHeader.map((obj) => {\n return ;\n })}\n \n
\n\n \n {/* \n \n {chargerList.map((obj) => {\n return ;\n })}\n */}\n
\n\n \n {\n handleClick(\"reset\");\n }}\n >\n Reset\n \n {\n handleClick(\"apply\");\n }}\n >\n Apply\n \n
\n \n
\n\n {/* \n
\n \n \n
\n \n
\n \n \n {\"Site Status\"}\n \n
\n \n
\n \n
\n \n
\n \n
\n \n \n {\"Site Performing\"}\n \n\n \n
\n\n \n
\n \n \n
\n \n
\n */}\n
\n\n
\n
\n \n
\n \n \n\n \n
\n \n \n
\n \n {\"Filters\"}\n
\n \n {open && (\n
\n )}\n \n \n
\n \n \n \n \n \n \n \n \n \n \n
\n\n {/* \n \n \n {sitesList.map((obj) => {\n return ;\n })}\n \n
\n\n \n \n \n {chargerList.map((obj) => {\n return ;\n })}\n \n
*/}\n\n \n {\n handleClick(\"reset\");\n }}\n >\n Reset\n \n {\n handleClick(\"apply\");\n }}\n >\n Apply\n \n
\n \n
\n\n \n
\n \n \n
\n \n \n
\n {\"Energy\"}\n \n \n
\n \n
\n \n \n
\n \n \n
\n {\"Errors\"}\n \n \n
\n \n
\n \n
\n \n \n
\n \n {\"State Transition\"}\n \n \n \n
\n \n
\n \n );\n}\n\nfunction BatteryAnalytic(props) {\n return (\n <>\n \n
\n \n \n
\n \n \n
\n {\"Swapping\"}\n \n \n
\n \n
\n \n \n
\n \n \n
\n \n {\"Charged Discharged (kWh)\"}\n \n \n \n
\n \n
\n \n
\n \n \n
\n {\"Revenue (₹)\"}\n \n \n
\n \n//
\n// \n// \n\n// \n//
\n// \n// \n//
\n// \n// {'Filters'}\n//
\n// \n// {open && (\n//
\n// )}\n// \n// \n//
\n// \n// \n// {/* */}\n// \n// \n// \n// \n// \n// \n// \n//
\n\n// \n// \n// \n// {sitesList.map((obj) => {\n// return ;\n// })}\n// \n//
\n\n// \n// \n// \n// {chargerList.map((obj) => {\n// return ;\n// })}\n// \n//
\n\n// \n// {handleClick('reset')}}\n// >\n// Reset\n// \n// {handleClick('apply')}}\n// >\n// Apply\n// \n//
\n// \n//
\n\n// \n//
\n// \n// \n//
\n// \n// \n//
\n// \n// {'Energy'}\n// \n// \n// \n// \n//
\n// \n//
\n// \n// \n//
\n// \n// \n//
\n// \n// {'Errors'}\n// \n// \n// \n// \n//
\n// \n//
\n// \n//
\n// \n// \n//
\n// \n// {'State Transition'}\n// \n// \n// \n\n// \n//
\n// \n//
\n// \n// );\n// }\n","\nimport React ,{useState, useCallback, useEffect} from 'react'\nimport styled from 'styled-components'\nimport { useTable } from 'react-table'\nimport axios from 'axios'\nimport {getRequest} from '../../services/axiosBaseClient'\n\nconst Styles = styled.div`\n padding: 0rem;\n\n table {\n border-spacing: 0;\n border: 0px solid black;\n width: 100%;\n margin: 15px 0px 25px 0px;\n tr {\n :last-child {\n td {\n border-bottom: 20px;\n \n }\n }\n }\n tr:hover { \n background-color:#DEE2E6;\n }\n th {\n background-color: #F5F5FF;\n color: #343A40;\n }\n th,\n td { \n padding: 15px;\n border: 3px rgb(201, 204, 216);\n border-style: solid none solid none;\n border-color:#F5F5FF;\n\n :last-child {\n border-right: 20px;\n }\n }\n }\n`\n\nfunction Table({ columns, data }) {\n // Use the state and functions returned from useTable to build your UI\n const {\n getTableProps,\n getTableBodyProps,\n headerGroups,\n rows,\n prepareRow,\n } = useTable({\n columns,\n data,\n })\n\n // Render the UI for your table\n return (\n \n//
\n// \n// \n//
\n// \n// \n//
\n// \n// {'Swapping'}\n// \n// \n// \n// \n//
\n// \n//
\n// \n// \n//
\n// \n// \n//
\n// \n// {'Charged Discharged'}\n// \n// \n// \n\n// \n//
\n// \n//
\n// \n//
\n// \n// \n//
\n// \n// {'Revenue'}\n// \n// \n// \n\n// \n//
\n// | {column.render('Header')} | :<>\n ))}\n
|---|
| {cell.render('Cell')} | \n })}\n
| \n {column.render(\"Header\")}\n \n {column.isSorted\n ? column.isSortedDesc\n ? \" ↓\"\n : \" ↑\"\n : \"\"}\n \n | \n ) : (\n <>\n )\n )}\n
|---|
| \n {cell.render(\"Cell\")}\n | \n );\n })}\n
\n \n {\"\"}\n \n Page{\" \"}\n {currentPage + 1 }{\" \"}\n of \n {\" \"}{ pageOptions.length === 0 ? 0 : rowDivided}{\" \"}\n \n {\" \"}\n {\n selectPageLimitHandle(parseInt(e.target.value));\n }}\n // value={pageSize}\n // onChange={(e) => {\n // setPageSize(Number(e.target.value));\n // }}\n >\n {[10, 20, 30, 40, 50].map((pageSize) => (\n \n ))}\n \n
\n ) : (\n \"\"\n )}\n \n );\n}\nfunction filterCaseInsensitive(filter, row) {\n const id = filter.pivotId || filter.id;\n return (\n row[id] !== undefined ?\n String(row[id].toLowerCase()).startsWith(filter.value.toLowerCase())\n :\n true\n );\n}\nfunction ZoneTable(props) {\n\n const location = useLocation();\n const { pathname } = location;\n const splitLocation = pathname.split(\"/\");\n\n const [currentPageLimit, setCurrentPageLimit] = useState(10);\n\n return (\n | {column.render('Header')} | \n ))}\n
|---|
| {cell.render('Cell')} | \n })}\n
\n
\n {/* ---- */}\n \n
\n \n
\n\n \n \n
\n\n \n \n
\n\n \n \n
\n \n \n {\"Pack ID\"}\n
\n \n
\n \n \n {data.packId}\n
\n \n
\n \n \n {\"Pack Voltage\"}\n
\n \n
\n \n \n {data.packVoltage}\n
\n \n
\n\n \n \n
\n \n \n {\"Pack FW Version\"}\n
\n \n
\n \n\n \n \n \n {data.packFWVersion}\n
\n \n
\n \n\n \n \n \n {\"Charge Voltage\"}\n
\n \n
\n \n \n {/* ---- */}\n \n \n {data.chargerVoltage}\n
\n \n
\n\n \n \n
\n \n \n {\"Current State\"}\n
\n \n
\n \n\n \n \n \n {data.currentState ? data?.currentState : data?.state}\n
\n \n
\n \n\n \n \n \n {\"Discharge Voltage\"}\n
\n \n
\n \n \n {/* -- */}\n \n \n {data.dischargeVoltage}\n
\n \n
\n\n \n \n
\n \n \n {\"Status\"}\n
\n \n
\n \n\n \n \n \n {data.state}\n
\n \n
\n \n\n \n \n \n {\"Pack Current\"}\n
\n \n
\n \n \n {/* --- */}\n \n \n {data.packCurrent}\n
\n \n
\n\n \n \n
\n \n \n {\"Lat/Long.\"}\n
\n \n
\n \n\n \n \n \n {data.latitude == \"N/A\" ? data.latitude :\n data.latitude+ \"/\" + data.longitude\n }\n
\n \n
\n \n\n \n \n \n {\"Charge Current\"}\n
\n \n
\n \n \n {/* -- */}\n \n \n {data.chargeCurrent}\n
\n \n
\n\n \n \n
\n \n \n {\"Timestamp\"}\n
\n \n
\n \n\n \n \n \n {Date(data.timestamp)}\n
\n \n
\n \n\n \n \n \n {\"Discharge Current\"}\n
\n \n
\n \n \n {/* -- */}\n \n \n {data.dischargeCurrent}\n
\n \n
\n\n \n \n
\n \n \n {\"SOC (%)\"}\n
\n \n
\n \n\n \n \n \n {data.soc}\n
\n \n
\n \n\n \n \n \n {\"PCB Temperature\"}\n
\n \n
\n \n \n {/* -- */}\n \n \n {data.pcbTemperature}\n
\n \n
\n\n \n \n
\n \n \n {\"SOH (%)\"}\n
\n \n
\n \n\n \n \n \n {data.soh}\n
\n \n
\n \n\n \n \n \n {\"IC Temperature\"}\n
\n \n
\n \n \n {/* -- */}\n \n \n {data.icTemperature}\n
\n \n
\n\n \n \n
\n \n \n {\"SOP\"}\n
\n \n
\n \n\n \n \n \n {data.sop}\n
\n \n
\n \n\n \n \n \n {\"Units consumed in charging\"}\n
\n \n
\n \n \n \n \n \n {data.unitsConsumed}\n
\n \n {/*
\n\n \n \n {\"Cell Voltage\"}\n
*/}\n\n
\n {/* -------- */}\n \n
\n\n \n\n \n \n
\n \n {\"Cell Voltage\"}\n
\n\n
\n\n \n \n
\n \n {\"Temperature\"}\n
\n\n
\n\n \n \n
\n \n \n {\"Cell Voltage 1\"}\n
\n \n
\n \n \n {data.cellVoltage1}\n
\n \n
\n \n\n \n \n \n {\"Temp 1\"}\n
\n \n
\n \n \n {/* ---- */}\n \n \n {data.temp1}\n
\n \n
\n\n \n \n
\n \n \n {\"Cell Voltage 2\"}\n
\n \n
\n \n\n \n \n \n {data.cellVoltage2}\n
\n \n
\n \n\n \n \n \n {\"Temp 2\"}\n
\n \n
\n \n \n {/* ---- */}\n \n \n {data.temp2}\n
\n \n
\n\n \n \n
\n \n \n {\"Cell Voltage 3\"}\n
\n \n
\n \n\n \n \n \n {data.cellVoltage3}\n
\n \n
\n \n\n \n \n \n {\"Temp 3\"}\n
\n \n
\n \n \n {/* -- */}\n \n \n {data.temp3}\n
\n \n
\n\n \n \n
\n \n \n {\"Cell Voltage 4\"}\n
\n \n
\n \n\n \n \n \n {data.cellVoltage4}\n
\n \n
\n \n\n \n \n \n {\"Temp 4\"}\n
\n \n
\n \n \n {/* --- */}\n \n \n {data.temp4}\n
\n \n
\n\n \n \n
\n \n \n {\"Cell Voltage 5\"}\n
\n \n
\n \n\n \n \n \n {data.cellVoltage5}\n
\n \n
\n \n\n \n \n \n {\"Temp 5\"}\n
\n \n
\n \n \n {/* -- */}\n \n \n {data.temp4}\n
\n \n
\n\n \n \n
\n \n \n {\"Cell Voltage 6\"}\n
\n \n
\n \n\n \n \n \n {data.cellVoltage6}\n
\n \n
\n \n\n \n \n \n {\"Temp 6\"}\n
\n \n
\n \n \n {/* -- */}\n \n \n {data.temp4}\n
\n \n
\n\n \n \n
\n \n \n {\"Cell Voltage 7\"}\n
\n \n
\n \n\n \n \n \n {data.cellVoltage5}\n
\n \n
\n\n \n \n \n
\n \n
\n \n {/* -- */}\n \n \n
\n \n
\n\n \n \n
\n \n \n {\"Cell Voltage 8\"}\n
\n \n
\n \n\n \n \n \n {data.cellVoltage1}\n
\n \n
\n\n \n \n \n
\n \n
\n \n {/* -- */}\n \n \n
\n \n
\n\n \n \n
\n \n \n {\"Cell Voltage 9\"}\n
\n \n
\n \n\n \n \n \n {data.cellVoltage2}\n
\n \n
\n\n \n \n
\n \n
\n \n \n \n \n \n \n
\n \n
\n \n \n );\n}\n\n","export default __webpack_public_path__ + \"static/media/marker.817a784a.svg\";","export default __webpack_public_path__ + \"static/media/lastMarker.20cfd6a1.svg\";","export default __webpack_public_path__ + \"static/media/defaultMarkerImg.43b08f25.svg\";","\nimport styled from 'styled-components';\n\nconst MapWrapper = styled.div`\n position: relative;\n width: 100%;\n height: 100%;\n`;\n\nexport default MapWrapper;\n ","\nimport React from \"react\";\nimport GoogleMapReact from \"google-map-react\";\nimport markerStart from \"./../../assets/marker.svg\";\nimport markerEnd from \"./../../assets/lastMarker.svg\";\nimport marker from \"./../../assets/defaultMarkerImg.svg\";\nimport MapWrapper from \"./MapWrapper\";\n\nconst markerDivStyleStart = {\n position: \"absolute\",\n backgroundImage: `url(${markerStart})`,\n backgroundRepeat: 'no-repeat',\n width: \"50px\",\n height: \"55px\",\n top: \"100%\",\n left: \"50%\",\n transform: \"translate(-50%, -100%)\"\n};\nconst markerDivStyleEnd = {\n position: \"absolute\",\n backgroundImage: `url(${markerEnd})`,\n backgroundRepeat: 'no-repeat',\n width: \"50px\",\n height: \"55px\",\n top: \"100%\",\n left: \"50%\",\n transform: \"translate(-50%, -100%)\"\n};\nconst markerDivStyle = {\n position: \"absolute\",\n backgroundImage: `url(${marker})`,\n backgroundRepeat: 'no-repeat',\n width: \"50px\",\n height: \"55px\",\n top: \"100%\",\n left: \"50%\",\n transform: \"translate(-50%, -100%)\"\n};\nconst textStyle = {\n position: \"absolute\",\n alignItems: 'center',\n justifyContent:'center',\n textAlign:'center',\n top:\"37%\",\n left:\"47%\",\n transform: \"translate(-50%, -50%)\"\n}\nconst textStyleStart = {\n position: \"absolute\",\n alignItems: 'center',\n justifyContent:'center',\n textAlign:'center',\n top:\"40%\",\n left:\"51%\",\n transform: \"translate(-50%, -50%)\"\n}\nconst textStyleEnd = {\n position: \"absolute\",\n alignItems: 'center',\n justifyContent:'center',\n textAlign:'center',\n top:\"40%\",\n left:\"52%\",\n transform: \"translate(-50%, -50%)\"\n}\nconst MAP = {\n defaultZoom: 14,\n defaultCenter: { lat: 28.595650, lng: 77.343940 },\n options: {\n maxZoom: 20,\n },\n};\nclass SimpleMap extends React.Component {\n static defaultProps = {\n center: {\n lat: 28.595650,\n lng: 77.343940\n },\n zoom: 11\n };\n state = {\n directions: null, \n};\n render() {\n const apiIsLoaded = (map, maps) => {\n var rendererOptions = {\n map: map,\n preserveViewport: this.props.chartData.length===1?true:false,\n suppressMarkers : true,\n polylineOptions: {\n strokeColor: \"#7CD6FF\",\n strokeWeight: 4,\n strokeOpacity: 0.75,\n }\n }\n const directionsService = new maps.DirectionsService();\n const directionsRenderer = new maps.DirectionsRenderer(rendererOptions);\n directionsRenderer.setMap(map);\n var length=this.props.chartData.length;\n var waypoints=[];\n if(length>0){\n const origin = this.props.chartData[0];\n for (let i = 1; i < length; i++) {\n waypoints.push({location:{lat:this.props.chartData[i].lat,lng:this.props.chartData[i].lng}})\n }\n const destination = this.props.chartData[length-1];\n directionsService.route(\n {\n origin: origin,\n destination: destination,\n waypoints: waypoints,\n travelMode: maps.TravelMode.DRIVING\n },\n (result, status) => {\n if (status === maps.DirectionsStatus.OK) {\n this.setState({\n directions: result\n });\n directionsRenderer.setDirections(result);\n } else {\n console.error(`error fetching directions ${result}`);\n }\n }\n );\n }\n };\n return (\n \n
\n );\n }\n else if(i.id==(this.props.chartData.length)){\n return ( \n {i.id}
\n \n
\n );\n }\n else{\n return ( \n {i.id}
\n \n
\n );\n }\n }\n })}\n \n {i.id}
\n \n {row.row.original.address.length>30?row.row.original.address.slice(0,30)+\"...\":row.row.original.address}\n
\n \n \n
\n \n \n\n \n {!loading &&
\n \n
\n\n {/* \n
\n\n \n \n
\n \n
\n \n {/* */}\n
\n */}\n \n {\"Battery Live Tracking\"}
\n {totalHours}HR {totalMin}MIN
\n \n {totalMiles} Miles
\n
{\"Battery Live Tracking\"}
\n{totalHours}HR {totalMin}MIN
\n \n{totalMiles} Miles
\n */}\n */}\n {/*
*/}\n \n \n );\n}\n","\nimport React, { useState, useEffect, useCallback } from \"react\";\nimport cn from \"classnames\";\nimport { getTime, getDate } from \"components/common/dateTime\";\nimport styles from \"../../components/battery/Battery.module.scss\";\nimport BatteryAnalytics from \"../../components/battery/BatteryAnalytics\";\nimport BatterySwappingHistory from \"../../components/battery/BatterySwappingHistory\";\nimport LocalStorageService from \"services/tokenlocalstorage.service\";\nimport Master from \"screen/Master\";\nimport { getRequest } from \"../../services/axiosBaseClient\";\nimport BatteryInformation from \"../../components/battery/BatteryInformation\";\nimport BatteryTracking from \"../../components/battery/BatteryTracking\";\nfunction BatteryView(props) {\n const filterInitialValue = {\n startDate: \"\",\n endDate: \"\",\n siteId: \"\",\n chargerId: \"\",\n state: \"\",\n city: \"\",\n zoneId: \"\",\n };\n var socValue;\n\n const batteryId = props?.match?.params?.id;\n const batterySerial = props?.match?.params?.batterySerial;\n const batteryName = props?.match?.params?.batteryName;\n\n const [userRole, setUserRole] = useState(\"\");\n const [filter, setFilter] = useState(filterInitialValue);\n const [tab, setTab] = useState(1);\n const [header, setHeader] = useState([]);\n const [socHeaderValue, setSocHeaderValue] = useState(\"\");\n const [batteryStatus, setBatteryStatus] = useState(\"\");\n const [purchaseDate, setPurchaseDate] = useState(\"\");\n\n const getHeaderInformation = useCallback(async (id) => {\n await getRequest(\"bss/getBatteryHeaderInfo?batteryId=\" + id).then((res) => {\n if (res && res?.data) {\n setPurchaseDate(res?.data?.dateOfPurchase?.split(\" \"));\n setHeader(res?.data);\n socValue = res?.data?.soc.split(\".\");\n setSocHeaderValue(socValue[0]);\n setBatteryStatus(res?.data?.status);\n }\n });\n }, []);\n\n useEffect(() => {\n getHeaderInformation(batteryId);\n }, []);\n\n useEffect(() => {\n window.scrollTo({ top: 0 });\n const headerFilterObj = JSON.parse(LocalStorageService.get(\"headerFilter\"));\n if (headerFilterObj !== null) {\n filter.state = headerFilterObj.state;\n filter.city = headerFilterObj.city;\n filter.zoneId = headerFilterObj.zoneId;\n }\n\n //getTime(24);\n // getSites();\n // getSiteStatus();\n // getSwapStatus();\n // getBatteriesStatus();\n // getAlertStatus();\n // getEnergyGraph(filter);\n // getFaultGraph(filter);\n // getSwappingGraph(filter);\n setUserRole(LocalStorageService.get(\"user-role\"));\n localStorage.setItem(\"activeTabCount\", \"zoneAsset\");\n }, []);\n\n return (\n \n \n
\n \n
\n \n {/* \n {/* className={cn(styles.flex, styles.flex_layout)} */}\n\n
\n \n \n {\"Battery\"}\n
\n\n\n
\n \n
\n \n \n \n
\n \n <>\n
\n \n \n {purchaseDate && purchaseDate[0]}\n
\n \n \n {\"Date of purchase\"}\n
\n \n
\n \n {header?.batteryserial}\n
\n\n
\n \n \n \n \n
\n \n
\n\n \n \n {`${socHeaderValue}%`}\n
\n \n \n {\"SOC\"}\n
\n \n \n \n {batteryStatus === \"0\"\n ? \"Fault\"\n : batteryStatus === \"1\"\n ? \"Charging\"\n : batteryStatus === \"2\"\n ? \"Charged\"\n : batteryStatus === \"3\"\n ? \"Under maintainance\"\n : batteryStatus === \"4\"\n ? \"In field\"\n : \"\"}\n
\n \n \n
\n\n \n
\n \n
\n \n
\n\n \n \n {header.range}\n
\n \n \n {\"Estimated Range\"}\n
\n \n \n \n
\n \n
\n \n \n \n \n
\n\n \n
\n \n \n \n \n \n \n {header.longitude}\n
\n \n
\n\n \n \n {header.latitude}\n
\n \n \n {\"Latitude\"}\n
\n \n \n \n {\"Longitude\"}\n
\n \n \n \n
\n \n
\n\n \n \n {`${header.cycleLife}`}\n
\n \n \n {\"Cycle life\"}\n
\n \n \n
\n \n \n \n
\n \n \n \n {\"35%\"}\n
\n \n \n
\n\n \n {/* tab, setTab */}\n\n {\n setTab(1);\n }}\n >\n {\"Analytics\"}\n \n \n {\n setTab(2);\n }}\n >\n {\"Battery Information\"}\n \n \n {\n setTab(3);\n }}\n >\n {\"Swapping History\"}\n \n \n {\n setTab(4);\n }}\n >\n {\"Battery Tracking\"}\n \n
\n\n {/* component start here */}\n {tab === 1 ? (\n \n {/*
*/}\n {props?.data?.length < 1 || props?.data == null ? (\n
\n\n );\n}\n","\nimport React, { useState, useEffect, useMemo } from \"react\";\nimport styled from \"styled-components\";\nimport { useTable, usePagination, useSortBy } from \"react-table\";\nimport { useHistory } from \"react-router-dom\";\n\nconst Styles = styled.div`\n padding: 1rem;\n\n margin-bottom: 50px;\n width: 100%;\n overflow-x: auto;\n table {\n border-collapse: separate;\n border-spacing: 0;\n border: 2px solid #f5f5ff;\n width: 100%;\n height: 50px;\n\n thead {\n background-color: #f5f5ff;\n }\n td {\n border: 1px rgb(201, 204, 216);\n border-style: solid none solid none;\n padding: 10px;\n }\n tr {\n height: 60px;\n width: 1086px;\n left: 309px;\n top: 350px;\n border-radius: 5px;\n }\n tr:hover {\n background: #f5f5ff;\n }\n th {\n color: #000000d8;\n }\n span {\n margin: 5px;\n }\n th,\n td {\n border-bottom: 1px solid #f5f5ff;\n border-right: 0px solid black;\n padding: 8px;\n white-space: nowrap;\n text-align: start;\n\n :last-child {\n border-right: 0;\n text-align: start;\n }\n }\n }\n .pagination {\n height: 50px;\n padding: 0.2rem 0;\n position: absolute;\n align-items: baseline;\n right: 14px;\n justify-content: end;\n button,\n select {\n margin: 2px 20px 0px 0px !important;\n }\n button {\n border: 1px solid #999999;\n background-color: #dcdcdc; // #ffffff;\n color: #666666;\n margin: 16px 10px;\n }\n\n button:hover {\n border: 1px solid #999999; //#0099cc;\n }\n\n button:disabled,\n button[disabled] {\n border: 1px solid #999999;\n background-color: #ffffff; //#cccccc;\n }\n }\n\n @media (max-width: 1536px) {\n .pagination {\n height: 50px;\n padding: 0;\n right: 14px !important;\n // bottom: 15px !important;\n }\n }\n\n @media (max-width: 1280px) {\n .pagination {\n height: 50px;\n padding: 0;\n right: 15px;\n }\n }\n @media (max-width: 1098px) {\n .pagination {\n height: 50px;\n padding: 0;\n right: 14px !important ;\n }\n }\n\n @media (max-width: 768px) {\n .pagination {\n height: 50px;\n padding: 0;\n right: -1px !important;\n }\n }\n .double-screen-pagination {\n height: 50px;\n padding: 0.2rem 0;\n position: absolute;\n align-items: baseline;\n right: 15px;\n justify-content: end;\n button,\n select {\n margin: 2px 0px 0px 0px;\n }\n button {\n border: 1px solid #999999;\n background-color: #dcdcdc; // #ffffff;\n color: #666666;\n margin: 16px 10px;\n }\n\n button:hover {\n border: 1px solid #999999; //#0099cc;\n }\n\n button:disabled,\n button[disabled] {\n border: 1px solid #999999;\n background-color: #ffffff; //#cccccc;\n }\n }\n\n @media (max-width: 1920px) {\n .double-screen-pagination {\n height: 50px;\n padding: 0;\n right: 18px !important;\n }\n }\n\n @media (max-width: 1536px) {\n .double-screen-pagination {\n height: 50px;\n padding: 0;\n right: 18px !important;\n }\n }\n\n @media (max-width: 1280px) {\n .double-screen-pagination {\n height: 50px;\n padding: 0;\n right: 18px !important;\n }\n }\n @media (max-width: 1098px) {\n .double-screen-pagination {\n height: 50px;\n padding: 0;\n right: 18px !important;\n }\n }\n\n @media (max-width: 768px) {\n .double-screen-pagination {\n height: 50px;\n padding: 0;\n right: 18px !important;\n }\n }\n`;\n\nvar typeMotion = \"\";\nvar totalPageCount = 0;\nvar currentPageNumber =0;\nvar tempTigger;\n\nfunction ServiceRequestViewTable({\n columns,\n data,\n pagination,\n defaultFilterMethod,\n paginationDoubleScreen,\n swapStationCount,\n pageLimitHandle,\n setCurrentPageLimit1,\n filterAction,\n // scroll,\n setPSize,\n paginationCountHanlde,\n tigger,\n tempHeaderFilter,\n filter,\n searchString,\n}) {\n // Use the state and functions returned from useTable to build your UI\n const moveScroll = () => {\n window.scrollTo({ top: 0, left: 0, behavior: \"smooth\" });\n // scroll();\n };\n const {\n getTableProps,\n getTableBodyProps,\n headerGroups,\n rows,\n prepareRow,\n page, // Instead of using 'rows', we'll use page,\n // which has only the rows for the active page\n\n // The rest of these things are super handy, too ;)\n canPreviousPage,\n canNextPage,\n gotoPage,\n pageOptions,\n nextPage,\n pageCount,\n previousPage,\n setPageSize,\n state: { pageIndex, pageSize },\n } = useTable(\n {\n columns,\n data,\n // <<<<<<< HEAD\n initialState: { pageIndex: tigger === \"amhitted\" ? 0 : 0, pageSize: 10, tempTigger : tigger },\n // disableSortRemove: false\n // =======\n // initialState: { pageIndex: 0 },\n // >>>>>>> 9f5c23a3b2a8d9a67b941ab1c2991b1e4b255a09\n defaultFilterMethod,\n },\n useSortBy,\n usePagination\n );\n\n const [currentPage, setCurrentPage] = useState(0);\n const [currentPageLimit, setCurrentPageLimit] = useState(10);\n const [rowDivided, setrowDivided] = useState(0);\n const [tableSrollTrigger, setTableScrollTigger] = useState(false);\n const [prevtableSrollTrigger, setPrevtableSrollTrigger] = useState(false);\n\n const haneldCall = (type) => {\n tempTigger = \"init\";\n typeMotion = type;\n\n // type === \"back\" ? previousPage() : nextPage()\n if (type === \"back\") {\n if (currentPage > 0) {\n currentPageNumber = currentPage -1\n setCurrentPage(currentPage - 1);\n pageLimitHandle(currentPageNumber, currentPageLimit, tigger, searchString);\n paginationCountHanlde && paginationCountHanlde( currentPageNumber , currentPageLimit, tigger, tempHeaderFilter)\n \n } else {\n return;\n }\n } else {\n if (currentPage < rowDivided) {\n currentPageNumber = currentPage + 1\n setCurrentPage(currentPage + 1);\n pageLimitHandle(currentPageNumber, currentPageLimit, tigger, searchString);\n paginationCountHanlde && paginationCountHanlde(currentPageNumber, currentPageLimit, tigger, tempHeaderFilter)\n } else {\n return;\n }\n }\n \n moveScroll()\n };\n\n const selectPageLimitHandle = (e) => {\n setPageSize(e);\n setPSize && setPSize(e)\n setCurrentPageLimit(e);\n setCurrentPageLimit1(e);\n setCurrentPage(0);\n currentPageNumber = 0;\n pageLimitHandle(currentPageNumber, e, tigger, searchString);\n paginationCountHanlde && paginationCountHanlde(currentPageNumber, e, tigger)\n };\n \n\n useEffect(() => {\n if (!filterAction ) {\n currentPageNumber = tigger == \"amhitted\" ? 0 : currentPageNumber;\n return;\n }\n\n if (filterAction[0] == 1) {\n if(tempTigger == \"amhitted\") {\n setPageSize(10);\n setCurrentPageLimit(10);\n setCurrentPageLimit1(10);\n currentPageNumber = 0\n setCurrentPage(currentPageNumber);\n }\n else{\n setPageSize(10);\n setCurrentPageLimit(10);\n setCurrentPageLimit1(10);\n // currentPageNumber = tempTigger == \"amhitted\" ? 0 : currentPageNumber;\n currentPageNumber = tigger == \"init\" ? 0 : currentPageNumber;\n setCurrentPage(currentPageNumber); // pageLimitHandle && pageLimitHandle(currentPageNumber, currentPageLimit, tigger, searchString);\n }\n return;\n }\n if (filterAction[0] == 2) {\n setCurrentPage(0);\n setPageSize(10);\n setCurrentPageLimit(10);\n setCurrentPageLimit1(10);\n currentPageNumber = 0\n return;\n }\n }, [filterAction]);\n\n useEffect(() => {\n var tempCount = 0;\n if (swapStationCount) {\n // console.log(swapStationCount,\"swapStationCount_________\")\n // setrowDivided(0)\n if (pageSize == 10) {\n totalPageCount = swapStationCount % 10;\n tempCount = Math.floor(swapStationCount / 10);\n if (totalPageCount > 0) {\n // rowDivided = rowDivided + 1;\n setrowDivided(tempCount + 1);\n // currentPage = currentPage +1;\n } else {\n setrowDivided(tempCount);\n }\n } else if (pageSize == 20) {\n totalPageCount = swapStationCount % 20;\n tempCount = Math.floor(swapStationCount / 20);\n\n if (totalPageCount > 0) {\n // rowDivided = rowDivided + 1;\n setrowDivided(tempCount + 1);\n // currentPage = currentPage +1;\n } else {\n setrowDivided(tempCount);\n }\n } else if (pageSize == 30) {\n totalPageCount = swapStationCount % 30;\n tempCount = Math.floor(swapStationCount / 30);\n\n if (totalPageCount > 0) {\n // rowDivided = rowDivided + 1;\n setrowDivided(tempCount + 1);\n // currentPage = currentPage +1;\n } else {\n setrowDivided(tempCount);\n }\n } else if (pageSize == 40) {\n totalPageCount = swapStationCount % 40;\n tempCount = Math.floor(swapStationCount / 40);\n\n if (totalPageCount > 0) {\n // rowDivided = rowDivided + 1;\n setrowDivided(tempCount + 1);\n // currentPage = currentPage +1;\n } else {\n setrowDivided(tempCount);\n }\n } else if (pageSize == 50) {\n totalPageCount = swapStationCount % 50;\n tempCount = Math.floor(swapStationCount / 50);\n\n if (totalPageCount > 0) {\n // rowDivided = rowDivided + 1;\n setrowDivided(tempCount + 1);\n // currentPage = currentPage +1;\n } else {\n console.log(tempCount,\"am laast else\")\n setrowDivided(tempCount);\n }\n }\n }\n setCurrentPage(currentPageNumber)\n // paginationAssetsHandle();\n }, [swapStationCount, data]);\n\n const paginationAssetsHandle = () => {\n // setCurrentPage(currentPageNumber)\n // pageLimitHandle && pageLimitHandle(currentPageNumber, currentPageLimit, tigger, searchString);\n // tigger == \"amhitted\" ? setCurrentPage(0) : setCurrentPage(currentPageNumber)\n // if(tigger !== \"view\"){\n // console.log(tigger,\"am ifffffffffffffffff\")\n // // setCurrentPage(currentPageNumber)\n // } else {\n // console.log(tigger,\"am elcsssysysyy\")\n // // paginationCountHanlde && paginationCountHanlde(currentPageNumber, currentPageLimit, tigger)\n\n // // paginationCountHanlde && paginationCountHanlde(currentPageNumber, e, tigger)\n // }\n \n }\n\n const firstPageRows = rows.slice(0, 10);\n // Render the UI for your table\n\n useEffect(() => {\n window.scrollTo({ top: 0, left: 0, behavior: \"smooth\" })\n // prevtableSrollTrigger || currentPage > 0 && !canNextPage \n // ?\n // ( console.log(currentPage,\"am runing\"),\n // window.scrollTo({ top: 0, left: 0, behavior: \"smooth\" }))\n // : null\n },[prevtableSrollTrigger, currentPage, canNextPage])\n return (\n <>\n \n
\n ) : (\n \n \n
\n \n No Record Found\n
\n\n
\n )}\n | \n {column.render(\"Header\")}\n \n {column.isSorted\n ? column.isSortedDesc\n ? \" ↓\"\n : \" ↑\"\n : \"\"}\n \n | \n ) : (\n <>\n )\n )}\n
|---|
\n {/* Showing {page.length} of {swapStationCount} Records */}\n Showing {(currentPage ) * pageSize + 1}-{Math.min((currentPage +1)* pageSize, swapStationCount)} of {swapStationCount} Records\n
\n {/* \n {error && (\n \n \n {error}\n \n )}\n\n {success && (\n \n {success}\n \n )}\n
\n \n \n );\n}\n\nSignin.inStorybook = true;\n","\nimport React, { useState, useEffect, useRef } from \"react\";\n\n// import {\n// useSearchParams\n// } from 'react-router-dom'\n\nimport cn from \"classnames\";\nimport { Link } from \"react-router-dom\";\n\nimport styles from \"./Reset.module.scss\";\nimport AuthService from \"services/auth.service\";\nimport { FiEye, FiEyeOff } from \"react-icons/fi\";\nimport LocalStorageService from \"services/tokenlocalstorage.service\";\nimport { useHistory } from \"react-router-dom\";\nimport cryptoJS from \"crypto-js\";\nimport notificationService from \"services/notification.service\";\nexport default function Signin(props) {\n const history = useHistory();\n const secretKey = \"BSSSecretForRIL\";\n\n // const [searchParams, setSearchParams] = useSearchParams();\n const [email, setEmail] = useState();\n const [formErrors, setFormErrors] = useState(\"\");\n // const [searchParams, setSearchParams] = useParams();\n const [password, setPassword] = useState();\n const [remember, setRemember] = useState();\n const [error, setError] = useState();\n const [confirmPassword, setConfirmPassword] = useState(\"\");\n const [newPassword, setNewPassword] = useState(\"\");\n const [confirmPswd, setConfirmPswd] = useState(\"password\");\n const [newPswd, setNewPswd] = useState(\"password\");\n const [otpView, setOTPView] = useState(\"password\");\n const [otp, setOtp] = useState();\n // let { token } = useParams();\n\n const toggleOTP = () => {\n if (otpView === \"password\") {\n setOTPView(\"text\");\n return;\n }\n setOTPView(\"password\");\n };\n\n const togglePassword = () => {\n if (newPswd === \"password\") {\n setNewPswd(\"text\");\n return;\n }\n setNewPswd(\"password\");\n };\n\n const togglePasswords = () => {\n if (confirmPswd === \"password\") {\n setConfirmPswd(\"text\");\n return;\n }\n setConfirmPswd(\"password\");\n };\n\n const handleOTP = (e) => {\n setOtp(e.target.value);\n };\n\n const handlePassword = (e) => {\n if(e.target.value.length<=16)\n setNewPassword(e.target.value);\n };\n\n const handleConfirmPassword = (e) => {\n if(e.target.value.length<=16)\n setConfirmPassword(e.target.value);\n };\n\n const handleRemember = (e) => {\n setRemember(e.target.checked);\n };\n\n const keyboardEvents = (e) => {\n if (e.code == \"Enter\") {\n signin();\n }\n };\n\n const validate = () => {\n const regex = new RegExp('^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{8,16}$');\n const error = {};\n let flag = true\n if (!otp) {\n error.otpError = \"Please enter mandatory fields\";\n flag = false;\n }\n if (!newPassword) {\n error.newPasswordError = \"Please enter New Password\"\n flag = false;\n }else if (!regex.test(newPassword)) {\n error.newPasswordError = \"Password should be 8-16 characters in length containing atleast one uppercase letter, one lowercase letter, atleast one number and atleast one special character\";\n flag = false;\n }\n if (!confirmPassword) {\n error.confirmPasswordError = (\"Please enter confirm new password\");\n flag = false;\n }\n if (newPassword && confirmPassword && newPassword !== confirmPassword) {\n setError(\"The new password should match confirm password\");\n flag = false;\n }\n\n setFormErrors(error)\n return flag;\n };\n\n const signin = async () => {\n // const [searchParams, setSearchParams] = useSearchParams();\n\n // searchParams.get(\"token\")\n\n // console.log(searchParams,\"searchParams\");\n\n /*const search = props.location.search;\n const serialId = new URLSearchParams(search).get('token');*/\n \n if(validate()){\n const serialId = props.location.search.split(\"?token=\")[1];\n const encodedNewPassword = encodeURIComponent(newPassword);\n if (encodedNewPassword) {\n AuthService.resetPassword(encodedNewPassword, serialId, otp).then(\n (response) => {\n if (response?.data) {\n notificationService.showNonBlacklisted(\n response?.config?.url,\n response?.data?.message\n );\n // response(\n // response?.data?.message\n // ? response.data.message\n // : \"Failed to reset the password, Please retry\"\n // );\n\n // history.push(\"/\");\n // window.location.reload();\n // return;\n }\n setTimeout(() => {\n history.push(\"/\");\n window.location.reload();\n }, 5000);\n // console.log(\"history\",history)\n },\n (error) => {\n setError(\n error?.response?.data?.message\n ? error.response.data.message\n : \"Failed to reset the password, Please retry\"\n );\n return;\n }\n );\n }\n }\n \n };\n\n return (\n \n \n \n {\"Send\"}\n \n
\n {error && (\n \n
\n\n \n
\n \n \n {\"SwapUp\"}\n
\n\n {\"Forgot Password\"}\n
\n\n {\"Email*\"}\n
\n\n \n
\n \n \n {\"Back to login\"}\n
\n \n \n
\n \n \n );\n}\n\nSignin.inStorybook = true;\n","\nimport React, { useState, useEffect, useRef, useCallback } from \"react\";\nimport ReactEcharts from \"echarts-for-react\";\nimport * as echarts from \"echarts/core\";\nimport { BarChart } from \"echarts/charts\";\nimport Echarts from \"echarts-for-react\";\nimport {\n getDate,\n getTime,\n getDay,\n formatYaxisNumber,\n} from \"components/common/dateTime\";\nimport {\n GridComponent,\n TooltipComponent,\n TitleComponent,\n} from \"echarts/components\";\nimport { CanvasRenderer } from \"echarts/renderers\";\nimport { useWindowSize } from \"services/resizeservice\";\n\nexport default function EnergyComponent(props) {\n const [echartInstance, setEchartInstance] = useState(null);\n const size = useWindowSize();\n\n useEffect(() => {\n echartInstance?.resize();\n }, [size.width]);\n\n var xAxisData = [];\n var yAxisData = [];\n var yAxisDataLabel = [];\n\n if (props.data != undefined) {\n props.data.map(function (obj) {\n if (\n props.selectTimeValue === \"HOUR_24\" ||\n props.selectTimeValue === \"HOUR_12\"\n ) {\n xAxisData.push(getTime(obj.endDate));\n } else if (props.selectTimeValue === \"WEEK\") {\n xAxisData.push(getDay(obj.endDate));\n } else {\n xAxisData.push(getDate(obj.endDate));\n }\n \n if(obj.yaxis != undefined) {\n yAxisDataLabel.push(obj.yaxis)\n }\n\n if(obj.yaxis != undefined) {\n yAxisData.push(obj.yaxis === \"0\" ? '' : obj.yaxis)\n }\n // if (obj.yaxis === null || obj.yaxis === 0) {\n // if (obj.yaxis === null || obj.yaxis === 0) {\n // obj.yaxis = Math.round(Math.random() * 10);\n // yAxisData.push(obj.yaxis);\n // } \n // else {\n // yAxisData.push(obj.yaxis );\n // // yAxisData.push(obj.yaxis === \"0\" ? '' : obj.yaxis);\n // }\n });\n }\n var option = {\n tooltip: {\n trigger: \"item\",\n },\n xAxis: {\n type: \"category\",\n data: xAxisData,\n name: \"Time\",\n nameLocation: \"middle\",\n nameGap: 32,\n\n nameTextStyle: {\n fontFamily: \"JioType\",\n fontStyle: \"normal\",\n fontWeight: 300,\n fontSize: \"12\",\n color: \"#000000\",\n },\n },\n yAxis: {\n type: \"value\",\n name: \"No. of Swaps\",\n nameLocation: \"middle\",\n nameGap: props.selectTimeValue === \"WEEK_2\" ? 30 :\n props.selectTimeValue === \"MONTH\" ? 37 :\n props.selectTimeValue === \"MONTH_3\" ? 37 : 32 ,\n nameTextStyle: {\n fontFamily: \"JioType\",\n fontStyle: \"normal\",\n fontWeight: 300,\n fontSize: \"12\",\n color: \"#000000\",\n },\n },\n grid: {\n left: \"13%\",\n right: \"3%\",\n bottom: \"20%\",\n top: 40,\n containLabel: true,\n show: true,\n width: \"auto\",\n },\n series: [\n {\n type: \"bar\",\n itemStyle: {\n borderColor: \"transparent\",\n color: \"transparent\",\n },\n emphasis: {\n itemStyle: {\n borderColor: \"transparent\",\n color: \"transparent\",\n },\n },\n data: yAxisDataLabel,\n },\n {\n type: \"bar\",\n showBackground: true,\n backgroundStyle: {\n color: \"transparent\",\n },\n label: {\n show: true,\n position: \"top\",\n },\n color: \"#23297A\",\n data: yAxisData,\n },\n // {\n // // data: yAxisChargedData,\n // // data: [100, 82, 65, 60, 50, 42, 30, 25],\n // data: yAxisData,\n // type: \"bar\",\n // color: \"#23297A\",\n // label: {\n // show: true,\n // position: \"top\",\n // },\n // emphasis: {\n // itemStyle: {\n // shadowBlur: 10,\n // shadowOffsetX: 0,\n // shadowColor: \"rgba(0, 0, 0, 0.5)\",\n // },\n // },\n // },\n ],\n };\n\n return (\n // \n \n \n {\"Submit\"}\n \n
\n {error && (\n \n
\n\n \n
\n \n \n {\"SwapUp\"}\n
\n\n {\"Reset Password\"}\n
\n\n {\"OTP*\"}\n
\n\n
\n \n {otpView !== \"password\" ?
\n {formErrors.otpError}
\n\n\n {\"New Password*\"}\n
\n\n
\n \n {newPswd !== \"password\" ?
\n {formErrors.newPasswordError}
\n\n\n {\" Confirm Password*\"}\n
\n\n
\n \n {confirmPswd !== \"password\" ?
\n {formErrors.confirmPasswordError}
\n\n\n {/*
\n \n \n
*/}\n \n {/* \n {'Keep me Signed in'}\n
*/}\n \n \n \n {\"Back To Sign In\"}\n
\n \n {error}
\n )}\n\n {\n setEchartInstance(instance);\n }}\n notMerge={true}\n lazyUpdate={true}\n />\n //
\n );\n}\n","\nimport React, { useState, useEffect, useRef, useCallback } from \"react\";\nimport ReactEcharts from \"echarts-for-react\";\nimport * as echarts from \"echarts/core\";\nimport { BarChart } from \"echarts/charts\";\nimport Echarts from \"echarts-for-react\";\nimport {\n getDate,\n getTime,\n getDay,\n formatYaxisNumber,\n} from \"components/common/dateTime\";\nimport {\n GridComponent,\n TooltipComponent,\n TitleComponent,\n} from \"echarts/components\";\nimport { CanvasRenderer } from \"echarts/renderers\";\nimport { useWindowSize } from \"services/resizeservice\";\n\nexport default function EnergyComponent(props) {\n const [echartInstance, setEchartInstance] = useState(null);\n const size = useWindowSize();\n\n useEffect(() => {\n echartInstance?.resize();\n }, [size.width]);\n\n const { swappedSessionGraphData } = props;\n\n var xAxisData = [];\n var yAxisHardwareError = [];\n var yAxisDataLabel = [];\n var yAxisTemptError = [];\n \n if (props.swappedSessionGraphData != undefined) {\n props.swappedSessionGraphData.map(function (obj) {\n if (\n props.selectTimeValue === \"HOUR_24\" ||\n props.selectTimeValue === \"HOUR_12\"\n ) {\n xAxisData.push(getTime(obj.endDate));\n } else if (props.selectTimeValue === \"WEEK\") {\n xAxisData.push(getDay(obj.endDate));\n } else {\n xAxisData.push(getDate(obj.endDate));\n }\n yAxisHardwareError.push(obj.yaxis === \"0\" ? '' : obj.yaxis)\n yAxisDataLabel.push(obj.yaxis)\n \n // yAxisTemptError.push(obj.temperatureError);\n });\n }\n\n // if (props.selectTimeValue == \"168\") {\n // xAxisData = [\"Sun\", \"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\"];\n // }\n\n var option = {\n tooltip: {\n trigger: \"item\",\n },\n xAxis: {\n type: \"category\",\n data: xAxisData,\n name: \"Time\",\n nameLocation: \"middle\",\n nameGap: 30,\n nameTextStyle: {\n fontFamily: \"JioType\",\n fontStyle: \"normal\",\n fontWeight: 300,\n fontSize: \"12\",\n color: \"#000000\",\n },\n },\n axisLabel: {\n rotate:\n props.selectTimeValue === \"WEEK_2\" ||\n props.selectTimeValue === \"MONTH\" ||\n props.selectTimeValue === \"MONTH_3\"\n ? 30\n : 0,\n },\n yAxis: {\n type: \"value\",\n name: \"No. of Swaps\",\n\n nameLocation: \"middle\",\n nameGap: props.selectTimeValue === \"WEEK_2\" ? 30 :\n props.selectTimeValue === \"MONTH\" ? 37 :\n props.selectTimeValue === \"MONTH_3\" ? 37 : 32 ,\n nameTextStyle: {\n fontFamily: \"JioType\",\n fontStyle: \"normal\",\n fontWeight: 300,\n fontSize: \"12\",\n color: \"#000000\",\n },\n },\n grid: {\n left: \"13%\",\n right: \"3%\",\n bottom: \"20%\",\n top: 40,\n containLabel: true,\n show: true,\n width: \"auto\",\n },\n series: [\n {\n type: \"bar\",\n itemStyle: {\n borderColor: \"transparent\",\n color: \"transparent\",\n },\n emphasis: {\n itemStyle: {\n borderColor: \"transparent\",\n color: \"transparent\",\n },\n },\n data: yAxisDataLabel,\n },\n {\n type: \"bar\",\n showBackground: true,\n backgroundStyle: {\n color: \"transparent\",\n },\n label: {\n show: true,\n position: \"top\",\n },\n color: \"#087A3E\",\n data: yAxisHardwareError,\n },\n // {\n // // data: yAxisChargedData,\n // // data:swappedSessionGraphData,\n // // data: [100, 82, 65, 60, 50, 42, 30, 25],\n // data: yAxisHardwareError,\n // type: \"bar\",\n // color: \"#087A3E\",\n // // color: '#00FF00',\n // label: {\n // show: true,\n // position: \"top\",\n // },\n \n // emphasis: {\n // itemStyle: {\n // shadowBlur: 10,\n // shadowOffsetX: 0,\n // shadowColor: \"rgba(0, 0, 0, 0.5)\",\n // },\n // },\n // },\n ],\n };\n\n return (\n // \n {\n setEchartInstance(instance);\n }}\n notMerge={true}\n lazyUpdate={true}\n />\n //
\n );\n}\n","\nimport React, { useState, useEffect } from \"react\";\nimport Echart from \"echarts-for-react\";\nimport { getDate, getTime, getDay } from \"components/common/dateTime\";\nimport { useWindowSize } from \"services/resizeservice\";\n\nexport default function EnergyComponentsLine(props) {\n const [echartInstance, setEchartInstance] = useState(null);\n const size = useWindowSize();\n\n useEffect(() => {\n echartInstance?.resize();\n }, [size.width]);\n\n const { faultGraphData } = props;\n var xAxisData = [];\n var yAxisdData = [];\n var yAxisDataLabel = [];\n\n if (props?.faultGraphData != undefined) {\n props?.faultGraphData.map(function (obj) {\n if (\n props.selectTimeValue === \"HOUR_24\" ||\n props.selectTimeValue === \"HOUR_12\"\n ) {\n xAxisData.push(getTime(obj.endDate));\n } else if (props.selectTimeValue === \"WEEK\") {\n xAxisData.push(getDay(obj.endDate));\n } else {\n xAxisData.push(getDate(obj.endDate));\n }\n if (obj.faultCount === null || obj.faultCount === 0) {\n obj.faultCount = Math.round(Math.random() * 10);\n yAxisdData.push(obj.faultCount);\n } else {\n // yAxisdData.push(obj.yaxis);\n if (obj.yaxis != undefined) {\n yAxisDataLabel.push(obj.yaxis);\n }\n\n if (obj.yaxis != undefined) {\n yAxisdData.push(obj.yaxis === \"0\" ? \"\" : obj.yaxis);\n }\n\n if (obj.swapCount != undefined) {\n yAxisdData.push(obj.swapCount === \"0\" ? \"\" : obj.swapCount);\n }\n }\n });\n }\n\n var line = {\n tooltip: {\n trigger: \"item\",\n },\n xAxis: {\n type: \"category\",\n // data: [3, 6, 9, 12, 15, 18, 21, 24],\n data: xAxisData,\n name: \"Time\",\n nameLocation: \"middle\",\n nameGap: 30,\n nameTextStyle: {\n fontFamily: \"JioType\",\n fontStyle: \"normal\",\n fontWeight: 300,\n fontSize: \"12\",\n color: \"#000000\",\n },\n },\n yAxis: {\n type: \"value\",\n name: \"No. of Faults\",\n nameLocation: \"middle\",\n nameGap: 32,\n nameTextStyle: {\n fontFamily: \"JioType\",\n fontStyle: \"normal\",\n fontWeight: 300,\n fontSize: \"12\",\n color: \"#000000\",\n },\n },\n emphasis: {\n label: {\n show: true,\n },\n },\n grid: {\n left: \"13%\",\n right: \"3%\",\n bottom: \"20%\",\n top: 40,\n containLabel: true,\n show: true,\n width: \"auto\",\n },\n series: [\n {\n type: \"bar\",\n color: \"red\",\n emphasis: {\n itemStyle: {\n shadowBlur: 10,\n shadowOffsetX: 0,\n shadowColor: \"rgba(0, 0, 0, 0.5)\",\n },\n },\n data: yAxisDataLabel,\n },\n {\n type: \"line\",\n //color: \"red\",\n // showBackground: true,\n // backgroundStyle: {\n // color: \"transparent\",\n // },\n label: {\n show: true,\n position: \"top\",\n },\n symbol: 'circle',\n symbolSize: 10,\n color: \"#E3324C\",\n data: yAxisdData,\n },\n // {\n // // data: [20, 55, 40, 75, 58, 65, 48],\n // data: yAxisdData,\n // type: \"line\",\n // color: \"red\",\n // label: {\n // show: true,\n // position: \"top\",\n // },\n // emphasis: {\n // itemStyle: {\n // shadowBlur: 10,\n // shadowOffsetX: 0,\n // shadowColor: \"rgba(0, 0, 0, 0.5)\",\n // },\n // },\n // },\n ],\n };\n return (\n // \n {\n setEchartInstance(instance);\n }}\n >\n //
\n );\n}\n","\nimport React, { useCallback, useState, useEffect } from \"react\";\nimport { getRequest } from \"../../services/axiosBaseClient\";\nimport styles from \"./SwappingStation.module.scss\";\nimport cn from \"classnames\";\nimport TableSwapHistory from \"../common/TableSwapHistory\";\nimport styled from \"styled-components\";\n\nvar offSetMainValue = 0;\nvar limitMainValue = 10;\nvar pageSizee = 10;\nvar pageNumber = 0;\nvar pagingString = \"offset=\" + pageNumber + \"&limit=\" + pageSizee;\n\nvar slotId;\n\n\nconst Styles = styled.div`\n table {\n th,\n td {\n border-bottom: 1px solid #f5f5ff;\n border-right: 0px solid black;\n padding: 8px;\n white-space: nowrap;\n text-align: start;\n\n :last-child {\n border-right: 0;\n text-align: left;\n }\n }\n }\n`;\n\nexport default function SwappingSlot(props) {\n const [dataTable, setDataTable] = useState([]);\n const [limit, setLimit] = useState(10);\n const [offset, setOffset] = useState(0);\n const [slotDetailsCount, setSlotDetailsCount] = useState(\"\");\n const [slotdate, setSlotDate] = useState(null);\n const [isRotating, setIsRotating] = useState(false);\n const paginationCountHanlde = (offset, limit) => {\n\n console.log(offset, limit, \"offsett\")\n setOffset(offset);\n offSetMainValue = offset;\n setLimit(limit);\n limitMainValue = limit;\n const pageoffset = offset;\n const pageLimit = limit;\n // console.log(test,\"TESINGG\")\n pagingString = \"offset=\" + pageoffset + \"&limit=\" + pageLimit;\n\n getBatterySwappingHistory()\n };\n\n const handleRefresh = () => {\n setIsRotating(true);\n // setShowProgressBar(true);\n\n setTimeout(() => {\n setIsRotating(false);\n // setShowProgressBar(false);\n }, 1000);\n getBatterySwappingHistory();\n };\n\n const handleDataLimitCallback = (offset, limit) => {\n setLimit(limit);\n limitMainValue = limit;\n setOffset(offset);\n offSetMainValue = offset;\n getBatterySwappingHistory();\n };\n\n\n const getBatterySwappingHistory = useCallback(async () => {\n\n console.log(pagingString, \"pagingString\")\n await getRequest(`swapStation/slotStatus?swapStationId=${slotId}&` + pagingString).then(\n (res) => {\n if (res && res?.data) {\n setSlotDate(res?.data?.updatedAt);\n setDataTable(res?.data?.slotStatusDtos);\n setSlotDetailsCount(res?.data?.count);\n }\n }\n );\n }, []);\n\n useEffect(() => {\n slotId = props?.id;\n pagingString = \"offset=\" + 0 + \"&limit=\" + 10;\n getBatterySwappingHistory();\n }, []);\n\n const columns = React.useMemo(() => [\n {\n Header: \"Slot Serial\",\n accessor: \"name\",\n },\n {\n Header: \"Swap Station\",\n accessor: \"swapStationName\",\n },\n {\n Header: \"Battery\",\n accessor: \"batterySerial\",\n },\n {\n Header: \"SOC\",\n accessor: \"soc\",\n Cell: (row) => { \n return(\n {row.row?.original?.soc? row.row?.original?.soc+\"%\" : NA}
\n ) },\n },\n {\n Header: \"SOH\",\n accessor: \"soh\",\n Cell: (row) => { \n return(\n {row.row?.original?.soh? row.row?.original?.soh+\"%\" : NA}
\n ) },\n },\n {\n Header: \"Slot Status\",\n accessor: \"batteryStatus\",\n },\n ]);\n\n return (\n <>\n Last Updated on {slotdate ? new Date(slotdate).toLocaleString() : 'NA'}\n handleRefresh()}\n />\n
\n {row.row?.original?.vehicle? row.row?.original?.vehicle : \"NA\"}
;\n },\n },\n {\n Header: \"Swap Station Name\",\n accessor: \"swapStationName\",\n },\n {\n Header: \"Charged Battery SOC(%)\",\n accessor: \"chargedSOC\",\n },\n {\n Header: \"Swapped Battery SOC(%)\",\n accessor: \"avaliableSOC\",\n // accessor: \"chargedSOC\",\n },\n // {\n // Header: \"Swapped Battery SOC\",\n // accessor: \"swappedBatterySOC\",\n // },\n {\n Header: \"Energy Dispatch(kWh)\",\n accessor: \"energyDispatch\",\n Cell: (row) => {\n return {row.row?.original?.energyDispatch? Number(row.row?.original?.energyDispatch).toFixed(2) : 0}
;\n },\n },\n {\n Header: \"Revenue(₹)\",\n accessor: \"revenue\",\n },\n {\n Header: \"Swap Time\",\n accessor: \"swapDateTime\",\n Cell: (row) => {\n return {row.row?.original?.swapDateTime? row.row?.original?.swapDateTime : 0}
;\n },\n },\n {\n Header: \"Battery In\",\n accessor: \"inBatterySerial\",\n Cell: (row) => {\n return {row.row?.original?.inBatterySerial? row.row?.original?.inBatterySerial : \"NA\"}
;\n },\n },\n {\n Header: \"Slot in\",\n accessor: \"inSlot\",\n },\n {\n Header: \"Battery Out\",\n accessor: \"outBatterySerial\",\n Cell: (row) => {\n return {row.row?.original?.outBatterySerial? row.row?.original?.outBatterySerial : \"NA\"}
;\n },\n },\n {\n Header: \"Slot Out\",\n accessor: \"outSlot\",\n },\n {\n Header: \"Status\",\n accessor: \"status\",\n },\n {\n Header: \"Cause of Failure\",\n accessor: \"reasonOfFailure\",\n Cell: (row) => {\n return { row.row?.original?.reasonOfFailure ? row.row?.original?.reasonOfFailure : \"NA\" }
;\n },\n },\n ]);\n\n return (\n <>\n \n {\"Swapping\"}\n
\n\n\n \n {\"\"}\n
\n \n \n \n\n \n
\n \n \n \n
\n \n <>\n
\n \n \n \n {totalSwapStationCount}\n
\n \n
\n\n \n {\"Total Count\"}\n
\n\n
\n )}\n \n \n\n \n
\n\n \n\n \n
\n \n {\"Filters\"}\n
\n {open && (\n \n \n
\n \n \n \n \n \n \n \n \n \n \n
\n \n \n \n {sitesList.map((obj) => {\n return ;\n })}\n \n
\n \n \n \n {chargerList.map((obj) => {\n return ;\n })}\n \n
\n \n {\n handleClick(\"reset\");\n }}\n >\n Reset\n \n {\n handleClick(\"apply\");\n }}\n >\n Apply\n \n
\n \n
\n\n \n
\n \n \n
\n \n \n {/*
\n */}\n {\"Recent\"}\n */}\n \n \n
\n \n \n
\n \n \n {/*
\n */}\n {\"Reserved\"}\n */}\n \n \n
\n \n
\n \n \n {/*
\n */}\n {\"Fault\"}\n */}\n \n \n {id ? (\n
\n {/* tab, setTab */}\n\n {\n setTab(1);\n }}\n >\n {\"Swapping Details\"}\n \n \n {\n setTab(2);\n }}\n >\n {\"Slot Details\"}\n \n \n\n \n
\n ) : (\n \n )}\n\n {tab === 1 || !id ? (\n \n
\n );\n}\n","\nimport React from \"react\";\nimport ECharts from \"echarts-for-react\";\nimport { getDate, getTime, getDay } from \"components/common/dateTime\";\n\nexport default function EnergyComponentChartSessionTime(props) {\n var xAxisData = [];\n var yAxisData = [];\n // if (props.data != undefined) {\n // props.data.swapTime.\n // console.log('swap.swaptime',props.data.swapTime)\n // props.data.map(function (obj) {\n // console.log('',obj);\n // xAxisData.push(getTime(obj));\n // if (props.selectValue === \"HOUR_24\" || props.selectValue === \"HOUR_12\") {\n // xAxisData.push(getTime(obj));\n // } else if (props.selectValue === \"WEEK\") {\n // xAxisData.push(getDay(obj.swapTime));\n // } else {\n // xAxisData.push(getDate(obj.swapTime));\n // }\n // if (obj.yaxis === null || obj.yaxis === 0) {\n // obj.yaxis = Math.round(Math.random() * 10);\n // console.log('obj bv',obj.swapCount)\n // yAxisData.push(obj.swapCount);\n // } else {\n // yAxisData.push(obj.swapCount);\n // console.log('obj esle',obj.swapCount)\n // }\n // });\n // }\n\n var swapTime = props?.data?.swapTime;\n var swapCount = props?.data?.swapCount;\n var swapLength;\n\n if (swapCount == undefined) {\n swapCount = [0, 0, 0, 0, 0, 0, 0];\n } else {\n swapCount = props.data.swapCount;\n }\n if (swapTime == undefined) {\n swapTime = [0, 0, 0, 0, 0, 0, 0];\n } else {\n swapTime = props.data.swapTime;\n }\n\n var largest = swapCount[0];\n\n for (var i = 0; i < swapCount?.length; i++) {\n if (largest < swapCount[i]) {\n largest = swapCount[i];\n }\n }\n swapLength = largest?.toString()?.length;\n\n var option = {\n xAxis: {\n type: \"category\",\n nameGap: 30,\n name: \"Session time\",\n nameLocation: \"middle\",\n data: swapTime,\n // data: [20, 30, 40, 50, 60, 70, 80],\n },\n yAxis: {\n type: \"value\",\n nameLocation: \"middle\",\n nameGap: swapLength > 3 ? \"50\" : \"32\",\n name: \"Number of Swaps\",\n },\n grid: {\n left: \"12%\",\n right: \"5%\",\n bottom: \"17%\",\n containLabel: true,\n height: \"65%\",\n width: \"auto\",\n },\n series: [\n {\n data: swapCount,\n // data: [210, 310, 170, 380, 150, 320, 180],\n type: \"bar\",\n showBackground: true,\n color: \"#414ACD\",\n label: {\n show: false,\n position: \"top\",\n },\n backgroundStyle: {\n color: \"rgba(180, 180, 180, 0.2)\",\n },\n itemStyle: {\n emphasis: {\n barBorderRadius: [50, 50],\n },\n normal: {\n barBorderRadius: [50, 50, 0, 0],\n },\n },\n emphasis: {\n itemStyle: {\n shadowBlur: 10,\n shadowOffsetX: 0,\n shadowColor: \"rgba(0, 0, 0, 0.5)\",\n },\n },\n },\n ],\n };\n return (\n \n
\n );\n}\n","\nimport React, { useState, useEffect, useRef, useCallback } from \"react\";\nimport cn from \"classnames\";\n\nimport styles from \"./SwappingStation.module.scss\";\nimport EnergyComponentChartSwap from \"./EnergyComponentChartSwap\";\nimport EnergyComponentsLine from \"./EnergyComponentsLineSwapStation\";\nimport EnergyComponentChartSessionTime from \"./EnergyComponentChartSessionTime\";\nimport Master from \"screen/Master\";\nimport TableAndSearch from \"components/common/TableAndSearch\";\nimport { Link, useHistory } from \"react-router-dom\";\nimport styled from \"styled-components\";\nimport Button from \"@material-ui/core/Button\";\nimport { getRequest, postRequest } from \"../../services/axiosBaseClient\";\nimport { getRequestInAssets } from \"services/axiosAssetsBaseClient\";\nimport LocalStorageService from \"services/tokenlocalstorage.service\";\nimport NewTableAndSearchMasterFilter from \"components/common/NewTableAndSearchMasterFilter\";\nconst Styles = styled.div`\n table {\n th,\n td {\n white-space: wrap;\n }\n }\n .double-screen-pagination {\n margin-top: 40px !important;\n height: 50px;\n padding: 0;\n right: 18px !important;\n }\n`;\n\nlet multiselectArray = [];\nvar offset = 0;\nvar pageLimit = 10;\n\nfunction SwappingStation(props) {\n const filterInitialValue = {\n siteId: \"\",\n swapStationId: \"\",\n state: \"\",\n stateId: \"\",\n city: \"\",\n cityId: \"\",\n zoneId: \"\",\n startDate: parseInt(Date.now() / 1000) - 86400,\n endDate: parseInt(Date.now() / 1000),\n time: \"HOUR_24\",\n };\n\n const [filterData, setChargerMultiSelecct] = useState(multiselectArray);\n const [filter, setFilter] = useState(filterInitialValue);\n const [swapStationFault, setSwapSationFault] = useState([]);\n const [swapStationsData, setSwapStationsData] = useState([]);\n const [swapData, setSwapData] = useState([]);\n const [selectTime, setSelectTime] = useState(\"HOUR_24\");\n const [sitesList, setSitesList] = useState([]);\n const [chargerList, setChargerList] = useState([]);\n const [selectTimeValue, setSelectTimeValue] = useState(\"HOUR_24\");\n const [sessionsTimeData, setSessionTimeData] = useState([]);\n const [data, setData] = useState([]);\n const [swapStationCount, setSwapStationCount] = useState(0);\n const [totalSwapStationCount, setTotalSwapStationCount] = useState(0);\n const [timePeriod, setTimePeriod] = useState(\"\");\n function useOutsideAlerter(ref) {\n useEffect(() => {\n /**\n * Alert if clicked on outside of element\n */\n function handleClickOutside(event) {\n if (ref.current && !ref.current.contains(event.target)) {\n setOpen(false);\n // alert(\"You clicked outside of me!\");\n } else {\n setOpen(true);\n }\n }\n\n // Bind the event listener\n document.addEventListener(\"mousedown\", handleClickOutside);\n return () => {\n // Unbind the event listener on clean up\n document.removeEventListener(\"mousedown\", handleClickOutside);\n };\n }, [ref]);\n }\n\n const wrapperRef = useRef(null);\n useOutsideAlerter(wrapperRef);\n const [open, setOpen] = React.useState(false);\n // const handleClick = () => {\n // if (open) {\n // setOpen(false);\n // } else {\n // setOpen(true);\n // }\n // };\n\n function useOutsideAlerterFilter(ref) {\n useEffect(() => {\n /**\n * Alert if clicked on outside of element\n */\n function handleClickOutside(event) {\n if (ref.current && !ref.current.contains(event.target)) {\n setOpenFilter(false);\n // alert(\"You clicked outside of me!\");\n } else {\n setOpenFilter(true);\n }\n }\n\n // Bind the event listener\n document.addEventListener(\"mousedown\", handleClickOutside);\n return () => {\n // Unbind the event listener on clean up\n document.removeEventListener(\"mousedown\", handleClickOutside);\n };\n }, [ref]);\n }\n\n const wrapperRefFilter = useRef(null);\n useOutsideAlerterFilter(wrapperRefFilter);\n const [openFilter, setOpenFilter] = React.useState(false);\n const handleFilter = () => {\n if (openFilter) {\n setOpenFilter(false);\n } else {\n setOpenFilter(true);\n }\n };\n\n // const [open, setOpen] = React.useState(false);\n const [droppedFilter, setDroppedFilter] = useState(false);\n const [droppedFilterDiv, setDroppedFilterDiv] = useState(false);\n\n // let history = useHistory();\n\n // const someEventHandler = event => {\n // history.push({\n // pathname: '/secondpage',\n // search: '?query=abc',\n // state: { detail: 'some_value' }\n // });\n // };\n const history = useHistory();\n const viewSwappingStationList = (id, siteId) => {\n // history.push(\"/SwapStation/SwapStation/\" + id + \"-\" + siteId);\n history.push({\n pathname: \"/SwapStation/SwapStation/\" + id + \"-\" + siteId,\n state: {\n id: id,\n test: timePeriod,\n },\n });\n };\n\n const columns = React.useMemo(() => [\n {\n Header: \"Swapping Station Name\",\n accessor: \"swapStationName\",\n },\n {\n Header: \"Number of Slots\",\n accessor: \"numberOfBatteries\",\n Cell: (row) => {\n return {row.row?.original?.numberOfBatteries? row.row?.original?.numberOfBatteries : 0}
;\n },\n },\n {\n Header: \"Available Batteries\",\n accessor: \"chargedBatteries\",\n Cell: (row) => {\n return {row.row?.original?.chargedBatteries? row.row?.original?.chargedBatteries : 0}
;\n },\n },\n {\n Header: \"Charging Batteries\",\n accessor: \"chargingBatteries\",\n Cell: (row) => {\n return {row.row?.original?.chargingBatteries? row.row?.original?.chargingBatteries : 0}
;\n },\n },\n {\n Header: \"Fault Batteries\",\n accessor: \"faultBatteries\",\n Cell: (row) => {\n return {row.row?.original?.faultBatteries? row.row?.original?.faultBatteries : 0}
;\n },\n },\n {\n Header: \"Discharging Batteries\",\n accessor: \"dischargingBatteries\",\n Cell: (row) => {\n return {row.row?.original?.dischargingBatteries? row.row?.original?.dischargingBatteries : 0}
;\n },\n },\n {\n Header: \"Number of Swaps\",\n accessor: \"numberOfSwaps\",\n Cell: (row) => {\n return {row.row?.original?.numberOfSwaps? row.row?.original?.numberOfSwaps : 0}
;\n },\n },\n {\n Header: \"Temperature Inside\",\n accessor: \"temperature\",\n Cell: (row) => {\n return {row.row?.original?.temperature? row.row?.original?.temperature : 0}
;\n },\n },\n {\n Header: \"Temperature Outside\",\n accessor: \"outsideTemperature\",\n Cell: (row) => {\n return {row.row?.original?.outsideTemperature? row.row?.original?.outsideTemperature : 0}
;\n },\n },\n {\n Header: \"Status\",\n accessor: (row) => {\n return (\n <>\n {row.status === \"HEALTHY\" ? (\n \n {\"Swap Station\"}\n
\n\n\n \n {\"\"}\n
\n \n \n \n\n \n
\n \n \n \n
\n \n <>\n
\n \n \n \n {totalSwapStationCount}\n
\n \n
\n\n \n {\"Total Count\"}\n
\n\n
\n )}\n \n \n\n \n
\n\n \n\n \n
\n \n {\"Filters\"}\n
\n {open && (\n \n \n
\n \n \n \n \n \n \n \n \n \n \n
\n \n \n \n {sitesList.map((obj) => {\n return ;\n })}\n \n
\n \n \n \n {chargerList.map((obj) => {\n return ;\n })}\n \n
\n \n {\n handleClick(\"reset\");\n }}\n >\n Reset\n \n {\n handleClick(\"apply\");\n }}\n >\n Apply\n \n
\n \n
\n \n
\n \n \n
\n \n \n
\n \n {\"Swaps\"}\n \n \n \n
\n \n \n
\n \n \n
\n \n {\"Swaps/Session Time\"}\n \n \n \n
\n \n
\n \n \n
\n \n {\"Faulted\"}\n \n \n \n\n
*/}\n \n );\n}\nexport default function SwappingStationComponent(props) {\n let Urls = window.location.href.toString().split(window.location.host)[1];\n const [headerFilter, setHeaderFilter] = useState(true);\n return (\n <>\n
{row.row?.original?.sites}
\n )\n },\n },\n {\n Header: \"Swap Station\",\n accessor: \"swapStation\",\n minWidth: \"100px\",\n Cell: (row) => {\n return (\n {row.row?.original?.swapStation}
\n )\n },\n },\n // {\n // Header: \"Battery Count\",\n // headerStyle: {textAlign: 'right'},\n // accessor: \"batteries\",\n // Cell: (row) => { \n // return(\n // {row.row?.original?.batteries}
\n // ) },\n // minWidth: \"100px\",\n // },\n {\n Header: \"Status\",\n minWidth: \"100px\",\n accessor: (isActive) => (isActive ? \"Active\" : \"InActive\"),\n Cell: (row) => {\n return (\n <>\n {row.row?.original?.isActive ? (\n \n view(row.value, row.row.original.enterprise)}\n >\n update(row.value, row.row.original.enterprise)}\n >\n { statusActive(data) }}\n assets={\"Zone\"}\n name={row.row.original.zone}\n />\n {/* {row.row.original.isActive ? (\n \n siteStatusHandle(\n row,\n \"active\",\n row.row.original.enterpriseName\n )\n }\n style={{ border: \"none\", margin: \"8px\", cursor: \"pointer\" }}\n >\n \n \n ) : (\n \n siteStatusHandle(\n row,\n \"inactive\",\n row.row.original.enterpriseName\n )\n }\n style={{ border: \"none\", margin: \"8px\", cursor: \"pointer\" }}\n >\n \n // view(row.value, row.row.original.enterprise)\n // }\n >\n \n )} */}\n
\n \n );\n },\n },\n ],\n [zoneHeaderFilterData, setTempSwap]\n );\n\n return (\n \n
\n );\n}\n","\nimport React, { useEffect, useState, useCallback } from \"react\";\nimport { getRequestInAssets as getRequest } from \"services/axiosAssetsBaseClient\";\nimport TableAndSearch from \"../common/TableAndSearch\";\nimport { useHistory, Link } from \"react-router-dom\";\nimport notificationService from \"services/notification.service\";\nimport LocalStorageService from \"services/tokenlocalstorage.service\";\nimport { NotificationManager } from \"react-notifications\";\nimport ConfirmationDialog from \"../common/ConfirmDialog\";\n\n\nvar allZones;\nvar tempSearch;\n\nexport default function Eemmmll(props) {\n const { headerFilter } = props;\n\n const [siteHeaderFilterData, setSiteHeaderFilterData] = useState([]);\n // const [filter, setFilter] = useState(filterInitialValue);\n const [siteData, setSiteData] = useState([]);\n const [siteStatusIcon, setSiteStatusIcon] = useState(false);\n const [siteStatus, setSiteStatus] = useState(true);\n const [message, setMessage] = useState(\"\");\n const [activepageCount, setActivePageCount] = useState(0);\n const [search, setSearch] = useState(\"\");\n const [tempSwap, setTempSwap] = useState([]);\n const [totalCount, setTotalCount] = useState(0);\n\n const paginationCountHanlde = (count) => {\n setActivePageCount(count);\n };\n\n const sitesHeaderFilterHandle = (searchString) => {\n if (\n typeof searchString === \"object\" ||\n typeof searchString === \"undefined\" ||\n (typeof searchString === \"string\" && searchString?.trim().length === 0)\n ) {\n } else {\n localStorage.setItem(\"lastTableSearch\", searchString);\n }\n\n const headerFilterObj = JSON.parse(LocalStorageService.get(\"headerFilter\"));\n\n var query =\n // (headerFilterObj?.enterprise\n // ? \"enterprise=\" + headerFilterObj.enterprise\n // : \"\") +\n (headerFilterObj?.stateId ? \"&stateId=\" + headerFilterObj?.stateId : \"\") +\n (headerFilterObj?.cityId ? \"&cityId=\" + headerFilterObj?.cityId : \"\") +\n (headerFilterObj?.zoneId ? \"&zoneId=\" + headerFilterObj?.zoneId : \"\") +\n (typeof searchString === \"object\" ||\n typeof searchString === \"undefined\" ||\n (typeof searchString === \"string\" && searchString?.trim().length === 0)\n ? \"\"\n : \"&filter=\" + encodeURIComponent(searchString));\n\n query = query ? \"?\" + query : \"\";\n\n try {\n getRequest(\"bss/siteInfo\" + query)\n .then((resp) => {\n if (resp?.data && resp.data?.sites) {\n setSiteHeaderFilterData(resp?.data?.sites);\n // props.assetCount(() => resp?.data?.count);\n props.assetCount(() => resp?.data?.sites.length);\n setTotalCount(resp?.data?.sites.length)\n }\n })\n .catch((e) => {\n console.log(e, \"ERROR\");\n });\n } catch (err) {\n console.log(err);\n }\n };\n\n const getAllZones = useCallback(async (id) => {\n await getRequest(\"zone/getAllZones?pageSize=1000&pageNumber=0\")\n .then((res) => {\n if (res.data != null) {\n allZones = res?.data?.content;\n }\n })\n .catch((err) => {\n console.error(\"Error\", err);\n });\n }, []);\n\n useEffect(() => {\n const headerFilterObj = JSON.parse(LocalStorageService.get(\"headerFilter\"));\n tempSearch = localStorage.getItem(\"lastTableSearch\");\n if (headerFilterObj && Object.keys(headerFilterObj).length > 0) {\n sitesHeaderFilterHandle(tempSearch.trim());\n }\n if (headerFilterObj && !headerFilterObj) {\n headerFilter = false;\n setSiteHeaderFilterData([]);\n sitesHeaderFilterHandle(tempSearch.trim());\n }\n }, [headerFilter]);\n\n useEffect(() => {\n tempSearch = localStorage.getItem(\"lastTableSearch\");\n if (tempSearch === null) {\n tempSearch = localStorage.setItem(\"lastTableSearch\", \"\");\n sitesHeaderFilterHandle();\n } else {\n sitesHeaderFilterHandle(tempSearch.trim());\n }\n // props.assetCount(() => 0);\n // getZoneData();\n window.scrollTo(0, 0);\n }, []);\n\n const history = useHistory();\n\n const viewSiteList = (id, enterpriseName) => {\n history.push(\"/Assets/ViewSite/\" + id + `/view`);\n };\n\n const updateSiteList = (id, enterpriseName) => {\n history.push(\"/Assets/UpdateSite/\" + id );\n };\n\n const statusActive = useCallback(async (data) => {\n if (data.isActive) {\n } else {\n setSiteStatus(true);\n }\n await getRequest(\n `bss/changeStatusSite?isActive=${!data.isActive}&siteId=${\n data.siteId\n }&enterprise=${data.enterpriseName}`\n )\n .then((res) => {\n if (res.data != null) {\n // getSite();\n siteHeaderFilterData.filter((data) => {\n if (data.siteId == res.data.id) {\n data.status = res.data.status;\n data.isActive = res.data.isActive;\n // siteIndex = res.data.id;\n }\n });\n setTempSwap(res.data);\n // sitesHeaderFilterHandle();\n notificationService.showNonBlacklisted(res?.config?.url, res.message);\n }\n })\n .catch((err) => {\n notificationService.showNonBlacklistedError(\n err?.config?.url,\n \"Please try again later.\"\n );\n });\n });\n\n const siteStatusHandle = (rowData) => {\n statusActive(rowData.row.original);\n };\n\n const columns = React.useMemo(\n () => [\n {\n Header: \"Site Name\",\n width: 250,\n accessor: \"siteName\",\n },\n {\n Header: \"Zone Name\",\n width: 250,\n accessor: \"zoneName\",\n },\n {\n Header: \"Site Status\",\n accessor: \"status\",\n width: 250,\n Cell: (row) => {\n return (\n <>\n {row.row.values.status === \"UNDERMAINTENANCE\" ? (\n {row.row?.original?.swapStations ? row.row?.original?.swapStations : 0}
\n ) },\n },\n {\n Header: \"Action\",\n accessor: \"id\",\n disableSortBy: true,\n width: 50,\n // textAlign:\"center\",\n Cell: (row) => {\n var id = row.row.original.siteId\n ? row.row.original.siteId\n : row.row.original.id\n ? row.row.original.id\n : 0;\n var enterprise = row.row.original.enterpriseName\n ? row.row.original.enterpriseName\n : row.row.original.enterprise\n ? row.row.original.enterprise\n : \"\";\n return (\n <>\n \n viewSiteList(id, enterprise)}\n >\n updateSiteList(id, enterprise)}\n style={{ cursor: \"pointer\" }}\n >\n { statusActive(data) }}\n assets={\"Site\"}\n name={row.row.original.siteName}\n />\n {/* {row.row.original.isActive ? (\n siteStatusHandle(row)}\n style={{ border: \"none\", margin: \"8px\" }}\n >\n \n \n ) : (\n siteStatusHandle(row)}\n style={{ border: \"none\", margin: \"8px\", cursor: \"pointer\" }}\n >\n \n \n )} */}\n
\n \n );\n },\n },\n ],\n [siteHeaderFilterData, tempSwap]\n );\n\n return (\n \n
\n );\n}\n//siteData\nEemmmll.inStorybook = true;\n","import {\n Button, Dialog, DialogActions,\n DialogContent, DialogContentText, DialogTitle,\n } from '@mui/material';\n import { useEffect, useState } from 'react';\n const useConfirm = (title, message) => {\n\n \n\n const [ promise, setPromise] = useState(null);\n \n const confirm = () => new Promise((resolve, reject) => {\n // message = bool ? \"Are you sure you want to disabled ?\" : \"Are you sure you want to active ?\"\n setPromise({ resolve });\n });\n \n const handleClose = () => {\n setPromise(null);\n };\n \n const handleConfirm = () => {\n promise?.resolve(true);\n handleClose();\n };\n \n const handleCancel = () => {\n promise?.resolve(false);\n handleClose();\n };\n // You could replace the Dialog with your library's version\n const ConfirmationDialog = () => (\n {message}
\n{message}
\n\n \n Active\n \n
\n ) : (\n\n \n InActive\n \n
\n )\n } */}\n \n );\n },\n },\n {\n Header: \"Action\",\n accessor: \"swapStationId\",\n disableSortBy: true,\n Cell: (row) => {\n return (\n <>\n\n \n viewSwapStation(row.value, row.row.original.enterprise)\n }\n >\n \n updateSwapStation(row.value, row.row.original.enterprise)\n }\n >\n { statusActive(data) }}\n assets={\"Swap Station\"}\n name={row.row.original.swapStationName}\n />\n {/* {row.row.original.isActive ? (\n siteStatusHandle(row, \"active\",row.row.original.enterpriseName)}\n style={{ border: \"none\", margin: \"8px\" }}\n >\n ![]({require(\"assets/eye.png\").default})
\n \n ) : (\n siteStatusHandle(row, \"inactive\",row.row.original.enterpriseName)}\n style={{ border: \"none\", margin: \"8px\" }}\n >\n X\n \n )} */}\n {/* {row.row.original.isActive ? (\n \n siteStatusHandle(\n row,\n \"active\",\n row.row.original.enterprise\n )\n }\n style={{ border: \"none\", margin: \"8px\", cursor: \"pointer\" }}\n >\n \n \n ) : (\n \n siteStatusHandle(\n row,\n \"inactive\",\n row.row.original.enterprise\n )\n }\n style={{ border: \"none\", margin: \"8px\", cursor: \"pointer\" }}\n >\n \n // view(row.value, row.row.original.enterprise)\n // }\n >\n \n )} */}\n
\n \n );\n },\n },\n ],\n [tempSwap, swapStationsData]\n );\n\n return (\n \n \n ) : (\n \n
\n );\n}\n\nSwapStationList.inStorybook = true;\n","import QRCode from 'qrcode.react';\nimport { Component } from 'react';\n\nimport styles from \"./QRCode.module.scss\";\nimport cn from \"classnames\";\nclass QRCodeView extends Component {\n\n\n constructor(props) {\n super(props);\n this.download = this.download.bind(this);\n }\n\n download() {\n const val = this.props.value.replace(/\\s/g, \"\");\n const canvas = document.querySelector('.HpQrcode' + val + ' > canvas');\n this.downloadRef.href = canvas.toDataURL();\n this.downloadRef.download = val + \"-QR.png\";\n }\n render() {\n return (\n <>\n\n \n
\n {this.props.visibility ?\n \n \n
\n :\n \n
\n \n this.download()} ref={(ref) => this.downloadRef = ref}>\n Download\n \n
\n \n {row.row?.original?.enterprise ? (\n row.row?.original?.enterprise\n ) : (\n NA\n )}\n
\n );\n },\n },\n {\n Header: \"Name\",\n accessor: \"name\",\n Cell: (row) => {\n return (\n \n {row.row?.original?.name ? (\n row.row?.original?.name\n ) : (\n NA\n )}\n
\n );\n },\n },\n {\n Header: \"Type\",\n accessor: \"type\",\n Cell: (row) => {\n return (\n \n {row.row?.original?.type ? (\n row.row?.original?.type\n ) : (\n NA\n )}\n
\n );\n },\n },\n {\n Header: \"Description\",\n accessor: \"description\",\n Cell: (row) => {\n return (\n \n {row.row?.original?.description ? (\n row.row?.original?.description\n ) : (\n NA\n )}\n
\n );\n },\n },\n // {\n // Header: \"Status\",\n // accessor: \"isActive\",\n // Cell: (row) => {\n // return (\n // <>\n // {row.row.original.isActive ? (\n // \n view(row.value, row.row.original.enterprise)}\n >\n update(row.value, row.row.original.enterprise)}\n >\n {/* {row.row.original.isActive ? (\n \n siteStatusHandle(\n row,\n \"active\",\n row.row.original.enterpriseName\n )\n }\n style={{ border: \"none\", margin: \"8px\", cursor: \"pointer\" }}\n >\n \n \n ) : (\n \n siteStatusHandle(\n row,\n \"inactive\",\n row.row.original.enterpriseName\n )\n }\n style={{ border: \"none\", margin: \"8px\", cursor: \"pointer\" }}\n >\n \n // view(row.value, row.row.original.enterprise)\n // }\n >\n \n )} */}\n
\n \n );\n },\n },\n ],\n [setTempSwap, tempSwap, zoneHeaderFilterData]\n );\n\n return (\n \n
\n );\n}\n","import React, { useState, useEffect, useCallback } from \"react\";\nimport { getRequestInAssets as getRequestOnEnterprise } from \"services/axiosAssetsBaseClient\";\nimport { getRequest as getRequestOnEnterpriseClient } from \"services/axiosBaseClient\";\nimport TableAndSearch from \"../common/TableAndSearch\";\nimport { useHistory } from \"react-router-dom\";\nimport NotificationManager from \"react-notifications/lib/NotificationManager\";\nimport LocalStorageService from \"services/tokenlocalstorage.service\";\nimport { typeOf } from \"react-is\";\n\nvar tableSearchKey;\nvar tempSearch;\n\nexport default function Asset(props) {\n const { headerFilterParms, headerFilter } = props;\n\n const history = useHistory();\n\n const [zoneData, setZoneData] = useState([]);\n const [siteStatus, setSiteStatus] = useState(true);\n const [specialCharacters, setspecialCharacters] = useState(false);\n const [zoneHeader, setZoneHeader] = useState([headerFilterParms]);\n const [zoneHeaderFilterData, setZoneHeaderFilterData] = useState([]);\n const [activepageCount, setActivePageCount] = useState(0);\n const [tempSwap, setTempSwap] = useState([]);\n const [totalCount, setTotalCount] = useState(0);\n\n const paginationCountHanlde = (count) => {\n setActivePageCount(count);\n };\n\n const zoneHeaderFilterHandle = (searchString) => {\n if (\n typeof searchString === \"object\" ||\n typeof searchString === \"undefined\" ||\n (typeof searchString === \"string\" && searchString?.trim().length === 0)\n ) {\n } else {\n localStorage.setItem(\"lastTableSearch\", searchString);\n }\n\n const headerFilterObj = JSON.parse(LocalStorageService.get(\"queryHeader\"));\n\n console.log(headerFilterObj, \"MAIN fn headerFilterObj\");\n var query =\n (headerFilterObj?.enterprise\n ? \"enterprise=\" + headerFilterObj.enterprise\n : \"\") +\n (typeof searchString === \"object\" ||\n typeof searchString === \"undefined\" ||\n (typeof searchString === \"string\" && searchString?.trim().length === 0)\n ? \"\"\n : \"&name=\" + encodeURIComponent(searchString));\n query = query ? \"?\" + query : \"\";\n\n console.log(query, \"final QUEARTTyy\");\n\n try {\n getRequestOnEnterpriseClient(\"model/get\" + query)\n .then((resp) => {\n // getRequestOnEnterprise(`zone/getZoneInfo?enterprise=${headerFilterParms.enterprise}`).then((resp) => {\n if (resp && resp.data) {\n // const test = resp?.data?.zoneList;\n // setZoneHeaderFilterData(resp?.data?.zoneList);\n props.assetCount(() =>\n resp.data.count ? resp.data.count : resp?.data.length\n );\n // props.assetCount(() => resp?.data?.zoneList.length);\n setTotalCount(resp?.data.length);\n zoneListDataSortHandle(resp?.data);\n tableSearchKey = \"\";\n } else {\n props.assetCount(0);\n zoneListDataSortHandle([]);\n }\n })\n .catch((e) => {\n console.log(e, \"ERROR\");\n props.assetCount(0);\n zoneListDataSortHandle([]);\n });\n } catch (err) {\n console.log(err);\n }\n };\n\n useEffect(() => {\n tempSearch = localStorage.getItem(\"lastTableSearch\");\n setZoneHeaderFilterData([]);\n zoneHeaderFilterHandle(tempSearch.trim());\n }, [headerFilter]);\n\n const zoneListDataSortHandle = (data) => {\n var newZone = [];\n var oldZone = [];\n data.map((zone) => {\n if (zone.commissionedOn == null) {\n oldZone.push(zone);\n } else {\n newZone.push(zone);\n }\n });\n startSortingHandle(newZone, oldZone);\n };\n const startSortingHandle = (newZone, oldZone) => {\n const sortedData = newZone.sort(function (a, b) {\n var dateA = new Date(a.commissionedOn);\n var dateB = new Date(b.commissionedOn);\n return dateB - dateA;\n });\n mergingOldNewZone(sortedData, oldZone);\n };\n const mergingOldNewZone = (sortedData, oldZone) => {\n if (oldZone !== null) {\n for (let i of oldZone) {\n sortedData.push(i);\n }\n }\n\n setZoneHeaderFilterData(sortedData);\n // headerFilter\n // ? setZoneHeaderFilterData(sortedData)\n // : setZoneData(sortedData);\n // headerFilter = false;\n };\n\n useEffect(() => {\n tempSearch = localStorage.getItem(\"lastTableSearch\");\n if (tempSearch === null) {\n tempSearch = localStorage.setItem(\"lastTableSearch\", \"\");\n zoneHeaderFilterHandle();\n } else {\n zoneHeaderFilterHandle(tempSearch.trim());\n }\n\n // setSearchValue(localStorage.getItem(\"lastTableSearch\"));\n }, []);\n\n const view = (id, enterprise) => {\n history.push(\"/Assets/viewModel/\" + id + \"/view\");\n };\n\n const update = (id, enterpriseName) => {\n history.push(\"/Assets/updateModel/\" + id);\n };\n\n const columns = React.useMemo(\n () => [\n {\n Header: \"Enterprise Name\",\n accessor: \"enterprise\",\n },\n {\n Header: \"Name\",\n accessor: \"name\",\n },\n {\n Header: \"Type\",\n accessor: \"type\",\n },\n {\n Header: \"Description\",\n accessor: \"description\",\n },\n // {\n // Header: \"Status\",\n // accessor: \"isActive\",\n // Cell: (row) => {\n // return (\n // <>\n // {row.row.original.isActive ? (\n // \n view(row.value, row.row.original.enterprise)}\n >\n update(row.value, row.row.original.enterprise)}\n >\n {/* {row.row.original.isActive ? (\n \n siteStatusHandle(\n row,\n \"active\",\n row.row.original.enterpriseName\n )\n }\n style={{ border: \"none\", margin: \"8px\", cursor: \"pointer\" }}\n >\n \n \n ) : (\n \n siteStatusHandle(\n row,\n \"inactive\",\n row.row.original.enterpriseName\n )\n }\n style={{ border: \"none\", margin: \"8px\", cursor: \"pointer\" }}\n >\n \n // view(row.value, row.row.original.enterprise)\n // }\n >\n \n )} */}\n
\n \n );\n },\n },\n ],\n [setTempSwap, tempSwap, zoneHeaderFilterData]\n );\n\n return (\n \n
\n );\n}\n","import React, { useEffect, useState, useCallback } from \"react\";\nimport { getRequestInAssets as getRequestOnEnterprise } from \"services/axiosAssetsBaseClient\";\nimport TableAndSearch from \"../common/TableAndSearch\";\nimport { useHistory, Link } from \"react-router-dom\";\nimport LocalStorageService from \"services/tokenlocalstorage.service\";\nimport QRCodeView from '../../components/QRcode/QRCode';\n\nvar tableSearchKey;\nvar tempSearch;\nexport default function VehicleList(props) {\n const { headerFilterParms, headerFilter } = props;\n\n const history = useHistory();\n const [batteryList, setBatteryList] = useState([]);\n const [specialCharacters, setspecialCharacters] = useState(false);\n const [batteryHeaderFilterData, setBatteryHeaderFilterData] = useState([]);\n const [makeSearch, setMakeSearch] = useState([]);\n const [totalCount, setTotalCount] = useState(0);\n\n const VehicleHeaderFilterHandle = (searchString) => {\n if (\n typeof searchString === \"object\" ||\n typeof searchString === \"undefined\" ||\n (typeof searchString === \"string\" && searchString?.trim().length === 0)\n ) {\n } else {\n localStorage.setItem(\"lastTableSearch\", searchString);\n }\n\n const headerFilterObj = JSON.parse(LocalStorageService.get(\"queryHeader\"));\n\n var query =\n (headerFilterObj?.enterprise\n ? \"enterprise=\" + headerFilterObj.enterprise\n : \"\") +\n (headerFilterObj?.stateId ? \"&stateId=\" + headerFilterObj?.stateId : \"\") +\n (headerFilterObj?.cityId ? \"&cityId=\" + headerFilterObj?.cityId : \"\") +\n (headerFilterObj?.zoneId ? \"&zoneId=\" + headerFilterObj?.zoneId : \"\") +\n (typeof searchString === \"object\" ||\n typeof searchString === \"undefined\" ||\n (typeof searchString === \"string\" && searchString?.trim().length === 0)\n ? \"\"\n : \"®No=\" + encodeURIComponent(searchString));\n\n query = query ? \"?\" + query : \"\";\n try {\n getRequestOnEnterprise(\"getAllVehicles\" + query)\n .then((resp) => {\n if (resp?.data && resp.data.length > 0) {\n // let updatedResult = getMakeName(resp?.data, \"false\");\n setBatteryHeaderFilterData(resp?.data);\n props.assetCount(() => resp?.data?.length);\n // batteryListDataSortHandle(resp?.data?.battery);\n setTotalCount(resp?.data.length);\n } else {\n setBatteryHeaderFilterData([]);\n props.assetCount(0);\n }\n })\n .catch((e) => {\n setBatteryHeaderFilterData([]);\n props.assetCount(0);\n console.log(e, \"ERROR\");\n });\n } catch (err) {\n console.log(err);\n }\n };\n\n let makeArray = [];\n const getMakes = useCallback(async (string) => {\n await getRequestOnEnterprise(\"make/getAll?type=VEHICLE\")\n .then((res) => {\n if (res.data != null) {\n makeArray = res.data;\n setMakeSearch(makeArray);\n }\n })\n .catch((err) => {\n console.error(\"Error\", err);\n });\n }, []);\n\n const batteryListDataSortHandle = (data) => {\n var newBattery = [];\n var oldBattery = [];\n data.map((battery) => {\n if (battery.warrantyStartDate == null) {\n oldBattery.push(battery);\n } else {\n newBattery.push(battery);\n }\n });\n startSortingHandle(newBattery, oldBattery);\n };\n const startSortingHandle = (newBattery, oldBattery) => {\n const sortedData = newBattery.sort(function (a, b) {\n var dateA = new Date(a.warrantyStartDate);\n var dateB = new Date(b.warrantyStartDate);\n return dateB - dateA;\n });\n mergingOldNewBattery(sortedData, oldBattery);\n };\n\n const mergingOldNewBattery = (sortedData, oldBattery) => {\n for (let i of oldBattery) {\n sortedData.push(i);\n }\n setBatteryHeaderFilterData(sortedData);\n };\n\n const getMakeName = (data, condition) => {\n return data.filter((val, index) => {\n if (val.makeId !== null) {\n if (val?.makeId !== 0) {\n // data[index][\"makeName\"] =\n // makeArray[\n // makeArray.findIndex((std) => std?.id === val?.makeId)\n // ]?.name;\n if (condition === \"true\") {\n data[index][\"makeName\"] =\n makeSearch[\n makeSearch.findIndex((std) => std?.id === val?.makeId)\n ]?.name;\n } else {\n data[index][\"makeName\"] =\n makeArray[\n makeArray.findIndex((std) => std?.id === val?.makeId)\n ]?.name;\n }\n return data;\n } else {\n data[index][\"makeName\"] = \"\";\n return data;\n }\n } else {\n data[index][\"makeName\"] = \"\";\n return data;\n }\n });\n };\n\n useEffect(() => {\n tempSearch = localStorage.getItem(\"lastTableSearch\");\n if (tempSearch === null) {\n tempSearch = localStorage.setItem(\"lastTableSearch\", \"\");\n VehicleHeaderFilterHandle();\n } else {\n VehicleHeaderFilterHandle(tempSearch.trim());\n }\n }, []);\n\n useEffect(() => {\n tempSearch = localStorage.getItem(\"lastTableSearch\");\n setBatteryHeaderFilterData([]);\n VehicleHeaderFilterHandle(tempSearch.trim());\n getMakes();\n }, [headerFilter]);\n\n const view = (id, enterpriseName) => {\n // + `/${enterpriseName}`\n history.push(\"/Assets/viewVehicle/\" + id + \"/view\");\n };\n\n const update = (id, enterpriseName) => {\n history.push(\"/Assets/updateVehicle/\" + id);\n };\n\n const columns = React.useMemo(\n () => [\n {\n Header: \"Registration Number\",\n accessor: \"regNo\",\n Cell: (row) => {\n return (\n \n {row.row?.original?.regNo ? row.row?.original?.regNo : \"NA\"}\n
\n );\n },\n },\n {\n Header: \"Vehicle Number\",\n accessor: \"vehicleNumber\",\n Cell: (row) => {\n return (\n \n {row.row?.original?.vehicleNumber\n ? row.row?.original?.vehicleNumber\n : \"NA\"}\n
\n );\n },\n },\n {\n Header: \"Driver Name\",\n accessor: \"driverName\",\n Cell: (row) => {\n return (\n \n {row.row?.original?.driverName\n ? row.row?.original?.driverName\n : \"NA\"}\n
\n );\n },\n },\n {\n Header: \"Driver Number\",\n accessor: \"driverNumber\",\n Cell: (row) => {\n return (\n \n {row.row?.original?.driverNumber\n ? row.row?.original?.driverNumber\n : \"NA\"}\n
\n );\n },\n },\n {\n Header: \"Site Name\",\n accessor: \"siteName\",\n Cell: (row) => {\n return (\n \n {row.row?.original?.shortSiteName\n ? row.row?.original?.shortSiteName\n : row.row?.original?.siteName\n ? row.row?.original?.siteName\n : \"NA\"}\n
\n );\n },\n },\n {\n Header: \"Type\",\n accessor: \"vehicleType\",\n Cell: (row) => {\n return (\n \n {row.row?.original?.vehicleType\n ? row.row?.original?.vehicleType\n : \"NA\"}\n
\n );\n },\n },\n {\n Header: \"manufacturer\",\n accessor: \"makeName\",\n Cell: (row) => {\n return {row.value ? row.value : \"NA\"}
;\n },\n },\n {\n Header: \"Model\",\n accessor: \"modelName\",\n Cell: (row) => {\n return {row.value ? row.value : \"NA\"}
;\n },\n },\n {\n Header: \"QR Code\",\n accessor: \"\",\n Cell: (row) => {\n return (\n <>\n \n view(cell.value, cell.row.original.enterprise)}\n >\n \n update(cell.value, cell.row.original.enterprise)\n }\n >\n
\n \n );\n },\n },\n ],\n [batteryHeaderFilterData]\n );\n return (\n \n
\n );\n}\n\nVehicleList.inStorybook = true;\n","\nimport React, { useEffect, useState, useCallback } from \"react\";\nimport { getRequestInAssets as getRequestOnEnterprise } from \"services/axiosAssetsBaseClient\";\nimport TableAndSearch from \"../common/TableAndSearch\";\nimport { useHistory } from \"react-router-dom\";\nimport LocalStorageService from \"services/tokenlocalstorage.service\";\n\nvar tableSearchKey;\nvar tempSearch;\n\nexport default function BatteryList(props) {\n const { headerFilter } = props;\n\n const history = useHistory();\n\n const [batteryHeaderFilterData, setBatteryHeaderFilterData] = useState([]);\n const [makeSearch, setMakeSearch] = useState([]);\n const [search, setSearch] = useState(\"\");\n const [totalCount, setTotalCount] = useState(0);\n\n const batteryHeaderFilterHandle = (searchString) => {\n if (\n typeof searchString === \"object\" ||\n typeof searchString === \"undefined\" ||\n (typeof searchString === \"string\" && searchString?.trim().length === 0)\n ) {\n } else {\n localStorage.setItem(\"lastTableSearch\", searchString);\n }\n\n const headerFilterObj = JSON.parse(LocalStorageService.get(\"headerFilter\"));\n var query =\n // (headerFilterObj?.enterprise\n // ? \"enterprise=\" + headerFilterObj.enterprise\n // : \"\") +\n (headerFilterObj?.stateId ? \"&stateId=\" + headerFilterObj?.stateId : \"\") +\n (headerFilterObj?.cityId ? \"&cityId=\" + headerFilterObj?.cityId : \"\") +\n // (headerFilterObj?.zoneId ? \"&zoneId=\" + headerFilterObj?.zoneId : \"\") +\n (typeof searchString === \"object\" ||\n typeof searchString === \"undefined\" ||\n (typeof searchString === \"string\" && searchString?.trim().length === 0)\n ? \"\"\n : \"&filter=\" + encodeURIComponent(searchString));\n\n query = query ? \"?\" + query : \"\";\n\n try {\n getRequestOnEnterprise(\"bss/getAllBatteryDetails\" + query)\n .then((res) => {\n if (res && res?.data && res?.data?.battery) {\n setBatteryHeaderFilterData(res?.data?.battery);\n props.assetCount(() => res?.data?.battery.length);\n setTotalCount(res?.data?.batteryCount);\n }\n })\n .catch((e) => {\n console.log(e, \"ERROR\");\n });\n } catch (err) {\n console.log(err);\n }\n };\n\n useEffect(() => {\n const headerFilterObj = JSON.parse(LocalStorageService.get(\"headerFilter\"));\n tempSearch = localStorage.getItem(\"lastTableSearch\");\n if (headerFilterObj && Object.keys(headerFilterObj).length > 0) {\n batteryHeaderFilterHandle(tempSearch.trim());\n }\n if (headerFilterObj && !headerFilterObj) {\n headerFilter = false;\n setBatteryHeaderFilterData([]);\n batteryHeaderFilterHandle(tempSearch.trim());\n // searchingByName();\n }\n }, [headerFilter]);\n\n useEffect(() => {\n tempSearch = localStorage.getItem(\"lastTableSearch\");\n if (tempSearch === null) {\n tempSearch = localStorage.setItem(\"lastTableSearch\", \"\");\n batteryHeaderFilterHandle();\n } else {\n batteryHeaderFilterHandle(tempSearch.trim());\n }\n window.scrollTo(0, 0);\n }, []);\n\n const view = (id, enterpriseName) => {\n // + `/${enterpriseName}`\n history.push(\"/Assets/ViewBattery/\" + id + \"/view\" );\n };\n\n const update = (id, enterpriseName) => {\n history.push(\"/Assets/UpdateBattery/\" + id );\n };\n\n const siteStatusHandle = (cellData, status, enterpriseName) => {\n // statusActive(cellData.cell.original,enterpriseName)\n };\n\n const columns = React.useMemo(\n () => [\n {\n Header: \"Battery ID\",\n accessor: \"batterySerialNumber\",\n },\n {\n Header: \"Enterprise Name\",\n accessor: \"enterprise\",\n },\n {\n Header: \"Make\",\n accessor: \"make\",\n },\n {\n Header: \"Model\",\n accessor: \"model\",\n },\n {\n Header: \"Status\",\n accessor: \"status\",\n Cell: (row) => {\n return (\n <>\n {row?.row?.original?.status == \"COMMISSIONED\" ? (\n \n // \n\n //
\n // \n // );\n },\n },\n {\n Header: \" Date\",\n accessor: \"warrantyStartDate\",\n Cell: (row) => {\n const dateObject = new Date(row.value);\n const day = dateObject.getDate();\n const month = dateObject.getMonth() + 1; \n const year = dateObject.getFullYear();\n const formattedDay = day < 10 ? `0${day}` : day;\n const formattedMonth = month < 10 ? `0${month}` : month;\n const formattedDate = `${formattedDay}-${formattedMonth}-${year}`;\n return {formattedDate};\n },\n },\n {\n Header: \"Action\",\n accessor: \"id\",\n disableSortBy: true,\n Cell: (cell) => {\n return (\n <>\n \n view(cell.value, cell.row.original.enterprise)}\n >\n \n update(cell.value, cell.row.original.enterprise)\n }\n >\n {/* {cell.row.original.isActive ? (\n \n siteStatusHandle(\n cell,\n \"active\",\n cell.row.original.enterpriseName\n )\n }\n style={{ border: \"none\", margin: \"8px\", cursor: \"pointer\" }}\n >\n ![]({require(\"assets/active.png\").default})
\n \n ) : (\n \n siteStatusHandle(\n cell,\n \"inactive\",\n cell.row.original.enterpriseName\n )\n }\n style={{ border: \"none\", margin: \"8px\", cursor: \"pointer\" }}\n >\n \n // view(row.value, row.row.original.enterprise)\n // }\n >\n \n )} */}\n
\n \n );\n },\n },\n ],\n [batteryHeaderFilterData]\n );\n return (\n \n \n ) : (\n \n
\n );\n}\n\nBatteryList.inStorybook = true;\n","import React, { useState, useEffect, useCallback } from \"react\";\nimport cn from \"classnames\";\nimport Zone from \"../../components/assets/ZoneComponent\";\nimport Site from \"../../components/assets/SiteList\";\nimport SwapStation from \"../../components/assets/SwapStationList\";\nimport MakersList from \"../../components/assets/MakersList\";\nimport ModelList from \"../../components/assets/ModelsList\";\nimport VehicleList from \"../../components/assets/VehicleList\";\nimport Battery from \"../../components/assets/BatteryList\";\nimport styles from \"./Asset.module.scss\";\nimport { Link, useHistory, useLocation } from \"react-router-dom\";\n\nimport Master from \"../Master\";\n\nvar tempTigger;\nvar tabTemp = \"inactive\";\n\nfunction AssetComponent(props) {\n const history = useHistory();\n\n const [table, setTable] = useState(\n props.location?.state?.table ? props.location.state.table : 0\n );\n\n const [assetCount, setAssetCount] = useState(0);\n\n useEffect(() => {\n tabTemp = \"inactive\";\n tempTigger = !props.history?.location?.state?.compomentRenderType\n ? \"init\"\n : props.history?.location?.state?.compomentRenderType === \"amhitted\"\n ? \"amhitted\"\n : props.history?.location?.state?.compomentRenderType === \"view\"\n ? \"view\"\n : \"init\";\n localStorage.setItem(\"activeTabCount\", table == 0 ? \"zoneAsset\" : \"other\");\n }, [\n history?.location?.state?.compomentRenderType ||\n props.history?.location?.state?.compomentRenderType,\n ]);\n\n return (\n <>\n \n {\n setTable(0);\n tabTemp = \"active\";\n localStorage.setItem(\"activeTabCount\", \"zoneAsset\");\n localStorage.setItem(\"lastTableSearch\", \"\");\n }}\n style={{ cursor: \"pointer\" }}\n >\n {\"Zones\"}\n \n
\n \n \n {\n setTable(1);\n tabTemp = \"active\";\n localStorage.setItem(\"activeTabCount\", \"otherAssets\");\n localStorage.setItem(\"lastTableSearch\", \"\");\n }}\n style={{ cursor: \"pointer\" }}\n >\n {\"Sites\"}\n \n
\n \n {/* */}\n \n {\n setTable(2);\n tabTemp = \"active\";\n localStorage.setItem(\"activeTabCount\", \"otherAssets\");\n localStorage.setItem(\"lastTableSearch\", \"\");\n }}\n style={{ cursor: \"pointer\" }}\n >\n {\"Swap Stations\"}\n \n
\n {/* */}\n \n\n \n {\n setTable(3);\n tabTemp = \"active\";\n localStorage.setItem(\"activeTabCount\", \"otherAssetsBattery\");\n localStorage.setItem(\"lastTableSearch\", \"\");\n }}\n style={{ cursor: \"pointer\" }}\n >\n {\"Batteries\"}\n \n
\n \n \n {\n setTable(4);\n tabTemp = \"active\";\n localStorage.setItem(\"activeTabCount\", \"zoneAsset\");\n localStorage.setItem(\"lastTableSearch\", \"\");\n }}\n style={{ cursor: \"pointer\" }}\n >\n {\"Manufacturer\"}\n \n
\n \n \n {\n setTable(5);\n tabTemp = \"active\";\n localStorage.setItem(\"activeTabCount\", \"zoneAsset\");\n localStorage.setItem(\"lastTableSearch\", \"\");\n }}\n style={{ cursor: \"pointer\" }}\n >\n {\"Model\"}\n \n
\n \n \n {\n setTable(6);\n tabTemp = \"active\";\n localStorage.setItem(\"activeTabCount\", \"zoneAsset\");\n localStorage.setItem(\"lastTableSearch\", \"\");\n }}\n >\n {\"Vehicles\"}\n \n
\n \n\n \n \n
\n \n \n \n \n \n
\n \n \n \n {\"Total Count\"}\n \n \n {assetCount}\n \n
\n \n \n \n \n\n \n \n \n \n \n \n
\n \n \n\n \n\n \n {\"Swapping\"}\n
\n\n\n
\n \n \n\n \n
\n \n \n \n
\n \n <>\n
\n \n \n {\"\"}\n
\n \n \n {\"50\"}\n
\n \n
\n\n \n {\"Total Count\"}\n
\n\n
\n )}\n \n \n\n \n
\n\n \n\n \n
\n \n {\"Filters\"}\n
\n {open && (\n \n \n
\n \n \n \n \n \n \n \n \n \n \n
\n \n \n \n {sitesList.map((obj) => {\n return ;\n })}\n \n
\n \n \n \n {chargerList.map((obj) => {\n return ;\n })}\n \n
\n \n {\n handleClick(\"reset\");\n }}\n >\n Reset\n \n {\n handleClick(\"apply\");\n }}\n >\n Apply\n \n
\n \n
\n\n \n
\n \n \n
\n \n \n
\n \n {\"Swaps\"}\n \n \n \n
\n \n \n
\n \n \n
\n \n {\"Swaps/Session Time\"}\n \n \n \n
\n \n
\n \n \n \n {\"Fault\"}\n
\n \n
{row.row?.original?.energyDispatch? Number(row.row?.original?.energyDispatch).toFixed(2) : 0}
;\n },\n },\n {\n Header: \"Revenue (₹)\",\n accessor: \"revenue\",\n },\n {\n Header: \"Swap Time\",\n accessor: \"swapDateTime\",\n },\n {\n Header: \"Battery In\",\n accessor: \"inBatterySerial\",\n },\n {\n Header: \"Slot in\",\n accessor: \"inSlot\",\n },\n {\n Header: \"Battery Out\",\n accessor: \"outBatterySerial\",\n },\n {\n Header: \"Slot Out\",\n accessor: \"outSlot\",\n },\n {\n Header: \"Status\",\n accessor: \"status\",\n },\n {\n Header: \"Cause of Failure\",\n accessor: \"reasonOfFailure\",\n },\n ]);\n\n return (\n <>\n \n {\"Swapping\"}\n
\n\n\n \n {\"\"}\n
\n \n \n \n\n \n
\n \n \n \n
\n \n <>\n
\n \n \n \n {totalSwapStationCount}\n
\n \n
\n\n \n {\"Total Count\"}\n
\n\n
\n )}\n \n \n\n \n
\n\n \n\n \n
\n \n {\"Filters\"}\n
\n {open && (\n \n \n
\n \n \n \n \n \n \n \n \n \n \n
\n \n \n \n {sitesList.map((obj) => {\n return ;\n })}\n \n
\n \n \n \n {chargerList.map((obj) => {\n return ;\n })}\n \n
\n \n {\n handleClick(\"reset\");\n }}\n >\n Reset\n \n {\n handleClick(\"apply\");\n }}\n >\n Apply\n \n
\n \n
\n\n \n
\n \n \n
\n \n \n {/*
\n */}\n {\"Recent\"}\n */}\n \n \n
\n \n \n
\n \n \n {/*
\n */}\n {\"Reserved\"}\n */}\n \n \n
\n \n
\n \n \n {/*
\n */}\n {\"Fault\"}\n \n */}\n \n \n {id ? (\n
\n {/* tab, setTab */}\n\n {\n setTab(1);\n }}\n >\n {\"Swapping Details\"}\n \n \n {\n setTab(2);\n }}\n >\n {\"Slot Details\"}\n \n \n\n \n
\n ) : (\n \n )}\n\n {tab === 1 || !id ? (\n \n \n {totalFaultPie}\n \n {\n setEchartInstance(instance);\n }}\n onEvents={{\n legendselectchanged: action,\n }}\n />\n
\n );\n}\n\nexport default EnergyComponent;\n","\nimport { React } from \"react\";\nimport ReactECharts from \"echarts-for-react\"; // or var ReactECharts = require('echarts-for-react');\n\n// Import the echarts core module, which provides the necessary interfaces for using echarts.\nimport * as echarts from \"echarts/core\";\n\n// Import charts, all with Chart suffix\nimport {\n // LineChart,\n // BarChart,\n // PieChart,\n // ScatterChart,\n // RadarChart,\n // MapChart,\n // TreeChart,\n // TreemapChart,\n // GraphChart,\n GaugeChart,\n // FunnelChart,\n // ParallelChart,\n // SankeyChart,\n // BoxplotChart,\n // CandlestickChart,\n // EffectScatterChart,\n // LinesChart,\n // HeatmapChart,\n // PictorialBarChart,\n // ThemeRiverChart,\n // SunburstChart,\n // CustomChart,\n} from \"echarts/charts\";\n// import components, all suffixed with Component\nimport {\n // GridSimpleComponent,\n GridComponent,\n // PolarComponent,\n // RadarComponent,\n // GeoComponent,\n // SingleAxisComponent,\n // ParallelComponent,\n // CalendarComponent,\n // GraphicComponent,\n // ToolboxComponent,\n TooltipComponent,\n // AxisPointerComponent,\n // BrushComponent,\n TitleComponent,\n // TimelineComponent,\n // MarkPointComponent,\n // MarkLineComponent,\n // MarkAreaComponent,\n // LegendComponent,\n // LegendScrollComponent,\n // LegendPlainComponent,\n // DataZoomComponent,\n // DataZoomInsideComponent,\n // DataZoomSliderComponent,\n // VisualMapComponent,\n // VisualMapContinuousComponent,\n // VisualMapPiecewiseComponent,\n // AriaComponent,\n // TransformComponent,\n // DatasetComponent,\n} from \"echarts/components\";\n// Import renderer, note that introducing the CanvasRenderer or SVGRenderer is a required step\nimport {\n CanvasRenderer,\n // SVGRenderer,\n} from \"echarts/renderers\";\n\nconst Donut = (props) => {\n // Register the required components\n echarts.registerTheme(\"my_theme\", {\n backgroundColor: \"#f4cccc\",\n });\n\n // let colorsArray = props.data.map(function (obj) {\n // return obj.color;\n // });\n // let colorsArray = ['#73C0DE', '#EE6666'];\n let colorsArray = [\"#087A3E\", \"#FCC644\", \"#E3324C\"];\n\n echarts.use([\n TitleComponent,\n TooltipComponent,\n GridComponent,\n GaugeChart,\n CanvasRenderer,\n ]);\n const options = () => ({\n tooltip: {\n trigger: \"item\",\n },\n series: [\n {\n //name: props.siteName?props.siteName:\"Site\",\n type: 'pie',\n radius: [0, '50%'],\n label: {\n fontSize: 14,\n color: \"black\",\n fontWeight: \"bold\",\n formatter: \"{c}\",\n position: \"center\",\n show: true,\n borderRadius: \"100%\",\n padding: [4, 4, 4, 4],\n fontFamily: \"JioType\",\n rich: {\n a: {\n color: \"red\",\n lineHeight: 10,\n fontSize: 12,\n },\n x: {\n fontSize: \"1em\",\n fontFamily: \"Montserrat\",\n borderColor: \"#449933\",\n // borderRadius: 4,\n fontweight: \"bold\",\n fontStyle: \"bold\",\n },\n },\n },\n labelLine: {\n show: false\n },\n color: [\"#FFFFFF\"],\n emphasis: {\n disabled: true,\n },\n data: [\n { value: props.idle+props.fault+props.charging, name: 'Total' }\n ]\n },\n {\n //name: props.siteName?props.siteName:\"Site\",\n type: \"pie\",\n radius: [\"50%\", \"90%\"],\n avoidLabelOverlap: true,\n label: {\n show: false, \n },\n labelLine: {\n show: false,\n },\n color: colorsArray,\n data1: props.data,\n data: [\n { value: props.idle, name: \"Available\" },\n { value: props.charging, name: \"Charging\" },\n { value: props.fault, name: \"Fault\" },\n ],\n },\n ],\n });\n\n return (\n \n {userRole.toLowerCase() === \"admin\"\n ? \"Admin Dashboard\"\n : \"Operator Dashboard\"}\n
\n {/* */}\n\n\n
\n \n\n \n \n
\n \n
\n \n \n
\n \n \n \n
\n \n \n
\n \n \n \n
\n \n \n
\n \n \n\n \n
\n \n\n
\n {\"Filters\"}\n
\n \n\n \n
\n \n \n\n \n
\n \n {open && (\n
\n )}\n \n \n
\n \n \n \n \n \n \n \n \n \n \n
\n\n \n \n \n {sitesList.map((obj) => {\n return ;\n })}\n \n
\n\n \n \n \n {chargerList.map((obj) => {\n return ;\n })}\n \n
\n\n \n handleClick(\"reset\")}\n >\n Reset\n \n handleClick(\"apply\")}\n >\n Apply\n \n
\n \n
\n \n \n \n
\n \n \n {\"Energy Graph\"}\n \n {/*
\n */}\n
*/}\n \n \n
\n \n \n \n
\n \n {\"Swapping Graph\"}\n
\n {/* */}\n
*/}\n \n \n
\n \n \n \n
\n \n {\"Faults\"}\n
\n {\n faultGraphLoading ? <>\n :\n\n \n
\n \n {userRole.toLowerCase() === \"admin\"\n ? \"Region Status\"\n : \"Battery Count and Status\"}\n \n {!loading && (\n
\n \n \n )}\n \n
\n\n \n
\n\n \n
\n {userRole.toLowerCase() === \"admin\" ? \"Available\" : \"Charged\"}\n \n
\n {\"Charging\"}\n \n
\n {\"Fault\"}\n \n
\n\n \n
\n \n {\"Profile\"}\n
\n\n\n \n \n
\n \n \n
*/}\n
\n \n \n {\"Role\"}\n
\n {/* */}\n
\n
*/}\n
\n \n \n {\"Contact Number\"}\n
\n {/* */}\n
{formErrors.phoneNumber}
\n \n \n\n\n
\n \n \n
*/}\n
\n \n \n {\"Email\"}\n
\n {/* */}\n
\n
*/}\n
\n \n \n {\"Address\"}\n
\n {/* */}\n
{formErrors.addressLine1}
\n \n \n\n\n
\n \n\n \n\n \n
*/}\n {/* 0\n ? formValues?.stateId\n : -1\n }\n onChange={handleChange}\n // disabled={onlyView}\n required\n disabled={onlyView}\n >\n \n\n {stateList.map((obj) => {\n return ;\n })}\n \n
\n \n \n {\"State\"}\n
\n {/* */}\n {/*
{formErrors.state}
\n\n \n
\n \n \n\n \n \n \n {\"Back\"}\n \n
\n \n \n \n {\"Update\"}\n \n
\n \n \n \n \n \n \n \n \n );\n}\n\nexport default function UserProfile(props) {\n return (\n <>\n {row.row?.original?.assetType? row.row?.original?.assetType : 'NA'}
\n ) },\n },\n {\n Header: \"Alert Type\",\n accessor: \"alertType\",\n Cell: (row) => {\n return (\n <>\n {row.row.original.alertType === \"Fault\" ? (\n // row?.alertType ==='Alerts'\n \n Fault\n
\n ) : row.row.original.alertType === \"Temperature\" ? (\n\n Temperature\n
\n ) : // row?.alertTypes=== 'Upcomming'\n row.row.original.alertType === \"Upcoming Swapping\" ? (\n\n Upcoming\n
\n ) : row.row.original.alertType === \"Warn\" ? (\n\n Warn\n
\n ) : (\n\n Error\n
\n )}\n \n );\n },\n },\n {\n Header: \"Swapping Station Name\",\n accessor: \"swappingStationName\",\n Cell: (row) => { \n return(\n{row.row?.original?.swappingStationName? row.row?.original?.swappingStationName : 'NA'}
\n ) },\n },\n {\n Header: \"Slot Name\",\n accessor: \"slotName\",\n Cell: (row) => { \n return(\n {row.row?.original?.slotName? row.row?.original?.slotName : 'NA'}
\n ) },\n },\n {\n Header: \"Battery Serial Number\",\n accessor: \"batterySerialNumber\",\n Cell: (row) => { \n return(\n {row.row?.original?.batterySerialNumber? row.row?.original?.batterySerialNumber : NA}
\n ) },\n },\n {\n Header: \"Zone Name\",\n accessor: \"zoneName\",\n Cell: (row) => { \n return(\n {row.row?.original?.zoneName? row.row?.original?.zoneName : 'NA'}
\n ) },\n },\n {\n Header: \"Site Name\",\n accessor: \"siteName\",\n Cell: (row) => { \n return(\n {row.row?.original?.siteName? row.row?.original?.siteName : 'NA'}
\n ) },\n },\n {\n Header: \"Description\",\n accessor: \"description\",\n Cell: (row) => {\n return (\n <>\n \n {row.row?.original?.description? row.row.original.description : 'NA'}\n
\n \n Active\n
\n ) : (\n \"\"\n )}\n\n {row.row.original.status === \"false\" ? (\n\n Inactive\n
\n ) : (\n \"\"\n )}\n \n );\n },\n },\n {\n Header: \"Timestamp\",\n accessor: \"timestamp\",\n Cell: (row) => { \n return(\n{row.row?.original?.timestamp? row.row?.original?.timestamp : 'NA'}
\n ) },\n },\n ]);\n\n const checkNumber = (obj) => {\n if (obj && typeof parseInt(obj) === \"number\") {\n return obj;\n } else {\n return 0;\n }\n };\n\n alertData?.alertList?.map((item) => {\n swappedSessionData.push({\n id: item?.id,\n assetType: item?.assetType,\n alertType: item?.alertType,\n zoneName: item?.zoneName,\n slotName: item?.slotName,\n swappingStationName: item?.swappingStationName,\n batterySerialNumber: item?.batterySerialNumber,\n siteName: item?.siteName,\n description: item?.description,\n status: item?.status,\n timestamp: item?.timestamp,\n });\n });\n\n return (\n <>\n \n {\"Alerts\"}\n
\n\n
\n\n \n
\n \n
\n\n \n
\n \n ![\"Rectangle]({require(\"assets/bell.png\").default}\n)
\n
\n\n \n \n
\n {\"Total Alerts\"}
\n \n {checkNumber(count.alerts)}\n
\n \n
\n\n \n
\n \n ![\"Rectangle]({require(\"assets/error.png\").default}\n)
\n
\n\n \n \n
\n {\"Faults\"}
\n \n {checkNumber(count.faults)}\n
\n \n
\n\n \n
\n \n ![\"Rectangle]({require(\"assets/temperature.png\").default}\n)
\n
\n\n \n \n
\n {\"Temperature\"}
\n \n {checkNumber(count.temperature)}\n
\n \n
\n \n
\n \n ![\"Rectangle]({require(\"assets/charging.png\").default}\n)
\n
\n\n \n \n
\n \n {\"Upcoming Swapping\"}\n
\n \n {checkNumber(count.upcomingSwaps)}\n
\n \n
\n \n \n\n {/* \n
\n \n \n \n
\n \n <>\n
\n \n \n \n {\"\"}\n
\n \n
\n\n \n {\"Total Count\"}\n
\n\n {swapStationCount}\n
\n \n {row.row.original.address.length > 30 ? row.row.original.address.slice(0, 30) + \"...\" : row.row.original.address}\n
\n \n {userRole.toLowerCase() === \"admin\" ? \"Tracking\" : \"Tracking\"}\n
\n\n \n {!loading && noRecord && (
\n \n\n \n
\n \n
\n \n
\n \n\n \n \n
)}\n\n {!loading && !noRecord && (\n \n No Data Found\n
\n\n
\n \n \n
\n \n
\n \n \n \n
\n {\"Battery Live Tracking\"}
\n{totalHours}HR {totalMin}MIN
\n \n{totalMiles} Miles
\n\n
\n
\n \n \n \n );\n }\n return (\n\n <>\n \n {\"Price\"}\n
\n\n{row.row?.original?.price? Number(row.row?.original?.price).toFixed(2) : 0}
;\n },\n },\n {\n Header: \"Status\",\n // accessor: \"status\",\n width: \"15%\",\n Cell: (res) => {\n return (\n <>{res?.row.original?.status ? (\n \n \n Active\n \n
\n ) : (\n\n \n InActive\n \n
\n )}\n\n \n );\n },\n },\n ]);\n\n var searchByKey = () => { };\n\n return (\n <>\n\n {\"Price List\"}\n
\n\n\n
\n \n\n \n
\n\n \n \n
\n \n
\n\n \n\n \n {/* */}\n
\n */}\n \n {\"Total Count\"}\n\n
\n \n {priceCountData}\n
\n
\n
\n \n \n
\n \n \n
\n \n \n {\"Add Price\"}\n
\n \n
\n\n {row.row?.original?.energyexchanged? row.row?.original?.energyexchanged : 0}
\n ) },\n },\n {\n Header: \"Inv Amt(₹)\",\n accessor: \"invamount\",\n },\n {\n Header: \"Swap Time\",\n accessor: \"swaptime\",\n },\n {\n Header: \"Swap Site\",\n accessor: \"swapsite\",\n },\n {\n Header: \"Action\",\n accessor: \"action\",\n Cell: (row) => {\n return (\n <>\n {/* */}\n \n
\n \n );\n}\n\nexport default function Invoice(props) {\n const [headerFilter, setHeaderFilter] = useState(true);\n return (\n <>\n \n
\n \n {\"Invoice List\"}\n
\n{row.row?.original?.taxrate ? row.row?.original?.taxrate + \"%\" : NA}
\n )\n },\n },\n {\n Header: \"Tax Amount(in INR)\",\n accessor: \"taxamount\",\n },\n ],\n []\n );\n\n var data = [];\n\n invoiceDetails?.taxCalcDetail?.map((item, i) => {\n data.push({\n serialNumber: i + 1,\n taxname: item?.taxName,\n taxrate: item?.taxPercentage ? Number(item?.taxPercentage).toFixed(2) : 0,\n taxamount: item?.taxAmount ? Number(item?.taxAmount).toFixed(2) : 0,\n });\n });\n\n data.push({\n serialNumber: \"Total Tax Amount\",\n taxamount: invoiceDetails?.totalTaxAmount,\n });\n\n return (\n <>\n \n
\n \n \n \n \n {/* //------- */}\n\n \n
\n \n {\"Invoice\"}\n
\n\n\n
\n \n
\n\n \n \n
\n \n \n {\"VIN*\"}\n
\n {formErrors?.vin}
\n\n
\n \n \n {\"Driver Name*\"}\n
\n {formErrors?.driverName}
\n\n
\n \n \n \n \n {/* /// */}\n\n \n
\n \n
\n\n \n \n
\n \n \n {\"Current Charge\"}\n
\n \n
\n \n \n \n \n {\"Current Charge\"}\n
\n \n
\n\n \n \n
\n \n \n {\"Existing Battery B\"}\n
\n \n
\n \n \n \n \n {\"Exchanged Battery B\"}\n
\n \n
\n\n \n \n
\n \n \n {\"Current Charge\"}\n
\n \n
\n \n \n \n {id != undefined ? (\n \"\"\n ) : (\n \n \n {\"Current Charge\"}\n
\n \n
\n \n \n )}\n \n \n {/* //------- */}\n\n {showInvoice ? (\n \n
\n \n \n \n \n \n {\"Cancel\"}\n \n
\n \n \n \n \n {\"calculate\"}\n \n
\n \n
\n \n \n \n \n ) : (\n \"\"\n )}\n\n {showInvoice ? (\n \n
\n\n \n \n
\n \n \n \n \n {id != undefined\n ? (Number(formValues?.totalEnergyExchanges).toFixed(2) + \" kWh\")\n : (Number(invoiceDetails?.totalEnergyExchanged).toFixed(2)) + \" kWh\"}\n
\n \n
\n\n \n \n
\n \n \n {\"Total Energy Exchanged (in INR)\"}\n
\n \n
\n \n\n \n \n \n {id != undefined\n ? Number(formValues?.totalEnergyExchangeINR).toFixed(2)\n : Number(invoiceDetails?.totalEnergyPrice).toFixed(2)}\n
\n \n
\n \n\n \n \n \n {\"Mode of Payment\"}\n
\n \n
\n \n \n \n \n \n \n ) : (\n \"\"\n )}\n {/* -- */}\n\n {showInvoice ? (\n \n \n {modeOfPayment}\n
\n \n
\n \n
\n {/*
\n \n {\"Tax Details\"}\n
\n\n {/*
*/}\n {/*
*/}\n */}\n {/*
*/}\n {/* */}\n {/* */}\n {/* */}\n \n
\n \n {/* */}\n {/*
*/}\n {/* \n
\n \n
\n \n \n \n\n {/* //------- */}\n \n \n ) : (\n \"\"\n )}\n \n {showInvoice ? (\n \n \n {\"Remarks\"}\n
\n\n {view != undefined ?\n {formValues?.remark}
:\n <>{formErrors.remark}
\n \n }\n\n {/* */}\n \n \n \n {\"Cancel\"}\n \n
\n \n \n \n {!updateView ? (\n \n \n \n {action}\n \n
\n \n ) : (\n \"\"\n )}\n \n ) : (\n \"\"\n )}\n \n \n );\n}\n\nexport default function AddInvoice(props) {\n return (\n <>\n | {column.render('Header')} | \n // ))}\n //
|---|
| {cell.render('Cell')} | \n // })}\n //
\n
\n \n \n \n \n {/* //------- */}\n\n \n
\n \n {\"Invoice\"}\n
\n\n\n
\n \n
\n\n \n \n
\n \n \n {\"VIN\"}\n
\n \n
\n \n \n {\"Driver Name\"}\n
\n \n
\n \n \n \n \n {/* /// */}\n\n \n
\n \n
\n\n \n \n
\n \n \n {\"Current Change\"}\n
\n \n
\n \n \n \n \n {\"Current Change\"}\n
\n \n
\n\n \n \n
\n \n \n {\"Existing BAttery B\"}\n
\n \n
\n \n \n \n \n {\"Exchanged Battery B\"}\n
\n \n
\n\n \n \n
\n \n \n {\"Current Changed\"}\n
\n \n
\n \n \n \n \n \n \n {/* //------- */}\n \n \n {\"Current Changed\"}\n
\n \n
\n \n
\n\n \n \n
\n \n \n {\"Current Changed\"}\n
\n \n
\n \n \n \n \n \n \n \n \n {\"Current Changed\"}\n
\n \n
\n\n \n \n
\n \n \n \n \n {\"100KWH\"}\n
\n \n
\n\n \n \n
\n \n \n {\"Total Energy Exchanged(in INR)\"}\n
\n \n
\n \n\n \n \n \n {\"3000 INR\"}\n
\n \n
\n \n\n \n \n \n {\"Mode of Payment\"}\n
\n \n
\n \n \n \n \n \n \n\n {/* -- */}\n\n \n \n {\"Wallet\"}\n
\n \n
\n\n \n \n
\n {/*
\n \n {\"Tax Details\"}\n
\n\n {/*
*/}\n {/*
*/}\n */}\n {/*
*/}\n {/* */}\n {/* */}\n {/* */}\n
\n {/* */}\n {/*
*/}\n {/* \n
\n \n \n {\"3150\"}\n
\n \n \n \n {\"Total Amount To Pay(in INR)\"}\n
\n \n \n \n {\"Remarks\"}\n
\n \n
\n {/* \n \n \n
\n \n {\"Cancel\"}\n
\n\n \n
\n */}\n \n \n\n {/* //------- */}\n \n \n \n \n );\n}\n\n\n \n\nexport default App\n\n","\nimport React, { useEffect, useState, useCallback } from \"react\";\nimport cn from \"classnames\";\nimport Master from \"screen/Master\";\nimport styles from \"./AddInvoiceComponent.module.scss\";\nimport PriceInvoiceTable from \"components/Tables/PriceInvoiceTable\";\nfunction InvoiceView(props) {\n return (\n <>\n \n {\"Submit\"}\n
\n\n
\n \n );\n}\n\n\nexport default function Invoice(props) {\n return (\n <>\n \n
\n \n {\"Price\"}\n
\n {/* -- */}\n \n\n \n
\n \n
\n \n
\n{/* //------- */}\n \n
\n \n \n
\n\n
\n\n \n
\n\n \n {\"Zones\"}\n
\n\n\n
\n \n
\n\n \n \n \n \n \n \n \n {/* {zoneStatus?.map((obj) => {\n return ;\n })} */}\n \n
\n \n \n {\"Zone Status*\"}\n
\n {formErrors.zoneStatus}
\n\n
\n ) : (\n \"\"\n )}\n \n \n \n \n \n \n \n \n );\n}\n\n\nexport default function AddZone(props) {\n return (\n <>\n \n
\n\n \n {action !== \"view\" ? (\n \n \n {onlyView ? \"Back\" : \"Cancel\"}\n \n
\n \n \n \n {action}\n \n
\n \n \n \n {\"Swap Station\"}\n \n \n
\n\n {formErrors.name}
\n \n\n \n{formErrors.siteId}
\n \n \n\n{formErrors.numOfSlots}
\n \n\n \n{formErrors.power}
\n \n \n\n{formErrors.voltage}
\n \n\n \n{formErrors.make}
\n \n\n \n{formErrors.model}
\n \n \n\n{formErrors.specFilePathError}
\n \n\n\n \n {\"Battery Make*\"}\n
\n {/* */}\n {formErrors.batteryMake}
\n \n \n\n{formErrors.batteryModel}
\n \n\n \n{formErrors.status}
\n \n \n {onlyView && (\n{formErrors.batteryModel}
*/}\n \n \n )}\n\n\n {row.row?.original?.enterprise ? (\n row.row?.original?.enterprise\n ) : (\n NA\n )}\n
\n );\n },\n },\n {\n Header: \"Name\",\n accessor: \"name\",\n Cell: (row) => {\n return (\n \n {row.row?.original?.name ? (\n row.row?.original?.name\n ) : (\n NA\n )}\n
\n );\n },\n },\n {\n Header: \"Type\",\n accessor: \"type\",\n Cell: (row) => {\n return (\n \n {row.row?.original?.type ? (\n row.row?.original?.type\n ) : (\n NA\n )}\n
\n );\n },\n },\n {\n Header: \"Description\",\n accessor: \"description\",\n Cell: (row) => {\n return (\n \n {row.row?.original?.description ? (\n row.row?.original?.description\n ) : (\n NA\n )}\n
\n );\n },\n },\n {\n Header: \"Action\",\n accessor: \"id\",\n disableSortBy: true,\n Cell: (row) => {\n return (\n <>\n \n \n viewMakersHandle(\n row.value,\n row.row.original.enterprise,\n row.row.original\n )\n }\n >\n \n updateMakersHandle(\n row.value,\n row.row.original.enterprise,\n row.row.original\n )\n }\n >\n {/* {row.row.original.isActive ? (\n \n siteStatusHandle(\n row,\n \"active\",\n row.row.original.enterpriseName\n )\n }\n style={{ border: \"none\", margin: \"8px\", cursor: \"pointer\" }}\n >\n \n \n ) : (\n \n siteStatusHandle(\n row,\n \"inactive\",\n row.row.original.enterpriseName\n )\n }\n style={{ border: \"none\", margin: \"8px\", cursor: \"pointer\" }}\n >\n \n // view(row.value, row.row.original.enterprise)\n // }\n >\n \n )} */}\n
\n \n );\n },\n },\n ],\n [setTempSwap, makersData, tempSwap]\n );\n\n const downloadFile = useCallback(async (enterprise, filePath) => {\n if (!onlyView) {\n return;\n }\n await getRequestInFileDownload(\n `downloadFile/${formValues.enterprise}?fileName=${encodeURIComponent(\n formValues.specFilePath\n )}` //${imgPath} ${enterprise}\n //`downloadFile/enterprise1?fileName=JPEG_example_JPG_RIP_001.jpg` //${imgPath} ${enterprise}\n ).then((res) => {\n if (res) {\n downloadPDF(res);\n }\n });\n });\n\n function downloadPDF(pdf) {\n const linkSource = `data:application/pdf;base64,${pdf}`;\n const downloadLink = document.createElement(\"a\");\n const fileName = formValues.batterySerialNumber + \".\" + formValues?.fileExt;\n downloadLink.href = linkSource;\n downloadLink.download = fileName;\n downloadLink.click();\n }\n\n return (\n <>\n \n
\n \n \n {\"Manufacturer Detail\"}\n \n\n \n
\n {formErrors.name}
\n \n\n \n{formErrors.enterprise}
\n \n \n\n{formErrors.type}
\n \n \n\n \n {\n const { target = {} } = event || {};\n target.value = \"\";\n }}\n />\n\n \n {choosenFileName === \"No file Choosen\" && onlyView\n ? \"No file Choosen\"\n : choosenFileName}\n
\n\n {formErrors.specFilePathError}
\n \n \n\n{formErrors.description}
\n \n \n \n \n\n\n \n
\n \n \n\n \n
\n \n \n
\n \n \n
\n \n \n {\"Total Count\"}\n \n \n {makerCount}\n \n
\n \n
\n \n )}\n \n \n );\n}\n\nexport default function AddMaker(props) {\n let Urls = window.location.href.toString().split(window.location.host)[1];\n const data = (data) => {\n headerFilterParms = data ? data : {};\n };\n\n useEffect(() => {\n data();\n }, []);\n return (\n <>\n \n
\n \n \n {\"Model Detail\"}\n \n\n \n
\n {formErrors.name}
\n \n\n \n{formErrors.enterprise}
\n \n \n\n{formErrors.type}
\n \n \n{formErrors.makeId}
\n \n \n\n{formErrors.description}
\n \n \n{formErrors.specFilePathError}
\n \n \n\n{formErrors.totalBatteries}
\n \n {\" \"}\n \n \n )}\n {formValues.type === \"BATTERY\" && (\n <>\n{formErrors.chargeCapacity}
\n \n \n{formErrors.year}
\n \n \n )}\n \n\n