@roax/ui 0.1.0 → 0.3.0

package/dist/index.js

@@ -29,11 +29,31 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.js
 var index_exports = {};
 __export(index_exports, {
+  BackButton: () => BackButton,
+  CardSkeleton: () => CardSkeleton,
   CustomTooltip: () => CustomTooltip,
+  FunnelChart: () => FunnelChart,
+  GeneralCard: () => GeneralCard,
   IconButton: () => IconButton,
+  InvestmentByPlatformChart: () => InvestmentByPlatformChart,
+  MetricCard: () => MetricCard,
+  MetricsSkeleton: () => MetricsSkeleton,
+  Modal: () => Modal,
+  NoDataMessage: () => NoDataMessage,
   OutlineButton: () => OutlineButton,
+  PaginatedGrid: () => PaginatedGrid,
+  PaginatedTable: () => PaginatedTable,
+  ReportTableSkeleton: () => ReportTableSkeleton,
+  SalesByChannelChart: () => SalesByChannelChart,
   SolidButton: () => SolidButton,
-  TextButton: () => TextButton
+  SummaryReportSkeleton: () => SummaryReportSkeleton,
+  TextButton: () => TextButton,
+  TextSkeleton: () => TextSkeleton,
+  TimeSeriesComparisonChart: () => TimeSeriesComparisonChart,
+  TopProductsChart: () => TopProductsChart,
+  formatDateRange: () => formatDateRange,
+  formatValue: () => formatValue,
+  getBadgeStyles: () => getBadgeStyles
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -41,19 +61,7 @@ module.exports = __toCommonJS(index_exports);
 var import_react_pro = require("@coreui/react-pro");
 var import_icons_react = __toESM(require("@coreui/icons-react"));
 var import_SolidButton = require("./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(
     import_react_pro.CLoadingButton,
     {
@@ -63,12 +71,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(import_icons_react.default, { icon, className: "btn-icon" }),
     SvgComponent && !icon && /* @__PURE__ */ React.createElement(SvgComponent, null),
@@ -81,16 +84,7 @@ function SolidButton({
 var import_react_pro2 = require("@coreui/react-pro");
 var import_icons_react2 = __toESM(require("@coreui/icons-react"));
 var import_OutlineButton = require("./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(
     import_react_pro2.CLoadingButton,
     {
@@ -101,10 +95,7 @@ function OutlineButton({
       disabledOnLoading: true,
       disabled,
       variant: "outline",
-      style: {
-        maxHeight: "40px",
-        minWidth: "fit-content"
-      }
+      style: { maxHeight: "40px", minWidth: "fit-content" }
     },
     icon && /* @__PURE__ */ React.createElement(import_icons_react2.default, { icon }),
     /* @__PURE__ */ React.createElement("span", null, title)
@@ -114,17 +105,7 @@ function OutlineButton({
 // src/components/buttons/TextButton.jsx
 var import_react_pro3 = require("@coreui/react-pro");
 var import_icons_react3 = __toESM(require("@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(
     import_react_pro3.CLoadingButton,
     {
@@ -133,7 +114,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(import_icons_react3.default, { size: "xl", icon }),
@@ -148,37 +129,12 @@ var import_icons_react4 = __toESM(require("@coreui/icons-react"));
 // src/components/custom-tooltip/CustomTooltip.jsx
 var import_react = __toESM(require("@tippyjs/react"));
 var import_tippy = require("tippy.js/dist/tippy.css");
-function CustomTooltip({
-  content,
-  placement = "bottom",
-  delay = 0,
-  className = "",
-  children
-}) {
-  return /* @__PURE__ */ React.createElement(
-    import_react.default,
-    {
-      content,
-      placement,
-      className,
-      delay
-    },
-    children
-  );
+function CustomTooltip({ content, placement = "bottom", delay = 0, className = "", children }) {
+  return /* @__PURE__ */ React.createElement(import_react.default, { 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(
     import_react_pro4.CLoadingButton,
     {
@@ -186,7 +142,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
     },
@@ -194,12 +150,571 @@ function IconButton({
     title && /* @__PURE__ */ React.createElement("span", { className: "ml-2 d-none d-md-block" }, title)
   ));
 }
+
+// src/components/modal/Modal.jsx
+var import_icons_react5 = __toESM(require("@coreui/icons-react"));
+var import_react_pro5 = require("@coreui/react-pro");
+var import_icons = require("@coreui/icons");
+function Modal({ title, titleIcon, visible, setVisible, alignment = "center", size, children }) {
+  return /* @__PURE__ */ React.createElement(import_react_pro5.CModal, { alignment, visible, onClose: () => setVisible(false), size, focus: true, keyboard: true, "aria-labelledby": "roax-modal-title" }, /* @__PURE__ */ React.createElement(import_react_pro5.CModalHeader, { className: "position-relative" }, /* @__PURE__ */ React.createElement(import_react_pro5.CModalTitle, { id: "roax-modal-title", className: "d-flex align-items-center gap-2" }, titleIcon && /* @__PURE__ */ React.createElement(import_icons_react5.default, { 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(import_icons_react5.default, { icon: import_icons.cilX, size: "lg" })
+  )), /* @__PURE__ */ React.createElement(import_react_pro5.CModalBody, null, children));
+}
+
+// src/components/card/MetricCard.jsx
+var import_react_pro6 = require("@coreui/react-pro");
+var import_icons_react6 = __toESM(require("@coreui/icons-react"));
+var import_icons2 = require("@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
+var import_MetricCard = require("./MetricCard.scss");
+function MetricCard({ title, current, previous, change, isPositive, unit = "", previousDateRange = "", tooltipText = "", backgroundColor }) {
+  const isColored = !!backgroundColor;
+  return /* @__PURE__ */ React.createElement(
+    import_react_pro6.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(import_react_pro6.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(import_icons_react6.default, { icon: import_icons2.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(import_icons_react6.default, { icon: isPositive ? import_icons2.cilArrowTop : import_icons2.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
+var import_react_pro7 = require("@coreui/react-pro");
+var import_icons_react7 = __toESM(require("@coreui/icons-react"));
+var import_icons3 = require("@coreui/icons");
+var import_lucide_react = require("lucide-react");
+var import_general_card = require("./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(
+    import_react_pro7.CCard,
+    {
+      className: cardClass,
+      style: isColored ? { background: backgroundColor } : void 0
+    },
+    /* @__PURE__ */ React.createElement(import_react_pro7.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(
+      import_lucide_react.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(import_icons_react7.default, { icon: isPositive ? import_icons3.cilArrowTop : import_icons3.cilArrowBottom, 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
+var import_recharts = require("recharts");
+var import_react_pro8 = require("@coreui/react-pro");
+function FunnelChart({ data = [] }) {
+  return /* @__PURE__ */ React.createElement(import_react_pro8.CCard, { className: "mt-4 rounded-4 shadow-sm p-3" }, /* @__PURE__ */ React.createElement(import_react_pro8.CCardBody, null, /* @__PURE__ */ React.createElement(import_recharts.ResponsiveContainer, { width: "100%", height: data.length * 45 + 50 }, /* @__PURE__ */ React.createElement(
+    import_recharts.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(import_recharts.XAxis, { type: "number", hide: true, domain: [0, "dataMax"] }),
+    /* @__PURE__ */ React.createElement(
+      import_recharts.YAxis,
+      {
+        dataKey: "title",
+        type: "category",
+        width: 130,
+        axisLine: false,
+        tickLine: false,
+        style: { fontWeight: 600, fill: "#333", fontSize: 13 }
+      }
+    ),
+    /* @__PURE__ */ React.createElement(
+      import_recharts.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(import_recharts.Bar, { dataKey: "value", fill: "url(#funnelGradient)", radius: [0, 10, 10, 0] }, /* @__PURE__ */ React.createElement(
+      import_recharts.LabelList,
+      {
+        dataKey: "value",
+        position: "right",
+        formatter: (val) => formatValue(val),
+        style: { fill: "#333", fontWeight: 500, fontSize: 12 }
+      }
+    ), data.map((entry, index) => /* @__PURE__ */ React.createElement(
+      import_recharts.Cell,
+      {
+        key: `cell-${entry.title || index}`,
+        fill: entry.color || "url(#funnelGradient)"
+      }
+    )))
+  )), /* @__PURE__ */ React.createElement(import_react_pro8.CRow, { className: "pt-4 g-3" }, data.slice(0, 3).map((item, index) => /* @__PURE__ */ React.createElement(import_react_pro8.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(import_react_pro8.CRow, { className: "pt-3 g-3" }, data.slice(3).map((item, index) => /* @__PURE__ */ React.createElement(import_react_pro8.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
+var import_recharts2 = require("recharts");
+var import_react_pro9 = require("@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(import_react_pro9.CCard, { className: "mt-4 rounded-4 shadow-sm p-3" }, /* @__PURE__ */ React.createElement(import_react_pro9.CCardBody, null, cards.length > 0 && /* @__PURE__ */ React.createElement(import_react_pro9.CRow, { className: "pt-4 g-3 justify-content-center text-center mb-4" }, cards.map((card, index) => /* @__PURE__ */ React.createElement(import_react_pro9.CCol, { 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(import_recharts2.ResponsiveContainer, { width: "100%", height: 340 }, /* @__PURE__ */ React.createElement(import_recharts2.LineChart, { data, margin: { top: 20, right: 30, left: 10, bottom: 10 } }, /* @__PURE__ */ React.createElement(import_recharts2.CartesianGrid, { strokeDasharray: "3 3", stroke: "#e5e5e5" }), /* @__PURE__ */ React.createElement(import_recharts2.XAxis, { dataKey: "date", stroke: "#333", tick: { fontSize: 12 } }), /* @__PURE__ */ React.createElement(
+    import_recharts2.YAxis,
+    {
+      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(
+    import_recharts2.Tooltip,
+    {
+      formatter: (val, name) => {
+        const unit = detectUnit(name);
+        return [formatValue(val, unit), displayNames[name] || name];
+      },
+      labelClassName: "fw-bold",
+      wrapperStyle: { zIndex: 1e3 }
+    }
+  ), /* @__PURE__ */ React.createElement(
+    import_recharts2.Legend,
+    {
+      verticalAlign: "bottom",
+      height: 36,
+      wrapperStyle: { marginTop: 20 },
+      iconType: "circle",
+      formatter: (value) => displayNames[value] || value
+    }
+  ), lines.map((lineName) => /* @__PURE__ */ React.createElement(
+    import_recharts2.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
+var import_recharts3 = require("recharts");
+var import_react_pro10 = require("@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(import_react_pro10.CCard, { className: "mt-4 rounded-4 shadow-sm p-3" }, /* @__PURE__ */ React.createElement(import_react_pro10.CCardBody, { 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(import_react_pro10.CCard, { className: "mt-4 rounded-4 shadow-sm p-3" }, /* @__PURE__ */ React.createElement(import_react_pro10.CCardBody, 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(import_recharts3.ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ React.createElement(
+    import_recharts3.BarChart,
+    {
+      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(
+      import_recharts3.XAxis,
+      {
+        type: "number",
+        tickFormatter: (value) => value.toLocaleString(),
+        axisLine: false,
+        tick: { fontSize: 12 }
+      }
+    ),
+    /* @__PURE__ */ React.createElement(
+      import_recharts3.YAxis,
+      {
+        type: "category",
+        dataKey: "name",
+        width: 150,
+        tick: { fontSize: 13 },
+        tickFormatter: (value) => value.length > 30 ? value.substring(0, 30) + "..." : value
+      }
+    ),
+    /* @__PURE__ */ React.createElement(import_recharts3.Tooltip, { content: /* @__PURE__ */ React.createElement(ChartTooltip, null) }),
+    /* @__PURE__ */ React.createElement(import_recharts3.Bar, { dataKey: "quantity", fill: "url(#barGradient)", radius: [0, 8, 8, 0] }, /* @__PURE__ */ React.createElement(
+      import_recharts3.LabelList,
+      {
+        dataKey: "quantity",
+        position: "right",
+        formatter: (value) => value.toLocaleString(),
+        style: { fill: "#333", fontWeight: 500, fontSize: 12 }
+      }
+    ), processedData.map((_, index) => /* @__PURE__ */ React.createElement(import_recharts3.Cell, { key: `cell-${index}`, fill: COLORS[index % COLORS.length] })))
+  )))));
+}
+
+// src/components/charts/SalesByChannelChart.jsx
+var import_recharts4 = require("recharts");
+var import_react_pro11 = require("@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(import_react_pro11.CCard, { className: "rounded-4 shadow-sm p-3" }, /* @__PURE__ */ React.createElement(import_react_pro11.CCardBody, 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(import_recharts4.ResponsiveContainer, { width: "100%", height: 300 }, /* @__PURE__ */ React.createElement(import_recharts4.BarChart, { data, margin: { top: 20, right: 30, left: 10, bottom: 10 } }, /* @__PURE__ */ React.createElement(import_recharts4.CartesianGrid, { strokeDasharray: "3 3", stroke: "#e5e5e5" }), /* @__PURE__ */ React.createElement(
+    import_recharts4.XAxis,
+    {
+      dataKey: "fecha",
+      tick: { fontSize: 12 },
+      angle: -45,
+      textAnchor: "end",
+      interval: Math.ceil(data.length / 10)
+    }
+  ), /* @__PURE__ */ React.createElement(import_recharts4.YAxis, { tick: { fontSize: 12 } }), /* @__PURE__ */ React.createElement(import_recharts4.Tooltip, null), /* @__PURE__ */ React.createElement(import_recharts4.Legend, { verticalAlign: "top", height: 36, iconType: "circle" }), channels.map((channel) => /* @__PURE__ */ React.createElement(
+    import_recharts4.Bar,
+    {
+      key: channel,
+      dataKey: channel,
+      stackId: "ventas",
+      fill: channelColors[channel] || "#888"
+    }
+  ))))));
+}
+
+// src/components/charts/InvestmentByPlatformChart.jsx
+var import_recharts5 = require("recharts");
+var import_react_pro12 = require("@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(import_react_pro12.CCard, { className: "rounded-4 shadow-sm p-3" }, /* @__PURE__ */ React.createElement(import_react_pro12.CCardBody, null, /* @__PURE__ */ React.createElement("h5", { className: "text-center fw-bold" }, title), /* @__PURE__ */ React.createElement(import_recharts5.ResponsiveContainer, { width: "100%", height: 280 }, /* @__PURE__ */ React.createElement(import_recharts5.PieChart, null, /* @__PURE__ */ React.createElement(
+    import_recharts5.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(import_recharts5.Cell, { key: `cell-${index}`, fill: colors[index % colors.length] }))
+  ), /* @__PURE__ */ React.createElement(
+    import_recharts5.Tooltip,
+    {
+      formatter: (value) => `${currencySymbol} ${value.toLocaleString(locale)}`
+    }
+  ), /* @__PURE__ */ React.createElement(import_recharts5.Legend, { verticalAlign: "bottom", height: 36 })))));
+}
+
+// src/components/pagination/PaginatedTable.jsx
+var import_react_pro13 = require("@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(import_react_pro13.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(import_react_pro13.CTable, { hover: true, responsive: true }, /* @__PURE__ */ React.createElement(import_react_pro13.CTableHead, { className: "bg-dark text-white" }, /* @__PURE__ */ React.createElement(import_react_pro13.CTableRow, null, columns.map((col, i) => /* @__PURE__ */ React.createElement(import_react_pro13.CTableHeaderCell, { key: i }, col)))), /* @__PURE__ */ React.createElement(import_react_pro13.CTableBody, null, paginatedData.map(renderRow))), totalPages > 1 && renderPagination());
+}
+
+// src/components/pagination/PaginatedGrid.jsx
+var import_react_pro14 = require("@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(import_react_pro14.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 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
+var import_react_pro15 = require("@coreui/react-pro");
+function CardSkeleton() {
+  return /* @__PURE__ */ React.createElement(import_react_pro15.CCard, { className: "shadow-none p-0 m-0 bg-transparent border-0" }, /* @__PURE__ */ React.createElement(import_react_pro15.CPlaceholder, { component: "div", animation: "glow", className: "d-flex flex-column gap-2 bg-transparent" }, /* @__PURE__ */ React.createElement(import_react_pro15.CPlaceholder, { className: "p-4 mt-2 rounded-1", size: "lg", xs: 12, color: "skeleton" })));
+}
+
+// src/components/skeletons/TextSkeleton.jsx
+var import_react_pro16 = require("@coreui/react-pro");
+function TextSkeleton() {
+  return /* @__PURE__ */ React.createElement(import_react_pro16.CCard, { className: "shadow-none p-0 m-0 bg-transparent border-0" }, /* @__PURE__ */ React.createElement(import_react_pro16.CPlaceholder, { component: "div", animation: "glow", className: "d-flex flex-column gap-2 bg-transparent" }, /* @__PURE__ */ React.createElement(import_react_pro16.CPlaceholder, { className: "p-0 my-2 rounded-1", size: "lg", xs: 8, color: "skeleton" })));
+}
+
+// src/components/skeletons/MetricsSkeleton.jsx
+var import_react_pro17 = require("@coreui/react-pro");
+function MetricsSkeleton() {
+  return /* @__PURE__ */ React.createElement(import_react_pro17.CCard, { className: "shadow-none p-0 m-0 bg-transparent border-0" }, /* @__PURE__ */ React.createElement(import_react_pro17.CPlaceholder, { component: "div", animation: "glow", className: "d-flex flex-column gap-2 bg-transparent" }, /* @__PURE__ */ React.createElement(import_react_pro17.CPlaceholder, { className: "p-5 mt-2 rounded-1", size: "lg", xs: 12, color: "skeleton" }), /* @__PURE__ */ React.createElement(import_react_pro17.CPlaceholder, { className: "p-3 mt-2 rounded-1", size: "xs", xs: 12, color: "skeleton" })));
+}
+
+// src/components/skeletons/ReportTableSkeleton.jsx
+var import_react_pro18 = require("@coreui/react-pro");
+function ReportTableSkeleton() {
+  return /* @__PURE__ */ React.createElement(import_react_pro18.CCard, { className: "shadow-none p-0 m-0 bg-transparent border-0" }, /* @__PURE__ */ React.createElement(
+    import_react_pro18.CPlaceholder,
+    {
+      component: "div",
+      animation: "glow",
+      className: "d-flex flex-column gap-2 bg-transparent"
+    },
+    /* @__PURE__ */ React.createElement(import_react_pro18.CPlaceholder, { className: "p-4 mt-2 rounded-1", size: "lg", xs: 12, color: "skeleton" }),
+    /* @__PURE__ */ React.createElement(import_react_pro18.CPlaceholder, { className: "p-5 mt-2 rounded-1", size: "lg", xs: 12, color: "skeleton" })
+  ));
+}
+
+// src/components/skeletons/SummaryReportSkeleton.jsx
+var import_react_pro19 = require("@coreui/react-pro");
+var CardPlaceholder = ({ className = "" }) => /* @__PURE__ */ React.createElement(import_react_pro19.CCard, { className: "shadow-none p-0 m-0 bg-transparent border-0" }, /* @__PURE__ */ React.createElement(
+  import_react_pro19.CPlaceholder,
+  {
+    component: "div",
+    animation: "glow",
+    className: `d-flex flex-column gap-2 bg-transparent ${className}`
+  },
+  /* @__PURE__ */ React.createElement(import_react_pro19.CPlaceholder, { 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(import_react_pro19.CRow, { className: "g-md-3 px-4 px-sm-2 g-sm-2 pt-2 pb-4" }, layout.map((col, index) => /* @__PURE__ */ React.createElement(import_react_pro19.CCol, { 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
+var import_icons_react8 = __toESM(require("@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(
+      import_icons_react8.default,
+      {
+        icon: cidExclamationCircle,
+        className: "flex-shrink-0 me-2 text-warning",
+        size: "xxl"
+      }
+    ),
+    message
+  );
+}
+
+// src/components/back-button/BackButton.jsx
+var import_navigation = require("next/navigation");
+var import_react_pro20 = require("@coreui/react-pro");
+var import_icons4 = require("@coreui/icons");
+var import_icons_react9 = __toESM(require("@coreui/icons-react"));
+function BackButton({ title, color = "dark", className = "", path }) {
+  const { back, push } = (0, import_navigation.useRouter)();
+  return /* @__PURE__ */ React.createElement(CustomTooltip, { content: "Volver atr\xE1s", placement: "bottom" }, /* @__PURE__ */ React.createElement(import_react_pro20.CButton, { color, variant: "ghost", className: `back-button d-flex align-items-center px-0 ${className}`, onClick: () => path ? push(path) : back() }, /* @__PURE__ */ React.createElement(import_icons_react9.default, { icon: import_icons4.cilArrowLeft, size: "lg", className: "mx-1" }), title && /* @__PURE__ */ React.createElement("span", { className: "px-2" }, title)));
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  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.js.map