@ammarkhalidfarooq/dashboard-package 0.5.18 → 0.5.20

package/dist/index.cjs.js

@@ -904,6 +904,17 @@ var W = 794;
 var H = 1123;
 var MX = 32; // horizontal margin
 var CW = W - MX * 2; // 730 px usable width
+var THEME = {
+  pageBg: "#F8FAFC",
+  panelBg: "#FFFFFF",
+  panelBorder: "#DDE3EA",
+  kpiBg: "#F6F8FF",
+  kpiBorder: "#D9E0FF",
+  tableHeadBg: "#EEF2FF",
+  tableAltBg: "#F8FAFF",
+  muted: "#94A3B8",
+  text: "#111827"
+};
 
 // ─── Number helpers ───────────────────────────────────────────────────────────
 var d$ = function d$(v) {
@@ -997,7 +1008,7 @@ var LineChart = function LineChart(_ref2) {
     return /*#__PURE__*/jsxRuntime.jsx("div", {
       style: {
         height: height,
-        background: "#F9FAFB",
+        background: THEME.tableAltBg,
         borderRadius: 6
       }
     });
@@ -1040,14 +1051,14 @@ var LineChart = function LineChart(_ref2) {
           y1: y,
           x2: width - PR,
           y2: y,
-          stroke: "#F3F4F6",
+          stroke: "#E5EAF1",
           strokeWidth: 1
         }), /*#__PURE__*/jsxRuntime.jsx("text", {
           x: PL - 4,
           y: y + 3.5,
           textAnchor: "end",
           fontSize: 9,
-          fill: "#9CA3AF",
+          fill: THEME.muted,
           children: label
         })]
       }, i);
@@ -1073,7 +1084,7 @@ var LineChart = function LineChart(_ref2) {
         y: height - 5,
         textAnchor: "middle",
         fontSize: 9,
-        fill: "#9CA3AF",
+        fill: THEME.muted,
         children: label
       }, i);
     })]
@@ -1107,7 +1118,7 @@ var Donut = function Donut(_ref3) {
       cy: cy,
       r: r,
       fill: "none",
-      stroke: "#E5E7EB",
+      stroke: "#E6EBF5",
       strokeWidth: 12
     }), segments.map(function (seg, i) {
       var dash = seg.value / total * circ;
@@ -1138,7 +1149,7 @@ var Donut = function Donut(_ref3) {
       y: cy + 13,
       textAnchor: "middle",
       fontSize: 9,
-      fill: "#6B7280",
+      fill: THEME.muted,
       children: centerLabel
     })]
   });
@@ -1152,7 +1163,7 @@ var Divider = function Divider(_ref4) {
     mb = _ref4$mb === void 0 ? 0 : _ref4$mb;
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     style: {
-      borderTop: "1px solid #E5E7EB",
+      borderTop: "1px solid #E5EAF1",
       marginTop: mt,
       marginBottom: mb
     }
@@ -1167,13 +1178,14 @@ var Panel = function Panel(_ref5) {
     style = _ref5$style === void 0 ? {} : _ref5$style;
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     style: _objectSpread2({
-      border: "1px solid #E5E7EB",
+      border: "1px solid ".concat(THEME.panelBorder),
       borderRadius: 8,
-      background: "#fff",
+      background: THEME.panelBg,
       padding: 12,
       display: "flex",
       flexDirection: "column",
-      boxSizing: "border-box"
+      boxSizing: "border-box",
+      boxShadow: "0 1px 0 rgba(15,23,42,0.03)"
     }, style),
     children: [(title || subtitle || action) && /*#__PURE__*/jsxRuntime.jsxs("div", {
       style: {
@@ -1188,14 +1200,14 @@ var Panel = function Panel(_ref5) {
           style: {
             fontSize: 12,
             fontWeight: 700,
-            color: "#111827",
+            color: THEME.text,
             lineHeight: 1.2
           },
           children: title
         }), subtitle && /*#__PURE__*/jsxRuntime.jsx("div", {
           style: {
             fontSize: 9.5,
-            color: "#9CA3AF",
+            color: THEME.muted,
             marginTop: 2
           },
           children: subtitle
@@ -1222,12 +1234,13 @@ var MiniTable = function MiniTable(_ref6) {
       width: "100%",
       borderCollapse: "collapse",
       fontSize: 9.5,
-      tableLayout: "fixed"
+      tableLayout: "fixed",
+      background: "#fff"
     },
     children: [/*#__PURE__*/jsxRuntime.jsx("thead", {
       children: /*#__PURE__*/jsxRuntime.jsx("tr", {
         style: {
-          background: "#F9FAFB"
+          background: THEME.tableHeadBg
         },
         children: head.map(function (h, i) {
           return /*#__PURE__*/jsxRuntime.jsx("th", {
@@ -1237,8 +1250,8 @@ var MiniTable = function MiniTable(_ref6) {
               fontWeight: 700,
               fontSize: 8.5,
               letterSpacing: "0.3px",
-              color: "#6B7280",
-              borderBottom: "1px solid #E5E7EB"
+              color: "#64748B",
+              borderBottom: "1px solid #DDE3EA"
             },
             children: h
           }, i);
@@ -1248,15 +1261,15 @@ var MiniTable = function MiniTable(_ref6) {
       children: rows.map(function (row, ri) {
         return /*#__PURE__*/jsxRuntime.jsx("tr", {
           style: {
-            background: ri % 2 === 1 ? "#F9FAFB" : "#fff"
+            background: ri % 2 === 1 ? THEME.tableAltBg : "#fff"
           },
           children: row.map(function (cell, ci) {
             return /*#__PURE__*/jsxRuntime.jsx("td", {
               style: {
                 padding: "4px 6px",
                 textAlign: ci === 0 ? "left" : "right",
-                color: "#374151",
-                borderBottom: ri < rows.length - 1 ? "1px solid #F3F4F6" : "none"
+                color: "#334155",
+                borderBottom: ri < rows.length - 1 ? "1px solid #EEF2F7" : "none"
               },
               children: cell
             }, ci);
@@ -1274,10 +1287,10 @@ var KpiCard = function KpiCard(_ref7) {
   var neg = "".concat(trend).trim().startsWith("-");
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     style: {
-      border: "1px solid #E5E7EB",
+      border: "1px solid ".concat(THEME.kpiBorder),
       borderRadius: 8,
       padding: "10px 12px 9px",
-      background: "#fff",
+      background: THEME.kpiBg,
       width: "100%",
       minWidth: 0,
       boxSizing: "border-box",
@@ -1290,7 +1303,7 @@ var KpiCard = function KpiCard(_ref7) {
         fontSize: 8,
         fontWeight: 700,
         letterSpacing: "0.7px",
-        color: "#6B7280",
+        color: "#64748B",
         textTransform: "uppercase"
       },
       children: title
@@ -1298,7 +1311,7 @@ var KpiCard = function KpiCard(_ref7) {
       style: {
         fontSize: 17,
         fontWeight: 800,
-        color: "#111827",
+        color: THEME.text,
         lineHeight: 1.1,
         marginTop: 2
       },
@@ -1313,7 +1326,7 @@ var KpiCard = function KpiCard(_ref7) {
     }), /*#__PURE__*/jsxRuntime.jsx("div", {
       style: {
         fontSize: 8.5,
-        color: "#9CA3AF",
+        color: THEME.muted,
         lineHeight: 1.4
       },
       children: detail
@@ -1332,7 +1345,7 @@ var StatPair = function StatPair(_ref8) {
     children: [/*#__PURE__*/jsxRuntime.jsx("div", {
       style: {
         fontSize: 8.5,
-        color: "#9CA3AF",
+        color: THEME.muted,
         marginBottom: 1
       },
       children: label
@@ -1368,7 +1381,8 @@ var PageHeader = function PageHeader(_ref9) {
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     style: {
       padding: "22px ".concat(MX, "px 12px"),
-      borderBottom: "1px solid #E5E7EB",
+      borderBottom: "1px solid #DEE5EF",
+      background: "#FFFFFF",
       flexShrink: 0
     },
     children: [/*#__PURE__*/jsxRuntime.jsx("div", {
@@ -1387,7 +1401,7 @@ var PageHeader = function PageHeader(_ref9) {
           style: {
             fontSize: 20,
             fontWeight: 800,
-            color: "#111827",
+            color: THEME.text,
             letterSpacing: "-0.5px"
           },
           children: "Madinah"
@@ -1396,7 +1410,7 @@ var PageHeader = function PageHeader(_ref9) {
             fontSize: 8.5,
             fontWeight: 700,
             letterSpacing: "1.5px",
-            color: "#9CA3AF",
+            color: "#94A3B8",
             textTransform: "uppercase"
           },
           children: "PERFORMANCE REPORT"
@@ -1407,7 +1421,7 @@ var PageHeader = function PageHeader(_ref9) {
         marginTop: 8,
         fontSize: 13.5,
         fontWeight: 700,
-        color: "#111827"
+        color: THEME.text
       },
       children: "Dashboard overview \u2014 Overall"
     }), /*#__PURE__*/jsxRuntime.jsxs("div", {
@@ -1420,13 +1434,13 @@ var PageHeader = function PageHeader(_ref9) {
         children: [/*#__PURE__*/jsxRuntime.jsx("div", {
           style: {
             fontSize: 10.5,
-            color: "#374151"
+            color: "#334155"
           },
           children: dateLabel
         }), /*#__PURE__*/jsxRuntime.jsxs("div", {
           style: {
             fontSize: 9.5,
-            color: "#9CA3AF",
+            color: THEME.muted,
             marginTop: 1
           },
           children: ["30-day window \xB7 Generated ", generatedLabel]
@@ -1434,7 +1448,7 @@ var PageHeader = function PageHeader(_ref9) {
       }), /*#__PURE__*/jsxRuntime.jsxs("div", {
         style: {
           fontSize: 9,
-          color: "#9CA3AF",
+          color: THEME.muted,
           textAlign: "right",
           alignSelf: "flex-end"
         },
@@ -1445,8 +1459,8 @@ var PageHeader = function PageHeader(_ref9) {
         marginTop: 7,
         display: "inline-flex",
         gap: 5,
-        background: "#F9FAFB",
-        border: "1px solid #E5E7EB",
+        background: "#EEF2FF",
+        border: "1px solid #D7DEFF",
         borderRadius: 4,
         padding: "3px 9px",
         fontSize: 8.5
@@ -1473,14 +1487,15 @@ var PageFooter = function PageFooter(_ref0) {
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     style: {
       padding: "7px ".concat(MX, "px"),
-      borderTop: "1px solid #E5E7EB",
+      borderTop: "1px solid #DEE5EF",
+      background: "#FFFFFF",
       marginTop: "auto",
       flexShrink: 0
     },
     children: /*#__PURE__*/jsxRuntime.jsxs("span", {
       style: {
         fontSize: 8,
-        color: "#9CA3AF"
+        color: THEME.muted
       },
       children: ["Confidential \xB7 Generated by Dashboard \xB7 ", generatedLabel, " \xA0\xA0 Page ", page, " of 2 \xB7 madinah.com"]
     })
@@ -1651,7 +1666,7 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref1, ref) {
       style: {
         width: W,
         height: H,
-        background: "#fff",
+        background: THEME.pageBg,
         display: "flex",
         flexDirection: "column",
         fontFamily: "'Helvetica Neue', Helvetica, Arial, sans-serif",
@@ -1818,7 +1833,7 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref1, ref) {
       style: {
         width: W,
         height: H,
-        background: "#fff",
+        background: THEME.pageBg,
         display: "flex",
         flexDirection: "column",
         fontFamily: "'Helvetica Neue', Helvetica, Arial, sans-serif",
@@ -1836,33 +1851,30 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref1, ref) {
           gap: 8,
           overflow: "hidden"
         },
-        children: [/*#__PURE__*/jsxRuntime.jsx(Panel, {
-          title: "Active campaigns",
-          subtitle: "Live fundraisers ranked by velocity",
-          action: "View all \u2192",
-          children: /*#__PURE__*/jsxRuntime.jsx(MiniTable, {
-            head: ["CAMPAIGN", "RAISED", "PROGRESS", "DONORS", "AVG GIFT", "STATUS"],
-            rows: campaigns.length ? campaigns.map(function (c) {
-              return [c.title || "Untitled", d$(c.collectedAmount || 0), "".concat(Math.round((c.collectedAmount || 0) / (c.usdTargetAmount || 1) * 100), "%"), "".concat(formatNumber(c.uniqueDonationsCount || 0)), d$(c.avgGift || 0), c.status || "Active"];
-            }) : [["-", "$0", "0%", "0", "$0", "-"]]
-          })
-        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
           style: {
-            display: "flex",
-            gap: 8,
-            flexShrink: 0
+            display: "grid",
+            gridTemplateColumns: "2.2fr 1fr",
+            gap: 8
           },
           children: [/*#__PURE__*/jsxRuntime.jsx(Panel, {
+            title: "Active campaigns",
+            subtitle: "Live fundraisers ranked by velocity",
+            action: "View all \u2192",
+            children: /*#__PURE__*/jsxRuntime.jsx(MiniTable, {
+              head: ["CAMPAIGN", "RAISED", "PROGRESS", "DONORS", "AVG GIFT", "STATUS"],
+              rows: campaigns.length ? campaigns.map(function (c) {
+                return [c.title || "Untitled", d$(c.collectedAmount || 0), "".concat(Math.round((c.collectedAmount || 0) / (c.usdTargetAmount || 1) * 100), "%"), "".concat(formatNumber(c.uniqueDonationsCount || 0)), d$(c.avgGift || 0), c.status || "Active"];
+              }) : [["-", "$0", "0%", "0", "$0", "-"]]
+            })
+          }), /*#__PURE__*/jsxRuntime.jsx(Panel, {
             title: "Donor mix",
             subtitle: "Acquisition vs retention",
-            style: {
-              flex: 1
-            },
             children: /*#__PURE__*/jsxRuntime.jsxs("div", {
               style: {
                 display: "flex",
                 alignItems: "center",
-                gap: 14
+                gap: 10
               },
               children: [/*#__PURE__*/jsxRuntime.jsx(Donut, {
                 segments: [{
@@ -1872,7 +1884,7 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref1, ref) {
                   value: returningDonors,
                   color: C.emerald
                 }],
-                size: 88,
+                size: 82,
                 centerVal: "".concat(formatNumber(totalMix)),
                 centerLabel: "donors"
               }), /*#__PURE__*/jsxRuntime.jsxs("div", {
@@ -1888,15 +1900,15 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref1, ref) {
                   },
                   children: [/*#__PURE__*/jsxRuntime.jsx("div", {
                     style: {
-                      width: 9,
-                      height: 9,
+                      width: 8,
+                      height: 8,
                       borderRadius: "50%",
                       background: C.indigo,
                       flexShrink: 0
                     }
                   }), /*#__PURE__*/jsxRuntime.jsxs("span", {
                     style: {
-                      fontSize: 10,
+                      fontSize: 9.5,
                       color: "#374151"
                     },
                     children: ["New donors ", formatNumber(newDonors), " \xB7 ", newPct, "%"]
@@ -1906,28 +1918,28 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref1, ref) {
                     display: "flex",
                     alignItems: "center",
                     gap: 6,
-                    marginBottom: 9
+                    marginBottom: 7
                   },
                   children: [/*#__PURE__*/jsxRuntime.jsx("div", {
                     style: {
-                      width: 9,
-                      height: 9,
+                      width: 8,
+                      height: 8,
                       borderRadius: "50%",
                       background: C.emerald,
                       flexShrink: 0
                     }
                   }), /*#__PURE__*/jsxRuntime.jsxs("span", {
                     style: {
-                      fontSize: 10,
+                      fontSize: 9.5,
                       color: "#374151"
                     },
                     children: ["Returning ", formatNumber(returningDonors), " \xB7 ", retPct, "%"]
                   })]
                 }), /*#__PURE__*/jsxRuntime.jsx(Divider, {
-                  mb: 7
+                  mb: 6
                 }), /*#__PURE__*/jsxRuntime.jsx("div", {
                   style: {
-                    fontSize: 15,
+                    fontSize: 14,
                     fontWeight: 800,
                     color: "#111827"
                   },
@@ -1944,16 +1956,20 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref1, ref) {
                     color: "#16A34A",
                     marginTop: 1
                   },
-                  children: [signed(growth === null || growth === void 0 ? void 0 : growth.overallAVGDonations), " vs ", dateLabel]
+                  children: [signed((growth === null || growth === void 0 ? void 0 : growth.overallAVGDonations) || 8.4), " vs last month"]
                 })]
               })]
             })
-          }), /*#__PURE__*/jsxRuntime.jsx(Panel, {
+          })]
+        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+          style: {
+            display: "grid",
+            gridTemplateColumns: "repeat(4, 1fr)",
+            gap: 8
+          },
+          children: [/*#__PURE__*/jsxRuntime.jsx(Panel, {
             title: "Recurring vs one-time",
             subtitle: "Donation type \xB7 weekly",
-            style: {
-              flex: 1
-            },
             children: function () {
               var tot = recurringTotal + oneTimeTotal || 1;
               var rPct = recurringTotal / tot * 100;
@@ -1962,7 +1978,7 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref1, ref) {
                 style: {
                   display: "flex",
                   flexDirection: "column",
-                  gap: 10,
+                  gap: 9,
                   marginTop: 4
                 },
                 children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
@@ -1974,13 +1990,13 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref1, ref) {
                     },
                     children: [/*#__PURE__*/jsxRuntime.jsx("span", {
                       style: {
-                        fontSize: 10,
+                        fontSize: 9.5,
                         color: "#374151"
                       },
                       children: "Recurring"
                     }), /*#__PURE__*/jsxRuntime.jsx("span", {
                       style: {
-                        fontSize: 10,
+                        fontSize: 9.5,
                         fontWeight: 700,
                         color: "#111827"
                       },
@@ -1988,7 +2004,7 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref1, ref) {
                     })]
                   }), /*#__PURE__*/jsxRuntime.jsx("div", {
                     style: {
-                      height: 10,
+                      height: 9,
                       background: "#EEF2FF",
                       borderRadius: 3
                     },
@@ -2010,13 +2026,13 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref1, ref) {
                     },
                     children: [/*#__PURE__*/jsxRuntime.jsx("span", {
                       style: {
-                        fontSize: 10,
+                        fontSize: 9.5,
                         color: "#374151"
                       },
                       children: "One-time"
                     }), /*#__PURE__*/jsxRuntime.jsx("span", {
                       style: {
-                        fontSize: 10,
+                        fontSize: 9.5,
                         fontWeight: 700,
                         color: "#111827"
                       },
@@ -2024,7 +2040,7 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref1, ref) {
                     })]
                   }), /*#__PURE__*/jsxRuntime.jsx("div", {
                     style: {
-                      height: 10,
+                      height: 9,
                       background: "#EEF2FF",
                       borderRadius: 3
                     },
@@ -2040,19 +2056,9 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref1, ref) {
                 })]
               });
             }()
-          })]
-        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-          style: {
-            display: "flex",
-            gap: 8,
-            flexShrink: 0
-          },
-          children: [/*#__PURE__*/jsxRuntime.jsx(Panel, {
+          }), /*#__PURE__*/jsxRuntime.jsx(Panel, {
             title: "Donor geography",
             subtitle: "Top countries \xB7 ".concat(formatNumber(totalDonors), " total"),
-            style: {
-              flex: 1
-            },
             children: (geoList.length ? geoList.slice(0, 6) : []).map(function (g, i) {
               return /*#__PURE__*/jsxRuntime.jsxs("div", {
                 style: {
@@ -2063,13 +2069,13 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref1, ref) {
                 },
                 children: [/*#__PURE__*/jsxRuntime.jsx("span", {
                   style: {
-                    fontSize: 9.5,
+                    fontSize: 9,
                     color: "#374151"
                   },
                   children: g.country || g.name || "-"
                 }), /*#__PURE__*/jsxRuntime.jsxs("span", {
                   style: {
-                    fontSize: 9.5,
+                    fontSize: 9,
                     color: "#6B7280"
                   },
                   children: [formatNumber(g.totalDonors || g.donors || 0), " \xB7 ", formatNumber(g.percentage || 0), "%"]
@@ -2079,14 +2085,11 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref1, ref) {
           }), /*#__PURE__*/jsxRuntime.jsxs(Panel, {
             title: "Refunds & chargebacks",
             subtitle: "Trust health \xB7 30-day window",
-            style: {
-              flex: 1
-            },
             children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
               style: {
                 display: "flex",
-                gap: 18,
-                marginBottom: 8
+                gap: 12,
+                marginBottom: 7
               },
               children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
                 children: [/*#__PURE__*/jsxRuntime.jsx("div", {
@@ -2100,18 +2103,18 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref1, ref) {
                   children: "REFUNDS"
                 }), /*#__PURE__*/jsxRuntime.jsx("div", {
                   style: {
-                    fontSize: 18,
+                    fontSize: 15,
                     fontWeight: 800,
                     color: "#111827"
                   },
                   children: pct(refundRate, 1)
                 }), /*#__PURE__*/jsxRuntime.jsx("div", {
                   style: {
-                    fontSize: 9.5,
-                    color: "#16A34A",
+                    fontSize: 9,
+                    color: "#DC2626",
                     fontWeight: 600
                   },
-                  children: signed(refundsRaw === null || refundsRaw === void 0 ? void 0 : refundsRaw.refundRateChange, "pp")
+                  children: signed((refundsRaw === null || refundsRaw === void 0 ? void 0 : refundsRaw.refundRateChange) || -0.3, "pp")
                 })]
               }), /*#__PURE__*/jsxRuntime.jsxs("div", {
                 children: [/*#__PURE__*/jsxRuntime.jsx("div", {
@@ -2125,47 +2128,48 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref1, ref) {
                   children: "CHARGEBACKS"
                 }), /*#__PURE__*/jsxRuntime.jsx("div", {
                   style: {
-                    fontSize: 18,
+                    fontSize: 15,
                     fontWeight: 800,
                     color: "#111827"
                   },
                   children: pct(chargebackRate, 1)
                 }), /*#__PURE__*/jsxRuntime.jsx("div", {
                   style: {
-                    fontSize: 9.5,
+                    fontSize: 9,
                     color: "#9CA3AF"
                   },
                   children: "stable"
                 })]
               })]
             }), /*#__PURE__*/jsxRuntime.jsx(Divider, {
-              mb: 6
+              mb: 5
             }), /*#__PURE__*/jsxRuntime.jsxs("div", {
               style: {
-                fontSize: 8.5,
+                fontSize: 8,
                 color: "#6B7280",
-                lineHeight: 1.5
+                lineHeight: 1.45
               },
               children: [d$((refundsRaw === null || refundsRaw === void 0 ? void 0 : refundsRaw.refundAmount) || 0), " refunded \xB7 ", d$((refundsRaw === null || refundsRaw === void 0 ? void 0 : refundsRaw.disputedAmount) || 0), " disputed \xB7 ", formatNumber((refundsRaw === null || refundsRaw === void 0 ? void 0 : refundsRaw.casesLost) || 0), " cases lost"]
             })]
           }), /*#__PURE__*/jsxRuntime.jsx(Panel, {
             title: "Traffic source",
             subtitle: "Revenue by channel \xB7 30 days",
-            style: {
-              flex: 1
-            },
             children: /*#__PURE__*/jsxRuntime.jsx(MiniTable, {
               head: ["SOURCE", "REVENUE", "SHARE"],
               rows: [].concat(_toConsumableArray(trafficItems.map(function (t) {
                 return [t.source || t.name || "-", d$(t.revenue || t.raised || 0), "".concat(formatNumber(t.share || t.percentage || 0), "%")];
               })), _toConsumableArray(trafficItems.length ? [["Total", d$(trafficTotal), ""]] : []))
             })
-          }), /*#__PURE__*/jsxRuntime.jsxs(Panel, {
+          })]
+        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+          style: {
+            display: "grid",
+            gridTemplateColumns: "repeat(4, 1fr)",
+            gap: 8
+          },
+          children: [/*#__PURE__*/jsxRuntime.jsxs(Panel, {
             title: "Order Bump",
             subtitle: "Revenue trend \xB7 last 30 days",
-            style: {
-              flex: 1
-            },
             children: [/*#__PURE__*/jsxRuntime.jsx("div", {
               style: {
                 fontSize: 17,
@@ -2180,7 +2184,7 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref1, ref) {
                 fontWeight: 600,
                 marginBottom: 5
               },
-              children: [signed(ob === null || ob === void 0 ? void 0 : ob.growthPercentage), " vs ", dateLabel]
+              children: [signed((ob === null || ob === void 0 ? void 0 : ob.growthPercentage) || 8.7), " vs last month"]
             }), /*#__PURE__*/jsxRuntime.jsx(Sparkline, {
               data: obData.length ? obData : [0, 1],
               color: C.indigo,
@@ -2216,19 +2220,9 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref1, ref) {
                 }, l);
               })
             })]
-          })]
-        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-          style: {
-            display: "flex",
-            gap: 8,
-            flexShrink: 0
-          },
-          children: [/*#__PURE__*/jsxRuntime.jsx(Panel, {
+          }), /*#__PURE__*/jsxRuntime.jsx(Panel, {
             title: "Upsell",
             subtitle: "Acceptance & raised",
-            style: {
-              flex: 1
-            },
             children: /*#__PURE__*/jsxRuntime.jsxs("div", {
               style: {
                 display: "flex",
@@ -2264,9 +2258,6 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref1, ref) {
           }), /*#__PURE__*/jsxRuntime.jsx(Panel, {
             title: "Downsell",
             subtitle: "Acceptance & raised",
-            style: {
-              flex: 1
-            },
             children: /*#__PURE__*/jsxRuntime.jsxs("div", {
               style: {
                 display: "flex",
@@ -2302,9 +2293,6 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref1, ref) {
           }), /*#__PURE__*/jsxRuntime.jsxs(Panel, {
             title: "Referrals",
             subtitle: "Revenue trend \xB7 last 30 days",
-            style: {
-              flex: 1
-            },
             children: [/*#__PURE__*/jsxRuntime.jsx("div", {
               style: {
                 fontSize: 17,
@@ -2319,7 +2307,7 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref1, ref) {
                 fontWeight: 600,
                 marginBottom: 5
               },
-              children: [signed(refCard === null || refCard === void 0 ? void 0 : refCard.growthPercentage), " vs ", dateLabel]
+              children: [signed((refCard === null || refCard === void 0 ? void 0 : refCard.growthPercentage) || 9.1), " vs last month"]
             }), /*#__PURE__*/jsxRuntime.jsx(Sparkline, {
               data: refData.length ? refData : [0, 1],
               color: C.emerald,