@ozdao/martyrs 0.2.601 → 0.2.603

package/dist/martyrs/src/modules/backoffice/components/pages/Dashboard.vue.js

@@ -1,138 +1,550 @@
-import { ref, onMounted, createElementBlock, openBlock, createElementVNode, createVNode, withCtx } from "vue";
-import _sfc_main$1 from "../../../../components/Block/Block.vue.js";
-import _sfc_main$4 from "../../../../components/Feed/Feed.vue.js";
+import { ref, computed, watchEffect, createElementBlock, openBlock, createElementVNode, createVNode, withCtx, toDisplayString, createCommentVNode, Fragment, renderList, normalizeStyle, unref, normalizeClass, createBlock } from "vue";
+import { useRoute } from "vue-router";
+import _sfc_main$7 from "../../../../components/Block/Block.vue.js";
+import _sfc_main$8 from "../../../../components/Feed/Feed.vue.js";
 import Table from "../../../../components/Table/Table.vue.js";
-import StatusBadge from "../../../../components/Table/StatusBadge.vue.js";
-import _sfc_main$2 from "../../../icons/entities/IconProfile.vue.js";
-import _sfc_main$3 from "../../../icons/entities/IconOrders.vue.js";
-import { useRoute, useRouter } from "vue-router";
-import { state } from "../../../auth/views/store/auth.js";
-import { state as state$1, actions } from "../../../orders/store/orders.js";
-const _hoisted_1 = { class: "pd-medium bg-white" };
-const _hoisted_2 = { class: "mn-b-medium cols-3 mobile:cols-1 gap-thin" };
-const _hoisted_3 = { class: "mn-b-medium radius-small w-max bg-main" };
-const _hoisted_4 = { class: "mn-b-medium radius-small w-max bg-main" };
-const _hoisted_5 = { class: "mn-b-medium radius-small w-max bg-main" };
-const _hoisted_6 = { class: "cols-2 mobile:cols-1 gap-thin" };
+import _sfc_main$1 from "../../../../components/Dropdown/Dropdown.vue.js";
+import Calendar from "../../../../components/Calendar/Calendar.vue2.js";
+import _sfc_main$9 from "../../../core/views/components/blocks/Card.vue.js";
+import _sfc_main$3 from "../../../core/views/components/blocks/CardStat.vue.js";
+import _sfc_main$c from "../../../products/components/blocks/CardProduct.vue.js";
+import _sfc_main$4 from "../../../icons/entities/IconProfile.vue.js";
+import _sfc_main$5 from "../../../icons/entities/IconOrders.vue.js";
+import _sfc_main$6 from "../../../icons/entities/IconCash.vue.js";
+import _sfc_main$a from "../../../icons/entities/IconEvents.vue.js";
+import _sfc_main$b from "../../../icons/entities/IconFile.vue.js";
+import _sfc_main$2 from "../../../icons/entities/IconCalendar.vue.js";
+import { useGlobalMixins } from "../../../core/views/mixins/mixins.js";
+import $axios from "../../../core/views/utils/axios-instance.js";
+import { state, actions } from "../../../orders/store/orders.js";
+import { state as state$1, read } from "../../../events/store/events.js";
+import { state as state$3, actions as actions$2 } from "../../../rents/views/store/rents.store.js";
+import applications from "../../../orders/store/applications.js";
+import customers from "../../../orders/store/customers.store.js";
+import { state as state$2, actions as actions$1 } from "../../../auth/views/store/users.js";
+const _hoisted_1 = { class: "pd-medium" };
+const _hoisted_2 = { class: "flex flex-v-center flex-justify-between mn-b-medium" };
+const _hoisted_3 = { class: "flex flex-v-center gap-thin bg-light pd-thin pd-l-small pd-r-small radius-small cursor-pointer" };
+const _hoisted_4 = { class: "t-small fw-medium" };
+const _hoisted_5 = { class: "mn-b-medium cols-3 mobile:cols-1 gap-small" };
+const _hoisted_6 = {
+  viewBox: "0 0 500 200",
+  class: "w-100 d-block"
+};
+const _hoisted_7 = ["y1", "y2"];
+const _hoisted_8 = ["y"];
+const _hoisted_9 = ["points"];
+const _hoisted_10 = ["points"];
+const _hoisted_11 = ["cx", "cy", "onMouseenter"];
+const _hoisted_12 = ["cx", "cy", "r", "fill"];
+const _hoisted_13 = ["x"];
+const _hoisted_14 = {
+  key: 1,
+  class: "t-transp"
+};
+const _hoisted_15 = { class: "mn-b-medium cols-2 mobile:cols-1 gap-small" };
+const _hoisted_16 = { class: "t-dark fw-medium" };
+const _hoisted_17 = { class: "t-dark" };
+const _hoisted_18 = { class: "t-dark t-small" };
+const _hoisted_19 = { class: "mn-b-medium cols-2 mobile:cols-1 gap-small" };
+const _hoisted_20 = {
+  key: 0,
+  class: "cols-5 tablet:cols-3 mobile:cols-2 gap-small"
+};
+const _hoisted_21 = { class: "t-dark t-small mn-t-thin" };
+const _hoisted_22 = {
+  key: 1,
+  class: "t-transp"
+};
+const _hoisted_23 = { class: "mn-b-medium cols-2 mobile:cols-1 gap-small" };
+const CHART_LEFT = 50;
+const CHART_RIGHT = 490;
+const CHART_TOP = 20;
+const CHART_BOTTOM = 170;
 const _sfc_main = {
   __name: "Dashboard",
-  props: {
-    favorites: Array
-  },
   setup(__props) {
     useRoute();
-    useRouter();
-    ref(null);
-    ref([]);
-    onMounted(async () => {
+    const { formatDate } = useGlobalMixins();
+    const orderStats = ref({});
+    const userStats = ref({});
+    const hoveredRevenueIdx = ref(-1);
+    const dateRange = ref({
+      start: new Date(Date.now() - 7 * 24 * 60 * 60 * 1e3),
+      end: /* @__PURE__ */ new Date()
+    });
+    const dateRangeLabel = computed(() => {
+      if (!dateRange.value?.start || !dateRange.value?.end) return "Select dates";
+      return formatDate(dateRange.value.start, { dayMonth: true }) + " — " + formatDate(dateRange.value.end, { dayMonth: true });
+    });
+    const orderColumns = [
+      { key: "_id", label: "Order" },
+      { key: "positions", label: "Items" },
+      { key: "status", label: "Status" },
+      { key: "createdAt", label: "Date" }
+    ];
+    function chartX(i, total) {
+      if (total <= 1) return (CHART_LEFT + CHART_RIGHT) / 2;
+      return CHART_LEFT + i / (total - 1) * (CHART_RIGHT - CHART_LEFT);
+    }
+    function chartY(value, max) {
+      if (!max) return CHART_BOTTOM;
+      return CHART_BOTTOM - value / max * (CHART_BOTTOM - CHART_TOP);
+    }
+    function calcTicks(max) {
+      if (!max || max <= 0) return [0];
+      const step = Math.pow(10, Math.floor(Math.log10(max))) / 2;
+      const ticks = [];
+      for (let v = 0; v <= max; v += step) ticks.push(Math.round(v));
+      if (ticks[ticks.length - 1] < max) ticks.push(Math.round(max));
+      return ticks.length > 6 ? ticks.filter((_, i) => i % 2 === 0) : ticks;
+    }
+    function formatChartValue(val) {
+      if (val >= 1e3) return "฿" + Math.round(val / 1e3) + "k";
+      return "฿" + Math.round(val);
+    }
+    function calcXStep(count) {
+      if (count <= 8) return 1;
+      if (count <= 16) return 2;
+      if (count <= 30) return 5;
+      return 7;
+    }
+    const revenueChart = computed(() => {
+      const data = orderStats.value.dailyRevenue;
+      if (!data?.length) return [];
+      return data.slice(-30);
+    });
+    const maxRevenue = computed(() => {
+      if (!revenueChart.value.length) return 1;
+      return Math.max(...revenueChart.value.map((d) => d.revenue)) || 1;
+    });
+    const revenueTicks = computed(() => calcTicks(maxRevenue.value));
+    const revenueXStep = computed(() => calcXStep(revenueChart.value.length));
+    const revenueLinePoints = computed(() => {
+      return revenueChart.value.map(
+        (d, i) => `${chartX(i, revenueChart.value.length)},${chartY(d.revenue, maxRevenue.value)}`
+      ).join(" ");
+    });
+    const revenueAreaPoints = computed(() => {
+      if (!revenueChart.value.length) return "";
+      const len = revenueChart.value.length;
+      return `${chartX(0, len)},${CHART_BOTTOM} ${revenueLinePoints.value} ${chartX(len - 1, len)},${CHART_BOTTOM}`;
+    });
+    const revenueTooltipStyle = computed(() => {
+      if (hoveredRevenueIdx.value < 0) return {};
+      const i = hoveredRevenueIdx.value;
+      const len = revenueChart.value.length;
+      const day = revenueChart.value[i];
+      const x = chartX(i, len);
+      const y = chartY(day.revenue, maxRevenue.value);
+      return {
+        left: `${x / 500 * 100}%`,
+        top: `${y / 200 * 100}%`,
+        transform: "translate(-50%, -100%) translateY(-0.5rem)"
+      };
+    });
+    function formatId(id) {
+      return id ? `${id.slice(0, 4)}...${id.slice(-4)}` : "";
+    }
+    function formatXDate(dateStr) {
+      if (!dateStr) return "";
+      return formatDate(dateStr, { dayMonth: true });
+    }
+    function getStatusClass(status) {
+      const classes = {
+        pending: "bg-second-transp t-second",
+        processing: "bg-main-transp t-main",
+        created: "bg-main-transp t-main",
+        confirmed: "bg-green-transp t-green",
+        completed: "bg-green-transp t-green",
+        cancelled: "bg-red-transp t-red"
+      };
+      return classes[status] || "bg-light t-dark";
+    }
+    function getEventStatus(date) {
+      if (!date?.start) return "No date";
+      const now = /* @__PURE__ */ new Date();
+      const start = new Date(date.start);
+      const end = date.end ? new Date(date.end) : start;
+      if (now > end) return "Finished";
+      if (now >= start && now <= end) return "Live";
+      const diffDays = Math.ceil((start - now) / (1e3 * 60 * 60 * 24));
+      if (diffDays <= 1) return "Tomorrow";
+      if (diffDays <= 7) return `In ${diffDays} days`;
+      return "Upcoming";
+    }
+    function getEventStatusClass(date) {
+      const status = getEventStatus(date);
+      if (status === "Finished") return "bg-light t-dark";
+      if (status === "Live") return "bg-green-transp t-green";
+      if (status === "Tomorrow") return "bg-second-transp t-second";
+      return "bg-main-transp t-main";
+    }
+    watchEffect(async () => {
+      const params = {};
+      if (dateRange.value?.start) params.startDate = new Date(dateRange.value.start).toISOString();
+      if (dateRange.value?.end) params.endDate = new Date(dateRange.value.end).toISOString();
+      const [orders, stats] = await Promise.all([
+        $axios.get("/api/orders/stats", { params }),
+        $axios.get("/api/users/stats", { params })
+      ]);
+      orderStats.value = orders.data;
+      userStats.value = stats.data;
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1, [
-        _cache[9] || (_cache[9] = createElementVNode("h2", { class: "mn-b-small" }, "Overview", -1)),
         createElementVNode("div", _hoisted_2, [
-          createVNode(_sfc_main$1, { class: "pos-relative" }, {
-            default: withCtx(() => [
-              _cache[0] || (_cache[0] = createElementVNode("span", { class: "t-green fw-semi pos-absolute pos-t-small pos-r-small" }, "+12.5%", -1)),
+          _cache[2] || (_cache[2] = createElementVNode("h2", null, "Overview", -1)),
+          createVNode(_sfc_main$1, {
+            align: "right",
+            class: "pos-relative z-index-3"
+          }, {
+            label: withCtx(() => [
               createElementVNode("div", _hoisted_3, [
-                createVNode(_sfc_main$2, { class: "i-medium mn-small" })
-              ]),
-              _cache[1] || (_cache[1] = createElementVNode("p", { class: "h3 mn-b-thin" }, "2,453", -1)),
-              _cache[2] || (_cache[2] = createElementVNode("p", null, "Active Members", -1))
+                createVNode(_sfc_main$2, { class: "i-small" }),
+                createElementVNode("span", _hoisted_4, toDisplayString(dateRangeLabel.value), 1)
+              ])
+            ]),
+            default: withCtx(() => [
+              createVNode(Calendar, {
+                date: dateRange.value,
+                "onUpdate:date": _cache[0] || (_cache[0] = ($event) => dateRange.value = $event),
+                allowRange: true,
+                class: "bg-white radius-small pd-small"
+              }, null, 8, ["date"])
+            ]),
+            _: 1
+          })
+        ]),
+        createElementVNode("div", _hoisted_5, [
+          createVNode(_sfc_main$3, {
+            icon: _sfc_main$4,
+            title: "Active Users",
+            displayValue: userStats.value.active?.toLocaleString() || "—",
+            subtitle: userStats.value.newThisMonth ? `+${userStats.value.newThisMonth} this month` : ""
+          }, null, 8, ["displayValue", "subtitle"]),
+          createVNode(_sfc_main$3, {
+            icon: _sfc_main$5,
+            title: "Total Orders",
+            displayValue: orderStats.value.total?.orderCount?.toLocaleString() || "—",
+            subtitle: orderStats.value.monthly?.orderCount ? `+${orderStats.value.monthly.orderCount} this month` : ""
+          }, null, 8, ["displayValue", "subtitle"]),
+          createVNode(_sfc_main$3, {
+            icon: _sfc_main$6,
+            title: "Total Revenue",
+            displayValue: "฿" + (orderStats.value.total?.totalRevenue?.toLocaleString() || "0"),
+            subtitle: orderStats.value.monthly?.totalRevenue ? `+฿${orderStats.value.monthly.totalRevenue.toLocaleString()} this month` : ""
+          }, null, 8, ["displayValue", "subtitle"])
+        ]),
+        createVNode(_sfc_main$7, {
+          title: "Revenue",
+          class: "mn-b-medium"
+        }, {
+          default: withCtx(() => [
+            revenueChart.value.length ? (openBlock(), createElementBlock("div", {
+              key: 0,
+              class: "pos-relative",
+              onMouseleave: _cache[1] || (_cache[1] = ($event) => hoveredRevenueIdx.value = -1)
+            }, [
+              (openBlock(), createElementBlock("svg", _hoisted_6, [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(revenueTicks.value, (tick, i) => {
+                  return openBlock(), createElementBlock("line", {
+                    key: "rg" + i,
+                    x1: "50",
+                    x2: "490",
+                    y1: chartY(tick, maxRevenue.value),
+                    y2: chartY(tick, maxRevenue.value),
+                    stroke: "rgb(var(--light))",
+                    "stroke-width": "0.5"
+                  }, null, 8, _hoisted_7);
+                }), 128)),
+                (openBlock(true), createElementBlock(Fragment, null, renderList(revenueTicks.value, (tick, i) => {
+                  return openBlock(), createElementBlock("text", {
+                    key: "ry" + i,
+                    x: "46",
+                    y: chartY(tick, maxRevenue.value) + 3,
+                    "text-anchor": "end",
+                    fill: "rgb(var(--grey))",
+                    "font-size": "10"
+                  }, toDisplayString(formatChartValue(tick)), 9, _hoisted_8);
+                }), 128)),
+                createElementVNode("polygon", {
+                  points: revenueAreaPoints.value,
+                  fill: "rgb(var(--second))",
+                  "fill-opacity": "0.06"
+                }, null, 8, _hoisted_9),
+                createElementVNode("polyline", {
+                  points: revenueLinePoints.value,
+                  fill: "none",
+                  stroke: "rgb(var(--second))",
+                  "stroke-width": "2",
+                  "stroke-linejoin": "round",
+                  "stroke-linecap": "round"
+                }, null, 8, _hoisted_10),
+                (openBlock(true), createElementBlock(Fragment, null, renderList(revenueChart.value, (day, i) => {
+                  return openBlock(), createElementBlock("circle", {
+                    key: "rh" + i,
+                    cx: chartX(i, revenueChart.value.length),
+                    cy: chartY(day.revenue, maxRevenue.value),
+                    r: "12",
+                    fill: "transparent",
+                    onMouseenter: ($event) => hoveredRevenueIdx.value = i
+                  }, null, 40, _hoisted_11);
+                }), 128)),
+                (openBlock(true), createElementBlock(Fragment, null, renderList(revenueChart.value, (day, i) => {
+                  return openBlock(), createElementBlock("circle", {
+                    key: "rd" + i,
+                    cx: chartX(i, revenueChart.value.length),
+                    cy: chartY(day.revenue, maxRevenue.value),
+                    r: hoveredRevenueIdx.value === i ? 4 : 2,
+                    fill: hoveredRevenueIdx.value === i ? "rgb(var(--main))" : "rgb(var(--second))",
+                    style: { "pointer-events": "none" }
+                  }, null, 8, _hoisted_12);
+                }), 128)),
+                (openBlock(true), createElementBlock(Fragment, null, renderList(revenueChart.value, (day, i) => {
+                  return openBlock(), createElementBlock(Fragment, {
+                    key: "rx" + i
+                  }, [
+                    i % revenueXStep.value === 0 ? (openBlock(), createElementBlock("text", {
+                      key: 0,
+                      x: chartX(i, revenueChart.value.length),
+                      y: "195",
+                      "text-anchor": "middle",
+                      fill: "rgb(var(--grey))",
+                      "font-size": "9"
+                    }, toDisplayString(formatXDate(day._id)), 9, _hoisted_13)) : createCommentVNode("", true)
+                  ], 64);
+                }), 128))
+              ])),
+              hoveredRevenueIdx.value >= 0 ? (openBlock(), createElementBlock("div", {
+                key: 0,
+                class: "pos-absolute bg-dark t-white pd-thin pd-l-small pd-r-small radius-small t-small fw-medium",
+                style: normalizeStyle([{ "pointer-events": "none", "white-space": "nowrap" }, revenueTooltipStyle.value])
+              }, " ฿" + toDisplayString(revenueChart.value[hoveredRevenueIdx.value].revenue.toLocaleString()) + " · " + toDisplayString(formatXDate(revenueChart.value[hoveredRevenueIdx.value]._id)), 5)) : createCommentVNode("", true)
+            ], 32)) : (openBlock(), createElementBlock("p", _hoisted_14, "No revenue data"))
+          ]),
+          _: 1
+        }),
+        createElementVNode("div", _hoisted_15, [
+          createVNode(_sfc_main$7, { title: "Recent Orders" }, {
+            default: withCtx(() => [
+              createVNode(_sfc_main$8, {
+                showLoadMore: false,
+                LoadMore: false,
+                states: { empty: { title: "No Orders", description: "No orders yet." } },
+                store: { read: (options) => actions.read(options), state },
+                options: { limit: 5, page: 1, sortParam: "createdAt", sortOrder: "desc", dateStart: dateRange.value.start, dateEnd: dateRange.value.end }
+              }, {
+                default: withCtx(({ items }) => [
+                  createVNode(Table, {
+                    class: "radius-small bg-white",
+                    items,
+                    columns: orderColumns
+                  }, {
+                    "cell-_id": withCtx(({ value }) => [
+                      createElementVNode("span", _hoisted_16, "#" + toDisplayString(formatId(value)), 1)
+                    ]),
+                    "cell-positions": withCtx(({ value }) => [
+                      createElementVNode("span", _hoisted_17, toDisplayString(value?.length || 0) + " items", 1)
+                    ]),
+                    "cell-status": withCtx(({ value }) => [
+                      createElementVNode("span", {
+                        class: normalizeClass(["pd-thin pd-l-small pd-r-small radius-small t-small fw-medium", getStatusClass(value)])
+                      }, toDisplayString(value), 3)
+                    ]),
+                    "cell-createdAt": withCtx(({ value }) => [
+                      createElementVNode("span", _hoisted_18, toDisplayString(unref(formatDate)(value, { dateOnly: true })), 1)
+                    ]),
+                    _: 2
+                  }, 1032, ["items"])
+                ]),
+                _: 1
+              }, 8, ["store", "options"])
             ]),
             _: 1
           }),
-          createVNode(_sfc_main$1, { class: "pos-relative" }, {
+          createVNode(_sfc_main$7, { title: "Upcoming Events" }, {
+            default: withCtx(() => [
+              createVNode(_sfc_main$8, {
+                showLoadMore: false,
+                LoadMore: false,
+                states: { empty: { title: "No Events", description: "No upcoming events." } },
+                store: { read: (options) => read(options), state: state$1 },
+                options: { sortParam: "date.start", sortOrder: "desc", limit: 5, page: 1 },
+                class: "flex flex-column gap-thin"
+              }, {
+                default: withCtx(({ items }) => [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(items, (event) => {
+                    return openBlock(), createBlock(_sfc_main$9, {
+                      key: event._id,
+                      to: `/events/${event.url || event._id}`,
+                      photo: event.cover,
+                      placeholder: _sfc_main$a,
+                      title: event.name,
+                      subtitle: unref(formatDate)(event.date?.start, { dateOnly: true }),
+                      classImage: "flex-none w-3r h-3r radius-small bg-main-transp flex flex-center o-hidden",
+                      classContent: "flex-child o-hidden",
+                      class: "bg-white pd-small radius-small hover-scale-1 transition-default flex flex-v-center gap-small"
+                    }, {
+                      actions: withCtx(() => [
+                        createElementVNode("span", {
+                          class: normalizeClass(["flex-none pd-thin pd-l-small pd-r-small radius-small t-small fw-medium", getEventStatusClass(event.date)])
+                        }, toDisplayString(getEventStatus(event.date)), 3)
+                      ]),
+                      _: 2
+                    }, 1032, ["to", "photo", "title", "subtitle"]);
+                  }), 128))
+                ]),
+                _: 1
+              }, 8, ["store"])
+            ]),
+            _: 1
+          })
+        ]),
+        createElementVNode("div", _hoisted_19, [
+          createVNode(_sfc_main$7, { title: "Recent Applications" }, {
             default: withCtx(() => [
-              _cache[3] || (_cache[3] = createElementVNode("span", { class: "t-green fw-semi pos-absolute pos-t-small pos-r-small" }, "+14.8%", -1)),
-              createElementVNode("div", _hoisted_4, [
-                createVNode(_sfc_main$3, { class: "i-medium mn-small" })
-              ]),
-              _cache[4] || (_cache[4] = createElementVNode("p", { class: "h3 mn-b-thin" }, "432", -1)),
-              _cache[5] || (_cache[5] = createElementVNode("p", null, "New Orders", -1))
+              createVNode(_sfc_main$8, {
+                showLoadMore: false,
+                LoadMore: false,
+                states: { empty: { title: "No Applications", description: "No applications." } },
+                store: { read: (options) => unref(applications).read(options), state: unref(applications).state },
+                options: { sortParam: "createdAt", sortOrder: "desc", limit: 5, page: 1, dateStart: dateRange.value.start, dateEnd: dateRange.value.end },
+                class: "flex flex-column gap-thin"
+              }, {
+                default: withCtx(({ items }) => [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(items, (app) => {
+                    return openBlock(), createBlock(_sfc_main$9, {
+                      key: app._id,
+                      to: `/backoffice/applications/${app._id}`,
+                      placeholder: _sfc_main$b,
+                      title: app.profile?.name || app.name || "Application",
+                      subtitle: unref(formatDate)(app.createdAt),
+                      classImage: "flex-none w-3r h-3r radius-small bg-main-transp flex flex-center o-hidden",
+                      classContent: "flex-child o-hidden",
+                      class: "bg-white pd-small radius-small hover-scale-1 transition-default flex flex-v-center gap-small"
+                    }, null, 8, ["to", "title", "subtitle"]);
+                  }), 128))
+                ]),
+                _: 1
+              }, 8, ["store", "options"])
             ]),
             _: 1
           }),
-          createVNode(_sfc_main$1, { class: "pos-relative" }, {
+          createVNode(_sfc_main$7, { title: "Recent Customers" }, {
             default: withCtx(() => [
-              _cache[6] || (_cache[6] = createElementVNode("span", { class: "t-green fw-semi pos-absolute pos-t-small pos-r-small" }, "+25.1%", -1)),
-              createElementVNode("div", _hoisted_5, [
-                createVNode(_sfc_main$2, { class: "i-medium mn-small" })
-              ]),
-              _cache[7] || (_cache[7] = createElementVNode("p", { class: "h3 mn-b-thin" }, "$23,232", -1)),
-              _cache[8] || (_cache[8] = createElementVNode("p", null, "Monthly Revenue", -1))
+              createVNode(_sfc_main$8, {
+                showLoadMore: false,
+                LoadMore: false,
+                states: { empty: { title: "No Customers", description: "No customers." } },
+                store: { read: (options) => unref(customers).read(options), state: unref(customers).state },
+                options: { sortParam: "createdAt", sortOrder: "desc", limit: 5, page: 1, dateStart: dateRange.value.start, dateEnd: dateRange.value.end },
+                class: "flex flex-column gap-thin"
+              }, {
+                default: withCtx(({ items }) => [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(items, (customer) => {
+                    return openBlock(), createBlock(_sfc_main$9, {
+                      key: customer._id,
+                      to: `/backoffice/customers/${customer._id}`,
+                      photo: customer.avatar || customer.profile?.photo,
+                      placeholder: _sfc_main$4,
+                      title: customer.profile?.name || customer.name || customer.phone || "Customer",
+                      subtitle: unref(formatDate)(customer.createdAt),
+                      classImage: "flex-none w-3r h-3r radius-extra bg-main-transp flex flex-center o-hidden",
+                      classContent: "flex-child o-hidden",
+                      class: "bg-white pd-small radius-small hover-scale-1 transition-default flex flex-v-center gap-small"
+                    }, null, 8, ["to", "photo", "title", "subtitle"]);
+                  }), 128))
+                ]),
+                _: 1
+              }, 8, ["store", "options"])
             ]),
             _: 1
           })
         ]),
-        createElementVNode("div", _hoisted_6, [
-          createVNode(_sfc_main$1, {
-            title: "Recent Orders",
-            class: "pos-relative"
-          }, {
+        createVNode(_sfc_main$7, {
+          title: "Popular Products",
+          class: "mn-b-medium"
+        }, {
+          default: withCtx(() => [
+            orderStats.value.popularProducts?.length ? (openBlock(), createElementBlock("div", _hoisted_20, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(orderStats.value.popularProducts, (product) => {
+                return openBlock(), createBlock(_sfc_main$c, {
+                  key: product._id,
+                  product,
+                  showAddToCart: false,
+                  class: "bg-white"
+                }, {
+                  default: withCtx(() => [
+                    createElementVNode("p", _hoisted_21, toDisplayString(product.totalQuantity) + " sold · ฿" + toDisplayString(product.totalRevenue?.toLocaleString()), 1)
+                  ]),
+                  _: 2
+                }, 1032, ["product"]);
+              }), 128))
+            ])) : (openBlock(), createElementBlock("p", _hoisted_22, "No product data"))
+          ]),
+          _: 1
+        }),
+        createElementVNode("div", _hoisted_23, [
+          createVNode(_sfc_main$7, { title: "Recent Registrations" }, {
             default: withCtx(() => [
-              createVNode(_sfc_main$4, {
+              createVNode(_sfc_main$8, {
                 showLoadMore: false,
                 LoadMore: false,
-                states: {
-                  empty: {
-                    title: "No Events Today",
-                    description: "Currently, there are no events available."
-                  }
-                },
-                store: {
-                  read: (options) => actions.read(options),
-                  state: state$1
-                },
-                options: {
-                  user: state.user._id,
-                  limit: 5,
-                  page: 1
-                },
-                class: "cols-1 gap-thin"
+                states: { empty: { title: "No Registrations", description: "No recent registrations." } },
+                store: { read: (options) => actions$1.read(options), state: state$2 },
+                options: { sortParam: "createdAt", sortOrder: "desc", limit: 5, page: 1, dateStart: dateRange.value.start, dateEnd: dateRange.value.end },
+                class: "flex flex-column gap-thin"
               }, {
-                default: withCtx(({
-                  items
-                }) => [
-                  createVNode(Table, {
-                    class: "radius-semi bg-white",
-                    items,
-                    columns: [
-                      {
-                        key: "_id",
-                        label: "ID",
-                        formatter: (value) => `#${value.slice(0, 4)}...${value.slice(-4)}`
-                      },
-                      {
-                        key: "customer.target.profile.name",
-                        label: "Name",
-                        formatter: (value) => `👤 ${value}`
-                      },
-                      {
-                        key: "positions",
-                        label: "Name",
-                        formatter: (value) => value?.length || 0
-                      },
-                      {
-                        key: "status",
-                        label: "Status",
-                        component: StatusBadge
-                      },
-                      {
-                        key: "createdAt",
-                        label: "Metadata",
-                        formatter: (value) => new Date(value).toLocaleDateString()
-                      }
-                    ]
-                  }, null, 8, ["items", "columns"])
+                default: withCtx(({ items }) => [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(items, (user) => {
+                    return openBlock(), createBlock(_sfc_main$9, {
+                      key: user._id,
+                      to: `/users/${user._id}`,
+                      photo: user.avatar || user.profile?.photo,
+                      placeholder: _sfc_main$4,
+                      title: user.profile?.name || user.username || user.email || "User",
+                      subtitle: unref(formatDate)(user.createdAt),
+                      classImage: "flex-none w-3r h-3r radius-extra bg-main-transp flex flex-center o-hidden",
+                      classContent: "flex-child o-hidden",
+                      class: "bg-white pd-small radius-small hover-scale-1 transition-default flex flex-v-center gap-small"
+                    }, null, 8, ["to", "photo", "title", "subtitle"]);
+                  }), 128))
                 ]),
                 _: 1
               }, 8, ["store", "options"])
             ]),
             _: 1
           }),
-          createVNode(_sfc_main$1, {
-            title: "Activity Feed",
-            class: "pos-relative"
+          createVNode(_sfc_main$7, { title: "Upcoming Rents" }, {
+            default: withCtx(() => [
+              createVNode(_sfc_main$8, {
+                showLoadMore: false,
+                LoadMore: false,
+                search: false,
+                states: { empty: { title: "No Rents", description: "No upcoming bookings." } },
+                store: { read: (options) => actions$2.read(options), state: state$3 },
+                options: { sortParam: "startDate", sortOrder: "desc", limit: 5 },
+                class: "flex flex-column gap-thin"
+              }, {
+                default: withCtx(({ items }) => [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(items, (rent) => {
+                    return openBlock(), createBlock(_sfc_main$9, {
+                      key: rent._id,
+                      to: `/backoffice/orders/${rent.order}`,
+                      placeholder: _sfc_main$2,
+                      title: rent.product?.name || "Rent",
+                      subtitle: `${unref(formatDate)(rent.startDate)} — ${unref(formatDate)(rent.endDate)}`,
+                      classImage: "flex-none w-3r h-3r radius-small bg-main-transp flex flex-center o-hidden",
+                      classContent: "flex-child o-hidden",
+                      class: "bg-white pd-small radius-small hover-scale-1 transition-default flex flex-v-center gap-small"
+                    }, null, 8, ["to", "title", "subtitle"]);
+                  }), 128))
+                ]),
+                _: 1
+              }, 8, ["store"])
+            ]),
+            _: 1
           })
         ])
       ]);