@rozaqi02/reusable-dashboard 1.0.0 → 1.0.1

package/dist/index.js

@@ -16,28 +16,32 @@ var cidikaWidgetConfig = {
         label: "confirmedBookings",
         icon: "TrendingUp",
         valueKey: "bookingsConfirm",
-        format: "number"
+        format: "number",
+        accentColor: "blue"
       },
       {
         id: "revenueConfirm",
         label: "confirmedRevenue",
         icon: "DollarSign",
         valueKey: "revenueConfirm",
-        format: "currency"
+        format: "currency",
+        accentColor: "green"
       },
       {
         id: "avgRevenue",
         label: "avgRevenue",
         icon: "Users",
         valueKey: "avgRevenue",
-        format: "currency"
+        format: "currency",
+        accentColor: "violet"
       },
       {
         id: "conversionRate",
         label: "conversionRate",
         icon: "PieChart",
         valueKey: "conversionRate",
-        format: "percent"
+        format: "percent",
+        accentColor: "orange"
       }
     ],
     charts: [
@@ -163,28 +167,32 @@ var tokoSepatuWidgetConfig = {
         label: "confirmedBookings",
         icon: "TrendingUp",
         valueKey: "bookingsConfirm",
-        format: "number"
+        format: "number",
+        accentColor: "sky"
       },
       {
         id: "totalRevenue",
         label: "confirmedRevenue",
         icon: "DollarSign",
         valueKey: "revenueConfirm",
-        format: "currency"
+        format: "currency",
+        accentColor: "green"
       },
       {
         id: "avgOrderValue",
         label: "avgRevenue",
         icon: "BarChart3",
         valueKey: "avgRevenue",
-        format: "currency"
+        format: "currency",
+        accentColor: "violet"
       },
       {
         id: "totalProducts",
         label: "totalProducts",
         icon: "PieChart",
         valueKey: "packages",
-        format: "number"
+        format: "number",
+        accentColor: "orange"
       }
     ],
     charts: [
@@ -1243,10 +1251,20 @@ function StatCard({
   icon = "TrendingUp",
   format = "number",
   trend = null,
+  accentColor = "blue",
   className = ""
 }) {
   const formattedValue = renderValue(format, value);
-  return /* @__PURE__ */ React7.createElement("div", { className: `card p-4 flex flex-col justify-between gap-2 ${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(Icon, { name: icon, size: 20 }), /* @__PURE__ */ React7.createElement(Typography, { variant: "subheading" }, label)), trend ? /* @__PURE__ */ React7.createElement(
+  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(
     Icon,
     {
       name: trend === "up" ? "TrendingUp" : "TrendingDown",
@@ -1261,17 +1279,13 @@ function renderValue(format, value) {
   return String(Number(value) || 0);
 }
 StatCard.propTypes = {
-  /** Label deskriptif metrik. */
   label: PropTypes7.string.isRequired,
-  /** Nilai metrik. */
   value: PropTypes7.oneOfType([PropTypes7.number, PropTypes7.string]),
-  /** Nama ikon dari registry Lucide React. */
   icon: PropTypes7.string,
-  /** Format tampilan nilai. */
   format: PropTypes7.oneOf(["number", "currency", "percent"]),
-  /** Arah tren opsional. */
   trend: PropTypes7.oneOf(["up", "down", null]),
-  /** ClassName tambahan. */
+  /** Warna aksen: blue | green | violet | orange | sky | rose */
+  accentColor: PropTypes7.string,
   className: PropTypes7.string
 };
 
@@ -2077,7 +2091,8 @@ function ReusableDashboardView({
       label: labels[widget.label] || widget.label,
       value: data.stats[widget.valueKey],
       icon: widget.icon,
-      format: widget.format
+      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(
     ChartCard,