fix ui

src/pages/HomePage.vue

@@ -8,6 +8,7 @@ import {
   CustomerServiceOutlined,
   TeamOutlined,
   HomeOutlined,
+  LoginOutlined,
   UserOutlined,
 } from '@ant-design/icons-vue'
 import { message } from 'ant-design-vue'
@@ -263,11 +264,11 @@ onMounted(load)
               هنوز نسخه‌ای برای نمایش موجودی ثبت نشده است
             </div>
           </div>
-          <div>
+          <div class="module-foot">
             <div class="progress"><span /></div>
             <div class="module-meta">
               <span>{{ lowestSmsTenants.length }} نسخه کم‌موجودی</span>
-              <span>ورود ←</span>
+              <span class="module-enter"><LoginOutlined /> ورود</span>
             </div>
           </div>
         </div>
@@ -302,11 +303,11 @@ onMounted(load)
               سرور نزدیک‌انقضا یا بدون تاریخ ثبت‌شده نیست
             </div>
           </div>
-          <div>
+          <div class="module-foot">
             <div class="progress"><span /></div>
             <div class="module-meta">
               <span>{{ expiringServers.length }} مورد پیگیری</span>
-              <span>ورود ←</span>
+              <span class="module-enter"><LoginOutlined /> ورود</span>
             </div>
           </div>
         </div>
@@ -336,11 +337,11 @@ onMounted(load)
               افزونه نزدیک‌انقضا یا بدون تاریخ ثبت‌شده نیست
             </div>
           </div>
-          <div>
+          <div class="module-foot">
             <div class="progress"><span /></div>
             <div class="module-meta">
               <span>{{ expiringPlugins.length }} مورد پیگیری</span>
-              <span>ورود ←</span>
+              <span class="module-enter"><LoginOutlined /> ورود</span>
             </div>
           </div>
         </div>
@@ -370,11 +371,11 @@ onMounted(load)
               پشتیبانی نزدیک‌انقضا یا بدون تاریخ ثبت‌شده نیست
             </div>
           </div>
-          <div>
+          <div class="module-foot">
             <div class="progress"><span /></div>
             <div class="module-meta">
               <span>{{ expiringSupports.length }} مورد پیگیری</span>
-              <span>ورود ←</span>
+              <span class="module-enter"><LoginOutlined /> ورود</span>
             </div>
           </div>
         </div>
@@ -394,11 +395,11 @@ onMounted(load)
             <h3>{{ item.title }}</h3>
             <p>{{ item.desc }}</p>
           </div>
-          <div>
+          <div class="module-foot">
             <div class="progress"><span /></div>
             <div class="module-meta">
               <span>{{ item.meta }}</span>
-              <span>ورود ←</span>
+              <span class="module-enter"><LoginOutlined /> ورود</span>
             </div>
           </div>
         </button>
@@ -408,31 +409,32 @@ onMounted(load)
 </template>
 
 <style scoped>
-.sms-dashboard-card {
-  min-height: 196px;
-}
-
 .sms-mini-grid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 8px;
-  margin-top: 14px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 8px;
 }
 
 .sms-mini-card {
   border: none;
-  border-radius: 14px;
-  padding: 10px 12px;
+  border-radius: 10px;
+  padding: 7px 9px;
   text-align: right;
   font-family: inherit;
   cursor: pointer;
   display: grid;
-  gap: 2px;
+  gap: 1px;
   color: #17324d;
+  min-width: 0;
+  flex: 1 1 calc(50% - 6px);
 }
 
 .sms-mini-card strong {
-  font-size: 0.88rem;
+  font-size: 0.82rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .sms-mini-card span,
@@ -462,11 +464,11 @@ onMounted(load)
 }
 
 .sms-mini-empty {
-  grid-column: 1 / -1;
-  border-radius: 14px;
+  flex: 1 1 100%;
+  border-radius: 10px;
   background: #f5f7fb;
-  padding: 14px;
+  padding: 10px 12px;
   color: #7b8798;
-  font-size: 0.85rem;
+  font-size: 0.82rem;
 }
 </style>

src/pages/ProductVersionsPage.vue

@@ -2,7 +2,15 @@
 import { computed, onMounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { message, Modal } from 'ant-design-vue'
-import { ArrowRightOutlined, PlusOutlined, SearchOutlined } from '@ant-design/icons-vue'
+import {
+  ArrowRightOutlined,
+  DeleteOutlined,
+  PlusOutlined,
+  SearchOutlined,
+  SettingOutlined,
+  SkinOutlined,
+  SlidersOutlined,
+} from '@ant-design/icons-vue'
 import api from '@/api/http'
 import { useAuthStore } from '@/stores/auth'
 import { formatIranDateTime } from '@/utils/datetime'
@@ -82,6 +90,22 @@ function edit(id: string) {
   router.push({ name: 'version-edit', params: { id } })
 }
 
+function goProgramSettings(id: string) {
+  router.push({ name: 'version-program-settings', params: { id } })
+}
+
+function goAppearance(item: Tenant) {
+  router.push({
+    name:
+      product.value === 'hamkar'
+        ? 'version-ui-hamkar'
+        : item.uiVariant === 'newTheme'
+          ? 'version-ui'
+          : 'version-ui-modular',
+    params: { id: item.id },
+  })
+}
+
 function remove(record: Tenant) {
   Modal.confirm({
     title: `حذف نسخه «${record.nameFa}»؟`,
@@ -146,69 +170,55 @@ onMounted(load)
               {{ item.nameFa.slice(0, 1) }}
             </div>
             <div class="version-meta">
-              <h3>{{ item.nameFa }}</h3>
-              <div class="domain">{{ item.domain }}</div>
-              <div class="created-at">ایجاد: {{ formatIranDateTime(item.createdAt) }}</div>
-              <div style="margin-top: 8px">
-                <a-tag>{{ item.slug }}</a-tag>
-                <a-tag v-if="item.nameEn" color="blue">{{ item.nameEn }}</a-tag>
-                <a-tag :color="item.isActive ? 'success' : 'default'">
+              <div class="version-title-row">
+                <h3>{{ item.nameFa }}</h3>
+                <span class="version-status" :class="item.isActive ? 'is-on' : 'is-off'">
                   {{ item.isActive ? 'فعال' : 'غیرفعال' }}
-                </a-tag>
-                <a-tag v-if="item.notes?.includes('classifyConfidence:low')" color="orange">
-                  بررسی محصول
-                </a-tag>
-                <a-tag v-if="item.hasAppUiConfig" color="purple">ظاهر اپ</a-tag>
-                <a-tag v-if="item.hasProgramSettings" color="cyan">تنظیمات برنامه</a-tag>
-                <a-tag v-if="product === 'khanegi'" :color="item.uiVariant === 'newTheme' ? 'geekblue' : 'cyan'">
-                  {{ item.uiVariant === 'newTheme' ? 'New theme' : 'Modular' }}
-                </a-tag>
+                </span>
               </div>
+              <div class="domain">{{ item.domain }}</div>
+              <div class="created-at">{{ formatIranDateTime(item.createdAt) }}</div>
             </div>
           </div>
+          <div class="version-tags">
+            <a-tag>{{ item.slug }}</a-tag>
+            <a-tag v-if="item.nameEn" color="blue">{{ item.nameEn }}</a-tag>
+            <a-tag v-if="item.notes?.includes('classifyConfidence:low')" color="orange">
+              بررسی محصول
+            </a-tag>
+            <a-tag v-if="item.hasAppUiConfig" color="purple">ظاهر اپ</a-tag>
+            <a-tag v-if="item.hasProgramSettings" color="cyan">تنظیمات برنامه</a-tag>
+            <a-tag v-if="product === 'khanegi'" :color="item.uiVariant === 'newTheme' ? 'geekblue' : 'cyan'">
+              {{ item.uiVariant === 'newTheme' ? 'New theme' : 'Modular' }}
+            </a-tag>
+          </div>
           <div class="version-actions">
-            <a-button type="primary" ghost block style="flex: 1" @click="edit(item.id)">
+            <a-button size="small" type="primary" ghost block @click="edit(item.id)">
+              <template #icon><SettingOutlined /></template>
               مدیریت
             </a-button>
             <a-button
               v-if="product === 'khanegi'"
-              type="default"
+              size="small"
               block
-              style="flex: 1"
-              @click="
-                router.push({
-                  name: 'version-program-settings',
-                  params: { id: item.id },
-                })
-              "
+              @click="goProgramSettings(item.id)"
             >
-              تنظیمات برنامه
+              <template #icon><SlidersOutlined /></template>
+              تنظیمات
             </a-button>
-            <a-button
-              type="default"
-              block
-              style="flex: 1"
-              @click="
-                router.push({
-                  name:
-                    product === 'hamkar'
-                      ? 'version-ui-hamkar'
-                      : item.uiVariant === 'newTheme'
-                        ? 'version-ui'
-                        : 'version-ui-modular',
-                  params: { id: item.id },
-                })
-              "
-            >
-              ظاهر اپ
+            <a-button size="small" block @click="goAppearance(item)">
+              <template #icon><SkinOutlined /></template>
+              ظاهر
             </a-button>
             <a-button
               v-if="canWrite"
+              size="small"
               danger
               ghost
-              style="flex: 0 0 auto"
+              block
               @click="remove(item)"
             >
+              <template #icon><DeleteOutlined /></template>
               حذف
             </a-button>
           </div>