feat: Receivable aging summary front-end.

client/src/style/App.scss

@@ -92,4 +92,30 @@ body.authentication {
 
 .bp3-toast{
   box-shadow: none;
+}
+
+.select-list--fill-popover{
+
+  .bp3-transition-container,
+  .bp3-popover{
+    min-width: 100%;
+  }
+}
+
+.select-list--fill-button{
+
+  .bp3-popover-wrapper,
+  .bp3-popover-target{
+    display: block;
+    width: 100%;
+  }
+  .bp3-button{
+    width: 100%;
+    justify-content: start;
+  }
+}
+
+
+.bp3-datepicker-caption .bp3-html-select::after{
+  margin-right: 6px;
 }

client/src/style/components/data-table.scss

@@ -25,7 +25,7 @@
         padding: 0.8rem 0.5rem;
         background: #F8FAFA;
         font-size: 14px;
-        color: #555;
+        color: #444;
         font-weight: 500;
         border-bottom: 1px solid rgb(224, 224, 224);
       }

client/src/style/pages/dashboard.scss

@@ -66,7 +66,7 @@
       .bp3-button:not([class*="bp3-intent-"]):not(.bp3-minimal){
         padding: 0;
         background-size: contain;
-        background-color: #F6DCFA;
+        background-color: #EED1F2;
         border-radius: 50%;
         height: 30px;
         width: 30px;
@@ -78,7 +78,7 @@
         &,
         &:hover,
         &:focus{
-          background-color: #F6DCFA;
+          background-color: #EED1F2;
           border: 0;
           box-shadow: none;
         }
@@ -131,11 +131,23 @@
           background: rgba(167, 182, 194, 0.12);
           color: #5C5C5C;
         }
+        &.bp3-minimal:active,
+        &.bp3-minimal.bp3-active{
+          background: rgba(167, 182, 194, 0.12);
+          color: #5C5C5C;
+        }
+
+        &.has-active-filters{
+          &,
+          &.bp3-active,
+          &:active{
+            background: #eafbe4;
+          }
+        }
         .#{$ns}-icon{
           color: #666;
           margin-right: 7px;
         }
-
         &.#{$ns}-minimal.#{$ns}-intent-danger{
           color: #c23030;
 

client/src/style/pages/financial-statements.scss

@@ -1,4 +1,6 @@
-
+.form-group-display-columns-by{
+  position: relative;
+}
 
 
 .financial-statement{

client/src/style/views/Sidebar.scss

@@ -22,7 +22,7 @@ $sidebar-popover-submenu-bg: rgb(1, 20, 62);
     &.ScrollbarsCustom-ThumbX,
     &.ScrollbarsCustom-ThumbY {
       background: rgba(0, 0, 0, 0);
-    }      
+    }
   }
 
   &:hover {
@@ -37,7 +37,7 @@ $sidebar-popover-submenu-bg: rgb(1, 20, 62);
     padding: 16px 12px;
    
     &-logo{
-      margin-top: 4px;
+      margin-top: 2px;
 
       svg{
         opacity: 0.5;

client/src/style/views/filter-dropdown.scss

@@ -1,6 +1,6 @@
 
 .filter-dropdown{
-  width: 500px;
+  width: 550px;
 
   &__body{
     padding: 12px;
@@ -17,19 +17,36 @@
   }
 
   .bp3-form-group{
-    padding-right: 16px;
+    padding-right: 4px;
     margin-bottom: 0;
 
     &:not(:last-of-type) {
-      padding-right: 12px;
+      padding-right: 8px;
     }
     .bp3-html-select select,
     .bp3-select select{
       padding: 0 20px 0 6px;
+
+      &:after{
+        margin-right: 10px;
+      }
     }
     .bp3-input{
       padding: 0 6px;
     }
+    .bp3-html-select select,
+    .bp3-select select,
+    .bp3-input-group .bp3-input{
+      height: 32px;
+      border-radius: 3px;
+      border-color: #dbd8d8;
+    }
+
+    .bp3-html-select::after,
+    .form-group--select-list .bp3-button::after{
+      border-top-color: #aaa;
+      margin-right: 10px;
+    }
   }
 
   &__footer{
@@ -37,9 +54,62 @@
     padding: 5px 10px;
   }
   .form-group{
-    &--condition{ width: 25%; }
-    &--field{ width: 45%; }
-    &--compatator{ width: 30%; }
-    &--value{ width: 25%; }
+    &--condition{
+      width: 70px;
+      min-width: 70px;
+    }
+    &--field{
+      width: 45%;
+    }
+    &--compatator{
+      min-width: 120px;
+      width: 120px;
+      max-width: 120px;
+    }
+    &--value{
+      width: 55%;
+    }
+  }
+}
+
+.list-select--filter-dropdown{
+
+  .bp3-button:not([class*="bp3-intent-"]):not(.bp3-minimal),
+  .bp3-button:not([class*="bp3-intent-"]):not(.bp3-minimal){
+    &,
+    &:hover{
+      background-color: #E6EFFB;
+      border: 0;
+      border-radius: 3px;
+    }
+
+    &:after{
+      border-top-color: #afb9d0;
+    }
+  }
+}
+
+.popover--list-select-filter-dropdown{
+
+  .bp3-popover-content{
+    max-width: 200px;
+  }
+
+  .bp3-menu{
+    max-height: 250px;
+    overflow: auto;
+  }
+
+  .bp3-input-group{
+    padding: 8px;
+    padding-bottom: 4px;
+
+    .bp3-input:not(:first-child){
+      padding-left: 10px;
+    }
+
+    .bp3-icon-search{
+      display: none;
+    }
   }
 }