@ozdao/martyrs 0.2.604 → 0.2.605

package/dist/martyrs/src/modules/orders/components/pages/OrderCreateBackoffice.vue.js

@@ -1,25 +1,31 @@
-import { getCurrentInstance, computed, ref, onMounted, createElementBlock, openBlock, createVNode, createBlock, createCommentVNode, withCtx, createElementVNode, createTextVNode, unref, Fragment, renderList, toDisplayString } from "vue";
+import { getCurrentInstance, ref, computed, watch, onMounted, createElementBlock, openBlock, createVNode, createBlock, createCommentVNode, unref, withCtx, Fragment, renderList, normalizeClass, createElementVNode, toDisplayString } from "vue";
 import { useRoute, useRouter } from "vue-router";
 /* empty css                                      */
-import Button from "../../../../components/Button/Button.vue2.js";
-import _sfc_main$2 from "../../../../components/Tab/Tab.vue2.js";
-import _sfc_main$3 from "../../../../components/Popup/Popup.vue.js";
-import _sfc_main$1 from "../../../../components/Block/Block.vue.js";
+/* empty css                                       */
+import _sfc_main$5 from "../../../../components/Tab/Tab.vue2.js";
+import _sfc_main$1 from "../../../core/views/components/sections/SectionPageTitle.vue.js";
+import _sfc_main$6 from "../../../../components/Popup/Popup.vue.js";
+import _sfc_main$2 from "../../../../components/Block/Block.vue.js";
 import _sfc_main$4 from "../../../../components/Feed/Feed.vue.js";
-import _sfc_main$5 from "../blocks/CardOrderItem.vue.js";
+import _sfc_main$7 from "../blocks/CardOrderItem.vue.js";
 import { useGlobalMixins } from "../../../core/views/mixins/mixins.js";
-import _sfc_main$6 from "../forms/FormSelectCustomer.vue.js";
-import _sfc_main$7 from "../sections/FormDelivery.vue.js";
-import _sfc_main$8 from "../sections/FormPayment.vue.js";
+import _sfc_main$3 from "../../../core/views/components/blocks/Card.vue.js";
+import _sfc_main$8 from "../forms/FormSelectCustomer.vue.js";
+import _sfc_main$9 from "../sections/FormDelivery.vue.js";
+import _sfc_main$a from "../sections/FormPayment.vue.js";
 import { useStore } from "../../../core/views/store/core.store.js";
 import { state as state$1 } from "../../../auth/views/store/auth.js";
 import { mutations, state, actions as actions$2 } from "../../store/orders.js";
 import { actions } from "../../../organizations/store/organizations.js";
 import { actions as actions$1 } from "../../../products/store/products.js";
 import variantsStore from "../../../products/store/variants.store.js";
+import { calcRentTotalPrice } from "../../utils/rent-price.js";
 /* empty css                           */
 const _hoisted_1 = { class: "flex flex-column pd-thin" };
-const _hoisted_2 = { class: "flex-v-center flex-nowrap flex" };
+const _hoisted_2 = {
+  key: 1,
+  class: "o-x-hidden o-y-scroll"
+};
 const _hoisted_3 = { class: "bg-light h-max-100 mn-b-thin o-scroll pd-medium radius-big" };
 const _hoisted_4 = { class: "gap-thin flex flex-column" };
 const _hoisted_5 = ["onClick"];
@@ -31,7 +37,7 @@ const _hoisted_7 = ["src"];
 const _hoisted_8 = { class: "fw-medium" };
 const _hoisted_9 = {
   key: 0,
-  class: "t-small t-transp"
+  class: "t-small opacity-50"
 };
 const _hoisted_10 = { class: "mn-l-auto" };
 const _hoisted_11 = {
@@ -46,15 +52,20 @@ const _sfc_main = {
     const route = useRoute();
     const router = useRouter();
     const { proxy } = getCurrentInstance();
-    const { formatPrice, returnCurrency } = useGlobalMixins();
+    const { formatPrice, returnCurrency, isPhone, isTablet } = useGlobalMixins();
     mutations.resetOrder(state.current);
+    const selectedOrganization = ref(null);
+    const orgId = computed(() => selectedOrganization.value?._id || route.params._id);
     let cartTotalPrice = computed(() => {
       return Number(state.current.positions.reduce((total, product) => {
         if (product.listing === "rent" && product.date?.start && product.date?.end) {
-          const start = new Date(product.date.start);
-          const end = new Date(product.date.end);
-          const days = Math.ceil(Math.abs(end - start) / (1e3 * 60 * 60 * 24)) + 1;
-          return total + product.price * product.quantity * days;
+          return total + calcRentTotalPrice(
+            product.price,
+            product.quantity,
+            product.date.start,
+            product.date.end,
+            product.rentPeriod || "day"
+          );
         } else {
           return total + product.price * product.quantity;
         }
@@ -93,11 +104,14 @@ const _sfc_main = {
       try {
         let selectedDates = null;
         if (selectedProduct.value.listing === "rent") {
+          const rentPeriod = selectedProduct.value.rentPeriod || "day";
+          const enableTime = ["hour", "4hours", "flat"].includes(rentPeriod);
           selectedDates = await proxy.$dateSelector(
             selectedProduct.value._id,
             variant._id,
             1,
-            variant.price || selectedProduct.value.price
+            variant.price || selectedProduct.value.price,
+            { enableTime, periodType: rentPeriod }
           );
           if (!selectedDates) {
             return;
@@ -113,7 +127,8 @@ const _sfc_main = {
           unit: variant.unit || selectedProduct.value.unit,
           date: selectedDates,
           variant: variant._id,
-          org_id: route.params._id
+          rentPeriod: selectedProduct.value.rentPeriod || "day",
+          org_id: orgId.value
         };
         store.core.actions.add(state.current.positions, position);
         closeVariantsPopup();
@@ -164,12 +179,9 @@ const _sfc_main = {
       };
       state.current.owner = {
         type: "Organization",
-        target: route.params._id
-      };
-      state.current.customer = {
-        type: "Customer",
-        target: state.current.customer._id || null
+        target: orgId.value
       };
+      state.current.customer = state.current.customer._id ? { type: "Customer", target: state.current.customer._id } : { type: "Customer", target: null, phone: state.current.customer.phone, email: state.current.customer.email, profile: { name: state.current.customer.profile?.name } };
       order.value = await actions$2.create(state.current);
     }
     function redirectTo() {
@@ -177,55 +189,110 @@ const _sfc_main = {
         name: route.meta.context === "backoffice" ? "BackofficeOrderEdit" : "OrganizationOrderEdit",
         params: {
           order: order.value._id,
-          _id: route.params._id
+          _id: orgId.value
         }
       });
     }
     const orderOrganization = ref({});
+    watch(selectedOrganization, async (org) => {
+      if (org) {
+        orderOrganization.value = await actions.read({
+          _id: org._id,
+          lookup: ["spots"]
+        });
+      }
+    });
     onMounted(async () => {
-      orderOrganization.value = await actions.read({
-        _id: route.params._id,
-        lookup: ["spots"]
-      });
+      if (route.params._id) {
+        orderOrganization.value = await actions.read({
+          _id: route.params._id,
+          lookup: ["spots"]
+        });
+        selectedOrganization.value = orderOrganization.value[0];
+      } else {
+        const orgs = await actions.read({ user: state$1.user._id });
+        if (orgs?.length) {
+          selectedOrganization.value = orgs[0];
+        }
+      }
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1, [
-        createVNode(_sfc_main$1, { class: "mn-b-thin" }, {
+        createVNode(_sfc_main$1, {
+          title: "Add Order",
+          actions: [
+            { method: async () => {
+              await onSubmit();
+              redirectTo();
+            }, label: "Save Order" }
+          ],
+          class: "mn-b-thin"
+        }, null, 8, ["actions"]),
+        !unref(route).params._id ? (openBlock(), createBlock(_sfc_main$2, {
+          key: 0,
+          title: "Organization",
+          class: "mn-b-small"
+        }, {
           default: withCtx(() => [
-            createElementVNode("header", _hoisted_2, [
-              _cache[4] || (_cache[4] = createElementVNode("h2", { class: "mn-r-auto" }, "Create Order", -1)),
-              createVNode(Button, {
-                submit: onSubmit,
-                callback: redirectTo,
-                class: "pd-small radius-big bg-main t-black uppercase fw-medium"
+            selectedOrganization.value ? (openBlock(), createBlock(_sfc_main$3, {
+              key: 0,
+              photo: selectedOrganization.value.profile?.photo,
+              title: selectedOrganization.value.profile?.name,
+              classImage: "h-3r w-3r radius-small o-hidden flex-shrink-0",
+              onClick: _cache[0] || (_cache[0] = () => {
+                selectedOrganization.value = null;
+              }),
+              class: "h-4r w-100 bg-white pd-thin radius-medium mn-b-thin flex-v-center flex-nowrap flex gap-thin cursor-pointer"
+            }, null, 8, ["photo", "title"])) : (openBlock(), createElementBlock("section", _hoisted_2, [
+              createVNode(_sfc_main$4, {
+                showLoadMore: false,
+                search: { placeholder: "Search organization...", class: "bg-white mn-b-thin" },
+                states: { empty: { title: "No organizations", description: "No organizations found." } },
+                store: { read: (options) => actions.read(options), state: null },
+                options: { user: state$1.user._id }
               }, {
-                default: withCtx(() => _cache[3] || (_cache[3] = [
-                  createTextVNode(" Add Order ")
-                ])),
+                default: withCtx(({ items }) => [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(items, (org) => {
+                    return openBlock(), createBlock(_sfc_main$3, {
+                      key: org._id,
+                      photo: org.profile?.photo,
+                      title: org.profile?.name,
+                      classImage: "h-3r w-3r radius-small o-hidden flex-shrink-0",
+                      onClick: () => {
+                        selectedOrganization.value = org;
+                      },
+                      class: "h-4r bg-white pd-thin radius-medium w-100 mn-b-thin cursor-pointer flex-v-center flex-nowrap flex gap-thin"
+                    }, null, 8, ["photo", "title", "onClick"]);
+                  }), 128))
+                ]),
                 _: 1
-              })
-            ])
+              }, 8, ["store", "options"])
+            ]))
           ]),
           _: 1
-        }),
-        createVNode(_sfc_main$2, {
+        })) : createCommentVNode("", true),
+        createVNode(_sfc_main$5, {
           selected: tabOrderCreate.value,
-          "onUpdate:selected": _cache[0] || (_cache[0] = ($event) => tabOrderCreate.value = $event),
+          "onUpdate:selected": _cache[1] || (_cache[1] = ($event) => tabOrderCreate.value = $event),
           tabs: [
             { name: "Positions", value: "positions" },
             { name: "Customer", value: "customer" },
             { name: "Delivery", value: "delivery" },
             { name: "Payment", value: "payment" }
           ],
-          class: "fw-medium radius-medium bg-light mn-b-small"
+          class: "fw-medium radius-medium bg-light pd-thin mn-b-small"
         }, null, 8, ["selected"]),
-        createVNode(_sfc_main$3, {
+        createVNode(_sfc_main$6, {
           onClosePopup: closeProductsPopup,
           isPopupOpen: isOpenProductsPopup.value,
-          class: "bg-white flex flex-column radius-big pd-medium pos-relative"
+          align: unref(isPhone)() || unref(isTablet)() ? "bottom center" : "center center",
+          class: normalizeClass([
+            "bg-white flex flex-column radius-big pd-medium pos-relative",
+            unref(isPhone)() || unref(isTablet)() ? "w-100 radius-zero radius-tr-medium radius-tl-medium h-max-80" : "w-min-30r w-max-30r"
+          ])
         }, {
           default: withCtx(() => [
-            _cache[5] || (_cache[5] = createElementVNode("h3", { class: "mn-b-small" }, "Add to order", -1)),
+            _cache[4] || (_cache[4] = createElementVNode("h3", { class: "mn-b-small" }, "Add to order", -1)),
             createElementVNode("div", _hoisted_3, [
               createVNode(_sfc_main$4, {
                 showLoadMore: false,
@@ -247,7 +314,7 @@ const _sfc_main = {
                   state: null
                 },
                 options: {
-                  owner: unref(route).params._id
+                  owner: orgId.value
                 },
                 class: ""
               }, {
@@ -255,7 +322,7 @@ const _sfc_main = {
                   items
                 }) => [
                   (openBlock(true), createElementBlock(Fragment, null, renderList(items, (product, index) => {
-                    return openBlock(), createBlock(_sfc_main$5, {
+                    return openBlock(), createBlock(_sfc_main$7, {
                       key: `${product._id}_${index}`,
                       editable: false,
                       productId: product._id,
@@ -271,12 +338,16 @@ const _sfc_main = {
             ])
           ]),
           _: 1
-        }, 8, ["isPopupOpen"]),
-        createVNode(_sfc_main$3, {
+        }, 8, ["isPopupOpen", "align", "class"]),
+        createVNode(_sfc_main$6, {
           title: "Select variant",
           onClosePopup: closeVariantsPopup,
           isPopupOpen: isVariantsPopupOpen.value,
-          class: "bg-white w-100 w-max-30r radius-medium pd-medium"
+          align: unref(isPhone)() || unref(isTablet)() ? "bottom center" : "center center",
+          class: normalizeClass([
+            "bg-white w-100 radius-medium pd-medium",
+            unref(isPhone)() || unref(isTablet)() ? "radius-zero radius-tr-medium radius-tl-medium" : "w-max-30r"
+          ])
         }, {
           default: withCtx(() => [
             createVNode(_sfc_main$4, {
@@ -325,9 +396,9 @@ const _sfc_main = {
             }, 8, ["store", "options"])
           ]),
           _: 1
-        }, 8, ["isPopupOpen"]),
-        tabOrderCreate.value === "positions" ? (openBlock(), createBlock(_sfc_main$1, {
-          key: 0,
+        }, 8, ["isPopupOpen", "align", "class"]),
+        tabOrderCreate.value === "positions" ? (openBlock(), createBlock(_sfc_main$2, {
+          key: 1,
           title: "Positions",
           actions: [{
             label: "+",
@@ -338,7 +409,7 @@ const _sfc_main = {
           default: withCtx(() => [
             state.current.positions.length === 0 ? (openBlock(), createElementBlock("span", _hoisted_11, " No positions added yet ")) : createCommentVNode("", true),
             (openBlock(true), createElementBlock(Fragment, null, renderList(state.current.positions, (product, index) => {
-              return openBlock(), createBlock(_sfc_main$5, {
+              return openBlock(), createBlock(_sfc_main$7, {
                 key: `${product._id}_${product.variant || "no-variant"}_${index}`,
                 editable: true,
                 productId: product._id,
@@ -349,37 +420,39 @@ const _sfc_main = {
                 unit: product.unit,
                 dates: product.date,
                 listing: product.listing,
+                rentPeriod: product.rentPeriod || "day",
                 price: product.price,
                 increase: () => incrementOrderItemQuantity(product._id, product.variant),
                 decrease: () => decrementOrderItemQuantity(product._id, product.variant),
                 remove: () => removeOrderItem(product._id, product.variant),
-                onUpdateRentDates: _cache[1] || (_cache[1] = (productId, variantId, dates) => updateOrderRentDates(productId, variantId, dates)),
+                onUpdateRentDates: _cache[2] || (_cache[2] = (productId, variantId, dates) => updateOrderRentDates(productId, variantId, dates)),
                 class: "mn-b-thin pd-thin radius-medium bg-white"
-              }, null, 8, ["productId", "variantId", "images", "name", "quantity", "unit", "dates", "listing", "price", "increase", "decrease", "remove"]);
+              }, null, 8, ["productId", "variantId", "images", "name", "quantity", "unit", "dates", "listing", "rentPeriod", "price", "increase", "decrease", "remove"]);
             }), 128))
           ]),
           _: 1
         }, 8, ["actions"])) : createCommentVNode("", true),
-        tabOrderCreate.value === "customer" ? (openBlock(), createBlock(_sfc_main$6, {
-          key: 1,
+        tabOrderCreate.value === "customer" ? (openBlock(), createBlock(_sfc_main$8, {
+          key: 2,
           customer: state.current.customer,
-          "onUpdate:customer": _cache[2] || (_cache[2] = ($event) => state.current.customer = $event),
+          "onUpdate:customer": _cache[3] || (_cache[3] = ($event) => state.current.customer = $event),
+          orgId: orgId.value,
           class: "mn-b-semi"
-        }, null, 8, ["customer"])) : createCommentVNode("", true),
-        tabOrderCreate.value === "delivery" ? (openBlock(), createBlock(_sfc_main$7, {
-          key: 2,
+        }, null, 8, ["customer", "orgId"])) : createCommentVNode("", true),
+        tabOrderCreate.value === "delivery" ? (openBlock(), createBlock(_sfc_main$9, {
+          key: 3,
           order: state.current,
           organization: orderOrganization.value[0]
         }, null, 8, ["order", "organization"])) : createCommentVNode("", true),
-        tabOrderCreate.value === "payment" ? (openBlock(), createBlock(_sfc_main$8, {
-          key: 3,
+        tabOrderCreate.value === "payment" ? (openBlock(), createBlock(_sfc_main$a, {
+          key: 4,
           order: state.current,
           organization: orderOrganization.value[0]
         }, null, 8, ["order", "organization"])) : createCommentVNode("", true),
-        createVNode(_sfc_main$1, { class: "mn-b-semi" }, {
+        createVNode(_sfc_main$2, { class: "mn-b-semi" }, {
           default: withCtx(() => [
             createElementVNode("div", _hoisted_12, [
-              _cache[6] || (_cache[6] = createElementVNode("span", { class: "mn-r-auto t-transp" }, "In total", -1)),
+              _cache[5] || (_cache[5] = createElementVNode("span", { class: "mn-r-auto opacity-50" }, "In total", -1)),
               createElementVNode("span", null, toDisplayString(unref(cartTotalPrice)) + " " + toDisplayString(unref(returnCurrency)()), 1)
             ])
           ]),

package/dist/martyrs/src/modules/orders/components/pages/OrderCreateBackoffice.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"OrderCreateBackoffice.vue.js","sources":["../../../../../../../src/modules/orders/components/pages/OrderCreateBackoffice.vue"],"sourcesContent":["<template>\n  <div class=\"flex flex-column pd-thin\">\n    <Block class=\"mn-b-thin\">\n      <header class=\"flex-v-center flex-nowrap flex\">\n        <h2 class=\"mn-r-auto\">Create Order</h2>\n        <Button \n          :submit=\"onSubmit\"\n          :callback=\"redirectTo\"\n          class=\"pd-small radius-big bg-main t-black uppercase fw-medium\"\n        >\n          Add Order \n        </Button>\n      </header>\n    </Block>\n\n    <Tab \n      v-model:selected=\"tabOrderCreate\"\n      :tabs=\"[\n        {name: 'Positions', value: 'positions'},\n        {name: 'Customer', value: 'customer'},\n        {name: 'Delivery', value: 'delivery'},\n        {name: 'Payment', value: 'payment'}\n      ]\"\n      class=\"fw-medium radius-medium bg-light mn-b-small\"\n    />\n\n    <Popup \n      @close-popup=\"closeProductsPopup\" \n      :isPopupOpen=\"isOpenProductsPopup\"\n      class=\"bg-white flex flex-column radius-big pd-medium pos-relative\"\n    >\n\n      <h3 class=\"mn-b-small\">Add to order</h3>\n\n      <div class=\"bg-light h-max-100 mn-b-thin o-scroll pd-medium radius-big\">\n        <Feed\n          :showLoadMore=\"false\"\n          :search=\"{\n            placeholder: 'Search products...',\n            class: 'bg-white mn-b-thin'\n          }\"\n          :states=\"{\n            empty: {\n              title: 'No Products Found',\n              description: 'Currently, there are no such products available.'\n            },\n            skeleton: {\n              hide: true\n            }\n          }\"\n          :store=\"{\n            read: (options) => products.actions.read(options),\n            state: null\n          }\"\n          :options=\"{\n            owner: route.params._id\n          }\"\n          v-slot=\"{ \n            items \n          }\"\n          class=\"\"\n        >\n          <CardOrderItem\n            v-for=\"(product, index) in items\" \n            :key=\"`${product._id}_${index}`\"\n            :editable=\"false\" \n            :productId=\"product._id\"\n            :images=\"product.images\"\n            :name=\"product.name\"\n            @click=\"() => selectProduct(product)\"\n            class=\"bg-white pd-thin radius-medium w-100 mn-b-thin\"\n          />\n        </Feed>\n      </div>\n    </Popup>\n\n    <!-- Popup for selecting variant of the product -->\n    <Popup \n      title=\"Select variant\" \n      @close-popup=\"closeVariantsPopup\" \n      :isPopupOpen=\"isVariantsPopupOpen\"\n      class=\"bg-white w-100 w-max-30r radius-medium pd-medium\"\n    >\n      <Feed\n        :store=\"variants\"\n        :options=\"{\n          product: selectedProduct?._id,\n        }\"\n        :skeleton=\"{\n          structure: [\n            { block: 'text', size: 'small' },\n            { block: 'text', size: 'medium' },\n            { block: 'text', size: 'small' }\n          ]\n        }\"\n        :states=\"{\n          empty: {\n            title: 'No variants',\n            description: 'Create your first variant'\n          }\n        }\"\n         v-slot=\"{ items }\"\n      >\n        <div class=\"gap-thin flex flex-column\">\n          <div \n            v-for=\"(variant, index) in items\" \n            :key=\"index\"\n            @click=\"addVariantToOrder(variant)\"\n            class=\"w-100 cursor-pointer hover:scale-[1.05] bg-light pd-small radius-small flex-v-center flex-nowrap flex gap-thin\"\n          >\n            <div v-if=\"variant.images && variant.images.length\" class=\"aspect-1x1 h-3r radius-small o-hidden\">\n              <img \n                :src=\"(FILE_SERVER_URL || '') + variant.images[0]\" \n                class=\"w-100 h-100 object-fit-cover\"\n              />\n            </div>\n            <div>\n              <p class=\"fw-medium\">{{ variant.name || 'Default variant' }}</p>\n              <p v-if=\"variant.attributes && variant.attributes.length\" class=\"t-small t-transp\">\n                {{ variant.attributes.map(attr => `${attr.name}: ${attr.value}`).join(', ') }}\n              </p>\n            </div>\n            <p class=\"mn-l-auto\">{{ formatPrice(variant.price || variant.cost) }}</p>\n          </div>\n        </div>\n      </Feed>\n    </Popup>\n\n    <Block\n      v-if=\"tabOrderCreate === 'positions'\"\n      title=\"Positions\"\n      :actions=\"[{\n        label: '+',\n        function: () => openProductsPopup()\n      }]\"\n      class=\"mn-b-small\"\n    >\n      <span \n        v-if=\"orders.state.current.positions.length === 0\" \n        class=\"w-100\"\n      >\n        No positions added yet\n      </span> \n\n      <CardOrderItem\n        v-for=\"(product, index) in orders.state.current.positions\" \n        :key=\"`${product._id}_${product.variant || 'no-variant'}_${index}`\"\n        :editable=\"true\" \n        :productId=\"product._id\"\n        :variantId=\"product.variant\"\n        :images=\"product.images\"\n        :name=\"product.name\"\n        :quantity=\"product.quantity\"\n        :unit=\"product.unit\"\n        :dates=\"product.date\"\n        :listing=\"product.listing\"\n        :price=\"product.price\"\n        :increase=\"() => incrementOrderItemQuantity(product._id, product.variant)\"\n        :decrease=\"() => decrementOrderItemQuantity(product._id, product.variant)\"\n        :remove=\"() => removeOrderItem(product._id, product.variant)\"\n        @updateRentDates=\"(productId, variantId, dates) => updateOrderRentDates(productId, variantId, dates)\"\n        class=\"mn-b-thin pd-thin radius-medium bg-white\"\n      /> \n    </Block>\n\n    <FormSelectCustomer\n      v-if=\"tabOrderCreate === 'customer'\"\n      v-model:customer=\"orders.state.current.customer\"\n      class=\"mn-b-semi\"\n    />\n\n    <FormDelivery  \n      v-if=\"tabOrderCreate === 'delivery'\" \n      :order=\"orders.state.current\"\n      :organization=\"orderOrganization[0]\" \n    />\n\n    <FormPayment  \n      v-if=\"tabOrderCreate === 'payment'\"\n      :order=\"orders.state.current\"  \n      :organization=\"orderOrganization[0]\" \n    />\n\n\n    <Block\n      class=\"mn-b-semi\"\n    >\n      <div class=\"h3 flex\">\n        <span class=\"mn-r-auto t-transp\">In total</span>\n        <span>{{ cartTotalPrice }} {{returnCurrency()}} </span  >\n      </div>\n    </Block>\n</div>\n\n\n</template>\n\n<script setup=\"props\">\n  import { computed, ref, defineProps, onMounted, reactive, toRefs, watch, getCurrentInstance } from 'vue'\n  import { useRoute, useRouter } from 'vue-router'\n\n\n  import Field from '@martyrs/src/components/Field/Field.vue'\n  import Button from \"@martyrs/src/components/Button/Button.vue\";  \n  import Tab from '@martyrs/src/components/Tab/Tab.vue'\n  import Popup from '@martyrs/src/components/Popup/Popup.vue';\n\timport Block from '@martyrs/src/components/Block/Block.vue';\n  import Feed from '@martyrs/src/components/Feed/Feed.vue'\n\n  import CardOrderItem  from '@martyrs/src/modules/orders/components/blocks/CardOrderItem.vue'\n  import CardPosition from '@martyrs/src/modules/products/components/blocks/CardPosition.vue';\n  import CardUser from '@martyrs/src/modules/auth/views/components/blocks/CardUser.vue'\n\n  import BlockSearch from '@martyrs/src/modules/core/views/components/blocks/BlockSearch.vue'\n\n  import FormSelectCustomer from '@martyrs/src/modules/orders/components/forms/FormSelectCustomer.vue'\n  import FormDelivery from '@martyrs/src/modules/orders/components/sections/FormDelivery.vue'\n  import FormPayment from '@martyrs/src/modules/orders/components/sections/FormPayment.vue'\n\n  // Import your store\n  import { useStore } from '@martyrs/src/modules/core/views/store/core.store.js';\n  import * as auth from '@martyrs/src/modules/auth/views/store/auth.js';\n  import * as orders from '@martyrs/src/modules/orders/store/orders.js';\n  import * as organizations from '@martyrs/src/modules/organizations/store/organizations.js';\n  import * as products from '@martyrs/src/modules/products/store/products.js';\n  import variants from '@martyrs/src/modules/products/store/variants.store.js';\n\n  import customers from '@martyrs/src/modules/orders/store/customers.store';\n\n  import { useGlobalMixins } from '@martyrs/src/modules/core/views/mixins/mixins.js';\n\n  const store = useStore()\n\t\n  // Accessing router\n  const route = useRoute()\n  const router = useRouter()\n  const { proxy } = getCurrentInstance()\n  const { formatPrice, returnCurrency } = useGlobalMixins()\n\n   orders.mutations.resetOrder(orders.state.current)\n\n  let cartTotalPrice = computed(() => {\n    return Number(orders.state.current.positions.reduce((total, product) => {\n      if (product.listing === 'rent' && product.date?.start && product.date?.end) {\n        const start = new Date(product.date.start);\n        const end = new Date(product.date.end);\n        const days = Math.ceil(Math.abs(end - start) / (1000 * 60 * 60 * 24)) + 1;\n        return total + product.price * product.quantity * days;\n      } else {\n        return total + product.price * product.quantity;\n      }\n    }, 0));\n  })\n\n  // Tab\n  const tabOrderCreate = ref('positions')\n\n  // Popup\n  const isOpenProductsPopup = ref(false);\n  const isVariantsPopupOpen = ref(false);\n  const selectedProduct = ref(null);\n\n  function openProductsPopup() {\n    isOpenProductsPopup.value = true;\n  }\n\n  function closeProductsPopup() {\n    isOpenProductsPopup.value = false;\n  }\n\n  function closeVariantsPopup() {\n    isVariantsPopupOpen.value = false;\n    selectedProduct.value = null;\n  }\n\n  function selectProduct(product) {\n    selectedProduct.value = product;\n    closeProductsPopup();\n    \n    // If product has only one variant, add it directly without showing popup\n    if (product.variants && product.variants.length === 1) {\n      addVariantToOrder(product.variants[0]);\n      return;\n    }\n    \n    // If product has multiple variants or no variants defined, show popup\n    isVariantsPopupOpen.value = true;\n  }\n\n  function formatProductName(product, variant) {\n    if (!variant || product.variants?.length === 1 && !(variant.attributes?.length))\n      return product.name;\n\n    const attrs = variant.attributes?.map(a => a.value).filter(Boolean);\n    return attrs?.length\n      ? `${product.name} / ${attrs.join(' / ')}`\n      : `${product.name} / ${variant.name}`;\n  }\n\n  async function addVariantToOrder(variant) {\n    try {\n      let selectedDates = null;\n      \n      // Если товар для аренды, сначала выбираем даты\n      if (selectedProduct.value.listing === 'rent') {\n        selectedDates = await proxy.$dateSelector(\n          selectedProduct.value._id,\n          variant._id,\n          1,\n          variant.price || selectedProduct.value.price\n        );\n        \n        if (!selectedDates) {\n          // Если отменили выбор дат, возвращаемся к выбору вариантов\n          return;\n        }\n      }\n      \n      const position = {\n        _id: selectedProduct.value._id,\n        images: variant.images?.length > 0 ? variant.images : selectedProduct.value.images,\n        name: formatProductName(selectedProduct.value, variant),\n        listing: selectedProduct.value.listing,\n        price: variant.price || selectedProduct.value.price,\n        quantity: 1,\n        unit: variant.unit || selectedProduct.value.unit,\n        date: selectedDates,\n        variant: variant._id,\n        org_id: route.params._id\n      };\n\n      store.core.actions.add(orders.state.current.positions, position);\n      closeVariantsPopup();\n    } catch (error) {\n      console.error('Error adding variant to order:', error);\n    }\n  }\n\n\n  // Функции управления позициями заказа\n  function incrementOrderItemQuantity(productId, variantId) {\n    const orderItem = orders.state.current.positions.find(item => \n      item._id === productId && item.variant === variantId\n    );\n    \n    if (orderItem) {\n      orderItem.quantity++;\n    }\n  }\n\n  function decrementOrderItemQuantity(productId, variantId) {\n    const orderItem = orders.state.current.positions.find(item => \n      item._id === productId && item.variant === variantId\n    );\n    \n    if (orderItem) {\n      orderItem.quantity--;\n      \n      if (orderItem.quantity < 1) {\n        removeOrderItem(productId, variantId);\n      }\n    }\n  }\n\n  function removeOrderItem(productId, variantId) {\n    const itemIndex = orders.state.current.positions.findIndex(item => \n      item._id === productId && item.variant === variantId\n    );\n    \n    if (itemIndex > -1) {\n      orders.state.current.positions.splice(itemIndex, 1);\n    }\n  }\n\n  function updateOrderRentDates(productId, variantId, dates) {\n    const orderItem = orders.state.current.positions.find(item => \n      item._id === productId && item.variant === variantId\n    );\n    \n    if (orderItem) {\n      orderItem.date = dates;\n    }\n  }\n\n  // Data\n  let order = ref(null)\n\n  async function onSubmit() {\n\n    orders.state.current.creator = {\n      type: 'User',\n      target: auth.state.user._id\n    }\n\n    orders.state.current.owner = {\n      type: 'Organization',\n      target: route.params._id,\n    }\n\n    orders.state.current.customer = {\n      type: 'Customer',\n      target: orders.state.current.customer._id || null,\n    }\n\n    order.value = await orders.actions.create(orders.state.current)\n  }\n\n  function redirectTo () {\n    router.push({\n      name: route.meta.context === 'backoffice' ? 'BackofficeOrderEdit' : 'OrganizationOrderEdit',\n      params: { \n        order: order.value._id,\n        _id: route.params._id\n      } \n    })\n  }\n\n  const orderOrganization = ref({})\n\n\n\n  onMounted(async() => {\n\n    orderOrganization.value = await organizations.actions.read({\n      _id: route.params._id,\n      lookup: ['spots']\n    })\n\n    // await orders.actions.fetchOrder(route.params.id) // Implement this action in your store\n\n    // order.value = orders.state.current\n  })\n\n</script>\n\n\n<style lang=\"scss\">\n\n.vue-select {\n  width: inherit;\n\n  margin-right: 1rem;\n}\n.vue-select-header {\n  height: 3rem;\n}\n</style>\n"],"names":["orders.mutations","orders.state","auth.state","orders.actions","organizations.actions"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuOE,UAAM,QAAQ,SAAQ;AAGtB,UAAM,QAAQ,SAAQ;AACtB,UAAM,SAAS,UAAS;AACxB,UAAM,EAAE,MAAK,IAAK,mBAAkB;AACpC,UAAM,EAAE,aAAa,eAAc,IAAK,gBAAe;AAEtDA,cAAiB,WAAWC,MAAa,OAAO;AAEjD,QAAI,iBAAiB,SAAS,MAAM;AAClC,aAAO,OAAOA,MAAa,QAAQ,UAAU,OAAO,CAAC,OAAO,YAAY;AACtE,YAAI,QAAQ,YAAY,UAAU,QAAQ,MAAM,SAAS,QAAQ,MAAM,KAAK;AAC1E,gBAAM,QAAQ,IAAI,KAAK,QAAQ,KAAK,KAAK;AACzC,gBAAM,MAAM,IAAI,KAAK,QAAQ,KAAK,GAAG;AACrC,gBAAM,OAAO,KAAK,KAAK,KAAK,IAAI,MAAM,KAAK,KAAK,MAAO,KAAK,KAAK,GAAG,IAAI;AACxE,iBAAO,QAAQ,QAAQ,QAAQ,QAAQ,WAAW;AAAA,QACpD,OAAO;AACL,iBAAO,QAAQ,QAAQ,QAAQ,QAAQ;AAAA,QACzC;AAAA,MACF,GAAG,CAAC,CAAC;AAAA,IACP,CAAC;AAGD,UAAM,iBAAiB,IAAI,WAAW;AAGtC,UAAM,sBAAsB,IAAI,KAAK;AACrC,UAAM,sBAAsB,IAAI,KAAK;AACrC,UAAM,kBAAkB,IAAI,IAAI;AAEhC,aAAS,oBAAoB;AAC3B,0BAAoB,QAAQ;AAAA,IAC9B;AAEA,aAAS,qBAAqB;AAC5B,0BAAoB,QAAQ;AAAA,IAC9B;AAEA,aAAS,qBAAqB;AAC5B,0BAAoB,QAAQ;AAC5B,sBAAgB,QAAQ;AAAA,IAC1B;AAEA,aAAS,cAAc,SAAS;AAC9B,sBAAgB,QAAQ;AACxB,yBAAkB;AAGlB,UAAI,QAAQ,YAAY,QAAQ,SAAS,WAAW,GAAG;AACrD,0BAAkB,QAAQ,SAAS,CAAC,CAAC;AACrC;AAAA,MACF;AAGA,0BAAoB,QAAQ;AAAA,IAC9B;AAEA,aAAS,kBAAkB,SAAS,SAAS;AAC3C,UAAI,CAAC,WAAW,QAAQ,UAAU,WAAW,KAAK,CAAE,QAAQ,YAAY;AACtE,eAAO,QAAQ;AAEjB,YAAM,QAAQ,QAAQ,YAAY,IAAI,OAAK,EAAE,KAAK,EAAE,OAAO,OAAO;AAClE,aAAO,OAAO,SACV,GAAG,QAAQ,IAAI,MAAM,MAAM,KAAK,KAAK,CAAC,KACtC,GAAG,QAAQ,IAAI,MAAM,QAAQ,IAAI;AAAA,IACvC;AAEA,mBAAe,kBAAkB,SAAS;AACxC,UAAI;AACF,YAAI,gBAAgB;AAGpB,YAAI,gBAAgB,MAAM,YAAY,QAAQ;AAC5C,0BAAgB,MAAM,MAAM;AAAA,YAC1B,gBAAgB,MAAM;AAAA,YACtB,QAAQ;AAAA,YACR;AAAA,YACA,QAAQ,SAAS,gBAAgB,MAAM;AAAA,UACjD;AAEQ,cAAI,CAAC,eAAe;AAElB;AAAA,UACF;AAAA,QACF;AAEA,cAAM,WAAW;AAAA,UACf,KAAK,gBAAgB,MAAM;AAAA,UAC3B,QAAQ,QAAQ,QAAQ,SAAS,IAAI,QAAQ,SAAS,gBAAgB,MAAM;AAAA,UAC5E,MAAM,kBAAkB,gBAAgB,OAAO,OAAO;AAAA,UACtD,SAAS,gBAAgB,MAAM;AAAA,UAC/B,OAAO,QAAQ,SAAS,gBAAgB,MAAM;AAAA,UAC9C,UAAU;AAAA,UACV,MAAM,QAAQ,QAAQ,gBAAgB,MAAM;AAAA,UAC5C,MAAM;AAAA,UACN,SAAS,QAAQ;AAAA,UACjB,QAAQ,MAAM,OAAO;AAAA,QAC7B;AAEM,cAAM,KAAK,QAAQ,IAAIA,MAAa,QAAQ,WAAW,QAAQ;AAC/D,2BAAkB;AAAA,MACpB,SAAS,OAAO;AACd,gBAAQ,MAAM,kCAAkC,KAAK;AAAA,MACvD;AAAA,IACF;AAIA,aAAS,2BAA2B,WAAW,WAAW;AACxD,YAAM,YAAYA,MAAa,QAAQ,UAAU;AAAA,QAAK,UACpD,KAAK,QAAQ,aAAa,KAAK,YAAY;AAAA,MACjD;AAEI,UAAI,WAAW;AACb,kBAAU;AAAA,MACZ;AAAA,IACF;AAEA,aAAS,2BAA2B,WAAW,WAAW;AACxD,YAAM,YAAYA,MAAa,QAAQ,UAAU;AAAA,QAAK,UACpD,KAAK,QAAQ,aAAa,KAAK,YAAY;AAAA,MACjD;AAEI,UAAI,WAAW;AACb,kBAAU;AAEV,YAAI,UAAU,WAAW,GAAG;AAC1B,0BAAgB,WAAW,SAAS;AAAA,QACtC;AAAA,MACF;AAAA,IACF;AAEA,aAAS,gBAAgB,WAAW,WAAW;AAC7C,YAAM,YAAYA,MAAa,QAAQ,UAAU;AAAA,QAAU,UACzD,KAAK,QAAQ,aAAa,KAAK,YAAY;AAAA,MACjD;AAEI,UAAI,YAAY,IAAI;AAClBA,cAAa,QAAQ,UAAU,OAAO,WAAW,CAAC;AAAA,MACpD;AAAA,IACF;AAEA,aAAS,qBAAqB,WAAW,WAAW,OAAO;AACzD,YAAM,YAAYA,MAAa,QAAQ,UAAU;AAAA,QAAK,UACpD,KAAK,QAAQ,aAAa,KAAK,YAAY;AAAA,MACjD;AAEI,UAAI,WAAW;AACb,kBAAU,OAAO;AAAA,MACnB;AAAA,IACF;AAGA,QAAI,QAAQ,IAAI,IAAI;AAEpB,mBAAe,WAAW;AAExBA,YAAa,QAAQ,UAAU;AAAA,QAC7B,MAAM;AAAA,QACN,QAAQC,QAAW,KAAK;AAAA,MAC9B;AAEID,YAAa,QAAQ,QAAQ;AAAA,QAC3B,MAAM;AAAA,QACN,QAAQ,MAAM,OAAO;AAAA,MAC3B;AAEIA,YAAa,QAAQ,WAAW;AAAA,QAC9B,MAAM;AAAA,QACN,QAAQA,MAAa,QAAQ,SAAS,OAAO;AAAA,MACnD;AAEI,YAAM,QAAQ,MAAME,UAAe,OAAOF,MAAa,OAAO;AAAA,IAChE;AAEA,aAAS,aAAc;AACrB,aAAO,KAAK;AAAA,QACV,MAAM,MAAM,KAAK,YAAY,eAAe,wBAAwB;AAAA,QACpE,QAAQ;AAAA,UACN,OAAO,MAAM,MAAM;AAAA,UACnB,KAAK,MAAM,OAAO;AAAA,QAC1B;AAAA,MACA,CAAK;AAAA,IACH;AAEA,UAAM,oBAAoB,IAAI,CAAA,CAAE;AAIhC,cAAU,YAAW;AAEnB,wBAAkB,QAAQ,MAAMG,QAAsB,KAAK;AAAA,QACzD,KAAK,MAAM,OAAO;AAAA,QAClB,QAAQ,CAAC,OAAO;AAAA,MACtB,CAAK;AAAA,IAKH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"OrderCreateBackoffice.vue.js","sources":["../../../../../../../src/modules/orders/components/pages/OrderCreateBackoffice.vue"],"sourcesContent":["<template>\n  <div class=\"flex flex-column pd-thin\">\n    <SectionPageTitle\n      title=\"Add Order\"\n      :actions=\"[\n        { method: async () => { await onSubmit(); redirectTo(); }, label: 'Save Order' }\n      ]\"\n      class=\"mn-b-thin\"\n    />\n\n    <!-- Выбор организации (backoffice context) -->\n    <Block v-if=\"!route.params._id\" title=\"Organization\" class=\"mn-b-small\">\n      <Card\n        v-if=\"selectedOrganization\"\n        :photo=\"selectedOrganization.profile?.photo\"\n        :title=\"selectedOrganization.profile?.name\"\n        classImage=\"h-3r w-3r radius-small o-hidden flex-shrink-0\"\n        @click=\"() => { selectedOrganization = null }\"\n        class=\"h-4r w-100 bg-white pd-thin radius-medium mn-b-thin flex-v-center flex-nowrap flex gap-thin cursor-pointer\"\n      />\n      <section v-else class=\"o-x-hidden o-y-scroll\">\n        <Feed\n          :showLoadMore=\"false\"\n          :search=\"{ placeholder: 'Search organization...', class: 'bg-white mn-b-thin' }\"\n          :states=\"{ empty: { title: 'No organizations', description: 'No organizations found.' } }\"\n          :store=\"{ read: (options) => organizations.actions.read(options), state: null }\"\n          :options=\"{ user: auth.state.user._id }\"\n          v-slot=\"{ items }\"\n        >\n          <Card\n            v-for=\"org in items\"\n            :key=\"org._id\"\n            :photo=\"org.profile?.photo\"\n            :title=\"org.profile?.name\"\n            classImage=\"h-3r w-3r radius-small o-hidden flex-shrink-0\"\n            @click=\"() => { selectedOrganization = org }\"\n            class=\"h-4r bg-white pd-thin radius-medium w-100 mn-b-thin cursor-pointer flex-v-center flex-nowrap flex gap-thin\"\n          />\n        </Feed>\n      </section>\n    </Block>\n\n    <Tab\n      v-model:selected=\"tabOrderCreate\"\n      :tabs=\"[\n        {name: 'Positions', value: 'positions'},\n        {name: 'Customer', value: 'customer'},\n        {name: 'Delivery', value: 'delivery'},\n        {name: 'Payment', value: 'payment'}\n      ]\"\n      class=\"fw-medium radius-medium bg-light pd-thin mn-b-small\"\n    />\n\n    <Popup\n      @close-popup=\"closeProductsPopup\"\n      :isPopupOpen=\"isOpenProductsPopup\"\n      :align=\"isPhone() || isTablet() ? 'bottom center' : 'center center'\"\n      class=\"bg-white flex flex-column radius-big pd-medium pos-relative\"\n      :class=\"\n        isPhone() || isTablet()\n          ? 'w-100 radius-zero radius-tr-medium radius-tl-medium h-max-80'\n          : 'w-min-30r w-max-30r'\n      \"\n    >\n\n      <h3 class=\"mn-b-small\">Add to order</h3>\n\n      <div class=\"bg-light h-max-100 mn-b-thin o-scroll pd-medium radius-big\">\n        <Feed\n          :showLoadMore=\"false\"\n          :search=\"{\n            placeholder: 'Search products...',\n            class: 'bg-white mn-b-thin'\n          }\"\n          :states=\"{\n            empty: {\n              title: 'No Products Found',\n              description: 'Currently, there are no such products available.'\n            },\n            skeleton: {\n              hide: true\n            }\n          }\"\n          :store=\"{\n            read: (options) => products.actions.read(options),\n            state: null\n          }\"\n          :options=\"{\n            owner: orgId\n          }\"\n          v-slot=\"{ \n            items \n          }\"\n          class=\"\"\n        >\n          <CardOrderItem\n            v-for=\"(product, index) in items\" \n            :key=\"`${product._id}_${index}`\"\n            :editable=\"false\" \n            :productId=\"product._id\"\n            :images=\"product.images\"\n            :name=\"product.name\"\n            @click=\"() => selectProduct(product)\"\n            class=\"bg-white pd-thin radius-medium w-100 mn-b-thin\"\n          />\n        </Feed>\n      </div>\n    </Popup>\n\n    <!-- Popup for selecting variant of the product -->\n    <Popup\n      title=\"Select variant\"\n      @close-popup=\"closeVariantsPopup\"\n      :isPopupOpen=\"isVariantsPopupOpen\"\n      :align=\"isPhone() || isTablet() ? 'bottom center' : 'center center'\"\n      class=\"bg-white w-100 radius-medium pd-medium\"\n      :class=\"\n        isPhone() || isTablet()\n          ? 'radius-zero radius-tr-medium radius-tl-medium'\n          : 'w-max-30r'\n      \"\n    >\n      <Feed\n        :store=\"variants\"\n        :options=\"{\n          product: selectedProduct?._id,\n        }\"\n        :skeleton=\"{\n          structure: [\n            { block: 'text', size: 'small' },\n            { block: 'text', size: 'medium' },\n            { block: 'text', size: 'small' }\n          ]\n        }\"\n        :states=\"{\n          empty: {\n            title: 'No variants',\n            description: 'Create your first variant'\n          }\n        }\"\n         v-slot=\"{ items }\"\n      >\n        <div class=\"gap-thin flex flex-column\">\n          <div \n            v-for=\"(variant, index) in items\" \n            :key=\"index\"\n            @click=\"addVariantToOrder(variant)\"\n            class=\"w-100 cursor-pointer hover:scale-[1.05] bg-light pd-small radius-small flex-v-center flex-nowrap flex gap-thin\"\n          >\n            <div v-if=\"variant.images && variant.images.length\" class=\"aspect-1x1 h-3r radius-small o-hidden\">\n              <img \n                :src=\"(FILE_SERVER_URL || '') + variant.images[0]\" \n                class=\"w-100 h-100 object-fit-cover\"\n              />\n            </div>\n            <div>\n              <p class=\"fw-medium\">{{ variant.name || 'Default variant' }}</p>\n              <p v-if=\"variant.attributes && variant.attributes.length\" class=\"t-small opacity-50\">\n                {{ variant.attributes.map(attr => `${attr.name}: ${attr.value}`).join(', ') }}\n              </p>\n            </div>\n            <p class=\"mn-l-auto\">{{ formatPrice(variant.price || variant.cost) }}</p>\n          </div>\n        </div>\n      </Feed>\n    </Popup>\n\n    <Block\n      v-if=\"tabOrderCreate === 'positions'\"\n      title=\"Positions\"\n      :actions=\"[{\n        label: '+',\n        function: () => openProductsPopup()\n      }]\"\n      class=\"mn-b-small\"\n    >\n      <span \n        v-if=\"orders.state.current.positions.length === 0\" \n        class=\"w-100\"\n      >\n        No positions added yet\n      </span> \n\n      <CardOrderItem\n        v-for=\"(product, index) in orders.state.current.positions\" \n        :key=\"`${product._id}_${product.variant || 'no-variant'}_${index}`\"\n        :editable=\"true\" \n        :productId=\"product._id\"\n        :variantId=\"product.variant\"\n        :images=\"product.images\"\n        :name=\"product.name\"\n        :quantity=\"product.quantity\"\n        :unit=\"product.unit\"\n        :dates=\"product.date\"\n        :listing=\"product.listing\"\n        :rentPeriod=\"product.rentPeriod || 'day'\"\n        :price=\"product.price\"\n        :increase=\"() => incrementOrderItemQuantity(product._id, product.variant)\"\n        :decrease=\"() => decrementOrderItemQuantity(product._id, product.variant)\"\n        :remove=\"() => removeOrderItem(product._id, product.variant)\"\n        @updateRentDates=\"(productId, variantId, dates) => updateOrderRentDates(productId, variantId, dates)\"\n        class=\"mn-b-thin pd-thin radius-medium bg-white\"\n      /> \n    </Block>\n\n    <FormSelectCustomer\n      v-if=\"tabOrderCreate === 'customer'\"\n      v-model:customer=\"orders.state.current.customer\"\n      :orgId=\"orgId\"\n      class=\"mn-b-semi\"\n    />\n\n    <FormDelivery  \n      v-if=\"tabOrderCreate === 'delivery'\" \n      :order=\"orders.state.current\"\n      :organization=\"orderOrganization[0]\" \n    />\n\n    <FormPayment  \n      v-if=\"tabOrderCreate === 'payment'\"\n      :order=\"orders.state.current\"  \n      :organization=\"orderOrganization[0]\" \n    />\n\n\n    <Block\n      class=\"mn-b-semi\"\n    >\n      <div class=\"h3 flex\">\n        <span class=\"mn-r-auto opacity-50\">In total</span>\n        <span>{{ cartTotalPrice }} {{returnCurrency()}} </span  >\n      </div>\n    </Block>\n</div>\n\n\n</template>\n\n<script setup=\"props\">\n  import { computed, ref, defineProps, onMounted, reactive, toRefs, watch, getCurrentInstance } from 'vue'\n  import { useRoute, useRouter } from 'vue-router'\n\n\n  import Field from '@martyrs/src/components/Field/Field.vue'\n  import Button from \"@martyrs/src/components/Button/Button.vue\";\n  import Tab from '@martyrs/src/components/Tab/Tab.vue'\n  import SectionPageTitle from '@martyrs/src/modules/core/views/components/sections/SectionPageTitle.vue'\n  import Popup from '@martyrs/src/components/Popup/Popup.vue';\n\timport Block from '@martyrs/src/components/Block/Block.vue';\n  import Feed from '@martyrs/src/components/Feed/Feed.vue'\n\n  import CardOrderItem  from '@martyrs/src/modules/orders/components/blocks/CardOrderItem.vue'\n  import CardPosition from '@martyrs/src/modules/products/components/blocks/CardPosition.vue';\n  import CardUser from '@martyrs/src/modules/core/views/components/blocks/CardUser.vue'\n  import Card from '@martyrs/src/modules/core/views/components/blocks/Card.vue'\n\n  import BlockSearch from '@martyrs/src/modules/core/views/components/blocks/BlockSearch.vue'\n\n  import FormSelectCustomer from '@martyrs/src/modules/orders/components/forms/FormSelectCustomer.vue'\n  import FormDelivery from '@martyrs/src/modules/orders/components/sections/FormDelivery.vue'\n  import FormPayment from '@martyrs/src/modules/orders/components/sections/FormPayment.vue'\n\n  // Import your store\n  import { useStore } from '@martyrs/src/modules/core/views/store/core.store.js';\n  import * as auth from '@martyrs/src/modules/auth/views/store/auth.js';\n  import * as orders from '@martyrs/src/modules/orders/store/orders.js';\n  import * as organizations from '@martyrs/src/modules/organizations/store/organizations.js';\n  import * as products from '@martyrs/src/modules/products/store/products.js';\n  import variants from '@martyrs/src/modules/products/store/variants.store.js';\n\n  import customers from '@martyrs/src/modules/orders/store/customers.store';\n\n  import { calcRentTotalPrice } from '@martyrs/src/modules/orders/utils/rent-price.js';\n  import { useGlobalMixins } from '@martyrs/src/modules/core/views/mixins/mixins.js';\n\n  const store = useStore()\n\t\n  // Accessing router\n  const route = useRoute()\n  const router = useRouter()\n  const { proxy } = getCurrentInstance()\n  const { formatPrice, returnCurrency, isPhone, isTablet } = useGlobalMixins()\n\n   orders.mutations.resetOrder(orders.state.current)\n\n  // Organization selection (backoffice context without route.params._id)\n  const selectedOrganization = ref(null)\n  const orgId = computed(() => selectedOrganization.value?._id || route.params._id)\n\n  let cartTotalPrice = computed(() => {\n    return Number(orders.state.current.positions.reduce((total, product) => {\n      if (product.listing === 'rent' && product.date?.start && product.date?.end) {\n        return total + calcRentTotalPrice(\n          product.price,\n          product.quantity,\n          product.date.start,\n          product.date.end,\n          product.rentPeriod || 'day'\n        );\n      } else {\n        return total + product.price * product.quantity;\n      }\n    }, 0));\n  })\n\n  // Tab\n  const tabOrderCreate = ref('positions')\n\n  // Popup\n  const isOpenProductsPopup = ref(false);\n  const isVariantsPopupOpen = ref(false);\n  const selectedProduct = ref(null);\n\n  function openProductsPopup() {\n    isOpenProductsPopup.value = true;\n  }\n\n  function closeProductsPopup() {\n    isOpenProductsPopup.value = false;\n  }\n\n  function closeVariantsPopup() {\n    isVariantsPopupOpen.value = false;\n    selectedProduct.value = null;\n  }\n\n  function selectProduct(product) {\n    selectedProduct.value = product;\n    closeProductsPopup();\n    \n    // If product has only one variant, add it directly without showing popup\n    if (product.variants && product.variants.length === 1) {\n      addVariantToOrder(product.variants[0]);\n      return;\n    }\n    \n    // If product has multiple variants or no variants defined, show popup\n    isVariantsPopupOpen.value = true;\n  }\n\n  function formatProductName(product, variant) {\n    if (!variant || product.variants?.length === 1 && !(variant.attributes?.length))\n      return product.name;\n\n    const attrs = variant.attributes?.map(a => a.value).filter(Boolean);\n    return attrs?.length\n      ? `${product.name} / ${attrs.join(' / ')}`\n      : `${product.name} / ${variant.name}`;\n  }\n\n  async function addVariantToOrder(variant) {\n    try {\n      let selectedDates = null;\n      \n      // Если товар для аренды, сначала выбираем даты\n      if (selectedProduct.value.listing === 'rent') {\n        const rentPeriod = selectedProduct.value.rentPeriod || 'day'\n        const enableTime = ['hour', '4hours', 'flat'].includes(rentPeriod)\n        selectedDates = await proxy.$dateSelector(\n          selectedProduct.value._id,\n          variant._id,\n          1,\n          variant.price || selectedProduct.value.price,\n          { enableTime, periodType: rentPeriod }\n        );\n        \n        if (!selectedDates) {\n          // Если отменили выбор дат, возвращаемся к выбору вариантов\n          return;\n        }\n      }\n      \n      const position = {\n        _id: selectedProduct.value._id,\n        images: variant.images?.length > 0 ? variant.images : selectedProduct.value.images,\n        name: formatProductName(selectedProduct.value, variant),\n        listing: selectedProduct.value.listing,\n        price: variant.price || selectedProduct.value.price,\n        quantity: 1,\n        unit: variant.unit || selectedProduct.value.unit,\n        date: selectedDates,\n        variant: variant._id,\n        rentPeriod: selectedProduct.value.rentPeriod || 'day',\n        org_id: orgId.value\n      };\n\n      store.core.actions.add(orders.state.current.positions, position);\n      closeVariantsPopup();\n    } catch (error) {\n      console.error('Error adding variant to order:', error);\n    }\n  }\n\n\n  // Функции управления позициями заказа\n  function incrementOrderItemQuantity(productId, variantId) {\n    const orderItem = orders.state.current.positions.find(item => \n      item._id === productId && item.variant === variantId\n    );\n    \n    if (orderItem) {\n      orderItem.quantity++;\n    }\n  }\n\n  function decrementOrderItemQuantity(productId, variantId) {\n    const orderItem = orders.state.current.positions.find(item => \n      item._id === productId && item.variant === variantId\n    );\n    \n    if (orderItem) {\n      orderItem.quantity--;\n      \n      if (orderItem.quantity < 1) {\n        removeOrderItem(productId, variantId);\n      }\n    }\n  }\n\n  function removeOrderItem(productId, variantId) {\n    const itemIndex = orders.state.current.positions.findIndex(item => \n      item._id === productId && item.variant === variantId\n    );\n    \n    if (itemIndex > -1) {\n      orders.state.current.positions.splice(itemIndex, 1);\n    }\n  }\n\n  function updateOrderRentDates(productId, variantId, dates) {\n    const orderItem = orders.state.current.positions.find(item => \n      item._id === productId && item.variant === variantId\n    );\n    \n    if (orderItem) {\n      orderItem.date = dates;\n    }\n  }\n\n  // Data\n  let order = ref(null)\n\n  async function onSubmit() {\n\n    orders.state.current.creator = {\n      type: 'User',\n      target: auth.state.user._id\n    }\n\n    orders.state.current.owner = {\n      type: 'Organization',\n      target: orgId.value,\n    }\n\n    orders.state.current.customer = orders.state.current.customer._id\n      ? { type: 'Customer', target: orders.state.current.customer._id }\n      : { type: 'Customer', target: null, phone: orders.state.current.customer.phone, email: orders.state.current.customer.email, profile: { name: orders.state.current.customer.profile?.name } }\n\n    order.value = await orders.actions.create(orders.state.current)\n  }\n\n  function redirectTo () {\n    router.push({\n      name: route.meta.context === 'backoffice' ? 'BackofficeOrderEdit' : 'OrganizationOrderEdit',\n      params: {\n        order: order.value._id,\n        _id: orgId.value\n      } \n    })\n  }\n\n  const orderOrganization = ref({})\n\n\n\n  watch(selectedOrganization, async (org) => {\n    if (org) {\n      orderOrganization.value = await organizations.actions.read({\n        _id: org._id,\n        lookup: ['spots']\n      })\n    }\n  })\n\n  onMounted(async() => {\n    if (route.params._id) {\n      orderOrganization.value = await organizations.actions.read({\n        _id: route.params._id,\n        lookup: ['spots']\n      })\n      selectedOrganization.value = orderOrganization.value[0]\n    } else {\n      const orgs = await organizations.actions.read({ user: auth.state.user._id })\n      if (orgs?.length) {\n        selectedOrganization.value = orgs[0]\n      }\n    }\n\n    // await orders.actions.fetchOrder(route.params.id) // Implement this action in your store\n\n    // order.value = orders.state.current\n  })\n\n</script>\n\n\n<style lang=\"scss\">\n\n.vue-select {\n  width: inherit;\n\n  margin-right: 1rem;\n}\n.vue-select-header {\n  height: 3rem;\n}\n</style>\n"],"names":["orders.mutations","orders.state","auth.state","orders.actions","organizations.actions"],"mappings":"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"}

package/dist/martyrs/src/modules/orders/components/pages/Orders.vue.js

@@ -1,24 +1,26 @@
-import { ref, computed, resolveComponent, createElementBlock, openBlock, createBlock, createCommentVNode, createVNode, unref, withCtx, createElementVNode, toDisplayString, normalizeClass, Fragment, renderList } from "vue";
-import { useRoute } from "vue-router";
-import _sfc_main$3 from "../../../../components/Tab/Tab.vue2.js";
+import { ref, computed, resolveComponent, createElementBlock, openBlock, createBlock, createCommentVNode, createVNode, unref, withCtx, createElementVNode, normalizeClass, Fragment, renderList } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import _sfc_main$4 from "../../../../components/Tab/Tab.vue2.js";
 import _sfc_main$2 from "../../../../components/Block/Block.vue.js";
-import _sfc_main$4 from "../../../../components/Feed/Feed.vue.js";
+import _sfc_main$5 from "../../../../components/Feed/Feed.vue.js";
 import { state, actions, getters } from "../../store/orders.js";
 import { state as state$1 } from "../../../auth/views/store/auth.js";
-import _sfc_main$6 from "../blocks/CardOrderUser.vue.js";
-import _sfc_main$5 from "../blocks/CardOrderBackoffice.vue.js";
+import _sfc_main$3 from "../../../core/views/components/blocks/CardStat.vue.js";
+import _sfc_main$7 from "../blocks/CardOrderUser.vue.js";
+import _sfc_main$6 from "../blocks/CardOrderBackoffice.vue.js";
 import _sfc_main$1 from "../../../core/views/components/sections/SectionPageTitle.vue.js";
 import { useGlobalMixins } from "../../../core/views/mixins/mixins.js";
+import { useStore } from "../../../core/views/store/core.store.js";
 const _hoisted_1 = { class: "mobile:pd-thin pd-medium" };
-const _hoisted_2 = { class: "gap-micro flex-nowrap flex" };
-const _hoisted_3 = { class: "w-100 bg-white radius-small pd-small" };
-const _hoisted_4 = { class: "w-100 bg-white radius-small pd-small" };
-const _hoisted_5 = { class: "w-100 bg-white radius-small pd-small" };
+const _hoisted_2 = { class: "flex gap-micro mobile:flex-column" };
 const _sfc_main = {
   __name: "Orders",
   setup(__props) {
+    const store = useStore();
     const route = useRoute();
+    const router = useRouter();
     const { returnCurrency, formatPrice, formatDate } = useGlobalMixins();
+    const orderStatuses = store.core.state.options?.orders?.statuses || [];
     const tab = ref("all");
     const tabs = [
       { label: "All Orders", value: "all" },
@@ -28,9 +30,9 @@ const _sfc_main = {
     const tabStatusFilter = computed(() => {
       switch (tab.value) {
         case "in_progress":
-          return ["created", "confirmed", "processing", "preparing", "shipped"];
+          return ["created", "confirmed", "in_progress"];
         case "returns":
-          return ["cancelled", "canceled", "returned"];
+          return ["canceled"];
         default:
           return null;
       }
@@ -38,6 +40,9 @@ const _sfc_main = {
     const totalPrice = computed(() => {
       return calculateTotalSum(state.all);
     });
+    const totalPricePaid = computed(() => {
+      return calculateSum(state.all, "paid");
+    });
     const totalPriceUnpaid = computed(() => {
       return calculateSum(state.all, "unpaid");
     });
@@ -61,8 +66,8 @@ const _sfc_main = {
           key: 0,
           title: "Orders",
           actions: [
-            unref(route).meta.context === "backoffice" && { to: { name: "BackofficeAdminCreateOrder" }, label: "Create Order" },
-            unref(route).meta.context === "organization" && { to: { name: "OrganizationAdminCreateOrder", params: { _id: unref(route).params._id } }, label: "Create Order" }
+            unref(route).meta.context === "backoffice" && { method: () => unref(router).push({ name: "BackofficeAdminCreateOrder" }), label: "+ Add Order" },
+            unref(route).meta.context === "organization" && { method: () => unref(router).push({ name: "OrganizationAdminCreateOrder", params: { _id: unref(route).params._id } }), label: "+ Add Order" }
           ].filter(Boolean),
           class: "mn-b-small"
         }, null, 8, ["actions"])) : createCommentVNode("", true),
@@ -73,23 +78,23 @@ const _sfc_main = {
         }, {
           default: withCtx(() => [
             createElementVNode("div", _hoisted_2, [
-              createElementVNode("div", _hoisted_3, [
-                _cache[1] || (_cache[1] = createElementVNode("p", { class: "mn-b-thin" }, "Total", -1)),
-                createElementVNode("h3", null, toDisplayString(unref(formatPrice)(totalPrice.value)), 1)
-              ]),
-              createElementVNode("div", _hoisted_4, [
-                _cache[2] || (_cache[2] = createElementVNode("p", { class: "mn-b-thin" }, "Paid", -1)),
-                createElementVNode("h3", null, toDisplayString(unref(formatPrice)(totalPriceUnpaid.value)), 1)
-              ]),
-              createElementVNode("div", _hoisted_5, [
-                _cache[3] || (_cache[3] = createElementVNode("p", { class: "mn-b-thin" }, "Unpaid", -1)),
-                createElementVNode("h3", null, toDisplayString(unref(formatPrice)(totalPrice.value)), 1)
-              ])
+              createVNode(_sfc_main$3, {
+                title: "Total",
+                value: unref(formatPrice)(totalPrice.value)
+              }, null, 8, ["value"]),
+              createVNode(_sfc_main$3, {
+                title: "Paid",
+                value: unref(formatPrice)(totalPricePaid.value)
+              }, null, 8, ["value"]),
+              createVNode(_sfc_main$3, {
+                title: "Unpaid",
+                value: unref(formatPrice)(totalPriceUnpaid.value)
+              }, null, 8, ["value"])
             ])
           ]),
           _: 1
         })) : createCommentVNode("", true),
-        unref(route).meta.context === "user" ? (openBlock(), createBlock(_sfc_main$3, {
+        unref(route).meta.context === "user" ? (openBlock(), createBlock(_sfc_main$4, {
           key: 2,
           tabs,
           selected: tab.value,
@@ -97,7 +102,7 @@ const _sfc_main = {
           classTab: "bg-light",
           class: "mn-b-small"
         }, null, 8, ["selected"])) : createCommentVNode("", true),
-        createVNode(_sfc_main$4, {
+        createVNode(_sfc_main$5, {
           search: true,
           states: {
             empty: {
@@ -114,7 +119,7 @@ const _sfc_main = {
             ...unref(route).meta.context === "user" && { customer: unref(route).params._id },
             ...tab.value !== "all" && { status: tabStatusFilter.value }
           },
-          class: normalizeClass(unref(route).meta.context === "user" ? "gap-small cols-1" : "gap-thin cols-3 mobile:cols-1")
+          class: normalizeClass(unref(route).meta.context === "user" ? "gap-small cols-1" : "gap-thin cols-3 tablet:cols-1 mobile:cols-1")
         }, {
           default: withCtx(({
             items
@@ -127,13 +132,14 @@ const _sfc_main = {
                 }
               }, {
                 default: withCtx(() => [
-                  createVNode(_sfc_main$5, {
+                  createVNode(_sfc_main$6, {
                     order,
                     user: state$1.user,
+                    statuses: unref(orderStatuses),
                     formatDate: unref(formatDate),
                     getTotal: getters.getTotal,
                     currency: unref(returnCurrency)()
-                  }, null, 8, ["order", "user", "formatDate", "getTotal", "currency"])
+                  }, null, 8, ["order", "user", "statuses", "formatDate", "getTotal", "currency"])
                 ]),
                 _: 2
               }, 1032, ["to"]);
@@ -143,7 +149,7 @@ const _sfc_main = {
                 to: `/users/${unref(route).params._id}/orders/${order._id}`
               }, {
                 default: withCtx(() => [
-                  createVNode(_sfc_main$6, {
+                  createVNode(_sfc_main$7, {
                     orderId: order._id,
                     status: order.status,
                     createdAt: order.createdAt,