Develop

package.json

@@ -100,7 +100,7 @@
     "easyqrcodejs": "^4.4.13",
     "file-saver": "^2.0.5",
     "i18n-iso-countries": "^7.13.0",
-    "i18next": "^24.0.2",
+    "i18next": "^25.0.2",
     "jquery": "^3.6.3",
     "jszip": "^3.10.1",
     "libphonenumber-js": "^1.10.41",

react/assets/forus-platform/scss/_common/blocks/block-inline-copy.scss

@@ -0,0 +1,22 @@
+.block.block-inline-copy {
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 4px;
+    cursor: pointer;
+
+    .inline-copy-icon {
+        display: inline-flex;
+        font-size: 16px;
+        line-height: 18px;
+        height: 18px;
+        transition: 0.4s;
+        color: #646f79;
+    }
+
+    &:hover {
+        .inline-copy-icon {
+            color: var(--color-primary);
+        }
+    }
+}

react/assets/forus-platform/scss/_common/blocks/block-translation-stats.scss

@@ -0,0 +1,34 @@
+.block.block-translation-stats {
+    display: flex;
+    flex-direction: row;
+    margin-bottom: 20px;
+    gap: 20px;
+
+    .translation-stats-col {
+        display: flex;
+        flex-direction: column;
+        flex: 0 0 calc(50% - 10px);
+        background: #ffffff;
+        border: 1px solid var(--border-color);
+        border-radius: var(--border-radius);
+        box-shadow: var(--box-shadow);
+        padding: 15px;
+        gap: 15px;
+
+        .translation-stats-col-label {
+            display: inline-flex;
+            font: 500 14px/20px var(--base-font);
+
+            .translation-stats-col-label-period {
+                color: #646F79;
+                display: flex;
+                flex: 1 1 auto;
+                justify-content: flex-end;
+            }
+        }
+
+        .translation-stats-col-value {
+            font: 600 18px/26px var(--base-font);
+        }
+    }
+}

react/assets/forus-platform/scss/_common/components/modals.scss

@@ -317,7 +317,6 @@
             .modal-text {
                 font: 500 14px/22px var(--base-font);
                 color: #646f79;
-                text-align: center;
                 margin: 0 0 20px;
 
                 small {
@@ -582,104 +581,6 @@
         }
     }
 
-    &.modal-voucher-export-type {
-        .modal-window {
-            width: 940px;
-
-            .modal-body {
-                .voucher-export-type {
-                    text-align: center;
-                    cursor: default;
-                    padding: 10px 0;
-
-                    .voucher-export-type-row {
-                        display: flex;
-                        justify-content: center;
-                        justify-items: center;
-                    }
-
-                    .voucher-export-type-item {
-                        margin-right: 30px;
-                        flex-grow: 1;
-                        padding: 25px 20px;
-                        font: 500 14px var(--base-font);
-                        color: #282b39;
-                        border: 1px solid #d4d9dd;
-                        border-radius: calc(var(--border-radius));
-                        position: relative;
-                        transition: 0.4s;
-                        background: transparent;
-                        cursor: pointer;
-                        flex-basis: 25%;
-
-                        .voucher-export-type-item-check {
-                            position: absolute;
-                            top: 10px;
-                            right: 10px;
-                            border-radius: 22px;
-                            width: 22px;
-                            height: 22px;
-                            line-height: 22px;
-                            text-align: center;
-                            background: #2cc678;
-                            color: #fff;
-                            opacity: 0;
-                            transition: 0.4s;
-                        }
-
-                        .voucher-export-type-item-icon {
-                            margin-bottom: 15px;
-                            width: 100%;
-
-                            .voucher-export-type-item-icon-img {
-                                display: block;
-                                margin: 0 auto 0;
-                                width: 100%;
-                            }
-
-                            .mdi {
-                                font-size: 64px;
-                                text-align: center;
-                                line-height: 60px;
-                                padding: 10px 0 0 0;
-                                display: block;
-                                color: var(--color-primary);
-                            }
-                        }
-
-                        &:hover {
-                            color: #009ef4;
-                            background: #fff;
-                            border-color: #fff;
-                            box-shadow: 2px 10px 15px rgba($color: #000000, $alpha: 0.075);
-                        }
-
-                        &.active {
-                            background: #fff;
-                            color: #282b39;
-                            border: 1px solid #d4d9dd;
-                            box-shadow: 1px 5px 7.5px rgba($color: #000000, $alpha: 0.075);
-
-                            .voucher-export-type-item-check {
-                                opacity: 1;
-                            }
-                        }
-
-                        &:last-child {
-                            margin-right: 0;
-                        }
-                    }
-                }
-            }
-        }
-
-        &.modal-voucher-export-narrow {
-            .modal-window {
-                width: 640px;
-            }
-        }
-    }
-
     &.modal-lg {
         .modal-window {
             width: 960px;

react/assets/forus-platform/scss/_common/components/tables.scss

@@ -547,6 +547,14 @@
             &.selected {
                 background: #f8fbf7;
             }
+
+            &.tr-totals {
+                border-top: 2px solid var(--color-primary);
+
+                td {
+                    background-color: #fafbfc;
+                }
+            }
         }
 
         & > tbody:last-child > tr {

react/assets/forus-platform/scss/_common/dashboard.scss

@@ -95,10 +95,12 @@
 @import 'blocks/block-approve-fund-request.scss';
 @import 'blocks/block-provider-products-required.scss';
 @import 'blocks/block-push-notifications.scss';
+@import 'blocks/block-inline-copy.scss';
 @import 'blocks/block-collapsable.scss';
 @import 'blocks/block-fund-request-assigned.scss';
 @import 'blocks/block-product.scss';
 @import 'blocks/block-label-tabs.scss';
+@import 'blocks/block-translation-stats.scss';
 
 // Select controls
 @import 'select-controls/select-control-funds';
@@ -1345,7 +1347,7 @@ body {
     }
 
     &.card-outline {
-        border: 1px solid #8ca3a6;
+        border: 1px solid var(--border-color);
     }
 
     &.card-collapsable {
@@ -5171,7 +5173,7 @@ body {
 
             .inline-filters-dropdown-content {
                 width: 260px;
-                min-height: 100px;
+                min-height: 75px;
                 position: absolute;
                 top: 100%;
                 margin-top: 15px;

react/assets/forus-platform/scss/_common/includes/common.scss

@@ -120,6 +120,10 @@ img {
     transition: color 0.3s;
 }
 
+.text-default {
+    font: 400 13px/20px var(--base-font);
+}
+
 .text-muted {
     color: #a1a1a1 !important;
     transition: color 0.3s;
@@ -211,6 +215,14 @@ img {
     font-weight: 600 !important;
 }
 
+.text-decoration-link {
+    text-decoration: underline;
+
+    &:hover {
+        text-decoration: none;
+    }
+}
+
 .text-medium,
 .text-strong-half {
     font-weight: 500 !important;

react/src/dashboard/Dashboard.tsx

@@ -21,6 +21,10 @@ import i18nEN from './i18n/i18n-en';
 import i18nNL from './i18n/i18n-nl';
 import { FrameDirectorProvider } from './modules/frame_director/context/FrameDirectorContext';
 import ProviderNotificationProductRequired from './modules/provider_notification_product_required/ProviderNotificationProductRequired';
+import { setDefaultOptions } from 'date-fns';
+import { nl } from 'date-fns/locale';
+
+setDefaultOptions({ weekStartsOn: 1, locale: nl });
 
 i18n.use(initReactI18next)
     .init({