@rozaqi02/reusable-dashboard 1.1.3 → 1.1.4

package/dist/index.js

@@ -1861,256 +1861,272 @@ import React18 from "react";
 import PropTypes18 from "prop-types";
 
 // src/presentation/SetupWizard.jsx
-import React17, { useState as useState6 } from "react";
+import React17, { useState as useState6, useEffect as useEffect3, useCallback as useCallback5 } from "react";
 import PropTypes17 from "prop-types";
-function SetupWizard({ issues = [], onDismiss, supabase }) {
-  const [step, setStep] = useState6(0);
-  const [tables, setTables] = useState6(null);
-  const [loadingTables, setLoadingTables] = useState6(false);
-  const [tableError, setTableError] = useState6("");
-  const [dismissed, setDismissed] = useState6(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();
+var PRESET_SIGNATURES = {
+  cidika: {
+    name: "Cidika Travel",
+    tables: ["bookings", "packages", "package_locales"]
+  },
+  tokoSepatu: {
+    name: "Toko Sepatu / E-Commerce",
+    tables: ["orders", "products", "customers"]
   }
-  return /* @__PURE__ */ React17.createElement("div", { className: "rdb-wizard-overlay", role: "dialog", "aria-modal": "true", "aria-label": "Dashboard Setup Wizard" }, /* @__PURE__ */ React17.createElement("div", { className: "rdb-wizard-modal" }, /* @__PURE__ */ React17.createElement("div", { className: "rdb-wizard-header" }, /* @__PURE__ */ React17.createElement("div", { className: "rdb-wizard-header-title" }, /* @__PURE__ */ React17.createElement("span", { className: "rdb-wizard-logo" }, "\u{1F6E0}\uFE0F"), /* @__PURE__ */ React17.createElement("div", null, /* @__PURE__ */ React17.createElement("div", { className: "rdb-h2", style: { margin: 0 } }, "Setup Dashboard"), /* @__PURE__ */ React17.createElement("div", { className: "rdb-caption" }, "Panduan konfigurasi modul @rozaqi02/reusable-dashboard"))), /* @__PURE__ */ React17.createElement(
-    "button",
-    {
-      type: "button",
-      className: "rdb-wizard-close",
-      onClick: handleDismiss,
-      "aria-label": "Tutup wizard",
-      title: "Lanjutkan tanpa wizard"
-    },
-    "\u2715"
-  )), /* @__PURE__ */ React17.createElement("div", { className: "rdb-wizard-steps" }, steps.map((s) => /* @__PURE__ */ React17.createElement(
-    "button",
-    {
-      key: s.id,
-      type: "button",
-      className: `rdb-wizard-step-btn ${step === s.id ? "rdb-wizard-step-active" : ""}`,
-      onClick: () => setStep(s.id)
-    },
-    /* @__PURE__ */ React17.createElement("span", null, s.icon),
-    /* @__PURE__ */ React17.createElement("span", null, s.label)
-  ))), /* @__PURE__ */ React17.createElement("div", { className: "rdb-wizard-body" }, step === 0 && /* @__PURE__ */ React17.createElement("div", { className: "rdb-wizard-section" }, /* @__PURE__ */ React17.createElement("div", { className: "rdb-wizard-alert" }, /* @__PURE__ */ React17.createElement("span", { className: "rdb-wizard-alert-icon" }, "\u26A0\uFE0F"), /* @__PURE__ */ React17.createElement("div", null, /* @__PURE__ */ React17.createElement("div", { className: "rdb-body", style: { fontWeight: 600 } }, "Dashboard belum terkonfigurasi"), /* @__PURE__ */ React17.createElement("div", { className: "rdb-caption", style: { marginTop: 4 } }, "Ditemukan ", issues.length, " masalah yang perlu diselesaikan sebelum dashboard dapat berjalan."))), issues.length > 0 && /* @__PURE__ */ React17.createElement("div", { className: "rdb-wizard-issues" }, /* @__PURE__ */ React17.createElement("div", { className: "rdb-caption", style: { fontWeight: 600, marginBottom: 8 } }, "Masalah yang ditemukan:"), issues.map((issue, i) => /* @__PURE__ */ React17.createElement("div", { key: i, className: "rdb-wizard-issue-item" }, /* @__PURE__ */ React17.createElement("span", { className: "rdb-wizard-issue-icon" }, "\u274C"), /* @__PURE__ */ React17.createElement("span", { className: "rdb-body" }, issue)))), /* @__PURE__ */ React17.createElement("div", { className: "rdb-wizard-flow" }, /* @__PURE__ */ React17.createElement("div", { className: "rdb-caption", style: { fontWeight: 600, marginBottom: 12 } }, "Alur konfigurasi yang perlu dilakukan:"), /* @__PURE__ */ React17.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__ */ React17.createElement("div", { key: i, className: "rdb-wizard-flow-arrow" }, "\u2192") : /* @__PURE__ */ React17.createElement("div", { key: i, className: "rdb-wizard-flow-box" }, /* @__PURE__ */ React17.createElement("div", { className: "rdb-wizard-flow-num" }, item.num), /* @__PURE__ */ React17.createElement("div", { className: "rdb-wizard-flow-label" }, item.label), /* @__PURE__ */ React17.createElement("div", { className: "rdb-wizard-flow-desc" }, item.desc))))), /* @__PURE__ */ React17.createElement("div", { style: { display: "flex", gap: 8, justifyContent: "flex-end", marginTop: 16 } }, /* @__PURE__ */ React17.createElement("button", { type: "button", className: "rdb-btn rdb-btn-secondary rdb-btn-sm", onClick: handleDismiss }, "Lanjutkan tanpa wizard"), /* @__PURE__ */ React17.createElement("button", { type: "button", className: "rdb-btn rdb-btn-primary rdb-btn-sm", onClick: () => setStep(1) }, "Mulai panduan \u2192"))), step === 1 && /* @__PURE__ */ React17.createElement("div", { className: "rdb-wizard-section" }, /* @__PURE__ */ React17.createElement("div", { className: "rdb-wizard-step-title" }, /* @__PURE__ */ React17.createElement("span", { className: "rdb-wizard-step-num" }, "1"), /* @__PURE__ */ React17.createElement("span", { className: "rdb-h3", style: { margin: 0 } }, "Data Source")), /* @__PURE__ */ React17.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__ */ React17.createElement("code", { className: "rdb-wizard-code-inline" }, " src/datasources/myDataSource.js"), " dengan isi berikut:"), /* @__PURE__ */ React17.createElement("pre", { className: "rdb-wizard-code" }, `// src/datasources/myDataSource.js
-export function createMySupabaseSource(supabase) {
+};
+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 { 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 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 { data: recent = [] } = await supabase
-        .from("MY_TABLE")
-        .select("id, created_at, customer_name, total_price, status")
-        .order("created_at", { ascending: false })
+      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: orders,   // WAJIB: nama harus "bookings"
-        recent,             // WAJIB: nama harus "recent"
+        bookings: allRes.data   || [],  // semua transaksi (untuk chart & stats)
+        recent:   recentRes.data || [], // 10 terbaru (untuk tabel)
         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)
+      const ch = supabase
+        .channel("rdb-dashboard-live")
+        .on("postgres_changes", { event: "*", schema: "public", table: "${tableName}" }, onEvent)
         .subscribe();
       return () => supabase.removeChannel(ch);
     },
   };
-}`), /* @__PURE__ */ React17.createElement("div", { className: "rdb-wizard-supabase-reader" }, /* @__PURE__ */ React17.createElement("div", { className: "rdb-caption", style: { fontWeight: 600, marginBottom: 8 } }, "\u{1F50D} Baca tabel dari Supabase project kamu secara langsung:"), /* @__PURE__ */ React17.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__ */ React17.createElement("div", { className: "rdb-wizard-table-error" }, tableError), tables && tables.length > 0 && /* @__PURE__ */ React17.createElement("div", { className: "rdb-wizard-table-list" }, /* @__PURE__ */ React17.createElement("div", { className: "rdb-caption", style: { marginBottom: 6 } }, "Tabel ditemukan (", tables.length, "):"), /* @__PURE__ */ React17.createElement("div", { className: "rdb-wizard-table-chips" }, tables.map((t) => /* @__PURE__ */ React17.createElement("span", { key: t, className: "rdb-wizard-chip" }, t))), /* @__PURE__ */ React17.createElement("div", { className: "rdb-caption", style: { marginTop: 8, color: "var(--rdb-text-muted)" } }, "Ganti ", /* @__PURE__ */ React17.createElement("code", { className: "rdb-wizard-code-inline" }, "MY_TABLE"), " di contoh kode di atas dengan nama tabel yang sesuai.")), !supabase && /* @__PURE__ */ React17.createElement("div", { className: "rdb-wizard-table-error" }, "Tambahkan prop ", /* @__PURE__ */ React17.createElement("code", { className: "rdb-wizard-code-inline" }, "supabase"), " ke", /* @__PURE__ */ React17.createElement("code", { className: "rdb-wizard-code-inline" }, " <ReusableDashboardView supabase=", "{supabase}", " />"), " untuk mengaktifkan fitur ini.")), /* @__PURE__ */ React17.createElement("div", { style: { display: "flex", gap: 8, justifyContent: "flex-end", marginTop: 16 } }, /* @__PURE__ */ React17.createElement("button", { type: "button", className: "rdb-btn rdb-btn-secondary rdb-btn-sm", onClick: () => setStep(0) }, "\u2190 Kembali"), /* @__PURE__ */ React17.createElement("button", { type: "button", className: "rdb-btn rdb-btn-primary rdb-btn-sm", onClick: () => setStep(2) }, "Lanjut \u2192"))), step === 2 && /* @__PURE__ */ React17.createElement("div", { className: "rdb-wizard-section" }, /* @__PURE__ */ React17.createElement("div", { className: "rdb-wizard-step-title" }, /* @__PURE__ */ React17.createElement("span", { className: "rdb-wizard-step-num" }, "2"), /* @__PURE__ */ React17.createElement("span", { className: "rdb-h3", style: { margin: 0 } }, "Data Adapter")), /* @__PURE__ */ React17.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__ */ React17.createElement("code", { className: "rdb-wizard-code-inline" }, "src/adapters/myAdapter.js"), ":"), /* @__PURE__ */ React17.createElement("pre", { className: "rdb-wizard-code" }, `// src/adapters/myAdapter.js
+}`;
+  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 createEmptyMyData() {
+export function createEmptyMyDashboardData() {
   return {
-    stats: { bookingsConfirm: 0, revenueConfirm: 0 },
-    charts: {
-      dailyTrends: [],
-      statusDistribution: [],
-      audienceDistribution: [],
-      topPackages: [],
-    },
-    table: { recentBookings: [] },
+    stats:  { bookingsConfirm: 0, revenueConfirm: 0 },
+    charts: { dailyTrends: [], statusDistribution: [],
+              audienceDistribution: [], topPackages: [] },
+    table:  { recentBookings: [] },
   };
 }
 
-export function adaptMyData({ raw, range, dateLocale, labels }) {
-  if (!raw) return createEmptyMyData();
+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 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);
+    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 && status === "confirmed") {
-      bucket.count += 1;
-      bucket.revenue += amount;
+    if (bucket) {
+      if (status === "${confirmed}") { bucket.count++; bucket.revenue += amount; }
+      if (status === "${pending}")   { bucket.pendingCount++; }
     }
-    if (status === "confirmed") { confirmed++; revenue += amount; }
+    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 },
+    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,
+          status, count,
           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
+        id:           row.id,
+        createdAt:    row["${colDate}"],
+        customerName: row["${colCustomer}"] || "-",
+        packageName:  ${colItem !== "-" ? `row["${colItem}"] || "-"` : '"-"'},
         audienceLabel: "-",
-        totalIDR: toNumber(row.total_price),
-        status: String(row.status || "pending").toLowerCase(),
-        statusLabel: labels?.formatStatusLabel?.(row.status) || row.status,
+        totalIDR:     toNumber(row["${colTotalFull}"]),
+        status:       String(row["${colStatus}"] || "pending").toLowerCase(),
+        statusLabel:  labels?.formatStatusLabel?.(row["${colStatus}"]) || row["${colStatus}"],
       })),
     },
   };
-}`), /* @__PURE__ */ React17.createElement("div", { className: "rdb-wizard-tip" }, "\u{1F4A1} ", /* @__PURE__ */ React17.createElement("strong", null, "Aturan penting:"), " key di ", /* @__PURE__ */ React17.createElement("code", { className: "rdb-wizard-code-inline" }, "stats"), " (mis. ", /* @__PURE__ */ React17.createElement("code", { className: "rdb-wizard-code-inline" }, "bookingsConfirm"), ") harus cocok dengan ", /* @__PURE__ */ React17.createElement("code", { className: "rdb-wizard-code-inline" }, "valueKey"), " di widget config pada Step 3."), /* @__PURE__ */ React17.createElement("div", { style: { display: "flex", gap: 8, justifyContent: "flex-end", marginTop: 16 } }, /* @__PURE__ */ React17.createElement("button", { type: "button", className: "rdb-btn rdb-btn-secondary rdb-btn-sm", onClick: () => setStep(1) }, "\u2190 Kembali"), /* @__PURE__ */ React17.createElement("button", { type: "button", className: "rdb-btn rdb-btn-primary rdb-btn-sm", onClick: () => setStep(3) }, "Lanjut \u2192"))), step === 3 && /* @__PURE__ */ React17.createElement("div", { className: "rdb-wizard-section" }, /* @__PURE__ */ React17.createElement("div", { className: "rdb-wizard-step-title" }, /* @__PURE__ */ React17.createElement("span", { className: "rdb-wizard-step-num" }, "3"), /* @__PURE__ */ React17.createElement("span", { className: "rdb-h3", style: { margin: 0 } }, "Widget Config & Rangkaian Akhir")), /* @__PURE__ */ React17.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__ */ React17.createElement("code", { className: "rdb-wizard-code-inline" }, "createDashboardConfig()"), " untuk mengemas semuanya jadi 1 objek:"), /* @__PURE__ */ React17.createElement("pre", { className: "rdb-wizard-code" }, `// src/pages/MyDashboard.jsx
-import { supabase } from "../lib/supabaseClient";
-import {
-  ReusableDashboardView,
-  useReusableDashboard,
-  createDashboardConfig,
-} from "@rozaqi02/reusable-dashboard";
+}`;
+  const widgetConfig = `// src/config/myDashboardConfig.js
+// AUTO-GENERATED oleh Setup Wizard @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 },
+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: "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: "trend",  type: "dailyArea", label: "dailyTrends",        icon: "BarChart3" },
       { id: "status", type: "statusPie", label: "statusDistribution", icon: "PieChart" },
     ],
     table: {
-      id: "recent", label: "recentBookings", icon: "Calendar",
+      id: "recentTx", 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",
+        { 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.
 
-// 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",
-});
+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);
 
-// 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)",
+// 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", cancelled: "Batal" })[s] || s,
+    ({ "${confirmed}": "Selesai", "${pending}": "Proses" })[s] || (s || "-"),
   formatAudienceLabel: v => v || "-",
 };
 
-// 4. Render \u2014 selesai!
-export default function MyDashboard() {
-  const state = useReusableDashboard({ ...dashConfig, labels });
+// 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={dashConfig.config}
+      config={dashboardConfig.config}
       labels={labels}
       loading={state.loading}
       error={state.error}
@@ -2119,11 +2135,427 @@ export default function MyDashboard() {
       onResetFilters={state.resetFilters}
       onRefresh={state.refresh}
       data={state.data}
-      dateLocale={dashConfig.dateLocale}
+      dateLocale={dashboardConfig.dateLocale}
       liveUpdateEnabled={state.liveUpdateEnabled}
+      supabase={supabase}
+      dashboardConfig={dashboardConfig}
     />
   );
-}`), /* @__PURE__ */ React17.createElement("div", { className: "rdb-wizard-tip" }, "\u2705 ", /* @__PURE__ */ React17.createElement("strong", null, "Selesai!"), " Jalankan ", /* @__PURE__ */ React17.createElement("code", { className: "rdb-wizard-code-inline" }, "npm start"), " dan buka halaman dashboard. Wizard ini tidak akan muncul lagi setelah konfigurasi valid."), /* @__PURE__ */ React17.createElement("div", { style: { display: "flex", gap: 8, justifyContent: "flex-end", marginTop: 16 } }, /* @__PURE__ */ React17.createElement("button", { type: "button", className: "rdb-btn rdb-btn-secondary rdb-btn-sm", onClick: () => setStep(2) }, "\u2190 Kembali"), /* @__PURE__ */ React17.createElement("button", { type: "button", className: "rdb-btn rdb-btn-primary rdb-btn-sm", onClick: handleDismiss }, "Tutup & lanjutkan \u2713"))))));
+}`;
+  return { dataSource, adapter, widgetConfig, dashboard };
+}
+function SetupWizard({ issues = [], onDismiss, supabase }) {
+  const [dismissed, setDismissed] = useState6(false);
+  const [step, setStep] = useState6(0);
+  const [detecting, setDetecting] = useState6(true);
+  const [tables, setTables] = useState6([]);
+  const [columns, setColumns] = useState6({});
+  const [supabaseOk, setSupabaseOk] = useState6(false);
+  const [detectionDone, setDetectionDone] = useState6(false);
+  const [userHasDashboard, setUserHasDashboard] = useState6(null);
+  const [selectedTable, setSelectedTable] = useState6("");
+  const [colDate, setColDate] = useState6("");
+  const [colStatus, setColStatus] = useState6("");
+  const [colTotal, setColTotal] = useState6("");
+  const [colCustomer, setColCustomer] = useState6("");
+  const [colItem, setColItem] = useState6("");
+  const [confirmedVal, setConfirmedVal] = useState6("confirmed");
+  const [pendingVal, setPendingVal] = useState6("pending");
+  const [dashTitle, setDashTitle] = useState6("Dashboard");
+  const [loadingColumns, setLoadingColumns] = useState6(false);
+  const [generatedCode, setGeneratedCode] = useState6(null);
+  const [activeCodeTab, setActiveCodeTab] = useState6("dataSource");
+  const [copied, setCopied] = useState6("");
+  useEffect3(() => {
+    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 = useCallback5(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__ */ React17.createElement(
+    "div",
+    {
+      className: "rdb-wizard-overlay",
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-label": "Setup Wizard @rozaqi02/reusable-dashboard"
+    },
+    /* @__PURE__ */ React17.createElement("div", { className: "rdb-wizard-modal" }, /* @__PURE__ */ React17.createElement("div", { className: "rdb-wizard-header" }, /* @__PURE__ */ React17.createElement("div", { className: "rdb-wizard-header-title" }, /* @__PURE__ */ React17.createElement("span", { className: "rdb-wizard-logo" }, "\u{1F6E0}\uFE0F"), /* @__PURE__ */ React17.createElement("div", null, /* @__PURE__ */ React17.createElement("div", { className: "rdb-h2", style: { margin: 0 } }, "Setup Dashboard"), /* @__PURE__ */ React17.createElement("div", { className: "rdb-caption" }, detecting ? "Mendeteksi kondisi project\u2026" : supabaseOk ? `Supabase tersambung \xB7 ${tables.length} tabel ditemukan` : "Panduan konfigurasi @rozaqi02/reusable-dashboard"))), /* @__PURE__ */ React17.createElement(
+      "button",
+      {
+        type: "button",
+        className: "rdb-wizard-close",
+        onClick: handleDismiss,
+        title: "Tutup"
+      },
+      "\u2715"
+    )), /* @__PURE__ */ React17.createElement("div", { className: "rdb-wizard-steps" }, stepLabels.map((label, i) => /* @__PURE__ */ React17.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__ */ React17.createElement("span", null, step > i ? "\u2705" : i + 1, "."),
+      /* @__PURE__ */ React17.createElement("span", null, label)
+    ))), /* @__PURE__ */ React17.createElement("div", { className: "rdb-wizard-body" }, /* @__PURE__ */ React17.createElement("div", { className: "rdb-wizard-section" }, step === 0 && /* @__PURE__ */ React17.createElement(React17.Fragment, null, issues.length > 0 && /* @__PURE__ */ React17.createElement("div", { className: "rdb-wizard-issues", style: { marginBottom: 12 } }, /* @__PURE__ */ React17.createElement("div", { className: "rdb-caption", style: { fontWeight: 600, marginBottom: 6 } }, "Konfigurasi belum lengkap:"), issues.map((iss, i) => /* @__PURE__ */ React17.createElement("div", { key: i, className: "rdb-wizard-issue-item" }, /* @__PURE__ */ React17.createElement("span", null, "\u274C"), /* @__PURE__ */ React17.createElement("span", { className: "rdb-body" }, iss)))), /* @__PURE__ */ React17.createElement("div", { className: "rdb-wizard-flow", style: { marginBottom: 12 } }, /* @__PURE__ */ React17.createElement("div", { className: "rdb-caption", style: { fontWeight: 600, marginBottom: 10 } }, "\u{1F50D} Hasil deteksi otomatis:"), detecting ? /* @__PURE__ */ React17.createElement("div", { className: "rdb-body", style: { color: "var(--rdb-text-muted)" } }, "Mendeteksi\u2026") : /* @__PURE__ */ React17.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 8 } }, /* @__PURE__ */ React17.createElement("div", { className: "rdb-wizard-issue-item" }, /* @__PURE__ */ React17.createElement("span", null, supabaseOk ? "\u2705" : "\u274C"), /* @__PURE__ */ React17.createElement("span", { className: "rdb-body" }, "Supabase ", supabaseOk ? "tersambung" : "tidak tersambung \u2014 pastikan supabaseClient.js sudah dikonfigurasi dan prop supabase dikirim ke ReusableDashboardView")), supabaseOk && /* @__PURE__ */ React17.createElement("div", { className: "rdb-wizard-issue-item" }, /* @__PURE__ */ React17.createElement("span", null, tables.length > 0 ? "\u2705" : "\u26A0\uFE0F"), /* @__PURE__ */ React17.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__ */ React17.createElement("div", { className: "rdb-wizard-issue-item" }, /* @__PURE__ */ React17.createElement("span", null, "\u2705"), /* @__PURE__ */ React17.createElement("span", { className: "rdb-body" }, "Tabel cocok dengan preset ", /* @__PURE__ */ React17.createElement("strong", null, PRESET_SIGNATURES[detectedPreset].name))))), !supabaseOk && detectionDone && /* @__PURE__ */ React17.createElement("div", { className: "rdb-wizard-alert", style: { marginBottom: 12 } }, /* @__PURE__ */ React17.createElement("span", { className: "rdb-wizard-alert-icon" }, "\u2139\uFE0F"), /* @__PURE__ */ React17.createElement("div", null, /* @__PURE__ */ React17.createElement("div", { className: "rdb-body", style: { fontWeight: 600 } }, "Aktifkan koneksi Supabase"), /* @__PURE__ */ React17.createElement("div", { className: "rdb-caption", style: { marginTop: 4 } }, "Tambahkan prop ke ReusableDashboardView:", " ", /* @__PURE__ */ React17.createElement("code", { className: "rdb-wizard-code-inline" }, "supabase=", "{supabase}")))), /* @__PURE__ */ React17.createElement("div", { style: { display: "flex", gap: 8, justifyContent: "flex-end" } }, /* @__PURE__ */ React17.createElement(
+      "button",
+      {
+        type: "button",
+        className: "rdb-btn rdb-btn-secondary rdb-btn-sm",
+        onClick: handleDismiss
+      },
+      "Lanjutkan tanpa wizard"
+    ), supabaseOk && /* @__PURE__ */ React17.createElement(
+      "button",
+      {
+        type: "button",
+        className: "rdb-btn rdb-btn-primary rdb-btn-sm",
+        onClick: () => setStep(1)
+      },
+      "Lanjut \u2192 Pilih Tabel"
+    ))), step === 1 && /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement("div", { className: "rdb-wizard-step-title" }, /* @__PURE__ */ React17.createElement("span", { className: "rdb-wizard-step-num" }, "2"), /* @__PURE__ */ React17.createElement("span", { className: "rdb-h3", style: { margin: 0 } }, "Pilih Tabel Transaksi")), /* @__PURE__ */ React17.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__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement("div", { className: "rdb-caption", style: { fontWeight: 600, marginBottom: 8 } }, "Tabel yang ditemukan:"), /* @__PURE__ */ React17.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 6, marginBottom: 16 } }, tables.map((tbl) => /* @__PURE__ */ React17.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__ */ React17.createElement("div", { style: { marginBottom: 16 } }, /* @__PURE__ */ React17.createElement("div", { className: "rdb-wizard-alert", style: { marginBottom: 12 } }, /* @__PURE__ */ React17.createElement("span", { className: "rdb-wizard-alert-icon" }, "\u2139\uFE0F"), /* @__PURE__ */ React17.createElement("div", null, /* @__PURE__ */ React17.createElement("div", { className: "rdb-body", style: { fontWeight: 600 } }, "Daftar tabel tidak bisa terbaca otomatis"), /* @__PURE__ */ React17.createElement("div", { className: "rdb-caption", style: { marginTop: 4 } }, "Ini normal \u2014 Supabase memblokir akses ke ", /* @__PURE__ */ React17.createElement("code", null, "information_schema"), " via API publik. Ketik nama tabel secara manual di bawah."))), /* @__PURE__ */ React17.createElement("label", { className: "rdb-label" }, "Nama tabel transaksi kamu"), /* @__PURE__ */ React17.createElement("div", { style: { display: "flex", gap: 8 } }, /* @__PURE__ */ React17.createElement(
+      "input",
+      {
+        className: "rdb-input",
+        value: selectedTable,
+        onChange: (e) => setSelectedTable(e.target.value),
+        placeholder: "cth: orders, transaksi, bookings, penjualan",
+        style: { maxWidth: 320 }
+      }
+    ), /* @__PURE__ */ React17.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__ */ React17.createElement("div", { className: "rdb-caption", style: { color: "var(--rdb-text-muted)", marginBottom: 12 } }, "Atau ketik nama tabel secara manual:", /* @__PURE__ */ React17.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__ */ React17.createElement("div", { className: "rdb-wizard-tip", style: { marginBottom: 12 } }, "Tabel ", /* @__PURE__ */ React17.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__ */ React17.createElement("div", { style: { marginBottom: 12 } }, /* @__PURE__ */ React17.createElement("label", { className: "rdb-label" }, "Judul dashboard (opsional)"), /* @__PURE__ */ React17.createElement(
+      "input",
+      {
+        className: "rdb-input",
+        value: dashTitle,
+        style: { maxWidth: 280 },
+        onChange: (e) => setDashTitle(e.target.value),
+        placeholder: "cth: Dashboard Laundry Bersih"
+      }
+    )), /* @__PURE__ */ React17.createElement("div", { style: { display: "flex", gap: 8, justifyContent: "flex-end" } }, /* @__PURE__ */ React17.createElement(
+      "button",
+      {
+        type: "button",
+        className: "rdb-btn rdb-btn-secondary rdb-btn-sm",
+        onClick: () => setStep(0)
+      },
+      "\u2190 Kembali"
+    ), /* @__PURE__ */ React17.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__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement("div", { className: "rdb-wizard-step-title" }, /* @__PURE__ */ React17.createElement("span", { className: "rdb-wizard-step-num" }, "3"), /* @__PURE__ */ React17.createElement("span", { className: "rdb-h3", style: { margin: 0 } }, "Mapping Kolom \u2014 Tabel: ", /* @__PURE__ */ React17.createElement("code", { style: { fontSize: "0.9rem" } }, selectedTable))), /* @__PURE__ */ React17.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__ */ React17.createElement("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, marginBottom: 16 } }, /* @__PURE__ */ React17.createElement("div", null, /* @__PURE__ */ React17.createElement("label", { className: "rdb-label" }, "Kolom Tanggal ", /* @__PURE__ */ React17.createElement("span", { style: { color: "red" } }, "*")), colNames.length > 0 ? /* @__PURE__ */ React17.createElement(
+      "select",
+      {
+        className: "rdb-select",
+        value: colDate,
+        onChange: (e) => setColDate(e.target.value)
+      },
+      /* @__PURE__ */ React17.createElement("option", { value: "" }, "\u2014 pilih kolom \u2014"),
+      colNames.map((c) => /* @__PURE__ */ React17.createElement("option", { key: c, value: c }, c))
+    ) : /* @__PURE__ */ React17.createElement(
+      "input",
+      {
+        className: "rdb-input",
+        value: colDate,
+        onChange: (e) => setColDate(e.target.value),
+        placeholder: "cth: created_at"
+      }
+    ), /* @__PURE__ */ React17.createElement("div", { className: "rdb-caption", style: { marginTop: 2 } }, "Tipe timestamp/date")), /* @__PURE__ */ React17.createElement("div", null, /* @__PURE__ */ React17.createElement("label", { className: "rdb-label" }, "Kolom Status ", /* @__PURE__ */ React17.createElement("span", { style: { color: "red" } }, "*")), colNames.length > 0 ? /* @__PURE__ */ React17.createElement(
+      "select",
+      {
+        className: "rdb-select",
+        value: colStatus,
+        onChange: (e) => setColStatus(e.target.value)
+      },
+      /* @__PURE__ */ React17.createElement("option", { value: "" }, "\u2014 pilih kolom \u2014"),
+      colNames.map((c) => /* @__PURE__ */ React17.createElement("option", { key: c, value: c }, c))
+    ) : /* @__PURE__ */ React17.createElement(
+      "input",
+      {
+        className: "rdb-input",
+        value: colStatus,
+        onChange: (e) => setColStatus(e.target.value),
+        placeholder: "cth: status"
+      }
+    ), /* @__PURE__ */ React17.createElement("div", { className: "rdb-caption", style: { marginTop: 2 } }, "Nilai selesai/pending")), /* @__PURE__ */ React17.createElement("div", null, /* @__PURE__ */ React17.createElement("label", { className: "rdb-label" }, "Kolom Total (uang) ", /* @__PURE__ */ React17.createElement("span", { style: { color: "red" } }, "*")), colNames.length > 0 ? /* @__PURE__ */ React17.createElement(
+      "select",
+      {
+        className: "rdb-select",
+        value: colTotal,
+        onChange: (e) => setColTotal(e.target.value)
+      },
+      /* @__PURE__ */ React17.createElement("option", { value: "" }, "\u2014 pilih kolom \u2014"),
+      colNames.map((c) => /* @__PURE__ */ React17.createElement("option", { key: c, value: c }, c))
+    ) : /* @__PURE__ */ React17.createElement(
+      "input",
+      {
+        className: "rdb-input",
+        value: colTotal,
+        onChange: (e) => setColTotal(e.target.value),
+        placeholder: "cth: total_amount"
+      }
+    ), /* @__PURE__ */ React17.createElement("div", { className: "rdb-caption", style: { marginTop: 2 } }, "Integer Rupiah")), /* @__PURE__ */ React17.createElement("div", null, /* @__PURE__ */ React17.createElement("label", { className: "rdb-label" }, "Kolom Nama Pelanggan"), colNames.length > 0 ? /* @__PURE__ */ React17.createElement(
+      "select",
+      {
+        className: "rdb-select",
+        value: colCustomer,
+        onChange: (e) => setColCustomer(e.target.value)
+      },
+      /* @__PURE__ */ React17.createElement("option", { value: "" }, "\u2014 opsional \u2014"),
+      colNames.map((c) => /* @__PURE__ */ React17.createElement("option", { key: c, value: c }, c))
+    ) : /* @__PURE__ */ React17.createElement(
+      "input",
+      {
+        className: "rdb-input",
+        value: colCustomer,
+        onChange: (e) => setColCustomer(e.target.value),
+        placeholder: "cth: customer_name (opsional)"
+      }
+    )), /* @__PURE__ */ React17.createElement("div", null, /* @__PURE__ */ React17.createElement("label", { className: "rdb-label" }, "Kolom Nama Item/Layanan"), colNames.length > 0 ? /* @__PURE__ */ React17.createElement(
+      "select",
+      {
+        className: "rdb-select",
+        value: colItem,
+        onChange: (e) => setColItem(e.target.value)
+      },
+      /* @__PURE__ */ React17.createElement("option", { value: "" }, "\u2014 opsional \u2014"),
+      colNames.map((c) => /* @__PURE__ */ React17.createElement("option", { key: c, value: c }, c))
+    ) : /* @__PURE__ */ React17.createElement(
+      "input",
+      {
+        className: "rdb-input",
+        value: colItem,
+        onChange: (e) => setColItem(e.target.value),
+        placeholder: "cth: service_type (opsional)"
+      }
+    ))), /* @__PURE__ */ React17.createElement("div", { className: "rdb-wizard-flow", style: { marginBottom: 16 } }, /* @__PURE__ */ React17.createElement("div", { className: "rdb-caption", style: { fontWeight: 600, marginBottom: 8 } }, "Nilai status di tabel kamu:"), /* @__PURE__ */ React17.createElement("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 } }, /* @__PURE__ */ React17.createElement("div", null, /* @__PURE__ */ React17.createElement("label", { className: "rdb-label" }, 'Nilai "Selesai/Confirmed"'), /* @__PURE__ */ React17.createElement(
+      "input",
+      {
+        className: "rdb-input",
+        value: confirmedVal,
+        onChange: (e) => setConfirmedVal(e.target.value),
+        placeholder: "cth: confirmed, selesai, lunas"
+      }
+    )), /* @__PURE__ */ React17.createElement("div", null, /* @__PURE__ */ React17.createElement("label", { className: "rdb-label" }, 'Nilai "Pending/Proses"'), /* @__PURE__ */ React17.createElement(
+      "input",
+      {
+        className: "rdb-input",
+        value: pendingVal,
+        onChange: (e) => setPendingVal(e.target.value),
+        placeholder: "cth: pending, proses, menunggu"
+      }
+    )))), !mappingValid && /* @__PURE__ */ React17.createElement("div", { className: "rdb-error-banner", style: { marginBottom: 12 } }, "Pilih minimal kolom Tanggal, Status, dan Total untuk generate kode."), /* @__PURE__ */ React17.createElement("div", { style: { display: "flex", gap: 8, justifyContent: "flex-end" } }, /* @__PURE__ */ React17.createElement(
+      "button",
+      {
+        type: "button",
+        className: "rdb-btn rdb-btn-secondary rdb-btn-sm",
+        onClick: () => setStep(1)
+      },
+      "\u2190 Kembali"
+    ), /* @__PURE__ */ React17.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__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement("div", { className: "rdb-wizard-step-title" }, /* @__PURE__ */ React17.createElement("span", { className: "rdb-wizard-step-num" }, "\u2705"), /* @__PURE__ */ React17.createElement("span", { className: "rdb-h3", style: { margin: 0 } }, "Kode Siap Pakai")), /* @__PURE__ */ React17.createElement("div", { className: "rdb-wizard-tip", style: { marginBottom: 16 } }, /* @__PURE__ */ React17.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__ */ React17.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__ */ React17.createElement("div", { key: i, className: "rdb-wizard-issue-item" }, /* @__PURE__ */ React17.createElement("span", { style: { color: "var(--rdb-blue-500)", fontWeight: 700 } }, i + 1, "."), /* @__PURE__ */ React17.createElement("span", { className: "rdb-body" }, "Simpan ", /* @__PURE__ */ React17.createElement("code", { className: "rdb-wizard-code-inline" }, file), " ke", " ", /* @__PURE__ */ React17.createElement("code", { className: "rdb-wizard-code-inline" }, path), " \u2014 ", desc))), /* @__PURE__ */ React17.createElement("div", { className: "rdb-wizard-issue-item" }, /* @__PURE__ */ React17.createElement("span", { style: { color: "var(--rdb-blue-500)", fontWeight: 700 } }, "5."), /* @__PURE__ */ React17.createElement("span", { className: "rdb-body" }, "Import CSS di ", /* @__PURE__ */ React17.createElement("code", { className: "rdb-wizard-code-inline" }, "src/index.css"), ":", " ", /* @__PURE__ */ React17.createElement("code", { className: "rdb-wizard-code-inline" }, '@import "../node_modules/@rozaqi02/reusable-dashboard/dist/index.css";')))), /* @__PURE__ */ React17.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__ */ React17.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__ */ React17.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React17.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__ */ React17.createElement("pre", { className: "rdb-wizard-code", style: { maxHeight: 320, overflow: "auto" } }, generatedCode[activeCodeTab])), /* @__PURE__ */ React17.createElement("div", { className: "rdb-wizard-tip", style: { marginTop: 12 } }, "Setelah semua file tersimpan dan dev server direstart, wizard tidak akan muncul lagi."), /* @__PURE__ */ React17.createElement("div", { style: { display: "flex", gap: 8, justifyContent: "flex-end", marginTop: 12 } }, /* @__PURE__ */ React17.createElement(
+      "button",
+      {
+        type: "button",
+        className: "rdb-btn rdb-btn-secondary rdb-btn-sm",
+        onClick: () => setStep(2)
+      },
+      "\u2190 Edit mapping"
+    ), /* @__PURE__ */ React17.createElement(
+      "button",
+      {
+        type: "button",
+        className: "rdb-btn rdb-btn-primary rdb-btn-sm",
+        onClick: handleDismiss
+      },
+      "Tutup wizard \u2713"
+    ))))))
+  );
 }
 SetupWizard.propTypes = {
   issues: PropTypes17.arrayOf(PropTypes17.string),