@tenancy.nz/feature-ui 1.4.11 → 1.5.0

package/dist/cjs/components/PropertyCard.styled.cjs

@@ -5,7 +5,7 @@ var react = require('@emotion/react');
 var styled = require('@emotion/styled');
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-var StyledPropertyImage = styled.figure(_templateObject || (_templateObject = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  padding: 0;\n  margin: 0;\n  width: 120px;\n  height: 95px;\n  flex: 0 0 95px;\n  overflow: hidden;\n\n  ", "\n"])), function (_ref) {
+var StyledPropertyImage = styled.div(_templateObject || (_templateObject = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  padding: 0;\n  margin: 0;\n  width: 120px;\n  height: 95px;\n  flex: 0 0 95px;\n  overflow: hidden;\n\n  ", "\n"])), function (_ref) {
   var theme = _ref.theme;
   return react.css(_templateObject2 || (_templateObject2 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n    ", " {\n      display: none;\n    }\n\n    ", " {\n      width: 150px;\n      height: 135px;\n      flex: 0 0 150px;\n    }\n\n    @media print {\n      width: 150px;\n      height: 135px;\n      flex: 0 0 150px;\n      display: block;\n    }\n  "])), theme.breakpoints.down("sm"), theme.breakpoints.up("sm"));
 });
@@ -13,7 +13,7 @@ var StyledPropertyDetailsBox = styled.div(_templateObject3 || (_templateObject3
   var theme = _ref2.theme;
   return react.css(_templateObject4 || (_templateObject4 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n    ", " {\n      flex-direction: row;\n      align-items: center;\n    }\n  "])), theme.breakpoints.up("sm"));
 });
-var StyledPropertyAmenitiesBox = styled.div(_templateObject5 || (_templateObject5 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  padding-right: 25px;\n  display: flex;\n  flex-direction: column;\n  margin-top: 5px;\n\n  gap: 18px;\n  min-width: 170px;\n  height: 100%;\n  justify-content: space-between;\n\n  ", "\n  @media print {\n    align-items: flex-end;\n  }\n"])), function (_ref3) {
+var StyledPropertyAmenitiesBox = styled.div(_templateObject5 || (_templateObject5 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  padding-right: 25px;\n  display: flex;\n  flex-direction: column;\n  margin-top: 5px;\n  gap: 8px;\n  min-width: 170px;\n  height: 100%;\n  justify-content: space-between;\n\n  ", "\n  @media print {\n    align-items: flex-end;\n  }\n"])), function (_ref3) {
   var theme = _ref3.theme;
   return "\n    @media (min-width: ".concat(theme.breakpoints.values.md, "px) {\n      align-items: flex-end;\n    }\n  ");
 });

package/dist/cjs/components/analytics-doughnut-chart.cjs

@@ -0,0 +1,61 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var doughnutChart = require('./doughnut-chart.cjs');
+var general = require('../utils/helpers/general.cjs');
+
+function AnalyticsDoughnutChart(_ref) {
+  var _ref$allhouseCount = _ref.allhouseCount,
+    allhouseCount = _ref$allhouseCount === void 0 ? 0 : _ref$allhouseCount,
+    _ref$bookMeCount = _ref.bookMeCount,
+    bookMeCount = _ref$bookMeCount === void 0 ? 0 : _ref$bookMeCount,
+    _ref$oneRoofCount = _ref.oneRoofCount,
+    oneRoofCount = _ref$oneRoofCount === void 0 ? 0 : _ref$oneRoofCount,
+    _ref$realEstateCount = _ref.realEstateCount,
+    realEstateCount = _ref$realEstateCount === void 0 ? 0 : _ref$realEstateCount,
+    _ref$tradeMeCount = _ref.tradeMeCount,
+    tradeMeCount = _ref$tradeMeCount === void 0 ? 0 : _ref$tradeMeCount,
+    _ref$manualCount = _ref.manualCount,
+    manualCount = _ref$manualCount === void 0 ? 0 : _ref$manualCount,
+    _ref$heading = _ref.heading,
+    heading = _ref$heading === void 0 ? void 0 : _ref$heading;
+  var data = [{
+    color: "#0CC1A3",
+    count: general.parseChartCount(bookMeCount),
+    slug: "bookme",
+    title: "Tenant Portal"
+  }, {
+    color: "#000000",
+    count: general.parseChartCount(allhouseCount),
+    slug: "allhouse",
+    title: "Allhouse"
+  }, {
+    color: "#FF8500",
+    count: general.parseChartCount(oneRoofCount),
+    slug: "oneroof",
+    title: "OneRoof"
+  }, {
+    color: "#0098FF",
+    count: general.parseChartCount(realEstateCount),
+    slug: "realestate",
+    title: "realestate.co.nz"
+  }, {
+    color: "#4854D3",
+    count: general.parseChartCount(tradeMeCount),
+    slug: "trademe",
+    title: "Trade Me"
+  }, {
+    color: "#D9D9D9",
+    count: general.parseChartCount(manualCount),
+    slug: "manual",
+    title: "Manually Generated"
+  }];
+  return /* @__PURE__ */React.createElement(doughnutChart.default, {
+    data: data,
+    heading: heading
+  });
+}
+
+exports.default = AnalyticsDoughnutChart;

package/dist/cjs/components/doughnut-chart.cjs

@@ -0,0 +1,124 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.cjs');
+var React = require('react');
+var reactUid = require('react-uid');
+var Stack = require('@mui/material/Stack');
+var ui = require('@tenancy.nz/ui');
+var chart_js = require('primereact/chart.js');
+var ChartLegend = require('./ChartLegend.cjs');
+
+function DoughnutChart(_ref) {
+  var data = _ref.data,
+    _ref$heading = _ref.heading,
+    heading = _ref$heading === void 0 ? void 0 : _ref$heading,
+    _ref$chartProps = _ref.chartProps,
+    chartProps = _ref$chartProps === void 0 ? {} : _ref$chartProps,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? "164px" : _ref$size;
+  if (!Array.isArray(data) || data.length === 0) {
+    return null;
+  }
+  var chartLabels = data.map(function (d) {
+    return d.title;
+  });
+  var chartValues = data.map(function (d) {
+    return d.count;
+  });
+  var chartColors = data.map(function (d) {
+    return d.color;
+  });
+  return /* @__PURE__ */React.createElement(Stack, {
+    sx: {
+      position: "relative"
+    },
+    alignItems: "center",
+    gap: 4
+  }, heading && /* @__PURE__ */React.createElement(ui.Heading, {
+    as: "h4",
+    color: "primary"
+  }, heading), /* @__PURE__ */React.createElement(Stack, {
+    flexDirection: {
+      sm: "row"
+    },
+    gap: 12,
+    alignItems: "center"
+  }, /* @__PURE__ */React.createElement(ui.Box, {
+    width: size,
+    height: size,
+    overflow: "hidden",
+    position: "relative",
+    maxWidth: "100%",
+    sx: {
+      "&& > canvas": {
+        width: "100%",
+        height: "100%"
+      }
+    }
+  }, /* @__PURE__ */React.createElement(chart_js.Chart, _rollupPluginBabelHelpers.objectSpread2({
+    type: "doughnut",
+    data: {
+      labels: chartLabels,
+      datasets: [{
+        data: chartValues,
+        backgroundColor: chartColors,
+        hoverBackgroundColor: chartColors,
+        borderWidth: 0
+      }]
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      cutoutPercentage: 64,
+      legend: {
+        display: false
+      },
+      animation: {
+        duration: 0
+      },
+      tooltips: {
+        backgroundColor: "#0E0044",
+        titleFontColor: "#fff",
+        bodyFontColor: "#fff",
+        xPadding: 8,
+        yPadding: 8,
+        bodyFontFamily: "Montserrat, sans-serif",
+        bodyFontStyle: "semibold",
+        bodyFontSize: 14,
+        borderColor: "transparent",
+        callbacks: {
+          labelColor: function labelColor(tooltipItem, chart) {
+            var dataset = chart.config.data.datasets[tooltipItem.datasetIndex];
+            var color = dataset.backgroundColor[tooltipItem.index];
+            return {
+              borderColor: color,
+              backgroundColor: color,
+              borderWidth: 0,
+              borderRadius: 5
+            };
+          }
+        }
+      }
+    },
+    style: {
+      width: "100%",
+      height: "100%"
+    }
+  }, chartProps))), /* @__PURE__ */React.createElement(Stack, {
+    gap: 2
+  }, data.map(function (item) {
+    var color = item.color,
+      count = item.count,
+      title = item.title;
+    return /* @__PURE__ */React.createElement(ChartLegend.default, {
+      key: reactUid.uid(item),
+      color: color,
+      count: count,
+      label: title
+    });
+  }))));
+}
+
+exports.default = DoughnutChart;

package/dist/cjs/index.cjs

@@ -9,7 +9,8 @@ var BookingTableRow = require('./components/BookingTableRow.cjs');
 var BookingTableRowHeader = require('./components/BookingTableRowHeader.cjs');
 var BookingTableRowSkeleton = require('./components/BookingTableRowSkeleton.cjs');
 var CheckedIcon = require('./components/CheckedIcon.cjs');
-var EnquiriesDoughnutChart = require('./components/EnquiriesDoughnutChart.cjs');
+var doughnutChart = require('./components/doughnut-chart.cjs');
+var analyticsDoughnutChart = require('./components/analytics-doughnut-chart.cjs');
 var GridList = require('./components/GridList.cjs');
 var Hidden = require('./components/Hidden.cjs');
 var IconLabel = require('./components/IconLabel.cjs');
@@ -27,7 +28,8 @@ exports.BookingTableRow = BookingTableRow.default;
 exports.BookingTableRowHeader = BookingTableRowHeader.default;
 exports.BookingTableRowSkeleton = BookingTableRowSkeleton.default;
 exports.CheckedIcon = CheckedIcon.default;
-exports.EnquiriesDoughnutChart = EnquiriesDoughnutChart.default;
+exports.DoughnutChart = doughnutChart.default;
+exports.AnalyticsDoughnutChart = analyticsDoughnutChart.default;
 exports.GridList = GridList.default;
 exports.Hidden = Hidden.default;
 exports.IconLabel = IconLabel.default;

package/dist/cjs/utils/helpers/general.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+var parseChartCount = function parseChartCount(value) {
+  if (Number.isNaN(Number.parseInt(String(value), 10))) {
+    return 0;
+  }
+  if (value === 0) {
+    return 0;
+  }
+  return Math.max(Number(value), 1e-3);
+};
+
+exports.parseChartCount = parseChartCount;

package/dist/esm/components/AgentDetailsCard.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import { Box, Skeleton, Heading, Text } from '@tenancy.nz/ui';
-import { UserIcon, PhoneIcon, EnvelopeIcon } from '@tenancy.nz/icons';
+import EmailRoundedIcon from '@mui/icons-material/EmailRounded';
+import PhoneRoundedIcon from '@mui/icons-material/PhoneRounded';
+import PersonRoundedIcon from '@mui/icons-material/PersonRounded';
 import IconLabel from './IconLabel.js';
 
 function AgentDetailsCard(_ref) {
@@ -29,8 +31,8 @@ function AgentDetailsCard(_ref) {
     variant: "text"
   }) : /* @__PURE__ */React.createElement(IconLabel, {
     color: "tertiary.main",
-    startIcon: /* @__PURE__ */React.createElement(UserIcon, {
-      size: "24px"
+    startIcon: /* @__PURE__ */React.createElement(PersonRoundedIcon, {
+      fontSize: "small"
     })
   }, /* @__PURE__ */React.createElement(Heading, {
     as: "h5",
@@ -41,8 +43,8 @@ function AgentDetailsCard(_ref) {
     variant: "text"
   }) : /* @__PURE__ */React.createElement(IconLabel, {
     color: "tertiary.main",
-    startIcon: /* @__PURE__ */React.createElement(PhoneIcon, {
-      size: "24px"
+    startIcon: /* @__PURE__ */React.createElement(PhoneRoundedIcon, {
+      fontSize: "small"
     })
   }, /* @__PURE__ */React.createElement(Text, {
     as: "span",
@@ -55,8 +57,8 @@ function AgentDetailsCard(_ref) {
     variant: "text"
   }) : /* @__PURE__ */React.createElement(IconLabel, {
     color: "tertiary.main",
-    startIcon: /* @__PURE__ */React.createElement(EnvelopeIcon, {
-      size: "24px"
+    startIcon: /* @__PURE__ */React.createElement(EmailRoundedIcon, {
+      fontSize: "small"
     })
   }, /* @__PURE__ */React.createElement(Text, {
     as: "span",

package/dist/esm/components/AnalyticsBox.js

@@ -1,8 +1,9 @@
 import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
 import React from 'react';
-import { Paper, Box, Heading, Text } from '@tenancy.nz/ui';
+import Stack from '@mui/material/Stack';
+import { Paper, Heading, Text } from '@tenancy.nz/ui';
 
-var _excluded = ["width", "minWidth", "maxWidth", "height", "border", "label", "amount", "text"];
+var _excluded = ["width", "minWidth", "maxWidth", "height", "border", "label", "amount", "text", "sx"];
 function AnalyticsBox(_ref) {
   var width = _ref.width,
     minWidth = _ref.minWidth,
@@ -12,40 +13,48 @@ function AnalyticsBox(_ref) {
     label = _ref.label,
     amount = _ref.amount,
     text = _ref.text,
+    _ref$sx = _ref.sx,
+    sx = _ref$sx === void 0 ? {} : _ref$sx,
     rest = _objectWithoutProperties(_ref, _excluded);
   return /* @__PURE__ */React.createElement(Paper, _objectSpread2(_objectSpread2({}, rest), {}, {
-    sx: {
+    inset: "medium",
+    sx: _objectSpread2(_objectSpread2({
       maxWidth: maxWidth,
       width: width,
       minWidth: minWidth,
-      border: border,
-      height: height || "100%",
+      border: border || "1px solid",
+      height: height,
       display: "flex",
       alignItems: "center",
-      justifyContent: "center",
-      padding: "16px"
-    }
-  }), /* @__PURE__ */React.createElement(Box, null, /* @__PURE__ */React.createElement(Heading, {
+      justifyContent: "center"
+    }, border ? {} : {
+      borderColor: "grey.300"
+    }), sx)
+  }), /* @__PURE__ */React.createElement(Stack, {
+    color: "text.primary"
+  }, /* @__PURE__ */React.createElement(Heading, {
     align: "center",
     weight: "700",
     as: "h3",
+    color: "primary",
     gutterBottom: true
   }, amount), /* @__PURE__ */React.createElement(Text, {
     align: "center",
-    weight: "400",
-    variant: "body2"
+    weight: "500",
+    variant: "body2",
+    color: "primary"
   }, label), text && /* @__PURE__ */React.createElement(Text, {
     align: "center",
     weight: "400",
+    color: "primary",
     sx: {
       fontSize: {
         xs: 8,
-        sm: 10,
-        xl: 14
+        sm: 10
       },
-      lineHeight: "15.6px",
+      lineHeight: "13px",
       maxWidth: "366px",
-      mt: "8px"
+      mt: 1
     }
   }, text)));
 }

package/dist/esm/components/AnalyticsSection.js

@@ -1,7 +1,10 @@
 import React from 'react';
-import { useMediaQuery, Box, Paper, Text } from '@tenancy.nz/ui';
+import { uid } from 'react-uid';
+import Stack from '@mui/material/Stack';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import { Paper, Text, Grid } from '@tenancy.nz/ui';
 import AnalyticsBox from './AnalyticsBox.js';
-import EnquiriesDoughnutChart from './EnquiriesDoughnutChart.js';
+import AnalyticsDoughnutChart from './analytics-doughnut-chart.js';
 
 function AnalyticsSection(_ref) {
   var viewingsCount = _ref.viewingsCount,
@@ -11,158 +14,163 @@ function AnalyticsSection(_ref) {
     applicationsCount = _ref.applicationsCount,
     averageRent = _ref.averageRent,
     textUsage = _ref.textUsage,
-    tradeMeEnquiriesCount = _ref.tradeMeEnquiriesCount,
-    bookMeEnquiriesCount = _ref.bookMeEnquiriesCount,
-    manualEnquiryCount = _ref.manualEnquiryCount,
     agreementsCount = _ref.agreementsCount,
     agreementsFinalisedCount = _ref.agreementsFinalisedCount,
-    filterDaysCount = _ref.filterDaysCount;
+    filterDaysCount = _ref.filterDaysCount,
+    allHouseEnquiriesCount = _ref.allHouseEnquiriesCount,
+    bookMeEnquiriesCount = _ref.bookMeEnquiriesCount,
+    oneRoofEnquiriesCount = _ref.oneRoofEnquiriesCount,
+    realestateEnquiriesCount = _ref.realestateEnquiriesCount,
+    tradeMeEnquiriesCount = _ref.tradeMeEnquiriesCount,
+    manualEnquiryCount = _ref.manualEnquiryCount,
+    allHouseBookingsCount = _ref.allHouseBookingsCount,
+    bookMeBookingsCount = _ref.bookMeBookingsCount,
+    oneRoofBookingsCount = _ref.oneRoofBookingsCount,
+    realestateBookingsCount = _ref.realestateBookingsCount,
+    tradeMeBookingsCount = _ref.tradeMeBookingsCount,
+    manualBookingsCount = _ref.manualBookingsCount;
   var isXlUp = useMediaQuery(function (theme) {
     return theme.breakpoints.up("xl");
   });
-  return /* @__PURE__ */React.createElement(Box, {
-    display: "flex",
-    align: "stretch",
-    direction: {
-      xs: "column-reverse",
-      mlg: "row"
-    },
-    gap: "27px"
-  }, /* @__PURE__ */React.createElement(Box, {
-    width: "100%",
-    sx: {
-      maxWidth: {
-        xs: "100%",
-        mob: "340px",
-        xl: "463px"
-      }
-    }
+  var stats = [{
+    label: "Viewings",
+    value: viewingsCount
+  }, {
+    label: "Bookings",
+    value: bookingsCount
+  }, {
+    label: "Attendees",
+    value: attendeesCount
+  }, {
+    label: "Cancellations",
+    value: cancellationsCount
+  }, {
+    label: "Applications",
+    value: applicationsCount
+  }, {
+    label: "Average Rent",
+    value: "$".concat(averageRent)
+  }, {
+    label: "Text Usage Total",
+    value: textUsage
+  }];
+  return /* @__PURE__ */React.createElement(Stack, {
+    gap: 6
+  }, /* @__PURE__ */React.createElement(Stack, {
+    flexDirection: "row",
+    gap: 6,
+    flexWrap: "wrap",
+    alignItems: "stretch"
   }, /* @__PURE__ */React.createElement(Paper, {
     outlined: true,
+    inset: "medium",
+    overflow: false,
     sx: {
       width: "100%",
-      position: "relative",
-      height: "100%"
+      minWidth: {
+        sm: "456px"
+      },
+      flex: {
+        xs: "0 0 100%",
+        sm: 1
+      },
+      alignItems: "center",
+      justifyContent: "center",
+      display: "flex"
     }
-  }, /* @__PURE__ */React.createElement(Box, {
-    mt: "20px",
-    height: "100%"
-  }, /* @__PURE__ */React.createElement(EnquiriesDoughnutChart, {
-    tradeMeEnquiriesCount: tradeMeEnquiriesCount,
-    bookMeEnquiriesCount: bookMeEnquiriesCount,
-    manualEnquiryCount: manualEnquiryCount
-  })))), /* @__PURE__ */React.createElement(Box, {
-    width: "100%"
-  }, /* @__PURE__ */React.createElement(Box, {
-    display: "flex",
-    direction: "row",
-    width: "100%",
-    gap: 6
-  }, /* @__PURE__ */React.createElement(Box, {
-    flex: 3
-  }, /* @__PURE__ */React.createElement(Box, {
-    display: "flex",
-    gap: 6
-  }, /* @__PURE__ */React.createElement(AnalyticsBox, {
-    outlined: true,
-    label: "Viewings",
-    amount: viewingsCount,
-    width: "100%",
-    height: isXlUp ? "157px" : "125px"
-  }), /* @__PURE__ */React.createElement(AnalyticsBox, {
-    outlined: true,
-    label: "Bookings",
-    amount: bookingsCount,
-    width: "100%",
-    height: isXlUp ? "157px" : "125px"
-  }), /* @__PURE__ */React.createElement(AnalyticsBox, {
+  }, /* @__PURE__ */React.createElement(AnalyticsDoughnutChart, {
+    tradeMeCount: tradeMeEnquiriesCount,
+    bookMeCount: bookMeEnquiriesCount,
+    manualCount: manualEnquiryCount,
+    allhouseCount: allHouseEnquiriesCount,
+    oneRoofCount: oneRoofEnquiriesCount,
+    realEstateCount: realestateEnquiriesCount,
+    heading: "Number of enquiries"
+  })), /* @__PURE__ */React.createElement(Paper, {
     outlined: true,
-    label: "Attendees",
-    amount: attendeesCount,
-    width: "100%",
-    border: "3px solid #6FD3C0",
-    height: isXlUp ? "157px" : "125px"
-  })), /* @__PURE__ */React.createElement(Box, {
-    display: "flex",
-    width: "100%",
-    gap: 6,
-    mt: 6
+    inset: "medium",
+    overflow: false,
+    sx: {
+      width: "100%",
+      minWidth: {
+        sm: "456px"
+      },
+      flex: {
+        xs: "0 0 100%",
+        sm: 1
+      },
+      alignItems: "center",
+      justifyContent: "center",
+      display: "flex"
+    }
+  }, /* @__PURE__ */React.createElement(AnalyticsDoughnutChart, {
+    tradeMeCount: tradeMeBookingsCount,
+    bookMeCount: bookMeBookingsCount,
+    manualCount: manualBookingsCount,
+    allhouseCount: allHouseBookingsCount,
+    oneRoofCount: oneRoofBookingsCount,
+    realEstateCount: realestateBookingsCount,
+    heading: "Number of bookings"
+  })), /* @__PURE__ */React.createElement(Stack, {
+    gap: {
+      xs: 3,
+      md: 6
+    },
+    justifyContent: "space-between",
+    sx: {
+      flexDirection: {
+        xs: "row",
+        lg: "column"
+      },
+      flex: {
+        sm: "0 0 100%",
+        lg: "0 0 284px"
+      }
+    }
   }, /* @__PURE__ */React.createElement(AnalyticsBox, {
     outlined: true,
-    label: "Converted Properties",
+    label: /* @__PURE__ */React.createElement("strong", null, "Converted Properties"),
     amount: agreementsCount,
     width: "100%",
-    height: isXlUp ? "157px" : "125px",
-    text: /* @__PURE__ */React.createElement(Box, {
-      as: "span",
-      maxWidth: "276px"
-    }, "Properties that have had a viewing in the last", " ", /* @__PURE__ */React.createElement(Text, {
+    height: isXlUp ? "157px" : "auto",
+    text: /* @__PURE__ */React.createElement(Text, {
       as: "span",
-      display: "inline",
-      weight: "700",
-      fontSize: "inherit"
-    }, filterDaysCount), " ", "days where an agreement has been", " ", /* @__PURE__ */React.createElement(Text, {
-      as: "span",
-      display: "inline",
-      weight: "700",
-      fontSize: "inherit"
-    }, "created"))
+      variant: "inherit"
+    }, "Properties that have had a viewing in the last", " ", /* @__PURE__ */React.createElement("strong", null, filterDaysCount), " days where an agreement has been ", /* @__PURE__ */React.createElement("strong", null, "created"))
   }), /* @__PURE__ */React.createElement(AnalyticsBox, {
     outlined: true,
-    label: "Converted Properties",
+    label: /* @__PURE__ */React.createElement("strong", null, "Converted Properties"),
     amount: agreementsFinalisedCount,
     width: "100%",
-    height: isXlUp ? "157px" : "125px",
-    text: /* @__PURE__ */React.createElement(Box, {
-      as: "span",
-      maxWidth: "276px"
-    }, "Properties that have had a viewing in the last", " ", /* @__PURE__ */React.createElement(Text, {
+    height: isXlUp ? "157px" : "auto",
+    text: /* @__PURE__ */React.createElement(Text, {
       as: "span",
-      display: "inline",
-      weight: "700",
-      fontSize: "inherit"
-    }, filterDaysCount), " ", "days where an agreement has been", " ", /* @__PURE__ */React.createElement(Text, {
-      as: "span",
-      display: "inline",
-      weight: "700",
-      fontSize: "inherit"
-    }, "finalised"))
-  }))), /* @__PURE__ */React.createElement(Box, {
-    flex: 2
-  }, /* @__PURE__ */React.createElement(Box, {
-    display: "flex",
-    gap: 6
-  }, /* @__PURE__ */React.createElement(AnalyticsBox, {
-    outlined: true,
-    label: "Cancellations",
-    amount: cancellationsCount,
-    width: "100%",
-    border: "3px solid #ED0D8D",
-    height: isXlUp ? "157px" : "125px"
-  }), /* @__PURE__ */React.createElement(AnalyticsBox, {
-    outlined: true,
-    label: "Applications",
-    amount: applicationsCount,
-    width: "100%",
-    border: "3px solid #F5C440",
-    height: isXlUp ? "157px" : "125px"
-  })), /* @__PURE__ */React.createElement(Box, {
-    display: "flex",
-    gap: 6,
-    mt: 6
-  }, /* @__PURE__ */React.createElement(AnalyticsBox, {
-    outlined: true,
-    label: /* @__PURE__ */React.createElement("span", null, "Average", /* @__PURE__ */React.createElement("br", null), " Rent"),
-    amount: averageRent,
-    width: "100%",
-    height: isXlUp ? "157px" : "125px"
-  }), /* @__PURE__ */React.createElement(AnalyticsBox, {
-    outlined: true,
-    label: /* @__PURE__ */React.createElement("span", null, "Text Usage", /* @__PURE__ */React.createElement("br", null), " Total"),
-    amount: textUsage,
-    width: "100%",
-    height: isXlUp ? "157px" : "125px"
-  }))))));
+      variant: "inherit"
+    }, "Properties that have had a viewing in the last", " ", /* @__PURE__ */React.createElement("strong", null, " ", filterDaysCount), " days where an agreement has been ", /* @__PURE__ */React.createElement("strong", null, "finalised"))
+  })), /* @__PURE__ */React.createElement(Grid, {
+    container: true,
+    spacing: {
+      xs: 3,
+      md: 6
+    }
+  }, stats.map(function (stat, i) {
+    return /* @__PURE__ */React.createElement(Grid, {
+      item: true,
+      key: uid(stat, i),
+      flex: {
+        lg: 1
+      },
+      xs: 6,
+      sm: 3,
+      md: 2
+    }, /* @__PURE__ */React.createElement(AnalyticsBox, {
+      outlined: true,
+      label: stat.label,
+      amount: stat.value,
+      width: "100%",
+      height: isXlUp ? "157px" : "124px"
+    }));
+  }))));
 }
 
 export { AnalyticsSection as default };