@ozdao/martyrs 0.2.581 → 0.2.583

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

@@ -1,107 +1,82 @@
 <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="fw-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-medium">
-			        #{{ orderId.slice(0, 4) }}...{{ orderId.slice(-4) }}
-			      </p>
-			    </Tooltip>
-          <p class="t-transp">{{ positions.length }} items for {{ formatPrice(total) }}</p>
-        </div>
+  <div class="bg-light radius-medium pd-medium">
+
+    <!-- Header: Order ID | Date | Status -->
+    <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>
+      </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-regular">{{ statusText }}</span>
-        </div>
+      <!-- Status Badge -->
+      <div
+        class="pd-l-small pd-r-small pd-t-micro pd-b-micro radius-big p-small fw-semi flex-v-center gap-micro flex"
+        :class="statusClasses"
+      >
+        <span class="d-block radius-big" :class="dotClasses" style="width: 6px; height: 6px;"></span>
+        {{ statusLabel }}
       </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-regular fw-semi"
-		  	:class="[
-			    hasOverdue ? 't-red' : 't-grey'
-			  ]"
-		  >
-				Need to return part of the equipment
-			</span>
-		</div>
+    <!-- Product List -->
+    <div class="gap-thin flex-column flex mn-b-small">
+      <CardOrderItem
+        v-for="(item, index) in positions"
+        :key="`${item._id}_${item.variant || 'no-variant'}_${index}`"
+        :editable="false"
+        :productId="item._id"
+        :variantId="item.variant"
+        :images="item.images"
+        :name="item.name"
+        :quantity="item.quantity"
+        :unit="item.unit"
+        :dates="item.date"
+        :listing="item.listing"
+        :price="item.price"
+        class="bg-white radius-small pd-small"
+      />
+    </div>
+
+    <!-- Footer: Total + Actions -->
+    <div class="flex-nowrap flex-v-center flex-between flex">
+      <div class="w-100">
+        <span class="fw-medium t-dark p-medium">Total</span>
+        <span class="fw-demi t-dark p-medium">{{ formatPrice(total) }}</span>
+      </div>
+
+      <div class="flex-nowrap gap-thin flex">
+        <button
+          v-if="status === 'delivered' || status === 'finished'"
+          class="button bg-white pd-t-thin pd-b-thin pd-l-small pd-r-small p-small fw-medium radius-small"
+        >
+          Rate
+        </button>
+        <button
+          v-if="status === 'created' || status === 'confirmed'"
+          class="button bg-main t-white pd-t-thin pd-b-thin pd-l-small pd-r-small p-small fw-medium radius-small"
+        >
+          Pay
+        </button>
+        <button class="button bg-white pd-t-thin pd-b-thin pd-l-small pd-r-small p-small fw-medium radius-small flex-v-center gap-micro flex">
+          Details
+          <IconChevronRight class="i-small" />
+        </button>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup>
 import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useGlobalMixins } from '@martyrs/src/modules/core/views/mixins/mixins.js';
 
-import Tooltip from '@martyrs/src/components/Tooltip/Tooltip.vue'
+import IconChevronRight from '@martyrs/src/modules/icons/navigation/IconChevronRight.vue';
+import CardOrderItem from '@martyrs/src/modules/orders/components/blocks/CardOrderItem.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 { locale } = useI18n();
+const { formatPrice, formatDate } = useGlobalMixins();
 
 const props = defineProps({
   orderId: String,
@@ -112,112 +87,35 @@ const props = defineProps({
   total: [String, Number]
 });
 
-const iconMap = {
-  'created': IconStatusCreated,
-  'confirmed': IconStatusConfirmed,
-  'preparing': IconStatusInUse,
-  'inuse': IconStatusInUse,
-  'finished': IconStatusFinished,
-  'canceled': IconStatusCanceled,
-  'delay': IconStatusDelay
+const formatOrderId = (id) => {
+  if (!id) return '';
+  return `#${id.slice(0, 3).toUpperCase()}-${id.slice(-4).toUpperCase()}-${new Date().getFullYear()}`;
 };
 
-const formatDate = (date) => {
-  const d = new Date(date);
-  return d.toLocaleDateString('en-US', { day: 'numeric', month: 'long' });
+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-grey bg-light', dot: 'bg-grey' },
+  'canceled': { label: 'Cancelled', class: 't-grey bg-light', dot: 'bg-grey' },
+  'returned': { label: 'Returned', class: 't-fourth bg-fourth-nano', dot: 'bg-fourth' }
 };
 
-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 lastPosition = props.positions[props.positions.length - 1];
-      const lastEndDateRaw = lastPosition?.date?.end;
-
-      if (lastEndDateRaw) {
-        const lastEndDate = new Date(lastEndDateRaw);
-        const now = new Date();
-        const diffTime = Math.abs(now.getTime() - lastEndDate.getTime());
-        const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+const statusKey = computed(() => props.status?.toLowerCase() || 'created');
 
-        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 statusLabel = computed(() => {
+  return statusConfig[statusKey.value]?.label || 'Processing';
 });
 
-// Функция для нормализации даты (убираем время)
-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 = position?.date?.end ? getDateWithoutTime(position.date.end) : null;
-    return endDate !== null && endDate <= threeDaysFromNow;
-  });
+const statusClasses = computed(() => {
+  return statusConfig[statusKey.value]?.class || 't-main bg-main-nano';
 });
 
-// Есть ли просроченные позиции
-const hasOverdue = computed(() => {
-  return props.positions.some(position => {
-    const endDate = position?.date?.end ? getDateWithoutTime(position.date.end) : null;
-    return endDate !== null && endDate < today;
-  });
+const dotClasses = computed(() => {
+  return statusConfig[statusKey.value]?.dot || 'bg-main';
 });
-
-// Предполагается, что formatPrice определен где-то в коде
 </script>
-
-<style scoped>
-/* Добавляем стиль для текста "просрочено" */
-.t-red {
-  color: red;
-}
-</style>

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

@@ -9,7 +9,7 @@
 			</div>
 
 	  	<div class="flex-nowrap flex gap-thin pos-relative ">
-		    <div v-for="(status, index) in store.core.state.options.orders.statuses" :key="index" class="w-20">
+		    <div v-for="(status, index) in statuses" :key="index" class="w-20">
 		      <div
 		      	class="bg-white br-anim br-glow radius-extra h-1r w-100"
 		        :class="
@@ -325,7 +325,7 @@
 	const productsOrganization = ref(null)
 	const orderOrganization = ref(null)
 
-	const statuses = store.core.state.options.orders.statuses
+	const statuses = store.core.state.options?.orders?.statuses || []
 	const statusLabels = ['Created', 'Confirmed', 'Preparing', 'In use', 'Finished'];
 
   if (route.meta.context === 'user' && 
@@ -419,16 +419,16 @@ const deliveryCost = computed(() => {
 
 
 	function getNextStatus(currentStatus) {
-	  const currentIndex = store.core.state.options.orders.statuses.findIndex(status => status.value === currentStatus);
+	  const currentIndex = statuses.findIndex(status => status.value === currentStatus);
 
 	  if (currentIndex !== -1 && currentIndex + 1 < statuses.length) {
-	    return store.core.state.options.orders.statuses[currentIndex + 1];
+	    return statuses[currentIndex + 1];
 	  }
 	  return null; // If next status doesn't exist
 	}
 
 	const isActiveStatus = (index) => {
-	  return store.core.state.options.orders.statuses.slice(index).some(status => status.value === order.value.status);
+	  return statuses.slice(index).some(status => status.value === order.value?.status);
 	};
 
   async function changePaymentStatus() {

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="mobile:pd-thin pd-medium"> 
+  <div class="mobile:pd-thin pd-medium">
     <SectionPageTitle
       v-if="!MOBILE_APP"
       title="Orders"
@@ -29,9 +29,17 @@
           <h3>{{formatPrice(totalPrice)}}</h3>
         </div>
       </div>
-
     </Block>
 
+    <!-- Tabs for user context -->
+    <Tab
+      v-if="route.meta.context === 'user'"
+      :tabs="tabs"
+      v-model:selected="tab"
+      classTab="bg-light"
+      class="mn-b-small"
+    />
+
     <Feed
       :search="true"
       :states="{
@@ -47,24 +55,24 @@
         limit: 15,
         ...(route.meta.context === 'organization' && { owner: route.params._id }),
         ...(route.meta.context === 'user' && { customer: route.params._id }),
-        ...(tab !== 'all' && { status: tab })
+        ...(tab !== 'all' && { status: tabStatusFilter })
       }"
-      v-slot="{ 
-        items 
+      v-slot="{
+        items
       }"
-      class="gap-thin cols-3 mobile:cols-1"
+      :class="route.meta.context === 'user' ? 'gap-small cols-1' : 'gap-thin cols-3 mobile:cols-1'"
     >
-      <router-link 
+      <router-link
         v-if="route.meta.context !== 'user'"
-        v-for="order in items" 
-        :to="{ 
-          name: route.meta.context === 'backoffice' ? 'BackofficeOrderEdit' : 'OrganizationOrderEdit', 
-          params: route.meta.context === 'backoffice' 
-            ? { order: order._id } 
+        v-for="order in items"
+        :to="{
+          name: route.meta.context === 'backoffice' ? 'BackofficeOrderEdit' : 'OrganizationOrderEdit',
+          params: route.meta.context === 'backoffice'
+            ? { order: order._id }
             : { order: order._id, organization: order.owner.target || order.owner._id  }
-        }" 
+        }"
       >
-        <CardOrderBackoffice 
+        <CardOrderBackoffice
           :order="order"
           :user="auth.state.user"
           :formatDate="formatDate"
@@ -73,69 +81,72 @@
         />
       </router-link>
 
-      <router-link 
+      <router-link
         v-if="route.meta.context === 'user'"
-        v-for="order in items" 
-        :to="{ 
-          name: 'UserOrder', 
-          params: { 
-            order: order._id 
-          }
-        }" 
+        v-for="order in items"
+        :to="`/users/${route.params._id}/orders/${order._id}`"
       >
-      <CardOrderUser
-        :orderId="order._id"
-        :status="order.status"
-        :createdAt="order.createdAt"
-        :updatedAt="order.updatedAt"
-        :positions="order.positions"
-        :total="orders.getters.getTotal(order.positions)"
-      />
+        <CardOrderUser
+          :orderId="order._id"
+          :status="order.status"
+          :createdAt="order.createdAt"
+          :updatedAt="order.updatedAt"
+          :positions="order.positions"
+          :total="orders.getters.getTotal(order.positions)"
+        />
       </router-link>
     </Feed>
   </div>
 </template>
 
 <script setup>
-  import { computed, onMounted, reactive, ref } from 'vue';
-  import { useRoute, useRouter } from 'vue-router';
+  import { computed, ref } from 'vue';
+  import { useRoute } from 'vue-router';
 
-  import Tab      from '@martyrs/src/components/Tab/Tab.vue'
+  import Tab from '@martyrs/src/components/Tab/Tab.vue'
   import Block from '@martyrs/src/components/Block/Block.vue';
+  import Feed from '@martyrs/src/components/Feed/Feed.vue'
 
   import * as orders from '@martyrs/src/modules/orders/store/orders.js';
   import * as auth from '@martyrs/src/modules/auth/views/store/auth.js';
 
-  import CardOrder from '@martyrs/src/modules/orders/components/blocks/CardOrder.vue'
-
   import CardOrderUser from '@martyrs/src/modules/orders/components/blocks/CardOrderUser.vue'
   import CardOrderBackoffice from '@martyrs/src/modules/orders/components/blocks/CardOrderBackoffice.vue'
-
   import SectionPageTitle from '@martyrs/src/modules/core/views/components/sections/SectionPageTitle.vue'
 
-  import Feed from '@martyrs/src/components/Feed/Feed.vue'
-
-  import IconTime  from '@martyrs/src/modules/icons/entities/IconTime.vue'
   import { useGlobalMixins } from '@martyrs/src/modules/core/views/mixins/mixins.js'
 
   const route = useRoute();
-  const router = useRouter();
   const { returnCurrency, formatPrice, formatDate } = useGlobalMixins()
 
-  const spoiler = ref(false)
-
   // Tab logic
   const tab = ref('all')
 
+  const tabs = [
+    { label: 'All Orders', value: 'all' },
+    { label: 'In Progress', value: 'in_progress' },
+    { label: 'Returns & Cancellations', value: 'returns' }
+  ]
+
+  const tabStatusFilter = computed(() => {
+    switch (tab.value) {
+      case 'in_progress':
+        return ['created', 'confirmed', 'processing', 'preparing', 'shipped']
+      case 'returns':
+        return ['cancelled', 'canceled', 'returned']
+      default:
+        return null
+    }
+  })
+
   const totalPrice = computed(() => {
     return calculateTotalSum(orders.state.all)
   });
 
-   const totalPriceUnpaid = computed(() => {
+  const totalPriceUnpaid = computed(() => {
     return calculateSum(orders.state.all,'unpaid')
   });
 
-  
   function calculateTotalSum(orders) {
     return orders.reduce((totalSum, item) => {
       return totalSum + item.positions.reduce((sum, position) => sum + position.price, 0);
@@ -144,15 +155,10 @@
 
   function calculateSum(orders, status) {
     return orders.reduce((totalSum, item) => {
-      if (item.payment.status === status) {
+      if (item.payment?.status === status) {
         return totalSum + item.positions.reduce((sum, position) => sum + position.price, 0);
       }
       return totalSum;
     }, 0);
   }
-
-
-  onMounted(async () => {
-   
-  });
 </script>

package/src/modules/organizations/components/pages/OrganizationEdit.vue

@@ -1,17 +1,37 @@
 <template>
 <div class="for-transition pd-thin">
   
-  <h3 class="mn-b-small">Type of group</h3>
-  <p class="mn-b-thin">Public groups are open to everyone, whereas in exclusive groups only members can post. If you wish to make a group private, select 'hidden'.</p>
-  
-  <SelectMulti
-    v-model="organization.state.current.types"
-    :options="['public','exclusive','hidden']"
-    :multiple="false"
-    :taggable="false"
-    placeholder="Type to search or add type of organization"
-    class="mn-b-semi bg-light pd-medium radius-small" 
-  />
+  <h3 class="mn-b-small">Access & Privacy</h3>
+
+  <div class="d-grid cols-1 tablet:cols-3 gap-regular mn-b-semi">
+    <button
+      v-for="option in typeOptions"
+      :key="option.value"
+      @click="organization.state.current.types = [option.value]"
+      :class="[
+        'd-flex items-start gap-regular pd-regular radius-semi br-1px t-left transition-timing-2',
+        isTypeSelected(option.value)
+          ? 'br-main bg-main-transp-10'
+          : 'br-light dark:br-dark-thin hover:br-grey bg-white dark:bg-dark'
+      ]"
+    >
+      <div :class="[
+        'pd-thin radius-[50%]',
+        isTypeSelected(option.value)
+          ? 'bg-main t-white'
+          : 'bg-light dark:bg-dark-thin t-grey'
+      ]">
+        <component :is="option.icon" class="i-medium" />
+      </div>
+      <div>
+        <div class="fw-semi t-black dark:t-white d-flex items-center gap-thin">
+          {{ option.label }}
+          <span v-if="isTypeSelected(option.value)" class="w-[0.5rem] h-[0.5rem] radius-[50%] bg-main"></span>
+        </div>
+        <p class="p-small t-grey dark:t-grey-thin mn-t-micro">{{ option.desc }}</p>
+      </div>
+    </button>
+  </div>
 
 
   <h3 class="mn-b-small">Profile</h3>
@@ -115,6 +135,7 @@
 
   import { useRoute, useRouter } from 'vue-router';
 
+  import { IconGroups, IconLock, IconShow } from '@martyrs/src/modules/icons/icons.client.js'
   import Breadcrumbs from '@martyrs/src/components/Breadcrumbs/Breadcrumbs.vue'
   import BlockTags    from '@martyrs/src/components/FieldTags/BlockTags.vue'
   import Tab from '@martyrs/src/components/Tab/Tab.vue';
@@ -134,6 +155,16 @@
 
   organization.actions.reset();
 
+  const typeOptions = [
+    { value: 'public', label: 'Public', icon: IconGroups, desc: 'Visible to everyone. Anyone can join.' },
+    { value: 'exclusive', label: 'Exclusive', icon: IconLock, desc: 'Visible, but membership requires approval.' },
+    { value: 'hidden', label: 'Hidden', icon: IconShow, desc: 'Invite only. Hidden from search.' }
+  ];
+
+  function isTypeSelected(type) {
+    return organization.state.current.types?.includes(type);
+  }
+
   onMounted(async()=>{
     if (route.params._id) {
       await organization.actions.read({ _id: route.params._id });