\r\n\t\t\t\t
\r\n\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t\tDay}\r\n\t\t\t\t\t\t/>\r\n\t\t\t\t\t\tMonth}\r\n\t\t\t\t\t\t/>\r\n\t\t\t\t\t\tYear}\r\n\t\t\t\t\t\t/>\r\n\t\t\t\t\t\tTotal}\r\n\t\t\t\t\t\t/>\r\n\t\t\t\t\t\r\n\t\t\t\t
\r\n\t\t\t\r\n\t\t\t
\r\n\t);\r\n}\r\n\r\nexport default ChartBox;\r\n","import React, { useEffect, useState } from 'react';\r\nimport Link from '@material-ui/core/Link';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport Typography from '@material-ui/core/Typography';\r\nimport Title from '../Title/Title';\r\nimport { Grid } from '@material-ui/core';\r\nimport Cookies from 'universal-cookie';\r\nconst cookies = new Cookies();\r\nlet plantCookie = cookies.get('plant');\r\n\r\nfunction preventDefault(event) {\r\n\tevent.preventDefault();\r\n}\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n\tkiloWatt: {\r\n\t\tfontSize: '4rem',\r\n\t\tfontWeight: 700,\r\n\t\tcolor: `${theme.palette.common.red}`,\r\n\t},\r\n\theading: {\r\n\t\tfontSize: '1.6rem',\r\n\t\tfontWeight: 600,\r\n\t},\r\n\tfontPoppins: {\r\n\t\tfontFamily: 'Poppins, sans-serif',\r\n\t}\r\n}));\r\n\r\nexport default function Deposits({ data }) {\r\n\tconst classes = useStyles();\r\n\tconst [plantName, setPlantName] = useState('');\r\n\r\n\tuseEffect(() => {\r\n\t\tif (plantCookie) {\r\n\t\t\tif (plantCookie?.name != 'All Plants') {\r\n\t\t\t\tsetPlantName(plantCookie.name);\r\n\t\t\t}\r\n\t\t}\r\n\t}, []);\r\n\treturn (\r\n\t\t\r\n\t\t\t
\r\n\t);\r\n}\r\n","import React from 'react';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\n\r\nfunction preventDefault(event) {\r\n\tevent.preventDefault();\r\n}\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n\tkiloWatt: {\r\n\t\tmarginTop: '10px',\r\n\t\tfontSize: '1.2rem',\r\n\t\tfontWeight: 600,\r\n\t\tcolor: '#ffff',\r\n\t},\r\n\theading: {\r\n\t\tfontSize: '1.1rem',\r\n\t\tcolor: '#ffff',\r\n\t\tfontWeight: 600,\r\n\t},\r\n\tsubtitle: {\r\n\t\tfontSize: '1rem',\r\n\t\tcolor: 'rgba(255, 255, 255, 0.75);',\r\n\t},\r\n}));\r\n\r\nexport default function Deposits({ data }) {\r\n\tconst classes = useStyles();\r\n\treturn (\r\n\t\tLast Updated : {data?.updated}
\r\n\t\t\t\r\n\t\t\t\t
\r\n\t\t\r\n\t\t\t\t\t
\r\n\t\t\t\tCurrent Power Generation
\r\n\t\t\t\t\t{plantName ? plantName : 'ALL POWERSTATION'}
\r\n\t\t\t\t\r\n\t\t\t\t\t
\r\n\t\t\t{data?.power}
\r\n\t\t\t\t\tKW
\r\n\t\t\t\t\r\n\t\t\t
\r\n\t);\r\n}\r\n","import React, { useEffect } from 'react';\r\nimport clsx from 'clsx';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport Paper from '@material-ui/core/Paper';\r\nimport TitleCard from './TitleCard/index';\r\nimport CardSummary from './CardSummary/index';\r\nimport BreadCrum from '../BreadCrum/';\r\n\r\nimport Chart from './Chart';\r\nimport Stats from './Stats';\r\nimport PowerStats from './PowerStats';\r\n\r\nimport AssessmentTwoTone from '@material-ui/icons/AssessmentTwoTone';\r\nimport AccountBalanceTwoToneIcon from '@material-ui/icons/AccountBalanceTwoTone';\r\n\r\nimport PieChartIcon from '@material-ui/icons/PieChart';\r\nimport MonetizationOnTwoToneIcon from '@material-ui/icons/MonetizationOnTwoTone';\r\nimport WbCloudyTwoToneIcon from '@material-ui/icons/WbCloudyTwoTone';\r\nimport { useState } from 'react';\r\nimport { instance } from '../../Config/axios';\r\nimport { generateUrl, getPlantId } from '../../helper/index';\r\nimport Cookies from 'universal-cookie';\r\nimport { Icon } from '@iconify/react';\r\n\r\nconst _ = require('lodash');\r\n\r\nconst cookies = new Cookies();\r\nlet plantCookie = cookies.get('plant');\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n\tpaper: {\r\n\t\tpadding: theme.spacing(4),\r\n\t\tdisplay: 'flex',\r\n\t\toverflow: 'auto',\r\n\t\tflexDirection: 'column',\r\n\t\t// backgroundColor: `${theme.palette.common.Grey}`,\r\n\t},\r\n\tpaperSummary: {\r\n\t\tpadding: '15px',\r\n\t\tdisplay: 'flex',\r\n\t\toverflow: 'auto',\r\n\t\tflexDirection: 'column',\r\n\t\t// backgroundColor: `${theme.palette.common.Grey}`,\r\n\t},\r\n\tfixedHeight: {\r\n\t\theight: 260,\r\n\t\t// boxShadow: 'none',\r\n\t\tboxShadow: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',\r\n\t},\r\n\tpaperGraph: {\r\n\t\tpadding: theme.spacing(4),\r\n\t\tdisplay: 'flex',\r\n\t\toverflow: 'auto',\r\n\t\tflexDirection: 'column',\r\n\t\t// backgroundColor: `${theme.palette.common.Grey}`,\r\n\t},\r\n\tpaperPower: {\r\n\t\tpadding: theme.spacing(4),\r\n\t\t// display: 'flex',\r\n\t\t// overflow: 'auto',\r\n\t\t// flexDirection: 'column',\r\n\t\tbackgroundColor: '#404E55',\r\n\t\tborderRadius: '18px',\r\n\t},\r\n\tfixedHeightGraph: {\r\n\t\t// height: 550,\r\n\t},\r\n\tfixedHeightSummary: {\r\n\t\theight: 220,\r\n\t},\r\n\tfixedHeightPower: {\r\n\t\theight: 180,\r\n\t},\r\n\r\n\tfixedWidth: {\r\n\t\tpaddingLeft: '30px',\r\n\t\tpaddingRight: '30px',\r\n\t},\r\n}));\r\n\r\nconst card = [\r\n\t{\r\n\t\tid: 1,\r\n\t\ticon: 'nimbus:stats', //iconify\r\n\t\ttitle: 'Total Power',\r\n\t\tcount: '0.0',\r\n\t\tunit: 'kWh',\r\n\t},\r\n\t{\r\n\t\tid: 2,\r\n\t\ticon: 'solar:dollar-broken', //iconify\r\n\t\ttitle: 'Today profit',\r\n\t\tcount: '0.0',\r\n\t\tunit: '',\r\n\t},\r\n\t{\r\n\t\tid: 3,\r\n\t\ticon: 'fluent:data-pie-24-regular', //iconify\r\n\t\ttitle: 'Total Coal Saved',\r\n\t\tcount: '0.0',\r\n\t\tunit: 'kg',\r\n\t},\r\n\t// {\r\n\t// \tid: 4,\r\n\t// \ticon: \r\n\t\t\t\t
\r\n\t\t\tTotal Output Power
\r\n\t\t\t\tAll POWERSTATION
\r\n\t\t\t\t\r\n\t\t\t\t\t{data?.outputPower}\r\n\t\t\t\t\tKW\r\n\t\t\t\t
\r\n\t\t\t\r\n\t\t\t\t
\r\n\t\t\t
\r\n\t\t\t\r\n\t\t\t\r\n\t\t\t\t
\r\n\t\tInstalled Capacity
\r\n\t\t\t\tAll POWERSTATION
\r\n\t\t\t\t\r\n\t\t\t\t\t{data?.capacity}\r\n\t\t\t\t\tKW\r\n\t\t\t\t
\r\n\t\t\t\r\n\t\t\t\t\t\t{\r\n\t\t\t\t\t\t\tcardSummary.map((x) => (\r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t))\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t{x.title}
\r\n\t\t\t\t\t\t\t\t\t\t\t{x.count}
\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t
\r\n\r\n\t\t\t\t{/* \r\n\t\t\t\t\t\t
\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t\t\t
\r\n\t\t\t\t */}\r\n\r\n\t\t\t\t{/* \r\n\t\t\t\t\t\t{\r\n\t\t\t\t\t\t\tsummary.map((x) => (\r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\r\n\r\n\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t{/* icon */}\r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t) )\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t{/* content */}\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t{x.title}
\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t{x.count}\r\n\t\t\t\t\t\t\t\t\t\t\t{x.unit}\r\n\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\r\n\t\t\r\n\t);\r\n}\r\n","import GoogleMapReact from 'google-map-react';\r\n\r\nexport default function CustomMap({ google, locations = [] }) {\r\n\tlet center = {\r\n\t\tlat: 59.95,\r\n\t\tlng: 30.33,\r\n\t};\r\n\treturn (\r\n\t\t// \r\n\t\t\t\r\n\t\t
\r\n\t);\r\n}\r\n","import { Grid, Typography } from '@material-ui/core';\r\nimport React from 'react';\r\nimport CustomMap from './map';\r\n\r\nfunction index() {\r\n\treturn (\r\n\t\t\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\tThis Field is required\r\n\t\t\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\tThis Field is required\r\n\t\t\t\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\tThis Field is required\r\n\t\t\t\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\tThis Field is required\r\n\t\t\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\tThis Field is required\r\n\t\t\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\tThis Field is required\r\n\t\t\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t
\r\n\r\n\t\t\t{isEdit ? 'Edit Plant' : 'Add New Plant'}
\r\n\t\t\t\t\r\n\t\t\t\r\n\t\t\t\t
\r\n\r\n\t\t\t{/* filters */}\r\n\t\t\tAll Plants
\r\n\t\t\t\t\r\n\t\t\t\r\n\t\t\t\t
\r\n\r\n\t\t\t\r\n\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t{plantsOption.map((option) => (\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t))}\r\n\t\t\t\t\t\r\n\t\t\t\t\t
\r\n\t\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t{orderByOptions.map((option) => (\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t))}\r\n\t\t\t\t\t\r\n\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t
\r\n\t\t\tProduct Table
\r\n\t\t\t\t\t\t\t\tYou can Add and Delete
\r\n\t\t\t\t\t\t\tAll Alarms
\r\n\t\t\t\t{/* */}\r\n\t\t\t\r\n\t\t\t\t
\r\n\r\n\t\t\t\r\n\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t{plantsOption.map((option) => (\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t))}\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t
\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t{orderByOptions.map((option) => (\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t))}\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t
\r\n\t\t\tProduct Table
\r\n\t\t\t\t\t\t\t\tYou can Add and Delete
\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t
\r\n\t\t\r\n\t);\r\n}\r\n\r\nexport default Details;\r\n","import React, { useEffect, useState } from 'react';\r\n\r\nimport { Grid, Paper, Typography } from '@material-ui/core';\r\n\r\nimport Details from './Details';\r\n\r\nimport { instance } from '../../Config/axios';\r\nimport { generateUrl } from '../../helper/index';\r\n\r\nlet info = [\r\n\t{\r\n\t\tkey: 'Username',\r\n\t\tvalue: 'James',\r\n\t},\r\n\r\n\t{\r\n\t\tkey: 'Email',\r\n\t\tvalue: 'James@gamil.com',\r\n\t},\r\n\t{\r\n\t\tkey: 'Mobile',\r\n\t\tvalue: '12345678',\r\n\t},\r\n\t{\r\n\t\tkey: 'Role',\r\n\t\tvalue: 'Admin',\r\n\t},\r\n\t{\r\n\t\tkey: 'UID',\r\n\t\tvalue: '121312',\r\n\t},\r\n\t// {\r\n\t// \tkey: 'Account Status',\r\n\t// \tvalue: 'Active',\r\n\t// },\r\n\t{\r\n\t\tkey: 'Account Registration Time',\r\n\t\tvalue: '10:0:52 am',\r\n\t},\r\n\t{\r\n\t\tkey: 'Timezone',\r\n\t\tvalue: 'IST',\r\n\t},\r\n];\r\n\r\nlet roles = ['Administrator'];\r\n\r\nfunction AccountInfo() {\r\n\tconst [accountInfo, setaccountInfo] = useState({\r\n\t\tUsername: '',\r\n\t\tEmail: '',\r\n\t\tMobile: '',\r\n\t\tRole: '',\r\n\t\tUID: '',\r\n\t\t'Registration Date': '',\r\n\t});\r\n\r\n\tconst fetchAccountInfo = async () => {\r\n\t\tlet url1 = generateUrl({ action: 'queryAccountInfo' });\r\n\r\n\t\tconst { data } = await instance.get(url1);\r\n\r\n\t\tlet { bomb, email, gts, mobile, mobileAccr, role, uid, usr } = data?.dat;\r\n\r\n\t\tsetaccountInfo({\r\n\t\t\tUsername: usr,\r\n\t\t\tEmail: email,\r\n\t\t\tMobile: mobile,\r\n\t\t\tRole: roles[role],\r\n\t\t\tUID: uid,\r\n\t\t\t'Registration Date': new Date(gts)?.toLocaleString(),\r\n\t\t\tTimezone: 'PKT',\r\n\t\t});\r\n\t\tconsole.log(accountInfo);\r\n\t};\r\n\tuseEffect(() => {\r\n\t\tfetchAccountInfo();\r\n\t}, []);\r\n\treturn (\r\n\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t
\r\n\r\n\t\t\t\t{/* content */}\r\n\t\t\t\t\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\tinfo.map((user, index) => (\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t))\r\n\t\t\t\t\t}\r\n\t\t\t\t{user?.key}:
\r\n\t\t\t\t\t\t\t\t{accountInfo[user?.key]}
\r\n\t\t\t\t\t\t\tAccount Information
\r\n\t\t\t\r\n\t\t\t\t\t
\r\n\t\t\t\r\n\t\t\t\t
\r\n\t\t\t\t
\r\n\t\t{/* ---------------------- */}\r\n\t\t{/* \r\n\t\t\t\t\t
\r\n\t\t\tChange Password
\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t
\r\n\t\t\t\tContact Information
\r\n\t\t\t\r\n\t\t\t\t
\r\n\t\t\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\tinfo.slice(0, 5).map((x, index) => (\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t))\r\n\t\t\t\t\t}\r\n\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t{\r\n\t\t\t\t\t\t\t\t\t\tx.type === 'link'\r\n\t\t\t\t\t\t\t\t\t\t\t? {x.value}\r\n\t\t\t\t\t\t\t\t\t\t\t: x.value\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\tCrown Micro Global
\r\n\t\t\tAbout Us
\r\n\t\t\t\r\n
\r\n\t\t\t\r\n Crown Micro has been serving with its varied IT & Power Products, since 1992 established as a robust and trustworthy name in the city Los Angeles, California, USA. The thriving and back-defending team is hustling to serve you with innovative, environment-friendly, and valuable products. Dedication, is the first thing we set into our products, to supply you with the best. \r\n\r\n
\r\n\r\n\r\n Our progressive hard work pays off and in 2006 we teamed as a member of the well-known name SADITA Holding LTD but Crown Micro is maintained the legacy of being prosperous and to takeover more power, keep on working and aimed to spread it to some more additional parts of the globe.\r\n\r\n
\r\n\r\n\r\n Therefore within 20 years of establishment Crown micro marked its name in the market the United Arab Emirates, Russia, Kazakhstan, Ukraine, China, Germany, Kingdom Of Saudi Arabia, Kuwait, Pakistan, Nigeria, Kenya, Tunisia, Syria, Lebanon, Iraq, Morocco, and Ghana. \r\n
\r\n\r\n\r\n We are now in collaboration with more than 75 businesses around the globe and recognized as Crown Micro an international brand. Crown Micro owns quality products in each unit of technology including an immersive range of computers, mobile accessories, innovative solar inverters, AVR, UPS, Solar panels, and much more\r\n
\r\n\t\t\t\t![\"ups\"](\"/images/aboutus1.jpeg\")
\r\n \r\n {/* item */}\r\n
\r\n\r\n {/* ------------------------- */}\r\n\r\n {/* \r\n
\r\n\r\n {/* item */}\r\n Quite simply, A company is its people Crown Micro is giving wealth of opportunities for its people to utilize their full potential We invest in talent and allow our people to prosper.
\r\n\r\n
\r\n\r\n {/* item */}\r\n In today's fast-paced global economy change is constant, and innovation is critical to a company's survival.
\r\n\r\n
\r\n\r\n {/* item */}\r\n Everything we do Crown Micro is driven by passion for excellence-it is our commitment to develop the best products and services.
\r\n\r\n
\r\n Operating in an ethical way is the foundation of our business. We work with our business partners withcomplete transparency.
\r\n![\"ups\"](\"/images/aboutus2.jpeg\")
\r\n ![\"ups\"](\"/images/aboutus3.jpeg\")
\r\n Devices
\r\n\t\t\t\t\r\n\t\t\t\r\n\t\t\t\t
\r\n\t\t\t{/* devices */}\r\n\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t{deviceOption.map((option, idx) => (\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t))}\r\n\t\t\t\t\t\r\n\t\t\t\t
\r\n\r\n\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t{orderByOptions.map((option, idx) => (\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t))}\r\n\t\t\t\t\t\r\n\t\t\t\t
\r\n\t\t\t\r\n\t\t\t\t{\r\n\t\t\t\t\tdeviceData.length > 0 ? (\r\n\t\t\t\t\t\t
\r\n\r\n\t\t\t{/* ********************************Snackbar ********************************* */}\r\n\t\t\t\r\n\t\t\t\t\t\t\t{\r\n\t\t\t\t\t\t\t\tdeviceData && deviceData.map((device, index) => (\r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t) : (\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t{/* top */}\r\n\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t))\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t{/* bottom */}\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\tALIAS: {device?.collalias || 'Datalogger'}
\r\n\t\t\t\t\t\t\t\t\t\t\t\tPN: {device.pn}
\r\n\t\t\t\t\t\t\t\t\t\t\t\tSN: {device.sn}
\r\n\t\t\t\t\t\t\t\t\t\t\t\tLOAD: {device.load || '-'}
\r\n\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\tStatus: {device.status === 0 ? 'ONLINE' : device.status === 1 ? 'OFFLINE' : device.status === 2 ? 'FAULT' : device.status === 3 ? 'STAND BY' : 'ALARM'}\r\n\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\tAddress: {plantsCookie[0]?.name || 'Plant'}\r\n\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\tNo Device Found!
\r\n\t\t\t\t\t)\r\n\t\t\t\t}\r\n\t\t\t\r\n\t\t\t\t
\r\n\t);\r\n}\r\n","import React, { useEffect, useState } from 'react';\r\nimport Link from '@material-ui/core/Link';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport Typography from '@material-ui/core/Typography';\r\nimport { Grid } from '@material-ui/core';\r\n\r\nimport { instance } from '../../Config/axios';\r\nimport { generateUrl } from '../../helper';\r\n\r\nconst _ = require('lodash');\r\n\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n container: {\r\n width: '100%',\r\n position: 'relative',\r\n },\r\n realtimeBg: {\r\n width: '94%',\r\n height: 'auto',\r\n margin: 'auto',\r\n [theme.breakpoints.down('md')]: {\r\n width: '100%',\r\n },\r\n },\r\n gridSec: {\r\n position: 'absolute',\r\n top: '20%', /* Add top 50% */\r\n left: '28%', /* Add left 50% */\r\n transform: 'translate(-50%, -50%)', /* Add transform with -50% values */\r\n width: '15%',\r\n height: 'auto',\r\n [theme.breakpoints.down('md')]: {\r\n width: '20%',\r\n },\r\n },\r\n grid: {\r\n width: '100%',\r\n height: 'auto'\r\n },\r\n\r\n gridInfo: {\r\n position: 'absolute',\r\n inset: '-10px 0',\r\n\r\n fontSize: '24px',\r\n fontWeight: 500,\r\n color: '#34314c',\r\n textAlign: 'center',\r\n // fontFamily: 'Inter',\r\n lineHeight: '22px',\r\n [theme.breakpoints.down('sm')]: {\r\n fontSize: '16px',\r\n },\r\n [theme.breakpoints.down('xs')]: {\r\n fontSize: '12px',\r\n inset: '-14px 0',\r\n },\r\n },\r\n\r\n loadSec: {\r\n position: 'absolute',\r\n top: '35%', /* Add top 50% */\r\n left: '75%', /* Add left 50% */\r\n transform: 'translate(-50%, -50%)', /* Add transform with -50% values */\r\n width: '15%',\r\n height: 'auto',\r\n [theme.breakpoints.down('md')]: {\r\n width: '20%',\r\n },\r\n },\r\n\r\n load: {\r\n width: '100%',\r\n height: 'auto'\r\n },\r\n\r\n loadInfo: {\r\n position: 'absolute',\r\n inset: '-10px 0',\r\n\r\n fontSize: '24px',\r\n fontWeight: 500,\r\n color: '#34314c',\r\n textAlign: 'center',\r\n // fontFamily: 'Inter',\r\n lineHeight: '22px',\r\n [theme.breakpoints.down('sm')]: {\r\n fontSize: '16px',\r\n },\r\n [theme.breakpoints.down('xs')]: {\r\n fontSize: '12px',\r\n inset: '-14px 0',\r\n },\r\n },\r\n\r\n powerSec: {\r\n position: 'absolute',\r\n top: '48%', /* Add top 50% */\r\n left: '28%', /* Add left 50% */\r\n transform: 'translate(-50%, -50%)', /* Add transform with -50% values */\r\n width: '15%',\r\n height: 'auto',\r\n [theme.breakpoints.down('md')]: {\r\n width: '20%',\r\n },\r\n },\r\n power: {\r\n width: '100%',\r\n height: 'auto'\r\n },\r\n\r\n powerInfo: {\r\n position: 'absolute',\r\n inset: '-10px 0',\r\n\r\n fontSize: '24px',\r\n fontWeight: 500,\r\n color: '#34314c',\r\n textAlign: 'center',\r\n // fontFamily: 'Inter',\r\n lineHeight: '22px',\r\n [theme.breakpoints.down('sm')]: {\r\n fontSize: '16px',\r\n },\r\n [theme.breakpoints.down('xs')]: {\r\n fontSize: '12px',\r\n inset: '-14px 0',\r\n },\r\n },\r\n\r\n batterySec: {\r\n position: 'absolute',\r\n top: '64%', /* Add top 50% */\r\n left: '52%', /* Add left 50% */\r\n transform: 'translate(-50%, -50%)', /* Add transform with -50% values */\r\n width: 'auto',\r\n height: '15%',\r\n [theme.breakpoints.down('md')]: {\r\n height: '18%',\r\n },\r\n },\r\n battery: {\r\n width: 'auto',\r\n height: '100%'\r\n },\r\n\r\n batteryInfo: {\r\n position: 'absolute',\r\n inset: '40% 100%',\r\n\r\n fontSize: '24px',\r\n fontWeight: 500,\r\n color: '#34314c',\r\n textAlign: 'center',\r\n // fontFamily: 'Inter',\r\n lineHeight: '22px',\r\n whiteSpace: 'nowrap',\r\n [theme.breakpoints.down('sm')]: {\r\n fontSize: '16px',\r\n },\r\n [theme.breakpoints.down('xs')]: {\r\n fontSize: '12px',\r\n inset: '20% 100%',\r\n },\r\n },\r\n}));\r\n\r\nexport default function RealtimeStatusFlow(props) {\r\n console.log(props.device);\r\n const classes = useStyles();\r\n\r\n const [loadStatus, setLoadStatus] = useState(0);\r\n const [gridStatus, setGridStatus] = useState(0);\r\n const [batteryStatus, setBatterystatus] = useState(0);\r\n const [powerStatus, setPowerstatus] = useState(0);\r\n\r\n const [loadValue, setLoadValue] = useState(0);\r\n const [loadUnit, setLoadUnit] = useState('-');\r\n\r\n const [gridValue, setGridValue] = useState(0);\r\n const [gridUnit, setGridUnit] = useState('-');\r\n\r\n const [powerValue, setPowerValue] = useState(0);\r\n\r\n const [batteryValue, setBatteryValue] = useState(0);\r\n const [batteryUnit, setBatteryUnit] = useState('-');\r\n\r\n const fetchDeviceEnergyFlow = async () => {\r\n if (!_.isUndefined(props.device.pn)) {\r\n let action = { action: 'webQueryDeviceEnergyFlowEs' };\r\n action.source = 1;\r\n action.devcode = props.device.devcode;;\r\n action.pn = props.device.pn;\r\n action.devaddr = props.device.devaddr;;\r\n action.sn = props.device.sn;\r\n\r\n const url = generateUrl(action);\r\n const response = await instance.get(url);\r\n\r\n if (response.data.desc == 'ERR_NONE') {\r\n setLoadStatus(response.data.dat.bc_status[0].status);\r\n setGridStatus(response.data.dat.gd_status[0].status);\r\n setBatterystatus(response.data.dat.bt_status[0].status);\r\n setPowerstatus(response.data.dat.pv_status[0].status);\r\n\r\n // setBatterystatus(response.data.dat.btStatus[1].status);\r\n // BPstatus = widget.DEF!.dat!.btStatus![1].status;\r\n\r\n setLoadUnit(parseFloat(response.data.dat.bc_status[0].val));\r\n setLoadValue(response.data.dat.bc_status[0].unit);\r\n\r\n setGridUnit(parseFloat(response.data.dat.gd_status[0].val));\r\n setGridValue(response.data.dat.gd_status[0]?.unit);\r\n\r\n setPowerValue(parseFloat(response.data.dat.pv_status[0].val));\r\n\r\n setBatteryUnit(parseFloat(response.data.dat.bt_status[0].val));\r\n setBatteryValue(response.data.dat.bt_status[0].unit);\r\n\r\n } else {\r\n }\r\n }\r\n }\r\n\r\n useEffect(() => {\r\n fetchDeviceEnergyFlow()\r\n const interval = setInterval(() => {\r\n fetchDeviceEnergyFlow();\r\n }, 5000)\r\n return () => clearInterval(interval)\r\n\r\n\r\n }, [props.device]);\r\n\r\n\r\n\r\n return (\r\n \r\n\t\t\t\t\t
\r\n\t\t\t\tCurrent Power
\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t{data?.outputPower}\r\n\t\t\t\t\t\tKW\r\n\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\t
\r\n\t\t\tPower Today
\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t{data?.capacity}\r\n\t\t\t\t\t\tKW\r\n\t\t\t\t\t
\r\n\t\t\t\t![\"realtime](\"/images/forgroundrealtimeflow.png\")
\r\n \r\n {/* grid status */}\r\n \r\n {/* {gridUnit + ' ' + gridValue} */}\r\n {\r\n gridStatus == 0 ? null\r\n : gridStatus < 0 ? ![\"grid](\"/images/leftflow.gif\")
\r\n : ![\"grid](\"/images/rightflow.gif\")
\r\n }\r\n
\r\n\r\n {/* load status */}\r\n \r\n : \r\n }\r\n \r\n {loadUnit + ' ' + loadValue} \r\n {\r\n loadStatus == 0 ? null\r\n : loadStatus < 0 ? \r\n : \r\n }\r\n
\r\n\r\n {/* power status */}\r\n \r\n : \r\n }\r\n \r\n {powerValue} \r\n {\r\n powerStatus == 0 ? null : \r\n }\r\n
\r\n\r\n {/* battery status */}\r\n \r\n }\r\n \r\n {batteryUnit + ' ' + batteryValue} \r\n {\r\n batteryStatus == -1 ? ![\"battery](\"/images/downflow.gif\")
\r\n : batteryStatus == 1 ? ![\"battery](\"/images/upflow.gif\")
\r\n : null\r\n\r\n }\r\n
\r\n\r\n \r\n : batteryStatus == 1 ? \r\n : null\r\n\r\n }\r\n \r\n// \r\n// \r\n// \r\n// \r\n//
\r\n// );\r\n// }\r\n","import React, { useState, useEffect } from 'react';\r\nimport clsx from 'clsx';\r\nimport SearchIcon from '@material-ui/icons/Search';\r\nimport { Avatar, Badge, Box, Button, Card, CardActions, CardContent, CardMedia, fade, Grid, IconButton, makeStyles, MenuItem, Paper, Snackbar, Tab, TextField, Typography, useTheme } from '@material-ui/core';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport MuiAlert from '@material-ui/lab/Alert';\r\n\r\nimport { Column, Row, Item } from '@mui-treasury/components/flex';\r\nimport { Info, InfoSubtitle, InfoTitle } from '@mui-treasury/components/info';\r\nimport { useApexInfoStyles } from '@mui-treasury/styles/info/apex';\r\nimport { useGraphicBtnStyles } from '@mui-treasury/styles/button/graphic';\r\n\r\nimport { useLocation, useNavigate } from 'react-router-dom';\r\n\r\n// import EditModal from './EditModal/EditModal';\r\nimport Table from '../Table';\r\nimport { instance } from '../../Config/axios';\r\nimport { generateUrl } from '../../helper';\r\nimport Cookies from 'universal-cookie';\r\nimport { TabContext, TabList, TabPanel } from '@material-ui/lab';\r\n\r\nimport PowerStats from '../DashboardStats/PowerStats';\r\nimport CardSummary from '../DashboardStats/CardSummary';\r\n\r\nimport AssessmentTwoTone from '@material-ui/icons/AssessmentTwoTone';\r\nimport AccountBalanceTwoToneIcon from '@material-ui/icons/AccountBalanceTwoTone';\r\n\r\nimport PieChartIcon from '@material-ui/icons/PieChart';\r\nimport MonetizationOnTwoToneIcon from '@material-ui/icons/MonetizationOnTwoTone';\r\nimport DevicePowerStats from './device-power-stats';\r\nimport RealtimeStatusFlow from './realtime-status-flow';\r\nimport { Icon } from '@iconify/react';\r\n\r\nconst _ = require('lodash');\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n\tsearch: {\r\n\t\tposition: 'relative',\r\n\t\tborderRadius: theme.shape.borderRadius,\r\n\t\tbackgroundColor: fade(theme.palette.common.white, 0.15),\r\n\t\t'&:hover': {\r\n\t\t\tbackgroundColor: fade(theme.palette.common.white, 0.25),\r\n\t\t},\r\n\t\tmarginLeft: 0,\r\n\t\twidth: '100%',\r\n\t\t[theme.breakpoints.up('sm')]: {\r\n\t\t\tmarginLeft: theme.spacing(1),\r\n\t\t\twidth: 'auto',\r\n\t\t},\r\n\t},\r\n\tsearchIcon: {\r\n\t\tpadding: theme.spacing(0, 2),\r\n\t\theight: '100%',\r\n\t\tposition: 'absolute',\r\n\t\tpointerEvents: 'none',\r\n\t\tdisplay: 'flex',\r\n\t\talignItems: 'center',\r\n\t\tjustifyContent: 'center',\r\n\t},\r\n\tinputRoot: {\r\n\t\tcolor: 'primary',\r\n\t},\r\n\tinputInput: {\r\n\t\tpadding: theme.spacing(1, 1, 1, 0),\r\n\t\tfontSize: '.8rem',\r\n\t\t// vertical padding + font size from searchIcon\r\n\t\tpaddingLeft: `calc(1em + ${theme.spacing(4)}px)`,\r\n\t\ttransition: theme.transitions.create('width'),\r\n\t\twidth: '100%',\r\n\t\t[theme.breakpoints.up('sm')]: {\r\n\t\t\twidth: '12ch',\r\n\t\t\t'&:focus': {\r\n\t\t\t\twidth: '20ch',\r\n\t\t\t},\r\n\t\t},\r\n\t},\r\n\tButton: {\r\n\t\ttextTransform: 'capitalize',\r\n\t\tborderRadius: '50px',\r\n\t\tpadding: '5px 20px',\r\n\t},\r\n\tSelect: {\r\n\t\twidth: '45%',\r\n\t},\r\n\tmenu: {\r\n\t\tfontSize: '12px',\r\n\t},\r\n\r\n\troot: {\r\n\t\theight: '100%',\r\n\t\ttransition: '0.3s',\r\n\t\tposition: 'relative',\r\n\t\t'&:before': {\r\n\t\t\ttransition: '0.2s',\r\n\t\t\tposition: 'absolute',\r\n\t\t\twidth: '100%',\r\n\t\t\theight: '100%',\r\n\t\t\tcontent: '\"\"',\r\n\t\t\tdisplay: 'block',\r\n\t\t\tbackgroundColor: '#d9daf1',\r\n\t\t\tborderRadius: '1rem',\r\n\t\t\tzIndex: 0,\r\n\t\t\tbottom: 0,\r\n\t\t},\r\n\t\t'&:hover': {\r\n\t\t\t'&:before': {\r\n\t\t\t\tbottom: -6,\r\n\t\t\t},\r\n\t\t\t'& $card': {\r\n\t\t\t\tboxShadow: '-12px 12px 64px 0 #bcc3d6',\r\n\t\t\t},\r\n\t\t},\r\n\t},\r\n\tcard: {\r\n\t\tzIndex: 1,\r\n\t\tposition: 'relative',\r\n\t\tborderRadius: '1rem',\r\n\t\tboxShadow: '0 6px 20px 0 #dbdbe8',\r\n\t\tbackgroundColor: '#fff',\r\n\t\ttransition: '0.4s',\r\n\t\theight: '100%',\r\n\t},\r\n\tlogo: {\r\n\t\twidth: 48,\r\n\t\theight: 48,\r\n\t\tborderRadius: '0.75rem',\r\n\t},\r\n\tavatar: {\r\n\t\tfontFamily: 'Ubuntu',\r\n\t\tfontSize: '0.875rem',\r\n\t\tbackgroundColor: '#6d7efc',\r\n\t},\r\n\tjoin: {\r\n\t\tbackground: 'linear-gradient(to top, #D10000, #D10000)',\r\n\t\t'& > *': {\r\n\t\t\ttextTransform: 'none !important',\r\n\t\t},\r\n\t},\r\n\tpaperSummary: {\r\n\t\tpadding: '15px',\r\n\t\tdisplay: 'flex',\r\n\t\toverflow: 'auto',\r\n\t\tflexDirection: 'column',\r\n\t\t// backgroundColor: `${theme.palette.common.Grey}`,\r\n\t},\r\n\tpaperPower: {\r\n\t\tpadding: theme.spacing(4),\r\n\t\t// display: 'flex',\r\n\t\t// overflow: 'auto',\r\n\t\t// flexDirection: 'column',\r\n\t\tbackgroundColor: '#404E55',\r\n\t\tborderRadius: '18px',\r\n\t},\r\n\tfixedHeightPower: {\r\n\t\theight: 180,\r\n\t},\r\n\tfixedWidth: {\r\n\t\tpaddingLeft: '30px',\r\n\t\tpaddingRight: '30px',\r\n\t},\r\n}));\r\n\r\nfunction Alert(props) {\r\n\treturn \r\n\t\t\t\t
\r\n\r\n\t\t\tDevices Detail
\r\n\t\t\t\t{/* */}\r\n\t\t\t\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t\t\t\t{\r\n\t\t\t\t\t\t\t\tcardSummary.map((x) => (\r\n\t\t\t\t\t\t\t\t\t
\r\n\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t))\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t{x.title}
\r\n\t\t\t\t\t\t\t\t\t\t\t\t{x.count}
\r\n\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t
\r\n\r\n {/* devices */}\r\n\t\t\tDevices under this equipment
\r\n\r\n \r\n \r\n
\r\n\t\t\t\r\n\t\t\t\t{\r\n\t\t\t\t\tdeviceData.length > 0 ? (\r\n\t\t\t\t\t\t
\r\n\r\n {/* ********************************Snackbar ********************************* */}\r\n \r\n\t\t\t\t\t\t\t{\r\n\t\t\t\t\t\t\t\tdeviceData && deviceData.map((device, index) => (\r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t) : (\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t{/* top */}\r\n\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t))\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t{/* bottom */}\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\tALIAS: {device?.collalias || 'Datalogger'}
\r\n\t\t\t\t\t\t\t\t\t\t\t\tPN: {device.pn}
\r\n\t\t\t\t\t\t\t\t\t\t\t\tSN: {device.sn}
\r\n\t\t\t\t\t\t\t\t\t\t\t\tLOAD: {device.load || '-'}
\r\n\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\tStatus: {device.status === 0 ? 'ONLINE' : device.status === 1 ? 'OFFLINE' : device.status === 2 ? 'FAULT' : device.status === 3 ? 'STAND BY' : 'ALARM'}\r\n\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\tAddress: {plantsCookie[0]?.name || 'Plant'}\r\n\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\tNo Device Found!
\r\n\t\t\t\t\t)\r\n\t\t\t\t}\r\n\t\t\t\r\n
\r\n );\r\n}","import React from 'react';\r\nimport { Routes, Route, Navigate } from 'react-router-dom';\r\nimport Login from '../component/Login/index';\r\nimport Register from '../component/Register/index';\r\nimport Layout from '../component/ui/Layout';\r\nimport ForgetPassword from '../component/ResetPassword/Email';\r\nimport ResetPassword from '../component/ResetPassword/RestoredPassword';\r\n\r\nimport { PrivateRoute } from './index';\r\nimport DashBoardStats from '../component/DashboardStats/index';\r\nimport Map from '../component/Maps/index';\r\nimport EditPlants from '../component/EditPlants/index';\r\nimport Plants from '../component/Plants/index';\r\nimport Alarms from '../component/Alarms/index';\r\nimport AccountInfo from '../component/Account-Info';\r\nimport ChangePassword from '../component/ChangePassword';\r\nimport NotFound from '../component/NotFound/NotFound';\r\nimport ContactInfo from '../component/ContactInfo';\r\nimport AboutUs from '../component/AboutUs';\r\nimport Devices from '../component/Devices';\r\nimport DeviceDetail from '../component/Devices/device-detail';\r\nimport CollectorDetail from '../component/Devices/collector-detail';\r\nimport RealTimeStatus from '../component/RealTimeStatus';\r\n\r\nconst CustomRouter = () => {\r\n\t// let navigate = useNavigate();\r\n\r\n\treturn (\r\n\t\t