@ammarkhalidfarooq/dashboard-package 0.6.128 → 0.6.129

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,487 +1,330 @@
1
- import { useTheme, useMediaQuery, Box, Typography, Avatar, LinearProgress } from '@mui/material';
2
- import { jsxs, jsx } from 'react/jsx-runtime';
1
+ import { Box, Typography, 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
+ }
3
47
 
4
48
  var ActiveCampaignsCard = function ActiveCampaignsCard(_ref) {
5
49
  var _ref$title = _ref.title,
6
50
  title = _ref$title === void 0 ? "Active campaigns" : _ref$title,
7
51
  _ref$subtitle = _ref.subtitle,
8
52
  subtitle = _ref$subtitle === void 0 ? "Live fundraisers ranked by velocity" : _ref$subtitle,
53
+ actionLabel = _ref.actionLabel,
9
54
  _ref$columns = _ref.columns,
10
- columns = _ref$columns === void 0 ? ["Campaign", "Raised", "Progress", "Donors", "Avg gift"] : _ref$columns,
55
+ columns = _ref$columns === void 0 ? ["Campaign", "Raised", "Progress", "Donors", "Avg Gift"] : _ref$columns,
11
56
  _ref$rows = _ref.rows,
12
57
  rows = _ref$rows === void 0 ? [] : _ref$rows,
13
58
  _ref$gridTemplateColu = _ref.gridTemplateColumns,
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
- },
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),
29
85
  children: [/*#__PURE__*/jsxs(Box, {
30
- sx: {
31
- mb: 3
32
- },
33
86
  children: [/*#__PURE__*/jsx(Typography, {
34
87
  sx: {
35
88
  fontWeight: 700,
36
- fontSize: "18px",
37
- color: "#000"
89
+ fontSize: compact ? "14px" : "18px",
90
+ color: "#000",
91
+ textAlign: "left",
92
+ lineHeight: 1.15
38
93
  },
39
94
  children: title
40
95
  }), /*#__PURE__*/jsx(Typography, {
41
96
  sx: {
42
- fontSize: "13px",
43
- color: "rgba(0,0,0,0.4)",
44
- mt: 0.2
97
+ fontSize: compact ? "10px" : "13px",
98
+ color: "rgba(0, 0, 0, 0.4)",
99
+ textAlign: "left",
100
+ lineHeight: 1.15
45
101
  },
46
102
  children: subtitle
47
103
  })]
48
- }), /*#__PURE__*/jsx(Box, {
104
+ }), actionLabel && /*#__PURE__*/jsx(Typography, {
105
+ sx: {
106
+ fontSize: compact ? "10px" : "13px",
107
+ fontWeight: 600,
108
+ color: "rgb(99, 99, 230)",
109
+ cursor: "pointer"
110
+ },
111
+ children: actionLabel
112
+ })]
113
+ }), /*#__PURE__*/jsx(Box, {
114
+ sx: _objectSpread2({
115
+ overflowX: compact ? "hidden" : "auto"
116
+ }, tableSx),
117
+ children: /*#__PURE__*/jsxs(Box, {
49
118
  sx: {
50
- overflowX: "auto"
119
+ minWidth: compact ? 0 : "600px"
51
120
  },
52
- children: /*#__PURE__*/jsxs(Box, {
121
+ children: [/*#__PURE__*/jsx(Box, {
53
122
  sx: {
54
- minWidth: "600px"
123
+ display: "grid",
124
+ gridTemplateColumns: gridTemplateColumns,
125
+ gap: compact ? 1 : 2,
126
+ pb: compact ? 1 : 2.5,
127
+ borderBottom: "1px solid #f0f0f0"
55
128
  },
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, {
129
+ children: columns.map(function (header) {
130
+ return /*#__PURE__*/jsx(Typography, {
131
+ sx: {
132
+ fontSize: compact ? "9px" : "12px",
133
+ color: "rgba(0, 0, 0, 0.4)",
134
+ fontWeight: 500,
135
+ textAlign: "left"
136
+ },
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, {
147
+ sx: {
148
+ display: "grid",
149
+ gridTemplateColumns: gridTemplateColumns,
150
+ gap: compact ? 1 : 2,
151
+ py: compact ? 0.5 : 1.2,
152
+ alignItems: "center",
153
+ borderBottom: idx === rows.length - 1 ? "none" : "1px solid #f5f5f5"
154
+ },
155
+ children: [/*#__PURE__*/jsxs(Box, {
83
156
  sx: {
84
- display: "grid",
85
- gridTemplateColumns: gridTemplateColumns,
86
- gap: 2,
87
- py: 1.2,
157
+ display: "flex",
88
158
  alignItems: "center",
89
- borderBottom: idx === rows.length - 1 ? "none" : "1px solid #f5f5f5",
90
- opacity: isDisabled ? 0.55 : 1,
91
- transition: "opacity 0.2s ease"
159
+ gap: 1.5
92
160
  },
93
- children: [/*#__PURE__*/jsxs(Box, {
161
+ children: [(row.icon || row.id) && /*#__PURE__*/jsx(Box, {
94
162
  sx: {
163
+ width: compact ? 22 : 32,
164
+ height: compact ? 22 : 32,
165
+ borderRadius: "50%",
166
+ bgcolor: "#fff",
167
+ border: "2px solid ".concat(row.avatarBorder || row.avatarBg || "#E5E7EB"),
95
168
  display: "flex",
96
169
  alignItems: "center",
97
- gap: 1.5,
98
- minWidth: 0
170
+ justifyContent: "center",
171
+ flexShrink: 0,
172
+ boxSizing: "border-box",
173
+ filter: row.comingSoon ? "grayscale(1)" : "none",
174
+ opacity: row.comingSoon ? 0.55 : 1
99
175
  },
100
- children: [row.id && /*#__PURE__*/jsx(Avatar, {
176
+ children: row.icon ? /*#__PURE__*/jsx(row.icon, {
177
+ size: compact ? 12 : 16,
178
+ color: row.iconColor || row.avatarBorder || row.avatarBg
179
+ }) : /*#__PURE__*/jsx(Typography, {
101
180
  sx: {
102
- width: 28,
103
- height: 28,
104
- fontSize: "10px",
181
+ fontSize: compact ? "8px" : "10px",
105
182
  fontWeight: 700,
106
- bgcolor: row.avatarBg || "#F3F4F6",
107
- color: row.avatarColor || "#fff",
108
- flexShrink: 0
183
+ color: row.avatarColor || "#111"
109
184
  },
110
185
  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
- })]
186
+ })
152
187
  }), /*#__PURE__*/jsx(Typography, {
153
188
  sx: {
154
- fontSize: "13px",
155
- fontWeight: 600,
156
- color: isDisabled ? "#9CA3AF" : "#000",
157
- whiteSpace: "nowrap",
158
- textAlign: "center"
189
+ fontSize: compact ? "10px" : "12px",
190
+ fontWeight: 700,
191
+ color: row.comingSoon ? "#9CA3AF" : "#000"
159
192
  },
160
- children: row.val1
161
- }), row.type === "progress" ? /*#__PURE__*/jsxs(Box, {
193
+ children: row.name
194
+ })]
195
+ }), /*#__PURE__*/jsx(Typography, {
196
+ sx: {
197
+ fontSize: compact ? "10px" : "13px",
198
+ fontWeight: 600,
199
+ color: row.comingSoon ? "#9CA3AF" : "#000",
200
+ textAlign: "left"
201
+ },
202
+ children: row.val1
203
+ }), row.type === "progress" ? /*#__PURE__*/jsxs(Box, {
204
+ sx: {
205
+ display: "flex",
206
+ alignItems: "center",
207
+ gap: 1.5
208
+ },
209
+ children: [/*#__PURE__*/jsx(Box, {
162
210
  sx: {
163
- display: "flex",
164
- alignItems: "center",
165
- gap: 1.5,
166
- justifyContent: "center"
211
+ flexGrow: 1
167
212
  },
168
- children: [/*#__PURE__*/jsx(Box, {
213
+ children: /*#__PURE__*/jsx(LinearProgress, {
214
+ variant: "determinate",
215
+ value: Math.min(100, Math.max(0, (_row$progress = row.progress) !== null && _row$progress !== void 0 ? _row$progress : 0)),
169
216
  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,
217
+ height: compact ? 6 : 8,
218
+ borderRadius: 4,
219
+ bgcolor: "#F3F4F6",
220
+ "& .MuiLinearProgress-bar": {
178
221
  borderRadius: 4,
179
- bgcolor: "#F3F4F6",
180
- "& .MuiLinearProgress-bar": {
181
- borderRadius: 4,
182
- bgcolor: row.progressColor || "rgb(99,99,230)"
183
- }
222
+ bgcolor: row.progressColor || "rgb(99, 99, 230)"
184
223
  }
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, {
224
+ }
225
+ })
226
+ }), /*#__PURE__*/jsxs(Typography, {
205
227
  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"
228
+ fontSize: compact ? "9px" : "11px",
229
+ color: "rgba(0, 0, 0, 0.4)",
230
+ minWidth: "30px"
211
231
  },
212
- children: row.val3
213
- }), /*#__PURE__*/jsx(Typography, {
232
+ children: [row.progress, "%"]
233
+ })]
234
+ }) : /*#__PURE__*/jsx(Typography, {
235
+ sx: {
236
+ fontSize: "13px",
237
+ fontWeight: 600,
238
+ color: row.comingSoon ? "#9CA3AF" : "#000",
239
+ textAlign: "left"
240
+ },
241
+ children: row.val2
242
+ }), /*#__PURE__*/jsx(Typography, {
243
+ sx: {
244
+ fontSize: compact ? "10px" : "13px",
245
+ fontWeight: row.highlightVal3 ? 700 : 500,
246
+ color: row.comingSoon ? "#9CA3AF" : row.highlightVal3 ? row.val3Color || "#22C55E" : "#000",
247
+ textAlign: "left"
248
+ },
249
+ children: row.val3
250
+ }), /*#__PURE__*/jsx(Typography, {
251
+ sx: {
252
+ fontSize: "13px",
253
+ fontWeight: 500,
254
+ color: row.comingSoon ? "#9CA3AF" : "#000",
255
+ textAlign: "left"
256
+ },
257
+ children: row.val4
258
+ }), columns.length > 5 && /*#__PURE__*/jsx(Box, {
259
+ children: row.comingSoon ? /*#__PURE__*/jsx(Box, {
214
260
  sx: {
215
- fontSize: "13px",
216
- fontWeight: 500,
217
- color: isDisabled ? "#9CA3AF" : "#000",
218
- whiteSpace: "nowrap",
219
- textAlign: "center"
261
+ display: "inline-block",
262
+ px: compact ? 1 : 1.5,
263
+ py: compact ? 0.25 : 0.5,
264
+ borderRadius: "100px",
265
+ bgcolor: "#F3F4F6",
266
+ color: "#9CA3AF",
267
+ fontSize: compact ? "9px" : "11px",
268
+ fontWeight: 700,
269
+ textAlign: "center",
270
+ whiteSpace: "nowrap"
220
271
  },
221
- children: row.val4
222
- }), columns.length > 5 && /*#__PURE__*/jsx(Box, {
272
+ children: "Coming Soon"
273
+ }) : row.type === "trend" ? /*#__PURE__*/jsx(Box, {
223
274
  sx: {
224
275
  display: "flex",
225
- justifyContent: "center"
276
+ alignItems: "center",
277
+ gap: 0.5
226
278
  },
227
- children: row.type === "trend" ? /*#__PURE__*/jsxs(Box, {
228
- sx: {
229
- display: "flex",
230
- alignItems: "center",
231
- gap: 0.5
232
- },
279
+ children: row.trendType === "up" ? /*#__PURE__*/jsxs(Fragment, {
233
280
  children: [/*#__PURE__*/jsx(Typography, {
234
281
  sx: {
235
282
  fontSize: "14px",
236
- color: row.trendType === "up" ? "#22C55E" : "#EF4444"
283
+ color: "#22C55E"
237
284
  },
238
- children: row.trendType === "up" ? "▲" : "▼"
285
+ children: "\u25B2"
239
286
  }), /*#__PURE__*/jsx(Typography, {
240
287
  sx: {
241
288
  fontSize: "12px",
242
- color: row.trendType === "up" ? "#22C55E" : "#EF4444",
243
- fontWeight: 700,
244
- whiteSpace: "nowrap"
289
+ color: "#22C55E",
290
+ fontWeight: 700
245
291
  },
246
- children: isTablet ? row.trendType === "up" ? "Up" : "Down" : row.trendLabel
292
+ children: row.trendLabel
293
+ })]
294
+ }) : /*#__PURE__*/jsxs(Fragment, {
295
+ children: [/*#__PURE__*/jsx(Typography, {
296
+ sx: {
297
+ fontSize: "14px",
298
+ color: "#EF4444"
299
+ },
300
+ children: "\u25BC"
301
+ }), /*#__PURE__*/jsx(Typography, {
302
+ sx: {
303
+ fontSize: "12px",
304
+ color: "#EF4444",
305
+ fontWeight: 700
306
+ },
307
+ children: row.trendLabel
247
308
  })]
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
309
  })
269
- })]
270
- }, idx);
271
- })
272
- })]
273
- })
274
- })]
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, {
299
- sx: {
300
- fontSize: "11px",
301
- color: "rgba(0,0,0,0.4)",
302
- mt: 0.2
303
- },
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, {
315
- sx: {
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"
322
- },
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, {
331
- sx: {
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
339
- },
340
- children: row.id
341
- }), /*#__PURE__*/jsxs(Box, {
342
- sx: {
343
- display: "flex",
344
- alignItems: "center",
345
- gap: 1,
346
- flex: 1,
347
- flexWrap: "nowrap"
348
- },
349
- children: [/*#__PURE__*/jsx(Typography, {
350
- sx: {
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",
359
- alignItems: "center",
360
- px: 1,
361
- py: 0.3,
362
- borderRadius: "100px",
363
- bgcolor: "#F3F4F6",
364
- border: "1px solid #E5E7EB",
365
- flexShrink: 0
366
- },
367
- children: /*#__PURE__*/jsx(Typography, {
310
+ }) : /*#__PURE__*/jsx(Box, {
368
311
  sx: {
369
- fontSize: "8px",
312
+ display: "inline-block",
313
+ px: compact ? 1 : 1.5,
314
+ py: compact ? 0.25 : 0.5,
315
+ borderRadius: "100px",
316
+ bgcolor: row.statusBg,
317
+ color: row.statusColor,
318
+ fontSize: compact ? "9px" : "11px",
370
319
  fontWeight: 700,
371
- color: "#6B7280",
372
- letterSpacing: "0.3px",
373
- textTransform: "uppercase"
320
+ textAlign: "center"
374
321
  },
375
- children: "Coming Soon"
322
+ children: row.status
376
323
  })
377
324
  })]
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" ? "▲" : "▼"
391
- }), /*#__PURE__*/jsx(Typography, {
392
- sx: {
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",
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,
420
- color: "#000",
421
- mt: 0.3
422
- },
423
- children: row.val1
424
- })]
425
- }), /*#__PURE__*/jsxs(Box, {
426
- children: [/*#__PURE__*/jsx(Typography, {
427
- sx: {
428
- fontSize: "9px",
429
- color: "#9CA3AF",
430
- fontWeight: 600,
431
- textTransform: "uppercase",
432
- letterSpacing: "0.3px"
433
- },
434
- children: "Revenue"
435
- }), /*#__PURE__*/jsx(Typography, {
436
- sx: {
437
- fontSize: "13px",
438
- fontWeight: 700,
439
- color: "#000",
440
- mt: 0.3
441
- },
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"
454
- }), /*#__PURE__*/jsx(Typography, {
455
- sx: {
456
- fontSize: "13px",
457
- fontWeight: 700,
458
- color: row.val3Color || "#22C55E",
459
- mt: 0.3
460
- },
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"
473
- }), /*#__PURE__*/jsx(Typography, {
474
- sx: {
475
- fontSize: "13px",
476
- fontWeight: 700,
477
- color: "#000",
478
- mt: 0.3
479
- },
480
- children: row.val4
481
- })]
482
- })]
483
- })]
484
- }, idx);
325
+ }, idx);
326
+ })
327
+ })]
485
328
  })
486
329
  })]
487
330
  });