@ozdao/martyrs 0.2.489 → 0.2.492

package/dist/martyrs/src/modules/rents/views/components/pages/Gant/GanttToolbar.vue.cjs

@@ -0,0 +1,163 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue = require("vue");
+const dayjs_min = require("../../../../../../../../_virtual/dayjs.min.cjs");
+const Tab = require("../../../../../../components/Tab/Tab.vue2.cjs");
+const Button = require("../../../../../../components/Button/Button.vue.cjs");
+const Dropdown = require("../../../../../../components/Dropdown/Dropdown.vue.cjs");
+const Calendar = require("../../../../../../components/Calendar/Calendar.vue2.cjs");
+const DateLabel = require("./DateLabel.vue.cjs");
+const IconChevronRight = require("../../../../../icons/navigation/IconChevronRight.vue.cjs");
+const IconChevronLeft = require("../../../../../icons/navigation/IconChevronLeft.vue.cjs");
+const _hoisted_1 = { class: "flex-nowrap w-100 flex bg-light pd-small radius-medium mn-b-small" };
+const _hoisted_2 = { class: "flex w-100 gap-micro flex-v-center flex-nowrap" };
+const _hoisted_3 = { class: "flex h-100 flex-v-center" };
+const _sfc_main = {
+  __name: "GanttToolbar",
+  props: {
+    view: { type: String, required: true },
+    views: { type: Array, required: true },
+    date: { type: Date, required: true }
+  },
+  emits: ["update:view", "update:date", "today"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const tabs = vue.computed(
+      () => props.views.map((v) => ({
+        name: v.name,
+        label: v.name,
+        value: v.value
+      }))
+    );
+    const dateLabel = vue.computed(() => {
+      const d = dayjs_min.default(props.date);
+      let dateText;
+      switch (props.view) {
+        case "hours":
+          dateText = d.format("DD/MM/YYYY");
+          break;
+        case "days":
+          dateText = d.format("MMMM YYYY");
+          break;
+        case "weeks":
+          dateText = d.format("MMMM YYYY");
+          break;
+        default:
+          dateText = d.format("MMMM YYYY");
+      }
+      return {
+        component: DateLabel.default,
+        props: {
+          dateText
+        },
+        class: "cursor-pointer"
+      };
+    });
+    const selectedDate = vue.ref(props.date);
+    const navPrev = () => {
+      const d = dayjs_min.default(props.date);
+      let newDate;
+      switch (props.view) {
+        case "hours":
+          newDate = d.subtract(1, "day").toDate();
+          break;
+        case "days":
+          newDate = d.subtract(1, "month").toDate();
+          break;
+        case "weeks":
+          newDate = d.subtract(1, "month").toDate();
+          break;
+      }
+      emit("update:date", newDate);
+    };
+    const navNext = () => {
+      const d = dayjs_min.default(props.date);
+      let newDate;
+      switch (props.view) {
+        case "hours":
+          newDate = d.add(1, "day").toDate();
+          break;
+        case "days":
+          newDate = d.add(1, "month").toDate();
+          break;
+        case "weeks":
+          newDate = d.add(1, "month").toDate();
+          break;
+      }
+      emit("update:date", newDate);
+    };
+    const updateDate = (newSelectedDate) => {
+      if (newSelectedDate) {
+        const newDate = new Date(newSelectedDate);
+        emit("update:date", newDate);
+      }
+    };
+    vue.watch(() => props.date, (newDate) => {
+      selectedDate.value = newDate;
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+        vue.createElementVNode("div", _hoisted_2, [
+          vue.createVNode(Tab.default, {
+            selected: __props.view,
+            tabs: tabs.value,
+            onTabClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("update:view", $event.tab.value)),
+            class: "mn-r-auto h-100 flex-child-default o-hidden pd-nano radius-small bg-white",
+            classTab: "pd-thin radius-thin"
+          }, null, 8, ["selected", "tabs"]),
+          vue.createVNode(Button.default, {
+            onClick: navPrev,
+            class: "bg-white aspect-1x1 pd-small radius-small",
+            "aria-label": "Previous period"
+          }, {
+            default: vue.withCtx(() => [
+              vue.createVNode(IconChevronLeft.default, { class: "i-small" })
+            ]),
+            _: 1
+          }),
+          vue.createElementVNode("div", _hoisted_3, [
+            vue.createVNode(Dropdown.default, {
+              label: dateLabel.value,
+              align: "left",
+              class: "pos-relative h-100 bg-white radius-small pd-thin"
+            }, {
+              default: vue.withCtx(() => [
+                vue.createVNode(Calendar.default, {
+                  date: selectedDate.value,
+                  "onUpdate:date": [
+                    _cache[1] || (_cache[1] = ($event) => selectedDate.value = $event),
+                    updateDate
+                  ],
+                  class: "bg-white radius-small pd-small"
+                }, null, 8, ["date"])
+              ]),
+              _: 1
+            }, 8, ["label"])
+          ]),
+          vue.createVNode(Button.default, {
+            onClick: navNext,
+            class: "bg-white aspect-1x1 pd-small radius-small",
+            "aria-label": "Next period"
+          }, {
+            default: vue.withCtx(() => [
+              vue.createVNode(IconChevronRight.default, { class: "i-small" })
+            ]),
+            _: 1
+          }),
+          vue.createVNode(Button.default, {
+            onClick: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("today")),
+            class: "pd-r-small pd-l-small radius-small bg-second t-white mn-l-thin"
+          }, {
+            default: vue.withCtx(() => _cache[3] || (_cache[3] = [
+              vue.createTextVNode(" Today ")
+            ])),
+            _: 1
+          })
+        ])
+      ]);
+    };
+  }
+};
+exports.default = _sfc_main;
+//# sourceMappingURL=GanttToolbar.vue.cjs.map

package/dist/martyrs/src/modules/rents/views/components/pages/Gant/GanttToolbar.vue.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"GanttToolbar.vue.cjs","sources":["../../../../../../../../../src/modules/rents/views/components/pages/Gant/GanttToolbar.vue"],"sourcesContent":["<template>\n  <div class=\"flex-nowrap w-100 flex bg-light pd-small radius-medium mn-b-small\">\n    <div class=\"flex w-100 gap-micro flex-v-center flex-nowrap\">\n      <Tab\n        :selected=\"view\"\n        :tabs=\"tabs\"\n        @tab-click=\"$emit('update:view', $event.tab.value)\"\n        class=\"mn-r-auto h-100 flex-child-default o-hidden pd-nano radius-small bg-white\"\n        classTab=\"pd-thin radius-thin\"\n      />\n\n      <Button \n        @click=\"navPrev\" \n        class=\"bg-white aspect-1x1 pd-small radius-small\"\n        aria-label=\"Previous period\"\n      >\n        <IconChevronLeft class=\"i-small\"/>\n      </Button>\n      \n      <div class=\"flex h-100 flex-v-center\">\n        <Dropdown \n          :label=\"dateLabel\"\n          align=\"left\"\n          class=\"pos-relative h-100 bg-white radius-small pd-thin\"\n        >\n          <Calendar \n            v-model:date=\"selectedDate\"\n            @update:date=\"updateDate\"\n            class=\"bg-white radius-small pd-small\"\n          />\n        </Dropdown>\n      </div>\n      \n      <Button \n        @click=\"navNext\" \n        class=\"bg-white aspect-1x1 pd-small radius-small\"\n        aria-label=\"Next period\"\n      >\n        <IconChevronRight class=\"i-small\"/>\n      </Button>\n      \n      <Button \n        @click=\"$emit('today')\" \n        class=\"pd-r-small pd-l-small radius-small bg-second t-white mn-l-thin\"\n      >\n        Today\n      </Button>\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { computed, ref, watch } from 'vue'\nimport dayjs from 'dayjs'\n\nimport Tab from '@martyrs/src/components/Tab/Tab.vue'\nimport Button from '@martyrs/src/components/Button/Button.vue'\nimport Dropdown from '@martyrs/src/components/Dropdown/Dropdown.vue'\nimport Calendar from '@martyrs/src/components/Calendar/Calendar.vue'\nimport DateLabel from './DateLabel.vue'\n\nimport IconChevronRight from '@martyrs/src/modules/icons/navigation/IconChevronRight.vue'\nimport IconChevronLeft from '@martyrs/src/modules/icons/navigation/IconChevronLeft.vue'\n\nconst props = defineProps({\n  view: { type: String, required: true },\n  views: { type: Array, required: true },\n  date: { type: Date, required: true }\n})\n\nconst emit = defineEmits(['update:view', 'update:date', 'today'])\n\n// View tabs\nconst tabs = computed(() => \n  props.views.map(v => ({\n    name: v.name,\n    label: v.name,\n    value: v.value\n  }))\n)\n\n// Date label based on view\nconst dateLabel = computed(() => {\n  const d = dayjs(props.date)\n  \n  let dateText\n  switch (props.view) {\n    case 'hours':\n      dateText = d.format('DD/MM/YYYY')\n      break\n    case 'days':\n      dateText = d.format('MMMM YYYY')\n      break\n    case 'weeks':\n      dateText = d.format('MMMM YYYY')\n      break\n    default:\n      dateText = d.format('MMMM YYYY')\n  }\n  \n  return {\n    component: DateLabel,\n    props: {\n      dateText\n    },\n    class: 'cursor-pointer'\n  }\n})\n\n// Selected date for calendar\nconst selectedDate = ref(props.date)\n\n// Navigation\nconst navPrev = () => {\n  const d = dayjs(props.date)\n  let newDate\n  \n  switch (props.view) {\n    case 'hours':\n      newDate = d.subtract(1, 'day').toDate()\n      break\n    case 'days':\n      newDate = d.subtract(1, 'month').toDate()\n      break\n    case 'weeks':\n      newDate = d.subtract(1, 'month').toDate()\n      break\n  }\n  \n  emit('update:date', newDate)\n}\n\nconst navNext = () => {\n  const d = dayjs(props.date)\n  let newDate\n  \n  switch (props.view) {\n    case 'hours':\n      newDate = d.add(1, 'day').toDate()\n      break\n    case 'days':\n      newDate = d.add(1, 'month').toDate()\n      break\n    case 'weeks':\n      newDate = d.add(1, 'month').toDate()\n      break\n  }\n  \n  emit('update:date', newDate)\n}\n\nconst updateDate = (newSelectedDate) => {\n  if (newSelectedDate) {\n    const newDate = new Date(newSelectedDate)\n    emit('update:date', newDate)\n  }\n}\n\n// Watch for props.date changes to update selectedDate\nwatch(() => props.date, (newDate) => {\n  selectedDate.value = newDate\n})\n</script>"],"names":["computed","dayjs","DateLabel","ref","watch"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAgEA,UAAM,QAAQ;AAMd,UAAM,OAAO;AAGb,UAAM,OAAOA,IAAAA;AAAAA,MAAS,MACpB,MAAM,MAAM,IAAI,QAAM;AAAA,QACpB,MAAM,EAAE;AAAA,QACR,OAAO,EAAE;AAAA,QACT,OAAO,EAAE;AAAA,MACb,EAAI;AAAA,IACJ;AAGA,UAAM,YAAYA,IAAAA,SAAS,MAAM;AAC/B,YAAM,IAAIC,kBAAM,MAAM,IAAI;AAE1B,UAAI;AACJ,cAAQ,MAAM,MAAI;AAAA,QAChB,KAAK;AACH,qBAAW,EAAE,OAAO,YAAY;AAChC;AAAA,QACF,KAAK;AACH,qBAAW,EAAE,OAAO,WAAW;AAC/B;AAAA,QACF,KAAK;AACH,qBAAW,EAAE,OAAO,WAAW;AAC/B;AAAA,QACF;AACE,qBAAW,EAAE,OAAO,WAAW;AAAA,MACrC;AAEE,aAAO;AAAA,QACL,WAAWC,UAAAA;AAAAA,QACX,OAAO;AAAA,UACL;AAAA,QACN;AAAA,QACI,OAAO;AAAA,MACX;AAAA,IACA,CAAC;AAGD,UAAM,eAAeC,IAAAA,IAAI,MAAM,IAAI;AAGnC,UAAM,UAAU,MAAM;AACpB,YAAM,IAAIF,kBAAM,MAAM,IAAI;AAC1B,UAAI;AAEJ,cAAQ,MAAM,MAAI;AAAA,QAChB,KAAK;AACH,oBAAU,EAAE,SAAS,GAAG,KAAK,EAAE,OAAM;AACrC;AAAA,QACF,KAAK;AACH,oBAAU,EAAE,SAAS,GAAG,OAAO,EAAE,OAAM;AACvC;AAAA,QACF,KAAK;AACH,oBAAU,EAAE,SAAS,GAAG,OAAO,EAAE,OAAM;AACvC;AAAA,MACN;AAEE,WAAK,eAAe,OAAO;AAAA,IAC7B;AAEA,UAAM,UAAU,MAAM;AACpB,YAAM,IAAIA,kBAAM,MAAM,IAAI;AAC1B,UAAI;AAEJ,cAAQ,MAAM,MAAI;AAAA,QAChB,KAAK;AACH,oBAAU,EAAE,IAAI,GAAG,KAAK,EAAE,OAAM;AAChC;AAAA,QACF,KAAK;AACH,oBAAU,EAAE,IAAI,GAAG,OAAO,EAAE,OAAM;AAClC;AAAA,QACF,KAAK;AACH,oBAAU,EAAE,IAAI,GAAG,OAAO,EAAE,OAAM;AAClC;AAAA,MACN;AAEE,WAAK,eAAe,OAAO;AAAA,IAC7B;AAEA,UAAM,aAAa,CAAC,oBAAoB;AACtC,UAAI,iBAAiB;AACnB,cAAM,UAAU,IAAI,KAAK,eAAe;AACxC,aAAK,eAAe,OAAO;AAAA,MAC7B;AAAA,IACF;AAGAG,QAAAA,MAAM,MAAM,MAAM,MAAM,CAAC,YAAY;AACnC,mBAAa,QAAQ;AAAA,IACvB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -0,0 +1,163 @@
+import { computed, ref, watch, createElementBlock, openBlock, createElementVNode, createVNode, withCtx, createTextVNode } from "vue";
+import dayjs from "../../../../../../../../_virtual/dayjs.min.js";
+import _sfc_main$2 from "../../../../../../components/Tab/Tab.vue2.js";
+import _sfc_main$3 from "../../../../../../components/Button/Button.vue.js";
+import _sfc_main$4 from "../../../../../../components/Dropdown/Dropdown.vue.js";
+import Calendar from "../../../../../../components/Calendar/Calendar.vue2.js";
+import _sfc_main$1 from "./DateLabel.vue.js";
+import IconChevronRight from "../../../../../icons/navigation/IconChevronRight.vue.js";
+import IconChevronLeft from "../../../../../icons/navigation/IconChevronLeft.vue.js";
+const _hoisted_1 = { class: "flex-nowrap w-100 flex bg-light pd-small radius-medium mn-b-small" };
+const _hoisted_2 = { class: "flex w-100 gap-micro flex-v-center flex-nowrap" };
+const _hoisted_3 = { class: "flex h-100 flex-v-center" };
+const _sfc_main = {
+  __name: "GanttToolbar",
+  props: {
+    view: { type: String, required: true },
+    views: { type: Array, required: true },
+    date: { type: Date, required: true }
+  },
+  emits: ["update:view", "update:date", "today"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const tabs = computed(
+      () => props.views.map((v) => ({
+        name: v.name,
+        label: v.name,
+        value: v.value
+      }))
+    );
+    const dateLabel = computed(() => {
+      const d = dayjs(props.date);
+      let dateText;
+      switch (props.view) {
+        case "hours":
+          dateText = d.format("DD/MM/YYYY");
+          break;
+        case "days":
+          dateText = d.format("MMMM YYYY");
+          break;
+        case "weeks":
+          dateText = d.format("MMMM YYYY");
+          break;
+        default:
+          dateText = d.format("MMMM YYYY");
+      }
+      return {
+        component: _sfc_main$1,
+        props: {
+          dateText
+        },
+        class: "cursor-pointer"
+      };
+    });
+    const selectedDate = ref(props.date);
+    const navPrev = () => {
+      const d = dayjs(props.date);
+      let newDate;
+      switch (props.view) {
+        case "hours":
+          newDate = d.subtract(1, "day").toDate();
+          break;
+        case "days":
+          newDate = d.subtract(1, "month").toDate();
+          break;
+        case "weeks":
+          newDate = d.subtract(1, "month").toDate();
+          break;
+      }
+      emit("update:date", newDate);
+    };
+    const navNext = () => {
+      const d = dayjs(props.date);
+      let newDate;
+      switch (props.view) {
+        case "hours":
+          newDate = d.add(1, "day").toDate();
+          break;
+        case "days":
+          newDate = d.add(1, "month").toDate();
+          break;
+        case "weeks":
+          newDate = d.add(1, "month").toDate();
+          break;
+      }
+      emit("update:date", newDate);
+    };
+    const updateDate = (newSelectedDate) => {
+      if (newSelectedDate) {
+        const newDate = new Date(newSelectedDate);
+        emit("update:date", newDate);
+      }
+    };
+    watch(() => props.date, (newDate) => {
+      selectedDate.value = newDate;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", _hoisted_2, [
+          createVNode(_sfc_main$2, {
+            selected: __props.view,
+            tabs: tabs.value,
+            onTabClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("update:view", $event.tab.value)),
+            class: "mn-r-auto h-100 flex-child-default o-hidden pd-nano radius-small bg-white",
+            classTab: "pd-thin radius-thin"
+          }, null, 8, ["selected", "tabs"]),
+          createVNode(_sfc_main$3, {
+            onClick: navPrev,
+            class: "bg-white aspect-1x1 pd-small radius-small",
+            "aria-label": "Previous period"
+          }, {
+            default: withCtx(() => [
+              createVNode(IconChevronLeft, { class: "i-small" })
+            ]),
+            _: 1
+          }),
+          createElementVNode("div", _hoisted_3, [
+            createVNode(_sfc_main$4, {
+              label: dateLabel.value,
+              align: "left",
+              class: "pos-relative h-100 bg-white radius-small pd-thin"
+            }, {
+              default: withCtx(() => [
+                createVNode(Calendar, {
+                  date: selectedDate.value,
+                  "onUpdate:date": [
+                    _cache[1] || (_cache[1] = ($event) => selectedDate.value = $event),
+                    updateDate
+                  ],
+                  class: "bg-white radius-small pd-small"
+                }, null, 8, ["date"])
+              ]),
+              _: 1
+            }, 8, ["label"])
+          ]),
+          createVNode(_sfc_main$3, {
+            onClick: navNext,
+            class: "bg-white aspect-1x1 pd-small radius-small",
+            "aria-label": "Next period"
+          }, {
+            default: withCtx(() => [
+              createVNode(IconChevronRight, { class: "i-small" })
+            ]),
+            _: 1
+          }),
+          createVNode(_sfc_main$3, {
+            onClick: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("today")),
+            class: "pd-r-small pd-l-small radius-small bg-second t-white mn-l-thin"
+          }, {
+            default: withCtx(() => _cache[3] || (_cache[3] = [
+              createTextVNode(" Today ")
+            ])),
+            _: 1
+          })
+        ])
+      ]);
+    };
+  }
+};
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=GanttToolbar.vue.js.map

package/dist/martyrs/src/modules/rents/views/components/pages/Gant/GanttToolbar.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GanttToolbar.vue.js","sources":["../../../../../../../../../src/modules/rents/views/components/pages/Gant/GanttToolbar.vue"],"sourcesContent":["<template>\n  <div class=\"flex-nowrap w-100 flex bg-light pd-small radius-medium mn-b-small\">\n    <div class=\"flex w-100 gap-micro flex-v-center flex-nowrap\">\n      <Tab\n        :selected=\"view\"\n        :tabs=\"tabs\"\n        @tab-click=\"$emit('update:view', $event.tab.value)\"\n        class=\"mn-r-auto h-100 flex-child-default o-hidden pd-nano radius-small bg-white\"\n        classTab=\"pd-thin radius-thin\"\n      />\n\n      <Button \n        @click=\"navPrev\" \n        class=\"bg-white aspect-1x1 pd-small radius-small\"\n        aria-label=\"Previous period\"\n      >\n        <IconChevronLeft class=\"i-small\"/>\n      </Button>\n      \n      <div class=\"flex h-100 flex-v-center\">\n        <Dropdown \n          :label=\"dateLabel\"\n          align=\"left\"\n          class=\"pos-relative h-100 bg-white radius-small pd-thin\"\n        >\n          <Calendar \n            v-model:date=\"selectedDate\"\n            @update:date=\"updateDate\"\n            class=\"bg-white radius-small pd-small\"\n          />\n        </Dropdown>\n      </div>\n      \n      <Button \n        @click=\"navNext\" \n        class=\"bg-white aspect-1x1 pd-small radius-small\"\n        aria-label=\"Next period\"\n      >\n        <IconChevronRight class=\"i-small\"/>\n      </Button>\n      \n      <Button \n        @click=\"$emit('today')\" \n        class=\"pd-r-small pd-l-small radius-small bg-second t-white mn-l-thin\"\n      >\n        Today\n      </Button>\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { computed, ref, watch } from 'vue'\nimport dayjs from 'dayjs'\n\nimport Tab from '@martyrs/src/components/Tab/Tab.vue'\nimport Button from '@martyrs/src/components/Button/Button.vue'\nimport Dropdown from '@martyrs/src/components/Dropdown/Dropdown.vue'\nimport Calendar from '@martyrs/src/components/Calendar/Calendar.vue'\nimport DateLabel from './DateLabel.vue'\n\nimport IconChevronRight from '@martyrs/src/modules/icons/navigation/IconChevronRight.vue'\nimport IconChevronLeft from '@martyrs/src/modules/icons/navigation/IconChevronLeft.vue'\n\nconst props = defineProps({\n  view: { type: String, required: true },\n  views: { type: Array, required: true },\n  date: { type: Date, required: true }\n})\n\nconst emit = defineEmits(['update:view', 'update:date', 'today'])\n\n// View tabs\nconst tabs = computed(() => \n  props.views.map(v => ({\n    name: v.name,\n    label: v.name,\n    value: v.value\n  }))\n)\n\n// Date label based on view\nconst dateLabel = computed(() => {\n  const d = dayjs(props.date)\n  \n  let dateText\n  switch (props.view) {\n    case 'hours':\n      dateText = d.format('DD/MM/YYYY')\n      break\n    case 'days':\n      dateText = d.format('MMMM YYYY')\n      break\n    case 'weeks':\n      dateText = d.format('MMMM YYYY')\n      break\n    default:\n      dateText = d.format('MMMM YYYY')\n  }\n  \n  return {\n    component: DateLabel,\n    props: {\n      dateText\n    },\n    class: 'cursor-pointer'\n  }\n})\n\n// Selected date for calendar\nconst selectedDate = ref(props.date)\n\n// Navigation\nconst navPrev = () => {\n  const d = dayjs(props.date)\n  let newDate\n  \n  switch (props.view) {\n    case 'hours':\n      newDate = d.subtract(1, 'day').toDate()\n      break\n    case 'days':\n      newDate = d.subtract(1, 'month').toDate()\n      break\n    case 'weeks':\n      newDate = d.subtract(1, 'month').toDate()\n      break\n  }\n  \n  emit('update:date', newDate)\n}\n\nconst navNext = () => {\n  const d = dayjs(props.date)\n  let newDate\n  \n  switch (props.view) {\n    case 'hours':\n      newDate = d.add(1, 'day').toDate()\n      break\n    case 'days':\n      newDate = d.add(1, 'month').toDate()\n      break\n    case 'weeks':\n      newDate = d.add(1, 'month').toDate()\n      break\n  }\n  \n  emit('update:date', newDate)\n}\n\nconst updateDate = (newSelectedDate) => {\n  if (newSelectedDate) {\n    const newDate = new Date(newSelectedDate)\n    emit('update:date', newDate)\n  }\n}\n\n// Watch for props.date changes to update selectedDate\nwatch(() => props.date, (newDate) => {\n  selectedDate.value = newDate\n})\n</script>"],"names":["DateLabel"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAgEA,UAAM,QAAQ;AAMd,UAAM,OAAO;AAGb,UAAM,OAAO;AAAA,MAAS,MACpB,MAAM,MAAM,IAAI,QAAM;AAAA,QACpB,MAAM,EAAE;AAAA,QACR,OAAO,EAAE;AAAA,QACT,OAAO,EAAE;AAAA,MACb,EAAI;AAAA,IACJ;AAGA,UAAM,YAAY,SAAS,MAAM;AAC/B,YAAM,IAAI,MAAM,MAAM,IAAI;AAE1B,UAAI;AACJ,cAAQ,MAAM,MAAI;AAAA,QAChB,KAAK;AACH,qBAAW,EAAE,OAAO,YAAY;AAChC;AAAA,QACF,KAAK;AACH,qBAAW,EAAE,OAAO,WAAW;AAC/B;AAAA,QACF,KAAK;AACH,qBAAW,EAAE,OAAO,WAAW;AAC/B;AAAA,QACF;AACE,qBAAW,EAAE,OAAO,WAAW;AAAA,MACrC;AAEE,aAAO;AAAA,QACL,WAAWA;AAAAA,QACX,OAAO;AAAA,UACL;AAAA,QACN;AAAA,QACI,OAAO;AAAA,MACX;AAAA,IACA,CAAC;AAGD,UAAM,eAAe,IAAI,MAAM,IAAI;AAGnC,UAAM,UAAU,MAAM;AACpB,YAAM,IAAI,MAAM,MAAM,IAAI;AAC1B,UAAI;AAEJ,cAAQ,MAAM,MAAI;AAAA,QAChB,KAAK;AACH,oBAAU,EAAE,SAAS,GAAG,KAAK,EAAE,OAAM;AACrC;AAAA,QACF,KAAK;AACH,oBAAU,EAAE,SAAS,GAAG,OAAO,EAAE,OAAM;AACvC;AAAA,QACF,KAAK;AACH,oBAAU,EAAE,SAAS,GAAG,OAAO,EAAE,OAAM;AACvC;AAAA,MACN;AAEE,WAAK,eAAe,OAAO;AAAA,IAC7B;AAEA,UAAM,UAAU,MAAM;AACpB,YAAM,IAAI,MAAM,MAAM,IAAI;AAC1B,UAAI;AAEJ,cAAQ,MAAM,MAAI;AAAA,QAChB,KAAK;AACH,oBAAU,EAAE,IAAI,GAAG,KAAK,EAAE,OAAM;AAChC;AAAA,QACF,KAAK;AACH,oBAAU,EAAE,IAAI,GAAG,OAAO,EAAE,OAAM;AAClC;AAAA,QACF,KAAK;AACH,oBAAU,EAAE,IAAI,GAAG,OAAO,EAAE,OAAM;AAClC;AAAA,MACN;AAEE,WAAK,eAAe,OAAO;AAAA,IAC7B;AAEA,UAAM,aAAa,CAAC,oBAAoB;AACtC,UAAI,iBAAiB;AACnB,cAAM,UAAU,IAAI,KAAK,eAAe;AACxC,aAAK,eAAe,OAAO;AAAA,MAC7B;AAAA,IACF;AAGA,UAAM,MAAM,MAAM,MAAM,CAAC,YAAY;AACnC,mBAAa,QAAQ;AAAA,IACvB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -1,10 +1,11 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const vue = require("vue");
-const Tab = require("../../../../../components/Tab/Tab.vue2.cjs");
+const dayjs_min = require("../../../../../../../_virtual/dayjs.min.cjs");
+;/* empty css                                      */
 const Feed = require("../../../../../components/Feed/Feed.vue.cjs");
 ;/* empty css                        */
-const GanttChart = require("./GanttChart.vue.cjs");
+const GanttChart = require("./Gant/GanttChart.vue.cjs");
 const vueRouter = require("vue-router");
 const rents_store = require("../../store/rents.store.cjs");
 const _hoisted_1 = { class: "pd-medium mobile:pd-thin bg-white" };
@@ -14,9 +15,90 @@ const _sfc_main = {
   __name: "Rents",
   setup(__props) {
     const route = vueRouter.useRoute();
-    const router = vueRouter.useRouter();
-    const tab = vue.ref((route == null ? void 0 : route.query) ? route.query.tab : "all");
+    vueRouter.useRouter();
     const isCalendarView = vue.ref(true);
+    const sampleData = vue.ref([
+      {
+        id: 2,
+        title: "Product A",
+        startDate: dayjs_min.default().add(1, "days").toDate(),
+        endDate: dayjs_min.default().add(5, "days").toDate(),
+        status: "active"
+      },
+      {
+        id: 3,
+        title: "Product B",
+        startDate: dayjs_min.default().subtract(1, "days").toDate(),
+        endDate: dayjs_min.default().add(2, "days").toDate(),
+        status: "completed"
+      },
+      {
+        id: 4,
+        title: "Product C",
+        startDate: dayjs_min.default().toDate(),
+        endDate: dayjs_min.default().add(4, "days").toDate(),
+        status: "canceled"
+      },
+      // Additional test data for hour view
+      {
+        id: 5,
+        title: "Product D",
+        startDate: dayjs_min.default().add(2, "days").add(8, "hours").toDate(),
+        endDate: dayjs_min.default().add(2, "days").add(16, "hours").toDate(),
+        status: "active"
+      },
+      {
+        id: 6,
+        title: "Product E",
+        startDate: dayjs_min.default().add(1, "days").add(14, "hours").toDate(),
+        endDate: dayjs_min.default().add(2, "days").add(10, "hours").toDate(),
+        status: "completed"
+      }
+    ]);
+    const view = vue.ref("days");
+    const date = vue.ref(/* @__PURE__ */ new Date());
+    const loading = vue.ref(false);
+    const dateRange = vue.computed(() => {
+      const d = dayjs_min.default(date.value);
+      switch (view.value) {
+        case "hours":
+          return {
+            start: d.subtract(1, "days").startOf("day").toDate(),
+            end: d.add(6, "days").endOf("day").toDate()
+          };
+        case "days":
+          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()
+          };
+        default:
+          return {
+            start: d.startOf("month").toDate(),
+            end: d.endOf("month").toDate()
+          };
+      }
+    });
+    const handleLoadMore = async (direction) => {
+      console.log("Loading more:", direction);
+      loading.value = true;
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          loading.value = false;
+          resolve();
+        }, 1e3);
+      });
+    };
+    const handleItemClick = (item) => {
+      console.log("Item clicked:", item);
+    };
+    const handleToday = () => {
+      date.value = /* @__PURE__ */ new Date();
+    };
     const today = /* @__PURE__ */ new Date();
     const calendarStartDate = vue.ref(new Date(today));
     calendarStartDate.value.setDate(today.getDate() - 30);
@@ -25,36 +107,10 @@ const _sfc_main = {
     const toggleView = () => {
       isCalendarView.value = !isCalendarView.value;
     };
-    const viewRentDetails = (rent) => {
-      router.push({ name: "Rent Details", params: { _id: rent._id } });
-    };
-    const loadMoreData = async ({ direction, date }) => {
-      console.log("scroll direction is", direction);
-      console.log("current date is", date);
-      if (direction === "forward") {
-        calendarEndDate.value = date;
-      } else {
-        calendarStartDate.value = date;
-      }
-      try {
-        const startDateParam = new Date(calendarStartDate.value);
-        startDateParam.setDate(startDateParam.getDate() - 30);
-        const endDateParam = new Date(calendarEndDate.value);
-        endDateParam.setDate(endDateParam.getDate() + 30);
-        await rents_store.actions.read({
-          owner: route.params._id,
-          startDate: startDateParam.toISOString(),
-          endDate: endDateParam.toISOString(),
-          ...tab.value !== "all" && { status: tab.value }
-        });
-      } catch (error) {
-        console.error("Error loading additional rent data:", error);
-      }
-    };
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
         vue.createElementVNode("header", _hoisted_2, [
-          _cache[2] || (_cache[2] = vue.createElementVNode("h2", { class: "mn-r-medium" }, "Rents", -1)),
+          _cache[4] || (_cache[4] = vue.createElementVNode("h2", { class: "mn-r-medium" }, "Rents", -1)),
           vue.createElementVNode("button", {
             onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$router.push({ name: "Organization_Create Rent", params: { _id: vue.unref(route).params._id } })),
             class: "radius-100 i-big hover-scale-1 cursor-pointer t-white bg-second"
@@ -66,17 +122,6 @@ const _sfc_main = {
             }, vue.toDisplayString(isCalendarView.value ? "List View" : "Calendar View"), 1)
           ])
         ]),
-        vue.createVNode(Tab.default, {
-          selected: tab.value,
-          "onUpdate:selected": _cache[1] || (_cache[1] = ($event) => tab.value = $event),
-          tabs: [
-            { name: "All", value: "all" },
-            { name: "Active", value: "active" },
-            { name: "Completed", value: "completed" },
-            { name: "Canceled", value: "canceled" }
-          ],
-          class: "mn-b-small o-hidden h5 radius-big bg-light"
-        }, null, 8, ["selected"]),
         vue.createVNode(Feed.default, {
           search: true,
           states: {
@@ -89,23 +134,24 @@ const _sfc_main = {
           options: {
             limit: 15,
             owner: vue.unref(route).params._id,
-            ...tab.value !== "all" && { status: tab.value }
+            ..._ctx.tab !== "all" && { status: _ctx.tab }
           }
         }, {
           default: vue.withCtx(({ items }) => [
             vue.createVNode(GanttChart.default, {
-              items,
-              startDate: calendarStartDate.value,
-              endDate: calendarEndDate.value,
-              startDateKey: "startDate",
-              endDateKey: "endDate",
-              titleKey: "title",
-              statusKey: "status",
-              idKey: "_id",
-              class: "mn-b-small",
-              onItemClick: viewRentDetails,
-              onLoadMore: loadMoreData
-            }, null, 8, ["items", "startDate", "endDate"])
+              view: view.value,
+              "onUpdate:view": _cache[1] || (_cache[1] = ($event) => view.value = $event),
+              date: date.value,
+              "onUpdate:date": _cache[2] || (_cache[2] = ($event) => date.value = $event),
+              dateRange: dateRange.value,
+              "onUpdate:dateRange": _cache[3] || (_cache[3] = ($event) => dateRange.value = $event),
+              items: sampleData.value,
+              loading: loading.value,
+              onLoadMore: handleLoadMore,
+              onItemClick: handleItemClick,
+              onToday: handleToday
+            }, null, 8, ["view", "date", "dateRange", "items", "loading"]),
+            vue.createTextVNode(" " + vue.toDisplayString(items), 1)
           ]),
           _: 1
         }, 8, ["store", "options"])

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

@@ -1 +1 @@
-{"version":3,"file":"Rents.vue.cjs","sources":["../../../../../../../../src/modules/rents/views/components/pages/Rents.vue"],"sourcesContent":["<template>\n  <div class=\"pd-medium mobile:pd-thin bg-white\">\n    <header class=\"mn-b-medium flex-v-center flex-nowrap flex\">\n      <h2 class=\"mn-r-medium\">Rents</h2>\n      <button \n        @click=\"$router.push({ name: 'Organization_Create Rent', params: {_id: route.params._id}})\" \n        class=\"radius-100 i-big hover-scale-1 cursor-pointer t-white bg-second\"\n      >\n        +\n      </button>\n      <div class=\"mn-l-auto flex-v-center\">\n        <button \n          @click=\"toggleView\" \n          class=\"pd-small radius-small bg-light mn-r-small\"\n        >\n          {{ isCalendarView ? 'List View' : 'Calendar View' }}\n        </button>\n      </div>\n    </header>\n\n    <Tab\n      v-model:selected=\"tab\"\n      :tabs=\"[\n        { name: 'All', value: 'all' },\n        { name: 'Active', value: 'active' },\n        { name: 'Completed', value: 'completed' },\n        { name: 'Canceled', value: 'canceled' }\n      ]\"\n      class=\"mn-b-small o-hidden h5 radius-big bg-light\"\n    />\n\n    <Feed\n      :search=\"true\"\n      :states=\"{\n        empty: {\n          title: 'No Rents Found',\n          description: 'Currently, there are no rents available.'\n        }\n      }\"\n      :store=\"{ read: (options) => rents.actions.read(options) }\"\n      :options=\"{\n        limit: 15,\n        owner: route.params._id,\n        ...(tab !== 'all' && { status: tab })\n      }\"\n      v-slot=\"{ items }\"\n    >\n      <GanttChart\n        :items=\"items\"\n        :startDate=\"calendarStartDate\"\n        :endDate=\"calendarEndDate\"\n        startDateKey=\"startDate\"\n        endDateKey=\"endDate\"\n        titleKey=\"title\"\n        statusKey=\"status\"\n        idKey=\"_id\"\n        class=\"mn-b-small\"\n        @item-click=\"viewRentDetails\"\n        @load-more=\"loadMoreData\"\n      >\n      </GanttChart>\n\n     <!--  <CardRent\n        v-else\n        v-for=\"rent in items\"\n        :key=\"rent._id\"\n        :rent=\"rent\"\n        class=\"bg-light pd-small mn-b-thin radius-small\"\n      /> -->\n    </Feed>\n  </div>\n</template>\n\n<script setup>\nimport Tab from '@martyrs/src/components/Tab/Tab.vue';\nimport Feed from '@martyrs/src/components/Feed/Feed.vue';\n\nimport CardRent from '@martyrs/src/modules/rents/views/components/blocks/CardRent.vue';\nimport GanttChart from '@martyrs/src/modules/rents/views/components/pages/GanttChart.vue';\n\nimport { computed, onMounted, ref, watch } from 'vue';\nimport { useRoute, useRouter } from 'vue-router';\n\nimport * as rents from '@martyrs/src/modules/rents/views/store/rents.store';\n\nconst route = useRoute();\nconst router = useRouter();\n\nconst tab = ref(route?.query ? route.query.tab : 'all');\nconst isCalendarView = ref(true);\n\n// Set initial date range - current month plus 15 days before and 45 days after\nconst today = new Date();\nconst calendarStartDate = ref(new Date(today));\ncalendarStartDate.value.setDate(today.getDate() - 30);\n\nconst calendarEndDate = ref(new Date(today));\ncalendarEndDate.value.setDate(today.getDate() + 30);\n\n// Toggle between calendar and list view\nconst toggleView = () => {\n  isCalendarView.value = !isCalendarView.value;\n};\n\n// Navigate to rent details page\nconst viewRentDetails = (rent) => {\n  router.push({ name: 'Rent Details', params: { _id: rent._id } });\n};\n\n// Load more data when scrolling the Gantt chart\nconst loadMoreData = async ({ direction, date }) => {\n  // alert(direction)\n  console.log('scroll direction is', direction)\n  console.log('current date is', date)\n  // Update the visible range\n  if (direction === 'forward') {\n    calendarEndDate.value = date;\n  } else {\n    calendarStartDate.value = date;\n  }\n  // Here you can add logic to fetch more rents if they fall within the new date range\n  try {\n    // You might need to adjust this depending on your API and data structure\n    const startDateParam = new Date(calendarStartDate.value);\n    startDateParam.setDate(startDateParam.getDate() - 30); // Fetch a bit more to cover edge cases\n    \n    const endDateParam = new Date(calendarEndDate.value);\n    endDateParam.setDate(endDateParam.getDate() + 30);\n    \n    await rents.actions.read({\n      owner: route.params._id,\n      startDate: startDateParam.toISOString(),\n      endDate: endDateParam.toISOString(),\n      ...(tab.value !== 'all' && { status: tab.value })\n    });\n  } catch (error) {\n    console.error('Error loading additional rent data:', error);\n  }\n};\n</script>\n\n<style lang=\"scss\">\n</style>"],"names":["useRoute","useRouter","ref","rents.actions"],"mappings":";;;;;;;;;;;;;;;AAqFA,UAAM,QAAQA,UAAAA,SAAU;AACxB,UAAM,SAASC,UAAAA,UAAW;AAE1B,UAAM,MAAMC,IAAG,KAAC,+BAAO,SAAQ,MAAM,MAAM,MAAM,KAAK;AACtD,UAAM,iBAAiBA,IAAG,IAAC,IAAI;AAG/B,UAAM,QAAQ,oBAAI,KAAM;AACxB,UAAM,oBAAoBA,IAAG,IAAC,IAAI,KAAK,KAAK,CAAC;AAC7C,sBAAkB,MAAM,QAAQ,MAAM,QAAO,IAAK,EAAE;AAEpD,UAAM,kBAAkBA,IAAG,IAAC,IAAI,KAAK,KAAK,CAAC;AAC3C,oBAAgB,MAAM,QAAQ,MAAM,QAAO,IAAK,EAAE;AAGlD,UAAM,aAAa,MAAM;AACvB,qBAAe,QAAQ,CAAC,eAAe;AAAA,IACzC;AAGA,UAAM,kBAAkB,CAAC,SAAS;AAChC,aAAO,KAAK,EAAE,MAAM,gBAAgB,QAAQ,EAAE,KAAK,KAAK,IAAG,GAAI;AAAA,IACjE;AAGA,UAAM,eAAe,OAAO,EAAE,WAAW,WAAW;AAElD,cAAQ,IAAI,uBAAuB,SAAS;AAC5C,cAAQ,IAAI,mBAAmB,IAAI;AAEnC,UAAI,cAAc,WAAW;AAC3B,wBAAgB,QAAQ;AAAA,MAC5B,OAAS;AACL,0BAAkB,QAAQ;AAAA,MAC9B;AAEE,UAAI;AAEF,cAAM,iBAAiB,IAAI,KAAK,kBAAkB,KAAK;AACvD,uBAAe,QAAQ,eAAe,QAAS,IAAG,EAAE;AAEpD,cAAM,eAAe,IAAI,KAAK,gBAAgB,KAAK;AACnD,qBAAa,QAAQ,aAAa,QAAO,IAAK,EAAE;AAEhD,cAAMC,YAAAA,QAAc,KAAK;AAAA,UACvB,OAAO,MAAM,OAAO;AAAA,UACpB,WAAW,eAAe,YAAa;AAAA,UACvC,SAAS,aAAa,YAAa;AAAA,UACnC,GAAI,IAAI,UAAU,SAAS,EAAE,QAAQ,IAAI,MAAO;AAAA,QACtD,CAAK;AAAA,MACF,SAAQ,OAAO;AACd,gBAAQ,MAAM,uCAAuC,KAAK;AAAA,MAC9D;AAAA,IACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Rents.vue.cjs","sources":["../../../../../../../../src/modules/rents/views/components/pages/Rents.vue"],"sourcesContent":["<template>\n  <div class=\"pd-medium mobile:pd-thin bg-white\">\n    <header class=\"mn-b-medium flex-v-center flex-nowrap flex\">\n      <h2 class=\"mn-r-medium\">Rents</h2>\n      <button \n        @click=\"$router.push({ name: 'Organization_Create Rent', params: {_id: route.params._id}})\" \n        class=\"radius-100 i-big hover-scale-1 cursor-pointer t-white bg-second\"\n      >\n        +\n      </button>\n      <div class=\"mn-l-auto flex-v-center\">\n        <button \n          @click=\"toggleView\" \n          class=\"pd-small radius-small bg-light mn-r-small\"\n        >\n          {{ isCalendarView ? 'List View' : 'Calendar View' }}\n        </button>\n      </div>\n    </header>\n\n    <Feed\n      :search=\"true\"\n      :states=\"{\n        empty: {\n          title: 'No Rents Found',\n          description: 'Currently, there are no rents available.'\n        }\n      }\"\n      :store=\"{ read: (options) => rents.actions.read(options) }\"\n      :options=\"{\n        limit: 15,\n        owner: route.params._id,\n        ...(tab !== 'all' && { status: tab })\n      }\"\n      v-slot=\"{ items }\"\n    > \n      <GanttChart\n        v-model:view=\"view\"\n        v-model:date=\"date\"\n        v-model:dateRange=\"dateRange\"\n        :items=\"sampleData\"\n        :loading=\"loading\"\n        @load-more=\"handleLoadMore\"\n        @item-click=\"handleItemClick\"\n        @today=\"handleToday\"\n      />\n      {{items}}\n\n     <!--  <CardRent\n        v-else\n        v-for=\"rent in items\"\n        :key=\"rent._id\"\n        :rent=\"rent\"\n        class=\"bg-light pd-small mn-b-thin radius-small\"\n      /> -->\n    </Feed>\n  </div>\n</template>\n\n<script setup>\nimport dayjs from 'dayjs'\n\nimport Tab from '@martyrs/src/components/Tab/Tab.vue';\nimport Feed from '@martyrs/src/components/Feed/Feed.vue';\n\nimport CardRent from '@martyrs/src/modules/rents/views/components/blocks/CardRent.vue';\n\nimport GanttChart from '@martyrs/src/modules/rents/views/components/pages/Gant/GanttChart.vue';\n\nimport { computed, onMounted, ref, watch } from 'vue';\nimport { useRoute, useRouter } from 'vue-router';\n\nimport * as rents from '@martyrs/src/modules/rents/views/store/rents.store';\n\nconst route = useRoute();\nconst router = useRouter();\n\nconst isCalendarView = ref(true);\n\n// Sample data\nconst sampleData = ref([\n  {\n    id: 2,\n    title: 'Product A',\n    startDate: dayjs().add(1, 'days').toDate(),\n    endDate: dayjs().add(5, 'days').toDate(),\n    status: 'active'\n  },\n  {\n    id: 3,\n    title: 'Product B',\n    startDate: dayjs().subtract(1, 'days').toDate(),\n    endDate: dayjs().add(2, 'days').toDate(),\n    status: 'completed'\n  },\n  {\n    id: 4,\n    title: 'Product C',\n    startDate: dayjs().toDate(),\n    endDate: dayjs().add(4, 'days').toDate(),\n    status: 'canceled'\n  },\n  // Additional test data for hour view\n  {\n    id: 5,\n    title: 'Product D',\n    startDate: dayjs().add(2, 'days').add(8, 'hours').toDate(),\n    endDate: dayjs().add(2, 'days').add(16, 'hours').toDate(),\n    status: 'active'\n  },\n  {\n    id: 6,\n    title: 'Product E',\n    startDate: dayjs().add(1, 'days').add(14, 'hours').toDate(),\n    endDate: dayjs().add(2, 'days').add(10, 'hours').toDate(),\n    status: 'completed'\n  }\n])\n\n// Set initial date range - current month plus 15 days before and 45 days after\nconst view = ref('days')\nconst date = ref(new Date())\nconst loading = ref(false)\n\nconst dateRange = computed(() => {\n  const d = dayjs(date.value)\n  \n  switch (view.value) {\n    case 'hours':\n      return {\n        start: d.subtract(1, 'days').startOf('day').toDate(),\n        end: d.add(6, 'days').endOf('day').toDate()\n      }\n      \n    case 'days':\n      return {\n        start: d.startOf('month').toDate(),\n        end: d.endOf('month').toDate()\n      }\n      \n    case 'weeks':\n      return {\n        start: d.subtract(1, 'month').startOf('week').toDate(),\n        end: d.add(2, 'months').endOf('week').toDate()\n      }\n      \n    default:\n      return {\n        start: d.startOf('month').toDate(),\n        end: d.endOf('month').toDate()\n      }\n  }\n})\n\n// Handle load more\nconst handleLoadMore = async (direction) => {\n  console.log('Loading more:', direction)\n  \n  loading.value = true\n  \n  // Simulate API call\n  return new Promise((resolve) => {\n    setTimeout(() => {\n      // Add more items if needed\n      loading.value = false\n      resolve()\n    }, 1000)\n  })\n}\n\n// Handle item click\nconst handleItemClick = (item) => {\n  console.log('Item clicked:', item)\n}\n\n// Handle today\nconst handleToday = () => {\n  date.value = new Date()\n}\n\nconst today = new Date();\nconst calendarStartDate = ref(new Date(today));\ncalendarStartDate.value.setDate(today.getDate() - 30);\n\nconst calendarEndDate = ref(new Date(today));\ncalendarEndDate.value.setDate(today.getDate() + 30);\n\n// Toggle between calendar and list view\nconst toggleView = () => {\n  isCalendarView.value = !isCalendarView.value;\n};\n\n// Navigate to rent details page\nconst viewRentDetails = (rent) => {\n  router.push({ name: 'Rent Details', params: { _id: rent._id } });\n};\n\n// Load more data when scrolling the Gantt chart\nconst loadMoreData = async ({ direction, date }) => {\n  // alert(direction)\n  console.log('scroll direction is', direction)\n  console.log('current date is', date)\n  // Update the visible range\n  if (direction === 'forward') {\n    calendarEndDate.value = date;\n  } else {\n    calendarStartDate.value = date;\n  }\n  // Here you can add logic to fetch more rents if they fall within the new date range\n  try {\n    // You might need to adjust this depending on your API and data structure\n    const startDateParam = new Date(calendarStartDate.value);\n    startDateParam.setDate(startDateParam.getDate() - 30); // Fetch a bit more to cover edge cases\n    \n    const endDateParam = new Date(calendarEndDate.value);\n    endDateParam.setDate(endDateParam.getDate() + 30);\n    \n    await rents.actions.read({\n      owner: route.params._id,\n      startDate: startDateParam.toISOString(),\n      endDate: endDateParam.toISOString(),\n      ...(tab.value !== 'all' && { status: tab.value })\n    });\n  } catch (error) {\n    console.error('Error loading additional rent data:', error);\n  }\n};\n</script>\n\n<style lang=\"scss\">\n</style>\n"],"names":["useRoute","useRouter","ref","dayjs","computed"],"mappings":"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"}