From b7f8bf7e0fdbcbbf0fe951cd6326356e621e8a34 Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Mon, 20 Jul 2026 19:46:18 +0700
Subject: [PATCH] fix: adjust grid layout in StatCard component for better
 responsiveness and update RupiahText component to support short format

---
 resources/js/components/card/StatCard.vue      |  6 +++---
 resources/js/components/display/RupiahText.vue | 11 +++++++++--
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/resources/js/components/card/StatCard.vue b/resources/js/components/card/StatCard.vue
index f126b0a..5ffbc7b 100644
--- a/resources/js/components/card/StatCard.vue
+++ b/resources/js/components/card/StatCard.vue
@@ -31,7 +31,7 @@ withDefaults(defineProps<Props>(), {
         </CardHeader>
         <CardContent>
             <div class="space-y-3">
-                <div>
+                <div class="text-left">
                     <p v-if="mainLabel" class="text-xs text-muted-foreground">
                         {{ mainLabel }}
                     </p>
@@ -40,8 +40,8 @@ withDefaults(defineProps<Props>(), {
                         {{ subLabel }}
                     </p>
                 </div>
-                <div class="border-t pt-2 text-center"
-                    :class="cols === 2 ? 'grid grid-cols-2 gap-2' : 'grid grid-cols-3 gap-2'">
+                <div class="border-t pt-2 text-left"
+                    :class="cols === 2 ? 'grid grid-cols-1 sm:grid-cols-2 gap-2' : 'grid grid-cols-1 sm:grid-cols-3 gap-2'">
                     <div v-for="item in items" :key="item.label">
                         <p class="text-xs text-muted-foreground">{{ item.label }}</p>
                         <p class="text-sm font-semibold" :class="item.color ?? ''">
diff --git a/resources/js/components/display/RupiahText.vue b/resources/js/components/display/RupiahText.vue
index 2d6b55a..b9c25d1 100644
--- a/resources/js/components/display/RupiahText.vue
+++ b/resources/js/components/display/RupiahText.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { computed } from 'vue';
-import { formatRupiah } from '@/lib/rupiah';
+import { formatRupiah, formatRupiahShort } from '@/lib/rupiah';
 
 const props = defineProps<{
     amount: number | string;
     formatted?: string | null;
+    short?: boolean;
 }>();
 
 const display = computed(() => {
@@ -16,7 +17,13 @@ const display = computed(() => {
         ? Number.parseInt(props.amount, 10)
         : props.amount;
 
-    return `Rp ${formatRupiah(Number.isFinite(numericAmount) ? numericAmount : 0)}`;
+    const safeAmount = Number.isFinite(numericAmount) ? numericAmount : 0;
+
+    if (props.short) {
+        return `Rp ${formatRupiahShort(safeAmount)}`;
+    }
+
+    return `Rp ${formatRupiah(safeAmount)}`;
 });
 </script>