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