dst/store
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: adjust grid layout in StatCard component for better responsiveness and update RupiahText component to support short format
Some checks are pending
linter / quality (push) Waiting to run
Details
tests / ci (8.3) (push) Waiting to run
Details
tests / ci (8.4) (push) Waiting to run
Details
tests / ci (8.5) (push) Waiting to run
Details

Browse Source
This commit is contained in:
Yoga Pangestu 2026-07-20 19:46:18 +07:00
parent ed2cb2e53d
commit b7f8bf7e0f
2 changed files with 12 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
resources/js/components/card/StatCard.vue
View File

@ -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 ?? ''">

11
resources/js/components/display/RupiahText.vue
View File

@ -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>