Create a project workflow by typing to generate approval cards.

apps/web/src/views/ActivitiesView.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, ref, watch } from 'vue';
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
 import { RouterLink, useRoute, useRouter } from 'vue-router';
 import axios from 'axios';
 import { api } from '@/lib/api';
@@ -135,6 +135,14 @@ function isOverdue(item: ActivityDto) {
   return startOfLocalDay(new Date(item.dueAt)).getTime() < startOfLocalDay().getTime();
 }
 
+const isMobile = ref(false);
+
+function cardStatusText(item: ActivityDto) {
+  if (item.status === 'done') return 'انجام شد';
+  if (item.status === 'canceled') return 'لغو شده';
+  return 'انجام نشده';
+}
+
 function uiStatus(item: ActivityDto): UiStatus {
   if (item.status === 'done') return 'done';
   if (item.status === 'canceled') return 'canceled';
@@ -317,10 +325,22 @@ watch(
   },
 );
 
+let mobileQuery: MediaQueryList | null = null;
+function syncMobile() {
+  isMobile.value = mobileQuery?.matches ?? false;
+}
+
 onMounted(() => {
+  mobileQuery = window.matchMedia('(max-width: 899px)');
+  syncMobile();
+  mobileQuery.addEventListener('change', syncMobile);
   void load();
   void loadCounts();
 });
+
+onUnmounted(() => {
+  mobileQuery?.removeEventListener('change', syncMobile);
+});
 </script>
 
 <template>
@@ -510,7 +530,7 @@ onMounted(() => {
               {{ statusLabel[uiStatus(item)] }}
             </span>
           </div>
-          <div class="row-more" @click.stop>
+          <div v-if="!isMobile" class="row-more" @click.stop>
             <UiDropdownMenu
               :open="menuId === item.id"
               align="end"
@@ -563,6 +583,7 @@ onMounted(() => {
             </div>
             <div class="card-side">
               <UiDropdownMenu
+                v-if="isMobile"
                 :open="menuId === item.id"
                 align="end"
                 @update:open="(v) => (menuId = v ? item.id : null)"
@@ -595,17 +616,8 @@ onMounted(() => {
               <UiIcon name="calendar" :size="14" />
               {{ dateText(item) }}
             </span>
-            <button
-              v-if="item.status === 'open'"
-              class="done-btn"
-              type="button"
-              @click="complete(item.id)"
-            >
-              <UiIcon name="check" :size="14" />
-              انجام شد
-            </button>
-            <span v-else class="status" :class="uiStatus(item)">
-              {{ statusLabel[uiStatus(item)] }}
+            <span class="status" :class="item.status === 'done' ? 'done' : item.status === 'canceled' ? 'canceled' : 'planned'">
+              {{ cardStatusText(item) }}
             </span>
           </footer>
         </article>