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> </CardHeader>
<CardContent> <CardContent>
<div class="space-y-3"> <div class="space-y-3">
<div> <div class="text-left">
<p v-if="mainLabel" class="text-xs text-muted-foreground"> <p v-if="mainLabel" class="text-xs text-muted-foreground">
{{ mainLabel }} {{ mainLabel }}
</p> </p>
@ -40,8 +40,8 @@ withDefaults(defineProps<Props>(), {
{{ subLabel }} {{ subLabel }}
</p> </p>
</div> </div>
<div class="border-t pt-2 text-center" <div class="border-t pt-2 text-left"
:class="cols === 2 ? 'grid grid-cols-2 gap-2' : 'grid grid-cols-3 gap-2'"> :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"> <div v-for="item in items" :key="item.label">
<p class="text-xs text-muted-foreground">{{ item.label }}</p> <p class="text-xs text-muted-foreground">{{ item.label }}</p>
<p class="text-sm font-semibold" :class="item.color ?? ''"> <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"> <script setup lang="ts">
import { computed } from 'vue'; import { computed } from 'vue';
import { formatRupiah } from '@/lib/rupiah'; import { formatRupiah, formatRupiahShort } from '@/lib/rupiah';
const props = defineProps<{ const props = defineProps<{
amount: number | string; amount: number | string;
formatted?: string | null; formatted?: string | null;
short?: boolean;
}>(); }>();
const display = computed(() => { const display = computed(() => {
@ -16,7 +17,13 @@ const display = computed(() => {
? Number.parseInt(props.amount, 10) ? Number.parseInt(props.amount, 10)
: props.amount; : 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> </script>