Componentize dashboard middle section and add Mento brand assets.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-09-01 16:05:29 +03:30
parent da6c494fcb
commit 57fa6c8d12
15 changed files with 1491 additions and 1015 deletions
@@ -0,0 +1,163 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { toFaDigits } from '@/lib/jalali';
+import type { HomeDashboardSourceDto } from '@mento/shared';
+
+const props = defineProps<{
+  sources: HomeDashboardSourceDto[];
+}>();
+
+const colors = ['#14b8a6', '#38bdf8', '#fb923c', '#fbbf24', '#94a3b8', '#a78bfa'];
+
+const segments = computed(() => {
+  let offset = 0;
+  return props.sources.map((s, i) => {
+    const seg = { ...s, color: colors[i % colors.length], offset };
+    offset += s.percent;
+    return seg;
+  });
+});
+
+const total = computed(() => props.sources.reduce((a, s) => a + s.count, 0));
+</script>
+
+<template>
+  <article class="panel">
+    <header class="panel-head">
+      <h2>منابع مشتریان</h2>
+    </header>
+
+    <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>
+        <div class="donut-center">
+          <strong>{{ toFaDigits(total) }}</strong>
+          <span>مشتری</span>
+        </div>
+      </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>
+      </ul>
+    </div>
+  </article>
+</template>
+
+<style scoped>
+.panel {
+  background: #fff;
+  border-radius: 22px;
+  padding: 1.05rem 1.15rem;
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
+  border: 1px solid #eef2f7;
+  min-width: 0;
+}
+
+.panel-head {
+  margin-bottom: 0.85rem;
+}
+
+h2 {
+  margin: 0;
+  font-size: 0.98rem;
+  color: #0f172a;
+}
+
+.donut-wrap {
+  display: grid;
+  grid-template-columns: 140px 1fr;
+  gap: 1rem;
+  align-items: center;
+}
+
+.donut-chart-box {
+  position: relative;
+  width: 140px;
+  height: 140px;
+}
+
+.donut-chart {
+  width: 140px;
+  height: 140px;
+}
+
+.donut-center {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-content: center;
+  text-align: center;
+  gap: 0.05rem;
+  pointer-events: none;
+}
+
+.donut-center strong {
+  font-size: 1.2rem;
+  color: #0f172a;
+}
+
+.donut-center span {
+  font-size: 0.72rem;
+  color: #94a3b8;
+}
+
+.donut-legend {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: 0.5rem;
+  font-size: 0.82rem;
+}
+
+.donut-legend li {
+  display: flex;
+  align-items: center;
+  gap: 0.45rem;
+}
+
+.lbl {
+  flex: 1;
+  color: #475569;
+}
+
+em {
+  font-style: normal;
+  color: #94a3b8;
+  font-weight: 700;
+}
+
+.dot {
+  width: 9px;
+  height: 9px;
+  border-radius: 999px;
+  flex-shrink: 0;
+}
+
+@media (max-width: 500px) {
+  .donut-wrap {
+    grid-template-columns: 1fr;
+    justify-items: center;
+  }
+}
+</style>