@rozaqi02/reusable-dashboard 1.0.0

package/dist/index.cjs

@@ -0,0 +1,2340 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.js
+var index_exports = {};
+__export(index_exports, {
+  Badge: () => Badge,
+  Button: () => Button,
+  ChartCard: () => ChartCard,
+  ChartHeader: () => ChartHeader,
+  DashboardLayout: () => DashboardLayout,
+  DataTable: () => DataTable,
+  DateRangeFilter: () => DateRangeFilter,
+  FilterPanel: () => FilterPanel,
+  Icon: () => Icon,
+  Input: () => Input,
+  ReusableDashboardView: () => ReusableDashboardView,
+  SearchBar: () => SearchBar,
+  SidebarNavigation: () => SidebarNavigation,
+  SkeletonLoader: () => SkeletonLoader,
+  StatCard: () => StatCard,
+  TopbarHeader: () => TopbarHeader,
+  Typography: () => Typography,
+  adaptCidikaDashboardData: () => adaptCidikaDashboardData,
+  adaptDummyUmkmData: () => adaptDummyUmkmData,
+  adaptTokoSepatuData: () => adaptTokoSepatuData,
+  buildDayBuckets: () => buildDayBuckets,
+  cidikaWidgetConfig: () => cidikaWidgetConfig,
+  createCidikaSupabaseSource: () => createCidikaSupabaseSource,
+  createDashboardLabels: () => createDashboardLabels,
+  createDefaultFilters: () => createDefaultFilters,
+  createEmptyDashboardData: () => createEmptyDashboardData,
+  createEmptyDummyUmkmData: () => createEmptyDummyUmkmData,
+  createEmptyTokoSepatuData: () => createEmptyTokoSepatuData,
+  createTokoSepatuSupabaseSource: () => createTokoSepatuSupabaseSource,
+  dummyUmkmWidgetConfig: () => dummyUmkmWidgetConfig,
+  formatDate: () => formatDate,
+  formatIDR: () => formatIDR,
+  formatYYYYMMDD: () => formatYYYYMMDD,
+  resolveDateRange: () => resolveDateRange,
+  resolveIcon: () => resolveIcon,
+  shortId: () => shortId,
+  sortMapEntries: () => sortMapEntries,
+  toNumber: () => toNumber,
+  tokoSepatuWidgetConfig: () => tokoSepatuWidgetConfig,
+  useRealtimeUpdate: () => useRealtimeUpdate,
+  useReusableDashboard: () => useReusableDashboard
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/config/cidikaWidgetConfig.js
+var cidikaWidgetConfig = {
+  id: "cidika.travel.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"
+      },
+      {
+        id: "revenueConfirm",
+        label: "confirmedRevenue",
+        icon: "DollarSign",
+        valueKey: "revenueConfirm",
+        format: "currency"
+      },
+      {
+        id: "avgRevenue",
+        label: "avgRevenue",
+        icon: "Users",
+        valueKey: "avgRevenue",
+        format: "currency"
+      },
+      {
+        id: "conversionRate",
+        label: "conversionRate",
+        icon: "PieChart",
+        valueKey: "conversionRate",
+        format: "percent"
+      }
+    ],
+    charts: [
+      {
+        id: "dailyTrends",
+        type: "dailyArea",
+        label: "dailyTrends",
+        icon: "BarChart3"
+      },
+      {
+        id: "statusDistribution",
+        type: "statusPie",
+        label: "statusDistribution",
+        icon: "PieChart"
+      },
+      {
+        id: "audienceDistribution",
+        type: "audiencePie",
+        label: "audienceDistribution",
+        icon: "Users"
+      },
+      {
+        id: "topPackages",
+        type: "topPackagesBar",
+        label: "topPackages",
+        icon: "TrendingUp"
+      }
+    ],
+    table: {
+      id: "recentBookings",
+      label: "recentBookings",
+      icon: "Calendar",
+      emptyLabel: "noRecentBookings",
+      columns: [
+        { id: "date", label: "date", accessor: "createdAt", type: "date" },
+        { id: "customer", label: "customer", accessor: "customerName" },
+        { id: "package", label: "package", accessor: "packageName" },
+        { id: "audience", label: "audience", accessor: "audienceLabel" },
+        { id: "total", label: "total", accessor: "totalIDR", type: "currency" },
+        {
+          id: "status",
+          label: "status",
+          accessor: "statusLabel",
+          type: "statusBadge",
+          statusAccessor: "status"
+        }
+      ]
+    }
+  }
+};
+
+// src/config/dummyUmkmWidgetConfig.js
+var dummyUmkmWidgetConfig = {
+  id: "dummy.umkm.dashboard",
+  defaultFilters: {
+    statusScope: "all",
+    includePendingOverlay: false,
+    audience: "",
+    daysPreset: 30,
+    sortPkgBy: "revenue",
+    sortPkgDir: "desc"
+  },
+  widgets: {
+    stats: [
+      {
+        id: "orders",
+        label: "confirmedBookings",
+        icon: "TrendingUp",
+        valueKey: "bookingsConfirm",
+        format: "number"
+      },
+      {
+        id: "revenue",
+        label: "confirmedRevenue",
+        icon: "DollarSign",
+        valueKey: "revenueConfirm",
+        format: "currency"
+      }
+    ],
+    charts: [
+      {
+        id: "revenueTrend",
+        type: "dailyArea",
+        label: "dailyTrends",
+        icon: "BarChart3"
+      },
+      {
+        id: "recentOrderStatus",
+        type: "statusPie",
+        label: "statusDistribution",
+        icon: "PieChart"
+      }
+    ],
+    table: {
+      id: "recentOrders",
+      label: "recentBookings",
+      icon: "Calendar",
+      emptyLabel: "noRecentBookings",
+      columns: [
+        { id: "date", label: "date", accessor: "createdAt", type: "date" },
+        { id: "customer", label: "customer", accessor: "customerName" },
+        { id: "total", label: "total", accessor: "totalIDR", type: "currency" }
+      ]
+    }
+  }
+};
+
+// src/config/tokoSepatuWidgetConfig.js
+var tokoSepatuWidgetConfig = {
+  id: "toko.sepatu.dashboard",
+  defaultFilters: {
+    statusScope: "all",
+    includePendingOverlay: false,
+    audience: "",
+    daysPreset: 30,
+    sortPkgBy: "revenue",
+    sortPkgDir: "desc"
+  },
+  widgets: {
+    stats: [
+      {
+        id: "totalOrders",
+        label: "confirmedBookings",
+        icon: "TrendingUp",
+        valueKey: "bookingsConfirm",
+        format: "number"
+      },
+      {
+        id: "totalRevenue",
+        label: "confirmedRevenue",
+        icon: "DollarSign",
+        valueKey: "revenueConfirm",
+        format: "currency"
+      },
+      {
+        id: "avgOrderValue",
+        label: "avgRevenue",
+        icon: "BarChart3",
+        valueKey: "avgRevenue",
+        format: "currency"
+      },
+      {
+        id: "totalProducts",
+        label: "totalProducts",
+        icon: "PieChart",
+        valueKey: "packages",
+        format: "number"
+      }
+    ],
+    charts: [
+      {
+        id: "dailyOrderTrends",
+        type: "dailyArea",
+        label: "dailyTrends",
+        icon: "BarChart3"
+      },
+      {
+        id: "orderStatusDistribution",
+        type: "statusPie",
+        label: "statusDistribution",
+        icon: "PieChart"
+      },
+      {
+        id: "topProducts",
+        type: "topPackagesBar",
+        label: "topPackages",
+        icon: "TrendingUp"
+      }
+    ],
+    table: {
+      id: "recentOrders",
+      label: "recentBookings",
+      icon: "Calendar",
+      emptyLabel: "noRecentBookings",
+      columns: [
+        { id: "date", label: "date", accessor: "createdAt", type: "date" },
+        { id: "customer", label: "customer", accessor: "customerName" },
+        { id: "product", label: "package", accessor: "packageName" },
+        { id: "total", label: "total", accessor: "totalIDR", type: "currency" },
+        {
+          id: "status",
+          label: "status",
+          accessor: "statusLabel",
+          type: "statusBadge",
+          statusAccessor: "status"
+        }
+      ]
+    }
+  }
+};
+
+// src/utils/formatters.js
+function formatIDR(value) {
+  try {
+    return (Number(value) || 0).toLocaleString("id-ID");
+  } catch (_error) {
+    return String(value ?? 0);
+  }
+}
+function shortId(value, length = 8) {
+  if (!value) return "-";
+  return String(value).slice(0, length);
+}
+function formatDate(value, locale) {
+  if (!value) return "-";
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return "-";
+  return date.toLocaleDateString(locale);
+}
+
+// src/utils/adapterHelpers.js
+function toNumber(value) {
+  const parsed = Number(value);
+  return Number.isFinite(parsed) ? parsed : 0;
+}
+function buildDayBuckets(daysWindow, fromISO, dateLocale) {
+  const start = new Date(fromISO);
+  return Array.from({ length: daysWindow }).map((_, index) => {
+    const day = new Date(start);
+    day.setDate(start.getDate() + index);
+    return {
+      dateKey: day.toISOString().slice(0, 10),
+      label: day.toLocaleDateString(dateLocale, {
+        day: "2-digit",
+        month: "short"
+      }),
+      count: 0,
+      revenue: 0,
+      pendingCount: 0
+    };
+  });
+}
+function sortMapEntries(map, direction) {
+  return Array.from(map.entries()).sort(
+    (a, b) => direction === "asc" ? a[1] - b[1] : b[1] - a[1]
+  );
+}
+
+// src/data-adapter/cidikaDashboardAdapter.js
+function createPackageTitleResolver(packageLocales, languageCode) {
+  const byPackage = /* @__PURE__ */ new Map();
+  packageLocales.forEach((row) => {
+    if (!row.package_id) return;
+    const current = byPackage.get(row.package_id) || {};
+    byPackage.set(row.package_id, {
+      ...current,
+      [row.lang]: row.title
+    });
+  });
+  return (packageId) => {
+    if (!packageId) return "-";
+    const labels = byPackage.get(packageId);
+    if (!labels) return shortId(packageId, 6);
+    return labels[languageCode] || labels.en || labels.id || Object.values(labels).find(Boolean) || shortId(packageId, 6);
+  };
+}
+function createEmptyDashboardData() {
+  return {
+    stats: {
+      bookingsConfirm: 0,
+      bookingsPending: 0,
+      revenueConfirm: 0,
+      packages: 0,
+      sections: 0,
+      avgRevenue: 0,
+      conversionRate: 0
+    },
+    charts: {
+      dailyTrends: [],
+      statusDistribution: [],
+      audienceDistribution: [],
+      topPackages: []
+    },
+    table: {
+      recentBookings: []
+    }
+  };
+}
+function adaptCidikaDashboardData({
+  raw,
+  filters,
+  range,
+  dateLocale,
+  languageCode,
+  labels
+}) {
+  var _a, _b;
+  if (!raw) return createEmptyDashboardData();
+  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 packageCountMap = /* @__PURE__ */ new Map();
+  const packageRevenueMap = /* @__PURE__ */ new Map();
+  const getPackageTitle = createPackageTitleResolver(
+    raw.packageLocales || [],
+    languageCode
+  );
+  let bookingsConfirm = 0;
+  let bookingsPending = 0;
+  let revenueConfirm = 0;
+  (raw.bookings || []).forEach((row) => {
+    const dayKey = String(row.created_at || "").slice(0, 10);
+    const status = String(row.status || "pending").toLowerCase();
+    const total = toNumber(row.total_idr);
+    const audience = row.audience || "unknown";
+    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 === "confirmed") {
+        bucket.count += 1;
+        bucket.revenue += total;
+      }
+      if (status === "pending") {
+        bucket.pendingCount += 1;
+      }
+    }
+    if (status === "confirmed") {
+      bookingsConfirm += 1;
+      revenueConfirm += total;
+      packageCountMap.set(
+        row.package_id,
+        (packageCountMap.get(row.package_id) || 0) + 1
+      );
+      packageRevenueMap.set(
+        row.package_id,
+        (packageRevenueMap.get(row.package_id) || 0) + total
+      );
+    } else if (status === "pending") {
+      bookingsPending += 1;
+    }
+  });
+  const statusDistribution = sortMapEntries(statusMap, "desc").map(
+    ([status, count]) => ({
+      status,
+      label: labels.formatStatusLabel(status),
+      count
+    })
+  );
+  const audienceDistribution = sortMapEntries(audienceMap, "desc").map(
+    ([audience, count]) => ({
+      audience,
+      label: labels.formatAudienceLabel(audience),
+      count
+    })
+  );
+  const metricMap = filters.sortPkgBy === "revenue" ? packageRevenueMap : packageCountMap;
+  const topPackages = sortMapEntries(metricMap, filters.sortPkgDir).slice(0, 5).map(([packageId, value]) => ({
+    packageId,
+    name: getPackageTitle(packageId),
+    value: toNumber(value)
+  }));
+  const recentBookings = (raw.recent || []).map((row) => {
+    const status = String(row.status || "pending").toLowerCase();
+    return {
+      id: row.id,
+      createdAt: row.created_at,
+      customerName: row.customer_name || "-",
+      packageName: getPackageTitle(row.package_id),
+      audienceLabel: labels.formatAudienceLabel(row.audience),
+      totalIDR: toNumber(row.total_idr),
+      status,
+      statusLabel: labels.formatStatusLabel(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,
+      packages: toNumber((_a = raw.staticCounts) == null ? void 0 : _a.packages),
+      sections: toNumber((_b = raw.staticCounts) == null ? void 0 : _b.sections),
+      avgRevenue,
+      conversionRate
+    },
+    charts: {
+      dailyTrends: dailyBuckets,
+      statusDistribution,
+      audienceDistribution,
+      topPackages
+    },
+    table: {
+      recentBookings
+    }
+  };
+}
+
+// src/data-adapter/dummyUmkmDashboardAdapter.js
+function createEmptyDummyUmkmData() {
+  return {
+    stats: {
+      bookingsConfirm: 0,
+      revenueConfirm: 0,
+      totalProducts: 0,
+      totalCustomers: 0
+    },
+    charts: {
+      dailyTrends: [],
+      statusDistribution: [],
+      audienceDistribution: [],
+      topPackages: []
+    },
+    table: {
+      recentBookings: []
+    }
+  };
+}
+function adaptDummyUmkmData({ raw, filters, range, dateLocale, labels }) {
+  var _a, _b;
+  if (!raw) return createEmptyDummyUmkmData();
+  const orders = raw.bookings || [];
+  const recent = raw.recent || [];
+  const dailyBuckets = buildDayBuckets(range.daysWindow, range.fromISO, dateLocale);
+  const dayLookup = new Map(dailyBuckets.map((b) => [b.dateKey, b]));
+  const statusMap = /* @__PURE__ */ new Map();
+  let totalOrders = 0;
+  let totalRevenue = 0;
+  orders.forEach((row) => {
+    const dayKey = String(row.created_at || "").slice(0, 10);
+    const status = String(row.status || "pending").toLowerCase();
+    const amount = toNumber(row.total_amount);
+    statusMap.set(status, (statusMap.get(status) || 0) + 1);
+    const bucket = dayLookup.get(dayKey);
+    if (bucket) {
+      if (status === "confirmed") {
+        bucket.count += 1;
+        bucket.revenue += amount;
+      }
+      if (status === "pending") {
+        bucket.pendingCount += 1;
+      }
+    }
+    if (status === "confirmed") {
+      totalOrders += 1;
+      totalRevenue += amount;
+    }
+  });
+  const statusDistribution = Array.from(statusMap.entries()).sort((a, b) => b[1] - a[1]).map(([status, count]) => ({
+    status,
+    label: (labels == null ? void 0 : labels.formatStatusLabel) ? labels.formatStatusLabel(status) : status,
+    count
+  }));
+  const recentBookings = recent.map((row) => {
+    const status = String(row.status || "pending").toLowerCase();
+    return {
+      id: row.id,
+      createdAt: row.created_at,
+      customerName: row.customer_name || "-",
+      packageName: row.product_name || row.product_id || "-",
+      totalIDR: toNumber(row.total_amount),
+      status,
+      statusLabel: (labels == null ? void 0 : labels.formatStatusLabel) ? labels.formatStatusLabel(status) : status
+    };
+  });
+  return {
+    stats: {
+      bookingsConfirm: totalOrders,
+      revenueConfirm: totalRevenue,
+      totalProducts: toNumber((_a = raw.staticCounts) == null ? void 0 : _a.packages),
+      totalCustomers: toNumber((_b = raw.staticCounts) == null ? void 0 : _b.sections)
+    },
+    charts: {
+      dailyTrends: dailyBuckets,
+      statusDistribution,
+      audienceDistribution: [],
+      topPackages: []
+    },
+    table: {
+      recentBookings
+    }
+  };
+}
+
+// src/data-adapter/tokoSepatuDashboardAdapter.js
+function createEmptyTokoSepatuData() {
+  return {
+    stats: {
+      bookingsConfirm: 0,
+      bookingsPending: 0,
+      revenueConfirm: 0,
+      packages: 0,
+      sections: 0,
+      avgRevenue: 0,
+      conversionRate: 0
+    },
+    charts: {
+      dailyTrends: [],
+      statusDistribution: [],
+      audienceDistribution: [],
+      topPackages: []
+    },
+    table: {
+      recentBookings: []
+    }
+  };
+}
+function adaptTokoSepatuData({ raw, filters, range, dateLocale, labels }) {
+  var _a, _b;
+  if (!raw) return createEmptyTokoSepatuData();
+  const orders = raw.bookings || [];
+  const recent = raw.recent || [];
+  const dailyBuckets = buildDayBuckets(range.daysWindow, range.fromISO, dateLocale);
+  const dayLookup = new Map(dailyBuckets.map((b) => [b.dateKey, b]));
+  const statusMap = /* @__PURE__ */ new Map();
+  const productCountMap = /* @__PURE__ */ new Map();
+  const productRevenueMap = /* @__PURE__ */ new Map();
+  let ordersConfirm = 0;
+  let ordersPending = 0;
+  let revenueConfirm = 0;
+  const productNameMap = /* @__PURE__ */ new Map();
+  (raw.products || []).forEach((p) => {
+    productNameMap.set(p.id, p.name);
+  });
+  orders.forEach((row) => {
+    const dayKey = String(row.created_at || "").slice(0, 10);
+    const status = String(row.status || "pending").toLowerCase();
+    const total = toNumber(row.total_amount);
+    statusMap.set(status, (statusMap.get(status) || 0) + 1);
+    const bucket = dayLookup.get(dayKey);
+    if (bucket) {
+      if (status === "confirmed") {
+        bucket.count += 1;
+        bucket.revenue += total;
+      }
+      if (status === "pending") {
+        bucket.pendingCount += 1;
+      }
+    }
+    if (status === "confirmed") {
+      ordersConfirm += 1;
+      revenueConfirm += total;
+      const items = row.order_items || [];
+      items.forEach((item) => {
+        const pid = item.product_id;
+        productCountMap.set(pid, (productCountMap.get(pid) || 0) + toNumber(item.qty));
+        productRevenueMap.set(pid, (productRevenueMap.get(pid) || 0) + toNumber(item.subtotal));
+      });
+    } else if (status === "pending") {
+      ordersPending += 1;
+    }
+  });
+  const statusDistribution = sortMapEntries(statusMap, "desc").map(
+    ([status, count]) => ({
+      status,
+      label: (labels == null ? void 0 : labels.formatStatusLabel) ? labels.formatStatusLabel(status) : status,
+      count
+    })
+  );
+  const metricMap = filters.sortPkgBy === "revenue" ? productRevenueMap : productCountMap;
+  const topPackages = sortMapEntries(metricMap, filters.sortPkgDir || "desc").slice(0, 5).map(([productId, value]) => ({
+    packageId: productId,
+    name: productNameMap.get(productId) || shortId(productId, 6),
+    value: toNumber(value)
+  }));
+  const recentBookings = recent.map((row) => {
+    const status = String(row.status || "pending").toLowerCase();
+    const productName = row.product_name || (row.order_items && row.order_items[0] ? productNameMap.get(row.order_items[0].product_id) : null) || "-";
+    return {
+      id: row.id,
+      createdAt: row.created_at,
+      customerName: row.customer_name || "-",
+      packageName: productName,
+      totalIDR: toNumber(row.total_amount),
+      status,
+      statusLabel: (labels == null ? void 0 : labels.formatStatusLabel) ? labels.formatStatusLabel(status) : status
+    };
+  });
+  const avgRevenue = ordersConfirm > 0 ? Math.round(revenueConfirm / ordersConfirm) : 0;
+  const conversionRate = ordersConfirm + ordersPending > 0 ? Math.round(ordersConfirm / (ordersConfirm + ordersPending) * 100) : 0;
+  return {
+    stats: {
+      bookingsConfirm: ordersConfirm,
+      bookingsPending: ordersPending,
+      revenueConfirm,
+      packages: toNumber((_a = raw.staticCounts) == null ? void 0 : _a.products),
+      sections: toNumber((_b = raw.staticCounts) == null ? void 0 : _b.customers),
+      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) {
+    const err = new Error(message);
+    err.cause = response.error;
+    throw err;
+  }
+}
+function createCidikaSupabaseSource(supabase) {
+  return {
+    async fetchDashboardSnapshot({
+      fromISO,
+      toISO,
+      audience,
+      statusScope,
+      languageCode
+    }) {
+      const bookingsQuery = supabase.from("bookings").select(
+        "id, created_at, total_idr, status, package_id, audience, customer_name"
+      ).gte("created_at", fromISO).lte("created_at", toISO).order("created_at", { ascending: true });
+      if (audience) bookingsQuery.eq("audience", audience);
+      const recentQuery = supabase.from("bookings").select(
+        "id, created_at, customer_name, total_idr, status, package_id, audience"
+      ).gte("created_at", fromISO).lte("created_at", toISO).order("created_at", { ascending: false }).limit(10);
+      if (audience) recentQuery.eq("audience", audience);
+      if (statusScope && statusScope !== "all") {
+        recentQuery.eq("status", statusScope);
+      }
+      const [bookingsRes, recentRes, packagesRes, sectionsRes] = await Promise.all(
+        [
+          bookingsQuery,
+          recentQuery,
+          supabase.from("packages").select("*", { count: "exact", head: true }),
+          supabase.from("page_sections").select("*", { count: "exact", head: true })
+        ]
+      );
+      ensureNoError(bookingsRes, "Failed to load booking rows.");
+      ensureNoError(recentRes, "Failed to load recent rows.");
+      const bookings = bookingsRes.data || [];
+      const recent = recentRes.data || [];
+      const packageIds = Array.from(
+        new Set(
+          [...bookings, ...recent].map((row) => row.package_id).filter((value) => Boolean(value))
+        )
+      );
+      let packageLocales = [];
+      if (packageIds.length > 0) {
+        const localeRes = await supabase.from("package_locales").select("package_id,title,lang").in("package_id", packageIds).in("lang", [languageCode, "en", "id"]);
+        if (!localeRes.error) {
+          packageLocales = localeRes.data || [];
+        }
+      }
+      return {
+        bookings,
+        recent,
+        packageLocales,
+        staticCounts: {
+          packages: packagesRes.error ? 0 : packagesRes.count || 0,
+          sections: sectionsRes.error ? 0 : sectionsRes.count || 0
+        }
+      };
+    },
+    subscribeLiveUpdate(onEvent) {
+      const channel = supabase.channel("reusable-dashboard-live").on(
+        "postgres_changes",
+        { event: "*", schema: "public", table: "bookings" },
+        onEvent
+      ).on(
+        "postgres_changes",
+        { event: "*", schema: "public", table: "packages" },
+        onEvent
+      ).on(
+        "postgres_changes",
+        { event: "*", schema: "public", table: "page_sections" },
+        onEvent
+      ).on(
+        "postgres_changes",
+        { event: "*", schema: "public", table: "package_locales" },
+        onEvent
+      ).subscribe();
+      return () => {
+        supabase.removeChannel(channel);
+      };
+    }
+  };
+}
+
+// src/data-source/tokoSepatuSupabaseSource.js
+function ensureNoError2(response, message) {
+  if (response == null ? void 0 : response.error) {
+    const err = new Error(message);
+    err.cause = response.error;
+    throw err;
+  }
+}
+function createTokoSepatuSupabaseSource(supabase) {
+  return {
+    /**
+     * Mengambil snapshot data dashboard dari Supabase.
+     */
+    async fetchDashboardSnapshot({
+      fromISO,
+      toISO,
+      audience,
+      statusScope
+    }) {
+      const ordersQuery = supabase.from("orders").select(
+        "id, created_at, total_amount, status, customer_id, order_items(product_id, qty, price_idr, subtotal)"
+      ).gte("created_at", fromISO).lte("created_at", toISO).order("created_at", { ascending: true });
+      const recentQuery = supabase.from("orders").select(
+        "id, created_at, total_amount, status, customers(name), order_items(product_id, qty, products(name))"
+      ).gte("created_at", fromISO).lte("created_at", toISO).order("created_at", { ascending: false }).limit(10);
+      if (statusScope && statusScope !== "all") {
+        recentQuery.eq("status", statusScope);
+      }
+      const [ordersRes, recentRes, productsRes, customersRes] = await Promise.all([
+        ordersQuery,
+        recentQuery,
+        supabase.from("products").select("id, name, brand, category, price_idr"),
+        supabase.from("customers").select("*", { count: "exact", head: true })
+      ]);
+      ensureNoError2(ordersRes, "Failed to load orders.");
+      ensureNoError2(recentRes, "Failed to load recent orders.");
+      const orders = ordersRes.data || [];
+      const recentRaw = recentRes.data || [];
+      const products = productsRes.data || [];
+      const recent = recentRaw.map((row) => {
+        var _a, _b, _c, _d;
+        return {
+          id: row.id,
+          created_at: row.created_at,
+          total_amount: row.total_amount,
+          status: row.status,
+          customer_name: ((_a = row.customers) == null ? void 0 : _a.name) || "-",
+          product_name: ((_d = (_c = (_b = row.order_items) == null ? void 0 : _b[0]) == null ? void 0 : _c.products) == null ? void 0 : _d.name) || "-",
+          order_items: row.order_items
+        };
+      });
+      return {
+        bookings: orders,
+        recent,
+        products,
+        packageLocales: [],
+        staticCounts: {
+          products: products.length,
+          customers: customersRes.error ? 0 : customersRes.count || 0
+        }
+      };
+    },
+    /**
+     * Subscribe ke perubahan realtime pada tabel orders dan products.
+     */
+    subscribeLiveUpdate(onEvent) {
+      const channel = supabase.channel("toko-sepatu-dashboard-live").on(
+        "postgres_changes",
+        { event: "*", schema: "public", table: "orders" },
+        onEvent
+      ).on(
+        "postgres_changes",
+        { event: "*", schema: "public", table: "products" },
+        onEvent
+      ).on(
+        "postgres_changes",
+        { event: "*", schema: "public", table: "order_items" },
+        onEvent
+      ).subscribe();
+      return () => {
+        supabase.removeChannel(channel);
+      };
+    }
+  };
+}
+
+// src/hooks/useReusableDashboard.js
+var import_react2 = require("react");
+
+// src/utils/dateRange.js
+function startOfDayISO(date) {
+  const value = new Date(date);
+  value.setHours(0, 0, 0, 0);
+  return value.toISOString();
+}
+function endOfDayISO(date) {
+  const value = new Date(date);
+  value.setHours(23, 59, 59, 999);
+  return value.toISOString();
+}
+function formatYYYYMMDD(date) {
+  const value = new Date(date);
+  const year = value.getFullYear();
+  const month = String(value.getMonth() + 1).padStart(2, "0");
+  const day = String(value.getDate()).padStart(2, "0");
+  return `${year}-${month}-${day}`;
+}
+function createDefaultFilters(base = {}) {
+  const fromDate = /* @__PURE__ */ new Date();
+  fromDate.setDate(fromDate.getDate() - 29);
+  return {
+    statusScope: "confirmed",
+    includePendingOverlay: false,
+    audience: "",
+    daysPreset: 30,
+    dateFrom: formatYYYYMMDD(fromDate),
+    dateTo: formatYYYYMMDD(/* @__PURE__ */ new Date()),
+    sortPkgBy: "bookings",
+    sortPkgDir: "desc",
+    ...base
+  };
+}
+var MIN_YEAR = 2e3;
+var MAX_DAYS_WINDOW = 365 * 5;
+function isReasonableDate(date) {
+  if (!date || Number.isNaN(date.getTime())) return false;
+  const year = date.getFullYear();
+  return year >= MIN_YEAR && year <= (/* @__PURE__ */ new Date()).getFullYear() + 1;
+}
+function resolveDateRange({ daysPreset, dateFrom, dateTo }) {
+  if (Number(daysPreset) > 0) {
+    const fromDate = /* @__PURE__ */ new Date();
+    fromDate.setDate(fromDate.getDate() - (Number(daysPreset) - 1));
+    const toDate = /* @__PURE__ */ new Date();
+    return {
+      fromISO: startOfDayISO(fromDate),
+      toISO: endOfDayISO(toDate),
+      daysWindow: Number(daysPreset)
+    };
+  }
+  const fallbackFrom = new Date(Date.now() - 29 * 24 * 60 * 60 * 1e3);
+  const fallbackTo = /* @__PURE__ */ new Date();
+  let from = dateFrom ? new Date(dateFrom) : fallbackFrom;
+  let to = dateTo ? new Date(dateTo) : fallbackTo;
+  if (!isReasonableDate(from)) from = fallbackFrom;
+  if (!isReasonableDate(to)) to = fallbackTo;
+  if (from.getTime() > to.getTime()) {
+    const swap = from;
+    from = to;
+    to = swap;
+  }
+  const fromISO = startOfDayISO(from);
+  const toISO = endOfDayISO(to);
+  const diffMs = new Date(toISO).getTime() - new Date(fromISO).getTime();
+  const daysWindow = Math.min(
+    MAX_DAYS_WINDOW,
+    Math.max(1, Math.round(diffMs / 864e5) + 1)
+  );
+  return { fromISO, toISO, daysWindow };
+}
+
+// src/hooks/useRealtimeUpdate.js
+var import_react = require("react");
+function useRealtimeUpdate({ dataSource, onUpdate, debounceMs = 350 }) {
+  const [liveUpdateEnabled, setLiveUpdateEnabled] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => {
+    if (!(dataSource == null ? void 0 : dataSource.subscribeLiveUpdate)) return void 0;
+    let debounceId;
+    setLiveUpdateEnabled(true);
+    const unsubscribe = dataSource.subscribeLiveUpdate(() => {
+      clearTimeout(debounceId);
+      debounceId = setTimeout(() => {
+        onUpdate == null ? void 0 : onUpdate();
+      }, debounceMs);
+    });
+    return () => {
+      clearTimeout(debounceId);
+      setLiveUpdateEnabled(false);
+      unsubscribe == null ? void 0 : unsubscribe();
+    };
+  }, [dataSource, debounceMs]);
+  return { liveUpdateEnabled };
+}
+
+// src/hooks/useReusableDashboard.js
+function useReusableDashboard({
+  config,
+  dataSource,
+  adapter,
+  createEmptyState,
+  languageCode,
+  dateLocale,
+  labels
+}) {
+  const [filters, setFilters] = (0, import_react2.useState)(
+    () => createDefaultFilters(config == null ? void 0 : config.defaultFilters)
+  );
+  const [loading, setLoading] = (0, import_react2.useState)(true);
+  const [error, setError] = (0, import_react2.useState)("");
+  const [lastUpdatedAt, setLastUpdatedAt] = (0, import_react2.useState)(null);
+  const [data, setData] = (0, import_react2.useState)(() => createEmptyState());
+  const range = (0, import_react2.useMemo)(
+    () => resolveDateRange({
+      daysPreset: filters.daysPreset,
+      dateFrom: filters.dateFrom,
+      dateTo: filters.dateTo
+    }),
+    [filters.daysPreset, filters.dateFrom, filters.dateTo]
+  );
+  const refresh = (0, import_react2.useCallback)(
+    async ({ silent = false } = {}) => {
+      if (!(dataSource == null ? void 0 : dataSource.fetchDashboardSnapshot)) return;
+      if (!silent) {
+        setLoading(true);
+        setError("");
+      }
+      try {
+        const raw = await dataSource.fetchDashboardSnapshot({
+          fromISO: range.fromISO,
+          toISO: range.toISO,
+          audience: filters.audience,
+          statusScope: filters.statusScope,
+          languageCode
+        });
+        const adapted = adapter({
+          raw,
+          filters,
+          range,
+          dateLocale,
+          languageCode,
+          labels
+        });
+        setData(adapted);
+        setLastUpdatedAt(/* @__PURE__ */ new Date());
+        if (!silent) setError("");
+      } catch (loadError) {
+        console.error(loadError);
+        if (!silent) {
+          setError(labels.loadFailed);
+          setData(createEmptyState());
+        }
+      } finally {
+        if (!silent) setLoading(false);
+      }
+    },
+    [
+      dataSource,
+      range,
+      filters,
+      languageCode,
+      adapter,
+      dateLocale,
+      labels,
+      createEmptyState
+    ]
+  );
+  (0, import_react2.useEffect)(() => {
+    refresh();
+  }, [refresh]);
+  const { liveUpdateEnabled } = useRealtimeUpdate({
+    dataSource,
+    onUpdate: () => refresh({ silent: true })
+  });
+  const updateFilter = (0, import_react2.useCallback)((field, value) => {
+    setFilters((current) => ({
+      ...current,
+      [field]: value
+    }));
+  }, []);
+  const resetFilters = (0, import_react2.useCallback)(() => {
+    setFilters(createDefaultFilters(config == null ? void 0 : config.defaultFilters));
+  }, [config == null ? void 0 : config.defaultFilters]);
+  return {
+    filters,
+    updateFilter,
+    resetFilters,
+    loading,
+    error,
+    data,
+    refresh,
+    range,
+    liveUpdateEnabled,
+    lastUpdatedAt
+  };
+}
+
+// src/presentation/atoms/Button.jsx
+var import_react3 = __toESM(require("react"), 1);
+var import_prop_types = __toESM(require("prop-types"), 1);
+function Button({
+  variant = "primary",
+  size = "md",
+  disabled = false,
+  className = "",
+  onClick,
+  children,
+  ...rest
+}) {
+  const base = "inline-flex items-center justify-center font-medium rounded-xl transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed";
+  const variants = {
+    primary: "bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500",
+    secondary: "border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-700 focus:ring-slate-400",
+    ghost: "text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800 focus:ring-slate-400"
+  };
+  const sizes = {
+    sm: "px-2.5 py-1 text-xs gap-1",
+    md: "px-3 py-1.5 text-sm gap-1.5",
+    lg: "px-4 py-2 text-base gap-2"
+  };
+  const classes = [base, variants[variant] || variants.primary, sizes[size] || sizes.md, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ import_react3.default.createElement(
+    "button",
+    {
+      type: "button",
+      className: classes,
+      disabled,
+      onClick,
+      ...rest
+    },
+    children
+  );
+}
+Button.propTypes = {
+  /** Varian visual tombol. */
+  variant: import_prop_types.default.oneOf(["primary", "secondary", "ghost"]),
+  /** Ukuran tombol. */
+  size: import_prop_types.default.oneOf(["sm", "md", "lg"]),
+  /** Apakah tombol non-aktif. */
+  disabled: import_prop_types.default.bool,
+  /** ClassName tambahan dari consumer. */
+  className: import_prop_types.default.string,
+  /** Callback saat tombol diklik. */
+  onClick: import_prop_types.default.func,
+  /** Konten tombol. */
+  children: import_prop_types.default.node.isRequired
+};
+
+// src/presentation/atoms/Input.jsx
+var import_react4 = __toESM(require("react"), 1);
+var import_prop_types2 = __toESM(require("prop-types"), 1);
+function Input({
+  type = "text",
+  value,
+  onChange,
+  placeholder,
+  label,
+  disabled = false,
+  className = "",
+  ...rest
+}) {
+  const inputClasses = [
+    "px-3 py-2 rounded-2xl border border-slate-300 dark:border-slate-600",
+    "bg-white dark:bg-slate-800 text-slate-900 dark:text-slate-100",
+    "text-sm transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500",
+    "disabled:opacity-50 disabled:cursor-not-allowed",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ import_react4.default.createElement("div", { className: "flex flex-col gap-1" }, label ? /* @__PURE__ */ import_react4.default.createElement("label", { className: "text-xs font-medium text-slate-500 dark:text-slate-400" }, label) : null, /* @__PURE__ */ import_react4.default.createElement(
+    "input",
+    {
+      type,
+      value,
+      onChange,
+      placeholder,
+      disabled,
+      className: inputClasses,
+      ...rest
+    }
+  ));
+}
+Input.propTypes = {
+  /** Tipe input. */
+  type: import_prop_types2.default.string,
+  /** Nilai input. */
+  value: import_prop_types2.default.oneOfType([import_prop_types2.default.string, import_prop_types2.default.number]),
+  /** Callback saat nilai berubah. */
+  onChange: import_prop_types2.default.func,
+  /** Placeholder teks. */
+  placeholder: import_prop_types2.default.string,
+  /** Label di atas input. */
+  label: import_prop_types2.default.string,
+  /** Apakah input non-aktif. */
+  disabled: import_prop_types2.default.bool,
+  /** ClassName tambahan. */
+  className: import_prop_types2.default.string
+};
+
+// src/presentation/atoms/Icon.jsx
+var import_react5 = __toESM(require("react"), 1);
+var import_prop_types3 = __toESM(require("prop-types"), 1);
+var import_lucide_react = require("lucide-react");
+var ICON_REGISTRY = {
+  BarChart3: import_lucide_react.BarChart3,
+  Calendar: import_lucide_react.Calendar,
+  DollarSign: import_lucide_react.DollarSign,
+  PieChart: import_lucide_react.PieChart,
+  RotateCcw: import_lucide_react.RotateCcw,
+  TrendingUp: import_lucide_react.TrendingUp,
+  TrendingDown: import_lucide_react.TrendingDown,
+  Users: import_lucide_react.Users,
+  Search: import_lucide_react.Search,
+  ChevronLeft: import_lucide_react.ChevronLeft,
+  ChevronRight: import_lucide_react.ChevronRight,
+  ArrowUp: import_lucide_react.ArrowUp,
+  ArrowDown: import_lucide_react.ArrowDown,
+  AlertCircle: import_lucide_react.AlertCircle
+};
+function Icon({ name, size = 20, className = "", ...rest }) {
+  const IconComponent = ICON_REGISTRY[name] || import_lucide_react.BarChart3;
+  return /* @__PURE__ */ import_react5.default.createElement(IconComponent, { size, className, ...rest });
+}
+function resolveIcon(name) {
+  return ICON_REGISTRY[name] || import_lucide_react.BarChart3;
+}
+Icon.propTypes = {
+  /** Nama ikon dari registry Lucide React. */
+  name: import_prop_types3.default.string.isRequired,
+  /** Ukuran ikon dalam piksel. */
+  size: import_prop_types3.default.number,
+  /** ClassName tambahan. */
+  className: import_prop_types3.default.string
+};
+
+// src/presentation/atoms/Typography.jsx
+var import_react6 = __toESM(require("react"), 1);
+var import_prop_types4 = __toESM(require("prop-types"), 1);
+var VARIANT_MAP = {
+  h1: { tag: "h1", className: "text-2xl sm:text-3xl font-bold" },
+  h2: { tag: "h2", className: "text-xl sm:text-2xl font-bold" },
+  h3: { tag: "h3", className: "text-lg font-semibold" },
+  subheading: { tag: "p", className: "text-sm font-medium text-slate-500 dark:text-slate-400" },
+  body: { tag: "p", className: "text-sm text-slate-700 dark:text-slate-300" },
+  caption: { tag: "span", className: "text-xs text-slate-500 dark:text-slate-400" },
+  metric: { tag: "span", className: "text-3xl font-bold text-slate-900 dark:text-slate-100" }
+};
+function Typography({
+  variant = "body",
+  className = "",
+  children,
+  ...rest
+}) {
+  const config = VARIANT_MAP[variant] || VARIANT_MAP.body;
+  const Tag = config.tag;
+  const classes = [config.className, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ import_react6.default.createElement(Tag, { className: classes, ...rest }, children);
+}
+Typography.propTypes = {
+  /** Varian tipografi. */
+  variant: import_prop_types4.default.oneOf(["h1", "h2", "h3", "subheading", "body", "caption", "metric"]),
+  /** ClassName tambahan. */
+  className: import_prop_types4.default.string,
+  /** Konten teks. */
+  children: import_prop_types4.default.node.isRequired
+};
+
+// src/presentation/atoms/Badge.jsx
+var import_react7 = __toESM(require("react"), 1);
+var import_prop_types5 = __toESM(require("prop-types"), 1);
+var STATUS_CLASSES = {
+  confirmed: "bg-green-100 text-green-800 dark:bg-green-900/50 dark:text-green-200",
+  pending: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/50 dark:text-yellow-200",
+  cancelled: "bg-red-100 text-red-800 dark:bg-red-900/50 dark:text-red-200",
+  default: "bg-slate-100 text-slate-800 dark:bg-slate-700 dark:text-slate-200",
+  success: "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300",
+  info: "bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300"
+};
+function Badge({ status = "default", className = "", children, ...rest }) {
+  const colorClass = STATUS_CLASSES[status] || STATUS_CLASSES.default;
+  const classes = ["px-2 py-1 rounded-full text-xs font-medium", colorClass, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ import_react7.default.createElement("span", { className: classes, ...rest }, children);
+}
+Badge.propTypes = {
+  /** Status yang menentukan warna badge. */
+  status: import_prop_types5.default.string,
+  /** ClassName tambahan. */
+  className: import_prop_types5.default.string,
+  /** Label teks badge. */
+  children: import_prop_types5.default.node.isRequired
+};
+
+// src/presentation/atoms/SkeletonLoader.jsx
+var import_react8 = __toESM(require("react"), 1);
+var import_prop_types6 = __toESM(require("prop-types"), 1);
+function SkeletonLoader({ className = "" }) {
+  return /* @__PURE__ */ import_react8.default.createElement(
+    "div",
+    {
+      className: `animate-pulse bg-slate-200 dark:bg-slate-700 rounded-xl ${className}`,
+      role: "status",
+      "aria-label": "Loading..."
+    }
+  );
+}
+SkeletonLoader.propTypes = {
+  /** ClassName tambahan untuk mengatur ukuran skeleton (misal: "h-28", "h-64"). */
+  className: import_prop_types6.default.string
+};
+
+// src/presentation/molecules/StatCard.jsx
+var import_react9 = __toESM(require("react"), 1);
+var import_prop_types7 = __toESM(require("prop-types"), 1);
+function StatCard({
+  label,
+  value,
+  icon = "TrendingUp",
+  format = "number",
+  trend = null,
+  className = ""
+}) {
+  const formattedValue = renderValue(format, value);
+  return /* @__PURE__ */ import_react9.default.createElement("div", { className: `card p-4 flex flex-col justify-between gap-2 ${className}` }, /* @__PURE__ */ import_react9.default.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ import_react9.default.createElement("div", { className: "flex items-center gap-2 text-slate-500 dark:text-slate-400" }, /* @__PURE__ */ import_react9.default.createElement(Icon, { name: icon, size: 20 }), /* @__PURE__ */ import_react9.default.createElement(Typography, { variant: "subheading" }, label)), trend ? /* @__PURE__ */ import_react9.default.createElement(
+    Icon,
+    {
+      name: trend === "up" ? "TrendingUp" : "TrendingDown",
+      size: 16,
+      className: trend === "up" ? "text-emerald-500" : "text-red-500"
+    }
+  ) : null), /* @__PURE__ */ import_react9.default.createElement(Typography, { variant: "metric" }, formattedValue));
+}
+function renderValue(format, value) {
+  if (format === "currency") return `Rp ${formatIDR(value)}`;
+  if (format === "percent") return `${Number(value) || 0}%`;
+  return String(Number(value) || 0);
+}
+StatCard.propTypes = {
+  /** Label deskriptif metrik. */
+  label: import_prop_types7.default.string.isRequired,
+  /** Nilai metrik. */
+  value: import_prop_types7.default.oneOfType([import_prop_types7.default.number, import_prop_types7.default.string]),
+  /** Nama ikon dari registry Lucide React. */
+  icon: import_prop_types7.default.string,
+  /** Format tampilan nilai. */
+  format: import_prop_types7.default.oneOf(["number", "currency", "percent"]),
+  /** Arah tren opsional. */
+  trend: import_prop_types7.default.oneOf(["up", "down", null]),
+  /** ClassName tambahan. */
+  className: import_prop_types7.default.string
+};
+
+// src/presentation/molecules/SearchBar.jsx
+var import_react10 = __toESM(require("react"), 1);
+var import_prop_types8 = __toESM(require("prop-types"), 1);
+function SearchBar({
+  value: controlledValue,
+  onChange,
+  onSearch,
+  placeholder = "Search...",
+  className = ""
+}) {
+  const [internalValue, setInternalValue] = (0, import_react10.useState)("");
+  const isControlled = controlledValue !== void 0;
+  const currentValue = isControlled ? controlledValue : internalValue;
+  const handleChange = (0, import_react10.useCallback)(
+    (event) => {
+      const newValue = event.target.value;
+      if (!isControlled) setInternalValue(newValue);
+      if (onChange) onChange(newValue);
+      if (onSearch) onSearch(newValue);
+    },
+    [isControlled, onChange, onSearch]
+  );
+  const handleKeyDown = (0, import_react10.useCallback)(
+    (event) => {
+      if (event.key === "Enter" && onSearch) {
+        onSearch(currentValue);
+      }
+    },
+    [currentValue, onSearch]
+  );
+  return /* @__PURE__ */ import_react10.default.createElement("div", { className: `relative ${className}` }, /* @__PURE__ */ import_react10.default.createElement("div", { className: "absolute inset-y-0 left-3 flex items-center pointer-events-none" }, /* @__PURE__ */ import_react10.default.createElement(Icon, { name: "Search", size: 16, className: "text-slate-400" })), /* @__PURE__ */ import_react10.default.createElement(
+    Input,
+    {
+      type: "search",
+      value: currentValue,
+      onChange: handleChange,
+      onKeyDown: handleKeyDown,
+      placeholder,
+      className: "pl-9 w-full"
+    }
+  ));
+}
+SearchBar.propTypes = {
+  /** Nilai pencarian saat ini (controlled). */
+  value: import_prop_types8.default.string,
+  /** Callback saat nilai input berubah. */
+  onChange: import_prop_types8.default.func,
+  /** Callback saat pencarian disubmit. */
+  onSearch: import_prop_types8.default.func,
+  /** Placeholder teks. */
+  placeholder: import_prop_types8.default.string,
+  /** ClassName tambahan. */
+  className: import_prop_types8.default.string
+};
+
+// src/presentation/molecules/DateRangeFilter.jsx
+var import_react11 = __toESM(require("react"), 1);
+var import_prop_types9 = __toESM(require("prop-types"), 1);
+var CURRENT_YEAR = (/* @__PURE__ */ new Date()).getFullYear();
+var MIN_YEAR2 = 2020;
+var MAX_YEAR = CURRENT_YEAR + 1;
+var MONTHS = [
+  "Jan",
+  "Feb",
+  "Mar",
+  "Apr",
+  "May",
+  "Jun",
+  "Jul",
+  "Aug",
+  "Sep",
+  "Oct",
+  "Nov",
+  "Dec"
+];
+function getYears() {
+  const years = [];
+  for (let y = MAX_YEAR; y >= MIN_YEAR2; y--) {
+    years.push(y);
+  }
+  return years;
+}
+function getDaysInMonth(year, month) {
+  return new Date(year, month, 0).getDate();
+}
+function parseDate(value) {
+  if (value && /^\d{4}-\d{2}-\d{2}$/.test(value)) {
+    const [y, m, d] = value.split("-").map(Number);
+    if (y >= MIN_YEAR2 && y <= MAX_YEAR && m >= 1 && m <= 12) {
+      return { year: y, month: m, day: d };
+    }
+  }
+  const now = /* @__PURE__ */ new Date();
+  return { year: now.getFullYear(), month: now.getMonth() + 1, day: now.getDate() };
+}
+function formatDate2({ year, month, day }) {
+  return `${year}-${String(month).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
+}
+function DatePicker({ value, onChange, disabled = false, label = "" }) {
+  const parsed = parseDate(value);
+  const years = getYears();
+  const maxDay = getDaysInMonth(parsed.year, parsed.month);
+  const handleChange = (0, import_react11.useCallback)(
+    (field, newVal) => {
+      const updated = { ...parsed, [field]: Number(newVal) };
+      const maxD = getDaysInMonth(updated.year, updated.month);
+      if (updated.day > maxD) updated.day = maxD;
+      onChange(formatDate2(updated));
+    },
+    [parsed, onChange]
+  );
+  const selectClass = "px-2 py-1.5 rounded-xl border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 text-slate-900 dark:text-slate-100 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed";
+  return /* @__PURE__ */ import_react11.default.createElement("div", { className: "flex flex-col gap-1" }, label ? /* @__PURE__ */ import_react11.default.createElement(Typography, { variant: "caption", className: "font-medium" }, label) : null, /* @__PURE__ */ import_react11.default.createElement("div", { className: "flex items-center gap-1" }, /* @__PURE__ */ import_react11.default.createElement(
+    "select",
+    {
+      className: selectClass,
+      value: parsed.day,
+      onChange: (e) => handleChange("day", e.target.value),
+      disabled,
+      "aria-label": `${label} day`
+    },
+    Array.from({ length: maxDay }, (_, i) => i + 1).map((d) => /* @__PURE__ */ import_react11.default.createElement("option", { key: d, value: d }, String(d).padStart(2, "0")))
+  ), /* @__PURE__ */ import_react11.default.createElement(
+    "select",
+    {
+      className: selectClass,
+      value: parsed.month,
+      onChange: (e) => handleChange("month", e.target.value),
+      disabled,
+      "aria-label": `${label} month`
+    },
+    MONTHS.map((name, idx) => /* @__PURE__ */ import_react11.default.createElement("option", { key: idx + 1, value: idx + 1 }, name))
+  ), /* @__PURE__ */ import_react11.default.createElement(
+    "select",
+    {
+      className: selectClass,
+      value: parsed.year,
+      onChange: (e) => handleChange("year", e.target.value),
+      disabled,
+      "aria-label": `${label} year`
+    },
+    years.map((y) => /* @__PURE__ */ import_react11.default.createElement("option", { key: y, value: y }, y))
+  )));
+}
+DatePicker.propTypes = {
+  value: import_prop_types9.default.string.isRequired,
+  onChange: import_prop_types9.default.func.isRequired,
+  disabled: import_prop_types9.default.bool,
+  label: import_prop_types9.default.string
+};
+function DateRangeFilter({
+  dateFrom,
+  dateTo,
+  onRangeChange,
+  disabled = false,
+  labelFrom = "From",
+  labelTo = "To",
+  className = ""
+}) {
+  const handleFromChange = (0, import_react11.useCallback)(
+    (newDate) => onRangeChange == null ? void 0 : onRangeChange({ dateFrom: newDate, dateTo }),
+    [dateTo, onRangeChange]
+  );
+  const handleToChange = (0, import_react11.useCallback)(
+    (newDate) => onRangeChange == null ? void 0 : onRangeChange({ dateFrom, dateTo: newDate }),
+    [dateFrom, onRangeChange]
+  );
+  return /* @__PURE__ */ import_react11.default.createElement("div", { className: `flex flex-wrap items-end gap-3 ${className}` }, /* @__PURE__ */ import_react11.default.createElement(
+    DatePicker,
+    {
+      value: dateFrom,
+      onChange: handleFromChange,
+      disabled,
+      label: labelFrom
+    }
+  ), /* @__PURE__ */ import_react11.default.createElement(
+    DatePicker,
+    {
+      value: dateTo,
+      onChange: handleToChange,
+      disabled,
+      label: labelTo
+    }
+  ));
+}
+DateRangeFilter.propTypes = {
+  dateFrom: import_prop_types9.default.string.isRequired,
+  dateTo: import_prop_types9.default.string.isRequired,
+  onRangeChange: import_prop_types9.default.func.isRequired,
+  disabled: import_prop_types9.default.bool,
+  labelFrom: import_prop_types9.default.string,
+  labelTo: import_prop_types9.default.string,
+  className: import_prop_types9.default.string
+};
+
+// src/presentation/molecules/ChartHeader.jsx
+var import_react12 = __toESM(require("react"), 1);
+var import_prop_types10 = __toESM(require("prop-types"), 1);
+function ChartHeader({
+  title,
+  icon = "BarChart3",
+  actions = null,
+  className = ""
+}) {
+  return /* @__PURE__ */ import_react12.default.createElement("div", { className: `flex items-center justify-between mb-2 ${className}` }, /* @__PURE__ */ import_react12.default.createElement(Typography, { variant: "h3", className: "flex items-center gap-2" }, /* @__PURE__ */ import_react12.default.createElement(Icon, { name: icon, size: 18 }), title), actions);
+}
+ChartHeader.propTypes = {
+  /** Judul grafik. */
+  title: import_prop_types10.default.string.isRequired,
+  /** Nama ikon header. */
+  icon: import_prop_types10.default.string,
+  /** Elemen aksi tambahan di sisi kanan. */
+  actions: import_prop_types10.default.node,
+  /** ClassName tambahan. */
+  className: import_prop_types10.default.string
+};
+
+// src/presentation/organisms/DataTable.jsx
+var import_react13 = __toESM(require("react"), 1);
+var import_prop_types11 = __toESM(require("prop-types"), 1);
+function DataTable({
+  columns,
+  data = [],
+  labels = {},
+  dateLocale = "id-ID",
+  searchable = true,
+  sortable = true,
+  pageSize = 10,
+  emptyLabel = "No data",
+  searchPlaceholder = "Search...",
+  className = ""
+}) {
+  const [searchQuery, setSearchQuery] = (0, import_react13.useState)("");
+  const [sortField, setSortField] = (0, import_react13.useState)(null);
+  const [sortDirection, setSortDirection] = (0, import_react13.useState)("asc");
+  const [currentPage, setCurrentPage] = (0, import_react13.useState)(1);
+  const filteredData = (0, import_react13.useMemo)(() => {
+    if (!searchQuery.trim()) return data;
+    const query = searchQuery.toLowerCase();
+    return data.filter(
+      (row) => columns.some((col) => {
+        const value = row[col.accessor];
+        return value != null && String(value).toLowerCase().includes(query);
+      })
+    );
+  }, [data, searchQuery, columns]);
+  const sortedData = (0, import_react13.useMemo)(() => {
+    if (!sortField) return filteredData;
+    const sorted = [...filteredData].sort((a, b) => {
+      const aVal = a[sortField] ?? "";
+      const bVal = b[sortField] ?? "";
+      if (typeof aVal === "number" && typeof bVal === "number") {
+        return sortDirection === "asc" ? aVal - bVal : bVal - aVal;
+      }
+      const comparison = String(aVal).localeCompare(String(bVal), void 0, {
+        numeric: true
+      });
+      return sortDirection === "asc" ? comparison : -comparison;
+    });
+    return sorted;
+  }, [filteredData, sortField, sortDirection]);
+  const totalPages = Math.max(1, Math.ceil(sortedData.length / pageSize));
+  const safePage = Math.min(currentPage, totalPages);
+  const paginatedData = (0, import_react13.useMemo)(() => {
+    const start = (safePage - 1) * pageSize;
+    return sortedData.slice(start, start + pageSize);
+  }, [sortedData, safePage, pageSize]);
+  const handleSearch = (0, import_react13.useCallback)((value) => {
+    setSearchQuery(value);
+    setCurrentPage(1);
+  }, []);
+  const handleSort = (0, import_react13.useCallback)(
+    (accessor) => {
+      if (!sortable) return;
+      if (sortField === accessor) {
+        setSortDirection((prev) => prev === "asc" ? "desc" : "asc");
+      } else {
+        setSortField(accessor);
+        setSortDirection("asc");
+      }
+      setCurrentPage(1);
+    },
+    [sortable, sortField]
+  );
+  const handlePrevPage = (0, import_react13.useCallback)(() => {
+    setCurrentPage((prev) => Math.max(1, prev - 1));
+  }, []);
+  const handleNextPage = (0, import_react13.useCallback)(() => {
+    setCurrentPage((prev) => Math.min(totalPages, prev + 1));
+  }, [totalPages]);
+  return /* @__PURE__ */ import_react13.default.createElement("div", { className: `space-y-3 ${className}` }, searchable ? /* @__PURE__ */ import_react13.default.createElement(
+    SearchBar,
+    {
+      value: searchQuery,
+      onSearch: handleSearch,
+      placeholder: searchPlaceholder,
+      className: "max-w-sm"
+    }
+  ) : null, /* @__PURE__ */ import_react13.default.createElement("div", { className: "overflow-x-auto" }, /* @__PURE__ */ import_react13.default.createElement("table", { className: "min-w-full text-sm border-collapse" }, /* @__PURE__ */ import_react13.default.createElement("thead", null, /* @__PURE__ */ import_react13.default.createElement("tr", { className: "bg-slate-100 dark:bg-slate-800 text-left" }, columns.map((column) => /* @__PURE__ */ import_react13.default.createElement(
+    "th",
+    {
+      key: column.id,
+      className: [
+        "p-3",
+        sortable ? "cursor-pointer select-none hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors" : ""
+      ].join(" "),
+      onClick: () => handleSort(column.accessor)
+    },
+    /* @__PURE__ */ import_react13.default.createElement("div", { className: "flex items-center gap-1" }, /* @__PURE__ */ import_react13.default.createElement("span", null, labels[column.label] || column.label), sortable && sortField === column.accessor ? /* @__PURE__ */ import_react13.default.createElement(
+      Icon,
+      {
+        name: sortDirection === "asc" ? "ArrowUp" : "ArrowDown",
+        size: 14,
+        className: "text-blue-500"
+      }
+    ) : null)
+  )))), /* @__PURE__ */ import_react13.default.createElement("tbody", null, paginatedData.map((row) => /* @__PURE__ */ import_react13.default.createElement(
+    "tr",
+    {
+      key: row.id,
+      className: "border-b border-slate-200 dark:border-slate-700 hover:bg-slate-50 dark:hover:bg-slate-800/50"
+    },
+    columns.map((column) => /* @__PURE__ */ import_react13.default.createElement("td", { key: `${row.id}-${column.id}`, className: "p-3" }, renderCell(column, row, dateLocale)))
+  )), paginatedData.length === 0 ? /* @__PURE__ */ import_react13.default.createElement("tr", null, /* @__PURE__ */ import_react13.default.createElement(
+    "td",
+    {
+      className: "p-6 text-center text-slate-500",
+      colSpan: columns.length
+    },
+    emptyLabel
+  )) : null))), sortedData.length > pageSize ? /* @__PURE__ */ import_react13.default.createElement("div", { className: "flex items-center justify-between px-1" }, /* @__PURE__ */ import_react13.default.createElement("span", { className: "text-xs text-slate-500" }, (safePage - 1) * pageSize + 1, "\u2013", Math.min(safePage * pageSize, sortedData.length), " of", " ", sortedData.length), /* @__PURE__ */ import_react13.default.createElement("div", { className: "flex items-center gap-1" }, /* @__PURE__ */ import_react13.default.createElement(
+    "button",
+    {
+      type: "button",
+      className: "p-1.5 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-800 disabled:opacity-40 disabled:cursor-not-allowed transition-colors",
+      onClick: handlePrevPage,
+      disabled: safePage <= 1,
+      "aria-label": "Previous page"
+    },
+    /* @__PURE__ */ import_react13.default.createElement(Icon, { name: "ChevronLeft", size: 16 })
+  ), /* @__PURE__ */ import_react13.default.createElement("span", { className: "text-xs text-slate-600 dark:text-slate-300 min-w-[60px] text-center" }, safePage, " / ", totalPages), /* @__PURE__ */ import_react13.default.createElement(
+    "button",
+    {
+      type: "button",
+      className: "p-1.5 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-800 disabled:opacity-40 disabled:cursor-not-allowed transition-colors",
+      onClick: handleNextPage,
+      disabled: safePage >= totalPages,
+      "aria-label": "Next page"
+    },
+    /* @__PURE__ */ import_react13.default.createElement(Icon, { name: "ChevronRight", size: 16 })
+  ))) : null);
+}
+function renderCell(column, row, dateLocale) {
+  const value = row[column.accessor];
+  if (column.type === "date") return formatDate(value, dateLocale);
+  if (column.type === "currency") return `Rp ${formatIDR(value)}`;
+  if (column.type === "statusBadge") {
+    const status = row[column.statusAccessor] || "pending";
+    return /* @__PURE__ */ import_react13.default.createElement(Badge, { status }, value);
+  }
+  return value || "-";
+}
+DataTable.propTypes = {
+  /** Definisi kolom tabel. */
+  columns: import_prop_types11.default.arrayOf(
+    import_prop_types11.default.shape({
+      id: import_prop_types11.default.string.isRequired,
+      label: import_prop_types11.default.string.isRequired,
+      accessor: import_prop_types11.default.string.isRequired,
+      type: import_prop_types11.default.oneOf(["date", "currency", "statusBadge"]),
+      statusAccessor: import_prop_types11.default.string
+    })
+  ).isRequired,
+  /** Array data baris. */
+  data: import_prop_types11.default.arrayOf(import_prop_types11.default.object),
+  /** Objek label i18n. */
+  labels: import_prop_types11.default.object,
+  /** Locale untuk format tanggal. */
+  dateLocale: import_prop_types11.default.string,
+  /** Apakah tabel mendukung pencarian. */
+  searchable: import_prop_types11.default.bool,
+  /** Apakah tabel mendukung pengurutan. */
+  sortable: import_prop_types11.default.bool,
+  /** Jumlah baris per halaman. */
+  pageSize: import_prop_types11.default.number,
+  /** Label saat data kosong. */
+  emptyLabel: import_prop_types11.default.string,
+  /** Placeholder pencarian. */
+  searchPlaceholder: import_prop_types11.default.string,
+  /** ClassName tambahan. */
+  className: import_prop_types11.default.string
+};
+
+// src/presentation/organisms/ChartCard.jsx
+var import_react14 = __toESM(require("react"), 1);
+var import_prop_types12 = __toESM(require("prop-types"), 1);
+var import_recharts = require("recharts");
+var COLORS = [
+  "#0ea5e9",
+  "#a78bfa",
+  "#f59e0b",
+  "#10b981",
+  "#ef4444",
+  "#22d3ee"
+];
+function ChartCard({
+  widget,
+  labels,
+  loading,
+  filters,
+  chartData,
+  className = ""
+}) {
+  const content = (() => {
+    if (loading) return /* @__PURE__ */ import_react14.default.createElement(SkeletonLoader, { className: "h-64" });
+    if (widget.type === "dailyArea") {
+      return renderDailyArea(labels, filters, chartData.dailyTrends);
+    }
+    if (widget.type === "statusPie") {
+      return renderPie(chartData.statusDistribution);
+    }
+    if (widget.type === "audiencePie") {
+      return renderPie(chartData.audienceDistribution);
+    }
+    if (widget.type === "topPackagesBar") {
+      return renderTopPackages(chartData.topPackages, labels, filters.sortPkgBy);
+    }
+    return /* @__PURE__ */ import_react14.default.createElement("div", { className: "text-sm text-slate-500" }, "Unsupported chart type.");
+  })();
+  return /* @__PURE__ */ import_react14.default.createElement("div", { className: `card p-4 ${className}` }, /* @__PURE__ */ import_react14.default.createElement(
+    ChartHeader,
+    {
+      title: labels[widget.label] || widget.label,
+      icon: widget.icon
+    }
+  ), content);
+}
+function renderDailyArea(labels, filters, dailyData = []) {
+  return /* @__PURE__ */ import_react14.default.createElement(import_recharts.ResponsiveContainer, { width: "100%", height: 256 }, /* @__PURE__ */ import_react14.default.createElement(import_recharts.AreaChart, { data: dailyData }, /* @__PURE__ */ import_react14.default.createElement(import_recharts.CartesianGrid, { strokeDasharray: "3 3" }), /* @__PURE__ */ import_react14.default.createElement(import_recharts.XAxis, { dataKey: "label" }), /* @__PURE__ */ import_react14.default.createElement(import_recharts.YAxis, { yAxisId: "left" }), /* @__PURE__ */ import_react14.default.createElement(import_recharts.YAxis, { yAxisId: "right", orientation: "right" }), /* @__PURE__ */ import_react14.default.createElement(
+    import_recharts.Tooltip,
+    {
+      formatter: (value, name) => name === "revenue" ? [`Rp ${formatIDR(value)}`, labels.revenueMetric] : [value, labels.bookingsMetric]
+    }
+  ), /* @__PURE__ */ import_react14.default.createElement(import_recharts.Legend, null), /* @__PURE__ */ import_react14.default.createElement(
+    import_recharts.Area,
+    {
+      yAxisId: "left",
+      type: "monotone",
+      dataKey: "count",
+      name: labels.confirmedBookingMetric,
+      stroke: "#0ea5e9",
+      fill: "#0ea5e9",
+      fillOpacity: 0.3
+    }
+  ), /* @__PURE__ */ import_react14.default.createElement(
+    import_recharts.Area,
+    {
+      yAxisId: "right",
+      type: "monotone",
+      dataKey: "revenue",
+      name: labels.confirmedRevenueMetric,
+      stroke: "#a78bfa",
+      fill: "#a78bfa",
+      fillOpacity: 0.3
+    }
+  ), filters.includePendingOverlay ? /* @__PURE__ */ import_react14.default.createElement(
+    import_recharts.Area,
+    {
+      yAxisId: "left",
+      type: "monotone",
+      dataKey: "pendingCount",
+      name: labels.pendingMetric,
+      stroke: "#ef4444",
+      fill: "#ef4444",
+      fillOpacity: 0.1,
+      strokeDasharray: "4 4"
+    }
+  ) : null));
+}
+function renderPie(data = []) {
+  return /* @__PURE__ */ import_react14.default.createElement(import_recharts.ResponsiveContainer, { width: "100%", height: 256 }, /* @__PURE__ */ import_react14.default.createElement(import_recharts.PieChart, null, /* @__PURE__ */ import_react14.default.createElement(
+    import_recharts.Pie,
+    {
+      data,
+      dataKey: "count",
+      nameKey: "label",
+      innerRadius: 60,
+      outerRadius: 100,
+      paddingAngle: 2
+    },
+    data.map((_, index) => /* @__PURE__ */ import_react14.default.createElement(
+      import_recharts.Cell,
+      {
+        key: `${index}-${data[index].label}`,
+        fill: COLORS[index % COLORS.length]
+      }
+    ))
+  ), /* @__PURE__ */ import_react14.default.createElement(import_recharts.Tooltip, null), /* @__PURE__ */ import_react14.default.createElement(import_recharts.Legend, null)));
+}
+function renderTopPackages(data = [], labels, sortPkgBy) {
+  return /* @__PURE__ */ import_react14.default.createElement(import_recharts.ResponsiveContainer, { width: "100%", height: 256 }, /* @__PURE__ */ import_react14.default.createElement(import_recharts.BarChart, { data, layout: "vertical" }, /* @__PURE__ */ import_react14.default.createElement(import_recharts.CartesianGrid, { strokeDasharray: "3 3" }), /* @__PURE__ */ import_react14.default.createElement(import_recharts.XAxis, { type: "number", allowDecimals: false }), /* @__PURE__ */ import_react14.default.createElement(import_recharts.YAxis, { type: "category", dataKey: "name", width: 120 }), /* @__PURE__ */ import_react14.default.createElement(
+    import_recharts.Tooltip,
+    {
+      formatter: (value) => sortPkgBy === "revenue" ? [`Rp ${formatIDR(value)}`, labels.revenueMetric] : [value, labels.bookingsMetric]
+    }
+  ), /* @__PURE__ */ import_react14.default.createElement(
+    import_recharts.Bar,
+    {
+      dataKey: "value",
+      name: sortPkgBy === "revenue" ? labels.revenueMetric : labels.bookingsMetric,
+      fill: "#10b981",
+      radius: [4, 4, 4, 4]
+    }
+  )));
+}
+ChartCard.propTypes = {
+  /** Konfigurasi widget chart. */
+  widget: import_prop_types12.default.shape({
+    id: import_prop_types12.default.string.isRequired,
+    type: import_prop_types12.default.string.isRequired,
+    label: import_prop_types12.default.string.isRequired,
+    icon: import_prop_types12.default.string
+  }).isRequired,
+  /** Objek label i18n. */
+  labels: import_prop_types12.default.object.isRequired,
+  /** Apakah sedang loading. */
+  loading: import_prop_types12.default.bool,
+  /** State filter dashboard. */
+  filters: import_prop_types12.default.object,
+  /** Data untuk semua jenis chart. */
+  chartData: import_prop_types12.default.object,
+  /** ClassName tambahan. */
+  className: import_prop_types12.default.string
+};
+
+// src/presentation/organisms/FilterPanel.jsx
+var import_react15 = __toESM(require("react"), 1);
+var import_prop_types13 = __toESM(require("prop-types"), 1);
+var STATUS_OPTIONS = ["confirmed", "pending", "all"];
+var AUDIENCE_OPTIONS = ["", "domestic", "foreign"];
+var DAY_PRESETS = [7, 30, 90, 0];
+var SORT_BY_OPTIONS = ["bookings", "revenue"];
+var SORT_DIR_OPTIONS = ["desc", "asc"];
+function FilterPanel({
+  filters,
+  labels,
+  onFilterChange,
+  onResetFilters,
+  className = ""
+}) {
+  return /* @__PURE__ */ import_react15.default.createElement("div", { className: `flex flex-col gap-2 ${className}` }, /* @__PURE__ */ import_react15.default.createElement("div", { className: "grid grid-cols-1 lg:grid-cols-6 gap-2" }, /* @__PURE__ */ import_react15.default.createElement(
+    "select",
+    {
+      className: "px-3 py-2 rounded-2xl border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 text-sm",
+      value: filters.statusScope,
+      onChange: (event) => onFilterChange("statusScope", event.target.value)
+    },
+    STATUS_OPTIONS.map((status) => /* @__PURE__ */ import_react15.default.createElement("option", { key: status, value: status }, status === "confirmed" ? labels.confirmedOnly : status === "pending" ? labels.pendingOnly : labels.allStatus))
+  ), /* @__PURE__ */ import_react15.default.createElement("label", { className: "inline-flex items-center gap-2 px-3 py-2 rounded-2xl border border-slate-300 dark:border-slate-600" }, /* @__PURE__ */ import_react15.default.createElement(
+    Input,
+    {
+      type: "checkbox",
+      checked: filters.includePendingOverlay,
+      onChange: (event) => onFilterChange("includePendingOverlay", event.target.checked)
+    }
+  ), /* @__PURE__ */ import_react15.default.createElement(Typography, { variant: "body" }, labels.showPendingOverlay)), /* @__PURE__ */ import_react15.default.createElement(
+    "select",
+    {
+      className: "px-3 py-2 rounded-2xl border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 text-sm",
+      value: filters.audience,
+      onChange: (event) => onFilterChange("audience", event.target.value)
+    },
+    AUDIENCE_OPTIONS.map((audience) => /* @__PURE__ */ import_react15.default.createElement("option", { key: audience || "all", value: audience }, audience === "domestic" ? labels.audienceDomestic : audience === "foreign" ? labels.audienceForeign : labels.allAudience))
+  ), /* @__PURE__ */ import_react15.default.createElement(
+    "select",
+    {
+      className: "px-3 py-2 rounded-2xl border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 text-sm",
+      value: String(filters.daysPreset),
+      onChange: (event) => onFilterChange("daysPreset", Number(event.target.value))
+    },
+    DAY_PRESETS.map((days) => /* @__PURE__ */ import_react15.default.createElement("option", { key: String(days), value: String(days) }, days === 0 ? labels.customDate : labels.dayLabel(days)))
+  ), /* @__PURE__ */ import_react15.default.createElement(
+    DateRangeFilter,
+    {
+      dateFrom: filters.dateFrom || "",
+      dateTo: filters.dateTo || "",
+      onRangeChange: ({ dateFrom, dateTo }) => {
+        if (dateFrom !== filters.dateFrom) onFilterChange("dateFrom", dateFrom);
+        if (dateTo !== filters.dateTo) onFilterChange("dateTo", dateTo);
+      },
+      disabled: filters.daysPreset !== 0,
+      className: "lg:col-span-2"
+    }
+  )), /* @__PURE__ */ import_react15.default.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ import_react15.default.createElement(Button, { variant: "secondary", size: "sm", onClick: onResetFilters }, labels.reset), /* @__PURE__ */ import_react15.default.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ import_react15.default.createElement(Typography, { variant: "caption" }, labels.topSort, ":"), /* @__PURE__ */ import_react15.default.createElement(
+    "select",
+    {
+      className: "px-2 py-1.5 rounded-xl border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 text-sm",
+      value: filters.sortPkgBy,
+      onChange: (event) => onFilterChange("sortPkgBy", event.target.value)
+    },
+    SORT_BY_OPTIONS.map((sortBy) => /* @__PURE__ */ import_react15.default.createElement("option", { key: sortBy, value: sortBy }, sortBy === "bookings" ? labels.sortBookings : labels.sortRevenue))
+  ), /* @__PURE__ */ import_react15.default.createElement(
+    "select",
+    {
+      className: "px-2 py-1.5 rounded-xl border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 text-sm",
+      value: filters.sortPkgDir,
+      onChange: (event) => onFilterChange("sortPkgDir", event.target.value)
+    },
+    SORT_DIR_OPTIONS.map((direction) => /* @__PURE__ */ import_react15.default.createElement("option", { key: direction, value: direction }, direction === "desc" ? labels.sortDesc : labels.sortAsc))
+  ))));
+}
+FilterPanel.propTypes = {
+  /** State filter saat ini. */
+  filters: import_prop_types13.default.shape({
+    statusScope: import_prop_types13.default.string,
+    includePendingOverlay: import_prop_types13.default.bool,
+    audience: import_prop_types13.default.string,
+    daysPreset: import_prop_types13.default.number,
+    dateFrom: import_prop_types13.default.string,
+    dateTo: import_prop_types13.default.string,
+    sortPkgBy: import_prop_types13.default.string,
+    sortPkgDir: import_prop_types13.default.string
+  }).isRequired,
+  /** Objek label i18n. */
+  labels: import_prop_types13.default.object.isRequired,
+  /** Callback saat filter berubah (field, value). */
+  onFilterChange: import_prop_types13.default.func.isRequired,
+  /** Callback saat filter di-reset. */
+  onResetFilters: import_prop_types13.default.func.isRequired,
+  /** ClassName tambahan. */
+  className: import_prop_types13.default.string
+};
+
+// src/presentation/organisms/SidebarNavigation.jsx
+var import_react16 = __toESM(require("react"), 1);
+var import_prop_types14 = __toESM(require("prop-types"), 1);
+function SidebarNavigation({
+  items = [],
+  activeItem = "",
+  onItemClick,
+  logo = null,
+  className = ""
+}) {
+  return /* @__PURE__ */ import_react16.default.createElement(
+    "aside",
+    {
+      className: `flex flex-col w-60 min-h-screen bg-white dark:bg-slate-900 border-r border-slate-200 dark:border-slate-800 ${className}`
+    },
+    logo ? /* @__PURE__ */ import_react16.default.createElement("div", { className: "px-4 py-4 border-b border-slate-100 dark:border-slate-800" }, logo) : null,
+    /* @__PURE__ */ import_react16.default.createElement("nav", { className: "flex-1 px-2 py-3 space-y-0.5", "aria-label": "Sidebar navigation" }, items.map((item) => {
+      const isActive = item.id === activeItem;
+      return /* @__PURE__ */ import_react16.default.createElement(
+        "button",
+        {
+          key: item.id,
+          type: "button",
+          id: `sidebar-nav-${item.id}`,
+          onClick: () => onItemClick == null ? void 0 : onItemClick(item.id),
+          "aria-current": isActive ? "page" : void 0,
+          className: [
+            "w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium transition-colors text-left",
+            isActive ? "bg-blue-50 dark:bg-blue-950/60 text-blue-700 dark:text-blue-300" : "text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800 hover:text-slate-900 dark:hover:text-slate-100"
+          ].join(" ")
+        },
+        item.icon ? /* @__PURE__ */ import_react16.default.createElement(
+          Icon,
+          {
+            name: item.icon,
+            size: 18,
+            className: isActive ? "text-blue-600 dark:text-blue-400" : "text-slate-400 dark:text-slate-500"
+          }
+        ) : null,
+        /* @__PURE__ */ import_react16.default.createElement("span", null, item.label),
+        isActive ? /* @__PURE__ */ import_react16.default.createElement("span", { className: "ml-auto w-1.5 h-1.5 rounded-full bg-blue-500" }) : null
+      );
+    }))
+  );
+}
+SidebarNavigation.propTypes = {
+  /** Daftar item menu navigasi. */
+  items: import_prop_types14.default.arrayOf(
+    import_prop_types14.default.shape({
+      id: import_prop_types14.default.string.isRequired,
+      label: import_prop_types14.default.string.isRequired,
+      icon: import_prop_types14.default.string
+    })
+  ),
+  /** ID item yang sedang aktif. */
+  activeItem: import_prop_types14.default.string,
+  /** Callback saat item diklik, menerima id item sebagai argumen. */
+  onItemClick: import_prop_types14.default.func,
+  /** Konten logo/brand di atas sidebar. */
+  logo: import_prop_types14.default.node,
+  /** ClassName tambahan. */
+  className: import_prop_types14.default.string
+};
+
+// src/presentation/organisms/TopbarHeader.jsx
+var import_react17 = __toESM(require("react"), 1);
+var import_prop_types15 = __toESM(require("prop-types"), 1);
+function TopbarHeader({
+  title = "",
+  actions = null,
+  leading = null,
+  className = ""
+}) {
+  return /* @__PURE__ */ import_react17.default.createElement(
+    "header",
+    {
+      className: `sticky top-0 z-30 flex items-center justify-between h-14 px-4 bg-white/80 dark:bg-slate-900/80 backdrop-blur-md border-b border-slate-200 dark:border-slate-800 ${className}`
+    },
+    /* @__PURE__ */ import_react17.default.createElement("div", { className: "flex items-center gap-3" }, leading, title ? /* @__PURE__ */ import_react17.default.createElement(Typography, { variant: "h2", className: "truncate" }, title) : null),
+    actions ? /* @__PURE__ */ import_react17.default.createElement("div", { className: "flex items-center gap-2" }, actions) : null
+  );
+}
+TopbarHeader.propTypes = {
+  /** Judul halaman yang ditampilkan. */
+  title: import_prop_types15.default.string,
+  /** Elemen aksi di sisi kanan (tombol, avatar, dsb.). */
+  actions: import_prop_types15.default.node,
+  /** Elemen di sisi kiri sebelum judul (misal: hamburger menu). */
+  leading: import_prop_types15.default.node,
+  /** ClassName tambahan. */
+  className: import_prop_types15.default.string
+};
+
+// src/presentation/templates/DashboardLayout.jsx
+var import_react18 = __toESM(require("react"), 1);
+var import_prop_types16 = __toESM(require("prop-types"), 1);
+function DashboardLayout({
+  header = null,
+  sidebar = null,
+  children,
+  className = ""
+}) {
+  return /* @__PURE__ */ import_react18.default.createElement("div", { className: `min-h-screen bg-slate-50 dark:bg-slate-900 ${className}` }, header, /* @__PURE__ */ import_react18.default.createElement("div", { className: "flex" }, sidebar, /* @__PURE__ */ import_react18.default.createElement("main", { className: "flex-1 container mx-auto px-4 py-3 space-y-4" }, children)));
+}
+DashboardLayout.propTypes = {
+  /** Konten header atas. */
+  header: import_prop_types16.default.node,
+  /** Konten sidebar. */
+  sidebar: import_prop_types16.default.node,
+  /** Konten utama dashboard. */
+  children: import_prop_types16.default.node.isRequired,
+  /** ClassName tambahan. */
+  className: import_prop_types16.default.string
+};
+
+// src/presentation/ReusableDashboardView.jsx
+var import_react19 = __toESM(require("react"), 1);
+var import_prop_types17 = __toESM(require("prop-types"), 1);
+function ReusableDashboardView({
+  config,
+  labels,
+  loading,
+  error,
+  filters,
+  onFilterChange,
+  onResetFilters,
+  onRefresh,
+  data,
+  dateLocale,
+  liveUpdateEnabled
+}) {
+  return /* @__PURE__ */ import_react19.default.createElement("div", { className: "container mt-3 space-y-4" }, /* @__PURE__ */ import_react19.default.createElement("div", null, /* @__PURE__ */ import_react19.default.createElement("div", { className: "rounded-2xl border border-slate-200/60 dark:border-slate-800/60 backdrop-blur-md px-3 sm:px-4 py-2 glass shadow-smooth" }, /* @__PURE__ */ import_react19.default.createElement("div", { className: "flex flex-col gap-2" }, /* @__PURE__ */ import_react19.default.createElement("div", { className: "flex flex-wrap items-center justify-between gap-2" }, /* @__PURE__ */ import_react19.default.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ import_react19.default.createElement(Typography, { variant: "h1" }, labels.title), liveUpdateEnabled ? /* @__PURE__ */ import_react19.default.createElement(Badge, { status: "success" }, labels.liveUpdate) : null), /* @__PURE__ */ import_react19.default.createElement(
+    Button,
+    {
+      variant: "secondary",
+      size: "sm",
+      onClick: () => onRefresh(),
+      title: labels.refresh
+    },
+    /* @__PURE__ */ import_react19.default.createElement(Icon, { name: "RotateCcw", size: 16 })
+  )), error ? /* @__PURE__ */ import_react19.default.createElement("div", { className: "rounded-xl border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700 dark:border-red-900/60 dark:bg-red-950/40 dark:text-red-300" }, /* @__PURE__ */ import_react19.default.createElement("div", { className: "flex items-center justify-between gap-3" }, /* @__PURE__ */ import_react19.default.createElement("span", null, error), /* @__PURE__ */ import_react19.default.createElement(Button, { variant: "secondary", size: "sm", onClick: () => onRefresh() }, labels.retry))) : null, /* @__PURE__ */ import_react19.default.createElement(
+    FilterPanel,
+    {
+      filters,
+      labels,
+      onFilterChange,
+      onResetFilters
+    }
+  )))), /* @__PURE__ */ import_react19.default.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4" }, loading ? Array.from({ length: 4 }).map((_, index) => /* @__PURE__ */ import_react19.default.createElement(SkeletonLoader, { key: `stat-skeleton-${index}`, className: "h-28" })) : config.widgets.stats.map((widget) => /* @__PURE__ */ import_react19.default.createElement(
+    StatCard,
+    {
+      key: widget.id,
+      label: labels[widget.label] || widget.label,
+      value: data.stats[widget.valueKey],
+      icon: widget.icon,
+      format: widget.format
+    }
+  ))), /* @__PURE__ */ import_react19.default.createElement("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-4" }, config.widgets.charts.map((widget) => /* @__PURE__ */ import_react19.default.createElement(
+    ChartCard,
+    {
+      key: widget.id,
+      widget,
+      labels,
+      loading,
+      filters,
+      chartData: data.charts
+    }
+  ))), /* @__PURE__ */ import_react19.default.createElement("div", { className: "card p-4" }, /* @__PURE__ */ import_react19.default.createElement(Typography, { variant: "h3", className: "flex items-center gap-2 mb-3" }, /* @__PURE__ */ import_react19.default.createElement(Icon, { name: config.widgets.table.icon, size: 18 }), labels[config.widgets.table.label] || config.widgets.table.label), loading ? /* @__PURE__ */ import_react19.default.createElement(SkeletonLoader, { className: "h-48" }) : /* @__PURE__ */ import_react19.default.createElement(
+    DataTable,
+    {
+      columns: config.widgets.table.columns,
+      data: data.table.recentBookings,
+      labels,
+      dateLocale,
+      emptyLabel: labels[config.widgets.table.emptyLabel] || config.widgets.table.emptyLabel,
+      searchable: true,
+      sortable: true,
+      pageSize: 10
+    }
+  )));
+}
+ReusableDashboardView.propTypes = {
+  /** Konfigurasi widget dashboard. */
+  config: import_prop_types17.default.object.isRequired,
+  /** Objek label i18n. */
+  labels: import_prop_types17.default.object.isRequired,
+  /** Status loading data. */
+  loading: import_prop_types17.default.bool,
+  /** Pesan error jika ada. */
+  error: import_prop_types17.default.string,
+  /** State filter dashboard. */
+  filters: import_prop_types17.default.object,
+  /** Callback perubahan filter. */
+  onFilterChange: import_prop_types17.default.func.isRequired,
+  /** Callback reset filter. */
+  onResetFilters: import_prop_types17.default.func.isRequired,
+  /** Callback refresh data. */
+  onRefresh: import_prop_types17.default.func.isRequired,
+  /** Data dashboard. */
+  data: import_prop_types17.default.object,
+  /** Locale untuk format tanggal. */
+  dateLocale: import_prop_types17.default.string,
+  /** Apakah live update aktif. */
+  liveUpdateEnabled: import_prop_types17.default.bool
+};
+
+// src/utils/labels.js
+function createDashboardLabels(t) {
+  const labels = {
+    title: t("admin.dashboard.title", { defaultValue: "Dashboard" }),
+    refresh: t("admin.dashboard.refresh", { defaultValue: "Refresh" }),
+    liveUpdate: t("admin.dashboard.liveUpdate", { defaultValue: "Live update" }),
+    loadFailed: t("admin.dashboard.loadFailed", {
+      defaultValue: "Failed to load dashboard data."
+    }),
+    retry: t("admin.dashboard.retry", { defaultValue: "Retry" }),
+    confirmedOnly: t("admin.dashboard.filters.confirmedOnly", {
+      defaultValue: "Confirmed only"
+    }),
+    pendingOnly: t("admin.dashboard.filters.pendingOnly", {
+      defaultValue: "Pending only"
+    }),
+    allStatus: t("admin.dashboard.filters.allStatus", {
+      defaultValue: "All status"
+    }),
+    showPendingOverlay: t("admin.dashboard.filters.showPendingOverlay", {
+      defaultValue: "Show pending overlay"
+    }),
+    allAudience: t("admin.dashboard.filters.allAudience", {
+      defaultValue: "All audience"
+    }),
+    audienceDomestic: t("explore.domestic", { defaultValue: "Domestic" }),
+    audienceForeign: t("explore.foreign", { defaultValue: "Foreign" }),
+    customDate: t("admin.dashboard.filters.customDate", {
+      defaultValue: "Custom"
+    }),
+    reset: t("admin.dashboard.filters.reset", { defaultValue: "Reset" }),
+    topSort: t("admin.dashboard.filters.topSort", {
+      defaultValue: "Top packages sort"
+    }),
+    sortBookings: t("admin.dashboard.filters.sortBookings", {
+      defaultValue: "Bookings"
+    }),
+    sortRevenue: t("admin.dashboard.filters.sortRevenue", {
+      defaultValue: "Revenue"
+    }),
+    sortDesc: t("admin.dashboard.filters.sortDesc", { defaultValue: "Desc" }),
+    sortAsc: t("admin.dashboard.filters.sortAsc", { defaultValue: "Asc" }),
+    confirmedBookings: t("admin.dashboard.cards.confirmedBookings", {
+      defaultValue: "Confirmed Bookings"
+    }),
+    confirmedRevenue: t("admin.dashboard.cards.confirmedRevenue", {
+      defaultValue: "Revenue (Confirmed)"
+    }),
+    avgRevenue: t("admin.dashboard.cards.avgRevenue", {
+      defaultValue: "Avg Revenue / Booking"
+    }),
+    conversionRate: t("admin.dashboard.cards.conversionRate", {
+      defaultValue: "Conversion Rate"
+    }),
+    totalProducts: t("admin.dashboard.cards.totalProducts", {
+      defaultValue: "Total Products"
+    }),
+    totalCustomers: t("admin.dashboard.cards.totalCustomers", {
+      defaultValue: "Total Customers"
+    }),
+    dailyTrends: t("admin.dashboard.sections.dailyTrends", {
+      defaultValue: "Daily Trends"
+    }),
+    statusDistribution: t("admin.dashboard.sections.statusDistribution", {
+      defaultValue: "Status Distribution"
+    }),
+    audienceDistribution: t("admin.dashboard.sections.audienceDistribution", {
+      defaultValue: "Audience Distribution"
+    }),
+    topPackages: t("admin.dashboard.sections.topPackages", {
+      defaultValue: "Top Packages"
+    }),
+    recentBookings: t("admin.dashboard.sections.recentBookings", {
+      defaultValue: "Recent Bookings"
+    }),
+    date: t("admin.dashboard.table.date", { defaultValue: "Date" }),
+    customer: t("admin.dashboard.table.customer", { defaultValue: "Customer" }),
+    package: t("admin.dashboard.table.package", { defaultValue: "Package" }),
+    audience: t("admin.dashboard.table.audience", { defaultValue: "Audience" }),
+    total: t("admin.dashboard.table.total", { defaultValue: "Total" }),
+    status: t("admin.dashboard.table.status", { defaultValue: "Status" }),
+    noRecentBookings: t("admin.dashboard.emptyRecent", {
+      defaultValue: "No recent bookings"
+    }),
+    bookingsMetric: t("admin.dashboard.metrics.bookings", {
+      defaultValue: "Bookings"
+    }),
+    revenueMetric: t("admin.dashboard.metrics.revenue", {
+      defaultValue: "Revenue"
+    }),
+    pendingMetric: t("admin.dashboard.metrics.pendingBookings", {
+      defaultValue: "Bookings (Pending)"
+    }),
+    confirmedBookingMetric: t("admin.dashboard.metrics.confirmedBookings", {
+      defaultValue: "Bookings (Confirmed)"
+    }),
+    confirmedRevenueMetric: t("admin.dashboard.metrics.confirmedRevenue", {
+      defaultValue: "Revenue (Confirmed)"
+    }),
+    unknownAudience: t("admin.dashboard.filters.unknownAudience", {
+      defaultValue: "Unknown"
+    })
+  };
+  labels.dayLabel = (count) => t("admin.dashboard.filters.dayWindow", {
+    count,
+    defaultValue: "{{count}} days"
+  });
+  labels.formatStatusLabel = (status) => {
+    const normalized = String(status || "pending").toLowerCase();
+    const defaultValue = normalized.charAt(0).toUpperCase() + normalized.slice(1);
+    return t(`admin.dashboard.status.${normalized}`, { defaultValue });
+  };
+  labels.formatAudienceLabel = (value) => {
+    if (value === "domestic") return labels.audienceDomestic;
+    if (value === "foreign") return labels.audienceForeign;
+    return labels.unknownAudience;
+  };
+  return labels;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Badge,
+  Button,
+  ChartCard,
+  ChartHeader,
+  DashboardLayout,
+  DataTable,
+  DateRangeFilter,
+  FilterPanel,
+  Icon,
+  Input,
+  ReusableDashboardView,
+  SearchBar,
+  SidebarNavigation,
+  SkeletonLoader,
+  StatCard,
+  TopbarHeader,
+  Typography,
+  adaptCidikaDashboardData,
+  adaptDummyUmkmData,
+  adaptTokoSepatuData,
+  buildDayBuckets,
+  cidikaWidgetConfig,
+  createCidikaSupabaseSource,
+  createDashboardLabels,
+  createDefaultFilters,
+  createEmptyDashboardData,
+  createEmptyDummyUmkmData,
+  createEmptyTokoSepatuData,
+  createTokoSepatuSupabaseSource,
+  dummyUmkmWidgetConfig,
+  formatDate,
+  formatIDR,
+  formatYYYYMMDD,
+  resolveDateRange,
+  resolveIcon,
+  shortId,
+  sortMapEntries,
+  toNumber,
+  tokoSepatuWidgetConfig,
+  useRealtimeUpdate,
+  useReusableDashboard
+});
+//# sourceMappingURL=index.cjs.map