web/docs/history/2026-07-24-component-price-display.md

Component PriceDisplay

Tanggal: 2026-07-24 Status: Selesai

Tujuan

Membuat component reusable untuk menampilkan dan menginput format harga Rupiah.

Yang Dikerjakan

1. Component PriceDisplay

• Menggunakan InputGroup dengan prefix Rp
• Support 2 mode: display (readonly) dan input (editable)
• Format angka dengan pemisah titik (1.000.000)
• Input type text dengan inputmode="numeric" agar format titik berfungsi

2. Integrasi

• Tabel plans: menampilkan harga dengan format Rp 50.000
• Form plans: input harga dengan format Rp

File yang Diubah

File	Aksi	Detail
web2/app/components/PriceDisplay.vue	Dibuat	Component PriceDisplay
web2/app/pages/admin/plans/columns.ts	Diubah	Format harga di tabel
web2/app/pages/admin/plans/index.vue	Diubah	Input harga pakai PriceDisplay

Props

Prop	Tipe	Default	Deskripsi
value	number	-	Nilai harga (display mode)
modelValue	string	-	v-model (input mode)
placeholder	string	'0'	Placeholder input
readonly	boolean	false	Readonly mode
disabled	boolean	false	Disabled mode

Contoh Penggunaan

<!-- Display -->
<PriceDisplay :value="50000" :readonly="true" />
<!-- Output: [Rp] [50.000] -->

<!-- Input -->
<PriceDisplay v-model="form.price" />
<!-- Output: [Rp] [0 (editable)] -->