@ammarkhalidfarooq/dashboard-package 0.6.127 → 0.6.128

package/dist/ActiveCampaignsCard.cjs.js

@@ -3,311 +3,487 @@
 var material = require('@mui/material');
 var jsxRuntime = require('react/jsx-runtime');
 
-function _defineProperty(e, r, t) {
-  return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
-    value: t,
-    enumerable: true,
-    configurable: true,
-    writable: true
-  }) : e[r] = t, e;
-}
-function ownKeys(e, r) {
-  var t = Object.keys(e);
-  if (Object.getOwnPropertySymbols) {
-    var o = Object.getOwnPropertySymbols(e);
-    r && (o = o.filter(function (r) {
-      return Object.getOwnPropertyDescriptor(e, r).enumerable;
-    })), t.push.apply(t, o);
-  }
-  return t;
-}
-function _objectSpread2(e) {
-  for (var r = 1; r < arguments.length; r++) {
-    var t = null != arguments[r] ? arguments[r] : {};
-    r % 2 ? ownKeys(Object(t), true).forEach(function (r) {
-      _defineProperty(e, r, t[r]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
-      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
-    });
-  }
-  return e;
-}
-function _toPrimitive(t, r) {
-  if ("object" != typeof t || !t) return t;
-  var e = t[Symbol.toPrimitive];
-  if (void 0 !== e) {
-    var i = e.call(t, r);
-    if ("object" != typeof i) return i;
-    throw new TypeError("@@toPrimitive must return a primitive value.");
-  }
-  return ("string" === r ? String : Number)(t);
-}
-function _toPropertyKey(t) {
-  var i = _toPrimitive(t, "string");
-  return "symbol" == typeof i ? i : i + "";
-}
-
 var ActiveCampaignsCard = function ActiveCampaignsCard(_ref) {
   var _ref$title = _ref.title,
     title = _ref$title === void 0 ? "Active campaigns" : _ref$title,
     _ref$subtitle = _ref.subtitle,
     subtitle = _ref$subtitle === void 0 ? "Live fundraisers ranked by velocity" : _ref$subtitle,
-    actionLabel = _ref.actionLabel,
     _ref$columns = _ref.columns,
-    columns = _ref$columns === void 0 ? ["Campaign", "Raised", "Progress", "Donors", "Avg Gift"] : _ref$columns,
+    columns = _ref$columns === void 0 ? ["Campaign", "Raised", "Progress", "Donors", "Avg gift"] : _ref$columns,
     _ref$rows = _ref.rows,
     rows = _ref$rows === void 0 ? [] : _ref$rows,
     _ref$gridTemplateColu = _ref.gridTemplateColumns,
-    gridTemplateColumns = _ref$gridTemplateColu === void 0 ? "3fr 1fr 1.5fr 0.8fr 1fr " : _ref$gridTemplateColu,
-    height = _ref.height,
-    _ref$compact = _ref.compact,
-    compact = _ref$compact === void 0 ? false : _ref$compact,
-    _ref$sx = _ref.sx,
-    sx = _ref$sx === void 0 ? {} : _ref$sx,
-    _ref$headerSx = _ref.headerSx,
-    headerSx = _ref$headerSx === void 0 ? {} : _ref$headerSx,
-    _ref$tableSx = _ref.tableSx,
-    tableSx = _ref$tableSx === void 0 ? {} : _ref$tableSx;
-  return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
-    sx: _objectSpread2({
-      bgcolor: "#fff",
-      borderRadius: compact ? 3 : 4,
-      border: "1px solid #f0f0f0",
-      boxShadow: compact ? "0 2px 12px rgba(0,0,0,0.05)" : "0 4px 24px rgba(0,0,0,0.06)",
-      p: compact ? 1.5 : 3,
-      height: height
-    }, sx),
-    children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
-      sx: _objectSpread2({
-        display: "flex",
-        justifyContent: "space-between",
-        alignItems: "flex-start",
-        mb: compact ? 1.25 : 3
-      }, headerSx),
+    gridTemplateColumns = _ref$gridTemplateColu === void 0 ? "3fr 1fr 1.5fr 0.8fr 1fr" : _ref$gridTemplateColu;
+  var theme = material.useTheme();
+  var isMobile = material.useMediaQuery(theme.breakpoints.down("sm"));
+  var isTablet = material.useMediaQuery(theme.breakpoints.between("sm", "md"));
+
+  /* ─── Desktop / Tablet: Grid Table ─── */
+  if (!isMobile) {
+    return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
+      sx: {
+        bgcolor: "#fff",
+        borderRadius: 4,
+        border: "1px solid #f0f0f0",
+        boxShadow: "0 4px 24px rgba(0,0,0,0.06)",
+        p: 3
+      },
       children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
+        sx: {
+          mb: 3
+        },
         children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
           sx: {
             fontWeight: 700,
-            fontSize: compact ? "14px" : "18px",
-            color: "#000",
-            textAlign: "left",
-            lineHeight: 1.15
+            fontSize: "18px",
+            color: "#000"
           },
           children: title
         }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
           sx: {
-            fontSize: compact ? "10px" : "13px",
-            color: "rgba(0, 0, 0, 0.4)",
-            textAlign: "left",
-            lineHeight: 1.15
+            fontSize: "13px",
+            color: "rgba(0,0,0,0.4)",
+            mt: 0.2
           },
           children: subtitle
         })]
-      }), actionLabel && /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
+      }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
         sx: {
-          fontSize: compact ? "10px" : "13px",
-          fontWeight: 600,
-          color: "rgb(99, 99, 230)",
-          cursor: "pointer"
+          overflowX: "auto"
         },
-        children: actionLabel
+        children: /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
+          sx: {
+            minWidth: "600px"
+          },
+          children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
+            sx: {
+              display: "grid",
+              gridTemplateColumns: gridTemplateColumns,
+              gap: 2,
+              pb: 2.5,
+              borderBottom: "1px solid #f0f0f0"
+            },
+            children: columns.map(function (header, colIdx) {
+              return /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
+                sx: {
+                  fontSize: "12px",
+                  color: "rgba(0,0,0,0.4)",
+                  fontWeight: 500,
+                  whiteSpace: "nowrap",
+                  textAlign: colIdx === 0 ? "left" : "center"
+                },
+                children: header
+              }, header);
+            })
+          }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
+            sx: {
+              mt: 1
+            },
+            children: rows.map(function (row, idx) {
+              var isDisabled = row.comingSoon;
+              return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
+                sx: {
+                  display: "grid",
+                  gridTemplateColumns: gridTemplateColumns,
+                  gap: 2,
+                  py: 1.2,
+                  alignItems: "center",
+                  borderBottom: idx === rows.length - 1 ? "none" : "1px solid #f5f5f5",
+                  opacity: isDisabled ? 0.55 : 1,
+                  transition: "opacity 0.2s ease"
+                },
+                children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
+                  sx: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 1.5,
+                    minWidth: 0
+                  },
+                  children: [row.id && /*#__PURE__*/jsxRuntime.jsx(material.Avatar, {
+                    sx: {
+                      width: 28,
+                      height: 28,
+                      fontSize: "10px",
+                      fontWeight: 700,
+                      bgcolor: row.avatarBg || "#F3F4F6",
+                      color: row.avatarColor || "#fff",
+                      flexShrink: 0
+                    },
+                    children: row.id
+                  }), /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
+                    sx: {
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 0.8,
+                      flexWrap: "nowrap",
+                      minWidth: 0
+                    },
+                    children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
+                      sx: {
+                        fontSize: "12px",
+                        fontWeight: 700,
+                        color: "#000",
+                        whiteSpace: "nowrap"
+                      },
+                      children: row.name
+                    }), isDisabled && /*#__PURE__*/jsxRuntime.jsx(material.Box, {
+                      sx: {
+                        display: "inline-flex",
+                        alignItems: "center",
+                        px: 0.8,
+                        py: 0.2,
+                        borderRadius: "100px",
+                        bgcolor: "#F3F4F6",
+                        border: "1px solid #E5E7EB",
+                        flexShrink: 0,
+                        whiteSpace: "nowrap"
+                      },
+                      children: /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
+                        sx: {
+                          fontSize: "8px",
+                          fontWeight: 700,
+                          color: "#6B7280",
+                          letterSpacing: "0.3px",
+                          textTransform: "uppercase",
+                          whiteSpace: "nowrap"
+                        },
+                        children: "Coming Soon"
+                      })
+                    })]
+                  })]
+                }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
+                  sx: {
+                    fontSize: "13px",
+                    fontWeight: 600,
+                    color: isDisabled ? "#9CA3AF" : "#000",
+                    whiteSpace: "nowrap",
+                    textAlign: "center"
+                  },
+                  children: row.val1
+                }), row.type === "progress" ? /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
+                  sx: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 1.5,
+                    justifyContent: "center"
+                  },
+                  children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
+                    sx: {
+                      flexGrow: 1,
+                      maxWidth: "80px"
+                    },
+                    children: /*#__PURE__*/jsxRuntime.jsx(material.LinearProgress, {
+                      variant: "determinate",
+                      value: row.progress,
+                      sx: {
+                        height: 8,
+                        borderRadius: 4,
+                        bgcolor: "#F3F4F6",
+                        "& .MuiLinearProgress-bar": {
+                          borderRadius: 4,
+                          bgcolor: row.progressColor || "rgb(99,99,230)"
+                        }
+                      }
+                    })
+                  }), /*#__PURE__*/jsxRuntime.jsxs(material.Typography, {
+                    sx: {
+                      fontSize: "11px",
+                      color: "rgba(0,0,0,0.4)",
+                      minWidth: "30px",
+                      textAlign: "center"
+                    },
+                    children: [row.progress, "%"]
+                  })]
+                }) : /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
+                  sx: {
+                    fontSize: "13px",
+                    fontWeight: 600,
+                    color: isDisabled ? "#9CA3AF" : "#000",
+                    whiteSpace: "nowrap",
+                    textAlign: "center"
+                  },
+                  children: row.val2
+                }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
+                  sx: {
+                    fontSize: "13px",
+                    fontWeight: row.highlightVal3 ? 700 : 500,
+                    color: isDisabled ? "#9CA3AF" : row.highlightVal3 ? row.val3Color || "#22C55E" : "#000",
+                    whiteSpace: "nowrap",
+                    textAlign: "center"
+                  },
+                  children: row.val3
+                }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
+                  sx: {
+                    fontSize: "13px",
+                    fontWeight: 500,
+                    color: isDisabled ? "#9CA3AF" : "#000",
+                    whiteSpace: "nowrap",
+                    textAlign: "center"
+                  },
+                  children: row.val4
+                }), columns.length > 5 && /*#__PURE__*/jsxRuntime.jsx(material.Box, {
+                  sx: {
+                    display: "flex",
+                    justifyContent: "center"
+                  },
+                  children: row.type === "trend" ? /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
+                    sx: {
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 0.5
+                    },
+                    children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
+                      sx: {
+                        fontSize: "14px",
+                        color: row.trendType === "up" ? "#22C55E" : "#EF4444"
+                      },
+                      children: row.trendType === "up" ? "▲" : "▼"
+                    }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
+                      sx: {
+                        fontSize: "12px",
+                        color: row.trendType === "up" ? "#22C55E" : "#EF4444",
+                        fontWeight: 700,
+                        whiteSpace: "nowrap"
+                      },
+                      children: isTablet ? row.trendType === "up" ? "Up" : "Down" : row.trendLabel
+                    })]
+                  }) : row.type === "comingSoon" ? /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
+                    sx: {
+                      fontSize: "12px",
+                      color: "#9CA3AF",
+                      fontWeight: 500,
+                      textAlign: "center"
+                    },
+                    children: "\u2014"
+                  }) : /*#__PURE__*/jsxRuntime.jsx(material.Box, {
+                    sx: {
+                      display: "inline-block",
+                      px: 1.5,
+                      py: 0.5,
+                      borderRadius: "100px",
+                      bgcolor: row.statusBg,
+                      color: row.statusColor,
+                      fontSize: "11px",
+                      fontWeight: 700
+                    },
+                    children: row.status
+                  })
+                })]
+              }, idx);
+            })
+          })]
+        })
       })]
-    }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
-      sx: _objectSpread2({
-        overflowX: compact ? "hidden" : "auto"
-      }, tableSx),
-      children: /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
+    });
+  }
+
+  /* ─── Mobile: Stacked Card Layout ─── */
+  return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
+    sx: {
+      bgcolor: "#fff",
+      borderRadius: 4,
+      border: "1px solid #f0f0f0",
+      boxShadow: "0 4px 24px rgba(0,0,0,0.06)",
+      p: 2
+    },
+    children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
+      sx: {
+        mb: 2
+      },
+      children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
+        sx: {
+          fontWeight: 700,
+          fontSize: "16px",
+          color: "#000"
+        },
+        children: title
+      }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
         sx: {
-          minWidth: compact ? 0 : "600px"
+          fontSize: "11px",
+          color: "rgba(0,0,0,0.4)",
+          mt: 0.2
         },
-        children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
+        children: subtitle
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        gap: 1.5
+      },
+      children: rows.map(function (row, idx) {
+        var isDisabled = row.comingSoon;
+        return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
           sx: {
-            display: "grid",
-            gridTemplateColumns: gridTemplateColumns,
-            gap: compact ? 1 : 2,
-            pb: compact ? 1 : 2.5,
-            borderBottom: "1px solid #f0f0f0"
+            p: 2,
+            borderRadius: 3,
+            border: isDisabled ? "1px dashed #E5E7EB" : "1px solid #F3F4F6",
+            bgcolor: isDisabled ? "#FAFAFA" : "#fff",
+            opacity: isDisabled ? 0.7 : 1,
+            transition: "opacity 0.2s ease"
           },
-          children: columns.map(function (header) {
-            return /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
+          children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              gap: 1.5,
+              mb: isDisabled ? 0 : 1.5
+            },
+            children: [row.id && /*#__PURE__*/jsxRuntime.jsx(material.Avatar, {
               sx: {
-                fontSize: compact ? "9px" : "12px",
-                color: "rgba(0, 0, 0, 0.4)",
-                fontWeight: 500,
-                textAlign: "left"
+                width: 32,
+                height: 32,
+                fontSize: "11px",
+                fontWeight: 700,
+                bgcolor: row.avatarBg || "#F3F4F6",
+                color: row.avatarColor || "#fff",
+                flexShrink: 0
               },
-              children: header
-            }, header);
-          })
-        }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
-          sx: {
-            mt: 1
-          },
-          children: rows.map(function (row, idx) {
-            var _row$progress;
-            return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
+              children: row.id
+            }), /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
               sx: {
-                display: "grid",
-                gridTemplateColumns: gridTemplateColumns,
-                gap: compact ? 1 : 2,
-                py: compact ? 0.5 : 1.2,
+                display: "flex",
                 alignItems: "center",
-                borderBottom: idx === rows.length - 1 ? "none" : "1px solid #f5f5f5"
+                gap: 1,
+                flex: 1,
+                flexWrap: "nowrap"
               },
-              children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
+              children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
                 sx: {
-                  display: "flex",
+                  fontSize: "14px",
+                  fontWeight: 700,
+                  color: "#000"
+                },
+                children: row.name
+              }), isDisabled && /*#__PURE__*/jsxRuntime.jsx(material.Box, {
+                sx: {
+                  display: "inline-flex",
                   alignItems: "center",
-                  gap: 1.5
+                  px: 1,
+                  py: 0.3,
+                  borderRadius: "100px",
+                  bgcolor: "#F3F4F6",
+                  border: "1px solid #E5E7EB",
+                  flexShrink: 0
                 },
-                children: [row.id && /*#__PURE__*/jsxRuntime.jsx(material.Avatar, {
+                children: /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
                   sx: {
-                    width: compact ? 22 : 28,
-                    height: compact ? 22 : 28,
-                    fontSize: compact ? "8px" : "10px",
+                    fontSize: "8px",
                     fontWeight: 700,
-                    bgcolor: row.avatarBg || "#F3F4F6",
-                    color: "rgb(99, 99, 230)"
+                    color: "#6B7280",
+                    letterSpacing: "0.3px",
+                    textTransform: "uppercase"
                   },
-                  children: row.id
-                }), row.icon && /*#__PURE__*/jsxRuntime.jsx(material.Box, {
-                  sx: {
-                    color: row.iconColor || "inherit",
-                    display: "flex",
-                    alignItems: "center"
-                  },
-                  children: /*#__PURE__*/jsxRuntime.jsx(row.icon, {
-                    sx: {
-                      fontSize: "18px"
-                    }
-                  })
-                }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
-                  sx: {
-                    fontSize: compact ? "10px" : "12px",
-                    fontWeight: 700,
-                    color: "#000"
-                  },
-                  children: row.name
-                })]
+                  children: "Coming Soon"
+                })
+              })]
+            }), row.type === "trend" && /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
+              sx: {
+                display: "flex",
+                alignItems: "center",
+                gap: 0.3,
+                flexShrink: 0
+              },
+              children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
+                sx: {
+                  fontSize: "12px",
+                  color: row.trendType === "up" ? "#22C55E" : "#EF4444"
+                },
+                children: row.trendType === "up" ? "▲" : "▼"
               }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
                 sx: {
-                  fontSize: compact ? "10px" : "13px",
+                  fontSize: "11px",
+                  color: row.trendType === "up" ? "#22C55E" : "#EF4444",
+                  fontWeight: 700
+                },
+                children: row.trendType === "up" ? "Up" : "Down"
+              })]
+            })]
+          }), !isDisabled && /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
+            sx: {
+              display: "grid",
+              gridTemplateColumns: "1fr 1fr 1fr 1fr",
+              gap: 1
+            },
+            children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
+              children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
+                sx: {
+                  fontSize: "9px",
+                  color: "#9CA3AF",
                   fontWeight: 600,
+                  textTransform: "uppercase",
+                  letterSpacing: "0.3px"
+                },
+                children: "Spend"
+              }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
+                sx: {
+                  fontSize: "13px",
+                  fontWeight: 700,
                   color: "#000",
-                  textAlign: "left"
+                  mt: 0.3
                 },
                 children: row.val1
-              }), row.type === "progress" ? /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
+              })]
+            }), /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
+              children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
                 sx: {
-                  display: "flex",
-                  alignItems: "center",
-                  gap: 1.5
+                  fontSize: "9px",
+                  color: "#9CA3AF",
+                  fontWeight: 600,
+                  textTransform: "uppercase",
+                  letterSpacing: "0.3px"
                 },
-                children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
-                  sx: {
-                    flexGrow: 1
-                  },
-                  children: /*#__PURE__*/jsxRuntime.jsx(material.LinearProgress, {
-                    variant: "determinate",
-                    value: Math.min(100, Math.max(0, (_row$progress = row.progress) !== null && _row$progress !== void 0 ? _row$progress : 0)),
-                    sx: {
-                      height: compact ? 6 : 8,
-                      borderRadius: 4,
-                      bgcolor: "#F3F4F6",
-                      "& .MuiLinearProgress-bar": {
-                        borderRadius: 4,
-                        bgcolor: row.progressColor || "rgb(99, 99, 230)"
-                      }
-                    }
-                  })
-                }), /*#__PURE__*/jsxRuntime.jsxs(material.Typography, {
-                  sx: {
-                    fontSize: compact ? "9px" : "11px",
-                    color: "rgba(0, 0, 0, 0.4)",
-                    minWidth: "30px"
-                  },
-                  children: [row.progress, "%"]
-                })]
-              }) : /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
+                children: "Revenue"
+              }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
                 sx: {
                   fontSize: "13px",
-                  fontWeight: 600,
+                  fontWeight: 700,
                   color: "#000",
-                  textAlign: "left"
+                  mt: 0.3
                 },
                 children: row.val2
+              })]
+            }), /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
+              children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
+                sx: {
+                  fontSize: "9px",
+                  color: "#9CA3AF",
+                  fontWeight: 600,
+                  textTransform: "uppercase",
+                  letterSpacing: "0.3px"
+                },
+                children: "ROAS"
               }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
                 sx: {
-                  fontSize: compact ? "10px" : "13px",
-                  fontWeight: row.highlightVal3 ? 700 : 500,
-                  color: row.highlightVal3 ? row.val3Color || "#22C55E" : "#000",
-                  textAlign: "left"
+                  fontSize: "13px",
+                  fontWeight: 700,
+                  color: row.val3Color || "#22C55E",
+                  mt: 0.3
                 },
                 children: row.val3
+              })]
+            }), /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
+              children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
+                sx: {
+                  fontSize: "9px",
+                  color: "#9CA3AF",
+                  fontWeight: 600,
+                  textTransform: "uppercase",
+                  letterSpacing: "0.3px"
+                },
+                children: "CPA"
               }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
                 sx: {
                   fontSize: "13px",
-                  fontWeight: 500,
+                  fontWeight: 700,
                   color: "#000",
-                  textAlign: "left"
+                  mt: 0.3
                 },
                 children: row.val4
-              }), columns.length > 5 && /*#__PURE__*/jsxRuntime.jsx(material.Box, {
-                children: row.type === "trend" ? /*#__PURE__*/jsxRuntime.jsx(material.Box, {
-                  sx: {
-                    display: "flex",
-                    alignItems: "center",
-                    gap: 0.5
-                  },
-                  children: row.trendType === "up" ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-                    children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
-                      sx: {
-                        fontSize: "14px",
-                        color: "#22C55E"
-                      },
-                      children: "\u25B2"
-                    }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
-                      sx: {
-                        fontSize: "12px",
-                        color: "#22C55E",
-                        fontWeight: 700
-                      },
-                      children: row.trendLabel
-                    })]
-                  }) : /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-                    children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
-                      sx: {
-                        fontSize: "14px",
-                        color: "#EF4444"
-                      },
-                      children: "\u25BC"
-                    }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
-                      sx: {
-                        fontSize: "12px",
-                        color: "#EF4444",
-                        fontWeight: 700
-                      },
-                      children: row.trendLabel
-                    })]
-                  })
-                }) : /*#__PURE__*/jsxRuntime.jsx(material.Box, {
-                  sx: {
-                    display: "inline-block",
-                    px: compact ? 1 : 1.5,
-                    py: compact ? 0.25 : 0.5,
-                    borderRadius: "100px",
-                    bgcolor: row.statusBg,
-                    color: row.statusColor,
-                    fontSize: compact ? "9px" : "11px",
-                    fontWeight: 700,
-                    textAlign: "center"
-                  },
-                  children: row.status
-                })
               })]
-            }, idx);
-          })
-        })]
+            })]
+          })]
+        }, idx);
       })
     })]
   });