fix(finance): Hide numbers in watchlist card and improve distribution

resources/js/Components/widgets/CardStat.vue

@@ -1,13 +1,21 @@
 <script setup lang="ts">
+import MoneyPresenter from '../molecules/MoneyPresenter.vue';
+
 defineProps<{
   label: string;
   value: string | number;
+  isMoney?: boolean;
 }>();
 </script>
 
 <template>
     <article class="w-full text-center capitalize ">
-        <h4 class="font-bold text-secondary">{{ value }}</h4>
+        <h4 class="font-bold text-secondary">
+            <MoneyPresenter :value="value" class="mr-2" v-if="isMoney"/>
+            <span v-else>
+                {{ value }}
+            </span>
+        </h4>
         <p class="text-body-1">{{ label }}</p>
     </article>
 </template>

resources/js/Pages/Finance/WatchlistShow.vue

@@ -153,12 +153,13 @@ const categories = computed(() => {
       />
 
       <template #panel>
-        <section class="fixed space-y-2 px-4">
+        <section class="grid grid-cols-2 gap-2 pt-4">
             <WatchlistSummaryCard
                 v-for="item in watchlist"
                 :startDate="pageState.dates.startDate"
                 :item="item"
                 @click="onClick(item.id)"
+                class="w-full"
             />
         </section>
       </template>

resources/js/domains/watchlist/components/WatchlistSummaryCard.vue

@@ -37,7 +37,8 @@ defineProps<{
         <main class="py-2 px-4 flex space-x-2">
             <CardStat
                 label="This month"
-                :value="formatMoney(item.data?.month?.total)"
+                is-money
+                :value="item.data?.month?.total"
             />
             <CardStat
                 label="transactions"