Edit dashboard appearance

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

@@ -2,6 +2,7 @@
 import { computed } from 'vue';
 import { RouterLink } from 'vue-router';
 import UiIcon from '@/components/UiIcon.vue';
+import HomePanelEmpty from '@/components/dashboard/HomePanelEmpty.vue';
 import type { ActivityDto } from '@mento/shared';
 
 const props = defineProps<{
@@ -18,33 +19,6 @@ type Row = {
   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: 'جلسه',
@@ -67,9 +41,8 @@ function activityIcon(type: string) {
   return 'mail' as const;
 }
 
-const rows = computed<Row[]>(() => {
-  if (!props.activities.length) return demoRows;
-  return props.activities.slice(0, 3).map((act) => {
+const rows = computed<Row[]>(() =>
+  props.activities.slice(0, 3).map((act) => {
     const st = activityStatus(act);
     return {
       id: act.id,
@@ -79,8 +52,8 @@ const rows = computed<Row[]>(() => {
       tone: st.tone,
       label: st.label,
     };
-  });
-});
+  }),
+);
 </script>
 
 <template>
@@ -90,7 +63,14 @@ const rows = computed<Row[]>(() => {
       <RouterLink :to="{ name: 'activities' }">مشاهده همه</RouterLink>
     </header>
 
-    <ul class="activity-list">
+    <HomePanelEmpty
+      v-if="!rows.length"
+      title="فعالیتی در این فهرست نیست"
+      description="فیلتر را عوض کنید، یا یک فعالیت جدید بسازید."
+      action-label="فعالیت جدید"
+      :action-to="{ name: 'activity-new' }"
+    />
+    <ul v-else class="activity-list">
       <li v-for="act in rows" :key="act.id">
         <span class="act-icon">
           <UiIcon :name="activityIcon(act.type)" :size="16" />
@@ -113,6 +93,8 @@ const rows = computed<Row[]>(() => {
   box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
   border: 1px solid #eef2f7;
   min-width: 0;
+  display: flex;
+  flex-direction: column;
 }
 
 .panel-head {