From 2785a0ab2dc880c0df8b5823fe5f4c951426bbf0 Mon Sep 17 00:00:00 2001
From: Yaroslav Kosterin <ateamcms@gmail.com>
Date: Fri, 14 Nov 2025 13:37:42 +0200
Subject: [PATCH 01/13] unsubscribe provider from fund immediately

---
 .../components/elements/info-box/InfoBox.tsx  |   3 +
 .../modals/ModalFundUnsubscribe.tsx           | 104 +--
 .../pages/provider-funds/ProviderFunds.tsx    |  28 +-
 .../ProviderFundUnsubscriptionsTable.tsx      | 432 ------------
 .../elements/ProviderFundsTable.tsx           | 104 ++-
 .../SponsorFundUnsubscriptions.tsx            | 154 -----
 .../SponsorFundUnsubscriptionTableItem.tsx    |  98 ---
 .../elements/FundProviderTableItem.tsx        |   4 +-
 .../SponsorProviderOrganizations.tsx          | 637 ++++++++----------
 .../elements/ProvidersTableItemFunds.tsx      |   1 +
 .../dashboard/i18n/nl/pages/provider-funds.js |   6 +-
 .../modules/state_router/RouterBuilder.tsx    |   1 -
 .../dashboard/props/models/FundProvider.tsx   |   3 +-
 .../props/models/FundProviderUnsubscribe.tsx  |  19 -
 react/src/dashboard/router/routes.tsx         |   7 -
 .../services/FundUnsubscribeService.ts        |  72 --
 .../dashboard/services/ProviderFundService.ts |  13 +-
 17 files changed, 467 insertions(+), 1219 deletions(-)
 delete mode 100644 react/src/dashboard/components/pages/provider-funds/elements/ProviderFundUnsubscriptionsTable.tsx
 delete mode 100644 react/src/dashboard/components/pages/sponsor-fund-unsubscriptions/SponsorFundUnsubscriptions.tsx
 delete mode 100644 react/src/dashboard/components/pages/sponsor-fund-unsubscriptions/elements/SponsorFundUnsubscriptionTableItem.tsx
 delete mode 100644 react/src/dashboard/props/models/FundProviderUnsubscribe.tsx
 delete mode 100644 react/src/dashboard/services/FundUnsubscribeService.ts

diff --git a/react/src/dashboard/components/elements/info-box/InfoBox.tsx b/react/src/dashboard/components/elements/info-box/InfoBox.tsx
index abed210fe..5f8a43af2 100644
--- a/react/src/dashboard/components/elements/info-box/InfoBox.tsx
+++ b/react/src/dashboard/components/elements/info-box/InfoBox.tsx
@@ -6,14 +6,17 @@ export default function InfoBox({
     borderType = 'dashed',
     children,
     iconColor = 'primary',
+    dusk = null,
 }: {
     type?: 'default' | 'primary' | 'warning';
     borderType?: 'dashed' | 'none';
     children: ReactNode | ReactNode[];
     iconColor?: 'primary' | 'warning';
+    dusk?: string;
 }) {
     return (
         <div
+            data-dusk={dusk}
             className={classNames(
                 'block block-info-box',
                 type === 'default' && 'block-info-box-default',
diff --git a/react/src/dashboard/components/modals/ModalFundUnsubscribe.tsx b/react/src/dashboard/components/modals/ModalFundUnsubscribe.tsx
index 6a84afa35..b619a8917 100644
--- a/react/src/dashboard/components/modals/ModalFundUnsubscribe.tsx
+++ b/react/src/dashboard/components/modals/ModalFundUnsubscribe.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { ModalState } from '../../modules/modals/context/ModalContext';
 import FundProvider from '../../props/models/FundProvider';
 import Organization from '../../props/models/Organization';
@@ -6,15 +6,13 @@ import { ResponseError } from '../../props/ApiResponses';
 import useFormBuilder from '../../hooks/useFormBuilder';
 import usePushSuccess from '../../hooks/usePushSuccess';
 import FormError from '../elements/forms/errors/FormError';
-import DatePickerControl from '../elements/forms/controls/DatePickerControl';
-import { dateFormat, dateParse } from '../../helpers/dates';
-import useFundUnsubscribeService from '../../services/FundUnsubscribeService';
 import useSetProgress from '../../hooks/useSetProgress';
-import { addDays } from 'date-fns';
 import { clickOnKeyEnter } from '../../helpers/wcag';
 import useTranslate from '../../hooks/useTranslate';
 import classNames from 'classnames';
 import usePushApiError from '../../hooks/usePushApiError';
+import useProviderFundService from '../../services/ProviderFundService';
+import InfoBox from '../elements/info-box/InfoBox';
 
 export default function ModalFundUnsubscribe({
     modal,
@@ -29,43 +27,43 @@ export default function ModalFundUnsubscribe({
     onUnsubscribe: () => void;
     className?: string;
 }) {
-    const [dateMin] = useState(addDays(new Date(), 1));
-
     const translate = useTranslate();
     const pushSuccess = usePushSuccess();
     const setProgress = useSetProgress();
     const pushApiError = usePushApiError();
 
-    const fundUnsubscribeService = useFundUnsubscribeService();
+    const providerFundService = useProviderFundService();
 
-    const form = useFormBuilder(
-        {
-            unsubscribe_at: null,
-            note: '',
-        },
-        (values) => {
-            setProgress(0);
+    const [errorMessage, setErrorMessage] = React.useState<string | null>(null);
 
-            fundUnsubscribeService
-                .store(organization.id, { fund_provider_id: providerFund.id, ...values })
-                .then(() => {
-                    pushSuccess('Gelukt!', 'Verzoek afmelding verstuurd.');
-                    modal.close();
-                    onUnsubscribe?.();
-                })
-                .catch((err: ResponseError) => {
-                    pushApiError(err);
-                    form.setErrors(err.data.errors);
-                })
-                .finally(() => {
-                    setProgress(100);
-                    form.setIsLocked(false);
-                });
-        },
-    );
+    const form = useFormBuilder({ note: '' }, (values) => {
+        setProgress(0);
+        setErrorMessage(null);
+
+        providerFundService
+            .unsubscribe(organization.id, providerFund.id, values)
+            .then(() => {
+                pushSuccess('Gelukt!', 'Verzoek afmelding verstuurd.');
+                modal.close();
+                onUnsubscribe?.();
+            })
+            .catch((err: ResponseError) => {
+                pushApiError(err);
+                form.setErrors(err.data.errors);
+
+                if (!err.data?.errors && err.data?.message) {
+                    setErrorMessage(err.data.message);
+                }
+            })
+            .finally(() => {
+                setProgress(100);
+                form.setIsLocked(false);
+            });
+    });
 
     return (
         <div
+            data-dusk="modalFundUnsubscribe"
             className={classNames(
                 'modal',
                 'modal-animated',
@@ -82,7 +80,7 @@ export default function ModalFundUnsubscribe({
                     onKeyDown={clickOnKeyEnter}
                     role="button"
                 />
-                <div className="modal-header">Request unsubscription</div>
+                <div className="modal-header">Afmelding voor de regeling</div>
                 <div className="modal-body modal-body-visible">
                     <div className="modal-section">
                         <div className="row">
@@ -91,40 +89,46 @@ export default function ModalFundUnsubscribe({
                                     Weet u zeker dat u zich wilt afmelden bij {providerFund.fund.name}?
                                 </div>
                                 <div className="modal-description text-center">
-                                    Als alles duidelijk is kunt u het onderstaande formulier invullen.
+                                    Optioneel kunt u een reden opgeven, zodat de gemeente weet waarom u zich heeft
+                                    afgemeld.
                                 </div>
                                 <div className="form-group">
-                                    <label className="form-label form-label-required">Afmeldingsdatum</label>
-                                    <DatePickerControl
-                                        value={dateParse(form.values.unsubscribe_at)}
-                                        dateMin={dateMin}
-                                        dateInitial={dateMin}
-                                        placeholder={'Kies een datum'}
-                                        onChange={(date) => form.update({ unsubscribe_at: dateFormat(date) })}
-                                    />
-                                    <FormError error={form.errors.unsubscribe_at} />
-                                </div>
-                                <div className="form-group">
-                                    <label className="form-label">Notitie</label>
+                                    <label className="form-label">Notitie (optioneel)</label>
                                     <textarea
                                         className="form-control"
                                         value={form.values.note}
                                         onChange={(e) => form.update({ note: e.target.value })}
                                         placeholder="Reden"
+                                        data-dusk="noteInput"
                                     />
-                                    <FormError error={form.errors.note} />
-                                    <FormError error={form.errors.fund_provider_id} />
+                                    <FormError error={form.errors?.note} />
+                                    <FormError error={form.errors?.fund_provider_id} />
                                 </div>
+
+                                {errorMessage && (
+                                    <div className="form-group">
+                                        <InfoBox
+                                            type={'warning'}
+                                            iconColor={'warning'}
+                                            dusk="modalFundUnsubscribeError">
+                                            {errorMessage}
+                                        </InfoBox>
+                                    </div>
+                                )}
                             </div>
                         </div>
                     </div>
                 </div>
                 <div className="modal-footer">
                     <div className="button-group">
-                        <button className="button button-default" type="button" onClick={() => modal.close()}>
+                        <button
+                            className="button button-default"
+                            type="button"
+                            data-dusk="closeBtn"
+                            onClick={() => modal.close()}>
                             {translate('modals.modal_voucher_create.buttons.cancel')}
                         </button>
-                        <button className="button button-primary" type="submit">
+                        <button className="button button-primary" type="submit" data-dusk="submitBtn">
                             {translate('modals.modal_voucher_create.buttons.submit')}
                         </button>
                     </div>
diff --git a/react/src/dashboard/components/pages/provider-funds/ProviderFunds.tsx b/react/src/dashboard/components/pages/provider-funds/ProviderFunds.tsx
index f73a513df..12d2f4e50 100644
--- a/react/src/dashboard/components/pages/provider-funds/ProviderFunds.tsx
+++ b/react/src/dashboard/components/pages/provider-funds/ProviderFunds.tsx
@@ -3,7 +3,6 @@ import useActiveOrganization from '../../../hooks/useActiveOrganization';
 import LoadingCard from '../../elements/loading-card/LoadingCard';
 import useProviderFundService from '../../../services/ProviderFundService';
 import ProviderFundsTable from './elements/ProviderFundsTable';
-import ProviderFundUnsubscriptionsTable from './elements/ProviderFundUnsubscriptionsTable';
 import ProviderFundsAvailableTable from './elements/ProviderFundsAvailableTable';
 import ProviderFundInvitationsTable from './elements/ProviderFundInvitationsTable';
 import useTranslate from '../../../hooks/useTranslate';
@@ -83,6 +82,14 @@ export default function ProviderFunds() {
                                 onClick={() => setTab('archived')}>
                                 {translate('provider_funds.tabs.archived')} ({fundsAvailable.meta.totals.archived})
                             </div>
+
+                            <div
+                                className={`label-tab label-tab-sm ${tabQuery == 'unsubscribed' ? 'active' : ''}`}
+                                data-dusk="fundsUnsubscribedTab"
+                                onClick={() => setTab('unsubscribed')}>
+                                {translate('provider_funds.tabs.unsubscribed')} (
+                                {fundsAvailable.meta.totals.unsubscribed})
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -105,19 +112,6 @@ export default function ProviderFunds() {
                         </div>
                     </div>
                 </div>
-                <div className="flex-col">
-                    <div className="block block-label-tabs">
-                        <div className="label-tab-set">
-                            <div
-                                className={`label-tab label-tab-sm ${tabQuery == 'unsubscriptions' ? 'active' : ''}`}
-                                onClick={() => setTab('unsubscriptions')}>
-                                <em className="mdi mdi-close-circle-outline label-tab-icon-start" />
-                                {translate('provider_funds.tabs.unsubscriptions')} (
-                                {fundsAvailable.meta.totals.unsubscriptions})
-                            </div>
-                        </div>
-                    </div>
-                </div>
             </div>
 
             {tabQuery == 'none' && <LoadingCard />}
@@ -137,9 +131,9 @@ export default function ProviderFunds() {
                 <ProviderFundsTable type={'archived'} organization={activeOrganization} onChange={fetchFunds} />
             )}
 
-            {/* Fund unsubscription requests */}
-            {tabQuery == 'unsubscriptions' && (
-                <ProviderFundUnsubscriptionsTable organization={activeOrganization} onChange={fetchFunds} />
+            {/* Unsubscribed funds */}
+            {tabQuery == 'unsubscribed' && (
+                <ProviderFundsTable type={'unsubscribed'} organization={activeOrganization} onChange={fetchFunds} />
             )}
 
             {/* Available funds */}
diff --git a/react/src/dashboard/components/pages/provider-funds/elements/ProviderFundUnsubscriptionsTable.tsx b/react/src/dashboard/components/pages/provider-funds/elements/ProviderFundUnsubscriptionsTable.tsx
deleted file mode 100644
index 9dcf7340d..000000000
--- a/react/src/dashboard/components/pages/provider-funds/elements/ProviderFundUnsubscriptionsTable.tsx
+++ /dev/null
@@ -1,432 +0,0 @@
-import React, { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
-import { PaginationData } from '../../../../props/ApiResponses';
-import Organization from '../../../../props/models/Organization';
-import useSetProgress from '../../../../hooks/useSetProgress';
-import usePushSuccess from '../../../../hooks/usePushSuccess';
-import Paginator from '../../../../modules/paginator/components/Paginator';
-import useAssetUrl from '../../../../hooks/useAssetUrl';
-import TableCheckboxControl from '../../../elements/tables/elements/TableCheckboxControl';
-import useOpenModal from '../../../../hooks/useOpenModal';
-import ModalDangerZone from '../../../modals/ModalDangerZone';
-import useFundUnsubscribeService from '../../../../services/FundUnsubscribeService';
-import FundProviderUnsubscribe from '../../../../props/models/FundProviderUnsubscribe';
-import CardHeaderFilter from '../../../elements/tables/elements/CardHeaderFilter';
-import FilterItemToggle from '../../../elements/tables/elements/FilterItemToggle';
-import DatePickerControl from '../../../elements/forms/controls/DatePickerControl';
-import { dateFormat, dateParse } from '../../../../helpers/dates';
-import { strLimit } from '../../../../helpers/string';
-import useTableToggles from '../../../../hooks/useTableToggles';
-import usePaginatorService from '../../../../modules/paginator/services/usePaginatorService';
-import EmptyCard from '../../../elements/empty-card/EmptyCard';
-import useTranslate from '../../../../hooks/useTranslate';
-import Tooltip from '../../../elements/tooltip/Tooltip';
-import useConfigurableTable from '../../vouchers/hooks/useConfigurableTable';
-import TableTopScroller from '../../../elements/tables/TableTopScroller';
-import TableRowActions from '../../../elements/tables/TableRowActions';
-import TableEmptyValue from '../../../elements/table-empty-value/TableEmptyValue';
-import usePushApiError from '../../../../hooks/usePushApiError';
-import Label from '../../../elements/image_cropper/Label';
-import useFilterNext from '../../../../modules/filter_next/useFilterNext';
-import { NumberParam, StringParam } from 'use-query-params';
-
-type FundProviderUnsubscribeLocal = FundProviderUnsubscribe & {
-    showTooltip?: boolean;
-};
-
-export default function ProviderFundUnsubscriptionsTable({
-    organization,
-    onChange,
-}: {
-    organization: Organization;
-    onChange: () => void;
-}) {
-    const [loading, setLoading] = useState(true);
-
-    const assetUrl = useAssetUrl();
-    const translate = useTranslate();
-    const openModal = useOpenModal();
-    const setProgress = useSetProgress();
-    const pushSuccess = usePushSuccess();
-    const pushApiError = usePushApiError();
-
-    const paginatorService = usePaginatorService();
-    const fundUnsubscribeService = useFundUnsubscribeService();
-
-    const [paginatorKey] = useState('provider_funds_unsubscriptions');
-
-    const [states] = useState([
-        { key: null, label: 'Alle' },
-        { key: 'pending', label: 'In afwachting' },
-        { key: 'approved', label: 'Goedgekeurd' },
-        { key: 'canceled', label: 'Geannuleerd' },
-    ]);
-
-    const [filterValues, filterValuesActive, filterUpdate, filter] = useFilterNext<{
-        q: string;
-        state?: string;
-        from?: string;
-        to?: string;
-        page?: number;
-        per_page?: number;
-    }>(
-        {
-            q: '',
-            state: null,
-            from: '',
-            to: '',
-            per_page: paginatorService.getPerPage(paginatorKey),
-        },
-        {
-            queryParams: {
-                q: StringParam,
-                state: StringParam,
-                from: StringParam,
-                to: StringParam,
-                page: NumberParam,
-                per_page: NumberParam,
-            },
-        },
-    );
-
-    const { resetFilters: resetFilters } = filter;
-
-    const [fundUnsubscriptions, setFundUnsubscriptions] = useState<PaginationData<FundProviderUnsubscribeLocal>>(null);
-
-    const { selected, setSelected, toggleAll, toggle } = useTableToggles();
-
-    const selectedMeta = useMemo(() => {
-        const list = fundUnsubscriptions?.data?.filter((item) => selected?.includes(item.id));
-
-        return {
-            selected: list,
-            selected_cancel: list?.filter((item) => item.can_cancel),
-        };
-    }, [fundUnsubscriptions?.data, selected]);
-
-    const { headElement, configsElement } = useConfigurableTable(fundUnsubscribeService.getColumns(), {
-        trPrepend: (
-            <Fragment>
-                {[null, 'pending'].includes(filterValues.state) && (
-                    <th className="th-narrow">
-                        <TableCheckboxControl
-                            checked={selected.length == fundUnsubscriptions?.data?.length}
-                            onClick={(e) => toggleAll(e, fundUnsubscriptions?.data)}
-                        />
-                    </th>
-                )}
-            </Fragment>
-        ),
-    });
-
-    const fetchUnsubscriptions = useCallback(() => {
-        setSelected([]);
-        setLoading(true);
-        setProgress(0);
-
-        fundUnsubscribeService
-            .listProvider(organization.id, filterValuesActive)
-            .then((res) => setFundUnsubscriptions(res.data))
-            .catch(pushApiError)
-            .finally(() => {
-                setLoading(false);
-                setProgress(100);
-            });
-    }, [setSelected, setProgress, fundUnsubscribeService, organization.id, filterValuesActive, pushApiError]);
-
-    const cancelUnsubscriptions = useCallback(
-        (unsubscriptions: Array<FundProviderUnsubscribe>) => {
-            openModal((modal) => (
-                <ModalDangerZone
-                    modal={modal}
-                    title={translate('modals.danger_zone.cancel_provider_unsubscription.title')}
-                    description={translate('modals.danger_zone.cancel_provider_unsubscription.description')}
-                    buttonSubmit={{
-                        text: translate('modals.danger_zone.cancel_provider_unsubscription.buttons.cancel'),
-                        onClick: () => {
-                            const promises = unsubscriptions.map((item) => {
-                                return fundUnsubscribeService.update(organization.id, item.id, { canceled: 1 });
-                            });
-
-                            Promise.all(promises)
-                                .then(() => pushSuccess('Opgeslagen!'))
-                                .catch(pushApiError)
-                                .finally(() => {
-                                    fetchUnsubscriptions();
-                                    modal.close();
-                                    onChange?.();
-                                });
-                        },
-                    }}
-                    buttonCancel={{
-                        text: translate('modals.danger_zone.cancel_provider_unsubscription.buttons.confirm'),
-                        onClick: modal.close,
-                    }}
-                />
-            ));
-        },
-        [
-            fetchUnsubscriptions,
-            fundUnsubscribeService,
-            onChange,
-            openModal,
-            organization.id,
-            pushApiError,
-            pushSuccess,
-            translate,
-        ],
-    );
-
-    useEffect(() => {
-        fetchUnsubscriptions();
-    }, [fetchUnsubscriptions]);
-
-    useEffect(() => {
-        return () => {
-            resetFilters();
-        };
-    }, [resetFilters]);
-
-    return (
-        <div className="card">
-            <div className="card-header">
-                <div className="card-title flex flex-grow">
-                    {translate(`fund_unsubscriptions.title`)}
-
-                    {!loading && selected.length > 0 && ` (${selected.length}/${fundUnsubscriptions.data.length})`}
-                    {!loading && selected.length == 0 && ` (${fundUnsubscriptions.meta.total})`}
-                </div>
-
-                <div className="card-header-filters">
-                    <div className="block block-inline-filters">
-                        {selectedMeta?.selected_cancel?.length > 0 && (
-                            <button
-                                type={'button'}
-                                className="button button-danger button-sm"
-                                disabled={selectedMeta?.selected_cancel?.length !== selected.length}
-                                onClick={() => cancelUnsubscriptions(selectedMeta?.selected_cancel)}>
-                                <em className="mdi mdi-close-circle-outline icon-start" />
-                                Annuleren
-                            </button>
-                        )}
-                        <div className="flex-col">
-                            <div className="block block-label-tabs">
-                                <div className="label-tab-set">
-                                    {states?.map((state) => (
-                                        <div
-                                            key={state.key}
-                                            className={`label-tab label-tab-sm ${
-                                                filterValues.state == state.key ? 'active' : ''
-                                            }`}
-                                            onClick={() => filterUpdate({ state: state.key })}>
-                                            {state.label}
-                                        </div>
-                                    ))}
-                                </div>
-                            </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"
-                                        value={filterValues.q}
-                                        onChange={(e) => filterUpdate({ q: e.target.value })}
-                                        placeholder="Zoeken"
-                                    />
-                                </div>
-                            </div>
-                        )}
-                        <CardHeaderFilter filter={filter}>
-                            <FilterItemToggle label={translate('provider_funds.filters.labels.search')} show={true}>
-                                <input
-                                    className="form-control"
-                                    value={filterValues.q}
-                                    onChange={(e) => filterUpdate({ q: e.target.value })}
-                                    placeholder="Zoeken"
-                                />
-                            </FilterItemToggle>
-
-                            <FilterItemToggle label={translate('transactions.labels.from')}>
-                                <DatePickerControl
-                                    value={dateParse(filterValues.from)}
-                                    placeholder={translate('jjjj-MM-dd')}
-                                    onChange={(from: Date) => {
-                                        filterUpdate({ from: dateFormat(from) });
-                                    }}
-                                />
-                            </FilterItemToggle>
-
-                            <FilterItemToggle label={translate('transactions.labels.to')}>
-                                <DatePickerControl
-                                    value={dateParse(filterValues.to)}
-                                    placeholder={translate('jjjj-MM-dd')}
-                                    onChange={(to: Date) => {
-                                        filterUpdate({ to: dateFormat(to) });
-                                    }}
-                                />
-                            </FilterItemToggle>
-                        </CardHeaderFilter>
-                    </div>
-                </div>
-            </div>
-            {!loading && fundUnsubscriptions.data.length > 0 && (
-                <div className="card-section">
-                    <div className="card-block card-block-table form">
-                        {configsElement}
-
-                        <TableTopScroller>
-                            <table className="table">
-                                {headElement}
-
-                                <tbody>
-                                    {fundUnsubscriptions.data?.map((unsubscription) => (
-                                        <tr
-                                            key={unsubscription.id}
-                                            className={selected.includes(unsubscription.id) ? 'selected' : ''}>
-                                            {[null, 'pending'].includes(filterValues.state) && (
-                                                <td className="td-narrow">
-                                                    <TableCheckboxControl
-                                                        checked={selected.includes(unsubscription.id)}
-                                                        onClick={(e) => toggle(e, unsubscription)}
-                                                    />
-                                                </td>
-                                            )}
-
-                                            <td>
-                                                <div className="td-collapsable">
-                                                    <div className="collapsable-media">
-                                                        <img
-                                                            src={
-                                                                unsubscription.fund_provider?.fund?.logo?.sizes
-                                                                    ?.thumbnail ||
-                                                                assetUrl('/assets/img/placeholders/fund-thumbnail.png')
-                                                            }
-                                                            className="td-media td-media-sm"
-                                                            alt=""
-                                                        />
-                                                    </div>
-                                                    <div className="collapsable-content">
-                                                        <div className="text-primary text-semibold">
-                                                            {unsubscription.fund_provider.fund.name}
-                                                        </div>
-                                                        <a
-                                                            target="_blank"
-                                                            rel="noreferrer"
-                                                            href={unsubscription.fund.implementation.url_webshop}
-                                                            className="text-strong text-md text-muted-dark text-inherit">
-                                                            {strLimit(unsubscription.fund.implementation?.name, 40)}
-                                                        </a>
-                                                    </div>
-                                                </div>
-                                            </td>
-                                            <td title={unsubscription.fund_provider.fund.organization.name}>
-                                                {strLimit(unsubscription.fund_provider.fund.organization.name)}
-                                            </td>
-                                            <td className="nowrap">
-                                                <strong className="text-strong text-md text-muted-dark">
-                                                    {unsubscription.created_at_locale}
-                                                </strong>
-                                            </td>
-                                            <td className="nowrap">
-                                                <strong className="text-strong text-md text-muted-dark">
-                                                    {unsubscription.unsubscribe_at_locale}
-                                                </strong>
-                                            </td>
-                                            <td title="{{ unsubscription.note }}">
-                                                {unsubscription.note ? (
-                                                    <div className="flex">
-                                                        <span>{strLimit(unsubscription.note)}</span>
-                                                        &nbsp;
-                                                        {unsubscription.note?.length >= 25 && (
-                                                            <Tooltip
-                                                                type={'primary'}
-                                                                position={'bottom'}
-                                                                text={strLimit(unsubscription.note || '-', 512)}
-                                                            />
-                                                        )}
-                                                    </div>
-                                                ) : (
-                                                    <TableEmptyValue />
-                                                )}
-                                            </td>
-                                            <td className="nowrap">
-                                                {unsubscription.state == 'approved' && (
-                                                    <Label type="success">{unsubscription.state_locale}</Label>
-                                                )}
-
-                                                {unsubscription.state == 'pending' && (
-                                                    <Label type="warning">{unsubscription.state_locale}</Label>
-                                                )}
-
-                                                {unsubscription.state == 'overdue' && (
-                                                    <Label type="danger">{unsubscription.state_locale}</Label>
-                                                )}
-
-                                                {unsubscription.state == 'canceled' && (
-                                                    <Label type="default">{unsubscription.state_locale}</Label>
-                                                )}
-                                            </td>
-                                            <td className={'table-td-actions text-right'}>
-                                                {unsubscription.can_cancel ? (
-                                                    <TableRowActions
-                                                        content={(e) => (
-                                                            <div className="dropdown dropdown-actions">
-                                                                <div
-                                                                    className="dropdown-item"
-                                                                    title="Cancel"
-                                                                    onClick={() => {
-                                                                        cancelUnsubscriptions([unsubscription]);
-                                                                        e.close();
-                                                                    }}>
-                                                                    <em className="mdi mdi-close-circle-outline icon-start" />
-                                                                    Annuleren
-                                                                </div>
-                                                            </div>
-                                                        )}
-                                                    />
-                                                ) : (
-                                                    <TableEmptyValue />
-                                                )}
-                                            </td>
-                                        </tr>
-                                    ))}
-                                </tbody>
-                            </table>
-                        </TableTopScroller>
-                    </div>
-                </div>
-            )}
-
-            {loading && (
-                <div className="card-section">
-                    <div className="card-loading">
-                        <div className="mdi mdi-loading mdi-spin" />
-                    </div>
-                </div>
-            )}
-
-            {!loading && fundUnsubscriptions?.meta?.total == 0 && (
-                <EmptyCard type={'card-section'} title={translate(`provider_funds.empty_block.unsubscriptions`)} />
-            )}
-
-            {fundUnsubscriptions?.meta && (
-                <div className="card-section">
-                    <Paginator
-                        meta={fundUnsubscriptions.meta}
-                        filters={filterValues}
-                        updateFilters={filterUpdate}
-                        perPageKey={paginatorKey}
-                    />
-                </div>
-            )}
-        </div>
-    );
-}
diff --git a/react/src/dashboard/components/pages/provider-funds/elements/ProviderFundsTable.tsx b/react/src/dashboard/components/pages/provider-funds/elements/ProviderFundsTable.tsx
index 9bbb9983d..422c35cca 100644
--- a/react/src/dashboard/components/pages/provider-funds/elements/ProviderFundsTable.tsx
+++ b/react/src/dashboard/components/pages/provider-funds/elements/ProviderFundsTable.tsx
@@ -21,18 +21,18 @@ import TableTopScroller from '../../../elements/tables/TableTopScroller';
 import useConfigurableTable from '../../vouchers/hooks/useConfigurableTable';
 import TableEmptyValue from '../../../elements/table-empty-value/TableEmptyValue';
 import TableRowActions from '../../../elements/tables/TableRowActions';
-import classNames from 'classnames';
 import usePushApiError from '../../../../hooks/usePushApiError';
 import Label from '../../../elements/image_cropper/Label';
 import useFilterNext from '../../../../modules/filter_next/useFilterNext';
 import { NumberParam, StringParam } from 'use-query-params';
+import ModalNotification from '../../../modals/ModalNotification';
 
 export default function ProviderFundsTable({
     type,
     organization,
     onChange,
 }: {
-    type: 'active' | 'pending_rejected' | 'archived';
+    type: 'active' | 'pending_rejected' | 'archived' | 'unsubscribed';
     organization: Organization;
     onChange: () => void;
 }) {
@@ -66,7 +66,6 @@ export default function ProviderFundsTable({
         return {
             selected: list,
             selected_cancel: list?.filter((item) => item.can_cancel),
-            selected_unsubscribe: list?.filter((item) => item.can_unsubscribe),
         };
     }, [providerFunds?.data, selected]);
 
@@ -103,6 +102,7 @@ export default function ProviderFundsTable({
             .listFunds(organization.id, {
                 active: type == 'active' ? 1 : 0,
                 pending: type == 'pending_rejected' ? 1 : 0,
+                unsubscribed: type == 'unsubscribed' ? 1 : 0,
                 archived: type == 'archived' ? 1 : 0,
                 ...filterValuesActive,
             })
@@ -185,6 +185,66 @@ export default function ProviderFundsTable({
         [fetchFunds, onChange, openModal, organization],
     );
 
+    const failOfficesCheck = useCallback(() => {
+        openModal((modal) => (
+            <ModalNotification
+                modal={modal}
+                title={translate('provider_funds.available.error_apply.title')}
+                description={translate('provider_funds.available.error_apply.description')}
+                buttonCancel={{
+                    text: translate('modal.buttons.cancel'),
+                    onClick: modal.close,
+                }}
+            />
+        ));
+    }, [openModal, translate]);
+
+    const successApplying = useCallback(() => {
+        openModal((modal) => (
+            <ModalNotification
+                modal={modal}
+                title={translate('provider_funds.available.applied_for_fund.title')}
+                description={translate('provider_funds.available.applied_for_fund.description')}
+                icon={'fund_applied'}
+                buttonSubmit={{
+                    text: translate('modal.buttons.confirm'),
+                    onClick: modal.close,
+                }}
+            />
+        ));
+    }, [openModal, translate]);
+
+    const applyFund = useCallback(
+        (providerFund: FundProvider) => {
+            if (organization.offices_count == 0) {
+                return failOfficesCheck();
+            }
+
+            providerFundService
+                .applyForFund(organization.id, providerFund.fund.id)
+                .then(() => {
+                    successApplying();
+                    setSelected([]);
+                })
+                .catch(pushApiError)
+                .finally(() => {
+                    fetchFunds();
+                    onChange?.();
+                });
+        },
+        [
+            failOfficesCheck,
+            fetchFunds,
+            onChange,
+            organization.id,
+            organization.offices_count,
+            providerFundService,
+            pushApiError,
+            setSelected,
+            successApplying,
+        ],
+    );
+
     useEffect(() => {
         fetchFunds();
     }, [fetchFunds]);
@@ -196,7 +256,7 @@ export default function ProviderFundsTable({
     }, [resetFilters]);
 
     return (
-        <div className="card">
+        <div className="card" data-dusk={`${type}TableFundsContent`}>
             <div className="card-header">
                 <div className="card-title flex flex-grow">
                     {translate(`provider_funds.title.${type}`)}
@@ -224,6 +284,7 @@ export default function ProviderFundsTable({
                                     value={filterValues.q}
                                     onChange={(e) => filterUpdate({ q: e.target.value })}
                                     placeholder="Zoeken"
+                                    data-dusk={`${type}TableFundsSearch`}
                                 />
                             </div>
                         </div>
@@ -244,7 +305,8 @@ export default function ProviderFundsTable({
                                     {providerFunds.data?.map((providerFund) => (
                                         <tr
                                             key={providerFund.id}
-                                            className={selected.includes(providerFund.id) ? 'selected' : ''}>
+                                            className={selected.includes(providerFund.id) ? 'selected' : ''}
+                                            data-dusk={`${type}TableFundsRow${providerFund.id}`}>
                                             {type !== 'archived' && (
                                                 <td className="td-narrow">
                                                     <TableCheckboxControl
@@ -318,6 +380,10 @@ export default function ProviderFundsTable({
                                                     {providerFund.state == 'rejected' && (
                                                         <Label type="danger">{providerFund.state_locale}</Label>
                                                     )}
+
+                                                    {providerFund.state == 'unsubscribed' && (
+                                                        <Label type="danger_light">{providerFund.state_locale}</Label>
+                                                    )}
                                                 </td>
                                             )}
 
@@ -330,8 +396,28 @@ export default function ProviderFundsTable({
                                             {type !== 'archived' ? (
                                                 <td className={'table-td-actions text-right'}>
                                                     <TableRowActions
+                                                        dataDusk={'btnFundProviderMenu'}
                                                         content={(e) => (
                                                             <div className="dropdown dropdown-actions">
+                                                                {providerFund.fund.state != 'closed' &&
+                                                                    providerFund.state === 'unsubscribed' && (
+                                                                        <div
+                                                                            className="dropdown-item"
+                                                                            data-dusk={`btnApplyFund${providerFund.id}`}
+                                                                            title={translate(
+                                                                                'provider_funds.buttons.join_unsubscribed',
+                                                                            )}
+                                                                            onClick={() => {
+                                                                                applyFund(providerFund);
+                                                                                e.close();
+                                                                            }}>
+                                                                            <em className="mdi mdi-restart icon-start" />
+                                                                            {translate(
+                                                                                'provider_funds.buttons.join_unsubscribed',
+                                                                            )}
+                                                                        </div>
+                                                                    )}
+
                                                                 {providerFund.fund.state != 'closed' && (
                                                                     <div
                                                                         className="dropdown-item"
@@ -347,11 +433,9 @@ export default function ProviderFundsTable({
 
                                                                 {type == 'active' && (
                                                                     <div
-                                                                        className={classNames(
-                                                                            'dropdown-item',
-                                                                            !providerFund.can_unsubscribe && 'disabled',
-                                                                        )}
-                                                                        title="Unsubscribe"
+                                                                        className="dropdown-item"
+                                                                        data-dusk={`btnUnsubscribe${providerFund.id}`}
+                                                                        title="Uitschrijven"
                                                                         onClick={() => {
                                                                             unsubscribe(providerFund);
                                                                             e.close();
diff --git a/react/src/dashboard/components/pages/sponsor-fund-unsubscriptions/SponsorFundUnsubscriptions.tsx b/react/src/dashboard/components/pages/sponsor-fund-unsubscriptions/SponsorFundUnsubscriptions.tsx
deleted file mode 100644
index 86f15b38b..000000000
--- a/react/src/dashboard/components/pages/sponsor-fund-unsubscriptions/SponsorFundUnsubscriptions.tsx
+++ /dev/null
@@ -1,154 +0,0 @@
-import React, { Fragment, useCallback, useEffect, useState } from 'react';
-import { PaginationData } from '../../../props/ApiResponses';
-import useActiveOrganization from '../../../hooks/useActiveOrganization';
-import usePaginatorService from '../../../modules/paginator/services/usePaginatorService';
-import LoadingCard from '../../elements/loading-card/LoadingCard';
-import useSetProgress from '../../../hooks/useSetProgress';
-import { createEnumParam, NumberParam } from 'use-query-params';
-import Paginator from '../../../modules/paginator/components/Paginator';
-import useFundUnsubscribeService from '../../../services/FundUnsubscribeService';
-import FundProviderUnsubscribe from '../../../props/models/FundProviderUnsubscribe';
-import useFilterNext from '../../../modules/filter_next/useFilterNext';
-import SponsorFundUnsubscriptionTableItem from './elements/SponsorFundUnsubscriptionTableItem';
-import LoaderTableCard from '../../elements/loader-table-card/LoaderTableCard';
-import StateNavLink from '../../../modules/state_router/StateNavLink';
-import useConfigurableTable from '../vouchers/hooks/useConfigurableTable';
-import TableTopScroller from '../../elements/tables/TableTopScroller';
-import usePushApiError from '../../../hooks/usePushApiError';
-import { DashboardRoutes } from '../../../modules/state_router/RouterBuilder';
-
-export default function SponsorFundUnsubscriptions() {
-    const activeOrganization = useActiveOrganization();
-
-    const setProgress = useSetProgress();
-    const pushApiError = usePushApiError();
-
-    const paginatorService = usePaginatorService();
-    const fundUnsubscribeService = useFundUnsubscribeService();
-
-    const [loading, setLoading] = useState(false);
-    const [paginatorKey] = useState('sponsor-fund-unsubscriptions');
-    const [fundUnsubscribes, setFundUnsubscribes] = useState<PaginationData<FundProviderUnsubscribe>>(null);
-
-    const [statesOptions] = useState([
-        { key: null, name: 'Alle' },
-        { key: 'pending', name: 'In afwachting' },
-        { key: 'approved', name: 'Gearchiveerd' },
-        { key: 'canceled', name: 'Geannuleerd' },
-    ]);
-
-    const [filterValues, filterActiveValues, filtersUpdate] = useFilterNext<{
-        page?: number;
-        state?: string;
-        per_page?: number;
-    }>(
-        {
-            page: 1,
-            state: null,
-            per_page: paginatorService.getPerPage(paginatorKey),
-        },
-        {
-            queryParamsRemoveDefault: true,
-            queryParams: {
-                page: NumberParam,
-                state: createEnumParam(['pending', 'approved', 'canceled']),
-                per_page: NumberParam,
-            },
-        },
-    );
-
-    const { headElement, configsElement } = useConfigurableTable(fundUnsubscribeService.getColumnsSponsor());
-
-    const fetchFundUnsubscribes = useCallback(() => {
-        setProgress(0);
-        setLoading(true);
-
-        fundUnsubscribeService
-            .listSponsor(activeOrganization.id, filterActiveValues)
-            .then((res) => setFundUnsubscribes(res.data))
-            .catch(pushApiError)
-            .finally(() => {
-                setProgress(100);
-                setLoading(false);
-            });
-    }, [activeOrganization.id, filterActiveValues, fundUnsubscribeService, pushApiError, setProgress]);
-
-    useEffect(() => {
-        fetchFundUnsubscribes();
-    }, [fetchFundUnsubscribes]);
-
-    if (!fundUnsubscribes) {
-        return <LoadingCard />;
-    }
-
-    return (
-        <Fragment>
-            <StateNavLink
-                className="button button-text"
-                name={DashboardRoutes.SPONSOR_PROVIDER_ORGANIZATIONS}
-                params={{ organizationId: activeOrganization.id }}>
-                <em className="mdi mdi-arrow-left icon-start" />
-                Terug naar de vorige pagina
-            </StateNavLink>
-
-            <div className="card">
-                <div className="card-header">
-                    <div className="card-title flex flex-grow">Afmeldingen ({fundUnsubscribes.meta.total})</div>
-                    <div className="card-header-filters">
-                        <div className="block block-label-tabs pull-right">
-                            <div className="label-tab-set">
-                                {statesOptions.map((item) => (
-                                    <div
-                                        key={item.key}
-                                        onClick={() => filtersUpdate({ state: item.key })}
-                                        className={`label-tab label-tab-sm ${
-                                            filterValues.state == item.key ? 'active' : ''
-                                        }`}>
-                                        {item.name}
-                                    </div>
-                                ))}
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <LoaderTableCard
-                    loading={loading}
-                    empty={fundUnsubscribes.meta.total == 0}
-                    emptyTitle={'Geen afmeldingen van aanbieders'}>
-                    <div className="card-section">
-                        <div className="card-block card-block-table">
-                            {configsElement}
-                            <TableTopScroller>
-                                <table className="table">
-                                    {headElement}
-
-                                    <tbody>
-                                        {fundUnsubscribes.data.map((unsubscription) => (
-                                            <SponsorFundUnsubscriptionTableItem
-                                                key={unsubscription.id}
-                                                unsubscription={unsubscription}
-                                                organization={activeOrganization}
-                                            />
-                                        ))}
-                                    </tbody>
-                                </table>
-                            </TableTopScroller>
-                        </div>
-                    </div>
-
-                    {fundUnsubscribes.meta.total > 0 && (
-                        <div className="card-section">
-                            <Paginator
-                                meta={fundUnsubscribes.meta}
-                                filters={filterValues}
-                                updateFilters={filtersUpdate}
-                                perPageKey={paginatorKey}
-                            />
-                        </div>
-                    )}
-                </LoaderTableCard>
-            </div>
-        </Fragment>
-    );
-}
diff --git a/react/src/dashboard/components/pages/sponsor-fund-unsubscriptions/elements/SponsorFundUnsubscriptionTableItem.tsx b/react/src/dashboard/components/pages/sponsor-fund-unsubscriptions/elements/SponsorFundUnsubscriptionTableItem.tsx
deleted file mode 100644
index 5f031bcf8..000000000
--- a/react/src/dashboard/components/pages/sponsor-fund-unsubscriptions/elements/SponsorFundUnsubscriptionTableItem.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-import React from 'react';
-import { strLimit } from '../../../../helpers/string';
-import Organization from '../../../../props/models/Organization';
-import FundProviderUnsubscribe from '../../../../props/models/FundProviderUnsubscribe';
-import useAssetUrl from '../../../../hooks/useAssetUrl';
-import StateNavLink from '../../../../modules/state_router/StateNavLink';
-import Tooltip from '../../../elements/tooltip/Tooltip';
-import TableEmptyValue from '../../../elements/table-empty-value/TableEmptyValue';
-import Label from '../../../elements/image_cropper/Label';
-import { DashboardRoutes } from '../../../../modules/state_router/RouterBuilder';
-
-export default function SponsorFundUnsubscriptionTableItem({
-    organization,
-    unsubscription,
-}: {
-    organization: Organization;
-    unsubscription: FundProviderUnsubscribe;
-}) {
-    const assetUrl = useAssetUrl();
-
-    return (
-        <StateNavLink
-            customElement={'tr'}
-            className={'tr-clickable'}
-            name={DashboardRoutes.SPONSOR_PROVIDER_ORGANIZATION}
-            params={{
-                organizationId: organization.id,
-                id: unsubscription.fund_provider.organization.id,
-            }}>
-            <td>
-                <div className="td-entity-main">
-                    <div className="td-entity-main-media">
-                        <img
-                            className="td-media td-media-sm td-media-round"
-                            src={
-                                unsubscription.fund_provider.organization.logo?.sizes.thumbnail ||
-                                assetUrl('/assets/img/placeholders/organization-thumbnail.png')
-                            }
-                            alt={''}
-                        />
-                    </div>
-
-                    <div className="td-entity-main-content">
-                        <div
-                            className="text-strong text-primary"
-                            title={unsubscription.fund_provider?.organization?.name || '-'}>
-                            {strLimit(unsubscription.fund_provider?.organization?.name, 32)}
-                        </div>
-                    </div>
-                </div>
-            </td>
-
-            <td title={unsubscription.fund_provider?.fund?.name || '-'}>
-                {strLimit(unsubscription.fund_provider?.fund?.name, 25)}
-            </td>
-
-            <td className="nowrap">
-                <div className="text-strong text-md text-muted-dark">{unsubscription.created_at_locale}</div>
-            </td>
-
-            <td title={unsubscription.note}>
-                {unsubscription.note ? (
-                    <div className="flex">
-                        {strLimit(unsubscription.note, 25)}
-                        &nbsp;
-                        {unsubscription.note?.length >= 25 && (
-                            <Tooltip type={'primary'} position={'bottom'} text={unsubscription.note} maxLength={1000} />
-                        )}
-                    </div>
-                ) : (
-                    <TableEmptyValue />
-                )}
-            </td>
-
-            <td className="nowrap">
-                {unsubscription.state === 'approved' && <Label type={'success'}>{unsubscription.state_locale}</Label>}
-                {unsubscription.state === 'pending' && <Label type={'warning'}>{unsubscription.state_locale}</Label>}
-                {unsubscription.state === 'overdue' && <Label type={'danger'}>{unsubscription.state_locale}</Label>}
-                {unsubscription.state === 'canceled' && <Label type={'default'}>{unsubscription.state_locale}</Label>}
-
-                {!['approved', 'pending', 'overdue', 'canceled'].includes(unsubscription.state) && (
-                    <Label type={'default'}>{unsubscription.state_locale}</Label>
-                )}
-            </td>
-
-            <td className="nowrap">
-                <div className={unsubscription.is_expired ? 'text-danger' : 'text-muted-dark'}>
-                    {unsubscription.is_expired && <em className="mdi mdi-alert" />}
-                    &nbsp;
-                    <strong className="text-strong text-md">{unsubscription.unsubscribe_at_locale}</strong>
-                </div>
-            </td>
-            <td className={'table-td-actions text-right'}>
-                <TableEmptyValue />
-            </td>
-        </StateNavLink>
-    );
-}
diff --git a/react/src/dashboard/components/pages/sponsor-provider-organization/elements/FundProviderTableItem.tsx b/react/src/dashboard/components/pages/sponsor-provider-organization/elements/FundProviderTableItem.tsx
index 990fa9f79..aa363669f 100644
--- a/react/src/dashboard/components/pages/sponsor-provider-organization/elements/FundProviderTableItem.tsx
+++ b/react/src/dashboard/components/pages/sponsor-provider-organization/elements/FundProviderTableItem.tsx
@@ -95,7 +95,9 @@ export default function FundProviderTableItem({
             <td>
                 <div
                     className={`label label-${
-                        { accepted: 'success', pending: 'default', rejected: 'danger' }[fundProvider.state]
+                        { accepted: 'success', pending: 'default', rejected: 'danger', unsubscribed: 'danger-light' }[
+                            fundProvider.state
+                        ]
                     }`}>
                     {fundProvider.state_locale}
                 </div>
diff --git a/react/src/dashboard/components/pages/sponsor-provider-organizations/SponsorProviderOrganizations.tsx b/react/src/dashboard/components/pages/sponsor-provider-organizations/SponsorProviderOrganizations.tsx
index 9cb2207a9..3b67e257e 100644
--- a/react/src/dashboard/components/pages/sponsor-provider-organizations/SponsorProviderOrganizations.tsx
+++ b/react/src/dashboard/components/pages/sponsor-provider-organizations/SponsorProviderOrganizations.tsx
@@ -11,22 +11,18 @@ import Implementation from '../../../props/models/Implementation';
 import Fund from '../../../props/models/Fund';
 import { useFundService } from '../../../services/FundService';
 import { useOrganizationService } from '../../../services/OrganizationService';
-import useFundUnsubscribeService from '../../../services/FundUnsubscribeService';
 import { SponsorProviderOrganization } from '../../../props/models/Organization';
 import useSetProgress from '../../../hooks/useSetProgress';
 import { NumberParam, StringParam, createEnumParam } from 'use-query-params';
 import useTranslate from '../../../hooks/useTranslate';
 import useFilterNext from '../../../modules/filter_next/useFilterNext';
-import StateNavLink from '../../../modules/state_router/StateNavLink';
 import LoaderTableCard from '../../elements/loader-table-card/LoaderTableCard';
 import ProvidersTableItem from './elements/ProvidersTableItem';
 import Paginator from '../../../modules/paginator/components/Paginator';
 import useConfigurableTable from '../vouchers/hooks/useConfigurableTable';
 import TableTopScroller from '../../elements/tables/TableTopScroller';
-import classNames from 'classnames';
 import usePushApiError from '../../../hooks/usePushApiError';
 import useProviderExporter from '../../../services/exporters/useProviderExporter';
-import { DashboardRoutes } from '../../../modules/state_router/RouterBuilder';
 
 export default function SponsorProviderOrganizations() {
     const translate = useTranslate();
@@ -41,17 +37,13 @@ export default function SponsorProviderOrganizations() {
     const paginatorService = usePaginatorService();
     const organizationService = useOrganizationService();
     const implementationService = useImplementationService();
-    const fundUnsubscribeService = useFundUnsubscribeService();
 
     const [funds, setFunds] = useState<Array<Partial<Fund>>>(null);
     const [loading, setLoading] = useState<boolean>(false);
     const [implementations, setImplementations] = useState<Array<Partial<Implementation>>>(null);
     const [providerOrganizations, setProviderOrganizations] =
         useState<PaginationData<SponsorProviderOrganization>>(null);
-    const [requests, setRequests] = useState(null);
     const [paginatorKey] = useState('provider_organizations');
-    const [requestsExpired, setRequestsExpired] = useState(null);
-    const [requestsPending, setRequestsPending] = useState(null);
 
     const [orderByOptions] = useState([
         { value: 'application_date', name: 'Nieuwste eerst' },
@@ -62,6 +54,7 @@ export default function SponsorProviderOrganizations() {
         { key: 'pending', label: 'Actie benodigd' },
         { key: 'active', label: 'Actief' },
         { key: 'rejected', label: 'Inactief' },
+        { key: 'unsubscribed', label: 'Afmeldingen' },
     ]);
 
     const [filterValues, filterActiveValues, filterUpdate, filter] = useFilterNext<{
@@ -152,20 +145,6 @@ export default function SponsorProviderOrganizations() {
             });
     }, [activeOrganization.id, filterActiveValues, organizationService, pushApiError, setProgress]);
 
-    const fetchFundUnsubscribes = useCallback(() => {
-        setProgress(0);
-
-        fundUnsubscribeService
-            .listSponsor(activeOrganization.id, { per_page: 1000 })
-            .then((res) => {
-                setRequests(res.data.data.length);
-                setRequestsExpired(res.data.data.filter((item) => item.state == 'overdue').length);
-                setRequestsPending(res.data.data.filter((item) => item.state == 'pending').length);
-            })
-            .catch(pushApiError)
-            .finally(() => setProgress(100));
-    }, [activeOrganization.id, fundUnsubscribeService, pushApiError, setProgress]);
-
     const exportList = useCallback(() => {
         providerExporter.exportData(activeOrganization.id, {
             ...filterActiveValues,
@@ -180,10 +159,6 @@ export default function SponsorProviderOrganizations() {
         fetchImplementations();
     }, [fetchImplementations]);
 
-    useEffect(() => {
-        fetchFundUnsubscribes();
-    }, [fetchFundUnsubscribes]);
-
     useEffect(() => {
         fetchProviderOrganizations();
     }, [fetchProviderOrganizations]);
@@ -193,372 +168,330 @@ export default function SponsorProviderOrganizations() {
     }
 
     return (
-        <Fragment>
-            {requests > 0 && (
-                <div
-                    className={classNames(
-                        'card-block card-block-requests',
-                        requestsExpired > 0 && 'card-block-requests-danger',
-                        requestsPending > 0 && 'card-block-requests-warning',
-                    )}>
-                    <StateNavLink
-                        name={DashboardRoutes.SPONSOR_FUND_UNSUBSCRIPTIONS}
-                        params={{ organizationId: activeOrganization.id }}
-                        className="card-section flex">
-                        {requestsExpired > 0 && (
-                            <div className="card-heading">
-                                <em className="mdi mdi-alert" />
-                                Urgente afmeldingen ({requestsExpired})
-                            </div>
-                        )}
-
-                        {requestsExpired == 0 && requestsPending > 0 && (
-                            <div className="card-heading">
-                                <em className="mdi mdi-alert-circle" />
-                                Afmeldingen ({requestsPending})
-                            </div>
-                        )}
+        <div className="card" data-dusk="tableProviderContent">
+            <div className="card-header">
+                <div className="flex flex-grow">
+                    <div className="card-title flex flex-grow">
+                        {translate('provider_organizations.header.title')} ({providerOrganizations.meta.total})
+                    </div>
+                </div>
 
-                        {requestsExpired == 0 && requestsPending == 0 && (
-                            <div className="card-heading">
-                                <em className="mdi mdi-alert-circle" />
-                                Geen nieuwe afmeldingen
+                <div className="card-header-filters form">
+                    <div className="block block-inline-filters">
+                        {filter.show && (
+                            <div className="button button-text" onClick={filter.resetFilters}>
+                                <em className="mdi mdi-close icon-start" />
+                                Wis filter
                             </div>
                         )}
 
-                        <div className="button button-text pull-right">
-                            Bekijken
-                            <em className="mdi mdi-arrow-right icon-end" />
-                        </div>
-                    </StateNavLink>
-                </div>
-            )}
-
-            <div className="card" data-dusk="tableProviderContent">
-                <div className="card-header">
-                    <div className="flex flex-grow">
-                        <div className="card-title flex flex-grow">
-                            {translate('provider_organizations.header.title')} ({providerOrganizations.meta.total})
-                        </div>
-                    </div>
-
-                    <div className="card-header-filters form">
-                        <div className="block block-inline-filters">
-                            {filter.show && (
-                                <div className="button button-text" onClick={filter.resetFilters}>
-                                    <em className="mdi mdi-close icon-start" />
-                                    Wis filter
-                                </div>
-                            )}
-
-                            {!filter.show && (
-                                <Fragment>
-                                    <label className="form-label">Sorteer op:</label>
-                                    <SelectControl
-                                        className={'form-control form-control-text nowrap'}
-                                        options={orderByOptions}
-                                        propKey={'value'}
-                                        allowSearch={false}
-                                        value={filterValues.order_by}
-                                        onChange={(order_by: string) => filterUpdate({ order_by })}
-                                    />
-
-                                    <div className="block block-label-tabs">
-                                        <div className="label-tab-set">
-                                            {stateGroups?.map((stateGroup) => (
-                                                <div
-                                                    key={stateGroup.key}
-                                                    data-dusk={`provider_tab_${stateGroup.key}`}
-                                                    onClick={() => filterUpdate({ state_group: stateGroup.key })}
-                                                    className={`label-tab label-tab-sm ${
-                                                        filterValues.state_group === stateGroup.key ? 'active' : ''
-                                                    }`}>
-                                                    {stateGroup.label}
-                                                </div>
-                                            ))}
-                                        </div>
+                        {!filter.show && (
+                            <Fragment>
+                                <label className="form-label">Sorteer op:</label>
+                                <SelectControl
+                                    className={'form-control form-control-text nowrap'}
+                                    options={orderByOptions}
+                                    propKey={'value'}
+                                    allowSearch={false}
+                                    value={filterValues.order_by}
+                                    onChange={(order_by: string) => filterUpdate({ order_by })}
+                                />
+
+                                <div className="block block-label-tabs">
+                                    <div className="label-tab-set">
+                                        {stateGroups?.map((stateGroup) => (
+                                            <div
+                                                key={stateGroup.key}
+                                                data-dusk={`provider_tab_${stateGroup.key}`}
+                                                onClick={() => filterUpdate({ state_group: stateGroup.key })}
+                                                className={`label-tab label-tab-sm ${
+                                                    filterValues.state_group === stateGroup.key ? 'active' : ''
+                                                }`}>
+                                                {stateGroup.label}
+                                            </div>
+                                        ))}
                                     </div>
+                                </div>
 
-                                    <div className="form-group">
-                                        <input
-                                            className="form-control"
-                                            value={filterValues.q}
-                                            data-dusk="tableProviderSearch"
-                                            onChange={(e) => filterUpdate({ q: e.target.value })}
-                                            placeholder={translate('event_logs.labels.search')}
-                                        />
-                                    </div>
-                                </Fragment>
-                            )}
-
-                            <CardHeaderFilter filter={filter}>
-                                <FilterItemToggle label="Accepteer budget">
-                                    <div>
-                                        <div className="radio">
-                                            <input
-                                                id="allow_budget_yes"
-                                                type="radio"
-                                                name="allow_budget"
-                                                onChange={() => filterUpdate({ allow_budget: '1' })}
-                                                defaultValue={1}
-                                                checked={filterValues.allow_budget === '1'}
-                                            />
-                                            <label className="radio-label" htmlFor="allow_budget_yes">
-                                                <div className="radio-circle" />
-                                                Ja
-                                            </label>
-                                        </div>
-                                        <div className="radio">
-                                            <input
-                                                id="allow_budget_no"
-                                                type="radio"
-                                                name="allow_budget"
-                                                onChange={() => filterUpdate({ allow_budget: '0' })}
-                                                defaultValue={0}
-                                                checked={filterValues.allow_budget === '0'}
-                                            />
-                                            <label className="radio-label" htmlFor="allow_budget_no">
-                                                <div className="radio-circle" />
-                                                Nee
-                                            </label>
-                                        </div>
-                                        <div className="radio">
-                                            <input
-                                                id="allow_budget_all"
-                                                type="radio"
-                                                name="allow_budget"
-                                                onChange={() => filterUpdate({ allow_budget: null })}
-                                                defaultValue={null}
-                                                checked={filterValues.allow_budget === null}
-                                            />
-                                            <label className="radio-label" htmlFor="allow_budget_all">
-                                                <div className="radio-circle" />
-                                                Alles
-                                            </label>
-                                        </div>
-                                    </div>
-                                </FilterItemToggle>
-
-                                <FilterItemToggle label="Accepteer aanbiedingen">
-                                    <div className="radio">
-                                        <input
-                                            id="allow_products_yes"
-                                            type="radio"
-                                            name="allow_products"
-                                            onChange={() => filterUpdate({ allow_products: '1' })}
-                                            defaultValue={1}
-                                            checked={filterValues.allow_products === '1'}
-                                        />
-                                        <label className="radio-label" htmlFor="allow_products_yes">
-                                            <div className="radio-circle" />
-                                            Alle aanbiedingen
-                                        </label>
-                                    </div>
-                                    <div className="radio">
-                                        <input
-                                            id="allow_products_some"
-                                            type="radio"
-                                            name="allow_products"
-                                            onChange={() => filterUpdate({ allow_products: '-1' })}
-                                            defaultValue={-1}
-                                            checked={filterValues.allow_products === '-1'}
-                                        />
-                                        <label className="radio-label" htmlFor="allow_products_some">
-                                            <div className="radio-circle" />
-                                            Sommige aanbiedingen
-                                        </label>
-                                    </div>
-                                    <div className="radio">
-                                        <input
-                                            id="allow_products_no"
-                                            type="radio"
-                                            name="allow_products"
-                                            onChange={() => filterUpdate({ allow_products: '0' })}
-                                            defaultValue={0}
-                                            checked={filterValues.allow_products === '0'}
-                                        />
-                                        <label className="radio-label" htmlFor="allow_products_no">
-                                            <div className="radio-circle" />
-                                            Geen aanbiedingen
-                                        </label>
-                                    </div>
-                                    <div className="radio">
-                                        <input
-                                            id="allow_products_all"
-                                            type="radio"
-                                            name="allow_products"
-                                            onChange={() => filterUpdate({ allow_products: null })}
-                                            defaultValue={null}
-                                            checked={filterValues.allow_products === null}
-                                        />
-                                        <label className="radio-label" htmlFor="allow_products_all">
-                                            <div className="radio-circle" />
-                                            Alles
-                                        </label>
-                                    </div>
-                                </FilterItemToggle>
-
-                                <FilterItemToggle label="Levert producten">
-                                    <div className="radio">
-                                        <input
-                                            id="has_products_yes"
-                                            type="radio"
-                                            name="has_products"
-                                            onChange={() => filterUpdate({ has_products: '1' })}
-                                            defaultValue={1}
-                                            checked={filterValues.has_products === '1'}
-                                        />
-                                        <label className="radio-label" htmlFor="has_products_yes">
-                                            <div className="radio-circle" />
-                                            Ja
-                                        </label>
-                                    </div>
-                                    <div className="radio">
-                                        <input
-                                            id="has_products_no"
-                                            type="radio"
-                                            name="has_products"
-                                            onChange={() => filterUpdate({ has_products: '0' })}
-                                            defaultValue={0}
-                                            checked={filterValues.has_products === '0'}
-                                        />
-                                        <label className="radio-label" htmlFor="has_products_no">
-                                            <div className="radio-circle" />
-                                            Nee
-                                        </label>
-                                    </div>
-                                    <div className="radio">
-                                        <input
-                                            id="has_products_all"
-                                            type="radio"
-                                            name="has_products"
-                                            onChange={() => filterUpdate({ has_products: null })}
-                                            defaultValue={null}
-                                            checked={filterValues.has_products === null}
-                                        />
-                                        <label className="radio-label" htmlFor="has_products_all">
-                                            <div className="radio-circle" />
-                                            Alles
-                                        </label>
-                                    </div>
-                                </FilterItemToggle>
+                                <div className="form-group">
+                                    <input
+                                        className="form-control"
+                                        value={filterValues.q}
+                                        data-dusk="tableProviderSearch"
+                                        onChange={(e) => filterUpdate({ q: e.target.value })}
+                                        placeholder={translate('event_logs.labels.search')}
+                                    />
+                                </div>
+                            </Fragment>
+                        )}
 
-                                <FilterItemToggle label="Betaalmethode toestaan">
+                        <CardHeaderFilter filter={filter}>
+                            <FilterItemToggle label="Accepteer budget">
+                                <div>
                                     <div className="radio">
                                         <input
-                                            id="allow_extra_payments_yes"
+                                            id="allow_budget_yes"
                                             type="radio"
-                                            name="allow_extra_payments"
-                                            onChange={() => filterUpdate({ allow_extra_payments: '1' })}
+                                            name="allow_budget"
+                                            onChange={() => filterUpdate({ allow_budget: '1' })}
                                             defaultValue={1}
-                                            checked={filterValues.allow_extra_payments === '1'}
+                                            checked={filterValues.allow_budget === '1'}
                                         />
-                                        <label className="radio-label" htmlFor="allow_extra_payments_yes">
+                                        <label className="radio-label" htmlFor="allow_budget_yes">
                                             <div className="radio-circle" />
                                             Ja
                                         </label>
                                     </div>
                                     <div className="radio">
                                         <input
-                                            id="allow_extra_payments_no"
+                                            id="allow_budget_no"
                                             type="radio"
-                                            name="allow_extra_payments"
-                                            onChange={() => filterUpdate({ allow_extra_payments: '0' })}
+                                            name="allow_budget"
+                                            onChange={() => filterUpdate({ allow_budget: '0' })}
                                             defaultValue={0}
-                                            checked={filterValues.allow_extra_payments === '0'}
+                                            checked={filterValues.allow_budget === '0'}
                                         />
-                                        <label className="radio-label" htmlFor="allow_extra_payments_no">
+                                        <label className="radio-label" htmlFor="allow_budget_no">
                                             <div className="radio-circle" />
                                             Nee
                                         </label>
                                     </div>
                                     <div className="radio">
                                         <input
-                                            id="allow_extra_payments_all"
+                                            id="allow_budget_all"
                                             type="radio"
-                                            name="allow_extra_payments"
-                                            onChange={() => filterUpdate({ allow_extra_payments: null })}
+                                            name="allow_budget"
+                                            onChange={() => filterUpdate({ allow_budget: null })}
                                             defaultValue={null}
-                                            checked={filterValues.allow_extra_payments === null}
+                                            checked={filterValues.allow_budget === null}
                                         />
-                                        <label className="radio-label" htmlFor="allow_extra_payments_all">
+                                        <label className="radio-label" htmlFor="allow_budget_all">
                                             <div className="radio-circle" />
                                             Alles
                                         </label>
                                     </div>
-                                </FilterItemToggle>
-
-                                <FilterItemToggle label="Implementatie">
-                                    <SelectControl
-                                        className={'form-control'}
-                                        options={implementations}
-                                        propKey={'id'}
-                                        allowSearch={false}
-                                        value={filterValues.implementation_id}
-                                        onChange={(implementation_id: number) => {
-                                            filterUpdate({ implementation_id });
-                                        }}
+                                </div>
+                            </FilterItemToggle>
+
+                            <FilterItemToggle label="Accepteer aanbiedingen">
+                                <div className="radio">
+                                    <input
+                                        id="allow_products_yes"
+                                        type="radio"
+                                        name="allow_products"
+                                        onChange={() => filterUpdate({ allow_products: '1' })}
+                                        defaultValue={1}
+                                        checked={filterValues.allow_products === '1'}
+                                    />
+                                    <label className="radio-label" htmlFor="allow_products_yes">
+                                        <div className="radio-circle" />
+                                        Alle aanbiedingen
+                                    </label>
+                                </div>
+                                <div className="radio">
+                                    <input
+                                        id="allow_products_some"
+                                        type="radio"
+                                        name="allow_products"
+                                        onChange={() => filterUpdate({ allow_products: '-1' })}
+                                        defaultValue={-1}
+                                        checked={filterValues.allow_products === '-1'}
+                                    />
+                                    <label className="radio-label" htmlFor="allow_products_some">
+                                        <div className="radio-circle" />
+                                        Sommige aanbiedingen
+                                    </label>
+                                </div>
+                                <div className="radio">
+                                    <input
+                                        id="allow_products_no"
+                                        type="radio"
+                                        name="allow_products"
+                                        onChange={() => filterUpdate({ allow_products: '0' })}
+                                        defaultValue={0}
+                                        checked={filterValues.allow_products === '0'}
+                                    />
+                                    <label className="radio-label" htmlFor="allow_products_no">
+                                        <div className="radio-circle" />
+                                        Geen aanbiedingen
+                                    </label>
+                                </div>
+                                <div className="radio">
+                                    <input
+                                        id="allow_products_all"
+                                        type="radio"
+                                        name="allow_products"
+                                        onChange={() => filterUpdate({ allow_products: null })}
+                                        defaultValue={null}
+                                        checked={filterValues.allow_products === null}
                                     />
-                                </FilterItemToggle>
-
-                                <div className="form-actions">
-                                    {providerOrganizations && (
-                                        <button
-                                            className="button button-primary button-wide"
-                                            disabled={providerOrganizations.meta.total == 0}
-                                            data-dusk="export"
-                                            onClick={() => exportList()}>
-                                            <em className="mdi mdi-download icon-start" />
-                                            {translate('components.dropdown.export', {
-                                                total: providerOrganizations.meta.total,
-                                            })}
-                                        </button>
-                                    )}
+                                    <label className="radio-label" htmlFor="allow_products_all">
+                                        <div className="radio-circle" />
+                                        Alles
+                                    </label>
                                 </div>
-                            </CardHeaderFilter>
-                        </div>
+                            </FilterItemToggle>
+
+                            <FilterItemToggle label="Levert producten">
+                                <div className="radio">
+                                    <input
+                                        id="has_products_yes"
+                                        type="radio"
+                                        name="has_products"
+                                        onChange={() => filterUpdate({ has_products: '1' })}
+                                        defaultValue={1}
+                                        checked={filterValues.has_products === '1'}
+                                    />
+                                    <label className="radio-label" htmlFor="has_products_yes">
+                                        <div className="radio-circle" />
+                                        Ja
+                                    </label>
+                                </div>
+                                <div className="radio">
+                                    <input
+                                        id="has_products_no"
+                                        type="radio"
+                                        name="has_products"
+                                        onChange={() => filterUpdate({ has_products: '0' })}
+                                        defaultValue={0}
+                                        checked={filterValues.has_products === '0'}
+                                    />
+                                    <label className="radio-label" htmlFor="has_products_no">
+                                        <div className="radio-circle" />
+                                        Nee
+                                    </label>
+                                </div>
+                                <div className="radio">
+                                    <input
+                                        id="has_products_all"
+                                        type="radio"
+                                        name="has_products"
+                                        onChange={() => filterUpdate({ has_products: null })}
+                                        defaultValue={null}
+                                        checked={filterValues.has_products === null}
+                                    />
+                                    <label className="radio-label" htmlFor="has_products_all">
+                                        <div className="radio-circle" />
+                                        Alles
+                                    </label>
+                                </div>
+                            </FilterItemToggle>
+
+                            <FilterItemToggle label="Betaalmethode toestaan">
+                                <div className="radio">
+                                    <input
+                                        id="allow_extra_payments_yes"
+                                        type="radio"
+                                        name="allow_extra_payments"
+                                        onChange={() => filterUpdate({ allow_extra_payments: '1' })}
+                                        defaultValue={1}
+                                        checked={filterValues.allow_extra_payments === '1'}
+                                    />
+                                    <label className="radio-label" htmlFor="allow_extra_payments_yes">
+                                        <div className="radio-circle" />
+                                        Ja
+                                    </label>
+                                </div>
+                                <div className="radio">
+                                    <input
+                                        id="allow_extra_payments_no"
+                                        type="radio"
+                                        name="allow_extra_payments"
+                                        onChange={() => filterUpdate({ allow_extra_payments: '0' })}
+                                        defaultValue={0}
+                                        checked={filterValues.allow_extra_payments === '0'}
+                                    />
+                                    <label className="radio-label" htmlFor="allow_extra_payments_no">
+                                        <div className="radio-circle" />
+                                        Nee
+                                    </label>
+                                </div>
+                                <div className="radio">
+                                    <input
+                                        id="allow_extra_payments_all"
+                                        type="radio"
+                                        name="allow_extra_payments"
+                                        onChange={() => filterUpdate({ allow_extra_payments: null })}
+                                        defaultValue={null}
+                                        checked={filterValues.allow_extra_payments === null}
+                                    />
+                                    <label className="radio-label" htmlFor="allow_extra_payments_all">
+                                        <div className="radio-circle" />
+                                        Alles
+                                    </label>
+                                </div>
+                            </FilterItemToggle>
+
+                            <FilterItemToggle label="Implementatie">
+                                <SelectControl
+                                    className={'form-control'}
+                                    options={implementations}
+                                    propKey={'id'}
+                                    allowSearch={false}
+                                    value={filterValues.implementation_id}
+                                    onChange={(implementation_id: number) => {
+                                        filterUpdate({ implementation_id });
+                                    }}
+                                />
+                            </FilterItemToggle>
+
+                            <div className="form-actions">
+                                {providerOrganizations && (
+                                    <button
+                                        className="button button-primary button-wide"
+                                        disabled={providerOrganizations.meta.total == 0}
+                                        data-dusk="export"
+                                        onClick={() => exportList()}>
+                                        <em className="mdi mdi-download icon-start" />
+                                        {translate('components.dropdown.export', {
+                                            total: providerOrganizations.meta.total,
+                                        })}
+                                    </button>
+                                )}
+                            </div>
+                        </CardHeaderFilter>
+                    </div>
+                </div>
+            </div>
+
+            <LoaderTableCard
+                loading={loading}
+                empty={providerOrganizations.meta.total == 0}
+                emptyTitle={translate(`provider_organizations.empty_title.${filterActiveValues.state_group}`)}
+                emptyDescription={translate(
+                    `provider_organizations.empty_description.${filterActiveValues.state_group}`,
+                )}>
+                <div className="card-section">
+                    <div className="card-block card-block-table">
+                        {configsElement}
+
+                        <TableTopScroller>
+                            <table className="table">
+                                {headElement}
+
+                                {providerOrganizations.data.map((providerOrganization) => (
+                                    <ProvidersTableItem
+                                        key={providerOrganization.id}
+                                        organization={activeOrganization}
+                                        providerOrganization={providerOrganization}
+                                    />
+                                ))}
+                            </table>
+                        </TableTopScroller>
                     </div>
                 </div>
 
-                <LoaderTableCard
-                    loading={loading}
-                    empty={providerOrganizations.meta.total == 0}
-                    emptyTitle={translate(`provider_organizations.empty_title.${filterActiveValues.state_group}`)}
-                    emptyDescription={translate(
-                        `provider_organizations.empty_description.${filterActiveValues.state_group}`,
-                    )}>
+                {providerOrganizations.meta.total > 0 && (
                     <div className="card-section">
-                        <div className="card-block card-block-table">
-                            {configsElement}
-
-                            <TableTopScroller>
-                                <table className="table">
-                                    {headElement}
-
-                                    {providerOrganizations.data.map((providerOrganization) => (
-                                        <ProvidersTableItem
-                                            key={providerOrganization.id}
-                                            organization={activeOrganization}
-                                            providerOrganization={providerOrganization}
-                                        />
-                                    ))}
-                                </table>
-                            </TableTopScroller>
-                        </div>
+                        <Paginator
+                            meta={providerOrganizations.meta}
+                            filters={filter.values}
+                            updateFilters={filter.update}
+                            perPageKey={paginatorKey}
+                        />
                     </div>
-
-                    {providerOrganizations.meta.total > 0 && (
-                        <div className="card-section">
-                            <Paginator
-                                meta={providerOrganizations.meta}
-                                filters={filter.values}
-                                updateFilters={filter.update}
-                                perPageKey={paginatorKey}
-                            />
-                        </div>
-                    )}
-                </LoaderTableCard>
-            </div>
-        </Fragment>
+                )}
+            </LoaderTableCard>
+        </div>
     );
 }
diff --git a/react/src/dashboard/components/pages/sponsor-provider-organizations/elements/ProvidersTableItemFunds.tsx b/react/src/dashboard/components/pages/sponsor-provider-organizations/elements/ProvidersTableItemFunds.tsx
index 3eda52832..f8903b2fb 100644
--- a/react/src/dashboard/components/pages/sponsor-provider-organizations/elements/ProvidersTableItemFunds.tsx
+++ b/react/src/dashboard/components/pages/sponsor-provider-organizations/elements/ProvidersTableItemFunds.tsx
@@ -81,6 +81,7 @@ export default function ProvidersTableItemFunds({
                                                         accepted: 'success',
                                                         pending: 'default',
                                                         rejected: 'danger',
+                                                        unsubscribed: 'danger-light',
                                                     }[fundProvider.state]
                                                 }`}>
                                                 {fundProvider.state_locale}
diff --git a/react/src/dashboard/i18n/nl/pages/provider-funds.js b/react/src/dashboard/i18n/nl/pages/provider-funds.js
index 96acf0611..88b70c085 100644
--- a/react/src/dashboard/i18n/nl/pages/provider-funds.js
+++ b/react/src/dashboard/i18n/nl/pages/provider-funds.js
@@ -7,10 +7,12 @@ export default {
         invitations: 'Uitnodigingen',
         invitations_archived: 'Gearchiveerde uitnodigingen',
         expired_closed: 'Archief',
+        unsubscribed: 'Afmeldingen',
         main: 'Fondsen',
     },
     buttons: {
         join: 'Aanmelden',
+        join_unsubscribed: 'Opnieuw aannmelden',
         clear_filter: 'Wis filter',
         unsubscribe: 'Afmelden',
     },
@@ -53,7 +55,7 @@ export default {
         invitations: 'Er zijn geen openstaande uitnodigingen die u kunt accepteren.',
         invitations_archived: 'Er zijn geen verlopen uitnodigingen.',
         pending_rejected: 'Er zijn geen fondsen waar u aanmeldingen voor hebt.',
-        unsubscriptions: 'Er zijn geen afmeldingsaanvragen gevonden.',
+        unsubscribed: 'Er zijn geen afmeldingsaanvragen gevonden.',
     },
     filters: {
         labels: {
@@ -98,6 +100,6 @@ export default {
         pending_rejected: 'Aanmeldingen',
         available: 'Beschikbaar',
         archived: 'Archief',
-        unsubscriptions: 'Uitgeschreven',
+        unsubscribed: 'Afmeldingen',
     },
 };
diff --git a/react/src/dashboard/modules/state_router/RouterBuilder.tsx b/react/src/dashboard/modules/state_router/RouterBuilder.tsx
index 04e76d2ac..754bd99b2 100644
--- a/react/src/dashboard/modules/state_router/RouterBuilder.tsx
+++ b/react/src/dashboard/modules/state_router/RouterBuilder.tsx
@@ -30,7 +30,6 @@ export enum DashboardRoutes {
     FUND_PROVIDER_PRODUCT_CREATE = 'fund-provider-product-create',
     FUND_PROVIDER_PRODUCT = 'fund-provider-product',
     FUND_PROVIDER_PRODUCT_EDIT = 'fund-provider-product-edit',
-    SPONSOR_FUND_UNSUBSCRIPTIONS = 'sponsor-fund-unsubscriptions',
     SPONSOR_PRODUCTS = 'sponsor-products',
     SPONSOR_PRODUCT = 'sponsor-product',
     BANK_CONNECTIONS = 'bank-connections',
diff --git a/react/src/dashboard/props/models/FundProvider.tsx b/react/src/dashboard/props/models/FundProvider.tsx
index c26944a71..81d39cb30 100644
--- a/react/src/dashboard/props/models/FundProvider.tsx
+++ b/react/src/dashboard/props/models/FundProvider.tsx
@@ -7,7 +7,7 @@ export default interface FundProvider {
     id: number;
     organization_id: number;
     fund_id: number;
-    state: 'pending' | 'accepted' | 'rejected';
+    state: 'pending' | 'accepted' | 'rejected' | 'unsubscribed';
     state_locale: string;
     dismissed: boolean;
     allow_products: boolean;
@@ -23,7 +23,6 @@ export default interface FundProvider {
     employees: Array<Employee>;
     organization: Organization;
     can_cancel: boolean;
-    can_unsubscribe: boolean;
     last_activity: string;
     last_activity_locale: string;
     allow_extra_payments?: boolean;
diff --git a/react/src/dashboard/props/models/FundProviderUnsubscribe.tsx b/react/src/dashboard/props/models/FundProviderUnsubscribe.tsx
deleted file mode 100644
index b0fc1ecbc..000000000
--- a/react/src/dashboard/props/models/FundProviderUnsubscribe.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import FundProvider from './FundProvider';
-import Fund from './Fund';
-
-export default interface FundProviderUnsubscribe {
-    id: number;
-    fund_provider_id: number;
-    note: string;
-    state: string;
-    state_locale: string;
-    is_expired: boolean;
-    can_cancel: boolean;
-    fund_provider: FundProvider;
-    fund: Fund;
-    unsubscribe_at: string;
-    unsubscribe_at_locale: string;
-    unsubscribe_days_left: number;
-    created_at: string;
-    created_at_locale: string;
-}
diff --git a/react/src/dashboard/router/routes.tsx b/react/src/dashboard/router/routes.tsx
index ce89d3ae7..a540e53be 100644
--- a/react/src/dashboard/router/routes.tsx
+++ b/react/src/dashboard/router/routes.tsx
@@ -84,7 +84,6 @@ import Households from '../components/pages/households/Households';
 import HouseholdsShow from '../components/pages/households/HouseholdsShow';
 import BiConnection from '../components/pages/bi-connection/BiConnection';
 import ThrowError from '../components/pages_system/ThrowError';
-import SponsorFundUnsubscriptions from '../components/pages/sponsor-fund-unsubscriptions/SponsorFundUnsubscriptions';
 import OrganizationsContacts from '../components/pages/organizations-contacts/OrganizationsContacts';
 import Payouts from '../components/pages/payouts/Payouts';
 import PayoutsView from '../components/pages/payouts-view/PayoutsView';
@@ -274,12 +273,6 @@ router.state(DashboardRoutes.FUND_PROVIDER_PRODUCT_EDIT, <SponsorProductsEdit />
     fallbackState: DashboardRoutes.ORGANIZATIONS,
 });
 
-router.state(DashboardRoutes.SPONSOR_FUND_UNSUBSCRIPTIONS, <SponsorFundUnsubscriptions />, {
-    path: `/organisaties/:organizationId/fonds-afmeldingen`,
-    altPath: `/organizations/:organizationId/fund-unsubscriptions`,
-    fallbackState: DashboardRoutes.ORGANIZATIONS,
-});
-
 router.state(DashboardRoutes.SPONSOR_PRODUCTS, <SponsorProducts />, {
     path: `/organisaties/:organizationId/sponsor/producten`,
     altPath: `/organizations/:organizationId/sponsor/products`,
diff --git a/react/src/dashboard/services/FundUnsubscribeService.ts b/react/src/dashboard/services/FundUnsubscribeService.ts
deleted file mode 100644
index edd5939f8..000000000
--- a/react/src/dashboard/services/FundUnsubscribeService.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-import { useState } from 'react';
-import ApiRequestService from './ApiRequestService';
-import ApiResponse, { ApiResponseSingle } from '../props/ApiResponses';
-import FundProviderUnsubscribe from '../props/models/FundProviderUnsubscribe';
-import { ConfigurableTableColumn } from '../components/pages/vouchers/hooks/useConfigurableTable';
-
-export class FundUnsubscribeService<T = FundProviderUnsubscribe> {
-    /**
-     * @param apiRequest
-     */
-    public constructor(protected apiRequest: ApiRequestService<T> = new ApiRequestService<T>()) {}
-
-    /**
-     * Url prefix
-     *
-     * @param data
-     */
-    public prefix = '/platform/organizations';
-
-    public listProvider(organization_id: number, query = {}): Promise<ApiResponse<T>> {
-        return this.apiRequest.get(`${this.prefix}/${organization_id}/provider/fund-unsubscribes`, query);
-    }
-
-    public listSponsor(organization_id: number, query = {}): Promise<ApiResponse<T>> {
-        return this.apiRequest.get(`${this.prefix}/${organization_id}/sponsor/fund-unsubscribes`, query);
-    }
-
-    public store(organization_id: number, data: object): Promise<ApiResponseSingle<T>> {
-        return this.apiRequest.post(`${this.prefix}/${organization_id}/provider/fund-unsubscribes`, data);
-    }
-
-    public update(organization_id: number, id: number, data: object): Promise<ApiResponseSingle<T>> {
-        return this.apiRequest.patch(`${this.prefix}/${organization_id}/provider/fund-unsubscribes/${id}`, data);
-    }
-
-    public updateSponsor(organization_id: number, id: number, data: object): Promise<ApiResponseSingle<T>> {
-        return this.apiRequest.patch(`${this.prefix}/${organization_id}/sponsor/fund-unsubscribes/${id}`, data);
-    }
-
-    public getColumns(): Array<ConfigurableTableColumn> {
-        const list = ['fund', 'organization', 'created_at', 'unsubscription_date', 'note', 'status'].filter(
-            (item) => item,
-        );
-
-        return list.map((key) => ({
-            key,
-            label: `fund_unsubscriptions.labels.${key}`,
-            tooltip: {
-                key: key,
-                title: `fund_unsubscriptions.labels.${key}`,
-                description: `fund_unsubscriptions.tooltips.${key}`,
-            },
-        }));
-    }
-
-    public getColumnsSponsor(): Array<ConfigurableTableColumn> {
-        const list = ['provider', 'fund', 'created_at', 'note', 'status', 'unsubscription_date'].filter((item) => item);
-
-        return list.map((key) => ({
-            key,
-            label: `fund_unsubscriptions.labels.${key}`,
-            tooltip: {
-                key: key,
-                title: `fund_unsubscriptions.labels.${key}`,
-                description: `fund_unsubscriptions.tooltips.${key}`,
-            },
-        }));
-    }
-}
-export default function useFundUnsubscribeService(): FundUnsubscribeService {
-    return useState(new FundUnsubscribeService())[0];
-}
diff --git a/react/src/dashboard/services/ProviderFundService.ts b/react/src/dashboard/services/ProviderFundService.ts
index 0a635d689..38a026db7 100644
--- a/react/src/dashboard/services/ProviderFundService.ts
+++ b/react/src/dashboard/services/ProviderFundService.ts
@@ -37,8 +37,8 @@ export class ProviderFundService<T = FundProvider> {
                         available: number;
                         archived: number;
                         invitations: number;
+                        unsubscribed: number;
                         invitations_archived: number;
-                        unsubscriptions: number;
                     };
                     tags: Array<Tag>;
                     organizations: Array<Organization>;
@@ -85,7 +85,16 @@ export class ProviderFundService<T = FundProvider> {
         return this.apiRequest.delete(`${this.prefix}/${organizationId}/provider/funds/${id}`, data);
     }
 
-    public getColumns(type: 'active' | 'pending_rejected' | 'archived'): Array<ConfigurableTableColumn> {
+    /**
+     * Unsubscribe fund
+     */
+    public unsubscribe(organizationId: number, id: number, data: object = {}): Promise<null> {
+        return this.apiRequest.post(`${this.prefix}/${organizationId}/provider/funds/${id}/unsubscribe`, data);
+    }
+
+    public getColumns(
+        type: 'active' | 'pending_rejected' | 'archived' | 'unsubscribed',
+    ): Array<ConfigurableTableColumn> {
         const list = [
             'name',
             'organization_name',

From a4ab1a3f7fa1cabe59bc756b4f30b611cd0d094a Mon Sep 17 00:00:00 2001
From: dev-rminds <dev@rminds.nl>
Date: Fri, 21 Nov 2025 12:26:19 +0200
Subject: [PATCH 02/13] prevalidation voucher top-up feature

---
 .../modals/ModalPrevalidationsUpload.tsx      | 525 +++++++++++++-----
 .../pages/prevalidations/Prevalidations.tsx   |  12 +-
 .../services/PrevalidationService.ts          |  15 +-
 3 files changed, 395 insertions(+), 157 deletions(-)

diff --git a/react/src/dashboard/components/modals/ModalPrevalidationsUpload.tsx b/react/src/dashboard/components/modals/ModalPrevalidationsUpload.tsx
index 71a48644f..9fc7042b2 100644
--- a/react/src/dashboard/components/modals/ModalPrevalidationsUpload.tsx
+++ b/react/src/dashboard/components/modals/ModalPrevalidationsUpload.tsx
@@ -41,11 +41,34 @@ type RowDataPropData = { [key: string]: string };
 
 type RowDataProp = {
     _uid: string;
+    line: number;
     uid_hash: string;
     records_hash: string;
+    records_amount?: string;
+    db?: RowDataDBProp;
     data: RowDataPropData;
 };
 
+type RowDataDBProp = {
+    id: number;
+    uid_hash: string;
+    records_hash: string;
+    state: 'pending' | 'used';
+    vouchers: Array<{ id: number; amount: string }>;
+};
+
+enum Steps {
+    select_fund,
+    upload_csv,
+}
+
+enum CSVProgress {
+    initial,
+    validated,
+    uploading,
+    uploaded,
+}
+
 export default function ModalPrevalidationsUpload({
     funds,
     fundId,
@@ -72,12 +95,9 @@ export default function ModalPrevalidationsUpload({
     const fundService = useFundService();
     const prevalidationService = usePrevalidationService();
 
-    const [STEP_SET_UP] = useState(1);
-    const [STEP_UPLOAD] = useState(2);
-
     const [fund, setFund] = useState<Fund>(funds?.find((fund) => fund.id == fundId) || funds[0]);
-    const [step, setStep] = useState(STEP_SET_UP);
-    const [data, setData] = useState<Array<RowDataProp>>(null);
+    const [step, setStep] = useState<Steps>(Steps.select_fund);
+    const [data, setData] = useState<Array<RowDataPropData>>(null);
     const [loading, setLoading] = useState<boolean>(false);
     const [changed, setChanged] = useState<boolean>(false);
     const [csvFile, setCsvFile] = useState<File>(null);
@@ -90,7 +110,7 @@ export default function ModalPrevalidationsUpload({
     const [csvErrors, setCsvErrors] = useState<CSVErrorProp>({});
     const [csvWarnings, setCsvWarnings] = useState<CSVWarningProp>({});
     const [csvIsValid, setCsvIsValid] = useState(false);
-    const [csvProgress, setCsvProgress] = useState<number>(0);
+    const [csvProgress, setCsvProgress] = useState<CSVProgress>(CSVProgress.initial);
 
     const [progressStatus, setProgressStatus] = useState<string>('');
     const [acceptedFiles] = useState(['.csv']);
@@ -134,7 +154,7 @@ export default function ModalPrevalidationsUpload({
         setCsvFile(null);
         setCsvErrors({});
         setCsvIsValid(false);
-        setCsvProgress(null);
+        setCsvProgress(CSVProgress.initial);
     }, []);
 
     const filterSelectedFiles = useCallback(
@@ -147,7 +167,7 @@ export default function ModalPrevalidationsUpload({
     );
 
     const validateCsvData = useCallback(
-        function (data: Array<RowDataProp>): Array<string> {
+        function (data: Array<RowDataPropData>): Array<string> {
             return data
                 .map((row, row_key) => {
                     const rowRecordKeys = Object.keys(row);
@@ -318,7 +338,7 @@ export default function ModalPrevalidationsUpload({
                 });
 
                 return isEmpty(row) ? result : [...result, row];
-            }, []) as RowDataProp[];
+            }, []) as RowDataPropData[];
 
             const invalidRows = validateCsvData(parsedData);
 
@@ -333,7 +353,7 @@ export default function ModalPrevalidationsUpload({
 
             setData(parsedData);
             setCsvIsValid(Object.keys(csvErrors).length === 0);
-            setCsvProgress(1);
+            setCsvProgress(CSVProgress.validated);
         },
         [criteriaRecordTypeKeys, fund, fundRecordKey, fundRecordKeyValue, parseCsvFile, reset, validateCsvData],
     );
@@ -357,9 +377,9 @@ export default function ModalPrevalidationsUpload({
     }, []);
 
     const startUploadingToServer = useCallback(
-        (data: Array<RowDataPropData>, overwriteUids: Array<string> = []) => {
+        (data: Array<RowDataPropData>, overwriteUids: Array<RowDataProp> = [], topUpUids: Array<RowDataProp> = []) => {
             return new Promise((resolve, reject) => {
-                setCsvProgress(2);
+                setCsvProgress(CSVProgress.uploading);
 
                 const submitData = chunkList(JSON.parse(JSON.stringify(data)), dataChunkSize);
                 const chunksCount = submitData.length;
@@ -370,14 +390,24 @@ export default function ModalPrevalidationsUpload({
 
                 const uploadChunk = async function (data: Array<{ [key: string]: string }>) {
                     prevalidationService
-                        .storeBatch(fund.organization_id, data, fund.id, overwriteUids, {
-                            name: csvFile.name,
-                            content: await fileToText(csvFile),
-                            total: data.length,
-                            chunk: currentChunkNth,
-                            chunks: chunksCount,
-                            chunkSize: dataChunkSize,
-                        })
+                        .storeBatch(
+                            fund.organization_id,
+                            data,
+                            fund.id,
+                            overwriteUids.map((row) => row.data[fund.csv_primary_key]),
+                            topUpUids.map((row) => ({
+                                key: row.data[fund.csv_primary_key],
+                                voucher_id: row.db.vouchers[0]?.id,
+                            })),
+                            {
+                                name: csvFile.name,
+                                content: await fileToText(csvFile),
+                                total: data.length,
+                                chunk: currentChunkNth,
+                                chunks: chunksCount,
+                                chunkSize: dataChunkSize,
+                            },
+                        )
                         .then(() => {
                             setChanged(true);
 
@@ -387,7 +417,7 @@ export default function ModalPrevalidationsUpload({
                             if (currentChunkNth == chunksCount) {
                                 setTimeout(() => {
                                     setProgressBar(100);
-                                    setCsvProgress(3);
+                                    setCsvProgress(CSVProgress.uploaded);
                                     onCompleted?.();
                                     resolve(null);
                                 }, 0);
@@ -419,59 +449,59 @@ export default function ModalPrevalidationsUpload({
         [
             chunkList,
             dataChunkSize,
+            updateProgressBarValue,
+            prevalidationService,
             fund.id,
             fund.organization_id,
-            onCompleted,
-            prevalidationService,
-            pushDanger,
-            showInvalidRows,
-            updateProgressBarValue,
+            fund.csv_primary_key,
             csvFile,
+            onCompleted,
             pushApiError,
+            showInvalidRows,
+            pushDanger,
         ],
     );
 
-    const compareCsvAndDb = useCallback(
-        (csvRecords: Array<RowDataProp>, dbRecords: Array<{ uid_hash: string; records_hash: string }>) => {
-            const dbPrimaryKeys = dbRecords.reduce((obj, row) => {
-                return { ...obj, [row.uid_hash]: true };
-            }, {});
-
-            const dbPrimaryFullKeys = dbRecords.reduce((obj, row) => {
-                return { ...obj, [row.uid_hash + '_' + row.records_hash]: true };
-            }, {});
-
-            const newRecords: Array<RowDataPropData> = [];
-            const updatedRecords: Array<RowDataPropData> = [];
-
-            for (let index = 0; index < csvRecords.length; index++) {
-                if (dbPrimaryKeys[csvRecords[index].uid_hash]) {
-                    if (!dbPrimaryFullKeys[csvRecords[index].uid_hash + '_' + csvRecords[index].records_hash]) {
-                        updatedRecords.push({ ...csvRecords[index].data });
-                    }
-                } else {
-                    newRecords.push(csvRecords[index].data);
-                }
-            }
+    const showErrorsList = useCallback(
+        async (data: Array<RowDataProp>, title: string, subtitle: string, rowLabel: (row: RowDataProp) => string) => {
+            const items = data.map((row) => ({
+                _uid: row._uid,
+                label: rowLabel(row),
+            }));
 
-            if (updatedRecords.length === 0) {
-                if (newRecords.length > 0) {
-                    pushSuccess(
-                        'Uploaden!',
-                        'Geen dubbele waarden gevonden, uploaden ' + newRecords.length + ' nieuwe gegeven(s)...',
-                    );
+            setHideModal(true);
 
-                    startUploadingToServer(newRecords).then();
-                } else {
-                    pushSuccess('Niks veranderd!', 'Geen nieuwe gegevens gevonden in uw .csv bestand...');
+            return new Promise((resolve) => {
+                openModal((modal) => (
+                    <ModalDuplicatesPicker
+                        modal={modal}
+                        hero_title={title}
+                        hero_subtitle={subtitle}
+                        enableToggles={false}
+                        label_on={'Aanmaken'}
+                        label_off={'Overslaan'}
+                        items={items}
+                        onConfirm={() => {
+                            setHideModal(false);
+                            resolve(true);
+                        }}
+                        onCancel={() => {
+                            setHideModal(false);
+                            resolve(true);
+                        }}
+                    />
+                ));
+            });
+        },
+        [openModal],
+    );
 
-                    setCsvProgress(3);
-                    updateProgressBarValue(100);
-                }
-            } else {
-                const items = updatedRecords.map((row) => ({
+    const showUpdateList = useCallback(
+        async (data: Array<RowDataProp>, title: string, subtitle: string, rowLabel: (row: RowDataProp) => string) => {
+            return new Promise<{ skipUids: Array<string>; updateUids: Array<string> } | false>((resolve) => {
+                const items = data.map((row) => ({
                     _uid: row._uid,
-                    label: row[fund.csv_primary_key],
+                    label: rowLabel(row),
                     value: row[fund.csv_primary_key],
                 }));
 
@@ -480,11 +510,8 @@ export default function ModalPrevalidationsUpload({
                 openModal((modal) => (
                     <ModalDuplicatesPicker
                         modal={modal}
-                        hero_title={'Dubbele gegevens gedetecteerd.'}
-                        hero_subtitle={[
-                            `Weet u zeker dat u voor ${items.length} rijen gegevens wilt aanpassen?`,
-                            'Deze nummers hebben al een activatiecode.',
-                        ].join(' ')}
+                        hero_title={title}
+                        hero_subtitle={subtitle}
                         enableToggles={true}
                         label_on={'Aanpassen'}
                         label_off={'Overslaan'}
@@ -495,76 +522,285 @@ export default function ModalPrevalidationsUpload({
                             const skipUids = list.filter((item) => !item.model).map((item) => item._uid);
                             const updateUids = list.filter((item) => item.model).map((item) => item._uid);
 
-                            const updatePrimaryKeys = updatedRecords
-                                .filter((row) => updateUids.includes(row._uid))
-                                .map((row) => row[fund.csv_primary_key]);
+                            resolve({ skipUids, updateUids });
+                        }}
+                        onCancel={() => {
+                            setHideModal(false);
+                            resolve(false);
+                        }}
+                    />
+                ));
+            });
+        },
+        [fund.csv_primary_key, openModal],
+    );
+
+    const compareCsvAndDb = useCallback(
+        async (dbRecords: Array<RowDataDBProp>, csvRecords: Array<RowDataProp>) => {
+            const data = csvRecords.reduce<{
+                create: RowDataProp[];
+                update: RowDataProp[];
+                top_up: RowDataProp[];
+                same_amount: RowDataProp[];
+                less_amount: RowDataProp[];
+                no_vouchers: RowDataProp[];
+                multiple_vouchers: RowDataProp[];
+            }>(
+                (list, csvItem) => {
+                    const dbItem = dbRecords.find((dbRow) => dbRow.uid_hash === csvItem.uid_hash);
+
+                    if (!dbItem) {
+                        list.create.push(csvItem);
+                        return list;
+                    }
 
-                            const newAndUpdatedRecords = updatedRecords
-                                .filter((csvRow) => !skipUids.includes(csvRow._uid))
-                                .concat(newRecords);
+                    if (dbItem.state === 'pending' && csvItem.records_hash !== dbItem.records_hash) {
+                        list.update.push({ ...csvItem, db: dbItem });
+                        return list;
+                    }
 
-                            pushSuccess(
-                                'Uploading!',
-                                [
-                                    `${updatedRecords.length - skipUids.length} gegeven(s) worden vervangen en`,
-                                    `${newRecords.length} gegeven(s) worden aangemaakt!`,
-                                ].join(' '),
-                            );
+                    if (dbItem.state === 'used' && dbItem.records_hash != csvItem.records_hash) {
+                        if (dbItem.vouchers.length === 0) {
+                            list.no_vouchers.push({ ...csvItem, db: dbItem });
+                        }
 
-                            setHideModal(false);
+                        if (dbItem.vouchers.length > 1) {
+                            list.multiple_vouchers.push({ ...csvItem, db: dbItem });
+                        }
 
-                            if (newAndUpdatedRecords.length > 0) {
-                                return startUploadingToServer(newAndUpdatedRecords, updatePrimaryKeys).then(() => {
-                                    if (skipUids.length > 0) {
-                                        pushSuccess('Klaar!', `${skipUids.length} gegeven(s) overgeslagen!`);
-                                    }
+                        if (dbItem.vouchers.length === 1) {
+                            if (dbItem.vouchers[0]?.amount > csvItem.records_amount) {
+                                list.less_amount.push({ ...csvItem, db: dbItem });
+                            }
 
-                                    pushSuccess(
-                                        'Klaar!',
-                                        `${updatedRecords.length - skipUids.length} gegevens vervangen!`,
-                                    );
+                            if (dbItem.vouchers[0]?.amount === csvItem.records_amount) {
+                                list.same_amount.push({ ...csvItem, db: dbItem });
+                            }
 
-                                    pushSuccess('Klaar!', `${newRecords.length} nieuwe gegeven(s) aangemaakt!`);
-                                }, console.error);
+                            if (dbItem.vouchers[0]?.amount < csvItem.records_amount) {
+                                list.top_up.push({ ...csvItem, db: dbItem });
                             }
+                        }
 
-                            onCompleted?.();
-                            setCsvProgress(3);
-                            updateProgressBarValue(100);
-                            pushSuccess('Klaar!', skipUids.length + ' gegevens overgeslagen, geen nieuwe aangemaakt!');
-                        }}
-                        onCancel={() => {
-                            setHideModal(false);
-                            onCompleted?.();
-                        }}
-                    />
-                ));
+                        return list;
+                    }
+
+                    return list;
+                },
+                {
+                    create: [], // to create
+                    update: [], // to update
+                    top_up: [], // top-up required
+                    same_amount: [], // noting to do
+                    less_amount: [], // can't subtract
+                    no_vouchers: [], // can't find the voucher
+                    multiple_vouchers: [], // multiple vouchers - ambiguous case
+                },
+            );
+
+            console.log(data);
+
+            // Data has changed for used prevalidation but could not fund a voucher for top-up
+            if (data.no_vouchers?.length > 0) {
+                await showErrorsList(
+                    data.no_vouchers,
+                    'Voucher niet gevonden',
+                    'De gegevens zijn gewijzigd, maar er kon geen overeenkomende voucher worden gevonden.',
+                    (row) => {
+                        return `Lijn: ${row.line} - Geen voucher gevonden voor "${row.data[fund.csv_primary_key]}"`;
+                    },
+                );
+            }
+
+            // Data has changed for used prevalidation but since there are multiple vouchers it's not clear which one should be updated
+            if (data.multiple_vouchers?.length > 0) {
+                await showErrorsList(
+                    data.multiple_vouchers,
+                    'Meerdere vouchers gedetecteerd',
+                    'Kan niet bepalen welke voucher moet worden bijgewerkt.',
+                    (row) => {
+                        return `Lijn: ${row.line} - Meerdere vouchers gevonden voor "${row.data[fund.csv_primary_key]}"`;
+                    },
+                );
+            }
+
+            // Data has changed but the amount remained the same
+            if (data.same_amount?.length > 0) {
+                await showErrorsList(
+                    data.same_amount,
+                    'Geen wijziging in bedrag gedetecteerd',
+                    'De gegevens zijn gewijzigd, maar het bedrag blijft hetzelfde. Er worden geen updates toegepast.',
+                    (row) => {
+                        return `Lijn: ${row.line} - Gegevens gewijzigd maar bedrag ongewijzigd voor "${row.data[fund.csv_primary_key]}"`;
+                    },
+                );
+            }
+
+            // Data has changed but the amount is now lower
+            if (data.less_amount?.length > 0) {
+                await showErrorsList(
+                    data.less_amount,
+                    'Bedrag verlaagd',
+                    'Wanneer het bedrag wordt verlaagd, kunnen vouchers niet automatisch worden bijgewerkt en moeten ze handmatig worden afgehandeld.',
+                    (row) => {
+                        return `Lijn: ${row.line} - Bedrag verlaagd voor "${row.data[fund.csv_primary_key]}"`;
+                    },
+                );
             }
+
+            if (data.update.length === 0 && data.top_up.length === 0) {
+                if (data.create.length > 0) {
+                    pushSuccess(
+                        'Bezig met uploaden...',
+                        'Geen duplicaten gevonden. Bezig met uploaden van ' +
+                            data.create.length +
+                            ' nieuw(e) record(s)...',
+                    );
+
+                    startUploadingToServer(data.create.map((item) => item.data)).then();
+                } else {
+                    pushSuccess('Geen wijzigingen gedetecteerd', 'Geen nieuwe records gevonden in uw CSV-bestand...');
+                    setCsvProgress(CSVProgress.uploaded);
+                    updateProgressBarValue(100);
+                }
+
+                return;
+            }
+
+            let updateUids = [];
+            let topUpUids = [];
+            let skipUids = [];
+
+            if (data.update.length > 0) {
+                await showUpdateList(
+                    data.update,
+                    'Dubbele records gedetecteerd.',
+                    [
+                        `Weet u zeker dat u ${data.update.length} rij(en) wilt bijwerken?`,
+                        'Deze records hebben al activatiecodes.',
+                    ].join(' '),
+                    (row) => {
+                        return `Lijn: ${row.line} - Wachtende prevalidatiegegevens gewijzigd voor "${row.data[fund.csv_primary_key]}"`;
+                    },
+                ).then((res) => {
+                    if (res === false) {
+                        onCompleted?.();
+                        closeModal();
+                        return;
+                    }
+
+                    skipUids = res.skipUids;
+                    updateUids = res.updateUids;
+                });
+            }
+
+            if (data.top_up.length > 0) {
+                await showUpdateList(
+                    data.top_up,
+                    'Voucher opwaardering vereist.',
+                    [
+                        `Weet u zeker dat u ${data.top_up.length} rij(en) wilt bijwerken?`,
+                        'Deze UIDs hebben al een activatiecode en zijn geactiveerd.',
+                        'Aangezien het nieuw berekende bedrag hoger is, wordt een opwaardeertransactie aangemaakt.',
+                    ].join(' '),
+                    (row) => {
+                        return `Lijn: ${row.line} - Gebruikte prevalidatiegegevens gewijzigd voor "${row.data[fund.csv_primary_key]}"`;
+                    },
+                ).then((res) => {
+                    if (res === false) {
+                        onCompleted?.();
+                        closeModal();
+                        return;
+                    }
+
+                    skipUids = [...skipUids, ...res.skipUids];
+                    topUpUids = res.updateUids;
+                });
+            }
+
+            const updateRows = data.update.filter((row) => updateUids.includes(row._uid));
+            const topUpRows = data.top_up.filter((row) => topUpUids.includes(row._uid));
+
+            const newAndUpdatedRecords = [...data.update, ...data.top_up]
+                .filter((csvRow) => !skipUids.includes(csvRow._uid))
+                .concat(data.create);
+
+            pushSuccess(
+                'Bezig met uploaden...',
+                [
+                    `${data.update.length - skipUids.length} record(s) worden bijgewerkt en`,
+                    `${data.create.length} record(s) worden aangemaakt!`,
+                ].join(' '),
+            );
+
+            setHideModal(false);
+
+            if (newAndUpdatedRecords.length > 0) {
+                return startUploadingToServer(
+                    newAndUpdatedRecords.map((item) => item.data),
+                    updateRows,
+                    topUpRows,
+                ).then(() => {
+                    if (skipUids.length > 0) {
+                        pushSuccess('Voltooid', `${skipUids.length} record(s) overgeslagen!`);
+                    }
+
+                    pushSuccess('Voltooid', `${data.update.length - skipUids.length} record(s) bijgewerkt!`);
+                    pushSuccess('Voltooid', `${data.create.length} nieuw(e) record(s) aangemaakt!`);
+                }, console.error);
+            }
+
+            onCompleted?.();
+            setCsvProgress(CSVProgress.uploaded);
+            updateProgressBarValue(100);
+            pushSuccess('Voltooid', skipUids.length + ' record(s) overgeslagen, geen nieuwe records aangemaakt!');
         },
-        [fund.csv_primary_key, onCompleted, openModal, pushSuccess, startUploadingToServer, updateProgressBarValue],
+        [
+            fund.csv_primary_key,
+            onCompleted,
+            closeModal,
+            pushSuccess,
+            showErrorsList,
+            showUpdateList,
+            startUploadingToServer,
+            updateProgressBarValue,
+        ],
     );
 
     const submitCollectionCheck = useCallback(() => {
-        setCsvProgress(2);
+        setCsvProgress(CSVProgress.uploading);
         abortRef.current = false;
 
-        const submitData = chunkList(JSON.parse(JSON.stringify(data)), dataChunkSize);
+        const submitData: RowDataPropData[][] = chunkList(JSON.parse(JSON.stringify(data)), dataChunkSize);
         const chunksCount = submitData.length;
 
         let currentChunkNth = 0;
+        let collectionDb: RowDataDBProp[] = [];
+        let collectionCsv: RowDataProp[] = [];
 
         updateProgressBarValue(0);
-        let collection = [];
-        let collectionDb = [];
 
-        const uploadChunk = function (data: Array<string>) {
+        const uploadChunk = function (chunkData: Array<RowDataPropData>) {
             prevalidationService
-                .submitCollectionCheck(fund.organization_id, data, fund.id, [])
+                .submitCollectionCheck<{
+                    db: Array<RowDataDBProp>;
+                    collection: Array<RowDataProp>;
+                }>(fund.organization_id, chunkData, fund.id)
                 .then((res) => {
                     currentChunkNth++;
                     updateProgressBarValue((currentChunkNth / chunksCount) * 100);
-                    collection = [...collection, ...res.data.collection];
+
                     collectionDb = [...collectionDb, ...res.data.db];
+                    collectionCsv = [
+                        ...collectionCsv,
+                        ...res.data.collection.map((collectionItem) => ({
+                            ...collectionItem,
+                            line:
+                                data.findIndex((dataItem) => {
+                                    return dataItem[fund.csv_primary_key] == collectionItem.data[fund.csv_primary_key];
+                                }) + 1,
+                        })),
+                    ];
 
                     if (currentChunkNth == chunksCount) {
                         setTimeout(() => {
@@ -575,9 +811,9 @@ export default function ModalPrevalidationsUpload({
                             });
 
                             compareCsvAndDb(
-                                collection.map((row) => ({ _uid: uniqueId('rand_'), ...row })),
                                 collectionDb.map((row) => ({ _uid: uniqueId('rand_'), ...row })),
-                            );
+                                collectionCsv.map((row) => ({ _uid: uniqueId('rand_'), ...row })),
+                            ).then();
                         }, 0);
                     } else {
                         if (abortRef.current) {
@@ -593,10 +829,10 @@ export default function ModalPrevalidationsUpload({
 
                         return err.data?.errors?.data
                             ? pushDanger(err.data.errors.data[0])
-                            : pushDanger('Onbekende error.');
+                            : pushDanger('Onbekende fout.');
                     }
 
-                    pushApiError(err, 'Onbekende error.');
+                    pushApiError(err, 'Onbekende fout.');
                 });
         };
 
@@ -609,6 +845,7 @@ export default function ModalPrevalidationsUpload({
         dataChunkSize,
         fund?.id,
         fund?.organization_id,
+        fund?.csv_primary_key,
         prevalidationService,
         pushDanger,
         pushSuccess,
@@ -638,7 +875,7 @@ export default function ModalPrevalidationsUpload({
         <div
             className={classNames(
                 'modal',
-                step == STEP_SET_UP ? 'modal-md' : 'modal-bulk-upload',
+                step == Steps.select_fund ? 'modal-md' : 'modal-bulk-upload',
                 'modal-animated',
                 (modal.loading || hideModal) && 'modal-loading',
                 isDragOver && 'is-dragover',
@@ -650,13 +887,8 @@ export default function ModalPrevalidationsUpload({
             <div className="modal-window">
                 <a className="mdi mdi-close modal-close" onClick={closeModal} role="button" />
                 <div className="modal-header">Upload CSV-bestand</div>
-                <div
-                    className={classNames(
-                        'modal-body',
-                        classNames(step === STEP_SET_UP ? 'modal-body-visible' : ''),
-                        'form',
-                    )}>
-                    {step == STEP_SET_UP && (
+                <div className={classNames('modal-body', step === Steps.select_fund && 'modal-body-visible', 'form')}>
+                    {step == Steps.select_fund && (
                         <div className="modal-section form">
                             <div className="form-group">
                                 <div className="form-label">{translate('modals.modal_voucher_create.labels.fund')}</div>
@@ -678,7 +910,7 @@ export default function ModalPrevalidationsUpload({
                         </div>
                     )}
 
-                    {step == STEP_UPLOAD && (
+                    {step == Steps.upload_csv && (
                         <div
                             className="block block-csv"
                             onDragOver={(e) => onDragEvent(e, true)}
@@ -702,7 +934,7 @@ export default function ModalPrevalidationsUpload({
                                     }}
                                 />
 
-                                {csvProgress <= 1 && (
+                                {csvProgress <= CSVProgress.validated && (
                                     <div className="csv-upload-btn" onClick={() => inputRef.current.click()}>
                                         <div className="csv-upload-icon">
                                             <div className="mdi mdi-upload" />
@@ -716,13 +948,13 @@ export default function ModalPrevalidationsUpload({
                                 )}
 
                                 <div className="button-group flex-center">
-                                    {csvProgress <= 1 && (
+                                    {csvProgress <= CSVProgress.validated && (
                                         <button className="button button-default" onClick={downloadExampleCsv}>
                                             <em className="mdi mdi-file-table-outline icon-start"> </em>
                                             <span>{translate('vouchers.buttons.download_csv')}</span>
                                         </button>
                                     )}
-                                    {csvProgress <= 1 && (
+                                    {csvProgress <= CSVProgress.validated && (
                                         <button
                                             className="button button-primary"
                                             onClick={() => inputRef.current.click()}
@@ -733,11 +965,14 @@ export default function ModalPrevalidationsUpload({
                                     )}
                                 </div>
 
-                                {csvProgress >= 2 && (
-                                    <div className={`csv-upload-progress ${csvProgress == 3 ? 'done' : ''}`}>
+                                {csvProgress >= CSVProgress.uploading && (
+                                    <div
+                                        className={`csv-upload-progress ${csvProgress == CSVProgress.uploaded ? 'done' : ''}`}>
                                         <div className="csv-upload-icon">
-                                            {csvProgress == 2 && <div className="mdi mdi-loading" />}
-                                            {csvProgress == 3 && (
+                                            {csvProgress == CSVProgress.uploading && (
+                                                <div className="mdi mdi-loading" />
+                                            )}
+                                            {csvProgress == CSVProgress.uploaded && (
                                                 <div className="mdi mdi-check" data-dusk="successUploadIcon" />
                                             )}
                                         </div>
@@ -745,7 +980,7 @@ export default function ModalPrevalidationsUpload({
                                     </div>
                                 )}
 
-                                {csvFile && csvProgress < 2 && (
+                                {csvFile && csvProgress < CSVProgress.uploading && (
                                     <div className="csv-upload-actions">
                                         <div className={classNames(`block block-file`, !csvIsValid && 'has-error')}>
                                             <div className="block-file-details">
@@ -790,7 +1025,7 @@ export default function ModalPrevalidationsUpload({
                 </div>
 
                 <div className="modal-footer text-center">
-                    {csvProgress < 2 && (
+                    {csvProgress < CSVProgress.uploading && (
                         <button
                             className="button button-default"
                             onClick={closeModal}
@@ -803,29 +1038,37 @@ export default function ModalPrevalidationsUpload({
                     <div className="flex-grow" />
 
                     <div className="button-group">
+                        {/* Cancel button */}
                         <button
                             className={`button button-default`}
-                            disabled={step == STEP_SET_UP || loading}
-                            onClick={() => setStep(STEP_SET_UP)}>
+                            disabled={step == Steps.select_fund || loading}
+                            onClick={() => setStep(Steps.select_fund)}>
                             Terug
                         </button>
 
-                        {step == STEP_SET_UP && (
+                        {/* Confirm selected fund button */}
+                        {step == Steps.select_fund && (
                             <button
                                 className="button button-primary"
-                                onClick={() => setStep(STEP_UPLOAD)}
+                                onClick={() => setStep(Steps.upload_csv)}
                                 data-dusk={'modalFundSelectSubmit'}>
                                 Bevestigen
                             </button>
                         )}
 
-                        {step == STEP_UPLOAD && (
+                        {/* Upload selected CSV or cancel button */}
+                        {step == Steps.upload_csv && (
                             <Fragment>
-                                {csvProgress < 3 ? (
+                                {csvProgress < CSVProgress.uploaded ? (
                                     <button
                                         className="button button-primary"
                                         onClick={onConfirmUpload}
-                                        disabled={csvProgress != 1 || loading || !csvIsValid || csvComparing}
+                                        disabled={
+                                            csvProgress != CSVProgress.validated ||
+                                            loading ||
+                                            !csvIsValid ||
+                                            csvComparing
+                                        }
                                         data-dusk="uploadFileButton">
                                         Bevestigen
                                     </button>
diff --git a/react/src/dashboard/components/pages/prevalidations/Prevalidations.tsx b/react/src/dashboard/components/pages/prevalidations/Prevalidations.tsx
index ccf072ac4..8f279e0d9 100644
--- a/react/src/dashboard/components/pages/prevalidations/Prevalidations.tsx
+++ b/react/src/dashboard/components/pages/prevalidations/Prevalidations.tsx
@@ -292,9 +292,9 @@ export default function Prevalidations() {
                             id="create_voucher"
                             className="button button-primary"
                             data-dusk="createPrevalidationButton"
-                            onClick={() =>
-                                createPrevalidation(funds, filterValuesActive?.fund_id, fetchPrevalidations)
-                            }>
+                            onClick={() => {
+                                createPrevalidation(funds, filterValuesActive?.fund_id, fetchPrevalidations);
+                            }}>
                             <em className="mdi mdi-plus-circle icon-start" />
                             {translate('csv_validation.buttons.create')}
                         </button>
@@ -303,9 +303,9 @@ export default function Prevalidations() {
                             id="prevalidations_upload_csv"
                             className="button button-primary"
                             data-dusk="uploadPrevalidationsBatchButton"
-                            onClick={() =>
-                                uploadPrevalidations(funds, filterValuesActive?.fund_id, fetchPrevalidations)
-                            }>
+                            onClick={() => {
+                                uploadPrevalidations(funds, filterValuesActive?.fund_id, fetchPrevalidations);
+                            }}>
                             <em className="mdi mdi-upload icon-start" />
                             {translate('csv_validation.buttons.upload')}
                         </button>
diff --git a/react/src/dashboard/services/PrevalidationService.ts b/react/src/dashboard/services/PrevalidationService.ts
index 4d7509b91..df9d3aa96 100644
--- a/react/src/dashboard/services/PrevalidationService.ts
+++ b/react/src/dashboard/services/PrevalidationService.ts
@@ -38,31 +38,26 @@ export class PrevalidationService<T = Prevalidation> {
         data: Array<{ [key: string]: string }>,
         fund_id: number = null,
         overwrite: Array<string> = [],
+        top_up: Array<{ key: string | number; voucher_id: number }> = [],
         file?: object,
     ): Promise<T> {
         return this.apiRequest.post(`${this.prefix}/${organization_id}/prevalidations/collection`, {
             data: data,
             fund_id: fund_id,
             overwrite: overwrite,
+            top_up: top_up,
             file,
         });
     }
 
-    public submitCollectionCheck(
+    public submitCollectionCheck<T>(
         organization_id: number,
-        data: Array<string>,
+        data: Array<object>,
         fund_id: number = null,
-        overwrite: Array<string> = [],
-    ): Promise<{
-        data: {
-            collection: Array<{ uid_hash: string; records_hash: string; data: { [key: string]: string } }>;
-            db: Array<{ uid_hash: string; records_hash: string }>;
-        };
-    }> {
+    ): Promise<ResponseSimple<T>> {
         return this.apiRequest.post(`${this.prefix}/${organization_id}/prevalidations/collection/hash`, {
             data: data,
             fund_id: fund_id,
-            overwrite: overwrite,
         });
     }
 

From 81b9e1353308bdf70ac64e1faa43b91a335e00c1 Mon Sep 17 00:00:00 2001
From: dev-rminds <dev@rminds.nl>
Date: Fri, 21 Nov 2025 14:56:29 +0200
Subject: [PATCH 03/13] remove console.log and fix updated prevalidations count
 in the notification

---
 .../dashboard/components/modals/ModalPrevalidationsUpload.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/react/src/dashboard/components/modals/ModalPrevalidationsUpload.tsx b/react/src/dashboard/components/modals/ModalPrevalidationsUpload.tsx
index 9fc7042b2..f42ff3c99 100644
--- a/react/src/dashboard/components/modals/ModalPrevalidationsUpload.tsx
+++ b/react/src/dashboard/components/modals/ModalPrevalidationsUpload.tsx
@@ -598,8 +598,6 @@ export default function ModalPrevalidationsUpload({
                 },
             );
 
-            console.log(data);
-
             // Data has changed for used prevalidation but could not fund a voucher for top-up
             if (data.no_vouchers?.length > 0) {
                 await showErrorsList(
@@ -728,7 +726,7 @@ export default function ModalPrevalidationsUpload({
             pushSuccess(
                 'Bezig met uploaden...',
                 [
-                    `${data.update.length - skipUids.length} record(s) worden bijgewerkt en`,
+                    `${data.update.length + data.top_up.length - skipUids.length} record(s) worden bijgewerkt en`,
                     `${data.create.length} record(s) worden aangemaakt!`,
                 ].join(' '),
             );

From 438ba315d267952c590430c5628b508febc3dc23 Mon Sep 17 00:00:00 2001
From: Yaroslav Kosterin <ateamcms@gmail.com>
Date: Fri, 21 Nov 2025 16:24:48 +0200
Subject: [PATCH 04/13] add notes to product reservations

---
 .../reservations-view/ReservationsView.tsx    | 25 +++++++++++++++++++
 .../services/ProductReservationService.ts     | 13 ++++++++++
 2 files changed, 38 insertions(+)

diff --git a/react/src/dashboard/components/pages/reservations-view/ReservationsView.tsx b/react/src/dashboard/components/pages/reservations-view/ReservationsView.tsx
index 5cf22b06c..c6520fb75 100644
--- a/react/src/dashboard/components/pages/reservations-view/ReservationsView.tsx
+++ b/react/src/dashboard/components/pages/reservations-view/ReservationsView.tsx
@@ -27,6 +27,8 @@ import ReservationDetailsPane from './elements/panes/ReservationDetailsPane';
 import useTranslate from '../../../hooks/useTranslate';
 import { Permission } from '../../../props/models/Organization';
 import { DashboardRoutes } from '../../../modules/state_router/RouterBuilder';
+import BlockCardNotes from '../../elements/block-card-notes/BlockCardNotes';
+import Note from '../../../props/models/Note';
 
 export default function ReservationsView() {
     const { id } = useParams();
@@ -138,6 +140,27 @@ export default function ReservationsView() {
         }
     }, [fetchReservation, fetchTransaction, reservation?.id, reservation?.voucher_transaction?.address]);
 
+    const fetchNotes = useCallback(
+        (query = {}) => {
+            return productReservationService.notes(activeOrganization.id, reservation?.id, query);
+        },
+        [activeOrganization.id, reservation?.id, productReservationService],
+    );
+
+    const deleteNote = useCallback(
+        (note: Note) => {
+            return productReservationService.noteDestroy(activeOrganization.id, reservation?.id, note.id);
+        },
+        [activeOrganization.id, reservation?.id, productReservationService],
+    );
+
+    const storeNote = useCallback(
+        (data: { description: string }) => {
+            return productReservationService.storeNote(activeOrganization.id, reservation?.id, data);
+        },
+        [activeOrganization.id, reservation?.id, productReservationService],
+    );
+
     useEffect(() => {
         fetchReservation(parseInt(id));
     }, [fetchReservation, id]);
@@ -218,6 +241,8 @@ export default function ReservationsView() {
                 </div>
             </div>
 
+            <BlockCardNotes showCreate={true} fetchNotes={fetchNotes} deleteNote={deleteNote} storeNote={storeNote} />
+
             {((transaction && hasPermission(activeOrganization, Permission.VIEW_FINANCES)) ||
                 reservation.extra_payment) && (
                 <div className="card card-wrapped">
diff --git a/react/src/dashboard/services/ProductReservationService.ts b/react/src/dashboard/services/ProductReservationService.ts
index a0860397c..ec0a2a6e2 100644
--- a/react/src/dashboard/services/ProductReservationService.ts
+++ b/react/src/dashboard/services/ProductReservationService.ts
@@ -5,6 +5,7 @@ import Reservation from '../props/models/Reservation';
 import { ApiResponse, ApiResponseSingle, ResponseSimple } from '../props/ApiResponses';
 import { ExportFieldProp } from '../components/modals/ModalExportDataSelect';
 import { ConfigurableTableColumn } from '../components/pages/vouchers/hooks/useConfigurableTable';
+import Note from '../props/models/Note';
 
 export class ProductReservationService<T = Reservation> {
     /**
@@ -95,6 +96,18 @@ export class ProductReservationService<T = Reservation> {
         return Papa.unparse([headers, values]);
     };
 
+    public notes(organizationId: number, id: number, data: object): Promise<ApiResponse<Note>> {
+        return this.apiRequest.get(`${this.prefix}/${organizationId}/product-reservations/${id}/notes`, data);
+    }
+
+    public noteDestroy(organizationId: number, id: number, note_id: number): Promise<ApiResponseSingle<null>> {
+        return this.apiRequest.delete(`${this.prefix}/${organizationId}/product-reservations/${id}/notes/${note_id}`);
+    }
+
+    public storeNote(organizationId: number, id: number, data: object): Promise<ApiResponseSingle<Note>> {
+        return this.apiRequest.post(`${this.prefix}/${organizationId}/product-reservations/${id}/notes`, data);
+    }
+
     public getColumns(showExtraPayments: boolean, isSponsor: boolean): Array<ConfigurableTableColumn> {
         const list = [
             'code',

From eb21483357ef8792ea396630e2ec07af49dda13d Mon Sep 17 00:00:00 2001
From: dev-rminds <dev@rminds.nl>
Date: Wed, 26 Nov 2025 09:09:57 +0200
Subject: [PATCH 05/13] feat: support file attachments on reservation custom
 fields

---
 .gitignore                                    |   2 +
 .../blocks/block-attachments-list.scss        |  48 +-
 .../elements/FileAttachmentsList.tsx          |  72 +++
 .../FundRequestRecordAttachmentsTab.tsx       |  62 +--
 .../elements/panes/ReservationDetailsPane.tsx |   3 +-
 .../elements/ReservationFieldItem.tsx         |   3 +-
 .../dashboard/props/models/Reservation.tsx    |   2 +
 .../props/models/ReservationField.tsx         |   2 +-
 .../elements/file-uploader/FileUploader.tsx   |  76 ++--
 .../file-uploader/FileUploaderItemView.tsx    |  20 +-
 .../ModalProductReserve.tsx                   | 427 +++++++++++-------
 .../FundRequestRecordsBlockItemDetails.tsx    |   4 +-
 .../steps/FundRequestStepCriteria.tsx         |   1 -
 .../ReimbursementsEdit.tsx                    |   1 -
 .../reservations-show/ReservationsShow.tsx    |  89 ++++
 react/src/webshop/i18n/i18n-nl.mjs            |   4 +-
 .../webshop/i18n/nl/modal_image_preview.mjs   |   7 +
 .../src/webshop/i18n/nl/pages/reservation.mjs |   8 +
 react/src/webshop/props/models/Product.ts     |   2 +-
 19 files changed, 554 insertions(+), 279 deletions(-)
 create mode 100644 react/src/dashboard/components/elements/FileAttachmentsList.tsx
 create mode 100644 react/src/webshop/i18n/nl/modal_image_preview.mjs

diff --git a/.gitignore b/.gitignore
index 7ac5c0ce6..05ca19583 100644
--- a/.gitignore
+++ b/.gitignore
@@ -9,6 +9,8 @@ deepl.env.mjs
 deepl.env.*.mjs
 !deepl.env.example.mjs
 
+forus-backend
+
 # Compiled source #
 ###################
 *.com
diff --git a/react/assets/forus-platform/scss/_common/blocks/block-attachments-list.scss b/react/assets/forus-platform/scss/_common/blocks/block-attachments-list.scss
index 6c506ebfe..914932f0f 100644
--- a/react/assets/forus-platform/scss/_common/blocks/block-attachments-list.scss
+++ b/react/assets/forus-platform/scss/_common/blocks/block-attachments-list.scss
@@ -1,6 +1,7 @@
 .block.block-attachments-list {
     display: flex;
     flex-direction: column;
+    width: 100%;
     gap: 10px;
 
     .attachment-item {
@@ -8,31 +9,34 @@
         display: flex;
         border: 1px solid #d4d9dd;
         flex-direction: row;
-        padding: 5px 15px 5px 10px;
+        padding: 5px 10px;
         border-radius: var(--border-radius);
         gap: 10px;
+        align-items: center;
+        min-height: 32px;
 
         .attachment-icon {
             display: flex;
             flex-direction: row;
             gap: 10px;
+            align-items: center;
 
             .mdi {
                 font-size: 18px;
-                line-height: 25px;
+                line-height: 18px;
                 color: #004195;
             }
 
             .attachment-size {
                 color: #646f79;
-                font: 600 13px/24px var(--base-font);
+                font: 600 13px/18px var(--base-font);
                 flex: 1 0 60px;
             }
         }
 
         .attachment-name {
             color: #262626;
-            font: 600 13px/24px var(--base-font);
+            font: 600 13px/18px var(--base-font);
             flex: 1 1 auto;
             min-width: 0;
             word-wrap: break-word;
@@ -40,25 +44,39 @@
         }
 
         .attachment-date {
-            font: 400 13px/24px var(--base-font);
+            font: 400 13px/18px var(--base-font);
         }
 
-        .attachment-preview {
+        .attachment-actions {
             display: flex;
             flex-direction: row;
-            color: #262626;
-            font: 500 12px/24px var(--base-font);
-            gap: 5px;
+            align-items: center;
+            gap: 6px;
+        }
+
+        .attachment-action {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            width: 20px;
+            height: 20px;
+            border: none;
+            background: transparent;
+            padding: 0;
+            cursor: pointer;
+            color: #646f79;
+            transition: color 0.15s ease-in-out;
 
             .mdi {
                 font-size: 16px;
-                line-height: 24px;
-                height: 24px;
-                color: #555;
+                line-height: 18px;
+                height: 18px;
+            }
 
-                &:hover {
-                    color: var(--color-primary);
-                }
+            &:hover,
+            &:focus-visible {
+                color: var(--color-primary);
+                outline: none;
             }
         }
     }
diff --git a/react/src/dashboard/components/elements/FileAttachmentsList.tsx b/react/src/dashboard/components/elements/FileAttachmentsList.tsx
new file mode 100644
index 000000000..31a9230b9
--- /dev/null
+++ b/react/src/dashboard/components/elements/FileAttachmentsList.tsx
@@ -0,0 +1,72 @@
+import React, { useCallback } from 'react';
+import File from '../../props/models/File';
+import { useFileService } from '../../services/FileService';
+import { useFundRequestValidatorService } from '../../services/FundRequestValidatorService';
+import useFilePreview from '../../services/helpers/useFilePreview';
+
+export default function FileAttachmentsList({ attachments }: { attachments: Array<{ file: File; date?: string }> }) {
+    const filePreview = useFilePreview();
+
+    const fileService = useFileService();
+    const fundRequestService = useFundRequestValidatorService();
+
+    const hasFilePreview = useCallback((file) => fundRequestService.hasFilePreview(file), [fundRequestService]);
+
+    const downloadFile = useCallback(
+        (e: React.MouseEvent<HTMLElement>, file: File) => {
+            e?.preventDefault();
+            e?.stopPropagation();
+
+            fileService
+                .download(file)
+                .then((res) => fileService.downloadFile(file.original_name, res.data, res.headers['content-type']))
+                .catch(console.error);
+        },
+        [fileService],
+    );
+
+    const previewFile = useCallback(
+        (e: React.MouseEvent<HTMLElement>, file: File) => {
+            e?.preventDefault();
+            e?.stopPropagation();
+
+            filePreview(file);
+        },
+        [filePreview],
+    );
+
+    return (
+        <div className="block block-attachments-list">
+            {attachments.map((attachment) => (
+                <div key={attachment.file.uid} className="attachment-item">
+                    <div className="attachment-icon">
+                        <div className="mdi mdi-file" />
+                        <div className="attachment-size">{attachment.file.size}</div>
+                    </div>
+                    <div className="attachment-name">{attachment.file.original_name}</div>
+                    <div className="attachment-date">{attachment.date || ''}</div>
+                    <div className="attachment-actions">
+                        <button
+                            type="button"
+                            className="attachment-action"
+                            title="Download"
+                            aria-label="Download"
+                            onClick={(e) => downloadFile(e, attachment.file)}>
+                            <div className="mdi mdi-download" aria-hidden="true" />
+                        </button>
+                        {hasFilePreview(attachment.file) && (
+                            <button
+                                type="button"
+                                className="attachment-action"
+                                title={attachment.file.ext == 'pdf' ? 'Bekijk PDF-bestand' : 'Bekijk file'}
+                                aria-label={attachment.file.ext == 'pdf' ? 'Bekijk PDF-bestand' : 'Bekijk file'}
+                                onClick={(e) => previewFile(e, attachment.file)}>
+                                <div className="mdi mdi-eye" aria-hidden="true" />
+                            </button>
+                        )}
+                    </div>
+                </div>
+            ))}
+        </div>
+    );
+}
diff --git a/react/src/dashboard/components/pages/fund-requests-view/elements/record-tabs/FundRequestRecordAttachmentsTab.tsx b/react/src/dashboard/components/pages/fund-requests-view/elements/record-tabs/FundRequestRecordAttachmentsTab.tsx
index 82044c24b..37f891fd3 100644
--- a/react/src/dashboard/components/pages/fund-requests-view/elements/record-tabs/FundRequestRecordAttachmentsTab.tsx
+++ b/react/src/dashboard/components/pages/fund-requests-view/elements/record-tabs/FundRequestRecordAttachmentsTab.tsx
@@ -1,67 +1,15 @@
 import File from '../../../../../props/models/File';
-import { useFileService } from '../../../../../services/FileService';
-import { useFundRequestValidatorService } from '../../../../../services/FundRequestValidatorService';
-import React, { useCallback } from 'react';
-import useFilePreview from '../../../../../services/helpers/useFilePreview';
+import React from 'react';
+import FileAttachmentsList from '../../../../elements/FileAttachmentsList';
 
 export default function FundRequestRecordAttachmentsTab({
     attachments,
 }: {
-    attachments: Array<{ file: File; date: string }>;
+    attachments: Array<{ file: File; date?: string }>;
 }) {
-    const filePreview = useFilePreview();
-
-    const fileService = useFileService();
-    const fundRequestService = useFundRequestValidatorService();
-
-    const hasFilePreview = useCallback((file) => fundRequestService.hasFilePreview(file), [fundRequestService]);
-
-    const downloadFile = useCallback(
-        (e: React.MouseEvent<HTMLElement>, file: File) => {
-            e?.preventDefault();
-            e?.stopPropagation();
-
-            fileService
-                .download(file)
-                .then((res) => fileService.downloadFile(file.original_name, res.data, res.headers['content-type']))
-                .catch(console.error);
-        },
-        [fileService],
-    );
-
-    const previewFile = useCallback(
-        (e: React.MouseEvent<HTMLElement>, file: File) => {
-            e?.preventDefault();
-            e?.stopPropagation();
-
-            filePreview(file);
-        },
-        [filePreview],
-    );
-
     return (
-        <div className="block block-attachments-list" data-dusk="attachmentsTabContent">
-            {attachments.map((attachment) => (
-                <a
-                    key={attachment.file.uid}
-                    className="attachment-item"
-                    onClick={(e) => downloadFile(e, attachment.file)}>
-                    <div className="attachment-icon">
-                        <div className="mdi mdi-file" />
-                        <div className="attachment-size">{attachment.file.size}</div>
-                    </div>
-                    <div className="attachment-name">{attachment.file.original_name}</div>
-                    <div className="attachment-date">{attachment.date}</div>
-                    {hasFilePreview(attachment.file) && (
-                        <div
-                            className="attachment-preview"
-                            title={attachment.file.ext == 'pdf' ? 'Bekijk PDF-bestand' : 'Bekijk file'}
-                            onClick={(e) => previewFile(e, attachment.file)}>
-                            <div className="mdi mdi-eye" />
-                        </div>
-                    )}
-                </a>
-            ))}
+        <div data-dusk="attachmentsTabContent">
+            <FileAttachmentsList attachments={attachments} />
         </div>
     );
 }
diff --git a/react/src/dashboard/components/pages/reservations-view/elements/panes/ReservationDetailsPane.tsx b/react/src/dashboard/components/pages/reservations-view/elements/panes/ReservationDetailsPane.tsx
index 1d67a3d2c..e4ab4ae0f 100644
--- a/react/src/dashboard/components/pages/reservations-view/elements/panes/ReservationDetailsPane.tsx
+++ b/react/src/dashboard/components/pages/reservations-view/elements/panes/ReservationDetailsPane.tsx
@@ -5,6 +5,7 @@ import Reservation from '../../../../../props/models/Reservation';
 import BlockInlineCopy from '../../../../elements/block-inline-copy/BlockInlineCopy';
 import { strLimit } from '../../../../../helpers/string';
 import KeyValueItem from '../../../../elements/key-value/KeyValueItem';
+import FileAttachmentsList from '../../../../elements/FileAttachmentsList';
 
 export default function ReservationDetailsPane({ reservation }: { reservation: Reservation }) {
     const translate = useTranslate();
@@ -32,7 +33,7 @@ export default function ReservationDetailsPane({ reservation }: { reservation: R
                 )}
                 {reservation.custom_fields?.map((field, index) => (
                     <KeyValueItem key={index} label={field.label}>
-                        {field.value}
+                        {field.file ? <FileAttachmentsList attachments={[{ file: field.file }]} /> : field.value}
                     </KeyValueItem>
                 ))}
                 {reservation.user_note && (
diff --git a/react/src/dashboard/components/pages/reservations/elements/ReservationFieldItem.tsx b/react/src/dashboard/components/pages/reservations/elements/ReservationFieldItem.tsx
index 06a5de927..79ec0a366 100644
--- a/react/src/dashboard/components/pages/reservations/elements/ReservationFieldItem.tsx
+++ b/react/src/dashboard/components/pages/reservations/elements/ReservationFieldItem.tsx
@@ -35,6 +35,7 @@ export default function ReservationFieldItem({
         { key: 'text', name: 'Tekst' },
         { key: 'number', name: 'Nummer' },
         { key: 'boolean', name: 'Ja / Nee' },
+        { key: 'file', name: 'Document upload' },
     ]);
 
     const askConfirmation = useCallback(
@@ -196,7 +197,7 @@ export default function ReservationFieldItem({
                                     propKey={'key'}
                                     allowSearch={false}
                                     value={field.type}
-                                    onChange={(value: 'number' | 'text') => {
+                                    onChange={(value: 'number' | 'text' | 'boolean' | 'file') => {
                                         field.type = value;
                                         onChange([...fields]);
                                     }}
diff --git a/react/src/dashboard/props/models/Reservation.tsx b/react/src/dashboard/props/models/Reservation.tsx
index a87b9dc21..af343b57c 100644
--- a/react/src/dashboard/props/models/Reservation.tsx
+++ b/react/src/dashboard/props/models/Reservation.tsx
@@ -1,6 +1,7 @@
 import ExtraPayment from './ExtraPayment';
 import Product from './Product';
 import Transaction from './Transaction';
+import FileModel from './File';
 
 export default interface Reservation {
     id: number;
@@ -49,6 +50,7 @@ export default interface Reservation {
     custom_fields?: Array<{
         label: string;
         value: string;
+        file?: FileModel;
     }>;
     records_title?: string;
     fund: {
diff --git a/react/src/dashboard/props/models/ReservationField.tsx b/react/src/dashboard/props/models/ReservationField.tsx
index cc5cabe90..5df3a3700 100644
--- a/react/src/dashboard/props/models/ReservationField.tsx
+++ b/react/src/dashboard/props/models/ReservationField.tsx
@@ -1,6 +1,6 @@
 export default interface ReservationField {
     id?: number;
-    type: 'text' | 'number';
+    type: 'text' | 'number' | 'boolean' | 'file';
     product_id?: number;
     organization_id?: number;
     label: string;
diff --git a/react/src/webshop/components/elements/file-uploader/FileUploader.tsx b/react/src/webshop/components/elements/file-uploader/FileUploader.tsx
index ec297af34..4922f4a87 100644
--- a/react/src/webshop/components/elements/file-uploader/FileUploader.tsx
+++ b/react/src/webshop/components/elements/file-uploader/FileUploader.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useFileService } from '../../../../dashboard/services/FileService';
 import FileModel from '../../../../dashboard/props/models/File';
 import useOpenModal from '../../../../dashboard/hooks/useOpenModal';
@@ -8,6 +8,7 @@ import usePushInfo from '../../../../dashboard/hooks/usePushInfo';
 import { uniqueId } from 'lodash';
 import { ResponseError } from '../../../../dashboard/props/ApiResponses';
 import useTranslate from '../../../../dashboard/hooks/useTranslate';
+import classNames from 'classnames';
 
 export type FileUploaderItem = {
     id?: string;
@@ -42,8 +43,9 @@ export default function FileUploader({
     title,
     files = null,
     template = 'default',
-    multiple = false,
-    multipleSize = 15,
+    hideInlineTitle = false,
+    allowMultiple = true,
+    maxFiles = 15,
     cropMedia = true,
     readOnly = false,
     acceptedFiles = ['.xlsx', '.xls', '.docx', '.doc', '.pdf', '.png', '.jpg', '.jpeg'],
@@ -53,19 +55,26 @@ export default function FileUploader({
     onFileResolved = null,
     onFileUploaded = null,
     onFilesChange = null,
-    hideButtons = false,
+    hidePreviewButton = false,
+    hideDownloadButton = false,
     isRequired = false,
 }: {
-    type: 'fund_request_clarification_proof' | 'reimbursement_proof' | 'fund_request_record_proof';
+    type:
+        | 'fund_request_clarification_proof'
+        | 'reimbursement_proof'
+        | 'fund_request_record_proof'
+        | 'product_reservation_custom_field';
     title?: string;
     files?: Array<FileModel>;
     template?: 'default' | 'compact' | 'inline';
-    multiple?: boolean;
-    multipleSize?: number;
+    hideInlineTitle?: boolean;
+    allowMultiple?: boolean;
+    maxFiles?: number;
     cropMedia?: boolean;
     readOnly?: boolean;
     acceptedFiles?: Array<string>;
-    hideButtons?: boolean;
+    hidePreviewButton?: boolean;
+    hideDownloadButton?: boolean;
     isRequired?: boolean;
 } & FileItemEventsListener) {
     const fileService = useFileService();
@@ -79,6 +88,10 @@ export default function FileUploader({
     const filesRef = useRef<Array<FileUploaderItem>>(null);
     const callbackRef = useRef<FileItemEventsListener>(null);
 
+    const effectiveMaxFiles = useMemo(() => {
+        return allowMultiple ? maxFiles : 1;
+    }, [allowMultiple, maxFiles]);
+
     const [fileItems, setFileItems] = useState(
         files?.map(
             (file): FileUploaderItem => ({
@@ -207,10 +220,11 @@ export default function FileUploader({
 
     const uploadFiles = useCallback(
         (files: Array<File>) => {
-            const filesSpaceLeft = multipleSize ? multipleSize - fileItems.length : 100;
+            const normalizedFiles = allowMultiple ? files : files.slice(0, 1);
+            const filesSpaceLeft = effectiveMaxFiles ? effectiveMaxFiles - fileItems.length : 100;
 
-            if (filesSpaceLeft < files.length) {
-                files.splice(filesSpaceLeft);
+            if (filesSpaceLeft < normalizedFiles.length) {
+                normalizedFiles.splice(filesSpaceLeft);
 
                 pushInfo(
                     'To many files selected',
@@ -218,11 +232,11 @@ export default function FileUploader({
                 );
             }
 
-            prepareFilesForUpload(files).then((filteredFiles) => {
+            prepareFilesForUpload(normalizedFiles).then((filteredFiles) => {
                 setFileItems((fileItems) => [...fileItems, ...filteredFiles]);
             });
         },
-        [fileItems.length, multipleSize, prepareFilesForUpload, pushInfo],
+        [fileItems.length, allowMultiple, effectiveMaxFiles, prepareFilesForUpload, pushInfo],
     );
 
     const filterSelectedFiles = useCallback(
@@ -278,16 +292,17 @@ export default function FileUploader({
 
     return (
         <div
-            className={`block block-file-uploader ${template == 'compact' ? 'block-file-uploader-compact' : ''} ${
-                template == 'inline' ? 'block-file-uploader-inline' : ''
-            }`}
+            className={classNames('block', 'block-file-uploader', {
+                'block-file-uploader-compact': template === 'compact',
+                'block-file-uploader-inline': template === 'inline',
+            })}
             data-dusk="fileUploader">
             <input
                 type="file"
                 className={'droparea-hidden-input'}
                 name={'file_uploader_input_hidden'}
                 hidden={true}
-                multiple={multiple}
+                multiple={allowMultiple}
                 accept={(acceptedFiles || []).join(',')}
                 ref={inputRef}
                 onChange={(e) => {
@@ -298,7 +313,7 @@ export default function FileUploader({
 
             {!readOnly && (
                 <div
-                    className={`uploader-droparea ${isDragOver ? 'is-dragover' : ''}`}
+                    className={classNames('uploader-droparea', { 'is-dragover': isDragOver })}
                     onDragOver={(e) => onDragEvent(e, true)}
                     onDragEnter={(e) => onDragEvent(e, true)}
                     onDragLeave={(e) => onDragEvent(e, false)}
@@ -310,22 +325,26 @@ export default function FileUploader({
                     <div className="droparea-icon">
                         <div className="mdi mdi-tray-arrow-up"></div>
                     </div>
-                    <div className={`droparea-title ${isRequired ? 'droparea-title-required' : ''}`}>
+                    <div className={classNames('droparea-title', { 'droparea-title-required': isRequired })}>
                         <strong>{title || translate('global.file_uploader.title')}</strong>
                         <br />
                         <small>{translate('global.file_uploader.or')}</small>
                     </div>
                     <div className="droparea-button">
                         <button
-                            className={`button ${template == 'compact' ? 'button-light button-xs' : ''} ${
-                                template == 'inline' ? 'button-primary button-sm' : ''
-                            } ${template == 'default' ? 'button-primary' : ''}`}
+                            className={classNames('button', {
+                                'button-light button-xs': template === 'compact',
+                                'button-primary button-sm': template === 'inline',
+                                'button-primary': template === 'default',
+                            })}
                             data-dusk="fileUploaderBtn"
                             type="button"
                             tabIndex={0}
-                            disabled={multipleSize && multipleSize <= fileItems.length}
+                            disabled={fileItems.length >= effectiveMaxFiles}
                             onClick={() => inputRef.current?.click()}>
-                            <em className={`mdi ${template == 'compact' ? 'mdi-paperclip' : 'mdi-upload'}`} />
+                            <em
+                                className={classNames('mdi', template === 'compact' ? 'mdi-paperclip' : 'mdi-upload')}
+                            />
                             {translate('global.file_uploader.upload_button')}
                         </button>
                     </div>
@@ -333,9 +352,9 @@ export default function FileUploader({
                         <div className="droparea-size">{translate('global.file_uploader.max_size')}</div>
                     )}
 
-                    {(template === 'inline' || template === 'compact') && multipleSize && (
+                    {(template === 'inline' || template === 'compact') && effectiveMaxFiles && (
                         <div className="droparea-max-limit">
-                            {translate('global.file_uploader.max_files', { count: multipleSize })}
+                            {translate('global.file_uploader.max_files', { count: effectiveMaxFiles })}
                         </div>
                     )}
                 </div>
@@ -343,7 +362,7 @@ export default function FileUploader({
 
             {fileItems.length > 0 && (
                 <div className="uploader-files">
-                    {template === 'inline' && (
+                    {template === 'inline' && !hideInlineTitle && (
                         <div className="uploader-files-title">
                             {translate('global.file_uploader.attachments')}
                             <div className="uploader-files-title-count">{fileItems.length}</div>
@@ -355,7 +374,8 @@ export default function FileUploader({
                             key={file.id}
                             item={file}
                             template={template}
-                            buttons={!hideButtons}
+                            hidePreviewButton={hidePreviewButton}
+                            hideDownloadButton={hideDownloadButton}
                             readOnly={readOnly}
                             removeFile={removeFile}
                         />
diff --git a/react/src/webshop/components/elements/file-uploader/FileUploaderItemView.tsx b/react/src/webshop/components/elements/file-uploader/FileUploaderItemView.tsx
index 7fa65ac47..f10898d53 100644
--- a/react/src/webshop/components/elements/file-uploader/FileUploaderItemView.tsx
+++ b/react/src/webshop/components/elements/file-uploader/FileUploaderItemView.tsx
@@ -7,17 +7,20 @@ import ModalImagePreview from '../../modals/ModalImagePreview';
 import ModalPdfPreview from '../../modals/ModalPdfPreview';
 import { FileUploaderItem } from './FileUploader';
 import useTranslate from '../../../../dashboard/hooks/useTranslate';
+import classNames from 'classnames';
 
 export default function FileUploaderItemView({
     item,
     template,
-    buttons,
+    hidePreviewButton,
+    hideDownloadButton,
     readOnly,
     removeFile,
 }: {
     item: FileUploaderItem;
     template?: 'default' | 'compact' | 'inline';
-    buttons?: boolean;
+    hidePreviewButton?: boolean;
+    hideDownloadButton?: boolean;
     readOnly?: boolean;
     removeFile?: (file: FileUploaderItem) => void;
 }) {
@@ -63,11 +66,12 @@ export default function FileUploaderItemView({
     );
 
     return (
-        <div className={`file-item ${item.uploading ? 'file-item-uploading' : ''}`}>
+        <div className={classNames('file-item', { 'file-item-uploading': item.uploading })}>
             <div
-                className={`file-item-container ${template == 'compact' ? 'file-item-container-compact' : ''} ${
-                    template == 'inline' ? 'file-item-container-inline' : ''
-                }`}>
+                className={classNames('file-item-container', {
+                    'file-item-container-compact': template === 'compact',
+                    'file-item-container-inline': template === 'inline',
+                })}>
                 <div className="file-item-icon">
                     <img src={extension ? assetUrl(`/assets/img/file-icon-${extension}.svg`) : undefined} alt="" />
                 </div>
@@ -78,7 +82,7 @@ export default function FileUploaderItemView({
                     </div>
                 </div>
 
-                {item.has_preview && buttons && (
+                {item.has_preview && !hidePreviewButton && (
                     <div className="file-item-action">
                         <button
                             className="mdi mdi-eye-outline"
@@ -92,7 +96,7 @@ export default function FileUploaderItemView({
                     </div>
                 )}
 
-                {!item.uploading && buttons && (
+                {!item.uploading && !hideDownloadButton && (
                     <div className="file-item-action">
                         <button
                             type={'button'}
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 d7c7c048a..0136bbd3c 100644
--- a/react/src/webshop/components/modals/modal-product-reserve/ModalProductReserve.tsx
+++ b/react/src/webshop/components/modals/modal-product-reserve/ModalProductReserve.tsx
@@ -32,6 +32,8 @@ import usePushSuccess from '../../../../dashboard/hooks/usePushSuccess';
 import classNames from 'classnames';
 import SelectControl from '../../../../dashboard/components/elements/select-control/SelectControl';
 import { WebshopRoutes } from '../../../modules/state_router/RouterBuilder';
+import FileUploader from '../../elements/file-uploader/FileUploader';
+import FileModel from '../../../../dashboard/props/models/File';
 
 type VoucherType = Voucher & {
     amount_extra: number;
@@ -44,9 +46,9 @@ type Field = {
     label?: string;
     placeholder?: string;
     required?: boolean;
-    key?: string;
+    key?: string | number;
     dusk?: string;
-    type?: string;
+    type?: 'text' | 'number' | 'boolean' | 'date' | 'file';
     custom?: boolean;
 };
 
@@ -136,6 +138,7 @@ export default function ModalProductReserve({
     const [step, setStep] = useState(hasEmail ? STEP_SELECT_VOUCHER : STEP_EMAIL_SETUP);
     const [steps, setSteps] = useState([]);
     const [fields, setFields] = useState<Array<Field>>([]);
+    const [customFieldFiles, setCustomFieldFiles] = useState<Record<string, Array<FileModel>>>({});
     const [emptyText] = useState(translate('modal_reserve_product.confirm_notes.labels.empty'));
     const [voucher, setVoucher] = useState<VoucherType>(null);
 
@@ -155,7 +158,7 @@ export default function ModalProductReserve({
         first_name?: string;
         last_name?: string;
         user_note?: string;
-        custom_fields?: { [key: string]: string };
+        custom_fields?: { [key: string]: string | null };
     }>(
         {
             first_name: '',
@@ -278,7 +281,7 @@ export default function ModalProductReserve({
     }, [STEP_EXTRA_PAYMENT, confirmSubmit, voucher?.amount_extra]);
 
     const makeReservationField = useCallback(
-        (key: string, type: string, dusk: string = null) => {
+        (key: string, type: Field['type'], dusk: string = null): Field => {
             const required = product.reservation[key] === 'required';
 
             return {
@@ -307,8 +310,16 @@ export default function ModalProductReserve({
 
                 const _fields = [...fields, ...customFields];
 
+                _fields.forEach((field) => {
+                    if (field.type === 'file') {
+                        field.fullWidth = true;
+                    }
+                });
+
                 if (_fields.length > 0) {
-                    _fields[_fields.length - 1].fullWidth = _fields.length % 2 !== 0;
+                    if (!_fields[_fields.length - 1].fullWidth) {
+                        _fields[_fields.length - 1].fullWidth = _fields.length % 2 !== 0;
+                    }
                 }
 
                 return [..._fields];
@@ -422,8 +433,9 @@ export default function ModalProductReserve({
     }, [updateSteps]);
 
     useEffect(() => {
+        setCustomFieldFiles({});
         mapFields(
-            product.reservation.fields?.map((field) => ({
+            product?.reservation?.fields?.map((field) => ({
                 label: field.label,
                 placeholder: field.label,
                 description: field.description,
@@ -432,13 +444,16 @@ export default function ModalProductReserve({
                 key: field.id,
                 dusk: `customField${field.id}`,
                 type: field.type,
+                fullWidth: field.type === 'file',
             })) || [],
         );
     }, [mapFields, product?.reservation?.fields]);
 
     return (
         <div
-            className={`modal modal-product-reserve modal-animated ${modal.loading ? '' : 'modal-loaded'}`}
+            className={classNames('modal', 'modal-product-reserve', 'modal-animated', {
+                'modal-loaded': !modal.loading,
+            })}
             data-dusk={'modalProductReserve'}
             role="dialog">
             <div
@@ -648,7 +663,10 @@ export default function ModalProductReserve({
                         </div>
                     </div>
                     <div className="modal-footer flex-gap-lg">
-                        <div className={`flex flex-grow ${vouchers.length > 1 ? 'flex-center' : ''}`}>
+                        <div
+                            className={classNames('flex', 'flex-grow', {
+                                'flex-center': vouchers.length > 1,
+                            })}>
                             <button className="button button-light button-sm" onClick={modal.close}>
                                 {translate('modal.buttons.cancel')}
                             </button>
@@ -750,139 +768,202 @@ export default function ModalProductReserve({
                             </div>
 
                             <div className="row">
-                                {fields?.map((field, index) => (
-                                    <div
-                                        key={index}
-                                        className={`col col-xs-12 form-group form-group-margin ${
-                                            'col-lg-' + (field.fullWidth ? '12' : '6')
-                                        }`}>
-                                        <label className="form-label" htmlFor={field.key}>
-                                            {field.label}
-                                        </label>
-
-                                        {field.custom && (
-                                            <div className={`form-group-info ${field.showInfo ? 'active' : ''}`}>
-                                                <div
-                                                    className={`form-group-info-control ${
-                                                        field.description ? 'has-info-btn' : ''
-                                                    }`}>
-                                                    {field.type === 'text' && (
-                                                        <input
-                                                            className="form-control"
-                                                            type="test"
-                                                            value={form.values.custom_fields?.[field.key] ?? ''}
-                                                            onChange={(e) => {
-                                                                form.values.custom_fields =
-                                                                    form.values.custom_fields || {};
-                                                                form.values.custom_fields[field.key] = e.target.value;
-                                                                form.update({ ...form.values });
-                                                            }}
-                                                            data-dusk={field.dusk}
-                                                        />
-                                                    )}
-                                                    {field.type === 'number' && (
-                                                        <input
-                                                            className="form-control"
-                                                            type="number"
-                                                            pattern="[0-9]+"
-                                                            max={999999999999999}
-                                                            value={form.values.custom_fields?.[field.key] ?? ''}
-                                                            onChange={(e) => {
-                                                                form.values.custom_fields =
-                                                                    form.values.custom_fields || {};
-                                                                form.values.custom_fields[field.key] = e.target.value;
-                                                                form.update({ ...form.values });
-                                                            }}
-                                                            data-dusk={field.dusk}
-                                                        />
-                                                    )}
-                                                    {field.type === 'boolean' && (
-                                                        <SelectControl
-                                                            propKey={'key'}
-                                                            value={form.values.custom_fields?.[field.key] ?? null}
-                                                            onChange={(value: string) => {
+                                {fields?.map((field, index) => {
+                                    const fieldKey = String(field.key);
+                                    const customFieldValue = form.values.custom_fields?.[fieldKey];
+                                    const fieldFiles = customFieldFiles?.[fieldKey] || [];
+
+                                    return (
+                                        <div
+                                            key={index}
+                                            className={classNames(
+                                                'col',
+                                                'col-xs-12',
+                                                'form-group',
+                                                'form-group-margin',
+                                                {
+                                                    'col-lg-12':
+                                                        (field.custom && field.type === 'file') || field.fullWidth,
+                                                    'col-lg-6':
+                                                        !(field.custom && field.type === 'file') && !field.fullWidth,
+                                                },
+                                            )}>
+                                            {field.custom && field.type === 'file' ? null : (
+                                                <label className="form-label" htmlFor={fieldKey}>
+                                                    {field.label}
+                                                </label>
+                                            )}
+
+                                            {field.custom && field.type === 'file' ? (
+                                                <div className="flex flex-vertical flex-gap-sm">
+                                                    <div className="flex flex-vertical">
+                                                        <div className="modal-section-description text-left text-strong">
+                                                            {field.label}
+                                                        </div>
+                                                        {field.description && (
+                                                            <div className="modal-section-description text-left">
+                                                                {field.description}
+                                                            </div>
+                                                        )}
+                                                    </div>
+
+                                                    <div className="form-group-info-control">
+                                                        <FileUploader
+                                                            type="product_reservation_custom_field"
+                                                            files={fieldFiles}
+                                                            template="inline"
+                                                            cropMedia={false}
+                                                            allowMultiple={false}
+                                                            hideDownloadButton={true}
+                                                            hideInlineTitle={true}
+                                                            acceptedFiles={['.jpg', '.jpeg', '.png']}
+                                                            onFilesChange={({ files }) => {
+                                                                const file = files?.[0] || null;
+
                                                                 form.values.custom_fields =
                                                                     form.values.custom_fields || {};
-                                                                form.values.custom_fields[field.key] = value;
+                                                                form.values.custom_fields[fieldKey] = file?.uid || null;
+
+                                                                setCustomFieldFiles((current) => ({
+                                                                    ...current,
+                                                                    [fieldKey]: files || [],
+                                                                }));
                                                                 form.update({ ...form.values });
                                                             }}
-                                                            dusk={field.dusk}
-                                                            options={customFieldBooleanOptions}
+                                                            isRequired={field.required}
                                                         />
-                                                    )}
+                                                    </div>
                                                 </div>
+                                            ) : field.custom ? (
+                                                <div
+                                                    className={classNames('form-group-info', {
+                                                        active: field.showInfo,
+                                                    })}>
+                                                    <div
+                                                        className={`form-group-info-control ${
+                                                            field.description ? 'has-info-btn' : ''
+                                                        }`}>
+                                                        {field.type === 'text' && (
+                                                            <input
+                                                                className="form-control"
+                                                                type="text"
+                                                                value={customFieldValue ?? ''}
+                                                                onChange={(e) => {
+                                                                    form.values.custom_fields =
+                                                                        form.values.custom_fields || {};
+                                                                    form.values.custom_fields[fieldKey] =
+                                                                        e.target.value;
+                                                                    form.update({ ...form.values });
+                                                                }}
+                                                                data-dusk={field.dusk}
+                                                            />
+                                                        )}
+                                                        {field.type === 'number' && (
+                                                            <input
+                                                                className="form-control"
+                                                                type="number"
+                                                                pattern="[0-9]+"
+                                                                max={999999999999999}
+                                                                value={customFieldValue ?? ''}
+                                                                onChange={(e) => {
+                                                                    form.values.custom_fields =
+                                                                        form.values.custom_fields || {};
+                                                                    form.values.custom_fields[fieldKey] =
+                                                                        e.target.value;
+                                                                    form.update({ ...form.values });
+                                                                }}
+                                                                data-dusk={field.dusk}
+                                                            />
+                                                        )}
+                                                        {field.type === 'boolean' && (
+                                                            <SelectControl
+                                                                propKey={'key'}
+                                                                value={customFieldValue ?? null}
+                                                                onChange={(value: string) => {
+                                                                    form.values.custom_fields =
+                                                                        form.values.custom_fields || {};
+                                                                    form.values.custom_fields[fieldKey] = value;
+                                                                    form.update({ ...form.values });
+                                                                }}
+                                                                dusk={field.dusk}
+                                                                options={customFieldBooleanOptions}
+                                                            />
+                                                        )}
+                                                    </div>
 
-                                                {field.description && (
-                                                    <Fragment>
-                                                        <div
-                                                            className="form-group-info-button"
-                                                            data-dusk={`${field.dusk}InfoBtn`}
-                                                            onClick={(e) => {
-                                                                e.stopPropagation();
-                                                                setFields((fields) => {
-                                                                    fields[fields.indexOf(field)].showInfo =
-                                                                        !field.showInfo;
-                                                                    return [...fields];
-                                                                });
-                                                            }}>
-                                                            <em className="mdi mdi-information" />
-                                                        </div>
-                                                        {field.showInfo && (
-                                                            <ClickOutside
-                                                                className="block block-info-box block-info-box-primary"
-                                                                onClickOutside={(e) => {
-                                                                    e?.stopPropagation();
+                                                    {field.description && (
+                                                        <Fragment>
+                                                            <div
+                                                                className="form-group-info-button"
+                                                                data-dusk={`${field.dusk}InfoBtn`}
+                                                                onClick={(e) => {
+                                                                    e.stopPropagation();
                                                                     setFields((fields) => {
-                                                                        fields[fields.indexOf(field)].showInfo = false;
+                                                                        fields[fields.indexOf(field)].showInfo =
+                                                                            !field.showInfo;
                                                                         return [...fields];
                                                                     });
                                                                 }}>
-                                                                <div className="info-box-icon mdi mdi-information-outline" />
-                                                                <div className="info-box-content">
-                                                                    <div className="block block-markdown">
-                                                                        <p>{field.description}</p>
+                                                                <em className="mdi mdi-information" />
+                                                            </div>
+                                                            {field.showInfo && (
+                                                                <ClickOutside
+                                                                    className="block block-info-box block-info-box-primary"
+                                                                    onClickOutside={(e) => {
+                                                                        e?.stopPropagation();
+                                                                        setFields((fields) => {
+                                                                            fields[fields.indexOf(field)].showInfo =
+                                                                                false;
+                                                                            return [...fields];
+                                                                        });
+                                                                    }}>
+                                                                    <div className="info-box-icon mdi mdi-information-outline" />
+                                                                    <div className="info-box-content">
+                                                                        <div className="block block-markdown">
+                                                                            <p>{field.description}</p>
+                                                                        </div>
                                                                     </div>
-                                                                </div>
-                                                            </ClickOutside>
-                                                        )}
-                                                    </Fragment>
-                                                )}
-                                            </div>
-                                        )}
-
-                                        {!field.custom && ['text', 'number'].includes(field.type) && (
-                                            <input
-                                                className="form-control"
-                                                id={field.key}
-                                                type={field.type}
-                                                value={form.values[field.key] ?? ''}
-                                                onChange={(e) => {
-                                                    form.update({ [field.key]: e.target.value });
-                                                }}
-                                                data-dusk={field.dusk}
-                                            />
-                                        )}
-
-                                        {!field.custom && field.type === 'date' && (
-                                            <div data-dusk={field.dusk}>
-                                                <DatePickerControl
-                                                    value={dateParse(form.values[field.key])}
-                                                    dateMax={dateMinLimit}
-                                                    dateFormat={'dd-MM-yyyy'}
-                                                    onChange={(date: Date) => {
-                                                        form.update({ [field.key]: dateFormat(date) });
+                                                                </ClickOutside>
+                                                            )}
+                                                        </Fragment>
+                                                    )}
+                                                </div>
+                                            ) : null}
+
+                                            {!field.custom && ['text', 'number'].includes(field.type) && (
+                                                <input
+                                                    className="form-control"
+                                                    id={fieldKey}
+                                                    type={field.type}
+                                                    value={form.values[fieldKey] ?? ''}
+                                                    onChange={(e) => {
+                                                        form.update({ [fieldKey]: e.target.value });
                                                     }}
+                                                    data-dusk={field.dusk}
                                                 />
-                                            </div>
-                                        )}
+                                            )}
 
-                                        {field.custom ? (
-                                            <FormError error={form.errors[`custom_fields.${field.key}`]} />
-                                        ) : (
-                                            <FormError error={form.errors[`${field.key}`]} />
-                                        )}
-                                    </div>
-                                ))}
+                                            {!field.custom && field.type === 'date' && (
+                                                <div data-dusk={field.dusk}>
+                                                    <DatePickerControl
+                                                        value={dateParse(form.values[fieldKey])}
+                                                        dateMax={dateMinLimit}
+                                                        dateFormat={'dd-MM-yyyy'}
+                                                        onChange={(date: Date) => {
+                                                            form.update({ [fieldKey]: dateFormat(date) });
+                                                        }}
+                                                    />
+                                                </div>
+                                            )}
+
+                                            {field.custom ? (
+                                                <FormError error={form.errors[`custom_fields.${fieldKey}`]} />
+                                            ) : (
+                                                <FormError error={form.errors[`${fieldKey}`]} />
+                                            )}
+                                        </div>
+                                    );
+                                })}
                             </div>
                         </div>
                     </div>
@@ -1124,42 +1205,64 @@ export default function ModalProductReserve({
                                     <div className="overview-item-value">{form.values.last_name || '-'}</div>
                                 </div>
 
-                                {fields?.map((field) => (
-                                    <div key={field.key} className="overview-item">
-                                        {!field.custom ? (
-                                            <Fragment>
-                                                <div className="overview-item-label">
-                                                    {translate(
-                                                        `modal_reserve_product.confirm_notes.labels.${field.key}`,
-                                                    )}
-                                                </div>
-                                                <div
-                                                    data-dusk={`overviewValueCustomField${field.key}`}
-                                                    className={`overview-item-value ${
-                                                        !form.values[field.key] ? 'overview-item-value-empty' : ''
-                                                    }`}>
-                                                    {field.type === 'date'
-                                                        ? dateFormat(dateParse(form.values[field.key]), 'dd-MM-yyyy') ||
-                                                          emptyText
-                                                        : form.values[field.key] || emptyText}
-                                                </div>
-                                            </Fragment>
-                                        ) : (
-                                            <Fragment>
-                                                <div className="overview-item-label">{field.label}</div>
-                                                <div
-                                                    data-dusk={`overviewValueCustomField${field.key}`}
-                                                    className={`overview-item-value ${
-                                                        !form.values.custom_fields[field.key]
-                                                            ? 'overview-item-value-empty'
-                                                            : ''
-                                                    }`}>
-                                                    {form.values.custom_fields[field.key] || emptyText}
-                                                </div>
-                                            </Fragment>
-                                        )}
-                                    </div>
-                                ))}
+                                {fields?.map((field) => {
+                                    const fieldKey = String(field.key);
+                                    const customFieldValue = form.values.custom_fields?.[fieldKey];
+                                    const customFieldFile = customFieldFiles?.[fieldKey]?.[0];
+
+                                    return (
+                                        <div
+                                            key={field.key}
+                                            className={classNames('overview-item', {
+                                                'overview-item-full': field.type === 'file' && field.custom,
+                                            })}>
+                                            {!field.custom ? (
+                                                <Fragment>
+                                                    <div className="overview-item-label">
+                                                        {translate(
+                                                            `modal_reserve_product.confirm_notes.labels.${field.key}`,
+                                                        )}
+                                                    </div>
+                                                    <div
+                                                        data-dusk={`overviewValueCustomField${field.key}`}
+                                                        className={`overview-item-value ${
+                                                            !form.values[fieldKey] ? 'overview-item-value-empty' : ''
+                                                        }`}>
+                                                        {field.type === 'date'
+                                                            ? dateFormat(
+                                                                  dateParse(form.values[fieldKey]),
+                                                                  'dd-MM-yyyy',
+                                                              ) || emptyText
+                                                            : form.values[fieldKey] || emptyText}
+                                                    </div>
+                                                </Fragment>
+                                            ) : (
+                                                <Fragment>
+                                                    <div className="overview-item-label">{field.label}</div>
+                                                    <div
+                                                        data-dusk={`overviewValueCustomField${field.key}`}
+                                                        className={`overview-item-value ${
+                                                            !customFieldValue ? 'overview-item-value-empty' : ''
+                                                        }`}>
+                                                        {field.type === 'file' && customFieldFile ? (
+                                                            <FileUploader
+                                                                type="product_reservation_custom_field"
+                                                                files={[customFieldFile]}
+                                                                template="compact"
+                                                                readOnly={true}
+                                                                hideDownloadButton={true}
+                                                            />
+                                                        ) : field.type === 'file' ? (
+                                                            emptyText
+                                                        ) : (
+                                                            customFieldValue || emptyText
+                                                        )}
+                                                    </div>
+                                                </Fragment>
+                                            )}
+                                        </div>
+                                    );
+                                })}
 
                                 {product?.reservation?.address !== 'no' && (
                                     <div className="overview-item">
diff --git a/react/src/webshop/components/pages/fund-requests-show/elements/FundRequestRecordsBlockItemDetails.tsx b/react/src/webshop/components/pages/fund-requests-show/elements/FundRequestRecordsBlockItemDetails.tsx
index 0ebca87c0..81e4c6a83 100644
--- a/react/src/webshop/components/pages/fund-requests-show/elements/FundRequestRecordsBlockItemDetails.tsx
+++ b/react/src/webshop/components/pages/fund-requests-show/elements/FundRequestRecordsBlockItemDetails.tsx
@@ -174,7 +174,8 @@ export default function FundRequestRecordsBlockItemDetails({
                                             files={clarification.files}
                                             template={'compact'}
                                             readOnly={true}
-                                            hideButtons={true}
+                                            hidePreviewButton={true}
+                                            hideDownloadButton={true}
                                         />
                                     </div>
                                 )}
@@ -237,7 +238,6 @@ export default function FundRequestRecordsBlockItemDetails({
                                         files={[]}
                                         template={'compact'}
                                         cropMedia={false}
-                                        multiple={true}
                                         onFilesChange={({ files, fileItems }) => {
                                             updateForm({ files: files.map((file) => file?.uid) });
                                             setUploading(fileItems.filter((item) => item.uploading).length > 0);
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 31a296135..fe95e65a7 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
@@ -332,7 +332,6 @@ export default function FundRequestStepCriteria({
                                 type="fund_request_record_proof"
                                 files={criterion.files}
                                 cropMedia={false}
-                                multiple={true}
                                 template={uploaderTemplate}
                                 onFilesChange={({ files }) => {
                                     setCriterion(criterion.id, {
diff --git a/react/src/webshop/components/pages/reimbursements-edit/ReimbursementsEdit.tsx b/react/src/webshop/components/pages/reimbursements-edit/ReimbursementsEdit.tsx
index 882e0892d..b5013f0dc 100644
--- a/react/src/webshop/components/pages/reimbursements-edit/ReimbursementsEdit.tsx
+++ b/react/src/webshop/components/pages/reimbursements-edit/ReimbursementsEdit.tsx
@@ -298,7 +298,6 @@ export default function ReimbursementsEdit() {
                                         title={translate('reimbursements.form.file_upload_title')}
                                         acceptedFiles={['.pdf', '.png', '.jpg', '.jpeg']}
                                         cropMedia={true}
-                                        multiple={true}
                                         isRequired={true}
                                         onFilesChange={({ files }) => setFiles(files)}
                                     />
diff --git a/react/src/webshop/components/pages/reservations-show/ReservationsShow.tsx b/react/src/webshop/components/pages/reservations-show/ReservationsShow.tsx
index 4a9aa83cf..69704f6aa 100644
--- a/react/src/webshop/components/pages/reservations-show/ReservationsShow.tsx
+++ b/react/src/webshop/components/pages/reservations-show/ReservationsShow.tsx
@@ -14,6 +14,7 @@ import { BooleanParam, useQueryParam } from 'use-query-params';
 import classNames from 'classnames';
 import TranslateHtml from '../../../../dashboard/components/elements/translate-html/TranslateHtml';
 import { WebshopRoutes } from '../../../modules/state_router/RouterBuilder';
+import FileUploader from '../../elements/file-uploader/FileUploader';
 
 export default function ReservationsShow() {
     const { id } = useParams();
@@ -323,6 +324,94 @@ export default function ReservationsShow() {
                         </div>
                     )}
 
+                    <div className="card">
+                        <div className="card-header">
+                            <div className="card-header-wrapper">
+                                <h2 className="card-heading card-heading-lg">
+                                    {translate('reservation.details.reservation_fields_title')}
+                                </h2>
+                            </div>
+                        </div>
+                        <div className="card-section">
+                            <div className="block block-key-value-list">
+                                {reservation.identity_email && (
+                                    <div className="block-key-value-list-item">
+                                        <div className="key-value-list-item-label">
+                                            {translate('reservation.labels.email')}
+                                        </div>
+                                        <div className="key-value-list-item-value">{reservation.identity_email}</div>
+                                    </div>
+                                )}
+                                {reservation.first_name && (
+                                    <div className="block-key-value-list-item">
+                                        <div className="key-value-list-item-label">
+                                            {translate('reservation.labels.first_name')}
+                                        </div>
+                                        <div className="key-value-list-item-value">{reservation.first_name}</div>
+                                    </div>
+                                )}
+                                {reservation.last_name && (
+                                    <div className="block-key-value-list-item">
+                                        <div className="key-value-list-item-label">
+                                            {translate('reservation.labels.last_name')}
+                                        </div>
+                                        <div className="key-value-list-item-value">{reservation.last_name}</div>
+                                    </div>
+                                )}
+                                {reservation.phone && (
+                                    <div className="block-key-value-list-item">
+                                        <div className="key-value-list-item-label">
+                                            {translate('reservation.labels.phone')}
+                                        </div>
+                                        <div className="key-value-list-item-value">{reservation.phone}</div>
+                                    </div>
+                                )}
+                                {reservation.address && (
+                                    <div className="block-key-value-list-item">
+                                        <div className="key-value-list-item-label">
+                                            {translate('reservation.labels.address')}
+                                        </div>
+                                        <div className="key-value-list-item-value">{reservation.address}</div>
+                                    </div>
+                                )}
+                                {reservation.birth_date && (
+                                    <div className="block-key-value-list-item">
+                                        <div className="key-value-list-item-label">
+                                            {translate('reservation.labels.birth_date')}
+                                        </div>
+                                        <div className="key-value-list-item-value">{reservation.birth_date_locale}</div>
+                                    </div>
+                                )}
+                                {reservation.custom_fields?.map((field, idx) => (
+                                    <div className="block-key-value-list-item" key={`${field.label}-${idx}`}>
+                                        <div className="key-value-list-item-label">{field.label}</div>
+                                        <div className="key-value-list-item-value">
+                                            {field.file ? (
+                                                <FileUploader
+                                                    type="product_reservation_custom_field"
+                                                    files={[field.file]}
+                                                    template="compact"
+                                                    readOnly={true}
+                                                    hideDownloadButton={true}
+                                                />
+                                            ) : (
+                                                field.value || '-'
+                                            )}
+                                        </div>
+                                    </div>
+                                ))}
+                                {reservation.user_note && (
+                                    <div className="block-key-value-list-item">
+                                        <div className="key-value-list-item-label">
+                                            {translate('reservation.labels.user_note')}
+                                        </div>
+                                        <div className="key-value-list-item-value">{reservation.user_note}</div>
+                                    </div>
+                                )}
+                            </div>
+                        </div>
+                    </div>
+
                     {reservation?.extra_payment?.refunds?.length > 0 && (
                         <div className={classNames(`card card-collapsable`, showReservationRefunds && 'open')}>
                             <div
diff --git a/react/src/webshop/i18n/i18n-nl.mjs b/react/src/webshop/i18n/i18n-nl.mjs
index 41aaec947..bade2a45a 100644
--- a/react/src/webshop/i18n/i18n-nl.mjs
+++ b/react/src/webshop/i18n/i18n-nl.mjs
@@ -66,6 +66,7 @@ import modal from './nl/modals/modal.mjs';
 import modal_product_reserve_extra_payment from './nl/modals/modal-product-reserve-extra-payment.mjs';
 import modal_product_reserve_cancel from './nl/modals/modal-product-reserve-cancel.mjs';
 import modal_reserve_product from './nl/modals/modal_reserve_product.mjs';
+import modal_image_preview from './nl/modal_image_preview.mjs';
 import modal_2fa_setup from './nl/modals/modal_2fa_setup.mjs';
 import modal_2fa_deactivate from './nl/modals/modal_2fa_deactivate.mjs';
 import modal_photo_cropper from './nl/modals/modal_photo_cropper.mjs';
@@ -316,7 +317,7 @@ export default {
             or: 'of',
             upload_button: 'Upload een document',
             max_size: 'max. grootte 8Mb',
-            max_files: 'Max. {{ count }} files',
+            max_files: '*maximaal {{ count }} bestanden',
             attachments: 'Attachments',
         },
         file_item: {
@@ -480,6 +481,7 @@ export default {
     modal_product_reserve_extra_payment: modal_product_reserve_extra_payment,
     modal_product_reserve_cancel: modal_product_reserve_cancel,
     modal_reserve_product: modal_reserve_product,
+    modal_image_preview: modal_image_preview,
     modal_2fa_setup: modal_2fa_setup,
     modal_2fa_deactivate: modal_2fa_deactivate,
     modal_photo_cropper: modal_photo_cropper,
diff --git a/react/src/webshop/i18n/nl/modal_image_preview.mjs b/react/src/webshop/i18n/nl/modal_image_preview.mjs
new file mode 100644
index 000000000..3f6dff892
--- /dev/null
+++ b/react/src/webshop/i18n/nl/modal_image_preview.mjs
@@ -0,0 +1,7 @@
+export default {
+    title: 'Bekijk bestand',
+    alt_text: 'Voorbeeld van bestand',
+    buttons: {
+        close: 'Sluiten',
+    },
+};
diff --git a/react/src/webshop/i18n/nl/pages/reservation.mjs b/react/src/webshop/i18n/nl/pages/reservation.mjs
index a991c8411..49d471ffd 100644
--- a/react/src/webshop/i18n/nl/pages/reservation.mjs
+++ b/react/src/webshop/i18n/nl/pages/reservation.mjs
@@ -3,6 +3,7 @@ export default {
     details: {
         title: 'Details van de reservering',
         loading: 'Loading',
+        reservation_fields_title: 'Gegevens',
         labels: {
             id: 'ID',
             title: 'Titel',
@@ -35,6 +36,13 @@ export default {
         canceled_at: 'Geannuleerd op:',
         expired_at: 'Verlopen op:',
         created_at: 'Aangemaakt op:',
+        email: 'E-mailadres',
+        first_name: 'Voornaam',
+        last_name: 'Achternaam',
+        phone: 'Telefoonnummer',
+        address: 'Adres',
+        birth_date: 'Geboortedatum',
+        user_note: 'Notitie',
     },
     extra_amount: {
         status: 'Status',
diff --git a/react/src/webshop/props/models/Product.ts b/react/src/webshop/props/models/Product.ts
index f4b477e2f..c46d74f07 100644
--- a/react/src/webshop/props/models/Product.ts
+++ b/react/src/webshop/props/models/Product.ts
@@ -7,7 +7,7 @@ export default interface Product extends BaseProduct {
         note: 'no' | 'optional';
         fields: Array<{
             id?: number;
-            type?: 'text' | 'number';
+            type?: 'text' | 'number' | 'boolean' | 'file';
             label?: string;
             required?: boolean;
             description?: string;

From 2c31e211b1c6d84f801268cfbcc442a95ca1b9ce Mon Sep 17 00:00:00 2001
From: dev-rminds <dev@rminds.nl>
Date: Wed, 26 Nov 2025 11:27:54 +0200
Subject: [PATCH 06/13] update translations

---
 react/src/webshop/i18n/translated/ar.json    | 30 ++++++++---
 react/src/webshop/i18n/translated/de.json    | 30 ++++++++---
 react/src/webshop/i18n/translated/en-US.json | 30 ++++++++---
 react/src/webshop/i18n/translated/fr.json    | 30 ++++++++---
 react/src/webshop/i18n/translated/pl.json    | 30 ++++++++---
 react/src/webshop/i18n/translated/ru.json    | 30 ++++++++---
 react/src/webshop/i18n/translated/tr.json    | 30 ++++++++---
 react/src/webshop/i18n/translated/uk.json    | 30 ++++++++---
 translations/cache/cache.json                | 56 +++++++++++++++++---
 9 files changed, 224 insertions(+), 72 deletions(-)

diff --git a/react/src/webshop/i18n/translated/ar.json b/react/src/webshop/i18n/translated/ar.json
index 296550680..3582ffa8f 100644
--- a/react/src/webshop/i18n/translated/ar.json
+++ b/react/src/webshop/i18n/translated/ar.json
@@ -179,7 +179,7 @@
             "or": "أو",
             "title": "تحميل مستند",
             "upload_button": "تحميل مستند",
-            "max_files": "الحد الأقصى {{ count }} الملفات"
+            "max_files": "*ماكس {{ count }} الملفات"
         },
         "info_box": {
             "2fa_description": "لمزيد من المعلومات حول المصادقة الثنائية (2FA)، تفضل بزيارتنا:",
@@ -422,11 +422,8 @@
             "sort": "فرز",
             "payment_option_qr": "إظهار رمز الاستجابة السريعة لدى المزود",
             "payment_option_reservation": "احجز عبر الإنترنت",
-            "payment_options": "خيارات الدفع",
-            "payment_options_info": "اقرأ المزيد عن خيارات الدفع",
             "price": "السعر (€)",
             "price_from": "من",
-            "price_to": "إلى",
             "payment_option_extra_payment": "الدفع عبر الإنترنت باستخدام iDeal",
             "price_type_option_discount_fixed": "الخصم باليورو",
             "price_type_option_discount_percentage": "الخصم بالنسبة المئوية",
@@ -435,7 +432,10 @@
             "price_type_option_regular": "السعر",
             "price_type_options": "نوع العرض",
             "price_type_options_info": "اقرأ المزيد عن أنواع العروض",
-            "category": "الفئات"
+            "category": "الفئات",
+            "payment_options": "خيارات الدفع",
+            "payment_options_info": "اقرأ المزيد عن خيارات الدفع",
+            "price_to": "إلى"
         },
         "sort": {
             "created_at_asc": "الأقدم أولاً",
@@ -2667,7 +2667,8 @@
                 "rejection_note": "رسالة الموفر:"
             },
             "loading": "التحميل",
-            "title": "تفاصيل الحجز"
+            "title": "تفاصيل الحجز",
+            "reservation_fields_title": "البيانات"
         },
         "expired": "عذرًا، تم إلغاء حجزك أثناء عملية الدفع لأن المنتج المحدد تم بيعه بالكامل.",
         "extra_amount_refund": {
@@ -2703,7 +2704,14 @@
                 "pending": "في انتظار",
                 "rejected": "مرفوض",
                 "waiting": "في انتظار الدفع"
-            }
+            },
+            "address": "العنوان",
+            "birth_date": "تاريخ الميلاد",
+            "email": "عنوان البريد الإلكتروني",
+            "first_name": "الاسم الأول",
+            "last_name": "اللقب",
+            "phone": "رقم الهاتف",
+            "user_note": "ملاحظة"
         },
         "title": "تفاصيل التعبئة",
         "expiring": "يُرجى ملاحظة أن هناك <strong>{{expiresIn}} دقيقة</strong> متبقية لتسديد الدفعة الإضافية. وإلا سيتم إلغاء الحجز تلقائياً."
@@ -3416,7 +3424,6 @@
             "notifications": "الإشعارات",
             "payouts": "المدفوعات",
             "profile": "البيانات",
-            "records": "البيانات الشخصية",
             "reimbursements": "استرداد التكاليف",
             "reservations": "الحجوزات",
             "security": "الأمن",
@@ -3647,5 +3654,12 @@
     "block_product_categories": {
         "description": "انقر على سمة وسترى على الفور العرض الذي يمكنك الاختيار من بينها.",
         "title": "ماذا تحب أن تفعل؟"
+    },
+    "modal_image_preview": {
+        "alt_text": "مثال على الملف",
+        "buttons": {
+            "close": "إغلاق"
+        },
+        "title": "عرض الملف"
     }
 }
\ No newline at end of file
diff --git a/react/src/webshop/i18n/translated/de.json b/react/src/webshop/i18n/translated/de.json
index df6d87704..5a51d0c9c 100644
--- a/react/src/webshop/i18n/translated/de.json
+++ b/react/src/webshop/i18n/translated/de.json
@@ -872,7 +872,7 @@
             "or": "oder",
             "title": "Ein Dokument hochladen",
             "upload_button": "Ein Dokument hochladen",
-            "max_files": "Max. {{ count }} Dateien"
+            "max_files": "*maximal {{ count }} Dateien"
         },
         "info_box": {
             "2fa_description": "Weitere Informationen über 2FA finden Sie bei uns:",
@@ -2348,11 +2348,8 @@
             "sort": "Sortieren",
             "payment_option_qr": "QR-Code beim Anbieter anzeigen",
             "payment_option_reservation": "Online buchen",
-            "payment_options": "Zahlungsmöglichkeiten",
-            "payment_options_info": "Lesen Sie mehr über Zahlungsmöglichkeiten",
             "price": "Preis (€)",
             "price_from": "Von",
-            "price_to": "An",
             "payment_option_extra_payment": "Online-Bezahlung mit iDeal",
             "price_type_option_discount_fixed": "Rabatt in Euro",
             "price_type_option_discount_percentage": "Rabatt in Prozent",
@@ -2361,7 +2358,10 @@
             "price_type_option_regular": "Preis",
             "price_type_options": "Art des Angebots",
             "price_type_options_info": "Lesen Sie mehr über die Arten von Angeboten",
-            "category": "Kategorien"
+            "category": "Kategorien",
+            "payment_options": "Zahlungsmöglichkeiten",
+            "payment_options_info": "Lesen Sie mehr über Zahlungsmöglichkeiten",
+            "price_to": "An"
         },
         "sort": {
             "created_at_asc": "Älteste zuerst",
@@ -2390,7 +2390,6 @@
             "notifications": "Benachrichtigungen",
             "payouts": "Auszahlungen",
             "profile": "Daten",
-            "records": "Persönliche Daten",
             "reimbursements": "Kostendeckung",
             "reservations": "Reservierungen",
             "security": "Sicherheit",
@@ -2728,7 +2727,8 @@
                 "rejection_note": "Nachricht des Anbieters:"
             },
             "loading": "Laden",
-            "title": "Details zur Buchung"
+            "title": "Details zur Buchung",
+            "reservation_fields_title": "Daten"
         },
         "expired": "Ihre Reservierung wurde leider während des Bestellvorgangs storniert, da das ausgewählte Produkt ausverkauft ist.",
         "extra_amount_refund": {
@@ -2764,7 +2764,14 @@
                 "pending": "Im Vorgriff",
                 "rejected": "Verweigert",
                 "waiting": "Warten auf die Zahlung"
-            }
+            },
+            "address": "Adresse",
+            "birth_date": "Datum der Geburt",
+            "email": "E-Mail Adresse",
+            "first_name": "Vornamen",
+            "last_name": "Nachname",
+            "phone": "Rufnummer",
+            "user_note": "Hinweis"
         },
         "title": "Details zur Aufstockung",
         "expiring": "Bitte beachten Sie, dass Sie nur noch <strong>{{expiresIn}} Minuten</strong> Zeit haben, um die zusätzliche Zahlung zu leisten. Andernfalls wird die Reservierung automatisch storniert."
@@ -3647,5 +3654,12 @@
     "block_product_categories": {
         "description": "Klicken Sie auf ein Thema und Sie sehen sofort, aus welchem Angebot Sie wählen können.",
         "title": "Was machen Sie gerne?"
+    },
+    "modal_image_preview": {
+        "alt_text": "Beispiel einer Datei",
+        "buttons": {
+            "close": "Schließen Sie"
+        },
+        "title": "Datei anzeigen"
     }
 }
\ No newline at end of file
diff --git a/react/src/webshop/i18n/translated/en-US.json b/react/src/webshop/i18n/translated/en-US.json
index 5645e87fc..f47b9f809 100644
--- a/react/src/webshop/i18n/translated/en-US.json
+++ b/react/src/webshop/i18n/translated/en-US.json
@@ -459,11 +459,8 @@
             "sort": "Sort",
             "payment_option_qr": "Show QR code at the provider",
             "payment_option_reservation": "Online booking",
-            "payment_options": "Payment options",
-            "payment_options_info": "Learn more about payment options",
             "price": "Price (€)",
             "price_from": "From",
-            "price_to": "To",
             "payment_option_extra_payment": "Online additional payment with iDeal",
             "price_type_option_discount_fixed": "Discount in euro",
             "price_type_option_discount_percentage": "Discount in percent",
@@ -472,7 +469,10 @@
             "price_type_option_regular": "Price",
             "price_type_options": "Type of offer",
             "price_type_options_info": "Read more about the types of offerings",
-            "category": "Categories"
+            "category": "Categories",
+            "payment_options": "Payment options",
+            "payment_options_info": "Learn more about payment options",
+            "price_to": "To"
         },
         "sort": {
             "created_at_asc": "Oldest first",
@@ -2734,7 +2734,6 @@
             "notifications": "Notifications",
             "payouts": "Payouts",
             "profile": "Data",
-            "records": "Personal data",
             "reimbursements": "Cost recovery",
             "reservations": "Reservations",
             "security": "Security",
@@ -2774,7 +2773,14 @@
                 "waiting": "Waiting for payment",
                 "canceled_by_sponsor": "Cancelled by sponsor"
             },
-            "pay_extra": "Continue to pay"
+            "pay_extra": "Continue to pay",
+            "address": "Address",
+            "birth_date": "Date of birth",
+            "email": "Email address",
+            "first_name": "First name",
+            "last_name": "Surname",
+            "phone": "Phone number",
+            "user_note": "Note"
         },
         "details": {
             "labels": {
@@ -2788,7 +2794,8 @@
                 "rejection_note": "Provider Notice:"
             },
             "loading": "Loading",
-            "title": "Reservation details"
+            "title": "Reservation details",
+            "reservation_fields_title": "Data"
         },
         "expired": "Sorry, your reservation was canceled during the checkout process because the selected product is sold out.",
         "extra_amount_refund": {
@@ -3032,7 +3039,7 @@
             "or": "or",
             "title": "Upload a document",
             "upload_button": "Upload a document",
-            "max_files": "Max. {{ count }} files"
+            "max_files": "*max {{ count }} files"
         },
         "info_box": {
             "2fa_description": "For more information on 2FA, check us out:",
@@ -3647,5 +3654,12 @@
     "block_product_categories": {
         "description": "Click on a theme and you'll immediately see what offerings you can choose from.",
         "title": "What do you think would be fun to do?"
+    },
+    "modal_image_preview": {
+        "alt_text": "Example of file",
+        "buttons": {
+            "close": "Close"
+        },
+        "title": "View file"
     }
 }
\ No newline at end of file
diff --git a/react/src/webshop/i18n/translated/fr.json b/react/src/webshop/i18n/translated/fr.json
index c7b070fcd..3d3b400c9 100644
--- a/react/src/webshop/i18n/translated/fr.json
+++ b/react/src/webshop/i18n/translated/fr.json
@@ -872,7 +872,7 @@
             "or": "ou",
             "title": "Télécharger un document",
             "upload_button": "Télécharger un document",
-            "max_files": "Max. {{ count }} fichiers"
+            "max_files": "*maximum {{ count }} files"
         },
         "info_box": {
             "2fa_description": "Pour plus d'informations sur le 2FA, visitez notre site :",
@@ -2348,11 +2348,8 @@
             "sort": "Trier",
             "payment_option_qr": "Afficher le code QR au fournisseur",
             "payment_option_reservation": "Réserver en ligne",
-            "payment_options": "Options de paiement",
-            "payment_options_info": "En savoir plus sur les options de paiement",
             "price": "Prix (€)",
             "price_from": "De",
-            "price_to": "Pour",
             "payment_option_extra_payment": "Payer en ligne avec iDeal",
             "price_type_option_discount_fixed": "Remise en euros",
             "price_type_option_discount_percentage": "Remise en pourcentage",
@@ -2361,7 +2358,10 @@
             "price_type_option_regular": "Prix",
             "price_type_options": "Type d'offre",
             "price_type_options_info": "En savoir plus sur les types d'offres",
-            "category": "Catégories"
+            "category": "Catégories",
+            "payment_options": "Options de paiement",
+            "payment_options_info": "En savoir plus sur les options de paiement",
+            "price_to": "Pour"
         },
         "sort": {
             "created_at_asc": "Le plus vieux d'abord",
@@ -2390,7 +2390,6 @@
             "notifications": "Notifications",
             "payouts": "Paiements",
             "profile": "Données",
-            "records": "Données personnelles",
             "reimbursements": "Recouvrement des coûts",
             "reservations": "Réservations",
             "security": "Sécurité",
@@ -2728,7 +2727,8 @@
                 "rejection_note": "Message du fournisseur :"
             },
             "loading": "Chargement",
-            "title": "Détails de la réservation"
+            "title": "Détails de la réservation",
+            "reservation_fields_title": "Données"
         },
         "expired": "Désolé, votre réservation a été annulée pendant le processus de paiement car le produit sélectionné est épuisé.",
         "extra_amount_refund": {
@@ -2764,7 +2764,14 @@
                 "pending": "En prévision",
                 "rejected": "Refusé",
                 "waiting": "En attente de paiement"
-            }
+            },
+            "address": "Adresse",
+            "birth_date": "Date de naissance",
+            "email": "Adresse électronique",
+            "first_name": "Prénom",
+            "last_name": "Nom de famille",
+            "phone": "Numéro de téléphone",
+            "user_note": "Note"
         },
         "title": "Détails de l'appoint",
         "expiring": "Veuillez noter qu'il reste <strong>{{expiresIn}} minutes</strong> pour effectuer le paiement supplémentaire. Dans le cas contraire, la réservation sera automatiquement annulée."
@@ -3647,5 +3654,12 @@
     "block_product_categories": {
         "description": "Cliquez sur un thème et vous verrez immédiatement l'offre que vous pouvez choisir.",
         "title": "Qu'aimez-vous faire ?"
+    },
+    "modal_image_preview": {
+        "alt_text": "Exemple de fichier",
+        "buttons": {
+            "close": "Fermer"
+        },
+        "title": "Voir le fichier"
     }
 }
\ No newline at end of file
diff --git a/react/src/webshop/i18n/translated/pl.json b/react/src/webshop/i18n/translated/pl.json
index 7f663f0ef..029a8b463 100644
--- a/react/src/webshop/i18n/translated/pl.json
+++ b/react/src/webshop/i18n/translated/pl.json
@@ -872,7 +872,7 @@
             "or": "lub",
             "title": "Prześlij dokument",
             "upload_button": "Prześlij dokument",
-            "max_files": "Maks. {{ count }} plików"
+            "max_files": "*maksymalna liczba plików {{ count }} "
         },
         "info_box": {
             "2fa_description": "Aby uzyskać więcej informacji na temat 2FA, odwiedź naszą stronę:",
@@ -2348,11 +2348,8 @@
             "sort": "Sortuj",
             "payment_option_qr": "Pokaż kod QR u dostawcy",
             "payment_option_reservation": "Zarezerwuj online",
-            "payment_options": "Opcje płatności",
-            "payment_options_info": "Więcej informacji o opcjach płatności",
             "price": "Cena (€)",
             "price_from": "Od",
-            "price_to": "Do",
             "payment_option_extra_payment": "Płatność online za pomocą iDeal",
             "price_type_option_discount_fixed": "Rabat w euro",
             "price_type_option_discount_percentage": "Rabat w procentach",
@@ -2361,7 +2358,10 @@
             "price_type_option_regular": "Cena",
             "price_type_options": "Rodzaj oferty",
             "price_type_options_info": "Dowiedz się więcej o rodzajach ofert",
-            "category": "Kategorie"
+            "category": "Kategorie",
+            "payment_options": "Opcje płatności",
+            "payment_options_info": "Więcej informacji o opcjach płatności",
+            "price_to": "Do"
         },
         "sort": {
             "created_at_asc": "Najstarszy pierwszy",
@@ -2390,7 +2390,6 @@
             "notifications": "Powiadomienia",
             "payouts": "Wypłaty",
             "profile": "Dane",
-            "records": "Dane osobowe",
             "reimbursements": "Zwrot kosztów",
             "reservations": "Rezerwacje",
             "security": "Bezpieczeństwo",
@@ -2728,7 +2727,8 @@
                 "rejection_note": "Wiadomość od dostawcy:"
             },
             "loading": "Ładowanie",
-            "title": "Szczegóły rezerwacji"
+            "title": "Szczegóły rezerwacji",
+            "reservation_fields_title": "Dane"
         },
         "expired": "Przepraszamy, rezerwacja została anulowana podczas procesu realizacji zakupu, ponieważ wybrany produkt został wyprzedany.",
         "extra_amount_refund": {
@@ -2764,7 +2764,14 @@
                 "pending": "W oczekiwaniu",
                 "rejected": "Odmowa",
                 "waiting": "Oczekiwanie na płatność"
-            }
+            },
+            "address": "Adres",
+            "birth_date": "Data urodzenia",
+            "email": "Adres e-mail",
+            "first_name": "Imię",
+            "last_name": "Nazwisko",
+            "phone": "Numer telefonu",
+            "user_note": "Uwaga"
         },
         "title": "Szczegóły doładowania",
         "expiring": "Należy pamiętać, że na dokonanie dodatkowej płatności pozostało <strong>{{expiresIn}} minut</strong>. W przeciwnym razie rezerwacja zostanie automatycznie anulowana."
@@ -3647,5 +3654,12 @@
     "block_product_categories": {
         "description": "Kliknij motyw, a natychmiast zobaczysz, z której oferty możesz wybierać.",
         "title": "Co lubisz robić?"
+    },
+    "modal_image_preview": {
+        "alt_text": "Przykład pliku",
+        "buttons": {
+            "close": "Zamknij"
+        },
+        "title": "Wyświetl plik"
     }
 }
\ No newline at end of file
diff --git a/react/src/webshop/i18n/translated/ru.json b/react/src/webshop/i18n/translated/ru.json
index 58eb2ccde..3aeb45d9a 100644
--- a/react/src/webshop/i18n/translated/ru.json
+++ b/react/src/webshop/i18n/translated/ru.json
@@ -872,7 +872,7 @@
             "or": "или",
             "title": "Загрузить документ",
             "upload_button": "Загрузить документ",
-            "max_files": "Макс. {{ count }} файлов"
+            "max_files": "*максимум {{ count }} файлов"
         },
         "info_box": {
             "2fa_description": "Для получения дополнительной информации о 2FA посетите наш сайт:",
@@ -2348,11 +2348,8 @@
             "sort": "Сортировать",
             "payment_option_qr": "Показать QR-код у провайдера",
             "payment_option_reservation": "Забронировать онлайн",
-            "payment_options": "Варианты оплаты",
-            "payment_options_info": "Подробнее о вариантах оплаты",
             "price": "Цена (€)",
             "price_from": "С сайта",
-            "price_to": "На",
             "payment_option_extra_payment": "Оплата онлайн с помощью iDeal",
             "price_type_option_discount_fixed": "Скидка в евро",
             "price_type_option_discount_percentage": "Скидка в процентах",
@@ -2361,7 +2358,10 @@
             "price_type_option_regular": "Цена",
             "price_type_options": "Тип предложения",
             "price_type_options_info": "Подробнее о типах предложений",
-            "category": "Категории"
+            "category": "Категории",
+            "payment_options": "Варианты оплаты",
+            "payment_options_info": "Подробнее о вариантах оплаты",
+            "price_to": "На"
         },
         "sort": {
             "created_at_asc": "Самый старый первый",
@@ -2390,7 +2390,6 @@
             "notifications": "Уведомления",
             "payouts": "Выплаты",
             "profile": "Данные",
-            "records": "Персональные данные",
             "reimbursements": "Возмещение затрат",
             "reservations": "Бронирование",
             "security": "Безопасность",
@@ -2728,7 +2727,8 @@
                 "rejection_note": "Сообщение поставщика:"
             },
             "loading": "Загрузка",
-            "title": "Детали бронирования"
+            "title": "Детали бронирования",
+            "reservation_fields_title": "Данные"
         },
         "expired": "Извините, ваше бронирование было отменено в процессе оформления заказа, поскольку выбранный товар распродан.",
         "extra_amount_refund": {
@@ -2764,7 +2764,14 @@
                 "pending": "В ожидании",
                 "rejected": "Отказано",
                 "waiting": "Ожидание оплаты"
-            }
+            },
+            "address": "Адрес",
+            "birth_date": "Дата рождения",
+            "email": "Адрес электронной почты",
+            "first_name": "Имя",
+            "last_name": "Фамилия",
+            "phone": "Номер телефона",
+            "user_note": "Примечание"
         },
         "title": "Детали пополнения счета",
         "expiring": "Пожалуйста, обратите внимание, что для внесения дополнительной оплаты осталось <strong>{{expiresIn}} минут</strong>. В противном случае бронирование будет автоматически отменено."
@@ -3647,5 +3654,12 @@
     "block_product_categories": {
         "description": "Нажмите на тему, и вы сразу увидите, какое предложение вы можете выбрать.",
         "title": "Чем вы любите заниматься?"
+    },
+    "modal_image_preview": {
+        "alt_text": "Пример файла",
+        "buttons": {
+            "close": "Закрыть"
+        },
+        "title": "Просмотр файла"
     }
 }
\ No newline at end of file
diff --git a/react/src/webshop/i18n/translated/tr.json b/react/src/webshop/i18n/translated/tr.json
index 279f24091..e2b89ca02 100644
--- a/react/src/webshop/i18n/translated/tr.json
+++ b/react/src/webshop/i18n/translated/tr.json
@@ -179,7 +179,7 @@
             "or": "veya",
             "title": "Bir belge yükleyin",
             "upload_button": "Bir belge yükleyin",
-            "max_files": "Maks. {{ count }} dosyalar"
+            "max_files": "*max {{ count }} dosyaları"
         },
         "info_box": {
             "2fa_description": "2FA hakkında daha fazla bilgi için bizi ziyaret edin:",
@@ -422,11 +422,8 @@
             "sort": "Sırala",
             "payment_option_qr": "QR kodunu sağlayıcıda göster",
             "payment_option_reservation": "Online rezervasyon",
-            "payment_options": "Ödeme seçenekleri",
-            "payment_options_info": "Ödeme seçenekleri hakkında daha fazla bilgi edinin",
             "price": "Fiyat (€)",
             "price_from": "Kimden",
-            "price_to": "için",
             "payment_option_extra_payment": "iDeal ile çevrimiçi ödeme",
             "price_type_option_discount_fixed": "Euro cinsinden indirim",
             "price_type_option_discount_percentage": "Yüzde olarak indirim",
@@ -435,7 +432,10 @@
             "price_type_option_regular": "Fiyat",
             "price_type_options": "Teklif türü",
             "price_type_options_info": "Teklif türleri hakkında daha fazla bilgi edinin",
-            "category": "Kategoriler"
+            "category": "Kategoriler",
+            "payment_options": "Ödeme seçenekleri",
+            "payment_options_info": "Ödeme seçenekleri hakkında daha fazla bilgi edinin",
+            "price_to": "için"
         },
         "sort": {
             "created_at_asc": "Önce en yaşlı",
@@ -2667,7 +2667,8 @@
                 "rejection_note": "Sağlayıcı mesajı:"
             },
             "loading": "Yükleniyor",
-            "title": "Rezervasyon detayları"
+            "title": "Rezervasyon detayları",
+            "reservation_fields_title": "Veri"
         },
         "expired": "Üzgünüz, seçilen ürün tükendiği için ödeme işlemi sırasında rezervasyonunuz iptal edildi.",
         "extra_amount_refund": {
@@ -2703,7 +2704,14 @@
                 "pending": "Beklenti içinde",
                 "rejected": "Reddedildi",
                 "waiting": "Ödeme için bekliyorum"
-            }
+            },
+            "address": "Adres",
+            "birth_date": "Doğum tarihi",
+            "email": "E-posta adresi",
+            "first_name": "İlk isim",
+            "last_name": "Soyadı",
+            "phone": "Telefon numarası",
+            "user_note": "Not"
         },
         "title": "Yükleme ayrıntıları",
         "expiring": "Ek ödemeyi yapmak için <strong>{{expiresIn}} dakika</strong> kaldığını lütfen unutmayın. Aksi takdirde rezervasyon otomatik olarak iptal edilecektir."
@@ -3416,7 +3424,6 @@
             "notifications": "Bildirimler",
             "payouts": "Ödemeler",
             "profile": "Veri",
-            "records": "Kişisel veriler",
             "reimbursements": "Maliyet geri kazanımı",
             "reservations": "Rezervasyonlar",
             "security": "Güvenlik",
@@ -3647,5 +3654,12 @@
     "block_product_categories": {
         "description": "Bir temaya tıkladığınızda hangi teklifler arasından seçim yapabileceğinizi hemen göreceksiniz.",
         "title": "Ne yapmaktan hoşlanırsın?"
+    },
+    "modal_image_preview": {
+        "alt_text": "Dosya örneği",
+        "buttons": {
+            "close": "Kapat"
+        },
+        "title": "Dosyayı görüntüle"
     }
 }
\ No newline at end of file
diff --git a/react/src/webshop/i18n/translated/uk.json b/react/src/webshop/i18n/translated/uk.json
index 02796a509..2cf2face7 100644
--- a/react/src/webshop/i18n/translated/uk.json
+++ b/react/src/webshop/i18n/translated/uk.json
@@ -872,7 +872,7 @@
             "or": "або",
             "title": "Завантажити документ",
             "upload_button": "Завантажити документ",
-            "max_files": "Макс. {{ count }} файлів"
+            "max_files": "*максимальний розмір файлів {{ count }} "
         },
         "info_box": {
             "2fa_description": "Щоб дізнатися більше про 2FA, відвідайте нас:",
@@ -2348,11 +2348,8 @@
             "sort": "Сортування",
             "payment_option_qr": "Показати QR-код у постачальника",
             "payment_option_reservation": "Бронюйте онлайн",
-            "payment_options": "Варіанти оплати",
-            "payment_options_info": "Дізнайтеся більше про способи оплати",
             "price": "Ціна (€)",
             "price_from": "Від",
-            "price_to": "До",
             "payment_option_extra_payment": "Оплата в Інтернеті за допомогою iDeal",
             "price_type_option_discount_fixed": "Знижка в євро",
             "price_type_option_discount_percentage": "Знижка у відсотках",
@@ -2361,7 +2358,10 @@
             "price_type_option_regular": "Ціна",
             "price_type_options": "Тип пропозиції",
             "price_type_options_info": "Дізнайтеся більше про типи пропозицій",
-            "category": "Категорії"
+            "category": "Категорії",
+            "payment_options": "Варіанти оплати",
+            "payment_options_info": "Дізнайтеся більше про способи оплати",
+            "price_to": "До"
         },
         "sort": {
             "created_at_asc": "Найстарший перший",
@@ -2390,7 +2390,6 @@
             "notifications": "Сповіщення",
             "payouts": "Виплати",
             "profile": "Дані",
-            "records": "Персональні дані",
             "reimbursements": "Відшкодування витрат",
             "reservations": "Бронювання",
             "security": "Безпека",
@@ -2728,7 +2727,8 @@
                 "rejection_note": "Повідомлення від провайдера:"
             },
             "loading": "Завантаження",
-            "title": "Деталі бронювання"
+            "title": "Деталі бронювання",
+            "reservation_fields_title": "Дані"
         },
         "expired": "На жаль, ваше бронювання було скасовано під час оформлення замовлення, оскільки обраний товар розпродано.",
         "extra_amount_refund": {
@@ -2764,7 +2764,14 @@
                 "pending": "В очікуванні",
                 "rejected": "Відмовлено",
                 "waiting": "Чекаємо на оплату"
-            }
+            },
+            "address": "Адреса",
+            "birth_date": "Дата народження",
+            "email": "Адреса електронної пошти",
+            "first_name": "Ім'я та прізвище",
+            "last_name": "Прізвище",
+            "phone": "Номер телефону",
+            "user_note": "Примітка"
         },
         "title": "Деталі поповнення",
         "expiring": "Будь ласка, зверніть увагу, що залишилося <strong>{{expiresIn}} хвилин</strong>, щоб здійснити доплату. В іншому випадку бронювання буде автоматично скасовано."
@@ -3647,5 +3654,12 @@
     "block_product_categories": {
         "description": "Натисніть на тему, і ви одразу побачите, з яких пропозицій ви можете вибрати.",
         "title": "Чим ви любите займатися?"
+    },
+    "modal_image_preview": {
+        "alt_text": "Приклад файлу",
+        "buttons": {
+            "close": "Закрити"
+        },
+        "title": "Переглянути файл"
     }
 }
\ No newline at end of file
diff --git a/translations/cache/cache.json b/translations/cache/cache.json
index 61bdc781a..60d2d443f 100644
--- a/translations/cache/cache.json
+++ b/translations/cache/cache.json
@@ -2165,7 +2165,7 @@
     ],
     [
         "global.file_uploader.max_files",
-        "Max. {{ count }} files"
+        "*maximaal {{ count }} bestanden"
     ],
     [
         "global.file_uploader.max_size",
@@ -4059,6 +4059,18 @@
         "modal_fund_help.website",
         "Website"
     ],
+    [
+        "modal_image_preview.alt_text",
+        "Voorbeeld van bestand"
+    ],
+    [
+        "modal_image_preview.buttons.close",
+        "Sluiten"
+    ],
+    [
+        "modal_image_preview.title",
+        "Bekijk bestand"
+    ],
     [
         "modal_logout.description_formal",
         "Weet u zeker dat u wilt uitloggen?"
@@ -6637,11 +6649,11 @@
     ],
     [
         "products.filters.payment_options",
-        "Betalingsmogelijkheden"
+        "Betaalopties"
     ],
     [
         "products.filters.payment_options_info",
-        "Lees meer over de betalingsopties"
+        "Lees meer over de betaalopties"
     ],
     [
         "products.filters.postcode",
@@ -6657,7 +6669,7 @@
     ],
     [
         "products.filters.price_to",
-        "Naar"
+        "Tot"
     ],
     [
         "products.filters.price_type_option_discount_fixed",
@@ -6791,10 +6803,6 @@
         "profile_menu.buttons.provider_sign_up",
         "Aanmelden als aanbieder"
     ],
-    [
-        "profile_menu.buttons.records",
-        "Persoonsgegevens"
-    ],
     [
         "profile_menu.buttons.reimbursements",
         "Kosten terugvragen"
@@ -7659,6 +7667,10 @@
         "reservation.details.loading",
         "Loading"
     ],
+    [
+        "reservation.details.reservation_fields_title",
+        "Gegevens"
+    ],
     [
         "reservation.details.title",
         "Details van de reservering"
@@ -7707,6 +7719,14 @@
         "reservation.extra_amount.status",
         "Status"
     ],
+    [
+        "reservation.labels.address",
+        "Adres"
+    ],
+    [
+        "reservation.labels.birth_date",
+        "Geboortedatum"
+    ],
     [
         "reservation.labels.cancel",
         "Annuleren"
@@ -7723,14 +7743,30 @@
         "reservation.labels.created_at",
         "Aangemaakt op:"
     ],
+    [
+        "reservation.labels.email",
+        "E-mailadres"
+    ],
     [
         "reservation.labels.expired_at",
         "Verlopen op:"
     ],
+    [
+        "reservation.labels.first_name",
+        "Voornaam"
+    ],
+    [
+        "reservation.labels.last_name",
+        "Achternaam"
+    ],
     [
         "reservation.labels.pay_extra",
         "Ga door naar betalen"
     ],
+    [
+        "reservation.labels.phone",
+        "Telefoonnummer"
+    ],
     [
         "reservation.labels.rejected_at",
         "Geweigerd op:"
@@ -7779,6 +7815,10 @@
         "reservation.labels.status.waiting",
         "Wachten op betaling"
     ],
+    [
+        "reservation.labels.user_note",
+        "Notitie"
+    ],
     [
         "reservation.title",
         "Bijbetalingsgegevens"

From 57bd55f87abf1db3d19e3951ad29d938791ba57e Mon Sep 17 00:00:00 2001
From: Yaroslav Kosterin <ateamcms@gmail.com>
Date: Sat, 29 Nov 2025 17:15:15 +0200
Subject: [PATCH 07/13] add reservations custom fields for provider

---
 .../_common/blocks/block-file-uploader.scss   | 211 ++++++++++++++++++
 .../scss/_common/dashboard.scss               |   1 +
 .../file-uploader/FileUploaderItemView.tsx    | 117 ++++++++++
 .../components/modals/ModalImagePreview.tsx   |   2 +-
 .../ModalReservationCustomFieldEdit.tsx       | 141 ++++++++++++
 .../reservations-view/ReservationsView.tsx    |  34 ++-
 .../elements/panes/ReservationDetailsPane.tsx |  12 +-
 .../panes/ReservationExtraInformationPane.tsx | 103 ++++++++-
 .../elements/ReservationFieldItem.tsx         |  28 +++
 react/src/dashboard/i18n/i18n-nl.js           |  10 +
 react/src/dashboard/i18n/nl/i18n-modals.js    |   2 +
 .../modal-reservation-custom-field-edit.js    |   7 +
 .../i18n/nl/pages/reservations-settings.js    |   5 +
 react/src/dashboard/props/models/Product.tsx  |   1 +
 .../dashboard/props/models/Reservation.tsx    |  21 +-
 .../props/models/ReservationField.tsx         |   1 +
 .../services/ProductReservationService.ts     |  12 +
 .../elements/file-uploader/FileUploader.tsx   |  36 ++-
 .../reservations-show/ReservationsShow.tsx    |  70 ++++--
 .../src/webshop/i18n/nl/pages/reservation.mjs |   1 +
 20 files changed, 775 insertions(+), 40 deletions(-)
 create mode 100644 react/assets/forus-platform/scss/_common/blocks/block-file-uploader.scss
 create mode 100644 react/src/dashboard/components/elements/file-uploader/FileUploaderItemView.tsx
 create mode 100644 react/src/dashboard/components/modals/ModalReservationCustomFieldEdit.tsx
 create mode 100644 react/src/dashboard/i18n/nl/modals/modal-reservation-custom-field-edit.js

diff --git a/react/assets/forus-platform/scss/_common/blocks/block-file-uploader.scss b/react/assets/forus-platform/scss/_common/blocks/block-file-uploader.scss
new file mode 100644
index 000000000..7c5c604e0
--- /dev/null
+++ b/react/assets/forus-platform/scss/_common/blocks/block-file-uploader.scss
@@ -0,0 +1,211 @@
+.block.block-file-uploader {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+
+    .uploader-droparea {
+        display: flex;
+        flex-direction: column;
+        gap: 15px;
+        width: 100%;
+        background: #f8f8f8;
+        padding: 25px 30px;
+        text-align: center;
+        border: 1px dashed #e5e6ec;
+        border-radius: calc(var(--border-radius) / 2);
+        color: #515152;
+
+        .droparea-icon {
+            margin: 0 auto;
+            color: inherit;
+            display: flex;
+            justify-content: center;
+
+            .mdi {
+                width: 50px;
+                height: 50px;
+                font-size: 24px;
+                padding: 10px;
+                flex-direction: column;
+                justify-content: center;
+                border: 1px solid var(--color-primary);
+                color: var(--color-primary);
+                margin: 0 auto;
+            }
+        }
+
+        .droparea-title {
+            font: 500 16px/26px var(--base-font);
+            justify-content: center;
+            color: inherit;
+
+            strong {
+                font-weight: 700;
+            }
+
+            small {
+                font-size: 14px;
+            }
+
+            &.droparea-title-required {
+                strong {
+                    &:after {
+                        content: '*';
+                        color: #ff5548;
+                        font: inherit;
+                        margin-left: 2px;
+                    }
+                }
+            }
+        }
+
+        .droparea-button {
+            display: flex;
+            justify-content: center;
+        }
+
+        .droparea-size {
+            display: flex;
+            justify-content: center;
+            font: 600 13px/18px var(--base-font);
+            color: inherit;
+        }
+
+        .droparea-hidden-input {
+            display: none;
+        }
+
+        &.is-dragover {
+            background: white;
+            border-color: silver;
+        }
+
+        &:last-child {
+            margin-bottom: 0;
+        }
+    }
+
+    .uploader-files {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+
+        .uploader-files-title {
+            display: flex;
+            font: 700 16px/24px var(--base-font);
+            flex-direction: row;
+            padding: 0 0 5px;
+            gap: 6px;
+
+            .uploader-files-title-count {
+                padding: 2px 6px;
+                background: #e5e5e5;
+                border-radius: var(--border-radius);
+                font: 600 14px/20px var(--base-font);
+            }
+        }
+    }
+
+    &.block-file-uploader-compact {
+        max-width: 100%;
+        display: flex;
+        flex-direction: column-reverse;
+        align-items: flex-start;
+
+        .droparea-icon,
+        .droparea-title,
+        .droparea-hidden-input {
+            display: none;
+        }
+
+        .uploader-droparea {
+            display: flex;
+            padding: 0;
+            background: none;
+            border: none;
+            flex-direction: row;
+            justify-content: flex-start;
+            align-items: center;
+
+            .droparea-max-limit {
+                color: #353535;
+                font-size: 11px;
+                font-weight: 400;
+                line-height: 11px;
+                font-family: var(--base-font), serif;
+
+                &::before {
+                    content: '*';
+                    color: #ed133c;
+                    padding-right: 3px;
+                }
+            }
+        }
+
+        .uploader-files {
+            max-width: 100%;
+        }
+    }
+
+    &.block-file-uploader-inline {
+        max-width: 100%;
+        display: flex;
+
+        .droparea-icon,
+        .droparea-title,
+        .droparea-hidden-input {
+            display: none;
+        }
+
+        .uploader-droparea {
+            display: flex;
+            padding: 0;
+            background: none;
+            border: none;
+            flex-direction: row;
+            justify-content: flex-start;
+            align-items: center;
+
+            .droparea-max-limit {
+                color: #353535;
+                font-size: 11px;
+                font-weight: 400;
+                line-height: 11px;
+                font-family: var(--base-font), serif;
+
+                &::before {
+                    content: '*';
+                    color: #ed133c;
+                    padding-right: 3px;
+                }
+            }
+        }
+
+        .uploader-files {
+            padding: 15px 20px;
+            border: 1px solid var(--border-color);
+            border-radius: var(--border-radius);
+            width: 100%;
+            flex-direction: column;
+            gap: 5px;
+            background-color: #fbfbfb;
+        }
+    }
+
+    .file-item-error {
+        font: 400 13px/20px var(--base-font);
+    }
+
+    @media (max-width: 991px) {
+        .uploader-droparea {
+            border: none;
+            background: none;
+            padding: 0 0;
+
+            .droparea-icon,
+            .droparea-title {
+                display: none;
+            }
+        }
+    }
+}
diff --git a/react/assets/forus-platform/scss/_common/dashboard.scss b/react/assets/forus-platform/scss/_common/dashboard.scss
index d525cb619..a6b19939e 100644
--- a/react/assets/forus-platform/scss/_common/dashboard.scss
+++ b/react/assets/forus-platform/scss/_common/dashboard.scss
@@ -103,6 +103,7 @@
 @import 'blocks/block-attachments-list.scss';
 @import 'blocks/block-request-clarification.scss';
 @import 'blocks/block-product-media-uploader.scss';
+@import 'blocks/block-file-uploader';
 
 // Select controls
 @import 'select-controls/select-control-funds';
diff --git a/react/src/dashboard/components/elements/file-uploader/FileUploaderItemView.tsx b/react/src/dashboard/components/elements/file-uploader/FileUploaderItemView.tsx
new file mode 100644
index 000000000..1fd3b51ab
--- /dev/null
+++ b/react/src/dashboard/components/elements/file-uploader/FileUploaderItemView.tsx
@@ -0,0 +1,117 @@
+import React, { Fragment, useCallback, useMemo } from 'react';
+import { useFileService } from '../../../services/FileService';
+import { ResponseError } from '../../../props/ApiResponses';
+import useOpenModal from '../../../../dashboard/hooks/useOpenModal';
+import ModalImagePreview from '../../modals/ModalImagePreview';
+import ModalPdfPreview from '../../modals/ModalPdfPreview';
+import { FileUploaderItem } from '../../../../webshop/components/elements/file-uploader/FileUploader';
+
+export default function FileUploaderItemView({
+    item,
+    hidePreviewButton,
+    hideDownloadButton,
+    readOnly,
+    removeFile,
+}: {
+    item: FileUploaderItem;
+    hidePreviewButton?: boolean;
+    hideDownloadButton?: boolean;
+    readOnly?: boolean;
+    removeFile?: (file: FileUploaderItem) => void;
+}) {
+    const openModal = useOpenModal();
+    const fileService = useFileService();
+
+    const name = useMemo(() => {
+        return item.file?.name || item.file_data?.original_name || '';
+    }, [item.file?.name, item.file_data?.original_name]);
+
+    const previewFile = useCallback(
+        (e: React.MouseEvent, file: Partial<FileUploaderItem>) => {
+            e.preventDefault();
+            e.stopPropagation();
+
+            if (file.file_data.ext == 'pdf') {
+                fileService
+                    .downloadBlob(file.file_data)
+                    .then((res) => {
+                        openModal((modal) => <ModalPdfPreview modal={modal} rawPdfFile={res.data} />);
+                    })
+                    .catch((err: ResponseError) => console.error(err));
+            } else if (['png', 'jpeg', 'jpg'].includes(file.file_data.ext)) {
+                openModal((modal) => <ModalImagePreview modal={modal} imageSrc={file.file_data.url} />);
+            }
+        },
+        [fileService, openModal],
+    );
+
+    const downloadFile = useCallback(
+        (e: React.MouseEvent, file: Partial<FileUploaderItem>) => {
+            e.preventDefault();
+            e.stopPropagation();
+
+            fileService.download(file.file_data).then((res) => {
+                fileService.downloadFile(file.file_data.original_name, res.data);
+            }, console.error);
+        },
+        [fileService],
+    );
+
+    return (
+        <Fragment>
+            <div className="block block-attachments-list">
+                <div className="attachment-item">
+                    <div className="attachment-icon">
+                        <div className="mdi mdi-file" />
+                        <div className="attachment-size">{item.file_data?.size || ' - kB'}</div>
+                    </div>
+                    <div className="attachment-name">{name}</div>
+                    <div className="attachment-date"></div>
+                    <div className="attachment-actions">
+                        {!item.uploading && !hideDownloadButton && (
+                            <button
+                                type="button"
+                                className="attachment-action"
+                                title="Download"
+                                aria-label="Download"
+                                onClick={(e) => downloadFile(e, item)}>
+                                <div className="mdi mdi-download" aria-hidden="true" />
+                            </button>
+                        )}
+
+                        {item.has_preview && !hidePreviewButton && (
+                            <button
+                                type="button"
+                                className="attachment-action"
+                                title={item.file_data?.ext == 'pdf' ? 'Bekijk PDF-bestand' : 'Bekijk file'}
+                                aria-label={item.file_data?.ext == 'pdf' ? 'Bekijk PDF-bestand' : 'Bekijk file'}
+                                onClick={(e) => previewFile(e, item)}>
+                                <div className="mdi mdi-eye" aria-hidden="true" />
+                            </button>
+                        )}
+
+                        {!readOnly && (
+                            <div className="file-item-action">
+                                <button
+                                    type="button"
+                                    className="attachment-action"
+                                    onClick={() => removeFile(item)}
+                                    title="Remove file">
+                                    <div className="mdi mdi-close" aria-hidden="true" />
+                                </button>
+                            </div>
+                        )}
+                    </div>
+                </div>
+            </div>
+
+            <div className="file-item-error">
+                {item?.error?.map((error, index) => (
+                    <div key={index} className="text-danger">
+                        {error}
+                    </div>
+                ))}
+            </div>
+        </Fragment>
+    );
+}
diff --git a/react/src/dashboard/components/modals/ModalImagePreview.tsx b/react/src/dashboard/components/modals/ModalImagePreview.tsx
index 858d4bcf9..2800c64ec 100644
--- a/react/src/dashboard/components/modals/ModalImagePreview.tsx
+++ b/react/src/dashboard/components/modals/ModalImagePreview.tsx
@@ -27,7 +27,7 @@ export default function ModalImagePreview({
 
             <div className="modal-window">
                 <a className="mdi mdi-close modal-close" onClick={modal.close} role="button" />
-                <div className="modal-header">{translate('modal_image_preview.header.title')}</div>
+                <div className="modal-header">{translate('modal_image_preview.title')}</div>
                 <div className="modal-body">
                     <div className="modal-section">
                         <div className="img-block">
diff --git a/react/src/dashboard/components/modals/ModalReservationCustomFieldEdit.tsx b/react/src/dashboard/components/modals/ModalReservationCustomFieldEdit.tsx
new file mode 100644
index 000000000..8964f1e05
--- /dev/null
+++ b/react/src/dashboard/components/modals/ModalReservationCustomFieldEdit.tsx
@@ -0,0 +1,141 @@
+import React, { Fragment, useMemo } from 'react';
+import { ModalState } from '../../modules/modals/context/ModalContext';
+import { ModalButton } from './elements/ModalButton';
+import useFormBuilder from '../../hooks/useFormBuilder';
+import FormGroup from '../elements/forms/elements/FormGroup';
+import Reservation from '../../props/models/Reservation';
+import Organization from '../../props/models/Organization';
+import useProductReservationService from '../../services/ProductReservationService';
+import usePushSuccess from '../../hooks/usePushSuccess';
+import usePushApiError from '../../hooks/usePushApiError';
+import { ResponseError } from '../../props/ApiResponses';
+import useTranslate from '../../hooks/useTranslate';
+import useSetProgress from '../../hooks/useSetProgress';
+import Modal from './elements/Modal';
+import { ReservationCustomFieldLocal } from '../pages/reservations-view/elements/panes/ReservationExtraInformationPane';
+import SelectControl from '../elements/select-control/SelectControl';
+import FileUploader from '../../../webshop/components/elements/file-uploader/FileUploader';
+
+export default function ModalReservationCustomFieldEdit({
+    modal,
+    field,
+    onDone,
+    organization,
+    reservation,
+}: {
+    modal: ModalState;
+    field: ReservationCustomFieldLocal;
+    onDone?: (reservation: Reservation) => void;
+    organization: Organization;
+    reservation: Reservation;
+}) {
+    const translate = useTranslate();
+    const setProgress = useSetProgress();
+    const pushSuccess = usePushSuccess();
+    const pushApiError = usePushApiError();
+
+    const productReservationService = useProductReservationService();
+
+    const customFieldBooleanOptions = useMemo(() => {
+        return [
+            { key: null, name: translate('form.placeholders.select_option') },
+            { key: 'Nee', name: 'Nee' },
+            { key: 'Ja', name: 'Ja' },
+        ];
+    }, [translate]);
+
+    const form = useFormBuilder<{ value: string }>({ value: field.value }, (values) => {
+        setProgress(0);
+
+        productReservationService
+            .updateCustomField(organization.id, reservation.id, field.id, values)
+            .then((res) => {
+                pushSuccess('Opgeslagen!');
+                onDone?.(res.data.data);
+                modal.close();
+            })
+            .catch((err: ResponseError) => {
+                form.setErrors(err?.data?.errors);
+                form.setIsLocked(false);
+                pushApiError(err);
+            })
+            .finally(() => {
+                setProgress(100);
+            });
+    });
+
+    return (
+        <Modal
+            modal={modal}
+            title={translate('modals.modal_reservation_custom_field_edit.title')}
+            onSubmit={form.submit}
+            footer={
+                <Fragment>
+                    <ModalButton
+                        type="default"
+                        button={{ onClick: modal.close }}
+                        text={translate('modals.modal_reservation_custom_field_edit.buttons.cancel')}
+                    />
+                    <ModalButton
+                        type="primary"
+                        button={{ onClick: form.submit }}
+                        dusk="submitBtn"
+                        text={translate('modals.modal_reservation_custom_field_edit.buttons.confirm')}
+                    />
+                </Fragment>
+            }>
+            <FormGroup
+                label={field.label}
+                error={form.errors?.value}
+                info={field.type === 'file' ? null : field.description}
+                input={(id) => (
+                    <Fragment>
+                        {field.type === 'text' && (
+                            <input
+                                id={id}
+                                className="form-control"
+                                value={form.values.value || ''}
+                                onChange={(e) => form.update({ value: e.target.value })}
+                            />
+                        )}
+                        {field.type === 'number' && (
+                            <input
+                                className="form-control"
+                                type="number"
+                                pattern="[0-9]+"
+                                max={999999999999999}
+                                value={form.values.value || ''}
+                                onChange={(e) => form.update({ value: e.target.value })}
+                            />
+                        )}
+                        {field.type === 'boolean' && (
+                            <SelectControl
+                                propKey={'key'}
+                                value={form.values.value}
+                                onChange={(value: string) => form.update({ value })}
+                                options={customFieldBooleanOptions}
+                            />
+                        )}
+                        {field.type === 'file' && (
+                            <FileUploader
+                                type="product_reservation_custom_field"
+                                files={field.file ? [field.file] : []}
+                                template="inline"
+                                cropMedia={false}
+                                allowMultiple={false}
+                                hideDownloadButton={true}
+                                hideInlineTitle={true}
+                                acceptedFiles={['.jpg', '.jpeg', '.png']}
+                                onFilesChange={({ files }) => {
+                                    form.update({ value: files?.[0]?.uid || null });
+                                }}
+                                isRequired={field.required}
+                                isWebshop={false}
+                            />
+                        )}
+                    </Fragment>
+                )}
+            />
+        </Modal>
+    );
+}
diff --git a/react/src/dashboard/components/pages/reservations-view/ReservationsView.tsx b/react/src/dashboard/components/pages/reservations-view/ReservationsView.tsx
index c6520fb75..38dc9ca5f 100644
--- a/react/src/dashboard/components/pages/reservations-view/ReservationsView.tsx
+++ b/react/src/dashboard/components/pages/reservations-view/ReservationsView.tsx
@@ -29,6 +29,8 @@ import { Permission } from '../../../props/models/Organization';
 import { DashboardRoutes } from '../../../modules/state_router/RouterBuilder';
 import BlockCardNotes from '../../elements/block-card-notes/BlockCardNotes';
 import Note from '../../../props/models/Note';
+import useProductService from '../../../services/ProductService';
+import Product from '../../../props/models/Product';
 
 export default function ReservationsView() {
     const { id } = useParams();
@@ -43,14 +45,29 @@ export default function ReservationsView() {
     const pushApiError = usePushApiError();
 
     const transactionService = useTransactionService();
+    const productService = useProductService();
     const productReservationService = useProductReservationService();
 
     const [transaction, setTransaction] = useState<Transaction>(null);
     const [reservation, setReservation] = useState<Reservation>(null);
+    const [product, setProduct] = useState<Product>(null);
 
     const showRejectInfoExtraPaid = useShowRejectInfoExtraPaid();
     const confirmReservationApproval = useConfirmReservationApproval();
 
+    const fetchProduct = useCallback(
+        (id: number) => {
+            setProgress(0);
+
+            productService
+                .read(activeOrganization.id, id)
+                .then((res) => setProduct(res.data.data))
+                .catch(pushApiError)
+                .finally(() => setProgress(100));
+        },
+        [activeOrganization.id, productService, pushApiError, setProgress],
+    );
+
     const fetchTransaction = useCallback(
         (transaction_address: string) => {
             setProgress(0);
@@ -165,6 +182,12 @@ export default function ReservationsView() {
         fetchReservation(parseInt(id));
     }, [fetchReservation, id]);
 
+    useEffect(() => {
+        if (reservation?.product?.id) {
+            fetchProduct(reservation.product.id);
+        }
+    }, [fetchProduct, reservation?.product?.id]);
+
     useEffect(() => {
         if (reservation?.voucher_transaction?.address) {
             fetchTransaction(reservation.voucher_transaction.address);
@@ -230,12 +253,21 @@ export default function ReservationsView() {
                             showName={true}
                         />
 
-                        <ReservationDetailsPane reservation={reservation} />
+                        <ReservationDetailsPane
+                            reservation={reservation}
+                            customFields={reservation.custom_fields.filter(
+                                (field) => field.reservation_field.fillable_by === 'requester',
+                            )}
+                        />
 
                         <ReservationExtraInformationPane
                             organization={activeOrganization}
                             reservation={reservation}
                             setReservation={setReservation}
+                            product={product}
+                            customFields={reservation.custom_fields.filter(
+                                (field) => field.reservation_field.fillable_by === 'provider',
+                            )}
                         />
                     </div>
                 </div>
diff --git a/react/src/dashboard/components/pages/reservations-view/elements/panes/ReservationDetailsPane.tsx b/react/src/dashboard/components/pages/reservations-view/elements/panes/ReservationDetailsPane.tsx
index e4ab4ae0f..a3f5004c7 100644
--- a/react/src/dashboard/components/pages/reservations-view/elements/panes/ReservationDetailsPane.tsx
+++ b/react/src/dashboard/components/pages/reservations-view/elements/panes/ReservationDetailsPane.tsx
@@ -1,13 +1,19 @@
 import React from 'react';
 import useTranslate from '../../../../../hooks/useTranslate';
 import FormPane from '../../../../elements/forms/elements/FormPane';
-import Reservation from '../../../../../props/models/Reservation';
+import Reservation, { ReservationCustomField } from '../../../../../props/models/Reservation';
 import BlockInlineCopy from '../../../../elements/block-inline-copy/BlockInlineCopy';
 import { strLimit } from '../../../../../helpers/string';
 import KeyValueItem from '../../../../elements/key-value/KeyValueItem';
 import FileAttachmentsList from '../../../../elements/FileAttachmentsList';
 
-export default function ReservationDetailsPane({ reservation }: { reservation: Reservation }) {
+export default function ReservationDetailsPane({
+    reservation,
+    customFields,
+}: {
+    reservation: Reservation;
+    customFields: ReservationCustomField[];
+}) {
     const translate = useTranslate();
 
     return (
@@ -31,7 +37,7 @@ export default function ReservationDetailsPane({ reservation }: { reservation: R
                         {reservation.birth_date_locale}
                     </KeyValueItem>
                 )}
-                {reservation.custom_fields?.map((field, index) => (
+                {customFields?.map((field, index) => (
                     <KeyValueItem key={index} label={field.label}>
                         {field.file ? <FileAttachmentsList attachments={[{ file: field.file }]} /> : field.value}
                     </KeyValueItem>
diff --git a/react/src/dashboard/components/pages/reservations-view/elements/panes/ReservationExtraInformationPane.tsx b/react/src/dashboard/components/pages/reservations-view/elements/panes/ReservationExtraInformationPane.tsx
index 71ca3c4d7..3dca9f62f 100644
--- a/react/src/dashboard/components/pages/reservations-view/elements/panes/ReservationExtraInformationPane.tsx
+++ b/react/src/dashboard/components/pages/reservations-view/elements/panes/ReservationExtraInformationPane.tsx
@@ -1,6 +1,6 @@
-import React, { Dispatch, SetStateAction, useCallback } from 'react';
+import React, { Dispatch, SetStateAction, useCallback, useMemo } from 'react';
 import Organization from '../../../../../props/models/Organization';
-import Reservation from '../../../../../props/models/Reservation';
+import Reservation, { ReservationCustomField } from '../../../../../props/models/Reservation';
 import KeyValueItem from '../../../../elements/key-value/KeyValueItem';
 import useOpenModal from '../../../../../hooks/useOpenModal';
 import useTranslate from '../../../../../hooks/useTranslate';
@@ -8,19 +8,46 @@ import ModalReservationInvoiceNumberEdit from '../../../../modals/ModalReservati
 import FormPane from '../../../../elements/forms/elements/FormPane';
 import BlockInlineEdit from '../../../../elements/block-inline-copy/BlockInlineEdit';
 import EmptyValue from '../../../../elements/empty-value/EmptyValue';
+import FileAttachmentsList from '../../../../elements/FileAttachmentsList';
+import ModalReservationCustomFieldEdit from '../../../../modals/ModalReservationCustomFieldEdit';
+import ReservationField from '../../../../../props/models/ReservationField';
+import FileModel from '../../../../../props/models/File';
+import Product from '../../../../../props/models/Product';
+
+export type ReservationCustomFieldLocal = {
+    id: number;
+    type: string;
+    label: string;
+    description?: string;
+    required?: boolean;
+    value?: string;
+    file?: FileModel;
+};
 
 export default function ReservationExtraInformationPane({
     setReservation,
     reservation,
     organization,
+    customFields,
+    product,
 }: {
     setReservation?: Dispatch<SetStateAction<Reservation>>;
     reservation: Reservation;
     organization: Organization;
+    customFields: ReservationCustomField[];
+    product: Product;
 }) {
     const openModal = useOpenModal();
     const translate = useTranslate();
 
+    const availableFields = useMemo(
+        () =>
+            product?.available_reservation_fields_for_provider?.filter(
+                (field) => !customFields.map((i) => i.reservation_field.id).includes(field.id),
+            ),
+        [customFields, product?.available_reservation_fields_for_provider],
+    );
+
     const editInvoiceNumber = useCallback(() => {
         openModal((modal) => (
             <ModalReservationInvoiceNumberEdit
@@ -32,6 +59,55 @@ export default function ReservationExtraInformationPane({
         ));
     }, [setReservation, openModal, reservation, organization]);
 
+    const openEditCustomFieldValueModal = useCallback(
+        (field: ReservationCustomFieldLocal) => {
+            openModal((modal) => (
+                <ModalReservationCustomFieldEdit
+                    modal={modal}
+                    organization={organization}
+                    reservation={reservation}
+                    field={field}
+                    onDone={(reservation) => setReservation(reservation)}
+                />
+            ));
+        },
+        [setReservation, openModal, reservation, organization],
+    );
+
+    const editCustomField = useCallback(
+        (field: ReservationField) => {
+            const customFieldValue = {
+                id: field.id,
+                type: field.type,
+                label: field.label,
+                description: field.description,
+                required: field.required,
+                value: null,
+                file: null,
+            } as ReservationCustomFieldLocal;
+
+            openEditCustomFieldValueModal(customFieldValue);
+        },
+        [openEditCustomFieldValueModal],
+    );
+
+    const editCustomFieldValue = useCallback(
+        (field: ReservationCustomField) => {
+            const customFieldValue = {
+                id: field.reservation_field.id,
+                type: field.reservation_field.type,
+                label: field.reservation_field.label,
+                description: field.reservation_field.description,
+                required: field.reservation_field.required,
+                value: field.value,
+                file: field.file,
+            } as ReservationCustomFieldLocal;
+
+            openEditCustomFieldValueModal(customFieldValue);
+        },
+        [openEditCustomFieldValueModal],
+    );
+
     return (
         <FormPane title={'Extra informatie'} large={true} dusk={'reservationAdditionalDetails'}>
             <div className="card-block card-block-keyvalue card-block-keyvalue-md card-block-keyvalue-text-sm">
@@ -40,6 +116,29 @@ export default function ReservationExtraInformationPane({
                         {reservation.invoice_number || <EmptyValue />}
                     </BlockInlineEdit>
                 </KeyValueItem>
+
+                {customFields?.map((field, index) => (
+                    <KeyValueItem key={index} label={field.label}>
+                        <BlockInlineEdit
+                            onClick={() => editCustomFieldValue(field)}
+                            editDusk={`editCustomFieldBtn${field.id}`}>
+                            {field.file ? (
+                                <FileAttachmentsList attachments={[{ file: field.file }]} />
+                            ) : (
+                                field.value || <EmptyValue />
+                            )}
+                        </BlockInlineEdit>
+                    </KeyValueItem>
+                ))}
+                {availableFields?.map((field, index) => (
+                    <KeyValueItem key={index} label={field.label}>
+                        <BlockInlineEdit
+                            onClick={() => editCustomField(field)}
+                            editDusk={`editCustomFieldBtn${field.id}`}>
+                            <EmptyValue />
+                        </BlockInlineEdit>
+                    </KeyValueItem>
+                ))}
             </div>
         </FormPane>
     );
diff --git a/react/src/dashboard/components/pages/reservations/elements/ReservationFieldItem.tsx b/react/src/dashboard/components/pages/reservations/elements/ReservationFieldItem.tsx
index 79ec0a366..de6ca94c6 100644
--- a/react/src/dashboard/components/pages/reservations/elements/ReservationFieldItem.tsx
+++ b/react/src/dashboard/components/pages/reservations/elements/ReservationFieldItem.tsx
@@ -38,6 +38,11 @@ export default function ReservationFieldItem({
         { key: 'file', name: 'Document upload' },
     ]);
 
+    const [fillableByTypes] = useState([
+        { key: 'provider', name: translate('reservation_settings.fillable_by.provider') },
+        { key: 'requester', name: translate('reservation_settings.fillable_by.requester') },
+    ]);
+
     const askConfirmation = useCallback(
         (onConfirm: () => void) => {
             openModal((modal) => (
@@ -206,6 +211,29 @@ export default function ReservationFieldItem({
                             )}
                         />
 
+                        <FormGroup
+                            label={translate('reservation_settings.labels.fillable_by')}
+                            error={errors['fields.' + index + '.fillable_by']}
+                            info={
+                                <Fragment>
+                                    <p>Fillable by description</p>
+                                </Fragment>
+                            }
+                            input={() => (
+                                <SelectControl
+                                    className="form-control"
+                                    propKey={'key'}
+                                    allowSearch={false}
+                                    value={field.fillable_by}
+                                    onChange={(value: 'requester' | 'provider') => {
+                                        field.fillable_by = value;
+                                        onChange([...fields]);
+                                    }}
+                                    options={fillableByTypes}
+                                />
+                            )}
+                        />
+
                         <CheckboxControl
                             id={`required_${index}`}
                             checked={field.required}
diff --git a/react/src/dashboard/i18n/i18n-nl.js b/react/src/dashboard/i18n/i18n-nl.js
index b9fa980aa..abf0f708f 100644
--- a/react/src/dashboard/i18n/i18n-nl.js
+++ b/react/src/dashboard/i18n/i18n-nl.js
@@ -6,6 +6,16 @@ import block_exception from './nl/blocks/block-exception.json';
 import api_errors from './nl/errors/api';
 
 export default {
+    global: {
+        file_uploader: {
+            title: 'Upload een document',
+            or: 'of',
+            upload_button: 'Upload een document',
+            max_size: 'max. grootte 8Mb',
+            max_files: '*maximaal {{ count }} bestanden',
+            attachments: 'Attachments',
+        },
+    },
     test: '{{name}} {{foo}}',
     permissions: {
         title: 'Geen rechten',
diff --git a/react/src/dashboard/i18n/nl/i18n-modals.js b/react/src/dashboard/i18n/nl/i18n-modals.js
index 72d17998b..c109ddf5a 100644
--- a/react/src/dashboard/i18n/nl/i18n-modals.js
+++ b/react/src/dashboard/i18n/nl/i18n-modals.js
@@ -17,6 +17,7 @@ import modal_feature_contact from './modals/modal-feature-contact';
 import modal_2fa_setup from './modals/modal-2fa-setup';
 import modal_extra_payment_refund from './modals/modal-extra-payment-refund';
 import modal_invoice_number_edit from './modals/modal-invoice-number-edit';
+import modal_reservation_custom_field_edit from './modals/modal-reservation-custom-field-edit';
 
 export default {
     modal_payout_create,
@@ -38,4 +39,5 @@ export default {
     modal_2fa_setup,
     modal_extra_payment_refund,
     modal_invoice_number_edit,
+    modal_reservation_custom_field_edit,
 };
diff --git a/react/src/dashboard/i18n/nl/modals/modal-reservation-custom-field-edit.js b/react/src/dashboard/i18n/nl/modals/modal-reservation-custom-field-edit.js
new file mode 100644
index 000000000..7cb9970f4
--- /dev/null
+++ b/react/src/dashboard/i18n/nl/modals/modal-reservation-custom-field-edit.js
@@ -0,0 +1,7 @@
+export default {
+    title: 'Bewerk',
+    buttons: {
+        cancel: 'Annuleren',
+        confirm: 'Bevestigen',
+    },
+};
diff --git a/react/src/dashboard/i18n/nl/pages/reservations-settings.js b/react/src/dashboard/i18n/nl/pages/reservations-settings.js
index b2b77d755..9b79cb125 100644
--- a/react/src/dashboard/i18n/nl/pages/reservations-settings.js
+++ b/react/src/dashboard/i18n/nl/pages/reservations-settings.js
@@ -15,6 +15,7 @@ export default {
         extra_payments: 'Bijbetaling instellingen',
         reservation_note: 'Aankoopnotitie',
         reservation_note_text: 'Aankoopnotitie tekst',
+        fillable_by: 'Fillable by',
     },
     buttons: {
         cancel: 'Annuleren',
@@ -24,4 +25,8 @@ export default {
         delete: 'Verwijderen',
         add_field: 'Veld toevoegen',
     },
+    fillable_by: {
+        provider: 'Provider',
+        requester: 'Requester',
+    },
 };
diff --git a/react/src/dashboard/props/models/Product.tsx b/react/src/dashboard/props/models/Product.tsx
index 2b8c754ca..cfdd82ae7 100644
--- a/react/src/dashboard/props/models/Product.tsx
+++ b/react/src/dashboard/props/models/Product.tsx
@@ -103,6 +103,7 @@ export default interface Product {
     created_at_locale?: string;
     reservation_fields_config: 'global' | 'no' | 'yes';
     reservation_fields: Array<ReservationField>;
+    available_reservation_fields_for_provider: Array<ReservationField>;
     info_duration?: string;
     info_when?: string;
     info_where?: string;
diff --git a/react/src/dashboard/props/models/Reservation.tsx b/react/src/dashboard/props/models/Reservation.tsx
index af343b57c..156be9502 100644
--- a/react/src/dashboard/props/models/Reservation.tsx
+++ b/react/src/dashboard/props/models/Reservation.tsx
@@ -3,6 +3,21 @@ import Product from './Product';
 import Transaction from './Transaction';
 import FileModel from './File';
 
+export interface ReservationCustomField {
+    id?: number;
+    label: string;
+    value: string;
+    file?: FileModel;
+    reservation_field: {
+        id: number;
+        type?: 'text' | 'number' | 'boolean' | 'file';
+        label?: string;
+        required?: boolean;
+        fillable_by: 'provider' | 'requester';
+        description?: string;
+    };
+}
+
 export default interface Reservation {
     id: number;
     code: string;
@@ -47,11 +62,7 @@ export default interface Reservation {
     acceptable?: boolean;
     rejectable?: boolean;
     cancelable?: boolean;
-    custom_fields?: Array<{
-        label: string;
-        value: string;
-        file?: FileModel;
-    }>;
+    custom_fields?: Array<ReservationCustomField>;
     records_title?: string;
     fund: {
         id: number;
diff --git a/react/src/dashboard/props/models/ReservationField.tsx b/react/src/dashboard/props/models/ReservationField.tsx
index 5df3a3700..e8fb56d34 100644
--- a/react/src/dashboard/props/models/ReservationField.tsx
+++ b/react/src/dashboard/props/models/ReservationField.tsx
@@ -7,4 +7,5 @@ export default interface ReservationField {
     description: string;
     required: boolean;
     order?: number;
+    fillable_by?: 'provider' | 'requester';
 }
diff --git a/react/src/dashboard/services/ProductReservationService.ts b/react/src/dashboard/services/ProductReservationService.ts
index ec0a2a6e2..887734f37 100644
--- a/react/src/dashboard/services/ProductReservationService.ts
+++ b/react/src/dashboard/services/ProductReservationService.ts
@@ -89,6 +89,18 @@ export class ProductReservationService<T = Reservation> {
         return this.apiRequest.patch(`${this.prefix}/${organization_id}/product-reservations/${id}`, data);
     }
 
+    public updateCustomField(
+        organization_id: number,
+        reservation_id: number,
+        id: number,
+        data = {},
+    ): Promise<ApiResponseSingle<T>> {
+        return this.apiRequest.patch(
+            `${this.prefix}/${organization_id}/product-reservations/${reservation_id}/fields/${id}`,
+            data,
+        );
+    }
+
     public sampleCsvProductReservations = (product_id = '') => {
         const headers = ['number', 'product_id'];
         const values = ['000000000000', product_id];
diff --git a/react/src/webshop/components/elements/file-uploader/FileUploader.tsx b/react/src/webshop/components/elements/file-uploader/FileUploader.tsx
index 4922f4a87..9f4c8d091 100644
--- a/react/src/webshop/components/elements/file-uploader/FileUploader.tsx
+++ b/react/src/webshop/components/elements/file-uploader/FileUploader.tsx
@@ -4,6 +4,7 @@ import FileModel from '../../../../dashboard/props/models/File';
 import useOpenModal from '../../../../dashboard/hooks/useOpenModal';
 import ModalPhotoCropper from '../../modals/modal-photo-cropper/ModalPhotoCropper';
 import FileUploaderItemView from './FileUploaderItemView';
+import DashboardFileUploaderItemView from '../../../../dashboard/components/elements/file-uploader/FileUploaderItemView';
 import usePushInfo from '../../../../dashboard/hooks/usePushInfo';
 import { uniqueId } from 'lodash';
 import { ResponseError } from '../../../../dashboard/props/ApiResponses';
@@ -58,6 +59,7 @@ export default function FileUploader({
     hidePreviewButton = false,
     hideDownloadButton = false,
     isRequired = false,
+    isWebshop = true,
 }: {
     type:
         | 'fund_request_clarification_proof'
@@ -76,6 +78,7 @@ export default function FileUploader({
     hidePreviewButton?: boolean;
     hideDownloadButton?: boolean;
     isRequired?: boolean;
+    isWebshop?: boolean;
 } & FileItemEventsListener) {
     const fileService = useFileService();
 
@@ -369,17 +372,28 @@ export default function FileUploader({
                         </div>
                     )}
 
-                    {fileItems?.map((file) => (
-                        <FileUploaderItemView
-                            key={file.id}
-                            item={file}
-                            template={template}
-                            hidePreviewButton={hidePreviewButton}
-                            hideDownloadButton={hideDownloadButton}
-                            readOnly={readOnly}
-                            removeFile={removeFile}
-                        />
-                    ))}
+                    {fileItems?.map((file) =>
+                        isWebshop ? (
+                            <FileUploaderItemView
+                                key={file.id}
+                                item={file}
+                                template={template}
+                                hidePreviewButton={hidePreviewButton}
+                                hideDownloadButton={hideDownloadButton}
+                                readOnly={readOnly}
+                                removeFile={removeFile}
+                            />
+                        ) : (
+                            <DashboardFileUploaderItemView
+                                key={file.id}
+                                item={file}
+                                hidePreviewButton={hidePreviewButton}
+                                hideDownloadButton={hideDownloadButton}
+                                readOnly={readOnly}
+                                removeFile={removeFile}
+                            />
+                        ),
+                    )}
                 </div>
             )}
         </div>
diff --git a/react/src/webshop/components/pages/reservations-show/ReservationsShow.tsx b/react/src/webshop/components/pages/reservations-show/ReservationsShow.tsx
index 69704f6aa..033361651 100644
--- a/react/src/webshop/components/pages/reservations-show/ReservationsShow.tsx
+++ b/react/src/webshop/components/pages/reservations-show/ReservationsShow.tsx
@@ -382,24 +382,26 @@ export default function ReservationsShow() {
                                         <div className="key-value-list-item-value">{reservation.birth_date_locale}</div>
                                     </div>
                                 )}
-                                {reservation.custom_fields?.map((field, idx) => (
-                                    <div className="block-key-value-list-item" key={`${field.label}-${idx}`}>
-                                        <div className="key-value-list-item-label">{field.label}</div>
-                                        <div className="key-value-list-item-value">
-                                            {field.file ? (
-                                                <FileUploader
-                                                    type="product_reservation_custom_field"
-                                                    files={[field.file]}
-                                                    template="compact"
-                                                    readOnly={true}
-                                                    hideDownloadButton={true}
-                                                />
-                                            ) : (
-                                                field.value || '-'
-                                            )}
+                                {reservation.custom_fields
+                                    ?.filter((field) => field.reservation_field.fillable_by === 'requester')
+                                    .map((field, idx) => (
+                                        <div className="block-key-value-list-item" key={`${field.label}-${idx}`}>
+                                            <div className="key-value-list-item-label">{field.label}</div>
+                                            <div className="key-value-list-item-value">
+                                                {field.file ? (
+                                                    <FileUploader
+                                                        type="product_reservation_custom_field"
+                                                        files={[field.file]}
+                                                        template="compact"
+                                                        readOnly={true}
+                                                        hideDownloadButton={true}
+                                                    />
+                                                ) : (
+                                                    field.value || '-'
+                                                )}
+                                            </div>
                                         </div>
-                                    </div>
-                                ))}
+                                    ))}
                                 {reservation.user_note && (
                                     <div className="block-key-value-list-item">
                                         <div className="key-value-list-item-label">
@@ -412,6 +414,40 @@ export default function ReservationsShow() {
                         </div>
                     </div>
 
+                    <div className="card">
+                        <div className="card-header">
+                            <div className="card-header-wrapper">
+                                <h2 className="card-heading card-heading-lg">
+                                    {translate('reservation.details.reservation_fields_for_provider_title')}
+                                </h2>
+                            </div>
+                        </div>
+                        <div className="card-section">
+                            <div className="block block-key-value-list">
+                                {reservation.custom_fields
+                                    ?.filter((field) => field.reservation_field.fillable_by === 'provider')
+                                    .map((field, idx) => (
+                                        <div className="block-key-value-list-item" key={`${field.label}-${idx}`}>
+                                            <div className="key-value-list-item-label">{field.label}</div>
+                                            <div className="key-value-list-item-value">
+                                                {field.file ? (
+                                                    <FileUploader
+                                                        type="product_reservation_custom_field"
+                                                        files={[field.file]}
+                                                        template="compact"
+                                                        readOnly={true}
+                                                        hideDownloadButton={true}
+                                                    />
+                                                ) : (
+                                                    field.value || '-'
+                                                )}
+                                            </div>
+                                        </div>
+                                    ))}
+                            </div>
+                        </div>
+                    </div>
+
                     {reservation?.extra_payment?.refunds?.length > 0 && (
                         <div className={classNames(`card card-collapsable`, showReservationRefunds && 'open')}>
                             <div
diff --git a/react/src/webshop/i18n/nl/pages/reservation.mjs b/react/src/webshop/i18n/nl/pages/reservation.mjs
index 49d471ffd..84cbaab93 100644
--- a/react/src/webshop/i18n/nl/pages/reservation.mjs
+++ b/react/src/webshop/i18n/nl/pages/reservation.mjs
@@ -4,6 +4,7 @@ export default {
         title: 'Details van de reservering',
         loading: 'Loading',
         reservation_fields_title: 'Gegevens',
+        reservation_fields_for_provider_title: 'Toegevoegd door aanbieder',
         labels: {
             id: 'ID',
             title: 'Titel',

From 595498ab690e1f928cc0a1b897d03adbfa368bf3 Mon Sep 17 00:00:00 2001
From: dev-rminds <dev@rminds.nl>
Date: Fri, 5 Dec 2025 04:02:20 +0200
Subject: [PATCH 08/13] reservation custom fields for provider refactoring and
 ability to remove previously attached custom field file

---
 .../ModalReservationCustomFieldEdit.tsx       | 12 +--
 .../reservations-view/ReservationsView.tsx    |  4 +-
 .../elements/panes/ReservationDetailsPane.tsx |  6 +-
 .../panes/ReservationExtraInformationPane.tsx | 36 +++------
 .../elements/ReservationFieldItem.tsx         | 20 ++---
 .../elements/ReservationFieldsEditor.tsx      |  1 +
 react/src/dashboard/i18n/i18n-nl.js           |  2 +-
 .../dashboard/props/models/Reservation.tsx    | 17 ++---
 .../reservations-show/ReservationsShow.tsx    | 76 ++++++++++---------
 react/src/webshop/i18n/i18n-nl.mjs            |  2 +-
 react/src/webshop/i18n/translated/ar.json     |  5 +-
 react/src/webshop/i18n/translated/de.json     |  5 +-
 react/src/webshop/i18n/translated/en-US.json  |  5 +-
 react/src/webshop/i18n/translated/fr.json     |  5 +-
 react/src/webshop/i18n/translated/pl.json     |  5 +-
 react/src/webshop/i18n/translated/ru.json     |  5 +-
 react/src/webshop/i18n/translated/tr.json     |  5 +-
 react/src/webshop/i18n/translated/uk.json     |  5 +-
 translations/cache/cache.json                 |  6 +-
 19 files changed, 114 insertions(+), 108 deletions(-)

diff --git a/react/src/dashboard/components/modals/ModalReservationCustomFieldEdit.tsx b/react/src/dashboard/components/modals/ModalReservationCustomFieldEdit.tsx
index 8964f1e05..0963e2a6c 100644
--- a/react/src/dashboard/components/modals/ModalReservationCustomFieldEdit.tsx
+++ b/react/src/dashboard/components/modals/ModalReservationCustomFieldEdit.tsx
@@ -12,9 +12,10 @@ import { ResponseError } from '../../props/ApiResponses';
 import useTranslate from '../../hooks/useTranslate';
 import useSetProgress from '../../hooks/useSetProgress';
 import Modal from './elements/Modal';
-import { ReservationCustomFieldLocal } from '../pages/reservations-view/elements/panes/ReservationExtraInformationPane';
 import SelectControl from '../elements/select-control/SelectControl';
 import FileUploader from '../../../webshop/components/elements/file-uploader/FileUploader';
+import FileModel from '../../props/models/File';
+import ReservationField from '../../props/models/ReservationField';
 
 export default function ModalReservationCustomFieldEdit({
     modal,
@@ -24,7 +25,7 @@ export default function ModalReservationCustomFieldEdit({
     reservation,
 }: {
     modal: ModalState;
-    field: ReservationCustomFieldLocal;
+    field: ReservationField & { value?: string; file?: FileModel };
     onDone?: (reservation: Reservation) => void;
     organization: Organization;
     reservation: Reservation;
@@ -98,6 +99,7 @@ export default function ModalReservationCustomFieldEdit({
                                 onChange={(e) => form.update({ value: e.target.value })}
                             />
                         )}
+
                         {field.type === 'number' && (
                             <input
                                 className="form-control"
@@ -108,6 +110,7 @@ export default function ModalReservationCustomFieldEdit({
                                 onChange={(e) => form.update({ value: e.target.value })}
                             />
                         )}
+
                         {field.type === 'boolean' && (
                             <SelectControl
                                 propKey={'key'}
@@ -116,6 +119,7 @@ export default function ModalReservationCustomFieldEdit({
                                 options={customFieldBooleanOptions}
                             />
                         )}
+
                         {field.type === 'file' && (
                             <FileUploader
                                 type="product_reservation_custom_field"
@@ -126,9 +130,7 @@ export default function ModalReservationCustomFieldEdit({
                                 hideDownloadButton={true}
                                 hideInlineTitle={true}
                                 acceptedFiles={['.jpg', '.jpeg', '.png']}
-                                onFilesChange={({ files }) => {
-                                    form.update({ value: files?.[0]?.uid || null });
-                                }}
+                                onFilesChange={({ files }) => form.update({ value: files?.[0]?.uid || null })}
                                 isRequired={field.required}
                                 isWebshop={false}
                             />
diff --git a/react/src/dashboard/components/pages/reservations-view/ReservationsView.tsx b/react/src/dashboard/components/pages/reservations-view/ReservationsView.tsx
index 38dc9ca5f..317ab2b16 100644
--- a/react/src/dashboard/components/pages/reservations-view/ReservationsView.tsx
+++ b/react/src/dashboard/components/pages/reservations-view/ReservationsView.tsx
@@ -183,10 +183,10 @@ export default function ReservationsView() {
     }, [fetchReservation, id]);
 
     useEffect(() => {
-        if (reservation?.product?.id) {
+        if (reservation?.product?.id && !reservation?.product?.deleted) {
             fetchProduct(reservation.product.id);
         }
-    }, [fetchProduct, reservation?.product?.id]);
+    }, [fetchProduct, reservation?.product?.deleted, reservation?.product?.id]);
 
     useEffect(() => {
         if (reservation?.voucher_transaction?.address) {
diff --git a/react/src/dashboard/components/pages/reservations-view/elements/panes/ReservationDetailsPane.tsx b/react/src/dashboard/components/pages/reservations-view/elements/panes/ReservationDetailsPane.tsx
index a3f5004c7..bfe7c9a0b 100644
--- a/react/src/dashboard/components/pages/reservations-view/elements/panes/ReservationDetailsPane.tsx
+++ b/react/src/dashboard/components/pages/reservations-view/elements/panes/ReservationDetailsPane.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import useTranslate from '../../../../../hooks/useTranslate';
 import FormPane from '../../../../elements/forms/elements/FormPane';
-import Reservation, { ReservationCustomField } from '../../../../../props/models/Reservation';
+import Reservation, { ReservationCustomFieldValue } from '../../../../../props/models/Reservation';
 import BlockInlineCopy from '../../../../elements/block-inline-copy/BlockInlineCopy';
 import { strLimit } from '../../../../../helpers/string';
 import KeyValueItem from '../../../../elements/key-value/KeyValueItem';
@@ -12,7 +12,7 @@ export default function ReservationDetailsPane({
     customFields,
 }: {
     reservation: Reservation;
-    customFields: ReservationCustomField[];
+    customFields: ReservationCustomFieldValue[];
 }) {
     const translate = useTranslate();
 
@@ -38,7 +38,7 @@ export default function ReservationDetailsPane({
                     </KeyValueItem>
                 )}
                 {customFields?.map((field, index) => (
-                    <KeyValueItem key={index} label={field.label}>
+                    <KeyValueItem key={index} label={field.reservation_field.label}>
                         {field.file ? <FileAttachmentsList attachments={[{ file: field.file }]} /> : field.value}
                     </KeyValueItem>
                 ))}
diff --git a/react/src/dashboard/components/pages/reservations-view/elements/panes/ReservationExtraInformationPane.tsx b/react/src/dashboard/components/pages/reservations-view/elements/panes/ReservationExtraInformationPane.tsx
index 3dca9f62f..37f70e1d1 100644
--- a/react/src/dashboard/components/pages/reservations-view/elements/panes/ReservationExtraInformationPane.tsx
+++ b/react/src/dashboard/components/pages/reservations-view/elements/panes/ReservationExtraInformationPane.tsx
@@ -1,6 +1,6 @@
 import React, { Dispatch, SetStateAction, useCallback, useMemo } from 'react';
 import Organization from '../../../../../props/models/Organization';
-import Reservation, { ReservationCustomField } from '../../../../../props/models/Reservation';
+import Reservation, { ReservationCustomFieldValue } from '../../../../../props/models/Reservation';
 import KeyValueItem from '../../../../elements/key-value/KeyValueItem';
 import useOpenModal from '../../../../../hooks/useOpenModal';
 import useTranslate from '../../../../../hooks/useTranslate';
@@ -11,18 +11,8 @@ import EmptyValue from '../../../../elements/empty-value/EmptyValue';
 import FileAttachmentsList from '../../../../elements/FileAttachmentsList';
 import ModalReservationCustomFieldEdit from '../../../../modals/ModalReservationCustomFieldEdit';
 import ReservationField from '../../../../../props/models/ReservationField';
-import FileModel from '../../../../../props/models/File';
 import Product from '../../../../../props/models/Product';
-
-export type ReservationCustomFieldLocal = {
-    id: number;
-    type: string;
-    label: string;
-    description?: string;
-    required?: boolean;
-    value?: string;
-    file?: FileModel;
-};
+import FileModel from '../../../../../props/models/File';
 
 export default function ReservationExtraInformationPane({
     setReservation,
@@ -34,7 +24,7 @@ export default function ReservationExtraInformationPane({
     setReservation?: Dispatch<SetStateAction<Reservation>>;
     reservation: Reservation;
     organization: Organization;
-    customFields: ReservationCustomField[];
+    customFields: ReservationCustomFieldValue[];
     product: Product;
 }) {
     const openModal = useOpenModal();
@@ -60,7 +50,7 @@ export default function ReservationExtraInformationPane({
     }, [setReservation, openModal, reservation, organization]);
 
     const openEditCustomFieldValueModal = useCallback(
-        (field: ReservationCustomFieldLocal) => {
+        (field: ReservationField & { value?: string; file?: FileModel }) => {
             openModal((modal) => (
                 <ModalReservationCustomFieldEdit
                     modal={modal}
@@ -76,7 +66,7 @@ export default function ReservationExtraInformationPane({
 
     const editCustomField = useCallback(
         (field: ReservationField) => {
-            const customFieldValue = {
+            openEditCustomFieldValueModal({
                 id: field.id,
                 type: field.type,
                 label: field.label,
@@ -84,16 +74,14 @@ export default function ReservationExtraInformationPane({
                 required: field.required,
                 value: null,
                 file: null,
-            } as ReservationCustomFieldLocal;
-
-            openEditCustomFieldValueModal(customFieldValue);
+            });
         },
         [openEditCustomFieldValueModal],
     );
 
     const editCustomFieldValue = useCallback(
-        (field: ReservationCustomField) => {
-            const customFieldValue = {
+        (field: ReservationCustomFieldValue) => {
+            openEditCustomFieldValueModal({
                 id: field.reservation_field.id,
                 type: field.reservation_field.type,
                 label: field.reservation_field.label,
@@ -101,9 +89,7 @@ export default function ReservationExtraInformationPane({
                 required: field.reservation_field.required,
                 value: field.value,
                 file: field.file,
-            } as ReservationCustomFieldLocal;
-
-            openEditCustomFieldValueModal(customFieldValue);
+            });
         },
         [openEditCustomFieldValueModal],
     );
@@ -118,9 +104,10 @@ export default function ReservationExtraInformationPane({
                 </KeyValueItem>
 
                 {customFields?.map((field, index) => (
-                    <KeyValueItem key={index} label={field.label}>
+                    <KeyValueItem key={index} label={field.reservation_field.label}>
                         <BlockInlineEdit
                             onClick={() => editCustomFieldValue(field)}
+                            className={field.file ? 'flex flex-grow' : null}
                             editDusk={`editCustomFieldBtn${field.id}`}>
                             {field.file ? (
                                 <FileAttachmentsList attachments={[{ file: field.file }]} />
@@ -130,6 +117,7 @@ export default function ReservationExtraInformationPane({
                         </BlockInlineEdit>
                     </KeyValueItem>
                 ))}
+
                 {availableFields?.map((field, index) => (
                     <KeyValueItem key={index} label={field.label}>
                         <BlockInlineEdit
diff --git a/react/src/dashboard/components/pages/reservations/elements/ReservationFieldItem.tsx b/react/src/dashboard/components/pages/reservations/elements/ReservationFieldItem.tsx
index de6ca94c6..09577fc6a 100644
--- a/react/src/dashboard/components/pages/reservations/elements/ReservationFieldItem.tsx
+++ b/react/src/dashboard/components/pages/reservations/elements/ReservationFieldItem.tsx
@@ -234,15 +234,17 @@ export default function ReservationFieldItem({
                             )}
                         />
 
-                        <CheckboxControl
-                            id={`required_${index}`}
-                            checked={field.required}
-                            onChange={(e) => {
-                                field.required = e.target.checked;
-                                onChange([...fields]);
-                            }}
-                            title={translate('reservation_settings.labels.required')}
-                        />
+                        {field.fillable_by === 'requester' && (
+                            <CheckboxControl
+                                id={`required_${index}`}
+                                checked={field.required}
+                                onChange={(e) => {
+                                    field.required = e.target.checked;
+                                    onChange([...fields]);
+                                }}
+                                title={translate('reservation_settings.labels.required')}
+                            />
+                        )}
                     </FormPane>
                 </div>
             )}
diff --git a/react/src/dashboard/components/pages/reservations/elements/ReservationFieldsEditor.tsx b/react/src/dashboard/components/pages/reservations/elements/ReservationFieldsEditor.tsx
index d441efb0a..02855ba42 100644
--- a/react/src/dashboard/components/pages/reservations/elements/ReservationFieldsEditor.tsx
+++ b/react/src/dashboard/components/pages/reservations/elements/ReservationFieldsEditor.tsx
@@ -41,6 +41,7 @@ export default function ReservationFieldsEditor({
                 required: false,
                 expanded: true,
                 description: '',
+                fillable_by: 'requester',
                 uid: uniqueId(),
             },
         ]);
diff --git a/react/src/dashboard/i18n/i18n-nl.js b/react/src/dashboard/i18n/i18n-nl.js
index abf0f708f..a6789cb5f 100644
--- a/react/src/dashboard/i18n/i18n-nl.js
+++ b/react/src/dashboard/i18n/i18n-nl.js
@@ -12,7 +12,7 @@ export default {
             or: 'of',
             upload_button: 'Upload een document',
             max_size: 'max. grootte 8Mb',
-            max_files: '*maximaal {{ count }} bestanden',
+            max_files: 'maximaal {{ count }} bestanden',
             attachments: 'Attachments',
         },
     },
diff --git a/react/src/dashboard/props/models/Reservation.tsx b/react/src/dashboard/props/models/Reservation.tsx
index 156be9502..74071790d 100644
--- a/react/src/dashboard/props/models/Reservation.tsx
+++ b/react/src/dashboard/props/models/Reservation.tsx
@@ -2,20 +2,13 @@ import ExtraPayment from './ExtraPayment';
 import Product from './Product';
 import Transaction from './Transaction';
 import FileModel from './File';
+import ReservationField from './ReservationField';
 
-export interface ReservationCustomField {
+export interface ReservationCustomFieldValue {
     id?: number;
-    label: string;
-    value: string;
+    value?: string;
     file?: FileModel;
-    reservation_field: {
-        id: number;
-        type?: 'text' | 'number' | 'boolean' | 'file';
-        label?: string;
-        required?: boolean;
-        fillable_by: 'provider' | 'requester';
-        description?: string;
-    };
+    reservation_field: ReservationField;
 }
 
 export default interface Reservation {
@@ -62,7 +55,7 @@ export default interface Reservation {
     acceptable?: boolean;
     rejectable?: boolean;
     cancelable?: boolean;
-    custom_fields?: Array<ReservationCustomField>;
+    custom_fields?: Array<ReservationCustomFieldValue>;
     records_title?: string;
     fund: {
         id: number;
diff --git a/react/src/webshop/components/pages/reservations-show/ReservationsShow.tsx b/react/src/webshop/components/pages/reservations-show/ReservationsShow.tsx
index 033361651..45aa048b1 100644
--- a/react/src/webshop/components/pages/reservations-show/ReservationsShow.tsx
+++ b/react/src/webshop/components/pages/reservations-show/ReservationsShow.tsx
@@ -43,6 +43,14 @@ export default function ReservationsShow() {
         return reservation ? composeStateAndExpires(reservation) : null;
     }, [reservation, composeStateAndExpires]);
 
+    const requesterCustomFields = useMemo(() => {
+        return reservation?.custom_fields?.filter((field) => field.reservation_field.fillable_by === 'requester');
+    }, [reservation?.custom_fields]);
+
+    const providerCustomFields = useMemo(() => {
+        return reservation?.custom_fields?.filter((field) => field.reservation_field.fillable_by === 'provider');
+    }, [reservation?.custom_fields]);
+
     const fetchReservation = useCallback(async () => {
         setProgress(0);
 
@@ -382,26 +390,24 @@ export default function ReservationsShow() {
                                         <div className="key-value-list-item-value">{reservation.birth_date_locale}</div>
                                     </div>
                                 )}
-                                {reservation.custom_fields
-                                    ?.filter((field) => field.reservation_field.fillable_by === 'requester')
-                                    .map((field, idx) => (
-                                        <div className="block-key-value-list-item" key={`${field.label}-${idx}`}>
-                                            <div className="key-value-list-item-label">{field.label}</div>
-                                            <div className="key-value-list-item-value">
-                                                {field.file ? (
-                                                    <FileUploader
-                                                        type="product_reservation_custom_field"
-                                                        files={[field.file]}
-                                                        template="compact"
-                                                        readOnly={true}
-                                                        hideDownloadButton={true}
-                                                    />
-                                                ) : (
-                                                    field.value || '-'
-                                                )}
-                                            </div>
+                                {requesterCustomFields?.map((field, idx) => (
+                                    <div className="block-key-value-list-item" key={`${field.id}-${idx}`}>
+                                        <div className="key-value-list-item-label">{field.reservation_field.label}</div>
+                                        <div className="key-value-list-item-value">
+                                            {field.file ? (
+                                                <FileUploader
+                                                    type="product_reservation_custom_field"
+                                                    files={[field.file]}
+                                                    template="compact"
+                                                    readOnly={true}
+                                                    hideDownloadButton={true}
+                                                />
+                                            ) : (
+                                                field.value || '-'
+                                            )}
                                         </div>
-                                    ))}
+                                    </div>
+                                ))}
                                 {reservation.user_note && (
                                     <div className="block-key-value-list-item">
                                         <div className="key-value-list-item-label">
@@ -414,21 +420,22 @@ export default function ReservationsShow() {
                         </div>
                     </div>
 
-                    <div className="card">
-                        <div className="card-header">
-                            <div className="card-header-wrapper">
-                                <h2 className="card-heading card-heading-lg">
-                                    {translate('reservation.details.reservation_fields_for_provider_title')}
-                                </h2>
+                    {providerCustomFields?.length > 0 && (
+                        <div className="card">
+                            <div className="card-header">
+                                <div className="card-header-wrapper">
+                                    <h2 className="card-heading card-heading-lg">
+                                        {translate('reservation.details.reservation_fields_for_provider_title')}
+                                    </h2>
+                                </div>
                             </div>
-                        </div>
-                        <div className="card-section">
-                            <div className="block block-key-value-list">
-                                {reservation.custom_fields
-                                    ?.filter((field) => field.reservation_field.fillable_by === 'provider')
-                                    .map((field, idx) => (
-                                        <div className="block-key-value-list-item" key={`${field.label}-${idx}`}>
-                                            <div className="key-value-list-item-label">{field.label}</div>
+                            <div className="card-section">
+                                <div className="block block-key-value-list">
+                                    {providerCustomFields?.map((field, idx) => (
+                                        <div className="block-key-value-list-item" key={`${field.id}-${idx}`}>
+                                            <div className="key-value-list-item-label">
+                                                {field.reservation_field.label}
+                                            </div>
                                             <div className="key-value-list-item-value">
                                                 {field.file ? (
                                                     <FileUploader
@@ -444,9 +451,10 @@ export default function ReservationsShow() {
                                             </div>
                                         </div>
                                     ))}
+                                </div>
                             </div>
                         </div>
-                    </div>
+                    )}
 
                     {reservation?.extra_payment?.refunds?.length > 0 && (
                         <div className={classNames(`card card-collapsable`, showReservationRefunds && 'open')}>
diff --git a/react/src/webshop/i18n/i18n-nl.mjs b/react/src/webshop/i18n/i18n-nl.mjs
index bade2a45a..502aa6da5 100644
--- a/react/src/webshop/i18n/i18n-nl.mjs
+++ b/react/src/webshop/i18n/i18n-nl.mjs
@@ -317,7 +317,7 @@ export default {
             or: 'of',
             upload_button: 'Upload een document',
             max_size: 'max. grootte 8Mb',
-            max_files: '*maximaal {{ count }} bestanden',
+            max_files: 'maximaal {{ count }} bestanden',
             attachments: 'Attachments',
         },
         file_item: {
diff --git a/react/src/webshop/i18n/translated/ar.json b/react/src/webshop/i18n/translated/ar.json
index 3582ffa8f..3af990a49 100644
--- a/react/src/webshop/i18n/translated/ar.json
+++ b/react/src/webshop/i18n/translated/ar.json
@@ -179,7 +179,7 @@
             "or": "أو",
             "title": "تحميل مستند",
             "upload_button": "تحميل مستند",
-            "max_files": "*ماكس {{ count }} الملفات"
+            "max_files": "ما يصل إلى {{ count }} الملفات"
         },
         "info_box": {
             "2fa_description": "لمزيد من المعلومات حول المصادقة الثنائية (2FA)، تفضل بزيارتنا:",
@@ -2668,7 +2668,8 @@
             },
             "loading": "التحميل",
             "title": "تفاصيل الحجز",
-            "reservation_fields_title": "البيانات"
+            "reservation_fields_title": "البيانات",
+            "reservation_fields_for_provider_title": "تمت الإضافة من قبل المزود"
         },
         "expired": "عذرًا، تم إلغاء حجزك أثناء عملية الدفع لأن المنتج المحدد تم بيعه بالكامل.",
         "extra_amount_refund": {
diff --git a/react/src/webshop/i18n/translated/de.json b/react/src/webshop/i18n/translated/de.json
index 5a51d0c9c..d56ea4a67 100644
--- a/react/src/webshop/i18n/translated/de.json
+++ b/react/src/webshop/i18n/translated/de.json
@@ -872,7 +872,7 @@
             "or": "oder",
             "title": "Ein Dokument hochladen",
             "upload_button": "Ein Dokument hochladen",
-            "max_files": "*maximal {{ count }} Dateien"
+            "max_files": "bis zu {{ count }} Dateien"
         },
         "info_box": {
             "2fa_description": "Weitere Informationen über 2FA finden Sie bei uns:",
@@ -2728,7 +2728,8 @@
             },
             "loading": "Laden",
             "title": "Details zur Buchung",
-            "reservation_fields_title": "Daten"
+            "reservation_fields_title": "Daten",
+            "reservation_fields_for_provider_title": "Hinzugefügt von Anbieter"
         },
         "expired": "Ihre Reservierung wurde leider während des Bestellvorgangs storniert, da das ausgewählte Produkt ausverkauft ist.",
         "extra_amount_refund": {
diff --git a/react/src/webshop/i18n/translated/en-US.json b/react/src/webshop/i18n/translated/en-US.json
index f47b9f809..18a30fdf7 100644
--- a/react/src/webshop/i18n/translated/en-US.json
+++ b/react/src/webshop/i18n/translated/en-US.json
@@ -2795,7 +2795,8 @@
             },
             "loading": "Loading",
             "title": "Reservation details",
-            "reservation_fields_title": "Data"
+            "reservation_fields_title": "Data",
+            "reservation_fields_for_provider_title": "Added by provider"
         },
         "expired": "Sorry, your reservation was canceled during the checkout process because the selected product is sold out.",
         "extra_amount_refund": {
@@ -3039,7 +3040,7 @@
             "or": "or",
             "title": "Upload a document",
             "upload_button": "Upload a document",
-            "max_files": "*max {{ count }} files"
+            "max_files": "maximum {{ count }} files"
         },
         "info_box": {
             "2fa_description": "For more information on 2FA, check us out:",
diff --git a/react/src/webshop/i18n/translated/fr.json b/react/src/webshop/i18n/translated/fr.json
index 3d3b400c9..c2a4d18b2 100644
--- a/react/src/webshop/i18n/translated/fr.json
+++ b/react/src/webshop/i18n/translated/fr.json
@@ -872,7 +872,7 @@
             "or": "ou",
             "title": "Télécharger un document",
             "upload_button": "Télécharger un document",
-            "max_files": "*maximum {{ count }} files"
+            "max_files": "jusqu'à {{ count }} fichiers"
         },
         "info_box": {
             "2fa_description": "Pour plus d'informations sur le 2FA, visitez notre site :",
@@ -2728,7 +2728,8 @@
             },
             "loading": "Chargement",
             "title": "Détails de la réservation",
-            "reservation_fields_title": "Données"
+            "reservation_fields_title": "Données",
+            "reservation_fields_for_provider_title": "Ajouté par le fournisseur"
         },
         "expired": "Désolé, votre réservation a été annulée pendant le processus de paiement car le produit sélectionné est épuisé.",
         "extra_amount_refund": {
diff --git a/react/src/webshop/i18n/translated/pl.json b/react/src/webshop/i18n/translated/pl.json
index 029a8b463..d1167d2e2 100644
--- a/react/src/webshop/i18n/translated/pl.json
+++ b/react/src/webshop/i18n/translated/pl.json
@@ -872,7 +872,7 @@
             "or": "lub",
             "title": "Prześlij dokument",
             "upload_button": "Prześlij dokument",
-            "max_files": "*maksymalna liczba plików {{ count }} "
+            "max_files": "do {{ count }} plików"
         },
         "info_box": {
             "2fa_description": "Aby uzyskać więcej informacji na temat 2FA, odwiedź naszą stronę:",
@@ -2728,7 +2728,8 @@
             },
             "loading": "Ładowanie",
             "title": "Szczegóły rezerwacji",
-            "reservation_fields_title": "Dane"
+            "reservation_fields_title": "Dane",
+            "reservation_fields_for_provider_title": "Dodany przez dostawcę"
         },
         "expired": "Przepraszamy, rezerwacja została anulowana podczas procesu realizacji zakupu, ponieważ wybrany produkt został wyprzedany.",
         "extra_amount_refund": {
diff --git a/react/src/webshop/i18n/translated/ru.json b/react/src/webshop/i18n/translated/ru.json
index 3aeb45d9a..f29c1c40b 100644
--- a/react/src/webshop/i18n/translated/ru.json
+++ b/react/src/webshop/i18n/translated/ru.json
@@ -872,7 +872,7 @@
             "or": "или",
             "title": "Загрузить документ",
             "upload_button": "Загрузить документ",
-            "max_files": "*максимум {{ count }} файлов"
+            "max_files": "до {{ count }} файлов"
         },
         "info_box": {
             "2fa_description": "Для получения дополнительной информации о 2FA посетите наш сайт:",
@@ -2728,7 +2728,8 @@
             },
             "loading": "Загрузка",
             "title": "Детали бронирования",
-            "reservation_fields_title": "Данные"
+            "reservation_fields_title": "Данные",
+            "reservation_fields_for_provider_title": "Добавлено провайдером"
         },
         "expired": "Извините, ваше бронирование было отменено в процессе оформления заказа, поскольку выбранный товар распродан.",
         "extra_amount_refund": {
diff --git a/react/src/webshop/i18n/translated/tr.json b/react/src/webshop/i18n/translated/tr.json
index e2b89ca02..54023b6e1 100644
--- a/react/src/webshop/i18n/translated/tr.json
+++ b/react/src/webshop/i18n/translated/tr.json
@@ -179,7 +179,7 @@
             "or": "veya",
             "title": "Bir belge yükleyin",
             "upload_button": "Bir belge yükleyin",
-            "max_files": "*max {{ count }} dosyaları"
+            "max_files": "{{ count }} adresine kadar dosyalar"
         },
         "info_box": {
             "2fa_description": "2FA hakkında daha fazla bilgi için bizi ziyaret edin:",
@@ -2668,7 +2668,8 @@
             },
             "loading": "Yükleniyor",
             "title": "Rezervasyon detayları",
-            "reservation_fields_title": "Veri"
+            "reservation_fields_title": "Veri",
+            "reservation_fields_for_provider_title": "Sağlayıcı tarafından eklendi"
         },
         "expired": "Üzgünüz, seçilen ürün tükendiği için ödeme işlemi sırasında rezervasyonunuz iptal edildi.",
         "extra_amount_refund": {
diff --git a/react/src/webshop/i18n/translated/uk.json b/react/src/webshop/i18n/translated/uk.json
index 2cf2face7..6653b0112 100644
--- a/react/src/webshop/i18n/translated/uk.json
+++ b/react/src/webshop/i18n/translated/uk.json
@@ -872,7 +872,7 @@
             "or": "або",
             "title": "Завантажити документ",
             "upload_button": "Завантажити документ",
-            "max_files": "*максимальний розмір файлів {{ count }} "
+            "max_files": "до файлів {{ count }} "
         },
         "info_box": {
             "2fa_description": "Щоб дізнатися більше про 2FA, відвідайте нас:",
@@ -2728,7 +2728,8 @@
             },
             "loading": "Завантаження",
             "title": "Деталі бронювання",
-            "reservation_fields_title": "Дані"
+            "reservation_fields_title": "Дані",
+            "reservation_fields_for_provider_title": "Додано постачальником"
         },
         "expired": "На жаль, ваше бронювання було скасовано під час оформлення замовлення, оскільки обраний товар розпродано.",
         "extra_amount_refund": {
diff --git a/translations/cache/cache.json b/translations/cache/cache.json
index 60d2d443f..8a7ed7be5 100644
--- a/translations/cache/cache.json
+++ b/translations/cache/cache.json
@@ -2165,7 +2165,7 @@
     ],
     [
         "global.file_uploader.max_files",
-        "*maximaal {{ count }} bestanden"
+        "maximaal {{ count }} bestanden"
     ],
     [
         "global.file_uploader.max_size",
@@ -7667,6 +7667,10 @@
         "reservation.details.loading",
         "Loading"
     ],
+    [
+        "reservation.details.reservation_fields_for_provider_title",
+        "Toegevoegd door aanbieder"
+    ],
     [
         "reservation.details.reservation_fields_title",
         "Gegevens"

From 4f8e4602de571c1c7dd8d89ce1e41210b49c33af Mon Sep 17 00:00:00 2001
From: dev-rminds <dev@rminds.nl>
Date: Mon, 8 Dec 2025 07:29:03 +0200
Subject: [PATCH 09/13] provider immediate unsubscription minor refactoring

---
 .../scss/_common/dashboard.scss               | 66 -------------------
 .../elements/ProviderFundsAvailableTable.tsx  | 37 ++---------
 .../elements/ProviderFundsTable.tsx           | 39 +++--------
 .../hooks/useProviderFundsApplySuccess.tsx    | 24 +++++++
 .../useProviderFundsFailOfficesCheck.tsx      | 23 +++++++
 react/src/dashboard/i18n/i18n-nl.js           |  2 +
 6 files changed, 63 insertions(+), 128 deletions(-)
 create mode 100644 react/src/dashboard/components/pages/provider-funds/hooks/useProviderFundsApplySuccess.tsx
 create mode 100644 react/src/dashboard/components/pages/provider-funds/hooks/useProviderFundsFailOfficesCheck.tsx

diff --git a/react/assets/forus-platform/scss/_common/dashboard.scss b/react/assets/forus-platform/scss/_common/dashboard.scss
index d525cb619..5e0f4b6c9 100644
--- a/react/assets/forus-platform/scss/_common/dashboard.scss
+++ b/react/assets/forus-platform/scss/_common/dashboard.scss
@@ -2311,72 +2311,6 @@ body {
         }
     }
 
-    &.card-block-requests {
-        box-shadow: 0 2px 5px rgba(25, 39, 52, 0.11);
-        border-radius: var(--border-radius);
-        margin: 20px 0;
-        color: #646f79;
-        background-color: #fff;
-        border: 1px solid #d4d9dd;
-
-        .card-section {
-            padding: 10px 15px;
-        }
-
-        .card-heading {
-            flex: 1;
-            margin: 0;
-            align-self: center;
-            font: 600 13px/13px var(--base-font);
-            letter-spacing: -0.2px;
-            color: #404040;
-            cursor: pointer;
-        }
-
-        .button {
-            font: 600 12px/12px var(--base-font);
-            color: #134478;
-        }
-
-        .mdi {
-            color: #134478;
-            margin-right: 6px;
-        }
-
-        &.card-block-requests-danger {
-            color: #404040;
-            background-color: #fff5f0;
-            border: 1px solid #e63b3b;
-
-            .mdi {
-                color: #e63b3b;
-            }
-
-            .button {
-                .mdi {
-                    margin-left: 3px;
-                    color: #134478;
-                }
-            }
-        }
-
-        &.card-block-requests-warning {
-            background-color: #fcfaf6;
-            border: 1px solid #f8e39a;
-            color: #404040;
-
-            .mdi {
-                color: #ffb05a;
-            }
-
-            .button {
-                .mdi {
-                    color: #ffb05a;
-                }
-            }
-        }
-    }
-
     &.card-block-request-record {
         .card-header {
             .card-title {
diff --git a/react/src/dashboard/components/pages/provider-funds/elements/ProviderFundsAvailableTable.tsx b/react/src/dashboard/components/pages/provider-funds/elements/ProviderFundsAvailableTable.tsx
index b83beca41..cf3d249f2 100644
--- a/react/src/dashboard/components/pages/provider-funds/elements/ProviderFundsAvailableTable.tsx
+++ b/react/src/dashboard/components/pages/provider-funds/elements/ProviderFundsAvailableTable.tsx
@@ -7,13 +7,11 @@ import Paginator from '../../../../modules/paginator/components/Paginator';
 import useAssetUrl from '../../../../hooks/useAssetUrl';
 import { strLimit } from '../../../../helpers/string';
 import TableCheckboxControl from '../../../elements/tables/elements/TableCheckboxControl';
-import useOpenModal from '../../../../hooks/useOpenModal';
 import Tag from '../../../../props/models/Tag';
 import Fund from '../../../../props/models/Fund';
 import CardHeaderFilter from '../../../elements/tables/elements/CardHeaderFilter';
 import FilterItemToggle from '../../../elements/tables/elements/FilterItemToggle';
 import SelectControl from '../../../elements/select-control/SelectControl';
-import ModalNotification from '../../../modals/ModalNotification';
 import useTableToggles from '../../../../hooks/useTableToggles';
 import Implementation from '../../../../props/models/Implementation';
 import usePaginatorService from '../../../../modules/paginator/services/usePaginatorService';
@@ -24,6 +22,8 @@ import TableTopScroller from '../../../elements/tables/TableTopScroller';
 import usePushApiError from '../../../../hooks/usePushApiError';
 import useFilterNext from '../../../../modules/filter_next/useFilterNext';
 import { NumberParam, StringParam } from 'use-query-params';
+import useProviderFundsApplySuccess from '../hooks/useProviderFundsApplySuccess';
+import useProviderFundsFailOfficesCheck from '../hooks/useProviderFundsFailOfficesCheck';
 
 export default function ProviderFundsAvailableTable({
     organization,
@@ -38,9 +38,11 @@ export default function ProviderFundsAvailableTable({
 
     const assetUrl = useAssetUrl();
     const setProgress = useSetProgress();
-    const openModal = useOpenModal();
     const pushApiError = usePushApiError();
 
+    const successApplying = useProviderFundsApplySuccess();
+    const failOfficesCheck = useProviderFundsFailOfficesCheck();
+
     const paginatorService = usePaginatorService();
     const providerFundService = useProviderFundService();
 
@@ -105,35 +107,6 @@ export default function ProviderFundsAvailableTable({
         ),
     });
 
-    const successApplying = useCallback(() => {
-        openModal((modal) => (
-            <ModalNotification
-                modal={modal}
-                title={translate('provider_funds.available.applied_for_fund.title')}
-                description={translate('provider_funds.available.applied_for_fund.description')}
-                icon={'fund_applied'}
-                buttonSubmit={{
-                    text: translate('modal.buttons.confirm'),
-                    onClick: modal.close,
-                }}
-            />
-        ));
-    }, [openModal, translate]);
-
-    const failOfficesCheck = useCallback(() => {
-        openModal((modal) => (
-            <ModalNotification
-                modal={modal}
-                title={translate('provider_funds.available.error_apply.title')}
-                description={translate('provider_funds.available.error_apply.description')}
-                buttonCancel={{
-                    text: translate('modal.buttons.cancel'),
-                    onClick: modal.close,
-                }}
-            />
-        ));
-    }, [openModal, translate]);
-
     const fetchFunds = useCallback(() => {
         setSelected([]);
         setLoading(true);
diff --git a/react/src/dashboard/components/pages/provider-funds/elements/ProviderFundsTable.tsx b/react/src/dashboard/components/pages/provider-funds/elements/ProviderFundsTable.tsx
index 422c35cca..ab6fe2456 100644
--- a/react/src/dashboard/components/pages/provider-funds/elements/ProviderFundsTable.tsx
+++ b/react/src/dashboard/components/pages/provider-funds/elements/ProviderFundsTable.tsx
@@ -25,7 +25,8 @@ import usePushApiError from '../../../../hooks/usePushApiError';
 import Label from '../../../elements/image_cropper/Label';
 import useFilterNext from '../../../../modules/filter_next/useFilterNext';
 import { NumberParam, StringParam } from 'use-query-params';
-import ModalNotification from '../../../modals/ModalNotification';
+import useProviderFundsApplySuccess from '../hooks/useProviderFundsApplySuccess';
+import useProviderFundsFailOfficesCheck from '../hooks/useProviderFundsFailOfficesCheck';
 
 export default function ProviderFundsTable({
     type,
@@ -45,6 +46,9 @@ export default function ProviderFundsTable({
     const setProgress = useSetProgress();
     const pushApiError = usePushApiError();
 
+    const successApplying = useProviderFundsApplySuccess();
+    const failOfficesCheck = useProviderFundsFailOfficesCheck();
+
     const paginatorService = usePaginatorService();
     const providerFundService = useProviderFundService();
 
@@ -185,41 +189,14 @@ export default function ProviderFundsTable({
         [fetchFunds, onChange, openModal, organization],
     );
 
-    const failOfficesCheck = useCallback(() => {
-        openModal((modal) => (
-            <ModalNotification
-                modal={modal}
-                title={translate('provider_funds.available.error_apply.title')}
-                description={translate('provider_funds.available.error_apply.description')}
-                buttonCancel={{
-                    text: translate('modal.buttons.cancel'),
-                    onClick: modal.close,
-                }}
-            />
-        ));
-    }, [openModal, translate]);
-
-    const successApplying = useCallback(() => {
-        openModal((modal) => (
-            <ModalNotification
-                modal={modal}
-                title={translate('provider_funds.available.applied_for_fund.title')}
-                description={translate('provider_funds.available.applied_for_fund.description')}
-                icon={'fund_applied'}
-                buttonSubmit={{
-                    text: translate('modal.buttons.confirm'),
-                    onClick: modal.close,
-                }}
-            />
-        ));
-    }, [openModal, translate]);
-
     const applyFund = useCallback(
         (providerFund: FundProvider) => {
             if (organization.offices_count == 0) {
                 return failOfficesCheck();
             }
 
+            setProgress(0);
+
             providerFundService
                 .applyForFund(organization.id, providerFund.fund.id)
                 .then(() => {
@@ -229,6 +206,7 @@ export default function ProviderFundsTable({
                 .catch(pushApiError)
                 .finally(() => {
                     fetchFunds();
+                    setProgress(100);
                     onChange?.();
                 });
         },
@@ -241,6 +219,7 @@ export default function ProviderFundsTable({
             providerFundService,
             pushApiError,
             setSelected,
+            setProgress,
             successApplying,
         ],
     );
diff --git a/react/src/dashboard/components/pages/provider-funds/hooks/useProviderFundsApplySuccess.tsx b/react/src/dashboard/components/pages/provider-funds/hooks/useProviderFundsApplySuccess.tsx
new file mode 100644
index 000000000..dc3e70294
--- /dev/null
+++ b/react/src/dashboard/components/pages/provider-funds/hooks/useProviderFundsApplySuccess.tsx
@@ -0,0 +1,24 @@
+import React, { useCallback } from 'react';
+import ModalNotification from '../../../modals/ModalNotification';
+import useOpenModal from '../../../../hooks/useOpenModal';
+import useTranslate from '../../../../hooks/useTranslate';
+
+export default function useProviderFundsApplySuccess() {
+    const openModal = useOpenModal();
+    const translate = useTranslate();
+
+    return useCallback(() => {
+        openModal((modal) => (
+            <ModalNotification
+                modal={modal}
+                title={translate('provider_funds.available.applied_for_fund.title')}
+                description={translate('provider_funds.available.applied_for_fund.description')}
+                icon={'fund_applied'}
+                buttonSubmit={{
+                    text: translate('modal.buttons.confirm'),
+                    onClick: modal.close,
+                }}
+            />
+        ));
+    }, [openModal, translate]);
+}
diff --git a/react/src/dashboard/components/pages/provider-funds/hooks/useProviderFundsFailOfficesCheck.tsx b/react/src/dashboard/components/pages/provider-funds/hooks/useProviderFundsFailOfficesCheck.tsx
new file mode 100644
index 000000000..7d8db5e0f
--- /dev/null
+++ b/react/src/dashboard/components/pages/provider-funds/hooks/useProviderFundsFailOfficesCheck.tsx
@@ -0,0 +1,23 @@
+import React, { useCallback } from 'react';
+import ModalNotification from '../../../modals/ModalNotification';
+import useOpenModal from '../../../../hooks/useOpenModal';
+import useTranslate from '../../../../hooks/useTranslate';
+
+export default function useProviderFundsFailOfficesCheck() {
+    const openModal = useOpenModal();
+    const translate = useTranslate();
+
+    return useCallback(() => {
+        openModal((modal) => (
+            <ModalNotification
+                modal={modal}
+                title={translate('provider_funds.available.error_apply.title')}
+                description={translate('provider_funds.available.error_apply.description')}
+                buttonCancel={{
+                    text: translate('modal.buttons.cancel'),
+                    onClick: modal.close,
+                }}
+            />
+        ));
+    }, [openModal, translate]);
+}
diff --git a/react/src/dashboard/i18n/i18n-nl.js b/react/src/dashboard/i18n/i18n-nl.js
index b9fa980aa..61390fcb5 100644
--- a/react/src/dashboard/i18n/i18n-nl.js
+++ b/react/src/dashboard/i18n/i18n-nl.js
@@ -729,12 +729,14 @@ export default {
             pending: 'Er zijn momenteel geen aanbieders die actie benodigd hebben.',
             active: 'Er zijn momenteel geen actieve aanbieders.',
             rejected: 'Er zijn momenteel geen inactieve aanbieders.',
+            unsubscribed: 'Er zijn momenteel geen uitgeschreven aanbieders.',
         },
         empty_description: {
             pending: "Bekijk de tabbladen 'Actief' en 'Inactief' om eerder beoordeelde aanbieders te bekijken.",
             active: "Controleer het tabblad 'Actiebenodigd' voor aanbieders die actie vereisen, of het tabblad 'Inactief' voor aanbieders die momenteel niet actief zijn.",
             rejected:
                 "Controleer het tabblad 'Actief' voor actieve aanbieders, of 'Actiebenodigd' voor aanbieders die actie vereisen.",
+            unsubscribed: 'Alle aanbieders zijn momenteel geabonneerd en beschikbaar binnen het platform.',
         },
     },
 

From b6dfc33d2cf743b50872e5771f6b8cea0e52328f Mon Sep 17 00:00:00 2001
From: dev-rminds <dev@rminds.nl>
Date: Mon, 8 Dec 2025 07:33:14 +0200
Subject: [PATCH 10/13] update provider re-subscribe icon

---
 .../pages/provider-funds/elements/ProviderFundsTable.tsx        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/react/src/dashboard/components/pages/provider-funds/elements/ProviderFundsTable.tsx b/react/src/dashboard/components/pages/provider-funds/elements/ProviderFundsTable.tsx
index ab6fe2456..1d41504de 100644
--- a/react/src/dashboard/components/pages/provider-funds/elements/ProviderFundsTable.tsx
+++ b/react/src/dashboard/components/pages/provider-funds/elements/ProviderFundsTable.tsx
@@ -390,7 +390,7 @@ export default function ProviderFundsTable({
                                                                                 applyFund(providerFund);
                                                                                 e.close();
                                                                             }}>
-                                                                            <em className="mdi mdi-restart icon-start" />
+                                                                            <em className="mdi mdi-send-variant-clock-outline icon-start" />
                                                                             {translate(
                                                                                 'provider_funds.buttons.join_unsubscribed',
                                                                             )}

From 3edf32275094d7e63ca673d54728b6eea70a19fc Mon Sep 17 00:00:00 2001
From: Yaroslav Kosterin <ateamcms@gmail.com>
Date: Tue, 9 Dec 2025 18:14:29 +0200
Subject: [PATCH 11/13] webshop css header and footer minor fixes

---
 .../scss/style-webshop-eemsdelta-vars.scss    | 20 +++++++++----------
 ...style-webshop-hartvanwestbrabant-vars.scss |  8 ++++----
 .../scss/style-webshop-heumen-vars.scss       | 14 ++++++-------
 .../scss/style-webshop-schagen-vars.scss      |  6 +++---
 4 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/react/assets/forus-webshop/scss/style-webshop-eemsdelta-vars.scss b/react/assets/forus-webshop/scss/style-webshop-eemsdelta-vars.scss
index da485b297..07ce73978 100644
--- a/react/assets/forus-webshop/scss/style-webshop-eemsdelta-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-eemsdelta-vars.scss
@@ -25,12 +25,12 @@ $primaryColorLight: #0d4379;
 
     --navbar-menu-gap: 22px;
     --navbar-menu-order: 1;
-    --navbar-menu-background: #f5f5f5;
+    --navbar-menu-background: #ffffff;
 
     --navbar-search-gap: 20px;
     --navbar-search-order: 2;
     --navbar-search-padding: 20px 0px;
-    --navbar-search-background: #f5f5f5;
+    --navbar-search-background: #ffffff;
     --navbar-search-border-bottom: 1px solid var(--border-color);
 
     --navbar-menu-item-font: 400 18px/21px var(--base-font);
@@ -62,17 +62,17 @@ $primaryColorLight: #0d4379;
 
     // navbar (auth) (default button)
     --tc-auth-menu: #ffffff;
-    --tc-auth-btn: #ffffff;
-    --btn-auth-bg: #0d4379;
-    --btn-auth-border: #0d4379;
+    --tc-auth-btn: #609609;
+    --btn-auth-bg: #ffffff;
+    --btn-auth-border: #609609;
     --auth-avater-bg: #305dfb;
     --auth-avater-svg: #fff;
 
     // navbar (start modal primary)
     --tc-start-btn: #ffffff;
-    --btn-start-bg: #609609;
-    --btn-start-btn: #609609;
-    --btn-start-border: transparent;
+    --btn-start-bg: #0d4379;
+    --btn-start-btn: #0d4379;
+    --btn-start-border: #0d4379;
 
     // header background
     --bg-values: url('../img/splash-top-b.jpg') no-repeat center 100%;
@@ -119,8 +119,8 @@ $primaryColorLight: #0d4379;
 
     --footer-copyright-color: var(--footer_color_link);
     --footer-copyright-font: 400 14px/30px var(--base-font);
-    --footer-copyright-background: #0d4379;
-    --footer-copyright-border-color: var(--border-color);
+    --footer-copyright-background: #0A2E51;
+    --footer-copyright-border-color: #0A2E51;
     --footer-copyright-padding: 40px;
 
     // not displayed
diff --git a/react/assets/forus-webshop/scss/style-webshop-hartvanwestbrabant-vars.scss b/react/assets/forus-webshop/scss/style-webshop-hartvanwestbrabant-vars.scss
index 03b098424..6a023f7b5 100644
--- a/react/assets/forus-webshop/scss/style-webshop-hartvanwestbrabant-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-hartvanwestbrabant-vars.scss
@@ -98,7 +98,7 @@ $primaryColorLight: #1c7878;
     // heading font
     --heading-font-family: var(--base-font);
     --heading-font: 700 40px/60px var(--heading-font-family);
-    --heading-color: #24A1A1;
+    --heading-color: #1a1a1a;
     --heading-pane-font: 700 22px/30px var(--heading-font-family);
 
     // base color
@@ -118,10 +118,10 @@ $primaryColorLight: #1c7878;
     --footer_social_border_color: var(--footer_color);
     --footer_social_border_radius: var(--border-radius);
 
-    --footer-copyright-color: var(--footer_color_link);
+    --footer-copyright-color: #1a1a1a;
     --footer-copyright-font: 400 14px/30px var(--base-font);
-    --footer-copyright-background: #1c7878;
-    --footer-copyright-border-color: var(--border-color);
+    --footer-copyright-background: #ffffff;
+    --footer-copyright-border-color: #ffffff;
     --footer-copyright-padding: 40px;
 
     // not displayed
diff --git a/react/assets/forus-webshop/scss/style-webshop-heumen-vars.scss b/react/assets/forus-webshop/scss/style-webshop-heumen-vars.scss
index 622315b41..3f3973710 100644
--- a/react/assets/forus-webshop/scss/style-webshop-heumen-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-heumen-vars.scss
@@ -25,7 +25,7 @@ $primaryColorLight: #22398e;
 
     --navbar-menu-gap: 22px;
     --navbar-menu-order: 1;
-    --navbar-menu-background: #ececec;
+    --navbar-menu-background: #ffffff;
 
     --navbar-search-gap: 20px;
     --navbar-search-order: 2;
@@ -69,10 +69,10 @@ $primaryColorLight: #22398e;
     --auth-avater-svg: #fff;
 
     // navbar (start modal primary)
-    --tc-start-btn: #fff;
-    --btn-start-bg: #61ba90;
-    --btn-start-btn: #61ba90;
-    --btn-start-border: transparent;
+    --tc-start-btn: #22398e;
+    --btn-start-bg: #ffffff;
+    --btn-start-btn: #22398e;
+    --btn-start-border: #22398e;
 
     // header background
     --bg-values: url("../img/splash-top-b.jpg") no-repeat center 100%;
@@ -119,8 +119,8 @@ $primaryColorLight: #22398e;
 
     --footer-copyright-color: var(--footer_color_link);
     --footer-copyright-font: 400 14px/30px var(--base-font);
-    --footer-copyright-background: #22398e;
-    --footer-copyright-border-color: var(--border-color);
+    --footer-copyright-background: #061756;
+    --footer-copyright-border-color: #061756;
     --footer-copyright-padding: 40px;
 
     // not displayed
diff --git a/react/assets/forus-webshop/scss/style-webshop-schagen-vars.scss b/react/assets/forus-webshop/scss/style-webshop-schagen-vars.scss
index 791dd869f..d1ac9d5a0 100644
--- a/react/assets/forus-webshop/scss/style-webshop-schagen-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-schagen-vars.scss
@@ -75,7 +75,7 @@ $primaryColorLight: #1c8fd7;
 
     // navbar (start modal primary)
     --tc-start-btn: #fff;
-    --btn-start-bg: #d13e41;
+    --btn-start-bg: #ba2f2f;
     --btn-start-btn: #305dfb;
     --btn-start-border: transparent;
 
@@ -122,9 +122,9 @@ $primaryColorLight: #1c8fd7;
     --footer_social_border_color: var(--footer_color);
     --footer_social_border_radius: var(--border-radius);
 
-    --footer-copyright-color: var(--footer_color_link);
+    --footer-copyright-color: #545457;
     --footer-copyright-font: 400 16px/30px var(--base-font);
-    --footer-copyright-background: #306fb3;
+    --footer-copyright-background: #ffffff;
     --footer-copyright-border-color: transparent;
     --footer-copyright-padding: 25px;
 

From 796460e1e13ceb61518c4927e153e1759298314a Mon Sep 17 00:00:00 2001
From: RobinMeles <robinmeles@gmail.com>
Date: Mon, 15 Dec 2025 13:19:27 +0100
Subject: [PATCH 12/13] prevalidations translations

---
 .../modals/ModalPrevalidationsUpload.tsx      | 48 +++++++++----------
 1 file changed, 24 insertions(+), 24 deletions(-)

diff --git a/react/src/dashboard/components/modals/ModalPrevalidationsUpload.tsx b/react/src/dashboard/components/modals/ModalPrevalidationsUpload.tsx
index f42ff3c99..bf0ad5448 100644
--- a/react/src/dashboard/components/modals/ModalPrevalidationsUpload.tsx
+++ b/react/src/dashboard/components/modals/ModalPrevalidationsUpload.tsx
@@ -602,10 +602,10 @@ export default function ModalPrevalidationsUpload({
             if (data.no_vouchers?.length > 0) {
                 await showErrorsList(
                     data.no_vouchers,
-                    'Voucher niet gevonden',
-                    'De gegevens zijn gewijzigd, maar er kon geen overeenkomende voucher worden gevonden.',
+                    'Tegoed niet gevonden',
+                    'De gegevens zijn gewijzigd, maar er kon geen overeenkomend tegoed worden gevonden.',
                     (row) => {
-                        return `Lijn: ${row.line} - Geen voucher gevonden voor "${row.data[fund.csv_primary_key]}"`;
+                        return `Lijn: ${row.line} - Geen tegoed gevonden voor "${row.data[fund.csv_primary_key]}"`;
                     },
                 );
             }
@@ -614,10 +614,10 @@ export default function ModalPrevalidationsUpload({
             if (data.multiple_vouchers?.length > 0) {
                 await showErrorsList(
                     data.multiple_vouchers,
-                    'Meerdere vouchers gedetecteerd',
-                    'Kan niet bepalen welke voucher moet worden bijgewerkt.',
+                    'Meerdere tegoeden gedetecteerd',
+                    'Kan niet bepalen welk tegoed moet worden bijgewerkt.',
                     (row) => {
-                        return `Lijn: ${row.line} - Meerdere vouchers gevonden voor "${row.data[fund.csv_primary_key]}"`;
+                        return `Lijn: ${row.line} - Meerdere tegoeden gevonden voor "${row.data[fund.csv_primary_key]}"`;
                     },
                 );
             }
@@ -638,10 +638,10 @@ export default function ModalPrevalidationsUpload({
             if (data.less_amount?.length > 0) {
                 await showErrorsList(
                     data.less_amount,
-                    'Bedrag verlaagd',
-                    'Wanneer het bedrag wordt verlaagd, kunnen vouchers niet automatisch worden bijgewerkt en moeten ze handmatig worden afgehandeld.',
+                    'Gegevens kunnen niet worden aangepast',
+                    'Wanneer gegevens in waarde worden verlaagd, kunnen tegoeden niet automatisch worden bijgewerkt en moeten ze handmatig worden afgehandeld.',
                     (row) => {
-                        return `Lijn: ${row.line} - Bedrag verlaagd voor "${row.data[fund.csv_primary_key]}"`;
+                        return `Lijn: ${row.line} - Gegevens kunnen niet worden aangepast voor "${row.data[fund.csv_primary_key]}"`;
                     },
                 );
             }
@@ -650,14 +650,14 @@ export default function ModalPrevalidationsUpload({
                 if (data.create.length > 0) {
                     pushSuccess(
                         'Bezig met uploaden...',
-                        'Geen duplicaten gevonden. Bezig met uploaden van ' +
+                        'Geen dubbelingen gevonden. Bezig met uploaden van ' +
                             data.create.length +
-                            ' nieuw(e) record(s)...',
+                            ' nieuw(e) gegeven(s)...',
                     );
 
                     startUploadingToServer(data.create.map((item) => item.data)).then();
                 } else {
-                    pushSuccess('Geen wijzigingen gedetecteerd', 'Geen nieuwe records gevonden in uw CSV-bestand...');
+                    pushSuccess('Geen wijzigingen gedetecteerd', 'Geen nieuwe gegevens gevonden in uw CSV-bestand...');
                     setCsvProgress(CSVProgress.uploaded);
                     updateProgressBarValue(100);
                 }
@@ -672,13 +672,13 @@ export default function ModalPrevalidationsUpload({
             if (data.update.length > 0) {
                 await showUpdateList(
                     data.update,
-                    'Dubbele records gedetecteerd.',
+                    'Dubbele gegevens gedetecteerd.',
                     [
                         `Weet u zeker dat u ${data.update.length} rij(en) wilt bijwerken?`,
-                        'Deze records hebben al activatiecodes.',
+                        'Deze gegevens hebben al activatiecodes.',
                     ].join(' '),
                     (row) => {
-                        return `Lijn: ${row.line} - Wachtende prevalidatiegegevens gewijzigd voor "${row.data[fund.csv_primary_key]}"`;
+                        return `Lijn: ${row.line} - Wachtende gegevens gewijzigd voor "${row.data[fund.csv_primary_key]}"`;
                     },
                 ).then((res) => {
                     if (res === false) {
@@ -695,14 +695,14 @@ export default function ModalPrevalidationsUpload({
             if (data.top_up.length > 0) {
                 await showUpdateList(
                     data.top_up,
-                    'Voucher opwaardering vereist.',
+                    'Tegoed opwaardering vereist.',
                     [
                         `Weet u zeker dat u ${data.top_up.length} rij(en) wilt bijwerken?`,
-                        'Deze UIDs hebben al een activatiecode en zijn geactiveerd.',
+                        'Deze rij(en) hebben al een activatiecode en zijn geactiveerd.',
                         'Aangezien het nieuw berekende bedrag hoger is, wordt een opwaardeertransactie aangemaakt.',
                     ].join(' '),
                     (row) => {
-                        return `Lijn: ${row.line} - Gebruikte prevalidatiegegevens gewijzigd voor "${row.data[fund.csv_primary_key]}"`;
+                        return `Lijn: ${row.line} - Gebruikte gegevens gewijzigd voor "${row.data[fund.csv_primary_key]}"`;
                     },
                 ).then((res) => {
                     if (res === false) {
@@ -726,8 +726,8 @@ export default function ModalPrevalidationsUpload({
             pushSuccess(
                 'Bezig met uploaden...',
                 [
-                    `${data.update.length + data.top_up.length - skipUids.length} record(s) worden bijgewerkt en`,
-                    `${data.create.length} record(s) worden aangemaakt!`,
+                    `${data.update.length + data.top_up.length - skipUids.length} gegeven(s) worden bijgewerkt en`,
+                    `${data.create.length} gegeven(s) worden aangemaakt!`,
                 ].join(' '),
             );
 
@@ -740,18 +740,18 @@ export default function ModalPrevalidationsUpload({
                     topUpRows,
                 ).then(() => {
                     if (skipUids.length > 0) {
-                        pushSuccess('Voltooid', `${skipUids.length} record(s) overgeslagen!`);
+                        pushSuccess('Voltooid', `${skipUids.length} gegeven(s) overgeslagen!`);
                     }
 
-                    pushSuccess('Voltooid', `${data.update.length - skipUids.length} record(s) bijgewerkt!`);
-                    pushSuccess('Voltooid', `${data.create.length} nieuw(e) record(s) aangemaakt!`);
+                    pushSuccess('Voltooid', `${data.update.length - skipUids.length} gegeven(s) bijgewerkt!`);
+                    pushSuccess('Voltooid', `${data.create.length} nieuw(e) gegeven(s) aangemaakt!`);
                 }, console.error);
             }
 
             onCompleted?.();
             setCsvProgress(CSVProgress.uploaded);
             updateProgressBarValue(100);
-            pushSuccess('Voltooid', skipUids.length + ' record(s) overgeslagen, geen nieuwe records aangemaakt!');
+            pushSuccess('Voltooid', skipUids.length + ' gegeven(s) overgeslagen, geen nieuwe gegevens aangemaakt!');
         },
         [
             fund.csv_primary_key,

From 4f38534868fefdcc1ff94f9503d097c60fc49c33 Mon Sep 17 00:00:00 2001
From: RobinMeles <robinmeles@gmail.com>
Date: Tue, 16 Dec 2025 14:04:08 +0100
Subject: [PATCH 13/13] translations for file upload in reservations

---
 .../pages/reservations/elements/ReservationFieldItem.tsx    | 6 +++++-
 react/src/dashboard/i18n/i18n-nl.js                         | 2 +-
 react/src/dashboard/i18n/nl/pages/reservations-settings.js  | 6 +++---
 react/src/webshop/i18n/i18n-nl.mjs                          | 2 +-
 4 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/react/src/dashboard/components/pages/reservations/elements/ReservationFieldItem.tsx b/react/src/dashboard/components/pages/reservations/elements/ReservationFieldItem.tsx
index 09577fc6a..abea74a4b 100644
--- a/react/src/dashboard/components/pages/reservations/elements/ReservationFieldItem.tsx
+++ b/react/src/dashboard/components/pages/reservations/elements/ReservationFieldItem.tsx
@@ -216,7 +216,11 @@ export default function ReservationFieldItem({
                             error={errors['fields.' + index + '.fillable_by']}
                             info={
                                 <Fragment>
-                                    <p>Fillable by description</p>
+                                    <p>
+                                        Deze instelling geeft aan of het aangepaste veld ingevuld dient te worden door
+                                        de inwoner tijdens het maken van de reservering of door de aanbieder zelf nadat
+                                        de reservering is ingediend.
+                                    </p>
                                 </Fragment>
                             }
                             input={() => (
diff --git a/react/src/dashboard/i18n/i18n-nl.js b/react/src/dashboard/i18n/i18n-nl.js
index dbda24904..76c767aa3 100644
--- a/react/src/dashboard/i18n/i18n-nl.js
+++ b/react/src/dashboard/i18n/i18n-nl.js
@@ -13,7 +13,7 @@ export default {
             upload_button: 'Upload een document',
             max_size: 'max. grootte 8Mb',
             max_files: 'maximaal {{ count }} bestanden',
-            attachments: 'Attachments',
+            attachments: 'Bijlagen',
         },
     },
     test: '{{name}} {{foo}}',
diff --git a/react/src/dashboard/i18n/nl/pages/reservations-settings.js b/react/src/dashboard/i18n/nl/pages/reservations-settings.js
index 9b79cb125..af05a0a7a 100644
--- a/react/src/dashboard/i18n/nl/pages/reservations-settings.js
+++ b/react/src/dashboard/i18n/nl/pages/reservations-settings.js
@@ -15,7 +15,7 @@ export default {
         extra_payments: 'Bijbetaling instellingen',
         reservation_note: 'Aankoopnotitie',
         reservation_note_text: 'Aankoopnotitie tekst',
-        fillable_by: 'Fillable by',
+        fillable_by: 'In te vullen door',
     },
     buttons: {
         cancel: 'Annuleren',
@@ -26,7 +26,7 @@ export default {
         add_field: 'Veld toevoegen',
     },
     fillable_by: {
-        provider: 'Provider',
-        requester: 'Requester',
+        provider: 'Aanbieder',
+        requester: 'Inwoner',
     },
 };
diff --git a/react/src/webshop/i18n/i18n-nl.mjs b/react/src/webshop/i18n/i18n-nl.mjs
index 502aa6da5..e5681b7fe 100644
--- a/react/src/webshop/i18n/i18n-nl.mjs
+++ b/react/src/webshop/i18n/i18n-nl.mjs
@@ -318,7 +318,7 @@ export default {
             upload_button: 'Upload een document',
             max_size: 'max. grootte 8Mb',
             max_files: 'maximaal {{ count }} bestanden',
-            attachments: 'Attachments',
+            attachments: 'Bijlagen',
         },
         file_item: {
             view_file: 'Bestand bekijken',