updated form fields and application logic;

2024-09-12 17:17:48 +02:00
parent 19e17ec2d7
commit a8471ba7aa
42 changed files with 1423 additions and 231 deletions
--- a/src/pages/Applications/index.js
+++ b/src/pages/Applications/index.js
@@ -3,12 +3,16 @@ import { __ } from '@wordpress/i18n';
 import { useNavigate } from 'react-router-dom';

 // components
-import MyLatestSubmissionsTable from '../DashboardBenefeciario/components/MyLatestSubmissionsTable';
+import MyLatestSubmissionsTable from '../DashboardBeneficiario/components/MyLatestSubmissionsTable';
 import { Button } from 'primereact/button';

-const Bandi = () => {
+const Applications = () => {
    const navigate = useNavigate();

+    const gotToBandiDisponibili = () => {
+        navigate('')
+    }
+
    return(
        <div className="appPage">
            <div className="appPage__pageHeader">
@@ -29,6 +33,10 @@ const Bandi = () => {

            <div className="appPageSection">
                <div className="appPageSection__actions">
+                    <Button
+                        disabled={true}
+                        onClick={gotToBandiDisponibili}
+                        label={__('Bandi disponibili', 'gepafin')} icon="pi pi-bookmark" iconPos="right"/>
                    <Button
                        disabled={true}
                        outlined
@@ -41,4 +49,4 @@ const Bandi = () => {
    )
 }

-export default Bandi;
+export default Applications;
--- a/src/pages/Bandi/components/AllBandiTable/index.js
+++ b/src/pages/Bandi/components/AllBandiTable/index.js
@@ -146,7 +146,7 @@ const AllBandiTable = () => {
                        style={{ minWidth: '10rem' }}
                        body={dateEndBodyTemplate} filter filterElement={dateFilterTemplate}/>
                <Column field="status" header={__('Stato', 'gepafin')} filterMenuStyle={{ width: '14rem' }}
-                        style={{ minWidth: '12rem' }} body={statusBodyTemplate} filter
+                        style={{ width: '120px' }} body={statusBodyTemplate} filter
                        filterElement={statusFilterTemplate}/>
                <Column header={__('Azioni', 'gepafin')}
                        body={actionsBodyTemplate}/>
--- a/src/pages/BandoApplication/index.js
+++ b/src/pages/BandoApplication/index.js
@@ -0,0 +1,155 @@
+import React, { useState, useEffect } from 'react';
+import { __ } from '@wordpress/i18n';
+import { useNavigate, useParams } from 'react-router-dom';
+import { klona } from 'klona';
+import { head, is, isNil } from 'ramda';
+import { useForm } from 'react-hook-form';
+
+// store
+import { storeSet, useStore } from '../../store';
+
+// api
+import FormsService from '../../service/forms-service';
+
+// components
+import { Skeleton } from 'primereact/skeleton';
+import { Button } from 'primereact/button';
+import FormField from '../../components/FormField';
+import set404FromErrorResponse from '../../helpers/set404FromErrorResponse';
+
+import { formData as testformData } from '../../tempData';
+import BandoService from '../../service/bando-service';
+
+const BandoApplication = () => {
+    const { id } = useParams();
+    const navigate = useNavigate();
+    const [formData, setFormData] = useState([]);
+    const [formName, setFormName] = useState('');
+    const isAsyncRequest = useStore().main.isAsyncRequest();
+    const {
+        control,
+        handleSubmit,
+        formState: { errors },
+        getValues,
+    } = useForm({ defaultValues: {}, mode: 'onChange' });
+    const values = getValues();
+
+    const onSubmit = (formData) => {
+        const newFormData = Object.keys(formData).reduce((acc, cur) => {
+            acc.push({
+                'fieldId': cur,
+                'fieldValue': formData[cur] && formData[cur].getMonth ? formData[cur].toISOString() : formData[cur]
+            });
+            return acc;
+        }, []);
+        console.log('newFormData', newFormData)
+    };
+
+    const getBandoId = () => {
+        const parsed = parseInt(id)
+        return !isNaN(parsed) ? parsed : 0;
+    }
+
+    const getCallback = (data) => {
+        if (data.status === 'SUCCESS') {
+            /*const forms = data.data;
+            setFormName(forms[0].label);
+            const elements = klona(forms[0].content);
+            setFormData(elements);*/
+            //console.log('testformData.content', testformData.content);
+            setFormName(testformData.label);
+            setFormData(testformData.content);
+        }
+        storeSet.main.unsetAsyncRequest();
+    }
+
+    const errGetCallbacks = (data) => {
+        set404FromErrorResponse(data);
+        storeSet.main.unsetAsyncRequest();
+    }
+
+    useEffect(() => {
+        const bandoId = getBandoId();
+
+        if (bandoId) {
+            storeSet.main.setAsyncRequest();
+            FormsService.getFormsForCall(bandoId, getCallback, errGetCallbacks);
+        }
+    }, [id]);
+
+    return (
+        <div className="appPage">
+            {!isAsyncRequest
+                ? <div className="appPage__pageHeader">
+                    <h1>{formName}</h1>
+                </div>
+                : <>
+                    <Skeleton width="20%" height="1rem" className="mb-2"></Skeleton>
+                    <Skeleton width="100%" height="2rem" className="mb-8"></Skeleton>
+                </>}
+
+            <div className="appPage__spacer"></div>
+
+            {!isAsyncRequest
+                ? <div className="appPage__content">
+                    <form className="appForm" onSubmit={handleSubmit(onSubmit)}>
+                        {formData.map(o => {
+                            const label = head(o.settings.filter(o => o.name === 'label'));
+                            const placeholder = head(o.settings.filter(o => o.name === 'placeholder'));
+                            const options = head(o.settings.filter(o => o.name === 'options'));
+                            const step = head(o.settings.filter(o => o.name === 'step'));
+                            const mime = head(o.settings.filter(o => o.name === 'mime').join(','));
+
+                            return <FormField
+                                key={o.id}
+                                type={o.name}
+                                fieldName={o.id}
+                                label={label ? label.value : ''}
+                                placeholder={placeholder ? placeholder.value : ''}
+                                control={control}
+                                errors={errors}
+                                defaultValue={values[o.id]}
+                                maxFractionDigits={step}
+                                accept={mime}
+                                config={o.validators}
+                                options={options ? options.value : []}
+                            />
+                        })}
+
+                        <div className="appPage__spacer"></div>
+
+                        <div className="appPageSection__hr">
+                            <span>{__('Azioni rapide', 'gepafin')}</span>
+                        </div>
+
+                        <div className="appPageSection">
+                            <div className="appPageSection__actions">
+                                <Button
+                                    outlined
+                                    label={__('Salva bozza', 'gepafin')} icon="pi pi-save" iconPos="right"/>
+                                <Button
+                                    type="button"
+                                    disabled={true}
+                                    onClick={() => {
+                                    }}
+                                    label={__('Vai avanti', 'gepafin')} icon="pi pi-arrow-right" iconPos="right"/>
+                            </div>
+                        </div>
+                    </form>
+                </div>
+                : <>
+                    <Skeleton width="20%" height="1rem" className="mb-2"></Skeleton>
+                    <Skeleton width="100%" height="2rem" className="mb-8"></Skeleton>
+                    <Skeleton width="20%" height="1rem" className="mb-2"></Skeleton>
+                    <Skeleton width="100%" height="4rem" className="mb-8"></Skeleton>
+                    <Skeleton width="20%" height="1rem" className="mb-2"></Skeleton>
+                    <Skeleton width="100%" height="2rem" className="mb-8"></Skeleton>
+                    <Skeleton width="20%" height="1rem" className="mb-2"></Skeleton>
+                    <Skeleton width="100%" height="4rem"></Skeleton>
+                </>}
+        </div>
+    )
+
+}
+
+export default BandoApplication;
--- a/src/pages/BandoEdit/components/BandoEditFormStep2/index.js
+++ b/src/pages/BandoEdit/components/BandoEditFormStep2/index.js
@@ -66,8 +66,9 @@ const BandoEditFormStep2 = forwardRef(function ({ initialData, getFormErrors },
                summary: '',
                detail: __('Il bando è stato aggiornato corretamente!', 'gepafin')
            });
-            setFormInitialData(data.data);
-            reset();
+            const newFormData = {...formInitialData, ...data.data};
+            setFormInitialData(newFormData);
+            reset(newFormData);
        }
    }

--- a/src/pages/BandoEdit/index.js
+++ b/src/pages/BandoEdit/index.js
@@ -21,6 +21,7 @@ import BandoEditFormStep2 from './components/BandoEditFormStep2';
 import { Messages } from 'primereact/messages';
 import FormsService from '../../service/forms-service';
 import set404FromErrorResponse from '../../helpers/set404FromErrorResponse';
+import BlockingOverlay from '../../components/BlockingOverlay';

 const BandoEdit = () => {
    const isAsyncRequest = useStore().main.isAsyncRequest();
@@ -280,7 +281,7 @@ const BandoEdit = () => {
                    model={stepItems}
                    activeIndex={activeStep}
                    readOnly={false}/>
-                : null}
+                : <BlockingOverlay shouldDisplay={isAsyncRequest}/>}

            <div className="appPage__spacer"></div>

--- a/src/pages/BandoFlowEdit/index.js
+++ b/src/pages/BandoFlowEdit/index.js
@@ -1,7 +1,7 @@
 import React, { useEffect, useState, useCallback, useRef } from 'react';
 import { __ } from '@wordpress/i18n';
 import { useNavigate, useParams } from 'react-router-dom';
-import { isEmpty } from 'ramda';
+import { isEmpty, head } from 'ramda';

 // store
 import { storeSet, useStore } from '../../store';
@@ -17,6 +17,8 @@ import { Button } from 'primereact/button';
 import { Dropdown } from 'primereact/dropdown';
 import FlowBuilder from '../../components/FlowBuilder';
 import { Messages } from 'primereact/messages';
+import FlowService from '../../service/flow-service';
+import { confirmPopup, ConfirmPopup } from 'primereact/confirmpopup';

 const BandoFlowEdit = () => {
    const { id } = useParams();
@@ -39,17 +41,76 @@ const BandoFlowEdit = () => {
        navigate(`/tenders/${bandoId}/forms`);
    }

+    const confirmDelete = (event) => {
+        confirmPopup({
+            target: event.currentTarget,
+            message: __('Sei sicuro di reset questo flow?', 'gepafin'),
+            acceptLabel: __('Si', 'gepafin'),
+            icon: 'pi pi-info-circle',
+            defaultFocus: 'reject',
+            acceptClassName: 'p-button-danger',
+            accept: doDelete,
+            reject: () => {}
+        });
+    };
+
+    const doDelete = () => {
+        storeSet.main.flowData([]);
+        storeSet.main.flowEdges([]);
+        setInitialForm(0);
+        setFinalForm(0);
+    }
+
+    const updateInitialForm = (value) => {
+        setInitialForm(value);
+        if (forms.length === 2) {
+            const finalForm = head(forms.filter(o => o.id !== value));
+            if (finalForm) {
+                setFinalForm(finalForm.id);
+            }
+        }
+    }
+
    const shoudDisableSaving = useCallback(() => {
-        return isEmpty(flowData) || isEmpty(flowEdges) || isEmpty(initialForm) || isEmpty(finalForm);
+        return forms.length > 2
+            ? isEmpty(flowData) || isEmpty(flowEdges) || isEmpty(initialForm) || isEmpty(finalForm)
+            : isEmpty(flowEdges) || isEmpty(initialForm);
    }, [flowData, flowEdges]);

    const doSave = () => {
-        console.log('doSave', {
+        storeSet.main.setAsyncRequest();
+        const bandoId = getBandoId();
+        const body = {
            initialForm,
            finalForm,
            flowData,
            flowEdges
-        });
+        };
+        if (flowMsgs.current) {
+            flowMsgs.current.clear();
+        }
+        FlowService.createFlow(bandoId, body, getFlowCreateCallback, errGetFlowCreateCallback);
+    }
+
+    const getFlowCreateCallback = (data) => {
+        if (data.status === 'SUCCESS') {
+            if (flowMsgs.current) {
+                flowMsgs.current.show([
+                    {
+                        id: '99',
+                        sticky: true, severity: 'success', summary: '',
+                        detail: __('Flow è salvato.', 'gepafin'),
+                        closable: false
+                    }
+                ]);
+            }
+        }
+        storeSet.main.unsetAsyncRequest();
+    }
+
+    const errGetFlowCreateCallback = (data) => {
+        set404FromErrorResponse(data);
+        storeSet.main.unsetAsyncRequest();
    }

    const getFormsCallback = (data) => {
@@ -66,10 +127,27 @@ const BandoFlowEdit = () => {
        storeSet.main.unsetAsyncRequest();
    }

+    const getFlowCallback = (data) => {
+        if (data.status === 'SUCCESS' && data.data) {
+            storeSet.main.flowData(data.data.flowData);
+            storeSet.main.flowEdges(data.data.flowEdges);
+            setInitialForm(data.data.initialForm);
+            setFinalForm(data.data.finalForm);
+
+        }
+        storeSet.main.unsetAsyncRequest();
+    }
+
+    const errGetFlowCallback = (data) => {
+        set404FromErrorResponse(data);
+        storeSet.main.unsetAsyncRequest();
+    }
+
    useEffect(() => {
        const bandoId = getBandoId();
        storeSet.main.setAsyncRequest();
        FormsService.getFormsForCall(bandoId, getFormsCallback, errGetFormsCallback);
+        FlowService.getFlow(bandoId, getFlowCallback, errGetFlowCallback)
    }, [id]);

    useEffect(() => {
@@ -112,7 +190,7 @@ const BandoFlowEdit = () => {
                        <Dropdown
                            id="initialForm"
                            value={initialForm}
-                            onChange={(e) => setInitialForm(e.value)}
+                            onChange={(e) => updateInitialForm(e.value)}
                            optionDisabled={(opt) => finalForm === opt.value}
                            options={formOptions}
                            optionLabel="label"
@@ -157,6 +235,13 @@ const BandoFlowEdit = () => {
                        disabled={shoudDisableSaving()}
                        label={__('Salva', 'gepafin')} icon="pi pi-save" iconPos="right"/>
                </div>
+                <div className="appPageSection__actions">
+                    <ConfirmPopup/>
+                    <Button
+                        onClick={confirmDelete}
+                        severity="warning"
+                        label={__('Reset', 'gepafin')} icon="pi pi-refresh" iconPos="right"/>
+                </div>
            </div>
        </div>
    )
--- a/src/pages/BandoFormsEdit/components/BuilderElementSettings/components/ElementSetting/index.js
+++ b/src/pages/BandoFormsEdit/components/BuilderElementSettings/components/ElementSetting/index.js
@@ -0,0 +1,28 @@
+import React from 'react';
+import { __ } from '@wordpress/i18n';
+
+// components
+import ElementSettingRepeater from '../ElementSettingRepeater';
+import { InputText } from 'primereact/inputtext';
+
+const ElementSetting = ({ setting, changeFn, updateDataFn }) => {
+
+    const settingLabels = {
+        label: __('Label', 'gepafin'),
+        placeholder: __('Segnaposto', 'gepafin'),
+        step: __('Precisione decimale', 'gepafin'),
+        options: __('Opzioni', 'gepafin'),
+        mime: __('Tipo di file', 'gepafin'),
+    }
+
+    return <div className="formElementSettings__field" key={setting.name}>
+        <label htmlFor={setting.name}>{settingLabels[setting.name]}</label>
+        {setting.name === 'options'
+            ? <ElementSettingRepeater value={setting.value} name={setting.name} setDataFn={updateDataFn}/>
+            : <InputText id={setting.name} aria-describedby={`${setting.name}-help`}
+                         value={setting.value}
+                         onChange={(e) => changeFn(e.target.value, setting.name)}/>}
+    </div>
+}
+
+export default ElementSetting;
--- a/src/pages/BandoFormsEdit/components/BuilderElementSettings/index.js
+++ b/src/pages/BandoFormsEdit/components/BuilderElementSettings/index.js
@@ -12,7 +12,7 @@ import { Button } from 'primereact/button';
 import { Tag } from 'primereact/tag';
 import { TabView, TabPanel } from 'primereact/tabview';
 import { InputSwitch } from 'primereact/inputswitch';
-import ElementSettingRepeater from './components/ElementSettingRepeater';
+import ElementSetting from './components/ElementSetting';

 const BuilderElementSettings = ({ closeSettings }) => {
    const elements = useStore().main.formElements();
@@ -97,15 +97,11 @@ const BuilderElementSettings = ({ closeSettings }) => {
                <TabView className="formElementSettings__tabs">
                    <TabPanel header={__('Presentation', 'gepafin')}>
                        {settings
-                            ? settings.map((o) => <div className="formElementSettings__field" key={o.name}>
-                                <label htmlFor={o.name}>{o.name}</label>
-                                {o.name === 'options'
-                                    ?
-                                    <ElementSettingRepeater value={o.value} name={o.name} setDataFn={onUpdateOptions}/>
-                                    : <InputText id={o.name} aria-describedby={`${o.name}-help`}
-                                                 value={o.value}
-                                                 onChange={(e) => onChange(e.target.value, o.name)}/>}
-                            </div>)
+                            ? settings.map((o) => <ElementSetting
+                                key={o.name}
+                                setting={o}
+                                changeFn={onChange}
+                                updateDataFn={onUpdateOptions}/>)
                            : null}
                    </TabPanel>
                    <TabPanel header={__('Validation', 'gepafin')}>
--- a/src/pages/BandoFormsEdit/components/FormBuilder/index.js
+++ b/src/pages/BandoFormsEdit/components/FormBuilder/index.js
@@ -11,11 +11,13 @@ import BuilderElementItem from '../BuilderElementItem';
 import { Sidebar } from 'primereact/sidebar';
 import BuilderElementSettings from '../BuilderElementSettings';
 import BuilderDropzone from '../BuilderDropzone';
+import BlockingOverlay from '../../../../components/BlockingOverlay';

 const FormBuilder = () => {
    const elements = useStore().main.formElements();
    const elementItems = useStore().main.elementItems();
    const activeElement = useStore().main.activeElement();
+    const isAsyncRequest = useStore().main.isAsyncRequest();

    const renderField = useCallback((field, index) => {
        return (
@@ -65,6 +67,7 @@ const FormBuilder = () => {
                        {elementItems.map((item) => renderItem(item))}
                    </ul>
                </div>
+                <BlockingOverlay shouldDisplay={isAsyncRequest}/>
            </div>
        </>
    )
--- a/src/pages/BandoFormsEdit/index.js
+++ b/src/pages/BandoFormsEdit/index.js
@@ -113,7 +113,7 @@ const BandoFormsEdit = () => {

    const getElementItemsCallback = (data) => {
        if (data.status === 'SUCCESS') {
-            storeSet.main.elementItems(elementItems);
+            storeSet.main.elementItems(elementItems.sort((a, b) => a.sortOrder - b.sortOrder));
            //storeSet.main.elementItems(data.data);
        }
        storeSet.main.unsetAsyncRequest();
@@ -184,7 +184,7 @@ const BandoFormsEdit = () => {

            <div className="appPageSection">
                <DndProvider backend={HTML5Backend}>
-                    {!isAsyncRequest ? <FormBuilder/> : null}
+                    <FormBuilder/>
                </DndProvider>
            </div>

@@ -198,10 +198,12 @@ const BandoFormsEdit = () => {
                        label={__('Indietro', 'gepafin')} icon="pi pi-arrow-left" iconPos="left"/>
                    <Button
                        onClick={() => doSave()}
+                        disabled={isAsyncRequest}
                        label={__('Salva progressi', 'gepafin')} icon="pi pi-save" iconPos="right"/>
                    <Button
                        outlined
                        onClick={openPreview}
+                        disabled={isAsyncRequest}
                        label={__('Visualizza Anteprima Beneficiario', 'gepafin')} icon="pi pi-image" iconPos="right"/>
                    {/*<Button
                        disabled={true}
@@ -212,6 +214,7 @@ const BandoFormsEdit = () => {
                    <ConfirmPopup />
                    <Button
                        onClick={confirmDelete}
+                        disabled={isAsyncRequest}
                        severity="danger"
                        label={__('Cancella', 'gepafin')} icon="pi pi-trash" iconPos="right"/>
                </div>
--- a/src/pages/BandoView/index.js
+++ b/src/pages/BandoView/index.js
@@ -32,22 +32,6 @@ const BandoView = () => {
        navigate(`/tenders/${id}`);
    }

-    const scaricaBando = () => {
-
-    }
-
-    const scaricaModulistica = () => {
-
-    }
-
-    const submitQuestion = () => {
-
-    }
-
-    const saveToFavourites = () => {
-
-    }
-
    const getCallback = (data) => {
        if (data.status === 'SUCCESS') {
            setData(getFormattedBandiData(data.data));
@@ -196,7 +180,7 @@ const BandoView = () => {
                    <div className="appPageSection">
                        <h2>{__('FAQ', 'gepafin')}</h2>
                        <Accordion>
-                            {data.faq.map((o, i) => <AccordionTab key={i} header={o.question}>
+                            {data.faq.map((o, i) => <AccordionTab key={i} header={o.value}>
                                <p>
                                    {o.response}
                                </p>
@@ -228,20 +212,20 @@ const BandoView = () => {
                                type="button"
                                disabled={true}
                                outlined
-                                onClick={scaricaBando}
+                                onClick={() => {}}
                                label={__('Scarica Bando Completo', 'gepafin')}
                                icon="pi pi-download" iconPos="right"/>
                            <Button
                                type="button"
                                disabled={true}
                                outlined
-                                onClick={scaricaModulistica}
+                                onClick={() => {}}
                                label={__('Scarica Modulistica', 'gepafin')}
                                icon="pi pi-download" iconPos="right"/>
                            <Button
                                type="button"
                                disabled={true}
-                                onClick={submitQuestion}
+                                onClick={() => {}}
                                label={__('Presenta Domanda', 'gepafin')}
                                icon="pi pi-save" iconPos="right"/>
                            <Button
@@ -249,7 +233,7 @@ const BandoView = () => {
                                outlined
                                rounded
                                disabled={true}
-                                onClick={saveToFavourites}
+                                onClick={() => {}}
                                label={__('Aggiungi a Preferiti', 'gepafin')}
                                icon="pi pi-heart" iconPos="left"/>
                        </div>
--- a/src/pages/BandoViewBeneficiario/index.js
+++ b/src/pages/BandoViewBeneficiario/index.js
@@ -0,0 +1,271 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { __, sprintf } from '@wordpress/i18n';
+import { useNavigate, useParams } from 'react-router-dom';
+import { is, isEmpty } from 'ramda';
+
+// store
+import { storeSet, useStore } from '../../store';
+
+// tools
+import getNumberWithCurrency from '../../helpers/getNumberWithCurrency';
+import getDateFromISOstring from '../../helpers/getDateFromISOstring';
+
+// components
+import { Skeleton } from 'primereact/skeleton';
+import { Accordion } from 'primereact/accordion';
+import { AccordionTab } from 'primereact/accordion';
+import { InputTextarea } from 'primereact/inputtextarea';
+import { Button } from 'primereact/button';
+import BandoService from '../../service/bando-service';
+import { Messages } from 'primereact/messages';
+import set404FromErrorResponse from '../../helpers/set404FromErrorResponse';
+
+const BandoViewBeneficiario = () => {
+    const isAsyncRequest = useStore().main.isAsyncRequest();
+    const { id } = useParams();
+    const navigate = useNavigate();
+    const [data, setData] = useState({});
+    const [newQuestion, setNewQuestion] = useState('');
+    const bandoMsgs = useRef(null);
+
+    const closePreview = () => {
+        navigate(`/tenders/${id}`);
+    }
+
+    const scaricaBando = () => {
+
+    }
+
+    const scaricaModulistica = () => {
+
+    }
+
+    const submitApplication = () => {
+        navigate(`/tenders/${id}/application`);
+    }
+
+    const saveToFavourites = () => {
+
+    }
+
+    const getCallback = (data) => {
+        if (data.status === 'SUCCESS') {
+            setData(getFormattedBandiData(data.data));
+        }
+        storeSet.main.unsetAsyncRequest();
+    }
+
+    const errGetCallback = (data) => {
+        if (bandoMsgs.current && data.message) {
+            bandoMsgs.current.show([
+                {
+                    sticky: true, severity: 'error', summary: '',
+                    detail: data.message,
+                    closable: true
+                }
+            ]);
+        }
+        set404FromErrorResponse(data);
+        storeSet.main.unsetAsyncRequest();
+    }
+
+    const getFormattedBandiData = (data) => {
+        data.dates = data.dates.map(v => is(String, v) ? new Date(v) : (v ? v : ''));
+        return data;
+    };
+
+    useEffect(() => {
+        const parsed = parseInt(id)
+        const bandoId = !isNaN(parsed) ? parsed : 0;
+
+        BandoService.getBando(bandoId, getCallback, errGetCallback);
+    }, [id]);
+
+    return (
+        <div className="appPage">
+            {!isAsyncRequest && !isEmpty(data)
+                ? <div className="appPage__pageHeader">
+                    <h1>{data.name}</h1>
+                    <p>
+                        {__('Data:', 'gepafin')}
+                        <span>{getDateFromISOstring(data.createdDate)}</span>
+                    </p>
+                </div>
+                : <>
+                    <Skeleton width="20%" height="1rem" className="mb-2"></Skeleton>
+                    <Skeleton width="100%" height="2rem" className="mb-8"></Skeleton>
+                </>}
+
+            <div className="appPage__spacer"></div>
+            <Messages ref={bandoMsgs}/>
+
+            {!isAsyncRequest && !isEmpty(data)
+                ? <div className="appPage__content">
+                    <picture className="appPageSection__hero">
+                        <source srcSet={data.images[0] ? data.images[0].filePath : ''}/>
+                        <img src={data.images[0] ? data.images[0].filePath : ''} alt={data.name}/>
+                    </picture>
+
+                    <div className="appPageSection__withBorder">
+                        <h2>{__('Descrizione breve', 'gepafin')}</h2>
+                        <div className="row rowContent">
+                            <p>{data.descriptionShort}</p>
+                        </div>
+                    </div>
+
+                    <div className="appPageSection__row">
+                        <div className="appPageSection__withBorder">
+                            <p className="appPageSection__pMeta">
+                                <span>{__('Importo totale', 'gepafin')}</span>
+                                <span>{getNumberWithCurrency(data.amount)}</span>
+                            </p>
+                            <p className="appPageSection__pMeta">
+                                <span>{__('Importo massimo per progetto', 'gepafin')}</span>
+                                <span>{getNumberWithCurrency(data.amountMax)}</span>
+                            </p>
+                        </div>
+
+                        <div className="appPageSection__withBorder">
+                            <p className="appPageSection__pMeta">
+                                <span>{__('Data apertura', 'gepafin')}</span>
+                                <span>{getDateFromISOstring(data.dates[0])}</span>
+                            </p>
+                            <p className="appPageSection__pMeta">
+                                <span>{__('Data chiusura', 'gepafin')}</span>
+                                <span>{getDateFromISOstring(data.dates[1])}</span>
+                            </p>
+                        </div>
+                    </div>
+
+                    <div className="appPageSection__withBorder">
+                        <h2>{__('Descrizione dettagliata', 'gepafin')}</h2>
+                        <div className="row rowContent">
+                            <p>{data.descriptionLong}</p>
+                        </div>
+                    </div>
+
+                    <div className="appPageSection__withBorder">
+                        <h2>{__('Requisiti di Partecipazione', 'gepafin')}</h2>
+                        <div className="row rowContent">
+                            <ul>
+                                {data.aimedTo.map((o, i) => <li key={i}>
+                                    {o.value}
+                                </li>)}
+                            </ul>
+                        </div>
+                    </div>
+
+                    <div className="appPageSection__withBorder">
+                        <h2>{__('Documentazione Richiesta', 'gepafin')}</h2>
+                        <div className="row rowContent">
+                            <p>{data.documentationRequested}</p>
+                        </div>
+                    </div>
+
+                    <div className="appPageSection__withBorder">
+                        <h2>{__('Criteri di Valutazione', 'gepafin')}</h2>
+                        <div className="row rowContent">
+                            <ul>
+                                {data.criteria.map((o, i) => <li key={i}>
+                                    {`${o.value} ${sprintf(__('(%d punti)'), o.score)}`}
+                                </li>)}
+                            </ul>
+                        </div>
+                    </div>
+
+                    <div className="appPageSection__withBorder">
+                        <h2>{__('Allegati', 'gepafin')}</h2>
+                        <div className="row rowContent">
+                            <ul>
+                                {data.docs.map((o, i) => <li key={i}>
+                                    <a href={o.filePath} target="_blank" rel="noreferrer">{o.name}</a>
+                                </li>)}
+                            </ul>
+                        </div>
+                    </div>
+
+                    <div className="appPageSection">
+                        <h2>{__('FAQ', 'gepafin')}</h2>
+                        <Accordion>
+                            {data.faq.map((o, i) => <AccordionTab key={i} header={o.value}>
+                                <p>
+                                    {o.response}
+                                </p>
+                            </AccordionTab>)}
+                        </Accordion>
+                    </div>
+
+                    <div className="appPageSection">
+                        <h2>{__('Non hai trovato la risposta che cercavi?', 'gepafin')}</h2>
+                        <div className="appForm__field">
+                            <label htmlFor="newQuestion">{__('Fai una domanda', 'gepafin')}</label>
+                            <InputTextarea
+                                id="newQuestion"
+                                rows={7}
+                                value={newQuestion}
+                                placeholder={__('Digita qui la tua domanda', 'gepafin')}
+                                onChange={(e) => setNewQuestion(e.target.value)}
+                                aria-describedby="newQuestion-help"/>
+                            <small id="newQuestion-help">
+                                {__('Riceverai una notifica quando ti risponderemo', 'gepafin')}
+                            </small>
+                        </div>
+                    </div>
+
+                    <div className="appPageSection">
+                        <h2>{__('Download Documenti', 'gepafin')}</h2>
+                        <div className="appPageSection__actions">
+                            <Button
+                                type="button"
+                                disabled={true}
+                                outlined
+                                onClick={scaricaBando}
+                                label={__('Scarica Bando Completo', 'gepafin')}
+                                icon="pi pi-download" iconPos="right"/>
+                            <Button
+                                type="button"
+                                disabled={true}
+                                outlined
+                                onClick={scaricaModulistica}
+                                label={__('Scarica Modulistica', 'gepafin')}
+                                icon="pi pi-download" iconPos="right"/>
+                            <Button
+                                type="button"
+                                onClick={submitApplication}
+                                label={__('Presenta Domanda', 'gepafin')}
+                                icon="pi pi-save" iconPos="right"/>
+                            <Button
+                                type="button"
+                                outlined
+                                rounded
+                                disabled={true}
+                                onClick={saveToFavourites}
+                                label={__('Aggiungi a Preferiti', 'gepafin')}
+                                icon="pi pi-heart" iconPos="left"/>
+                        </div>
+                    </div>
+
+                    <div className="appPageSection__withBorder">
+                        <h2>{__('Contatti per Assistenza', 'gepafin')}</h2>
+                        <div className="row rowContent">
+                            <p>Email: bandi@gepafin.it</p>
+                            <p>Telefono: +39 075 123 4567</p>
+                        </div>
+                    </div>
+                </div>
+                : <>
+                    <Skeleton width="20%" height="1rem" className="mb-2"></Skeleton>
+                    <Skeleton width="100%" height="2rem" className="mb-8"></Skeleton>
+                    <Skeleton width="20%" height="1rem" className="mb-2"></Skeleton>
+                    <Skeleton width="100%" height="4rem" className="mb-8"></Skeleton>
+                    <Skeleton width="20%" height="1rem" className="mb-2"></Skeleton>
+                    <Skeleton width="100%" height="2rem" className="mb-8"></Skeleton>
+                    <Skeleton width="20%" height="1rem" className="mb-2"></Skeleton>
+                    <Skeleton width="100%" height="4rem"></Skeleton>
+                </>}
+        </div>
+    )
+
+}
+
+export default BandoViewBeneficiario;
--- a/src/pages/Dashboard/components/LatestBandiTable/index.js
+++ b/src/pages/Dashboard/components/LatestBandiTable/index.js
@@ -25,6 +25,7 @@ import { Button } from 'primereact/button';
 import { Calendar } from 'primereact/calendar';
 import { Tag } from 'primereact/tag';
 import ProperBandoLabel from '../../../../components/ProperBandoLabel';
+import { Link } from 'react-router-dom';


 const LatestBandiTable = () => {
@@ -73,7 +74,8 @@ const LatestBandiTable = () => {

    const getCallback = (data) => {
        if (data.status === 'SUCCESS') {
-            setItems(getFormattedBandiData(data.data));
+            const newItems = data.data.filter(o => o.status === 'PUBLISH');
+            setItems(getFormattedBandiData(newItems));
            setStatuses(uniq(data.data.map(o => o.status)))
            initFilters();
        }
@@ -87,8 +89,8 @@ const LatestBandiTable = () => {

    const getFormattedBandiData = (data) => {
        return [...(data || [])].map((d) => {
-            d.start_date = new Date(d.start_date);
-            d.end_date = new Date(d.end_date);
+            d.start_date = new Date(d.dates[0]);
+            d.end_date = new Date(d.dates[1]);

            return d;
        });
@@ -122,8 +124,7 @@ const LatestBandiTable = () => {
            name: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
            start_date: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }] },
            end_date: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }] },
-            submissions: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
-            status: { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
+            status: { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] }
        });
        setGlobalFilterValue('');
    };
@@ -168,6 +169,12 @@ const LatestBandiTable = () => {
        return <Tag value={getBandoLabel(option)} severity={getBandoSeverity(option)} />;
    };

+    const actionsBodyTemplate = (rowData) => {
+        return <Link to={`/tenders/${rowData.id}`}>
+            <Button severity="info" label={__('Modifica', 'gepafin')} icon="pi pi-pencil" size="small" iconPos="right" />
+        </Link>
+    }
+
    const header = renderHeader();

    return(
@@ -185,12 +192,10 @@ const LatestBandiTable = () => {
                <Column header={__('Data Scadenza', 'gepafin')} filterField="end_date" dataType="date"
                        style={{ minWidth: '10rem' }}
                        body={dateEndBodyTemplate} filter filterElement={dateFilterTemplate}/>
-                <Column header={__('Domande ricevute', 'gepafin')} filterField="submissions" dataType="numeric"
-                        style={{ minWidth: '10rem' }} field="submissions"
-                        filter filterElement={balanceFilterTemplate}/>
-                <Column field="status" header={__('Stato', 'gepafin')} filterMenuStyle={{ width: '14rem' }}
-                        style={{ minWidth: '12rem' }} body={statusBodyTemplate} filter
-                        filterElement={statusFilterTemplate}/>
+                <Column field="status" header={__('Stato', 'gepafin')}
+                        style={{ width: '120px' }} body={statusBodyTemplate} />
+                <Column header={__('Azioni', 'gepafin')}
+                        body={actionsBodyTemplate}/>
            </DataTable>
        </div>
    )
--- a/src/pages/DashboardBeneficiario/components/LatestBandiTable/index.js
+++ b/src/pages/DashboardBeneficiario/components/LatestBandiTable/index.js
@@ -0,0 +1,172 @@
+import React, { useState, useEffect} from 'react';
+import { __ } from '@wordpress/i18n';
+import { uniq } from 'ramda';
+
+// tools
+import getBandoLabel from '../../../../helpers/getBandoLabel';
+import getBandoSeverity from '../../../../helpers/getBandoSeverity';
+
+// store
+import { storeSet } from '../../../../store';
+
+// api
+import BandoService from '../../../../service/bando-service';
+
+// components
+import { FilterMatchMode, FilterOperator } from 'primereact/api';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { InputText } from 'primereact/inputtext';
+import { IconField } from 'primereact/iconfield';
+import { InputIcon } from 'primereact/inputicon';
+import { Dropdown } from 'primereact/dropdown';
+import { InputNumber } from 'primereact/inputnumber';
+import { Button } from 'primereact/button';
+import { Calendar } from 'primereact/calendar';
+import { Tag } from 'primereact/tag';
+import ProperBandoLabel from '../../../../components/ProperBandoLabel';
+import { Link } from 'react-router-dom';
+
+
+const LatestBandiTable = () => {
+    const [items, setItems] = useState(null);
+    const [filters, setFilters] = useState(null);
+    const [loading, setLoading] = useState(false);
+    const [globalFilterValue, setGlobalFilterValue] = useState('');
+    const [statuses, setStatuses] = useState([]);
+
+    useEffect(() => {
+        storeSet.main.setAsyncRequest();
+        BandoService.getBandi(getCallback, errGetCallbacks);
+    }, []);
+
+    const getCallback = (data) => {
+        if (data.status === 'SUCCESS') {
+            const newItems = data.data.filter(o => o.status === 'PUBLISH');
+            setItems(getFormattedBandiData(newItems));
+            setStatuses(uniq(data.data.map(o => o.status)))
+            initFilters();
+        }
+        storeSet.main.unsetAsyncRequest();
+    }
+
+    const errGetCallbacks = (data) => {
+        console.log('errGetCallbacks', data)
+        storeSet.main.unsetAsyncRequest();
+    }
+
+    const getFormattedBandiData = (data) => {
+        return [...(data || [])].map((d) => {
+            d.start_date = new Date(d.dates[0]);
+            d.end_date = new Date(d.dates[1]);
+
+            return d;
+        });
+    };
+
+    const formatDate = (value) => {
+        return value.toLocaleDateString('it-IT', {
+            day: '2-digit',
+            month: '2-digit',
+            year: 'numeric'
+        });
+    };
+
+    const clearFilter = () => {
+        initFilters();
+    };
+
+    const onGlobalFilterChange = (e) => {
+        const value = e.target.value;
+        let _filters = { ...filters };
+
+        _filters['global'].value = value;
+
+        setFilters(_filters);
+        setGlobalFilterValue(value);
+    };
+
+    const initFilters = () => {
+        setFilters({
+            global: { value: null, matchMode: FilterMatchMode.CONTAINS },
+            name: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
+            start_date: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }] },
+            end_date: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }] },
+            status: { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] }
+        });
+        setGlobalFilterValue('');
+    };
+
+    const renderHeader = () => {
+        return (
+            <div className="appTableHeader">
+                <Button type="button" icon="pi pi-filter-slash" label={__('Pulisci', 'gepafin')} outlined onClick={clearFilter} />
+                <IconField iconPosition="left">
+                    <InputIcon className="pi pi-search" />
+                    <InputText value={globalFilterValue} onChange={onGlobalFilterChange} placeholder={__('Cerca', 'gepafin')} />
+                </IconField>
+            </div>
+        );
+    };
+
+    const dateStartBodyTemplate = (rowData) => {
+        return formatDate(rowData.start_date);
+    };
+
+    const dateEndBodyTemplate = (rowData) => {
+        return formatDate(rowData.end_date);
+    };
+
+    const dateFilterTemplate = (options) => {
+        return <Calendar value={options.value} onChange={(e) => options.filterCallback(e.value, options.index)} dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" mask="99/99/9999" />;
+    };
+
+    const balanceFilterTemplate = (options) => {
+        return <InputNumber value={options.value} onChange={(e) => options.filterCallback(e.value, options.index)} />;
+    };
+
+    const statusBodyTemplate = (rowData) => {
+        return <ProperBandoLabel status={rowData.status}/>;
+    };
+
+    const statusFilterTemplate = (options) => {
+        return <Dropdown value={options.value} options={statuses} onChange={(e) => options.filterCallback(e.value, options.index)} itemTemplate={statusItemTemplate} placeholder="Select One" className="p-column-filter" showClear />;
+    };
+
+    const statusItemTemplate = (option) => {
+        return <Tag value={getBandoLabel(option)} severity={getBandoSeverity(option)} />;
+    };
+
+    const actionsBodyTemplate = (rowData) => {
+        return <Link to={`/tenders/${rowData.id}/preview`}>
+            <Button severity="info" label={__('Partecipa', 'gepafin')} icon="pi pi-arrow-right" size="small" iconPos="right" />
+        </Link>
+    }
+
+    const header = renderHeader();
+
+    return(
+        <div className="appPageSection__table">
+            <DataTable value={items} paginator showGridlines rows={10} loading={loading} dataKey="id"
+                       filters={filters}
+                       globalFilterFields={['name', 'status']}
+                       header={header}
+                       emptyMessage="Nothing found." onFilter={(e) => setFilters(e.filters)}>
+                <Column field="name" header={__('Nome Bando', 'gepafin')} filter filterPlaceholder="Search by name"
+                        style={{ minWidth: '12rem' }}/>
+                <Column header={__('Data Pubblicazione', 'gepafin')} filterField="start_date" dataType="date"
+                        style={{ minWidth: '10rem' }}
+                        body={dateStartBodyTemplate} filter filterElement={dateFilterTemplate}/>
+                <Column header={__('Data Scadenza', 'gepafin')} filterField="end_date" dataType="date"
+                        style={{ minWidth: '10rem' }}
+                        body={dateEndBodyTemplate} filter filterElement={dateFilterTemplate}/>
+                <Column field="status" header={__('Stato', 'gepafin')}
+                        style={{ width: '120px' }} body={statusBodyTemplate} />
+                <Column header={__('Azioni', 'gepafin')}
+                        body={actionsBodyTemplate}/>
+            </DataTable>
+        </div>
+    )
+}
+
+export default LatestBandiTable;
--- a/src/pages/DashboardBeneficiario/components/MyLatestSubmissionsTable/index.js
+++ b/src/pages/DashboardBeneficiario/components/MyLatestSubmissionsTable/index.js
@@ -38,7 +38,8 @@ const MyLatestSubmissionsTable = () => {
                modify_date: '2024-08-30T00:00:00+00:00',
                progress: 50,
                status: 'DRAFT',
-                id: 11
+                id: 11,
+                callId: 11
            },
            {
                name: 'Bando Sostenibilità 2024',
@@ -46,7 +47,8 @@ const MyLatestSubmissionsTable = () => {
                modify_date: '2024-08-15T00:00:00+00:00',
                progress: 25,
                status: 'DRAFT',
-                id: 9
+                id: 9,
+                callId: 12
            }
        ]
        setItems(getFormattedBandiData(items));
@@ -138,7 +140,7 @@ const MyLatestSubmissionsTable = () => {
    };

    const actionsBodyTemplate = (rowData) => {
-        return <Link to={`/bids/${rowData.id}`}>
+        return <Link to={`/tenders/${rowData.callId}/application`}>
            <Button severity="info" label={__('Modifica', 'gepafin')} icon="pi pi-pencil" size="small" iconPos="right" />
        </Link>
    }
@@ -161,7 +163,7 @@ const MyLatestSubmissionsTable = () => {
                        style={{ minWidth: '10rem' }}
                        body={dateModifyBodyTemplate} filter filterElement={dateFilterTemplate}/>
                <Column field="status" header={__('Stato', 'gepafin')} filterMenuStyle={{ width: '14rem' }}
-                        style={{ minWidth: '12rem' }} body={statusBodyTemplate} filter
+                        style={{ width: '120px' }} body={statusBodyTemplate} filter
                        filterElement={statusFilterTemplate}/>
                <Column header={__('Progressi', 'gepafin')}
                        style={{ minWidth: '10rem' }} field="progress"
--- a/src/pages/DashboardBeneficiario/index.js
+++ b/src/pages/DashboardBeneficiario/index.js
@@ -3,15 +3,15 @@ import { __ } from '@wordpress/i18n';
 import { useNavigate } from 'react-router-dom';

 // components
-import LatestBandiTable from '../Dashboard/components/LatestBandiTable';
+import LatestBandiTable from './components/LatestBandiTable';
 import MyLatestSubmissionsTable from './components/MyLatestSubmissionsTable';
 import { Button } from 'primereact/button';

-const DashboardBenefeciario = () => {
+const DashboardBeneficiario = () => {
    const navigate = useNavigate();

    const goToAllSubmissions = () => {
-        navigate('/bids/new');
+        navigate('/bids');
    }

    return(
@@ -83,4 +83,4 @@ const DashboardBenefeciario = () => {
    )
 }

-export default DashboardBenefeciario;
+export default DashboardBeneficiario;