@tenancy.nz/feature-ui 1.4.11 → 1.5.1

package/dist/cjs/components/AgentDetailsCard.cjs

@@ -4,7 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var ui = require('@tenancy.nz/ui');
-var icons = require('@tenancy.nz/icons');
+var EmailRoundedIcon = require('@mui/icons-material/EmailRounded');
+var PhoneRoundedIcon = require('@mui/icons-material/PhoneRounded');
+var PersonRoundedIcon = require('@mui/icons-material/PersonRounded');
 var IconLabel = require('./IconLabel.cjs');
 
 function AgentDetailsCard(_ref) {
@@ -33,8 +35,8 @@ function AgentDetailsCard(_ref) {
     variant: "text"
   }) : /* @__PURE__ */React.createElement(IconLabel.default, {
     color: "tertiary.main",
-    startIcon: /* @__PURE__ */React.createElement(icons.UserIcon, {
-      size: "24px"
+    startIcon: /* @__PURE__ */React.createElement(PersonRoundedIcon, {
+      fontSize: "small"
     })
   }, /* @__PURE__ */React.createElement(ui.Heading, {
     as: "h5",
@@ -45,8 +47,8 @@ function AgentDetailsCard(_ref) {
     variant: "text"
   }) : /* @__PURE__ */React.createElement(IconLabel.default, {
     color: "tertiary.main",
-    startIcon: /* @__PURE__ */React.createElement(icons.PhoneIcon, {
-      size: "24px"
+    startIcon: /* @__PURE__ */React.createElement(PhoneRoundedIcon, {
+      fontSize: "small"
     })
   }, /* @__PURE__ */React.createElement(ui.Text, {
     as: "span",
@@ -59,8 +61,8 @@ function AgentDetailsCard(_ref) {
     variant: "text"
   }) : /* @__PURE__ */React.createElement(IconLabel.default, {
     color: "tertiary.main",
-    startIcon: /* @__PURE__ */React.createElement(icons.EnvelopeIcon, {
-      size: "24px"
+    startIcon: /* @__PURE__ */React.createElement(EmailRoundedIcon, {
+      fontSize: "small"
     })
   }, /* @__PURE__ */React.createElement(ui.Text, {
     as: "span",

package/dist/cjs/components/AnalyticsBox.cjs

@@ -4,9 +4,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.cjs');
 var React = require('react');
+var Stack = require('@mui/material/Stack');
 var ui = require('@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,
@@ -16,40 +17,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 = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   return /* @__PURE__ */React.createElement(ui.Paper, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, rest), {}, {
-    sx: {
+    inset: "medium",
+    sx: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.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(ui.Box, null, /* @__PURE__ */React.createElement(ui.Heading, {
+      justifyContent: "center"
+    }, border ? {} : {
+      borderColor: "grey.300"
+    }), sx)
+  }), /* @__PURE__ */React.createElement(Stack, {
+    color: "text.primary"
+  }, /* @__PURE__ */React.createElement(ui.Heading, {
     align: "center",
     weight: "700",
     as: "h3",
+    color: "primary",
     gutterBottom: true
   }, amount), /* @__PURE__ */React.createElement(ui.Text, {
     align: "center",
-    weight: "400",
-    variant: "body2"
+    weight: "500",
+    variant: "body2",
+    color: "primary"
   }, label), text && /* @__PURE__ */React.createElement(ui.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/cjs/components/AnalyticsSection.cjs

@@ -3,9 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
+var reactUid = require('react-uid');
+var Stack = require('@mui/material/Stack');
+var useMediaQuery = require('@mui/material/useMediaQuery');
 var ui = require('@tenancy.nz/ui');
 var AnalyticsBox = require('./AnalyticsBox.cjs');
-var EnquiriesDoughnutChart = require('./EnquiriesDoughnutChart.cjs');
+var analyticsDoughnutChart = require('./analytics-doughnut-chart.cjs');
 
 function AnalyticsSection(_ref) {
   var viewingsCount = _ref.viewingsCount,
@@ -15,158 +18,165 @@ 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;
-  var isXlUp = ui.useMediaQuery(function (theme) {
+    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,
+    _ref$outlinedItems = _ref.outlinedItems,
+    outlinedItems = _ref$outlinedItems === void 0 ? false : _ref$outlinedItems;
+  var isXlUp = useMediaQuery(function (theme) {
     return theme.breakpoints.up("xl");
   });
-  return /* @__PURE__ */React.createElement(ui.Box, {
-    display: "flex",
-    align: "stretch",
-    direction: {
-      xs: "column-reverse",
-      mlg: "row"
-    },
-    gap: "27px"
-  }, /* @__PURE__ */React.createElement(ui.Box, {
-    width: "100%",
+  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(ui.Paper, {
+    outlined: outlinedItems,
+    inset: "medium",
+    overflow: false,
     sx: {
-      maxWidth: {
-        xs: "100%",
-        mob: "340px",
-        xl: "463px"
-      }
+      width: "100%",
+      minWidth: {
+        lg: "456px"
+      },
+      flex: {
+        xs: "0 0 100%",
+        md: 1
+      },
+      alignItems: "center",
+      justifyContent: "center",
+      display: "flex"
     }
-  }, /* @__PURE__ */React.createElement(ui.Paper, {
-    outlined: true,
+  }, /* @__PURE__ */React.createElement(analyticsDoughnutChart.default, {
+    tradeMeCount: tradeMeEnquiriesCount,
+    bookMeCount: bookMeEnquiriesCount,
+    manualCount: manualEnquiryCount,
+    allhouseCount: allHouseEnquiriesCount,
+    oneRoofCount: oneRoofEnquiriesCount,
+    realEstateCount: realestateEnquiriesCount,
+    heading: "Number of enquiries"
+  })), /* @__PURE__ */React.createElement(ui.Paper, {
+    outlined: outlinedItems,
+    inset: "medium",
+    overflow: false,
     sx: {
       width: "100%",
-      position: "relative",
-      height: "100%"
+      minWidth: {
+        lg: "456px"
+      },
+      flex: {
+        xs: "0 0 100%",
+        md: 1
+      },
+      alignItems: "center",
+      justifyContent: "center",
+      display: "flex"
+    }
+  }, /* @__PURE__ */React.createElement(analyticsDoughnutChart.default, {
+    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(ui.Box, {
-    mt: "20px",
-    height: "100%"
-  }, /* @__PURE__ */React.createElement(EnquiriesDoughnutChart.default, {
-    tradeMeEnquiriesCount: tradeMeEnquiriesCount,
-    bookMeEnquiriesCount: bookMeEnquiriesCount,
-    manualEnquiryCount: manualEnquiryCount
-  })))), /* @__PURE__ */React.createElement(ui.Box, {
-    width: "100%"
-  }, /* @__PURE__ */React.createElement(ui.Box, {
-    display: "flex",
-    direction: "row",
-    width: "100%",
-    gap: 6
-  }, /* @__PURE__ */React.createElement(ui.Box, {
-    flex: 3
-  }, /* @__PURE__ */React.createElement(ui.Box, {
-    display: "flex",
-    gap: 6
-  }, /* @__PURE__ */React.createElement(AnalyticsBox.default, {
-    outlined: true,
-    label: "Viewings",
-    amount: viewingsCount,
-    width: "100%",
-    height: isXlUp ? "157px" : "125px"
-  }), /* @__PURE__ */React.createElement(AnalyticsBox.default, {
-    outlined: true,
-    label: "Bookings",
-    amount: bookingsCount,
-    width: "100%",
-    height: isXlUp ? "157px" : "125px"
-  }), /* @__PURE__ */React.createElement(AnalyticsBox.default, {
-    outlined: true,
-    label: "Attendees",
-    amount: attendeesCount,
-    width: "100%",
-    border: "3px solid #6FD3C0",
-    height: isXlUp ? "157px" : "125px"
-  })), /* @__PURE__ */React.createElement(ui.Box, {
-    display: "flex",
-    width: "100%",
-    gap: 6,
-    mt: 6
   }, /* @__PURE__ */React.createElement(AnalyticsBox.default, {
-    outlined: true,
-    label: "Converted Properties",
+    outlined: outlinedItems,
+    label: /* @__PURE__ */React.createElement("strong", null, "Converted Properties"),
     amount: agreementsCount,
     width: "100%",
-    height: isXlUp ? "157px" : "125px",
-    text: /* @__PURE__ */React.createElement(ui.Box, {
-      as: "span",
-      maxWidth: "276px"
-    }, "Properties that have had a viewing in the last", " ", /* @__PURE__ */React.createElement(ui.Text, {
-      as: "span",
-      display: "inline",
-      weight: "700",
-      fontSize: "inherit"
-    }, filterDaysCount), " ", "days where an agreement has been", " ", /* @__PURE__ */React.createElement(ui.Text, {
+    height: isXlUp ? "157px" : "auto",
+    text: /* @__PURE__ */React.createElement(ui.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.default, {
-    outlined: true,
-    label: "Converted Properties",
+    outlined: outlinedItems,
+    label: /* @__PURE__ */React.createElement("strong", null, "Converted Properties"),
     amount: agreementsFinalisedCount,
     width: "100%",
-    height: isXlUp ? "157px" : "125px",
-    text: /* @__PURE__ */React.createElement(ui.Box, {
+    height: isXlUp ? "157px" : "auto",
+    text: /* @__PURE__ */React.createElement(ui.Text, {
       as: "span",
-      maxWidth: "276px"
-    }, "Properties that have had a viewing in the last", " ", /* @__PURE__ */React.createElement(ui.Text, {
-      as: "span",
-      display: "inline",
-      weight: "700",
-      fontSize: "inherit"
-    }, filterDaysCount), " ", "days where an agreement has been", " ", /* @__PURE__ */React.createElement(ui.Text, {
-      as: "span",
-      display: "inline",
-      weight: "700",
-      fontSize: "inherit"
-    }, "finalised"))
-  }))), /* @__PURE__ */React.createElement(ui.Box, {
-    flex: 2
-  }, /* @__PURE__ */React.createElement(ui.Box, {
-    display: "flex",
-    gap: 6
-  }, /* @__PURE__ */React.createElement(AnalyticsBox.default, {
-    outlined: true,
-    label: "Cancellations",
-    amount: cancellationsCount,
-    width: "100%",
-    border: "3px solid #ED0D8D",
-    height: isXlUp ? "157px" : "125px"
-  }), /* @__PURE__ */React.createElement(AnalyticsBox.default, {
-    outlined: true,
-    label: "Applications",
-    amount: applicationsCount,
-    width: "100%",
-    border: "3px solid #F5C440",
-    height: isXlUp ? "157px" : "125px"
-  })), /* @__PURE__ */React.createElement(ui.Box, {
-    display: "flex",
-    gap: 6,
-    mt: 6
-  }, /* @__PURE__ */React.createElement(AnalyticsBox.default, {
-    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.default, {
-    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(ui.Grid, {
+    container: true,
+    spacing: {
+      xs: 3,
+      md: 6
+    }
+  }, stats.map(function (stat, i) {
+    return /* @__PURE__ */React.createElement(ui.Grid, {
+      item: true,
+      key: reactUid.uid(stat, i),
+      flex: {
+        lg: 1
+      },
+      xs: 6,
+      sm: 3,
+      md: 2
+    }, /* @__PURE__ */React.createElement(AnalyticsBox.default, {
+      outlined: outlinedItems,
+      label: stat.label,
+      amount: stat.value,
+      width: "100%",
+      height: isXlUp ? "157px" : "124px"
+    }));
+  }))));
 }
 
 exports.default = AnalyticsSection;

package/dist/cjs/components/ChartLegend.cjs

@@ -0,0 +1,43 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.cjs');
+var React = require('react');
+var Stack = require('@mui/material/Stack');
+var ui = require('@tenancy.nz/ui');
+
+function ChartLegend(_ref) {
+  var _ref$color = _ref.color,
+    color = _ref$color === void 0 ? void 0 : _ref$color,
+    _ref$count = _ref.count,
+    count = _ref$count === void 0 ? void 0 : _ref$count,
+    label = _ref.label,
+    _ref$sx = _ref.sx,
+    sx = _ref$sx === void 0 ? {} : _ref$sx;
+  return /* @__PURE__ */React.createElement(Stack, {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 1.5,
+    sx: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, sx), {}, {
+      userSelect: "none",
+      fontSize: "12px"
+    })
+  }, /* @__PURE__ */React.createElement(ui.Box, {
+    borderRadius: "4px",
+    width: "32px",
+    height: "18px",
+    bgcolor: color || "#D9D9D9"
+  }), /* @__PURE__ */React.createElement(ui.Box, {
+    minWidth: "24px"
+  }, count !== void 0 && count >= 0 && /* @__PURE__ */React.createElement(ui.Text, {
+    align: "center",
+    weight: "700",
+    variant: "inherit"
+  }, count)), typeof label !== "string" ? label : /* @__PURE__ */React.createElement(ui.Text, {
+    weight: "500",
+    variant: "inherit"
+  }, label));
+}
+
+exports.default = ChartLegend;

package/dist/cjs/components/CheckedIcon.cjs

@@ -3,21 +3,26 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var icons = require('@tenancy.nz/icons');
+var CheckCircleOutlineRoundedIcon = require('@mui/icons-material/CheckCircleOutlineRounded');
+var HighlightOffRoundedIcon = require('@mui/icons-material/HighlightOffRounded');
 var ui = require('@tenancy.nz/ui');
 
 function CheckedIcon(_ref) {
   var value = _ref.value;
   if (value === true) {
-    return /* @__PURE__ */React.createElement(icons.CircleCheckIcon, {
-      color: "success.main",
-      size: "20px"
+    return /* @__PURE__ */React.createElement(CheckCircleOutlineRoundedIcon, {
+      sx: {
+        color: "success.main"
+      },
+      fontSize: "small"
     });
   }
   if (value === false) {
-    return /* @__PURE__ */React.createElement(icons.CircleTimesIcon, {
-      color: "error.main",
-      size: "20px"
+    return /* @__PURE__ */React.createElement(HighlightOffRoundedIcon, {
+      sx: {
+        color: "error.main"
+      },
+      fontSize: "small"
     });
   }
   return /* @__PURE__ */React.createElement(ui.Text, {