@widergy/utilitygo-smart-bill-web 3.21.0 → 3.22.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [3.22.0](https://github.com/widergy/UtilityGO-Smart-Bill-Web/compare/v3.21.0...v3.22.0) (2026-01-30)
+
+
+### Features
+
+* [EVEP-366] smartbill changes ([#80](https://github.com/widergy/UtilityGO-Smart-Bill-Web/issues/80)) ([f3e74eb](https://github.com/widergy/UtilityGO-Smart-Bill-Web/commit/f3e74ebe37a182281e3ff64c762f92b44423b4d9))
+
 # [3.21.0](https://github.com/widergy/UtilityGO-Smart-Bill-Web/compare/v3.20.2...v3.21.0) (2026-01-21)
 
 

package/dist/components/SmartBillSummary/tabs/Consumptions/components/CurrentConsumption/components/ConsumptionComparison/index.js

@@ -8,6 +8,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _energyUi = require("@widergy/energy-ui");
 var _billDataTypes = require("@widergy/utilitygo-smart-bill-web/dist/shared/types/billDataTypes");
 var _propTypes = require("prop-types");
+var _dayjs = _interopRequireDefault(require("dayjs"));
 var _utils = require("./utils");
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -15,39 +16,49 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const ConsumptionComparison = _ref => {
   let {
-    periodsToCompare = [],
+    currentPeriods = [],
+    referencePeriods = [],
     texts
   } = _ref;
-  const maxValue = (0, _utils.getMaxValue)(periodsToCompare);
+  const allPeriods = [...currentPeriods, ...referencePeriods];
+  const maxValue = (0, _utils.getMaxValue)(allPeriods);
   const title = texts?.consumptions?.comparisonTitle;
-  const showComparison = periodsToCompare?.length > 1;
-  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
-    colorTheme: "gray",
-    className: showComparison ? _stylesModule.default.consumptionComparisonLabel : _stylesModule.default.consumptionComparisonLabelNoData,
-    variant: "small"
-  }, title), showComparison && /*#__PURE__*/_react.default.createElement("div", {
-    className: _stylesModule.default.container
-  }, periodsToCompare.map(_ref2 => {
+  const showComparison = allPeriods?.length > 1;
+  const sortedCurrentPeriods = [...currentPeriods].sort((a, b) => {
+    const dateA = (0, _dayjs.default)(a.settlements?.start_date);
+    const dateB = (0, _dayjs.default)(b.settlements?.start_date);
+    return dateB.diff(dateA);
+  });
+  const currentPeriodsList = sortedCurrentPeriods.map(period => ({
+    ...period,
+    isCurrent: true
+  }));
+  const referencePeriodsList = referencePeriods.map(period => ({
+    ...period,
+    isCurrent: false
+  }));
+  const renderBar = _ref2 => {
     let {
       consumptions,
-      current,
       number,
       settlements,
-      year
+      year,
+      isCurrent
     } = _ref2;
     const {
       value,
       unit
     } = consumptions?.[0] || {};
     const barHeight = (0, _utils.getBarHeight)(maxValue, value);
+    const key = `${isCurrent ? 'current' : 'reference'}-${number}-${year}`;
     return /*#__PURE__*/_react.default.createElement("div", {
-      key: number + year,
+      key: key,
       className: _stylesModule.default.barContainer
     }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
       className: _stylesModule.default.value,
       variant: "small"
     }, (0, _utils.getFormattedValue)(value, unit)), /*#__PURE__*/_react.default.createElement("div", {
-      className: `${_stylesModule.default.bar} ${current ? _stylesModule.default.currentBar : ''}`,
+      className: `${_stylesModule.default.bar} ${isCurrent ? _stylesModule.default.currentBar : ''}`,
       style: {
         height: `${barHeight}px`
       }
@@ -60,10 +71,32 @@ const ConsumptionComparison = _ref => {
       colorTheme: "gray",
       variant: "small"
     }, (0, _utils.getPeriod)(settlements)));
-  })));
+  };
+  const currentCount = currentPeriodsList.length || 1;
+  const referenceCount = referencePeriodsList.length || 1;
+  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    colorTheme: "gray",
+    className: showComparison ? _stylesModule.default.consumptionComparisonLabel : _stylesModule.default.consumptionComparisonLabelNoData,
+    variant: "small"
+  }, title), showComparison && /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.containerWrapper
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.container
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.leftGroup,
+    style: {
+      flex: currentCount
+    }
+  }, currentPeriodsList.map(renderBar)), /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.rightGroup,
+    style: {
+      flex: referenceCount
+    }
+  }, referencePeriodsList.map(renderBar)))));
 };
 ConsumptionComparison.propTypes = {
-  periodsToCompare: _billDataTypes.periodsTypes,
+  currentPeriods: _billDataTypes.periodsTypes,
+  referencePeriods: _billDataTypes.periodsTypes,
   texts: _propTypes.object
 };
 var _default = exports.default = ConsumptionComparison;

package/dist/components/SmartBillSummary/tabs/Consumptions/components/CurrentConsumption/components/ConsumptionComparison/styles.module.scss

@@ -3,17 +3,37 @@
 }
 
 .consumptionComparisonLabelNoData {
-  margin: 12px 0 -20px 0;
+  margin: 12px 0 0 0;
+}
+
+.containerWrapper {
+  width: 100%;
 }
 
 .container {
   align-items: flex-end;
   display: flex;
-  grid-gap: 16px;
+  gap: 32px;
   height: 240px;
   justify-content: center;
 }
 
+.leftGroup,
+.rightGroup {
+  align-items: flex-end;
+  display: flex;
+  grid-gap: 16px;
+  height: 100%;
+}
+
+.leftGroup {
+  justify-content: flex-end;
+}
+
+.rightGroup {
+  justify-content: flex-start;
+}
+
 .barContainer {
   align-items: center;
   display: flex;
@@ -35,6 +55,7 @@
 }
 
 .value {
+  align-items: center;
   margin: 12px 0 4px;
 }
 
@@ -43,5 +64,7 @@
 }
 
 .period {
+  align-items: center;
   color: var(--gray02);
+  max-height: 20px;
 }

package/dist/components/SmartBillSummary/tabs/Consumptions/components/CurrentConsumption/index.js

@@ -23,6 +23,10 @@ const CurrentConsumption = _ref => {
     periods
   } = smartBill || {};
   const periodsToCompare = (0, _utils.getConsumptionPeriodsToCompare)(periods);
+  const {
+    currentPeriods = [],
+    referencePeriods = []
+  } = (0, _utils.getPeriodsGroupedByReference)(periods) || {};
   const {
     totalConsumptionFormatted,
     unit,
@@ -48,7 +52,8 @@ const CurrentConsumption = _ref => {
     colorTheme: "gray",
     withMarkdown: true
   }, description)), /*#__PURE__*/_react.default.createElement(_ConsumptionComparison.default, {
-    periodsToCompare: periodsToCompare,
+    currentPeriods: currentPeriods,
+    referencePeriods: referencePeriods,
     texts: texts
   }), /*#__PURE__*/_react.default.createElement(_ConsumptionEvolution.default, {
     assets: assets,

package/dist/components/SmartBillSummary/tabs/Consumptions/components/CurrentConsumption/utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getConsumptionPeriodsToCompare = exports.getConsumptionLabels = void 0;
+exports.getPeriodsGroupedByReference = exports.getConsumptionPeriodsToCompare = exports.getConsumptionLabels = void 0;
 var _lodash = require("lodash");
 var _numeral = _interopRequireDefault(require("numeral"));
 var _dayjs = _interopRequireDefault(require("dayjs"));
@@ -19,6 +19,18 @@ const getConsumptionPeriodsToCompare = function () {
   }
 };
 exports.getConsumptionPeriodsToCompare = getConsumptionPeriodsToCompare;
+const getPeriodsGroupedByReference = function () {
+  let periods = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  if (!(0, _lodash.isEmpty)(periods)) {
+    const currentPeriods = periods.filter(period => period.reference_period === false);
+    const referencePeriods = periods.filter(period => period.reference_period === true);
+    return {
+      currentPeriods,
+      referencePeriods
+    };
+  }
+};
+exports.getPeriodsGroupedByReference = getPeriodsGroupedByReference;
 const formatDate = date => {
   if (!date) return '';
   const day = (0, _dayjs.default)(date).format('D');

package/dist/components/SmartBillSummary/tabs/Consumptions/components/ProgressBarCard/components/ProgressBarItem/index.js

@@ -31,7 +31,11 @@ const ProgressBarItem = _ref => {
   } = item;
   const safeSplit = Math.max(0, Math.min(100, Math.floor(splitPoint)));
   const barColorClass = isExceeded ? min ? _stylesModule.default[`split-min-${safeSplit}`] : _stylesModule.default[`split-max-${safeSplit}`] : isPositiveExcess ? _stylesModule.default[`split-positive-${safeSplit}`] : _stylesModule.default.barNormal;
-  const labelColor = isExceeded ? 'error' : 'gray';
+  const isRegisteredLarger = registered.value >= limit.value;
+  const leftData = isRegisteredLarger ? limit : registered;
+  const rightData = isRegisteredLarger ? registered : limit;
+  const leftColor = !isRegisteredLarger && isExceeded ? 'error' : 'gray';
+  const rightColor = isRegisteredLarger && isExceeded ? 'error' : 'gray';
   return /*#__PURE__*/_react.default.createElement("div", {
     key: id,
     className: _stylesModule.default.card
@@ -53,20 +57,22 @@ const ProgressBarItem = _ref => {
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.valueGroup
   }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
-    colorTheme: labelColor,
+    colorTheme: leftColor,
     variant: "title1"
-  }, (0, _utils.formatNumber)(registered.value)), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
-    colorTheme: labelColor,
+  }, (0, _utils.formatNumber)(leftData.value)), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    colorTheme: leftColor,
     variant: "subtitle2"
   }, unit)), /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.valueGroup
   }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    colorTheme: rightColor,
     variant: "title1"
-  }, (0, _utils.formatNumber)(limit.value)), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+  }, (0, _utils.formatNumber)(rightData.value)), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    colorTheme: rightColor,
     variant: "subtitle2"
   }, unit))), /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.rowSpaceBetween
-  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, null, registered.label), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, null, limit.label))))), isExceeded && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_core.Divider, {
+  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, null, leftData.label), /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, null, rightData.label))))), isExceeded && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_core.Divider, {
     className: _stylesModule.default.divider
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.footerSection

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@widergy/utilitygo-smart-bill-web",
-  "version": "3.21.0",
+  "version": "3.22.0",
   "description": "UtilityGO SmartBill Web",
   "license": "MIT",
   "main": "dist/index.js",