@initsolusidigital/worksuite-shell 0.0.0-stage → 0.3.0

package/src/components/dataTools/AppImportExport.vue

@@ -0,0 +1,724 @@
+<script setup>
+import { ref, computed, watch, useSlots } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useDataImportExport } from '@initsolusidigital/worksuite-core/composables/useDataImportExport.js'
+import { useToast } from '@initsolusidigital/worksuite-core/composables/useToast.js'
+import AppButton from '@initsolusidigital/worksuite-ui/AppButton.vue'
+import AppModal from '@initsolusidigital/worksuite-ui/AppModal.vue'
+import AppAlert from '@initsolusidigital/worksuite-ui/AppAlert.vue'
+import AppCombobox from '@initsolusidigital/worksuite-ui/AppCombobox.vue'
+import AppToggle from '@initsolusidigital/worksuite-ui/AppToggle.vue'
+import AppImportSchemaGuide from './AppImportSchemaGuide.vue'
+import { Upload, Download, FileDown, Printer, CheckCircle2, XCircle, Loader2, ChevronDown, ChevronRight, Info } from '@lucide/vue'
+
+// Komponen generik Import/Export lintas-modul. App tinggal memasangnya di toolbar
+// halaman list dgn `module` + gate `can_create`/`can_export`. Tombol Impor + Ekspor (dropdown
+// CSV/XLSX) + Cetak Laporan. Kontrak: track-dp2-pc2-hx.md §3 (mesin lama) dan
+// data-import-export.md (mesin wizard).
+//
+// Dua mesin impor, dipilih lewat prop `engine`:
+//   legacy — berkas harus mengikuti template; dry-run hanya memeriksa valid/tidak. Baris TIDAK
+//            dicocokkan ke data yang sudah ada, jadi mengimpor ulang berkas hasil ekspor
+//            menggandakan seluruh isinya tanpa satu peringatan pun.
+//   wizard — peta kolom mengikuti berkas, baris dicocokkan lewat kunci (bawaan `ref` = ID asli dari
+//            ekspor), dan dry-run menampilkan RENCANA (baru/diperbarui/dilewati/konflik) sebelum
+//            apa pun ditulis.
+// Bawaan tetap `legacy` supaya layar yang sudah memakai komponen ini tak berubah perilaku sampai
+// dipindahkan satu per satu.
+const props = defineProps({
+  module: { type: String, required: true },
+  companyId: { type: [String, Number], required: true },
+  // Filter/search aktif tabel — dikirim apa adanya ke export (backend hormati filter yang sama)
+  exportParams: { type: Object, default: () => ({}) },
+  canImport: { type: Boolean, default: false },
+  canExport: { type: Boolean, default: false },
+  engine: {
+    type: String,
+    default: 'legacy',
+    validator: (v) => ['legacy', 'wizard'].includes(v),
+  },
+  // Tombol Cetak Laporan. Dimatikan di layar yang tujuannya memindah data, bukan membaca laporan.
+  report: { type: Boolean, default: true },
+})
+const emit = defineEmits(['imported'])
+
+const { t, locale, getLocaleMessage } = useI18n()
+const slots = useSlots()
+const { pushToast } = useToast()
+const io = useDataImportExport(props.companyId, props.module)
+const isWizard = computed(() => props.engine === 'wizard')
+// Mesin lama melaporkan baris ber-ref yang sudah ada sebagai `skipped_existing` (di akar respons
+// dry-run, juga di `session.plan`).
+const legacySkipped = computed(() => Number(io.dryRunResult.value?.skipped_existing ?? io.session.value?.plan?.skipped_existing ?? 0))
+
+// ── Import modal ──────────────────────────────────────────────────────────────
+const showImport = ref(false)
+const fileInput = ref(null)
+
+function openImport() {
+  if (isWizard.value) {
+    io.wizardReset()
+    showImport.value = true
+    // Wizard selalu butuh skema (mode, kunci, daftar field target) — bukan hanya untuk panduan.
+    io.loadSchema().then(() => { if (!io.wKeyColumn.value) io.wKeyColumn.value = io.defaultKeyColumn() })
+    return
+  }
+  io.reset()
+  showImport.value = true
+  // Skema hanya diambil bila halaman tak memasok panduannya sendiri lewat slot `guide`.
+  if (!slots.guide) io.loadSchema()
+}
+function closeImport() {
+  showImport.value = false
+  if (isWizard.value) {
+    if (io.wStep.value !== 'processing') io.wizardReset()
+    return
+  }
+  // biarkan polling lanjut bila sedang processing (emit 'imported' tetap terpicu saat selesai)
+  if (io.step.value !== 'processing') io.reset()
+}
+function onFileChange(e) {
+  const f = e.target.files?.[0]
+  if (f) io.setFile(f)
+}
+function doCommit() {
+  io.commit((s) => emit('imported', s))
+}
+
+const importErrText = (code) => ({
+  template: t('dataTools.import.errTemplate'),
+  dryrun: t('dataTools.import.errDryRun'),
+  commit: t('dataTools.import.errCommit'),
+  errors: t('dataTools.import.errErrors'),
+}[code] || code)
+
+// ── Export dropdown ───────────────────────────────────────────────────────────
+const exportMenu = ref(false)
+function doExport(format) {
+  exportMenu.value = false
+  io.exportData(format, props.exportParams)
+}
+
+// ── Cetak laporan ─────────────────────────────────────────────────────────────
+// Filter yang sama dengan export: laporan yang mencetak SELURUH data sementara layarnya
+// menampilkan hasil terfilter membuat user menyimpulkan filternya tidak bekerja.
+function doPrint() {
+  io.printReport(props.exportParams)
+}
+
+// ── Wizard ────────────────────────────────────────────────────────────────────
+const WIZARD_STEPS = ['upload', 'configure', 'plan', 'result']
+const wizardStepIndex = computed(() => {
+  const s = io.wStep.value
+  return WIZARD_STEPS.indexOf(['processing', 'done', 'failed'].includes(s) ? 'result' : s)
+})
+
+function onWizardFileChange(e) {
+  const f = e.target.files?.[0]
+  if (f) io.wizardSetFile(f)
+}
+
+const schemaFields = computed(() => io.schema.value?.fields ?? [])
+const headers = computed(() => io.wInspect.value?.source_headers?.headers ?? [])
+const firstSample = computed(() => io.wInspect.value?.source_headers?.samples?.[0] ?? {})
+const customFieldKeys = computed(() => new Set((io.schema.value?.custom_fields ?? []).map((f) => f.key)))
+
+// Opsi "abaikan" memakai nilai penanda, bukan string kosong: pustaka combobox memperlakukan ''
+// sebagai "belum memilih" dan menampilkan placeholder, sehingga kolom yang sengaja diabaikan
+// terlihat seperti kolom yang lupa diisi.
+const IGNORE = '__ignore__'
+const targetOptions = computed(() => [
+  { value: IGNORE, label: t('dataTools.wizard.ignoreColumn') },
+  ...schemaFields.value.map((f) => ({ value: f.key, label: f.key })),
+])
+function targetOf(h) {
+  return io.wMapping.value[h] || IGNORE
+}
+function setTarget(h, v) {
+  io.wMapping.value[h] = !v || v === IGNORE ? '' : v
+}
+
+// Kolom bidang kustom diabaikan mesin wizard (skema sengaja memisahkannya dari `fields`), jadi
+// tidak dihitung "belum dikenali" — kalau dihitung, setiap berkas ekspor dari tenant ber-bidang
+// kustom akan selalu membuka tabel pemetaan padahal tak ada yang bisa dipetakan di sana.
+const unmappedHeaders = computed(() => headers.value.filter((h) => !io.wMapping.value[h] && !customFieldKeys.value.has(h)))
+const customFieldHeaders = computed(() => headers.value.filter((h) => !io.wMapping.value[h] && customFieldKeys.value.has(h)))
+const mappedTargets = computed(() => Object.values(io.wMapping.value).filter(Boolean))
+const duplicateTargets = computed(() => {
+  const seen = new Set()
+  const dup = new Set()
+  for (const f of mappedTargets.value) (seen.has(f) ? dup : seen).add(f)
+  return [...dup]
+})
+const missingRequired = computed(() => schemaFields.value
+  .filter((f) => f.required && !mappedTargets.value.includes(f.key))
+  .map((f) => f.key))
+
+// Tabel pemetaan terbuka sendiri hanya bila ada kolom yang tak dikenali — berkas hasil ekspor
+// Init Worksuite selalu terpetakan penuh, dan memaksa orang memeriksa 20 baris yang sudah benar
+// hanya mengajarinya mengabaikan tabel itu pada saat ia benar-benar perlu dibaca.
+const mappingOpen = ref(false)
+watch(() => io.wInspect.value?.id, (id) => {
+  if (id) mappingOpen.value = unmappedHeaders.value.length > 0
+})
+
+const modeOptions = computed(() => io.schema.value?.modes ?? ['insert', 'complete', 'overwrite'])
+const keyColumns = computed(() => io.schema.value?.key_columns ?? {})
+const hasKeyColumns = computed(() => Object.keys(keyColumns.value).length > 0)
+
+// Label kunci: kamus dulu, cadangannya kalimat backend (English). Dibaca dari kamus locale AKTIF
+// (bukan `te()`, yang di vue-i18n v11 ikut menghitung locale cadangan).
+function keyLabel(key, backendLabel) {
+  const msg = getLocaleMessage(locale.value)?.dataTools?.wizard?.keyColumn?.[key]
+  return typeof msg === 'string' ? msg : (backendLabel || key)
+}
+const keyOptions = computed(() => Object.entries(keyColumns.value)
+  .map(([k, label]) => ({ value: k, label: keyLabel(k, label) })))
+
+// `ref`/`stage_ref` punya cadangan pencocokan di backend (email/nama) bila kolomnya tak dipetakan;
+// kunci lain tidak, sehingga tanpa kolomnya setiap baris diam-diam dianggap baru.
+const keyColumnUnmapped = computed(() => {
+  const k = io.wKeyColumn.value
+  if (!k || ['ref', 'stage_ref'].includes(k)) return false
+  return schemaFields.value.some((f) => f.key === k) && !mappedTargets.value.includes(k)
+})
+
+const showDeactivate = computed(() => !!io.schema.value?.supports_deactivate && io.wMode.value !== 'complete')
+
+const canRunWizardDryRun = computed(() =>
+  mappedTargets.value.length > 0
+  && duplicateTargets.value.length === 0
+  && (!hasKeyColumns.value || !!io.wKeyColumn.value),
+)
+
+const plan = computed(() => io.wPlan.value?.plan ?? null)
+const planTiles = computed(() => {
+  const p = plan.value ?? {}
+  const tiles = [
+    { key: 'new', value: p.new ?? 0, cls: 'text-green-600 dark:text-green-400' },
+    { key: 'updated', value: p.updated ?? 0, cls: 'text-blue-600 dark:text-blue-400' },
+    { key: 'skipped', value: p.skipped_existing ?? 0, cls: 'text-gray-700 dark:text-gray-300' },
+  ]
+  if (io.wPlan.value?.mode && io.wPlan.value.mode !== 'insert') {
+    tiles.push({ key: 'fieldsToFill', value: p.fields_to_fill ?? 0, cls: 'text-gray-700 dark:text-gray-300' })
+  }
+  if (io.wPlan.value?.deactivate_missing) {
+    tiles.push({ key: 'deactivate', value: p.deactivate ?? 0, cls: 'text-amber-600 dark:text-amber-400' })
+  }
+  return tiles
+})
+const conflicts = computed(() => plan.value?.conflicts ?? [])
+const nothingToDo = computed(() => {
+  const p = plan.value
+  return !!p && (io.wPlan.value?.valid_rows ?? 0) > 0 && !p.new && !p.updated && !p.deactivate
+})
+
+const doneCounts = computed(() => {
+  const p = io.wSession.value?.plan ?? plan.value ?? {}
+  return { new: p.new ?? 0, updated: p.updated ?? 0, skipped: p.skipped_existing ?? 0 }
+})
+
+// Galat wizard → kalimat. 422 per-field (`key_column`/`deactivate_missing`/`mapping`) dirangkai
+// apa adanya karena kalimatnya datang dari validasi backend yang tak punya padanan field di layar.
+function wizardErrText(e) {
+  if (!e) return ''
+  switch (e.kind) {
+    case 'sensitive': return t('dataTools.wizard.error.sensitive', { fields: (e.fields ?? []).join(', ') })
+    case 'notReady': return t('dataTools.wizard.error.notReady')
+    case 'tooLarge': return t('dataTools.wizard.error.tooLarge')
+    case 'notFound': return t('dataTools.wizard.error.notFound')
+    case 'forbidden': return t('common.forbidden')
+    case 'network': return t('common.networkError')
+    case 'server': return e.errorId ? t('common.serverErrorWithId', { id: e.errorId }) : t('common.serverError')
+    case 'validation': {
+      const msgs = Object.values(e.fieldErrors ?? {}).filter(Boolean)
+      return msgs.length ? msgs.join(' ') : t('common.validationFailed')
+    }
+    default: return t(`dataTools.wizard.error.${e.kind}`)
+  }
+}
+
+// Validasi (422) cukup tampil di dalam wizard; selain itu toast ikut menyala supaya kegagalannya
+// tetap terlihat walau modal sudah digulung jauh dari tombolnya.
+watch(() => io.wError.value, (e) => {
+  if (e && e.kind !== 'validation') {
+    pushToast({ title: t('dataTools.wizard.toast.failedTitle'), body: wizardErrText(e), variant: 'error' })
+  }
+})
+
+function doWizardCommit() {
+  io.wizardCommit(
+    (s) => {
+      const p = s.plan ?? {}
+      pushToast({
+        title: t('dataTools.wizard.toast.doneTitle'),
+        body: t('dataTools.wizard.done.text', { new: p.new ?? 0, updated: p.updated ?? 0, skipped: p.skipped_existing ?? 0 }),
+        variant: 'success',
+      })
+      emit('imported', s)
+    },
+    () => pushToast({ title: t('dataTools.wizard.toast.failedTitle'), body: t('dataTools.wizard.toast.failedBody'), variant: 'error' }),
+  )
+}
+</script>
+
+<template>
+  <div class="flex flex-wrap items-center gap-2">
+    <!-- ── Impor ── -->
+    <AppButton v-if="canImport" variant="secondary" @click="openImport">
+      <Upload class="w-4 h-4" />{{ t('dataTools.import.button') }}
+    </AppButton>
+
+    <!-- ── Ekspor (dropdown CSV/XLSX) ── -->
+    <div v-if="canExport" class="relative">
+      <AppButton variant="secondary" :loading="!!io.exporting.value" @click="exportMenu = !exportMenu">
+        <Download class="w-4 h-4" />{{ t('dataTools.export.button') }}
+      </AppButton>
+      <template v-if="exportMenu">
+        <div class="fixed inset-0 z-40" @click="exportMenu = false"></div>
+        <div class="absolute right-0 mt-1 z-50 w-44 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-lg py-1">
+          <button class="w-full text-left px-3 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700" @click="doExport('csv')">{{ t('dataTools.export.csv') }}</button>
+          <button class="w-full text-left px-3 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700" @click="doExport('xlsx')">{{ t('dataTools.export.xlsx') }}</button>
+        </div>
+      </template>
+    </div>
+    <!-- ── Cetak Laporan (PDF) ──
+         Digerbang `canExport` yang SAMA, bukan flag baru: kontrak §3 menetapkan Export & Report
+         sama-sama `can_export`. Menambah prop sendiri hanya melahirkan pilihan yang bisa
+         menyimpang dari gerbang backend tanpa ada yang menyadarinya. -->
+    <AppButton v-if="canExport && report" variant="secondary" :loading="io.printing.value" @click="doPrint">
+      <Printer class="w-4 h-4" />{{ t('dataTools.report.button') }}
+    </AppButton>
+
+    <span v-if="io.exportError.value" class="text-xs text-red-600 dark:text-red-400">{{ t('dataTools.export.err') }}</span>
+    <span v-if="io.printError.value" class="text-xs text-red-600 dark:text-red-400">{{ t('dataTools.report.err') }}</span>
+
+    <!-- ── Modal Impor (mesin lama) ── -->
+    <AppModal
+      v-if="showImport && !isWizard"
+      :title="t('dataTools.import.modalTitle')"
+      :subtitle="t('dataTools.import.modalSubtitle')"
+      size="lg"
+      @close="closeImport"
+    >
+      <!-- Step: idle (unduh template + pilih berkas) -->
+      <div v-if="io.step.value === 'idle'" class="space-y-4">
+        <p class="text-sm text-gray-600 dark:text-gray-400">{{ t('dataTools.import.step1Intro') }}</p>
+        <!-- Panduan pengisian: bawaannya diturunkan dari skema importer backend (kolom, wajib-isi,
+             daftar nilai sah tenant), sehingga tak bisa basi terhadap importernya. Slot `guide`
+             menggantikannya untuk modul yang skemanya belum membawa petunjuk format — panduan
+             tulisan tangan di sana harus dicabut begitu skema modul itu lengkap. Tanpa panduan
+             sama sekali, kesalahan baru ketahuan saat dry-run, satu kolom per putaran. -->
+        <slot name="guide">
+          <AppImportSchemaGuide
+            :schema="io.schema.value"
+            :loading="io.schemaLoading.value"
+            :error="io.schemaError.value"
+          />
+        </slot>
+        <AppButton variant="ghost" size="sm" :loading="io.busyTemplate.value" @click="io.downloadTemplate">
+          <FileDown class="w-4 h-4" />{{ t('dataTools.import.downloadTemplate') }}
+        </AppButton>
+
+        <div>
+          <input
+            ref="fileInput"
+            type="file"
+            accept=".csv,.txt,text/csv"
+            class="block w-full text-sm text-gray-600 dark:text-gray-400 file:mr-3 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-medium file:bg-blue-50 file:text-blue-700 dark:file:bg-blue-900/30 dark:file:text-blue-300 hover:file:bg-blue-100 dark:hover:file:bg-blue-900/50"
+            @change="onFileChange"
+          />
+          <p class="mt-1 text-xs text-gray-400">{{ t('dataTools.import.fileHint') }}</p>
+        </div>
+
+        <p v-if="io.importError.value" class="text-xs text-red-600 dark:text-red-400">{{ importErrText(io.importError.value) }}</p>
+      </div>
+
+      <!-- Step: dryrun (ringkasan + preview error) -->
+      <div v-else-if="io.step.value === 'dryrun'" class="space-y-4">
+        <div class="p-3 rounded-lg bg-gray-50 dark:bg-gray-900/40 border border-gray-200 dark:border-gray-700 text-sm text-gray-700 dark:text-gray-300">
+          {{ t('dataTools.import.summary', {
+            total: io.session.value?.total_rows ?? 0,
+            valid: io.session.value?.valid_rows ?? 0,
+            invalid: io.session.value?.invalid_rows ?? 0,
+          }) }}
+        </div>
+
+        <!-- Baris yang ref-nya sama dengan ID data di tenant ini dilewati backend dan TIDAK dihitung
+             valid; tanpa keterangan ini jumlah valid tampak lebih kecil dari isi berkas tanpa sebab. -->
+        <p v-if="legacySkipped" class="flex items-start gap-1.5 text-sm text-blue-700 dark:text-blue-300">
+          <Info class="w-4 h-4 mt-0.5 shrink-0" />{{ t('dataTools.import.skippedExisting', { n: legacySkipped }, legacySkipped) }}
+        </p>
+
+        <p v-if="legacySkipped && !(io.session.value?.valid_rows) && !(io.session.value?.invalid_rows)" class="text-sm text-gray-600 dark:text-gray-300">
+          {{ t('dataTools.import.nothingNew') }}
+        </p>
+        <p v-else-if="!(io.session.value?.invalid_rows)" class="flex items-center gap-1.5 text-sm text-green-600 dark:text-green-400">
+          <CheckCircle2 class="w-4 h-4" />{{ t('dataTools.import.allValid') }}
+        </p>
+
+        <div v-else class="space-y-2">
+          <div class="flex items-center justify-between gap-3">
+            <p class="text-xs font-medium text-gray-500 dark:text-gray-400">{{ t('dataTools.import.previewErrorsTitle') }}</p>
+            <AppButton variant="ghost" size="sm" :loading="io.busyErrors.value" @click="io.downloadErrors">
+              <FileDown class="w-3.5 h-3.5" />{{ t('dataTools.import.downloadErrors') }}
+            </AppButton>
+          </div>
+          <div class="max-h-56 overflow-y-auto scrollbar-rounded rounded-lg border border-gray-200 dark:border-gray-700">
+            <table class="w-full text-sm">
+              <thead class="bg-gray-50 dark:bg-gray-900/40 sticky top-0">
+                <tr class="text-left text-xs text-gray-500 dark:text-gray-400">
+                  <th class="py-2 px-3 font-medium w-16">{{ t('dataTools.import.colLine') }}</th>
+                  <th class="py-2 px-3 font-medium">{{ t('dataTools.import.colErrors') }}</th>
+                </tr>
+              </thead>
+              <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
+                <tr v-for="(e, i) in (io.dryRunResult.value?.preview_errors ?? [])" :key="i">
+                  <td class="py-2 px-3 text-gray-500 dark:text-gray-400 align-top">{{ e.line }}</td>
+                  <td class="py-2 px-3 text-red-600 dark:text-red-400">
+                    <div v-for="(m, j) in e.errors" :key="j">{{ m }}</div>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <p class="text-xs text-amber-600 dark:text-amber-400">
+            {{ t('dataTools.import.confirmProceed', {
+              valid: io.session.value?.valid_rows ?? 0,
+              invalid: io.session.value?.invalid_rows ?? 0,
+            }) }}
+          </p>
+        </div>
+
+        <p v-if="io.importError.value" class="text-xs text-red-600 dark:text-red-400">{{ importErrText(io.importError.value) }}</p>
+      </div>
+
+      <!-- Step: processing -->
+      <div v-else-if="io.step.value === 'processing'" class="py-6 text-center space-y-2">
+        <Loader2 class="w-8 h-8 mx-auto text-blue-500 animate-spin" />
+        <p class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('dataTools.import.processing') }}</p>
+        <p class="text-xs text-gray-400">{{ t('dataTools.import.processingNote') }}</p>
+      </div>
+
+      <!-- Step: done -->
+      <div v-else-if="io.step.value === 'done'" class="py-6 text-center space-y-2">
+        <CheckCircle2 class="w-8 h-8 mx-auto text-green-500" />
+        <p class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('dataTools.import.doneTitle') }}</p>
+        <p class="text-xs text-gray-500 dark:text-gray-400">{{ t('dataTools.import.doneText', { imported: io.session.value?.imported_rows ?? 0 }) }}</p>
+      </div>
+
+      <!-- Step: failed -->
+      <div v-else-if="io.step.value === 'failed'" class="py-6 text-center space-y-2">
+        <XCircle class="w-8 h-8 mx-auto text-red-500" />
+        <p class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('dataTools.import.failedTitle') }}</p>
+        <p v-if="io.session.value?.failure_reason" class="text-xs text-red-600 dark:text-red-400">{{ io.session.value.failure_reason }}</p>
+      </div>
+
+      <template #footer>
+        <!-- idle -->
+        <template v-if="io.step.value === 'idle'">
+          <AppButton variant="secondary" @click="closeImport">{{ t('dataTools.import.close') }}</AppButton>
+          <AppButton variant="primary" :disabled="!io.file.value" :loading="io.dryRunning.value" @click="io.runDryRun">{{ t('dataTools.import.runDryRun') }}</AppButton>
+        </template>
+        <!-- dryrun -->
+        <template v-else-if="io.step.value === 'dryrun'">
+          <AppButton variant="secondary" @click="io.reset">{{ t('dataTools.import.chooseAnother') }}</AppButton>
+          <AppButton variant="primary" :disabled="!(io.session.value?.valid_rows)" :loading="io.committing.value" @click="doCommit">{{ t('dataTools.import.proceed') }}</AppButton>
+        </template>
+        <!-- processing / done / failed -->
+        <template v-else>
+          <AppButton variant="primary" @click="closeImport">{{ t('dataTools.import.close') }}</AppButton>
+        </template>
+      </template>
+    </AppModal>
+
+    <!-- ── Modal Impor (mesin wizard) ── -->
+    <AppModal
+      v-if="showImport && isWizard"
+      :title="t('dataTools.import.modalTitle')"
+      :subtitle="t('dataTools.wizard.modalSubtitle')"
+      size="xl"
+      @close="closeImport"
+    >
+      <div class="space-y-4">
+        <!-- Penanda langkah -->
+        <ol class="flex flex-wrap items-center gap-x-2 gap-y-1 text-xs">
+          <li v-for="(s, i) in WIZARD_STEPS" :key="s" class="flex items-center gap-2">
+            <span
+              :class="[
+                'inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full',
+                i === wizardStepIndex
+                  ? 'bg-blue-50 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300 font-medium'
+                  : i < wizardStepIndex
+                    ? 'text-gray-600 dark:text-gray-300'
+                    : 'text-gray-400 dark:text-gray-500',
+              ]"
+              :aria-current="i === wizardStepIndex ? 'step' : undefined"
+            >
+              <span class="tabular-nums">{{ i + 1 }}.</span>{{ t(`dataTools.wizard.steps.${s}`) }}
+            </span>
+            <ChevronRight v-if="i < WIZARD_STEPS.length - 1" class="w-3 h-3 text-gray-300 dark:text-gray-600" aria-hidden="true" />
+          </li>
+        </ol>
+
+        <AppAlert v-if="io.wError.value" variant="error" :message="wizardErrText(io.wError.value)" />
+
+        <!-- 1. Berkas -->
+        <template v-if="io.wStep.value === 'upload'">
+          <p class="text-sm text-gray-600 dark:text-gray-400">{{ t('dataTools.wizard.uploadIntro') }}</p>
+          <slot name="guide">
+            <AppImportSchemaGuide
+              :schema="io.schema.value"
+              :loading="io.schemaLoading.value"
+              :error="io.schemaError.value"
+            />
+          </slot>
+          <AppButton variant="ghost" size="sm" :loading="io.busyTemplate.value" @click="io.downloadTemplate">
+            <FileDown class="w-4 h-4" />{{ t('dataTools.import.downloadTemplate') }}
+          </AppButton>
+          <div>
+            <input
+              type="file"
+              accept=".csv,.txt,.xlsx,.xls,text/csv,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
+              :aria-label="t('dataTools.import.chooseFile')"
+              class="block w-full text-sm text-gray-600 dark:text-gray-400 file:mr-3 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-medium file:bg-blue-50 file:text-blue-700 dark:file:bg-blue-900/30 dark:file:text-blue-300 hover:file:bg-blue-100 dark:hover:file:bg-blue-900/50"
+              @change="onWizardFileChange"
+            />
+            <p class="mt-1 text-xs text-gray-400">{{ t('dataTools.wizard.fileHint') }}</p>
+          </div>
+          <p v-if="io.importError.value" class="text-xs text-red-600 dark:text-red-400">{{ importErrText(io.importError.value) }}</p>
+        </template>
+
+        <!-- 2. Pengaturan: pemetaan kolom + mode + kunci -->
+        <template v-else-if="io.wStep.value === 'configure'">
+          <div class="p-3 rounded-lg bg-gray-50 dark:bg-gray-900/40 border border-gray-200 dark:border-gray-700 text-sm text-gray-700 dark:text-gray-300 space-y-1">
+            <p>{{ t('dataTools.wizard.readSummary', { rows: io.wInspect.value?.total_rows ?? 0, file: io.wFile.value?.name ?? '' }) }}</p>
+            <p v-if="!unmappedHeaders.length" class="flex items-center gap-1.5 text-green-600 dark:text-green-400">
+              <CheckCircle2 class="w-4 h-4 shrink-0" />{{ t('dataTools.wizard.allMapped', { count: headers.length - customFieldHeaders.length }) }}
+            </p>
+          </div>
+
+          <AppAlert v-if="unmappedHeaders.length" variant="warning" :message="t('dataTools.wizard.unmapped', { count: unmappedHeaders.length })" />
+          <AppAlert v-if="customFieldHeaders.length" variant="info" :message="t('dataTools.wizard.customFieldColumns', { cols: customFieldHeaders.join(', ') })" />
+          <AppAlert v-if="duplicateTargets.length" variant="error" :message="t('dataTools.wizard.duplicateTarget', { fields: duplicateTargets.join(', ') })" />
+          <AppAlert v-if="missingRequired.length" variant="warning" :message="t('dataTools.wizard.missingRequired', { fields: missingRequired.join(', ') })" />
+
+          <div>
+            <button
+              type="button"
+              class="inline-flex items-center gap-1 text-sm font-medium text-blue-600 dark:text-blue-400 hover:underline"
+              :aria-expanded="mappingOpen ? 'true' : 'false'"
+              @click="mappingOpen = !mappingOpen"
+            >
+              <ChevronDown :class="['w-4 h-4 transition-transform', mappingOpen ? '' : '-rotate-90']" aria-hidden="true" />
+              {{ mappingOpen ? t('dataTools.wizard.hideMapping') : t('dataTools.wizard.showMapping') }}
+            </button>
+            <div v-if="mappingOpen" class="mt-2 max-h-72 overflow-y-auto scrollbar-rounded rounded-lg border border-gray-200 dark:border-gray-700">
+              <table class="w-full text-sm">
+                <thead class="bg-gray-50 dark:bg-gray-900/40 sticky top-0 z-10">
+                  <tr class="text-left text-xs text-gray-500 dark:text-gray-400">
+                    <th class="py-2 px-3 font-medium">{{ t('dataTools.wizard.colSource') }}</th>
+                    <th class="py-2 px-3 font-medium hidden sm:table-cell">{{ t('dataTools.wizard.colSample') }}</th>
+                    <th class="py-2 px-3 font-medium w-64">{{ t('dataTools.wizard.colTarget') }}</th>
+                  </tr>
+                </thead>
+                <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
+                  <tr v-for="h in headers" :key="h" :class="!io.wMapping.value[h] && !customFieldKeys.has(h) ? 'bg-amber-50/60 dark:bg-amber-900/10' : ''">
+                    <td class="py-1.5 px-3 align-middle"><code class="text-gray-800 dark:text-gray-100">{{ h }}</code></td>
+                    <td class="py-1.5 px-3 align-middle text-gray-500 dark:text-gray-400 truncate max-w-[12rem] hidden sm:table-cell">{{ firstSample[h] ?? '' }}</td>
+                    <td class="py-1.5 px-3 align-middle">
+                      <AppCombobox
+                        :model-value="targetOf(h)"
+                        :options="targetOptions"
+                        :aria-label="t('dataTools.wizard.targetAria', { column: h })"
+                        dense
+                        hide-clear
+                        @update:model-value="(v) => setTarget(h, v)"
+                      />
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+
+          <!-- Sumbu (b): perlakuan baris yang cocok -->
+          <fieldset class="space-y-2">
+            <legend class="text-sm font-medium text-gray-800 dark:text-gray-200 mb-1">{{ t('dataTools.wizard.modeTitle') }}</legend>
+            <label
+              v-for="m in modeOptions"
+              :key="m"
+              :class="[
+                'flex items-start gap-3 p-3 rounded-lg border cursor-pointer',
+                io.wMode.value === m
+                  ? 'border-blue-300 bg-blue-50/60 dark:border-blue-700 dark:bg-blue-900/20'
+                  : 'border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800/60',
+              ]"
+            >
+              <input v-model="io.wMode.value" type="radio" name="import-mode" :value="m" class="mt-0.5 text-blue-600 focus:ring-blue-500" />
+              <span>
+                <span class="block text-sm font-medium text-gray-800 dark:text-gray-200">{{ t(`dataTools.wizard.mode.${m}.label`) }}</span>
+                <span class="block text-xs text-gray-500 dark:text-gray-400">{{ t(`dataTools.wizard.mode.${m}.desc`) }}</span>
+              </span>
+            </label>
+          </fieldset>
+
+          <!-- Sumbu (a): kunci pencocokan -->
+          <div v-if="hasKeyColumns" class="space-y-1">
+            <AppCombobox
+              :model-value="io.wKeyColumn.value || null"
+              :options="keyOptions"
+              :label="t('dataTools.wizard.keyTitle')"
+              :hint="t('dataTools.wizard.keyHint')"
+              :error="!io.wKeyColumn.value ? t('dataTools.wizard.keyRequired') : ''"
+              required
+              hide-clear
+              @update:model-value="(v) => io.wKeyColumn.value = v || ''"
+            />
+            <AppAlert v-if="keyColumnUnmapped" variant="warning" :message="t('dataTools.wizard.keyMissingColumn', { key: io.wKeyColumn.value })" />
+          </div>
+
+          <!-- Sumbu (c): terpisah dari mode; tak tersedia untuk `complete` & modul tanpa penanda aktif -->
+          <div v-if="showDeactivate" class="flex items-start gap-3">
+            <AppToggle
+              :model-value="io.wDeactivate.value"
+              :aria-label="t('dataTools.wizard.deactivateLabel')"
+              color="blue"
+              @toggle="io.wDeactivate.value = !io.wDeactivate.value"
+            />
+            <div>
+              <p class="text-sm font-medium text-gray-800 dark:text-gray-200">{{ t('dataTools.wizard.deactivateLabel') }}</p>
+              <p class="text-xs text-gray-500 dark:text-gray-400">{{ t('dataTools.wizard.deactivateDesc') }}</p>
+            </div>
+          </div>
+
+          <div class="p-3 rounded-lg border border-gray-200 dark:border-gray-700 text-xs text-gray-600 dark:text-gray-400 space-y-1">
+            <p class="font-medium text-gray-800 dark:text-gray-200">{{ t('dataTools.wizard.rulesTitle') }}</p>
+            <ul class="list-disc pl-4 space-y-0.5">
+              <li>{{ t('dataTools.wizard.ruleEmptyCell') }}</li>
+              <li>{{ t('dataTools.wizard.ruleUnmapped') }}</li>
+              <li>{{ t('dataTools.wizard.ruleNoDelete') }}</li>
+            </ul>
+          </div>
+        </template>
+
+        <!-- 3. Rencana -->
+        <template v-else-if="io.wStep.value === 'plan'">
+          <p class="text-sm text-gray-700 dark:text-gray-300">
+            {{ t('dataTools.wizard.plan.summary', {
+              total: io.wPlan.value?.total_rows ?? 0,
+              valid: io.wPlan.value?.valid_rows ?? 0,
+              invalid: io.wPlan.value?.invalid_rows ?? 0,
+            }) }}
+          </p>
+
+          <!-- Konflik paling atas: inilah satu-satunya tanda bahwa mode Lengkapi diam-diam
+               mempertahankan nilai lama yang berbeda dari berkas. -->
+          <div
+            v-if="conflicts.length"
+            class="rounded-lg border-2 border-amber-300 dark:border-amber-700 bg-amber-50 dark:bg-amber-900/20 p-3 space-y-2"
+            role="alert"
+          >
+            <p class="text-sm font-semibold text-amber-800 dark:text-amber-300">
+              {{ t('dataTools.wizard.plan.conflictsTitle', { count: conflicts.length }) }}
+            </p>
+            <p class="text-xs text-amber-700 dark:text-amber-400">{{ t('dataTools.wizard.plan.conflictsBody') }}</p>
+            <div class="max-h-56 overflow-y-auto scrollbar-rounded rounded border border-amber-200 dark:border-amber-800 bg-white dark:bg-gray-900">
+              <table class="w-full text-xs">
+                <thead class="bg-amber-50 dark:bg-gray-800 sticky top-0">
+                  <tr class="text-left text-gray-500 dark:text-gray-400">
+                    <th class="py-1.5 px-2 font-medium w-14">{{ t('dataTools.wizard.plan.colLine') }}</th>
+                    <th class="py-1.5 px-2 font-medium">{{ t('dataTools.wizard.plan.colField') }}</th>
+                    <th class="py-1.5 px-2 font-medium">{{ t('dataTools.wizard.plan.colDb') }}</th>
+                    <th class="py-1.5 px-2 font-medium">{{ t('dataTools.wizard.plan.colFile') }}</th>
+                  </tr>
+                </thead>
+                <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
+                  <tr v-for="(c, i) in conflicts" :key="i">
+                    <td class="py-1.5 px-2 text-gray-500 dark:text-gray-400">{{ c.line }}</td>
+                    <td class="py-1.5 px-2"><code class="text-gray-800 dark:text-gray-100">{{ c.field }}</code></td>
+                    <td class="py-1.5 px-2 text-gray-700 dark:text-gray-300 break-all">{{ c.db }}</td>
+                    <td class="py-1.5 px-2 text-amber-700 dark:text-amber-300 break-all">{{ c.file }}</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+            <p v-if="conflicts.length >= 100" class="text-xs italic text-amber-700 dark:text-amber-400">{{ t('dataTools.wizard.plan.conflictsTruncated') }}</p>
+          </div>
+
+          <div class="grid grid-cols-2 sm:grid-cols-3 gap-2">
+            <div
+              v-for="tile in planTiles"
+              :key="tile.key"
+              :data-plan="tile.key"
+              class="rounded-lg border border-gray-200 dark:border-gray-700 p-3"
+            >
+              <p :class="['text-2xl font-semibold tabular-nums', tile.cls]">{{ tile.value }}</p>
+              <p class="text-xs text-gray-500 dark:text-gray-400">{{ t(`dataTools.wizard.plan.${tile.key}`) }}</p>
+            </div>
+          </div>
+
+          <div v-if="io.wPlan.value?.invalid_rows" class="space-y-2">
+            <AppAlert
+              variant="error"
+              :title="t('dataTools.wizard.plan.invalidTitle', { count: io.wPlan.value.invalid_rows })"
+              :message="t('dataTools.wizard.plan.invalidBody')"
+            />
+            <AppButton variant="secondary" size="sm" :loading="io.wBusyErrors.value" data-download-errors @click="io.wizardDownloadErrors">
+              <FileDown class="w-3.5 h-3.5" />{{ t('dataTools.wizard.downloadErrors') }}
+            </AppButton>
+          </div>
+          <AppAlert
+            v-if="plan?.deactivate"
+            variant="warning"
+            :message="t('dataTools.wizard.plan.deactivateWarn', { count: plan.deactivate })"
+          />
+          <AppAlert v-if="nothingToDo" variant="info" :message="t('dataTools.wizard.plan.nothingToDo')" />
+        </template>
+
+        <!-- 4. Hasil -->
+        <div v-else-if="io.wStep.value === 'processing'" class="py-6 text-center space-y-2">
+          <Loader2 class="w-8 h-8 mx-auto text-blue-500 animate-spin" />
+          <p class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('dataTools.import.processing') }}</p>
+          <p class="text-xs text-gray-400">{{ t('dataTools.import.processingNote') }}</p>
+        </div>
+        <div v-else-if="io.wStep.value === 'done'" class="py-6 text-center space-y-2">
+          <CheckCircle2 class="w-8 h-8 mx-auto text-green-500" />
+          <p class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('dataTools.import.doneTitle') }}</p>
+          <p class="text-xs text-gray-500 dark:text-gray-400" data-import-result>{{ t('dataTools.wizard.done.text', doneCounts) }}</p>
+          <!-- Commit hanya menulis baris valid; baris yang tertinggal baru terasa penting sesudah
+               hasilnya terlihat, jadi laporannya tetap bisa diunduh di sini. -->
+          <template v-if="io.wPlan.value?.invalid_rows">
+            <p class="text-xs text-red-600 dark:text-red-400">{{ t('dataTools.wizard.done.invalidLeft', { count: io.wPlan.value.invalid_rows }) }}</p>
+            <AppButton variant="secondary" size="sm" :loading="io.wBusyErrors.value" data-download-errors @click="io.wizardDownloadErrors">
+              <FileDown class="w-3.5 h-3.5" />{{ t('dataTools.wizard.downloadErrors') }}
+            </AppButton>
+          </template>
+        </div>
+        <div v-else-if="io.wStep.value === 'failed'" class="py-6 text-center space-y-2">
+          <XCircle class="w-8 h-8 mx-auto text-red-500" />
+          <p class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('dataTools.import.failedTitle') }}</p>
+          <p v-if="io.wSession.value?.failure_reason" class="text-xs text-red-600 dark:text-red-400">{{ io.wSession.value.failure_reason }}</p>
+        </div>
+      </div>
+
+      <template #footer>
+        <template v-if="io.wStep.value === 'upload'">
+          <AppButton variant="secondary" @click="closeImport">{{ t('dataTools.import.close') }}</AppButton>
+          <AppButton variant="primary" :disabled="!io.wFile.value" :loading="io.wInspecting.value" @click="io.wizardInspect">{{ t('dataTools.wizard.inspect') }}</AppButton>
+        </template>
+        <template v-else-if="io.wStep.value === 'configure'">
+          <AppButton variant="secondary" @click="io.wizardBackToUpload">{{ t('dataTools.wizard.chooseAnother') }}</AppButton>
+          <AppButton variant="primary" :disabled="!canRunWizardDryRun" :loading="io.wDryRunning.value" @click="io.wizardDryRun">{{ t('dataTools.wizard.runDryRun') }}</AppButton>
+        </template>
+        <template v-else-if="io.wStep.value === 'plan'">
+          <AppButton variant="secondary" @click="io.wizardBackToConfigure">{{ t('dataTools.wizard.plan.backToConfigure') }}</AppButton>
+          <AppButton variant="primary" :disabled="!(io.wPlan.value?.valid_rows)" :loading="io.wCommitting.value" @click="doWizardCommit">{{ t('dataTools.wizard.plan.confirm') }}</AppButton>
+        </template>
+        <template v-else>
+          <AppButton variant="primary" @click="closeImport">{{ t('dataTools.import.close') }}</AppButton>
+        </template>
+      </template>
+    </AppModal>
+  </div>
+</template>