@roax/ui 0.1.0 → 0.3.0

package/dist/index.mjs

@@ -2,19 +2,7 @@
 import { CLoadingButton } from "@coreui/react-pro";
 import CIcon from "@coreui/icons-react";
 import "./SolidButton.scss";
-function SolidButton({
-  title = "Button",
-  onClick,
-  color = "custom-primary",
-  textColor = "custom-white",
-  className = "",
-  loading = false,
-  icon,
-  svgComponent: SvgComponent,
-  type = "submit",
-  badge,
-  disabled
-}) {
+function SolidButton({ title = "Button", onClick, color = "custom-primary", textColor = "custom-white", className = "", loading = false, icon, svgComponent: SvgComponent, type = "submit", badge, disabled }) {
   return /* @__PURE__ */ React.createElement(
     CLoadingButton,
     {
@@ -24,12 +12,7 @@ function SolidButton({
       loading,
       disabledOnLoading: true,
       disabled,
-      style: {
-        minHeight: "44px",
-        minWidth: "fit-content",
-        fontSize: "0.95rem",
-        letterSpacing: "0.3px"
-      }
+      style: { minHeight: "44px", minWidth: "fit-content", fontSize: "0.95rem", letterSpacing: "0.3px" }
     },
     icon && /* @__PURE__ */ React.createElement(CIcon, { icon, className: "btn-icon" }),
     SvgComponent && !icon && /* @__PURE__ */ React.createElement(SvgComponent, null),
@@ -42,16 +25,7 @@ function SolidButton({
 import { CLoadingButton as CLoadingButton2 } from "@coreui/react-pro";
 import CIcon2 from "@coreui/icons-react";
 import "./OutlineButton.scss";
-function OutlineButton({
-  title = "Button",
-  onClick,
-  color = "custom-primary",
-  className = "",
-  loading = false,
-  icon,
-  type = "submit",
-  disabled
-}) {
+function OutlineButton({ title = "Button", onClick, color = "custom-primary", className = "", loading = false, icon, type = "submit", disabled }) {
   return /* @__PURE__ */ React.createElement(
     CLoadingButton2,
     {
@@ -62,10 +36,7 @@ function OutlineButton({
       disabledOnLoading: true,
       disabled,
       variant: "outline",
-      style: {
-        maxHeight: "40px",
-        minWidth: "fit-content"
-      }
+      style: { maxHeight: "40px", minWidth: "fit-content" }
     },
     icon && /* @__PURE__ */ React.createElement(CIcon2, { icon }),
     /* @__PURE__ */ React.createElement("span", null, title)
@@ -75,17 +46,7 @@ function OutlineButton({
 // src/components/buttons/TextButton.jsx
 import { CLoadingButton as CLoadingButton3 } from "@coreui/react-pro";
 import CIcon3 from "@coreui/icons-react";
-function TextButton({
-  disabled,
-  title,
-  onClick,
-  color = "dark",
-  className = "",
-  loading = false,
-  icon,
-  children
-}) {
-  const buttonClasses = `rounded-3 px-2 d-flex justify-content-center gap-2 fw-medium ${className}`;
+function TextButton({ disabled, title, onClick, color = "dark", className = "", loading = false, icon, children }) {
   return /* @__PURE__ */ React.createElement("span", { className: "d-inline-block", tabIndex: 0 }, /* @__PURE__ */ React.createElement(
     CLoadingButton3,
     {
@@ -94,7 +55,7 @@ function TextButton({
       variant: "ghost",
       type: "button",
       color,
-      className: buttonClasses,
+      className: `rounded-3 px-2 d-flex justify-content-center gap-2 fw-medium ${className}`,
       loading
     },
     icon && /* @__PURE__ */ React.createElement(CIcon3, { size: "xl", icon }),
@@ -109,37 +70,12 @@ import CIcon4 from "@coreui/icons-react";
 // src/components/custom-tooltip/CustomTooltip.jsx
 import Tippy from "@tippyjs/react";
 import "tippy.js/dist/tippy.css";
-function CustomTooltip({
-  content,
-  placement = "bottom",
-  delay = 0,
-  className = "",
-  children
-}) {
-  return /* @__PURE__ */ React.createElement(
-    Tippy,
-    {
-      content,
-      placement,
-      className,
-      delay
-    },
-    children
-  );
+function CustomTooltip({ content, placement = "bottom", delay = 0, className = "", children }) {
+  return /* @__PURE__ */ React.createElement(Tippy, { content, placement, className, delay }, children);
 }
 
 // src/components/buttons/IconButton.jsx
-function IconButton({
-  title,
-  onClick,
-  color = "dark",
-  className = "",
-  loading = false,
-  icon,
-  tooltip = "",
-  disabled
-}) {
-  const buttonClasses = `d-flex justify-content-center align-items-center gap-1 m-0 p-1 ${className}`;
+function IconButton({ title, onClick, color = "dark", className = "", loading = false, icon, tooltip = "", disabled }) {
   return /* @__PURE__ */ React.createElement(CustomTooltip, { content: tooltip, placement: "bottom" }, /* @__PURE__ */ React.createElement(
     CLoadingButton4,
     {
@@ -147,7 +83,7 @@ function IconButton({
       variant: "ghost",
       type: "button",
       color,
-      className: buttonClasses,
+      className: `d-flex justify-content-center align-items-center gap-1 m-0 p-1 ${className}`,
       loading,
       disabled
     },
@@ -155,11 +91,613 @@ function IconButton({
     title && /* @__PURE__ */ React.createElement("span", { className: "ml-2 d-none d-md-block" }, title)
   ));
 }
+
+// src/components/modal/Modal.jsx
+import CIcon5 from "@coreui/icons-react";
+import { CModal, CModalBody, CModalHeader, CModalTitle } from "@coreui/react-pro";
+import { cilX } from "@coreui/icons";
+function Modal({ title, titleIcon, visible, setVisible, alignment = "center", size, children }) {
+  return /* @__PURE__ */ React.createElement(CModal, { alignment, visible, onClose: () => setVisible(false), size, focus: true, keyboard: true, "aria-labelledby": "roax-modal-title" }, /* @__PURE__ */ React.createElement(CModalHeader, { className: "position-relative" }, /* @__PURE__ */ React.createElement(CModalTitle, { id: "roax-modal-title", className: "d-flex align-items-center gap-2" }, titleIcon && /* @__PURE__ */ React.createElement(CIcon5, { icon: titleIcon, size: "lg", className: "text-muted" }), title), /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      onClick: () => setVisible(false),
+      type: "button",
+      className: "position-absolute end-0 top-0 mt-3 me-3 p-0 bg-transparent border-0",
+      style: { fontSize: "1.25rem", color: "var(--cui-body-color)", zIndex: 10 },
+      "aria-label": "Cerrar"
+    },
+    /* @__PURE__ */ React.createElement(CIcon5, { icon: cilX, size: "lg" })
+  )), /* @__PURE__ */ React.createElement(CModalBody, null, children));
+}
+
+// src/components/card/MetricCard.jsx
+import { CCard, CCardBody } from "@coreui/react-pro";
+import CIcon6 from "@coreui/icons-react";
+import { cilArrowTop, cilArrowBottom, cilInfo } from "@coreui/icons";
+
+// src/components/card/card-utils.js
+var formatValue = (val, unit = "", title = "") => {
+  if (val == null || typeof val !== "number" || val === 0) return "0";
+  if (title.includes("ROAS")) return `x ${val.toFixed(2)}`;
+  if (title.includes("CAC %")) return `${val.toFixed(2)}%`;
+  if (unit === "%" || title.includes("%")) return `${val.toFixed(2)}%`;
+  if (unit === "x") return `x ${val.toFixed(2)}`;
+  if (unit === "COP") return `COP ${Math.round(val).toLocaleString("es-CO")}`;
+  return val.toLocaleString(void 0, { minimumFractionDigits: 0, maximumFractionDigits: 2 });
+};
+var getBadgeStyles = (isPositive) => ({
+  backgroundColor: isPositive ? "#55ed7b" : "#f74a4a",
+  color: isPositive ? "#0b3e26" : "#842029",
+  borderRadius: "9999px",
+  padding: "4px 10px",
+  fontSize: "0.75rem",
+  fontWeight: 700,
+  display: "inline-flex",
+  alignItems: "center",
+  gap: "4px"
+});
+function formatDateRange(previousDateRange) {
+  if (!previousDateRange) return { formattedRange: "" };
+  const parts = previousDateRange.split(" - ");
+  const parseDate = (str) => {
+    const [y, m, d] = str.split("-").map(Number);
+    return new Date(y, m - 1, d);
+  };
+  const format = (date) => {
+    const day = String(date.getDate()).padStart(2, "0");
+    const month = date.toLocaleString("es-CO", { month: "short" }).replace(".", "");
+    const year = String(date.getFullYear()).slice(-2);
+    return `${month} ${day},${year}`;
+  };
+  const since = parseDate(parts[0]);
+  const until = parts[1] ? parseDate(parts[1]) : null;
+  return { formattedRange: until ? `${format(since)} - ${format(until)}` : format(since) };
+}
+
+// src/components/card/MetricCard.jsx
+import "./MetricCard.scss";
+function MetricCard({ title, current, previous, change, isPositive, unit = "", previousDateRange = "", tooltipText = "", backgroundColor }) {
+  const isColored = !!backgroundColor;
+  return /* @__PURE__ */ React.createElement(
+    CCard,
+    {
+      className: `metric-card w-100 h-100 d-flex flex-column border-0${isColored ? " metric-card--colored" : ""}`,
+      style: isColored ? { background: backgroundColor } : void 0
+    },
+    /* @__PURE__ */ React.createElement(CCardBody, { className: "d-flex flex-column justify-content-between h-100 p-4 position-relative" }, tooltipText && /* @__PURE__ */ React.createElement("div", { className: "position-absolute top-0 end-0 m-2" }, /* @__PURE__ */ React.createElement(CustomTooltip, { content: tooltipText, placement: "top" }, /* @__PURE__ */ React.createElement(CIcon6, { icon: cilInfo, style: { cursor: "pointer", opacity: 0.5, width: 16, height: 16 } }))), /* @__PURE__ */ React.createElement("p", { className: "metric-card__title m-0" }, title), /* @__PURE__ */ React.createElement("div", { className: "d-flex align-items-center gap-2 mt-1" }, /* @__PURE__ */ React.createElement("span", { className: "metric-card__value" }, formatValue(current, unit, title)), typeof change === "number" && isFinite(change) && current > 0 && /* @__PURE__ */ React.createElement("div", { style: getBadgeStyles(isPositive) }, /* @__PURE__ */ React.createElement(CIcon6, { icon: isPositive ? cilArrowTop : cilArrowBottom, size: "sm" }), Math.abs(change), "%")), /* @__PURE__ */ React.createElement("hr", { className: "metric-card__divider" }), (() => {
+      const { formattedRange } = formatDateRange(previousDateRange);
+      return /* @__PURE__ */ React.createElement("div", { className: "d-flex justify-content-between align-items-center metric-card__footer" }, /* @__PURE__ */ React.createElement("strong", null, formatValue(previous, unit, title)), /* @__PURE__ */ React.createElement("span", null, formattedRange));
+    })())
+  );
+}
+
+// src/components/card/GeneralCard.jsx
+import { CCard as CCard2, CCardBody as CCardBody2 } from "@coreui/react-pro";
+import CIcon7 from "@coreui/icons-react";
+import { cilArrowTop as cilArrowTop2, cilArrowBottom as cilArrowBottom2 } from "@coreui/icons";
+import { Info } from "lucide-react";
+import "./general-card.scss";
+function GeneralCard({
+  title,
+  current,
+  previous,
+  change,
+  isPositive,
+  unit = "",
+  previousDateRange = "",
+  tooltipText = "",
+  backgroundColor
+}) {
+  const isColored = !!backgroundColor;
+  const cardClass = `general-card w-100 h-100 d-flex flex-column border-0${isColored ? " general-card--colored" : ""}`;
+  return /* @__PURE__ */ React.createElement(
+    CCard2,
+    {
+      className: cardClass,
+      style: isColored ? { background: backgroundColor } : void 0
+    },
+    /* @__PURE__ */ React.createElement(CCardBody2, { className: "d-flex flex-column justify-content-between h-100 p-4 position-relative" }, tooltipText && /* @__PURE__ */ React.createElement("div", { className: "position-absolute top-0 end-0 m-2" }, /* @__PURE__ */ React.createElement(CustomTooltip, { content: tooltipText, placement: "top" }, /* @__PURE__ */ React.createElement(
+      Info,
+      {
+        size: 16,
+        strokeWidth: 2,
+        style: { cursor: "pointer", opacity: 0.5 }
+      }
+    ))), /* @__PURE__ */ React.createElement("p", { className: "general-card__title m-0" }, title), /* @__PURE__ */ React.createElement("div", { className: "d-flex align-items-center gap-2 mt-1" }, /* @__PURE__ */ React.createElement("span", { className: "general-card__value" }, formatValue(current, unit, title)), typeof change === "number" && isFinite(change) && current > 0 && /* @__PURE__ */ React.createElement("div", { style: getBadgeStyles(isPositive) }, /* @__PURE__ */ React.createElement(CIcon7, { icon: isPositive ? cilArrowTop2 : cilArrowBottom2, size: "sm" }), Math.abs(change), "%")), /* @__PURE__ */ React.createElement("hr", { className: "general-card__divider" }), (() => {
+      const { formattedRange } = formatDateRange(previousDateRange);
+      return /* @__PURE__ */ React.createElement("div", { className: "d-flex justify-content-between align-items-center general-card__footer" }, /* @__PURE__ */ React.createElement("strong", null, formatValue(previous, unit, title)), /* @__PURE__ */ React.createElement("span", null, formattedRange));
+    })())
+  );
+}
+
+// src/components/charts/FunnelChart.jsx
+import {
+  ResponsiveContainer,
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  Tooltip,
+  Cell,
+  LabelList
+} from "recharts";
+import { CCard as CCard3, CCardBody as CCardBody3, CRow, CCol } from "@coreui/react-pro";
+function FunnelChart({ data = [] }) {
+  return /* @__PURE__ */ React.createElement(CCard3, { className: "mt-4 rounded-4 shadow-sm p-3" }, /* @__PURE__ */ React.createElement(CCardBody3, null, /* @__PURE__ */ React.createElement(ResponsiveContainer, { width: "100%", height: data.length * 45 + 50 }, /* @__PURE__ */ React.createElement(
+    BarChart,
+    {
+      data,
+      layout: "vertical",
+      margin: { top: 10, right: 60, left: 20, bottom: 0 },
+      barCategoryGap: 15
+    },
+    /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("linearGradient", { id: "funnelGradient", x1: "0", y1: "0", x2: "1", y2: "0" }, /* @__PURE__ */ React.createElement("stop", { offset: "0%", stopColor: "#FF8AAE" }), /* @__PURE__ */ React.createElement("stop", { offset: "100%", stopColor: "#FF1F3D" }))),
+    /* @__PURE__ */ React.createElement(XAxis, { type: "number", hide: true, domain: [0, "dataMax"] }),
+    /* @__PURE__ */ React.createElement(
+      YAxis,
+      {
+        dataKey: "title",
+        type: "category",
+        width: 130,
+        axisLine: false,
+        tickLine: false,
+        style: { fontWeight: 600, fill: "#333", fontSize: 13 }
+      }
+    ),
+    /* @__PURE__ */ React.createElement(
+      Tooltip,
+      {
+        content: ({ active, payload }) => {
+          if (active && payload && payload.length > 0) {
+            const { value, payload: item } = payload[0];
+            return /* @__PURE__ */ React.createElement("div", { className: "bg-white shadow-sm p-2 rounded" }, /* @__PURE__ */ React.createElement("strong", null, item.title), ":", " ", /* @__PURE__ */ React.createElement("span", null, formatValue(value, item.unit, item.title)));
+          }
+          return null;
+        }
+      }
+    ),
+    /* @__PURE__ */ React.createElement(Bar, { dataKey: "value", fill: "url(#funnelGradient)", radius: [0, 10, 10, 0] }, /* @__PURE__ */ React.createElement(
+      LabelList,
+      {
+        dataKey: "value",
+        position: "right",
+        formatter: (val) => formatValue(val),
+        style: { fill: "#333", fontWeight: 500, fontSize: 12 }
+      }
+    ), data.map((entry, index) => /* @__PURE__ */ React.createElement(
+      Cell,
+      {
+        key: `cell-${entry.title || index}`,
+        fill: entry.color || "url(#funnelGradient)"
+      }
+    )))
+  )), /* @__PURE__ */ React.createElement(CRow, { className: "pt-4 g-3" }, data.slice(0, 3).map((item, index) => /* @__PURE__ */ React.createElement(CCol, { xs: 12, md: 4, key: `card-top-${index}` }, /* @__PURE__ */ React.createElement(
+    GeneralCard,
+    {
+      title: item.title,
+      current: item.value,
+      previous: item.previous,
+      change: item.percentageChange,
+      isPositive: item.isPositive,
+      unit: item.unit,
+      previousDateRange: item.previousDateRange,
+      tooltipText: item.title
+    }
+  )))), data.length > 3 && /* @__PURE__ */ React.createElement(CRow, { className: "pt-3 g-3" }, data.slice(3).map((item, index) => /* @__PURE__ */ React.createElement(CCol, { xs: 12, md: 5, lg: 4, key: `card-bottom-${index}` }, /* @__PURE__ */ React.createElement(
+    GeneralCard,
+    {
+      title: item.title,
+      current: item.value,
+      previous: item.previous,
+      change: item.percentageChange,
+      isPositive: item.isPositive,
+      unit: item.unit,
+      previousDateRange: item.previousDateRange,
+      tooltipText: item.title
+    }
+  ))))));
+}
+
+// src/components/charts/TimeSeriesComparisonChart.jsx
+import {
+  ResponsiveContainer as ResponsiveContainer2,
+  LineChart,
+  Line,
+  XAxis as XAxis2,
+  YAxis as YAxis2,
+  Tooltip as Tooltip2,
+  Legend,
+  CartesianGrid
+} from "recharts";
+import { CCard as CCard4, CCardBody as CCardBody4, CRow as CRow2, CCol as CCol2 } from "@coreui/react-pro";
+function TimeSeriesComparisonChart({
+  data = [],
+  lines = [],
+  colors = {},
+  cards = [],
+  currency = "",
+  yAxisLabel = "",
+  displayNames = {}
+}) {
+  const detectUnit = (name = "") => {
+    const lower = name.toLowerCase();
+    if (lower.includes("%")) return "%";
+    if (lower.includes("venta") || lower.includes("inversi\xF3n")) return currency || "";
+    return "";
+  };
+  const maxY = data.length ? Math.ceil(
+    Math.max(
+      ...lines.map((lineName) => Math.max(...data.map((d) => d[lineName] || 0)))
+    ) * 1.1
+  ) : 100;
+  return /* @__PURE__ */ React.createElement(CCard4, { className: "mt-4 rounded-4 shadow-sm p-3" }, /* @__PURE__ */ React.createElement(CCardBody4, null, cards.length > 0 && /* @__PURE__ */ React.createElement(CRow2, { className: "pt-4 g-3 justify-content-center text-center mb-4" }, cards.map((card, index) => /* @__PURE__ */ React.createElement(CCol2, { xs: 12, md: 4, lg: 5, key: index }, /* @__PURE__ */ React.createElement(
+    GeneralCard,
+    {
+      title: card.title,
+      current: card.value,
+      previous: card.previous,
+      change: card.percentageChange,
+      isPositive: card.isPositive,
+      unit: card.unit,
+      previousDateRange: card.previousDateRange,
+      tooltipText: card.title
+    }
+  )))), /* @__PURE__ */ React.createElement(ResponsiveContainer2, { width: "100%", height: 340 }, /* @__PURE__ */ React.createElement(LineChart, { data, margin: { top: 20, right: 30, left: 10, bottom: 10 } }, /* @__PURE__ */ React.createElement(CartesianGrid, { strokeDasharray: "3 3", stroke: "#e5e5e5" }), /* @__PURE__ */ React.createElement(XAxis2, { dataKey: "date", stroke: "#333", tick: { fontSize: 12 } }), /* @__PURE__ */ React.createElement(
+    YAxis2,
+    {
+      yAxisId: "left",
+      stroke: "#333",
+      tickFormatter: (val) => `${currency ? currency + " " : ""}${val >= 1e6 ? (val / 1e6).toFixed(1) + "M" : val.toLocaleString("es-CO")}`,
+      tick: { fontSize: 12 },
+      width: 100,
+      domain: [0, maxY],
+      allowDecimals: false,
+      label: yAxisLabel ? {
+        value: yAxisLabel,
+        angle: -90,
+        position: "insideLeft",
+        style: { textAnchor: "middle", fill: "#333", fontSize: 13 }
+      } : void 0
+    }
+  ), /* @__PURE__ */ React.createElement(
+    Tooltip2,
+    {
+      formatter: (val, name) => {
+        const unit = detectUnit(name);
+        return [formatValue(val, unit), displayNames[name] || name];
+      },
+      labelClassName: "fw-bold",
+      wrapperStyle: { zIndex: 1e3 }
+    }
+  ), /* @__PURE__ */ React.createElement(
+    Legend,
+    {
+      verticalAlign: "bottom",
+      height: 36,
+      wrapperStyle: { marginTop: 20 },
+      iconType: "circle",
+      formatter: (value) => displayNames[value] || value
+    }
+  ), lines.map((lineName) => /* @__PURE__ */ React.createElement(
+    Line,
+    {
+      key: lineName,
+      yAxisId: "left",
+      type: "monotone",
+      dataKey: lineName,
+      stroke: colors[lineName] || "#000",
+      strokeWidth: 2.5,
+      dot: { r: 4 },
+      activeDot: { r: 6 }
+    }
+  ))))));
+}
+
+// src/components/charts/TopProductsChart.jsx
+import {
+  BarChart as BarChart2,
+  Bar as Bar2,
+  XAxis as XAxis3,
+  YAxis as YAxis3,
+  Tooltip as Tooltip3,
+  ResponsiveContainer as ResponsiveContainer3,
+  LabelList as LabelList2,
+  Cell as Cell2
+} from "recharts";
+import { CCard as CCard5, CCardBody as CCardBody5 } from "@coreui/react-pro";
+var COLORS = ["#FF6A8D", "#FF8AAE", "#FFA3BC", "#FFC3D0", "#FFE0E7"];
+var ChartTooltip = ({ active, payload }) => {
+  if (active && payload && payload.length) {
+    return /* @__PURE__ */ React.createElement("div", { className: "bg-white p-2 shadow rounded border border-light" }, /* @__PURE__ */ React.createElement("p", { className: "mb-1 fw-semibold" }, payload[0].payload.name), /* @__PURE__ */ React.createElement("p", { className: "mb-0 text-muted" }, "Cantidad: ", payload[0].value.toLocaleString()));
+  }
+  return null;
+};
+function TopProductsChart({
+  data = [],
+  title = "Productos M\xE1s Vendidos",
+  emptyText = "No se registraron productos vendidos en este rango de fechas.",
+  maxItems = 5
+}) {
+  const processedData = (data || []).filter((item) => {
+    var _a;
+    return item.quantity > 0 && ((_a = item.name) == null ? void 0 : _a.trim());
+  }).sort((a, b) => b.quantity - a.quantity).slice(0, maxItems).map((item) => ({ name: item.name, quantity: item.quantity }));
+  if (!processedData.length) {
+    return /* @__PURE__ */ React.createElement(CCard5, { className: "mt-4 rounded-4 shadow-sm p-3" }, /* @__PURE__ */ React.createElement(CCardBody5, { className: "text-center py-5" }, /* @__PURE__ */ React.createElement("p", { className: "text-muted mb-2" }, /* @__PURE__ */ React.createElement("i", { className: "bi bi-box-seam fs-4 d-block mb-2" }), emptyText)));
+  }
+  return /* @__PURE__ */ React.createElement(CCard5, { className: "mt-4 rounded-4 shadow-sm p-3" }, /* @__PURE__ */ React.createElement(CCardBody5, null, /* @__PURE__ */ React.createElement("h5", { className: "fw-semibold text-center fs-5 mb-4" }, title), /* @__PURE__ */ React.createElement("div", { style: { height: `${Math.max(processedData.length * 50, 80)}px` } }, /* @__PURE__ */ React.createElement(ResponsiveContainer3, { width: "100%", height: "100%" }, /* @__PURE__ */ React.createElement(
+    BarChart2,
+    {
+      layout: "vertical",
+      data: processedData,
+      margin: { top: 10, right: 40, left: 20, bottom: 10 }
+    },
+    /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("linearGradient", { id: "barGradient", x1: "0", y1: "0", x2: "1", y2: "0" }, /* @__PURE__ */ React.createElement("stop", { offset: "0%", stopColor: "#FF8AAE" }), /* @__PURE__ */ React.createElement("stop", { offset: "100%", stopColor: "#FF1F3D" }))),
+    /* @__PURE__ */ React.createElement(
+      XAxis3,
+      {
+        type: "number",
+        tickFormatter: (value) => value.toLocaleString(),
+        axisLine: false,
+        tick: { fontSize: 12 }
+      }
+    ),
+    /* @__PURE__ */ React.createElement(
+      YAxis3,
+      {
+        type: "category",
+        dataKey: "name",
+        width: 150,
+        tick: { fontSize: 13 },
+        tickFormatter: (value) => value.length > 30 ? value.substring(0, 30) + "..." : value
+      }
+    ),
+    /* @__PURE__ */ React.createElement(Tooltip3, { content: /* @__PURE__ */ React.createElement(ChartTooltip, null) }),
+    /* @__PURE__ */ React.createElement(Bar2, { dataKey: "quantity", fill: "url(#barGradient)", radius: [0, 8, 8, 0] }, /* @__PURE__ */ React.createElement(
+      LabelList2,
+      {
+        dataKey: "quantity",
+        position: "right",
+        formatter: (value) => value.toLocaleString(),
+        style: { fill: "#333", fontWeight: 500, fontSize: 12 }
+      }
+    ), processedData.map((_, index) => /* @__PURE__ */ React.createElement(Cell2, { key: `cell-${index}`, fill: COLORS[index % COLORS.length] })))
+  )))));
+}
+
+// src/components/charts/SalesByChannelChart.jsx
+import {
+  ResponsiveContainer as ResponsiveContainer4,
+  BarChart as BarChart3,
+  Bar as Bar3,
+  XAxis as XAxis4,
+  YAxis as YAxis4,
+  Tooltip as Tooltip4,
+  Legend as Legend2,
+  CartesianGrid as CartesianGrid2
+} from "recharts";
+import { CCard as CCard6, CCardBody as CCardBody6 } from "@coreui/react-pro";
+function SalesByChannelChart({
+  data = [],
+  title = "Ventas por canal",
+  emptyText = "Sin datos para este per\xEDodo",
+  channels = ["Meta", "TikTok", "Google"],
+  channelColors = { Meta: "#FF2F86", TikTok: "#C0C0C0", Google: "#333333" }
+}) {
+  const hasData = data.length > 0;
+  return /* @__PURE__ */ React.createElement(CCard6, { className: "rounded-4 shadow-sm p-3" }, /* @__PURE__ */ React.createElement(CCardBody6, null, /* @__PURE__ */ React.createElement("h5", { className: "fw-bold text-center" }, title), !hasData ? /* @__PURE__ */ React.createElement("p", { className: "text-center text-muted" }, emptyText) : /* @__PURE__ */ React.createElement(ResponsiveContainer4, { width: "100%", height: 300 }, /* @__PURE__ */ React.createElement(BarChart3, { data, margin: { top: 20, right: 30, left: 10, bottom: 10 } }, /* @__PURE__ */ React.createElement(CartesianGrid2, { strokeDasharray: "3 3", stroke: "#e5e5e5" }), /* @__PURE__ */ React.createElement(
+    XAxis4,
+    {
+      dataKey: "fecha",
+      tick: { fontSize: 12 },
+      angle: -45,
+      textAnchor: "end",
+      interval: Math.ceil(data.length / 10)
+    }
+  ), /* @__PURE__ */ React.createElement(YAxis4, { tick: { fontSize: 12 } }), /* @__PURE__ */ React.createElement(Tooltip4, null), /* @__PURE__ */ React.createElement(Legend2, { verticalAlign: "top", height: 36, iconType: "circle" }), channels.map((channel) => /* @__PURE__ */ React.createElement(
+    Bar3,
+    {
+      key: channel,
+      dataKey: channel,
+      stackId: "ventas",
+      fill: channelColors[channel] || "#888"
+    }
+  ))))));
+}
+
+// src/components/charts/InvestmentByPlatformChart.jsx
+import {
+  PieChart,
+  Pie,
+  Cell as Cell3,
+  Legend as Legend3,
+  Tooltip as Tooltip5,
+  ResponsiveContainer as ResponsiveContainer5
+} from "recharts";
+import { CCard as CCard7, CCardBody as CCardBody7 } from "@coreui/react-pro";
+var DEFAULT_COLORS = ["#FF2F86", "#D9D9D9", "#333333"];
+function InvestmentByPlatformChart({
+  data = [],
+  title = "Inversi\xF3n por plataforma",
+  colors = DEFAULT_COLORS,
+  currencySymbol = "COP",
+  locale = "es-CO"
+}) {
+  return /* @__PURE__ */ React.createElement(CCard7, { className: "rounded-4 shadow-sm p-3" }, /* @__PURE__ */ React.createElement(CCardBody7, null, /* @__PURE__ */ React.createElement("h5", { className: "text-center fw-bold" }, title), /* @__PURE__ */ React.createElement(ResponsiveContainer5, { width: "100%", height: 280 }, /* @__PURE__ */ React.createElement(PieChart, null, /* @__PURE__ */ React.createElement(
+    Pie,
+    {
+      data,
+      dataKey: "value",
+      nameKey: "name",
+      cx: "50%",
+      cy: "50%",
+      innerRadius: 60,
+      outerRadius: 100,
+      paddingAngle: 5,
+      label: ({ name, percent }) => `${name} ${(percent * 100).toFixed(1)}%`
+    },
+    data.map((_, index) => /* @__PURE__ */ React.createElement(Cell3, { key: `cell-${index}`, fill: colors[index % colors.length] }))
+  ), /* @__PURE__ */ React.createElement(
+    Tooltip5,
+    {
+      formatter: (value) => `${currencySymbol} ${value.toLocaleString(locale)}`
+    }
+  ), /* @__PURE__ */ React.createElement(Legend3, { verticalAlign: "bottom", height: 36 })))));
+}
+
+// src/components/pagination/PaginatedTable.jsx
+import { CTable, CTableHead, CTableBody, CTableRow, CTableHeaderCell, CSpinner } from "@coreui/react-pro";
+function PaginatedTable({ data = [], itemsPerPage = 10, currentPage = 1, setCurrentPage = () => {
+}, columns = [], renderRow = () => null, loading = false, emptyMessage = "No hay datos disponibles." }) {
+  const totalPages = Math.ceil(data.length / itemsPerPage);
+  const paginatedData = data.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage);
+  if (loading) return /* @__PURE__ */ React.createElement("div", { className: "text-center py-5" }, /* @__PURE__ */ React.createElement(CSpinner, { color: "secondary" }));
+  if (!data.length) return /* @__PURE__ */ React.createElement("div", { className: "text-center py-5 text-muted" }, emptyMessage);
+  const renderPagination = () => {
+    const pages = Array.from({ length: totalPages }, (_, i) => i + 1);
+    return /* @__PURE__ */ React.createElement("div", { className: "d-flex justify-content-center align-items-center gap-2 mt-3 flex-wrap" }, currentPage > 1 && /* @__PURE__ */ React.createElement("button", { onClick: () => setCurrentPage(currentPage - 1), className: "px-3 py-1 rounded-pill border bg-white text-dark", style: { minWidth: 80, fontWeight: 500 } }, "Anterior"), pages.map((i) => /* @__PURE__ */ React.createElement("button", { key: i, onClick: () => setCurrentPage(i), className: `px-3 py-1 rounded-pill border ${i === currentPage ? "bg-dark text-white" : "bg-white text-dark"}` }, i)), currentPage < totalPages && /* @__PURE__ */ React.createElement("button", { onClick: () => setCurrentPage(currentPage + 1), className: "px-3 py-1 rounded-pill border bg-white text-dark", style: { minWidth: 80, fontWeight: 500 } }, "Siguiente"));
+  };
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(CTable, { hover: true, responsive: true }, /* @__PURE__ */ React.createElement(CTableHead, { className: "bg-dark text-white" }, /* @__PURE__ */ React.createElement(CTableRow, null, columns.map((col, i) => /* @__PURE__ */ React.createElement(CTableHeaderCell, { key: i }, col)))), /* @__PURE__ */ React.createElement(CTableBody, null, paginatedData.map(renderRow))), totalPages > 1 && renderPagination());
+}
+
+// src/components/pagination/PaginatedGrid.jsx
+import { CSpinner as CSpinner2 } from "@coreui/react-pro";
+function PaginatedGrid({ data = [], itemsPerPage = 6, currentPage = 1, setCurrentPage = () => {
+}, renderItem = () => null, loading = false, emptyMessage = "No hay elementos." }) {
+  const totalPages = Math.ceil(data.length / itemsPerPage);
+  const paginatedData = data.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage);
+  if (loading) return /* @__PURE__ */ React.createElement("div", { className: "text-center py-5" }, /* @__PURE__ */ React.createElement(CSpinner2, { color: "secondary" }));
+  if (!data.length) return /* @__PURE__ */ React.createElement("div", { className: "text-center py-5 text-muted" }, emptyMessage);
+  const renderPagination = () => {
+    const pages = Array.from({ length: totalPages }, (_, i) => i + 1);
+    return /* @__PURE__ */ React.createElement("div", { className: "d-flex justify-content-center gap-2 mt-4 flex-wrap" }, currentPage > 1 && /* @__PURE__ */ React.createElement("button", { onClick: () => setCurrentPage(currentPage - 1), className: "px-3 py-1 rounded-pill border bg-white text-dark" }, "Anterior"), pages.map((i) => /* @__PURE__ */ React.createElement("button", { key: i, onClick: () => setCurrentPage(i), className: `px-3 py-1 rounded-pill border ${i === currentPage ? "bg-dark text-white" : "bg-white text-dark"}` }, i)), currentPage < totalPages && /* @__PURE__ */ React.createElement("button", { onClick: () => setCurrentPage(currentPage + 1), className: "px-3 py-1 rounded-pill border bg-white text-dark" }, "Siguiente"));
+  };
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "row g-4" }, paginatedData.map(renderItem)), totalPages > 1 && renderPagination());
+}
+
+// src/components/skeletons/CardSkeleton.jsx
+import { CCard as CCard8, CPlaceholder } from "@coreui/react-pro";
+function CardSkeleton() {
+  return /* @__PURE__ */ React.createElement(CCard8, { className: "shadow-none p-0 m-0 bg-transparent border-0" }, /* @__PURE__ */ React.createElement(CPlaceholder, { component: "div", animation: "glow", className: "d-flex flex-column gap-2 bg-transparent" }, /* @__PURE__ */ React.createElement(CPlaceholder, { className: "p-4 mt-2 rounded-1", size: "lg", xs: 12, color: "skeleton" })));
+}
+
+// src/components/skeletons/TextSkeleton.jsx
+import { CCard as CCard9, CPlaceholder as CPlaceholder2 } from "@coreui/react-pro";
+function TextSkeleton() {
+  return /* @__PURE__ */ React.createElement(CCard9, { className: "shadow-none p-0 m-0 bg-transparent border-0" }, /* @__PURE__ */ React.createElement(CPlaceholder2, { component: "div", animation: "glow", className: "d-flex flex-column gap-2 bg-transparent" }, /* @__PURE__ */ React.createElement(CPlaceholder2, { className: "p-0 my-2 rounded-1", size: "lg", xs: 8, color: "skeleton" })));
+}
+
+// src/components/skeletons/MetricsSkeleton.jsx
+import { CCard as CCard10, CPlaceholder as CPlaceholder3 } from "@coreui/react-pro";
+function MetricsSkeleton() {
+  return /* @__PURE__ */ React.createElement(CCard10, { className: "shadow-none p-0 m-0 bg-transparent border-0" }, /* @__PURE__ */ React.createElement(CPlaceholder3, { component: "div", animation: "glow", className: "d-flex flex-column gap-2 bg-transparent" }, /* @__PURE__ */ React.createElement(CPlaceholder3, { className: "p-5 mt-2 rounded-1", size: "lg", xs: 12, color: "skeleton" }), /* @__PURE__ */ React.createElement(CPlaceholder3, { className: "p-3 mt-2 rounded-1", size: "xs", xs: 12, color: "skeleton" })));
+}
+
+// src/components/skeletons/ReportTableSkeleton.jsx
+import { CCard as CCard11, CPlaceholder as CPlaceholder4 } from "@coreui/react-pro";
+function ReportTableSkeleton() {
+  return /* @__PURE__ */ React.createElement(CCard11, { className: "shadow-none p-0 m-0 bg-transparent border-0" }, /* @__PURE__ */ React.createElement(
+    CPlaceholder4,
+    {
+      component: "div",
+      animation: "glow",
+      className: "d-flex flex-column gap-2 bg-transparent"
+    },
+    /* @__PURE__ */ React.createElement(CPlaceholder4, { className: "p-4 mt-2 rounded-1", size: "lg", xs: 12, color: "skeleton" }),
+    /* @__PURE__ */ React.createElement(CPlaceholder4, { className: "p-5 mt-2 rounded-1", size: "lg", xs: 12, color: "skeleton" })
+  ));
+}
+
+// src/components/skeletons/SummaryReportSkeleton.jsx
+import { CCard as CCard12, CCol as CCol3, CPlaceholder as CPlaceholder5, CRow as CRow3 } from "@coreui/react-pro";
+var CardPlaceholder = ({ className = "" }) => /* @__PURE__ */ React.createElement(CCard12, { className: "shadow-none p-0 m-0 bg-transparent border-0" }, /* @__PURE__ */ React.createElement(
+  CPlaceholder5,
+  {
+    component: "div",
+    animation: "glow",
+    className: `d-flex flex-column gap-2 bg-transparent ${className}`
+  },
+  /* @__PURE__ */ React.createElement(CPlaceholder5, { className: "p-4 mt-2 rounded-2", size: "lg", xs: 12, color: "skeleton" })
+));
+function SummaryReportSkeleton({
+  layout = [
+    { sm: 6, md: 6 },
+    { sm: 6, md: 6 },
+    { sm: 6, md: 4 },
+    { sm: 6, md: 4 },
+    { sm: 6, md: 4 },
+    { sm: 6, md: 6 },
+    { sm: 6, md: 4 },
+    { sm: 6, md: 2 }
+  ]
+}) {
+  return /* @__PURE__ */ React.createElement(CRow3, { className: "g-md-3 px-4 px-sm-2 g-sm-2 pt-2 pb-4" }, layout.map((col, index) => /* @__PURE__ */ React.createElement(CCol3, { sm: col.sm, md: col.md, key: index }, /* @__PURE__ */ React.createElement(CardPlaceholder, null))));
+}
+
+// ../../node_modules/@coreui/icons-pro/dist/esm/duotone/cid-exclamation-circle.js
+var cidExclamationCircle = ["512 512", "<path fill='var(--ci-secondary-color, currentColor)' d='M256,16C123.452,16,16,123.452,16,256S123.452,496,256,496a238.867,238.867,0,0,0,132.685-40q1.668-1.108,3.315-2.246A239.721,239.721,0,0,0,496,256C496,123.452,388.548,16,256,16Z' class='ci-secondary' opacity='var(--ci-secondary-opacity, 0.25)'/><polygon fill='var(--ci-primary-color, currentColor)' points='224 232 238 304 274 304 288 232 288 120 224 120 224 232' class='ci-primary'/><rect width='40' height='40' x='236' y='344' fill='var(--ci-primary-color, currentColor)' class='ci-primary'/>"];
+
+// src/components/feedback/NoDataMessage.jsx
+import CIcon8 from "@coreui/icons-react";
+function NoDataMessage({
+  message = "No se obtuvieron datos. Revisa el rango de fechas y la integraci\xF3n."
+}) {
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: "d-flex align-items-center gap-2 rounded-3 px-3 py-3 mt-3 mb-3",
+      style: {
+        backgroundColor: "var(--cui-warning-bg-subtle)",
+        border: "1px solid var(--cui-warning)",
+        color: "var(--cui-body-color)"
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      CIcon8,
+      {
+        icon: cidExclamationCircle,
+        className: "flex-shrink-0 me-2 text-warning",
+        size: "xxl"
+      }
+    ),
+    message
+  );
+}
+
+// src/components/back-button/BackButton.jsx
+import { useRouter } from "next/navigation";
+import { CButton } from "@coreui/react-pro";
+import { cilArrowLeft } from "@coreui/icons";
+import CIcon9 from "@coreui/icons-react";
+function BackButton({ title, color = "dark", className = "", path }) {
+  const { back, push } = useRouter();
+  return /* @__PURE__ */ React.createElement(CustomTooltip, { content: "Volver atr\xE1s", placement: "bottom" }, /* @__PURE__ */ React.createElement(CButton, { color, variant: "ghost", className: `back-button d-flex align-items-center px-0 ${className}`, onClick: () => path ? push(path) : back() }, /* @__PURE__ */ React.createElement(CIcon9, { icon: cilArrowLeft, size: "lg", className: "mx-1" }), title && /* @__PURE__ */ React.createElement("span", { className: "px-2" }, title)));
+}
 export {
+  BackButton,
+  CardSkeleton,
   CustomTooltip,
+  FunnelChart,
+  GeneralCard,
   IconButton,
+  InvestmentByPlatformChart,
+  MetricCard,
+  MetricsSkeleton,
+  Modal,
+  NoDataMessage,
   OutlineButton,
+  PaginatedGrid,
+  PaginatedTable,
+  ReportTableSkeleton,
+  SalesByChannelChart,
   SolidButton,
-  TextButton
+  SummaryReportSkeleton,
+  TextButton,
+  TextSkeleton,
+  TimeSeriesComparisonChart,
+  TopProductsChart,
+  formatDateRange,
+  formatValue,
+  getBadgeStyles
 };
 //# sourceMappingURL=index.mjs.map