@tenancy.nz/feature-ui 1.4.11 → 1.5.1

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,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;
+    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(Box, {
-    display: "flex",
-    align: "stretch",
-    direction: {
-      xs: "column-reverse",
-      mlg: "row"
-    },
-    gap: "27px"
-  }, /* @__PURE__ */React.createElement(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(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(Paper, {
-    outlined: true,
+  }, /* @__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: 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, {
+    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(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, {
-    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
   }, /* @__PURE__ */React.createElement(AnalyticsBox, {
-    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(Box, {
-      as: "span",
-      maxWidth: "276px"
-    }, "Properties that have had a viewing in the last", " ", /* @__PURE__ */React.createElement(Text, {
-      as: "span",
-      display: "inline",
-      weight: "700",
-      fontSize: "inherit"
-    }, filterDaysCount), " ", "days where an agreement has been", " ", /* @__PURE__ */React.createElement(Text, {
+    height: isXlUp ? "157px" : "auto",
+    text: /* @__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",
+    outlined: outlinedItems,
+    label: /* @__PURE__ */React.createElement("strong", null, "Converted Properties"),
     amount: agreementsFinalisedCount,
     width: "100%",
-    height: isXlUp ? "157px" : "125px",
-    text: /* @__PURE__ */React.createElement(Box, {
+    height: isXlUp ? "157px" : "auto",
+    text: /* @__PURE__ */React.createElement(Text, {
       as: "span",
-      maxWidth: "276px"
-    }, "Properties that have had a viewing in the last", " ", /* @__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: outlinedItems,
+      label: stat.label,
+      amount: stat.value,
+      width: "100%",
+      height: isXlUp ? "157px" : "124px"
+    }));
+  }))));
 }
 
 export { AnalyticsSection as default };

package/dist/esm/components/ChartLegend.js

@@ -0,0 +1,39 @@
+import { objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
+import React from 'react';
+import Stack from '@mui/material/Stack';
+import { Box, Text } from '@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: _objectSpread2(_objectSpread2({}, sx), {}, {
+      userSelect: "none",
+      fontSize: "12px"
+    })
+  }, /* @__PURE__ */React.createElement(Box, {
+    borderRadius: "4px",
+    width: "32px",
+    height: "18px",
+    bgcolor: color || "#D9D9D9"
+  }), /* @__PURE__ */React.createElement(Box, {
+    minWidth: "24px"
+  }, count !== void 0 && count >= 0 && /* @__PURE__ */React.createElement(Text, {
+    align: "center",
+    weight: "700",
+    variant: "inherit"
+  }, count)), typeof label !== "string" ? label : /* @__PURE__ */React.createElement(Text, {
+    weight: "500",
+    variant: "inherit"
+  }, label));
+}
+
+export { ChartLegend as default };

package/dist/esm/components/CheckedIcon.js

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

package/dist/esm/components/PropertyCard.js

@@ -1,7 +1,10 @@
 import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
 import React from 'react';
 import { Paper, Media, Box, Heading, Text } from '@tenancy.nz/ui';
-import { Icon } from '@tenancy.nz/icons';
+import Stack from '@mui/material/Stack';
+import BedRoundedIcon from '@mui/icons-material/BedRounded';
+import BathtubRoundedIcon from '@mui/icons-material/BathtubRounded';
+import DirectionsCarRoundedIcon from '@mui/icons-material/DirectionsCarRounded';
 import IconLabel from './IconLabel.js';
 import { StyledPropertyImage, StyledPropertyDetailsBox, StyledPropertyAmenitiesBox } from './PropertyCard.styled.js';
 
@@ -32,7 +35,6 @@ function PropertyCard(_ref) {
       alignItems: "center"
     }
   }, rest), /* @__PURE__ */React.createElement(StyledPropertyImage, null, /* @__PURE__ */React.createElement(Media, {
-    as: "img",
     title: address,
     src: imgSrc
   })), /* @__PURE__ */React.createElement(StyledPropertyDetailsBox, null, /* @__PURE__ */React.createElement(Box, null, /* @__PURE__ */React.createElement(Heading, {
@@ -49,6 +51,10 @@ function PropertyCard(_ref) {
         xs: "10px",
         sm: 0
       },
+      width: {
+        xs: "100%",
+        sm: "auto"
+      },
       "@media print": {
         ml: "auto"
       }
@@ -56,84 +62,99 @@ function PropertyCard(_ref) {
   }, /* @__PURE__ */React.createElement(StyledPropertyAmenitiesBox, null, rent && /* @__PURE__ */React.createElement(Heading, {
     as: "h4",
     weight: "700"
-  }, rent), /* @__PURE__ */React.createElement(Box, {
-    fontSize: "16px"
+  }, rent), /* @__PURE__ */React.createElement(Stack, {
+    sx: {
+      fontSize: "16px",
+      fontWeight: "600"
+    },
+    flexDirection: "row",
+    gap: 3,
+    alignItems: "center"
   }, (noOfBedrooms || String(noOfBedrooms) === "0") && /* @__PURE__ */React.createElement(IconLabel, {
     color: "text.primary",
-    startIcon: /* @__PURE__ */React.createElement(Icon, {
-      size: 21,
-      color: "inherit",
-      name: "bed"
+    startIcon: /* @__PURE__ */React.createElement(BedRoundedIcon, {
+      sx: {
+        color: "tertiary.main"
+      },
+      fontSize: "small"
     })
   }, /* @__PURE__ */React.createElement(Text, {
     as: "span",
     variant: "inherit"
   }, noOfBedrooms)), (noOfBathrooms || String(noOfBathrooms) === "0") && /* @__PURE__ */React.createElement(IconLabel, {
     color: "text.primary",
-    startIcon: /* @__PURE__ */React.createElement(Icon, {
-      size: 21,
-      color: "inherit",
-      name: "bath"
-    }),
-    marginLeft: 3
+    startIcon: /* @__PURE__ */React.createElement(BathtubRoundedIcon, {
+      sx: {
+        color: "tertiary.main"
+      },
+      fontSize: "small"
+    })
   }, /* @__PURE__ */React.createElement(Text, {
     as: "span",
     variant: "inherit"
   }, noOfBathrooms)), (noOfCarparks || String(noOfCarparks) === "0") && /* @__PURE__ */React.createElement(IconLabel, {
     color: "text.primary",
-    startIcon: /* @__PURE__ */React.createElement(Icon, {
-      size: 21,
-      color: "inherit",
-      name: "car"
-    }),
-    marginLeft: 3
+    startIcon: /* @__PURE__ */React.createElement(DirectionsCarRoundedIcon, {
+      sx: {
+        color: "tertiary.main"
+      },
+      fontSize: "small"
+    })
   }, /* @__PURE__ */React.createElement(Text, {
     as: "span",
     variant: "inherit"
   }, noOfCarparks)))), !compact && /* @__PURE__ */React.createElement(Box, {
-    paddingLeft: "25px",
-    borderLeft: "1px solid #00000040",
+    paddingLeft: "24px",
     display: "flex",
     direction: "column",
     sx: {
       gap: {
-        xs: "18px",
-        lg: "10px",
+        xs: 4,
+        lg: 2,
         xl: 0
       },
-      justifyContent: "space-between"
+      justifyContent: "space-between",
+      borderLeft: {
+        xs: "none",
+        sm: "1px solid"
+      },
+      borderLeftColor: {
+        xs: "transparent",
+        sm: "grey.300"
+      },
+      ml: {
+        xs: "auto",
+        sm: "0"
+      }
     }
-  }, viewingsCount && /* @__PURE__ */React.createElement(Box, {
+  }, viewingsCount !== void 0 && /* @__PURE__ */React.createElement(Box, {
     display: "flex",
     align: "center",
-    gap: "12px"
+    gap: 2
   }, /* @__PURE__ */React.createElement(Box, {
-    minWidth: "87px"
+    minWidth: "67px"
   }, /* @__PURE__ */React.createElement(Text, {
-    transform: "uppercase",
     color: "textPrimary",
     as: "span",
-    weight: "600",
+    weight: "500",
     align: "right",
-    lineHeight: "15px"
+    variant: "body2"
   }, "Viewings")), /* @__PURE__ */React.createElement(Heading, {
-    as: "h2"
-  }, viewingsCount)), enquiriesCount && /* @__PURE__ */React.createElement(Box, {
+    as: "h4"
+  }, viewingsCount)), enquiriesCount !== void 0 && /* @__PURE__ */React.createElement(Box, {
     display: "flex",
     align: "center",
-    gap: "12px"
+    gap: 2
   }, /* @__PURE__ */React.createElement(Box, {
-    minWidth: "87px"
+    minWidth: "67px"
   }, /* @__PURE__ */React.createElement(Text, {
-    transform: "uppercase",
+    variant: "body2",
     color: "textPrimary",
     as: "span",
-    weight: "600",
-    minWidth: "87px",
-    align: "right",
-    lineHeight: "15px"
+    weight: "500",
+    align: "right"
   }, "Enquiries")), /* @__PURE__ */React.createElement(Heading, {
-    as: "h2"
+    as: "h4"
   }, enquiriesCount))))));
 }
 

package/dist/esm/components/PropertyCard.styled.js

@@ -3,7 +3,7 @@ import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-var StyledPropertyImage = styled.figure(_templateObject || (_templateObject = _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 = _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 css(_templateObject2 || (_templateObject2 = _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"));
 });
@@ -11,9 +11,9 @@ var StyledPropertyDetailsBox = styled.div(_templateObject3 || (_templateObject3
   var theme = _ref2.theme;
   return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    ", " {\n      flex-direction: row;\n      align-items: center;\n    }\n  "])), theme.breakpoints.up("sm"));
 });
-var StyledPropertyAmenitiesBox = styled.div(_templateObject5 || (_templateObject5 = _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 = _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  ");
+  return "\n    @media (min-width: ".concat(theme.breakpoints.values.sm, "px) {\n      align-items: flex-end;\n    }\n  ");
 });
 
 export { StyledPropertyAmenitiesBox, StyledPropertyDetailsBox, StyledPropertyImage };

package/dist/esm/components/analytics-doughnut-chart.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import DoughnutChart from './doughnut-chart.js';
+import { parseChartCount } from '../utils/helpers/general.js';
+
+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: parseChartCount(bookMeCount),
+    slug: "bookme",
+    title: "Tenant Portal"
+  }, {
+    color: "#000000",
+    count: parseChartCount(allhouseCount),
+    slug: "allhouse",
+    title: "Allhouse"
+  }, {
+    color: "#FF8500",
+    count: parseChartCount(oneRoofCount),
+    slug: "oneroof",
+    title: "OneRoof"
+  }, {
+    color: "#0098FF",
+    count: parseChartCount(realEstateCount),
+    slug: "realestate",
+    title: "realestate.co.nz"
+  }, {
+    color: "#4854D3",
+    count: parseChartCount(tradeMeCount),
+    slug: "trademe",
+    title: "Trade Me"
+  }, {
+    color: "#D9D9D9",
+    count: parseChartCount(manualCount),
+    slug: "manual",
+    title: "Manually Generated"
+  }];
+  return /* @__PURE__ */React.createElement(DoughnutChart, {
+    data: data,
+    heading: heading
+  });
+}
+
+export { AnalyticsDoughnutChart as default };