@ozdao/martyrs 0.2.604 → 0.2.605

package/src/modules/orders/components/blocks/CardCustomer.vue

@@ -2,8 +2,8 @@
   <div class="bg-light pos-relative pd-medium radius-medium">
     <div class="mn-b-small flex">
       <div class="mn-r-auto">
-        <h3 class="mn-b-thin">{{ customer.profile?.name || customer.email || customer.phone || 'Unnamed Customer' }}</h3>
-        <p class="t-transp">{{ customer.email || customer.phone }}</p>
+        <h3 class="mn-b-thin">{{ customer.profile?.name || customer.email || formatPhone(customer.phone) || 'Unnamed Customer' }}</h3>
+        <p class="opacity-50">{{ customer.email || formatPhone(customer.phone) }}</p>
       </div>
       <div class="flex-center">
         <StatusBadge :value="customer.status" />
@@ -11,17 +11,17 @@
     </div>
 
     <div class="mn-b-thin pd-small bg-white radius-small flex">
-      <p class="mn-r-auto t-transp">Source</p>
+      <p class="mn-r-auto opacity-50">Source</p>
       <p class="truncate">{{ customer.source || 'Unknown' }}</p>
     </div>
 
     <div class="mn-b-thin pd-small bg-white radius-small flex">
-      <p class="mn-r-auto t-transp">Type</p>
+      <p class="mn-r-auto opacity-50">Type</p>
       <p>{{ customer.identity?.type || 'Visitor' }}</p>
     </div>
 
     <div class="mn-b-thin pd-small bg-white radius-small flex">
-      <p class="mn-r-auto t-transp">ID</p>
+      <p class="mn-r-auto opacity-50">ID</p>
       <p>#{{ customer._id.slice(0, 4) + '...' + customer._id.slice(-4) }}</p>
     </div>
 
@@ -35,7 +35,7 @@
       </span>
       <span
         v-if="customer.tags.length > 3"
-        class="bg-light pd-nano radius-small t-small t-transp"
+        class="bg-light pd-nano radius-small t-small opacity-50"
       >
         +{{ customer.tags.length - 3 }}
       </span>
@@ -46,7 +46,7 @@
     </div>
 
     <div class="pd-small bg-white radius-small gap-micro flex-v-center flex-nowrap flex">
-      <IconTime class="i-medium t-transp" fill="rgb(var(--black))" />
+      <IconTime class="i-medium opacity-50" fill="rgb(var(--black))" />
       <p class="fw-medium mn-r-auto">{{ formatDate(customer.lastActivity || customer.updatedAt) }}</p>
     </div>
   </div>
@@ -55,6 +55,9 @@
 <script setup>
   import StatusBadge from '@martyrs/src/components/Table/StatusBadge.vue';
   import IconTime from '@martyrs/src/modules/icons/entities/IconTime.vue';
+  import { useGlobalMixins } from '@martyrs/src/modules/core/views/mixins/mixins.js';
+
+  const { formatPhone } = useGlobalMixins();
 
   defineProps({
     customer: {

package/src/modules/orders/components/blocks/CardOrder.vue

@@ -56,31 +56,31 @@
 
 	    <div class="w-40">
 	    	<p class="mn-small w-100 fw-medium p-medium">
-	        <span class="t-transp">Order:</span> №{{order._id.slice(0,8)}} 
+	        <span class="opacity-50">Order:</span> №{{order._id.slice(0,8)}} 
 	      </p>
 	       <p  v-if="order.delivery.type === 'Post'" class="mn-medium w-100">
-	       	<span class="t-transp">Estimated shipping date:</span><br>{{DateToFormattedString(order.createdAt)}}
+	       	<span class="opacity-50">Estimated shipping date:</span><br>{{DateToFormattedString(order.createdAt)}}
 	      </p>
 	      <p  v-if="order.delivery.type === 'Courier'" class="mn-medium w-100">
-	       	<span class="t-transp">Shipping date:</span><br>{{DateToFormattedString2(order.createdAt)}}
+	       	<span class="opacity-50">Shipping date:</span><br>{{DateToFormattedString2(order.createdAt)}}
 	      </p>
 	      <p  v-if="order.delivery.type === 'Pickup'" class="mn-medium w-100">
-	       	<span class="t-transp">Type of delivery:</span><br>Pickup
+	       	<span class="opacity-50">Type of delivery:</span><br>Pickup
 	      </p>
 	      <hr class="mn-medium">
 
 	      <div :class="{'mn-semi': order.delivery.type == ''}" class="flex">
-	        <p  class="t-transp">In total</p>
+	        <p  class="opacity-50">In total</p>
 	        <p>$ {{ cartTotalPrice }}</p>
 	      </div>
 	      <div v-if="order.delivery.type !== ''" class="mn-semi flex">
-	        <p  class="t-transp">Delivery</p>
+	        <p  class="opacity-50">Delivery</p>
 	        <p v-if="order.delivery.type === 'Pickup'">Free</p>
 	        <p v-if="order.delivery.type === 'Post'">$ 10</p>
 	        <p v-if="order.delivery.type === 'Courier'">$ 20</p>
 	      </div>
 	      <div class="mn-semi intotal flex-bottom flex">
-	        <p  class="t-transp">In total to pay</p>
+	        <p  class="opacity-50">In total to pay</p>
 	        <p v-if="order.delivery.type === ''" class="p-medium fw-semi">$ {{ cartTotalPrice }}</p>
 	        <p v-if="order.delivery.type === 'Pickup'" class="p-medium fw-semi">$ {{ cartTotalPrice}} ₽</p>
 	        <p v-if="order.delivery.type === 'Courier'" class="p-medium fw-semi">$ {{ cartTotalPrice + 20 }}</p>
@@ -96,7 +96,7 @@
 	     		&& payment.Status !== 'REFUNDED'
 	     	" 
 	     	class='w-100 button'>Оплатить заказ</button> -->
-	     	<span class="t-transp" v-if="payment && payment.Status === 'CONFIRMED'">Paid</span> 
+	     	<span class="opacity-50" v-if="payment && payment.Status === 'CONFIRMED'">Paid</span> 
 	    </div>  
 	  </div>
 	</div>		

package/src/modules/orders/components/blocks/CardOrderBackoffice.vue

@@ -28,13 +28,18 @@
 			    <div 
 			      v-if="index < 2 || (spoiler && index >= 2)" 
 			      :key="index" 
-			      class="w-100 flex"
+			      class="w-100 flex-v-center flex"
 			    >
-			      <p class="mn-r-auto">{{ position.name }}</p>
-			      <p class="t-right">
+			      <div class="mn-r-auto">
+			        <p>{{ position.name }}</p>
+			        <p v-if="position.listing === 'rent' && position.date?.start && position.date?.end" class="mn-t-thin p-small opacity-50">
+			          {{ positionRentLabel(position) }}
+			        </p>
+			      </div>
+			      <p class="t-right flex-shrink-0">
 			        {{ position.quantity }} {{ position.type }}
 			        x
-			        <span class="t-transp">{{ currency }} {{ position.price }}</span>
+			        <span class="opacity-50">{{ currency }} {{ position.price }}</span>
 			      </p>
 			    </div>
 	      </transition>
@@ -51,24 +56,26 @@
 		</div>
 
     <div class="pd-small bg-white radius-small gap-micro flex-v-center flex-nowrap flex"> 
-      <IconTime class="i-medium t-transp" fill="rgb(var(--black)" />
+      <IconTime class="i-medium opacity-50" fill="rgb(var(--black)" />
       <p class="fw-medium mn-r-auto">{{formatDate(order.deadline)}}</p>
 
-      <span 
-        class="flex-child flex-shrink-0 capitalize w-max fw-medium radius-big pd-thin bg-main"
+      <span
+        class="flex-child flex-shrink-0 w-max fw-medium radius-thin pd-thin"
+        :class="orderStatusClass(order.status)"
       >
-        {{order.status}}
+        {{statusLabel(order.status)}}
       </span>
 
-      <span 
-        class="flex-child flex-shrink-0 capitalize w-max fw-medium radius-big pd-thin t-white bg-red"
+      <span
+        class="flex-child flex-shrink-0 capitalize w-max fw-medium radius-thin pd-thin"
+        :class="paymentStatusClass(order.payment.status)"
       >
-        {{order.payment.status || 'Not defined'}}
+        {{order.payment.status || 'Unpaid'}}
       </span>
     </div>
 
     <div v-if="order.comment" class="pos-relative radius-small bg-fifth-transp-10 mn-t-thin pd-small">
-      <p class="mn-b-thin t-transp uppercase p-small fw-medium">Comment</p>
+      <p class="mn-b-thin opacity-50 uppercase p-small fw-medium">Comment</p>
       <p>{{order.comment}}</p>
     </div>
   </div>
@@ -78,6 +85,7 @@
 import { ref } from 'vue';
 import CardHeader from '@martyrs/src/modules/core/views/components/blocks/CardHeader.vue';
 import IconTime from '@martyrs/src/modules/icons/entities/IconTime.vue';
+import { formatRentDateLabel } from '@martyrs/src/modules/orders/utils/rent-price.js';
 
 const props = defineProps({
   order: {
@@ -88,6 +96,10 @@ const props = defineProps({
     type: Object,
     required: true
   },
+  statuses: {
+    type: Array,
+    default: () => []
+  },
   formatDate: {
     type: Function,
     required: true
@@ -103,4 +115,38 @@ const props = defineProps({
 });
 
 const spoiler = ref(false);
+
+function positionRentLabel(position) {
+  return formatRentDateLabel(position.date?.start, position.date?.end, position.rentPeriod, props.formatDate);
+}
+
+function statusLabel(value) {
+  const found = props.statuses.find(s => s.value === value)
+  return found ? found.label : value
+}
+
+const orderStatusColors = {
+  'pending': 'bg-yellow',
+  'created': 'bg-yellow',
+  'confirmed': 't-white bg-second',
+  'in_progress': 'bg-green',
+  'active': 'bg-green',
+  'finished': 'bg-grey',
+  'completed': 'bg-grey',
+  'canceled': 't-white bg-red',
+}
+
+function orderStatusClass(status) {
+  return orderStatusColors[status] || 'bg-main'
+}
+
+function paymentStatusClass(status) {
+  switch (status) {
+    case 'paid': return 't-white bg-green'
+    case 'pending': return 'bg-yellow'
+    case 'refunded': return 't-white bg-second'
+    default: return 't-white bg-red'
+  }
+}
+
 </script>

package/src/modules/orders/components/blocks/CardOrderItem.vue

@@ -22,39 +22,33 @@
             <span class="t-dark mn-r-micro d-inline-block fw-demi">
               {{ returnCurrency() }}{{ totalPrice }}
             </span>
-            <span v-if="isRental && rentDates.start && rentDates.end" class="p-small t-transp">
-              {{ returnCurrency() }}{{ price }} 
+            <span v-if="isRental && rentDates.start && rentDates.end" class="p-small opacity-50">
+              {{ returnCurrency() }}{{ price }}
               <span v-if="quantity > 1">× {{ quantity }} {{ unit || 'pcs' }}</span>
-              × {{ rentalDays }} days
+              × {{ rentalDurationLabel }}
             </span>
-            <span v-else class="p-small t-transp">{{ returnCurrency() }}{{ price }} × {{ quantity || 0 }}  {{ unit || 'pcs' }}</span>
+            <span v-else class="p-small opacity-50">{{ returnCurrency() }}{{ price }} × {{ quantity || 0 }}  {{ unit || 'pcs' }}</span>
           </p>
           
           <p v-else-if="price != null && quantity == null" class="t-dark mn-r-micro d-inline-block fw-demi">
             {{ returnCurrency() }}{{ price }}
           </p>
           
-          <p v-else-if="price == null && quantity != null" class="p-small t-transp">
+          <p v-else-if="price == null && quantity != null" class="p-small opacity-50">
             {{ quantity }} {{ unit || 'pcs' }}
           </p>
         </div>
         
         <slot></slot>
         <div v-if="showControls" class="mn-t-thin gap-thin flex-justify-start flex">
-          <div 
-            v-if="isRental && rentDates.start && rentDates.end" 
-            class="flex gap-thin flex-v-center cursor-pointer pd-thin w-100 bg-light radius-small"
+          <div
+            v-if="isRental && rentDates.start && rentDates.end"
+            @click="editable ? openRentDatePopup() : null"
+            :class="['flex gap-thin flex-v-center pd-thin w-100 bg-light radius-small', editable ? 'cursor-pointer' : '']"
           >
-            <IconCalendar
-              @click="openRentDatePopup"
-              class="cursor-pointer i-medium"
-            />
-            <p 
-              @click="editable ? openRentDatePopup : null" 
-              class="fw-medium t-transp"
-            >
-              {{ formatDate(rentDates.start, { dayMonth: true, language: locale }) }} - 
-              {{ formatDate(rentDates.end, { dayMonth: true, language: locale }) }}
+            <IconCalendar class="i-medium" />
+            <p class="fw-medium opacity-50">
+              {{ rentDateLabel }}
             </p>
           </div>
 
@@ -96,6 +90,7 @@ import IconDelete from '@martyrs/src/modules/icons/navigation/IconDelete.vue'
 import IconCalendar from '@martyrs/src/modules/icons/entities/IconCalendar.vue'
 import PlaceholderImage from '@martyrs/src/modules/icons/placeholders/PlaceholderImage.vue'
 import { useGlobalMixins } from '@martyrs/src/modules/core/views/mixins/mixins.js'
+import { calcRentTotalPrice, formatRentDuration, formatRentDateLabel } from '@martyrs/src/modules/orders/utils/rent-price.js'
 
 const router = useRouter()
 const { locale } = useI18n()
@@ -112,6 +107,7 @@ const props = defineProps({
   unit: String,
   dates: Object,
   listing: String,
+  rentPeriod: { type: String, default: 'day' },
   price: Number,
   editable: Boolean,
   increase: Function,
@@ -127,16 +123,20 @@ const rentDates = ref({
   end: props.dates?.end || null
 })
 
-const rentalDays = computed(() => {
-  if (!rentDates.value.start || !rentDates.value.end) return 0
-  const start = new Date(rentDates.value.start)
-  const end = new Date(rentDates.value.end)
-  return Math.ceil(Math.abs(end - start) / (1000 * 60 * 60 * 24)) + 1
+const isShortPeriod = computed(() => ['hour', '4hours', 'flat'].includes(props.rentPeriod))
+
+const rentalDurationLabel = computed(() => {
+  if (!rentDates.value.start || !rentDates.value.end) return ''
+  return formatRentDuration(rentDates.value.start, rentDates.value.end, props.rentPeriod)
+})
+
+const rentDateLabel = computed(() => {
+  return formatRentDateLabel(rentDates.value.start, rentDates.value.end, props.rentPeriod, formatDate)
 })
 
 const totalPrice = computed(() => {
-  if (isRental.value) {
-    return rentalDays.value * props.price * props.quantity
+  if (isRental.value && rentDates.value.start && rentDates.value.end) {
+    return calcRentTotalPrice(props.price, props.quantity, rentDates.value.start, rentDates.value.end, props.rentPeriod)
   }
   return props.quantity * props.price
 })
@@ -165,9 +165,12 @@ async function openRentDatePopup() {
       props.variantId,
       props.quantity,
       props.price,
-      { 
+      {
         showCancelButton: props.editable,
-        onCancel: props.editable ? () => props.remove?.() : null
+        onCancel: props.editable ? () => props.remove?.() : null,
+        enableTime: isShortPeriod.value,
+        periodType: props.rentPeriod,
+        initialDates: rentDates.value.start ? { start: rentDates.value.start, end: rentDates.value.end } : null
       }
     );
     
@@ -185,5 +188,5 @@ function updateRentDates(dates) {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 </style>

package/src/modules/orders/components/blocks/CardOrderUser.vue

@@ -5,8 +5,8 @@
     <div class="flex-nowrap flex-v-center flex-between flex mn-b-small">
       <div class="flex-v-center gap-small flex">
         <span class="fw-medium t-dark">{{ formatOrderId(orderId) }}</span>
-        <span class="t-transp">|</span>
-        <span class="t-transp">{{ formatDate(createdAt, { dayMonth: true, language: locale }) }}</span>
+        <span class="opacity-50">|</span>
+        <span class="opacity-50">{{ formatDate(createdAt, { dayMonth: true, language: locale }) }}</span>
       </div>
 
       <!-- Status Badge -->
@@ -93,16 +93,11 @@ const formatOrderId = (id) => {
 };
 
 const statusConfig = {
-  'delivered': { label: 'Delivered', class: 't-green bg-green-nano', dot: 'bg-green' },
-  'finished': { label: 'Delivered', class: 't-green bg-green-nano', dot: 'bg-green' },
-  'processing': { label: 'Processing', class: 't-main bg-main-nano', dot: 'bg-main' },
-  'created': { label: 'Processing', class: 't-main bg-main-nano', dot: 'bg-main' },
-  'confirmed': { label: 'Confirmed', class: 't-main bg-main-nano', dot: 'bg-main' },
-  'shipped': { label: 'Shipped', class: 't-second bg-second-nano', dot: 'bg-second' },
-  'preparing': { label: 'Preparing', class: 't-second bg-second-nano', dot: 'bg-second' },
-  'cancelled': { label: 'Cancelled', class: 't-dark bg-light', dot: 'bg-grey' },
-  'canceled': { label: 'Cancelled', class: 't-dark bg-light', dot: 'bg-grey' },
-  'returned': { label: 'Returned', class: 't-fourth bg-fourth-nano', dot: 'bg-fourth' }
+  'created': { label: 'Pending', class: 't-main bg-main-nano', dot: 'bg-main' },
+  'confirmed': { label: 'Confirmed', class: 't-second bg-second-nano', dot: 'bg-second' },
+  'in_progress': { label: 'In Progress', class: 't-third bg-third-nano', dot: 'bg-third' },
+  'finished': { label: 'Completed', class: 't-green bg-green-nano', dot: 'bg-green' },
+  'canceled': { label: 'Canceled', class: 't-dark bg-light', dot: 'bg-grey' },
 };
 
 const statusKey = computed(() => props.status?.toLowerCase() || 'created');

package/src/modules/orders/components/blocks/CardOrderVar1.vue

@@ -63,20 +63,20 @@
                       <span>
                         {{position.name}}
                       </span>
-                      <span class="mn-r-thin mn-l-thin t-transp">|</span>
+                      <span class="mn-r-thin mn-l-thin opacity-50">|</span>
 
                       <span class="w-50">
                         {{position.quantity}}
                         x
                         {{position.price}}
-                        <span class="t-transp">{{returnCurrency()}}</span> 
+                        <span class="opacity-50">{{returnCurrency()}}</span> 
                       </span>
 
                     </div>
                     
                     <div class="t-right w-50">
                     
-                      <span class="t-transp">{{position.type}}</span> 
+                      <span class="opacity-50">{{position.type}}</span> 
                     </div>
                   </div> 
                 </div>

package/src/modules/orders/components/elements/FieldSubscribeNewsletter.vue

@@ -23,7 +23,7 @@
     >
       <div class="t-center">
         <h3 class="mn-b-medium">{{ props.successTitle || t('orders.newsletter.success.title') }}</h3>
-        <p class="t-transp mn-b-medium">{{ props.successSubtitle || t('orders.newsletter.success.subtitle') }}</p>
+        <p class="opacity-50 mn-b-medium">{{ props.successSubtitle || t('orders.newsletter.success.subtitle') }}</p>
         
         <div v-if="(props.socials || tm('orders.newsletter.socials')) && (props.socials || tm('orders.newsletter.socials')).length" class="flex flex-wrap flex-h-center gap-regular">
           <a

package/src/modules/orders/components/elements/PriceTotal.vue

@@ -2,25 +2,25 @@
   <div class="total-calculations">
     <!-- Base price calculation -->
     <p class="flex flex-nowrap pd-t-small">
-      <span class="w-100 t-transp">{{ t('subtotal') }}</span>
+      <span class="w-100 opacity-50">{{ t('subtotal') }}</span>
       <span class="w-100 t-right">{{currency}}{{totalPrice}}</span>
     </p>
     
     <!-- Platform fee (conditional) -->
     <p v-if="showFees" class="flex flex-nowrap pd-t-small">
-      <span class="w-100 t-transp">{{ t('feesRate') }}</span>
+      <span class="w-100 opacity-50">{{ t('feesRate') }}</span>
       <span class="w-100 t-right">{{currency}}{{feesRate}}</span>
     </p>
     
     <!-- VAT calculation (conditional) -->
     <p v-if="showVat" class="flex flex-nowrap pd-t-small">
-      <span class="w-100 t-transp">{{ t('vat', { rate: vatRate * 100 }) }}</span>
+      <span class="w-100 opacity-50">{{ t('vat', { rate: vatRate * 100 }) }}</span>
       <span class="w-100 t-right">{{currency}}{{vatAmount}}</span>
     </p>
 
     <!-- Delivery fee (conditional) -->
     <p v-if="showDeliveryFee" class="flex flex-nowrap br-black-transp-10 br-b-1px pd-b-small pd-t-small">
-      <span class="w-100 t-transp">{{ t('delivery') }}</span>
+      <span class="w-100 opacity-50">{{ t('delivery') }}</span>
       <span class="w-100 t-right">{{currency}}{{deliveryAmount}}</span>
     </p>
     

package/src/modules/orders/components/forms/FormApplicationDetails.vue

@@ -49,7 +49,7 @@
         {name: 'Created', value: 'created'}, 
         {name: 'In Progress', value: 'in_progress'}, 
         {name: 'Completed', value: 'completed'},
-        {name: 'Cancelled', value: 'cancelled'}
+        {name: 'Canceled', value: 'canceled'}
       ]"
       @update:select="(option) => { application.status = option.value; statusSelected = option }"
       placeholder="Status" 

package/src/modules/orders/components/forms/FormSelectCustomer.vue

@@ -1,7 +1,7 @@
 <template>
   <Block 
     title="Customer"
-    class="pos-relative mn-b-thin"
+    class="pos-relative"
     :actions="[{
       label: '+',
       function: () => openCreatePopup()
@@ -10,13 +10,14 @@
     <Card
       v-if="customer?._id"
       :photo="customer.profile?.photo"
-      :title="customer.profile?.name || customer.phone || customer.email || 'Unnamed Customer'"
-      :subtitle="customer.email || customer.phone"
+      :title="customer.profile?.name || formatPhone(customer.phone) || customer.email || 'Unnamed Customer'"
+      :subtitle="customer.email || formatPhone(customer.phone)"
       :action="{
         label: { is: IconCross },
         method: clearCustomer
       }"
-      class="bg-white h-2r pd-thin radius-medium w-100 flex flex-v-center gap-thin"
+      classImage="h-3r w-3r radius-small o-hidden flex-shrink-0"
+      class="h-4r w-100 bg-white pd-thin radius-medium mn-b-thin flex-v-center flex-nowrap flex gap-thin cursor-pointer"
     />
     
     <div v-else>
@@ -36,23 +37,25 @@
         :store="customers"
         :options="{
           search: searchUser,
-          owner: route.params._id
+          owner: ownerOrgId
         }"
         :showLoadMore="false"
         v-slot="{ items }"
         class="h-max-20r o-scroll"
       >
-        <div
-          v-for="customerItem in items" 
+        <CardUser
+          v-for="customerItem in items"
           :key="customerItem._id"
           @click="selectCustomer(customerItem)"
-          class="bg-white pd-thin radius-medium w-100 mn-b-thin cursor-pointer"
-        >
-          <CardCustomer 
-            :customer="customerItem"
-            :formatDate="formatDate"
-          />
-        </div>
+          :user="customerItem"
+          :photo="customerItem.profile?.photo"
+          :name="customerItem.profile?.name || formatPhone(customerItem.phone) || customerItem.email || 'Unnamed'"
+          :phone="formatPhone(customerItem.phone)"
+          :email="customerItem.email"
+          :status="customerItem.status"
+          :statusClass="customerItem.status === 'active' ? 'bg-green t-white' : 'bg-red t-white'"
+          class="bg-white pd-thin radius-medium w-100 mn-b-thin cursor-pointer h-4r"
+        />
       </Feed>
     </div>
   </Block>
@@ -87,7 +90,7 @@ import Feed from '@martyrs/src/components/Feed/Feed.vue'
 import BlockSearch from '@martyrs/src/modules/core/views/components/blocks/BlockSearch.vue'
 import Card from '@martyrs/src/modules/core/views/components/blocks/Card.vue'
 import IconCross from '@martyrs/src/modules/icons/navigation/IconCross.vue'
-import CardCustomer from '@martyrs/src/modules/orders/components/blocks/CardCustomer.vue'
+import CardUser from '@martyrs/src/modules/core/views/components/blocks/CardUser.vue'
 import FormCustomerDetails from '@martyrs/src/modules/orders/components/forms/FormCustomerDetails.vue'
 
 import * as auth from '@martyrs/src/modules/auth/views/store/auth.js';
@@ -95,9 +98,16 @@ import customers from '@martyrs/src/modules/orders/store/customers.store';
 import customerInitState from "@martyrs/src/modules/orders/store/models/customer.js"
 import { useGlobalMixins } from '@martyrs/src/modules/core/views/mixins/mixins.js';
 
-const { formatDate } = useGlobalMixins();
+const { formatDate, formatPhone } = useGlobalMixins();
 
 // Props & Model
+const props = defineProps({
+  orgId: {
+    type: String,
+    default: null
+  }
+})
+
 const customer = defineModel('customer', {
   type: Object,
   default: null
@@ -105,6 +115,7 @@ const customer = defineModel('customer', {
 
 // Router
 const route = useRoute()
+const ownerOrgId = computed(() => props.orgId || route.params._id)
 
 // Reactive data
 const searchUser = ref(null)
@@ -122,10 +133,10 @@ function clearCustomer() {
 
 function openCreatePopup() {
   newCustomer.value = { ...customerInitState }
-  if (route.params._id) {
+  if (ownerOrgId.value) {
     newCustomer.value.owner = {
       type: 'Organization',
-      target: route.params._id
+      target: ownerOrgId.value
     };
   }
   newCustomer.value.creator = {
@@ -142,31 +153,43 @@ function closeCreatePopup() {
 
 async function saveNewCustomer() {
   try {
-    // Remove empty fields
+    // Remove empty/null fields
     const cleanData = { ...newCustomer.value };
+    delete cleanData._id;
+    delete cleanData.user;
     if (!cleanData.email) delete cleanData.email;
     if (!cleanData.phone) delete cleanData.phone;
     if (!cleanData.notes) delete cleanData.notes;
-    if (!cleanData.referral?.code) {
-      if (cleanData.referral) delete cleanData.referral.code;
+    if (!cleanData.referral?.code) delete cleanData.referral;
+    if (cleanData.messenger && !cleanData.messenger.type) delete cleanData.messenger;
+    if (cleanData.socials) {
+      const hasSocials = Object.values(cleanData.socials).some(v => v);
+      if (!hasSocials) delete cleanData.socials;
     }
-    
+    if (cleanData.address) {
+      const hasAddress = Object.values(cleanData.address).some(v => v);
+      if (!hasAddress) delete cleanData.address;
+    }
+
     // Ensure ownership structure
     cleanData.owner = {
       type: 'Organization',
-      target: route.params._id
+      target: ownerOrgId.value
     };
-    
+
     cleanData.creator = {
       type: 'User',
       target: auth.state.user._id
     };
 
+    console.log('[FormSelectCustomer] ownerOrgId:', ownerOrgId.value, 'route._id:', route.params._id);
+    console.log('[FormSelectCustomer] cleanData:', JSON.stringify(cleanData));
     const created = await customers.create(cleanData);
+    console.log('[FormSelectCustomer] created:', created?._id, created?.profile?.name);
     customer.value = created;
     closeCreatePopup();
   } catch (error) {
-    console.error('Error creating customer:', error);
+    console.error('[FormSelectCustomer] Error creating customer:', error?.message, error?.status, error?.info);
   }
 }
 </script>

package/src/modules/orders/components/pages/Applications.vue

@@ -4,7 +4,7 @@
       v-if="!MOBILE_APP"
       title="Applications"
       :actions="[
-        { method: () => openCreatePopup(), label: 'Create Application' }
+        { method: () => openCreatePopup(), label: isPhone ? '+ Add' : '+ Add Application' }
       ]"
       class="mn-b-small"
     />
@@ -115,7 +115,7 @@
 
   const route = useRoute();
   const router = useRouter();
-  const { formatDate } = useGlobalMixins();
+  const { formatDate, isPhone } = useGlobalMixins();
 
   const statusFilter = ref('all')