@ammarkhalidfarooq/dashboard-package 0.6.127 → 0.6.128

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