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

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

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

@@ -7,18 +7,28 @@ const props = defineProps<{
   sources: HomeDashboardSourceDto[];
 }>();
 
-const colors = ['#14b8a6', '#38bdf8', '#fb923c', '#fbbf24', '#94a3b8', '#a78bfa'];
+const demoSources: HomeDashboardSourceDto[] = [
+  { label: 'معرفی دوستان', count: 44, percent: 34 },
+  { label: 'وب‌سایت', count: 33, percent: 26 },
+  { label: 'شبکه‌های اجتماعی', count: 23, percent: 18 },
+  { label: 'تبلیغات', count: 18, percent: 14 },
+  { label: 'سایر', count: 10, percent: 8 },
+];
+
+const colors = ['#2563eb', '#14b8a6', '#22c55e', '#fb923c', '#94a3b8'];
+
+const rows = computed(() => (props.sources.length ? props.sources : demoSources));
 
 const segments = computed(() => {
   let offset = 0;
-  return props.sources.map((s, i) => {
+  return rows.value.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));
+const total = computed(() => rows.value.reduce((a, s) => a + s.count, 0));
 </script>
 
 <template>
@@ -66,39 +76,39 @@ const total = computed(() => props.sources.reduce((a, s) => a + s.count, 0));
 <style scoped>
 .panel {
   background: #fff;
-  border-radius: 22px;
-  padding: 1.05rem 1.15rem;
+  border-radius: 20px;
+  padding: 1rem 1.1rem;
   box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
   border: 1px solid #eef2f7;
   min-width: 0;
 }
 
 .panel-head {
-  margin-bottom: 0.85rem;
+  margin-bottom: 0.75rem;
 }
 
 h2 {
   margin: 0;
-  font-size: 0.98rem;
+  font-size: 0.95rem;
   color: #0f172a;
 }
 
 .donut-wrap {
   display: grid;
-  grid-template-columns: 140px 1fr;
-  gap: 1rem;
+  grid-template-columns: 132px 1fr;
+  gap: 0.85rem;
   align-items: center;
 }
 
 .donut-chart-box {
   position: relative;
-  width: 140px;
-  height: 140px;
+  width: 132px;
+  height: 132px;
 }
 
 .donut-chart {
-  width: 140px;
-  height: 140px;
+  width: 132px;
+  height: 132px;
 }
 
 .donut-center {
@@ -112,12 +122,12 @@ h2 {
 }
 
 .donut-center strong {
-  font-size: 1.2rem;
+  font-size: 1.15rem;
   color: #0f172a;
 }
 
 .donut-center span {
-  font-size: 0.72rem;
+  font-size: 0.7rem;
   color: #94a3b8;
 }
 
@@ -126,14 +136,14 @@ h2 {
   margin: 0;
   padding: 0;
   display: grid;
-  gap: 0.5rem;
-  font-size: 0.82rem;
+  gap: 0.48rem;
+  font-size: 0.8rem;
 }
 
 .donut-legend li {
   display: flex;
   align-items: center;
-  gap: 0.45rem;
+  gap: 0.4rem;
 }
 
 .lbl {
@@ -148,8 +158,8 @@ em {
 }
 
 .dot {
-  width: 9px;
-  height: 9px;
+  width: 8px;
+  height: 8px;
   border-radius: 999px;
   flex-shrink: 0;
 }