Give automations a visual chain with conditions and SMS, and match the pipeline board to the sales mockup.

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/web/src/views/ActivitiesView.vue

@@ -115,6 +115,11 @@ const listEmpty = computed(() => !loading.value && !items.value.length);
 const rangeFrom = computed(() => (total.value ? (page.value - 1) * PAGE_SIZE + 1 : 0));
 const rangeTo = computed(() => Math.min(page.value * PAGE_SIZE, total.value));
 
+function isLastItem(id: string) {
+  const rows = items.value;
+  return rows.length > 0 && rows[rows.length - 1]?.id === id;
+}
+
 function isOverdue(item: ActivityDto) {
   if (item.status !== 'open' || !item.dueAt) return false;
   return startOfLocalDay(new Date(item.dueAt)).getTime() < startOfLocalDay().getTime();
@@ -393,7 +398,13 @@ onMounted(() => {
           <span>وضعیت</span>
           <span />
         </div>
-        <article v-for="item in items" :key="item.id" class="trow" role="row">
+        <article
+          v-for="item in items"
+          :key="item.id"
+          class="trow"
+          :class="{ 'menu-open': menuId === item.id }"
+          role="row"
+        >
           <div class="title-cell">
             <UiIcon name="star" :size="16" class="star" />
             <div>
@@ -435,7 +446,11 @@ onMounted(() => {
             >
               <UiIcon name="dots-v" :size="16" />
             </button>
-            <div v-if="menuId === item.id" class="popover">
+            <div
+              v-if="menuId === item.id"
+              class="popover"
+              :class="{ 'drop-up': isLastItem(item.id) }"
+            >
               <RouterLink :to="{ name: 'activity-detail', params: { id: item.id } }" @click="menuId = null">
                 مشاهده
               </RouterLink>
@@ -484,7 +499,12 @@ onMounted(() => {
                 <UiIcon :name="typeIcon[item.type]" :size="18" />
               </span>
               <span class="type-pill" :class="item.type">{{ typeLabel[item.type] }}</span>
-              <div v-if="menuId === item.id" class="popover" @click.stop>
+              <div
+                v-if="menuId === item.id"
+                class="popover"
+                :class="{ 'drop-up': isLastItem(item.id) }"
+                @click.stop
+              >
                 <RouterLink :to="{ name: 'activity-detail', params: { id: item.id } }" @click="menuId = null">
                   مشاهده
                 </RouterLink>
@@ -709,7 +729,12 @@ h1 {
   box-shadow: 0 16px 40px rgba(15, 23, 42, 0.14);
   padding: 0.35rem;
   display: grid;
-  z-index: 8;
+  z-index: 20;
+}
+
+.popover.drop-up {
+  top: auto;
+  bottom: calc(100% + 6px);
 }
 
 .popover a,
@@ -789,7 +814,7 @@ h1 {
 .table {
   background: #fff;
   border-radius: 18px;
-  overflow: hidden;
+  overflow: visible;
   box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
 }
 
@@ -807,12 +832,23 @@ h1 {
   font-size: 0.78rem;
   font-weight: 700;
   border-bottom: 1px solid #f1f5f9;
+  border-radius: 18px 18px 0 0;
 }
 
 .trow {
+  position: relative;
   border-bottom: 1px solid #f8fafc;
 }
 
+.trow:last-child {
+  border-bottom: 0;
+  border-radius: 0 0 18px 18px;
+}
+
+.trow.menu-open {
+  z-index: 12;
+}
+
 .title-cell {
   display: flex;
   gap: 0.55rem;