@rozaqi02/reusable-dashboard 1.1.1 → 1.1.3

package/dist/index.cjs

@@ -41,6 +41,7 @@ __export(index_exports, {
   Input: () => Input,
   ReusableDashboardView: () => ReusableDashboardView,
   SearchBar: () => SearchBar,
+  SetupWizard: () => SetupWizard,
   SidebarNavigation: () => SidebarNavigation,
   SkeletonLoader: () => SkeletonLoader,
   StatCard: () => StatCard,
@@ -52,6 +53,7 @@ __export(index_exports, {
   buildDayBuckets: () => buildDayBuckets,
   cidikaWidgetConfig: () => cidikaWidgetConfig,
   createCidikaSupabaseSource: () => createCidikaSupabaseSource,
+  createDashboardConfig: () => createDashboardConfig,
   createDashboardLabels: () => createDashboardLabels,
   createDefaultFilters: () => createDefaultFilters,
   createEmptyDashboardData: () => createEmptyDashboardData,
@@ -69,7 +71,8 @@ __export(index_exports, {
   toNumber: () => toNumber,
   tokoSepatuWidgetConfig: () => tokoSepatuWidgetConfig,
   useRealtimeUpdate: () => useRealtimeUpdate,
-  useReusableDashboard: () => useReusableDashboard
+  useReusableDashboard: () => useReusableDashboard,
+  validateDashboardConfig: () => validateDashboardConfig
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -312,6 +315,78 @@ var tokoSepatuWidgetConfig = {
   }
 };
 
+// src/config/createDashboardConfig.js
+function createDashboardConfig({
+  widgetConfig,
+  dataSource,
+  adapter,
+  createEmptyState,
+  labels,
+  languageCode = "id",
+  dateLocale = "id-ID"
+}) {
+  var _a, _b, _c, _d, _e, _f, _g;
+  const missing = [];
+  if (!widgetConfig) missing.push("widgetConfig");
+  if (!dataSource) missing.push("dataSource");
+  if (!adapter) missing.push("adapter");
+  if (!createEmptyState) missing.push("createEmptyState");
+  return {
+    // Properti yang langsung dibaca useReusableDashboard
+    config: widgetConfig,
+    dataSource,
+    adapter,
+    createEmptyState,
+    languageCode,
+    dateLocale,
+    labels,
+    // Metadata untuk setup wizard & validasi
+    _meta: {
+      isValid: missing.length === 0,
+      missing,
+      hasDataSource: Boolean(dataSource == null ? void 0 : dataSource.fetchDashboardSnapshot),
+      hasRealtimeSupport: Boolean(dataSource == null ? void 0 : dataSource.subscribeLiveUpdate),
+      hasLabels: Boolean(labels),
+      widgetCount: {
+        stats: ((_b = (_a = widgetConfig == null ? void 0 : widgetConfig.widgets) == null ? void 0 : _a.stats) == null ? void 0 : _b.length) ?? 0,
+        charts: ((_d = (_c = widgetConfig == null ? void 0 : widgetConfig.widgets) == null ? void 0 : _c.charts) == null ? void 0 : _d.length) ?? 0,
+        tableColumns: ((_g = (_f = (_e = widgetConfig == null ? void 0 : widgetConfig.widgets) == null ? void 0 : _e.table) == null ? void 0 : _f.columns) == null ? void 0 : _g.length) ?? 0
+      }
+    }
+  };
+}
+function validateDashboardConfig(dashboardConfig) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+  const issues = [];
+  if (!dashboardConfig) {
+    return { valid: false, issues: ["dashboardConfig tidak ditemukan. Pastikan sudah memanggil createDashboardConfig()."] };
+  }
+  const meta = dashboardConfig == null ? void 0 : dashboardConfig._meta;
+  if (!meta) {
+    issues.push("Config tidak dibuat melalui createDashboardConfig(). Gunakan factory function ini untuk validasi otomatis.");
+  } else {
+    if (meta.missing.length > 0) {
+      meta.missing.forEach((m) => issues.push(`Properti wajib belum diisi: "${m}"`));
+    }
+    if (!meta.hasDataSource) {
+      issues.push("dataSource.fetchDashboardSnapshot() tidak ditemukan. Pastikan sudah membuat data source yang benar.");
+    }
+  }
+  if (!((_c = (_b = (_a = dashboardConfig.config) == null ? void 0 : _a.widgets) == null ? void 0 : _b.stats) == null ? void 0 : _c.length)) {
+    issues.push("widgetConfig.widgets.stats kosong. Tambahkan minimal 1 stat card.");
+  }
+  if (!((_f = (_e = (_d = dashboardConfig.config) == null ? void 0 : _d.widgets) == null ? void 0 : _e.charts) == null ? void 0 : _f.length)) {
+    issues.push("widgetConfig.widgets.charts kosong. Tambahkan minimal 1 chart.");
+  }
+  if (!((_j = (_i = (_h = (_g = dashboardConfig.config) == null ? void 0 : _g.widgets) == null ? void 0 : _h.table) == null ? void 0 : _i.columns) == null ? void 0 : _j.length)) {
+    issues.push("widgetConfig.widgets.table.columns kosong. Tambahkan minimal 1 kolom tabel.");
+  }
+  if (!dashboardConfig.labels) {
+    issues.push("labels belum diisi. Sediakan objek labels agar teks UI tampil dengan benar.");
+  }
+  return { valid: issues.length === 0, issues };
+}
+
 // src/utils/formatters.js
 function formatIDR(value) {
   try {
@@ -1567,7 +1642,7 @@ function ChartCard({
   className = ""
 }) {
   const content = (() => {
-    if (loading) return /* @__PURE__ */ import_react14.default.createElement(SkeletonLoader, { className: "h-64" });
+    if (loading) return /* @__PURE__ */ import_react14.default.createElement(SkeletonLoader, { style: { height: 256 } });
     if (widget.type === "dailyArea") {
       return renderDailyArea(labels, filters, chartData.dailyTrends);
     }
@@ -1580,9 +1655,9 @@ function ChartCard({
     if (widget.type === "topPackagesBar") {
       return renderTopPackages(chartData.topPackages, labels, filters.sortPkgBy);
     }
-    return /* @__PURE__ */ import_react14.default.createElement("div", { className: "text-sm text-slate-500" }, "Unsupported chart type.");
+    return /* @__PURE__ */ import_react14.default.createElement("div", { className: "rdb-muted" }, "Unsupported chart type.");
   })();
-  return /* @__PURE__ */ import_react14.default.createElement("div", { className: `card p-4 ${className}` }, /* @__PURE__ */ import_react14.default.createElement(
+  return /* @__PURE__ */ import_react14.default.createElement("div", { className: `rdb-card rdb-chart-card ${className}` }, /* @__PURE__ */ import_react14.default.createElement(
     ChartHeader,
     {
       title: labels[widget.label] || widget.label,
@@ -1831,8 +1906,281 @@ DashboardLayout.propTypes = {
 };
 
 // src/presentation/ReusableDashboardView.jsx
+var import_react20 = __toESM(require("react"), 1);
+var import_prop_types18 = __toESM(require("prop-types"), 1);
+
+// src/presentation/SetupWizard.jsx
 var import_react19 = __toESM(require("react"), 1);
 var import_prop_types17 = __toESM(require("prop-types"), 1);
+function SetupWizard({ issues = [], onDismiss, supabase }) {
+  const [step, setStep] = (0, import_react19.useState)(0);
+  const [tables, setTables] = (0, import_react19.useState)(null);
+  const [loadingTables, setLoadingTables] = (0, import_react19.useState)(false);
+  const [tableError, setTableError] = (0, import_react19.useState)("");
+  const [dismissed, setDismissed] = (0, import_react19.useState)(false);
+  if (dismissed) return null;
+  const steps = [
+    { id: 0, label: "Overview", icon: "\u{1F3E0}" },
+    { id: 1, label: "1. Data Source", icon: "\u{1F5C4}\uFE0F" },
+    { id: 2, label: "2. Adapter", icon: "\u{1F504}" },
+    { id: 3, label: "3. Widget Config", icon: "\u2699\uFE0F" }
+  ];
+  async function handleReadTables() {
+    if (!supabase) {
+      setTableError("Supabase client belum tersambung. Pastikan prop supabase sudah diisi.");
+      return;
+    }
+    setLoadingTables(true);
+    setTableError("");
+    try {
+      const { data, error } = await supabase.from("information_schema.tables").select("table_name").eq("table_schema", "public").eq("table_type", "BASE TABLE").order("table_name");
+      if (error) throw error;
+      setTables((data || []).map((r) => r.table_name));
+    } catch (err) {
+      try {
+        const { data: rpcData } = await supabase.rpc("get_tables");
+        if (rpcData) {
+          setTables(rpcData.map((r) => r.table_name || r));
+        } else {
+          setTableError("Tidak dapat membaca tabel. Pastikan RLS mengizinkan akses atau tambahkan policy SELECT untuk anon.");
+        }
+      } catch {
+        setTableError("Gagal membaca tabel dari Supabase: " + ((err == null ? void 0 : err.message) || "Unknown error"));
+      }
+    } finally {
+      setLoadingTables(false);
+    }
+  }
+  function handleDismiss() {
+    setDismissed(true);
+    if (onDismiss) onDismiss();
+  }
+  return /* @__PURE__ */ import_react19.default.createElement("div", { className: "rdb-wizard-overlay", role: "dialog", "aria-modal": "true", "aria-label": "Dashboard Setup Wizard" }, /* @__PURE__ */ import_react19.default.createElement("div", { className: "rdb-wizard-modal" }, /* @__PURE__ */ import_react19.default.createElement("div", { className: "rdb-wizard-header" }, /* @__PURE__ */ import_react19.default.createElement("div", { className: "rdb-wizard-header-title" }, /* @__PURE__ */ import_react19.default.createElement("span", { className: "rdb-wizard-logo" }, "\u{1F6E0}\uFE0F"), /* @__PURE__ */ import_react19.default.createElement("div", null, /* @__PURE__ */ import_react19.default.createElement("div", { className: "rdb-h2", style: { margin: 0 } }, "Setup Dashboard"), /* @__PURE__ */ import_react19.default.createElement("div", { className: "rdb-caption" }, "Panduan konfigurasi modul @rozaqi02/reusable-dashboard"))), /* @__PURE__ */ import_react19.default.createElement(
+    "button",
+    {
+      type: "button",
+      className: "rdb-wizard-close",
+      onClick: handleDismiss,
+      "aria-label": "Tutup wizard",
+      title: "Lanjutkan tanpa wizard"
+    },
+    "\u2715"
+  )), /* @__PURE__ */ import_react19.default.createElement("div", { className: "rdb-wizard-steps" }, steps.map((s) => /* @__PURE__ */ import_react19.default.createElement(
+    "button",
+    {
+      key: s.id,
+      type: "button",
+      className: `rdb-wizard-step-btn ${step === s.id ? "rdb-wizard-step-active" : ""}`,
+      onClick: () => setStep(s.id)
+    },
+    /* @__PURE__ */ import_react19.default.createElement("span", null, s.icon),
+    /* @__PURE__ */ import_react19.default.createElement("span", null, s.label)
+  ))), /* @__PURE__ */ import_react19.default.createElement("div", { className: "rdb-wizard-body" }, step === 0 && /* @__PURE__ */ import_react19.default.createElement("div", { className: "rdb-wizard-section" }, /* @__PURE__ */ import_react19.default.createElement("div", { className: "rdb-wizard-alert" }, /* @__PURE__ */ import_react19.default.createElement("span", { className: "rdb-wizard-alert-icon" }, "\u26A0\uFE0F"), /* @__PURE__ */ import_react19.default.createElement("div", null, /* @__PURE__ */ import_react19.default.createElement("div", { className: "rdb-body", style: { fontWeight: 600 } }, "Dashboard belum terkonfigurasi"), /* @__PURE__ */ import_react19.default.createElement("div", { className: "rdb-caption", style: { marginTop: 4 } }, "Ditemukan ", issues.length, " masalah yang perlu diselesaikan sebelum dashboard dapat berjalan."))), issues.length > 0 && /* @__PURE__ */ import_react19.default.createElement("div", { className: "rdb-wizard-issues" }, /* @__PURE__ */ import_react19.default.createElement("div", { className: "rdb-caption", style: { fontWeight: 600, marginBottom: 8 } }, "Masalah yang ditemukan:"), issues.map((issue, i) => /* @__PURE__ */ import_react19.default.createElement("div", { key: i, className: "rdb-wizard-issue-item" }, /* @__PURE__ */ import_react19.default.createElement("span", { className: "rdb-wizard-issue-icon" }, "\u274C"), /* @__PURE__ */ import_react19.default.createElement("span", { className: "rdb-body" }, issue)))), /* @__PURE__ */ import_react19.default.createElement("div", { className: "rdb-wizard-flow" }, /* @__PURE__ */ import_react19.default.createElement("div", { className: "rdb-caption", style: { fontWeight: 600, marginBottom: 12 } }, "Alur konfigurasi yang perlu dilakukan:"), /* @__PURE__ */ import_react19.default.createElement("div", { className: "rdb-wizard-flow-steps" }, [
+    { num: "1", label: "Data Source", desc: "Tulis fungsi query ke Supabase" },
+    { num: "\u2192", label: "", desc: "" },
+    { num: "2", label: "Adapter", desc: "Petakan data mentah ke format standar" },
+    { num: "\u2192", label: "", desc: "" },
+    { num: "3", label: "Widget Config", desc: "Definisikan widget yang ditampilkan" }
+  ].map((item, i) => item.num === "\u2192" ? /* @__PURE__ */ import_react19.default.createElement("div", { key: i, className: "rdb-wizard-flow-arrow" }, "\u2192") : /* @__PURE__ */ import_react19.default.createElement("div", { key: i, className: "rdb-wizard-flow-box" }, /* @__PURE__ */ import_react19.default.createElement("div", { className: "rdb-wizard-flow-num" }, item.num), /* @__PURE__ */ import_react19.default.createElement("div", { className: "rdb-wizard-flow-label" }, item.label), /* @__PURE__ */ import_react19.default.createElement("div", { className: "rdb-wizard-flow-desc" }, item.desc))))), /* @__PURE__ */ import_react19.default.createElement("div", { style: { display: "flex", gap: 8, justifyContent: "flex-end", marginTop: 16 } }, /* @__PURE__ */ import_react19.default.createElement("button", { type: "button", className: "rdb-btn rdb-btn-secondary rdb-btn-sm", onClick: handleDismiss }, "Lanjutkan tanpa wizard"), /* @__PURE__ */ import_react19.default.createElement("button", { type: "button", className: "rdb-btn rdb-btn-primary rdb-btn-sm", onClick: () => setStep(1) }, "Mulai panduan \u2192"))), step === 1 && /* @__PURE__ */ import_react19.default.createElement("div", { className: "rdb-wizard-section" }, /* @__PURE__ */ import_react19.default.createElement("div", { className: "rdb-wizard-step-title" }, /* @__PURE__ */ import_react19.default.createElement("span", { className: "rdb-wizard-step-num" }, "1"), /* @__PURE__ */ import_react19.default.createElement("span", { className: "rdb-h3", style: { margin: 0 } }, "Data Source")), /* @__PURE__ */ import_react19.default.createElement("div", { className: "rdb-body", style: { color: "var(--rdb-text-muted)", marginBottom: 12 } }, "Data Source adalah fungsi yang membaca data dari Supabase. Buat file", /* @__PURE__ */ import_react19.default.createElement("code", { className: "rdb-wizard-code-inline" }, " src/datasources/myDataSource.js"), " dengan isi berikut:"), /* @__PURE__ */ import_react19.default.createElement("pre", { className: "rdb-wizard-code" }, `// src/datasources/myDataSource.js
+export function createMySupabaseSource(supabase) {
+  return {
+    async fetchDashboardSnapshot({ fromISO, toISO, statusScope }) {
+      const { data: orders = [] } = await supabase
+        .from("MY_TABLE")        // \u2190 ganti nama tabel kamu
+        .select("id, created_at, total_price, status, customer_name")
+        .gte("created_at", fromISO)
+        .lte("created_at", toISO)
+        .order("created_at", { ascending: true });
+
+      const { data: recent = [] } = await supabase
+        .from("MY_TABLE")
+        .select("id, created_at, customer_name, total_price, status")
+        .order("created_at", { ascending: false })
+        .limit(10);
+
+      return {
+        bookings: orders,   // WAJIB: nama harus "bookings"
+        recent,             // WAJIB: nama harus "recent"
+        packageLocales: [],
+        staticCounts: { packages: 0, sections: 0 },
+      };
+    },
+
+    // Opsional: live update
+    subscribeLiveUpdate(onEvent) {
+      const ch = supabase.channel("my-dashboard-live")
+        .on("postgres_changes",
+          { event: "*", schema: "public", table: "MY_TABLE" }, onEvent)
+        .subscribe();
+      return () => supabase.removeChannel(ch);
+    },
+  };
+}`), /* @__PURE__ */ import_react19.default.createElement("div", { className: "rdb-wizard-supabase-reader" }, /* @__PURE__ */ import_react19.default.createElement("div", { className: "rdb-caption", style: { fontWeight: 600, marginBottom: 8 } }, "\u{1F50D} Baca tabel dari Supabase project kamu secara langsung:"), /* @__PURE__ */ import_react19.default.createElement(
+    "button",
+    {
+      type: "button",
+      className: "rdb-btn rdb-btn-secondary rdb-btn-sm",
+      onClick: handleReadTables,
+      disabled: loadingTables
+    },
+    loadingTables ? "Membaca..." : "Tampilkan daftar tabel Supabase"
+  ), tableError && /* @__PURE__ */ import_react19.default.createElement("div", { className: "rdb-wizard-table-error" }, tableError), tables && tables.length > 0 && /* @__PURE__ */ import_react19.default.createElement("div", { className: "rdb-wizard-table-list" }, /* @__PURE__ */ import_react19.default.createElement("div", { className: "rdb-caption", style: { marginBottom: 6 } }, "Tabel ditemukan (", tables.length, "):"), /* @__PURE__ */ import_react19.default.createElement("div", { className: "rdb-wizard-table-chips" }, tables.map((t) => /* @__PURE__ */ import_react19.default.createElement("span", { key: t, className: "rdb-wizard-chip" }, t))), /* @__PURE__ */ import_react19.default.createElement("div", { className: "rdb-caption", style: { marginTop: 8, color: "var(--rdb-text-muted)" } }, "Ganti ", /* @__PURE__ */ import_react19.default.createElement("code", { className: "rdb-wizard-code-inline" }, "MY_TABLE"), " di contoh kode di atas dengan nama tabel yang sesuai.")), !supabase && /* @__PURE__ */ import_react19.default.createElement("div", { className: "rdb-wizard-table-error" }, "Tambahkan prop ", /* @__PURE__ */ import_react19.default.createElement("code", { className: "rdb-wizard-code-inline" }, "supabase"), " ke", /* @__PURE__ */ import_react19.default.createElement("code", { className: "rdb-wizard-code-inline" }, " <ReusableDashboardView supabase=", "{supabase}", " />"), " untuk mengaktifkan fitur ini.")), /* @__PURE__ */ import_react19.default.createElement("div", { style: { display: "flex", gap: 8, justifyContent: "flex-end", marginTop: 16 } }, /* @__PURE__ */ import_react19.default.createElement("button", { type: "button", className: "rdb-btn rdb-btn-secondary rdb-btn-sm", onClick: () => setStep(0) }, "\u2190 Kembali"), /* @__PURE__ */ import_react19.default.createElement("button", { type: "button", className: "rdb-btn rdb-btn-primary rdb-btn-sm", onClick: () => setStep(2) }, "Lanjut \u2192"))), step === 2 && /* @__PURE__ */ import_react19.default.createElement("div", { className: "rdb-wizard-section" }, /* @__PURE__ */ import_react19.default.createElement("div", { className: "rdb-wizard-step-title" }, /* @__PURE__ */ import_react19.default.createElement("span", { className: "rdb-wizard-step-num" }, "2"), /* @__PURE__ */ import_react19.default.createElement("span", { className: "rdb-h3", style: { margin: 0 } }, "Data Adapter")), /* @__PURE__ */ import_react19.default.createElement("div", { className: "rdb-body", style: { color: "var(--rdb-text-muted)", marginBottom: 12 } }, "Adapter mengubah data mentah dari Data Source ke format standar yang dimengerti komponen dashboard. Buat file ", /* @__PURE__ */ import_react19.default.createElement("code", { className: "rdb-wizard-code-inline" }, "src/adapters/myAdapter.js"), ":"), /* @__PURE__ */ import_react19.default.createElement("pre", { className: "rdb-wizard-code" }, `// src/adapters/myAdapter.js
+import { toNumber, buildDayBuckets } from "@rozaqi02/reusable-dashboard";
+
+export function createEmptyMyData() {
+  return {
+    stats: { bookingsConfirm: 0, revenueConfirm: 0 },
+    charts: {
+      dailyTrends: [],
+      statusDistribution: [],
+      audienceDistribution: [],
+      topPackages: [],
+    },
+    table: { recentBookings: [] },
+  };
+}
+
+export function adaptMyData({ raw, range, dateLocale, labels }) {
+  if (!raw) return createEmptyMyData();
+
+  const buckets = buildDayBuckets(range.daysWindow, range.fromISO, dateLocale);
+  const dayMap = new Map(buckets.map(b => [b.dateKey, b]));
+  const statusMap = new Map();
+  let confirmed = 0, revenue = 0;
+
+  (raw.bookings || []).forEach(row => {
+    const status = String(row.status || "pending").toLowerCase();
+    const amount = toNumber(row.total_price); // \u2190 sesuaikan nama kolom
+    const dayKey = String(row.created_at || "").slice(0, 10);
+
+    statusMap.set(status, (statusMap.get(status) || 0) + 1);
+    const bucket = dayMap.get(dayKey);
+    if (bucket && status === "confirmed") {
+      bucket.count += 1;
+      bucket.revenue += amount;
+    }
+    if (status === "confirmed") { confirmed++; revenue += amount; }
+  });
+
+  return {
+    stats: { bookingsConfirm: confirmed, revenueConfirm: revenue },
+    charts: {
+      dailyTrends: buckets,
+      statusDistribution: Array.from(statusMap.entries())
+        .map(([status, count]) => ({
+          status,
+          label: labels?.formatStatusLabel?.(status) || status,
+          count,
+        })),
+      audienceDistribution: [],
+      topPackages: [],
+    },
+    table: {
+      recentBookings: (raw.recent || []).map(row => ({
+        id: row.id,
+        createdAt: row.created_at,
+        customerName: row.customer_name || "-",
+        packageName: row.service_type || "-", // \u2190 sesuaikan nama kolom
+        audienceLabel: "-",
+        totalIDR: toNumber(row.total_price),
+        status: String(row.status || "pending").toLowerCase(),
+        statusLabel: labels?.formatStatusLabel?.(row.status) || row.status,
+      })),
+    },
+  };
+}`), /* @__PURE__ */ import_react19.default.createElement("div", { className: "rdb-wizard-tip" }, "\u{1F4A1} ", /* @__PURE__ */ import_react19.default.createElement("strong", null, "Aturan penting:"), " key di ", /* @__PURE__ */ import_react19.default.createElement("code", { className: "rdb-wizard-code-inline" }, "stats"), " (mis. ", /* @__PURE__ */ import_react19.default.createElement("code", { className: "rdb-wizard-code-inline" }, "bookingsConfirm"), ") harus cocok dengan ", /* @__PURE__ */ import_react19.default.createElement("code", { className: "rdb-wizard-code-inline" }, "valueKey"), " di widget config pada Step 3."), /* @__PURE__ */ import_react19.default.createElement("div", { style: { display: "flex", gap: 8, justifyContent: "flex-end", marginTop: 16 } }, /* @__PURE__ */ import_react19.default.createElement("button", { type: "button", className: "rdb-btn rdb-btn-secondary rdb-btn-sm", onClick: () => setStep(1) }, "\u2190 Kembali"), /* @__PURE__ */ import_react19.default.createElement("button", { type: "button", className: "rdb-btn rdb-btn-primary rdb-btn-sm", onClick: () => setStep(3) }, "Lanjut \u2192"))), step === 3 && /* @__PURE__ */ import_react19.default.createElement("div", { className: "rdb-wizard-section" }, /* @__PURE__ */ import_react19.default.createElement("div", { className: "rdb-wizard-step-title" }, /* @__PURE__ */ import_react19.default.createElement("span", { className: "rdb-wizard-step-num" }, "3"), /* @__PURE__ */ import_react19.default.createElement("span", { className: "rdb-h3", style: { margin: 0 } }, "Widget Config & Rangkaian Akhir")), /* @__PURE__ */ import_react19.default.createElement("div", { className: "rdb-body", style: { color: "var(--rdb-text-muted)", marginBottom: 12 } }, "Widget Config mendefinisikan tampilan dashboard: kartu mana, chart apa, kolom tabel apa. Gunakan ", /* @__PURE__ */ import_react19.default.createElement("code", { className: "rdb-wizard-code-inline" }, "createDashboardConfig()"), " untuk mengemas semuanya jadi 1 objek:"), /* @__PURE__ */ import_react19.default.createElement("pre", { className: "rdb-wizard-code" }, `// src/pages/MyDashboard.jsx
+import { supabase } from "../lib/supabaseClient";
+import {
+  ReusableDashboardView,
+  useReusableDashboard,
+  createDashboardConfig,
+} from "@rozaqi02/reusable-dashboard";
+
+import { createMySupabaseSource } from "../datasources/myDataSource";
+import { adaptMyData, createEmptyMyData } from "../adapters/myAdapter";
+
+// 1. Widget Config \u2014 deklaratif, tentukan apa yang tampil
+const myWidgetConfig = {
+  id: "my.dashboard",
+  defaultFilters: { statusScope: "confirmed", daysPreset: 30 },
+  widgets: {
+    stats: [
+      { id: "orders", label: "confirmedBookings", icon: "TrendingUp",
+        valueKey: "bookingsConfirm", format: "number", accentColor: "blue" },
+      { id: "revenue", label: "confirmedRevenue", icon: "DollarSign",
+        valueKey: "revenueConfirm", format: "currency", accentColor: "green" },
+    ],
+    charts: [
+      { id: "trend", type: "dailyArea", label: "dailyTrends", icon: "BarChart3" },
+      { id: "status", type: "statusPie", label: "statusDistribution", icon: "PieChart" },
+    ],
+    table: {
+      id: "recent", label: "recentBookings", icon: "Calendar",
+      emptyLabel: "noRecentBookings",
+      columns: [
+        { id: "date", label: "date", accessor: "createdAt", type: "date" },
+        { id: "customer", label: "customer", accessor: "customerName" },
+        { id: "total", label: "total", accessor: "totalIDR", type: "currency" },
+        { id: "status", label: "status", accessor: "statusLabel",
+          type: "statusBadge", statusAccessor: "status" },
+      ],
+    },
+  },
+};
+
+// 2. Kemas semua jadi 1 objek (buat di luar komponen, sekali saja)
+const dashConfig = createDashboardConfig({
+  widgetConfig: myWidgetConfig,
+  dataSource: createMySupabaseSource(supabase),
+  adapter: adaptMyData,
+  createEmptyState: createEmptyMyData,
+  languageCode: "id",
+  dateLocale: "id-ID",
+});
+
+// 3. Labels \u2014 teks UI
+const labels = { title: "Dashboard Saya", refresh: "Refresh",
+  liveUpdate: "Live", loadFailed: "Gagal memuat.", retry: "Coba Lagi",
+  confirmedBookings: "Total Order", confirmedRevenue: "Total Pendapatan",
+  dailyTrends: "Tren Harian", statusDistribution: "Distribusi Status",
+  recentBookings: "Order Terbaru", noRecentBookings: "Belum ada order",
+  date: "Tanggal", customer: "Pelanggan", total: "Total", status: "Status",
+  bookingsMetric: "Order", revenueMetric: "Pendapatan",
+  confirmedBookingMetric: "Order (Confirmed)",
+  confirmedRevenueMetric: "Pendapatan (Confirmed)",
+  dayLabel: n => n + " hari",
+  formatStatusLabel: s =>
+    ({ confirmed: "Selesai", pending: "Proses", cancelled: "Batal" })[s] || s,
+  formatAudienceLabel: v => v || "-",
+};
+
+// 4. Render \u2014 selesai!
+export default function MyDashboard() {
+  const state = useReusableDashboard({ ...dashConfig, labels });
+  return (
+    <ReusableDashboardView
+      config={dashConfig.config}
+      labels={labels}
+      loading={state.loading}
+      error={state.error}
+      filters={state.filters}
+      onFilterChange={state.updateFilter}
+      onResetFilters={state.resetFilters}
+      onRefresh={state.refresh}
+      data={state.data}
+      dateLocale={dashConfig.dateLocale}
+      liveUpdateEnabled={state.liveUpdateEnabled}
+    />
+  );
+}`), /* @__PURE__ */ import_react19.default.createElement("div", { className: "rdb-wizard-tip" }, "\u2705 ", /* @__PURE__ */ import_react19.default.createElement("strong", null, "Selesai!"), " Jalankan ", /* @__PURE__ */ import_react19.default.createElement("code", { className: "rdb-wizard-code-inline" }, "npm start"), " dan buka halaman dashboard. Wizard ini tidak akan muncul lagi setelah konfigurasi valid."), /* @__PURE__ */ import_react19.default.createElement("div", { style: { display: "flex", gap: 8, justifyContent: "flex-end", marginTop: 16 } }, /* @__PURE__ */ import_react19.default.createElement("button", { type: "button", className: "rdb-btn rdb-btn-secondary rdb-btn-sm", onClick: () => setStep(2) }, "\u2190 Kembali"), /* @__PURE__ */ import_react19.default.createElement("button", { type: "button", className: "rdb-btn rdb-btn-primary rdb-btn-sm", onClick: handleDismiss }, "Tutup & lanjutkan \u2713"))))));
+}
+SetupWizard.propTypes = {
+  issues: import_prop_types17.default.arrayOf(import_prop_types17.default.string),
+  onDismiss: import_prop_types17.default.func,
+  supabase: import_prop_types17.default.object
+};
+
+// src/presentation/ReusableDashboardView.jsx
 function ReusableDashboardView({
   config,
   labels,
@@ -1844,9 +2192,48 @@ function ReusableDashboardView({
   onRefresh,
   data,
   dateLocale,
-  liveUpdateEnabled
+  liveUpdateEnabled,
+  supabase,
+  dashboardConfig
 }) {
-  return /* @__PURE__ */ import_react19.default.createElement("div", { className: "rdb-view" }, /* @__PURE__ */ import_react19.default.createElement("div", { className: "rdb-view-container" }, /* @__PURE__ */ import_react19.default.createElement("div", { className: "rdb-header-panel" }, /* @__PURE__ */ import_react19.default.createElement("div", { className: "rdb-header-top" }, /* @__PURE__ */ import_react19.default.createElement("div", { className: "rdb-header-title-group" }, /* @__PURE__ */ import_react19.default.createElement("span", { className: "rdb-h1" }, labels.title), liveUpdateEnabled ? /* @__PURE__ */ import_react19.default.createElement(Badge, { status: "success" }, labels.liveUpdate) : null), /* @__PURE__ */ import_react19.default.createElement(Button, { variant: "secondary", size: "sm", onClick: () => onRefresh(), title: labels.refresh }, /* @__PURE__ */ import_react19.default.createElement(Icon, { name: "RotateCcw", size: 16 }))), error ? /* @__PURE__ */ import_react19.default.createElement("div", { className: "rdb-error-banner" }, /* @__PURE__ */ import_react19.default.createElement("span", null, error), /* @__PURE__ */ import_react19.default.createElement(Button, { variant: "secondary", size: "sm", onClick: () => onRefresh() }, labels.retry)) : null, /* @__PURE__ */ import_react19.default.createElement(
+  var _a;
+  const [wizardDismissed, setWizardDismissed] = import_react20.default.useState(false);
+  const configIssues = import_react20.default.useMemo(() => {
+    var _a2, _b, _c, _d, _e, _f, _g;
+    if (wizardDismissed) return [];
+    if (dashboardConfig) {
+      const { issues: issues2 } = validateDashboardConfig(dashboardConfig);
+      return issues2;
+    }
+    const issues = [];
+    if (!config) issues.push("Prop 'config' (widgetConfig) belum diisi.");
+    if (!((_b = (_a2 = config == null ? void 0 : config.widgets) == null ? void 0 : _a2.stats) == null ? void 0 : _b.length)) issues.push("widgetConfig.widgets.stats kosong. Tambahkan minimal 1 stat card.");
+    if (!((_d = (_c = config == null ? void 0 : config.widgets) == null ? void 0 : _c.charts) == null ? void 0 : _d.length)) issues.push("widgetConfig.widgets.charts kosong. Tambahkan minimal 1 chart.");
+    if (!((_g = (_f = (_e = config == null ? void 0 : config.widgets) == null ? void 0 : _e.table) == null ? void 0 : _f.columns) == null ? void 0 : _g.length)) issues.push("widgetConfig.widgets.table.columns kosong.");
+    if (!labels) issues.push("Prop 'labels' belum diisi.");
+    if (!(labels == null ? void 0 : labels.title)) issues.push("labels.title belum diisi.");
+    if (!(labels == null ? void 0 : labels.formatStatusLabel)) issues.push("labels.formatStatusLabel (function) belum diisi.");
+    return issues;
+  }, [config, labels, dashboardConfig, wizardDismissed]);
+  const showWizard = !wizardDismissed && configIssues.length > 0;
+  if (!config || !config.widgets) {
+    return /* @__PURE__ */ import_react20.default.createElement("div", { className: "rdb-view" }, /* @__PURE__ */ import_react20.default.createElement(
+      SetupWizard,
+      {
+        issues: ["Prop 'config' (widgetConfig) belum diisi atau tidak valid."],
+        onDismiss: () => setWizardDismissed(true),
+        supabase
+      }
+    ));
+  }
+  return /* @__PURE__ */ import_react20.default.createElement("div", { className: "rdb-view" }, showWizard && /* @__PURE__ */ import_react20.default.createElement(
+    SetupWizard,
+    {
+      issues: configIssues,
+      onDismiss: () => setWizardDismissed(true),
+      supabase
+    }
+  ), /* @__PURE__ */ import_react20.default.createElement("div", { className: "rdb-view-container" }, /* @__PURE__ */ import_react20.default.createElement("div", { className: "rdb-header-panel" }, /* @__PURE__ */ import_react20.default.createElement("div", { className: "rdb-header-top" }, /* @__PURE__ */ import_react20.default.createElement("div", { className: "rdb-header-title-group" }, /* @__PURE__ */ import_react20.default.createElement("span", { className: "rdb-h1" }, (labels == null ? void 0 : labels.title) ?? "Dashboard"), liveUpdateEnabled ? /* @__PURE__ */ import_react20.default.createElement(Badge, { status: "success" }, (labels == null ? void 0 : labels.liveUpdate) ?? "Live") : null), /* @__PURE__ */ import_react20.default.createElement(Button, { variant: "secondary", size: "sm", onClick: () => onRefresh(), title: (labels == null ? void 0 : labels.refresh) ?? "Refresh" }, /* @__PURE__ */ import_react20.default.createElement(Icon, { name: "RotateCcw", size: 16 }))), error ? /* @__PURE__ */ import_react20.default.createElement("div", { className: "rdb-error-banner" }, /* @__PURE__ */ import_react20.default.createElement("span", null, error), /* @__PURE__ */ import_react20.default.createElement(Button, { variant: "secondary", size: "sm", onClick: () => onRefresh() }, (labels == null ? void 0 : labels.retry) ?? "Retry")) : null, /* @__PURE__ */ import_react20.default.createElement(
     FilterPanel,
     {
       filters,
@@ -1854,42 +2241,45 @@ function ReusableDashboardView({
       onFilterChange,
       onResetFilters
     }
-  )), /* @__PURE__ */ import_react19.default.createElement("div", { className: "rdb-stats-grid" }, loading ? Array.from({ length: 4 }).map((_, i) => /* @__PURE__ */ import_react19.default.createElement(SkeletonLoader, { key: i, style: { height: 112 } })) : config.widgets.stats.map((widget) => /* @__PURE__ */ import_react19.default.createElement(
-    StatCard,
-    {
-      key: widget.id,
-      label: labels[widget.label] || widget.label,
-      value: data.stats[widget.valueKey],
-      icon: widget.icon,
-      format: widget.format,
-      accentColor: widget.accentColor
-    }
-  ))), /* @__PURE__ */ import_react19.default.createElement("div", { className: "rdb-charts-grid" }, config.widgets.charts.map((widget) => /* @__PURE__ */ import_react19.default.createElement(
+  )), /* @__PURE__ */ import_react20.default.createElement("div", { className: "rdb-stats-grid" }, loading ? Array.from({ length: config.widgets.stats.length || 4 }).map((_, i) => /* @__PURE__ */ import_react20.default.createElement(SkeletonLoader, { key: i, style: { height: 112 } })) : config.widgets.stats.map((widget) => {
+    var _a2;
+    return /* @__PURE__ */ import_react20.default.createElement(
+      StatCard,
+      {
+        key: widget.id,
+        label: (labels == null ? void 0 : labels[widget.label]) ?? widget.label,
+        value: ((_a2 = data == null ? void 0 : data.stats) == null ? void 0 : _a2[widget.valueKey]) ?? 0,
+        icon: widget.icon,
+        format: widget.format,
+        accentColor: widget.accentColor
+      }
+    );
+  })), /* @__PURE__ */ import_react20.default.createElement("div", { className: "rdb-charts-grid" }, config.widgets.charts.map((widget) => /* @__PURE__ */ import_react20.default.createElement(
     ChartCard,
     {
       key: widget.id,
       widget,
-      labels,
+      labels: labels ?? {},
       loading,
-      filters,
-      chartData: data.charts
+      filters: filters ?? {},
+      chartData: (data == null ? void 0 : data.charts) ?? {}
     }
-  ))), /* @__PURE__ */ import_react19.default.createElement("div", { className: "rdb-card", style: { padding: 16 } }, /* @__PURE__ */ import_react19.default.createElement(
+  ))), /* @__PURE__ */ import_react20.default.createElement("div", { className: "rdb-card", style: { padding: 16 } }, /* @__PURE__ */ import_react20.default.createElement(
     "div",
     {
       style: { display: "flex", alignItems: "center", gap: 8, marginBottom: 12 },
       className: "rdb-h3"
     },
-    /* @__PURE__ */ import_react19.default.createElement(Icon, { name: config.widgets.table.icon, size: 18 }),
-    labels[config.widgets.table.label] || config.widgets.table.label
-  ), loading ? /* @__PURE__ */ import_react19.default.createElement(SkeletonLoader, { style: { height: 192 } }) : /* @__PURE__ */ import_react19.default.createElement(
+    /* @__PURE__ */ import_react20.default.createElement(Icon, { name: config.widgets.table.icon ?? "Calendar", size: 18 }),
+    (labels == null ? void 0 : labels[config.widgets.table.label]) ?? config.widgets.table.label
+  ), loading ? /* @__PURE__ */ import_react20.default.createElement(SkeletonLoader, { style: { height: 192 } }) : /* @__PURE__ */ import_react20.default.createElement(
     DataTable,
     {
       columns: config.widgets.table.columns,
-      data: data.table.recentBookings,
-      labels,
-      dateLocale,
-      emptyLabel: labels[config.widgets.table.emptyLabel] || config.widgets.table.emptyLabel,
+      data: ((_a = data == null ? void 0 : data.table) == null ? void 0 : _a.recentBookings) ?? [],
+      labels: labels ?? {},
+      dateLocale: dateLocale ?? "id-ID",
+      emptyLabel: (labels == null ? void 0 : labels[config.widgets.table.emptyLabel]) ?? config.widgets.table.emptyLabel,
       searchable: true,
       sortable: true,
       pageSize: 10
@@ -1897,17 +2287,21 @@ function ReusableDashboardView({
   ))));
 }
 ReusableDashboardView.propTypes = {
-  config: import_prop_types17.default.object.isRequired,
-  labels: import_prop_types17.default.object.isRequired,
-  loading: import_prop_types17.default.bool,
-  error: import_prop_types17.default.string,
-  filters: import_prop_types17.default.object,
-  onFilterChange: import_prop_types17.default.func.isRequired,
-  onResetFilters: import_prop_types17.default.func.isRequired,
-  onRefresh: import_prop_types17.default.func.isRequired,
-  data: import_prop_types17.default.object,
-  dateLocale: import_prop_types17.default.string,
-  liveUpdateEnabled: import_prop_types17.default.bool
+  config: import_prop_types18.default.object.isRequired,
+  labels: import_prop_types18.default.object.isRequired,
+  loading: import_prop_types18.default.bool,
+  error: import_prop_types18.default.string,
+  filters: import_prop_types18.default.object,
+  onFilterChange: import_prop_types18.default.func.isRequired,
+  onResetFilters: import_prop_types18.default.func.isRequired,
+  onRefresh: import_prop_types18.default.func.isRequired,
+  data: import_prop_types18.default.object,
+  dateLocale: import_prop_types18.default.string,
+  liveUpdateEnabled: import_prop_types18.default.bool,
+  /** Supabase client — aktifkan fitur baca tabel di wizard */
+  supabase: import_prop_types18.default.object,
+  /** Hasil createDashboardConfig() — untuk validasi otomatis wizard */
+  dashboardConfig: import_prop_types18.default.object
 };
 
 // src/utils/labels.js
@@ -2043,6 +2437,7 @@ function createDashboardLabels(t) {
   Input,
   ReusableDashboardView,
   SearchBar,
+  SetupWizard,
   SidebarNavigation,
   SkeletonLoader,
   StatCard,
@@ -2054,6 +2449,7 @@ function createDashboardLabels(t) {
   buildDayBuckets,
   cidikaWidgetConfig,
   createCidikaSupabaseSource,
+  createDashboardConfig,
   createDashboardLabels,
   createDefaultFilters,
   createEmptyDashboardData,
@@ -2071,6 +2467,7 @@ function createDashboardLabels(t) {
   toNumber,
   tokoSepatuWidgetConfig,
   useRealtimeUpdate,
-  useReusableDashboard
+  useReusableDashboard,
+  validateDashboardConfig
 });
 //# sourceMappingURL=index.cjs.map