@initsolusidigital/worksuite-shell 0.0.0-stage → 0.3.0

package/src/components/customFields/CustomFieldInput.vue

@@ -0,0 +1,422 @@
+<script setup>
+// Input generik custom field — SATU komponen merender 11 tipe berdasarkan definisi field.
+// Props murni (field definition + modelValue) tanpa coupling API: upload file disuntik
+// via prop function `uploadFn` supaya komponen tetap netral (kontrak Fase D).
+//
+// mode 'form'   → input penuh sesuai tipe, tanda wajib dari settings.required
+// mode 'filter' → varian ringkas utk panel filter (kontrak: exact/contains, satu nilai):
+//   text_long → input 1 baris; boolean → select Semua/Ya/Tidak; radio & checkbox →
+//   select SATU opsi; currency → input angka (exact amount); datetime → date (per hari).
+//   Tipe file tidak difilter — parent tidak merender field file di mode ini.
+import { useId, ref, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { loadCurrencyOptions, currencySymbol } from '@initsolusidigital/worksuite-core/composables/useCurrencies.js'
+import { useAuthStore } from '@initsolusidigital/worksuite-core/stores/auth.js'
+import { Upload, X, FileText, Loader2 } from '@lucide/vue'
+import AppInput from '@initsolusidigital/worksuite-ui/AppInput.vue'
+import AppTextarea from '@initsolusidigital/worksuite-ui/AppTextarea.vue'
+import AppSelect from '@initsolusidigital/worksuite-ui/AppSelect.vue'
+import AppCurrencySelect from '@initsolusidigital/worksuite-core/components/ui/AppCurrencySelect.vue'
+import AppMoneyInput from '@initsolusidigital/worksuite-ui/AppMoneyInput.vue'
+import AppDatePicker from '@initsolusidigital/worksuite-core/components/ui/AppDatePicker.vue'
+import AppDateTimePicker from '@initsolusidigital/worksuite-core/components/ui/AppDateTimePicker.vue'
+import AppToggle from '@initsolusidigital/worksuite-ui/AppToggle.vue'
+const grupLabelId = useId()
+const grupErrorId = useId()
+// Tiga cabang di bawah (boolean/radio/checkbox) merender KELOMPOK kontrol, bukan satu kotak — jadi
+// namanya tak bisa lewat `<label for>` (satu `for` hanya menunjuk satu elemen) dan pesan errornya
+// tak punya kontrol tunggal untuk ditautkan. Bentuk yang benar: pembungkusnya diberi `role="group"`
+// / `"radiogroup"` + `aria-labelledby` ke labelnya + `aria-describedby` ke pesannya. Cabang lain
+// meneruskan `:error` ke komponen UI yang sudah menanganinya sendiri — tak disentuh di sini.
+
+
+const props = defineProps({
+  // Definisi field (row custom_fields): { code, label, type, settings, options }
+  field: { type: Object, required: true },
+  modelValue: { type: [String, Number, Boolean, Array, Object], default: null },
+  mode: { type: String, default: 'form' }, // 'form' | 'filter'
+  disabled: { type: Boolean, default: false },
+  error: { type: String, default: '' },
+  // Tipe file: async (File) => { id, name, url, download_url } — parent yang tahu endpoint upload
+  uploadFn: { type: Function, default: null },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const { t, locale } = useI18n()
+
+const isFilter = computed(() => props.mode === 'filter')
+const required = computed(() => !isFilter.value && !!props.field.settings?.required)
+
+// Opsi radio/checkbox urut order dari definisi
+const options = computed(() =>
+  [...(props.field.options ?? [])].sort((a, b) => (a.order ?? 0) - (b.order ?? 0))
+)
+// Varian select utk mode filter — '' = semua (tidak difilter)
+const filterOptionItems = computed(() => [
+  { value: '', label: t('common.customFields.filterAll') },
+  ...options.value.map(o => ({ value: o.id, label: o.label })),
+])
+const booleanFilterItems = computed(() => [
+  { value: '',      label: t('common.customFields.filterAll') },
+  { value: 'true',  label: t('common.yes') },
+  { value: 'false', label: t('common.no') },
+])
+
+function set(val) {
+  emit('update:modelValue', val)
+}
+
+// Checkbox group: toggle satu option_id di array (array unik — duplikat ditolak backend)
+function toggleCheckbox(optionId) {
+  const current = Array.isArray(props.modelValue) ? [...props.modelValue] : []
+  const idx = current.indexOf(optionId)
+  if (idx === -1) current.push(optionId)
+  else current.splice(idx, 1)
+  set(current)
+}
+
+// Currency: object { amount, currency_id } — update sebagian
+function setCurrency(patch) {
+  set({ amount: '', currency_id: props.field.settings?.default_currency_id ?? null, ...(props.modelValue ?? {}), ...patch })
+}
+
+// Simbol mata uang terpilih sbg prefix nominal (IDR→"Rp") — daftar currency dari cache
+// bersama useCurrencies (request yang sama dgn AppCurrencySelect, tidak fetch dobel)
+const currencyList = ref([])
+if (props.field.type === 'currency') {
+  loadCurrencyOptions().then(list => { currencyList.value = list })
+}
+const currencyPrefix = computed(() => {
+  const id = props.modelValue?.currency_id
+  if (!id) return ''
+  const code = currencyList.value.find(o => o.value === id)?.code
+  return currencySymbol(code, locale.value === 'id' ? 'id-ID' : 'en-US')
+})
+
+// ── Upload file (langsung saat dipilih — keputusan produk) ──────────────────────────────
+// Batas dibaca DINAMIS dari `/auth/me` (`upload_max_kb`), bukan konstanta.
+// ⚠️ JANGAN kembalikan ke angka tertulis-tangan. Konstanta ber-komentar "sinkron limit backend"
+// menjanjikan sinkron yang tak pernah ada: begitu backend menaikkan gerbangnya, klien menolak
+// berkas yang server justru TERIMA — dan penolakannya terjadi di browser sehingga tak
+// meninggalkan jejak apa pun di log backend.
+const authStore = useAuthStore()
+const maxFileBytes = computed(() => authStore.uploadMaxBytes)
+const maxFileMb = computed(() => Math.floor(maxFileBytes.value / 1024 / 1024))
+const fileInput = ref(null)
+const uploading = ref(false)
+const uploadError = ref('')
+
+async function onFilePicked(e) {
+  const file = e.target.files?.[0]
+  e.target.value = '' // reset supaya file yang sama bisa dipilih ulang
+  if (!file || !props.uploadFn) return
+  uploadError.value = ''
+  if (file.size > maxFileBytes.value) {
+    uploadError.value = t('common.customFields.fileTooLarge', { size: maxFileMb.value })
+    return
+  }
+  uploading.value = true
+  try {
+    const uploaded = await props.uploadFn(file) // { id, name, url, download_url }
+    set(uploaded)
+  } catch (err) {
+    uploadError.value = err?.response?.data?.message || t('common.customFields.uploadError')
+  } finally {
+    uploading.value = false
+  }
+}
+</script>
+
+<template>
+  <!-- ── text_short ─────────────────────────────────────────────────────────────── -->
+  <AppInput
+    v-if="field.type === 'text_short'"
+    :model-value="modelValue ?? ''"
+    :label="field.label"
+    :required="required"
+    :disabled="disabled"
+    :error="error"
+    maxlength="255"
+    @update:model-value="set"
+  />
+
+  <!-- ── text_long — filter mode cukup input 1 baris (LIKE contains) ───────────── -->
+  <AppInput
+    v-else-if="field.type === 'text_long' && isFilter"
+    :model-value="modelValue ?? ''"
+    :label="field.label"
+    :disabled="disabled"
+    @update:model-value="set"
+  />
+  <AppTextarea
+    v-else-if="field.type === 'text_long'"
+    :model-value="modelValue ?? ''"
+    :label="field.label"
+    :required="required"
+    :disabled="disabled"
+    :error="error"
+    :rows="3"
+    @update:model-value="set"
+  />
+
+  <!-- ── number (max 4 desimal — divalidasi backend) ───────────────────────────── -->
+  <AppInput
+    v-else-if="field.type === 'number'"
+    :model-value="modelValue ?? ''"
+    :label="field.label"
+    type="number"
+    :required="required"
+    :disabled="disabled"
+    :error="error"
+    @update:model-value="set"
+  />
+
+  <!-- ── url (backend hanya terima http/https) ─────────────────────────────────── -->
+  <AppInput
+    v-else-if="field.type === 'url'"
+    :model-value="modelValue ?? ''"
+    :label="field.label"
+    type="url"
+    placeholder="https://"
+    :required="required"
+    :disabled="disabled"
+    :error="error"
+    @update:model-value="set"
+  />
+
+  <!-- ── date ───────────────────────────────────────────────────────────────────── -->
+  <AppDatePicker
+    v-else-if="field.type === 'date'"
+    :model-value="modelValue || null"
+    :label="field.label"
+    :required="required"
+    :disabled="disabled"
+    :error="error"
+    @update:model-value="set($event ?? '')"
+  />
+
+  <!-- ── datetime — filter mode pakai date saja (match per hari, kontrak backend) ── -->
+  <AppDatePicker
+    v-else-if="field.type === 'datetime' && isFilter"
+    :model-value="modelValue || null"
+    :label="field.label"
+    :disabled="disabled"
+    @update:model-value="set($event ?? '')"
+  />
+  <AppDateTimePicker
+    v-else-if="field.type === 'datetime'"
+    :model-value="modelValue ?? ''"
+    :label="field.label"
+    :required="required"
+    :disabled="disabled"
+    :error="error"
+    @update:model-value="set"
+  />
+
+  <!-- ── boolean — form: toggle; filter: select 3 state ────────────────────────── -->
+  <AppSelect
+    v-else-if="field.type === 'boolean' && isFilter"
+    :model-value="modelValue ?? ''"
+    :label="field.label"
+    :options="booleanFilterItems"
+    option-value="value"
+    option-label="label"
+    :disabled="disabled"
+    @update:model-value="set"
+  />
+  <div
+    v-else-if="field.type === 'boolean'"
+    role="group"
+    :aria-labelledby="grupLabelId"
+    :aria-describedby="error ? grupErrorId : undefined"
+    :aria-invalid="error ? 'true' : undefined"
+  >
+    <label :id="grupLabelId" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">
+      {{ field.label }} <span v-if="required" class="text-red-500">*</span>
+    </label>
+    <AppToggle
+      :model-value="!!modelValue"
+      :disabled="disabled"
+      color="green"
+      :label="modelValue ? t('common.yes') : t('common.no')"
+      @toggle="set(!modelValue)"
+    />
+    <p v-if="error" :id="grupErrorId" class="mt-1 text-xs text-red-600 dark:text-red-400">{{ error }}</p>
+  </div>
+
+  <!-- ── radio — form: radio group; filter: select satu opsi ───────────────────── -->
+  <AppSelect
+    v-else-if="field.type === 'radio' && isFilter"
+    :model-value="modelValue ?? ''"
+    :label="field.label"
+    :options="filterOptionItems"
+    option-value="value"
+    option-label="label"
+    :disabled="disabled"
+    @update:model-value="set"
+  />
+  <div
+    v-else-if="field.type === 'radio'"
+    role="radiogroup"
+    :aria-labelledby="grupLabelId"
+    :aria-describedby="error ? grupErrorId : undefined"
+    :aria-invalid="error ? 'true' : undefined"
+  >
+    <div class="flex items-center justify-between mb-1.5">
+      <label :id="grupLabelId" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
+        {{ field.label }} <span v-if="required" class="text-red-500">*</span>
+      </label>
+      <!-- Radio tidak bisa di-unset native — sediakan jalur hapus nilai utk field opsional -->
+      <button
+        v-if="modelValue && !required && !disabled"
+        type="button"
+        class="text-xs text-gray-400 hover:text-red-500 transition-colors"
+        @click="set('')"
+      >{{ t('common.customFields.clearChoice') }}</button>
+    </div>
+    <div class="space-y-1.5">
+      <label
+        v-for="opt in options"
+        :key="opt.id"
+        class="flex items-center gap-2.5"
+        :class="disabled ? 'cursor-not-allowed opacity-60' : 'cursor-pointer'"
+      >
+        <input
+          type="radio"
+          :name="`cf-${field.id}`"
+          :checked="modelValue === opt.id"
+          :disabled="disabled"
+          class="w-4 h-4 border-gray-300 dark:border-gray-600 text-blue-600 focus:ring-blue-500"
+          @change="set(opt.id)"
+        />
+        <span class="text-sm text-gray-700 dark:text-gray-300">{{ opt.label }}</span>
+      </label>
+    </div>
+    <p v-if="error" :id="grupErrorId" class="mt-1 text-xs text-red-600 dark:text-red-400">{{ error }}</p>
+  </div>
+
+  <!-- ── checkbox — form: checkbox group (array option_id); filter: select satu ── -->
+  <AppSelect
+    v-else-if="field.type === 'checkbox' && isFilter"
+    :model-value="modelValue ?? ''"
+    :label="field.label"
+    :options="filterOptionItems"
+    option-value="value"
+    option-label="label"
+    :disabled="disabled"
+    @update:model-value="set"
+  />
+  <div
+    v-else-if="field.type === 'checkbox'"
+    role="group"
+    :aria-labelledby="grupLabelId"
+    :aria-describedby="error ? grupErrorId : undefined"
+    :aria-invalid="error ? 'true' : undefined"
+  >
+    <label :id="grupLabelId" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">
+      {{ field.label }} <span v-if="required" class="text-red-500">*</span>
+    </label>
+    <div class="space-y-1.5">
+      <label
+        v-for="opt in options"
+        :key="opt.id"
+        class="flex items-center gap-2.5"
+        :class="disabled ? 'cursor-not-allowed opacity-60' : 'cursor-pointer'"
+      >
+        <input
+          type="checkbox"
+          :checked="Array.isArray(modelValue) && modelValue.includes(opt.id)"
+          :disabled="disabled"
+          class="w-4 h-4 rounded border-gray-300 dark:border-gray-600 text-blue-600 focus:ring-blue-500"
+          @change="toggleCheckbox(opt.id)"
+        />
+        <span class="text-sm text-gray-700 dark:text-gray-300">{{ opt.label }}</span>
+      </label>
+    </div>
+    <p v-if="error" :id="grupErrorId" class="mt-1 text-xs text-red-600 dark:text-red-400">{{ error }}</p>
+  </div>
+
+  <!-- ── currency — form: amount + dropdown mata uang; filter: nominal exact ───── -->
+  <AppMoneyInput
+    v-else-if="field.type === 'currency' && isFilter"
+    :model-value="modelValue ?? ''"
+    :label="field.label"
+    :disabled="disabled"
+    @update:model-value="set"
+  />
+  <div v-else-if="field.type === 'currency'">
+    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+      {{ field.label }} <span v-if="required" class="text-red-500">*</span>
+    </label>
+    <!-- Dropdown mata uang DULU (kiri, fleksibel — nama currency panjang), baru field
+         nominal (kanan, 11rem cukup sampai belasan digit). Mobile: stack, dropdown di atas. -->
+    <div class="grid grid-cols-1 sm:grid-cols-[minmax(0,1fr)_11rem] gap-2">
+      <!-- Dropdown mata uang reusable — bendera + Nama (KODE), fetch & cache sendiri -->
+      <AppCurrencySelect
+        :model-value="modelValue?.currency_id ?? null"
+        :disabled="disabled"
+        @update:model-value="setCurrency({ currency_id: $event })"
+      />
+      <!-- Nominal terformat uang live + prefix simbol mata uang terpilih (Rp 1.000.000,5) -->
+      <AppMoneyInput
+        :model-value="modelValue?.amount ?? ''"
+        :prefix="currencyPrefix"
+        :disabled="disabled"
+        :error="error"
+        @update:model-value="setCurrency({ amount: $event })"
+      />
+    </div>
+  </div>
+
+  <!-- ── file — upload langsung saat dipilih (via uploadFn), tampil nama + ganti/hapus ── -->
+  <div v-else-if="field.type === 'file'">
+    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+      {{ field.label }} <span v-if="required" class="text-red-500">*</span>
+    </label>
+    <input ref="fileInput" type="file" class="hidden" @change="onFilePicked" />
+    <div class="flex items-center gap-2 flex-wrap">
+      <!-- File terpasang: nama jadi link + tombol hapus. Tautannya `download_url` (rute ber-sesi;
+           ada di nilai tersimpan MAUPUN respons unggah), bukan `url` `/storage` yang 404 di produksi. -->
+      <template v-if="modelValue">
+        <a
+          v-if="modelValue.download_url"
+          :href="modelValue.download_url"
+          target="_blank"
+          rel="noopener"
+          class="inline-flex items-center gap-1.5 text-sm text-blue-600 dark:text-blue-400 hover:underline min-w-0"
+        >
+          <FileText class="w-4 h-4 shrink-0" />
+          <span class="truncate max-w-[220px]">{{ modelValue.name }}</span>
+        </a>
+        <span v-else class="inline-flex items-center gap-1.5 text-sm text-gray-700 dark:text-gray-300 min-w-0">
+          <FileText class="w-4 h-4 shrink-0" />
+          <span class="truncate max-w-[220px]">{{ modelValue.name }}</span>
+        </span>
+      </template>
+      <button
+        type="button"
+        :disabled="disabled || uploading"
+        class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg border border-gray-300 dark:border-gray-600 text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+        @click="fileInput.click()"
+      >
+        <Loader2 v-if="uploading" class="w-3.5 h-3.5 animate-spin" />
+        <Upload v-else class="w-3.5 h-3.5" />
+        {{ uploading
+          ? t('common.customFields.uploading')
+          : (modelValue ? t('common.customFields.changeFile') : t('common.customFields.uploadFile')) }}
+      </button>
+      <button
+        v-if="modelValue && !disabled"
+        type="button"
+        class="inline-flex items-center gap-1 px-2 py-1.5 text-xs font-medium rounded-lg text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors"
+        @click="set(null)"
+      >
+        <X class="w-3.5 h-3.5" />
+        {{ t('common.delete') }}
+      </button>
+    </div>
+    <p v-if="uploadError || error" class="mt-1 text-xs text-red-600 dark:text-red-400">{{ uploadError || error }}</p>
+    <p v-else class="mt-1 text-xs text-gray-400">{{ t('common.customFields.fileHint') }}</p>
+  </div>
+</template>

package/src/components/customFields/CustomFieldValue.vue

@@ -0,0 +1,129 @@
+<script setup>
+// Tampilan nilai custom field per tipe (read-only) — dipakai modal detail & sel tabel.
+// props.value = bentuk RESPONSE backend (number/currency amount = string desimal,
+// radio/checkbox = option_id, file = { id, name, url } | null).
+//
+// Keamanan: nilai url hanya dirender sbg <a> bila berskema http/https (defense-in-depth
+// di atas validasi backend — data lama/penyimpangan tetap aman); semua teks via
+// interpolation Vue (auto-escape), tidak pernah v-html.
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { FileText, ExternalLink } from '@lucide/vue'
+import AppBadge from '@initsolusidigital/worksuite-ui/AppBadge.vue'
+
+const props = defineProps({
+  field: { type: Object, required: true },
+  value: { type: [String, Number, Boolean, Array, Object], default: null },
+  // compact: varian sel tabel — chips jadi teks gabung, truncate lebar (keputusan #6)
+  compact: { type: Boolean, default: false },
+})
+
+const { t, locale } = useI18n()
+
+const isEmpty = computed(() =>
+  props.value === null || props.value === undefined || props.value === '' ||
+  (Array.isArray(props.value) && props.value.length === 0)
+)
+
+// Resolusi label opsi radio/checkbox dari definisi (nilai tersimpan = option_id)
+const optionLabel = (id) =>
+  (props.field.options ?? []).find(o => o.id === id)?.label ?? '—'
+
+const checkboxLabels = computed(() =>
+  Array.isArray(props.value) ? props.value.map(optionLabel) : []
+)
+
+const localeTag = computed(() => (locale.value === 'id' ? 'id-ID' : 'en-US'))
+
+const displayText = computed(() => {
+  const v = props.value
+  switch (props.field.type) {
+    case 'number':
+      return Number(parseFloat(v)).toLocaleString(localeTag.value, { maximumFractionDigits: 4 })
+    case 'date':
+      return new Date(`${v}T00:00:00`).toLocaleDateString(localeTag.value, { dateStyle: 'medium' })
+    case 'datetime':
+      return new Date(v).toLocaleString(localeTag.value, { dateStyle: 'medium', timeStyle: 'short' })
+    case 'radio':
+      return optionLabel(v)
+    case 'currency': {
+      // decimal_digits dari relasi currency response; fallback format angka polos + code
+      const digits = v.currency?.decimal_digits ?? 2
+      const amount = Number(parseFloat(v.amount))
+      const code = v.currency?.code
+      if (code) {
+        try {
+          return new Intl.NumberFormat(localeTag.value, {
+            style: 'currency', currency: code,
+            minimumFractionDigits: digits, maximumFractionDigits: digits,
+          }).format(amount)
+        } catch {
+          // code non-ISO4217 (currency kustom tenant) — jangan crash, format manual
+        }
+      }
+      return `${code ?? ''} ${amount.toLocaleString(localeTag.value, { minimumFractionDigits: digits, maximumFractionDigits: digits })}`.trim()
+    }
+    default:
+      return String(v)
+  }
+})
+
+// url: hanya http/https yang boleh jadi link (selain itu tampil teks polos)
+const safeUrl = computed(() => {
+  if (props.field.type !== 'url' || typeof props.value !== 'string') return null
+  return /^https?:\/\//i.test(props.value.trim()) ? props.value.trim() : null
+})
+</script>
+
+<template>
+  <span v-if="isEmpty" class="text-gray-400 dark:text-gray-500 text-sm">—</span>
+
+  <!-- boolean → badge Ya/Tidak -->
+  <AppBadge v-else-if="field.type === 'boolean'" :color="value ? 'green' : 'gray'">
+    {{ value ? t('common.yes') : t('common.no') }}
+  </AppBadge>
+
+  <!-- url → link aman (http/https saja) -->
+  <a
+    v-else-if="field.type === 'url' && safeUrl"
+    :href="safeUrl"
+    target="_blank"
+    rel="noopener"
+    class="inline-flex items-center gap-1 text-sm text-blue-600 dark:text-blue-400 hover:underline min-w-0"
+  >
+    <span class="truncate" :class="compact ? 'max-w-[200px]' : 'max-w-full'">{{ value }}</span>
+    <ExternalLink class="w-3 h-3 shrink-0" />
+  </a>
+
+  <!-- file → link nama file. `download_url` = rute unduh ber-sesi bergerbang modul entity-nya;
+       `url` menunjuk `/storage`, yang ditolak proxy produksi (tautannya 404). -->
+  <a
+    v-else-if="field.type === 'file' && value.download_url"
+    :href="value.download_url"
+    target="_blank"
+    rel="noopener"
+    class="inline-flex items-center gap-1.5 text-sm text-blue-600 dark:text-blue-400 hover:underline min-w-0"
+  >
+    <FileText class="w-3.5 h-3.5 shrink-0" />
+    <span class="truncate" :class="compact ? 'max-w-[200px]' : 'max-w-full'">{{ value.name }}</span>
+  </a>
+  <span v-else-if="field.type === 'file'" class="text-sm text-gray-700 dark:text-gray-300">{{ value.name }}</span>
+
+  <!-- checkbox → chips label (compact: gabung teks + truncate) -->
+  <span
+    v-else-if="field.type === 'checkbox' && compact"
+    class="text-sm text-gray-700 dark:text-gray-300 truncate max-w-[200px] inline-block align-bottom"
+    :title="checkboxLabels.join(', ')"
+  >{{ checkboxLabels.join(', ') }}</span>
+  <span v-else-if="field.type === 'checkbox'" class="inline-flex flex-wrap gap-1.5">
+    <AppBadge v-for="(label, i) in checkboxLabels" :key="i" color="blue">{{ label }}</AppBadge>
+  </span>
+
+  <!-- tipe lain → teks terformat (compact: truncate + title) -->
+  <span
+    v-else
+    class="text-sm text-gray-700 dark:text-gray-300"
+    :class="compact ? 'truncate max-w-[200px] inline-block align-bottom' : ''"
+    :title="compact ? displayText : undefined"
+  >{{ displayText }}</span>
+</template>

package/src/components/customFields/CustomFieldsSection.vue

@@ -0,0 +1,65 @@
+<script setup>
+// Section "Informasi Tambahan" utk form Create/Edit entity — render semua custom field
+// aktif urut `order` via CustomFieldInput, inline tanpa toggle pembuka (keputusan produk).
+// Komponen glue: menyuntik uploadFn (endpoint upload custom fields); dropdown currency
+// ditangani AppCurrencySelect (self-fetch + cache) di dalam CustomFieldInput.
+// Kalau tidak ada field aktif → tidak merender apa pun (section hilang total).
+import { useI18n } from 'vue-i18n'
+import { customFieldsApi } from '@initsolusidigital/worksuite-core/api/endpoints/customFields.js'
+import CustomFieldInput from './CustomFieldInput.vue'
+
+const props = defineProps({
+  companyId: { type: String, required: true },
+  entityType: { type: String, required: true }, // 'users' | 'employees'
+  // Definisi aktif urut order (dimuat parent via useCustomFields — parent juga butuh
+  // definisi utk buildPayload/validate, jadi fetch-nya tidak di sini biar tidak dobel)
+  definitions: { type: Array, default: () => [] },
+  // Object nilai form { code: value } — v-model
+  modelValue: { type: Object, default: () => ({}) },
+  // Error per field { code: pesan } — gabungan validasi client + 422 backend
+  errors: { type: Object, default: () => ({}) },
+  disabled: { type: Boolean, default: false },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const { t } = useI18n()
+
+function setField(code, val) {
+  emit('update:modelValue', { ...props.modelValue, [code]: val })
+}
+
+// Upload file custom field — langsung saat dipilih; response.id jadi nilai field
+async function uploadFile(file) {
+  const fd = new FormData()
+  fd.append('entity_type', props.entityType)
+  fd.append('file', file)
+  const { data } = await customFieldsApi.upload(props.companyId, fd)
+  return data.data // { id, name, url, download_url }
+}
+
+</script>
+
+<template>
+  <div v-if="definitions.length">
+    <!-- Header section — pola sama dgn section lain di form modal -->
+    <div class="flex items-center gap-2 mb-4">
+      <div class="w-1 h-3.5 rounded-full bg-blue-500 shrink-0"></div>
+      <h4 class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+        {{ t('common.customFields.sectionTitle') }}
+      </h4>
+    </div>
+    <div class="space-y-4">
+      <CustomFieldInput
+        v-for="field in definitions"
+        :key="field.id"
+        :field="field"
+        :model-value="modelValue[field.code]"
+        :disabled="disabled"
+        :error="errors[field.code] === true ? t('common.customFields.requiredError') : (errors[field.code] || '')"
+        :upload-fn="uploadFile"
+        @update:model-value="setField(field.code, $event)"
+      />
+    </div>
+  </div>
+</template>

package/src/components/customFields/fieldTypes.js

@@ -0,0 +1,23 @@
+import {
+  Type, AlignLeft, Hash, Coins, ToggleLeft, Calendar, Clock, Link2,
+  CircleDot, ListChecks, Paperclip,
+} from '@lucide/vue'
+
+// Metadata 11 tipe custom field — icon utk type picker builder & tabel definisi.
+// Nama & deskripsi via i18n: common.customFields.types.{type} / typeDesc.{type}.
+// `hasOptions` = wajib punya opsi (radio/checkbox); `type` immutable setelah create.
+export const FIELD_TYPES = [
+  { type: 'text_short', icon: Type },
+  { type: 'text_long',  icon: AlignLeft },
+  { type: 'number',     icon: Hash },
+  { type: 'currency',   icon: Coins },
+  { type: 'boolean',    icon: ToggleLeft },
+  { type: 'date',       icon: Calendar },
+  { type: 'datetime',   icon: Clock },
+  { type: 'url',        icon: Link2 },
+  { type: 'radio',      icon: CircleDot,  hasOptions: true },
+  { type: 'checkbox',   icon: ListChecks, hasOptions: true },
+  { type: 'file',       icon: Paperclip },
+]
+
+export const FIELD_TYPE_MAP = Object.fromEntries(FIELD_TYPES.map(ft => [ft.type, ft]))