@tenancy.nz/feature-ui 1.0.0 → 1.0.2

package/dist/cjs/_virtual/_rollupPluginBabelHelpers.cjs

@@ -0,0 +1,134 @@
+'use strict';
+
+function _arrayLikeToArray(r, a) {
+  (null == a || a > r.length) && (a = r.length);
+  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
+  return n;
+}
+function _arrayWithHoles(r) {
+  if (Array.isArray(r)) return r;
+}
+function _defineProperty(e, r, t) {
+  return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+    value: t,
+    enumerable: true,
+    configurable: true,
+    writable: true
+  }) : e[r] = t, e;
+}
+function _iterableToArrayLimit(r, l) {
+  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (null != t) {
+    var e,
+      n,
+      i,
+      u,
+      a = [],
+      f = true,
+      o = false;
+    try {
+      if (i = (t = t.call(r)).next, 0 === l) {
+        if (Object(t) !== t) return;
+        f = !1;
+      } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+    } catch (r) {
+      o = true, n = r;
+    } finally {
+      try {
+        if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
+      } finally {
+        if (o) throw n;
+      }
+    }
+    return a;
+  }
+}
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function ownKeys(e, r) {
+  var t = Object.keys(e);
+  if (Object.getOwnPropertySymbols) {
+    var o = Object.getOwnPropertySymbols(e);
+    r && (o = o.filter(function (r) {
+      return Object.getOwnPropertyDescriptor(e, r).enumerable;
+    })), t.push.apply(t, o);
+  }
+  return t;
+}
+function _objectSpread2(e) {
+  for (var r = 1; r < arguments.length; r++) {
+    var t = null != arguments[r] ? arguments[r] : {};
+    r % 2 ? ownKeys(Object(t), true).forEach(function (r) {
+      _defineProperty(e, r, t[r]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
+      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+    });
+  }
+  return e;
+}
+function _objectWithoutProperties(e, t) {
+  if (null == e) return {};
+  var o,
+    r,
+    i = _objectWithoutPropertiesLoose(e, t);
+  if (Object.getOwnPropertySymbols) {
+    var n = Object.getOwnPropertySymbols(e);
+    for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
+  }
+  return i;
+}
+function _objectWithoutPropertiesLoose(r, e) {
+  if (null == r) return {};
+  var t = {};
+  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+    if (-1 !== e.indexOf(n)) continue;
+    t[n] = r[n];
+  }
+  return t;
+}
+function _slicedToArray(r, e) {
+  return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
+}
+function _taggedTemplateLiteral(e, t) {
+  return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, {
+    raw: {
+      value: Object.freeze(t)
+    }
+  }));
+}
+function _toPrimitive(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r);
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
+function _toPropertyKey(t) {
+  var i = _toPrimitive(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _unsupportedIterableToArray(r, a) {
+  if (r) {
+    if ("string" == typeof r) return _arrayLikeToArray(r, a);
+    var t = {}.toString.call(r).slice(8, -1);
+    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
+  }
+}
+
+exports.arrayLikeToArray = _arrayLikeToArray;
+exports.arrayWithHoles = _arrayWithHoles;
+exports.defineProperty = _defineProperty;
+exports.iterableToArrayLimit = _iterableToArrayLimit;
+exports.nonIterableRest = _nonIterableRest;
+exports.objectSpread2 = _objectSpread2;
+exports.objectWithoutProperties = _objectWithoutProperties;
+exports.objectWithoutPropertiesLoose = _objectWithoutPropertiesLoose;
+exports.slicedToArray = _slicedToArray;
+exports.taggedTemplateLiteral = _taggedTemplateLiteral;
+exports.toPrimitive = _toPrimitive;
+exports.toPropertyKey = _toPropertyKey;
+exports.unsupportedIterableToArray = _unsupportedIterableToArray;

package/dist/cjs/components/AgentDetailsCard.cjs

@@ -0,0 +1,93 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var ui = require('@tenancy.nz/ui');
+var icons = require('@tenancy.nz/icons');
+var IconLabel = require('./IconLabel.cjs');
+
+function AgentDetailsCard(_ref) {
+  var _ref$email = _ref.email,
+    email = _ref$email === void 0 ? void 0 : _ref$email,
+    _ref$loading = _ref.loading,
+    loading = _ref$loading === void 0 ? false : _ref$loading,
+    _ref$logo = _ref.logo,
+    logo = _ref$logo === void 0 ? void 0 : _ref$logo,
+    _ref$name = _ref.name,
+    name = _ref$name === void 0 ? void 0 : _ref$name,
+    _ref$phone = _ref.phone,
+    phone = _ref$phone === void 0 ? void 0 : _ref$phone;
+  return /* @__PURE__ */React.createElement(ui.Box, {
+    display: "flex",
+    gap: "8px",
+    align: "flex-start"
+  }, /* @__PURE__ */React.createElement(ui.Box, {
+    display: "flex",
+    gap: "8px",
+    direction: "column",
+    width: "100%"
+  }, loading ? /* @__PURE__ */React.createElement(ui.Skeleton, {
+    width: "75%",
+    height: "22px",
+    variant: "text"
+  }) : /* @__PURE__ */React.createElement(IconLabel.default, {
+    color: "tertiary.main",
+    startIcon: /* @__PURE__ */React.createElement(icons.UserIcon, {
+      size: "24px"
+    })
+  }, /* @__PURE__ */React.createElement(ui.Heading, {
+    as: "h5",
+    weight: "700"
+  }, name)), loading ? /* @__PURE__ */React.createElement(ui.Skeleton, {
+    width: "55%",
+    height: "18px",
+    variant: "text"
+  }) : /* @__PURE__ */React.createElement(IconLabel.default, {
+    color: "tertiary.main",
+    startIcon: /* @__PURE__ */React.createElement(icons.PhoneIcon, {
+      size: "24px"
+    })
+  }, /* @__PURE__ */React.createElement(ui.Text, {
+    as: "span",
+    color: "text.primary",
+    variant: "body1",
+    weight: "400"
+  }, phone)), loading ? /* @__PURE__ */React.createElement(ui.Skeleton, {
+    width: "55%",
+    height: "18px",
+    variant: "text"
+  }) : /* @__PURE__ */React.createElement(IconLabel.default, {
+    color: "tertiary.main",
+    startIcon: /* @__PURE__ */React.createElement(icons.EnvelopeIcon, {
+      size: "24px"
+    })
+  }, /* @__PURE__ */React.createElement(ui.Text, {
+    as: "span",
+    color: "text.primary",
+    variant: "body1",
+    weight: "400"
+  }, email))), loading && /* @__PURE__ */React.createElement(ui.Box, {
+    flex: "0 0 40px"
+  }, /* @__PURE__ */React.createElement(ui.Skeleton, {
+    width: "40px",
+    height: "40px",
+    variant: "rectangular"
+  })), logo && !loading && /* @__PURE__ */React.createElement(ui.Box, {
+    width: "40px",
+    height: "40px",
+    sx: {
+      flex: "0 0 40px",
+      "> img": {
+        maxWidth: "100%",
+        maxHeight: "100%"
+      }
+    }
+  }, /* @__PURE__ */React.createElement("img", {
+    src: logo,
+    alt: "Agency Logo"
+  })));
+}
+
+exports.default = AgentDetailsCard;

package/dist/cjs/components/AnalyticsBox.cjs

@@ -0,0 +1,58 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.cjs');
+var React = require('react');
+var ui = require('@tenancy.nz/ui');
+
+var _excluded = ["width", "minWidth", "maxWidth", "height", "border", "label", "amount", "text"];
+function AnalyticsBox(_ref) {
+  var width = _ref.width,
+    minWidth = _ref.minWidth,
+    maxWidth = _ref.maxWidth,
+    height = _ref.height,
+    border = _ref.border,
+    label = _ref.label,
+    amount = _ref.amount,
+    text = _ref.text,
+    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  return /* @__PURE__ */React.createElement(ui.Paper, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, rest), {}, {
+    sx: {
+      maxWidth: maxWidth,
+      width: width,
+      minWidth: minWidth,
+      border: border,
+      height: height || "100%",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      padding: "16px"
+    }
+  }), /* @__PURE__ */React.createElement(ui.Box, null, /* @__PURE__ */React.createElement(ui.Heading, {
+    align: "center",
+    weight: "700",
+    as: "h3",
+    gutterBottom: true
+  }, amount), /* @__PURE__ */React.createElement(ui.Text, {
+    align: "center",
+    weight: "400",
+    variant: "body2"
+  }, label), text && /* @__PURE__ */React.createElement(ui.Text, {
+    align: "center",
+    weight: "400",
+    sx: {
+      fontSize: {
+        xs: 8,
+        sm: 10,
+        xl: 14
+      },
+      lineHeight: "15.6px",
+      maxWidth: "366px",
+      mt: "8px"
+    }
+  }, text)));
+}
+
+exports.default = AnalyticsBox;

package/dist/cjs/components/AnalyticsSection.cjs

@@ -0,0 +1,161 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var ui = require('@tenancy.nz/ui');
+var AnalyticsBox = require('./AnalyticsBox.cjs');
+var EnquiriesDoughnutChart = require('./EnquiriesDoughnutChart.cjs');
+
+function AnalyticsSection(_ref) {
+  var viewingsCount = _ref.viewingsCount,
+    bookingsCount = _ref.bookingsCount,
+    attendeesCount = _ref.attendeesCount,
+    cancellationsCount = _ref.cancellationsCount,
+    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) {
+    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%",
+    maxWidth: {
+      xs: "100%",
+      mob: "340px",
+      xl: "463px"
+    }
+  }, /* @__PURE__ */React.createElement(ui.Paper, {
+    style: {
+      width: "100%",
+      position: "relative",
+      height: "100%"
+    }
+  }, /* @__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, {
+    label: "Viewings",
+    amount: viewingsCount,
+    width: "100%",
+    height: isXlUp ? "157px" : "125px"
+  }), /* @__PURE__ */React.createElement(AnalyticsBox.default, {
+    label: "Bookings",
+    amount: bookingsCount,
+    width: "100%",
+    height: isXlUp ? "157px" : "125px"
+  }), /* @__PURE__ */React.createElement(AnalyticsBox.default, {
+    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, {
+    label: "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, {
+      as: "span",
+      display: "inline",
+      weight: "700",
+      fontSize: "inherit"
+    }, "created"))
+  }), /* @__PURE__ */React.createElement(AnalyticsBox.default, {
+    label: "Converted Properties",
+    amount: agreementsFinalisedCount,
+    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, {
+      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, {
+    label: "Cancellations",
+    amount: cancellationsCount,
+    width: "100%",
+    border: "3px solid #ED0D8D",
+    height: isXlUp ? "157px" : "125px"
+  }), /* @__PURE__ */React.createElement(AnalyticsBox.default, {
+    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, {
+    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, {
+    label: /* @__PURE__ */React.createElement("span", null, "Text Usage", /* @__PURE__ */React.createElement("br", null), " Total"),
+    amount: textUsage,
+    width: "100%",
+    height: isXlUp ? "157px" : "125px"
+  }))))));
+}
+
+exports.default = AnalyticsSection;

package/dist/cjs/components/BookingChart.cjs

@@ -0,0 +1,126 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.cjs');
+var React = require('react');
+var ui = require('@tenancy.nz/ui');
+var chart = require('primereact/chart');
+var BookingChart_styled = require('./BookingChart.styled.cjs');
+
+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 = React.useMemo(function () {
+    return data.map(function (_ref2) {
+      var label = _ref2.label,
+        backgroundColor = _ref2.backgroundColor;
+      return [label, backgroundColor];
+    }).filter(function (_ref3, i, items) {
+      var _ref4 = _rollupPluginBabelHelpers.slicedToArray(_ref3, 1),
+        label = _ref4[0];
+      return items.findIndex(function (_ref5) {
+        var _ref6 = _rollupPluginBabelHelpers.slicedToArray(_ref5, 1),
+          l = _ref6[0];
+        return l === label;
+      }) === i;
+    });
+  }, [data]);
+  return /* @__PURE__ */React.createElement(ui.Box, {
+    display: "flex",
+    direction: "column",
+    gap: "16px",
+    width: "100%"
+  }, legends.length > 0 && /* @__PURE__ */React.createElement(BookingChart_styled.StyledBookingChartStack, null, legends.map(function (_ref7) {
+    var _ref8 = _rollupPluginBabelHelpers.slicedToArray(_ref7, 2),
+      label = _ref8[0],
+      backgroundColor = _ref8[1];
+    return /* @__PURE__ */React.createElement(BookingChart_styled.StyledBookingChartLegend, {
+      key: label,
+      color: backgroundColor
+    }, label);
+  })), /* @__PURE__ */React.createElement(ui.Box, {
+    width: "100%",
+    overflow: "hidden"
+  }, /* @__PURE__ */React.createElement(chart.Chart, {
+    type: "bar",
+    data: {
+      labels: labels,
+      datasets: data
+    },
+    options: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, defaultOptions), options)
+  })), onModeChange && /* @__PURE__ */React.createElement(BookingChart_styled.StyledBookingChartStack, null, /* @__PURE__ */React.createElement(BookingChart_styled.StyledBookingChartButton, {
+    onClick: onModeChange,
+    active: mode === "day",
+    value: "day"
+  }, "Day"), /* @__PURE__ */React.createElement(BookingChart_styled.StyledBookingChartButton, {
+    onClick: onModeChange,
+    active: mode === "week",
+    value: "week"
+  }, "Week"), /* @__PURE__ */React.createElement(BookingChart_styled.StyledBookingChartButton, {
+    onClick: onModeChange,
+    active: mode === "month",
+    value: "month"
+  }, "Month")));
+}
+
+exports.default = BookingChart;

package/dist/cjs/components/BookingChart.styled.cjs

@@ -0,0 +1,46 @@
+"use strict";
+'use strict';
+
+var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.cjs');
+var react = require('@emotion/react');
+var styled = require('@emotion/styled');
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+var StyledBookingChartStack = styled.div(_templateObject || (_templateObject = _rollupPluginBabelHelpers.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 = _rollupPluginBabelHelpers.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 = _rollupPluginBabelHelpers.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 = _rollupPluginBabelHelpers.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 react.css(_templateObject5 || (_templateObject5 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n    ", " {\n      flex-direction: row;\n      align-items: center;\n    }\n  "])), theme.breakpoints.up("sm"));
+});
+var StyledPropertyAmenitiesBox = styled.div(_templateObject6 || (_templateObject6 = _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\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  ");
+});
+
+exports.StyledBookingChartButton = StyledBookingChartButton;
+exports.StyledBookingChartLegend = StyledBookingChartLegend;
+exports.StyledBookingChartStack = StyledBookingChartStack;
+exports.StyledPropertyAmenitiesBox = StyledPropertyAmenitiesBox;
+exports.StyledPropertyDetailsBox = StyledPropertyDetailsBox;

package/dist/cjs/components/BookingTable.cjs

@@ -0,0 +1,53 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var reactUid = require('react-uid');
+var ui = require('@tenancy.nz/ui');
+var BookingTableRowHeader = require('./BookingTableRowHeader.cjs');
+var BookingTableRow = require('./BookingTableRow.cjs');
+var BookingTableRowSkeleton = require('./BookingTableRowSkeleton.cjs');
+
+function BookingTable(_ref) {
+  var data = _ref.data,
+    _ref$loading = _ref.loading,
+    loading = _ref$loading === void 0 ? false : _ref$loading;
+  return /* @__PURE__ */React.createElement(ui.Box, {
+    sx: {
+      overflowX: "auto",
+      scrollBehavior: "smooth"
+    }
+  }, /* @__PURE__ */React.createElement(ui.Box, {
+    sx: {
+      minWidth: "1024px"
+    }
+  }, /* @__PURE__ */React.createElement(ui.Paper, {
+    outlined: true,
+    overflow: false
+  }, /* @__PURE__ */React.createElement(ui.Box, {
+    bgcolor: "grey.50"
+  }, /* @__PURE__ */React.createElement(BookingTableRowHeader.default, null)), /* @__PURE__ */React.createElement(ui.Box, null, !loading && data.map(function (booking, index) {
+    return /* @__PURE__ */React.createElement(BookingTableRow.default, {
+      key: reactUid.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.default, null), /* @__PURE__ */React.createElement(BookingTableRowSkeleton.default, null), /* @__PURE__ */React.createElement(BookingTableRowSkeleton.default, null), /* @__PURE__ */React.createElement(BookingTableRowSkeleton.default, null)), !loading && data.length === 0 && /* @__PURE__ */React.createElement(ui.Heading, {
+    as: "h4",
+    align: "center",
+    sx: {
+      margin: "16px 0"
+    }
+  }, "No bookings")))));
+}
+
+exports.default = BookingTable;