# 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

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

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