@rozaqi02/reusable-dashboard 1.1.2 → 1.1.4

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,713 @@ 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);
+var PRESET_SIGNATURES = {
+  cidika: {
+    name: "Cidika Travel",
+    tables: ["bookings", "packages", "package_locales"]
+  },
+  tokoSepatu: {
+    name: "Toko Sepatu / E-Commerce",
+    tables: ["orders", "products", "customers"]
+  }
+};
+function detectPreset(tables) {
+  if (!tables || tables.length === 0) return null;
+  const tSet = new Set(tables);
+  if (PRESET_SIGNATURES.cidika.tables.every((t) => tSet.has(t))) return "cidika";
+  if (PRESET_SIGNATURES.tokoSepatu.tables.every((t) => tSet.has(t))) return "tokoSepatu";
+  return null;
+}
+function generateCode(mapping) {
+  const {
+    tableName,
+    colDate,
+    colStatus,
+    colTotal,
+    colCustomer,
+    colItem,
+    dashTitle,
+    confirmedValue,
+    pendingValue
+  } = mapping;
+  const safeTitle = dashTitle || "Dashboard";
+  const confirmed = confirmedValue || "confirmed";
+  const pending = pendingValue || "pending";
+  const safeCustomer = colCustomer || "customer_name";
+  const safeItem = colItem || "-";
+  const colTotalFull = colTotal || "total";
+  const dataSource = `// src/datasources/myDashboardSource.js
+// AUTO-GENERATED oleh Setup Wizard @rozaqi02/reusable-dashboard
+// Tabel: ${tableName}
+
+export function createMyDashboardSource(supabase) {
+  return {
+    async fetchDashboardSnapshot({ fromISO, toISO, statusScope }) {
+      const allQuery = supabase
+        .from("${tableName}")
+        .select("id, ${colDate}, ${colStatus}, ${colTotalFull}${colCustomer !== "customer_name" ? `, ${colCustomer}` : ", customer_name"}${colItem !== "-" ? `, ${colItem}` : ""}")
+        .gte("${colDate}", fromISO)
+        .lte("${colDate}", toISO)
+        .order("${colDate}", { ascending: true });
+
+      const recentQuery = supabase
+        .from("${tableName}")
+        .select("id, ${colDate}, ${colStatus}, ${colTotalFull}${colCustomer !== "customer_name" ? `, ${colCustomer}` : ", customer_name"}${colItem !== "-" ? `, ${colItem}` : ""}")
+        .gte("${colDate}", fromISO)
+        .lte("${colDate}", toISO)
+        .order("${colDate}", { ascending: false })
+        .limit(10);
+
+      if (statusScope && statusScope !== "all") {
+        recentQuery.eq("${colStatus}", statusScope);
+      }
+
+      const [allRes, recentRes] = await Promise.all([allQuery, recentQuery]);
+
+      return {
+        bookings: allRes.data   || [],  // semua transaksi (untuk chart & stats)
+        recent:   recentRes.data || [], // 10 terbaru (untuk tabel)
+        packageLocales: [],
+        staticCounts: { packages: 0, sections: 0 },
+      };
+    },
+
+    subscribeLiveUpdate(onEvent) {
+      const ch = supabase
+        .channel("rdb-dashboard-live")
+        .on("postgres_changes", { event: "*", schema: "public", table: "${tableName}" }, onEvent)
+        .subscribe();
+      return () => supabase.removeChannel(ch);
+    },
+  };
+}`;
+  const adapter = `// src/adapters/myDashboardAdapter.js
+// AUTO-GENERATED oleh Setup Wizard @rozaqi02/reusable-dashboard
+// Mapping kolom: status="${colStatus}", total="${colTotalFull}", tanggal="${colDate}"
+
+import { toNumber, buildDayBuckets } from "@rozaqi02/reusable-dashboard";
+
+export function createEmptyMyDashboardData() {
+  return {
+    stats:  { bookingsConfirm: 0, revenueConfirm: 0 },
+    charts: { dailyTrends: [], statusDistribution: [],
+              audienceDistribution: [], topPackages: [] },
+    table:  { recentBookings: [] },
+  };
+}
+
+export function adaptMyDashboardData({ raw, range, dateLocale, labels }) {
+  if (!raw) return createEmptyMyDashboardData();
+
+  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["${colStatus}"] || "pending").toLowerCase();
+    const amount = toNumber(row["${colTotalFull}"]);
+    const dayKey = String(row["${colDate}"] || "").slice(0, 10);
+
+    statusMap.set(status, (statusMap.get(status) || 0) + 1);
+    const bucket = dayMap.get(dayKey);
+    if (bucket) {
+      if (status === "${confirmed}") { bucket.count++; bucket.revenue += amount; }
+      if (status === "${pending}")   { bucket.pendingCount++; }
+    }
+    if (status === "${confirmed}") { confirmed++; revenue += amount; }
+  });
+
+  const avgRevenue     = confirmed > 0 ? Math.round(revenue / confirmed) : 0;
+  const totalTx        = (raw.bookings || []).length;
+  const conversionRate = totalTx > 0 ? Math.round((confirmed / totalTx) * 100) : 0;
+
+  return {
+    stats: {
+      bookingsConfirm: confirmed,
+      revenueConfirm:  revenue,
+      avgRevenue,
+      conversionRate,
+    },
+    charts: {
+      dailyTrends: buckets,
+      statusDistribution: Array.from(statusMap.entries())
+        .sort((a, b) => b[1] - a[1])
+        .map(([status, count]) => ({
+          status, count,
+          label: labels?.formatStatusLabel?.(status) || status,
+        })),
+      audienceDistribution: [],
+      topPackages: [],
+    },
+    table: {
+      recentBookings: (raw.recent || []).map(row => ({
+        id:           row.id,
+        createdAt:    row["${colDate}"],
+        customerName: row["${colCustomer}"] || "-",
+        packageName:  ${colItem !== "-" ? `row["${colItem}"] || "-"` : '"-"'},
+        audienceLabel: "-",
+        totalIDR:     toNumber(row["${colTotalFull}"]),
+        status:       String(row["${colStatus}"] || "pending").toLowerCase(),
+        statusLabel:  labels?.formatStatusLabel?.(row["${colStatus}"]) || row["${colStatus}"],
+      })),
+    },
+  };
+}`;
+  const widgetConfig = `// src/config/myDashboardConfig.js
+// AUTO-GENERATED oleh Setup Wizard @rozaqi02/reusable-dashboard
+
+export const myDashboardConfig = {
+  id: "my.custom.dashboard",
+  defaultFilters: {
+    statusScope: "${confirmed}",
+    daysPreset: 30,
+    sortPkgBy: "bookings",
+    sortPkgDir: "desc",
+  },
+  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" },
+      { id: "avg",        label: "avgRevenue",         icon: "Users",
+        valueKey: "avgRevenue",       format: "currency", accentColor: "violet" },
+      { id: "conversion", label: "conversionRate",     icon: "PieChart",
+        valueKey: "conversionRate",   format: "percent",  accentColor: "orange" },
+    ],
+    charts: [
+      { id: "trend",  type: "dailyArea", label: "dailyTrends",        icon: "BarChart3" },
+      { id: "status", type: "statusPie", label: "statusDistribution", icon: "PieChart" },
+    ],
+    table: {
+      id: "recentTx", label: "recentBookings", icon: "Calendar",
+      emptyLabel: "noRecentBookings",
+      columns: [
+        { id: "date",     label: "date",     accessor: "createdAt",  type: "date" },
+        { id: "customer", label: "customer", accessor: "customerName" },${colItem !== "-" ? `
+        { id: "item",     label: "package",  accessor: "packageName" },` : ""}
+        { id: "total",    label: "total",    accessor: "totalIDR",   type: "currency" },
+        { id: "status",   label: "status",   accessor: "statusLabel",
+          type: "statusBadge", statusAccessor: "status" },
+      ],
+    },
+  },
+};`;
+  const dashboard = `// src/pages/admin/Dashboard.jsx
+// AUTO-GENERATED oleh Setup Wizard @rozaqi02/reusable-dashboard
+// Salin file ini ke halaman dashboard kamu.
+
+import React from "react";
+import { supabase } from "../../lib/supabaseClient.js";
+import {
+  ReusableDashboardView,
+  useReusableDashboard,
+  createDashboardConfig,
+} from "@rozaqi02/reusable-dashboard";
+
+// Import 3 file yang digenerate wizard
+import { myDashboardConfig }    from "./myDashboardConfig";
+import { createMyDashboardSource } from "./myDashboardSource";
+import { adaptMyDashboardData, createEmptyMyDashboardData } from "./myDashboardAdapter";
+
+// Data source \u2014 dibuat sekali di luar komponen
+const source = createMyDashboardSource(supabase);
+
+// Label UI \u2014 sesuaikan teks dengan bahasa/konteks bisnis kamu
+const labels = {
+  title: "${safeTitle}",
+  refresh: "Refresh",
+  liveUpdate: "Live update",
+  loadFailed: "Gagal memuat data.",
+  retry: "Coba Lagi",
+  confirmedOnly: "Selesai",
+  pendingOnly: "Proses",
+  allStatus: "Semua Status",
+  showPendingOverlay: "Tampilkan pending",
+  reset: "Reset",
+  confirmedBookings: "Total Transaksi",
+  confirmedRevenue: "Total Pendapatan",
+  avgRevenue: "Rata-rata / Transaksi",
+  conversionRate: "Conversion Rate",
+  dailyTrends: "Tren Harian",
+  statusDistribution: "Distribusi Status",
+  recentBookings: "Transaksi Terbaru",
+  noRecentBookings: "Belum ada transaksi",
+  date: "Tanggal",
+  customer: "Pelanggan",
+  package: "Item",
+  total: "Total",
+  status: "Status",
+  bookingsMetric: "Transaksi",
+  revenueMetric: "Pendapatan",
+  confirmedBookingMetric: "Transaksi (Selesai)",
+  confirmedRevenueMetric: "Pendapatan (Selesai)",
+  dayLabel: n => n + " hari",
+  formatStatusLabel: s =>
+    ({ "${confirmed}": "Selesai", "${pending}": "Proses" })[s] || (s || "-"),
+  formatAudienceLabel: v => v || "-",
+};
+
+// Kemas semua jadi 1 objek
+const dashboardConfig = createDashboardConfig({
+  widgetConfig: myDashboardConfig,
+  dataSource:   source,
+  adapter:      adaptMyDashboardData,
+  createEmptyState: createEmptyMyDashboardData,
+  languageCode: "id",
+  dateLocale:   "id-ID",
+  labels,
+});
+
+export default function Dashboard() {
+  const state = useReusableDashboard({ ...dashboardConfig, labels });
+  return (
+    <ReusableDashboardView
+      config={dashboardConfig.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={dashboardConfig.dateLocale}
+      liveUpdateEnabled={state.liveUpdateEnabled}
+      supabase={supabase}
+      dashboardConfig={dashboardConfig}
+    />
+  );
+}`;
+  return { dataSource, adapter, widgetConfig, dashboard };
+}
+function SetupWizard({ issues = [], onDismiss, supabase }) {
+  const [dismissed, setDismissed] = (0, import_react19.useState)(false);
+  const [step, setStep] = (0, import_react19.useState)(0);
+  const [detecting, setDetecting] = (0, import_react19.useState)(true);
+  const [tables, setTables] = (0, import_react19.useState)([]);
+  const [columns, setColumns] = (0, import_react19.useState)({});
+  const [supabaseOk, setSupabaseOk] = (0, import_react19.useState)(false);
+  const [detectionDone, setDetectionDone] = (0, import_react19.useState)(false);
+  const [userHasDashboard, setUserHasDashboard] = (0, import_react19.useState)(null);
+  const [selectedTable, setSelectedTable] = (0, import_react19.useState)("");
+  const [colDate, setColDate] = (0, import_react19.useState)("");
+  const [colStatus, setColStatus] = (0, import_react19.useState)("");
+  const [colTotal, setColTotal] = (0, import_react19.useState)("");
+  const [colCustomer, setColCustomer] = (0, import_react19.useState)("");
+  const [colItem, setColItem] = (0, import_react19.useState)("");
+  const [confirmedVal, setConfirmedVal] = (0, import_react19.useState)("confirmed");
+  const [pendingVal, setPendingVal] = (0, import_react19.useState)("pending");
+  const [dashTitle, setDashTitle] = (0, import_react19.useState)("Dashboard");
+  const [loadingColumns, setLoadingColumns] = (0, import_react19.useState)(false);
+  const [generatedCode, setGeneratedCode] = (0, import_react19.useState)(null);
+  const [activeCodeTab, setActiveCodeTab] = (0, import_react19.useState)("dataSource");
+  const [copied, setCopied] = (0, import_react19.useState)("");
+  (0, import_react19.useEffect)(() => {
+    if (!supabase) {
+      setDetecting(false);
+      setDetectionDone(true);
+      return;
+    }
+    (async () => {
+      try {
+        const { data: rpcData, error: rpcErr } = await supabase.rpc("rdb_get_tables");
+        if (!rpcErr && Array.isArray(rpcData)) {
+          setTables(rpcData.map((r) => typeof r === "string" ? r : r.table_name || r.name || r));
+          setSupabaseOk(true);
+        } else {
+          const { data: schemaData, error: schemaErr } = await supabase.from("information_schema.tables").select("table_name").eq("table_schema", "public").eq("table_type", "BASE TABLE").order("table_name");
+          if (!schemaErr && schemaData) {
+            setTables(schemaData.map((r) => r.table_name));
+            setSupabaseOk(true);
+          } else {
+            const { error: pingErr } = await supabase.from("_rdb_ping_").select("*").limit(1);
+            const connected = !pingErr || pingErr.code === "42P01" || pingErr.code === "PGRST116" || (pingErr.message || "").includes("does not exist");
+            setSupabaseOk(connected);
+            setTables([]);
+          }
+        }
+      } catch {
+        setSupabaseOk(false);
+      } finally {
+        setDetecting(false);
+        setDetectionDone(true);
+      }
+    })();
+  }, [supabase]);
+  const loadColumns = (0, import_react19.useCallback)(async (tbl) => {
+    if (!supabase || !tbl || columns[tbl]) return;
+    setLoadingColumns(true);
+    try {
+      const { data: rpcCols, error: rpcErr } = await supabase.rpc("rdb_get_columns", { p_table: tbl });
+      if (!rpcErr && Array.isArray(rpcCols)) {
+        const colObjs = rpcCols.map(
+          (c) => typeof c === "string" ? { column_name: c, data_type: "unknown" } : { column_name: c.column_name || c.name || c, data_type: c.data_type || "unknown" }
+        );
+        setColumns((prev) => ({ ...prev, [tbl]: colObjs }));
+        autoDetectCols(colObjs);
+        return;
+      }
+      const { data: schemaCols, error: schemaErr } = await supabase.from("information_schema.columns").select("column_name, data_type").eq("table_schema", "public").eq("table_name", tbl).order("ordinal_position");
+      if (!schemaErr && schemaCols) {
+        setColumns((prev) => ({ ...prev, [tbl]: schemaCols }));
+        autoDetectCols(schemaCols);
+        return;
+      }
+      const { data: sampleRow, error: sampleErr } = await supabase.from(tbl).select("*").limit(1);
+      if (!sampleErr && sampleRow && sampleRow.length > 0) {
+        const colObjs = Object.keys(sampleRow[0]).map((k) => ({
+          column_name: k,
+          data_type: typeof sampleRow[0][k]
+        }));
+        setColumns((prev) => ({ ...prev, [tbl]: colObjs }));
+        autoDetectCols(colObjs);
+        return;
+      }
+      setColumns((prev) => ({ ...prev, [tbl]: [] }));
+    } catch {
+      setColumns((prev) => ({ ...prev, [tbl]: [] }));
+    } finally {
+      setLoadingColumns(false);
+    }
+  }, [supabase, columns]);
+  function autoDetectCols(colObjs) {
+    const find = (candidates) => {
+      var _a;
+      return ((_a = colObjs.find((c) => candidates.includes(c.column_name.toLowerCase()))) == null ? void 0 : _a.column_name) || "";
+    };
+    setColDate(find(["created_at", "tanggal", "date", "transaction_date", "order_date", "waktu"]));
+    setColStatus(find(["status", "state", "kondisi", "order_status", "payment_status"]));
+    setColTotal(find(["total", "total_idr", "total_amount", "total_price", "harga_total", "amount", "nominal", "harga", "biaya"]));
+    setColCustomer(find(["customer_name", "nama_pelanggan", "nama", "name", "client_name", "buyer_name", "pelanggan"]));
+    setColItem(find(["service_type", "item_name", "product_name", "package_name", "layanan", "produk", "nama_layanan", "jenis", "nama_produk"]));
+  }
+  function copyCode(text, label) {
+    navigator.clipboard.writeText(text).then(() => {
+      setCopied(label);
+      setTimeout(() => setCopied(""), 2e3);
+    });
+  }
+  function handleDismiss() {
+    setDismissed(true);
+    if (onDismiss) onDismiss();
+  }
+  function handleGenerate() {
+    if (!selectedTable || !colDate || !colStatus || !colTotal) return;
+    const code = generateCode({
+      tableName: selectedTable,
+      colDate,
+      colStatus,
+      colTotal,
+      colCustomer: colCustomer || "customer_name",
+      colItem: colItem || "-",
+      dashTitle,
+      confirmedValue: confirmedVal,
+      pendingValue: pendingVal
+    });
+    setGeneratedCode(code);
+    setStep(3);
+  }
+  if (dismissed) return null;
+  const detectedPreset = detectPreset(tables);
+  const tableColumns = selectedTable ? columns[selectedTable] || [] : [];
+  const colNames = tableColumns.map((c) => c.column_name);
+  const mappingValid = selectedTable && colDate && colStatus && colTotal;
+  const stepLabels = ["Deteksi", "Pilih Tabel", "Mapping Kolom", "Kode Siap Pakai"];
+  return /* @__PURE__ */ import_react19.default.createElement(
+    "div",
+    {
+      className: "rdb-wizard-overlay",
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-label": "Setup Wizard @rozaqi02/reusable-dashboard"
+    },
+    /* @__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" }, detecting ? "Mendeteksi kondisi project\u2026" : supabaseOk ? `Supabase tersambung \xB7 ${tables.length} tabel ditemukan` : "Panduan konfigurasi @rozaqi02/reusable-dashboard"))), /* @__PURE__ */ import_react19.default.createElement(
+      "button",
+      {
+        type: "button",
+        className: "rdb-wizard-close",
+        onClick: handleDismiss,
+        title: "Tutup"
+      },
+      "\u2715"
+    )), /* @__PURE__ */ import_react19.default.createElement("div", { className: "rdb-wizard-steps" }, stepLabels.map((label, i) => /* @__PURE__ */ import_react19.default.createElement(
+      "button",
+      {
+        key: i,
+        type: "button",
+        className: `rdb-wizard-step-btn ${step === i ? "rdb-wizard-step-active" : ""}`,
+        onClick: () => {
+          if (i < step || i === step + 1 && step < 2) setStep(i);
+        }
+      },
+      /* @__PURE__ */ import_react19.default.createElement("span", null, step > i ? "\u2705" : i + 1, "."),
+      /* @__PURE__ */ import_react19.default.createElement("span", null, label)
+    ))), /* @__PURE__ */ import_react19.default.createElement("div", { className: "rdb-wizard-body" }, /* @__PURE__ */ import_react19.default.createElement("div", { className: "rdb-wizard-section" }, step === 0 && /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, issues.length > 0 && /* @__PURE__ */ import_react19.default.createElement("div", { className: "rdb-wizard-issues", style: { marginBottom: 12 } }, /* @__PURE__ */ import_react19.default.createElement("div", { className: "rdb-caption", style: { fontWeight: 600, marginBottom: 6 } }, "Konfigurasi belum lengkap:"), issues.map((iss, i) => /* @__PURE__ */ import_react19.default.createElement("div", { key: i, className: "rdb-wizard-issue-item" }, /* @__PURE__ */ import_react19.default.createElement("span", null, "\u274C"), /* @__PURE__ */ import_react19.default.createElement("span", { className: "rdb-body" }, iss)))), /* @__PURE__ */ import_react19.default.createElement("div", { className: "rdb-wizard-flow", style: { marginBottom: 12 } }, /* @__PURE__ */ import_react19.default.createElement("div", { className: "rdb-caption", style: { fontWeight: 600, marginBottom: 10 } }, "\u{1F50D} Hasil deteksi otomatis:"), detecting ? /* @__PURE__ */ import_react19.default.createElement("div", { className: "rdb-body", style: { color: "var(--rdb-text-muted)" } }, "Mendeteksi\u2026") : /* @__PURE__ */ import_react19.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 8 } }, /* @__PURE__ */ import_react19.default.createElement("div", { className: "rdb-wizard-issue-item" }, /* @__PURE__ */ import_react19.default.createElement("span", null, supabaseOk ? "\u2705" : "\u274C"), /* @__PURE__ */ import_react19.default.createElement("span", { className: "rdb-body" }, "Supabase ", supabaseOk ? "tersambung" : "tidak tersambung \u2014 pastikan supabaseClient.js sudah dikonfigurasi dan prop supabase dikirim ke ReusableDashboardView")), supabaseOk && /* @__PURE__ */ import_react19.default.createElement("div", { className: "rdb-wizard-issue-item" }, /* @__PURE__ */ import_react19.default.createElement("span", null, tables.length > 0 ? "\u2705" : "\u26A0\uFE0F"), /* @__PURE__ */ import_react19.default.createElement("span", { className: "rdb-body" }, tables.length > 0 ? `${tables.length} tabel public ditemukan` : "Daftar tabel tidak bisa dibaca otomatis (RLS aktif) \u2014 kamu bisa ketik nama tabel di step berikutnya")), supabaseOk && tables.length > 0 && detectedPreset && /* @__PURE__ */ import_react19.default.createElement("div", { className: "rdb-wizard-issue-item" }, /* @__PURE__ */ import_react19.default.createElement("span", null, "\u2705"), /* @__PURE__ */ import_react19.default.createElement("span", { className: "rdb-body" }, "Tabel cocok dengan preset ", /* @__PURE__ */ import_react19.default.createElement("strong", null, PRESET_SIGNATURES[detectedPreset].name))))), !supabaseOk && detectionDone && /* @__PURE__ */ import_react19.default.createElement("div", { className: "rdb-wizard-alert", style: { marginBottom: 12 } }, /* @__PURE__ */ import_react19.default.createElement("span", { className: "rdb-wizard-alert-icon" }, "\u2139\uFE0F"), /* @__PURE__ */ import_react19.default.createElement("div", null, /* @__PURE__ */ import_react19.default.createElement("div", { className: "rdb-body", style: { fontWeight: 600 } }, "Aktifkan koneksi Supabase"), /* @__PURE__ */ import_react19.default.createElement("div", { className: "rdb-caption", style: { marginTop: 4 } }, "Tambahkan prop ke ReusableDashboardView:", " ", /* @__PURE__ */ import_react19.default.createElement("code", { className: "rdb-wizard-code-inline" }, "supabase=", "{supabase}")))), /* @__PURE__ */ import_react19.default.createElement("div", { style: { display: "flex", gap: 8, justifyContent: "flex-end" } }, /* @__PURE__ */ import_react19.default.createElement(
+      "button",
+      {
+        type: "button",
+        className: "rdb-btn rdb-btn-secondary rdb-btn-sm",
+        onClick: handleDismiss
+      },
+      "Lanjutkan tanpa wizard"
+    ), supabaseOk && /* @__PURE__ */ import_react19.default.createElement(
+      "button",
+      {
+        type: "button",
+        className: "rdb-btn rdb-btn-primary rdb-btn-sm",
+        onClick: () => setStep(1)
+      },
+      "Lanjut \u2192 Pilih Tabel"
+    ))), step === 1 && /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, /* @__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 } }, "Pilih Tabel Transaksi")), /* @__PURE__ */ import_react19.default.createElement("div", { className: "rdb-body", style: { color: "var(--rdb-text-muted)", marginBottom: 16 } }, "Pilih tabel yang berisi data transaksi bisnis kamu."), tables.length > 0 && /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, /* @__PURE__ */ import_react19.default.createElement("div", { className: "rdb-caption", style: { fontWeight: 600, marginBottom: 8 } }, "Tabel yang ditemukan:"), /* @__PURE__ */ import_react19.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 6, marginBottom: 16 } }, tables.map((tbl) => /* @__PURE__ */ import_react19.default.createElement(
+      "button",
+      {
+        key: tbl,
+        type: "button",
+        onClick: () => {
+          setSelectedTable(tbl);
+          loadColumns(tbl);
+        },
+        className: `rdb-btn rdb-btn-sm ${selectedTable === tbl ? "rdb-btn-primary" : "rdb-btn-secondary"}`,
+        style: { justifyContent: "flex-start", fontFamily: "monospace" }
+      },
+      selectedTable === tbl ? "\u2705 " : "\u25CB ",
+      tbl
+    )))), tables.length === 0 && /* @__PURE__ */ import_react19.default.createElement("div", { style: { marginBottom: 16 } }, /* @__PURE__ */ import_react19.default.createElement("div", { className: "rdb-wizard-alert", style: { marginBottom: 12 } }, /* @__PURE__ */ import_react19.default.createElement("span", { className: "rdb-wizard-alert-icon" }, "\u2139\uFE0F"), /* @__PURE__ */ import_react19.default.createElement("div", null, /* @__PURE__ */ import_react19.default.createElement("div", { className: "rdb-body", style: { fontWeight: 600 } }, "Daftar tabel tidak bisa terbaca otomatis"), /* @__PURE__ */ import_react19.default.createElement("div", { className: "rdb-caption", style: { marginTop: 4 } }, "Ini normal \u2014 Supabase memblokir akses ke ", /* @__PURE__ */ import_react19.default.createElement("code", null, "information_schema"), " via API publik. Ketik nama tabel secara manual di bawah."))), /* @__PURE__ */ import_react19.default.createElement("label", { className: "rdb-label" }, "Nama tabel transaksi kamu"), /* @__PURE__ */ import_react19.default.createElement("div", { style: { display: "flex", gap: 8 } }, /* @__PURE__ */ import_react19.default.createElement(
+      "input",
+      {
+        className: "rdb-input",
+        value: selectedTable,
+        onChange: (e) => setSelectedTable(e.target.value),
+        placeholder: "cth: orders, transaksi, bookings, penjualan",
+        style: { maxWidth: 320 }
+      }
+    ), /* @__PURE__ */ import_react19.default.createElement(
+      "button",
+      {
+        type: "button",
+        className: "rdb-btn rdb-btn-secondary rdb-btn-sm",
+        disabled: !selectedTable || loadingColumns,
+        onClick: () => loadColumns(selectedTable)
+      },
+      loadingColumns ? "Membaca\u2026" : "Baca kolom"
+    ))), tables.length > 0 && !selectedTable && /* @__PURE__ */ import_react19.default.createElement("div", { className: "rdb-caption", style: { color: "var(--rdb-text-muted)", marginBottom: 12 } }, "Atau ketik nama tabel secara manual:", /* @__PURE__ */ import_react19.default.createElement(
+      "input",
+      {
+        className: "rdb-input",
+        style: { marginTop: 6, maxWidth: 280 },
+        placeholder: "nama tabel lain",
+        onChange: (e) => {
+          setSelectedTable(e.target.value);
+          if (e.target.value) loadColumns(e.target.value);
+        }
+      }
+    )), selectedTable && /* @__PURE__ */ import_react19.default.createElement("div", { className: "rdb-wizard-tip", style: { marginBottom: 12 } }, "Tabel ", /* @__PURE__ */ import_react19.default.createElement("strong", null, selectedTable), " dipilih.", loadingColumns ? " Membaca kolom\u2026" : tableColumns.length > 0 ? ` ${tableColumns.length} kolom ditemukan \u2014 kolom sudah ter-auto-detect di step berikutnya.` : tableColumns.length === 0 && !loadingColumns && columns[selectedTable] !== void 0 ? " Tabel kosong atau tidak ada kolom terbaca \u2014 kamu bisa ketik nama kolom manual di step berikutnya." : ""), /* @__PURE__ */ import_react19.default.createElement("div", { style: { marginBottom: 12 } }, /* @__PURE__ */ import_react19.default.createElement("label", { className: "rdb-label" }, "Judul dashboard (opsional)"), /* @__PURE__ */ import_react19.default.createElement(
+      "input",
+      {
+        className: "rdb-input",
+        value: dashTitle,
+        style: { maxWidth: 280 },
+        onChange: (e) => setDashTitle(e.target.value),
+        placeholder: "cth: Dashboard Laundry Bersih"
+      }
+    )), /* @__PURE__ */ import_react19.default.createElement("div", { style: { display: "flex", gap: 8, justifyContent: "flex-end" } }, /* @__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",
+        disabled: !selectedTable || loadingColumns,
+        onClick: () => setStep(2)
+      },
+      "Lanjut \u2192 Mapping Kolom"
+    ))), step === 2 && /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, /* @__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 } }, "Mapping Kolom \u2014 Tabel: ", /* @__PURE__ */ import_react19.default.createElement("code", { style: { fontSize: "0.9rem" } }, selectedTable))), /* @__PURE__ */ import_react19.default.createElement("div", { className: "rdb-body", style: { color: "var(--rdb-text-muted)", marginBottom: 16 } }, "Pilih kolom yang berperan sebagai masing-masing data. Kolom sudah ter-deteksi otomatis \u2014 cukup verifikasi dan sesuaikan jika perlu."), /* @__PURE__ */ import_react19.default.createElement("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, marginBottom: 16 } }, /* @__PURE__ */ import_react19.default.createElement("div", null, /* @__PURE__ */ import_react19.default.createElement("label", { className: "rdb-label" }, "Kolom Tanggal ", /* @__PURE__ */ import_react19.default.createElement("span", { style: { color: "red" } }, "*")), colNames.length > 0 ? /* @__PURE__ */ import_react19.default.createElement(
+      "select",
+      {
+        className: "rdb-select",
+        value: colDate,
+        onChange: (e) => setColDate(e.target.value)
+      },
+      /* @__PURE__ */ import_react19.default.createElement("option", { value: "" }, "\u2014 pilih kolom \u2014"),
+      colNames.map((c) => /* @__PURE__ */ import_react19.default.createElement("option", { key: c, value: c }, c))
+    ) : /* @__PURE__ */ import_react19.default.createElement(
+      "input",
+      {
+        className: "rdb-input",
+        value: colDate,
+        onChange: (e) => setColDate(e.target.value),
+        placeholder: "cth: created_at"
+      }
+    ), /* @__PURE__ */ import_react19.default.createElement("div", { className: "rdb-caption", style: { marginTop: 2 } }, "Tipe timestamp/date")), /* @__PURE__ */ import_react19.default.createElement("div", null, /* @__PURE__ */ import_react19.default.createElement("label", { className: "rdb-label" }, "Kolom Status ", /* @__PURE__ */ import_react19.default.createElement("span", { style: { color: "red" } }, "*")), colNames.length > 0 ? /* @__PURE__ */ import_react19.default.createElement(
+      "select",
+      {
+        className: "rdb-select",
+        value: colStatus,
+        onChange: (e) => setColStatus(e.target.value)
+      },
+      /* @__PURE__ */ import_react19.default.createElement("option", { value: "" }, "\u2014 pilih kolom \u2014"),
+      colNames.map((c) => /* @__PURE__ */ import_react19.default.createElement("option", { key: c, value: c }, c))
+    ) : /* @__PURE__ */ import_react19.default.createElement(
+      "input",
+      {
+        className: "rdb-input",
+        value: colStatus,
+        onChange: (e) => setColStatus(e.target.value),
+        placeholder: "cth: status"
+      }
+    ), /* @__PURE__ */ import_react19.default.createElement("div", { className: "rdb-caption", style: { marginTop: 2 } }, "Nilai selesai/pending")), /* @__PURE__ */ import_react19.default.createElement("div", null, /* @__PURE__ */ import_react19.default.createElement("label", { className: "rdb-label" }, "Kolom Total (uang) ", /* @__PURE__ */ import_react19.default.createElement("span", { style: { color: "red" } }, "*")), colNames.length > 0 ? /* @__PURE__ */ import_react19.default.createElement(
+      "select",
+      {
+        className: "rdb-select",
+        value: colTotal,
+        onChange: (e) => setColTotal(e.target.value)
+      },
+      /* @__PURE__ */ import_react19.default.createElement("option", { value: "" }, "\u2014 pilih kolom \u2014"),
+      colNames.map((c) => /* @__PURE__ */ import_react19.default.createElement("option", { key: c, value: c }, c))
+    ) : /* @__PURE__ */ import_react19.default.createElement(
+      "input",
+      {
+        className: "rdb-input",
+        value: colTotal,
+        onChange: (e) => setColTotal(e.target.value),
+        placeholder: "cth: total_amount"
+      }
+    ), /* @__PURE__ */ import_react19.default.createElement("div", { className: "rdb-caption", style: { marginTop: 2 } }, "Integer Rupiah")), /* @__PURE__ */ import_react19.default.createElement("div", null, /* @__PURE__ */ import_react19.default.createElement("label", { className: "rdb-label" }, "Kolom Nama Pelanggan"), colNames.length > 0 ? /* @__PURE__ */ import_react19.default.createElement(
+      "select",
+      {
+        className: "rdb-select",
+        value: colCustomer,
+        onChange: (e) => setColCustomer(e.target.value)
+      },
+      /* @__PURE__ */ import_react19.default.createElement("option", { value: "" }, "\u2014 opsional \u2014"),
+      colNames.map((c) => /* @__PURE__ */ import_react19.default.createElement("option", { key: c, value: c }, c))
+    ) : /* @__PURE__ */ import_react19.default.createElement(
+      "input",
+      {
+        className: "rdb-input",
+        value: colCustomer,
+        onChange: (e) => setColCustomer(e.target.value),
+        placeholder: "cth: customer_name (opsional)"
+      }
+    )), /* @__PURE__ */ import_react19.default.createElement("div", null, /* @__PURE__ */ import_react19.default.createElement("label", { className: "rdb-label" }, "Kolom Nama Item/Layanan"), colNames.length > 0 ? /* @__PURE__ */ import_react19.default.createElement(
+      "select",
+      {
+        className: "rdb-select",
+        value: colItem,
+        onChange: (e) => setColItem(e.target.value)
+      },
+      /* @__PURE__ */ import_react19.default.createElement("option", { value: "" }, "\u2014 opsional \u2014"),
+      colNames.map((c) => /* @__PURE__ */ import_react19.default.createElement("option", { key: c, value: c }, c))
+    ) : /* @__PURE__ */ import_react19.default.createElement(
+      "input",
+      {
+        className: "rdb-input",
+        value: colItem,
+        onChange: (e) => setColItem(e.target.value),
+        placeholder: "cth: service_type (opsional)"
+      }
+    ))), /* @__PURE__ */ import_react19.default.createElement("div", { className: "rdb-wizard-flow", style: { marginBottom: 16 } }, /* @__PURE__ */ import_react19.default.createElement("div", { className: "rdb-caption", style: { fontWeight: 600, marginBottom: 8 } }, "Nilai status di tabel kamu:"), /* @__PURE__ */ import_react19.default.createElement("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 } }, /* @__PURE__ */ import_react19.default.createElement("div", null, /* @__PURE__ */ import_react19.default.createElement("label", { className: "rdb-label" }, 'Nilai "Selesai/Confirmed"'), /* @__PURE__ */ import_react19.default.createElement(
+      "input",
+      {
+        className: "rdb-input",
+        value: confirmedVal,
+        onChange: (e) => setConfirmedVal(e.target.value),
+        placeholder: "cth: confirmed, selesai, lunas"
+      }
+    )), /* @__PURE__ */ import_react19.default.createElement("div", null, /* @__PURE__ */ import_react19.default.createElement("label", { className: "rdb-label" }, 'Nilai "Pending/Proses"'), /* @__PURE__ */ import_react19.default.createElement(
+      "input",
+      {
+        className: "rdb-input",
+        value: pendingVal,
+        onChange: (e) => setPendingVal(e.target.value),
+        placeholder: "cth: pending, proses, menunggu"
+      }
+    )))), !mappingValid && /* @__PURE__ */ import_react19.default.createElement("div", { className: "rdb-error-banner", style: { marginBottom: 12 } }, "Pilih minimal kolom Tanggal, Status, dan Total untuk generate kode."), /* @__PURE__ */ import_react19.default.createElement("div", { style: { display: "flex", gap: 8, justifyContent: "flex-end" } }, /* @__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",
+        disabled: !mappingValid,
+        onClick: handleGenerate
+      },
+      "\u2728 Generate Kode \u2192"
+    ))), step === 3 && generatedCode && /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, /* @__PURE__ */ import_react19.default.createElement("div", { className: "rdb-wizard-step-title" }, /* @__PURE__ */ import_react19.default.createElement("span", { className: "rdb-wizard-step-num" }, "\u2705"), /* @__PURE__ */ import_react19.default.createElement("span", { className: "rdb-h3", style: { margin: 0 } }, "Kode Siap Pakai")), /* @__PURE__ */ import_react19.default.createElement("div", { className: "rdb-wizard-tip", style: { marginBottom: 16 } }, /* @__PURE__ */ import_react19.default.createElement("strong", null, "4 file sudah digenerate."), " Salin masing-masing ke project kamu. Tidak perlu memahami logika di dalamnya \u2014 cukup save dan jalankan."), /* @__PURE__ */ import_react19.default.createElement("div", { className: "rdb-wizard-issues", style: { marginBottom: 16 } }, [
+      ["myDashboardSource.js", "src/datasources/", "File koneksi ke Supabase"],
+      ["myDashboardAdapter.js", "src/adapters/", "Transformasi data \u2192 format dashboard"],
+      ["myDashboardConfig.js", "src/config/ (atau langsung di Dashboard.jsx)", "Konfigurasi widget"],
+      ["Dashboard.jsx", "src/pages/admin/", "Ganti halaman dashboard lama"]
+    ].map(([file, path, desc], i) => /* @__PURE__ */ import_react19.default.createElement("div", { key: i, className: "rdb-wizard-issue-item" }, /* @__PURE__ */ import_react19.default.createElement("span", { style: { color: "var(--rdb-blue-500)", fontWeight: 700 } }, i + 1, "."), /* @__PURE__ */ import_react19.default.createElement("span", { className: "rdb-body" }, "Simpan ", /* @__PURE__ */ import_react19.default.createElement("code", { className: "rdb-wizard-code-inline" }, file), " ke", " ", /* @__PURE__ */ import_react19.default.createElement("code", { className: "rdb-wizard-code-inline" }, path), " \u2014 ", desc))), /* @__PURE__ */ import_react19.default.createElement("div", { className: "rdb-wizard-issue-item" }, /* @__PURE__ */ import_react19.default.createElement("span", { style: { color: "var(--rdb-blue-500)", fontWeight: 700 } }, "5."), /* @__PURE__ */ import_react19.default.createElement("span", { className: "rdb-body" }, "Import CSS di ", /* @__PURE__ */ import_react19.default.createElement("code", { className: "rdb-wizard-code-inline" }, "src/index.css"), ":", " ", /* @__PURE__ */ import_react19.default.createElement("code", { className: "rdb-wizard-code-inline" }, '@import "../node_modules/@rozaqi02/reusable-dashboard/dist/index.css";')))), /* @__PURE__ */ import_react19.default.createElement("div", { style: { display: "flex", gap: 4, marginBottom: 8, flexWrap: "wrap" } }, [
+      ["dataSource", "myDashboardSource.js"],
+      ["adapter", "myDashboardAdapter.js"],
+      ["widgetConfig", "myDashboardConfig.js"],
+      ["dashboard", "Dashboard.jsx"]
+    ].map(([key, label]) => /* @__PURE__ */ import_react19.default.createElement(
+      "button",
+      {
+        key,
+        type: "button",
+        onClick: () => setActiveCodeTab(key),
+        className: `rdb-btn rdb-btn-sm ${activeCodeTab === key ? "rdb-btn-primary" : "rdb-btn-secondary"}`,
+        style: { fontFamily: "monospace", fontSize: "0.75rem" }
+      },
+      label
+    ))), /* @__PURE__ */ import_react19.default.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ import_react19.default.createElement(
+      "button",
+      {
+        type: "button",
+        onClick: () => copyCode(generatedCode[activeCodeTab], activeCodeTab),
+        className: "rdb-btn rdb-btn-sm rdb-btn-secondary",
+        style: { position: "absolute", top: 8, right: 8, zIndex: 1 }
+      },
+      copied === activeCodeTab ? "\u2705 Disalin!" : "\u{1F4CB} Salin"
+    ), /* @__PURE__ */ import_react19.default.createElement("pre", { className: "rdb-wizard-code", style: { maxHeight: 320, overflow: "auto" } }, generatedCode[activeCodeTab])), /* @__PURE__ */ import_react19.default.createElement("div", { className: "rdb-wizard-tip", style: { marginTop: 12 } }, "Setelah semua file tersimpan dan dev server direstart, wizard tidak akan muncul lagi."), /* @__PURE__ */ import_react19.default.createElement("div", { style: { display: "flex", gap: 8, justifyContent: "flex-end", marginTop: 12 } }, /* @__PURE__ */ import_react19.default.createElement(
+      "button",
+      {
+        type: "button",
+        className: "rdb-btn rdb-btn-secondary rdb-btn-sm",
+        onClick: () => setStep(2)
+      },
+      "\u2190 Edit mapping"
+    ), /* @__PURE__ */ import_react19.default.createElement(
+      "button",
+      {
+        type: "button",
+        className: "rdb-btn rdb-btn-primary rdb-btn-sm",
+        onClick: handleDismiss
+      },
+      "Tutup wizard \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 +2624,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 +2673,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 +2719,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 +2869,7 @@ function createDashboardLabels(t) {
   Input,
   ReusableDashboardView,
   SearchBar,
+  SetupWizard,
   SidebarNavigation,
   SkeletonLoader,
   StatCard,
@@ -2054,6 +2881,7 @@ function createDashboardLabels(t) {
   buildDayBuckets,
   cidikaWidgetConfig,
   createCidikaSupabaseSource,
+  createDashboardConfig,
   createDashboardLabels,
   createDefaultFilters,
   createEmptyDashboardData,
@@ -2071,6 +2899,7 @@ function createDashboardLabels(t) {
   toNumber,
   tokoSepatuWidgetConfig,
   useRealtimeUpdate,
-  useReusableDashboard
+  useReusableDashboard,
+  validateDashboardConfig
 });
 //# sourceMappingURL=index.cjs.map