@rozaqi02/reusable-dashboard 1.1.3 → 1.1.5

package/dist/index.js

@@ -1861,269 +1861,660 @@ 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();
-  }
-  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) {
+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 == null ? void 0 : tables.length)) return null;
+  const s = new Set(tables);
+  if (PRESET_SIGNATURES.cidika.tables.every((t) => s.has(t))) return "cidika";
+  if (PRESET_SIGNATURES.tokoSepatu.tables.every((t) => s.has(t))) return "tokoSepatu";
+  return null;
+}
+var SQL_GRANT_SCHEMA = `GRANT SELECT ON information_schema.tables  TO anon;
+GRANT SELECT ON information_schema.columns TO anon;`;
+var sqlRls = (tbl) => `-- Pilih salah satu sesuai kebutuhan (jalankan di Supabase SQL Editor):
+
+-- Opsi 1: Untuk DEVELOPMENT \u2014 nonaktifkan RLS (paling cepat)
+ALTER TABLE public.${tbl} DISABLE ROW LEVEL SECURITY;
+
+-- Opsi 2: Untuk PRODUCTION \u2014 izinkan semua orang baca
+ALTER TABLE public.${tbl} ENABLE ROW LEVEL SECURITY;
+CREATE POLICY "dashboard_read" ON public.${tbl}
+  FOR SELECT TO anon USING (true);
+
+-- Opsi 3: Untuk PRODUCTION \u2014 hanya user yang login
+ALTER TABLE public.${tbl} ENABLE ROW LEVEL SECURITY;
+CREATE POLICY "dashboard_auth" ON public.${tbl}
+  FOR SELECT TO authenticated USING (true);`;
+function generateCode({
+  tableName,
+  colDate,
+  colStatus,
+  colTotal,
+  colCustomer,
+  colItem,
+  dashTitle,
+  confirmedValue,
+  pendingValue
+}) {
+  const title = dashTitle || "Dashboard";
+  const confirmed = confirmedValue || "confirmed";
+  const pending = pendingValue || "pending";
+  const custCol = colCustomer || "customer_name";
+  const itemCol = colItem || "-";
+  const totalCol = colTotal || "total";
+  const cols = [
+    "id",
+    colDate,
+    colStatus,
+    totalCol,
+    ...custCol !== "customer_name" ? [custCol] : ["customer_name"],
+    ...itemCol !== "-" ? [itemCol] : []
+  ].filter(Boolean).join(", ");
+  const dataSource = `// src/datasources/myDashboardSource.js
+// AUTO-GENERATED oleh Setup Wizard @rozaqi02/reusable-dashboard
+
+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 allQ = supabase
+        .from("${tableName}")
+        .select("${cols}")
+        .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 recentQ = supabase
+        .from("${tableName}")
+        .select("${cols}")
+        .gte("${colDate}", fromISO)
+        .lte("${colDate}", toISO)
+        .order("${colDate}", { ascending: false })
         .limit(10);
 
+      if (statusScope && statusScope !== "all") {
+        recentQ.eq("${colStatus}", statusScope);
+      }
+
+      const [all, recent] = await Promise.all([allQ, recentQ]);
       return {
-        bookings: orders,   // WAJIB: nama harus "bookings"
-        recent,             // WAJIB: nama harus "recent"
+        bookings: all.data    || [],
+        recent:   recent.data || [],
         packageLocales: [],
         staticCounts: { packages: 0, sections: 0 },
       };
     },
 
-    // Opsional: live update
     subscribeLiveUpdate(onEvent) {
-      const ch = supabase.channel("my-dashboard-live")
+      const ch = supabase.channel("rdb-${tableName}-live")
         .on("postgres_changes",
-          { event: "*", schema: "public", table: "MY_TABLE" }, onEvent)
+            { 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
+
 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, avgRevenue: 0, conversionRate: 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 st  = String(row["${colStatus}"] || "").toLowerCase();
+    const amt = toNumber(row["${totalCol}"]);
+    const dk  = 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;
+    statusMap.set(st, (statusMap.get(st) || 0) + 1);
+    const b = dayMap.get(dk);
+    if (b) {
+      if (st === "${confirmed}") { b.count++;         b.revenue += amt; }
+      if (st === "${pending}")   { b.pendingCount++;                   }
     }
-    if (status === "confirmed") { confirmed++; revenue += amount; }
+    if (st === "${confirmed}") { confirmed++; revenue += amt; }
   });
 
+  const total = (raw.bookings || []).length;
   return {
-    stats: { bookingsConfirm: confirmed, revenueConfirm: revenue },
+    stats: {
+      bookingsConfirm: confirmed,
+      revenueConfirm:  revenue,
+      avgRevenue:      confirmed > 0 ? Math.round(revenue / confirmed) : 0,
+      conversionRate:  total > 0 ? Math.round((confirmed / total) * 100) : 0,
+    },
     charts: {
       dailyTrends: buckets,
       statusDistribution: Array.from(statusMap.entries())
-        .map(([status, count]) => ({
-          status,
-          label: labels?.formatStatusLabel?.(status) || status,
-          count,
-        })),
+        .sort((a, b) => b[1] - a[1])
+        .map(([s, c]) => ({ status: s, count: c, label: labels?.formatStatusLabel?.(s) || s })),
       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["${custCol}"] || "-",
+        packageName:   ${itemCol !== "-" ? `row["${itemCol}"] || "-"` : '"-"'},
         audienceLabel: "-",
-        totalIDR: toNumber(row.total_price),
-        status: String(row.status || "pending").toLowerCase(),
-        statusLabel: labels?.formatStatusLabel?.(row.status) || row.status,
+        totalIDR:      toNumber(row["${totalCol}"]),
+        status:        String(row["${colStatus}"] || "").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: "status", type: "statusPie", label: "statusDistribution", icon: "PieChart" },
+      { id:"trend",  type:"dailyArea", label:"dailyTrends",        icon:"BarChart3" },
+      { id:"status", type:"statusPie", label:"statusDistribution", icon:"PieChart"  },
     ],
     table: {
-      id: "recent", label: "recentBookings", icon: "Calendar",
-      emptyLabel: "noRecentBookings",
+      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",
-          type: "statusBadge", statusAccessor: "status" },
+        { id:"date",     label:"date",     accessor:"createdAt",  type:"date"     },
+        { id:"customer", label:"customer", accessor:"customerName"                },${itemCol !== "-" ? `
+        { 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
 
-// 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";
 
-// 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)",
+// Tiga file hasil generate wizard
+import { myDashboardConfig }                              from "../../config/myDashboardConfig";
+import { createMyDashboardSource }                        from "../../datasources/myDashboardSource";
+import { adaptMyDashboardData, createEmptyMyDashboardData } from "../../adapters/myDashboardAdapter";
+
+const source = createMyDashboardSource(supabase);
+
+const labels = {
+  title: "${title}", 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,
+  formatStatusLabel:  s => ({ "${confirmed}":"Selesai", "${pending}":"Proses" })[s] || s || "-",
   formatAudienceLabel: v => v || "-",
 };
 
-// 4. Render \u2014 selesai!
-export default function MyDashboard() {
-  const state = useReusableDashboard({ ...dashConfig, labels });
+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}
-      labels={labels}
-      loading={state.loading}
-      error={state.error}
-      filters={state.filters}
-      onFilterChange={state.updateFilter}
-      onResetFilters={state.resetFilters}
-      onRefresh={state.refresh}
-      data={state.data}
-      dateLocale={dashConfig.dateLocale}
+      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}
     />
   );
-}`), /* @__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 }) {
+  var _a, _b;
+  const [dismissed, setDismissed] = useState6(false);
+  const [step, setStep] = useState6(0);
+  const [detecting, setDetecting] = useState6(true);
+  const [tables, setTables] = useState6([]);
+  const [columns, setColumns] = useState6({});
+  const [sampleData, setSampleData] = useState6({});
+  const [statusValues, setStatusValues] = useState6({});
+  const [supabaseOk, setSupabaseOk] = useState6(false);
+  const [detectionDone, setDetectionDone] = useState6(false);
+  const [tableBlocked, setTableBlocked] = useState6(false);
+  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("");
+  const [pendingVal, setPendingVal] = useState6("");
+  const [dashTitle, setDashTitle] = useState6("Dashboard");
+  const [loadingCols, setLoadingCols] = useState6(false);
+  const [colsBlocked, setColsBlocked] = useState6(false);
+  const [generatedCode, setGeneratedCode] = useState6(null);
+  const [activeTab, setActiveTab] = useState6("dashboard");
+  const [copied, setCopied] = useState6("");
+  const [showRls, setShowRls] = useState6(false);
+  useEffect3(() => {
+    if (!supabase) {
+      setDetecting(false);
+      setDetectionDone(true);
+      return;
+    }
+    (async () => {
+      try {
+        const { data: d1, error: e1 } = await supabase.from("information_schema.tables").select("table_name").eq("table_schema", "public").eq("table_type", "BASE TABLE").order("table_name");
+        if (!e1 && (d1 == null ? void 0 : d1.length)) {
+          setTables(d1.map((r) => r.table_name));
+          setSupabaseOk(true);
+          return;
+        }
+        const { data: d2, error: e2 } = await supabase.rpc("rdb_get_tables");
+        if (!e2 && Array.isArray(d2)) {
+          setTables(d2.map((r) => typeof r === "string" ? r : r.table_name || r));
+          setSupabaseOk(true);
+          return;
+        }
+        const { error: ping } = await supabase.from("_rdb_").select("*").limit(1);
+        const ok = !ping || ping.code === "42P01" || ping.code === "PGRST116" || (ping.message || "").includes("does not exist");
+        setSupabaseOk(ok);
+        if (ok) setTableBlocked(true);
+      } catch {
+        setSupabaseOk(false);
+      } finally {
+        setDetecting(false);
+        setDetectionDone(true);
+      }
+    })();
+  }, [supabase]);
+  const analyzeTable = useCallback5(async (tbl) => {
+    var _a2;
+    if (!supabase || !tbl) return;
+    if (columns[tbl]) {
+      autoDetect(tbl, columns[tbl]);
+      return;
+    }
+    setLoadingCols(true);
+    setColsBlocked(false);
+    try {
+      let cols = null;
+      const { data: ca, error: ea } = await supabase.from("information_schema.columns").select("column_name, data_type").eq("table_schema", "public").eq("table_name", tbl).order("ordinal_position");
+      if (!ea && (ca == null ? void 0 : ca.length)) cols = ca;
+      if (!cols) {
+        const { data: sb, error: eb } = await supabase.from(tbl).select("*").limit(1);
+        if (!eb && (sb == null ? void 0 : sb.length) > 0)
+          cols = Object.keys(sb[0]).map((k) => ({ column_name: k, data_type: typeof sb[0][k] }));
+      }
+      if (cols) {
+        setColumns((p) => ({ ...p, [tbl]: cols }));
+        autoDetect(tbl, cols);
+      } else {
+        setColsBlocked(true);
+      }
+      const { data: sample2 } = await supabase.from(tbl).select("*").limit(5);
+      if ((sample2 == null ? void 0 : sample2.length) > 0) {
+        setSampleData((p) => ({ ...p, [tbl]: sample2 }));
+        const statusCol = (_a2 = (cols || []).find(
+          (c) => ["status", "state", "kondisi", "order_status"].includes(c.column_name.toLowerCase())
+        )) == null ? void 0 : _a2.column_name;
+        if (statusCol) {
+          const uniqVals = [...new Set(sample2.map((r) => r[statusCol]).filter(Boolean))];
+          setStatusValues((p) => ({ ...p, [tbl]: { [statusCol]: uniqVals } }));
+          const vals = uniqVals.map((v) => String(v).toLowerCase());
+          const cfm = uniqVals.find((v) => ["confirmed", "selesai", "lunas", "paid", "done", "completed", "approve"].includes(String(v).toLowerCase()));
+          const pnd = uniqVals.find((v) => ["pending", "proses", "menunggu", "processing", "waiting", "draft"].includes(String(v).toLowerCase()));
+          if (cfm) setConfirmedVal(String(cfm));
+          if (pnd) setPendingVal(String(pnd));
+        }
+      }
+    } catch {
+      setColsBlocked(true);
+    } finally {
+      setLoadingCols(false);
+    }
+  }, [supabase, columns]);
+  function autoDetect(tbl, cols) {
+    const f = (opts) => {
+      var _a2;
+      return ((_a2 = cols.find((c) => opts.includes(c.column_name.toLowerCase()))) == null ? void 0 : _a2.column_name) || "";
+    };
+    setColDate(f(["created_at", "tanggal", "date", "transaction_date", "order_date", "waktu"]));
+    setColStatus(f(["status", "state", "kondisi", "order_status", "payment_status"]));
+    setColTotal(f(["total", "total_idr", "total_amount", "total_price", "harga_total", "amount", "nominal", "harga", "grand_total"]));
+    setColCustomer(f(["customer_name", "nama_pelanggan", "nama", "name", "client_name", "buyer_name", "pelanggan"]));
+    setColItem(f(["service_type", "item_name", "product_name", "package_name", "layanan", "produk", "jenis", "paket"]));
+  }
+  function copyCode(text, key) {
+    var _a2;
+    (_a2 = navigator.clipboard) == null ? void 0 : _a2.writeText(text).then(() => {
+      setCopied(key);
+      setTimeout(() => setCopied(""), 2200);
+    });
+  }
+  function handleDismiss() {
+    setDismissed(true);
+    onDismiss == null ? void 0 : onDismiss();
+  }
+  function handleGenerate() {
+    if (!selectedTable || !colDate || !colStatus || !colTotal) return;
+    setGeneratedCode(generateCode({
+      tableName: selectedTable.trim(),
+      colDate,
+      colStatus,
+      colTotal,
+      colCustomer: colCustomer || "customer_name",
+      colItem: colItem || "-",
+      dashTitle,
+      confirmedValue: confirmedVal || "confirmed",
+      pendingValue: pendingVal || "pending"
+    }));
+    setStep(3);
+  }
+  if (dismissed) return null;
+  const preset = detectPreset(tables);
+  const tblCols = selectedTable ? columns[selectedTable] || [] : [];
+  const colNames = tblCols.map((c) => c.column_name);
+  const sample = selectedTable ? sampleData[selectedTable] || [] : [];
+  const stVals = selectedTable && colStatus ? ((_a = statusValues[selectedTable]) == null ? void 0 : _a[colStatus]) || [] : [];
+  const canGen = selectedTable.trim() && colDate && colStatus && colTotal;
+  const TAB_INFO = {
+    dashboard: { label: "Dashboard.jsx", path: "src/pages/admin/Dashboard.jsx" },
+    dataSource: { label: "myDashboardSource.js", path: "src/datasources/myDashboardSource.js" },
+    adapter: { label: "myDashboardAdapter.js", path: "src/adapters/myDashboardAdapter.js" },
+    widgetConfig: { label: "myDashboardConfig.js", path: "src/config/myDashboardConfig.js" }
+  };
+  function PreviewTable({ rows, cols: previewCols }) {
+    if (!(rows == null ? void 0 : rows.length) || !(previewCols == null ? void 0 : previewCols.length)) return null;
+    const validCols = previewCols.filter((c) => {
+      var _a2;
+      return c && ((_a2 = rows[0]) == null ? void 0 : _a2[c]) !== void 0;
+    });
+    if (!validCols.length) return null;
+    return /* @__PURE__ */ React17.createElement("div", { className: "rdb-table-wrapper", style: { marginTop: 8, fontSize: "0.75rem" } }, /* @__PURE__ */ React17.createElement("table", { className: "rdb-table", style: { fontSize: "0.75rem" } }, /* @__PURE__ */ React17.createElement("thead", null, /* @__PURE__ */ React17.createElement("tr", null, validCols.map((c) => /* @__PURE__ */ React17.createElement("th", { key: c, style: { padding: "4px 8px", fontSize: "0.7rem" } }, c)))), /* @__PURE__ */ React17.createElement("tbody", null, rows.slice(0, 3).map((row, i) => /* @__PURE__ */ React17.createElement("tr", { key: i }, validCols.map((c) => /* @__PURE__ */ React17.createElement("td", { key: c, style: { padding: "3px 8px" } }, String(row[c] ?? "-").slice(0, 30))))))), /* @__PURE__ */ React17.createElement("div", { className: "rdb-caption", style: { marginTop: 4, color: "var(--rdb-text-muted)" } }, "Preview 3 baris data nyata dari database kamu"));
+  }
+  return /* @__PURE__ */ React17.createElement("div", { className: "rdb-wizard-overlay", role: "dialog", "aria-modal": "true" }, /* @__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 Wizard"), /* @__PURE__ */ React17.createElement("div", { className: "rdb-caption" }, detecting ? "Menghubungi Supabase\u2026" : supabaseOk ? tables.length > 0 ? `\u2705 Tersambung \xB7 ${tables.length} tabel ditemukan` : "\u2705 Tersambung \xB7 ketik nama tabel di Step 2" : "Ikuti langkah di bawah untuk menghubungkan Supabase"))), /* @__PURE__ */ React17.createElement("button", { type: "button", className: "rdb-wizard-close", onClick: handleDismiss }, "\u2715")), /* @__PURE__ */ React17.createElement("div", { className: "rdb-wizard-steps" }, ["1. Koneksi", "2. Pilih Tabel", "3. Konfirmasi", "4. Kode Jadi"].map((lbl, i) => /* @__PURE__ */ React17.createElement(
+    "button",
+    {
+      key: i,
+      type: "button",
+      className: `rdb-wizard-step-btn ${step === i ? "rdb-wizard-step-active" : ""}`,
+      onClick: () => setStep(i)
+    },
+    step > i ? "\u2705 " : "",
+    lbl
+  ))), /* @__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 yang 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: 16 } }, /* @__PURE__ */ React17.createElement("div", { className: "rdb-caption", style: { fontWeight: 600, marginBottom: 10 } }, "\u{1F50D} Status koneksi Supabase:"), 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" }, supabaseOk ? "Supabase tersambung" : "Tidak tersambung \u2014 tambahkan prop supabase={supabase} 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 ? `Wizard membaca ${tables.length} tabel langsung dari database` : "Daftar tabel belum bisa terbaca (butuh izin \u2014 lihat SQL di bawah)")))), supabaseOk && tableBlocked && /* @__PURE__ */ React17.createElement("div", { style: { marginBottom: 16 } }, /* @__PURE__ */ React17.createElement("div", { className: "rdb-wizard-alert", style: { marginBottom: 8 } }, /* @__PURE__ */ React17.createElement("span", { className: "rdb-wizard-alert-icon" }, "\u{1F511}"), /* @__PURE__ */ React17.createElement("div", null, /* @__PURE__ */ React17.createElement("div", { className: "rdb-body", style: { fontWeight: 600 } }, "Agar wizard bisa baca daftar tabel otomatis"), /* @__PURE__ */ React17.createElement("div", { className: "rdb-caption", style: { marginTop: 4 } }, "Jalankan SQL ini ", /* @__PURE__ */ React17.createElement("strong", null, "sekali"), " di Supabase SQL Editor, lalu refresh halaman. Atau lewati dan ketik nama tabel manual di Step 2."))), /* @__PURE__ */ React17.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React17.createElement(
+    "button",
+    {
+      type: "button",
+      className: "rdb-btn rdb-btn-secondary rdb-btn-sm",
+      style: { position: "absolute", top: 6, right: 6 },
+      onClick: () => copyCode(SQL_GRANT_SCHEMA, "grant")
+    },
+    copied === "grant" ? "\u2705" : "\u{1F4CB}",
+    " Salin"
+  ), /* @__PURE__ */ React17.createElement("pre", { className: "rdb-wizard-code", style: { fontSize: "0.72rem" } }, SQL_GRANT_SCHEMA))), supabaseOk && /* @__PURE__ */ React17.createElement("div", { style: { marginBottom: 16 } }, /* @__PURE__ */ React17.createElement(
+    "button",
+    {
+      type: "button",
+      className: "rdb-btn rdb-btn-secondary rdb-btn-sm",
+      onClick: () => setShowRls((r) => !r)
+    },
+    showRls ? "\u25B2 Sembunyikan" : "\u25BC Lihat",
+    " panduan RLS \u2014 agar data tabel bisa terbaca dashboard"
+  ), showRls && /* @__PURE__ */ React17.createElement("div", { className: "rdb-wizard-flow", style: { marginTop: 10 } }, /* @__PURE__ */ React17.createElement("div", { className: "rdb-body", style: { fontWeight: 600, marginBottom: 6 } }, "Apa itu RLS?"), /* @__PURE__ */ React17.createElement("div", { className: "rdb-body", style: { color: "var(--rdb-text-muted)", marginBottom: 10 } }, "Row Level Security (RLS) adalah fitur Supabase yang mengontrol siapa yang boleh membaca data. Jika aktif tanpa aturan, dashboard tidak bisa mengambil data apapun."), /* @__PURE__ */ React17.createElement("div", { className: "rdb-caption", style: { fontWeight: 600, marginBottom: 6 } }, "SQL \u2014 ganti ", /* @__PURE__ */ React17.createElement("code", null, "nama_tabel"), " dengan nama tabelmu:"), /* @__PURE__ */ React17.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React17.createElement(
+    "button",
+    {
+      type: "button",
+      className: "rdb-btn rdb-btn-secondary rdb-btn-sm",
+      style: { position: "absolute", top: 6, right: 6 },
+      onClick: () => copyCode(sqlRls("nama_tabel"), "rls")
+    },
+    copied === "rls" ? "\u2705" : "\u{1F4CB}",
+    " Salin"
+  ), /* @__PURE__ */ React17.createElement("pre", { className: "rdb-wizard-code", style: { fontSize: "0.7rem" } }, sqlRls("nama_tabel"))), /* @__PURE__ */ React17.createElement("div", { className: "rdb-caption", style: { marginTop: 8, color: "var(--rdb-text-muted)" } }, "\u{1F4A1} ", /* @__PURE__ */ React17.createElement("strong", null, "Development:"), " pakai Opsi 1.", /* @__PURE__ */ React17.createElement("strong", null, " Production:"), " pakai Opsi 2 atau 3."))), /* @__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 } }, "Klik tabel yang berisi data transaksi bisnis kamu. Wizard akan", /* @__PURE__ */ React17.createElement("strong", null, " otomatis membaca kolom dan sample data"), " dari tabel tersebut."), tables.length > 0 && /* @__PURE__ */ React17.createElement("div", { style: { display: "flex", flexWrap: "wrap", gap: 6, marginBottom: 16 } }, tables.map((tbl) => {
+    var _a2, _b2;
+    const isSelected = selectedTable === tbl;
+    const hasSample = ((_a2 = sampleData[tbl]) == null ? void 0 : _a2.length) > 0;
+    const hasColumns = ((_b2 = columns[tbl]) == null ? void 0 : _b2.length) > 0;
+    return /* @__PURE__ */ React17.createElement(
+      "button",
+      {
+        key: tbl,
+        type: "button",
+        onClick: () => {
+          setSelectedTable(tbl);
+          analyzeTable(tbl);
+        },
+        className: `rdb-btn rdb-btn-sm ${isSelected ? "rdb-btn-primary" : "rdb-btn-secondary"}`,
+        style: { fontFamily: "monospace", fontSize: "0.82rem" }
+      },
+      isSelected ? "\u2705 " : "",
+      tbl,
+      isSelected && hasColumns ? ` (${columns[tbl].length} kolom)` : ""
+    );
+  })), /* @__PURE__ */ React17.createElement("div", { style: { marginBottom: 16 } }, /* @__PURE__ */ React17.createElement("label", { className: "rdb-label" }, tables.length > 0 ? "Atau ketik nama tabel lain:" : "Ketik nama tabel 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.replace(/[,\s].*/, "")),
+      placeholder: "cth: orders / transaksi / bookings",
+      style: { maxWidth: 280 }
+    }
+  ), /* @__PURE__ */ React17.createElement(
+    "button",
+    {
+      type: "button",
+      className: "rdb-btn rdb-btn-secondary rdb-btn-sm",
+      disabled: !selectedTable || loadingCols,
+      onClick: () => analyzeTable(selectedTable)
+    },
+    loadingCols ? "Menganalisis\u2026" : "Analisis tabel"
+  ))), selectedTable && !loadingCols && /* @__PURE__ */ React17.createElement(React17.Fragment, null, colNames.length > 0 && /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement("div", { className: "rdb-wizard-tip", style: { marginBottom: 8 } }, "\u2705 ", /* @__PURE__ */ React17.createElement("strong", null, colNames.length, " kolom"), " ditemukan.", sample.length > 0 && ` ${sample.length} baris sample data terbaca.`, " ", "Kolom sudah otomatis diisi di step berikutnya."), sample.length > 0 && /* @__PURE__ */ React17.createElement(
+    PreviewTable,
+    {
+      rows: sample,
+      cols: [colDate, colStatus, colTotal, colCustomer].filter(Boolean)
+    }
+  )), colsBlocked && /* @__PURE__ */ React17.createElement("div", { className: "rdb-wizard-alert" }, /* @__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 } }, "Kolom tidak bisa terbaca otomatis"), /* @__PURE__ */ React17.createElement("div", { className: "rdb-caption", style: { marginTop: 4 } }, "Kemungkinan RLS aktif. Kamu tetap bisa lanjut dan ketik nama kolom manual di step berikutnya.")))), /* @__PURE__ */ React17.createElement("div", { style: { marginBottom: 12, marginTop: 12 } }, /* @__PURE__ */ React17.createElement("label", { className: "rdb-label" }, "Judul dashboard:"), /* @__PURE__ */ React17.createElement(
+    "input",
+    {
+      className: "rdb-input",
+      value: dashTitle,
+      style: { maxWidth: 280 },
+      onChange: (e) => setDashTitle(e.target.value),
+      placeholder: "cth: Dashboard Laundry / Dashboard Klinik"
+    }
+  )), /* @__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 || loadingCols,
+      onClick: () => setStep(2)
+    },
+    "Lanjut \u2192 Konfirmasi 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 } }, "Konfirmasi \u2014 Tabel: ", /* @__PURE__ */ React17.createElement("code", { style: { fontSize: "0.9em" } }, selectedTable))), /* @__PURE__ */ React17.createElement("div", { className: "rdb-body", style: { color: "var(--rdb-text-muted)", marginBottom: 16 } }, "Wizard sudah mengisi kolom secara otomatis. Periksa sebentar dan sesuaikan jika ada yang salah."), colNames.length > 0 && /* @__PURE__ */ React17.createElement("div", { className: "rdb-wizard-supabase-reader", style: { marginBottom: 16 } }, /* @__PURE__ */ React17.createElement("div", { className: "rdb-caption", style: { fontWeight: 600, marginBottom: 6 } }, "Semua kolom di tabel ", selectedTable, ":"), /* @__PURE__ */ React17.createElement("div", { className: "rdb-wizard-table-chips" }, colNames.map((c) => /* @__PURE__ */ React17.createElement("span", { key: c, className: "rdb-wizard-chip", style: { cursor: "default" } }, c)))), /* @__PURE__ */ React17.createElement("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, marginBottom: 16 } }, [
+    { label: "Kolom Tanggal *", hint: "Tipe timestamp/date", val: colDate, set: setColDate, ph: "created_at" },
+    { label: "Kolom Status *", hint: "Berisi nilai selesai/pending", val: colStatus, set: setColStatus, ph: "status" },
+    { label: "Kolom Total (uang) *", hint: "Integer Rupiah", val: colTotal, set: setColTotal, ph: "total_amount" },
+    { label: "Kolom Nama Pelanggan", hint: "Opsional", val: colCustomer, set: setColCustomer, ph: "customer_name (opsional)" },
+    { label: "Kolom Nama Item / Layanan", hint: "Opsional", val: colItem, set: setColItem, ph: "product_name (opsional)" }
+  ].map(({ label, hint, val, set, ph }) => /* @__PURE__ */ React17.createElement("div", { key: label }, /* @__PURE__ */ React17.createElement("label", { className: "rdb-label" }, label), colNames.length > 0 ? /* @__PURE__ */ React17.createElement("select", { className: "rdb-select", value: val, onChange: (e) => set(e.target.value) }, /* @__PURE__ */ React17.createElement("option", { value: "" }, "\u2014 pilih \u2014"), colNames.map((c) => /* @__PURE__ */ React17.createElement("option", { key: c, value: c }, c))) : /* @__PURE__ */ React17.createElement("input", { className: "rdb-input", value: val, onChange: (e) => set(e.target.value), placeholder: ph }), /* @__PURE__ */ React17.createElement("div", { className: "rdb-caption", style: { marginTop: 2 } }, hint)))), /* @__PURE__ */ React17.createElement("div", { className: "rdb-wizard-flow", style: { marginBottom: 16 } }, /* @__PURE__ */ React17.createElement("div", { className: "rdb-caption", style: { fontWeight: 600, marginBottom: 4 } }, "Nilai status yang ditemukan di data kamu:"), stVals.length > 0 ? /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement("div", { className: "rdb-caption", style: { color: "var(--rdb-text-muted)", marginBottom: 8 } }, "Wizard membaca nilai unik dari kolom ", /* @__PURE__ */ React17.createElement("strong", null, colStatus), ". Klik nilai yang sesuai:"), /* @__PURE__ */ React17.createElement("div", { style: { display: "flex", gap: 8, flexWrap: "wrap", marginBottom: 12 } }, stVals.map((v) => /* @__PURE__ */ React17.createElement("div", { key: v, style: { display: "flex", gap: 4, alignItems: "center" } }, /* @__PURE__ */ React17.createElement(
+    "button",
+    {
+      type: "button",
+      className: `rdb-btn rdb-btn-sm ${confirmedVal === String(v) ? "rdb-btn-primary" : "rdb-btn-secondary"}`,
+      onClick: () => setConfirmedVal(String(v))
+    },
+    confirmedVal === String(v) ? "\u2705 " : "",
+    "Selesai = ",
+    /* @__PURE__ */ React17.createElement("strong", null, String(v))
+  ), /* @__PURE__ */ React17.createElement(
+    "button",
+    {
+      type: "button",
+      className: `rdb-btn rdb-btn-sm ${pendingVal === String(v) ? "rdb-btn-primary" : "rdb-btn-secondary"}`,
+      onClick: () => setPendingVal(String(v))
+    },
+    pendingVal === String(v) ? "\u2705 " : "",
+    "Proses = ",
+    /* @__PURE__ */ React17.createElement("strong", null, String(v))
+  ))))) : /* @__PURE__ */ React17.createElement("div", { className: "rdb-caption", style: { color: "var(--rdb-text-muted)", marginBottom: 8 } }, "Nilai status tidak terbaca otomatis. Ketik manual:"), /* @__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: "confirmed"
+    }
+  )), /* @__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: "pending"
+    }
+  )))), sample.length > 0 && colDate && colStatus && colTotal && /* @__PURE__ */ React17.createElement("div", { style: { marginBottom: 16 } }, /* @__PURE__ */ React17.createElement("div", { className: "rdb-caption", style: { fontWeight: 600, marginBottom: 4 } }, "Preview data nyata sesuai mapping kamu:"), /* @__PURE__ */ React17.createElement(
+    PreviewTable,
+    {
+      rows: sample,
+      cols: [colDate, colStatus, colTotal, colCustomer, colItem].filter((c) => c && c !== "-")
+    }
+  )), !canGen && /* @__PURE__ */ React17.createElement("div", { className: "rdb-error-banner", style: { marginBottom: 12 } }, "Isi Kolom Tanggal, Status, dan Total untuk melanjutkan."), /* @__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: !canGen,
+      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 Sudah Jadi!")), /* @__PURE__ */ React17.createElement("div", { className: "rdb-wizard-tip", style: { marginBottom: 12 } }, /* @__PURE__ */ React17.createElement("strong", null, "4 file digenerate."), " Klik tab file \u2192 Salin \u2192 Simpan ke lokasi yang tertera di bawah tab. Tidak perlu mengubah isi kode \u2014 langsung save dan jalankan."), /* @__PURE__ */ React17.createElement("div", { className: "rdb-wizard-issues", style: { marginBottom: 12 } }, Object.entries(TAB_INFO).map(([key, info], i) => /* @__PURE__ */ React17.createElement("div", { key, className: "rdb-wizard-issue-item" }, /* @__PURE__ */ React17.createElement("span", { style: { color: "var(--rdb-blue-500)", fontWeight: 700, minWidth: 18 } }, i + 1, "."), /* @__PURE__ */ React17.createElement("span", { className: "rdb-body" }, "Salin ", /* @__PURE__ */ React17.createElement("code", { className: "rdb-wizard-code-inline" }, info.label), " \u2192 simpan ke ", /* @__PURE__ */ React17.createElement("code", { className: "rdb-wizard-code-inline" }, info.path)))), /* @__PURE__ */ React17.createElement("div", { className: "rdb-wizard-issue-item" }, /* @__PURE__ */ React17.createElement("span", { style: { color: "var(--rdb-blue-500)", fontWeight: 700, minWidth: 18 } }, "5."), /* @__PURE__ */ React17.createElement("span", { className: "rdb-body" }, "Di ", /* @__PURE__ */ React17.createElement("code", { className: "rdb-wizard-code-inline" }, "src/index.css"), ", tambahkan:", " ", /* @__PURE__ */ React17.createElement("code", { className: "rdb-wizard-code-inline" }, '@import "../node_modules/@rozaqi02/reusable-dashboard/dist/index.css";'))), /* @__PURE__ */ React17.createElement("div", { className: "rdb-wizard-issue-item" }, /* @__PURE__ */ React17.createElement("span", { style: { color: "var(--rdb-blue-500)", fontWeight: 700, minWidth: 18 } }, "6."), /* @__PURE__ */ React17.createElement("span", { className: "rdb-body" }, "Restart dev server (", /* @__PURE__ */ React17.createElement("code", { className: "rdb-wizard-code-inline" }, "npm start"), ") \u2192 buka halaman dashboard \u2192 selesai!"))), /* @__PURE__ */ React17.createElement("div", { style: { display: "flex", gap: 4, flexWrap: "wrap", marginBottom: 4 } }, Object.entries(TAB_INFO).map(([key, info]) => /* @__PURE__ */ React17.createElement(
+    "button",
+    {
+      key,
+      type: "button",
+      onClick: () => setActiveTab(key),
+      className: `rdb-btn rdb-btn-sm ${activeTab === key ? "rdb-btn-primary" : "rdb-btn-secondary"}`,
+      style: { fontFamily: "monospace", fontSize: "0.73rem" }
+    },
+    info.label
+  ))), /* @__PURE__ */ React17.createElement("div", { className: "rdb-caption", style: { color: "var(--rdb-text-muted)", marginBottom: 6 } }, "\u{1F4C1} Simpan ke: ", /* @__PURE__ */ React17.createElement("code", { className: "rdb-wizard-code-inline" }, (_b = TAB_INFO[activeTab]) == null ? void 0 : _b.path)), /* @__PURE__ */ React17.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React17.createElement(
+    "button",
+    {
+      type: "button",
+      className: "rdb-btn rdb-btn-secondary rdb-btn-sm",
+      style: { position: "absolute", top: 8, right: 8, zIndex: 1 },
+      onClick: () => copyCode(generatedCode[activeTab], activeTab)
+    },
+    copied === activeTab ? "\u2705 Tersalin!" : "\u{1F4CB} Salin kode"
+  ), /* @__PURE__ */ React17.createElement("pre", { className: "rdb-wizard-code", style: { maxHeight: 280, overflow: "auto" } }, generatedCode[activeTab])), /* @__PURE__ */ React17.createElement("div", { className: "rdb-wizard-alert", style: { marginTop: 10, marginBottom: 4 } }, /* @__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 } }, "Data tidak muncul di dashboard?"), /* @__PURE__ */ React17.createElement("div", { className: "rdb-caption", style: { marginTop: 4 } }, "Jalankan SQL ini di Supabase SQL Editor:"), /* @__PURE__ */ React17.createElement("div", { style: { position: "relative", marginTop: 6 } }, /* @__PURE__ */ React17.createElement(
+    "button",
+    {
+      type: "button",
+      className: "rdb-btn rdb-btn-secondary rdb-btn-sm",
+      style: { position: "absolute", top: 4, right: 4 },
+      onClick: () => copyCode(`ALTER TABLE public.${selectedTable} DISABLE ROW LEVEL SECURITY;`, "rlsquick")
+    },
+    copied === "rlsquick" ? "\u2705" : "\u{1F4CB}"
+  ), /* @__PURE__ */ React17.createElement("pre", { className: "rdb-wizard-code", style: { fontSize: "0.72rem" } }, `ALTER TABLE public.${selectedTable} DISABLE ROW LEVEL SECURITY;`)))), /* @__PURE__ */ React17.createElement("div", { style: { display: "flex", gap: 8, justifyContent: "flex-end", marginTop: 10 } }, /* @__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),