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

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

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

@@ -9,49 +9,100 @@ const props = defineProps<{
   formatMoney: (amount: number, currency: string) => string;
 }>();
 
-const stages = computed(() => props.board?.stages.slice(0, 3) ?? []);
+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();
+  const days = Math.floor(diff / 86400000);
+  if (days <= 0) return 'امروز';
+  if (days === 1) return 'دیروز';
+  return `${toFaDigits(days)} روز پیش`;
+}
+
+const cols = computed<Col[]>(() => {
+  const stages = props.board?.stages.slice(0, 3) ?? [];
+  const hasDeals = stages.some((s) => s.deals.length);
+  if (!stages.length || !hasDeals) return demoCols;
+  return stages.map((stage) => ({
+    id: stage.id,
+    name: stage.name,
+    count: stage.deals.length,
+    cards: stage.deals.slice(0, 2).map((deal) => ({
+      id: deal.id,
+      name: deal.company?.name || deal.person?.fullName || deal.title,
+      amount: deal.amount ? props.formatMoney(deal.amount, deal.currency) : '',
+      when: relativeWhen(deal.updatedAt || deal.createdAt),
+    })),
+  }));
+});
 </script>
 
 <template>
   <article class="panel">
     <header class="panel-head">
       <h2>جریان فروش</h2>
-      <RouterLink :to="{ name: 'pipeline' }">کاریز کامل</RouterLink>
+      <RouterLink :to="{ name: 'pipeline' }">نمایش همه</RouterLink>
     </header>
 
-    <div v-if="stages.length" class="mini-pipeline">
-      <div v-for="stage in stages" :key="stage.id" class="pipe-col">
+    <div class="mini-pipeline">
+      <div v-for="col in cols" :key="col.id" class="pipe-col">
         <header>
-          <strong>{{ stage.name }}</strong>
-          <span>{{ toFaDigits(stage.deals.length) }}</span>
+          <strong>{{ col.name }} ({{ toFaDigits(col.count) }})</strong>
         </header>
         <div class="pipe-cards">
           <RouterLink
-            v-for="deal in stage.deals.slice(0, 3)"
-            :key="deal.id"
+            v-for="card in col.cards"
+            :key="card.id"
             class="pipe-card"
-            :to="{ name: 'deal-detail', params: { id: deal.id } }"
+            :to="card.id.length > 4 ? { name: 'deal-detail', params: { id: card.id } } : { name: 'pipeline' }"
           >
-            <span class="deal-mark">
-              {{ (deal.company?.name || deal.person?.fullName || deal.title).slice(0, 1) }}
-            </span>
+            <span class="deal-mark">{{ card.name.slice(0, 1) }}</span>
             <div>
-              <strong>{{ deal.company?.name || deal.person?.fullName || deal.title }}</strong>
-              <span v-if="deal.amount">{{ formatMoney(deal.amount, deal.currency) }}</span>
+              <strong>{{ card.name }}</strong>
+              <span v-if="card.amount">{{ card.amount }}</span>
+              <em>{{ card.when }}</em>
             </div>
           </RouterLink>
         </div>
       </div>
     </div>
-    <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;
@@ -62,65 +113,54 @@ const stages = computed(() => props.board?.stages.slice(0, 3) ?? []);
   align-items: center;
   justify-content: space-between;
   gap: 0.75rem;
-  margin-bottom: 0.85rem;
+  margin-bottom: 0.75rem;
 }
 
 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;
   text-decoration: none;
 }
 
 .mini-pipeline {
   display: grid;
-  grid-template-columns: repeat(3, minmax(140px, 1fr));
-  gap: 0.75rem;
+  grid-template-columns: repeat(3, minmax(120px, 1fr));
+  gap: 0.65rem;
   overflow-x: auto;
 }
 
 .pipe-col > header {
-  display: flex;
-  justify-content: space-between;
-  gap: 0.5rem;
-  margin-bottom: 0.55rem;
-  font-size: 0.82rem;
-}
-
-.pipe-col > header span {
+  margin-bottom: 0.5rem;
+  font-size: 0.78rem;
   color: #64748b;
-  background: #f1f5f9;
-  border-radius: 999px;
-  padding: 0.05rem 0.45rem;
-  font-size: 0.72rem;
-  font-weight: 700;
 }
 
 .pipe-cards {
   display: grid;
-  gap: 0.45rem;
+  gap: 0.4rem;
 }
 
 .pipe-card {
   display: flex;
   align-items: center;
-  gap: 0.55rem;
-  padding: 0.65rem 0.7rem;
-  border-radius: 14px;
+  gap: 0.5rem;
+  padding: 0.55rem 0.6rem;
+  border-radius: 12px;
   background: #f8fafc;
   border: 1px solid #eef2f7;
   color: inherit;
-  font-size: 0.8rem;
+  font-size: 0.78rem;
 }
 
 .pipe-card div {
   display: grid;
-  gap: 0.12rem;
+  gap: 0.1rem;
   min-width: 0;
 }
 
@@ -128,17 +168,24 @@ a {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  font-size: 0.78rem;
 }
 
 .pipe-card span {
   color: #94a3b8;
-  font-size: 0.72rem;
+  font-size: 0.68rem;
+}
+
+.pipe-card em {
+  color: #cbd5e1;
+  font-size: 0.66rem;
+  font-style: normal;
 }
 
 .deal-mark {
-  width: 30px;
-  height: 30px;
-  border-radius: 10px;
+  width: 28px;
+  height: 28px;
+  border-radius: 8px;
   background: #ecfdf8;
   color: #0f766e;
   display: grid;
@@ -147,10 +194,6 @@ a {
   flex-shrink: 0;
 }
 
-.muted {
-  color: #94a3b8;
-}
-
 @media (max-width: 700px) {
   .mini-pipeline {
     grid-template-columns: 1fr;