@initsolusidigital/worksuite-shell 0.0.0-stage → 0.3.0

package/src/components/dashboard/AppCustomWidget.vue

@@ -0,0 +1,138 @@
+<script setup>
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useAppStore } from '@initsolusidigital/worksuite-core/stores/app.js'
+import { useCustomWidget } from '@initsolusidigital/worksuite-core/composables/useCustomWidget.js'
+import { Loader2, TriangleAlert, Database } from '@lucide/vue'
+
+// Renderer custom widget dashboard. Menarik data via proxy backend (useCustomWidget) lalu
+// me-render sesuai `config.viz`: line/bar/pie (ApexCharts), table, atau stat. Registry widget
+// milik app tak perlu mendaftarkannya: id `custom:*` diarahkan ke komponen ini oleh
+// AppDashboardGrid.
+const props = defineProps({
+  config: { type: Object, required: true }, // { title, viz, source, mapping, refresh }
+})
+
+const { t } = useI18n()
+const appStore = useAppStore()
+const { loading, error, series, table, statValue } = useCustomWidget(() => props.config)
+
+const viz = computed(() => props.config?.viz || 'stat')
+
+// Palet warna chart (selaras aksen platform: biru → ungu → amber → hijau → merah → violet)
+const PALETTE = ['#3b82f6', '#6366f1', '#f59e0b', '#10b981', '#ef4444', '#8b5cf6', '#ec4899', '#14b8a6']
+
+// Opsi umum ApexCharts — theme mengikuti dark mode app, kromnya diminimalkan (widget kecil).
+const baseOptions = computed(() => ({
+  chart: { toolbar: { show: false }, animations: { enabled: false }, background: 'transparent', fontFamily: 'inherit', parentHeightOffset: 0 },
+  theme: { mode: appStore.darkMode ? 'dark' : 'light' },
+  colors: PALETTE,
+  dataLabels: { enabled: false },
+  grid: { borderColor: appStore.darkMode ? '#374151' : '#e5e7eb', strokeDashArray: 4, padding: { left: 8, right: 8, top: 0, bottom: 0 } },
+  tooltip: { theme: appStore.darkMode ? 'dark' : 'light' },
+  legend: { labels: { colors: appStore.darkMode ? '#9ca3af' : '#6b7280' } },
+}))
+
+const chartType = computed(() => ({ line: 'line', bar: 'bar', pie: 'pie' }[viz.value] || 'line'))
+
+const chartSeries = computed(() => {
+  if (viz.value === 'pie') return series.value.values
+  return [{ name: props.config?.title || '', data: series.value.values }]
+})
+
+const chartOptions = computed(() => {
+  const b = baseOptions.value
+  if (viz.value === 'pie') {
+    return { ...b, chart: { ...b.chart, type: 'pie' }, labels: series.value.labels, legend: { ...b.legend, position: 'bottom' } }
+  }
+  if (viz.value === 'bar') {
+    return {
+      ...b, chart: { ...b.chart, type: 'bar' },
+      plotOptions: { bar: { borderRadius: 4, columnWidth: '55%' } },
+      xaxis: { categories: series.value.labels, labels: { style: { colors: appStore.darkMode ? '#9ca3af' : '#6b7280' } } },
+      yaxis: { labels: { style: { colors: appStore.darkMode ? '#9ca3af' : '#6b7280' } } },
+    }
+  }
+  return {
+    ...b, chart: { ...b.chart, type: 'line' },
+    stroke: { curve: 'smooth', width: 2.5 },
+    xaxis: { categories: series.value.labels, labels: { style: { colors: appStore.darkMode ? '#9ca3af' : '#6b7280' } } },
+    yaxis: { labels: { style: { colors: appStore.darkMode ? '#9ca3af' : '#6b7280' } } },
+  }
+})
+
+// Pesan error: kode dikenal → i18n; selain itu tampilkan pesan backend apa adanya.
+const errorText = computed(() => {
+  const e = error.value
+  if (!e) return ''
+  return ['noUrl', 'fetchFailed'].includes(e) ? t(`dashboard.custom.err.${e}`) : e
+})
+
+// Kosong = fetch sukses tapi mapping tak menghasilkan data (kemungkinan path salah)
+const isEmpty = computed(() => {
+  if (loading.value || error.value) return false
+  if (viz.value === 'stat') return statValue.value == null
+  if (viz.value === 'table') return table.value.rows.length === 0
+  return series.value.values.length === 0
+})
+</script>
+
+<template>
+  <div class="w-full h-full bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 shadow-sm flex flex-col overflow-hidden">
+    <!-- Header: judul widget -->
+    <div class="px-4 pt-3 pb-2 shrink-0">
+      <h3 class="text-sm font-semibold text-gray-900 dark:text-white truncate">{{ config.title }}</h3>
+    </div>
+
+    <!-- Body -->
+    <div class="flex-1 min-h-0 px-4 pb-3 relative">
+      <!-- Loading -->
+      <div v-if="loading" class="absolute inset-0 flex items-center justify-center text-gray-400">
+        <Loader2 class="w-5 h-5 animate-spin" />
+      </div>
+
+      <!-- Error -->
+      <div v-else-if="error" class="h-full flex flex-col items-center justify-center text-center gap-1.5 px-2">
+        <TriangleAlert class="w-5 h-5 text-amber-500" />
+        <p class="text-xs text-gray-500 dark:text-gray-400 line-clamp-3">{{ errorText }}</p>
+      </div>
+
+      <!-- Empty (mapping tak menghasilkan data) -->
+      <div v-else-if="isEmpty" class="h-full flex flex-col items-center justify-center text-center gap-1.5">
+        <Database class="w-5 h-5 text-gray-300 dark:text-gray-600" />
+        <p class="text-xs text-gray-400 dark:text-gray-500">{{ t('dashboard.custom.noData') }}</p>
+      </div>
+
+      <!-- Stat -->
+      <div v-else-if="viz === 'stat'" class="h-full flex flex-col items-center justify-center">
+        <span class="text-3xl font-bold text-gray-900 dark:text-white break-all text-center">{{ statValue }}</span>
+      </div>
+
+      <!-- Table -->
+      <div v-else-if="viz === 'table'" class="h-full overflow-auto scrollbar-rounded -mx-1 px-1">
+        <table class="w-full text-xs">
+          <thead>
+            <tr class="text-left text-gray-500 dark:text-gray-400 border-b border-gray-200 dark:border-gray-700">
+              <th v-for="col in table.columns" :key="col" class="py-1.5 pr-3 font-medium whitespace-nowrap">{{ col }}</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="(row, i) in table.rows" :key="i" class="border-b border-gray-100 dark:border-gray-700/50 last:border-0">
+              <td v-for="(cell, j) in row" :key="j" class="py-1.5 pr-3 text-gray-700 dark:text-gray-300 whitespace-nowrap">{{ cell }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <!-- Chart (line/bar/pie) -->
+      <apexchart
+        v-else
+        width="100%"
+        height="100%"
+        :type="chartType"
+        :options="chartOptions"
+        :series="chartSeries"
+      />
+    </div>
+  </div>
+</template>

package/src/components/dashboard/AppCustomWidgetForm.vue

@@ -0,0 +1,173 @@
+<script setup>
+import { ref, computed, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { dashboardApi } from '@initsolusidigital/worksuite-core/api/endpoints/dashboard.js'
+import { useFormValidation } from '@initsolusidigital/worksuite-core/composables/useFormValidation.js'
+import AppModal from '@initsolusidigital/worksuite-ui/AppModal.vue'
+import AppInput from '@initsolusidigital/worksuite-ui/AppInput.vue'
+import AppSelect from '@initsolusidigital/worksuite-ui/AppSelect.vue'
+import AppButton from '@initsolusidigital/worksuite-ui/AppButton.vue'
+import { Play, Loader2 } from '@lucide/vue'
+
+// Form tambah/edit custom widget dashboard. Menyusun `config`
+// (judul, viz, source URL/method, mapping field, refresh) lalu emit ke pemanggil yang
+// menyimpannya ke layout (useDashboardLayout.saveCustomWidget). Tombol "Uji" memanggil
+// proxy backend agar user melihat struktur JSON → tahu path mapping yang benar.
+const props = defineProps({
+  value: { type: Object, default: null }, // config yang diedit (null = tambah baru)
+})
+const emit = defineEmits(['close', 'save'])
+
+const { t } = useI18n()
+const { fieldErrors, requireFilled, clearErrors } = useFormValidation()
+
+const VIZ_OPTIONS = computed(() => [
+  { value: 'stat',  label: t('dashboard.custom.viz.stat') },
+  { value: 'table', label: t('dashboard.custom.viz.table') },
+  { value: 'line',  label: t('dashboard.custom.viz.line') },
+  { value: 'bar',   label: t('dashboard.custom.viz.bar') },
+  { value: 'pie',   label: t('dashboard.custom.viz.pie') },
+])
+const METHOD_OPTIONS = ['GET', 'POST', 'PUT', 'PATCH', 'DELETE', 'HEAD']
+const REFRESH_OPTIONS = computed(() => [
+  { value: '0',    label: t('dashboard.custom.refresh.off') },
+  { value: '60',   label: t('dashboard.custom.refresh.m1') },
+  { value: '300',  label: t('dashboard.custom.refresh.m5') },
+  { value: '900',  label: t('dashboard.custom.refresh.m15') },
+  { value: '3600', label: t('dashboard.custom.refresh.h1') },
+])
+
+const form = ref(blank())
+function blank() {
+  return { title: '', viz: 'stat', url: '', method: 'GET', refresh: '0', rows: '', x: '', y: '', value: '' }
+}
+function initFrom(c) {
+  form.value = {
+    title: c?.title || '',
+    viz: c?.viz || 'stat',
+    url: c?.source?.url || '',
+    method: c?.source?.method || 'GET',
+    refresh: String(c?.refresh ?? 0),
+    rows: c?.mapping?.rows || '',
+    x: c?.mapping?.x || '',
+    y: c?.mapping?.y || '',
+    value: c?.mapping?.value || '',
+  }
+}
+const isEdit = computed(() => !!props.value)
+const isChart = computed(() => ['line', 'bar', 'pie'].includes(form.value.viz))
+
+// ── Uji koneksi ──────────────────────────────────────────────────────────────
+// Dideklarasikan SEBELUM watch(immediate) di bawah — watch memanggil resetTest() sinkron
+// saat setup, jadi ref-nya wajib sudah ada (hindari temporal dead zone).
+const testLoading = ref(false)
+const testError = ref('')
+const testResult = ref('')     // JSON pretty (dipangkas) untuk membantu user menyusun mapping
+function resetTest() { testLoading.value = false; testError.value = ''; testResult.value = '' }
+
+// Re-init tiap kali dibuka utk config berbeda
+watch(() => props.value, (v) => { initFrom(v); clearErrors(); resetTest() }, { immediate: true })
+
+async function runTest() {
+  if (!form.value.url) { testError.value = t('dashboard.custom.err.noUrl'); return }
+  testLoading.value = true; testError.value = ''; testResult.value = ''
+  try {
+    const { data } = await dashboardApi.widgetProxy({ url: form.value.url, method: form.value.method })
+    const body = data?.data?.body ?? ''
+    let pretty = body
+    try { pretty = JSON.stringify(JSON.parse(body), null, 2) } catch { /* biarkan teks mentah */ }
+    testResult.value = pretty.length > 4000 ? pretty.slice(0, 4000) + '\n…' : pretty
+  } catch (e) {
+    testError.value = e?.response?.data?.message || t('dashboard.custom.err.fetchFailed')
+  } finally {
+    testLoading.value = false
+  }
+}
+
+function buildConfig() {
+  const f = form.value
+  const mapping = {}
+  if (f.viz === 'stat') mapping.value = f.value
+  else if (f.viz === 'table') { if (f.rows) mapping.rows = f.rows }
+  else { if (f.rows) mapping.rows = f.rows; if (f.x) mapping.x = f.x; if (f.y) mapping.y = f.y }
+  return {
+    title: f.title.trim(),
+    viz: f.viz,
+    source: { url: f.url.trim(), method: f.method },
+    mapping,
+    refresh: Number(f.refresh) || 0,
+  }
+}
+
+// ⚠️ SENGAJA memakai `useFormValidation`, BUKAN `useFormSubmit`. Alasannya: form ini tak pernah
+// memanggil API — ia
+// memvalidasi lalu `emit('save', config)`, dan konfigurasinya menumpang JSON `dashboard_layout`
+// yang disimpan di tempat lain. `useFormSubmit` ada untuk membungkus REQUEST (status→pesan,
+// toast, saving); di sini tak ada request untuk dibungkus, jadi memakainya cuma menambah
+// lapisan yang tak menjawab apa pun. Jangan "diseragamkan" tanpa membaca ini dulu.
+function submit() {
+  clearErrors()
+  // stat wajib punya path nilai; chart/table cukup url (mapping opsional, auto-deteksi bentuk)
+  if (!requireFilled(form.value, { title: true, url: true, value: form.value.viz === 'stat' })) return
+  emit('save', buildConfig())
+}
+</script>
+
+<template>
+  <AppModal
+    :title="isEdit ? t('dashboard.custom.editTitle') : t('dashboard.custom.addTitle')"
+    :subtitle="t('dashboard.custom.subtitle')"
+    size="lg"
+    @close="emit('close')"
+  >
+    <div class="space-y-4">
+      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+        <AppInput v-model="form.title" :label="t('dashboard.custom.field.title')" required :error="fieldErrors.title?.[0]" :placeholder="t('dashboard.custom.ph.title')" />
+        <AppSelect v-model="form.viz" :label="t('dashboard.custom.field.viz')" :options="VIZ_OPTIONS" :placeholder="''" />
+      </div>
+
+      <!-- Sumber data -->
+      <AppInput v-model="form.url" :label="t('dashboard.custom.field.url')" required :error="fieldErrors.url?.[0]" placeholder="https://api.frankfurter.dev/v1/latest" :hint="t('dashboard.custom.hint.publicOnly')" />
+      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+        <AppSelect v-model="form.method" :label="t('dashboard.custom.field.method')" :options="METHOD_OPTIONS" :placeholder="''" />
+        <AppSelect v-model="form.refresh" :label="t('dashboard.custom.field.refresh')" :options="REFRESH_OPTIONS" :placeholder="''" />
+      </div>
+
+      <!-- Uji koneksi (bantu susun mapping) -->
+      <div>
+        <AppButton variant="secondary" size="sm" :disabled="testLoading" @click="runTest">
+          <Loader2 v-if="testLoading" class="w-3.5 h-3.5 animate-spin" />
+          <Play v-else class="w-3.5 h-3.5" />
+          {{ t('dashboard.custom.test') }}
+        </AppButton>
+        <p v-if="testError" class="mt-2 text-xs text-red-600 dark:text-red-400">{{ testError }}</p>
+        <pre v-else-if="testResult" class="mt-2 max-h-48 overflow-auto scrollbar-rounded text-[11px] leading-relaxed bg-gray-50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-700 rounded-lg p-3 text-gray-700 dark:text-gray-300">{{ testResult }}</pre>
+      </div>
+
+      <!-- Mapping field — tergantung viz -->
+      <div class="pt-2 border-t border-gray-200 dark:border-gray-700">
+        <p class="text-xs font-medium text-gray-500 dark:text-gray-400 mb-3">{{ t('dashboard.custom.mappingTitle') }}</p>
+
+        <!-- stat -->
+        <AppInput v-if="form.viz === 'stat'" v-model="form.value" :label="t('dashboard.custom.field.valuePath')" required :error="fieldErrors.value?.[0]" placeholder="rates.USD" :hint="t('dashboard.custom.hint.path')" />
+
+        <!-- table -->
+        <AppInput v-else-if="form.viz === 'table'" v-model="form.rows" :label="t('dashboard.custom.field.rowsPath')" placeholder="rates" :hint="t('dashboard.custom.hint.rows')" />
+
+        <!-- line/bar/pie -->
+        <div v-else class="space-y-4">
+          <AppInput v-model="form.rows" :label="t('dashboard.custom.field.rowsPath')" placeholder="rates" :hint="t('dashboard.custom.hint.rowsChart')" />
+          <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+            <AppInput v-model="form.x" :label="t('dashboard.custom.field.xField')" placeholder="date" :hint="t('dashboard.custom.hint.field')" />
+            <AppInput v-model="form.y" :label="t('dashboard.custom.field.yField')" placeholder="rate" :hint="t('dashboard.custom.hint.field')" />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <template #footer>
+      <AppButton variant="ghost" @click="emit('close')">{{ t('common.cancel') }}</AppButton>
+      <AppButton variant="primary" @click="submit">{{ isEdit ? t('common.save') : t('common.add') }}</AppButton>
+    </template>
+  </AppModal>
+</template>

package/src/components/dashboard/AppDashboardGrid.vue

@@ -0,0 +1,200 @@
+<script setup>
+import { computed, onBeforeUnmount, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { GridLayout, GridItem } from 'grid-layout-plus'
+import { X, GripVertical, Pencil } from '@lucide/vue'
+import AppCustomWidget from './AppCustomWidget.vue'
+import AppCustomWidgetForm from './AppCustomWidgetForm.vue'
+
+// Grid dashboard yang bisa di-atur. Drag + resize widget.
+// State dari useDashboardLayout (prop `dash`); katalog widget dari prop `widgets` (milik app).
+// Toolbar (Atur/Tambah/Reset/Selesai) DIPISAH ke AppDashboardToolbar (ditaruh sebaris
+// breadcrumb via slot AppLayout `header-actions`) — grid ini murni papan widget.
+// Widget custom (id `custom:*`) dirender oleh AppCustomWidget dgn `config` dari item layout.
+const { t } = useI18n()
+
+const props = defineProps({
+  dash:    { type: Object, required: true }, // return useDashboardLayout
+  widgets: { type: Object, required: true }, // { [id]: { component, titleKey, ... } }
+})
+
+// WAJIB destructure dari props.dash: ref yang diakses sbg `props.dash.x` di template TIDAK
+// auto-unwrap (dash = objek plain, bukan reactive).
+const {
+  layout, editMode, removeWidget, isCustomWidget,
+  customFormOpen, customFormValue, openCustomForm, saveCustomWidget, closeCustomForm,
+} = props.dash
+
+// Judul untuk handle drag & tooltip: custom → dari config; built-in → dari i18n registry.
+const widgetTitle = (item) => {
+  if (isCustomWidget(item.i)) return item.config?.title || t('dashboard.custom.untitled')
+  const key = props.widgets[item.i]?.titleKey
+  return key ? t(key) : item.i
+}
+
+// ── Mode tumpuk mobile (<640px) ───────────────────────────────────────────────
+// Grid 12 kolom dipertahankan di semua lebar oleh grid-layout-plus (:responsive
+// sengaja false — layout tersimpan per-user memakai koordinat 12 kolom, mode
+// responsive pustaka akan menulis-balik koordinat itu dan merusak simpanan).
+// Di bawah `sm`, sel 4-kolom cuma ±110px — chart/tabel tak terbaca. Jadi di
+// mobile grid DIGANTI tumpukan satu kolom urut posisi visual (y, lalu x);
+// drag/resize tak tersedia (tak bermakna di satu kolom), hapus/edit tetap ada.
+const mobileQuery = window.matchMedia('(max-width: 639px)')
+const isMobile = ref(mobileQuery.matches)
+const onMobileChange = (e) => { isMobile.value = e.matches }
+mobileQuery.addEventListener('change', onMobileChange)
+onBeforeUnmount(() => mobileQuery.removeEventListener('change', onMobileChange))
+
+const stackedLayout = computed(() =>
+  [...layout.value].sort((a, b) => (a.y - b.y) || (a.x - b.x)),
+)
+
+// Tinggi kartu di mode tumpuk = tinggi sel grid yang sama (h × rowHeight + gap),
+// supaya chart ber-tinggi-tetap (Apex) tetap punya ruang yang sama dgn di grid.
+const stackedHeight = (item) => `${item.h * 72 + (item.h - 1) * 16}px`
+</script>
+
+<template>
+  <div>
+    <!-- ── Grid ─────────────────────────────────────────────────────────────── -->
+    <!-- key=editMode: paksa re-mount saat ganti mode supaya drag/resize handle sinkron.
+         -mx-4/-mt-4 = cancel inset tepi bawaan grid (item selalu +marginX/-Y dari tepi
+         container = 16px). Tanpa ini widget 16px lebih masuk daripada breadcrumb/halaman
+         lain → tak sejajar. Nilai HARUS = marginX/Y grid (16px = -4). -->
+    <!-- Mode tumpuk mobile: satu kolom, urut posisi visual. Hapus/edit widget
+         tetap bisa (mode Atur), hanya drag/resize yang tak tersedia. -->
+    <div v-if="isMobile" class="space-y-4">
+      <div
+        v-for="item in stackedLayout"
+        :key="item.i"
+        class="relative"
+        :class="editMode ? 'ring-2 ring-blue-300 dark:ring-blue-700 ring-offset-2 ring-offset-gray-100 dark:ring-offset-gray-900 rounded-xl' : ''"
+        :style="{ height: stackedHeight(item) }"
+      >
+        <div v-if="editMode" class="absolute top-1.5 right-1.5 z-20 flex items-center gap-1">
+          <button
+            v-if="isCustomWidget(item.i)"
+            type="button"
+            class="w-7 h-7 flex items-center justify-center rounded-lg bg-white/90 dark:bg-gray-800/90 text-gray-500 dark:text-gray-400 shadow hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
+            :title="t('dashboard.custom.editTitle')"
+            :aria-label="t('dashboard.custom.editTitle')"
+            @click="openCustomForm(item)"
+          >
+            <Pencil class="w-3.5 h-3.5" />
+          </button>
+          <button
+            type="button"
+            class="w-7 h-7 flex items-center justify-center rounded-lg bg-white/90 dark:bg-gray-800/90 text-red-500 shadow hover:bg-red-50 dark:hover:bg-red-900/30 transition-colors"
+            :title="t('dashboard.grid.removeWidget')"
+            :aria-label="t('dashboard.grid.removeWidget')"
+            @click="removeWidget(item.i)"
+          >
+            <X class="w-4 h-4" />
+          </button>
+        </div>
+        <div class="h-full overflow-hidden" :class="editMode ? 'pointer-events-none select-none' : ''">
+          <AppCustomWidget v-if="isCustomWidget(item.i)" :config="item.config" />
+          <component v-else :is="widgets[item.i]?.component" :widget-id="item.i" />
+        </div>
+      </div>
+    </div>
+
+    <GridLayout
+      v-else
+      :key="editMode ? 'edit' : 'view'"
+      class="-mx-4 -mt-4"
+      :layout="layout"
+      :col-num="12"
+      :row-height="72"
+      :margin="[16, 16]"
+      :is-draggable="editMode"
+      :is-resizable="editMode"
+      :responsive="false"
+      :vertical-compact="true"
+      :use-css-transforms="true"
+      drag-allow-from=".widget-drag-handle"
+    >
+      <GridItem
+        v-for="item in layout"
+        :key="item.i"
+        :i="item.i"
+        :x="item.x"
+        :y="item.y"
+        :w="item.w"
+        :h="item.h"
+        :min-w="item.minW"
+        :min-h="item.minH"
+      >
+        <div
+          class="relative h-full"
+          :class="editMode ? 'ring-2 ring-blue-300 dark:ring-blue-700 ring-offset-2 ring-offset-gray-100 dark:ring-offset-gray-900 rounded-xl' : ''"
+        >
+          <!-- Overlay kontrol saat mode edit -->
+          <template v-if="editMode">
+            <div class="widget-drag-handle absolute top-1.5 left-1.5 z-20 w-7 h-7 flex items-center justify-center rounded-lg bg-white/90 dark:bg-gray-800/90 text-gray-500 dark:text-gray-400 shadow cursor-move" :title="widgetTitle(item)">
+              <GripVertical class="w-4 h-4" />
+            </div>
+            <div class="absolute top-1.5 right-1.5 z-20 flex items-center gap-1">
+              <!-- Edit config: hanya widget custom -->
+              <button
+                v-if="isCustomWidget(item.i)"
+                type="button"
+                class="w-7 h-7 flex items-center justify-center rounded-lg bg-white/90 dark:bg-gray-800/90 text-gray-500 dark:text-gray-400 shadow hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
+                :title="t('dashboard.custom.editTitle')"
+                @click="openCustomForm(item)"
+              >
+                <Pencil class="w-3.5 h-3.5" />
+              </button>
+              <button
+                type="button"
+                class="w-7 h-7 flex items-center justify-center rounded-lg bg-white/90 dark:bg-gray-800/90 text-red-500 shadow hover:bg-red-50 dark:hover:bg-red-900/30 transition-colors"
+                :title="t('dashboard.grid.removeWidget')"
+                @click="removeWidget(item.i)"
+              >
+                <X class="w-4 h-4" />
+              </button>
+            </div>
+          </template>
+
+          <!-- Konten widget — overflow-hidden supaya rapi di dalam sel -->
+          <div class="h-full overflow-hidden" :class="editMode ? 'pointer-events-none select-none' : ''">
+            <AppCustomWidget v-if="isCustomWidget(item.i)" :config="item.config" />
+            <component v-else :is="widgets[item.i]?.component" :widget-id="item.i" />
+          </div>
+        </div>
+      </GridItem>
+    </GridLayout>
+
+    <!-- Form tambah/edit custom widget — dibuka dari toolbar (Tambah Kustom) atau
+         tombol edit per-widget. State di `dash` supaya kedua pemicu berbagi satu sumber. -->
+    <AppCustomWidgetForm
+      v-if="customFormOpen"
+      :value="customFormValue"
+      @save="saveCustomWidget"
+      @close="closeCustomForm"
+    />
+  </div>
+</template>
+
+<style>
+/* grid-layout-plus tidak ship file CSS (v1.1.x) — sediakan CSS inti sendiri.
+   Posisi item pakai transform inline (use-css-transforms), CSS ini utk transisi,
+   placeholder, dan handle resize. */
+.vgl-layout { position: relative; transition: height 0.2s ease; }
+.vgl-item { box-sizing: border-box; touch-action: none; transition: all 0.18s ease; transition-property: left, top, right; }
+.vgl-item.vgl-item--transform { left: 0; right: auto; transition-property: transform; }
+.vgl-item.vgl-item--dragging { transition: none; z-index: 3; user-select: none; }
+.vgl-item.vgl-item--resizing { opacity: 0.85; z-index: 3; }
+/* Placeholder = bayangan tujuan saat drag: garis putus-putus biru + isi tipis, jelas terlihat */
+.vgl-item.vgl-item--placeholder { background: rgb(59 130 246 / 0.08); border: 2px dashed rgb(59 130 246 / 0.65); border-radius: 0.75rem; z-index: 2; user-select: none; transition-duration: 0.08s; }
+:root[data-theme="dark"] .vgl-item.vgl-item--placeholder,
+.dark .vgl-item.vgl-item--placeholder { background: rgb(96 165 250 / 0.1); border-color: rgb(96 165 250 / 0.6); }
+.vgl-item__resizer {
+  position: absolute; right: 0; bottom: 0; width: 20px; height: 20px; z-index: 20;
+  cursor: se-resize;
+}
+.vgl-item__resizer::after {
+  content: ''; position: absolute; right: 4px; bottom: 4px; width: 6px; height: 6px;
+  border-right: 2px solid rgb(107 114 128 / 0.7); border-bottom: 2px solid rgb(107 114 128 / 0.7);
+}
+</style>

package/src/components/dashboard/AppDashboardToolbar.vue

@@ -0,0 +1,66 @@
+<script setup>
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { Pencil, Check, Plus, RotateCcw, Sparkles } from '@lucide/vue'
+import AppButton from '@initsolusidigital/worksuite-ui/AppButton.vue'
+
+// Toolbar dashboard — dipisah dari grid supaya bisa ditaruh SEBARIS dengan breadcrumb
+// (slot AppLayout `header-actions`). State dari useDashboardLayout (prop `dash`).
+const { t } = useI18n()
+
+const props = defineProps({
+  dash:    { type: Object, required: true },
+  widgets: { type: Object, required: true },
+})
+
+// Ref di objek plain (props.dash) tak auto-unwrap di template → destructure dulu.
+const { editMode, saving, availableToAdd, toggleEdit, reset, addWidget, openCustomForm } = props.dash
+const showAddMenu = ref(false)
+
+const widgetTitle = (id) => {
+  const key = props.widgets[id]?.titleKey
+  return key ? t(key) : id
+}
+function addAndClose(id) {
+  addWidget(id)
+  showAddMenu.value = false
+}
+</script>
+
+<template>
+  <div class="flex flex-wrap items-center justify-end gap-2">
+    <template v-if="editMode">
+      <!-- Tambah widget -->
+      <div class="relative">
+        <AppButton variant="secondary" size="sm" @click="showAddMenu = !showAddMenu" :disabled="!availableToAdd.length">
+          <Plus class="w-3.5 h-3.5" />{{ t('dashboard.grid.addWidget') }}
+        </AppButton>
+        <div
+          v-if="showAddMenu && availableToAdd.length"
+          class="absolute right-0 mt-1 w-56 max-h-64 overflow-y-auto scrollbar-rounded bg-white dark:bg-gray-800 rounded-xl shadow-2xl border border-gray-100 dark:border-gray-700 z-30 py-1"
+        >
+          <button
+            v-for="w in availableToAdd"
+            :key="w.id"
+            type="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/50 transition-colors"
+            @click="addAndClose(w.id)"
+          >{{ widgetTitle(w.id) }}</button>
+        </div>
+      </div>
+      <!-- Widget kustom (dari API eksternal) -->
+      <AppButton variant="secondary" size="sm" @click="openCustomForm(null)">
+        <Sparkles class="w-3.5 h-3.5" />{{ t('dashboard.custom.add') }}
+      </AppButton>
+      <AppButton variant="ghost" size="sm" @click="reset()">
+        <RotateCcw class="w-3.5 h-3.5" />{{ t('dashboard.grid.reset') }}
+      </AppButton>
+      <AppButton variant="primary" size="sm" :loading="saving" @click="toggleEdit()">
+        <Check class="w-3.5 h-3.5" />{{ t('dashboard.grid.done') }}
+      </AppButton>
+    </template>
+    <AppButton v-else variant="secondary" size="sm" @click="toggleEdit()">
+      <Pencil class="w-3.5 h-3.5" />{{ t('dashboard.grid.arrange') }}
+    </AppButton>
+  </div>
+</template>