@rozaqi02/reusable-dashboard 1.0.1 → 1.1.1

package/dist/index.js

@@ -1027,42 +1027,20 @@ function Button({
   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__ */ React.createElement(
-    "button",
-    {
-      type: "button",
-      className: classes,
-      disabled,
-      onClick,
-      ...rest
-    },
-    children
-  );
+  const classes = [
+    "rdb-btn",
+    `rdb-btn-${variant}`,
+    `rdb-btn-${size}`,
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ React.createElement("button", { type: "button", className: classes, disabled, onClick, ...rest }, children);
 }
 Button.propTypes = {
-  /** Varian visual tombol. */
   variant: PropTypes.oneOf(["primary", "secondary", "ghost"]),
-  /** Ukuran tombol. */
   size: PropTypes.oneOf(["sm", "md", "lg"]),
-  /** Apakah tombol non-aktif. */
   disabled: PropTypes.bool,
-  /** ClassName tambahan dari consumer. */
   className: PropTypes.string,
-  /** Callback saat tombol diklik. */
   onClick: PropTypes.func,
-  /** Konten tombol. */
   children: PropTypes.node.isRequired
 };
 
@@ -1079,14 +1057,7 @@ function Input({
   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__ */ React2.createElement("div", { className: "flex flex-col gap-1" }, label ? /* @__PURE__ */ React2.createElement("label", { className: "text-xs font-medium text-slate-500 dark:text-slate-400" }, label) : null, /* @__PURE__ */ React2.createElement(
+  return /* @__PURE__ */ React2.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 4 } }, label ? /* @__PURE__ */ React2.createElement("label", { className: "rdb-label" }, label) : null, /* @__PURE__ */ React2.createElement(
     "input",
     {
       type,
@@ -1094,25 +1065,18 @@ function Input({
       onChange,
       placeholder,
       disabled,
-      className: inputClasses,
+      className: ["rdb-input", className].filter(Boolean).join(" "),
       ...rest
     }
   ));
 }
 Input.propTypes = {
-  /** Tipe input. */
   type: PropTypes2.string,
-  /** Nilai input. */
   value: PropTypes2.oneOfType([PropTypes2.string, PropTypes2.number]),
-  /** Callback saat nilai berubah. */
   onChange: PropTypes2.func,
-  /** Placeholder teks. */
   placeholder: PropTypes2.string,
-  /** Label di atas input. */
   label: PropTypes2.string,
-  /** Apakah input non-aktif. */
   disabled: PropTypes2.bool,
-  /** ClassName tambahan. */
   className: PropTypes2.string
 };
 
@@ -1170,81 +1134,83 @@ Icon.propTypes = {
 // src/presentation/atoms/Typography.jsx
 import React4 from "react";
 import PropTypes4 from "prop-types";
-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" }
+var VARIANT_CLASS = {
+  h1: "rdb-h1",
+  h2: "rdb-h2",
+  h3: "rdb-h3",
+  subheading: "rdb-subheading",
+  body: "rdb-body",
+  caption: "rdb-caption",
+  metric: "rdb-metric"
 };
-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__ */ React4.createElement(Tag, { className: classes, ...rest }, children);
+var VARIANT_TAG = {
+  h1: "h1",
+  h2: "h2",
+  h3: "h3",
+  subheading: "p",
+  body: "p",
+  caption: "span",
+  metric: "span"
+};
+function Typography({ variant = "body", className = "", children, ...rest }) {
+  const Tag = VARIANT_TAG[variant] || "p";
+  const cls = [VARIANT_CLASS[variant] || "rdb-body", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ React4.createElement(Tag, { className: cls, ...rest }, children);
 }
 Typography.propTypes = {
-  /** Varian tipografi. */
   variant: PropTypes4.oneOf(["h1", "h2", "h3", "subheading", "body", "caption", "metric"]),
-  /** ClassName tambahan. */
   className: PropTypes4.string,
-  /** Konten teks. */
   children: PropTypes4.node.isRequired
 };
 
 // src/presentation/atoms/Badge.jsx
 import React5 from "react";
 import PropTypes5 from "prop-types";
-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"
+var STATUS_CLASS = {
+  confirmed: "rdb-badge-confirmed",
+  pending: "rdb-badge-pending",
+  cancelled: "rdb-badge-cancelled",
+  success: "rdb-badge-success",
+  info: "rdb-badge-info",
+  default: "rdb-badge-default"
 };
 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__ */ React5.createElement("span", { className: classes, ...rest }, children);
+  const statusClass = STATUS_CLASS[status] || STATUS_CLASS.default;
+  return /* @__PURE__ */ React5.createElement("span", { className: ["rdb-badge", statusClass, className].filter(Boolean).join(" "), ...rest }, children);
 }
 Badge.propTypes = {
-  /** Status yang menentukan warna badge. */
   status: PropTypes5.string,
-  /** ClassName tambahan. */
   className: PropTypes5.string,
-  /** Label teks badge. */
   children: PropTypes5.node.isRequired
 };
 
 // src/presentation/atoms/SkeletonLoader.jsx
 import React6 from "react";
 import PropTypes6 from "prop-types";
-function SkeletonLoader({ className = "" }) {
+function SkeletonLoader({ className = "", style = {} }) {
   return /* @__PURE__ */ React6.createElement(
     "div",
     {
-      className: `animate-pulse bg-slate-200 dark:bg-slate-700 rounded-xl ${className}`,
+      className: ["rdb-skeleton", className].filter(Boolean).join(" "),
+      style: { minHeight: 20, ...style },
       role: "status",
       "aria-label": "Loading..."
     }
   );
 }
 SkeletonLoader.propTypes = {
-  /** ClassName tambahan untuk mengatur ukuran skeleton (misal: "h-28", "h-64"). */
-  className: PropTypes6.string
+  className: PropTypes6.string,
+  style: PropTypes6.object
 };
 
 // src/presentation/molecules/StatCard.jsx
 import React7 from "react";
 import PropTypes7 from "prop-types";
+function renderValue(format, value) {
+  if (format === "currency") return `Rp ${formatIDR(value)}`;
+  if (format === "percent") return `${Number(value) || 0}%`;
+  return String(Number(value) || 0);
+}
 function StatCard({
   label,
   value,
@@ -1254,29 +1220,14 @@ function StatCard({
   accentColor = "blue",
   className = ""
 }) {
-  const formattedValue = renderValue(format, value);
-  const ACCENT = {
-    blue: { bg: "bg-blue-50 dark:bg-blue-900/20", icon: "text-blue-600 dark:text-blue-400", bar: "bg-blue-500", border: "border-l-4 border-blue-400" },
-    green: { bg: "bg-emerald-50 dark:bg-emerald-900/20", icon: "text-emerald-600 dark:text-emerald-400", bar: "bg-emerald-500", border: "border-l-4 border-emerald-400" },
-    violet: { bg: "bg-violet-50 dark:bg-violet-900/20", icon: "text-violet-600 dark:text-violet-400", bar: "bg-violet-500", border: "border-l-4 border-violet-400" },
-    orange: { bg: "bg-orange-50 dark:bg-orange-900/20", icon: "text-orange-600 dark:text-orange-400", bar: "bg-orange-500", border: "border-l-4 border-orange-400" },
-    sky: { bg: "bg-sky-50 dark:bg-sky-900/20", icon: "text-sky-600 dark:text-sky-400", bar: "bg-sky-500", border: "border-l-4 border-sky-400" },
-    rose: { bg: "bg-rose-50 dark:bg-rose-900/20", icon: "text-rose-600 dark:text-rose-400", bar: "bg-rose-500", border: "border-l-4 border-rose-400" }
-  };
-  const accent = ACCENT[accentColor] || ACCENT.blue;
-  return /* @__PURE__ */ React7.createElement("div", { className: `card p-4 flex flex-col justify-between gap-3 ${accent.border} ${className}` }, /* @__PURE__ */ React7.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React7.createElement("div", { className: "flex items-center gap-2 text-slate-500 dark:text-slate-400" }, /* @__PURE__ */ React7.createElement("div", { className: `w-8 h-8 rounded-xl flex items-center justify-center ${accent.bg} ${accent.icon} shrink-0` }, /* @__PURE__ */ React7.createElement(Icon, { name: icon, size: 16 })), /* @__PURE__ */ React7.createElement(Typography, { variant: "subheading" }, label)), trend ? /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React7.createElement("div", { className: ["rdb-card rdb-statcard", `rdb-accent-${accentColor}`, className].filter(Boolean).join(" ") }, /* @__PURE__ */ React7.createElement("div", { className: "rdb-statcard-header" }, /* @__PURE__ */ React7.createElement("div", { className: "rdb-statcard-label-group" }, /* @__PURE__ */ React7.createElement("div", { className: "rdb-statcard-icon" }, /* @__PURE__ */ React7.createElement(Icon, { name: icon, size: 16 })), /* @__PURE__ */ React7.createElement("span", { className: "rdb-statcard-label" }, label)), trend ? /* @__PURE__ */ React7.createElement(
     Icon,
     {
       name: trend === "up" ? "TrendingUp" : "TrendingDown",
       size: 16,
-      className: trend === "up" ? "text-emerald-500" : "text-red-500"
+      style: { color: trend === "up" ? "#10b981" : "#ef4444" }
     }
-  ) : null), /* @__PURE__ */ React7.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);
+  ) : null), /* @__PURE__ */ React7.createElement("div", { className: "rdb-statcard-value" }, renderValue(format, value)));
 }
 StatCard.propTypes = {
   label: PropTypes7.string.isRequired,
@@ -1284,7 +1235,6 @@ StatCard.propTypes = {
   icon: PropTypes7.string,
   format: PropTypes7.oneOf(["number", "currency", "percent"]),
   trend: PropTypes7.oneOf(["up", "down", null]),
-  /** Warna aksen: blue | green | violet | orange | sky | rose */
   accentColor: PropTypes7.string,
   className: PropTypes7.string
 };
@@ -1302,45 +1252,33 @@ function SearchBar({
   const [internalValue, setInternalValue] = useState3("");
   const isControlled = controlledValue !== void 0;
   const currentValue = isControlled ? controlledValue : internalValue;
-  const handleChange = useCallback2(
-    (event) => {
-      const newValue = event.target.value;
-      if (!isControlled) setInternalValue(newValue);
-      if (onChange) onChange(newValue);
-      if (onSearch) onSearch(newValue);
-    },
-    [isControlled, onChange, onSearch]
-  );
-  const handleKeyDown = useCallback2(
-    (event) => {
-      if (event.key === "Enter" && onSearch) {
-        onSearch(currentValue);
-      }
-    },
-    [currentValue, onSearch]
-  );
-  return /* @__PURE__ */ React8.createElement("div", { className: `relative ${className}` }, /* @__PURE__ */ React8.createElement("div", { className: "absolute inset-y-0 left-3 flex items-center pointer-events-none" }, /* @__PURE__ */ React8.createElement(Icon, { name: "Search", size: 16, className: "text-slate-400" })), /* @__PURE__ */ React8.createElement(
-    Input,
+  const handleChange = useCallback2((event) => {
+    const v = event.target.value;
+    if (!isControlled) setInternalValue(v);
+    if (onChange) onChange(v);
+    if (onSearch) onSearch(v);
+  }, [isControlled, onChange, onSearch]);
+  const handleKeyDown = useCallback2((event) => {
+    if (event.key === "Enter" && onSearch) onSearch(currentValue);
+  }, [currentValue, onSearch]);
+  return /* @__PURE__ */ React8.createElement("div", { className: ["rdb-searchbar", className].filter(Boolean).join(" ") }, /* @__PURE__ */ React8.createElement("div", { className: "rdb-searchbar-icon" }, /* @__PURE__ */ React8.createElement(Icon, { name: "Search", size: 16 })), /* @__PURE__ */ React8.createElement(
+    "input",
     {
       type: "search",
       value: currentValue,
       onChange: handleChange,
       onKeyDown: handleKeyDown,
       placeholder,
-      className: "pl-9 w-full"
+      className: "rdb-input rdb-searchbar-input",
+      style: { width: "100%" }
     }
   ));
 }
 SearchBar.propTypes = {
-  /** Nilai pencarian saat ini (controlled). */
   value: PropTypes8.string,
-  /** Callback saat nilai input berubah. */
   onChange: PropTypes8.func,
-  /** Callback saat pencarian disubmit. */
   onSearch: PropTypes8.func,
-  /** Placeholder teks. */
   placeholder: PropTypes8.string,
-  /** ClassName tambahan. */
   className: PropTypes8.string
 };
 
@@ -1350,26 +1288,11 @@ import PropTypes9 from "prop-types";
 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"
-];
+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;
+  const y = [];
+  for (let i = MAX_YEAR; i >= MIN_YEAR2; i--) y.push(i);
+  return y;
 }
 function getDaysInMonth(year, month) {
   return new Date(year, month, 0).getDate();
@@ -1377,68 +1300,57 @@ function getDaysInMonth(year, month) {
 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) {
+    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 }) {
+function fmt({ 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 p = parseDate(value);
   const years = getYears();
-  const maxDay = getDaysInMonth(parsed.year, parsed.month);
-  const handleChange = useCallback3(
-    (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__ */ React9.createElement("div", { className: "flex flex-col gap-1" }, label ? /* @__PURE__ */ React9.createElement(Typography, { variant: "caption", className: "font-medium" }, label) : null, /* @__PURE__ */ React9.createElement("div", { className: "flex items-center gap-1" }, /* @__PURE__ */ React9.createElement(
+  const maxDay = getDaysInMonth(p.year, p.month);
+  const handleChange = useCallback3((field, val) => {
+    const u = { ...p, [field]: Number(val) };
+    const max = getDaysInMonth(u.year, u.month);
+    if (u.day > max) u.day = max;
+    onChange(fmt(u));
+  }, [p, onChange]);
+  return /* @__PURE__ */ React9.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 2 } }, label ? /* @__PURE__ */ React9.createElement("span", { className: "rdb-caption rdb-label" }, label) : null, /* @__PURE__ */ React9.createElement("div", { style: { display: "flex", gap: 4, alignItems: "center" } }, /* @__PURE__ */ React9.createElement(
     "select",
     {
-      className: selectClass,
-      value: parsed.day,
+      className: "rdb-select",
+      style: { width: 52 },
+      value: p.day,
       onChange: (e) => handleChange("day", e.target.value),
-      disabled,
-      "aria-label": `${label} day`
+      disabled
     },
     Array.from({ length: maxDay }, (_, i) => i + 1).map((d) => /* @__PURE__ */ React9.createElement("option", { key: d, value: d }, String(d).padStart(2, "0")))
   ), /* @__PURE__ */ React9.createElement(
     "select",
     {
-      className: selectClass,
-      value: parsed.month,
+      className: "rdb-select",
+      style: { width: 62 },
+      value: p.month,
       onChange: (e) => handleChange("month", e.target.value),
-      disabled,
-      "aria-label": `${label} month`
+      disabled
     },
     MONTHS.map((name, idx) => /* @__PURE__ */ React9.createElement("option", { key: idx + 1, value: idx + 1 }, name))
   ), /* @__PURE__ */ React9.createElement(
     "select",
     {
-      className: selectClass,
-      value: parsed.year,
+      className: "rdb-select",
+      style: { width: 72 },
+      value: p.year,
       onChange: (e) => handleChange("year", e.target.value),
-      disabled,
-      "aria-label": `${label} year`
+      disabled
     },
     years.map((y) => /* @__PURE__ */ React9.createElement("option", { key: y, value: y }, y))
   )));
 }
-DatePicker.propTypes = {
-  value: PropTypes9.string.isRequired,
-  onChange: PropTypes9.func.isRequired,
-  disabled: PropTypes9.bool,
-  label: PropTypes9.string
-};
 function DateRangeFilter({
   dateFrom,
   dateTo,
@@ -1448,31 +1360,9 @@ function DateRangeFilter({
   labelTo = "To",
   className = ""
 }) {
-  const handleFromChange = useCallback3(
-    (newDate) => onRangeChange == null ? void 0 : onRangeChange({ dateFrom: newDate, dateTo }),
-    [dateTo, onRangeChange]
-  );
-  const handleToChange = useCallback3(
-    (newDate) => onRangeChange == null ? void 0 : onRangeChange({ dateFrom, dateTo: newDate }),
-    [dateFrom, onRangeChange]
-  );
-  return /* @__PURE__ */ React9.createElement("div", { className: `flex flex-wrap items-end gap-3 ${className}` }, /* @__PURE__ */ React9.createElement(
-    DatePicker,
-    {
-      value: dateFrom,
-      onChange: handleFromChange,
-      disabled,
-      label: labelFrom
-    }
-  ), /* @__PURE__ */ React9.createElement(
-    DatePicker,
-    {
-      value: dateTo,
-      onChange: handleToChange,
-      disabled,
-      label: labelTo
-    }
-  ));
+  const handleFrom = useCallback3((v) => onRangeChange == null ? void 0 : onRangeChange({ dateFrom: v, dateTo }), [dateTo, onRangeChange]);
+  const handleTo = useCallback3((v) => onRangeChange == null ? void 0 : onRangeChange({ dateFrom, dateTo: v }), [dateFrom, onRangeChange]);
+  return /* @__PURE__ */ React9.createElement("div", { className: ["rdb-daterange", className].filter(Boolean).join(" ") }, /* @__PURE__ */ React9.createElement(DatePicker, { value: dateFrom, onChange: handleFrom, disabled, label: labelFrom }), /* @__PURE__ */ React9.createElement(DatePicker, { value: dateTo, onChange: handleTo, disabled, label: labelTo }));
 }
 DateRangeFilter.propTypes = {
   dateFrom: PropTypes9.string.isRequired,
@@ -1487,22 +1377,13 @@ DateRangeFilter.propTypes = {
 // src/presentation/molecules/ChartHeader.jsx
 import React10 from "react";
 import PropTypes10 from "prop-types";
-function ChartHeader({
-  title,
-  icon = "BarChart3",
-  actions = null,
-  className = ""
-}) {
-  return /* @__PURE__ */ React10.createElement("div", { className: `flex items-center justify-between mb-2 ${className}` }, /* @__PURE__ */ React10.createElement(Typography, { variant: "h3", className: "flex items-center gap-2" }, /* @__PURE__ */ React10.createElement(Icon, { name: icon, size: 18 }), title), actions);
+function ChartHeader({ title, icon = "BarChart3", actions = null, className = "" }) {
+  return /* @__PURE__ */ React10.createElement("div", { className: ["rdb-chart-title-wrap", className].filter(Boolean).join(" ") }, /* @__PURE__ */ React10.createElement("div", { className: "rdb-chart-title" }, /* @__PURE__ */ React10.createElement(Icon, { name: icon, size: 18 }), title), actions);
 }
 ChartHeader.propTypes = {
-  /** Judul grafik. */
   title: PropTypes10.string.isRequired,
-  /** Nama ikon header. */
   icon: PropTypes10.string,
-  /** Elemen aksi tambahan di sisi kanan. */
   actions: PropTypes10.node,
-  /** ClassName tambahan. */
   className: PropTypes10.string
 };
 
@@ -1527,28 +1408,24 @@ function DataTable({
   const [currentPage, setCurrentPage] = useState5(1);
   const filteredData = useMemo2(() => {
     if (!searchQuery.trim()) return data;
-    const query = searchQuery.toLowerCase();
+    const q = searchQuery.toLowerCase();
     return data.filter(
       (row) => columns.some((col) => {
-        const value = row[col.accessor];
-        return value != null && String(value).toLowerCase().includes(query);
+        const v = row[col.accessor];
+        return v != null && String(v).toLowerCase().includes(q);
       })
     );
   }, [data, searchQuery, columns]);
   const sortedData = useMemo2(() => {
     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 [...filteredData].sort((a, b) => {
+      const aV = a[sortField] ?? "";
+      const bV = b[sortField] ?? "";
+      if (typeof aV === "number" && typeof bV === "number")
+        return sortDirection === "asc" ? aV - bV : bV - aV;
+      const cmp = String(aV).localeCompare(String(bV), void 0, { numeric: true });
+      return sortDirection === "asc" ? cmp : -cmp;
     });
-    return sorted;
   }, [filteredData, sortField, sortDirection]);
   const totalPages = Math.max(1, Math.ceil(sortedData.length / pageSize));
   const safePage = Math.min(currentPage, totalPages);
@@ -1556,90 +1433,29 @@ function DataTable({
     const start = (safePage - 1) * pageSize;
     return sortedData.slice(start, start + pageSize);
   }, [sortedData, safePage, pageSize]);
-  const handleSearch = useCallback4((value) => {
-    setSearchQuery(value);
+  const handleSearch = useCallback4((v) => {
+    setSearchQuery(v);
     setCurrentPage(1);
   }, []);
-  const handleSort = useCallback4(
-    (accessor) => {
-      if (!sortable) return;
-      if (sortField === accessor) {
-        setSortDirection((prev) => prev === "asc" ? "desc" : "asc");
-      } else {
-        setSortField(accessor);
-        setSortDirection("asc");
-      }
-      setCurrentPage(1);
-    },
-    [sortable, sortField]
-  );
-  const handlePrevPage = useCallback4(() => {
-    setCurrentPage((prev) => Math.max(1, prev - 1));
-  }, []);
-  const handleNextPage = useCallback4(() => {
-    setCurrentPage((prev) => Math.min(totalPages, prev + 1));
-  }, [totalPages]);
-  return /* @__PURE__ */ React11.createElement("div", { className: `space-y-3 ${className}` }, searchable ? /* @__PURE__ */ React11.createElement(
-    SearchBar,
-    {
-      value: searchQuery,
-      onSearch: handleSearch,
-      placeholder: searchPlaceholder,
-      className: "max-w-sm"
+  const handleSort = useCallback4((acc) => {
+    if (!sortable) return;
+    if (sortField === acc) setSortDirection((p) => p === "asc" ? "desc" : "asc");
+    else {
+      setSortField(acc);
+      setSortDirection("asc");
     }
-  ) : null, /* @__PURE__ */ React11.createElement("div", { className: "overflow-x-auto" }, /* @__PURE__ */ React11.createElement("table", { className: "min-w-full text-sm border-collapse" }, /* @__PURE__ */ React11.createElement("thead", null, /* @__PURE__ */ React11.createElement("tr", { className: "bg-slate-100 dark:bg-slate-800 text-left" }, columns.map((column) => /* @__PURE__ */ React11.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__ */ React11.createElement("div", { className: "flex items-center gap-1" }, /* @__PURE__ */ React11.createElement("span", null, labels[column.label] || column.label), sortable && sortField === column.accessor ? /* @__PURE__ */ React11.createElement(
-      Icon,
-      {
-        name: sortDirection === "asc" ? "ArrowUp" : "ArrowDown",
-        size: 14,
-        className: "text-blue-500"
-      }
-    ) : null)
-  )))), /* @__PURE__ */ React11.createElement("tbody", null, paginatedData.map((row) => /* @__PURE__ */ React11.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__ */ React11.createElement("td", { key: `${row.id}-${column.id}`, className: "p-3" }, renderCell(column, row, dateLocale)))
-  )), paginatedData.length === 0 ? /* @__PURE__ */ React11.createElement("tr", null, /* @__PURE__ */ React11.createElement(
-    "td",
-    {
-      className: "p-6 text-center text-slate-500",
-      colSpan: columns.length
-    },
-    emptyLabel
-  )) : null))), sortedData.length > pageSize ? /* @__PURE__ */ React11.createElement("div", { className: "flex items-center justify-between px-1" }, /* @__PURE__ */ React11.createElement("span", { className: "text-xs text-slate-500" }, (safePage - 1) * pageSize + 1, "\u2013", Math.min(safePage * pageSize, sortedData.length), " of", " ", sortedData.length), /* @__PURE__ */ React11.createElement("div", { className: "flex items-center gap-1" }, /* @__PURE__ */ React11.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__ */ React11.createElement(Icon, { name: "ChevronLeft", size: 16 })
-  ), /* @__PURE__ */ React11.createElement("span", { className: "text-xs text-slate-600 dark:text-slate-300 min-w-[60px] text-center" }, safePage, " / ", totalPages), /* @__PURE__ */ React11.createElement(
-    "button",
+    setCurrentPage(1);
+  }, [sortable, sortField]);
+  const handlePrev = useCallback4(() => setCurrentPage((p) => Math.max(1, p - 1)), []);
+  const handleNext = useCallback4(() => setCurrentPage((p) => Math.min(totalPages, p + 1)), [totalPages]);
+  return /* @__PURE__ */ React11.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, className }, searchable ? /* @__PURE__ */ React11.createElement(SearchBar, { value: searchQuery, onSearch: handleSearch, placeholder: searchPlaceholder }) : null, /* @__PURE__ */ React11.createElement("div", { className: "rdb-table-wrapper" }, /* @__PURE__ */ React11.createElement("table", { className: "rdb-table" }, /* @__PURE__ */ React11.createElement("thead", null, /* @__PURE__ */ React11.createElement("tr", null, columns.map((col) => /* @__PURE__ */ React11.createElement("th", { key: col.id, onClick: () => handleSort(col.accessor) }, /* @__PURE__ */ React11.createElement("div", { style: { display: "flex", alignItems: "center", gap: 4 } }, /* @__PURE__ */ React11.createElement("span", null, labels[col.label] || col.label), sortable && sortField === col.accessor ? /* @__PURE__ */ React11.createElement(
+    Icon,
     {
-      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__ */ React11.createElement(Icon, { name: "ChevronRight", size: 16 })
-  ))) : null);
+      name: sortDirection === "asc" ? "ArrowUp" : "ArrowDown",
+      size: 13,
+      style: { color: "var(--rdb-blue-500)" }
+    }
+  ) : null))))), /* @__PURE__ */ React11.createElement("tbody", null, paginatedData.map((row) => /* @__PURE__ */ React11.createElement("tr", { key: row.id }, columns.map((col) => /* @__PURE__ */ React11.createElement("td", { key: `${row.id}-${col.id}` }, renderCell(col, row, dateLocale))))), paginatedData.length === 0 ? /* @__PURE__ */ React11.createElement("tr", null, /* @__PURE__ */ React11.createElement("td", { className: "rdb-table-empty", colSpan: columns.length }, emptyLabel)) : null))), sortedData.length > pageSize ? /* @__PURE__ */ React11.createElement("div", { className: "rdb-pagination" }, /* @__PURE__ */ React11.createElement("span", { className: "rdb-pagination-info" }, (safePage - 1) * pageSize + 1, "\u2013", Math.min(safePage * pageSize, sortedData.length), " of ", sortedData.length), /* @__PURE__ */ React11.createElement("div", { className: "rdb-pagination-controls" }, /* @__PURE__ */ React11.createElement("button", { type: "button", className: "rdb-page-btn", onClick: handlePrev, disabled: safePage <= 1, "aria-label": "Previous" }, /* @__PURE__ */ React11.createElement(Icon, { name: "ChevronLeft", size: 16 })), /* @__PURE__ */ React11.createElement("span", { className: "rdb-pagination-page" }, safePage, " / ", totalPages), /* @__PURE__ */ React11.createElement("button", { type: "button", className: "rdb-page-btn", onClick: handleNext, disabled: safePage >= totalPages, "aria-label": "Next" }, /* @__PURE__ */ React11.createElement(Icon, { name: "ChevronRight", size: 16 })))) : null);
 }
 function renderCell(column, row, dateLocale) {
   const value = row[column.accessor];
@@ -1652,33 +1468,21 @@ function renderCell(column, row, dateLocale) {
   return value || "-";
 }
 DataTable.propTypes = {
-  /** Definisi kolom tabel. */
-  columns: PropTypes11.arrayOf(
-    PropTypes11.shape({
-      id: PropTypes11.string.isRequired,
-      label: PropTypes11.string.isRequired,
-      accessor: PropTypes11.string.isRequired,
-      type: PropTypes11.oneOf(["date", "currency", "statusBadge"]),
-      statusAccessor: PropTypes11.string
-    })
-  ).isRequired,
-  /** Array data baris. */
+  columns: PropTypes11.arrayOf(PropTypes11.shape({
+    id: PropTypes11.string.isRequired,
+    label: PropTypes11.string.isRequired,
+    accessor: PropTypes11.string.isRequired,
+    type: PropTypes11.oneOf(["date", "currency", "statusBadge"]),
+    statusAccessor: PropTypes11.string
+  })).isRequired,
   data: PropTypes11.arrayOf(PropTypes11.object),
-  /** Objek label i18n. */
   labels: PropTypes11.object,
-  /** Locale untuk format tanggal. */
   dateLocale: PropTypes11.string,
-  /** Apakah tabel mendukung pencarian. */
   searchable: PropTypes11.bool,
-  /** Apakah tabel mendukung pengurutan. */
   sortable: PropTypes11.bool,
-  /** Jumlah baris per halaman. */
   pageSize: PropTypes11.number,
-  /** Label saat data kosong. */
   emptyLabel: PropTypes11.string,
-  /** Placeholder pencarian. */
   searchPlaceholder: PropTypes11.string,
-  /** ClassName tambahan. */
   className: PropTypes11.string
 };
 
@@ -1846,44 +1650,38 @@ 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__ */ React13.createElement("div", { className: `flex flex-col gap-2 ${className}` }, /* @__PURE__ */ React13.createElement("div", { className: "grid grid-cols-1 lg:grid-cols-6 gap-2" }, /* @__PURE__ */ React13.createElement(
+function FilterPanel({ filters, labels, onFilterChange, onResetFilters, className = "" }) {
+  return /* @__PURE__ */ React13.createElement("div", { className: ["rdb-filter-panel", className].filter(Boolean).join(" ") }, /* @__PURE__ */ React13.createElement("div", { className: "rdb-filter-row" }, /* @__PURE__ */ React13.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",
+      className: "rdb-select",
       value: filters.statusScope,
-      onChange: (event) => onFilterChange("statusScope", event.target.value)
+      onChange: (e) => onFilterChange("statusScope", e.target.value)
     },
-    STATUS_OPTIONS.map((status) => /* @__PURE__ */ React13.createElement("option", { key: status, value: status }, status === "confirmed" ? labels.confirmedOnly : status === "pending" ? labels.pendingOnly : labels.allStatus))
-  ), /* @__PURE__ */ React13.createElement("label", { className: "inline-flex items-center gap-2 px-3 py-2 rounded-2xl border border-slate-300 dark:border-slate-600" }, /* @__PURE__ */ React13.createElement(
-    Input,
+    STATUS_OPTIONS.map((s) => /* @__PURE__ */ React13.createElement("option", { key: s, value: s }, s === "confirmed" ? labels.confirmedOnly : s === "pending" ? labels.pendingOnly : labels.allStatus))
+  ), /* @__PURE__ */ React13.createElement("label", { className: "rdb-filter-overlay-label" }, /* @__PURE__ */ React13.createElement(
+    "input",
     {
       type: "checkbox",
       checked: filters.includePendingOverlay,
-      onChange: (event) => onFilterChange("includePendingOverlay", event.target.checked)
+      onChange: (e) => onFilterChange("includePendingOverlay", e.target.checked)
     }
-  ), /* @__PURE__ */ React13.createElement(Typography, { variant: "body" }, labels.showPendingOverlay)), /* @__PURE__ */ React13.createElement(
+  ), /* @__PURE__ */ React13.createElement("span", { className: "rdb-body" }, labels.showPendingOverlay)), /* @__PURE__ */ React13.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",
+      className: "rdb-select",
       value: filters.audience,
-      onChange: (event) => onFilterChange("audience", event.target.value)
+      onChange: (e) => onFilterChange("audience", e.target.value)
     },
-    AUDIENCE_OPTIONS.map((audience) => /* @__PURE__ */ React13.createElement("option", { key: audience || "all", value: audience }, audience === "domestic" ? labels.audienceDomestic : audience === "foreign" ? labels.audienceForeign : labels.allAudience))
+    AUDIENCE_OPTIONS.map((a) => /* @__PURE__ */ React13.createElement("option", { key: a || "all", value: a }, a === "domestic" ? labels.audienceDomestic : a === "foreign" ? labels.audienceForeign : labels.allAudience))
   ), /* @__PURE__ */ React13.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",
+      className: "rdb-select",
       value: String(filters.daysPreset),
-      onChange: (event) => onFilterChange("daysPreset", Number(event.target.value))
+      onChange: (e) => onFilterChange("daysPreset", Number(e.target.value))
     },
-    DAY_PRESETS.map((days) => /* @__PURE__ */ React13.createElement("option", { key: String(days), value: String(days) }, days === 0 ? labels.customDate : labels.dayLabel(days)))
+    DAY_PRESETS.map((d) => /* @__PURE__ */ React13.createElement("option", { key: String(d), value: String(d) }, d === 0 ? labels.customDate : labels.dayLabel(d)))
   ), /* @__PURE__ */ React13.createElement(
     DateRangeFilter,
     {
@@ -1894,160 +1692,95 @@ function FilterPanel({
         if (dateTo !== filters.dateTo) onFilterChange("dateTo", dateTo);
       },
       disabled: filters.daysPreset !== 0,
-      className: "lg:col-span-2"
+      className: "rdb-filter-date"
     }
-  )), /* @__PURE__ */ React13.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React13.createElement(Button, { variant: "secondary", size: "sm", onClick: onResetFilters }, labels.reset), /* @__PURE__ */ React13.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React13.createElement(Typography, { variant: "caption" }, labels.topSort, ":"), /* @__PURE__ */ React13.createElement(
+  )), /* @__PURE__ */ React13.createElement("div", { className: "rdb-filter-actions" }, /* @__PURE__ */ React13.createElement(Button, { variant: "secondary", size: "sm", onClick: onResetFilters }, labels.reset), /* @__PURE__ */ React13.createElement("div", { className: "rdb-filter-sort" }, /* @__PURE__ */ React13.createElement("span", { className: "rdb-caption" }, labels.topSort, ":"), /* @__PURE__ */ React13.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",
+      className: "rdb-select",
+      style: { width: "auto" },
       value: filters.sortPkgBy,
-      onChange: (event) => onFilterChange("sortPkgBy", event.target.value)
+      onChange: (e) => onFilterChange("sortPkgBy", e.target.value)
     },
-    SORT_BY_OPTIONS.map((sortBy) => /* @__PURE__ */ React13.createElement("option", { key: sortBy, value: sortBy }, sortBy === "bookings" ? labels.sortBookings : labels.sortRevenue))
+    SORT_BY_OPTIONS.map((s) => /* @__PURE__ */ React13.createElement("option", { key: s, value: s }, s === "bookings" ? labels.sortBookings : labels.sortRevenue))
   ), /* @__PURE__ */ React13.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",
+      className: "rdb-select",
+      style: { width: "auto" },
       value: filters.sortPkgDir,
-      onChange: (event) => onFilterChange("sortPkgDir", event.target.value)
+      onChange: (e) => onFilterChange("sortPkgDir", e.target.value)
     },
-    SORT_DIR_OPTIONS.map((direction) => /* @__PURE__ */ React13.createElement("option", { key: direction, value: direction }, direction === "desc" ? labels.sortDesc : labels.sortAsc))
+    SORT_DIR_OPTIONS.map((d) => /* @__PURE__ */ React13.createElement("option", { key: d, value: d }, d === "desc" ? labels.sortDesc : labels.sortAsc))
   ))));
 }
 FilterPanel.propTypes = {
-  /** State filter saat ini. */
-  filters: PropTypes13.shape({
-    statusScope: PropTypes13.string,
-    includePendingOverlay: PropTypes13.bool,
-    audience: PropTypes13.string,
-    daysPreset: PropTypes13.number,
-    dateFrom: PropTypes13.string,
-    dateTo: PropTypes13.string,
-    sortPkgBy: PropTypes13.string,
-    sortPkgDir: PropTypes13.string
-  }).isRequired,
-  /** Objek label i18n. */
+  filters: PropTypes13.object.isRequired,
   labels: PropTypes13.object.isRequired,
-  /** Callback saat filter berubah (field, value). */
   onFilterChange: PropTypes13.func.isRequired,
-  /** Callback saat filter di-reset. */
   onResetFilters: PropTypes13.func.isRequired,
-  /** ClassName tambahan. */
   className: PropTypes13.string
 };
 
 // src/presentation/organisms/SidebarNavigation.jsx
 import React14 from "react";
 import PropTypes14 from "prop-types";
-function SidebarNavigation({
-  items = [],
-  activeItem = "",
-  onItemClick,
-  logo = null,
-  className = ""
-}) {
-  return /* @__PURE__ */ React14.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__ */ React14.createElement("div", { className: "px-4 py-4 border-b border-slate-100 dark:border-slate-800" }, logo) : null,
-    /* @__PURE__ */ React14.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__ */ React14.createElement(
-        "button",
+function SidebarNavigation({ items = [], activeItem = "", onItemClick, logo = null, className = "" }) {
+  return /* @__PURE__ */ React14.createElement("aside", { className: ["rdb-sidebar", className].filter(Boolean).join(" ") }, logo ? /* @__PURE__ */ React14.createElement("div", { className: "rdb-sidebar-logo" }, logo) : null, /* @__PURE__ */ React14.createElement("nav", { className: "rdb-sidebar-nav", "aria-label": "Sidebar navigation" }, items.map((item) => {
+    const isActive = item.id === activeItem;
+    return /* @__PURE__ */ React14.createElement(
+      "button",
+      {
+        key: item.id,
+        type: "button",
+        onClick: () => onItemClick == null ? void 0 : onItemClick(item.id),
+        "aria-current": isActive ? "page" : void 0,
+        className: ["rdb-nav-item", isActive ? "rdb-nav-item-active" : ""].filter(Boolean).join(" ")
+      },
+      item.icon ? /* @__PURE__ */ React14.createElement(
+        Icon,
         {
-          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__ */ React14.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__ */ React14.createElement("span", null, item.label),
-        isActive ? /* @__PURE__ */ React14.createElement("span", { className: "ml-auto w-1.5 h-1.5 rounded-full bg-blue-500" }) : null
-      );
-    }))
-  );
+          name: item.icon,
+          size: 18,
+          style: { color: isActive ? "var(--rdb-blue-600)" : "var(--rdb-text-subtle)" }
+        }
+      ) : null,
+      /* @__PURE__ */ React14.createElement("span", null, item.label),
+      isActive ? /* @__PURE__ */ React14.createElement("span", { className: "rdb-nav-dot" }) : null
+    );
+  })));
 }
 SidebarNavigation.propTypes = {
-  /** Daftar item menu navigasi. */
-  items: PropTypes14.arrayOf(
-    PropTypes14.shape({
-      id: PropTypes14.string.isRequired,
-      label: PropTypes14.string.isRequired,
-      icon: PropTypes14.string
-    })
-  ),
-  /** ID item yang sedang aktif. */
+  items: PropTypes14.arrayOf(PropTypes14.shape({ id: PropTypes14.string.isRequired, label: PropTypes14.string.isRequired, icon: PropTypes14.string })),
   activeItem: PropTypes14.string,
-  /** Callback saat item diklik, menerima id item sebagai argumen. */
   onItemClick: PropTypes14.func,
-  /** Konten logo/brand di atas sidebar. */
   logo: PropTypes14.node,
-  /** ClassName tambahan. */
   className: PropTypes14.string
 };
 
 // src/presentation/organisms/TopbarHeader.jsx
 import React15 from "react";
 import PropTypes15 from "prop-types";
-function TopbarHeader({
-  title = "",
-  actions = null,
-  leading = null,
-  className = ""
-}) {
-  return /* @__PURE__ */ React15.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__ */ React15.createElement("div", { className: "flex items-center gap-3" }, leading, title ? /* @__PURE__ */ React15.createElement(Typography, { variant: "h2", className: "truncate" }, title) : null),
-    actions ? /* @__PURE__ */ React15.createElement("div", { className: "flex items-center gap-2" }, actions) : null
-  );
+function TopbarHeader({ title = "", actions = null, leading = null, className = "" }) {
+  return /* @__PURE__ */ React15.createElement("header", { className: ["rdb-topbar", className].filter(Boolean).join(" ") }, /* @__PURE__ */ React15.createElement("div", { className: "rdb-topbar-left" }, leading, title ? /* @__PURE__ */ React15.createElement("span", { className: "rdb-h2", style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, title) : null), actions ? /* @__PURE__ */ React15.createElement("div", { className: "rdb-topbar-right" }, actions) : null);
 }
 TopbarHeader.propTypes = {
-  /** Judul halaman yang ditampilkan. */
   title: PropTypes15.string,
-  /** Elemen aksi di sisi kanan (tombol, avatar, dsb.). */
   actions: PropTypes15.node,
-  /** Elemen di sisi kiri sebelum judul (misal: hamburger menu). */
   leading: PropTypes15.node,
-  /** ClassName tambahan. */
   className: PropTypes15.string
 };
 
 // src/presentation/templates/DashboardLayout.jsx
 import React16 from "react";
 import PropTypes16 from "prop-types";
-function DashboardLayout({
-  header = null,
-  sidebar = null,
-  children,
-  className = ""
-}) {
-  return /* @__PURE__ */ React16.createElement("div", { className: `min-h-screen bg-slate-50 dark:bg-slate-900 ${className}` }, header, /* @__PURE__ */ React16.createElement("div", { className: "flex" }, sidebar, /* @__PURE__ */ React16.createElement("main", { className: "flex-1 container mx-auto px-4 py-3 space-y-4" }, children)));
+function DashboardLayout({ header = null, sidebar = null, children, className = "" }) {
+  return /* @__PURE__ */ React16.createElement("div", { className: ["rdb-layout", className].filter(Boolean).join(" ") }, header, /* @__PURE__ */ React16.createElement("div", { className: "rdb-layout-body" }, sidebar, /* @__PURE__ */ React16.createElement("main", { className: "rdb-layout-main" }, children)));
 }
 DashboardLayout.propTypes = {
-  /** Konten header atas. */
   header: PropTypes16.node,
-  /** Konten sidebar. */
   sidebar: PropTypes16.node,
-  /** Konten utama dashboard. */
   children: PropTypes16.node.isRequired,
-  /** ClassName tambahan. */
   className: PropTypes16.string
 };
 
@@ -2067,16 +1800,7 @@ function ReusableDashboardView({
   dateLocale,
   liveUpdateEnabled
 }) {
-  return /* @__PURE__ */ React17.createElement("div", { className: "container mt-3 space-y-4" }, /* @__PURE__ */ React17.createElement("div", null, /* @__PURE__ */ React17.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__ */ React17.createElement("div", { className: "flex flex-col gap-2" }, /* @__PURE__ */ React17.createElement("div", { className: "flex flex-wrap items-center justify-between gap-2" }, /* @__PURE__ */ React17.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ React17.createElement(Typography, { variant: "h1" }, labels.title), liveUpdateEnabled ? /* @__PURE__ */ React17.createElement(Badge, { status: "success" }, labels.liveUpdate) : null), /* @__PURE__ */ React17.createElement(
-    Button,
-    {
-      variant: "secondary",
-      size: "sm",
-      onClick: () => onRefresh(),
-      title: labels.refresh
-    },
-    /* @__PURE__ */ React17.createElement(Icon, { name: "RotateCcw", size: 16 })
-  )), error ? /* @__PURE__ */ React17.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__ */ React17.createElement("div", { className: "flex items-center justify-between gap-3" }, /* @__PURE__ */ React17.createElement("span", null, error), /* @__PURE__ */ React17.createElement(Button, { variant: "secondary", size: "sm", onClick: () => onRefresh() }, labels.retry))) : null, /* @__PURE__ */ React17.createElement(
+  return /* @__PURE__ */ React17.createElement("div", { className: "rdb-view" }, /* @__PURE__ */ React17.createElement("div", { className: "rdb-view-container" }, /* @__PURE__ */ React17.createElement("div", { className: "rdb-header-panel" }, /* @__PURE__ */ React17.createElement("div", { className: "rdb-header-top" }, /* @__PURE__ */ React17.createElement("div", { className: "rdb-header-title-group" }, /* @__PURE__ */ React17.createElement("span", { className: "rdb-h1" }, labels.title), liveUpdateEnabled ? /* @__PURE__ */ React17.createElement(Badge, { status: "success" }, labels.liveUpdate) : null), /* @__PURE__ */ React17.createElement(Button, { variant: "secondary", size: "sm", onClick: () => onRefresh(), title: labels.refresh }, /* @__PURE__ */ React17.createElement(Icon, { name: "RotateCcw", size: 16 }))), error ? /* @__PURE__ */ React17.createElement("div", { className: "rdb-error-banner" }, /* @__PURE__ */ React17.createElement("span", null, error), /* @__PURE__ */ React17.createElement(Button, { variant: "secondary", size: "sm", onClick: () => onRefresh() }, labels.retry)) : null, /* @__PURE__ */ React17.createElement(
     FilterPanel,
     {
       filters,
@@ -2084,7 +1808,7 @@ function ReusableDashboardView({
       onFilterChange,
       onResetFilters
     }
-  )))), /* @__PURE__ */ React17.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__ */ React17.createElement(SkeletonLoader, { key: `stat-skeleton-${index}`, className: "h-28" })) : config.widgets.stats.map((widget) => /* @__PURE__ */ React17.createElement(
+  )), /* @__PURE__ */ React17.createElement("div", { className: "rdb-stats-grid" }, loading ? Array.from({ length: 4 }).map((_, i) => /* @__PURE__ */ React17.createElement(SkeletonLoader, { key: i, style: { height: 112 } })) : config.widgets.stats.map((widget) => /* @__PURE__ */ React17.createElement(
     StatCard,
     {
       key: widget.id,
@@ -2094,7 +1818,7 @@ function ReusableDashboardView({
       format: widget.format,
       accentColor: widget.accentColor
     }
-  ))), /* @__PURE__ */ React17.createElement("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-4" }, config.widgets.charts.map((widget) => /* @__PURE__ */ React17.createElement(
+  ))), /* @__PURE__ */ React17.createElement("div", { className: "rdb-charts-grid" }, config.widgets.charts.map((widget) => /* @__PURE__ */ React17.createElement(
     ChartCard,
     {
       key: widget.id,
@@ -2104,7 +1828,15 @@ function ReusableDashboardView({
       filters,
       chartData: data.charts
     }
-  ))), /* @__PURE__ */ React17.createElement("div", { className: "card p-4" }, /* @__PURE__ */ React17.createElement(Typography, { variant: "h3", className: "flex items-center gap-2 mb-3" }, /* @__PURE__ */ React17.createElement(Icon, { name: config.widgets.table.icon, size: 18 }), labels[config.widgets.table.label] || config.widgets.table.label), loading ? /* @__PURE__ */ React17.createElement(SkeletonLoader, { className: "h-48" }) : /* @__PURE__ */ React17.createElement(
+  ))), /* @__PURE__ */ React17.createElement("div", { className: "rdb-card", style: { padding: 16 } }, /* @__PURE__ */ React17.createElement(
+    "div",
+    {
+      style: { display: "flex", alignItems: "center", gap: 8, marginBottom: 12 },
+      className: "rdb-h3"
+    },
+    /* @__PURE__ */ React17.createElement(Icon, { name: config.widgets.table.icon, size: 18 }),
+    labels[config.widgets.table.label] || config.widgets.table.label
+  ), loading ? /* @__PURE__ */ React17.createElement(SkeletonLoader, { style: { height: 192 } }) : /* @__PURE__ */ React17.createElement(
     DataTable,
     {
       columns: config.widgets.table.columns,
@@ -2116,30 +1848,19 @@ function ReusableDashboardView({
       sortable: true,
       pageSize: 10
     }
-  )));
+  ))));
 }
 ReusableDashboardView.propTypes = {
-  /** Konfigurasi widget dashboard. */
   config: PropTypes17.object.isRequired,
-  /** Objek label i18n. */
   labels: PropTypes17.object.isRequired,
-  /** Status loading data. */
   loading: PropTypes17.bool,
-  /** Pesan error jika ada. */
   error: PropTypes17.string,
-  /** State filter dashboard. */
   filters: PropTypes17.object,
-  /** Callback perubahan filter. */
   onFilterChange: PropTypes17.func.isRequired,
-  /** Callback reset filter. */
   onResetFilters: PropTypes17.func.isRequired,
-  /** Callback refresh data. */
   onRefresh: PropTypes17.func.isRequired,
-  /** Data dashboard. */
   data: PropTypes17.object,
-  /** Locale untuk format tanggal. */
   dateLocale: PropTypes17.string,
-  /** Apakah live update aktif. */
   liveUpdateEnabled: PropTypes17.bool
 };