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