@ozdao/martyrs 0.2.505 → 0.2.507

package/dist/martyrs/src/modules/products/components/pages/Products.vue.js

@@ -1,111 +1,220 @@
-import { ref, watch, onMounted, onUnmounted, resolveComponent, createElementBlock, openBlock, createCommentVNode, createBlock, createElementVNode, unref, createVNode, renderSlot, withCtx, Fragment, renderList } from "vue";
+import { ref, computed, onMounted, onUnmounted, resolveComponent, createElementBlock, openBlock, createCommentVNode, createElementVNode, createVNode, unref, toDisplayString, Fragment, renderList, createTextVNode, createBlock, withCtx, normalizeClass, renderSlot } from "vue";
 import { useRoute, useRouter } from "vue-router";
-import _sfc_main$2 from "../../../../components/Tab/Tab.vue2.js";
-import _sfc_main$5 from "../../../../components/Feed/Feed.vue.js";
-/* empty css                                         */
+/* empty css                                 */
+import _sfc_main$4 from "../../../../components/Feed/Feed.vue.js";
+import _sfc_main$2 from "../../../../components/Spoiler/Spoiler.vue2.js";
+import _sfc_main$3 from "../../../../components/Checkbox/Checkbox.vue.js";
 import "vue-i18n";
-import { actions } from "../../store/categories.js";
+import { actions as actions$1 } from "../../store/categories.js";
 import "../../../marketplace/views/store/marketplace.js";
 /* empty css                              */
-import _sfc_main$4 from "../../../globals/views/components/blocks/BlockSearch.vue.js";
-import _sfc_main$3 from "../../../globals/views/components/blocks/BlockFilter.vue.js";
-import _sfc_main$6 from "../blocks/CardProduct.vue.js";
+import Field from "../../../../components/Field/Field.vue.js";
+import IconChevronBottom from "../../../icons/navigation/IconChevronBottom.vue.js";
+import Filters from "../../../globals/views/components/sections/Filters.vue2.js";
+import Calendar from "../../../../components/Calendar/Calendar.vue2.js";
+import _sfc_main$6 from "../../../../components/Popup/Popup.vue.js";
+import _sfc_main$5 from "../blocks/CardProduct.vue.js";
 import _sfc_main$1 from "../../../icons/navigation/IconPlus.vue.js";
-import { state as state$1 } from "../../../auth/views/store/auth.js";
-import { state as state$2 } from "../../../globals/views/store/globals.js";
-import { state, actions as actions$1 } from "../../store/products.js";
-const _hoisted_1 = { class: "h-100 pos-relative" };
+import { state } from "../../../auth/views/store/auth.js";
+import { state as state$1 } from "../../../globals/views/store/globals.js";
+import { state as state$2, actions } from "../../store/products.js";
+import { useGlobalMixins } from "../../../globals/views/mixins/mixins.js";
+const _hoisted_1 = { class: "pos-relative" };
 const _hoisted_2 = {
   key: 0,
   class: "pd-medium flex-v-center flex-nowrap flex"
 };
-const _hoisted_3 = { class: "cols-2-1_3 br-1px br-solid br-light h-100 z-index-3 pos-relative radius-medium" };
+const _hoisted_3 = { class: "cols-2-1_3 br-1px br-solid br-light z-index-3 pos-relative" };
 const _hoisted_4 = { class: "o-y-scroll br-r br-solid br-light pd-medium z-index-2 desktop-only h-100 pos-relative" };
-const _hoisted_5 = { class: "w-100 pd-thin h-max pos-relative o-hidden" };
-const _hoisted_6 = { class: "pos-relative w-100 z-index-3 radius-tl-big radius-tr-big" };
+const _hoisted_5 = { class: "w-100 o-y-scroll h-100" };
+const _hoisted_6 = {
+  key: 0,
+  class: "mn-b-medium"
+};
+const _hoisted_7 = { class: "mn-b-small" };
+const _hoisted_8 = { class: "gap-micro" };
+const _hoisted_9 = ["onClick"];
+const _hoisted_10 = { class: "cursor-pointer w-100 flex-v-center flex-nowrap flex" };
+const _hoisted_11 = { class: "w-100" };
+const _hoisted_12 = { class: "h-2r w-2r flex-child-auto aspect-1x1 flex-center flex bg-light radius-extra" };
+const _hoisted_13 = { class: "mn-t-small" };
+const _hoisted_14 = { class: "cursor-pointer w-100 flex-v-center flex-nowrap flex" };
+const _hoisted_15 = { class: "h-2r w-2r flex-child-auto aspect-1x1 flex-center flex bg-light radius-extra" };
+const _hoisted_16 = { class: "mn-t-small flex gap-thin" };
+const _hoisted_17 = { class: "cursor-pointer w-100 flex-v-center flex-nowrap flex" };
+const _hoisted_18 = { class: "h-2r w-2r flex-child-auto aspect-1x1 flex-center flex bg-light radius-extra" };
+const _hoisted_19 = { class: "mn-t-small" };
+const _hoisted_20 = ["onClick"];
+const _hoisted_21 = { class: "w-100 rows-1 pd-thin pos-relative o-hidden" };
+const _hoisted_22 = { class: "mn-b-thin w-100 o-y-scroll scroll-hide scroll-snap-type-x-mandatory scroll-pd-regular" };
+const _hoisted_23 = { class: "gap-thin flex-nowrap flex" };
+const _hoisted_24 = ["onClick"];
+const _hoisted_25 = { class: "flex gap-small" };
 const _sfc_main = {
   __name: "Products",
   setup(__props) {
     const route = useRoute();
     const router = useRouter();
-    const tabProducts = ref(route.query.tabProducts ? route.query.tabProducts : "all");
-    if (route.name !== "Organization") route.query.tabProducts = tabProducts.value;
-    if (route.query) {
-      const query = route.query;
-      state.filter.selected.categories = query.categories ? query.categories.split(",") : [];
-      state.filter.selected.prices = query.prices ? query.prices.split(",") : [];
-      state.filter.selected.delivery = query.delivery ? query.delivery.split(",") : [];
-      state.filter.selected.brand = query.brand ? query.brand.split(",") : [];
-    }
-    watch(tabProducts, (newValue) => {
-      if (route.name !== "Organization") router.replace({ query: { ...route.query, tabProducts: newValue } });
+    const { generateFilters, formatDate } = useGlobalMixins();
+    const currentCategories = ref([]);
+    const currentCategory = ref(null);
+    const categoryFilters = ref([]);
+    const availableFilters = ref([
+      {
+        title: "Price",
+        value: "price",
+        type: "range",
+        minPlaceholder: "From",
+        maxPlaceholder: "To"
+      },
+      {
+        title: "Delivery",
+        value: "delivery",
+        type: "checkbox",
+        options: [
+          { label: "Pickup", value: "pickup" },
+          { label: "Courier", value: "courier" },
+          { label: "Post", value: "post" }
+        ]
+      },
+      {
+        title: "Status",
+        value: "status",
+        type: "radio",
+        options: [
+          { label: "Available", value: "available" },
+          { label: "Out of Stock", value: "out_of_stock" },
+          { label: "Coming Soon", value: "coming_soon" }
+        ]
+      }
+    ]);
+    const selectedFilters = ref({
+      price: { min: "", max: "" },
+      delivery: [],
+      status: null
+    });
+    const availabilityOptions = ref([
+      { label: "Available today", value: "today" },
+      { label: "This week", value: "week" },
+      { label: "This month", value: "month" }
+    ]);
+    const selectedAvailability = ref("all");
+    const showDatePickerPopup = ref(false);
+    ref(null);
+    const selectedDates = ref(null);
+    const tempSelectedDates = ref(null);
+    const priceRange = ref({
+      min: "",
+      max: ""
     });
-    state$2.navigation_bar.actions = [{
+    const processedFilters = computed(() => {
+      return generateFilters(selectedFilters.value);
+    });
+    const processedPrices = computed(() => {
+      return priceRange.value.min || priceRange.value.max ? `${priceRange.value.min || 0}-${priceRange.value.max || 999999}` : null;
+    });
+    computed(() => {
+      const lookups = ["variants"];
+      if (processedDates.value) {
+        lookups.push("rents");
+      }
+      return lookups;
+    });
+    const loadCategoryData = async () => {
+      const categoryPath = route.params.categoryPath;
+      try {
+        if (categoryPath) {
+          const result = await actions$1.read({
+            url: `/${categoryPath}`,
+            depth: 1,
+            tree: false
+          });
+          if (result.length > 0) {
+            currentCategory.value = result[0];
+            currentCategories.value = result[0].children || [];
+            categoryFilters.value = result[0].filters || [];
+            const filtersObj = {};
+            (result[0].filters || []).forEach((filter) => {
+              filtersObj[filter.name] = [];
+            });
+            selectedFilters.value = filtersObj;
+          }
+        } else {
+          const result = await actions$1.read({
+            root: true,
+            tree: false
+          });
+          currentCategories.value = result;
+        }
+      } catch (error) {
+        console.error("Error loading categories:", error);
+        currentCategories.value = [];
+      }
+    };
+    const selectCategory = (category) => {
+      const categoryPath = category.url ? category.url.substring(1) : "";
+      if (!categoryPath) {
+        console.warn("No URL found for category:", category);
+        return;
+      }
+      if (route.params._id) {
+        router.push(`/organizations/${route.params._id}/products/categories/${categoryPath}`);
+      } else {
+        router.push(`/products/categories/${categoryPath}`);
+      }
+    };
+    const selectAvailabilityOption = (value) => {
+      selectedAvailability.value = value;
+      const today = /* @__PURE__ */ new Date();
+      switch (value) {
+        case "today":
+          selectedDates.value = {
+            start: today,
+            end: today
+          };
+          break;
+        case "week":
+          const weekEnd = new Date(today);
+          weekEnd.setDate(today.getDate() + 7);
+          selectedDates.value = {
+            start: today,
+            end: weekEnd
+          };
+          break;
+        case "month":
+          const monthEnd = new Date(today);
+          monthEnd.setMonth(today.getMonth() + 1);
+          selectedDates.value = {
+            start: today,
+            end: monthEnd
+          };
+          break;
+      }
+    };
+    const applyDateFilter = () => {
+      selectedDates.value = tempSelectedDates.value;
+      selectedAvailability.value = "custom";
+      showDatePickerPopup.value = false;
+    };
+    state$1.navigation_bar.actions = [{
       component: _sfc_main$1,
       props: {
         fill: "rgb(var(--main))"
       },
-      condition: () => state$1.user && state$1.user._id,
+      condition: () => state.user && state.user._id,
       action: () => route.params._id ? router.push({ name: "Organization_ProductAdd", params: { _id: route.params._id } }) : router.push({ name: "ProductAdd" })
     }], onMounted(async () => {
-      let categoriesFilter = await actions.read({ rootOnly: true });
-      categoriesFilter = categoriesFilter.map((category) => ({
-        value: category._id,
-        label: category.name
-      }));
-      const index = state.filter.options.findIndex((option) => option.value === "categories");
-      const categoryOption = {
-        title: "Categories",
-        value: "categories",
-        options: categoriesFilter
-      };
-      if (index !== -1) {
-        state.filter.options[index] = categoryOption;
-      } else {
-        state.filter.options.unshift(categoryOption);
-      }
+      await loadCategoryData();
     });
     onUnmounted(() => {
-      state$2.navigation_bar.actions = [];
+      state$1.navigation_bar.actions = [];
     });
-    watch(() => state.sort, (newSortValue, oldSortValue) => {
-      let query = { ...route.query };
-      query.sortParam = newSortValue.param;
-      query.sortOrder = newSortValue.order;
-      router.replace({ query });
-    }, { deep: true });
-    watch(() => state.filter.selected, (newFilterValue, oldFilterValue) => {
-      const query = { ...route.query };
-      Object.keys(oldFilterValue).forEach((key) => {
-        if (query[key]) {
-          delete query[key];
-        }
-      });
-      const newQueryValues = Object.fromEntries(
-        Object.entries(newFilterValue).filter(([key, value]) => Array.isArray(value) && value.length > 0).map(([key, value]) => [key, value.join(",")])
-      );
-      delete query.options;
-      Object.assign(query, newQueryValues);
-      router.replace({ query });
-    }, { deep: true });
-    function debounce(fn, delay) {
-      let timeoutId = null;
-      return (...args) => {
-        clearTimeout(timeoutId);
-        timeoutId = setTimeout(() => fn(...args), delay);
-      };
-    }
-    const debouncedSearch = debounce((search) => {
-      let query = { ...route.query };
-      query.search = search;
-      router.replace({ query });
-    }, 500);
     return (_ctx, _cache) => {
       const _component_router_link = resolveComponent("router-link");
       return openBlock(), createElementBlock("div", _hoisted_1, [
         unref(route).name !== "Organization" && !_ctx.MOBILE_APP ? (openBlock(), createElementBlock("header", _hoisted_2, [
-          _cache[4] || (_cache[4] = createElementVNode("h2", { class: "mn-r-medium" }, "Products", -1)),
-          _ctx.hasAccess(unref(route).params._id, "products", "create", state$1.accesses, state$1.access.roles) ? (openBlock(), createElementBlock("button", {
+          _cache[11] || (_cache[11] = createElementVNode("h2", { class: "mn-r-medium" }, "Products", -1)),
+          _ctx.hasAccess(unref(route).params._id, "products", "create", state.accesses, state.access.roles) ? (openBlock(), createElementBlock("button", {
             key: 0,
             onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$router.push({
               name: unref(route).params?._id ? "Organization_ProductAdd" : "ProductAdd"
@@ -113,41 +222,160 @@ const _sfc_main = {
             class: "radius-100 i-big hover-scale-1 cursor-pointer t-white bg-second"
           }, " + ")) : createCommentVNode("", true)
         ])) : createCommentVNode("", true),
-        unref(route).name !== "Organization" && _ctx.isAdmin ? (openBlock(), createBlock(_sfc_main$2, {
-          key: 1,
-          selected: tabProducts.value,
-          "onUpdate:selected": _cache[1] || (_cache[1] = ($event) => tabProducts.value = $event),
-          tabs: [
-            { name: "All", value: "all" },
-            { name: "Published", value: "published" },
-            { name: "Unpublished", value: "unpublished" },
-            { name: "Archivied", value: "archivied" }
-          ],
-          style: { "flex": "0 0 auto" },
-          class: "p-medium br-t br-solid br-light bg-white gap-micro pd-medium pd-t-thin pd-b-thin z-index-1",
-          classTab: "bg-light  uppercase pd-small radius-small w-100"
-        }, null, 8, ["selected"])) : createCommentVNode("", true),
         createElementVNode("div", _hoisted_3, [
           createElementVNode("div", _hoisted_4, [
-            createVNode(_sfc_main$3, {
-              filter: state.filter,
-              "onUpdate:filter": _cache[2] || (_cache[2] = ($event) => state.filter = $event),
-              options: state.filter.options,
-              class: "h-100 w-100"
-            }, null, 8, ["filter", "options"])
+            createElementVNode("div", _hoisted_5, [
+              currentCategories.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_6, [
+                createElementVNode("h4", _hoisted_7, toDisplayString(unref(route).params.categoryPath ? "Subcategories" : "Categories"), 1),
+                createElementVNode("div", _hoisted_8, [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(currentCategories.value, (category) => {
+                    return openBlock(), createElementBlock("div", {
+                      key: category._id,
+                      onClick: ($event) => selectCategory(category),
+                      class: "pd-small radius-small cursor-pointer hover-bg-light transition-all"
+                    }, [
+                      createTextVNode(toDisplayString(category.name) + " ", 1),
+                      _cache[12] || (_cache[12] = createElementVNode("br", null, null, -1)),
+                      (openBlock(true), createElementBlock(Fragment, null, renderList(category.children, (subcategory) => {
+                        return openBlock(), createElementBlock("span", null, toDisplayString(subcategory.name), 1);
+                      }), 256))
+                    ], 8, _hoisted_9);
+                  }), 128))
+                ])
+              ])) : createCommentVNode("", true),
+              (openBlock(true), createElementBlock(Fragment, null, renderList(categoryFilters.value, (filter) => {
+                return openBlock(), createBlock(_sfc_main$2, {
+                  key: filter.name,
+                  class: "o-hidden mn-b-medium",
+                  status: true
+                }, {
+                  header: withCtx(({ isOpen }) => [
+                    createElementVNode("div", _hoisted_10, [
+                      createElementVNode("h4", _hoisted_11, toDisplayString(filter.name), 1),
+                      createElementVNode("div", _hoisted_12, [
+                        createVNode(IconChevronBottom, {
+                          class: normalizeClass([{ "rotate-180 mn-t-micro-negative": isOpen }, "i-regular"]),
+                          fill: "rgb(var(--black))"
+                        }, null, 8, ["class"])
+                      ])
+                    ])
+                  ]),
+                  content: withCtx(() => [
+                    createElementVNode("div", _hoisted_13, [
+                      (openBlock(true), createElementBlock(Fragment, null, renderList(filter.options, (option) => {
+                        return openBlock(), createBlock(_sfc_main$3, {
+                          key: option.text || option,
+                          radio: selectedFilters.value[filter.name],
+                          "onUpdate:radio": ($event) => selectedFilters.value[filter.name] = $event,
+                          label: option.text || option,
+                          value: option.text || option,
+                          mode: "checkbox",
+                          class: "mn-b-micro"
+                        }, null, 8, ["radio", "onUpdate:radio", "label", "value"]);
+                      }), 128))
+                    ])
+                  ]),
+                  _: 2
+                }, 1024);
+              }), 128)),
+              createVNode(_sfc_main$2, {
+                class: "o-hidden mn-b-medium",
+                status: true
+              }, {
+                header: withCtx(({ isOpen }) => [
+                  createElementVNode("div", _hoisted_14, [
+                    _cache[13] || (_cache[13] = createElementVNode("h4", { class: "w-100" }, " Price", -1)),
+                    createElementVNode("div", _hoisted_15, [
+                      createVNode(IconChevronBottom, {
+                        class: normalizeClass([{ "rotate-180 mn-t-micro-negative": isOpen }, "i-regular"]),
+                        fill: "rgb(var(--black))"
+                      }, null, 8, ["class"])
+                    ])
+                  ])
+                ]),
+                content: withCtx(() => [
+                  createElementVNode("div", _hoisted_16, [
+                    createVNode(Field, {
+                      modelValue: priceRange.value.min,
+                      "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => priceRange.value.min = $event),
+                      placeholder: "From",
+                      type: "number",
+                      class: "w-50 bg-light pd-small radius-small"
+                    }, null, 8, ["modelValue"]),
+                    createVNode(Field, {
+                      modelValue: priceRange.value.max,
+                      "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => priceRange.value.max = $event),
+                      placeholder: "To",
+                      type: "number",
+                      class: "w-50 bg-light pd-small radius-small"
+                    }, null, 8, ["modelValue"])
+                  ])
+                ]),
+                _: 1
+              }),
+              createVNode(_sfc_main$2, {
+                class: "o-hidden mn-b-medium",
+                status: true
+              }, {
+                header: withCtx(({ isOpen }) => [
+                  createElementVNode("div", _hoisted_17, [
+                    _cache[14] || (_cache[14] = createElementVNode("h4", { class: "w-100" }, "Availability", -1)),
+                    createElementVNode("div", _hoisted_18, [
+                      createVNode(IconChevronBottom, {
+                        class: normalizeClass([{ "rotate-180 mn-t-micro-negative": isOpen }, "i-regular"]),
+                        fill: "rgb(var(--black))"
+                      }, null, 8, ["class"])
+                    ])
+                  ])
+                ]),
+                content: withCtx(() => [
+                  createElementVNode("div", _hoisted_19, [
+                    (openBlock(true), createElementBlock(Fragment, null, renderList(availabilityOptions.value, (option) => {
+                      return openBlock(), createElementBlock("div", {
+                        key: option.value,
+                        onClick: ($event) => selectAvailabilityOption(option.value),
+                        class: normalizeClass([{ "bg-light": selectedAvailability.value === option.value }, "pd-small radius-small cursor-pointer hover-bg-light transition-all mn-b-micro"])
+                      }, toDisplayString(option.label), 11, _hoisted_20);
+                    }), 128)),
+                    createElementVNode("div", {
+                      onClick: _cache[3] || (_cache[3] = () => {
+                        tempSelectedDates.value = selectedDates.value;
+                        showDatePickerPopup.value = true;
+                      }),
+                      class: normalizeClass([{ "bg-light": selectedAvailability.value === "custom" }, "pd-small radius-small cursor-pointer hover-bg-light transition-all mn-b-micro"])
+                    }, toDisplayString(selectedDates.value ? `${unref(formatDate)(selectedDates.value.start, { dayMonth: true, language: "en" })} - ${unref(formatDate)(selectedDates.value.end, { dayMonth: true, language: "en" })}` : "Select dates"), 3)
+                  ])
+                ]),
+                _: 1
+              }),
+              _cache[15] || (_cache[15] = createElementVNode("button", { class: "bg-main w-100 button mn-t-medium" }, " Clear Filters ", -1))
+            ])
           ]),
-          createElementVNode("div", _hoisted_5, [
+          createElementVNode("div", _hoisted_21, [
+            createVNode(Filters, {
+              filters: availableFilters.value,
+              "onUpdate:filters": _cache[4] || (_cache[4] = ($event) => availableFilters.value = $event),
+              selected: selectedFilters.value,
+              "onUpdate:selected": _cache[5] || (_cache[5] = ($event) => selectedFilters.value = $event)
+            }, null, 8, ["filters", "selected"]),
             renderSlot(_ctx.$slots, "default"),
-            createElementVNode("div", _hoisted_6, [
-              createVNode(_sfc_main$4, {
-                onSearch: unref(debouncedSearch),
-                placeholder: "Enter product name",
-                class: "bg-light mn-b-thin h-4r"
-              }, null, 8, ["onSearch"])
+            createElementVNode("div", _hoisted_22, [
+              createElementVNode("div", _hoisted_23, [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(currentCategories.value, (category) => {
+                  return openBlock(), createElementBlock("div", {
+                    key: category._id,
+                    onClick: ($event) => selectCategory(category),
+                    class: "flex-child-default bg-light flex t-nowrap pd-medium radius-medium cursor-pointer hover-bg-light transition-all"
+                  }, toDisplayString(category.name), 9, _hoisted_24);
+                }), 128))
+              ])
             ]),
-            createVNode(_sfc_main$5, {
-              filter: state.filter,
-              "onUpdate:filter": _cache[3] || (_cache[3] = ($event) => state.filter = $event),
+            createVNode(_sfc_main$4, {
+              search: true,
+              filter: state$2.filter,
+              "onUpdate:filter": _cache[6] || (_cache[6] = ($event) => state$2.filter = $event),
+              sort: state$2.sort,
+              "onUpdate:sort": _cache[7] || (_cache[7] = ($event) => state$2.sort = $event),
               showLoadMore: false,
               states: {
                 empty: {
@@ -156,20 +384,19 @@ const _sfc_main = {
                 }
               },
               store: {
-                read: (options) => actions$1.read(options),
-                state
+                read: (options) => actions.read(options),
+                state: state$2
               },
               options: {
                 limit: 16,
-                owner: unref(route).params._id,
-                categories: unref(route).query.categories,
-                filters: _ctx.generateFilters(state.filter.selected),
-                prices: unref(route).query.prices,
-                delivery: unref(route).query.delivery,
+                owner: unref(route).name?.includes("Organization") ? unref(route).params._id : null,
                 search: unref(route).query.search,
-                ...tabProducts.value !== "all" && { status: tabProducts.value },
-                lookup: ["variants"]
-                // user: user
+                lookup: ["variants", "rents"],
+                categories: unref(route).params.categoryPath ? `/${unref(route).params.categoryPath}` : null,
+                filters: processedFilters.value,
+                prices: processedPrices.value,
+                dateStart: selectedDates.value?.start,
+                dateEnd: selectedDates.value?.end
               },
               class: "cols-4 pos-relative w-100 rows-1 gap-thin"
             }, {
@@ -182,12 +409,12 @@ const _sfc_main = {
                     class: "pos-relative h-100 w-100"
                   }, {
                     default: withCtx(() => [
-                      (openBlock(), createBlock(_sfc_main$6, {
+                      (openBlock(), createBlock(_sfc_main$5, {
                         key: product._id,
                         product,
-                        user: state$1.access,
+                        user: state.access,
                         organization: unref(route).params._id,
-                        access: _ctx.hasAccess(unref(route).params._id, "products", "edit", state$1.accesses, state$1.access.roles),
+                        access: _ctx.hasAccess(unref(route).params._id, "products", "edit", state.accesses, state.access.roles),
                         class: "pos-relative h-100 w-100 bg-light"
                       }, null, 8, ["product", "user", "organization", "access"]))
                     ]),
@@ -196,9 +423,37 @@ const _sfc_main = {
                 }), 256))
               ]),
               _: 1
-            }, 8, ["filter", "store", "options"])
+            }, 8, ["filter", "sort", "store", "options"])
           ])
-        ])
+        ]),
+        createVNode(_sfc_main$6, {
+          isPopupOpen: showDatePickerPopup.value,
+          onClosePopup: _cache[10] || (_cache[10] = ($event) => showDatePickerPopup.value = false),
+          class: "pd-medium bg-white radius-medium",
+          style: { "min-width": "350px" }
+        }, {
+          default: withCtx(() => [
+            _cache[16] || (_cache[16] = createElementVNode("h3", { class: "mn-b-medium" }, "Select Date Range", -1)),
+            createVNode(Calendar, {
+              date: tempSelectedDates.value,
+              "onUpdate:date": _cache[8] || (_cache[8] = ($event) => tempSelectedDates.value = $event),
+              allowRange: true,
+              disablePastDates: true,
+              class: "mn-b-medium"
+            }, null, 8, ["date"]),
+            createElementVNode("div", _hoisted_25, [
+              createElementVNode("button", {
+                onClick: applyDateFilter,
+                class: "bg-main button flex-child-full"
+              }, " Apply "),
+              createElementVNode("button", {
+                onClick: _cache[9] || (_cache[9] = ($event) => showDatePickerPopup.value = false),
+                class: "bg-light button flex-child-full"
+              }, " Cancel ")
+            ])
+          ]),
+          _: 1
+        }, 8, ["isPopupOpen"])
       ]);
     };
   }