@initsolusidigital/worksuite-shell 0.0.0-stage → 0.3.0

package/src/components/communications/AppConversationThread.vue

@@ -0,0 +1,439 @@
+<script setup>
+// Thread percakapan — SATU komponen bersama untuk layar Inbox DAN panel di drawer peluang
+// (pola LineItemsEditor: aturan kontrak ditulis SEKALI di sini, jangan bikin thread kembar).
+//
+// Aturan kontrak yang dipegang komponen ini (tahap-7-communications-webchat.md):
+// - `GET .../messages` paginated DESC → dirender DIBALIK (lama di atas, baru di bawah).
+// - Buka thread = `POST .../read` (unread_count jadi 0) — emit('read') supaya daftar ikut turun.
+// - Balas wa/ig bisa ditolak by-design; bercabang dari `data.reason`, BUKAN kalimat message:
+//   422 outside_service_window → composer mati + keterangan (bukan error merah);
+//   422 channel_not_connected  → arahkan ke layar Koneksi Meta;
+//   502 provider_send_failed   → toast + teks TIDAK dibuang (user tinggal kirim ulang).
+// - `window_expires_at` (wa/ig): countdown; webchat null = tanpa window, perilaku 7.3 utuh.
+// - Centang delivered/read hanya utk pesan keluar (delivered_at/read_at, kini terisi utk wa).
+// - Pesan `system` (close/reopen) dirender netral di tengah — pengunjung juga melihatnya.
+// - Voice note WA (§3b): `type:"audio"` + `media_file_id` → player; transkrip STT ON-DEMAND
+//   (1 kredit AI/pesan) — tombol, tak pernah otomatis. Audio LAMA jatuh ke `type:"text"`
+//   body `[audio]` dan memang dirender sebagai teks biasa, bukan player rusak.
+import { ref, computed, watch, onMounted, onBeforeUnmount, nextTick } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { crmConversationsApi } from '@initsolusidigital/worksuite-core/api/endpoints/crmConversations.js'
+import { crmMessagesApi } from '@initsolusidigital/worksuite-core/api/endpoints/crmMessages.js'
+import { aiApi } from '@initsolusidigital/worksuite-core/api/endpoints/ai.js'
+import { normalizeApiError } from '@initsolusidigital/worksuite-core/api/errors.js'
+import { useToast } from '@initsolusidigital/worksuite-core/composables/useToast.js'
+import { useModulePermission } from '@initsolusidigital/worksuite-core/composables/useModulePermission.js'
+import AppButton from '@initsolusidigital/worksuite-ui/AppButton.vue'
+import AppAiBadge from '@initsolusidigital/worksuite-ui/AppAiBadge.vue'
+import { Send, Check, CheckCheck, Clock, FileText, Loader2, Bot } from '@lucide/vue'
+
+const props = defineProps({
+  companyId:    { type: String, required: true },
+  conversation: { type: Object, required: true },
+  // Panel drawer memakai thread yang sama tapi lebih pendek — parent yang mengatur tinggi.
+  compact:      { type: Boolean, default: false },
+})
+const emit = defineEmits(['read', 'sent', 'go-meta'])
+
+const { t, locale } = useI18n()
+const { pushToast } = useToast()
+const { can } = useModulePermission()
+
+const canUpdate = computed(() => can('communications', 'can_update'))
+
+const messages = ref([])          // urut LAMA → BARU (hasil pembalikan halaman desc)
+const loading  = ref(false)
+const loadError = ref(false)
+const hasOlder = ref(false)
+const oldestPage = ref(1)
+const draft = ref('')
+const sending = ref(false)
+// Keterangan tolakan reply yang BERTAHAN di composer (bukan toast): 422 di luar jendela balas
+// 24 jam, dan 422 kanal belum tersambung.
+const replyNotice = ref(null)     // 'outsideWindow' | 'notConnected' | null
+const scroller = ref(null)
+
+// ── Window 24 jam (wa/ig) ─────────────────────────────────────────────────────
+// Dihitung ulang tiap 30 dtk; melewati batas = composer mati TANPA menunggu server menolak.
+// `now` di-ref supaya computed ikut bergerak — tanpa ini countdown beku di render pertama.
+const now = ref(Date.now())
+let clockTimer = null
+const windowExpiresAt = computed(() => {
+  const v = props.conversation?.window_expires_at
+  return v ? new Date(v).getTime() : null
+})
+const windowExpired = computed(() =>
+  windowExpiresAt.value !== null && windowExpiresAt.value <= now.value
+)
+const windowLeftText = computed(() => {
+  if (windowExpiresAt.value === null || windowExpired.value) return ''
+  const menit = Math.max(1, Math.floor((windowExpiresAt.value - now.value) / 60000))
+  const j = Math.floor(menit / 60), m = menit % 60
+  return j > 0 ? `${j} j ${m} m` : `${m} m`
+})
+
+const composerDisabled = computed(() =>
+  !canUpdate.value || windowExpired.value || replyNotice.value === 'outsideWindow'
+)
+
+// ── Muat pesan ────────────────────────────────────────────────────────────────
+async function loadMessages({ silent = false } = {}) {
+  if (!props.conversation?.id) return
+  if (!silent) { loading.value = true; loadError.value = false }
+  try {
+    const { data } = await crmConversationsApi.messages(props.companyId, props.conversation.id, { page: 1 })
+    const pager = data.data
+    const rows = (pager?.data ?? pager ?? []).slice().reverse()
+    // Refresh senyap (polling/realtime) hanya MENAMBAH ekor — jangan menimpa halaman lama
+    // yang sudah dimuat lewat "Muat pesan sebelumnya".
+    if (silent && messages.value.length) {
+      const known = new Set(messages.value.map(m => m.id))
+      const fresh = rows.filter(m => !known.has(m.id))
+      if (fresh.length) {
+        messages.value.push(...fresh)
+        scrollToBottom()
+        // Pesan masuk baru me-reset window (tiap pesan masuk = +24 jam) — keterangan basi dicabut.
+        if (fresh.some(m => m.direction === 'in') && replyNotice.value === 'outsideWindow') replyNotice.value = null
+      }
+      return
+    }
+    messages.value = rows
+    hasOlder.value = !!pager?.next_page_url
+    oldestPage.value = 1
+    scrollToBottom()
+  } catch {
+    if (!silent) loadError.value = true
+  } finally {
+    if (!silent) loading.value = false
+  }
+}
+
+async function loadOlder() {
+  try {
+    const page = oldestPage.value + 1
+    const { data } = await crmConversationsApi.messages(props.companyId, props.conversation.id, { page })
+    const pager = data.data
+    const rows = (pager?.data ?? []).slice().reverse()
+    messages.value.unshift(...rows)
+    oldestPage.value = page
+    hasOlder.value = !!pager?.next_page_url
+  } catch {
+    pushToast({ title: t('communications.loadError'), variant: 'alert' })
+  }
+}
+
+function scrollToBottom() {
+  nextTick(() => {
+    if (scroller.value) scroller.value.scrollTop = scroller.value.scrollHeight
+  })
+}
+
+// ── Balas ─────────────────────────────────────────────────────────────────────
+async function send() {
+  const body = draft.value.trim()
+  if (!body || sending.value || composerDisabled.value) return
+  sending.value = true
+  try {
+    const { data } = await crmConversationsApi.reply(props.companyId, props.conversation.id, { message: body })
+    const msg = data.data
+    if (msg?.id) messages.value.push(msg)
+    draft.value = ''
+    replyNotice.value = null
+    scrollToBottom()
+    emit('sent', msg)
+  } catch (err) {
+    const info = normalizeApiError(err)
+    if (info.reason === 'outside_service_window') {
+      replyNotice.value = 'outsideWindow'          // keterangan bertahan, bukan error merah
+    } else if (info.reason === 'channel_not_connected') {
+      replyNotice.value = 'notConnected'
+    } else {
+      // 502 provider_send_failed & gangguan lain → toast (kanon), teks TIDAK dibuang
+      pushToast({ title: t('communications.sendError'), variant: 'alert' })
+    }
+  } finally {
+    sending.value = false
+  }
+}
+
+// ── Voice note: player + transkripsi on-demand (§3b) ──────────────────────────
+// Add-on AI dibaca SEKALI per thread, bukan per bubble: satu percakapan bisa memuat puluhan
+// voice note, dan menanyakan saldo tiap bubble berarti puluhan permintaan untuk satu jawaban
+// yang sama. Dibaca lewat `Promise` yang di-cache supaya beberapa thread yang dibuka berurutan
+// tak menembaknya berulang.
+const addonAiAktif = ref(null)          // null = belum diketahui → tombol ditahan, bukan disembunyikan
+async function muatKeadaanAi() {
+  try {
+    const { data } = await aiApi.credits(props.companyId)
+    // `=== false` disengaja (pola AiWizard): field absen pada backend lama TIDAK boleh dibaca
+    // sebagai "tak berlangganan" — itu akan menyembunyikan tombol dari tenant yang berhak.
+    addonAiAktif.value = data?.data?.addon_active !== false
+  } catch {
+    // Gagal membaca saldo bukan alasan menyembunyikan fitur berbayar (gerbang entitlement di
+    // frontend selalu fail-open): gerbang sebenarnya tetap di backend, yang menjawab 403 kalau memang tak
+    // berhak — dan pesan itu jauh lebih jelas daripada tombol yang diam-diam hilang.
+    addonAiAktif.value = true
+  }
+}
+
+const transkripJalan = ref(new Set())   // id pesan yang sedang ditranskrip
+const transkripGagal = ref(new Set())   // id pesan yang gagal 502 → tawarkan coba lagi
+
+function bisaTranskrip(m) {
+  return m.type === 'audio' && !!m.media_file_id && !m.transcript && addonAiAktif.value === true
+}
+
+async function transkrip(m) {
+  if (transkripJalan.value.has(m.id)) return
+  transkripJalan.value = new Set(transkripJalan.value).add(m.id)
+  transkripGagal.value = new Set([...transkripGagal.value].filter(id => id !== m.id))
+  try {
+    const { data } = await crmMessagesApi.transcribe(props.companyId, m.id)
+    const hasil = data?.data?.transcript ?? ''
+    // Tulis ke objek pesan supaya render berikutnya (dan polling senyap) tak memanggil ulang —
+    // `cached:true` memang gratis, tapi tetap satu perjalanan bolak-balik yang tak perlu.
+    const target = messages.value.find(x => x.id === m.id)
+    if (target) target.transcript = hasil
+  } catch (err) {
+    const info = normalizeApiError(err)
+    if (info.reason === 'transcription_failed') {
+      // 502: provider gagal & kredit TIDAK terpotong — jadi "coba lagi" memang tindakan yang benar.
+      transkripGagal.value = new Set(transkripGagal.value).add(m.id)
+      pushToast({ title: t('communications.audio.failedRetry'), variant: 'alert' })
+    } else if (info.status === 402) {
+      pushToast({ title: t('communications.audio.noCredit'), variant: 'alert' })
+    } else if (info.status === 403) {
+      // Tombolnya memang sudah digerbang; kalau tetap sampai ke sini, keadaan add-on berubah
+      // di tengah sesi — sembunyikan tombolnya sekalian supaya tak ditekan berulang.
+      addonAiAktif.value = false
+      pushToast({ title: t('communications.audio.noAddon'), variant: 'alert' })
+    } else if (info.reason === 'not_transcribable') {
+      pushToast({ title: t('communications.audio.notTranscribable'), variant: 'alert' })
+    } else {
+      pushToast({ title: t('communications.audio.failed'), variant: 'alert' })
+    }
+  } finally {
+    transkripJalan.value = new Set([...transkripJalan.value].filter(id => id !== m.id))
+  }
+}
+
+const mediaUrl = (m) => crmMessagesApi.mediaUrl(props.companyId, m.id)
+
+// ── Render helper ─────────────────────────────────────────────────────────────
+function timeOf(m) {
+  const d = new Date(m.created_at)
+  return Number.isNaN(d.getTime()) ? '' : d.toLocaleTimeString(locale.value === 'id' ? 'id-ID' : 'en-US', { hour: '2-digit', minute: '2-digit' })
+}
+function dayOf(m) {
+  const d = new Date(m.created_at)
+  return Number.isNaN(d.getTime()) ? '' : d.toDateString()
+}
+function dayLabel(m) {
+  const d = new Date(m.created_at)
+  return d.toLocaleDateString(locale.value === 'id' ? 'id-ID' : 'en-US', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' })
+}
+function showDayDivider(idx) {
+  if (idx === 0) return true
+  return dayOf(messages.value[idx]) !== dayOf(messages.value[idx - 1])
+}
+// Centang status pesan keluar: read ✓✓ biru · delivered ✓✓ abu · selain itu ✓ (tersimpan).
+function tickOf(m) {
+  if (m.read_at) return { icon: CheckCheck, cls: 'text-blue-500 dark:text-blue-400' }
+  if (m.delivered_at) return { icon: CheckCheck, cls: 'text-gray-400' }
+  return { icon: Check, cls: 'text-gray-400' }
+}
+
+// ── Lifecycle: markRead saat dibuka, polling senyap sebagai fallback realtime ──
+let pollTimer = null
+async function openConversation() {
+  replyNotice.value = null
+  draft.value = ''
+  await loadMessages()
+  if ((props.conversation?.unread_count ?? 0) > 0) {
+    try {
+      await crmConversationsApi.markRead(props.companyId, props.conversation.id)
+      emit('read', props.conversation.id)
+    } catch { /* badge menyusul lewat polling daftar — bukan alasan menahan thread */ }
+  }
+}
+
+defineExpose({ refresh: () => loadMessages({ silent: true }) })
+
+watch(() => props.conversation?.id, () => { openConversation() })
+
+onMounted(() => {
+  openConversation()
+  muatKeadaanAi()
+  // Polling = fallback SETARA per kontrak §4 — tetap jalan walau Reverb hidup (idempoten,
+  // refresh senyap hanya menambah pesan baru). 12 dtk: cukup responsif tanpa membebani throttle.
+  pollTimer = setInterval(() => {
+    if (!document.hidden) loadMessages({ silent: true })
+  }, 12000)
+  clockTimer = setInterval(() => { now.value = Date.now() }, 30000)
+})
+onBeforeUnmount(() => {
+  clearInterval(pollTimer)
+  clearInterval(clockTimer)
+})
+</script>
+
+<template>
+  <div class="flex flex-col h-full min-h-0">
+    <!-- Chip window 24 jam (wa/ig saja) — satu-satunya elemen "hidup" di header thread -->
+    <div
+      v-if="windowExpiresAt !== null"
+      class="shrink-0 px-4 py-1.5 text-xs flex items-center gap-1.5 border-b border-gray-100 dark:border-gray-700"
+      :class="windowExpired ? 'text-amber-700 bg-amber-50 dark:text-amber-300 dark:bg-amber-900/20' : 'text-gray-500 dark:text-gray-400 bg-gray-50 dark:bg-gray-900/40'"
+    >
+      <Clock class="w-3.5 h-3.5 shrink-0" />
+      {{ windowExpired ? t('communications.windowExpired') : t('communications.windowLeft', { time: windowLeftText }) }}
+    </div>
+
+    <!-- Area pesan -->
+    <div ref="scroller" class="flex-1 min-h-0 overflow-y-auto scrollbar-rounded px-4 py-3 space-y-1 bg-gray-50 dark:bg-gray-900/40">
+      <div v-if="loading" class="text-center text-sm text-gray-400 py-8">{{ t('common.loading') }}</div>
+      <div v-else-if="loadError" class="text-center text-sm text-gray-500 py-8">
+        {{ t('communications.loadError') }}
+        <AppButton variant="secondary" size="sm" class="mt-2" @click="loadMessages()">{{ t('common.retry') }}</AppButton>
+      </div>
+      <template v-else>
+        <div v-if="hasOlder" class="text-center pb-2">
+          <button class="text-xs text-blue-600 dark:text-blue-400 hover:underline" @click="loadOlder">
+            {{ t('communications.loadOlder') }}
+          </button>
+        </div>
+
+        <template v-for="(m, idx) in messages" :key="m.id">
+          <div v-if="showDayDivider(idx)" class="text-center py-2">
+            <span class="text-[11px] text-gray-400 dark:text-gray-500 bg-white dark:bg-gray-800 border border-gray-100 dark:border-gray-700 rounded-full px-2.5 py-0.5">{{ dayLabel(m) }}</span>
+          </div>
+
+          <!-- Pesan system (tutup/buka) — netral di tengah, ikut terlihat pengunjung -->
+          <div v-if="m.type === 'system'" class="text-center py-1">
+            <span class="text-[11px] italic text-gray-400 dark:text-gray-500">{{ m.body }}</span>
+          </div>
+
+          <!-- Voice note WA (§3b) — bubble ber-player. Sengaja BUKAN cabang di dalam bubble teks:
+               isinya kontrol, bukan kalimat, jadi `whitespace-pre-wrap`/`break-words` di sana tak
+               berlaku dan lebarnya diatur sendiri agar player tak menyusut jadi tak bisa dipakai. -->
+          <div v-else-if="m.type === 'audio'" class="flex" :class="m.direction === 'out' ? 'justify-end' : 'justify-start'">
+            <div
+              class="max-w-[85%] min-w-0 rounded-2xl px-3 py-2"
+              :class="m.direction === 'out'
+                ? 'bg-blue-600 text-white rounded-br-sm'
+                : 'bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 border border-gray-100 dark:border-gray-700 rounded-bl-sm'"
+            >
+              <!-- ⚠️ TANPA atribut `crossorigin` — lihat catatan di `crmMessagesApi.mediaUrl`. -->
+              <audio
+                controls
+                preload="none"
+                :src="mediaUrl(m)"
+                class="w-56 sm:w-64 max-w-full"
+                :aria-label="t('communications.audio.playerLabel')"
+              ></audio>
+
+              <!-- Transkrip: hasil AI, jadi WAJIB berpenanda (kanon penanda AI = layar staf saja) -->
+              <div v-if="m.transcript" class="mt-1.5 pt-1.5 border-t text-sm"
+                :class="m.direction === 'out' ? 'border-blue-500/40' : 'border-gray-100 dark:border-gray-700'">
+                <AppAiBadge :title="t('communications.audio.transcriptTitle')" />
+                <p class="mt-1 whitespace-pre-wrap break-words">{{ m.transcript }}</p>
+              </div>
+
+              <!-- Tombol transkrip: aksi BERBAYAR (1 kredit) → selalu dipicu manusia, tak pernah
+                   otomatis saat thread dibuka. Disembunyikan (bukan di-disable) saat add-on mati. -->
+              <button
+                v-else-if="bisaTranskrip(m)"
+                type="button"
+                class="mt-1.5 inline-flex items-center gap-1 text-xs font-medium rounded px-1.5 py-0.5 transition-colors disabled:opacity-60"
+                :class="m.direction === 'out'
+                  ? 'text-blue-100 hover:bg-blue-500/40'
+                  : 'text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/30'"
+                :disabled="transkripJalan.has(m.id)"
+                @click="transkrip(m)"
+              >
+                <Loader2 v-if="transkripJalan.has(m.id)" class="w-3.5 h-3.5 shrink-0 animate-spin" aria-hidden="true" />
+                <FileText v-else class="w-3.5 h-3.5 shrink-0" aria-hidden="true" />
+                {{ transkripJalan.has(m.id)
+                  ? t('communications.audio.transcribing')
+                  : (transkripGagal.has(m.id) ? t('common.retry') : t('communications.audio.transcribe')) }}
+              </button>
+
+              <div class="flex items-center justify-end gap-0.5 text-[10px] mt-0.5"
+                :class="m.direction === 'out' ? 'text-blue-100' : 'text-gray-400'">
+                {{ timeOf(m) }}
+                <component
+                  v-if="m.direction === 'out'"
+                  :is="tickOf(m).icon"
+                  class="w-3.5 h-3.5 shrink-0"
+                  :class="m.read_at ? 'text-sky-300' : 'text-blue-200'"
+                />
+              </div>
+            </div>
+          </div>
+
+          <div v-else class="flex" :class="m.direction === 'out' ? 'justify-end' : 'justify-start'" :data-bot="m.is_bot || undefined">
+            <div
+              class="max-w-[78%] rounded-2xl px-3 py-2 text-sm whitespace-pre-wrap break-words"
+              :class="m.is_bot
+                ? 'bg-violet-600 text-white rounded-br-sm'
+                : m.direction === 'out'
+                ? 'bg-blue-600 text-white rounded-br-sm'
+                : 'bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 border border-gray-100 dark:border-gray-700 rounded-bl-sm'"
+            ><!-- Balasan bot dibedakan warnanya & berlabel: pelanggan melihatnya sebagai jawaban
+                  otomatis, dan agen perlu tahu kalimat mana yang BUKAN tulisan timnya. Sumbernya
+                  (`bot_citations`, tak pernah dikirim ke pelanggan) bisa dibuka di sini. --><span
+                v-if="m.is_bot"
+                class="flex items-center gap-1 mb-1 text-[10px] font-medium uppercase tracking-wide text-violet-100 whitespace-normal"
+              ><Bot class="w-3 h-3 shrink-0" />{{ t('communications.bot.label') }}</span>{{ m.body }}<details
+                v-if="m.is_bot && m.bot_citations?.length"
+                class="mt-1.5 text-[11px] text-violet-100 whitespace-normal"
+              ><summary class="cursor-pointer select-none">{{ t('communications.bot.sources', { n: m.bot_citations.length }) }}</summary><ul class="mt-1 space-y-0.5 list-none"><li
+                    v-for="c in m.bot_citations"
+                    :key="c.n"
+                  >[{{ c.n }}] {{ c.title }}<template v-if="c.heading"> · {{ c.heading }}</template><template v-if="c.page"> · {{ t('communications.bot.page', { page: c.page }) }}</template></li></ul></details><span
+                class="inline-flex items-center gap-0.5 text-[10px] ml-2 align-bottom"
+                :class="m.direction === 'out' ? 'text-blue-100' : 'text-gray-400'"
+              >{{ timeOf(m) }}<component
+                  v-if="m.direction === 'out'"
+                  :is="tickOf(m).icon"
+                  class="w-3.5 h-3.5 shrink-0"
+                  :class="m.direction === 'out' ? (m.read_at ? 'text-sky-300' : 'text-blue-200') : ''"
+                /></span></div>
+          </div>
+        </template>
+
+        <div v-if="!messages.length" class="text-center text-sm text-gray-400 py-8">
+          {{ t('communications.emptyThread') }}
+        </div>
+      </template>
+    </div>
+
+    <!-- Keterangan tolakan reply (bertahan sampai keadaannya berubah) -->
+    <div v-if="replyNotice" class="shrink-0 px-4 py-2 text-xs border-t border-gray-100 dark:border-gray-700"
+      :class="replyNotice === 'outsideWindow' ? 'text-amber-700 bg-amber-50 dark:text-amber-300 dark:bg-amber-900/20' : 'text-red-700 bg-red-50 dark:text-red-300 dark:bg-red-900/20'"
+    >
+      {{ t(replyNotice === 'outsideWindow' ? 'communications.reason.outsideWindow' : 'communications.reason.notConnected') }}
+      <button
+        v-if="replyNotice === 'notConnected' && can('communications', 'can_configure')"
+        class="ml-1 underline font-medium"
+        @click="emit('go-meta')"
+      >{{ t('communications.goToMeta') }}</button>
+    </div>
+
+    <!-- Composer -->
+    <div class="shrink-0 border-t border-gray-100 dark:border-gray-700 p-3 flex items-end gap-2 bg-white dark:bg-gray-800">
+      <textarea
+        v-model="draft"
+        :placeholder="composerDisabled ? t('communications.windowExpired') : t('communications.replyPlaceholder')"
+        :aria-label="t('communications.replyPlaceholder')"
+        :disabled="composerDisabled"
+        rows="1"
+        class="flex-1 resize-none rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-900 dark:text-white text-sm focus:border-blue-500 focus:ring-blue-500 disabled:bg-gray-50 disabled:text-gray-400 dark:disabled:bg-gray-800 max-h-32 overflow-y-auto no-scrollbar"
+        @keydown.enter.exact.prevent="send"
+      ></textarea>
+      <AppButton variant="primary" :disabled="composerDisabled || !draft.trim() || sending" :aria-label="t('communications.send')" @click="send">
+        <Send class="w-4 h-4" />
+      </AppButton>
+    </div>
+  </div>
+</template>

package/src/components/customFields/CustomFieldFilterPanel.vue

@@ -0,0 +1,50 @@
+<script setup>
+// Panel filter custom fields — collapsible di bawah toolbar tabel (slot #subtoolbar
+// AppDataTable). Input dirender CustomFieldInput mode 'filter' (kontrak backend:
+// exact/contains, SATU nilai per field, belum ada range). Nilai '' = tidak difilter.
+// Parent yang memetakan object nilai ini ke param `custom_field[code]=`.
+import { useI18n } from 'vue-i18n'
+import { RotateCcw } from '@lucide/vue'
+import AppButton from '@initsolusidigital/worksuite-ui/AppButton.vue'
+import CustomFieldInput from './CustomFieldInput.vue'
+
+const props = defineProps({
+  // Definisi ber-settings.is_filterable=true saja (tipe file dikecualikan parent)
+  definitions: { type: Array, default: () => [] },
+  // Object nilai filter { code: value } — v-model
+  modelValue: { type: Object, default: () => ({}) },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const { t } = useI18n()
+
+function setField(code, val) {
+  emit('update:modelValue', { ...props.modelValue, [code]: val })
+}
+
+function reset() {
+  emit('update:modelValue', {})
+}
+</script>
+
+<template>
+  <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 shadow-sm p-4">
+    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+      <CustomFieldInput
+        v-for="field in definitions"
+        :key="field.id"
+        :field="field"
+        mode="filter"
+        :model-value="modelValue[field.code] ?? ''"
+        @update:model-value="setField(field.code, $event)"
+      />
+    </div>
+    <div class="flex justify-end mt-4">
+      <AppButton variant="secondary" size="sm" @click="reset">
+        <RotateCcw class="w-3.5 h-3.5" />
+        {{ t('common.customFields.filterReset') }}
+      </AppButton>
+    </div>
+  </div>
+</template>