Merge branch 'develop' into master-sync/29-04-2025

package.json

@@ -7,54 +7,53 @@
     "@babel/preset-react": "7.26.3",
     "@date-fns/tz": "1.2.0",
     "@emailjs/browser": "4.4.1",
-    "@emotion/styled": "11.14.0",
-    "@number-flow/react": "0.5.5",
-    "@sentry/browser": "8.51.0",
-    "@stomp/stompjs": "7.0.0",
-    "@tanstack/react-table": "8.20.6",
-    "@wordpress/i18n": "5.16.0",
-    "@wordpress/react-i18n": "4.16.0",
+    "@number-flow/react": "0.5.9",
+    "@sentry/browser": "9.11.0",
+    "@stomp/stompjs": "7.1.1",
+    "@tanstack/react-table": "8.21.2",
+    "@wordpress/i18n": "5.21.0",
+    "@wordpress/react-i18n": "4.21.0",
     "codice-fiscale-js": "2.3.22",
     "copy-to-clipboard": "3.3.3",
     "deep-object-diff": "1.1.9",
-    "dompurify": "3.2.3",
+    "dompurify": "3.2.5",
     "expression-language": "1.2.0",
     "fast-deep-equal": "3.1.3",
     "hotkeys-js": "3.13.9",
-    "html-react-parser": "5.2.2",
+    "html-react-parser": "5.2.3",
     "jwt-decode": "4.0.0",
     "klona": "2.0.6",
     "leader-line-new": "1.1.9",
-    "luxon": "3.5.0",
-    "mathjs": "14.0.1",
+    "luxon": "3.6.1",
+    "mathjs": "14.4.0",
     "mustache": "4.2.0",
     "object-path-immutable": "4.1.2",
     "primeicons": "7.0.0",
-    "primereact": "10.9.2",
+    "primereact": "10.9.4",
     "quill": "2.0.3",
     "ramda": "0.30.1",
-    "react": "18.3.1",
+    "react": "19.1.0",
     "react-dnd": "16.0.1",
     "react-dnd-html5-backend": "16.0.1",
-    "react-dom": "18.3.1",
-    "react-hook-form": "7.54.2",
-    "react-router-dom": "7.1.3",
+    "react-dom": "19.1.0",
+    "react-hook-form": "7.55.0",
+    "react-router-dom": "7.5.0",
     "react-scripts": "5.0.1",
-    "recharts": "2.15.0",
+    "recharts": "2.15.2",
     "sockjs-client": "1.6.1",
     "validate.js": "0.13.1",
-    "zustand": "4.5.4",
-    "zustand-x": "3.0.4"
+    "zustand": "5.0.3",
+    "zustand-x": "6.1.0"
   },
   "devDependencies": {
-    "@babel/cli": "7.26.4",
-    "@babel/core": "7.26.7",
+    "@babel/cli": "7.27.0",
+    "@babel/core": "7.26.10",
     "@babel/plugin-syntax-jsx": "7.25.9",
-    "@wordpress/babel-plugin-makepot": "6.16.0",
+    "@wordpress/babel-plugin-makepot": "6.21.0",
     "babel-plugin-macros": "3.1.0",
     "node-wp-i18n": "1.2.7",
-    "sass": "1.83.4",
-    "sass-loader": "16.0.4"
+    "sass": "1.86.3",
+    "sass-loader": "16.0.5"
   },
   "scripts": {
     "start": "GENERATE_SOURCEMAP=false react-scripts start",

src/App.js

@@ -1,58 +1,60 @@
 import { useEffect } from 'react';
 import { BrowserRouter } from 'react-router-dom';
 import Routes from './routes';
-import { createI18n, setLocaleData } from '@wordpress/i18n';
-import { I18nProvider } from '@wordpress/react-i18n';
+import {
+    //createI18n,
+    setLocaleData } from '@wordpress/i18n';
+//import { I18nProvider } from '@wordpress/react-i18n';
 import './assets/scss/theme.scss';
 import { isEmpty, head } from 'ramda';
 import { addLocale, PrimeReactProvider } from 'primereact/api';
 
 // store
-import { useStore, storeSet, storeGet } from './store';
+import { useStoreValue, storeSet, storeGet } from './store';
 
 // api
 import AuthenticationService from './service/authentication-service';
 
-const i18n = createI18n({}, 'gepafin');
+//const i18n = createI18n({}, 'gepafin');
 
 function App() {
-    const role = useStore().main.getRole();
-    const chosenCompanyId = useStore().main.chosenCompanyId();
-    const isRedirectedOnceNoCompany = useStore().main.isRedirectedOnceNoCompany();
+    const role = useStoreValue('getRole');
+    const chosenCompanyId = useStoreValue('chosenCompanyId');
+    const isRedirectedOnceNoCompany = useStoreValue('isRedirectedOnceNoCompany');
     const value = {
         locale: 'it',
     };
 
-    const callback = (data) => {
-        if (data.status === 'SUCCESS') {
-            storeSet.main.userData(data.data);
+    const callback = (resp) => {
+        if (resp.status === 'SUCCESS') {
+            storeSet('userData', resp.data);
         } else {
-            storeSet.main.doLogout();
+            storeSet('doLogout');
         }
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
-    const errCallback = (data) => {
-        storeSet.main.unsetAsyncRequest();
+    const errCallback = () => {
+        storeSet('unsetAsyncRequest');
     }
 
     useEffect(() => {
         if (['ROLE_BENEFICIARY', 'ROLE_CONFIDI'].includes(role)) {
-            const userData = storeGet.main.userData();
+            const userData = storeGet('userData');
             if (userData.companies && !isEmpty(userData.companies)) {
-                storeSet.main.companies(userData.companies);
+                storeSet('companies', userData.companies);
                 const company = head(userData.companies.filter(o => o.id === chosenCompanyId));
 
                 if (!company) {
-                    storeSet.main.chosenCompanyId(userData.companies[0].id);
+                    storeSet('chosenCompanyId', userData.companies[0].id);
                 }
             } else {
-                storeSet.main.chosenCompanyId(0);
+                storeSet('chosenCompanyId', 0);
                 const { origin, href } = window.location;
                 const url = `${origin}/agguingi-azienda`;
 
                 if (!isRedirectedOnceNoCompany && url !== href) {
-                    storeSet.main.isRedirectedOnceNoCompany(true);
+                    storeSet('isRedirectedOnceNoCompany', true);
                     window.location.replace('/agguingi-azienda')
                 }
             }
@@ -60,7 +62,7 @@ function App() {
     }, [role]);
 
     useEffect(() => {
-        storeSet.main.setAsyncRequest();
+        storeSet('setAsyncRequest');
         AuthenticationService.me(callback, errCallback);
 
         addLocale('it', {
@@ -116,6 +118,17 @@ function App() {
     }, []);
 
     return (
+        <BrowserRouter>
+            <PrimeReactProvider value={value}>
+                <Routes role={role} chosenCompanyId={chosenCompanyId}/>
+            </PrimeReactProvider>
+        </BrowserRouter>
+    );
+}
+
+export default App;
+
+/*
 <I18nProvider i18n={i18n}>
             <BrowserRouter>
                 <PrimeReactProvider value={value}>
@@ -123,7 +136,4 @@ function App() {
                 </PrimeReactProvider>
             </BrowserRouter>
         </I18nProvider>
-    );
-}
-
-export default App;
+        */

src/assets/scss/components/formBuilder.scss

@@ -256,6 +256,10 @@
     grid-template-columns: 4.5fr 2.4fr 1fr 1.4fr 0.7fr;
   }
 
+  &.tableRowCsv {
+    grid-template-columns: 3fr 5fr 1fr;
+  }
+
   > div {
     display: flex;
     align-items: center;

src/components/FileuploadApplicationSignedPdf/index.js

@@ -68,7 +68,7 @@ const FileuploadApplicationSignedPdf = ({
                         disabled={disabled}
                         icon="pi pi-times"
                         severity="danger"
-                        aria-label={__('Anulla', 'gepafin')}
+                        aria-label={__('Annulla', 'gepafin')}
                         onClick={() => onTemplateRemove(file)}/>
                 </div>
             </div>

src/components/FileuploadDelega/index.js

@@ -67,7 +67,7 @@ const FileuploadDelega = ({
                         disabled={disabled}
                         icon="pi pi-times"
                         severity="danger"
-                        aria-label={__('Anulla', 'gepafin')}
+                        aria-label={__('Annulla', 'gepafin')}
                         onClick={() => onTemplateRemove(file)}/>
                 </div>
             </div>

src/components/FormField/components/Fileupload/index.js

@@ -104,7 +104,7 @@ const Fileupload = ({
                             severity="danger"
                             type="button"
                             disabled={disabled}
-                            aria-label={__('Anulla', 'gepafin')}
+                            aria-label={__('Annulla', 'gepafin')}
                             onClick={(e) => confirmDelete(e, file)}/>
                 </div>
             </div>

src/components/FormField/components/FileuploadAsync/index.js

@@ -85,7 +85,7 @@ const FileuploadAsync = ({
                         disabled={disabled}
                         icon="pi pi-times"
                         severity="danger"
-                        aria-label={__('Anulla', 'gepafin')}
+                        aria-label={__('Annulla', 'gepafin')}
                         onClick={() => onTemplateRemove(file)}/>
                 </div>
             </div>

src/components/FormFieldRepeaterFaq/index.js

@@ -109,7 +109,7 @@ const FormFieldRepeaterFaq = ({
 
     const footerEditDialog = () => {
         return <div>
-            <Button type="button" disabled={disabled} label={__('Anulla', 'gepafin')} onClick={hideEditDialog}
+            <Button type="button" disabled={disabled} label={__('Annulla', 'gepafin')} onClick={hideEditDialog}
                     outlined/>
             <Button
                 type="button"

src/components/NotificationsSidebar/index.js

@@ -5,7 +5,7 @@ import SockJS from 'sockjs-client';
 import { Stomp } from '@stomp/stompjs';
 
 // store
-import { storeGet, useStore } from '../../store';
+import { storeGet, useStoreValue } from '../../store';
 
 // api
 import NotificationService from '../../service/notification-service';
@@ -24,8 +24,8 @@ import PaginatorBasic from '../PaginatorBasic';
 const socketUrl = process.env.REACT_APP_API_ADDRESS_WS;
 
 const NotificationsSidebar = () => {
-    const chosenCompanyId = useStore().main.chosenCompanyId();
-    const userData = useStore().main.userData();
+    const chosenCompanyId = useStoreValue('chosenCompanyId');
+    const userData = useStoreValue('userData');
     const [activeIndex, setActiveIndex] = useState(0);
     const [loading, setLoading] = useState(false);
     const [notificationsVisible, setNotificationsVisible] = useState(false);
@@ -82,8 +82,8 @@ const NotificationsSidebar = () => {
     }
 
     const fetchMessages = useCallback((status = 'UNREAD') => {
-        const chosenCompanyId = storeGet.main.chosenCompanyId();
-        const userData = storeGet.main.userData();
+        const chosenCompanyId = storeGet('chosenCompanyId');
+        const userData = storeGet('userData');
         const role = pathOr('', ['role', 'roleType'], userData);
         const bodyParams = getPaginationQuery(status, currentPage);
 

src/components/TopBarProfileMenu/index.js

@@ -4,7 +4,7 @@ import { useNavigate } from 'react-router-dom';
 import { intersection } from 'ramda';
 
 // store
-import { storeSet, useStore, useTrackedStore } from '../../store';
+import { storeSet, useStoreValue, useTrackedValue } from '../../store';
 
 // components
 import { Menu } from 'primereact/menu';
@@ -12,11 +12,11 @@ import { Toast } from 'primereact/toast';
 
 const TopBarProfileMenu = ({ menuLeftRef }) => {
     const navigate = useNavigate();
-    const userData = useTrackedStore().main.userData();
+    const userData = useTrackedValue('userData');
     const fulleName = `${userData.firstName} ${userData.lastName}`;
-    const permissions = useStore().main.getPermissions();
-    const companies = useStore().main.companies();
-    const chosenCompanyId = useStore().main.chosenCompanyId()
+    const permissions = useStoreValue('getPermissions');
+    const companies = useStoreValue('companies');
+    const chosenCompanyId = useStoreValue('chosenCompanyId')
     const [companyItems, setCompanyItems] = useState([]);
     const toast = useRef(null);
     let items = [
@@ -75,7 +75,7 @@ const TopBarProfileMenu = ({ menuLeftRef }) => {
             label: __('Logout', 'gepafin'),
             icon: 'pi pi-sign-out',
             command: () => {
-                storeSet.main.doLogout();
+                storeSet('doLogout');
                 window.location.reload();
             },
             enable: true
@@ -84,7 +84,7 @@ const TopBarProfileMenu = ({ menuLeftRef }) => {
 
     const switchCompany = (id) => {
         if (chosenCompanyId !== id) {
-            storeSet.main.chosenCompanyId(id);
+            storeSet('chosenCompanyId', id);
 
             if (toast.current) {
                 toast.current.show({

src/components/UnsavedChangesDetector/index.js

@@ -52,7 +52,7 @@ const UnsavedChangesDetector = ({ getValuesFn }) => {
                 formData.endTime = tzAwareDate.toISOString().substring(11, 16);
             }
         }
-        const initial = storeGet.main.formInitialData();
+        const initial = storeGet('formInitialData');
 
         const isEqual = equal(initial, formData);
         // debug

src/configData.js

@@ -35,7 +35,7 @@ const dynamicDataForTextinput = [
     { label: 'cognome utente', value: 'user.lastName' },
     { label: 'numero di telefono utente', value: 'user.phoneNumber' },
     { label: 'codice fiscale utente', value: 'user.codiceFiscale' },
-    { label: 'nome del rappresentante', value: 'custom.legalRepresentant' },
+    { label: 'nome e cognome del rappresentante', value: 'custom.legalRepresentant' },
     { label: 'nome e cognome utente', value: 'custom.userFullName' },
 ]
 

src/helpers/getQueryParamsForPaginatedEndpoint.js

@@ -1,9 +1,9 @@
 import { isEmpty, pathOr } from 'ramda';
 import formatDateString from './formatDateString';
 
-const getQueryParamsForPaginatedEndpoint = (lazyState, statuses) => {
+const getQueryParamsForPaginatedEndpoint = (lazyState, statuses, sortByCol = 'applicationId', extraCfg = {}) => {
     let sortBy = {
-        columnName: 'applicationId',
+        columnName: sortByCol,
         sortDesc: true
     };
 
@@ -13,6 +13,7 @@ const getQueryParamsForPaginatedEndpoint = (lazyState, statuses) => {
             sortDesc: lazyState.sortOrder === -1
         }
     }
+
     return {
         globalFilters: {
             page: lazyState.page ? lazyState.page + 1 : 1,
@@ -22,13 +23,15 @@ const getQueryParamsForPaginatedEndpoint = (lazyState, statuses) => {
         status: statuses,
         filters: Object.keys(lazyState.filters).reduce((acc, cur) => {
             const value = pathOr('', ['filters', cur, 'value'], lazyState);
+            const matchMode = pathOr('', ['filters', cur, 'matchMode'], lazyState);
             if (!isEmpty(value)) {
                 acc[cur] = typeof value.getMonth === 'function'
-                    ? formatDateString(value)
+                    ? {value: formatDateString(value), matchMode}
                     : lazyState.filters[cur];
             }
             return acc;
         }, {}),
+        ...extraCfg
     }
 }
 

src/helpers/set404FromErrorResponse.js

@@ -2,7 +2,7 @@
 
 const set404FromErrorResponse = (data) => {
     if (data && data.status === 'NOT_FOUND') {
-        //storeSet.main.isError404(true);
+        //storeSet('isError404', true);
     }
 }
 

src/layouts/DefaultLayout/components/AppSidebar/index.js

@@ -3,14 +3,14 @@ import { __ } from '@wordpress/i18n';
 import { intersection, is } from 'ramda';
 
 // store
-import { useStore } from '../../../../store';
+import { useStoreValue } from '../../../../store';
 
 // components
 import { NavLink } from 'react-router-dom';
 import HelpIcon from '../../../../icons/HelpIcon';
 
 const AppSidebar = () => {
-    const permissions = useStore().main.getPermissions();
+    const permissions = useStoreValue('getPermissions');
 
     const items = [
         {

src/layouts/DefaultLayout/components/AppTopbar/index.js

@@ -7,13 +7,13 @@ import LogoIcon from '../../../../icons/LogoIcon';
 import { Button } from 'primereact/button';
 import TopBarProfileMenu from '../../../../components/TopBarProfileMenu';
 import NotificationsSidebar from '../../../../components/NotificationsSidebar';
-import { useStore } from '../../../../store';
+import { useStoreValue } from '../../../../store';
 import { head } from 'ramda';
 
 const AppTopbar = () => {
     const menuLeft = useRef(null);
-    const companies = useStore().main.companies();
-    const chosenCompanyId = useStore().main.chosenCompanyId();
+    const companies = useStoreValue('companies');
+    const chosenCompanyId = useStoreValue('chosenCompanyId');
     const company = head(companies.filter(o => o.id === chosenCompanyId));
 
     const startContent = <Link to="/">

src/layouts/DefaultLayout/index.js

@@ -3,18 +3,18 @@ import { __ } from '@wordpress/i18n';
 import { useLocation } from 'react-router-dom';
 
 // store
-import { useStore, storeSet } from '../../store';
+import { useStoreValue, storeSet } from '../../store';
 
 // components
 import AppSidebar from './components/AppSidebar';
 import AppTopbar from './components/AppTopbar';
 
 const DefaultLayout = ({ children }) => {
-    const isError404 = useStore().main.isError404();
+    const isError404 = useStoreValue('isError404');
     const location = useLocation();
 
     useEffect(() => {
-        storeSet.main.isError404(false);
+        storeSet('isError404', false);
     }, [location]);
 
     return (

src/pages/AddCompany/index.js

@@ -6,7 +6,7 @@ import { useDebounce } from 'primereact/hooks';
 import { useNavigate } from 'react-router-dom';
 
 // store
-import { storeSet, useStore, storeGet } from '../../store';
+import { storeSet, useStoreValue, storeGet } from '../../store';
 
 // components
 import { Messages } from 'primereact/messages';
@@ -26,7 +26,7 @@ import set404FromErrorResponse from '../../helpers/set404FromErrorResponse';
 
 const AddCompany = () => {
     const navigate = useNavigate();
-    const isAsyncRequest = useStore().main.isAsyncRequest();
+    const isAsyncRequest = useStoreValue('isAsyncRequest');
     const infoMsgs = useRef(null);
     const [, debouncedPivaValue, setInputPiva] = useDebounce('', 1000);
     const [vatCheckResponse, setVatCheckResponse] = useState({});
@@ -61,7 +61,7 @@ const AddCompany = () => {
 
     const onSubmit = (formData) => {
         infoMsgs.current.clear();
-        storeSet.main.setAsyncRequest();
+        storeSet('setAsyncRequest');
         const submitData = {
             ...formData,
             vatCheckResponse
@@ -73,7 +73,7 @@ const AddCompany = () => {
     const updateCallback = (data) => {
         if (data.status === 'SUCCESS') {
             const company = klona(data.data);
-            const companies = storeGet.main.companies();
+            const companies = storeGet('companies');
             const existingCompany = head(companies.filter(o => o.id === company.id));
             let newCompanies = [];
 
@@ -81,10 +81,10 @@ const AddCompany = () => {
                 newCompanies = companies.map(o => o.id === company.id ? company : o)
             } else {
                 newCompanies = [...companies, company];
-                storeSet.main.chosenCompanyId(company.id);
+                storeSet('chosenCompanyId', company.id);
             }
 
-            storeSet.main.companies(newCompanies);
+            storeSet('companies', newCompanies);
 
             if (company.isLegalRepresentant) {
                 navigate('/');
@@ -93,12 +93,12 @@ const AddCompany = () => {
             }
 
         }
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const updateError = (data) => {
         set404FromErrorResponse(data);
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const checkVatNumber = (value) => {
@@ -106,7 +106,7 @@ const AddCompany = () => {
         const isValid = isPIVA(value);
 
         if (isValid) {
-            storeSet.main.setAsyncRequest();
+            storeSet('setAsyncRequest');
             CompanyService.checkVat(checkVatCallback, errCheckVatCallback, [['vatNumber', value]])
         } else {
             setEmptyValues();
@@ -139,13 +139,13 @@ const AddCompany = () => {
             setEmptyValues();
         }
         trigger();
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const errCheckVatCallback = (data) => {
         setEmptyValues();
         set404FromErrorResponse(data);
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     /*const shouldDisableFiscalCode = () => {

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

@@ -104,8 +104,7 @@ const AllBandiTable = () => {
             onChange={(e) => options.filterCallback(e.value, options.index)}
             itemTemplate={statusItemTemplate}
             placeholder={translationStrings.selectOneLabel}
-            className="p-column-filter"
-            showClear />;
+            className="p-column-filter"/>;
     };
 
     const statusItemTemplate = (option) => {
@@ -131,11 +130,13 @@ const AllBandiTable = () => {
                         filter sortable
                         filterPlaceholder={__('Cerca', 'gepafin')}
                         style={{ minWidth: '8rem' }}/>
-                <Column header={__('Data Pubblicazione', 'gepafin')} filterField="dateStart" dataType="date"
+                <Column header={__('Data Pubblicazione', 'gepafin')}
+                        filterField="dateStart" dataType="date"
                         style={{ minWidth: '8rem' }}
                         body={dateStartBodyTemplate} filter
                         filterElement={dateFilterTemplate}/>
-                <Column header={__('Data Scadenza', 'gepafin')} filterField="dateEnd" dataType="date"
+                <Column header={__('Data Scadenza', 'gepafin')}
+                        filterField="dateEnd" dataType="date"
                         style={{ minWidth: '8rem' }}
                         body={dateEndBodyTemplate} filter
                         filterElement={dateFilterTemplate}/>

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

@@ -0,0 +1,219 @@
+import React, { useEffect, useState, useCallback } from 'react';
+import { __ } from '@wordpress/i18n';
+import { Link } from 'react-router-dom';
+
+import translationStrings from '../../../../translationStringsForComponents';
+
+// api
+import BandoService from '../../../../service/bando-service';
+import ApplicationService from '../../../../service/application-service';
+
+// tools
+import getTimeParsedFromString from '../../../../helpers/getTimeParsedFromString';
+import getTimeFromISOstring from '../../../../helpers/getTimeFromISOstring';
+import getFormattedDateString from '../../../../helpers/getFormattedDateString';
+import getBandoLabel from '../../../../helpers/getBandoLabel';
+import getBandoSeverity from '../../../../helpers/getBandoSeverity';
+import getQueryParamsForPaginatedEndpoint from '../../../../helpers/getQueryParamsForPaginatedEndpoint';
+import set404FromErrorResponse from '../../../../helpers/set404FromErrorResponse';
+
+// 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 AllBandiTableAsync = () => {
+    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: {
+            name: { value: null, matchMode: 'contains' },
+            startDate: { value: null, matchMode: 'dateIs' },
+            endDate: { value: null, matchMode: 'dateIs' },
+            status: { value: null, matchMode: 'equals' }
+        }
+    });
+    const statuses = ['DRAFT', 'PUBLISH', 'EXPIRED'];
+
+    const getPaginationQuery = useCallback(() => getQueryParamsForPaginatedEndpoint(lazyState, statuses, 'id'), [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 = new Date(d.dates[0]);
+            d.endDate = new Date(d.dates[1]);
+
+            return d;
+        });
+    };
+
+    const actionsBodyTemplate = (rowData) => {
+        return <div className="appPageSection__tableActions">
+            <Link to={`/bandi/${rowData.id}`}>
+                <Button severity="info" label={__('Mostra', 'gepafin')} icon="pi pi-eye" size="small" iconPos="right"/>
+            </Link>
+            {['PUBLISH', 'EXPIRED'].includes(rowData.status)
+                ? <Button type="button"
+                          size="small"
+                          icon="pi pi-receipt"
+                          iconPos="right"
+                          label={__('CSV', 'gepafin')}
+                          onClick={() => exportToCSV(rowData.id)}/> : null}
+        </div>
+    }
+
+    const exportToCSV = (applicationId) => {
+        setLocalAsyncRequest(true);
+        ApplicationService.downloadCsvReport(
+            applicationId,
+            (resp) => getCsvReportback(resp, applicationId),
+            errCsvReportCallback
+        )
+    }
+
+    const getCsvReportback = (resp, applicationId) => {
+        const file = new Blob([resp], { type: 'text/csv' });
+        const url = window.URL.createObjectURL(file);
+        const link = document.createElement('a');
+        link.href = url;
+        link.setAttribute('download', `call-${applicationId}-applications-report.csv`);
+        document.body.appendChild(link);
+        link.click();
+        link.remove();
+        setLocalAsyncRequest(false);
+    }
+
+    const errCsvReportCallback = (resp) => {
+        set404FromErrorResponse(resp);
+        setLocalAsyncRequest(false);
+    }
+
+    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"/>;
+    };
+
+    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) => {
+        const startTimeObj = getTimeParsedFromString(rowData.startTime);
+        return getFormattedDateString(rowData.startDate) + ' ' + getTimeFromISOstring(startTimeObj);
+    };
+
+    const dateEndBodyTemplate = (rowData) => {
+        const endTimeObg = getTimeParsedFromString(rowData.endTime);
+        return getFormattedDateString(rowData.endDate) + ' ' + getTimeFromISOstring(endTimeObg);
+    };
+
+    useEffect(() => {
+        setLocalAsyncRequest(true);
+        const paginationQuery = getPaginationQuery();
+
+        BandoService.getBandiPaginated(paginationQuery, getCallback, errGetCallbacks);
+    }, [lazyState]);
+
+    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="name"
+                        sortable
+                        filterField="name" filter
+                        filterMatchModeOptions={translationStrings.textFilterOptions}
+                        filterPlaceholder={__('Cerca il nome', 'gepafin')}
+                        header={__('Nome Bando', 'gepafin')}
+                        style={{ minWidth: '8rem' }}/>
+                <Column header={__('Data Pubblicazione', 'gepafin')}
+                        filterElement={dateFilterTemplate} filter
+                        filterField="startDate" dataType="date"
+                        filterMatchModeOptions={translationStrings.dateFilterOptions}
+                        style={{ minWidth: '8rem' }}
+                        body={dateStartBodyTemplate}/>
+                <Column header={__('Data Scadenza', 'gepafin')}
+                        filterElement={dateFilterTemplate} filter
+                        filterField="endDate" dataType="date"
+                        filterMatchModeOptions={translationStrings.dateFilterOptions}
+                        style={{ minWidth: '8rem' }}
+                        body={dateEndBodyTemplate}/>
+                <Column field="status"
+                        filterElement={statusFilterTemplate} filter
+                        filterMatchModeOptions={translationStrings.statusFilterOptions}
+                        header={__('Stato', 'gepafin')}
+                        style={{ minWidth: '7rem' }}
+                        body={statusBodyTemplate}/>
+                <Column header={__('Azioni', 'gepafin')}
+                        body={actionsBodyTemplate}/>
+            </DataTable>
+        </div>
+    )
+}
+
+export default AllBandiTableAsync;

src/pages/Bandi/index.js

@@ -3,8 +3,8 @@ import { __ } from '@wordpress/i18n';
 import { useNavigate } from 'react-router-dom';
 
 // components
-import AllBandiTable from './components/AllBandiTable';
 import { Button } from 'primereact/button';
+import AllBandiTableAsync from './components/AllBandiTableAsync';
 
 const Bandi = () => {
     const navigate = useNavigate();
@@ -28,7 +28,7 @@ const Bandi = () => {
                         label={__('Crea nuovo bando')} icon="pi pi-plus" iconPos="right"/>
                 </div>
 
-                <AllBandiTable/>
+                <AllBandiTableAsync/>
             </div>
         </div>
     )

src/pages/BandiBeneficiario/components/AllBandiAccordion/index.js

@@ -5,7 +5,7 @@ import { wrap } from 'object-path-immutable';
 import { useNavigate } from 'react-router-dom';
 
 // store
-import { storeGet, storeSet, useStore } from '../../../../store';
+import { storeGet, storeSet, useStoreValue } from '../../../../store';
 
 // tools
 import getBandoSeverity from '../../../../helpers/getBandoSeverity';
@@ -36,9 +36,9 @@ import { Badge } from 'primereact/badge';
 const REACT_APP_HUB_ID = process.env.REACT_APP_HUB_ID;
 
 const AllBandiAccordion = ({ showOnlyPreferred = false }) => {
-    const chosenCompanyId = useStore().main.chosenCompanyId();
-    const companies = useStore().main.companies();
-    const isAsyncRequest = useStore().main.isAsyncRequest();
+    const chosenCompanyId = useStoreValue('chosenCompanyId');
+    const companies = useStoreValue('companies');
+    const isAsyncRequest = useStoreValue('isAsyncRequest');
     const [items, setItems] = useState(null);
     const [filters, setFilters] = useState(null);
     const [expandedRows, setExpandedRows] = useState(null);
@@ -49,7 +49,7 @@ const AllBandiAccordion = ({ showOnlyPreferred = false }) => {
         const existingCompany = head(companies.filter(o => o.id === chosenCompanyId));
 
         if (existingCompany && !isAsyncRequest) {
-            storeSet.main.setAsyncRequest();
+            storeSet('setAsyncRequest');
             BandoService.getBandi(getCallback, errGetCallbacks, [
                 ['companyId', chosenCompanyId],
                 ['onlyPreferredCall', showOnlyPreferred]
@@ -62,12 +62,12 @@ const AllBandiAccordion = ({ showOnlyPreferred = false }) => {
             setItems(getFormattedBandiData(data.data));
             setStatuses(uniq(data.data.map(o => o.status)))
         }
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const errGetCallbacks = (data) => {
         set404FromErrorResponse(data);
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const getFormattedBandiData = (data) => {
@@ -116,8 +116,7 @@ const AllBandiAccordion = ({ showOnlyPreferred = false }) => {
     const statusFilterTemplate = (options) => {
         return <Dropdown value={options.value} options={statuses}
                          onChange={(e) => options.filterCallback(e.value, options.index)}
-                         itemTemplate={statusItemTemplate} placeholder={translationStrings.selectOneLabel} className="p-column-filter"
-                         showClear/>;
+                         itemTemplate={statusItemTemplate} placeholder={translationStrings.selectOneLabel} className="p-column-filter"/>;
     };
 
     const statusItemTemplate = (option) => {
@@ -125,7 +124,7 @@ const AllBandiAccordion = ({ showOnlyPreferred = false }) => {
     };
 
     const addToFavourites = (id, preferredId) => {
-        const companyId = storeGet.main.chosenCompanyId()
+        const companyId = storeGet('chosenCompanyId')
         const data = {
             companyId,
             callId: id

src/pages/BandiBeneficiario/index.js

@@ -4,15 +4,15 @@ import { Link } from 'react-router-dom';
 import { head, isEmpty } from 'ramda';
 
 // store
-import { useStore } from '../../store';
+import { useStoreValue } from '../../store';
 
 // components
 import AllBandiAccordion from './components/AllBandiAccordion';
 import ErrorBoundary from '../../components/ErrorBoundary';
 
 const BandiBeneficiario = () => {
-    const chosenCompanyId = useStore().main.chosenCompanyId();
-    const companies = useStore().main.companies();
+    const chosenCompanyId = useStoreValue('chosenCompanyId');
+    const companies = useStoreValue('companies');
     const company = head(companies.filter(o => o.id === chosenCompanyId));
 
     return (

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

@@ -0,0 +1,180 @@
+import React, { useEffect, useState, useCallback } from 'react';
+import { __ } from '@wordpress/i18n';
+import { Link } from 'react-router-dom';
+
+import translationStrings from '../../../../translationStringsForComponents';
+
+// api
+import BandoService from '../../../../service/bando-service';
+
+// tools
+import getTimeParsedFromString from '../../../../helpers/getTimeParsedFromString';
+import getTimeFromISOstring from '../../../../helpers/getTimeFromISOstring';
+import getFormattedDateString from '../../../../helpers/getFormattedDateString';
+import getBandoLabel from '../../../../helpers/getBandoLabel';
+import getBandoSeverity from '../../../../helpers/getBandoSeverity';
+import getQueryParamsForPaginatedEndpoint from '../../../../helpers/getQueryParamsForPaginatedEndpoint';
+
+// 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 AllBandiPreInstructorTableAsync = () => {
+    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: {
+            name: { value: null, matchMode: 'contains' },
+            startDate: { value: null, matchMode: 'dateIs' },
+            endDate: { value: null, matchMode: 'dateIs' },
+            status: { value: null, matchMode: 'equals' }
+        }
+    });
+    const statuses = ['DRAFT','PUBLISH','EXPIRED'];
+
+    const getPaginationQuery = useCallback(() => getQueryParamsForPaginatedEndpoint(lazyState, statuses, 'id'), [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 = new Date(d.dates[0]);
+            d.endDate = new Date(d.dates[1]);
+
+            return d;
+        });
+    };
+
+    const actionsBodyTemplate = (rowData) => {
+        return <Link to={`/bandi/${rowData.id}`}>
+            <Button severity="info" label={__('Mostra', 'gepafin')} icon="pi pi-eye" size="small" iconPos="right" />
+        </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"/>;
+    };
+
+    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) => {
+        const startTimeObj = getTimeParsedFromString(rowData.startTime);
+        return getFormattedDateString(rowData.startDate) + ' ' + getTimeFromISOstring(startTimeObj);
+    };
+
+    const dateEndBodyTemplate = (rowData) => {
+        const endTimeObg = getTimeParsedFromString(rowData.endTime);
+        return getFormattedDateString(rowData.endDate)  + ' ' + getTimeFromISOstring(endTimeObg);
+    };
+
+    useEffect(() => {
+        setLocalAsyncRequest(true);
+        const paginationQuery = getPaginationQuery();
+
+        BandoService.getBandiPaginated(paginationQuery, getCallback, errGetCallbacks);
+    }, [lazyState]);
+
+    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="name"
+                        sortable
+                        filterField="name" filter
+                        filterMatchModeOptions={translationStrings.textFilterOptions}
+                        filterPlaceholder={__('Cerca il nome', 'gepafin')}
+                        header={__('Nome Bando', 'gepafin')}
+                        style={{ minWidth: '8rem' }}/>
+                <Column header={__('Data Pubblicazione', 'gepafin')}
+                        filterElement={dateFilterTemplate} filter
+                        filterField="startDate" dataType="date"
+                        filterMatchModeOptions={translationStrings.dateFilterOptions}
+                        style={{ minWidth: '8rem' }}
+                        body={dateStartBodyTemplate}/>
+                <Column header={__('Data Scadenza', 'gepafin')}
+                        filterElement={dateFilterTemplate} filter
+                        filterField="endDate" dataType="date"
+                        filterMatchModeOptions={translationStrings.dateFilterOptions}
+                        style={{ minWidth: '8rem' }}
+                        body={dateEndBodyTemplate}/>
+                <Column field="status"
+                        filterElement={statusFilterTemplate} filter
+                        filterMatchModeOptions={translationStrings.statusFilterOptions}
+                        header={__('Stato', 'gepafin')}
+                        style={{ minWidth: '7rem' }}
+                        body={statusBodyTemplate} />
+                <Column header={__('Azioni', 'gepafin')}
+                        body={actionsBodyTemplate}/>
+            </DataTable>
+        </div>
+    )
+}
+
+export default AllBandiPreInstructorTableAsync;

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

@@ -103,8 +103,7 @@ const AllBandiTable = () => {
             onChange={(e) => options.filterCallback(e.value, options.index)}
             itemTemplate={statusItemTemplate}
             placeholder={translationStrings.selectOneLabel}
-            className="p-column-filter"
-            showClear />;
+            className="p-column-filter"/>;
     };
 
     const statusItemTemplate = (option) => {

src/pages/BandiPreInstructor/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { __ } from '@wordpress/i18n';
 
 // components
-import AllBandiTable from './components/AllBandiTable';
+import AllBandiPreInstructorTableAsync from './components/AllBandiPreInstructorTableAsync';
 
 const BandiPreInstructor = () => {
     return(
@@ -14,7 +14,7 @@ const BandiPreInstructor = () => {
             <div className="appPage__spacer"></div>
 
             <div className="appPageSection">
-                <AllBandiTable/>
+                <AllBandiPreInstructorTableAsync/>
             </div>
         </div>
     )

src/pages/BandiPreferredBeneficiario/components/AllBandiPreferredAccordion/index.js

@@ -5,7 +5,7 @@ import { wrap } from 'object-path-immutable';
 import { useNavigate } from 'react-router-dom';
 
 // store
-import { storeGet, storeSet, useStore } from '../../../../store';
+import { storeGet, storeSet, useStoreValue } from '../../../../store';
 
 // tools
 import getBandoSeverity from '../../../../helpers/getBandoSeverity';
@@ -29,9 +29,9 @@ import translationStrings from '../../../../translationStringsForComponents';
 
 
 const AllBandiPreferredAccordion = () => {
-    const chosenCompanyId = useStore().main.chosenCompanyId();
-    const companies = useStore().main.companies();
-    const isAsyncRequest = useStore().main.isAsyncRequest();
+    const chosenCompanyId = useStoreValue('chosenCompanyId');
+    const companies = useStoreValue('companies');
+    const isAsyncRequest = useStoreValue('isAsyncRequest');
     const [items, setItems] = useState(null);
     const [filters, setFilters] = useState(null);
     const [expandedRows, setExpandedRows] = useState(null);
@@ -42,8 +42,8 @@ const AllBandiPreferredAccordion = () => {
         const existingCompany = head(companies.filter(o => o.id === chosenCompanyId));
 
         if (existingCompany) {
-            storeSet.main.setAsyncRequest();
-            const userData = storeGet.main.userData();
+            storeSet('setAsyncRequest');
+            const userData = storeGet('userData');
             PreferredBandoService.getPreferredCalls(getCallback, errGetCallbacks, [
                 ['companyId', chosenCompanyId],
                 ['userId', userData.id]
@@ -56,12 +56,12 @@ const AllBandiPreferredAccordion = () => {
             setItems(getFormattedBandiData(data.data));
             setStatuses(uniq(data.data.map(o => o.status)))
         }
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const errGetCallbacks = (data) => {
         set404FromErrorResponse(data);
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const getFormattedBandiData = (data) => {
@@ -96,7 +96,11 @@ const AllBandiPreferredAccordion = () => {
     };
 
     const statusFilterTemplate = (options) => {
-        return <Dropdown value={options.value} options={statuses} onChange={(e) => options.filterCallback(e.value, options.index)} itemTemplate={statusItemTemplate} placeholder={translationStrings.selectOneLabel} className="p-column-filter" showClear />;
+        return <Dropdown value={options.value}
+                         options={statuses}
+                         onChange={(e) => options.filterCallback(e.value, options.index)}
+                         itemTemplate={statusItemTemplate} placeholder={translationStrings.selectOneLabel}
+                         className="p-column-filter"/>;
     };
 
     const statusItemTemplate = (option) => {
@@ -104,7 +108,7 @@ const AllBandiPreferredAccordion = () => {
     };
 
     const addToFavourites = (id, preferredId) => {
-        const companyId = storeGet.main.chosenCompanyId()
+        const companyId = storeGet('chosenCompanyId')
         const data = {
             companyId,
             callId: id

src/pages/BandiPreferredBeneficiario/index.js

@@ -4,14 +4,14 @@ import { Link } from 'react-router-dom';
 import { head, isEmpty } from 'ramda';
 
 // store
-import { useStore } from '../../store';
+import { useStoreValue } from '../../store';
 
 // components
 import AllBandiAccordion from '../BandiBeneficiario/components/AllBandiAccordion';
 
 const BandiPreferredBeneficiario = () => {
-    const chosenCompanyId = useStore().main.chosenCompanyId();
-    const companies = useStore().main.companies();
+    const chosenCompanyId = useStoreValue('chosenCompanyId');
+    const companies = useStoreValue('companies');
     const company = head(companies.filter(o => o.id === chosenCompanyId));
 
     return (

src/pages/BandoApplication/index.js

@@ -10,7 +10,7 @@ import equal from 'fast-deep-equal';
 import { klona } from 'klona';
 
 // store
-import { storeSet, storeGet, useStore } from '../../store';
+import { storeSet, storeGet, useStoreValue } from '../../store';
 
 // api
 import ApplicationService from '../../service/application-service';
@@ -52,7 +52,7 @@ import { defaultMaxFileSize } from '../../configData';
 const REACT_APP_HUB_ID = process.env.REACT_APP_HUB_ID;
 
 const BandoApplication = () => {
-    const chosenCompanyId = useStore().main.chosenCompanyId();
+    const chosenCompanyId = useStoreValue('chosenCompanyId');
     const { id } = useParams();
     const [isExpired, setIsExpired] = useState(false);
     const [formData, setFormData] = useState([]);
@@ -68,7 +68,7 @@ const BandoApplication = () => {
     const [companyDocs, setCompanyDocs] = useState([]);
     const [personalDocs, setPersonalDocs] = useState([]);
     const [isRequestForApplData, setIsRequestForApplData] = useState(false);
-    const isAsyncRequest = useStore().main.isAsyncRequest();
+    const isAsyncRequest = useStoreValue('isAsyncRequest');
     const previousStatus = useRef('');
     const toast = useRef(null);
     const formMsgs = useRef(null);
@@ -111,7 +111,7 @@ const BandoApplication = () => {
 
     const onSubmit = () => {
         const applId = getApplicationId();
-        storeSet.main.setAsyncRequest();
+        storeSet('setAsyncRequest');
         formMsgs.current.clear();
 
         ApplicationService.updateStatusApplication(applId, {}, submitApplicationCallback, errSubmitApplicationCallback, [
@@ -125,11 +125,11 @@ const BandoApplication = () => {
                 setApplicationStatus(data.data.status); // ask why not 'applicationStatus'?
             }
         }
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const errSubmitApplicationCallback = (data) => {
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
         if (data.status === 'VALIDATION_ERROR') {
             if (formMsgs.current) {
                 formMsgs.current.show([
@@ -179,7 +179,7 @@ const BandoApplication = () => {
                 setApplicationStatus(data.data.status);
             }
         }
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const errValidateApplicationCallback = (data) => {
@@ -203,7 +203,7 @@ const BandoApplication = () => {
                 });
             }
         }
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const saveDraft = (saveAndMove = '') => {
@@ -237,7 +237,7 @@ const BandoApplication = () => {
 
         if (formId) {
             const applId = getApplicationId();
-            storeSet.main.setAsyncRequest();
+            storeSet('setAsyncRequest');
 
             if (formMsgs.current) {
                 formMsgs.current.clear();
@@ -255,7 +255,7 @@ const BandoApplication = () => {
     }
 
     const saveDraftCallback = (data, saveAndMove = '') => {
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
         if (data.status === 'SUCCESS') {
             if (toast.current) {
                 toast.current.show({
@@ -266,7 +266,7 @@ const BandoApplication = () => {
             }
             if (!isEmpty(saveAndMove) && is(String, saveAndMove)) {
                 if (['NEXT', 'PREVIOUS'].includes(saveAndMove)) {
-                    storeSet.main.setAsyncRequest();
+                    storeSet('setAsyncRequest');
                     ApplicationService.getApplicationForm(data.data.id, getApplFormCallback, errGetApplFormCallbacks, [
                         ['formId', formId],
                         ['companyId', chosenCompanyId],
@@ -274,7 +274,7 @@ const BandoApplication = () => {
                     ]);
                 } else if (['VALIDATE'].includes(saveAndMove)) {
                     const applId = getApplicationId();
-                    storeSet.main.setAsyncRequest();
+                    storeSet('setAsyncRequest');
                     formMsgs.current.clear();
 
                     ApplicationService.validateApplication(applId, {}, validateApplicationCallback, errValidateApplicationCallback);
@@ -288,7 +288,7 @@ const BandoApplication = () => {
     }
 
     const errSaveDraftCallback = (data) => {
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
         if (data.status === 'VALIDATION_ERROR') {
             if (formMsgs.current) {
                 formMsgs.current.show([
@@ -338,7 +338,7 @@ const BandoApplication = () => {
             setIsExpired(isCallExpired);
 
             const chosenCompanyId = data.data.companyId;
-            const companies = storeGet.main.companies();
+            const companies = storeGet('companies');
             const company = head(companies.filter(o => o.id === chosenCompanyId));
             let formDataInitial = {};
             let dynamicData = {
@@ -360,7 +360,7 @@ const BandoApplication = () => {
                 }, dynamicData);
             }
 
-            const userData = storeGet.main.userData();
+            const userData = storeGet('userData');
             Object.keys(userData).reduce((acc, cur) => {
                 if ([
                     'email', 'firstName', 'lastName', 'phoneNumber', 'codiceFiscale'
@@ -403,12 +403,12 @@ const BandoApplication = () => {
             reset();
             setFormInitialData(formDataInitial);
         }
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
         setIsRequestForApplData(false);
     }
 
     const errGetApplFormCallbacks = (data) => {
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
         setIsRequestForApplData(false);
         if (data.status === 'VALIDATION_ERROR') {
             if (toast.current) {
@@ -467,7 +467,7 @@ const BandoApplication = () => {
 
     const onDownloadApplicationPdf = () => {
         const applId = getApplicationId();
-        storeSet.main.setAsyncRequest();
+        storeSet('setAsyncRequest');
 
         ApplicationService.downloadApplicationPdf(applId, {}, getPdfCallback, errPdfCallback);
     }
@@ -482,23 +482,23 @@ const BandoApplication = () => {
         document.body.appendChild(link);
         link.click();
         link.remove();
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const errPdfCallback = (data) => {
         set404FromErrorResponse(data);
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const getSignedPdfCallback = (data) => {
         if (data.status === 'SUCCESS') {
             setSignedPdfFile([data.data]);
         }
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const errSignedPdfCallbacks = () => {
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const handleSetSignedDocumentFromFileupload = (fieldName, stateFieldData) => {
@@ -511,7 +511,7 @@ const BandoApplication = () => {
 
     const doChangeToDraft = () => {
         const applId = getApplicationId();
-        storeSet.main.setAsyncRequest();
+        storeSet('setAsyncRequest');
         formMsgs.current.clear();
 
         ApplicationService.updateStatusApplication(applId, {}, changeToDraftCallback, errChangeToDraftCallback, [
@@ -525,11 +525,11 @@ const BandoApplication = () => {
                 setApplicationStatus(data.data.status);
             }
         }
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const errChangeToDraftCallback = (data) => {
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
         toast.current.show({
             severity: 'error',
             summary: '',
@@ -613,7 +613,7 @@ const BandoApplication = () => {
             const applId = getApplicationId();
 
             if (applId) {
-                storeSet.main.setAsyncRequest();
+                storeSet('setAsyncRequest');
                 ApplicationService.getApplicationForm(applId, getApplFormCallback, errGetApplFormCallbacks, [
                     ['companyId', chosenCompanyId]
                 ]);
@@ -628,7 +628,7 @@ const BandoApplication = () => {
             const applId = getApplicationId();
 
             if (applId) {
-                storeSet.main.setAsyncRequest();
+                storeSet('setAsyncRequest');
                 ApplicationService.getApplicationSignedPdf(applId, getSignedPdfCallback, errSignedPdfCallbacks);
             }
         }
@@ -646,7 +646,7 @@ const BandoApplication = () => {
         const applId = getApplicationId();
 
         if (applId) {
-            storeSet.main.setAsyncRequest();
+            storeSet('setAsyncRequest');
             setIsRequestForApplData(true);
             ApplicationService.getApplicationForm(applId, getApplFormCallback, errGetApplFormCallbacks, [
                 ['companyId', chosenCompanyId]

src/pages/BandoApplicationPreview/index.js

@@ -6,7 +6,7 @@ import { useForm } from 'react-hook-form';
 import 'quill/dist/quill.core.css';
 
 // store
-import { storeSet, useStore } from '../../store';
+import { storeSet, useStoreValue } from '../../store';
 
 // api
 import ApplicationService from '../../service/application-service';
@@ -50,9 +50,9 @@ const BandoApplicationPreview = () => {
     const [totalSteps, setTotalSteps] = useState(0);
     const [applicationStatus, setApplicationStatus] = useState('');
     const [activeStep, setActiveStep] = useState(1);
-    const chosenCompanyId = useStore().main.chosenCompanyId();
-    const role = useStore().main.getRole();
-    const isAsyncRequest = useStore().main.isAsyncRequest();
+    const chosenCompanyId = useStoreValue('chosenCompanyId');
+    const role = useStoreValue('getRole');
+    const isAsyncRequest = useStoreValue('isAsyncRequest');
     const toast = useRef(null);
     const formMsgs = useRef(null);
     const {
@@ -90,7 +90,7 @@ const BandoApplicationPreview = () => {
 
     const onValidate = () => {
         const applId = getApplicationId();
-        storeSet.main.setAsyncRequest();
+        storeSet('setAsyncRequest');
         formMsgs.current.clear();
 
         ApplicationService.validateApplication(applId, {}, validateApplicationCallback, errValidateApplicationCallback);
@@ -107,7 +107,7 @@ const BandoApplicationPreview = () => {
                 detail: data.message
             });
         }
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const errValidateApplicationCallback = (data) => {
@@ -118,7 +118,7 @@ const BandoApplicationPreview = () => {
                 detail: data.message
             });
         }
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const saveDraft = (saveAndMove = '') => {
@@ -131,7 +131,7 @@ const BandoApplicationPreview = () => {
     }
 
     const goBackward = () => {
-        storeSet.main.setAsyncRequest();
+        storeSet('setAsyncRequest');
         const queryParams = 'ROLE_BENEFICIARY' === role
             ? [
                 ['formId', formId],
@@ -147,7 +147,7 @@ const BandoApplicationPreview = () => {
     }
 
     const goForward = () => {
-        storeSet.main.setAsyncRequest();
+        storeSet('setAsyncRequest');
         const queryParams = 'ROLE_BENEFICIARY' === role
             ? [
                 ['formId', formId],
@@ -172,8 +172,8 @@ const BandoApplicationPreview = () => {
             setApplicationStatus(data.data.applicationStatus)
             setActiveStep(data.data.currentStep);
 
-            /*const chosenCompanyId = storeGet.main.chosenCompanyId();
-            const companies = storeGet.main.companies();
+            /*const chosenCompanyId = storeGet('chosenCompanyId');
+            const companies = storeGet('companies');
             const company = head(companies.filter(o => o.id === chosenCompanyId));*/
             let formDataInitial = {};
             let dynamicData = {
@@ -206,11 +206,11 @@ const BandoApplicationPreview = () => {
             reset();
             setFormInitialData(formDataInitial);
         }
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const errGetApplFormCallbacks = (data) => {
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
         if (data.status === 'VALIDATION_ERROR') {
             if (toast.current) {
                 toast.current.show({
@@ -226,7 +226,7 @@ const BandoApplicationPreview = () => {
 
     const onDownloadApplicationPdf = () => {
         const applId = getApplicationId();
-        storeSet.main.setAsyncRequest();
+        storeSet('setAsyncRequest');
 
         ApplicationService.downloadApplicationPdf(applId, {}, getPdfCallback, errPdfCallback);
     }
@@ -241,12 +241,12 @@ const BandoApplicationPreview = () => {
         document.body.appendChild(link);
         link.click();
         link.remove();
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const errPdfCallback = (data) => {
         set404FromErrorResponse(data);
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const actionBtns = <div className="appPageSection__actions">
@@ -327,7 +327,7 @@ const BandoApplicationPreview = () => {
         const applId = getApplicationId();
 
         if (applId) {
-            storeSet.main.setAsyncRequest();
+            storeSet('setAsyncRequest');
             const queryParams = ['ROLE_BENEFICIARY', 'ROLE_CONFIDI'].includes(role)
                 ? [
                     ['companyId', chosenCompanyId]

src/pages/BandoEdit/components/BandoEditFormStep1/index.js

@@ -99,7 +99,7 @@ const BandoEditFormStep1 = forwardRef(function ({ initialData, setInitialData, g
         delete formData.startDate;
         delete formData.endDate;
 
-        storeSet.main.setAsyncRequest();
+        storeSet('setAsyncRequest');
         if (!formData.id) {
             BandoService.createBando(formData, createCallback, errCreateCallback);
         } else {
@@ -108,7 +108,7 @@ const BandoEditFormStep1 = forwardRef(function ({ initialData, setInitialData, g
     }
 
     const createCallback = (data) => {
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
         if (data.status === 'SUCCESS') {
             if (toast.current) {
                 toast.current.show({
@@ -119,7 +119,7 @@ const BandoEditFormStep1 = forwardRef(function ({ initialData, setInitialData, g
             }
             const values = getValues();
             if (!values.id && data.data.id) {
-                storeSet.main.setAsyncRequest();
+                storeSet('setAsyncRequest');
                 const sampleFormData = {
                     label: `Evaluation form for call #${data.data.id}`,
                     content: []
@@ -141,19 +141,19 @@ const BandoEditFormStep1 = forwardRef(function ({ initialData, setInitialData, g
             });
         }
         set404FromErrorResponse(data);
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const createFormCallback = (resp) => {
         if (resp.status === 'SUCCESS') {
             navigate(`/bandi/${resp.data.callId}`);
         }
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const errCreateFormCallback = (resp) => {
         set404FromErrorResponse(resp);
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const openPreview = () => {
@@ -189,11 +189,11 @@ const BandoEditFormStep1 = forwardRef(function ({ initialData, setInitialData, g
                 });
             setFaqOptions(faqItems);
         }
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const errLookupdataCallback = (data) => {
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const shouldDisableField = (fieldName) => {
@@ -223,7 +223,7 @@ const BandoEditFormStep1 = forwardRef(function ({ initialData, setInitialData, g
         }, [errors, isValid]);
 
     useEffect(() => {
-        storeSet.main.formInitialData(initialData);
+        storeSet('formInitialData', initialData);
         setFormInitialData(initialData);
     }, [initialData]);
 
@@ -256,7 +256,7 @@ const BandoEditFormStep1 = forwardRef(function ({ initialData, setInitialData, g
         LookupdataService.getItems(lookupdataCallback, errLookupdataCallback, [['type', ['AIMED_TO', 'FAQ']]]);
 
         return () => {
-            storeSet.main.formInitialData({});
+            storeSet('formInitialData', {});
         }
     }, []);
 

src/pages/BandoEdit/components/BandoEditFormStep2/index.js

@@ -93,7 +93,7 @@ const BandoEditFormStep2 = forwardRef(function ({ initialData, setInitialData, g
         delete formData.startDate;
         delete formData.endDate;
 
-        storeSet.main.setAsyncRequest();
+        storeSet('setAsyncRequest');
         if (values.evaluationVersion === 'V1') {
             BandoService.updateBandoStep2(formData.id, formData, createCallback, errCreateCallback);
         } else if (values.evaluationVersion === 'V2') {
@@ -102,7 +102,7 @@ const BandoEditFormStep2 = forwardRef(function ({ initialData, setInitialData, g
     }
 
     const createCallback = (data) => {
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
         if (data.status === 'SUCCESS') {
             toast.current.show({
                 severity: 'success',
@@ -116,7 +116,7 @@ const BandoEditFormStep2 = forwardRef(function ({ initialData, setInitialData, g
     }
 
     const errCreateCallback = (data) => {
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
         console.log('errCreateCallback', data);
     }
 
@@ -177,7 +177,7 @@ const BandoEditFormStep2 = forwardRef(function ({ initialData, setInitialData, g
         }, [errors, isValid]);
 
     useEffect(() => {
-        storeSet.main.formInitialData(initialData);
+        storeSet('formInitialData', initialData);
         setFormInitialData(initialData);
     }, [initialData]);
 
@@ -205,7 +205,7 @@ const BandoEditFormStep2 = forwardRef(function ({ initialData, setInitialData, g
         LookupdataService.getItems(lookupdataCallback, errLookupdataCallback, [['type', ['CHECKLIST', 'EVALUATION_CRITERIA']]]);
 
         return () => {
-            storeSet.main.formInitialData({});
+            storeSet('formInitialData', {});
         }
     }, []);
 

src/pages/BandoEdit/components/BandoEditFormStep3/index.js

@@ -35,14 +35,14 @@ const BandoEditFormStep3 = forwardRef(function () {
     }
 
     const onSaveDraft = () => {
-        const content = storeGet.main.formElements();
-        const formId = storeGet.main.formId();
+        const content = storeGet('formElements');
+        const formId = storeGet('formId');
         const formData = {
             label: formName,
             content
         }
 
-        storeSet.main.setAsyncRequest();
+        storeSet('setAsyncRequest');
         EvaluationFormsService.updateForm(formId, formData, updateFormCallback, errUpdateFormCallback)
     }
 
@@ -57,12 +57,12 @@ const BandoEditFormStep3 = forwardRef(function () {
                 });
             }
         }
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const errUpdateFormCallback = (resp) => {
         set404FromErrorResponse(resp);
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const openPreview = () => {
@@ -77,51 +77,52 @@ const BandoEditFormStep3 = forwardRef(function () {
 
     const getElementItemsCallback = (data) => {
         if (data.status === 'SUCCESS') {
-            //storeSet.main.elementItems(elementItems.sort((a, b) => a.sortOrder - b.sortOrder));
-            storeSet.main.elementItems(
+            //storeSet('elementItems', elementItems.sort((a, b) => a.sortOrder - b.sortOrder));
+            storeSet(
+                'elementItems',
                 data.data
                     .filter(o => !['fileselect'].includes(o.name))
                     .sort((a, b) => a.sortOrder - b.sortOrder)
             );
         }
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const errGetElementItemsCallbacks = (data) => {
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const getFormCallback = (resp) => {
         if (resp.status === 'SUCCESS') {
-            storeSet.main.formId(resp.data.id);
-            storeSet.main.formLabel(resp.data.label);
+            storeSet('formId', resp.data.id);
+            storeSet('formLabel', resp.data.label);
             setFormName(resp.data.label);
             setBandoStatus(resp.data.callStatus);
             const elements = klona(resp.data.content);
-            storeSet.main.formElements(elements);
+            storeSet('formElements', elements);
         }
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const errGetFormCallback = (resp) => {
         set404FromErrorResponse(resp);
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     useEffect(() => {
-        storeSet.main.setAsyncRequest();
+        storeSet('setAsyncRequest');
         EvaluationFormsService.getFormForCall(id, getFormCallback, errGetFormCallback)
     }, [id]);
 
     useEffect(() => {
-        storeSet.main.setAsyncRequest();
+        storeSet('setAsyncRequest');
         FormsService.getElementItems(getElementItemsCallback, errGetElementItemsCallbacks);
 
         return () => {
-            storeSet.main.formId(0);
-            storeSet.main.formElements([]);
-            storeSet.main.activeElement('');
-            storeSet.main.selectedElement('');
+            storeSet('formId', 0);
+            storeSet('formElements', []);
+            storeSet('activeElement', '');
+            storeSet('selectedElement', '');
         }
     }, []);
 

src/pages/BandoEdit/index.js

@@ -1,13 +1,14 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { __ } from '@wordpress/i18n';
 import { useNavigate, useParams } from 'react-router-dom';
-import { is, isNil, isEmpty } from 'ramda';
+import { is, isNil, isEmpty, pathOr } from 'ramda';
 
 // store
-import { storeSet, useStore } from '../../store';
+import { storeSet, useStoreValue } from '../../store';
 
 // api
 import BandoService from '../../service/bando-service';
+import FormsService from '../../service/forms-service';
 
 // tools
 import getBandoLabel from '../../helpers/getBandoLabel';
@@ -20,13 +21,13 @@ import { Steps } from 'primereact/steps';
 import BandoEditFormStep1 from './components/BandoEditFormStep1';
 import BandoEditFormStep2 from './components/BandoEditFormStep2';
 import { Messages } from 'primereact/messages';
-import FormsService from '../../service/forms-service';
 import BlockingOverlay from '../../components/BlockingOverlay';
 import { Toast } from 'primereact/toast';
 import BandoEditFormStep3 from './components/BandoEditFormStep3';
+import { ConfirmPopup, confirmPopup } from 'primereact/confirmpopup';
 
 const BandoEdit = () => {
-    const isAsyncRequest = useStore().main.isAsyncRequest();
+    const isAsyncRequest = useStoreValue('isAsyncRequest');
     const navigate = useNavigate();
     const { id } = useParams();
     const [activeStep, setActiveStep] = useState(null)
@@ -89,7 +90,7 @@ const BandoEdit = () => {
     }
 
     const validateBando = () => {
-        storeSet.main.setAsyncRequest();
+        storeSet('setAsyncRequest');
         bandoMsgs.current.clear();
         BandoService.validateBando(id, validateCallback, errValidateCallback);
     }
@@ -115,12 +116,12 @@ const BandoEdit = () => {
                 }
             }
         }
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const errValidateCallback = (resp) => {
         if (resp.status === 'VALIDATION_ERROR') {
-            storeSet.main.unsetAsyncRequest();
+            storeSet('unsetAsyncRequest');
             if (bandoMsgs.current) {
                 bandoMsgs.current.show(resp.data.map((v, i) => ({
                     id: i,
@@ -142,7 +143,7 @@ const BandoEdit = () => {
     }
 
     const publishBando = () => {
-        storeSet.main.setAsyncRequest();
+        storeSet('setAsyncRequest');
         bandoMsgs.current.clear();
         BandoService.updateBandoStatus(id, publishCallback, errPublishCallback, [['status', 'PUBLISH']]);
     }
@@ -172,7 +173,7 @@ const BandoEdit = () => {
             }
             setData(resp.data);
         }
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const errPublishCallback = (resp) => {
@@ -219,12 +220,12 @@ const BandoEdit = () => {
             }
             setData(resp.data);
         }
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const errGetCallback = (resp) => {
         set404FromErrorResponse(resp);
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const standardErrCallback = (resp) => {
@@ -237,18 +238,78 @@ const BandoEdit = () => {
                 }
             ]);
         }
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const getFormsCallback = (resp) => {
         if (resp.status === 'SUCCESS') {
             setForms(resp.data);
         }
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
+    }
+
+    const confirmDelete = (event) => {
+        confirmPopup({
+            target: event.currentTarget,
+            message: __('Sei sicuro di mettere il bando in bozza?', 'gepafin'),
+            acceptLabel: __('Si', 'gepafin'),
+            icon: 'pi pi-info-circle',
+            defaultFocus: 'reject',
+            acceptClassName: 'p-button-danger',
+            accept: unpublishBando,
+            reject: () => {
+            }
+        });
+    };
+
+    const unpublishBando = () => {
+        storeSet('setAsyncRequest');
+        bandoMsgs.current.clear();
+        BandoService.updateBandoStatus(id, unpublishCallback, errUnpublishCallback, [['status', 'DRAFT']]);
+    }
+
+    const unpublishCallback = (resp) => {
+        if (resp.status === 'SUCCESS') {
+            if (bandoMsgs.current) {
+                bandoMsgs.current.show([
+                    {
+                        id: '99',
+                        sticky: true, severity: 'success', summary: '',
+                        detail: __('Stato cambiato!', 'gepafin'),
+                        closable: false
+                    }
+                ]);
+            }
+            if (toast.current) {
+                toast.current.show({
+                    severity: 'success',
+                    summary: '',
+                    detail: __('Stato cambiato!', 'gepafin')
+                });
+            }
+            if (resp.data.docs) {
+                resp.data.docs = resp.data.docs
+                    .filter(o => o.source === 'CALL' && o.type === 'DOCUMENT');
+            }
+            setData(resp.data);
+        }
+        storeSet('unsetAsyncRequest');
+    }
+
+    const errUnpublishCallback = (resp) => {
+        const message = pathOr('', ['message'], resp);
+        if (message && toast.current) {
+            toast.current.show({
+                severity: 'error',
+                summary: message,
+                detail: ''
+            });
+        }
+        standardErrCallback(resp);
     }
 
     useEffect(() => {
-        storeSet.main.setAsyncRequest();
+        storeSet('setAsyncRequest');
         setActiveStep(0);
 
         const parsed = parseInt(id)
@@ -259,7 +320,7 @@ const BandoEdit = () => {
                 status: null,
                 evaluationVersion: 'V2'
             });
-            storeSet.main.unsetAsyncRequest();
+            storeSet('unsetAsyncRequest');
 
             if (bandoMsgs.current) {
                 bandoMsgs.current.clear();
@@ -307,10 +368,12 @@ const BandoEdit = () => {
             {!isEmpty(data)
                 ? <>
                     {activeStep === 0
-                        ? <BandoEditFormStep1 initialData={data} setInitialData={setData} ref={formRef} status={data.status}/>
+                        ? <BandoEditFormStep1 initialData={data} setInitialData={setData} ref={formRef}
+                                              status={data.status}/>
                         : null}
                     {activeStep === 1
-                        ? <BandoEditFormStep2 initialData={data} setInitialData={setData} ref={formRef} status={data.status}/>
+                        ? <BandoEditFormStep2 initialData={data} setInitialData={setData} ref={formRef}
+                                              status={data.status}/>
                         : null}
                     {activeStep === 2 && data.evaluationVersion === 'V2'
                         ? <BandoEditFormStep3/>
@@ -322,7 +385,6 @@ const BandoEdit = () => {
                         <div className="row">
                             <Button
                                 type="button"
-                                disabled={!['DRAFT', 'PUBLISH', 'READY_TO_PUBLISH'].includes(data.status)}
                                 outlined={data.status === 'PUBLISH'}
                                 onClick={openBandoFormManagement}
                                 label={__('Crea/modifica form', 'gepafin')}/>
@@ -363,6 +425,14 @@ const BandoEdit = () => {
                                 disabled={!(data.status === 'READY_TO_PUBLISH')}
                                 onClick={publishBando}
                                 label={__('Publish', 'gepafin')}/>
+                            {'PUBLISH' === data.status
+                                ? <>
+                                    <ConfirmPopup/>
+                                    <Button
+                                        onClick={confirmDelete}
+                                        disabled={isAsyncRequest}
+                                        severity="warning"
+                                        label={__('Mettere in bozza', 'gepafin')}/></> : null}
                         </div>
                     </div>
                 </>

src/pages/BandoFlowEdit/index.js

@@ -177,7 +177,7 @@ const BandoFlowEdit = () => {
     }, [flowStructure, forms]);
 
     const doSave = () => {
-        storeSet.main.setAsyncRequest();
+        storeSet('setAsyncRequest');
         const bandoId = getBandoId();
 
         if (flowMsgs.current) {
@@ -197,12 +197,12 @@ const BandoFlowEdit = () => {
                 });
             }
         }
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const errGetFlowCreateCallback = (data) => {
         set404FromErrorResponse(data);
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const getFormsCallback = (data) => {
@@ -212,15 +212,15 @@ const BandoFlowEdit = () => {
             setFormOptions([{ label: '', value: '' }, ...formOptions]);
             const bandoId = getBandoId();
 
-            storeSet.main.setAsyncRequest();
+            storeSet('setAsyncRequest');
             FlowService.getFlow(bandoId, (resp) => getFlowCallback(resp, data.data), errGetFlowCallback);
         }
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const errGetFormsCallback = (data) => {
         set404FromErrorResponse(data);
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const getFlowCallback = (data, forms) => {
@@ -261,12 +261,12 @@ const BandoFlowEdit = () => {
                 });
             }
         }
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const errGetFlowCallback = (data) => {
         set404FromErrorResponse(data);
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const setItemRef = (id, element) => {
@@ -314,7 +314,7 @@ const BandoFlowEdit = () => {
 
     useEffect(() => {
         const bandoId = getBandoId();
-        storeSet.main.setAsyncRequest();
+        storeSet('setAsyncRequest');
         FormsService.getFormsForCall(bandoId, getFormsCallback, errGetFormsCallback);
     }, [id]);
 

src/pages/BandoForms/index.js

@@ -57,7 +57,7 @@ const BandoForms = () => {
         const selectedFormArr = forms.filter(o => o.value === selectedForDuplicateForm);
 
         if (!isEmpty(selectedFormArr)) {
-            storeSet.main.setAsyncRequest();
+            storeSet('setAsyncRequest');
             FormsService.getFormById(selectedForDuplicateForm, getFormDuplicateCallback, errGetFormDuplicateCallbacks);
         }
     }
@@ -81,17 +81,17 @@ const BandoForms = () => {
                 errFormCreateCallback
             );
         }
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const errGetFormDuplicateCallbacks = (data) => {
         set404FromErrorResponse(data);
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const formCreateCallback = (data) => {
         if (data.status === 'SUCCESS') {
-            storeSet.main.unsetAsyncRequest();
+            storeSet('unsetAsyncRequest');
 
             if (toast.current) {
                 toast.current.show({
@@ -108,7 +108,7 @@ const BandoForms = () => {
     }
 
     const errFormCreateCallback = (data) => {
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
         if (toast.current) {
             toast.current.show({
                 severity: 'error',
@@ -126,12 +126,12 @@ const BandoForms = () => {
         if (data.status === 'SUCCESS') {
             setBandoStatus(data.data.status);
         }
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const errGetCallback = (data) => {
         set404FromErrorResponse(data);
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const getFormsCallback = (data) => {
@@ -139,12 +139,12 @@ const BandoForms = () => {
             const forms = data.data.map(o => ({ label: o.label, value: o.id }))
             setForms(forms);
         }
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const errGetFormsCallback = (data) => {
         set404FromErrorResponse(data);
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const getAllBandiCallback = (data) => {
@@ -171,7 +171,7 @@ const BandoForms = () => {
 
     const doDuplicateFormOfAnotherBando = () => {
         if (selectedBandoIdForDuplicate !== 0 && selectedFormIdForDuplicate !== 0) {
-            storeSet.main.setAsyncRequest();
+            storeSet('setAsyncRequest');
             FormsService.getFormById(selectedFormIdForDuplicate, getFormDuplicateCallback, errGetFormDuplicateCallbacks);
         }
     }
@@ -187,7 +187,7 @@ const BandoForms = () => {
         const parsed = parseInt(id)
         const bandoId = !isNaN(parsed) ? parsed : 0;
 
-        storeSet.main.setAsyncRequest();
+        storeSet('setAsyncRequest');
         BandoService.getBando(id, getCallback, errGetCallback);
         FormsService.getFormsForCall(bandoId, getFormsCallback, errGetFormsCallback);
 

src/pages/BandoFormsEdit/components/BuilderDropzone/index.js

@@ -14,7 +14,7 @@ const BuilderDropzone = () => {
             return item;
         },
         hover(item, monitor) {
-            storeSet.main.moveElement(-1, 0, item);
+            storeSet('moveElement', -1, 0, item);
             item.index = 0;
         }
     });

src/pages/BandoFormsEdit/components/BuilderElement/components/BuilderElementMeta.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import { head, isEmpty, pathOr } from 'ramda';
+
+// store
+import { useStoreValue } from '../../../../../store';
+
+// components
+import { Tag } from 'primereact/tag';
+import BuilderElementProperLabel from '../../BuilderElementProperLabel';
+
+const BuilderElementMeta = ({ id, name, label }) => {
+    const elements = useStoreValue('formElements');
+    const element = head(elements.filter(o => o.id === id));
+    const elementSettings = pathOr([], ['settings'], element);
+    const variable = head(elementSettings.filter(o => o.name === 'variable'));
+    const formula = head(elementSettings.filter(o => o.name === 'formula'));
+    const requestedAmount = head(elementSettings.filter(o => o.name === 'isRequestedAmount'));
+    const delegation = head(elementSettings.filter(o => o.name === 'isDelegation'));
+    const csvReportEnabled = head(elementSettings.filter(o => o.name === 'reportEnable'));
+    const isVariable = variable && !isEmpty(variable.value) ? 'warning' : 'secondary';
+    const isFormula = formula && !isEmpty(formula.value) ? 'warning' : 'secondary';
+    const isRequestedAmount = requestedAmount && requestedAmount.value ? 'tertiary' : 'secondary';
+    const isDelegation = delegation && delegation.value ? 'tertiary' : 'secondary';
+    const isCsvReportEnabled = csvReportEnabled && csvReportEnabled.value ? 'tertiary' : 'secondary';
+
+    return (
+        <div className="meta">
+            <div className="tagHeader">
+                <Tag value={label} severity="info"/>
+                {['numberinput', 'criteria_table'].includes(name)
+                    ? <Tag value="var" severity={isVariable} title={variable && variable.value ? variable.value : ''}/> : null}
+                {name === 'numberinput'
+                    ? <Tag value="f(x)" severity={isFormula} title={formula && formula.value ? formula.value : ''}/> : null}
+                {requestedAmount && requestedAmount.value
+                    ? <Tag value="importo" severity={isRequestedAmount}/> : null}
+                {delegation && delegation.value
+                    ? <Tag value="delega" severity={isDelegation}/> : null}
+                {csvReportEnabled && csvReportEnabled.value
+                    ? <Tag value="csv" severity={isCsvReportEnabled}/> : null}
+            </div>
+            <BuilderElementProperLabel id={id} defaultLabel={label}/>
+        </div>
+    )
+}
+
+export default BuilderElementMeta;

src/pages/BandoFormsEdit/components/BuilderElement/index.js

@@ -1,34 +1,25 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react'
+import React, { useCallback, useRef } from 'react'
 import { useDrag, useDrop } from 'react-dnd'
 import { ItemTypes } from '../ItemTypes';
 import { __ } from '@wordpress/i18n';
-import { head, isEmpty, pathOr } from 'ramda';
+import { head } from 'ramda';
 import { klona } from 'klona';
 
 // store
-import { storeSet, useStore } from '../../../../store';
+import { storeSet, useStoreValue } from '../../../../store';
 
 // tools
 import uniqid from '../../../../helpers/uniqid';
 
 // components
 import { Button } from 'primereact/button';
-import { Tag } from 'primereact/tag';
-import BuilderElementProperLabel from '../BuilderElementProperLabel';
+import BuilderElementMeta from './components/BuilderElementMeta';
 
 const BuilderElement = ({ id, name, label, index, bandoStatus }) => {
-    const draggingElementId = useStore().main.draggingElementId();
-    const selectedElement = useStore().main.selectedElement();
+    const draggingElementId = useStoreValue('draggingElementId');
+    const selectedElement = useStoreValue('selectedElement');
     const ref = useRef(null);
-    const elements = useStore().main.formElements();
-    const element = head(elements.filter(o => o.id === id));
-    const elementSettings = pathOr([], ['settings'], element);
-    const [isVariable, setIsVariable] = useState('secondary');
-    const [isFormula, setIsFormula] = useState('secondary');
-    const [variableName, setVariableName] = useState('secondary');
-    const [formulaName, setFormulaName] = useState('secondary');
-    const [isRequestedAmount, setIsRequestedAmount] = useState(false);
-    const [isDelegation, setIsDelegation] = useState(false);
+    const elements = useStoreValue('formElements');
 
     const [{ handlerId }, drop] = useDrop({
         accept: ItemTypes.FIELD,
@@ -38,7 +29,7 @@ const BuilderElement = ({ id, name, label, index, bandoStatus }) => {
             }
         },
         drop(item, monitor) {
-            storeSet.main.draggingElementId(0);
+            storeSet('draggingElementId', 0);
             return item;
         },
         hover(item, monitor) {
@@ -98,15 +89,15 @@ const BuilderElement = ({ id, name, label, index, bandoStatus }) => {
     });
 
     const move = (dragIndex, hoverIndex, item) => {
-        storeSet.main.moveElement(dragIndex, hoverIndex, item);
+        storeSet('moveElement', dragIndex, hoverIndex, item);
     }
 
     const openSettings = () => {
-        storeSet.main.activeElement(id);
+        storeSet('activeElement', id);
     }
 
     const selectElement = () => {
-        storeSet.main.selectedElement(id);
+        storeSet('selectedElement', id);
     }
 
     const duplicateElement = useCallback(() => {
@@ -123,46 +114,17 @@ const BuilderElement = ({ id, name, label, index, bandoStatus }) => {
             copyElement.id = uniqid();
             const originalIndex = elements.map(o => o.id).indexOf(id);
             const newElements = [...elements].toSpliced(originalIndex + 1, 0, copyElement);
-            storeSet.main.formElements(newElements);
+            storeSet('formElements', newElements);
         }
     }, [elements]);
 
     const remove = () => {
-        storeSet.main.removeElement(id);
+        storeSet('removeElement', id);
     }
 
     const opacity = isDragging ? 0 : 1;
     drag(drop(ref));
 
-    useEffect(() => {
-        const variable = head(elementSettings.filter(o => o.name === 'variable'));
-        const formula = head(elementSettings.filter(o => o.name === 'formula'));
-        const isRequestedAmount = head(elementSettings.filter(o => o.name === 'isRequestedAmount'));
-        const isDelegation = head(elementSettings.filter(o => o.name === 'isDelegation'));
-
-        if (variable && !isEmpty(variable.value)) {
-            setIsVariable('warning');
-            setVariableName(variable.value)
-        }
-
-        if (formula && !isEmpty(formula.value)) {
-            setIsFormula('warning');
-            setFormulaName(formula.value)
-        }
-
-        if (isRequestedAmount && !isEmpty(isRequestedAmount.value) && isRequestedAmount.value) {
-            setIsRequestedAmount('tertiary');
-        } else {
-            setIsRequestedAmount(false);
-        }
-
-        if (isDelegation && !isEmpty(isDelegation.value) && isDelegation.value) {
-            setIsDelegation('tertiary');
-        } else {
-            setIsDelegation(false);
-        }
-    }, [elementSettings]);
-
     return (
         draggingElementId === id
             ? <div ref={ref} className="formBuilder__elementNew">
@@ -173,20 +135,7 @@ const BuilderElement = ({ id, name, label, index, bandoStatus }) => {
                    style={{ opacity }}
                    onClick={selectElement}
                    data-handler-id={handlerId}>
-                <div className="meta">
-                    <div className="tagHeader">
-                        <Tag value={label} severity="info"/>
-                        {['numberinput', 'criteria_table'].includes(name)
-                            ? <Tag value="var" severity={isVariable} title={variableName}/> : null}
-                        {name === 'numberinput'
-                            ? <Tag value="f(x)" severity={isFormula} title={formulaName}/> : null}
-                        {isRequestedAmount
-                            ? <Tag value="importo" severity={isRequestedAmount}/> : null}
-                        {isDelegation
-                            ? <Tag value="delega" severity={isDelegation}/> : null}
-                    </div>
-                    <BuilderElementProperLabel id={id} defaultLabel={label}/>
-                </div>
+                <BuilderElementMeta id={id} name={name} label={label}/>
                 <div className="actions">
                     <Button icon="pi pi-clone" onClick={duplicateElement} outlined severity="success"/>
                     <Button icon="pi pi-cog" onClick={openSettings} outlined severity="info"/>

src/pages/BandoFormsEdit/components/BuilderElementItem/index.js

@@ -12,7 +12,7 @@ const BuilderElementItem = ({ dbId, name, label, description = '' }) => {
         type: ItemTypes.FIELD,
         item: () => {
             const newId = uniqid();
-            storeSet.main.draggingElementId(newId);
+            storeSet('draggingElementId', newId);
             return { name, dbId, id: newId, index: -1 }
         },
         end: (item, monitor) => {
@@ -23,8 +23,8 @@ const BuilderElementItem = ({ dbId, name, label, description = '' }) => {
                     return item;
                 }
             } else {
-                storeSet.main.removeElement(item.id);
-                storeSet.main.draggingElementId(0);
+                storeSet('removeElement', item.id);
+                storeSet('draggingElementId', 0);
             }
         },
         collect: (monitor) => ({

src/pages/BandoFormsEdit/components/BuilderElementProperLabel/index.js

@@ -2,11 +2,11 @@ import { useState, useEffect } from 'react'
 import { head, pathOr } from 'ramda';
 
 // store
-import { useStore } from '../../../../store';
+import { useStoreValue } from '../../../../store';
 import renderHtmlContent from '../../../../helpers/renderHtmlContent';
 
 const BuilderElementProperLabel = ({ id, defaultLabel }) => {
-    const elements = useStore().main.formElements();
+    const elements = useStoreValue('formElements');
     const element = head(elements.filter(o => o.id === id));
     const [label, setLabel] = useState('');
     const isRequired = pathOr(false, ['validators', 'isRequired'], element);

src/pages/BandoFormsEdit/components/BuilderElementSettings/components/ElementSetting/index.js

@@ -3,7 +3,7 @@ import { __ } from '@wordpress/i18n';
 import { head, is, isEmpty, isNil, uniq } from 'ramda';
 
 // store
-import { storeGet, useStore } from '../../../../../../store';
+import { storeGet, useStoreValue } from '../../../../../../store';
 
 // tools
 import renderHtmlContent from '../../../../../../helpers/renderHtmlContent';
@@ -17,13 +17,15 @@ import ElementSettingTableColumns from '../ElementSettingTableColumns';
 import { InputSwitch } from 'primereact/inputswitch';
 import ElementSettingChips from '../ElementSettingChips';
 import ElementSettingCriteriaTableColumns from '../ElementSettingCriteriaTableColumns';
+import ElementSettingTableColumnsForCsv from '../ElementSettingTableColumnsForCsv';
 
 import { mimeTypes } from '../../../../../../configData';
+import ElementSettingReportHeader from '../ElementSettingReportHeader';
 
 
 const ElementSetting = ({ setting, changeFn, updateDataFn, bandoStatus }) => {
     const [existingVars, setExistingVars] = useState([]);
-    const documentCategories = useStore().main.documentCategories();
+    const documentCategories = useStoreValue('documentCategories');
 
     const settingLabels = {
         label: __('Label', 'gepafin'),
@@ -40,6 +42,9 @@ const ElementSetting = ({ setting, changeFn, updateDataFn, bandoStatus }) => {
         variable: __('Variabile (lettere, cifre e "_"; il primo carattere deve essere una lettera!)', 'gepafin'),
         formula: __('Formula di calcolo automatico', 'gepafin'),
         isChecklistItem: __('Fa parte di "checklist"?', 'gepafin'),
+        reportEnable: __('Aggiungere nel report CSV?', 'gepafin'),
+        reportHeader: __('Nome della colonna nel CSV', 'gepafin'),
+        reportColumns: __('', 'gepafin')
     }
 
     const settingDescription = {
@@ -114,15 +119,29 @@ const ElementSetting = ({ setting, changeFn, updateDataFn, bandoStatus }) => {
                 name={setting.name}
                 bandoStatus={bandoStatus}
                 setDataFn={updateDataFn}/>
-        } else if (['isRequestedAmount', 'isDelegation', 'isChecklistItem'].includes(setting.name)) {
+        } else if (['isRequestedAmount', 'isDelegation', 'isChecklistItem', 'reportEnable'].includes(setting.name)) {
             return <InputSwitch
                 checked={setting.value}
                 onChange={(e) => changeFn(e.value, setting.name)}/>
+        } else if (setting.name === 'reportColumns') {
+            return <ElementSettingTableColumnsForCsv
+                value={is(Object, setting.value) ? setting.value : {}}
+                name={setting.name}
+                bandoStatus={bandoStatus}
+                setDataFn={updateDataFn}/>
+        } else if (setting.name === 'reportHeader') {
+            return <ElementSettingReportHeader setting={setting} changeFn={changeFn}/>
         } else if (['variable'].includes(setting.name)) {
             return <ElementSettingChips
                 restrictedValues={[]}
                 changeFn={(value) => changeFn(value, setting.name)}
                 value={setting.value}/>
+        } else if (setting.name === 'table_columns') {
+            return <ElementSettingTableColumns
+                value={is(Object, setting.value) ? setting.value : {}}
+                name={setting.name}
+                bandoStatus={bandoStatus}
+                setDataFn={updateDataFn}/>
         } else {
             return <InputText id={setting.name} aria-describedby={`${setting.name}-help`}
                               value={setting.value}
@@ -131,8 +150,8 @@ const ElementSetting = ({ setting, changeFn, updateDataFn, bandoStatus }) => {
     }
 
     useEffect(() => {
-        const elements = storeGet.main.formElements();
-        const activeElement = storeGet.main.activeElement();
+        const elements = storeGet('formElements');
+        const activeElement = storeGet('activeElement');
         const vars = elements
             .filter(o => o.id !== activeElement)
             // eslint-disable-next-line

src/pages/BandoFormsEdit/components/BuilderElementSettings/components/ElementSettingReportHeader/index.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { head } from 'ramda';
+
+// components
+import { InputText } from 'primereact/inputtext';
+import { useStoreValue } from '../../../../../../store';
+
+const ElementSettingReportHeader = ({ setting = {}, changeFn }) => {
+    const chosenFieldSettings = useStoreValue('chosenFieldSettings');
+    const label = head(chosenFieldSettings.filter(o => o.name === 'label'));
+
+    return (
+        <InputText id={setting.name} aria-describedby={`${setting.name}-help`}
+                   value={setting.value}
+                   placeholder={label.value}
+                   onChange={(e) => changeFn(e.target.value, setting.name)}/>
+    );
+}
+
+export default ElementSettingReportHeader;

src/pages/BandoFormsEdit/components/BuilderElementSettings/components/ElementSettingTableColumnsForCsv/index.js

@@ -0,0 +1,112 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { __, sprintf } from '@wordpress/i18n';
+import { head, pathOr } from 'ramda';
+
+// components
+import { InputText } from 'primereact/inputtext';
+import { InputSwitch } from 'primereact/inputswitch';
+
+// store
+import { storeGet } from '../../../../../../store';
+
+const ElementSettingTableColumnsForCsv = ({ name, setDataFn }) => {
+    const [stateFieldData, setStateFieldData] = useState([]);
+    const canBeEnabled = stateFieldData.filter(o => o.predefined).length > 0;
+
+    const onInputChange = (e, index) => {
+        const { value } = e.target;
+        const newData = stateFieldData.map((o, i) => {
+            if (i === index) {
+                o.labelCsv = value;
+            }
+            return o;
+        })
+        setStateFieldData(newData);
+    }
+
+    const setChecked = (value, index) => {
+        //let name = '';
+        const newData = stateFieldData.map((o, i) => {
+            if (i === index) {
+                o.enableCsv = value;
+                //name = o.name;
+            }
+            return o;
+        });
+
+        setStateFieldData(newData);
+    }
+
+    const properFields = useCallback((item, i) => {
+        return <>
+            <div>
+                <InputText
+                    value={item.label}
+                    disabled={true}
+                    placeholder={sprintf(__('Colonna %d', 'gepafin'), i + 1)}
+                    onInput={(e) => onInputChange(e, i)}/>
+            </div>
+            <div>
+                <InputText
+                    value={item.labelCsv}
+                    disabled={!canBeEnabled}
+                    placeholder={item.label}
+                    onInput={(e) => onInputChange(e, i)}/>
+            </div>
+            <div>
+                <InputSwitch
+                    checked={item.enableCsv}
+                    disabled={!canBeEnabled}
+                    onChange={(e) => setChecked(e.value, i)}/>
+            </div>
+        </>
+    }, [canBeEnabled]);
+
+    useEffect(() => {
+        const settings = storeGet('chosenFieldSettings');
+        let newValue = []
+
+        if (settings) {
+            const setting = head(settings.filter(o => o.name === 'table_columns'));
+            const settingReports = head(settings.filter(o => o.name === 'reportColumns'));
+            const settingData = pathOr([], ['value', 'stateFieldData'], setting);
+            const settingReportData = pathOr([], ['value'], settingReports);
+            const canBeEnabled = settingData.filter(o => o.predefined).length > 0;
+            newValue = settingData.map((o) => {
+                const existing = pathOr({}, [], head(settingReportData.filter(s => s.name === o.name)));
+                const existingEnabled = pathOr(false, ['enableCsv'], existing);
+                return {
+                    ...o,
+                    ...existing,
+                    predefined: o.predefined,
+                    enableCsv: !canBeEnabled ? false : existingEnabled
+                }
+            });
+        }
+        setStateFieldData(newValue);
+    }, []);
+
+    useEffect(() => {
+        setDataFn(name, stateFieldData);
+    }, [stateFieldData]);
+
+    return (
+        <>
+            {!canBeEnabled
+                ? <p>{__('Almeno una colonna deve essere predefinita! ⚠️')}</p> : null}
+            <div className="formElementSettings__repeater">
+                {stateFieldData.length > 0
+                    ? <div className="formElementSettings__repeaterItem tableRowCsv">
+                        <div>{__('Colonna', 'gepafin')}</div>
+                        <div>{__('Header CSV', 'gepafin')}</div>
+                        <div>{__('Abilitato?', 'gepafin')}</div>
+                    </div> : null}
+                {stateFieldData.map((o, i) => <div key={i} className="formElementSettings__repeaterItem tableRowCsv">
+                    {properFields(o, i)}
+                </div>)}
+            </div>
+        </>
+    )
+}
+
+export default ElementSettingTableColumnsForCsv;

src/pages/BandoFormsEdit/components/BuilderElementSettings/index.js

@@ -5,7 +5,7 @@ import { klona } from 'klona';
 import { wrap } from 'object-path-immutable';
 
 // store
-import { storeGet, storeSet, useStore } from '../../../../store';
+import { storeGet, storeSet, useStoreValue } from '../../../../store';
 
 // components
 import { InputText } from 'primereact/inputtext';
@@ -20,9 +20,9 @@ import { MultiSelect } from 'primereact/multiselect';
 import { dynamicDataOptions } from '../../../../configData';
 
 const BuilderElementSettings = ({ closeSettingsFn, callStatus, context }) => {
-    const elements = useStore().main.formElements();
-    const activeElement = useStore().main.activeElement();
-    const criteriaOptions = useStore().main.bandoCriteria();
+    const elements = useStoreValue('formElements');
+    const activeElement = useStoreValue('activeElement');
+    const criteriaOptions = useStoreValue('bandoCriteria');
     const [activeElementData, setActiveElementData] = useState({});
     const [settings, setSettings] = useState([]);
     const [validators, setValidators] = useState({});
@@ -54,6 +54,7 @@ const BuilderElementSettings = ({ closeSettingsFn, callStatus, context }) => {
             });
 
         setSettings(newSettings);
+        storeSet('chosenFieldSettings', newSettings);
     }
 
     const onUpdateOptions = (name, value) => {
@@ -67,6 +68,7 @@ const BuilderElementSettings = ({ closeSettingsFn, callStatus, context }) => {
             });
 
         setSettings(newSettings);
+        storeSet('chosenFieldSettings', newSettings);
     }
 
     const saveSettings = () => {
@@ -77,7 +79,7 @@ const BuilderElementSettings = ({ closeSettingsFn, callStatus, context }) => {
         newActiveElementData = wrap(newActiveElementData).set(['criteria'], criteria).value();
         const newElements = elements.map(o => o.id === newActiveElementData.id ? newActiveElementData : o);
 
-        storeSet.main.formElements(newElements);
+        storeSet('formElements', newElements);
         closeSettingsFn();
     }
 
@@ -113,7 +115,7 @@ const BuilderElementSettings = ({ closeSettingsFn, callStatus, context }) => {
 
     useEffect(() => {
         const chosen = head(elements.filter(o => o.id === activeElement));
-        const elementItems = storeGet.main.elementItems();
+        const elementItems = storeGet('elementItems');
         const chosenElementItemCfg = head(elementItems.filter(o => o.name === chosen.name));
         let settings = [];
 
@@ -131,6 +133,7 @@ const BuilderElementSettings = ({ closeSettingsFn, callStatus, context }) => {
         if (chosen) {
             setActiveElementData(klona(chosen));
             setSettings(settings);
+            storeSet('chosenFieldSettings', settings);
             setValidators(klona(chosen.validators));
             setDynamicData(chosen.dynamicData ? chosen.dynamicData : '');
             setCriteria(chosen.criteria ? chosen.criteria : []);
@@ -150,7 +153,9 @@ const BuilderElementSettings = ({ closeSettingsFn, callStatus, context }) => {
                     <TabPanel header={__('Presentation', 'gepafin')}>
                         {settings
                             ? settings
-                                .filter(o => !['variable', 'formula'].includes(o.name))
+                                .filter(o => ![
+                                    'variable', 'formula', 'reportEnable', 'reportHeader', 'reportColumns'
+                                ].includes(o.name))
                                 .map((o) => <ElementSetting
                                     key={o.name}
                                     setting={o}
@@ -242,8 +247,7 @@ const BuilderElementSettings = ({ closeSettingsFn, callStatus, context }) => {
                                 placeholder={__('Scegli', 'gepafin')}/>
                         </div>
                     </TabPanel> : null}
-                    {settings
-                    && settings
+                    {settings && settings
                         .filter(o => ['variable', 'formula'].includes(o.name)).length > 0
                         ? <TabPanel header={__('Calcolo', 'gepafin')}>
                             {settings
@@ -257,6 +261,18 @@ const BuilderElementSettings = ({ closeSettingsFn, callStatus, context }) => {
                                         updateDataFn={onUpdateOptions}/>)
                                 : null}
                         </TabPanel> : null}
+                    <TabPanel header={__('Rapporto CSV', 'gepafin')}>
+                        {settings
+                            ? settings
+                                .filter(o => ['reportEnable', 'reportHeader', 'reportColumns'].includes(o.name))
+                                .map((o) => <ElementSetting
+                                    key={o.name}
+                                    setting={o}
+                                    callStatus={callStatus}
+                                    changeFn={onChange}
+                                    updateDataFn={onUpdateOptions}/>)
+                            : null}
+                    </TabPanel>
                 </TabView>
 
                 <div style={{ display: 'flex', gap: '0.5rem' }}>

src/pages/BandoFormsEdit/components/FormBuilder/index.js

@@ -3,7 +3,7 @@ import { __ } from '@wordpress/i18n';
 import { isEmpty } from 'ramda';
 
 // store
-import { storeSet, useStore } from '../../../../store';
+import { storeSet, useStoreValue } from '../../../../store';
 
 // components
 import BuilderElement from '../BuilderElement';
@@ -14,10 +14,10 @@ import BuilderDropzone from '../BuilderDropzone';
 import BlockingOverlay from '../../../../components/BlockingOverlay';
 
 const FormBuilder = ({ callStatus, context }) => {
-    const elements = useStore().main.formElements();
-    const elementItems = useStore().main.elementItems();
-    const activeElement = useStore().main.activeElement();
-    const isAsyncRequest = useStore().main.isAsyncRequest();
+    const elements = useStoreValue('formElements');
+    const elementItems = useStoreValue('elementItems');
+    const activeElement = useStoreValue('activeElement');
+    const isAsyncRequest = useStoreValue('isAsyncRequest');
 
     const renderField = useCallback((field, index) => {
         return (
@@ -45,12 +45,12 @@ const FormBuilder = ({ callStatus, context }) => {
     }, []);
 
     const closeSettings = () => {
-        storeSet.main.activeElement('');
+        storeSet('activeElement', '');
     }
 
     useEffect(() => {
         return () => {
-            storeSet.main.activeElement('');
+            storeSet('activeElement', '');
         }
     }, []);
 

src/pages/BandoFormsEdit/index.js

@@ -7,7 +7,7 @@ import { klona } from 'klona';
 import { isEmpty, pathOr } from 'ramda';
 
 // store
-import { storeSet, storeGet, useStore } from '../../store';
+import { storeSet, storeGet, useStoreValue } from '../../store';
 
 // components
 import FormBuilder from './components/FormBuilder';
@@ -18,14 +18,16 @@ import { Toast } from 'primereact/toast';
 import { ConfirmDialog } from 'primereact/confirmdialog';
 import { Messages } from 'primereact/messages';
 
+// tools
+import set404FromErrorResponse from '../../helpers/set404FromErrorResponse';
+
 // api
 import FormsService from '../../service/forms-service';
-import set404FromErrorResponse from '../../helpers/set404FromErrorResponse';
 import BandoService from '../../service/bando-service';
+import DocumentCategoryService from '../../service/document-category-service';
 
 // TODO temp data
 import { elementItems } from '../../tempData';
-import DocumentCategoryService from '../../service/document-category-service';
 
 const BandoFormsEdit = () => {
     const { id, formId } = useParams();
@@ -33,7 +35,7 @@ const BandoFormsEdit = () => {
     const [formName, setFormName] = useState('');
     const [visibleConfirmation, setVisibleConfirmation] = useState(false);
     const [bandoStatus, setBandoStatus] = useState('');
-    const isAsyncRequest = useStore().main.isAsyncRequest();
+    const isAsyncRequest = useStoreValue('isAsyncRequest');
     const formMsgs = useRef(null);
     const toast = useRef(null);
 
@@ -52,7 +54,7 @@ const BandoFormsEdit = () => {
             formMsgs.current.clear();
         }
 
-        const content = storeGet.main.formElements();
+        const content = storeGet('formElements');
 
         if (isEmpty(formName) || isEmpty(content)) {
             if (isEmpty(formName)) {
@@ -90,7 +92,7 @@ const BandoFormsEdit = () => {
             content
         }
 
-        storeSet.main.setAsyncRequest();
+        storeSet('setAsyncRequest');
         if (bandoFormId === 0) {
             FormsService.createFormForCall(
                 bandoId,
@@ -112,7 +114,7 @@ const BandoFormsEdit = () => {
     const formCreateCallback = (data, shouldRedirect) => {
         if (data.status === 'SUCCESS') {
             const bandoId = getBandoId();
-            storeSet.main.unsetAsyncRequest();
+            storeSet('unsetAsyncRequest');
 
             if (shouldRedirect) {
                 navigate(`/bandi/${bandoId}/forms/${data.data.id}/preview`);
@@ -132,7 +134,7 @@ const BandoFormsEdit = () => {
     }
 
     const errFormCreateCallback = (data) => {
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
         if (data.status === 'BAD_REQUEST') {
             setVisibleConfirmation(true);
         } else {
@@ -147,7 +149,7 @@ const BandoFormsEdit = () => {
     }
 
     const acceptModification = () => {
-        const content = storeGet.main.formElements();
+        const content = storeGet('formElements');
         const parsedFormId = parseInt(formId);
         const bandoFormId = !isNaN(parsedFormId) ? parsedFormId : 0;
         const formData = {
@@ -155,7 +157,7 @@ const BandoFormsEdit = () => {
             content
         }
 
-        storeSet.main.setAsyncRequest();
+        storeSet('setAsyncRequest');
 
         FormsService.updateForm(
             bandoFormId,
@@ -190,7 +192,8 @@ const BandoFormsEdit = () => {
             defaultFocus: 'reject',
             acceptClassName: 'p-button-danger',
             accept: doDelete,
-            reject: () => {}
+            reject: () => {
+            }
         });
     };
 
@@ -199,7 +202,7 @@ const BandoFormsEdit = () => {
     }*/
 
     const doDelete = () => {
-        storeSet.main.setAsyncRequest();
+        storeSet('setAsyncRequest');
         FormsService.deleteForm(formId, formDeleteCallback, errFormDeleteCallback)
     }
 
@@ -208,42 +211,44 @@ const BandoFormsEdit = () => {
             const bandoId = getBandoId();
             navigate(`/bandi/${bandoId}/forms`);
         }
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const errFormDeleteCallback = (data) => {
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const getElementItemsCallback = (data) => {
         if (data.status === 'SUCCESS') {
-            storeSet.main.elementItems(elementItems.sort((a, b) => a.sortOrder - b.sortOrder));
-            /*storeSet.main.elementItems(data.data
+            storeSet('elementItems', elementItems
+                .filter(o => o.id !== 22)
+                .sort((a, b) => a.sortOrder - b.sortOrder));
+            /*storeSet('elementItems', data.data
                 .filter(o => o.id !== 22)
                 .sort((a, b) => a.sortOrder - b.sortOrder));*/
         }
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const errGetElementItemsCallback = () => {
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const getFormCallback = (data) => {
         if (data.status === 'SUCCESS') {
-            storeSet.main.formId(data.data.id);
-            storeSet.main.formLabel(data.data.label);
+            storeSet('formId', data.data.id);
+            storeSet('formLabel', data.data.label);
             setFormName(data.data.label);
             setBandoStatus(data.data.callStatus);
             const elements = klona(data.data.content);
-            storeSet.main.formElements(elements);
+            storeSet('formElements', elements);
         }
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const errGetFormCallbacks = (data) => {
         set404FromErrorResponse(data);
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const getBandoCallback = (data) => {
@@ -251,7 +256,7 @@ const BandoFormsEdit = () => {
             setBandoStatus(data.data.status);
             const criteria = pathOr([], ['data', 'criteria'], data);
             const criteriaOptions = criteria.map(o => ({ value: o.id, label: o.value }));
-            storeSet.main.bandoCriteria(criteriaOptions);
+            storeSet('bandoCriteria', criteriaOptions);
         }
     }
 
@@ -261,7 +266,7 @@ const BandoFormsEdit = () => {
 
     const getCategories = (resp) => {
         if (resp.status === 'SUCCESS') {
-            storeSet.main.documentCategories(resp.data.map(o => ({value: o.id, label: o.description})));
+            storeSet('documentCategories', resp.data.map(o => ({ value: o.id, label: o.description })));
         }
     }
 
@@ -273,11 +278,11 @@ const BandoFormsEdit = () => {
         const parsedFormId = parseInt(formId)
         const bandoFormId = !isNaN(parsedFormId) ? parsedFormId : 0;
 
-        storeSet.main.setAsyncRequest();
+        storeSet('setAsyncRequest');
         FormsService.getElementItems(getElementItemsCallback, errGetElementItemsCallback);
 
         if (bandoFormId) {
-            storeSet.main.setAsyncRequest();
+            storeSet('setAsyncRequest');
             FormsService.getFormById(bandoFormId, getFormCallback, errGetFormCallbacks);
         }
         if (bandoId) {
@@ -285,12 +290,12 @@ const BandoFormsEdit = () => {
         }
 
         return () => {
-            storeSet.main.formId(0);
-            storeSet.main.formLabel('');
-            storeSet.main.formElements([]);
-            storeSet.main.bandoCriteria([]);
-            storeSet.main.activeElement('');
-            storeSet.main.selectedElement('');
+            storeSet('formId', 0);
+            storeSet('formLabel', '');
+            storeSet('formElements', []);
+            storeSet('bandoCriteria', []);
+            storeSet('activeElement', '');
+            storeSet('selectedElement', '');
         }
     }, [id, formId]);
 

src/pages/BandoFormsPreview/index.js

@@ -9,7 +9,7 @@ import { evaluate } from 'mathjs';
 import equal from 'fast-deep-equal';
 
 // store
-import { storeSet, useStore } from '../../store';
+import { storeSet, useStoreValue } from '../../store';
 
 // api
 import FormsService from '../../service/forms-service';
@@ -41,7 +41,7 @@ const BandoFormsPreview = () => {
     const navigate = useNavigate();
     const [formData, setFormData] = useState([]);
     const [formName, setFormName] = useState('');
-    const isAsyncRequest = useStore().main.isAsyncRequest();
+    const isAsyncRequest = useStoreValue('isAsyncRequest');
     const {
         control,
         handleSubmit,
@@ -85,12 +85,12 @@ const BandoFormsPreview = () => {
             const elements = klona(data.data.content);
             setFormData(elements);
         }
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const errGetFormCallbacks = (data) => {
         set404FromErrorResponse(data);
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     useEffect(() => {
@@ -135,7 +135,7 @@ const BandoFormsPreview = () => {
         const bandoFormId = !isNaN(parsedFormId) ? parsedFormId : 0;
 
         if (bandoFormId) {
-            storeSet.main.setAsyncRequest();
+            storeSet('setAsyncRequest');
             FormsService.getFormById(bandoFormId, getFormCallback, errGetFormCallbacks);
         }
     }, [id, formId]);

src/pages/BandoView/index.js

@@ -5,7 +5,7 @@ import { is, isEmpty, isNil } from 'ramda';
 import 'quill/dist/quill.core.css';
 
 // store
-import { storeSet, useStore } from '../../store';
+import { storeSet, useStoreValue } from '../../store';
 
 // tools
 import getNumberWithCurrency from '../../helpers/getNumberWithCurrency';
@@ -25,7 +25,7 @@ import renderHtmlContent from '../../helpers/renderHtmlContent';
 const REACT_APP_HUB_ID = process.env.REACT_APP_HUB_ID;
 
 const BandoView = () => {
-    const isAsyncRequest = useStore().main.isAsyncRequest();
+    const isAsyncRequest = useStoreValue('isAsyncRequest');
     const { id } = useParams();
     const navigate = useNavigate();
     const [data, setData] = useState({});
@@ -40,7 +40,7 @@ const BandoView = () => {
         if (data.status === 'SUCCESS') {
             setData(getFormattedBandiData(data.data));
         }
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const errGetCallback = (data) => {
@@ -54,7 +54,7 @@ const BandoView = () => {
             ]);
         }
         set404FromErrorResponse(data);
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const getFormattedBandiData = (data) => {

src/pages/BandoViewBeneficiario/index.js

@@ -5,7 +5,7 @@ import { head, is, isEmpty, isNil } from 'ramda';
 import 'quill/dist/quill.core.css';
 
 // store
-import { storeGet, storeSet, useStore } from '../../store';
+import { storeGet, storeSet, useStoreValue } from '../../store';
 
 // tools
 import getNumberWithCurrency from '../../helpers/getNumberWithCurrency';
@@ -34,8 +34,8 @@ import { Dialog } from 'primereact/dialog';
 const REACT_APP_HUB_ID = process.env.REACT_APP_HUB_ID;
 
 const BandoViewBeneficiario = () => {
-    const isAsyncRequest = useStore().main.isAsyncRequest();
-    const chosenCompanyId = useStore().main.chosenCompanyId();
+    const isAsyncRequest = useStoreValue('isAsyncRequest');
+    const chosenCompanyId = useStoreValue('chosenCompanyId');
     const { id } = useParams();
     const navigate = useNavigate();
     const [data, setData] = useState({});
@@ -73,7 +73,7 @@ const BandoViewBeneficiario = () => {
         document.body.appendChild(link);
         link.click();
         link.remove();
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const errCallPdfCallback = (data) => {
@@ -84,7 +84,7 @@ const BandoViewBeneficiario = () => {
                 detail: data.message
             });
         }
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const getBandoId = () => {
@@ -144,7 +144,7 @@ const BandoViewBeneficiario = () => {
     }
 
     const createApplCallback = (data) => {
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
         if (data.status === 'SUCCESS') {
             navigate(`/imieibandi/${data.data.id}`);
         }
@@ -167,7 +167,7 @@ const BandoViewBeneficiario = () => {
                 }
             ]);
         }
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     /*const saveToFavourites = () => {
@@ -187,7 +187,7 @@ const BandoViewBeneficiario = () => {
                 'response': '',
                 'isVisible': false
             }
-            storeSet.main.setAsyncRequest();
+            storeSet('setAsyncRequest');
             FaqItemService.addQuestion(id, obj, createQuestionBack, errCreateQuestionCallback, [['companyId', chosenCompanyId]])
         }
     }
@@ -203,7 +203,7 @@ const BandoViewBeneficiario = () => {
                 });
             }
         }
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const errCreateQuestionCallback = (data) => {
@@ -214,14 +214,14 @@ const BandoViewBeneficiario = () => {
                 detail: data.message
             });
         }
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const getBandoCallback = (data) => {
         if (data.status === 'SUCCESS') {
             setData(getFormattedBandiData(data.data));
         }
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const errGetBandoCallback = (data) => {
@@ -233,7 +233,7 @@ const BandoViewBeneficiario = () => {
             });
         }
         set404FromErrorResponse(data);
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const getFormattedBandiData = (data) => {
@@ -250,12 +250,12 @@ const BandoViewBeneficiario = () => {
                 }
             }
         }
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const errGetApplCallback = (data) => {
         set404FromErrorResponse(data);
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const renderHeader = () => {
@@ -279,7 +279,7 @@ const BandoViewBeneficiario = () => {
     const header = renderHeader();
 
     const addToFavourites = () => {
-        const companyId = storeGet.main.chosenCompanyId();
+        const companyId = storeGet('chosenCompanyId');
         const bandoId = getBandoId();
         const formdData = {
             companyId,
@@ -318,12 +318,12 @@ const BandoViewBeneficiario = () => {
     useEffect(() => {
         if (!isEmpty(chosenCompanyId) && chosenCompanyId !== 0) {
             const bandoId = getBandoId();
-            storeSet.main.setAsyncRequest();
+            storeSet('setAsyncRequest');
             BandoService.getBando(bandoId, getBandoCallback, errGetBandoCallback, [
                 ['companyId', chosenCompanyId]
             ]);
             if (REACT_APP_HUB_ID !== 't7jh5wfg9QXylNaTZkPoE') {
-                storeSet.main.setAsyncRequest();
+                storeSet('setAsyncRequest');
                 setApplicationObj(true);
                 ApplicationService.getApplications(getApplCallback, errGetApplCallback, [
                     ['callId', bandoId],

src/pages/BandoViewPreInstructor/index.js

@@ -5,7 +5,7 @@ import { is, isEmpty, isNil } from 'ramda';
 import 'quill/dist/quill.core.css';
 
 // store
-import { storeSet, useStore } from '../../store';
+import { storeSet, useStoreValue } from '../../store';
 
 // tools
 import getNumberWithCurrency from '../../helpers/getNumberWithCurrency';
@@ -25,7 +25,7 @@ import renderHtmlContent from '../../helpers/renderHtmlContent';
 const REACT_APP_HUB_ID = process.env.REACT_APP_HUB_ID;
 
 const BandoViewPreInstructor = () => {
-    const isAsyncRequest = useStore().main.isAsyncRequest();
+    const isAsyncRequest = useStoreValue('isAsyncRequest');
     const { id } = useParams();
     const [data, setData] = useState({});
     const [newQuestion, setNewQuestion] = useState('');
@@ -35,7 +35,7 @@ const BandoViewPreInstructor = () => {
         if (data.status === 'SUCCESS') {
             setData(getFormattedBandiData(data.data));
         }
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const errGetCallback = (data) => {
@@ -49,7 +49,7 @@ const BandoViewPreInstructor = () => {
             ]);
         }
         set404FromErrorResponse(data);
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const getFormattedBandiData = (data) => {

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

@@ -7,7 +7,7 @@ import getBandoLabel from '../../../../helpers/getBandoLabel';
 import getBandoSeverity from '../../../../helpers/getBandoSeverity';
 
 // store
-import { useStore } from '../../../../store';
+import { useStoreValue } from '../../../../store';
 
 // api
 import ApplicationService from '../../../../service/application-service';
@@ -25,7 +25,7 @@ import { Link } from 'react-router-dom';
 import translationStrings from '../../../../translationStringsForComponents';
 
 const DraftApplicationsTable = () => {
-    const chosenCompanyId = useStore().main.chosenCompanyId();
+    const chosenCompanyId = useStoreValue('chosenCompanyId');
     const [localAsyncRequest, setLocalAsyncRequest] = useState(false);
     const [items, setItems] = useState(null);
     const [filters, setFilters] = useState(null);
@@ -113,8 +113,7 @@ const DraftApplicationsTable = () => {
     const statusFilterTemplate = (options) => {
         return <Dropdown value={options.value} options={statuses}
                          onChange={(e) => options.filterCallback(e.value, options.index)}
-                         itemTemplate={statusItemTemplate} placeholder={translationStrings.selectOneLabel} className="p-column-filter"
-                         showClear/>;
+                         itemTemplate={statusItemTemplate} placeholder={translationStrings.selectOneLabel} className="p-column-filter"/>;
     };
 
     const progressBodyTemplate = (options) => {

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

@@ -1,28 +1,32 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import { __ } from '@wordpress/i18n';
-import { is, pathOr, isEmpty } from 'ramda';
+import { is } from 'ramda';
 
 // store
-import { useStore } from '../../../../store';
+import { useStoreValue } from '../../../../store';
 
 // api
 import ApplicationService from '../../../../service/application-service';
 
+// tools
+import getBandoLabel from '../../../../helpers/getBandoLabel';
+import getBandoSeverity from '../../../../helpers/getBandoSeverity';
+import getQueryParamsForPaginatedEndpoint from '../../../../helpers/getQueryParamsForPaginatedEndpoint';
+
 // components
+import ProperBandoLabel from '../../../../components/ProperBandoLabel';
 import { DataTable } from 'primereact/datatable';
 import { Column } from 'primereact/column';
 import { ProgressBar } from 'primereact/progressbar';
 import { Button } from 'primereact/button';
-import ProperBandoLabel from '../../../../components/ProperBandoLabel';
 import { Link } from 'react-router-dom';
-import translationStrings from '../../../../translationStringsForComponents';
 import { Dropdown } from 'primereact/dropdown';
 import { Tag } from 'primereact/tag';
-import getBandoLabel from '../../../../helpers/getBandoLabel';
-import getBandoSeverity from '../../../../helpers/getBandoSeverity';
+
+import translationStrings from '../../../../translationStringsForComponents';
 
 const DraftApplicationsTableAsync = () => {
-    const chosenCompanyId = useStore().main.chosenCompanyId();
+    const chosenCompanyId = useStoreValue('chosenCompanyId');
     const [localAsyncRequest, setLocalAsyncRequest] = useState(false);
     const [items, setItems] = useState(null);
     const [totalRecordsNum, setTotalRecordsNum] = useState(0);
@@ -41,34 +45,7 @@ const DraftApplicationsTableAsync = () => {
     });
     const statuses = ['DRAFT', 'AWAITING', 'READY'];
 
-    const getPaginationQuery = useCallback(() => {
-        let sortBy = {
-            columnName: "ID",
-            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 getPaginationQuery = useCallback(() => getQueryParamsForPaginatedEndpoint(lazyState, statuses, 'id'), [lazyState]);
 
     const onPage = (event) => {
         setLazyState(event);
@@ -141,8 +118,7 @@ const DraftApplicationsTableAsync = () => {
                              }
                              setLazyState({ ...lazyState, filters, first: 0 });
                          }}
-                         itemTemplate={statusItemTemplate} placeholder={translationStrings.selectOneLabel} className="p-column-filter"
-                         showClear/>;
+                         itemTemplate={statusItemTemplate} placeholder={translationStrings.selectOneLabel} className="p-column-filter"/>;
     };
 
     const actionsBodyTemplate = (rowData) => {

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

@@ -1,12 +1,12 @@
 import React, { useEffect, useState, useCallback } from 'react';
 import { __ } from '@wordpress/i18n';
-import { isEmpty, pathOr } from 'ramda';
 import { Link } from 'react-router-dom';
 
 import translationStrings from '../../../../translationStringsForComponents';
 
 // api
 import BandoService from '../../../../service/bando-service';
+import ApplicationService from '../../../../service/application-service';
 
 // tools
 import getTimeParsedFromString from '../../../../helpers/getTimeParsedFromString';
@@ -14,6 +14,8 @@ import getTimeFromISOstring from '../../../../helpers/getTimeFromISOstring';
 import getFormattedDateString from '../../../../helpers/getFormattedDateString';
 import getBandoLabel from '../../../../helpers/getBandoLabel';
 import getBandoSeverity from '../../../../helpers/getBandoSeverity';
+import getQueryParamsForPaginatedEndpoint from '../../../../helpers/getQueryParamsForPaginatedEndpoint';
+import set404FromErrorResponse from '../../../../helpers/set404FromErrorResponse';
 
 // components
 import { DataTable } from 'primereact/datatable';
@@ -36,41 +38,14 @@ const LatestBandiTableAsync = () => {
         sortOrder: null,
         filters: {
             name: { value: null, matchMode: 'contains' },
-            startDate: { value: null, matchMode: 'date_is' },
-            endDate: { value: null, matchMode: 'date_is' },
+            startDate: { value: null, matchMode: 'dateIs' },
+            endDate: { value: null, matchMode: 'dateIs' },
             status: { value: null, matchMode: 'equals' }
         }
     });
-    const statuses = ['PUBLISH'];
+    const statuses = ['PUBLISH', 'EXPIRED'];
 
-    const getPaginationQuery = useCallback(() => {
-        let sortBy = {
-            columnName: "ID",
-            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 getPaginationQuery = useCallback(() => getQueryParamsForPaginatedEndpoint(lazyState, statuses, 'id'), [lazyState]);
 
     const onPage = (event) => {
         setLazyState(event);
@@ -113,9 +88,44 @@ const LatestBandiTableAsync = () => {
     };
 
     const actionsBodyTemplate = (rowData) => {
-        return <Link to={`/bandi/${rowData.id}`}>
-            <Button severity="info" label={__('Modifica', 'gepafin')} icon="pi pi-pencil" size="small" iconPos="right" />
+        return <div className="appPageSection__tableActions">
+            <Link to={`/bandi/${rowData.id}`}>
+                <Button severity="info" label={__('Modifica', 'gepafin')} icon="pi pi-pencil" size="small"
+                        iconPos="right"/>
             </Link>
+            <Button type="button"
+                    size="small"
+                    icon="pi pi-receipt"
+                    iconPos="right"
+                    label={__('CSV', 'gepafin')}
+                    onClick={() => exportToCSV(rowData.id)}/>
+        </div>
+    }
+
+    const exportToCSV = (applicationId) => {
+        setLocalAsyncRequest(true);
+        ApplicationService.downloadCsvReport(
+            applicationId,
+            (resp) => getCsvReportback(resp, applicationId),
+            errCsvReportCallback
+        )
+    }
+
+    const getCsvReportback = (resp, applicationId) => {
+        const file = new Blob([resp], { type: 'text/csv' });
+        const url = window.URL.createObjectURL(file);
+        const link = document.createElement('a');
+        link.href = url;
+        link.setAttribute('download', `call-${applicationId}-applications-report.csv`);
+        document.body.appendChild(link);
+        link.click();
+        link.remove();
+        setLocalAsyncRequest(false);
+    }
+
+    const errCsvReportCallback = (resp) => {
+        set404FromErrorResponse(resp);
+        setLocalAsyncRequest(false);
     }
 
     const statusBodyTemplate = (rowData) => {
@@ -138,8 +148,7 @@ const LatestBandiTableAsync = () => {
                              }
                              setLazyState({ ...lazyState, filters, first: 0 });
                          }}
-                         itemTemplate={statusItemTemplate} placeholder={translationStrings.selectOneLabel} className="p-column-filter"
-                         showClear/>;
+                         itemTemplate={statusItemTemplate} placeholder={translationStrings.selectOneLabel} className="p-column-filter"/>;
     };
 
     const dateFilterTemplate = (options) => {

src/pages/Dashboard/index.js

@@ -11,12 +11,9 @@ import DashboardService from '../../service/dashboard-service';
 import { Button } from 'primereact/button';
 import ChartDomandePerBando from '../../components/ChartDomandePerBando';
 import ChartStatoDomande from '../../components/ChartStatoDomande';
-/*import LatestBandiTableAsync from './components/LatestBandiTableAsync';
+import LatestBandiTableAsync from './components/LatestBandiTableAsync';
 import AllDomandeTableAsync from '../Domande/components/AllDomandeTableAsync';
-import DraftApplicationsTableAsync from './components/DraftApplicationsTableAsync';*/
-import LatestBandiTable from './components/LatestBandiTable';
-import DraftApplicationsTable from './components/DraftApplicationsTable';
-import AllDomandeTable from '../Domande/components/AllDomandeTable';
+import DraftApplicationsTableAsync from './components/DraftApplicationsTableAsync';
 
 const REACT_APP_HUB_ID = process.env.REACT_APP_HUB_ID;
 
@@ -142,24 +139,21 @@ const Dashboard = () => {
 
             <div className="appPageSection">
                 <h2>{__('Ultimi bandi pubblicati', 'gepafin')}</h2>
-                {/*<LatestBandiTableAsync/>*/}
-                <LatestBandiTable/>
+                <LatestBandiTableAsync/>
             </div>
 
             <div className="appPage__spacer"></div>
 
             <div className="appPageSection">
                 <h2>{__('Ultime domande pubblicate', 'gepafin')}</h2>
-                {/*<AllDomandeTableAsync/>*/}
-                <AllDomandeTable/>
+                <AllDomandeTableAsync/>
             </div>
 
             <div className="appPage__spacer"></div>
 
             <div className="appPageSection">
                 <h2>{__('Domande in bozza', 'gepafin')}</h2>
-                {/*<DraftApplicationsTableAsync/>*/}
-                <DraftApplicationsTable/>
+                <DraftApplicationsTableAsync/>
             </div>
 
             <div className="appPage__spacer"></div>

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

@@ -0,0 +1,245 @@
+import React, { useEffect, useState, useCallback } from 'react';
+import { __ } from '@wordpress/i18n';
+import { Link } from 'react-router-dom';
+
+import translationStrings from '../../../../translationStringsForComponents';
+
+// api
+import BandoService from '../../../../service/bando-service';
+
+// tools
+import getTimeParsedFromString from '../../../../helpers/getTimeParsedFromString';
+import getTimeFromISOstring from '../../../../helpers/getTimeFromISOstring';
+import getFormattedDateString from '../../../../helpers/getFormattedDateString';
+import getBandoLabel from '../../../../helpers/getBandoLabel';
+import getBandoSeverity from '../../../../helpers/getBandoSeverity';
+import getQueryParamsForPaginatedEndpoint from '../../../../helpers/getQueryParamsForPaginatedEndpoint';
+
+// 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';
+import { isNil } from 'ramda';
+import { storeGet } from '../../../../store';
+import PreferredBandoService from '../../../../service/preferred-bando-service';
+import set404FromErrorResponse from '../../../../helpers/set404FromErrorResponse';
+
+const LatestBandiBeneficiarioTableAsync = () => {
+    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: {
+            name: { value: null, matchMode: 'contains' },
+            startDate: { value: null, matchMode: 'dateIs' },
+            endDate: { value: null, matchMode: 'dateIs' },
+            status: { value: null, matchMode: 'equals' }
+        }
+    });
+    const statuses = ['PUBLISH'];
+
+    const getPaginationQuery = useCallback(() => getQueryParamsForPaginatedEndpoint(lazyState, statuses, 'id'), [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 = new Date(d.dates[0]);
+            d.endDate = new Date(d.dates[1]);
+
+            return d;
+        });
+    };
+
+    const addToFavourites = (id, preferredId) => {
+        const companyId = storeGet('chosenCompanyId')
+        const data = {
+            companyId,
+            callId: id
+        }
+        setLocalAsyncRequest(true);
+        if (preferredId && preferredId !== 0) {
+            PreferredBandoService.deleteFromPreferred(preferredId, (data) => removeFavCallback(data, id), errToggleFavCallback);
+        } else {
+            PreferredBandoService.addToPreferred(data, addFavCallback, errToggleFavCallback);
+        }
+    }
+
+    const removeFavCallback = (data, id) => {
+        if (data.status === 'SUCCESS') {
+            const newItems = items.map((o) => {
+                if (o.id === id) {
+                    return {
+                        ...o,
+                        preferredCallId: null
+                    }
+                } else {
+                    return o;
+                }
+            });
+            setItems(newItems)
+        }
+        setLocalAsyncRequest(false);
+    }
+
+    const addFavCallback = (data) => {
+        if (data.status === 'SUCCESS') {
+            const newItems = items.map((o) => {
+                if (o.id === data.data.callId) {
+                    return {
+                        ...o,
+                        preferredCallId: data.data.id
+                    }
+                } else {
+                    return o;
+                }
+            });
+            setItems(newItems)
+        }
+        setLocalAsyncRequest(false);
+    }
+
+    const errToggleFavCallback = (data) => {
+        set404FromErrorResponse(data);
+        setLocalAsyncRequest(false);
+    }
+
+    const actionsBodyTemplate = (rowData) => {
+        return <div className="appPageSection__tableActions">
+            <button type="button"
+                    className="appPageSection__addToFavourites"
+                    data-active={!isNil(rowData.preferredCallId)}
+                    onClick={() => addToFavourites(rowData.id, rowData.preferredCallId)}>
+                <i className="pi pi-heart" style={{ fontSize: '1rem' }}></i>
+            </button>
+            <Link to={`/bandi/${rowData.id}`}>
+                <Button severity="info" label={__('Partecipa', 'gepafin')} icon="pi pi-arrow-right" size="small"
+                        iconPos="right"/>
+            </Link></div>
+    }
+
+    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"/>;
+    };
+
+    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) => {
+        const startTimeObj = getTimeParsedFromString(rowData.startTime);
+        return getFormattedDateString(rowData.startDate) + ' ' + getTimeFromISOstring(startTimeObj);
+    };
+
+    const dateEndBodyTemplate = (rowData) => {
+        const endTimeObg = getTimeParsedFromString(rowData.endTime);
+        return getFormattedDateString(rowData.endDate)  + ' ' + getTimeFromISOstring(endTimeObg);
+    };
+
+    useEffect(() => {
+        setLocalAsyncRequest(true);
+        const paginationQuery = getPaginationQuery();
+
+        BandoService.getBandiPaginated(paginationQuery, getCallback, errGetCallbacks);
+    }, [lazyState]);
+
+    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="name"
+                        sortable
+                        filterField="name" filter
+                        filterMatchModeOptions={translationStrings.textFilterOptions}
+                        filterPlaceholder={__('Cerca il nome', 'gepafin')}
+                        header={__('Nome Bando', 'gepafin')}
+                        style={{ minWidth: '8rem' }}/>
+                <Column header={__('Data Pubblicazione', 'gepafin')}
+                        filterElement={dateFilterTemplate} filter
+                        filterField="startDate" dataType="date"
+                        filterMatchModeOptions={translationStrings.dateFilterOptions}
+                        style={{ minWidth: '8rem' }}
+                        body={dateStartBodyTemplate}/>
+                <Column header={__('Data Scadenza', 'gepafin')}
+                        filterElement={dateFilterTemplate} filter
+                        filterField="endDate" dataType="date"
+                        filterMatchModeOptions={translationStrings.dateFilterOptions}
+                        style={{ minWidth: '8rem' }}
+                        body={dateEndBodyTemplate}/>
+                <Column field="status"
+                        filterElement={statusFilterTemplate} filter
+                        filterMatchModeOptions={translationStrings.statusFilterOptions}
+                        header={__('Stato', 'gepafin')}
+                        style={{ minWidth: '7rem' }}
+                        body={statusBodyTemplate} />
+                <Column header={__('Azioni', 'gepafin')}
+                        body={actionsBodyTemplate}/>
+            </DataTable>
+        </div>
+    )
+}
+
+export default LatestBandiBeneficiarioTableAsync;

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

@@ -4,7 +4,7 @@ import { uniq, isEmpty, isNil } from 'ramda';
 import { Link } from 'react-router-dom';
 
 // store
-import { storeGet, useStore } from '../../../../store';
+import { storeGet, useStoreValue } from '../../../../store';
 
 // api
 import BandoService from '../../../../service/bando-service';
@@ -25,7 +25,7 @@ import translationStrings from '../../../../translationStringsForComponents';
 
 
 const LatestBandiTable = () => {
-    const chosenCompanyId = useStore().main.chosenCompanyId();
+    const chosenCompanyId = useStoreValue('chosenCompanyId');
     const [items, setItems] = useState(null);
     const [filters, setFilters] = useState(null);
     const [loading, setLoading] = useState(false);
@@ -54,7 +54,7 @@ const LatestBandiTable = () => {
     }
 
     const addToFavourites = (id, preferredId) => {
-        const companyId = storeGet.main.chosenCompanyId()
+        const companyId = storeGet('chosenCompanyId')
         const data = {
             companyId,
             callId: id

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

@@ -7,7 +7,7 @@ import getBandoLabel from '../../../../helpers/getBandoLabel';
 import getBandoSeverity from '../../../../helpers/getBandoSeverity';
 
 // store
-import { useStore } from '../../../../store';
+import { useStoreValue } from '../../../../store';
 
 // api
 import ApplicationService from '../../../../service/application-service';
@@ -28,8 +28,8 @@ import { ConfirmPopup, confirmPopup } from 'primereact/confirmpopup';
 import isDateTimeInPast from '../../../../helpers/isDateTimeInPast';
 
 const MyLatestSubmissionsTable = () => {
-    const chosenCompanyId = useStore().main.chosenCompanyId();
-    const companies = useStore().main.companies();
+    const chosenCompanyId = useStoreValue('chosenCompanyId');
+    const companies = useStoreValue('companies');
     const [localAsyncRequest, setLocalAsyncRequest] = useState(false);
     const [items, setItems] = useState(null);
     const [filters, setFilters] = useState(null);
@@ -153,8 +153,7 @@ const MyLatestSubmissionsTable = () => {
         return <Dropdown value={options.value} options={statuses}
                          onChange={(e) => options.filterCallback(e.value, options.index)}
                          itemTemplate={statusItemTemplate} placeholder={translationStrings.selectOneLabel}
-                         className="p-column-filter"
-                         showClear/>;
+                         className="p-column-filter"/>;
     };
 
     const progressBodyTemplate = (options) => {

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

@@ -0,0 +1,252 @@
+import React, { useEffect, useState, useCallback } from 'react';
+import { __ } from '@wordpress/i18n';
+import { is } from 'ramda';
+import { Link } from 'react-router-dom';
+
+import translationStrings from '../../../../translationStringsForComponents';
+
+// store
+import { useStoreValue } from '../../../../store';
+
+// api
+import ApplicationService from '../../../../service/application-service';
+
+//
+import getBandoLabel from '../../../../helpers/getBandoLabel';
+import getBandoSeverity from '../../../../helpers/getBandoSeverity';
+import getFormattedDateString from '../../../../helpers/getFormattedDateString';
+import getQueryParamsForPaginatedEndpoint from '../../../../helpers/getQueryParamsForPaginatedEndpoint';
+import isDateTimeInPast from '../../../../helpers/isDateTimeInPast';
+
+// 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';
+import { confirmPopup, ConfirmPopup } from 'primereact/confirmpopup';
+import { ProgressBar } from 'primereact/progressbar';
+
+const MyLatestSubmissionsTableAsync = () => {
+    const chosenCompanyId = useStoreValue('chosenCompanyId');
+    const companies = useStoreValue('companies');
+    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: {
+            id: { value: null, matchMode: 'equals' },
+            callTitle: { value: null, matchMode: 'contains' },
+            companyName: { value: null, matchMode: 'contains' },
+            callEndDate: { value: null, matchMode: 'dateIs' },
+            modifiedDate: { value: null, matchMode: 'dateIs' },
+            assignedUserName: { value: null, matchMode: 'equals' },
+            status: { value: null, matchMode: 'equals' }
+        }
+    });
+
+    const statuses = ['DRAFT', 'AWAITING', 'READY'];
+
+    const getPaginationQuery = useCallback(() => getQueryParamsForPaginatedEndpoint(lazyState, statuses, 'id'), [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.callEndDate = is(String, d.callEndDate) ? new Date(d.callEndDate) : (d.callEndDate ? d.callEndDate : '');
+            d.modifiedDate = is(String, d.modifiedDate) ? new Date(d.modifiedDate) : (d.modifiedDate ? d.modifiedDate : '');
+            return d;
+        });
+    };
+
+    const confirmDelete = (event, id) => {
+        confirmPopup({
+            target: event.currentTarget,
+            message: __('Sei sicuro di voler rimuovere la domanda?', 'gepafin'),
+            acceptLabel: __('Si', 'gepafin'),
+            icon: 'pi pi-info-circle',
+            defaultFocus: 'reject',
+            acceptClassName: 'p-button-danger',
+            accept: () => {
+                handleDeleteApplication(id);
+            },
+            reject: () => {
+            }
+        });
+    };
+
+    const handleDeleteApplication = (id) => {
+        setLocalAsyncRequest(true);
+        ApplicationService.deleteApplication(id, (resp) => delApplCallback(resp, id), errDelApplCallback)
+    }
+
+    const delApplCallback = (resp, id) => {
+        if (resp.status === 'SUCCESS') {
+            const newItems = items.filter(o => o.id !== id);
+            setItems(newItems);
+        }
+        setLocalAsyncRequest(false);
+    }
+
+    const errDelApplCallback = (data) => {
+        setLocalAsyncRequest(false);
+    }
+
+    const actionsBodyTemplate = (rowData) => {
+        const isCallExpired = isDateTimeInPast(rowData.callEndDate, rowData.callEndTime);
+        return <div className="appPageSection__tableActions lessGap">
+            {'DRAFT' === rowData.status && !isCallExpired
+                ? <Link to={`/imieibandi/${rowData.id}`}>
+                    <Button severity="info" label={__('Modifica', 'gepafin')} icon="pi pi-pencil" size="small"
+                            iconPos="right"/>
+                </Link>
+                : null}
+            {'DRAFT' !== rowData.status || isCallExpired
+                ? <Link to={`/imieibandi/${rowData.id}`}>
+                    <Button severity="info" label={__('Mostra', 'gepafin')} icon="pi pi-eye" size="small"
+                            iconPos="right"/>
+                </Link>
+                : null}
+            <ConfirmPopup/>
+            <Button severity="danger"
+                    onClick={(event) => confirmDelete(event, rowData.id)}
+                    label={__('Cancella', 'gepafin')}
+                    icon="pi pi-trash"
+                    size="small"
+                    iconPos="right"/>
+        </div>
+    }
+
+    const progressBodyTemplate = (options) => {
+        return <ProgressBar value={options.progress} color={'#64748B'}></ProgressBar>;
+    };
+
+    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"/>;
+    };
+
+    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 dateEndBodyTemplate = (rowData) => {
+        return getFormattedDateString(rowData.callEndDate);
+    };
+
+    const dateModifyBodyTemplate = (rowData) => {
+        return getFormattedDateString(rowData.modifiedDate);
+    };
+
+    useEffect(() => {
+        setLocalAsyncRequest(true);
+        const paginationQuery = getPaginationQuery();
+
+        ApplicationService.getApplicationsPaginated(paginationQuery, getCallback, errGetCallbacks, [
+            ['companyId', chosenCompanyId]
+        ]);
+    }, [lazyState, chosenCompanyId, companies]);
+
+    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="callTitle" header={__('Bando', 'gepafin')}
+                        filterField="callTitle" 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={__('Scadenza', 'gepafin')}
+                        filterField="callEndDate" dataType="date"
+                        filterMatchModeOptions={translationStrings.dateFilterOptions}
+                        style={{ minWidth: '8rem' }}
+                        body={dateEndBodyTemplate}
+                        filter
+                        filterElement={dateFilterTemplate}/>
+                <Column header={__('Ultima modifica', 'gepafin')}
+                        filterField="modifiedDate" dataType="date"
+                        filterMatchModeOptions={translationStrings.dateFilterOptions}
+                        style={{ minWidth: '8rem' }}
+                        body={dateModifyBodyTemplate}
+                        filter
+                        filterElement={dateFilterTemplate}/>
+                <Column field="status" header={__('Stato', 'gepafin')}
+                        filterElement={statusFilterTemplate} filter
+                        filterMatchModeOptions={translationStrings.statusFilterOptions}
+                        style={{ minWidth: '8rem' }}
+                        body={statusBodyTemplate}/>
+                <Column header={__('Progressi', 'gepafin')}
+                        style={{ minWidth: '10rem' }} field="progress" body={progressBodyTemplate}/>
+                <Column header={__('Azioni', 'gepafin')}
+                        body={actionsBodyTemplate}/>
+            </DataTable>
+        </div>
+    )
+}
+
+export default MyLatestSubmissionsTableAsync;

src/pages/DashboardBeneficiario/index.js

@@ -5,22 +5,22 @@ import { head, isEmpty, pathOr } from 'ramda';
 import NumberFlow from '@number-flow/react';
 
 // store
-import { useStore } from '../../store';
+import { useStoreValue } from '../../store';
 
 // api
 import DashboardService from '../../service/dashboard-service';
 
 // components
-import MyLatestSubmissionsTable from './components/MyLatestSubmissionsTable';
 import { Button } from 'primereact/button';
 import ErrorBoundary from '../../components/ErrorBoundary';
-import LatestBandiTableAsync from '../Dashboard/components/LatestBandiTableAsync';
+import LatestBandiBeneficiarioTableAsync from './components/LatestBandiBeneficiarioTableAsync';
+import MyLatestSubmissionsTableAsync from './components/MyLatestSubmissionsTableAsync';
 
 const DashboardBeneficiario = () => {
     const navigate = useNavigate();
     const [mainStats, setMainStats] = useState({});
-    const companies = useStore().main.companies();
-    const chosenCompanyId = useStore().main.chosenCompanyId();
+    const companies = useStoreValue('companies');
+    const chosenCompanyId = useStoreValue('chosenCompanyId');
     const company = head(companies.filter(o => o.id === chosenCompanyId));
 
     const goToAllSubmissions = () => {
@@ -88,7 +88,7 @@ const DashboardBeneficiario = () => {
 
             <div className="appPageSection">
                 <h2>{__('Domande in lavorazione', 'gepafin')}</h2>
-                <ErrorBoundary><MyLatestSubmissionsTable/></ErrorBoundary>
+                <ErrorBoundary><MyLatestSubmissionsTableAsync/></ErrorBoundary>
             </div>
 
             <div className="appPage__spacer"></div>
@@ -108,7 +108,7 @@ const DashboardBeneficiario = () => {
 
             <div className="appPageSection">
                 <h2>{__('Bandi disponibili', 'gepafin')}</h2>
-                <ErrorBoundary><LatestBandiTableAsync/></ErrorBoundary>
+                <ErrorBoundary><LatestBandiBeneficiarioTableAsync/></ErrorBoundary>
             </div>
 
             <div className="appPage__spacer"></div>

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

@@ -21,7 +21,7 @@ import { Dropdown } from 'primereact/dropdown';
 import { Tag } from 'primereact/tag';
 
 import translationStrings from '../../../../translationStringsForComponents';
-import { useStore } from '../../../../store';
+import { useStoreValue } from '../../../../store';
 import { klona } from 'klona';
 
 const APP_HUB_ID = process.env.REACT_APP_HUB_ID;
@@ -32,7 +32,7 @@ const InstructorManagerMieDomandeTable = ({ userId = null, statuses = [] }) => {
     const [filters, setFilters] = useState(null);
     const [localAsyncRequest, setLocalAsyncRequest] = useState(false);
     const [statusesForFilter, setStatusesForFilter] = useState([]);
-    const userData = useStore().main.userData();
+    const userData = useStoreValue('userData');
 
     useEffect(() => {
         if (!isNil(userId)) {
@@ -132,7 +132,10 @@ const InstructorManagerMieDomandeTable = ({ userId = null, statuses = [] }) => {
     };
 
     const statusFilterTemplate = (options) => {
-        return <Dropdown value={options.value} options={statusesForFilter} onChange={(e) => options.filterCallback(e.value, options.index)} itemTemplate={statusItemTemplate} placeholder={translationStrings.selectOneLabel} className="p-column-filter" showClear />;
+        return <Dropdown value={options.value} options={statusesForFilter}
+                         onChange={(e) => options.filterCallback(e.value, options.index)}
+                         itemTemplate={statusItemTemplate} placeholder={translationStrings.selectOneLabel}
+                         className="p-column-filter"/>;
     };
 
     const statusItemTemplate = (option) => {

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

@@ -1,11 +1,11 @@
 import React, { useEffect, useState, useCallback } from 'react';
 import { __ } from '@wordpress/i18n';
-import { isEmpty, pathOr } from 'ramda';
 
 import translationStrings from '../../../../translationStringsForComponents';
 
 // api
 import BandoService from '../../../../service/bando-service';
+import ApplicationService from '../../../../service/application-service';
 
 // tools
 import getTimeParsedFromString from '../../../../helpers/getTimeParsedFromString';
@@ -13,6 +13,8 @@ import getTimeFromISOstring from '../../../../helpers/getTimeFromISOstring';
 import getFormattedDateString from '../../../../helpers/getFormattedDateString';
 import getBandoLabel from '../../../../helpers/getBandoLabel';
 import getBandoSeverity from '../../../../helpers/getBandoSeverity';
+import getQueryParamsForPaginatedEndpoint from '../../../../helpers/getQueryParamsForPaginatedEndpoint';
+import set404FromErrorResponse from '../../../../helpers/set404FromErrorResponse';
 
 // components
 import { DataTable } from 'primereact/datatable';
@@ -21,6 +23,7 @@ import ProperBandoLabel from '../../../../components/ProperBandoLabel';
 import { Dropdown } from 'primereact/dropdown';
 import { Tag } from 'primereact/tag';
 import { Calendar } from 'primereact/calendar';
+import { Button } from 'primereact/button';
 
 const LatestBandiTableInstructorManagerAsync = () => {
     const [localAsyncRequest, setLocalAsyncRequest] = useState(false);
@@ -34,41 +37,14 @@ const LatestBandiTableInstructorManagerAsync = () => {
         sortOrder: null,
         filters: {
             name: { value: null, matchMode: 'contains' },
-            startDate: { value: null, matchMode: 'date_is' },
-            endDate: { value: null, matchMode: 'date_is' },
+            startDate: { value: null, matchMode: 'dateIs' },
+            endDate: { value: null, matchMode: 'dateIs' },
             status: { value: null, matchMode: 'equals' }
         }
     });
-    const statuses = ['PUBLISH'];
+    const statuses = ['PUBLISH', 'EXPIRED'];
 
-    const getPaginationQuery = useCallback(() => {
-        let sortBy = {
-            columnName: "ID",
-            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 getPaginationQuery = useCallback(() => getQueryParamsForPaginatedEndpoint(lazyState, statuses, 'id'), [lazyState]);
 
     const onPage = (event) => {
         setLazyState(event);
@@ -130,8 +106,7 @@ const LatestBandiTableInstructorManagerAsync = () => {
                              }
                              setLazyState({ ...lazyState, filters, first: 0 });
                          }}
-                         itemTemplate={statusItemTemplate} placeholder={translationStrings.selectOneLabel} className="p-column-filter"
-                         showClear/>;
+                         itemTemplate={statusItemTemplate} placeholder={translationStrings.selectOneLabel} className="p-column-filter"/>;
     };
 
     const dateFilterTemplate = (options) => {
@@ -149,6 +124,43 @@ const LatestBandiTableInstructorManagerAsync = () => {
         return getFormattedDateString(rowData.endDate)  + ' ' + getTimeFromISOstring(endTimeObg);
     };
 
+    const actionsBodyTemplate = (rowData) => {
+        return <div className="appPageSection__tableActions">
+            <Button type="button"
+                    size="small"
+                    icon="pi pi-receipt"
+                    iconPos="right"
+                    label={__('CSV', 'gepafin')}
+                    onClick={() => exportToCSV(rowData.id)}/>
+        </div>
+    }
+
+    const exportToCSV = (applicationId) => {
+        setLocalAsyncRequest(true);
+        ApplicationService.downloadCsvReport(
+            applicationId,
+            (resp) => getCsvReportback(resp, applicationId),
+            errCsvReportCallback
+        )
+    }
+
+    const getCsvReportback = (resp, applicationId) => {
+        const file = new Blob([resp], { type: 'text/csv' });
+        const url = window.URL.createObjectURL(file);
+        const link = document.createElement('a');
+        link.href = url;
+        link.setAttribute('download', `call-${applicationId}-applications-report.csv`);
+        document.body.appendChild(link);
+        link.click();
+        link.remove();
+        setLocalAsyncRequest(false);
+    }
+
+    const errCsvReportCallback = (resp) => {
+        set404FromErrorResponse(resp);
+        setLocalAsyncRequest(false);
+    }
+
     useEffect(() => {
         setLocalAsyncRequest(true);
         const paginationQuery = getPaginationQuery();
@@ -190,6 +202,8 @@ const LatestBandiTableInstructorManagerAsync = () => {
                         header={__('Stato', 'gepafin')}
                         style={{ minWidth: '7rem' }}
                         body={statusBodyTemplate} />
+                <Column header={__('Azioni', 'gepafin')}
+                        body={actionsBodyTemplate}/>
             </DataTable>
         </div>
     )

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

@@ -1,6 +1,6 @@
 import React, { useEffect, useState, useCallback } from 'react';
 import { __ } from '@wordpress/i18n';
-import { head, is, isEmpty, pathOr } from 'ramda';
+import { head, is } from 'ramda';
 import { klona } from 'klona';
 
 import translationStrings from '../../../../translationStringsForComponents';
@@ -9,7 +9,7 @@ import translationStrings from '../../../../translationStringsForComponents';
 import AssignedApplicationService from '../../../../service/assigned-application-service';
 
 // store
-import { useStore } from '../../../../store';
+import { useStoreValue } from '../../../../store';
 
 // tools
 import getFormattedDateString from '../../../../helpers/getFormattedDateString';
@@ -25,13 +25,14 @@ import { Tag } from 'primereact/tag';
 import { Calendar } from 'primereact/calendar';
 import { Button } from 'primereact/button';
 import { Link, useNavigate } from 'react-router-dom';
+import getQueryParamsForPaginatedEndpoint from '../../../../helpers/getQueryParamsForPaginatedEndpoint';
 
 
 const APP_HUB_ID = process.env.REACT_APP_HUB_ID;
 
 const MieDomandeTableInstructorManagerAsync = ({ userId = null, statuses = [] }) => {
     const navigate = useNavigate();
-    const userData = useStore().main.userData();
+    const userData = useStoreValue('userData');
     const [localAsyncRequest, setLocalAsyncRequest] = useState(false);
     const [items, setItems] = useState(null);
     const [totalRecordsNum, setTotalRecordsNum] = useState(0);
@@ -42,44 +43,17 @@ const MieDomandeTableInstructorManagerAsync = ({ userId = null, statuses = [] })
         sortField: null,
         sortOrder: null,
         filters: {
-            applicationId: { value: null, matchMode: 'contains' },
-            protocolNumber: { value: null, matchMode: 'contains' },
+            applicationId: { value: null, matchMode: 'equals' },
+            protocolNumber: { value: null, matchMode: 'equals' },
             callName: { value: null, matchMode: 'contains' },
             companyName: { value: null, matchMode: 'contains' },
-            submissionDate: { value: null, matchMode: 'date_is' },
-            evaluationEndDate: { value: null, matchMode: 'date_is' },
-            status: { value: null, matchMode: 'equals' }
+            submissionDate: { value: null, matchMode: 'dateIs' },
+            evaluationEndDate: { value: null, matchMode: 'dateIs' },
+            applicationStatus: { value: null, matchMode: 'equals' }
         }
     });
 
-    const getPaginationQuery = useCallback(() => {
-        let sortBy = {
-            columnName: "ID",
-            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 getPaginationQuery = useCallback(() => getQueryParamsForPaginatedEndpoint(lazyState, statuses, 'applicationId'), [lazyState]);
 
     const onPage = (event) => {
         setLazyState(event);
@@ -121,7 +95,7 @@ const MieDomandeTableInstructorManagerAsync = ({ userId = null, statuses = [] })
     };
 
     const statusBodyTemplate = (rowData) => {
-        return <ProperBandoLabel status={rowData.status}/>;
+        return <ProperBandoLabel status={rowData.applicationStatus}/>;
     };
 
     const statusItemTemplate = (option) => {
@@ -140,8 +114,7 @@ const MieDomandeTableInstructorManagerAsync = ({ userId = null, statuses = [] })
                              }
                              setLazyState({ ...lazyState, filters, first: 0 });
                          }}
-                         itemTemplate={statusItemTemplate} placeholder={translationStrings.selectOneLabel} className="p-column-filter"
-                         showClear/>;
+                         itemTemplate={statusItemTemplate} placeholder={translationStrings.selectOneLabel} className="p-column-filter"/>;
     };
 
     const dateFilterTemplate = (options) => {
@@ -222,13 +195,13 @@ const MieDomandeTableInstructorManagerAsync = ({ userId = null, statuses = [] })
                 <Column field="applicationId" header={__('ID domanda', 'gepafin')}
                         sortable
                         filterField="applicationId" filter
-                        filterMatchModeOptions={translationStrings.textFilterOptions}
+                        filterMatchModeOptions={translationStrings.numberFilterOptions}
                         filterPlaceholder={__('Cerca', 'gepafin')}
                         style={{ minWidth: '6rem' }}/>
                 <Column field="protocolNumber" header={__('Protocollo', 'gepafin')}
                         sortable
                         filterField="protocolNumber" filter
-                        filterMatchModeOptions={translationStrings.textFilterOptions}
+                        filterMatchModeOptions={translationStrings.numberFilterOptions}
                         filterPlaceholder={__('Cerca', 'gepafin')}
                         style={{ minWidth: '6rem' }}/>
                 {APP_HUB_ID !== 't7jh5wfg9QXylNaTZkPoE'

src/pages/DashboardInstructorManager/index.js

@@ -11,12 +11,9 @@ import DashboardService from '../../service/dashboard-service';
 import { Button } from 'primereact/button';
 import ChartDomandePerBando from '../../components/ChartDomandePerBando';
 import ChartStatoDomande from '../../components/ChartStatoDomande';
-/*import LatestBandiTableInstructorManagerAsync from './components/LatestBandiTableInstructorManagerAsync';
+import LatestBandiTableInstructorManagerAsync from './components/LatestBandiTableInstructorManagerAsync';
 import DraftApplicationsTableAsync from '../Dashboard/components/DraftApplicationsTableAsync';
-import AllDomandeTableAsync from '../Domande/components/AllDomandeTableAsync';*/
-import LatestBandiTableInstructorManager from './components/LatestBandiTableInstructorManager';
-import AllDomandeTable from '../Domande/components/AllDomandeTable';
-import DraftApplicationsTable from '../Dashboard/components/DraftApplicationsTable';
+import AllDomandeTableAsync from '../Domande/components/AllDomandeTableAsync';
 
 const REACT_APP_HUB_ID = process.env.REACT_APP_HUB_ID;
 
@@ -130,24 +127,21 @@ const DashboardInstructorManager = () => {
 
             <div className="appPageSection">
                 <h2>{__('Ultimi bandi pubblicati', 'gepafin')}</h2>
-                {/*<LatestBandiTableInstructorManagerAsync/>*/}
-                <LatestBandiTableInstructorManager/>
+                <LatestBandiTableInstructorManagerAsync/>
             </div>
 
             <div className="appPage__spacer"></div>
 
             <div className="appPageSection">
                 <h2>{__('Ultime domande pubblicate', 'gepafin')}</h2>
-                {/*<AllDomandeTableAsync/>*/}
-                <AllDomandeTable/>
+                <AllDomandeTableAsync/>
             </div>
 
             <div className="appPage__spacer"></div>
 
             <div className="appPageSection">
                 <h2>{__('Domande in bozza', 'gepafin')}</h2>
-                {/*<DraftApplicationsTableAsync/>*/}
-                <DraftApplicationsTable/>
+                <DraftApplicationsTableAsync/>
             </div>
 
             <div className="appPage__spacer"></div>

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

@@ -1,6 +1,6 @@
 import React, { useEffect, useState, useCallback } from 'react';
 import { __ } from '@wordpress/i18n';
-import { head, is, isEmpty, pathOr } from 'ramda';
+import { head, is } from 'ramda';
 import { klona } from 'klona';
 
 import translationStrings from '../../../../translationStringsForComponents';
@@ -9,7 +9,7 @@ import translationStrings from '../../../../translationStringsForComponents';
 import AssignedApplicationService from '../../../../service/assigned-application-service';
 
 // store
-import { useStore } from '../../../../store';
+import { useStoreValue } from '../../../../store';
 
 // tools
 import getFormattedDateString from '../../../../helpers/getFormattedDateString';
@@ -25,13 +25,14 @@ import { Tag } from 'primereact/tag';
 import { Calendar } from 'primereact/calendar';
 import { Button } from 'primereact/button';
 import { Link, useNavigate } from 'react-router-dom';
+import getQueryParamsForPaginatedEndpoint from '../../../../helpers/getQueryParamsForPaginatedEndpoint';
 
 
 const APP_HUB_ID = process.env.REACT_APP_HUB_ID;
 
 const DomandeTablePreInstructorAsync = ({ userId = null, statuses = [] }) => {
     const navigate = useNavigate();
-    const userData = useStore().main.userData();
+    const userData = useStoreValue('userData');
     const [localAsyncRequest, setLocalAsyncRequest] = useState(false);
     const [items, setItems] = useState(null);
     const [totalRecordsNum, setTotalRecordsNum] = useState(0);
@@ -42,44 +43,17 @@ const DomandeTablePreInstructorAsync = ({ userId = null, statuses = [] }) => {
         sortField: null,
         sortOrder: null,
         filters: {
-            applicationId: { value: null, matchMode: 'contains' },
-            protocolNumber: { value: null, matchMode: 'contains' },
+            applicationId: { value: null, matchMode: 'equals' },
+            protocolNumber: { value: null, matchMode: 'equals' },
             callName: { value: null, matchMode: 'contains' },
             companyName: { value: null, matchMode: 'contains' },
-            submissionDate: { value: null, matchMode: 'date_is' },
-            evaluationEndDate: { value: null, matchMode: 'date_is' },
-            status: { value: null, matchMode: 'equals' }
+            submissionDate: { value: null, matchMode: 'dateIs' },
+            evaluationEndDate: { value: null, matchMode: 'dateIs' },
+            applicationStatus: { value: null, matchMode: 'equals' }
         }
     });
 
-    const getPaginationQuery = useCallback(() => {
-        let sortBy = {
-            columnName: "ID",
-            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 getPaginationQuery = useCallback(() => getQueryParamsForPaginatedEndpoint(lazyState, statuses, 'applicationId'), [lazyState]);
 
     const onPage = (event) => {
         setLazyState(event);
@@ -121,7 +95,7 @@ const DomandeTablePreInstructorAsync = ({ userId = null, statuses = [] }) => {
     };
 
     const statusBodyTemplate = (rowData) => {
-        return <ProperBandoLabel status={rowData.status}/>;
+        return <ProperBandoLabel status={rowData.applicationStatus}/>;
     };
 
     const statusItemTemplate = (option) => {
@@ -140,8 +114,7 @@ const DomandeTablePreInstructorAsync = ({ userId = null, statuses = [] }) => {
                              }
                              setLazyState({ ...lazyState, filters, first: 0 });
                          }}
-                         itemTemplate={statusItemTemplate} placeholder={translationStrings.selectOneLabel} className="p-column-filter"
-                         showClear/>;
+                         itemTemplate={statusItemTemplate} placeholder={translationStrings.selectOneLabel} className="p-column-filter"/>;
     };
 
     const dateFilterTemplate = (options) => {
@@ -222,13 +195,13 @@ const DomandeTablePreInstructorAsync = ({ userId = null, statuses = [] }) => {
                 <Column field="applicationId" header={__('ID domanda', 'gepafin')}
                         sortable
                         filterField="applicationId" filter
-                        filterMatchModeOptions={translationStrings.textFilterOptions}
+                        filterMatchModeOptions={translationStrings.numberFilterOptions}
                         filterPlaceholder={__('Cerca', 'gepafin')}
                         style={{ minWidth: '6rem' }}/>
                 <Column field="protocolNumber" header={__('Protocollo', 'gepafin')}
                         sortable
                         filterField="protocolNumber" filter
-                        filterMatchModeOptions={translationStrings.textFilterOptions}
+                        filterMatchModeOptions={translationStrings.numberFilterOptions}
                         filterPlaceholder={__('Cerca', 'gepafin')}
                         style={{ minWidth: '6rem' }}/>
                 {APP_HUB_ID !== 't7jh5wfg9QXylNaTZkPoE'

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

@@ -21,7 +21,7 @@ import { Dropdown } from 'primereact/dropdown';
 import { Tag } from 'primereact/tag';
 
 import translationStrings from '../../../../translationStringsForComponents';
-import { useStore } from '../../../../store';
+import { useStoreValue } from '../../../../store';
 import { klona } from 'klona';
 
 const APP_HUB_ID = process.env.REACT_APP_HUB_ID;
@@ -32,7 +32,7 @@ const PreInstructorDomandeTable = ({ userId = null, statuses = [] }) => {
     const [filters, setFilters] = useState(null);
     const [localAsyncRequest, setLocalAsyncRequest] = useState(false);
     const [statusesForFilter, setStatusesForFilter] = useState([]);
-    const userData = useStore().main.userData();
+    const userData = useStoreValue('userData');
 
     useEffect(() => {
         if (!isNil(userId)) {
@@ -132,7 +132,10 @@ const PreInstructorDomandeTable = ({ userId = null, statuses = [] }) => {
     };
 
     const statusFilterTemplate = (options) => {
-        return <Dropdown value={options.value} options={statusesForFilter} onChange={(e) => options.filterCallback(e.value, options.index)} itemTemplate={statusItemTemplate} placeholder={translationStrings.selectOneLabel} className="p-column-filter" showClear />;
+        return <Dropdown value={options.value} options={statusesForFilter}
+                         onChange={(e) => options.filterCallback(e.value, options.index)}
+                         itemTemplate={statusItemTemplate} placeholder={translationStrings.selectOneLabel}
+                         className="p-column-filter"/>;
     };
 
     const statusItemTemplate = (option) => {

src/pages/DashboardPreInstructor/index.js

@@ -5,20 +5,19 @@ import NumberFlow from '@number-flow/react';
 import { pathOr } from 'ramda';
 
 // store
-import { useStore } from '../../store';
+import { useStoreValue } from '../../store';
 
 // service
 import DashboardService from '../../service/dashboard-service';
 
 // components
 import { Button } from 'primereact/button';
-//import DomandeTablePreInstructorAsync from './components/DomandeTablePreInstructorAsync';
-import PreInstructorDomandeTable from './components/PreInstructorDomandeTable';
+import DomandeTablePreInstructorAsync from './components/DomandeTablePreInstructorAsync';
 
 const DashboardPreInstructor = () => {
     const navigate = useNavigate();
     const [mainStats, setMainStats] = useState({});
-    const userData = useStore().main.userData();
+    const userData = useStoreValue('userData');
 
     const goToAllEvaluations = () => {
         navigate('/domande');
@@ -111,8 +110,7 @@ const DashboardPreInstructor = () => {
 
             <div className="appPageSection">
                 <h2>{__('Coda di lavoro', 'gepafin')}</h2>
-                <PreInstructorDomandeTable statuses={['OPEN', 'SOCCORSO']} userId={userData.id}/>
-                {/*<DomandeTablePreInstructorAsync statuses={['OPEN', 'SOCCORSO']} userId={userData.id}/>*/}
+                <DomandeTablePreInstructorAsync statuses={['OPEN', 'SOCCORSO']} userId={userData.id}/>
             </div>
 
             <div className="appPage__spacer"></div>

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

@@ -3,7 +3,7 @@ import { __ } from '@wordpress/i18n';
 import { head, is, uniq } from 'ramda';
 
 // store
-import { useStore } from '../../../../store';
+import { useStoreValue } from '../../../../store';
 
 // tools
 import getBandoSeverity from '../../../../helpers/getBandoSeverity';
@@ -25,8 +25,8 @@ import ProperBandoLabel from '../../../../components/ProperBandoLabel';
 import { confirmPopup, ConfirmPopup } from 'primereact/confirmpopup';
 
 const DocumentsTable = ({ type, reload = 0 }) => {
-    const chosenCompanyId = useStore().main.chosenCompanyId();
-    const companies = useStore().main.companies();
+    const chosenCompanyId = useStoreValue('chosenCompanyId');
+    const companies = useStoreValue('companies');
     const [docs, setDocs] = useState([]);
     const [filters, setFilters] = useState(null);
     const [loading, setLoading] = useState(false);
@@ -128,8 +128,7 @@ const DocumentsTable = ({ type, reload = 0 }) => {
         return <Dropdown value={options.value} options={statuses}
                          onChange={(e) => options.filterCallback(e.value, options.index)}
                          itemTemplate={statusItemTemplate} placeholder={__('Scegli uno', 'gepafin')}
-                         className="p-column-filter"
-                         showClear/>;
+                         className="p-column-filter"/>;
     };
 
     const statusItemTemplate = (option) => {

src/pages/DocumentsBeneficiary/index.js

@@ -4,8 +4,12 @@ import { classNames } from 'primereact/utils';
 import { wrap } from 'object-path-immutable';
 import { head, isEmpty, isNil } from 'ramda';
 
+// store
+import { storeSet, useStoreValue } from '../../store';
+
 // api
 import DocumentCategoryService from '../../service/document-category-service';
+import CompanyDocumentsService from '../../service/company-documents-service';
 
 // components
 import DocumentsTable from './components/DocumentsTable';
@@ -13,20 +17,18 @@ import { Dialog } from 'primereact/dialog';
 import { Button } from 'primereact/button';
 import { Dropdown } from 'primereact/dropdown';
 import { InputText } from 'primereact/inputtext';
-import { storeSet, useStore } from '../../store';
 import { Calendar } from 'primereact/calendar';
 import { FileUpload } from 'primereact/fileupload';
 import formatDateString from '../../helpers/formatDateString';
-import CompanyDocumentsService from '../../service/company-documents-service';
 import { Link } from 'react-router-dom';
 
 
 const DocumentsBeneficiary = () => {
     const [loading, setLoading] = useState(false);
-    const chosenCompanyId = useStore().main.chosenCompanyId();
-    const companies = useStore().main.companies();
+    const chosenCompanyId = useStoreValue('chosenCompanyId');
+    const companies = useStoreValue('companies');
     const [isVisibleAddNewDialog, setIsVisibleAddNewDialog] = useState(false);
-    const documentCategories= useStore().main.documentCategories();
+    const documentCategories= useStoreValue('documentCategories');
     const [newFileData, setNewFileData] = useState({});
     const [fileAttached, setFileAttached] = useState([]);
     const [reloadHash, setReloadHash] = useState(0);
@@ -66,7 +68,7 @@ const DocumentsBeneficiary = () => {
 
     const footerAddNewDialog = () => {
         return <div>
-            <Button type="button" label={__('Anulla', 'gepafin')} onClick={hideAddNewDialog} outlined/>
+            <Button type="button" label={__('Annulla', 'gepafin')} onClick={hideAddNewDialog} outlined/>
             <Button
                 type="button"
                 disabled={loading || !isValidForm()}
@@ -123,7 +125,7 @@ const DocumentsBeneficiary = () => {
 
     const getCategories = (resp) => {
         if (resp.status === 'SUCCESS') {
-            storeSet.main.documentCategories(resp.data.map(o => ({value: o.id, label: o.description})));
+            storeSet('documentCategories', resp.data.map(o => ({value: o.id, label: o.description})));
         }
         setLoading(false);
     }

src/pages/DomandaEditInstructorManager/index.js

@@ -9,7 +9,7 @@ import equal from 'fast-deep-equal';
 import { useForm } from 'react-hook-form';
 
 // store
-import { storeGet, storeSet, useStore } from '../../store';
+import { storeGet, storeSet, useStoreValue } from '../../store';
 
 // api
 import ApplicationEvaluationService from '../../service/application-evaluation-service';
@@ -57,7 +57,7 @@ const APP_EVALUATION_FLOW_ID = process.env.REACT_APP_EVALUATION_FLOW_ID;
 const APP_HUB_ID = process.env.REACT_APP_HUB_ID;
 
 const DomandaEditInstructorManager = () => {
-    const isAsyncRequest = useStore().main.isAsyncRequest();
+    const isAsyncRequest = useStoreValue('isAsyncRequest');
     const { id } = useParams();
     const navigate = useNavigate();
     const [data, setData] = useState({});
@@ -179,18 +179,18 @@ const DomandaEditInstructorManager = () => {
     const getVersion = (resp) => {
         if (resp.status === 'SUCCESS') {
             if (resp.data.evaluationVersion === 'V1') {
-                storeSet.main.setAsyncRequest();
+                storeSet('setAsyncRequest');
                 ApplicationEvaluationService.getEvaluationByApplId(getCallback, errGetCallback, [
                     ['applicationId', resp.data.applicationId]
                 ]);
             } else if (resp.data.evaluationVersion === 'V2') {
-                storeSet.main.setAsyncRequest();
+                storeSet('setAsyncRequest');
                 ApplicationEvaluationService.getEvaluationV2ByApplId(getCallback, errGetCallback, [
                     ['applicationId', resp.data.applicationId]
                 ]);
             }
         }
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const errGetVersion = (resp) => {
@@ -202,7 +202,7 @@ const DomandaEditInstructorManager = () => {
             });
         }
         set404FromErrorResponse(resp);
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const getCallback = (resp) => {
@@ -233,7 +233,7 @@ const DomandaEditInstructorManager = () => {
                 setFormInitialData(formDataInitial);
             }
         }
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const errGetCallback = (resp) => {
@@ -245,7 +245,7 @@ const DomandaEditInstructorManager = () => {
             });
         }
         set404FromErrorResponse(resp);
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const getFormattedData = (data) => {
@@ -377,7 +377,7 @@ const DomandaEditInstructorManager = () => {
                 afterUpdateCallback();
             }
         }
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const errUpdateCallback = (data) => {
@@ -389,7 +389,7 @@ const DomandaEditInstructorManager = () => {
             });
         }
         set404FromErrorResponse(data);
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const doApprove = useCallback(() => {
@@ -611,7 +611,7 @@ const DomandaEditInstructorManager = () => {
 
     const footerCompleteDialog = useCallback(() => {
         return <div>
-            <Button type="button" label={__('Anulla', 'gepafin')} onClick={hideCompleteDialog} outlined/>
+            <Button type="button" label={__('Annulla', 'gepafin')} onClick={hideCompleteDialog} outlined/>
             <Button
                 type="button"
                 disabled={loading || ('approve' === operationType && (!amountAccepted || isEmpty(amountAccepted) || amountAccepted === 0))}
@@ -635,7 +635,7 @@ const DomandaEditInstructorManager = () => {
     }
 
     const doGetNDGRequest = () => {
-        storeSet.main.setAsyncRequest();
+        storeSet('setAsyncRequest');
         AppointmentService.getNdg(id, getNdgCallback, errGetNdgCallback);
     }
 
@@ -655,7 +655,7 @@ const DomandaEditInstructorManager = () => {
                 }));
             }
         }
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const errGetNdgCallback = (data) => {
@@ -667,7 +667,7 @@ const DomandaEditInstructorManager = () => {
             });
         }
         set404FromErrorResponse(data);
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const doCreateAppointment = () => {
@@ -696,7 +696,7 @@ const DomandaEditInstructorManager = () => {
 
     const footerAppointmentDialog = () => {
         return <div>
-            <Button type="button" label={__('Anulla', 'gepafin')} onClick={hideAppointmentDialog} outlined/>
+            <Button type="button" label={__('Annulla', 'gepafin')} onClick={hideAppointmentDialog} outlined/>
             <Button
                 type="button"
                 disabled={loading}
@@ -709,7 +709,7 @@ const DomandaEditInstructorManager = () => {
             !isEmpty(appointmentData.title) && !isEmpty(appointmentData.text) && !isEmpty(appointmentData.amount)
             && !isEmpty(appointmentData.duration) && appointmentData.duration !== 0 && appointmentData.amount !== 0
         ) {
-            storeSet.main.setAsyncRequest();
+            storeSet('setAsyncRequest');
             const submitData = {
                 'importoBreveTermine': appointmentData.amount,
                 'durataMesiFinanziamento': appointmentData.duration,
@@ -740,7 +740,7 @@ const DomandaEditInstructorManager = () => {
             }
         }
         setIsVisibleAppointmentDialog(false);
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const errGetAppointemntCallback = (data) => {
@@ -753,7 +753,7 @@ const DomandaEditInstructorManager = () => {
         }
         setIsVisibleAppointmentDialog(false);
         set404FromErrorResponse(data);
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const doMakeAdmisible = () => {
@@ -771,7 +771,7 @@ const DomandaEditInstructorManager = () => {
     }, [isAdmissible]);
 
     const evaluationBlockedForUser = (data = {}) => {
-        const userData = storeGet.main.userData();
+        const userData = storeGet('userData');
         return isAsyncRequest || userData.id !== data.assignedUserId;
     }
 
@@ -933,7 +933,7 @@ const DomandaEditInstructorManager = () => {
         const parsed = parseInt(id)
         const entityId = !isNaN(parsed) ? parsed : 0;
 
-        storeSet.main.setAsyncRequest();
+        storeSet('setAsyncRequest');
         ApplicationEvaluationService.getEvaluationVersionByApplId(entityId, getVersion, errGetVersion);
         AmendmentsService.getSoccorsoByApplId(entityId, getAmendmentsCallback, errGetAmendmentsCallback, [
             ['statuses', ['AWAITING', 'RESPONSE_RECEIVED']]

src/pages/DomandaEditPreInstructor/components/ArchiveDocument/index.js

@@ -20,7 +20,7 @@ import { InputText } from 'primereact/inputtext';
 import { Toast } from 'primereact/toast';
 
 import { classificationType, protocolType } from '../../../../configData';
-import { useStore } from '../../../../store';
+import { useStoreValue } from '../../../../store';
 
 const ArchiveDocument = ({
                              applicationId,
@@ -36,7 +36,7 @@ const ArchiveDocument = ({
     const [types, setTypes] = useState([]);
     const [categories, setCategories] = useState([]);
     const toast = useRef(null);
-    const userData = useStore().main.userData();
+    const userData = useStoreValue('userData');
 
     const openArchivationModal = () => {
         setIsVisibleDialog(true);
@@ -66,7 +66,7 @@ const ArchiveDocument = ({
 
     const footerDialog = () => {
         return <div>
-            <Button type="button" label={__('Anulla', 'gepafin')} onClick={hideDialog} outlined/>
+            <Button type="button" label={__('Annulla', 'gepafin')} onClick={hideDialog} outlined/>
             <Button
                 type="button"
                 disabled={loading}

src/pages/DomandaEditPreInstructor/index.js

@@ -9,7 +9,7 @@ import { evaluate } from 'mathjs';
 import equal from 'fast-deep-equal';
 
 // store
-import { storeGet, storeSet, useStore } from '../../store';
+import { storeGet, storeSet, useStoreValue } from '../../store';
 
 // api
 import ApplicationEvaluationService from '../../service/application-evaluation-service';
@@ -58,7 +58,7 @@ const APP_EVALUATION_FLOW_ID = process.env.REACT_APP_EVALUATION_FLOW_ID;
 const APP_HUB_ID = process.env.REACT_APP_HUB_ID;
 
 const DomandaEditPreInstructor = () => {
-    const isAsyncRequest = useStore().main.isAsyncRequest();
+    const isAsyncRequest = useStoreValue('isAsyncRequest');
     const { id } = useParams();
     const navigate = useNavigate();
     const [data, setData] = useState({});
@@ -179,18 +179,18 @@ const DomandaEditPreInstructor = () => {
     const getVersion = (resp) => {
         if (resp.status === 'SUCCESS') {
             if (resp.data.evaluationVersion === 'V1') {
-                storeSet.main.setAsyncRequest();
+                storeSet('setAsyncRequest');
                 ApplicationEvaluationService.getEvaluationByApplId(getCallback, errGetCallback, [
                     ['applicationId', resp.data.applicationId]
                 ]);
             } else if (resp.data.evaluationVersion === 'V2') {
-                storeSet.main.setAsyncRequest();
+                storeSet('setAsyncRequest');
                 ApplicationEvaluationService.getEvaluationV2ByApplId(getCallback, errGetCallback, [
                     ['applicationId', resp.data.applicationId]
                 ]);
             }
         }
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const errGetVersion = (resp) => {
@@ -202,7 +202,7 @@ const DomandaEditPreInstructor = () => {
             });
         }
         set404FromErrorResponse(resp);
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const getCallback = (resp) => {
@@ -233,7 +233,7 @@ const DomandaEditPreInstructor = () => {
                 setFormInitialData(formDataInitial);
             }
         }
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const errGetCallback = (resp) => {
@@ -245,7 +245,7 @@ const DomandaEditPreInstructor = () => {
             });
         }
         set404FromErrorResponse(resp);
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const getFormattedData = (data) => {
@@ -377,7 +377,7 @@ const DomandaEditPreInstructor = () => {
                 afterUpdateCallback();
             }
         }
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const errUpdateCallback = (data) => {
@@ -389,7 +389,7 @@ const DomandaEditPreInstructor = () => {
             });
         }
         set404FromErrorResponse(data);
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const doApprove = useCallback(() => {
@@ -610,7 +610,7 @@ const DomandaEditPreInstructor = () => {
 
     const footerCompleteDialog = useCallback(() => {
         return <div>
-            <Button type="button" label={__('Anulla', 'gepafin')} onClick={hideCompleteDialog} outlined/>
+            <Button type="button" label={__('Annulla', 'gepafin')} onClick={hideCompleteDialog} outlined/>
             <Button
                 type="button"
                 disabled={loading || ('approve' === operationType && (!amountAccepted || isEmpty(amountAccepted) || amountAccepted === 0))}
@@ -634,7 +634,7 @@ const DomandaEditPreInstructor = () => {
     }
 
     const doGetNDGRequest = () => {
-        storeSet.main.setAsyncRequest();
+        storeSet('setAsyncRequest');
         AppointmentService.getNdg(id, getNdgCallback, errGetNdgCallback);
     }
 
@@ -654,7 +654,7 @@ const DomandaEditPreInstructor = () => {
                 }));
             }
         }
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const errGetNdgCallback = (data) => {
@@ -666,7 +666,7 @@ const DomandaEditPreInstructor = () => {
             });
         }
         set404FromErrorResponse(data);
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const doCreateAppointment = () => {
@@ -695,7 +695,7 @@ const DomandaEditPreInstructor = () => {
 
     const footerAppointmentDialog = () => {
         return <div>
-            <Button type="button" label={__('Anulla', 'gepafin')} onClick={hideAppointmentDialog} outlined/>
+            <Button type="button" label={__('Annulla', 'gepafin')} onClick={hideAppointmentDialog} outlined/>
             <Button
                 type="button"
                 disabled={loading}
@@ -708,7 +708,7 @@ const DomandaEditPreInstructor = () => {
             !isEmpty(appointmentData.title) && !isEmpty(appointmentData.text) && !isEmpty(appointmentData.amount)
             && !isEmpty(appointmentData.duration) && appointmentData.duration !== 0 && appointmentData.amount !== 0
         ) {
-            storeSet.main.setAsyncRequest();
+            storeSet('setAsyncRequest');
             const submitData = {
                 'importoBreveTermine': appointmentData.amount,
                 'durataMesiFinanziamento': appointmentData.duration,
@@ -739,7 +739,7 @@ const DomandaEditPreInstructor = () => {
             }
         }
         setIsVisibleAppointmentDialog(false);
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const errGetAppointemntCallback = (data) => {
@@ -752,7 +752,7 @@ const DomandaEditPreInstructor = () => {
         }
         setIsVisibleAppointmentDialog(false);
         set404FromErrorResponse(data);
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const doMakeAdmisible = () => {
@@ -770,7 +770,7 @@ const DomandaEditPreInstructor = () => {
     }, [isAdmissible]);
 
     const evaluationBlockedForUser = (data = {}) => {
-        const userData = storeGet.main.userData()
+        const userData = storeGet('userData')
         return isAsyncRequest || userData.id !== data.assignedUserId;
     }
 
@@ -934,7 +934,7 @@ const DomandaEditPreInstructor = () => {
         const parsed = parseInt(id)
         const entityId = !isNaN(parsed) ? parsed : 0;
 
-        storeSet.main.setAsyncRequest();
+        storeSet('setAsyncRequest');
         ApplicationEvaluationService.getEvaluationVersionByApplId(entityId, getVersion, errGetVersion);
         AmendmentsService.getSoccorsoByApplId(entityId, getAmendmentsCallback, errGetAmendmentsCallback, [
             ['statuses', ['AWAITING', 'RESPONSE_RECEIVED', 'CLOSE']]

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

@@ -111,8 +111,7 @@ const AllDomandeTable = ({ openDialogFn, updaterString = '' }) => {
     const statusFilterTemplate = (options) => {
         return <Dropdown value={options.value} options={statuses}
                          onChange={(e) => options.filterCallback(e.value, options.index)}
-                         itemTemplate={statusItemTemplate} placeholder={translationStrings.selectOneLabel} className="p-column-filter"
-                         showClear/>;
+                         itemTemplate={statusItemTemplate} placeholder={translationStrings.selectOneLabel} className="p-column-filter"/>;
     };
 
     const dateFilterTemplate = (options) => {

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

@@ -1,6 +1,6 @@
 import React, { useEffect, useState, useCallback } from 'react';
 import { __ } from '@wordpress/i18n';
-import { is, isEmpty, pathOr } from 'ramda';
+import { is } from 'ramda';
 import { Link, useLocation } from 'react-router-dom';
 
 import translationStrings from '../../../../translationStringsForComponents';
@@ -12,6 +12,7 @@ import ApplicationService from '../../../../service/application-service';
 import getBandoLabel from '../../../../helpers/getBandoLabel';
 import getBandoSeverity from '../../../../helpers/getBandoSeverity';
 import getFormattedDateString from '../../../../helpers/getFormattedDateString';
+import getQueryParamsForPaginatedEndpoint from '../../../../helpers/getQueryParamsForPaginatedEndpoint';
 
 // components
 import { DataTable } from 'primereact/datatable';
@@ -34,43 +35,17 @@ const AllDomandeTableAsync = ({ openDialogFn, updaterString = '' }) => {
         sortField: null,
         sortOrder: null,
         filters: {
-            id: { value: null, matchMode: 'contains' },
+            id: { value: null, matchMode: 'equals' },
             callTitle: { value: null, matchMode: 'contains' },
             companyName: { value: null, matchMode: 'contains' },
-            submissionDate: { value: null, matchMode: 'date_is' },
+            submissionDate: { value: null, matchMode: 'dateIs' },
+            assignedUserName: { value: null, matchMode: 'equals' },
             status: { value: null, matchMode: 'equals' }
         }
     });
-    const statuses = ['SUBMIT', 'EVALUATION', 'SOCCORSO'];
+    const statuses = ['SUBMIT', 'EVALUATION', 'SOCCORSO', 'APPOINTMENT', 'NDG', 'ADMISSIBLE', 'TECHNICAL_EVALUATION'];
 
-    const getPaginationQuery = useCallback(() => {
-        let sortBy = {
-            columnName: "ID",
-            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 getPaginationQuery = useCallback(() => getQueryParamsForPaginatedEndpoint(lazyState, statuses, 'id'), [lazyState]);
 
     const onPage = (event) => {
         setLazyState(event);
@@ -150,8 +125,7 @@ const AllDomandeTableAsync = ({ openDialogFn, updaterString = '' }) => {
                              }
                              setLazyState({ ...lazyState, filters, first: 0 });
                          }}
-                         itemTemplate={statusItemTemplate} placeholder={translationStrings.selectOneLabel} className="p-column-filter"
-                         showClear/>;
+                         itemTemplate={statusItemTemplate} placeholder={translationStrings.selectOneLabel} className="p-column-filter"/>;
     };
 
     const dateFilterTemplate = (options) => {
@@ -182,7 +156,7 @@ const AllDomandeTableAsync = ({ openDialogFn, updaterString = '' }) => {
                 <Column field="id" header={__('ID domanda', 'gepafin')}
                         sortable
                         filterField="id" filter
-                        filterMatchModeOptions={translationStrings.textFilterOptions}
+                        filterMatchModeOptions={translationStrings.numberFilterOptions}
                         filterPlaceholder={__('Cerca', 'gepafin')}
                         style={{ minWidth: '6rem' }}/>
                 <Column field="protocolNumber" header={__('Protocollo', 'gepafin')}
@@ -204,6 +178,8 @@ const AllDomandeTableAsync = ({ openDialogFn, updaterString = '' }) => {
                         style={{ minWidth: '8rem' }}
                         body={dateAppliedBodyTemplate}/>
                 <Column field="assignedUserName" header={__('Assegnato', 'gepafin')}
+                        filterField="assignedUserName" filter
+                        filterMatchModeOptions={translationStrings.textFilterOptions}
                         style={{ minWidth: '8rem' }}/>
                 <Column field="status" header={__('Stato', 'gepafin')}
                         filterElement={statusFilterTemplate} filter

src/pages/Domande/index.js

@@ -1,6 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { __ } from '@wordpress/i18n';
 import { isEmpty, pathOr } from 'ramda';
+import NumberFlow from '@number-flow/react';
 
 // api
 import UserService from '../../service/user-service';
@@ -19,11 +20,8 @@ import { Dialog } from 'primereact/dialog';
 import { Button } from 'primereact/button';
 import { classNames } from 'primereact/utils';
 import { Dropdown } from 'primereact/dropdown';
-import NumberFlow from '@number-flow/react';
-/*import DraftApplicationsTableAsync from '../Dashboard/components/DraftApplicationsTableAsync';
-import AllDomandeTableAsync from './components/AllDomandeTableAsync';*/
-import DraftApplicationsTable from '../Dashboard/components/DraftApplicationsTable';
-import AllDomandeTable from './components/AllDomandeTable';
+import DraftApplicationsTableAsync from '../Dashboard/components/DraftApplicationsTableAsync';
+import AllDomandeTableAsync from './components/AllDomandeTableAsync';
 
 const Domande = () => {
     const [loading, setLoading] = useState(false);
@@ -79,7 +77,7 @@ const Domande = () => {
 
     const footerEditDialog = () => {
         return <div>
-            <Button type="button" label={__('Anulla', 'gepafin')} onClick={hideEditDialog} outlined/>
+            <Button type="button" label={__('Annulla', 'gepafin')} onClick={hideEditDialog} outlined/>
             <Button
                 type="button"
                 disabled={loading}
@@ -94,7 +92,7 @@ const Domande = () => {
 
     const saveEditDialog = () => {
         if (chosenUser !== 0 && chosenApplication !== 0) {
-            storeSet.main.setAsyncRequest();
+            storeSet('setAsyncRequest');
             AssignedApplicationService.assignApplication(chosenApplication, assignApplCallback, errAssignApplCallback, [
                 ['userId', chosenUser]
             ]);
@@ -113,7 +111,7 @@ const Domande = () => {
             }
             setUpdaterString(uniqid());
         }
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const errAssignApplCallback = (data) => {
@@ -125,7 +123,7 @@ const Domande = () => {
             });
         }
         set404FromErrorResponse(data);
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const getStatValue = (key, fallback = '') => {
@@ -168,8 +166,7 @@ const Domande = () => {
 
             <div className="appPageSection">
                 <h2>{__('Domande pubblicate', 'gepafin')}</h2>
-                {/*<AllDomandeTableAsync openDialogFn={openAssignDialog} updaterString={updaterString}/>*/}
-                <AllDomandeTable openDialogFn={openAssignDialog} updaterString={updaterString}/>
+                <AllDomandeTableAsync openDialogFn={openAssignDialog} updaterString={updaterString}/>
             </div>
 
             <div className="appPage__spacer"></div>
@@ -227,8 +224,7 @@ const Domande = () => {
 
             <div className="appPageSection">
                 <h2>{__('Domande in bozza', 'gepafin')}</h2>
-                {/*<DraftApplicationsTableAsync/>*/}
-                <DraftApplicationsTable/>
+                <DraftApplicationsTableAsync/>
             </div>
 
             <Dialog

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

@@ -110,8 +110,7 @@ const AllDomandeArchiveTable = ({ updaterString = '' }) => {
     const statusFilterTemplate = (options) => {
         return <Dropdown value={options.value} options={statuses}
                          onChange={(e) => options.filterCallback(e.value, options.index)}
-                         itemTemplate={statusItemTemplate} placeholder={translationStrings.selectOneLabel} className="p-column-filter"
-                         showClear/>;
+                         itemTemplate={statusItemTemplate} placeholder={translationStrings.selectOneLabel} className="p-column-filter"/>;
     };
 
     const dateFilterTemplate = (options) => {

src/pages/DomandeArchive/index.js

@@ -2,8 +2,7 @@ import React from 'react';
 import { __ } from '@wordpress/i18n';
 
 // components
-//import AllDomandeArchiveTable from './components/AllDomandeArchiveTable';
-import PreInstructorDomandeTable from '../DashboardPreInstructor/components/PreInstructorDomandeTable';
+import DomandeTablePreInstructorAsync from '../DashboardPreInstructor/components/DomandeTablePreInstructorAsync';
 
 const DomandeArchive = () => {
     return (
@@ -16,7 +15,7 @@ const DomandeArchive = () => {
 
             <div className="appPageSection">
                 <h2>{__('Domande completate', 'gepafin')}</h2>
-                <PreInstructorDomandeTable statuses={['CLOSE']} userId={0}/>
+                <DomandeTablePreInstructorAsync statuses={['CLOSE']} userId={0}/>
             </div>
         </div>
     )

src/pages/DomandeArchivePreInstructor/index.js

@@ -2,13 +2,13 @@ import React from 'react';
 import { __ } from '@wordpress/i18n';
 
 // store
-import { useStore } from '../../store';
+import { useStoreValue } from '../../store';
 
 // components
-import PreInstructorDomandeTable from '../DashboardPreInstructor/components/PreInstructorDomandeTable';
+import DomandeTablePreInstructorAsync from '../DashboardPreInstructor/components/DomandeTablePreInstructorAsync';
 
 const DomandeArchivePreInstructor = () => {
-    const userData = useStore().main.userData();
+    const userData = useStoreValue('userData');
 
     return (
         <div className="appPage">
@@ -20,7 +20,7 @@ const DomandeArchivePreInstructor = () => {
 
             <div className="appPageSection">
                 <h2>{__('Domande completate', 'gepafin')}</h2>
-                <PreInstructorDomandeTable statuses={['CLOSE']} userId={userData.id}/>
+                <DomandeTablePreInstructorAsync statuses={['CLOSE']} userId={userData.id}/>
             </div>
         </div>
     )

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

@@ -0,0 +1,199 @@
+import React, { useEffect, useState, useCallback } from 'react';
+import { __ } from '@wordpress/i18n';
+import { is } from 'ramda';
+import { Link } from 'react-router-dom';
+
+import translationStrings from '../../../../translationStringsForComponents';
+
+// store
+import { useStoreValue } from '../../../../store';
+
+// api
+import ApplicationService from '../../../../service/application-service';
+
+//
+import getBandoLabel from '../../../../helpers/getBandoLabel';
+import getBandoSeverity from '../../../../helpers/getBandoSeverity';
+import getFormattedDateString from '../../../../helpers/getFormattedDateString';
+import getQueryParamsForPaginatedEndpoint from '../../../../helpers/getQueryParamsForPaginatedEndpoint';
+
+// 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 AllDomandeBeneficiarioTableAsync = ({ statuses }) => {
+    const chosenCompanyId = useStoreValue('chosenCompanyId');
+    const companies = useStoreValue('companies');
+    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: {
+            id: { value: null, matchMode: 'equals' },
+            callTitle: { value: null, matchMode: 'contains' },
+            companyName: { value: null, matchMode: 'contains' },
+            submissionDate: { value: null, matchMode: 'dateIs' },
+            assignedUserName: { value: null, matchMode: 'equals' },
+            status: { value: null, matchMode: 'equals' }
+        }
+    });
+
+    const getPaginationQuery = useCallback(() => getQueryParamsForPaginatedEndpoint(lazyState, statuses, 'id'), [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.callEndDate = is(String, d.callEndDate) ? new Date(d.callEndDate) : (d.callEndDate ? d.callEndDate : '');
+            d.modifiedDate = is(String, d.modifiedDate) ? new Date(d.modifiedDate) : (d.modifiedDate ? d.modifiedDate : '');
+            d.submissionDate = is(String, d.submissionDate) ? new Date(d.submissionDate) : (d.submissionDate ? d.submissionDate : '');
+            return d;
+        });
+    };
+
+    const actionsBodyTemplate = (rowData) => {
+        return <div className="appPageSection__tableActions">
+            {rowData.status === 'SOCCORSO'
+                ? <Link to={`/domande/${rowData.id}`}>
+                    <Button severity="info" label={__('Dettagli', 'gepafin')} icon="pi pi-eye" size="small"
+                            iconPos="right"/>
+                </Link> : null}
+            <Link to={`/domande/${rowData.id}/preview`}>
+                <Button severity="info" label={__('Anteprima', 'gepafin')} icon="pi pi-eye" size="small"
+                        iconPos="right"/>
+            </Link>
+        </div>
+    }
+
+    const progressBodyTemplate = () => {
+        return '-';
+    };
+
+    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"/>;
+    };
+
+    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 dateAppliedBodyTemplate = (rowData) => {
+        return getFormattedDateString(rowData.submissionDate);
+    };
+
+    useEffect(() => {
+        setLocalAsyncRequest(true);
+        const paginationQuery = getPaginationQuery();
+
+        ApplicationService.getApplicationsPaginated(paginationQuery, getCallback, errGetCallbacks, [
+            ['companyId', chosenCompanyId]
+        ]);
+    }, [lazyState, chosenCompanyId, companies]);
+
+    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="id" header={__('ID domanda', 'gepafin')}
+                        sortable
+                        filterField="id" filter
+                        filterMatchModeOptions={translationStrings.numberFilterOptions}
+                        filterPlaceholder={__('Cerca', 'gepafin')}
+                        style={{ minWidth: '6rem' }}/>
+                <Column field="protocolNumber" header={__('Protocollo', 'gepafin')}
+                        style={{ minWidth: '6rem' }}/>
+                <Column field="callTitle" header={__('Bando', 'gepafin')}
+                        filterField="callTitle" 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 di invio', 'gepafin')}
+                        filterElement={dateFilterTemplate} filter
+                        filterField="submissionDate" dataType="date"
+                        filterMatchModeOptions={translationStrings.dateFilterOptions}
+                        style={{ minWidth: '8rem' }}
+                        body={dateAppliedBodyTemplate}/>
+                <Column field="status" header={__('Stato', 'gepafin')}
+                        filterElement={statusFilterTemplate} filter
+                        filterMatchModeOptions={translationStrings.statusFilterOptions}
+                        style={{ minWidth: '8rem' }}
+                        body={statusBodyTemplate}/>
+                <Column header={__('Esito', 'gepafin')}
+                        style={{ minWidth: '7rem' }} field="progress" body={progressBodyTemplate}/>
+                <Column header={__('Azioni', 'gepafin')}
+                        body={actionsBodyTemplate}/>
+            </DataTable>
+        </div>
+    )
+}
+
+export default AllDomandeBeneficiarioTableAsync;

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

@@ -4,7 +4,7 @@ import { head, is, uniq } from 'ramda';
 import { Link } from 'react-router-dom';
 
 // store
-import { useStore } from '../../../../store';
+import { useStoreValue } from '../../../../store';
 
 // api
 import ApplicationService from '../../../../service/application-service';
@@ -26,8 +26,8 @@ import translationStrings from '../../../../translationStringsForComponents';
 
 
 const BeneficiarioDomandeTable = () => {
-    const chosenCompanyId = useStore().main.chosenCompanyId();
-    const companies = useStore().main.companies();
+    const chosenCompanyId = useStoreValue('chosenCompanyId');
+    const companies = useStoreValue('companies');
     const [items, setItems] = useState(null);
     const [filters, setFilters] = useState(null);
     const [localAsyncRequest, setLocalAsyncRequest] = useState(false);
@@ -134,8 +134,7 @@ const BeneficiarioDomandeTable = () => {
         return <Dropdown value={options.value} options={statuses}
                          onChange={(e) => options.filterCallback(e.value, options.index)}
                          itemTemplate={statusItemTemplate} placeholder={translationStrings.selectOneLabel}
-                         className="p-column-filter"
-                         showClear/>;
+                         className="p-column-filter"/>;
     };
 
     const progressBodyTemplate = (options) => {

src/pages/DomandeBeneficiario/index.js

@@ -3,14 +3,14 @@ import { __ } from '@wordpress/i18n';
 import { head } from 'ramda';
 
 // store
-import { useStore } from '../../store';
+import { useStoreValue } from '../../store';
 
 // components
-import BeneficiarioDomandeTable from './components/BeneficiarioDomandeTable';
+import AllDomandeBeneficiarioTableAsync from './components/AllDomandeBeneficiarioTableAsync';
 
 const DomandeBeneficiario = () => {
-    const chosenCompanyId = useStore().main.chosenCompanyId();
-    const companies = useStore().main.companies();
+    const chosenCompanyId = useStoreValue('chosenCompanyId');
+    const companies = useStoreValue('companies');
     const company = head(companies.filter(o => o.id === chosenCompanyId));
 
     return(
@@ -23,7 +23,8 @@ const DomandeBeneficiario = () => {
             <div className="appPage__spacer"></div>
 
             <div className="appPageSection">
-                <BeneficiarioDomandeTable/>
+                <AllDomandeBeneficiarioTableAsync statuses={['SOCCORSO', 'APPROVED', 'REJECTED', 'EVALUATION', 'SUBMIT',
+                    'APPOINTMENT', 'NDG', 'ADMISSIBLE', 'TECHNICAL_EVALUATION']}/>
             </div>
         </div>
     )

src/pages/DomandeInstructorManager/index.js

@@ -14,13 +14,13 @@ import AssignedApplicationService from '../../service/assigned-application-servi
 import UserService from '../../service/user-service';
 
 // components
-import PreInstructorDomandeTable from '../DashboardPreInstructor/components/PreInstructorDomandeTable';
-import AllDomandeTable from '../Domande/components/AllDomandeTable';
 import { classNames } from 'primereact/utils';
 import { Dropdown } from 'primereact/dropdown';
 import { Dialog } from 'primereact/dialog';
 import { Button } from 'primereact/button';
 import DashboardService from '../../service/dashboard-service';
+import AllDomandeTableAsync from '../Domande/components/AllDomandeTableAsync';
+import DomandeTablePreInstructorAsync from '../DashboardPreInstructor/components/DomandeTablePreInstructorAsync';
 
 const DomandeInstructorManager = () => {
     const [loading, setLoading] = useState(false);
@@ -31,6 +31,7 @@ const DomandeInstructorManager = () => {
     const [chosenApplication, setChosenApplication] = useState(0);
     const [updaterString, setUpdaterString] = useState('');
     const toast = useRef(null);
+    // eslint-disable-next-line
     const [mainStats, setMainStats] = useState({});
 
     const getRolesCallback = (data) => {
@@ -76,7 +77,7 @@ const DomandeInstructorManager = () => {
 
     const footerEditDialog = () => {
         return <div>
-            <Button type="button" label={__('Anulla', 'gepafin')} onClick={hideEditDialog} outlined/>
+            <Button type="button" label={__('Annulla', 'gepafin')} onClick={hideEditDialog} outlined/>
             <Button
                 type="button"
                 disabled={loading}
@@ -91,7 +92,7 @@ const DomandeInstructorManager = () => {
 
     const saveEditDialog = () => {
         if (chosenUser !== 0 && chosenApplication !== 0) {
-            storeSet.main.setAsyncRequest();
+            storeSet('setAsyncRequest');
             AssignedApplicationService.assignApplication(chosenApplication, assignApplCallback, errAssignApplCallback, [
                 ['userId', chosenUser]
             ]);
@@ -110,7 +111,7 @@ const DomandeInstructorManager = () => {
             }
             setUpdaterString(uniqid());
         }
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const errAssignApplCallback = (data) => {
@@ -122,7 +123,7 @@ const DomandeInstructorManager = () => {
             });
         }
         set404FromErrorResponse(data);
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const getStats = (data) => {
@@ -161,67 +162,16 @@ const DomandeInstructorManager = () => {
 
             <div className="appPageSection">
                 <h2>{__('Da assegnare', 'gepafin')}</h2>
-                <AllDomandeTable openDialogFn={openAssignDialog} updaterString={updaterString}/>
+                <AllDomandeTableAsync openDialogFn={openAssignDialog} updaterString={updaterString}/>
             </div>
 
             <div className="appPage__spacer"></div>
 
             <div className="appPageSection">
                 <h2>{__('In lavorazione', 'gepafin')}</h2>
-                <PreInstructorDomandeTable statuses={['OPEN', 'SOCCORSO']} userId={0}/>
+                <DomandeTablePreInstructorAsync statuses={['OPEN', 'SOCCORSO']} userId={0}/>
             </div>
 
-            {/*<div className="appPage__spacer"></div>
-
-            <div className="appPageSection statsBigBadges">
-                <h2>{__('Riepilogo', 'gepafin')}</h2>
-                <div className="statsBigBadges__grid applStats">
-                    <div className="statsBigBadges__gridItem">
-                        <span>{__('Totale domande', 'gepafin')}</span>
-                        <span><NumberFlow
-                            value={getStatValue('numberOfAssignedApplication', 0)}
-                            format={{ notation: 'compact' }}
-                            locales="it-IT"/></span>
-                    </div>
-                    <div className="statsBigBadges__gridItem">
-                        <span>{__('In soccorso', 'gepafin')}</span>
-                        <span><NumberFlow
-                            value={getStatValue('numberOfApplicationInAmendmentState', 0)}
-                            format={{ notation: 'compact' }}
-                            locales="it-IT"/></span>
-                    </div>
-                    <div className="statsBigBadges__gridItem">
-                        <span>{__('In valutazione', 'gepafin')}</span>
-                        <span><NumberFlow
-                            value={getStatValue('numberOfApplicationInOpenState', 0)}
-                            format={{ notation: 'compact' }}
-                            locales="it-IT"/></span>
-                    </div>
-                    <div className="statsBigBadges__gridItem">
-                        <span>{__('Completate', 'gepafin')}</span>
-                        <span><NumberFlow
-                            value={getStatValue('numberOfApplicationInCloseState', 0)}
-                            format={{ notation: 'compact' }}
-                            locales="it-IT"/></span>
-                    </div>
-                    <div className="statsBigBadges__gridItem">
-                        <span>{__('Tempo medio di valutazione', 'gepafin')}</span>
-                        <span><NumberFlow
-                            value={getStatValue('averageEvaluationDays', 0)}
-                            format={{ notation: 'compact' }}
-                            suffix={` ${__('giorni', 'gepafin')}`}
-                            locales="it-IT"/></span>
-                    </div>
-                    <div className="statsBigBadges__gridItem">
-                        <span>{__('Domande in scadenza (48h)', 'gepafin')}</span>
-                        <span><NumberFlow
-                            value={getStatValue('numberOfApplicationExpiringIn48Hours', 0)}
-                            format={{ notation: 'compact' }}
-                            locales="en-US"/></span>
-                    </div>
-                </div>
-            </div>*/}
-
             <Dialog
                 visible={isVisibleEditDialog}
                 modal

src/pages/DomandeMieInstructorManager/index.js

@@ -2,15 +2,13 @@ import React from 'react';
 import { __ } from '@wordpress/i18n';
 
 // store
-import { useStore } from '../../store';
+import { useStoreValue } from '../../store';
 
 // components
-//import MieDomandeTableInstructorManagerAsync from '../DashboardInstructorManager/components/MieDomandeTableInstructorManagerAsync';
-import InstructorManagerMieDomandeTable
-    from '../DashboardInstructorManager/components/InstructorManagerMieDomandeTable';
+import MieDomandeTableInstructorManagerAsync from '../DashboardInstructorManager/components/MieDomandeTableInstructorManagerAsync';
 
 const DomandeMieInstructorManager = () => {
-    const userData = useStore().main.userData();
+    const userData = useStoreValue('userData');
 
     return(
         <div className="appPage">
@@ -22,16 +20,14 @@ const DomandeMieInstructorManager = () => {
 
             <div className="appPageSection">
                 <h2>{__('Nuove domande da valutare', 'gepafin')}</h2>
-                {/*<MieDomandeTableInstructorManagerAsync statuses={['AWAITING']} userId={userData.id}/>*/}
-                <InstructorManagerMieDomandeTable statuses={['AWAITING']} userId={userData.id}/>
+                <MieDomandeTableInstructorManagerAsync statuses={['AWAITING']} userId={userData.id}/>
             </div>
 
             <div className="appPage__spacer"></div>
 
             <div className="appPageSection">
                 <h2>{__('Coda di lavoro', 'gepafin')}</h2>
-                {/*<MieDomandeTableInstructorManagerAsync statuses={['OPEN', 'SOCCORSO']} userId={userData.id}/>*/}
-                <InstructorManagerMieDomandeTable statuses={['OPEN', 'SOCCORSO']} userId={userData.id}/>
+                <MieDomandeTableInstructorManagerAsync statuses={['OPEN', 'SOCCORSO']} userId={userData.id}/>
             </div>
         </div>
     )

src/pages/DomandePreInstructor/index.js

@@ -2,13 +2,13 @@ import React from 'react';
 import { __ } from '@wordpress/i18n';
 
 // store
-import { useStore } from '../../store';
+import { useStoreValue } from '../../store';
 
 // components
-import PreInstructorDomandeTable from '../DashboardPreInstructor/components/PreInstructorDomandeTable';
+import DomandeTablePreInstructorAsync from '../DashboardPreInstructor/components/DomandeTablePreInstructorAsync';
 
 const DomandePreInstructor = () => {
-    const userData = useStore().main.userData();
+    const userData = useStoreValue('userData');
 
     return(
         <div className="appPage">
@@ -20,7 +20,7 @@ const DomandePreInstructor = () => {
 
             <div className="appPageSection">
                 <h2>{__('Nuove domande da valutare', 'gepafin')}</h2>
-                <PreInstructorDomandeTable statuses={['AWAITING']} userId={userData.id}/>
+                <DomandeTablePreInstructorAsync statuses={['AWAITING']} userId={userData.id}/>
             </div>
         </div>
     )

src/pages/Imieibandi/index.js

@@ -4,17 +4,17 @@ import { useNavigate } from 'react-router-dom';
 import { head } from 'ramda';
 
 // store
-import { useStore } from '../../store';
+import { useStoreValue } from '../../store';
 
 // components
-import MyLatestSubmissionsTable from '../DashboardBeneficiario/components/MyLatestSubmissionsTable';
 import { Button } from 'primereact/button';
 import ErrorBoundary from '../../components/ErrorBoundary';
+import MyLatestSubmissionsTableAsync from '../DashboardBeneficiario/components/MyLatestSubmissionsTableAsync';
 
-const Applications = () => {
+const Imieibandi = () => {
     const navigate = useNavigate();
-    const chosenCompanyId = useStore().main.chosenCompanyId();
-    const companies = useStore().main.companies();
+    const chosenCompanyId = useStoreValue('chosenCompanyId');
+    const companies = useStoreValue('companies');
     const company = head(companies.filter(o => o.id === chosenCompanyId));
 
     const gotToBandiDisponibili = () => {
@@ -31,7 +31,7 @@ const Applications = () => {
             <div className="appPage__spacer"></div>
 
             <div className="appPageSection">
-                <ErrorBoundary><MyLatestSubmissionsTable/></ErrorBoundary>
+                <ErrorBoundary><MyLatestSubmissionsTableAsync/></ErrorBoundary>
             </div>
 
             <div className="appPage__spacer"></div>
@@ -57,4 +57,4 @@ const Applications = () => {
     )
 }
 
-export default Applications;
+export default Imieibandi;

src/pages/Login/index.js

@@ -6,7 +6,7 @@ import hotkeys from 'hotkeys-js';
 import { useSearchParams } from 'react-router-dom';
 
 // store
-import { storeSet, useStore } from '../../store';
+import { storeSet, useStoreValue } from '../../store';
 
 // api
 import AuthenticationService from '../../service/authentication-service';
@@ -22,7 +22,7 @@ const API_BASE_URL = process.env.REACT_APP_API_ADDRESS;
 const APP_HUB_ID = process.env.REACT_APP_HUB_ID;
 
 const Login = () => {
-    const token = useStore().main.token();
+    const token = useStoreValue('token');
     const errorMsgs = useRef(null);
     const [loading, setLoading] = useState(false);
     const [visibleCacheFaq, setVisibleCacheFaq] = useState(false);
@@ -43,7 +43,7 @@ const Login = () => {
     const validateCallback = (data) => {
         //console.log('login validateCallback', data)
         if (data.status === 'SUCCESS') {
-            storeSet.main.setAuthData({
+            storeSet('setAuthData', {
                 token: data.data.token,
                 userData: data.data.user
             });

src/pages/LoginAdmin/index.js

@@ -9,7 +9,7 @@ import { useNavigate } from 'react-router-dom';
 import AuthenticationService from '../../service/authentication-service';
 
 // store
-import { storeSet, useStore } from '../../store';
+import { storeSet, useStoreValue } from '../../store';
 
 // components
 import FormField from '../../components/FormField';
@@ -22,7 +22,7 @@ const APP_HUB_ID = process.env.REACT_APP_HUB_ID;
 
 const LoginAdmin = () => {
     const navigate = useNavigate();
-    const token = useStore().main.token();
+    const token = useStoreValue('token');
     const [loading, setLoading] = useState(false);
     const errorMsgs = useRef(null);
     const {
@@ -49,7 +49,7 @@ const LoginAdmin = () => {
 
     const loginCallback = (data) => {
         if (data.status === 'SUCCESS') {
-            storeSet.main.setAuthData({
+            storeSet('setAuthData', {
                 token: data.data.token,
                 userData: data.data.user
             });

src/pages/LoginConfidi/index.js

@@ -9,7 +9,7 @@ import { useNavigate } from 'react-router-dom';
 import AuthenticationService from '../../service/authentication-service';
 
 // store
-import { storeSet, useStore } from '../../store';
+import { storeSet, useStoreValue } from '../../store';
 
 // components
 import FormField from '../../components/FormField';
@@ -22,7 +22,7 @@ const APP_HUB_ID = process.env.REACT_APP_HUB_ID;
 
 const LoginConfidi = () => {
     const navigate = useNavigate();
-    const token = useStore().main.token();
+    const token = useStoreValue('token');
     const [loading, setLoading] = useState(false);
     const errorMsgs = useRef(null);
     const {
@@ -49,7 +49,7 @@ const LoginConfidi = () => {
 
     const loginCallback = (data) => {
         if (data.status === 'SUCCESS') {
-            storeSet.main.setAuthData({
+            storeSet('setAuthData', {
                 token: data.data.token,
                 userData: data.data.user
             });

src/pages/Profile/index.js

@@ -3,7 +3,7 @@ import { __ } from '@wordpress/i18n';
 import { useForm } from 'react-hook-form';
 
 // store
-import { storeSet, useStore } from '../../store';
+import { storeSet, useStoreValue } from '../../store';
 
 // components
 import set404FromErrorResponse from '../../helpers/set404FromErrorResponse';
@@ -18,8 +18,8 @@ import UserService from '../../service/user-service';
 import getDateFromISOstring from '../../helpers/getDateFromISOstring';
 
 const Profile = () => {
-    const isAsyncRequest = useStore().main.isAsyncRequest();
-    const userData = useStore().main.userData();
+    const isAsyncRequest = useStoreValue('isAsyncRequest');
+    const userData = useStoreValue('userData');
     const toast = useRef(null);
 
     const {
@@ -34,14 +34,14 @@ const Profile = () => {
     });
 
     const onSubmit = (formData) => {
-        storeSet.main.setAsyncRequest();
+        storeSet('setAsyncRequest');
 
         UserService.updateUserSelf(userData.id, formData, updateCallback, updateError);
     };
 
     const updateCallback = (data) => {
         if (data.status === 'SUCCESS') {
-            storeSet.main.userData(data.data);
+            storeSet('userData', data.data);
             if (toast.current) {
                 toast.current.show({
                     severity: 'success',
@@ -50,12 +50,12 @@ const Profile = () => {
                 });
             }
         }
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const updateError = (data) => {
         set404FromErrorResponse(data);
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     return (

src/pages/ProfileBeneficiario/index.js

@@ -3,7 +3,7 @@ import { __ } from '@wordpress/i18n';
 import { useForm } from 'react-hook-form';
 
 // store
-import { storeSet, useStore } from '../../store';
+import { storeSet, useStoreValue } from '../../store';
 
 // components
 import set404FromErrorResponse from '../../helpers/set404FromErrorResponse';
@@ -18,8 +18,8 @@ import UserService from '../../service/user-service';
 import getDateFromISOstring from '../../helpers/getDateFromISOstring';
 
 const ProfileBeneficiario = () => {
-    const isAsyncRequest = useStore().main.isAsyncRequest();
-    const userData = useStore().main.userData();
+    const isAsyncRequest = useStoreValue('isAsyncRequest');
+    const userData = useStoreValue('userData');
     const toast = useRef(null);
 
     const {
@@ -34,14 +34,14 @@ const ProfileBeneficiario = () => {
     });
 
     const onSubmit = (formData) => {
-        storeSet.main.setAsyncRequest();
+        storeSet('setAsyncRequest');
 
         UserService.updateUserSelf(userData.id, formData, updateCallback, updateError);
     };
 
     const updateCallback = (data) => {
         if (data.status === 'SUCCESS') {
-            storeSet.main.userData(data.data);
+            storeSet('userData', data.data);
             if (toast.current) {
                 toast.current.show({
                     severity: 'success',
@@ -50,12 +50,12 @@ const ProfileBeneficiario = () => {
                 });
             }
         }
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const updateError = (data) => {
         set404FromErrorResponse(data);
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     return (

src/pages/ProfileCompany/index.js

@@ -8,7 +8,7 @@ import { useForm } from 'react-hook-form';
 //import { useNavigate } from 'react-router-dom';
 
 // store
-import { storeSet, useStore, storeGet } from '../../store';
+import { storeSet, useStoreValue, storeGet } from '../../store';
 
 // api
 import CompanyService from '../../service/company-service';
@@ -34,9 +34,9 @@ import { useNavigate } from 'react-router-dom';
 const APP_HUB_ID = process.env.REACT_APP_HUB_ID;
 
 const ProfileCompany = () => {
-    const isAsyncRequest = useStore().main.isAsyncRequest();
-    const chosenCompanyId = useStore().main.chosenCompanyId();
-    const companies = useStore().main.companies();
+    const isAsyncRequest = useStoreValue('isAsyncRequest');
+    const chosenCompanyId = useStoreValue('chosenCompanyId');
+    const companies = useStoreValue('companies');
     const infoMsgs = useRef(null);
     const [formInitialData, setFormInitialData] = useState({});
     const [delegaData, setDelegaData] = useState({});
@@ -77,7 +77,7 @@ const ProfileCompany = () => {
 
     const onSubmit = (formData) => {
         infoMsgs.current.clear();
-        storeSet.main.setAsyncRequest();
+        storeSet('setAsyncRequest');
 
         CompanyService.updateCompany(formData.id, formData, updateCallback, updateError);
     };
@@ -85,7 +85,7 @@ const ProfileCompany = () => {
     const updateCallback = (data) => {
         if (data.status === 'SUCCESS') {
             const company = klona(data.data);
-            const companies = storeGet.main.companies();
+            const companies = storeGet('companies');
             const existingCompany = head(companies.filter(o => o.id === company.id));
             let newCompanies = [];
 
@@ -93,10 +93,10 @@ const ProfileCompany = () => {
                 newCompanies = companies.map(o => o.id === company.id ? company : o)
             } else {
                 newCompanies = [...companies, company];
-                storeSet.main.chosenCompanyId(company.id);
+                storeSet('chosenCompanyId', company.id);
             }
 
-            storeSet.main.companies(newCompanies);
+            storeSet('companies', newCompanies);
 
             if (toast.current) {
                 toast.current.show({
@@ -106,12 +106,12 @@ const ProfileCompany = () => {
                 });
             }
         }
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const updateError = (data) => {
         set404FromErrorResponse(data);
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const checkVatNumber = (e) => {
@@ -119,7 +119,7 @@ const ProfileCompany = () => {
         const isValid = isPIVA(e.target.value);
 
         if (isValid) {
-            storeSet.main.setAsyncRequest();
+            storeSet('setAsyncRequest');
             CompanyService.checkVat(checkVatCallback, errCheckVatCallback, [['vatNumber', e.target.value]])
         } else {
             setEmptyValues();
@@ -150,13 +150,13 @@ const ProfileCompany = () => {
         } else {
             setEmptyValues();
         }
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const errCheckVatCallback = (data) => {
         setEmptyValues();
         set404FromErrorResponse(data);
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const setDelegaFieldValue = (value, name) => {
@@ -172,16 +172,16 @@ const ProfileCompany = () => {
         if (data.data) {
             setDelega([data.data]);
         }
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const errDellegaCallback = () => {
         setDelega([]);
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const downloadDelega = () => {
-        storeSet.main.setAsyncRequest();
+        storeSet('setAsyncRequest');
         const data = {
             codiceFiscale: delegaCodiceFiscale,
             firstName: delegaFirstName,
@@ -199,11 +199,11 @@ const ProfileCompany = () => {
         document.body.appendChild(link);
         link.click();
         link.remove();
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const errDellegaDownloadCallback = () => {
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const confirmDelete = (event) => {
@@ -231,7 +231,7 @@ const ProfileCompany = () => {
     }*/
 
     /*const doRemoveCompany = () => {
-        const userData = storeGet.main.userData();
+        const userData = storeGet('userData');
         let chosenCompany = {};
 
         if (chosenCompanyId) {
@@ -276,32 +276,32 @@ const ProfileCompany = () => {
     }*/
 
     const doRemoveCompanyAPI = () => {
-        storeSet.main.setAsyncRequest();
+        storeSet('setAsyncRequest');
         CompanyService.deleteCompany(formInitialData.id, deleteCompanyCallback, errDeleteCompanyCallback)
     }
 
     const deleteCompanyCallback = (data) => {
         if (data.status === 'SUCCESS') {
-            const userData = storeGet.main.userData();
+            const userData = storeGet('userData');
             const newCompanies = companies.filter(o => o.id !== chosenCompanyId);
-            storeSet.main.companies(newCompanies);
+            storeSet('companies', newCompanies);
             const newUserData = wrap(userData).set('companies', newCompanies).value();
-            storeSet.main.userData(newUserData);
+            storeSet('userData', newUserData);
 
             if (!isEmpty(newCompanies)) {
                 const newChosenCompanyId = newCompanies[0].id;
-                storeSet.main.chosenCompanyId(newChosenCompanyId);
+                storeSet('chosenCompanyId', newChosenCompanyId);
             } else {
-                storeSet.main.chosenCompanyId(0);
+                storeSet('chosenCompanyId', 0);
                 navigate(`/`);
             }
         }
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const errDeleteCompanyCallback = (data) => {
         set404FromErrorResponse(data);
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     useEffect(() => {
@@ -345,7 +345,7 @@ const ProfileCompany = () => {
 
     useEffect(() => {
         if (formInitialData.id) {
-            storeSet.main.setAsyncRequest();
+            storeSet('setAsyncRequest');
             CompanyService.getCompanyDelega(getDellegaCallback, errDellegaCallback, [
                 ['companyId', formInitialData.id]
             ]);

src/pages/Registration/index.js

@@ -12,7 +12,7 @@ import AuthenticationService from '../../service/authentication-service';
 import { isEmail } from '../../helpers/validators';
 
 // store
-import { storeSet, useStore } from '../../store';
+import { storeSet, useStoreValue } from '../../store';
 
 // components
 import FormField from '../../components/FormField';
@@ -26,7 +26,7 @@ import getDateFromISOstring from '../../helpers/getDateFromISOstring';
 const APP_HUB_ID = process.env.REACT_APP_HUB_ID;
 
 const Registration = () => {
-    const token = useStore().main.token();
+    const token = useStoreValue('token');
     const [loading, setLoading] = useState(false);
     const [originalDateOfBirth, setOriginalDateOfBirth] = useState('')
     const [visibleTerms, setVisibleTerms] = useState(false);
@@ -61,7 +61,7 @@ const Registration = () => {
 
     const regCallback = (data) => {
         if (data.status === 'SUCCESS') {
-            storeSet.main.setAuthData({
+            storeSet('setAuthData', {
                 token: data.data.token,
                 userData: data.data.user
             });

src/pages/ResetPassword/index.js

@@ -9,7 +9,7 @@ import { useNavigate, useSearchParams } from 'react-router-dom';
 import AuthenticationService from '../../service/authentication-service';
 
 // store
-import { useStore } from '../../store';
+import { useStoreValue } from '../../store';
 
 // components
 import FormField from '../../components/FormField';
@@ -21,7 +21,7 @@ const APP_HUB_ID = process.env.REACT_APP_HUB_ID;
 
 const ResetPassword = () => {
     const navigate = useNavigate();
-    const token = useStore().main.token();
+    const token = useStoreValue('token');
     const [loading, setLoading] = useState(false);
     const [resetPassToken, setResetPassToken] = useState('');
     const [resetPassEmail, setResetPassEmail] = useState('');

src/pages/ResetPasswordAdmin/index.js

@@ -9,7 +9,7 @@ import { useNavigate, useSearchParams } from 'react-router-dom';
 import AuthenticationService from '../../service/authentication-service';
 
 // store
-import { useStore } from '../../store';
+import { useStoreValue } from '../../store';
 
 // components
 import FormField from '../../components/FormField';
@@ -21,7 +21,7 @@ const APP_HUB_ID = process.env.REACT_APP_HUB_ID;
 
 const ResetPasswordAdmin = () => {
     const navigate = useNavigate();
-    const token = useStore().main.token();
+    const token = useStoreValue('token');
     const [loading, setLoading] = useState(false);
     const [resetPassToken, setResetPassToken] = useState('');
     const [resetPassEmail, setResetPassEmail] = useState('');

src/pages/SoccorsoAddInstructorManager/index.js

@@ -5,7 +5,7 @@ import { isEmpty } from 'ramda';
 import { wrap } from 'object-path-immutable';
 
 // store
-import { storeSet, useStore } from '../../store';
+import { storeSet, useStoreValue } from '../../store';
 
 // api
 import AmendmentsService from '../../service/amendments-service';
@@ -26,7 +26,7 @@ import ApplicationEvaluationService from '../../service/application-evaluation-s
 import { Dialog } from 'primereact/dialog';
 
 const SoccorsoAddInstructorManager = () => {
-    const isAsyncRequest = useStore().main.isAsyncRequest();
+    const isAsyncRequest = useStoreValue('isAsyncRequest');
     const { id } = useParams();
     const navigate = useNavigate();
     const [data, setData] = useState({});
@@ -43,7 +43,7 @@ const SoccorsoAddInstructorManager = () => {
         const parsed = parseInt(id)
         const entityId = !isNaN(parsed) ? parsed : 0;
 
-        storeSet.main.setAsyncRequest();
+        storeSet('setAsyncRequest');
         ApplicationEvaluationService.getEvaluationByApplId(getCallbackEvaluation, errGetCallback, [
             ['applicationId', entityId]
         ]);
@@ -61,7 +61,7 @@ const SoccorsoAddInstructorManager = () => {
             setData(data.data);
             setFormData(getFormattedFormData(data.data));
         }
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const errGetCallback = (data) => {
@@ -73,7 +73,7 @@ const SoccorsoAddInstructorManager = () => {
             });
         }
         set404FromErrorResponse(data);
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const getFormattedFormData = (data) => {
@@ -119,7 +119,7 @@ const SoccorsoAddInstructorManager = () => {
     }
 
     const doCreate = () => {
-        storeSet.main.setAsyncRequest();
+        storeSet('setAsyncRequest');
 
         AmendmentsService.createSoccorso(formData, createCallback, errCreateCallback, [
             ['applicationEvaluationId', evaluationId]
@@ -139,7 +139,7 @@ const SoccorsoAddInstructorManager = () => {
                 navigate(`/mie-domande/${id}/soccorso/${data.data.id}`);
             }, 1000)
         }
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const errCreateCallback = (data) => {
@@ -151,7 +151,7 @@ const SoccorsoAddInstructorManager = () => {
             });
         }
         set404FromErrorResponse(data);
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const initCreationProcess = () => {
@@ -310,7 +310,7 @@ const SoccorsoAddInstructorManager = () => {
                                 type="button"
                                 outlined
                                 onClick={goToEvaluationPage}
-                                label={__('Anulla', 'gepafin')}
+                                label={__('Annulla', 'gepafin')}
                                 icon="pi pi-times" iconPos="right"/>
                             <Button
                                 type="button"

src/pages/SoccorsoAddPreInstructor/index.js

@@ -5,7 +5,7 @@ import { isEmpty } from 'ramda';
 import { wrap } from 'object-path-immutable';
 
 // store
-import { storeSet, useStore } from '../../store';
+import { storeSet, useStoreValue } from '../../store';
 
 // api
 import AmendmentsService from '../../service/amendments-service';
@@ -26,7 +26,7 @@ import ApplicationEvaluationService from '../../service/application-evaluation-s
 import { Dialog } from 'primereact/dialog';
 
 const SoccorsoAddPreInstructor = () => {
-    const isAsyncRequest = useStore().main.isAsyncRequest();
+    const isAsyncRequest = useStoreValue('isAsyncRequest');
     const { id } = useParams();
     const navigate = useNavigate();
     const [data, setData] = useState({});
@@ -43,7 +43,7 @@ const SoccorsoAddPreInstructor = () => {
         const parsed = parseInt(id)
         const entityId = !isNaN(parsed) ? parsed : 0;
 
-        storeSet.main.setAsyncRequest();
+        storeSet('setAsyncRequest');
         ApplicationEvaluationService.getEvaluationByApplId(getCallbackEvaluation, errGetCallback, [
             ['applicationId', entityId]
         ]);
@@ -61,7 +61,7 @@ const SoccorsoAddPreInstructor = () => {
             setData(data.data);
             setFormData(getFormattedFormData(data.data));
         }
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const errGetCallback = (data) => {
@@ -73,7 +73,7 @@ const SoccorsoAddPreInstructor = () => {
             });
         }
         set404FromErrorResponse(data);
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const getFormattedFormData = (data) => {
@@ -119,7 +119,7 @@ const SoccorsoAddPreInstructor = () => {
     }
 
     const doCreate = () => {
-        storeSet.main.setAsyncRequest();
+        storeSet('setAsyncRequest');
 
         AmendmentsService.createSoccorso(formData, createCallback, errCreateCallback, [
             ['applicationEvaluationId', evaluationId]
@@ -139,7 +139,7 @@ const SoccorsoAddPreInstructor = () => {
                 navigate(`/domande/${id}/soccorso/${data.data.id}`);
             }, 1000)
         }
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const errCreateCallback = (data) => {
@@ -151,7 +151,7 @@ const SoccorsoAddPreInstructor = () => {
             });
         }
         set404FromErrorResponse(data);
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const initCreationProcess = () => {
@@ -310,7 +310,7 @@ const SoccorsoAddPreInstructor = () => {
                                 type="button"
                                 outlined
                                 onClick={goToEvaluationPage}
-                                label={__('Anulla', 'gepafin')}
+                                label={__('Annulla', 'gepafin')}
                                 icon="pi pi-times" iconPos="right"/>
                             <Button
                                 type="button"

src/pages/SoccorsoEditBeneficiario/index.js

@@ -7,7 +7,7 @@ import { klona } from 'klona';
 import { wrap } from 'object-path-immutable';
 
 // store
-import { storeSet, useStore } from '../../store';
+import { storeSet, useStoreValue } from '../../store';
 
 // api
 import AmendmentsService from '../../service/amendments-service';
@@ -31,7 +31,7 @@ import { Editor } from 'primereact/editor';
 const APP_HUB_ID = process.env.REACT_APP_HUB_ID;
 
 const SoccorsoEditBeneficiario = () => {
-    const isAsyncRequest = useStore().main.isAsyncRequest();
+    const isAsyncRequest = useStoreValue('isAsyncRequest');
     const { id } = useParams();
     const navigate = useNavigate();
     const [data, setData] = useState({});
@@ -82,7 +82,7 @@ const SoccorsoEditBeneficiario = () => {
                     amendmentDocuments: amendmentObj.amendmentDocuments
                 }
                 setFormInitialData(formDataInitial);
-                storeSet.main.unsetAsyncRequest();
+                storeSet('unsetAsyncRequest');
             } else {
                 ApplicationService.getApplication(id, getApplCallback, errGetCallback)
             }
@@ -98,14 +98,14 @@ const SoccorsoEditBeneficiario = () => {
             });
         }
         set404FromErrorResponse(data);
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const getApplCallback = (data) => {
         if (data.status === 'SUCCESS') {
             setDataAppl(getFormattedData(data.data));
         }
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const getFormattedData = (data) => {
@@ -146,7 +146,7 @@ const SoccorsoEditBeneficiario = () => {
         }
         const amendmentId = data.id;
 
-        storeSet.main.setAsyncRequest();
+        storeSet('setAsyncRequest');
 
         AmendmentsService.updateSoccorso(
             amendmentId,
@@ -189,7 +189,7 @@ const SoccorsoEditBeneficiario = () => {
                 setFormInitialData(formDataInitial);
             }
         }
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const errUpdateAmendmentCallback = (data) => {
@@ -201,7 +201,7 @@ const SoccorsoEditBeneficiario = () => {
             });
         }
         //set404FromErrorResponse(data);
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const updateNewAmendmentData = (value, path) => {

src/pages/SoccorsoEditInstructorManager/index.js

@@ -7,7 +7,7 @@ import { klona } from 'klona';
 import { useForm } from 'react-hook-form';
 
 // store
-import { storeSet, useStore } from '../../store';
+import { storeSet, useStoreValue } from '../../store';
 
 // api
 import AmendmentsService from '../../service/amendments-service';
@@ -31,7 +31,7 @@ import SoccorsoComunications from '../SoccorsoEditPreInstructor/components/Socco
 
 
 const SoccorsoEditInstructorManager = () => {
-    const isAsyncRequest = useStore().main.isAsyncRequest();
+    const isAsyncRequest = useStoreValue('isAsyncRequest');
     const { id, amendmentId } = useParams();
     const navigate = useNavigate();
     const [data, setData] = useState({});
@@ -76,7 +76,7 @@ const SoccorsoEditInstructorManager = () => {
             }
             setFormInitialData(formDataInitial);
         }
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const errGetCallback = (data) => {
@@ -88,7 +88,7 @@ const SoccorsoEditInstructorManager = () => {
             });
         }
         set404FromErrorResponse(data);
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const getFormattedData = (data) => {
@@ -152,7 +152,7 @@ const SoccorsoEditInstructorManager = () => {
             amendmentNotes: data.amendmentNotes
         }
 
-        storeSet.main.setAsyncRequest();
+        storeSet('setAsyncRequest');
         AmendmentsService.updateSoccorso(
             amendmentId,
             submitData,
@@ -169,7 +169,7 @@ const SoccorsoEditInstructorManager = () => {
                 const submitData = {
                     internalNote
                 }
-                storeSet.main.setAsyncRequest();
+                storeSet('setAsyncRequest');
                 AmendmentsService.closeSoccorso(amendmentId, submitData, closeAmendmentCallback, errCloseAmendmentCallback);
             } else {
                 if (toast.current) {
@@ -192,7 +192,7 @@ const SoccorsoEditInstructorManager = () => {
                 setFormInitialData(formDataInitial);
             }
         }
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const errUpdateAmendmentCallback = (data) => {
@@ -204,7 +204,7 @@ const SoccorsoEditInstructorManager = () => {
             });
         }
         set404FromErrorResponse(data);
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const openCloseAmendmentDialog = () => {
@@ -221,7 +221,7 @@ const SoccorsoEditInstructorManager = () => {
 
     const footerCloseAmendDialog = () => {
         return <div>
-            <Button type="button" label={__('Anulla', 'gepafin')} onClick={hideCloseAmendDialog} outlined/>
+            <Button type="button" label={__('Annulla', 'gepafin')} onClick={hideCloseAmendDialog} outlined/>
             <Button
                 type="button"
                 disabled={isAsyncRequest || isEmpty(data.internalNotes)}
@@ -247,7 +247,7 @@ const SoccorsoEditInstructorManager = () => {
                 setIsVisibleCloseAmendDialog(false);
             }
         }
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const errCloseAmendmentCallback = (data) => {
@@ -259,7 +259,7 @@ const SoccorsoEditInstructorManager = () => {
             });
         }
         set404FromErrorResponse(data);
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const headerExtendRespDialog = () => {
@@ -272,7 +272,7 @@ const SoccorsoEditInstructorManager = () => {
 
     const footerExtendRespDialog = () => {
         return <div>
-            <Button type="button" label={__('Anulla', 'gepafin')} onClick={hideExtendRespDialog} outlined/>
+            <Button type="button" label={__('Annulla', 'gepafin')} onClick={hideExtendRespDialog} outlined/>
             <Button
                 type="button"
                 disabled={isLoadingExtendingTime || isEmpty(extendedTime)}

src/pages/SoccorsoEditPreInstructor/components/SoccorsoComunications/index.js

@@ -76,7 +76,7 @@ const SoccorsoComunications = ({ amendmentId, soccorsoStatus }) => {
 
     const footerNewComDialog = () => {
         return <div>
-            <Button type="button" label={__('Anulla', 'gepafin')} onClick={hideNewComDialog} outlined/>
+            <Button type="button" label={__('Annulla', 'gepafin')} onClick={hideNewComDialog} outlined/>
             <Button
                 type="button"
                 disabled={isLoadingCommunication || isEmpty(newCommData.title) || isEmpty(newCommData.comment)}
@@ -130,14 +130,14 @@ const SoccorsoComunications = ({ amendmentId, soccorsoStatus }) => {
     }
 
     const displayCommIcon = (comm) => {
-        const userData = storeGet.main.userData();
+        const userData = storeGet('userData');
         return userData.id === comm.senderUserId
             ? <i className="pi pi-upload"></i>
             : <i className="pi pi-download"></i>;
     }
 
     const getCommRowClass = (comm) => {
-        const userData = storeGet.main.userData();
+        const userData = storeGet('userData');
         return userData.id === comm.senderUserId ? 'outgoing' : 'incoming';
     }
 

src/pages/SoccorsoEditPreInstructor/index.js

@@ -7,7 +7,7 @@ import { klona } from 'klona';
 import { useForm } from 'react-hook-form';
 
 // store
-import { storeSet, useStore } from '../../store';
+import { storeSet, useStoreValue } from '../../store';
 
 // api
 import AmendmentsService from '../../service/amendments-service';
@@ -31,7 +31,7 @@ import SoccorsoComunications from './components/SoccorsoComunications';
 
 
 const SoccorsoEditPreInstructor = () => {
-    const isAsyncRequest = useStore().main.isAsyncRequest();
+    const isAsyncRequest = useStoreValue('isAsyncRequest');
     const { id, amendmentId } = useParams();
     const navigate = useNavigate();
     const [data, setData] = useState({});
@@ -76,7 +76,7 @@ const SoccorsoEditPreInstructor = () => {
             }
             setFormInitialData(formDataInitial);
         }
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const errGetCallback = (data) => {
@@ -88,7 +88,7 @@ const SoccorsoEditPreInstructor = () => {
             });
         }
         set404FromErrorResponse(data);
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const getFormattedData = (data) => {
@@ -152,7 +152,7 @@ const SoccorsoEditPreInstructor = () => {
             amendmentNotes: data.amendmentNotes
         }
 
-        storeSet.main.setAsyncRequest();
+        storeSet('setAsyncRequest');
         AmendmentsService.updateSoccorso(
             amendmentId,
             submitData,
@@ -169,7 +169,7 @@ const SoccorsoEditPreInstructor = () => {
                 const submitData = {
                     internalNote
                 }
-                storeSet.main.setAsyncRequest();
+                storeSet('setAsyncRequest');
                 AmendmentsService.closeSoccorso(amendmentId, submitData, closeAmendmentCallback, errCloseAmendmentCallback);
             } else {
                 if (toast.current) {
@@ -192,7 +192,7 @@ const SoccorsoEditPreInstructor = () => {
                 setFormInitialData(formDataInitial);
             }
         }
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const errUpdateAmendmentCallback = (data) => {
@@ -204,7 +204,7 @@ const SoccorsoEditPreInstructor = () => {
             });
         }
         set404FromErrorResponse(data);
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const openCloseAmendmentDialog = () => {
@@ -221,7 +221,7 @@ const SoccorsoEditPreInstructor = () => {
 
     const footerCloseAmendDialog = () => {
         return <div>
-            <Button type="button" label={__('Anulla', 'gepafin')} onClick={hideCloseAmendDialog} outlined/>
+            <Button type="button" label={__('Annulla', 'gepafin')} onClick={hideCloseAmendDialog} outlined/>
             <Button
                 type="button"
                 disabled={isAsyncRequest || isEmpty(data.internalNotes)}
@@ -247,7 +247,7 @@ const SoccorsoEditPreInstructor = () => {
                 setIsVisibleCloseAmendDialog(false);
             }
         }
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const errCloseAmendmentCallback = (data) => {
@@ -259,7 +259,7 @@ const SoccorsoEditPreInstructor = () => {
             });
         }
         set404FromErrorResponse(data);
-        storeSet.main.unsetAsyncRequest();
+        storeSet('unsetAsyncRequest');
     }
 
     const headerExtendRespDialog = () => {
@@ -272,7 +272,7 @@ const SoccorsoEditPreInstructor = () => {
 
     const footerExtendRespDialog = () => {
         return <div>
-            <Button type="button" label={__('Anulla', 'gepafin')} onClick={hideExtendRespDialog} outlined/>
+            <Button type="button" label={__('Annulla', 'gepafin')} onClick={hideExtendRespDialog} outlined/>
             <Button
                 type="button"
                 disabled={isLoadingExtendingTime || isEmpty(extendedTime)}