@ozdao/martyrs 0.2.423

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

@@ -0,0 +1,216 @@
+<template>
+  <div class="w-100">
+    <!-- Главный контейнер -->
+    <div class="bg-light radius-tl-medium radius-tr-medium pd-thin gap-small flex-v-center flex-nowrap flex"
+    	:class="{
+    		'radius-bl-medium radius-br-medium': !showReturnNotice
+    	}"
+    >
+      <!-- Левая часть - сетка фотографий -->
+      <div style="display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr" class="flex-child-default gap-micro h-max-5r aspect-1x1">
+			  <template v-if="positions.length > 0">
+			    <div 
+			      v-for="index in 4" 
+			      :key="index" 
+            style="min-height: 0"
+			      class="w-100 h-100 bg-white-transp-50 radius-thin"
+			      :class="{
+			        'bg-white-transp-50': index <= positions.length && index <= 3,
+			        'bg-white-transp-50': index > positions.length || (index === 4 && positions.length <= 3),
+			        'bg-main': index === 4 && positions.length > 3
+			      }"
+			    >
+			     <img 
+						  v-if="index > 0 && index <= positions.length && positions[index - 1]?.images?.[0]" 
+						  :src="`${FILE_SERVER_URL || ''}${positions[index - 1].images[0] || positions[index - 1].image}`" 
+						  class="radius-small object-fit-contain w-100 h-100" 
+						  :alt="positions[index - 1].name" 
+					>
+			      <div v-else-if="index === 4 && positions.length > 3" class="flex-center h-100">
+			        <span class="t-medium t-white">+{{ positions.length - 3 }}</span>
+			      </div>
+			    </div>
+			  </template>
+			</div>
+
+      <!-- Правая часть - контент -->
+      <div class="flex-column flex w-100">
+        <!-- ID заказа и цена -->
+        <div class="mn-b-thin">
+          <Tooltip :text="orderId">
+			      <p class="p-big">
+			        #{{ orderId.slice(0, 4) }}...{{ orderId.slice(-4) }}
+			      </p>
+			    </Tooltip>
+          <p class="t-transp">{{ positions.length }} items for {{ formatPrice(total) }}</p>
+        </div>
+
+        <!-- Оставшееся время -->
+        <div class="flex-nowrap radius-thin bg-white w-max pd-thin flex-v-center flex">
+					<component :is="statusIcon" class="t-transp" />
+			    <span class="mn-l-micro p-medium">{{ statusText }}</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- Уведомление о возврате -->
+    <div 
+		  v-if="showReturnNotice" 
+		  :class="[
+		    'flex-nowrap', 
+		    'flex-v-center', 
+		    'flex', 
+		    'pd-regular', 
+		    'radius-bl-medium', 
+		    'radius-br-medium',
+		    hasOverdue ? 'bg-fourth-nano' : 'bg-second-nano'
+		  ]"
+		>
+		  <svg 
+		    class="i-medium mn-r-thin t-main" 
+		    xmlns="http://www.w3.org/2000/svg" 
+		    width="19" 
+		    height="19" 
+		    viewBox="0 0 19 19" 
+		    fill="none"
+		  >
+		    <path 
+		      d="M9.21484 18.4367C8.19857 18.4367 7.23014 18.2795 6.30957 17.965C5.389 17.6551 4.54362 17.2176 3.77344 16.6525C3.00781 16.092 2.34245 15.4266 1.77734 14.6564C1.2168 13.8863 0.779297 13.0432 0.464844 12.1271C0.154948 11.2066 0 10.2381 0 9.22186C0 8.20103 0.154948 7.23033 0.464844 6.30975C0.779297 5.38918 1.2168 4.54608 1.77734 3.78046C2.34245 3.01483 3.00781 2.34947 3.77344 1.78436C4.54362 1.21926 5.389 0.781759 6.30957 0.471863C7.23014 0.15741 8.19857 0.000183105 9.21484 0.000183105C10.2357 0.000183105 11.2064 0.15741 12.127 0.471863C13.0475 0.781759 13.8906 1.21926 14.6562 1.78436C15.4219 2.34947 16.0872 3.01483 16.6523 3.78046C17.2174 4.54608 17.6549 5.38918 17.9648 6.30975C18.2793 7.23033 18.4365 8.20103 18.4365 9.22186C18.4365 10.2381 18.2793 11.2066 17.9648 12.1271C17.6549 13.0432 17.2174 13.8863 16.6523 14.6564C16.0872 15.4266 15.4219 16.092 14.6562 16.6525C13.8906 17.2176 13.0475 17.6551 12.127 17.965C11.2064 18.2795 10.2357 18.4367 9.21484 18.4367ZM9.22168 10.6027C9.7959 10.6027 10.0967 10.3042 10.124 9.70721L10.2607 5.69452C10.2744 5.39374 10.181 5.14992 9.98047 4.96307C9.78451 4.77167 9.5293 4.67596 9.21484 4.67596C8.89583 4.67596 8.63835 4.76939 8.44238 4.95624C8.25098 5.14309 8.16211 5.38918 8.17578 5.69452L8.30566 9.71405C8.33301 10.3065 8.63835 10.6027 9.22168 10.6027ZM9.22168 13.6994C9.5498 13.6994 9.82324 13.6037 10.042 13.4123C10.2653 13.2163 10.377 12.9634 10.377 12.6535C10.377 12.3391 10.2653 12.0838 10.042 11.8879C9.82324 11.6919 9.5498 11.5939 9.22168 11.5939C8.89811 11.5939 8.6224 11.6942 8.39453 11.8947C8.17122 12.0907 8.05957 12.3436 8.05957 12.6535C8.05957 12.9634 8.17122 13.2163 8.39453 13.4123C8.6224 13.6037 8.89811 13.6994 9.22168 13.6994Z" 
+		      :fill="hasOverdue ? '#FF0000' : '#007AFF'"
+		    />
+		  </svg>	
+		  <span 
+		  	class="p-medium t-semi"
+		  	:class="[
+			    hasOverdue ? 't-red' : 't-second'
+			  ]"
+		  >
+				Need to return part of the equipment
+			</span>
+		</div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+
+import Tooltip from '@martyrs/src/components/Tooltip/Tooltip.vue'
+
+import IconStatusCreated from '@martyrs/src/modules/orders/components/icons/IconStatusCreated.vue';
+import IconStatusConfirmed from '@martyrs/src/modules/orders/components/icons/IconStatusConfirmed.vue';
+import IconStatusInUse from '@martyrs/src/modules/orders/components/icons/IconStatusInUse.vue';
+import IconStatusFinished from '@martyrs/src/modules/orders/components/icons/IconStatusFinished.vue';
+import IconStatusCanceled from '@martyrs/src/modules/orders/components/icons/IconStatusCanceled.vue';
+import IconStatusDelay from '@martyrs/src/modules/orders/components/icons/IconStatusDelay.vue';
+
+const props = defineProps({
+  orderId: String,
+  status: String,
+  positions: Array,
+  createdAt: [String, Date],
+  updatedAt: [String, Date],
+  total: [String, Number]
+});
+
+const iconMap = {
+  'created': IconStatusCreated,
+  'confirmed': IconStatusConfirmed,
+  'preparing': IconStatusInUse,
+  'inuse': IconStatusInUse,
+  'finished': IconStatusFinished,
+  'canceled': IconStatusCanceled,
+  'delay': IconStatusDelay
+};
+
+const formatDate = (date) => {
+  const d = new Date(date);
+  return d.toLocaleDateString('en-US', { day: 'numeric', month: 'long' });
+};
+
+const statusText = computed(() => {
+  const createdDate = formatDate(props.createdAt);
+  const updatedDate = formatDate(props.updatedAt);
+  
+  switch(props.status.toLowerCase()) {
+    case 'created':
+      return `Created, ${createdDate}`;
+    case 'confirmed':
+      return `Confirmed, ${updatedDate}`;
+    case 'preparing':
+    case 'inuse':
+      if (props.positions?.length) {
+        const lastEndDate = new Date(props.positions[props.positions.length - 1].date.end);
+        return `up to ${formatDate(lastEndDate)}`;
+      }
+      return `up to 18:00, ${updatedDate}`;
+    case 'finished':
+      return `Finished, ${updatedDate}`;
+    case 'canceled':
+      return `Canceled, ${updatedDate}`;
+    default:
+      // Расчет задержки
+      if (props.positions?.length) {
+        const lastEndDate = new Date(props.positions[props.positions.length - 1].date.end);
+        const now = new Date();
+        const diffTime = Math.abs(now - lastEndDate);
+        const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+        if (diffDays > 0 && props.status !== 'finished' && props.status !== 'canceled') {
+          return `Delay ${diffDays} day${diffDays > 1 ? 's' : ''}`;
+        }
+      }
+      return `Created, ${createdDate}`;
+  }
+});
+
+// Выбор иконки
+const statusIcon = computed(() => {
+  if (props.status === 'preparing' || props.status === 'inuse') {
+    // Проверка на задержку
+    if (props.positions?.length) {
+      const lastEndDate = new Date(props.positions[props.positions.length - 1].date.end);
+      if (new Date() > lastEndDate && props.status !== 'finished' && props.status !== 'canceled') {
+        return IconStatusDelay;
+      }
+    }
+    return IconStatusInUse;
+  }
+  return iconMap[props.status.toLowerCase()] || IconStatusCreated;
+});
+
+// Функция для нормализации даты (убираем время)
+const getDateWithoutTime = (dateString) => {
+  const date = new Date(dateString);
+  date.setHours(0, 0, 0, 0);
+  return date;
+};
+
+// Текущая дата и дата через 3 дня
+const today = getDateWithoutTime(new Date());
+const threeDaysFromNow = new Date(today);
+threeDaysFromNow.setDate(today.getDate() + 3);
+
+// Показывать ли уведомление о возврате
+const showReturnNotice = computed(() => {
+  return props.positions.some(position => {
+    const endDate = getDateWithoutTime(position.date.end);
+    return endDate <= threeDaysFromNow;
+  });
+});
+
+// Есть ли просроченные позиции
+const hasOverdue = computed(() => {
+  return props.positions.some(position => {
+    const endDate = getDateWithoutTime(position.date.end);
+    return endDate < today;
+  });
+});
+
+// Предполагается, что formatPrice определен где-то в коде
+</script>
+
+<style scoped>
+/* Добавляем стиль для текста "просрочено" */
+.t-red {
+  color: red;
+}
+</style>

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

@@ -0,0 +1,97 @@
+<router-link 
+        v-for="order in orders.state.all" 
+        :to="{ 
+          name: 'Order Edit', 
+          params: { 
+            order: order._id 
+
+          }
+        }" 
+         class="bg-light pd-medium radius-big"
+      >
+        <CardHeader 
+          :entity="order"
+          :entityType="'order'"
+          :user="auth.state.user"
+          :owner="order.creator" 
+          :creator="order.creator"
+          :date="order.createdAt"
+          class="mn-b-thin"
+        />
+
+
+          <div class="mn-b-thin w-100 bg-white radius-small pd-small spoiler">
+            <div @click="spoiler = !spoiler"  class="flex-v-center flex">
+              
+              Order: #{{order._id}}
+
+              <span 
+                class="flex-child flex-child-shrink-0 capitalize w-max mn-r-thin t-medium radius-big pd-b-nano pd-t-nano pd-r-thin pd-l-thin bg-main"
+              >
+                {{order.status}}
+              </span>
+             
+            </div>
+
+
+          </div>
+
+
+       
+          <div class="mn-b-thin w-100 bg-white radius-small pd-small spoiler">
+            <div @click="spoiler = !spoiler"  class="flex-v-center flex">
+              
+              customer: {{order.customer.target}}
+
+            </div>
+
+
+          </div>
+
+            <div class="w-100 bg-white radius-small pd-small">
+
+              <span class="flex-child flex-child-shrink-0">
+                Positions {{order.positions.length}} <a class="t-main mn-r-auto">Check Leftover</a>
+              </span>
+              <!-- <img loading="lazy" :class="{ 'spoiler-active': spoiler }" class="button-icon" src="@/assets/icons/arrow-down-spoiler.svg"> -->
+            
+
+              <transition name="fade">
+                <div v-if="spoiler">
+                  <div  v-for="position in order.positions" class="mn-t-small w-100 mn-b-thin flex"> 
+                    <div class=" w-50 flex">
+                      <span>
+                        {{position.name}}
+                      </span>
+                      <span class="mn-r-thin mn-l-thin t-transp">|</span>
+
+                      <span class="w-50">
+                        {{position.quantity}}
+                        x
+                        {{position.price}}
+                        <span class="t-transp">{{returnCurrency()}}</span> 
+                      </span>
+
+                    </div>
+                    
+                    <div class="t-right w-50">
+                    
+                      <span class="t-transp">{{position.type}}</span> 
+                    </div>
+                  </div> 
+                </div>
+              </transition>
+
+            </div>
+
+             <div class="mn-b-thin w-100 bg-white radius-small pd-small">
+
+              <span class="flex-child flex-child-shrink-0">
+                 <span class="h4">Amount: 4 500</span>
+              </span>
+            </div>
+
+            <div v-if="order.comment"  class="bg-fifth-transp-10 pd-thin">
+              <p class="t-truncate">Comment: {{order.comment}}</p>
+            </div>
+      </router-link>

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

@@ -0,0 +1,124 @@
+<template>
+  <div class="bg-light radius-medium w-100">
+    <h3 class="pd-medium">Tracking History</h3>
+    <div v-for="status in statusDetailedHistory" :key="status" class="w-100 br-t br-solid br-black-transp-10 pd-medium flex-v-center flex-nowrap flex">
+      <div class="flex-center flex i-big radius-extra br-solid br-2px br-black-transp-10 mn-r-small">
+        <IconCheckmark
+          v-if="isStatusInHistory(status.status)"
+          class="i-medium"
+        />
+      </div>
+
+      <div>
+        <p class="h4 w-8r">{{status.status}}</p>
+        <!-- <p v-if="status.timestamp" class="h5 w-8r">{{formatDate(status.timestamp)}}</p> -->
+      </div>
+      <!-- <router-link v-if="status.user" :to="{ 
+        name: 'User Profile Main', 
+        params: {
+          _id: status.user
+        }
+      }" class="pd-small radius-extra bg-second t-white mn-l-auto flex-center uppercase t-semi">Check User</router-link> -->
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+
+import IconCheckmark from '@martyrs/src/modules/icons/navigation/IconCheckmark.vue'
+
+// import Socket from '@vendus/sockets-for-cordova';
+
+const props = defineProps({
+  statusHistory: {
+    type: Array
+  },
+  statusCurrent: {
+    type: String
+  },
+  edit: {
+    type: Boolean
+  },
+  statuses: {
+    type: Array
+  }
+})
+
+const statusDetailedHistory = props.statuses.map(status => {
+  const historyEntry = props.statusHistory.find(entry => entry.status === status);
+
+  console.log()
+  return {
+    status,
+    user: historyEntry?.user || undefined,
+    timestamp: historyEntry ? historyEntry.timestamp : 'N/A',
+    inHistory: !!historyEntry,
+    _id: historyEntry ? historyEntry._id : null
+  };
+});
+
+const statusCurrent = ref(props.statusCurrent);
+const statusHistory = ref(props.statusHistory);
+
+// Проверка, был ли статус уже установлен
+const isStatusInHistory = (statusValue) => {
+  return statusHistory.value.some(status => status.status === statusValue);
+};
+
+
+const printerIP = ref('192.168.1.197');
+const printerPort = ref(9100);
+const textToPrint = ref('This is some text to print\n\n');
+
+// const printReceipt = async () => {
+//   try {
+//     const initPrinter = new Uint8Array([0x1b, 0x40]); // Команда инициализации принтера
+//     const lineFeed = new Uint8Array([0x0a]); // Перевод строки
+//     const cutPaper = new Uint8Array([0x1d, 0x56, 0x01]); // Резка бумаги
+
+//     const encoder = new TextEncoder();
+//     const textData = encoder.encode(textToPrint.value);
+
+//     const dataToSend = new Uint8Array([
+//       ...initPrinter,
+//       ...textData,
+//       ...lineFeed,
+//       ...cutPaper
+//     ]);
+
+//     const socket = new Socket();
+
+//     socket.onError = function (errorMessage) {
+//       console.error('Ошибка при подключении к принтеру:', errorMessage);
+//     };
+
+//     socket.onClose = function (hasError) {
+//       console.log('Соединение с принтером закрыто');
+//     };
+
+//     await new Promise((resolve, reject) => {
+//       socket.open(
+//         printerIP.value,
+//         printerPort.value,
+//         function () {
+//           console.log('Подключено к принтеру');
+//           resolve();
+//         },
+//         function (errorMessage) {
+//           console.error('Не удалось подключиться к принтеру:', errorMessage);
+//           reject(errorMessage);
+//         }
+//       );
+//     });
+
+//     socket.write(dataToSend);
+
+//     socket.shutdownWrite();
+
+//     console.log('Чек успешно напечатан');
+//   } catch (error) {
+//     console.error('Ошибка при печати чека:', error);
+//   }
+// };
+</script>

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

@@ -0,0 +1,95 @@
+<template>
+  <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 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 t-right">{{currency}}{{feesRate}}</span>
+    </p>
+    
+    <!-- VAT calculation (conditional) -->
+    <p v-if="showVat" class="flex flex-nowrap br-black-transp-10 br-solid br-b pd-b-small pd-t-small">
+      <span class="w-100 t-transp">{{ t('vat', { rate: vatRate * 100 }) }}</span>
+      <span class="w-100 t-right">{{currency}}{{vatAmount}}</span>
+    </p>
+    
+    <!-- Grand total -->
+    <p class="p-big flex flex-nowrap pd-b-small pd-t-small">
+      <span class="w-100 t-medium">{{ t('intotal') }}</span>
+      <span class="w-100 t-main t-medium t-right">{{currency}}{{grandTotal}}</span>
+    </p>
+  </div>
+</template>
+
+
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const props = defineProps({
+  totalPrice: {
+    type: Number,
+    required: true
+  },
+  currency: {
+    type: String,
+    required: true
+  },
+  showFees: {
+    type: Boolean,
+    default: false
+  },
+  feesRate: {
+    type: Number,
+    default: 0
+  },
+  showVat: {
+    type: Boolean,
+    default: false
+  },
+  vatRate: {
+    type: Number,
+    default: 0
+  }
+});
+
+const text = {
+  messages: {
+    en: {
+      subtotal: 'Subtotal',
+      feesRate: 'Platform Fee',
+      vat: 'VAT ({rate}%)',
+      intotal: 'In Total'
+    },
+    ru: {
+      subtotal: 'Подытог',
+      feesRate: 'Плата за платформу',
+      vat: 'НДС ({rate}%)',
+      intotal: 'Итого'
+    }
+  }
+};
+
+const { t } = useI18n(text);
+
+const formatPrice = (value) => value.toFixed(0);
+
+const vatAmount = computed(() => {
+  if (!props.showVat) return 0;
+  return formatPrice(props.totalPrice * props.vatRate);
+});
+
+const feesRate = computed(() => {
+  if (!props.showFees) return 0;
+  return formatPrice(props.totalPrice * props.feesRate);
+});
+
+const grandTotal = computed(() => {
+  return formatPrice(parseFloat(props.totalPrice) + parseFloat(feesRate.value) + parseFloat(vatAmount.value));
+});
+</script>

package/src/modules/orders/components/icons/IconStatusCanceled.vue

@@ -0,0 +1,14 @@
+<template>
+	<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 17 17" fill="none">
+	  <path d="M8.49414 16.6685C7.62305 16.6685 6.79297 16.5356 6.00391 16.27C5.21484 16.0044 4.49023 15.6294 3.83008 15.145C3.17383 14.6606 2.60352 14.0884 2.11914 13.4282C1.63477 12.772 1.25977 12.0493 0.994141 11.2603C0.728516 10.4712 0.595703 9.64111 0.595703 8.77002C0.595703 7.89502 0.728516 7.06299 0.994141 6.27393C1.25977 5.48486 1.63477 4.76221 2.11914 4.10596C2.60352 3.4458 3.17383 2.87549 3.83008 2.39502C4.49023 1.91064 5.21484 1.53564 6.00391 1.27002C6.79297 1.00049 7.62305 0.865723 8.49414 0.865723C9.36914 0.865723 10.2012 1.00049 10.9902 1.27002C11.7793 1.53564 12.502 1.91064 13.1582 2.39502C13.8184 2.87549 14.3887 3.4458 14.8691 4.10596C15.3535 4.76221 15.7285 5.48486 15.9941 6.27393C16.2637 7.06299 16.3984 7.89502 16.3984 8.77002C16.3984 9.64111 16.2637 10.4712 15.9941 11.2603C15.7285 12.0493 15.3535 12.772 14.8691 13.4282C14.3887 14.0884 13.8184 14.6606 13.1582 15.145C12.502 15.6294 11.7793 16.0044 10.9902 16.27C10.2012 16.5356 9.36914 16.6685 8.49414 16.6685ZM8.49414 14.8931C9.17383 14.8931 9.81836 14.7896 10.4277 14.5825C11.041 14.3794 11.6035 14.0903 12.1152 13.7153C12.627 13.3403 13.0703 12.897 13.4453 12.3853C13.8203 11.8735 14.1094 11.313 14.3125 10.7036C14.5195 10.0903 14.623 9.4458 14.623 8.77002C14.623 8.09033 14.5195 7.4458 14.3125 6.83643C14.1094 6.22314 13.8203 5.66064 13.4453 5.14893C13.0703 4.63721 12.627 4.19385 12.1152 3.81885C11.6035 3.44385 11.041 3.15479 10.4277 2.95166C9.81836 2.74463 9.17383 2.64111 8.49414 2.64111C7.81836 2.64111 7.17383 2.74463 6.56055 2.95166C5.95117 3.15479 5.39062 3.44385 4.87891 3.81885C4.36719 4.19385 3.92383 4.63721 3.54883 5.14893C3.17383 5.66064 2.88281 6.22314 2.67578 6.83643C2.47266 7.4458 2.37109 8.09033 2.37109 8.77002C2.37109 9.4458 2.47266 10.0903 2.67578 10.7036C2.88281 11.313 3.17383 11.8735 3.54883 12.3853C3.92383 12.897 4.36719 13.3403 4.87891 13.7153C5.39062 14.0903 5.95117 14.3794 6.56055 14.5825C7.17383 14.7896 7.81836 14.8931 8.49414 14.8931ZM6.36133 12.2212C6.14648 12.2212 5.9707 12.1567 5.83398 12.0278C5.69727 11.8989 5.62891 11.7329 5.62891 11.5298C5.62891 11.3501 5.69727 11.1665 5.83398 10.979L7.48633 8.71729L5.89844 6.5376C5.75 6.33838 5.67578 6.14502 5.67578 5.95752C5.67578 5.75439 5.74609 5.58643 5.88672 5.45361C6.03125 5.31689 6.21094 5.24854 6.42578 5.24854C6.59375 5.24854 6.73242 5.28369 6.8418 5.354C6.95117 5.42432 7.06445 5.55127 7.18164 5.73486L8.51172 7.72119H8.57031L9.85938 5.74072C9.97266 5.55713 10.084 5.43018 10.1934 5.35986C10.3027 5.28564 10.4395 5.24854 10.6035 5.24854C10.8223 5.24854 11 5.31494 11.1367 5.44775C11.2773 5.57666 11.3477 5.74268 11.3477 5.9458C11.3477 6.12549 11.2754 6.31104 11.1309 6.50244L9.48438 8.73486L11.1191 10.9556C11.2598 11.1431 11.3301 11.3286 11.3301 11.5122C11.3301 11.7231 11.2598 11.895 11.1191 12.0278C10.9824 12.1567 10.8027 12.2212 10.5801 12.2212C10.4121 12.2212 10.2734 12.186 10.1641 12.1157C10.0586 12.0415 9.94727 11.9106 9.83008 11.7231L8.50586 9.74268H8.45898L7.11133 11.7231C6.98633 11.9146 6.87109 12.0454 6.76562 12.1157C6.66016 12.186 6.52539 12.2212 6.36133 12.2212Z" :fill="fill"/>
+	</svg>
+</template>
+
+<script setup>
+	const props = defineProps({
+	  fill: {
+	    type: String,
+	    default: 'rgb(var(--black))'
+	  }
+	})
+</script>

package/src/modules/orders/components/icons/IconStatusConfirmed.vue

@@ -0,0 +1,14 @@
+<template>
+	<svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17" fill="none">
+  <path d="M8.5 16.6677C7.63281 16.6677 6.80469 16.533 6.01562 16.2634C5.23047 15.9978 4.50781 15.6228 3.84766 15.1384C3.19141 14.6541 2.61914 14.0818 2.13086 13.4216C1.64648 12.7615 1.26953 12.0388 1 11.2537C0.734375 10.4646 0.601562 9.63647 0.601562 8.76929C0.601562 7.9021 0.734375 7.07593 1 6.29077C1.26953 5.50171 1.64648 4.77905 2.13086 4.1228C2.61523 3.46265 3.18555 2.89038 3.8418 2.40601C4.50195 1.91772 5.22461 1.54077 6.00977 1.27515C6.79883 1.00562 7.62695 0.87085 8.49414 0.87085C9.29883 0.87085 10.0684 0.988037 10.8027 1.22241C11.541 1.45288 12.2246 1.78101 12.8535 2.20679C13.4863 2.62866 14.0469 3.13062 14.5352 3.71265C15.0234 4.29077 15.4219 4.9314 15.7305 5.63452C16.043 6.33374 16.2441 7.07397 16.334 7.85522C16.166 7.81226 15.9941 7.77905 15.8184 7.75562C15.6426 7.73218 15.4648 7.71851 15.2852 7.7146C15.1562 7.7146 15.0273 7.72046 14.8984 7.73218C14.7734 7.73999 14.6523 7.75562 14.5352 7.77905C14.4414 7.19702 14.2695 6.64819 14.0195 6.13257C13.7734 5.61304 13.4629 5.14038 13.0879 4.7146C12.7129 4.28882 12.2852 3.92163 11.8047 3.61304C11.3281 3.30054 10.8086 3.06226 10.2461 2.89819C9.6875 2.73022 9.10352 2.64624 8.49414 2.64624C7.81445 2.64624 7.16797 2.74976 6.55469 2.95679C5.94531 3.15991 5.38477 3.44897 4.87305 3.82397C4.36523 4.19507 3.92383 4.63647 3.54883 5.14819C3.17773 5.65601 2.88867 6.21655 2.68164 6.82983C2.47852 7.44312 2.37695 8.0896 2.37695 8.76929C2.37695 9.44897 2.47852 10.0955 2.68164 10.7087C2.88867 11.3181 3.17773 11.8787 3.54883 12.3904C3.92383 12.9021 4.36719 13.3435 4.87891 13.7146C5.39062 14.0896 5.95117 14.3806 6.56055 14.5876C7.17383 14.7947 7.82031 14.8982 8.5 14.8982C8.85938 14.8982 9.20898 14.8669 9.54883 14.8044C9.89258 14.7419 10.2227 14.6521 10.5391 14.5349C10.6367 14.824 10.7637 15.0974 10.9199 15.3552C11.0762 15.6169 11.2578 15.8572 11.4648 16.0759C11.0078 16.2673 10.5293 16.4138 10.0293 16.5154C9.5332 16.6169 9.02344 16.6677 8.5 16.6677ZM15.1797 16.6501C14.6406 16.6501 14.1328 16.5486 13.6562 16.3455C13.1836 16.1423 12.7656 15.8591 12.4023 15.4958C12.0391 15.1326 11.7539 14.7126 11.5469 14.2361C11.3438 13.7634 11.2422 13.2576 11.2422 12.7185C11.2422 12.1794 11.3438 11.6736 11.5469 11.2009C11.7539 10.7283 12.0391 10.3103 12.4023 9.94702C12.7656 9.58374 13.1836 9.30054 13.6562 9.09741C14.1328 8.89038 14.6406 8.78687 15.1797 8.78687C15.7188 8.78687 16.2246 8.89038 16.6973 9.09741C17.1738 9.30054 17.5918 9.58374 17.9512 9.94702C18.3145 10.3064 18.5977 10.7244 18.8008 11.2009C19.0039 11.6736 19.1055 12.1794 19.1055 12.7185C19.1055 13.2537 19.002 13.7576 18.7949 14.2302C18.5918 14.7068 18.3086 15.1267 17.9453 15.49C17.582 15.8533 17.1621 16.1365 16.6855 16.3396C16.2129 16.5466 15.7109 16.6501 15.1797 16.6501ZM14.6875 14.8513C14.9023 14.8513 15.0664 14.7771 15.1797 14.6287L17.3477 11.6814C17.3867 11.6267 17.4141 11.5701 17.4297 11.5115C17.4492 11.449 17.459 11.3904 17.459 11.3357C17.459 11.1716 17.4004 11.031 17.2832 10.9138C17.166 10.7966 17.0254 10.738 16.8613 10.738C16.6504 10.738 16.4824 10.8259 16.3574 11.0017L14.6406 13.3689L13.8262 12.4607C13.7754 12.4021 13.7129 12.3572 13.6387 12.3259C13.5645 12.2908 13.4805 12.2732 13.3867 12.2732C13.2305 12.2732 13.0898 12.3259 12.9648 12.4314C12.8398 12.5369 12.7773 12.6853 12.7773 12.8767C12.7773 12.9548 12.793 13.031 12.8242 13.1052C12.8594 13.1794 12.9043 13.2478 12.959 13.3103L14.207 14.6638C14.2695 14.7302 14.3438 14.7771 14.4297 14.8044C14.5195 14.8357 14.6055 14.8513 14.6875 14.8513Z" :fill="fill"/>
+</svg>
+</template>
+
+<script setup>
+	const props = defineProps({
+	  fill: {
+	    type: String,
+	    default: 'rgb(var(--black))'
+	  }
+	})
+</script>

package/src/modules/orders/components/icons/IconStatusCreated.vue

@@ -0,0 +1,14 @@
+<template>
+	<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 17 17" fill="none">
+  <path d="M8.49414 16.6675C7.62305 16.6675 6.79297 16.5347 6.00391 16.269C5.21484 16.0034 4.49023 15.6284 3.83008 15.144C3.17383 14.6597 2.60352 14.0874 2.11914 13.4272C1.63477 12.771 1.25977 12.0483 0.994141 11.2593C0.728516 10.4702 0.595703 9.64014 0.595703 8.76904C0.595703 7.89404 0.728516 7.06201 0.994141 6.27295C1.25977 5.48389 1.63477 4.76123 2.11914 4.10498C2.60352 3.44482 3.17383 2.87451 3.83008 2.39404C4.49023 1.90967 5.21484 1.53467 6.00391 1.26904C6.79297 0.999512 7.62305 0.864746 8.49414 0.864746C9.36914 0.864746 10.2012 0.999512 10.9902 1.26904C11.7793 1.53467 12.502 1.90967 13.1582 2.39404C13.8184 2.87451 14.3887 3.44482 14.8691 4.10498C15.3535 4.76123 15.7285 5.48389 15.9941 6.27295C16.2637 7.06201 16.3984 7.89404 16.3984 8.76904C16.3984 9.64014 16.2637 10.4702 15.9941 11.2593C15.7285 12.0483 15.3535 12.771 14.8691 13.4272C14.3887 14.0874 13.8184 14.6597 13.1582 15.144C12.502 15.6284 11.7793 16.0034 10.9902 16.269C10.2012 16.5347 9.36914 16.6675 8.49414 16.6675ZM8.49414 14.8921C9.17383 14.8921 9.81836 14.7886 10.4277 14.5815C11.041 14.3784 11.6035 14.0894 12.1152 13.7144C12.627 13.3394 13.0703 12.896 13.4453 12.3843C13.8203 11.8726 14.1094 11.312 14.3125 10.7026C14.5195 10.0894 14.623 9.44482 14.623 8.76904C14.623 8.08936 14.5195 7.44482 14.3125 6.83545C14.1094 6.22217 13.8203 5.65967 13.4453 5.14795C13.0703 4.63623 12.627 4.19287 12.1152 3.81787C11.6035 3.44287 11.041 3.15381 10.4277 2.95068C9.81836 2.74365 9.17383 2.64014 8.49414 2.64014C7.81836 2.64014 7.17383 2.74365 6.56055 2.95068C5.95117 3.15381 5.39062 3.44287 4.87891 3.81787C4.36719 4.19287 3.92383 4.63623 3.54883 5.14795C3.17383 5.65967 2.88281 6.22217 2.67578 6.83545C2.47266 7.44482 2.37109 8.08936 2.37109 8.76904C2.37109 9.44482 2.47266 10.0894 2.67578 10.7026C2.88281 11.312 3.17383 11.8726 3.54883 12.3843C3.92383 12.896 4.36719 13.3394 4.87891 13.7144C5.39062 14.0894 5.95117 14.3784 6.56055 14.5815C7.17383 14.7886 7.81836 14.8921 8.49414 14.8921Z" :fill="fill" />
+</svg>
+</template>
+
+<script setup>
+	const props = defineProps({
+	  fill: {
+	    type: String,
+	    default: 'rgb(var(--black))'
+	  }
+	})
+</script>

package/src/modules/orders/components/icons/IconStatusDelay.vue

@@ -0,0 +1,14 @@
+<template>
+	<svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17" fill="none">
+	  <path d="M8.5 16.668C7.63281 16.668 6.80469 16.5332 6.01562 16.2637C5.23047 15.998 4.50781 15.623 3.84766 15.1387C3.19141 14.6543 2.61914 14.082 2.13086 13.4219C1.64648 12.7617 1.26953 12.0391 1 11.2539C0.734375 10.4648 0.601562 9.63672 0.601562 8.76953C0.601562 7.90234 0.734375 7.07617 1 6.29102C1.26953 5.50195 1.64648 4.7793 2.13086 4.12305C2.61523 3.46289 3.18555 2.89062 3.8418 2.40625C4.50195 1.91797 5.22461 1.54102 6.00977 1.27539C6.79883 1.00586 7.62695 0.871094 8.49414 0.871094C9.29883 0.871094 10.0703 0.988281 10.8086 1.22266C11.5469 1.45312 12.2305 1.78125 12.8594 2.20703C13.4922 2.62891 14.0527 3.13086 14.541 3.71289C15.0293 4.29492 15.4277 4.9375 15.7363 5.64062C16.0488 6.33984 16.25 7.08008 16.3398 7.86133C16.0547 7.7832 15.752 7.73828 15.4316 7.72656C15.1113 7.71484 14.8105 7.73633 14.5293 7.79102C14.4395 7.20508 14.2695 6.65234 14.0195 6.13281C13.7734 5.61328 13.4629 5.14062 13.0879 4.71484C12.7129 4.28906 12.2852 3.92188 11.8047 3.61328C11.3281 3.30078 10.8086 3.0625 10.2461 2.89844C9.6875 2.73047 9.10352 2.64648 8.49414 2.64648C7.81445 2.64648 7.16797 2.75 6.55469 2.95703C5.94531 3.16016 5.38477 3.44922 4.87305 3.82422C4.36523 4.19531 3.92383 4.63672 3.54883 5.14844C3.17773 5.65625 2.88867 6.2168 2.68164 6.83008C2.47852 7.44336 2.37695 8.08984 2.37695 8.76953C2.37695 9.44922 2.47852 10.0957 2.68164 10.709C2.88867 11.3184 3.17773 11.8789 3.54883 12.3906C3.92383 12.9023 4.36719 13.3438 4.87891 13.7148C5.39062 14.0898 5.95117 14.3809 6.56055 14.5879C7.17383 14.7949 7.82031 14.8984 8.5 14.8984C8.85938 14.8984 9.20898 14.8672 9.54883 14.8047C9.89258 14.7422 10.2246 14.6523 10.5449 14.5352C10.6426 14.8203 10.7695 15.0938 10.9258 15.3555C11.0859 15.6172 11.2695 15.8574 11.4766 16.0762C11.0156 16.2676 10.5352 16.4141 10.0352 16.5156C9.53516 16.6172 9.02344 16.668 8.5 16.668ZM4.79688 9.83594C4.61328 9.83594 4.45703 9.77148 4.32812 9.64258C4.19922 9.51367 4.13477 9.35742 4.13477 9.17383C4.13477 8.98633 4.19922 8.83008 4.32812 8.70508C4.45703 8.57617 4.61328 8.51172 4.79688 8.51172H7.83789V4.33984C7.83789 4.15625 7.90039 4.00195 8.02539 3.87695C8.1543 3.74805 8.31055 3.68359 8.49414 3.68359C8.68164 3.68359 8.83789 3.74805 8.96289 3.87695C9.0918 4.00195 9.15625 4.15625 9.15625 4.33984V9.17383C9.15625 9.35742 9.0918 9.51367 8.96289 9.64258C8.83789 9.77148 8.68164 9.83594 8.49414 9.83594H4.79688ZM15.1797 16.6504C14.6406 16.6504 14.1328 16.5488 13.6562 16.3457C13.1836 16.1426 12.7656 15.8594 12.4023 15.4961C12.0391 15.1328 11.7539 14.7129 11.5469 14.2363C11.3438 13.7637 11.2422 13.2578 11.2422 12.7188C11.2422 12.1797 11.3438 11.6738 11.5469 11.2012C11.7539 10.7285 12.0391 10.3105 12.4023 9.94727C12.7656 9.58398 13.1836 9.30078 13.6562 9.09766C14.1328 8.89062 14.6406 8.78711 15.1797 8.78711C15.7188 8.78711 16.2246 8.89062 16.6973 9.09766C17.1738 9.30078 17.5918 9.58398 17.9512 9.94727C18.3145 10.3066 18.5977 10.7246 18.8008 11.2012C19.0039 11.6738 19.1055 12.1797 19.1055 12.7188C19.1055 13.2539 19.002 13.7578 18.7949 14.2305C18.5918 14.707 18.3086 15.127 17.9453 15.4902C17.582 15.8535 17.1621 16.1367 16.6855 16.3398C16.2129 16.5469 15.7109 16.6504 15.1797 16.6504ZM14.1484 14.5703L15.1855 13.5273L16.1699 14.5059C16.2793 14.6152 16.4102 14.668 16.5625 14.6641C16.7188 14.6641 16.8516 14.6094 16.9609 14.5C17.0703 14.3945 17.125 14.2637 17.125 14.1074C17.125 13.9551 17.0703 13.8242 16.9609 13.7148L15.9824 12.7363L17.0254 11.6934C17.1387 11.584 17.1895 11.4512 17.1777 11.2949C17.1699 11.1348 17.1113 11 17.002 10.8906C16.8926 10.7812 16.7598 10.7227 16.6035 10.7148C16.4473 10.707 16.3125 10.7598 16.1992 10.873L15.1621 11.9102L14.1777 10.9316C14.0684 10.8262 13.9355 10.7734 13.7793 10.7734C13.627 10.7734 13.4961 10.8262 13.3867 10.9316C13.2773 11.041 13.2227 11.1738 13.2227 11.3301C13.2266 11.4824 13.2812 11.6133 13.3867 11.7227L14.3652 12.7129L13.3281 13.7441C13.2148 13.8574 13.1602 13.9941 13.1641 14.1543C13.1719 14.3145 13.2305 14.4492 13.3398 14.5586C13.4492 14.6641 13.584 14.7207 13.7441 14.7285C13.9043 14.7363 14.0391 14.6836 14.1484 14.5703Z" :fill="fill"/>
+	</svg>
+</template>
+
+<script setup>
+	const props = defineProps({
+	  fill: {
+	    type: String,
+	    default: 'rgb(var(--black))'
+	  }
+	})
+</script>

package/src/modules/orders/components/icons/IconStatusFinished.vue

@@ -0,0 +1,14 @@
+<template>
+	<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 17 17" fill="none">
+	  <path d="M8.49414 16.6682C7.62305 16.6682 6.79297 16.5354 6.00391 16.2698C5.21484 16.0042 4.49023 15.6292 3.83008 15.1448C3.17383 14.6604 2.60352 14.0881 2.11914 13.428C1.63477 12.7717 1.25977 12.0491 0.994141 11.26C0.728516 10.4709 0.595703 9.64087 0.595703 8.76978C0.595703 7.89478 0.728516 7.06274 0.994141 6.27368C1.25977 5.48462 1.63477 4.76196 2.11914 4.10571C2.60352 3.44556 3.17383 2.87524 3.83008 2.39478C4.49023 1.9104 5.21484 1.5354 6.00391 1.26978C6.79297 1.00024 7.62305 0.865479 8.49414 0.865479C9.36914 0.865479 10.2012 1.00024 10.9902 1.26978C11.7793 1.5354 12.502 1.9104 13.1582 2.39478C13.8184 2.87524 14.3887 3.44556 14.8691 4.10571C15.3535 4.76196 15.7285 5.48462 15.9941 6.27368C16.2637 7.06274 16.3984 7.89478 16.3984 8.76978C16.3984 9.64087 16.2637 10.4709 15.9941 11.26C15.7285 12.0491 15.3535 12.7717 14.8691 13.428C14.3887 14.0881 13.8184 14.6604 13.1582 15.1448C12.502 15.6292 11.7793 16.0042 10.9902 16.2698C10.2012 16.5354 9.36914 16.6682 8.49414 16.6682ZM8.49414 14.8928C9.17383 14.8928 9.81836 14.7893 10.4277 14.5823C11.041 14.3792 11.6035 14.0901 12.1152 13.7151C12.627 13.3401 13.0703 12.8967 13.4453 12.385C13.8203 11.8733 14.1094 11.3127 14.3125 10.7034C14.5195 10.0901 14.623 9.44556 14.623 8.76978C14.623 8.09009 14.5195 7.44556 14.3125 6.83618C14.1094 6.2229 13.8203 5.6604 13.4453 5.14868C13.0703 4.63696 12.627 4.1936 12.1152 3.8186C11.6035 3.4436 11.041 3.15454 10.4277 2.95142C9.81836 2.74438 9.17383 2.64087 8.49414 2.64087C7.81836 2.64087 7.17383 2.74438 6.56055 2.95142C5.95117 3.15454 5.39062 3.4436 4.87891 3.8186C4.36719 4.1936 3.92383 4.63696 3.54883 5.14868C3.17383 5.6604 2.88281 6.2229 2.67578 6.83618C2.47266 7.44556 2.37109 8.09009 2.37109 8.76978C2.37109 9.44556 2.47266 10.0901 2.67578 10.7034C2.88281 11.3127 3.17383 11.8733 3.54883 12.385C3.92383 12.8967 4.36719 13.3401 4.87891 13.7151C5.39062 14.0901 5.95117 14.3792 6.56055 14.5823C7.17383 14.7893 7.81836 14.8928 8.49414 14.8928ZM7.69141 12.3674C7.54688 12.3674 7.41406 12.3342 7.29297 12.2678C7.17578 12.2014 7.06641 12.1057 6.96484 11.9807L5.20703 9.87134C5.0625 9.69556 4.99023 9.51587 4.99023 9.33228C4.99023 9.13306 5.06055 8.96509 5.20117 8.82837C5.3457 8.68774 5.51562 8.61743 5.71094 8.61743C5.82812 8.61743 5.93359 8.64087 6.02734 8.68774C6.125 8.73462 6.21875 8.8147 6.30859 8.92798L7.67383 10.6038L10.5391 6.01001C10.7109 5.73657 10.9238 5.59985 11.1777 5.59985C11.373 5.59985 11.5449 5.66431 11.6934 5.79321C11.8457 5.92212 11.9219 6.08618 11.9219 6.2854C11.9219 6.36743 11.9043 6.45337 11.8691 6.54321C11.834 6.62915 11.791 6.71509 11.7402 6.80103L8.39453 11.969C8.22266 12.2346 7.98828 12.3674 7.69141 12.3674Z" :fill="fill"/>
+	</svg>
+</template>
+
+<script setup>
+	const props = defineProps({
+	  fill: {
+	    type: String,
+	    default: 'rgb(var(--black))'
+	  }
+	})
+</script>

package/src/modules/orders/components/icons/IconStatusInUse.vue

@@ -0,0 +1,14 @@
+<template>
+	<svg xmlns="http://www.w3.org/2000/svg" width="18" height="17" viewBox="0 0 18 17" fill="none">
+  <path d="M9.50023 4.44531C9.67602 4.44531 9.82641 4.50781 9.95141 4.63281C10.0803 4.75781 10.1448 4.91016 10.1448 5.08984V10.3633L9.33031 7.86719L11.8674 11.3066C11.9885 11.4707 12.0413 11.6406 12.0256 11.8164C12.0139 11.9922 11.9338 12.1289 11.7854 12.2266C11.6213 12.3398 11.4514 12.3828 11.2756 12.3555C11.0998 12.3281 10.9455 12.2266 10.8127 12.0508L9.0432 9.71875C8.9807 9.63672 8.93383 9.55469 8.90258 9.47266C8.87133 9.38672 8.8557 9.29883 8.8557 9.20898V5.08984C8.8557 4.91016 8.9182 4.75781 9.0432 4.63281C9.17211 4.50781 9.32445 4.44531 9.50023 4.44531ZM9.50023 16.668C8.71508 16.668 7.94164 16.5469 7.17992 16.3047C6.42211 16.0664 5.72094 15.7305 5.07641 15.2969C4.43578 14.8633 3.89672 14.3555 3.45922 13.7734C3.26 13.5391 3.16625 13.2969 3.17797 13.0469C3.18969 12.8008 3.29125 12.6016 3.48266 12.4492C3.68969 12.2812 3.91234 12.2207 4.15062 12.2676C4.38891 12.3105 4.6018 12.4297 4.7893 12.625C5.16039 13.0859 5.59008 13.4863 6.07836 13.8262C6.56664 14.166 7.09984 14.4277 7.67797 14.6113C8.25609 14.7988 8.86352 14.8926 9.50023 14.8926C10.176 14.8926 10.8205 14.7891 11.4338 14.582C12.0471 14.3789 12.6077 14.0898 13.1155 13.7148C13.6272 13.3398 14.0705 12.8965 14.4455 12.3848C14.8205 11.873 15.1116 11.3125 15.3186 10.7031C15.5256 10.0898 15.6291 9.44531 15.6291 8.76953C15.6291 8.08984 15.5256 7.44531 15.3186 6.83594C15.1116 6.22266 14.8205 5.66016 14.4455 5.14844C14.0705 4.63672 13.6272 4.19336 13.1155 3.81836C12.6077 3.44336 12.0471 3.1543 11.4338 2.95117C10.8205 2.74414 10.176 2.64062 9.50023 2.64062C8.82445 2.64062 8.17992 2.74414 7.56664 2.95117C6.95336 3.1543 6.39086 3.44336 5.87914 3.81836C5.37133 4.19336 4.92992 4.63672 4.55492 5.14844C4.17992 5.66016 3.88891 6.22266 3.68187 6.83594C3.47484 7.44531 3.37133 8.08984 3.37133 8.76953H1.6018C1.6018 7.89453 1.73461 7.0625 2.00023 6.27344C2.26586 5.48438 2.63891 4.76172 3.11937 4.10547C3.60375 3.44531 4.17602 2.875 4.83617 2.39453C5.49633 1.91016 6.22094 1.53516 7.01 1.26953C7.79906 1 8.62914 0.865234 9.50023 0.865234C10.3713 0.865234 11.2014 1 11.9905 1.26953C12.7795 1.53516 13.5022 1.91016 14.1584 2.39453C14.8186 2.875 15.3909 3.44531 15.8752 4.10547C16.3596 4.76172 16.7346 5.48438 17.0002 6.27344C17.2659 7.0625 17.3987 7.89453 17.3987 8.76953C17.3987 9.64062 17.2659 10.4707 17.0002 11.2598C16.7346 12.0488 16.3596 12.7715 15.8752 13.4277C15.3909 14.0879 14.8186 14.6602 14.1584 15.1445C13.5022 15.6289 12.7795 16.0039 11.9905 16.2695C11.2014 16.5352 10.3713 16.668 9.50023 16.668ZM0.863516 7.24023H4.5432C4.7307 7.24023 4.87133 7.28516 4.96508 7.375C5.05883 7.46484 5.10375 7.57617 5.09984 7.70898C5.09594 7.8418 5.0432 7.97852 4.94164 8.11914L3.12523 10.5918C3.00805 10.748 2.86742 10.8281 2.70336 10.832C2.5393 10.832 2.40062 10.752 2.28734 10.5918L0.465078 8.11914C0.359609 7.98242 0.304922 7.84766 0.301016 7.71484C0.297109 7.57812 0.342031 7.46484 0.435781 7.375C0.533438 7.28516 0.676016 7.24023 0.863516 7.24023Z" :fill="fill"/>
+</svg>
+</template>
+
+<script setup>
+	const props = defineProps({
+	  fill: {
+	    type: String,
+	    default: 'rgb(var(--black))'
+	  }
+	})
+</script>