@ammarkhalidfarooq/dashboard-package 0.6.128 → 0.6.130

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/ActiveCampaignsCard.cjs.js +259 -416
  2. package/dist/ActiveCampaignsCard.cjs.js.map +1 -1
  3. package/dist/ActiveCampaignsCard.es.js +261 -418
  4. package/dist/ActiveCampaignsCard.es.js.map +1 -1
  5. package/dist/index.cjs.js +838 -707
  6. package/dist/index.cjs.js.map +1 -1
  7. package/dist/index.es.js +840 -709
  8. package/dist/index.es.js.map +1 -1
  9. package/package.json +4 -3
package/dist/ActiveCampaignsCard.cjs.js CHANGED
@@ -3,487 +3,330 @@
3
3
  var material = require('@mui/material');
4
4
  var jsxRuntime = require('react/jsx-runtime');
5
5
 
6
+ function _defineProperty(e, r, t) {
7
+ return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
8
+ value: t,
9
+ enumerable: true,
10
+ configurable: true,
11
+ writable: true
12
+ }) : e[r] = t, e;
13
+ }
14
+ function ownKeys(e, r) {
15
+ var t = Object.keys(e);
16
+ if (Object.getOwnPropertySymbols) {
17
+ var o = Object.getOwnPropertySymbols(e);
18
+ r && (o = o.filter(function (r) {
19
+ return Object.getOwnPropertyDescriptor(e, r).enumerable;
20
+ })), t.push.apply(t, o);
21
+ }
22
+ return t;
23
+ }
24
+ function _objectSpread2(e) {
25
+ for (var r = 1; r < arguments.length; r++) {
26
+ var t = null != arguments[r] ? arguments[r] : {};
27
+ r % 2 ? ownKeys(Object(t), true).forEach(function (r) {
28
+ _defineProperty(e, r, t[r]);
29
+ }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
30
+ Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
31
+ });
32
+ }
33
+ return e;
34
+ }
35
+ function _toPrimitive(t, r) {
36
+ if ("object" != typeof t || !t) return t;
37
+ var e = t[Symbol.toPrimitive];
38
+ if (void 0 !== e) {
39
+ var i = e.call(t, r);
40
+ if ("object" != typeof i) return i;
41
+ throw new TypeError("@@toPrimitive must return a primitive value.");
42
+ }
43
+ return ("string" === r ? String : Number)(t);
44
+ }
45
+ function _toPropertyKey(t) {
46
+ var i = _toPrimitive(t, "string");
47
+ return "symbol" == typeof i ? i : i + "";
48
+ }
49
+
6
50
  var ActiveCampaignsCard = function ActiveCampaignsCard(_ref) {
7
51
  var _ref$title = _ref.title,
8
52
  title = _ref$title === void 0 ? "Active campaigns" : _ref$title,
9
53
  _ref$subtitle = _ref.subtitle,
10
54
  subtitle = _ref$subtitle === void 0 ? "Live fundraisers ranked by velocity" : _ref$subtitle,
55
+ actionLabel = _ref.actionLabel,
11
56
  _ref$columns = _ref.columns,
12
- columns = _ref$columns === void 0 ? ["Campaign", "Raised", "Progress", "Donors", "Avg gift"] : _ref$columns,
57
+ columns = _ref$columns === void 0 ? ["Campaign", "Raised", "Progress", "Donors", "Avg Gift"] : _ref$columns,
13
58
  _ref$rows = _ref.rows,
14
59
  rows = _ref$rows === void 0 ? [] : _ref$rows,
15
60
  _ref$gridTemplateColu = _ref.gridTemplateColumns,
16
- gridTemplateColumns = _ref$gridTemplateColu === void 0 ? "3fr 1fr 1.5fr 0.8fr 1fr" : _ref$gridTemplateColu;
17
- var theme = material.useTheme();
18
- var isMobile = material.useMediaQuery(theme.breakpoints.down("sm"));
19
- var isTablet = material.useMediaQuery(theme.breakpoints.between("sm", "md"));
20
-
21
- /* ─── Desktop / Tablet: Grid Table ─── */
22
- if (!isMobile) {
23
- return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
24
- sx: {
25
- bgcolor: "#fff",
26
- borderRadius: 4,
27
- border: "1px solid #f0f0f0",
28
- boxShadow: "0 4px 24px rgba(0,0,0,0.06)",
29
- p: 3
30
- },
61
+ gridTemplateColumns = _ref$gridTemplateColu === void 0 ? "3fr 1fr 1.5fr 0.8fr 1fr " : _ref$gridTemplateColu,
62
+ height = _ref.height,
63
+ _ref$compact = _ref.compact,
64
+ compact = _ref$compact === void 0 ? false : _ref$compact,
65
+ _ref$sx = _ref.sx,
66
+ sx = _ref$sx === void 0 ? {} : _ref$sx,
67
+ _ref$headerSx = _ref.headerSx,
68
+ headerSx = _ref$headerSx === void 0 ? {} : _ref$headerSx,
69
+ _ref$tableSx = _ref.tableSx,
70
+ tableSx = _ref$tableSx === void 0 ? {} : _ref$tableSx;
71
+ return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
72
+ sx: _objectSpread2({
73
+ bgcolor: "#fff",
74
+ borderRadius: compact ? 3 : 4,
75
+ border: "1px solid #f0f0f0",
76
+ boxShadow: compact ? "0 2px 12px rgba(0,0,0,0.05)" : "0 4px 24px rgba(0,0,0,0.06)",
77
+ p: compact ? 1.5 : 3,
78
+ height: height
79
+ }, sx),
80
+ children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
81
+ sx: _objectSpread2({
82
+ display: "flex",
83
+ justifyContent: "space-between",
84
+ alignItems: "flex-start",
85
+ mb: compact ? 1.25 : 3
86
+ }, headerSx),
31
87
  children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
32
- sx: {
33
- mb: 3
34
- },
35
88
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
36
89
  sx: {
37
90
  fontWeight: 700,
38
- fontSize: "18px",
39
- color: "#000"
91
+ fontSize: compact ? "14px" : "18px",
92
+ color: "#000",
93
+ textAlign: "left",
94
+ lineHeight: 1.15
40
95
  },
41
96
  children: title
42
97
  }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
43
98
  sx: {
44
- fontSize: "13px",
45
- color: "rgba(0,0,0,0.4)",
46
- mt: 0.2
99
+ fontSize: compact ? "10px" : "13px",
100
+ color: "rgba(0, 0, 0, 0.4)",
101
+ textAlign: "left",
102
+ lineHeight: 1.15
47
103
  },
48
104
  children: subtitle
49
105
  })]
50
- }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
106
+ }), actionLabel && /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
107
+ sx: {
108
+ fontSize: compact ? "10px" : "13px",
109
+ fontWeight: 600,
110
+ color: "rgb(99, 99, 230)",
111
+ cursor: "pointer"
112
+ },
113
+ children: actionLabel
114
+ })]
115
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
116
+ sx: _objectSpread2({
117
+ overflowX: compact ? "hidden" : "auto"
118
+ }, tableSx),
119
+ children: /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
51
120
  sx: {
52
- overflowX: "auto"
121
+ minWidth: compact ? 0 : "600px"
53
122
  },
54
- children: /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
123
+ children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
55
124
  sx: {
56
- minWidth: "600px"
125
+ display: "grid",
126
+ gridTemplateColumns: gridTemplateColumns,
127
+ gap: compact ? 1 : 2,
128
+ pb: compact ? 1 : 2.5,
129
+ borderBottom: "1px solid #f0f0f0"
57
130
  },
58
- children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
59
- sx: {
60
- display: "grid",
61
- gridTemplateColumns: gridTemplateColumns,
62
- gap: 2,
63
- pb: 2.5,
64
- borderBottom: "1px solid #f0f0f0"
65
- },
66
- children: columns.map(function (header, colIdx) {
67
- return /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
68
- sx: {
69
- fontSize: "12px",
70
- color: "rgba(0,0,0,0.4)",
71
- fontWeight: 500,
72
- whiteSpace: "nowrap",
73
- textAlign: colIdx === 0 ? "left" : "center"
74
- },
75
- children: header
76
- }, header);
77
- })
78
- }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
79
- sx: {
80
- mt: 1
81
- },
82
- children: rows.map(function (row, idx) {
83
- var isDisabled = row.comingSoon;
84
- return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
131
+ children: columns.map(function (header) {
132
+ return /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
133
+ sx: {
134
+ fontSize: compact ? "9px" : "12px",
135
+ color: "rgba(0, 0, 0, 0.4)",
136
+ fontWeight: 500,
137
+ textAlign: "left"
138
+ },
139
+ children: header
140
+ }, header);
141
+ })
142
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
143
+ sx: {
144
+ mt: 1
145
+ },
146
+ children: rows.map(function (row, idx) {
147
+ var _row$progress;
148
+ return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
149
+ sx: {
150
+ display: "grid",
151
+ gridTemplateColumns: gridTemplateColumns,
152
+ gap: compact ? 1 : 2,
153
+ py: compact ? 0.5 : 1.2,
154
+ alignItems: "center",
155
+ borderBottom: idx === rows.length - 1 ? "none" : "1px solid #f5f5f5"
156
+ },
157
+ children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
85
158
  sx: {
86
- display: "grid",
87
- gridTemplateColumns: gridTemplateColumns,
88
- gap: 2,
89
- py: 1.2,
159
+ display: "flex",
90
160
  alignItems: "center",
91
- borderBottom: idx === rows.length - 1 ? "none" : "1px solid #f5f5f5",
92
- opacity: isDisabled ? 0.55 : 1,
93
- transition: "opacity 0.2s ease"
161
+ gap: 1.5
94
162
  },
95
- children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
163
+ children: [(row.icon || row.id) && /*#__PURE__*/jsxRuntime.jsx(material.Box, {
96
164
  sx: {
165
+ width: compact ? 22 : 32,
166
+ height: compact ? 22 : 32,
167
+ borderRadius: "50%",
168
+ bgcolor: "#fff",
169
+ border: "2px solid ".concat(row.avatarBorder || row.avatarBg || "#E5E7EB"),
97
170
  display: "flex",
98
171
  alignItems: "center",
99
- gap: 1.5,
100
- minWidth: 0
172
+ justifyContent: "center",
173
+ flexShrink: 0,
174
+ boxSizing: "border-box",
175
+ filter: row.comingSoon ? "grayscale(1)" : "none",
176
+ opacity: row.comingSoon ? 0.55 : 1
101
177
  },
102
- children: [row.id && /*#__PURE__*/jsxRuntime.jsx(material.Avatar, {
178
+ children: row.icon ? /*#__PURE__*/jsxRuntime.jsx(row.icon, {
179
+ size: compact ? 12 : 16,
180
+ color: row.iconColor || row.avatarBorder || row.avatarBg
181
+ }) : /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
103
182
  sx: {
104
- width: 28,
105
- height: 28,
106
- fontSize: "10px",
183
+ fontSize: compact ? "8px" : "10px",
107
184
  fontWeight: 700,
108
- bgcolor: row.avatarBg || "#F3F4F6",
109
- color: row.avatarColor || "#fff",
110
- flexShrink: 0
185
+ color: row.avatarColor || "#111"
111
186
  },
112
187
  children: row.id
113
- }), /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
114
- sx: {
115
- display: "flex",
116
- alignItems: "center",
117
- gap: 0.8,
118
- flexWrap: "nowrap",
119
- minWidth: 0
120
- },
121
- children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
122
- sx: {
123
- fontSize: "12px",
124
- fontWeight: 700,
125
- color: "#000",
126
- whiteSpace: "nowrap"
127
- },
128
- children: row.name
129
- }), isDisabled && /*#__PURE__*/jsxRuntime.jsx(material.Box, {
130
- sx: {
131
- display: "inline-flex",
132
- alignItems: "center",
133
- px: 0.8,
134
- py: 0.2,
135
- borderRadius: "100px",
136
- bgcolor: "#F3F4F6",
137
- border: "1px solid #E5E7EB",
138
- flexShrink: 0,
139
- whiteSpace: "nowrap"
140
- },
141
- children: /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
142
- sx: {
143
- fontSize: "8px",
144
- fontWeight: 700,
145
- color: "#6B7280",
146
- letterSpacing: "0.3px",
147
- textTransform: "uppercase",
148
- whiteSpace: "nowrap"
149
- },
150
- children: "Coming Soon"
151
- })
152
- })]
153
- })]
188
+ })
154
189
  }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
155
190
  sx: {
156
- fontSize: "13px",
157
- fontWeight: 600,
158
- color: isDisabled ? "#9CA3AF" : "#000",
159
- whiteSpace: "nowrap",
160
- textAlign: "center"
191
+ fontSize: compact ? "10px" : "12px",
192
+ fontWeight: 700,
193
+ color: row.comingSoon ? "#9CA3AF" : "#000"
161
194
  },
162
- children: row.val1
163
- }), row.type === "progress" ? /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
195
+ children: row.name
196
+ })]
197
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
198
+ sx: {
199
+ fontSize: compact ? "10px" : "13px",
200
+ fontWeight: 600,
201
+ color: row.comingSoon ? "#9CA3AF" : "#000",
202
+ textAlign: "left"
203
+ },
204
+ children: row.val1
205
+ }), row.type === "progress" ? /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
206
+ sx: {
207
+ display: "flex",
208
+ alignItems: "center",
209
+ gap: 1.5
210
+ },
211
+ children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
164
212
  sx: {
165
- display: "flex",
166
- alignItems: "center",
167
- gap: 1.5,
168
- justifyContent: "center"
213
+ flexGrow: 1
169
214
  },
170
- children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
215
+ children: /*#__PURE__*/jsxRuntime.jsx(material.LinearProgress, {
216
+ variant: "determinate",
217
+ value: Math.min(100, Math.max(0, (_row$progress = row.progress) !== null && _row$progress !== void 0 ? _row$progress : 0)),
171
218
  sx: {
172
- flexGrow: 1,
173
- maxWidth: "80px"
174
- },
175
- children: /*#__PURE__*/jsxRuntime.jsx(material.LinearProgress, {
176
- variant: "determinate",
177
- value: row.progress,
178
- sx: {
179
- height: 8,
219
+ height: compact ? 6 : 8,
220
+ borderRadius: 4,
221
+ bgcolor: "#F3F4F6",
222
+ "& .MuiLinearProgress-bar": {
180
223
  borderRadius: 4,
181
- bgcolor: "#F3F4F6",
182
- "& .MuiLinearProgress-bar": {
183
- borderRadius: 4,
184
- bgcolor: row.progressColor || "rgb(99,99,230)"
185
- }
224
+ bgcolor: row.progressColor || "rgb(99, 99, 230)"
186
225
  }
187
- })
188
- }), /*#__PURE__*/jsxRuntime.jsxs(material.Typography, {
189
- sx: {
190
- fontSize: "11px",
191
- color: "rgba(0,0,0,0.4)",
192
- minWidth: "30px",
193
- textAlign: "center"
194
- },
195
- children: [row.progress, "%"]
196
- })]
197
- }) : /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
198
- sx: {
199
- fontSize: "13px",
200
- fontWeight: 600,
201
- color: isDisabled ? "#9CA3AF" : "#000",
202
- whiteSpace: "nowrap",
203
- textAlign: "center"
204
- },
205
- children: row.val2
206
- }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
226
+ }
227
+ })
228
+ }), /*#__PURE__*/jsxRuntime.jsxs(material.Typography, {
207
229
  sx: {
208
- fontSize: "13px",
209
- fontWeight: row.highlightVal3 ? 700 : 500,
210
- color: isDisabled ? "#9CA3AF" : row.highlightVal3 ? row.val3Color || "#22C55E" : "#000",
211
- whiteSpace: "nowrap",
212
- textAlign: "center"
230
+ fontSize: compact ? "9px" : "11px",
231
+ color: "rgba(0, 0, 0, 0.4)",
232
+ minWidth: "30px"
213
233
  },
214
- children: row.val3
215
- }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
234
+ children: [row.progress, "%"]
235
+ })]
236
+ }) : /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
237
+ sx: {
238
+ fontSize: "13px",
239
+ fontWeight: 600,
240
+ color: row.comingSoon ? "#9CA3AF" : "#000",
241
+ textAlign: "left"
242
+ },
243
+ children: row.val2
244
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
245
+ sx: {
246
+ fontSize: compact ? "10px" : "13px",
247
+ fontWeight: row.highlightVal3 ? 700 : 500,
248
+ color: row.comingSoon ? "#9CA3AF" : row.highlightVal3 ? row.val3Color || "#22C55E" : "#000",
249
+ textAlign: "left"
250
+ },
251
+ children: row.val3
252
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
253
+ sx: {
254
+ fontSize: "13px",
255
+ fontWeight: 500,
256
+ color: row.comingSoon ? "#9CA3AF" : "#000",
257
+ textAlign: "left"
258
+ },
259
+ children: row.val4
260
+ }), columns.length > 5 && /*#__PURE__*/jsxRuntime.jsx(material.Box, {
261
+ children: row.comingSoon ? /*#__PURE__*/jsxRuntime.jsx(material.Box, {
216
262
  sx: {
217
- fontSize: "13px",
218
- fontWeight: 500,
219
- color: isDisabled ? "#9CA3AF" : "#000",
220
- whiteSpace: "nowrap",
221
- textAlign: "center"
263
+ display: "inline-block",
264
+ px: compact ? 1 : 1.5,
265
+ py: compact ? 0.25 : 0.5,
266
+ borderRadius: "100px",
267
+ bgcolor: "#F3F4F6",
268
+ color: "#9CA3AF",
269
+ fontSize: compact ? "9px" : "11px",
270
+ fontWeight: 700,
271
+ textAlign: "center",
272
+ whiteSpace: "nowrap"
222
273
  },
223
- children: row.val4
224
- }), columns.length > 5 && /*#__PURE__*/jsxRuntime.jsx(material.Box, {
274
+ children: "Coming Soon"
275
+ }) : row.type === "trend" ? /*#__PURE__*/jsxRuntime.jsx(material.Box, {
225
276
  sx: {
226
277
  display: "flex",
227
- justifyContent: "center"
278
+ alignItems: "center",
279
+ gap: 0.5
228
280
  },
229
- children: row.type === "trend" ? /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
230
- sx: {
231
- display: "flex",
232
- alignItems: "center",
233
- gap: 0.5
234
- },
281
+ children: row.trendType === "up" ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
235
282
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
236
283
  sx: {
237
284
  fontSize: "14px",
238
- color: row.trendType === "up" ? "#22C55E" : "#EF4444"
285
+ color: "#22C55E"
239
286
  },
240
- children: row.trendType === "up" ? "▲" : "▼"
287
+ children: "\u25B2"
241
288
  }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
242
289
  sx: {
243
290
  fontSize: "12px",
244
- color: row.trendType === "up" ? "#22C55E" : "#EF4444",
245
- fontWeight: 700,
246
- whiteSpace: "nowrap"
291
+ color: "#22C55E",
292
+ fontWeight: 700
247
293
  },
248
- children: isTablet ? row.trendType === "up" ? "Up" : "Down" : row.trendLabel
294
+ children: row.trendLabel
295
+ })]
296
+ }) : /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
297
+ children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
298
+ sx: {
299
+ fontSize: "14px",
300
+ color: "#EF4444"
301
+ },
302
+ children: "\u25BC"
303
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
304
+ sx: {
305
+ fontSize: "12px",
306
+ color: "#EF4444",
307
+ fontWeight: 700
308
+ },
309
+ children: row.trendLabel
249
310
  })]
250
- }) : row.type === "comingSoon" ? /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
251
- sx: {
252
- fontSize: "12px",
253
- color: "#9CA3AF",
254
- fontWeight: 500,
255
- textAlign: "center"
256
- },
257
- children: "\u2014"
258
- }) : /*#__PURE__*/jsxRuntime.jsx(material.Box, {
259
- sx: {
260
- display: "inline-block",
261
- px: 1.5,
262
- py: 0.5,
263
- borderRadius: "100px",
264
- bgcolor: row.statusBg,
265
- color: row.statusColor,
266
- fontSize: "11px",
267
- fontWeight: 700
268
- },
269
- children: row.status
270
311
  })
271
- })]
272
- }, idx);
273
- })
274
- })]
275
- })
276
- })]
277
- });
278
- }
279
-
280
- /* ─── Mobile: Stacked Card Layout ─── */
281
- return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
282
- sx: {
283
- bgcolor: "#fff",
284
- borderRadius: 4,
285
- border: "1px solid #f0f0f0",
286
- boxShadow: "0 4px 24px rgba(0,0,0,0.06)",
287
- p: 2
288
- },
289
- children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
290
- sx: {
291
- mb: 2
292
- },
293
- children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
294
- sx: {
295
- fontWeight: 700,
296
- fontSize: "16px",
297
- color: "#000"
298
- },
299
- children: title
300
- }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
301
- sx: {
302
- fontSize: "11px",
303
- color: "rgba(0,0,0,0.4)",
304
- mt: 0.2
305
- },
306
- children: subtitle
307
- })]
308
- }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
309
- sx: {
310
- display: "flex",
311
- flexDirection: "column",
312
- gap: 1.5
313
- },
314
- children: rows.map(function (row, idx) {
315
- var isDisabled = row.comingSoon;
316
- return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
317
- sx: {
318
- p: 2,
319
- borderRadius: 3,
320
- border: isDisabled ? "1px dashed #E5E7EB" : "1px solid #F3F4F6",
321
- bgcolor: isDisabled ? "#FAFAFA" : "#fff",
322
- opacity: isDisabled ? 0.7 : 1,
323
- transition: "opacity 0.2s ease"
324
- },
325
- children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
326
- sx: {
327
- display: "flex",
328
- alignItems: "center",
329
- gap: 1.5,
330
- mb: isDisabled ? 0 : 1.5
331
- },
332
- children: [row.id && /*#__PURE__*/jsxRuntime.jsx(material.Avatar, {
333
- sx: {
334
- width: 32,
335
- height: 32,
336
- fontSize: "11px",
337
- fontWeight: 700,
338
- bgcolor: row.avatarBg || "#F3F4F6",
339
- color: row.avatarColor || "#fff",
340
- flexShrink: 0
341
- },
342
- children: row.id
343
- }), /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
344
- sx: {
345
- display: "flex",
346
- alignItems: "center",
347
- gap: 1,
348
- flex: 1,
349
- flexWrap: "nowrap"
350
- },
351
- children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
352
- sx: {
353
- fontSize: "14px",
354
- fontWeight: 700,
355
- color: "#000"
356
- },
357
- children: row.name
358
- }), isDisabled && /*#__PURE__*/jsxRuntime.jsx(material.Box, {
359
- sx: {
360
- display: "inline-flex",
361
- alignItems: "center",
362
- px: 1,
363
- py: 0.3,
364
- borderRadius: "100px",
365
- bgcolor: "#F3F4F6",
366
- border: "1px solid #E5E7EB",
367
- flexShrink: 0
368
- },
369
- children: /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
312
+ }) : /*#__PURE__*/jsxRuntime.jsx(material.Box, {
370
313
  sx: {
371
- fontSize: "8px",
314
+ display: "inline-block",
315
+ px: compact ? 1 : 1.5,
316
+ py: compact ? 0.25 : 0.5,
317
+ borderRadius: "100px",
318
+ bgcolor: row.statusBg,
319
+ color: row.statusColor,
320
+ fontSize: compact ? "9px" : "11px",
372
321
  fontWeight: 700,
373
- color: "#6B7280",
374
- letterSpacing: "0.3px",
375
- textTransform: "uppercase"
322
+ textAlign: "center"
376
323
  },
377
- children: "Coming Soon"
324
+ children: row.status
378
325
  })
379
326
  })]
380
- }), row.type === "trend" && /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
381
- sx: {
382
- display: "flex",
383
- alignItems: "center",
384
- gap: 0.3,
385
- flexShrink: 0
386
- },
387
- children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
388
- sx: {
389
- fontSize: "12px",
390
- color: row.trendType === "up" ? "#22C55E" : "#EF4444"
391
- },
392
- children: row.trendType === "up" ? "▲" : "▼"
393
- }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
394
- sx: {
395
- fontSize: "11px",
396
- color: row.trendType === "up" ? "#22C55E" : "#EF4444",
397
- fontWeight: 700
398
- },
399
- children: row.trendType === "up" ? "Up" : "Down"
400
- })]
401
- })]
402
- }), !isDisabled && /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
403
- sx: {
404
- display: "grid",
405
- gridTemplateColumns: "1fr 1fr 1fr 1fr",
406
- gap: 1
407
- },
408
- children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
409
- children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
410
- sx: {
411
- fontSize: "9px",
412
- color: "#9CA3AF",
413
- fontWeight: 600,
414
- textTransform: "uppercase",
415
- letterSpacing: "0.3px"
416
- },
417
- children: "Spend"
418
- }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
419
- sx: {
420
- fontSize: "13px",
421
- fontWeight: 700,
422
- color: "#000",
423
- mt: 0.3
424
- },
425
- children: row.val1
426
- })]
427
- }), /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
428
- children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
429
- sx: {
430
- fontSize: "9px",
431
- color: "#9CA3AF",
432
- fontWeight: 600,
433
- textTransform: "uppercase",
434
- letterSpacing: "0.3px"
435
- },
436
- children: "Revenue"
437
- }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
438
- sx: {
439
- fontSize: "13px",
440
- fontWeight: 700,
441
- color: "#000",
442
- mt: 0.3
443
- },
444
- children: row.val2
445
- })]
446
- }), /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
447
- children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
448
- sx: {
449
- fontSize: "9px",
450
- color: "#9CA3AF",
451
- fontWeight: 600,
452
- textTransform: "uppercase",
453
- letterSpacing: "0.3px"
454
- },
455
- children: "ROAS"
456
- }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
457
- sx: {
458
- fontSize: "13px",
459
- fontWeight: 700,
460
- color: row.val3Color || "#22C55E",
461
- mt: 0.3
462
- },
463
- children: row.val3
464
- })]
465
- }), /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
466
- children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
467
- sx: {
468
- fontSize: "9px",
469
- color: "#9CA3AF",
470
- fontWeight: 600,
471
- textTransform: "uppercase",
472
- letterSpacing: "0.3px"
473
- },
474
- children: "CPA"
475
- }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
476
- sx: {
477
- fontSize: "13px",
478
- fontWeight: 700,
479
- color: "#000",
480
- mt: 0.3
481
- },
482
- children: row.val4
483
- })]
484
- })]
485
- })]
486
- }, idx);
327
+ }, idx);
328
+ })
329
+ })]
487
330
  })
488
331
  })]
489
332
  });