teamforus · RobinMeles · Mar 12, 2025 · Feb 28, 2025 · Feb 28, 2025 · Mar 1, 2025
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -46,13 +46,13 @@
     "@typescript-eslint/eslint-plugin": "^8.18",
     "@typescript-eslint/parser": "^8.8",
     "babel-eslint": "^10.0.3",
-    "babel-loader": "^9.1.2",
+    "babel-loader": "^10.0.0",
     "babel-plugin-syntax-trailing-function-commas": "^6.22.0",
     "babelify": "^10.0.0",
     "browserify": "^17.0.0",
     "classnames": "^2.5.1",
     "compression-webpack-plugin": "^11.1.0",
-    "copy-webpack-plugin": "^12.0.2",
+    "copy-webpack-plugin": "^13.0.0",
     "css-loader": "^7.1.2",
     "eslint": "^9.19.0",
     "eslint-config-prettier": "^10.0.1",
@@ -62,7 +62,7 @@
     "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-react": "^7.37.2",
     "eslint-plugin-react-hooks": "^5.0.0",
-    "eslint-webpack-plugin": "^4.2.0",
+    "eslint-webpack-plugin": "^5.0.0",
     "html-loader": "^5.1.0",
     "html-webpack-plugin": "^5.6.0",
     "prettier": "3.3.3",

diff --git a/react/assets/forus-platform/scss/_common/dashboard.scss b/react/assets/forus-platform/scss/_common/dashboard.scss
@@ -904,9 +904,10 @@ body {
         }
 
         .mdi {
-            margin-right: 5px;
+            margin-right: 7px;
             font-size: 20px;
-            line-height: inherit;
+            line-height: 30px;
+            height: 30px;
         }
 
         &.card-title-sm {
@@ -928,82 +929,75 @@ body {
     .card-header {
         padding: 15px 20px 14px;
         position: relative;
-        @include cf();
-
-        &:not(.card-header-next) {
-            .card-header-drown,
-            .block.block-label-tabs,
-            .form-control,
-            .button {
-                margin-top: -2px;
-                margin-bottom: -2px;
-            }
-        }
+        display: flex;
+        flex-direction: row;
+        align-items: center;
 
-        &.card-header-next {
+        .card-header-filters {
             display: flex;
             flex-direction: row;
+            gap: 10px;
+            align-items: center;
 
-            .card-header-filters {
+            .block-inline-filters {
                 display: flex;
                 flex-direction: row;
                 gap: 10px;
                 align-items: center;
 
-                .block-inline-filters {
-                    display: flex;
-                    flex-direction: row;
-                    gap: 10px;
-                    align-items: center;
+                .form-control:not(.select-control) {
+                    min-height: auto !important;
 
-                    .form-control:not(.select-control) {
-                        &:not([type='radio']):not([type='checkbox']) {
-                            height: 30px;
-                            padding: 0 10px;
-                            line-height: 28px;
-                        }
+                    &:not([type='radio']):not([type='checkbox']) {
+                        height: 30px;
+                        padding: 0 10px;
+                        line-height: 28px;
                     }
+                }
 
-                    .form-group-inline > .form-label {
-                        padding-top: 5px;
-                        padding-bottom: 5px;
-                    }
+                .form-group-inline > .form-label {
+                    padding-top: 5px;
+                    padding-bottom: 5px;
+                }
 
-                    .select-control {
-                        height: auto;
+                .block-label-tabs {
+                    .label-tab {
+                        height: 30px;
+                        line-height: 24px;
+                        padding-top: 2px;
+                        padding-bottom: 2px;
+                        font-size: 12px;
 
-                        .form-control:not([type='radio']):not([type='checkbox']) {
-                            padding-right: 30px;
+                        .mdi {
+                            font-size: 1.36em;
+                            line-height: 24px;
                         }
                     }
+                }
+
+                .select-control {
+                    min-height: auto !important;
 
-                    & > * {
-                        margin: 0 0 0 0;
+                    .form-control:not([type='radio']):not([type='checkbox']) {
+                        padding-right: 30px;
                     }
                 }
-            }
 
-            .card-header-actions {
-                margin: -1px 0;
-                display: flex;
-                flex-direction: column;
-                gap: 5px;
+                & > * {
+                    margin: 0 0 0 0;
+                }
             }
+        }
 
-            .block-label-tabs {
-                margin-left: 0;
-            }
+        .card-header-actions {
+            margin: -1px 0;
+            display: flex;
+            flex-direction: column;
+            gap: 5px;
         }
 
-        .card-header-drown {
-            .block.block-label-tabs,
-            .form-group,
-            .block.block-inline-filters .form-group,
-            .form-control,
-            .button {
-                margin-top: 0;
-                margin-bottom: 0;
-            }
+        .block-label-tabs {
+            margin-left: 0;
         }
 
         .button {
@@ -1035,13 +1029,12 @@ body {
         }
 
         &.card-header-md {
-            padding: 15px 20px;
-
             .card-title {
                 font: 600 14px / 21px var(--base-font);
 
                 .mdi {
                     margin-right: 0;
+                    margin-left: -15px;
                     color: #646f79;
                 }
             }

diff --git a/react/assets/forus-webshop/scss/_common/components/_form.scss b/react/assets/forus-webshop/scss/_common/components/_form.scss
@@ -1084,6 +1084,14 @@
             &.has-info-btn {
                 .form-control:not([type='radio']):not([type='checkbox']) {
                     padding-right: 45px;
+
+                    &.select-control {
+                        .select-control-input {
+                            .select-control-icon {
+                                right: 45px;
+                            }
+                        }
+                    }
                 }
             }
         }

diff --git a/react/src/dashboard/components/elements/block-card-emails/BlockCardEmails.tsx b/react/src/dashboard/components/elements/block-card-emails/BlockCardEmails.tsx
@@ -86,25 +86,21 @@ export default function BlockCardEmails({
     return (
         <div className="card">
             <div className="card-header">
-                <div className="flex flex-horizontal">
-                    <div className="flex flex-vertical flex-grow flex-center">
-                        <div className="card-title">
-                            Berichten&nbsp;
-                            <span className="span-count">{emailLogs?.meta?.total}</span>
-                        </div>
-                    </div>
-                    <div className="flex flex-row">
-                        <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>
+                <div className="flex flex-grow card-title">
+                    Berichten&nbsp;
+                    <span className="span-count">{emailLogs?.meta?.total}</span>
+                </div>
+                <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>
                         </div>
                     </div>

diff --git a/react/src/dashboard/components/elements/block-card-notes/BlockCardNotes.tsx b/react/src/dashboard/components/elements/block-card-notes/BlockCardNotes.tsx
@@ -1,11 +1,10 @@
 import FilterModel from '../../../types/FilterModel';
 import FormValuesModel from '../../../types/FormValuesModel';
 import { useCallback, useEffect, useState } from 'react';
-import { ApiResponse, ApiResponseSingle, PaginationData, ResponseError } from '../../../props/ApiResponses';
+import { ApiResponse, ApiResponseSingle, PaginationData } from '../../../props/ApiResponses';
 import Paginator from '../../../modules/paginator/components/Paginator';
 import useFilter from '../../../hooks/useFilter';
 import React from 'react';
-import usePushDanger from '../../../hooks/usePushDanger';
 import useOpenModal from '../../../hooks/useOpenModal';
 import ModalDangerZone from '../../modals/ModalDangerZone';
 import usePushSuccess from '../../../hooks/usePushSuccess';
@@ -18,6 +17,7 @@ import usePaginatorService from '../../../modules/paginator/services/usePaginato
 import useTranslate from '../../../hooks/useTranslate';
 import LoaderTableCard from '../loader-table-card/LoaderTableCard';
 import TableRowActions from '../tables/TableRowActions';
+import usePushApiError from '../../../hooks/usePushApiError';
 
 export default function BlockCardNotes({
     isAssigned,
@@ -36,9 +36,9 @@ export default function BlockCardNotes({
 
     const openModal = useOpenModal();
     const translate = useTranslate();
-    const pushDanger = usePushDanger();
     const pushSuccess = usePushSuccess();
     const setProgress = useSetProgress();
+    const pushApiError = usePushApiError();
 
     const paginatorService = usePaginatorService();
 
@@ -79,15 +79,15 @@ export default function BlockCardNotes({
                                     filter.touch();
                                     pushSuccess('Gelukt!', 'Notitie verwijderd.');
                                 })
-                                .catch((res: ResponseError) => pushDanger('Foutmelding!', res.data.message))
+                                .catch(pushApiError)
                                 .finally(() => setProgress(100));
                         },
                         text: translate('modals.danger_zone.remove_note.buttons.confirm'),
                     }}
                 />
             ));
         },
-        [deleteNote, filter, openModal, pushDanger, pushSuccess, setProgress, translate],
+        [deleteNote, filter, openModal, pushApiError, pushSuccess, setProgress, translate],
     );
 
     const onAddNote = useCallback(() => {
@@ -120,7 +120,7 @@ export default function BlockCardNotes({
 
     return (
         <div className="card">
-            <div className="card-header card-header-next">
+            <div className="card-header">
                 <div className="card-title flex flex-grow">
                     {translate('notes.header.title')}({notes.meta.total})
                 </div>

diff --git a/...board/components/elements/block-reimbursement-categories/BlockReimbursementCategories.tsx b/...board/components/elements/block-reimbursement-categories/BlockReimbursementCategories.tsx
@@ -122,25 +122,21 @@ export default function BlockReimbursementCategories({
         <div className="card card-last">
             {!compact && (
                 <div className="card-header">
-                    <div className="flex">
-                        <div className="flex flex-grow">
-                            <div className="card-title">
-                                {categories?.meta
-                                    ? `Declaratie categorieën (${categories?.meta.total})`
-                                    : `Declaratie categorieën`}
-                            </div>
-                        </div>
+                    <div className="flex flex-grow card-title">
+                        {categories?.meta
+                            ? `Declaratie categorieën (${categories?.meta.total})`
+                            : `Declaratie categorieën`}
+                    </div>
 
-                        <div className="flex">
-                            <div className="block block-inline-filters">
-                                <a
-                                    className="button button-primary button-sm"
-                                    id="add_reimbursement_category"
-                                    onClick={() => editReimbursementCategory()}>
-                                    <em className="mdi mdi-plus-circle icon-start" />
-                                    {translate('Toevoegen')}
-                                </a>
-                            </div>
+                    <div className="card-header-filters">
+                        <div className="block block-inline-filters">
+                            <a
+                                className="button button-primary button-sm"
+                                id="add_reimbursement_category"
+                                onClick={() => editReimbursementCategory()}>
+                                <em className="mdi mdi-plus-circle icon-start" />
+                                {translate('Toevoegen')}
+                            </a>
                         </div>
                     </div>
                 </div>

diff --git a/react/src/dashboard/components/elements/card/Card.tsx b/react/src/dashboard/components/elements/card/Card.tsx
@@ -18,7 +18,7 @@ export default function Card({
 }) {
     return (
         <div className={'card'}>
-            <div className="card-header card-header-next">
+            <div className="card-header">
                 <div className="card-title flex flex-grow">{title}</div>
                 <div className="card-header-actions">
                     {buttons && (

diff --git a/...ts/elements/funds-provider-products-required-table/FundsProviderProductsRequiredTable.tsx b/...ts/elements/funds-provider-products-required-table/FundsProviderProductsRequiredTable.tsx
@@ -18,13 +18,9 @@ export default function FundsProviderProductsRequiredTable({
     return (
         <div className="card card-no-shadow card-bordered card-overflow-hidden">
             <div className="card-header card-header-md clickable" onClick={() => setShowFunds(!showFunds)}>
-                <div className="flex-row">
-                    <div className="flex-col flex-grow">
-                        <div className="card-title">
-                            <div className={`mdi ${showFunds ? 'mdi-menu-down' : 'mdi-menu-right'}`} />
-                            <div>Fondsen die vereisen dat u een aanbod plaatst ({funds.length})</div>
-                        </div>
-                    </div>
+                <div className="card-title">
+                    <div className={`mdi ${showFunds ? 'mdi-menu-down' : 'mdi-menu-right'}`} />
+                    <div>Fondsen die vereisen dat u een aanbod plaatst ({funds.length})</div>
                 </div>
             </div>
 

diff --git a/react/src/dashboard/components/elements/tables/EventLogsTable.tsx b/react/src/dashboard/components/elements/tables/EventLogsTable.tsx
@@ -135,7 +135,7 @@ export default function EventLogsTable({
 
     return (
         <div className="card">
-            <div className="card-header card-header-next">
+            <div className="card-header">
                 <div className="card-title flex flex-grow">
                     {title || 'Activiteitenlogboek'} ({logs.meta.total})
                 </div>