# Confirmation Modal Components

Sistem confirmation modal yang modular dan dapat digunakan kembali di seluruh aplikasi.

## Components

### 1. `confirmation.vue` - Base Confirmation Modal

Komponen dasar untuk modal konfirmasi yang dapat dikustomisasi.

**Props:**
- `open?: boolean` - Status modal (terbuka/tertutup)
- `title?: string` - Judul modal (default: "Konfirmasi")
- `message?: string` - Pesan konfirmasi (default: "Apakah Anda yakin ingin melanjutkan?")
- `confirmText?: string` - Text tombol konfirmasi (default: "Ya")
- `cancelText?: string` - Text tombol batal (default: "Batal")
- `variant?: 'default' | 'destructive' | 'warning'` - Varian tampilan (default: "default")
- `size?: 'sm' | 'md' | 'lg' | 'xl'` - Ukuran modal (default: "md")

**Events:**
- `@confirm` - Dipanggil saat tombol konfirmasi diklik
- `@cancel` - Dipanggil saat tombol batal diklik
- `@update:open` - Dipanggil saat status modal berubah

**Contoh penggunaan:**
```vue
<template>
  <Confirmation
    v-model:open="isConfirmOpen"
    title="Hapus Data"
    message="Apakah Anda yakin ingin menghapus data ini?"
    confirm-text="Hapus"
    variant="destructive"
    @confirm="handleConfirm"
    @cancel="handleCancel"
  />
</template>
```

### 2. `record-confirmation.vue` - Record-specific Confirmation

Komponen khusus untuk konfirmasi operasi pada record/data tertentu.

**Props:**
- `open?: boolean` - Status modal
- `action?: 'delete' | 'deactivate' | 'activate' | 'archive' | 'restore'` - Jenis aksi (default: "delete")
- `record?: RecordData | null` - Data record yang akan diproses
- `customTitle?: string` - Custom judul (opsional)
- `customMessage?: string` - Custom pesan (opsional)
- `customConfirmText?: string` - Custom text tombol konfirmasi (opsional)
- `customCancelText?: string` - Custom text tombol batal (opsional)

**Events:**
- `@confirm` - Dipanggil dengan parameter `(record, action)`
- `@cancel` - Dipanggil saat batal
- `@update:open` - Update status modal

**Contoh penggunaan:**
```vue
<template>
  <RecordConfirmation
    v-model:open="isRecordConfirmOpen"
    action="delete"
    :record="selectedRecord"
    @confirm="handleDeleteRecord"
    @cancel="handleCancel"
  >
    <template #default="{ record }">
      <div class="text-sm">
        <p><strong>ID:</strong> {{ record?.id }}</p>
        <p><strong>Nama:</strong> {{ record?.name }}</p>
      </div>
    </template>
  </RecordConfirmation>
</template>
```

## Action Types

Record confirmation mendukung beberapa jenis aksi dengan konfigurasi default:

- **delete**: Hapus data (variant: destructive, warna merah)
- **deactivate**: Nonaktifkan data (variant: warning, warna kuning)
- **activate**: Aktifkan data (variant: default, warna biru)
- **archive**: Arsipkan data (variant: warning, warna kuning)
- **restore**: Pulihkan data (variant: default, warna biru)

## Integration Example

Contoh implementasi di komponen list:

```vue
<script setup>
// State management
const isRecordConfirmationOpen = ref(false)
const selectedRecord = ref(null)
const confirmAction = ref('delete')

// Handle action dari table
function handleRowAction(action, record) {
  selectedRecord.value = record
  confirmAction.value = action
  isRecordConfirmationOpen.value = true
}

// Handle konfirmasi
async function handleConfirmAction(record, action) {
  try {
    // API call berdasarkan action
    await performAction(action, record.id)
    // Refresh data
    await refreshData()
  } catch (error) {
    // Handle error
  }
}
</script>

<template>
  <!-- Your list component -->
  <DataTable @action="handleRowAction" />
  
  <!-- Confirmation modal -->
  <RecordConfirmation
    v-model:open="isRecordConfirmationOpen"
    :action="confirmAction"
    :record="selectedRecord"
    @confirm="handleConfirmAction"
  />
</template>
```

## Styling

Komponen menggunakan Tailwind CSS dan shadcn/ui components. Pastikan dependencies berikut tersedia:
- `~/components/pub/custom-ui/modal/dialog.vue`
- `~/components/pub/ui/button`