back-testing-react 1.0.4 → 1.0.6

package/dist/index.d.ts

@@ -5,13 +5,29 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 interface StormPayout {
     name: string;
     year: number;
-    windspeedMPH: number;
-    proxyPayout: number;
-    anemometerPayout: number;
-    category: number;
-    ciacPayout: number;
     maxRecovery: number;
     maxRecoveryAmount: number;
+    proxy: {
+        name?: string;
+        year?: number;
+        category?: number;
+        windspeedMPH?: number;
+        proxyPayout: number;
+    };
+    anemometer: {
+        name?: string;
+        year?: number;
+        category?: number;
+        windspeedMPH?: number;
+        anemometerPayout: number;
+    };
+    ciac: {
+        name?: string;
+        year?: number;
+        category?: number;
+        windspeedMPH?: number;
+        ciacPayout: number;
+    };
     color?: string;
     stormTrack: {
         NAME: string;
@@ -36,17 +52,26 @@ interface BackTestingMapProps {
     } | undefined | null;
     limit: number | undefined | null;
     ciacRadius: number | undefined | null;
-    anemometerCode: string;
-    proxyPayouts: Payout[];
-    anemometerPayouts: Payout[];
-    ciacPayouts: Payout[];
+    anemometerCode: string | undefined | null;
+    proxyPayouts?: Payout[];
+    anemometerPayouts?: Payout[];
+    ciacPayouts?: Payout[];
     includeNoNameStorms?: boolean;
     includeZeroPayouts?: boolean;
+    proxyEnabled?: boolean;
+    anemometerEnabled?: boolean;
+    ciacEnabled?: boolean;
+    isCalculatePayoutEnabled?: boolean;
+    onCalculatePayoutEnabledChanged?: (e: boolean) => void;
     onViewChange?: (view: MapView) => void;
+    stormPayouts: StormPayout[];
     onCalculatePayouts?: (payouts: StormPayout[]) => void;
+    onLoad?: (e: React.MutableRefObject<mapboxgl.Map | undefined>) => void;
+    appStatus: ('loading' | 'idle');
+    onAppStatusChange: (e: 'loading' | 'idle') => void;
 }
 interface BackTestingActions {
-    calculatePayouts: (proxyPayouts: Payout[], anemometerCode: string, anemometerPayouts: Payout[], ciacPayouts: Payout[], includeNoNameStorms: boolean, includeZeroPayouts: boolean, limit: number) => void;
+    calculatePayouts: (proxyPayouts: Payout[], anemometerCode: string, anemometerPayouts: Payout[], ciacPayouts: Payout[], includeNoNameStorms: boolean, includeZeroPayouts: boolean, limit: number, proxyEnabled: boolean, anemometerEnabled: boolean, ciacEnabled: boolean) => void;
 }
 declare enum MapView {
     CAT_INTENSITY = "__cat_view",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "back-testing-react",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "Parametric back testing application developed by NormanMax Insurance Solutions",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -41,10 +41,14 @@
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
     "@mapbox/search-js-core": "^1.0.0-beta.22",
+    "@mapbox/search-js-react": "^1.0.0-beta.24",
+    "@mui/icons-material": "^6.1.8",
     "@mui/material": "^6.1.6",
     "@turf/turf": "^7.1.0",
+    "@types/papaparse": "^5.3.15",
     "@types/react-dom": "^18.3.1",
     "mapbox-gl": "^3.8.0",
+    "papaparse": "^5.4.1",
     "rimraf": "^6.0.1"
   },
   "peerDependencies": {

package/src/components/back-testing-cat-legend/back-testing-cat-legend.css

@@ -20,7 +20,7 @@
     left: 5px;
 }
 
-.legend > .item-container:hover > item {
+.legend > .item-container:hover > .item {
     opacity: 0.2;
 }
 

package/src/components/back-testing-cat-legend/back-testing-cat-legend.tsx

@@ -7,14 +7,14 @@ const BackTestingCatLegend:  React.FC<BackTestingCatLegendProps> = (props) => {
     return(
         <div className={props.className + " legend"}>
             <div className="item-container">
-                <Tooltip title={<span style={{ fontSize:'1.25em', padding:'2px' }}>Category 5</span>}><span className="item" style={{backgroundColor:generateCATColor(5)}}/></Tooltip>
-                <Tooltip title={<span style={{ fontSize:'1.25em', padding:'2px' }}>Category 4</span>}><span className="item" style={{backgroundColor:generateCATColor(4)}}/></Tooltip>
-                <Tooltip title={<span style={{ fontSize:'1.25em', padding:'2px' }}>Category 3</span>}><span className="item" style={{backgroundColor:generateCATColor(3)}}/></Tooltip>
-                <Tooltip title={<span style={{ fontSize:'1.25em', padding:'2px' }}>Category 2</span>}><span className="item" style={{backgroundColor:generateCATColor(2)}}/></Tooltip>
-                <Tooltip title={<span style={{ fontSize:'1.25em', padding:'2px' }}>Category 1</span>}><span className="item" style={{backgroundColor:generateCATColor(1)}}/></Tooltip>
-                <Tooltip title={<span style={{ fontSize:'1.25em', padding:'2px' }}>Tropical Storm</span>}><span className="item" style={{backgroundColor:generateCATColor(0)}}/></Tooltip>
-                <Tooltip title={<span style={{ fontSize:'1.25em', padding:'2px' }}>Tropical Depression</span>}><span className="item" style={{backgroundColor:generateCATColor(-1)}}/></Tooltip>
                 <Tooltip title={<span style={{ fontSize:'1.25em', padding:'2px' }}>Tropical Expression</span>}><span className="item" style={{backgroundColor:generateCATColor(-2)}}/></Tooltip>
+                <Tooltip title={<span style={{ fontSize:'1.25em', padding:'2px' }}>Tropical Depression</span>}><span className="item" style={{backgroundColor:generateCATColor(-1)}}/></Tooltip>
+                <Tooltip title={<span style={{ fontSize:'1.25em', padding:'2px' }}>Tropical Storm</span>}><span className="item" style={{backgroundColor:generateCATColor(0)}}/></Tooltip>
+                <Tooltip title={<span style={{ fontSize:'1.25em', padding:'2px' }}>Category 1</span>}><span className="item" style={{backgroundColor:generateCATColor(1)}}/></Tooltip>
+                <Tooltip title={<span style={{ fontSize:'1.25em', padding:'2px' }}>Category 2</span>}><span className="item" style={{backgroundColor:generateCATColor(2)}}/></Tooltip>
+                <Tooltip title={<span style={{ fontSize:'1.25em', padding:'2px' }}>Category 3</span>}><span className="item" style={{backgroundColor:generateCATColor(3)}}/></Tooltip>
+                <Tooltip title={<span style={{ fontSize:'1.25em', padding:'2px' }}>Category 4</span>}><span className="item" style={{backgroundColor:generateCATColor(4)}}/></Tooltip>
+                <Tooltip title={<span style={{ fontSize:'1.25em', padding:'2px' }}>Category 5</span>}><span className="item" style={{backgroundColor:generateCATColor(5)}}/></Tooltip>
             </div>
         </div>
     );

package/src/components/back-testing-map/back-testing-map.css

@@ -5,7 +5,7 @@ body{
 
 .map__wrapper{
     width: 100%;
-    height: 100vh;
+    height: 100%;
     display: grid;
     grid-template-columns: 1fr;
 }

package/src/components/back-testing-map/back-testing-map.service.ts

@@ -22,13 +22,29 @@ export class AppConfig {
 export interface StormPayout {
     name: string;
     year: number;
-    windspeedMPH: number;
-    proxyPayout: number;
-    anemometerPayout: number;
-    category: number;
-    ciacPayout: number;
     maxRecovery: number;
     maxRecoveryAmount: number;
+    proxy:{
+      name?: string;
+      year?: number;
+      category?: number;
+      windspeedMPH?: number;
+      proxyPayout: number;
+    },
+    anemometer:{
+      name?: string;
+      year?: number;
+      category?: number;
+      windspeedMPH?: number;
+      anemometerPayout: number;
+    },
+    ciac:{
+      name?: string;
+      year?: number;
+      category?: number;
+      windspeedMPH?: number;
+      ciacPayout: number;
+    }
     color?: string;
     stormTrack:{
       NAME: string;

package/src/components/back-testing-map/back-testing-map.tsx

@@ -23,7 +23,6 @@ const BackTestingMap = forwardRef<BackTestingActions, BackTestingMapProps>((prop
     const [locationMarker, setLocationMarker] = useState<mapboxgl.Marker>(new mapboxgl.Marker());
     const [catCircle, setCatCircle] = useState<Feature<Polygon, GeoJsonProperties> | undefined>(undefined);
     const [mapView, setMapView] = useState<MapView>(MapView.CAT_INTENSITY);
-    const [payouts, setPayouts] = useState<StormPayout[]>([]);
 
     const toggleView = (
         event: React.MouseEvent<HTMLElement>,
@@ -39,17 +38,17 @@ const BackTestingMap = forwardRef<BackTestingActions, BackTestingMapProps>((prop
     };
 
     useImperativeHandle(ref, () => ({
-        calculatePayouts(proxyPayouts: Payout[], anemometerCode: string, anemometerPayouts: Payout[], ciacPayouts: Payout[], includeNoNamedStorms: boolean, includeZeroPayouts: boolean, limit: number){
-            calculatePayouts(proxyPayouts, anemometerCode, anemometerPayouts, ciacPayouts, includeNoNamedStorms, includeZeroPayouts, limit);
+        calculatePayouts(proxyPayouts: Payout[], anemometerCode: string, anemometerPayouts: Payout[], ciacPayouts: Payout[], includeNoNamedStorms: boolean, includeZeroPayouts: boolean, limit: number, proxyEnabled: boolean, anemometerEnabled: boolean, ciacEnabled: boolean){
+            calculatePayouts(proxyPayouts, anemometerCode, anemometerPayouts, ciacPayouts, includeNoNamedStorms, includeZeroPayouts, limit, proxyEnabled, anemometerEnabled, ciacEnabled);
         }
     }));
 
-    function calculatePayouts(proxyPayouts: Payout[], anemometerCode: string, anemometerPayouts: Payout[], ciacPayouts: Payout[], includeNoNamedStorms: boolean, includeZeroPayouts: boolean, limit: number){
+    function calculatePayouts(proxyPayouts: Payout[], anemometerCode: string, anemometerPayouts: Payout[], ciacPayouts: Payout[], includeNoNamedStorms: boolean, includeZeroPayouts: boolean, limit: number, proxyEnabled: boolean, anemometerEnabled: boolean, ciacEnabled: boolean){
         if(props.ciacRadius != undefined && props.ciacRadius != null && props.location != undefined && props.location != null){
             let latLng : LngLatLike = [props.location.longitude,props.location.latitude];
-            const proxy = generateProxyRequest(latLng as [number,number], 1000, proxyPayouts);
-            const anemometer = generateAnemometerRequest(latLng as [number,number], anemometerCode, anemometerPayouts);
-            const ciac = generateCIACRequest(latLng as [number,number], props.ciacRadius, includeNoNamedStorms, ciacPayouts);
+            const proxy = generateProxyRequest(latLng as [number,number], 1000, proxyPayouts, proxyEnabled);
+            const anemometer = generateAnemometerRequest(latLng as [number,number], anemometerCode, anemometerPayouts, anemometerEnabled);
+            const ciac = generateCIACRequest(latLng as [number,number], props.ciacRadius, includeNoNamedStorms, ciacPayouts, ciacEnabled);
             let request : PayoutRequest = {
                 includeZeroPayouts: includeZeroPayouts,
                 limit: limit,
@@ -59,15 +58,22 @@ const BackTestingMap = forwardRef<BackTestingActions, BackTestingMapProps>((prop
                 anemometer: anemometer,
                 ciac: ciac
             }
+            props.onAppStatusChange('loading')
             fetchPayouts(request, props.apiAccessToken).then((data) => {
                 let storms = data.payouts.map((storm,index) => { storm.color = randomColor(index); return storm})
-                setPayouts(storms);
                 if(props.onCalculatePayouts != undefined){
                   props.onCalculatePayouts(storms);
                 }
             }, (err) => {
                 console.error(err);
                 throw Error(err);
+            }).finally(() => {
+              if(props.isCalculatePayoutEnabled != undefined){
+                if(props.onCalculatePayoutEnabledChanged != undefined){
+                  props.onCalculatePayoutEnabledChanged(false);
+                  props.onAppStatusChange('idle')
+                }
+              }
             })
         }
     }
@@ -418,7 +424,9 @@ const BackTestingMap = forwardRef<BackTestingActions, BackTestingMapProps>((prop
               }
               popup.remove();
             });
-            
+            if(props.onLoad != undefined){
+              props.onLoad(mapInstanceRef);
+            }
           });
           return () => mapInstanceRef.current?.remove();
         
@@ -445,15 +453,12 @@ const BackTestingMap = forwardRef<BackTestingActions, BackTestingMapProps>((prop
                         let latLng : LngLatLike = [props.location.longitude,props.location.latitude];
                         var circle = turf.circle(latLng as [number,number], props.ciacRadius, { steps:200, units: "miles"});
                         setCatCircle(catCircle)
-
                         const source = mapInstanceRef.current.getSource(CIAC_SOURCE)
                         if (source){
-                            console.log("draw circle");
                             (source as GeoJSONSource).setData({type: 'FeatureCollection', features: [circle]})
                         }
                     }
                 } else {
-                    console.log("skip circle")
                     if(mapInstanceRef?.current){
                         setCatCircle(undefined)
                         const source = mapInstanceRef.current.getSource(CIAC_SOURCE)
@@ -467,17 +472,45 @@ const BackTestingMap = forwardRef<BackTestingActions, BackTestingMapProps>((prop
 
         useEffect(() => {
             if(mapLoaded){
-                updateStormTracks(payouts,mapView)
+                updateStormTracks(props.stormPayouts,mapView)
             }
-        },[mapLoaded,payouts,mapView])
+        },[mapLoaded,props.stormPayouts,mapView])
 
         useEffect(() => {
             if(mapLoaded){
-                if(props.location && props.limit && props.proxyPayouts && props.anemometerCode && props.anemometerPayouts && props.ciacRadius && props.ciacRadius && mapInstanceRef){
-                    calculatePayouts(props.proxyPayouts, props.anemometerCode, props.anemometerPayouts, props.ciacPayouts, false, false, props.limit)
+                if(props.location && props.limit && props.proxyPayouts && (props.anemometerCode != undefined && props.anemometerCode != null) && props.anemometerPayouts && props.ciacRadius && props.ciacRadius && props.ciacPayouts && mapInstanceRef){
+                  if(props.isCalculatePayoutEnabled != undefined){
+                    if(props.isCalculatePayoutEnabled == true){
+                      calculatePayouts(
+                        props.proxyPayouts, 
+                        props.anemometerCode, 
+                        props.anemometerPayouts, 
+                        props.ciacPayouts, 
+                        false, 
+                        false, 
+                        props.limit, 
+                        props.proxyEnabled != undefined ? props.proxyEnabled : true,
+                        props.anemometerEnabled != undefined ? props.anemometerEnabled : true,
+                        props.ciacEnabled != undefined ? props.ciacEnabled : true
+                      )
+                    }
+                  }else {
+                    calculatePayouts(
+                      props.proxyPayouts, 
+                      props.anemometerCode, 
+                      props.anemometerPayouts, 
+                      props.ciacPayouts, 
+                      false, 
+                      false, 
+                      props.limit, 
+                      props.proxyEnabled != undefined ? props.proxyEnabled : true,
+                      props.anemometerEnabled != undefined ? props.anemometerEnabled : true,
+                      props.ciacEnabled != undefined ? props.ciacEnabled : true
+                    )
+                  } 
                 }
             }
-        },[props.location, props.limit, props.proxyPayouts, props.anemometerCode, props.anemometerPayouts, props.ciacRadius, props.ciacRadius, mapInstanceRef, mapLoaded])
+        },[props.location, props.limit, props.proxyPayouts, props.anemometerCode, props.anemometerPayouts, props.ciacRadius, props.ciacPayouts, props.ciacRadius, mapInstanceRef, mapLoaded])
 
     return(
         <div className="map__wrapper">
@@ -494,7 +527,7 @@ const BackTestingMap = forwardRef<BackTestingActions, BackTestingMapProps>((prop
                 <ToggleButton value={MapView.CAT_INTENSITY}>CAT Strength View</ToggleButton>
                 <ToggleButton value={MapView.STORMS}>Storms View</ToggleButton>
             </ToggleButtonGroup>
-            {mapView == MapView.STORMS && <BackTestingStormLegend stormTracks={payouts}/>}
+            {mapView == MapView.STORMS && <BackTestingStormLegend stormTracks={props.stormPayouts}/>}
             <div ref={mapContainerRef} className="map__container" />
         </div>
     );

package/src/components/back-testing-map/back-testing-map.types.ts

@@ -15,6 +15,7 @@ export interface Shape {
 }
 
 export interface ProxyRequest {
+    enabled: boolean;
     radius: number;
     latitude: number | undefined;
     longitude: number | undefined;
@@ -22,6 +23,7 @@ export interface ProxyRequest {
 }
 
 export interface AnemometerRequest {
+    enabled: boolean;
     code: string
     latitude: number | undefined;
     longitude: number | undefined;
@@ -29,6 +31,7 @@ export interface AnemometerRequest {
 }
 
 export interface CIACRequest {
+    enabled: boolean;
     includeNotNamedStorms: boolean;
     shapes: Shape[];
     payouts: Payout[] | undefined;
@@ -50,18 +53,27 @@ export interface BackTestingMapProps {
     location: {longitude: number, latitude: number } | undefined | null,
     limit: number | undefined | null,
     ciacRadius: number | undefined | null,
-    anemometerCode: string,
-    proxyPayouts: Payout[],
-    anemometerPayouts: Payout[],
-    ciacPayouts: Payout[],
+    anemometerCode: string | undefined | null,
+    proxyPayouts?: Payout[],
+    anemometerPayouts?: Payout[],
+    ciacPayouts?: Payout[],
     includeNoNameStorms?: boolean,
     includeZeroPayouts?: boolean,
-    onViewChange?: (view: MapView) => void
-    onCalculatePayouts?: (payouts: StormPayout[]) => void  
+    proxyEnabled?: boolean, 
+    anemometerEnabled?: boolean, 
+    ciacEnabled?: boolean,
+    isCalculatePayoutEnabled?: boolean,
+    onCalculatePayoutEnabledChanged?: (e:boolean) => void,
+    onViewChange?: (view: MapView) => void,
+    stormPayouts: StormPayout[],
+    onCalculatePayouts?: (payouts: StormPayout[]) => void , 
+    onLoad?: (e:React.MutableRefObject<mapboxgl.Map | undefined>) => void
+    appStatus: ('loading'| 'idle')
+    onAppStatusChange: (e: 'loading'| 'idle') => void
 }
 
 export interface BackTestingActions {
-    calculatePayouts: (proxyPayouts: Payout[], anemometerCode: string, anemometerPayouts: Payout[], ciacPayouts: Payout[], includeNoNameStorms: boolean, includeZeroPayouts: boolean, limit: number) => void,
+    calculatePayouts: (proxyPayouts: Payout[], anemometerCode: string, anemometerPayouts: Payout[], ciacPayouts: Payout[], includeNoNameStorms: boolean, includeZeroPayouts: boolean, limit: number, proxyEnabled: boolean, anemometerEnabled: boolean, ciacEnabled: boolean) => void,
 }
 
 export enum MapView {
@@ -138,9 +150,10 @@ export function randomColor(index:number): string {
     return `hsla(${hue}, 90%, 60%, 1)`;
 }
 
-export function generateProxyRequest(latLng: [number,number], radius: number, payouts: Payout[] | undefined ){
+export function generateProxyRequest(latLng: [number|undefined,number|undefined], radius: number, payouts: Payout[] | undefined, enabled: boolean ){
     let coord = (latLng);
     let proxy : ProxyRequest = {
+        enabled:enabled,
         radius: radius,
         latitude: coord[1],
         longitude: coord[0],
@@ -149,9 +162,10 @@ export function generateProxyRequest(latLng: [number,number], radius: number, pa
     return proxy
 }
 
-export function generateAnemometerRequest(latLng: [number,number], anemometerCode:string, payouts: Payout[] | undefined){
+export function generateAnemometerRequest(latLng: [number|undefined,number|undefined], anemometerCode:string, payouts: Payout[] | undefined, enabled: boolean){
     let coord = (latLng);
     let anemometer : AnemometerRequest = {
+        enabled:enabled,
         code:anemometerCode,
         latitude: coord[1],
         longitude: coord[0],
@@ -160,9 +174,10 @@ export function generateAnemometerRequest(latLng: [number,number], anemometerCod
     return anemometer
 }
 
-export function generateCIACRequest(latLng: [number,number], radius: number | undefined, includeNoNameStorms: boolean, payouts: Payout[] | undefined){
+export function generateCIACRequest(latLng: [number|undefined,number|undefined], radius: number | undefined, includeNoNameStorms: boolean, payouts: Payout[] | undefined, enabled: boolean){
     let coord = (latLng);
     let ciac : CIACRequest = {
+        enabled:enabled,
         shapes:[{
             type: "__circle",
             latitude: coord[1],
@@ -173,4 +188,52 @@ export function generateCIACRequest(latLng: [number,number], radius: number | un
         payouts: payouts
     }
     return ciac
-}
+}
+
+export function generateInitialProxyRequest() : ProxyRequest {
+    return {
+        enabled:true,
+        latitude: undefined,
+        longitude: undefined,
+        radius: 1000,
+        payouts: undefined
+    }
+}
+
+export function generateInitialAnemometerRequest() : AnemometerRequest {
+    return {
+        enabled:true,
+        code: "",
+        latitude: undefined,
+        longitude: undefined,
+        payouts: undefined
+    }
+}
+
+export function generateInitialCIACRequest() : CIACRequest {
+    return {
+        enabled:true,
+        includeNotNamedStorms: false,
+        shapes: [
+            {
+            type: "__circle",
+            latitude: undefined,
+            longitude: undefined,
+            radius: 15
+            }
+        ],
+        payouts: undefined
+    }
+}
+
+export function generateInitialPayoutRequest() : PayoutRequest {
+    return {
+        limit: 0,
+        latitude: undefined,
+        longitude: undefined,
+        includeZeroPayouts: false,
+        proxy: generateInitialProxyRequest(),
+        anemometer: generateInitialAnemometerRequest(),
+        ciac: generateInitialCIACRequest()
+    }
+}

package/src/components/back-testing-payout-info/back-testing-payout-info.css

@@ -0,0 +1,112 @@
+.payout-info-container {
+    padding:0;
+    font-family: system-ui, sans-serif;
+}
+
+.payout-info-container .header{
+    margin: 15px;
+}
+
+.payout-info-container ::-webkit-scrollbar{
+    width: 10px;
+}
+
+.payout-info-container ::-webkit-scrollbar-track {
+    background: #f1f1f1;
+}
+
+.payout-info-container ::-webkit-scrollbar-thumnb {
+    background: #c7c6c6;
+}
+
+.payout-info-container ::-webkit-scrollbar-thumb:hover {
+    background: #868686; 
+}
+
+.payout-info-container .wind {
+    height: 25px;
+    line-height: 25px;
+    text-align: center;
+    color: black;
+    font-weight: 700;
+    font-size: 0.8em;
+    padding: 3px 10px;
+    border-radius: 2px;
+    border: 0.5px solid darkgray; 
+}
+
+.payout-info-container .cat{
+    height: 25px;
+    line-height: 25px;
+    text-align: center;
+    color: white;
+    font-weight: 700;
+    font-size: 0.8em;
+    padding: 3px 10px;
+    border-radius: 2px;
+    margin-right: 5px;
+}
+
+.payout-info-container .cat.cat-5{
+    background-color: #fc5c0d;
+}
+
+.payout-info-container .cat.cat-4{
+    background-color: #fa8d0e;
+}
+
+.payout-info-container .cat.cat-3{
+    background-color: #f7be0f;
+}
+
+.payout-info-container .cat.cat-2{
+    background-color: #f6d70f;
+}
+
+.payout-info-container .cat.cat-1{
+    background-color: #c0e826;
+}
+
+.payout-info-container .cat.cat-0{
+    background-color: #9cf435;
+}
+
+.payout-info-container .cat.cat--1{
+    background-color: #78ff44;
+}
+
+.payout-info-container .cat.cat--2{
+    background-color: #78ff44;
+}
+
+.payout-info-container .cat.cat--3{
+    background-color: #78ff44;
+}
+
+.payout-info-container .cat.cat--4{
+    background-color: #78ff44;
+}
+
+.payout-info-container .cat.cat--5{
+    background-color: #78ff44;
+}
+
+.payout-info-container .cat.cat--10{
+    background-color: #7d837b;
+}
+
+.payout-info-container .scroll-container{
+    height: calc(100vh - 2.5em - 15px - 15px - 75px);
+    overflow-y:hidden;
+    scrollbar-gutter: stable;
+    position: relative;
+    top: 10px;
+}
+
+.payout-info-container .scroll-container:hover{
+    overflow-y: auto;
+}
+
+.payout-info-container .scroll-container .card-container:last-child div{
+    margin-bottom: 0px;
+}