:

src/pages/BandoView/index.js

@@ -0,0 +1,97 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { __ } from '@wordpress/i18n';
+import { useParams } from 'react-router-dom';
+import { Skeleton } from 'primereact/skeleton';
+
+// components
+
+const BandoView = () => {
+    const { id } = useParams();
+    const [data, setData] = useState({});
+    const [isLoading, setIsLoading] = useState(true);
+
+    useEffect(() => {
+        const parsed = parseInt(id)
+        const bandoId = !isNaN(parsed) ? parsed : 0;
+
+        setTimeout(() => {
+            const data = {
+                name: 'Bando Innovazione 2024',
+                descriptionShort: 'Supporto alle PMI per progetti di digitalizzazione e innovazione tecnologica.',
+                descriptionLong: 'Il bando "Innovazione Digitale 2024" mira a sostenere le PMI nell\'adozione di tecnologie digitali innovative. I progetti finanziabili includono l\'implementazione di soluzioni di intelligenza artificiale, blockchain, IoT, e altre tecnologie avanzate che possono migliorare la competitività delle imprese.',
+                dates: [ "2024-08-20T22:00:00.000Z", "2024-08-28T22:00:00.000Z" ],
+                amount: 10000000,
+                amountMax: 2000,
+                aimedTo: [
+                    { id: 11, value: 'PMI con sede in Umbria' },
+                    { id: 12, value: 'Almeno 2 anni di attività' },
+                    { id: 15, value: 'Fatturato annuo non superiore a € 50 milioni' }
+                ],
+                documentationRequested: 'Some text',
+                threshold: 12,
+                criteria: [
+                    { id: 15, value: 'Innovatività del progetto', score: 9 },
+                    { id: 16, value: 'Impatto sulla competitività dell\'azienda', score: 3 },
+                    { id: 17, value: 'Sostenibilità economico-finanziaria', score: 5 }
+                ],
+                faq: [
+                    {id: 2, question: 'È possibile presentare più di un progetto?', answer: 'No, ogni azienda può presentare un solo progetto per questo bando.'}
+                ],
+                checklist: [
+                    { id: 9, value: 'Requisiti di ammissibilità soddisfatti' },
+                    { id: 21, value: 'Documentazione completa' }
+                ],
+                docs: [
+                    {id: 12, url: '#', name: 'file_name'}
+                ],
+                images: [
+                    {id: 15, url: '#', name: 'file_name'}
+                ],
+                status: 'draft',
+                id: 11,
+                created: '2024-08-07T00:00:00+00:00'
+            }
+            setData(data);
+            setIsLoading(false)
+        }, 3000);
+    }, [id]);
+
+    return (
+        <div className="appPage">
+            {!isLoading
+                ? <div className="appPage__pageHeader">
+                    <h1>{data.name}</h1>
+                    <p>
+                        {__('Data:', 'gepafin')}
+                        <span>{data.created}</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>
+
+            {!isLoading
+                ? <>
+                    <div className="appPageSection">
+                        Preview beneficiario
+                    </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 BandoView;