feat: enrich dashboard filters and feedback

2026-08-20 22:31:41 +03:30
parent 9ce2e6ec83
commit 458ab69a3c
24 changed files with 1895 additions and 340 deletions
--- a/src/lib/components/FeeShareDonut.svelte
+++ b/src/lib/components/FeeShareDonut.svelte
@@ -0,0 +1,55 @@
+<script lang="ts">
+  import CircleHelpIcon from '@lucide/svelte/icons/circle-help';
+
+  import { Card, CardContent } from '$lib/components/ui/card';
+  import * as Tooltip from '$lib/components/ui/tooltip';
+  import { formatPercent } from '$lib/format';
+
+  let { value }: { value: string | null } = $props();
+  const percent = $derived(value === null ? 0 : Math.max(0, Math.min(100, Number(value))));
+</script>
+
+<Card class="rounded-lg shadow-xs">
+  <CardContent class="flex h-full items-center gap-4 p-4 sm:p-5">
+    <div
+      class="relative grid size-24 shrink-0 place-items-center"
+      role="img"
+      aria-label={`سهم کارمزد ${formatPercent(value)}`}
+    >
+      <svg class="size-full -rotate-90" viewBox="0 0 42 42" aria-hidden="true">
+        <circle cx="21" cy="21" r="15.9" fill="none" stroke="var(--muted)" stroke-width="4" />
+        <circle
+          cx="21"
+          cy="21"
+          r="15.9"
+          fill="none"
+          stroke="var(--primary)"
+          stroke-width="4"
+          stroke-linecap="round"
+          pathLength="100"
+          stroke-dasharray={`${percent} ${100 - percent}`}
+          class="transition-[stroke-dasharray] duration-700 motion-reduce:transition-none"
+        />
+      </svg>
+      <strong class="absolute text-sm tabular-nums">{formatPercent(value)}</strong>
+    </div>
+    <div class="min-w-0">
+      <div class="flex items-center gap-1.5">
+        <h2 class="text-sm font-semibold">سهم کارمزد از پرداخت موفق</h2>
+        <Tooltip.Root>
+          <Tooltip.Trigger
+            aria-label="روش محاسبه سهم کارمزد"
+            class="text-muted-foreground hover:text-primary -m-3 inline-flex size-11 items-center justify-center"
+            ><CircleHelpIcon class="size-4" /></Tooltip.Trigger
+          >
+          <Tooltip.Content class="max-w-72 text-right leading-6"
+            >کارمزد ثبت‌شده تقسیم بر مبلغ پرداخت‌های موفق در همین بازه.</Tooltip.Content
+          >
+        </Tooltip.Root>
+      </div>
+      <p class="text-muted-foreground mt-2 text-xs leading-6">
+        بخش آبی، سهم واقعی کارمزد را از کل مبلغ موفق این بازه نشان می‌دهد.
+      </p>
+    </div>
+  </CardContent>
+</Card>