@ammarkhalidfarooq/dashboard-package 0.6.44 → 0.6.46

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 (5) hide show
  1. package/dist/index.cjs.js +204 -155
  2. package/dist/index.cjs.js.map +1 -1
  3. package/dist/index.es.js +204 -155
  4. package/dist/index.es.js.map +1 -1
  5. package/package.json +1 -1
package/dist/index.es.js CHANGED
@@ -1576,11 +1576,14 @@ var THEME = {
1576
1576
  var d$ = function d$(v) {
1577
1577
  return "$".concat(formatNumber(Number(v !== null && v !== void 0 ? v : 0)));
1578
1578
  };
1579
- var d$Compact = function d$Compact(v) {
1580
- var n = Number(v !== null && v !== void 0 ? v : 0);
1581
- if (n >= 1000000) return "$".concat((n / 1000000).toFixed(1), "M");
1582
- if (n >= 1000) return "$".concat((n / 1000).toFixed(1), "K");
1583
- return d$(n);
1579
+ var kpi$ = function kpi$(v) {
1580
+ return "$".concat(formatNumber(Number(v !== null && v !== void 0 ? v : 0).toFixed(2)));
1581
+ };
1582
+ var kpiPct = function kpiPct(v) {
1583
+ return "".concat(formatNumber(Number(v !== null && v !== void 0 ? v : 0).toFixed(2)), "%");
1584
+ };
1585
+ var kpiRoas = function kpiRoas(v) {
1586
+ return "".concat(formatNumber(Number(v !== null && v !== void 0 ? v : 0).toFixed(2)), "\xD7");
1584
1587
  };
1585
1588
  var pct = function pct(v) {
1586
1589
  var dp = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
@@ -2177,7 +2180,7 @@ var PageFooter = function PageFooter(_ref0) {
2177
2180
 
2178
2181
  // ─── Main component ───────────────────────────────────────────────────────────
2179
2182
  var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref1, ref) {
2180
- var _apiData$overviewStat, _overview$totalRevenu, _overview$netRevenue, _overview$overallAVGD, _overview$conversionR, _apiData$totalVisits, _refundsRaw$refundRat, _refundsRaw$chargebac, _apiData$trafficSourc2, _metricByTitle$NetRa, _metricByTitle$Total, _metricByTitle$Total2, _metricByTitle$Total3, _metricByTitle$AvgDo, _metricByTitle$AvgDo2, _metricByTitle$AvgDo3, _apiData$medianGift, _apiData$topDecileGif, _metricByTitle$ROAS, _apiData$roasCard, _metricByTitle$ROAS2, _apiData$roasCardPrev, _metricByTitle$ROAS3, _apiData$adSpend, _apiData$attributedRe, _metricByTitle$Conver, _metricByTitle$Conver2, _metricByTitle$Conver3, _metricByTitle$Refund, _metricByTitle$Refund2, _metricByTitle$Refund3, _refundsRaw$refundCou, _ob$peakDay;
2183
+ var _apiData$overviewStat, _overview$totalRevenu, _overview$netRevenue, _overview$overallAVGD, _overview$conversionR, _apiData$totalVisits, _refundsRaw$refundRat, _refundsRaw$chargebac, _apiData$trafficSourc2, _metricByTitle$NetRa, _metricByTitle$Total, _metricByTitle$Total2, _metricByTitle$Total3, _metricByTitle$AvgDo, _metricByTitle$AvgDo2, _apiData$medianGift, _apiData$topDecileGif, _apiData$roasCard, _metricByTitle$ROAS, _apiData$roasCardPrev, _metricByTitle$ROAS2, _apiData$adSpend, _apiData$attributedRe, _metricByTitle$Conver, _metricByTitle$Conver2, _metricByTitle$Refund, _metricByTitle$Refund2, _refundsRaw$refundCou, _ob$peakDay;
2181
2184
  var _ref1$apiData = _ref1.apiData,
2182
2185
  apiData = _ref1$apiData === void 0 ? {} : _ref1$apiData,
2183
2186
  _ref1$dateName = _ref1.dateName,
@@ -2418,7 +2421,7 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref1, ref) {
2418
2421
  },
2419
2422
  children: [/*#__PURE__*/jsx(KpiCard, {
2420
2423
  title: "Total Raised",
2421
- value: hero.value,
2424
+ value: kpi$(totalRaised),
2422
2425
  trend: hero.trend,
2423
2426
  detail: hero.detail,
2424
2427
  variant: "primary"
@@ -2430,7 +2433,7 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref1, ref) {
2430
2433
  },
2431
2434
  children: [/*#__PURE__*/jsx(KpiCard, {
2432
2435
  title: "Net Raised",
2433
- value: d$Compact(netRaised),
2436
+ value: kpi$(netRaised),
2434
2437
  trend: ((_metricByTitle$NetRa = metricByTitle["Net Raised"]) === null || _metricByTitle$NetRa === void 0 ? void 0 : _metricByTitle$NetRa.trend) || signed((growth === null || growth === void 0 ? void 0 : growth.netRevenue) || 17.4),
2435
2438
  detail: passThrough
2436
2439
  }), /*#__PURE__*/jsx(KpiCard, {
@@ -2440,9 +2443,9 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref1, ref) {
2440
2443
  detail: ((_metricByTitle$Total3 = metricByTitle["Total Donors"]) === null || _metricByTitle$Total3 === void 0 ? void 0 : _metricByTitle$Total3.detail) || "".concat(formatNumber(newDonors), " new \xB7 ").concat(formatNumber(returningDonors), " returning")
2441
2444
  }), /*#__PURE__*/jsx(KpiCard, {
2442
2445
  title: "Avg Donation",
2443
- value: ((_metricByTitle$AvgDo = metricByTitle["Avg Donation"]) === null || _metricByTitle$AvgDo === void 0 ? void 0 : _metricByTitle$AvgDo.value) || d$(avgDonation),
2444
- trend: ((_metricByTitle$AvgDo2 = metricByTitle["Avg Donation"]) === null || _metricByTitle$AvgDo2 === void 0 ? void 0 : _metricByTitle$AvgDo2.trend) || signed((growth === null || growth === void 0 ? void 0 : growth.overallAVGDonations) || 8.4),
2445
- detail: ((_metricByTitle$AvgDo3 = metricByTitle["Avg Donation"]) === null || _metricByTitle$AvgDo3 === void 0 ? void 0 : _metricByTitle$AvgDo3.detail) || "Median ".concat(d$((_apiData$medianGift = apiData === null || apiData === void 0 ? void 0 : apiData.medianGift) !== null && _apiData$medianGift !== void 0 ? _apiData$medianGift : 75), " \xB7 top decile ").concat(d$((_apiData$topDecileGif = apiData === null || apiData === void 0 ? void 0 : apiData.topDecileGift) !== null && _apiData$topDecileGif !== void 0 ? _apiData$topDecileGif : 850))
2446
+ value: kpi$(avgDonation),
2447
+ trend: ((_metricByTitle$AvgDo = metricByTitle["Avg Donation"]) === null || _metricByTitle$AvgDo === void 0 ? void 0 : _metricByTitle$AvgDo.trend) || signed((growth === null || growth === void 0 ? void 0 : growth.overallAVGDonations) || 8.4),
2448
+ detail: ((_metricByTitle$AvgDo2 = metricByTitle["Avg Donation"]) === null || _metricByTitle$AvgDo2 === void 0 ? void 0 : _metricByTitle$AvgDo2.detail) || "Median ".concat(d$((_apiData$medianGift = apiData === null || apiData === void 0 ? void 0 : apiData.medianGift) !== null && _apiData$medianGift !== void 0 ? _apiData$medianGift : 75), " \xB7 top decile ").concat(d$((_apiData$topDecileGif = apiData === null || apiData === void 0 ? void 0 : apiData.topDecileGift) !== null && _apiData$topDecileGif !== void 0 ? _apiData$topDecileGif : 850))
2446
2449
  })]
2447
2450
  }), /*#__PURE__*/jsxs("div", {
2448
2451
  style: {
@@ -2452,19 +2455,19 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref1, ref) {
2452
2455
  },
2453
2456
  children: [/*#__PURE__*/jsx(KpiCard, {
2454
2457
  title: "ROAS",
2455
- value: ((_metricByTitle$ROAS = metricByTitle.ROAS) === null || _metricByTitle$ROAS === void 0 ? void 0 : _metricByTitle$ROAS.value) || "".concat(formatNumber((_apiData$roasCard = apiData === null || apiData === void 0 ? void 0 : apiData.roasCard) !== null && _apiData$roasCard !== void 0 ? _apiData$roasCard : 3.0), "\xD7"),
2456
- trend: ((_metricByTitle$ROAS2 = metricByTitle.ROAS) === null || _metricByTitle$ROAS2 === void 0 ? void 0 : _metricByTitle$ROAS2.trend) || signed((_apiData$roasCardPrev = apiData === null || apiData === void 0 ? void 0 : apiData.roasCardPrev) !== null && _apiData$roasCardPrev !== void 0 ? _apiData$roasCardPrev : 0.4, "×"),
2457
- detail: ((_metricByTitle$ROAS3 = metricByTitle.ROAS) === null || _metricByTitle$ROAS3 === void 0 ? void 0 : _metricByTitle$ROAS3.detail) || "".concat(d$((_apiData$adSpend = apiData === null || apiData === void 0 ? void 0 : apiData.adSpend) !== null && _apiData$adSpend !== void 0 ? _apiData$adSpend : 72000), " spend \xB7 ").concat(d$((_apiData$attributedRe = apiData === null || apiData === void 0 ? void 0 : apiData.attributedRevenue) !== null && _apiData$attributedRe !== void 0 ? _apiData$attributedRe : 215000), " attrib.")
2458
+ value: kpiRoas((_apiData$roasCard = apiData === null || apiData === void 0 ? void 0 : apiData.roasCard) !== null && _apiData$roasCard !== void 0 ? _apiData$roasCard : 3.0),
2459
+ trend: ((_metricByTitle$ROAS = metricByTitle.ROAS) === null || _metricByTitle$ROAS === void 0 ? void 0 : _metricByTitle$ROAS.trend) || signed((_apiData$roasCardPrev = apiData === null || apiData === void 0 ? void 0 : apiData.roasCardPrev) !== null && _apiData$roasCardPrev !== void 0 ? _apiData$roasCardPrev : 0.4, "×"),
2460
+ detail: ((_metricByTitle$ROAS2 = metricByTitle.ROAS) === null || _metricByTitle$ROAS2 === void 0 ? void 0 : _metricByTitle$ROAS2.detail) || "".concat(d$((_apiData$adSpend = apiData === null || apiData === void 0 ? void 0 : apiData.adSpend) !== null && _apiData$adSpend !== void 0 ? _apiData$adSpend : 72000), " spend \xB7 ").concat(d$((_apiData$attributedRe = apiData === null || apiData === void 0 ? void 0 : apiData.attributedRevenue) !== null && _apiData$attributedRe !== void 0 ? _apiData$attributedRe : 215000), " attrib.")
2458
2461
  }), /*#__PURE__*/jsx(KpiCard, {
2459
2462
  title: "Conversion",
2460
- value: ((_metricByTitle$Conver = metricByTitle.Conversion) === null || _metricByTitle$Conver === void 0 ? void 0 : _metricByTitle$Conver.value) || pct(convRate, 1),
2461
- trend: ((_metricByTitle$Conver2 = metricByTitle.Conversion) === null || _metricByTitle$Conver2 === void 0 ? void 0 : _metricByTitle$Conver2.trend) || signed((growth === null || growth === void 0 ? void 0 : growth.conversionRate) || 0.21, "pp"),
2462
- detail: ((_metricByTitle$Conver3 = metricByTitle.Conversion) === null || _metricByTitle$Conver3 === void 0 ? void 0 : _metricByTitle$Conver3.detail) || "".concat(formatNumber(totalDonors), " from ").concat(formatNumber(totalVisits), " visits")
2463
+ value: kpiPct(convRate),
2464
+ trend: ((_metricByTitle$Conver = metricByTitle.Conversion) === null || _metricByTitle$Conver === void 0 ? void 0 : _metricByTitle$Conver.trend) || signed((growth === null || growth === void 0 ? void 0 : growth.conversionRate) || 0.21, "pp"),
2465
+ detail: ((_metricByTitle$Conver2 = metricByTitle.Conversion) === null || _metricByTitle$Conver2 === void 0 ? void 0 : _metricByTitle$Conver2.detail) || "".concat(formatNumber(totalDonors), " from ").concat(formatNumber(totalVisits), " visits")
2463
2466
  }), /*#__PURE__*/jsx(KpiCard, {
2464
2467
  title: "Refund Rate",
2465
- value: ((_metricByTitle$Refund = metricByTitle["Refund Rate"]) === null || _metricByTitle$Refund === void 0 ? void 0 : _metricByTitle$Refund.value) || pct(refundRate, 2),
2466
- trend: ((_metricByTitle$Refund2 = metricByTitle["Refund Rate"]) === null || _metricByTitle$Refund2 === void 0 ? void 0 : _metricByTitle$Refund2.trend) || signed((refundsRaw === null || refundsRaw === void 0 ? void 0 : refundsRaw.refundRateChange) || -0.3, "pp"),
2467
- detail: ((_metricByTitle$Refund3 = metricByTitle["Refund Rate"]) === null || _metricByTitle$Refund3 === void 0 ? void 0 : _metricByTitle$Refund3.detail) || "".concat(formatNumber((_refundsRaw$refundCou = refundsRaw === null || refundsRaw === void 0 ? void 0 : refundsRaw.refundCount) !== null && _refundsRaw$refundCou !== void 0 ? _refundsRaw$refundCou : 2), " refunds this period")
2468
+ value: pct(refundRate, 2),
2469
+ trend: ((_metricByTitle$Refund = metricByTitle["Refund Rate"]) === null || _metricByTitle$Refund === void 0 ? void 0 : _metricByTitle$Refund.trend) || signed((refundsRaw === null || refundsRaw === void 0 ? void 0 : refundsRaw.refundRateChange) || -0.3, "pp"),
2470
+ detail: ((_metricByTitle$Refund2 = metricByTitle["Refund Rate"]) === null || _metricByTitle$Refund2 === void 0 ? void 0 : _metricByTitle$Refund2.detail) || "".concat(formatNumber((_refundsRaw$refundCou = refundsRaw === null || refundsRaw === void 0 ? void 0 : refundsRaw.refundCount) !== null && _refundsRaw$refundCou !== void 0 ? _refundsRaw$refundCou : 2), " refunds this period")
2468
2471
  })]
2469
2472
  }), /*#__PURE__*/jsxs("div", {
2470
2473
  style: {
@@ -2507,7 +2510,7 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref1, ref) {
2507
2510
  fontWeight: 800,
2508
2511
  color: "#111827"
2509
2512
  },
2510
- children: hero.value
2513
+ children: kpi$(totalRaised)
2511
2514
  }), /*#__PURE__*/jsx("span", {
2512
2515
  style: {
2513
2516
  marginLeft: 8,
@@ -16106,6 +16109,11 @@ var html2canvas_esm = /*#__PURE__*/Object.freeze({
16106
16109
  var CARD_BORDER = "1.5px solid #F1F1F5";
16107
16110
  var PANEL_BORDER = "1px solid #f0f0f0";
16108
16111
  var PANEL_SHADOW = "0 4px 24px rgba(0,0,0,0.06)";
16112
+ var textSkeletonSx = {
16113
+ lineHeight: 1,
16114
+ transform: "none",
16115
+ flexShrink: 0
16116
+ };
16109
16117
  var MetricCardSkeleton = function MetricCardSkeleton() {
16110
16118
  return /*#__PURE__*/jsxs(Box, {
16111
16119
  sx: {
@@ -16116,35 +16124,50 @@ var MetricCardSkeleton = function MetricCardSkeleton() {
16116
16124
  xs: 1.75,
16117
16125
  md: 2
16118
16126
  },
16127
+ paddingTop: "10px !important",
16128
+ paddingBottom: "10px !important",
16119
16129
  height: 92,
16120
- boxShadow: "0 14px 30px rgba(21, 26, 45, 0.06)"
16130
+ boxShadow: "0 14px 30px rgba(21, 26, 45, 0.06)",
16131
+ display: "flex",
16132
+ flexDirection: "column",
16133
+ justifyContent: "space-between",
16134
+ overflow: "hidden"
16121
16135
  },
16122
16136
  children: [/*#__PURE__*/jsxs(Box, {
16123
16137
  sx: {
16124
16138
  display: "flex",
16125
16139
  justifyContent: "space-between",
16126
- mb: 1
16140
+ alignItems: "center"
16127
16141
  },
16128
16142
  children: [/*#__PURE__*/jsx(Skeleton, {
16129
- variant: "text",
16143
+ variant: "rounded",
16130
16144
  width: "55%",
16131
- height: 18
16145
+ height: 14,
16146
+ sx: {
16147
+ flexShrink: 0
16148
+ }
16132
16149
  }), /*#__PURE__*/jsx(Skeleton, {
16133
16150
  variant: "circular",
16134
16151
  width: 30,
16135
- height: 30
16152
+ height: 30,
16153
+ sx: {
16154
+ flexShrink: 0
16155
+ }
16136
16156
  })]
16137
16157
  }), /*#__PURE__*/jsx(Skeleton, {
16138
- variant: "text",
16158
+ variant: "rounded",
16139
16159
  width: "70%",
16140
- height: 28,
16160
+ height: 22,
16141
16161
  sx: {
16142
- mb: 0.5
16162
+ flexShrink: 0
16143
16163
  }
16144
16164
  }), /*#__PURE__*/jsx(Skeleton, {
16145
- variant: "text",
16165
+ variant: "rounded",
16146
16166
  width: "45%",
16147
- height: 14
16167
+ height: 12,
16168
+ sx: {
16169
+ flexShrink: 0
16170
+ }
16148
16171
  })]
16149
16172
  });
16150
16173
  };
@@ -16165,7 +16188,11 @@ var MetricCardsSkeleton = function MetricCardsSkeleton(_ref) {
16165
16188
  display: "grid",
16166
16189
  gridTemplateColumns: gridTemplateColumns,
16167
16190
  gap: gap,
16168
- mb: 0
16191
+ mb: 0,
16192
+ minWidth: 0,
16193
+ "& > *": {
16194
+ minWidth: 0
16195
+ }
16169
16196
  },
16170
16197
  children: Array.from({
16171
16198
  length: count
@@ -16174,43 +16201,52 @@ var MetricCardsSkeleton = function MetricCardsSkeleton(_ref) {
16174
16201
  })
16175
16202
  });
16176
16203
  };
16204
+ var panelCardSx = {
16205
+ bgcolor: "#fff",
16206
+ borderRadius: 4,
16207
+ border: PANEL_BORDER,
16208
+ boxShadow: PANEL_SHADOW,
16209
+ p: 3,
16210
+ display: "flex",
16211
+ flexDirection: "column",
16212
+ overflow: "hidden",
16213
+ minWidth: 0
16214
+ };
16177
16215
  var ChartCardSkeleton = function ChartCardSkeleton(_ref2) {
16178
16216
  var _ref2$height = _ref2.height,
16179
16217
  height = _ref2$height === void 0 ? 380 : _ref2$height;
16180
16218
  return /*#__PURE__*/jsxs(Box, {
16181
- sx: {
16182
- bgcolor: "#fff",
16183
- borderRadius: 4,
16184
- border: PANEL_BORDER,
16185
- boxShadow: PANEL_SHADOW,
16186
- p: 3,
16219
+ sx: _objectSpread2(_objectSpread2({}, panelCardSx), {}, {
16187
16220
  height: height
16188
- },
16221
+ }),
16189
16222
  children: [/*#__PURE__*/jsx(Skeleton, {
16190
- variant: "text",
16223
+ variant: "rounded",
16191
16224
  width: 180,
16192
- height: 26,
16193
- sx: {
16225
+ height: 22,
16226
+ sx: _objectSpread2(_objectSpread2({}, textSkeletonSx), {}, {
16194
16227
  mb: 0.5
16195
- }
16228
+ })
16196
16229
  }), /*#__PURE__*/jsx(Skeleton, {
16197
- variant: "text",
16230
+ variant: "rounded",
16198
16231
  width: 120,
16199
- height: 16,
16200
- sx: {
16232
+ height: 14,
16233
+ sx: _objectSpread2(_objectSpread2({}, textSkeletonSx), {}, {
16201
16234
  mb: 1
16202
- }
16235
+ })
16203
16236
  }), /*#__PURE__*/jsx(Skeleton, {
16204
- variant: "text",
16237
+ variant: "rounded",
16205
16238
  width: 140,
16206
- height: 36,
16207
- sx: {
16239
+ height: 30,
16240
+ sx: _objectSpread2(_objectSpread2({}, textSkeletonSx), {}, {
16208
16241
  mb: 2
16209
- }
16242
+ })
16210
16243
  }), /*#__PURE__*/jsx(Skeleton, {
16211
16244
  variant: "rounded",
16212
- width: "100%",
16213
- height: height - 150
16245
+ sx: {
16246
+ flex: 1,
16247
+ minHeight: 0,
16248
+ width: "100%"
16249
+ }
16214
16250
  })]
16215
16251
  });
16216
16252
  };
@@ -16220,32 +16256,30 @@ var PanelCardSkeleton = function PanelCardSkeleton(_ref3) {
16220
16256
  _ref3$sx = _ref3.sx,
16221
16257
  sx = _ref3$sx === void 0 ? {} : _ref3$sx;
16222
16258
  return /*#__PURE__*/jsxs(Box, {
16223
- sx: _objectSpread2({
16224
- bgcolor: "#fff",
16225
- borderRadius: 4,
16226
- border: PANEL_BORDER,
16227
- boxShadow: PANEL_SHADOW,
16228
- p: 3,
16259
+ sx: _objectSpread2(_objectSpread2({}, panelCardSx), {}, {
16229
16260
  height: height
16230
16261
  }, sx),
16231
16262
  children: [/*#__PURE__*/jsx(Skeleton, {
16232
- variant: "text",
16263
+ variant: "rounded",
16233
16264
  width: "50%",
16234
- height: 24,
16235
- sx: {
16265
+ height: 20,
16266
+ sx: _objectSpread2(_objectSpread2({}, textSkeletonSx), {}, {
16236
16267
  mb: 0.5
16237
- }
16268
+ })
16238
16269
  }), /*#__PURE__*/jsx(Skeleton, {
16239
- variant: "text",
16270
+ variant: "rounded",
16240
16271
  width: "35%",
16241
- height: 16,
16242
- sx: {
16243
- mb: 2.5
16244
- }
16272
+ height: 14,
16273
+ sx: _objectSpread2(_objectSpread2({}, textSkeletonSx), {}, {
16274
+ mb: 2
16275
+ })
16245
16276
  }), /*#__PURE__*/jsx(Skeleton, {
16246
16277
  variant: "rounded",
16247
- width: "100%",
16248
- height: height - 90
16278
+ sx: {
16279
+ flex: 1,
16280
+ minHeight: 0,
16281
+ width: "100%"
16282
+ }
16249
16283
  })]
16250
16284
  });
16251
16285
  };
@@ -16255,74 +16289,81 @@ var TableCardSkeleton = function TableCardSkeleton(_ref4) {
16255
16289
  _ref4$rowCount = _ref4.rowCount,
16256
16290
  rowCount = _ref4$rowCount === void 0 ? 5 : _ref4$rowCount;
16257
16291
  return /*#__PURE__*/jsxs(Box, {
16258
- sx: {
16259
- bgcolor: "#fff",
16260
- borderRadius: 4,
16261
- border: PANEL_BORDER,
16262
- boxShadow: PANEL_SHADOW,
16263
- p: 3,
16292
+ sx: _objectSpread2(_objectSpread2({}, panelCardSx), {}, {
16264
16293
  height: height
16265
- },
16294
+ }),
16266
16295
  children: [/*#__PURE__*/jsx(Skeleton, {
16267
- variant: "text",
16296
+ variant: "rounded",
16268
16297
  width: "40%",
16269
- height: 24,
16270
- sx: {
16298
+ height: 20,
16299
+ sx: _objectSpread2(_objectSpread2({}, textSkeletonSx), {}, {
16271
16300
  mb: 0.5
16272
- }
16301
+ })
16273
16302
  }), /*#__PURE__*/jsx(Skeleton, {
16274
- variant: "text",
16303
+ variant: "rounded",
16275
16304
  width: "30%",
16276
- height: 16,
16277
- sx: {
16278
- mb: 2.5
16279
- }
16305
+ height: 14,
16306
+ sx: _objectSpread2(_objectSpread2({}, textSkeletonSx), {}, {
16307
+ mb: 2
16308
+ })
16280
16309
  }), /*#__PURE__*/jsx(Skeleton, {
16281
- variant: "text",
16310
+ variant: "rounded",
16282
16311
  width: "100%",
16283
- height: 20,
16312
+ height: 18,
16313
+ sx: _objectSpread2(_objectSpread2({}, textSkeletonSx), {}, {
16314
+ mb: 1.5,
16315
+ flexShrink: 0
16316
+ })
16317
+ }), /*#__PURE__*/jsx(Box, {
16284
16318
  sx: {
16285
- mb: 1.5
16286
- }
16287
- }), Array.from({
16288
- length: rowCount
16289
- }).map(function (_, index) {
16290
- return /*#__PURE__*/jsxs(Box, {
16291
- sx: {
16292
- display: "flex",
16293
- gap: 2,
16294
- mb: 1.5,
16295
- alignItems: "center"
16296
- },
16297
- children: [/*#__PURE__*/jsx(Skeleton, {
16298
- variant: "circular",
16299
- width: 36,
16300
- height: 36
16301
- }), /*#__PURE__*/jsx(Skeleton, {
16302
- variant: "text",
16303
- width: "25%",
16304
- height: 20
16305
- }), /*#__PURE__*/jsx(Skeleton, {
16306
- variant: "text",
16307
- width: "15%",
16308
- height: 20
16309
- }), /*#__PURE__*/jsx(Skeleton, {
16310
- variant: "rounded",
16311
- width: "20%",
16312
- height: 8,
16319
+ flex: 1,
16320
+ minHeight: 0,
16321
+ overflow: "hidden"
16322
+ },
16323
+ children: Array.from({
16324
+ length: rowCount
16325
+ }).map(function (_, index) {
16326
+ return /*#__PURE__*/jsxs(Box, {
16313
16327
  sx: {
16314
- flex: 1
16315
- }
16316
- }), /*#__PURE__*/jsx(Skeleton, {
16317
- variant: "text",
16318
- width: "10%",
16319
- height: 20
16320
- }), /*#__PURE__*/jsx(Skeleton, {
16321
- variant: "text",
16322
- width: "12%",
16323
- height: 20
16324
- })]
16325
- }, index);
16328
+ display: "flex",
16329
+ gap: 1.5,
16330
+ mb: 1.5,
16331
+ alignItems: "center",
16332
+ minWidth: 0,
16333
+ "& > *": {
16334
+ flexShrink: 0
16335
+ }
16336
+ },
16337
+ children: [/*#__PURE__*/jsx(Skeleton, {
16338
+ variant: "circular",
16339
+ width: 36,
16340
+ height: 36
16341
+ }), /*#__PURE__*/jsx(Skeleton, {
16342
+ variant: "rounded",
16343
+ width: "22%",
16344
+ height: 16
16345
+ }), /*#__PURE__*/jsx(Skeleton, {
16346
+ variant: "rounded",
16347
+ width: "14%",
16348
+ height: 16
16349
+ }), /*#__PURE__*/jsx(Skeleton, {
16350
+ variant: "rounded",
16351
+ height: 8,
16352
+ sx: {
16353
+ flex: 1,
16354
+ minWidth: 0
16355
+ }
16356
+ }), /*#__PURE__*/jsx(Skeleton, {
16357
+ variant: "rounded",
16358
+ width: "10%",
16359
+ height: 16
16360
+ }), /*#__PURE__*/jsx(Skeleton, {
16361
+ variant: "rounded",
16362
+ width: "12%",
16363
+ height: 16
16364
+ })]
16365
+ }, index);
16366
+ })
16326
16367
  })]
16327
16368
  });
16328
16369
  };
@@ -16330,45 +16371,46 @@ var DonutCardSkeleton = function DonutCardSkeleton(_ref5) {
16330
16371
  var _ref5$height = _ref5.height,
16331
16372
  height = _ref5$height === void 0 ? 430 : _ref5$height;
16332
16373
  return /*#__PURE__*/jsxs(Box, {
16333
- sx: {
16334
- bgcolor: "#fff",
16335
- borderRadius: 4,
16336
- border: PANEL_BORDER,
16337
- boxShadow: PANEL_SHADOW,
16338
- p: 3,
16339
- height: height,
16340
- display: "flex",
16341
- flexDirection: "column"
16342
- },
16374
+ sx: _objectSpread2(_objectSpread2({}, panelCardSx), {}, {
16375
+ height: height
16376
+ }),
16343
16377
  children: [/*#__PURE__*/jsx(Skeleton, {
16344
- variant: "text",
16378
+ variant: "rounded",
16345
16379
  width: "45%",
16346
- height: 24,
16347
- sx: {
16380
+ height: 20,
16381
+ sx: _objectSpread2(_objectSpread2({}, textSkeletonSx), {}, {
16348
16382
  mb: 0.5
16349
- }
16383
+ })
16350
16384
  }), /*#__PURE__*/jsx(Skeleton, {
16351
- variant: "text",
16385
+ variant: "rounded",
16352
16386
  width: "35%",
16353
- height: 16,
16354
- sx: {
16387
+ height: 14,
16388
+ sx: _objectSpread2(_objectSpread2({}, textSkeletonSx), {}, {
16355
16389
  mb: 2
16356
- }
16390
+ })
16357
16391
  }), /*#__PURE__*/jsxs(Box, {
16358
16392
  sx: {
16359
16393
  display: "flex",
16360
16394
  flex: 1,
16395
+ minHeight: 0,
16361
16396
  alignItems: "center",
16362
16397
  justifyContent: "center",
16363
- gap: 4
16398
+ gap: 2,
16399
+ overflow: "hidden"
16364
16400
  },
16365
16401
  children: [/*#__PURE__*/jsx(Skeleton, {
16366
16402
  variant: "circular",
16367
- width: 160,
16368
- height: 160
16403
+ sx: {
16404
+ width: 140,
16405
+ height: 140,
16406
+ flexShrink: 0,
16407
+ maxWidth: "45%"
16408
+ }
16369
16409
  }), /*#__PURE__*/jsx(Box, {
16370
16410
  sx: {
16371
- flex: 1
16411
+ flex: 1,
16412
+ minWidth: 0,
16413
+ overflow: "hidden"
16372
16414
  },
16373
16415
  children: Array.from({
16374
16416
  length: 4
@@ -16378,16 +16420,23 @@ var DonutCardSkeleton = function DonutCardSkeleton(_ref5) {
16378
16420
  display: "flex",
16379
16421
  alignItems: "center",
16380
16422
  gap: 1,
16381
- mb: 1.5
16423
+ mb: 1.5,
16424
+ minWidth: 0
16382
16425
  },
16383
16426
  children: [/*#__PURE__*/jsx(Skeleton, {
16384
16427
  variant: "circular",
16385
16428
  width: 10,
16386
- height: 10
16429
+ height: 10,
16430
+ sx: {
16431
+ flexShrink: 0
16432
+ }
16387
16433
  }), /*#__PURE__*/jsx(Skeleton, {
16388
- variant: "text",
16389
- width: "60%",
16390
- height: 18
16434
+ variant: "rounded",
16435
+ width: "75%",
16436
+ height: 14,
16437
+ sx: {
16438
+ minWidth: 0
16439
+ }
16391
16440
  })]
16392
16441
  }, index);
16393
16442
  })