r < d v166

package.json

@@ -97,7 +97,7 @@
     "clean-webpack-plugin": "^4.0.0",
     "date-fns": "^4.1.0",
     "deepl-node": "^1.15.0",
-    "diff": "^8.0.2",
+    "diff": "^8.0.3",
     "dompurify": "^3.2.4",
     "easyqrcodejs": "^4.4.13",
     "file-saver": "^2.0.5",
@@ -106,7 +106,7 @@
     "jquery": "^3.6.3",
     "jszip": "^3.10.1",
     "libphonenumber-js": "^1.10.41",
-    "lodash": "^4.17.21",
+    "lodash": "^4.17.23",
     "papaparse": "^5.4.1",
     "pdfjs-dist": "5.1",
     "qrcode.react": "^4.1.0",

react/assets/forus-platform/scss/_common/blocks/block-financial-dashboard.scss

@@ -77,10 +77,6 @@
                             .checkbox-label {
                                 font: 600 13px/16px var(--base-font);
                                 color: #646f79;
-
-                                &.active {
-                                    color: #009ef4;
-                                }
                             }
 
                             .block-option-count {
@@ -92,6 +88,10 @@
                                 font: inherit;
                                 color: #646f79;
                             }
+
+                            &.block-option-active .checkbox-label {
+                                color: #009ef4;
+                            }
                         }
 
                         .block-option-empty {
@@ -108,6 +108,10 @@
 
     .card-section {
         border-bottom-color: var(--border-color);
+
+        &>.financial-chart {
+            height: 350px;
+        }
     }
 
     .financial-totals {

react/src/dashboard/components/elements/announcements/Accouncements.tsx

@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect, useState } from 'react';
+import classNames from 'classnames';
 import Announcement from '../../../props/models/Announcement';
 
 export const Announcements = ({ announcements }: { announcements: Array<Announcement> }) => {
@@ -43,9 +44,15 @@ export const Announcements = ({ announcements }: { announcements: Array<Announce
             {listActive?.map((announcement) => (
                 <div
                     key={announcement.id}
-                    className={`announcement announcement-${announcement.type} ${
-                        announcement.dismissed ? ' dismissed' : ''
-                    }`}>
+                    className={classNames(
+                        'announcement',
+                        announcement.type === 'warning' && 'announcement-warning',
+                        announcement.type === 'danger' && 'announcement-danger',
+                        announcement.type === 'success' && 'announcement-success',
+                        announcement.type === 'primary' && 'announcement-primary',
+                        announcement.type === 'default' && 'announcement-default',
+                        announcement.dismissed && 'dismissed',
+                    )}>
                     <div className="announcement-wrapper">
                         <div className="title">{announcement.title}</div>
                         <div className="description">

react/src/dashboard/components/elements/app-links/AppLinks.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import classNames from 'classnames';
 import useEnvData from '../../../hooks/useEnvData';
 import useAssetUrl from '../../../hooks/useAssetUrl';
 
@@ -9,7 +10,7 @@ export default function AppLinks({
     showIosButton = true,
     showAndroidButton = true,
 }: {
-    type?: string;
+    type?: 'lg';
     iosId?: string;
     androidId?: string;
     showIosButton?: boolean;
@@ -19,7 +20,7 @@ export default function AppLinks({
     const assetUrl = useAssetUrl();
 
     return (
-        <div className={`block block-app_links ${type ? `block-app_links-${type}` : ''}`}>
+        <div className={classNames('block', 'block-app_links', type === 'lg' && 'block-app_links-lg')}>
             {showAndroidButton && (
                 <a
                     href={envData?.config?.android_link}

react/src/dashboard/components/elements/auth2fa-info-box/Auth2FAInfoBox.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
+import classNames from 'classnames';
 import useEnvData from '../../../hooks/useEnvData';
 
 export default function Auth2FAInfoBox({ className = '' }: { className?: string }) {
     const envData = useEnvData();
 
     return (
-        <div className={`block block-info-box ${className}`}>
+        <div className={classNames('block', 'block-info-box', className)}>
             <div className="info-box-icon mdi mdi-information-outline" />
             {envData.client_type == 'sponsor' && (
                 <div className="info-box-content">

react/src/dashboard/components/elements/block-card-emails/BlockCardEmails.tsx

@@ -23,6 +23,7 @@ import Organization from '../../../props/models/Organization';
 import useConfigurableTable from '../../pages/vouchers/hooks/useConfigurableTable';
 import TableTopScroller from '../tables/TableTopScroller';
 import { FilterModel } from '../../../modules/filter_next/types/FilterParams';
+import FormGroup from '../forms/elements/FormGroup';
 
 export default function BlockCardEmails({
     organization,
@@ -118,15 +119,18 @@ export default function BlockCardEmails({
                 <div className="card-header-filters">
                     <div className="block block-inline-filters">
                         <div className="form">
-                            <div className="form-group">
-                                <input
-                                    type="search"
-                                    className="form-control"
-                                    placeholder="Zoeken"
-                                    value={filterValues.q}
-                                    onChange={(e) => filterUpdate({ q: e.target.value })}
-                                />
-                            </div>
+                            <FormGroup
+                                input={(id) => (
+                                    <input
+                                        type="search"
+                                        id={id}
+                                        className="form-control"
+                                        placeholder="Zoeken"
+                                        value={filterValues.q}
+                                        onChange={(e) => filterUpdate({ q: e.target.value })}
+                                    />
+                                )}
+                            />
                         </div>
                     </div>
                 </div>

react/src/dashboard/components/elements/block-label-tabs/BlockLabelTabs.tsx

@@ -5,18 +5,25 @@ export default function BlockLabelTabs<t = string>({
     value,
     setValue,
     tabs,
+    size = 'sm',
 }: {
     value: t;
     setValue: (state: t) => void;
-    tabs: Array<{ value: t; label: string }>;
+    tabs: Array<{ value: t; label: React.ReactNode; dusk?: string }>;
+    size?: 'sm' | null;
 }) {
     return (
         <div className="block block-label-tabs">
             <div className="label-tab-set">
                 {tabs.map((tab, index) => (
                     <div
                         key={index}
-                        className={classNames(`label-tab label-tab-sm`, value == tab.value && 'active')}
+                        data-dusk={tab.dusk}
+                        className={classNames(
+                            'label-tab',
+                            size === 'sm' && 'label-tab-sm',
+                            value == tab.value && 'active',
+                        )}
                         onClick={() => setValue(tab.value)}>
                         {tab.label}
                     </div>

react/src/dashboard/components/elements/block-reimbursement-categories/BlockReimbursementCategories.tsx

@@ -205,7 +205,7 @@ export default function BlockReimbursementCategories({
                 </div>
 
                 {categories?.meta.total > 0 && (
-                    <div className={`card-section ${compact ? 'card-section-narrow' : ''}`}>
+                    <div className={classNames('card-section', compact && 'card-section-narrow')}>
                         <Paginator
                             meta={categories.meta}
                             filters={filterValues}

react/src/dashboard/components/elements/empty-card/EmptyCard.tsx

@@ -1,9 +1,10 @@
 import React, { Fragment, ReactNode, useMemo } from 'react';
+import classNames from 'classnames';
 import { NavLink } from 'react-router';
 
 interface EmptyButtonType {
     to?: string;
-    type?: string;
+    type?: 'default' | 'primary' | 'danger';
     icon?: string;
     text?: string;
     dusk?: string;
@@ -17,7 +18,7 @@ export default function EmptyCard({
     imageIcon,
     imageIconImg,
     imageIconSvg,
-    textAlign,
+    textAlign = 'center',
     button = null,
     buttons = [],
     type = 'card',
@@ -54,7 +55,15 @@ export default function EmptyCard({
 
     return (
         <Wrapper>
-            <div className={`block block-empty text-${textAlign || 'center'}`} data-dusk="emptyCard">
+            <div
+                className={classNames(
+                    'block',
+                    'block-empty',
+                    textAlign === 'left' && 'text-left',
+                    textAlign === 'right' && 'text-right',
+                    textAlign === 'center' && 'text-center',
+                )}
+                data-dusk="emptyCard">
                 {imageIconImg && (
                     <div className="empty-icon">
                         <img className="empty-icon-img empty-icon-img-border" src={imageIconImg} alt={''} />
@@ -94,7 +103,12 @@ export default function EmptyCard({
                                     key={index}
                                     to={button.to}
                                     onClick={button.onClick}
-                                    className={`button button-${button.type || 'default'}`}
+                                    className={classNames(
+                                        'button',
+                                        (!button.type || button.type === 'default') && 'button-default',
+                                        button.type === 'primary' && 'button-primary',
+                                        button.type === 'danger' && 'button-danger',
+                                    )}
                                     data-dusk={button.dusk || 'btnEmptyBlock'}>
                                     {button.icon && (!button.iconPosition || button.iconPosition == 'start') && (
                                         <em className={`mdi mdi-${button.icon} icon-start`} />