@rozaqi02/reusable-dashboard 1.1.4 → 1.1.5

package/dist/index.js

@@ -1864,80 +1864,95 @@ import PropTypes18 from "prop-types";
 import React17, { useState as useState6, useEffect as useEffect3, useCallback as useCallback5 } from "react";
 import PropTypes17 from "prop-types";
 var PRESET_SIGNATURES = {
-  cidika: {
-    name: "Cidika Travel",
-    tables: ["bookings", "packages", "package_locales"]
-  },
-  tokoSepatu: {
-    name: "Toko Sepatu / E-Commerce",
-    tables: ["orders", "products", "customers"]
-  }
+  cidika: { name: "Cidika Travel", tables: ["bookings", "packages", "package_locales"] },
+  tokoSepatu: { name: "Toko Sepatu / E-Commerce", tables: ["orders", "products", "customers"] }
 };
 function detectPreset(tables) {
-  if (!tables || tables.length === 0) return null;
-  const tSet = new Set(tables);
-  if (PRESET_SIGNATURES.cidika.tables.every((t) => tSet.has(t))) return "cidika";
-  if (PRESET_SIGNATURES.tokoSepatu.tables.every((t) => tSet.has(t))) return "tokoSepatu";
+  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;
 }
-function generateCode(mapping) {
-  const {
-    tableName,
-    colDate,
-    colStatus,
-    colTotal,
-    colCustomer,
-    colItem,
-    dashTitle,
-    confirmedValue,
-    pendingValue
-  } = mapping;
-  const safeTitle = dashTitle || "Dashboard";
+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 safeCustomer = colCustomer || "customer_name";
-  const safeItem = colItem || "-";
-  const colTotalFull = colTotal || "total";
+  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
-// Tabel: ${tableName}
 
 export function createMyDashboardSource(supabase) {
   return {
     async fetchDashboardSnapshot({ fromISO, toISO, statusScope }) {
-      const allQuery = supabase
+      const allQ = supabase
         .from("${tableName}")
-        .select("id, ${colDate}, ${colStatus}, ${colTotalFull}${colCustomer !== "customer_name" ? `, ${colCustomer}` : ", customer_name"}${colItem !== "-" ? `, ${colItem}` : ""}")
+        .select("${cols}")
         .gte("${colDate}", fromISO)
         .lte("${colDate}", toISO)
         .order("${colDate}", { ascending: true });
 
-      const recentQuery = supabase
+      const recentQ = supabase
         .from("${tableName}")
-        .select("id, ${colDate}, ${colStatus}, ${colTotalFull}${colCustomer !== "customer_name" ? `, ${colCustomer}` : ", customer_name"}${colItem !== "-" ? `, ${colItem}` : ""}")
+        .select("${cols}")
         .gte("${colDate}", fromISO)
         .lte("${colDate}", toISO)
         .order("${colDate}", { ascending: false })
         .limit(10);
 
       if (statusScope && statusScope !== "all") {
-        recentQuery.eq("${colStatus}", statusScope);
+        recentQ.eq("${colStatus}", statusScope);
       }
 
-      const [allRes, recentRes] = await Promise.all([allQuery, recentQuery]);
-
+      const [all, recent] = await Promise.all([allQ, recentQ]);
       return {
-        bookings: allRes.data   || [],  // semua transaksi (untuk chart & stats)
-        recent:   recentRes.data || [], // 10 terbaru (untuk tabel)
+        bookings: all.data    || [],
+        recent:   recent.data || [],
         packageLocales: [],
         staticCounts: { packages: 0, sections: 0 },
       };
     },
 
     subscribeLiveUpdate(onEvent) {
-      const ch = supabase
-        .channel("rdb-dashboard-live")
-        .on("postgres_changes", { event: "*", schema: "public", table: "${tableName}" }, onEvent)
+      const ch = supabase.channel("rdb-${tableName}-live")
+        .on("postgres_changes",
+            { event: "*", schema: "public", table: "${tableName}" }, onEvent)
         .subscribe();
       return () => supabase.removeChannel(ch);
     },
@@ -1945,15 +1960,13 @@ export function createMyDashboardSource(supabase) {
 }`;
   const adapter = `// src/adapters/myDashboardAdapter.js
 // AUTO-GENERATED oleh Setup Wizard @rozaqi02/reusable-dashboard
-// Mapping kolom: status="${colStatus}", total="${colTotalFull}", tanggal="${colDate}"
 
 import { toNumber, buildDayBuckets } from "@rozaqi02/reusable-dashboard";
 
 export function createEmptyMyDashboardData() {
   return {
-    stats:  { bookingsConfirm: 0, revenueConfirm: 0 },
-    charts: { dailyTrends: [], statusDistribution: [],
-              audienceDistribution: [], topPackages: [] },
+    stats:  { bookingsConfirm: 0, revenueConfirm: 0, avgRevenue: 0, conversionRate: 0 },
+    charts: { dailyTrends: [], statusDistribution: [], audienceDistribution: [], topPackages: [] },
     table:  { recentBookings: [] },
   };
 }
@@ -1967,51 +1980,45 @@ export function adaptMyDashboardData({ raw, range, dateLocale, labels }) {
   let confirmed = 0, revenue = 0;
 
   (raw.bookings || []).forEach(row => {
-    const status = String(row["${colStatus}"] || "pending").toLowerCase();
-    const amount = toNumber(row["${colTotalFull}"]);
-    const dayKey = String(row["${colDate}"] || "").slice(0, 10);
+    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) {
-      if (status === "${confirmed}") { bucket.count++; bucket.revenue += amount; }
-      if (status === "${pending}")   { bucket.pendingCount++; }
+    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 avgRevenue     = confirmed > 0 ? Math.round(revenue / confirmed) : 0;
-  const totalTx        = (raw.bookings || []).length;
-  const conversionRate = totalTx > 0 ? Math.round((confirmed / totalTx) * 100) : 0;
-
+  const total = (raw.bookings || []).length;
   return {
     stats: {
       bookingsConfirm: confirmed,
       revenueConfirm:  revenue,
-      avgRevenue,
-      conversionRate,
+      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())
         .sort((a, b) => b[1] - a[1])
-        .map(([status, count]) => ({
-          status, count,
-          label: labels?.formatStatusLabel?.(status) || status,
-        })),
+        .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["${colDate}"],
-        customerName: row["${colCustomer}"] || "-",
-        packageName:  ${colItem !== "-" ? `row["${colItem}"] || "-"` : '"-"'},
+        id:            row.id,
+        createdAt:     row["${colDate}"],
+        customerName:  row["${custCol}"] || "-",
+        packageName:   ${itemCol !== "-" ? `row["${itemCol}"] || "-"` : '"-"'},
         audienceLabel: "-",
-        totalIDR:     toNumber(row["${colTotalFull}"]),
-        status:       String(row["${colStatus}"] || "pending").toLowerCase(),
-        statusLabel:  labels?.formatStatusLabel?.(row["${colStatus}"]) || row["${colStatus}"],
+        totalIDR:      toNumber(row["${totalCol}"]),
+        status:        String(row["${colStatus}"] || "").toLowerCase(),
+        statusLabel:   labels?.formatStatusLabel?.(row["${colStatus}"]) || row["${colStatus}"] || "-",
       })),
     },
   };
@@ -2021,151 +2028,120 @@ export function adaptMyDashboardData({ raw, range, dateLocale, labels }) {
 
 export const myDashboardConfig = {
   id: "my.custom.dashboard",
-  defaultFilters: {
-    statusScope: "${confirmed}",
-    daysPreset: 30,
-    sortPkgBy: "bookings",
-    sortPkgDir: "desc",
-  },
+  defaultFilters: { statusScope: "${confirmed}", daysPreset: 30,
+                    sortPkgBy: "bookings", sortPkgDir: "desc" },
   widgets: {
     stats: [
-      { id: "orders",     label: "confirmedBookings", icon: "TrendingUp",
-        valueKey: "bookingsConfirm", format: "number",   accentColor: "blue" },
-      { id: "revenue",    label: "confirmedRevenue",  icon: "DollarSign",
-        valueKey: "revenueConfirm",  format: "currency", accentColor: "green" },
-      { id: "avg",        label: "avgRevenue",         icon: "Users",
-        valueKey: "avgRevenue",       format: "currency", accentColor: "violet" },
-      { id: "conversion", label: "conversionRate",     icon: "PieChart",
-        valueKey: "conversionRate",   format: "percent",  accentColor: "orange" },
+      { 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: "recentTx", 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" },${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" },
+        { 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
-// Salin file ini ke halaman dashboard kamu.
 
 import React from "react";
 import { supabase } from "../../lib/supabaseClient.js";
 import {
-  ReusableDashboardView,
-  useReusableDashboard,
-  createDashboardConfig,
+  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";
+// Tiga file hasil generate wizard
+import { myDashboardConfig }                              from "../../config/myDashboardConfig";
+import { createMyDashboardSource }                        from "../../datasources/myDashboardSource";
+import { adaptMyDashboardData, createEmptyMyDashboardData } from "../../adapters/myDashboardAdapter";
 
-// Data source \u2014 dibuat sekali di luar komponen
 const source = createMyDashboardSource(supabase);
 
-// Label UI \u2014 sesuaikan teks dengan bahasa/konteks bisnis kamu
 const labels = {
-  title: "${safeTitle}",
-  refresh: "Refresh",
-  liveUpdate: "Live update",
-  loadFailed: "Gagal memuat data.",
-  retry: "Coba Lagi",
-  confirmedOnly: "Selesai",
-  pendingOnly: "Proses",
-  allStatus: "Semua Status",
-  showPendingOverlay: "Tampilkan pending",
-  reset: "Reset",
-  confirmedBookings: "Total Transaksi",
-  confirmedRevenue: "Total Pendapatan",
-  avgRevenue: "Rata-rata / Transaksi",
-  conversionRate: "Conversion Rate",
-  dailyTrends: "Tren Harian",
-  statusDistribution: "Distribusi Status",
-  recentBookings: "Transaksi Terbaru",
-  noRecentBookings: "Belum ada transaksi",
-  date: "Tanggal",
-  customer: "Pelanggan",
-  package: "Item",
-  total: "Total",
-  status: "Status",
-  bookingsMetric: "Transaksi",
-  revenueMetric: "Pendapatan",
+  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" })[s] || (s || "-"),
+  formatStatusLabel:  s => ({ "${confirmed}":"Selesai", "${pending}":"Proses" })[s] || s || "-",
   formatAudienceLabel: v => v || "-",
 };
 
-// Kemas semua jadi 1 objek
 const dashboardConfig = createDashboardConfig({
-  widgetConfig: myDashboardConfig,
-  dataSource:   source,
-  adapter:      adaptMyDashboardData,
-  createEmptyState: createEmptyMyDashboardData,
-  languageCode: "id",
-  dateLocale:   "id-ID",
-  labels,
+  widgetConfig: myDashboardConfig, dataSource: source,
+  adapter: adaptMyDashboardData,   createEmptyState: createEmptyMyDashboardData,
+  languageCode: "id", dateLocale: "id-ID", labels,
 });
 
 export default function Dashboard() {
   const state = useReusableDashboard({ ...dashboardConfig, labels });
   return (
     <ReusableDashboardView
-      config={dashboardConfig.config}
-      labels={labels}
-      loading={state.loading}
-      error={state.error}
-      filters={state.filters}
-      onFilterChange={state.updateFilter}
-      onResetFilters={state.resetFilters}
-      onRefresh={state.refresh}
-      data={state.data}
-      dateLocale={dashboardConfig.dateLocale}
+      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}
+      supabase={supabase}               dashboardConfig={dashboardConfig}
     />
   );
 }`;
   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 [userHasDashboard, setUserHasDashboard] = useState6(null);
+  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("confirmed");
-  const [pendingVal, setPendingVal] = useState6("pending");
+  const [confirmedVal, setConfirmedVal] = useState6("");
+  const [pendingVal, setPendingVal] = useState6("");
   const [dashTitle, setDashTitle] = useState6("Dashboard");
-  const [loadingColumns, setLoadingColumns] = useState6(false);
+  const [loadingCols, setLoadingCols] = useState6(false);
+  const [colsBlocked, setColsBlocked] = useState6(false);
   const [generatedCode, setGeneratedCode] = useState6(null);
-  const [activeCodeTab, setActiveCodeTab] = useState6("dataSource");
+  const [activeTab, setActiveTab] = useState6("dashboard");
   const [copied, setCopied] = useState6("");
+  const [showRls, setShowRls] = useState6(false);
   useEffect3(() => {
     if (!supabase) {
       setDetecting(false);
@@ -2174,22 +2150,22 @@ function SetupWizard({ issues = [], onDismiss, supabase }) {
     }
     (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));
+        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);
-        } 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([]);
-          }
+          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 {
@@ -2198,364 +2174,347 @@ function SetupWizard({ issues = [], onDismiss, supabase }) {
       }
     })();
   }, [supabase]);
-  const loadColumns = useCallback5(async (tbl) => {
-    if (!supabase || !tbl || columns[tbl]) return;
-    setLoadingColumns(true);
+  const analyzeTable = useCallback5(async (tbl) => {
+    var _a2;
+    if (!supabase || !tbl) return;
+    if (columns[tbl]) {
+      autoDetect(tbl, columns[tbl]);
+      return;
+    }
+    setLoadingCols(true);
+    setColsBlocked(false);
     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;
+      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] }));
       }
-      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;
+      if (cols) {
+        setColumns((p) => ({ ...p, [tbl]: cols }));
+        autoDetect(tbl, cols);
+      } else {
+        setColsBlocked(true);
       }
-      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;
+      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));
+        }
       }
-      setColumns((prev) => ({ ...prev, [tbl]: [] }));
     } catch {
-      setColumns((prev) => ({ ...prev, [tbl]: [] }));
+      setColsBlocked(true);
     } finally {
-      setLoadingColumns(false);
+      setLoadingCols(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) || "";
+  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(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"]));
+    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, label) {
-    navigator.clipboard.writeText(text).then(() => {
-      setCopied(label);
-      setTimeout(() => setCopied(""), 2e3);
+  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);
-    if (onDismiss) onDismiss();
+    onDismiss == null ? void 0 : onDismiss();
   }
   function handleGenerate() {
     if (!selectedTable || !colDate || !colStatus || !colTotal) return;
-    const code = generateCode({
-      tableName: selectedTable,
+    setGeneratedCode(generateCode({
+      tableName: selectedTable.trim(),
       colDate,
       colStatus,
       colTotal,
       colCustomer: colCustomer || "customer_name",
       colItem: colItem || "-",
       dashTitle,
-      confirmedValue: confirmedVal,
-      pendingValue: pendingVal
-    });
-    setGeneratedCode(code);
+      confirmedValue: confirmedVal || "confirmed",
+      pendingValue: pendingVal || "pending"
+    }));
     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",
+  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",
     {
-      className: "rdb-wizard-overlay",
-      role: "dialog",
-      "aria-modal": "true",
-      "aria-label": "Setup Wizard @rozaqi02/reusable-dashboard"
+      key: i,
+      type: "button",
+      className: `rdb-wizard-step-btn ${step === i ? "rdb-wizard-step-active" : ""}`,
+      onClick: () => setStep(i)
     },
-    /* @__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(
+    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);
-          loadColumns(tbl);
+          analyzeTable(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)
+        className: `rdb-btn rdb-btn-sm ${isSelected ? "rdb-btn-primary" : "rdb-btn-secondary"}`,
+        style: { fontFamily: "monospace", fontSize: "0.82rem" }
       },
-      /* @__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"
-    ))))))
-  );
+      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),