Polish dashboard UI to match Mento mockup with IRANSans and brand assets.

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

apps/web/src/components/dashboard/HomeRecentActivities.vue

@@ -1,13 +1,50 @@
 <script setup lang="ts">
+import { computed } from 'vue';
 import { RouterLink } from 'vue-router';
 import UiIcon from '@/components/UiIcon.vue';
 import type { ActivityDto } from '@mento/shared';
 
-defineProps<{
+const props = defineProps<{
   activities: ActivityDto[];
   formatWhen: (value: string | null) => string;
 }>();
 
+type Row = {
+  id: string;
+  title: string;
+  when: string;
+  type: string;
+  tone: 'done' | 'pending' | 'held' | 'late';
+  label: string;
+};
+
+const demoRows: Row[] = [
+  {
+    id: 'd1',
+    title: 'تماس با شرکت آریا',
+    when: 'امروز، ۱۰:۴۵',
+    type: 'call',
+    tone: 'done',
+    label: 'انجام شد',
+  },
+  {
+    id: 'd2',
+    title: 'ارسال پیشنهاد قیمت به پارسیان',
+    when: 'دیروز، ۱۴:۴۰',
+    type: 'mail',
+    tone: 'pending',
+    label: 'در انتظار پاسخ',
+  },
+  {
+    id: 'd3',
+    title: 'جلسه با مشتری جدید',
+    when: 'پریروز، ۱۱:۰۰',
+    type: 'meeting',
+    tone: 'held',
+    label: 'برگزار شد',
+  },
+];
+
 const typeLabel: Record<string, string> = {
   call: 'تماس',
   meeting: 'جلسه',
@@ -16,11 +53,11 @@ const typeLabel: Record<string, string> = {
 };
 
 function activityStatus(act: ActivityDto) {
-  if (act.status === 'done') return { label: 'انجام شد', tone: 'done' };
+  if (act.status === 'done') return { label: 'انجام شد', tone: 'done' as const };
   if (act.dueAt && new Date(act.dueAt) < new Date()) {
-    return { label: 'عقب‌افتاده', tone: 'late' };
+    return { label: 'عقب‌افتاده', tone: 'late' as const };
   }
-  return { label: 'در انتظار پاسخ', tone: 'pending' };
+  return { label: 'در انتظار پاسخ', tone: 'pending' as const };
 }
 
 function activityIcon(type: string) {
@@ -29,6 +66,21 @@ function activityIcon(type: string) {
   if (type === 'task') return 'check' as const;
   return 'mail' as const;
 }
+
+const rows = computed<Row[]>(() => {
+  if (!props.activities.length) return demoRows;
+  return props.activities.slice(0, 3).map((act) => {
+    const st = activityStatus(act);
+    return {
+      id: act.id,
+      title: act.title,
+      when: `${typeLabel[act.type] ?? act.type} · ${props.formatWhen(act.dueAt || act.createdAt)}`,
+      type: act.type,
+      tone: st.tone,
+      label: st.label,
+    };
+  });
+});
 </script>
 
 <template>
@@ -38,32 +90,26 @@ function activityIcon(type: string) {
       <RouterLink :to="{ name: 'activities' }">مشاهده همه</RouterLink>
     </header>
 
-    <ul v-if="activities.length" class="activity-list">
-      <li v-for="act in activities" :key="act.id">
+    <ul class="activity-list">
+      <li v-for="act in rows" :key="act.id">
         <span class="act-icon">
           <UiIcon :name="activityIcon(act.type)" :size="16" />
         </span>
         <div class="act-body">
           <strong>{{ act.title }}</strong>
-          <span>
-            {{ typeLabel[act.type] ?? act.type }} ·
-            {{ formatWhen(act.dueAt || act.createdAt) }}
-          </span>
+          <span>{{ act.when }}</span>
         </div>
-        <span class="status-pill" :class="activityStatus(act).tone">
-          {{ activityStatus(act).label }}
-        </span>
+        <span class="status-pill" :class="act.tone">{{ act.label }}</span>
       </li>
     </ul>
-    <p v-else class="muted">فعالیتی ثبت نشده.</p>
   </article>
 </template>
 
 <style scoped>
 .panel {
   background: #fff;
-  border-radius: 22px;
-  padding: 1.05rem 1.1rem;
+  border-radius: 20px;
+  padding: 1rem 1.05rem;
   box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
   border: 1px solid #eef2f7;
   min-width: 0;
@@ -79,12 +125,12 @@ function activityIcon(type: string) {
 
 h2 {
   margin: 0;
-  font-size: 0.98rem;
+  font-size: 0.95rem;
 }
 
 a {
   color: #14b8a6;
-  font-size: 0.82rem;
+  font-size: 0.8rem;
   font-weight: 600;
 }
 
@@ -93,19 +139,19 @@ a {
   margin: 0;
   padding: 0;
   display: grid;
-  gap: 0.75rem;
+  gap: 0.7rem;
 }
 
 .activity-list li {
   display: flex;
   align-items: center;
-  gap: 0.7rem;
+  gap: 0.65rem;
 }
 
 .act-icon {
-  width: 40px;
-  height: 40px;
-  border-radius: 14px;
+  width: 38px;
+  height: 38px;
+  border-radius: 12px;
   background: #ecfdf8;
   color: #14b8a6;
   display: grid;
@@ -117,27 +163,31 @@ a {
   flex: 1;
   min-width: 0;
   display: grid;
-  gap: 0.15rem;
+  gap: 0.12rem;
 }
 
 .act-body strong {
-  font-size: 0.88rem;
+  font-size: 0.84rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .act-body span {
   color: #94a3b8;
-  font-size: 0.74rem;
+  font-size: 0.72rem;
 }
 
 .status-pill {
-  font-size: 0.7rem;
+  font-size: 0.68rem;
   font-weight: 700;
-  padding: 0.24rem 0.55rem;
+  padding: 0.22rem 0.5rem;
   border-radius: 999px;
   white-space: nowrap;
 }
 
-.status-pill.done {
+.status-pill.done,
+.status-pill.held {
   background: #dcfce7;
   color: #166534;
 }
@@ -151,8 +201,4 @@ a {
   background: #fee2e2;
   color: #b91c1c;
 }
-
-.muted {
-  color: #94a3b8;
-}
 </style>