initial: bootstrap from BukidBountyApp base

resources/js/Components/Core/Stats/BalanceBox.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="tf-container">
+    <div class="tf-balance-box" :style="boxStyle">
+      <!-- Balance stats -->
+      <div id="balance_wrapper">
+        <div class="balance">
+          <StatsDetailsRow :stats="stats" />
+        </div>
+      </div>
+
+      <!-- Footer action buttons -->
+      <WalletFooter
+        :items="footerItems"
+        @item-click="(item, idx) => $emit('footer-click', item, idx)"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import StatsDetailsRow from './StatsDetailsRow.vue'
+import WalletFooter    from './WalletFooter.vue'
+
+defineProps({
+  /**
+   * Stats: Array of { title, number, unit, align?, numberId? }
+   */
+  stats:       { type: Array, required: true },
+  /**
+   * Footer items: Array of { title, icon?, subtitles? }
+   */
+  footerItems: { type: Array, required: true },
+  boxStyle:    { type: String, default: 'border: solid 2px var(--border-color);' },
+})
+
+defineEmits(['footer-click'])
+</script>

resources/js/Components/Core/Stats/CardStatsDetails.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="col br-right">
+    <div :class="`inner-${align} ${align === 'left' ? 'ps-3' : 'pe-3'}`">
+      <p>{{ title }}</p>
+      <h3 :id="numberId">{{ number }}</h3>
+      <span>{{ unit }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  title:    { type: String, default: '' },
+  number:   { type: [Number, String], default: 0 },
+  unit:     { type: String, default: '' },
+  align:    { type: String, default: 'left', validator: v => ['left', 'right'].includes(v) },
+  numberId: { type: String, default: '' },
+})
+</script>

resources/js/Components/Core/Stats/StatsDetailsRow.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="row">
+    <CardStatsDetails
+      v-for="(stat, index) in stats"
+      :key="index"
+      :title="stat.title"
+      :number="stat.number"
+      :unit="stat.unit"
+      :align="stat.align || 'left'"
+      :number-id="stat.numberId || ''"
+    />
+  </div>
+</template>
+
+<script setup>
+import CardStatsDetails from './CardStatsDetails.vue'
+
+defineProps({
+  /**
+   * Array of stat objects: { title, number, unit, align?, numberId? }
+   */
+  stats: { type: Array, required: true },
+})
+</script>

resources/js/Components/Core/Stats/WalletFooter.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="wallet-footer">
+    <ul class="d-flex justify-content-between align-items-center">
+      <WalletFooterItem
+        v-for="(item, index) in items"
+        :key="index"
+        :title="item.title"
+        :icon="item.icon || ''"
+        :icon-width="item.iconWidth || 30"
+        :icon-height="item.iconHeight || 30"
+        :subtitles="item.subtitles || []"
+        @click="$emit('item-click', item, index)"
+      />
+    </ul>
+  </div>
+</template>
+
+<script setup>
+import WalletFooterItem from './WalletFooterItem.vue'
+
+defineProps({
+  /**
+   * Array of item objects: { title, icon?, iconWidth?, iconHeight?, subtitles? }
+   */
+  items: { type: Array, required: true },
+})
+
+defineEmits(['item-click'])
+</script>

resources/js/Components/Core/Stats/WalletFooterItem.vue

@@ -0,0 +1,35 @@
+<template>
+  <li class="wallet-card-item px-3">
+    <a
+      class="fw_6 text-center"
+      href="javascript:void(0);"
+      @click="$emit('click', $event)"
+    >
+      <ul>
+        <li class="path1">{{ subtitles[0] || '' }}</li>
+        <li class="path2">{{ subtitles[1] || '' }}</li>
+        <li class="path3">{{ subtitles[2] || '' }}</li>
+        <li class="path4">{{ subtitles[3] || '' }}</li>
+      </ul>
+      <IconImage v-if="icon" :src="icon" :width="iconWidth" :height="iconHeight" />
+      {{ title }}
+    </a>
+  </li>
+</template>
+
+<script setup>
+import IconImage from '../IconImage.vue'
+
+defineProps({
+  title:      { type: String, default: '' },
+  icon:       { type: String, default: '' },
+  iconWidth:  { type: [String, Number], default: 30 },
+  iconHeight: { type: [String, Number], default: 30 },
+  /**
+   * Array of up to 4 subtitle strings
+   */
+  subtitles: { type: Array, default: () => [] },
+})
+
+defineEmits(['click'])
+</script>