Add manager bonus account pages

app/components/bonus/AccountCard.vue

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+type BonusCardStat = {
+  label: string;
+  value: string;
+};
+
+type BonusCardLink = {
+  id: string;
+  refereeName: string;
+  refereeEmail: string;
+  refereeCompanyName?: string | null;
+  bonusPercent: number;
+};
+
+withDefaults(defineProps<{
+  fullName: string;
+  email: string;
+  companyName?: string | null;
+  balance: number;
+  stats?: BonusCardStat[];
+  sourceLinks?: BonusCardLink[];
+  detailTo?: string;
+  detailLabel?: string;
+}>(), {
+  companyName: null,
+  stats: () => [],
+  sourceLinks: () => [],
+  detailTo: '',
+  detailLabel: 'Открыть',
+});
+
+function formatAmount(value: number) {
+  return new Intl.NumberFormat('ru-RU', {
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 2,
+  }).format(value);
+}
+</script>
+
+<template>
+  <article class="surface-card rounded-3xl p-5">
+    <div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+      <div class="space-y-1">
+        <h2 class="text-lg font-bold text-[#123824]">{{ fullName }}</h2>
+        <p class="text-sm text-[#466653]">{{ email }}</p>
+        <p v-if="companyName" class="text-sm text-[#466653]">{{ companyName }}</p>
+      </div>
+
+      <NuxtLink
+        v-if="detailTo"
+        :to="detailTo"
+        class="btn btn-accent btn-sm w-fit border-0"
+      >
+        {{ detailLabel }}
+      </NuxtLink>
+    </div>
+
+    <div class="mt-5 rounded-[28px] bg-[linear-gradient(135deg,#123824_0%,#0d854a_100%)] px-5 py-4 text-white">
+      <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-white/70">Доступный бонус</p>
+      <p class="mt-2 text-3xl font-black leading-none">{{ formatAmount(balance) }}</p>
+    </div>
+
+    <dl
+      v-if="stats.length"
+      class="mt-4 divide-y divide-[#deebe4] rounded-2xl border border-[#deebe4] bg-white"
+    >
+      <div
+        v-for="stat in stats"
+        :key="stat.label"
+        class="flex items-center justify-between gap-3 px-4 py-3 text-sm"
+      >
+        <dt class="text-[#5c7b69]">{{ stat.label }}</dt>
+        <dd class="text-right font-semibold text-[#123824]">{{ stat.value }}</dd>
+      </div>
+    </dl>
+
+    <div class="mt-4 space-y-2 rounded-2xl bg-[#f4faf6] p-4 text-sm text-[#355947]">
+      <p class="font-semibold text-[#123824]">Начисление идёт с заказов:</p>
+      <div v-if="sourceLinks.length" class="space-y-2">
+        <div
+          v-for="link in sourceLinks"
+          :key="link.id"
+          class="rounded-2xl bg-white px-3 py-2"
+        >
+          <p class="font-medium text-[#123824]">{{ link.refereeName }}</p>
+          <p>{{ link.refereeCompanyName || link.refereeEmail }}</p>
+          <p class="text-xs text-[#5c7b69]">Бонус: {{ link.bonusPercent }}%</p>
+        </div>
+      </div>
+      <p v-else class="rounded-2xl bg-white px-3 py-2 text-[#5c7b69]">
+        Активных связок пока нет.
+      </p>
+    </div>
+  </article>
+</template>