Edit dashboard appearance

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

@@ -3,6 +3,7 @@ import { computed } from 'vue';
 import { RouterLink } from 'vue-router';
 import { toFaDigits } from '@/lib/jalali';
 import type { PipelineBoardDto } from '@mento/shared';
+import HomePanelEmpty from '@/components/dashboard/HomePanelEmpty.vue';
 
 const props = defineProps<{
   board: PipelineBoardDto | null;
@@ -12,33 +13,6 @@ const props = defineProps<{
 type Card = { id: string; name: string; amount: string; when: string };
 type Col = { id: string; name: string; count: number; cards: Card[] };
 
-const demoCols: Col[] = [
-  {
-    id: 'p1',
-    name: 'پیشنهاد قیمت',
-    count: 4,
-    cards: [{ id: 'a', name: 'شرکت سایپا', amount: '۳۴۰٬۰۰۰٬۰۰۰ تومان', when: 'امروز' }],
-  },
-  {
-    id: 'p2',
-    name: 'نیازسنجی',
-    count: 6,
-    cards: [
-      { id: 'b', name: 'آریا تجارت', amount: '۳۶۰٬۰۰۰٬۰۰۰ تومان', when: 'دیروز' },
-      { id: 'c', name: 'فناوران نوین', amount: '۱۸۰٬۰۰۰٬۰۰۰ تومان', when: 'دیروز' },
-    ],
-  },
-  {
-    id: 'p3',
-    name: 'سرنخ جدید',
-    count: 8,
-    cards: [
-      { id: 'd', name: 'شرکت نیکان', amount: '۸۰٬۰۰۰٬۰۰۰ تومان', when: 'امروز' },
-      { id: 'e', name: 'گروه پارسیان', amount: '۱۲۰٬۰۰۰٬۰۰۰ تومان', when: 'دیروز' },
-    ],
-  },
-];
-
 function relativeWhen(iso: string | null | undefined) {
   if (!iso) return '';
   const diff = Date.now() - new Date(iso).getTime();
@@ -49,10 +23,10 @@ function relativeWhen(iso: string | null | undefined) {
 }
 
 const cols = computed<Col[]>(() => {
-  const stages = props.board?.stages.slice(0, 3) ?? [];
+  const stages = props.board?.stages ?? [];
   const hasDeals = stages.some((s) => s.deals.length);
-  if (!stages.length || !hasDeals) return demoCols;
-  return stages.map((stage) => ({
+  if (!hasDeals) return [];
+  return stages.slice(0, 3).map((stage) => ({
     id: stage.id,
     name: stage.name,
     count: stage.deals.length,
@@ -73,7 +47,14 @@ const cols = computed<Col[]>(() => {
       <RouterLink :to="{ name: 'pipeline' }">نمایش همه</RouterLink>
     </header>
 
-    <div class="mini-pipeline">
+    <HomePanelEmpty
+      v-if="!cols.length"
+      title="هنوز معامله‌ای در کاریز نیست"
+      description="اولین معامله را بسازید تا جریان فروش اینجا دیده شود."
+      action-label="معامله جدید"
+      :action-to="{ name: 'deal-new' }"
+    />
+    <div v-else class="mini-pipeline">
       <div v-for="col in cols" :key="col.id" class="pipe-col">
         <header>
           <strong>{{ col.name }} ({{ toFaDigits(col.count) }})</strong>
@@ -83,7 +64,7 @@ const cols = computed<Col[]>(() => {
             v-for="card in col.cards"
             :key="card.id"
             class="pipe-card"
-            :to="card.id.length > 4 ? { name: 'deal-detail', params: { id: card.id } } : { name: 'pipeline' }"
+            :to="{ name: 'deal-detail', params: { id: card.id } }"
           >
             <span class="deal-mark">{{ card.name.slice(0, 1) }}</span>
             <div>
@@ -106,6 +87,8 @@ const cols = computed<Col[]>(() => {
   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 {