feat(admin,api,player): settlement stats, team crests, MS fields and list bet summary

apps/player/src/views/ProfileView.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, computed } from 'vue';
 import { useRouter, RouterLink } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import api from '../api';
@@ -21,10 +21,44 @@ const profile = ref<{
 
 const rulesExpanded = ref(false);
 
+const displayAmount = ref(0);
+const animating = ref(false);
+
+function amountValue(value: unknown): number {
+  if (value == null) return 0;
+  const n = Number(value);
+  return Number.isFinite(n) ? n : 0;
+}
+
+function runCountUp(target: number) {
+  const duration = 3000;
+  const start = performance.now();
+  animating.value = true;
+  function step(now: number) {
+    const progress = Math.min((now - start) / duration, 1);
+    const eased = 1 - Math.pow(1 - progress, 5);
+    displayAmount.value = target * eased;
+    if (progress < 1) {
+      requestAnimationFrame(step);
+    } else {
+      displayAmount.value = target;
+      animating.value = false;
+    }
+  }
+  requestAnimationFrame(step);
+}
+
+const displayedBalance = computed(() =>
+  animating.value
+    ? formatMoney(displayAmount.value, locale.value)
+    : formatMoney(profile.value?.wallet?.availableBalance, locale.value),
+);
+
 onMounted(async () => {
   const { data } = await api.get('/player/profile');
   profile.value = data.data;
   initFromUser(data.data?.locale);
+  runCountUp(amountValue(data.data?.wallet?.availableBalance));
 });
 
 async function changeLocale(code: string) {
@@ -48,7 +82,7 @@ function logout() {
             <LocaleFlag :locale="locale" :size="14" />
             {{ t('wallet.balance') }}
           </span>
-          <p class="card-balance">{{ formatMoney(profile?.wallet?.availableBalance, locale) }}</p>
+          <p class="card-balance">{{ displayedBalance }}</p>
         </div>
         <div class="card-foot">
           <div class="card-holder">