saving progress;

src/pages/Bandi/components/AllBandiTable/index.js

@@ -49,7 +49,8 @@ const AllBandiTable = () => {
 
     const getFormattedBandiData = (data) => {
         return data.map((d) => {
-            d.dates = d.dates.map(v => is(String, v) ? new Date(v) : (v ? v : ''));
+            d.dateStart = is(String, d.dates[0]) ? new Date(d.dates[0]) : (d.dates[0] ? d.dates[0] : '');
+            d.dateEnd = is(String, d.dates[1]) ? new Date(d.dates[1]) : (d.dates[1] ? d.dates[1] : '');
             return d;
         });
     };
@@ -62,8 +63,8 @@ const AllBandiTable = () => {
         setFilters({
             global: { value: null, matchMode: FilterMatchMode.CONTAINS },
             name: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
-            start_date: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }] },
+            dateStart: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }] },
-            end_date: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }] },
+            dateEnd: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }] },
             status: { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
         });
     };
@@ -81,15 +82,15 @@ const AllBandiTable = () => {
     }*/
 
     const dateStartBodyTemplate = (rowData) => {
-        return getDateFromISOstring(rowData.dates[0]);
+        return getDateFromISOstring(rowData.dateStart);
     };
 
     const dateEndBodyTemplate = (rowData) => {
-        return getDateFromISOstring(rowData.dates[1]);
+        return getDateFromISOstring(rowData.dateEnd);
     };
 
     const dateFilterTemplate = (options) => {
-        return <Calendar value={options.value} onChange={(e) => options.filterCallback(e.value, options.index)} dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" mask="99/99/9999" />;
+        return <Calendar value={options.value} onChange={(e) => options.filterCallback(e.value, options.index)} dateFormat="dd/mm/yy" placeholder="dd/mm/yyyy" mask="99/99/9999" />;
     };
 
     const statusBodyTemplate = (rowData) => {
@@ -130,14 +131,17 @@ const AllBandiTable = () => {
                         filter sortable
                         filterPlaceholder={__('Cerca', 'gepafin')}
                         style={{ minWidth: '8rem' }}/>
-                <Column header={__('Data Pubblicazione', 'gepafin')} filterField="start_date" dataType="date"
+                <Column header={__('Data Pubblicazione', 'gepafin')} filterField="dateStart" dataType="date"
                         style={{ minWidth: '8rem' }}
-                        body={dateStartBodyTemplate} filter filterElement={dateFilterTemplate}/>
+                        body={dateStartBodyTemplate} filter
-                <Column header={__('Data Scadenza', 'gepafin')} filterField="end_date" dataType="date"
+                        filterElement={dateFilterTemplate}/>
+                <Column header={__('Data Scadenza', 'gepafin')} filterField="dateEnd" dataType="date"
                         style={{ minWidth: '8rem' }}
-                        body={dateEndBodyTemplate} filter filterElement={dateFilterTemplate}/>
+                        body={dateEndBodyTemplate} filter
+                        filterElement={dateFilterTemplate}/>
                 <Column field="status" header={__('Stato', 'gepafin')} filterMenuStyle={{ width: '14rem' }}
-                        style={{ minWidth: '7rem' }} body={statusBodyTemplate} filter
+                        style={{ minWidth: '7rem' }} body={statusBodyTemplate}
+                        filter sortable
                         filterElement={statusFilterTemplate}/>
                 <Column header={__('Azioni', 'gepafin')}
                         body={actionsBodyTemplate}/>

src/pages/BandiPreInstructor/components/AllBandiTable/index.js

@@ -89,7 +89,7 @@ const AllBandiTable = () => {
     };
 
     const dateFilterTemplate = (options) => {
-        return <Calendar value={options.value} onChange={(e) => options.filterCallback(e.value, options.index)} dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" mask="99/99/9999" />;
+        return <Calendar value={options.value} onChange={(e) => options.filterCallback(e.value, options.index)} dateFormat="dd/mm/yy" placeholder="dd/mm/yyyy" mask="99/99/9999" />;
     };
 
     const statusBodyTemplate = (rowData) => {

src/pages/Dashboard/components/LatestBandiTable/index.js

@@ -119,7 +119,7 @@ const LatestBandiTable = () => {
     };
 
     const dateFilterTemplate = (options) => {
-        return <Calendar value={options.value} onChange={(e) => options.filterCallback(e.value, options.index)} dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" mask="99/99/9999" />;
+        return <Calendar value={options.value} onChange={(e) => options.filterCallback(e.value, options.index)} dateFormat="dd/mm/yy" placeholder="dd/mm/yyyy" mask="99/99/9999" />;
     };
 
     const statusBodyTemplate = (rowData) => {

src/pages/Dashboard/components/LatestBandiTableAsync/index.js

@@ -144,7 +144,7 @@ const LatestBandiTableAsync = () => {
 
     const dateFilterTemplate = (options) => {
         return <Calendar value={options.value} onChange={(e) => options.filterCallback(e.value, options.index)}
-                         dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" mask="99/99/9999"/>;
+                         dateFormat="dd/mm/yy" placeholder="dd/mm/yyyy" mask="99/99/9999"/>;
     };
 
     const dateStartBodyTemplate = (rowData) => {

src/pages/Dashboard/components/LatestUsersActivityTable/index.js

@@ -96,7 +96,7 @@ const LatestUsersActivityTable = () => {
     };
 
     const dateFilterTemplate = (options) => {
-        return <Calendar value={options.value} onChange={(e) => options.filterCallback(e.value, options.index)} dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" mask="99/99/9999" />;
+        return <Calendar value={options.value} onChange={(e) => options.filterCallback(e.value, options.index)} dateFormat="dd/mm/yy" placeholder="dd/mm/yyyy" mask="99/99/9999" />;
     };
 
     const header = renderHeader();

src/pages/DashboardBeneficiario/components/LatestBandiTable/index.js

@@ -164,7 +164,7 @@ const LatestBandiTable = () => {
 
     const dateFilterTemplate = (options) => {
         return <Calendar value={options.value} onChange={(e) => options.filterCallback(e.value, options.index)}
-                         dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" mask="99/99/9999"/>;
+                         dateFormat="dd/mm/yy" placeholder="dd/mm/yyyy" mask="99/99/9999"/>;
     };
 
     const statusBodyTemplate = (rowData) => {

src/pages/DashboardBeneficiario/components/MyLatestSubmissionsTable/index.js

@@ -142,7 +142,7 @@ const MyLatestSubmissionsTable = () => {
 
     const dateFilterTemplate = (options) => {
         return <Calendar value={options.value} onChange={(e) => options.filterCallback(e.value, options.index)}
-                         dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" mask="99/99/9999"/>;
+                         dateFormat="dd/mm/yy" placeholder="dd/mm/yyyy" mask="99/99/9999"/>;
     };
 
     const statusBodyTemplate = (rowData) => {

src/pages/DashboardInstructorManager/components/InstructorManagerMieDomandeTable/index.js

@@ -124,7 +124,7 @@ const InstructorManagerMieDomandeTable = ({ userId = null, statuses = [] }) => {
     };
 
     const dateFilterTemplate = (options) => {
-        return <Calendar value={options.value} onChange={(e) => options.filterCallback(e.value, options.index)} dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" mask="99/99/9999" />;
+        return <Calendar value={options.value} onChange={(e) => options.filterCallback(e.value, options.index)} dateFormat="dd/mm/yy" placeholder="dd/mm/yyyy" mask="99/99/9999" />;
     };
 
     const statusBodyTemplate = (rowData) => {

src/pages/DashboardInstructorManager/components/LatestBandiTableInstructorManager/index.js

@@ -94,7 +94,7 @@ const LatestBandiTable = () => {
     };
 
     const dateFilterTemplate = (options) => {
-        return <Calendar value={options.value} onChange={(e) => options.filterCallback(e.value, options.index)} dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" mask="99/99/9999" />;
+        return <Calendar value={options.value} onChange={(e) => options.filterCallback(e.value, options.index)} dateFormat="dd/mm/yy" placeholder="dd/mm/yyyy" mask="99/99/9999" />;
     };
 
     const statusBodyTemplate = (rowData) => {

src/pages/DashboardInstructorManager/components/LatestBandiTableInstructorManagerAsync/index.js

@@ -136,7 +136,7 @@ const LatestBandiTableInstructorManagerAsync = () => {
 
     const dateFilterTemplate = (options) => {
         return <Calendar value={options.value} onChange={(e) => options.filterCallback(e.value, options.index)}
-                         dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" mask="99/99/9999"/>;
+                         dateFormat="dd/mm/yy" placeholder="dd/mm/yyyy" mask="99/99/9999"/>;
     };
 
     const dateStartBodyTemplate = (rowData) => {

src/pages/DashboardInstructorManager/components/MieDomandeTableInstructorManagerAsync/index.js

@@ -146,7 +146,7 @@ const MieDomandeTableInstructorManagerAsync = ({ userId = null, statuses = [] })
 
     const dateFilterTemplate = (options) => {
         return <Calendar value={options.value} onChange={(e) => options.filterCallback(e.value, options.index)}
-                         dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" mask="99/99/9999"/>;
+                         dateFormat="dd/mm/yy" placeholder="dd/mm/yyyy" mask="99/99/9999"/>;
     };
 
     const dateAppliedBodyTemplate = (rowData) => {

src/pages/DashboardPreInstructor/components/DomandeTablePreInstructorAsync/index.js

@@ -146,7 +146,7 @@ const DomandeTablePreInstructorAsync = ({ userId = null, statuses = [] }) => {
 
     const dateFilterTemplate = (options) => {
         return <Calendar value={options.value} onChange={(e) => options.filterCallback(e.value, options.index)}
-                         dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" mask="99/99/9999"/>;
+                         dateFormat="dd/mm/yy" placeholder="dd/mm/yyyy" mask="99/99/9999"/>;
     };
 
     const dateAppliedBodyTemplate = (rowData) => {

src/pages/DashboardPreInstructor/components/PreInstructorDomandeTable/index.js

@@ -124,7 +124,7 @@ const PreInstructorDomandeTable = ({ userId = null, statuses = [] }) => {
     };
 
     const dateFilterTemplate = (options) => {
-        return <Calendar value={options.value} onChange={(e) => options.filterCallback(e.value, options.index)} dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" mask="99/99/9999" />;
+        return <Calendar value={options.value} onChange={(e) => options.filterCallback(e.value, options.index)} dateFormat="dd/mm/yy" placeholder="dd/mm/yyyy" mask="99/99/9999" />;
     };
 
     const statusBodyTemplate = (rowData) => {

src/pages/DocumentsBeneficiary/components/DocumentsTable/index.js

@@ -113,7 +113,7 @@ const DocumentsTable = ({ type, reload = 0 }) => {
 
     const dateFilterTemplate = (options) => {
         return <Calendar value={options.value} onChange={(e) => options.filterCallback(e.value, options.index)}
-                         dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" mask="99/99/9999"/>;
+                         dateFormat="dd/mm/yy" placeholder="dd/mm/yyyy" mask="99/99/9999"/>;
     };
 
     const catBodyTemplate = (rowData) => {

src/pages/Domande/components/AllDomandeTable/index.js

@@ -110,7 +110,7 @@ const AllDomandeTable = ({ openDialogFn, updaterString = '' }) => {
 
     const dateFilterTemplate = (options) => {
         return <Calendar value={options.value} onChange={(e) => options.filterCallback(e.value, options.index)}
-                         dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" mask="99/99/9999"/>;
+                         dateFormat="dd/mm/yy" placeholder="dd/mm/yyyy" mask="99/99/9999"/>;
     };
 
     const statusBodyTemplate = (rowData) => {

src/pages/Domande/components/AllDomandeTableAsync/index.js

@@ -156,7 +156,7 @@ const AllDomandeTableAsync = ({ openDialogFn, updaterString = '' }) => {
 
     const dateFilterTemplate = (options) => {
         return <Calendar value={options.value} onChange={(e) => options.filterCallback(e.value, options.index)}
-                         dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" mask="99/99/9999"/>;
+                         dateFormat="dd/mm/yy" placeholder="dd/mm/yyyy" mask="99/99/9999"/>;
     };
 
     const dateAppliedBodyTemplate = (rowData) => {

src/pages/DomandeArchive/components/AllDomandeArchiveTable/index.js

@@ -116,7 +116,7 @@ const AllDomandeArchiveTable = ({ updaterString = '' }) => {
 
     const dateFilterTemplate = (options) => {
         return <Calendar value={options.value} onChange={(e) => options.filterCallback(e.value, options.index)}
-                         dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" mask="99/99/9999"/>;
+                         dateFormat="dd/mm/yy" placeholder="dd/mm/yyyy" mask="99/99/9999"/>;
     };
 
     const statusBodyTemplate = (rowData) => {

src/pages/DomandeBeneficiario/components/BeneficiarioDomandeTable/index.js

@@ -119,7 +119,7 @@ const BeneficiarioDomandeTable = () => {
 
     const dateFilterTemplate = (options) => {
         return <Calendar value={options.value} onChange={(e) => options.filterCallback(e.value, options.index)}
-                         dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" mask="99/99/9999"/>;
+                         dateFormat="dd/mm/yy" placeholder="dd/mm/yyyy" mask="99/99/9999"/>;
     };
 
     const statusBodyTemplate = (rowData) => {

src/pages/SoccorsoIstruttorioInstructorManager/index.js

@@ -5,7 +5,9 @@ import { __ } from '@wordpress/i18n';
 import DashboardService from '../../service/dashboard-service';
 import { pathOr } from 'ramda';
 import NumberFlow from '@number-flow/react';
-import PreInstructorSoccorsiTable from '../SoccorsoIstruttorioPreInstructor/components/PreInstructorSoccorsiTable';
+//import PreInstructorSoccorsiTable from '../SoccorsoIstruttorioPreInstructor/components/PreInstructorSoccorsiTable';
+import SoccorsiPreInstructorTableAsync
+    from '../SoccorsoIstruttorioPreInstructor/components/SoccorsiPreInstructorTableAsync';
 
 const SoccorsoIstruttorioInstructorManager = () => {
     const [mainStats, setMainStats] = useState({});
@@ -86,7 +88,8 @@ const SoccorsoIstruttorioInstructorManager = () => {
             <div className="appPage__spacer"></div>
 
             <div className="appPageSection">
-                <PreInstructorSoccorsiTable userId={0}/>
+                {/*<PreInstructorSoccorsiTable userId={0}/>*/}
+                <SoccorsiPreInstructorTableAsync userId={0}/>
             </div>
         </div>
     )

src/pages/SoccorsoIstruttorioMioInstructorManager/components/InstructorManagerSoccorsiTable/index.js

@@ -112,7 +112,7 @@ const InstructorManagerSoccorsiTable = () => {
     };
 
     const dateFilterTemplate = (options) => {
-        return <Calendar value={options.value} onChange={(e) => options.filterCallback(e.value, options.index)} dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" mask="99/99/9999" />;
+        return <Calendar value={options.value} onChange={(e) => options.filterCallback(e.value, options.index)} dateFormat="dd/mm/yy" placeholder="dd/mm/yyyy" mask="99/99/9999" />;
     };
 
     const statusBodyTemplate = (rowData) => {

src/pages/SoccorsoIstruttorioMioInstructorManager/components/SoccorsiInstructorManagerMioTableAsync/index.js

@@ -0,0 +1,220 @@
+import React, { useEffect, useState, useCallback } from 'react';
+import { __ } from '@wordpress/i18n';
+import { is, isEmpty, pathOr } from 'ramda';
+import { Link } from 'react-router-dom';
+
+import translationStrings from '../../../../translationStringsForComponents';
+
+// api
+import AmendmentsService from '../../../../service/amendments-service';
+
+//
+import getBandoLabel from '../../../../helpers/getBandoLabel';
+import getBandoSeverity from '../../../../helpers/getBandoSeverity';
+import getFormattedDateString from '../../../../helpers/getFormattedDateString';
+
+// components
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { Button } from 'primereact/button';
+import ProperBandoLabel from '../../../../components/ProperBandoLabel';
+import { Dropdown } from 'primereact/dropdown';
+import { Tag } from 'primereact/tag';
+import { Calendar } from 'primereact/calendar';
+
+const SoccorsiInstructorManagerMioTableAsync = ({ userId = null }) => {
+    const [localAsyncRequest, setLocalAsyncRequest] = useState(false);
+    const [items, setItems] = useState(null);
+    const [totalRecordsNum, setTotalRecordsNum] = useState(0);
+    const [lazyState, setLazyState] = useState({
+        first: 0,
+        rows: 5,
+        page: 0,
+        sortField: null,
+        sortOrder: null,
+        filters: {
+            applicationId: { value: null, matchMode: 'contains' },
+            callName: { value: null, matchMode: 'contains' },
+            companyName: { value: null, matchMode: 'contains' },
+            startDate: { value: null, matchMode: 'dateIs' },
+            expirationDate: { value: null, matchMode: 'dateIs' },
+            status: { value: null, matchMode: 'equals' }
+        }
+    });
+    const statuses = [];
+
+    const getPaginationQuery = useCallback((defaultSortBy = 'id') => {
+        let sortBy = {
+            columnName: 'applicationId',
+            sortDesc: true
+        };
+
+        if (lazyState.sortField) {
+            sortBy = {
+                columnName: lazyState.sortField,
+                sortDesc: lazyState.sortOrder === -1
+            }
+        }
+        return {
+            globalFilters: {
+                page: lazyState.page ? lazyState.page + 1 : 1,
+                limit: lazyState.rows,
+                sortBy
+            },
+            status: statuses,
+            filters: Object.keys(lazyState.filters).reduce((acc, cur) => {
+                const value = pathOr('', ['filters', cur, 'value'], lazyState);
+                if (!isEmpty(value)) {
+                    acc[cur] = lazyState.filters[cur];
+                }
+                return acc;
+            }, {}),
+        }
+    }, [lazyState]);
+
+    const onPage = (event) => {
+        setLazyState(event);
+    };
+
+    const onSort = (event) => {
+        event['first'] = 0;
+        event['page'] = 0;
+        setLazyState(event);
+    };
+
+    const onFilter = useCallback((event) => {
+        event['first'] = 0;
+        event['page'] = 0;
+        setLazyState(event);
+    }, [lazyState]);
+
+    const getCallback = (resp) => {
+        if (resp.status === 'SUCCESS') {
+            const {
+                body, totalRecords,
+                //currentPage, totalPages, pageSize
+            } = resp.data;
+            setTotalRecordsNum(totalRecords);
+            setItems(getFormattedData(body));
+        }
+        setLocalAsyncRequest(false);
+    }
+
+    const errGetCallbacks = () => {
+        setLocalAsyncRequest(false);
+    }
+
+    const getFormattedData = (data) => {
+        return data.map((d) => {
+            d.startDate = is(String, d.startDate) ? new Date(d.startDate) : (d.startDate ? d.startDate : '');
+            d.expirationDate = is(String, d.expirationDate) ? new Date(d.expirationDate) : (d.expirationDate ? d.expirationDate : '');
+            return d;
+        });
+    };
+
+    const actionsBodyTemplate = (rowData) => {
+        return <Link to={`/mie-domande/${rowData.applicationId}/soccorso/${rowData.id}`}>
+            <Button severity="info" label={__('Dettagli', 'gepafin')} size="small"/>
+        </Link>
+    }
+
+    const statusBodyTemplate = (rowData) => {
+        return <ProperBandoLabel status={rowData.status}/>;
+    };
+
+    const statusItemTemplate = (option) => {
+        return <Tag value={getBandoLabel(option)} severity={getBandoSeverity(option)}/>;
+    };
+
+    const statusFilterTemplate = (options) => {
+        return <Dropdown value={options.value} options={statuses}
+                         onChange={(e) => {
+                             options.filterCallback(e.value, options.index)
+                             const filters = { ...lazyState.filters };
+                             if (e.value) {
+                                 filters['status'] = { value: e.value, matchMode: 'equals' };
+                             } else {
+                                 delete filters['status'];
+                             }
+                             setLazyState({ ...lazyState, filters, first: 0 });
+                         }}
+                         itemTemplate={statusItemTemplate} placeholder={translationStrings.selectOneLabel}
+                         className="p-column-filter"
+                         showClear/>;
+    };
+
+    const dateFilterTemplate = (options) => {
+        return <Calendar value={options.value} onChange={(e) => options.filterCallback(e.value, options.index)}
+                         dateFormat="dd/mm/yy" placeholder="dd/mm/yyyy" mask="99/99/9999"/>;
+    };
+
+    const dateStartBodyTemplate = (rowData) => {
+        return getFormattedDateString(rowData.startDate);
+    };
+
+    const dateExpirationBodyTemplate = (rowData) => {
+        return rowData.expirationDate ? getFormattedDateString(rowData.expirationDate) : '';
+    };
+
+    useEffect(() => {
+        setLocalAsyncRequest(true);
+        const paginationQuery = getPaginationQuery();
+
+        AmendmentsService.getSoccorsiPaginated(userId, paginationQuery, getCallback, errGetCallbacks);
+    }, [lazyState, userId]);
+
+    return (
+        <div className="appPageSection__table">
+            <DataTable
+                value={items} stripedRows showGridlines
+                lazy filterDisplay="menu" dataKey="id" paginator
+                first={lazyState.first} rows={lazyState.rows} totalRecords={totalRecordsNum} onPage={onPage}
+                onSort={onSort} sortField={lazyState.sortField} sortOrder={lazyState.sortOrder}
+                onFilter={onFilter} filters={lazyState.filters} loading={localAsyncRequest}
+                emptyMessage={translationStrings.emptyMessage}>
+                <Column field="applicationId" header={__('ID domanda', 'gepafin')}
+                        sortable
+                        filterField="applicationId" filter
+                        filterMatchModeOptions={translationStrings.textFilterOptions}
+                        filterPlaceholder={__('Cerca', 'gepafin')}
+                        style={{ minWidth: '6rem' }}/>
+                <Column field="protocolNumber" header={__('Protocollo', 'gepafin')}
+                        style={{ minWidth: '6rem' }}/>
+                <Column field="callName" header={__('Bando', 'gepafin')}
+                        filterField="callName" filter
+                        filterMatchModeOptions={translationStrings.textFilterOptions}
+                        filterPlaceholder={__('Cerca il nome', 'gepafin')}
+                        style={{ minWidth: '10rem' }}/>
+                <Column field="companyName" header={__('Azienda Beneficiaria', 'gepafin')}
+                        filterField="companyName" filter
+                        filterMatchModeOptions={translationStrings.textFilterOptions}
+                        filterPlaceholder={__('Cerca il nome', 'gepafin')}
+                        style={{ minWidth: '8rem' }}/>
+                <Column header={__('Data richiesta', 'gepafin')}
+                        filterElement={dateFilterTemplate} filter
+                        filterField="startDate" dataType="date"
+                        filterMatchModeOptions={translationStrings.dateFilterOptions}
+                        style={{ minWidth: '8rem' }}
+                        body={dateStartBodyTemplate}/>
+                <Column header={__('Scadenza', 'gepafin')}
+                        filterElement={dateFilterTemplate} filter
+                        filterField="expirationDate" dataType="date"
+                        filterMatchModeOptions={translationStrings.dateFilterOptions}
+                        style={{ minWidth: '8rem' }}
+                        body={dateExpirationBodyTemplate}/>
+
+                <Column field="assignedUserName" header={__('Assegnato', 'gepafin')}
+                        style={{ minWidth: '8rem' }}/>
+                <Column field="status" header={__('Stato', 'gepafin')}
+                        filterElement={statusFilterTemplate} filter
+                        filterMatchModeOptions={translationStrings.statusFilterOptions}
+                        style={{ minWidth: '8rem' }}
+                        body={statusBodyTemplate}/>
+                <Column header={__('Azioni', 'gepafin')}
+                        body={actionsBodyTemplate}/>
+            </DataTable>
+        </div>
+    )
+}
+
+export default SoccorsiInstructorManagerMioTableAsync;

src/pages/SoccorsoIstruttorioMioInstructorManager/index.js

@@ -2,9 +2,12 @@ import React from 'react';
 import { __ } from '@wordpress/i18n';
 
 // components
-import InstructorManagerSoccorsiTable from './components/InstructorManagerSoccorsiTable';
+import SoccorsiInstructorManagerMioTableAsync from './components/SoccorsiInstructorManagerMioTableAsync';
+import { useStore } from '../../store';
 
 const SoccorsoIstruttorioMioInstructorManager = () => {
+    const userData = useStore().main.userData();
+
     return(
         <div className="appPage">
             <div className="appPage__pageHeader">
@@ -14,7 +17,7 @@ const SoccorsoIstruttorioMioInstructorManager = () => {
             <div className="appPage__spacer"></div>
 
             <div className="appPageSection">
-                <InstructorManagerSoccorsiTable/>
+                <SoccorsiInstructorManagerMioTableAsync userId={userData.id}/>
             </div>
         </div>
     )

src/pages/SoccorsoIstruttorioPreInstructor/components/PreInstructorSoccorsiTable/index.js

@@ -115,7 +115,7 @@ const PreInstructorSoccorsiTable = ({ userId = null }) => {
     };
 
     const dateFilterTemplate = (options) => {
-        return <Calendar value={options.value} onChange={(e) => options.filterCallback(e.value, options.index)} dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" mask="99/99/9999" />;
+        return <Calendar value={options.value} onChange={(e) => options.filterCallback(e.value, options.index)} dateFormat="dd/mm/yy" placeholder="dd/mm/yyyy" mask="99/99/9999" />;
     };
 
     const statusBodyTemplate = (rowData) => {

src/pages/SoccorsoIstruttorioPreInstructor/components/SoccorsiPreInstructorTableAsync/index.js

@@ -0,0 +1,220 @@
+import React, { useEffect, useState, useCallback } from 'react';
+import { __ } from '@wordpress/i18n';
+import { is, isEmpty, pathOr } from 'ramda';
+import { Link } from 'react-router-dom';
+
+import translationStrings from '../../../../translationStringsForComponents';
+
+// api
+import AmendmentsService from '../../../../service/amendments-service';
+
+//
+import getBandoLabel from '../../../../helpers/getBandoLabel';
+import getBandoSeverity from '../../../../helpers/getBandoSeverity';
+import getFormattedDateString from '../../../../helpers/getFormattedDateString';
+
+// components
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { Button } from 'primereact/button';
+import ProperBandoLabel from '../../../../components/ProperBandoLabel';
+import { Dropdown } from 'primereact/dropdown';
+import { Tag } from 'primereact/tag';
+import { Calendar } from 'primereact/calendar';
+
+const SoccorsiPreInstructorTableAsync = ({ userId = null }) => {
+    const [localAsyncRequest, setLocalAsyncRequest] = useState(false);
+    const [items, setItems] = useState(null);
+    const [totalRecordsNum, setTotalRecordsNum] = useState(0);
+    const [lazyState, setLazyState] = useState({
+        first: 0,
+        rows: 5,
+        page: 0,
+        sortField: null,
+        sortOrder: null,
+        filters: {
+            applicationId: { value: null, matchMode: 'contains' },
+            callName: { value: null, matchMode: 'contains' },
+            companyName: { value: null, matchMode: 'contains' },
+            startDate: { value: null, matchMode: 'date_is' },
+            expirationDate: { value: null, matchMode: 'date_is' },
+            status: { value: null, matchMode: 'equals' }
+        }
+    });
+    const statuses = [];
+
+    const getPaginationQuery = useCallback(() => {
+        let sortBy = {
+            columnName: 'applicationId',
+            sortDesc: true
+        };
+
+        if (lazyState.sortField) {
+            sortBy = {
+                columnName: lazyState.sortField,
+                sortDesc: lazyState.sortOrder === -1
+            }
+        }
+        return {
+            globalFilters: {
+                page: lazyState.page ? lazyState.page + 1 : 1,
+                limit: lazyState.rows,
+                sortBy
+            },
+            status: statuses,
+            filters: Object.keys(lazyState.filters).reduce((acc, cur) => {
+                const value = pathOr('', ['filters', cur, 'value'], lazyState);
+                if (!isEmpty(value)) {
+                    acc[cur] = lazyState.filters[cur];
+                }
+                return acc;
+            }, {}),
+        }
+    }, [lazyState]);
+
+    const onPage = (event) => {
+        setLazyState(event);
+    };
+
+    const onSort = (event) => {
+        event['first'] = 0;
+        event['page'] = 0;
+        setLazyState(event);
+    };
+
+    const onFilter = useCallback((event) => {
+        event['first'] = 0;
+        event['page'] = 0;
+        setLazyState(event);
+    }, [lazyState]);
+
+    const getCallback = (resp) => {
+        if (resp.status === 'SUCCESS') {
+            const {
+                body, totalRecords,
+                //currentPage, totalPages, pageSize
+            } = resp.data;
+            setTotalRecordsNum(totalRecords);
+            setItems(getFormattedData(body));
+        }
+        setLocalAsyncRequest(false);
+    }
+
+    const errGetCallbacks = () => {
+        setLocalAsyncRequest(false);
+    }
+
+    const getFormattedData = (data) => {
+        return data.map((d) => {
+            d.startDate = is(String, d.startDate) ? new Date(d.startDate) : (d.startDate ? d.startDate : '');
+            d.expirationDate = is(String, d.expirationDate) ? new Date(d.expirationDate) : (d.expirationDate ? d.expirationDate : '');
+            return d;
+        });
+    };
+
+    const actionsBodyTemplate = (rowData) => {
+        return <Link to={`/domande/${rowData.applicationId}/soccorso/${rowData.id}`}>
+            <Button severity="info" label={__('Dettagli', 'gepafin')} size="small"/>
+        </Link>
+    }
+
+    const statusBodyTemplate = (rowData) => {
+        return <ProperBandoLabel status={rowData.status}/>;
+    };
+
+    const statusItemTemplate = (option) => {
+        return <Tag value={getBandoLabel(option)} severity={getBandoSeverity(option)}/>;
+    };
+
+    const statusFilterTemplate = (options) => {
+        return <Dropdown value={options.value} options={statuses}
+                         onChange={(e) => {
+                             options.filterCallback(e.value, options.index)
+                             const filters = { ...lazyState.filters };
+                             if (e.value) {
+                                 filters['status'] = { value: e.value, matchMode: 'equals' };
+                             } else {
+                                 delete filters['status'];
+                             }
+                             setLazyState({ ...lazyState, filters, first: 0 });
+                         }}
+                         itemTemplate={statusItemTemplate} placeholder={translationStrings.selectOneLabel}
+                         className="p-column-filter"
+                         showClear/>;
+    };
+
+    const dateFilterTemplate = (options) => {
+        return <Calendar value={options.value} onChange={(e) => options.filterCallback(e.value, options.index)}
+                         dateFormat="dd/mm/yy" placeholder="dd/mm/yyyy" mask="99/99/9999"/>;
+    };
+
+    const dateStartBodyTemplate = (rowData) => {
+        return getFormattedDateString(rowData.startDate);
+    };
+
+    const dateExpirationBodyTemplate = (rowData) => {
+        return rowData.expirationDate ? getFormattedDateString(rowData.expirationDate) : '';
+    };
+
+    useEffect(() => {
+        setLocalAsyncRequest(true);
+        const paginationQuery = getPaginationQuery();
+
+        AmendmentsService.getSoccorsiPaginated(userId, paginationQuery, getCallback, errGetCallbacks);
+    }, [lazyState, userId]);
+
+    return (
+        <div className="appPageSection__table">
+            <DataTable
+                value={items} stripedRows showGridlines
+                lazy filterDisplay="menu" dataKey="id" paginator
+                first={lazyState.first} rows={lazyState.rows} totalRecords={totalRecordsNum} onPage={onPage}
+                onSort={onSort} sortField={lazyState.sortField} sortOrder={lazyState.sortOrder}
+                onFilter={onFilter} filters={lazyState.filters} loading={localAsyncRequest}
+                emptyMessage={translationStrings.emptyMessage}>
+                <Column field="applicationId" header={__('ID domanda', 'gepafin')}
+                        sortable
+                        filterField="applicationId" filter
+                        filterMatchModeOptions={translationStrings.textFilterOptions}
+                        filterPlaceholder={__('Cerca', 'gepafin')}
+                        style={{ minWidth: '6rem' }}/>
+                <Column field="protocolNumber" header={__('Protocollo', 'gepafin')}
+                        style={{ minWidth: '6rem' }}/>
+                <Column field="callName" header={__('Bando', 'gepafin')}
+                        filterField="callName" filter
+                        filterMatchModeOptions={translationStrings.textFilterOptions}
+                        filterPlaceholder={__('Cerca il nome', 'gepafin')}
+                        style={{ minWidth: '10rem' }}/>
+                <Column field="companyName" header={__('Azienda Beneficiaria', 'gepafin')}
+                        filterField="companyName" filter
+                        filterMatchModeOptions={translationStrings.textFilterOptions}
+                        filterPlaceholder={__('Cerca il nome', 'gepafin')}
+                        style={{ minWidth: '8rem' }}/>
+                <Column header={__('Data richiesta', 'gepafin')}
+                        filterElement={dateFilterTemplate} filter
+                        filterField="startDate" dataType="date"
+                        filterMatchModeOptions={translationStrings.dateFilterOptions}
+                        style={{ minWidth: '8rem' }}
+                        body={dateStartBodyTemplate}/>
+                <Column header={__('Scadenza', 'gepafin')}
+                        filterElement={dateFilterTemplate} filter
+                        filterField="expirationDate" dataType="date"
+                        filterMatchModeOptions={translationStrings.dateFilterOptions}
+                        style={{ minWidth: '8rem' }}
+                        body={dateExpirationBodyTemplate}/>
+
+                <Column field="assignedUserName" header={__('Assegnato', 'gepafin')}
+                        style={{ minWidth: '8rem' }}/>
+                <Column field="status" header={__('Stato', 'gepafin')}
+                        filterElement={statusFilterTemplate} filter
+                        filterMatchModeOptions={translationStrings.statusFilterOptions}
+                        style={{ minWidth: '8rem' }}
+                        body={statusBodyTemplate}/>
+                <Column header={__('Azioni', 'gepafin')}
+                        body={actionsBodyTemplate}/>
+            </DataTable>
+        </div>
+    )
+}
+
+export default SoccorsiPreInstructorTableAsync;

src/pages/SoccorsoIstruttorioPreInstructor/index.js

@@ -7,12 +7,12 @@ import NumberFlow from '@number-flow/react';
 import { useStore } from '../../store';
 
 // components
-import PreInstructorSoccorsiTable from './components/PreInstructorSoccorsiTable';
 import DashboardService from '../../service/dashboard-service';
+import SoccorsiPreInstructorTableAsync from './components/SoccorsiPreInstructorTableAsync';
 
 const SoccorsoIstruttorioPreInstructor = () => {
     const [mainStats, setMainStats] = useState({});
-    const userData = useStore().main.userData()
+    const userData = useStore().main.userData();
 
     const getStats = (data) => {
         if (data.status === 'SUCCESS') {
@@ -90,7 +90,7 @@ const SoccorsoIstruttorioPreInstructor = () => {
             <div className="appPage__spacer"></div>
 
             <div className="appPageSection">
-                <PreInstructorSoccorsiTable userId={userData.id}/>
+                <SoccorsiPreInstructorTableAsync userId={userData.id}/>
             </div>
         </div>
     )

src/pages/Users/components/AllUsersTable/index.js

@@ -96,7 +96,7 @@ const AllUsersTable = ({ updaterString = '' }) => {
 
     const dateFilterTemplate = (options) => {
         return <Calendar value={options.value} onChange={(e) => options.filterCallback(e.value, options.index)}
-                         dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" mask="99/99/9999"/>;
+                         dateFormat="dd/mm/yy" placeholder="dd/mm/yyyy" mask="99/99/9999"/>;
     };
 
     const nameBodyTemplate = (rowData) => {

src/service/amendments-service.js

@@ -20,6 +20,10 @@ export default class AmendmentsService {
         NetworkService.get(`${API_BASE_URL}/amendments/user`, callback, errCallback, queryParams);
     };
 
+    static getSoccorsiPaginated = (id, callback, errCallback, queryParams) => {
+        NetworkService.post(`${API_BASE_URL}/amendments/user/${id}/pagination`, callback, errCallback, queryParams);
+    };
+
     static createSoccorso = (body, callback, errCallback, queryParams) => {
         NetworkService.post(`${API_BASE_URL}/amendments`, body, callback, errCallback, queryParams);
     };