@ammarkhalidfarooq/dashboard-package 0.3.6 → 0.3.8

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 +178 -255
  2. package/dist/index.cjs.js.map +1 -1
  3. package/dist/index.es.js +180 -257
  4. package/dist/index.es.js.map +1 -1
  5. package/package.json +1 -1
package/dist/index.cjs.js CHANGED
@@ -654,18 +654,16 @@ var DisplayCard = function DisplayCard(_ref) {
654
654
  display: "flex",
655
655
  justifyContent: "space-between",
656
656
  alignItems: "center",
657
- boxShadow: "0 4px 24px rgba(0,0,0,0.06)",
657
+ boxShadow: "rgba(0, 0, 0, 0.06) 0px 4px 15px 0px",
658
+ // boxShadow: "0 4px 24px rgba(0,0,0,0.06)",
658
659
  // padding: "16px 16px 16px 18px",
659
660
  py: "10px",
660
661
  px: "16px",
661
662
  cursor: "pointer",
662
663
  bgcolor: "#fff",
663
- border: "2px solid #f0f0f0",
664
- transition: "all 0.3s ease",
665
- ":hover": {
666
- border: "1px solid rgb(99, 99, 230)"
667
- // transform: "translateY(-2px)",
668
- }
664
+ border: isActive ? "1px solid rgb(99, 99, 230)" : "none",
665
+ // border: "2px solid #f0f0f0",
666
+ transition: "all 0.3s ease"
669
667
  }, sx),
670
668
  children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
671
669
  sx: {
@@ -1963,8 +1961,11 @@ var OrganicSection = function OrganicSection(_ref) {
1963
1961
  },
1964
1962
  isActive: activeMetric === title,
1965
1963
  sx: {
1966
- flex: 1,
1967
- border: activeMetric === title ? "2px solid rgb(99, 99, 230)" : "2px solid #f0f0f0"
1964
+ flex: 1
1965
+ // border:
1966
+ // activeMetric === title
1967
+ // ? "2px solid rgb(99, 99, 230)"
1968
+ // : "2px solid #f0f0f0",
1968
1969
  }
1969
1970
  }, title);
1970
1971
  })
@@ -1984,12 +1985,12 @@ var OrganicSection = function OrganicSection(_ref) {
1984
1985
  }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
1985
1986
  item: true,
1986
1987
  xs: 12,
1987
- md: 8,
1988
+ md: 6,
1988
1989
  children: /*#__PURE__*/jsxRuntime.jsx(LandingPagesCard, {})
1989
1990
  }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
1990
1991
  item: true,
1991
1992
  xs: 12,
1992
- md: 4,
1993
+ md: 6,
1993
1994
  children: /*#__PURE__*/jsxRuntime.jsx(DonorMixCard, {
1994
1995
  title: "Spend allocation",
1995
1996
  subtitle: "Where $80.3K went this month",
@@ -2122,8 +2123,11 @@ var EmailSection = function EmailSection() {
2122
2123
  },
2123
2124
  isActive: activeMetric === title,
2124
2125
  sx: {
2125
- flex: 1,
2126
- border: activeMetric === title ? "2px solid rgb(99, 99, 230)" : "2px solid #f0f0f0"
2126
+ flex: 1
2127
+ // border:
2128
+ // activeMetric === title
2129
+ // ? "2px solid rgb(99, 99, 230)"
2130
+ // : "2px solid #f0f0f0",
2127
2131
  }
2128
2132
  });
2129
2133
  };
@@ -2544,7 +2548,8 @@ var PerformanceSection = function PerformanceSection(_ref) {
2544
2548
  return /*#__PURE__*/jsxRuntime.jsx(RenderChartCard, {
2545
2549
  item: item,
2546
2550
  index: index,
2547
- md: 6
2551
+ md: 6,
2552
+ isPremium: true
2548
2553
  });
2549
2554
  })
2550
2555
  }), /*#__PURE__*/jsxRuntime.jsx(Grid, {
@@ -2557,7 +2562,8 @@ var PerformanceSection = function PerformanceSection(_ref) {
2557
2562
  return /*#__PURE__*/jsxRuntime.jsx(RenderChartCard, {
2558
2563
  item: item,
2559
2564
  index: index,
2560
- md: 6
2565
+ md: 6,
2566
+ isPremium: true
2561
2567
  });
2562
2568
  })
2563
2569
  }), /*#__PURE__*/jsxRuntime.jsx(Grid, {
@@ -2570,7 +2576,8 @@ var PerformanceSection = function PerformanceSection(_ref) {
2570
2576
  return /*#__PURE__*/jsxRuntime.jsx(RenderChartCard, {
2571
2577
  item: item,
2572
2578
  index: index,
2573
- md: 6
2579
+ md: 6,
2580
+ isPremium: true
2574
2581
  });
2575
2582
  })
2576
2583
  }), /*#__PURE__*/jsxRuntime.jsx(Grid, {
@@ -2583,7 +2590,8 @@ var PerformanceSection = function PerformanceSection(_ref) {
2583
2590
  return /*#__PURE__*/jsxRuntime.jsx(RenderChartCard, {
2584
2591
  item: item,
2585
2592
  index: index,
2586
- md: 12
2593
+ md: 12,
2594
+ isPremium: true
2587
2595
  });
2588
2596
  })
2589
2597
  })]
@@ -2614,165 +2622,88 @@ var data$1 = [{
2614
2622
  var RecurringDonationAmounts = function RecurringDonationAmounts() {
2615
2623
  return /*#__PURE__*/jsxRuntime.jsx(material.Card, {
2616
2624
  sx: {
2617
- width: '100%',
2618
- display: 'flex',
2619
- flexDirection: 'column',
2620
- boxShadow: '0 4px 24px rgba(0,0,0,0.06)',
2625
+ width: "100%",
2626
+ display: "flex",
2627
+ flexDirection: "column",
2628
+ boxShadow: "0 4px 24px rgba(0,0,0,0.06)",
2621
2629
  borderRadius: 4,
2622
- border: '1px solid #f0f0f0',
2623
- height: '100%'
2630
+ border: "1px solid #f0f0f0",
2631
+ height: "100%"
2624
2632
  },
2625
2633
  children: /*#__PURE__*/jsxRuntime.jsxs(material.CardContent, {
2626
2634
  sx: {
2627
- p: 3,
2628
- '&:last-child': {
2629
- pb: 3
2630
- }
2635
+ p: 3
2631
2636
  },
2632
- children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
2637
+ children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
2638
+ variant: "subtitle2",
2633
2639
  sx: {
2634
- display: 'flex',
2635
- alignItems: 'center',
2636
- mb: 3
2640
+ color: "#000000",
2641
+ fontWeight: 700,
2642
+ fontSize: "16px",
2643
+ mb: 0.5,
2644
+ textAlign: "left"
2637
2645
  },
2638
- children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
2639
- variant: "subtitle2",
2640
- sx: {
2641
- fontWeight: 600,
2642
- color: '#000000',
2643
- textTransform: 'uppercase',
2644
- letterSpacing: '0.5px'
2645
- },
2646
- children: "Recurring donation amounts"
2647
- }), /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.InfoOutlined, {
2648
- sx: {
2649
- ml: 1,
2650
- fontSize: '1rem',
2651
- color: '#9e9e9e'
2652
- }
2653
- })]
2654
- }), /*#__PURE__*/jsxRuntime.jsxs(material.Grid, {
2655
- container: true,
2646
+ children: "Recurring donation amounts"
2647
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
2656
2648
  sx: {
2657
- mb: 1,
2658
- px: 1
2649
+ color: "rgba(0, 0, 0, 0.4)",
2650
+ fontSize: "13px",
2651
+ mb: 3,
2652
+ textAlign: "left"
2659
2653
  },
2660
- children: [/*#__PURE__*/jsxRuntime.jsx(material.Grid, {
2661
- item: true,
2662
- xs: 4,
2663
- children: /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
2664
- variant: "caption",
2665
- sx: {
2666
- color: '#9e9e9e',
2667
- fontWeight: 600,
2668
- alignItems: 'left'
2669
- },
2670
- children: "Amount"
2671
- })
2672
- }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
2673
- item: true,
2674
- xs: 4,
2675
- sx: {
2676
- textAlign: 'right'
2677
- },
2678
- children: /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
2679
- variant: "caption",
2680
- sx: {
2681
- color: '#9e9e9e',
2682
- fontWeight: 600
2683
- },
2684
- children: "Plans"
2685
- })
2686
- }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
2687
- item: true,
2688
- xs: 4,
2689
- sx: {
2690
- textAlign: 'right'
2691
- },
2692
- children: /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
2693
- variant: "caption",
2694
- sx: {
2695
- color: '#9e9e9e',
2696
- fontWeight: 600
2697
- },
2698
- children: "Shares"
2699
- })
2700
- })]
2701
- }), /*#__PURE__*/jsxRuntime.jsx(material.Divider, {
2654
+ children: "Overview of recurring donation plans by amount"
2655
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
2702
2656
  sx: {
2703
- mb: 1
2704
- }
2705
- }), data$1.map(function (item, index) {
2706
- return /*#__PURE__*/jsxRuntime.jsxs(React.Fragment, {
2707
- children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
2657
+ display: "flex",
2658
+ flexDirection: "column",
2659
+ gap: 2
2660
+ },
2661
+ children: data$1.map(function (item, index) {
2662
+ return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
2708
2663
  sx: {
2709
- py: 1.5,
2710
- px: 1
2711
- },
2712
- children: /*#__PURE__*/jsxRuntime.jsxs(material.Grid, {
2713
- container: true,
2664
+ display: "flex",
2714
2665
  alignItems: "center",
2715
- children: [/*#__PURE__*/jsxRuntime.jsx(material.Grid, {
2716
- item: true,
2717
- xs: 3,
2718
- children: /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
2719
- variant: "body2",
2720
- sx: {
2721
- fontWeight: 500,
2722
- color: '#333'
2723
- },
2724
- children: item.range
2725
- })
2726
- }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
2727
- item: true,
2728
- xs: 5,
2666
+ gap: 2,
2667
+ py: 0.5
2668
+ },
2669
+ children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
2670
+ sx: {
2671
+ fontSize: "13px",
2672
+ fontWeight: 500,
2673
+ color: "rgba(0, 0, 0, 0.4)",
2674
+ minWidth: "100px",
2675
+ textAlign: "left"
2676
+ },
2677
+ children: item.range
2678
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
2679
+ sx: {
2680
+ flexGrow: 1
2681
+ },
2682
+ children: /*#__PURE__*/jsxRuntime.jsx(material.LinearProgress, {
2683
+ variant: "determinate",
2684
+ value: item.share,
2729
2685
  sx: {
2730
- px: 2
2731
- },
2732
- children: /*#__PURE__*/jsxRuntime.jsx(material.LinearProgress, {
2733
- variant: "determinate",
2734
- value: item.share,
2735
- sx: {
2736
- height: 8,
2686
+ height: 15,
2687
+ borderRadius: 4,
2688
+ bgcolor: "#F3F4F6",
2689
+ "& .MuiLinearProgress-bar": {
2737
2690
  borderRadius: 4,
2738
- bgcolor: '#f0f0f0',
2739
- '& .MuiLinearProgress-bar': {
2740
- borderRadius: 4,
2741
- bgcolor: '#6363e6'
2742
- }
2691
+ bgcolor: "#6366F1"
2743
2692
  }
2744
- })
2745
- }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
2746
- item: true,
2747
- xs: 2,
2748
- sx: {
2749
- textAlign: 'right'
2750
- },
2751
- children: /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
2752
- variant: "body2",
2753
- sx: {
2754
- fontWeight: 600,
2755
- color: '#333'
2756
- },
2757
- children: item.plans
2758
- })
2759
- }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
2760
- item: true,
2761
- xs: 2,
2762
- sx: {
2763
- textAlign: 'right'
2764
- },
2765
- children: /*#__PURE__*/jsxRuntime.jsxs(material.Typography, {
2766
- variant: "body2",
2767
- sx: {
2768
- color: '#9e9e9e'
2769
- },
2770
- children: [item.share, "%"]
2771
- })
2772
- })]
2773
- })
2774
- }), index < data$1.length - 1 && /*#__PURE__*/jsxRuntime.jsx(material.Divider, {})]
2775
- }, index);
2693
+ }
2694
+ })
2695
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
2696
+ sx: {
2697
+ fontSize: "13px",
2698
+ fontWeight: 700,
2699
+ color: "#111",
2700
+ minWidth: "60px",
2701
+ textAlign: "right"
2702
+ },
2703
+ children: "".concat(item.plans, " \xB7 ").concat(item.share, "%")
2704
+ })]
2705
+ }, index);
2706
+ })
2776
2707
  })]
2777
2708
  })
2778
2709
  });
@@ -2842,7 +2773,8 @@ var RecurringRevenueSection = function RecurringRevenueSection() {
2842
2773
  return /*#__PURE__*/jsxRuntime.jsx(RenderChartCard, {
2843
2774
  item: item,
2844
2775
  index: index,
2845
- md: 6
2776
+ md: 6,
2777
+ isPremium: true
2846
2778
  });
2847
2779
  })
2848
2780
  }), /*#__PURE__*/jsxRuntime.jsxs(material.Grid, {
@@ -2855,7 +2787,8 @@ var RecurringRevenueSection = function RecurringRevenueSection() {
2855
2787
  return /*#__PURE__*/jsxRuntime.jsx(RenderChartCard, {
2856
2788
  item: item,
2857
2789
  index: index,
2858
- md: 6
2790
+ md: 6,
2791
+ isPremium: true
2859
2792
  });
2860
2793
  }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
2861
2794
  item: true,
@@ -2876,7 +2809,8 @@ var RecurringRevenueSection = function RecurringRevenueSection() {
2876
2809
  return /*#__PURE__*/jsxRuntime.jsx(RenderChartCard, {
2877
2810
  item: item,
2878
2811
  index: index,
2879
- md: 6
2812
+ md: 6,
2813
+ isPremium: true
2880
2814
  });
2881
2815
  })
2882
2816
  })]
@@ -3283,98 +3217,78 @@ var DropOffPoints = function DropOffPoints() {
3283
3217
  },
3284
3218
  children: /*#__PURE__*/jsxRuntime.jsxs(material.CardContent, {
3285
3219
  sx: {
3286
- p: 3,
3287
- "&:last-child": {
3288
- pb: 3
3289
- }
3220
+ p: 3
3290
3221
  },
3291
- children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
3222
+ children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
3223
+ variant: "subtitle2",
3224
+ sx: {
3225
+ color: "#000000",
3226
+ fontWeight: 700,
3227
+ fontSize: "16px",
3228
+ mb: 0.5,
3229
+ textAlign: "left"
3230
+ },
3231
+ children: "Drop off points in donation flow"
3232
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
3233
+ sx: {
3234
+ color: "rgba(0, 0, 0, 0.4)",
3235
+ fontSize: "13px",
3236
+ mb: 3,
3237
+ textAlign: "left"
3238
+ },
3239
+ children: "Points where donors exit the donation flow"
3240
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
3292
3241
  sx: {
3293
3242
  display: "flex",
3294
- justifyContent: "space-between",
3295
- alignItems: "center",
3296
- mb: 3
3243
+ flexDirection: "column",
3244
+ gap: 2
3297
3245
  },
3298
- children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
3299
- sx: {
3300
- display: "flex",
3301
- alignItems: "center",
3302
- gap: 1
3303
- },
3304
- children: /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
3305
- variant: "subtitle2",
3246
+ children: data.map(function (item, index) {
3247
+ return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
3306
3248
  sx: {
3307
- fontWeight: 600,
3308
- color: "#000000",
3309
- letterSpacing: "0.5px"
3310
- },
3311
- children: "Drop off points in donation flow"
3312
- })
3313
- }), /*#__PURE__*/jsxRuntime.jsx(material.IconButton, {
3314
- sx: {
3315
- border: "1px solid #E9E9EB",
3316
- borderRadius: "8px",
3317
- color: "#000",
3318
- height: "36px",
3319
- width: "36px",
3320
- "&:hover": {
3321
- borderColor: "primary.main",
3322
- bgcolor: "rgba(99, 99, 230, 0.04)"
3323
- }
3324
- },
3325
- children: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.MoreHoriz, {
3326
- sx: {
3327
- fontSize: "1.2rem"
3328
- }
3329
- })
3330
- })]
3331
- }), data.map(function (item, index) {
3332
- return /*#__PURE__*/jsxRuntime.jsxs(React.Fragment, {
3333
- children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
3334
- sx: {
3335
- py: 1.5
3249
+ display: "flex",
3250
+ alignItems: "center",
3251
+ gap: 2,
3252
+ py: 0.5
3336
3253
  },
3337
- children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
3254
+ children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
3338
3255
  sx: {
3339
- display: "flex",
3340
- justifyContent: "space-between",
3341
- alignItems: "center",
3342
- mb: 1
3256
+ fontSize: "13px",
3257
+ fontWeight: 500,
3258
+ color: "rgba(0, 0, 0, 0.4)",
3259
+ minWidth: "160px",
3260
+ textAlign: "left"
3343
3261
  },
3344
- children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
3345
- variant: "body2",
3346
- sx: {
3347
- fontWeight: 500,
3348
- color: "#333"
3349
- },
3350
- children: item.step
3351
- }), /*#__PURE__*/jsxRuntime.jsxs(material.Typography, {
3352
- variant: "body2",
3353
- sx: {
3354
- fontWeight: 600,
3355
- color: "#333"
3356
- },
3357
- children: [item.share, "%"]
3358
- })]
3262
+ children: item.step
3359
3263
  }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
3360
3264
  sx: {
3361
- width: "100%",
3362
- height: "6px",
3363
- bgcolor: "#f0f0f0",
3364
- borderRadius: "4px",
3365
- overflow: "hidden"
3265
+ flexGrow: 1
3366
3266
  },
3367
- children: /*#__PURE__*/jsxRuntime.jsx(material.Box, {
3267
+ children: /*#__PURE__*/jsxRuntime.jsx(material.LinearProgress, {
3268
+ variant: "determinate",
3269
+ value: item.share,
3368
3270
  sx: {
3369
- width: "".concat(item.share * 1.5, "%"),
3370
- height: "100%",
3371
- bgcolor: "#6363e6",
3372
- borderRadius: "4px"
3271
+ height: 15,
3272
+ borderRadius: 4,
3273
+ bgcolor: "#F3F4F6",
3274
+ "& .MuiLinearProgress-bar": {
3275
+ borderRadius: 4,
3276
+ bgcolor: "#6366F1"
3277
+ }
3373
3278
  }
3374
3279
  })
3280
+ }), /*#__PURE__*/jsxRuntime.jsxs(material.Typography, {
3281
+ sx: {
3282
+ fontSize: "13px",
3283
+ fontWeight: 700,
3284
+ color: "#111",
3285
+ minWidth: "40px",
3286
+ textAlign: "right"
3287
+ },
3288
+ children: [item.share, "%"]
3375
3289
  })]
3376
- }), index < data.length - 1]
3377
- }, index);
3290
+ }, index);
3291
+ })
3378
3292
  })]
3379
3293
  })
3380
3294
  });
@@ -3450,7 +3364,8 @@ var DonorBehavior = function DonorBehavior() {
3450
3364
  return /*#__PURE__*/jsxRuntime.jsx(RenderChartCard, {
3451
3365
  item: item,
3452
3366
  index: index,
3453
- md: 6
3367
+ md: 6,
3368
+ isPremium: true
3454
3369
  });
3455
3370
  })
3456
3371
  }), /*#__PURE__*/jsxRuntime.jsxs(material.Grid, {
@@ -3471,7 +3386,8 @@ var DonorBehavior = function DonorBehavior() {
3471
3386
  return /*#__PURE__*/jsxRuntime.jsx(RenderChartCard, {
3472
3387
  item: item,
3473
3388
  index: index,
3474
- md: 6
3389
+ md: 6,
3390
+ isPremium: true
3475
3391
  });
3476
3392
  })]
3477
3393
  }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
@@ -3484,7 +3400,8 @@ var DonorBehavior = function DonorBehavior() {
3484
3400
  return /*#__PURE__*/jsxRuntime.jsx(RenderChartCard, {
3485
3401
  item: item,
3486
3402
  index: index,
3487
- md: 6
3403
+ md: 6,
3404
+ isPremium: true
3488
3405
  });
3489
3406
  })
3490
3407
  })]
@@ -4336,7 +4253,7 @@ var DonationTypeBarChart = function DonationTypeBarChart() {
4336
4253
  colors: ["transparent"]
4337
4254
  },
4338
4255
  xaxis: {
4339
- categories: ["Wk 1", "Wk 2", "Wk 3", "Wk 4", "May 3-4"],
4256
+ categories: ["Wk 1", "Wk 2", "Wk 3", "Wk 4"],
4340
4257
  axisBorder: {
4341
4258
  show: false
4342
4259
  },
@@ -4390,10 +4307,10 @@ var DonationTypeBarChart = function DonationTypeBarChart() {
4390
4307
  };
4391
4308
  var series = [{
4392
4309
  name: "Recurring",
4393
- data: [9.2, 11.8, 13.4, 15.6, 4.9]
4310
+ data: [9.2, 11.8, 13.4, 15.6]
4394
4311
  }, {
4395
4312
  name: "One-time",
4396
- data: [32.4, 41.2, 46.8, 51.3, 14.3]
4313
+ data: [32.4, 41.2, 46.8, 51.3]
4397
4314
  }];
4398
4315
  return /*#__PURE__*/jsxRuntime.jsxs(material.Card, {
4399
4316
  sx: {
@@ -4902,8 +4819,11 @@ var OverallSection = function OverallSection(_ref) {
4902
4819
  },
4903
4820
  isActive: activeMetric === title,
4904
4821
  sx: {
4905
- flex: 1,
4906
- border: activeMetric === title ? "2px solid rgb(99, 99, 230)" : "2px solid #f0f0f0"
4822
+ flex: 1
4823
+ // border:
4824
+ // activeMetric === title
4825
+ // ? "1px solid rgb(99, 99, 230)"
4826
+ // : "2px solid #f0f0f0",
4907
4827
  }
4908
4828
  }, title);
4909
4829
  };
@@ -5132,8 +5052,11 @@ var PaidSection = function PaidSection() {
5132
5052
  },
5133
5053
  isActive: activeMetric === title,
5134
5054
  sx: {
5135
- flex: 1,
5136
- border: activeMetric === title ? "2px solid rgb(99, 99, 230)" : "2px solid #f0f0f0"
5055
+ flex: 1
5056
+ // border:
5057
+ // activeMetric === title
5058
+ // ? "2px solid rgb(99, 99, 230)"
5059
+ // : "2px solid #f0f0f0",
5137
5060
  }
5138
5061
  }, title);
5139
5062
  };
@@ -5177,7 +5100,7 @@ var PaidSection = function PaidSection() {
5177
5100
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Grid, {
5178
5101
  item: true,
5179
5102
  xs: 12,
5180
- md: 8,
5103
+ md: 6,
5181
5104
  children: /*#__PURE__*/jsxRuntime.jsx(ActiveCampaignsCard, {
5182
5105
  title: "Channel performance",
5183
5106
  subtitle: "Ad platforms ranked by ROAS",
@@ -5253,7 +5176,7 @@ var PaidSection = function PaidSection() {
5253
5176
  }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
5254
5177
  item: true,
5255
5178
  xs: 12,
5256
- md: 4,
5179
+ md: 6,
5257
5180
  children: /*#__PURE__*/jsxRuntime.jsx(DonorMixCard, {
5258
5181
  title: "Spend allocation",
5259
5182
  subtitle: "Where $80.3K went this month",
@@ -5296,12 +5219,12 @@ var PaidSection = function PaidSection() {
5296
5219
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Grid, {
5297
5220
  item: true,
5298
5221
  xs: 12,
5299
- md: 7,
5222
+ md: 6,
5300
5223
  children: /*#__PURE__*/jsxRuntime.jsx(TopPerformingCampaignsCard, {})
5301
5224
  }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
5302
5225
  item: true,
5303
5226
  xs: 12,
5304
- md: 5,
5227
+ md: 6,
5305
5228
  children: /*#__PURE__*/jsxRuntime.jsx(PaidDonorGeographyCard, {})
5306
5229
  })]
5307
5230
  })]