Unify the web UI on shared controls and let pipeline columns be managed on the board.

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

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

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import type { HomeDashboardTrendPointDto } from '@mento/shared';
+import UiChart, { type UiChartOption } from '@/components/ui/UiChart.vue';
 
 const props = defineProps<{
   trend: HomeDashboardTrendPointDto[];
@@ -20,33 +21,61 @@ const demoTrend: HomeDashboardTrendPointDto[] = [
 const trend = computed(() => (props.trend.length ? props.trend : demoTrend));
 const change = computed(() => props.changePercent ?? 14);
 
-const points = computed(() => {
-  const rows = trend.value;
-  const max = Math.max(...rows.map((p) => p.amount), 1);
-  const w = 360;
-  const h = 150;
-  const padX = 16;
-  const padY = 36;
-  return rows.map((p, i) => ({
-    ...p,
-    x: padX + (i / Math.max(rows.length - 1, 1)) * (w - padX * 2),
-    y: h - padY - (p.amount / max) * (h - padY * 2),
-  }));
-});
-
-const line = computed(() => points.value.map((p) => `${p.x},${p.y}`).join(' '));
-
-const area = computed(() => {
-  if (!points.value.length) return '';
-  const first = points.value[0]!;
-  const last = points.value[points.value.length - 1]!;
-  return `${line.value} ${last.x},160 ${first.x},160`;
-});
-
-const highlight = computed(() => {
-  if (!points.value.length) return null;
-  return points.value.reduce((best, cur) => (cur.amount >= best.amount ? cur : best));
-});
+const option = computed<UiChartOption>(() => ({
+  animationDuration: 400,
+  grid: { top: 28, right: 8, bottom: 28, left: 8, containLabel: true },
+  tooltip: {
+    trigger: 'axis',
+    textStyle: { fontFamily: 'IRANSans, Tahoma, sans-serif' },
+    formatter: (params) => {
+      const row = Array.isArray(params) ? params[0] : params;
+      const point = trend.value[row.dataIndex ?? 0];
+      if (!point) return '';
+      return `${point.monthLabel}<br/>${props.formatAmount(point.amount)}`;
+    },
+  },
+  xAxis: {
+    type: 'category',
+    data: trend.value.map((p) => p.monthLabel),
+    boundaryGap: false,
+    axisLine: { show: false },
+    axisTick: { show: false },
+    axisLabel: {
+      color: '#94a3b8',
+      fontFamily: 'IRANSans, Tahoma, sans-serif',
+      fontSize: 11,
+    },
+  },
+  yAxis: {
+    type: 'value',
+    splitLine: { lineStyle: { color: '#eef2f7' } },
+    axisLabel: { show: false },
+  },
+  series: [
+    {
+      type: 'line',
+      data: trend.value.map((p) => p.amount),
+      smooth: 0.35,
+      symbol: 'circle',
+      symbolSize: 8,
+      itemStyle: { color: '#14b8a6', borderColor: '#fff', borderWidth: 2 },
+      lineStyle: { color: '#14b8a6', width: 3 },
+      areaStyle: {
+        color: {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            { offset: 0, color: 'rgba(20, 184, 166, 0.28)' },
+            { offset: 1, color: 'rgba(20, 184, 166, 0)' },
+          ],
+        },
+      },
+    },
+  ],
+}));
 </script>
 
 <template>
@@ -57,73 +86,17 @@ const highlight = computed(() => {
         {{ formatChange(change) }} نسبت به ماه قبل
       </span>
     </header>
-
-    <div class="chart-wrap">
-      <svg viewBox="0 0 360 170" class="line-chart" aria-hidden="true">
-        <defs>
-          <linearGradient id="homeTrendFill" x1="0" y1="0" x2="0" y2="1">
-            <stop offset="0%" stop-color="#14b8a6" stop-opacity="0.28" />
-            <stop offset="100%" stop-color="#14b8a6" stop-opacity="0" />
-          </linearGradient>
-        </defs>
-        <line
-          v-for="y in [40, 75, 110, 145]"
-          :key="y"
-          x1="12"
-          :y1="y"
-          x2="348"
-          :y2="y"
-          stroke="#eef2f7"
-          stroke-width="1"
-        />
-        <polygon v-if="area" :points="area" fill="url(#homeTrendFill)" />
-        <polyline
-          v-if="line"
-          :points="line"
-          fill="none"
-          stroke="#14b8a6"
-          stroke-width="3.2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-        <g v-for="(p, i) in points" :key="i">
-          <circle :cx="p.x" :cy="p.y" r="4.5" fill="#fff" stroke="#14b8a6" stroke-width="2.4" />
-        </g>
-        <g v-if="highlight">
-          <rect
-            :x="Math.min(Math.max(highlight.x - 52, 4), 256)"
-            :y="highlight.y - 32"
-            width="104"
-            height="24"
-            rx="8"
-            fill="#0f766e"
-          />
-          <text
-            :x="Math.min(Math.max(highlight.x, 56), 308)"
-            :y="highlight.y - 16"
-            text-anchor="middle"
-            fill="#fff"
-            font-size="9.5"
-            font-family="IRANSans, Tahoma, sans-serif"
-          >
-            {{ formatAmount(highlight.amount) }}
-          </text>
-        </g>
-      </svg>
-      <div class="chart-labels">
-        <span v-for="p in trend" :key="p.monthKey">{{ p.monthLabel }}</span>
-      </div>
-    </div>
+    <UiChart :option="option" height="210px" />
   </article>
 </template>
 
 <style scoped>
 .panel {
   background: #fff;
-  border-radius: 20px;
-  padding: 1rem 1.1rem 0.9rem;
+  border-radius: var(--radius);
+  padding: var(--pad-modal);
   box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
-  border: 1px solid #eef2f7;
+  border: 1px solid var(--line);
   min-width: 0;
   height: 100%;
   display: flex;
@@ -135,7 +108,7 @@ const highlight = computed(() => {
   align-items: center;
   justify-content: space-between;
   gap: 0.75rem;
-  margin-bottom: 0;
+  margin-bottom: 0.35rem;
 }
 
 h2 {
@@ -149,7 +122,7 @@ h2 {
   font-weight: 700;
   color: #16a34a;
   background: #dcfce7;
-  border-radius: 999px;
+  border-radius: var(--radius);
   padding: 0.18rem 0.5rem;
   white-space: nowrap;
 }
@@ -158,24 +131,4 @@ h2 {
   color: #dc2626;
   background: #fee2e2;
 }
-
-.chart-wrap {
-  display: grid;
-  gap: 0.15rem;
-  margin-top: auto;
-  padding-top: 2.25rem;
-}
-
-.line-chart {
-  width: 100%;
-  height: auto;
-}
-
-.chart-labels {
-  display: flex;
-  justify-content: space-between;
-  color: #94a3b8;
-  font-size: 0.72rem;
-  padding: 0 0.35rem;
-}
 </style>

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

@@ -2,6 +2,7 @@
 import { computed } from 'vue';
 import { toFaDigits } from '@/lib/jalali';
 import type { HomeDashboardSourceDto } from '@mento/shared';
+import UiChart, { type UiChartOption } from '@/components/ui/UiChart.vue';
 
 const props = defineProps<{
   sources: HomeDashboardSourceDto[];
@@ -18,17 +19,31 @@ const demoSources: HomeDashboardSourceDto[] = [
 const colors = ['#2563eb', '#14b8a6', '#22c55e', '#fb923c', '#94a3b8'];
 
 const rows = computed(() => (props.sources.length ? props.sources : demoSources));
-
-const segments = computed(() => {
-  let offset = 0;
-  return rows.value.map((s, i) => {
-    const seg = { ...s, color: colors[i % colors.length], offset };
-    offset += s.percent;
-    return seg;
-  });
-});
-
 const total = computed(() => rows.value.reduce((a, s) => a + s.count, 0));
+
+const option = computed<UiChartOption>(() => ({
+  animationDuration: 400,
+  color: colors,
+  tooltip: {
+    trigger: 'item',
+    textStyle: { fontFamily: 'IRANSans, Tahoma, sans-serif' },
+    formatter: (p) => {
+      const item = Array.isArray(p) ? p[0] : p;
+      return `${item.name}<br/>${toFaDigits(Number(item.value ?? 0))} — ${toFaDigits(item.percent ?? 0)}٪`;
+    },
+  },
+  series: [
+    {
+      type: 'pie',
+      radius: ['58%', '82%'],
+      center: ['50%', '50%'],
+      avoidLabelOverlap: true,
+      label: { show: false },
+      labelLine: { show: false },
+      data: rows.value.map((s) => ({ name: s.label, value: s.count })),
+    },
+  ],
+}));
 </script>
 
 <template>
@@ -39,23 +54,7 @@ const total = computed(() => rows.value.reduce((a, s) => a + s.count, 0));
 
     <div class="donut-wrap">
       <div class="donut-chart-box">
-        <svg viewBox="0 0 140 140" class="donut-chart" aria-hidden="true">
-          <circle cx="70" cy="70" r="48" fill="none" stroke="#eef2f7" stroke-width="16" />
-          <circle
-            v-for="seg in segments"
-            :key="seg.label"
-            cx="70"
-            cy="70"
-            r="48"
-            fill="none"
-            :stroke="seg.color"
-            stroke-width="16"
-            stroke-linecap="butt"
-            :stroke-dasharray="`${seg.percent * 3.016} 301.6`"
-            :stroke-dashoffset="`${-seg.offset * 3.016}`"
-            transform="rotate(-90 70 70)"
-          />
-        </svg>
+        <UiChart :option="option" height="132px" />
         <div class="donut-center">
           <strong>{{ toFaDigits(total) }}</strong>
           <span>مشتری</span>
@@ -63,10 +62,10 @@ const total = computed(() => rows.value.reduce((a, s) => a + s.count, 0));
       </div>
 
       <ul class="donut-legend">
-        <li v-for="seg in segments" :key="seg.label">
-          <span class="dot" :style="{ background: seg.color }" />
-          <span class="lbl">{{ seg.label }}</span>
-          <em>{{ toFaDigits(seg.percent) }}٪</em>
+        <li v-for="(row, i) in rows" :key="row.label">
+          <span class="dot" :style="{ background: colors[i % colors.length] }" />
+          <span class="lbl">{{ row.label }}</span>
+          <em>{{ toFaDigits(row.percent) }}٪</em>
         </li>
       </ul>
     </div>
@@ -76,10 +75,10 @@ const total = computed(() => rows.value.reduce((a, s) => a + s.count, 0));
 <style scoped>
 .panel {
   background: #fff;
-  border-radius: 20px;
-  padding: 1rem 1.1rem;
+  border-radius: var(--radius);
+  padding: var(--pad-modal);
   box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
-  border: 1px solid #eef2f7;
+  border: 1px solid var(--line);
   min-width: 0;
 }
 
@@ -106,11 +105,6 @@ h2 {
   height: 132px;
 }
 
-.donut-chart {
-  width: 132px;
-  height: 132px;
-}
-
 .donut-center {
   position: absolute;
   inset: 0;