@rozaqi02/reusable-dashboard 1.1.5 → 1.2.0

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 All notable changes to this project are documented in this file.
 
+## [1.2.0] - 2026-06-06
+
+### Added
+
+1. `<AutoDashboard>` — komponen plug-and-play untuk domain transaksional. Client cukup memberi prop `supabase`, `table`, dan pemetaan `columns`; data source, adapter, dan widget config dirakit otomatis tanpa menulis file konfigurasi terpisah.
+2. `createUniversalSource(supabase, { table, columns })` — data source generik yang menormalkan baris ke bentuk kanonik berdasarkan pemetaan kolom runtime.
+3. `adaptUniversalData` + `createEmptyUniversalData` — adapter generik yang menghasilkan struktur `{ stats, charts, table }` dari data kanonik.
+4. `createUniversalWidgetConfig(columns)` — membangun widget config secara dinamis sesuai kolom yang dipetakan.
+
+### Notes
+
+- Preset `cidika`, `tokoSepatu`, dan `dummyUmkm` tetap tersedia untuk kasus yang butuh kontrol penuh.
+- `<AutoDashboard>` ditujukan untuk data transaksional (waktu + status + nilai). Domain non-transaksional tetap memakai adapter manual.
+
 ## [1.0.0] - 2026-04-15
 
 ### Added

package/README.md

@@ -4,7 +4,7 @@ Modul dashboard admin reusable untuk aplikasi UMKM berbasis React + Supabase.
 Mendukung berbagai domain bisnis (travel, toko online, UMKM generik) tanpa menulis ulang komponen.
 CSS sudah terbundle — tidak perlu konfigurasi Tailwind.
 
-[![version](https://img.shields.io/badge/version-1.1.3-blue)](./CHANGELOG.md)
+[![version](https://img.shields.io/badge/version-1.2.0-blue)](./CHANGELOG.md)
 [![license](https://img.shields.io/badge/license-MIT-green)](./LICENSE)
 [![npm](https://img.shields.io/badge/npm-%40rozaqi02%2Freusable--dashboard-red)](https://www.npmjs.com/package/@rozaqi02/reusable-dashboard)
 
@@ -12,6 +12,7 @@ CSS sudah terbundle — tidak perlu konfigurasi Tailwind.
 
 ## Daftar Isi
 
+0. [⚡ Cara Tercepat — `<AutoDashboard>` (Plug & Play)](#0-cara-tercepat--autodashboard-plug--play)
 1. [Instalasi](#1-instalasi)
 2. [Prasyarat Teknis](#2-prasyarat-teknis)
 3. [Preset yang Tersedia](#3-preset-yang-tersedia)
@@ -28,6 +29,73 @@ CSS sudah terbundle — tidak perlu konfigurasi Tailwind.
 
 ---
 
+## 0. Cara Tercepat — `<AutoDashboard>` (Plug & Play)
+
+Kalau kamu hanya ingin dashboard jadi **tanpa menulis file config apa pun**, pakai
+komponen `<AutoDashboard>`. Cukup beri tahu nama tabel dan pemetaan kolom — modul
+merakit data source, adapter, dan widget config secara otomatis di balik layar.
+
+```jsx
+import { AutoDashboard } from "@rozaqi02/reusable-dashboard";
+import { supabase } from "./lib/supabaseClient";
+
+export default function Dashboard() {
+  return (
+    <AutoDashboard
+      supabase={supabase}
+      table="bookings"
+      columns={{
+        date: "created_at",     // WAJIB — kolom timestamp
+        status: "status",       // opsional — kolom status transaksi
+        total: "total_idr",     // opsional — kolom nilai uang
+        customer: "customer_name", // opsional — nama pelanggan
+        item: "package_id",     // opsional — nama produk/paket/layanan
+        audience: "audience",   // opsional — segmen pelanggan
+      }}
+      confirmedValue="confirmed" // nilai status yang dihitung "berhasil"
+      pendingValue="pending"     // nilai status yang dihitung "menunggu"
+      title="Dashboard Cidika"
+    />
+  );
+}
+```
+
+Jangan lupa import CSS-nya sekali saja (lihat [Bab 1](#1-instalasi)).
+
+### Props `<AutoDashboard>`
+
+| Prop | Tipe | Wajib | Keterangan |
+|------|------|-------|------------|
+| `supabase` | object | ✅ | Instance Supabase client. |
+| `table` | string | ✅ | Nama tabel sumber data, mis. `"bookings"`, `"orders"`. |
+| `columns.date` | string | ✅ | Kolom timestamp untuk tren harian & filter rentang. |
+| `columns.status` | string | — | Kolom status. Tanpa ini semua baris dianggap "berhasil". |
+| `columns.total` | string | — | Kolom nilai uang untuk metrik pendapatan. |
+| `columns.customer` | string | — | Kolom nama pelanggan (muncul di tabel). |
+| `columns.item` | string | — | Kolom produk/paket/layanan (mengaktifkan chart "Item Teratas"). |
+| `columns.audience` | string | — | Kolom segmen (mengaktifkan chart distribusi segmen). |
+| `confirmedValue` | string | — | Nilai status "berhasil" (default `"confirmed"`). |
+| `pendingValue` | string | — | Nilai status "menunggu" (default `"pending"`). |
+| `title` | string | — | Judul dashboard. |
+| `labels` | object | — | Override sebagian/seluruh teks UI (lihat [Bab 9](#9-label--internasionalisasi)). |
+| `dateLocale` | string | — | Locale format tanggal (default `"id-ID"`). |
+
+Widget menyesuaikan otomatis: chart "Distribusi Segmen" hanya muncul bila `columns.audience`
+diisi, dan chart "Item Teratas" hanya muncul bila `columns.item` diisi.
+
+### Kapan memakai ini vs preset/adapter manual?
+
+`<AutoDashboard>` cocok untuk **data transaksional** — data yang punya waktu, status,
+dan (opsional) nilai uang. Ini mencakup mayoritas UMKM: travel, retail, laundry, klinik,
+restoran, rental, kursus, bengkel, dan sejenisnya.
+
+Untuk kasus yang lebih kompleks — gabungan banyak tabel, metrik khusus domain
+(rating bintang, okupansi kamar), atau data non-transaksional (blog/CMS, inventori murni) —
+gunakan pendekatan **adapter manual** ([Bab 7](#7-cara-membuat-adapter-untuk-domain-bisnis-baru))
+atau **preset** ([Bab 3](#3-preset-yang-tersedia)) yang memberi kontrol penuh.
+
+---
+
 ## 1. Instalasi
 
 ```bash

package/dist/index.cjs

@@ -29,6 +29,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.js
 var index_exports = {};
 __export(index_exports, {
+  AutoDashboard: () => AutoDashboard,
   Badge: () => Badge,
   Button: () => Button,
   ChartCard: () => ChartCard,
@@ -50,6 +51,7 @@ __export(index_exports, {
   adaptCidikaDashboardData: () => adaptCidikaDashboardData,
   adaptDummyUmkmData: () => adaptDummyUmkmData,
   adaptTokoSepatuData: () => adaptTokoSepatuData,
+  adaptUniversalData: () => adaptUniversalData,
   buildDayBuckets: () => buildDayBuckets,
   cidikaWidgetConfig: () => cidikaWidgetConfig,
   createCidikaSupabaseSource: () => createCidikaSupabaseSource,
@@ -59,7 +61,10 @@ __export(index_exports, {
   createEmptyDashboardData: () => createEmptyDashboardData,
   createEmptyDummyUmkmData: () => createEmptyDummyUmkmData,
   createEmptyTokoSepatuData: () => createEmptyTokoSepatuData,
+  createEmptyUniversalData: () => createEmptyUniversalData,
   createTokoSepatuSupabaseSource: () => createTokoSepatuSupabaseSource,
+  createUniversalSource: () => createUniversalSource,
+  createUniversalWidgetConfig: () => createUniversalWidgetConfig,
   dummyUmkmWidgetConfig: () => dummyUmkmWidgetConfig,
   formatDate: () => formatDate,
   formatIDR: () => formatIDR,
@@ -387,6 +392,111 @@ function validateDashboardConfig(dashboardConfig) {
   return { valid: issues.length === 0, issues };
 }
 
+// src/config/createUniversalWidgetConfig.js
+function createUniversalWidgetConfig(columns = {}, opts = {}) {
+  const hasAudience = Boolean(columns.audience);
+  const hasItem = Boolean(columns.item);
+  const hasCustomer = Boolean(columns.customer);
+  const hasTotal = Boolean(columns.total);
+  const charts = [
+    { id: "dailyTrends", type: "dailyArea", label: "dailyTrends", icon: "BarChart3" },
+    { id: "statusDistribution", type: "statusPie", label: "statusDistribution", icon: "PieChart" }
+  ];
+  if (hasAudience) {
+    charts.push({
+      id: "audienceDistribution",
+      type: "audiencePie",
+      label: "audienceDistribution",
+      icon: "Users"
+    });
+  }
+  if (hasItem) {
+    charts.push({
+      id: "topPackages",
+      type: "topPackagesBar",
+      label: "topPackages",
+      icon: "TrendingUp"
+    });
+  }
+  const tableColumns = [
+    { id: "date", label: "date", accessor: "createdAt", type: "date" }
+  ];
+  if (hasCustomer) {
+    tableColumns.push({ id: "customer", label: "customer", accessor: "customerName" });
+  }
+  if (hasItem) {
+    tableColumns.push({ id: "package", label: "package", accessor: "packageName" });
+  }
+  if (hasAudience) {
+    tableColumns.push({ id: "audience", label: "audience", accessor: "audienceLabel" });
+  }
+  if (hasTotal) {
+    tableColumns.push({ id: "total", label: "total", accessor: "totalIDR", type: "currency" });
+  }
+  tableColumns.push({
+    id: "status",
+    label: "status",
+    accessor: "statusLabel",
+    type: "statusBadge",
+    statusAccessor: "status"
+  });
+  return {
+    id: opts.id || "universal.dashboard",
+    defaultFilters: {
+      statusScope: "confirmed",
+      includePendingOverlay: false,
+      audience: "",
+      daysPreset: 30,
+      sortPkgBy: "bookings",
+      sortPkgDir: "desc"
+    },
+    widgets: {
+      stats: [
+        {
+          id: "bookingsConfirm",
+          label: "confirmedBookings",
+          icon: "TrendingUp",
+          valueKey: "bookingsConfirm",
+          format: "number",
+          accentColor: "blue"
+        },
+        {
+          id: "revenueConfirm",
+          label: "confirmedRevenue",
+          icon: "DollarSign",
+          valueKey: "revenueConfirm",
+          format: "currency",
+          accentColor: "green"
+        },
+        {
+          id: "avgRevenue",
+          label: "avgRevenue",
+          icon: "Users",
+          valueKey: "avgRevenue",
+          format: "currency",
+          accentColor: "violet"
+        },
+        {
+          id: "conversionRate",
+          label: "conversionRate",
+          icon: "PieChart",
+          valueKey: "conversionRate",
+          format: "percent",
+          accentColor: "orange"
+        }
+      ],
+      charts,
+      table: {
+        id: "recentBookings",
+        label: "recentBookings",
+        icon: "Calendar",
+        emptyLabel: "noRecentBookings",
+        columns: tableColumns
+      }
+    }
+  };
+}
+
 // src/utils/formatters.js
 function formatIDR(value) {
   try {
@@ -792,6 +902,131 @@ function adaptTokoSepatuData({ raw, filters, range, dateLocale, labels }) {
   };
 }
 
+// src/data-adapter/universalAdapter.js
+function createEmptyUniversalData() {
+  return {
+    stats: {
+      bookingsConfirm: 0,
+      bookingsPending: 0,
+      revenueConfirm: 0,
+      avgRevenue: 0,
+      conversionRate: 0
+    },
+    charts: {
+      dailyTrends: [],
+      statusDistribution: [],
+      audienceDistribution: [],
+      topPackages: []
+    },
+    table: {
+      recentBookings: []
+    }
+  };
+}
+function adaptUniversalData({
+  raw,
+  filters = {},
+  range,
+  dateLocale = "id-ID",
+  labels = {},
+  options = {}
+}) {
+  if (!raw) return createEmptyUniversalData();
+  const confirmedValue = String(options.confirmedValue || "confirmed").toLowerCase();
+  const pendingValue = String(options.pendingValue || "pending").toLowerCase();
+  const dailyBuckets = buildDayBuckets(range.daysWindow, range.fromISO, dateLocale);
+  const dayLookup = new Map(dailyBuckets.map((bucket) => [bucket.dateKey, bucket]));
+  const statusMap = /* @__PURE__ */ new Map();
+  const audienceMap = /* @__PURE__ */ new Map();
+  const itemCountMap = /* @__PURE__ */ new Map();
+  const itemRevenueMap = /* @__PURE__ */ new Map();
+  let bookingsConfirm = 0;
+  let bookingsPending = 0;
+  let revenueConfirm = 0;
+  const safeStatusLabel = typeof labels.formatStatusLabel === "function" ? labels.formatStatusLabel : (s) => String(s);
+  const safeAudienceLabel = typeof labels.formatAudienceLabel === "function" ? labels.formatAudienceLabel : (a) => String(a);
+  (raw.bookings || []).forEach((row) => {
+    const dayKey = String(row.created_at || "").slice(0, 10);
+    const status = String(row.status || pendingValue).toLowerCase();
+    const total = toNumber(row.total_idr);
+    const audience = row.audience || "unknown";
+    const item = row.item || "-";
+    statusMap.set(status, (statusMap.get(status) || 0) + 1);
+    audienceMap.set(audience, (audienceMap.get(audience) || 0) + 1);
+    const bucket = dayLookup.get(dayKey);
+    if (bucket) {
+      if (status === confirmedValue) {
+        bucket.count += 1;
+        bucket.revenue += total;
+      }
+      if (status === pendingValue) {
+        bucket.pendingCount += 1;
+      }
+    }
+    if (status === confirmedValue) {
+      bookingsConfirm += 1;
+      revenueConfirm += total;
+      itemCountMap.set(item, (itemCountMap.get(item) || 0) + 1);
+      itemRevenueMap.set(item, (itemRevenueMap.get(item) || 0) + total);
+    } else if (status === pendingValue) {
+      bookingsPending += 1;
+    }
+  });
+  const statusDistribution = sortMapEntries(statusMap, "desc").map(
+    ([status, count]) => ({
+      status,
+      label: safeStatusLabel(status),
+      count
+    })
+  );
+  const audienceDistribution = sortMapEntries(audienceMap, "desc").map(
+    ([audience, count]) => ({
+      audience,
+      label: safeAudienceLabel(audience),
+      count
+    })
+  );
+  const metricMap = filters.sortPkgBy === "revenue" ? itemRevenueMap : itemCountMap;
+  const topPackages = sortMapEntries(metricMap, filters.sortPkgDir || "desc").slice(0, 5).map(([item, value]) => ({
+    packageId: item,
+    name: item,
+    value: toNumber(value)
+  }));
+  const recentBookings = (raw.recent || []).map((row) => {
+    const status = String(row.status || pendingValue).toLowerCase();
+    return {
+      id: row.id,
+      createdAt: row.created_at,
+      customerName: row.customer_name || "-",
+      packageName: row.item || "-",
+      audienceLabel: safeAudienceLabel(row.audience),
+      totalIDR: toNumber(row.total_idr),
+      status,
+      statusLabel: safeStatusLabel(status)
+    };
+  });
+  const avgRevenue = bookingsConfirm > 0 ? Math.round(revenueConfirm / bookingsConfirm) : 0;
+  const conversionRate = bookingsConfirm + bookingsPending > 0 ? Math.round(bookingsConfirm / (bookingsConfirm + bookingsPending) * 100) : 0;
+  return {
+    stats: {
+      bookingsConfirm,
+      bookingsPending,
+      revenueConfirm,
+      avgRevenue,
+      conversionRate
+    },
+    charts: {
+      dailyTrends: dailyBuckets,
+      statusDistribution,
+      audienceDistribution,
+      topPackages
+    },
+    table: {
+      recentBookings
+    }
+  };
+}
+
 // src/data-source/cidikaSupabaseSource.js
 function ensureNoError(response, message) {
   if (response == null ? void 0 : response.error) {
@@ -965,6 +1200,84 @@ function createTokoSepatuSupabaseSource(supabase) {
   };
 }
 
+// src/data-source/universalSupabaseSource.js
+function createUniversalSource(supabase, { table, columns = {} } = {}) {
+  if (!supabase) {
+    throw new Error("createUniversalSource: prop 'supabase' wajib diisi.");
+  }
+  if (!table) {
+    throw new Error("createUniversalSource: opsi 'table' wajib diisi.");
+  }
+  if (!columns.date) {
+    throw new Error(
+      "createUniversalSource: columns.date wajib diisi (kolom timestamp)."
+    );
+  }
+  const map = {
+    date: columns.date,
+    status: columns.status || null,
+    total: columns.total || null,
+    customer: columns.customer || null,
+    item: columns.item || null,
+    audience: columns.audience || null
+  };
+  const selectCols = Array.from(
+    /* @__PURE__ */ new Set(["id", ...Object.values(map).filter(Boolean)])
+  ).join(", ");
+  const normalize = (row) => ({
+    id: row.id ?? row[map.date],
+    created_at: row[map.date],
+    status: map.status ? row[map.status] : "confirmed",
+    total_idr: map.total ? row[map.total] : 0,
+    item: map.item ? row[map.item] : null,
+    customer_name: map.customer ? row[map.customer] : null,
+    audience: map.audience ? row[map.audience] : "unknown"
+  });
+  return {
+    async fetchDashboardSnapshot({ fromISO, toISO, audience, statusScope }) {
+      const baseQuery = () => supabase.from(table).select(selectCols).gte(map.date, fromISO).lte(map.date, toISO);
+      const bookingsQuery = baseQuery().order(map.date, { ascending: true });
+      if (audience && map.audience) bookingsQuery.eq(map.audience, audience);
+      const recentQuery = baseQuery().order(map.date, { ascending: false }).limit(10);
+      if (audience && map.audience) recentQuery.eq(map.audience, audience);
+      if (statusScope && statusScope !== "all" && map.status) {
+        recentQuery.eq(map.status, statusScope);
+      }
+      const [bookingsRes, recentRes] = await Promise.all([
+        bookingsQuery,
+        recentQuery
+      ]);
+      if (bookingsRes == null ? void 0 : bookingsRes.error) {
+        const err = new Error(
+          `Gagal membaca tabel "${table}". Periksa nama tabel/kolom & RLS policy.`
+        );
+        err.cause = bookingsRes.error;
+        throw err;
+      }
+      const bookings = (bookingsRes.data || []).map(normalize);
+      const recent = (recentRes.error ? [] : recentRes.data || []).map(
+        normalize
+      );
+      return {
+        bookings,
+        recent,
+        packageLocales: [],
+        staticCounts: {}
+      };
+    },
+    subscribeLiveUpdate(onEvent) {
+      const channel = supabase.channel(`reusable-dashboard-universal-${table}`).on(
+        "postgres_changes",
+        { event: "*", schema: "public", table },
+        onEvent
+      ).subscribe();
+      return () => {
+        supabase.removeChannel(channel);
+      };
+    }
+  };
+}
+
 // src/hooks/useReusableDashboard.js
 var import_react2 = require("react");
 
@@ -2211,12 +2524,17 @@ function SetupWizard({ issues = [], onDismiss, supabase }) {
           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);
+        const { error: ping } = await supabase.from("_rdb_wizard_ping_").select("*").limit(1);
+        if (!ping || ping.code === "42P01" || ping.code === "PGRST116" || ping.code === "PGRST200" || ping.message && (ping.message.includes("does not exist") || ping.message.includes("not found") || ping.message.includes("relation"))) {
+          setSupabaseOk(true);
+          setTableBlocked(true);
+        } else {
+          setSupabaseOk(!!supabase);
+          setTableBlocked(true);
+        }
       } catch {
-        setSupabaseOk(false);
+        setSupabaseOk(!!supabase);
+        setTableBlocked(true);
       } finally {
         setDetecting(false);
         setDetectionDone(true);
@@ -2695,6 +3013,152 @@ ReusableDashboardView.propTypes = {
   dashboardConfig: import_prop_types18.default.object
 };
 
+// src/presentation/AutoDashboard.jsx
+var import_react21 = __toESM(require("react"), 1);
+var import_prop_types19 = __toESM(require("prop-types"), 1);
+var DEFAULT_LABELS = {
+  title: "Dashboard",
+  refresh: "Muat ulang",
+  liveUpdate: "Live",
+  loadFailed: "Gagal memuat data dashboard.",
+  retry: "Coba lagi",
+  confirmedOnly: "Hanya berhasil",
+  pendingOnly: "Hanya menunggu",
+  allStatus: "Semua status",
+  showPendingOverlay: "Tampilkan overlay menunggu",
+  allAudience: "Semua segmen",
+  audienceDomestic: "Domestik",
+  audienceForeign: "Asing",
+  customDate: "Custom",
+  reset: "Reset",
+  topSort: "Urutkan item",
+  sortBookings: "Jumlah",
+  sortRevenue: "Nilai",
+  sortDesc: "Turun",
+  sortAsc: "Naik",
+  confirmedBookings: "Transaksi Berhasil",
+  confirmedRevenue: "Pendapatan (Berhasil)",
+  avgRevenue: "Rata-rata Nilai / Transaksi",
+  conversionRate: "Tingkat Konversi",
+  dailyTrends: "Tren Harian",
+  statusDistribution: "Distribusi Status",
+  audienceDistribution: "Distribusi Segmen",
+  topPackages: "Item Teratas",
+  recentBookings: "Transaksi Terbaru",
+  date: "Tanggal",
+  customer: "Pelanggan",
+  package: "Item",
+  audience: "Segmen",
+  total: "Total",
+  status: "Status",
+  noRecentBookings: "Belum ada transaksi terbaru",
+  unknownAudience: "Tidak diketahui"
+};
+function buildLabels(overrides = {}) {
+  const labels = { ...DEFAULT_LABELS, ...overrides };
+  labels.dayLabel = overrides.dayLabel || ((count) => count ? `${count} hari` : "Custom");
+  labels.formatStatusLabel = overrides.formatStatusLabel || ((status) => {
+    const s = String(status || "pending");
+    return s.charAt(0).toUpperCase() + s.slice(1);
+  });
+  labels.formatAudienceLabel = overrides.formatAudienceLabel || ((value) => {
+    if (value === "domestic") return labels.audienceDomestic;
+    if (value === "foreign") return labels.audienceForeign;
+    if (!value || value === "unknown") return labels.unknownAudience;
+    return String(value);
+  });
+  return labels;
+}
+function AutoDashboard({
+  supabase,
+  table,
+  columns,
+  confirmedValue = "confirmed",
+  pendingValue = "pending",
+  title = "Dashboard",
+  labels: labelOverrides,
+  languageCode = "id",
+  dateLocale = "id-ID"
+}) {
+  const isConfigured = Boolean(supabase && table && (columns == null ? void 0 : columns.date));
+  const labels = import_react21.default.useMemo(
+    () => buildLabels({ ...labelOverrides, title }),
+    [labelOverrides, title]
+  );
+  const widgetConfig = import_react21.default.useMemo(
+    () => createUniversalWidgetConfig(columns || {}),
+    [columns]
+  );
+  const dataSource = import_react21.default.useMemo(() => {
+    if (!isConfigured) return null;
+    return createUniversalSource(supabase, { table, columns });
+  }, [isConfigured, supabase, table, columns]);
+  const adapter = import_react21.default.useMemo(
+    () => (args) => adaptUniversalData({ ...args, options: { confirmedValue, pendingValue } }),
+    [confirmedValue, pendingValue]
+  );
+  const dashboard = useReusableDashboard({
+    config: widgetConfig,
+    dataSource: dataSource || { fetchDashboardSnapshot: null },
+    adapter,
+    createEmptyState: createEmptyUniversalData,
+    languageCode,
+    dateLocale,
+    labels
+  });
+  if (!isConfigured) {
+    const issues = [];
+    if (!supabase) issues.push("Prop 'supabase' belum diisi (Supabase client).");
+    if (!table) issues.push("Prop 'table' belum diisi (nama tabel sumber data).");
+    if (!(columns == null ? void 0 : columns.date))
+      issues.push("Prop 'columns.date' belum diisi (kolom timestamp).");
+    return /* @__PURE__ */ import_react21.default.createElement("div", { className: "rdb-view" }, /* @__PURE__ */ import_react21.default.createElement(SetupWizard, { issues, supabase, onDismiss: () => {
+    } }));
+  }
+  return /* @__PURE__ */ import_react21.default.createElement(
+    ReusableDashboardView,
+    {
+      config: widgetConfig,
+      labels,
+      loading: dashboard.loading,
+      error: dashboard.error,
+      filters: dashboard.filters,
+      onFilterChange: dashboard.updateFilter,
+      onResetFilters: dashboard.resetFilters,
+      onRefresh: dashboard.refresh,
+      data: dashboard.data,
+      dateLocale,
+      liveUpdateEnabled: dashboard.liveUpdateEnabled,
+      supabase
+    }
+  );
+}
+AutoDashboard.propTypes = {
+  /** Supabase client instance (WAJIB). */
+  supabase: import_prop_types19.default.object,
+  /** Nama tabel sumber data (WAJIB), mis. "bookings" / "orders". */
+  table: import_prop_types19.default.string,
+  /** Pemetaan kolom: { date, status, total, customer, item, audience }. date WAJIB. */
+  columns: import_prop_types19.default.shape({
+    date: import_prop_types19.default.string,
+    status: import_prop_types19.default.string,
+    total: import_prop_types19.default.string,
+    customer: import_prop_types19.default.string,
+    item: import_prop_types19.default.string,
+    audience: import_prop_types19.default.string
+  }),
+  /** Nilai status yang dihitung "berhasil" (default "confirmed"). */
+  confirmedValue: import_prop_types19.default.string,
+  /** Nilai status yang dihitung "menunggu" (default "pending"). */
+  pendingValue: import_prop_types19.default.string,
+  /** Judul dashboard. */
+  title: import_prop_types19.default.string,
+  /** Override sebagian/seluruh label UI. */
+  labels: import_prop_types19.default.object,
+  languageCode: import_prop_types19.default.string,
+  dateLocale: import_prop_types19.default.string
+};
+
 // src/utils/labels.js
 function createDashboardLabels(t) {
   const labels = {
@@ -2816,6 +3280,7 @@ function createDashboardLabels(t) {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  AutoDashboard,
   Badge,
   Button,
   ChartCard,
@@ -2837,6 +3302,7 @@ function createDashboardLabels(t) {
   adaptCidikaDashboardData,
   adaptDummyUmkmData,
   adaptTokoSepatuData,
+  adaptUniversalData,
   buildDayBuckets,
   cidikaWidgetConfig,
   createCidikaSupabaseSource,
@@ -2846,7 +3312,10 @@ function createDashboardLabels(t) {
   createEmptyDashboardData,
   createEmptyDummyUmkmData,
   createEmptyTokoSepatuData,
+  createEmptyUniversalData,
   createTokoSepatuSupabaseSource,
+  createUniversalSource,
+  createUniversalWidgetConfig,
   dummyUmkmWidgetConfig,
   formatDate,
   formatIDR,