From 9d723ff758bd8b2d1990a8706cee26a08f73f185 Mon Sep 17 00:00:00 2001
From: Yaroslav Kosterin <ateamcms@gmail.com>
Date: Fri, 22 Aug 2025 17:17:12 +0300
Subject: [PATCH 01/29] add prefill fund request fields with person bsn data

---
 .../pages/funds-request/FundRequest.tsx       | 26 +++++++++++++++++++
 react/src/webshop/services/FundService.ts     |  4 +++
 2 files changed, 30 insertions(+)

diff --git a/react/src/webshop/components/pages/funds-request/FundRequest.tsx b/react/src/webshop/components/pages/funds-request/FundRequest.tsx
index 2dc507a39..054249407 100644
--- a/react/src/webshop/components/pages/funds-request/FundRequest.tsx
+++ b/react/src/webshop/components/pages/funds-request/FundRequest.tsx
@@ -102,6 +102,7 @@ export default function FundRequest() {
     const [vouchers, setVouchers] = useState<Array<Voucher>>(null);
     const [recordTypes, setRecordTypes] = useState<Array<RecordType>>(null);
     const [fundRequests, setFundRequests] = useState<Array<FundRequest>>(null);
+    const [personApiRecordsFetch, setPersonApiRecordsFetch] = useState(false);
 
     const bsnIsKnown = useMemo(() => !!authIdentity?.bsn, [authIdentity]);
     const emailSetupShow = useMemo(() => !authIdentity?.email, [authIdentity]);
@@ -461,6 +462,28 @@ export default function FundRequest() {
             .finally(() => setProgress(100));
     }, [authIdentity, fund, fundRequestService, setProgress]);
 
+    const checkPersonBsnApiRecords = useCallback(() => {
+        if (!bsnIsKnown || !fund || !authIdentity || !fund.organization.has_person_bsn_api || personApiRecordsFetch) {
+            return;
+        }
+
+        setPersonApiRecordsFetch(true);
+
+        fundService.getPersonRecords(fund.id).then((res) => {
+            setPendingCriteria((criteria) => {
+                return [
+                    ...criteria.map((criterion) => {
+                        criterion.input_value =
+                            res.data.filter((item) => item.record_type_key === criterion.record_type_key)[0]?.value ||
+                            criterion.input_value;
+
+                        return criterion;
+                    }),
+                ];
+            });
+        });
+    }, [bsnIsKnown, fund, fundService, authIdentity, personApiRecordsFetch]);
+
     useEffect(() => {
         fetchFund();
     }, [fetchFund]);
@@ -540,6 +563,8 @@ export default function FundRequest() {
 
         setPendingCriteria(pendingCriteria.map((criterion) => transformInvalidCriteria(criterion)));
 
+        checkPersonBsnApiRecords();
+
         setAutoSubmit(
             digidAvailable &&
                 fund.auto_validation &&
@@ -558,6 +583,7 @@ export default function FundRequest() {
         goToActivationComponent,
         navigateState,
         vouchers,
+        checkPersonBsnApiRecords,
     ]);
 
     useEffect(() => {
diff --git a/react/src/webshop/services/FundService.ts b/react/src/webshop/services/FundService.ts
index 5a4f6ddbf..2ae6d104d 100644
--- a/react/src/webshop/services/FundService.ts
+++ b/react/src/webshop/services/FundService.ts
@@ -58,6 +58,10 @@ export class FundService<T = Fund> {
         return this.apiRequest.post(`${this.prefix}/redeem`, { code });
     }
 
+    public getPersonRecords(id: number): Promise<ResponseSimple<Array<{ record_type_key: string; value: string }>>> {
+        return this.apiRequest.get(`${this.prefix}/${id}/person/records`);
+    }
+
     public getCriterionControlType(record_type: RecordType, operator = null) {
         const control_type =
             record_type.control_type === 'select' ? 'select_control' : `ui_control_${record_type.control_type}`;

From aa0127f6210f975cadaea69b3dcdc9e09f690e3f Mon Sep 17 00:00:00 2001
From: dev-rminds <dev@rminds.nl>
Date: Thu, 4 Sep 2025 14:34:16 +0300
Subject: [PATCH 02/29] prefill fund request fields refactoring

---
 .../webshop/components/pages/funds-request/FundRequest.tsx    | 2 +-
 react/src/webshop/services/FundService.ts                     | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/react/src/webshop/components/pages/funds-request/FundRequest.tsx b/react/src/webshop/components/pages/funds-request/FundRequest.tsx
index 054249407..9c3d5baea 100644
--- a/react/src/webshop/components/pages/funds-request/FundRequest.tsx
+++ b/react/src/webshop/components/pages/funds-request/FundRequest.tsx
@@ -469,7 +469,7 @@ export default function FundRequest() {
 
         setPersonApiRecordsFetch(true);
 
-        fundService.getPersonRecords(fund.id).then((res) => {
+        fundService.getPersonPrefills(fund.id).then((res) => {
             setPendingCriteria((criteria) => {
                 return [
                     ...criteria.map((criterion) => {
diff --git a/react/src/webshop/services/FundService.ts b/react/src/webshop/services/FundService.ts
index 2ae6d104d..dff3efcde 100644
--- a/react/src/webshop/services/FundService.ts
+++ b/react/src/webshop/services/FundService.ts
@@ -58,8 +58,8 @@ export class FundService<T = Fund> {
         return this.apiRequest.post(`${this.prefix}/redeem`, { code });
     }
 
-    public getPersonRecords(id: number): Promise<ResponseSimple<Array<{ record_type_key: string; value: string }>>> {
-        return this.apiRequest.get(`${this.prefix}/${id}/person/records`);
+    public getPersonPrefills(id: number): Promise<ResponseSimple<Array<{ record_type_key: string; value: string }>>> {
+        return this.apiRequest.get(`${this.prefix}/${id}/prefills`);
     }
 
     public getCriterionControlType(record_type: RecordType, operator = null) {

From 947a429dfb3cf2377dd1b4d0e1d38c913a5fc355 Mon Sep 17 00:00:00 2001
From: dev-rminds <dev@rminds.nl>
Date: Thu, 4 Sep 2025 14:44:20 +0300
Subject: [PATCH 03/29] add flag to allow fund-request prefill

---
 react/src/dashboard/props/models/Fund.tsx                | 1 +
 .../components/pages/funds-request/FundRequest.tsx       | 9 ++++++++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/react/src/dashboard/props/models/Fund.tsx b/react/src/dashboard/props/models/Fund.tsx
index 8b4538554..ff71bc323 100644
--- a/react/src/dashboard/props/models/Fund.tsx
+++ b/react/src/dashboard/props/models/Fund.tsx
@@ -97,6 +97,7 @@ export default interface Fund {
         auth_2fa_restrict_bi_connections?: boolean;
     };
     allow_fund_requests?: boolean;
+    allow_fund_request_prefill?: boolean;
     allow_prevalidations?: boolean;
     tags: Array<Tag>;
     faq?: Array<Faq>;
diff --git a/react/src/webshop/components/pages/funds-request/FundRequest.tsx b/react/src/webshop/components/pages/funds-request/FundRequest.tsx
index 9c3d5baea..013034707 100644
--- a/react/src/webshop/components/pages/funds-request/FundRequest.tsx
+++ b/react/src/webshop/components/pages/funds-request/FundRequest.tsx
@@ -463,7 +463,14 @@ export default function FundRequest() {
     }, [authIdentity, fund, fundRequestService, setProgress]);
 
     const checkPersonBsnApiRecords = useCallback(() => {
-        if (!bsnIsKnown || !fund || !authIdentity || !fund.organization.has_person_bsn_api || personApiRecordsFetch) {
+        if (
+            !bsnIsKnown ||
+            !fund ||
+            !authIdentity ||
+            !fund.allow_fund_request_prefill ||
+            !fund.organization.has_person_bsn_api ||
+            personApiRecordsFetch
+        ) {
             return;
         }
 

From 5202aa2d63a083d17dc1c674047625ac31fda2eb Mon Sep 17 00:00:00 2001
From: Yaroslav Kosterin <ateamcms@gmail.com>
Date: Thu, 11 Sep 2025 12:47:10 +0300
Subject: [PATCH 04/29] change products count on provider page, fix link to
 provider products

---
 .../components/elements/block-products/BlockProducts.tsx        | 2 +-
 .../webshop/components/pages/providers-show/ProvidersShow.tsx   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/react/src/webshop/components/elements/block-products/BlockProducts.tsx b/react/src/webshop/components/elements/block-products/BlockProducts.tsx
index 504b05a51..cf2e6c681 100644
--- a/react/src/webshop/components/elements/block-products/BlockProducts.tsx
+++ b/react/src/webshop/components/elements/block-products/BlockProducts.tsx
@@ -52,7 +52,7 @@ export default function BlockProducts({
 
             {showLoadMore && (
                 <div className="block block-show-more">
-                    <StateNavLink className="button button-primary show-more-button" name={'products'} params={filters}>
+                    <StateNavLink className="button button-primary show-more-button" name={'products'} query={filters}>
                         {translate(`block_products.buttons.more`)}
                         <em className="mdi mdi-arrow-right icon-right" aria-hidden="true" />
                     </StateNavLink>
diff --git a/react/src/webshop/components/pages/providers-show/ProvidersShow.tsx b/react/src/webshop/components/pages/providers-show/ProvidersShow.tsx
index 6c4875978..7abcdab78 100644
--- a/react/src/webshop/components/pages/providers-show/ProvidersShow.tsx
+++ b/react/src/webshop/components/pages/providers-show/ProvidersShow.tsx
@@ -58,7 +58,7 @@ export default function ProvidersShow() {
         setProgress(0);
 
         productService
-            .list({ per_page: 3, organization_id: provider?.id })
+            .list({ per_page: 6, organization_id: provider?.id })
             .then((res) => setProducts(res.data))
             .catch((err: ErrorResponse) => pushDanger(translate('push.error'), err.data.message))
             .finally(() => setProgress(100));

From 71b80dac68ea2e140441c05e7ba1ccd66aab5682 Mon Sep 17 00:00:00 2001
From: Yaroslav Kosterin <ateamcms@gmail.com>
Date: Thu, 11 Sep 2025 17:45:25 +0300
Subject: [PATCH 05/29] add headings to faq

---
 .../scss/includes/blocks/block-faq.scss       | 39 ++++++++
 .../elements/faq-editor-funds/FaqEditor.tsx   | 20 ++--
 .../faq-editor-funds/FaqEditorItem.tsx        | 69 +++++++++----
 .../src/dashboard/i18n/nl/i18n-components.js  |  1 +
 react/src/dashboard/props/models/Faq.tsx      |  2 +
 .../elements/faq-block/FaqBlock.tsx           | 97 ++++++++++++-------
 .../components/elements/sections/Section.tsx  |  4 +-
 7 files changed, 172 insertions(+), 60 deletions(-)

diff --git a/react/assets/forus-webshop/scss/includes/blocks/block-faq.scss b/react/assets/forus-webshop/scss/includes/blocks/block-faq.scss
index b2959800c..5da01ada5 100644
--- a/react/assets/forus-webshop/scss/includes/blocks/block-faq.scss
+++ b/react/assets/forus-webshop/scss/includes/blocks/block-faq.scss
@@ -4,6 +4,23 @@
     max-width: 100%;
     align-items: center;
     gap: 8px;
+    margin-bottom: 40px;
+
+    .block-faq-header {
+        max-width: 100%;
+        width: 1080px;
+        margin-bottom: 15px;
+
+        .block-faq-title {
+            color: #222;
+            font: 700 22px/32px var(--base-font);
+        }
+
+        .block-faq-subtitle {
+            color: #353535;
+            font: 400 18px/29px var(--base-font);
+        }
+    }
 
     .faq-item {
         background: #fff;
@@ -88,7 +105,25 @@
         }
     }
 
+    &:last-child {
+        margin-bottom: 0;
+    }
+
     @media screen and (max-width: 1000px) {
+        margin-bottom: 25px;
+
+        .block-faq-header {
+            margin-bottom: 5px;
+
+            .block-faq-title {
+                font: 700 16px/24px var(--base-font);
+            }
+
+            .block-faq-subtitle {
+                font: 400 12px/19px var(--base-font);
+            }
+        }
+
         .faq-item {
             .faq-item-header {
                 padding: 15px 14px 15px 15px;
@@ -113,5 +148,9 @@
                 font: 400 14px var(--base-font);
             }
         }
+
+        &:last-child {
+            margin-bottom: 0;
+        }
     }
 }
diff --git a/react/src/dashboard/components/elements/faq-editor-funds/FaqEditor.tsx b/react/src/dashboard/components/elements/faq-editor-funds/FaqEditor.tsx
index aa916cccb..430726136 100644
--- a/react/src/dashboard/components/elements/faq-editor-funds/FaqEditor.tsx
+++ b/react/src/dashboard/components/elements/faq-editor-funds/FaqEditor.tsx
@@ -42,12 +42,15 @@ export default function FaqEditor({
         useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
     );
 
-    const addQuestion = useCallback(() => {
-        const uid = uniqueId();
+    const addQuestion = useCallback(
+        (type: 'question' | 'title') => {
+            const uid = uniqueId();
 
-        setFaq([...faq, { uid, title: '', description: '' }]);
-        setUnCollapsedList((list) => [...list, uid]);
-    }, [faq, setFaq]);
+            setFaq([...faq, { uid, title: '', subtitle: '', description: '', type }]);
+            setUnCollapsedList((list) => [...list, uid]);
+        },
+        [faq, setFaq],
+    );
 
     const handleDragEnd = useCallback(
         (event) => {
@@ -149,10 +152,15 @@ export default function FaqEditor({
             </DndContext>
 
             <div className="faq-editor-actions">
-                <div className="button button-primary" onClick={addQuestion}>
+                <div className="button button-primary" onClick={() => addQuestion('question')}>
                     <em className="mdi mdi-plus-circle icon-start" />
                     {translate('components.faq_editor.buttons.add_question')}
                 </div>
+
+                <div className="button button-default" onClick={() => addQuestion('title')}>
+                    <em className="mdi mdi-plus-circle icon-start" />
+                    {translate('components.faq_editor.buttons.add_title')}
+                </div>
             </div>
         </div>
     );
diff --git a/react/src/dashboard/components/elements/faq-editor-funds/FaqEditorItem.tsx b/react/src/dashboard/components/elements/faq-editor-funds/FaqEditorItem.tsx
index 8c18662a5..731469f70 100644
--- a/react/src/dashboard/components/elements/faq-editor-funds/FaqEditorItem.tsx
+++ b/react/src/dashboard/components/elements/faq-editor-funds/FaqEditorItem.tsx
@@ -41,18 +41,35 @@ export default function FaqEditorItem({
             <div className="question-header">
                 <em className="mdi mdi-dots-vertical question-drag" {...attributes} {...listeners}></em>
 
-                <div
-                    className={`question-icon ${
-                        isCollapsed && (!faqItem.title || !faqItem.description) ? 'text-danger' : ''
-                    }`}>
-                    <em className="mdi mdi-frequently-asked-questions" />
-                </div>
+                {faqItem.type === 'question' ? (
+                    <div
+                        className={`question-icon ${
+                            isCollapsed && (!faqItem.title || !faqItem.description) ? 'text-danger' : ''
+                        }`}>
+                        <em className="mdi mdi-frequently-asked-questions" />
+                    </div>
+                ) : (
+                    <div
+                        className={`question-icon ${
+                            isCollapsed && (!faqItem.title || !faqItem.subtitle) ? 'text-danger' : ''
+                        }`}>
+                        <em className="mdi mdi-format-title" />
+                    </div>
+                )}
 
                 <div className="question-title">
                     {!isCollapsed ? (
-                        <span>{!faqItem.id ? 'Nieuwe vraag' : 'Vraag aanpassen'}</span>
+                        <span>
+                            {!faqItem.id
+                                ? faqItem.type === 'question'
+                                    ? 'Nieuwe vraag'
+                                    : 'Nieuwe titel'
+                                : faqItem.type === 'question'
+                                  ? 'Vraag aanpassen'
+                                  : 'Titel aanpassen'}
+                        </span>
                     ) : (
-                        <span>{faqItem.title || 'Geen vraag'}</span>
+                        <span>{faqItem.title || (faqItem.type === 'question' ? 'Geen vraag' : 'Geen titel')}</span>
                     )}
                 </div>
 
@@ -96,17 +113,31 @@ export default function FaqEditorItem({
                             <FormError error={errors?.[`faq.${index}.title`]} />
                         </div>
 
-                        <div className="form-group">
-                            <label className="form-label form-label-required">Antwoord</label>
-                            <MarkdownEditor
-                                value={faqItem.description_html}
-                                onChange={(description) => onChange({ description: description })}
-                                extendedOptions={true}
-                                placeholder={translate('organization_edit.labels.description')}
-                            />
-                            <div className="form-hint">Max. 5000 tekens</div>
-                            <FormError error={errors?.[`faq.${index}.description`]} />
-                        </div>
+                        {faqItem.type === 'question' ? (
+                            <div className="form-group">
+                                <label className="form-label form-label-required">Antwoord</label>
+                                <MarkdownEditor
+                                    value={faqItem.description_html}
+                                    onChange={(description) => onChange({ description: description })}
+                                    extendedOptions={true}
+                                    placeholder={translate('organization_edit.labels.description')}
+                                />
+                                <div className="form-hint">Max. 5000 tekens</div>
+                                <FormError error={errors?.[`faq.${index}.description`]} />
+                            </div>
+                        ) : (
+                            <div className="form-group">
+                                <label className="form-label form-label-required">Subtitel</label>
+                                <textarea
+                                    className="r-n form-control"
+                                    placeholder="Subtitel"
+                                    value={faqItem.subtitle}
+                                    onChange={(e) => onChange({ subtitle: e.target.value })}
+                                />
+                                <div className="form-hint">Max. 500 tekens</div>
+                                <FormError error={errors?.[`faq.${index}.subtitle`]} />
+                            </div>
+                        )}
                     </div>
                 </div>
             )}
diff --git a/react/src/dashboard/i18n/nl/i18n-components.js b/react/src/dashboard/i18n/nl/i18n-components.js
index c969865ba..0edca4794 100644
--- a/react/src/dashboard/i18n/nl/i18n-components.js
+++ b/react/src/dashboard/i18n/nl/i18n-components.js
@@ -137,6 +137,7 @@ export default {
         buttons: {
             save: 'Bevestigen',
             add_question: 'Vraag toevoegen',
+            add_title: 'Voeg titel toe',
         },
         item: {
             buttons: {
diff --git a/react/src/dashboard/props/models/Faq.tsx b/react/src/dashboard/props/models/Faq.tsx
index 2df838f92..6fbb0e494 100644
--- a/react/src/dashboard/props/models/Faq.tsx
+++ b/react/src/dashboard/props/models/Faq.tsx
@@ -1,6 +1,8 @@
 export default interface Faq {
     id?: number;
+    type?: 'question' | 'title';
     title?: string;
+    subtitle?: string;
     description?: string;
     description_html?: string;
 }
diff --git a/react/src/webshop/components/elements/faq-block/FaqBlock.tsx b/react/src/webshop/components/elements/faq-block/FaqBlock.tsx
index 9e6261da2..a7cf6ba30 100644
--- a/react/src/webshop/components/elements/faq-block/FaqBlock.tsx
+++ b/react/src/webshop/components/elements/faq-block/FaqBlock.tsx
@@ -1,6 +1,6 @@
 import Markdown from '../markdown/Markdown';
 import { clickOnKeyEnter } from '../../../../dashboard/helpers/wcag';
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import Section from '../sections/Section';
 import Faq from '../../../../dashboard/props/models/Faq';
 import classNames from 'classnames';
@@ -8,7 +8,29 @@ import classNames from 'classnames';
 export default function FaqBlock({ title, items }: { title: string; items?: Array<Faq> }) {
     const [visibleFaq, setVisibleFaq] = useState({});
 
-    if (!items?.length) {
+    const faqGroups = useMemo((): Array<{ heading: Faq; questions: Array<Faq> }> => {
+        let currentGroup = null;
+
+        return items.reduce((groups, item) => {
+            if (item.type === 'title') {
+                currentGroup = { heading: item, questions: [] };
+                return [...groups, currentGroup];
+            }
+
+            if (item.type === 'question') {
+                if (!currentGroup) {
+                    currentGroup = { heading: null, questions: [] };
+                    groups.push(currentGroup);
+                }
+
+                currentGroup.questions.push(item);
+
+                return groups;
+            }
+        }, []);
+    }, [items]);
+
+    if (!faqGroups?.length) {
         return null;
     }
 
@@ -16,40 +38,49 @@ export default function FaqBlock({ title, items }: { title: string; items?: Arra
         <Section type={'faq'}>
             {title && <h2 className="section-title">{title}</h2>}
 
-            <div className="block block-faq">
-                {items.map((item, index) => (
-                    <div
-                        key={index}
-                        className={classNames('faq-item', visibleFaq?.[item.id] && 'active')}
-                        aria-expanded={!!visibleFaq?.[item.id]}
-                        aria-controls={`faq_item_${item.id}`}>
-                        <div
-                            className="faq-item-header"
-                            onClick={() => {
-                                setVisibleFaq((list) => ({ ...list, [item.id]: !list?.[item.id] }));
-                            }}
-                            onKeyDown={clickOnKeyEnter}
-                            role="button"
-                            tabIndex={0}>
-                            <h2 className="faq-item-title">{item.title}</h2>
-                            <div className="faq-item-chevron">
-                                <em
-                                    className={classNames(
-                                        'mdi',
-                                        visibleFaq?.[item.id] ? 'mdi-chevron-down' : 'mdi mdi-chevron-right',
-                                    )}
-                                />
-                            </div>
+            {faqGroups.map((group, index) => (
+                <div className="block block-faq" key={index}>
+                    {group.heading && (
+                        <div className="block-faq-header">
+                            <div className="block-faq-title">{group.heading.title}</div>
+                            <div className="block-faq-subtitle">{group.heading.subtitle}</div>
                         </div>
+                    )}
+
+                    {group.questions.map((item, index) => (
                         <div
-                            className="faq-item-content"
-                            id={`faq_item_${item.id}`}
-                            aria-hidden={!visibleFaq?.[item.id]}>
-                            <Markdown content={item.description_html} />
+                            key={index}
+                            className={classNames('faq-item', visibleFaq?.[item.id] && 'active')}
+                            aria-expanded={!!visibleFaq?.[item.id]}
+                            aria-controls={`faq_item_${item.id}`}>
+                            <div
+                                className="faq-item-header"
+                                onClick={() => {
+                                    setVisibleFaq((list) => ({ ...list, [item.id]: !list?.[item.id] }));
+                                }}
+                                onKeyDown={clickOnKeyEnter}
+                                role="button"
+                                tabIndex={0}>
+                                <h2 className="faq-item-title">{item.title}</h2>
+                                <div className="faq-item-chevron">
+                                    <em
+                                        className={classNames(
+                                            'mdi',
+                                            visibleFaq?.[item.id] ? 'mdi-chevron-down' : 'mdi mdi-chevron-right',
+                                        )}
+                                    />
+                                </div>
+                            </div>
+                            <div
+                                className="faq-item-content"
+                                id={`faq_item_${item.id}`}
+                                aria-hidden={!visibleFaq?.[item.id]}>
+                                <Markdown content={item.description_html} />
+                            </div>
                         </div>
-                    </div>
-                ))}
-            </div>
+                    ))}
+                </div>
+            ))}
         </Section>
     );
 }
diff --git a/react/src/webshop/components/elements/sections/Section.tsx b/react/src/webshop/components/elements/sections/Section.tsx
index e0df642e5..8c16eb199 100644
--- a/react/src/webshop/components/elements/sections/Section.tsx
+++ b/react/src/webshop/components/elements/sections/Section.tsx
@@ -1,4 +1,4 @@
-import React, { ReactElement } from 'react';
+import React, { ReactNode } from 'react';
 import classNames from 'classnames';
 
 export default function Section({
@@ -22,7 +22,7 @@ export default function Section({
         | 'pre-check'
         | 'footer';
     wrapper?: boolean;
-    children: ReactElement | ReactElement[];
+    children: ReactNode | ReactNode[];
 }) {
     return (
         <section

From f535c61a30c8c478d74fda0f4b84f8b1cb230b49 Mon Sep 17 00:00:00 2001
From: Yaroslav Kosterin <ateamcms@gmail.com>
Date: Fri, 12 Sep 2025 10:55:12 +0300
Subject: [PATCH 06/29] change node version for github actions

---
 .github/workflows/compile_and_build.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/compile_and_build.yml b/.github/workflows/compile_and_build.yml
index 205e44b67..10682e52d 100644
--- a/.github/workflows/compile_and_build.yml
+++ b/.github/workflows/compile_and_build.yml
@@ -9,7 +9,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 21
+          node-version: 22
 
       - name: Install dependencies
         run: npm install

From 71fcd7512684775e403336b51670f28100a8fcbe Mon Sep 17 00:00:00 2001
From: dev-rminds <dev@rminds.nl>
Date: Fri, 12 Sep 2025 11:51:51 +0300
Subject: [PATCH 07/29] faq block heading css refacoring

---
 .../scss/includes/blocks/block-faq.scss       | 30 +++----
 .../elements/faq-editor-funds/FaqEditor.tsx   | 18 +++--
 .../elements/faq-block/FaqBlock.tsx           | 80 ++++++++++---------
 3 files changed, 70 insertions(+), 58 deletions(-)

diff --git a/react/assets/forus-webshop/scss/includes/blocks/block-faq.scss b/react/assets/forus-webshop/scss/includes/blocks/block-faq.scss
index 5da01ada5..1310e94db 100644
--- a/react/assets/forus-webshop/scss/includes/blocks/block-faq.scss
+++ b/react/assets/forus-webshop/scss/includes/blocks/block-faq.scss
@@ -3,22 +3,32 @@
     flex-direction: column;
     max-width: 100%;
     align-items: center;
-    gap: 8px;
-    margin-bottom: 40px;
+    gap: 30px;
+
+    .block-faq-group {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+    }
 
     .block-faq-header {
         max-width: 100%;
         width: 1080px;
         margin-bottom: 15px;
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
 
         .block-faq-title {
             color: #222;
-            font: 700 22px/32px var(--base-font);
+            font: 700 22px/30px var(--base-font);
+            margin: 0 0;
         }
 
         .block-faq-subtitle {
             color: #353535;
-            font: 400 18px/29px var(--base-font);
+            font: 400 18px/24px var(--base-font);
+            margin: 0 0;
         }
     }
 
@@ -105,12 +115,8 @@
         }
     }
 
-    &:last-child {
-        margin-bottom: 0;
-    }
-
     @media screen and (max-width: 1000px) {
-        margin-bottom: 25px;
+        gap: 20px;
 
         .block-faq-header {
             margin-bottom: 5px;
@@ -120,7 +126,7 @@
             }
 
             .block-faq-subtitle {
-                font: 400 12px/19px var(--base-font);
+                font: 400 12px/20px var(--base-font);
             }
         }
 
@@ -148,9 +154,5 @@
                 font: 400 14px var(--base-font);
             }
         }
-
-        &:last-child {
-            margin-bottom: 0;
-        }
     }
 }
diff --git a/react/src/dashboard/components/elements/faq-editor-funds/FaqEditor.tsx b/react/src/dashboard/components/elements/faq-editor-funds/FaqEditor.tsx
index 430726136..198140a4e 100644
--- a/react/src/dashboard/components/elements/faq-editor-funds/FaqEditor.tsx
+++ b/react/src/dashboard/components/elements/faq-editor-funds/FaqEditor.tsx
@@ -7,7 +7,15 @@ import {
 } from '@dnd-kit/sortable';
 import { uniq, uniqueId } from 'lodash';
 import { ResponseError, ResponseErrorData } from '../../../props/ApiResponses';
-import { closestCenter, DndContext, KeyboardSensor, PointerSensor, useSensor, useSensors } from '@dnd-kit/core';
+import {
+    closestCenter,
+    DndContext,
+    DragEndEvent,
+    KeyboardSensor,
+    PointerSensor,
+    useSensor,
+    useSensors,
+} from '@dnd-kit/core';
 import Faq from '../../../props/models/Faq';
 import FaqEditorItem from './FaqEditorItem';
 import { useFaqService } from '../../../services/FaqService';
@@ -53,13 +61,13 @@ export default function FaqEditor({
     );
 
     const handleDragEnd = useCallback(
-        (event) => {
+        (event: DragEndEvent) => {
             const { active, over } = event;
 
             if (active.id !== over.id) {
                 const items = faq.map((preCheck) => preCheck.uid);
-                const oldIndex = items.indexOf(active.id);
-                const newIndex = items.indexOf(over.id);
+                const oldIndex = items.indexOf(active.id.toString());
+                const newIndex = items.indexOf(over.id.toString());
 
                 setFaq(arrayMove(faq, oldIndex, newIndex));
             }
@@ -68,7 +76,7 @@ export default function FaqEditor({
     );
 
     const askConfirmation = useCallback(
-        (onConfirm): void => {
+        (onConfirm: () => void): void => {
             openModal((modal) => (
                 <ModalDangerZone
                     modal={modal}
diff --git a/react/src/webshop/components/elements/faq-block/FaqBlock.tsx b/react/src/webshop/components/elements/faq-block/FaqBlock.tsx
index a7cf6ba30..a3e4eb00a 100644
--- a/react/src/webshop/components/elements/faq-block/FaqBlock.tsx
+++ b/react/src/webshop/components/elements/faq-block/FaqBlock.tsx
@@ -38,49 +38,51 @@ export default function FaqBlock({ title, items }: { title: string; items?: Arra
         <Section type={'faq'}>
             {title && <h2 className="section-title">{title}</h2>}
 
-            {faqGroups.map((group, index) => (
-                <div className="block block-faq" key={index}>
-                    {group.heading && (
-                        <div className="block-faq-header">
-                            <div className="block-faq-title">{group.heading.title}</div>
-                            <div className="block-faq-subtitle">{group.heading.subtitle}</div>
-                        </div>
-                    )}
+            <div className="block block-faq">
+                {faqGroups.map((group, index) => (
+                    <div className="block-faq-group" key={index}>
+                        {group.heading && (
+                            <div className="block-faq-header">
+                                <h3 className="block-faq-title">{group.heading.title}</h3>
+                                <p className="block-faq-subtitle">{group.heading.subtitle}</p>
+                            </div>
+                        )}
 
-                    {group.questions.map((item, index) => (
-                        <div
-                            key={index}
-                            className={classNames('faq-item', visibleFaq?.[item.id] && 'active')}
-                            aria-expanded={!!visibleFaq?.[item.id]}
-                            aria-controls={`faq_item_${item.id}`}>
+                        {group.questions.map((item, index) => (
                             <div
-                                className="faq-item-header"
-                                onClick={() => {
-                                    setVisibleFaq((list) => ({ ...list, [item.id]: !list?.[item.id] }));
-                                }}
-                                onKeyDown={clickOnKeyEnter}
-                                role="button"
-                                tabIndex={0}>
-                                <h2 className="faq-item-title">{item.title}</h2>
-                                <div className="faq-item-chevron">
-                                    <em
-                                        className={classNames(
-                                            'mdi',
-                                            visibleFaq?.[item.id] ? 'mdi-chevron-down' : 'mdi mdi-chevron-right',
-                                        )}
-                                    />
+                                key={index}
+                                className={classNames('faq-item', visibleFaq?.[item.id] && 'active')}
+                                aria-expanded={!!visibleFaq?.[item.id]}
+                                aria-controls={`faq_item_${item.id}`}>
+                                <div
+                                    className="faq-item-header"
+                                    onClick={() => {
+                                        setVisibleFaq((list) => ({ ...list, [item.id]: !list?.[item.id] }));
+                                    }}
+                                    onKeyDown={clickOnKeyEnter}
+                                    role="button"
+                                    tabIndex={0}>
+                                    <h2 className="faq-item-title">{item.title}</h2>
+                                    <div className="faq-item-chevron">
+                                        <em
+                                            className={classNames(
+                                                'mdi',
+                                                visibleFaq?.[item.id] ? 'mdi-chevron-down' : 'mdi mdi-chevron-right',
+                                            )}
+                                        />
+                                    </div>
+                                </div>
+                                <div
+                                    className="faq-item-content"
+                                    id={`faq_item_${item.id}`}
+                                    aria-hidden={!visibleFaq?.[item.id]}>
+                                    <Markdown content={item.description_html} />
                                 </div>
                             </div>
-                            <div
-                                className="faq-item-content"
-                                id={`faq_item_${item.id}`}
-                                aria-hidden={!visibleFaq?.[item.id]}>
-                                <Markdown content={item.description_html} />
-                            </div>
-                        </div>
-                    ))}
-                </div>
-            ))}
+                        ))}
+                    </div>
+                ))}
+            </div>
         </Section>
     );
 }

From 456522ad6b4edd12f856505b438d8dd453552882 Mon Sep 17 00:00:00 2001
From: dev-rminds <dev@rminds.nl>
Date: Fri, 12 Sep 2025 12:28:15 +0300
Subject: [PATCH 08/29] increase section header spacing and fix default content
 layout with for accessibility and privacy page

---
 .../scss/includes/blocks/block-accessibility.scss    | 12 +++++++++---
 .../scss/includes/blocks/block-markdown.scss         |  4 ++++
 .../forus-webshop/scss/includes/layout/_header.scss  |  2 +-
 .../scss/includes/sections/_section.scss             |  2 +-
 .../components/pages/cms-pages/Accessibility.tsx     |  6 +++---
 .../webshop/components/pages/cms-pages/Privacy.tsx   |  4 ++--
 6 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/react/assets/forus-webshop/scss/includes/blocks/block-accessibility.scss b/react/assets/forus-webshop/scss/includes/blocks/block-accessibility.scss
index b5f438871..2a5e83860 100644
--- a/react/assets/forus-webshop/scss/includes/blocks/block-accessibility.scss
+++ b/react/assets/forus-webshop/scss/includes/blocks/block-accessibility.scss
@@ -2,9 +2,11 @@
     width: 100%;
     padding: 32px;
     background: #fff;
-    box-shadow: var(--box-shadow);
     margin-bottom: 40px;
-    border-radius: var(--border-radius);
+    background: var(--showcase-item-background);
+    border-radius: var(--showcase-item-border-radius);
+    box-shadow: var(--showcase-item-shadow);
+    border: var(--showcase-item-border);
 
     .block-accessibility-header {
         font: 400 18px/27px var(--base-font);
@@ -39,9 +41,13 @@
             }
         }
 
+        &:first-child {
+            padding-top: 0;
+        }
+
         &:last-child {
             border-bottom: none;
             padding-bottom: 0;
         }
     }
-}
\ No newline at end of file
+}
diff --git a/react/assets/forus-webshop/scss/includes/blocks/block-markdown.scss b/react/assets/forus-webshop/scss/includes/blocks/block-markdown.scss
index 3d04e4f3e..34a7dc749 100644
--- a/react/assets/forus-webshop/scss/includes/blocks/block-markdown.scss
+++ b/react/assets/forus-webshop/scss/includes/blocks/block-markdown.scss
@@ -239,5 +239,9 @@
             font: 500 1.3em var(--heading-font-family);
             margin-bottom: 1em;
         }
+
+        &.block-markdown-large {
+            padding-right: 0;
+        }
     }
 }
diff --git a/react/assets/forus-webshop/scss/includes/layout/_header.scss b/react/assets/forus-webshop/scss/includes/layout/_header.scss
index 5d5f38a53..63b3dd21d 100644
--- a/react/assets/forus-webshop/scss/includes/layout/_header.scss
+++ b/react/assets/forus-webshop/scss/includes/layout/_header.scss
@@ -2,7 +2,7 @@
     .section-title {
         font: var(--heading-font);
         color: var(--heading-color);
-        margin: 0 0 20px;
+        margin: 0 0 30px;
         text-align: center;
     }
 
diff --git a/react/assets/forus-webshop/scss/includes/sections/_section.scss b/react/assets/forus-webshop/scss/includes/sections/_section.scss
index b8578276b..7b2d0bfd7 100644
--- a/react/assets/forus-webshop/scss/includes/sections/_section.scss
+++ b/react/assets/forus-webshop/scss/includes/sections/_section.scss
@@ -3,7 +3,7 @@
         color: var(--heading-color);
         font: var(--section-title-font);
         text-align: var(--section-title-align);
-        margin: 0 0 20px;
+        margin: 0 0 30px;
 
         a {
             font: inherit !important;
diff --git a/react/src/webshop/components/pages/cms-pages/Accessibility.tsx b/react/src/webshop/components/pages/cms-pages/Accessibility.tsx
index aa99eed8c..75a7e49b0 100644
--- a/react/src/webshop/components/pages/cms-pages/Accessibility.tsx
+++ b/react/src/webshop/components/pages/cms-pages/Accessibility.tsx
@@ -1,4 +1,4 @@
-import React, { Fragment, useMemo } from 'react';
+import React, { useMemo } from 'react';
 import CmsBlocks from '../../elements/cms-blocks/CmsBlocks';
 import useEnvData from '../../../hooks/useEnvData';
 import useCmsPage from './hooks/useCmsPage';
@@ -38,7 +38,7 @@ export default function Accessibility() {
                         {page && <CmsBlocks page={page} largeMarkdown={true} />}
 
                         {(!page.description_html || page.description_position !== 'replace') && (
-                            <Fragment>
+                            <div className={'wrapper'}>
                                 <div className="section-title text-left">{translate('accessibility.title')}</div>
                                 <div className="block block-accessibility">
                                     <div className="block-text">
@@ -270,7 +270,7 @@ export default function Accessibility() {
                                         </div>
                                     </div>
                                 </div>
-                            </Fragment>
+                            </div>
                         )}
                     </div>
                 </div>
diff --git a/react/src/webshop/components/pages/cms-pages/Privacy.tsx b/react/src/webshop/components/pages/cms-pages/Privacy.tsx
index 77c4e15d0..dfce9b781 100644
--- a/react/src/webshop/components/pages/cms-pages/Privacy.tsx
+++ b/react/src/webshop/components/pages/cms-pages/Privacy.tsx
@@ -27,7 +27,7 @@ export default function Privacy() {
                         {page && <CmsBlocks page={page} largeMarkdown={true} />}
 
                         {(!page.description_html || page.description_position !== 'replace') && (
-                            <Fragment>
+                            <div className={'wrapper'}>
                                 <div className="section-title text-left">
                                     {translate(`privacy.${envData.client_key}.title`, null, 'privacy.title')}
                                 </div>
@@ -134,7 +134,7 @@ export default function Privacy() {
                                         </Fragment>
                                     )}
                                 </div>
-                            </Fragment>
+                            </div>
                         )}
                     </div>
                 </div>

From 4302f32fe7d5f62adfad09d013931ba91d08bded Mon Sep 17 00:00:00 2001
From: dev-rminds <dev@rminds.nl>
Date: Fri, 12 Sep 2025 12:37:54 +0300
Subject: [PATCH 09/29] npm audit fix

---
 package-lock.json | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index d78b16d61..16dc1cd51 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5111,13 +5111,13 @@
       }
     },
     "node_modules/axios": {
-      "version": "1.8.3",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.8.3.tgz",
-      "integrity": "sha512-iP4DebzoNlP/YN2dpwCgb8zoCmhtkajzS48JvwmkSkXvPI3DHc7m+XYL5tGnSlJtR6nImXZmdCuN5aP8dh1d8A==",
+      "version": "1.12.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.12.0.tgz",
+      "integrity": "sha512-oXTDccv8PcfjZmPGlWsPSwtOJCZ/b6W5jAMCNcfwJbCzDckwG0jrYJFaWH1yvivfCXjVzV/SPDEhMB3Q+DSurg==",
       "license": "MIT",
       "dependencies": {
         "follow-redirects": "^1.15.6",
-        "form-data": "^4.0.0",
+        "form-data": "^4.0.4",
         "proxy-from-env": "^1.1.0"
       }
     },

From a3c948aaa31feca3acab0506ca0441f05aabf11a Mon Sep 17 00:00:00 2001
From: Yaroslav Kosterin <ateamcms@gmail.com>
Date: Fri, 12 Sep 2025 12:40:44 +0300
Subject: [PATCH 10/29] add expire config to voucher create modal

---
 .../components/modals/ModalVoucherCreate.tsx  | 84 +++++++++++++++----
 1 file changed, 69 insertions(+), 15 deletions(-)

diff --git a/react/src/dashboard/components/modals/ModalVoucherCreate.tsx b/react/src/dashboard/components/modals/ModalVoucherCreate.tsx
index cffcdee9b..fdafebda9 100644
--- a/react/src/dashboard/components/modals/ModalVoucherCreate.tsx
+++ b/react/src/dashboard/components/modals/ModalVoucherCreate.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
 import { ModalState } from '../../modules/modals/context/ModalContext';
 import useFormBuilder from '../../hooks/useFormBuilder';
 import Fund from '../../props/models/Fund';
@@ -52,6 +52,7 @@ export default function ModalVoucherCreate({
     const productService = useProductService();
 
     const [dateMinLimit] = useState(new Date());
+    const [expireAsFund, setExpireAsFund] = useState<boolean>(true);
     const [products, setProducts] = useState<Array<Partial<Product>>>(null);
     const [showRecordFields, setShowRecordFields] = useState<boolean>(false);
     const [showGeneralFields, setShowGeneralFields] = useState<boolean>(true);
@@ -344,6 +345,12 @@ export default function ModalVoucherCreate({
         }
     }, [fetchProducts, form.values.type]);
 
+    useEffect(() => {
+        if (expireAsFund) {
+            formUpdate({ expire_at: fund.end_date });
+        }
+    }, [formUpdate, fund, expireAsFund]);
+
     return (
         <div
             className={classNames(
@@ -572,21 +579,68 @@ export default function ModalVoucherCreate({
                                             <FormError error={form.errors?.client_uid} />
                                         </div>
 
-                                        <div className="form-group">
-                                            <div className="form-label">
-                                                {translate('modals.modal_voucher_create.labels.expire_at')}
+                                        <div className="row">
+                                            <div className="col col-xs-12 col-sm-6">
+                                                <FormGroup
+                                                    label={'Instelling voor geldigheid'}
+                                                    info={
+                                                        <Fragment>
+                                                            Kies of het tegoed een specifieke einddatum heeft of dat het
+                                                            tegoed een verloopdatum heeft die gelijk staat aan de
+                                                            einddatum van de regeling.
+                                                        </Fragment>
+                                                    }
+                                                    input={(id) => (
+                                                        <SelectControl
+                                                            id={id}
+                                                            propKey={'value'}
+                                                            propValue={'label'}
+                                                            options={[
+                                                                {
+                                                                    value: true,
+                                                                    label: 'Gebruik de standaard verloopdatum',
+                                                                },
+                                                                { value: false, label: 'Stel een verloopdatum in' },
+                                                            ]}
+                                                            value={expireAsFund}
+                                                            onChange={(value: boolean) => setExpireAsFund(value)}
+                                                        />
+                                                    )}
+                                                />
+                                            </div>
+                                            <div className="col col-xs-12 col-sm-6">
+                                                <FormGroup
+                                                    label={translate('modals.modal_voucher_create.labels.expire_at')}
+                                                    error={form.errors.expire_at}
+                                                    info={
+                                                        <Fragment>
+                                                            De laatste dag waarop het tegoed geldig is. Daarna verloopt
+                                                            het tegoed en kan deze niet meer worden gebruikt.
+                                                        </Fragment>
+                                                    }
+                                                    input={(id) =>
+                                                        expireAsFund ? (
+                                                            <input
+                                                                id={id}
+                                                                className="form-control"
+                                                                value={form.values.expire_at}
+                                                                disabled={true}
+                                                            />
+                                                        ) : (
+                                                            <DatePickerControl
+                                                                id={id}
+                                                                value={dateParse(form.values.expire_at)}
+                                                                dateMin={dateMinLimit}
+                                                                dateMax={dateParse(fund.end_date)}
+                                                                placeholder={translate('dd-MM-yyyy')}
+                                                                onChange={(expire_at: Date) => {
+                                                                    form.update({ expire_at: dateFormat(expire_at) });
+                                                                }}
+                                                            />
+                                                        )
+                                                    }
+                                                />
                                             </div>
-
-                                            <DatePickerControl
-                                                value={dateParse(form.values.expire_at)}
-                                                dateMin={dateMinLimit}
-                                                dateMax={dateParse(fund.end_date)}
-                                                placeholder={translate('dd-MM-yyyy')}
-                                                onChange={(expire_at: Date) => {
-                                                    form.update({ expire_at: dateFormat(expire_at) });
-                                                }}
-                                            />
-                                            <FormError error={form.errors?.expire_at} />
                                         </div>
 
                                         {fund?.show_requester_limits && (

From 4aa4665e9d2e1d86a37510954e369ac25e7bcedb Mon Sep 17 00:00:00 2001
From: Yaroslav Kosterin <ateamcms@gmail.com>
Date: Fri, 12 Sep 2025 13:03:00 +0300
Subject: [PATCH 11/29] move reservation_note in payment section in product
 edit form

---
 .../products-edit/elements/ProductsForm.tsx   | 76 +++++++++----------
 1 file changed, 37 insertions(+), 39 deletions(-)

diff --git a/react/src/dashboard/components/pages/products-edit/elements/ProductsForm.tsx b/react/src/dashboard/components/pages/products-edit/elements/ProductsForm.tsx
index 795358d9d..da4cb5da4 100644
--- a/react/src/dashboard/components/pages/products-edit/elements/ProductsForm.tsx
+++ b/react/src/dashboard/components/pages/products-edit/elements/ProductsForm.tsx
@@ -1056,6 +1056,43 @@ export default function ProductsForm({
                                         )}
                                     />
 
+                                    <FormGroup
+                                        label={translate('product_edit.labels.reservation_note')}
+                                        error={form.errors.reservation_note}
+                                        input={(id) => (
+                                            <SelectControl
+                                                className="form-control"
+                                                propKey={'value'}
+                                                propValue={'label'}
+                                                id={id}
+                                                value={form.values.reservation_note}
+                                                onChange={(reservation_note: string) => {
+                                                    form.update({ reservation_note });
+                                                }}
+                                                options={reservationNoteOptions}
+                                            />
+                                        )}
+                                    />
+
+                                    {form.values.reservation_note === 'custom' && (
+                                        <FormGroup
+                                            label={translate('product_edit.labels.custom_reservation_note_text')}
+                                            error={form.errors.reservation_note_text}
+                                            input={() => (
+                                                <textarea
+                                                    className="form-control r-n"
+                                                    placeholder={translate(
+                                                        'product_edit.labels.custom_reservation_note_text',
+                                                    )}
+                                                    value={form.values.reservation_note_text || ''}
+                                                    onChange={(e) =>
+                                                        form.update({ reservation_note_text: e.target.value })
+                                                    }
+                                                />
+                                            )}
+                                        />
+                                    )}
+
                                     <FormGroup
                                         label={'Klantgegevens uitvragen'}
                                         error={form.errors.reservation_fields}
@@ -1139,45 +1176,6 @@ export default function ProductsForm({
                                                     />
                                                 )}
                                             />
-
-                                            <FormGroup
-                                                label={translate('product_edit.labels.reservation_note')}
-                                                error={form.errors.reservation_note}
-                                                input={(id) => (
-                                                    <SelectControl
-                                                        className="form-control"
-                                                        propKey={'value'}
-                                                        propValue={'label'}
-                                                        id={id}
-                                                        value={form.values.reservation_note}
-                                                        onChange={(reservation_note: string) => {
-                                                            form.update({ reservation_note });
-                                                        }}
-                                                        options={reservationNoteOptions}
-                                                    />
-                                                )}
-                                            />
-
-                                            {form.values.reservation_note === 'custom' && (
-                                                <FormGroup
-                                                    label={translate(
-                                                        'product_edit.labels.custom_reservation_note_text',
-                                                    )}
-                                                    error={form.errors.reservation_note_text}
-                                                    input={() => (
-                                                        <textarea
-                                                            className="form-control r-n"
-                                                            placeholder={translate(
-                                                                'product_edit.labels.custom_reservation_note_text',
-                                                            )}
-                                                            value={form.values.reservation_note_text || ''}
-                                                            onChange={(e) =>
-                                                                form.update({ reservation_note_text: e.target.value })
-                                                            }
-                                                        />
-                                                    )}
-                                                />
-                                            )}
                                         </FormPane>
                                     )}
                                 </FormPane>

From 0066b3c43db901db5fb8cb0e146d7b2761ef6338 Mon Sep 17 00:00:00 2001
From: Yaroslav Kosterin <ateamcms@gmail.com>
Date: Fri, 12 Sep 2025 13:18:44 +0300
Subject: [PATCH 12/29] add search to business type select on provider signup

---
 react/src/dashboard/components/pages/auth/SignUpProvider.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/react/src/dashboard/components/pages/auth/SignUpProvider.tsx b/react/src/dashboard/components/pages/auth/SignUpProvider.tsx
index ba7097573..8363a0d81 100644
--- a/react/src/dashboard/components/pages/auth/SignUpProvider.tsx
+++ b/react/src/dashboard/components/pages/auth/SignUpProvider.tsx
@@ -1645,6 +1645,7 @@ export default function SignUpProvider() {
                                                             }}
                                                             options={businessTypes}
                                                             placeholder={'Selecteer organisatie type...'}
+                                                            allowSearch={true}
                                                         />
                                                     )}
 

From eac0c4eeef74fc75e1558cee83b98b7debe3d1b6 Mon Sep 17 00:00:00 2001
From: Yaroslav Kosterin <ateamcms@gmail.com>
Date: Tue, 16 Sep 2025 11:25:40 +0300
Subject: [PATCH 13/29] make cms block clickable

---
 .../scss/includes/blocks/block-cms-funds.scss |   8 +-
 .../elements/cms-blocks/CmsBlocks.tsx         | 124 ++++++++++++------
 2 files changed, 92 insertions(+), 40 deletions(-)

diff --git a/react/assets/forus-webshop/scss/includes/blocks/block-cms-funds.scss b/react/assets/forus-webshop/scss/includes/blocks/block-cms-funds.scss
index e3e719d6e..7bc9760f6 100644
--- a/react/assets/forus-webshop/scss/includes/blocks/block-cms-funds.scss
+++ b/react/assets/forus-webshop/scss/includes/blocks/block-cms-funds.scss
@@ -9,6 +9,7 @@
         display: flex;
         padding: 0 0 40px;
         border-bottom: 1px solid var(--border-color);
+        transition: box-shadow 0.4s;
 
         .fund-media {
             width: 52%;
@@ -28,8 +29,7 @@
             display: flex;
             flex-direction: column;
             align-self: center;
-            cursor: default;
-    
+
             .fund-label {
                 margin: 0 0 5px;
                 line-height: 20px;
@@ -81,6 +81,10 @@
         }
     }
 
+    a.fund-item:hover {
+        box-shadow: var(--showcase-item-hover-shadow);
+    }
+
     @media screen and (min-width: 1000px) {
         &.block-cms-funds-compact {
             --gap: 25px;
diff --git a/react/src/webshop/components/elements/cms-blocks/CmsBlocks.tsx b/react/src/webshop/components/elements/cms-blocks/CmsBlocks.tsx
index eb949b08b..30e0a8366 100644
--- a/react/src/webshop/components/elements/cms-blocks/CmsBlocks.tsx
+++ b/react/src/webshop/components/elements/cms-blocks/CmsBlocks.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import ImplementationPage from '../../../props/models/ImplementationPage';
 import Markdown from '../markdown/Markdown';
 import useAssetUrl from '../../../hooks/useAssetUrl';
@@ -37,48 +37,96 @@ export default function CmsBlocks({
                             page.blocks_per_row === 2 && 'block-cms-funds-2-in-row',
                         )}>
                         {page.blocks?.map((block) => (
-                            <div key={block.id} className="fund-item">
-                                <div className="fund-media">
-                                    <img
-                                        src={
-                                            block.media?.sizes?.public ||
-                                            assetUrl('/assets/img/placeholders/product-small.png')
-                                        }
-                                        alt=""
-                                    />
-                                </div>
-                                <div className="fund-information">
-                                    {block.title && <h2 className="fund-title">{block.title}</h2>}
-                                    {block.label && <div className="fund-label label label-primary">{block.label}</div>}
+                            <Fragment key={block.id}>
+                                {block.button_enabled && page.blocks_per_row > 1 ? (
+                                    <a
+                                        target={block.button_target_blank ? '_blank' : '_self'}
+                                        rel={block.button_target_blank ? 'noreferrer' : ''}
+                                        href={block.button_link}
+                                        className="fund-item">
+                                        <div className="fund-media">
+                                            <img
+                                                src={
+                                                    block.media?.sizes?.public ||
+                                                    assetUrl('/assets/img/placeholders/product-small.png')
+                                                }
+                                                alt=""
+                                            />
+                                        </div>
+                                        <div className="fund-information">
+                                            {block.title && <h2 className="fund-title">{block.title}</h2>}
+                                            {block.label && (
+                                                <div className="fund-label label label-primary">{block.label}</div>
+                                            )}
 
-                                    <div className="fund-description">
-                                        <Markdown content={block.description_html} />
-                                    </div>
+                                            <div className="fund-description">
+                                                <Markdown content={block.description_html} />
+                                            </div>
 
-                                    {block.button_enabled && (
-                                        <div className="fund-button">
-                                            <a
-                                                className="button button-primary fund-button-button"
-                                                target={block.button_target_blank ? '_blank' : '_self'}
-                                                rel={block.button_target_blank ? 'noreferrer' : ''}
-                                                href={block.button_link}>
-                                                {block.button_text}
-                                                <div className="mdi mdi-arrow-right icon-right" aria-hidden="true" />
-                                            </a>
-                                            {page.blocks_per_row > 1 && (
-                                                <a
-                                                    className="button button-text button-text-primary fund-button-link"
-                                                    target={block.button_target_blank ? '_blank' : '_self'}
-                                                    rel={block.button_target_blank ? 'noreferrer' : ''}
-                                                    href={block.button_link}
-                                                    aria-label={block.button_link_label}>
+                                            <div className="fund-button">
+                                                <span className="button button-primary fund-button-button">
                                                     {block.button_text}
-                                                </a>
+                                                    <div
+                                                        className="mdi mdi-arrow-right icon-right"
+                                                        aria-hidden="true"
+                                                    />
+                                                </span>
+                                                <span className="button button-text button-text-primary fund-button-link">
+                                                    {block.button_text}
+                                                </span>
+                                            </div>
+                                        </div>
+                                    </a>
+                                ) : (
+                                    <div className="fund-item">
+                                        <div className="fund-media">
+                                            <img
+                                                src={
+                                                    block.media?.sizes?.public ||
+                                                    assetUrl('/assets/img/placeholders/product-small.png')
+                                                }
+                                                alt=""
+                                            />
+                                        </div>
+                                        <div className="fund-information">
+                                            {block.title && <h2 className="fund-title">{block.title}</h2>}
+                                            {block.label && (
+                                                <div className="fund-label label label-primary">{block.label}</div>
+                                            )}
+
+                                            <div className="fund-description">
+                                                <Markdown content={block.description_html} />
+                                            </div>
+
+                                            {block.button_enabled && (
+                                                <div className="fund-button">
+                                                    <a
+                                                        className="button button-primary fund-button-button"
+                                                        target={block.button_target_blank ? '_blank' : '_self'}
+                                                        rel={block.button_target_blank ? 'noreferrer' : ''}
+                                                        href={block.button_link}>
+                                                        {block.button_text}
+                                                        <div
+                                                            className="mdi mdi-arrow-right icon-right"
+                                                            aria-hidden="true"
+                                                        />
+                                                    </a>
+                                                    {page.blocks_per_row > 1 && (
+                                                        <a
+                                                            className="button button-text button-text-primary fund-button-link"
+                                                            target={block.button_target_blank ? '_blank' : '_self'}
+                                                            rel={block.button_target_blank ? 'noreferrer' : ''}
+                                                            href={block.button_link}
+                                                            aria-label={block.button_link_label}>
+                                                            {block.button_text}
+                                                        </a>
+                                                    )}
+                                                </div>
                                             )}
                                         </div>
-                                    )}
-                                </div>
-                            </div>
+                                    </div>
+                                )}
+                            </Fragment>
                         ))}
                     </div>
                 )}

From e51bc29758c644e02941f4c8f6884d50f6f780e3 Mon Sep 17 00:00:00 2001
From: Kyra-05 <kyra@forus.io>
Date: Wed, 17 Sep 2025 10:22:18 +0200
Subject: [PATCH 14/29] fix: issue WCAG-NIJ 4.1.2 Ensure all pop-up close
 buttons have an accessible name "Close"

---
 .../push_notifications/components/PushNotificationsGroup.tsx     | 1 +
 1 file changed, 1 insertion(+)

diff --git a/react/src/dashboard/modules/push_notifications/components/PushNotificationsGroup.tsx b/react/src/dashboard/modules/push_notifications/components/PushNotificationsGroup.tsx
index c7cdd40b7..3972f576e 100644
--- a/react/src/dashboard/modules/push_notifications/components/PushNotificationsGroup.tsx
+++ b/react/src/dashboard/modules/push_notifications/components/PushNotificationsGroup.tsx
@@ -122,6 +122,7 @@ export default function PushNotificationsGroup({
                             tabIndex={0}
                             onKeyDown={clickOnKeyEnter}
                             onClick={() => popNotification(notification.id)}
+                            aria-label={translate('buttons.close')}
                         />
                     </div>
                 ))}

From b5f87460ee22cd53d60c1c770bc9b2da08f65626 Mon Sep 17 00:00:00 2001
From: Kyra-05 <kyra@forus.io>
Date: Wed, 17 Sep 2025 16:18:08 +0200
Subject: [PATCH 15/29] feat: add autoComplete to input elements for WCAG issue
 of Nijmegen: Provide accessible labels and autocomplete attr for input fields

---
 .../elements/forms/ui-controls/UIControlText.tsx           | 3 +++
 .../src/dashboard/components/modals/ModalEmployeeEdit.tsx  | 1 +
 .../dashboard/components/modals/ModalOrderPhysicalCard.tsx | 5 +++++
 react/src/dashboard/components/pages/auth/SignIn.tsx       | 1 +
 .../src/dashboard/components/pages/auth/SignUpProvider.tsx | 7 +++++++
 .../components/pages/auth/elements/SignUpOfficeEdit.tsx    | 2 ++
 .../elements/sign-up-steps/SignUpStepOrganizationAdd.tsx   | 4 ++++
 .../elements/sign-up-steps/SignUpStepProfileCreate.tsx     | 1 +
 react/src/dashboard/components/pages/feedback/Feedback.tsx | 1 +
 .../components/pages/offices-edit/elements/OfficesForm.tsx | 2 ++
 .../block-reservation-address/BlockReservationAddress.tsx  | 5 +++++
 .../webshop/components/modals/ModalPhysicalCardType.tsx    | 5 +++++
 .../modals/modal-product-reserve/ModalProductReserve.tsx   | 2 ++
 react/src/webshop/components/pages/auth/Start.tsx          | 1 +
 .../elements/steps/FundRequestStepCriteria.tsx             | 6 +++---
 .../elements/steps/FundRequestStepEmailSetup.tsx           | 1 +
 .../components/pages/identity-emails/PreferencesEmails.tsx | 1 +
 react/src/webshop/components/pages/products/Products.tsx   | 1 +
 react/src/webshop/components/pages/providers/Providers.tsx | 1 +
 19 files changed, 47 insertions(+), 3 deletions(-)

diff --git a/react/src/dashboard/components/elements/forms/ui-controls/UIControlText.tsx b/react/src/dashboard/components/elements/forms/ui-controls/UIControlText.tsx
index 45bd4c0b7..2a7e910fa 100644
--- a/react/src/dashboard/components/elements/forms/ui-controls/UIControlText.tsx
+++ b/react/src/dashboard/components/elements/forms/ui-controls/UIControlText.tsx
@@ -23,6 +23,7 @@ export default function UIControlText({
     rows = 5,
     validationMessages = null,
     required = false,
+    autoComplete = null,
 }: {
     id?: string;
     name?: string;
@@ -41,6 +42,7 @@ export default function UIControlText({
     rows?: number;
     validationMessages?: InputValidationTexts;
     required?: boolean;
+    autoComplete?: string;
 }) {
     const innerInputRef = useRef<HTMLInputElement>(null);
     const customInputValidationMessage = useCustomInputValidationMessage();
@@ -86,6 +88,7 @@ export default function UIControlText({
                 rows: rows,
                 required: required,
                 'data-dusk': dataDusk,
+                autoComplete: autoComplete,
             })}
 
             {(inputRef || innerInputRef).current?.value !== '' && type !== 'textarea' && (
diff --git a/react/src/dashboard/components/modals/ModalEmployeeEdit.tsx b/react/src/dashboard/components/modals/ModalEmployeeEdit.tsx
index 0a121401b..c4cedb6bb 100644
--- a/react/src/dashboard/components/modals/ModalEmployeeEdit.tsx
+++ b/react/src/dashboard/components/modals/ModalEmployeeEdit.tsx
@@ -165,6 +165,7 @@ export default function ModalEmployeeEdit({
                                     data-dusk="formEmployeeEmail"
                                     className="form-control"
                                     onChange={(e) => form.update({ email: e.target.value })}
+                                    autoComplete="email"
                                 />
                                 <FormError error={form.errors['email']} />
                             </div>
diff --git a/react/src/dashboard/components/modals/ModalOrderPhysicalCard.tsx b/react/src/dashboard/components/modals/ModalOrderPhysicalCard.tsx
index f5f983a92..7f57e54aa 100644
--- a/react/src/dashboard/components/modals/ModalOrderPhysicalCard.tsx
+++ b/react/src/dashboard/components/modals/ModalOrderPhysicalCard.tsx
@@ -131,6 +131,7 @@ export default function ModalOrderPhysicalCard({
                                         'modals.modal_physical_card_order.modal_section.request_new_card.address_placeholder',
                                     )}
                                     onChange={(e) => form.update({ address: e.target.value })}
+                                    autoComplete="address-line1"
                                 />
 
                                 <FormError error={form.errors?.address} />
@@ -151,6 +152,7 @@ export default function ModalOrderPhysicalCard({
                                         'modals.modal_physical_card_order.modal_section.request_new_card.house_placeholder',
                                     )}
                                     onChange={(e) => form.update({ house: e.target.value })}
+                                    autoComplete="address-line2"
                                 />
 
                                 <FormError error={form.errors?.house} />
@@ -173,6 +175,7 @@ export default function ModalOrderPhysicalCard({
                                         'modals.modal_physical_card_order.modal_section.request_new_card.house_addition_placeholder',
                                     )}
                                     onChange={(e) => form.update({ house_addition: e.target.value })}
+                                    autoComplete="address-line3"
                                 />
 
                                 <FormError error={form.errors?.house_addition} />
@@ -195,6 +198,7 @@ export default function ModalOrderPhysicalCard({
                                         'modals.modal_physical_card_order.modal_section.request_new_card.postcode_placeholder',
                                     )}
                                     onChange={(e) => form.update({ postcode: e.target.value })}
+                                    autoComplete="postal-code"
                                 />
 
                                 <FormError error={form.errors?.postcode} />
@@ -215,6 +219,7 @@ export default function ModalOrderPhysicalCard({
                                         'modals.modal_physical_card_order.modal_section.request_new_card.city_placeholder',
                                     )}
                                     onChange={(e) => form.update({ city: e.target.value })}
+                                    autoComplete="address-level2"
                                 />
 
                                 <FormError error={form.errors?.city} />
diff --git a/react/src/dashboard/components/pages/auth/SignIn.tsx b/react/src/dashboard/components/pages/auth/SignIn.tsx
index 1a7fb18fe..811ac5e18 100644
--- a/react/src/dashboard/components/pages/auth/SignIn.tsx
+++ b/react/src/dashboard/components/pages/auth/SignIn.tsx
@@ -94,6 +94,7 @@ export default function SignIn() {
                                             }
                                             autoFocus={true}
                                             className="form-control"
+                                            autoComplete="email"
                                         />
                                         <FormError error={signInForm?.errors?.email} />
                                     </div>
diff --git a/react/src/dashboard/components/pages/auth/SignUpProvider.tsx b/react/src/dashboard/components/pages/auth/SignUpProvider.tsx
index 8363a0d81..4fd009040 100644
--- a/react/src/dashboard/components/pages/auth/SignUpProvider.tsx
+++ b/react/src/dashboard/components/pages/auth/SignUpProvider.tsx
@@ -1134,6 +1134,7 @@ export default function SignUpProvider() {
                                                                                 })
                                                                             }
                                                                             placeholder="EMAILADRES"
+                                                                            autoComplete="email"
                                                                         />
                                                                     </div>
                                                                     <div className="app_download-form_group-button">
@@ -1304,6 +1305,7 @@ export default function SignUpProvider() {
                                                         onChange={(e) => signUpForm.update({ email: e.target.value })}
                                                         className={'large'}
                                                         placeholder={'e-mail@e-mail.nl'}
+                                                        autoComplete={'email'}
                                                     />
                                                     <FormError error={signUpForm.errors?.email} />
                                                 </div>
@@ -1479,6 +1481,7 @@ export default function SignUpProvider() {
                                                     value={formOrganization.values.name}
                                                     onChange={(e) => formOrganization.update({ name: e.target.value })}
                                                     placeholder={'Bedrijfsnaam'}
+                                                    autoComplete={'organization'}
                                                 />
                                                 <FormError error={formOrganization.errors.name} />
                                             </div>
@@ -1542,6 +1545,7 @@ export default function SignUpProvider() {
                                                                 formOrganization.update({ email: e.target.value })
                                                             }
                                                             placeholder={'Voorbeeld: info@bedrijfsnaam.nl'}
+                                                            autoComplete={'email'}
                                                         />
                                                     </div>
                                                     <div className="col col-md-4 col-xs-12">
@@ -1574,6 +1578,7 @@ export default function SignUpProvider() {
                                                                 formOrganization.update({ phone: e.target.value })
                                                             }
                                                             placeholder={'Voorbeeld: 06 123 45 678'}
+                                                            autoComplete={'tel'}
                                                         />
                                                     </div>
                                                     <div className="col col-md-4 col-xs-12">
@@ -1605,6 +1610,7 @@ export default function SignUpProvider() {
                                                                 formOrganization.update({ website: e.target.value })
                                                             }
                                                             placeholder={'Voorbeeld: https://bedrijfsnaam.nl'}
+                                                            autoComplete={'url'}
                                                         />
                                                     </div>
                                                     <div className="col col-md-4 col-xs-12">
@@ -1903,6 +1909,7 @@ export default function SignUpProvider() {
                                                     value={employeeForm.values.email}
                                                     onChange={(e) => employeeForm.update({ email: e.target.value })}
                                                     placeholder={'Voorbeeld: e-mail@e-mail.nl'}
+                                                    autoComplete={'email'}
                                                 />
                                                 <FormError error={employeeForm.errors.email} />
                                             </div>
diff --git a/react/src/dashboard/components/pages/auth/elements/SignUpOfficeEdit.tsx b/react/src/dashboard/components/pages/auth/elements/SignUpOfficeEdit.tsx
index ebbe643d1..69788a68b 100644
--- a/react/src/dashboard/components/pages/auth/elements/SignUpOfficeEdit.tsx
+++ b/react/src/dashboard/components/pages/auth/elements/SignUpOfficeEdit.tsx
@@ -94,6 +94,7 @@ export default function SignUpOfficeEdit({
                                     placeholder="Adres"
                                     inputRef={addressInputRef}
                                     onChangeValue={(address) => form.update({ address })}
+                                    autoComplete={'street-address'}
                                 />
                             </Autocomplete>
                             <FormError error={form.errors.address} />
@@ -105,6 +106,7 @@ export default function SignUpOfficeEdit({
                                 id="office_phone"
                                 placeholder="Telefoonnummer"
                                 onChangeValue={(phone) => form.update({ phone })}
+                                autoComplete={'tel'}
                             />
                             <FormError error={form.errors.phone} />
                         </div>
diff --git a/react/src/dashboard/components/pages/auth/elements/sign-up-steps/SignUpStepOrganizationAdd.tsx b/react/src/dashboard/components/pages/auth/elements/sign-up-steps/SignUpStepOrganizationAdd.tsx
index da78d0edf..324f26b52 100644
--- a/react/src/dashboard/components/pages/auth/elements/sign-up-steps/SignUpStepOrganizationAdd.tsx
+++ b/react/src/dashboard/components/pages/auth/elements/sign-up-steps/SignUpStepOrganizationAdd.tsx
@@ -136,6 +136,7 @@ export default function SignUpStepOrganizationAdd({
                                     value={formOrganization.values.name}
                                     onChange={(e) => formOrganization.update({ name: e.target.value })}
                                     placeholder={'Bedrijfsnaam'}
+                                    autoComplete={'organization'}
                                 />
                                 <FormError error={formOrganization.errors.name} />
                             </div>
@@ -189,6 +190,7 @@ export default function SignUpStepOrganizationAdd({
                                             value={formOrganization.values.email}
                                             onChange={(e) => formOrganization.update({ email: e.target.value })}
                                             placeholder={'E-mailadres'}
+                                            autoComplete={'email'}
                                         />
                                     </div>
                                     <div className="col col-md-4 col-xs-12">
@@ -217,6 +219,7 @@ export default function SignUpStepOrganizationAdd({
                                             value={formOrganization.values.phone}
                                             onChange={(e) => formOrganization.update({ phone: e.target.value })}
                                             placeholder={'Telefoonnummer'}
+                                            autoComplete={'tel'}
                                         />
                                     </div>
                                     <div className="col col-md-4 col-xs-12">
@@ -244,6 +247,7 @@ export default function SignUpStepOrganizationAdd({
                                             value={formOrganization.values.website}
                                             onChange={(e) => formOrganization.update({ website: e.target.value })}
                                             placeholder={'Website'}
+                                            autoComplete={'url'}
                                         />
                                     </div>
                                     <div className="col col-md-4 col-xs-12">
diff --git a/react/src/dashboard/components/pages/auth/elements/sign-up-steps/SignUpStepProfileCreate.tsx b/react/src/dashboard/components/pages/auth/elements/sign-up-steps/SignUpStepProfileCreate.tsx
index b12c8b92b..6908dc56c 100644
--- a/react/src/dashboard/components/pages/auth/elements/sign-up-steps/SignUpStepProfileCreate.tsx
+++ b/react/src/dashboard/components/pages/auth/elements/sign-up-steps/SignUpStepProfileCreate.tsx
@@ -124,6 +124,7 @@ export default function SignUpStepProfileCreate({ panelType }: { panelType: 'spo
                                         onChangeValue={(email) => formSignUp.update({ email })}
                                         className={'large'}
                                         placeholder={'e-mail@e-mail.nl'}
+                                        autoComplete={'email'}
                                     />
                                     <FormError
                                         error={formSignUp.errors?.email || formSignUp.errors?.['records.primary_email']}
diff --git a/react/src/dashboard/components/pages/feedback/Feedback.tsx b/react/src/dashboard/components/pages/feedback/Feedback.tsx
index 947b14687..6af7a6588 100644
--- a/react/src/dashboard/components/pages/feedback/Feedback.tsx
+++ b/react/src/dashboard/components/pages/feedback/Feedback.tsx
@@ -164,6 +164,7 @@ export default function Feedback() {
                                                 name="customer_email"
                                                 value={form.values.customer_email || ''}
                                                 onChange={(e) => form.update({ customer_email: e.target.value })}
+                                                autoComplete="email"
                                             />
                                             <FormError error={form.errors?.customer_email} />
                                         </div>
diff --git a/react/src/dashboard/components/pages/offices-edit/elements/OfficesForm.tsx b/react/src/dashboard/components/pages/offices-edit/elements/OfficesForm.tsx
index 2e0e7e234..94278f084 100644
--- a/react/src/dashboard/components/pages/offices-edit/elements/OfficesForm.tsx
+++ b/react/src/dashboard/components/pages/offices-edit/elements/OfficesForm.tsx
@@ -157,6 +157,7 @@ export default function OfficesForm({ organization, id }: { organization: Organi
                                 placeholder={translate('offices_edit.labels.address')}
                                 value={form.values?.address || ''}
                                 onChange={(e) => form.update({ address: e.target.value })}
+                                autoComplete="street-address"
                             />
                             <FormError error={form.errors?.address} />
                         </div>
@@ -169,6 +170,7 @@ export default function OfficesForm({ organization, id }: { organization: Organi
                                 placeholder={translate('offices_edit.labels.phone')}
                                 value={form.values?.phone || ''}
                                 onChange={(e) => form.update({ phone: e.target.value })}
+                                autoComplete="tel"
                             />
                             <FormError error={form.errors?.address} />
                         </div>
diff --git a/react/src/webshop/components/elements/block-reservation-address/BlockReservationAddress.tsx b/react/src/webshop/components/elements/block-reservation-address/BlockReservationAddress.tsx
index 4a5215858..58a866ae0 100644
--- a/react/src/webshop/components/elements/block-reservation-address/BlockReservationAddress.tsx
+++ b/react/src/webshop/components/elements/block-reservation-address/BlockReservationAddress.tsx
@@ -147,6 +147,7 @@ export default function BlockReservationAddress({
                                 value={form.values.street || ''}
                                 onChange={(e) => form.update({ street: e.target.value })}
                                 data-dusk="productReserveFormStreet"
+                                autoComplete="address-line1"
                             />
                             <FormError error={form.errors?.street} />
                         </div>
@@ -163,6 +164,7 @@ export default function BlockReservationAddress({
                                         value={form.values.house_nr || ''}
                                         onChange={(e) => form.update({ house_nr: e.target.value })}
                                         data-dusk="productReserveFormHouseNumber"
+                                        autoComplete="address-line2"
                                     />
                                     <FormError error={form.errors?.house_nr} />
                                 </div>
@@ -177,6 +179,7 @@ export default function BlockReservationAddress({
                                         value={form.values.house_nr_addition || ''}
                                         onChange={(e) => form.update({ house_nr_addition: e.target.value })}
                                         data-dusk="productReserveFormHouseNumberAddition"
+                                        autoComplete="address-line3"
                                     />
                                     <FormError error={form.errors?.house_nr_addition} />
                                 </div>
@@ -195,6 +198,7 @@ export default function BlockReservationAddress({
                                 value={form.values.postal_code || ''}
                                 onChange={(e) => form.update({ postal_code: e.target.value })}
                                 data-dusk="productReserveFormPostalCode"
+                                autoComplete="postal_code"
                             />
                             <FormError error={form.errors?.postal_code} />
                         </div>
@@ -210,6 +214,7 @@ export default function BlockReservationAddress({
                                 value={form.values.city || ''}
                                 onChange={(e) => form.update({ city: e.target.value })}
                                 data-dusk="productReserveFormCity"
+                                autoComplete="address-level2"
                             />
                             <FormError error={form.errors?.city} />
                         </div>
diff --git a/react/src/webshop/components/modals/ModalPhysicalCardType.tsx b/react/src/webshop/components/modals/ModalPhysicalCardType.tsx
index af4823db3..35ae760bb 100644
--- a/react/src/webshop/components/modals/ModalPhysicalCardType.tsx
+++ b/react/src/webshop/components/modals/ModalPhysicalCardType.tsx
@@ -390,6 +390,7 @@ export default function ModalPhysicalCardType({
                                                 onChange={(e) => {
                                                     requestPhysicalCardForm.update({ address: e.target.value });
                                                 }}
+                                                autoComplete="address-line1"
                                             />
                                             <FormError error={requestPhysicalCardForm.errors?.address} />
                                         </div>
@@ -408,6 +409,7 @@ export default function ModalPhysicalCardType({
                                                 onChange={(e) => {
                                                     requestPhysicalCardForm.update({ house: e.target.value });
                                                 }}
+                                                autoComplete="address-line2"
                                             />
                                             <FormError error={requestPhysicalCardForm.errors?.house} />
                                         </div>
@@ -426,6 +428,7 @@ export default function ModalPhysicalCardType({
                                                 onChange={(e) => {
                                                     requestPhysicalCardForm.update({ house_addition: e.target.value });
                                                 }}
+                                                autoComplete="address-line3"
                                             />
                                             <FormError error={requestPhysicalCardForm.errors?.house_addition} />
                                         </div>
@@ -446,6 +449,7 @@ export default function ModalPhysicalCardType({
                                                 onChange={(e) => {
                                                     requestPhysicalCardForm.update({ postcode: e.target.value });
                                                 }}
+                                                autoComplete="postal-code"
                                             />
                                             <FormError error={requestPhysicalCardForm.errors?.postcode} />
                                         </div>
@@ -462,6 +466,7 @@ export default function ModalPhysicalCardType({
                                                 onChange={(e) => {
                                                     requestPhysicalCardForm.update({ city: e.target.value });
                                                 }}
+                                                autoComplete="address-level2"
                                             />
                                             <FormError error={requestPhysicalCardForm.errors?.city} />
                                         </div>
diff --git a/react/src/webshop/components/modals/modal-product-reserve/ModalProductReserve.tsx b/react/src/webshop/components/modals/modal-product-reserve/ModalProductReserve.tsx
index be59c82a3..e2b3247a9 100644
--- a/react/src/webshop/components/modals/modal-product-reserve/ModalProductReserve.tsx
+++ b/react/src/webshop/components/modals/modal-product-reserve/ModalProductReserve.tsx
@@ -724,6 +724,7 @@ export default function ModalProductReserve({
                                         value={form.values.first_name ?? ''}
                                         onChange={(e) => form.update({ first_name: e.target.value })}
                                         data-dusk="productReserveFormFirstName"
+                                        autoComplete="given-name"
                                     />
                                     <FormError error={form.errors.first_name} />
                                 </div>
@@ -738,6 +739,7 @@ export default function ModalProductReserve({
                                         value={form.values.last_name ?? ''}
                                         onChange={(e) => form.update({ last_name: e.target.value })}
                                         data-dusk="productReserveFormLastName"
+                                        autoComplete="family-name"
                                     />
                                     <FormError error={form.errors.last_name} />
                                 </div>
diff --git a/react/src/webshop/components/pages/auth/Start.tsx b/react/src/webshop/components/pages/auth/Start.tsx
index 5ed47c1dd..59742b8b5 100644
--- a/react/src/webshop/components/pages/auth/Start.tsx
+++ b/react/src/webshop/components/pages/auth/Start.tsx
@@ -322,6 +322,7 @@ export default function Start() {
                                     tabIndex={1}
                                     autoFocus={true}
                                     dataDusk={'authEmailFormEmail'}
+                                    autoComplete={'email'}
                                 />
                                 <FormError error={authForm.errors.email} />
                             </div>
diff --git a/react/src/webshop/components/pages/funds-request/elements/steps/FundRequestStepCriteria.tsx b/react/src/webshop/components/pages/funds-request/elements/steps/FundRequestStepCriteria.tsx
index a6ccd7a46..ffe6afcc9 100644
--- a/react/src/webshop/components/pages/funds-request/elements/steps/FundRequestStepCriteria.tsx
+++ b/react/src/webshop/components/pages/funds-request/elements/steps/FundRequestStepCriteria.tsx
@@ -262,7 +262,7 @@ export default function FundRequestStepCriteria({
                                     dataDusk="controlStep"
                                 />
                             )}
-
+                            {/*TODO: add autoComplete*/}
                             {criterion.control_type == 'ui_control_date' && (
                                 <UIControlDate
                                     value={
@@ -280,7 +280,7 @@ export default function FundRequestStepCriteria({
                                     dataDusk="controlDate"
                                 />
                             )}
-
+                            {/*TODO: add autoComplete*/}
                             {criterion.control_type == 'ui_control_number' && (
                                 <UIControlNumber
                                     type={'number'}
@@ -293,7 +293,7 @@ export default function FundRequestStepCriteria({
                                     }}
                                 />
                             )}
-
+                            {/*TODO: add autoComplete*/}
                             {criterion.control_type == 'ui_control_text' && (
                                 <UIControlText
                                     type={'text'}
diff --git a/react/src/webshop/components/pages/funds-request/elements/steps/FundRequestStepEmailSetup.tsx b/react/src/webshop/components/pages/funds-request/elements/steps/FundRequestStepEmailSetup.tsx
index 8fbbee4a2..729932f47 100644
--- a/react/src/webshop/components/pages/funds-request/elements/steps/FundRequestStepEmailSetup.tsx
+++ b/react/src/webshop/components/pages/funds-request/elements/steps/FundRequestStepEmailSetup.tsx
@@ -139,6 +139,7 @@ export default function FundRequestStepEmailSetup({
                                                 emailForm.update({ email });
                                             }}
                                             tabIndex={0}
+                                            autoComplete={'email'}
                                         />
                                         <FormError error={emailForm.errors.email} />
                                     </div>
diff --git a/react/src/webshop/components/pages/identity-emails/PreferencesEmails.tsx b/react/src/webshop/components/pages/identity-emails/PreferencesEmails.tsx
index 0b4bf9445..33b47a4c3 100644
--- a/react/src/webshop/components/pages/identity-emails/PreferencesEmails.tsx
+++ b/react/src/webshop/components/pages/identity-emails/PreferencesEmails.tsx
@@ -306,6 +306,7 @@ export default function PreferencesEmails() {
                                                         }}
                                                         data-dusk="identityNewEmailFormEmail"
                                                         aria-label="Vul uw e-mailadres in"
+                                                        autoComplete="email"
                                                     />
                                                     <FormError error={form.errors.email} />
                                                 </div>
diff --git a/react/src/webshop/components/pages/products/Products.tsx b/react/src/webshop/components/pages/products/Products.tsx
index 87d5f4eae..a6a78bca4 100644
--- a/react/src/webshop/components/pages/products/Products.tsx
+++ b/react/src/webshop/components/pages/products/Products.tsx
@@ -453,6 +453,7 @@ export default function Products() {
                                         type="text"
                                         aria-label={translate('products.filters.postcode')}
                                         data-dusk="inputPostcode"
+                                        autoComplete="postal-code"
                                     />
                                     <FormError error={errors?.postcode} />
                                 </div>
diff --git a/react/src/webshop/components/pages/providers/Providers.tsx b/react/src/webshop/components/pages/providers/Providers.tsx
index f1c5cdafe..f2726930b 100644
--- a/react/src/webshop/components/pages/providers/Providers.tsx
+++ b/react/src/webshop/components/pages/providers/Providers.tsx
@@ -371,6 +371,7 @@ export default function Providers() {
                                             type="text"
                                             aria-label="Postcode"
                                             data-dusk="inputPostcode"
+                                            autoComplete="postal-code"
                                         />
                                         <FormError error={errors?.postcode} />
                                     </div>

From 57732abab3e5d93f04400ce9ce3ac7bffc23d3e8 Mon Sep 17 00:00:00 2001
From: Kyra-05 <kyra@forus.io>
Date: Thu, 18 Sep 2025 10:21:35 +0200
Subject: [PATCH 16/29] feat: add arialabels to input elements for WCAG issue
 of Nijmegen: Provide accessible labels and autocomplete attr for input fields

---
 .../dashboard/components/pages/auth/SignIn.tsx  |  1 +
 .../components/pages/feedback/Feedback.tsx      |  2 ++
 .../pages/offices-edit/elements/OfficesForm.tsx |  2 ++
 .../components/pages/products/Products.tsx      |  1 +
 .../BlockReservationAddress.tsx                 |  7 +++++++
 .../components/modals/ModalPhysicalCardType.tsx | 15 +++++++++++++++
 .../ModalProductReserve.tsx                     |  2 ++
 .../cards/IdentityContactInformationCard.tsx    | 17 +++++++++++++++--
 8 files changed, 45 insertions(+), 2 deletions(-)

diff --git a/react/src/dashboard/components/pages/auth/SignIn.tsx b/react/src/dashboard/components/pages/auth/SignIn.tsx
index 811ac5e18..706980111 100644
--- a/react/src/dashboard/components/pages/auth/SignIn.tsx
+++ b/react/src/dashboard/components/pages/auth/SignIn.tsx
@@ -95,6 +95,7 @@ export default function SignIn() {
                                             autoFocus={true}
                                             className="form-control"
                                             autoComplete="email"
+                                            aria-label={translate('popup_auth.input.mail')}
                                         />
                                         <FormError error={signInForm?.errors?.email} />
                                     </div>
diff --git a/react/src/dashboard/components/pages/feedback/Feedback.tsx b/react/src/dashboard/components/pages/feedback/Feedback.tsx
index 6af7a6588..0d56901bc 100644
--- a/react/src/dashboard/components/pages/feedback/Feedback.tsx
+++ b/react/src/dashboard/components/pages/feedback/Feedback.tsx
@@ -107,6 +107,7 @@ export default function Feedback() {
                                             value={form.values?.title || ''}
                                             onChange={(e) => form.update({ title: e.target.value })}
                                             placeholder={translate('components.feedback.labels.title')}
+                                            aria-label={translate('components.feedback.labels.title')}
                                         />
                                         <FormError error={form.errors?.title} />
                                     </div>
@@ -165,6 +166,7 @@ export default function Feedback() {
                                                 value={form.values.customer_email || ''}
                                                 onChange={(e) => form.update({ customer_email: e.target.value })}
                                                 autoComplete="email"
+                                                aria-label={translate('components.feedback.labels.email')}
                                             />
                                             <FormError error={form.errors?.customer_email} />
                                         </div>
diff --git a/react/src/dashboard/components/pages/offices-edit/elements/OfficesForm.tsx b/react/src/dashboard/components/pages/offices-edit/elements/OfficesForm.tsx
index 94278f084..1b97a6fa6 100644
--- a/react/src/dashboard/components/pages/offices-edit/elements/OfficesForm.tsx
+++ b/react/src/dashboard/components/pages/offices-edit/elements/OfficesForm.tsx
@@ -158,6 +158,7 @@ export default function OfficesForm({ organization, id }: { organization: Organi
                                 value={form.values?.address || ''}
                                 onChange={(e) => form.update({ address: e.target.value })}
                                 autoComplete="street-address"
+                                aria-label={translate('offices_edit.labels.address')}
                             />
                             <FormError error={form.errors?.address} />
                         </div>
@@ -171,6 +172,7 @@ export default function OfficesForm({ organization, id }: { organization: Organi
                                 value={form.values?.phone || ''}
                                 onChange={(e) => form.update({ phone: e.target.value })}
                                 autoComplete="tel"
+                                aria-label={translate('offices_edit.labels.phone')}
                             />
                             <FormError error={form.errors?.address} />
                         </div>
diff --git a/react/src/dashboard/components/pages/products/Products.tsx b/react/src/dashboard/components/pages/products/Products.tsx
index df2e41164..d2293b43e 100644
--- a/react/src/dashboard/components/pages/products/Products.tsx
+++ b/react/src/dashboard/components/pages/products/Products.tsx
@@ -140,6 +140,7 @@ export default function Products() {
                         />
                         <div className="form">
                             <div className="form-group">
+                                {/*TODO: add arialabel*/}
                                 <input
                                     className="form-control"
                                     type="text"
diff --git a/react/src/webshop/components/elements/block-reservation-address/BlockReservationAddress.tsx b/react/src/webshop/components/elements/block-reservation-address/BlockReservationAddress.tsx
index 58a866ae0..1089a3657 100644
--- a/react/src/webshop/components/elements/block-reservation-address/BlockReservationAddress.tsx
+++ b/react/src/webshop/components/elements/block-reservation-address/BlockReservationAddress.tsx
@@ -148,6 +148,7 @@ export default function BlockReservationAddress({
                                 onChange={(e) => form.update({ street: e.target.value })}
                                 data-dusk="productReserveFormStreet"
                                 autoComplete="address-line1"
+                                aria-label={translate('modal_reserve_product.fill_notes.labels.street')}
                             />
                             <FormError error={form.errors?.street} />
                         </div>
@@ -165,6 +166,7 @@ export default function BlockReservationAddress({
                                         onChange={(e) => form.update({ house_nr: e.target.value })}
                                         data-dusk="productReserveFormHouseNumber"
                                         autoComplete="address-line2"
+                                        aria-label={translate('modal_reserve_product.fill_notes.labels.house_nr')}
                                     />
                                     <FormError error={form.errors?.house_nr} />
                                 </div>
@@ -180,6 +182,9 @@ export default function BlockReservationAddress({
                                         onChange={(e) => form.update({ house_nr_addition: e.target.value })}
                                         data-dusk="productReserveFormHouseNumberAddition"
                                         autoComplete="address-line3"
+                                        aria-label={translate(
+                                            'modal_reserve_product.fill_notes.labels.house_nr_addition',
+                                        )}
                                     />
                                     <FormError error={form.errors?.house_nr_addition} />
                                 </div>
@@ -199,6 +204,7 @@ export default function BlockReservationAddress({
                                 onChange={(e) => form.update({ postal_code: e.target.value })}
                                 data-dusk="productReserveFormPostalCode"
                                 autoComplete="postal_code"
+                                aria-label={translate('modal_reserve_product.fill_notes.labels.postal_code')}
                             />
                             <FormError error={form.errors?.postal_code} />
                         </div>
@@ -215,6 +221,7 @@ export default function BlockReservationAddress({
                                 onChange={(e) => form.update({ city: e.target.value })}
                                 data-dusk="productReserveFormCity"
                                 autoComplete="address-level2"
+                                aria-label={translate('modal_reserve_product.fill_notes.labels.city')}
                             />
                             <FormError error={form.errors?.city} />
                         </div>
diff --git a/react/src/webshop/components/modals/ModalPhysicalCardType.tsx b/react/src/webshop/components/modals/ModalPhysicalCardType.tsx
index 35ae760bb..2ef854841 100644
--- a/react/src/webshop/components/modals/ModalPhysicalCardType.tsx
+++ b/react/src/webshop/components/modals/ModalPhysicalCardType.tsx
@@ -391,6 +391,9 @@ export default function ModalPhysicalCardType({
                                                     requestPhysicalCardForm.update({ address: e.target.value });
                                                 }}
                                                 autoComplete="address-line1"
+                                                aria-label={translate(
+                                                    'modal_physical_card.modal_section.request_new_card.address',
+                                                )}
                                             />
                                             <FormError error={requestPhysicalCardForm.errors?.address} />
                                         </div>
@@ -410,6 +413,9 @@ export default function ModalPhysicalCardType({
                                                     requestPhysicalCardForm.update({ house: e.target.value });
                                                 }}
                                                 autoComplete="address-line2"
+                                                aria-label={translate(
+                                                    'modal_physical_card.modal_section.request_new_card.house',
+                                                )}
                                             />
                                             <FormError error={requestPhysicalCardForm.errors?.house} />
                                         </div>
@@ -429,6 +435,9 @@ export default function ModalPhysicalCardType({
                                                     requestPhysicalCardForm.update({ house_addition: e.target.value });
                                                 }}
                                                 autoComplete="address-line3"
+                                                aria-label={translate(
+                                                    'modal_physical_card.modal_section.request_new_card.house_addition',
+                                                )}
                                             />
                                             <FormError error={requestPhysicalCardForm.errors?.house_addition} />
                                         </div>
@@ -450,6 +459,9 @@ export default function ModalPhysicalCardType({
                                                     requestPhysicalCardForm.update({ postcode: e.target.value });
                                                 }}
                                                 autoComplete="postal-code"
+                                                aria-label={translate(
+                                                    'modal_physical_card.modal_section.request_new_card.postcode',
+                                                )}
                                             />
                                             <FormError error={requestPhysicalCardForm.errors?.postcode} />
                                         </div>
@@ -467,6 +479,9 @@ export default function ModalPhysicalCardType({
                                                     requestPhysicalCardForm.update({ city: e.target.value });
                                                 }}
                                                 autoComplete="address-level2"
+                                                aria-label={translate(
+                                                    'modal_physical_card.modal_section.request_new_card.city',
+                                                )}
                                             />
                                             <FormError error={requestPhysicalCardForm.errors?.city} />
                                         </div>
diff --git a/react/src/webshop/components/modals/modal-product-reserve/ModalProductReserve.tsx b/react/src/webshop/components/modals/modal-product-reserve/ModalProductReserve.tsx
index e2b3247a9..4f4e1641e 100644
--- a/react/src/webshop/components/modals/modal-product-reserve/ModalProductReserve.tsx
+++ b/react/src/webshop/components/modals/modal-product-reserve/ModalProductReserve.tsx
@@ -725,6 +725,7 @@ export default function ModalProductReserve({
                                         onChange={(e) => form.update({ first_name: e.target.value })}
                                         data-dusk="productReserveFormFirstName"
                                         autoComplete="given-name"
+                                        aria-label={translate('modal_reserve_product.fill_notes.first_name')}
                                     />
                                     <FormError error={form.errors.first_name} />
                                 </div>
@@ -740,6 +741,7 @@ export default function ModalProductReserve({
                                         onChange={(e) => form.update({ last_name: e.target.value })}
                                         data-dusk="productReserveFormLastName"
                                         autoComplete="family-name"
+                                        aria-label={translate('modal_reserve_product.fill_notes.last_name')}
                                     />
                                     <FormError error={form.errors.last_name} />
                                 </div>
diff --git a/react/src/webshop/components/pages/profile/cards/IdentityContactInformationCard.tsx b/react/src/webshop/components/pages/profile/cards/IdentityContactInformationCard.tsx
index 92d02d408..aff3fd8ab 100644
--- a/react/src/webshop/components/pages/profile/cards/IdentityContactInformationCard.tsx
+++ b/react/src/webshop/components/pages/profile/cards/IdentityContactInformationCard.tsx
@@ -84,7 +84,13 @@ export default function IdentityContactInformationCard({
                     <div className="col col-sm-12 col-lg-8 col-md-10">
                         <div className="form-group">
                             <label className="form-label">{translate('profile.contacts.primary_email')}</label>
-                            <input className="form-control" disabled={true} value={profile.email} />
+                            <input
+                                className="form-control"
+                                disabled={true}
+                                value={profile.email}
+                                autoComplete="email"
+                                aria-label={translate('profile.contacts.primary_email')}
+                            />
                         </div>
 
                         {profile?.email_verified?.map((email, index) => (
@@ -92,7 +98,13 @@ export default function IdentityContactInformationCard({
                                 <label className="form-label">
                                     {translate('profile.contacts.extra_email', { number: index + 1 })}
                                 </label>
-                                <input className="form-control" disabled={true} value={email} />
+                                <input
+                                    className="form-control"
+                                    disabled={true}
+                                    value={email}
+                                    autoComplete="email"
+                                    aria-label={translate('profile.contacts.extra_email')}
+                                />
                             </div>
                         ))}
 
@@ -112,6 +124,7 @@ export default function IdentityContactInformationCard({
                                     className="form-control"
                                     value={form?.values?.[field] || ''}
                                     onChange={(e) => form.update({ [field]: e.target.value })}
+                                    autoComplete="tel"
                                 />
                                 <FormError error={form.errors?.[field]} />
                             </div>

From 93a6cdea56f4cca0e8a7e19397c04634c5d7229c Mon Sep 17 00:00:00 2001
From: Kyra-05 <kyra@forus.io>
Date: Thu, 18 Sep 2025 10:29:53 +0200
Subject: [PATCH 17/29] chore: deleted some todo's

---
 react/src/dashboard/components/pages/products/Products.tsx  | 1 -
 .../elements/steps/FundRequestStepCriteria.tsx              | 6 +++---
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/react/src/dashboard/components/pages/products/Products.tsx b/react/src/dashboard/components/pages/products/Products.tsx
index d2293b43e..df2e41164 100644
--- a/react/src/dashboard/components/pages/products/Products.tsx
+++ b/react/src/dashboard/components/pages/products/Products.tsx
@@ -140,7 +140,6 @@ export default function Products() {
                         />
                         <div className="form">
                             <div className="form-group">
-                                {/*TODO: add arialabel*/}
                                 <input
                                     className="form-control"
                                     type="text"
diff --git a/react/src/webshop/components/pages/funds-request/elements/steps/FundRequestStepCriteria.tsx b/react/src/webshop/components/pages/funds-request/elements/steps/FundRequestStepCriteria.tsx
index ffe6afcc9..a6ccd7a46 100644
--- a/react/src/webshop/components/pages/funds-request/elements/steps/FundRequestStepCriteria.tsx
+++ b/react/src/webshop/components/pages/funds-request/elements/steps/FundRequestStepCriteria.tsx
@@ -262,7 +262,7 @@ export default function FundRequestStepCriteria({
                                     dataDusk="controlStep"
                                 />
                             )}
-                            {/*TODO: add autoComplete*/}
+
                             {criterion.control_type == 'ui_control_date' && (
                                 <UIControlDate
                                     value={
@@ -280,7 +280,7 @@ export default function FundRequestStepCriteria({
                                     dataDusk="controlDate"
                                 />
                             )}
-                            {/*TODO: add autoComplete*/}
+
                             {criterion.control_type == 'ui_control_number' && (
                                 <UIControlNumber
                                     type={'number'}
@@ -293,7 +293,7 @@ export default function FundRequestStepCriteria({
                                     }}
                                 />
                             )}
-                            {/*TODO: add autoComplete*/}
+
                             {criterion.control_type == 'ui_control_text' && (
                                 <UIControlText
                                     type={'text'}

From 213a4f806764aa81c6c7f1c193ee2dc02c5b296d Mon Sep 17 00:00:00 2001
From: Yaroslav Kosterin <ateamcms@gmail.com>
Date: Thu, 18 Sep 2025 15:02:02 +0300
Subject: [PATCH 18/29] add event logs export

---
 .../elements/tables/EventLogsTable.tsx        | 24 ++++++++++-
 .../groups/LayoutAsideGroupOrganization.tsx   |  2 +-
 .../src/dashboard/services/EventLogService.ts | 13 +++++-
 .../exporters/useEventLogsExporter.tsx        | 43 +++++++++++++++++++
 4 files changed, 78 insertions(+), 4 deletions(-)
 create mode 100644 react/src/dashboard/services/exporters/useEventLogsExporter.tsx

diff --git a/react/src/dashboard/components/elements/tables/EventLogsTable.tsx b/react/src/dashboard/components/elements/tables/EventLogsTable.tsx
index aef82c1dc..851f05485 100644
--- a/react/src/dashboard/components/elements/tables/EventLogsTable.tsx
+++ b/react/src/dashboard/components/elements/tables/EventLogsTable.tsx
@@ -19,6 +19,7 @@ import EmptyCard from '../empty-card/EmptyCard';
 import useConfigurableTable from '../../pages/vouchers/hooks/useConfigurableTable';
 import TableTopScroller from './TableTopScroller';
 import TableEmptyValue from '../table-empty-value/TableEmptyValue';
+import useEventLogsExporter from '../../../services/exporters/useEventLogsExporter';
 
 export default function EventLogsTable({
     organization,
@@ -48,6 +49,7 @@ export default function EventLogsTable({
 
     const eventLogService = useEventLogService();
     const paginatorService = usePaginatorService();
+    const eventLogsExporter = useEventLogsExporter();
 
     const [logs, setLogs] = useState<PaginationData<EventLog>>(null);
     const [noteTooltip, setNoteTooltip] = useState(null);
@@ -100,6 +102,10 @@ export default function EventLogsTable({
         [filter],
     );
 
+    const exportLogs = useCallback(() => {
+        eventLogsExporter.exportData(organization.id, filter.activeValues);
+    }, [organization.id, filter.activeValues, eventLogsExporter]);
+
     const fetchLogs = useCallback(() => {
         setProgress(0);
 
@@ -134,7 +140,7 @@ export default function EventLogsTable({
     }
 
     return (
-        <div className="card">
+        <div className="card" data-dusk="tableEventLogsContent">
             <div className="card-header">
                 <div className="card-title flex flex-grow">
                     {title || 'Activiteitenlogboek'} ({logs.meta.total})
@@ -155,6 +161,7 @@ export default function EventLogsTable({
                                             type="search"
                                             className="form-control"
                                             value={filter.values.q}
+                                            data-dusk="tableEventLogsSearch"
                                             onChange={(e) => filter.update({ q: e.target.value })}
                                             placeholder={translate('event_logs.labels.search')}
                                         />
@@ -197,6 +204,19 @@ export default function EventLogsTable({
                                             </div>
                                         ))}
                                     </FilterItemToggle>
+
+                                    <div className="form-actions">
+                                        <button
+                                            className="button button-primary button-wide"
+                                            onClick={() => exportLogs()}
+                                            data-dusk="export"
+                                            disabled={logs.meta.total == 0}>
+                                            <em className="mdi mdi-download icon-start"> </em>
+                                            {translate('components.dropdown.export', {
+                                                total: logs.meta.total,
+                                            })}
+                                        </button>
+                                    </div>
                                 </CardHeaderFilter>
                             )}
                         </div>
@@ -215,7 +235,7 @@ export default function EventLogsTable({
 
                                 <tbody>
                                     {logs.data.map((log) => (
-                                        <tr key={log.id}>
+                                        <tr key={log.id} data-dusk={`tableEventLogsRow${log.id}`}>
                                             <td>
                                                 <div className="text-semibold text-primary nowrap">
                                                     {log.created_at_locale.split(' - ')[0]}
diff --git a/react/src/dashboard/layout/elements/aside/groups/LayoutAsideGroupOrganization.tsx b/react/src/dashboard/layout/elements/aside/groups/LayoutAsideGroupOrganization.tsx
index 839c9f70a..3bc9ee61a 100644
--- a/react/src/dashboard/layout/elements/aside/groups/LayoutAsideGroupOrganization.tsx
+++ b/react/src/dashboard/layout/elements/aside/groups/LayoutAsideGroupOrganization.tsx
@@ -47,7 +47,7 @@ export default function LayoutAsideGroupOrganization({
                     state: 'organization-logs',
                     stateParams: { organizationId: organization?.id },
                     show: envData.client_type == 'sponsor',
-                    dusk: 'employeesPage',
+                    dusk: 'eventLogsPage',
                 },
                 {
                     id: 'offices',
diff --git a/react/src/dashboard/services/EventLogService.ts b/react/src/dashboard/services/EventLogService.ts
index 4793bd61c..0e5ed7fa1 100644
--- a/react/src/dashboard/services/EventLogService.ts
+++ b/react/src/dashboard/services/EventLogService.ts
@@ -1,8 +1,9 @@
-import ApiResponse from '../props/ApiResponses';
+import ApiResponse, { ApiResponseSingle, ResponseSimple } from '../props/ApiResponses';
 import { useState } from 'react';
 import EventLog from '../props/models/EventLog';
 import ApiRequestService from './ApiRequestService';
 import { ConfigurableTableColumn } from '../components/pages/vouchers/hooks/useConfigurableTable';
+import { ExportFieldProp } from '../components/modals/ModalExportDataSelect';
 
 export class EventLogService<T = EventLog> {
     /**
@@ -24,6 +25,16 @@ export class EventLogService<T = EventLog> {
         return this.apiRequest.get(`${this.prefix}/${organizationId}/logs`, data) as Promise<ApiResponse<T>>;
     }
 
+    public exportFields(organization_id: number): Promise<ApiResponseSingle<Array<ExportFieldProp>>> {
+        return this.apiRequest.get(`${this.prefix}/${organization_id}/logs/export-fields`);
+    }
+
+    public export = (organization_id: number, data: object = {}): Promise<ResponseSimple<ArrayBuffer>> => {
+        return this.apiRequest.get(`${this.prefix}/${organization_id}/logs/export`, data, {
+            responseType: 'arraybuffer',
+        });
+    };
+
     public getColumns(hideEntity: boolean): Array<ConfigurableTableColumn> {
         const list = ['date', !hideEntity ? 'entity' : null, 'action', 'author', 'note'].filter((item) => item);
 
diff --git a/react/src/dashboard/services/exporters/useEventLogsExporter.tsx b/react/src/dashboard/services/exporters/useEventLogsExporter.tsx
new file mode 100644
index 000000000..f99ab36d1
--- /dev/null
+++ b/react/src/dashboard/services/exporters/useEventLogsExporter.tsx
@@ -0,0 +1,43 @@
+import React, { useCallback } from 'react';
+import useSetProgress from '../../hooks/useSetProgress';
+import useOpenModal from '../../hooks/useOpenModal';
+import ModalExportDataSelect from '../../components/modals/ModalExportDataSelect';
+import useMakeExporterService from './hooks/useMakeExporterService';
+import usePushApiError from '../../hooks/usePushApiError';
+import { useEventLogService } from '../EventLogService';
+
+export default function useEventLogsExporter() {
+    const openModal = useOpenModal();
+    const setProgress = useSetProgress();
+    const pushApiError = usePushApiError();
+
+    const eventLogService = useEventLogService();
+    const { makeSections, saveExportedData } = useMakeExporterService();
+
+    const exportData = useCallback(
+        (organization_id: number, filters: object = {}) => {
+            const onSuccess = (data: { data_format: string; fields: string }) => {
+                const { data_format, fields } = data;
+                const queryFilters = { ...filters, data_format, fields };
+
+                setProgress(0);
+                console.info('- data loaded from the api.');
+
+                eventLogService
+                    .export(organization_id, queryFilters)
+                    .then((res) => saveExportedData(data, organization_id, res))
+                    .catch(pushApiError)
+                    .finally(() => setProgress(100));
+            };
+
+            eventLogService.exportFields(organization_id).then((res) => {
+                openModal((modal) => (
+                    <ModalExportDataSelect modal={modal} sections={makeSections(res.data.data)} onSuccess={onSuccess} />
+                ));
+            });
+        },
+        [makeSections, openModal, pushApiError, saveExportedData, setProgress, eventLogService],
+    );
+
+    return { exportData };
+}

From b8fb72552bcf74ce265dbbe5b342c8c94c3a1f2d Mon Sep 17 00:00:00 2001
From: Yaroslav Kosterin <ateamcms@gmail.com>
Date: Thu, 18 Sep 2025 15:10:26 +0300
Subject: [PATCH 19/29] make faq subtitle optional

---
 .../components/elements/faq-editor-funds/FaqEditorItem.tsx | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/react/src/dashboard/components/elements/faq-editor-funds/FaqEditorItem.tsx b/react/src/dashboard/components/elements/faq-editor-funds/FaqEditorItem.tsx
index 731469f70..9bd2cc899 100644
--- a/react/src/dashboard/components/elements/faq-editor-funds/FaqEditorItem.tsx
+++ b/react/src/dashboard/components/elements/faq-editor-funds/FaqEditorItem.tsx
@@ -49,10 +49,7 @@ export default function FaqEditorItem({
                         <em className="mdi mdi-frequently-asked-questions" />
                     </div>
                 ) : (
-                    <div
-                        className={`question-icon ${
-                            isCollapsed && (!faqItem.title || !faqItem.subtitle) ? 'text-danger' : ''
-                        }`}>
+                    <div className={`question-icon ${isCollapsed && !faqItem.title ? 'text-danger' : ''}`}>
                         <em className="mdi mdi-format-title" />
                     </div>
                 )}
@@ -127,7 +124,7 @@ export default function FaqEditorItem({
                             </div>
                         ) : (
                             <div className="form-group">
-                                <label className="form-label form-label-required">Subtitel</label>
+                                <label className="form-label">Subtitel</label>
                                 <textarea
                                     className="r-n form-control"
                                     placeholder="Subtitel"

From 2397bb808dc8d8d2009cf66b1b4d138cf8a36b56 Mon Sep 17 00:00:00 2001
From: Yaroslav Kosterin <ateamcms@gmail.com>
Date: Fri, 19 Sep 2025 12:22:44 +0300
Subject: [PATCH 20/29] add notes to identity

---
 .../identitities-show/IdentitiesShow.tsx      | 25 +++++++++++++++++++
 .../services/SponsorIdentitesService.ts       | 13 ++++++++++
 2 files changed, 38 insertions(+)

diff --git a/react/src/dashboard/components/pages/identitities-show/IdentitiesShow.tsx b/react/src/dashboard/components/pages/identitities-show/IdentitiesShow.tsx
index 7dfa87e5a..80a78ab34 100644
--- a/react/src/dashboard/components/pages/identitities-show/IdentitiesShow.tsx
+++ b/react/src/dashboard/components/pages/identitities-show/IdentitiesShow.tsx
@@ -28,6 +28,8 @@ import { dateParse } from '../../../helpers/dates';
 import BlockCardEmails from '../../elements/block-card-emails/BlockCardEmails';
 import useEmailLogService from '../../../services/EmailLogService';
 import IdentityPerson from '../fund-requests-view/elements/IdentityPerson';
+import BlockCardNotes from '../../elements/block-card-notes/BlockCardNotes';
+import Note from '../../../props/models/Note';
 
 export default function IdentitiesShow() {
     const openModal = useOpenModal();
@@ -117,6 +119,27 @@ export default function IdentitiesShow() {
         [activeOrganization?.id, identity?.id, emailLogService],
     );
 
+    const fetchNotes = useCallback(
+        (query = {}) => {
+            return sponsorIdentitiesService.notes(activeOrganization.id, identity?.id, query);
+        },
+        [activeOrganization.id, identity?.id, sponsorIdentitiesService],
+    );
+
+    const deleteNote = useCallback(
+        (note: Note) => {
+            return sponsorIdentitiesService.noteDestroy(activeOrganization.id, identity?.id, note.id);
+        },
+        [activeOrganization.id, identity?.id, sponsorIdentitiesService],
+    );
+
+    const storeNote = useCallback(
+        (data: { description: string }) => {
+            return sponsorIdentitiesService.storeNote(activeOrganization.id, identity?.id, data);
+        },
+        [activeOrganization.id, identity?.id, sponsorIdentitiesService],
+    );
+
     useEffect(() => {
         fetchIdentity();
     }, [fetchIdentity]);
@@ -200,6 +223,8 @@ export default function IdentitiesShow() {
                 <IdentityPerson organization={activeOrganization} identityId={identity.id} />
             )}
 
+            <BlockCardNotes isAssigned={true} fetchNotes={fetchNotes} deleteNote={deleteNote} storeNote={storeNote} />
+
             <Card
                 title={'Huishouden'}
                 buttons={[
diff --git a/react/src/dashboard/services/SponsorIdentitesService.ts b/react/src/dashboard/services/SponsorIdentitesService.ts
index f6d5d3e2c..08f1c8173 100644
--- a/react/src/dashboard/services/SponsorIdentitesService.ts
+++ b/react/src/dashboard/services/SponsorIdentitesService.ts
@@ -6,6 +6,7 @@ import SponsorIdentity, { ProfileBankAccount } from '../props/models/Sponsor/Spo
 import { ExportFieldProp } from '../components/modals/ModalExportDataSelect';
 import Organization from '../props/models/Organization';
 import IdentitiesApiPerson from '../props/models/IdentitiesApiPerson';
+import Note from '../props/models/Note';
 
 export class SponsorIdentitiesService<T = SponsorIdentity, B = ProfileBankAccount> {
     /**
@@ -92,6 +93,18 @@ export class SponsorIdentitiesService<T = SponsorIdentity, B = ProfileBankAccoun
         return this.apiRequest.get(`${this.prefix}/${organization_id}/sponsor/identities/export-fields`);
     }
 
+    public notes(organizationId: number, id: number, data: object): Promise<ApiResponse<Note>> {
+        return this.apiRequest.get(`${this.prefix}/${organizationId}/sponsor/identities/${id}/notes`, data);
+    }
+
+    public noteDestroy(organizationId: number, id: number, note_id: number): Promise<ApiResponseSingle<null>> {
+        return this.apiRequest.delete(`${this.prefix}/${organizationId}/sponsor/identities/${id}/notes/${note_id}`);
+    }
+
+    public storeNote(organizationId: number, id: number, data: object): Promise<ApiResponseSingle<Note>> {
+        return this.apiRequest.post(`${this.prefix}/${organizationId}/sponsor/identities/${id}/notes`, data);
+    }
+
     public getColumns(organization: Organization): Array<ConfigurableTableColumn> {
         const list = [
             'id',

From 07e4147cefe560f23b5104425b8df494d5d86128 Mon Sep 17 00:00:00 2001
From: dev-rminds <dev@rminds.nl>
Date: Mon, 22 Sep 2025 09:15:45 +0300
Subject: [PATCH 21/29] identitiy profiles creation, relations and households

---
 .../_common/blocks/block-export-options.scss  |   2 +-
 .../scss/_common/components/modals.scss       |  10 +-
 .../scss/_common/components/tables.scss       |   7 +
 .../scss/_common/dashboard.scss               |   2 +-
 .../components/elements/card/Card.tsx         |   5 +-
 .../card/blocks/CardBlockKeyValue.tsx         |   2 +-
 .../FundCriteriaEditor.tsx                    |   4 +-
 .../FundCriteriaEditorItem.tsx                |   4 +-
 .../SelectControlOptionsOrganization.tsx      |   8 +-
 .../elements/tables/TableRowActionItem.tsx    |  35 ++
 .../modals/ModalCreatePrevalidation.tsx       |   3 +-
 .../modals/ModalPrevalidationsUpload.tsx      |   3 +-
 .../modals/ModalVoucherRecordEdit.tsx         |   3 +-
 .../ModalVoucherTransaction.tsx               |   4 +-
 .../components/pages/employees/Employees.tsx  |   3 +-
 .../extra-payments-view/ExtraPaymentsView.tsx |   3 +-
 .../fund-requests-view/FundRequestsView.tsx   |   3 +-
 .../pages/households/Households.tsx           | 308 ++++++++++++
 .../pages/households/HouseholdsShow.tsx       | 114 +++++
 .../elements/HouseholdIdentitiesCard.tsx      | 226 +++++++++
 .../households/hooks/useDeleteHousehold.tsx   |  50 ++
 .../households/hooks/useEditHousehold.tsx     |  24 +
 .../hooks/useHouseholdAddIdentity.tsx         |  56 +++
 .../hooks/useHouseholdDeleteIdentity.tsx      |  46 ++
 .../households/modals/ModalEditHousehold.tsx  | 126 +++++
 .../ModalSelectOrMakeSponsorIdentity.tsx      | 276 +++++++++++
 .../modals/elements/HouseholdAddress.tsx      |  57 +++
 .../modals/elements/HouseholdMembers.tsx      |  85 ++++
 .../pages/identities/Identities.tsx           | 455 +-----------------
 .../identities/elements/IdentitiesTable.tsx   | 344 +++++++++++++
 .../elements/IdentitiesTableRowItems.tsx      |  46 ++
 .../hooks/useFetchSponsorIdentities.tsx       | 110 +++++
 .../identitities-show/IdentitiesShow.tsx      | 147 ++----
 .../cards/IdentityBankAccountsCard.tsx        |   9 +-
 .../cards/IdentityFundRequestsCard.tsx        |   5 +-
 .../elements/ProfileRelationsCard.tsx         | 234 +++++++++
 .../elements/ProfileRelationsTableRowItem.tsx |  35 ++
 .../hooks/useEditProfileRecords.tsx           |  38 ++
 .../hooks/useIdentityRelationDelete.tsx       |  52 ++
 .../hooks/useIdentityRelationEdit.tsx         |  61 +++
 .../hooks/useProfileRecordTypes.tsx           |  36 ++
 .../modals/ModalAddProfileRelation.tsx        | 294 +++++++++++
 .../modals/ModalEditProfileRecords.tsx        | 220 +++++----
 .../modals/elements/ProfileRecordsAddress.tsx |  48 ++
 .../elements/ProfileRecordsContacts.tsx       |  21 +
 .../modals/elements/ProfileRecordsField.tsx   |  60 +++
 .../modals/elements/ProfileRecordsHouse.tsx   |  21 +
 .../elements/ProfileRecordsPersonal.tsx       |  74 +++
 .../ImplementationsNotificationsSend.tsx      |   3 +-
 .../ImplementationsView.tsx                   |  13 +-
 .../pages/implementations/Implementations.tsx |   9 +-
 .../components/pages/offices/Offices.tsx      |   5 +-
 .../OrganizationsFundsEdit.tsx                |  29 +-
 .../OrganizationFundsShowOverviewCard.tsx     |   8 +-
 .../OrganizationsFundsShowDetailsCard.tsx     |   8 +-
 .../OrganizationsFundsShowRelationsCard.tsx   |   8 +-
 .../OrganizationsFundsShowStatisticsCard.tsx  |   4 +-
 .../OrganizationsFundsShowIdentitiesCard.tsx  |   6 +-
 ...anizationsFundsShowImplementationsCard.tsx |   3 +-
 .../organizations-funds/OrganizationFunds.tsx |  26 +-
 .../pages/payment-methods/PaymentMethods.tsx  |   5 +-
 .../pages/prevalidations/Prevalidations.tsx   |   3 +-
 .../products-edit/elements/ProductsForm.tsx   |   6 +-
 .../provider-overview/ProviderOverview.tsx    |   9 +-
 .../ReimbursementsView.tsx                    |   3 +-
 .../pages/reimbursements/Reimbursements.tsx   |   3 +-
 .../ReservationsSettings.tsx                  |   3 +-
 .../reservations-view/ReservationsView.tsx    |   3 +-
 .../pages/reservations/Reservations.tsx       |   3 +-
 .../elements/ReservationsTableRowProvider.tsx |   4 +-
 .../TransactionBulksView.tsx                  |   3 +-
 .../pages/transactions/Transactions.tsx       |   8 +-
 .../vouchers-view/VouchersViewComponent.tsx   |   9 +-
 .../elements/VoucherRecordsCard.tsx           |   6 +-
 .../components/pages/vouchers/Vouchers.tsx    |   3 +-
 .../elements/VouchersTableFilters.tsx         |   4 +-
 .../elements/VouchersTableNoFundsBlock.tsx    |   4 +-
 .../vouchers/elements/VouchersTableRow.tsx    |   4 +-
 react/src/dashboard/helpers/utils.ts          |  12 +-
 react/src/dashboard/hooks/useTableToggles.tsx |  37 +-
 react/src/dashboard/i18n/nl/i18n-pages.js     |   2 +
 .../src/dashboard/i18n/nl/pages/households.js |  27 ++
 .../src/dashboard/i18n/nl/pages/identities.js |   8 +-
 .../elements/aside/LayoutAsideProvider.tsx    |  18 +-
 .../elements/aside/LayoutAsideSponsor.tsx     |  98 ++--
 .../elements/aside/LayoutAsideValidator.tsx   |  14 +-
 .../groups/LayoutAsideGroupOrganization.tsx   |  12 +-
 .../paginator/components/Paginator.tsx        |   3 +
 .../modules/state_router/StateNavLink.tsx     |   4 +-
 .../dashboard/props/models/Organization.tsx   |  36 +-
 react/src/dashboard/props/models/Profile.tsx  |   4 +-
 .../src/dashboard/props/models/RecordType.tsx |   3 +-
 .../props/models/Sponsor/Household.tsx        |  20 +
 .../props/models/Sponsor/HouseholdProfile.tsx |  12 +
 .../props/models/Sponsor/SponsorIdentity.tsx  |  29 +-
 .../models/Sponsor/SponsorProfileRelation.tsx |  26 +
 react/src/dashboard/router/routes.tsx         |  15 +-
 react/src/dashboard/services/FundService.ts   |  18 +-
 .../services/HouseholdProfilesService.ts      |  60 +++
 .../dashboard/services/HouseholdsService.ts   |  78 +++
 .../dashboard/services/OrganizationService.ts |  29 +-
 .../services/SponsorIdentitesService.ts       |  91 +++-
 .../components/pages/profile/Profile.tsx      |   4 +-
 .../modules/state_router/StateNavLink.tsx     |   4 +-
 104 files changed, 3752 insertions(+), 896 deletions(-)
 create mode 100755 react/src/dashboard/components/elements/tables/TableRowActionItem.tsx
 create mode 100644 react/src/dashboard/components/pages/households/Households.tsx
 create mode 100644 react/src/dashboard/components/pages/households/HouseholdsShow.tsx
 create mode 100644 react/src/dashboard/components/pages/households/elements/HouseholdIdentitiesCard.tsx
 create mode 100644 react/src/dashboard/components/pages/households/hooks/useDeleteHousehold.tsx
 create mode 100644 react/src/dashboard/components/pages/households/hooks/useEditHousehold.tsx
 create mode 100644 react/src/dashboard/components/pages/households/hooks/useHouseholdAddIdentity.tsx
 create mode 100644 react/src/dashboard/components/pages/households/hooks/useHouseholdDeleteIdentity.tsx
 create mode 100644 react/src/dashboard/components/pages/households/modals/ModalEditHousehold.tsx
 create mode 100644 react/src/dashboard/components/pages/households/modals/ModalSelectOrMakeSponsorIdentity.tsx
 create mode 100644 react/src/dashboard/components/pages/households/modals/elements/HouseholdAddress.tsx
 create mode 100644 react/src/dashboard/components/pages/households/modals/elements/HouseholdMembers.tsx
 create mode 100644 react/src/dashboard/components/pages/identities/elements/IdentitiesTable.tsx
 create mode 100644 react/src/dashboard/components/pages/identities/elements/IdentitiesTableRowItems.tsx
 create mode 100644 react/src/dashboard/components/pages/identities/hooks/useFetchSponsorIdentities.tsx
 create mode 100644 react/src/dashboard/components/pages/identitities-show/elements/ProfileRelationsCard.tsx
 create mode 100644 react/src/dashboard/components/pages/identitities-show/elements/ProfileRelationsTableRowItem.tsx
 create mode 100644 react/src/dashboard/components/pages/identitities-show/hooks/useEditProfileRecords.tsx
 create mode 100644 react/src/dashboard/components/pages/identitities-show/hooks/useIdentityRelationDelete.tsx
 create mode 100644 react/src/dashboard/components/pages/identitities-show/hooks/useIdentityRelationEdit.tsx
 create mode 100644 react/src/dashboard/components/pages/identitities-show/hooks/useProfileRecordTypes.tsx
 create mode 100644 react/src/dashboard/components/pages/identitities-show/modals/ModalAddProfileRelation.tsx
 create mode 100644 react/src/dashboard/components/pages/identitities-show/modals/elements/ProfileRecordsAddress.tsx
 create mode 100644 react/src/dashboard/components/pages/identitities-show/modals/elements/ProfileRecordsContacts.tsx
 create mode 100644 react/src/dashboard/components/pages/identitities-show/modals/elements/ProfileRecordsField.tsx
 create mode 100644 react/src/dashboard/components/pages/identitities-show/modals/elements/ProfileRecordsHouse.tsx
 create mode 100644 react/src/dashboard/components/pages/identitities-show/modals/elements/ProfileRecordsPersonal.tsx
 create mode 100644 react/src/dashboard/i18n/nl/pages/households.js
 create mode 100644 react/src/dashboard/props/models/Sponsor/Household.tsx
 create mode 100644 react/src/dashboard/props/models/Sponsor/HouseholdProfile.tsx
 create mode 100644 react/src/dashboard/props/models/Sponsor/SponsorProfileRelation.tsx
 create mode 100644 react/src/dashboard/services/HouseholdProfilesService.ts
 create mode 100644 react/src/dashboard/services/HouseholdsService.ts

diff --git a/react/assets/forus-platform/scss/_common/blocks/block-export-options.scss b/react/assets/forus-platform/scss/_common/blocks/block-export-options.scss
index eb9cecc49..5d2d4910e 100644
--- a/react/assets/forus-platform/scss/_common/blocks/block-export-options.scss
+++ b/react/assets/forus-platform/scss/_common/blocks/block-export-options.scss
@@ -1,4 +1,4 @@
-&.block-export-options {
+.block.block-export-options {
     .export-section {
         margin-bottom: 25px;
         display: flex;
diff --git a/react/assets/forus-platform/scss/_common/components/modals.scss b/react/assets/forus-platform/scss/_common/components/modals.scss
index 2a36c7af8..142b0a74c 100644
--- a/react/assets/forus-platform/scss/_common/components/modals.scss
+++ b/react/assets/forus-platform/scss/_common/components/modals.scss
@@ -67,11 +67,15 @@
 
         .modal-header {
             background: #fff;
-            padding: 20px 25px;
+            padding: 15px 25px;
             font: 600 16px/25px var(--base-font);
             border-bottom: 1px solid #d4d9dd;
             position: relative;
             border-radius: 3px 3px 0 0;
+
+            &.modal-header-compact {
+                padding: 10px 25px;
+            }
         }
 
         .modal-body {
@@ -173,6 +177,10 @@
                     }
                 }
 
+                &.modal-section-compact {
+                    padding: 10px 20px;
+                }
+
                 &.modal-section-collapse {
                     padding: 0;
                 }
diff --git a/react/assets/forus-platform/scss/_common/components/tables.scss b/react/assets/forus-platform/scss/_common/components/tables.scss
index 700e0e25a..bdcd56b85 100644
--- a/react/assets/forus-platform/scss/_common/components/tables.scss
+++ b/react/assets/forus-platform/scss/_common/components/tables.scss
@@ -587,6 +587,13 @@
                 }
             }
 
+            &.tr-collapsed {
+                td {
+                    padding-top: 0px;
+                    padding-bottom: 0px;
+                }
+            }
+
             &.light {
                 background: #fff;
             }
diff --git a/react/assets/forus-platform/scss/_common/dashboard.scss b/react/assets/forus-platform/scss/_common/dashboard.scss
index ec8fea1e8..aa62ac8dd 100644
--- a/react/assets/forus-platform/scss/_common/dashboard.scss
+++ b/react/assets/forus-platform/scss/_common/dashboard.scss
@@ -54,7 +54,6 @@
     @import 'blocks/block-system-notification-editor.scss';
     @import 'blocks/block-mail_preview.scss';
     @import 'blocks/block-photo-selector-notifications.scss';
-    @import 'blocks/block-export-options.scss';
     @import 'blocks/block-feedback-result.scss';
     @import 'blocks/block-permissions-list.scss';
     @import 'blocks/block-announcements.scss';
@@ -99,6 +98,7 @@
 @import 'blocks/block-label-tabs.scss';
 @import 'blocks/block-translation-stats.scss';
 @import 'blocks/block-provider-product-overview.scss';
+@import 'blocks/block-export-options.scss';
 @import 'blocks/block-attachments-list.scss';
 @import 'blocks/block-request-clarification.scss';
 
diff --git a/react/src/dashboard/components/elements/card/Card.tsx b/react/src/dashboard/components/elements/card/Card.tsx
index 5c510bdb9..52304d059 100644
--- a/react/src/dashboard/components/elements/card/Card.tsx
+++ b/react/src/dashboard/components/elements/card/Card.tsx
@@ -1,5 +1,6 @@
 import React, { ReactNode } from 'react';
 import { Button, ButtonType } from '../button/Button';
+import classNames from 'classnames';
 
 export default function Card({
     title,
@@ -9,6 +10,7 @@ export default function Card({
     footer,
     footerHidden = false,
     dusk = null,
+    className = '',
 }: {
     title: string;
     section?: boolean;
@@ -17,9 +19,10 @@ export default function Card({
     footer?: ReactNode | ReactNode[];
     footerHidden?: boolean;
     dusk?: string;
+    className?: string;
 }) {
     return (
-        <div className={'card'} data-dusk={dusk}>
+        <div className={classNames('card', className)} data-dusk={dusk}>
             <div className="card-header">
                 <div className="card-title flex flex-grow">{title}</div>
                 <div className="card-header-actions">
diff --git a/react/src/dashboard/components/elements/card/blocks/CardBlockKeyValue.tsx b/react/src/dashboard/components/elements/card/blocks/CardBlockKeyValue.tsx
index 3bba1b9a2..a5d1f9358 100644
--- a/react/src/dashboard/components/elements/card/blocks/CardBlockKeyValue.tsx
+++ b/react/src/dashboard/components/elements/card/blocks/CardBlockKeyValue.tsx
@@ -20,7 +20,7 @@ export default function CardBlockKeyValue({
             {items?.map((item, index) => (
                 <div className="keyvalue-item" key={index}>
                     <div className="keyvalue-key">{item.label}</div>
-                    <div className="keyvalue-value text-black">{item.value || <TableEmptyValue />}</div>
+                    <div className="keyvalue-value text-black">{item.value ?? <TableEmptyValue />}</div>
                 </div>
             ))}
         </div>
diff --git a/react/src/dashboard/components/elements/fund-criteria-editor/FundCriteriaEditor.tsx b/react/src/dashboard/components/elements/fund-criteria-editor/FundCriteriaEditor.tsx
index 4c254cf5c..ef8f3d119 100644
--- a/react/src/dashboard/components/elements/fund-criteria-editor/FundCriteriaEditor.tsx
+++ b/react/src/dashboard/components/elements/fund-criteria-editor/FundCriteriaEditor.tsx
@@ -1,6 +1,6 @@
 import React, { createRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import Fund from '../../../props/models/Fund';
-import Organization from '../../../props/models/Organization';
+import Organization, { Permission } from '../../../props/models/Organization';
 import RecordType from '../../../props/models/RecordType';
 import { hasPermission } from '../../../helpers/utils';
 import FundCriteriaEditorItem from './FundCriteriaEditorItem';
@@ -178,7 +178,7 @@ export default function FundCriteriaEditor({
                 ))}
             </div>
 
-            {hasPermission(organization, 'manage_funds') &&
+            {hasPermission(organization, Permission.MANAGE_FUNDS) &&
                 (fund.criteria_editable || modified || deletedItemsCount > 0) && (
                     <div className={classNames('criteria-editor-actions', footerClassName)}>
                         {fund.criteria_editable && (
diff --git a/react/src/dashboard/components/elements/fund-criteria-editor/FundCriteriaEditorItem.tsx b/react/src/dashboard/components/elements/fund-criteria-editor/FundCriteriaEditorItem.tsx
index 50705cb45..a6e3f7998 100644
--- a/react/src/dashboard/components/elements/fund-criteria-editor/FundCriteriaEditorItem.tsx
+++ b/react/src/dashboard/components/elements/fund-criteria-editor/FundCriteriaEditorItem.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import Organization from '../../../props/models/Organization';
+import Organization, { Permission } from '../../../props/models/Organization';
 import RecordType from '../../../props/models/RecordType';
 import { hasPermission } from '../../../helpers/utils';
 import SelectControl from '../select-control/SelectControl';
@@ -74,7 +74,7 @@ export default function FundCriteriaEditorItem({
     const [optional, setOptional] = useState(criterion.optional);
 
     const disabled = useMemo<boolean>(() => {
-        return !isEditable || !hasPermission(organization, 'manage_funds');
+        return !isEditable || !hasPermission(organization, Permission.MANAGE_FUNDS);
     }, [isEditable, organization]);
 
     const hasBooleanLabel = useMemo(() => {
diff --git a/react/src/dashboard/components/elements/select-control/templates/SelectControlOptionsOrganization.tsx b/react/src/dashboard/components/elements/select-control/templates/SelectControlOptionsOrganization.tsx
index 2f0fee6a3..359353eda 100644
--- a/react/src/dashboard/components/elements/select-control/templates/SelectControlOptionsOrganization.tsx
+++ b/react/src/dashboard/components/elements/select-control/templates/SelectControlOptionsOrganization.tsx
@@ -2,7 +2,7 @@ import React, { Fragment, useRef, useState } from 'react';
 import ClickOutside from '../../click-outside/ClickOutside';
 import { uniqueId } from 'lodash';
 import { SelectControlOptionsProp } from '../SelectControl';
-import Organization from '../../../../props/models/Organization';
+import Organization, { Permission } from '../../../../props/models/Organization';
 import useThumbnailUrl from '../../../../hooks/useThumbnailUrl';
 import StateNavLink from '../../../../modules/state_router/StateNavLink';
 import useTranslate from '../../../../hooks/useTranslate';
@@ -175,7 +175,7 @@ export default function SelectControlOptionsOrganization<T>({
                         </div>
 
                         <div className="select-control-options-actions">
-                            {isSponsorPanel && hasPermission(activeOrganization, 'manage_organization') && (
+                            {isSponsorPanel && hasPermission(activeOrganization, Permission.MANAGE_ORGANIZATION) && (
                                 <StateNavLink
                                     name={'organizations-contacts'}
                                     params={{ organizationId: (modelValue?.raw as Organization)?.id }}
@@ -191,7 +191,7 @@ export default function SelectControlOptionsOrganization<T>({
                             )}
 
                             {isSponsorPanel &&
-                                hasPermission(activeOrganization, 'manage_organization') &&
+                                hasPermission(activeOrganization, Permission.MANAGE_ORGANIZATION) &&
                                 activeOrganization.allow_translations && (
                                     <StateNavLink
                                         name={'organizations-translations'}
@@ -207,7 +207,7 @@ export default function SelectControlOptionsOrganization<T>({
                                     </StateNavLink>
                                 )}
 
-                            {hasPermission(activeOrganization, 'manage_organization') && (
+                            {hasPermission(activeOrganization, Permission.MANAGE_ORGANIZATION) && (
                                 <StateNavLink
                                     name={'organizations-edit'}
                                     params={{ organizationId: (modelValue?.raw as Organization)?.id }}
diff --git a/react/src/dashboard/components/elements/tables/TableRowActionItem.tsx b/react/src/dashboard/components/elements/tables/TableRowActionItem.tsx
new file mode 100755
index 000000000..297a5f5fa
--- /dev/null
+++ b/react/src/dashboard/components/elements/tables/TableRowActionItem.tsx
@@ -0,0 +1,35 @@
+import React, { ReactNode } from 'react';
+import StateNavLink from '../../../modules/state_router/StateNavLink';
+import classNames from 'classnames';
+
+export default function TableRowActionItem({
+    type,
+    name,
+    icon,
+    params,
+    disable,
+    onClick,
+    children,
+}: {
+    type: 'link' | 'button';
+    name?: string;
+    icon?: 'mdi-eye';
+    params?: object;
+    disable?: boolean;
+    onClick?: (e: React.MouseEvent<HTMLElement>) => void;
+    children?: ReactNode | ReactNode[];
+}) {
+    if (type === 'link') {
+        return (
+            <StateNavLink name={name} params={params} className={classNames('dropdown-item', disable && 'disabled')}>
+                {icon && <em className={classNames('mdi icon-start', icon)} />} {children}
+            </StateNavLink>
+        );
+    }
+
+    return (
+        <div onClick={onClick} className={classNames('dropdown-item', disable && 'disabled')}>
+            {icon && <em className={classNames('mdi icon-start', icon)} />} {children}
+        </div>
+    );
+}
diff --git a/react/src/dashboard/components/modals/ModalCreatePrevalidation.tsx b/react/src/dashboard/components/modals/ModalCreatePrevalidation.tsx
index 493239fdb..3a1374f21 100644
--- a/react/src/dashboard/components/modals/ModalCreatePrevalidation.tsx
+++ b/react/src/dashboard/components/modals/ModalCreatePrevalidation.tsx
@@ -17,6 +17,7 @@ import classNames from 'classnames';
 import FormGroup from '../elements/forms/elements/FormGroup';
 import SelectControlOptionsFund from '../elements/select-control/templates/SelectControlOptionsFund';
 import useTranslate from '../../hooks/useTranslate';
+import { ProfileRecordType } from '../../props/models/Sponsor/SponsorIdentity';
 
 export default function ModalCreatePrevalidation({
     modal,
@@ -364,7 +365,7 @@ export default function ModalCreatePrevalidation({
                                                         propKey={'key'}
                                                         value={formNewRecord.values.record_type_key}
                                                         options={recordTypesAvailable}
-                                                        onChange={(record_type_key: string) => {
+                                                        onChange={(record_type_key: ProfileRecordType) => {
                                                             formNewRecord.update({ record_type_key });
                                                         }}
                                                     />
diff --git a/react/src/dashboard/components/modals/ModalPrevalidationsUpload.tsx b/react/src/dashboard/components/modals/ModalPrevalidationsUpload.tsx
index 6848502f7..71a48644f 100644
--- a/react/src/dashboard/components/modals/ModalPrevalidationsUpload.tsx
+++ b/react/src/dashboard/components/modals/ModalPrevalidationsUpload.tsx
@@ -23,6 +23,7 @@ import FormGroupInfo from '../elements/forms/elements/FormGroupInfo';
 import TranslateHtml from '../elements/translate-html/TranslateHtml';
 import SelectControl from '../elements/select-control/SelectControl';
 import SelectControlOptionsFund from '../elements/select-control/templates/SelectControlOptionsFund';
+import { ProfileRecordType } from '../../props/models/Sponsor/SponsorIdentity';
 
 type CSVErrorProp = {
     emptyHeader?: string | string[];
@@ -272,7 +273,7 @@ export default function ModalPrevalidationsUpload({
                 body.forEach((row) => row.unshift(fundRecordKeyValue));
             }
 
-            const invalidRecordTypes = header.filter((recordTypeKey) => {
+            const invalidRecordTypes = header.filter((recordTypeKey: ProfileRecordType) => {
                 return criteriaRecordTypeKeys.indexOf(recordTypeKey) == -1;
             });
 
diff --git a/react/src/dashboard/components/modals/ModalVoucherRecordEdit.tsx b/react/src/dashboard/components/modals/ModalVoucherRecordEdit.tsx
index f8e80224c..8f966f71b 100644
--- a/react/src/dashboard/components/modals/ModalVoucherRecordEdit.tsx
+++ b/react/src/dashboard/components/modals/ModalVoucherRecordEdit.tsx
@@ -15,6 +15,7 @@ import { dateFormat, dateParse } from '../../helpers/dates';
 import DatePickerControl from '../elements/forms/controls/DatePickerControl';
 import usePushApiError from '../../hooks/usePushApiError';
 import { ResponseError } from '../../props/ApiResponses';
+import { ProfileRecordType } from '../../props/models/Sponsor/SponsorIdentity';
 
 export default function ModalVoucherRecordEdit({
     modal,
@@ -138,7 +139,7 @@ export default function ModalVoucherRecordEdit({
                                         options={recordTypes}
                                         allowSearch={false}
                                         disabled={!!record || (recordTypes.length == 1 && recordTypes[0].key == null)}
-                                        onChange={(record_type_key: string) => {
+                                        onChange={(record_type_key: ProfileRecordType) => {
                                             form.update({ record_type_key: record_type_key });
                                         }}
                                     />
diff --git a/react/src/dashboard/components/modals/ModalVoucherTransaction/ModalVoucherTransaction.tsx b/react/src/dashboard/components/modals/ModalVoucherTransaction/ModalVoucherTransaction.tsx
index 565c56787..ec9115538 100644
--- a/react/src/dashboard/components/modals/ModalVoucherTransaction/ModalVoucherTransaction.tsx
+++ b/react/src/dashboard/components/modals/ModalVoucherTransaction/ModalVoucherTransaction.tsx
@@ -3,7 +3,7 @@ import { ModalState } from '../../../modules/modals/context/ModalContext';
 import { hasPermission } from '../../../helpers/utils';
 import useFormBuilder from '../../../hooks/useFormBuilder';
 import SponsorVoucher from '../../../props/models/Sponsor/SponsorVoucher';
-import Organization from '../../../props/models/Organization';
+import Organization, { Permission } from '../../../props/models/Organization';
 import { useFundService } from '../../../services/FundService';
 import Fund from '../../../props/models/Fund';
 import { useOrganizationService } from '../../../services/OrganizationService';
@@ -85,7 +85,7 @@ export default function ModalVoucherTransaction({
         return (
             fund?.allow_reimbursements &&
             fund?.allow_direct_payments &&
-            hasPermission(organization, 'manage_reimbursements')
+            hasPermission(organization, Permission.MANAGE_REIMBURSEMENTS)
         );
     }, [fund?.allow_direct_payments, fund?.allow_reimbursements, organization]);
 
diff --git a/react/src/dashboard/components/pages/employees/Employees.tsx b/react/src/dashboard/components/pages/employees/Employees.tsx
index c54df52da..b3dad5d81 100644
--- a/react/src/dashboard/components/pages/employees/Employees.tsx
+++ b/react/src/dashboard/components/pages/employees/Employees.tsx
@@ -29,6 +29,7 @@ import TableTopScroller from '../../elements/tables/TableTopScroller';
 import TableRowActions from '../../elements/tables/TableRowActions';
 import useEmployeeExporter from '../../../services/exporters/useEmployeeExporter';
 import TableDateTime from '../../elements/tables/elements/TableDateTime';
+import { Permission } from '../../../props/models/Organization';
 
 export default function Employees() {
     const isProviderPanel = useIsProviderPanel();
@@ -208,7 +209,7 @@ export default function Employees() {
                 <div className="card-header-filters">
                     <div className="block block-inline-filters">
                         {activeOrganization.allow_2fa_restrictions &&
-                            hasPermission(activeOrganization, 'manage_organization') && (
+                            hasPermission(activeOrganization, Permission.MANAGE_ORGANIZATION) && (
                                 <NavLink
                                     className={'button button-default button-sm'}
                                     to={getStateRouteUrl('organization-security', {
diff --git a/react/src/dashboard/components/pages/extra-payments-view/ExtraPaymentsView.tsx b/react/src/dashboard/components/pages/extra-payments-view/ExtraPaymentsView.tsx
index bbaddce1a..6f3b15d3c 100644
--- a/react/src/dashboard/components/pages/extra-payments-view/ExtraPaymentsView.tsx
+++ b/react/src/dashboard/components/pages/extra-payments-view/ExtraPaymentsView.tsx
@@ -15,6 +15,7 @@ import ReservationExtraPaymentDetails from '../reservations-view/elements/Reserv
 import useTranslate from '../../../hooks/useTranslate';
 import TableEmptyValue from '../../elements/table-empty-value/TableEmptyValue';
 import usePushApiError from '../../../hooks/usePushApiError';
+import { Permission } from '../../../props/models/Organization';
 import ReservationStateLabel from '../../elements/resource-states/ReservationStateLabel';
 
 export default function ExtraPaymentsView() {
@@ -202,7 +203,7 @@ export default function ExtraPaymentsView() {
                 </div>
             </div>
 
-            {transaction && hasPermission(activeOrganization, 'view_finances') && (
+            {transaction && hasPermission(activeOrganization, Permission.VIEW_FINANCES) && (
                 <TransactionDetails
                     transaction={transaction}
                     setTransaction={setTransaction}
diff --git a/react/src/dashboard/components/pages/fund-requests-view/FundRequestsView.tsx b/react/src/dashboard/components/pages/fund-requests-view/FundRequestsView.tsx
index 4ab6dd07c..853b80c8f 100644
--- a/react/src/dashboard/components/pages/fund-requests-view/FundRequestsView.tsx
+++ b/react/src/dashboard/components/pages/fund-requests-view/FundRequestsView.tsx
@@ -35,6 +35,7 @@ import TableRowActions from '../../elements/tables/TableRowActions';
 import Icon from '../../../../../assets/forus-platform/resources/_platform-common/assets/img/fund-request-icon.svg';
 import TableEmptyValue from '../../elements/table-empty-value/TableEmptyValue';
 import useEmailLogService from '../../../services/EmailLogService';
+import { Permission } from '../../../props/models/Organization';
 import useConfigurableTable from '../vouchers/hooks/useConfigurableTable';
 import TableTopScroller from '../../elements/tables/TableTopScroller';
 
@@ -72,7 +73,7 @@ export default function FundRequestsView() {
     }, [envData, activeOrganization, fund]);
 
     const isValidatorsSupervisor = useMemo(
-        () => activeOrganization?.permissions.includes('manage_validators'),
+        () => activeOrganization?.permissions.includes(Permission.MANAGE_VALIDATORS),
         [activeOrganization],
     );
 
diff --git a/react/src/dashboard/components/pages/households/Households.tsx b/react/src/dashboard/components/pages/households/Households.tsx
new file mode 100644
index 000000000..bcddd137e
--- /dev/null
+++ b/react/src/dashboard/components/pages/households/Households.tsx
@@ -0,0 +1,308 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import useActiveOrganization from '../../../hooks/useActiveOrganization';
+import useSetProgress from '../../../hooks/useSetProgress';
+import { PaginationData } from '../../../props/ApiResponses';
+import Paginator from '../../../modules/paginator/components/Paginator';
+import LoadingCard from '../../elements/loading-card/LoadingCard';
+import { useFundService } from '../../../services/FundService';
+import Fund from '../../../props/models/Fund';
+import FilterItemToggle from '../../elements/tables/elements/FilterItemToggle';
+import SelectControl from '../../elements/select-control/SelectControl';
+import CardHeaderFilter from '../../elements/tables/elements/CardHeaderFilter';
+import StateNavLink from '../../../modules/state_router/StateNavLink';
+import usePaginatorService from '../../../modules/paginator/services/usePaginatorService';
+import useTranslate from '../../../hooks/useTranslate';
+import LoaderTableCard from '../../elements/loader-table-card/LoaderTableCard';
+import TableTopScroller from '../../elements/tables/TableTopScroller';
+import useConfigurableTable from '../vouchers/hooks/useConfigurableTable';
+import useFilterNext from '../../../modules/filter_next/useFilterNext';
+import TableRowActions from '../../elements/tables/TableRowActions';
+import SelectControlOptionsFund from '../../elements/select-control/templates/SelectControlOptionsFund';
+import usePushApiError from '../../../hooks/usePushApiError';
+import { NumberParam, StringParam } from 'use-query-params';
+import useIdentityExporter from '../../../services/exporters/useIdentityExporter';
+import { hasPermission } from '../../../helpers/utils';
+import { Permission } from '../../../props/models/Organization';
+import Household from '../../../props/models/Sponsor/Household';
+import useHouseholdsService from '../../../services/HouseholdsService';
+import TableEmptyValue from '../../elements/table-empty-value/TableEmptyValue';
+import useEditHousehold from './hooks/useEditHousehold';
+import useDeleteHousehold from './hooks/useDeleteHousehold';
+import TableRowActionItem from '../../elements/tables/TableRowActionItem';
+
+export default function Households() {
+    const translate = useTranslate();
+    const setProgress = useSetProgress();
+    const pushApiError = usePushApiError();
+    const paginatorService = usePaginatorService();
+    const activeOrganization = useActiveOrganization();
+
+    const fundService = useFundService();
+    const identityExporter = useIdentityExporter();
+    const householdsService = useHouseholdsService();
+
+    const [loading, setLoading] = useState(false);
+
+    const [funds, setFunds] = useState<Array<Partial<Fund>>>(null);
+    const [households, setHouseholds] = useState<PaginationData<Household>>(null);
+
+    const [paginatorTransactionsKey] = useState('payouts');
+
+    const editHousehold = useEditHousehold(activeOrganization);
+    const deleteHousehold = useDeleteHousehold();
+
+    const [filterValues, filterValuesActive, filterUpdate, filter] = useFilterNext<{
+        q: string;
+        fund_id?: number;
+        per_page?: number;
+        order_by?: string;
+        order_dir?: string;
+    }>(
+        {
+            q: '',
+            fund_id: null,
+            order_by: 'created_at',
+            order_dir: 'desc',
+            per_page: paginatorService.getPerPage(paginatorTransactionsKey),
+        },
+        {
+            throttledValues: ['q'],
+            queryParams: {
+                q: StringParam,
+                fund_id: NumberParam,
+                per_page: NumberParam,
+                order_by: StringParam,
+                order_dir: StringParam,
+            },
+        },
+    );
+
+    const { headElement, configsElement } = useConfigurableTable(householdsService.getColumns(), {
+        filter: filter,
+        sortable: true,
+        hasTooltips: true,
+    });
+
+    const { resetFilters: resetFilters, setShow } = filter;
+
+    const exportHouseholds = useCallback(() => {
+        setShow(false);
+
+        identityExporter.exportData(activeOrganization.id, {
+            ...filter.activeValues,
+            per_page: null,
+        });
+    }, [activeOrganization.id, filter.activeValues, setShow, identityExporter]);
+
+    const fetchFunds = useCallback(() => {
+        setProgress(0);
+
+        fundService
+            .list(activeOrganization.id)
+            .then((res) => setFunds([{ id: null, name: 'Selecteer fonds' }, ...res.data.data]))
+            .catch(pushApiError)
+            .finally(() => setProgress(100));
+    }, [activeOrganization.id, fundService, setProgress, pushApiError]);
+
+    const fetchHouseholds = useCallback(() => {
+        setLoading(true);
+        setProgress(0);
+
+        householdsService
+            .list(activeOrganization.id, filterValuesActive)
+            .then((res) => setHouseholds(res.data))
+            .catch(pushApiError)
+            .finally(() => {
+                setLoading(false);
+                setProgress(100);
+            });
+    }, [activeOrganization.id, setProgress, householdsService, pushApiError, filterValuesActive]);
+
+    useEffect(() => {
+        fetchHouseholds();
+    }, [fetchHouseholds]);
+
+    useEffect(() => {
+        fetchFunds();
+    }, [fetchFunds]);
+
+    if (!households || !funds) {
+        return <LoadingCard />;
+    }
+
+    return (
+        <div className="card" data-dusk="tableProfilesContent">
+            <div className="card-header">
+                <div className="card-title flex flex-grow">
+                    {translate('households.header.title')} ({households.meta.total})
+                </div>
+                <div className={'card-header-filters'}>
+                    <div className="block block-inline-filters">
+                        {activeOrganization?.allow_profiles_create &&
+                            hasPermission(activeOrganization, Permission.MANAGE_IDENTITIES) && (
+                                <button
+                                    type="button"
+                                    className="button button-primary button-sm"
+                                    onClick={() => editHousehold(null, fetchHouseholds)}
+                                    data-dusk="uploadTransactionsBatchButton">
+                                    <em className="mdi mdi-plus-circle" />
+                                    Aanmaken
+                                </button>
+                            )}
+
+                        <div className="form">
+                            <div className="form-group">
+                                <SelectControl
+                                    className="form-control inline-filter-control"
+                                    propKey={'id'}
+                                    options={funds}
+                                    value={filter.activeValues.fund_id}
+                                    placeholder={translate('vouchers.labels.fund')}
+                                    allowSearch={false}
+                                    onChange={(fund_id: number) => filter.update({ fund_id })}
+                                    optionsComponent={SelectControlOptionsFund}
+                                />
+                            </div>
+                        </div>
+
+                        {filter.show && (
+                            <div className="button button-text" onClick={() => resetFilters()}>
+                                <em className="mdi mdi-close icon-start" />
+                                Wis filters
+                            </div>
+                        )}
+
+                        {!filter.show && (
+                            <div className="form">
+                                <div className="form-group">
+                                    <input
+                                        className="form-control"
+                                        data-dusk="tableProfilesSearch"
+                                        value={filterValues.q}
+                                        onChange={(e) => filterUpdate({ q: e.target.value })}
+                                        placeholder={translate('payouts.labels.search')}
+                                    />
+                                </div>
+                            </div>
+                        )}
+
+                        <CardHeaderFilter filter={filter}>
+                            <FilterItemToggle label={translate('payouts.labels.search')} show={true}>
+                                <input
+                                    className="form-control"
+                                    value={filterValues.q}
+                                    onChange={(e) => filterUpdate({ q: e.target.value })}
+                                    placeholder={translate('payouts.labels.search')}
+                                />
+                            </FilterItemToggle>
+
+                            <div className="form-actions">
+                                <button
+                                    className="button button-primary button-wide"
+                                    onClick={exportHouseholds}
+                                    data-dusk="export"
+                                    disabled={households.meta.total == 0}>
+                                    <em className="mdi mdi-download icon-start" />
+                                    {translate('components.dropdown.export', { total: households.meta.total })}
+                                </button>
+                            </div>
+                        </CardHeaderFilter>
+                    </div>
+                </div>
+            </div>
+
+            <LoaderTableCard
+                loading={loading}
+                empty={households.meta.total == 0}
+                emptyTitle={'Geen huishoudens gevonden'}>
+                <div className="card-section">
+                    <div className="card-block card-block-table">
+                        {configsElement}
+
+                        <TableTopScroller>
+                            <table className="table">
+                                {headElement}
+
+                                <tbody>
+                                    {households.data.map((household) => (
+                                        <StateNavLink
+                                            key={household.id}
+                                            name={'households-show'}
+                                            dataDusk={`tableProfilesRow${household.id}`}
+                                            params={{
+                                                organizationId: activeOrganization.id,
+                                                id: household.id,
+                                            }}
+                                            className={'tr-clickable'}
+                                            customElement={'tr'}>
+                                            <td>{household.uid ?? <TableEmptyValue />}</td>
+
+                                            <td>{household.count_people ?? <TableEmptyValue />}</td>
+                                            <td>{household.count_minors ?? <TableEmptyValue />}</td>
+                                            <td>{household.count_adults ?? <TableEmptyValue />}</td>
+                                            <td>{household.city || <TableEmptyValue />}</td>
+                                            <td>{household.postal_code || <TableEmptyValue />}</td>
+                                            <td>
+                                                {[household.house_nr, household.house_nr_addition]
+                                                    .filter((item) => item)
+                                                    .join(' ') || <TableEmptyValue />}
+                                            </td>
+                                            <td>{household.neighborhood_name || <TableEmptyValue />}</td>
+                                            <td>{household.municipality_name || <TableEmptyValue />}</td>
+
+                                            <td className={'table-td-actions'}>
+                                                <TableRowActions
+                                                    content={(e) => (
+                                                        <div className="dropdown dropdown-actions">
+                                                            <TableRowActionItem
+                                                                type="link"
+                                                                name={'households-show'}
+                                                                params={{
+                                                                    organizationId: activeOrganization.id,
+                                                                    id: household.id,
+                                                                }}>
+                                                                <em className="mdi mdi-eye icon-start" /> Bekijken
+                                                            </TableRowActionItem>
+                                                            <TableRowActionItem
+                                                                type="button"
+                                                                onClick={() => {
+                                                                    e?.close();
+                                                                    editHousehold(household, fetchHouseholds);
+                                                                }}>
+                                                                <em className="mdi mdi-pencil icon-start" /> Bewerking
+                                                            </TableRowActionItem>
+                                                            <TableRowActionItem
+                                                                type="button"
+                                                                disable={!household?.removable}
+                                                                onClick={() => {
+                                                                    e?.close();
+                                                                    deleteHousehold(household, fetchHouseholds);
+                                                                }}>
+                                                                <em className="mdi mdi-close icon-start" /> Verwijderen
+                                                            </TableRowActionItem>
+                                                        </div>
+                                                    )}
+                                                />
+                                            </td>
+                                        </StateNavLink>
+                                    ))}
+                                </tbody>
+                            </table>
+                        </TableTopScroller>
+                    </div>
+                </div>
+
+                {households.meta.total > 0 && (
+                    <div className="card-section">
+                        <Paginator
+                            meta={households.meta}
+                            filters={filterValues}
+                            updateFilters={filterUpdate}
+                            perPageKey={paginatorTransactionsKey}
+                        />
+                    </div>
+                )}
+            </LoaderTableCard>
+        </div>
+    );
+}
diff --git a/react/src/dashboard/components/pages/households/HouseholdsShow.tsx b/react/src/dashboard/components/pages/households/HouseholdsShow.tsx
new file mode 100644
index 000000000..e0187080c
--- /dev/null
+++ b/react/src/dashboard/components/pages/households/HouseholdsShow.tsx
@@ -0,0 +1,114 @@
+import React, { Fragment, useCallback, useEffect, useState } from 'react';
+import useSetProgress from '../../../hooks/useSetProgress';
+import useActiveOrganization from '../../../hooks/useActiveOrganization';
+import { useParams } from 'react-router';
+import StateNavLink from '../../../modules/state_router/StateNavLink';
+import LoadingCard from '../../elements/loading-card/LoadingCard';
+import Card from '../../elements/card/Card';
+import CardBlockKeyValue from '../../elements/card/blocks/CardBlockKeyValue';
+import { hasPermission } from '../../../helpers/utils';
+import { Permission } from '../../../props/models/Organization';
+import Household from '../../../props/models/Sponsor/Household';
+import useHouseholdsService from '../../../services/HouseholdsService';
+import usePushApiError from '../../../hooks/usePushApiError';
+import FormPane from '../../elements/forms/elements/FormPane';
+import useEditHousehold from './hooks/useEditHousehold';
+import HouseholdIdentitiesCard from './elements/HouseholdIdentitiesCard';
+
+export default function HouseholdsShow() {
+    const setProgress = useSetProgress();
+    const pushApiError = usePushApiError();
+    const activeOrganization = useActiveOrganization();
+
+    const householdsService = useHouseholdsService();
+
+    const householdId = parseInt(useParams().id);
+    const [household, setHousehold] = useState<Household>(null);
+
+    const editHousehold = useEditHousehold(activeOrganization);
+
+    const fetchHousehold = useCallback(() => {
+        setProgress(0);
+
+        householdsService
+            .read(activeOrganization.id, householdId)
+            .then((res) => setHousehold(res.data.data))
+            .catch(pushApiError)
+            .finally(() => setProgress(100));
+    }, [activeOrganization.id, householdId, setProgress, householdsService, pushApiError]);
+
+    useEffect(() => {
+        fetchHousehold();
+    }, [fetchHousehold]);
+
+    if (!household) {
+        return <LoadingCard />;
+    }
+
+    return (
+        <Fragment>
+            <div className="block block-breadcrumbs">
+                <StateNavLink
+                    className="breadcrumb-item"
+                    name="households"
+                    activeExact={true}
+                    params={{ organizationId: activeOrganization.id }}>
+                    Huishoudens
+                </StateNavLink>
+
+                <div className="breadcrumb-item active">#{household?.id}</div>
+            </div>
+
+            <Card
+                title={'Household'}
+                buttons={[
+                    hasPermission(activeOrganization, Permission.MANAGE_IDENTITIES) && {
+                        text: 'Bewerken',
+                        icon: 'pencil-outline',
+                        onClick: () => editHousehold(household, fetchHousehold, 'members'),
+                    },
+                ]}
+                className={'form'}>
+                <FormPane title={'Household'}>
+                    <CardBlockKeyValue
+                        size={'md'}
+                        items={[
+                            { label: 'Household ID', value: household?.uid },
+                            { label: 'Number of Members', value: household.count_people },
+                            { label: 'Number of Underaged children', value: household.count_minors },
+                            { label: 'Number of Adults', value: household.count_adults },
+                        ]}
+                    />
+                </FormPane>
+            </Card>
+
+            <Card
+                title={'Adresgegevens'}
+                buttons={[
+                    hasPermission(activeOrganization, Permission.MANAGE_IDENTITIES) && {
+                        text: 'Bewerken',
+                        icon: 'pencil-outline',
+                        onClick: () => editHousehold(household, fetchHousehold, 'address'),
+                    },
+                ]}
+                className={'form'}>
+                <FormPane title={'Adresgegevens'}>
+                    <CardBlockKeyValue
+                        size={'md'}
+                        items={[
+                            { label: 'Woonplaats', value: household?.city },
+                            { label: 'Straatnaam', value: household?.street },
+                            { label: 'Huisnummer', value: household?.house_nr },
+                            { label: 'Huisnummer toevoeging', value: household?.house_nr_addition },
+                            { label: 'Postcode', value: household?.postal_code },
+                            { label: 'Woonwijk', value: household?.neighborhood_name },
+                            { label: 'Gemeentenaam', value: household?.municipality_name },
+                        ]}
+                    />
+                </FormPane>
+            </Card>
+
+            <HouseholdIdentitiesCard household={household} />
+        </Fragment>
+    );
+}
diff --git a/react/src/dashboard/components/pages/households/elements/HouseholdIdentitiesCard.tsx b/react/src/dashboard/components/pages/households/elements/HouseholdIdentitiesCard.tsx
new file mode 100644
index 000000000..4934edd5b
--- /dev/null
+++ b/react/src/dashboard/components/pages/households/elements/HouseholdIdentitiesCard.tsx
@@ -0,0 +1,226 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import useActiveOrganization from '../../../../hooks/useActiveOrganization';
+import useSetProgress from '../../../../hooks/useSetProgress';
+import Paginator from '../../../../modules/paginator/components/Paginator';
+import LoadingCard from '../../../elements/loading-card/LoadingCard';
+import FilterItemToggle from '../../../elements/tables/elements/FilterItemToggle';
+import CardHeaderFilter from '../../../elements/tables/elements/CardHeaderFilter';
+import StateNavLink from '../../../../modules/state_router/StateNavLink';
+import LoaderTableCard from '../../../elements/loader-table-card/LoaderTableCard';
+import TableTopScroller from '../../../elements/tables/TableTopScroller';
+import useConfigurableTable from '../../vouchers/hooks/useConfigurableTable';
+import usePushApiError from '../../../../hooks/usePushApiError';
+import useSponsorIdentitiesService from '../../../../services/SponsorIdentitesService';
+import TableRowActions from '../../../elements/tables/TableRowActions';
+import TableRowActionItem from '../../../elements/tables/TableRowActionItem';
+import IdentitiesTableRowItems from '../../identities/elements/IdentitiesTableRowItems';
+import Household from '../../../../props/models/Sponsor/Household';
+import useHouseholdAddIdentity from '../hooks/useHouseholdAddIdentity';
+import useHouseholdDeleteIdentity from '../hooks/useHouseholdDeleteIdentity';
+import { hasPermission } from '../../../../helpers/utils';
+import { Permission } from '../../../../props/models/Organization';
+import { PaginationData } from '../../../../props/ApiResponses';
+import usePaginatorService from '../../../../modules/paginator/services/usePaginatorService';
+import useFilterNext from '../../../../modules/filter_next/useFilterNext';
+import useHouseholdProfilesService from '../../../../services/HouseholdProfilesService';
+import HouseholdProfile from '../../../../props/models/Sponsor/HouseholdProfile';
+
+export default function HouseholdIdentitiesCard({ household }: { household: Household }) {
+    const setProgress = useSetProgress();
+    const pushApiError = usePushApiError();
+    const activeOrganization = useActiveOrganization();
+
+    const sponsorIdentitiesService = useSponsorIdentitiesService();
+    const householdProfilesService = useHouseholdProfilesService();
+
+    const householdAddIdentity = useHouseholdAddIdentity(activeOrganization);
+    const householdDeleteIdentity = useHouseholdDeleteIdentity(activeOrganization);
+
+    const [loading, setLoading] = useState(false);
+    const [paginatorKey] = useState('identities');
+
+    const [householdMembers, setHouseholdMembers] = useState<PaginationData<HouseholdProfile>>(null);
+
+    const paginatorService = usePaginatorService();
+
+    const [filterValues, filterValuesActive, filterUpdate, filter] = useFilterNext<{
+        q: string;
+        page?: number;
+        per_page?: number;
+        order_by?: string;
+        order_dir?: string;
+    }>({
+        q: '',
+        page: 1,
+        order_by: 'created_at',
+        order_dir: 'desc',
+        per_page: paginatorService.getPerPage(paginatorKey),
+    });
+
+    const fetchHouseholdMembers = useCallback(() => {
+        setLoading(true);
+        setProgress(0);
+
+        householdProfilesService
+            .list(household?.organization_id, household?.id, filterValuesActive)
+            .then((res) => setHouseholdMembers(res.data))
+            .catch(pushApiError)
+            .finally(() => {
+                setProgress(100);
+                setLoading(false);
+            });
+    }, [
+        setProgress,
+        householdProfilesService,
+        household?.organization_id,
+        household?.id,
+        filterValuesActive,
+        pushApiError,
+    ]);
+
+    const { headElement, configsElement } = useConfigurableTable(
+        sponsorIdentitiesService.getColumns(activeOrganization),
+        { filter: filter, sortable: false, hasTooltips: true },
+    );
+
+    useEffect(() => {
+        fetchHouseholdMembers();
+    }, [fetchHouseholdMembers]);
+
+    if (!householdMembers) {
+        return <LoadingCard />;
+    }
+
+    return (
+        <div className="card">
+            <div className="card-header">
+                <div className="card-title flex flex-grow">
+                    {`Household members (${householdMembers?.meta?.total || 0})`}
+                </div>
+
+                <div className={'card-header-filters'}>
+                    <div className="block block-inline-filters">
+                        {hasPermission(activeOrganization, Permission.MANAGE_IDENTITIES) && (
+                            <button
+                                type="button"
+                                className="button button-primary button-sm"
+                                onClick={() => householdAddIdentity(household, fetchHouseholdMembers)}>
+                                <em className="mdi mdi-plus-circle" />
+                                Aanmaken
+                            </button>
+                        )}
+
+                        {filter.show && (
+                            <div className="button button-text" onClick={() => filter.resetFilters()}>
+                                <em className="mdi mdi-close icon-start" />
+                                Wis filters
+                            </div>
+                        )}
+
+                        {!filter.show && (
+                            <div className="form">
+                                <div className="form-group">
+                                    <input
+                                        className="form-control"
+                                        value={filterValues.q}
+                                        onChange={(e) => filterUpdate({ q: e.target.value })}
+                                        placeholder={'Zoek'}
+                                    />
+                                </div>
+                            </div>
+                        )}
+
+                        <CardHeaderFilter filter={filter}>
+                            <FilterItemToggle label={'Zoek'} show={true}>
+                                <input
+                                    className="form-control"
+                                    value={filterValues.q}
+                                    onChange={(e) => filterUpdate({ q: e.target.value })}
+                                    placeholder={'Zoek'}
+                                />
+                            </FilterItemToggle>
+                        </CardHeaderFilter>
+                    </div>
+                </div>
+            </div>
+
+            <LoaderTableCard
+                loading={loading}
+                empty={householdMembers.meta.total == 0}
+                emptyTitle={'Geen personen gevonden'}>
+                <div className="card-section">
+                    <div className="card-block card-block-table">
+                        {configsElement}
+
+                        <TableTopScroller>
+                            <table className="table">
+                                {headElement}
+
+                                <tbody>
+                                    {householdMembers.data.map((member) => (
+                                        <StateNavLink
+                                            key={member?.identity.id}
+                                            name={'identities-show'}
+                                            dataDusk={`tableProfilesRow${member?.identity.id}`}
+                                            params={{
+                                                organizationId: activeOrganization.id,
+                                                id: member?.identity.id,
+                                            }}
+                                            className={'tr-clickable'}
+                                            customElement={'tr'}>
+                                            <IdentitiesTableRowItems
+                                                actions={
+                                                    <TableRowActions
+                                                        content={(e) => (
+                                                            <div className="dropdown dropdown-actions">
+                                                                <TableRowActionItem
+                                                                    type={'link'}
+                                                                    name={'identities-show'}
+                                                                    params={{
+                                                                        organizationId: activeOrganization.id,
+                                                                        id: member?.identity.id,
+                                                                    }}>
+                                                                    <em className="mdi mdi-eye-outline icon-start" />
+                                                                    Bekijken
+                                                                </TableRowActionItem>
+                                                                <TableRowActionItem
+                                                                    type={'button'}
+                                                                    onClick={() => {
+                                                                        e?.close();
+                                                                        householdDeleteIdentity(
+                                                                            member,
+                                                                            fetchHouseholdMembers,
+                                                                        );
+                                                                    }}>
+                                                                    <em className="mdi mdi-close icon-start" />
+                                                                    Verwijderen
+                                                                </TableRowActionItem>
+                                                            </div>
+                                                        )}
+                                                    />
+                                                }
+                                                identity={member?.identity}
+                                                organization={activeOrganization}
+                                            />
+                                        </StateNavLink>
+                                    ))}
+                                </tbody>
+                            </table>
+                        </TableTopScroller>
+                    </div>
+                </div>
+
+                {householdMembers.meta.total > 0 && (
+                    <div className="card-section">
+                        <Paginator
+                            meta={householdMembers.meta}
+                            filters={filterValues}
+                            updateFilters={filterUpdate}
+                            perPageKey={paginatorKey}
+                        />
+                    </div>
+                )}
+            </LoaderTableCard>
+        </div>
+    );
+}
diff --git a/react/src/dashboard/components/pages/households/hooks/useDeleteHousehold.tsx b/react/src/dashboard/components/pages/households/hooks/useDeleteHousehold.tsx
new file mode 100644
index 000000000..32451baff
--- /dev/null
+++ b/react/src/dashboard/components/pages/households/hooks/useDeleteHousehold.tsx
@@ -0,0 +1,50 @@
+import React, { useCallback } from 'react';
+import useOpenModal from '../../../../hooks/useOpenModal';
+import ModalDangerZone from '../../../modals/ModalDangerZone';
+import useHouseholdsService from '../../../../services/HouseholdsService';
+import Household from '../../../../props/models/Sponsor/Household';
+import useSetProgress from '../../../../hooks/useSetProgress';
+import usePushApiError from '../../../../hooks/usePushApiError';
+
+export default function useDeleteHousehold() {
+    const openModal = useOpenModal();
+    const setProgress = useSetProgress();
+    const pushApiError = usePushApiError();
+    const householdService = useHouseholdsService();
+
+    return useCallback(
+        (household: Household, onDelete?: () => void) => {
+            openModal((modal) => (
+                <ModalDangerZone
+                    modal={modal}
+                    title={'Delete'}
+                    description={'Are you sure you want to delete this household?'}
+                    buttonCancel={{
+                        text: 'Cancel',
+                        onClick: () => {
+                            modal.close();
+                        },
+                    }}
+                    buttonSubmit={{
+                        text: 'Delete',
+                        onClick: () => {
+                            modal.close();
+                            setProgress(0);
+
+                            householdService
+                                .delete(household.organization_id, household.id)
+                                .then(() => {
+                                    onDelete?.();
+                                })
+                                .catch(pushApiError)
+                                .finally(() => {
+                                    setProgress(100);
+                                });
+                        },
+                    }}
+                />
+            ));
+        },
+        [openModal, householdService, setProgress, pushApiError],
+    );
+}
diff --git a/react/src/dashboard/components/pages/households/hooks/useEditHousehold.tsx b/react/src/dashboard/components/pages/households/hooks/useEditHousehold.tsx
new file mode 100644
index 000000000..efb355a6f
--- /dev/null
+++ b/react/src/dashboard/components/pages/households/hooks/useEditHousehold.tsx
@@ -0,0 +1,24 @@
+import React, { useCallback } from 'react';
+import ModalEditHousehold from '../modals/ModalEditHousehold';
+import useOpenModal from '../../../../hooks/useOpenModal';
+import Organization from '../../../../props/models/Organization';
+import Household from '../../../../props/models/Sponsor/Household';
+
+export default function useEditHousehold(organization: Organization) {
+    const openModal = useOpenModal();
+
+    return useCallback(
+        (household: Household = null, onChange: () => void = () => {}, controls?: 'members' | 'address') => {
+            openModal((modal) => (
+                <ModalEditHousehold
+                    modal={modal}
+                    controls={controls}
+                    household={household}
+                    organization={organization}
+                    onChange={onChange}
+                />
+            ));
+        },
+        [openModal, organization],
+    );
+}
diff --git a/react/src/dashboard/components/pages/households/hooks/useHouseholdAddIdentity.tsx b/react/src/dashboard/components/pages/households/hooks/useHouseholdAddIdentity.tsx
new file mode 100644
index 000000000..35a64b70a
--- /dev/null
+++ b/react/src/dashboard/components/pages/households/hooks/useHouseholdAddIdentity.tsx
@@ -0,0 +1,56 @@
+import React, { useCallback } from 'react';
+import useOpenModal from '../../../../hooks/useOpenModal';
+import Organization from '../../../../props/models/Organization';
+import Household from '../../../../props/models/Sponsor/Household';
+import ModalSelectOrMakeSponsorIdentity from '../modals/ModalSelectOrMakeSponsorIdentity';
+import usePushSuccess from '../../../../hooks/usePushSuccess';
+import useHouseholdProfilesService from '../../../../services/HouseholdProfilesService';
+import usePushApiError from '../../../../hooks/usePushApiError';
+import useSetProgress from '../../../../hooks/useSetProgress';
+
+export default function useHouseholdAddIdentity(organization: Organization) {
+    const openModal = useOpenModal();
+    const setProgress = useSetProgress();
+    const pushSuccess = usePushSuccess();
+    const pushApiError = usePushApiError();
+
+    const householdProfilesService = useHouseholdProfilesService();
+
+    const addMember = useCallback(
+        (organizationId: number, householdId: number, identityId: number) => {
+            return householdProfilesService.store(organizationId, householdId, { identity_id: identityId });
+        },
+        [householdProfilesService],
+    );
+
+    return useCallback(
+        (household: Household, onChange: () => void) => {
+            openModal((modal) => (
+                <ModalSelectOrMakeSponsorIdentity
+                    modal={modal}
+                    onDone={(identities) => {
+                        modal.close();
+
+                        const profilesPromise = identities
+                            .map((identity) => identity.id)
+                            .map((id) => addMember(organization?.id, household?.id, id));
+
+                        setProgress(0);
+
+                        Promise.all(profilesPromise)
+                            .then(() => {
+                                onChange?.();
+                                pushSuccess('Gelukt!', 'Person succesvol toegevoegd.');
+                            })
+                            .catch(pushApiError)
+                            .finally(() => setProgress(100));
+                    }}
+                    organization={organization}
+                    excludeHousehold={household}
+                    multiselect={true}
+                />
+            ));
+        },
+        [addMember, openModal, organization, pushApiError, pushSuccess, setProgress],
+    );
+}
diff --git a/react/src/dashboard/components/pages/households/hooks/useHouseholdDeleteIdentity.tsx b/react/src/dashboard/components/pages/households/hooks/useHouseholdDeleteIdentity.tsx
new file mode 100644
index 000000000..2be792dab
--- /dev/null
+++ b/react/src/dashboard/components/pages/households/hooks/useHouseholdDeleteIdentity.tsx
@@ -0,0 +1,46 @@
+import React, { useCallback } from 'react';
+import useOpenModal from '../../../../hooks/useOpenModal';
+import ModalDangerZone from '../../../modals/ModalDangerZone';
+import useSetProgress from '../../../../hooks/useSetProgress';
+import usePushApiError from '../../../../hooks/usePushApiError';
+import Organization from '../../../../props/models/Organization';
+import useHouseholdProfilesService from '../../../../services/HouseholdProfilesService';
+import HouseholdProfile from '../../../../props/models/Sponsor/HouseholdProfile';
+
+export default function useHouseholdDeleteIdentity(organization: Organization) {
+    const openModal = useOpenModal();
+    const setProgress = useSetProgress();
+    const pushApiError = usePushApiError();
+
+    const householdProfilesService = useHouseholdProfilesService();
+
+    return useCallback(
+        (member: HouseholdProfile, onDelete?: () => void) => {
+            openModal((modal) => (
+                <ModalDangerZone
+                    modal={modal}
+                    title={'Delete household member'}
+                    description={'Are you sure you want to delete this member?'}
+                    buttonCancel={{
+                        text: 'Cancel',
+                        onClick: () => modal.close(),
+                    }}
+                    buttonSubmit={{
+                        text: 'Delete',
+                        onClick: () => {
+                            modal.close();
+                            setProgress(0);
+
+                            householdProfilesService
+                                .delete(organization.id, member.household_id, member?.id)
+                                .then(() => onDelete?.())
+                                .catch(pushApiError)
+                                .finally(() => setProgress(100));
+                        },
+                    }}
+                />
+            ));
+        },
+        [openModal, setProgress, householdProfilesService, organization.id, pushApiError],
+    );
+}
diff --git a/react/src/dashboard/components/pages/households/modals/ModalEditHousehold.tsx b/react/src/dashboard/components/pages/households/modals/ModalEditHousehold.tsx
new file mode 100644
index 000000000..c2fbca57a
--- /dev/null
+++ b/react/src/dashboard/components/pages/households/modals/ModalEditHousehold.tsx
@@ -0,0 +1,126 @@
+import React, { Fragment } from 'react';
+import { ModalState } from '../../../../modules/modals/context/ModalContext';
+import useFormBuilder from '../../../../hooks/useFormBuilder';
+import { ResponseError } from '../../../../props/ApiResponses';
+import useSetProgress from '../../../../hooks/useSetProgress';
+import usePushApiError from '../../../../hooks/usePushApiError';
+import Organization from '../../../../props/models/Organization';
+import useHouseholdsService from '../../../../services/HouseholdsService';
+import Household from '../../../../props/models/Sponsor/Household';
+import Modal from '../../../modals/elements/Modal';
+import HouseholdMembers from './elements/HouseholdMembers';
+import HouseholdAddress from './elements/HouseholdAddress';
+
+export default function ModalEditHousehold({
+    modal,
+    className,
+    onChange,
+    household,
+    controls,
+    organization,
+}: {
+    modal: ModalState;
+    household?: Household;
+    controls?: 'members' | 'address';
+    className?: string;
+    onChange?: (household: Household) => void;
+    organization?: Organization;
+}) {
+    const setProgress = useSetProgress();
+    const pushApiError = usePushApiError();
+    const householdsService = useHouseholdsService();
+
+    const form = useFormBuilder<{
+        uid?: string;
+        count_people?: number;
+        count_minors?: number;
+        count_adults?: number;
+        city: string;
+        street: string;
+        house_nr: string;
+        house_nr_addition: string;
+        postal_code: string;
+        neighborhood_name: string;
+        municipality_name: string;
+    }>(
+        {
+            uid: household?.uid ?? '',
+            count_people: household?.count_people ?? null,
+            count_minors: household?.count_minors ?? null,
+            count_adults: household?.count_adults ?? null,
+            city: household?.city ?? '',
+            street: household?.street ?? '',
+            house_nr: household?.house_nr ?? '',
+            house_nr_addition: household?.house_nr_addition ?? '',
+            postal_code: household?.postal_code ?? '',
+            neighborhood_name: household?.neighborhood_name ?? '',
+            municipality_name: household?.municipality_name ?? '',
+        },
+        (values) => {
+            setProgress(0);
+
+            const data = {
+                ...(!controls || controls === 'members'
+                    ? {
+                          uid: values.uid,
+                          count_people: values.count_people,
+                          count_minors: values.count_minors,
+                          count_adults: values.count_adults,
+                      }
+                    : {}),
+                ...(!controls || controls === 'address'
+                    ? {
+                          city: values.city,
+                          street: values.street,
+                          house_nr: values.house_nr,
+                          house_nr_addition: values.house_nr_addition,
+                          postal_code: values.postal_code,
+                          neighborhood_name: values.neighborhood_name,
+                          municipality_name: values.municipality_name,
+                      }
+                    : {}),
+            };
+
+            const promise = household
+                ? householdsService?.update(household?.organization_id, household?.id, data)
+                : householdsService?.store(organization?.id, data);
+
+            promise
+                .then((res) => {
+                    onChange?.(res.data.data);
+                    modal.close();
+                })
+                .catch((err: ResponseError) => {
+                    form.setErrors(err.data.errors);
+                    form.setIsLocked(false);
+                    pushApiError(err);
+                })
+                .finally(() => setProgress(100));
+        },
+    );
+
+    return (
+        <Modal
+            title="Add new household"
+            className={className}
+            dusk="modalHouseholds"
+            onSubmit={form.submit}
+            modal={modal}
+            footer={
+                <Fragment>
+                    <button type="button" className="button button-default" onClick={modal.close}>
+                        Sluiten
+                    </button>
+
+                    <button type="submit" className="button button-primary">
+                        Bevestigen
+                    </button>
+                </Fragment>
+            }>
+            <div className="flex flex-gap flex-vertical">
+                {(!controls || controls === 'members') && <HouseholdMembers form={form} />}
+                {(!controls || controls === 'address') && <HouseholdAddress form={form} />}
+            </div>
+        </Modal>
+    );
+}
diff --git a/react/src/dashboard/components/pages/households/modals/ModalSelectOrMakeSponsorIdentity.tsx b/react/src/dashboard/components/pages/households/modals/ModalSelectOrMakeSponsorIdentity.tsx
new file mode 100644
index 000000000..d22eda190
--- /dev/null
+++ b/react/src/dashboard/components/pages/households/modals/ModalSelectOrMakeSponsorIdentity.tsx
@@ -0,0 +1,276 @@
+import React, { Fragment, useCallback, useEffect, useState } from 'react';
+import { ModalState } from '../../../../modules/modals/context/ModalContext';
+import useFormBuilder from '../../../../hooks/useFormBuilder';
+import { PaginationData, ResponseError } from '../../../../props/ApiResponses';
+import useSetProgress from '../../../../hooks/useSetProgress';
+import usePushApiError from '../../../../hooks/usePushApiError';
+import Organization from '../../../../props/models/Organization';
+import FormPane from '../../../elements/forms/elements/FormPane';
+import FormGroup from '../../../elements/forms/elements/FormGroup';
+import Modal from '../../../modals/elements/Modal';
+import useProfileRecordTypes from '../../identitities-show/hooks/useProfileRecordTypes';
+import SponsorIdentity, { ProfileRecordType } from '../../../../props/models/Sponsor/SponsorIdentity';
+import useSponsorIdentitiesService from '../../../../services/SponsorIdentitesService';
+import useFilterNext from '../../../../modules/filter_next/useFilterNext';
+import TableTopScroller from '../../../elements/tables/TableTopScroller';
+import useConfigurableTable from '../../vouchers/hooks/useConfigurableTable';
+import TableCheckboxControl from '../../../elements/tables/elements/TableCheckboxControl';
+import useTableToggles from '../../../../hooks/useTableToggles';
+import classNames from 'classnames';
+import IdentitiesTableRowItems from '../../identities/elements/IdentitiesTableRowItems';
+import Paginator from '../../../../modules/paginator/components/Paginator';
+import ProfileRecordsPersonal from '../../identitities-show/modals/elements/ProfileRecordsPersonal';
+import Household from '../../../../props/models/Sponsor/Household';
+
+export default function ModalSelectOrMakeSponsorIdentity({
+    modal,
+    onDone,
+    className,
+    organization,
+    excludeRelation = null,
+    excludeHousehold = null,
+    multiselect = false,
+}: {
+    modal: ModalState;
+    onDone?: (identities: SponsorIdentity[]) => void;
+    className?: string;
+    organization: Organization;
+    excludeRelation?: SponsorIdentity;
+    excludeHousehold?: Household;
+    multiselect?: boolean;
+}) {
+    const setProgress = useSetProgress();
+    const pushApiError = usePushApiError();
+    const sponsorIdentitiesService = useSponsorIdentitiesService();
+
+    const [action, setAction] = useState<'find' | 'create'>('find');
+    const [identities, setIdentities] = useState<PaginationData<SponsorIdentity>>(null);
+    const { selected, setSelected, toggleAll, toggle } = useTableToggles(multiselect);
+    const { recordTypesByKey } = useProfileRecordTypes();
+
+    const form = useFormBuilder<Partial<{ [key in ProfileRecordType]: string }>>(
+        {
+            family_name: '',
+            given_name: '',
+            birth_date: '',
+            gender: '',
+            marital_status: '',
+            client_number: '',
+        },
+        (values) => {
+            if (action === 'create') {
+                setProgress(0);
+
+                sponsorIdentitiesService
+                    .store(organization?.id, values)
+                    .then((res) => {
+                        setProgress(0);
+                        onDone?.([res?.data?.data]);
+                    })
+                    .catch((res: ResponseError) => {
+                        form.setErrors(res.data.errors);
+                        pushApiError(res);
+                    })
+                    .finally(() => {
+                        setProgress(100);
+                        form.setIsLocked(false);
+                    });
+
+                return;
+            }
+
+            onDone(identities.data.filter((identity) => selected.includes(identity.id)));
+        },
+    );
+
+    const [filterValues, filterActiveValues, filterUpdate, filter] = useFilterNext<{
+        q: string;
+        per_page: number;
+        exclude_household_id?: number;
+    }>(
+        {
+            q: '',
+            per_page: 5,
+            exclude_id: excludeRelation?.id ?? null,
+            exclude_relation_id: excludeRelation?.id ?? null,
+            exclude_household_id: excludeHousehold?.id ?? null,
+        },
+        { throttledValues: ['q'] },
+    );
+
+    const fetchIdentities = useCallback(() => {
+        setSelected([]);
+        setProgress(0);
+
+        sponsorIdentitiesService
+            .list(organization.id, { ...filterActiveValues })
+            .then((res) => setIdentities(res.data))
+            .catch(pushApiError)
+            .finally(() => setProgress(100));
+    }, [setSelected, setProgress, sponsorIdentitiesService, organization.id, filterActiveValues, pushApiError]);
+
+    const { headElement } = useConfigurableTable(sponsorIdentitiesService.getColumns(organization), {
+        filter: filter,
+        sortable: false,
+        hasTooltips: false,
+        trPrepend: multiselect && (
+            <th className="th-narrow">
+                <TableCheckboxControl
+                    checked={selected.length == identities?.data?.length}
+                    onClick={(e) => toggleAll(e, identities?.data)}
+                />
+            </th>
+        ),
+    });
+
+    useEffect(() => {
+        if (action === 'find') {
+            fetchIdentities();
+        }
+    }, [action, fetchIdentities]);
+
+    return (
+        <Modal
+            title="Search persons"
+            className={className}
+            dusk="modalHouseholds"
+            size={'lg'}
+            onSubmit={form.submit}
+            modal={modal}
+            footer={
+                <div className={'button-group flex-space-between'}>
+                    <button type="button" className="button button-default" onClick={modal.close}>
+                        Sluiten
+                    </button>
+
+                    <button
+                        type="submit"
+                        className="button button-primary"
+                        disabled={(action === 'find' && selected?.length == 0) || form.isLocked}>
+                        Bevestigen
+                    </button>
+                </div>
+            }
+            body={
+                <div className={'modal-body'}>
+                    <div className="modal-section">
+                        <div className="flex flex-gap flex-vertical">
+                            <FormPane title={'Find or Create person'}>
+                                <div className="block block-export-options">
+                                    <div className="export-section">
+                                        <div className="export-options">
+                                            {[
+                                                { label: 'Find a person', value: 'find' },
+                                                { label: 'Add new person', value: 'create' },
+                                            ].map((field, index) => (
+                                                <label
+                                                    key={index}
+                                                    className="export-option"
+                                                    htmlFor={`radio_action_${index}`}>
+                                                    <input
+                                                        type="radio"
+                                                        id={`radio_action_${index}`}
+                                                        checked={field.value === action}
+                                                        value={field.value}
+                                                        onChange={(e) => {
+                                                            setAction(e.target.value as 'find' | 'create');
+                                                        }}
+                                                    />
+                                                    <div className="export-option-label">
+                                                        {field.value === 'find' && (
+                                                            <em className="export-option-icon mdi mdi-magnify" />
+                                                        )}
+                                                        {field.value === 'create' && (
+                                                            <em className="export-option-icon mdi mdi-plus-circle" />
+                                                        )}
+                                                        <span>{field.label}</span>
+                                                        <div className="export-option-circle" />
+                                                    </div>
+                                                </label>
+                                            ))}
+                                        </div>
+                                    </div>
+                                </div>
+                            </FormPane>
+
+                            {action === 'find' ? (
+                                <FormPane title={'Search person'}>
+                                    <FormGroup
+                                        label={'Search'}
+                                        info={'Search for a person in the system.'}
+                                        input={(id) => (
+                                            <input
+                                                id={id}
+                                                type="text"
+                                                className={'form-control'}
+                                                placeholder={'Search'}
+                                                value={filterValues.q}
+                                                autoComplete={'off'}
+                                                onChange={(e) => filterUpdate({ q: e.target.value })}
+                                            />
+                                        )}
+                                    />
+                                </FormPane>
+                            ) : (
+                                <ProfileRecordsPersonal
+                                    form={form}
+                                    recordTypes={{
+                                        given_name: recordTypesByKey.given_name,
+                                        family_name: recordTypesByKey.family_name,
+                                        birth_date: recordTypesByKey.birth_date,
+                                        gender: recordTypesByKey.gender,
+                                        marital_status: recordTypesByKey.marital_status,
+                                        client_number: recordTypesByKey.client_number,
+                                    }}
+                                />
+                            )}
+                        </div>
+                    </div>
+
+                    {action === 'find' && identities && (
+                        <Fragment>
+                            <div className="modal-header modal-header-compact">
+                                <div className="modal-header-title">Matches ({identities?.meta?.total})</div>
+                            </div>
+                            <div className="modal-section modal-section-collapse modal-section-light">
+                                <div className="table-wrapper">
+                                    <TableTopScroller>
+                                        <table className="table">
+                                            {headElement}
+
+                                            <tbody>
+                                                {identities?.data.map((identity) => (
+                                                    <tr
+                                                        key={identity.id}
+                                                        className={classNames(
+                                                            'tr-collapsed',
+                                                            selected.includes(identity.id) && 'selected',
+                                                        )}>
+                                                        <td className="td-narrow">
+                                                            <TableCheckboxControl
+                                                                checked={selected.includes(identity.id)}
+                                                                onClick={(e) => toggle(e, identity)}
+                                                            />
+                                                        </td>
+                                                        <IdentitiesTableRowItems
+                                                            actions={false}
+                                                            identity={identity}
+                                                            organization={organization}
+                                                        />
+                                                    </tr>
+                                                ))}
+                                            </tbody>
+                                        </table>
+                                    </TableTopScroller>
+                                </div>
+                            </div>
+                            <div className="modal-section modal-section-compact">
+                                <Paginator meta={identities.meta} filters={filterValues} updateFilters={filterUpdate} />
+                            </div>
+                        </Fragment>
+                    )}
+                </div>
+            }
+        />
+    );
+}
diff --git a/react/src/dashboard/components/pages/households/modals/elements/HouseholdAddress.tsx b/react/src/dashboard/components/pages/households/modals/elements/HouseholdAddress.tsx
new file mode 100644
index 000000000..ff9ee7506
--- /dev/null
+++ b/react/src/dashboard/components/pages/households/modals/elements/HouseholdAddress.tsx
@@ -0,0 +1,57 @@
+import FormBuilder from '../../../../../types/FormBuilder';
+import React from 'react';
+import FormPane from '../../../../elements/forms/elements/FormPane';
+import ProfileRecordsField from '../../../identitities-show/modals/elements/ProfileRecordsField';
+
+export default function HouseholdAddress({
+    form,
+}: {
+    form: FormBuilder<
+        Partial<{
+            city: string;
+            street: string;
+            house_nr: string;
+            house_nr_addition: string;
+            postal_code: string;
+            neighborhood_name: string;
+            municipality_name: string;
+        }>
+    >;
+}) {
+    return (
+        <FormPane title={'Adresgegevens'}>
+            <div className="row">
+                <div className="col col-xs-12 col-sm-6">
+                    <ProfileRecordsField recordType={{ key: 'city', name: 'Woonplaats' }} form={form} />
+                </div>
+                <div className="col col-xs-12 col-sm-6">
+                    <ProfileRecordsField recordType={{ key: 'street', name: 'Straatnaam' }} form={form} />
+                </div>
+            </div>
+            <div className="row">
+                <div className="col col-xs-12 col-sm-6">
+                    <ProfileRecordsField recordType={{ key: 'house_nr', name: 'Huisnummer' }} form={form} />
+                </div>
+                <div className="col col-xs-12 col-sm-6">
+                    <ProfileRecordsField
+                        recordType={{ key: 'house_nr_addition', name: 'Huisnummer toevoeging' }}
+                        form={form}
+                    />
+                </div>
+            </div>
+            <div className="row">
+                <div className="col col-xs-12 col-sm-6">
+                    <ProfileRecordsField recordType={{ key: 'postal_code', name: 'Postcode' }} form={form} />
+                </div>
+                <div className="col col-xs-12 col-sm-6">
+                    <ProfileRecordsField recordType={{ key: 'neighborhood_name', name: 'Woonwijk' }} form={form} />
+                </div>
+            </div>
+            <div className="row">
+                <div className="col col-xs-12 col-sm-12">
+                    <ProfileRecordsField recordType={{ key: 'municipality_name', name: 'Gemeentenaam' }} form={form} />
+                </div>
+            </div>
+        </FormPane>
+    );
+}
diff --git a/react/src/dashboard/components/pages/households/modals/elements/HouseholdMembers.tsx b/react/src/dashboard/components/pages/households/modals/elements/HouseholdMembers.tsx
new file mode 100644
index 000000000..13dd623dc
--- /dev/null
+++ b/react/src/dashboard/components/pages/households/modals/elements/HouseholdMembers.tsx
@@ -0,0 +1,85 @@
+import FormBuilder from '../../../../../types/FormBuilder';
+import React from 'react';
+import FormPane from '../../../../elements/forms/elements/FormPane';
+import FormGroup from '../../../../elements/forms/elements/FormGroup';
+
+export default function HouseholdMembers({
+    form,
+}: {
+    form: FormBuilder<
+        Partial<{
+            count_people: number;
+            count_minors: number;
+            count_adults: number;
+            uid: string;
+        }>
+    >;
+}) {
+    return (
+        <FormPane title={'Residents'}>
+            <FormGroup
+                label={'Household ID'}
+                required={true}
+                info={'The household ID is used to identify the household in the system.'}
+                error={form.errors?.uid}
+                input={(id) => (
+                    <input
+                        id={id}
+                        type="text"
+                        className={'form-control'}
+                        placeholder={'Household ID'}
+                        value={form.values.uid ?? ''}
+                        onChange={(e) => form.update({ uid: e.target.value })}
+                    />
+                )}
+            />
+            <FormGroup
+                label={'Number of Members'}
+                error={form.errors?.count_people}
+                info={'The number of members in the household.'}
+                input={(id) => (
+                    <input
+                        id={id}
+                        type="number"
+                        className={'form-control'}
+                        placeholder={'Number of people'}
+                        value={form.values.count_people ?? ''}
+                        onChange={(e) => form.update({ count_people: parseInt(e.target.value) })}
+                    />
+                )}
+            />
+
+            <FormGroup
+                label={'Number of Minors'}
+                error={form.errors?.count_minors}
+                info={'The number of minors in the household.'}
+                input={(id) => (
+                    <input
+                        id={id}
+                        type="number"
+                        className={'form-control'}
+                        placeholder={'Number of minors'}
+                        value={form.values.count_minors ?? ''}
+                        onChange={(e) => form.update({ count_minors: parseInt(e.target.value) })}
+                    />
+                )}
+            />
+
+            <FormGroup
+                label={'Number of Adults'}
+                error={form.errors?.count_adults}
+                info={'The number of adults in the household.'}
+                input={(id) => (
+                    <input
+                        id={id}
+                        type="number"
+                        className={'form-control'}
+                        placeholder={'Number of adults'}
+                        value={form.values.count_adults ?? ''}
+                        onChange={(e) => form.update({ count_adults: parseInt(e.target.value) })}
+                    />
+                )}
+            />
+        </FormPane>
+    );
+}
diff --git a/react/src/dashboard/components/pages/identities/Identities.tsx b/react/src/dashboard/components/pages/identities/Identities.tsx
index 6515eff93..0ff9d1e1b 100644
--- a/react/src/dashboard/components/pages/identities/Identities.tsx
+++ b/react/src/dashboard/components/pages/identities/Identities.tsx
@@ -1,455 +1,6 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import useActiveOrganization from '../../../hooks/useActiveOrganization';
-import useSetProgress from '../../../hooks/useSetProgress';
-import { PaginationData } from '../../../props/ApiResponses';
-import Paginator from '../../../modules/paginator/components/Paginator';
-import LoadingCard from '../../elements/loading-card/LoadingCard';
-import { useFundService } from '../../../services/FundService';
-import Fund from '../../../props/models/Fund';
-import FilterItemToggle from '../../elements/tables/elements/FilterItemToggle';
-import SelectControl from '../../elements/select-control/SelectControl';
-import CardHeaderFilter from '../../elements/tables/elements/CardHeaderFilter';
-import StateNavLink from '../../../modules/state_router/StateNavLink';
-import usePaginatorService from '../../../modules/paginator/services/usePaginatorService';
-import useTranslate from '../../../hooks/useTranslate';
-import LoaderTableCard from '../../elements/loader-table-card/LoaderTableCard';
-import TableTopScroller from '../../elements/tables/TableTopScroller';
-import useConfigurableTable from '../vouchers/hooks/useConfigurableTable';
-import useFilterNext from '../../../modules/filter_next/useFilterNext';
-import TableRowActions from '../../elements/tables/TableRowActions';
-import SelectControlOptionsFund from '../../elements/select-control/templates/SelectControlOptionsFund';
-import usePushApiError from '../../../hooks/usePushApiError';
-import SponsorIdentity from '../../../props/models/Sponsor/SponsorIdentity';
-import useSponsorIdentitiesService from '../../../services/SponsorIdentitesService';
-import { NumberParam, StringParam } from 'use-query-params';
-import TableDateTime from '../../elements/tables/elements/TableDateTime';
-import TableEmptyValue from '../../elements/table-empty-value/TableEmptyValue';
-import TableDateOnly from '../../elements/tables/elements/TableDateOnly';
-import useIdentityExporter from '../../../services/exporters/useIdentityExporter';
-import DatePickerControl from '../../elements/forms/controls/DatePickerControl';
-import { dateFormat, dateParse } from '../../../helpers/dates';
+import React from 'react';
+import IdentitiesTable from './elements/IdentitiesTable';
 
 export default function Identities() {
-    const translate = useTranslate();
-    const setProgress = useSetProgress();
-    const pushApiError = usePushApiError();
-    const paginatorService = usePaginatorService();
-    const activeOrganization = useActiveOrganization();
-
-    const fundService = useFundService();
-    const identityExporter = useIdentityExporter();
-    const sponsorIdentitiesService = useSponsorIdentitiesService();
-
-    const [loading, setLoading] = useState(false);
-
-    const [funds, setFunds] = useState<Array<Partial<Fund>>>(null);
-    const [identities, setIdentities] = useState<PaginationData<SponsorIdentity>>(null);
-
-    const [hasBsnOptions] = useState([
-        { key: 1, name: 'Ja' },
-        { key: 0, name: 'Nee' },
-        { key: null, name: 'Alle' },
-    ]);
-
-    const [states] = useState([
-        { key: null, name: 'Alle' },
-        { key: 'pending', name: 'In afwachting' },
-        { key: 'success', name: 'Voltooid' },
-    ]);
-
-    const [paginatorTransactionsKey] = useState('payouts');
-
-    const [filterValues, filterValuesActive, filterUpdate, filter] = useFilterNext<{
-        q: string;
-        state: string;
-        page?: number;
-        city?: string;
-        has_bsn?: number;
-        fund_id?: number;
-        per_page?: number;
-        postal_code?: string;
-        municipality_name?: string;
-        birth_date_to?: string;
-        birth_date_from?: string;
-        last_login_to?: string;
-        last_login_from?: string;
-        last_activity_to?: string;
-        last_activity_from?: string;
-        order_by?: string;
-        order_dir?: string;
-    }>(
-        {
-            q: '',
-            state: states[0].key,
-            fund_id: null,
-            page: 1,
-            city: '',
-            has_bsn: null,
-            postal_code: '',
-            municipality_name: '',
-            birth_date_to: '',
-            birth_date_from: '',
-            last_login_to: '',
-            last_login_from: '',
-            last_activity_to: '',
-            last_activity_from: '',
-            order_by: 'created_at',
-            order_dir: 'desc',
-            per_page: paginatorService.getPerPage(paginatorTransactionsKey),
-        },
-        {
-            throttledValues: ['q', 'postal_code', 'city', 'municipality_name'],
-            queryParams: {
-                q: StringParam,
-                state: StringParam,
-                page: NumberParam,
-                city: StringParam,
-                has_bsn: NumberParam,
-                fund_id: NumberParam,
-                per_page: NumberParam,
-                postal_code: StringParam,
-                municipality_name: StringParam,
-                birth_date_to: StringParam,
-                birth_date_from: StringParam,
-                last_login_to: StringParam,
-                last_login_from: StringParam,
-                last_activity_to: StringParam,
-                last_activity_from: StringParam,
-                order_by: StringParam,
-                order_dir: StringParam,
-            },
-        },
-    );
-
-    const { headElement, configsElement } = useConfigurableTable(
-        sponsorIdentitiesService.getColumns(activeOrganization),
-        { filter: filter, sortable: true },
-    );
-
-    const { resetFilters: resetFilters, setShow } = filter;
-
-    const exportIdentities = useCallback(() => {
-        setShow(false);
-
-        identityExporter.exportData(activeOrganization.id, {
-            ...filter.activeValues,
-            per_page: null,
-        });
-    }, [activeOrganization.id, filter.activeValues, setShow, identityExporter]);
-
-    const fetchFunds = useCallback(() => {
-        setProgress(0);
-
-        fundService
-            .list(activeOrganization.id)
-            .then((res) => setFunds([{ id: null, name: 'Selecteer fonds' }, ...res.data.data]))
-            .catch(pushApiError)
-            .finally(() => setProgress(100));
-    }, [activeOrganization.id, fundService, setProgress, pushApiError]);
-
-    const fetchIdentities = useCallback(
-        (query = {}) => {
-            setLoading(true);
-            setProgress(0);
-
-            sponsorIdentitiesService
-                .list(activeOrganization.id, { ...query })
-                .then((res) => setIdentities(res.data))
-                .catch(pushApiError)
-                .finally(() => {
-                    setLoading(false);
-                    setProgress(100);
-                });
-        },
-        [activeOrganization.id, setProgress, sponsorIdentitiesService, pushApiError],
-    );
-
-    useEffect(() => {
-        fetchIdentities(filterValuesActive);
-    }, [fetchIdentities, filterValuesActive]);
-
-    useEffect(() => {
-        fetchFunds();
-    }, [fetchFunds]);
-
-    if (!identities || !funds) {
-        return <LoadingCard />;
-    }
-
-    return (
-        <div className="card" data-dusk="tableProfilesContent">
-            <div className="card-header">
-                <div className="card-title flex flex-grow">
-                    {translate('identities.header.title')} ({identities.meta.total})
-                </div>
-
-                <div className={'card-header-filters'}>
-                    <div className="block block-inline-filters">
-                        <div className="form">
-                            <div className="form-group">
-                                <SelectControl
-                                    className="form-control inline-filter-control"
-                                    propKey={'id'}
-                                    options={funds}
-                                    value={filter.activeValues.fund_id}
-                                    placeholder={translate('vouchers.labels.fund')}
-                                    allowSearch={false}
-                                    onChange={(fund_id: number) => filter.update({ fund_id })}
-                                    optionsComponent={SelectControlOptionsFund}
-                                />
-                            </div>
-                        </div>
-
-                        {filter.show && (
-                            <div className="button button-text" onClick={() => resetFilters()}>
-                                <em className="mdi mdi-close icon-start" />
-                                Wis filters
-                            </div>
-                        )}
-
-                        {!filter.show && (
-                            <div className="form">
-                                <div className="form-group">
-                                    <input
-                                        className="form-control"
-                                        data-dusk="tableProfilesSearch"
-                                        value={filterValues.q}
-                                        onChange={(e) => filterUpdate({ q: e.target.value })}
-                                        placeholder={translate('payouts.labels.search')}
-                                    />
-                                </div>
-                            </div>
-                        )}
-
-                        <CardHeaderFilter filter={filter}>
-                            <FilterItemToggle label={translate('payouts.labels.search')} show={true}>
-                                <input
-                                    className="form-control"
-                                    value={filterValues.q}
-                                    onChange={(e) => filterUpdate({ q: e.target.value })}
-                                    placeholder={translate('payouts.labels.search')}
-                                />
-                            </FilterItemToggle>
-
-                            <FilterItemToggle label={translate('sponsor_products.filters.birth_date_from')}>
-                                <DatePickerControl
-                                    value={dateParse(filterValues.birth_date_from)}
-                                    placeholder={translate('dd-MM-yyyy')}
-                                    onChange={(from: Date) => filterUpdate({ birth_date_from: dateFormat(from) })}
-                                />
-                            </FilterItemToggle>
-
-                            <FilterItemToggle label={translate('sponsor_products.filters.birth_date_to')}>
-                                <DatePickerControl
-                                    value={dateParse(filterValues.birth_date_to)}
-                                    placeholder={translate('dd-MM-yyyy')}
-                                    onChange={(to: Date) => filterUpdate({ birth_date_to: dateFormat(to) })}
-                                />
-                            </FilterItemToggle>
-
-                            <FilterItemToggle label={translate('sponsor_products.filters.postal_code')}>
-                                <input
-                                    className="form-control"
-                                    value={filterValues.postal_code}
-                                    onChange={(e) => filterUpdate({ postal_code: e.target.value })}
-                                    placeholder={translate('sponsor_products.filters.postal_code')}
-                                />
-                            </FilterItemToggle>
-
-                            <FilterItemToggle label={translate('sponsor_products.filters.municipality')}>
-                                <input
-                                    className="form-control"
-                                    value={filterValues.municipality_name}
-                                    onChange={(e) => filterUpdate({ municipality_name: e.target.value })}
-                                    placeholder={translate('sponsor_products.filters.municipality')}
-                                />
-                            </FilterItemToggle>
-
-                            <FilterItemToggle label={translate('sponsor_products.filters.city')}>
-                                <input
-                                    className="form-control"
-                                    value={filterValues.city}
-                                    onChange={(e) => filterUpdate({ city: e.target.value })}
-                                    placeholder={translate('sponsor_products.filters.city')}
-                                />
-                            </FilterItemToggle>
-
-                            <FilterItemToggle label={translate('sponsor_products.filters.last_activity_from')}>
-                                <DatePickerControl
-                                    value={dateParse(filterValues.last_activity_from)}
-                                    placeholder={translate('dd-MM-yyyy')}
-                                    onChange={(from: Date) => filterUpdate({ last_activity_from: dateFormat(from) })}
-                                />
-                            </FilterItemToggle>
-
-                            <FilterItemToggle label={translate('sponsor_products.filters.last_activity_to')}>
-                                <DatePickerControl
-                                    value={dateParse(filterValues.last_activity_to)}
-                                    placeholder={translate('dd-MM-yyyy')}
-                                    onChange={(to: Date) => filterUpdate({ last_activity_to: dateFormat(to) })}
-                                />
-                            </FilterItemToggle>
-
-                            <FilterItemToggle label={translate('sponsor_products.filters.last_login_from')}>
-                                <DatePickerControl
-                                    value={dateParse(filterValues.last_login_from)}
-                                    placeholder={translate('dd-MM-yyyy')}
-                                    onChange={(from: Date) => filterUpdate({ last_login_from: dateFormat(from) })}
-                                />
-                            </FilterItemToggle>
-
-                            <FilterItemToggle label={translate('sponsor_products.filters.last_login_to')}>
-                                <DatePickerControl
-                                    value={dateParse(filterValues.last_login_to)}
-                                    placeholder={translate('dd-MM-yyyy')}
-                                    onChange={(to: Date) => filterUpdate({ last_login_to: dateFormat(to) })}
-                                />
-                            </FilterItemToggle>
-
-                            <FilterItemToggle label={translate('sponsor_products.filters.has_bsn')}>
-                                <SelectControl
-                                    className="form-control"
-                                    propKey={'key'}
-                                    allowSearch={false}
-                                    value={filterValues.has_bsn}
-                                    options={hasBsnOptions}
-                                    onChange={(has_bsn: number) => filterUpdate({ has_bsn })}
-                                />
-                            </FilterItemToggle>
-
-                            <div className="form-actions">
-                                <button
-                                    className="button button-primary button-wide"
-                                    onClick={exportIdentities}
-                                    data-dusk="export"
-                                    disabled={identities.meta.total == 0}>
-                                    <em className="mdi mdi-download icon-start" />
-                                    {translate('components.dropdown.export', { total: identities.meta.total })}
-                                </button>
-                            </div>
-                        </CardHeaderFilter>
-                    </div>
-                </div>
-            </div>
-
-            <LoaderTableCard loading={loading} empty={identities.meta.total == 0} emptyTitle={'Geen personen gevonden'}>
-                <div className="card-section">
-                    <div className="card-block card-block-table">
-                        {configsElement}
-
-                        <TableTopScroller>
-                            <table className="table">
-                                {headElement}
-
-                                <tbody>
-                                    {identities.data.map((identity) => (
-                                        <StateNavLink
-                                            key={identity.id}
-                                            name={'identities-show'}
-                                            dataDusk={`tableProfilesRow${identity.id}`}
-                                            params={{
-                                                organizationId: activeOrganization.id,
-                                                id: identity.id,
-                                            }}
-                                            className={'tr-clickable'}
-                                            customElement={'tr'}>
-                                            <td>{identity.id}</td>
-                                            <td>
-                                                {identity?.records?.given_name?.[0]?.value_locale || (
-                                                    <TableEmptyValue />
-                                                )}
-                                            </td>
-                                            <td>
-                                                {identity?.records?.family_name?.[0]?.value_locale || (
-                                                    <TableEmptyValue />
-                                                )}
-                                            </td>
-                                            <td>{identity.email || <TableEmptyValue />}</td>
-                                            {activeOrganization.bsn_enabled && (
-                                                <td>{identity.bsn || <TableEmptyValue />}</td>
-                                            )}
-                                            <td>
-                                                {identity?.records?.client_number?.[0]?.value_locale || (
-                                                    <TableEmptyValue />
-                                                )}
-                                            </td>
-                                            <td>
-                                                <TableDateOnly
-                                                    value={identity?.records?.birth_date?.[0]?.value_locale}
-                                                />
-                                            </td>
-                                            <td>
-                                                <TableDateTime value={identity.last_login_at_locale} />
-                                            </td>
-                                            <td>
-                                                <TableDateTime value={identity.last_activity_at_locale} />
-                                            </td>
-                                            <td>{identity?.records?.city?.[0]?.value_locale || <TableEmptyValue />}</td>
-                                            <td>
-                                                {identity?.records?.street?.[0]?.value_locale || <TableEmptyValue />}
-                                            </td>
-                                            <td>
-                                                {identity?.records?.house_number?.[0]?.value_locale || (
-                                                    <TableEmptyValue />
-                                                )}
-                                            </td>
-                                            <td>
-                                                {identity?.records?.house_number_addition?.[0]?.value_locale || (
-                                                    <TableEmptyValue />
-                                                )}
-                                            </td>
-                                            <td>
-                                                {identity?.records?.postal_code?.[0]?.value_locale || (
-                                                    <TableEmptyValue />
-                                                )}
-                                            </td>
-                                            <td>
-                                                {identity?.records?.municipality_name?.[0]?.value_locale || (
-                                                    <TableEmptyValue />
-                                                )}
-                                            </td>
-                                            <td>
-                                                {identity?.records?.neighborhood_name?.[0]?.value_locale || (
-                                                    <TableEmptyValue />
-                                                )}
-                                            </td>
-
-                                            <td className={'table-td-actions text-right'}>
-                                                <TableRowActions
-                                                    content={() => (
-                                                        <div className="dropdown dropdown-actions">
-                                                            <StateNavLink
-                                                                name={'identities-show'}
-                                                                className="dropdown-item"
-                                                                params={{
-                                                                    organizationId: activeOrganization.id,
-                                                                    id: identity.id,
-                                                                }}>
-                                                                <em className="mdi mdi-eye icon-start" /> Bekijken
-                                                            </StateNavLink>
-                                                        </div>
-                                                    )}
-                                                />
-                                            </td>
-                                        </StateNavLink>
-                                    ))}
-                                </tbody>
-                            </table>
-                        </TableTopScroller>
-                    </div>
-                </div>
-
-                {identities.meta.total > 0 && (
-                    <div className="card-section">
-                        <Paginator
-                            meta={identities.meta}
-                            filters={filterValues}
-                            updateFilters={filterUpdate}
-                            perPageKey={paginatorTransactionsKey}
-                        />
-                    </div>
-                )}
-            </LoaderTableCard>
-        </div>
-    );
+    return <IdentitiesTable />;
 }
diff --git a/react/src/dashboard/components/pages/identities/elements/IdentitiesTable.tsx b/react/src/dashboard/components/pages/identities/elements/IdentitiesTable.tsx
new file mode 100644
index 000000000..bb2e85071
--- /dev/null
+++ b/react/src/dashboard/components/pages/identities/elements/IdentitiesTable.tsx
@@ -0,0 +1,344 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import useActiveOrganization from '../../../../hooks/useActiveOrganization';
+import useSetProgress from '../../../../hooks/useSetProgress';
+import Paginator from '../../../../modules/paginator/components/Paginator';
+import LoadingCard from '../../../elements/loading-card/LoadingCard';
+import { useFundService } from '../../../../services/FundService';
+import Fund from '../../../../props/models/Fund';
+import FilterItemToggle from '../../../elements/tables/elements/FilterItemToggle';
+import SelectControl from '../../../elements/select-control/SelectControl';
+import CardHeaderFilter from '../../../elements/tables/elements/CardHeaderFilter';
+import StateNavLink from '../../../../modules/state_router/StateNavLink';
+import useTranslate from '../../../../hooks/useTranslate';
+import LoaderTableCard from '../../../elements/loader-table-card/LoaderTableCard';
+import TableTopScroller from '../../../elements/tables/TableTopScroller';
+import useConfigurableTable from '../../vouchers/hooks/useConfigurableTable';
+import SelectControlOptionsFund from '../../../elements/select-control/templates/SelectControlOptionsFund';
+import usePushApiError from '../../../../hooks/usePushApiError';
+import useSponsorIdentitiesService from '../../../../services/SponsorIdentitesService';
+import useIdentityExporter from '../../../../services/exporters/useIdentityExporter';
+import DatePickerControl from '../../../elements/forms/controls/DatePickerControl';
+import { dateFormat, dateParse } from '../../../../helpers/dates';
+import IdentitiesTableRowItems from './IdentitiesTableRowItems';
+import TableRowActions from '../../../elements/tables/TableRowActions';
+import useFetchSponsorIdentities from '../hooks/useFetchSponsorIdentities';
+import { ProfileRecordType } from '../../../../props/models/Sponsor/SponsorIdentity';
+import RecordType from '../../../../props/models/RecordType';
+import { useRecordTypeService } from '../../../../services/RecordTypeService';
+import useEditProfileRecords from '../../identitities-show/hooks/useEditProfileRecords';
+import TableRowActionItem from '../../../elements/tables/TableRowActionItem';
+
+export default function IdentitiesTable() {
+    const translate = useTranslate();
+    const setProgress = useSetProgress();
+    const pushApiError = usePushApiError();
+    const activeOrganization = useActiveOrganization();
+
+    const fundService = useFundService();
+    const identityExporter = useIdentityExporter();
+    const sponsorIdentitiesService = useSponsorIdentitiesService();
+
+    const [funds, setFunds] = useState<Array<Partial<Fund>>>(null);
+
+    const [hasBsnOptions] = useState([
+        { key: 1, name: 'Ja' },
+        { key: 0, name: 'Nee' },
+        { key: null, name: 'Alle' },
+    ]);
+
+    const { filter, filterValues, filterUpdate, loading, identities, fetchIdentities, paginatorKey } =
+        useFetchSponsorIdentities(activeOrganization);
+
+    const { headElement, configsElement } = useConfigurableTable(
+        sponsorIdentitiesService.getColumns(activeOrganization),
+        { filter: filter, sortable: true, hasTooltips: true },
+    );
+
+    const { setShow } = filter;
+
+    const exportIdentities = useCallback(() => {
+        setShow(false);
+
+        identityExporter.exportData(activeOrganization.id, {
+            ...filter.activeValues,
+            per_page: null,
+        });
+    }, [activeOrganization.id, filter.activeValues, identityExporter, setShow]);
+
+    const fetchFunds = useCallback(() => {
+        setProgress(0);
+
+        fundService
+            .list(activeOrganization.id)
+            .then((res) => setFunds([{ id: null, name: 'Selecteer fonds' }, ...res.data.data]))
+            .catch(pushApiError)
+            .finally(() => setProgress(100));
+    }, [activeOrganization.id, fundService, setProgress, pushApiError]);
+
+    const [recordTypes, setRecordTypes] = useState<Array<RecordType & { key: ProfileRecordType }>>(null);
+
+    const recordTypeService = useRecordTypeService();
+
+    const editProfileRecords = useEditProfileRecords(activeOrganization, recordTypes);
+
+    const createProfile = useCallback(
+        (fetchProfiles: () => void) => {
+            editProfileRecords(null, 'Add new person', 'personal', fetchProfiles);
+        },
+        [editProfileRecords],
+    );
+
+    const fetchRecordTypes = useCallback(() => {
+        setProgress(0);
+
+        recordTypeService
+            .list<RecordType & { key: ProfileRecordType }>()
+            .then((res) => setRecordTypes(res.data))
+            .finally(() => setProgress(100));
+    }, [recordTypeService, setProgress]);
+
+    useEffect(() => {
+        fetchRecordTypes();
+    }, [fetchRecordTypes]);
+
+    useEffect(() => {
+        fetchIdentities();
+    }, [fetchIdentities]);
+
+    useEffect(() => {
+        fetchFunds();
+    }, [fetchFunds]);
+
+    if (!identities || !funds) {
+        return <LoadingCard />;
+    }
+
+    return (
+        <div className="card" data-dusk="tableProfilesContent">
+            <div className="card-header">
+                <div className="card-title flex flex-grow">
+                    {translate('identities.header.title')} ({identities.meta.total})
+                </div>
+
+                <div className={'card-header-filters'}>
+                    <div className="block block-inline-filters">
+                        <button
+                            type="button"
+                            className="button button-primary button-sm"
+                            onClick={() => createProfile(fetchIdentities)}
+                            data-dusk="uploadTransactionsBatchButton">
+                            <em className="mdi mdi-plus-circle" />
+                            Aanmaken
+                        </button>
+
+                        <div className="form">
+                            <div className="form-group">
+                                <SelectControl
+                                    className="form-control inline-filter-control"
+                                    propKey={'id'}
+                                    options={funds}
+                                    value={filter.activeValues.fund_id}
+                                    placeholder={translate('vouchers.labels.fund')}
+                                    allowSearch={false}
+                                    onChange={(fund_id: number) => filter.update({ fund_id })}
+                                    optionsComponent={SelectControlOptionsFund}
+                                />
+                            </div>
+                        </div>
+
+                        {filter.show && (
+                            <div className="button button-text" onClick={() => filter.resetFilters()}>
+                                <em className="mdi mdi-close icon-start" />
+                                Wis filters
+                            </div>
+                        )}
+
+                        {!filter.show && (
+                            <div className="form">
+                                <div className="form-group">
+                                    <input
+                                        className="form-control"
+                                        data-dusk="tableProfilesSearch"
+                                        value={filterValues.q}
+                                        onChange={(e) => filterUpdate({ q: e.target.value })}
+                                        placeholder={translate('payouts.labels.search')}
+                                    />
+                                </div>
+                            </div>
+                        )}
+
+                        <CardHeaderFilter filter={filter}>
+                            <FilterItemToggle label={translate('payouts.labels.search')} show={true}>
+                                <input
+                                    className="form-control"
+                                    value={filterValues.q}
+                                    onChange={(e) => filterUpdate({ q: e.target.value })}
+                                    placeholder={translate('payouts.labels.search')}
+                                />
+                            </FilterItemToggle>
+
+                            <FilterItemToggle label={translate('sponsor_products.filters.birth_date_from')}>
+                                <DatePickerControl
+                                    value={dateParse(filterValues.birth_date_from)}
+                                    placeholder={translate('dd-MM-yyyy')}
+                                    onChange={(from: Date) => filterUpdate({ birth_date_from: dateFormat(from) })}
+                                />
+                            </FilterItemToggle>
+
+                            <FilterItemToggle label={translate('sponsor_products.filters.birth_date_to')}>
+                                <DatePickerControl
+                                    value={dateParse(filterValues.birth_date_to)}
+                                    placeholder={translate('dd-MM-yyyy')}
+                                    onChange={(to: Date) => filterUpdate({ birth_date_to: dateFormat(to) })}
+                                />
+                            </FilterItemToggle>
+
+                            <FilterItemToggle label={translate('sponsor_products.filters.postal_code')}>
+                                <input
+                                    className="form-control"
+                                    value={filterValues.postal_code}
+                                    onChange={(e) => filterUpdate({ postal_code: e.target.value })}
+                                    placeholder={translate('sponsor_products.filters.postal_code')}
+                                />
+                            </FilterItemToggle>
+
+                            <FilterItemToggle label={translate('sponsor_products.filters.municipality')}>
+                                <input
+                                    className="form-control"
+                                    value={filterValues.municipality_name}
+                                    onChange={(e) => filterUpdate({ municipality_name: e.target.value })}
+                                    placeholder={translate('sponsor_products.filters.municipality')}
+                                />
+                            </FilterItemToggle>
+
+                            <FilterItemToggle label={translate('sponsor_products.filters.city')}>
+                                <input
+                                    className="form-control"
+                                    value={filterValues.city}
+                                    onChange={(e) => filterUpdate({ city: e.target.value })}
+                                    placeholder={translate('sponsor_products.filters.city')}
+                                />
+                            </FilterItemToggle>
+
+                            <FilterItemToggle label={translate('sponsor_products.filters.last_activity_from')}>
+                                <DatePickerControl
+                                    value={dateParse(filterValues.last_activity_from)}
+                                    placeholder={translate('dd-MM-yyyy')}
+                                    onChange={(from: Date) => filterUpdate({ last_activity_from: dateFormat(from) })}
+                                />
+                            </FilterItemToggle>
+
+                            <FilterItemToggle label={translate('sponsor_products.filters.last_activity_to')}>
+                                <DatePickerControl
+                                    value={dateParse(filterValues.last_activity_to)}
+                                    placeholder={translate('dd-MM-yyyy')}
+                                    onChange={(to: Date) => filterUpdate({ last_activity_to: dateFormat(to) })}
+                                />
+                            </FilterItemToggle>
+
+                            <FilterItemToggle label={translate('sponsor_products.filters.last_login_from')}>
+                                <DatePickerControl
+                                    value={dateParse(filterValues.last_login_from)}
+                                    placeholder={translate('dd-MM-yyyy')}
+                                    onChange={(from: Date) => filterUpdate({ last_login_from: dateFormat(from) })}
+                                />
+                            </FilterItemToggle>
+
+                            <FilterItemToggle label={translate('sponsor_products.filters.last_login_to')}>
+                                <DatePickerControl
+                                    value={dateParse(filterValues.last_login_to)}
+                                    placeholder={translate('dd-MM-yyyy')}
+                                    onChange={(to: Date) => filterUpdate({ last_login_to: dateFormat(to) })}
+                                />
+                            </FilterItemToggle>
+
+                            <FilterItemToggle label={translate('sponsor_products.filters.has_bsn')}>
+                                <SelectControl
+                                    className="form-control"
+                                    propKey={'key'}
+                                    allowSearch={false}
+                                    value={filterValues.has_bsn}
+                                    options={hasBsnOptions}
+                                    onChange={(has_bsn: number) => filterUpdate({ has_bsn })}
+                                />
+                            </FilterItemToggle>
+
+                            <div className="form-actions">
+                                <button
+                                    className="button button-primary button-wide"
+                                    onClick={exportIdentities}
+                                    data-dusk="export"
+                                    disabled={identities.meta.total == 0}>
+                                    <em className="mdi mdi-download icon-start" />
+                                    {translate('components.dropdown.export', { total: identities.meta.total })}
+                                </button>
+                            </div>
+                        </CardHeaderFilter>
+                    </div>
+                </div>
+            </div>
+
+            <LoaderTableCard loading={loading} empty={identities.meta.total == 0} emptyTitle={'Geen personen gevonden'}>
+                <div className="card-section">
+                    <div className="card-block card-block-table">
+                        {configsElement}
+
+                        <TableTopScroller>
+                            <table className="table">
+                                {headElement}
+
+                                <tbody>
+                                    {identities.data.map((identity) => (
+                                        <StateNavLink
+                                            key={identity.id}
+                                            name={'identities-show'}
+                                            dataDusk={`tableProfilesRow${identity.id}`}
+                                            params={{
+                                                organizationId: activeOrganization.id,
+                                                id: identity.id,
+                                            }}
+                                            className={'tr-clickable'}
+                                            customElement={'tr'}>
+                                            <IdentitiesTableRowItems
+                                                actions={
+                                                    <TableRowActions
+                                                        content={() => (
+                                                            <div className="dropdown dropdown-actions">
+                                                                <TableRowActionItem
+                                                                    type={'link'}
+                                                                    name={'identities-show'}
+                                                                    params={{
+                                                                        organizationId: activeOrganization.id,
+                                                                        id: identity.id,
+                                                                    }}>
+                                                                    <em className="mdi mdi-eye icon-start" /> Bekijken
+                                                                </TableRowActionItem>
+                                                            </div>
+                                                        )}
+                                                    />
+                                                }
+                                                identity={identity}
+                                                organization={activeOrganization}
+                                            />
+                                        </StateNavLink>
+                                    ))}
+                                </tbody>
+                            </table>
+                        </TableTopScroller>
+                    </div>
+                </div>
+
+                {identities.meta.total > 0 && (
+                    <div className="card-section">
+                        <Paginator
+                            meta={identities.meta}
+                            filters={filterValues}
+                            updateFilters={filterUpdate}
+                            perPageKey={paginatorKey}
+                        />
+                    </div>
+                )}
+            </LoaderTableCard>
+        </div>
+    );
+}
diff --git a/react/src/dashboard/components/pages/identities/elements/IdentitiesTableRowItems.tsx b/react/src/dashboard/components/pages/identities/elements/IdentitiesTableRowItems.tsx
new file mode 100644
index 000000000..cca5115fe
--- /dev/null
+++ b/react/src/dashboard/components/pages/identities/elements/IdentitiesTableRowItems.tsx
@@ -0,0 +1,46 @@
+import React, { Fragment, ReactNode } from 'react';
+import SponsorIdentity from '../../../../props/models/Sponsor/SponsorIdentity';
+import TableDateTime from '../../../elements/tables/elements/TableDateTime';
+import TableEmptyValue from '../../../elements/table-empty-value/TableEmptyValue';
+import TableDateOnly from '../../../elements/tables/elements/TableDateOnly';
+import Organization from '../../../../props/models/Organization';
+
+export default function IdentitiesTableRowItems({
+    actions = null,
+    identity,
+    organization,
+}: {
+    actions?: ReactNode | ReactNode[];
+    identity: SponsorIdentity;
+    organization: Organization;
+}) {
+    return (
+        <Fragment>
+            <td>{identity.id}</td>
+            <td>{identity?.type_locale || <TableEmptyValue />}</td>
+            <td>{identity?.records?.given_name?.[0]?.value_locale || <TableEmptyValue />}</td>
+            <td>{identity?.records?.family_name?.[0]?.value_locale || <TableEmptyValue />}</td>
+            <td>{identity.email || <TableEmptyValue />}</td>
+            {organization.bsn_enabled && <td>{identity.bsn || <TableEmptyValue />}</td>}
+            <td>{identity?.records?.client_number?.[0]?.value_locale || <TableEmptyValue />}</td>
+            <td>
+                <TableDateOnly value={identity?.records?.birth_date?.[0]?.value_locale} />
+            </td>
+            <td>
+                <TableDateTime value={identity.last_login_at_locale} />
+            </td>
+            <td>
+                <TableDateTime value={identity.last_activity_at_locale} />
+            </td>
+            <td>{identity?.records?.city?.[0]?.value_locale || <TableEmptyValue />}</td>
+            <td>{identity?.records?.street?.[0]?.value_locale || <TableEmptyValue />}</td>
+            <td>{identity?.records?.house_number?.[0]?.value_locale || <TableEmptyValue />}</td>
+            <td>{identity?.records?.house_number_addition?.[0]?.value_locale || <TableEmptyValue />}</td>
+            <td>{identity?.records?.postal_code?.[0]?.value_locale || <TableEmptyValue />}</td>
+            <td>{identity?.records?.municipality_name?.[0]?.value_locale || <TableEmptyValue />}</td>
+            <td>{identity?.records?.neighborhood_name?.[0]?.value_locale || <TableEmptyValue />}</td>
+
+            <td className={'table-td-actions text-right'}>{actions}</td>
+        </Fragment>
+    );
+}
diff --git a/react/src/dashboard/components/pages/identities/hooks/useFetchSponsorIdentities.tsx b/react/src/dashboard/components/pages/identities/hooks/useFetchSponsorIdentities.tsx
new file mode 100644
index 000000000..3e07ff8fc
--- /dev/null
+++ b/react/src/dashboard/components/pages/identities/hooks/useFetchSponsorIdentities.tsx
@@ -0,0 +1,110 @@
+import useFilterNext from '../../../../modules/filter_next/useFilterNext';
+import { NumberParam, StringParam } from 'use-query-params';
+import { useCallback, useState } from 'react';
+import usePaginatorService from '../../../../modules/paginator/services/usePaginatorService';
+import { PaginationData } from '../../../../props/ApiResponses';
+import SponsorIdentity from '../../../../props/models/Sponsor/SponsorIdentity';
+import useSetProgress from '../../../../hooks/useSetProgress';
+import useSponsorIdentitiesService from '../../../../services/SponsorIdentitesService';
+import Organization from '../../../../props/models/Organization';
+import usePushApiError from '../../../../hooks/usePushApiError';
+
+export default function useFetchSponsorIdentities(organization: Organization, extraFilters?: { household_id: number }) {
+    const [loading, setLoading] = useState(false);
+    const setProgress = useSetProgress();
+    const pushApiError = usePushApiError();
+    const [identities, setIdentities] = useState<PaginationData<SponsorIdentity>>(null);
+    const [extra] = useState(extraFilters ?? []);
+
+    const paginatorService = usePaginatorService();
+    const sponsorIdentitiesService = useSponsorIdentitiesService();
+
+    const [paginatorKey] = useState('identities');
+
+    const [states] = useState([
+        { key: null, name: 'Alle' },
+        { key: 'pending', name: 'In afwachting' },
+        { key: 'success', name: 'Voltooid' },
+    ]);
+
+    const [filterValues, filterValuesActive, filterUpdate, filter] = useFilterNext<{
+        q: string;
+        state: string;
+        page?: number;
+        city?: string;
+        has_bsn?: number;
+        fund_id?: number;
+        per_page?: number;
+        postal_code?: string;
+        municipality_name?: string;
+        birth_date_to?: string;
+        birth_date_from?: string;
+        last_login_to?: string;
+        last_login_from?: string;
+        last_activity_to?: string;
+        last_activity_from?: string;
+        order_by?: string;
+        order_dir?: string;
+    }>(
+        {
+            q: '',
+            state: states[0].key,
+            fund_id: null,
+            page: 1,
+            city: '',
+            has_bsn: null,
+            postal_code: '',
+            municipality_name: '',
+            birth_date_to: '',
+            birth_date_from: '',
+            last_login_to: '',
+            last_login_from: '',
+            last_activity_to: '',
+            last_activity_from: '',
+            order_by: 'created_at',
+            order_dir: 'desc',
+            per_page: paginatorService.getPerPage(paginatorKey),
+        },
+        {
+            throttledValues: ['q', 'postal_code', 'city', 'municipality_name'],
+            queryParams: {
+                q: StringParam,
+                state: StringParam,
+                page: NumberParam,
+                city: StringParam,
+                has_bsn: NumberParam,
+                fund_id: NumberParam,
+                per_page: NumberParam,
+                postal_code: StringParam,
+                municipality_name: StringParam,
+                birth_date_to: StringParam,
+                birth_date_from: StringParam,
+                last_login_to: StringParam,
+                last_login_from: StringParam,
+                last_activity_to: StringParam,
+                last_activity_from: StringParam,
+                order_by: StringParam,
+                order_dir: StringParam,
+            },
+        },
+    );
+
+    const fetchIdentities = useCallback(() => {
+        setLoading(true);
+        setProgress(0);
+
+        sponsorIdentitiesService
+            .list(organization.id, {
+                ...filterValuesActive,
+                ...extra,
+            })
+            .then((res) => setIdentities(res.data))
+            .catch(pushApiError)
+            .finally(() => {
+                setLoading(false);
+                setProgress(100);
+            });
+    }, [setProgress, sponsorIdentitiesService, organization.id, filterValuesActive, extra, pushApiError]);
+
+    return { filter, filterValues, filterUpdate, loading, identities, fetchIdentities, paginatorKey };
+}
diff --git a/react/src/dashboard/components/pages/identitities-show/IdentitiesShow.tsx b/react/src/dashboard/components/pages/identitities-show/IdentitiesShow.tsx
index 7dfa87e5a..a99548565 100644
--- a/react/src/dashboard/components/pages/identitities-show/IdentitiesShow.tsx
+++ b/react/src/dashboard/components/pages/identitities-show/IdentitiesShow.tsx
@@ -3,19 +3,11 @@ import useSetProgress from '../../../hooks/useSetProgress';
 import useActiveOrganization from '../../../hooks/useActiveOrganization';
 import { useParams } from 'react-router';
 import StateNavLink from '../../../modules/state_router/StateNavLink';
-import SponsorIdentity, {
-    ProfileRecord,
-    ProfileRecords,
-    ProfileRecordTypes,
-} from '../../../props/models/Sponsor/SponsorIdentity';
+import SponsorIdentity from '../../../props/models/Sponsor/SponsorIdentity';
 import LoadingCard from '../../elements/loading-card/LoadingCard';
 import useSponsorIdentitiesService from '../../../services/SponsorIdentitesService';
 import Card from '../../elements/card/Card';
 import CardBlockKeyValue from '../../elements/card/blocks/CardBlockKeyValue';
-import useOpenModal from '../../../hooks/useOpenModal';
-import ModalEditProfileRecords from './modals/ModalEditProfileRecords';
-import { useRecordTypeService } from '../../../services/RecordTypeService';
-import RecordType from '../../../props/models/RecordType';
 import { hasPermission } from '../../../helpers/utils';
 import IdentityReimbursementsCard from './cards/IdentityReimbursementsCard';
 import IdentityFundRequestsCard from './cards/IdentityFundRequestsCard';
@@ -27,34 +19,22 @@ import { differenceInYears } from 'date-fns';
 import { dateParse } from '../../../helpers/dates';
 import BlockCardEmails from '../../elements/block-card-emails/BlockCardEmails';
 import useEmailLogService from '../../../services/EmailLogService';
+import useEditProfileRecords from './hooks/useEditProfileRecords';
+import { Permission } from '../../../props/models/Organization';
+import useProfileRecordTypes from './hooks/useProfileRecordTypes';
 import IdentityPerson from '../fund-requests-view/elements/IdentityPerson';
+import ProfileRelationsCard from './elements/ProfileRelationsCard';
 
 export default function IdentitiesShow() {
-    const openModal = useOpenModal();
     const setProgress = useSetProgress();
     const activeOrganization = useActiveOrganization();
 
     const emailLogService = useEmailLogService();
-    const recordTypeService = useRecordTypeService();
     const sponsorIdentitiesService = useSponsorIdentitiesService();
+    const { recordTypes, recordTypesByKey } = useProfileRecordTypes();
 
     const identityId = parseInt(useParams().id);
     const [identity, setIdentity] = useState<SponsorIdentity>(null);
-    const [recordTypes, setRecordTypes] = useState<Array<RecordType & { key: ProfileRecordTypes }>>(null);
-
-    const recordTypesByKey = useMemo(() => {
-        return recordTypes?.reduce((map, recordType) => {
-            return { ...map, [recordType.key]: recordType };
-        }, {}) as ProfileRecords;
-    }, [recordTypes]);
-
-    const recordsByKey = useMemo(() => {
-        return Object.keys(identity?.records || {})?.reduce((map, key) => {
-            const record: ProfileRecord[] = identity?.records[key];
-
-            return { ...map, [key]: record[0]?.value };
-        }, {}) as { [key in ProfileRecordTypes]: string };
-    }, [identity]);
 
     const otherEmails = useMemo(() => {
         return identity?.email_verified ? identity?.email_verified : [];
@@ -75,38 +55,7 @@ export default function IdentitiesShow() {
             .finally(() => setProgress(100));
     }, [activeOrganization.id, identityId, setProgress, sponsorIdentitiesService]);
 
-    const fetchRecordTypes = useCallback(() => {
-        setProgress(0);
-
-        recordTypeService
-            .list<RecordType & { key: ProfileRecordTypes }>()
-            .then((res) => setRecordTypes(res.data))
-            .finally(() => setProgress(100));
-    }, [recordTypeService, setProgress]);
-
-    const editProfileRecords = useCallback(
-        (
-            title: string,
-            recordTypeKyes: ProfileRecordTypes[],
-            disabledFields: Array<{ label: string; value: string; key: string }> = [],
-            bodyOverflowVisible: boolean = false,
-        ) => {
-            openModal((modal) => (
-                <ModalEditProfileRecords
-                    modal={modal}
-                    title={title}
-                    disabledFields={disabledFields}
-                    onDone={fetchIdentity}
-                    identity={identity}
-                    recordTypes={recordTypeKyes?.map((filter) => recordTypes?.find((item) => filter === item.key))}
-                    values={recordsByKey}
-                    organization={activeOrganization}
-                    bodyOverflowVisible={bodyOverflowVisible}
-                />
-            ));
-        },
-        [openModal, fetchIdentity, identity, recordTypes, recordsByKey, activeOrganization],
-    );
+    const editProfileRecords = useEditProfileRecords(activeOrganization, recordTypes);
 
     const fetchEmailLogs = useCallback(
         (query = {}) =>
@@ -121,11 +70,7 @@ export default function IdentitiesShow() {
         fetchIdentity();
     }, [fetchIdentity]);
 
-    useEffect(() => {
-        fetchRecordTypes();
-    }, [fetchRecordTypes]);
-
-    if (!identity || !recordTypes) {
+    if (!identity || identity?.id !== identityId || !recordTypes) {
         return <LoadingCard />;
     }
 
@@ -146,18 +91,12 @@ export default function IdentitiesShow() {
             <Card
                 title={'Persoonsgegevens'}
                 buttons={[
-                    hasPermission(activeOrganization, 'manage_identities') && {
+                    hasPermission(activeOrganization, Permission.MANAGE_IDENTITIES) && {
                         text: 'Bewerken',
                         icon: 'pencil-outline',
-                        onClick: () =>
-                            editProfileRecords('Wijzig persoonsgegevens', [
-                                'given_name',
-                                'family_name',
-                                'birth_date',
-                                'gender',
-                                'marital_status',
-                                'client_number',
-                            ]),
+                        onClick: () => {
+                            editProfileRecords(identity, 'Wijzig persoonsgegevens', 'personal', fetchIdentity);
+                        },
                     },
                 ]}>
                 <CardBlockKeyValue
@@ -203,16 +142,10 @@ export default function IdentitiesShow() {
             <Card
                 title={'Huishouden'}
                 buttons={[
-                    hasPermission(activeOrganization, 'manage_identities') && {
+                    hasPermission(activeOrganization, Permission.MANAGE_IDENTITIES) && {
                         text: 'Bewerken',
                         icon: 'pencil-outline',
-                        onClick: () =>
-                            editProfileRecords(
-                                'Wijzig huishouden',
-                                ['house_composition', 'living_arrangement'],
-                                [],
-                                true,
-                            ),
+                        onClick: () => editProfileRecords(identity, 'Wijzig huishouden', 'house', fetchIdentity),
                     },
                 ]}>
                 <CardBlockKeyValue
@@ -230,37 +163,39 @@ export default function IdentitiesShow() {
                 />
             </Card>
 
+            {activeOrganization?.allow_profiles_relations && (
+                <ProfileRelationsCard organization={activeOrganization} identity={identity} />
+            )}
+
             <Card title={'Accountgegevens'}>
                 <CardBlockKeyValue
                     size={'md'}
                     items={[
                         { label: 'Accountnummer', value: identity?.id },
-                        { label: 'Actief sinds', value: identity?.created_at_locale },
+                        identity?.type_locale ? { label: 'Account type', value: identity?.type_locale } : null,
+                        identity?.employee_email ? { label: 'Created by', value: identity?.employee_email } : null,
+                        { label: 'Created at', value: identity?.created_at_locale },
                         { label: 'Laatste inlog', value: identity?.last_login_at_locale },
                         { label: 'Laatste handeling', value: identity?.last_activity_at_locale },
-                    ]}
+                    ].filter((item) => item !== null)}
                 />
             </Card>
 
             <Card
                 title={'Contactgegevens'}
                 buttons={[
-                    hasPermission(activeOrganization, 'manage_identities') && {
+                    hasPermission(activeOrganization, Permission.MANAGE_IDENTITIES) && {
                         text: 'Bewerken',
                         icon: 'pencil-outline',
                         onClick: () => {
-                            editProfileRecords(
-                                'Wijzig contactgegevens',
-                                ['telephone', 'mobile'],
-                                [
-                                    { label: 'Hoofd e-mailadres', value: identity.email, key: 'email' },
-                                    ...otherEmails.map((email, index) => ({
-                                        label: `Extra e-mailadres ${index + 1}`,
-                                        value: email,
-                                        key: `emails_verified_${index}`,
-                                    })),
-                                ],
-                            );
+                            editProfileRecords(identity, 'Wijzig contactgegevens', 'contacts', fetchIdentity, [
+                                { label: 'Hoofd e-mailadres', value: identity.email, key: 'email' },
+                                ...otherEmails.map((email, index) => ({
+                                    label: `Extra e-mailadres ${index + 1}`,
+                                    value: email,
+                                    key: `emails_verified_${index}`,
+                                })),
+                            ]);
                         },
                     },
                 ]}>
@@ -287,19 +222,11 @@ export default function IdentitiesShow() {
             <Card
                 title={'Adresgegevens'}
                 buttons={[
-                    hasPermission(activeOrganization, 'manage_identities') && {
+                    hasPermission(activeOrganization, Permission.MANAGE_IDENTITIES) && {
                         text: 'Bewerken',
                         icon: 'pencil-outline',
                         onClick: () => {
-                            editProfileRecords('Wijzig adresgegevens', [
-                                'city',
-                                'street',
-                                'house_number',
-                                'house_number_addition',
-                                'postal_code',
-                                'neighborhood_name',
-                                'municipality_name',
-                            ]);
+                            editProfileRecords(identity, 'Wijzig adresgegevens', 'address', fetchIdentity);
                         },
                     },
                 ]}>
@@ -346,19 +273,19 @@ export default function IdentitiesShow() {
                 fetchIdentity={fetchIdentity}
             />
 
-            {hasPermission(activeOrganization, ['manage_vouchers', 'view_vouchers']) && (
+            {hasPermission(activeOrganization, [Permission.MANAGE_VOUCHERS, Permission.VIEW_VOUCHERS]) && (
                 <IdentityVouchersCard organization={activeOrganization} identity={identity} />
             )}
 
-            {activeOrganization?.allow_payouts && hasPermission(activeOrganization, 'manage_payouts') && (
+            {activeOrganization?.allow_payouts && hasPermission(activeOrganization, Permission.MANAGE_PAYOUTS) && (
                 <IdentityPayoutsCard organization={activeOrganization} identity={identity} />
             )}
 
-            {hasPermission(activeOrganization, 'manage_reimbursements') && (
+            {hasPermission(activeOrganization, Permission.MANAGE_REIMBURSEMENTS) && (
                 <IdentityReimbursementsCard organization={activeOrganization} identity={identity} />
             )}
 
-            {hasPermission(activeOrganization, ['validate_records', 'manage_validators'], false) && (
+            {hasPermission(activeOrganization, [Permission.VALIDATE_RECORDS, Permission.MANAGE_VALIDATORS], false) && (
                 <IdentityFundRequestsCard organization={activeOrganization} identity={identity} />
             )}
 
diff --git a/react/src/dashboard/components/pages/identitities-show/cards/IdentityBankAccountsCard.tsx b/react/src/dashboard/components/pages/identitities-show/cards/IdentityBankAccountsCard.tsx
index 8be9ed87b..dea8b6a27 100644
--- a/react/src/dashboard/components/pages/identitities-show/cards/IdentityBankAccountsCard.tsx
+++ b/react/src/dashboard/components/pages/identitities-show/cards/IdentityBankAccountsCard.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react';
-import Organization from '../../../../props/models/Organization';
+import Organization, { Permission } from '../../../../props/models/Organization';
 import EmptyCard from '../../../elements/empty-card/EmptyCard';
 import Card from '../../../elements/card/Card';
 import CardTable from '../../../elements/card-table/CardTable';
@@ -98,7 +98,7 @@ export default function IdentityBankAccountsCard({
         <Card
             title={`Bankrekeningen (${identity.bank_accounts?.length || 0})`}
             buttons={[
-                hasPermission(organization, 'manage_identities') && {
+                hasPermission(organization, Permission.MANAGE_IDENTITIES) && {
                     text: 'Aanmaken',
                     type: 'primary',
                     icon: 'plus-circle',
@@ -117,9 +117,8 @@ export default function IdentityBankAccountsCard({
                                 <TableDateTime value={bank_account.updated_at_locale} />
                             </td>
                             <td>{bank_account.created_by_locale}</td>
-
-                            <td className={'table-td-actions text-right'}>
-                                {bank_account?.id && hasPermission(organization, 'manage_identities') ? (
+                            <td className="table-td-actions text-right">
+                                {bank_account?.id && hasPermission(organization, Permission.MANAGE_IDENTITIES) ? (
                                     <TableRowActions
                                         content={(e) => (
                                             <div className="dropdown dropdown-actions">
diff --git a/react/src/dashboard/components/pages/identitities-show/cards/IdentityFundRequestsCard.tsx b/react/src/dashboard/components/pages/identitities-show/cards/IdentityFundRequestsCard.tsx
index d166f8680..0dfa2f9fd 100644
--- a/react/src/dashboard/components/pages/identitities-show/cards/IdentityFundRequestsCard.tsx
+++ b/react/src/dashboard/components/pages/identitities-show/cards/IdentityFundRequestsCard.tsx
@@ -31,7 +31,6 @@ export default function IdentityFundRequestsCard({
         order_by: 'created_at',
         order_dir: 'desc',
         per_page: 10,
-        identity_id: identity.id,
     });
 
     const fetchFundRequests = useCallback(() => {
@@ -39,14 +38,14 @@ export default function IdentityFundRequestsCard({
         setLoading(true);
 
         fundRequestService
-            .index(organization.id, filterValuesActive)
+            .index(organization.id, { ...filterValuesActive, identity_id: identity.id })
             .then((res) => setFundRequests(res.data))
             .catch(pushApiError)
             .finally(() => {
                 setProgress(100);
                 setLoading(false);
             });
-    }, [setProgress, fundRequestService, organization.id, filterValuesActive, pushApiError]);
+    }, [setProgress, fundRequestService, organization.id, filterValuesActive, pushApiError, identity.id]);
 
     useEffect(() => {
         fetchFundRequests();
diff --git a/react/src/dashboard/components/pages/identitities-show/elements/ProfileRelationsCard.tsx b/react/src/dashboard/components/pages/identitities-show/elements/ProfileRelationsCard.tsx
new file mode 100644
index 000000000..84c80734e
--- /dev/null
+++ b/react/src/dashboard/components/pages/identitities-show/elements/ProfileRelationsCard.tsx
@@ -0,0 +1,234 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import useActiveOrganization from '../../../../hooks/useActiveOrganization';
+import useSetProgress from '../../../../hooks/useSetProgress';
+import Paginator from '../../../../modules/paginator/components/Paginator';
+import LoadingCard from '../../../elements/loading-card/LoadingCard';
+import FilterItemToggle from '../../../elements/tables/elements/FilterItemToggle';
+import CardHeaderFilter from '../../../elements/tables/elements/CardHeaderFilter';
+import LoaderTableCard from '../../../elements/loader-table-card/LoaderTableCard';
+import TableTopScroller from '../../../elements/tables/TableTopScroller';
+import useConfigurableTable from '../../vouchers/hooks/useConfigurableTable';
+import usePushApiError from '../../../../hooks/usePushApiError';
+import useSponsorIdentitiesService from '../../../../services/SponsorIdentitesService';
+import TableRowActions from '../../../elements/tables/TableRowActions';
+import TableRowActionItem from '../../../elements/tables/TableRowActionItem';
+import useIdentityRelationEdit from '../hooks/useIdentityRelationEdit';
+import useIdentityRelationDelete from '../hooks/useIdentityRelationDelete';
+import Organization from '../../../../props/models/Organization';
+import { PaginationData } from '../../../../props/ApiResponses';
+import usePaginatorService from '../../../../modules/paginator/services/usePaginatorService';
+import useFilterNext from '../../../../modules/filter_next/useFilterNext';
+import SponsorIdentity from '../../../../props/models/Sponsor/SponsorIdentity';
+import SponsorProfileRelation from '../../../../props/models/Sponsor/SponsorProfileRelation';
+import ProfileRelationsTableRowItem from './ProfileRelationsTableRowItem';
+import StateNavLink from '../../../../modules/state_router/StateNavLink';
+
+export default function ProfileRelationsCard({
+    organization,
+    identity,
+}: {
+    organization: Organization;
+    identity: SponsorIdentity;
+}) {
+    const setProgress = useSetProgress();
+    const pushApiError = usePushApiError();
+    const activeOrganization = useActiveOrganization();
+
+    const sponsorIdentitiesService = useSponsorIdentitiesService();
+
+    const identityRelationEdit = useIdentityRelationEdit(activeOrganization);
+    const identityRelationDelete = useIdentityRelationDelete(activeOrganization);
+
+    const [loading, setLoading] = useState(false);
+    const [paginatorKey] = useState('identities');
+
+    const [relations, setRelations] = useState<PaginationData<SponsorProfileRelation>>(null);
+
+    const paginatorService = usePaginatorService();
+
+    const [filterValues, filterValuesActive, filterUpdate, filter] = useFilterNext<{
+        q: string;
+        page?: number;
+        per_page?: number;
+        order_by?: string;
+        order_dir?: string;
+    }>({
+        q: '',
+        page: 1,
+        order_by: 'created_at',
+        order_dir: 'desc',
+        per_page: paginatorService.getPerPage(paginatorKey),
+    });
+
+    const fetchIdentityRelations = useCallback(() => {
+        setLoading(true);
+        setProgress(0);
+
+        sponsorIdentitiesService
+            .listRelations(organization.id, identity?.id, filterValuesActive)
+            .then((res) => setRelations(res.data))
+            .catch(pushApiError)
+            .finally(() => {
+                setProgress(100);
+                setLoading(false);
+            });
+    }, [filterValuesActive, identity?.id, organization.id, pushApiError, setProgress, sponsorIdentitiesService]);
+
+    const { headElement, configsElement } = useConfigurableTable(
+        sponsorIdentitiesService.getColumnsRelations(activeOrganization),
+        { filter: filter, sortable: false, hasTooltips: true },
+    );
+
+    useEffect(() => {
+        fetchIdentityRelations();
+    }, [fetchIdentityRelations]);
+
+    if (!relations) {
+        return <LoadingCard />;
+    }
+
+    return (
+        <div className="card">
+            <div className="card-header">
+                <div className="card-title flex flex-grow">{`Relations (${relations?.meta?.total || 0})`}</div>
+
+                <div className={'card-header-filters'}>
+                    <div className="block block-inline-filters">
+                        <button
+                            type="button"
+                            className="button button-primary button-sm"
+                            onClick={() => identityRelationEdit(identity, null, fetchIdentityRelations)}>
+                            <em className="mdi mdi-plus-circle" />
+                            Aanmaken
+                        </button>
+
+                        {filter.show && (
+                            <div className="button button-text" onClick={() => filter.resetFilters()}>
+                                <em className="mdi mdi-close icon-start" />
+                                Wis filters
+                            </div>
+                        )}
+
+                        {!filter.show && (
+                            <div className="form">
+                                <div className="form-group">
+                                    <input
+                                        className="form-control"
+                                        value={filterValues.q}
+                                        onChange={(e) => filterUpdate({ q: e.target.value })}
+                                        placeholder={'Zoek'}
+                                    />
+                                </div>
+                            </div>
+                        )}
+
+                        <CardHeaderFilter filter={filter}>
+                            <FilterItemToggle label={'Zoek'} show={true}>
+                                <input
+                                    className="form-control"
+                                    value={filterValues.q}
+                                    onChange={(e) => filterUpdate({ q: e.target.value })}
+                                    placeholder={'Zoek'}
+                                />
+                            </FilterItemToggle>
+                        </CardHeaderFilter>
+                    </div>
+                </div>
+            </div>
+
+            <LoaderTableCard loading={loading} empty={relations.meta.total == 0} emptyTitle={'Geen relations gevonden'}>
+                <div className="card-section">
+                    <div className="card-block card-block-table">
+                        {configsElement}
+
+                        <TableTopScroller>
+                            <table className="table">
+                                {headElement}
+
+                                <tbody>
+                                    {relations.data.map((relation) => (
+                                        <StateNavLink
+                                            name={'identities-show'}
+                                            params={{
+                                                organizationId: activeOrganization.id,
+                                                id:
+                                                    relation?.identity_id === identity?.id
+                                                        ? relation?.related_identity_id
+                                                        : relation?.identity_id,
+                                            }}
+                                            className={'tr-clickable'}
+                                            customElement={'tr'}
+                                            key={relation?.id}>
+                                            <ProfileRelationsTableRowItem
+                                                actions={
+                                                    <TableRowActions
+                                                        content={(e) => (
+                                                            <div className="dropdown dropdown-actions">
+                                                                <TableRowActionItem
+                                                                    type={'link'}
+                                                                    name={'identities-show'}
+                                                                    params={{
+                                                                        organizationId: activeOrganization.id,
+                                                                        id:
+                                                                            relation?.identity_id === identity?.id
+                                                                                ? relation?.related_identity_id
+                                                                                : relation?.identity_id,
+                                                                    }}>
+                                                                    <em className="mdi mdi-eye-outline icon-start" />
+                                                                    Bekijken
+                                                                </TableRowActionItem>
+                                                                <TableRowActionItem
+                                                                    type={'button'}
+                                                                    onClick={() => {
+                                                                        e?.close();
+                                                                        identityRelationEdit(
+                                                                            identity,
+                                                                            relation,
+                                                                            fetchIdentityRelations,
+                                                                        );
+                                                                    }}>
+                                                                    <em className="mdi mdi-pencil icon-start" />
+                                                                    Wijzigen
+                                                                </TableRowActionItem>
+                                                                <TableRowActionItem
+                                                                    type={'button'}
+                                                                    onClick={() => {
+                                                                        e?.close();
+                                                                        identityRelationDelete(
+                                                                            relation,
+                                                                            fetchIdentityRelations,
+                                                                        );
+                                                                    }}>
+                                                                    <em className="mdi mdi-close icon-start" />
+                                                                    Verwijderen
+                                                                </TableRowActionItem>
+                                                            </div>
+                                                        )}
+                                                    />
+                                                }
+                                                relation={relation}
+                                                identity={identity}
+                                                organization={activeOrganization}
+                                            />
+                                        </StateNavLink>
+                                    ))}
+                                </tbody>
+                            </table>
+                        </TableTopScroller>
+                    </div>
+                </div>
+
+                {relations.meta.total > 0 && (
+                    <div className="card-section">
+                        <Paginator
+                            meta={relations.meta}
+                            filters={filterValues}
+                            updateFilters={filterUpdate}
+                            perPageKey={paginatorKey}
+                        />
+                    </div>
+                )}
+            </LoaderTableCard>
+        </div>
+    );
+}
diff --git a/react/src/dashboard/components/pages/identitities-show/elements/ProfileRelationsTableRowItem.tsx b/react/src/dashboard/components/pages/identitities-show/elements/ProfileRelationsTableRowItem.tsx
new file mode 100644
index 000000000..09da0d170
--- /dev/null
+++ b/react/src/dashboard/components/pages/identitities-show/elements/ProfileRelationsTableRowItem.tsx
@@ -0,0 +1,35 @@
+import React, { Fragment, ReactNode, useMemo } from 'react';
+import TableEmptyValue from '../../../elements/table-empty-value/TableEmptyValue';
+import Organization from '../../../../props/models/Organization';
+import SponsorProfileRelation from '../../../../props/models/Sponsor/SponsorProfileRelation';
+import SponsorIdentity from '../../../../props/models/Sponsor/SponsorIdentity';
+
+export default function ProfileRelationsTableRowItem({
+    actions = null,
+    relation,
+    identity,
+    organization,
+}: {
+    actions?: ReactNode | ReactNode[];
+    relation: SponsorProfileRelation;
+    identity: SponsorIdentity;
+    organization: Organization;
+}) {
+    const relatedIdentity = useMemo(() => {
+        return relation?.identity_id === identity?.id ? relation.related_identity : relation.identity;
+    }, [relation, identity]);
+
+    return (
+        <Fragment>
+            <td>{relatedIdentity?.id}</td>
+            <td>{relation?.type_locale || <TableEmptyValue />}</td>
+            <td>{relation?.subtype_locale || <TableEmptyValue />}</td>
+            <td>{relation?.living_together_locale || <TableEmptyValue />}</td>
+            <td>{relatedIdentity?.records?.given_name?.[0]?.value_locale || <TableEmptyValue />}</td>
+            <td>{relatedIdentity?.records?.family_name?.[0]?.value_locale || <TableEmptyValue />}</td>
+            <td>{relatedIdentity?.email || <TableEmptyValue />}</td>
+            {organization.bsn_enabled && <td>{relatedIdentity?.bsn || <TableEmptyValue />}</td>}
+            <td className={'table-td-actions text-right'}>{actions}</td>
+        </Fragment>
+    );
+}
diff --git a/react/src/dashboard/components/pages/identitities-show/hooks/useEditProfileRecords.tsx b/react/src/dashboard/components/pages/identitities-show/hooks/useEditProfileRecords.tsx
new file mode 100644
index 000000000..3fed90c69
--- /dev/null
+++ b/react/src/dashboard/components/pages/identitities-show/hooks/useEditProfileRecords.tsx
@@ -0,0 +1,38 @@
+import React, { useCallback } from 'react';
+import SponsorIdentity, { ProfileRecordType } from '../../../../props/models/Sponsor/SponsorIdentity';
+import ModalEditProfileRecords, { GroupType } from '../modals/ModalEditProfileRecords';
+import useOpenModal from '../../../../hooks/useOpenModal';
+import RecordType from '../../../../props/models/RecordType';
+import Organization from '../../../../props/models/Organization';
+
+export default function useEditProfileRecords(
+    activeOrganization: Organization,
+    recordTypes: Array<RecordType & { key: ProfileRecordType }>,
+) {
+    const openModal = useOpenModal();
+
+    return useCallback(
+        (
+            identity: SponsorIdentity,
+            title: string,
+            group: GroupType,
+            onDone?: () => void,
+            disabledFields: Array<{ label: string; value: string; key: string }> = [],
+        ) => {
+            openModal((modal) => (
+                <ModalEditProfileRecords
+                    modal={modal}
+                    title={title}
+                    disabledFields={disabledFields}
+                    onDone={onDone}
+                    identity={identity}
+                    group={group}
+                    recordTypes={recordTypes}
+                    organization={activeOrganization}
+                    bodyOverflowVisible={false}
+                />
+            ));
+        },
+        [openModal, activeOrganization, recordTypes],
+    );
+}
diff --git a/react/src/dashboard/components/pages/identitities-show/hooks/useIdentityRelationDelete.tsx b/react/src/dashboard/components/pages/identitities-show/hooks/useIdentityRelationDelete.tsx
new file mode 100644
index 000000000..c5fd4a468
--- /dev/null
+++ b/react/src/dashboard/components/pages/identitities-show/hooks/useIdentityRelationDelete.tsx
@@ -0,0 +1,52 @@
+import React, { useCallback } from 'react';
+import useOpenModal from '../../../../hooks/useOpenModal';
+import ModalDangerZone from '../../../modals/ModalDangerZone';
+import useSetProgress from '../../../../hooks/useSetProgress';
+import usePushApiError from '../../../../hooks/usePushApiError';
+import Organization from '../../../../props/models/Organization';
+import useSponsorIdentitiesService from '../../../../services/SponsorIdentitesService';
+import SponsorProfileRelation from '../../../../props/models/Sponsor/SponsorProfileRelation';
+
+export default function useIdentityRelationDelete(organization: Organization) {
+    const openModal = useOpenModal();
+    const setProgress = useSetProgress();
+    const pushApiError = usePushApiError();
+
+    const identityService = useSponsorIdentitiesService();
+
+    return useCallback(
+        (relation: SponsorProfileRelation, onDelete?: () => void) => {
+            openModal((modal) => (
+                <ModalDangerZone
+                    modal={modal}
+                    title={'Delete relation'}
+                    description={'Are you sure you want to delete this relation?'}
+                    buttonCancel={{
+                        text: 'Cancel',
+                        onClick: () => {
+                            modal.close();
+                        },
+                    }}
+                    buttonSubmit={{
+                        text: 'Delete',
+                        onClick: () => {
+                            modal.close();
+                            setProgress(0);
+
+                            identityService
+                                .deleteRelation(organization.id, relation.identity_id, relation.id)
+                                .then(() => {
+                                    onDelete?.();
+                                })
+                                .catch(pushApiError)
+                                .finally(() => {
+                                    setProgress(100);
+                                });
+                        },
+                    }}
+                />
+            ));
+        },
+        [openModal, setProgress, identityService, organization.id, pushApiError],
+    );
+}
diff --git a/react/src/dashboard/components/pages/identitities-show/hooks/useIdentityRelationEdit.tsx b/react/src/dashboard/components/pages/identitities-show/hooks/useIdentityRelationEdit.tsx
new file mode 100644
index 000000000..d156d9215
--- /dev/null
+++ b/react/src/dashboard/components/pages/identitities-show/hooks/useIdentityRelationEdit.tsx
@@ -0,0 +1,61 @@
+import React, { useCallback } from 'react';
+import useOpenModal from '../../../../hooks/useOpenModal';
+import Organization from '../../../../props/models/Organization';
+import SponsorIdentity from '../../../../props/models/Sponsor/SponsorIdentity';
+import ModalSelectOrMakeSponsorIdentity from '../../households/modals/ModalSelectOrMakeSponsorIdentity';
+import ModalAddProfileRelation from '../modals/ModalAddProfileRelation';
+import SponsorProfileRelation from '../../../../props/models/Sponsor/SponsorProfileRelation';
+
+export default function useIdentityRelationEdit(organization: Organization) {
+    const openModal = useOpenModal();
+
+    const editIdentityRelation = useCallback(
+        (
+            identity: SponsorIdentity,
+            relatedIdentity: SponsorIdentity,
+            identityRelation: SponsorProfileRelation,
+            onDone: () => void,
+        ) => {
+            openModal((modal) => (
+                <ModalAddProfileRelation
+                    modal={modal}
+                    identity={identity}
+                    relatedIdentity={relatedIdentity}
+                    identityRelation={identityRelation}
+                    organization={organization}
+                    onDone={onDone}
+                />
+            ));
+        },
+        [openModal, organization],
+    );
+
+    const selectIdentity = useCallback(
+        (identity: SponsorIdentity, onDone: () => void) => {
+            openModal((modal) => (
+                <ModalSelectOrMakeSponsorIdentity
+                    modal={modal}
+                    onDone={(identities) => {
+                        modal.close();
+                        editIdentityRelation(identity, identities[0], null, onDone);
+                    }}
+                    multiselect={false}
+                    organization={organization}
+                    excludeRelation={identity}
+                />
+            ));
+        },
+        [editIdentityRelation, openModal, organization],
+    );
+
+    return useCallback(
+        (identity: SponsorIdentity, relation: SponsorProfileRelation, onChange: () => void) => {
+            if (relation) {
+                return editIdentityRelation(identity, relation.related_identity, relation, onChange);
+            }
+
+            return selectIdentity(identity, onChange);
+        },
+        [editIdentityRelation, selectIdentity],
+    );
+}
diff --git a/react/src/dashboard/components/pages/identitities-show/hooks/useProfileRecordTypes.tsx b/react/src/dashboard/components/pages/identitities-show/hooks/useProfileRecordTypes.tsx
new file mode 100644
index 000000000..3c8c4252f
--- /dev/null
+++ b/react/src/dashboard/components/pages/identitities-show/hooks/useProfileRecordTypes.tsx
@@ -0,0 +1,36 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { ProfileRecords, ProfileRecordType } from '../../../../props/models/Sponsor/SponsorIdentity';
+import RecordType from '../../../../props/models/RecordType';
+import useSetProgress from '../../../../hooks/useSetProgress';
+import { useRecordTypeService } from '../../../../services/RecordTypeService';
+
+export default function useProfileRecordTypes() {
+    const setProgress = useSetProgress();
+    const recordTypeService = useRecordTypeService();
+
+    const [recordTypes, setRecordTypes] = useState<Array<RecordType & { key: ProfileRecordType }>>(null);
+
+    const recordTypesByKey = useMemo(() => {
+        return recordTypes?.reduce((map, recordType) => {
+            return { ...map, [recordType.key]: recordType };
+        }, {}) as ProfileRecords;
+    }, [recordTypes]);
+
+    const fetchRecordTypes = useCallback(() => {
+        setProgress(0);
+
+        recordTypeService
+            .list<RecordType & { key: ProfileRecordType }>()
+            .then((res) => setRecordTypes(res.data))
+            .finally(() => setProgress(100));
+    }, [recordTypeService, setProgress]);
+
+    useEffect(() => {
+        fetchRecordTypes();
+    }, [fetchRecordTypes]);
+
+    return {
+        recordTypes,
+        recordTypesByKey,
+    };
+}
diff --git a/react/src/dashboard/components/pages/identitities-show/modals/ModalAddProfileRelation.tsx b/react/src/dashboard/components/pages/identitities-show/modals/ModalAddProfileRelation.tsx
new file mode 100644
index 000000000..884f1e185
--- /dev/null
+++ b/react/src/dashboard/components/pages/identitities-show/modals/ModalAddProfileRelation.tsx
@@ -0,0 +1,294 @@
+import React, { Fragment, useMemo, useState } from 'react';
+import { ModalState } from '../../../../modules/modals/context/ModalContext';
+import useFormBuilder from '../../../../hooks/useFormBuilder';
+import useSetProgress from '../../../../hooks/useSetProgress';
+import usePushSuccess from '../../../../hooks/usePushSuccess';
+import usePushApiError from '../../../../hooks/usePushApiError';
+import Organization from '../../../../props/models/Organization';
+import Modal from '../../../modals/elements/Modal';
+import SponsorIdentity from '../../../../props/models/Sponsor/SponsorIdentity';
+import useSponsorIdentitiesService from '../../../../services/SponsorIdentitesService';
+import FormPane from '../../../elements/forms/elements/FormPane';
+import SelectControl from '../../../elements/select-control/SelectControl';
+import FormGroup from '../../../elements/forms/elements/FormGroup';
+import { ResponseError } from '../../../../props/ApiResponses';
+import IdentityRecordKeyValueWithHistory from '../elements/IdentityRecordKeyValueWithHistory';
+import CardBlockKeyValue from '../../../elements/card/blocks/CardBlockKeyValue';
+import useProfileRecordTypes from '../hooks/useProfileRecordTypes';
+import SponsorProfileRelation from '../../../../props/models/Sponsor/SponsorProfileRelation';
+
+export default function ModalAddProfileRelation({
+    modal,
+    onDone,
+    className,
+    organization,
+    identity,
+    relatedIdentity,
+    identityRelation,
+}: {
+    modal: ModalState;
+    onDone?: () => void;
+    className?: string;
+    organization: Organization;
+    identity: SponsorIdentity;
+    relatedIdentity: SponsorIdentity;
+    identityRelation: SponsorProfileRelation;
+}) {
+    const setProgress = useSetProgress();
+    const pushSuccess = usePushSuccess();
+    const pushApiError = usePushApiError();
+    const sponsorIdentitiesService = useSponsorIdentitiesService();
+
+    const otherEmails = useMemo(() => {
+        return identity?.email_verified ? identity?.email_verified : [];
+    }, [identity?.email_verified]);
+
+    const { recordTypesByKey } = useProfileRecordTypes();
+
+    const [types] = useState([
+        { value: 'partner', name: 'Partner' },
+        { value: 'parent_child', name: 'Ouder-kind' },
+        { value: 'housemate', name: 'Medebewoner' },
+    ]);
+
+    const [subTypes] = useState({
+        partner: [
+            { value: 'partner_married', name: 'Partner gehuwd' },
+            { value: 'partner_registered', name: 'Partner geregistreerd' },
+            { value: 'partner_unmarried', name: 'Partner ongehuwd' },
+            { value: 'partner_other', name: 'Overige familierelatie (partnerschap)' },
+        ],
+        parent_child: [
+            { value: 'parent_child', name: 'Ouder - Kind' },
+            { value: 'foster_parent_foster_child', name: 'Pleegouder - Pleegkind' },
+        ],
+        housemate: [
+            { value: 'parent', name: 'Ouder' },
+            { value: 'in_law', name: 'Schoonouder' },
+            { value: 'grandparent_or_sibling', name: 'Opa, oma, broer of zus' },
+            { value: 'room_renter', name: 'Iemand die een kamer bij mij huurt' },
+            { value: 'room_landlord', name: 'Iemand waarvan ik een kamer huur' },
+            { value: 'boarder_or_host', name: 'Kostganger of kostgever' },
+            { value: 'other', name: 'Anders' },
+        ],
+    });
+
+    const [livingTogether] = useState([
+        { value: 'true', name: 'Ja' },
+        { value: 'false', name: 'Nee' },
+    ]);
+
+    const form = useFormBuilder<{
+        type: string;
+        subtype: string;
+        living_together: string;
+        related_identity_id?: number;
+    }>(
+        identityRelation
+            ? {
+                  type: identityRelation.type,
+                  subtype: identityRelation.subtype,
+                  living_together: identityRelation.living_together ? 'true' : 'false',
+              }
+            : {
+                  type: 'partner',
+                  subtype: 'partner_married',
+                  living_together: 'false',
+                  related_identity_id: relatedIdentity?.id,
+              },
+        (values) => {
+            const data = { ...values, living_together: values.living_together === 'true' };
+
+            const promise = identityRelation
+                ? sponsorIdentitiesService.updateRelation(organization.id, identity.id, identityRelation.id, data)
+                : sponsorIdentitiesService.storeRelation(organization.id, identity.id, data);
+
+            promise
+                .then(() => {
+                    onDone?.();
+                    modal.close();
+                    pushSuccess(
+                        'Gelukt!',
+                        identityRelation
+                            ? 'De relatie is succesvol bijgewerkt.'
+                            : 'De relatie is succesvol toegevoegd.',
+                    );
+                })
+                .catch((err: ResponseError) => {
+                    form.setErrors(err.data?.errors || {});
+                    pushApiError(err);
+                })
+                .finally(() => {
+                    setProgress(100);
+                    form.setIsLocked(false);
+                });
+        },
+    );
+
+    return (
+        <Modal
+            title={identityRelation ? 'Edit relationship' : 'Add relationship'}
+            className={className}
+            dusk="modalHouseholds"
+            size={'lg'}
+            onSubmit={form.submit}
+            modal={modal}
+            footer={
+                <div className={'button-group flex-space-between'}>
+                    <button type="button" className="button button-default" onClick={modal.close}>
+                        Sluiten
+                    </button>
+
+                    <button type="submit" className="button button-primary">
+                        Bevestigen
+                    </button>
+                </div>
+            }
+            body={
+                <div className={'modal-body'}>
+                    <div className="modal-section">
+                        <div className="flex flex-gap flex-vertical">
+                            {!identityRelation && (
+                                <FormPane title={'Selected person details'}>
+                                    <CardBlockKeyValue
+                                        size={'md'}
+                                        items={[
+                                            {
+                                                label: recordTypesByKey?.given_name?.name,
+                                                value: (
+                                                    <IdentityRecordKeyValueWithHistory
+                                                        records={identity.records.given_name}
+                                                    />
+                                                ),
+                                            },
+                                            {
+                                                label: recordTypesByKey?.family_name?.name,
+                                                value: (
+                                                    <IdentityRecordKeyValueWithHistory
+                                                        records={identity.records.family_name}
+                                                    />
+                                                ),
+                                            },
+                                            {
+                                                label: recordTypesByKey?.birth_date?.name,
+                                                value: (
+                                                    <IdentityRecordKeyValueWithHistory
+                                                        records={identity.records.birth_date}
+                                                    />
+                                                ),
+                                            },
+                                            {
+                                                label: recordTypesByKey?.gender?.name,
+                                                value: (
+                                                    <IdentityRecordKeyValueWithHistory
+                                                        records={identity.records.gender}
+                                                    />
+                                                ),
+                                            },
+                                            {
+                                                label: recordTypesByKey?.marital_status?.name,
+                                                value: (
+                                                    <IdentityRecordKeyValueWithHistory
+                                                        records={identity.records.marital_status}
+                                                    />
+                                                ),
+                                            },
+                                            ...(organization.bsn_enabled
+                                                ? [{ label: 'BSN', value: identity?.bsn }]
+                                                : []),
+                                            {
+                                                label: recordTypesByKey?.client_number?.name,
+                                                value: (
+                                                    <IdentityRecordKeyValueWithHistory
+                                                        records={identity.records.client_number}
+                                                    />
+                                                ),
+                                            },
+                                            { label: 'Hoofd e-mailadres', value: identity.email },
+                                            ...otherEmails.map((email, index) => ({
+                                                label: `Extra e-mailadres ${index + 1}`,
+                                                value: email,
+                                            })),
+                                            {
+                                                label: recordTypesByKey?.telephone?.name,
+                                                value: (
+                                                    <IdentityRecordKeyValueWithHistory
+                                                        records={identity.records.telephone}
+                                                    />
+                                                ),
+                                            },
+                                            {
+                                                label: recordTypesByKey?.mobile?.name,
+                                                value: (
+                                                    <IdentityRecordKeyValueWithHistory
+                                                        records={identity.records.mobile}
+                                                    />
+                                                ),
+                                            },
+                                        ]}
+                                    />
+                                </FormPane>
+                            )}
+
+                            <FormPane title={'Relationtype'}>
+                                <FormGroup
+                                    label={'Relationtype'}
+                                    error={form.errors?.type}
+                                    info={<Fragment>Selecteer de relatie tussen de twee personen.</Fragment>}
+                                    input={(id) => (
+                                        <SelectControl
+                                            id={id}
+                                            value={form.values.type || ''}
+                                            propKey={'value'}
+                                            propValue={'name'}
+                                            options={types}
+                                            multiline={true}
+                                            onChange={(value: string) => {
+                                                form.update({ type: value, subtype: subTypes[value][0]?.value || '' });
+                                            }}
+                                        />
+                                    )}
+                                />
+
+                                {subTypes[form.values.type]?.length > 0 && (
+                                    <FormGroup
+                                        label={'Subrelationtype'}
+                                        error={form.errors?.subtype}
+                                        info={<Fragment>Selecteer de subrelatie tussen de twee personen.</Fragment>}
+                                        input={(id) => (
+                                            <SelectControl
+                                                id={id}
+                                                value={form.values.subtype || ''}
+                                                propKey={'value'}
+                                                propValue={'name'}
+                                                options={subTypes[form.values.type || '']}
+                                                multiline={true}
+                                                onChange={(value: string) => form.update({ subtype: value })}
+                                            />
+                                        )}
+                                    />
+                                )}
+                                <FormGroup
+                                    label={'Living together'}
+                                    error={form.errors?.living_together}
+                                    info={<Fragment>Selecteer of de twee personen leven samen.</Fragment>}
+                                    input={(id) => (
+                                        <SelectControl
+                                            id={id}
+                                            value={form.values.living_together || ''}
+                                            propKey={'value'}
+                                            propValue={'name'}
+                                            options={livingTogether}
+                                            multiline={true}
+                                            onChange={(value: string) => form.update({ living_together: value })}
+                                        />
+                                    )}
+                                />
+                            </FormPane>
+                        </div>
+                    </div>
+                </div>
+            }
+        />
+    );
+}
diff --git a/react/src/dashboard/components/pages/identitities-show/modals/ModalEditProfileRecords.tsx b/react/src/dashboard/components/pages/identitities-show/modals/ModalEditProfileRecords.tsx
index 1fd9ba28b..f657138f1 100644
--- a/react/src/dashboard/components/pages/identitities-show/modals/ModalEditProfileRecords.tsx
+++ b/react/src/dashboard/components/pages/identitities-show/modals/ModalEditProfileRecords.tsx
@@ -1,4 +1,4 @@
-import React, { Fragment, useCallback } from 'react';
+import React, { Fragment, useMemo } from 'react';
 import { ModalState } from '../../../../modules/modals/context/ModalContext';
 import useFormBuilder from '../../../../hooks/useFormBuilder';
 import Organization from '../../../../props/models/Organization';
@@ -6,22 +6,25 @@ import useSetProgress from '../../../../hooks/useSetProgress';
 import useSponsorIdentitiesService from '../../../../services/SponsorIdentitesService';
 import usePushApiError from '../../../../hooks/usePushApiError';
 import { ResponseError } from '../../../../props/ApiResponses';
-import SponsorIdentity, { ProfileRecordTypes } from '../../../../props/models/Sponsor/SponsorIdentity';
+import SponsorIdentity, { ProfileRecord, ProfileRecordType } from '../../../../props/models/Sponsor/SponsorIdentity';
 import Modal from '../../../modals/elements/Modal';
 import FormGroupInfo from '../../../elements/forms/elements/FormGroupInfo';
 import FormGroup from '../../../elements/forms/elements/FormGroup';
 import RecordType from '../../../../props/models/RecordType';
-import DatePickerControl from '../../../elements/forms/controls/DatePickerControl';
-import { dateFormat, dateParse } from '../../../../helpers/dates';
 import useTranslate from '../../../../hooks/useTranslate';
-import SelectControl from '../../../elements/select-control/SelectControl';
-import { differenceInYears } from 'date-fns';
+import FormPane from '../../../elements/forms/elements/FormPane';
+import ProfileRecordsPersonal from './elements/ProfileRecordsPersonal';
+import ProfileRecordsHouse from './elements/ProfileRecordsHouse';
+import ProfileRecordsContacts from './elements/ProfileRecordsContacts';
+import ProfileRecordsAddress from './elements/ProfileRecordsAddress';
+
+export type GroupType = 'personal' | 'house' | 'contacts' | 'address';
 
 export default function ModalEditProfileRecords({
     modal,
     title,
     onDone,
-    values,
+    group,
     identity,
     recordTypes,
     organization,
@@ -31,9 +34,9 @@ export default function ModalEditProfileRecords({
     modal: ModalState;
     title: string;
     onDone: () => void;
-    values: { [key in ProfileRecordTypes]: string };
-    identity: SponsorIdentity;
-    recordTypes: Array<RecordType & { key: ProfileRecordTypes }>;
+    group: GroupType;
+    identity?: SponsorIdentity;
+    recordTypes: Array<RecordType & { key: ProfileRecordType }>;
     organization: Organization;
     disabledFields?: Array<{ label: string; value: string; key: string }>;
     bodyOverflowVisible?: boolean;
@@ -41,21 +44,86 @@ export default function ModalEditProfileRecords({
     const translate = useTranslate();
     const setProgress = useSetProgress();
     const sponsorIdentitiesService = useSponsorIdentitiesService();
-    const types = recordTypes.map((type) => type.key.toString());
 
     const pushApiError = usePushApiError();
 
-    const form = useFormBuilder<{ [key in ProfileRecordTypes]: string }>(
-        Object.keys(values).reduce((list, key) => {
-            if (types.includes(key)) {
-                return { ...list, [key]: values[key] };
+    const recordsByKey = useMemo(() => {
+        return Object.keys(identity?.records || {})?.reduce((map, key) => {
+            const record: ProfileRecord[] = identity?.records[key];
+
+            return { ...map, [key]: record[0]?.value };
+        }, {}) as { [key in ProfileRecordType]: string };
+    }, [identity]);
+
+    const recordKeysByGroup = useMemo((): ProfileRecordType[] => {
+        if (group === 'personal') {
+            return ['given_name', 'family_name', 'birth_date', 'gender', 'marital_status', 'client_number'];
+        }
+
+        if (group === 'house') {
+            return ['house_composition', 'living_arrangement'];
+        }
+
+        if (group == 'contacts') {
+            return ['telephone', 'mobile'];
+        }
+
+        if (group == 'address') {
+            return [
+                'city',
+                'street',
+                'house_number',
+                'house_number_addition',
+                'postal_code',
+                'neighborhood_name',
+                'municipality_name',
+            ];
+        }
+
+        return [];
+    }, [group]);
+
+    const recordsByGroup = useMemo(() => {
+        return recordKeysByGroup?.map((filter) => {
+            return recordTypes?.find((item) => filter === item.key);
+        });
+    }, [recordKeysByGroup, recordTypes]);
+
+    const recordsByGroupByKey = useMemo(() => {
+        return recordsByGroup.reduce((map, record) => {
+            return { ...map, [record.key]: record };
+        }, {});
+    }, [recordsByGroup]);
+
+    const form = useFormBuilder<{ [key in ProfileRecordType]: string }>(
+        Object.keys(recordsByKey).reduce((list, key: ProfileRecordType) => {
+            if (recordKeysByGroup.includes(key)) {
+                return { ...list, [key]: recordsByKey[key] };
             }
 
             return list;
         }, {}) as {
-            [key in ProfileRecordTypes]: string;
+            [key in ProfileRecordType]: string;
         },
         (values) => {
+            if (!identity) {
+                sponsorIdentitiesService
+                    .store(organization?.id, values)
+                    .then(() => {
+                        onDone?.();
+                        modal.close();
+                    })
+                    .catch((res: ResponseError) => {
+                        form.setErrors(res.data.errors);
+                        pushApiError(res);
+                    })
+                    .finally(() => {
+                        setProgress(100);
+                        form.setIsLocked(false);
+                    });
+                return;
+            }
+
             sponsorIdentitiesService
                 .update(organization.id, identity.id, values)
                 .then(() => {
@@ -73,10 +141,6 @@ export default function ModalEditProfileRecords({
         },
     );
 
-    const calculatedAge = useCallback((value: string) => {
-        return value ? Math.max(differenceInYears(new Date(), dateParse(value)), 0) : null;
-    }, []);
-
     const { submit: formSubmit } = form;
 
     return (
@@ -95,94 +159,36 @@ export default function ModalEditProfileRecords({
                     </button>
                 </Fragment>
             }>
-            {disabledFields?.map((field, index) => {
-                return (
-                    <FormGroup
-                        key={index}
-                        label={field.label}
-                        input={(id) => (
-                            <FormGroupInfo info={translate('identities.record_info.' + field.key)}>
-                                <input
-                                    id={id}
-                                    type={'text'}
-                                    className="form-control"
-                                    disabled={true}
-                                    value={field.value || '---'}
-                                />
-                            </FormGroupInfo>
-                        )}
-                    />
-                );
-            })}
-            {recordTypes?.map((recordType) => {
-                return (
-                    <Fragment key={recordType.key}>
-                        <FormGroup
-                            label={recordType.name}
-                            error={form.errors?.[recordType.key]}
-                            input={(id) => (
-                                <FormGroupInfo info={translate('identities.record_info.' + recordType.key)}>
-                                    {recordType.key === 'birth_date' ? (
-                                        <DatePickerControl
-                                            value={dateParse(form.values[recordType.key] || '')}
-                                            placeholder={recordType.name}
-                                            onChange={(date) => form.update({ [recordType.key]: dateFormat(date) })}
-                                        />
-                                    ) : (
-                                        <Fragment>
-                                            {recordType?.type === 'select' ? (
-                                                <SelectControl
-                                                    id={id}
-                                                    value={form.values[recordType.key] || ''}
-                                                    propKey={'value'}
-                                                    propValue={'name'}
-                                                    options={[
-                                                        { value: '', name: 'Selecteer...' },
-                                                        ...recordType.options,
-                                                    ]}
-                                                    multiline={true}
-                                                    placeholder={recordType.name}
-                                                    onChange={(value: string) =>
-                                                        form.update({ [recordType.key]: value })
-                                                    }
-                                                />
-                                            ) : (
-                                                <input
-                                                    id={id}
-                                                    type={'text'}
-                                                    className="form-control"
-                                                    value={form.values[recordType.key] || ''}
-                                                    placeholder={recordType.name}
-                                                    onChange={(e) => form.update({ [recordType.key]: e.target.value })}
-                                                />
-                                            )}
-                                        </Fragment>
+            <div className="flex flex-vertical flex-gap">
+                {group === 'personal' && <ProfileRecordsPersonal form={form} recordTypes={recordsByGroupByKey} />}
+                {group === 'house' && <ProfileRecordsHouse form={form} recordTypes={recordsByGroupByKey} />}
+                {group === 'contacts' && <ProfileRecordsContacts form={form} recordTypes={recordsByGroupByKey} />}
+                {group === 'address' && <ProfileRecordsAddress form={form} recordTypes={recordsByGroupByKey} />}
+
+                {disabledFields?.length > 0 && (
+                    <FormPane title={'Non editable'}>
+                        {disabledFields?.map((field, index) => {
+                            return (
+                                <FormGroup
+                                    key={index}
+                                    label={field.label}
+                                    input={(id) => (
+                                        <FormGroupInfo info={translate('identities.record_info.' + field.key)}>
+                                            <input
+                                                id={id}
+                                                type={'text'}
+                                                className="form-control"
+                                                disabled={true}
+                                                value={field.value || '---'}
+                                            />
+                                        </FormGroupInfo>
                                     )}
-                                </FormGroupInfo>
-                            )}
-                        />
-
-                        {recordType?.key === 'birth_date' && (
-                            <FormGroup
-                                label={'Leeftijd'}
-                                input={(id) => (
-                                    <FormGroupInfo info={translate('identities.record_info.age')}>
-                                        <input
-                                            id={id}
-                                            disabled={true}
-                                            type={'text'}
-                                            className="form-control"
-                                            value={calculatedAge(form.values.birth_date)?.toString() || ''}
-                                            placeholder={recordType.name}
-                                            onChange={(e) => form.update({ [recordType.key]: e.target.value })}
-                                        />
-                                    </FormGroupInfo>
-                                )}
-                            />
-                        )}
-                    </Fragment>
-                );
-            })}
+                                />
+                            );
+                        })}
+                    </FormPane>
+                )}
+            </div>
         </Modal>
     );
 }
diff --git a/react/src/dashboard/components/pages/identitities-show/modals/elements/ProfileRecordsAddress.tsx b/react/src/dashboard/components/pages/identitities-show/modals/elements/ProfileRecordsAddress.tsx
new file mode 100644
index 000000000..3e712a90a
--- /dev/null
+++ b/react/src/dashboard/components/pages/identitities-show/modals/elements/ProfileRecordsAddress.tsx
@@ -0,0 +1,48 @@
+import FormBuilder from '../../../../../types/FormBuilder';
+import React from 'react';
+import FormPane from '../../../../elements/forms/elements/FormPane';
+import RecordType from '../../../../../props/models/RecordType';
+import { ProfileRecordType } from '../../../../../props/models/Sponsor/SponsorIdentity';
+import ProfileRecordsField from './ProfileRecordsField';
+
+export default function ProfileRecordsAddress({
+    form,
+    recordTypes,
+}: {
+    form: FormBuilder<Partial<{ [key in ProfileRecordType]: string }>>;
+    recordTypes: Partial<{ [key in ProfileRecordType]: RecordType & { key: ProfileRecordType } }>;
+}) {
+    return (
+        <FormPane title={'Adresgegevens'}>
+            <div className="row">
+                <div className="col col-xs-12 col-sm-6">
+                    <ProfileRecordsField recordType={recordTypes.city} form={form} />
+                </div>
+                <div className="col col-xs-12 col-sm-6">
+                    <ProfileRecordsField recordType={recordTypes.street} form={form} />
+                </div>
+            </div>
+            <div className="row">
+                <div className="col col-xs-12 col-sm-6">
+                    <ProfileRecordsField recordType={recordTypes.house_number} form={form} />
+                </div>
+                <div className="col col-xs-12 col-sm-6">
+                    <ProfileRecordsField recordType={recordTypes.house_number_addition} form={form} />
+                </div>
+            </div>
+            <div className="row">
+                <div className="col col-xs-12 col-sm-6">
+                    <ProfileRecordsField recordType={recordTypes.postal_code} form={form} />
+                </div>
+                <div className="col col-xs-12 col-sm-6">
+                    <ProfileRecordsField recordType={recordTypes.neighborhood_name} form={form} />
+                </div>
+            </div>
+            <div className="row">
+                <div className="col col-xs-12 col-sm-12">
+                    <ProfileRecordsField recordType={recordTypes.municipality_name} form={form} />
+                </div>
+            </div>
+        </FormPane>
+    );
+}
diff --git a/react/src/dashboard/components/pages/identitities-show/modals/elements/ProfileRecordsContacts.tsx b/react/src/dashboard/components/pages/identitities-show/modals/elements/ProfileRecordsContacts.tsx
new file mode 100644
index 000000000..3e3a8174f
--- /dev/null
+++ b/react/src/dashboard/components/pages/identitities-show/modals/elements/ProfileRecordsContacts.tsx
@@ -0,0 +1,21 @@
+import FormBuilder from '../../../../../types/FormBuilder';
+import React from 'react';
+import FormPane from '../../../../elements/forms/elements/FormPane';
+import RecordType from '../../../../../props/models/RecordType';
+import { ProfileRecordType } from '../../../../../props/models/Sponsor/SponsorIdentity';
+import ProfileRecordsField from './ProfileRecordsField';
+
+export default function ProfileRecordsContacts({
+    form,
+    recordTypes,
+}: {
+    form: FormBuilder<Partial<{ [key in ProfileRecordType]: string }>>;
+    recordTypes: Partial<{ [key in ProfileRecordType]: RecordType & { key: ProfileRecordType } }>;
+}) {
+    return (
+        <FormPane title={'Accountgegevens'}>
+            <ProfileRecordsField recordType={recordTypes.telephone} form={form} />
+            <ProfileRecordsField recordType={recordTypes.mobile} form={form} />
+        </FormPane>
+    );
+}
diff --git a/react/src/dashboard/components/pages/identitities-show/modals/elements/ProfileRecordsField.tsx b/react/src/dashboard/components/pages/identitities-show/modals/elements/ProfileRecordsField.tsx
new file mode 100644
index 000000000..b083d69ec
--- /dev/null
+++ b/react/src/dashboard/components/pages/identitities-show/modals/elements/ProfileRecordsField.tsx
@@ -0,0 +1,60 @@
+import FormBuilder from '../../../../../types/FormBuilder';
+import React, { Fragment } from 'react';
+import FormGroup from '../../../../elements/forms/elements/FormGroup';
+import DatePickerControl from '../../../../elements/forms/controls/DatePickerControl';
+import { dateFormat, dateParse } from '../../../../../helpers/dates';
+import SelectControl from '../../../../elements/select-control/SelectControl';
+import RecordType from '../../../../../props/models/RecordType';
+import { ProfileRecordType } from '../../../../../props/models/Sponsor/SponsorIdentity';
+import useTranslate from '../../../../../hooks/useTranslate';
+
+export default function ProfileRecordsField({
+    recordType,
+    form,
+}: {
+    recordType: Partial<RecordType> & { key: ProfileRecordType };
+    form: FormBuilder<Partial<{ [key in ProfileRecordType]: string }>>;
+}) {
+    const translate = useTranslate();
+
+    return (
+        <FormGroup
+            label={recordType.name}
+            error={form.errors?.[recordType.key]}
+            info={translate('identities.record_info.' + recordType.key)}
+            input={(id) =>
+                recordType.key === 'birth_date' ? (
+                    <DatePickerControl
+                        value={dateParse(form.values[recordType.key] || '')}
+                        placeholder={recordType.name}
+                        onChange={(date) => form.update({ [recordType.key]: dateFormat(date) })}
+                    />
+                ) : (
+                    <Fragment>
+                        {recordType?.type === 'select' ? (
+                            <SelectControl
+                                id={id}
+                                value={form.values[recordType.key] || ''}
+                                propKey={'value'}
+                                propValue={'name'}
+                                options={[{ value: '', name: 'Selecteer...' }, ...recordType.options]}
+                                multiline={true}
+                                placeholder={recordType.name}
+                                onChange={(value: string) => form.update({ [recordType.key]: value })}
+                            />
+                        ) : (
+                            <input
+                                id={id}
+                                type={'text'}
+                                className="form-control"
+                                value={form.values[recordType.key] || ''}
+                                placeholder={recordType.name}
+                                onChange={(e) => form.update({ [recordType.key]: e.target.value })}
+                            />
+                        )}
+                    </Fragment>
+                )
+            }
+        />
+    );
+}
diff --git a/react/src/dashboard/components/pages/identitities-show/modals/elements/ProfileRecordsHouse.tsx b/react/src/dashboard/components/pages/identitities-show/modals/elements/ProfileRecordsHouse.tsx
new file mode 100644
index 000000000..fcb551d57
--- /dev/null
+++ b/react/src/dashboard/components/pages/identitities-show/modals/elements/ProfileRecordsHouse.tsx
@@ -0,0 +1,21 @@
+import FormBuilder from '../../../../../types/FormBuilder';
+import React from 'react';
+import FormPane from '../../../../elements/forms/elements/FormPane';
+import RecordType from '../../../../../props/models/RecordType';
+import { ProfileRecordType } from '../../../../../props/models/Sponsor/SponsorIdentity';
+import ProfileRecordsField from './ProfileRecordsField';
+
+export default function ProfileRecordsHouse({
+    form,
+    recordTypes,
+}: {
+    form: FormBuilder<Partial<{ [key in ProfileRecordType]: string }>>;
+    recordTypes: Partial<{ [key in ProfileRecordType]: RecordType & { key: ProfileRecordType } }>;
+}) {
+    return (
+        <FormPane title={'Huishouden'}>
+            <ProfileRecordsField recordType={recordTypes.house_composition} form={form} />
+            <ProfileRecordsField recordType={recordTypes.living_arrangement} form={form} />
+        </FormPane>
+    );
+}
diff --git a/react/src/dashboard/components/pages/identitities-show/modals/elements/ProfileRecordsPersonal.tsx b/react/src/dashboard/components/pages/identitities-show/modals/elements/ProfileRecordsPersonal.tsx
new file mode 100644
index 000000000..5c14adf7c
--- /dev/null
+++ b/react/src/dashboard/components/pages/identitities-show/modals/elements/ProfileRecordsPersonal.tsx
@@ -0,0 +1,74 @@
+import FormBuilder from '../../../../../types/FormBuilder';
+import React, { useCallback } from 'react';
+import FormGroup from '../../../../elements/forms/elements/FormGroup';
+import FormGroupInfo from '../../../../elements/forms/elements/FormGroupInfo';
+import { dateParse } from '../../../../../helpers/dates';
+import FormPane from '../../../../elements/forms/elements/FormPane';
+import RecordType from '../../../../../props/models/RecordType';
+import { ProfileRecordType } from '../../../../../props/models/Sponsor/SponsorIdentity';
+import useTranslate from '../../../../../hooks/useTranslate';
+import { differenceInYears } from 'date-fns';
+import ProfileRecordsField from './ProfileRecordsField';
+
+export default function ProfileRecordsPersonal({
+    form,
+    recordTypes,
+}: {
+    form: FormBuilder<Partial<{ [key in ProfileRecordType]: string }>>;
+    recordTypes: Partial<{ [key in ProfileRecordType]: RecordType & { key: ProfileRecordType } }>;
+}) {
+    const translate = useTranslate();
+
+    const calculatedAge = useCallback((value: string) => {
+        return value ? Math.max(differenceInYears(new Date(), dateParse(value)), 0) : null;
+    }, []);
+
+    return (
+        <FormPane title={'Persoonsgegevens'}>
+            <div className="row">
+                <div className="col col-xs-12 col-sm-6">
+                    <ProfileRecordsField recordType={recordTypes.given_name} form={form} />
+                </div>
+                <div className="col col-xs-12 col-sm-6">
+                    <ProfileRecordsField recordType={recordTypes.family_name} form={form} />
+                </div>
+            </div>
+            <div className="row">
+                <div className="col col-xs-12 col-sm-6">
+                    <ProfileRecordsField recordType={recordTypes.birth_date} form={form} />
+                </div>
+                <div className="col col-xs-12 col-sm-6">
+                    <FormGroup
+                        label={'Leeftijd'}
+                        input={(id) => (
+                            <FormGroupInfo info={translate('identities.record_info.age')}>
+                                <input
+                                    id={id}
+                                    disabled={true}
+                                    type={'text'}
+                                    className="form-control"
+                                    value={calculatedAge(form.values.birth_date)?.toString() || ''}
+                                    placeholder={recordTypes.birth_date.name}
+                                    onChange={(e) => form.update({ [recordTypes.birth_date.key]: e.target.value })}
+                                />
+                            </FormGroupInfo>
+                        )}
+                    />
+                </div>
+            </div>
+            <div className="row">
+                <div className="col col-xs-12 col-sm-6">
+                    <ProfileRecordsField recordType={recordTypes.gender} form={form} />
+                </div>
+                <div className="col col-xs-12 col-sm-6">
+                    <ProfileRecordsField recordType={recordTypes.marital_status} form={form} />
+                </div>
+            </div>
+            <div className="row">
+                <div className="col col-xs-12 col-sm-12">
+                    <ProfileRecordsField recordType={recordTypes.client_number} form={form} />
+                </div>
+            </div>
+        </FormPane>
+    );
+}
diff --git a/react/src/dashboard/components/pages/implementations-notifications-send/ImplementationsNotificationsSend.tsx b/react/src/dashboard/components/pages/implementations-notifications-send/ImplementationsNotificationsSend.tsx
index e552d5b37..029f9490d 100644
--- a/react/src/dashboard/components/pages/implementations-notifications-send/ImplementationsNotificationsSend.tsx
+++ b/react/src/dashboard/components/pages/implementations-notifications-send/ImplementationsNotificationsSend.tsx
@@ -26,6 +26,7 @@ import useFundIdentitiesExporter from '../../../services/exporters/useFundIdenti
 import useTranslate from '../../../hooks/useTranslate';
 import EmptyCard from '../../elements/empty-card/EmptyCard';
 import usePushApiError from '../../../hooks/usePushApiError';
+import { Permission } from '../../../props/models/Organization';
 import useConfigurableTable from '../vouchers/hooks/useConfigurableTable';
 import TableTopScroller from '../../elements/tables/TableTopScroller';
 import TableEmptyValue from '../../elements/table-empty-value/TableEmptyValue';
@@ -418,7 +419,7 @@ export default function ImplementationsNotificationsSend() {
                         <div className="card-header-filters">
                             <div className="block block-inline-filters">
                                 {targetGroup == 'identities' &&
-                                    hasPermission(activeOrganization, 'manage_vouchers') && (
+                                    hasPermission(activeOrganization, Permission.MANAGE_VOUCHERS) && (
                                         <div
                                             className="button button-primary button-sm"
                                             onClick={() => setShowIdentities(!showIdentities)}>
diff --git a/react/src/dashboard/components/pages/implementations-view/ImplementationsView.tsx b/react/src/dashboard/components/pages/implementations-view/ImplementationsView.tsx
index 010769b17..6f175b0d5 100644
--- a/react/src/dashboard/components/pages/implementations-view/ImplementationsView.tsx
+++ b/react/src/dashboard/components/pages/implementations-view/ImplementationsView.tsx
@@ -19,6 +19,7 @@ import TableEmptyValue from '../../elements/table-empty-value/TableEmptyValue';
 import TableTopScroller from '../../elements/tables/TableTopScroller';
 import TableRowActions from '../../elements/tables/TableRowActions';
 import usePushApiError from '../../../hooks/usePushApiError';
+import { Permission } from '../../../props/models/Organization';
 
 export default function ImplementationsView() {
     const { id } = useParams();
@@ -113,7 +114,7 @@ export default function ImplementationsView() {
 
                     <div className="card-section-actions">
                         {activeOrganization.allow_translations &&
-                            hasPermission(activeOrganization, 'manage_implementation') && (
+                            hasPermission(activeOrganization, Permission.MANAGE_IMPLEMENTATION) && (
                                 <StateNavLink
                                     name={'implementations-translations'}
                                     params={{ id: implementation.id, organizationId: implementation.organization_id }}
@@ -123,7 +124,7 @@ export default function ImplementationsView() {
                                 </StateNavLink>
                             )}
 
-                        {hasPermission(activeOrganization, 'manage_implementation') && (
+                        {hasPermission(activeOrganization, Permission.MANAGE_IMPLEMENTATION) && (
                             <StateNavLink
                                 name={'implementations-cookies'}
                                 params={{ id: implementation.id, organizationId: implementation.organization_id }}
@@ -133,7 +134,7 @@ export default function ImplementationsView() {
                             </StateNavLink>
                         )}
 
-                        {hasPermission(activeOrganization, 'manage_implementation') && (
+                        {hasPermission(activeOrganization, Permission.MANAGE_IMPLEMENTATION) && (
                             <StateNavLink
                                 name={'implementations-email'}
                                 params={{ id: implementation.id, organizationId: implementation.organization_id }}
@@ -143,7 +144,7 @@ export default function ImplementationsView() {
                             </StateNavLink>
                         )}
 
-                        {hasPermission(activeOrganization, 'manage_implementation') && (
+                        {hasPermission(activeOrganization, Permission.MANAGE_IMPLEMENTATION) && (
                             <StateNavLink
                                 name={'implementations-digid'}
                                 params={{ id: implementation.id, organizationId: implementation.organization_id }}
@@ -153,7 +154,7 @@ export default function ImplementationsView() {
                             </StateNavLink>
                         )}
 
-                        {hasPermission(activeOrganization, ['manage_implementation_cms']) && (
+                        {hasPermission(activeOrganization, Permission.MANAGE_IMPLEMENTATION_CMS) && (
                             <StateNavLink
                                 name={'implementations-cms'}
                                 params={{ id: implementation.id, organizationId: implementation.organization_id }}
@@ -240,7 +241,7 @@ export default function ImplementationsView() {
 
                                                                     {hasPermission(
                                                                         activeOrganization,
-                                                                        'manage_funds',
+                                                                        Permission.MANAGE_FUNDS,
                                                                     ) &&
                                                                         fund.key && (
                                                                             <StateNavLink
diff --git a/react/src/dashboard/components/pages/implementations/Implementations.tsx b/react/src/dashboard/components/pages/implementations/Implementations.tsx
index fd33eaa66..591f4780a 100644
--- a/react/src/dashboard/components/pages/implementations/Implementations.tsx
+++ b/react/src/dashboard/components/pages/implementations/Implementations.tsx
@@ -12,6 +12,7 @@ import Implementation from '../../../props/models/Implementation';
 import LoadingCard from '../../elements/loading-card/LoadingCard';
 import EmptyCard from '../../elements/empty-card/EmptyCard';
 import usePushApiError from '../../../hooks/usePushApiError';
+import { Permission } from '../../../props/models/Organization';
 
 export default function Implementations() {
     const assetUrl = useAssetUrl();
@@ -106,7 +107,7 @@ export default function Implementations() {
 
                     <div className="card-section-actions">
                         {activeOrganization.allow_translations &&
-                            hasPermission(activeOrganization, 'manage_implementation') && (
+                            hasPermission(activeOrganization, Permission.MANAGE_IMPLEMENTATION) && (
                                 <StateNavLink
                                     name={'implementations-translations'}
                                     params={{ id: implementation.id, organizationId: implementation.organization_id }}
@@ -116,7 +117,7 @@ export default function Implementations() {
                                 </StateNavLink>
                             )}
 
-                        {hasPermission(activeOrganization, 'manage_implementation') && (
+                        {hasPermission(activeOrganization, Permission.MANAGE_IMPLEMENTATION) && (
                             <StateNavLink
                                 name={'implementations-email'}
                                 params={{ id: implementation.id, organizationId: activeOrganization.id }}
@@ -126,7 +127,7 @@ export default function Implementations() {
                             </StateNavLink>
                         )}
 
-                        {hasPermission(activeOrganization, 'manage_implementation') && (
+                        {hasPermission(activeOrganization, Permission.MANAGE_IMPLEMENTATION) && (
                             <StateNavLink
                                 name={'implementations-digid'}
                                 params={{ id: implementation.id, organizationId: activeOrganization.id }}
@@ -136,7 +137,7 @@ export default function Implementations() {
                             </StateNavLink>
                         )}
 
-                        {hasPermission(activeOrganization, ['manage_implementation_cms']) && (
+                        {hasPermission(activeOrganization, Permission.MANAGE_IMPLEMENTATION_CMS) && (
                             <StateNavLink
                                 name={'implementations-cms'}
                                 params={{ id: implementation.id, organizationId: activeOrganization.id }}
diff --git a/react/src/dashboard/components/pages/offices/Offices.tsx b/react/src/dashboard/components/pages/offices/Offices.tsx
index 9a7ddf948..11aafca8e 100644
--- a/react/src/dashboard/components/pages/offices/Offices.tsx
+++ b/react/src/dashboard/components/pages/offices/Offices.tsx
@@ -18,6 +18,7 @@ import StateNavLink from '../../../modules/state_router/StateNavLink';
 import usePushSuccess from '../../../hooks/usePushSuccess';
 import useTranslate from '../../../hooks/useTranslate';
 import usePushApiError from '../../../hooks/usePushApiError';
+import { Permission } from '../../../props/models/Organization';
 
 interface OfficeLocal extends Office {
     scheduleByDay: { [key: string]: OfficeSchedule };
@@ -63,7 +64,7 @@ export default function Offices() {
     }, [setProgress, officeService, organization.id, filter.activeValues]);
 
     const confirmDelete = useCallback(
-        (office) => {
+        (office: Office) => {
             openModal((modal) => (
                 <ModalNotification
                     modal={modal}
@@ -136,7 +137,7 @@ export default function Offices() {
             <div className="card">
                 <div className="card-section">
                     <div className="card-section-actions">
-                        {hasPermission(organization, 'manage_organization') && (
+                        {hasPermission(organization, Permission.MANAGE_ORGANIZATION) && (
                             <NavLink
                                 id="edit_office"
                                 to={getStateRouteUrl('organizations-edit', { organizationId: organization.id })}
diff --git a/react/src/dashboard/components/pages/organizations-funds-edit/OrganizationsFundsEdit.tsx b/react/src/dashboard/components/pages/organizations-funds-edit/OrganizationsFundsEdit.tsx
index 8637fedb8..7e52785e3 100644
--- a/react/src/dashboard/components/pages/organizations-funds-edit/OrganizationsFundsEdit.tsx
+++ b/react/src/dashboard/components/pages/organizations-funds-edit/OrganizationsFundsEdit.tsx
@@ -43,6 +43,7 @@ import FaqEditor from '../../elements/faq-editor-funds/FaqEditor';
 import FormGroupInfo from '../../elements/forms/elements/FormGroupInfo';
 import usePushApiError from '../../../hooks/usePushApiError';
 import FormGroup from '../../elements/forms/elements/FormGroup';
+import { Permission } from '../../../props/models/Organization';
 
 export default function OrganizationsFundsEdit() {
     const { fundId } = useParams();
@@ -274,7 +275,7 @@ export default function OrganizationsFundsEdit() {
     const hasFundFormula = useMemo(() => {
         return (
             appConfigs?.organizations?.funds?.formula_products &&
-            hasPermission(activeOrganization, 'manage_funds') &&
+            hasPermission(activeOrganization, Permission.MANAGE_FUNDS) &&
             !form.values.external_page
         );
     }, [activeOrganization, appConfigs.organizations.funds.formula_products, form.values.external_page]);
@@ -732,7 +733,7 @@ export default function OrganizationsFundsEdit() {
                                         options={applicationMethods}
                                         disabled={
                                             (fund && fund.state != 'waiting') ||
-                                            !hasPermission(activeOrganization, 'manage_funds')
+                                            !hasPermission(activeOrganization, Permission.MANAGE_FUNDS)
                                         }
                                         onChange={(application_method: string) => {
                                             form.update({ application_method });
@@ -776,7 +777,7 @@ export default function OrganizationsFundsEdit() {
                                             allowSearch={false}
                                             value={form.values.criteria_label_requirement_show}
                                             options={shownCriteriaLabelDetails}
-                                            disabled={!hasPermission(activeOrganization, 'manage_funds')}
+                                            disabled={!hasPermission(activeOrganization, Permission.MANAGE_FUNDS)}
                                             onChange={(criteria_label_requirement_show: string) => {
                                                 form.update({ criteria_label_requirement_show });
                                             }}
@@ -945,7 +946,7 @@ export default function OrganizationsFundsEdit() {
                                     placeholder={translate('dd-MM-yyyy')}
                                     disabled={
                                         form.values.state != 'waiting' ||
-                                        !hasPermission(activeOrganization, 'manage_funds')
+                                        !hasPermission(activeOrganization, Permission.MANAGE_FUNDS)
                                     }
                                     onChange={(start_date: Date) => {
                                         form.update({ start_date: dateFormat(start_date) });
@@ -965,7 +966,7 @@ export default function OrganizationsFundsEdit() {
                                     placeholder={translate('dd-MM-yyyy')}
                                     disabled={
                                         form.values.state != 'waiting' ||
-                                        !hasPermission(activeOrganization, 'manage_funds')
+                                        !hasPermission(activeOrganization, Permission.MANAGE_FUNDS)
                                     }
                                     onChange={(end_date: Date) => {
                                         form.update({ end_date: dateFormat(end_date) });
@@ -997,7 +998,10 @@ export default function OrganizationsFundsEdit() {
                                                             placeholder="Selecteer aanbieding..."
                                                             options={productOptions?.[index] || []}
                                                             disabled={
-                                                                !hasPermission(activeOrganization, 'manage_funds')
+                                                                !hasPermission(
+                                                                    activeOrganization,
+                                                                    Permission.MANAGE_FUNDS,
+                                                                )
                                                             }
                                                             onChange={(product_id: number) => {
                                                                 updateFormFormulaProduct(
@@ -1020,7 +1024,10 @@ export default function OrganizationsFundsEdit() {
                                                             placeholder="Selecteer aanbieding..."
                                                             options={recordTypesMultiplier}
                                                             disabled={
-                                                                !hasPermission(activeOrganization, 'manage_funds')
+                                                                !hasPermission(
+                                                                    activeOrganization,
+                                                                    Permission.MANAGE_FUNDS,
+                                                                )
                                                             }
                                                             onChange={(record_type_key_multiplier: string) => {
                                                                 updateFormFormulaProduct(
@@ -1085,7 +1092,7 @@ export default function OrganizationsFundsEdit() {
                                     allowSearch={false}
                                     value={form.values.default_validator_employee_id}
                                     options={validators}
-                                    disabled={!hasPermission(activeOrganization, 'manage_funds')}
+                                    disabled={!hasPermission(activeOrganization, Permission.MANAGE_FUNDS)}
                                     onChange={(default_validator_employee_id: number) => {
                                         form.update({ default_validator_employee_id });
                                     }}
@@ -1099,7 +1106,7 @@ export default function OrganizationsFundsEdit() {
                                     <label className="form-label">Aanmeldingen</label>
                                     <CheckboxControl
                                         title={'Automatisch goedkeuren wanneer er een BSN-nummer vast staat.'}
-                                        disabled={!hasPermission(activeOrganization, 'manage_funds')}
+                                        disabled={!hasPermission(activeOrganization, Permission.MANAGE_FUNDS)}
                                         checked={form.values.auto_requests_validation}
                                         onChange={(e) => {
                                             form.update({ auto_requests_validation: e.target.checked });
@@ -1122,7 +1129,7 @@ export default function OrganizationsFundsEdit() {
                                     <FundConfigContactInfoEditor
                                         value={form.values}
                                         onChange={form.update}
-                                        disabled={!hasPermission(activeOrganization, 'manage_funds')}
+                                        disabled={!hasPermission(activeOrganization, Permission.MANAGE_FUNDS)}
                                     />
                                 </div>
                             </div>
@@ -1155,7 +1162,7 @@ export default function OrganizationsFundsEdit() {
                                             onChange={(e) => {
                                                 form.update({ notification_amount: e.target.value });
                                             }}
-                                            disabled={!hasPermission(activeOrganization, 'manage_funds')}
+                                            disabled={!hasPermission(activeOrganization, Permission.MANAGE_FUNDS)}
                                             placeholder={translate('funds_edit.labels.notification_amount')}
                                         />
                                     </FormGroupInfo>
diff --git a/react/src/dashboard/components/pages/organizations-funds-show/elements/OrganizationFundsShowOverviewCard.tsx b/react/src/dashboard/components/pages/organizations-funds-show/elements/OrganizationFundsShowOverviewCard.tsx
index 7fdba4ae3..63f62e002 100644
--- a/react/src/dashboard/components/pages/organizations-funds-show/elements/OrganizationFundsShowOverviewCard.tsx
+++ b/react/src/dashboard/components/pages/organizations-funds-show/elements/OrganizationFundsShowOverviewCard.tsx
@@ -10,6 +10,7 @@ import useActiveOrganization from '../../../../hooks/useActiveOrganization';
 import useTranslate from '../../../../hooks/useTranslate';
 import { useFundService } from '../../../../services/FundService';
 import classNames from 'classnames';
+import { Permission } from '../../../../props/models/Organization';
 
 export default function OrganizationFundsShowOverviewCard({
     fund,
@@ -27,7 +28,7 @@ export default function OrganizationFundsShowOverviewCard({
     const fundService = useFundService();
 
     const canManageFunds = useMemo(() => {
-        return hasPermission(activeOrganization, 'manage_funds');
+        return hasPermission(activeOrganization, Permission.MANAGE_FUNDS);
     }, [activeOrganization]);
 
     const deleteFund = useCallback(
@@ -118,7 +119,10 @@ export default function OrganizationFundsShowOverviewCard({
                                     </button>
                                 )}
 
-                                {hasPermission(fund.organization, ['manage_funds', 'manage_fund_texts']) && (
+                                {hasPermission(fund.organization, [
+                                    Permission.MANAGE_FUNDS,
+                                    Permission.MANAGE_FUND_TEXTS,
+                                ]) && (
                                     <StateNavLink
                                         className="button button-default"
                                         name="funds-edit"
diff --git a/react/src/dashboard/components/pages/organizations-funds-show/elements/OrganizationsFundsShowDetailsCard.tsx b/react/src/dashboard/components/pages/organizations-funds-show/elements/OrganizationsFundsShowDetailsCard.tsx
index 82ae5b484..db6e1dbed 100644
--- a/react/src/dashboard/components/pages/organizations-funds-show/elements/OrganizationsFundsShowDetailsCard.tsx
+++ b/react/src/dashboard/components/pages/organizations-funds-show/elements/OrganizationsFundsShowDetailsCard.tsx
@@ -5,7 +5,7 @@ import React, { useMemo } from 'react';
 import { createEnumParam, useQueryParam, withDefault } from 'use-query-params';
 import useTranslate from '../../../../hooks/useTranslate';
 import { hasPermission } from '../../../../helpers/utils';
-import Organization from '../../../../props/models/Organization';
+import Organization, { Permission } from '../../../../props/models/Organization';
 import Fund from '../../../../props/models/Fund';
 import classNames from 'classnames';
 import OrganizationsFundsShowConfigsCard from './tabs-details-card/OrganizationsFundsShowConfigsCard';
@@ -22,15 +22,15 @@ export default function OrganizationsFundsShowDetailsCard({
     const translate = useTranslate();
 
     const canManageFunds = useMemo(() => {
-        return hasPermission(organization, 'manage_funds');
+        return hasPermission(organization, Permission.MANAGE_FUNDS);
     }, [organization]);
 
     const canManagePayouts = useMemo(() => {
-        return organization.allow_payouts && hasPermission(organization, 'manage_payouts');
+        return organization.allow_payouts && hasPermission(organization, Permission.MANAGE_PAYOUTS);
     }, [organization]);
 
     const canViewFinances = useMemo(() => {
-        return hasPermission(organization, 'view_finances');
+        return hasPermission(organization, Permission.VIEW_FINANCES);
     }, [organization]);
 
     const tabs = useMemo(() => {
diff --git a/react/src/dashboard/components/pages/organizations-funds-show/elements/OrganizationsFundsShowRelationsCard.tsx b/react/src/dashboard/components/pages/organizations-funds-show/elements/OrganizationsFundsShowRelationsCard.tsx
index 490de32d7..01e7af457 100644
--- a/react/src/dashboard/components/pages/organizations-funds-show/elements/OrganizationsFundsShowRelationsCard.tsx
+++ b/react/src/dashboard/components/pages/organizations-funds-show/elements/OrganizationsFundsShowRelationsCard.tsx
@@ -1,7 +1,7 @@
 import React, { Fragment, useMemo } from 'react';
 import { createEnumParam, useQueryParam, withDefault } from 'use-query-params';
 import { hasPermission } from '../../../../helpers/utils';
-import Organization from '../../../../props/models/Organization';
+import Organization, { Permission } from '../../../../props/models/Organization';
 import Fund from '../../../../props/models/Fund';
 import OrganizationsFundsShowTopUpsCard from './tabs-relations-card/OrganizationsFundsShowTopUpsCard';
 import OrganizationsFundsShowImplementationsCard from './tabs-relations-card/OrganizationsFundsShowImplementationsCard';
@@ -18,19 +18,19 @@ export default function OrganizationsFundsShowRelationsCard({
     organization: Organization;
 }) {
     const canViewFinances = useMemo(() => {
-        return hasPermission(organization, 'view_finances');
+        return hasPermission(organization, Permission.VIEW_FINANCES);
     }, [organization]);
 
     const canViewIdentities = useMemo(() => {
         return hasPermission(
             organization,
-            ['view_identities', 'manage_identities', 'manage_implementation_notifications'],
+            [Permission.VIEW_IDENTITIES, Permission.MANAGE_IDENTITIES, Permission.MANAGE_IMPLEMENTATION_NOTIFICATIONS],
             false,
         );
     }, [organization]);
 
     const canViewImplementation = useMemo(() => {
-        return hasPermission(organization, 'manage_implementation');
+        return hasPermission(organization, Permission.MANAGE_IMPLEMENTATION);
     }, [organization]);
 
     const availableViewTables = useMemo(() => {
diff --git a/react/src/dashboard/components/pages/organizations-funds-show/elements/tabs-details-card/OrganizationsFundsShowStatisticsCard.tsx b/react/src/dashboard/components/pages/organizations-funds-show/elements/tabs-details-card/OrganizationsFundsShowStatisticsCard.tsx
index 01c0a2a1e..6bddc569b 100644
--- a/react/src/dashboard/components/pages/organizations-funds-show/elements/tabs-details-card/OrganizationsFundsShowStatisticsCard.tsx
+++ b/react/src/dashboard/components/pages/organizations-funds-show/elements/tabs-details-card/OrganizationsFundsShowStatisticsCard.tsx
@@ -4,7 +4,7 @@ import EmptyCard from '../../../../elements/empty-card/EmptyCard';
 import { useNavigateState } from '../../../../../modules/state_router/Router';
 import ModalFundInviteProviders from '../../../../modals/ModalFundInviteProviders';
 import { hasPermission } from '../../../../../helpers/utils';
-import Organization from '../../../../../props/models/Organization';
+import Organization, { Permission } from '../../../../../props/models/Organization';
 import useTranslate from '../../../../../hooks/useTranslate';
 import useOpenModal from '../../../../../hooks/useOpenModal';
 import usePushSuccess from '../../../../../hooks/usePushSuccess';
@@ -22,7 +22,7 @@ export default function OrganizationsFundsShowStatisticsCard({
     const navigateState = useNavigateState();
 
     const canInviteProviders = useMemo(() => {
-        return hasPermission(organization, 'manage_funds') && fund?.state != 'closed';
+        return hasPermission(organization, Permission.MANAGE_FUNDS) && fund?.state != 'closed';
     }, [organization, fund?.state]);
 
     const providersDescription = useMemo(() => {
diff --git a/react/src/dashboard/components/pages/organizations-funds-show/elements/tabs-relations-card/OrganizationsFundsShowIdentitiesCard.tsx b/react/src/dashboard/components/pages/organizations-funds-show/elements/tabs-relations-card/OrganizationsFundsShowIdentitiesCard.tsx
index 0d01f0ebf..599aa6f98 100644
--- a/react/src/dashboard/components/pages/organizations-funds-show/elements/tabs-relations-card/OrganizationsFundsShowIdentitiesCard.tsx
+++ b/react/src/dashboard/components/pages/organizations-funds-show/elements/tabs-relations-card/OrganizationsFundsShowIdentitiesCard.tsx
@@ -16,6 +16,7 @@ import useSetProgress from '../../../../../hooks/useSetProgress';
 import { useFundService } from '../../../../../services/FundService';
 import useFundIdentitiesExporter from '../../../../../services/exporters/useFundIdentitiesExporter';
 import { hasPermission } from '../../../../../helpers/utils';
+import { Permission } from '../../../../../props/models/Organization';
 import useConfigurableTable from '../../../vouchers/hooks/useConfigurableTable';
 import TableTopScroller from '../../../../elements/tables/TableTopScroller';
 import TableRowActions from '../../../../elements/tables/TableRowActions';
@@ -210,7 +211,10 @@ export default function OrganizationsFundsShowIdentitiesCard({
                                                         disabled={
                                                             !hasPermission(
                                                                 activeOrganization,
-                                                                ['view_identities', 'manage_identities'],
+                                                                [
+                                                                    Permission.VIEW_IDENTITIES,
+                                                                    Permission.MANAGE_IDENTITIES,
+                                                                ],
                                                                 false,
                                                             )
                                                         }
diff --git a/react/src/dashboard/components/pages/organizations-funds-show/elements/tabs-relations-card/OrganizationsFundsShowImplementationsCard.tsx b/react/src/dashboard/components/pages/organizations-funds-show/elements/tabs-relations-card/OrganizationsFundsShowImplementationsCard.tsx
index 751e1e6ba..b8209538f 100644
--- a/react/src/dashboard/components/pages/organizations-funds-show/elements/tabs-relations-card/OrganizationsFundsShowImplementationsCard.tsx
+++ b/react/src/dashboard/components/pages/organizations-funds-show/elements/tabs-relations-card/OrganizationsFundsShowImplementationsCard.tsx
@@ -16,6 +16,7 @@ import StateNavLink from '../../../../../modules/state_router/StateNavLink';
 import useAssetUrl from '../../../../../hooks/useAssetUrl';
 import Implementation from '../../../../../props/models/Implementation';
 import Label from '../../../../elements/image_cropper/Label';
+import { Permission } from '../../../../../props/models/Organization';
 import useConfigurableTable from '../../../vouchers/hooks/useConfigurableTable';
 import TableTopScroller from '../../../../elements/tables/TableTopScroller';
 import { useFundService } from '../../../../../services/FundService';
@@ -219,7 +220,7 @@ export default function OrganizationsFundsShowImplementationsCard({
 
                                                                 {hasPermission(
                                                                     activeOrganization,
-                                                                    'manage_implementation_cms',
+                                                                    Permission.MANAGE_IMPLEMENTATION_CMS,
                                                                 ) && (
                                                                     <StateNavLink
                                                                         name={'implementations-view'}
diff --git a/react/src/dashboard/components/pages/organizations-funds/OrganizationFunds.tsx b/react/src/dashboard/components/pages/organizations-funds/OrganizationFunds.tsx
index f66cb166f..0804818b8 100644
--- a/react/src/dashboard/components/pages/organizations-funds/OrganizationFunds.tsx
+++ b/react/src/dashboard/components/pages/organizations-funds/OrganizationFunds.tsx
@@ -31,6 +31,7 @@ import useConfigurableTable from '../vouchers/hooks/useConfigurableTable';
 import TableEntityMain from '../../elements/tables/elements/TableEntityMain';
 import usePushApiError from '../../../hooks/usePushApiError';
 import classNames from 'classnames';
+import { Permission } from '../../../props/models/Organization';
 
 export default function OrganizationFunds() {
     const translate = useTranslate();
@@ -204,7 +205,7 @@ export default function OrganizationFunds() {
 
                 <div className="card-header-filters">
                     <div className="block block-inline-filters">
-                        {hasPermission(activeOrganization, 'manage_funds') && (
+                        {hasPermission(activeOrganization, Permission.MANAGE_FUNDS) && (
                             <StateNavLink
                                 name={'funds-create'}
                                 params={{ organizationId: activeOrganization.id }}
@@ -215,7 +216,7 @@ export default function OrganizationFunds() {
                         )}
 
                         {activeOrganization.allow_2fa_restrictions &&
-                            hasPermission(activeOrganization, 'manage_organization') && (
+                            hasPermission(activeOrganization, Permission.MANAGE_ORGANIZATION) && (
                                 <StateNavLink
                                     name={'organization-security'}
                                     query={{ view_type: 'funds' }}
@@ -371,7 +372,7 @@ export default function OrganizationFunds() {
 
                                             {funds_type == 'active' && (
                                                 <Fragment>
-                                                    {hasPermission(activeOrganization, 'view_finances') && (
+                                                    {hasPermission(activeOrganization, Permission.VIEW_FINANCES) && (
                                                         <td>{fund.budget?.left_locale}</td>
                                                     )}
 
@@ -402,7 +403,10 @@ export default function OrganizationFunds() {
 
                                                                 {hasPermission(
                                                                     activeOrganization,
-                                                                    ['manage_funds', 'manage_fund_texts'],
+                                                                    [
+                                                                        Permission.MANAGE_FUNDS,
+                                                                        Permission.MANAGE_FUND_TEXTS,
+                                                                    ],
                                                                     false,
                                                                 ) && (
                                                                     <StateNavLink
@@ -420,7 +424,7 @@ export default function OrganizationFunds() {
                                                                 {activeOrganization.allow_2fa_restrictions &&
                                                                     hasPermission(
                                                                         activeOrganization,
-                                                                        'manage_funds',
+                                                                        Permission.MANAGE_FUNDS,
                                                                     ) && (
                                                                         <StateNavLink
                                                                             className="dropdown-item"
@@ -434,7 +438,10 @@ export default function OrganizationFunds() {
                                                                         </StateNavLink>
                                                                     )}
 
-                                                                {hasPermission(activeOrganization, 'view_finances') &&
+                                                                {hasPermission(
+                                                                    activeOrganization,
+                                                                    Permission.VIEW_FINANCES,
+                                                                ) &&
                                                                     fund.key &&
                                                                     fund.state != 'closed' && (
                                                                         <a
@@ -452,7 +459,10 @@ export default function OrganizationFunds() {
                                                                         </a>
                                                                     )}
 
-                                                                {hasPermission(activeOrganization, 'manage_funds') && (
+                                                                {hasPermission(
+                                                                    activeOrganization,
+                                                                    Permission.MANAGE_FUNDS,
+                                                                ) && (
                                                                     <a
                                                                         className={classNames(
                                                                             'dropdown-item',
@@ -472,7 +482,7 @@ export default function OrganizationFunds() {
                                                         )}
                                                     />
                                                 ) : (
-                                                    hasPermission(activeOrganization, 'manage_funds') && (
+                                                    hasPermission(activeOrganization, Permission.MANAGE_FUNDS) && (
                                                         <button
                                                             className="button button-primary"
                                                             onClick={(e) => restoreFund(e, fund)}>
diff --git a/react/src/dashboard/components/pages/payment-methods/PaymentMethods.tsx b/react/src/dashboard/components/pages/payment-methods/PaymentMethods.tsx
index fc492d576..6f12dbacb 100644
--- a/react/src/dashboard/components/pages/payment-methods/PaymentMethods.tsx
+++ b/react/src/dashboard/components/pages/payment-methods/PaymentMethods.tsx
@@ -22,6 +22,7 @@ import CheckboxControl from '../../elements/forms/controls/CheckboxControl';
 import useTranslate from '../../../hooks/useTranslate';
 import usePushApiError from '../../../hooks/usePushApiError';
 import Label from '../../elements/image_cropper/Label';
+import { Permission } from '../../../props/models/Organization';
 
 export default function PaymentMethods() {
     const activeOrganization = useActiveOrganization();
@@ -270,7 +271,9 @@ export default function PaymentMethods() {
                                                         {translate('mollie_connection.buttons.fetch')}
                                                     </button>
 
-                                                    {hasPermission(activeOrganization, ['manage_payment_methods']) && (
+                                                    {hasPermission(activeOrganization, [
+                                                        Permission.MANAGE_PAYMENT_METHODS,
+                                                    ]) && (
                                                         <button
                                                             className="button button-danger button-sm"
                                                             disabled={fetchingMollieAccount}
diff --git a/react/src/dashboard/components/pages/prevalidations/Prevalidations.tsx b/react/src/dashboard/components/pages/prevalidations/Prevalidations.tsx
index 66b42f6eb..b08455781 100644
--- a/react/src/dashboard/components/pages/prevalidations/Prevalidations.tsx
+++ b/react/src/dashboard/components/pages/prevalidations/Prevalidations.tsx
@@ -37,6 +37,7 @@ import { NumberParam, StringParam } from 'use-query-params';
 import EmptyCard from '../../elements/empty-card/EmptyCard';
 import usePrevalidationExporter from '../../../services/exporters/usePrevalidationExporter';
 import Label from '../../elements/image_cropper/Label';
+import { Permission } from '../../../props/models/Organization';
 import { uniq } from 'lodash';
 
 export default function Prevalidations() {
@@ -181,7 +182,7 @@ export default function Prevalidations() {
         fundService
             .list(activeOrganization?.id, { state: 'active_paused_and_closed', per_page: 100 })
             .then((res) => {
-                setFunds(res.data.data.filter((fund) => hasPermission(fund.organization, 'validate_records')));
+                setFunds(res.data.data.filter((fund) => hasPermission(fund.organization, Permission.VALIDATE_RECORDS)));
             })
             .finally(() => setProgress(100));
     }, [setProgress, fundService, activeOrganization?.id]);
diff --git a/react/src/dashboard/components/pages/products-edit/elements/ProductsForm.tsx b/react/src/dashboard/components/pages/products-edit/elements/ProductsForm.tsx
index 795358d9d..c40bd50f7 100644
--- a/react/src/dashboard/components/pages/products-edit/elements/ProductsForm.tsx
+++ b/react/src/dashboard/components/pages/products-edit/elements/ProductsForm.tsx
@@ -6,7 +6,7 @@ import { useMediaService } from '../../../../services/MediaService';
 import LoadingCard from '../../../elements/loading-card/LoadingCard';
 import usePushSuccess from '../../../../hooks/usePushSuccess';
 import useSetProgress from '../../../../hooks/useSetProgress';
-import Organization from '../../../../props/models/Organization';
+import Organization, { Permission } from '../../../../props/models/Organization';
 import StateNavLink from '../../../../modules/state_router/StateNavLink';
 import MarkdownEditor from '../../../elements/forms/markdown-editor/MarkdownEditor';
 import Product, { ProductPriceType } from '../../../../props/models/Product';
@@ -159,7 +159,9 @@ export default function ProductsForm({
     const [products, setProducts] = useState<Product[]>(null);
 
     const allowsExtraPayments = useMemo(() => {
-        return organization?.can_receive_extra_payments && hasPermission(organization, 'manage_payment_methods');
+        return (
+            organization?.can_receive_extra_payments && hasPermission(organization, Permission.MANAGE_PAYMENT_METHODS)
+        );
     }, [organization]);
 
     const goToFundProvider = useCallback(
diff --git a/react/src/dashboard/components/pages/provider-overview/ProviderOverview.tsx b/react/src/dashboard/components/pages/provider-overview/ProviderOverview.tsx
index 40b550005..5cd8986f3 100644
--- a/react/src/dashboard/components/pages/provider-overview/ProviderOverview.tsx
+++ b/react/src/dashboard/components/pages/provider-overview/ProviderOverview.tsx
@@ -12,6 +12,7 @@ import StateNavLink from '../../../modules/state_router/StateNavLink';
 import useAppConfigs from '../../../hooks/useAppConfigs';
 import { hasPermission } from '../../../helpers/utils';
 import ProductsRequiredNotification from './elements/ProductsRequiredNotification';
+import { Permission } from '../../../props/models/Organization';
 
 export default function ProviderOverview() {
     const envData = useEnvData();
@@ -86,7 +87,7 @@ export default function ProviderOverview() {
             <div className="provider-overview" data-dusk="providerOverview">
                 <div className="block block-charts" data-dusk="fundsTitle">
                     <div className="chart-row">
-                        {hasPermission(activeOrganization, ['manage_products']) && (
+                        {hasPermission(activeOrganization, Permission.MANAGE_PRODUCTS) && (
                             <div className="card">
                                 <div className="card-section">
                                     <div className="chart-control chart-control-provider_overview">
@@ -116,7 +117,7 @@ export default function ProviderOverview() {
                             </div>
                         )}
 
-                        {hasPermission(activeOrganization, ['manage_provider_funds']) && (
+                        {hasPermission(activeOrganization, Permission.MANAGE_PROVIDER_FUNDS) && (
                             <div className="card">
                                 <div className="card-section">
                                     <div className="chart-control chart-control-provider_overview">
@@ -139,7 +140,7 @@ export default function ProviderOverview() {
                             </div>
                         )}
 
-                        {hasPermission(activeOrganization, ['view_finances']) && (
+                        {hasPermission(activeOrganization, Permission.VIEW_FINANCES) && (
                             <div className="card">
                                 <div className="card-section">
                                     <div className="chart-control chart-control-provider_overview">
@@ -162,7 +163,7 @@ export default function ProviderOverview() {
                             </div>
                         )}
 
-                        {hasPermission(activeOrganization, ['manage_employees']) && (
+                        {hasPermission(activeOrganization, Permission.MANAGE_EMPLOYEES) && (
                             <div className="card">
                                 <div className="card-section">
                                     <div className="chart-control chart-control-provider_overview">
diff --git a/react/src/dashboard/components/pages/reimbursements-view/ReimbursementsView.tsx b/react/src/dashboard/components/pages/reimbursements-view/ReimbursementsView.tsx
index 9686e8520..bdd1f364e 100644
--- a/react/src/dashboard/components/pages/reimbursements-view/ReimbursementsView.tsx
+++ b/react/src/dashboard/components/pages/reimbursements-view/ReimbursementsView.tsx
@@ -22,6 +22,7 @@ import { useFileService } from '../../../services/FileService';
 import useTranslate from '../../../hooks/useTranslate';
 import usePushApiError from '../../../hooks/usePushApiError';
 import ReimbursementStateLabel from '../../elements/resource-states/ReimbursementStateLabel';
+import { Permission } from '../../../props/models/Organization';
 
 export default function ReimbursementsView() {
     const { id } = useParams();
@@ -576,7 +577,7 @@ export default function ReimbursementsView() {
                 </div>
             )}
 
-            {reimbursement.voucher_transaction && hasPermission(activeOrganization, 'view_finances') && (
+            {reimbursement.voucher_transaction && hasPermission(activeOrganization, Permission.VIEW_FINANCES) && (
                 <TransactionDetails
                     transaction={reimbursement.voucher_transaction}
                     setTransaction={setTransaction}
diff --git a/react/src/dashboard/components/pages/reimbursements/Reimbursements.tsx b/react/src/dashboard/components/pages/reimbursements/Reimbursements.tsx
index 1de109550..38062b31d 100644
--- a/react/src/dashboard/components/pages/reimbursements/Reimbursements.tsx
+++ b/react/src/dashboard/components/pages/reimbursements/Reimbursements.tsx
@@ -25,6 +25,7 @@ import CardHeaderFilter from '../../elements/tables/elements/CardHeaderFilter';
 import useFilterNext from '../../../modules/filter_next/useFilterNext';
 import { createEnumParam, NumberParam, StringParam } from 'use-query-params';
 import ReimbursementsTable from './elements/ReimbursementsTable';
+import { Permission } from '../../../props/models/Organization';
 
 export default function Reimbursements() {
     const activeOrganization = useActiveOrganization();
@@ -375,7 +376,7 @@ export default function Reimbursements() {
 
             {funds?.length == 0 && (
                 <Fragment>
-                    {hasPermission(activeOrganization, 'manage_funds') ? (
+                    {hasPermission(activeOrganization, Permission.MANAGE_FUNDS) ? (
                         <EmptyCard
                             description={'Je hebt momenteel geen fondsen.'}
                             button={{
diff --git a/react/src/dashboard/components/pages/reservations-settings/ReservationsSettings.tsx b/react/src/dashboard/components/pages/reservations-settings/ReservationsSettings.tsx
index 8a2cea83c..86886e77a 100644
--- a/react/src/dashboard/components/pages/reservations-settings/ReservationsSettings.tsx
+++ b/react/src/dashboard/components/pages/reservations-settings/ReservationsSettings.tsx
@@ -14,6 +14,7 @@ import { uniqueId } from 'lodash';
 import { ResponseError } from '../../../props/ApiResponses';
 import useTranslate from '../../../hooks/useTranslate';
 import usePushApiError from '../../../hooks/usePushApiError';
+import { Permission } from '../../../props/models/Organization';
 import FormGroup from '../../elements/forms/elements/FormGroup';
 
 export default function ReservationsSettings() {
@@ -248,7 +249,7 @@ export default function ReservationsSettings() {
                 </div>
 
                 {activeOrganization.can_receive_extra_payments &&
-                    hasPermission(activeOrganization, 'manage_payment_methods') && (
+                    hasPermission(activeOrganization, Permission.MANAGE_PAYMENT_METHODS) && (
                         <div className="card-section card-section-primary card-section-settings">
                             <div className="row">
                                 <div className="col col-md-10 col-md-offset-2 col-xs-12">
diff --git a/react/src/dashboard/components/pages/reservations-view/ReservationsView.tsx b/react/src/dashboard/components/pages/reservations-view/ReservationsView.tsx
index 61256c35d..c823d86ae 100644
--- a/react/src/dashboard/components/pages/reservations-view/ReservationsView.tsx
+++ b/react/src/dashboard/components/pages/reservations-view/ReservationsView.tsx
@@ -25,6 +25,7 @@ import ProductDetailsBlockProperties from '../products-view/elements/ProductDeta
 import ReservationStateLabel from '../../elements/resource-states/ReservationStateLabel';
 import ModalReservationReject from '../../modals/ModalReservationReject';
 import useOpenModal from '../../../hooks/useOpenModal';
+import { Permission } from '../../../props/models/Organization';
 
 export default function ReservationsView() {
     const { id } = useParams();
@@ -394,7 +395,7 @@ export default function ReservationsView() {
                 </div>
             </div>
 
-            {transaction && hasPermission(activeOrganization, 'view_finances') && (
+            {transaction && hasPermission(activeOrganization, Permission.VIEW_FINANCES) && (
                 <TransactionDetails
                     transaction={transaction}
                     setTransaction={setTransaction}
diff --git a/react/src/dashboard/components/pages/reservations/Reservations.tsx b/react/src/dashboard/components/pages/reservations/Reservations.tsx
index 5cf3efe9e..09ef767c2 100644
--- a/react/src/dashboard/components/pages/reservations/Reservations.tsx
+++ b/react/src/dashboard/components/pages/reservations/Reservations.tsx
@@ -26,6 +26,7 @@ import ReservationsTable from './elements/ReservationsTable';
 import useFilterNext from '../../../modules/filter_next/useFilterNext';
 import { createEnumParam, NumberParam, StringParam } from 'use-query-params';
 import ReservationsTableFilters, { ReservationsTableFiltersProps } from './elements/ReservationsTableFilters';
+import { Permission } from '../../../props/models/Organization';
 
 export default function Reservations() {
     const identity = useAuthIdentity();
@@ -293,7 +294,7 @@ export default function Reservations() {
                                     </div>
                                 )}
 
-                                {hasPermission(activeOrganization, 'manage_organization') && (
+                                {hasPermission(activeOrganization, Permission.MANAGE_ORGANIZATION) && (
                                     <StateNavLink
                                         name="reservations-settings"
                                         params={{ organizationId: activeOrganization.id }}
diff --git a/react/src/dashboard/components/pages/reservations/elements/ReservationsTableRowProvider.tsx b/react/src/dashboard/components/pages/reservations/elements/ReservationsTableRowProvider.tsx
index e748fac5b..42af3b6f7 100644
--- a/react/src/dashboard/components/pages/reservations/elements/ReservationsTableRowProvider.tsx
+++ b/react/src/dashboard/components/pages/reservations/elements/ReservationsTableRowProvider.tsx
@@ -7,7 +7,7 @@ import { strLimit } from '../../../../helpers/string';
 import BlockInlineCopy from '../../../elements/block-inline-copy/BlockInlineCopy';
 import ReservationStateLabel from '../../../elements/resource-states/ReservationStateLabel';
 import TableRowActions from '../../../elements/tables/TableRowActions';
-import Organization from '../../../../props/models/Organization';
+import Organization, { Permission } from '../../../../props/models/Organization';
 import Reservation from '../../../../props/models/Reservation';
 import useReservationsTableActions from '../hooks/useReservationsTableActions';
 
@@ -61,7 +61,7 @@ export default function ReservationsTableRowProvider({
             <td>
                 <StateNavLink
                     name={'products-show'}
-                    disabled={!hasPermission(organization, 'manage_products')}
+                    disabled={!hasPermission(organization, Permission.MANAGE_PRODUCTS)}
                     params={{
                         organizationId: reservation.product.organization_id,
                         id: reservation.product.id,
diff --git a/react/src/dashboard/components/pages/transaction-bulks-view/TransactionBulksView.tsx b/react/src/dashboard/components/pages/transaction-bulks-view/TransactionBulksView.tsx
index c38af3b26..4ef5060a4 100644
--- a/react/src/dashboard/components/pages/transaction-bulks-view/TransactionBulksView.tsx
+++ b/react/src/dashboard/components/pages/transaction-bulks-view/TransactionBulksView.tsx
@@ -22,6 +22,7 @@ import { ResponseError } from '../../../props/ApiResponses';
 import useTranslate from '../../../hooks/useTranslate';
 import usePushApiError from '../../../hooks/usePushApiError';
 import Label from '../../elements/image_cropper/Label';
+import { Permission } from '../../../props/models/Organization';
 
 export default function TransactionBulksView() {
     const envData = useEnvData();
@@ -60,7 +61,7 @@ export default function TransactionBulksView() {
     }, [activeOrganization.id, setProgress, transactionBulkService, bulkId]);
 
     const canManageBulks = useMemo(
-        () => hasPermission(activeOrganization, 'manage_transaction_bulks'),
+        () => hasPermission(activeOrganization, Permission.MANAGE_TRANSACTION_BULKS),
         [activeOrganization],
     );
 
diff --git a/react/src/dashboard/components/pages/transactions/Transactions.tsx b/react/src/dashboard/components/pages/transactions/Transactions.tsx
index b6f8d2c93..d14bbb7c6 100644
--- a/react/src/dashboard/components/pages/transactions/Transactions.tsx
+++ b/react/src/dashboard/components/pages/transactions/Transactions.tsx
@@ -39,6 +39,7 @@ import useConfigurableTable from '../vouchers/hooks/useConfigurableTable';
 import usePushApiError from '../../../hooks/usePushApiError';
 import Label from '../../elements/image_cropper/Label';
 import useConfirmDangerAction from '../../../hooks/useConfirmDangerAction';
+import { Permission } from '../../../props/models/Organization';
 import TransactionBulksCard from './elements/TransactionBulksCard';
 
 export default function Transactions() {
@@ -357,13 +358,14 @@ export default function Transactions() {
                 <div className="card-header-filters">
                     <div className="block block-inline-filters">
                         {hasDirectPayments && (
-                            <div
+                            <button
+                                type="button"
                                 className="button button-primary button-sm"
                                 onClick={() => uploadTransactions()}
                                 data-dusk="uploadTransactionsBatchButton">
                                 <em className="mdi mdi-upload icon-start" />
                                 Upload bulkbestand
-                            </div>
+                            </button>
                         )}
 
                         {isSponsor && (
@@ -990,7 +992,7 @@ export default function Transactions() {
 
             {isSponsor &&
                 pendingBulkingMeta?.total > 0 &&
-                hasPermission(activeOrganization, 'manage_transaction_bulks') && (
+                hasPermission(activeOrganization, Permission.MANAGE_TRANSACTION_BULKS) && (
                     <div className="card-section" hidden={viewType.key !== 'transactions'}>
                         <div className="flex flex-vertical">
                             <div className="card-text" data-dusk="pendingBulkingMetaText">
diff --git a/react/src/dashboard/components/pages/vouchers-view/VouchersViewComponent.tsx b/react/src/dashboard/components/pages/vouchers-view/VouchersViewComponent.tsx
index 52675b6c5..18d92d25b 100644
--- a/react/src/dashboard/components/pages/vouchers-view/VouchersViewComponent.tsx
+++ b/react/src/dashboard/components/pages/vouchers-view/VouchersViewComponent.tsx
@@ -29,6 +29,7 @@ import useTranslate from '../../../hooks/useTranslate';
 import useShowVoucherQrCode from '../vouchers/hooks/useShowVoucherQrCode';
 import usePushApiError from '../../../hooks/usePushApiError';
 import Label from '../../elements/image_cropper/Label';
+import { Permission } from '../../../props/models/Organization';
 import VoucherReservationsCard from './elements/VoucherReservationsCard';
 
 export default function VouchersViewComponent() {
@@ -61,7 +62,7 @@ export default function VouchersViewComponent() {
     const showMakeTransactionButton = useMemo(() => {
         return (
             voucher &&
-            hasPermission(activeOrganization, 'make_direct_payments') &&
+            hasPermission(activeOrganization, Permission.MAKE_DIRECT_PAYMENTS) &&
             voucher.state === 'active' &&
             fund?.state != 'closed' &&
             !voucher.product &&
@@ -311,7 +312,7 @@ export default function VouchersViewComponent() {
                         )}
                         {voucher.expired && <Label type="warning">{translate('vouchers.labels.expired')}</Label>}
                     </div>
-                    {hasPermission(activeOrganization, 'manage_vouchers') && (
+                    {hasPermission(activeOrganization, Permission.MANAGE_VOUCHERS) && (
                         <div className="card-header-filters">
                             <div className="block block-inline-filters">
                                 {showMakeTransactionButton && fund?.allow_voucher_top_ups && (
@@ -444,7 +445,7 @@ export default function VouchersViewComponent() {
                         {voucher.fund.show_requester_limits && (
                             <div className="keyvalue-item">
                                 <div className="keyvalue-key">{translate('vouchers.labels.limit_multiplier')}</div>
-                                {hasPermission(activeOrganization, 'manage_vouchers') ? (
+                                {hasPermission(activeOrganization, Permission.MANAGE_VOUCHERS) ? (
                                     <div className="keyvalue-value">
                                         <div className="form">
                                             <NumericControl
@@ -620,7 +621,7 @@ export default function VouchersViewComponent() {
                 </div>
             )}
 
-            {hasPermission(activeOrganization, 'manage_vouchers') && (
+            {hasPermission(activeOrganization, Permission.MANAGE_VOUCHERS) && (
                 <Fragment>
                     <VoucherTransactionsCard
                         organization={activeOrganization}
diff --git a/react/src/dashboard/components/pages/vouchers-view/elements/VoucherRecordsCard.tsx b/react/src/dashboard/components/pages/vouchers-view/elements/VoucherRecordsCard.tsx
index 5e114ff38..012086613 100644
--- a/react/src/dashboard/components/pages/vouchers-view/elements/VoucherRecordsCard.tsx
+++ b/react/src/dashboard/components/pages/vouchers-view/elements/VoucherRecordsCard.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import SponsorVoucher from '../../../../props/models/Sponsor/SponsorVoucher';
-import Organization from '../../../../props/models/Organization';
+import Organization, { Permission } from '../../../../props/models/Organization';
 import useOpenModal from '../../../../hooks/useOpenModal';
 import Paginator from '../../../../modules/paginator/components/Paginator';
 import ModalVoucherRecordEdit from '../../../modals/ModalVoucherRecordEdit';
@@ -132,7 +132,7 @@ export default function VoucherRecordsCard({
                                 onChange={(e) => filter.update({ q: e.target.value })}
                             />
                         </div>
-                        {hasPermission(organization, 'manage_vouchers') && (
+                        {hasPermission(organization, Permission.MANAGE_VOUCHERS) && (
                             <div className="button button-primary button-sm" onClick={() => editRecord()}>
                                 <em className="mdi mdi-plus-circle icon-start" />
                                 {translate('voucher_records.buttons.add_record')}
@@ -163,7 +163,7 @@ export default function VoucherRecordsCard({
                                             </td>
 
                                             <td className={'table-td-actions text-right'}>
-                                                {hasPermission(organization, 'manage_vouchers') ? (
+                                                {hasPermission(organization, Permission.MANAGE_VOUCHERS) ? (
                                                     <TableRowActions
                                                         content={() => (
                                                             <div className="dropdown dropdown-actions">
diff --git a/react/src/dashboard/components/pages/vouchers/Vouchers.tsx b/react/src/dashboard/components/pages/vouchers/Vouchers.tsx
index 918d44d9f..1ff0b9a74 100644
--- a/react/src/dashboard/components/pages/vouchers/Vouchers.tsx
+++ b/react/src/dashboard/components/pages/vouchers/Vouchers.tsx
@@ -21,6 +21,7 @@ import Fund from '../../../props/models/Fund';
 import ModalVoucherCreate from '../../modals/ModalVoucherCreate';
 import ModalVouchersUpload from '../../modals/ModalVouchersUpload';
 import VouchersTable from './elements/VouchersTable';
+import { Permission } from '../../../props/models/Organization';
 
 export default function Vouchers() {
     const activeOrganization = useActiveOrganization();
@@ -179,7 +180,7 @@ export default function Vouchers() {
                 </div>
                 <div className="card-header-filters">
                     <div className="block block-inline-filters">
-                        {hasPermission(activeOrganization, 'manage_vouchers') && (
+                        {hasPermission(activeOrganization, Permission.MANAGE_VOUCHERS) && (
                             <Fragment>
                                 <button
                                     id="create_voucher"
diff --git a/react/src/dashboard/components/pages/vouchers/elements/VouchersTableFilters.tsx b/react/src/dashboard/components/pages/vouchers/elements/VouchersTableFilters.tsx
index 2430df393..5f8a21cd9 100644
--- a/react/src/dashboard/components/pages/vouchers/elements/VouchersTableFilters.tsx
+++ b/react/src/dashboard/components/pages/vouchers/elements/VouchersTableFilters.tsx
@@ -1,6 +1,6 @@
 import React, { Fragment, useCallback, useState } from 'react';
 import { hasPermission } from '../../../../helpers/utils';
-import Organization from '../../../../props/models/Organization';
+import Organization, { Permission } from '../../../../props/models/Organization';
 import SelectControl from '../../../elements/select-control/SelectControl';
 import ClickOutside from '../../../elements/click-outside/ClickOutside';
 import FilterItemToggle from '../../../elements/tables/elements/FilterItemToggle';
@@ -317,7 +317,7 @@ export default function VouchersTableFilters({
                                     />
                                 </FilterItemToggle>
 
-                                {hasPermission(organization, 'manage_vouchers') && (
+                                {hasPermission(organization, Permission.MANAGE_VOUCHERS) && (
                                     <div className="form-actions">
                                         <button
                                             className="button button-primary button-wide"
diff --git a/react/src/dashboard/components/pages/vouchers/elements/VouchersTableNoFundsBlock.tsx b/react/src/dashboard/components/pages/vouchers/elements/VouchersTableNoFundsBlock.tsx
index d5635f31e..77f87b07c 100644
--- a/react/src/dashboard/components/pages/vouchers/elements/VouchersTableNoFundsBlock.tsx
+++ b/react/src/dashboard/components/pages/vouchers/elements/VouchersTableNoFundsBlock.tsx
@@ -2,10 +2,10 @@ import EmptyCard from '../../../elements/empty-card/EmptyCard';
 import { getStateRouteUrl } from '../../../../modules/state_router/Router';
 import React from 'react';
 import { hasPermission } from '../../../../helpers/utils';
-import Organization from '../../../../props/models/Organization';
+import Organization, { Permission } from '../../../../props/models/Organization';
 
 export default function VouchersTableNoFundsBlock({ organization }: { organization: Organization }) {
-    return hasPermission(organization, 'manage_funds') ? (
+    return hasPermission(organization, Permission.MANAGE_FUNDS) ? (
         <EmptyCard
             description={'Je hebt momenteel geen fondsen.'}
             button={{
diff --git a/react/src/dashboard/components/pages/vouchers/elements/VouchersTableRow.tsx b/react/src/dashboard/components/pages/vouchers/elements/VouchersTableRow.tsx
index 8b2cde909..99acd65d9 100644
--- a/react/src/dashboard/components/pages/vouchers/elements/VouchersTableRow.tsx
+++ b/react/src/dashboard/components/pages/vouchers/elements/VouchersTableRow.tsx
@@ -1,7 +1,7 @@
 import React, { Fragment, useCallback } from 'react';
 import SponsorVoucher from '../../../../props/models/Sponsor/SponsorVoucher';
 import StateNavLink from '../../../../modules/state_router/StateNavLink';
-import Organization from '../../../../props/models/Organization';
+import Organization, { Permission } from '../../../../props/models/Organization';
 import { currencyFormat, strLimit } from '../../../../helpers/string';
 import Tooltip from '../../../elements/tooltip/Tooltip';
 import VouchersTableRowStatus from './VouchersTableRowStatus';
@@ -183,7 +183,7 @@ export default function VouchersTableRow({
                                 Bekijken
                             </StateNavLink>
 
-                            {hasPermission(organization, 'manage_vouchers') &&
+                            {hasPermission(organization, Permission.MANAGE_VOUCHERS) &&
                                 !voucher.granted &&
                                 !voucher.expired &&
                                 voucher.state != 'deactivated' && (
diff --git a/react/src/dashboard/helpers/utils.ts b/react/src/dashboard/helpers/utils.ts
index ff69663fd..8cb75939c 100644
--- a/react/src/dashboard/helpers/utils.ts
+++ b/react/src/dashboard/helpers/utils.ts
@@ -1,6 +1,6 @@
-import Organization from '../props/models/Organization';
+import Organization, { Permission } from '../props/models/Organization';
 
-export const hasPermission = (organization: Organization, permissions: string | Array<string>, all = false) => {
+export const hasPermission = (organization: Organization, permissions: Permission | Array<Permission>, all = false) => {
     if (!organization || !organization.permissions) {
         return false;
     }
@@ -11,15 +11,15 @@ export const hasPermission = (organization: Organization, permissions: string |
 
     if (all) {
         return (
-            permissions.filter((permissionItem) => {
-                return organization.permissions.indexOf(permissionItem) !== -1;
+            permissions.filter((permission) => {
+                return organization.permissions.includes(permission);
             }).length == permissions.length
         );
     }
 
     return (
-        permissions.filter((permissionItem) => {
-            return organization.permissions.indexOf(permissionItem) !== -1;
+        permissions.filter((permission) => {
+            return organization.permissions.includes(permission);
         }).length > 0
     );
 };
diff --git a/react/src/dashboard/hooks/useTableToggles.tsx b/react/src/dashboard/hooks/useTableToggles.tsx
index 9b41d1c04..7ccfca5f1 100644
--- a/react/src/dashboard/hooks/useTableToggles.tsx
+++ b/react/src/dashboard/hooks/useTableToggles.tsx
@@ -1,10 +1,10 @@
-import { useCallback, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 
-export default function useTableToggles() {
-    const [selected, setSelected] = useState([]);
+export default function useTableToggles<T = number>(multiselect: boolean = true) {
+    const [selected, setSelected] = useState<T[]>([]);
 
     const toggleAll = useCallback(
-        (e, items: Array<{ id: number }>) => {
+        (e: React.MouseEvent, items: Array<{ id: T }>) => {
             e?.stopPropagation();
 
             setSelected(() => {
@@ -14,19 +14,26 @@ export default function useTableToggles() {
         [selected],
     );
 
-    const toggle = useCallback((e, item: { id: number }) => {
-        e?.stopPropagation();
+    const toggle = useCallback(
+        (e, item: { id: T }) => {
+            e?.stopPropagation();
+
+            setSelected((selected) => {
+                if (!multiselect) {
+                    return [item.id];
+                }
 
-        setSelected((selected) => {
-            if (selected.includes(item.id)) {
-                selected.splice(selected.indexOf(item.id), 1);
-            } else {
-                selected.push(item.id);
-            }
+                if (selected.includes(item.id)) {
+                    selected.splice(selected.indexOf(item.id), 1);
+                } else {
+                    selected.push(item.id);
+                }
 
-            return [...selected];
-        });
-    }, []);
+                return [...selected];
+            });
+        },
+        [multiselect],
+    );
 
     return {
         selected,
diff --git a/react/src/dashboard/i18n/nl/i18n-pages.js b/react/src/dashboard/i18n/nl/i18n-pages.js
index 037d4d7f5..fba76d806 100644
--- a/react/src/dashboard/i18n/nl/i18n-pages.js
+++ b/react/src/dashboard/i18n/nl/i18n-pages.js
@@ -4,6 +4,7 @@ import system_notifications from './pages/system-notifications';
 import event_logs from './pages/event-logs';
 import reimbursements from './pages/reimbursements';
 import identities from './pages/identities';
+import households from './pages/households';
 import transactions from './pages/transactions';
 import payouts from './pages/payouts';
 import voucher_records from './pages/voucher-records';
@@ -46,6 +47,7 @@ export default {
     event_logs,
     reimbursements,
     identities,
+    households,
     transactions,
     payouts,
     voucher_records,
diff --git a/react/src/dashboard/i18n/nl/pages/households.js b/react/src/dashboard/i18n/nl/pages/households.js
new file mode 100644
index 000000000..5711a76bc
--- /dev/null
+++ b/react/src/dashboard/i18n/nl/pages/households.js
@@ -0,0 +1,27 @@
+export default {
+    header: {
+        title: 'Huishoudens',
+    },
+    labels: {
+        id: 'ID',
+        member_count: 'Aantal leden',
+        children_count: 'Aantal Kinderen',
+        parent_count: 'Aantal Ouders',
+        city: 'Woonplaats',
+        postal_code: 'Postcode',
+        house_number: 'Huisnummer',
+        neighborhood: 'Woonwijk',
+        municipality: 'Gemeentenaam',
+    },
+    tooltips: {
+        id: 'lorem_ipsum',
+        member_count: 'lorem_ipsum',
+        children_count: 'lorem_ipsum',
+        parent_count: 'lorem_ipsum',
+        city: 'lorem_ipsum',
+        postal_code: 'lorem_ipsum',
+        house_number: 'lorem_ipsum',
+        neighborhood: 'lorem_ipsum',
+        municipality: 'lorem_ipsum',
+    },
+};
diff --git a/react/src/dashboard/i18n/nl/pages/identities.js b/react/src/dashboard/i18n/nl/pages/identities.js
index 200dd7241..88d5737a3 100644
--- a/react/src/dashboard/i18n/nl/pages/identities.js
+++ b/react/src/dashboard/i18n/nl/pages/identities.js
@@ -4,6 +4,7 @@ export default {
     },
     labels: {
         id: 'ID',
+        type: 'Type',
         given_name: 'Voornaam',
         family_name: 'Achternaam',
         email: 'E-mail adres',
@@ -23,6 +24,11 @@ export default {
         street: 'Straatnaam',
         created_at: 'Gemaakt op',
         actions: 'Acties',
+
+        // relations
+        relation_type: 'Relatietype',
+        relation_subtype: 'Relatietype Specificatie',
+        relation_living_together: 'Samenwonend',
     },
     tooltips: {
         id: 'Dit is een unieke identificatiecode die automatisch wordt gegenereerd voor elke persoon in het systeem. Het helpt om elke persoon individueel te identificeren.',
@@ -88,7 +94,7 @@ export default {
             'De officiële codering van TNT Post voor een Nederlands postadres, bestaande uit een numeriek deel en een alfabetisch deel.',
         telephone: 'Het telefoonnummer waaronder de persoon bereikbaar is.',
         mobile: 'Het mobiele telefoonnummer waaronder de persoon bereikbaar is.',
-        city: '"De naam van een door het bevoegde gemeentelijke orgaan als zodanig aangewezen gedeelte van het gemeentelijk grondgebied.',
+        city: 'De naam van een door het bevoegde gemeentelijke orgaan als zodanig aangewezen gedeelte van het gemeentelijk grondgebied.',
         house_number: 'De numerieke aanduiding zoals deze door de gemeente aan het object is toegekend.',
         house_number_addition: 'De huisnummertoevoeging zoals deze door de gemeente aan het object is toegekend.',
         street: 'De officiële door de gemeente vastgestelde naam van een straat waar de persoon woonachtig is.',
diff --git a/react/src/dashboard/layout/elements/aside/LayoutAsideProvider.tsx b/react/src/dashboard/layout/elements/aside/LayoutAsideProvider.tsx
index bd63028af..1b10b08c0 100644
--- a/react/src/dashboard/layout/elements/aside/LayoutAsideProvider.tsx
+++ b/react/src/dashboard/layout/elements/aside/LayoutAsideProvider.tsx
@@ -1,14 +1,14 @@
 import React from 'react';
 import LayoutAsideNavGroup from './elements/LayoutAsideNavGroup';
-import Organization from '../../../props/models/Organization';
+import Organization, { Permission } from '../../../props/models/Organization';
 import { hasPermission } from '../../../helpers/utils';
 import {
+    IconFinancial,
+    IconFinancialActive,
     IconOverview,
     IconOverviewActive,
     IconSales,
     IconSalesActive,
-    IconFinancial,
-    IconFinancialActive,
 } from './icons/LayoutAsideIcons';
 import LayoutAsideGroupOrganization from './groups/LayoutAsideGroupOrganization';
 import LayoutAsideGroupPersonal from './groups/LayoutAsideGroupPersonal';
@@ -26,7 +26,7 @@ export default function LayoutAsideProvider({ organization }: { organization: Or
                 name="Overzicht"
                 state="provider-overview"
                 stateParams={{ organizationId: organization?.id }}
-                show={hasPermission(organization, 'manage_employees')}
+                show={hasPermission(organization, Permission.MANAGE_EMPLOYEES)}
                 icon={<IconOverview />}
                 iconActive={<IconOverviewActive />}
                 pinnedGroups={pinnedGroups}
@@ -48,14 +48,14 @@ export default function LayoutAsideProvider({ organization }: { organization: Or
                         name: 'Aanbod',
                         state: 'products',
                         stateParams: { organizationId: organization?.id },
-                        show: hasPermission(organization, 'manage_products'),
+                        show: hasPermission(organization, Permission.MANAGE_PRODUCTS),
                     },
                     {
                         id: 'reservations',
                         name: 'Reserveringen',
                         state: 'reservations',
                         stateParams: { organizationId: organization?.id },
-                        show: hasPermission(organization, 'scan_vouchers'),
+                        show: hasPermission(organization, Permission.SCAN_VOUCHERS),
                         dusk: 'reservationsPage',
                     },
                     {
@@ -63,7 +63,7 @@ export default function LayoutAsideProvider({ organization }: { organization: Or
                         name: 'Fondsen',
                         state: 'provider-funds',
                         stateParams: { organizationId: organization?.id },
-                        show: hasPermission(organization, 'manage_provider_funds'),
+                        show: hasPermission(organization, Permission.MANAGE_PROVIDER_FUNDS),
                         dusk: 'fundsPage',
                     },
                 ]}
@@ -84,7 +84,7 @@ export default function LayoutAsideProvider({ organization }: { organization: Or
                         name: 'Transacties',
                         state: 'transactions',
                         stateParams: { organizationId: organization?.id },
-                        show: hasPermission(organization, 'view_finances'),
+                        show: hasPermission(organization, Permission.VIEW_FINANCES),
                         dusk: 'transactionsPage',
                     },
                     {
@@ -94,7 +94,7 @@ export default function LayoutAsideProvider({ organization }: { organization: Or
                         stateParams: { organizationId: organization?.id },
                         show:
                             organization?.can_view_provider_extra_payments &&
-                            hasPermission(organization, 'manage_payment_methods'),
+                            hasPermission(organization, Permission.MANAGE_PAYMENT_METHODS),
                     },
                 ]}
             />
diff --git a/react/src/dashboard/layout/elements/aside/LayoutAsideSponsor.tsx b/react/src/dashboard/layout/elements/aside/LayoutAsideSponsor.tsx
index 5506eb691..a7440025e 100644
--- a/react/src/dashboard/layout/elements/aside/LayoutAsideSponsor.tsx
+++ b/react/src/dashboard/layout/elements/aside/LayoutAsideSponsor.tsx
@@ -1,27 +1,27 @@
 import React from 'react';
 import { hasPermission } from '../../../helpers/utils';
-import Organization from '../../../props/models/Organization';
+import Organization, { Permission } from '../../../props/models/Organization';
 import LayoutAsideNavGroup from './elements/LayoutAsideNavGroup';
 import useAppConfigs from '../../../hooks/useAppConfigs';
 import {
+    IconConnections,
+    IconConnectionsActive,
+    IconFinancial,
+    IconFinancialActive,
+    IconFundRequests,
+    IconFundRequestsActive,
     IconFunds,
     IconFundsActive,
+    IconParticipants,
+    IconParticipantsActive,
     IconReports,
     IconReportsActive,
+    IconSponsorProviders,
+    IconSponsorProvidersActive,
     IconVouchers,
     IconVouchersActive,
     IconWebshops,
     IconWebshopsActive,
-    IconFinancial,
-    IconFinancialActive,
-    IconConnections,
-    IconConnectionsActive,
-    IconParticipants,
-    IconParticipantsActive,
-    IconFundRequests,
-    IconFundRequestsActive,
-    IconSponsorProviders,
-    IconSponsorProvidersActive,
 } from './icons/LayoutAsideIcons';
 import LayoutAsideGroupOrganization from './groups/LayoutAsideGroupOrganization';
 import LayoutAsideGroupPersonal from './groups/LayoutAsideGroupPersonal';
@@ -43,7 +43,11 @@ export default function LayoutAsideSponsor({ organization }: { organization: Org
                 name={'Fondsen'}
                 state={'organization-funds'}
                 stateParams={{ organizationId: organization?.id }}
-                show={hasPermission(organization, ['manage_funds', 'view_finances', 'view_funds'], false)}
+                show={hasPermission(
+                    organization,
+                    [Permission.MANAGE_FUNDS, Permission.VIEW_FINANCES, Permission.VIEW_FUNDS],
+                    false,
+                )}
                 icon={<IconFunds />}
                 iconActive={<IconFundsActive />}
                 pinnedGroups={pinnedGroups}
@@ -66,7 +70,11 @@ export default function LayoutAsideSponsor({ organization }: { organization: Org
                         state: 'csv-validation',
                         dusk: 'csvValidationPage',
                         stateParams: { organizationId: organization?.id },
-                        show: hasPermission(organization, ['validate_records', 'manage_validators'], false),
+                        show: hasPermission(
+                            organization,
+                            [Permission.VALIDATE_RECORDS, Permission.MANAGE_VALIDATORS],
+                            false,
+                        ),
                     },
                     {
                         id: 'fund_requests',
@@ -76,7 +84,11 @@ export default function LayoutAsideSponsor({ organization }: { organization: Org
                         stateParams: { organizationId: organization?.id },
                         show:
                             appConfigs?.organizations?.funds?.fund_requests &&
-                            hasPermission(organization, ['validate_records', 'manage_validators'], false),
+                            hasPermission(
+                                organization,
+                                [Permission.VALIDATE_RECORDS, Permission.MANAGE_VALIDATORS],
+                                false,
+                            ),
                     },
                     {
                         id: 'fund_forms',
@@ -85,7 +97,7 @@ export default function LayoutAsideSponsor({ organization }: { organization: Org
                         stateParams: { organizationId: organization?.id },
                         show:
                             appConfigs?.organizations?.funds?.fund_requests &&
-                            hasPermission(organization, ['manage_funds'], false),
+                            hasPermission(organization, [Permission.MANAGE_FUNDS], false),
                     },
                 ]}
             />
@@ -105,7 +117,9 @@ export default function LayoutAsideSponsor({ organization }: { organization: Org
                         name: 'Aanbod',
                         state: 'sponsor-products',
                         stateParams: { organizationId: organization?.id },
-                        show: organization.allow_product_updates && hasPermission(organization, 'manage_providers'),
+                        show:
+                            organization.allow_product_updates &&
+                            hasPermission(organization, Permission.MANAGE_PROVIDERS),
                     },
                     {
                         id: 'providers',
@@ -113,7 +127,7 @@ export default function LayoutAsideSponsor({ organization }: { organization: Org
                         state: 'sponsor-provider-organizations',
                         dusk: 'providersPage',
                         stateParams: { organizationId: organization?.id },
-                        show: hasPermission(organization, 'manage_providers'),
+                        show: hasPermission(organization, Permission.MANAGE_PROVIDERS),
                     },
                 ]}
             />
@@ -136,7 +150,25 @@ export default function LayoutAsideSponsor({ organization }: { organization: Org
                         dusk: 'identitiesPage',
                         show:
                             organization.allow_profiles &&
-                            hasPermission(organization, ['view_identities', 'manage_identities'], false),
+                            hasPermission(
+                                organization,
+                                [Permission.VIEW_IDENTITIES, Permission.MANAGE_IDENTITIES],
+                                false,
+                            ),
+                    },
+                    {
+                        id: 'households',
+                        name: 'Huishoudens',
+                        state: 'households',
+                        stateParams: { organizationId: organization?.id },
+                        dusk: 'householdsPage',
+                        show:
+                            organization.allow_profiles_households &&
+                            hasPermission(
+                                organization,
+                                [Permission.VIEW_IDENTITIES, Permission.MANAGE_IDENTITIES],
+                                false,
+                            ),
                     },
                 ]}
             />
@@ -156,7 +188,7 @@ export default function LayoutAsideSponsor({ organization }: { organization: Org
                         name: 'Tegoeden',
                         state: 'vouchers',
                         stateParams: { organizationId: organization?.id },
-                        show: hasPermission(organization, ['manage_vouchers', 'view_vouchers']),
+                        show: hasPermission(organization, [Permission.MANAGE_VOUCHERS, Permission.VIEW_VOUCHERS]),
                         dusk: 'vouchersPage',
                     },
                     {
@@ -164,7 +196,7 @@ export default function LayoutAsideSponsor({ organization }: { organization: Org
                         name: 'Declaraties',
                         state: 'reimbursements',
                         stateParams: { organizationId: organization?.id },
-                        show: hasPermission(organization, 'manage_reimbursements'),
+                        show: hasPermission(organization, Permission.MANAGE_REIMBURSEMENTS),
                         dusk: 'reimbursementsPage',
                     },
                     {
@@ -172,7 +204,7 @@ export default function LayoutAsideSponsor({ organization }: { organization: Org
                         name: 'Uitbetalingen',
                         state: 'payouts',
                         stateParams: { organizationId: organization?.id },
-                        show: organization.allow_payouts && hasPermission(organization, 'manage_payouts'),
+                        show: organization.allow_payouts && hasPermission(organization, Permission.MANAGE_PAYOUTS),
                     },
                 ]}
             />
@@ -192,14 +224,14 @@ export default function LayoutAsideSponsor({ organization }: { organization: Org
                         name: 'Betaalopdrachten',
                         state: 'transactions',
                         stateParams: { organizationId: organization?.id },
-                        show: hasPermission(organization, 'view_finances'),
+                        show: hasPermission(organization, Permission.VIEW_FINANCES),
                         dusk: 'transactionsPage',
                     },
                     {
                         id: 'extra-payments',
                         name: 'Bijbetalingen',
                         state: 'extra-payments',
-                        show: hasPermission(organization, 'view_funds_extra_payments'),
+                        show: hasPermission(organization, Permission.VIEW_FUNDS_EXTRA_PAYMENTS),
                         stateParams: { organizationId: organization?.id },
                         dusk: 'extraPaymentsPage',
                     },
@@ -221,14 +253,14 @@ export default function LayoutAsideSponsor({ organization }: { organization: Org
                         name: 'Statistieken',
                         state: 'financial-dashboard',
                         stateParams: { organizationId: organization?.id },
-                        show: hasPermission(organization, 'view_finances'),
+                        show: hasPermission(organization, Permission.VIEW_FINANCES),
                         dusk: 'financialDashboardPage',
                     },
                     {
                         id: 'financial_dashboard_overview',
                         name: 'Financieel overzicht',
                         state: 'financial-dashboard-overview',
-                        show: hasPermission(organization, 'view_finances'),
+                        show: hasPermission(organization, Permission.VIEW_FINANCES),
                         stateParams: { organizationId: organization?.id },
                         dusk: 'financialDashboardOverviewPage',
                     },
@@ -250,7 +282,7 @@ export default function LayoutAsideSponsor({ organization }: { organization: Org
                         stateParams: { organizationId: organization?.id },
                         show: hasPermission(
                             organization,
-                            ['manage_implementation', 'manage_implementation_cms'],
+                            [Permission.MANAGE_IMPLEMENTATION, Permission.MANAGE_IMPLEMENTATION_CMS],
                             false,
                         ),
                     },
@@ -261,19 +293,21 @@ export default function LayoutAsideSponsor({ organization }: { organization: Org
                         show:
                             isSponsorPanel &&
                             organization.allow_translations &&
-                            hasPermission(organization, 'manage_implementation'),
+                            hasPermission(organization, Permission.MANAGE_IMPLEMENTATION),
                     },
                     {
                         name: 'Regelingencheck',
                         state: 'pre-check',
                         stateParams: { organizationId: organization?.id },
-                        show: organization.allow_pre_checks && hasPermission(organization, 'manage_implementation'),
+                        show:
+                            organization.allow_pre_checks &&
+                            hasPermission(organization, Permission.MANAGE_IMPLEMENTATION),
                     },
                     {
                         name: 'Systeemberichten',
                         state: 'implementation-notifications',
                         stateParams: { organizationId: organization?.id },
-                        show: hasPermission(organization, 'manage_implementation_notifications'),
+                        show: hasPermission(organization, Permission.MANAGE_IMPLEMENTATION_NOTIFICATIONS),
                     },
                 ]}
             />
@@ -291,13 +325,15 @@ export default function LayoutAsideSponsor({ organization }: { organization: Org
                         name: 'Bank',
                         state: 'bank-connections',
                         stateParams: { organizationId: organization?.id },
-                        show: hasPermission(organization, 'manage_bank_connections'),
+                        show: hasPermission(organization, Permission.MANAGE_BANK_CONNECTIONS),
                     },
                     {
                         name: 'BI-tool',
                         state: 'bi-connection',
                         stateParams: { organizationId: organization?.id },
-                        show: organization.allow_bi_connection && hasPermission(organization, 'manage_bi_connection'),
+                        show:
+                            organization.allow_bi_connection &&
+                            hasPermission(organization, Permission.MANAGE_BI_CONNECTION),
                     },
                 ]}
             />
diff --git a/react/src/dashboard/layout/elements/aside/LayoutAsideValidator.tsx b/react/src/dashboard/layout/elements/aside/LayoutAsideValidator.tsx
index 337764c3e..3b2da15bb 100644
--- a/react/src/dashboard/layout/elements/aside/LayoutAsideValidator.tsx
+++ b/react/src/dashboard/layout/elements/aside/LayoutAsideValidator.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import LayoutAsideNavGroup from './elements/LayoutAsideNavGroup';
-import Organization from '../../../props/models/Organization';
+import Organization, { Permission } from '../../../props/models/Organization';
 import { hasPermission } from '../../../helpers/utils';
 import useAppConfigs from '../../../hooks/useAppConfigs';
 import { IconManagement, IconManagementActive } from './icons/LayoutAsideIcons';
@@ -33,7 +33,11 @@ export default function LayoutAsideValidator({ organization }: { organization: O
                         stateParams: { organizationId: organization?.id },
                         show:
                             appConfigs?.organizations?.funds?.fund_requests &&
-                            hasPermission(organization, ['validate_records', 'manage_validators'], false),
+                            hasPermission(
+                                organization,
+                                [Permission.VALIDATE_RECORDS, Permission.MANAGE_VALIDATORS],
+                                false,
+                            ),
                         dusk: 'fundRequestsPage',
                     },
                     {
@@ -41,7 +45,11 @@ export default function LayoutAsideValidator({ organization }: { organization: O
                         name: 'Klaarzetten',
                         state: 'csv-validation',
                         stateParams: { organizationId: organization?.id },
-                        show: hasPermission(organization, ['validate_records', 'manage_validators'], false),
+                        show: hasPermission(
+                            organization,
+                            [Permission.VALIDATE_RECORDS, Permission.MANAGE_VALIDATORS],
+                            false,
+                        ),
                     },
                 ]}
             />
diff --git a/react/src/dashboard/layout/elements/aside/groups/LayoutAsideGroupOrganization.tsx b/react/src/dashboard/layout/elements/aside/groups/LayoutAsideGroupOrganization.tsx
index 839c9f70a..8c0959c5d 100644
--- a/react/src/dashboard/layout/elements/aside/groups/LayoutAsideGroupOrganization.tsx
+++ b/react/src/dashboard/layout/elements/aside/groups/LayoutAsideGroupOrganization.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import Organization from '../../../../props/models/Organization';
+import Organization, { Permission } from '../../../../props/models/Organization';
 import LayoutAsideNavGroup from '../elements/LayoutAsideNavGroup';
 import { IconOrganization, IconOrganizationActive } from '../icons/LayoutAsideIcons';
 import { hasPermission } from '../../../../helpers/utils';
@@ -31,7 +31,7 @@ export default function LayoutAsideGroupOrganization({
                     name: 'Medewerkers',
                     state: 'employees',
                     stateParams: { organizationId: organization?.id },
-                    show: hasPermission(organization, 'manage_employees'),
+                    show: hasPermission(organization, Permission.MANAGE_EMPLOYEES),
                     dusk: 'employeesPage',
                 },
                 {
@@ -39,7 +39,9 @@ export default function LayoutAsideGroupOrganization({
                     name: 'Beveiliging',
                     state: 'organization-security',
                     stateParams: { organizationId: organization?.id },
-                    show: organization.allow_2fa_restrictions && hasPermission(organization, 'manage_organization'),
+                    show:
+                        organization.allow_2fa_restrictions &&
+                        hasPermission(organization, Permission.MANAGE_ORGANIZATION),
                 },
                 {
                     id: 'organization-logs',
@@ -54,14 +56,14 @@ export default function LayoutAsideGroupOrganization({
                     name: 'Vestigingen',
                     state: 'offices',
                     stateParams: { organizationId: organization?.id },
-                    show: envData.client_type == 'provider' && hasPermission(organization, 'manage_offices'),
+                    show: envData.client_type == 'provider' && hasPermission(organization, Permission.MANAGE_OFFICES),
                 },
                 {
                     id: 'organization_settings',
                     name: 'Instellingen',
                     state: 'organizations-edit',
                     stateParams: { organizationId: organization?.id },
-                    show: hasPermission(organization, 'manage_organization'),
+                    show: hasPermission(organization, Permission.MANAGE_ORGANIZATION),
                 },
                 {
                     name: 'Marketplace',
diff --git a/react/src/dashboard/modules/paginator/components/Paginator.tsx b/react/src/dashboard/modules/paginator/components/Paginator.tsx
index cc7c1f38f..26e007dda 100644
--- a/react/src/dashboard/modules/paginator/components/Paginator.tsx
+++ b/react/src/dashboard/modules/paginator/components/Paginator.tsx
@@ -127,6 +127,7 @@ export default function Paginator({
 
             <div className="table-pagination-navigation">
                 <button
+                    type="button"
                     onClick={() => setPage(1)}
                     onKeyDown={clickOnKeyEnter}
                     tabIndex={meta.current_page === 1 ? undefined : 0}
@@ -137,6 +138,7 @@ export default function Paginator({
                 {pages.map((page) => (
                     <button
                         key={page}
+                        type="button"
                         tabIndex={0}
                         onClick={() => setPage(page)}
                         disabled={loading && meta.current_page !== page && loadingPage !== page}
@@ -151,6 +153,7 @@ export default function Paginator({
                     </button>
                 ))}
                 <button
+                    type="button"
                     onClick={() => setPage(meta.last_page)}
                     onKeyDown={clickOnKeyEnter}
                     disabled={loading || meta.current_page === meta.last_page}
diff --git a/react/src/dashboard/modules/state_router/StateNavLink.tsx b/react/src/dashboard/modules/state_router/StateNavLink.tsx
index 583edca44..ebe154771 100644
--- a/react/src/dashboard/modules/state_router/StateNavLink.tsx
+++ b/react/src/dashboard/modules/state_router/StateNavLink.tsx
@@ -1,5 +1,5 @@
 import { NavLink, useHref } from 'react-router';
-import React, { HTMLAttributes, ReactElement } from 'react';
+import React, { HTMLAttributes, ReactNode } from 'react';
 import { getSafeStateRouteUrl, getStateRouteUrl, useNavigateState } from './Router';
 import classNames from 'classnames';
 
@@ -26,7 +26,7 @@ export default function StateNavLink({
     params?: object;
     query?: object;
     state?: object;
-    children: ReactElement | Array<ReactElement | string> | string;
+    children: ReactNode | Array<ReactNode>;
     disabled?: boolean;
     target?: string;
     activeClass?: string;
diff --git a/react/src/dashboard/props/models/Organization.tsx b/react/src/dashboard/props/models/Organization.tsx
index 4359996f4..465b76978 100644
--- a/react/src/dashboard/props/models/Organization.tsx
+++ b/react/src/dashboard/props/models/Organization.tsx
@@ -5,6 +5,37 @@ import ReservationField from './ReservationField';
 import Office from './Office';
 import Employee from './Employee';
 
+export enum Permission {
+    MANAGE_ORGANIZATION = 'manage_organization',
+    MANAGE_FUNDS = 'manage_funds',
+    MANAGE_FUND_TEXTS = 'manage_fund_texts',
+    MANAGE_PROVIDERS = 'manage_providers',
+    MANAGE_PROVIDER_FUNDS = 'manage_provider_funds',
+    MANAGE_PRODUCTS = 'manage_products',
+    MANAGE_OFFICES = 'manage_offices',
+    MANAGE_VALIDATORS = 'manage_validators',
+    MANAGE_EMPLOYEES = 'manage_employees',
+    MANAGE_VOUCHERS = 'manage_vouchers',
+    VIEW_VOUCHERS = 'view_vouchers',
+    MANAGE_IMPLEMENTATION = 'manage_implementation',
+    MANAGE_IMPLEMENTATION_CMS = 'manage_implementation_cms',
+    MANAGE_IMPLEMENTATION_NOTIFICATIONS = 'manage_implementation_notifications',
+    MANAGE_BANK_CONNECTIONS = 'manage_bank_connections',
+    MANAGE_TRANSACTION_BULKS = 'manage_transaction_bulks',
+    MANAGE_REIMBURSEMENTS = 'manage_reimbursements',
+    VIEW_FINANCES = 'view_finances',
+    VALIDATE_RECORDS = 'validate_records',
+    SCAN_VOUCHERS = 'scan_vouchers',
+    VIEW_FUNDS = 'view_funds',
+    MAKE_DIRECT_PAYMENTS = 'make_direct_payments',
+    MANAGE_BI_CONNECTION = 'manage_bi_connection',
+    MANAGE_PAYMENT_METHODS = 'manage_payment_methods',
+    VIEW_FUNDS_EXTRA_PAYMENTS = 'view_funds_extra_payments',
+    MANAGE_PAYOUTS = 'manage_payouts',
+    VIEW_IDENTITIES = 'view_identities',
+    MANAGE_IDENTITIES = 'manage_identities',
+}
+
 export interface SponsorProviderOrganization extends Organization {
     funds: Array<{
         id: number;
@@ -85,6 +116,9 @@ export default interface Organization {
     allow_pre_checks?: boolean;
     allow_payouts?: boolean;
     allow_profiles?: boolean;
+    allow_profiles_create?: boolean;
+    allow_profiles_relations?: boolean;
+    allow_profiles_households?: boolean;
     allow_2fa_restrictions?: boolean;
     allow_reservation_custom_fields: boolean;
     auth_2fa_funds_policy: 'optional' | 'required' | 'restrict_features';
@@ -96,7 +130,7 @@ export default interface Organization {
     tags: Array<Tag>;
     logo?: Media;
     business_type: BusinessType;
-    permissions?: Array<string>;
+    permissions?: Array<Permission>;
     offices_count: number;
     offices: Array<Office>;
     can_view_provider_extra_payments?: boolean;
diff --git a/react/src/dashboard/props/models/Profile.tsx b/react/src/dashboard/props/models/Profile.tsx
index 32153c55e..1c1b83f08 100644
--- a/react/src/dashboard/props/models/Profile.tsx
+++ b/react/src/dashboard/props/models/Profile.tsx
@@ -1,11 +1,11 @@
-import { ProfileBankAccount, ProfileRecord, ProfileRecordTypes } from './Sponsor/SponsorIdentity';
+import { ProfileBankAccount, ProfileRecord, ProfileRecordType } from './Sponsor/SponsorIdentity';
 
 export default interface Profile {
     bsn: boolean;
     email?: string;
     email_verified?: Array<string>;
     profile?: boolean;
-    records?: { [key in ProfileRecordTypes]: Array<ProfileRecord> };
+    records?: { [key in ProfileRecordType]: Array<ProfileRecord> };
     bank_accounts?: Array<ProfileBankAccount>;
     created_at?: string;
     created_at_locale?: string;
diff --git a/react/src/dashboard/props/models/RecordType.tsx b/react/src/dashboard/props/models/RecordType.tsx
index 70c616bff..2f6556099 100644
--- a/react/src/dashboard/props/models/RecordType.tsx
+++ b/react/src/dashboard/props/models/RecordType.tsx
@@ -1,9 +1,10 @@
 import RecordTypeOption from './RecordTypeOption';
 import RecordTypeOperator from './RecordTypeOperator';
+import { ProfileRecordType } from './Sponsor/SponsorIdentity';
 
 export default interface RecordType {
     id: number;
-    key: string;
+    key: ProfileRecordType;
     type: 'number' | 'string' | 'select' | 'bool' | 'date' | 'iban' | 'email' | 'select_number';
     control_type: 'text' | 'select' | 'checkbox' | 'date' | 'number' | 'step' | 'currency';
     system: boolean;
diff --git a/react/src/dashboard/props/models/Sponsor/Household.tsx b/react/src/dashboard/props/models/Sponsor/Household.tsx
new file mode 100644
index 000000000..e8743bc2d
--- /dev/null
+++ b/react/src/dashboard/props/models/Sponsor/Household.tsx
@@ -0,0 +1,20 @@
+export default interface Household {
+    id: number;
+    uid: string;
+    organization_id: number;
+    living_arrangement?: string;
+    count_people?: number;
+    count_minors?: number;
+    count_adults?: number;
+    city?: string;
+    street?: string;
+    house_nr?: string;
+    house_nr_addition?: string;
+    postal_code?: string;
+    neighborhood_name?: string;
+    municipality_name?: string;
+    members_count?: number;
+    removable?: boolean;
+    created_at?: string;
+    updated_at?: string;
+}
diff --git a/react/src/dashboard/props/models/Sponsor/HouseholdProfile.tsx b/react/src/dashboard/props/models/Sponsor/HouseholdProfile.tsx
new file mode 100644
index 000000000..3ed354d6a
--- /dev/null
+++ b/react/src/dashboard/props/models/Sponsor/HouseholdProfile.tsx
@@ -0,0 +1,12 @@
+import SponsorIdentity from './SponsorIdentity';
+
+export default interface HouseholdProfile {
+    id: number;
+    household_id: number;
+    profile_id: number;
+    created_at: string;
+    created_at_locale: string;
+    identity?: SponsorIdentity;
+    updated_at: string;
+    updated_at_locale: string;
+}
diff --git a/react/src/dashboard/props/models/Sponsor/SponsorIdentity.tsx b/react/src/dashboard/props/models/Sponsor/SponsorIdentity.tsx
index e0ead9dec..899d3ba76 100644
--- a/react/src/dashboard/props/models/Sponsor/SponsorIdentity.tsx
+++ b/react/src/dashboard/props/models/Sponsor/SponsorIdentity.tsx
@@ -35,7 +35,7 @@ export type ProfileRecord = {
     created_at_locale: string;
 };
 
-export type ProfileRecordTypes =
+export type ProfileRecordType =
     | 'given_name'
     | 'family_name'
     | 'telephone'
@@ -45,25 +45,40 @@ export type ProfileRecordTypes =
     | 'street'
     | 'house_number'
     | 'house_number_addition'
-    | 'client_number'
     | 'postal_code'
     | 'house_composition'
-    | 'gender'
+    | 'municipality_name'
     | 'neighborhood_name'
+    | 'client_number'
+    | 'gender'
     | 'living_arrangement'
     | 'marital_status'
-    | 'municipality_name';
+    | 'net_worth'
+    | 'adults_nth'
+    | 'primary_email'
+    // address field (not record type)
+    | 'house_nr'
+    | 'house_nr_addition';
 
-export type ProfileRecords = { [key in ProfileRecordTypes]: RecordType };
-export type ProfileRecordValues = { [key in ProfileRecordTypes]: string };
+export type ProfileRecords = { [key in ProfileRecordType]: RecordType };
+export type ProfileRecordValues = { [key in ProfileRecordType]: string };
 
 export default interface SponsorIdentity {
     id: number;
     bsn?: string;
+    type?: 'profile' | 'voucher' | 'employee';
+    type_locale?: string;
     email?: string;
     email_verified?: Array<string>;
+    employee_id?: number;
+    employee_email?: string;
     address?: string;
-    records?: { [key in ProfileRecordTypes]: Array<ProfileRecord> };
+    records?: { [key in ProfileRecordType]: Array<ProfileRecord> };
+    profile?: {
+        id: number;
+        identity_id: number;
+        organization_id: number;
+    };
     bank_accounts?: Array<ProfileBankAccount>;
     count_vouchers: number;
     count_vouchers_active: number;
diff --git a/react/src/dashboard/props/models/Sponsor/SponsorProfileRelation.tsx b/react/src/dashboard/props/models/Sponsor/SponsorProfileRelation.tsx
new file mode 100644
index 000000000..0e6e566c6
--- /dev/null
+++ b/react/src/dashboard/props/models/Sponsor/SponsorProfileRelation.tsx
@@ -0,0 +1,26 @@
+import SponsorIdentity from './SponsorIdentity';
+
+export default interface SponsorProfileRelation {
+    id: number;
+    // relations
+    identity: SponsorIdentity;
+    profile_id: number;
+    identity_id: number;
+    related_identity: SponsorIdentity;
+    related_profile_id: number;
+    related_identity_id: number;
+
+    // props
+    type: string;
+    type_locale: string;
+    subtype: string;
+    subtype_locale: string;
+    living_together: boolean;
+    living_together_locale: boolean;
+
+    // timestamps
+    created_at: string;
+    created_at_locale: string;
+    updated_at: string;
+    updated_at_locale: string;
+}
diff --git a/react/src/dashboard/router/routes.tsx b/react/src/dashboard/router/routes.tsx
index 1edc35538..d27b7b265 100644
--- a/react/src/dashboard/router/routes.tsx
+++ b/react/src/dashboard/router/routes.tsx
@@ -79,7 +79,10 @@ import OrganizationFunds from '../components/pages/organizations-funds/Organizat
 import OrganizationsFundsShow from '../components/pages/organizations-funds-show/OrganizationsFundsShow';
 import OrganizationsFundsEdit from '../components/pages/organizations-funds-edit/OrganizationsFundsEdit';
 import OrganizationsFundsSecurity from '../components/pages/organizations-funds-security/OrganizationsFundsSecurity';
+import Identities from '../components/pages/identities/Identities';
 import IdentitiesShow from '../components/pages/identitities-show/IdentitiesShow';
+import Households from '../components/pages/households/Households';
+import HouseholdsShow from '../components/pages/households/HouseholdsShow';
 import PreCheck from '../components/pages/pre-check/PreCheck';
 import BiConnection from '../components/pages/bi-connection/BiConnection';
 import ThrowError from '../components/pages_system/ThrowError';
@@ -91,7 +94,6 @@ import PayoutsView from '../components/pages/payouts-view/PayoutsView';
 import Products from '../components/pages/products/Products';
 import SponsorProducts from '../components/pages/sponsor-products/SponsorProducts';
 import SponsorProductView from '../components/pages/sponsor-product/SponsorProductView';
-import Identities from '../components/pages/identities/Identities';
 import OrganizationsTranslations from '../components/pages/organizations-translations/OrganizationsTranslations';
 import ImplementationsTranslations from '../components/pages/implementations-cookies/ImplementationsTranslations';
 import FundForms from '../components/pages/fund-forms/FundForms';
@@ -231,6 +233,17 @@ router.state('identities-show', <IdentitiesShow />, {
     fallbackState: 'organizations',
 });
 
+router.state('households', <Households />, {
+    path: `/organisaties/:organizationId/huishoudens`,
+    altPath: `/organizations/:organizationId/households`,
+});
+
+router.state('households-show', <HouseholdsShow />, {
+    path: `/organisaties/:organizationId/huishoudens/:id`,
+    altPath: `/organizations/:organizationId/households/:id`,
+    fallbackState: 'organizations',
+});
+
 router.state('payout', <PayoutsView />, {
     path: `/organisaties/:organizationId/uitbetalingen/:address`,
     altPath: `/organizations/:organizationId/payouts/:address`,
diff --git a/react/src/dashboard/services/FundService.ts b/react/src/dashboard/services/FundService.ts
index 9933030f6..5a8bd6162 100644
--- a/react/src/dashboard/services/FundService.ts
+++ b/react/src/dashboard/services/FundService.ts
@@ -9,12 +9,12 @@ import SponsorIdentity, { SponsorIdentityCounts } from '../props/models/Sponsor/
 import Papa from 'papaparse';
 import SponsorProduct from '../props/models/Sponsor/SponsorProduct';
 import {
-    ProviderFinancialStatistics,
     FinancialOverview,
+    ProviderFinancialStatistics,
 } from '../components/pages/financial-dashboard/types/FinancialStatisticTypes';
 import { ConfigurableTableColumn } from '../components/pages/vouchers/hooks/useConfigurableTable';
 import { hasPermission } from '../helpers/utils';
-import Organization from '../props/models/Organization';
+import Organization, { Permission } from '../props/models/Organization';
 import Product from '../props/models/Product';
 
 export class FundService<T = Fund> {
@@ -29,10 +29,9 @@ export class FundService<T = Fund> {
      * @param data
      */
     public prefix = '/platform/organizations';
-    public prefix_public = '/platform/funds';
 
     /**
-     * Fetch list
+     * Fetch a list
      */
     public list(
         company_id: number,
@@ -103,15 +102,6 @@ export class FundService<T = Fund> {
         return this.apiRequest.get(`${this.prefix}/${company_id}/funds/${fund_id}/top-up-transactions`, data);
     }
 
-    public readIdentity(
-        company_id: number,
-        fund_id: number,
-        id: number,
-        data: object = {},
-    ): Promise<ApiResponseSingle<SponsorIdentity>> {
-        return this.apiRequest.get(`${this.prefix}/${company_id}/funds/${fund_id}/identities/${id}`, data);
-    }
-
     public listIdentities(
         company_id: number,
         fund_id: number,
@@ -258,7 +248,7 @@ export class FundService<T = Fund> {
         const list = [
             'name',
             'implementation',
-            funds_type == 'active' && hasPermission(organization, 'view_finances') ? 'remaining' : null,
+            funds_type == 'active' && hasPermission(organization, Permission.VIEW_FINANCES) ? 'remaining' : null,
             funds_type == 'active' ? 'requester_count' : null,
             'status',
         ].filter((item) => item);
diff --git a/react/src/dashboard/services/HouseholdProfilesService.ts b/react/src/dashboard/services/HouseholdProfilesService.ts
new file mode 100644
index 000000000..ab714d881
--- /dev/null
+++ b/react/src/dashboard/services/HouseholdProfilesService.ts
@@ -0,0 +1,60 @@
+import ApiResponse, { ApiResponseSingle } from '../props/ApiResponses';
+import { useState } from 'react';
+import ApiRequestService from './ApiRequestService';
+import HouseholdProfile from '../props/models/Sponsor/HouseholdProfile';
+
+export class HouseholdProfilesService<T = HouseholdProfile> {
+    /**
+     * @param apiRequest
+     */
+    public constructor(protected apiRequest: ApiRequestService<T> = new ApiRequestService<T>()) {}
+
+    /**
+     * Url prefix
+     *
+     * @param data
+     */
+    public prefix = '/platform/organizations';
+
+    /**
+     * Fetch list
+     * @param organizationId
+     * @param householdId
+     * @param query
+     */
+    public list(organizationId: number, householdId: number, query: object = {}): Promise<ApiResponse<T>> {
+        return this.apiRequest.get(
+            `${this.prefix}/${organizationId}/sponsor/households/${householdId}/household-profiles`,
+            query,
+        );
+    }
+
+    /**
+     * Store household member
+     * @param organizationId
+     * @param householdId
+     * @param data
+     */
+    public store(organizationId: number, householdId: number, data: object = {}): Promise<ApiResponseSingle<T>> {
+        return this.apiRequest.post(
+            `${this.prefix}/${organizationId}/sponsor/households/${householdId}/household-profiles`,
+            data,
+        );
+    }
+
+    /**
+     * Delete household member
+     * @param organizationId
+     * @param householdId
+     * @param memberId
+     */
+    public delete(organizationId: number, householdId: number, memberId: number): Promise<ApiResponseSingle<null>> {
+        return this.apiRequest.delete(
+            `${this.prefix}/${organizationId}/sponsor/households/${householdId}/household-profiles/${memberId}`,
+        );
+    }
+}
+
+export default function useHouseholdProfilesService(): HouseholdProfilesService {
+    return useState(new HouseholdProfilesService())[0];
+}
diff --git a/react/src/dashboard/services/HouseholdsService.ts b/react/src/dashboard/services/HouseholdsService.ts
new file mode 100644
index 000000000..3e75125e0
--- /dev/null
+++ b/react/src/dashboard/services/HouseholdsService.ts
@@ -0,0 +1,78 @@
+import ApiResponse, { ApiResponseSingle, ResponseSimple } from '../props/ApiResponses';
+import { useState } from 'react';
+import ApiRequestService from './ApiRequestService';
+import { ConfigurableTableColumn } from '../components/pages/vouchers/hooks/useConfigurableTable';
+import Household from '../props/models/Sponsor/Household';
+import { ExportFieldProp } from '../components/modals/ModalExportDataSelect';
+
+export class HouseholdsService<T = Household> {
+    /**
+     * @param apiRequest
+     */
+    public constructor(protected apiRequest: ApiRequestService<T> = new ApiRequestService<T>()) {}
+
+    /**
+     * Url prefix
+     *
+     * @param data
+     */
+    public prefix = '/platform/organizations';
+
+    public store(organizationId: number, data: object = {}): Promise<ApiResponseSingle<T>> {
+        return this.apiRequest.post(`${this.prefix}/${organizationId}/sponsor/households`, data);
+    }
+
+    public list(organizationId: number, query: object = {}): Promise<ApiResponse<T>> {
+        return this.apiRequest.get(`${this.prefix}/${organizationId}/sponsor/households`, query);
+    }
+
+    public read(organizationId: number, id: number): Promise<ApiResponseSingle<T>> {
+        return this.apiRequest.get(`${this.prefix}/${organizationId}/sponsor/households/${id}`);
+    }
+
+    public update(organizationId: number, id: number, data: object): Promise<ApiResponseSingle<T>> {
+        return this.apiRequest.patch(`${this.prefix}/${organizationId}/sponsor/households/${id}`, data);
+    }
+
+    public delete(organizationId: number, id: number): Promise<ApiResponseSingle<T>> {
+        return this.apiRequest.delete(`${this.prefix}/${organizationId}/sponsor/households/${id}`);
+    }
+
+    public export(organizationId: number, filters = {}): Promise<ResponseSimple<ArrayBuffer>> {
+        return this.apiRequest.get(`${this.prefix}/${organizationId}/sponsor/households/export`, filters, {
+            responseType: 'arraybuffer',
+        });
+    }
+
+    public exportFields(organizationId: number): Promise<ApiResponseSingle<Array<ExportFieldProp>>> {
+        return this.apiRequest.get(`${this.prefix}/${organizationId}/sponsor/households/export-fields`);
+    }
+
+    public getColumns(): Array<ConfigurableTableColumn> {
+        const list = [
+            'id',
+            'member_count',
+            'children_count',
+            'parent_count',
+            'city',
+            'postal_code',
+            'house_number',
+            'neighborhood',
+            'municipality',
+        ].filter((item) => item);
+
+        return list.map((key) => ({
+            key,
+            label: `households.labels.${key}`,
+            tooltip: {
+                key: key,
+                title: `households.labels.${key}`,
+                description: `households.tooltips.${key}`,
+            },
+        }));
+    }
+}
+
+export default function useHouseholdsService(): HouseholdsService {
+    return useState(new HouseholdsService())[0];
+}
diff --git a/react/src/dashboard/services/OrganizationService.ts b/react/src/dashboard/services/OrganizationService.ts
index 83e273f5c..44fc546ac 100644
--- a/react/src/dashboard/services/OrganizationService.ts
+++ b/react/src/dashboard/services/OrganizationService.ts
@@ -1,7 +1,7 @@
 import ApiResponse, { ApiResponseSingle, ResponseSimple } from '../props/ApiResponses';
 import { useState } from 'react';
 import ApiRequestService from './ApiRequestService';
-import Organization, { SponsorProviderOrganization, TranslationStats } from '../props/models/Organization';
+import Organization, { Permission, SponsorProviderOrganization, TranslationStats } from '../props/models/Organization';
 import { hasPermission } from '../helpers/utils';
 import OrganizationFeatureStatuses from './types/OrganizationFeatureStatuses';
 import FundProvider from '../props/models/FundProvider';
@@ -194,20 +194,23 @@ export class OrganizationService<T = Organization> {
     public getRoutePermissionsMap(type = 'sponsor') {
         return {
             sponsor: [
-                { permissions: ['manage_funds', 'view_finances', 'view_funds'], name: 'organization-funds' },
-                { permissions: ['manage_vouchers', 'view_vouchers'], name: 'vouchers' },
-                { permissions: ['view_finances'], name: 'transactions' },
-                { permissions: ['manage_payouts'], name: 'payouts' },
-                { permissions: ['validate_records'], name: 'csv-validation' },
-                { permissions: ['view_identities', 'manage_identities'], name: 'identities' },
+                {
+                    permissions: [Permission.MANAGE_FUNDS, Permission.VIEW_FINANCES, Permission.VIEW_FUNDS],
+                    name: 'organization-funds',
+                },
+                { permissions: [Permission.MANAGE_VOUCHERS, Permission.VIEW_VOUCHERS], name: 'vouchers' },
+                { permissions: [Permission.VIEW_FINANCES], name: 'transactions' },
+                { permissions: [Permission.MANAGE_PAYOUTS], name: 'payouts' },
+                { permissions: [Permission.VALIDATE_RECORDS], name: 'csv-validation' },
+                { permissions: [Permission.VIEW_IDENTITIES, Permission.MANAGE_IDENTITIES], name: 'identities' },
             ],
             provider: [
-                { permissions: ['manage_employees'], name: 'provider-overview' },
-                { permissions: ['manage_offices'], name: 'offices' },
-                { permissions: ['manage_products'], name: 'products' },
-                { permissions: ['view_finances'], name: 'transactions' },
-                { permissions: ['validate_records'], name: 'csv-validation' },
-                { permissions: ['scan_vouchers'], name: 'reservations' },
+                { permissions: [Permission.MANAGE_EMPLOYEES], name: 'provider-overview' },
+                { permissions: [Permission.MANAGE_OFFICES], name: 'offices' },
+                { permissions: [Permission.MANAGE_PRODUCTS], name: 'products' },
+                { permissions: [Permission.VIEW_FINANCES], name: 'transactions' },
+                { permissions: [Permission.VALIDATE_RECORDS], name: 'csv-validation' },
+                { permissions: [Permission.SCAN_VOUCHERS], name: 'reservations' },
             ],
             validator: [{ permissions: ['validate_records', 'manage_validators'], name: 'fund-requests' }],
         }[type];
diff --git a/react/src/dashboard/services/SponsorIdentitesService.ts b/react/src/dashboard/services/SponsorIdentitesService.ts
index f6d5d3e2c..26d2ee1fe 100644
--- a/react/src/dashboard/services/SponsorIdentitesService.ts
+++ b/react/src/dashboard/services/SponsorIdentitesService.ts
@@ -6,8 +6,9 @@ import SponsorIdentity, { ProfileBankAccount } from '../props/models/Sponsor/Spo
 import { ExportFieldProp } from '../components/modals/ModalExportDataSelect';
 import Organization from '../props/models/Organization';
 import IdentitiesApiPerson from '../props/models/IdentitiesApiPerson';
+import SponsorProfileRelation from '../props/models/Sponsor/SponsorProfileRelation';
 
-export class SponsorIdentitiesService<T = SponsorIdentity, B = ProfileBankAccount> {
+export class SponsorIdentitiesService<T = SponsorIdentity, B = ProfileBankAccount, R = SponsorProfileRelation> {
     /**
      * @param apiRequest
      */
@@ -20,9 +21,10 @@ export class SponsorIdentitiesService<T = SponsorIdentity, B = ProfileBankAccoun
      */
     public prefix = '/platform/organizations';
 
-    /**
-     * Fetch list
-     */
+    public store(organizationId: number, data: object = {}): Promise<ApiResponseSingle<T>> {
+        return this.apiRequest.post(`${this.prefix}/${organizationId}/sponsor/identities`, data);
+    }
+
     public list(organizationId: number, query: object = {}): Promise<ApiResponse<T>> {
         return this.apiRequest.get(`${this.prefix}/${organizationId}/sponsor/identities`, query);
     }
@@ -82,6 +84,63 @@ export class SponsorIdentitiesService<T = SponsorIdentity, B = ProfileBankAccoun
         return this.apiRequest.get(`${this.prefix}/${organizationId}/sponsor/identities/${id}/person`, data);
     }
 
+    /**
+     * List relations
+     * @param organizationId
+     * @param identityId
+     * @param query
+     */
+    public listRelations(organizationId: number, identityId: number, query: object = {}): Promise<ApiResponse<R>> {
+        return this.apiRequest.get(
+            `${this.prefix}/${organizationId}/sponsor/identities/${identityId}/relations`,
+            query,
+        );
+    }
+
+    /**
+     * Store relation
+     * @param organizationId
+     * @param identityId
+     * @param data
+     */
+    public storeRelation(organizationId: number, identityId: number, data: object): Promise<ApiResponseSingle<R>> {
+        return this.apiRequest.post(
+            `${this.prefix}/${organizationId}/sponsor/identities/${identityId}/relations`,
+            data,
+        );
+    }
+
+    /**
+     * Update relation
+     * @param organizationId
+     * @param identityId
+     * @param id
+     * @param data
+     */
+    public updateRelation(
+        organizationId: number,
+        identityId: number,
+        id: number,
+        data: object,
+    ): Promise<ApiResponseSingle<R>> {
+        return this.apiRequest.patch(
+            `${this.prefix}/${organizationId}/sponsor/identities/${identityId}/relations/${id}`,
+            data,
+        );
+    }
+
+    /**
+     * Delete relation
+     * @param organizationId
+     * @param identityId
+     * @param id
+     */
+    public deleteRelation(organizationId: number, identityId: number, id: number): Promise<ApiResponseSingle<null>> {
+        return this.apiRequest.delete(
+            `${this.prefix}/${organizationId}/sponsor/identities/${identityId}/relations/${id}`,
+        );
+    }
+
     public export(organization_id: number, filters = {}): Promise<ResponseSimple<ArrayBuffer>> {
         return this.apiRequest.get(`${this.prefix}/${organization_id}/sponsor/identities/export`, filters, {
             responseType: 'arraybuffer',
@@ -95,6 +154,7 @@ export class SponsorIdentitiesService<T = SponsorIdentity, B = ProfileBankAccoun
     public getColumns(organization: Organization): Array<ConfigurableTableColumn> {
         const list = [
             'id',
+            'type',
             'given_name',
             'family_name',
             'email',
@@ -122,6 +182,29 @@ export class SponsorIdentitiesService<T = SponsorIdentity, B = ProfileBankAccoun
             },
         }));
     }
+
+    public getColumnsRelations(organization: Organization): Array<ConfigurableTableColumn> {
+        const list = [
+            'id',
+            'relation_type',
+            'relation_subtype',
+            'relation_living_together',
+            'given_name',
+            'family_name',
+            'email',
+            organization.bsn_enabled ? 'bsn' : null,
+        ].filter((item) => item);
+
+        return list.map((key) => ({
+            key,
+            label: `identities.labels.${key}`,
+            tooltip: {
+                key: key,
+                title: `identities.labels.${key}`,
+                description: `identities.tooltips.${key}`,
+            },
+        }));
+    }
 }
 
 export default function useSponsorIdentitiesService(): SponsorIdentitiesService {
diff --git a/react/src/webshop/components/pages/profile/Profile.tsx b/react/src/webshop/components/pages/profile/Profile.tsx
index 468700f7b..a7725c12a 100644
--- a/react/src/webshop/components/pages/profile/Profile.tsx
+++ b/react/src/webshop/components/pages/profile/Profile.tsx
@@ -4,7 +4,7 @@ import BlockShowcaseProfile from '../../elements/block-showcase/BlockShowcasePro
 import BlockKeyValueList from '../../elements/block-key-value-list/BlockKeyValueList';
 import RecordType from '../../../../dashboard/props/models/RecordType';
 import ProfileModel from '../../../../dashboard/props/models/Profile';
-import { ProfileRecords, ProfileRecordTypes } from '../../../../dashboard/props/models/Sponsor/SponsorIdentity';
+import { ProfileRecords, ProfileRecordType } from '../../../../dashboard/props/models/Sponsor/SponsorIdentity';
 import useSetProgress from '../../../../dashboard/hooks/useSetProgress';
 import { useRecordTypeService } from '../../../../dashboard/services/RecordTypeService';
 import IdentityRecordKeyValueListHistory from './elements/IdentityRecordKeyValueListHistory';
@@ -44,7 +44,7 @@ export default function Profile() {
         setProgress(0);
 
         recordTypeService
-            .list<RecordType & { key: ProfileRecordTypes }>()
+            .list<RecordType & { key: ProfileRecordType }>()
             .then((res) => setRecordTypes(res.data))
             .finally(() => setProgress(100));
     }, [recordTypeService, setProgress]);
diff --git a/react/src/webshop/modules/state_router/StateNavLink.tsx b/react/src/webshop/modules/state_router/StateNavLink.tsx
index 979657f19..656d6f5f4 100644
--- a/react/src/webshop/modules/state_router/StateNavLink.tsx
+++ b/react/src/webshop/modules/state_router/StateNavLink.tsx
@@ -1,5 +1,5 @@
 import { NavLink } from 'react-router';
-import React, { HTMLAttributes, ReactElement } from 'react';
+import React, { HTMLAttributes, ReactNode } from 'react';
 import { getStateRouteUrl, useNavigateState } from './Router';
 import classNames from 'classnames';
 
@@ -26,7 +26,7 @@ export default function StateNavLink({
     params?: object;
     query?: object;
     state?: object;
-    children: ReactElement | Array<ReactElement | string> | string;
+    children: ReactNode | Array<ReactNode>;
     disabled?: boolean;
     target?: string;
     activeClass?: string;

From 44afeaf747c8601cc737c765f47f323498901e87 Mon Sep 17 00:00:00 2001
From: dev-rminds <dev@rminds.nl>
Date: Mon, 22 Sep 2025 10:22:13 +0300
Subject: [PATCH 22/29] fix page reload on form submit from bi settings page

---
 .../dashboard/components/pages/bi-connection/BiConnection.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/react/src/dashboard/components/pages/bi-connection/BiConnection.tsx b/react/src/dashboard/components/pages/bi-connection/BiConnection.tsx
index 6dab4aa58..685a3e22c 100644
--- a/react/src/dashboard/components/pages/bi-connection/BiConnection.tsx
+++ b/react/src/dashboard/components/pages/bi-connection/BiConnection.tsx
@@ -260,7 +260,7 @@ export default function BiConnection() {
             </div>
 
             <div className="card">
-                <form className="form">
+                <form className="form" onSubmit={form.submit}>
                     <div className="card-header">
                         <div className="card-title flex flex-grow">{translate('bi_connection.title')}</div>
                         <BlockLabelTabs
@@ -606,7 +606,7 @@ export default function BiConnection() {
                                 {translate('bi_connection.buttons.cancel')}
                             </StateNavLink>
 
-                            <button type="submit" onClick={() => form.submit()} className="button button-primary">
+                            <button type="submit" className="button button-primary">
                                 {translate('bi_connection.buttons.submit')}
                             </button>
                         </div>

From b9a2cd720e799d3ef9f28cf17da6f2f0ce470e73 Mon Sep 17 00:00:00 2001
From: dev-rminds <dev@rminds.nl>
Date: Mon, 22 Sep 2025 10:44:43 +0300
Subject: [PATCH 23/29] fix notes table vertical alignment and dropdown menu
 not being closed when delete item is selected

---
 .../elements/block-card-notes/BlockCardNotes.tsx  | 15 +++++++++------
 .../pages/fund-requests-view/FundRequestsView.tsx |  2 +-
 .../pages/identitities-show/IdentitiesShow.tsx    |  2 +-
 .../reimbursements-view/ReimbursementsView.tsx    |  2 +-
 4 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/react/src/dashboard/components/elements/block-card-notes/BlockCardNotes.tsx b/react/src/dashboard/components/elements/block-card-notes/BlockCardNotes.tsx
index fd9203879..ac5970592 100644
--- a/react/src/dashboard/components/elements/block-card-notes/BlockCardNotes.tsx
+++ b/react/src/dashboard/components/elements/block-card-notes/BlockCardNotes.tsx
@@ -23,13 +23,13 @@ import { useOrganizationService } from '../../../services/OrganizationService';
 import TableTopScroller from '../tables/TableTopScroller';
 
 export default function BlockCardNotes({
-    isAssigned,
+    showCreate,
     fetchNotes,
     deleteNote,
     storeNote,
     fetchNotesRef,
 }: {
-    isAssigned: boolean;
+    showCreate: boolean;
     fetchNotes: (value: FilterModel) => Promise<ApiResponse<Note>>;
     deleteNote: (note: Note) => Promise<ApiResponseSingle<null>>;
     storeNote: (values: FormValuesModel) => Promise<ApiResponseSingle<Note>>;
@@ -131,7 +131,7 @@ export default function BlockCardNotes({
                     {translate('notes.header.title')}({notes.meta.total})
                 </div>
                 <div className="button-group">
-                    {isAssigned && (
+                    {showCreate && (
                         <div className="button button-sm button-primary" onClick={onAddNote} data-dusk="addNoteBtn">
                             <em className="mdi mdi-plus icon-start" />
                             {translate('notes.buttons.add_new')}
@@ -146,7 +146,7 @@ export default function BlockCardNotes({
                         {configsElement}
 
                         <TableTopScroller>
-                            <table className="table table-align-top">
+                            <table className="table">
                                 {headElement}
 
                                 <tbody>
@@ -167,11 +167,14 @@ export default function BlockCardNotes({
                                                 {note.employee.identity_address === identity.address && (
                                                     <TableRowActions
                                                         dataDusk={`noteMenuBtn${note.id}`}
-                                                        content={() => (
+                                                        content={(e) => (
                                                             <div className="dropdown dropdown-actions">
                                                                 <div
                                                                     className="dropdown-item"
-                                                                    onClick={() => onDeleteNote(note)}
+                                                                    onClick={() => {
+                                                                        e?.close();
+                                                                        onDeleteNote(note);
+                                                                    }}
                                                                     data-dusk="deleteNoteBtn">
                                                                     <em className="mdi mdi-delete-outline icon-start" />
                                                                     Verwijderen
diff --git a/react/src/dashboard/components/pages/fund-requests-view/FundRequestsView.tsx b/react/src/dashboard/components/pages/fund-requests-view/FundRequestsView.tsx
index 4ab6dd07c..b7ade3009 100644
--- a/react/src/dashboard/components/pages/fund-requests-view/FundRequestsView.tsx
+++ b/react/src/dashboard/components/pages/fund-requests-view/FundRequestsView.tsx
@@ -825,7 +825,7 @@ export default function FundRequestsView() {
             </div>
 
             <BlockCardNotes
-                isAssigned={fundRequestMeta.is_assigned}
+                showCreate={fundRequestMeta.is_assigned}
                 fetchNotes={fetchNotes}
                 deleteNote={deleteNote}
                 storeNote={storeNote}
diff --git a/react/src/dashboard/components/pages/identitities-show/IdentitiesShow.tsx b/react/src/dashboard/components/pages/identitities-show/IdentitiesShow.tsx
index 80a78ab34..bb014ef53 100644
--- a/react/src/dashboard/components/pages/identitities-show/IdentitiesShow.tsx
+++ b/react/src/dashboard/components/pages/identitities-show/IdentitiesShow.tsx
@@ -223,7 +223,7 @@ export default function IdentitiesShow() {
                 <IdentityPerson organization={activeOrganization} identityId={identity.id} />
             )}
 
-            <BlockCardNotes isAssigned={true} fetchNotes={fetchNotes} deleteNote={deleteNote} storeNote={storeNote} />
+            <BlockCardNotes showCreate={true} fetchNotes={fetchNotes} deleteNote={deleteNote} storeNote={storeNote} />
 
             <Card
                 title={'Huishouden'}
diff --git a/react/src/dashboard/components/pages/reimbursements-view/ReimbursementsView.tsx b/react/src/dashboard/components/pages/reimbursements-view/ReimbursementsView.tsx
index 9686e8520..7a34817f1 100644
--- a/react/src/dashboard/components/pages/reimbursements-view/ReimbursementsView.tsx
+++ b/react/src/dashboard/components/pages/reimbursements-view/ReimbursementsView.tsx
@@ -585,7 +585,7 @@ export default function ReimbursementsView() {
             )}
 
             <BlockCardNotes
-                isAssigned={reimbursement.employee?.identity_address === authIdentity.address}
+                showCreate={reimbursement.employee?.identity_address === authIdentity.address}
                 fetchNotes={fetchNotes}
                 deleteNote={deleteNote}
                 storeNote={storeNote}

From 92f7a963ce686b0917846f84f373181f296c1dcf Mon Sep 17 00:00:00 2001
From: dev-rminds <dev@rminds.nl>
Date: Mon, 22 Sep 2025 11:05:54 +0300
Subject: [PATCH 24/29] split cms-blocks component

---
 .../elements/cms-blocks/CmsBlocks.tsx         | 92 +------------------
 .../elements/cms-blocks/CmsBlocksItem.tsx     | 56 +++++++++++
 .../elements/cms-blocks/CmsBlocksItemLink.tsx | 39 ++++++++
 .../props/models/ImplementationPage.ts        | 22 +----
 .../props/models/ImplementationPageBlock.ts   | 15 +++
 5 files changed, 118 insertions(+), 106 deletions(-)
 create mode 100644 react/src/webshop/components/elements/cms-blocks/CmsBlocksItem.tsx
 create mode 100644 react/src/webshop/components/elements/cms-blocks/CmsBlocksItemLink.tsx
 create mode 100644 react/src/webshop/props/models/ImplementationPageBlock.ts

diff --git a/react/src/webshop/components/elements/cms-blocks/CmsBlocks.tsx b/react/src/webshop/components/elements/cms-blocks/CmsBlocks.tsx
index 30e0a8366..466f34080 100644
--- a/react/src/webshop/components/elements/cms-blocks/CmsBlocks.tsx
+++ b/react/src/webshop/components/elements/cms-blocks/CmsBlocks.tsx
@@ -1,9 +1,10 @@
 import React, { Fragment } from 'react';
 import ImplementationPage from '../../../props/models/ImplementationPage';
 import Markdown from '../markdown/Markdown';
-import useAssetUrl from '../../../hooks/useAssetUrl';
 import classNames from 'classnames';
 import Section from '../sections/Section';
+import CmsBlocksItem from './CmsBlocksItem';
+import CmsBlocksItemLink from './CmsBlocksItemLink';
 
 export default function CmsBlocks({
     page,
@@ -12,8 +13,6 @@ export default function CmsBlocks({
     page: ImplementationPage;
     largeMarkdown?: boolean;
 }) {
-    const assetUrl = useAssetUrl();
-
     if (!page.description_html && page.blocks.length === 0) {
         return null;
     }
@@ -39,92 +38,9 @@ export default function CmsBlocks({
                         {page.blocks?.map((block) => (
                             <Fragment key={block.id}>
                                 {block.button_enabled && page.blocks_per_row > 1 ? (
-                                    <a
-                                        target={block.button_target_blank ? '_blank' : '_self'}
-                                        rel={block.button_target_blank ? 'noreferrer' : ''}
-                                        href={block.button_link}
-                                        className="fund-item">
-                                        <div className="fund-media">
-                                            <img
-                                                src={
-                                                    block.media?.sizes?.public ||
-                                                    assetUrl('/assets/img/placeholders/product-small.png')
-                                                }
-                                                alt=""
-                                            />
-                                        </div>
-                                        <div className="fund-information">
-                                            {block.title && <h2 className="fund-title">{block.title}</h2>}
-                                            {block.label && (
-                                                <div className="fund-label label label-primary">{block.label}</div>
-                                            )}
-
-                                            <div className="fund-description">
-                                                <Markdown content={block.description_html} />
-                                            </div>
-
-                                            <div className="fund-button">
-                                                <span className="button button-primary fund-button-button">
-                                                    {block.button_text}
-                                                    <div
-                                                        className="mdi mdi-arrow-right icon-right"
-                                                        aria-hidden="true"
-                                                    />
-                                                </span>
-                                                <span className="button button-text button-text-primary fund-button-link">
-                                                    {block.button_text}
-                                                </span>
-                                            </div>
-                                        </div>
-                                    </a>
+                                    <CmsBlocksItemLink block={block} />
                                 ) : (
-                                    <div className="fund-item">
-                                        <div className="fund-media">
-                                            <img
-                                                src={
-                                                    block.media?.sizes?.public ||
-                                                    assetUrl('/assets/img/placeholders/product-small.png')
-                                                }
-                                                alt=""
-                                            />
-                                        </div>
-                                        <div className="fund-information">
-                                            {block.title && <h2 className="fund-title">{block.title}</h2>}
-                                            {block.label && (
-                                                <div className="fund-label label label-primary">{block.label}</div>
-                                            )}
-
-                                            <div className="fund-description">
-                                                <Markdown content={block.description_html} />
-                                            </div>
-
-                                            {block.button_enabled && (
-                                                <div className="fund-button">
-                                                    <a
-                                                        className="button button-primary fund-button-button"
-                                                        target={block.button_target_blank ? '_blank' : '_self'}
-                                                        rel={block.button_target_blank ? 'noreferrer' : ''}
-                                                        href={block.button_link}>
-                                                        {block.button_text}
-                                                        <div
-                                                            className="mdi mdi-arrow-right icon-right"
-                                                            aria-hidden="true"
-                                                        />
-                                                    </a>
-                                                    {page.blocks_per_row > 1 && (
-                                                        <a
-                                                            className="button button-text button-text-primary fund-button-link"
-                                                            target={block.button_target_blank ? '_blank' : '_self'}
-                                                            rel={block.button_target_blank ? 'noreferrer' : ''}
-                                                            href={block.button_link}
-                                                            aria-label={block.button_link_label}>
-                                                            {block.button_text}
-                                                        </a>
-                                                    )}
-                                                </div>
-                                            )}
-                                        </div>
-                                    </div>
+                                    <CmsBlocksItem block={block} blocksPerRow={page.blocks_per_row} />
                                 )}
                             </Fragment>
                         ))}
diff --git a/react/src/webshop/components/elements/cms-blocks/CmsBlocksItem.tsx b/react/src/webshop/components/elements/cms-blocks/CmsBlocksItem.tsx
new file mode 100644
index 000000000..90d676440
--- /dev/null
+++ b/react/src/webshop/components/elements/cms-blocks/CmsBlocksItem.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import Markdown from '../markdown/Markdown';
+import ImplementationPageBlock from '../../../props/models/ImplementationPageBlock';
+import useAssetUrl from '../../../hooks/useAssetUrl';
+
+export default function CmsBlocksItem({
+    block,
+    blocksPerRow,
+}: {
+    block: ImplementationPageBlock;
+    blocksPerRow: number;
+}) {
+    const assetUrl = useAssetUrl();
+
+    return (
+        <div className="fund-item">
+            <div className="fund-media">
+                <img
+                    src={block.media?.sizes?.public || assetUrl('/assets/img/placeholders/product-small.png')}
+                    alt=""
+                />
+            </div>
+            <div className="fund-information">
+                {block.title && <h2 className="fund-title">{block.title}</h2>}
+                {block.label && <div className="fund-label label label-primary">{block.label}</div>}
+
+                <div className="fund-description">
+                    <Markdown content={block.description_html} />
+                </div>
+
+                {block.button_enabled && (
+                    <div className="fund-button">
+                        <a
+                            className="button button-primary fund-button-button"
+                            target={block.button_target_blank ? '_blank' : '_self'}
+                            rel={block.button_target_blank ? 'noreferrer' : ''}
+                            href={block.button_link}>
+                            {block.button_text}
+                            <div className="mdi mdi-arrow-right icon-right" aria-hidden="true" />
+                        </a>
+                        {blocksPerRow > 1 && (
+                            <a
+                                className="button button-text button-text-primary fund-button-link"
+                                target={block.button_target_blank ? '_blank' : '_self'}
+                                rel={block.button_target_blank ? 'noreferrer' : ''}
+                                href={block.button_link}
+                                aria-label={block.button_link_label}>
+                                {block.button_text}
+                            </a>
+                        )}
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}
diff --git a/react/src/webshop/components/elements/cms-blocks/CmsBlocksItemLink.tsx b/react/src/webshop/components/elements/cms-blocks/CmsBlocksItemLink.tsx
new file mode 100644
index 000000000..d620b950a
--- /dev/null
+++ b/react/src/webshop/components/elements/cms-blocks/CmsBlocksItemLink.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import Markdown from '../markdown/Markdown';
+import ImplementationPageBlock from '../../../props/models/ImplementationPageBlock';
+import useAssetUrl from '../../../hooks/useAssetUrl';
+
+export default function CmsBlocksItemLink({ block }: { block: ImplementationPageBlock }) {
+    const assetUrl = useAssetUrl();
+
+    return (
+        <a
+            target={block.button_target_blank ? '_blank' : '_self'}
+            rel={block.button_target_blank ? 'noreferrer' : ''}
+            href={block.button_link}
+            className="fund-item">
+            <div className="fund-media">
+                <img
+                    src={block.media?.sizes?.public || assetUrl('/assets/img/placeholders/product-small.png')}
+                    alt=""
+                />
+            </div>
+            <div className="fund-information">
+                {block.title && <h2 className="fund-title">{block.title}</h2>}
+                {block.label && <div className="fund-label label label-primary">{block.label}</div>}
+
+                <div className="fund-description">
+                    <Markdown content={block.description_html} />
+                </div>
+
+                <div className="fund-button">
+                    <span className="button button-primary fund-button-button">
+                        {block.button_text}
+                        <div className="mdi mdi-arrow-right icon-right" aria-hidden="true" />
+                    </span>
+                    <span className="button button-text button-text-primary fund-button-link">{block.button_text}</span>
+                </div>
+            </div>
+        </a>
+    );
+}
diff --git a/react/src/webshop/props/models/ImplementationPage.ts b/react/src/webshop/props/models/ImplementationPage.ts
index 722bb5fd6..b6f213e30 100644
--- a/react/src/webshop/props/models/ImplementationPage.ts
+++ b/react/src/webshop/props/models/ImplementationPage.ts
@@ -1,6 +1,6 @@
-import Media from '../../../dashboard/props/models/Media';
+import ImplementationPageBlock from './ImplementationPageBlock';
 
-type ImplementationPage = {
+export default interface ImplementationPage {
     page_type?: string;
     external: boolean;
     title?: string;
@@ -9,25 +9,11 @@ type ImplementationPage = {
     blocks_per_row: number;
     description_html: string;
     external_url: string;
-    blocks: Array<{
-        id: number;
-        label: string;
-        title: string;
-        description: string;
-        description_html: string;
-        button_text: string;
-        button_link: string;
-        button_target_blank: boolean;
-        button_enabled: boolean;
-        button_link_label: string;
-        media: Media;
-    }>;
+    blocks: Array<ImplementationPageBlock>;
     faq: Array<{
         id: number;
         title: string;
         description: string;
         description_html: string;
     }>;
-};
-
-export default ImplementationPage;
+}
\ No newline at end of file
diff --git a/react/src/webshop/props/models/ImplementationPageBlock.ts b/react/src/webshop/props/models/ImplementationPageBlock.ts
new file mode 100644
index 000000000..46fe4ffa3
--- /dev/null
+++ b/react/src/webshop/props/models/ImplementationPageBlock.ts
@@ -0,0 +1,15 @@
+import Media from '../../../dashboard/props/models/Media';
+
+export default interface ImplementationPageBlock {
+    id: number;
+    label: string;
+    title: string;
+    description: string;
+    description_html: string;
+    button_text: string;
+    button_link: string;
+    button_target_blank: boolean;
+    button_enabled: boolean;
+    button_link_label: string;
+    media: Media;
+}

From 59ee0e3ac7b68200f4d78fd5e019c3ec2c4e2d63 Mon Sep 17 00:00:00 2001
From: dev-rminds <dev@rminds.nl>
Date: Mon, 22 Sep 2025 14:46:27 +0300
Subject: [PATCH 25/29] profile relations and households fixes

---
 .../pages/households/Households.tsx           | 21 +++---
 .../ModalSelectOrMakeSponsorIdentity.tsx      | 72 ++++++++++---------
 .../identities/elements/IdentitiesTable.tsx   | 21 +++---
 .../modals/ModalAddProfileRelation.tsx        | 20 +++---
 4 files changed, 70 insertions(+), 64 deletions(-)

diff --git a/react/src/dashboard/components/pages/households/Households.tsx b/react/src/dashboard/components/pages/households/Households.tsx
index bcddd137e..697437b5e 100644
--- a/react/src/dashboard/components/pages/households/Households.tsx
+++ b/react/src/dashboard/components/pages/households/Households.tsx
@@ -138,17 +138,16 @@ export default function Households() {
                 </div>
                 <div className={'card-header-filters'}>
                     <div className="block block-inline-filters">
-                        {activeOrganization?.allow_profiles_create &&
-                            hasPermission(activeOrganization, Permission.MANAGE_IDENTITIES) && (
-                                <button
-                                    type="button"
-                                    className="button button-primary button-sm"
-                                    onClick={() => editHousehold(null, fetchHouseholds)}
-                                    data-dusk="uploadTransactionsBatchButton">
-                                    <em className="mdi mdi-plus-circle" />
-                                    Aanmaken
-                                </button>
-                            )}
+                        {hasPermission(activeOrganization, Permission.MANAGE_IDENTITIES) && (
+                            <button
+                                type="button"
+                                className="button button-primary button-sm"
+                                onClick={() => editHousehold(null, fetchHouseholds)}
+                                data-dusk="uploadTransactionsBatchButton">
+                                <em className="mdi mdi-plus-circle" />
+                                Aanmaken
+                            </button>
+                        )}
 
                         <div className="form">
                             <div className="form-group">
diff --git a/react/src/dashboard/components/pages/households/modals/ModalSelectOrMakeSponsorIdentity.tsx b/react/src/dashboard/components/pages/households/modals/ModalSelectOrMakeSponsorIdentity.tsx
index d22eda190..41f7a19d7 100644
--- a/react/src/dashboard/components/pages/households/modals/ModalSelectOrMakeSponsorIdentity.tsx
+++ b/react/src/dashboard/components/pages/households/modals/ModalSelectOrMakeSponsorIdentity.tsx
@@ -155,43 +155,45 @@ export default function ModalSelectOrMakeSponsorIdentity({
                 <div className={'modal-body'}>
                     <div className="modal-section">
                         <div className="flex flex-gap flex-vertical">
-                            <FormPane title={'Find or Create person'}>
-                                <div className="block block-export-options">
-                                    <div className="export-section">
-                                        <div className="export-options">
-                                            {[
-                                                { label: 'Find a person', value: 'find' },
-                                                { label: 'Add new person', value: 'create' },
-                                            ].map((field, index) => (
-                                                <label
-                                                    key={index}
-                                                    className="export-option"
-                                                    htmlFor={`radio_action_${index}`}>
-                                                    <input
-                                                        type="radio"
-                                                        id={`radio_action_${index}`}
-                                                        checked={field.value === action}
-                                                        value={field.value}
-                                                        onChange={(e) => {
-                                                            setAction(e.target.value as 'find' | 'create');
-                                                        }}
-                                                    />
-                                                    <div className="export-option-label">
-                                                        {field.value === 'find' && (
-                                                            <em className="export-option-icon mdi mdi-magnify" />
-                                                        )}
-                                                        {field.value === 'create' && (
-                                                            <em className="export-option-icon mdi mdi-plus-circle" />
-                                                        )}
-                                                        <span>{field.label}</span>
-                                                        <div className="export-option-circle" />
-                                                    </div>
-                                                </label>
-                                            ))}
+                            {organization?.allow_profiles_create && (
+                                <FormPane title={'Find or Create person'}>
+                                    <div className="block block-export-options">
+                                        <div className="export-section">
+                                            <div className="export-options">
+                                                {[
+                                                    { label: 'Find a person', value: 'find' },
+                                                    { label: 'Add new person', value: 'create' },
+                                                ].map((field, index) => (
+                                                    <label
+                                                        key={index}
+                                                        className="export-option"
+                                                        htmlFor={`radio_action_${index}`}>
+                                                        <input
+                                                            type="radio"
+                                                            id={`radio_action_${index}`}
+                                                            checked={field.value === action}
+                                                            value={field.value}
+                                                            onChange={(e) => {
+                                                                setAction(e.target.value as 'find' | 'create');
+                                                            }}
+                                                        />
+                                                        <div className="export-option-label">
+                                                            {field.value === 'find' && (
+                                                                <em className="export-option-icon mdi mdi-magnify" />
+                                                            )}
+                                                            {field.value === 'create' && (
+                                                                <em className="export-option-icon mdi mdi-plus-circle" />
+                                                            )}
+                                                            <span>{field.label}</span>
+                                                            <div className="export-option-circle" />
+                                                        </div>
+                                                    </label>
+                                                ))}
+                                            </div>
                                         </div>
                                     </div>
-                                </div>
-                            </FormPane>
+                                </FormPane>
+                            )}
 
                             {action === 'find' ? (
                                 <FormPane title={'Search person'}>
diff --git a/react/src/dashboard/components/pages/identities/elements/IdentitiesTable.tsx b/react/src/dashboard/components/pages/identities/elements/IdentitiesTable.tsx
index bb2e85071..cc4f94c37 100644
--- a/react/src/dashboard/components/pages/identities/elements/IdentitiesTable.tsx
+++ b/react/src/dashboard/components/pages/identities/elements/IdentitiesTable.tsx
@@ -27,6 +27,8 @@ import RecordType from '../../../../props/models/RecordType';
 import { useRecordTypeService } from '../../../../services/RecordTypeService';
 import useEditProfileRecords from '../../identitities-show/hooks/useEditProfileRecords';
 import TableRowActionItem from '../../../elements/tables/TableRowActionItem';
+import { hasPermission } from '../../../../helpers/utils';
+import { Permission } from '../../../../props/models/Organization';
 
 export default function IdentitiesTable() {
     const translate = useTranslate();
@@ -122,14 +124,17 @@ export default function IdentitiesTable() {
 
                 <div className={'card-header-filters'}>
                     <div className="block block-inline-filters">
-                        <button
-                            type="button"
-                            className="button button-primary button-sm"
-                            onClick={() => createProfile(fetchIdentities)}
-                            data-dusk="uploadTransactionsBatchButton">
-                            <em className="mdi mdi-plus-circle" />
-                            Aanmaken
-                        </button>
+                        {activeOrganization?.allow_profiles_create &&
+                            hasPermission(activeOrganization, Permission.MANAGE_IDENTITIES) && (
+                                <button
+                                    type="button"
+                                    className="button button-primary button-sm"
+                                    onClick={() => createProfile(fetchIdentities)}
+                                    data-dusk="uploadTransactionsBatchButton">
+                                    <em className="mdi mdi-plus-circle" />
+                                    Aanmaken
+                                </button>
+                            )}
 
                         <div className="form">
                             <div className="form-group">
diff --git a/react/src/dashboard/components/pages/identitities-show/modals/ModalAddProfileRelation.tsx b/react/src/dashboard/components/pages/identitities-show/modals/ModalAddProfileRelation.tsx
index 884f1e185..d39fb64b8 100644
--- a/react/src/dashboard/components/pages/identitities-show/modals/ModalAddProfileRelation.tsx
+++ b/react/src/dashboard/components/pages/identitities-show/modals/ModalAddProfileRelation.tsx
@@ -157,7 +157,7 @@ export default function ModalAddProfileRelation({
                                                 label: recordTypesByKey?.given_name?.name,
                                                 value: (
                                                     <IdentityRecordKeyValueWithHistory
-                                                        records={identity.records.given_name}
+                                                        records={relatedIdentity.records.given_name}
                                                     />
                                                 ),
                                             },
@@ -165,7 +165,7 @@ export default function ModalAddProfileRelation({
                                                 label: recordTypesByKey?.family_name?.name,
                                                 value: (
                                                     <IdentityRecordKeyValueWithHistory
-                                                        records={identity.records.family_name}
+                                                        records={relatedIdentity.records.family_name}
                                                     />
                                                 ),
                                             },
@@ -173,7 +173,7 @@ export default function ModalAddProfileRelation({
                                                 label: recordTypesByKey?.birth_date?.name,
                                                 value: (
                                                     <IdentityRecordKeyValueWithHistory
-                                                        records={identity.records.birth_date}
+                                                        records={relatedIdentity.records.birth_date}
                                                     />
                                                 ),
                                             },
@@ -181,7 +181,7 @@ export default function ModalAddProfileRelation({
                                                 label: recordTypesByKey?.gender?.name,
                                                 value: (
                                                     <IdentityRecordKeyValueWithHistory
-                                                        records={identity.records.gender}
+                                                        records={relatedIdentity.records.gender}
                                                     />
                                                 ),
                                             },
@@ -189,22 +189,22 @@ export default function ModalAddProfileRelation({
                                                 label: recordTypesByKey?.marital_status?.name,
                                                 value: (
                                                     <IdentityRecordKeyValueWithHistory
-                                                        records={identity.records.marital_status}
+                                                        records={relatedIdentity.records.marital_status}
                                                     />
                                                 ),
                                             },
                                             ...(organization.bsn_enabled
-                                                ? [{ label: 'BSN', value: identity?.bsn }]
+                                                ? [{ label: 'BSN', value: relatedIdentity?.bsn }]
                                                 : []),
                                             {
                                                 label: recordTypesByKey?.client_number?.name,
                                                 value: (
                                                     <IdentityRecordKeyValueWithHistory
-                                                        records={identity.records.client_number}
+                                                        records={relatedIdentity.records.client_number}
                                                     />
                                                 ),
                                             },
-                                            { label: 'Hoofd e-mailadres', value: identity.email },
+                                            { label: 'Hoofd e-mailadres', value: relatedIdentity.email },
                                             ...otherEmails.map((email, index) => ({
                                                 label: `Extra e-mailadres ${index + 1}`,
                                                 value: email,
@@ -213,7 +213,7 @@ export default function ModalAddProfileRelation({
                                                 label: recordTypesByKey?.telephone?.name,
                                                 value: (
                                                     <IdentityRecordKeyValueWithHistory
-                                                        records={identity.records.telephone}
+                                                        records={relatedIdentity.records.telephone}
                                                     />
                                                 ),
                                             },
@@ -221,7 +221,7 @@ export default function ModalAddProfileRelation({
                                                 label: recordTypesByKey?.mobile?.name,
                                                 value: (
                                                     <IdentityRecordKeyValueWithHistory
-                                                        records={identity.records.mobile}
+                                                        records={relatedIdentity.records.mobile}
                                                     />
                                                 ),
                                             },

From ca6ce2f022243238b5707488f339b86a20740ceb Mon Sep 17 00:00:00 2001
From: RobinMeles <robinmeles@gmail.com>
Date: Tue, 23 Sep 2025 11:52:33 +0200
Subject: [PATCH 26/29] translations for person creation relations and
 households

---
 .../pages/households/HouseholdsShow.tsx       | 12 ++++-----
 .../households/hooks/useDeleteHousehold.tsx   |  8 +++---
 .../hooks/useHouseholdAddIdentity.tsx         |  2 +-
 .../hooks/useHouseholdDeleteIdentity.tsx      |  8 +++---
 .../ModalSelectOrMakeSponsorIdentity.tsx      | 18 ++++++-------
 .../modals/elements/HouseholdMembers.tsx      | 26 +++++++++----------
 .../identities/elements/IdentitiesTable.tsx   |  2 +-
 .../identitities-show/IdentitiesShow.tsx      |  4 +--
 .../elements/ProfileRelationsCard.tsx         |  4 +--
 .../hooks/useIdentityRelationDelete.tsx       |  8 +++---
 .../modals/ModalAddProfileRelation.tsx        | 18 ++++++-------
 .../src/dashboard/i18n/nl/pages/households.js | 18 ++++++-------
 .../src/dashboard/i18n/nl/pages/identities.js |  1 +
 13 files changed, 65 insertions(+), 64 deletions(-)

diff --git a/react/src/dashboard/components/pages/households/HouseholdsShow.tsx b/react/src/dashboard/components/pages/households/HouseholdsShow.tsx
index e0187080c..3ad6dd3de 100644
--- a/react/src/dashboard/components/pages/households/HouseholdsShow.tsx
+++ b/react/src/dashboard/components/pages/households/HouseholdsShow.tsx
@@ -60,7 +60,7 @@ export default function HouseholdsShow() {
             </div>
 
             <Card
-                title={'Household'}
+                title={'Huishouden'}
                 buttons={[
                     hasPermission(activeOrganization, Permission.MANAGE_IDENTITIES) && {
                         text: 'Bewerken',
@@ -69,14 +69,14 @@ export default function HouseholdsShow() {
                     },
                 ]}
                 className={'form'}>
-                <FormPane title={'Household'}>
+                <FormPane title={'Huishouden'}>
                     <CardBlockKeyValue
                         size={'md'}
                         items={[
-                            { label: 'Household ID', value: household?.uid },
-                            { label: 'Number of Members', value: household.count_people },
-                            { label: 'Number of Underaged children', value: household.count_minors },
-                            { label: 'Number of Adults', value: household.count_adults },
+                            { label: 'Huishouden ID', value: household?.uid },
+                            { label: 'Aantal leden', value: household.count_people },
+                            { label: 'Aantal kinderen', value: household.count_minors },
+                            { label: 'Aantal ouders', value: household.count_adults },
                         ]}
                     />
                 </FormPane>
diff --git a/react/src/dashboard/components/pages/households/hooks/useDeleteHousehold.tsx b/react/src/dashboard/components/pages/households/hooks/useDeleteHousehold.tsx
index 32451baff..ae8fb5d22 100644
--- a/react/src/dashboard/components/pages/households/hooks/useDeleteHousehold.tsx
+++ b/react/src/dashboard/components/pages/households/hooks/useDeleteHousehold.tsx
@@ -17,16 +17,16 @@ export default function useDeleteHousehold() {
             openModal((modal) => (
                 <ModalDangerZone
                     modal={modal}
-                    title={'Delete'}
-                    description={'Are you sure you want to delete this household?'}
+                    title={'Verwijderen'}
+                    description={'Weet u zeker dat u het huishouden wilt verwijderen?'}
                     buttonCancel={{
-                        text: 'Cancel',
+                        text: 'Annuleren',
                         onClick: () => {
                             modal.close();
                         },
                     }}
                     buttonSubmit={{
-                        text: 'Delete',
+                        text: 'Verwijder',
                         onClick: () => {
                             modal.close();
                             setProgress(0);
diff --git a/react/src/dashboard/components/pages/households/hooks/useHouseholdAddIdentity.tsx b/react/src/dashboard/components/pages/households/hooks/useHouseholdAddIdentity.tsx
index 35a64b70a..27af1d6fe 100644
--- a/react/src/dashboard/components/pages/households/hooks/useHouseholdAddIdentity.tsx
+++ b/react/src/dashboard/components/pages/households/hooks/useHouseholdAddIdentity.tsx
@@ -40,7 +40,7 @@ export default function useHouseholdAddIdentity(organization: Organization) {
                         Promise.all(profilesPromise)
                             .then(() => {
                                 onChange?.();
-                                pushSuccess('Gelukt!', 'Person succesvol toegevoegd.');
+                                pushSuccess('Gelukt!', 'Persoon succesvol toegevoegd.');
                             })
                             .catch(pushApiError)
                             .finally(() => setProgress(100));
diff --git a/react/src/dashboard/components/pages/households/hooks/useHouseholdDeleteIdentity.tsx b/react/src/dashboard/components/pages/households/hooks/useHouseholdDeleteIdentity.tsx
index 2be792dab..4df793888 100644
--- a/react/src/dashboard/components/pages/households/hooks/useHouseholdDeleteIdentity.tsx
+++ b/react/src/dashboard/components/pages/households/hooks/useHouseholdDeleteIdentity.tsx
@@ -19,14 +19,14 @@ export default function useHouseholdDeleteIdentity(organization: Organization) {
             openModal((modal) => (
                 <ModalDangerZone
                     modal={modal}
-                    title={'Delete household member'}
-                    description={'Are you sure you want to delete this member?'}
+                    title={'Verwijder huishouden persoon'}
+                    description={'Weet u het zeker dat u de persoon uit het huishouden wilt verwijderen?'}
                     buttonCancel={{
-                        text: 'Cancel',
+                        text: 'Annuleren',
                         onClick: () => modal.close(),
                     }}
                     buttonSubmit={{
-                        text: 'Delete',
+                        text: 'Verwijder',
                         onClick: () => {
                             modal.close();
                             setProgress(0);
diff --git a/react/src/dashboard/components/pages/households/modals/ModalSelectOrMakeSponsorIdentity.tsx b/react/src/dashboard/components/pages/households/modals/ModalSelectOrMakeSponsorIdentity.tsx
index 41f7a19d7..fdcbf99fd 100644
--- a/react/src/dashboard/components/pages/households/modals/ModalSelectOrMakeSponsorIdentity.tsx
+++ b/react/src/dashboard/components/pages/households/modals/ModalSelectOrMakeSponsorIdentity.tsx
@@ -131,7 +131,7 @@ export default function ModalSelectOrMakeSponsorIdentity({
 
     return (
         <Modal
-            title="Search persons"
+            title="Zoek voor personen"
             className={className}
             dusk="modalHouseholds"
             size={'lg'}
@@ -156,13 +156,13 @@ export default function ModalSelectOrMakeSponsorIdentity({
                     <div className="modal-section">
                         <div className="flex flex-gap flex-vertical">
                             {organization?.allow_profiles_create && (
-                                <FormPane title={'Find or Create person'}>
+                                <FormPane title={'Zoek of voeg een persoon toe'}>
                                     <div className="block block-export-options">
                                         <div className="export-section">
                                             <div className="export-options">
                                                 {[
-                                                    { label: 'Find a person', value: 'find' },
-                                                    { label: 'Add new person', value: 'create' },
+                                                    { label: 'Zoek een persoon', value: 'find' },
+                                                    { label: 'Voeg een nieuw persoon toe', value: 'create' },
                                                 ].map((field, index) => (
                                                     <label
                                                         key={index}
@@ -196,16 +196,16 @@ export default function ModalSelectOrMakeSponsorIdentity({
                             )}
 
                             {action === 'find' ? (
-                                <FormPane title={'Search person'}>
+                                <FormPane title={'Zoek een persoon'}>
                                     <FormGroup
-                                        label={'Search'}
-                                        info={'Search for a person in the system.'}
+                                        label={'Zoek'}
+                                        info={'Zoek voor een persoon in het systeem.'}
                                         input={(id) => (
                                             <input
                                                 id={id}
                                                 type="text"
                                                 className={'form-control'}
-                                                placeholder={'Search'}
+                                                placeholder={'Zoek'}
                                                 value={filterValues.q}
                                                 autoComplete={'off'}
                                                 onChange={(e) => filterUpdate({ q: e.target.value })}
@@ -232,7 +232,7 @@ export default function ModalSelectOrMakeSponsorIdentity({
                     {action === 'find' && identities && (
                         <Fragment>
                             <div className="modal-header modal-header-compact">
-                                <div className="modal-header-title">Matches ({identities?.meta?.total})</div>
+                                <div className="modal-header-title">Resultaten ({identities?.meta?.total})</div>
                             </div>
                             <div className="modal-section modal-section-collapse modal-section-light">
                                 <div className="table-wrapper">
diff --git a/react/src/dashboard/components/pages/households/modals/elements/HouseholdMembers.tsx b/react/src/dashboard/components/pages/households/modals/elements/HouseholdMembers.tsx
index 13dd623dc..477f98020 100644
--- a/react/src/dashboard/components/pages/households/modals/elements/HouseholdMembers.tsx
+++ b/react/src/dashboard/components/pages/households/modals/elements/HouseholdMembers.tsx
@@ -16,33 +16,33 @@ export default function HouseholdMembers({
     >;
 }) {
     return (
-        <FormPane title={'Residents'}>
+        <FormPane title={'Bewoners'}>
             <FormGroup
-                label={'Household ID'}
+                label={'Huishouden ID'}
                 required={true}
-                info={'The household ID is used to identify the household in the system.'}
+                info={'Het ID nummer wordt als uniek nummer gebruikt om het huishouden te identificeren.'}
                 error={form.errors?.uid}
                 input={(id) => (
                     <input
                         id={id}
                         type="text"
                         className={'form-control'}
-                        placeholder={'Household ID'}
+                        placeholder={'Huishouden ID'}
                         value={form.values.uid ?? ''}
                         onChange={(e) => form.update({ uid: e.target.value })}
                     />
                 )}
             />
             <FormGroup
-                label={'Number of Members'}
+                label={'Aantal leden'}
                 error={form.errors?.count_people}
-                info={'The number of members in the household.'}
+                info={'Het aantal leden dat het huishouden heeft.'}
                 input={(id) => (
                     <input
                         id={id}
                         type="number"
                         className={'form-control'}
-                        placeholder={'Number of people'}
+                        placeholder={'Aantal leden'}
                         value={form.values.count_people ?? ''}
                         onChange={(e) => form.update({ count_people: parseInt(e.target.value) })}
                     />
@@ -50,15 +50,15 @@ export default function HouseholdMembers({
             />
 
             <FormGroup
-                label={'Number of Minors'}
+                label={'Aantal kinderen'}
                 error={form.errors?.count_minors}
-                info={'The number of minors in the household.'}
+                info={'Het aantal kinderen dat het huishouden heeft.'}
                 input={(id) => (
                     <input
                         id={id}
                         type="number"
                         className={'form-control'}
-                        placeholder={'Number of minors'}
+                        placeholder={'Aantal kinderen'}
                         value={form.values.count_minors ?? ''}
                         onChange={(e) => form.update({ count_minors: parseInt(e.target.value) })}
                     />
@@ -66,15 +66,15 @@ export default function HouseholdMembers({
             />
 
             <FormGroup
-                label={'Number of Adults'}
+                label={'Aantal ouders'}
                 error={form.errors?.count_adults}
-                info={'The number of adults in the household.'}
+                info={'Het aantal ouders dat het huishouden heeft.'}
                 input={(id) => (
                     <input
                         id={id}
                         type="number"
                         className={'form-control'}
-                        placeholder={'Number of adults'}
+                        placeholder={'Aantal ouders'}
                         value={form.values.count_adults ?? ''}
                         onChange={(e) => form.update({ count_adults: parseInt(e.target.value) })}
                     />
diff --git a/react/src/dashboard/components/pages/identities/elements/IdentitiesTable.tsx b/react/src/dashboard/components/pages/identities/elements/IdentitiesTable.tsx
index cc4f94c37..9d2a235f4 100644
--- a/react/src/dashboard/components/pages/identities/elements/IdentitiesTable.tsx
+++ b/react/src/dashboard/components/pages/identities/elements/IdentitiesTable.tsx
@@ -85,7 +85,7 @@ export default function IdentitiesTable() {
 
     const createProfile = useCallback(
         (fetchProfiles: () => void) => {
-            editProfileRecords(null, 'Add new person', 'personal', fetchProfiles);
+            editProfileRecords(null, 'Voeg een nieuw persoon toe', 'personal', fetchProfiles);
         },
         [editProfileRecords],
     );
diff --git a/react/src/dashboard/components/pages/identitities-show/IdentitiesShow.tsx b/react/src/dashboard/components/pages/identitities-show/IdentitiesShow.tsx
index a99548565..ac08a71b3 100644
--- a/react/src/dashboard/components/pages/identitities-show/IdentitiesShow.tsx
+++ b/react/src/dashboard/components/pages/identitities-show/IdentitiesShow.tsx
@@ -173,8 +173,8 @@ export default function IdentitiesShow() {
                     items={[
                         { label: 'Accountnummer', value: identity?.id },
                         identity?.type_locale ? { label: 'Account type', value: identity?.type_locale } : null,
-                        identity?.employee_email ? { label: 'Created by', value: identity?.employee_email } : null,
-                        { label: 'Created at', value: identity?.created_at_locale },
+                        identity?.employee_email ? { label: 'Aangemaakt door', value: identity?.employee_email } : null,
+                        { label: 'Aangemaakt op', value: identity?.created_at_locale },
                         { label: 'Laatste inlog', value: identity?.last_login_at_locale },
                         { label: 'Laatste handeling', value: identity?.last_activity_at_locale },
                     ].filter((item) => item !== null)}
diff --git a/react/src/dashboard/components/pages/identitities-show/elements/ProfileRelationsCard.tsx b/react/src/dashboard/components/pages/identitities-show/elements/ProfileRelationsCard.tsx
index 84c80734e..3870e4e82 100644
--- a/react/src/dashboard/components/pages/identitities-show/elements/ProfileRelationsCard.tsx
+++ b/react/src/dashboard/components/pages/identitities-show/elements/ProfileRelationsCard.tsx
@@ -90,7 +90,7 @@ export default function ProfileRelationsCard({
     return (
         <div className="card">
             <div className="card-header">
-                <div className="card-title flex flex-grow">{`Relations (${relations?.meta?.total || 0})`}</div>
+                <div className="card-title flex flex-grow">{`Relaties (${relations?.meta?.total || 0})`}</div>
 
                 <div className={'card-header-filters'}>
                     <div className="block block-inline-filters">
@@ -136,7 +136,7 @@ export default function ProfileRelationsCard({
                 </div>
             </div>
 
-            <LoaderTableCard loading={loading} empty={relations.meta.total == 0} emptyTitle={'Geen relations gevonden'}>
+            <LoaderTableCard loading={loading} empty={relations.meta.total == 0} emptyTitle={'Geen relaties gevonden'}>
                 <div className="card-section">
                     <div className="card-block card-block-table">
                         {configsElement}
diff --git a/react/src/dashboard/components/pages/identitities-show/hooks/useIdentityRelationDelete.tsx b/react/src/dashboard/components/pages/identitities-show/hooks/useIdentityRelationDelete.tsx
index c5fd4a468..429512529 100644
--- a/react/src/dashboard/components/pages/identitities-show/hooks/useIdentityRelationDelete.tsx
+++ b/react/src/dashboard/components/pages/identitities-show/hooks/useIdentityRelationDelete.tsx
@@ -19,16 +19,16 @@ export default function useIdentityRelationDelete(organization: Organization) {
             openModal((modal) => (
                 <ModalDangerZone
                     modal={modal}
-                    title={'Delete relation'}
-                    description={'Are you sure you want to delete this relation?'}
+                    title={'Verwijder relatie'}
+                    description={'Weet u zeker dat u de relatie wilt verwijderen?'}
                     buttonCancel={{
-                        text: 'Cancel',
+                        text: 'Annuleren',
                         onClick: () => {
                             modal.close();
                         },
                     }}
                     buttonSubmit={{
-                        text: 'Delete',
+                        text: 'Verwijder',
                         onClick: () => {
                             modal.close();
                             setProgress(0);
diff --git a/react/src/dashboard/components/pages/identitities-show/modals/ModalAddProfileRelation.tsx b/react/src/dashboard/components/pages/identitities-show/modals/ModalAddProfileRelation.tsx
index d39fb64b8..e2359c198 100644
--- a/react/src/dashboard/components/pages/identitities-show/modals/ModalAddProfileRelation.tsx
+++ b/react/src/dashboard/components/pages/identitities-show/modals/ModalAddProfileRelation.tsx
@@ -127,7 +127,7 @@ export default function ModalAddProfileRelation({
 
     return (
         <Modal
-            title={identityRelation ? 'Edit relationship' : 'Add relationship'}
+            title={identityRelation ? 'Bewerk relatie' : 'Voeg relatie toe'}
             className={className}
             dusk="modalHouseholds"
             size={'lg'}
@@ -149,7 +149,7 @@ export default function ModalAddProfileRelation({
                     <div className="modal-section">
                         <div className="flex flex-gap flex-vertical">
                             {!identityRelation && (
-                                <FormPane title={'Selected person details'}>
+                                <FormPane title={'Gegevens van geselecteerde persoon'}>
                                     <CardBlockKeyValue
                                         size={'md'}
                                         items={[
@@ -230,11 +230,11 @@ export default function ModalAddProfileRelation({
                                 </FormPane>
                             )}
 
-                            <FormPane title={'Relationtype'}>
+                            <FormPane title={'Relatie'}>
                                 <FormGroup
-                                    label={'Relationtype'}
+                                    label={'Relatie type'}
                                     error={form.errors?.type}
-                                    info={<Fragment>Selecteer de relatie tussen de twee personen.</Fragment>}
+                                    info={<Fragment>Selecteer het type relatie tussen de twee personen.</Fragment>}
                                     input={(id) => (
                                         <SelectControl
                                             id={id}
@@ -252,9 +252,9 @@ export default function ModalAddProfileRelation({
 
                                 {subTypes[form.values.type]?.length > 0 && (
                                     <FormGroup
-                                        label={'Subrelationtype'}
+                                        label={'Relatie type specificatie'}
                                         error={form.errors?.subtype}
-                                        info={<Fragment>Selecteer de subrelatie tussen de twee personen.</Fragment>}
+                                        info={<Fragment>Selecteer de specificatie van de relatie.</Fragment>}
                                         input={(id) => (
                                             <SelectControl
                                                 id={id}
@@ -269,9 +269,9 @@ export default function ModalAddProfileRelation({
                                     />
                                 )}
                                 <FormGroup
-                                    label={'Living together'}
+                                    label={'Samenwonend'}
                                     error={form.errors?.living_together}
-                                    info={<Fragment>Selecteer of de twee personen leven samen.</Fragment>}
+                                    info={<Fragment>Selecteer of de twee personen samenwonend zijn.</Fragment>}
                                     input={(id) => (
                                         <SelectControl
                                             id={id}
diff --git a/react/src/dashboard/i18n/nl/pages/households.js b/react/src/dashboard/i18n/nl/pages/households.js
index 5711a76bc..deb16f107 100644
--- a/react/src/dashboard/i18n/nl/pages/households.js
+++ b/react/src/dashboard/i18n/nl/pages/households.js
@@ -14,14 +14,14 @@ export default {
         municipality: 'Gemeentenaam',
     },
     tooltips: {
-        id: 'lorem_ipsum',
-        member_count: 'lorem_ipsum',
-        children_count: 'lorem_ipsum',
-        parent_count: 'lorem_ipsum',
-        city: 'lorem_ipsum',
-        postal_code: 'lorem_ipsum',
-        house_number: 'lorem_ipsum',
-        neighborhood: 'lorem_ipsum',
-        municipality: 'lorem_ipsum',
+        id: 'ID van het huishouden',
+        member_count: 'Aantal leden in het huishouden',
+        children_count: 'Aantal kinderen in het huishouden',
+        parent_count: 'Aantal ouders in het huishouden',
+        city: 'De woonplaats gerelateerd aan het huishouden',
+        postal_code: 'De postcode gerelateerd aan het huishouden',
+        house_number: 'Het huisnummer gerelateerd aan het huishouden',
+        neighborhood: 'De woonwijk gerelateerd aan het huishouden',
+        municipality: 'De gemeentenaam gerelateerd aan het huishouden',
     },
 };
diff --git a/react/src/dashboard/i18n/nl/pages/identities.js b/react/src/dashboard/i18n/nl/pages/identities.js
index 88d5737a3..6d6db9f56 100644
--- a/react/src/dashboard/i18n/nl/pages/identities.js
+++ b/react/src/dashboard/i18n/nl/pages/identities.js
@@ -32,6 +32,7 @@ export default {
     },
     tooltips: {
         id: 'Dit is een unieke identificatiecode die automatisch wordt gegenereerd voor elke persoon in het systeem. Het helpt om elke persoon individueel te identificeren.',
+        type: 'Het type persoon geeft weer hoe de persoon is aangemaakt. Gaat het om een standaard persoon, dan is de persoon via het reguliere proces in het systeem gekomen. Gaat het om een handmatig aangemaakt persoon, dan is de persoon door een medewerker in het systeem gezet.',
         given_name:
             'Dit veld bevat de voornaam van de persoon. Het is belangrijk voor persoonlijke communicatie en identificatie.',
         family_name:

From 200014f664940943eaba0d728d3330ba8c475e04 Mon Sep 17 00:00:00 2001
From: dev-rminds <dev@rminds.nl>
Date: Tue, 23 Sep 2025 13:47:40 +0300
Subject: [PATCH 27/29] show full products title on grid view

---
 .../scss/includes/blocks/block-products.scss        | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/react/assets/forus-webshop/scss/includes/blocks/block-products.scss b/react/assets/forus-webshop/scss/includes/blocks/block-products.scss
index bd0103e3c..d66a7d0e0 100644
--- a/react/assets/forus-webshop/scss/includes/blocks/block-products.scss
+++ b/react/assets/forus-webshop/scss/includes/blocks/block-products.scss
@@ -35,11 +35,10 @@
             min-width: 0;
             flex-direction: column;
             background: #ffffff;
-            @include cf();
 
             .product-photo {
                 display: flex;
-                flex: 1 1 100%;
+                flex: 0 1 auto;
                 border-bottom: 1px solid var(--border-color);
 
                 img {
@@ -63,20 +62,24 @@
                     flex: 0 1 auto;
                     margin: 0 0;
                     word-wrap: break-word;
+                    color: var(--products-text-color);
+                }
+
+                .product-subtitle,
+                .product-price {
                     overflow: hidden;
                     white-space: nowrap;
                     text-overflow: ellipsis;
-                    color: var(--products-text-color);
                 }
 
                 .product-title {
-                    font: 700 17px/24px var(--base-font);
+                    font: 700 16px/24px var(--base-font);
                     color: var(--products-title-color);
                     transition: 0.4s color;
                 }
 
                 .product-subtitle {
-                    font: 400 14px/20px var(--base-font);
+                    font: 400 13px/20px var(--base-font);
                 }
             }
 

From 8940f6d5fa6412ce23e5f110d0ff230a931a3847 Mon Sep 17 00:00:00 2001
From: RobinMeles <robinmeles@gmail.com>
Date: Wed, 24 Sep 2025 09:47:28 +0200
Subject: [PATCH 28/29] missing translation

---
 .../pages/households/elements/HouseholdIdentitiesCard.tsx       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/react/src/dashboard/components/pages/households/elements/HouseholdIdentitiesCard.tsx b/react/src/dashboard/components/pages/households/elements/HouseholdIdentitiesCard.tsx
index 4934edd5b..61274d007 100644
--- a/react/src/dashboard/components/pages/households/elements/HouseholdIdentitiesCard.tsx
+++ b/react/src/dashboard/components/pages/households/elements/HouseholdIdentitiesCard.tsx
@@ -95,7 +95,7 @@ export default function HouseholdIdentitiesCard({ household }: { household: Hous
         <div className="card">
             <div className="card-header">
                 <div className="card-title flex flex-grow">
-                    {`Household members (${householdMembers?.meta?.total || 0})`}
+                    {`Personen binnen dit huishouden (${householdMembers?.meta?.total || 0})`}
                 </div>
 
                 <div className={'card-header-filters'}>

From 7b23e4ecb62de152405411375396a5b6c5cb3ef5 Mon Sep 17 00:00:00 2001
From: dev-rminds <dev@rminds.nl>
Date: Tue, 30 Sep 2025 14:23:29 +0300
Subject: [PATCH 29/29] ui-control-text update auto-complete type

---
 .../components/elements/forms/ui-controls/UIControlText.tsx   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/react/src/dashboard/components/elements/forms/ui-controls/UIControlText.tsx b/react/src/dashboard/components/elements/forms/ui-controls/UIControlText.tsx
index 2a7e910fa..c7fcf9463 100644
--- a/react/src/dashboard/components/elements/forms/ui-controls/UIControlText.tsx
+++ b/react/src/dashboard/components/elements/forms/ui-controls/UIControlText.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useRef, useState } from 'react';
+import React, { HTMLInputAutoCompleteAttribute, useCallback, useRef, useState } from 'react';
 import useCustomInputValidationMessage, {
     InputValidationTexts,
 } from '../../../../hooks/useCustomInputValidationMessage';
@@ -42,7 +42,7 @@ export default function UIControlText({
     rows?: number;
     validationMessages?: InputValidationTexts;
     required?: boolean;
-    autoComplete?: string;
+    autoComplete?: HTMLInputAutoCompleteAttribute;
 }) {
     const innerInputRef = useRef<HTMLInputElement>(null);
     const customInputValidationMessage = useCustomInputValidationMessage();