- add appl stats;

- added roleId param for reg form;

src/assets/scss/components/statsBigBadges.scss

@@ -25,8 +25,8 @@
     justify-content: space-between;
     padding: 16px;
     border-radius: 6px;
-    border: 1px solid var(--yellow-500);
+    border: 1px solid #858585;
-    background: var(--card-full-background-color-2);
+    background: #cecece;
     align-items: center;
     gap: 48px;
 
@@ -41,27 +41,74 @@
     span:nth-last-of-type(1) {
         font-size: 22px;
     }
+}
+
+.statsBigBadges__grid {
+    .statsBigBadges__gridItem {
+        &:nth-of-type(1) {
+            border: 1px solid var(--yellow-500);
+            background: var(--card-full-background-color-2);
+        }
 
         &:nth-of-type(2) {
             border: 1px solid var(--yellow-500);
             background: var(--card-full-background-color-3);
         }
+
         &:nth-of-type(3) {
             border: 1px solid var(--yellow-500);
             background: var(--card-full-background-color-4);
         }
+
         &:nth-of-type(4) {
             border: 1px solid var(--yellow-500);
             background: var(--card-full-background-color-1);
         }
+
         &:nth-of-type(5) {
             border: 1px solid var(--yellow-500);
             background: var(--card-full-background-color-5);
         }
+
         &:nth-of-type(6) {
             border: 1px solid var(--yellow-500);
             background: var(--card-full-background-color-6);
         }
+    }
+
+    &.applStats {
+        .statsBigBadges__gridItem {
+            &:nth-of-type(1) {
+                border: 1px solid var(--yellow-500);
+                background: var(--card-full-background-color-2);
+            }
+
+            &:nth-of-type(2) {
+                border: 1px solid var(--yellow-500);
+                background: var(--card-full-background-color-3);
+            }
+
+            &:nth-of-type(3) {
+                border: 1px solid var(--yellow-500);
+                background: var(--card-full-background-color-4);
+            }
+
+            &:nth-of-type(4) {
+                border: 1px solid var(--yellow-500);
+                background: var(--card-full-background-color-7);
+            }
+
+            &:nth-of-type(5) {
+                border: 1px solid var(--yellow-500);
+                background: var(--card-full-background-color-8);
+            }
+
+            &:nth-of-type(6) {
+                border: 1px solid var(--yellow-500);
+                background: var(--card-full-background-color-9);
+            }
+        }
+    }
 }
 
 @media (max-width: 820px) {

src/assets/scss/theme.scss

@@ -28,6 +28,9 @@
   --card-full-background-color-1: #54965b;
   --card-full-background-color-5: #4ba190;
   --card-full-background-color-6: #6d68c0;
+  --card-full-background-color-7: #06B6D4;
+  --card-full-background-color-8: #FF3D32;
+  --card-full-background-color-9: #F97316;
 }
 
 @import "./components/layout.scss";

src/pages/Domande/index.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { __ } from '@wordpress/i18n';
-import { isEmpty } from 'ramda';
+import { isEmpty, pathOr } from 'ramda';
 
 // api
 import UserService from '../../service/user-service';
@@ -20,6 +20,8 @@ import { Button } from 'primereact/button';
 import { classNames } from 'primereact/utils';
 import { Dropdown } from 'primereact/dropdown';
 import DraftApplicationsTable from '../Dashboard/components/DraftApplicationsTable';
+import NumberFlow from '@number-flow/react';
+import DashboardService from '../../service/dashboard-service';
 
 const Domande = () => {
     const [loading, setLoading] = useState(false);
@@ -29,6 +31,7 @@ const Domande = () => {
     const [chosenUser, setChosenUser] = useState(0);
     const [chosenApplication, setChosenApplication] = useState(0);
     const [updaterString, setUpdaterString] = useState('');
+    const [mainStats, setMainStats] = useState({});
     const toast = useRef(null);
 
     const getRolesCallback = (data) => {
@@ -123,6 +126,18 @@ const Domande = () => {
         storeSet.main.unsetAsyncRequest();
     }
 
+    const getStatValue = (key, fallback = '') => {
+        return pathOr(fallback, [key], mainStats);
+    }
+
+    const getStats = (data) => {
+        if (data.status === 'SUCCESS') {
+            setMainStats(data.data);
+        }
+    }
+
+    const errGetStats = () => {}
+
     useEffect(() => {
         if (roleIds.length > 0) {
             setLoading(true);
@@ -137,6 +152,10 @@ const Domande = () => {
         }
     }, [isVisibleEditDialog]);
 
+    useEffect(() => {
+        DashboardService.getApplicationsStats(getStats, errGetStats);
+    }, []);
+
     return (
         <div className="appPage">
             <div className="appPage__pageHeader">
@@ -152,6 +171,57 @@ const Domande = () => {
 
             <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('numberOfApplication', 0)}
+                            format={{ notation: 'compact' }}
+                            locales="it-IT"/></span>
+                    </div>
+                    <div className="statsBigBadges__gridItem">
+                        <span>{__('Assegnate', 'gepafin')}</span>
+                        <span><NumberFlow
+                            value={getStatValue('numberOfAssignedApplication', 0)}
+                            format={{ notation: 'compact' }}
+                            locales="it-IT"/></span>
+                    </div>
+                    <div className="statsBigBadges__gridItem">
+                        <span>{__('Completate', 'gepafin')}</span>
+                        <span><NumberFlow
+                            value={getStatValue('numberOfAcceptedApplication', 0)}
+                            format={{ notation: 'compact' }}
+                            locales="it-IT"/></span>
+                    </div>
+                    <div className="statsBigBadges__gridItem">
+                        <span>{__('Tempo medio di valutazione', 'gepafin')}</span>
+                        <span><NumberFlow
+                            value={getStatValue('evaluationAverageTime', 0)}
+                            format={{ notation: 'compact' }}
+                            suffix={` ${__('minuti', 'gepafin')}`}
+                            locales="it-IT"/></span>
+                    </div>
+                    <div className="statsBigBadges__gridItem">
+                        <span>{__('In soccorso istruttorio', 'gepafin')}</span>
+                        <span><NumberFlow
+                            value={getStatValue('numberOfApplicationInAmendmentState', 0)}
+                            format={{ notation: 'compact' }}
+                            locales="it-IT"/></span>
+                    </div>
+                    <div className="statsBigBadges__gridItem">
+                        <span>{__('Domande in scadenza (48h)', 'gepafin')}</span>
+                        <span><NumberFlow
+                            value={getStatValue('numberOfDueApplication', 0)}
+                            format={{ notation: 'compact' }}
+                            locales="en-US"/></span>
+                    </div>
+                </div>
+            </div>
+
+            <div className="appPage__spacer"></div>
+
             <div className="appPageSection">
                 <h2>{__('Domande in bozza', 'gepafin')}</h2>
                 <DraftApplicationsTable/>

src/pages/Registration/index.js

@@ -50,7 +50,8 @@ const Registration = () => {
         const newFormData = {
             ...formData,
             dateOfBirth: originalDateOfBirth,
-            hubUuid: APP_HUB_ID
+            hubUuid: APP_HUB_ID,
+            roleId: 1
         }
 
         AuthenticationService.registerUser(newFormData, regCallback, regError, [

src/service/dashboard-service.js

@@ -8,6 +8,10 @@ export default class DashboardService {
         NetworkService.get(`${API_BASE_URL}/dashboard`, callback, errCallback);
     };
 
+    static getApplicationsStats = (callback, errCallback) => {
+        NetworkService.get(`${API_BASE_URL}/dashboard/application`, callback, errCallback);
+    };
+
     static getBeneficiaryStatsForCompany = (id, callback, errCallback) => {
         NetworkService.get(`${API_BASE_URL}/dashboard/beneficiary/company/${id}`, callback, errCallback);
     };