@tenancy.nz/feature-ui 1.0.0 → 1.0.2

package/dist/esm/components/BookingChart.js

@@ -0,0 +1,122 @@
+"use strict";
+import { slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
+import React, { useMemo } from 'react';
+import { Box } from '@tenancy.nz/ui';
+import { Chart } from 'primereact/chart';
+import { StyledBookingChartStack, StyledBookingChartLegend, StyledBookingChartButton } from './BookingChart.styled.js';
+
+var defaultOptions = {
+  scaleFontColor: "black",
+  legend: {
+    display: false
+  },
+  plugins: {
+    datalabels: {
+      align: "centre",
+      font: {
+        weight: "700",
+        size: 12,
+        family: "Montserrat, sans-serif"
+      },
+      display: function display(ctx) {
+        return ctx.dataset.data[ctx.dataIndex] > 0;
+      }
+    }
+  },
+  scales: {
+    xAxes: [{
+      gridLines: {
+        labelString: "Date",
+        display: false
+      },
+      ticks: {
+        fontSize: 13,
+        family: "Montserrat, sans-serif",
+        fontWeight: "bold"
+      },
+      stacked: true
+    }],
+    yAxes: [{
+      scaleLabel: {
+        display: true,
+        labelString: "Total bookings",
+        fontFamily: "Montserrat, sans-serif",
+        fontSize: 13,
+        fontStyle: "600"
+      },
+      ticks: {
+        min: 0,
+        stepSize: 5,
+        fontSize: 13,
+        fontWeight: 500
+      },
+      gridLines: {
+        display: false
+      },
+      stacked: true
+    }]
+  }
+};
+function BookingChart(_ref) {
+  var data = _ref.data,
+    labels = _ref.labels,
+    _ref$mode = _ref.mode,
+    mode = _ref$mode === void 0 ? "day" : _ref$mode,
+    _ref$options = _ref.options,
+    options = _ref$options === void 0 ? {} : _ref$options,
+    _ref$onModeChange = _ref.onModeChange,
+    onModeChange = _ref$onModeChange === void 0 ? void 0 : _ref$onModeChange;
+  var legends = useMemo(function () {
+    return data.map(function (_ref2) {
+      var label = _ref2.label,
+        backgroundColor = _ref2.backgroundColor;
+      return [label, backgroundColor];
+    }).filter(function (_ref3, i, items) {
+      var _ref4 = _slicedToArray(_ref3, 1),
+        label = _ref4[0];
+      return items.findIndex(function (_ref5) {
+        var _ref6 = _slicedToArray(_ref5, 1),
+          l = _ref6[0];
+        return l === label;
+      }) === i;
+    });
+  }, [data]);
+  return /* @__PURE__ */React.createElement(Box, {
+    display: "flex",
+    direction: "column",
+    gap: "16px",
+    width: "100%"
+  }, legends.length > 0 && /* @__PURE__ */React.createElement(StyledBookingChartStack, null, legends.map(function (_ref7) {
+    var _ref8 = _slicedToArray(_ref7, 2),
+      label = _ref8[0],
+      backgroundColor = _ref8[1];
+    return /* @__PURE__ */React.createElement(StyledBookingChartLegend, {
+      key: label,
+      color: backgroundColor
+    }, label);
+  })), /* @__PURE__ */React.createElement(Box, {
+    width: "100%",
+    overflow: "hidden"
+  }, /* @__PURE__ */React.createElement(Chart, {
+    type: "bar",
+    data: {
+      labels: labels,
+      datasets: data
+    },
+    options: _objectSpread2(_objectSpread2({}, defaultOptions), options)
+  })), onModeChange && /* @__PURE__ */React.createElement(StyledBookingChartStack, null, /* @__PURE__ */React.createElement(StyledBookingChartButton, {
+    onClick: onModeChange,
+    active: mode === "day",
+    value: "day"
+  }, "Day"), /* @__PURE__ */React.createElement(StyledBookingChartButton, {
+    onClick: onModeChange,
+    active: mode === "week",
+    value: "week"
+  }, "Week"), /* @__PURE__ */React.createElement(StyledBookingChartButton, {
+    onClick: onModeChange,
+    active: mode === "month",
+    value: "month"
+  }, "Month")));
+}
+
+export { BookingChart as default };

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

@@ -0,0 +1,40 @@
+"use strict";
+import { taggedTemplateLiteral as _taggedTemplateLiteral } from '../_virtual/_rollupPluginBabelHelpers.js';
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+var StyledBookingChartStack = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  padding: 0;\n  margin: 0;\n  list-style: none;\n  font-size: 12px;\n  justify-content: center;\n  color: #000;\n  width: 100%;\n"])));
+var StyledBookingChartLegend = styled("span", {
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !["color"].includes(prop);
+  }
+})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  font-weight: 500;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n\n  &::before {\n    content: '';\n    display: inline-flex;\n    width: 32px;\n    height: 18px;\n    background-color: ", ";\n    border-radius: 4px;\n  }\n"])), function (props) {
+  return props.color;
+});
+var StyledBookingChartButton = styled("button", {
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !["color"].includes(prop);
+  }
+})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  font-weight: 500;\n  display: flex;\n  align-items: center;\n  padding: 6px 10px;\n  font-size: 14px;\n  border-radius: 4px;\n  font-family: inherit;\n  border: 1px solid ", ";\n  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1);\n  background-color: ", ";\n  cursor: pointer;\n\n  &:hover {\n    background-color: ", ";\n  }\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.palette.primary.main;
+}, function (_ref2) {
+  var active = _ref2.active,
+    theme = _ref2.theme;
+  return active ? "#CEF3ED" : theme.palette.background.paper;
+}, function (_ref3) {
+  var active = _ref3.active,
+    theme = _ref3.theme;
+  return !active ? theme.palette.grey[100] : null;
+});
+var StyledPropertyDetailsBox = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  width: 100%;\n  align-items: flex-start;\n  padding: 16px 24px 16px 20px;\n  flex-direction: column;\n\n  ", "\n\n  @media print {\n    flex-direction: row;\n    align-items: center;\n  }\n"])), function (_ref4) {
+  var theme = _ref4.theme;
+  return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    ", " {\n      flex-direction: row;\n      align-items: center;\n    }\n  "])), theme.breakpoints.up("sm"));
+});
+var StyledPropertyAmenitiesBox = styled.div(_templateObject6 || (_templateObject6 = _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\n  @media print {\n    align-items: flex-end;\n  }\n"])), function (_ref5) {
+  var theme = _ref5.theme;
+  return "\n    @media (min-width: ".concat(theme.breakpoints.values.md, "px) {\n      align-items: flex-end;\n    }\n  ");
+});
+
+export { StyledBookingChartButton, StyledBookingChartLegend, StyledBookingChartStack, StyledPropertyAmenitiesBox, StyledPropertyDetailsBox };

package/dist/esm/components/BookingTable.js

@@ -0,0 +1,49 @@
+"use strict";
+import React from 'react';
+import { uid } from 'react-uid';
+import { Box, Paper, Heading } from '@tenancy.nz/ui';
+import BookingTableRowHeader from './BookingTableRowHeader.js';
+import BookingTableRow from './BookingTableRow.js';
+import BookingTableRowSkeleton from './BookingTableRowSkeleton.js';
+
+function BookingTable(_ref) {
+  var data = _ref.data,
+    _ref$loading = _ref.loading,
+    loading = _ref$loading === void 0 ? false : _ref$loading;
+  return /* @__PURE__ */React.createElement(Box, {
+    sx: {
+      overflowX: "auto",
+      scrollBehavior: "smooth"
+    }
+  }, /* @__PURE__ */React.createElement(Box, {
+    sx: {
+      minWidth: "1024px"
+    }
+  }, /* @__PURE__ */React.createElement(Paper, {
+    outlined: true,
+    overflow: false
+  }, /* @__PURE__ */React.createElement(Box, {
+    bgcolor: "grey.50"
+  }, /* @__PURE__ */React.createElement(BookingTableRowHeader, null)), /* @__PURE__ */React.createElement(Box, null, !loading && data.map(function (booking, index) {
+    return /* @__PURE__ */React.createElement(BookingTableRow, {
+      key: uid(booking, index),
+      firstName: booking.firstName,
+      lastName: booking.lastName,
+      notes: booking.notes,
+      tenantNotes: booking.tenantNotes,
+      status: booking.status,
+      attended: booking.attended,
+      suitable: booking.suitable,
+      applicationSent: booking.applicationSent,
+      applicationReceived: booking.applicationReceived
+    });
+  }), loading && /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement(BookingTableRowSkeleton, null), /* @__PURE__ */React.createElement(BookingTableRowSkeleton, null), /* @__PURE__ */React.createElement(BookingTableRowSkeleton, null), /* @__PURE__ */React.createElement(BookingTableRowSkeleton, null)), !loading && data.length === 0 && /* @__PURE__ */React.createElement(Heading, {
+    as: "h4",
+    align: "center",
+    sx: {
+      margin: "16px 0"
+    }
+  }, "No bookings")))));
+}
+
+export { BookingTable as default };

package/dist/esm/components/BookingTableRow.js

@@ -0,0 +1,103 @@
+"use strict";
+import React from 'react';
+import { Grid, Text, Tag } from '@tenancy.nz/ui';
+import CheckedIcon from './CheckedIcon.js';
+import { StyledBookingTableRowCell } from './BookingTableRow.styled.js';
+
+var tagMap = function tagMap(status) {
+  if (status === "confirmed") {
+    return /* @__PURE__ */React.createElement(Tag, {
+      color: "success",
+      label: "Confirmed"
+    });
+  }
+  if (status === "cancelled") {
+    return /* @__PURE__ */React.createElement(Tag, {
+      color: "error",
+      label: "Cancelled"
+    });
+  }
+  return /* @__PURE__ */React.createElement(Tag, {
+    color: "info",
+    label: "Registered"
+  });
+};
+function BookingTableRow(_ref) {
+  var _ref$applicationRecei = _ref.applicationReceived,
+    applicationReceived = _ref$applicationRecei === void 0 ? false : _ref$applicationRecei,
+    _ref$applicationSent = _ref.applicationSent,
+    applicationSent = _ref$applicationSent === void 0 ? false : _ref$applicationSent,
+    _ref$attended = _ref.attended,
+    attended = _ref$attended === void 0 ? false : _ref$attended,
+    firstName = _ref.firstName,
+    lastName = _ref.lastName,
+    _ref$notes = _ref.notes,
+    notes = _ref$notes === void 0 ? void 0 : _ref$notes,
+    status = _ref.status,
+    _ref$suitable = _ref.suitable,
+    suitable = _ref$suitable === void 0 ? false : _ref$suitable,
+    _ref$tenantNotes = _ref.tenantNotes,
+    tenantNotes = _ref$tenantNotes === void 0 ? void 0 : _ref$tenantNotes;
+  return /* @__PURE__ */React.createElement(Grid, {
+    container: true,
+    spacing: 0
+  }, /* @__PURE__ */React.createElement(Grid, {
+    item: true,
+    container: true,
+    xs: 6
+  }, /* @__PURE__ */React.createElement(Grid, {
+    item: true,
+    xs: 3,
+    md: 3
+  }, /* @__PURE__ */React.createElement(StyledBookingTableRowCell, null, firstName, " ", lastName)), /* @__PURE__ */React.createElement(Grid, {
+    item: true,
+    xs: 6,
+    md: 7
+  }, /* @__PURE__ */React.createElement(StyledBookingTableRowCell, null, /* @__PURE__ */React.createElement(Text, {
+    as: "div",
+    variant: "body2"
+  }, notes && /* @__PURE__ */React.createElement(Text, {
+    variant: "inherit",
+    paragraph: !!tenantNotes
+  }, /* @__PURE__ */React.createElement("strong", null, "Property Manager Note"), " ", /* @__PURE__ */React.createElement("br", null), notes), tenantNotes && /* @__PURE__ */React.createElement(Text, {
+    variant: "inherit"
+  }, /* @__PURE__ */React.createElement("strong", null, "Tenant Feedback"), /* @__PURE__ */React.createElement("br", null), tenantNotes)))), /* @__PURE__ */React.createElement(Grid, {
+    item: true,
+    xs: 3,
+    md: 2
+  }, /* @__PURE__ */React.createElement(StyledBookingTableRowCell, null, /* @__PURE__ */React.createElement("span", null, tagMap(status))))), /* @__PURE__ */React.createElement(Grid, {
+    item: true,
+    container: true,
+    xs: 6
+  }, /* @__PURE__ */React.createElement(Grid, {
+    item: true,
+    xs: 3
+  }, /* @__PURE__ */React.createElement(StyledBookingTableRowCell, {
+    align: "center"
+  }, /* @__PURE__ */React.createElement(CheckedIcon, {
+    value: attended
+  }))), /* @__PURE__ */React.createElement(Grid, {
+    item: true,
+    xs: 3
+  }, /* @__PURE__ */React.createElement(StyledBookingTableRowCell, {
+    align: "center"
+  }, /* @__PURE__ */React.createElement(CheckedIcon, {
+    value: suitable
+  }))), /* @__PURE__ */React.createElement(Grid, {
+    item: true,
+    xs: 3
+  }, /* @__PURE__ */React.createElement(StyledBookingTableRowCell, {
+    align: "center"
+  }, /* @__PURE__ */React.createElement(CheckedIcon, {
+    value: applicationSent
+  }))), /* @__PURE__ */React.createElement(Grid, {
+    item: true,
+    xs: 3
+  }, /* @__PURE__ */React.createElement(StyledBookingTableRowCell, {
+    align: "center"
+  }, /* @__PURE__ */React.createElement(CheckedIcon, {
+    value: applicationReceived
+  })))));
+}
+
+export { BookingTableRow as default };

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

@@ -0,0 +1,19 @@
+"use strict";
+import { taggedTemplateLiteral as _taggedTemplateLiteral } from '../_virtual/_rollupPluginBabelHelpers.js';
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+
+var _templateObject, _templateObject2;
+var StyledBookingTableRowCell = styled("div", {
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return prop !== "align";
+  }
+})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref) {
+  var _ref$align = _ref.align,
+    align = _ref$align === void 0 ? "left" : _ref$align,
+    header = _ref.header,
+    theme = _ref.theme;
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    display: flex;\n    flex-direction: column;\n    justify-content: ", ";\n    padding: 6px 12px;\n    font-size: ", ";\n    color: #717680;\n    height: 100%;\n\n    ", "\n\n    ", "\n\n    ", "\n\n    ", " {\n      padding: 12px 24px;\n    }\n\n    @media print {\n      padding: 12px 24px;\n    }\n  "])), header ? "center" : "flex-start", header ? "12px" : "14px", align === "left" && "\n      align-items: flex-start;\n    ", align === "center" && "\n      align-items: center;\n      text-align: center;\n    ", align === "right" && "\n      align-items: flex-end;\n    ", theme.breakpoints.up("md"));
+});
+
+export { StyledBookingTableRowCell };

package/dist/esm/components/BookingTableRowHeader.js

@@ -0,0 +1,62 @@
+"use strict";
+import React from 'react';
+import { Grid } from '@tenancy.nz/ui';
+import { StyledBookingTableRowCell } from './BookingTableRow.styled.js';
+
+function BookingTableRowHeader() {
+  return /* @__PURE__ */React.createElement(Grid, {
+    container: true,
+    spacing: 0
+  }, /* @__PURE__ */React.createElement(Grid, {
+    item: true,
+    container: true,
+    xs: 6
+  }, /* @__PURE__ */React.createElement(Grid, {
+    item: true,
+    xs: 3
+  }, /* @__PURE__ */React.createElement(StyledBookingTableRowCell, {
+    header: true
+  }, "Name")), /* @__PURE__ */React.createElement(Grid, {
+    item: true,
+    xs: 6,
+    md: 7
+  }, /* @__PURE__ */React.createElement(StyledBookingTableRowCell, {
+    header: true
+  }, "Comments")), /* @__PURE__ */React.createElement(Grid, {
+    item: true,
+    xs: 3,
+    md: 2
+  }, /* @__PURE__ */React.createElement(StyledBookingTableRowCell, {
+    header: true
+  }, "Status"))), /* @__PURE__ */React.createElement(Grid, {
+    item: true,
+    container: true,
+    xs: 6
+  }, /* @__PURE__ */React.createElement(Grid, {
+    item: true,
+    xs: 3
+  }, /* @__PURE__ */React.createElement(StyledBookingTableRowCell, {
+    align: "center",
+    header: true
+  }, "Attendend")), /* @__PURE__ */React.createElement(Grid, {
+    item: true,
+    xs: 3
+  }, /* @__PURE__ */React.createElement(StyledBookingTableRowCell, {
+    align: "center",
+    header: true
+  }, "Suitable")), /* @__PURE__ */React.createElement(Grid, {
+    item: true,
+    xs: 3
+  }, /* @__PURE__ */React.createElement(StyledBookingTableRowCell, {
+    align: "center",
+    header: true
+  }, "Application Sent")), /* @__PURE__ */React.createElement(Grid, {
+    item: true,
+    xs: 3
+  }, /* @__PURE__ */React.createElement(StyledBookingTableRowCell, {
+    align: "center",
+    header: true
+  }, "Application Received"))));
+}
+
+export { BookingTableRowHeader as default };

package/dist/esm/components/BookingTableRowSkeleton.js

@@ -0,0 +1,93 @@
+"use strict";
+import React from 'react';
+import { Grid, Skeleton } from '@tenancy.nz/ui';
+import { StyledBookingTableRowCell } from './BookingTableRow.styled.js';
+
+function BookingTableRowSkeleton() {
+  return /* @__PURE__ */React.createElement(Grid, {
+    container: true,
+    spacing: 0
+  }, /* @__PURE__ */React.createElement(Grid, {
+    item: true,
+    container: true,
+    xs: 12,
+    sm: 6
+  }, /* @__PURE__ */React.createElement(Grid, {
+    item: true,
+    xs: 12,
+    sm: 3
+  }, /* @__PURE__ */React.createElement(StyledBookingTableRowCell, null, /* @__PURE__ */React.createElement(Skeleton, {
+    width: "85%",
+    height: "20px",
+    variant: "text"
+  }))), /* @__PURE__ */React.createElement(Grid, {
+    item: true,
+    xs: 12,
+    sm: 6,
+    md: 7
+  }, /* @__PURE__ */React.createElement(StyledBookingTableRowCell, null, /* @__PURE__ */React.createElement(Skeleton, {
+    width: "95%",
+    height: "20px",
+    variant: "text"
+  }), /* @__PURE__ */React.createElement(Skeleton, {
+    width: "80%",
+    height: "20px",
+    variant: "text"
+  }))), /* @__PURE__ */React.createElement(Grid, {
+    item: true,
+    xs: 12,
+    sm: 3,
+    md: 2
+  }, /* @__PURE__ */React.createElement(StyledBookingTableRowCell, null, /* @__PURE__ */React.createElement(Skeleton, {
+    width: "90px",
+    height: "30px",
+    variant: "text"
+  })))), /* @__PURE__ */React.createElement(Grid, {
+    item: true,
+    container: true,
+    xs: 12,
+    sm: 6
+  }, /* @__PURE__ */React.createElement(Grid, {
+    item: true,
+    xs: 12,
+    sm: 3
+  }, /* @__PURE__ */React.createElement(StyledBookingTableRowCell, {
+    align: "center"
+  }, /* @__PURE__ */React.createElement(Skeleton, {
+    width: "40px",
+    height: "20px",
+    variant: "text"
+  }))), /* @__PURE__ */React.createElement(Grid, {
+    item: true,
+    xs: 12,
+    sm: 3
+  }, /* @__PURE__ */React.createElement(StyledBookingTableRowCell, {
+    align: "center"
+  }, /* @__PURE__ */React.createElement(Skeleton, {
+    width: "40px",
+    height: "20px",
+    variant: "text"
+  }))), /* @__PURE__ */React.createElement(Grid, {
+    item: true,
+    xs: 12,
+    sm: 3
+  }, /* @__PURE__ */React.createElement(StyledBookingTableRowCell, {
+    align: "center"
+  }, /* @__PURE__ */React.createElement(Skeleton, {
+    width: "40px",
+    height: "20px",
+    variant: "text"
+  }))), /* @__PURE__ */React.createElement(Grid, {
+    item: true,
+    xs: 12,
+    sm: 3
+  }, /* @__PURE__ */React.createElement(StyledBookingTableRowCell, {
+    align: "center"
+  }, /* @__PURE__ */React.createElement(Skeleton, {
+    width: "40px",
+    height: "20px",
+    variant: "text"
+  })))));
+}
+
+export { BookingTableRowSkeleton as default };

package/dist/esm/components/CheckedIcon.js

@@ -0,0 +1,19 @@
+"use strict";
+import React from 'react';
+import { CircleCheckIcon, CircleTimesIcon } from '@tenancy.nz/icons';
+
+function CheckedIcon(_ref) {
+  var value = _ref.value;
+  if (value === true) {
+    return /* @__PURE__ */React.createElement(CircleCheckIcon, {
+      color: "success.main",
+      size: "20px"
+    });
+  }
+  return /* @__PURE__ */React.createElement(CircleTimesIcon, {
+    color: "error.main",
+    size: "20px"
+  });
+}
+
+export { CheckedIcon as default };

package/dist/esm/components/EnquiriesDoughnutChart.js

@@ -0,0 +1,140 @@
+"use strict";
+import React from 'react';
+import { Box, Text } from '@tenancy.nz/ui';
+import { Chart } from 'primereact/chart';
+
+function EnquiriesDoughnutChart(_ref) {
+  var _ref$tradeMeEnquiries = _ref.tradeMeEnquiriesCount,
+    tradeMeEnquiriesCount = _ref$tradeMeEnquiries === void 0 ? 0 : _ref$tradeMeEnquiries,
+    _ref$bookMeEnquiriesC = _ref.bookMeEnquiriesCount,
+    bookMeEnquiriesCount = _ref$bookMeEnquiriesC === void 0 ? 0 : _ref$bookMeEnquiriesC,
+    _ref$manualEnquiryCou = _ref.manualEnquiryCount,
+    manualEnquiryCount = _ref$manualEnquiryCou === void 0 ? 0 : _ref$manualEnquiryCou;
+  var colors = {
+    tradeMe: "#6FD3C0",
+    bookMe: "#00C0F3",
+    manual: "#394869"
+  };
+  var chartColors = [colors.tradeMe, colors.bookMe, colors.manual];
+  return /* @__PURE__ */React.createElement(Box, {
+    position: "relative",
+    display: "flex",
+    height: "100%",
+    align: "center"
+  }, /* @__PURE__ */React.createElement(Text, {
+    transform: "uppercase",
+    sx: {
+      position: "absolute",
+      left: 20,
+      top: -10
+    },
+    fontSize: 13,
+    color: "textPrimary",
+    weight: "700"
+  }, "Number of enquiries"), /* @__PURE__ */React.createElement(Box, {
+    width: "100%",
+    overflow: "hidden"
+  }, /* @__PURE__ */React.createElement(Chart, {
+    type: "doughnut",
+    data: {
+      labels: ["TradeMe", "BookMe", "Manual"],
+      datasets: [{
+        data: [Math.max(tradeMeEnquiriesCount, 1e-3), Math.max(bookMeEnquiriesCount, 1e-3), Math.max(manualEnquiryCount, 1e-3)],
+        backgroundColor: chartColors,
+        hoverBackgroundColor: chartColors
+      }]
+    },
+    options: {
+      legend: {
+        display: false
+      },
+      animation: {
+        duration: 0
+      }
+    },
+    style: {
+      width: "100%",
+      position: "absolute",
+      top: "18%",
+      left: "-75px"
+    }
+  })), /* @__PURE__ */React.createElement(Box, {
+    maxWidth: {
+      xs: "160px",
+      xl: "180px"
+    },
+    width: "100%",
+    padding: "10px 20px",
+    mt: -4
+  }, /* @__PURE__ */React.createElement(Box, {
+    width: "100%"
+  }, /* @__PURE__ */React.createElement(Box, {
+    height: "10px",
+    backgroundColor: colors.tradeMe,
+    width: "100%"
+  }), /* @__PURE__ */React.createElement(Box, {
+    display: "flex",
+    justify: "space-between",
+    width: "100%",
+    align: "flex-start",
+    mt: 2
+  }, /* @__PURE__ */React.createElement(Text, {
+    transform: "uppercase",
+    fontSize: 12,
+    weight: "600"
+  }, "TradeMe"), /* @__PURE__ */React.createElement(Text, {
+    transform: "uppercase",
+    fontSize: 32,
+    weight: "700",
+    mt: -3,
+    color: "textPrimary"
+  }, tradeMeEnquiriesCount))), /* @__PURE__ */React.createElement(Box, {
+    width: "100%",
+    mt: "30px"
+  }, /* @__PURE__ */React.createElement(Box, {
+    height: "10px",
+    backgroundColor: colors.bookMe,
+    width: "100%"
+  }), /* @__PURE__ */React.createElement(Box, {
+    display: "flex",
+    justify: "space-between",
+    width: "100%",
+    align: "flex-start",
+    mt: 2
+  }, /* @__PURE__ */React.createElement(Text, {
+    transform: "uppercase",
+    fontSize: 12,
+    weight: "600"
+  }, "Bookme"), /* @__PURE__ */React.createElement(Text, {
+    transform: "uppercase",
+    fontSize: 32,
+    weight: "700",
+    mt: -3,
+    color: "textPrimary"
+  }, bookMeEnquiriesCount))), /* @__PURE__ */React.createElement(Box, {
+    width: "100%",
+    mt: "30px"
+  }, /* @__PURE__ */React.createElement(Box, {
+    height: "10px",
+    backgroundColor: colors.manual,
+    width: "100%"
+  }), /* @__PURE__ */React.createElement(Box, {
+    display: "flex",
+    justify: "space-between",
+    width: "100%",
+    align: "flex-start",
+    mt: 2
+  }, /* @__PURE__ */React.createElement(Text, {
+    transform: "uppercase",
+    fontSize: 12,
+    weight: "600"
+  }, "Manually", /* @__PURE__ */React.createElement("br", null), "Generated"), /* @__PURE__ */React.createElement(Text, {
+    transform: "uppercase",
+    fontSize: 32,
+    weight: "700",
+    color: "textPrimary",
+    mt: -3
+  }, manualEnquiryCount)))));
+}
+
+export { EnquiriesDoughnutChart as default };