@tenancy.nz/feature-ui 1.0.0 → 1.0.1

package/dist/cjs/components/AgentDetailsCard.cjs

@@ -0,0 +1,55 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var ui = require('@tenancy.nz/ui');
+var icons = require('@tenancy.nz/icons');
+var IconLabel = require('./IconLabel.cjs');
+
+function AgentDetailsCard({
+  email = void 0,
+  loading = false,
+  logo = void 0,
+  name = void 0,
+  phone = void 0
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { display: "flex", gap: "8px", align: "flex-start", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { display: "flex", gap: "8px", direction: "column", width: "100%", children: [
+      loading ? /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { width: "75%", height: "22px", variant: "text" }) : /* @__PURE__ */ jsxRuntime.jsx(IconLabel.default, { color: "tertiary.main", startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.UserIcon, { size: "24px" }), children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { as: "h5", weight: "700", children: name }) }),
+      loading ? /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { width: "55%", height: "18px", variant: "text" }) : /* @__PURE__ */ jsxRuntime.jsx(
+        IconLabel.default,
+        {
+          color: "tertiary.main",
+          startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.PhoneIcon, { size: "24px" }),
+          children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { as: "span", color: "text.primary", variant: "body1", weight: "400", children: phone })
+        }
+      ),
+      loading ? /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { width: "55%", height: "18px", variant: "text" }) : /* @__PURE__ */ jsxRuntime.jsx(
+        IconLabel.default,
+        {
+          color: "tertiary.main",
+          startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.EnvelopeIcon, { size: "24px" }),
+          children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { as: "span", color: "text.primary", variant: "body1", weight: "400", children: email })
+        }
+      )
+    ] }),
+    loading && /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { flex: "0 0 40px", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { width: "40px", height: "40px", variant: "rectangular" }) }),
+    logo && !loading && /* @__PURE__ */ jsxRuntime.jsx(
+      ui.Box,
+      {
+        width: "40px",
+        height: "40px",
+        sx: {
+          flex: "0 0 40px",
+          "> img": { maxWidth: "100%", maxHeight: "100%" }
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx("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 jsxRuntime = require('react/jsx-runtime');
+require('react');
+var ui = require('@tenancy.nz/ui');
+
+function AnalyticsBox({
+  width,
+  minWidth,
+  maxWidth,
+  height,
+  border,
+  label,
+  amount,
+  text,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ui.Paper,
+    {
+      ...rest,
+      sx: {
+        maxWidth,
+        width,
+        minWidth,
+        border,
+        height: height || "100%",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "16px"
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { align: "center", weight: "700", as: "h3", gutterBottom: true, children: amount }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { align: "center", weight: "400", variant: "body2", children: label }),
+        text && /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Text,
+          {
+            align: "center",
+            weight: "400",
+            sx: {
+              fontSize: { xs: 8, sm: 10, xl: 14 },
+              lineHeight: "15.6px",
+              maxWidth: "366px",
+              mt: "8px"
+            },
+            children: text
+          }
+        )
+      ] })
+    }
+  );
+}
+
+exports.default = AnalyticsBox;

package/dist/cjs/components/AnalyticsSection.cjs

@@ -0,0 +1,209 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var ui = require('@tenancy.nz/ui');
+var AnalyticsBox = require('./AnalyticsBox.cjs');
+var EnquiriesDoughnutChart = require('./EnquiriesDoughnutChart.cjs');
+
+function AnalyticsSection({
+  viewingsCount,
+  bookingsCount,
+  attendeesCount,
+  cancellationsCount,
+  applicationsCount,
+  averageRent,
+  textUsage,
+  tradeMeEnquiriesCount,
+  bookMeEnquiriesCount,
+  manualEnquiryCount,
+  agreementsCount,
+  agreementsFinalisedCount,
+  filterDaysCount
+}) {
+  const isXlUp = ui.useMediaQuery((theme) => theme.breakpoints.up("xl"));
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    ui.Box,
+    {
+      display: "flex",
+      align: "stretch",
+      direction: { xs: "column-reverse", mlg: "row" },
+      gap: "27px",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { width: "100%", maxWidth: { xs: "100%", mob: "340px", xl: "463px" }, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Paper, { style: { width: "100%", position: "relative", height: "100%" }, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { mt: "20px", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsx(
+          EnquiriesDoughnutChart.default,
+          {
+            tradeMeEnquiriesCount,
+            bookMeEnquiriesCount,
+            manualEnquiryCount
+          }
+        ) }) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { width: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { display: "flex", direction: "row", width: "100%", gap: 6, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { flex: 3, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { display: "flex", gap: 6, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                AnalyticsBox.default,
+                {
+                  label: "Viewings",
+                  amount: viewingsCount,
+                  width: "100%",
+                  height: isXlUp ? "157px" : "125px"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                AnalyticsBox.default,
+                {
+                  label: "Bookings",
+                  amount: bookingsCount,
+                  width: "100%",
+                  height: isXlUp ? "157px" : "125px"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                AnalyticsBox.default,
+                {
+                  label: "Attendees",
+                  amount: attendeesCount,
+                  width: "100%",
+                  border: "3px solid #6FD3C0",
+                  height: isXlUp ? "157px" : "125px"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { display: "flex", width: "100%", gap: 6, mt: 6, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                AnalyticsBox.default,
+                {
+                  label: "Converted Properties",
+                  amount: agreementsCount,
+                  width: "100%",
+                  height: isXlUp ? "157px" : "125px",
+                  text: /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { as: "span", maxWidth: "276px", children: [
+                    "Properties that have had a viewing in the last",
+                    " ",
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      ui.Text,
+                      {
+                        as: "span",
+                        display: "inline",
+                        weight: "700",
+                        fontSize: "inherit",
+                        children: filterDaysCount
+                      }
+                    ),
+                    " ",
+                    "days where an agreement has been",
+                    " ",
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      ui.Text,
+                      {
+                        as: "span",
+                        display: "inline",
+                        weight: "700",
+                        fontSize: "inherit",
+                        children: "created"
+                      }
+                    )
+                  ] })
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                AnalyticsBox.default,
+                {
+                  label: "Converted Properties",
+                  amount: agreementsFinalisedCount,
+                  width: "100%",
+                  height: isXlUp ? "157px" : "125px",
+                  text: /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { as: "span", maxWidth: "276px", children: [
+                    "Properties that have had a viewing in the last",
+                    " ",
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      ui.Text,
+                      {
+                        as: "span",
+                        display: "inline",
+                        weight: "700",
+                        fontSize: "inherit",
+                        children: filterDaysCount
+                      }
+                    ),
+                    " ",
+                    "days where an agreement has been",
+                    " ",
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      ui.Text,
+                      {
+                        as: "span",
+                        display: "inline",
+                        weight: "700",
+                        fontSize: "inherit",
+                        children: "finalised"
+                      }
+                    )
+                  ] })
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { flex: 2, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { display: "flex", gap: 6, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                AnalyticsBox.default,
+                {
+                  label: "Cancellations",
+                  amount: cancellationsCount,
+                  width: "100%",
+                  border: "3px solid #ED0D8D",
+                  height: isXlUp ? "157px" : "125px"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                AnalyticsBox.default,
+                {
+                  label: "Applications",
+                  amount: applicationsCount,
+                  width: "100%",
+                  border: "3px solid #F5C440",
+                  height: isXlUp ? "157px" : "125px"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { display: "flex", gap: 6, mt: 6, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                AnalyticsBox.default,
+                {
+                  label: /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                    "Average",
+                    /* @__PURE__ */ jsxRuntime.jsx("br", {}),
+                    " Rent"
+                  ] }),
+                  amount: averageRent,
+                  width: "100%",
+                  height: isXlUp ? "157px" : "125px"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                AnalyticsBox.default,
+                {
+                  label: /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                    "Text Usage",
+                    /* @__PURE__ */ jsxRuntime.jsx("br", {}),
+                    " Total"
+                  ] }),
+                  amount: textUsage,
+                  width: "100%",
+                  height: isXlUp ? "157px" : "125px"
+                }
+              )
+            ] })
+          ] })
+        ] }) })
+      ]
+    }
+  );
+}
+
+exports.default = AnalyticsSection;

package/dist/cjs/components/BookingChart.cjs

@@ -0,0 +1,124 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var ui = require('@tenancy.nz/ui');
+var chart = require('primereact/chart');
+var BookingChart_styled = require('./BookingChart.styled.cjs');
+
+const defaultOptions = {
+  scaleFontColor: "black",
+  legend: {
+    display: false
+  },
+  plugins: {
+    datalabels: {
+      align: "centre",
+      font: {
+        weight: "700",
+        size: 12,
+        family: "Montserrat, sans-serif"
+      },
+      display: (ctx) => 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({
+  data,
+  labels,
+  mode = "day",
+  options = {},
+  onModeChange = void 0
+}) {
+  const legends = React.useMemo(
+    () => data.map(({ label, backgroundColor }) => [label, backgroundColor]).filter(
+      ([label], i, items) => items.findIndex(([l]) => l === label) === i
+    ),
+    [data]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { display: "flex", direction: "column", gap: "16px", width: "100%", children: [
+    legends.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(BookingChart_styled.StyledBookingChartStack, { children: legends.map(([label, backgroundColor]) => /* @__PURE__ */ jsxRuntime.jsx(BookingChart_styled.StyledBookingChartLegend, { color: backgroundColor, children: label }, label)) }),
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { width: "100%", overflow: "hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
+      chart.Chart,
+      {
+        type: "bar",
+        data: {
+          labels,
+          datasets: data
+        },
+        options: { ...defaultOptions, ...options }
+      }
+    ) }),
+    onModeChange && /* @__PURE__ */ jsxRuntime.jsxs(BookingChart_styled.StyledBookingChartStack, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        BookingChart_styled.StyledBookingChartButton,
+        {
+          onClick: onModeChange,
+          active: mode === "day",
+          value: "day",
+          children: "Day"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        BookingChart_styled.StyledBookingChartButton,
+        {
+          onClick: onModeChange,
+          active: mode === "week",
+          value: "week",
+          children: "Week"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        BookingChart_styled.StyledBookingChartButton,
+        {
+          onClick: onModeChange,
+          active: mode === "month",
+          value: "month",
+          children: "Month"
+        }
+      )
+    ] })
+  ] });
+}
+
+exports.default = BookingChart;

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

@@ -0,0 +1,100 @@
+"use strict";
+'use strict';
+
+var react = require('@emotion/react');
+var styled = require('@emotion/styled');
+
+const StyledBookingChartStack = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  font-size: 12px;
+  justify-content: center;
+  color: #000;
+  width: 100%;
+`;
+const StyledBookingChartLegend = styled("span", {
+  shouldForwardProp: (prop) => !["color"].includes(prop)
+})`
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+
+  &::before {
+    content: '';
+    display: inline-flex;
+    width: 32px;
+    height: 18px;
+    background-color: ${(props) => props.color};
+    border-radius: 4px;
+  }
+`;
+const StyledBookingChartButton = styled("button", {
+  shouldForwardProp: (prop) => !["color"].includes(prop)
+})`
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  padding: 6px 10px;
+  font-size: 14px;
+  border-radius: 4px;
+  font-family: inherit;
+  border: 1px solid ${({ theme }) => theme.palette.primary.main};
+  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1);
+  background-color: ${({ active, theme }) => active ? "#CEF3ED" : theme.palette.background.paper};
+  cursor: pointer;
+
+  &:hover {
+    background-color: ${({ active, theme }) => !active ? theme.palette.grey[100] : null};
+  }
+`;
+const StyledPropertyDetailsBox = styled.div`
+  display: flex;
+  width: 100%;
+  align-items: flex-start;
+  padding: 16px 24px 16px 20px;
+  flex-direction: column;
+
+  ${({ theme }) => react.css`
+    ${theme.breakpoints.up("sm")} {
+      flex-direction: row;
+      align-items: center;
+    }
+  `}
+
+  @media print {
+    flex-direction: row;
+    align-items: center;
+  }
+`;
+const StyledPropertyAmenitiesBox = styled.div`
+  padding-right: 25px;
+  display: flex;
+  flex-direction: column;
+  margin-top: 5px;
+
+  gap: 18px;
+  min-width: 170px;
+  height: 100%;
+  justify-content: space-between;
+
+  ${({ theme }) => `
+    @media (min-width: ${theme.breakpoints.values.md}px) {
+      align-items: flex-end;
+    }
+  `}
+
+  @media print {
+    align-items: flex-end;
+  }
+`;
+
+exports.StyledBookingChartButton = StyledBookingChartButton;
+exports.StyledBookingChartLegend = StyledBookingChartLegend;
+exports.StyledBookingChartStack = StyledBookingChartStack;
+exports.StyledPropertyAmenitiesBox = StyledPropertyAmenitiesBox;
+exports.StyledPropertyDetailsBox = StyledPropertyDetailsBox;

package/dist/cjs/components/BookingTable.cjs

@@ -0,0 +1,44 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+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({ data, loading = false }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { sx: { overflowX: "auto", scrollBehavior: "smooth" }, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { sx: { minWidth: "1024px" }, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Paper, { outlined: true, overflow: false, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { bgcolor: "grey.50", children: /* @__PURE__ */ jsxRuntime.jsx(BookingTableRowHeader.default, {}) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { children: [
+      !loading && data.map((booking, index) => /* @__PURE__ */ jsxRuntime.jsx(
+        BookingTableRow.default,
+        {
+          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
+        },
+        reactUid.uid(booking, index)
+      )),
+      loading && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(BookingTableRowSkeleton.default, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(BookingTableRowSkeleton.default, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(BookingTableRowSkeleton.default, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(BookingTableRowSkeleton.default, {})
+      ] }),
+      !loading && data.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { as: "h4", align: "center", sx: { margin: "16px 0" }, children: "No bookings" })
+    ] })
+  ] }) }) });
+}
+
+exports.default = BookingTable;

package/dist/cjs/components/BookingTableRow.cjs

@@ -0,0 +1,63 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var ui = require('@tenancy.nz/ui');
+var CheckedIcon = require('./CheckedIcon.cjs');
+var BookingTableRow_styled = require('./BookingTableRow.styled.cjs');
+
+const tagMap = (status) => {
+  if (status === "confirmed") {
+    return /* @__PURE__ */ jsxRuntime.jsx(ui.Tag, { color: "success", label: "Confirmed" });
+  }
+  if (status === "cancelled") {
+    return /* @__PURE__ */ jsxRuntime.jsx(ui.Tag, { color: "error", label: "Cancelled" });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.Tag, { color: "info", label: "Registered" });
+};
+function BookingTableRow({
+  applicationReceived = false,
+  applicationSent = false,
+  attended = false,
+  firstName,
+  lastName,
+  notes = void 0,
+  status,
+  suitable = false,
+  tenantNotes = void 0
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Grid, { container: true, spacing: 0, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(ui.Grid, { item: true, container: true, xs: 6, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Grid, { item: true, xs: 3, md: 3, children: /* @__PURE__ */ jsxRuntime.jsxs(BookingTableRow_styled.StyledBookingTableRowCell, { children: [
+        firstName,
+        " ",
+        lastName
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Grid, { item: true, xs: 6, md: 7, children: /* @__PURE__ */ jsxRuntime.jsx(BookingTableRow_styled.StyledBookingTableRowCell, { children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { as: "div", variant: "body2", children: [
+        notes && /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { variant: "inherit", paragraph: !!tenantNotes, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Property Manager Note" }),
+          " ",
+          /* @__PURE__ */ jsxRuntime.jsx("br", {}),
+          notes
+        ] }),
+        tenantNotes && /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { variant: "inherit", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Tenant Feedback" }),
+          /* @__PURE__ */ jsxRuntime.jsx("br", {}),
+          tenantNotes
+        ] })
+      ] }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Grid, { item: true, xs: 3, md: 2, children: /* @__PURE__ */ jsxRuntime.jsx(BookingTableRow_styled.StyledBookingTableRowCell, { children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: tagMap(status) }) }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(ui.Grid, { item: true, container: true, xs: 6, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Grid, { item: true, xs: 3, children: /* @__PURE__ */ jsxRuntime.jsx(BookingTableRow_styled.StyledBookingTableRowCell, { align: "center", children: /* @__PURE__ */ jsxRuntime.jsx(CheckedIcon.default, { value: attended }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Grid, { item: true, xs: 3, children: /* @__PURE__ */ jsxRuntime.jsx(BookingTableRow_styled.StyledBookingTableRowCell, { align: "center", children: /* @__PURE__ */ jsxRuntime.jsx(CheckedIcon.default, { value: suitable }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Grid, { item: true, xs: 3, children: /* @__PURE__ */ jsxRuntime.jsx(BookingTableRow_styled.StyledBookingTableRowCell, { align: "center", children: /* @__PURE__ */ jsxRuntime.jsx(CheckedIcon.default, { value: applicationSent }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Grid, { item: true, xs: 3, children: /* @__PURE__ */ jsxRuntime.jsx(BookingTableRow_styled.StyledBookingTableRowCell, { align: "center", children: /* @__PURE__ */ jsxRuntime.jsx(CheckedIcon.default, { value: applicationReceived }) }) })
+    ] })
+  ] });
+}
+
+exports.default = BookingTableRow;