r < d v165

package.json

@@ -113,14 +113,14 @@
     "query-string": "^9.1.0",
     "react": "^18.1.0",
     "react-chartjs-2": "^5.2.0",
-    "react-datepicker": "^8.0.0",
+    "react-datepicker": "^9.1.0",
     "react-dom": "^18.1.0",
     "react-error-boundary": "^6.0.0",
     "react-gtm-module": "^2.0.11",
     "react-i18next": "^16.0.0",
     "react-image-crop": "^11.0.6",
     "react-range-slider-input": "^3.2.1",
-    "react-router": "^7.5.2",
+    "react-router": "^7.12.0",
     "react-slider": "^2.0.6",
     "summernote": "^0.9.1",
     "terser-webpack-plugin": "^5.3.9",

react/assets/forus-platform/scss/_common/blocks/block-breadcrumbs.scss

@@ -1,4 +1,4 @@
-&.block-breadcrumbs {
+.block.block-breadcrumbs {
     display: flex;
     flex-direction: row;
     margin: 0 0 15px;

react/assets/forus-platform/scss/_common/blocks/block-charts.scss

@@ -0,0 +1,169 @@
+.block.block-charts {
+    .chart-row {
+        display: flex;
+        margin: 0 -10px 20px;
+
+        .card {
+            width: 25%;
+            margin: 0 10px;
+        }
+
+        &.chart-row-condensed {
+            .chart-control {
+                margin: 0 auto;
+            }
+
+            .chart-radial {
+                width: 70px;
+                margin: auto;
+            }
+
+            .chart-value {
+                min-height: auto;
+                padding: 10px 0;
+
+                .chart-value_label {
+                    color: var(--color-primary);
+                }
+
+                .chart-value_value {
+                    color: var(--color-primary);
+                }
+            }
+        }
+    }
+
+    .chart-control {
+        margin: -10px 0;
+        display: flex;
+        flex-direction: column;
+        text-align: center;
+        cursor: default;
+
+        .chart-label {
+            color: #151b26;
+            font: 500 13px/18px var(--base-font);
+            margin-bottom: 20px;
+        }
+
+        .chart-value {
+            padding: 50px 0 20px;
+            display: flex;
+            flex-direction: column;
+            min-height: 180px;
+
+            .chart-value_value {
+                color: #007f96;
+                font: 500 26px/32px var(--base-font);
+            }
+
+            .chart-value_label {
+                color: var(--color-primary);
+                font: 500 11px/18px var(--base-font);
+            }
+
+            .chart-value_value_b {
+                color: #282b39;
+                font: 500 14px/22px var(--base-font);
+            }
+        }
+
+        &.chart-control-provider_overview {
+            padding: 5px 0;
+
+            .chart-label {
+                margin-bottom: 0;
+            }
+
+            .chart-value {
+                padding: 25px 0 25px;
+                min-height: auto;
+            }
+        }
+    }
+
+    .chart-body {
+        padding: 20px 0 0;
+        margin: 0 -20px -10px -10px;
+
+        canvas {
+            margin: 0 auto;
+        }
+    }
+
+    .chart-header {
+        margin: -25px -25px 0;
+        border-bottom: 1px solid #d4d9dd;
+        padding: 15px 25px;
+        display: flex;
+        cursor: default;
+
+        .chart-header-range {
+            flex-basis: 40%;
+
+            .chart-header-item {
+                color: rgba($color: #151b26, $alpha: 0.5);
+                font: 500 14px/34px var(--base-font);
+                display: inline-block;
+                margin-right: 20px;
+                transition: 0.4s;
+                cursor: pointer;
+
+                &:last-child {
+                    margin-right: 0;
+                }
+
+                &:hover,
+                &.active {
+                    color: #d91d46;
+                    font-weight: 500;
+                }
+            }
+        }
+
+        .chart-header-title {
+            flex: 1 0;
+            text-align: center;
+            font: 500 13px/34px var(--base-font);
+            color: #151b26;
+            flex-basis: 20%;
+        }
+
+        .chart-header-actions {
+            flex-basis: 40%;
+            display: flex;
+            flex-direction: row;
+            justify-content: flex-end;
+
+            .flex-row {
+                flex: 1;
+                flex-direction: row;
+                justify-content: flex-end;
+                flex-wrap: nowrap;
+            }
+
+            .form-group {
+                margin: 0 10px 0 0;
+            }
+
+            .form-control {
+                max-width: 200px;
+            }
+        }
+    }
+
+    @media screen and (max-width: 1000px) {
+        .chart-row {
+            flex-wrap: wrap;
+
+            .card {
+                width: 100%;
+                margin: 0 0 20px;
+
+                &:last-child {
+                    margin-bottom: 0;
+                }
+            }
+        }
+    }
+}

react/assets/forus-platform/scss/_common/blocks/block-chat.scss

@@ -1,4 +1,4 @@
-&.block-chat {
+.block.block-chat {
     display: flex;
     flex-direction: column;
     cursor: default;

react/assets/forus-platform/scss/_common/blocks/block-compact-datalist.scss

@@ -0,0 +1,69 @@
+.block.block-compact-datalist {
+    display: grid;
+
+    .datalist-row {
+        border-bottom: 1px dashed #ccc;
+        display: grid;
+        grid-template-columns: 200px 1fr;
+
+        .datalist-key {
+            @extend .text-wrap;
+            font: 500 14px/20px var(--base-font);
+            color: #646f79;
+            padding: 7.5px 15px 7.5px 0;
+        }
+
+        .datalist-value {
+            @extend .text-wrap;
+            font: 500 14px/20px var(--base-font);
+            color: #646f79;
+            padding: 7.5px 0;
+        }
+    }
+
+    &.compact-datalist-outline {
+        padding: 5px 20px;
+        border: 1px dashed #ccc;
+        border-radius: var(--border-radius);
+
+        .datalist-row {
+            .datalist-key {
+                color: var(--color-primary);
+            }
+
+            .datalist-value {
+                color: var(--text-color);
+            }
+
+            &:last-child {
+                border-bottom: 0;
+            }
+        }
+    }
+
+    &.compact-datalist-vertical {
+        grid-auto-flow: column;
+        gap: 20px;
+
+        .datalist-row {
+            grid-template-columns: 1fr;
+            border: none;
+
+            .datalist-key,
+            .datalist-value {
+                margin: 0;
+                padding: 0;
+            }
+
+            .datalist-key {
+                color: var(--color-primary);
+                font: 600 11px/20px var(--base-font);
+            }
+
+            .datalist-value {
+                color: var(--text-color);
+                font: 500 13px/20px var(--base-font);
+            }
+        }
+    }
+}

react/assets/forus-platform/scss/_common/blocks/block-critera-editor.scss

@@ -1,4 +1,4 @@
-&.block-criteria-editor {
+.block.block-criteria-editor {
     display: flex;
     flex-direction: column;
     gap: 20px;