\n
\n )}\n {!!info && (!!info.text || !!info.icon) && (\n \n {error.icon &&\n React.cloneElement(error.icon, {\n className: 'element-end-node mr-1',\n })}\n\n {error.icon === undefined && \n {error.text}\n \n
\n \n
\n )}\n \n );\n};\n\nMultiSelect.propTypes = {\n selectClassName: PropTypes.string,\n value: PropTypes.arrayOf(stringOrNumberPropTypes),\n options: PropTypes.arrayOf(\n PropTypes.shape({\n label: PropTypes.string.isRequired,\n value: stringOrNumberPropTypes,\n supportText: PropTypes.string,\n img: PropTypes.node,\n labelChart: PropTypes.string,\n percentLabel: stringOrNumberPropTypes,\n isSelected: PropTypes.bool,\n isDisabled: PropTypes.bool,\n isFocused: PropTypes.bool,\n })\n ).isRequired,\n required: PropTypes.bool,\n customOption: PropTypes.node,\n type: PropTypes.string,\n icon: PropTypes.node,\n hideTick: PropTypes.bool,\n isSelectAll: PropTypes.bool,\n isSearchable: PropTypes.bool,\n withSelectAllOption: PropTypes.bool,\n closeOnBlur: PropTypes.bool,\n customSearchCallback: PropTypes.func,\n searchFieldsProps: PropTypes.shape({\n wrapper: PropTypes.any,\n }),\n searchNoResults: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),\n error: PropTypes.shape({\n text: PropTypes.string,\n icon: PropTypes.oneOfType([PropTypes.node, PropTypes.bool]),\n }),\n info: PropTypes.shape({\n text: PropTypes.string,\n icon: PropTypes.oneOfType([PropTypes.node, PropTypes.bool]),\n }),\n label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n};\n\nexport default MultiSelect;\n","import React, { useState, useRef, useCallback } from 'react';\nimport ReactSelect from 'react-select';\nimport _ from 'lodash';\nimport cx from 'classnames';\nimport PropTypes from 'prop-types';\nimport colorPalette from '../../../assets/scss/_colors.module.scss';\n\nimport Brick from '../../brick';\nimport Typography from '../../typography';\nimport MultiSelect from './MultiSelect';\nimport {\n Control,\n DropdownIndicator,\n MenuList,\n Option,\n SingleValue,\n ValueContainerSingle as ValueContainer,\n GroupHeading,\n} from './customComponents';\n\nimport useClickOutside from '../../hooks/useClickOutside';\nimport { stringOrNumberPropTypes } from '../../helpers/helper';\n\nimport { ReactComponent as ErrorSVG } from '../../assets/icons/errorInfo.svg';\n\nimport './style.scss';\n\nexport const DROPDOWN_INPUT_TYPES = Object.freeze({\n Default: 'Default',\n Icon: 'Icon',\n Chart: 'Chart',\n});\n\nconst Select = ({\n selectClassName = '',\n className = '',\n options = [],\n type = DROPDOWN_INPUT_TYPES.Default,\n defaultValue,\n currentValue,\n error,\n info,\n label,\n ...props\n}) => {\n const selectedOption = options.find(({ value }) => value === defaultValue);\n const containerRef = useRef(null);\n const lastValueRef = useRef(null);\n\n const [isFocused, setIsFocused] = useState(false);\n const [inputValue, setInputValue] = useState('');\n\n const events = props.isSearchable ? ['mousedown'] : [];\n\n const closeMenu = useCallback(() => {\n setIsFocused(false);\n setInputValue('');\n }, []);\n\n const clickOutsideHandler = useCallback((event) => {\n let menu = containerRef.current.querySelector('.select__menu');\n\n if (!containerRef.current.contains(event.target) || !menu || !menu.contains(event.target)) {\n closeMenu();\n }\n }, []);\n\n useClickOutside(containerRef, events, clickOutsideHandler);\n\n const propsForSearchable = {\n ...(props.isSearchable\n ? {\n closeMenu,\n inputValue,\n onMenuInputFocus: (event) => {\n props.onMenuInputFocus && props.onMenuInputFocus(event);\n setIsFocused(true);\n },\n onMenuInputBlur: (event) => {\n props.onMenuInputBlur && props.onMenuInputBlur(event);\n setIsFocused(false);\n },\n onChange: (event) => {\n //@TODO Temporary, need to prevent selection by space on the keyboard\n if (lastValueRef.current !== 32) {\n props.onChange && props.onChange(event);\n setIsFocused(false);\n }\n },\n onInputChange: (val) => {\n props.onInputChange && props.onInputChange(val);\n setInputValue(val);\n },\n onValueChange: (val) => {\n setInputValue(val);\n },\n onKeyDown: (event) => {\n props.onKeyDown && props.onKeyDown(event);\n //@TODO Not clear, why it is working.\n if (!!props.customSearchCallback) {\n setInputValue((prevState) => prevState + ' ');\n }\n lastValueRef.current = event.keyCode;\n },\n customOptionOnClick: () => {\n lastValueRef.current = null;\n },\n menuIsOpen: isFocused || undefined,\n isFocused: isFocused || undefined,\n }\n : {}),\n };\n\n return (\n \n {info.icon &&\n React.cloneElement(info.icon, {\n className: 'element-end-node mr-1',\n })}\n\n {info.text} \n
\n \n {label && (\n <>\n \n {label}\n {props?.required && (\n \n *\n \n )}\n \n
\n );\n};\n\nSelect.Types = DROPDOWN_INPUT_TYPES;\nMultiSelect.Types = DROPDOWN_INPUT_TYPES;\n\nSelect.Multi = MultiSelect;\n\nSelect.propTypes = {\n selectClassName: PropTypes.string,\n defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]),\n\n // The difference between default and current values, is currentValue allows to change current value dynamically\n currentValue: PropTypes.oneOfType([\n PropTypes.object, // For single selection\n PropTypes.array, // For multi-selection\n ]),\n options: PropTypes.arrayOf(\n PropTypes.shape({\n label: PropTypes.oneOfType([PropTypes.node, PropTypes.string]).isRequired,\n value: stringOrNumberPropTypes,\n supportText: PropTypes.string,\n img: PropTypes.node,\n icon: PropTypes.node,\n iconForSelected: PropTypes.node,\n labelChart: PropTypes.string,\n percentLabel: stringOrNumberPropTypes,\n isSelected: PropTypes.bool,\n isDisabled: PropTypes.bool,\n isFocused: PropTypes.bool,\n hasValue: PropTypes.bool,\n })\n ).isRequired,\n required: PropTypes.bool,\n customOption: PropTypes.node,\n type: PropTypes.oneOf(Object.values(DROPDOWN_INPUT_TYPES)),\n icon: PropTypes.node,\n hideTick: PropTypes.bool,\n isSearchable: PropTypes.bool,\n defaultMenuIsOpen: PropTypes.bool,\n menuIsOpen: PropTypes.bool,\n customSearchCallback: PropTypes.func,\n searchFieldsProps: PropTypes.shape({\n wrapper: PropTypes.any,\n }),\n searchNoResults: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),\n error: PropTypes.shape({\n text: PropTypes.string,\n icon: PropTypes.oneOfType([PropTypes.node, PropTypes.bool]),\n }),\n info: PropTypes.shape({\n text: PropTypes.string,\n icon: PropTypes.oneOfType([PropTypes.node, PropTypes.bool]),\n }),\n label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n};\n\nexport default Select;\n","import React from 'react';\nimport FormControl from 'react-bootstrap/FormControl';\nimport { UncontrolledTooltip } from 'reactstrap';\nimport PropTypes from 'prop-types';\nimport cx from 'classnames';\n\nimport { generateID } from '../../helpers/helper';\n\nimport { ReactComponent as HelpSVG } from '../../assets/icons/helpIcon.svg';\n\nimport './Input.scss';\nimport Brick from '../../brick';\nimport Typography from '../../typography';\nimport { ReactComponent as ErrorSVG } from '../../assets/icons/errorInfo.svg';\n\nconst InputTooltip = ({\n iconUrl,\n tooltipText,\n tooltipId = generateID(),\n inputClassName = '',\n className = '',\n disabled,\n labelsize = Typography.Sizes.sm,\n ...props\n}) => {\n const inputWrapperClassNames = cx('input-wrapper', className, {\n 'element-end': !!tooltipText,\n error: !!props.error,\n disabled,\n });\n\n return (\n \n
\n )}\n {!!info && (!!info.text || !!info.icon) && (\n \n {error.icon &&\n React.cloneElement(error.icon, {\n className: 'element-end-node mr-1',\n })}\n\n {error.icon === undefined && \n {error.text}\n \n
\n \n
\n )}\n \n {info.icon &&\n React.cloneElement(info.icon, {\n className: 'element-end-node mr-1',\n })}\n\n {info.text} \n
\n \n {props.label && (\n <>\n {props.label} \n \n {props.error}\n \n \n )}\n
\n );\n};\n\nInputTooltip.propTypes = {\n iconUrl: PropTypes.string,\n tooltipText: PropTypes.string,\n label: PropTypes.string,\n tooltipId: PropTypes.string,\n error: PropTypes.string,\n labelsize: PropTypes.string,\n};\n\nexport default InputTooltip;\n","const FILTER_TYPES = Object.freeze({\n MULTISELECT: 'MULTISELECT',\n RANGE_SELECTOR: 'RANGE_SELECTOR',\n LAST_UPDATED_SELECTOR: 'LAST_UPDATED_SELECTOR',\n DATE_SELECTOR: 'DATE_SELECTOR',\n LOCATION_SELECTOR: 'LOCATION_SELECTOR',\n});\n\nconst LOCAL_STORAGE = Object.freeze({\n EXCLUDED_HEADERS: 'EXCLUDED_HEADERS',\n ORDER_HEADERS: 'ORDER_HEADERS',\n});\n\nconst SORT_TYPES = [null, 'ace', 'dce'];\n\nexport { FILTER_TYPES, LOCAL_STORAGE, SORT_TYPES };\n","import { Store } from 'pullstate';\r\nimport { handleDateFormat } from '../helpers/helpers';\r\n\r\nexport const DateRangeStore = new Store({\r\n dateFilter: localStorage.getItem('dateFilter') === null ? 6 : localStorage.getItem('dateFilter'),\r\n startDate: handleDateFormat(localStorage.getItem('startDate'), 'startDate'),\r\n endDate: handleDateFormat(localStorage.getItem('endDate'), 'endDate'),\r\n filterPeriod: localStorage.getItem('filterPeriod') === null ? 'Last 7 Days' : localStorage.getItem('filterPeriod'),\r\n daysCount: localStorage.getItem('daysCount'),\r\n startTime: localStorage.getItem('startTime'),\r\n endTime: localStorage.getItem('endTime'),\r\n isTimePickerEnabled: localStorage.getItem('isTimePickerEnabled') ?? false,\r\n});\r\n","import { atom } from 'jotai';\n\nexport const buildingData = atom([]);\nexport const userPermissionData = atom([]);\n\nexport const equipmentDataGlobal = atom([]);\nexport const allEquipmentDataGlobal = atom([]);\n\nexport const switchValue = atom({\n mon: false,\n tue: false,\n wed: false,\n thu: false,\n fri: false,\n sat: false,\n sun: false,\n});\n\nexport const deleteFloor = atom(false);\n\nexport const closedEditFloorModal = atom(false);\nexport const closeEditSpaceModal = atom(false);\nexport const floorList = atom([]);\nexport const spaceId = atom('');\n\nexport const showSkeletonNow = atom(false);\n\nexport const getFloorsData = atom([]);\n\nexport const spaceName = atom('');\nexport const spaceName2 = atom('');\nexport const spaceName3 = atom('');\nexport const spaceName4 = atom('');\nexport const spaceName5 = atom('');\nexport const spaceName6 = atom('');\nexport const spaceName7 = atom('');\nexport const spaceName8 = atom('');\nexport const spaceName9 = atom('');\nexport const spaceName10 = atom('');\nexport const spaceName11 = atom('');\nexport const spaceName12 = atom('');\nexport const spaceName13 = atom('');\nexport const spaceName14 = atom('');\nexport const spaceName15 = atom('');\nexport const spaceName16 = atom('');\nexport const spaceName17 = atom('');\nexport const spaceName18 = atom('');\nexport const spaceName19 = atom('');\nexport const spaceName20 = atom('');\n\nexport const spacesList = atom([]);\nexport const areaList = atom([]);\nexport const iterationNumber = atom(0);\nexport const iterationDataList = atom([]);\nexport const floorState = atom([]);\n\nexport const spaceNameList = atom([]);\nexport const floorIdState = atom('');\n\nexport const reloadSpaces = atom('false');\nexport const floorStaticId = atom('');\n\nexport const flooridNew = atom('');\n\nexport const currentFloorIdNow2 = atom('');\nexport const currentFloorIdNow3 = atom('');\nexport const currentFloorIdNow4 = atom('');\nexport const currentFloorIdNow5 = atom('');\nexport const currentFloorIdNow6 = atom('');\nexport const currentFloorIdNow7 = atom('');\nexport const currentFloorIdNow8 = atom('');\nexport const currentFloorIdNow9 = atom('');\n\nexport const identifier = atom('');\nexport const deviceId = atom('');\nexport const passiveDeviceModal = atom('');\nexport const equipmentId = atom('');\n\nexport const accountId = atom('');\nexport const vendorId = atom('');\n\n// explorer\nexport const selectedEquipment = atom('');\nexport const totalSelectionEquipmentId = atom([]);\nexport const selectedBuilding = atom('');\nexport const totalSelectionBuildingId = atom([]);\n\nexport const totalSeriesGraphData = atom([]);\nexport const allFloors = atom([]);\n\nexport const toggleRecord = atom();\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport moment from 'moment';\n\nconst generateID = () => Math.random().toString(36).substring(2, 9);\n\nconst kFormatter = (num) => {\n return Math.abs(num) > 999\n ? Math.sign(num) * (Math.abs(num) / 1000).toFixed(1) + ' K'\n : Math.sign(num) * Math.abs(num);\n};\n\n//@TODO Maybe we can find better substitute\nconst mixColors = function (color_1, color_2, weight) {\n function d2h(d) {\n return d.toString(16);\n } // convert a decimal value to hex\n function h2d(h) {\n return parseInt(h, 16);\n } // convert a hex value to decimal\n\n weight = typeof weight !== 'undefined' ? weight : 50; // set the weight to 50%, if that argument is omitted\n\n var color = '#';\n\n for (var i = 0; i <= 5; i += 2) {\n // loop through each of the 3 hex pairs—red, green, and blue\n var v1 = h2d(color_1.substr(i, 2)), // extract the current pairs\n v2 = h2d(color_2.substr(i, 2)),\n // combine the current pairs from each source color, according to the specified weight\n val = d2h(Math.floor(v2 + (v1 - v2) * (weight / 100.0)));\n\n while (val.length < 2) {\n val = '0' + val;\n } // prepend a '0' if val results in a single digit\n\n color += val; // concatenate val to our new color string\n }\n\n return color; // PROFIT!\n};\n\nconst stringOrNumberPropTypes = PropTypes.oneOfType([PropTypes.string, PropTypes.number]);\n\nfunction arrayMoveMutable(array, fromIndex, toIndex) {\n const startIndex = fromIndex < 0 ? array.length + fromIndex : fromIndex;\n\n if (startIndex >= 0 && startIndex < array.length) {\n const endIndex = toIndex < 0 ? array.length + toIndex : toIndex;\n\n const [item] = array.splice(fromIndex, 1);\n array.splice(endIndex, 0, item);\n }\n}\n\nfunction arrayMoveImmutable(array, fromIndex, toIndex) {\n const newArray = [...array];\n arrayMoveMutable(newArray, fromIndex, toIndex);\n return newArray;\n}\n\nconst getStatesForSelectAllCheckbox = (values, options) => {\n const noneSelected = values?.length === 0;\n const allSelected = values?.length === options?.length;\n const someSelected = values?.length > 0;\n const optionsAreExisted = options?.length > 0;\n\n return {\n checked: optionsAreExisted && !noneSelected && allSelected,\n indeterminate: optionsAreExisted && !noneSelected && someSelected && !allSelected,\n };\n};\n\nconst removeProps = (propsObj, ...properties) => {\n let propsMap = Object.entries(propsObj).filter(([key]) => !properties.includes(key));\n\n return propsMap.reduce((newProps, [key, val]) => {\n newProps[key] = val;\n return newProps;\n }, {});\n};\n\nconst xaxisFilters = (daysCount, timezone) => {\n // Up to and including 1 day\n if (daysCount === 1) {\n let xaxisObj = {\n type: 'datetime',\n labels: {\n formatter: function (val, timestamp) {\n return `${moment(timestamp).tz(timezone).format('HH:00')}`;\n },\n offsetX: 0,\n offsetY: 0,\n },\n tickAmount: 8,\n tickPlacement: 'between',\n };\n return xaxisObj;\n }\n\n // Up to and including 3 days\n else if (daysCount >= 2 && daysCount <= 3) {\n let xaxisObj = {\n type: 'datetime',\n labels: {\n formatter: function (val, timestamp) {\n return `${moment(timestamp).tz(timezone).format('MM/DD HH:00')}`;\n },\n offsetX: 0,\n offsetY: 0,\n },\n tickAmount: daysCount * 4,\n };\n return xaxisObj;\n }\n\n // Up to and including 7 days\n else if (daysCount >= 4 && daysCount <= 7) {\n let xaxisObj = {\n type: 'datetime',\n labels: {\n formatter: function (val, timestamp) {\n return `${moment(timestamp).tz(timezone).format('MM/DD HH:00')}`;\n },\n offsetX: 0,\n offsetY: 0,\n hideOverlappingLabels: Boolean,\n rotate: 0,\n trim: false,\n },\n tickAmount: daysCount * 2,\n axisTicks: {\n show: true,\n },\n };\n return xaxisObj;\n }\n\n // Up to and including 14 days\n else if (daysCount >= 8 && daysCount <= 14) {\n let xaxisObj = {\n type: 'datetime',\n labels: {\n formatter: function (val, timestamp) {\n return `${moment(timestamp).tz(timezone).format('MM/DD')}`;\n },\n offsetX: 0,\n offsetY: 0,\n hideOverlappingLabels: Boolean,\n rotate: 0,\n trim: false,\n },\n tickAmount: daysCount,\n axisTicks: {\n show: true,\n },\n };\n return xaxisObj;\n }\n\n // Up to and including 30 days\n else if (daysCount >= 15 && daysCount <= 30) {\n let xaxisObj = {\n type: 'datetime',\n labels: {\n formatter: function (val, timestamp) {\n return `${moment(timestamp).tz(timezone).format('MM/DD')}`;\n },\n hideOverlappingLabels: Boolean,\n rotate: 0,\n trim: false,\n offsetX: 0,\n offsetY: 0,\n },\n tickAmount: (daysCount / 3).toFixed(0),\n axisTicks: {\n show: true,\n },\n };\n return xaxisObj;\n }\n\n // Up to and including 3 Months\n else if (daysCount >= 31 && daysCount <= 90) {\n let xaxisObj = {\n type: 'datetime',\n labels: {\n formatter: function (val, timestamp) {\n return `${moment(timestamp).tz(timezone).format('MM/DD')}`;\n },\n hideOverlappingLabels: Boolean,\n rotate: 0,\n trim: false,\n },\n tickAmount: (daysCount / 6).toFixed(0),\n axisTicks: {\n show: true,\n },\n };\n return xaxisObj;\n }\n\n // Up to and including 6 Months\n else if (daysCount >= 91 && daysCount <= 181) {\n let xaxisObj = {\n type: 'datetime',\n labels: {\n formatter: function (val, timestamp) {\n return `${moment(timestamp).tz(timezone).format('MM/DD')}`;\n },\n hideOverlappingLabels: Boolean,\n rotate: 0,\n trim: false,\n },\n tickAmount: (daysCount / 6).toFixed(0),\n axisTicks: {\n show: true,\n },\n };\n return xaxisObj;\n }\n\n // >6 Months\n else if (daysCount >= 182) {\n let xaxisObj = {\n type: 'datetime',\n labels: {\n formatter: function (val, timestamp) {\n return `${moment(timestamp).tz(timezone).format('MMM')}`;\n },\n hideOverlappingLabels: Boolean,\n rotate: 0,\n trim: false,\n },\n tickAmount: (daysCount / 30).toFixed(0),\n axisTicks: {\n show: true,\n },\n };\n return xaxisObj;\n }\n\n // Default if not any\n else {\n let xaxisObj = {\n type: 'datetime',\n labels: {\n formatter: function (val, timestamp) {\n return `${moment(timestamp).tz(timezone).format('DD/MMM')} ${moment(timestamp)\n .tz(timezone)\n .format('LT')}`;\n },\n },\n };\n return xaxisObj;\n }\n};\n\nconst formatConsumptionValue = (value, fixed) => value.toLocaleString(undefined, { maximumFractionDigits: fixed });\n\nconst validateIntervals = (daysCount) => {\n let label = 'Hourly';\n if (daysCount >= 31 && daysCount <= 94) label = 'Daily';\n if (daysCount > 94) label = 'Monthly';\n return label;\n};\n\nconst validateIntervalsForEndUse = (daysCount) => {\n let label = 'Hour';\n if (daysCount >= 31 && daysCount <= 94) label = 'Day';\n if (daysCount > 94) label = 'Month';\n return label;\n};\n\nconst xaxisCategoryByHour = [\n '12AM',\n '1AM',\n '2AM',\n '3AM',\n '4AM',\n '5AM',\n '6AM',\n '7AM',\n '8AM',\n '9AM',\n '10AM',\n '11AM',\n '12PM',\n '1PM',\n '2PM',\n '3PM',\n '4PM',\n '5PM',\n '6PM',\n '7PM',\n '8PM',\n '9PM',\n '10PM',\n '11PM',\n];\n\n// @TODO Perhabs will be deleted\nconst renderElementIfValid = (element) => {\n if (React.isValidElement(element)) {\n return React.cloneElement(element, { ...element?.props });\n }\n};\n\nexport {\n generateID,\n kFormatter,\n mixColors,\n arrayMoveMutable,\n arrayMoveImmutable,\n stringOrNumberPropTypes,\n getStatesForSelectAllCheckbox,\n removeProps,\n xaxisFilters,\n formatConsumptionValue,\n xaxisCategoryByHour,\n renderElementIfValid,\n validateIntervals,\n validateIntervalsForEndUse,\n};\n","import { Store } from 'pullstate';\r\n\r\nexport const BreadcrumbStore = new Store({\r\n items: [\r\n {\r\n label: 'Portfolio Overview',\r\n path: '/energy/portfolio/overview',\r\n active: true,\r\n },\r\n ],\r\n breadcrumbList: localStorage.getItem('breadcrumbList'),\r\n});\r\n","export const UTILITY_MONITOR = {\n PULSE_COUNTER: 'pulse counter',\n SHADOW_METER: 'shadow meter',\n POWER_SCOUT: 'PS48HD',\n SHADOW_50: 'shadow_50',\n SHADOW_100: 'shadow_100',\n SHADOW_250: 'shadow_250',\n};\n\nexport const utilityMeterModel = [\n {\n value: 'PS48HD',\n label: 'PowerScout 48HD',\n },\n {\n value: UTILITY_MONITOR.PULSE_COUNTER,\n label: 'Sapient Pulse',\n },\n {\n value: 'shadow_50',\n label: 'Sapient Shadow 50',\n },\n {\n value: 'shadow_100',\n label: 'Sapient Shadow 100',\n },\n {\n value: 'shadow_250',\n label: 'Sapient Shadow 250',\n },\n];\n\nexport const shadowChartMetrics = [\n { value: 'energy', label: 'Energy (Wh)', unit: 'Wh', Consumption: 'Energy' },\n { value: 'power', label: 'Power (W)', unit: 'W', Consumption: 'Power' },\n { value: 'current', label: 'Current (mA)', unit: 'mA', Consumption: 'Current' },\n { value: 'voltage', label: 'Voltage (mV)', unit: 'mV', Consumption: 'Voltage' },\n { value: 'apparent_power', label: 'Apparent Power (VA)', unit: 'VA', Consumption: 'Apparent Power' },\n { value: 'reactive_power', label: 'Reactive Power (VAR)', unit: 'VAR', Consumption: 'Reactive Power' },\n { value: 'frequency', label: 'Frequency (Hz)', unit: 'Hz', Consumption: 'Frequency' },\n { value: 'power_factor', label: 'Power Factor', unit: '', Consumption: 'Power Factor' },\n];\n\nexport const pulseChartMetrics = [\n { value: 'energy', label: 'Energy (Wh)', unit: 'Wh', Consumption: 'Energy' },\n { value: 'pulse count', label: 'Pulse Count', unit: '', Consumption: 'Pulse Count' },\n { value: 'total pulses', label: 'Total Pulses', unit: '', Consumption: 'Total Pulses' },\n];\n\n// Convert to Alpha Numeric\nexport const convertToAlphaNumeric = (input) => {\n const sanitizedInput = input.replace(/[^a-zA-Z0-9]/g, '');\n return sanitizedInput;\n};\n\nexport const convertToMac = (deviceSearch) => {\n let mac = deviceSearch;\n if (!deviceSearch.includes(':')) mac = deviceSearch.match(/.{1,2}/g).join(':');\n return mac;\n};\n","import { Store } from 'pullstate';\r\n\r\nexport const ComponentStore = new Store({\r\n parent: '',\r\n});\r\n\r\n// ---------- Options: ----------\r\n// portfolio\r\n// buildings\r\n// carbon-portfolio\r\n// carbon-buildings\r\n// control\r\n// explore\r\n// account\r\n// building-settings\r\n// alerts\r\n// superuser-account\r\n","import { Store } from 'pullstate';\r\n\r\nexport const BuildingStore = new Store({\r\n BldgId: localStorage.getItem('buildingId'),\r\n BldgName: localStorage.getItem('buildingName'),\r\n BldgTimeZone:\r\n localStorage.getItem('buildingTimeZone') === 'undefined'\r\n ? 'US/Eastern'\r\n : localStorage.getItem('buildingTimeZone'),\r\n BldgName: localStorage.getItem('buildingName'),\r\n isPlugOnly: localStorage.getItem('isPlugOnly'),\r\n});\r\n\r\nexport const BuildingListStore = new Store({\r\n fetchBuildingList: false,\r\n});\r\n","import cx from 'classnames';\nimport { selectAllOption } from './constants';\n\nconst conditionalClass = (props) => (props.selectProps.menuIsOpen ? 'is-open' : 'is-closed');\n\nconst optionClasses = ({ isDisabled, isFocused, isSelected, customOption }) =>\n cx('react-select-option', {\n 'react-select-option--is-disabled': isDisabled,\n 'react-select-option--is-focused': isFocused,\n 'react-select-option--is-selected': isSelected,\n customOption: !!customOption,\n });\n\nconst filterOutSelectAllOption = (options) => {\n return options.filter((el) => el?.value !== selectAllOption?.value);\n};\n\nconst defaultDropdownSearch = (data, value) => {\n if (!value) {\n return data;\n }\n\n const lowerCaseValue = value.toLowerCase();\n const newFilteredList = data.filter((el) => {\n const { props: { data: { label } = {} } = {} } = el;\n return label && label.toLowerCase().includes(lowerCaseValue);\n });\n\n return newFilteredList;\n};\n\nexport { conditionalClass, optionClasses, filterOutSelectAllOption, defaultDropdownSearch };\n","import {Notification} from './Notification';\n\nexport { Notification };","import React from 'react';\nimport FormControl from 'react-bootstrap/FormControl';\nimport PropTypes from 'prop-types';\nimport cx from 'classnames';\nimport colorPalette from '../../../assets/scss/_colors.module.scss';\n\nimport Typography from '../../typography';\nimport Brick from '../../brick';\n\nimport { ReactComponent as ErrorSVG } from '../../assets/icons/errorInfo.svg';\n\nimport './Input.scss';\n\nconst Input = ({ iconUrl, elementStart, elementEnd, inputClassName = '', className = '', disabled, ...props }) => {\n const inputWrapperClassNames = cx('input-wrapper', className, {\n 'element-start': !!elementStart,\n 'element-end': !!elementEnd,\n disabled,\n error: !!props.error,\n icon: !!iconUrl,\n });\n\n return (\n \n {iconUrl && 
}\n \n {tooltipText}\n \n\n \n \n )}\n\n {!!props.error &&
\n\n {!!props.error && (\n <>\n \n {props.label && (\n <>\n \n {props.label}\n {props?.required && (\n \n *\n \n )}\n \n \n {props.error}\n \n \n )}\n
\n );\n};\n\nInput.propTypes = {\n iconUrl: PropTypes.string,\n elementStart: PropTypes.node,\n elementEnd: PropTypes.node,\n required: PropTypes.bool,\n error: PropTypes.string,\n label: PropTypes.string,\n};\n\nexport default Input;\n","import _ from 'lodash';\nimport axiosInstance from '../../../services/axiosInstance';\nimport {\n generalPanels,\n createPanel,\n updatePanel,\n deletePanel,\n resetBreakers,\n getBreakers,\n getLocation,\n generalEquipments,\n generalPassiveDevices,\n updateLinkBreakers,\n updateBreakerTypes,\n deleteBreaker,\n getFiltersForEquipment,\n listSensor,\n updateBreakers,\n createEquipment,\n generalEquipmentsV2,\n} from '../../../services/Network';\n\nexport function getPanelsData(\n bldgId,\n search,\n pageNo,\n pageSize,\n getParams,\n panelTypeSelected,\n parentPanelSelected,\n locationIdSelected,\n breakerCountSelected,\n panelVoltageSelected\n) {\n const searchData = encodeURIComponent(search);\n let params = `?building_id=${bldgId}&panel_search=${searchData}&page_size=${pageSize}&page_no=${pageNo}`;\n\n if (getParams.order_by && getParams.sort_by)\n params += `&ordered_by=${getParams.order_by}&sort_by=${getParams.sort_by}`;\n if (panelTypeSelected.length) params += `&panel_type=${panelTypeSelected}`;\n if (parentPanelSelected.length) params += `&parent_id=${parentPanelSelected}`;\n if (locationIdSelected.length) params += `&location_id=${locationIdSelected}`;\n if (breakerCountSelected.length) params += `&breakers=${breakerCountSelected}`;\n if (panelVoltageSelected.length) params += `&voltage=${panelVoltageSelected}`;\n\n return axiosInstance.get(`${generalPanels}${params}`).then((res) => res);\n}\n\nexport function getLocationData(params) {\n return axiosInstance.get(`${getLocation}${params}`).then((res) => res);\n}\n\nexport function addNewPanel(params, payload) {\n return axiosInstance.post(`${createPanel}${params}`, payload).then((res) => res);\n}\n\nexport function deleteCurrentPanel(params) {\n return axiosInstance.delete(`${deletePanel}${params}`).then((res) => res);\n}\n\nexport function getBreakerDeleted(params) {\n return axiosInstance.delete(`${deleteBreaker}${params}`).then((res) => res);\n}\n\nexport function resetAllBreakers(params, payload) {\n return axiosInstance.post(`${resetBreakers}${params}`, payload).then((res) => res);\n}\n\nexport function updatePanelDetails(params, payload) {\n return axiosInstance.patch(`${updatePanel}${params}`, payload).then((res) => res);\n}\n\nexport function getBreakersList(params) {\n return axiosInstance.get(`${getBreakers}${params}`).then((res) => res);\n}\n\nexport function getEquipmentsList(params = '', payload = {}) {\n return axiosInstance.post(`${generalEquipments}${params}`, payload).then((res) => res);\n}\n\nexport function getEquipmentsListV2(params) {\n return axiosInstance.get(`${generalEquipmentsV2}${params}`).then((res) => res);\n}\n\nexport function getPassiveDeviceList(params) {\n return axiosInstance.get(`${generalPassiveDevices}${params}`).then((res) => res);\n}\n\nexport function updateBreakersLink(params, payload) {\n return axiosInstance.post(`${updateLinkBreakers}${params}`, payload).then((res) => res);\n}\n\nexport function updateBreakersTypeLink(payload, params) {\n return axiosInstance.patch(`${updateBreakerTypes}${params}`, payload).then((res) => res);\n}\n\nexport function fetchPanelsFilter(args) {\n return axiosInstance\n .get(`${getFiltersForEquipment}`, {\n params: _.pickBy(\n {\n query_collection: 'panels',\n building_id: args.bldgId,\n },\n _.identity\n ),\n })\n .then((res) => {\n return res.data;\n });\n}\n\n// This Service is created to fetch Panel List without Filters\nexport function getPanelsList(params) {\n return axiosInstance.get(`${generalPanels}${params}`).then((res) => res);\n}\n\nexport function getSensorsList(params) {\n return axiosInstance.get(`${listSensor}${params}`).then((res) => res);\n}\n\nexport function updateBreakerDetails(params, payload) {\n return axiosInstance.post(`${updateBreakers}${params}`, payload).then((res) => res);\n}\n\nexport function createEquipmentData(params, payload) {\n return axiosInstance.post(`${createEquipment}${params}`, payload).then((res) => res);\n}\n","/* AUTH */\nexport const LOGIN_USER = 'LOGIN_USER';\nexport const LOGIN_USER_SUCCESS = 'LOGIN_USER_SUCCESS';\nexport const LOGIN_USER_FAILED = 'LOGIN_USER_FAILED';\nexport const REGISTER_USER = 'REGISTER_USER';\nexport const REGISTER_USER_SUCCESS = 'REGISTER_USER_SUCCESS';\nexport const REGISTER_USER_FAILED = 'REGISTER_USER_FAILED';\nexport const LOGOUT_USER = 'LOGOUT_USER';\nexport const FORGET_PASSWORD = 'FORGET_PASSWORD';\nexport const FORGET_PASSWORD_SUCCESS = 'FORGET_PASSWORD_SUCCESS';\nexport const FORGET_PASSWORD_FAILED = 'FORGET_PASSWORD_FAILED';\nexport const GOOGLE_LOGIN_USER = 'GOOGLE_LOGIN_USER';\n","import React from 'react';\n\nimport './Table.scss';\n\nconst Head = ({ children, ...props }) => (\n \n {children}\n \n);\nconst Body = ({ children, ...props }) => (\n \n {children}\n \n);\nconst Row = ({ children, ...props }) => (\n \n {iconUrl && }\n {elementStart &&\n !props.error &&\n React.cloneElement(elementStart, {\n className: 'element-start-node',\n })}\n
\n\n {!!props.error && (\n <>\n \n {children}
\n
\n );\n};\n\nTable.Head = Head;\nTable.Body = Body;\nTable.Row = Row;\nTable.Cell = Cell;\nTable.THead = THead;\nTable.TBody = TBody;\n\nexport default Table;\n","import React, { forwardRef } from 'react';\n\nimport { Button } from '../../button';\nimport DropDownBase from './DropDownBase';\n\nimport { ReactComponent as CaretDownIcon } from '../../assets/icons/caretDown.svg';\nimport PropTypes from 'prop-types';\n\nconst TriggerButton = forwardRef((props, ref) => (\n \n +value === pageSize) || pageListSizes[0]}\n label={label}\n menuPlacement=\"auto\"\n onChange={({ value }) => {\n if (value === -1) {\n return;\n }\n setPageSize(value);\n }}\n options={pageListSizes}\n />\n
\n );\n};\n\nPagination.propTypes = {\n siblingCount: PropTypes.number,\n onPageChange: PropTypes.func.isRequired,\n totalCount: PropTypes.number.isRequired,\n currentPage: PropTypes.number.isRequired,\n pageSize: stringOrNumberPropTypes,\n setPageSize: PropTypes.func.isRequired,\n pageListSizes: PropTypes.arrayOf(\n PropTypes.shape({\n label: PropTypes.string.isRequired,\n value: stringOrNumberPropTypes.isRequired,\n })\n ),\n label: PropTypes.string,\n isAlwaysShown: PropTypes.bool,\n};\n\nexport default Pagination;\n","var _path;\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nimport * as React from \"react\";\nfunction SvgCloseButton2X(_ref, svgRef) {\n let {\n title,\n titleId,\n ...props\n } = _ref;\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 20,\n height: 20,\n viewBox: \"0 0 20 20\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n d: \"M4.41107 4.41107C4.73651 4.08563 5.26414 4.08563 5.58958 4.41107L10.0003 8.82181L14.4111 4.41107C14.7365 4.08563 15.2641 4.08563 15.5896 4.41107C15.915 4.73651 15.915 5.26414 15.5896 5.58958L11.1788 10.0003L15.5896 14.4111C15.915 14.7365 15.915 15.2641 15.5896 15.5896C15.2641 15.915 14.7365 15.915 14.4111 15.5896L10.0003 11.1788L5.58958 15.5896C5.26414 15.915 4.73651 15.915 4.41107 15.5896C4.08563 15.2641 4.08563 14.7365 4.41107 14.4111L8.82181 10.0003L4.41107 5.58958C4.08563 5.26414 4.08563 4.73651 4.41107 4.41107Z\",\n fill: \"#1D2939\"\n })));\n}\nconst ForwardRef = /*#__PURE__*/React.forwardRef(SvgCloseButton2X);\nexport default __webpack_public_path__ + \"static/media/close-button-2x.7b7a631c.svg\";\nexport { ForwardRef as ReactComponent };","import React from 'react';\nimport cx from 'classnames';\n\nimport { Button } from '../../button';\n\nimport { ReactComponent as CloseSVG } from '../../assets/icons/close-button-2x.svg';\nimport { ReactComponent as PenSVG } from '../../assets/icons/pen.svg';\n\nexport const FilterHeaderButton = ({ onDeleteFilter, buttonLabel, isOpen, ...props }) => {\n const handleCloseFilter = (event) => {\n event.preventDefault();\n event.stopPropagation();\n\n onDeleteFilter && onDeleteFilter(props);\n };\n\n const label = () => (\n - \n
- \n …\n \n );\n }\n\n return (\n
\n
\n \n {paginationRange.map((pageNumber) => {\n if (pageNumber === DOTS) {\n return (\n \n
\n \n \n
\n );\n\n return (\n {buttonLabel || props.placeholder}
\n \n
\n \n No filtered data for this time period
\n }\n customCloseNode={\n onRefreshClick && (\n \n )\n }\n />\n \n );\n};\n\nNoFilteredDataAlert.propTypes = {\n text: PropTypes.string,\n onRefreshClick: PropTypes.func.isRequired,\n};\n\nexport default NoFilteredDataAlert;\n","export const sanitizeNumbers = (stringValue, min, max) => {\n if (!stringValue) {\n return stringValue;\n }\n\n if (stringValue === '0-') {\n return '-';\n }\n\n if (/^[+-]/.test(stringValue) && stringValue.length === 1) {\n return stringValue;\n }\n\n if (stringValue.length > 0 && !stringValue.match(/\\d/g)) {\n return '';\n }\n\n let stringValueOutput = stringValue;\n\n try {\n stringValueOutput\n .replace(/(-\\+)|(\\+-)/g, '')\n .replace(/-+/g, '-')\n .replace(/\\++/g, '');\n } catch (e) {}\n\n if (stringValueOutput < min) {\n stringValueOutput = 0;\n }\n\n return parseFloat(stringValueOutput);\n};\n","import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { getTrackBackground, Range } from 'react-range';\nimport PropTypes from 'prop-types';\n\nimport Typography from '../typography';\nimport Brick from '../brick';\nimport Input from '../form/input/Input';\nimport { ButtonGroup } from '../buttonGroup';\nimport { NoFilteredDataAlert } from '../noFilteredDataAlert';\n\nimport { sanitizeNumbers } from './helper';\nimport { ReactComponent as TrendUpSVG } from '../assets/icons/arrow-trend-up.svg';\nimport { ReactComponent as TrendDownSVG } from '../assets/icons/arrow-trend-down.svg';\n\nimport './RangeSlider.scss';\n\nconst DEFAULT_STEP = 1;\nconst COLORS = ['#EAECF0', '#2955E7', '#EAECF0'];\n\nconst Thumb = React.forwardRef((props, ref) => {\n return (\n \n
\n );\n});\n\nconst Track = ({ props, children, min, max, values }) => (\n \n \n {props.value}\n {props.prefix}\n \n
\n \n {title} \n isActive)}\n />\n handleSelection(values)}\n renderTrack={(props) => }\n renderThumb={({ props, index, isDragged }) => (\n
\n );\n};\n\nRangeSlider.defaultProps = {\n buttonGroup: [{ label: 'All' }, { icon: \n
\n \n
\n );\n};\n\nLastUpdated.propTypes = {\n initialValues: PropTypes.object.isRequired,\n onChange: PropTypes.func,\n};\n\nexport default LastUpdated;\n","import React, { useCallback, useContext } from 'react';\nimport { ButtonGroup } from '../../buttonGroup';\nimport { ReactComponent as WifiSVG } from '../../assets/icons/wifi.svg';\nimport { ReactComponent as WifiSlashSVG } from '../../assets/icons/wifislash.svg';\nimport { DataTableWidgetContext } from '../DataTableWidget';\n\nconst STATUS_FILTER_OPTIONS = [\n { label: 'All Statuses' },\n { label: 'Online', icon: \n handleInputChange(event, 'within-the-last')}\n />\n handleSelectChange(option, 'within-the-last')}\n defaultValue={withinTheLast.period}\n options={[\n { label: 'minutes', value: 'minutes' },\n { label: 'hours', value: 'hours' },\n ]}\n />\n
\n\n \n handleInputChange(event, 'more-than')} />\n handleSelectChange(option, 'more-than')}\n defaultValue={moreThan.period}\n options={[\n { label: 'minutes ago', value: 'minutes ago' },\n { label: 'hours ago', value: 'hours ago' },\n ]}\n />\n
\n\n \n handleSelectDateRange(args, 'date-range')}\n />\n
\n \n
\n );\n }}>\n {}}>\n {}}\n buttonLabel={\n selectedOptions.length > 1\n ? `${selectedOptions.length} List items`\n : selectedOptions[0]?.label\n }\n onDeleteFilter={props.onDeleteFilter}\n />\n
\n ),\n }}\n isSearchable\n {...props.componentProps}\n />\n );\n },\n\n [FILTER_TYPES.LAST_UPDATED_SELECTOR]: (props) => {\n const { selectedFiltersValues, setSelectedFiltersValues } = useContext(DataTableWidgetContext);\n\n let filterValue = { ...selectedFiltersValues[FILTER_TYPES.LAST_UPDATED_SELECTOR] };\n const activeVariant = selectedFiltersValues[FILTER_TYPES.LAST_UPDATED_SELECTOR].active;\n\n const handleChange = (value) => {\n filterValue = { ...filterValue, ...value };\n };\n\n const handleClose = () => {\n setSelectedFiltersValues((oldState) => {\n return { ...oldState, [FILTER_TYPES.LAST_UPDATED_SELECTOR]: filterValue };\n });\n };\n\n const buttonLabel = () => {\n if (activeVariant === 'date-range') {\n try {\n const startDate = filterValue[activeVariant]?.rangeDate[0];\n const endDate = filterValue[activeVariant]?.rangeDate[1];\n const isTheSameYear = startDate.isSame(endDate, 'year');\n\n return `${filterValue[activeVariant]?.rangeDate[0].format(\n `MMM D ${!isTheSameYear ? 'YYYY' : ''}`\n )} - ${filterValue[activeVariant]?.rangeDate[1].format(`MMM D ${!isTheSameYear ? 'YYYY' : ''}`)}`;\n } catch (e) {}\n }\n\n if (+filterValue[activeVariant]?.value === 0) {\n return;\n }\n\n if (activeVariant === 'more-than') {\n return `More than ${filterValue[activeVariant].value} ${filterValue[activeVariant].period}`;\n }\n\n if (activeVariant === 'within-the-last') {\n return `Within the last ${filterValue[activeVariant].value} ${filterValue[activeVariant].period}`;\n }\n };\n\n return (\n \n
\n );\n }}>\n \n {widgetProps.onSearch && }\n\n {filterOptions && (\n (\n
\n );\n};\n","import React from 'react';\nimport cx from 'classnames';\nimport PropTypes from 'prop-types';\n\nimport './DropDownListItem.scss';\nimport { Checkbox } from '../../form/checkbox';\nimport Typography from '../../typography';\n\nconst DropDownListItem = (props) => {\n const className = cx(\n 'drop-down-list-item-wrapper justify-content-center align-items-center d-flex',\n props.className\n );\n\n const typoClassName = cx('flex-grow-1 gray-550', props.labelClassName);\n\n const keysToExclude = ['labelClassName', 'labelText', 'children', 'className', 'noDefinedContent'];\n const checkboxProps = Object.keys(props).reduce((acc, key) => {\n if (!keysToExclude.includes(key) && !!props[key]) {\n acc[key] = props[key];\n }\n return acc;\n }, {});\n\n return (\n \n
\n ),\n }}\n />\n )}\n {!hideStatusFilter && \n {props.noDefinedContent ? (\n props.children\n ) : (\n <>\n \n {props.labelText}\n {props.children}\n \n \n )}\n
\n );\n};\n\nDropDownListItem.propTypes = {\n labelText: PropTypes.string.isRequired,\n withCheckbox: PropTypes.bool,\n noDefinedContent: PropTypes.bool,\n checkboxProps: PropTypes.object,\n};\n\nexport default DropDownListItem;\n","import React from 'react';\nimport cx from 'classnames';\nimport PropTypes from 'prop-types';\n\nimport { DropDownListItem } from '../dropDownListItem';\n\nimport { generateID, stringOrNumberPropTypes } from '../../helpers/helper';\n\nimport './DropDownMenuBase.scss';\n\nconst DropDownMenuBase = ({ lists = [], children, ...props }) => {\n return (\n \n {lists.map((list) => (\n
\n );\n};\n\nDropDownMenuBase.propTypes = {\n lists: PropTypes.arrayOf(\n PropTypes.shape({\n labelText: PropTypes.string.isRequired,\n id: stringOrNumberPropTypes,\n className: PropTypes.string,\n labelClassName: PropTypes.string,\n }).isRequired\n ),\n};\n\nexport default DropDownMenuBase;\n","var _path;\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nimport * as React from \"react\";\nfunction SvgGripLines(_ref, svgRef) {\n let {\n title,\n titleId,\n ...props\n } = _ref;\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 24,\n height: 24,\n viewBox: \"0 0 24 24\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M19.5625 10.875H3.9375C3.39062 10.875 3 10.4844 3 9.9375C3 9.42969 3.39062 9 3.9375 9H19.5625C20.0703 9 20.5 9.42969 20.5 9.9375C20.5 10.4844 20.0703 10.875 19.5625 10.875ZM19.5625 15.875H3.9375C3.39062 15.875 3 15.4844 3 14.9375C3 14.4297 3.39062 14 3.9375 14H19.5625C20.0703 14 20.5 14.4297 20.5 14.9375C20.5 15.4844 20.0703 15.875 19.5625 15.875Z\",\n fill: \"#7C879C\"\n })));\n}\nconst ForwardRef = /*#__PURE__*/React.forwardRef(SvgGripLines);\nexport default __webpack_public_path__ + \"static/media/grip-lines.78980564.svg\";\nexport { ForwardRef as ReactComponent };","var _path;\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nimport * as React from \"react\";\nfunction SvgColumns(_ref, svgRef) {\n let {\n title,\n titleId,\n ...props\n } = _ref;\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 18,\n height: 16,\n viewBox: \"0 0 18 16\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M15.2503 0.5C16.3896 0.5 17.3337 1.44401 17.3337 2.58333V13C17.3337 14.1719 16.3896 15.0833 15.2503 15.0833H2.75033C1.57845 15.0833 0.666992 14.1719 0.666992 13V2.58333C0.666992 1.44401 1.57845 0.5 2.75033 0.5H15.2503ZM2.75033 13.5208H8.21908V4.66667H2.22949V13C2.22949 13.293 2.45736 13.5208 2.75033 13.5208ZM9.78158 13.5208H15.2503C15.5107 13.5208 15.7712 13.293 15.7712 13V4.66667H9.78158V13.5208Z\",\n fill: \"#1D2939\"\n })));\n}\nconst ForwardRef = /*#__PURE__*/React.forwardRef(SvgColumns);\nexport default __webpack_public_path__ + \"static/media/columns.7374c18b.svg\";\nexport { ForwardRef as ReactComponent };","import React, { useContext, useEffect, useState } from 'react';\nimport { sortableContainer, sortableElement, sortableHandle } from 'react-sortable-hoc';\n\nimport { DropDownIcon } from '../../dropDowns/dropDownButton';\nimport { Checkbox } from '../../form/checkbox';\nimport { DataTableWidgetContext } from '../DataTableWidget';\n\nimport DropDownMenuBase from '../../others/dropDownMenuBase/DropDownMenuBase';\nimport { DropDownListItem } from '../../others/dropDownListItem';\nimport Typography from '../../typography';\n\nimport { ReactComponent as GripLinesSVG } from '../../assets/icons/grip-lines.svg';\nimport { ReactComponent as ColumnsSVG } from '../../assets/icons/columns.svg';\n\nconst DragHandle = sortableHandle((props) => (\n \n \n {name} \n {onSort && SORT_TYPES[state] &&
\n \n \n
\n ) : (\n \n Select at least one \"Header\".\n \n )}\n
\n \n
\n\n \n {showExternalButton ? (\n
\n \n
\n )}\n \n );\n};\n\nDataTableWidget.SortTypes = SORT_TYPES;\n\nDataTableWidget.propTypes = {\n onDownload: PropTypes.func,\n onSearch: PropTypes.func,\n onDeleteRow: PropTypes.func,\n isDeletable: PropTypes.func,\n onEditRow: PropTypes.func,\n isEditable: PropTypes.func,\n onViewRow: PropTypes.func,\n isViewable: PropTypes.func,\n /**** The following 4 props are responsible for showing pagination ****/\n onChangePage: PropTypes.func,\n totalCount: PropTypes.func.isRequired,\n currentPage: PropTypes.number,\n onPageSize: PropTypes.func,\n pageSize: PropTypes.number,\n //@TODO More generic func, now it is not important\n onStatus: PropTypes.func,\n status: PropTypes.number,\n rows: PropTypes.array.isRequired,\n searchResultRows: PropTypes.array.isRequired,\n disableColumnDragging: PropTypes.bool,\n filterOptions: PropTypes.arrayOf(\n PropTypes.shape({\n id: stringOrNumberPropTypes,\n label: PropTypes.string.isRequired,\n value: PropTypes.string.isRequired,\n placeholder: PropTypes.string.isRequired,\n filterType: PropTypes.oneOf(Object.values(FILTER_TYPES)),\n filterOptions: PropTypes.arrayOf(\n PropTypes.shape({\n label: PropTypes.string.isRequired,\n value: stringOrNumberPropTypes.isRequired,\n })\n ),\n // Props depend on what component was selected for particular filter.\n componentProps: PropTypes.object,\n isOpened: PropTypes.bool,\n })\n ),\n headers: PropTypes.arrayOf(\n PropTypes.shape({\n name: PropTypes.string.isRequired,\n accessor: PropTypes.string.isRequired,\n callbackValue: PropTypes.func,\n onSort: PropTypes.func,\n })\n ),\n customExcludedHeaders: PropTypes.array,\n onCheckboxRow: PropTypes.func,\n onCheckAll: PropTypes.func,\n id: PropTypes.string,\n buttonGroupFilterOptions: PropTypes.array,\n customComponentForCells: PropTypes.node,\n customCheckboxForCell: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),\n customCheckAll: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),\n isLoadingComponent: PropTypes.node.isRequired,\n isLoading: PropTypes.bool.isRequired,\n isFilterLoading: PropTypes.bool,\n filters: PropTypes.shape({\n selectedFilters: PropTypes.object,\n selectedFiltersValues: PropTypes.object,\n }),\n hidePaginationIfNotEnoughItems: PropTypes.bool,\n};\n\nexport default DataTableWidget;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Typography from '../typography';\nimport cx from 'classnames';\n\nimport './Badge.scss';\n\nexport default function Badge({ text = '', ...props }) {\n return (\n text && (\n \n \n {text}\n \n
\n )\n );\n}\n\nBadge.propTypes = {\n text: PropTypes.string.isRequired,\n typographyClassName: PropTypes.string,\n};\n","var _path;\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nimport * as React from \"react\";\nfunction SvgExclamationCircle(_ref, svgRef) {\n let {\n title,\n titleId,\n ...props\n } = _ref;\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 20,\n height: 20,\n viewBox: \"0 0 20 20\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M10 0C4.45312 0 0 4.49219 0 10C0 15.5469 4.45312 20 10 20C15.5078 20 20 15.5469 20 10C20 4.49219 15.5078 0 10 0ZM10 18.125C5.50781 18.125 1.875 14.4922 1.875 10C1.875 5.54688 5.50781 1.875 10 1.875C14.4531 1.875 18.125 5.54688 18.125 10C18.125 14.4922 14.4531 18.125 10 18.125ZM10 11.875C10.5078 11.875 10.9375 11.4844 10.9375 10.9375V5.9375C10.9375 5.42969 10.5078 5 10 5C9.45312 5 9.0625 5.42969 9.0625 5.9375V10.9375C9.0625 11.4844 9.45312 11.875 10 11.875ZM10 13.2031C9.29688 13.2031 8.75 13.75 8.75 14.4141C8.75 15.0781 9.29688 15.625 10 15.625C10.6641 15.625 11.2109 15.0781 11.2109 14.4141C11.2109 13.75 10.6641 13.2031 10 13.2031Z\",\n fill: \"#7C879C\"\n })));\n}\nconst ForwardRef = /*#__PURE__*/React.forwardRef(SvgExclamationCircle);\nexport default __webpack_public_path__ + \"static/media/exclamation-circle.8cbd6f86.svg\";\nexport { ForwardRef as ReactComponent };","var _path;\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nimport * as React from \"react\";\nfunction SvgTriangleExclamation(_ref, svgRef) {\n let {\n title,\n titleId,\n ...props\n } = _ref;\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 24,\n height: 24,\n viewBox: \"0 0 24 24\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M21.8072 18.0391L13.4868 3.82031C13.1353 3.27344 12.5884 3 12.0415 3C11.4556 3 10.9087 3.27344 10.5572 3.82031L2.19778 18.0391C1.61185 19.1328 2.3931 20.5 3.68216 20.5H20.3618C21.6509 20.5 22.4322 19.1328 21.8072 18.0391ZM4.07278 18.625L12.0025 5.07031L19.9712 18.625H4.07278ZM12.0415 14.9531C11.3384 14.9531 10.7915 15.5 10.7915 16.1641C10.7915 16.8281 11.3384 17.375 12.0415 17.375C12.7056 17.375 13.2525 16.8281 13.2525 16.1641C13.2525 15.5 12.7056 14.9531 12.0415 14.9531ZM11.104 8.9375V12.6875C11.104 13.2344 11.4947 13.625 12.0415 13.625C12.5493 13.625 12.979 13.2344 12.979 12.6875V8.9375C12.979 8.42969 12.5493 8 12.0415 8C11.4947 8 11.104 8.42969 11.104 8.9375Z\",\n fill: \"#7C879C\"\n })));\n}\nconst ForwardRef = /*#__PURE__*/React.forwardRef(SvgTriangleExclamation);\nexport default __webpack_public_path__ + \"static/media/triangle-exclamation.b662c087.svg\";\nexport { ForwardRef as ReactComponent };","var _path;\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nimport * as React from \"react\";\nfunction SvgCircleCheck(_ref, svgRef) {\n let {\n title,\n titleId,\n ...props\n } = _ref;\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 24,\n height: 24,\n viewBox: \"0 0 24 24\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M11.4922 15.2812C11.0625 15.7109 10.3984 15.7109 9.96875 15.2812L7.46875 12.7812C7.03906 12.3516 7.03906 11.6875 7.46875 11.2578C7.89844 10.8281 8.5625 10.8281 8.99219 11.2578L10.75 12.9766L14.9688 8.75781C15.3984 8.32812 16.0625 8.32812 16.4922 8.75781C16.9219 9.1875 16.9219 9.85156 16.4922 10.2812L11.4922 15.2812ZM22 12C22 17.5469 17.5078 22 12 22C6.45312 22 2 17.5469 2 12C2 6.49219 6.45312 2 12 2C17.5078 2 22 6.49219 22 12ZM12 3.875C7.50781 3.875 3.875 7.54688 3.875 12C3.875 16.4922 7.50781 20.125 12 20.125C16.4531 20.125 20.125 16.4922 20.125 12C20.125 7.54688 16.4531 3.875 12 3.875Z\",\n fill: \"#7C879C\"\n })));\n}\nconst ForwardRef = /*#__PURE__*/React.forwardRef(SvgCircleCheck);\nexport default __webpack_public_path__ + \"static/media/circle-check.f5ee0e2f.svg\";\nexport { ForwardRef as ReactComponent };","import React, { useCallback, useEffect, useState } from 'react';\nimport cx from 'classnames';\nimport PropTypes from 'prop-types';\n\nimport Typography from '../typography';\nimport Brick from '../brick';\nimport { Button } from '../button';\n\nimport { renderElementIfValid } from '../helpers/helper';\nimport { COMPONENT_TYPES, TYPES, COLORS_MAP_ALERT, COLORS_MAP_SNACKBAR } from './constants';\n\nimport { ReactComponent as ExclamationCircleSVG } from '../assets/icons/exclamation-circle.svg';\nimport { ReactComponent as TriangleExclamationSVG } from '../assets/icons/triangle-exclamation.svg';\nimport { ReactComponent as TooltipSVG } from '../assets/icons/tooltip.svg';\nimport { ReactComponent as CircleCheckSVG } from '../assets/icons/circle-check.svg';\nimport { ReactComponent as CloseButtonSVG } from '../assets/icons/close-button.svg';\n\nimport './Notification.scss';\n\nconst IconMap = {\n error: ExclamationCircleSVG,\n warning: TriangleExclamationSVG,\n info: TooltipSVG,\n success: CircleCheckSVG,\n};\n\nexport const ALERT_DURATION = 4000;\n\nconst Notification = (props) => {\n const {\n title,\n description,\n onClose,\n icon,\n actionButtons,\n component,\n type,\n isShownCloseBtn,\n closeByCloseBtn = true,\n duration = ALERT_DURATION,\n closeAutomatically,\n customCloseNode,\n } = props;\n\n const [isShown, setIsShown] = useState(props.isShown);\n\n useEffect(() => {\n setIsShown(props.isShown);\n }, [props.isShown]);\n\n const handleClose = useCallback((event) => {\n onClose && onClose(event);\n closeByCloseBtn && setIsShown(false);\n }, []);\n\n useEffect(() => {\n if (!closeAutomatically) {\n return;\n }\n\n // Sets timeout to close the alert\n const timerId = +setTimeout(handleClose, duration);\n return () => clearTimeout(timerId);\n }, []);\n\n if (!isShown) {\n return null;\n }\n\n const renderActionButtons = (currentColorsSchema) => {\n if (React.isValidElement(actionButtons)) {\n return renderElementIfValid(actionButtons);\n }\n\n if (actionButtons) {\n return (\n \n {actionButtons.map((data, index) => {\n if (React.isValidElement(data)) {\n return renderElementIfValid(data);\n }\n\n return (\n data.label && (\n
\n );\n }\n };\n\n const colorsSchema = component === COMPONENT_TYPES.alert ? COLORS_MAP_ALERT : COLORS_MAP_SNACKBAR;\n const currentColorsSchema = colorsSchema[type];\n\n const renderIcon = () => {\n const classNamesIcon = cx(\n 'notification-icon',\n type,\n component === COMPONENT_TYPES.alert ? 'alert-icon' : 'snack-bar-icon'\n );\n\n if (React.isValidElement(icon)) {\n return React.cloneElement(icon, { ...icon.props, className: cx(classNamesIcon, icon.props?.className) });\n }\n\n if (icon && typeof icon === 'string') {\n return \n
\n );\n};\n\nNotification.Types = TYPES;\nNotification.ComponentTypes = COMPONENT_TYPES;\n\nNotification.propTypes = {\n title: PropTypes.oneOfType([PropTypes.string.isRequired, PropTypes.node.isRequired]),\n description: PropTypes.oneOfType([PropTypes.string.isRequired, PropTypes.node.isRequired]),\n onClose: PropTypes.func,\n customCloseNode: PropTypes.node,\n icon: PropTypes.oneOfType([PropTypes.string.isRequired, PropTypes.node.isRequired]),\n actionButtons: PropTypes.oneOfType([\n PropTypes.node.isRequired,\n PropTypes.arrayOf(\n PropTypes.shape({\n label: PropTypes.string.isRequired,\n onClick: PropTypes.func,\n })\n ),\n ]),\n component: PropTypes.oneOf(Object.values(COMPONENT_TYPES)),\n type: PropTypes.oneOf(Object.values(TYPES)),\n isShown: PropTypes.bool,\n isShownCloseBtn: PropTypes.bool,\n closeByCloseBtn: PropTypes.bool,\n closeAutomatically: PropTypes.bool,\n duration: PropTypes.number,\n};\n\nNotification.defaultProps = {\n isShown: true,\n isShownCloseBtn: true,\n};\n\nexport { Notification };\n","import React from 'react';\nimport Skeleton, { SkeletonTheme } from 'react-loading-skeleton';\nimport 'react-loading-skeleton/dist/skeleton.css';\nimport colorPalette from '../assets/scss/_colors.module.scss';\n\nconst SkeletonLoader = ({ noOfColumns = 5, noOfRows = 10 }) => {\n const rowArray = Array.from({ length: noOfColumns });\n\n return (\n \n \n
\n {renderIcon()}
\n \n
\n {!customCloseNode && isShownCloseBtn && (\n \n \n {title}\n \n \n {description}\n \n
\n\n {renderActionButtons(currentColorsSchema)}\n \n
\n );\n};\n\n//Single\nconst CustomOptionContent = ({ component: Component, className, customOptionOnClick, ...props }) => {\n const { supportText } = props.data;\n const { type, customOption } = props.selectProps;\n\n const isOptionComponent = Object.is(Component, components.Option);\n const isSingleValueComponent = Object.is(Component, components.SingleValue);\n\n const children = !!customOption ? React.cloneElement(customOption, { className }, props.children) : props.children;\n\n const IconProps = { ...props.selectProps, ...props.data, isSingleValueComponent };\n const TypoProps = { ...props, ...props.selectProps, ...{ children, isOptionComponent, supportText } };\n const ChartAndIconProps = {\n ...props,\n ...props.data,\n ...{ isOptionComponent, hideTick: props.selectProps.hideTick },\n };\n\n return (\n {isShownChart &&
\n {isSelected && !hideTick && \n
\n \n \n {props.children}\n \n \n
\n);\n\nexport const OptionMulti = (props) => {\n const { isDisabled, isSelected, isFocused, children } = props;\n const { customOption } = props.selectProps;\n\n const className = optionClasses({ isDisabled, isSelected, isFocused, customOption });\n const isSelectAllOption = props.value === selectAllOption.value;\n\n const IconProps = { ...props.selectProps, ...props.data };\n const TypoProps = {\n ...props,\n ...props.selectProps,\n ...{ children, isOptionComponent: true, supportText: props.data.supportText },\n };\n\n const ChartAndIconProps = {\n ...props,\n ...props.data,\n ...{ isOptionComponent: true, hideTick: props.selectProps.hideTick },\n };\n\n if (isSelectAllOption) {\n props.innerProps.onClick = props.selectProps.checkAllCheckboxes;\n }\n\n const isIndeterminate =\n (props.selectProps.value || []).length !== props.selectProps.options.length &&\n !!(props.selectProps.value || []).length;\n\n return (\n <>\n \n {isSelectAllOption ? (\n <>\n \n {TypoProps.children}\n \n \n ) : (\n <>\n
\n \n \n
\n )}\n {showButton && (\n {title}
\n {showCalendar && (\n \n
\n {showExplore && (\n \n
\n \n )}\n \n {mockedYAxis.map((el) => {\n return (\n \n {el}\n \n );\n })}\n
\n );\n };\n\n const renderXAxis = () => {\n return (\n \n {mockedXAxis.map((el) => {\n return (\n \n {el * 2}\n \n );\n })}\n
\n );\n };\n\n return (\n \n
\n );\n};\n\nexport default EmptyLineChart;","import React from 'react';\nimport { hexToRgb } from '../../utils/helper';\nimport { DATAVIZ_COLORS } from '../../constants/colors';\nimport { renderComponents } from '../columnChart/helper';\nimport Typography from '../../sharedComponents/typography';\nimport colors from '../../assets/scss/_colors.module.scss';\nimport { PLOT_BANDS_TYPE } from '../common/charts/modules/contants';\nimport { formatConsumptionValue } from '../helpers/helper';\n\nconst preparedData = (data, chartType) => {\n return data.map((el, index) => {\n return {\n type: chartType,\n color: DATAVIZ_COLORS[`datavizMain${index + 1}`],\n data: el.data,\n name: el.name,\n lineWidth: 2,\n showInLegend: true,\n panning: true,\n panKey: 'shift',\n fillColor: el.fillColor\n ? el.fillColor\n : {\n linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },\n stops: [\n [\n 0,\n index + 1 <= 27\n ? DATAVIZ_COLORS[`datavizMain${index + 1}`]\n : DATAVIZ_COLORS['datavizMain1'],\n ],\n [1, 'rgba(255,255,255,.01)'],\n ],\n },\n };\n });\n};\n\nexport const options = ({\n data,\n dateRange,\n Highcharts,\n tooltipUnit,\n tooltipLabel,\n widthOfWrapper,\n plotBands,\n chartType,\n}) => {\n const plotBandsData = plotBands\n ?.map(({ background, from, to, borderBottomColor, type }) => {\n switch (type) {\n case PLOT_BANDS_TYPE.off_hours: {\n return {\n from,\n to,\n color: 'rgb(16 24 40 / 25%)',\n };\n }\n case PLOT_BANDS_TYPE.after_hours: {\n return [\n {\n from,\n to,\n color: {\n linearGradient: { x1: 1, y1: 1, x2: 1, y2: 0 },\n stops: [\n [0, 'rgba(240, 68, 56, 0.4)'],\n [0.07, 'rgba(240, 68, 56, 0.08)'],\n [1, 'rgba(240, 68, 56, 0.08)'],\n ],\n },\n },\n {\n from,\n to,\n color: {\n linearGradient: { x1: 1, y1: 1, x2: 1, y2: 0 },\n stops: [\n [0, colors.error700],\n [0.007, 'rgba(0, 0, 0, 0)'],\n ],\n },\n },\n ];\n }\n }\n\n if (Array.isArray(background)) {\n return [\n {\n from,\n to,\n color: {\n linearGradient: { x1: 1, y1: 1, x2: 1, y2: 0 },\n stops: background,\n },\n },\n {\n from,\n to,\n color: {\n linearGradient: { x1: 1, y1: 1, x2: 1, y2: 0 },\n stops: [\n [0, borderBottomColor],\n [0.007, 'rgba(0, 0, 0, 0)'],\n ],\n },\n },\n ];\n }\n\n if (typeof background === 'string') {\n return {\n from,\n to,\n color: background,\n };\n }\n })\n .flat();\n\n return {\n chart: {\n type: 'line',\n zoomType: 'x',\n animation: {\n duration: 1000,\n },\n },\n navigator: {\n enabled: false,\n },\n legend: {\n enabled: true,\n align: 'left',\n bottom: 0,\n width: widthOfWrapper,\n itemMarginTop: 8,\n itemDistance: 0,\n useHTML: true,\n labelFormatter: function () {\n let color = hexToRgb(this.color);\n if (!this.visible) {\n color = { r: 204, g: 204, b: 204 };\n }\n var symbol = ``;\n return `${symbol} ${this.name}`;\n },\n borderWidth: 0,\n className: 'legend-text',\n },\n\n tooltip: {\n headerFormat: `\n {renderYAxis()}\n
\n \n
\n {renderXAxis()}
\n \n
\n \n \n Series 1 \n
\n\n ${renderComponents(\n <>\n \n {tooltipLabel && tooltipLabel}\n \n \n {'{point.key}'}\n \n \n )} `,\n pointFormatter: function () {\n const formattedValue = formatConsumptionValue(this.y, 2);\n\n return `
',\n split: false,\n shared: true,\n useHTML: true,\n snap: 0,\n shape: 'div',\n padding: 0,\n borderWidth: 0,\n shadow: 0,\n borderRadius: '0.25rem',\n },\n rangeSelector: {\n enabled: false,\n },\n plotOptions: {\n area: {\n fillColor: {\n linearGradient: {\n x1: 0,\n y1: 0,\n x2: 0,\n y2: 1,\n },\n stops: [\n [0, Highcharts.getOptions().colors[0]],\n [1, Highcharts.color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')],\n ],\n },\n marker: {\n radius: 2,\n },\n lineWidth: 1,\n states: {\n hover: {\n lineWidth: 1,\n },\n },\n turboThreshold: 0,\n },\n },\n credits: {\n enabled: false,\n },\n scrollbar: {\n enabled: false,\n },\n xAxis: {\n lineWidth: 1,\n ordinal: false,\n gridLineWidth: plotBands ? 0 : 1,\n alternateGridColor: plotBands ? undefined : colors.primaryGray100,\n max: dateRange?.maxDate,\n min: dateRange?.minDate,\n type: 'datetime',\n labels: {\n format: '{value: %e %b `%y}',\n padding: 10,\n },\n zoomEnabled: true,\n plotBands: plotBandsData,\n },\n yAxis: {\n gridLineWidth: 1,\n lineWidth: 1,\n opposite: false,\n accessibility: {\n enabled: true,\n },\n },\n\n time: {\n useUTC: true,\n },\n series: preparedData(data, chartType),\n exporting: {\n enabled: false,\n },\n };\n};\n","import React, { useRef, useState, useEffect, useCallback, useMemo } from 'react';\nimport PropTypes from 'prop-types';\nimport { Spinner } from 'reactstrap';\nimport Highcharts from 'highcharts/highstock';\nimport _ from 'lodash';\n\nimport HighchartsReact from 'highcharts-react-official';\nimport Button from '../button/Button';\nimport Typography from '../typography';\nimport { ReactComponent as ArrowSVG } from '../../assets/icon/arrow.svg';\nimport { ReactComponent as BurgerSVG } from '../../assets/icon/burger.svg';\nimport DropDownIcon from '../dropDowns/dropDownButton/DropDownIcon';\nimport EmptyLineChart from './components/emptyLineChart/EmptyLineChart';\nimport { options } from './constants';\nimport { DOWNLOAD_TYPES } from '../constants';\nimport { PLOT_BANDS_TYPE } from '../common/charts/modules/contants';\n\nimport HighchartsExporting from 'highcharts/modules/exporting';\nimport HighchartsData from 'highcharts/modules/export-data';\nimport { generateID, stringOrNumberPropTypes } from '../helpers/helper';\nimport { UNITS } from '../../constants/units';\n\nimport Brick from '../brick';\nimport { UpperLegendComponent } from '../common/charts/components/UpperLegendComponent/UpperLegendComponent';\nimport { usePlotBandsLegends } from '../common/charts/hooks/usePlotBandsLegends';\n\nimport './LineChart.scss';\nimport useCSVDownload from '../../sharedComponents/hooks/useCSVDownload';\n\nHighchartsExporting(Highcharts);\nHighchartsData(Highcharts);\n\nconst LineChart = (props) => {\n const chartComponentRef = useRef(null);\n const wrapperRef = useRef(null);\n\n const { download } = useCSVDownload();\n\n const [widthOfWrapper, setWidthOfWrapper] = useState(0);\n\n const {\n data,\n title,\n subTitle,\n handleMoreClick,\n dateRange,\n tooltipUnit,\n tooltipLabel,\n plotBands: plotBandsProp,\n plotBandsLegends,\n isLoadingData,\n unitInfo,\n chartProps,\n customDownloadCsvHandler,\n exportName = '',\n chartType = 'area',\n isDownloadRequired = true,\n className = '',\n } = props;\n\n useEffect(() => {\n const handleResize = () => {\n const width = wrapperRef.current?.offsetWidth;\n if (handleMoreClick) {\n setWidthOfWrapper(width - 150);\n } else {\n setWidthOfWrapper(width);\n }\n };\n\n window.addEventListener('resize', handleResize);\n return () => window.removeEventListener('resize', handleResize);\n }, [handleMoreClick]);\n\n const handleDropDownOptionClicked = (name) => {\n switch (name) {\n case DOWNLOAD_TYPES.downloadSVG:\n downloadSVG();\n break;\n case DOWNLOAD_TYPES.downloadPNG:\n downloadPNG();\n break;\n case DOWNLOAD_TYPES.downloadCSV:\n downloadCSV();\n break;\n default:\n break;\n }\n };\n\n const downloadCSV = () => {\n if (customDownloadCsvHandler) {\n customDownloadCsvHandler();\n } else {\n const originalCSV = chartComponentRef.current.chart.getCSV();\n download(exportName + '.csv', originalCSV);\n }\n };\n\n const downloadPNG = () => {\n chartComponentRef.current.chart.exportChart({ filename: exportName, type: 'image/png' });\n };\n\n const downloadSVG = () => {\n chartComponentRef.current.chart.exportChart({ filename: exportName, type: 'image/svg+xml' });\n };\n\n const { plotBands, renderPlotBandsLegends } = usePlotBandsLegends({ plotBandsProp, plotBandsLegends });\n\n const chartConfig = _.merge(\n options({\n data,\n dateRange,\n Highcharts,\n tooltipUnit,\n tooltipLabel,\n widthOfWrapper,\n plotBands,\n chartType,\n }),\n chartProps\n );\n\n return (\n | \n ${renderComponents(\n | ${renderComponents(\n |
\n
\n );\n};\n\nLineChart.propTypes = {\n plotBands: PropTypes.arrayOf(\n PropTypes.shape({\n background: PropTypes.oneOfType([PropTypes.string, PropTypes.array]).isRequired,\n from: PropTypes.number.isRequired,\n to: PropTypes.number.isRequired,\n type: PropTypes.oneOf(Object.values(PLOT_BANDS_TYPE)),\n\n // refer doc https://api.highcharts.com/class-reference/Highcharts.LinearGradientColorObject\n linearGradient: PropTypes.shape({\n x1: PropTypes.number,\n y1: PropTypes.number,\n x2: PropTypes.number,\n y2: PropTypes.number,\n }),\n })\n ),\n chartProps: PropTypes.object,\n unitInfo: PropTypes.shape({\n title: PropTypes.string,\n unit: PropTypes.oneOf(Object.values(UNITS)),\n value: stringOrNumberPropTypes,\n }),\n plotBandsLegends: PropTypes.arrayOf(\n PropTypes.shape({\n label: PropTypes.string,\n color: PropTypes.oneOfType([\n PropTypes.string.isRequired,\n PropTypes.shape({\n background: PropTypes.string.isRequired,\n borderColor: PropTypes.string.isRequired,\n }),\n ]).isRequired,\n onClick: PropTypes.func,\n })\n ),\n};\n\nLineChart.PLOT_BANDS_TYPE = PLOT_BANDS_TYPE;\n\nexport default LineChart;\n","// 1 square meter = 10.7639 feet\n// default feet imp - this is stored in DB\n\nexport const handleUnitConverstion = (value = 0, currentType = 'imp') => {\n if (currentType === 'si') value = value / 10.7639;\n return value;\n};\n\nexport const convertToMeters = (value) => {\n // feet => meter || imp => si\n return value / 10.7639;\n};\n\nexport const convertToFootage = (value) => {\n // meter => feet || si => imp\n return value * 10.7639;\n};\n","import _ from 'lodash';\nimport axiosInstance from './axiosInstance';\n\nimport {\n generalEquipments,\n deleteEquipment,\n createEquipment,\n getFiltersForEquipment,\n getEndUseId,\n getLocation,\n getMetadata,\n} from './Network';\n\nexport function getEqupmentDataRequest(\n panelNameFilterString,\n cdModelInstalledNameString,\n breakerNumberString,\n breakerRatedAmpsString,\n pageSize,\n pageNo,\n bldgId,\n search,\n equipmentTypeFilterString,\n endUseFilterString,\n macAddressFilterString,\n locationTypeFilterString,\n floorTypeFilterString,\n spaceTypeFilterString,\n tagsFilterString,\n locationServed,\n locationServedReserved,\n getParams,\n withPagination\n) {\n let params = `?building_id=${bldgId}`;\n\n if (search) {\n params += `&equipment_search=${encodeURIComponent(search)}`;\n }\n\n if (withPagination) {\n params += `&page_size=${pageSize}&page_no=${pageNo}`;\n }\n\n if (getParams?.order_by && getParams?.sort_by) {\n params += `&ordered_by=${getParams.order_by}&sort_by=${getParams.sort_by}`;\n }\n\n if (tagsFilterString?.order_by && tagsFilterString?.sort_by) {\n params += `&ordered_by=${tagsFilterString.order_by}&sort_by=${tagsFilterString.sort_by}`;\n }\n\n if (locationServedReserved) {\n params += `&location_served_reversed=${locationServedReserved}`;\n }\n\n const filteredData = _.pickBy(\n {\n floor_id: _.isEmpty(floorTypeFilterString) ? null : floorTypeFilterString,\n space_id: _.isEmpty(spaceTypeFilterString) ? null : spaceTypeFilterString,\n equipment_types: equipmentTypeFilterString,\n device_id: macAddressFilterString,\n panel_id: panelNameFilterString,\n ct_model_installed_id: cdModelInstalledNameString,\n breaker_number: breakerNumberString,\n breaker_rated_amps: breakerRatedAmpsString,\n tags: tagsFilterString,\n ...(Array.isArray(locationServed) && locationServed.length > 0 && { location_served: locationServed }),\n ...getParams,\n },\n _.identity\n );\n\n if (endUseFilterString && endUseFilterString.length) {\n filteredData['end_uses'] = endUseFilterString;\n }\n\n return axiosInstance\n .post(`${generalEquipments}${params}`, {\n ...filteredData,\n })\n .then((res) => {\n return res;\n });\n}\n\nexport function getMetadataRequest(bldgId) {\n let params = `?building_id=${bldgId}`;\n\n return axiosInstance.get(`${getMetadata}${params}`).then((res) => {\n return res.data;\n });\n}\n\nexport function getUnlinkedSocketRules(\n pageSize,\n pageNo,\n ruleId,\n activeBuildingId,\n equpimentTypeFilterString,\n macTypeFilterString,\n locationTypeFilterString,\n sensorTypeFilterString,\n floorTypeFilterString,\n spaceTypeFilterString,\n spaceTypeTypeFilterString,\n getParams\n) {\n let params = `?page_size=${pageSize}&page_no=${pageNo}&rule_id=${ruleId}&building_id=${activeBuildingId}&equipment_types=${encodeURIComponent(\n equpimentTypeFilterString\n )}&sensor_number=${encodeURIComponent(sensorTypeFilterString)}`;\n\n if (pageSize === 0) {\n return;\n }\n\n return axiosInstance\n .get(`${generalEquipments}${params}`, {\n params: _.pickBy(\n {\n floor_id: floorTypeFilterString,\n space_id: spaceTypeFilterString,\n space_type_id: spaceTypeTypeFilterString,\n mac_address: macTypeFilterString,\n ...getParams,\n },\n _.identity\n ),\n })\n .then((res) => {\n return res;\n });\n}\n\nexport function deleteEquipmentRequest(bldgId, equipmentIdData) {\n let params = `?equipment_id=${equipmentIdData}&building_id=${bldgId}`;\n return axiosInstance\n .delete(`${deleteEquipment}${params}`)\n .then((res) => {\n return res;\n })\n .catch((err) => {\n throw new Error(err);\n });\n}\nexport function addNewEquipment(bldgId, createEqipmentData) {\n let params = Object.assign({}, createEqipmentData);\n params['building_id'] = bldgId;\n\n return axiosInstance.post(`${createEquipment}`, params).then((res) => {\n return res;\n });\n}\n\n/**\n * Request filters.\n * @param args = {sensor_search, equipment_types, mac_address, tags, floor_id, space_id, space_type_id, sensor_number};\n * @returns {Promise\n
\n\n \n {title && {title} }\n {subTitle && {subTitle} }\n
\n {!!renderPlotBandsLegends?.length && (\n \n {renderPlotBandsLegends.map((legendProps) => {\n return
\n )}\n {unitInfo && (\n \n {unitInfo.title} \n
\n )}\n {isDownloadRequired && (\n \n \n {unitInfo.value}\n \n \n {unitInfo.unit}\n \n
\n \n
\n )}\n \n
\n ) : (\n <>\n \n
\n \n
\n )}\n \n )}\n \n
\n );\n};\n\nCheckbox.Sizes = CHECKBOX_SIZES;\nCheckbox.Types = CHECKBOX_TYPES;\nCheckbox.DropDownCheckbox = DropDownCheckbox;\n\nCheckbox.propTypes = {\n label: PropTypes.string.isRequired,\n description: PropTypes.string,\n id: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n size: PropTypes.oneOf(Object.values(CHECKBOX_SIZES)),\n indeterminate: PropTypes.bool,\n classInput: PropTypes.string,\n type: PropTypes.oneOf(Object.values(CHECKBOX_TYPES)),\n typographyProps: PropTypes.arrayOf(PropTypes.object),\n};\n\nexport default Checkbox;\n","import axiosInstance from '../../../services/axiosInstance';\nimport { createBuilding, generalBuilding, getFiltersForBuildings, getBuildingTypes } from '../../../services/Network';\n\nexport function saveBuildingData(payload) {\n return axiosInstance.post(`${createBuilding}`, payload).then((res) => res);\n}\n\nexport function fetchBuildingList(\n search = '',\n sort_by = 'ace',\n order_by = 'building_name',\n sqftAPIFlag,\n building_type,\n minVal,\n maxVal\n) {\n let params = `?building_search=${encodeURIComponent(search)}&ordered_by=${order_by}&sort_by=${sort_by}`;\n if (building_type) {\n let paramsToAppend = `&building_type=${building_type}`;\n params = params.concat(paramsToAppend);\n }\n\n if (sqftAPIFlag && sqftAPIFlag !== '') {\n let paramsToAppend = `&building_size_min=${minVal}&building_size_max=${maxVal}`;\n params = params.concat(paramsToAppend);\n }\n return axiosInstance.get(`${generalBuilding}${params}`).then((res) => res);\n}\n\nexport function getFiltersForBuildingsRequest(args) {\n return axiosInstance.get(`${getFiltersForBuildings}`).then((res) => {\n return res.data;\n });\n}\n\nexport function updateBuildingTypes() {\n return axiosInstance.get(`${getBuildingTypes}`).then((res) => res);\n}\n","var _path;\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nimport * as React from \"react\";\nfunction SvgChart(_ref, svgRef) {\n let {\n title,\n titleId,\n ...props\n } = _ref;\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 18,\n height: 16,\n viewBox: \"0 0 18 16\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M11.7177 6.50518C11.3597 6.8307 10.8388 6.8307 10.4482 6.53773L6.93258 3.90101L2.34274 7.54684C1.91956 7.90491 1.26852 7.83981 0.910449 7.38408C0.519824 6.9609 0.61748 6.30986 1.07321 5.91924L6.28154 1.78512C6.63962 1.4596 7.16045 1.4596 7.55107 1.75257L11.0667 4.38929L15.6565 0.743456C16.0797 0.352831 16.7308 0.450488 17.0888 0.906217C17.4795 1.32939 17.3818 1.98044 16.9261 2.33851L11.7177 6.50518ZM5.89092 7.77471C5.89092 7.22132 6.34665 6.73304 6.93258 6.73304C7.48597 6.73304 7.97425 7.22132 7.97425 7.77471V14.0247C7.97425 14.6106 7.48597 15.0664 6.93258 15.0664C6.34665 15.0664 5.89092 14.6106 5.89092 14.0247V7.77471ZM1.72425 10.8997C1.72425 10.3463 2.17998 9.85804 2.76592 9.85804C3.3193 9.85804 3.80758 10.3463 3.80758 10.8997V14.0247C3.80758 14.6106 3.3193 15.0664 2.76592 15.0664C2.17998 15.0664 1.72425 14.6106 1.72425 14.0247V10.8997ZM12.1409 9.85804V14.0247C12.1409 14.6106 11.6526 15.0664 11.0993 15.0664C10.5133 15.0664 10.0576 14.6106 10.0576 14.0247V9.85804C10.0576 9.30465 10.5133 8.81637 11.0993 8.81637C11.6526 8.81637 12.1409 9.30465 12.1409 9.85804ZM14.2243 7.77471C14.2243 7.22132 14.68 6.73304 15.2659 6.73304C15.8193 6.73304 16.3076 7.22132 16.3076 7.77471V14.0247C16.3076 14.6106 15.8193 15.0664 15.2659 15.0664C14.68 15.0664 14.2243 14.6106 14.2243 14.0247V7.77471Z\",\n fill: \"#7C879C\"\n })));\n}\nconst ForwardRef = /*#__PURE__*/React.forwardRef(SvgChart);\nexport default __webpack_public_path__ + \"static/media/chart.b786310a.svg\";\nexport { ForwardRef as ReactComponent };","import axiosInstance from '../../services/axiosInstance';\nimport {\n getEnergyConsumptionBySpaceV2,\n getEnergyConsumptionSpaceByCategory,\n getSpaceMetadataV2,\n getEquipmentBySpace,\n getEquipmentFiltersBySpace,\n} from '../../services/Network';\n\nconst parseQuery = (queryObj) => {\n const {\n bldgId = '',\n dateFrom = '',\n dateTo = '',\n tzInfo = 'US/Eastern',\n search,\n spaceTypeIds,\n equipmentTypeIds,\n endUsesCategoriesIds,\n selectedTags,\n minConsumption,\n maxConsumption,\n } = queryObj;\n\n let query = `?building_id=${bldgId}&date_from=${dateFrom}&date_to=${dateTo}&tz_info=${tzInfo}`;\n\n if (search) query += `&search=${search}`;\n\n if (spaceTypeIds && spaceTypeIds.length !== 0) {\n const stringSpaceTypeId = spaceTypeIds.join('+');\n query += `&space_type_ids=${encodeURIComponent(stringSpaceTypeId)}`;\n }\n\n if (equipmentTypeIds && equipmentTypeIds.length !== 0) {\n const stringEquipmentTypeId = equipmentTypeIds.join('+');\n query += `&equipment_type_ids=${encodeURIComponent(stringEquipmentTypeId)}`;\n }\n\n if (endUsesCategoriesIds && endUsesCategoriesIds.length !== 0) {\n const stringEndUsesId = endUsesCategoriesIds.join('+');\n query += `&end_use_ids=${encodeURIComponent(stringEndUsesId)}`;\n }\n\n if (selectedTags && selectedTags.length !== 0) {\n const stringTags = selectedTags.join('+');\n query += `&tags=${encodeURIComponent(stringTags)}`;\n }\n\n if (isFinite(minConsumption)) query += `&consumption_range_gte=${Number(minConsumption) * 1000}`;\n if (isFinite(maxConsumption)) query += `&consumption_range_lte=${Number(maxConsumption) * 1000}`;\n\n return query;\n};\n\nexport const fetchEnergyConsumptionSpaceByCategory = async (category, query) => {\n const { spaceId = '', bldgId = '', dateFrom = '', dateTo = '', tzInfo = 'US/Eastern' } = query;\n\n const params = `?space_ids=${spaceId}&building_id=${bldgId}&date_from=${dateFrom}&date_to=${dateTo}&tz_info=${tzInfo}`;\n\n return axiosInstance.get(`${getEnergyConsumptionSpaceByCategory}/${category}${params}`).then((res) => res?.data);\n};\n\nexport const fetchEnergyConsumptionBySpace = async (query) => {\n const { spaceId = '', bldgId = '', dateFrom = '', dateTo = '', tzInfo = 'US/Eastern' } = query;\n\n const params = `?space_ids=${spaceId}&building_id=${bldgId}&date_from=${dateFrom}&date_to=${dateTo}&tz_info=${tzInfo}`;\n\n return axiosInstance.get(`${getEnergyConsumptionBySpaceV2}/${params}`).then((res) => res?.data);\n};\n\nexport const fetchSpaceMetadata = async (query, spaceId) => {\n const { bldgId = '', dateFrom = '', dateTo = '', tzInfo = 'US/Eastern' } = query;\n\n const params = `?building_id=${bldgId}&date_from=${dateFrom}&date_to=${dateTo}&tz_info=${tzInfo}`;\n\n return axiosInstance.get(`${getSpaceMetadataV2}/${spaceId}${params}`).then((res) => res?.data);\n};\n\nexport const fetchEquipmentBySpace = async (spaceId, queryObj) => {\n let query = parseQuery(queryObj);\n\n if (spaceId) query += `&space_ids=${spaceId}`;\n\n const { page = 1, size = 20, orderBy, sortedBy } = queryObj;\n\n query += `&page_no=${page}&page_size=${size}`;\n\n if (orderBy) query += `&ordered_by=${orderBy}`;\n if (sortedBy) query += `&sort_by=${sortedBy}`;\n\n return axiosInstance.get(`${getEquipmentBySpace}${query}`).then((res) => res?.data);\n};\n\nexport const fetchEquipmentFiltersBySpace = async (spaceId, queryObj) => {\n let query = parseQuery(queryObj);\n\n if (spaceId) query += `&space_ids=${spaceId}`;\n\n return axiosInstance.get(`${getEquipmentFiltersBySpace}${query}`).then((res) => res?.data);\n};\n","export const DOWNLOAD_TYPES = {\n downloadSVG: 'downloadSVG',\n downloadPNG: 'downloadPNG',\n downloadCSV: 'downloadCSV',\n};\n","var _path;\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nimport * as React from \"react\";\nfunction SvgEye(_ref, svgRef) {\n let {\n title,\n titleId,\n ...props\n } = _ref;\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 18,\n height: 12,\n viewBox: \"0 0 18 12\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M9 1.89C10.3791 1.88541 11.7314 2.27009 12.9016 2.99979C14.0718 3.7295 15.0123 4.77462 15.615 6.015C14.3775 8.5425 11.85 10.14 9 10.14C6.15 10.14 3.6225 8.5425 2.385 6.015C2.98771 4.77462 3.92822 3.7295 5.09841 2.99979C6.26859 2.27009 7.62095 1.88541 9 1.89ZM9 0.389999C5.25 0.389999 2.0475 2.7225 0.75 6.015C2.0475 9.3075 5.25 11.64 9 11.64C12.75 11.64 15.9525 9.3075 17.25 6.015C15.9525 2.7225 12.75 0.389999 9 0.389999ZM9 4.14C9.49728 4.14 9.97419 4.33754 10.3258 4.68917C10.6775 5.0408 10.875 5.51772 10.875 6.015C10.875 6.51228 10.6775 6.98919 10.3258 7.34082C9.97419 7.69246 9.49728 7.89 9 7.89C8.50272 7.89 8.02581 7.69246 7.67417 7.34082C7.32254 6.98919 7.125 6.51228 7.125 6.015C7.125 5.51772 7.32254 5.0408 7.67417 4.68917C8.02581 4.33754 8.50272 4.14 9 4.14ZM9 2.64C7.14 2.64 5.625 4.155 5.625 6.015C5.625 7.875 7.14 9.39 9 9.39C10.86 9.39 12.375 7.875 12.375 6.015C12.375 4.155 10.86 2.64 9 2.64Z\",\n fill: \"#7C879C\"\n })));\n}\nconst ForwardRef = /*#__PURE__*/React.forwardRef(SvgEye);\nexport default __webpack_public_path__ + \"static/media/eye.0969f6b1.svg\";\nexport { ForwardRef as ReactComponent };","var _path;\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nimport * as React from \"react\";\nfunction SvgArrow(_ref, svgRef) {\n let {\n title,\n titleId,\n ...props\n } = _ref;\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 7,\n height: 11,\n viewBox: \"0 0 7 11\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M1.93359 1.15625L5.84375 5.3125C5.95312 5.44922 6.03516 5.61328 6.03516 5.75C6.03516 5.91406 5.95312 6.07812 5.84375 6.21484L1.93359 10.3711C1.6875 10.6445 1.27734 10.6445 1.00391 10.3984C0.730469 10.1523 0.730469 9.74219 0.976562 9.46875L4.47656 5.75L0.976562 2.05859C0.730469 1.78516 0.730469 1.375 1.00391 1.12891C1.27734 0.882812 1.6875 0.882812 1.93359 1.15625Z\",\n fill: \"#98A2B3\"\n })));\n}\nconst ForwardRef = /*#__PURE__*/React.forwardRef(SvgArrow);\nexport default __webpack_public_path__ + \"static/media/arrow.45afbabc.svg\";\nexport { ForwardRef as ReactComponent };","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Typography from '../../typography';\n\nimport './Radio.scss';\n\nconst Radio = (props) => {\n return (\n \n
\n \n \n
\n );\n};\n\nRadio.propTypes = {\n label: PropTypes.string.isRequired,\n};\n\nexport default Radio;\n","import React, { useEffect, useState } from 'react';\nimport { useLayer } from 'react-laag';\nimport PropTypes from 'prop-types';\n\nimport { removeProps } from '../../helpers/helper';\n\nconst DropDown = ({ triggerButton, ...props }) => {\n const [isOpen, setOpen] = useState(props.isOpen);\n\n useEffect(() => {\n setOpen(props.isOpen);\n }, [props.isOpen]);\n\n // helper function to close the menu\n const close = () => {\n props.onClose && props.onClose();\n setOpen(false);\n };\n\n const handleClick = () => {\n props.onClose && isOpen && props.onClose();\n props.onOpen && !isOpen && props.onOpen();\n\n setOpen(!isOpen);\n };\n\n const { renderLayer, triggerProps, layerProps } = useLayer({\n isOpen,\n onOutsideClick: close, // close the menu when the user clicks outside\n onDisappear: close, // close the menu when the menu gets scrolled out of sight\n overflowContainer: false, // keep the menu positioned inside the container\n auto: true, // automatically find the best placement\n placement: props.placement || 'bottom-right', // we prefer to place the menu \"top-end\"\n triggerOffset: 4, // keep some distance to the trigger\n containerOffset: 4, // give the menu some room to breath relative to the container\n });\n\n return (\n \n {React.cloneElement(triggerButton, { ...triggerProps, onClick: handleClick })}\n {renderLayer(\n
\n );\n};\n\nDropDown.propTypes = {\n triggerButton: PropTypes.node.isRequired,\n children: PropTypes.node.isRequired,\n isOpen: PropTypes.bool,\n onClose: PropTypes.func,\n onOpen: PropTypes.func,\n placement: PropTypes.oneOf([\n 'bottom-start',\n 'bottom-end',\n 'bottom-center',\n 'top-start',\n 'top-center',\n 'top-end',\n 'left-end',\n 'left-center',\n 'left-start',\n 'right-end',\n 'right-center',\n 'right-start',\n 'center',\n ]),\n};\n\nexport default DropDown;\n","import React, { useEffect, useState } from 'react';\nimport { Link } from 'react-router-dom';\nimport _ from 'lodash';\nimport cx from 'classnames';\nimport PropTypes from 'prop-types';\n\nimport { DropDown } from '../dropDown';\nimport Typography from '../../typography';\nimport Input from '../../form/input/Input';\n\nimport SearchURL from '../../assets/icons/search.svg';\n\nimport './DropDownButton.scss';\n\nconst SearchField = (props) => {\n return (\n {isOpen && React.cloneElement(props.children, { ...props.children.props })}
\n )}\n \n \n
\n );\n};\n\nconst DropDownBase = (props) => {\n const [searchQuery, setSearchQuery] = useState('');\n \n const {\n onOpen,\n onClose,\n options,\n withSearch,\n children,\n isLink,\n triggerButton,\n placement,\n header,\n classNameMenu,\n handleClick,\n isOpened = false,\n closeOnSelect = true\n } = props;\n\n const [isOpen, setIsOpen] = useState(isOpened);\n \n useEffect(() => {\n setIsOpen(isOpened)\n }, [isOpened])\n\n const setOpen = () => {\n setIsOpen(true);\n onOpen && onOpen();\n };\n\n const setClose = () => {\n setIsOpen(false);\n onClose && onClose();\n };\n\n const handleSearchChange = (event) => {\n setSearchQuery(event.target.value);\n };\n\n const dropDownClasses = cx('drop-down-button-wrapper', {\n isOpen: isOpen,\n });\n\n const dropdownItems = options\n .filter(({ label }) => label.toLowerCase().includes(searchQuery.toLowerCase()))\n .map(({ link, name, label, active, className, icon, key }) => {\n const dropdownItemContent = (\n <>\n {icon &&\n React.cloneElement(icon, {\n ...icon.props,\n className: `${icon.props.className} drop-down-button-list-item-icon`,\n })}\n {dropdownItemContent}
;\n });\n \n const triggerButtonNode = typeof triggerButton === 'function' ? triggerButton({isOpen, searchQuery, setIsOpen, setSearchQuery, ...props}) : triggerButton;\n \n return (\n \n \n
\n );\n};\n\nDropDownBase.propTypes = {\n options: PropTypes.arrayOf(\n PropTypes.shape({\n link: PropTypes.string,\n label: PropTypes.string.isRequired,\n active: PropTypes.bool,\n className: PropTypes.string,\n icon: PropTypes.node,\n key: PropTypes.string,\n name: PropTypes.string,\n }).isRequired\n ),\n withSearch: PropTypes.bool,\n header: PropTypes.node,\n triggerButton: PropTypes.node.isRequired,\n classNameMenu: PropTypes.string,\n handleClick: PropTypes.func,\n closeOnSelect: PropTypes.bool,\n isOpened: PropTypes.bool,\n};\n\nDropDownBase.defaultProps = {\n withSearch: false,\n options: [],\n};\n\nexport default DropDownBase;\n","export default __webpack_public_path__ + \"static/media/search.9e979b9a.svg\";","var _path;\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nimport * as React from \"react\";\nfunction SvgFilter(_ref, svgRef) {\n let {\n title,\n titleId,\n ...props\n } = _ref;\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 24,\n height: 24,\n viewBox: \"0 0 24 24\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M2 4.64062C2 3.74219 2.70312 3 3.60156 3H20.3594C21.2578 3 22 3.74219 22 4.64062C22 5.03125 21.8438 5.38281 21.6094 5.65625L15.125 13.6641V19.25C15.125 19.9531 14.5391 20.5 13.8359 20.5C13.5625 20.5 13.2891 20.4219 13.0547 20.2266L9.46094 17.375C9.07031 17.0625 8.875 16.6328 8.875 16.1641V13.6641L2.35156 5.65625C2.11719 5.38281 2 5.03125 2 4.64062ZM4.10938 4.875L10.5156 12.7266C10.6719 12.9219 10.75 13.1172 10.75 13.3125V16.0078L13.25 18V13.3125C13.25 13.1172 13.2891 12.9219 13.4453 12.7266L19.8516 4.875H4.10938Z\",\n fill: \"#7C879C\"\n })));\n}\nconst ForwardRef = /*#__PURE__*/React.forwardRef(SvgFilter);\nexport default __webpack_public_path__ + \"static/media/filter.0bb804f6.svg\";\nexport { ForwardRef as ReactComponent };","var _path;\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nimport * as React from \"react\";\nfunction SvgFiltered(_ref, svgRef) {\n let {\n title,\n titleId,\n ...props\n } = _ref;\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 24,\n height: 24,\n viewBox: \"0 0 24 24\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n d: \"M20 7C21.6569 7 23 5.65685 23 4C23 2.34315 21.6569 1 20 1C18.3432 1 17 2.34315 17 4C17 5.65685 18.3432 7 20 7ZM2 4.64062C2 3.74219 2.70312 3 3.60156 3H15.5C15.3473 3.71331 15.3332 4.12736 15.5 4.875H4.10938L10.5156 12.7266C10.6719 12.9219 10.75 13.1172 10.75 13.3125V16.0078L13.25 18V13.3125C13.25 13.1172 13.2891 12.9219 13.4453 12.7266L17.4501 7.8183C18.0726 8.28628 18.4841 8.42897 19.3066 8.5L15.125 13.6641V19.25C15.125 19.9531 14.5391 20.5 13.8359 20.5C13.5625 20.5 13.2891 20.4219 13.0547 20.2266L9.46094 17.375C9.07031 17.0625 8.875 16.6328 8.875 16.1641V13.6641L2.35156 5.65625C2.11719 5.38281 2 5.03125 2 4.64062Z\",\n fill: \"#444CE7\"\n })));\n}\nconst ForwardRef = /*#__PURE__*/React.forwardRef(SvgFiltered);\nexport default __webpack_public_path__ + \"static/media/filtered.d68266b5.svg\";\nexport { ForwardRef as ReactComponent };","import React, { useCallback, useEffect, useMemo, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport cx from 'classnames';\n\nimport Typography from '../../typography';\n\nimport { ReactComponent as PlusSVG } from '../../assets/icons/plus.svg';\nimport { ReactComponent as PenSVG } from '../../assets/icons/pen.svg';\nimport { ReactComponent as FilterSVG } from '../../assets/icons/filter.svg';\nimport { ReactComponent as FilteredSVG } from '../../assets/icons/filtered.svg';\n\nconst LayoutColumnHeader = (props) => {\n const { className, style, isDisabled, title, isFiltered, onHeaderEdit, onAdd, onEdit, onFilter } = props;\n\n const [filtered, setFiltered] = useState(isFiltered);\n\n useEffect(() => {\n setFiltered(isFiltered);\n }, [isFiltered]);\n\n const onFilterMemoized = useCallback(() => {\n const currentFilterState = !filtered;\n\n setFiltered(currentFilterState);\n onFilter && onFilter(currentFilterState);\n }, [onFilter, filtered]);\n\n const classNameWrapper = useMemo(\n () => cx('layout-column-header', { disabled: isDisabled }, className),\n [isDisabled, className]\n );\n\n return (\n \n {header && (\n
\n \n \n {React.cloneElement(header, { ...header.props })}\n
\n )}\n {withSearch && \n {!isDisabled && (\n \n \n )}\n
\n );\n};\n\nLayoutColumnHeader.propTypes = {\n isDisabled: PropTypes.bool,\n title: PropTypes.string,\n isFiltered: PropTypes.bool,\n onHeaderEdit: PropTypes.func,\n onAdd: PropTypes.func,\n onEdit: PropTypes.func,\n onFilter: PropTypes.func,\n};\n\nexport { LayoutColumnHeader };\n","import React, { useCallback, useMemo } from 'react';\nimport cx from 'classnames';\nimport PropTypes from 'prop-types';\n\nimport Typography from '../../typography';\nimport { Badge } from '../../badge';\n\nimport { ReactComponent as PenSVG } from '../../assets/icons/pen.svg';\nimport { ReactComponent as ArrowRightSVG } from '../../assets/icons/arrow-right.svg';\nimport { Button } from '../../button';\n\nconst LayoutLocationSelectionMenuList = (props) => {\n const { title, onEdit, onClick, isActive, notEditable, level, isArrowShown, confirmMove, onMoveClick } = props;\n\n const onEditHandlerMemoized = useCallback((event) => {\n event.stopPropagation();\n event.preventDefault();\n\n onEdit && onEdit(event);\n }, []);\n\n const classNameWrapper = useMemo(\n () =>\n cx('layout-location-selection-menu-list d-flex align-items-center', {\n 'is-active': isActive,\n 'not-editable': notEditable,\n }),\n [isActive]\n );\n\n return (\n {title}
\n {onHeaderEdit && (\n \n )}\n \n {onAdd && (\n \n )}\n {onEdit && (\n \n )}\n {onFilter && (\n \n )}\n
\n \n \n {title}\n \n\n
\n );\n};\n\nLayoutLocationSelectionMenuList.propTypes = {\n title: PropTypes.string,\n onEdit: PropTypes.func,\n onClick: PropTypes.func,\n isActive: PropTypes.bool,\n notEditable: PropTypes.bool,\n level: PropTypes.string.isRequired,\n isArrowShown: PropTypes.bool.isRequired,\n};\n\nexport { LayoutLocationSelectionMenuList };\n","import React from 'react';\n\nconst LayoutLoadingComponent = () =>\n new Array(23).fill().map((_, key) => (\n \n {onEdit && (\n \n
\n \n {onClick && isArrowShown && (\n \n )}\n
\n \n \n
\n ));\n\nexport { LayoutLoadingComponent };\n","const ACTIONS = Object.freeze({\n GET_FLOORS: 'GET_FLOORS',\n GET_SPACES: 'GET_SPACES',\n PUSH_INTO_STACK: 'PUSH_INTO_STACK',\n});\n\nconst LEVELS = Object.freeze({\n FLOOR: 'FLOOR',\n SPACE: 'SPACE',\n});\n\nconst ACCESSORS = Object.freeze({\n FLOOR_ID: 'floor_id',\n NAME: 'name',\n SPACE_ID: '_id',\n _ID: '_id',\n PARENT_SPACE: 'parent_space',\n SPACES: 'spaces',\n HAS_CHILDREN: 'has_children',\n});\n\nconst MAP_PROPERTIES_ACTIONS = {\n canAddNewSpace: 'onColumnAdd',\n isEditable: 'onColumnEdit',\n canChangeName: 'onColumnNameEdit',\n canFilter: 'onColumnFilter',\n};\n\nexport { ACTIONS, LEVELS, ACCESSORS, MAP_PROPERTIES_ACTIONS };\n","import _ from 'lodash';\nimport { MAP_PROPERTIES_ACTIONS } from './constants';\n\nexport const getActionRestrictionsItem = (actionsMap) =>\n actionsMap || {\n isEditable: true,\n };\n\nexport const getActionRestrictionsColumn = (actionsMap) =>\n actionsMap || {\n isEditable: true,\n canChangeName: true,\n canAddNewSpace: true,\n canFilter: true,\n };\n\n/**\n * Takes map of restrictions and return appropriate values for corresponded callbacks.\n * @param actionsMap {{isEditable: boolean | object, canChangeName: boolean | object, canAddNewSpace: boolean | object, canFilter: boolean | object }} - Map with restrictions.\n * @param isColumn {boolean} - Item is column or item\n * @returns {{[p: string]: boolean}|*} - Map with callbacks with false values.\n */\nexport const getActionRestrictions = (actionsMap, isColumn) => {\n if (isColumn) {\n const restrictionRules = getActionRestrictionsColumn(actionsMap);\n\n return Object.entries(restrictionRules).reduce((acc, [key, restrictValue]) => {\n const isCurrentValueObject = _.isObject(restrictValue);\n //extract value from object or returns value itself\n const currentValue = isCurrentValueObject ? restrictValue?.value : restrictValue;\n //we don't put prop if it is undefined\n const includeChildren = isCurrentValueObject\n ? {\n [`${MAP_PROPERTIES_ACTIONS[key]}IncludeChildren`]: restrictValue?.includeChildren,\n }\n : {};\n\n //we don't include prop if `value` is true, it doesn't make sense\n return currentValue ? acc : { ...acc, [MAP_PROPERTIES_ACTIONS[key]]: currentValue, ...includeChildren };\n }, {});\n }\n\n //get value from object or get that object itself\n const isEditable = _.isObject(actionsMap?.isEditable) ? { isEditable: actionsMap.isEditable?.value } : actionsMap;\n\n return getActionRestrictionsItem(!_.isEmpty(isEditable) && isEditable);\n};\n","import React, { useCallback, useEffect, useState } from 'react';\nimport cx from 'classnames';\nimport PropTypes from 'prop-types';\n\nimport Brick from '../../brick';\nimport Typography from '../../typography';\nimport { LayoutColumnHeader } from './LayoutColumnHeader';\nimport { LayoutLocationSelectionMenuList } from './LayoutLocationSelectionMenuList';\nimport { LayoutLoadingComponent } from './LayoutLoadingComponent';\n\nimport { generateID, stringOrNumberPropTypes } from '../../helpers/helper';\nimport { getActionRestrictions } from '../helper';\nimport { ACCESSORS } from '../constants';\n\nconst NoItems = () => {\n return (\n \n \n No spaces within\n \n {/*/** Unrealized functionality*/}\n {/*
\n );\n};\n\nconst LayoutLevelColumn = (props) => {\n const {\n title,\n children,\n onChildrenClick,\n childrenCallBackValue,\n state,\n onColumnAdd,\n onColumnAddIncludeChildren,\n onColumnEdit,\n onColumnEditIncludeChildren,\n onColumnNameEdit,\n onColumnNameEditIncludeChildren,\n onColumnFilter,\n onColumnFilterIncludeChildren,\n onItemEdit,\n onItemEditIncludeChildren,\n currentItem,\n isLoading,\n actionsMap,\n selectedItem: selectedItemProp,\n confirmMove,\n onMoveClick,\n ableToBeMoved,\n } = props;\n const [selectedItem, setSelectedItem] = useState(selectedItemProp);\n\n // useEffect(() => {\n // setSelectedItem(selectedItemProp)\n // }, [selectedItemProp])\n\n useEffect(() => {\n return () => {\n selectedItem && setSelectedItem(null);\n };\n }, [title]);\n\n const renderChildren = () => {\n if (isLoading) {\n return */}\n {/* Equipment in this space */}\n {/*
*/}\n */}\n {/* 4 Items */}\n {/* */}\n {/*
*/}\n {/*\n
\n );\n};\n\nLayoutLevelColumn.propTypes = {\n title: PropTypes.string.isRequired,\n children: PropTypes.arrayOf(\n PropTypes.shape({\n name: PropTypes.string.isRequired,\n level: PropTypes.string.isRequired,\n })\n ),\n onChildrenClick: PropTypes.func.isRequired,\n childrenCallBackValue: PropTypes.func,\n selectedItem: stringOrNumberPropTypes,\n};\n\nexport { LayoutLevelColumn };\n","import { useEffect, useReducer } from 'react';\nimport { ACTIONS, ACCESSORS } from './constants';\nimport _ from 'lodash';\n\nconst initialState = { floors: [], [ACCESSORS.SPACES]: [], stack: {}, spaces: [] };\n\nfunction reducer(state, action) {\n switch (action.type) {\n case ACTIONS.GET_FLOORS: {\n const { floors } = action.payload;\n\n return {\n ...state,\n floors,\n };\n }\n case ACTIONS.GET_SPACES: {\n const { spaces } = action.payload;\n\n return {\n ...state,\n spaces,\n };\n }\n case ACTIONS.PUSH_INTO_STACK: {\n // Maybe we need initially put floors as \"0\"\n // rewrite it in future\n // we clean stack if user travels through levels\n const stackKeys = Object.keys(state.stack);\n const cleanedStackKeys = stackKeys.filter((val) => val >= action.payload.key);\n const cleanedStack = _.omit(state.stack, cleanedStackKeys);\n\n return {\n ...state,\n //component, key ......\n stack: { ...cleanedStack, [action.payload.key]: action.payload },\n };\n }\n default:\n throw new Error();\n }\n}\n\nconst useStateManager = (componentProps) => {\n const [state, dispatch] = useReducer(reducer, initialState);\n const { floors, spaces } = componentProps;\n\n useEffect(() => {\n floors &&\n dispatch({\n type: ACTIONS.GET_FLOORS,\n payload: { floors },\n });\n }, [floors]);\n\n useEffect(() => {\n spaces &&\n dispatch({\n type: ACTIONS.GET_SPACES,\n payload: { spaces },\n });\n }, [spaces]);\n\n return {\n state,\n dispatch,\n };\n};\n\nexport default useStateManager;\n","import React, { useCallback, useEffect, useMemo, useRef } from 'react';\nimport cx from 'classnames';\nimport PropTypes from 'prop-types';\n\nimport { LayoutLevelColumn } from './components/LayoutLevelColumn';\n\nimport useStateManager from './useStateManager';\nimport { getActionRestrictions } from './helper';\nimport { ACCESSORS, ACTIONS } from './constants';\n\nimport './scss/LayoutElements.scss';\n\nconst getHandlerFromArray = (array, index, ...props) => {\n if (array && array[index] && typeof array[index] === 'function') {\n if (!props) {\n return array[index];\n }\n\n array[index](...props);\n return true;\n }\n};\n\nconst renderStackColumns = (\n state,\n {\n callBackEachColumn,\n callBackForAllColumns,\n onColumnAdd,\n onColumnEdit,\n onColumnNameEdit,\n onColumnFilter,\n onItemEdit,\n actionsMap = {},\n isLoadingLastColumn,\n spaces,\n },\n stackMap\n) => {\n //For preventing render next column if it was detected without children\n let rendering = true;\n\n return Object.entries(state.stack).map(\n ([key, { component, callbackState, currentItem }], currentIndex, stackEntries) => {\n //preventing render if column without children has been detected\n if (!rendering) {\n return null;\n }\n\n const children = typeof callbackState === 'function' ? callbackState(state) : state;\n const defaultProps = {\n key,\n state,\n children,\n onColumnAdd,\n onColumnEdit,\n onColumnNameEdit,\n onColumnFilter,\n onItemEdit,\n currentItem,\n actionsMap,\n isLoading: isLoadingLastColumn && stackEntries.length - 1 === currentIndex,\n };\n\n const customizedProps = (() => {\n const callBackPropsComponent = callBackEachColumn && callBackEachColumn[key];\n\n if (callBackForAllColumns && !callBackPropsComponent) {\n return callBackForAllColumns(defaultProps);\n }\n\n if (callBackPropsComponent) {\n return callBackPropsComponent({ ...component.props, ...defaultProps });\n }\n\n return defaultProps;\n })();\n\n const currentId = currentItem[ACCESSORS._ID] || currentItem[ACCESSORS.FLOOR_ID];\n const actionMappedProps = getActionRestrictions(actionsMap[currentId], true);\n\n // Deal with spaces but not with first selected spaces based on floor\n if (stackMap.current[currentIndex] !== currentId) {\n rendering = false;\n return null;\n }\n\n // For selected floor\n // We don't deal with buildind id, we start work only with index 1\n if (currentIndex === 1 && !state.floors.some((floor) => currentId === floor[ACCESSORS.FLOOR_ID])) {\n rendering = false;\n return null;\n }\n\n return React.cloneElement(component, { ...customizedProps, ...actionMappedProps });\n }\n );\n};\n\nconst LayoutElements = (props) => {\n const { state, dispatch } = useStateManager(props);\n\n const {\n onClickEachChild,\n onClickForAllItems,\n buildingData,\n className,\n style,\n confirmMove,\n onMoveClick,\n ableToBeMoved,\n } = props;\n\n const childrenClickHandler = (title, key, callbackState, currentItem, restrictedActions, selectedItem) => {\n dispatch({\n type: ACTIONS.PUSH_INTO_STACK,\n payload: {\n component: (\n {renderChildren()}
\n \n {renderStackColumns(state, props, stackMap)}\n
\n );\n};\n\nLayoutElements.propTypes = {\n // Callbacks have the highest priority.\n callBackEachColumn: PropTypes.arrayOf(PropTypes.func),\n // Won't be applied to item if there is callback found in \"callBackEachColumn\".\n callBackForAllColumns: PropTypes.func,\n\n //Click handler for each item in the list\n onClickEachChild: PropTypes.arrayOf(PropTypes.func),\n\n // handler for all items\n // Prevent calling \"nativeHandler\" if the function returns true, it works useless the function isn't async\n onClickForAllItems: PropTypes.func,\n\n // For some reasons these functions are defined by mock function, so they are commented.\n /* \n onColumnAdd: PropTypes.func.isRequired,\n onColumnEdit: PropTypes.func.isRequired,\n onColumnNameEdit: PropTypes.func.isRequired,\n onColumnFilter: PropTypes.func.isRequired,\n */\n\n buildingData: PropTypes.any.isRequired,\n isLoadingLastColumn: PropTypes.bool,\n\n //data\n floors: PropTypes.arrayOf(PropTypes.object),\n spaces: PropTypes.arrayOf(PropTypes.object),\n actionsMap: PropTypes.object,\n isPathRemembered: PropTypes.bool,\n};\n\nexport default LayoutElements;\n","import { useEffect, useState } from 'react';\n\nfunction useDebounce(value, delay) {\n const [debouncedValue, setDebouncedValue] = useState(value);\n\n useEffect(() => {\n const handler = setTimeout(() => {\n setDebouncedValue(value);\n }, delay);\n\n return () => {\n clearTimeout(handler);\n };\n }, [value, delay]);\n\n return debouncedValue;\n}\n\nexport default useDebounce;\n","var _path;\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nimport * as React from \"react\";\nfunction SvgRotateRight(_ref, svgRef) {\n let {\n title,\n titleId,\n ...props\n } = _ref;\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n xmlns: \"http://www.w3.org/2000/svg\",\n viewBox: \"0 0 512 512\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M463.5 224H472c13.3 0 24-10.7 24-24V72c0-9.7-5.8-18.5-14.8-22.2s-19.3-1.7-26.2 5.2L413.4 96.6c-87.6-86.5-228.7-86.2-315.8 1c-87.5 87.5-87.5 229.3 0 316.8s229.3 87.5 316.8 0c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0c-62.5 62.5-163.8 62.5-226.3 0s-62.5-163.8 0-226.3c62.2-62.2 162.7-62.5 225.3-1L327 183c-6.9 6.9-8.9 17.2-5.2 26.2s12.5 14.8 22.2 14.8H463.5z\"\n })));\n}\nconst ForwardRef = /*#__PURE__*/React.forwardRef(SvgRotateRight);\nexport default __webpack_public_path__ + \"static/media/rotate-right.43dbf30a.svg\";\nexport { ForwardRef as ReactComponent };","var _path;\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nimport * as React from \"react\";\nfunction SvgArrowTrendNeutral(_ref, svgRef) {\n let {\n title,\n titleId,\n ...props\n } = _ref;\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 15,\n height: 10,\n viewBox: \"0 0 15 10\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M13.7266 5.37891L10.2266 8.87891C9.89844 9.23438 9.32422 9.23438 8.99609 8.87891C8.64062 8.55078 8.64062 7.97656 8.99609 7.64844L10.9922 5.625H0.875C0.382812 5.625 0 5.24219 0 4.75C0 4.23047 0.382812 3.875 0.875 3.875H10.9922L8.99609 1.87891C8.64062 1.55078 8.64062 0.976562 8.99609 0.648438C9.32422 0.292969 9.89844 0.292969 10.2266 0.648438L13.7266 4.14844C14.082 4.47656 14.082 5.05078 13.7266 5.37891Z\",\n fill: \"#667085\"\n })));\n}\nconst ForwardRef = /*#__PURE__*/React.forwardRef(SvgArrowTrendNeutral);\nexport default __webpack_public_path__ + \"static/media/arrow-trend-neutral.7426e184.svg\";\nexport { ForwardRef as ReactComponent };","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { ReactComponent as IncreaseSVG } from '../assets/icons/arrow-trend-up.svg';\nimport { ReactComponent as DecreaseSVG } from '../assets/icons/arrow-trend-down.svg';\nimport { ReactComponent as NeutralSVG } from '../assets/icons/arrow-trend-neutral.svg';\n\nimport './style.scss';\n\nconst TRENDS_BADGE_TYPES = Object.freeze({\n DOWNWARD_TREND: 'downward-trend',\n UPWARD_TREND: 'upward-trend',\n NEUTRAL_TREND: 'neutral-trend',\n NEUTRAL_DOWN_TREND: 'neutral-trend neutral-down-decrease',\n NEUTRAL_UP_TREND: 'neutral-trend neutral-up-decrease',\n});\n\nconst iconMap = {\n [TRENDS_BADGE_TYPES.DOWNWARD_TREND]: DecreaseSVG,\n [TRENDS_BADGE_TYPES.UPWARD_TREND]: IncreaseSVG,\n [TRENDS_BADGE_TYPES.NEUTRAL_TREND]: NeutralSVG,\n [TRENDS_BADGE_TYPES.NEUTRAL_DOWN_TREND]: DecreaseSVG,\n [TRENDS_BADGE_TYPES.NEUTRAL_UP_TREND]: IncreaseSVG,\n};\n\nconst valueMap = {\n [TRENDS_BADGE_TYPES.DOWNWARD_TREND]: 5,\n [TRENDS_BADGE_TYPES.UPWARD_TREND]: 5,\n [TRENDS_BADGE_TYPES.NEUTRAL_TREND]: 0,\n [TRENDS_BADGE_TYPES.NEUTRAL_DOWN_TREND]: 1,\n [TRENDS_BADGE_TYPES.NEUTRAL_UP_TREND]: 1,\n};\n\nconst TrendsBadge = ({ className = '', value = null, type = TRENDS_BADGE_TYPES.UPWARD_TREND }) => {\n const Icon = iconMap[type];\n const renderValue = value === null ? valueMap[type] : value;\n\n return (\n \n
\n );\n};\n\nTrendsBadge.Type = TRENDS_BADGE_TYPES;\n\nTrendsBadge.propTypes = {\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n type: PropTypes.oneOf(Object.values(TRENDS_BADGE_TYPES)),\n};\n\nexport { TrendsBadge, TRENDS_BADGE_TYPES };\n","export const UNITS = {\n KWH: 'kWh',\n KWH_SQ_FT: 'kWh/sq.ft.',\n KBTU_FT_YR: 'kBtu/ft/yr',\n F: '°F',\n C: '°C',\n SQ_M: 'sq. m.',\n SQ_FT: 'sq. ft.',\n KGS: 'kgs',\n LBS: 'lbs',\n ibs: 'Ibs',\n mwh: 'MWh',\n kg: 'kg',\n};\n","import ReactDOMServer from 'react-dom/server';\n\nconst assignMeasureUnit = (value) => {\n return value !== '0' ? value + 'k' : value;\n};\n\n//@TODO Probably we can find something better then use React Server to render components to string.\nconst renderComponents = (elems) => ReactDOMServer.renderToString(elems);\n\nexport { assignMeasureUnit, renderComponents };\n","var _path;\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nimport * as React from \"react\";\nfunction SvgArrowRight(_ref, svgRef) {\n let {\n title,\n titleId,\n ...props\n } = _ref;\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 8,\n height: 14,\n viewBox: \"0 0 8 14\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n d: \"M0.292893 0.292893C0.683417 -0.0976311 1.31658 -0.0976311 1.70711 0.292893L7.70711 6.29289C8.09763 6.68342 8.09763 7.31658 7.70711 7.70711L1.70711 13.7071C1.31658 14.0976 0.683417 14.0976 0.292893 13.7071C-0.0976311 13.3166 -0.0976311 12.6834 0.292893 12.2929L5.58579 7L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683417 0.292893 0.292893Z\",\n fill: \"#7C879C\"\n })));\n}\nconst ForwardRef = /*#__PURE__*/React.forwardRef(SvgArrowRight);\nexport default __webpack_public_path__ + \"static/media/arrow-right.2b8350f1.svg\";\nexport { ForwardRef as ReactComponent };","// @flow\nimport {\n CHANGE_LAYOUT,\n CHANGE_LAYOUT_WIDTH,\n CHANGE_SIDEBAR_THEME,\n CHANGE_SIDEBAR_TYPE,\n TOGGLE_RIGHT_SIDEBAR,\n SHOW_RIGHT_SIDEBAR,\n HIDE_RIGHT_SIDEBAR,\n} from './constants';\n\n\nexport const changeLayout = (layout) => ({\n type: CHANGE_LAYOUT,\n payload: layout,\n});\n\nexport const changeLayoutWidth = (width) => ({\n type: CHANGE_LAYOUT_WIDTH,\n payload: width,\n});\n\nexport const changeSidebarTheme = (theme) => ({\n type: CHANGE_SIDEBAR_THEME,\n payload: theme,\n});\n\nexport const changeSidebarType = (sidebarType) => ({\n type: CHANGE_SIDEBAR_TYPE,\n payload: sidebarType,\n});\n\nexport const toggleRightSidebar = () => ({\n type: TOGGLE_RIGHT_SIDEBAR,\n payload: null,\n});\n\nexport const showRightSidebar = () => ({\n type: SHOW_RIGHT_SIDEBAR,\n payload: null,\n});\n\nexport const hideRightSidebar = () => ({\n type: HIDE_RIGHT_SIDEBAR,\n payload: null,\n});\n","export const startIntervalOption12 = [\n { label: '12:00 AM', value: '00:00' },\n { label: '1:00 AM', value: '01:00' },\n { label: '2:00 AM', value: '02:00' },\n { label: '3:00 AM', value: '03:00' },\n { label: '4:00 AM', value: '04:00' },\n { label: '5:00 AM', value: '05:00' },\n { label: '6:00 AM', value: '06:00' },\n { label: '7:00 AM', value: '07:00' },\n { label: '8:00 AM', value: '08:00' },\n { label: '9:00 AM', value: '09:00' },\n { label: '10:00 AM', value: '10:00' },\n { label: '11:00 AM', value: '11:00' },\n { label: '12:00 PM', value: '12:00' },\n { label: '1:00 PM', value: '13:00' },\n { label: '2:00 PM', value: '14:00' },\n { label: '3:00 PM', value: '15:00' },\n { label: '4:00 PM', value: '16:00' },\n { label: '5:00 PM', value: '17:00' },\n { label: '6:00 PM', value: '18:00' },\n { label: '7:00 PM', value: '19:00' },\n { label: '8:00 PM', value: '20:00' },\n { label: '9:00 PM', value: '21:00' },\n { label: '10:00 PM', value: '22:00' },\n { label: '11:00 PM', value: '23:00' },\n];\n\nexport const endIntervalOption12 = [\n { label: '1:00 AM', value: '01:00' },\n { label: '2:00 AM', value: '02:00' },\n { label: '3:00 AM', value: '03:00' },\n { label: '4:00 AM', value: '04:00' },\n { label: '5:00 AM', value: '05:00' },\n { label: '6:00 AM', value: '06:00' },\n { label: '7:00 AM', value: '07:00' },\n { label: '8:00 AM', value: '08:00' },\n { label: '9:00 AM', value: '09:00' },\n { label: '10:00 AM', value: '10:00' },\n { label: '11:00 AM', value: '11:00' },\n { label: '12:00 PM', value: '12:00' },\n { label: '1:00 PM', value: '13:00' },\n { label: '2:00 PM', value: '14:00' },\n { label: '3:00 PM', value: '15:00' },\n { label: '4:00 PM', value: '16:00' },\n { label: '5:00 PM', value: '17:00' },\n { label: '6:00 PM', value: '18:00' },\n { label: '7:00 PM', value: '19:00' },\n { label: '8:00 PM', value: '20:00' },\n { label: '9:00 PM', value: '21:00' },\n { label: '10:00 PM', value: '22:00' },\n { label: '11:00 PM', value: '23:00' },\n { label: '12:00 AM', value: '00:00' },\n];\n\nexport const startIntervalOption24 = [\n { label: '00:00', value: '00:00' },\n { label: '01:00', value: '01:00' },\n { label: '02:00', value: '02:00' },\n { label: '03:00', value: '03:00' },\n { label: '04:00', value: '04:00' },\n { label: '05:00', value: '05:00' },\n { label: '06:00', value: '06:00' },\n { label: '07:00', value: '07:00' },\n { label: '08:00', value: '08:00' },\n { label: '09:00', value: '09:00' },\n { label: '10:00', value: '10:00' },\n { label: '11:00', value: '11:00' },\n { label: '12:00', value: '12:00' },\n { label: '13:00', value: '13:00' },\n { label: '14:00', value: '14:00' },\n { label: '15:00', value: '15:00' },\n { label: '16:00', value: '16:00' },\n { label: '17:00', value: '17:00' },\n { label: '18:00', value: '18:00' },\n { label: '19:00', value: '19:00' },\n { label: '20:00', value: '20:00' },\n { label: '21:00', value: '21:00' },\n { label: '22:00', value: '22:00' },\n { label: '23:00', value: '23:00' },\n];\n\nexport const endIntervalOption24 = [\n { label: '01:00', value: '01:00' },\n { label: '02:00', value: '02:00' },\n { label: '03:00', value: '03:00' },\n { label: '04:00', value: '04:00' },\n { label: '05:00', value: '05:00' },\n { label: '06:00', value: '06:00' },\n { label: '07:00', value: '07:00' },\n { label: '08:00', value: '08:00' },\n { label: '09:00', value: '09:00' },\n { label: '10:00', value: '10:00' },\n { label: '11:00', value: '11:00' },\n { label: '12:00', value: '12:00' },\n { label: '13:00', value: '13:00' },\n { label: '14:00', value: '14:00' },\n { label: '15:00', value: '15:00' },\n { label: '16:00', value: '16:00' },\n { label: '17:00', value: '17:00' },\n { label: '18:00', value: '18:00' },\n { label: '19:00', value: '19:00' },\n { label: '20:00', value: '20:00' },\n { label: '21:00', value: '21:00' },\n { label: '22:00', value: '22:00' },\n { label: '23:00', value: '23:00' },\n { label: '00:00', value: '00:00' },\n];\n","import React from 'react';\nimport Switch from 'react-switch';\nimport { useAtom } from 'jotai';\nimport { userPermissionData } from '../../../store/globalState';\nimport colorPalette from '../../../assets/scss/_colors.module.scss';\nimport Typography from '../../../sharedComponents/typography';\nimport Brick from '../../../sharedComponents/brick';\nimport Inputs from '../../../sharedComponents/form/input/Input';\nimport Select from '../../../sharedComponents/form/select';\nimport { startIntervalOption12, endIntervalOption12, startIntervalOption24, endIntervalOption24 } from './timeInterval';\nimport 'react-datepicker/dist/react-datepicker.css';\nimport 'react-time-picker/dist/TimePicker.css';\nimport './styles.scss';\n\nconst OperatingHours = (props) => {\n const [userPermission] = useAtom(userPermissionData);\n\n const isUserAdmin = userPermission?.is_admin ?? false;\n const isSuperUser = userPermission?.is_superuser ?? false;\n const isSuperAdmin = isUserAdmin || isSuperUser;\n const canUserEdit = userPermission?.permissions?.permissions?.account_buildings_permission?.edit ?? false;\n\n return (\n <>\n {props.weekDay !== 'Mon' && \n
\n\n \n \n {props.weekDay}\n \n
\n\n \n
\n \n \n );\n};\n\nexport default OperatingHours;\n","import React from 'react';\nimport Modal from 'react-bootstrap/Modal';\n\nimport { Button } from '../../../sharedComponents/button';\nimport Typography from '../../../sharedComponents/typography';\nimport Brick from '../../../sharedComponents/brick';\n\nconst DeleteBldg = (props) => {\n const { isModalOpen = false, onCancel, onSave } = props;\n\n return (\n \n {isSuperAdmin || canUserEdit ? (\n
\n\n \n to \n
\n\n \n {isSuperAdmin || canUserEdit ? (\n
\n \n
\n );\n};\n\nexport default ToggleSetting;\n","export default __webpack_public_path__ + \"static/media/BuildingKPI.39285437.png\";","export default __webpack_public_path__ + \"static/media/Energy_consumption_by_end_use.8ea9ac35.png\";","export default __webpack_public_path__ + \"static/media/total_energy_consumption.639afa4b.png\";","export default __webpack_public_path__ + \"static/media/top_energy_consumer.6210846b.png\";","export default __webpack_public_path__ + \"static/media/energy_consumption_by_equipment.af74b84f.png\";","export default __webpack_public_path__ + \"static/media/energy_consumption_by_space_type.525e6d74.png\";","export default __webpack_public_path__ + \"static/media/energy_consumption_by_floor.1fdc631a.png\";","export default __webpack_public_path__ + \"static/media/energy_consumption_by_space.52719f1d.png\";","export default __webpack_public_path__ + \"static/media/hourly_average_consumption.c7ab9aa2.png\";","import React, { useState, useEffect } from 'react';\nimport { useAtom } from 'jotai';\nimport Switch from 'react-switch';\nimport Modal from 'react-bootstrap/Modal';\nimport { useParams } from 'react-router-dom';\nimport TimezoneSelect from 'react-timezone-select';\nimport { Row, Col, CardBody, CardHeader } from 'reactstrap';\n\nimport { userPermissionData, buildingData } from '../../../store/globalState';\nimport { UserStore } from '../../../store/UserStore';\nimport { ComponentStore } from '../../../store/ComponentStore';\nimport { BuildingListStore } from '../../../store/BuildingStore';\nimport { BreadcrumbStore } from '../../../store/BreadcrumbStore';\nimport { updateBuildingStore } from '../../../helpers/updateBuildingStore';\n\nimport Brick from '../../../sharedComponents/brick';\nimport Typography from '../../../sharedComponents/typography';\nimport Button from '../../../sharedComponents/button/Button';\nimport Inputs from '../../../sharedComponents/form/input/Input';\nimport Select from '../../../sharedComponents/form/select';\nimport InputTooltip from '../../../sharedComponents/form/input/InputTooltip';\nimport { defaultDropdownSearch } from '../../../sharedComponents/form/select/helpers';\n\nimport OperatingHours from './OperatingHours';\nimport DeleteBldg from './DeleteBldg';\n\nimport { ReactComponent as DeleteSVG } from '../../../assets/icon/delete.svg';\n\nimport { formatConsumptionValue } from '../../../helpers/helpers';\nimport { updateGeneralBuildingChange, getAllBuildingTypes } from './services';\nimport { convertToFootage, convertToMeters, handleUnitConverstion } from './utils';\nimport ToggleSetting from '../../../components/ToggleSetting';\n\nimport colorPalette from '../../../assets/scss/_colors.module.scss';\nimport '../../../sharedComponents/form/select/style.scss';\nimport '../style.css';\nimport './styles.scss';\n\n// Images for the Toggle setting component\nimport buildingKpiImage from '../../../assets/images/buldingSetting/BuildingKPI.png';\nimport energyConsumptionbyEndUseImage from '../../../assets/images/buldingSetting/Energy_consumption_by_end_use.png';\nimport totalEnergyConsumptionImage from '../../../assets/images/buldingSetting/total_energy_consumption.png';\nimport topEnergyConsumersWidgetImage from '../../../assets/images/buldingSetting/top_energy_consumer.png';\nimport energyConsumptionbyEquipmentTypeWidgetImage from '../../../assets/images/buldingSetting/energy_consumption_by_equipment.png';\nimport energyConsumptionbySpaceTypeWidgetImageImage from '../../../assets/images/buldingSetting/energy_consumption_by_space_type.png';\nimport energyConsumptionbyFloorWidgetImage from '../../../assets/images/buldingSetting/energy_consumption_by_floor.png';\nimport energyConsumptionbySpaceChart from '../../../assets/images/buldingSetting/energy_consumption_by_space.png';\nimport hourlyConsumptionChartImage from '../../../assets/images/buldingSetting/hourly_average_consumption.png';\n\nconst UserAlertPopup = (props) => {\n const { isModalOpen = false, onCancel } = props;\n\n return (\n \n \n \n {title}\n \n \n {description} \n
\n \n handleChange(settingKey, e)}\n className=\"react-switch\"\n disabled={isDisabled}\n />\n
\n \n
\n \n \n {`General Building Settings`}\n
\n {isSuperAdmin || canUserEdit ? (\n \n
\n ) : null}\n \n {\n onBuildingDetailsSave(bldgId, bldgData);\n }}\n className=\"ml-2\"\n disabled={isProcessing}\n />\n
\n \n \n \n {`Building Details`}\n \n \n\n \n \n
\n \n \n
\n\n \n {`Active`} \n \n {`Non-admin users can only view active buildings.`}\n \n
\n \n {\n handleChange('active', e);\n }}\n className=\"react-switch\"\n disabled={!(isSuperAdmin || canUserEdit)}\n />\n
\n \n
\n\n \n \n {`Building Name`}\n \n \n {`A human-friendly display name for this building`}\n \n
\n \n {\n handleChange('name', e.target.value);\n }}\n className=\"w-100\"\n value={bldgData?.name}\n disabled={!(isSuperAdmin || canUserEdit)}\n />\n
\n \n
\n\n \n {`Type`} \n \n {`The primary use/type of this building`}\n \n
\n \n {isSuperAdmin || canUserEdit ? (\n {\n setBldgData((prevBldgObj) => {\n return {\n ...prevBldgObj,\n building_type_id: e?.value,\n building_type: e?.label,\n };\n });\n }}\n customSearchCallback={({ data, query }) =>\n defaultDropdownSearch(data, query?.value)\n }\n className=\"w-100\"\n />\n ) : (\n
\n \n
\n\n \n \n {userPrefUnits === `si` ? `Square Meters` : `Square Footage`}\n \n \n {userPrefUnits === `si`\n ? `The total square meters of this building`\n : `The total square footage of this building`}\n \n
\n \n {isSuperAdmin || canUserEdit ? (\n {\n const inputValue = e.target.value;\n const valueWithNoComma = inputValue.replace(/,/g, '');\n if (!isNaN(valueWithNoComma)) {\n handleChange('square_footage', valueWithNoComma);\n }\n }}\n labelsize={Typography.Sizes.md}\n className=\"w-100\"\n inputClassName=\"custom-input-field\"\n value={renderBuildingArea(bldgData?.square_footage) ?? 0}\n />\n ) : (\n
\n \n
\n \n {`Plug-only`}\n \n {`To view Plug only data of this building`}\n \n
\n \n {\n handleChange('plug_only', e);\n }}\n className=\"react-switch\"\n disabled={!(isSuperAdmin || canUserEdit)}\n />\n
\n \n \n \n {`Address`}\n \n \n\n \n \n
\n \n \n
\n\n \n {\n handleChange('street_address', e.target.value);\n }}\n className=\"w-100\"\n value={bldgData?.street_address}\n disabled={!(isSuperAdmin || canUserEdit)}\n />\n
\n \n {\n handleChange('address_2', e.target.value);\n }}\n className=\"w-100\"\n value={bldgData?.address_2}\n disabled={!(isSuperAdmin || canUserEdit)}\n />\n
\n \n
\n \n {\n handleChange('city', e.target.value);\n }}\n className=\"w-100\"\n value={bldgData?.city}\n disabled={!(isSuperAdmin || canUserEdit)}\n />\n
\n\n \n {\n handleChange('state', e.target.value);\n }}\n className=\"w-100\"\n value={bldgData?.state}\n disabled={!(isSuperAdmin || canUserEdit)}\n />\n
\n\n \n {\n handleChange('zip_code', e.target.value);\n }}\n className=\"w-100\"\n value={bldgData?.zip_code}\n disabled={!(isSuperAdmin || canUserEdit)}\n />\n
\n \n \n \n {`Geo Location`}\n \n \n\n \n \n
\n \n \n
\n \n {`Latitude`} \n {\n handleChange('latitude', e.target.value);\n setErrorObj({ ...errorObj, latitude: null });\n }}\n error={errorObj?.latitude}\n labelsize={Typography.Sizes.md}\n value={bldgData?.latitude}\n disabled={!(isSuperAdmin || canUserEdit)}\n />\n
\n\n \n {`Longitude`} \n {\n handleChange('longitude', e.target.value);\n setErrorObj({ ...errorObj, longitude: null });\n }}\n error={errorObj?.longitude}\n labelsize={Typography.Sizes.md}\n value={bldgData?.longitude}\n disabled={!(isSuperAdmin || canUserEdit)}\n />\n
\n \n \n \n {`Date & Time`}\n \n \n\n \n \n
\n \n \n
\n \n {`TimeZone`} \n
\n \n {\n handleChange('timezone', e.value);\n }}\n className=\"react-select-wrapper w-100\"\n placeholder=\"Select TimeZone\"\n isDisabled={!(isSuperAdmin || canUserEdit)}\n />\n
\n \n \n \n {`Operating Hours`}\n \n \n\n \n \n
\n \n
\n \n \n <>\n {/* Monday */}\n {isSuperAdmin || canUserEdit ? (\n {\n checkDateTimeHandler('mon', e);\n setSwitchPhrace({ ...switchPhrase, mon: e });\n }}\n weekDay={'Mon'}\n onStartTimeChange={(date) => {\n operatingHoursChangeHandler(date, 'mon', 'frm', 'to');\n handleTimeValueChange(date, 'monFrom');\n }}\n startTime={timeValue?.monFrom}\n onEndTimeChange={(date) => {\n operatingHoursChangeHandler(date, 'mon', 'to', 'frm');\n handleTimeValueChange(date, 'monTo');\n }}\n endTime={timeValue?.monTo}\n />\n ) : (\n {}}\n weekDay={'Mon'}\n startTime={timeValue?.monFrom}\n endTime={timeValue?.monTo}\n />\n )}\n\n {/* Tuesday */}\n {isSuperAdmin || canUserEdit ? (\n {\n checkDateTimeHandler('tue', e);\n setSwitchPhrace({ ...switchPhrase, tue: e });\n }}\n weekDay={'Tue'}\n onStartTimeChange={(date) => {\n operatingHoursChangeHandler(date, 'tue', 'frm', 'to');\n handleTimeValueChange(date, 'tueFrom');\n }}\n startTime={timeValue?.tueFrom}\n onEndTimeChange={(date) => {\n operatingHoursChangeHandler(date, 'tue', 'to', 'frm');\n handleTimeValueChange(date, 'tueTo');\n }}\n endTime={timeValue?.tueTo}\n />\n ) : (\n {}}\n weekDay={'Tue'}\n startTime={timeValue?.tueFrom}\n endTime={timeValue?.tueTo}\n />\n )}\n\n {/* Wednesday */}\n {isSuperAdmin || canUserEdit ? (\n {\n checkDateTimeHandler('wed', e);\n setSwitchPhrace({ ...switchPhrase, wed: e });\n }}\n weekDay={'Wed'}\n onStartTimeChange={(date) => {\n operatingHoursChangeHandler(date, 'wed', 'frm', 'to');\n handleTimeValueChange(date, 'wedFrom');\n }}\n startTime={timeValue?.wedFrom}\n onEndTimeChange={(date) => {\n operatingHoursChangeHandler(date, 'wed', 'to', 'frm');\n handleTimeValueChange(date, 'wedTo');\n }}\n endTime={timeValue?.wedTo}\n />\n ) : (\n {}}\n weekDay={'Wed'}\n startTime={timeValue?.wedFrom}\n endTime={timeValue?.wedTo}\n />\n )}\n\n {/* Thursday */}\n {isSuperAdmin || canUserEdit ? (\n {\n checkDateTimeHandler('thu', e);\n setSwitchPhrace({ ...switchPhrase, thu: e });\n }}\n weekDay={'Thu'}\n onStartTimeChange={(date) => {\n operatingHoursChangeHandler(date, 'thu', 'frm', 'to');\n handleTimeValueChange(date, 'thuFrom');\n }}\n startTime={timeValue?.thuFrom}\n onEndTimeChange={(date) => {\n operatingHoursChangeHandler(date, 'thu', 'to', 'frm');\n handleTimeValueChange(date, 'thuTo');\n }}\n endTime={timeValue?.thuTo}\n />\n ) : (\n {}}\n weekDay={'Thu'}\n startTime={timeValue?.thuFrom}\n endTime={timeValue?.thuTo}\n />\n )}\n\n {/* Friday */}\n {isSuperAdmin || canUserEdit ? (\n {\n checkDateTimeHandler('fri', e);\n setSwitchPhrace({ ...switchPhrase, fri: e });\n }}\n weekDay={'Fri'}\n onStartTimeChange={(date) => {\n operatingHoursChangeHandler(date, 'fri', 'frm', 'to');\n handleTimeValueChange(date, 'friFrom');\n }}\n startTime={timeValue?.friFrom}\n onEndTimeChange={(date) => {\n operatingHoursChangeHandler(date, 'fri', 'to', 'frm');\n handleTimeValueChange(date, 'friTo');\n }}\n endTime={timeValue?.friTo}\n />\n ) : (\n {}}\n weekDay={'Fri'}\n startTime={timeValue?.friFrom}\n endTime={timeValue?.friTo}\n />\n )}\n\n {/* Saturday */}\n {isSuperAdmin || canUserEdit ? (\n {\n checkDateTimeHandler('sat', e);\n setSwitchPhrace({ ...switchPhrase, sat: e });\n }}\n weekDay={'Sat'}\n onStartTimeChange={(date) => {\n operatingHoursChangeHandler(date, 'sat', 'frm', 'to');\n handleTimeValueChange(date, 'satFrom');\n }}\n startTime={timeValue?.satFrom}\n onEndTimeChange={(date) => {\n operatingHoursChangeHandler(date, 'sat', 'to', 'frm');\n handleTimeValueChange(date, 'satTo');\n }}\n endTime={timeValue?.satTo}\n />\n ) : (\n {}}\n weekDay={'Sat'}\n startTime={timeValue?.satFrom}\n endTime={timeValue?.satTo}\n />\n )}\n\n {/* Sunday */}\n {isSuperAdmin || canUserEdit ? (\n {\n checkDateTimeHandler('sun', e);\n setSwitchPhrace({ ...switchPhrase, sun: e });\n }}\n weekDay={'Sun'}\n onStartTimeChange={(date) => {\n operatingHoursChangeHandler(date, 'sun', 'frm', 'to');\n handleTimeValueChange(date, 'sunFrom');\n }}\n startTime={timeValue?.sunFrom}\n onEndTimeChange={(date) => {\n operatingHoursChangeHandler(date, 'sun', 'to', 'frm');\n handleTimeValueChange(date, 'sunTo');\n }}\n endTime={timeValue?.sunTo}\n />\n ) : (\n {}}\n weekDay={'Sun'}\n startTime={timeValue?.sunFrom}\n endTime={timeValue?.sunTo}\n />\n )}\n \n
\n \n \n \n Energy Dashboard Configuration\n \n \n\n \n \n
\n \n \n \n \n\n \n \n
\n \n \n \n {`Danger Zone`}\n \n
\n \n
\n \n \n {icon ? icon : text}\n \n
\n );\n};\nStatusBadge.Type = STATUS_TYPES;\n\nStatusBadge.propTypes = {\n text: PropTypes.string.isRequired,\n type: PropTypes.oneOf(Object.values(STATUS_TYPES)).isRequired,\n icon: PropTypes.node,\n};\n\nexport default StatusBadge;\n","import axiosInstance from '../../../services/axiosInstance';\nimport {\n createUtilityMeter,\n deleteUtilityMeters,\n getUtilityMeters,\n getUtilityMeterSensor,\n sensorUsageData,\n sensorUsageDataForUtilityMonitor,\n updateSensorV2,\n updateUtilityMeters,\n} from '../../../services/Network';\n\nexport function createUtilityMeterServices(payload) {\n return axiosInstance.post(`${createUtilityMeter}`, payload).then((res) => res);\n}\n\nexport function updateUtilityMeterServices(params, payload) {\n return axiosInstance.patch(`${updateUtilityMeters}${params}`, payload).then((res) => res);\n}\n\nexport function getAllUtilityMetersServices(payload) {\n const { bldgId, search, pageNo, pageSize, deviceStatus, sortBy, orderBy } = payload;\n\n let params = `?building_id=${bldgId}`;\n\n if (search) params += `&device_search=${encodeURIComponent(search)}`;\n if (pageNo) params += `&page_no=${pageNo}`;\n if (pageSize) params += `&page_size=${pageSize}`;\n if (sortBy) params += `&sort_by=${sortBy}`;\n if (orderBy) params += `&ordered_by=${orderBy}`;\n if (deviceStatus && deviceStatus !== 0) params += `&stat=${deviceStatus === 1 ? 'true' : 'false'}`;\n\n return axiosInstance.get(`${getUtilityMeters}${params}`).then((res) => res);\n}\n\nexport function getSingleUtilityMeter(bldgId, deviceId) {\n const params = `?building_id=${bldgId}&device_id=${deviceId}`;\n return axiosInstance.get(`${getUtilityMeters}${params}`).then((res) => res);\n}\n\nexport function deleteUtilityMeterData(params) {\n return axiosInstance.delete(`${deleteUtilityMeters}${params}`).then((res) => res);\n}\n\nexport function getUtilitySensorsList(bldgId, deviceId) {\n const params = `?building_id=${bldgId}&device_id=${deviceId}`;\n return axiosInstance.get(`${getUtilityMeterSensor}${params}`).then((res) => res);\n}\n\nexport function updateUtilitySensorServices(params, payload) {\n return axiosInstance.post(`${updateSensorV2}${params}`, payload).then((res) => res);\n}\n\nexport function getSensorGraphDataForUtilityMonitors(payload) {\n const params = `/${payload?.sensor_id}?building_id=${payload?.bldg_id}&date_from=${payload?.date_from}&date_to=${payload?.date_to}&tz_info=${payload?.tz_info}&metric=${payload?.selected_metric}`;\n return axiosInstance.get(`${sensorUsageData}${params}`).then((res) => res);\n}\n\nexport function getSensorMetricYtdData(payload) {\n const params = `?building_id=${payload?.bldg_id}&sensor_id=${payload?.sensor_id}&date_from=${payload?.date_from}&date_to=${payload?.date_to}&timezone=${payload?.tz_info}&metric=${payload?.metric}`;\n return axiosInstance.get(`${sensorUsageDataForUtilityMonitor}${params}`).then((res) => res);\n}\n","import React, { useState } from 'react';\nimport { useHistory } from 'react-router-dom';\nimport Modal from 'react-bootstrap/Modal';\nimport { UncontrolledTooltip } from 'reactstrap';\n\nimport { UserStore } from '../../../store/UserStore';\n\nimport Typography from '../../../sharedComponents/typography';\nimport Brick from '../../../sharedComponents/brick';\nimport { Button } from '../../../sharedComponents/button';\nimport InputTooltip from '../../../sharedComponents/form/input/InputTooltip';\nimport Select from '../../../sharedComponents/form/select';\n\nimport { ReactComponent as PlusSVG } from '../../../assets/icon/plus.svg';\nimport { ReactComponent as TooltipIcon } from '../../../sharedComponents/assets/icons/tooltip.svg';\n\nimport { UTILITY_MONITOR, convertToAlphaNumeric, utilityMeterModel } from './utils';\nimport { createUtilityMeterServices } from './services';\n\nimport colorPalette from '../../../assets/scss/_colors.module.scss';\n\nconst CreateUtilityMeters = (props) => {\n const { bldgId, fetchUtilityMetersWithFilter } = props;\n\n const history = useHistory();\n\n const defaultObj = {\n status: true,\n device_id: '',\n model: UTILITY_MONITOR.PULSE_COUNTER,\n model_name: 'Sapient Pulse',\n modbus: '',\n name: '',\n };\n\n const defaultError = {\n device_id: null,\n model: null,\n modbus: null,\n };\n\n const [modal, setModal] = useState(false);\n const handleModalOpen = () => setModal(true);\n const handleModalClose = () => setModal(false);\n\n const [utilityData, setUtilityData] = useState(defaultObj);\n const [utilityError, setUtilityError] = useState(defaultError);\n\n const [isProcessing, setIsProcessing] = useState(false);\n\n const handleChange = (key, value) => {\n let obj = Object.assign({}, utilityData);\n\n if (key === 'device_id') {\n let formattedValue = convertToAlphaNumeric(value);\n if (formattedValue.length > 12) return;\n formattedValue = formattedValue.replace(/..\\B/g, '$&:');\n obj[key] = formattedValue;\n } else {\n obj[key] = value;\n }\n\n if (key === 'model') {\n let selectedObj = utilityMeterModel.find((el) => el?.value === value);\n obj.model_name = selectedObj?.label;\n }\n setUtilityData(obj);\n };\n\n const redirectUserToUtilityMeterPage = (deviceId) => {\n history.push({\n pathname: `/settings/utility-monitors/single/${bldgId}/${deviceId}`,\n });\n };\n\n const handleClose = () => {\n setIsProcessing(false);\n setUtilityData(defaultObj);\n setUtilityError(defaultError);\n handleModalClose();\n };\n\n const saveUtilityMeter = async () => {\n let alertObj = Object.assign({}, utilityError);\n\n let formattedDeviceId = convertToAlphaNumeric(utilityData?.device_id);\n\n if (formattedDeviceId.length < 12) alertObj.device_id = 'Please enter 12 digit Device ID.';\n if (utilityData?.model.length === 0) alertObj.model = { text: 'Please select Model.' };\n if (utilityData?.modbus.length === 0) alertObj.modbus = 'Please enter Modbus address. It cannot be empty.';\n\n setUtilityError(alertObj);\n\n if (!alertObj.device_id && !alertObj.model && !alertObj.modbus) {\n setIsProcessing(true);\n\n const reqObj = {\n building_id: bldgId,\n device_type: utilityData?.model.includes(`shadow`) ? 'shadow meter' : utilityData?.model,\n model: utilityData?.model_name,\n deviceIdentifier: utilityData?.device_id,\n modbus_address: utilityData?.modbus,\n name: utilityData?.name,\n };\n\n await createUtilityMeterServices(reqObj)\n .then((res) => {\n const response = res?.data;\n\n if (response?.success) {\n UserStore.update((s) => {\n s.showNotification = true;\n s.notificationMessage = response?.message ?? 'Device created successfully.';\n s.notificationType = 'success';\n });\n\n handleClose();\n\n const isPowerScout = utilityData?.model === UTILITY_MONITOR.POWER_SCOUT;\n const hasDeviceId = response?.data?.device_id;\n\n if (isPowerScout || !hasDeviceId) {\n fetchUtilityMetersWithFilter();\n } else {\n redirectUserToUtilityMeterPage(response.data.device_id);\n }\n } else {\n const isSuccess = response?.success;\n const hasErrorMessage = response?.message.includes('identifier');\n const message =\n response?.message ||\n (res\n ? 'Unable to create Utility Monitor.'\n : 'Unable to create Utility Monitor due to Internal Server Error!.');\n\n if (!isSuccess && hasErrorMessage) {\n alertObj.device_id = 'Device ID with given name already exists.';\n setUtilityError(alertObj);\n } else {\n UserStore.update((s) => {\n s.showNotification = true;\n s.notificationMessage = message;\n s.notificationType = 'error';\n });\n }\n }\n setIsProcessing(false);\n })\n .catch((e) => {\n setIsProcessing(false);\n handleClose();\n });\n }\n };\n\n const ModbusAddressToolTip = ({ modelType }) => {\n let message = '';\n\n switch (modelType) {\n case UTILITY_MONITOR.PULSE_COUNTER:\n message = `Clicking ‘create’ will initiate the creation of 8 Pulse inputs on an A8832 device, the standard Modbus address is 2.`;\n break;\n case UTILITY_MONITOR.SHADOW_50:\n message = `Clicking ‘create’ will initiate the creation of a single Shark 50 series device, the standard Modbus address is 6.`;\n break;\n case UTILITY_MONITOR.SHADOW_100:\n message = `Clicking ‘create’ will initiate the creation of a single Shark 100 series device, the standard Modbus address is 6.`;\n break;\n case UTILITY_MONITOR.SHADOW_250:\n message = `Clicking ‘create’ will initiate the creation of a single Shark 200 series device, the standard Modbus address is 6.`;\n break;\n case UTILITY_MONITOR.POWER_SCOUT:\n message = `Clicking ‘create’ will initiate the creation of 16 x unique devices, with sequential Modbus Addresses starting with the Modbus address entered.`;\n break;\n default:\n break;\n }\n\n return (\n \n \n {message}\n \n\n \n
\n );\n };\n\n return (\n <>\n \n
\n \n Add Utility Monitor \n\n
\n \n {\n if (e.target.value < 0) return;\n handleChange('name', e.target.value);\n }}\n // error={utilityError?.modbus}\n labelsize={Typography.Sizes.md}\n value={utilityData?.name}\n inputClassName={'custom-input-field'}\n />\n
\n\n \n Device Name \n
\n \n \n Model\n \n *\n \n \n option.value === utilityData?.model)}\n onChange={(e) => {\n handleChange('model', e.value);\n setUtilityError({ ...utilityError, model: null });\n }}\n error={utilityError?.model}\n isSearchable={true}\n />\n
\n\n \n \n Device ID\n \n *\n \n \n {\n handleChange('device_id', e.target.value.trim().toUpperCase());\n setUtilityError({ ...utilityError, device_id: null });\n }}\n error={utilityError?.device_id}\n labelsize={Typography.Sizes.md}\n value={utilityData?.device_id}\n />\n Enter MAC address of A8810. \n )}\n
\n\n \n {\n if (e.target.value < 0) return;\n handleChange('modbus', e.target.value);\n setUtilityError({ ...utilityError, modbus: null });\n }}\n error={utilityError?.modbus}\n labelsize={Typography.Sizes.md}\n value={utilityData?.modbus}\n inputClassName={'custom-input-field'}\n />\n {utilityData?.model === UTILITY_MONITOR.POWER_SCOUT && (\n <>\n \n Standard Modbus addressing:\n \n \n Unit 1 - Modbus addresses 14 to 29\n \n \n Unit 2 - Modbus addresses 30 to 45\n \n \n )}\n {(utilityData?.model === UTILITY_MONITOR.SHADOW_50 ||\n utilityData?.model === UTILITY_MONITOR.SHADOW_100 ||\n utilityData?.model === UTILITY_MONITOR.SHADOW_250) && (\n <>\n \n Standard Modbus address is 6\n \n \n )}\n {utilityData?.model === UTILITY_MONITOR.PULSE_COUNTER && (\n <>\n \n Standard Modbus address is 2\n \n \n )}\n
\n\n \n \n {`${\n utilityData?.model === UTILITY_MONITOR.POWER_SCOUT ? 'Starting' : ''\n } Modbus Address`}\n \n
\n \n {\n setUtilityData(defaultObj);\n setUtilityError(defaultError);\n handleModalClose();\n }}\n />\n\n
\n\n \n {row?.mac_address ? convertToMac(row?.mac_address) : ''}\n
\n \n );\n };\n\n const renderModbus = (row) => {\n return \n
\n \n \n Utility Monitors \n
\n {isSuperAdmin || canUserCreate ? (\n \n \n You don't have the permission to view this page.\n \n
\n ) : (\n \n \n {operationType === `ADD` ? `Add Floor` : `Edit Floor`}\n \n\n
\n \n {`Name`} \n {\n setFloorName(e.target.value);\n setFloorNameError(null);\n }}\n error={floorNameError}\n />\n
\n\n \n {`Type`} \n \n {`Only floors can be at the building root`}\n \n
\n\n {operationType === 'EDIT' && (canUserDelete || isSuperAdmin) && (\n <>\n \n {\n closeModal();\n setFloorName('');\n setFloorNameError(null);\n }}\n />\n {operationType === 'ADD' ? (\n {\n handleCreateFloor(floorName, bldgId);\n }}\n disabled={isProcessing}\n />\n ) : (\n {\n handleEditFloor(floorName, bldgId, selectedFloorObj);\n }}\n disabled={isProcessing || selectedFloorObj?.floor_name === floorName}\n />\n )}\n
\n \n \n {operationType === `ADD` ? `Add Space` : `Edit Space`}\n \n {`Parent`} \n
\n \n {`Name`} \n {\n handleChange('name', e.target.value);\n }}\n />\n
\n \n {`Type`} \n option.value === spaceObj?.type_id)}\n isSearchable={true}\n error={errorObj?.type_id}\n onChange={(e) => {\n handleChange('type_id', e.value);\n }}\n customSearchCallback={({ data, query }) => defaultDropdownSearch(data, query?.value)}\n menuPlacement=\"top\"\n />\n
\n \n {`Square ${\n userPrefUnits === 'si' ? 'Meter' : 'Footage'\n }`} \n
\n \n {`Tags`} \n {\n if (!changedTags) setChangedTags(true);\n handleChange('tags', tag);\n }}\n isCreatable\n />\n
\n \n {\n closeModal();\n openMoveSpacePopup();\n }}\n className=\"ml-2\"\n />\n
\n \n {\n closeModal();\n setSpaceObj({});\n setNewStack({});\n setSpaceObjParent({});\n setSpaceObj((spaceObj) => {\n const newSpaceObj = { ...spaceObj };\n delete newSpaceObj.new_parents;\n delete newSpaceObj.new_parent_space;\n return newSpaceObj;\n });\n allParentSpaces.current = [];\n setErrorObj(defaultErrorObj);\n }}\n />\n {operationType === 'ADD' ? (\n {\n handleCreateSpace(spaceObj, bldgId);\n }}\n disabled={isProcessing}\n />\n ) : (\n {\n handleEditSpace();\n }}\n disabled={isProcessing || compareObjData(defaultObjVal, spaceObj)}\n />\n )}\n
\n \n \n Move Space: {spaceObj?.name}\n \n \n Current Location: {formattedOldValue}\n \n\n
\n \n {\n closeModal();\n openEditSpacePopup();\n }}\n />\n
\n \n Add Equipment Type \n\n \n Name\n \n *\n \n \n {\n handleChange('name', e.target.value.trim());\n setEquipTypeNameError(null);\n }}\n error={equipTypeNameError}\n labelsize={Typography.Sizes.md}\n />\n\n {isSuperUser && (\n <>\n
\n \n );\n};\n\nexport default CreateEquipType;\n","import React, { useState, useEffect } from 'react';\nimport Modal from 'react-bootstrap/Modal';\nimport Typography from '../../../sharedComponents/typography';\nimport Brick from '../../../sharedComponents/brick';\nimport { Button } from '../../../sharedComponents/button';\nimport { deleteEquipmentTypeData } from './services';\nimport { UserStore } from '../../../store/UserStore';\n\nconst DeleteEquipType = ({\n isDeleteEquipTypeModalOpen,\n closeDeleteEquipTypeModal,\n selectedEquipType,\n fetchEquipTypeData,\n search,\n openEditEquipTypeModal,\n}) => {\n const [isProcessing, setIsProcessing] = useState(false);\n const [equipTypeId, setEquipTypeId] = useState('');\n\n const handleEquipTypeDelete = async () => {\n setIsProcessing(true);\n let params = `?equipment_type_id=${equipTypeId}`;\n await deleteEquipmentTypeData(params)\n .then((res) => {\n const response = res?.data;\n if (response?.success) {\n UserStore.update((s) => {\n s.showNotification = true;\n s.notificationMessage = response?.message;\n s.notificationType = 'success';\n });\n } else {\n UserStore.update((s) => {\n s.showNotification = true;\n s.notificationMessage = response?.message\n ? response?.message\n : res\n ? 'Unable to Delete Equipment Type.'\n : 'Unable to delete Equipment Type due to Internal Server Error!.';\n s.notificationType = 'error';\n });\n }\n closeDeleteEquipTypeModal();\n setEquipTypeId('');\n fetchEquipTypeData(search);\n setIsProcessing(false);\n })\n .catch((error) => {\n UserStore.update((s) => {\n s.showNotification = true;\n s.notificationMessage = 'Internal Server Error! Unable to delete record.';\n s.notificationType = 'error';\n });\n setIsProcessing(false);\n });\n };\n\n const handleDeleteAlertClose = () => {\n closeDeleteEquipTypeModal();\n if (openEditEquipTypeModal) openEditEquipTypeModal();\n };\n\n useEffect(() => {\n if (isDeleteEquipTypeModalOpen) setEquipTypeId(selectedEquipType?.equipment_id);\n }, [isDeleteEquipTypeModalOpen]);\n\n return (\n \n \n Type\n \n *\n \n \n {\n handleChange('status', e.value);\n }}\n isSearchable={false}\n />\n
\n \n )}\n\n \n \n End Use\n \n *\n \n \n {\n handleChange('end_use', e.value);\n setEndUseIdError(null);\n }}\n isSearchable={true}\n error={endUseIdError}\n />\n
\n\n \n {\n setEquipTypeData(defaultEquipTypeObj);\n closeAddEquipTypeModal();\n }}\n />\n\n
\n\n \n Edit Equipment Type \n\n {\n handleChange('equipment_type', e.target.value);\n setEquipTypeNameError(null);\n }}\n labelsize={Typography.Sizes.md}\n value={equipTypeData?.equipment_type}\n error={equipTypeNameError}\n />\n\n {isSuperUser && (\n <>\n
\n \n\n \n \n Type\n \n *\n \n \n {\n handleChange('status', e.value);\n }}\n isSearchable={false}\n />\n
\n \n )}\n\n \n End Use \n {\n handleChange('end_use_id', e.value);\n }}\n isSearchable={true}\n />\n
\n\n {equipTypeData?.status && equipTypeData?.status.toLowerCase() === 'custom' && (\n \n {\n if (!isProcessing) {\n closeEditEquipTypeModal();\n openDeleteEquipTypeModal();\n }\n }}\n icon={
\n )}\n\n \n {\n setEquipTypeData(defaultEquipTypeObj);\n closeEditEquipTypeModal();\n }}\n />\n\n
\n\n \n {row?.equipment_type === '' ? '-' : row?.equipment_type}\n
\n );\n };\n\n const renderEquipTypeClass = (row) => {\n return (\n You don't have the permission to view this page
;\n }\n\n return (\n \n
\n \n \n Equipment Types \n
\n {isSuperAdmin || canUserCreate ? (\n \n {\n openAddEquipTypeModal();\n }}\n icon={
\n ) : null}\n \n {`Add Space Type`} \n\n \n {`Name`}\n \n *\n \n \n {\n handleChange('name', e.target.value.trim());\n setSpaceTypeNameError(null);\n }}\n error={spaceTypeNameError}\n labelsize={Typography.Sizes.md}\n />\n\n
\n \n );\n};\n\nexport default CreateSpaceType;\n","import React, { useState, useEffect } from 'react';\nimport Modal from 'react-bootstrap/Modal';\nimport Typography from '../../../sharedComponents/typography';\nimport Brick from '../../../sharedComponents/brick';\nimport { Button } from '../../../sharedComponents/button';\nimport InputTooltip from '../../../sharedComponents/form/input/InputTooltip';\nimport { updateSpaceTypeData } from './services';\nimport { UserStore } from '../../../store/UserStore';\n\nconst EditSpaceType = ({\n isEditSpaceTypeModalOpen,\n closeEditSpaceTypeModal,\n fetchSpaceTypeData,\n selectedSpaceType,\n search,\n}) => {\n const defaultSpaceTypeObj = {\n name: '',\n };\n const [spaceTypeData, setSpaceTypeData] = useState(defaultSpaceTypeObj);\n const [isUpdating, setUpdating] = useState(false);\n const [formValidation, setFormValidation] = useState(false);\n const [spaceTypeNameError, setSpaceTypeNameError] = useState(null);\n\n useEffect(() => {\n if (spaceTypeData?.name.length > 0 && spaceTypeData?.name.trim() !== selectedSpaceType?.name.trim()) {\n setFormValidation(true);\n } else {\n setFormValidation(false);\n }\n }, [spaceTypeData, selectedSpaceType]);\n\n const handleChange = (key, value) => {\n let obj = Object.assign({}, spaceTypeData);\n obj[key] = value;\n setSpaceTypeData(obj);\n };\n\n const updateSpaceTypeDetails = async () => {\n if (!spaceTypeData?.name) return;\n\n setUpdating(true);\n\n const payload = { name: spaceTypeData?.name };\n const params = `/${spaceTypeData?.id}`;\n\n if (spaceTypeData?.name.trim() !== selectedSpaceType?.name.trim()) {\n payload.name = spaceTypeData?.name.trim();\n }\n\n await updateSpaceTypeData(params, payload)\n .then((res) => {\n const response = res;\n if (response?.status === 406) {\n setSpaceTypeNameError('Space Type with given name already exists.');\n setUpdating(false);\n return;\n }\n if (response?.data?.success) {\n UserStore.update((s) => {\n s.showNotification = true;\n s.notificationMessage = response?.data?.message;\n s.notificationType = 'success';\n });\n setSpaceTypeData(defaultSpaceTypeObj);\n fetchSpaceTypeData(search);\n } else {\n UserStore.update((s) => {\n s.showNotification = true;\n s.notificationMessage = response?.data?.message\n ? response?.data?.message\n : 'Unable to Update Space Type.';\n s.notificationType = 'error';\n });\n }\n setUpdating(false);\n closeEditSpaceTypeModal();\n })\n .catch(() => {\n setUpdating(false);\n });\n };\n\n useEffect(() => {\n if (!isEditSpaceTypeModalOpen) return;\n setSpaceTypeData(selectedSpaceType);\n }, [isEditSpaceTypeModalOpen]);\n\n return (\n <>\n \n {\n setSpaceTypeData(defaultSpaceTypeObj);\n closeAddSpaceTypeModal();\n }}\n />\n\n
\n\n \n {`Edit Space Type`} \n\n {\n handleChange('name', e.target.value);\n setSpaceTypeNameError(null);\n }}\n labelsize={Typography.Sizes.md}\n value={spaceTypeData?.name}\n error={spaceTypeNameError}\n />\n\n
\n \n \n );\n};\n\nexport default EditSpaceType;\n","import React, { useState, useEffect } from 'react';\nimport Modal from 'react-bootstrap/Modal';\nimport Typography from '../../../sharedComponents/typography';\nimport Brick from '../../../sharedComponents/brick';\nimport { Button } from '../../../sharedComponents/button';\nimport { deleteSpaceTypeData } from './services';\nimport { UserStore } from '../../../store/UserStore';\n\nconst DeleteSpaceType = ({\n isDeleteSpaceTypeModalOpen,\n closeDeleteSpaceTypeModal,\n fetchSpaceTypeData,\n selectedSpaceType,\n search,\n}) => {\n const [isDeleting, setIsDeleting] = useState(false);\n const [spaceTypeId, setSpaceTypeId] = useState('');\n\n const handleSpaceTypeDelete = async () => {\n setIsDeleting(true);\n const params = `/${spaceTypeId}`;\n\n await deleteSpaceTypeData(params)\n .then((res) => {\n const response = res?.data;\n if (response?.success) {\n UserStore.update((s) => {\n s.showNotification = true;\n s.notificationMessage = response?.message;\n s.notificationType = 'success';\n });\n } else {\n UserStore.update((s) => {\n s.showNotification = true;\n s.notificationMessage = response?.message\n ? response?.message\n : res\n ? 'Unable to Delete Space Type.'\n : 'Unable to delete Space Type due to Internal Server Error!.';\n s.notificationType = 'error';\n });\n }\n setIsDeleting(false);\n closeDeleteSpaceTypeModal();\n setSpaceTypeId('');\n fetchSpaceTypeData(search);\n })\n .catch((error) => {\n UserStore.update((s) => {\n s.showNotification = true;\n s.notificationMessage = 'Internal Server Error! Unable to delete record.';\n s.notificationType = 'error';\n });\n setIsDeleting(false);\n });\n };\n\n const handleDeleteAlertClose = () => {\n closeDeleteSpaceTypeModal();\n };\n\n useEffect(() => {\n if (isDeleteSpaceTypeModalOpen) {\n setSpaceTypeId(selectedSpaceType?.id);\n } else {\n setSpaceTypeId('');\n }\n }, [isDeleteSpaceTypeModalOpen]);\n\n return (\n \n {\n setSpaceTypeData(defaultSpaceTypeObj);\n closeEditSpaceTypeModal();\n }}\n />\n\n
\n\n {row?.name === '' ? '-' : row?.name}
;\n };\n\n const renderSpaceTypeClass = (row) => {\n return (\n \n
\n \n \n Space Types \n
\n {userPermission?.user_role === 'admin' ||\n userPermission?.permissions?.permissions?.account_buildings_permission?.edit ? (\n \n {\n openAddSpaceTypeModal();\n }}\n icon={
\n ) : null}\n \n Create New Panel \n\n \n Panel Name\n \n *\n \n \n {\n handleChange('name', e.target.value);\n }}\n labelsize={Typography.Sizes.md}\n value={panelObj?.name}\n error={errorObj?.name}\n />\n\n
\n \n
\n\n \n \n Panel Rated Amps\n \n *\n \n \n {\n if (e.target.value < 0) return;\n handleChange('rated_amps', e.target.value);\n }}\n labelsize={Typography.Sizes.md}\n value={panelObj?.rated_amps}\n error={errorObj?.rated_amps}\n />\n
\n\n \n \n Volts\n \n *\n \n \n option.value !== '120/240')\n : voltsOption\n }\n currentValue={voltsOption.filter((option) => option.value === panelObj?.voltage)}\n onChange={(e) => {\n handleChange('voltage', e.value);\n }}\n isSearchable={false}\n error={errorObj?.voltage}\n />\n
\n \n
\n\n \n \n Panel Types\n \n *\n \n \n option.value === panelObj?.panel_type)}\n onChange={(e) => {\n handleChange('panel_type', e.value);\n }}\n isSearchable={false}\n error={errorObj?.panel_type}\n />\n
\n\n {/* \n
*/}\n \n \n Number of Breakers\n \n *\n \n \n option.value === panelObj?.breaker_count\n )}\n onChange={(e) => {\n handleChange('breaker_count', e.value);\n }}\n isSearchable={true}\n error={errorObj?.breaker_count}\n />\n ) : (\n {\n if (e.target.value < 0) return;\n handleChange('breaker_count', e.target.value);\n }}\n labelsize={Typography.Sizes.md}\n value={panelObj?.breaker_count}\n error={errorObj?.breaker_count}\n />\n )}\n
\n \n
\n\n \n
\n \n \n Number of Breakers\n \n *\n \n \n option.value === panelObj?.breaker_count\n )}\n onChange={(e) => {\n handleChange('breaker_count', e.value);\n }}\n isSearchable={true}\n error={errorObj?.breaker_count}\n />\n ) : (\n {\n if (e.target.value < 0) return;\n handleChange('breaker_count', e.target.value);\n }}\n labelsize={Typography.Sizes.md}\n value={panelObj?.breaker_count}\n error={errorObj?.breaker_count}\n />\n )}\n
\n \n Breaker Rated Amps \n {\n if (e.target.value < 0) return;\n handleChange('breaker_rated_amps', e.target.value);\n }}\n labelsize={Typography.Sizes.md}\n value={panelObj?.breaker_rated_amps}\n error={errorObj?.breaker_rated_amps}\n />\n
\n \n Location \n option.value === panelObj?.space_id)}\n onChange={(e) => {\n handleChange('space_id', e.value);\n }}\n isSearchable={true}\n customSearchCallback={({ data, query }) => defaultDropdownSearch(data, query?.value)}\n menuPlacement=\"top\"\n />\n
\n\n \n Parent Panel \n option.value === panelObj?.parent_panel)}\n onChange={(e) => {\n handleChange('parent_panel', e.value);\n }}\n isSearchable={true}\n customSearchCallback={({ data, query }) => defaultDropdownSearch(data, query?.value)}\n error={errorObj?.parent_panel}\n menuPlacement=\"top\"\n />\n
\n\n \n {\n closeCreatePanelModel();\n setPanelObj(defaultPanelObj);\n setErrorObj(defaultErrorObj);\n }}\n />\n\n
\n\n \n {row?.panel_name === '' ? '-' : row?.panel_name}\n
\n \n );\n };\n\n const renderPanelLocation = (row) => {\n return \n
\n \n \n Panels \n
\n {isSuperAdmin || canUserCreate ? (\n \n
\n ) : null}\n \n {items.map(({ id }) => (\n
\n )}\n\n {items && (\n \n {id} \n
\n ))}\n \n {items.map(({ status }) => (\n
\n )}\n\n \n
\n ))}\n \n \n {ratedAmps}\n \n \n {ratedVolts}\n \n
\n\n \n {equipmentName ? (\n \n {equipmentName}\n \n ) : (\n items?.some(({ deviceId }) => deviceId) && (\n
\n\n {items && (\n \n {items.map(\n ({ deviceId }) =>\n deviceId && (\n
\n )\n )}\n \n
\n )\n )}\n \n {items.map(({ sensorId }) => (\n
\n )}\n\n \n {sensorId} \n
\n ))}\n \n {isLoading ? (\n callBackMemoized(BREAKER_CALLBACKS.ON_SHOW_CHART_DATA, event)}\n type={Button.Type.secondaryGrey}\n label=\"\"\n icon={ callBackMemoized(BREAKER_CALLBACKS.ON_EDIT, event)}\n type={Button.Type.secondaryGrey}\n label=\"\"\n icon={
\n \n );\n};\n\nBreaker.Status = BREAKER_STATUSES;\nBreaker.Type = BREAKER_TYPES;\nBreaker.ItemsPropMap = BREAKER_ITEMS_PROP_MAP;\n\nBreaker.propTypes = {\n items: PropTypes.arrayOf(\n PropTypes.shape({\n id: stringOrNumberPropTypes,\n status: PropTypes.oneOf(Object.values(BREAKER_STATUSES)).isRequired,\n deviceId: stringOrNumberPropTypes,\n sensorId: stringOrNumberPropTypes,\n })\n ),\n ratedAmps: stringOrNumberPropTypes,\n ratedVolts: stringOrNumberPropTypes,\n equipmentName: PropTypes.string,\n onEdit: PropTypes.func,\n onShowChart: PropTypes.func,\n isFlagged: PropTypes.bool,\n type: PropTypes.oneOf(Object.values(Breaker.Type)),\n styleWrapper: PropTypes.object,\n isMain: PropTypes.bool,\n isLoading: PropTypes.bool,\n};\n\nexport default Breaker;\n","import React from 'react';\nimport cx from 'classnames';\nimport PropTypes from 'prop-types';\n\nimport Typography from '../typography';\nimport { Button } from '../button';\n\nimport './DangerZone.scss';\n\nconst DangerZone = ({\n title,\n headerContent,\n bodyContent,\n labelButton,\n onClickButton,\n iconButton,\n classNameWrapper,\n style,\n}) => {\n return (\n \n
\n );\n};\n\nDangerZone.propTypes = {\n title: PropTypes.node.isRequired,\n labelButton: PropTypes.node,\n onClickButton: PropTypes.func,\n iconButton: PropTypes.node,\n bodyContent: PropTypes.node,\n headerContent: PropTypes.node,\n classNameWrapper: PropTypes.string,\n};\n\nexport default DangerZone;\n","import PropTypes from 'prop-types';\n\nconst PROP_TYPES = {\n panel: {\n typeOptions: PropTypes.arrayOf(\n PropTypes.shape({ label: PropTypes.node.isRequired, value: PropTypes.any.isRequired })\n ),\n typeProps: PropTypes.any,\n startingBreaker: PropTypes.any,\n numberOfBreakers: PropTypes.object,\n mainBreaker: PropTypes.any.isRequired,\n mainBreakerEdit: PropTypes.any,\n\n //callBacks\n //breakerProps, breakerData, children - args\n callBackBreakerProps: PropTypes.func,\n onBreakerLinkedClick: PropTypes.func.isRequired,\n isEditable: PropTypes.bool,\n states: {\n isEditingModeState: PropTypes.bool,\n isViewDeviceIdsState: PropTypes.bool,\n },\n hideViewDeviceIdControl: PropTypes.bool,\n isOneColumn: PropTypes.bool,\n styles: PropTypes.object,\n },\n breakerColumn: {\n //breakerProps, breakerData, children - args\n callBackBreakerProps: PropTypes.func,\n },\n breakerWrapper: {\n nodesMap: PropTypes.any,\n },\n breakerLinkerButton: {\n isLinked: PropTypes.bool,\n },\n onPanelEditClick: PropTypes.func,\n onPanelToggleDeviceView: PropTypes.func,\n dangerZoneProps: PropTypes.any,\n};\n\nconst PREFIXES_TO_BREAKERS_VALUES = Object.freeze({\n ratedAmps: 'A',\n ratedVolts: 'V',\n});\n\nexport { PROP_TYPES, PREFIXES_TO_BREAKERS_VALUES };\n","import { Breaker } from '../../breaker';\nimport { PREFIXES_TO_BREAKERS_VALUES } from './constants';\n\n/***\n * Just extracts id as integer.\n * @param id - String, id with text, like: 'Breaker-1'.....\n * @returns {number} - Integer is always positive.\n */\nconst getNumberOfBreaker = (id) => parseFloat(String(id).replace(/[a-z]|-/g, ''));\n\n/**\n * Edges to connect breakers.\n * @typedef {Object} Edges\n * @property {Object[]} edges - Edges to connect breakers.\n * @property {string} edges[].id - The id of the edge.\n * @property {string} edges[].source - The source breaker to be connected as child.\n * @property {string} edges[].target - The target breaker to be connected as parent.\n */\n\n/***\n * Sorts edges.\n * @param {Edges} edges\n * @returns {Edges} - Sorted list of edges\n */\nconst sortEdges = (edges) => [...edges].sort((a, b) => getNumberOfBreaker(a.id) - getNumberOfBreaker(b.id));\n\n/***\n * Takes edges {source: ...., target: ....} and creates grouped linked lists.\n * @param {Edges} edges\n * @returns {Object.\n {title && (\n \n {title}\n \n )}\n {headerContent}\n
\n \n {onClickButton && (\n
\n \n {Object.values(preparedBreakersProps).map((componentProps) => (\n
\n );\n};\n\nBreakerColumn.propTypes = PROP_TYPES.breakerColumn;\n\nexport { BreakerColumn };\n","var _path;\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nimport * as React from \"react\";\nfunction SvgObjectUngrouped(_ref, svgRef) {\n let {\n title,\n titleId,\n ...props\n } = _ref;\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 24,\n height: 24,\n viewBox: \"0 0 24 24\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M3 7.75C2.375 7.40625 2 6.75 2 6C2 4.90625 2.875 4 4 4C4.71875 4 5.375 4.40625 5.71875 5H12.25C12.5938 4.40625 13.25 4 14 4C15.0938 4 16 4.90625 16 6C16 6.75 15.5938 7.40625 15 7.75V11.2812C15.5938 11.625 16 12.2812 16 13C16 14.125 15.0938 15 14 15C13.25 15 12.5938 14.625 12.25 14H5.71875C5.375 14.625 4.71875 15 4 15C2.875 15 2 14.125 2 13C2 12.2812 2.375 11.625 3 11.2812V7.75ZM5 7.75V11.2812C5.28125 11.4688 5.53125 11.7188 5.71875 12H12.25C12.4375 11.7188 12.6875 11.4688 13 11.2812V7.75C12.6875 7.5625 12.4375 7.3125 12.25 7H5.71875C5.53125 7.3125 5.28125 7.5625 5 7.75ZM11.7188 19C11.375 19.625 10.7188 20 10 20C8.875 20 8 19.125 8 18C8 17.2812 8.375 16.625 9 16.2812V15H11V16.2812C11.2812 16.4688 11.5312 16.7188 11.7188 17H18.25C18.4375 16.7188 18.6875 16.4688 19 16.2812V12.75C18.6875 12.5625 18.4375 12.3125 18.25 12H16.8125C16.6562 11.5312 16.3438 11.125 16 10.7812V10H18.25C18.5938 9.40625 19.25 9 20 9C21.0938 9 22 9.90625 22 11C22 11.75 21.5938 12.4062 21 12.75V16.2812C21.5938 16.625 22 17.2812 22 18C22 19.125 21.0938 20 20 20C19.25 20 18.5938 19.625 18.25 19H11.7188Z\",\n fill: \"#7C879C\"\n })));\n}\nconst ForwardRef = /*#__PURE__*/React.forwardRef(SvgObjectUngrouped);\nexport default __webpack_public_path__ + \"static/media/object-ungrouped.bc4d4a96.svg\";\nexport { ForwardRef as ReactComponent };","var _path;\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nimport * as React from \"react\";\nfunction SvgObjectGroup(_ref, svgRef) {\n let {\n title,\n titleId,\n ...props\n } = _ref;\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 24,\n height: 24,\n viewBox: \"0 0 24 24\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M5.75 8C5.75 7.33594 6.29688 6.75 7 6.75H12C12.6641 6.75 13.25 7.33594 13.25 8V11.75C13.25 12.4531 12.6641 13 12 13H7C6.29688 13 5.75 12.4531 5.75 11.75V8ZM12 14.25C13.3672 14.25 14.5 13.1562 14.5 11.75V10.5H17C17.6641 10.5 18.25 11.0859 18.25 11.75V15.5C18.25 16.2031 17.6641 16.75 17 16.75H12C11.2969 16.75 10.75 16.2031 10.75 15.5V14.25H12ZM2.625 6.28125C2.23438 5.92969 2 5.46094 2 4.875C2 3.85938 2.82031 3 3.875 3C4.42188 3 4.89062 3.27344 5.24219 3.625H18.7188C19.0703 3.27344 19.5391 3 20.125 3C21.1406 3 22 3.85938 22 4.875C22 5.46094 21.7266 5.92969 21.375 6.28125V17.2578C21.7266 17.5703 22 18.0781 22 18.625C22 19.6797 21.1406 20.5 20.125 20.5C19.5391 20.5 19.0703 20.2656 18.7188 19.875H5.24219C4.89062 20.2656 4.42188 20.5 3.875 20.5C2.82031 20.5 2 19.6797 2 18.625C2 18.0781 2.23438 17.5703 2.625 17.2578V6.28125ZM4.5 6.67188V16.8672C5.00781 17.0625 5.4375 17.4922 5.63281 18H18.3281C18.5234 17.4922 18.9531 17.0625 19.5 16.8672V6.67188C18.9531 6.47656 18.5234 6.04688 18.3281 5.5H5.63281C5.4375 6.04688 5.00781 6.47656 4.5 6.67188Z\",\n fill: \"#7C879C\"\n })));\n}\nconst ForwardRef = /*#__PURE__*/React.forwardRef(SvgObjectGroup);\nexport default __webpack_public_path__ + \"static/media/object-group.3c8e92e5.svg\";\nexport { ForwardRef as ReactComponent };","import React, { useCallback, useState } from 'react';\nimport cx from 'classnames';\n\nimport { ReactComponent as UnGroupedSVG } from '../../../assets/icons/object-ungrouped.svg';\nimport { ReactComponent as GroupSVG } from '../../../assets/icons/object-group.svg';\nimport { ReactComponent as LoadingSVG } from '../../../assets/icons/loading.svg';\n\nimport { PROP_TYPES } from '../constants';\n\nconst BreakerLinkerButton = ({ isLinked, onClick, edgeData, side }) => {\n const [isLoading, setIsLoading] = useState(false);\n\n const clickHandler = useCallback(() => {\n onClick && onClick(edgeData, setIsLoading);\n }, [edgeData, onClick]);\n\n return (\n \n {edgesData.map((edgeData) => {\n const isLinkedProp =\n nodesMap[edgeData.source][isLinked] &&\n nodesMap[edgeData.target][isLinked] &&\n nodesMap[edgeData.target][parentBreaker];\n\n return (\n
\n );\n },\n (oldProps, newProps) => _.isEqual(oldProps, newProps)\n);\n\n// BreakerLinkerColumn\n\nexport { BreakerLinkerColumn };\n","import React from 'react';\nimport cx from 'classnames';\n\nimport { BreakerColumn } from './BreakerColumn';\nimport { BreakerLinkerColumn } from './BreakerLinkerColumn';\n\nimport { groupEdgesToColumns, sortEdges } from '../helper';\nimport { generateID } from '../../../helpers/helper';\n\nimport { PROP_TYPES } from '../constants';\n\nconst BreakersWrapper = (props) => {\n const { edges, nodesMap, isEditingMode, isOneColumn } = props;\n\n if (!edges) {\n return null;\n }\n\n const groupedEdges = isOneColumn ? { edges: sortEdges(edges) } : groupEdgesToColumns(edges);\n\n return (\n \n {Object.entries(groupedEdges).map((edge, index) => {\n return (\n <>\n {isEditingMode && (\n
\n );\n};\n\nBreakersWrapper.propTypes = PROP_TYPES.breakerWrapper;\n\nexport { BreakersWrapper };\n","var _path;\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nimport * as React from \"react\";\nfunction SvgLinkSlash(_ref, svgRef) {\n let {\n title,\n titleId,\n ...props\n } = _ref;\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 24,\n height: 24,\n viewBox: \"0 0 24 24\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M6.66894 7.23945C8.7163 5.65846 11.6616 5.79899 13.5294 7.62592C15.0739 9.13664 15.4331 11.4203 14.571 13.2824L16.2233 14.5472L19.6356 11.2095C20.9646 9.87444 20.9646 7.76645 19.6356 6.43139C18.3425 5.20172 16.2951 5.13146 14.9302 6.29085L14.7147 6.46652C14.3555 6.78272 13.8168 6.74759 13.4935 6.39625C13.1702 6.04492 13.2061 5.51792 13.5653 5.20172L13.7808 5.02606C15.8282 3.2694 18.9172 3.3748 20.8568 5.23686C22.8683 7.20432 22.8683 10.4014 20.8568 12.404L17.5882 15.6012L22.6527 19.5009C23.0478 19.782 23.1197 20.309 22.7964 20.6603C22.5091 21.0468 21.9703 21.1171 21.6111 20.8009L0.347258 4.49906C-0.0478467 4.218 -0.119684 3.691 0.203584 3.33966C0.490933 2.9532 1.02971 2.88293 1.3889 3.19913L6.66894 7.23945ZM8.10569 8.32858L13.1702 12.1932C13.5294 11.0338 13.2421 9.73391 12.3082 8.82045C11.1588 7.69618 9.39876 7.52052 8.10569 8.32858ZM9.4706 16.3741C8.39304 15.3201 7.89018 13.9148 7.96201 12.5094L9.90162 14.0202C10.0812 14.4418 10.3326 14.8282 10.6918 15.1796C11.2306 15.7417 11.949 16.0579 12.6674 16.1282L14.607 17.6389C12.8469 18.1659 10.8714 17.7443 9.4706 16.3741ZM4.19055 9.59338L5.55546 10.6474L3.36443 12.7905C2.03544 14.1256 2.03544 16.2336 3.36443 17.5686C4.6575 18.7983 6.70486 18.8685 8.06977 17.7091L8.28528 17.5335C8.64447 17.2173 9.18325 17.2524 9.50651 17.6037C9.82978 17.9551 9.79386 18.4821 9.43468 18.7983L9.21917 18.9739C7.1718 20.7306 4.0828 20.6252 2.14319 18.7631C0.131747 16.7957 0.131747 13.5634 2.14319 11.596L4.19055 9.59338Z\",\n fill: \"#7C879C\"\n })));\n}\nconst ForwardRef = /*#__PURE__*/React.forwardRef(SvgLinkSlash);\nexport default __webpack_public_path__ + \"static/media/link-slash.417c8947.svg\";\nexport { ForwardRef as ReactComponent };","import React, { useCallback, useEffect, useState } from 'react';\nimport pluralize from 'pluralize';\nimport cx from 'classnames';\n\nimport Select from '../../form/select';\nimport Input from '../../form/input/Input';\nimport { Button } from '../../button';\nimport { Breaker } from '../../breaker';\nimport Brick from '../../brick';\nimport { Toggles } from '../../toggles';\nimport { DangerZone } from '../../dangerZone';\nimport Typography from '../../typography';\n\nimport { BreakersWrapper } from './components/BreakersWrapper';\n\nimport { ReactComponent as UnlinkSVG } from '../../assets/icons/link-slash.svg';\nimport { PROP_TYPES } from './constants';\n\nimport './Panel.scss';\n\nexport const PanelWidgetContext = React.createContext({});\n\nconst Panel = (props) => {\n const {\n typeProps,\n typeOptions,\n numberOfBreakers,\n startingBreaker,\n mainBreaker,\n mainBreakerEdit = null,\n nodes = [],\n isEditable,\n onPanelEditClick,\n onPanelToggleDeviceView,\n states,\n dangerZoneProps,\n hideViewDeviceIdControl,\n className,\n style,\n } = props;\n\n const [isEditingMode, setIsEditionMode] = useState(false);\n const [viewDeviceIds, setViewDeviceIds] = useState(false);\n\n useEffect(() => {\n setIsEditionMode(states?.isEditingModeState);\n setViewDeviceIds(states?.isViewDeviceIdsState);\n }, [states]);\n\n const onEditClickHandler = useCallback((event) => {\n setIsEditionMode((oldState) => {\n onPanelEditClick && onPanelEditClick({ event, isEditingMode: !oldState });\n return !oldState;\n });\n }, []);\n\n const onToggleChangeHandler = useCallback((event) => {\n setViewDeviceIds((oldState) => {\n onPanelToggleDeviceView && onPanelToggleDeviceView({ event, viewDeviceIds: !oldState });\n return !oldState;\n });\n }, []);\n\n const nodesMap = nodes.reduce((acc, node) => {\n acc[node.id] = node;\n return acc;\n }, {});\n\n const breakersWrapperProps = {\n nodesMap,\n ...props,\n onEdit: isEditingMode && props.onEdit,\n isEditingMode,\n };\n\n const panelHeaderControl = () => {\n if (isEditingMode) {\n return (\n <>\n {typeProps && }\n {numberOfBreakers && }\n {startingBreaker && }\n \n );\n }\n\n return (\n \n
\n \n );\n};\n\nPanel.propTypes = PROP_TYPES.panel;\n\nexport default Panel;\n","import React from 'react';\nimport Modal from 'react-bootstrap/Modal';\nimport Brick from '../../../sharedComponents/brick';\nimport { Button } from '../../../sharedComponents/button';\nimport Typography from '../../../sharedComponents/typography';\n\nconst UnlinkBreaker = ({\n showUnlinkAlert,\n handleUnlinkAlertClose,\n handleEditBreakerShow,\n isResetting,\n unLinkCurrentBreaker,\n breakersId,\n setBreakerUpdateId,\n}) => {\n return (\n \n {panelHeaderControl()}\n\n {isEditable && (\n
\n \n
\n )}\n \n {mainBreaker && (\n ({ id, status }))}\n isMain\n onEdit={isEditingMode && mainBreakerEdit}\n />\n )}\n\n {!hideViewDeviceIdControl && (\n
\n \n \n {React.Children.map(props.children, (child, index) =>\n React.cloneElement(child, { onEnter: (element) => handleOnEnter(element, index), tabClassName })\n )}\n \n
\n );\n};\n\nTabs.Item = Tab;\n\nTabs.Types = TABS_TYPES;\n\nTabs.Item.propTypes = {\n eventKey: PropTypes.string.isRequired,\n title: PropTypes.node,\n};\n\nTabs.propTypes = {\n defaultActiveKey: PropTypes.string,\n activeKey: PropTypes.string,\n type: PropTypes.oneOf(Object.values(TABS_TYPES)),\n tabClassName: PropTypes.string,\n};\n\nexport default Tabs;\n","var _path;\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nimport * as React from \"react\";\nfunction SvgPlusBlue(_ref, svgRef) {\n let {\n title,\n titleId,\n ...props\n } = _ref;\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 14,\n height: 14,\n viewBox: \"0 0 14 14\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n d: \"M6.99967 0.333374C7.45991 0.333374 7.83301 0.70647 7.83301 1.16671V6.16671H12.833C13.2932 6.16671 13.6663 6.5398 13.6663 7.00004C13.6663 7.46028 13.2932 7.83337 12.833 7.83337H7.83301V12.8334C7.83301 13.2936 7.45991 13.6667 6.99967 13.6667C6.53944 13.6667 6.16634 13.2936 6.16634 12.8334V7.83337H1.16634C0.706104 7.83337 0.333008 7.46028 0.333008 7.00004C0.333008 6.5398 0.706104 6.16671 1.16634 6.16671H6.16634V1.16671C6.16634 0.70647 6.53944 0.333374 6.99967 0.333374Z\",\n fill: \"#444CE7\"\n })));\n}\nconst ForwardRef = /*#__PURE__*/React.forwardRef(SvgPlusBlue);\nexport default __webpack_public_path__ + \"static/media/plusBlue.15516ec2.svg\";\nexport { ForwardRef as ReactComponent };","var _path;\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nimport * as React from \"react\";\nfunction SvgUnlinkOld(_ref, svgRef) {\n let {\n title,\n titleId,\n ...props\n } = _ref;\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 20,\n height: 16,\n viewBox: \"0 0 20 16\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M5.55745 4.03288C7.26359 2.71538 9.71803 2.83249 11.2745 4.35493C12.5616 5.61387 12.8609 7.51692 12.1425 9.06863L13.5194 10.1226L16.363 7.34125C17.4705 6.2287 17.4705 4.47204 16.363 3.35949C15.2854 2.33477 13.5793 2.27622 12.4419 3.24238L12.2623 3.38877C11.9629 3.65227 11.514 3.62299 11.2446 3.33021C10.9752 3.03743 11.0051 2.59827 11.3044 2.33477L11.484 2.18838C13.1902 0.724499 15.7643 0.812332 17.3807 2.36405C19.0569 4.0036 19.0569 6.66787 17.3807 8.33669L14.6568 11.001L18.8773 14.2508C19.2065 14.485 19.2664 14.9242 18.997 15.2169C18.7576 15.539 18.3086 15.5976 18.0093 15.3341L0.289382 1.74922C-0.0398722 1.515 -0.0997366 1.07583 0.169653 0.783054C0.409111 0.461 0.858094 0.402444 1.15742 0.665943L5.55745 4.03288ZM6.75474 4.94048L10.9752 8.16103C11.2745 7.19486 11.035 6.11159 10.2568 5.35037C9.29898 4.41349 7.8323 4.2671 6.75474 4.94048ZM7.89216 11.6451C6.9942 10.7667 6.57515 9.59563 6.63501 8.42453L8.25135 9.68347C8.40101 10.0348 8.61054 10.3569 8.90986 10.6496C9.35884 11.1181 9.95749 11.3816 10.5561 11.4401L12.1725 12.6991C10.7058 13.1382 9.05952 12.7869 7.89216 11.6451ZM3.49213 5.99448L4.62955 6.87281L2.80369 8.65875C1.6962 9.7713 1.6962 11.528 2.80369 12.6405C3.88125 13.6652 5.58738 13.7238 6.72481 12.7576L6.9044 12.6112C7.20372 12.3477 7.65271 12.377 7.9221 12.6698C8.19149 12.9626 8.16155 13.4017 7.86223 13.6652L7.68264 13.8116C5.9765 15.2755 3.40233 15.1877 1.78599 13.636C0.109789 11.9964 0.109789 9.30286 1.78599 7.66331L3.49213 5.99448Z\",\n fill: \"#B42318\"\n })));\n}\nconst ForwardRef = /*#__PURE__*/React.forwardRef(SvgUnlinkOld);\nexport default __webpack_public_path__ + \"static/media/unlink_old.ea162230.svg\";\nexport { ForwardRef as ReactComponent };","import React from 'react';\nimport Modal from 'react-bootstrap/Modal';\nimport Typography from '../../../sharedComponents/typography';\nimport { Button } from '../../../sharedComponents/button';\nimport Brick from '../../../sharedComponents/brick';\n\nconst UnlabelEquipAlert = ({\n showUnlabeledAlert,\n closeUnlabelAlertModal,\n saveBreakersDetails,\n openBreakerConfigModal,\n}) => {\n return (\n <>\n \n {\n closeReassignAlert();\n openBreakerConfigModal();\n saveBreakersDetails();\n }}\n className=\"w-100\"\n />\n {\n closeReassignAlert();\n openBreakerConfigModal();\n saveBreakersDetails('forceSave');\n }}\n className=\"w-100\"\n />\n
\n \n \n
\n\n \n \n {panelObj?.panel_name}\n {firstBreakerObj?.device_name === '' ? '' : `> ${firstBreakerObj?.device_name}`}\n \n \n {firstBreakerObj?.breaker_type === 1 && `Breaker ${firstBreakerObj?.breaker_number}`}\n {firstBreakerObj?.breaker_type === 2 &&\n `Breakers ${firstBreakerObj?.breaker_number}, ${secondBreakerObj?.breaker_number}`}\n {firstBreakerObj?.breaker_type === 3 &&\n `Breakers ${firstBreakerObj?.breaker_number}, ${secondBreakerObj?.breaker_number}, ${thirdBreakerObj?.breaker_number}`}\n \n
\n \n {isEditingMode && (\n setActiveTab('edit-breaker')}>\n {`Edit Breaker${firstBreakerObj?.breaker_type !== 1 ? `(s)` : ''}`}\n \n )}\n setActiveTab('metrics')}>\n {`Metrics`}\n \n
\n \n
\n \n
\n\n \n {activeTab !== 'metrics' && (\n
\n \n {/* Edit Breakers */}\n {activeTab === 'edit-breaker' && (\n <>\n
\n
\n
\n )}\n\n \n
\n\n \n Phase \n
\n\n \n Rated Amps \n {\n handleChange('rated_amps', +e.target.value);\n setErrorObj({ ...errorObj, ['rated_amps']: null });\n }}\n disabled={firstBreakerObj?.type === 'blank'}\n error={errorObj?.rated_amps}\n />\n ) : (\n \n )}\n
\n\n \n Volts \n
\n \n
\n
\n
\n )}\n\n {/* Breaker 3 */}\n {firstBreakerObj?.breaker_type === 3 && (\n \n {\n setActiveEquipTab(e);\n }}\n className=\"dropdown-visibility\">\n \n \n\n {/* Create Equipment */}\n \n \n \n
\n\n \n
\n \n
\n \n
\n \n {\n if (firstBreakerObj?.type === 'equipment')\n return;\n handleBreakerTypeChange(\n 'type',\n parentBreakerObj?.type,\n 'equipment'\n );\n }}\n />\n
\n \n {isEquipmentListFetching ? (\n \n option.value === selectedEquipment\n )}\n onChange={(e) => {\n handleChange('equipment_link', e.value);\n setSelectedEquipment(e.value);\n }}\n customSearchCallback={({ data, query }) =>\n defaultDropdownSearch(data, query?.value)\n }\n className=\"basic-single\"\n isDisabled={\n firstBreakerObj?.type !== 'equipment'\n }\n />\n )}\n
\n \n \n Unlabeled\n \n
\n \n {\n if (firstBreakerObj?.type === 'unlabeled')\n return;\n handleBreakerTypeChange(\n 'type',\n parentBreakerObj?.type,\n 'unlabeled'\n );\n }}\n />\n
\n \n \n Unwired Breaker\n \n
\n \n {\n if (firstBreakerObj?.type === 'unwired') return;\n handleBreakerTypeChange(\n 'type',\n parentBreakerObj?.type,\n 'unwired'\n );\n }}\n />\n
\n \n \n Blank\n \n
\n \n {\n if (firstBreakerObj?.type === 'blank') return;\n handleBreakerTypeChange(\n 'type',\n parentBreakerObj?.type,\n 'blank'\n );\n }}\n />\n
\n \n \n Notes\n \n {\n handleChange('notes', e.target.value);\n }}\n inputClassName=\"pt-2\"\n />\n
\n \n
\n \n
\n \n \n Name\n \n {\n handleCreateEquipChange('name', e.target.value);\n }}\n value={equipmentObj?.name}\n labelsize={Typography.Sizes.md}\n error={equipmentErrors?.name}\n />\n ) : (\n
\n \n \n Quantity\n \n {\n handleCreateEquipChange(\n 'quantity',\n e.target.value\n );\n }}\n value={equipmentObj?.quantity}\n labelsize={Typography.Sizes.md}\n error={equipmentErrors?.quantity}\n />\n ) : (\n
\n \n
\n \n \n Equipment Type\n \n \n option.value === equipmentObj?.equipment_type\n )}\n options={equipmentTypeData}\n onChange={(e) => {\n handleCreateEquipChange('equipment_type', e.value);\n }}\n customSearchCallback={({ data, query }) =>\n defaultDropdownSearch(data, query?.value)\n }\n className=\"basic-single\"\n error={equipmentErrors?.equipment_type}\n isDisabled={firstBreakerObj?.type !== 'equipment'}\n menuPlacement=\"top\"\n />\n
\n\n \n \n End Use Category\n \n option.value === equipmentObj?.end_use\n )}\n options={endUseData}\n onChange={(e) => {\n handleCreateEquipChange('end_use', e.value);\n }}\n className=\"basic-single\"\n error={equipmentErrors?.end_use}\n isDisabled={firstBreakerObj?.type !== 'equipment'}\n menuPlacement=\"top\"\n />\n
\n \n \n Equipment Location\n \n option.value === equipmentObj?.space_id\n )}\n options={locationData}\n onChange={(e) => {\n handleCreateEquipChange('space_id', e.value);\n }}\n customSearchCallback={({ data, query }) =>\n defaultDropdownSearch(data, query?.value)\n }\n className=\"basic-single\"\n isDisabled={firstBreakerObj?.type !== 'equipment'}\n menuPlacement=\"top\"\n />\n
\n \n
\n )}\n \n {/* Breaker 1 */}\n
\n
\n\n {/* Breaker 2 */}\n {(firstBreakerObj?.breaker_type === 2 ||\n firstBreakerObj?.breaker_type === 3) && (\n \n \n {firstBreakerObj?.name}\n \n \n
\n \n \n Device ID\n \n option.value === firstBreakerObj?.device_link\n )}\n onChange={(e) => {\n handleBreakerConfigChange('device_link', e.value, 'first');\n if (firstDeviceSearch !== '') {\n fetchPassiveDeviceList(bldgId, 'default-list', 'first');\n }\n }}\n onInputChange={(e) => setFirstDeviceSearch(e)}\n className=\"basic-single\"\n isDisabled={\n firstBreakerObj?.type === 'unwired' ||\n firstBreakerObj?.type === 'blank'\n }\n />\n
\n \n \n Sensor #\n \n ({\n ...el,\n label:\n el.value === firstBreakerObj?.sensor_link\n ? el.label.split(` (`)[0]\n : el.label,\n }))\n .filter(\n (option) =>\n option.value === firstBreakerObj?.sensor_link\n )}\n onChange={(e) => {\n handleBreakerConfigChange('sensor_link', e.value, 'first');\n handleSensorChange(firstBreakerObj?.sensor_link, e.value);\n }}\n className=\"basic-single\"\n isDisabled={\n firstBreakerObj?.type === 'unwired' ||\n firstBreakerObj?.type === 'blank'\n }\n />\n
\n {firstBreakerObj?.sensor_link && (\n \n \n Amps\n \n
\n )}\n \n
\n \n {secondBreakerObj?.name}\n \n \n
\n \n \n Device ID\n \n \n option.value === secondBreakerObj?.device_link\n )}\n onChange={(e) => {\n handleBreakerConfigChange(\n 'device_link',\n e.value,\n 'second'\n );\n if (secondDeviceSearch !== '') {\n fetchPassiveDeviceList(\n bldgId,\n 'default-list',\n 'second'\n );\n }\n }}\n onInputChange={(e) => setSecondDeviceSearch(e)}\n className=\"basic-single\"\n isDisabled={\n firstBreakerObj?.type === 'unwired' ||\n firstBreakerObj?.type === 'blank'\n }\n />\n
\n \n \n Sensor #\n \n ({\n ...el,\n label:\n el.value === secondBreakerObj?.sensor_link\n ? el.label.split(` (`)[0]\n : el.label,\n }))\n .filter(\n (option) =>\n option.value === secondBreakerObj?.sensor_link\n )}\n onChange={(e) => {\n handleBreakerConfigChange(\n 'sensor_link',\n e.value,\n 'second'\n );\n handleSensorChange(\n secondBreakerObj?.sensor_link,\n e.value\n );\n }}\n className=\"basic-single\"\n isDisabled={\n firstBreakerObj?.type === 'unwired' ||\n firstBreakerObj?.type === 'blank'\n }\n />\n
\n {secondBreakerObj?.sensor_link && (\n \n \n Amps\n \n
\n )}\n \n
\n \n {thirdBreakerObj?.name}\n \n \n
\n \n \n Device ID\n \n \n option.value === thirdBreakerObj?.device_link\n )}\n onChange={(e) => {\n handleBreakerConfigChange(\n 'device_link',\n e.value,\n 'third'\n );\n if (thirdDeviceSearch !== '') {\n fetchPassiveDeviceList(\n bldgId,\n 'default-list',\n 'third'\n );\n }\n }}\n onInputChange={(e) => setThirdDeviceSearch(e)}\n className=\"basic-single\"\n isDisabled={\n firstBreakerObj?.type === 'unwired' ||\n firstBreakerObj?.type === 'blank'\n }\n />\n
\n \n \n Sensor #\n \n ({\n ...el,\n label:\n el.value === thirdBreakerObj?.sensor_link\n ? el.label.split(` (`)[0]\n : el.label,\n }))\n .filter(\n (option) =>\n option.value === thirdBreakerObj?.sensor_link\n )}\n onChange={(e) => {\n handleBreakerConfigChange(\n 'sensor_link',\n e.value,\n 'third'\n );\n handleSensorChange(\n thirdBreakerObj?.sensor_link,\n e.value\n );\n }}\n className=\"basic-single\"\n isDisabled={\n firstBreakerObj?.type === 'unwired' ||\n firstBreakerObj?.type === 'blank'\n }\n />\n
\n {thirdBreakerObj?.sensor_link && (\n \n \n Amps\n \n
\n )}\n \n
\n
\n\n {firstBreakerObj?.breaker_type !== 1 && (\n \n {\n closeBreakerConfigModal();\n handleUnlinkAlertShow();\n }}\n icon={
\n\n \n {\n if (\n firstBreakerObj?.breaker_type === 1 &&\n breakersList.length === firstBreakerObj?.breaker_number\n ) {\n closeBreakerConfigModal();\n handleDeleteAlertShow();\n }\n }}\n icon={
\n \n \n Grouped breakers cannot be deleted\n \n
\n )}\n \n \n \n )}\n\n {/* Metrics */}\n {activeTab === 'metrics' && (\n \n
\n )}\n \n \n \n
\n\n \n {\n setConsumption(e.value);\n handleUnitChange(e.value);\n }}\n />\n
\n \n
\n ) : (\n \n
\n )}\n \n {`Panel Voltage Change`} \n\n \n {`Updating the panel voltage will automatically update the breaker voltages which will impact power and energy calculations.`}\n \n }\n />\n\n
\n \n
\n\n \n {`Update Panel`} \n\n {\n setPanelData({ ...panelData, rated_amps: +e.target.value });\n }}\n labelsize={Typography.Sizes.md}\n value={panelData?.rated_amps}\n />\n\n
\n \n Volts \n option?.value === panelData?.voltage)}\n onChange={(e) => {\n setVoltageError(null);\n setPanelData({ ...panelData, voltage: e.value });\n handleVoltageChange(originalPanelObj?.voltage, e.value, tripleBreakerExist);\n }}\n isSearchable={false}\n error={voltageError}\n />\n
\n\n \n {\n closePanelConfigModal();\n setPanelData({});\n setVoltageError(null);\n }}\n />\n\n
\n\n \n
\n\n \n Edit Panel \n
\n {isPanelFetched ? (\n \n
\n )}\n \n
\n \n {isSuperAdmin || canUserEdit ? (\n
\n \n
\n \n \n Name \n {\n handleChange('panel_name', e.target.value);\n }}\n labelsize={Typography.Sizes.md}\n value={panelObj?.panel_name}\n disabled={!(isSuperAdmin || canUserEdit)}\n />\n )}\n
\n\n \n Parent Panel \n option.value === panelObj?.parent_id)}\n onChange={(e) => {\n handleChange('parent_id', e.value);\n }}\n isSearchable={true}\n customSearchCallback={({ data, query }) =>\n defaultDropdownSearch(data, query?.value)\n }\n isDisabled={!(isSuperAdmin || canUserEdit)}\n />\n )}\n
\n\n \n Location \n option.value === panelObj?.location_id\n )}\n onChange={(e) => {\n handleChange('location_id', e.value);\n }}\n isSearchable={true}\n customSearchCallback={({ data, query }) =>\n defaultDropdownSearch(data, query?.value)\n }\n isDisabled={!(isSuperAdmin || canUserEdit)}\n />\n )}\n
\n \n
\n \n \n
\n \n \n {`Smart Plugs`} \n
\n {isSuperAdmin || canUserCreate ? (\n \n \n
\n ) : null}\n \n {`Add TP Link - Kasa Account`} \n\n \n {message}\n \n \n Email\n \n *\n \n \n {\n setEmail(e.target.value);\n }}\n error={emailError}\n />\n\n \n {\n setEmail('');\n setPassword('');\n setEmailError(null);\n setPasswordError(false);\n handleLinkClose();\n }}\n />\n\n {\n Submit();\n }}\n />\n \n
\n \n \n Password\n \n *\n \n \n {\n setPasswordType('text');\n }}\n />\n ) : (\n {\n setPasswordType('password');\n }}\n />\n )\n }\n onChange={(e) => {\n setPassword(e.target.value);\n }}\n value={password}\n error={passwordError ? 'Password is required' : null}\n />\n
\n\n \n {linkedAccount.map((record, index) => {\n return (\n \n {\n handleRecordSelect(e.target.value, record?.id);\n }}\n />\n \n {record?.email ?? '-'}\n
\n \n );\n })}\n \n ) : (\n \n {linkedAccount.map((record, index) => {\n return (\n \n {\n handleRecordSelect(e.target.value, record?.id);\n }}\n />\n \n {record?.email ?? '-'}\n
\n \n );\n })}\n \n ) : (\n {row?.email ?? '-'}
;\n};\n\nexport const renderHS110s = (row) => {\n return \n
\n );\n\n return (\n <>\n {is_error && (\n {label}
\n {value}
\n \n
\n )}\n {!is_super_user && (\n \n Duplicate Device ID found. Please check your buildings for existing smart plugs using this\n Device ID or contact Sapient support for help.\n
\n )}\n \n )}\n\n {row?.kasa_account ?? '-'}
;\n};\n","import React, { useState, useEffect } from 'react';\nimport { useAtom } from 'jotai';\nimport { useParams } from 'react-router-dom';\nimport { Row, Col, Alert } from 'reactstrap';\n\nimport { UserStore } from '../../../../store/UserStore';\nimport { BreadcrumbStore } from '../../../../store/BreadcrumbStore';\nimport { ComponentStore } from '../../../../store/ComponentStore';\nimport { buildingData, userPermissionData } from '../../../../store/globalState';\nimport { updateBuildingStore } from '../../../../helpers/updateBuildingStore';\n\nimport { ReactComponent as CircleCheckSVG } from '../../../../assets/icon/circle-check.svg';\nimport { ReactComponent as LinkSVG } from '../../../../assets/icon/link.svg';\nimport { ReactComponent as LinkSlashSVG } from '../../../../assets/icon/link-slash.svg';\nimport { ReactComponent as MagnifyingGlassSVG } from '../../../../assets/icon/magnifying-glass.svg';\nimport { ReactComponent as SignalStreamSVG } from '../../../../assets/icon/signal-stream.svg';\n\nimport Brick from '../../../../sharedComponents/brick';\nimport Typography from '../../../../sharedComponents/typography';\nimport { Button } from '../../../../sharedComponents/button';\nimport { DataTableWidget } from '../../../../sharedComponents/dataTableWidget';\n\nimport LinkModal from './LinkModal';\nimport UnLinkModal from './UnLinkModal';\nimport FindDevicesModal from './FindDevicesModal';\n\nimport {\n fetchKasaDevices,\n fetchKasaAccounts,\n getKasaLinkAccounts,\n getKasaUnLinkAccounts,\n getInsertKasaDevices,\n insertToSystem,\n} from './services';\n\nimport {\n renderEmail,\n renderHS110s,\n renderHS300s,\n renderKP115s,\n renderRemainingCapacity,\n renderSocket,\n renderTimezone,\n} from './utils/accountTableListUtils';\n\nimport {\n renderDeviceMac,\n renderKasaAccount,\n renderModel,\n renderStatus,\n renderVendor,\n} from './utils/deviceTableListUtils';\n\nimport SkeletonLoader from '../../../../components/SkeletonLoader';\nimport 'react-loading-skeleton/dist/skeleton.css';\nimport 'react-bootstrap-table-next/dist/react-bootstrap-table2.min.css';\nimport '../style.css';\nimport '../styles.scss';\n\nconst Provision = () => {\n const { bldgId } = useParams();\n\n // User Permissions\n const [userPermission] = useAtom(userPermissionData);\n const isUserAdmin = userPermission?.is_admin ?? false;\n const isSuperUser = userPermission?.is_superuser ?? false;\n const isSuperAdmin = isUserAdmin || isSuperUser;\n const canUserCreate = userPermission?.permissions?.permissions?.advanced_active_device_permission?.create ?? false;\n\n // Linked Accounts\n const [accountsList, setAccountsList] = useState([]);\n const [totalAccounts, setTotalAccounts] = useState(0);\n const [isFetchingAccountList, setFetchingAccountList] = useState(false);\n const [pageNo, setPageNo] = useState(1);\n const [pageSize, setPageSize] = useState(5);\n\n // Modal states\n const [showlink, setShowLink] = useState(false);\n const [checkFind, setCheckFind] = useState(true);\n const [showUnlink, setShowUnLink] = useState(false);\n const [showFind, setShowFind] = useState(false);\n const [kasaAccountIds, setKasaAccountIds] = useState([]);\n\n const handleLinkClose = () => {\n setShowLink(false);\n setError(false);\n };\n\n const handleUnLinkClose = () => {\n setShowUnLink(false);\n setError(false);\n };\n\n const handleFindClose = () => setShowFind(false);\n\n const [totalReadyData, setTotalReadyData] = useState(0);\n\n const [availableDevices, setAvailableDevices] = useState(0);\n const [existingDevices, setExistingDevices] = useState(0);\n const [isAddProcessing, setIsAddProcessing] = useState(false);\n const [kasaDevicesList, setKasaDevicesList] = useState([]);\n\n const [selectedStatus, setSelectedStatus] = useState(0);\n const [auth, setAuth] = useState('');\n\n const [buildingListData] = useAtom(buildingData);\n const [error, setError] = useState(false);\n const [message, setMessage] = useState('');\n const [search, setSearch] = useState('');\n const [sortBy, setSortBy] = useState({});\n\n const [deviceSearch, setDeviceSearch] = useState('');\n const [deviceSortBy, setDeviceSortBy] = useState({});\n const [devicePageNo, setDevicePageNo] = useState(1);\n const [devicePageSize, setDevicePageSize] = useState(20);\n const [selectedAccount, setSelectedAccount] = useState({});\n\n const handleUnlink = async (accountIds) => {\n let authData = {\n kasa_account_id: accountIds,\n building_id: bldgId,\n };\n await getKasaUnLinkAccounts(authData)\n .then((res) => {\n if (res.status === 200) {\n if (res.data.success === false) {\n setError(true);\n setMessage(res.data.message);\n } else {\n handleUnLinkClose();\n let arr = {\n kasa_account_ids: [],\n find_new: false,\n };\n getKasaAccount();\n getKasaDevices(arr);\n }\n }\n })\n .catch((error) => {\n setError(true);\n });\n };\n\n const handleFindDevices = (accountIds) => {\n if (accountIds.length === 0) {\n setShowFind(true);\n setCheckFind(true);\n } else {\n let arr = {\n kasa_account_ids: accountIds,\n find_new: true,\n };\n setSelectedAccount(arr);\n setKasaAccountIds(accountIds);\n setShowFind(false);\n }\n };\n\n useEffect(() => {\n if (Object.entries(selectedAccount).length !== 0)\n getKasaDevices(selectedAccount, true, selectedStatus === 0 ? 'Found' : 'Completed');\n }, [selectedAccount, devicePageNo, devicePageSize, deviceSearch, deviceSortBy, selectedStatus]);\n\n const handleAuthorize = async (email, password) => {\n let authData = {\n username: email,\n password: password,\n building_id: bldgId,\n };\n await getKasaLinkAccounts(authData)\n .then((res) => {\n if (res.status === 200) {\n if (res.data.success === false) {\n setError(true);\n setMessage(res.data.message);\n } else {\n handleLinkClose();\n localStorage.setItem('kasa_id', res.data.id);\n setAuth(res.data.id);\n }\n }\n })\n .catch((error) => {});\n };\n\n const [showAddMsg, setShowAddMsg] = useState(false);\n const [isLoading, setIsLoading] = useState(false);\n\n const handleDone = async (kasa_account_ids) => {\n setIsLoading(true);\n setCheckFind(true);\n let arr = {\n kasa_account_id: kasa_account_ids,\n building_id: bldgId,\n };\n await insertToSystem(arr)\n .then((res) => {\n if (res.data.success === true) setShowAddMsg(true);\n\n setIsLoading(false);\n let arr = {\n kasa_account_ids,\n find_new: true,\n };\n getKasaDevices(arr, false);\n })\n .catch((error) => {\n setError(true);\n setIsLoading(false);\n setCheckFind(false);\n })\n .finally(() => {\n setKasaAccountIds([]);\n });\n };\n\n const handleAddDevice = async (e, kasa_account_id, device_id) => {\n let authData = {\n building_id: bldgId,\n device_id: device_id,\n kasa_account_id: kasa_account_id,\n };\n await getInsertKasaDevices(authData)\n .then((res) => {\n if (res.status === 200) {\n getKasaDevices();\n }\n })\n .catch((error) => {\n setError(true);\n });\n };\n\n useEffect(() => {\n setShowLink(false);\n const updateBreadcrumbStore = () => {\n BreadcrumbStore.update((bs) => {\n let newList = [\n {\n label: 'Smart Plugs',\n path: `/settings/smart-plugs/${bldgId}`,\n active: false,\n },\n {\n label: 'Provisioning',\n path: '/settings/smart-plugs/provision',\n active: true,\n },\n ];\n bs.items = newList;\n });\n ComponentStore.update((s) => {\n s.parent = 'building-settings';\n });\n };\n updateBreadcrumbStore();\n }, []);\n\n const getKasaAccount = async () => {\n setFetchingAccountList(true);\n setAccountsList([]);\n\n const sorting = sortBy.method &&\n sortBy.name && {\n order_by: sortBy.name === undefined ? 'email' : sortBy.name,\n sort_by: sortBy.method === undefined ? 'ace' : sortBy.method,\n };\n\n await fetchKasaAccounts(pageNo, pageSize, bldgId, search, {\n ...sorting,\n })\n .then((res) => {\n const { success, data, total_data } = res?.data;\n\n setTotalAccounts(total_data ?? 0);\n\n if (success && data && data.length !== 0) {\n let newAccountList = [];\n\n data.forEach((el) => {\n newAccountList.push({\n id: el?.id,\n email: el?.email,\n HS110s: el?.HS110s,\n KP115s: el?.KP115s,\n HS300s: el?.HS300s,\n Socket: el?.Socket,\n Remaining_Capacity: 256 - el?.Socket,\n });\n });\n\n setAccountsList(newAccountList);\n } else {\n UserStore.update((s) => {\n s.showNotification = true;\n s.notificationMessage = 'Failed to fetch Kasa accounts.';\n s.notificationType = 'error';\n });\n }\n })\n .catch((error) => {\n UserStore.update((s) => {\n s.showNotification = true;\n s.notificationMessage = 'Failed to fetch Kasa accounts due to Internal Server Error!';\n s.notificationType = 'error';\n });\n })\n .finally(() => {\n setFetchingAccountList(false);\n });\n };\n\n const getKasaDevices = async (details, path, statusType = 'Found') => {\n setIsAddProcessing(true);\n setKasaDevicesList([]);\n\n const sort_by = deviceSortBy.method ?? 'ace';\n const ordered_by = deviceSortBy.name ?? 'device_mac';\n\n await fetchKasaDevices({\n bldgId,\n deviceSearch,\n statusType,\n pageNo: devicePageNo,\n pageSize: devicePageSize,\n sortBy: sort_by,\n orderedBy: ordered_by,\n payload: details,\n })\n .then((res) => {\n const response = res?.data;\n\n if (response?.success) {\n if (path) setCheckFind(false);\n\n if (response?.data && response?.data.length !== 0) {\n const devicesList = response?.data.map((el, index) => ({\n ...el,\n is_super_user: isSuperAdmin,\n index: index,\n }));\n setKasaDevicesList(devicesList);\n }\n\n if (response?.found) setAvailableDevices(+response?.found);\n if (response?.completed) setExistingDevices(+response?.completed);\n\n setTotalReadyData(statusType === 'Found' ? response?.found : response?.completed);\n }\n })\n .catch((error) => {})\n .finally(() => {\n setIsAddProcessing(false);\n });\n };\n\n useEffect(() => {\n getKasaAccount();\n }, [auth, search, sortBy, pageNo, pageSize]);\n\n useEffect(() => {\n if (bldgId && buildingListData.length !== 0) {\n const bldgObj = buildingListData.find((el) => el?.building_id === bldgId);\n if (bldgObj?.building_id)\n updateBuildingStore(\n bldgObj?.building_id,\n bldgObj?.building_name,\n bldgObj?.timezone,\n bldgObj?.plug_only\n );\n }\n }, [buildingListData, bldgId]);\n\n //Linked Accounts\n const currentRow = () => {\n return accountsList;\n };\n\n //Linked Devices\n const currentRowDevices = () => {\n return kasaDevicesList;\n };\n\n const accountsHeaderProps = [\n {\n name: 'Email',\n accessor: 'email',\n callbackValue: renderEmail,\n onSort: (method, name) => setSortBy({ method, name }),\n },\n {\n name: 'Timezone',\n accessor: 'timezone',\n callbackValue: renderTimezone,\n },\n {\n name: 'HS110s',\n accessor: 'HS110s',\n callbackValue: renderHS110s,\n onSort: (method, name) => setSortBy({ method, name }),\n },\n {\n name: 'KP115s',\n accessor: 'KP115s',\n callbackValue: renderKP115s,\n onSort: (method, name) => setSortBy({ method, name }),\n },\n {\n name: 'HS300s',\n accessor: 'HS300s',\n callbackValue: renderHS300s,\n onSort: (method, name) => setSortBy({ method, name }),\n },\n {\n name: 'Sockets',\n accessor: 'Socket',\n callbackValue: renderSocket,\n onSort: (method, name) => setSortBy({ method, name }),\n },\n {\n name: 'Remaining Capacity',\n accessor: 'Remaining_Capacity',\n callbackValue: renderRemainingCapacity,\n onSort: (method, name) => setSortBy({ method, name }),\n },\n ];\n\n //Linked Devices\n const headerProps2 = [\n {\n name: 'Status',\n accessor: 'status',\n callbackValue: renderStatus,\n },\n {\n name: 'Device ID',\n accessor: 'device_mac',\n callbackValue: renderDeviceMac,\n },\n {\n name: 'Vendor',\n accessor: 'vendor',\n callbackValue: renderVendor,\n },\n {\n name: 'Model',\n accessor: 'model',\n callbackValue: renderModel,\n },\n {\n name: 'Kasa Account',\n accessor: 'kasa_account',\n callbackValue: renderKasaAccount,\n },\n ];\n\n const pageListSizes = [\n {\n label: '5 Rows',\n value: '5',\n },\n {\n label: '10 Rows',\n value: '10',\n },\n {\n label: '15 Rows',\n value: '15',\n },\n ];\n\n return (\n \n {`Linked TP-Link Accounts`} \n\n
\n\n \n
\n \n
\n Devices \n\n
\n\n \n
\n \n
\n \n Update Smart Meter \n\n {\n handleChange('identifier', e.target.value.trim().toUpperCase());\n }}\n error={identifierAlert}\n labelsize={Typography.Sizes.md}\n value={passiveDeviceObj?.identifier}\n defaultValue={passiveDeviceObj?.identifier}\n />\n 16 digit serial number \n )}\n\n
\n \n {\n setPassiveDeviceObj(defaultDeviceObj);\n closeEditDeviceModal();\n }}\n />\n\n
\n\n \n Add Smart Meter \n\n \n Enter Identifier\n \n *\n \n \n {\n handleChange('mac_address', e.target.value.trim().toUpperCase());\n setDeviceErrors({ ...deviceErrors, mac_address: null });\n }}\n error={deviceErrors?.mac_address}\n labelsize={Typography.Sizes.md}\n value={deviceData?.mac_address}\n />\n 16 digit serial number \n )}\n\n
\n \n \n Model\n \n *\n \n \n option.value === deviceData?.model)}\n onChange={(e) => {\n handleChange('model', e.value);\n setDeviceErrors({ ...deviceErrors, model: null });\n }}\n error={deviceErrors?.model}\n isSearchable={true}\n />\n
\n\n \n Location \n option.value === deviceData?.space_id)}\n onChange={(e) => {\n handleChange('space_id', e.value);\n }}\n isSearchable={true}\n customSearchCallback={({ data, query }) => defaultDropdownSearch(data, query?.value)}\n menuPlacement=\"top\"\n />\n
\n\n \n {\n setDeviceData(defaultDeviceObj);\n setDeviceErrors(defaultErrors);\n closeAddDeviceModal();\n }}\n />\n\n
\n\n \n {row?.gateway_mac === '' ? '-' : row?.gateway_mac}\n
\n );\n };\n\n const defaultHeaderProps = [\n {\n name: 'Timestamp',\n accessor: 'time_stamp',\n callbackValue: renderRawDataTimestamp,\n },\n {\n name: 'Gateway / MAC',\n accessor: 'gateway_mac',\n callbackValue: renderGatewayMac,\n },\n {\n name: 'Firmware',\n accessor: 'firmware',\n },\n {\n name: 'CT Firmware',\n accessor: 'ct_firmware',\n },\n {\n name: 'Counter',\n accessor: 'counter',\n },\n {\n name: 'Sensor Type',\n accessor: 'sensor_type',\n },\n {\n name: 'OTF_515',\n accessor: 'otf_515',\n },\n {\n name: 'RSSI',\n accessor: 'rssi',\n },\n ];\n\n const [headerProps, setHeaderProps] = useState(defaultHeaderProps);\n\n const fetchRawDataForDevice = async (bldg_id, device_id, page_no = 1, page_size = 20, bldg_tz) => {\n setDataFetching(true);\n setTotalDataCount(0);\n setRawDeviceData([]);\n\n const params = `?building_id=${bldg_id}&device_id=${device_id}&page_no=${page_no}&page_size=${page_size}&tz_info=${bldg_tz}`;\n\n await getDeviceRawData(params)\n .then((res) => {\n const response = res?.data;\n if (response?.total_count) setTotalDataCount(response?.total_count);\n if (response) {\n if (response?.data.length !== 0) {\n const responseData = response?.data;\n\n const firstRecord = responseData[0];\n if (firstRecord?.sensor_data) {\n let headersListToMerge = [];\n\n Object.keys(firstRecord?.sensor_data).forEach((key) => {\n if (typeof firstRecord.sensor_data[key] === 'object') {\n headersListToMerge.push(\n ...Object.keys(firstRecord.sensor_data[key]).map((subKey) => ({\n name: `${key} ${subKey}`,\n accessor: `${key}_${subKey}`,\n }))\n );\n } else {\n headersListToMerge.push({\n name: `${key}`,\n accessor: `${key}`,\n });\n }\n });\n\n setHeaderProps([...defaultHeaderProps, ...headersListToMerge]);\n }\n\n // Transforming responseData to newResponseData format\n const newResponseData = responseData.map((data) => {\n const { sensor_data, ...rest } = data; // Extract sensor_data and other properties\n const newData = {};\n\n // Dynamically iterate through sensor_data keys and create new properties\n Object.keys(sensor_data).forEach((key) => {\n if (typeof firstRecord.sensor_data[key] === 'object') {\n const sensorKeys = Object.keys(sensor_data[key]);\n\n sensorKeys.length !== 0 &&\n sensorKeys.forEach((sensorKey) => {\n newData[`${key}_${sensorKey}`] = formatConsumptionValue(\n sensor_data[key][sensorKey],\n 2\n );\n });\n } else {\n newData[`${key}`] = formatConsumptionValue(sensor_data[key], 2);\n }\n });\n\n return { ...rest, ...newData }; // Combining other properties with newly generated properties\n });\n\n setRawDeviceData(newResponseData);\n }\n } else {\n UserStore.update((s) => {\n s.showNotification = true;\n s.notificationMessage = 'Unable to update Raw Data for due to Internal Server Error!.';\n s.notificationType = 'error';\n });\n }\n })\n .catch(() => {\n UserStore.update((s) => {\n s.showNotification = true;\n s.notificationMessage = 'Unable to update Raw Data for due to Internal Server Error!.';\n s.notificationType = 'error';\n });\n })\n .finally(() => {\n setDataFetching(false);\n setProcessing(false);\n });\n };\n\n const downloadRawDataForCSVExport = async (\n bldg_id,\n device_id,\n device_identifier = '',\n bldg_tz,\n latestHeaderProps\n ) => {\n setCSVDownloading(true);\n\n const params = `?building_id=${bldg_id}&device_id=${device_id}&tz_info=${bldg_tz}`;\n\n await getDeviceRawData(params)\n .then((res) => {\n const responseData = res?.data?.data;\n const firstRecord = responseData[0];\n\n if (responseData) {\n // Transforming responseData to newResponseData format\n const newResponseData = responseData.map((data) => {\n const { sensor_data, ...rest } = data; // Extract sensor_data and other properties\n const newData = {};\n\n // Dynamically iterate through sensor_data keys and create new properties\n Object.keys(sensor_data).forEach((key) => {\n if (typeof firstRecord.sensor_data[key] === 'object') {\n const sensorKeys = Object.keys(sensor_data[key]);\n\n sensorKeys.length !== 0 &&\n sensorKeys.forEach((sensorKey) => {\n newData[`${key}_${sensorKey}`] = sensor_data[key][sensorKey];\n });\n } else {\n newData[`${key}`] = sensor_data[key];\n }\n });\n\n return { ...rest, ...newData }; // Combining other properties with newly generated properties\n });\n\n const csvData = getRawDeviceDataTableCSVExport(\n newResponseData,\n latestHeaderProps,\n handleDateFormat\n );\n download(`${device_identifier}_${new Date().toISOString().split('T')[0]}`, csvData);\n }\n })\n .catch(() => {})\n .finally(() => {\n setCSVDownloading(false);\n });\n };\n\n useEffect(() => {\n if (!isModalOpen) {\n setRawDeviceData([]);\n setHeaderProps(defaultHeaderProps);\n setPageNo(1);\n setPageSize(20);\n }\n }, [isModalOpen]);\n\n useEffect(() => {\n if (selectedPassiveDevice?.equipments_id && selectedPassiveDevice?.bldg_id) {\n fetchRawDataForDevice(\n selectedPassiveDevice?.bldg_id,\n selectedPassiveDevice?.equipments_id,\n pageNo,\n pageSize,\n bldgTimezone\n );\n }\n }, [selectedPassiveDevice, pageNo, pageSize, bldgTimezone]);\n\n return (\n \n
\n \n
\n\n \n \n {selectedPassiveDevice?.location}\n \n \n {selectedPassiveDevice?.identifier}\n \n
\n \n \n {`Raw Data`}\n \n
\n \n
\n \n {\n downloadRawDataForCSVExport(\n selectedPassiveDevice?.bldg_id,\n selectedPassiveDevice?.equipments_id,\n selectedPassiveDevice?.identifier,\n bldgTimezone,\n headerProps\n );\n }}\n />\n
\n \n
\n \n
\n \n
\n \n {row?.identifier === '' ? '-' : row?.identifier}\n
\n \n );\n };\n\n const renderModelType = (row) => {\n return (\n \n
\n \n \n Smart Meters \n
\n {isSuperAdmin || canUserCreate ? (\n \n
\n ) : null}\n \n
\n\n \n \n {localStorage.getItem('identifier')}\n \n
\n\n \n {sensorData.name} \n \n {sensorData.equipment}\n \n
\n \n {\n handleChartClose();\n handleRefresh();\n }}\n />\n
\n \n \n
\n\n \n {isSensorChartLoading ? (\n
\n \n
\n ) : (\n \n \n \n\n \n \n
\n \n \n \n Danger Zone\n \n
\n \n {isLoading ? (\n
\n \n Edit Sensor \n\n handleCustomValueChange(ctSensorsList)}>\n {!(ctSensorObj?.model === 'Custom') && (\n \n {`Set Custom Value`}\n \n )}\n
\n \n Sensor \n option?.value === ctSensorObj?._id)}\n onChange={(e) => handleChange('_id', e.value, ctSensorsList)}\n isSearchable={true}\n />\n )}\n
\n\n {ctSensorObj?.model === 'Custom' ? (\n \n \n {`Amp Rating`}\n {ctSensorObj?.model === 'Custom' && (\n \n *\n \n )}\n \n\n {\n if (e.target.value < 0) return;\n handleChange('rated_amps', e.target.value);\n }}\n labelsize={Typography.Sizes.md}\n value={ctSensorObj?.rated_amps}\n disabled={!(ctSensorObj?.model === 'Custom')}\n error={errorObj?.rated_amps}\n inputClassName={'custom-input-field'}\n />\n )}\n
\n\n \n
\n\n \n \n {`Multiplier`}\n {ctSensorObj?.model === 'Custom' && (\n \n *\n \n )}\n \n\n {\n if (e.target.value < 0) return;\n handleChange('amp_multiplier', e.target.value);\n }}\n labelsize={Typography.Sizes.md}\n value={ctSensorObj?.amp_multiplier}\n disabled={!(ctSensorObj?.model === 'Custom')}\n error={errorObj?.amp_multiplier}\n inputClassName={'custom-input-field'}\n />\n )}\n
\n \n {\n closeModal();\n setErrorObj(null);\n setCTSensorObj(null);\n setOriginalCTSensorObj(null);\n }}\n />\n\n saveSensorData(currentSensorObj?.id, ctSensorObj)}\n />\n
\n\n \n \n \n {record?.equipment_id === ''\n ? `${record?.breaker_link}`\n : `${record?.breaker_link}, `}\n \n )}\n\n {record?.equipment_id !== '' && record?.breaker_id !== '' && (\n \n {record?.equipment}\n \n )}\n
\n \n \n {record?.index}\n \n\n {isSensorNotConfigured ? (\n \n Not Attached\n \n ) : record?.breaker_rated_amps && record?.breaker_rated_amps !== 0 ? (\n
\n ) : (\n \n \n {`${record?.breaker_link}, `}\n \n {`${record?.breaker_rated_amps}A`}
\n \n \n {record?.rated_amps && `${record?.rated_amps}A`}\n \n handleChartShow(record?.id)}\n type={Button.Type.secondaryGrey}\n label=\"\"\n icon={
\n \n \n );\n })}\n \n );\n};\n\nexport default Sensors;\n","import React, { useState, useEffect } from 'react';\r\nimport { Row, Col } from 'reactstrap';\r\nimport DeviceChartModel from '../../../pages/chartModal/DeviceChartModel';\r\nimport { useParams, useHistory } from 'react-router-dom';\r\nimport moment from 'moment';\r\nimport { BuildingStore } from '../../../store/BuildingStore';\r\nimport { BreadcrumbStore } from '../../../store/BreadcrumbStore';\r\nimport { ComponentStore } from '../../../store/ComponentStore';\r\nimport { buildingData, userPermissionData } from '../../../store/globalState';\r\nimport Skeleton from 'react-loading-skeleton';\r\nimport AddSensorPanelModel from './AddSensorPanelModel';\r\nimport { DateRangeStore } from '../../../store/DateRangeStore';\r\nimport './style.css';\r\nimport { useAtom } from 'jotai';\r\nimport { handleAPIRequestBody } from '../../../helpers/helpers';\r\nimport DeleteDevice from './DeleteDevice';\r\nimport Brick from '../../../sharedComponents/brick';\r\nimport { ReactComponent as PenSVG } from '../../../assets/icon/panels/pen.svg';\r\nimport { ReactComponent as SearchSVG } from '../../../assets/icon/search.svg';\r\nimport './styles.scss';\r\nimport Typography from '../../../sharedComponents/typography';\r\nimport EditPassiveDevice from './EditPassiveDevice';\r\nimport {\r\n getLocationData,\r\n getPassiveDeviceSensors,\r\n getSensorGraphData,\r\n getSinglePassiveDevice,\r\n updatePassiveDevice,\r\n} from './services';\r\nimport { Button } from '../../../sharedComponents/button';\r\nimport Select from '../../../sharedComponents/form/select';\r\nimport { UserStore } from '../../../store/UserStore';\r\nimport '../active-devices/styles.scss';\r\nimport '../../../sharedComponents/breaker/Breaker.scss';\r\nimport { updateBuildingStore } from '../../../helpers/updateBuildingStore';\r\nimport Sensors from './Sensors';\r\nimport colorPalette from '../../../assets/scss/_colors.module.scss';\r\nimport { defaultDropdownSearch } from '../../../sharedComponents/form/select/helpers';\r\n\r\nconst IndividualPassiveDevice = () => {\r\n const [userPermission] = useAtom(userPermissionData);\r\n const isUserAdmin = userPermission?.is_admin ?? false;\r\n const isSuperUser = userPermission?.is_superuser ?? false;\r\n const isSuperAdmin = isUserAdmin || isSuperUser;\r\n const canUserEdit = userPermission?.permissions?.permissions?.advanced_passive_device_permission?.edit ?? false;\r\n const canUserDelete = userPermission?.permissions?.permissions?.advanced_passive_device_permission?.delete ?? false;\r\n\r\n const startDate = DateRangeStore.useState((s) => s.startDate);\r\n const endDate = DateRangeStore.useState((s) => s.endDate);\r\n const startTime = DateRangeStore.useState((s) => s.startTime);\r\n const endTime = DateRangeStore.useState((s) => s.endTime);\r\n const daysCount = DateRangeStore.useState((s) => +s.daysCount);\r\n\r\n let history = useHistory();\r\n\r\n const { deviceId } = useParams();\r\n const { bldgId } = useParams();\r\n const [buildingListData] = useAtom(buildingData);\r\n const [sensorId, setSensorId] = useState('');\r\n\r\n // Chart states\r\n const [showChart, setShowChart] = useState(false);\r\n const handleChartClose = () => setShowChart(false);\r\n\r\n // Select Breaker states\r\n const [showBreaker, setShowBreaker] = useState(false);\r\n const handleBreakerClose = () => setShowBreaker(false);\r\n const handleBreakerShow = () => setShowBreaker(true);\r\n\r\n // Delete Smart Meter Modal\r\n const [showDeleteModal, setShowDelete] = useState(false);\r\n const closeDeleteAlert = () => setShowDelete(false);\r\n const showDeleteAlert = () => setShowDelete(true);\r\n\r\n // Edit Device Modal states\r\n const [isEditDeviceModalOpen, setEditDeviceDeviceModal] = useState(false);\r\n const closeEditDeviceModal = () => setEditDeviceDeviceModal(false);\r\n const openEditDeviceModal = () => setEditDeviceDeviceModal(true);\r\n\r\n const [passiveData, setPassiveData] = useState({});\r\n const [locationData, setLocationData] = useState([]);\r\n const [selectedPassiveDevice, setSelectedPassiveDevice] = useState({});\r\n\r\n const timeZone = BuildingStore.useState((s) => s.BldgTimeZone);\r\n const [sensorObj, setSensorObj] = useState({});\r\n const [currentSensorObj, setCurrentSensorObj] = useState(null);\r\n const [editSenorModelRefresh, setEditSenorModelRefresh] = useState(false);\r\n const [breakerId, setBreakerId] = useState('');\r\n const [sensors, setSensors] = useState([]);\r\n const [sensorData, setSensorData] = useState([]);\r\n\r\n const [isLocationFetched, setIsLocationFetched] = useState(true);\r\n const [activeLocationId, setActiveLocationId] = useState('');\r\n const [sensorAPIRefresh, setSensorAPIRefresh] = useState(false);\r\n const [isProcessing, setIsProcessing] = useState(false);\r\n const [isFetchingSensorData, setIsFetchingSensorData] = useState(true);\r\n const [locationError, setLocationError] = useState(null);\r\n\r\n const [seriesData, setSeriesData] = useState([]);\r\n const [deviceData, setDeviceData] = useState([]);\r\n\r\n const [isSensorChartLoading, setIsSensorChartLoading] = useState(true);\r\n const CONVERSION_ALLOWED_UNITS = ['power'];\r\n\r\n const UNIT_DIVIDER = 1000;\r\n\r\n const [metric, setMetric] = useState([\r\n { value: 'minCurrentMilliAmps', label: 'Minimum Current (mA)', unit: 'mA', Consumption: 'Minimum Current' },\r\n { value: 'maxCurrentMilliAmps', label: 'Maximum Current (mA)', unit: 'mA', Consumption: 'Maximum Current' },\r\n { value: 'rmsCurrentMilliAmps', label: 'RMS Current (mA)', unit: 'mA', Consumption: 'RMS Current' },\r\n { value: 'power', label: 'Power (W)', unit: 'W', Consumption: 'Power' },\r\n ]);\r\n\r\n const [selectedConsumption, setConsumption] = useState(metric[2].value);\r\n const [selectedUnit, setSelectedUnit] = useState(metric[2].unit);\r\n const [searchSensor, setSearchSensor] = useState('');\r\n const [selectedConsumptionLabel, setSelectedConsumptionLabel] = useState(metric[2].Consumption);\r\n\r\n const handleSearchChange = (e) => {\r\n setSearchSensor(e.target.value);\r\n };\r\n\r\n const filtered = !searchSensor\r\n ? sensors\r\n : sensors.filter((sensor) => {\r\n return (\r\n sensor.name.toLowerCase().includes(searchSensor.toLowerCase()) ||\r\n sensor.breaker_link.toLowerCase().includes(searchSensor.toLowerCase()) ||\r\n sensor.equipment.toLowerCase().includes(searchSensor.toLowerCase())\r\n );\r\n });\r\n\r\n const handleChartShow = (id) => {\r\n setSensorId(id);\r\n let obj = sensors.find((o) => o.id === id);\r\n setSensorData(obj);\r\n fetchSensorGraphData(id);\r\n setShowChart(true);\r\n };\r\n\r\n const getRequiredConsumptionLabel = (value) => {\r\n let label = '';\r\n\r\n metric.map((m) => {\r\n if (m.value === value) {\r\n label = m.label;\r\n }\r\n\r\n return m;\r\n });\r\n\r\n return label;\r\n };\r\n\r\n const fetchSensorGraphData = async (id) => {\r\n setIsSensorChartLoading(true);\r\n\r\n let params = `?sensor_id=${id === sensorId ? sensorId : id\r\n }&consumption=rmsCurrentMilliAmps&building_id=${bldgId}`;\r\n\r\n const payload = handleAPIRequestBody(startDate, endDate, timeZone, startTime, endTime);\r\n\r\n await getSensorGraphData(params, payload)\r\n .then((res) => {\r\n setDeviceData([]);\r\n setSeriesData([]);\r\n let response = res.data;\r\n let data = response;\r\n let exploreData = [];\r\n let NulledData = [];\r\n data.map((ele) => {\r\n if (ele?.consumption === '') {\r\n NulledData.push({ x: moment.utc(new Date(ele?.time_stamp)), y: null });\r\n } else {\r\n if (CONVERSION_ALLOWED_UNITS?.indexOf(selectedConsumption) > -1) {\r\n NulledData.push({\r\n x: moment.utc(new Date(ele?.time_stamp)),\r\n y: ele?.consumption / UNIT_DIVIDER,\r\n });\r\n } else {\r\n NulledData.push({ x: new Date(ele?.time_stamp).getTime(), y: ele?.consumption });\r\n }\r\n }\r\n });\r\n let recordToInsert = {\r\n data: NulledData,\r\n name: getRequiredConsumptionLabel(selectedConsumption),\r\n };\r\n setDeviceData([recordToInsert]);\r\n setIsSensorChartLoading(false);\r\n })\r\n .catch(() => {\r\n setIsSensorChartLoading(false);\r\n });\r\n };\r\n\r\n const updatePassiveDeviceData = async () => {\r\n if (activeLocationId === passiveData?.location_id) {\r\n setLocationError({\r\n text: 'Please update Location.',\r\n });\r\n return;\r\n }\r\n if (!passiveData?.equipments_id) return;\r\n setIsProcessing(true);\r\n const params = `?device_id=${passiveData?.equipments_id}`;\r\n const payload = {\r\n location_id: activeLocationId,\r\n };\r\n\r\n await updatePassiveDevice(params, payload)\r\n .then((res) => {\r\n const response = res?.data;\r\n setSensorAPIRefresh(!sensorAPIRefresh);\r\n setIsProcessing(false);\r\n fetchPassiveDevice();\r\n if (response?.success) {\r\n UserStore.update((s) => {\r\n s.showNotification = true;\r\n s.notificationMessage = 'Device updated Successfully.';\r\n s.notificationType = 'success';\r\n });\r\n } else {\r\n UserStore.update((s) => {\r\n s.showNotification = true;\r\n s.notificationMessage = response?.message\r\n ? response?.message\r\n : res\r\n ? 'Unable to update Smart Meter.'\r\n : 'Unable to update Smart Meter due to Internal Server Error!.';\r\n s.notificationType = 'error';\r\n });\r\n }\r\n setLocationError(null);\r\n })\r\n .catch(() => {\r\n setIsProcessing(false);\r\n setLocationError(null);\r\n });\r\n };\r\n\r\n const redirectToPassivePage = () => {\r\n history.push({ pathname: `/settings/smart-meters/${bldgId}` });\r\n };\r\n\r\n const fetchPassiveDevice = async () => {\r\n let params = `?device_id=${deviceId}&page_size=100&page_no=1&building_id=${bldgId}`;\r\n await getSinglePassiveDevice(params)\r\n .then((res) => {\r\n let response = res?.data?.data[0];\r\n setPassiveData(response);\r\n setActiveLocationId(response?.location_id);\r\n localStorage.setItem('identifier', response.identifier);\r\n })\r\n .catch(() => { });\r\n };\r\n\r\n const fetchPassiveDeviceSensorData = async () => {\r\n setIsFetchingSensorData(true);\r\n const params = `?device_id=${deviceId}`;\r\n await getPassiveDeviceSensors(params)\r\n .then((res) => {\r\n const response = res?.data;\r\n setSensors(response);\r\n setIsFetchingSensorData(false);\r\n })\r\n .catch(() => {\r\n setIsFetchingSensorData(false);\r\n });\r\n };\r\n\r\n const fetchLocationData = async () => {\r\n setIsLocationFetched(true);\r\n await getLocationData(`/${bldgId}`)\r\n .then((res) => {\r\n let response = res?.data;\r\n response.sort((a, b) => {\r\n return a.location_name.localeCompare(b.location_name);\r\n });\r\n let locationList = [];\r\n response.forEach((el) => {\r\n let obj = {\r\n label: el?.location_name,\r\n value: el?.location_id,\r\n };\r\n locationList.push(obj);\r\n });\r\n setLocationData(locationList);\r\n setIsLocationFetched(false);\r\n })\r\n .catch(() => {\r\n setIsLocationFetched(false);\r\n });\r\n };\r\n\r\n const updateBreadcrumbStore = () => {\r\n BreadcrumbStore.update((bs) => {\r\n let newList = [\r\n {\r\n label: 'Smart Meters',\r\n path: `/settings/smart-meters/${bldgId}`,\r\n active: false,\r\n },\r\n ];\r\n bs.items = newList;\r\n });\r\n ComponentStore.update((s) => {\r\n s.parent = 'building-settings';\r\n });\r\n };\r\n\r\n useEffect(() => {\r\n fetchPassiveDevice();\r\n fetchPassiveDeviceSensorData();\r\n fetchLocationData();\r\n }, [deviceId]);\r\n\r\n useEffect(() => {\r\n BreadcrumbStore.update((bs) => {\r\n let newList = [\r\n {\r\n label: 'Smart Meters',\r\n path: `/settings/smart-meters/${bldgId}`,\r\n active: false,\r\n },\r\n {\r\n label: passiveData?.identifier,\r\n path: '/settings/smart-meters/single',\r\n active: true,\r\n },\r\n ];\r\n bs.items = newList;\r\n });\r\n if (passiveData) setSelectedPassiveDevice(passiveData);\r\n }, [passiveData]);\r\n\r\n useEffect(() => {\r\n if (bldgId && buildingListData.length !== 0) {\r\n const bldgObj = buildingListData.find((el) => el?.building_id === bldgId);\r\n if (bldgObj?.building_id)\r\n updateBuildingStore(\r\n bldgObj?.building_id,\r\n bldgObj?.building_name,\r\n bldgObj?.timezone,\r\n bldgObj?.plug_only\r\n );\r\n }\r\n }, [buildingListData, bldgId]);\r\n\r\n useEffect(() => {\r\n window.scrollTo(0, 0);\r\n updateBreadcrumbStore();\r\n }, []);\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n \r\n Smart Meter\r\n \r\n \r\n Configure\r\n \r\n
\r\n \r\n \r\n {passiveData?.identifier}\r\n \r\n \r\n {`${sensors.length} Sensors`}\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {isSuperAdmin || canUserEdit ? (\r\n
\r\n \r\n Installed Location \r\n option.value === activeLocationId)}\r\n onChange={(e) => {\r\n setActiveLocationId(e.value);\r\n setLocationError(null);\r\n }}\r\n isSearchable={true}\r\n customSearchCallback={({ data, query }) => defaultDropdownSearch(data, query?.value)}\r\n disabled={!(isSuperAdmin || canUserEdit)}\r\n error={locationError}\r\n />\r\n )}\r\n \r\n Location this device is installed.\r\n \r\n )}\r\n
\r\n\r\n \r\n \r\n Edit \r\n
\r\n ) : null}\r\n \r\n \r\n\r\n \r\n
\r\n\r\n \r\n Identifier \r\n \r\n {passiveData?.identifier}\r\n \r\n
\r\n \r\n Firmware Version \r\n v1.2 \r\n
\r\n \r\n
\r\n\r\n {isSuperAdmin || canUserEdit ? (\r\n \r\n Device Model \r\n \r\n {passiveData?.model &&\r\n passiveData?.model.charAt(0).toUpperCase() + passiveData?.model.slice(1)}\r\n \r\n
\r\n \r\n Device Version \r\n v2 \r\n
\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n ) : (\r\n \r\n
\r\n )}\r\n\r\n \n Edit Socket \n\n
\n \n Equipment Type \n option.value === socketObj?.equipment_type_id\n )}\n onChange={(e) => {\n handleChange('equipment_type_id', e.value, e.label);\n }}\n isSearchable={true}\n customSearchCallback={({ data, query }) => defaultDropdownSearch(data, query?.value)}\n />\n )}\n
\n\n \n Equipment Name \n {\n handleChange('equipment', e.target.value);\n }}\n />\n
\n\n \n Tags \n {\n handleChange('equipment_tags', value);\n }}\n />\n \n Note: Press the Enter key to insert each tag.\n \n
\n\n \n {\n handleOnSocketUpdate(socketObj, selectedSocketObj);\n }}\n disabled={isProcessing || compareObjData(socketObj, selectedSocketObj)}\n />\n
\n\n \r\n {socketStatus === null ? (\r\n {\r\n if (isStatusCanBeChecked) {\r\n fetchSmartPlugSensorStatus(bldgId, socketSensorsWithStatus, index, record?.id);\r\n }\r\n }}\r\n />\r\n ) : (\r\n <>\r\n {isFetchingSocketById === index ? (\r\n {\r\n if (!isFetchingSocketById) {\r\n handleSmartPlugSocketSwitch(\r\n bldgId,\r\n record?.id,\r\n !isSocketOn,\r\n index,\r\n canUserToggleOnOffDevice\r\n );\r\n }\r\n }}\r\n />\r\n ) : (\r\n <>\r\n \r\n
\r\n );\r\n };\r\n\r\n // Define a function to split an array into chunks of a given size\r\n function splitArrayIntoChunks(arr, chunkSize) {\r\n const chunkedArray = [];\r\n for (let i = 0; i < arr.length; i += chunkSize) {\r\n chunkedArray.push(arr.slice(i, i + chunkSize));\r\n }\r\n return chunkedArray;\r\n }\r\n\r\n const isStatusCanBeChecked =\r\n socketSensorsWithStatus.length !== 0 && !isFetchingAllSocketStatus && !isFetchingSocketById;\r\n\r\n return (\r\n <>\r\n Device is offline
\r\n \r\n\r\n \r\n
\r\n \r\n {isFetchingDeviceStatus ? (\r\n \r\n \r\n {deviceStatus ? `Online` : `Offline`}\r\n \r\n
\r\n )}\r\n\r\n \r\n {isFetchingSensors ? (\r\n \r\n
\r\n ) : (\r\n <>\r\n {splitArrayIntoChunks(socketSensorsWithStatus, 6).map((chunk, index) => (\r\n {renderSocket(socket, innerIndex, isStatusCanBeChecked)}
\r\n ))}\r\n \r\n ))}\r\n \r\n )}\r\n \r\n \r\n );\r\n};\r\n\r\nconst IndividualActiveDevice = () => {\r\n const history = useHistory();\r\n const [userPermission] = useAtom(userPermissionData);\r\n\r\n const isUserAdmin = userPermission?.is_admin ?? false;\r\n const isSuperUser = userPermission?.is_superuser ?? false;\r\n const isSuperAdmin = isUserAdmin || isSuperUser;\r\n const canUserEdit = userPermission?.permissions?.permissions?.advanced_active_device_permission?.edit ?? false;\r\n\r\n const startDate = DateRangeStore.useState((s) => s.startDate);\r\n const endDate = DateRangeStore.useState((s) => s.endDate);\r\n const startTime = DateRangeStore.useState((s) => s.startTime);\r\n const endTime = DateRangeStore.useState((s) => s.endTime);\r\n const daysCount = DateRangeStore.useState((s) => +s.daysCount);\r\n\r\n // Chart states\r\n const [showChart, setShowChart] = useState(false);\r\n const handleChartClose = () => setShowChart(false);\r\n\r\n const { deviceId } = useParams();\r\n const [sensorId, setSensorId] = useState('');\r\n\r\n const { bldgId } = useParams();\r\n const [buildingListData] = useAtom(buildingData);\r\n const timeZone = BuildingStore.useState((s) => s.BldgTimeZone);\r\n const [locationData, setLocationData] = useState([]);\r\n const [locationError, setLocationError] = useState(null);\r\n const [isLocationFetched, setIsLocationFetched] = useState(true);\r\n\r\n const [activeData, setActiveData] = useState({});\r\n const [isFetchingSmartPlugData, setFetchingSmartPlugData] = useState(false);\r\n const [activeLocationId, setActiveLocationId] = useState('');\r\n\r\n const [socketSensorsList, setSocketSensorsList] = useState([]);\r\n const [isFetchingSensors, setFetchingSensorsList] = useState(false);\r\n\r\n const [socketStatusList, setSocketStatusList] = useState([]);\r\n const [isFetchingSocketById, setFetchingSocketById] = useState(null); // Fetch by Socket ID\r\n const [isFetchingAllSocketStatus, setFetchingAllSocketStatus] = useState(false);\r\n\r\n const socketSensorsWithStatus = socketSensorsList.map((el) => {\r\n const socketStatusObj = socketStatusList.find((obj) => obj?.socket_id === el?.socket_id);\r\n return {\r\n ...el,\r\n socket_status: socketStatusObj?.socket_status ?? null,\r\n is_on: socketStatusObj?.is_on ?? false,\r\n };\r\n });\r\n\r\n const [deviceStatus, setDeviceStatus] = useState(false);\r\n const [isFetchingDeviceStatus, setFetchingDeviceStatus] = useState(false);\r\n\r\n const [isSensorChartLoading, setIsSensorChartLoading] = useState(true);\r\n const [sensorData, setSensorData] = useState({});\r\n const [isProcessing, setIsProcessing] = useState(false);\r\n const [searchSocket, setSearchSocket] = useState('');\r\n\r\n // Equipment states\r\n const [isSocketModalOpen, setSocketModalState] = useState(false);\r\n const closeSocketModal = () => setSocketModalState(false);\r\n const openSocketModal = () => setSocketModalState(true);\r\n\r\n const [selectedSocketObj, setSelectedSocketObj] = useState({});\r\n\r\n const handleSocketChange = (e) => {\r\n setSearchSocket(e.target.value);\r\n };\r\n\r\n const filtered = !searchSocket\r\n ? socketSensorsWithStatus\r\n : socketSensorsWithStatus.filter((sensor) => {\r\n return (\r\n sensor.equipment_type_name.toLowerCase().includes(searchSocket.toLowerCase()) ||\r\n sensor.equipment.toLowerCase().includes(searchSocket.toLowerCase())\r\n );\r\n });\r\n\r\n const [seriesData, setSeriesData] = useState([]);\r\n const [deviceData, setDeviceData] = useState([]);\r\n\r\n const CONVERSION_ALLOWED_UNITS = ['power'];\r\n\r\n const UNIT_DIVIDER = 1000;\r\n\r\n const [metric, setMetric] = useState([\r\n { value: 'energy', label: 'Energy Consumed (Wh)', unit: 'Wh', Consumption: 'Energy Consumption' },\r\n {\r\n value: 'totalconsumedenergy',\r\n label: 'Total Consumed Energy (Wh)',\r\n unit: 'Wh',\r\n Consumption: 'Total Consumed Energy',\r\n },\r\n { value: 'mV', label: 'Voltage (mV)', unit: 'mV', Consumption: 'Voltage' },\r\n { value: 'mAh', label: 'Current (mA)', unit: 'mA', Consumption: 'Current' },\r\n { value: 'power', label: 'Real Power (W)', unit: 'W', Consumption: 'Real Power' },\r\n ]);\r\n\r\n const [selectedConsumption, setConsumption] = useState(metric[0].value);\r\n const [selectedUnit, setSelectedUnit] = useState(metric[0].unit);\r\n const [selectedConsumptionLabel, setSelectedConsumptionLabel] = useState(metric[0].Consumption);\r\n\r\n const getRequiredConsumptionLabel = (value) => {\r\n let label = '';\r\n\r\n metric.map((m) => {\r\n if (m.value === value) {\r\n label = m.label;\r\n }\r\n\r\n return m;\r\n });\r\n\r\n return label;\r\n };\r\n\r\n const handleChartShow = (id) => {\r\n setSensorId(id);\r\n let obj = socketSensorsWithStatus.find((o) => o.id === id);\r\n setSensorData(obj);\r\n fetchSensorChartData(id);\r\n setShowChart(true);\r\n };\r\n\r\n const fetchLocationData = async () => {\r\n setIsLocationFetched(true);\r\n await getLocationData(`/${bldgId}`)\r\n .then((res) => {\r\n let response = res?.data;\r\n response.sort((a, b) => {\r\n return a.location_name.localeCompare(b.location_name);\r\n });\r\n let locationList = [];\r\n response.forEach((el) => {\r\n let obj = {\r\n label: el?.location_name,\r\n value: el?.location_id,\r\n };\r\n locationList.push(obj);\r\n });\r\n setLocationData(locationList);\r\n setIsLocationFetched(false);\r\n })\r\n .catch(() => {\r\n setIsLocationFetched(false);\r\n });\r\n };\r\n\r\n const fetchSmartPlugDeviceData = async () => {\r\n setFetchingSmartPlugData(true);\r\n\r\n const params = `?device_id=${deviceId}&page_size=100&page_no=1&building_id=${bldgId}`;\r\n\r\n await getSingleActiveDevice(params)\r\n .then((res) => {\r\n const { data = [] } = res?.data;\r\n if (data[0]) {\r\n const deviceObj = data[0];\r\n setActiveData(deviceObj ?? {});\r\n if (deviceObj.location_id) setActiveLocationId(deviceObj?.location_id);\r\n localStorage.setItem('identifier', deviceObj?.identifier);\r\n }\r\n })\r\n .catch(() => { })\r\n .finally(() => {\r\n setFetchingSmartPlugData(false);\r\n });\r\n };\r\n\r\n const fetchSmartPlugDeviceStatus = async (bldg_id, device_id) => {\r\n if (!bldg_id || !device_id) return;\r\n\r\n setFetchingDeviceStatus(true);\r\n setDeviceStatus(false);\r\n\r\n const params = `?building_id=${bldg_id}&device_ids=${device_id}`;\r\n\r\n await fetchDeviceStatus(params)\r\n .then((res) => {\r\n const { success = false, data = [] } = res?.data;\r\n if (success && data[0]) setDeviceStatus(data[0]?.is_on ?? false);\r\n })\r\n .catch(() => { })\r\n .finally(() => {\r\n setFetchingDeviceStatus(false);\r\n });\r\n };\r\n\r\n const fetchSmartPlugSensorStatus = async (bldg_id, sensors_list = [], socketID = 'all', sensorId) => {\r\n if (!bldg_id) return;\r\n if (socketID !== 'all' && !sensorId) return;\r\n if (socketID === 'all' && sensors_list.length === 0) return;\r\n\r\n if (socketID === 'all') {\r\n setFetchingAllSocketStatus(true);\r\n setSocketStatusList([]);\r\n } else {\r\n setFetchingSocketById(socketID);\r\n }\r\n\r\n const sensorIds = encodeURIComponent(sensors_list.map(({ id }) => id).join('+'));\r\n const params = `?building_id=${bldg_id}&sensor_ids=${socketID === 'all' ? sensorIds : sensorId}`;\r\n\r\n await fetchSocketRelayStatus(params)\r\n .then((res) => {\r\n const { success = false, data = [] } = res?.data;\r\n\r\n if (success && data.length !== 0) {\r\n if (socketID === 'all') {\r\n setSocketStatusList(data);\r\n\r\n UserStore.update((s) => {\r\n s.showNotification = true;\r\n s.notificationMessage = 'Socket status fetched successfully.';\r\n s.notificationType = 'success';\r\n });\r\n } else {\r\n if (socketStatusList.length === 0) {\r\n setSocketStatusList(data);\r\n } else {\r\n let clonedList = _.cloneDeep(socketStatusList);\r\n let socketStatusModified = false;\r\n\r\n // Check if any element in 'data' matches an element in 'clonedList'\r\n data.forEach((socket) => {\r\n const existingSocket = clonedList.find((el) => el?.socket_id === socket?.socket_id);\r\n if (existingSocket) {\r\n socketStatusModified = true;\r\n existingSocket.socket_status = socket.socket_status ?? false;\r\n }\r\n });\r\n\r\n // If no match found, add the first element of 'data' to 'clonedList'\r\n if (!socketStatusModified && data.length > 0) {\r\n clonedList.push(data[0]);\r\n }\r\n\r\n setSocketStatusList(clonedList);\r\n }\r\n }\r\n } else {\r\n UserStore.update((s) => {\r\n s.showNotification = true;\r\n s.notificationMessage = 'Unable to fetch Socket status.';\r\n s.notificationType = 'error';\r\n });\r\n setSocketStatusList([]);\r\n }\r\n })\r\n .catch(() => {\r\n UserStore.update((s) => {\r\n s.showNotification = true;\r\n s.notificationMessage = 'Failed to fetch Socket status due to Internal Server Error';\r\n s.notificationType = 'error';\r\n });\r\n setSocketStatusList([]);\r\n })\r\n .finally(() => {\r\n if (socketID === 'all') {\r\n setFetchingAllSocketStatus(false);\r\n } else {\r\n setFetchingSocketById(null);\r\n }\r\n });\r\n };\r\n\r\n const handleSmartPlugSocketSwitch = async (\r\n bldg_id,\r\n sensorId,\r\n toggleOn = false,\r\n index,\r\n canUserToggleOnOffDevice\r\n ) => {\r\n if (!bldg_id || !sensorId) return;\r\n\r\n if (!canUserToggleOnOffDevice) {\r\n UserStore.update((s) => {\r\n s.showNotification = true;\r\n s.notificationMessage = `You don't have permission to turn the socket on or off.`;\r\n s.notificationType = 'error';\r\n });\r\n return;\r\n }\r\n\r\n setFetchingSocketById(index);\r\n\r\n const params = `?building_id=${bldg_id}&toggle=${toggleOn ? 'on' : 'off'}`;\r\n const payload = {\r\n sensor_ids: [sensorId],\r\n };\r\n\r\n await toggleSmartPlugSocket(params, payload)\r\n .then((res) => {\r\n const { success = false, data = [], message } = res?.data;\r\n if (success) {\r\n fetchSmartPlugSensorStatus(bldg_id, [], index, sensorId);\r\n UserStore.update((s) => {\r\n s.showNotification = true;\r\n s.notificationMessage = 'Socket Toggle On / Off successfully.';\r\n s.notificationType = 'success';\r\n });\r\n } else {\r\n UserStore.update((s) => {\r\n s.showNotification = true;\r\n s.notificationMessage = 'Failed to On / Off Socket status.';\r\n s.notificationType = 'error';\r\n });\r\n }\r\n })\r\n .catch(() => {\r\n UserStore.update((s) => {\r\n s.showNotification = true;\r\n s.notificationMessage = 'Failed to On / Off Socket status due to Internal Server Error.';\r\n s.notificationType = 'error';\r\n });\r\n })\r\n .finally(() => { });\r\n };\r\n\r\n const updateBreadcrumbStore = () => {\r\n BreadcrumbStore.update((bs) => {\r\n let newList = [\r\n {\r\n label: 'Smart Plugs',\r\n path: `/settings/smart-plugs/${bldgId}`,\r\n active: false,\r\n },\r\n ];\r\n bs.items = newList;\r\n });\r\n ComponentStore.update((s) => {\r\n s.parent = 'building-settings';\r\n });\r\n };\r\n\r\n const fetchSmartPlugSocketsList = async () => {\r\n setFetchingSensorsList(true);\r\n setSocketSensorsList([]);\r\n\r\n const params = `?device_id=${deviceId}`;\r\n\r\n await getActiveDeviceSensors(params)\r\n .then(({ data = [] }) => {\r\n setSocketSensorsList(data);\r\n })\r\n .catch(() => { })\r\n .finally(() => {\r\n setFetchingSensorsList(false);\r\n });\r\n };\r\n\r\n const fetchSensorChartData = async (id) => {\r\n setIsSensorChartLoading(true);\r\n const params = `?sensor_id=${id === sensorId ? sensorId : id}&consumption=energy&building_id=${bldgId}`;\r\n await getSensorData(params, handleAPIRequestBody(startDate, endDate, timeZone, startTime, endTime))\r\n .then((res) => {\r\n setDeviceData([]);\r\n setSeriesData([]);\r\n let response = res.data;\r\n\r\n let data = response;\r\n\r\n let exploreData = [];\r\n\r\n let NulledData = [];\r\n data.map((ele) => {\r\n if (ele?.consumption === '') {\r\n NulledData.push({ x: new Date(ele?.time_stamp).getTime(), y: null });\r\n } else {\r\n if (CONVERSION_ALLOWED_UNITS?.indexOf(selectedConsumption) > -1) {\r\n NulledData.push({\r\n x: new Date(ele.time_stamp).getTime(),\r\n y: ele.consumption / UNIT_DIVIDER,\r\n });\r\n } else {\r\n NulledData.push({ x: new Date(ele.time_stamp).getTime(), y: ele.consumption });\r\n }\r\n }\r\n });\r\n let recordToInsert = {\r\n data: NulledData,\r\n name: getRequiredConsumptionLabel(selectedConsumption),\r\n };\r\n setDeviceData([recordToInsert]);\r\n setIsSensorChartLoading(false);\r\n })\r\n .catch(() => {\r\n setIsSensorChartLoading(false);\r\n });\r\n };\r\n\r\n const redirectToActivePage = () => {\r\n history.push({ pathname: `/settings/smart-plugs/${bldgId}` });\r\n };\r\n\r\n const updateActiveDevice = async () => {\r\n if (activeLocationId === activeData?.location_id) {\r\n setLocationError({\r\n text: 'Please update Location.',\r\n });\r\n return;\r\n }\r\n\r\n if (!activeData?.equipments_id) return;\r\n setIsProcessing(true);\r\n const params = `?device_id=${activeData?.equipments_id}`;\r\n const payload = { location_id: activeLocationId };\r\n await updateActiveDeviceService(params, payload)\r\n .then((res) => {\r\n const response = res?.data;\r\n if (response?.success) {\r\n UserStore.update((s) => {\r\n s.showNotification = true;\r\n s.notificationMessage = response?.message;\r\n s.notificationType = 'success';\r\n });\r\n } else {\r\n UserStore.update((s) => {\r\n s.showNotification = true;\r\n s.notificationMessage = response?.message\r\n ? response?.message\r\n : res\r\n ? 'Unable to update Smart Plug.'\r\n : 'Unable to update Smart Plug due to Internal Server Error!.';\r\n s.notificationType = 'error';\r\n });\r\n }\r\n setIsProcessing(false);\r\n setLocationError(null);\r\n fetchSmartPlugDeviceData();\r\n })\r\n .catch(() => {\r\n setIsProcessing(false);\r\n setLocationError(null);\r\n });\r\n };\r\n\r\n useEffect(() => {\r\n if (!isSocketModalOpen) setSelectedSocketObj({});\r\n }, [isSocketModalOpen]);\r\n\r\n useEffect(() => {\r\n fetchSmartPlugDeviceData(); // Fetch selected device configuration\r\n fetchSmartPlugSocketsList(); // Fetch selected device sockets list\r\n fetchSmartPlugDeviceStatus(bldgId, deviceId); // Fetch selected device status\r\n fetchLocationData();\r\n }, [bldgId, deviceId]);\r\n\r\n useEffect(() => {\r\n if (!showChart) setConsumption('energy');\r\n }, [showChart]);\r\n\r\n useEffect(() => {\r\n BreadcrumbStore.update((bs) => {\r\n let newList = [\r\n {\r\n label: 'Smart Plugs',\r\n path: `/settings/smart-plugs/${bldgId}`,\r\n active: false,\r\n },\r\n {\r\n label: activeData?.identifier,\r\n path: '/settings/smart-plugs/single',\r\n active: true,\r\n },\r\n ];\r\n bs.items = newList;\r\n });\r\n }, [activeData]);\r\n\r\n useEffect(() => {\r\n if (bldgId && buildingListData.length !== 0) {\r\n const bldgObj = buildingListData.find((el) => el?.building_id === bldgId);\r\n if (bldgObj?.building_id)\r\n updateBuildingStore(\r\n bldgObj?.building_id,\r\n bldgObj?.building_name,\r\n bldgObj?.timezone,\r\n bldgObj?.plug_only\r\n );\r\n }\r\n }, [buildingListData, bldgId]);\r\n\r\n useEffect(() => {\r\n window.scrollTo(0, 0);\r\n updateBreadcrumbStore();\r\n }, []);\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n \r\n Smart Plug\r\n \r\n
\r\n \r\n \r\n {activeData?.model === 'KP115' && 'Smart Mini Plug'}\r\n {activeData?.model === 'HS300' && 'Power Strip'}\r\n \r\n \r\n {activeData?.identifier}\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {isSuperAdmin || canUserEdit ? (\r\n
\r\n \r\n Installed Location \r\n option.value === activeLocationId)}\r\n onChange={(e) => {\r\n setActiveLocationId(e.value);\r\n setLocationError(null);\r\n }}\r\n isSearchable={true}\r\n customSearchCallback={({ data, query }) => defaultDropdownSearch(data, query?.value)}\r\n disabled={!(isSuperAdmin || canUserEdit)}\r\n error={locationError}\r\n />\r\n )}\r\n \r\n Location this device is installed.\r\n \r\n )}\r\n
\r\n\r\n \r\n {isFetchingSmartPlugData ? (\r\n \r\n
\r\n ) : (\r\n \r\n
\r\n )}\r\n \r\n\r\n \r\n
\r\n\r\n \r\n \r\n Identifier\r\n \r\n \r\n {activeData?.identifier}\r\n \r\n
\r\n\r\n \r\n \r\n Firmware Version\r\n \r\n v1.2 \r\n
\r\n \r\n
\r\n \r\n \r\n Device Model\r\n \r\n \r\n {activeData?.model}\r\n \r\n
\r\n\r\n \r\n \r\n Device Version\r\n \r\n v2 \r\n
\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n ) : (\r\n <>\r\n {filtered.map((record, index) => {\r\n return (\r\n <>\r\n \r\n \r\n {index + 1}\r\n \r\n \r\n {record?.equipment_type_name}\r\n \r\n {record?.equipment_id && (\r\n
\r\n \r\n handleChartShow(record?.id)}\r\n type={Button.Type.secondaryGrey}\r\n label=\"\"\r\n icon={ {\r\n setSelectedSocketObj(record);\r\n openSocketModal();\r\n }}\r\n type={Button.Type.secondaryGrey}\r\n label=\"\"\r\n icon={
\r\n \r\n \r\n );\r\n })}\r\n \r\n )}\r\n \r\n \n
\n \n \n General Account Settings \n
\n {userPermission?.user_role === 'admin' ||\n userPermission?.permissions?.permissions?.account_general_permission?.edit ? (\n \n
\n ) : (\n ''\n )}\n \n {\n setVendorData(localStorage.getItem('vendorName'));\n setInputValidation(false);\n }}\n disabled={!inputValidation}\n />\n {\n updateVendorNames();\n }}\n className=\"ml-2\"\n disabled={!inputValidation}\n />\n
\n \n \n \n\n \n \n
\n \n \n \n Account Details\n \n
\n \n
\n \n Account Name \n \n A human-friendly display name for this account\n \n
\n \n {\n setVendorData(e.target.value);\n setInputValidation(true);\n }}\n className=\"w-100\"\n defaultValue={vendorName}\n style={\n userPermission?.user_role === 'admin' ||\n userPermission?.permissions?.permissions?.account_general_permission?.edit\n ? {}\n : { cursor: 'not-allowed' }\n }\n />\n
\n \n \n \n Energy Dashboard Configuration\n \n \n\n \n \n
\n \n \n Add Building \n\n {\n handleChange('building_name', e.target.value.trim());\n }}\n error={null}\n labelsize={Typography.Sizes.md}\n />\n\n
\n \n Building Type \n {\n handleChange('building_type_id', e.value);\n }}\n isSearchable={true}\n />\n
\n\n \n {\n setBuildingData(defaultBuildingObj);\n closeAddBuildingModal();\n }}\n />\n\n {\n saveBuildingDetails();\n }}\n />\n
\n\n \n
\n \n \n Buildings \n
\n {userPermission?.user_role === 'admin' ||\n userPermission?.permissions?.permissions?.account_buildings_permission?.create ? (\n \n {\n openAddBuildingModal();\n }}\n icon={
\n ) : (\n ''\n )}\n \n Add User \n\n \n Email Address\n \n *\n \n \n {\n handleChange('email', e.target.value);\n setErrorObj({ ...errorObj, email: null });\n }}\n error={errorObj.email}\n labelsize={Typography.Sizes.md}\n />\n\n
\n \n
\n\n \n \n First Name\n \n *\n \n \n {\n handleChange('first_name', e.target.value.trim());\n setErrorObj({ ...errorObj, first_name: null });\n }}\n labelsize={Typography.Sizes.md}\n error={errorObj.first_name}\n />\n
\n \n \n Last Name\n \n *\n \n \n {\n handleChange('last_name', e.target.value.trim());\n setErrorObj({ ...errorObj, last_name: null });\n }}\n error={errorObj.last_name}\n labelsize={Typography.Sizes.md}\n />\n
\n \n \n User Role\n \n *\n \n \n option.value === userObj?.role)}\n onChange={(e) => {\n handleChange('role', e.value);\n setErrorObj({ ...errorObj, role: null });\n }}\n isSearchable={true}\n error={errorObj.role}\n />\n
\n\n \n {\n handleAddModalClose();\n setUserObj(defaultUserObj);\n setErrorObj(defaultErrorObj);\n }}\n />\n\n
\n\n {row?.name ? `${row?.name}` : '-'}
\n \n );\n };\n\n const renderRole = (row) => {\n return (\n \n
\n \n \n Users \n
\n {userPermission?.user_role === 'admin' ||\n userPermission?.permissions?.permissions?.account_user_permission?.create ? (\n \n
\n ) : null}\n \n \n Roles Comparison\n \n
\n \n
\n \n \n \n {orginalUserData?.first_name} {orginalUserData?.last_name}\n \n \n {orginalUserData?.email}\n \n
\n \n
\n \n {\n history.push({ pathname: `/settings/users` });\n }}\n />\n
\n \n \n \n User Details\n \n \n\n
\n \n \n
\n \n {userDetail && renderStatus()}\n\n \n Only active users can sign in\n \n
\n\n \n
\n\n \n First Name \n
\n \n {\n handleChange('first_name', e.target.value);\n setErrorObj({ ...errorObj, first_name: null });\n }}\n value={userDetail?.first_name}\n error={errorObj.first_name}\n />\n
\n \n
\n\n \n Last Name \n
\n \n {\n handleChange('last_name', e.target.value);\n setErrorObj({ ...errorObj, last_name: null });\n }}\n value={userDetail?.last_name}\n error={errorObj.last_name}\n />\n
\n \n
\n \n \n Email Address\n \n
\n \n {\n handleChange('email', e.target.value);\n setErrorObj({ ...errorObj, email: null });\n }}\n value={userDetail?.email}\n disabled={userDetail?.is_active === false ? true : false}\n error={errorObj.email}\n />\n
\n \n \n \n User Roles\n \n \n\n
\n \n \n
\n \n
\n \n \n {orignalUserRole?.permission_name}\n \n\n setShowCompareRoles(true)}\n />\n
\n\n \n option.value === userRole?.permission_id\n )}\n error={error}\n onChange={(e) => {\n handleRoleChange('permission_id', e.value);\n }}\n />\n {error ? (\n
\n \n \n \n
\n ) : null}\n \n \n \n Danger Zone\n \n \n\n {userDetail && \n
\n \n {deactivateUser()}
}\n \n \n
\n \n \n \n {orginalUserData?.email} is the only administrator on the account, please assign\n another administrator before deactivating.\n \n \n
\n
\n | Name | \nBuilding Access | \nLast Active | \n|
|---|---|---|---|
| \n | \n {record.buildingAccess} | \n{record.emailId} | \n{record.lastActive} | \n
\n {roleName}\n
\n\n \n
\n \n \n {\n setFormValidation(false);\n }}>\n Cancel\n \n \n Save\n \n
\n \n
\n Account Permissions
\n\n These permissions apply to the entire Dunder Mifflin account. Make sure this role\n really needs these permissions!\n
\n\n
\n \n \n Account Permissions\n
\n\n setChecked(!checked)}\n checked={checked}\n onColor={'#2955E7'}\n uncheckedIcon={false}\n checkedIcon={false}\n className=\"react-switch\"\n height={20}\n width={36}\n />\n Full Access\n
\n \n \n
\n Building-Specific Permissions
\n\n Permissions below apply only to buildings this role is attached to when assigned to\n a user.\n
\n\n Energy\n
\n\n Workspace Planning\n
\n\n Explore\n
\n\n Control\n
\n\n
\n \n \n Building Configuration\n
\n\n setCheckedBuildingConf(!checkedBuildingConf)}\n checked={checkedBuildingConf}\n onColor={'#2955E7'}\n uncheckedIcon={false}\n checkedIcon={false}\n className=\"react-switch\"\n height={20}\n width={36}\n />\n Full Access\n
\n \n \n
\n \n \n Advanced Configuration\n
\n\n setCheckedAdvancedConf(!checkedAdvancedConf)}\n checked={checkedAdvancedConf}\n onColor={'#2955E7'}\n uncheckedIcon={false}\n checkedIcon={false}\n className=\"react-switch\"\n height={20}\n width={36}\n />\n Full Access\n
\n \n \n Danger Zone\n
\n| Name | \nBuilding Access | \nLast Active | \n|
|---|---|---|---|
| \n | \n - | \n{record.user_email} | \n- | \n
\n {roleName}\n
\n\n \n
\n \n \n {\n setFormValidation(false);\n }}>\n Cancel\n \n {\n updateSinglePermissionRoleFunc();\n }}\n disabled={!formValidation}>\n Save\n \n
\n \n
\n Account Permissions
\n\n These permissions apply to the entire Dunder Mifflin account. Make sure this\n role really needs these permissions!\n
\n\n
\n \n \n Account Permissions\n
\n\n setChecked(!checked)}\n checked={checked}\n onColor={'#2955E7'}\n uncheckedIcon={false}\n checkedIcon={false}\n className=\"react-switch\"\n height={20}\n width={36}\n />\n Full Access\n
\n \n \n
\n Building-Specific Permissions
\n\n Permissions below apply only to buildings this role is attached to when assigned\n to a user.\n
\n\n Energy\n
\n\n Workspace Planning\n
\n\n Explore\n
\n\n Control\n
\n\n
\n \n \n Building Configuration\n
\n\n setCheckedBuildingConf(!checkedBuildingConf)}\n checked={checkedBuildingConf}\n onColor={'#2955E7'}\n uncheckedIcon={false}\n checkedIcon={false}\n className=\"react-switch\"\n height={20}\n width={36}\n />\n Full Access\n
\n \n \n
\n \n \n Advanced Configuration\n
\n\n setCheckedAdvancedConf(!checkedAdvancedConf)}\n checked={checkedAdvancedConf}\n onColor={'#2955E7'}\n uncheckedIcon={false}\n checkedIcon={false}\n className=\"react-switch\"\n height={20}\n width={36}\n />\n Full Access\n
\n \n \n Danger Zone\n
\n\n
\n \n \n
\n \n
\n \n \n
\n \n \n \n
\n\n \n \n {`Total Consumption`}\n \n
\n\n {utilityMeterObj?.device_type !== UTILITY_MONITOR.PULSE_COUNTER && (\n \n \n {sensorYtdData?.sum ? formatConsumptionValue(sensorYtdData?.sum / 1000, 0) : 0}\n \n \n {`kWh`} \n \n
\n \n \n {`Peak kW`}\n \n \n {sensorYtdData?.peak?.time_stamp &&\n `@ ${moment\n .utc(sensorYtdData?.peak?.time_stamp)\n .clone()\n .tz(timeZone)\n .format(\n `${userPrefDateFormat === `DD-MM-YYYY` ? `DD/MM` : `MM/DD`} ${\n userPrefTimeFormat === `12h` ? `hh:mm A` : `HH:mm`\n }`\n )}`}\n \n
\n )}\n \n \n {sensorYtdData?.peak?.consumption\n ? formatConsumptionValue(sensorYtdData?.peak?.consumption / 1000, 0)\n : 0}\n \n \n {`kW`} \n \n
\n \n
\n\n {fetchingChartData ? (\n \n \n
\n \n
\n\n \n {\n handleUnitChange(e.value);\n }}\n />\n
\n \n
\n ) : (\n \n
\n )}\n \n \n \n \n {`Utility Monitors are associated with the building by default. If this is a sub-meter or tenant metering application, please select a location from the dropdown.`}\n \n\n \n
\n );\n };\n\n const BuildingMeterToolTip = () => {\n return (\n \n \n {`Select the Building Meter checkbox if this sensor is monitoring a building utility input. Checking this box will include this sensor’s data in total building calculations.`}\n \n\n \n
\n );\n };\n\n const resetLocationforSensor = () => {\n handleChange('service_location', null);\n };\n\n useEffect(() => {\n const obj = buildingListData.find((el) => el?.building_id === sensorObj?.building_id);\n if (obj?.building_id) setBldgName(obj?.building_name);\n }, [buildingListData, sensorObj]);\n\n return (\n \n
\n\n \n {`Utility Provider`} \n {\n handleChange('utility_provider', e.target.value);\n }}\n labelsize={Typography.Sizes.md}\n value={sensorObj?.utility_provider}\n error={sensorErrorObj?.utility_provider}\n />\n
\n\n \n {`Utility Meter S/N`} \n {\n handleChange('utility_meter_serial_number', e.target.value);\n }}\n labelsize={Typography.Sizes.md}\n value={sensorObj?.utility_meter_serial_number}\n error={sensorErrorObj?.utility_meter_serial_number}\n />\n
\n \n
\n\n \n \n {`Pulse Weight`}\n \n *\n \n \n {\n handleChange('pulse_weight', e.target.value);\n }}\n labelsize={Typography.Sizes.md}\n value={sensorObj?.pulse_weight}\n error={sensorErrorObj?.pulse_weight}\n inputClassName={'custom-input-field'}\n />\n
\n\n \n {`Utility Meter Make`} \n {\n handleChange('utility_meter_make', e.target.value);\n }}\n labelsize={Typography.Sizes.md}\n value={sensorObj?.utility_meter_make}\n />\n
\n \n
\n\n \n {`Building`} \n
\n\n \n {\n const value = e.target.value === 'true' ? false : true;\n handleChange('building_meter', value);\n }}\n />\n
\n \n {`Utility Meter Model`} \n {\n handleChange('utility_meter_model', e.target.value);\n }}\n labelsize={Typography.Sizes.md}\n value={sensorObj?.utility_meter_model}\n />\n
\n \n
\n \n ) : (\n <>\n \n option.value === sensorObj?.service_location\n )}\n onChange={(e) => {\n handleChange('service_location', e.value);\n }}\n isSearchable={true}\n customSearchCallback={({ data, query }) =>\n defaultDropdownSearch(data, query?.value)\n }\n menuPlacement=\"top\"\n />\n {sensorObj?.service_location ? (\n <>\n \n {`Reset Submeter Location`}\n \n \n ) : null}\n \n )}\n
\n \n \n {`Submeter Location`} \n
\n \n
\n\n \n {`Utility Meter Make`} \n {\n handleChange('utility_meter_make', e.target.value);\n }}\n labelsize={Typography.Sizes.md}\n value={sensorObj?.utility_meter_make}\n />\n
\n\n \n {`Utility Meter Model`} \n {\n handleChange('utility_meter_model', e.target.value);\n }}\n labelsize={Typography.Sizes.md}\n value={sensorObj?.utility_meter_model}\n />\n
\n \n
\n \n )}\n\n \n {`Building`} \n
\n\n \n {\n const value = e.target.value === 'true' ? false : true;\n handleChange('building_meter', value);\n }}\n />\n
\n \n option.value === sensorObj?.service_location\n )}\n onChange={(e) => {\n handleChange('service_location', e.value);\n }}\n isSearchable={true}\n customSearchCallback={({ data, query }) =>\n defaultDropdownSearch(data, query?.value)\n }\n menuPlacement=\"top\"\n />\n {sensorObj?.service_location ? (\n <>\n \n {`Reset Submeter Location`}\n \n \n ) : null}\n \n )}\n
\n \n {`Submeter Location`} \n
\n \n \n
\n\n \n {utilityMeterObj?.mac_address && (\n \n {`${utilityMeterObj?.model} - ${convertToMac(utilityMeterObj?.mac_address)}`}\n \n )}\n \n {activeTab === 'metrics'\n ? utilityMeterObj?.device_type === UTILITY_MONITOR.PULSE_COUNTER\n ? formatSensorHeading(selectedSensorObj, 'pulse')\n : formatSensorHeading(selectedSensorObj, 'shadow')\n : `Sensor Details`}\n \n
\n \n setActiveTab('metrics')}>\n {`Metrics`}\n \n\n {(isSuperAdmin || canUserEdit) && (\n setActiveTab('configure')}>\n {`Configure`}\n \n )}\n
\n \n
\n \n
\n\n {(isSuperAdmin || canUserEdit) && (\n \n
\n )}\n \n {activeTab === 'metrics' && (\n
\n \n \n \n
\n \n );\n })\n ) : (\n \n \n {sensorNo}\n \n\n {utilityMeterObj?.device_type === UTILITY_MONITOR.PULSE_COUNTER ? (\n <>\n {isSensorConfigured ? (\n <>\n {sensorData !== '' && (\n \n {sensorData}\n \n )}\n \n ) : (\n \n {`Not Attached`}\n \n )}\n \n ) : (\n <>\n {isSensorConfigured && (\n <>\n {sensorData !== '' && (\n \n {sensorData}\n \n )}\n \n )}\n \n )}\n\n {isPulseWeightVisible && (\n
\n \n {utilityMeterObj?.device_type === UTILITY_MONITOR.PULSE_COUNTER ? (\n <>\n {isPulseWeightVisible && (\n handleModalOpen(record, 'metrics')}\n type={Button.Type.secondaryGrey}\n label=\"\"\n icon={ handleModalOpen(record, 'configure')}\n type={Button.Type.secondaryGrey}\n label=\"\"\n icon={
\n \n
\n )}\n\n {/* Sensor Modal */}\n \n
\n \n \n {`No sensor found`}\n \n
\n \n
\n );\n};\n\nconst EditUtilityMeter = (props) => {\n const { editUtilityModal, handleModalClose, utilityMeterObj, fetchUtilityMeter, bldgId } = props;\n\n const defaultError = {\n mac_address: null,\n modbus_address: null,\n name: null,\n };\n\n const [meterObj, setMeterObj] = useState({});\n const [isUpdating, setUpdating] = useState(false);\n const [utilityError, setUtilityError] = useState(defaultError);\n\n const handleChange = (key, value) => {\n setMeterObj((prev) => {\n let updatedObj = { ...prev };\n\n if (key === 'mac_address') {\n let formattedValue = convertToAlphaNumeric(value);\n if (formattedValue.length > 12) return prev; // Prevents unnecessary state updates\n formattedValue = formattedValue.replace(/..\\B/g, '$&:');\n updatedObj[key] = formattedValue;\n } else {\n updatedObj[key] = value;\n }\n\n return updatedObj;\n });\n };\n const updateUtilityMeter = async (device_id, bldg_id) => {\n if (!device_id || !bldg_id) return;\n\n let alertObj = Object.assign({}, utilityError);\n\n let formattedDeviceId = convertToAlphaNumeric(meterObj?.mac_address);\n if (formattedDeviceId.length < 12) {\n alertObj.mac_address = 'Please enter 12 digit Device ID.';\n }\n if (meterObj?.modbus_address.length === 0) {\n alertObj.modbus_address = 'Please enter Modbus. It cannot be empty.';\n }\n\n setUtilityError(alertObj);\n\n if (!alertObj.mac_address && !alertObj.modbus_address) {\n setUpdating(true);\n\n const params = `?device_id=${device_id}`;\n\n const changedFields = Object.keys(meterObj).reduce((acc, key) => {\n if (meterObj[key] !== utilityMeterObj[key]) {\n acc[key] = meterObj[key];\n }\n return acc;\n }, {});\n\n await updateUtilityMeterServices(params, changedFields)\n .then((res) => {\n const response = res?.data;\n if (response?.success) {\n UserStore.update((s) => {\n s.showNotification = true;\n s.notificationMessage = response?.message;\n s.notificationType = 'success';\n });\n fetchUtilityMeter(bldg_id, device_id);\n handleModalClose();\n } else {\n if (!response?.success && response?.message.includes('identifier already exists')) {\n alertObj.mac_address = 'Device ID with given name already exists.';\n setUtilityError(alertObj);\n } else {\n UserStore.update((s) => {\n s.showNotification = true;\n s.notificationMessage = response?.message\n ? response?.message\n : res\n ? 'Unable to update Utility Monitor.'\n : 'Unable to update Utility Monitor due to Internal Server Error!.';\n s.notificationType = 'error';\n });\n }\n }\n setUpdating(false);\n })\n .catch((e) => {\n setUpdating(false);\n handleModalClose();\n });\n }\n };\n\n useEffect(() => {\n if (editUtilityModal && utilityMeterObj?.id) {\n const obj = Object.assign({}, utilityMeterObj);\n setMeterObj(obj);\n }\n }, [editUtilityModal]);\n\n return (\n \n \n Utility Monitoring Device\n \n \n Configure\n \n
\n \n \n {utilityMeterObj?.mac_address && convertToMac(utilityMeterObj?.mac_address)}\n \n {utilityMeterObj?.model && (\n \n {utilityMeterObj?.model.includes('Sapient Pulse') &&\n `${utilityMeterObj?.sensor_count} Pulse Counters`}\n {utilityMeterObj?.model.includes('Sapient Shadow') && `Shadow Meter`}\n {utilityMeterObj?.model.includes('PowerScout 48HD') && `Shadow Meter`}\n \n )}\n
\n \n
\n \n
\n \n Edit Utility Monitor \n\n
\n \n Device Name \n {\n if (e.target.value < 0) return;\n handleChange('name', e.target.value);\n }}\n labelsize={Typography.Sizes.md}\n value={meterObj?.name}\n inputClassName={'custom-input-field'}\n />\n
\n\n \n \n Device ID\n \n *\n \n \n {\n handleChange('mac_address', e.target.value.trim().toUpperCase());\n setUtilityError({ ...utilityError, mac_address: null });\n }}\n error={utilityError?.mac_address}\n labelsize={Typography.Sizes.md}\n value={meterObj?.mac_address}\n />\n Enter MAC address of A8810. \n )}\n
\n\n \n \n {`${meterObj?.device_type === UTILITY_MONITOR.POWER_SCOUT ? 'Starting ' : ''}Modbus Address`}\n \n *\n \n \n {\n if (e.target.value < 0) return;\n handleChange('modbus_address', e.target.value);\n setUtilityError({ ...utilityError, modbus: null });\n }}\n error={utilityError?.modbus_address}\n labelsize={Typography.Sizes.md}\n value={meterObj?.modbus_address}\n inputClassName={'custom-input-field'}\n />\n
\n\n \n {\n setUtilityError(defaultError);\n handleModalClose();\n setMeterObj({});\n }}\n />\n\n {\n updateUtilityMeter(utilityMeterObj?.id, bldgId);\n }}\n />\n
\n\n \n {isFetchingUtilityMeter ? (\n \n
\n ) : (\n <>\n \n
\n \n Model: \n
\n \n \n {utilityMeterObj?.model}\n \n
\n \n
\n \n Edit \n
\n ) : null}\n \n \n )}\n \n \n {/*
\n\n \n {`Device Name`}\n \n {utilityMeterObj?.name ?? '-'}\n \n
\n {/* \n {`Gateway`} \n {`A8810`} \n
*/}\n \n {`Gateway`} \n {`A8810`} \n
\n \n {`Modbus Device Name`}\n \n {utilityMeterObj?.model.includes('Sapient Pulse') && `A8832`}\n {utilityMeterObj?.model.includes('PowerScout 48HD') && `PS48HD`}\n {utilityMeterObj?.model.includes('Sapient Shadow') &&\n `Shark` + utilityMeterObj?.model.split(`Sapient Shadow `)[1]}\n \n )}\n
\n \n
\n\n {isSuperAdmin || canUserEdit ? (\n \n {`Device ID`}\n \n {utilityMeterObj?.mac_address && convertToMac(utilityMeterObj?.mac_address)}\n \n
\n \n {`Modbus Address`}\n \n {utilityMeterObj?.modbus_address}\n \n
\n {utilityMeterObj?.device_description ? (\n <>\n \n {`Device Description`}\n \n {utilityMeterObj?.device_description}\n \n
\n \n ) : null}\n \n
\n\n \n
\n \n
\n ) : (\n \n \n You don't have the permission to view this page.\n \n
\n ) : (\n \n {\n setTimePickerEnabled(e.target.value === 'false' ? true : false);\n }}\n />\n
\n )}\n \n {\n applyDate(event);\n setFocusedInput(null);\n handleClose();\n }}\n />\n
\n \n )\n }\n onClose={!withApplyButton ? handleClose : undefined}\n noBorder={true}\n readOnly\n displayFormat=\"MMM D\"\n isOutsideRange={() => false}\n startDateId=\"startDate\" // PropTypes.string.isRequired,\n endDateId=\"endDate\" // PropTypes.string.isRequired,\n navPrev={\n
\n );\n};\n\nTimeFrameSelector.propTypes = {\n rangeDate: PropTypes.arrayOf(PropTypes.object).isRequired,\n onChange: PropTypes.func,\n selectedOption: PropTypes.string,\n timeOptions: PropTypes.array,\n isSingleDay: PropTypes.bool,\n onCancel: PropTypes.func,\n onApply: PropTypes.func,\n onCustomDateChange: PropTypes.func,\n onDateFilterChange: PropTypes.func,\n withApplyButton: PropTypes.bool,\n};\n\nTimeFrameSelector.options = selectOptions;\n\nTimeFrameSelector.defaultProps = {\n rangeDate: [moment().subtract(6, 'd'), moment()],\n};\n\nexport default TimeFrameSelector;\n","import React from 'react';\nimport { Spinner } from 'reactstrap';\n\nimport { Button } from '../../button';\n\nimport { ReactComponent as DownloadSVG } from '../../assets/icons/download.svg';\n\nexport const DownloadButton = (props) => {\n const { isCSVDownloading = false } = props;\n return (\n \n setMenuSelectOpen(true)}\n onMenuClose={() => setMenuSelectOpen(false)}\n {...props}\n />\n
\n \n \n {message}\n \n\n \n
\n );\n };\n\n const saveDeviceData = async () => {\n let alertObj = Object.assign({}, equipmentErrors);\n\n if ((equipmentObj?.name.trim()).length === 0)\n alertObj.name = 'Please enter Equipment name. It cannot be blank.';\n\n if (equipmentObj?.equipment_type.length === 0)\n alertObj.equipment_type = { text: 'Please select Equipment Type.' };\n\n if (equipmentObj?.end_use.length === 0) alertObj.end_use = { text: 'Please select End Use Category.' };\n\n setEquipmentErrors(alertObj);\n\n if (!alertObj.name && !alertObj.equipment_type && !alertObj.end_use) {\n setIsProcessing(true);\n\n let payload = _.cloneDeep(equipmentObj);\n if (equipmentObj?.location_served) payload.location_served = [`${equipmentObj?.location_served}`];\n\n await addNewEquipment(bldgId, payload)\n .then((res) => {\n const response = res?.data;\n\n if (response?.success) {\n UserStore.update((s) => {\n s.showNotification = true;\n s.notificationMessage = 'Equipment created successfully.';\n s.notificationType = 'success';\n });\n fetchEquipmentData();\n closeModal();\n } else {\n UserStore.update((s) => {\n s.showNotification = true;\n s.notificationMessage = response?.message\n ? response?.message\n : res\n ? 'Unable to create Equipment.'\n : 'Unable to create Equipment due to Internal Server Error!.';\n s.notificationType = 'error';\n });\n }\n })\n .catch((e) => {\n setEquipmentErrors(defaultErrors);\n })\n .finally(() => {\n setIsProcessing(false);\n });\n }\n };\n\n useEffect(() => {\n if (isAddEquipModalOpen) setEquipmentObj(defaultEquipmentObj);\n }, [isAddEquipModalOpen]);\n\n return (\n \n Add Equipment \n\n \n Name\n \n *\n \n \n\n {\n handleChange('name', e.target.value);\n setEquipmentErrors({ ...equipmentErrors, name: null });\n }}\n value={equipmentObj?.name}\n labelsize={Typography.Sizes.md}\n error={equipmentErrors?.name}\n />\n\n
\n \n \n Equipment Type\n \n *\n \n \n option.value === equipmentObj?.equipment_type\n )}\n options={equipmentTypeDataAll}\n onChange={(e) => {\n handleChange('equipment_type', e.value);\n }}\n customSearchCallback={({ data, query }) => defaultDropdownSearch(data, query?.value)}\n error={equipmentErrors?.equipment_type}\n className=\"basic-single\"\n />\n
\n\n \n \n End Use Category\n \n *\n \n \n option.value === equipmentObj?.end_use)}\n options={endUseDataNow}\n onChange={(e) => {\n handleChange('end_use', e.value);\n setEquipmentErrors({ ...equipmentErrors, end_use: null });\n }}\n error={equipmentErrors?.end_use}\n className=\"basic-single\"\n />\n
\n\n \n option.value === equipmentObj?.space_id)}\n options={locationDataNow}\n onChange={(e) => {\n handleChange('space_id', e.value);\n }}\n customSearchCallback={({ data, query }) => defaultDropdownSearch(data, query?.value)}\n className=\"basic-single\"\n menuPlacement=\"top\"\n />\n
\n\n \n Equipment Location \n
\n \n option.value === equipmentObj?.location_served\n )}\n options={locationDataNow}\n onChange={(e) => {\n handleChange('location_served', e.value);\n }}\n className=\"basic-single\"\n menuPlacement=\"top\"\n />\n
\n\n \n Location Served \n
\n \n {\n closeModal();\n setEquipmentErrors(defaultErrors);\n }}\n />\n\n
\n\n \n
\n \n {row.sensor_number.length === 0 ? (\n - \n ) : (\n <>\n {row.sensor_number.map((el) => {\n return (\n \n {el}/{row.total_sensor}\n \n }\n />\n );\n })}\n \n )}\n
\n );\n });\n\n const renderTags = useCallback((row) => {\n const slicedArr = row.tags.slice(1);\n return (\n \n {row.tags[0] ? row.tags[0] : 'none'}} />\n {slicedArr?.length > 0 ? (\n <>\n \n +{slicedArr.length} more\n \n }\n />\n \n {slicedArr.map((el) => {\n return {el}} />;\n })}\n \n \n ) : null}\n
\n );\n });\n\n const fetchEquipmentData = async () => {\n isLoadingRef.current = true;\n setIsEquipDataFetched(true);\n const sorting = sortBy.method &&\n sortBy.name && {\n order_by: sortBy.name,\n sort_by: sortBy.method,\n };\n\n let locationServedReserved = false;\n\n if (servedBySelectedSpaceId && !selectedLocationServed.includes(selectedSpaceId))\n selectedLocationServed.push(selectedSpaceId);\n if (showCheckbox) locationServedReserved = true;\n\n await getEqupmentDataRequest(\n panelNameFilterString,\n cdModelInstalledNameString,\n breakerNumberString,\n breakerRatedAmpsString,\n pageSize,\n pageNo,\n bldgId,\n search,\n equipmentTypeFilterString,\n endUseFilterString,\n deviceIdFilterString,\n locationTypeFilterString,\n floorString,\n spaceString,\n tagsFilterString,\n selectedLocationServed,\n locationServedReserved,\n {\n ...sorting,\n },\n true\n )\n .then((res) => {\n let responseData = res.data;\n setTotalItems(responseData.total_data);\n\n setGeneralEquipmentData(responseData.data);\n setDuplicateGeneralEquipmentData(responseData.data);\n let onlineEquip = [];\n let offlineEquip = [];\n responseData.data.forEach((record) => {\n if (record.status) {\n onlineEquip.push(record);\n }\n if (!record.status) {\n offlineEquip.push(record);\n }\n });\n setOnlineEquipData(onlineEquip);\n setOfflineEquipData(offlineEquip);\n setIsEquipDataFetched(false);\n isLoadingRef.current = false;\n })\n .catch(() => {\n setIsEquipDataFetched(false);\n isLoadingRef.current = false;\n handleChartClose();\n });\n };\n\n const addEquimentData = () => {\n generalEquipmentData.map((item) => {\n if (item?.device_type === 'active') {\n setEqupimentDataNow((el) => [...el, item?.equipments_id]);\n }\n setAllEqupimentDataNow((el) => [...el, item?.equipments_id]);\n });\n };\n\n useEffect(() => {\n addEquimentData();\n addEquimentType();\n }, [generalEquipmentData]);\n\n useEffect(() => {\n fetchMetadata();\n fetchLocationData();\n }, [bldgId, pageSize]);\n\n const fetchMetadata = async () => {\n setIsLoadingEndUseData(true);\n await getMetadataRequest(bldgId)\n .then((res) => {\n const { end_uses, equipment_type } = res.data;\n const prepareEndUseType = end_uses.reduce((acc, el) => {\n acc[`${el.end_use_id}`] = el.name;\n return acc;\n }, {});\n setEquipmentTypeData(equipment_type);\n setEndUseData(end_uses);\n setPreparedEndUseData(prepareEndUseType);\n })\n .finally(() => {\n setIsLoadingEndUseData(false);\n });\n };\n\n const fetchLocationData = async () => {\n await getLocationDataRequest(bldgId)\n .then((res) => {\n setLocationData(res);\n })\n .catch((error) => {});\n };\n\n useEffect(() => {\n if (bldgId && buildingListData.length !== 0) {\n const bldgObj = buildingListData.find((el) => el?.building_id === bldgId);\n if (bldgObj?.building_id)\n updateBuildingStore(\n bldgObj?.building_id,\n bldgObj?.building_name,\n bldgObj?.timezone,\n bldgObj?.plug_only\n );\n }\n }, [buildingListData, bldgId]);\n\n useEffect(() => {\n window.scrollTo(0, 0);\n }, [pageNo, pageSize]);\n\n useEffect(() => {\n const updateBreadcrumbStore = () => {\n BreadcrumbStore.update((bs) => {\n let newList = [\n {\n label: 'Equipment',\n path: '/settings/equipment',\n active: true,\n },\n ];\n bs.items = newList;\n });\n ComponentStore.update((s) => {\n s.parent = 'building-settings';\n });\n };\n window.scrollTo(0, 0);\n\n if (!servedBySelectedSpaceId) {\n updateBreadcrumbStore();\n }\n }, [servedBySelectedSpaceId]);\n\n const [userPermission] = useAtom(userPermissionData);\n\n const filterHandler = (setter, options) => {\n setter(options.map(({ value }) => value));\n setPageNo(1);\n };\n\n const filterLabelHandler = (setter, options) => {\n setter(options.map(({ label }) => label));\n setPageNo(1);\n };\n\n const renderEndUseCategory = (row) => {\n return (\n \n \n
\n \n handleCheckbox(record)}\n />\n );\n })\n }\n customCheckAll={\n showCheckbox &&\n (() => (\n {\n const checkedAll = currentRow()?.length === checkedElements.length;\n\n if (checkedAll) {\n handleCheckAll([]);\n } else {\n const equipments = currentRow();\n handleCheckAll(equipments);\n }\n }}\n disabled={\n !currentRow() ||\n currentRow()?.length > 20 ||\n isEquipDataFetched ||\n isLoadingEndUseData\n }\n />\n ))\n }\n totalCount={(() => {\n if (search) {\n return totalItemsSearched;\n }\n if (selectedTab === 0) {\n return totalItems;\n }\n\n return 0;\n })()}\n />\n \n
\n setShowDeleteEquipmentModal(false)}\n centered\n backdrop=\"static\"\n keyboard={false}>\n \n \n \n setShowDeleteEquipmentModal(false)}\n />\n\n {\n deleteEquipmentFunc(rowToDelete);\n }}\n />\n \n \n\n
\n );\n};\n\nexport default Equipment;\n","var _path;\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nimport * as React from \"react\";\nfunction SvgMoreVertical(_ref, svgRef) {\n let {\n title,\n titleId,\n ...props\n } = _ref;\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 4,\n height: 16,\n viewBox: \"0 0 4 16\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n d: \"M0.333008 2.16667C0.333008 1.24619 1.0792 0.5 1.99967 0.5C2.92015 0.5 3.66634 1.24619 3.66634 2.16667C3.66634 3.08714 2.92015 3.83333 1.99967 3.83333C1.0792 3.83333 0.333008 3.08714 0.333008 2.16667ZM0.333008 8C0.333008 7.07953 1.0792 6.33333 1.99967 6.33333C2.92015 6.33333 3.66634 7.07953 3.66634 8C3.66634 8.92047 2.92015 9.66667 1.99967 9.66667C1.0792 9.66667 0.333008 8.92047 0.333008 8ZM0.333008 13.8333C0.333008 12.9129 1.0792 12.1667 1.99967 12.1667C2.92015 12.1667 3.66634 12.9129 3.66634 13.8333C3.66634 14.7538 2.92015 15.5 1.99967 15.5C1.0792 15.5 0.333008 14.7538 0.333008 13.8333Z\",\n fill: \"#626B7F\"\n })));\n}\nconst ForwardRef = /*#__PURE__*/React.forwardRef(SvgMoreVertical);\nexport default __webpack_public_path__ + \"static/media/more-vertical.606fc001.svg\";\nexport { ForwardRef as ReactComponent };","import React, { forwardRef } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { Button } from '../../button';\nimport DropDownBase from './DropDownBase';\n\nimport { ReactComponent as MoreVerticalSVG } from '../../assets/icons/more-vertical.svg';\n\nconst TriggerButton = forwardRef((props, ref) => {\n return (\n \n
\n \n \n \n {servedBySelectedSpaceId && !showCheckbox ? 'Linked Equipment' : 'Equipment'}\n \n
\n {userPermission?.user_role === 'admin' ||\n userPermission?.permissions?.permissions?.building_equipment_permission?.create ? (\n \n {servedBySelectedSpaceId && !showCheckbox && (\n {\n handleShow();\n setCreateEquipmentData({\n name: '',\n equipment_type: '',\n end_use: '',\n space_id: '',\n });\n }}\n icon={
\n ) : null}\n \n
\n Delete Equipment
\n\n
\n \n Are you sure you want to delete the Equipment?
\n \n {socketStatus === null ? (\n {\n if (isStatusCanBeChecked) {\n fetchSmartPlugSensorStatus(bldgId, socketSensorsWithStatus, index, record?.id);\n }\n }}\n />\n ) : (\n <>\n {isFetchingSocketById === index ? (\n {\n if (!isFetchingSocketById) {\n handleSmartPlugSocketSwitch(\n bldgId,\n record?.id,\n !isSocketOn,\n index,\n canUserToggleOnOffDevice\n );\n }\n }}\n />\n ) : (\n <>\n \n
\n );\n };\n\n useEffect(() => {\n fetchSmartPlugDeviceStatus(bldgId, equipmentObj?.device_id);\n fetchDeviceSensorsList(equipmentObj?.device_id);\n }, [bldgId, equipmentObj]);\n\n return (\n Device is offline
\n \n\n \n
\n \n \n {chunk.map((socket, innerIndex) => (\n
\n ))}\n \n )}\n \n \n\n \n {isFetchingSensors ? (\n \n
\n ) : (\n <>\n {splitArrayIntoChunks(socketSensorsWithStatus, 6).map((chunk, index) => (\n \n {renderSocket(socket, innerIndex, isStatusCanBeChecked)}\n
\n ))}\n \n\n
\n Smart Plug \n \n
\n\n \n\n
\n
\n\n \n {isFetchingDeviceStatus ? (\n \n \n {deviceStatus ? `Online` : `Offline`}\n \n
\n )}\n\n \n
\n \n \n
\n\n \n {`Identifier`} \n \n {equipmentObj?.device_mac ?? '-'}\n \n
\n\n \n {`Installed at`} \n \n {equipmentObj?.location && equipmentObj?.location !== '' ? equipmentObj?.location : '-'}\n \n
\n \n
\n \n {`Device Type`} \n \n {equipmentObj?.device_model ?? '-'}\n \n
\n \n
\n );\n};\n\nexport default ModalNotification;\n","import React, { useEffect, useState } from 'react';\nimport { useAtom } from 'jotai';\nimport moment from 'moment';\nimport 'moment-timezone';\nimport { useHistory, Link } from 'react-router-dom';\nimport { TagsInput } from 'react-tag-input-component';\nimport Skeleton, { SkeletonTheme } from 'react-loading-skeleton';\nimport { Skeleton as AntdSkeleton } from 'antd';\nimport { Row, Col, FormGroup, Spinner, Modal, UncontrolledTooltip } from 'reactstrap';\n\nimport Header from '../../components/Header';\nimport Button from '../../sharedComponents/button/Button';\nimport Select from '../../sharedComponents/form/select';\nimport LineChart from '../../sharedComponents/lineChart/LineChart';\nimport Typography from '../../sharedComponents/typography';\nimport Brick from '../../sharedComponents/brick';\nimport InputTooltip from '../../sharedComponents/form/input/InputTooltip';\nimport Textarea from '../../sharedComponents/form/textarea/Textarea';\n\nimport { BuildingStore } from '../../store/BuildingStore';\nimport { UserStore } from '../../store/UserStore';\nimport { DateRangeStore } from '../../store/DateRangeStore';\nimport { userPermissionData } from '../../store/globalState';\n\nimport {\n handleAPIRequestBody,\n compareObjData,\n dateTimeFormatForHighChart,\n formatXaxisForHighCharts,\n handleAPIRequestParams,\n} from '../../helpers/helpers';\nimport { defaultMetrics, metricsWithMultipleSensors, rulesAlert } from './constants';\nimport { handleDataConversion, renderEquipChartMetrics } from './helper';\nimport { formatConsumptionValue } from '../../helpers/explorehelpers';\nimport { defaultDropdownSearch } from '../../sharedComponents/form/select/helpers';\n\nimport { ReactComponent as DangerAlertSVG } from '../../assets/icon/alert-danger.svg';\nimport { ReactComponent as TooltipIcon } from '../../sharedComponents/assets/icons/tooltip.svg';\nimport { ReactComponent as ArrowUpRightFromSquare } from '../../assets/icon/arrowUpRightFromSquare.svg';\n\nimport {\n updateListSensor,\n updateEquipmentDetails,\n getEquipmentDetails,\n getMetadataRequest,\n fetchEquipmentKPIs,\n updateExploreEquipmentYTDUsage,\n} from './services';\nimport { fetchEquipmentChartDataV2, fetchExploreEquipmentChart } from '../explore/services';\n\nimport './style.css';\nimport '../../sharedComponents/typography/style.scss';\nimport colorPalette from '../../assets/scss/_colors.module.scss';\nimport 'react-loading-skeleton/dist/skeleton.css';\nimport '../settings/passive-devices/styles.scss';\nimport './styles.scss';\nimport SmartPlugDevice from './equipment/smart-plug-device';\nimport ModalNotification from './equipment/ModalNotification';\n\nconst MachineHealthContainer = (props) => {\n const { equipMetaData = {}, isFetching = false, equipDataObj = {} } = props;\n\n const startDate = DateRangeStore.useState((s) => s.startDate);\n const endDate = DateRangeStore.useState((s) => s.endDate);\n\n const userPrefDateFormat = UserStore.useState((s) => s.dateFormat);\n const userPrefTimeFormat = UserStore.useState((s) => s.timeFormat);\n const dateFormat = userPrefDateFormat === `DD-MM-YYYY` ? `D MMM` : `MMM D`;\n\n const isMultipleSensorAttachedToEquipment =\n equipDataObj?.device_type === 'passive' && equipDataObj?.breaker_link && equipDataObj?.breaker_link?.length > 1;\n\n return (\n <>\n \n {isFetching ? (\n \n
\n \n );\n};\n\nconst EnergyMetaDataContainer = (props) => {\n const { equipMetaData = {}, isFetching = false } = props;\n\n const { total_energy_consumption, peak_power = {} } = equipMetaData;\n\n const startDate = DateRangeStore.useState((s) => s.startDate);\n const endDate = DateRangeStore.useState((s) => s.endDate);\n\n const userPrefDateFormat = UserStore.useState((s) => s.dateFormat);\n const userPrefTimeFormat = UserStore.useState((s) => s.timeFormat);\n\n const dateFormat = userPrefDateFormat === `DD-MM-YYYY` ? `D MMM` : `MMM D`;\n const totalConsumptionValue = total_energy_consumption\n ? formatConsumptionValue(total_energy_consumption / 1000, 0)\n : 0;\n const powerConsumptionValue = peak_power?.avgPower ? formatConsumptionValue(peak_power?.avgPower / 1000000, 2) : 0;\n\n return (\n <>\n \n \n {`Current Period (${moment(startDate).format(dateFormat)} to ${moment(endDate).format(\n dateFormat\n )})`}\n \n\n
\n )}\n \n
\n\n \n Running Minutes: \n \n {equipMetaData?.running_minutes\n ? formatConsumptionValue(Math.round(equipMetaData?.running_minutes))\n : '-'}\n \n
\n\n \n Total Minutes: \n \n {equipMetaData?.total_minutes\n ? formatConsumptionValue(Math.round(equipMetaData?.total_minutes))\n : '-'}\n \n
\n\n \n Percent Runtime: \n \n {equipMetaData?.percent_runtime\n ? `${formatConsumptionValue(equipMetaData?.percent_runtime, 2)} %`\n : '-'}\n \n
\n \n
\n\n {isMultipleSensorAttachedToEquipment && (\n <>\n \n Starts: \n \n {equipMetaData?.starts\n ? formatConsumptionValue(Math.round(equipMetaData?.starts))\n : '-'}\n \n
\n\n \n Stops: \n {equipMetaData?.stops ? formatConsumptionValue(Math.round(equipMetaData?.stops)) : '-'}\n
\n\n \n \n Average Runtime/Start:\n \n \n {equipMetaData?.average_runtime_start\n ? `${formatConsumptionValue(Math.round(equipMetaData?.average_runtime_start))}`\n : '-'}\n \n
\n\n \n Last Start Time: \n \n {equipMetaData?.last_start_time\n ? `${moment\n .utc(equipMetaData?.last_start_time)\n .clone()\n .format(\n `${userPrefDateFormat === `DD-MM-YYYY` ? `DD/MM` : `MM/DD`} ${\n userPrefTimeFormat === `12h` ? `hh:mm A` : `HH:mm`\n }`\n )}`\n : '-'}\n \n
\n \n
\n \n )}\n \n \n Phase Imbalance\n \n
\n\n \n \n Average Imbalance Percent:\n \n
\n\n \n \n {equipMetaData?.average_imbalance_percent\n ? `${formatConsumptionValue(\n equipMetaData?.average_imbalance_percent,\n 2\n )} %`\n : '-'}\n \n {equipMetaData?.average_imbalance_percent > 10 && (\n <>\n \n {`Phase Imbanace occurs when average percentage of an equipment are unequal. Phase Imbalance above 10% can damange 3-phase motors`}\n \n
\n \n \n Average Imbalance Current:\n \n
\n \n \n {equipMetaData?.average_imbalance_current\n ? `${formatConsumptionValue(\n equipMetaData?.average_imbalance_current / 1000,\n 2\n )} A`\n : '-'}\n \n
\n \n
\n \n );\n};\n\nconst EquipChartModal = ({\n showEquipmentChart,\n handleChartClose,\n fetchEquipmentData,\n selectedEquipObj,\n selectedTab,\n setSelectedTab,\n activePage,\n}) => {\n const history = useHistory();\n\n const [userPermission] = useAtom(userPermissionData);\n const isUserAdmin = userPermission?.is_admin ?? false;\n const isSuperUser = userPermission?.is_superuser ?? false;\n const isSuperAdmin = isUserAdmin || isSuperUser;\n const canUserEdit = userPermission?.permissions?.permissions?.building_equipment_permission?.edit ?? false;\n\n const bldgId = BuildingStore.useState((s) => s.BldgId);\n const timeZone = BuildingStore.useState((s) => s.BldgTimeZone);\n\n const startDate = DateRangeStore.useState((s) => s.startDate);\n const endDate = DateRangeStore.useState((s) => s.endDate);\n const startTime = DateRangeStore.useState((s) => s.startTime);\n const endTime = DateRangeStore.useState((s) => s.endTime);\n const daysCount = DateRangeStore.useState((s) => +s.daysCount);\n\n const userPrefDateFormat = UserStore.useState((s) => s.dateFormat);\n const userPrefTimeFormat = UserStore.useState((s) => s.timeFormat);\n\n const [equipData, setEquipData] = useState({});\n const [isFetching, setFetching] = useState({});\n const [originalEquipData, setOriginalEquipData] = useState({});\n const [isEquipDataFetched, setIsEquipDataFetched] = useState(false);\n\n // const metric = renderEquipChartMetrics(originalEquipData);\n const metric = defaultMetrics;\n const isEquipmentConfigModified = compareObjData(equipData, originalEquipData);\n\n const [selectedUnit, setSelectedUnit] = useState(metric[0]?.unit);\n const [selectedConsumptionLabel, setSelectedConsumptionLabel] = useState(metric[0]?.Consumption);\n const [equipmentTypeData, setEquipmentTypeData] = useState([]);\n const [endUse, setEndUse] = useState([]);\n const [locationData, setLocationData] = useState([]);\n const [deviceData, setDeviceData] = useState([]);\n\n const [equipMetaData, setEquipMetaData] = useState({});\n const [isFetchingMetaData, setFetchingMetaData] = useState(false);\n\n const [notifyObj, setNotifyObj] = useState(null);\n\n const [sensors, setSensors] = useState([]);\n const [isProcessing, setProcessing] = useState(false);\n const [selectedConsumption, setConsumption] = useState(metric[0]?.value);\n const [equipBreakerLink, setEquipBreakerLink] = useState([]);\n\n const handleUnitChange = (value) => {\n const obj = metric.find((record) => record?.value === value);\n setSelectedUnit(obj?.unit);\n };\n const handleConsumptionChange = (value) => {\n const obj = metric.find((record) => record?.value === value);\n setSelectedConsumptionLabel(obj?.Consumption);\n };\n\n const handleDataChange = (key, value) => {\n let obj = Object.assign({}, equipData);\n obj[key] = value;\n setEquipData(obj);\n };\n\n const CustomToolTip = ({ id, message = '' }) => {\n return (\n \n \n {`Total Consumption (${moment(startDate).format(dateFormat)} to ${moment(endDate).format(\n dateFormat\n )})`}\n \n\n {isFetching ? (\n
\n \n {totalConsumptionValue}\n kWh\n
\n )}\n \n \n {`Peak kW (${moment(startDate).format(dateFormat)} to ${moment(endDate).format(dateFormat)})`}\n \n\n {isFetching ? (\n
\n \n {powerConsumptionValue}\n\n {peak_power?.timestamp ? (\n \n {`kW @ ${moment\n .utc(peak_power?.timestamp)\n .clone()\n .format(\n `${userPrefDateFormat === `DD-MM-YYYY` ? `DD/MM` : `MM/DD`} ${\n userPrefTimeFormat === `12h` ? `hh:mm A` : `HH:mm`\n }`\n )}`}\n \n ) : (\n kW\n )}\n
\n )}\n \n \n {message}\n \n\n \n
\n );\n };\n\n // Update Equipment\n const handleEquipmentUpdate = async () => {\n setProcessing(true);\n let obj = {};\n\n if (originalEquipData?.equipments_name !== equipData?.equipments_name) obj.name = equipData?.equipments_name;\n if (originalEquipData?.manufacturer !== equipData?.manufacturer) obj.manufacturer = equipData?.manufacturer;\n if (originalEquipData?.model !== equipData?.model) obj.model = equipData?.model;\n if (originalEquipData?.serial !== equipData?.serial) obj.serial = equipData?.serial;\n\n if (originalEquipData?.location_id !== equipData?.location_id) obj.space_id = equipData?.location_id;\n\n if (originalEquipData?.location_served !== equipData?.location_served)\n obj.location_served = equipData?.location_served ? [`${equipData?.location_served}`] : [];\n\n if (originalEquipData?.equipments_type_id !== equipData?.equipments_type_id) {\n obj.equipment_type = equipData?.equipments_type_id;\n obj.end_use = equipData?.end_use_id;\n }\n\n if (originalEquipData?.end_use_id !== equipData?.end_use_id) obj.end_use = equipData?.end_use_id;\n\n if (originalEquipData?.note !== equipData?.note) obj.note = equipData?.note;\n\n if (!compareObjData(originalEquipData?.tags, equipData?.tags)) obj.tag = equipData?.tags;\n\n const params = `?equipment_id=${equipData?.equipments_id}`;\n\n await updateEquipmentDetails(params, obj)\n .then((res) => {\n const response = res?.data;\n if (activePage === 'explore') setSelectedTab(0);\n if (activePage === 'equipment') setSelectedTab(1);\n if (activePage === 'buildingOverview') setSelectedTab(0);\n if (response?.success) {\n UserStore.update((s) => {\n s.showNotification = true;\n s.notificationMessage = 'Equipment updated successfully!';\n s.notificationType = 'success';\n });\n const arr = handleAPIRequestBody(startDate, endDate, timeZone, startTime, endTime);\n fetchEquipmentData(arr);\n } else {\n UserStore.update((s) => {\n s.showNotification = true;\n s.notificationMessage = response?.message\n ? 'Unable to update Equipment.'\n : res\n ? 'Unable to update Equipment.'\n : 'Unable to update Equipment due to Internal Server Error!.';\n s.notificationType = 'error';\n });\n }\n })\n .catch((error) => {})\n .finally(() => {\n setProcessing(false);\n handleChartClose();\n setEquipData({});\n setOriginalEquipData({});\n });\n };\n\n // Close Equipment Modal\n const handleCloseWithoutSave = () => {\n setOriginalEquipData({});\n setEquipData({});\n setSelectedUnit(metric[0].unit);\n setConsumption(metric[0].value);\n setDeviceData([]);\n setSelectedConsumptionLabel(metric[0].Consumption);\n setOriginalEquipData({});\n if (activePage === 'explore') {\n setSelectedTab(0);\n }\n if (activePage === 'equipment') {\n setSelectedTab(1);\n }\n if (activePage === 'buildingOverview') {\n setSelectedTab(0);\n }\n setProcessing(false);\n handleChartClose();\n };\n\n // Fetch Equipment Chart V1 API\n const fetchEquipmentChartV1 = async (equipId, equiName) => {\n setIsEquipDataFetched(true);\n setDeviceData([]);\n\n const payload = handleAPIRequestBody(startDate, endDate, timeZone, startTime, endTime);\n\n const params = `?building_id=${bldgId}&consumption=${\n selectedConsumption === 'rmsCurrentMilliAmps' && equipData?.device_type === 'active'\n ? 'mAh'\n : selectedConsumption\n }&equipment_id=${equipId}&divisible_by=1000${\n selectedConsumption === 'rmsCurrentMilliAmps' ? '&detailed=true' : ''\n }`;\n\n await fetchExploreEquipmentChart(payload, params)\n .then((res) => {\n const response = res?.data;\n\n if (response?.success) {\n const { data } = response;\n\n if (!data || data.length === 0) return;\n\n if (selectedConsumption === 'rmsCurrentMilliAmps') {\n let chartData = [];\n\n data.forEach((sensorObj) => {\n const newSensorMappedData = sensorObj?.data.map((el) => ({\n x: new Date(el?.time_stamp).getTime(),\n y: el?.consumption === '' ? null : el?.consumption,\n }));\n\n chartData.push({\n name: `Sensor ${sensorObj?.index_alias}`,\n data: newSensorMappedData,\n });\n });\n\n setDeviceData(chartData);\n }\n\n if (selectedConsumption !== 'rmsCurrentMilliAmps') {\n const newEquipMappedData = data.map((el) => ({\n x: new Date(el?.time_stamp).getTime(),\n y: el?.consumption === '' ? null : el?.consumption,\n }));\n\n const recordToInsert = {\n name: equiName,\n data: newEquipMappedData,\n };\n\n setDeviceData([recordToInsert]);\n }\n }\n })\n .catch((error) => {})\n .finally(() => {\n setIsEquipDataFetched(false);\n });\n };\n\n // Fetch Equipment Chart V2 API\n const fetchEquipmentChartV2 = async (equipId, equiName) => {\n if (!equipId || !bldgId || !startDate || !endDate || !selectedConsumption) {\n return;\n }\n\n setIsEquipDataFetched(true);\n setDeviceData([]);\n const { dateFrom, dateTo } = handleAPIRequestParams(startDate, endDate, startTime, endTime);\n const payload = {\n date_from: encodeURIComponent(dateFrom),\n date_to: encodeURIComponent(dateTo),\n tz_info: encodeURIComponent(timeZone),\n };\n\n const params = `/${equipId}?building_id=${bldgId}&metric=${selectedConsumption}&date_from=${payload?.date_from}&date_to=${payload?.date_to}&tz_info=${payload?.tz_info}`;\n\n await fetchEquipmentChartDataV2(params)\n .then((res) => {\n const response = res?.data;\n\n if (response?.success) {\n const { data } = response;\n\n if (!data || data.length === 0) {\n return;\n }\n\n const isMultipleSensorData = metricsWithMultipleSensors.includes(selectedConsumption);\n\n if (isMultipleSensorData) {\n const aggregatedSensorData = [];\n\n data.forEach((sensorObj) => {\n const mappedSensorData = sensorObj?.data.map((el) => ({\n x: new Date(el?.time_stamp).getTime(),\n y: handleDataConversion(el?.consumption, selectedConsumption),\n }));\n\n aggregatedSensorData.push({\n name: `Sensor ${sensorObj?.index_alias}`,\n data: mappedSensorData,\n });\n });\n\n setDeviceData(aggregatedSensorData);\n } else {\n const mappedEquipmentData = data.map((el) => ({\n x: new Date(el?.time_stamp).getTime(),\n y: handleDataConversion(el?.consumption, selectedConsumption),\n }));\n\n const equipmentRecord = {\n name: equiName,\n data: mappedEquipmentData,\n };\n\n setDeviceData([equipmentRecord]);\n }\n }\n })\n .catch((error) => {})\n .finally(() => {\n setIsEquipDataFetched(false);\n });\n };\n\n const redirectToConfigDevicePageLink = (equipDeviceId, deviceType) => {\n if (equipDeviceId === '' || equipDeviceId === null || deviceType === '') {\n return '';\n }\n\n if (deviceType === 'smart-plugs') {\n return `/settings/smart-plugs/single/${bldgId}/${equipDeviceId}`;\n }\n\n if (deviceType === 'smart-meters') {\n return `/settings/smart-meters/single/${bldgId}/${equipDeviceId}`;\n }\n };\n\n const redirectToConfigDevicePage = (equipDeviceId, deviceType) => {\n if (equipDeviceId === '' || equipDeviceId === null) {\n return;\n }\n\n if (deviceType === 'panels') {\n const panelId = equipBreakerLink[0]?.panel_id;\n\n if (panelId) history.push({ pathname: `/settings/panels/edit-panel/distribution/${panelId}` });\n }\n\n if (deviceType === 'smart-meters') {\n history.push({ pathname: `/settings/smart-meters/single/${bldgId}/${equipDeviceId}` });\n }\n };\n\n const fetchActiveDeviceSensorData = async (device_id) => {\n if (!device_id) return;\n\n const params = `?device_id=${device_id}`;\n\n await updateListSensor(params)\n .then((res) => {\n const response = res?.data;\n if (response) setSensors(response);\n })\n .catch((error) => {});\n };\n\n const fetchEquipmentDetails = async (equip_id) => {\n if (!equip_id) return;\n\n setFetching(true);\n const params = `/${equip_id}`;\n\n await getEquipmentDetails(params)\n .then((res) => {\n const { success: isSuccessful, data } = res?.data;\n if (isSuccessful && data && data?.equipments_id) {\n if (data?.location_served) data.location_served = data.location_served[0] ?? null;\n setOriginalEquipData(data);\n setEquipData(data);\n setEquipBreakerLink(data?.breaker_link);\n\n if (data?.device_type === 'active' && data?.device_id) {\n fetchActiveDeviceSensorData(data?.device_id);\n }\n }\n })\n .catch((error) => {})\n .finally(() => {\n setFetching(false);\n });\n };\n\n const fetchEquipmentKPIDataV1 = async (equipId) => {\n if (!equipId) return;\n\n setFetchingMetaData(true);\n setEquipMetaData({});\n\n const params = `?building_id=${bldgId}&equipment_id=${equipId}&consumption=energy`;\n const payload = handleAPIRequestBody(startDate, endDate, timeZone, startTime, endTime);\n\n await updateExploreEquipmentYTDUsage(payload, params)\n .then((res) => {\n const response = res?.data;\n if (response?.success) {\n if (response?.data && response?.data.length !== 0) {\n const data = response?.data[0];\n setEquipMetaData({\n total_energy_consumption: data?.ytd?.ytd,\n peak_power: {\n avgPower: data?.ytd_peak?.power,\n timestamp: data?.ytd_peak?.time_stamp,\n },\n });\n }\n }\n })\n .catch((err) => {})\n .finally(() => {\n setFetchingMetaData(false);\n });\n };\n\n const fetchEquipmentKPIDataV2 = async (equip_id) => {\n if (!equip_id) return;\n\n setFetchingMetaData(true);\n setEquipMetaData({});\n const { dateFrom, dateTo } = handleAPIRequestParams(startDate, endDate, startTime, endTime);\n const params = `?building_id=${bldgId}&date_from=${encodeURIComponent(dateFrom)}&date_to=${encodeURIComponent(\n dateTo\n )}&tz_info=${encodeURIComponent(timeZone)}`;\n\n await fetchEquipmentKPIs(params, equip_id)\n .then((res) => {\n const { success: isSuccessful, data } = res?.data;\n if (isSuccessful && data) {\n setEquipMetaData(data);\n }\n })\n .catch((err) => {})\n .finally(() => {\n setFetchingMetaData(false);\n });\n };\n\n const fetchMetadata = async () => {\n await getMetadataRequest(bldgId)\n .then((res) => {\n const { end_uses, equipment_type, location } = res?.data;\n\n const endUseData = end_uses.map((el) => {\n return {\n label: el?.name,\n value: el?.end_use_id,\n };\n });\n\n const locationDataLocal = location.map((el) => {\n return {\n label: el?.location_name,\n value: el?.location_id,\n };\n });\n\n const equipTypeData = equipment_type.map((el) => {\n return {\n label: el?.equipment_type,\n value: el?.equipment_id,\n end_use_name: el?.end_use_name,\n };\n });\n const sortedLocationData = locationDataLocal.slice().sort((a, b) => a.label.localeCompare(b.label));\n\n setEquipmentTypeData(equipTypeData);\n setEndUse(endUseData);\n setLocationData(sortedLocationData);\n })\n .finally(() => {});\n };\n\n useEffect(() => {\n if (!selectedEquipObj?.equipment_id || !showEquipmentChart) return;\n\n fetchEquipmentDetails(selectedEquipObj?.equipment_id);\n }, [selectedEquipObj]);\n\n useEffect(() => {\n if (!selectedEquipObj?.equipment_id || !showEquipmentChart) return;\n if (!selectedConsumption || !bldgId || !startDate || !endDate) return;\n\n const { equipment_id, equipment_name } = selectedEquipObj;\n\n fetchMetadata();\n\n // if (selectedEquipObj?.device_type === 'active') {\n // fetchEquipmentChartV1(equipment_id, equipment_name);\n // fetchEquipmentKPIDataV1(equipment_id);\n // } else {\n // fetchEquipmentChartV2(equipment_id, equipment_name);\n // fetchEquipmentKPIDataV2(equipment_id);\n // }\n\n fetchEquipmentChartV1(equipment_id, equipment_name);\n fetchEquipmentKPIDataV1(equipment_id);\n }, [selectedEquipObj, startDate, endDate, startTime, endTime, selectedConsumption, bldgId]);\n\n useEffect(() => {\n let timeout;\n\n if (notifyObj?.type) {\n timeout = setTimeout(() => {\n setNotifyObj(null);\n }, 5000);\n }\n\n return () => {\n if (timeout) {\n clearTimeout(timeout);\n }\n };\n }, [notifyObj, setNotifyObj]);\n\n return (\n \n \n \n
\n \n \n\n \n \n {originalEquipData?.location}\n \n \n {originalEquipData?.equipments_name}\n \n
\n \n setSelectedTab(0)}>\n Metrics\n \n setSelectedTab(1)}>\n Configure\n \n
\n \n {/* Commented below code as part of Ticket PLT-1373: Hide \"Turn Off\" button on equipment modal */}\n {/* {equipData?.device_type === 'active' && (\n
\n \n
\n )} */}\n\n \n
\n\n {selectedTab === 1 && (\n \n
\n )}\n \n {selectedTab === 0 && (\n \n
\n )}\n\n {selectedTab === 1 && (\n \n
\n \n \n
\n\n {isEquipDataFetched ? (\n \n \n Device : \n \n \n {equipData?.device_mac}\n \n
\n \n
\n \n {\n if (e.value === 'passive-power') {\n return;\n }\n setConsumption(e.value);\n handleUnitChange(e.value);\n handleConsumptionChange(e.value);\n }}\n />\n
\n \n
\n ) : (\n \n
\n \n \n Equipment Details\n \n\n \n
\n )}\n {equipBreakerLink?.length === 2 && (\n \n
\n\n \n Equipment Name \n {\n handleDataChange('equipments_name', e.target.value);\n }}\n disabled={!(isSuperAdmin || canUserEdit)}\n />\n
\n\n \n Equipment Type \n el?.end_use_name === 'Plug')\n : equipmentTypeData\n }\n currentValue={equipmentTypeData.filter(\n (option) => option.value === equipData?.equipments_type_id\n )}\n onChange={(e) => {\n handleDataChange('equipments_type_id', e.value);\n }}\n isSearchable={true}\n customSearchCallback={({ data, query }) =>\n defaultDropdownSearch(data, query?.value)\n }\n disabled={!(isSuperAdmin || canUserEdit)}\n />\n
\n\n {equipData?.device_type !== 'active' && (\n \n \n End Use Category\n \n option.value === equipData?.end_use_id\n )}\n onChange={(e) => {\n handleDataChange('end_use_id', e.value);\n }}\n isSearchable={true}\n disabled={!(isSuperAdmin || canUserEdit)}\n />\n
\n )}\n \n
\n\n \n Manufacturer \n {\n handleDataChange('manufacturer', e.target.value);\n }}\n disabled={!(isSuperAdmin || canUserEdit)}\n />\n
\n\n \n Model \n {\n handleDataChange('model', e.target.value);\n }}\n disabled={!(isSuperAdmin || canUserEdit)}\n />\n
\n\n \n Serial \n {\n handleDataChange('serial', e.target.value);\n }}\n disabled={!(isSuperAdmin || canUserEdit)}\n />\n
\n \n
\n\n \n option.value === equipData?.location_id\n )}\n onChange={(e) => {\n handleDataChange('location_id', e.value);\n }}\n isSearchable={true}\n customSearchCallback={({ data, query }) =>\n defaultDropdownSearch(data, query?.value)\n }\n disabled={!(isSuperAdmin || canUserEdit)}\n />\n {equipData?.location_id ? (\n <>\n handleDataChange('location_id', '')}>\n {`Reset Equipment Location`}\n \n \n ) : null}\n
\n\n \n \n Equipment Location\n \n
\n \n option.value === equipData?.location_served\n )}\n onChange={(e) => {\n handleDataChange('location_served', e.value);\n }}\n isSearchable={true}\n customSearchCallback={({ data, query }) =>\n defaultDropdownSearch(data, query?.value)\n }\n disabled={!(isSuperAdmin || canUserEdit)}\n />\n {equipData?.location_served ? (\n <>\n handleDataChange('location_served', null)}>\n {`Reset Location Served`}\n \n \n ) : null}\n
\n \n \n Location Served\n \n
\n \n \n Applied Rule\n \n option.value === 'desktop-pc'\n )}\n isSearchable={false}\n customSearchCallback={({ data, query }) =>\n defaultDropdownSearch(data, query?.value)\n }\n disabled={!(isSuperAdmin || canUserEdit)}\n />\n\n \n The rule applied to this equipment to control when it is on.\n \n
\n \n Tags \n {\n handleDataChange('tags', value);\n }}\n name=\"tag\"\n placeHolder=\"+ Add Tag\"\n disabled={!(isSuperAdmin || canUserEdit)}\n />\n
\n\n \n Notes \n {\n handleDataChange('note', e.target.value);\n }}\n inputClassName=\"pt-2\"\n disabled={!(isSuperAdmin || canUserEdit)}\n />\n
\n \n\n \n \n
\n \n {equipBreakerLink?.length === 0 ? (\n \n
\n ) : (\n <>\n {equipBreakerLink?.length === 1 && (\n \n \n
\n \n \n
\n \n \n \n
\n \n \n \n
\n \n
\n {equipBreakerLink[0]?.breaker_number}
\n \n
\n \n
\n {`${equipBreakerLink[0]?.rated_amps}A`}
\n {`${equipBreakerLink[0]?.voltage}V`}
\n \n \n \n
\n \n
\n {equipBreakerLink[0]?.breaker_number}
\n {equipBreakerLink[1]?.breaker_number}
\n \n
\n \n
\n {`${equipBreakerLink[0]?.rated_amps}A`}
\n {`${equipBreakerLink[0]?.voltage}V`}
\n \n \n \n \n
\n \n )}\n {equipBreakerLink?.length === 3 && (\n \n
\n {equipBreakerLink[0]?.breaker_number}
\n {equipBreakerLink[1]?.breaker_number}
\n {equipBreakerLink[2]?.breaker_number}
\n \n
\n \n
\n {`${equipBreakerLink[0]?.rated_amps}A`}
\n {`${equipBreakerLink[0]?.voltage}V`}
\n \n \n \n \n
\n \n \n )}\n \n )}\n\n \n \n Energy Monitoring\n \n\n {\n redirectToConfigDevicePage(equipData?.device_id, 'panels');\n }}\n disabled={\n equipData?.device_type === '' ||\n equipBreakerLink?.length === 0\n }\n />\n
\n\n {equipBreakerLink?.length === 0 ? (\n <>\n ) : (\n \n
\n )}\n \n \n )}\n\n \n
\n \n \n Phases\n \n \n {equipBreakerLink[0]?.breaker_type}\n \n
\n \n \n Installed at\n \n \n {equipBreakerLink?.length === 1 &&\n `${equipBreakerLink[0]?.panel_name} \n > Breaker ${equipBreakerLink[0]?.breaker_number}`}\n {equipBreakerLink?.length === 2 &&\n `${equipBreakerLink[0]?.panel_name} \n > Breakers ${equipBreakerLink[0]?.breaker_number}, ${equipBreakerLink[1]?.breaker_number}`}\n {equipBreakerLink?.length === 3 &&\n `${equipBreakerLink[0]?.panel_name} \n > Breakers ${equipBreakerLink[0]?.breaker_number}, ${equipBreakerLink[1]?.breaker_number}, ${equipBreakerLink[2]?.breaker_number}`}\n \n
\n \n {isFetching ? (\n <>\n
\n\n
\n\n
\n \n \n \n )}\n \n \n\n {notifyObj && \n
\n\n \n
\n\n \n\n
\n
\n\n \n\n
\n {props.label && (\n <>\n \n {props.label}\n \n \n {props.error}\n \n \n )}\n
\n );\n};\n\nTextarea.propTypes = {\n iconUrl: PropTypes.string,\n elementEnd: PropTypes.node,\n error: PropTypes.string,\n label: PropTypes.string,\n};\n\nexport default Textarea;\n","var _path;\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nimport * as React from \"react\";\nfunction SvgBan(_ref, svgRef) {\n let {\n title,\n titleId,\n ...props\n } = _ref;\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 14,\n height: 14,\n viewBox: \"0 0 14 14\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M13.6663 7.00016C13.6663 10.6981 10.6715 13.6668 6.99967 13.6668C3.30176 13.6668 0.333008 10.6981 0.333008 7.00016C0.333008 3.32829 3.30176 0.333496 6.99967 0.333496C10.6715 0.333496 13.6663 3.32829 13.6663 7.00016ZM2.72884 3.64079C1.99967 4.57829 1.58301 5.75016 1.58301 7.00016C1.58301 9.99496 4.00488 12.4168 6.99967 12.4168C8.24967 12.4168 9.42155 12.0002 10.359 11.271L2.72884 3.64079ZM12.4163 7.00016C12.4163 4.03141 9.96842 1.5835 6.99967 1.5835C5.72363 1.5835 4.55176 2.0262 3.61426 2.75537L11.2445 10.3856C11.9736 9.44808 12.4163 8.2762 12.4163 7.00016Z\",\n fill: \"#1D2939\"\n })));\n}\nconst ForwardRef = /*#__PURE__*/React.forwardRef(SvgBan);\nexport default __webpack_public_path__ + \"static/media/ban.2bb9ba21.svg\";\nexport { ForwardRef as ReactComponent };","import { useEffect } from 'react';\n\nfunction useClickOutside(ref, events, fn) {\n useEffect(() => {\n const onClickOutside = (event) => {\n if (!ref.current || !ref.current.contains(event.target)) {\n fn(event);\n }\n };\n\n events.forEach((e) => document.addEventListener(e, onClickOutside, true));\n return () => events.forEach((e) => document.removeEventListener(e, onClickOutside, true));\n }, [ref, events, fn]);\n}\n\nexport default useClickOutside;\n","var _path;\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nimport * as React from \"react\";\nfunction SvgCaretDown(_ref, svgRef) {\n let {\n title,\n titleId,\n ...props\n } = _ref;\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 12,\n height: 7,\n viewBox: \"0 0 12 7\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M6.25 6.25C6.00391 6.25 5.78516 6.16797 5.62109 6.00391L1.24609 1.62891C0.890625 1.30078 0.890625 0.726562 1.24609 0.398438C1.57422 0.0429688 2.14844 0.0429688 2.47656 0.398438L6.25 4.14453L9.99609 0.398438C10.3242 0.0429688 10.8984 0.0429688 11.2266 0.398438C11.582 0.726562 11.582 1.30078 11.2266 1.62891L6.85156 6.00391C6.6875 6.16797 6.46875 6.25 6.25 6.25Z\",\n fill: \"#D0D5DD\"\n })));\n}\nconst ForwardRef = /*#__PURE__*/React.forwardRef(SvgCaretDown);\nexport default __webpack_public_path__ + \"static/media/caretDown.718bc414.svg\";\nexport { ForwardRef as ReactComponent };","var _path;\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nimport * as React from \"react\";\nfunction SvgCloseButton(_ref, svgRef) {\n let {\n title,\n titleId,\n ...props\n } = _ref;\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 10,\n height: 10,\n viewBox: \"0 0 10 10\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n d: \"M0.52827 0.528514C0.788619 0.268165 1.21073 0.268165 1.47108 0.528514L4.99967 4.05711L8.52827 0.528514C8.78862 0.268165 9.21073 0.268165 9.47108 0.528514C9.73143 0.788864 9.73143 1.21097 9.47108 1.47132L5.94248 4.99992L9.47108 8.52851C9.73143 8.78886 9.73143 9.21097 9.47108 9.47132C9.21073 9.73167 8.78862 9.73167 8.52827 9.47132L4.99967 5.94273L1.47108 9.47132C1.21073 9.73167 0.788619 9.73167 0.52827 9.47132C0.26792 9.21097 0.26792 8.78886 0.52827 8.52851L4.05687 4.99992L0.52827 1.47132C0.26792 1.21097 0.26792 0.788864 0.52827 0.528514Z\"\n })));\n}\nconst ForwardRef = /*#__PURE__*/React.forwardRef(SvgCloseButton);\nexport default __webpack_public_path__ + \"static/media/close-button.4725f55e.svg\";\nexport { ForwardRef as ReactComponent };","export const handleDataConversion = (value, metricType = 'energy') => {\n if (value === '') {\n return null;\n }\n\n const noConversionRequired = ['runtime', 'starts'];\n const multiplyBy100 = ['phase_imbalance_percent', 'min_phase_imbalance_percent', 'max_phase_imbalance_percent'];\n\n if (noConversionRequired.includes(metricType)) {\n return value;\n }\n\n if (multiplyBy100.includes(metricType)) {\n return value * 100;\n }\n\n return value / 1000;\n};\n","import React, { useState } from 'react';\nimport classNames from 'classnames';\nimport './ButtonGroup.scss';\nimport Typography from '../typography';\n\nconst ButtonGroup = ({ buttons, handleButtonClick, currentButtonId, noPadding }) => {\n const [clickedId, setClickedId] = useState(currentButtonId);\n const handleClick = (id) => {\n setClickedId(id);\n handleButtonClick(id);\n };\n const buttonGroupWrapper = \"button-group-wrapper\";\n const paddingStyle =noPadding ? 'no-padding' : null;\n return (\n \n {iconUrl && }\n
\n\n {!!props.error && (\n <>\n \n
\n );\n};\n\nexport default ButtonGroup;\n","var _path;\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nimport * as React from \"react\";\nfunction SvgPlus(_ref, svgRef) {\n let {\n title,\n titleId,\n ...props\n } = _ref;\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 20,\n height: 20,\n viewBox: \"0 0 20 20\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n d: \"M10 3.33334C10.4603 3.33334 10.8334 3.70644 10.8334 4.16668V9.16668H15.8334C16.2936 9.16668 16.6667 9.53977 16.6667 10C16.6667 10.4602 16.2936 10.8333 15.8334 10.8333H10.8334V15.8333C10.8334 16.2936 10.4603 16.6667 10 16.6667C9.5398 16.6667 9.16671 16.2936 9.16671 15.8333V10.8333H4.16671C3.70647 10.8333 3.33337 10.4602 3.33337 10C3.33337 9.53977 3.70647 9.16668 4.16671 9.16668H9.16671V4.16668C9.16671 3.70644 9.5398 3.33334 10 3.33334Z\",\n fill: \"#626B7F\"\n })));\n}\nconst ForwardRef = /*#__PURE__*/React.forwardRef(SvgPlus);\nexport default __webpack_public_path__ + \"static/media/plus.2fcaeb62.svg\";\nexport { ForwardRef as ReactComponent };","import React, { useEffect, useState } from 'react';\nimport Modal from 'react-bootstrap/Modal';\n\nimport { Button } from '../../../sharedComponents/button';\nimport Typography from '../../../sharedComponents/typography';\nimport Brick from '../../../sharedComponents/brick';\n\nconst MoveLayout = (props) => {\n const { isModalOpen = false, onCancel, onSave, oldPath, newPath, name } = props;\n\n return (\n - \n {buttons.map((buttonItem, i) => {\n const iconAlignment = buttonItem.iconAlignment == 'right' ? 'icon-right' : 'icon-left';\n const iconPlacement =\n iconAlignment.length && buttonItem.label && buttonItem.icon ? iconAlignment : null;\n const disabledClass = buttonItem.disabled ? 'disabled' : null;\n return (\n
\n All child spaces of {name} will also be moved.\n
\n
\n \n );\n});\n\nexport const NotificationProvider = ({ children }) => {\n const [instances, setInstances] = useState([]);\n\n const triggerSnackbar = ({ title, description, type, duration, id = generateID(), ...props }) => {\n setInstances((oldState) => {\n return [...oldState, { title, description, type, duration, id, ...props }];\n });\n };\n\n const openSnackbar = (snackbarProps) => {\n triggerSnackbar(snackbarProps);\n };\n\n // Closes the snackbar\n const closeSnackbar = ({ id }) => {\n setInstances((oldState) => {\n return oldState.filter((instance) => instance.id !== id);\n });\n };\n\n // Returns the Provider that must wrap the application\n return (\n \n {instances.map((props) => (\n
\n \n {isFetching ? (\n \n
\n \n );\n};\n\nexport default MetadataContainer;\n","import React from 'react';\nimport moment from 'moment';\nimport Skeleton from 'react-loading-skeleton';\nimport { formatConsumptionValue } from '../../helpers/explorehelpers';\nimport { UserStore } from '../../store/UserStore';\nimport { DateRangeStore } from '../../store/DateRangeStore';\nimport Typography from '../../sharedComponents/typography';\n\nconst EnergyMetadataContainer = ({ metadata = {}, isFetching = false }) => {\n const { total_energy_consumption, peak_power = {}, square_footage = 1 } = metadata;\n\n const startDate = DateRangeStore.useState((s) => s.startDate);\n const endDate = DateRangeStore.useState((s) => s.endDate);\n\n const userPrefDateFormat = UserStore.useState((s) => s.dateFormat);\n const userPrefTimeFormat = UserStore.useState((s) => s.timeFormat);\n const userPrefUnits = UserStore.useState((s) => s.unit);\n\n const dateFormat = userPrefDateFormat === `DD-MM-YYYY` ? `D MMM` : `MMM D`;\n const totalConsumptionValue = total_energy_consumption\n ? formatConsumptionValue(total_energy_consumption / 1000, 0)\n : 0;\n\n const formattedSquareFootage = Number(square_footage) < 1 ? 1 : Number(square_footage);\n\n const calculatedConsumptionPerSquare = total_energy_consumption\n ? formatConsumptionValue(Number(total_energy_consumption / 1000) / formattedSquareFootage, 0)\n : 0;\n\n const powerConsumptionValue = peak_power?.power ? formatConsumptionValue(peak_power?.power / 1000000, 2) : 0;\n\n return (\n <>\n \n
\n )}\n \n
\n \n Space Type: \n \n {metadata?.space_type_name\n ? formatConsumptionValue(metadata?.space_type_name)\n : '-'}\n \n
\n\n \n Equipment Count: \n \n {metadata?.equipment_count\n ? formatConsumptionValue(Math.round(metadata?.equipment_count))\n : '-'}\n \n
\n\n \n Tags: \n \n {Array.isArray(metadata?.tag) && metadata.tag.length > 0\n ? formatConsumptionValue(metadata.tag.join(', '))\n : 'None'}\n \n
\n\n \n {`Square ${userPrefUnits === 'si' ? 'Meter' : 'Footage'\n }:`} \n \n {formatSquare(metadata?.square_footage)}\n \n
\n \n
\n \n );\n};\n\nexport default EnergyMetadataContainer;\n","import React, { useEffect, useState, useCallback } from 'react';\nimport Brick from '../../sharedComponents/brick';\nimport { Progress, UncontrolledTooltip } from 'reactstrap';\nimport { DataTableWidget } from '../../sharedComponents/dataTableWidget';\nimport SkeletonLoader from '../../components/SkeletonLoader';\nimport { formatConsumptionValue, handleAPIRequestParams, pageListSizes } from '../../helpers/helpers';\nimport Typography from '../../sharedComponents/typography';\nimport { UNITS } from '../../constants/units';\nimport { TrendsBadge } from '../../sharedComponents/trendsBadge';\nimport { DateRangeStore } from '../../store/DateRangeStore';\nimport { BuildingStore } from '../../store/BuildingStore';\nimport { UserStore } from '../../store/UserStore';\nimport { useParams } from 'react-router-dom';\nimport useCSVDownload from '../../sharedComponents/hooks/useCSVDownload';\nimport { getEquipmentSpaceModuleTableCSVExport } from '../../utils/tablesExport';\nimport { fetchEquipmentBySpace, fetchEquipmentFiltersBySpace } from './services';\nimport { Badge } from '../../sharedComponents/badge';\nimport EquipChartModal from '../chartModal/EquipChartModal';\nimport { FILTER_TYPES } from '../../sharedComponents/dataTableWidget/constants';\nimport _ from 'lodash';\n\nconst EquipmentTable = ({ spaceId }) => {\n const { download } = useCSVDownload();\n const startDate = DateRangeStore.useState((s) => s.startDate);\n const endDate = DateRangeStore.useState((s) => s.endDate);\n const startTime = DateRangeStore.useState((s) => s.startTime);\n const endTime = DateRangeStore.useState((s) => s.endTime);\n\n const timeZone = BuildingStore.useState((s) => s.BldgTimeZone);\n const bldgName = BuildingStore.useState((s) => s.BldgName);\n const userPrefUnits = UserStore.useState((s) => s.unit);\n\n const { bldgId } = useParams();\n\n const [search, setSearch] = useState('');\n const [sortBy, setSortBy] = useState({});\n const [pageNo, setPageNo] = useState(1);\n const [pageSize, setPageSize] = useState(20);\n const [totalItems, setTotalItems] = useState(0);\n const [equipments, setEquipments] = useState([]);\n const [equipmentsLoading, setEquipmentsLoading] = useState([]);\n const [isCSVDownloading, setDownloadingCSVData] = useState(false);\n\n const [showEquipmentChart, setShowEquipmentChart] = useState(false);\n const handleChartOpen = () => setShowEquipmentChart(true);\n const handleChartClose = () => setShowEquipmentChart(false);\n const [equipmentFilter, setEquipmentFilter] = useState({});\n const [selectedModalTab, setSelectedModalTab] = useState(0);\n\n // filters\n const [loadingFilters, setLoadingFilters] = useState(false);\n const [filterOptions, setFilterOptions] = useState([]);\n const [spaceTypeIds, setSpaceTypeIds] = useState([]);\n const [equipmentTypeIds, setEquipmentTypeIds] = useState([]);\n const [endUsesCategoriesIds, setEndUsesCategoriesIds] = useState([]);\n const [selectedTags, setSelectedTags] = useState([]);\n\n const [minConsumption, setMinConsumption] = useState(0);\n const [maxConsumption, setMaxConsumption] = useState(0);\n const [flagAPIConsumption, setFlagAPIConsumption] = useState(0);\n\n const getFilters = (query) => {\n if (Array.isArray(spaceTypeIds) && spaceTypeIds.length > 0) query.spaceTypeIds = spaceTypeIds;\n if (Array.isArray(equipmentTypeIds) && equipmentTypeIds.length > 0) query.equipmentTypeIds = equipmentTypeIds;\n if (Array.isArray(endUsesCategoriesIds) && endUsesCategoriesIds.length > 0)\n query.endUsesCategoriesIds = endUsesCategoriesIds;\n if (Array.isArray(selectedTags) && selectedTags.length > 0) query.selectedTags = selectedTags;\n\n if (isFinite(minConsumption) && isFinite(maxConsumption) && maxConsumption !== 0) {\n query.minConsumption = minConsumption;\n query.maxConsumption = maxConsumption;\n }\n\n if (search) query.search = search;\n\n return query;\n };\n\n const fetchEquipDataList = async () => {\n setEquipmentsLoading(true);\n\n try {\n const orderedBy = sortBy.name === undefined || sortBy.method === null ? 'consumption' : sortBy.name;\n const sortedBy = sortBy.method === undefined || sortBy.method === null ? 'dce' : sortBy.method;\n\n const { dateFrom, dateTo } = handleAPIRequestParams(startDate, endDate, startTime, endTime);\n\n const query = {\n bldgId,\n page: pageNo,\n size: pageSize,\n dateFrom: encodeURIComponent(dateFrom),\n dateTo: encodeURIComponent(dateTo),\n timeZone,\n orderedBy,\n sortedBy,\n };\n\n const queryWithFilters = getFilters(query);\n\n const data = await fetchEquipmentBySpace(spaceId, queryWithFilters);\n\n if (data && Array.isArray(data) && data.length !== 0) {\n // should be done on backend\n const totalConsumption = data.reduce((reducer, equipment) => {\n return reducer + Math.round(equipment?.total_consumption?.now);\n }, 0);\n\n const mappedData = data.map((equipment) => {\n equipment.total_all_consumption = totalConsumption;\n return equipment;\n });\n\n setTotalItems(mappedData.length);\n setEquipments(mappedData);\n }\n } catch {\n setEquipments([]);\n setTotalItems(0);\n }\n\n setEquipmentsLoading(false);\n };\n\n const filterHandler = (setter, options) => {\n setter(options.map(({ value }) => value));\n setPageNo(1);\n };\n\n const fetchFilters = async () => {\n setLoadingFilters(true);\n\n try {\n const { dateFrom, dateTo } = handleAPIRequestParams(startDate, endDate, startTime, endTime);\n\n const query = {\n bldgId,\n dateFrom: encodeURIComponent(dateFrom),\n dateTo: encodeURIComponent(dateTo),\n tzInfo: timeZone,\n spaceTypeIds,\n };\n\n const queryWithFilters = getFilters(query);\n\n const response = await fetchEquipmentFiltersBySpace(spaceId, queryWithFilters);\n\n const filterOptionsServer = response[0];\n\n const filterOptions = [];\n\n if (isFinite(filterOptionsServer?.min_new_energy) && isFinite(filterOptionsServer?.max_new_energy)) {\n const minResponseNewEnergy = Math.abs(Math.round(filterOptionsServer.min_new_energy / 1000));\n const maxResponseNewEnergy = Math.abs(Math.round(filterOptionsServer.max_new_energy / 1000));\n\n filterOptions.push({\n label: 'Energy Consumption',\n value: 'consumption',\n placeholder: 'All Consumptions',\n filterType: FILTER_TYPES.RANGE_SELECTOR,\n filterOptions: [minResponseNewEnergy, maxResponseNewEnergy],\n componentProps: {\n prefix: ' kWh',\n title: 'Consumption',\n min: minResponseNewEnergy,\n max: maxResponseNewEnergy,\n range: [minResponseNewEnergy, maxResponseNewEnergy],\n withTrendsFilter: false,\n },\n onClose: async function onClose(options) {\n setMinConsumption(options[0]);\n setMaxConsumption(options[1]);\n setFlagAPIConsumption(options[0] + options[1]);\n },\n onDelete: () => {\n setMinConsumption(0);\n setMaxConsumption(0);\n setFlagAPIConsumption(0);\n setPageNo(1);\n },\n });\n }\n\n if (Array.isArray(filterOptionsServer?.space_types) && filterOptionsServer.space_types.length > 0)\n filterOptions.push({\n label: 'Space Type',\n value: 'space_types',\n placeholder: 'All Space Types',\n filterType: FILTER_TYPES.MULTISELECT,\n filterOptions: _.chain(filterOptionsServer?.space_types)\n .sortBy('space_type_name')\n .map((filterItem) => ({\n value: filterItem?.space_type_id,\n label: filterItem?.space_type_name,\n }))\n .value(),\n onClose: (options) => filterHandler(setSpaceTypeIds, options),\n onDelete: () => {\n setPageNo(1);\n setSpaceTypeIds([]);\n },\n });\n\n if (Array.isArray(filterOptionsServer?.equipment_types) && filterOptionsServer.equipment_types.length > 0)\n filterOptions.push({\n label: 'Equipment Type',\n value: 'equipment_types',\n placeholder: 'All Equipment Types',\n filterType: FILTER_TYPES.MULTISELECT,\n filterOptions: _.chain(filterOptionsServer?.equipment_types)\n .sortBy('equipment_type_name')\n .map((filterItem) => ({\n value: filterItem?.equipment_type_id,\n label: filterItem?.equipment_type_name,\n }))\n .value(),\n onClose: (options) => filterHandler(setEquipmentTypeIds, options),\n onDelete: () => {\n setPageNo(1);\n setEquipmentTypeIds([]);\n },\n });\n\n if (Array.isArray(filterOptionsServer?.end_uses) && filterOptionsServer.end_uses.length > 0)\n filterOptions.push({\n label: 'End Use Category',\n value: 'end_uses',\n placeholder: 'All End Use Categories',\n filterType: FILTER_TYPES.MULTISELECT,\n filterOptions: _.chain(filterOptionsServer?.end_uses)\n .sortBy('end_use_name')\n .map((filterItem) => ({\n value: filterItem?.end_use_id,\n label: filterItem?.end_use_name,\n }))\n .value(),\n onClose: (options) => filterHandler(setEndUsesCategoriesIds, options),\n onDelete: () => {\n setPageNo(1);\n setEndUsesCategoriesIds([]);\n },\n });\n\n if (Array.isArray(filterOptionsServer?.tags) && filterOptionsServer.tags.length > 0)\n filterOptions.push({\n label: 'Tags',\n value: 'tags',\n placeholder: 'All tags',\n filterType: FILTER_TYPES.MULTISELECT,\n filterOptions: _.chain(filterOptionsServer?.tags)\n .sort()\n .map((filterItem) => ({\n value: filterItem,\n label: filterItem,\n }))\n .value(),\n onClose: (options) => {\n let opt = options;\n if (opt.length !== 0) {\n let list = [];\n for (let i = 0; i < opt.length; i++) {\n list.push(opt[i].value);\n }\n setSelectedTags(list);\n }\n },\n onDelete: () => {\n setPageNo(1);\n setSelectedTags([]);\n },\n });\n\n setFilterOptions(filterOptions);\n } catch {\n setFilterOptions([]);\n }\n\n setLoadingFilters(false);\n };\n\n useEffect(() => {\n if (!bldgId || !startDate || !endDate) return;\n\n fetchFilters();\n fetchEquipDataList();\n }, [\n startDate,\n endDate,\n startTime,\n endTime,\n bldgId,\n search,\n sortBy,\n pageSize,\n pageNo,\n userPrefUnits,\n spaceTypeIds,\n equipmentTypeIds,\n endUsesCategoriesIds,\n selectedTags,\n flagAPIConsumption,\n ]);\n\n const handleDownloadCSV = async () => {\n setDownloadingCSVData(true);\n\n try {\n if (equipments.length !== 0) {\n download(\n `LinkedEquipmentTable_${bldgName}_${new Date().toISOString().split('T')[0]}`,\n getEquipmentSpaceModuleTableCSVExport(equipments, headerProps)\n );\n UserStore.update((s) => {\n s.showNotification = true;\n s.notificationMessage = 'CSV export completed successfully.';\n s.notificationType = 'success';\n });\n }\n } catch {\n UserStore.update((s) => {\n s.showNotification = true;\n s.notificationMessage = 'Data failed to export in CSV.';\n s.notificationType = 'error';\n });\n }\n setDownloadingCSVData(false);\n };\n\n const renderName = useCallback((row) => {\n const handleClick = () => {\n setEquipmentFilter({\n equipment_id: row?.equipment_id,\n equipment_name: row?.equipment_name,\n device_type: row?.device_type,\n });\n handleChartOpen();\n };\n\n return (\n \n );\n });\n\n const renderConsumption = useCallback((row) => {\n return (\n <>\n \n \n {`Total Consumption (${moment(startDate).format(dateFormat)} to ${moment(endDate).format(\n dateFormat\n )})`}\n \n\n {isFetching ? (\n
\n\n \n {totalConsumptionValue}\n kWh\n
\n )}\n \n \n {`Peak kW (${moment(startDate).format(dateFormat)} to ${moment(endDate).format(dateFormat)})`}\n \n\n {isFetching ? (\n
\n\n \n {powerConsumptionValue}\n\n {peak_power?.timestamp ? (\n \n {`kW @ ${moment\n .utc(peak_power?.timestamp)\n .clone()\n .format(\n `${userPrefDateFormat === `DD-MM-YYYY` ? `DD/MM` : `MM/DD`} ${\n userPrefTimeFormat === `12h` ? `hh:mm A` : `HH:mm`\n }`\n )}`}\n \n ) : (\n kW\n )}\n
\n )}\n \n \n {`Average Energy Per Square ${userPrefUnits === 'si' ? 'Meter' : 'Foot'} (${moment(\n startDate\n ).format(dateFormat)} to ${moment(endDate).format(dateFormat)})`}\n \n\n {isFetching ? (\n
\n \n {calculatedConsumptionPerSquare}\n kWh\n
\n )}\n \n {tags[0] ? tags[0] : 'none'}} />\n {slicedArr?.length > 0 ? (\n <>\n \n +{slicedArr.length} more\n \n }\n />\n \n {slicedArr.map((el) => {\n return {el}} />;\n })}\n \n \n ) : null}\n
\n );\n });\n\n const headerProps = [\n {\n name: 'Name',\n accessor: 'equipment_name',\n callbackValue: renderName,\n onSort: (method, name) => setSortBy({ method, name }),\n },\n {\n name: 'Energy Consumption',\n accessor: 'consumption',\n callbackValue: renderConsumption,\n onSort: (method, name) => setSortBy({ method, name }),\n },\n {\n name: '% Change',\n accessor: 'change',\n callbackValue: renderPerChange,\n onSort: (method, name) => setSortBy({ method, name }),\n },\n {\n name: 'Space Type',\n accessor: 'space_type_name',\n onSort: (method, name) => setSortBy({ method, name }),\n },\n {\n name: 'Equipment Type',\n accessor: 'equipment_type_name',\n onSort: (method, name) => setSortBy({ method, name }),\n },\n {\n name: 'End Use Category',\n accessor: 'end_use_name',\n onSort: (method, name) => setSortBy({ method, name }),\n },\n {\n name: 'Tags',\n accessor: 'tags',\n callbackValue: renderTags,\n onSort: (method, name) => setSortBy({ method, name }),\n },\n ];\n\n const handleSearch = (e) => {\n setSearch(e);\n };\n\n return (\n <>\n \n \n Move Space1: {spaceObj?.name}\n \n \n Current Location: {formattedOldValue}\n \n\n
\n \n\n \n {\n closeModal();\n }}\n />\n
\n \n
\n\n \n Space Name \n {\n handleChange('name', e.target.value);\n }}\n />\n )}\n
\n\n \n Space Type \n option.value === spaceObj?.type_id)}\n isSearchable={true}\n onChange={(e) => {\n handleChange('type_id', e.value);\n }}\n customSearchCallback={({ data, query }) =>\n defaultDropdownSearch(data, query?.value)\n }\n menuPlacement=\"bottom\"\n />\n )}\n
\n \n
\n \n\n \n {`Square ${\n userPrefUnits === 'si' ? 'Meter' : 'Footage'\n }`} \n
\n\n \n
\n \n {`Tags`} \n {\n handleChange('tags', tag);\n }}\n isCreatable\n />\n )}\n
\n \n
\n \n Parent \n
\n\n {spaceFetching ? (\n \n {\n openModal();\n }}\n className=\"ml-2\"\n />\n )}\n
\n )}\n \n \n\n {(!!label || !!description) && (\n
\n );\n};\n\nToggles.Sizes = TOGGLES_SIZES;\nToggles.TextAlignment = TEXT_ALIGN;\n\nToggles.propTypes = {\n label: PropTypes.node,\n description: PropTypes.node,\n textAlignment: PropTypes.oneOf(Object.values(TEXT_ALIGN)),\n size: PropTypes.oneOf(Object.values(TOGGLES_SIZES)),\n onChange: PropTypes.func.isRequired,\n isChecked: PropTypes.bool,\n};\n\nexport default Toggles;\n","var _path;\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nimport * as React from \"react\";\nfunction SvgHelpIcon(_ref, svgRef) {\n let {\n title,\n titleId,\n ...props\n } = _ref;\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 16,\n height: 16,\n viewBox: \"0 0 16 16\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M8 0.75C3.83984 0.75 0.5 4.11914 0.5 8.25C0.5 12.4102 3.83984 15.75 8 15.75C12.1309 15.75 15.5 12.4102 15.5 8.25C15.5 4.11914 12.1309 0.75 8 0.75ZM8 14.3438C4.63086 14.3438 1.90625 11.6191 1.90625 8.25C1.90625 4.91016 4.63086 2.15625 8 2.15625C11.3398 2.15625 14.0938 4.91016 14.0938 8.25C14.0938 11.6191 11.3398 14.3438 8 14.3438ZM8 10.5938C7.47266 10.5938 7.0625 11.0039 7.0625 11.5312C7.0625 12.0586 7.44336 12.4688 8 12.4688C8.49805 12.4688 8.9375 12.0586 8.9375 11.5312C8.9375 11.0039 8.49805 10.5938 8 10.5938ZM8.9668 4.5H7.47266C6.33008 4.5 5.42188 5.4082 5.42188 6.55078C5.42188 6.93164 5.74414 7.25391 6.125 7.25391C6.50586 7.25391 6.82812 6.93164 6.82812 6.55078C6.82812 6.19922 7.0918 5.90625 7.44336 5.90625H8.9375C9.31836 5.90625 9.64062 6.19922 9.64062 6.55078C9.64062 6.78516 9.52344 6.99023 9.31836 7.10742L7.64844 8.10352C7.41406 8.25 7.29688 8.48438 7.29688 8.71875V9.1875C7.29688 9.56836 7.61914 9.89062 8 9.89062C8.38086 9.89062 8.70312 9.56836 8.70312 9.1875V9.12891L10.0215 8.30859C10.6367 7.92773 11.0176 7.25391 11.0176 6.55078C11.0469 5.4082 10.1387 4.5 8.9668 4.5Z\",\n fill: \"#7C879C\"\n })));\n}\nconst ForwardRef = /*#__PURE__*/React.forwardRef(SvgHelpIcon);\nexport default __webpack_public_path__ + \"static/media/helpIcon.068a44de.svg\";\nexport { ForwardRef as ReactComponent };","var _path;\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nimport * as React from \"react\";\nfunction SvgDownload(_ref, svgRef) {\n let {\n title,\n titleId,\n ...props\n } = _ref;\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 18,\n height: 18,\n viewBox: \"0 0 18 18\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M15.2498 10.5623H13.492L11.9295 12.1248H15.2498C15.5103 12.1248 15.7707 12.3853 15.7707 12.6457V15.2498C15.7707 15.5428 15.5103 15.7707 15.2498 15.7707H2.74984C2.45687 15.7707 2.229 15.5428 2.229 15.2498V12.6457C2.229 12.3853 2.45687 12.1248 2.74984 12.1248H6.0376L4.4751 10.5623H2.74984C1.57796 10.5623 0.666504 11.5063 0.666504 12.6457V15.2498C0.666504 16.4217 1.57796 17.3332 2.74984 17.3332H15.2498C16.3892 17.3332 17.3332 16.4217 17.3332 15.2498V12.6457C17.3332 11.5063 16.3892 10.5623 15.2498 10.5623ZM14.729 13.9478C14.729 13.5246 14.3709 13.1665 13.9478 13.1665C13.492 13.1665 13.1665 13.5246 13.1665 13.9478C13.1665 14.4035 13.492 14.729 13.9478 14.729C14.3709 14.729 14.729 14.4035 14.729 13.9478ZM8.44645 12.6782C8.57666 12.841 8.77197 12.9061 8.99984 12.9061C9.19515 12.9061 9.39046 12.841 9.52067 12.6782L13.9478 8.25114C14.2733 7.95817 14.2733 7.46989 13.9478 7.17692C13.6548 6.8514 13.1665 6.8514 12.8735 7.17692L9.78109 10.2694V1.44775C9.78109 1.02458 9.42301 0.666504 8.99984 0.666504C8.54411 0.666504 8.21859 1.02458 8.21859 1.44775V10.2694L5.09359 7.14437C4.76807 6.8514 4.27979 6.8514 3.98682 7.14437C3.6613 7.46989 3.6613 7.95817 3.98682 8.25114L8.44645 12.6782Z\",\n fill: \"#1D2939\"\n })));\n}\nconst ForwardRef = /*#__PURE__*/React.forwardRef(SvgDownload);\nexport default __webpack_public_path__ + \"static/media/download.f0ae02f0.svg\";\nexport { ForwardRef as ReactComponent };","export const defaultMetrics = [\n { value: 'energy', label: 'Total Space (kWh)', unit: 'kWh', consumption: 'Energy' },\n {\n value: 'energy_by_equipment',\n label: 'Equipment Breakdown (kWh)',\n unit: 'kWh',\n consumption: 'Energy by Equipment',\n },\n];\n","import { useContext } from 'react';\nimport { NotificationContext } from './NotificationProvider';\n\nimport { TYPES } from './constants';\n\n// Custom hook to trigger the snackbar on function components\nexport const useNotification = () => {\n const { openSnackbar, closeSnackbar = () => null } = useContext(NotificationContext);\n\n const open = ({ type = TYPES.info, ...props }) => {\n openSnackbar && openSnackbar({ type, ...props });\n };\n\n // Returns methods in hooks array way\n return [open, closeSnackbar];\n};\n","var _path, _path2, _path3;\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nimport * as React from \"react\";\nfunction SvgEyeSlash(_ref, svgRef) {\n let {\n title,\n titleId,\n ...props\n } = _ref;\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n xmlns: \"http://www.w3.org/2000/svg\",\n width: 16,\n height: 16,\n fill: \"currentColor\",\n className: \"bi bi-eye-slash\",\n viewBox: \"0 0 16 16\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z\"\n })), _path2 || (_path2 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z\"\n })), _path3 || (_path3 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12-.708.708z\"\n })));\n}\nconst ForwardRef = /*#__PURE__*/React.forwardRef(SvgEyeSlash);\nexport default __webpack_public_path__ + \"static/media/eye-slash.3b1d24d4.svg\";\nexport { ForwardRef as ReactComponent };","import { UserStore } from '../store/UserStore';\n\nexport const saveUserPreference = (dateFormat, timeFormat, unit) => {\n localStorage.setItem('dateFormat', dateFormat);\n localStorage.setItem('timeFormat', timeFormat);\n localStorage.setItem('unit', unit);\n\n UserStore.update((store) => {\n store.dateFormat = dateFormat;\n store.timeFormat = timeFormat;\n store.unit = unit;\n });\n};\n","var _path;\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nimport * as React from \"react\";\nfunction SvgCheckedBig(_ref, svgRef) {\n let {\n title,\n titleId,\n ...props\n } = _ref;\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 15,\n height: 19,\n viewBox: \"0 0 16 11\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n d: \"M15.2559 0.410765C15.5814 0.736202 15.5814 1.26384 15.2559 1.58928L6.08926 10.7559C5.76382 11.0814 5.23618 11.0814 4.91074 10.7559L0.744078 6.58928C0.418641 6.26384 0.418641 5.7362 0.744078 5.41077C1.06951 5.08533 1.59715 5.08533 1.92259 5.41077L5.5 8.98818L14.0774 0.410765C14.4028 0.0853278 14.9305 0.0853278 15.2559 0.410765Z\",\n fill: \"#6172F3\"\n })));\n}\nconst ForwardRef = /*#__PURE__*/React.forwardRef(SvgCheckedBig);\nexport default __webpack_public_path__ + \"static/media/checked-big.080370ab.svg\";\nexport { ForwardRef as ReactComponent };","var _path;\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nimport * as React from \"react\";\nfunction SvgEmptyChartLine(_ref, svgRef) {\n let {\n title,\n titleId,\n ...props\n } = _ref;\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 729,\n height: 97,\n viewBox: \"0 0 729 97\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M728 47.1366L701.116 70.0038L669.19 47.1366L644.546 70.0038L618.222 47.1366L591.337 70.0038L562.213 41.5022L491.081 96L435.632 60.4667L408.747 82.5045L374.022 60.4667L349.378 82.5045L316.892 60.4667L281.046 96L217.196 36.931L177.989 77.4021L102.905 1L45.8074 60.4667L1 18.1319\",\n stroke: \"#F0F2F5\",\n strokeWidth: 2,\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\"\n })));\n}\nconst ForwardRef = /*#__PURE__*/React.forwardRef(SvgEmptyChartLine);\nexport default __webpack_public_path__ + \"static/media/emptyChartLine.f9d10037.svg\";\nexport { ForwardRef as ReactComponent };","var _path;\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nimport * as React from \"react\";\nfunction SvgArrowSpaceDetails(_ref, svgRef) {\n let {\n title,\n titleId,\n ...props\n } = _ref;\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 16,\n height: 16,\n viewBox: \"0 0 16 16\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n d: \"M5.52876 3.52925C5.78911 3.2689 6.21122 3.2689 6.47157 3.52925L10.4716 7.52925C10.7319 7.7896 10.7319 8.21171 10.4716 8.47206L6.47157 12.4721C6.21122 12.7324 5.78911 12.7324 5.52876 12.4721C5.26841 12.2117 5.26841 11.7896 5.52876 11.5292L9.05735 8.00065L5.52876 4.47206C5.26841 4.21171 5.26841 3.7896 5.52876 3.52925Z\",\n fill: \"#626B7F\"\n })));\n}\nconst ForwardRef = /*#__PURE__*/React.forwardRef(SvgArrowSpaceDetails);\nexport default __webpack_public_path__ + \"static/media/arrow-space-details.f81c04ad.svg\";\nexport { ForwardRef as ReactComponent };","import React from 'react';\nimport PropTypes from 'prop-types';\nimport cx from 'classnames';\n\nimport Typography from '../typography';\n\nimport { stringOrNumberPropTypes } from '../helpers/helper';\n\nimport './TinyPieChart.scss';\nimport colors from '../../assets/scss/_colors.module.scss';\n\nconst TinyPieChart = ({ height = 20, width = 20, percent = 0, label, ...props }) => {\n const className = cx('TinyPieChart-wrapper', 'd-flex', 'align-items-center', props.className);\n\n return (\n \n {label} }\n {description && {description} }\n
\n )}\n \n \n {label}\n \n\n \n
\n );\n};\n\nTinyPieChart.propTypes = {\n height: PropTypes.number,\n width: PropTypes.number,\n percent: stringOrNumberPropTypes.isRequired,\n label: PropTypes.string.isRequired,\n};\n\nexport default TinyPieChart;\n","import React, { useEffect, useRef, useState } from 'react';\nimport 'moment-timezone';\nimport { useHistory } from 'react-router-dom';\nimport { Row, Col, Spinner } from 'reactstrap';\nimport { useParams } from 'react-router-dom';\nimport { useAtom } from 'jotai';\n\nimport Header from '../../components/Header';\nimport Button from '../../sharedComponents/button/Button';\nimport Select from '../../sharedComponents/form/select';\nimport LineChart from '../../sharedComponents/lineChart/LineChart';\nimport Typography from '../../sharedComponents/typography';\nimport Brick from '../../sharedComponents/brick';\n\nimport { BuildingStore } from '../../store/BuildingStore';\nimport { UserStore } from '../../store/UserStore';\nimport { DateRangeStore } from '../../store/DateRangeStore';\nimport { BreadcrumbStore } from '../../store/BreadcrumbStore';\nimport { ComponentStore } from '../../store/ComponentStore';\nimport { buildingData, userPermissionData } from '../../store/globalState';\n\nimport { updateBuildingStore } from '../../helpers/updateBuildingStore';\nimport {\n checkArray,\n checkObject,\n dateTimeFormatForHighChart,\n formatXaxisForHighCharts,\n handleAPIRequestParams,\n} from '../../helpers/helpers';\nimport { defaultMetrics } from './constants';\nimport { handleDataConversion } from './helper';\n\nimport { fetchEnergyConsumptionBySpace, fetchEnergyConsumptionSpaceByCategory, fetchSpaceMetadata } from './services';\n\nimport MetadataContainer from './MetadataContainer';\nimport EnergyMetadataContainer from './EnergyMetadataContainer';\nimport { ReactComponent as RightArrow } from '../../assets/icon/arrow-space-details.svg';\n\nimport '../../sharedComponents/typography/style.scss';\nimport 'react-loading-skeleton/dist/skeleton.css';\nimport '../settings/passive-devices/styles.scss';\nimport './styles.scss';\nimport _ from 'lodash';\nimport EquipmentTable from './EquipmentTable';\nimport ConfigurationTab from './configurationTab';\nimport { updateSpaceService } from '../settings/layout/services';\nimport { Notification } from '../../sharedComponents/notification';\nimport Skeleton from 'react-loading-skeleton';\nimport moment from 'moment';\nimport Equipment from '../settings/equipment/Equipment';\nimport { Modal } from 'react-bootstrap';\n\nconst SpaceDetails = ({\n isModal = false,\n passedSpaceId,\n toggleModal,\n modalState,\n selectedOutFloorId,\n setSelectedSpaceObj,\n selectedSpaceObj,\n setSelectedParentSpaceObj,\n fetchAllSpaceData,\n fetchAllTags,\n setNewStack,\n}) => {\n const history = useHistory();\n const params = useParams();\n\n const bldgId = params?.bldgId;\n const spaceId = params?.spaceId ? params.spaceId : passedSpaceId;\n\n const [buildingListData] = useAtom(buildingData);\n\n const metric = defaultMetrics;\n\n const [userPermission] = useAtom(userPermissionData);\n\n const isUserAdmin = userPermission?.is_admin ?? false;\n const isSuperUser = userPermission?.is_superuser ?? false;\n const isSuperAdmin = isUserAdmin || isSuperUser;\n const canUserEdit = userPermission?.permissions?.permissions?.spaces_building_permission?.edit ?? false;\n\n const timeZone = BuildingStore.useState((s) => s.BldgTimeZone);\n\n const startDate = DateRangeStore.useState((s) => s.startDate);\n const endDate = DateRangeStore.useState((s) => s.endDate);\n const startTime = DateRangeStore.useState((s) => s.startTime);\n const endTime = DateRangeStore.useState((s) => s.endTime);\n const daysCount = DateRangeStore.useState((s) => +s.daysCount);\n\n const userPrefDateFormat = UserStore.useState((s) => s.dateFormat);\n const userPrefTimeFormat = UserStore.useState((s) => s.timeFormat);\n const userPrefUnits = UserStore.useState((s) => s.unit);\n\n const [chartDataFetching, setChartDataFetching] = useState(false);\n const [chartData, setChartData] = useState([]);\n\n const [metadataFetching, setMetadataFetching] = useState(false);\n const [metadata, setMetadata] = useState({});\n\n const [selectedTab, setSelectedTab] = useState(isModal ? 1 : 0);\n\n const [selectedConsumption, setSelectedConsumption] = useState(metric[0]?.value);\n\n const [errorObj, setErrorObj] = useState({});\n\n const [modal, setModal] = useState(false);\n const openModal = () => setModal(true);\n const closeModal = () => setModal(false);\n\n const [selectedFloorId, setSelectedFloorId] = useState(null);\n const [spaceObj, setSpaceObj] = useState({});\n const [updateSpaceFetcing, setUpdateSpaceFetching] = useState(false);\n const [bldgName, setBldgName] = useState('');\n\n const allParentSpaces = useRef([]);\n\n const mapChartData = async (query) => {\n const response = await fetchEnergyConsumptionBySpace(query);\n\n if (!Array.isArray(response)) return;\n\n const space = response[0];\n\n if (!Array.isArray(space?.total_data)) return;\n\n const mappedSpaceData = space.total_data.map((consumptionData) => ({\n x: new Date(consumptionData?.time_stamp).getTime(),\n y: handleDataConversion(consumptionData?.consumption, selectedConsumption),\n }));\n\n const spaceRecord = {\n name: space.space_name,\n data: mappedSpaceData,\n };\n\n setChartData([spaceRecord]);\n };\n\n const mapChartDataByCategory = async (query) => {\n const response = await fetchEnergyConsumptionBySpace(query);\n\n if (!Array.isArray(response)) return;\n\n const space = response[0];\n\n if (!Array.isArray(space?.total_data)) return;\n\n const mappedSpaceData = space.total_data.map((consumptionData) => ({\n x: new Date(consumptionData?.time_stamp).getTime(),\n y: handleDataConversion(consumptionData?.consumption, selectedConsumption),\n }));\n\n const spaceRecord = {\n name: space.space_name,\n data: mappedSpaceData,\n };\n\n const responseByCategory = await fetchEnergyConsumptionSpaceByCategory('by_equipment', query);\n\n const mappedEquipmentData = responseByCategory.map((equipmentData) => {\n const mappedConsumptionData = equipmentData.consumption.map((equipmentConsumptionData) => ({\n x: new Date(equipmentConsumptionData?.time_stamp).getTime(),\n y: handleDataConversion(equipmentConsumptionData?.consumption, selectedConsumption),\n }));\n\n const equipmentRecord = {\n name: equipmentData.equipment_name,\n data: mappedConsumptionData,\n };\n\n return equipmentRecord;\n });\n\n spaceRecord.name = 'Total';\n\n mappedEquipmentData.unshift(spaceRecord);\n\n setChartData(mappedEquipmentData);\n };\n\n const fetchChartData = async () => {\n setChartDataFetching(true);\n setChartData([]);\n\n try {\n const { dateFrom, dateTo } = handleAPIRequestParams(startDate, endDate, startTime, endTime);\n\n const query = {\n spaceId,\n bldgId,\n dateFrom: encodeURIComponent(dateFrom),\n dateTo: encodeURIComponent(dateTo),\n timeZone,\n };\n\n const isEquipment = selectedConsumption === metric[1].value;\n\n if (isEquipment) {\n await mapChartDataByCategory(query);\n } else {\n await mapChartData(query);\n }\n } catch {\n setChartData([]);\n }\n\n setChartDataFetching(false);\n };\n\n const fetchMetadata = async () => {\n setMetadataFetching(true);\n setMetadata({});\n\n try {\n const { dateFrom, dateTo } = handleAPIRequestParams(startDate, endDate, startTime, endTime);\n\n const query = {\n bldgId,\n dateFrom: encodeURIComponent(dateFrom),\n dateTo: encodeURIComponent(dateTo),\n timeZone,\n };\n\n const res = await fetchSpaceMetadata(query, spaceId);\n\n if (res) {\n setMetadata(res);\n setSelectedFloorId(res.floor_id);\n }\n } catch {\n setMetadata({});\n }\n\n setMetadataFetching(false);\n };\n\n const notifyUser = (notifyType, notifyMessage) => {\n UserStore.update((s) => {\n s.showNotification = true;\n s.notificationMessage = notifyMessage;\n s.notificationType = notifyType;\n });\n };\n\n const fetchEditSpace = async () => {\n setUpdateSpaceFetching(true);\n\n const params = `?space_id=${spaceObj?._id}`;\n\n const getCurrentParent =\n spaceObj?.new_parent_space || spaceObj?.new_parent_space === null\n ? spaceObj?.new_parent_space\n : spaceObj?.parent_space;\n\n const getSquare =\n spaceObj?.square_footage || spaceObj?.square_footage === '0'\n ? spaceObj.square_footage.replace(/,/g, '')\n : null;\n\n const payload = {\n building_id: bldgId,\n name: spaceObj?.name,\n type_id: spaceObj?.type_id,\n square_footage: getSquare,\n parents: spaceObj?.new_parents ? spaceObj?.new_parents : spaceObj?.parents,\n parent_space: getCurrentParent,\n };\n\n if (Array.isArray(spaceObj?.tags)) {\n payload.tags = spaceObj.tags.map((tag) => tag?.label ?? '');\n } else {\n payload.tags = [];\n }\n\n try {\n const axiosResponse = await updateSpaceService(params, payload);\n const response = axiosResponse?.data;\n\n if (response?.success) {\n notifyUser(Notification.Types.success, `Space updated successfully.`);\n } else {\n notifyUser(Notification.Types.error, response?.message);\n }\n } catch {\n notifyUser(Notification.Types.error, `Failed to update Space.`);\n }\n\n if (isModal) {\n closeSpaceModal();\n }\n setUpdateSpaceFetching(false);\n allParentSpaces.current = [];\n };\n\n const handleEditSpace = () => {\n if (!bldgId || !spaceObj?._id) return;\n\n const alertObj = {};\n\n if (!spaceObj?.name || spaceObj?.name === '') alertObj.name = `Please enter Space name. It can not be empty.`;\n if (!spaceObj?.type_id || spaceObj?.type_id === '') alertObj.type_id = `Please select Type.`;\n\n setErrorObj(alertObj);\n\n if (!alertObj.name && !alertObj.type_id && !alertObj.square_footage) fetchEditSpace();\n };\n\n useEffect(() => {\n if (selectedTab !== 0) return;\n if (!spaceId || !selectedConsumption || !bldgId || !startDate || !endDate) return;\n\n fetchChartData();\n fetchMetadata();\n }, [spaceId, startDate, endDate, startTime, endTime, selectedConsumption, bldgId, userPrefUnits]);\n\n useEffect(() => {\n if (checkObject(metadata)) return;\n if (checkArray(chartData)) return;\n if (selectedTab !== 0) return;\n if (!spaceId || !selectedConsumption || !bldgId || !startDate || !endDate) return;\n\n fetchChartData();\n fetchMetadata();\n }, [selectedTab]);\n\n const updateBreadcrumbStore = () => {\n BreadcrumbStore.update((bs) => {\n let newList = [\n {\n label: 'Building Overview',\n path: '/spaces/space/overview',\n active: true,\n },\n ];\n bs.items = newList;\n });\n\n ComponentStore.update((s) => {\n s.parent = 'spaces-building';\n });\n };\n\n useEffect(() => {\n if (isModal) return;\n\n window.scrollTo(0, 0);\n updateBreadcrumbStore();\n }, []);\n\n useEffect(() => {\n if (startDate === null || endDate === null || isModal) return;\n\n let time_zone = 'US/Eastern';\n\n if (bldgId) {\n const bldgObj = buildingListData.find((el) => el?.building_id === bldgId);\n\n if (bldgObj?.building_id) {\n if (bldgObj?.timezone) time_zone = bldgObj?.timezone;\n updateBuildingStore(\n bldgObj?.building_id,\n bldgObj?.building_name,\n bldgObj?.timezone,\n bldgObj?.plug_only\n );\n }\n }\n }, [startDate, endDate, startTime, endTime, bldgId]);\n\n useEffect(() => {\n const currBldg = buildingListData?.find(({ building_id }) => building_id === bldgId);\n\n if (currBldg) setBldgName(currBldg.building_name);\n }, [bldgId, buildingListData]);\n\n const chartProps = {\n tooltip: {\n xDateFormat: dateTimeFormatForHighChart(userPrefDateFormat, userPrefTimeFormat),\n },\n xAxis: {\n type: 'datetime',\n labels: {\n format: formatXaxisForHighCharts(daysCount, userPrefDateFormat, userPrefTimeFormat),\n },\n gridLineWidth: null,\n alternateGridColor: null,\n },\n yAxis: {\n gridLineWidth: 1,\n },\n };\n\n const selectedMetricsTab = () => setSelectedTab(0);\n\n const selectedConfiguresTab = () => !metadataFetching && !chartDataFetching && setSelectedTab(1);\n\n const dynamicActiveClassTab = (selectedIdTab) => (selectedTab === selectedIdTab ? 'active-tab-style' : '');\n\n const handleSelect = (e) => setSelectedConsumption(e.value);\n\n const routeSpaces = () => history.push(`/spaces/building/overview/${bldgId}`);\n\n const closeSpaceModal = () => {\n setChartData([]);\n setMetadata({});\n setErrorObj({});\n setSpaceObj({});\n setSelectedFloorId(null);\n setBldgName('');\n setSelectedTab(1);\n\n setSelectedSpaceObj({});\n setSelectedParentSpaceObj({});\n setNewStack({});\n fetchAllTags();\n fetchAllSpaceData(selectedOutFloorId, bldgId);\n toggleModal();\n };\n\n return isModal ? (\n \n
\n \n \n {selectedSpaceObj?.name} \n
\n \n \n Metrics\n \n \n Configure\n \n
\n \n {(canUserEdit || isSuperAdmin) && selectedTab === 1 && (\n
\n \n \n
\n
\n )}\n\n {selectedTab === 1 && spaceId && (\n <>\n \n
\n\n {chartDataFetching ? (\n \n
\n \n
\n \n
\n ) : (\n \n
\n \n \n
\n\n {selectedTab === 0 && (\n
\n );\n};\n\nexport default SpaceDetails;\n","import React, { Component } from 'react';\nimport { BrowserRouter, Switch } from 'react-router-dom';\nimport Loadable from 'react-loadable';\nimport { connect } from 'react-redux';\n\nimport { isUserAuthenticated, isSuperUserAuthenticated } from '../helpers/authUtils';\nimport * as layoutConstants from '../constants/layout';\nimport { allFlattenRoutes as routes } from './index';\n\n// Lazy loading and code splitting -\n// Derieved idea from https://blog.logrocket.com/lazy-loading-components-in-react-16-6-6cea535c0b52\nconst loading = () => ;\n\n// All layouts/containers\nconst AuthLayout = Loadable({\n loader: () => import('../layouts/Auth'),\n render(loaded, props) {\n let Component = loaded.default;\n return \n
\n \n \n {metadata?.space_name} \n )}\n
\n {selectedTab === 1 && (\n \n \n Spaces\n \n \n {metadata?.space_name}\n \n )}\n
\n {metadataFetching ? (\n \n \n Metrics\n \n \n Configure\n \n
\n \n {(canUserEdit || isSuperAdmin) && selectedTab === 1 && (\n
\n )}\n \n \n
\n
\n )}\n\n {selectedTab === 1 && (\n <>\n \n
\n {chartDataFetching ? (\n \n
\n \n
\n \n
\n ) : (\n \n
\n