@ozdao/martyrs 0.2.604 → 0.2.605

package/dist/martyrs/src/modules/rents/views/components/pages/Rents.vue.js

@@ -1,69 +1,320 @@
-import { ref, computed, createElementBlock, openBlock, createElementVNode, createVNode, unref, toDisplayString, withCtx } from "vue";
+import { ref, computed, reactive, resolveComponent, createElementBlock, openBlock, createBlock, createCommentVNode, createVNode, unref, withCtx, createElementVNode, toDisplayString, normalizeClass, Fragment, createTextVNode, normalizeStyle } from "vue";
 import dayjs from "../../../../../../../_virtual/dayjs.min.js";
-/* empty css                                    */
-import _sfc_main$1 from "../../../../../components/Feed/Feed.vue.js";
-/* empty css                      */
-import _sfc_main$2 from "./Gant/GanttChart.vue.js";
+import _sfc_main$2 from "../../../../../components/Feed/Feed.vue.js";
+import Field from "../../../../../components/Field/Field.vue.js";
+import _sfc_main$4 from "../../../../../components/Popup/Popup.vue.js";
+import Button from "../../../../../components/Button/Button.vue2.js";
+import _sfc_main$7 from "../../../../../components/Block/Block.vue.js";
+import _sfc_main$5 from "../../../../orders/components/blocks/CardOrderItem.vue.js";
+import _sfc_main$1 from "../../../../core/views/components/sections/SectionPageTitle.vue.js";
+import _sfc_main$3 from "./Gant/GanttChart.vue.js";
+import IconChevronBottom from "../../../../icons/navigation/IconChevronBottom.vue.js";
+import _sfc_main$6 from "../../../../orders/components/forms/FormSelectCustomer.vue.js";
+import { state } from "../../../../auth/views/store/auth.js";
 import { useRoute, useRouter } from "vue-router";
-import { actions } from "../../store/rents.store.js";
+import { useGlobalMixins } from "../../../../core/views/mixins/mixins.js";
+import { actions as actions$1 } from "../../store/rents.store.js";
+import { actions } from "../../../../products/store/products.js";
+import { actions as actions$2 } from "../../../../orders/store/orders.js";
+import { useStore } from "../../../../core/views/store/core.store.js";
 const _hoisted_1 = { class: "pd-medium mobile:pd-thin bg-white" };
-const _hoisted_2 = { class: "mn-b-medium flex-v-center flex-nowrap flex" };
-const _hoisted_3 = { class: "mn-l-auto flex-v-center" };
+const _hoisted_2 = ["onClick"];
+const _hoisted_3 = { class: "fw-bold truncate" };
+const _hoisted_4 = {
+  key: 1,
+  class: "flex flex-v-center gap-micro h-100 pd-l-medium o-hidden"
+};
+const _hoisted_5 = { class: "t-small opacity-50 truncate" };
+const _hoisted_6 = {
+  key: 2,
+  class: "fw-medium truncate"
+};
+const _hoisted_7 = {
+  key: 0,
+  class: "w-100"
+};
+const _hoisted_8 = { class: "mn-b-small" };
+const _hoisted_9 = { class: "flex-nowrap flex gap-thin" };
+const _hoisted_10 = { class: "w-100 bg-light radius-small pd-small" };
+const _hoisted_11 = { class: "fw-medium" };
+const _hoisted_12 = { class: "w-100 bg-light radius-small pd-small" };
+const _hoisted_13 = {
+  key: 0,
+  class: "mn-b-small"
+};
+const _hoisted_14 = { class: "flex-nowrap flex gap-thin" };
+const _hoisted_15 = { class: "mn-b-small" };
+const _hoisted_16 = { class: "flex-nowrap flex gap-thin" };
+const _hoisted_17 = { class: "w-100 bg-light radius-small pd-small" };
+const _hoisted_18 = { class: "w-100 bg-light radius-small pd-small" };
+const _hoisted_19 = { class: "mn-b-small" };
+const _hoisted_20 = {
+  key: 0,
+  class: "flex-nowrap flex gap-thin"
+};
+const _hoisted_21 = { class: "w-100 bg-light radius-small pd-small" };
+const _hoisted_22 = { class: "w-100 bg-light radius-small pd-small" };
+const _hoisted_23 = { class: "flex-v-center flex gap-micro" };
+const _hoisted_24 = {
+  key: 1,
+  class: "bg-light radius-small pd-small opacity-50 t-small"
+};
+const _hoisted_25 = {
+  key: 1,
+  class: "mn-b-small"
+};
+const _hoisted_26 = { class: "flex-column flex w-100" };
+const _hoisted_27 = { class: "fw-medium t-small" };
+const _hoisted_28 = { class: "mn-b-small" };
+const _hoisted_29 = { class: "w-100" };
+const _hoisted_30 = {
+  key: 0,
+  class: "fw-medium mn-b-micro"
+};
+const _hoisted_31 = {
+  key: 1,
+  class: "t-small opacity-70 mn-b-micro"
+};
+const _hoisted_32 = {
+  key: 2,
+  class: "t-small opacity-70"
+};
+const _hoisted_33 = {
+  key: 1,
+  class: "bg-light radius-small pd-small opacity-50"
+};
+const _hoisted_34 = {
+  key: 2,
+  class: "mn-b-small"
+};
+const _hoisted_35 = { class: "bg-light radius-small pd-small t-small" };
+const _hoisted_36 = { class: "flex-nowrap flex gap-small" };
+const _hoisted_37 = { class: "flex flex-column gap-thin" };
 const _sfc_main = {
   __name: "Rents",
   setup(__props) {
+    const { core } = useStore();
     const route = useRoute();
     useRouter();
-    const isCalendarView = ref(true);
-    const view = ref("days");
+    const { isPhone } = useGlobalMixins();
+    const currentProducts = ref([]);
+    const view = ref("hours");
     const date = ref(/* @__PURE__ */ new Date());
     const loading = ref(false);
     const dateRange = computed(() => {
       const d = dayjs(date.value);
       switch (view.value) {
         case "hours":
-          return {
-            start: d.startOf("day").toDate(),
-            end: d.endOf("day").toDate()
-          };
+          return { start: d.startOf("day").toDate(), end: d.endOf("day").toDate() };
         case "days":
-          return {
-            start: d.startOf("month").toDate(),
-            end: d.endOf("month").toDate()
-          };
+          return { start: d.startOf("month").toDate(), end: d.endOf("month").toDate() };
         case "weeks":
-          return {
-            start: d.subtract(1, "month").startOf("week").toDate(),
-            end: d.add(2, "months").endOf("week").toDate()
-          };
+          return { start: d.subtract(1, "month").startOf("week").toDate(), end: d.add(2, "months").endOf("week").toDate() };
         default:
-          return {
-            start: d.startOf("month").toDate(),
-            end: d.endOf("month").toDate()
-          };
+          return { start: d.startOf("month").toDate(), end: d.endOf("month").toDate() };
       }
     });
+    const routePrefix = computed(() => {
+      const ctx = route.meta.context;
+      if (ctx === "backoffice") return "Backoffice";
+      if (ctx === "organization") return "Organization_";
+      return "";
+    });
+    const getOwnerIdFromProduct = (owner) => {
+      if (!owner) return route.params._id;
+      if (typeof owner === "string") return owner;
+      if (typeof owner?.target === "string") return owner.target;
+      if (owner?.target?._id) return owner.target._id;
+      return route.params._id;
+    };
+    const expandedProducts = ref(/* @__PURE__ */ new Set());
+    const toggleProduct = (productId) => {
+      const s = new Set(expandedProducts.value);
+      s.has(productId) ? s.delete(productId) : s.add(productId);
+      expandedProducts.value = s;
+    };
+    const expandedInitialized = ref(false);
+    const ganttGroups = (productItems) => {
+      if (!expandedInitialized.value && productItems.length > 0) {
+        productItems.forEach((p) => {
+          if (p.variants?.length) expandedProducts.value.add(p._id);
+        });
+        expandedProducts.value = new Set(expandedProducts.value);
+        expandedInitialized.value = true;
+      }
+      const groups = [];
+      productItems.forEach((product) => {
+        const hasVariants = product.variants?.length > 0;
+        groups.push({
+          key: product._id,
+          title: product.name || "Unknown",
+          data: { productId: product._id, isProductRow: true, hasVariants, productImages: product.images || [], productPrice: product.price || 0, productOwner: product.owner, productRentPeriod: product.rentPeriod || "day" }
+        });
+        if (hasVariants && expandedProducts.value.has(product._id)) {
+          product.variants.forEach((variant) => {
+            groups.push({
+              key: `${product._id}_${variant._id}`,
+              title: variant.name || "Default",
+              data: {
+                productId: product._id,
+                productName: product.name || "Unknown",
+                variantId: variant._id,
+                variantName: variant.name,
+                isVariantRow: true,
+                productImages: variant.images?.length ? variant.images : product.images || [],
+                productPrice: variant.price || product.price || 0,
+                productOwner: product.owner,
+                productRentPeriod: product.rentPeriod || "day"
+              }
+            });
+          });
+        }
+      });
+      return groups;
+    };
+    const flattenProductRents = (productItems) => {
+      const result = [];
+      productItems.forEach((product) => {
+        const name = product.name || "Unknown";
+        const hasVariants = product.variants?.length > 0;
+        if (product.rents?.length > 0) {
+          product.rents.forEach((rent) => {
+            const groupKey = hasVariants && rent.variant ? `${product._id}_${rent.variant}` : product._id;
+            result.push({ ...rent, productDetails: { name, productId: groupKey } });
+          });
+        }
+        if (!product.rents?.some((r) => !r.variant)) {
+          result.push({ _id: `placeholder-${product._id}`, productDetails: { name, productId: product._id }, startDate: null, endDate: null, status: null });
+        }
+        if (hasVariants && expandedProducts.value.has(product._id)) {
+          product.variants.forEach((variant) => {
+            const varKey = `${product._id}_${variant._id}`;
+            if (!product.rents?.some((r) => r.variant === variant._id)) {
+              result.push({ _id: `placeholder-${varKey}`, productDetails: { name: variant.name || "Default", productId: varKey }, startDate: null, endDate: null, status: null });
+            }
+          });
+        }
+      });
+      return result;
+    };
+    const showCreatePopup = ref(false);
+    const createRentData = reactive({
+      productId: null,
+      productName: "",
+      productImages: [],
+      productPrice: 0,
+      productOwner: null,
+      variantId: null,
+      variantName: "",
+      comment: "",
+      customer: null,
+      rentPeriod: "day"
+    });
+    const createRentDates = ref({ start: null, end: null });
+    const closeCreatePopup = () => {
+      showCreatePopup.value = false;
+      createRentData.productId = null;
+      createRentData.productName = "";
+      createRentData.productImages = [];
+      createRentData.productPrice = 0;
+      createRentData.productOwner = null;
+      createRentData.variantId = null;
+      createRentData.variantName = "";
+      createRentData.comment = "";
+      createRentData.customer = null;
+      createRentData.rentPeriod = "day";
+      createRentDates.value = { start: null, end: null };
+    };
+    const handleCellClick = ({ group, cell }) => {
+      if (!group?.data) return;
+      const d = cell?.date ? dayjs(cell.date) : dayjs();
+      createRentData.productId = group.data.productId;
+      createRentData.productName = group.data.isVariantRow ? group.data.productName : group.title;
+      createRentData.productImages = group.data.productImages || [];
+      createRentData.productPrice = group.data.productPrice || 0;
+      createRentData.productOwner = group.data.productOwner;
+      createRentData.variantId = group.data.variantId || null;
+      createRentData.variantName = group.data.variantName || "";
+      createRentData.comment = "";
+      createRentData.customer = null;
+      createRentData.rentPeriod = group.data.productRentPeriod || "day";
+      const start = d.toDate();
+      const end = d.add(4, "hour").toDate();
+      createRentDates.value = { start, end };
+      showCreatePopup.value = true;
+    };
+    const onRentDatesUpdate = (productId, variantId, dates) => {
+      createRentDates.value = dates;
+    };
+    const submitCreateRent = async () => {
+      const { start, end } = createRentDates.value;
+      if (!start || !end) throw new Error("No dates selected");
+      const ownerId = getOwnerIdFromProduct(createRentData.productOwner);
+      const startDate = new Date(start).toISOString();
+      const endDate = new Date(end).toISOString();
+      console.log("[submitCreateRent] customer:", JSON.stringify(createRentData.customer));
+      console.log("[submitCreateRent] customer._id:", createRentData.customer?._id);
+      const rentResult = await actions$1.create({
+        product: createRentData.productId,
+        variant: createRentData.variantId || void 0,
+        startDate,
+        endDate,
+        status: "pending",
+        comment: createRentData.comment || void 0,
+        owner: { type: "Organization", target: ownerId },
+        creator: { type: "User", target: state.user?._id }
+      });
+      console.log("[submitCreateRent] rentResult:", JSON.stringify(rentResult));
+      const customerPayload = createRentData.customer?._id ? { type: "Customer", target: createRentData.customer._id } : createRentData.customer?.phone ? { type: "Customer", target: null, phone: createRentData.customer.phone, email: createRentData.customer.email, profile: { name: createRentData.customer.profile?.name } } : void 0;
+      console.log("[submitCreateRent] customerPayload for order:", JSON.stringify(customerPayload));
+      const orderResult = await actions$2.create({
+        customer: createRentData.customer?._id ? { type: "Customer", target: createRentData.customer._id } : createRentData.customer?.phone ? { type: "Customer", target: null, phone: createRentData.customer.phone, email: createRentData.customer.email, profile: { name: createRentData.customer.profile?.name } } : void 0,
+        owner: { type: "Organization", target: ownerId },
+        status: "pending",
+        creator: { type: "User", target: state.user?._id },
+        comment: createRentData.comment || void 0,
+        existingRents: rentResult?._id ? [rentResult._id] : [],
+        positions: [{
+          _id: createRentData.productId,
+          variant: createRentData.variantId || void 0,
+          name: createRentData.productName,
+          price: createRentData.productPrice,
+          quantity: 1,
+          listing: "rent",
+          rentPeriod: createRentData.rentPeriod || "flat",
+          date: { start: startDate, end: endDate }
+        }]
+      });
+      console.log("[submitCreateRent] orderResult:", JSON.stringify(orderResult));
+      console.log("[submitCreateRent] orderResult.customer:", JSON.stringify(orderResult?.customer));
+      if (!orderResult?._id) throw new Error("Order creation failed");
+      if (rentResult?._id) {
+        await actions$1.update({ _id: rentResult._id, order: orderResult._id });
+        rentResult.order = orderResult._id;
+      }
+      if (createRentData.customer) {
+        rentResult.customer = {
+          profile: createRentData.customer.profile,
+          phone: createRentData.customer.phone,
+          email: createRentData.customer.email
+        };
+      }
+      const product = currentProducts.value.find((p) => p._id === createRentData.productId);
+      if (product) {
+        if (!product.rents) product.rents = [];
+        core.actions.add(product.rents, rentResult);
+      }
+      closeCreatePopup();
+    };
     const handleLoadMore = async (direction) => {
-      console.log("Loading more:", direction);
       loading.value = true;
       try {
         if (direction !== "refresh") {
           const d = dayjs(date.value);
-          let newDate;
-          switch (view.value) {
-            case "hours":
-              newDate = direction === "forward" ? d.add(1, "day").toDate() : d.subtract(1, "day").toDate();
-              break;
-            case "days":
-              newDate = direction === "forward" ? d.add(1, "month").toDate() : d.subtract(1, "month").toDate();
-              break;
-            case "weeks":
-              newDate = direction === "forward" ? d.add(1, "month").toDate() : d.subtract(1, "month").toDate();
-              break;
-          }
-          date.value = newDate;
+          const unit = view.value === "hours" ? "day" : "month";
+          date.value = direction === "forward" ? d.add(1, unit).toDate() : d.subtract(1, unit).toDate();
         }
-        await actions.read({
+        await actions$1.read({
           owner: route.params._id,
           startDate: dateRange.value.start.toISOString(),
           endDate: dateRange.value.end.toISOString()
@@ -74,78 +325,432 @@ const _sfc_main = {
         loading.value = false;
       }
     };
+    const handleToday = () => {
+      date.value = /* @__PURE__ */ new Date();
+    };
+    const selectedRent = ref(null);
+    const selectedRentOrder = ref(null);
+    const selectedRentCustomer = ref(null);
+    const orderLink = computed(() => {
+      if (!selectedRent.value?.order) return "";
+      const ctx = route.meta.context;
+      const id = selectedRent.value.order;
+      if (ctx === "backoffice") return `/backoffice/orders/${id}`;
+      if (ctx === "organization") return `/organizations/${route.params._id}/orders/${id}`;
+      return `/orders/${id}`;
+    });
+    const customerLink = computed(() => {
+      if (!selectedRentCustomer.value?._id) return "";
+      const ctx = route.meta.context;
+      const id = selectedRentCustomer.value._id;
+      if (ctx === "backoffice") return `/backoffice/customers?customerId=${id}`;
+      if (ctx === "organization") return `/organizations/${route.params._id}/customers?customerId=${id}`;
+      return `/customers?customerId=${id}`;
+    });
+    const rentStatusClass = computed(() => {
+      const map = { pending: "bg-yellow", confirmed: "bg-second", active: "bg-green", completed: "bg-grey", canceled: "bg-red" };
+      return map[selectedRent.value?.status] || "bg-second";
+    });
+    const formatDate = (d) => d ? dayjs(d).format("HH:mm, DD MMM YYYY") : "—";
+    const loadOrderData = async (orderId) => {
+      if (!orderId) return;
+      try {
+        console.log("[loadOrderData] loading order:", orderId);
+        const result = await actions$2.read({ _id: orderId });
+        console.log("[loadOrderData] result:", JSON.stringify(result?.[0]?.customer));
+        if (result?.length > 0) {
+          selectedRentOrder.value = result[0];
+          console.log("[loadOrderData] customer.target:", result[0].customer?.target);
+          console.log("[loadOrderData] customer.target type:", typeof result[0].customer?.target);
+          if (result[0].customer?.target) selectedRentCustomer.value = result[0].customer.target;
+          console.log("[loadOrderData] selectedRentCustomer:", JSON.stringify(selectedRentCustomer.value));
+        }
+      } catch (err) {
+        console.error("[loadOrderData] Error:", err);
+      }
+    };
     const handleItemClick = (item) => {
-      console.log("Item clicked:", item);
+      if (item._id?.startsWith("placeholder-")) return;
+      console.log("[handleItemClick] item:", item._id, "order:", item.order);
+      selectedRent.value = item;
+      selectedRentOrder.value = null;
+      selectedRentCustomer.value = null;
+      if (item.order) loadOrderData(item.order);
     };
-    const handleToday = () => {
-      const now = /* @__PURE__ */ new Date();
-      date.value = now;
-      if (view.value === "hours") {
-        date.value = /* @__PURE__ */ new Date();
+    const closeRentPopup = () => {
+      selectedRent.value = null;
+      selectedRentOrder.value = null;
+      selectedRentCustomer.value = null;
+    };
+    const updateRentInProducts = (rentId, updates) => {
+      for (const product of currentProducts.value) {
+        if (!product.rents) continue;
+        const rent = product.rents.find((r) => r._id === rentId);
+        if (rent) {
+          Object.assign(rent, updates);
+          break;
+        }
       }
     };
-    const today = /* @__PURE__ */ new Date();
-    const calendarStartDate = ref(new Date(today));
-    calendarStartDate.value.setDate(today.getDate() - 30);
-    const calendarEndDate = ref(new Date(today));
-    calendarEndDate.value.setDate(today.getDate() + 30);
-    const toggleView = () => {
-      isCalendarView.value = !isCalendarView.value;
+    const confirmRent = async () => {
+      try {
+        await actions$1.update({ _id: selectedRent.value._id, status: "active" });
+        selectedRent.value.status = "active";
+        updateRentInProducts(selectedRent.value._id, { status: "active" });
+        if (selectedRentOrder.value) {
+          await actions$2.update({ _id: selectedRentOrder.value._id, status: "in_progress" });
+          selectedRentOrder.value.status = "in_progress";
+        }
+      } catch (err) {
+        console.error("Error confirming rent:", err);
+      }
+    };
+    const cancelRent = async () => {
+      try {
+        await actions$1.update({ _id: selectedRent.value._id, status: "canceled" });
+        selectedRent.value.status = "canceled";
+        updateRentInProducts(selectedRent.value._id, { status: "canceled" });
+        if (selectedRentOrder.value) {
+          await actions$2.update({ _id: selectedRentOrder.value._id, status: "canceled" });
+          selectedRentOrder.value.status = "canceled";
+        }
+        closeRentPopup();
+      } catch (err) {
+        console.error("Error canceling rent:", err);
+      }
+    };
+    const closeRent = async () => {
+      try {
+        await actions$1.update({ _id: selectedRent.value._id, status: "completed" });
+        selectedRent.value.status = "completed";
+        updateRentInProducts(selectedRent.value._id, { status: "completed" });
+        if (selectedRentOrder.value) {
+          await actions$2.update({ _id: selectedRentOrder.value._id, status: "finished" });
+          selectedRentOrder.value.status = "finished";
+        }
+        closeRentPopup();
+      } catch (err) {
+        console.error("Error closing rent:", err);
+      }
+    };
+    const closeRentNow = async () => {
+      const now = (/* @__PURE__ */ new Date()).toISOString();
+      try {
+        await actions$1.update({ _id: selectedRent.value._id, status: "completed", endDate: now });
+        selectedRent.value.status = "completed";
+        selectedRent.value.endDate = now;
+        updateRentInProducts(selectedRent.value._id, { status: "completed", endDate: now });
+        if (selectedRentOrder.value) {
+          await actions$2.update({ _id: selectedRentOrder.value._id, status: "finished" });
+          selectedRentOrder.value.status = "finished";
+        }
+        closeRentPopup();
+      } catch (err) {
+        console.error("Error closing rent:", err);
+      }
+    };
+    const togglePaymentStatus = async () => {
+      if (!selectedRentOrder.value) return;
+      const newStatus = selectedRentOrder.value.payment?.status === "paid" ? "unpaid" : "paid";
+      try {
+        await actions$2.update({ _id: selectedRentOrder.value._id, payment: { ...selectedRentOrder.value.payment, status: newStatus } });
+        selectedRentOrder.value.payment = { ...selectedRentOrder.value.payment, status: newStatus };
+      } catch (err) {
+        console.error("Error toggling payment:", err);
+      }
     };
     return (_ctx, _cache) => {
+      const _component_router_link = resolveComponent("router-link");
       return openBlock(), createElementBlock("div", _hoisted_1, [
-        createElementVNode("header", _hoisted_2, [
-          _cache[4] || (_cache[4] = createElementVNode("h2", { class: "mn-r-medium" }, "Rents", -1)),
-          createElementVNode("button", {
-            onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$router.push({ name: "Organization_Create Rent", params: { _id: unref(route).params._id } })),
-            class: "radius-extra i-big hover:scale-[1.05] cursor-pointer t-white bg-second"
-          }, " + "),
-          createElementVNode("div", _hoisted_3, [
-            createElementVNode("button", {
-              onClick: toggleView,
-              class: "pd-small radius-small bg-light mn-r-small"
-            }, toDisplayString(isCalendarView.value ? "List View" : "Calendar View"), 1)
-          ])
-        ]),
-        createVNode(_sfc_main$1, {
+        !_ctx.MOBILE_APP ? (openBlock(), createBlock(_sfc_main$1, {
+          key: 0,
+          title: "Rents",
+          actions: [
+            { method: () => _ctx.$router.push({ name: routePrefix.value + "Create Rent" }), label: "+ Add Rent" }
+          ],
+          class: "mn-b-medium"
+        }, null, 8, ["actions"])) : createCommentVNode("", true),
+        createVNode(_sfc_main$2, {
+          items: currentProducts.value,
+          "onUpdate:items": _cache[3] || (_cache[3] = ($event) => currentProducts.value = $event),
           search: true,
           keepSlotVisible: true,
           states: {
             empty: {
-              title: "No Rents Found",
-              description: "Currently, there are no rents available."
+              title: "No Tables Found",
+              description: "No products available."
             }
           },
           store: { read: (options) => actions.read(options) },
           options: {
             owner: unref(route).params._id,
+            listing: "rent",
+            lookup: ["rents", "variants"],
             startDate: dateRange.value.start.toISOString(),
-            endDate: dateRange.value.end.toISOString()
+            endDate: dateRange.value.end.toISOString(),
+            limit: 50
           }
         }, {
-          default: withCtx(({ items }) => [
-            createVNode(_sfc_main$2, {
+          default: withCtx(({ items: productItems }) => [
+            createVNode(_sfc_main$3, {
               view: view.value,
-              "onUpdate:view": _cache[1] || (_cache[1] = ($event) => view.value = $event),
+              "onUpdate:view": _cache[0] || (_cache[0] = ($event) => view.value = $event),
               date: date.value,
-              "onUpdate:date": _cache[2] || (_cache[2] = ($event) => date.value = $event),
+              "onUpdate:date": _cache[1] || (_cache[1] = ($event) => date.value = $event),
               dateRange: dateRange.value,
-              "onUpdate:dateRange": _cache[3] || (_cache[3] = ($event) => dateRange.value = $event),
-              items,
+              "onUpdate:dateRange": _cache[2] || (_cache[2] = ($event) => dateRange.value = $event),
+              items: flattenProductRents(productItems),
+              "external-groups": ganttGroups(productItems),
               loading: loading.value,
               "title-key": "productDetails.name",
               "start-key": "startDate",
               "end-key": "endDate",
               "status-key": "status",
               "id-key": "_id",
-              "group-by": "productDetails.name",
+              "group-by": "productDetails.productId",
               onLoadMore: handleLoadMore,
               onItemClick: handleItemClick,
+              onCellClick: handleCellClick,
               onToday: handleToday
-            }, null, 8, ["view", "date", "dateRange", "items", "loading"])
+            }, {
+              "product-col": withCtx(({ group }) => [
+                group.data?.isProductRow && group.data?.hasVariants ? (openBlock(), createElementBlock("div", {
+                  key: 0,
+                  class: "flex flex-v-center gap-micro cursor-pointer h-100 w-100 o-hidden",
+                  onClick: ($event) => toggleProduct(group.data.productId)
+                }, [
+                  createElementVNode("span", _hoisted_3, toDisplayString(group.title), 1),
+                  createVNode(IconChevronBottom, {
+                    fill: "rgba(var(--dark))",
+                    class: normalizeClass(["i-small mn-l-auto ease-out flex-shrink-0", { "rotate-180deg": expandedProducts.value.has(group.data.productId) }])
+                  }, null, 8, ["class"])
+                ], 8, _hoisted_2)) : group.data?.isVariantRow ? (openBlock(), createElementBlock("div", _hoisted_4, [
+                  createElementVNode("span", _hoisted_5, toDisplayString(group.data.variantName || "Default"), 1)
+                ])) : (openBlock(), createElementBlock("div", _hoisted_6, toDisplayString(group.title), 1))
+              ]),
+              _: 2
+            }, 1032, ["view", "date", "dateRange", "items", "external-groups", "loading"])
+          ]),
+          _: 1
+        }, 8, ["items", "store", "options"]),
+        createVNode(_sfc_main$4, {
+          isPopupOpen: !!selectedRent.value,
+          onClosePopup: closeRentPopup,
+          align: unref(isPhone)() ? "bottom center" : "center center",
+          title: "Rent Details",
+          class: "bg-white radius-medium pd-small w-clamp-25r-25r-100 mobile:radius-zero mobile:radius-tr-medium mobile:radius-tl-medium"
+        }, {
+          default: withCtx(() => [
+            selectedRent.value ? (openBlock(), createElementBlock("div", _hoisted_7, [
+              _cache[26] || (_cache[26] = createElementVNode("p", { class: "mn-b-small opacity-50" }, " Booking information and customer details. ", -1)),
+              createElementVNode("div", _hoisted_8, [
+                createElementVNode("div", _hoisted_9, [
+                  createElementVNode("div", _hoisted_10, [
+                    _cache[6] || (_cache[6] = createElementVNode("p", { class: "mn-b-micro opacity-50 t-small" }, "Product", -1)),
+                    createElementVNode("p", _hoisted_11, toDisplayString(selectedRent.value.productDetails?.name), 1)
+                  ]),
+                  createElementVNode("div", _hoisted_12, [
+                    _cache[7] || (_cache[7] = createElementVNode("p", { class: "mn-b-micro opacity-50 t-small" }, "Status", -1)),
+                    createElementVNode("span", {
+                      class: normalizeClass(["pd-micro pd-l-thin pd-r-thin radius-extra t-micro t-white", rentStatusClass.value])
+                    }, toDisplayString(selectedRent.value.status), 3)
+                  ])
+                ])
+              ]),
+              selectedRent.value.status !== "completed" && selectedRent.value.status !== "canceled" ? (openBlock(), createElementBlock("div", _hoisted_13, [
+                _cache[12] || (_cache[12] = createElementVNode("p", { class: "mn-b-thin fw-medium" }, "Actions", -1)),
+                createElementVNode("div", _hoisted_14, [
+                  selectedRent.value.status === "pending" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                    createVNode(Button, {
+                      submit: () => confirmRent(),
+                      class: "pd-small radius-small flex-center flex w-100 cursor-pointer bg-second t-white t-small"
+                    }, {
+                      default: withCtx(() => _cache[8] || (_cache[8] = [
+                        createTextVNode(" Confirm ")
+                      ])),
+                      _: 1
+                    }, 8, ["submit"]),
+                    createVNode(Button, {
+                      submit: () => cancelRent(),
+                      class: "pd-small radius-small flex-center flex w-100 cursor-pointer bg-red t-white t-small"
+                    }, {
+                      default: withCtx(() => _cache[9] || (_cache[9] = [
+                        createTextVNode(" Cancel ")
+                      ])),
+                      _: 1
+                    }, 8, ["submit"])
+                  ], 64)) : createCommentVNode("", true),
+                  selectedRent.value.status === "confirmed" || selectedRent.value.status === "active" ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                    createVNode(Button, {
+                      submit: () => closeRent(),
+                      class: "pd-small radius-small flex-center flex w-100 cursor-pointer bg-main t-black t-small"
+                    }, {
+                      default: withCtx(() => _cache[10] || (_cache[10] = [
+                        createTextVNode(" Close ")
+                      ])),
+                      _: 1
+                    }, 8, ["submit"]),
+                    createVNode(Button, {
+                      submit: () => closeRentNow(),
+                      class: "pd-small radius-small flex-center flex w-100 cursor-pointer bg-green t-white t-small"
+                    }, {
+                      default: withCtx(() => _cache[11] || (_cache[11] = [
+                        createTextVNode(" Close Now ")
+                      ])),
+                      _: 1
+                    }, 8, ["submit"])
+                  ], 64)) : createCommentVNode("", true)
+                ])
+              ])) : createCommentVNode("", true),
+              createElementVNode("div", _hoisted_15, [
+                _cache[15] || (_cache[15] = createElementVNode("p", { class: "mn-b-thin fw-medium" }, "Period", -1)),
+                createElementVNode("div", _hoisted_16, [
+                  createElementVNode("div", _hoisted_17, [
+                    _cache[13] || (_cache[13] = createElementVNode("p", { class: "mn-b-micro opacity-50 t-small" }, "From", -1)),
+                    createElementVNode("p", null, toDisplayString(formatDate(selectedRent.value.startDate)), 1)
+                  ]),
+                  createElementVNode("div", _hoisted_18, [
+                    _cache[14] || (_cache[14] = createElementVNode("p", { class: "mn-b-micro opacity-50 t-small" }, "To", -1)),
+                    createElementVNode("p", null, toDisplayString(formatDate(selectedRent.value.endDate)), 1)
+                  ])
+                ])
+              ]),
+              createElementVNode("div", _hoisted_19, [
+                _cache[18] || (_cache[18] = createElementVNode("p", { class: "mn-b-thin fw-medium" }, "Payment", -1)),
+                selectedRentOrder.value?.payment ? (openBlock(), createElementBlock("div", _hoisted_20, [
+                  createElementVNode("div", _hoisted_21, [
+                    _cache[16] || (_cache[16] = createElementVNode("p", { class: "mn-b-micro opacity-50 t-small" }, "Method", -1)),
+                    createElementVNode("p", null, toDisplayString(selectedRentOrder.value.payment.type || "—"), 1)
+                  ]),
+                  createElementVNode("div", _hoisted_22, [
+                    _cache[17] || (_cache[17] = createElementVNode("p", { class: "mn-b-micro opacity-50 t-small" }, "Status", -1)),
+                    createElementVNode("div", _hoisted_23, [
+                      createElementVNode("p", {
+                        class: normalizeClass(["fw-medium", selectedRentOrder.value.payment?.status === "paid" ? "t-green" : "t-red"])
+                      }, toDisplayString(selectedRentOrder.value.payment?.status || "unpaid"), 3),
+                      createElementVNode("div", {
+                        onClick: togglePaymentStatus,
+                        class: normalizeClass(["cursor-pointer radius-extra mn-l-auto", selectedRentOrder.value.payment?.status === "paid" ? "bg-green" : "bg-light"]),
+                        style: { "width": "36px", "height": "20px", "position": "relative", "transition": "background 0.2s", "flex-shrink": "0" }
+                      }, [
+                        createElementVNode("div", {
+                          class: "bg-white radius-extra",
+                          style: normalizeStyle([{ "width": "16px", "height": "16px", "position": "absolute", "top": "2px", "transition": "left 0.2s" }, { left: selectedRentOrder.value.payment?.status === "paid" ? "18px" : "2px" }])
+                        }, null, 4)
+                      ], 2)
+                    ])
+                  ])
+                ])) : (openBlock(), createElementBlock("div", _hoisted_24, " No order linked "))
+              ]),
+              selectedRent.value.order ? (openBlock(), createElementBlock("div", _hoisted_25, [
+                _cache[21] || (_cache[21] = createElementVNode("p", { class: "mn-b-thin fw-medium" }, "Order", -1)),
+                createVNode(_component_router_link, {
+                  to: orderLink.value,
+                  class: "flex-v-center flex gap-thin bg-light radius-small pd-small cursor-pointer hover:opacity-70"
+                }, {
+                  default: withCtx(() => [
+                    createElementVNode("div", _hoisted_26, [
+                      _cache[19] || (_cache[19] = createElementVNode("p", { class: "t-small opacity-50 mn-b-micro" }, "Order ID", -1)),
+                      createElementVNode("p", _hoisted_27, toDisplayString(selectedRent.value.order), 1)
+                    ]),
+                    _cache[20] || (_cache[20] = createElementVNode("span", { class: "t-small opacity-50" }, "→", -1))
+                  ]),
+                  _: 1
+                }, 8, ["to"])
+              ])) : createCommentVNode("", true),
+              createElementVNode("div", _hoisted_28, [
+                _cache[23] || (_cache[23] = createElementVNode("p", { class: "mn-b-thin fw-medium" }, "Customer", -1)),
+                selectedRentCustomer.value ? (openBlock(), createBlock(_component_router_link, {
+                  key: 0,
+                  to: customerLink.value,
+                  class: "bg-light radius-small pd-small cursor-pointer hover:opacity-70 flex-v-center flex"
+                }, {
+                  default: withCtx(() => [
+                    createElementVNode("div", _hoisted_29, [
+                      selectedRentCustomer.value.profile?.name ? (openBlock(), createElementBlock("p", _hoisted_30, toDisplayString(selectedRentCustomer.value.profile.name), 1)) : createCommentVNode("", true),
+                      selectedRentCustomer.value.phone ? (openBlock(), createElementBlock("p", _hoisted_31, toDisplayString(selectedRentCustomer.value.phone), 1)) : createCommentVNode("", true),
+                      selectedRentCustomer.value.email ? (openBlock(), createElementBlock("p", _hoisted_32, toDisplayString(selectedRentCustomer.value.email), 1)) : createCommentVNode("", true)
+                    ]),
+                    _cache[22] || (_cache[22] = createElementVNode("span", { class: "t-small opacity-50" }, "→", -1))
+                  ]),
+                  _: 1
+                }, 8, ["to"])) : (openBlock(), createElementBlock("div", _hoisted_33, " No customer linked "))
+              ]),
+              selectedRent.value.comment ? (openBlock(), createElementBlock("div", _hoisted_34, [
+                _cache[24] || (_cache[24] = createElementVNode("p", { class: "mn-b-thin fw-medium" }, "Comment", -1)),
+                createElementVNode("div", _hoisted_35, toDisplayString(selectedRent.value.comment), 1)
+              ])) : createCommentVNode("", true),
+              createElementVNode("div", _hoisted_36, [
+                createVNode(Button, {
+                  submit: () => closeRentPopup(),
+                  showLoader: false,
+                  showSucces: false,
+                  class: "pd-small radius-small flex-center flex w-100 cursor-pointer bg-main t-black"
+                }, {
+                  default: withCtx(() => _cache[25] || (_cache[25] = [
+                    createTextVNode(" Close ")
+                  ])),
+                  _: 1
+                }, 8, ["submit"])
+              ])
+            ])) : createCommentVNode("", true)
+          ]),
+          _: 1
+        }, 8, ["isPopupOpen", "align"]),
+        createVNode(_sfc_main$4, {
+          isPopupOpen: showCreatePopup.value,
+          onClosePopup: closeCreatePopup,
+          align: unref(isPhone)() ? "bottom center" : "center right",
+          title: "Create Rent",
+          class: "bg-white pd-small w-clamp-25r-25r-100 desktop:h-100 desktop:radius-zero mobile:radius-zero mobile:radius-tr-medium mobile:radius-tl-medium"
+        }, {
+          default: withCtx(() => [
+            createElementVNode("div", _hoisted_37, [
+              createVNode(_sfc_main$5, {
+                editable: true,
+                productId: createRentData.productId,
+                variantId: createRentData.variantId,
+                images: createRentData.productImages,
+                name: createRentData.productName,
+                price: createRentData.productPrice,
+                listing: "rent",
+                dates: createRentDates.value,
+                rentPeriod: createRentData.rentPeriod,
+                onUpdateRentDates: onRentDatesUpdate,
+                class: "pd-thin radius-small bg-white"
+              }, null, 8, ["productId", "variantId", "images", "name", "price", "dates", "rentPeriod"]),
+              createVNode(_sfc_main$6, {
+                customer: createRentData.customer,
+                "onUpdate:customer": _cache[4] || (_cache[4] = ($event) => createRentData.customer = $event),
+                orgId: getOwnerIdFromProduct(createRentData.productOwner)
+              }, null, 8, ["customer", "orgId"]),
+              createVNode(_sfc_main$7, {
+                title: "Comment",
+                class: ""
+              }, {
+                default: withCtx(() => [
+                  createVNode(Field, {
+                    modelValue: createRentData.comment,
+                    "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => createRentData.comment = $event),
+                    type: "textarea",
+                    class: "bg-white radius-small pd-small"
+                  }, null, 8, ["modelValue"])
+                ]),
+                _: 1
+              }),
+              createVNode(Button, {
+                submit: () => submitCreateRent(),
+                class: "bg-second t-white pd-small radius-small w-100 mn-t-thin"
+              }, {
+                default: withCtx(() => _cache[27] || (_cache[27] = [
+                  createTextVNode(" Create Rent ")
+                ])),
+                _: 1
+              }, 8, ["submit"])
+            ])
           ]),
           _: 1
-        }, 8, ["store", "options"])
+        }, 8, ["isPopupOpen", "align"])
       ]);
     };
   }