@rozaqi02/reusable-dashboard 1.1.5 → 1.2.0

package/dist/index.js

@@ -309,6 +309,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 {
@@ -714,6 +819,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) {
@@ -887,6 +1117,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
 import { useCallback, useEffect as useEffect2, useMemo, useState as useState2 } from "react";
 
@@ -2162,12 +2470,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);
@@ -2646,6 +2959,152 @@ ReusableDashboardView.propTypes = {
   dashboardConfig: PropTypes18.object
 };
 
+// src/presentation/AutoDashboard.jsx
+import React19 from "react";
+import PropTypes19 from "prop-types";
+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 = React19.useMemo(
+    () => buildLabels({ ...labelOverrides, title }),
+    [labelOverrides, title]
+  );
+  const widgetConfig = React19.useMemo(
+    () => createUniversalWidgetConfig(columns || {}),
+    [columns]
+  );
+  const dataSource = React19.useMemo(() => {
+    if (!isConfigured) return null;
+    return createUniversalSource(supabase, { table, columns });
+  }, [isConfigured, supabase, table, columns]);
+  const adapter = React19.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__ */ React19.createElement("div", { className: "rdb-view" }, /* @__PURE__ */ React19.createElement(SetupWizard, { issues, supabase, onDismiss: () => {
+    } }));
+  }
+  return /* @__PURE__ */ React19.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: PropTypes19.object,
+  /** Nama tabel sumber data (WAJIB), mis. "bookings" / "orders". */
+  table: PropTypes19.string,
+  /** Pemetaan kolom: { date, status, total, customer, item, audience }. date WAJIB. */
+  columns: PropTypes19.shape({
+    date: PropTypes19.string,
+    status: PropTypes19.string,
+    total: PropTypes19.string,
+    customer: PropTypes19.string,
+    item: PropTypes19.string,
+    audience: PropTypes19.string
+  }),
+  /** Nilai status yang dihitung "berhasil" (default "confirmed"). */
+  confirmedValue: PropTypes19.string,
+  /** Nilai status yang dihitung "menunggu" (default "pending"). */
+  pendingValue: PropTypes19.string,
+  /** Judul dashboard. */
+  title: PropTypes19.string,
+  /** Override sebagian/seluruh label UI. */
+  labels: PropTypes19.object,
+  languageCode: PropTypes19.string,
+  dateLocale: PropTypes19.string
+};
+
 // src/utils/labels.js
 function createDashboardLabels(t) {
   const labels = {
@@ -2766,6 +3225,7 @@ function createDashboardLabels(t) {
   return labels;
 }
 export {
+  AutoDashboard,
   Badge,
   Button,
   ChartCard,
@@ -2787,6 +3247,7 @@ export {
   adaptCidikaDashboardData,
   adaptDummyUmkmData,
   adaptTokoSepatuData,
+  adaptUniversalData,
   buildDayBuckets,
   cidikaWidgetConfig,
   createCidikaSupabaseSource,
@@ -2796,7 +3257,10 @@ export {
   createEmptyDashboardData,
   createEmptyDummyUmkmData,
   createEmptyTokoSepatuData,
+  createEmptyUniversalData,
   createTokoSepatuSupabaseSource,
+  createUniversalSource,
+  createUniversalWidgetConfig,
   dummyUmkmWidgetConfig,
   formatDate,
   formatIDR,