i18n/locales/fr.json

 {
 	"accueil": "Accueil",
+	"actuellement": {
+		"debut": "Il y a actuellement",
+		"fin": "membres dans la toile de confiance"
+	},
 	"adhesion": {
 		"desc": "Inscription dans la toile de confiance. L'adhésion est valable un an et doit être renouvelée si on souhaite continuer à co-produire son Dividende Universel",
 		"title": "Adhésion"
 	},
+	"alert": {
+		"attenteCertifiers": "En attente des certificateurs",
+		"attention": "Attention",
+		"certStockLim": "Ce compte n'a plus que <b>{n} certification</b> en stock. | Ce compte n'a plus que <b>{n} certifications</b> en stock.",
+		"certifManquantes": "Il manque <b>{n} certification</b> à ce compte pour devenir membre. | Il manque <b>{n} certifications</b> à ce compte pour devenir membre.",
+		"certifManquantesBientot": "Ce compte va bientôt <b>manquer de certifications</b>.",
+		"distKO": "Ce compte ne respecte pas <b>la règle de distance</b>.",
+		"dossierKOtitle": "Dossier incomplet",
+		"dossierOK": "Le dossier de ce compte est <b>complet</b> et sera <b>bientôt membre</b>.",
+		"dossierOKtitle": "Dossier complet",
+		"information": "Information",
+		"missing": "Ce compte a perdu son adhésion. Il lui reste <b>{n} jour</b> pour refaire une demande d'adhésion avant la révocation automatique. | Ce compte a perdu son adhésion. Il lui reste <b>{n} jours</b> pour refaire une demande d'adhésion avant la révocation automatique.",
+		"noMoreCert": "Ce compte n'a <b>plus de certifications</b> en stock.",
+		"notAllCertifiersDispo": "Un ou plusieurs certificateurs ne sont <b>pas disponibles</b>.",
+		"notAvailable": "Ce membre n'est <b>pas disponible</b> pour certifier.",
+		"renew": "Ce compte doit <b>renouveler son adhésion</b>.",
+		"revoked": "Ce compte est <b>révoqué</b> et ne peut plus devenir membre."
+	},
+	"apropos": {
+		"alert": "Les données affichées par l'application sont issues d'un <a href='https://git.duniter.org/gerard94/WotWizard' target='_blank' class='alert-link'>serveur Wotwizard utilisant la technologie graphQL</a> et dépendent du noeud Duniter interrogé. C'est pourquoi les données qui ne sont pas encore inscrites en blockchain peuvent différer d'une application à une autre.",
+		"bienvenue": "Bienvenue dans Wotwizard !",
+		"contribuer": "Le code source de l'application se trouve sur <a href=\"https://git.duniter.org/clients/wotwizard-ui\" target=\"_blank\">notre serveur Gitlab</a>. N'hésitez pas à y remonter les bugs ou les propositions d'amélioration dans <a href=\"https://git.duniter.org/clients/wotwizard-ui/-/issues\" target=\"_blank\">la section <b>Tickets</b></a>.",
+		"deploiement": "Déploiement :",
+		"desc": "Cet outil vous permet de suivre les entrées et les sorties de la toile de confiance de la monnaie libre Ğ1 et est le fruit d'une collaboration entre différents développeurs et utilisateurs de la monnaie. N'hésitez pas à les remercier en faisant un don sur la clé publique suivante:",
+		"developpeurs": "Développeurs :",
+		"graphql": "API grahQL",
+		"participants": "Liste des participants au projet :",
+		"testeurs": "Testeurs :",
+		"title": "À propos",
+		"traducteurs": "Traducteurs :"
+	},
+	"aria": {
+		"ariane": "Fil d'ariane",
+		"clipboard": "Copier dans le presse-papier",
+		"close": "Fermer",
+		"closemenu": "Fermer le menu",
+		"openmenu": "Ouvrir le menu",
+		"scrolltotop": "Retour en haut",
+		"themedark": "Basculer sur le thème foncé",
+		"themelight": "Basculer sur le thème clair"
+	},
 	"aurevoir": "Au revoir à",
 	"bienvenue": "Bienvenue à",
 	"bloc": {
@@ -19,8 +64,13 @@
 		"title": "Centralité"
 	},
 	"certification": {
+		"afficher": "Afficher les certifications",
 		"desc": "Lien de reconnaissance entre un individu et un autre enregistré dans la blockchain. Une certification est valable 2 ans",
+		"enattente": "En attente de traitement",
+		"encours": "En cours de validité",
 		"envoyees": "Certifications envoyées",
+		"masquer": "Masquer les certifications",
+		"perimees": "A renouveler",
 		"recues": "Certifications reçues ",
 		"title": "Certification"
 	},
@@ -46,6 +96,7 @@
 		}
 	},
 	"copie": "Copiée",
+	"date": "Date",
 	"description": "Description",
 	"dev": "En Développement",
 	"dividende": {
@@ -61,49 +112,67 @@
 		"desc": "Logiciel de crypto-monnaie utilisant une blockchain, conforme à la Théorie Relative de la Monnaie (TRM) et utilisant la toile de confiance pour l'identification des membres co-producteurs de la monnaie",
 		"title": "Duniter"
 	},
-	"expire": "Expire le",
-	"favoris": {
-		"enregistre": "Enregistré dans les favoris&nbsp;!",
-		"none": "Vous n'avez pas encore de favoris",
-		"supprime": "Supprimé des favoris&nbsp;!",
-		"title": "Mes favoris"
+	"expire": "Expiration",
+	"filter": {
+		"certif": "Filtrer en fonction du statut de la certification",
+		"statut": "Filtrer par statut du membre"
 	},
-	"futuremembers": "Futurs membres",
-	"futureexits": "Futures sorties",
 	"infos": "Informations",
 	"inout": "Entrées et sorties de la toile de confiance des 2 derniers jours",
 	"inpreparation": "En préparation",
-	"jours": "0 jours | 1 jour | {n} jours",
+	"jours": "1 jour | {n} jours",
+	"jours_avant": "< 24h | il y a {n} jours",
+	"lang": "Choisissez votre langue",
 	"lexique": "Lexique",
 	"membre": {
 		"calculant": {
 			"desc": "Membre utilisant sa clé privée pour forger des blocs grâce à Duniter installé sur un noeud accessible sur le réseau Internet",
 			"title": "Membre calculant"
 		},
-		"datelimadhesion": "Date limite d'adhésion",
-		"datelimpertestatut": "Perte du statut de membre",
-		"datelimrevoc": "Date limite avant révocation ",
-		"datemanquecertifs": "Date avant de manquer de certifs",
+		"datelimadhesion": {
+			"desc": "Date avant laquelle le compte perdra son statut de membre si il n'y a pas eu de demande de renouvellement effectuée",
+			"title": "Date limite d'adhésion"
+		},
+		"datelimpertestatut": "Perte d'adhesion",
+		"datelimrevoc": {
+			"desc": "Date avant laquelle le compte sera automatiquement révoqué si il n'y a pas eu de demande de renouvellement",
+			"title": "Date limite avant révocation"
+		},
+		"datemanquecertifs": {
+			"desc": "Date à laquelle le compte va manquer de certifications",
+			"title": "Manque de certifications"
+		},
 		"desc": "Individu dont l'adhésion est en cours et ayant reçu les 5 certifications nécessaires lui permettant de respecter la règle de distance. Ce qui lui permet d'être co-créateur de la monnaie via son Dividende Universel",
 		"dispo": "Disponible",
-		"dispocertif": "Disponible pour certifier",
+		"dispocertif": {
+			"desc": "Un membre ne peut émettre une certification que 5 jours après que la dernière ait été traitée. N'envoyez qu'une seule certification à la fois pour faciliter l'entrée des nouveaux membres",
+			"title": "Disponible pour certifier"
+		},
+		"disponibilite": "Disponibilité",
 		"distance": {
-			"desc": "% des membres référents atteignables en 5 sauts ou moins dans la toile de confiance. Pour devenir membre, il faut récolter au minimum 5 certifications permettant de rejoindre 80% des membres référents en 5 sauts max",
+			"desc": "% des membres référents atteignables en 5 pas maximum dans la toile de confiance. Pour devenir membre, la règle de distance implique que ce taux doit être supérieur ou égal à 80%",
 			"title": "Distance"
 		},
-		"nb_certifs": "Nbre de certifs disponibles",
+		"nb_certifs": {
+			"desc": "Chaque membre dispose d'un stock de 100 certifications en cours de validité",
+			"title": "Nbre de certifs disponibles"
+		},
 		"nodispo": "Indisponible",
 		"qualite": {
-			"desc": "% des membres référents atteignables en 4 sauts ou moins dans la toile de confiance. Un membre dont la qualité est supérieure à 80% pourra assurer que ses certifiés respecteront la règle de distance",
+			"desc": "% des membres référents atteignables en 4 pas maximum dans la toile de confiance. Un membre dont la qualité est supérieure à 80% pourra assurer que ses certifiés respecteront la règle de distance",
 			"title": "Qualité"
 		},
 		"referent": {
-			"desc": "Membre ayant émis ET reçu un certain nombre de certifications, variable en fonction du nombre de membres total. Ce statut n'offre pas d'avantages mais permet la sécurisation de la toile de confiance notammen grâce à la règle de distance",
+			"desc": "Membre ayant émis ET reçu <code>ARRONDI_SUP(N<sup>(1/stepMax)</sup>)</code> certifications, N étant le nombre de membres total. Ce statut n'offre pas d'avantages mais permet la sécurisation de la toile de confiance notamment grâce à la règle de distance",
 			"title": "Membre référent"
 		},
-		"title": "Membre"
+		"title": "Membre",
+		"voirinfos": "Voir les informations du membre"
 	},
 	"membres": "Membres",
+	"meta": {
+		"description": "Vérifiez les entrées et les sorties de la toile de confiance de la monnaie libre Ğ1"
+	},
 	"mot": "Mot ou expression",
 	"noeud": {
 		"desc": "Ordinateur utilisant le logiciel Duniter pour participer à la chaîne de blocs. Un noeud membre peut créer des nouveaux blocs et est mis à disposition par un membre calculant alors qu'un noeud non-membre ne peut pas créer de nouveaux blocs et participe à la résilience du réseau",
@@ -142,7 +211,7 @@
 		"title": "Paramètres de la blockchain"
 	},
 	"piscine": {
-		"desc": "Ensemble de données stockées par les nœuds et en attente de validation du dossier avant écriture dans un bloc. Si les données restent incomplètes ou sont invalides, elles finissent par être oubliées",
+		"desc": "Ensemble de données stockées par les noeuds et en attente de validation du dossier avant écriture dans un bloc. Si les données restent incomplètes ou sont invalides, elles finissent par être oubliées",
 		"title": "Piscine"
 	},
 	"pow": {
@@ -150,17 +219,23 @@
 		"title": "Preuve de travail"
 	},
 	"previsions": {
+		"futureentries": "Futures entrées",
+		"futureexits": "Futures sorties",
 		"pardate": "Prévisions par date",
 		"parmembre": "Prévisions par membres",
 		"period": {
-			"title": "Période de recherche",
-			"desc": "Sélectionnez le nombre de jours souhaités"
+			"desc": "Sélectionnez le nombre de jours souhaités",
+			"title": "Période de recherche"
 		},
 		"title": "Prévisions"
 	},
 	"pubkey": "Clef publique",
 	"recherche": {
-		"desc": "Saisissez le début d'un pseudo ou d'une clé publique",
+		"desc": {
+			"lexicon": "Recherchez dans le lexique",
+			"member": "Saisissez le début d'un pseudo ou d'une clé publique"
+		},
+		"effacer": "Effacer la recherche",
 		"title": "Votre recherche"
 	},
 	"revocation": {
@@ -170,19 +245,51 @@
 	"revoila": "Les revoilà",
 	"slogan": "Le magicien de la Toile de Confiance",
 	"statut": {
+		"allcertif": "5 certifications reçues",
 		"bientotmanquecertif": "Bientôt en manque de certifications",
 		"manquecertif": "En manque de certifications",
 		"member": "Membre",
 		"missing": "Adhésion perdue",
 		"newcomer": "Futur membre",
 		"renew": "Adhésion à renouveler",
-		"revoked": "Membre révoqué"
+		"revoked": "Membre révoqué",
+		"title": "Statut"
+	},
+	"suivis": {
+		"ajouter": "Ajouter aux favoris",
+		"alert": {
+			"btn": "Rechercher votre identité",
+			"desc": "Veuillez indiquer un membre comme étant votre identité en cliquant sur le bouton « Je suis ce membre »",
+			"title": "Vous n'êtes pas encore enregistré"
+		},
+		"confirm": "Êtes-vous sûr ?",
+		"display": {
+			"all": "Voir tout",
+			"out": "Voir uniquement les profils à surveiller"
+		},
+		"enregistre": "Enregistré dans les favoris&nbsp;!",
+		"enregistre_uid": "Sauvegarder",
+		"iam": "Je suis ce membre",
+		"iamnot": "Je ne suis pas ce membre",
+		"none": "La liste est vide",
+		"supprime": "Supprimé des favoris&nbsp;!",
+		"supprimer": "Supprimer des favoris",
+		"supprimer_tous": "Supprimer tous les favoris",
+		"tabs": {
+			"certificateurs": "Mes certificateurs",
+			"certifies": "Mes certifiés",
+			"favoris": "Mes favoris"
+		},
+		"title": "Mes suivis",
+		"use": "Mes favoris uniquement",
+		"voir_profil": "Voir mon profil"
 	},
 	"time": {
 		"a": "à"
 	},
 	"traitement": "En cours de traitement",
 	"tri": {
+		"action": "Trier par",
 		"pardate": "Tri par date",
 		"parmembres": "Tri par membres"
 	},
@@ -194,7 +301,10 @@
 	"uid": "Identifiant unique",
 	"valeur": "Valeur",
 	"wot": {
-		"desc": "Ensemble des membres et des certifications qui les relient entre eux",
+		"desc": "Ensemble des membres et des certifications qui les relient entre eux (<a href='https://www.youtube.com/watch?v=8GaTKfa-ADU' target='_blank'>en savoir plus</a>)",
 		"title": "Toile de confiance"
+	},
+	"wotwizard": {
+		"nodeselect": "Sélectionnez un serveur"
 	}
 }

i18n/locales/it.json

+{
+	"accueil": "Pagina principale",
+	"actuellement": {
+		"debut": "Attualmente ci sono",
+		"fin": "membri nella rete di fiducia"
+	},
+	"adhesion": {
+		"desc": "Registro nella rete di fiducia. La sottoscrizione è valida per un anno e deve essere rinnovata se si vuole continuare a cocreare il proprio Dividendo Universale",
+		"title": "Sottoscrizione"
+	},
+	"alert": {
+		"attenteCertifiers": "Aspettando certificatori",
+		"attention": "Attenzione",
+		"certStockLim": "Questo conto ha solo <b>{n} certificazione</b> in stock. | Questo conto ha solo <b>{n} certificazioni</b> in stock.",
+		"certifManquantes": "A questo conto manca <b>{n} certificazione</b> per convertirsi in membro. | A questo conto manca <b>{n} certificazioni</b> per convertirsi in membro.",
+		"certifManquantesBientot": "Questo conto presto <b>rimarrà senza certificazioni</b>.",
+		"distKO": "Questo conto non supera la <b>regola della distanza</b>.",
+		"dossierKOtitle": "Dossier incompleto",
+		"dossierOK": "Il dossier di questo conto è <b>completo</b> e <b>presto sarà membro</b>.",
+		"dossierOKtitle": "Dossier completo",
+		"information": "Informazione",
+		"missing": "L'identità associata a questo conto non fa più parte della Rete di Fiducia. Hai <b>{n} giorni </b> per richiedere nuovamente l'adesione prima della revoca automatica. | L'identità associata a questo conto non fa più parte della Rete di Fiducia. Hai <b>{n} giorni </b> per richiedere nuovamente l'adesione prima della revoca automatica.",
+		"noMoreCert": "Questo conto membro <b>non ha più certificazioni attive</b> in stock.",
+		"notAllCertifiersDispo": "Uno o più certificatori <b>non sono disponibili</>.",
+		"notAvailable": "Questo membro <b>non è disponibile</b> per certificare.",
+		"renew": "Questo conto deve <b>rinnovare l'adesione</b> alla Rete di Fiducia.",
+		"revoked": "Questo conto è stato <b>revocato</b> e non può più essere convertito in conto membro."
+	},
+	"apropos": {
+		"alert": "I dati mostrati dall'applicazione provengono da <a href='https://git.duniter.org/gerard94/WotWizard' target='_blank' class='alert-link'>un server Wotwizard con tecnologia graphQL</a> e dipendono dal nodo Duniter consultato. Questa è la ragione per cui i dati che non sono ancora stati scritti nella blockchain possono cambiare da una applicazione all'altra.",
+		"bienvenue": "Benvenuto a Wotwizard!",
+		"contribuer": "Il codice sorgente dell'applicazione si trova in <a href=\"https://git.duniter.org/clients/wotwizard-ui\" target=\"_blank\">nuestro servidor Gitlab</a>. Non esitare a reportare errori o suggerimenti di miglioramenti a <a href=\"https://git.duniter.org/clients/wotwizard-ui/-/issues\" target=\"_blank\">nella sezione dei <b>Tickets</b></a>.",
+		"deploiement": "Dispiegamento:",
+		"desc": "Questo strumento ti permette realizzare un tracciamento degli ingressi e uscite dalla Rete di Fiducia della moneta libera Ğ1 ed è il risultato di una collaborazione tra vari sviluppatori e utenti della moneta. Non esitare a ringraziargli facendo una donazione alla seguente chiave pubblica:",
+		"developpeurs": "Sviluppatori:",
+		"graphql": "GrahQL API",
+		"participants": "Lista di partecipanti al progetto:",
+		"testeurs": "Betatester:",
+		"title": "A proposito",
+		"traducteurs": "Traduttori:"
+	},
+	"aria": {
+		"ariane": "Filo d'Arianna",
+		"clipboard": "Copiare",
+		"close": "Chiudere",
+		"closemenu": "Chiudere menú",
+		"openmenu": "Menú aperto",
+		"scrolltotop": "Tornare su",
+		"themedark": "Passare a tema scuro",
+		"themelight": "Passare a tema chiaro"
+	},
+	"aurevoir": "Escono",
+	"bienvenue": "Entrano",
+	"bloc": {
+		"desc": "Archivio che contiene le transazioni inalterabili (creazione di moneta, bonifici e certificazioni nel caso di Duniter) che fanno parte della blockchain.",
+		"title": "Blocco"
+	},
+	"blockchain": {
+		"desc": "Insieme di blocchi calcolati per i nodi membri della rete di Duniter.",
+		"title": "Blockchain"
+	},
+	"centralite": {
+		"desc": "Numero di volte che il membro sta nel cammino più corto tra gli altri due membri della Rete di Fiducia. Il cammino è la catena o successione di certificazioni tra i membri. La centralità, perciò, permette conoscere l'importanza e influsso di un membro nella Rete di Fiducia.",
+		"title": "Centralità"
+	},
+	"certification": {
+		"afficher": "Per mostrare le certificazioni",
+		"desc": "Vincolo di riconoscimento tra un individuo e un altro registrato nella blockchain. Una certificazione è valida per 2 anni.",
+		"enattente": "Apettando convalida",
+		"encours": "Attualmente valido",
+		"envoyees": "Certificazioni inviate",
+		"masquer": "Nascondere certificazioni",
+		"perimees": "Rinnovare",
+		"recues": "Certificazioni ricevute",
+		"title": "Certificazioni"
+	},
+	"chargement": "Caricando",
+	"cle": {
+		"privee": {
+			"desc": "Chiave segreta usata per firmare documenti (realizzare una transazione, inviare una certificazione, etc.). Si calcola dalla combinazione di frase segreta/password, e si vincola matematicamente alla chiave pubblica.",
+			"title": "Chiave privata"
+		},
+		"publique": {
+			"desc": "Equivalente al numero di conto (indipendentemente che sia di tipo membro o semplice). È ciò che si comunica per ricevere pagamenti o per essere certificati. Si calcola dalla combinazione di frase segreta/password.",
+			"title": "Chiave pubblica"
+		}
+	},
+	"compte": {
+		"membre": {
+			"desc": "Conto certificato collegato ad una identità di membro. Solo un conto membro per ogni identità può cocreare moneta attraverso il Dividendo Universale e forgiare blocchi nella blockchain per mezzo del software Duniter.",
+			"title": "Conto membro"
+		},
+		"portefeuille": {
+			"desc": "Conto associato a una chiave pubblica non collegata ad una identità di membro. Ovvero, non fa parte della Rete di Fiducia e non cocrea il Dividendo Universale. Può trattarsi di una incorporazione recente que desidera convertire più tardi il suo conto in un conto membro o per soddisfare le necessità personali, associative, di gestione impresiariale, etc.",
+			"title": "Conto semplice"
+		}
+	},
+	"copie": "Copia",
+	"date": "Data",
+	"description": "Descrizione",
+	"dev": "In sviluppo",
+	"dividende": {
+		"desc": "Quantità di moneta cocreada da tutti i mimbri della Rete di Fiducia calcolata per rispettare la simmetria spaziale e temporale. La sua formula annuale teorica semplificata è: DU = c × M/N dove c è la tassa di crescita annuale (10%), M la massa monetaria e N il numero di membri.",
+		"title": "Dividendo Universale"
+	},
+	"dossier": {
+		"attente": "Non ci sono candidature pendenti | 1 candidatura pendente | {n} candidature pendenti",
+		"desc": "Adesione alla Rete di Fiducia in tramite. La candidatura è un insieme di documenti che permettono a Duniter determinare se un nuovo membro rispetta tutte le regole della Rete di Fiducia.",
+		"title": "Candidatura"
+	},
+	"duniter": {
+		"desc": "Software di criptomonete que usa una catena di blocchi (blockchain), che compie con la Teoria Relativa della Moneta (TRM) e utilizza la Rete di Fiducia per l'identificazione dei membri cocreatori della moneta.",
+		"title": "Duniter"
+	},
+	"expire": "Scadenza",
+	"filter": {
+		"certif": "Filtra per stato di certificazione",
+		"statut": "Filtra per stato membro"
+	},
+	"infos": "Informacioni",
+	"inout": "Entrate e uscite dalla Rete di Fiducia negli ultimi 2 giorni",
+	"inpreparation": "In preparazione",
+	"jours": "1 giorno | {n} giorni",
+	"jours_avant": "< 24h | ci sono {n} giorni",
+	"lang": "Scegli la tua lingua",
+	"lexique": "Lessico",
+	"membre": {
+		"calculant": {
+			"desc": "Membro che usa la sua chiave privada per forgiare blocchi grazie ad un nodo Duniter accessibile su Internet.",
+			"title": "Membro forgiadore"
+		},
+		"datelimadhesion": {
+			"desc": "Data prima della quale il conto perderà l'adesione alla Rete di Fiducia se nel frattempo non si sarà sollecitato il rinnovo.",
+			"title": "Data limite di adesione alla RdF"
+		},
+		"datelimpertestatut": "Perdita dell'adesione alla RdF",
+		"datelimrevoc": {
+			"desc": "Data limite prima della quale si revocherà automaticamente il conto se non si avrà sollecitato il rinnovo.",
+			"title": "Data limite di autorevoca"
+		},
+		"datemanquecertifs": {
+			"desc": "Data in cui il contro rimarrà senza certificazioni",
+			"title": "Mancanza di certificazioni"
+		},
+		"desc": "Individuo la cui candidatura è in corso e che ha ricevuto le 5 certificazioni necessarie e che gli permettano rispettare la regola della distanza. Cosa che gli permetterà diventare cocreatore della moneta per mezzo del suo Dividendo Universale.",
+		"dispo": "Disponibile",
+		"dispocertif": {
+			"desc": "Un membro può emettere una certificazione dopo 5 giorni che l'ultima certificazione è stata processata. Invii solo una certificazione per volta per facilitare l'ingresso di nuovi membri.",
+			"title": "Disponibile per certificare"
+		},
+		"disponibilite": "Disponibilità",
+		"distance": {
+			"desc": "% di membri referenti accessibili in 5 passi o meno nella Rete di Fiducia. Per convertirsi in membro, questa percentuale deve essere maggiore o uguale all'80%.",
+			"title": "Distanza"
+		},
+		"nb_certifs": {
+			"desc": "Ogni membro ha uno stock di 100 certificazioni valide.",
+			"title": "Numero di certificazioni disponibili"
+		},
+		"nodispo": "Non disponibile",
+		"qualite": {
+			"desc": "% di membri referenti accesibili in 4 salti o meno nella Rete di Fiducia. Un membro la cui qualità sia superiore al 80% potrá assicurarsi che i candidati membro da lui certificati rispettaranno la regola della distanza",
+			"title": "Qualità del collegamento"
+		},
+		"referent": {
+			"desc": "Membro che abbia emesso E ricevuto <code>CEIL(N<sup>(1/stepMax)</sup>)</code> certificazioni, con N pari al numero totale dei membri. Questo status non offre nessun vantaggio o privilegio personale pero permette la sicurezza della Rete di Fiducia in particolare grazie alla regola della distanza.",
+			"title": "Membro referente"
+		},
+		"title": "Membro",
+		"voirinfos": "Vedere informazione dei membri"
+	},
+	"membres": "Membri",
+	"meta": {
+		"description": "Controlla gli ingressi e le uscite della rete di fiducia della valuta libera Ğ1"
+	},
+	"mot": "Parola o espressione",
+	"noeud": {
+		"desc": "Computer che esegue il software Duniter per partecipare nella blockchain. Un nodo membro può forgiare nuovi blocchi y metterli a disposizione della rete, mentre un nodo non membro (specchio) non uede forgiare nuovi blocchi però partecipa nella resilienza della rete.",
+		"title": "Nodo"
+	},
+	"nom": "Nome",
+	"non": "No",
+	"oui": "Sí",
+	"params": {
+		"breadcrumb": "Parametri",
+		"name": {
+			"avgGenTime": "Tempo medio per forgiare un blocco (tempo sperato)",
+			"c": "La crescita relativa del DU nel periodo <code>dtReeval</code>",
+			"dt": "Período di tempo tra due DU",
+			"dtDiffEval": "Numero di blocchi richiesti per rivalutare il valore di PoWMin",
+			"dtReeval": "Período di tempo tra due rivalutazioni del DU",
+			"idtyWindow": "Tempo massimo di attesa che una identidad può aspettare prima della cessazione per inattività",
+			"medianTimeBlocks": "Numero di blocchi usato per calcolare la media del tempo",
+			"msPeriod": "Ritardo minimo tra 2 certificazioni dello stesso emissore",
+			"msValidity": "Età massima di un'adesione attiva",
+			"msWindow": "Attesa massima che un'adesione può aspettare prima della cessazione per inattività",
+			"percentRot": "La proporzione di membri presi in considerazione nel calcolo per la prova di lavoro",
+			"sigPeriod": "Ritardo minimo tra due certificazioni da parte dello stesso membro certifica",
+			"sigQty": "Numero minimo di certificazioni per far parte della Rete di Fiducia",
+			"sigReplay": "Ritardo minimo tra la ripetizione di una certificazione",
+			"sigStock": "Numero massimo di certificazioni attive rilasciate da un membro",
+			"sigValidity": "Età massima di una certificazione attiva",
+			"sigWindow": "Ritardo massimo prima della scadenza di una certificazione se non diventa attiva",
+			"stepMax": "Distanza massima tra un membro della RdF e il <code>xpercent</code> dei punti di controllo",
+			"txWindow": "Ritardo massimo prima della scadenza di una transazione a causa della mancata scrittura",
+			"ud0": "DU(0), i.e. il Dividendo Universale iniziale",
+			"udReevalTime0": "Momento della prima rivalutazione del DU",
+			"udTime0": "Momento del primo DU",
+			"xpercent": "Percentuale minima di punti di controllo da raggiungere per superare la regola della distanza"
+		},
+		"title": "Parametri della blockchain"
+	},
+	"piscine": {
+		"desc": "Insieme di dati archiviati dai nodi e in attesa di convalida prima di essere scritti su un blocco. Se i dati sono incompleti o non validi, vengono eliminati",
+		"title": "Piscina(pool)"
+	},
+	"pow": {
+		"desc": "Risolvere un complesso problema matematico da un computer che gli consente di garantire l'autenticità dei dati che offre a una blockchain",
+		"title": "Prova di lavoro"
+	},
+	"previsions": {
+		"futureentries": "Future entrate",
+		"futureexits": "Future uscite",
+		"pardate": "Previsioni per data",
+		"parmembre": "Previsioni per membri",
+		"period": {
+			"desc": "Selezioni le date",
+			"title": "Periodo di ricerca"
+		},
+		"title": "Pronostici"
+	},
+	"pubkey": "Chiave pubblica",
+	"recherche": {
+		"desc": {
+			"lexicon": "Cerca nel lessico",
+			"member": "Introduci l'inizio di uno pseudonimo o chiave pubblica"
+		},
+		"effacer": "Pulisci la tua ricerca",
+		"title": "Cercare"
+	},
+	"revocation": {
+		"desc": "Abbandono volontario o meno di un conto membro. La revoca può essere volontaria attraverso la pratica di revoca o involontaria per mancanza di certificazioni o mancato rinnovo dell'iscrizione. La revoca non distrugge il denaro che è nel conto del membro ma disattiva la co-creazione del Dividendo Universale",
+		"title": "Revoca"
+	},
+	"revoila": "Ritornano",
+	"slogan": "Il mago della Rete di Fiducia",
+	"statut": {
+		"allcertif": "5 certificazioni ricevute",
+		"bientotmanquecertif": "Avrà bisogno di certificazioni",
+		"manquecertif": "Mancano certificazioni",
+		"member": "Membro",
+		"missing": "Adesione alla RdF persa",
+		"newcomer": "Futuro membro",
+		"renew": "Adesione alla RdF da rinnovare",
+		"revoked": "Adesione alla RdF revocata",
+		"title": "Stado"
+	},
+	"suivis": {
+		"ajouter": "Aggiungere ai favoriti",
+		"alert": {
+			"btn": "Trova la tua identità",
+			"desc": "Indica un membro come tua identità facendo clic sul pulsante « Sono questo membro »",
+			"title": "Non sei ancora registrato"
+		},
+		"confirm": "Sei sicuro ?",
+		"display": {
+			"all": "Vedi tutto",
+			"out": "Vedi solo i profili da monitorare"
+		},
+		"enregistre": "Salvato nei favoriti!",
+		"enregistre_uid": "Salvaguardare",
+		"iam": "Sono questo membro",
+		"iamnot": "Non sono questo membro",
+		"none": "L'elenco è vuoto",
+		"supprime": "¡Eliminato dai favoriti!",
+		"supprimer": "Eliminare dai favoriti",
+		"supprimer_tous": "Elimina tutti i favoriti",
+		"tabs": {
+			"certificateurs": "I mei certificatori",
+			"certifies": "I miei membri certificati",
+			"favoris": "I mei favoriti"
+		},
+		"title": "I miei follow-up",
+		"use": "Solo i miei favoriti",
+		"voir_profil": "Guarda il mio profilo"
+	},
+	"time": {
+		"a": "a"
+	},
+	"traitement": "Processo in corso",
+	"tri": {
+		"action": "Ordinare per",
+		"pardate": "Ordinare per data",
+		"parmembres": "Ordinare per membri"
+	},
+	"trm": {
+		"desc": "Teoria che dimostra che una moneta libera con una proprietà di invarianza è possibile e che la soluzione a questo problema è unica: una moneta è libera se e solo se è cocreata equamente nello spazio e nel tempo da tutti i suoi membri",
+		"title": "Teoría relativa della moneta (TRM)"
+	},
+	"type": "Tipo",
+	"uid": "Identificatore unico",
+	"valeur": "Valore",
+	"wot": {
+		"desc": "Insieme di esseri umani riconosciuti come tali dai loro coetanei, compresi i collegamenti che li uniscono attraverso le certificazioni (Web of Trust in inglese WOT)",
+		"title": "Rete Di Fiducia(RdF)"
+	},
+	"wotwizard": {
+		"nodeselect": "Seleziona un server"
+	}
+}

jsconfig.json

 {
+	"vueCompilerOptions": {
+		"target": 2
+	},
 	"compilerOptions": {
 		"baseUrl": ".",
 		"paths": {

layouts/default.vue

 <template>
-	<div class="app">
+	<div class="app pb-3">
 		<NavigationBar :breadcrumb="breadcrumb" :menus="menus" />
 		<Nuxt />
+		<a
+			class="scrollToTop fade bg-secondary position-fixed text-white d-flex align-items-center justify-content-center rounded"
+			:title="$t('aria.scrolltotop')"
+			href="#"
+			@click="scrollToTop($event)">
+			<solid-chevron-double-up-icon class="icon" aria-hidden="true" />
+		</a>
 	</div>
 </template>
 
 <script>
 export default {
+	head() {
+		return {
+			title: "Wotwizard",
+			meta: [
+				{
+					hid: "description",
+					name: "description",
+					content: this.$i18n.t("meta.description")
+				},
+				{
+					hid: "ogType",
+					property: "og:type",
+					content: "website"
+				},
+				{
+					hid: "ogTitle",
+					property: "og:title",
+					content: "Wotwizard"
+				},
+				{
+					hid: "ogDescription",
+					property: "og:description",
+					content: this.$i18n.t("meta.description")
+				},
+				{
+					hid: "ogImage",
+					property: "og:image",
+					content: "https://wotwizard.axiom-team.fr/icon.png"
+				},
+				{
+					hid: "twitterTitle",
+					name: "twitter:title",
+					content: "Wotwizard"
+				},
+				{
+					hid: "twitterDescription",
+					name: "twitter:description",
+					content: this.$i18n.t("meta.description")
+				},
+				{
+					hid: "twitterImage",
+					name: "twitter:image",
+					content: "https://wotwizard.axiom-team.fr/icon.png"
+				}
+			]
+		}
+	},
 	data() {
 		return {
 			breadcrumb: [],
 			// Les title correspondent aux chaînes de traduction dans /i18n/locales
+			// Les icônes disponibles sont ici : https://vue-hero-icons.netlify.app/
 			menus: [
 				{
 					title: "wot.title",
 					items: [
-						{ path: "/membres", title: "membres" },
-						{ path: "/favoris", title: "favoris.title" }
+						{ path: "/membres", title: "membres", icon: "search" },
+						{ path: "/mes-suivis", title: "suivis.title", icon: "user-group" }
 					]
 				},
 				{
 					title: "previsions.title",
 					items: [
-						{ path: "/previsions", title: "futuremembers" },
-						{ path: "/previsions/futures_sorties", title: "futureexits" },
+						{
+							path: "/previsions/futures_entrees",
+							title: "previsions.futureentries",
+							icon: "login"
+						},
+						{
+							path: "/previsions/futures_sorties",
+							title: "previsions.futureexits",
+							icon: "logout"
+						}
 					]
 				},
 				{
 					title: "infos",
 					items: [
-						{ path: "/lexique", title: "lexique" },
-						{ path: "/parametres", title: "params.title" }
+						{
+							path: "/lexique",
+							title: "lexique",
+							icon: "question-mark-circle"
+						},
+						{ path: "/parametres", title: "params.title", icon: "adjustments" }
 					]
 				}
 			]
 		}
 	},
+	methods: {
+		scrollToTop(e) {
+			window.scrollTo({ top: 0, behavior: "smooth" })
+			e.preventDefault()
+		}
+	},
+	beforeMount() {
+		window.addEventListener("scroll", function (e) {
+			let scrollClassList = document.querySelector(".scrollToTop").classList
+			let visible = scrollClassList.contains("show")
+			if (!visible && window.scrollY > 250) {
+				scrollClassList.add("show")
+			} else if (visible && window.scrollY <= 250) {
+				scrollClassList.remove("show")
+			}
+		})
+	},
 	created() {
 		this.$nuxt.$on("changeRoute", (breadcrumb) => {
 			this.breadcrumb = breadcrumb
 		})
+	},
+	watch: {
+		$route(to, from) {
+			let tooltips = document.querySelectorAll(".tooltip.show")
+			tooltips.forEach((tooltip) => {
+				tooltip.classList.remove("show")
+			})
+		}
 	}
 }
 </script>
@@ -47,32 +139,44 @@ export default {
 <style lang="scss">
 /* Define styles for the default root window element */
 :root {
-	--text-primary-color: var(--dark);
-	--text-secondary-color: #8a8a8a;
-	--background-color-primary: var(--white);
-	--background-color-secondary: #e9ecef;
-	--element-size: 4rem;
-	--menu-size: 320px;
+	--txt-primary-color: #000;
+	--txt-secondary-color: #435770;
+	--txt-muted-color: #5b728e;
+	--txt-link: #6e7881;
+	--bg-primary-color: #e9ecef;
+	--bg-secondary-color: #dee2e6;
+	--bg-menu-color: #ced4da;
+	--border-color: #d8d8d8;
 }
 
 /* Define styles for the root window with dark - mode preference */
 :root.dark-theme {
-	--text-primary-color: var(--white);
-	--text-secondary-color: #c9c9c9;
-	--background-color-primary: var(--dark);
-	--background-color-secondary: hsl(210, 16%, 60%);
+	--txt-primary-color: #fff;
+	--txt-secondary-color: #c4cbd3;
+	--txt-muted-color: #9fa2a4;
+	--txt-link: #75828d;
+	--bg-primary-color: #111828;
+	--bg-secondary-color: #202938;
+	--bg-menu-color: #323949;
+	--border-color: #394050;
 }
 
 .app {
+	--menu-size: 320px;
 	transition: margin 0.5s ease-in-out;
+	scroll-behavior: smooth;
 }
+
 main {
-	--paddingTop: 125px;
+	--paddingTop: 96px;
 	padding-top: var(--paddingTop);
 	position: relative;
 
+	@media (min-width: 576px) {
+		--paddingTop: 126px;
+	}
 	@media (min-width: 768px) {
-		--paddingTop: 85px;
+		--paddingTop: 96px;
 	}
 }
 
@@ -85,4 +189,22 @@ main {
 .fade-leave-to {
 	opacity: 0;
 }
+
+.scrollToTop {
+	z-index: 100;
+	bottom: 1rem;
+	right: -4rem;
+	font-size: 2rem;
+	width: 50px;
+	height: 50px;
+	opacity: 0.7;
+
+	&.show {
+		right: 1rem;
+	}
+
+	&:hover {
+		opacity: 1;
+	}
+}
 </style>

layouts/error.vue

@@ -26,7 +26,12 @@ export default {
 		$nuxt.$emit("changeRoute", this.breadcrumb)
 	},
 	props: ["error"],
-	layout: "error"
+	layout: "error",
+	mounted() {
+		if (this.error.statusCode === 404) {
+			this.$router.push(this.localePath("/"))
+		}
+	}
 }
 </script>
 

nuxt.config.js

-import i18n from "./i18n"
-import webpack from "webpack"
+const i18n = require("./i18n");
+const endpoints = require('./endpoints.json');
 
 export default {
 	// Disable server-side rendering: https://go.nuxtjs.dev/ssr-mode
@@ -8,6 +8,9 @@ export default {
 	// Target: https://go.nuxtjs.dev/config-target
 	target: "static",
 
+	// Variables that can be accessed by $config
+	publicRuntimeConfig: {},
+
 	// Global page headers: https://go.nuxtjs.dev/config-head
 	head: {
 		title: "wotwizard-ui",
@@ -17,7 +20,7 @@ export default {
 			{ hid: "description", name: "description", content: "" },
 			{ name: "format-detection", content: "telephone=no" }
 		],
-		link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }]
+		link: [{ rel: "icon", type: "image/x-icon", href: "/favicon-96x96.png" }]
 	},
 
 	// Global CSS: https://go.nuxtjs.dev/config-css
@@ -25,9 +28,10 @@ export default {
 
 	// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
 	plugins: [
-		"~plugins/functions.js",
+		"~plugins/favourites.js",
 		"~plugins/filters.js",
-		"~plugins/bootstrap.js"
+		"~plugins/bootstrap.js",
+		"~plugins/getApolloClient.js"
 	],
 
 	// Auto import components: https://go.nuxtjs.dev/config-components
@@ -36,52 +40,85 @@ export default {
 	// Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
 	buildModules: [
 		// https://go.nuxtjs.dev/pwa
-		"@nuxtjs/pwa"
+		"@nuxtjs/pwa",
+		// https://github.com/whardier/nuxt-hero-icons
+		"@nuxt-hero-icons/solid/nuxt"
 	],
 
 	// Modules: https://go.nuxtjs.dev/config-modules
 	modules: [
-		// https://github.com/nuxt-community/apollo-module
-		"@nuxtjs/apollo",
 		// https://i18n.nuxtjs.org
-		"@nuxtjs/i18n"
+		"@nuxtjs/i18n",
+		// https://github.com/nuxt-community/apollo-module
+		"@nuxtjs/apollo"
 	],
 
 	i18n: {
-		defaultLocale: "fr",
+		lazy: true,
+		langDir: "~/i18n/locales/",
+		defaultLocale: "en",
+		strategy: "prefix",
 		locales: [
 			{
 				code: "en",
-				name: "English"
+				name: "English",
+				file: "en.json"
 			},
+			{
+				code: "it",
+				name: "Italiano",
+				file: "it.json"
+			},
+
 			{
 				code: "fr",
-				name: "Français"
+				name: "Français",
+				file: "fr.json"
 			},
 			{
 				code: "es",
-				name: "Español"
+				name: "Español",
+				file: "es.json"
+			},
+			{
+				code: "de",
+				name: "Deutsch",
+				file: "de.json"
 			}
 		],
 		detectBrowserLanguage: {
-			alwaysRedirect: true
+			alwaysRedirect: true,
+			fallbackLocale: "en"
 		},
 		vueI18n: i18n
 	},
 
 	// PWA module configuration: https://go.nuxtjs.dev/pwa
 	pwa: {
+		icon: {
+			purpose: "any"
+		},
 		manifest: {
-			lang: "fr"
+			name: "Wotwizard",
+			short_name: "Wotwizard",
+			description:
+				"Vérifiez les entrées et les sorties de la toile de confiance de la monnaie libre Ğ1",
+			lang: "fr",
+			background_color: "#343a40",
+			shortcuts: [
+				{ name: "Favoris", url: "/favoris" },
+				{ name: "Futurs membres", url: "/previsions" },
+				{ name: "Lexique", url: "/lexique" },
+				{ name: "Accueil", url: "/" }
+			]
 		}
 	},
 
 	apollo: {
-		clientConfigs: {
-			default: "~/graphql/clients/coindufeu"
-			//you can setup multiple clients with arbitrary names
-			//, myotherclient : '~/graphql/clients/otherclient'
-		}
+		clientConfigs: Object.keys(endpoints).reduce((configs, key) => {
+			configs[key] = `~/graphql/endpoints/${key}.js`;
+			return configs;
+		}, {}),
 	},
 
 	router: {
@@ -90,10 +127,10 @@ export default {
 
 	// Build Configuration: https://go.nuxtjs.dev/config-build
 	build: {
-		plugins: [
-			new webpack.ProvidePlugin({
-				$: "jquery"
-			})
-		]
+		extend(config, ctx) {
+			if (ctx && ctx.isClient) {
+				config.optimization.splitChunks.maxSize = 243000
+			}
+		}
 	}
 }

package.json

 {
 	"name": "wotwizard-ui",
-	"version": "1.0.0",
+	"version": "2.5.2",
 	"private": true,
 	"scripts": {
-		"dev": "nuxt",
-		"build": "npm-run-all -p build-fragment nuxt-build",
+		"dev": "npm run generate-endpoints && nuxt",
+		"trad": "sh ./utils/findMissingI18nKeys.sh",
+		"generate-endpoints": "node graphql/generateEndpoints.js",
+		"build": "npm run generate-endpoints && npm-run-all -p build-fragment nuxt-build",
 		"start": "npm-run-all -p build-fragment nuxt-start",
-		"generate": "npm-run-all -p build-fragment nuxt-generate",
+		"generate": "npm-run-all -p build-fragment nuxt-generate && cp ./web-ext/* ./dist/",
 		"analyze": "nuxt build --analyze",
 		"build-fragment": "node graphql/schemaQuery.js",
 		"nuxt-build": "nuxt build",
@@ -14,21 +16,23 @@
 		"nuxt-generate": "nuxt generate"
 	},
 	"dependencies": {
+		"@nuxt-hero-icons/solid": "^1.0.1",
 		"@nuxtjs/apollo": "^4.0.1-rc.5",
-		"@nuxtjs/i18n": "^7.2.0",
+		"@nuxtjs/i18n": "^7.3.1",
 		"@nuxtjs/pwa": "^3.3.5",
 		"apollo-link-context": "^1.0.20",
 		"apollo-link-http": "^1.5.17",
-		"bootstrap": "^4.6.1",
-		"chart.js": "^3.6.2",
-		"core-js": "^3.15.1",
+		"bootstrap": "5.1.3",
+		"core-js": "^3.36.0",
 		"graphql-tag": "^2.12.6",
-		"nuxt": "^2.15.8",
-		"vue": "^2.6.14"
+		"node-fetch": "^3.3.2",
+		"nuxt": "^2.17.3",
+		"vue": "^2.7.16"
 	},
 	"devDependencies": {
+		"@vue/compiler-dom": "^3.4.21",
 		"npm-run-all": "^4.1.5",
-		"sass": "^1.45.0",
-		"sass-loader": "^10.2.0"
+		"sass": "^1.72.0",
+		"sass-loader": "^10.5.2"
 	}
 }

pages/a-propos.vue

+<template>
+	<main class="container">
+		<h2 class="display-5 my-5">{{ $t("apropos.bienvenue") }}</h2>
+		<AlertDefault
+			icon="information-circle"
+			type="info"
+			:title="$t('alert.information')">
+			<span v-html="$t('apropos.alert')"></span>
+		</AlertDefault>
+		<div class="text-center my-4">
+			<div class="btn-group" role="group">
+				<a
+					href="https://wotwizard.axiom-team.fr"
+					target="_blank"
+					title="web version"
+					class="btn btn-secondary">
+					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+						<!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
+						<path
+							d="M352 256c0 22.2-1.2 43.6-3.3 64H163.3c-2.2-20.4-3.3-41.8-3.3-64s1.2-43.6 3.3-64H348.7c2.2 20.4 3.3 41.8 3.3 64zm28.8-64H503.9c5.3 20.5 8.1 41.9 8.1 64s-2.8 43.5-8.1 64H380.8c2.1-20.6 3.2-42 3.2-64s-1.1-43.4-3.2-64zm112.6-32H376.7c-10-63.9-29.8-117.4-55.3-151.6c78.3 20.7 142 77.5 171.9 151.6zm-149.1 0H167.7c6.1-36.4 15.5-68.6 27-94.7c10.5-23.6 22.2-40.7 33.5-51.5C239.4 3.2 248.7 0 256 0s16.6 3.2 27.8 13.8c11.3 10.8 23 27.9 33.5 51.5c11.6 26 21 58.2 27 94.7zm-209 0H18.6C48.6 85.9 112.2 29.1 190.6 8.4C165.1 42.6 145.3 96.1 135.3 160zM8.1 192H131.2c-2.1 20.6-3.2 42-3.2 64s1.1 43.4 3.2 64H8.1C2.8 299.5 0 278.1 0 256s2.8-43.5 8.1-64zM194.7 446.6c-11.6-26-20.9-58.2-27-94.6H344.3c-6.1 36.4-15.5 68.6-27 94.6c-10.5 23.6-22.2 40.7-33.5 51.5C272.6 508.8 263.3 512 256 512s-16.6-3.2-27.8-13.8c-11.3-10.8-23-27.9-33.5-51.5zM135.3 352c10 63.9 29.8 117.4 55.3 151.6C112.2 482.9 48.6 426.1 18.6 352H135.3zm358.1 0c-30 74.1-93.6 130.9-171.9 151.6c25.5-34.2 45.2-87.7 55.3-151.6H493.4z" />
+					</svg>
+				</a>
+				<a
+					href="https://addons.mozilla.org/fr/firefox/addon/wotwizard-ui"
+					target="_blank"
+					title="Firefox extension"
+					class="btn btn-secondary">
+					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+						<path
+							d="M130.22 127.548C130.38 127.558 130.3 127.558 130.22 127.548V127.548ZM481.64 172.898C471.03 147.398 449.56 119.898 432.7 111.168C446.42 138.058 454.37 165.048 457.4 185.168C457.405 185.306 457.422 185.443 457.45 185.578C429.87 116.828 383.098 89.1089 344.9 28.7479C329.908 5.05792 333.976 3.51792 331.82 4.08792L331.7 4.15792C284.99 30.1109 256.365 82.5289 249.12 126.898C232.503 127.771 216.219 131.895 201.19 139.035C199.838 139.649 198.736 140.706 198.066 142.031C197.396 143.356 197.199 144.87 197.506 146.323C197.7 147.162 198.068 147.951 198.586 148.639C199.103 149.327 199.76 149.899 200.512 150.318C201.264 150.737 202.096 150.993 202.954 151.071C203.811 151.148 204.676 151.045 205.491 150.768L206.011 150.558C221.511 143.255 238.408 139.393 255.541 139.238C318.369 138.669 352.698 183.262 363.161 201.528C350.161 192.378 326.811 183.338 304.341 187.248C392.081 231.108 368.541 381.784 246.951 376.448C187.487 373.838 149.881 325.467 146.421 285.648C146.421 285.648 157.671 243.698 227.041 243.698C234.541 243.698 255.971 222.778 256.371 216.698C256.281 214.698 213.836 197.822 197.281 181.518C188.434 172.805 184.229 168.611 180.511 165.458C178.499 163.75 176.392 162.158 174.201 160.688C168.638 141.231 168.399 120.638 173.51 101.058C148.45 112.468 128.96 130.508 114.8 146.428H114.68C105.01 134.178 105.68 93.7779 106.25 85.3479C106.13 84.8179 99.022 89.0159 98.1 89.6579C89.5342 95.7103 81.5528 102.55 74.26 110.088C57.969 126.688 30.128 160.242 18.76 211.318C14.224 231.701 12 255.739 12 263.618C12 398.318 121.21 507.508 255.92 507.508C376.56 507.508 478.939 420.281 496.35 304.888C507.922 228.192 481.64 173.82 481.64 172.898Z" />
+					</svg>
+				</a>
+			</div>
+		</div>
+		<p class="lead">
+			{{ $t("apropos.desc") }}
+		</p>
+		<BtnClipboard textContent="78ZwwgpgdH5uLZLbThUQH7LKwPgjMunYfLiCfUCySkM8" />
+		<p v-html="$t('apropos.contribuer')"></p>
+		<hr class="my-4" />
+		<h3 class="h4 mb-4">{{ $t("apropos.participants") }}</h3>
+		<div class="row">
+			<div
+				class="col-sm-6 col-md-4 col-lg-3"
+				v-for="cat in liste_contrib"
+				:key="cat.title">
+				<h4 class="h5" v-if="cat.title != 'testeurs'">
+					{{ $t("apropos." + cat.title) }}
+				</h4>
+				<div class="list-group mb-4" v-if="cat.title != 'testeurs'">
+					<NuxtLink
+						v-for="contrib in cat.contrib"
+						:key="contrib"
+						class="list-group-item list-group-item-action list-group-item-dark"
+						:to="chemin(contrib)">
+						{{ contrib }}
+					</NuxtLink>
+				</div>
+			</div>
+		</div>
+		<div class="row testeurs mb-4">
+			<div class="col-12">
+				<h4 class="h5">
+					{{ $t("apropos." + liste_contrib[4].title) }}
+				</h4>
+			</div>
+			<div class="row m-auto">
+				<div
+					class="col list-group-item d-flex align-items-center"
+					v-for="testeur in liste_contrib[4].contrib"
+					:key="testeur">
+					{{ testeur }}
+				</div>
+			</div>
+		</div>
+	</main>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			breadcrumb: [
+				{
+					text: this.$t("accueil"),
+					to: "/"
+				},
+				{
+					text: this.$t("apropos.title"),
+					active: true
+				}
+			],
+			liste_contrib: [
+				{
+					title: "developpeurs",
+					contrib: ["paidge", "BenoitBesnard", "ManUtopiK", "HugoTrentesaux"]
+				},
+				{
+					title: "traducteurs",
+					contrib: ["paidge", "kapis", "Trayeur", "wellno1"]
+				},
+				{
+					title: "graphql",
+					contrib: ["gerard94", "HugoTrentesaux", "cgeek"]
+				},
+				{
+					title: "deploiement",
+					contrib: ["poka", "ManUtopiK"]
+				},
+				{
+					title: "testeurs",
+					contrib: [
+						"Maaltir",
+						"hypericum",
+						"Tchois",
+						"Jean-Pierre13",
+						"GULLANDES",
+						"Spiranne13",
+						"philmarg1"
+					]
+				}
+			],
+			hash_contrib: {
+				paidge:
+					"8A64A1ECF44DA7DC6FB10DB4A6C9AD810869FF4D3A1FC5DD0E96E9BC36B91B31",
+				BenoitBesnard:
+					"7790470042EAB646EAEBBA0F3D4A025173A1D71EF9783BB3CE3FA0BAEFA29139",
+				ManUtopiK:
+					"82B72FAAC66E3BE937793938E6A8A79599BC04529B0A5F2A4208C7CAF9070706",
+				HugoTrentesaux:
+					"F77AF5C0B4FA9A691A63CF69EAA92C200F88ED943CBBB2CB18D9CD7F4CCDC103",
+				kapis:
+					"903B1413434D3287CE17EB8C73B9A15C2F22F6C2EC23FEBBF40EDBCE7DBAAAA5",
+				Maaltir:
+					"ABF1B957BFDDC3AE72D5B5689676ACDECB8E04A8D23FFCB3D80929195F4EE0EF",
+				hypericum:
+					"6D2D2AFB161D447C5650919BC818E2A396E7B2DC302F384FD54151186761AA3C",
+				Tchois:
+					"4E822BDB7431E993B373A6DA3CA8907CABE6AD1CBBABBDC8E03A0988F386E29D",
+				"Jean-Pierre13": "",
+				GULLANDES: "",
+				gerard94:
+					"6144430D00732BCCA98891D95D7577E99ED7896A4EEC1B5223616B2C44FECF4E",
+				cgeek:
+					"E35D142DBC3B967FED049B6CCF48782440AC2F5230352D194BFB0DA62A80259C",
+				poka: "D01102D1D649EE65A027BC47FD1FB5BB6FECE7B6230414DB66EC490B51DBED7A",
+				wellno1:
+					"751F817B36AAE403EC4BAE95D15B55132D8CED7ED05F58E791189B0348AE6FE2",
+				Trayeur: "",
+				Spiranne13: "",
+				philmarg1: ""
+			}
+		}
+	},
+	methods: {
+		chemin(contrib) {
+			if (this.hash_contrib[contrib] != "") {
+				return this.localePath(
+					"/membres/profil?hash=" + this.hash_contrib[contrib]
+				)
+			} else {
+				return this.localePath("/")
+			}
+		}
+	},
+	nuxtI18n: {
+		paths: {
+			fr: "/a-propos",
+			en: "/about",
+			es: "/a-proposito",
+			de: "/uber",
+			it: "/di"
+		}
+	},
+	mounted() {
+		$nuxt.$emit("changeRoute", this.breadcrumb)
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.testeurs {
+	.list-group-item + .list-group-item {
+		border-top-width: thin;
+	}
+}
+
+svg {
+	width: 50px;
+}
+</style>

pages/chartjs.vue

-<template>
-	<main class="container-fluid">
-		<h2 class="display-2 text-center mb-5">Test ChartJS</h2>
-		<div class="row">
-			<div class="col-md-6 mx-auto">
-				<div class="alert alert-danger">En développement</div>
-			</div>
-		</div>
-		<div class="demo p-5 m-auto">
-			<select class="form-control my-4" v-model="chartType">
-				<option v-for="type in allTypes" :key="type">{{ type }}</option>
-			</select>
-			<button @click="fillData" class="btn btn-primary mb-5">Randomize</button>
-			<LazyGraph
-				id="monGraph"
-				:type="chartType"
-				:data="data"
-				:options="options" />
-		</div>
-	</main>
-</template>
-
-<script>
-import { chartTypes } from "~/components/Graph.vue"
-
-export default {
-	data() {
-		return {
-			allTypes: chartTypes,
-			chartType: "line",
-			options: {
-				responsive: true,
-				lineTension: 1
-			},
-			data: {},
-			breadcrumb: [
-				{
-					text: this.$t("accueil"),
-					to: "/"
-				},
-				{
-					text: "ChartJS",
-					active: true
-				}
-			]
-		}
-	},
-	methods: {
-		fillData() {
-			this.data = {
-				labels: [
-					"Mercury",
-					"Venus",
-					"Earth",
-					"Mars",
-					"Jupiter",
-					"Saturn",
-					"Uranus",
-					"Neptune"
-				],
-				datasets: [
-					{
-						label: "Number of Moons",
-						data: this.generateArray(8),
-						backgroundColor: this.generateColor(),
-						borderColor: this.generateColor(),
-						borderWidth: 2
-					},
-					{
-						label: "Planetary Mass (relative to the Sun x 10^-6)",
-						data: this.generateArray(8),
-						backgroundColor: this.generateColor(),
-						borderColor: this.generateColor(),
-						borderWidth: 2
-					}
-				]
-			}
-		},
-		generateColor() {
-			return (
-				"rgba(" +
-				this.getRandomInt(255) +
-				"," +
-				this.getRandomInt(255) +
-				"," +
-				this.getRandomInt(255) +
-				",.5)"
-			)
-		},
-		generateArray(nb_items) {
-			let ret = []
-			for (let i = 0; i < nb_items; i++) {
-				ret[i] = this.getRandomInt(50)
-			}
-			return ret
-		},
-		getRandomInt(max) {
-			return Math.floor(Math.random() * (max - 5 + 1)) + 5
-		}
-	},
-	nuxtI18n: {
-		paths: {
-			fr: "/graphiques",
-			en: "/graphics",
-			es: "/graficos"
-		}
-	},
-	mounted() {
-		$nuxt.$emit("changeRoute", this.breadcrumb)
-		// On remplit les données dans le graph
-		this.fillData()
-	}
-}
-</script>
-
-<style lang="sass" scoped>
-// CSS Lié au composant
-.demo
-  max-width: 600px
-  background: var(--background-color-secondary)
-</style>

pages/favoris.vue

-<template>
-	<main class="container">
-		<h2 class="text-center my-5 font-weight-light">
-			{{ $t("favoris.title") }}
-		</h2>
-
-		<NavigationLoader :isLoading="$apollo.queries.favoris.loading" />
-		<div class="row text-center">
-			<div class="col">
-				<transition name="fade">
-					<div class="alert alert-danger" v-if="error">{{ error }}</div>
-				</transition>
-				<transition name="fade">
-					<MemberList
-						:members="favoris"
-						v-if="favoris && favoris.length != 0" />
-				</transition>
-				<transition name="fade">
-					<div
-						class="alert alert-info"
-						v-if="!$apollo.queries.favoris.loading && favoris.length == 0">
-						{{ $t("favoris.none") }}
-					</div>
-				</transition>
-			</div>
-		</div>
-	</main>
-</template>
-
-<script>
-import { FAVORIS } from "@/graphql/queries.js"
-
-export default {
-	data() {
-		return {
-			breadcrumb: [
-				{
-					text: this.$t("accueil"),
-					to: "/"
-				},
-				{
-					text: this.$t("favoris.title"),
-					active: true
-				}
-			],
-			error: null
-		}
-	},
-	apollo: {
-		favoris: {
-			query: FAVORIS,
-			variables() {
-				return {
-					group: localStorage.favourites
-						? JSON.parse(localStorage.favourites)
-						: []
-				}
-			},
-			update(data) {
-				let retour = []
-				for (let i = 0; i < data.filterGroup.selected.length; i++) {
-					retour[i] = data.filterGroup.selected[i].id
-				}
-
-				return retour
-			},
-			error(err) {
-				this.error = err.message
-			}
-		}
-	},
-	nuxtI18n: {
-		paths: {
-			fr: "/favoris",
-			en: "/favourites",
-			es: "/favoritos"
-		}
-	},
-	mounted() {
-		$nuxt.$emit("changeRoute", this.breadcrumb)
-	}
-}
-</script>

pages/index.vue

 <template>
 	<main class="container">
-		<h2 class="text-center my-5 font-weight-light">{{ $t("inout") }}</h2>
+		<h2 class="text-center my-5 font-weight-light">
+			<solid-home-icon style="width: 1.5rem" aria-hidden="true" />&nbsp;{{
+				$t("inout")
+			}}
+		</h2>
 		<NavigationLoader :isLoading="$apollo.queries.newMembers.loading" />
 		<transition name="fade">
-			<div class="alert alert-danger" v-if="error">{{ error }}</div>
+			<AlertDefault type="danger" v-if="error">{{ error }}</AlertDefault>
 		</transition>
 		<transition name="fade">
 			<div class="result" v-if="newMembers">
+				<p class="lead text-center">
+					{{ $t("actuellement.debut") }}
+					<span class="badge bg-secondary">{{ newMembers.totalMembers }}</span>
+					{{ $t("actuellement.fin") }}
+				</p>
 				<div class="row text-center">
-					<div class="col-md-6 col-lg-4">
-						<h2 class="h4 text-success">{{ $t("bienvenue") }}</h2>
-						<MemberList
-							:members="newMembers['entrees']"
-							:displayPubkey="false"
-							:displayHead="false"
-							:displayDate="false" />
+					<div class="col-md-6 col-lg-4 mb-5">
+						<h2 class="h4 text-success">
+							<solid-login-icon class="icon" aria-hidden="true" />&nbsp;{{
+								$t("bienvenue")
+							}}
+						</h2>
+						<MemberList id="entrees" :members="newMembers['entrees']" />
 					</div>
-					<div class="col-md-6 col-lg-4">
-						<h2 class="h4 text-danger">{{ $t("aurevoir") }}</h2>
-						<MemberList
-							:members="newMembers['sorties']"
-							:displayPubkey="false"
-							:displayHead="false"
-							:displayDate="false" />
+					<div class="col-md-6 col-lg-4 mb-5">
+						<h2 class="h4 text-danger">
+							<solid-logout-icon class="icon" aria-hidden="true" />&nbsp;{{
+								$t("aurevoir")
+							}}
+						</h2>
+						<MemberList id="sorties" :members="newMembers['sorties']" />
 					</div>
-					<div class="col-lg-4">
-						<h2 class="h4 text-info">{{ $t("revoila") }}</h2>
-						<MemberList
-							:members="newMembers['renew']"
-							:displayPubkey="false"
-							:displayHead="false"
-							:displayDate="false" />
+					<div class="col-lg-4 mb-5">
+						<h2 class="h4 text-info">
+							<solid-reply-icon class="icon" aria-hidden="true" />&nbsp;{{
+								$t("revoila")
+							}}
+						</h2>
+						<MemberList id="renew" :members="newMembers['renew']" />
 					</div>
 				</div>
 			</div>
@@ -68,6 +77,9 @@ export default {
 		}
 	},
 	apollo: {
+		$client() {
+			return this.getApolloClient
+		},
 		newMembers: {
 			query: LAST_EVENTS,
 			variables() {
@@ -76,8 +88,12 @@ export default {
 			update(data) {
 				let result = { entrees: [], sorties: [], renew: [] }
 				let users = []
+				let totalMembers = 0
 
 				for (let i = 0; i < data.membersCount.length; i++) {
+					if (i == data.membersCount.length - 1)
+						totalMembers = data.membersCount[i].number
+
 					for (let j = 0; j < data.membersCount[i].idList.length; j++) {
 						let member = data.membersCount[i].idList[j]
 						member.member.inOut = member.inOut
@@ -85,7 +101,7 @@ export default {
 						if (!users.includes(member.member.uid)) {
 							if (member.member.history.length == 1) {
 								this.addValue(result["entrees"], member.member)
-							} else if (member.inOut) {
+							} else if (member.inOut || member.member.status === "MEMBER") {
 								this.addValue(result["renew"], member.member)
 							} else {
 								this.addValue(result["sorties"], member.member)
@@ -102,7 +118,10 @@ export default {
 					)
 				}
 
-				return result
+				return {
+					...result,
+					totalMembers: totalMembers
+				}
 			},
 			error(err) {
 				this.error = err.message
@@ -114,3 +133,9 @@ export default {
 	}
 }
 </script>
+
+<style lang="scss">
+.result .table-responsive tbody {
+	max-height: 56vh;
+}
+</style>

pages/lexique.vue

 <template>
 	<main class="container">
-		<div class="rech-lexique row mb-4">
+		<div class="rech-lexique row pb-3">
 			<div class="col-md-6 mx-auto">
-				<h2 class="text-center my-5 font-weight-light">{{ $t("lexique") }}</h2>
-				<div class="form-group">
-					<input
-						v-model="search"
-						type="text"
-						class="form-control"
-						id="exampleFormControlInput1"
-						:placeholder="$t('recherche.title')" />
-				</div>
+				<h2 class="text-center font-weight-light">
+					<solid-question-mark-circle-icon
+						style="width: 2rem"
+						aria-hidden="true" />&nbsp;{{ $t("lexique") }}
+				</h2>
+				<BtnSearch
+					@erase="search = ''"
+					v-model="search"
+					:help="$t('recherche.desc.lexicon')" />
 			</div>
 		</div>
-		<div class="table-responsive">
-			<table class="table table-striped">
-				<thead class="d-none d-sm-table-row">
-					<th>{{ $t("mot") }}</th>
-					<th>{{ $t("description") }}</th>
+		<div class="table-responsive mt-1">
+			<table class="table table-striped table-bordered">
+				<thead>
+					<tr class="d-none d-sm-table-row">
+						<th>{{ $t("mot") }}</th>
+						<th>{{ $t("description") }}</th>
+					</tr>
 				</thead>
 				<tbody>
 					<tr v-for="mot in listeMotsTrad" :key="mot.title">
@@ -76,7 +78,9 @@ export default {
 		paths: {
 			fr: "/lexique",
 			en: "/lexicon",
-			es: "/lexico"
+			es: "/lexico",
+			de: "/lexikon",
+			it: "/lessico"
 		}
 	},
 	methods: {
@@ -125,6 +129,17 @@ export default {
 			return retour
 		}
 	},
+	beforeMount() {
+		window.addEventListener("scroll", function (e) {
+			let scrollClassList = document.querySelector(".rech-lexique").classList
+			let reduced = scrollClassList.contains("reduced")
+			if (!reduced && window.scrollY > 20) {
+				scrollClassList.add("reduced")
+			} else if (reduced && window.scrollY <= 20) {
+				scrollClassList.remove("reduced")
+			}
+		})
+	},
 	mounted() {
 		$nuxt.$emit("changeRoute", this.breadcrumb)
 	}
@@ -135,8 +150,18 @@ export default {
 .rech-lexique {
 	position: sticky;
 	top: var(--paddingTop);
-	background: var(--background-color-primary);
+	background: var(--bg-primary-color);
+
+	h2 {
+		margin: 3rem 0;
+		transition: margin 0.3s ease-in-out;
+	}
+
+	&.reduced h2 {
+		margin: 0.5rem 0;
+	}
 }
+
 th {
 	min-width: 200px;
 }

pages/membres/_hash.vue

-<template>
-	<main>
-		<NavigationLoader :isLoading="$apollo.queries.idFromHash.loading" />
-		<transition name="fade">
-			<div class="alert alert-danger" v-if="error">{{ error }}</div>
-		</transition>
-		<transition name="fade">
-			<div v-if="idFromHash">
-				<div class="container-md">
-					<div class="row">
-						<div class="col-lg-9 col-xl-8 mx-auto my-3">
-							<MemberCard :hash="idFromHash" />
-						</div>
-					</div>
-				</div>
-				<div class="container">
-					<div class="row mt-3" v-if="idFromHash.status != 'REVOKED'">
-						<div class="col-sm-10 col-md-7 col-lg-5 mb-3 mx-auto">
-							<h3
-								class="h4 text-center"
-								:class="{
-									'text-success':
-										['NEWCOMER', 'MISSING'].includes(idFromHash.status) &&
-										idFromHash.received_certifications.certifications.length >=
-											5,
-									'text-danger':
-										['NEWCOMER', 'MISSING'].includes(idFromHash.status) &&
-										idFromHash.received_certifications.certifications.length < 5
-								}">
-								{{ $t("certification.recues") }} ({{ nbCertifs("received")
-								}}<span v-if="nbCertifsPending('received') != 0">{{
-									"&nbsp;+&nbsp;" + nbCertifsPending("received")
-								}}</span
-								>)
-								<BadgeDanger
-									:limitDate="idFromHash.received_certifications.limit"
-									:memberStatus="idFromHash.status" />
-							</h3>
-							<CertifList
-								:certifs="idFromHash.received_certifications.certifications"
-								type="received" />
-						</div>
-						<div
-							class="col-sm-10 col-md-7 col-lg-5 mx-auto"
-							v-if="['MISSING', 'MEMBER'].includes(idFromHash.status)">
-							<h3 class="h4 text-center">
-								{{ $t("certification.envoyees") }} ({{ nbCertifs("sent")
-								}}<span v-if="nbCertifsPending('sent') != 0">{{
-									"&nbsp;+&nbsp;" + nbCertifsPending("sent")
-								}}</span
-								>)
-							</h3>
-							<CertifList
-								:certifs="idFromHash.sent_certifications"
-								type="sent" />
-						</div>
-					</div>
-				</div>
-			</div>
-		</transition>
-	</main>
-</template>
-
-<script>
-import { SEARCH_MEMBER } from "@/graphql/queries"
-
-export default {
-	data() {
-		return {
-			breadcrumb: [
-				{
-					text: this.$t("accueil"),
-					to: "/"
-				},
-				{
-					text: this.$t("membres"),
-					to: "/membres"
-				},
-				{
-					text: "",
-					active: true
-				}
-			],
-			error: null
-		}
-	},
-	methods: {
-		nbCertifs(sens) {
-			return sens == "received"
-				? this.idFromHash.received_certifications.certifications.filter(
-						(el) => {
-							return el.pending == false
-						}
-				  ).length
-				: this.idFromHash.sent_certifications.filter((el) => {
-						return el.pending == false
-				  }).length
-		},
-		nbCertifsPending(sens) {
-			return sens == "received"
-				? this.idFromHash.received_certifications.certifications.filter(
-						(el) => {
-							return el.pending == true
-						}
-				  ).length
-				: this.idFromHash.sent_certifications.filter((el) => {
-						return el.pending == true
-				  }).length
-		}
-	},
-	apollo: {
-		idFromHash: {
-			query: SEARCH_MEMBER,
-			variables() {
-				return { hash: this.$route.params.hash }
-			},
-			error(err) {
-				this.error = err.message
-			}
-		}
-	},
-	nuxtI18n: {
-		paths: {
-			fr: "/membres/:hash",
-			en: "/members/:hash",
-			es: "/miembros/:hash"
-		}
-	},
-	computed: {
-		classWarning() {
-			return {
-				"text-danger": !this.idFromHash.received_certifications.limit,
-				"text-warning":
-					this.$options.filters.dateStatus(
-						this.idFromHash.received_certifications.limit
-					) == "warning"
-			}
-		}
-	},
-	mounted() {
-		$nuxt.$emit("changeRoute", this.breadcrumb)
-	},
-	watch: {
-		idFromHash: {
-			handler(n, o) {
-				this.breadcrumb[2].text = this.idFromHash.uid
-				$nuxt.$emit("changeRoute", this.breadcrumb)
-			}
-		}
-	}
-}
-</script>
-
-<style lang="scss" scoped>
-.danger {
-	cursor: default;
-}
-</style>

pages/membres/index.vue

 <template>
 	<main class="container">
-		<h2 class="text-center my-5 font-weight-light">{{ $t("membres") }}</h2>
+		<h2 class="text-center my-5 font-weight-light">
+			<solid-search-icon style="width: 2rem" aria-hidden="true" />&nbsp;{{
+				$t("membres")
+			}}
+		</h2>
 		<div class="row mb-4">
-			<div class="col-6 m-auto text-center">
-				<label for="rech" class="form-label">{{ $t("recherche.title") }}</label>
-				<input
-					type="text"
-					class="form-control"
-					id="rech"
-					aria-describedby="rechHelp"
+			<div class="col-sm-8 col-md-6 col-lg-5 m-auto">
+				<BtnSearch
+					@erase="param = ''"
 					v-model="param"
-					autocomplete="off"
+					:help="$t('recherche.desc.member')"
 					@keyup="save" />
-				<small id="rechHelp" class="form-text text-muted">{{
-					$t("recherche.desc")
-				}}</small>
 			</div>
 		</div>
 		<NavigationLoader :isLoading="$apollo.queries.idSearch.loading" />
 		<transition name="fade">
-			<div class="alert alert-danger" v-if="error">{{ error }}</div>
+			<AlertDefault type="danger" v-if="error">{{ error }}</AlertDefault>
 		</transition>
 		<transition name="fade">
 			<div
-				class="row"
+				class="row result"
 				v-if="
 					idSearch && param.length > 2 && !$apollo.queries.idSearch.loading
 				">
-				<div class="col-8 m-auto">
-					<MemberList :members="idSearch.ids" :displayDate="false" />
+				<div class="col m-auto">
+					<MemberList :members="idSearch.ids" id="search" />
 				</div>
 			</div>
 		</transition>
@@ -57,10 +54,13 @@ export default {
 	},
 	methods: {
 		save() {
-			localStorage.setItem("search", this.param)
+			localStorage.search = this.param
 		}
 	},
 	apollo: {
+		$client() {
+			return this.getApolloClient
+		},
 		idSearch: {
 			query: SEARCH_MEMBERS,
 			variables() {
@@ -78,15 +78,14 @@ export default {
 		paths: {
 			fr: "/membres",
 			en: "/members",
-			es: "/miembros"
+			es: "/miembros",
+			de: "/mitglieder",
+			it: "/membri"
 		}
 	},
 	mounted() {
 		$nuxt.$emit("changeRoute", this.breadcrumb)
-		// Rechargement du input
-		if (localStorage.search) {
-			this.param = localStorage.getItem("search")
-		}
+		this.param = localStorage.search ? localStorage.search : ""
 	}
 }
 </script>

pages/membres/profil.vue

+<template>
+	<main>
+		<NavigationLoader :isLoading="$apollo.queries.idFromHash.loading" />
+		<transition name="fade">
+			<AlertDefault type="danger" v-if="error">{{ error }}</AlertDefault>
+		</transition>
+		<transition name="fade">
+			<div v-if="idFromHash && !$apollo.queries.idFromHash.loading">
+				<div class="container-md">
+					<div class="row">
+						<div class="col-lg-9 col-xl-8 mx-auto my-3">
+							<MemberCard :hash="idFromHash" />
+						</div>
+					</div>
+				</div>
+				<CertifAll :idFromHash="idFromHash" />
+			</div>
+		</transition>
+	</main>
+</template>
+
+<script>
+import { SEARCH_MEMBER } from "@/graphql/queries"
+
+export default {
+	name: "membre",
+	data() {
+		return {
+			breadcrumb: [
+				{
+					text: this.$t("accueil"),
+					to: "/"
+				},
+				{
+					text: this.$t("membres"),
+					to: "/membres"
+				},
+				{
+					text: "",
+					active: true
+				}
+			],
+			error: null,
+			registeredAccount: {}
+		}
+	},
+	apollo: {
+		$client() {
+			return this.getApolloClient
+		},
+		idFromHash: {
+			query: SEARCH_MEMBER,
+			variables() {
+				return { hash: this.$route.query.hash }
+			},
+			update(data) {
+				let idFromHash = data.idFromHash
+				let received_certifications = idFromHash.received_certifications.map(
+					(certif) => ({
+						...certif,
+						...certif.from
+					})
+				)
+				let sent_certifications = idFromHash.sent_certifications.map(
+					(certif) => ({
+						...certif,
+						...certif.to
+					})
+				)
+
+				return {
+					...idFromHash,
+					sent_certifications: this.$favourites.compileArrays(
+						idFromHash.all_certifiedIO,
+						sent_certifications
+					),
+					received_certifications: this.$favourites.compileArrays(
+						idFromHash.all_certifiersIO,
+						received_certifications
+					)
+				}
+			},
+			error(err) {
+				this.error = err.message
+			}
+		}
+	},
+	nuxtI18n: {
+		paths: {
+			fr: "/membres/profil",
+			en: "/members/profile",
+			es: "/miembros/perfil",
+			de: "/mitglieder/profil",
+			it: "/membri/profilo"
+		}
+	},
+	mounted() {
+		$nuxt.$emit("changeRoute", this.breadcrumb)
+		this.registeredAccount = JSON.parse(localStorage.getItem("my_account")) || {
+			hash: "",
+			uid: ""
+		}
+	},
+	watch: {
+		idFromHash(n, o) {
+			this.breadcrumb[2].text = this.idFromHash.uid
+			$nuxt.$emit("changeRoute", this.breadcrumb)
+		},
+		registeredAccount(n, o) {
+			localStorage.setItem("my_account", JSON.stringify(n))
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.danger {
+	cursor: default;
+}
+</style>

pages/mes-suivis.vue

+<template>
+	<main class="container">
+		<h2 class="text-center my-5 font-weight-light">
+			<solid-user-group-icon style="width: 2rem" aria-hidden="true" />&nbsp;{{
+				$t("suivis.title")
+			}}
+		</h2>
+		<div v-if="currentAccount.hash == ''">
+			<AlertDefault
+				type="info"
+				:title="$t('suivis.alert.title')"
+				icon="exclamation">
+				{{ $t("suivis.alert.desc") }}
+				<br />
+				<NuxtLink :to="localePath('membres')" class="btn btn-info mt-3">
+					<solid-search-icon width="1.5rem" /> {{ $t("suivis.alert.btn") }}
+				</NuxtLink>
+			</AlertDefault>
+		</div>
+		<div v-else>
+			<div class="row">
+				<div class="col text-center">
+					<NuxtLink
+						class="btn btn-secondary mb-4"
+						:to="localePath('/membres/profil?hash=' + currentAccount.hash)">
+						<solid-user-circle-icon class="icon" aria-hidden="true" />
+						{{ $t("suivis.voir_profil") }} ({{ currentAccount.uid }})
+					</NuxtLink>
+					<ul class="nav nav-tabs nav-justified" id="suivis" role="tablist">
+						<li class="nav-item" role="presentation">
+							<button
+								class="nav-link active"
+								id="favoris"
+								@click="pushRoute($event)"
+								data-bs-toggle="tab"
+								data-bs-target="#favoris-tab-pane"
+								type="button"
+								role="tab"
+								aria-controls="favoris-tab-pane"
+								aria-selected="true">
+								{{ $t("suivis.tabs.favoris") }} ({{ nbFavoris }})
+							</button>
+						</li>
+						<li class="nav-item" role="presentation">
+							<button
+								class="nav-link"
+								id="certificateurs"
+								@click="pushRoute($event)"
+								data-bs-toggle="tab"
+								data-bs-target="#certificateurs-tab-pane"
+								type="button"
+								role="tab"
+								aria-controls="certificateurs-tab-pane"
+								aria-selected="false">
+								{{ $t("suivis.tabs.certificateurs") }}
+								<span v-if="!$apollo.queries.contacts.loading">
+									({{ nbReceived }})
+								</span>
+							</button>
+						</li>
+						<li class="nav-item" role="presentation">
+							<button
+								class="nav-link"
+								id="certifies"
+								@click="pushRoute($event)"
+								data-bs-toggle="tab"
+								data-bs-target="#certifies-tab-pane"
+								type="button"
+								role="tab"
+								aria-controls="certifies-tab-pane"
+								aria-selected="false">
+								{{ $t("suivis.tabs.certifies") }}
+								<span v-if="!$apollo.queries.contacts.loading">
+									({{ nbSent }})
+								</span>
+							</button>
+						</li>
+					</ul>
+					<div class="tab-content">
+						<div
+							class="tab-pane fade show active"
+							id="favoris-tab-pane"
+							role="tabpanel"
+							aria-labelledby="favoris"
+							tabindex="0">
+							<NavigationLoader :isLoading="$apollo.queries.favoris.loading" />
+							<transition name="fade">
+								<AlertDefault type="danger" v-if="error">{{
+									error
+								}}</AlertDefault>
+							</transition>
+							<transition name="fade">
+								<div v-if="!$apollo.queries.favoris.loading">
+									<SuivisTableau
+										:members="favoris"
+										:nbItems.sync="nbFavoris"
+										type="favoris" />
+								</div>
+							</transition>
+						</div>
+						<div
+							class="tab-pane fade"
+							id="certificateurs-tab-pane"
+							role="tabpanel"
+							aria-labelledby="certificateurs"
+							tabindex="0">
+							<NavigationLoader :isLoading="$apollo.queries.contacts.loading" />
+							<transition name="fade">
+								<AlertDefault type="danger" v-if="error">{{
+									error
+								}}</AlertDefault>
+							</transition>
+							<transition name="fade">
+								<div v-if="!$apollo.queries.contacts.loading">
+									<SuivisTableau
+										:members="contacts.received_certifications"
+										:nbItems.sync="nbReceived"
+										type="certificateurs" />
+								</div>
+							</transition>
+						</div>
+						<div
+							class="tab-pane fade"
+							id="certifies-tab-pane"
+							role="tabpanel"
+							aria-labelledby="certifies"
+							tabindex="0">
+							<NavigationLoader :isLoading="$apollo.queries.contacts.loading" />
+							<transition name="fade">
+								<AlertDefault type="danger" v-if="error">{{
+									error
+								}}</AlertDefault>
+							</transition>
+							<transition name="fade">
+								<div v-if="!$apollo.queries.contacts.loading">
+									<SuivisTableau
+										:members="contacts.sent_certifications"
+										:nbItems.sync="nbSent"
+										type="certifies" />
+								</div>
+							</transition>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</main>
+</template>
+
+<script>
+import Tab from "~/node_modules/bootstrap/js/dist/tab"
+import { SEARCH_MEMBER, MEMBERS } from "@/graphql/queries"
+
+export default {
+	data() {
+		return {
+			breadcrumb: [
+				{
+					text: this.$t("accueil"),
+					to: "/"
+				},
+				{
+					text: this.$t("suivis.title"),
+					active: true
+				}
+			],
+			error: null,
+			nbFavoris: 0,
+			nbSent: 0,
+			nbReceived: 0
+		}
+	},
+	computed: {
+		currentAccount() {
+			const account = JSON.parse(localStorage.getItem("my_account")) || {
+				hash: "",
+				uid: ""
+			}
+			return account
+		}
+	},
+	apollo: {
+		$client() {
+			return this.getApolloClient
+		},
+		favoris: {
+			query: MEMBERS,
+			variables() {
+				return {
+					group: this.$favourites.list
+				}
+			},
+			update(data) {
+				return data.filterGroup.selected.map((el) => {
+					return {
+						...el.id,
+						status:
+							["warning", "danger"].includes(
+								this.$options.filters.dateStatus(el.id.limitDate)
+							) && el.id.status == "MEMBER"
+								? "RENEW"
+								: el.id.status,
+						expired: false
+					}
+				})
+			},
+			error(err) {
+				this.error = err.message
+			}
+		},
+		contacts: {
+			query: SEARCH_MEMBER,
+			variables() {
+				return {
+					hash: this.currentAccount.hash
+				}
+			},
+			update(data) {
+				if (!data.idFromHash) return {}
+				let idFromHash = data.idFromHash
+
+				let received_certifications = this.$favourites
+					.compileArrays(
+						idFromHash.all_certifiersIO,
+						idFromHash.received_certifications.map((certif) => ({
+							...certif,
+							...certif.from
+						}))
+					)
+					.map((el) => {
+						const ret = el.from ? el.from : el
+						const member = el.id ? el.id : el
+						return {
+							...ret,
+							status:
+								["warning", "danger"].includes(
+									this.$options.filters.dateStatus(member.limitDate)
+								) && member.status == "MEMBER"
+									? "RENEW"
+									: member.status,
+							expired: member.expired || false
+						}
+					})
+
+				let sent_certifications = this.$favourites
+					.compileArrays(
+						idFromHash.all_certifiedIO,
+						idFromHash.sent_certifications.map((certif) => ({
+							...certif,
+							...certif.to
+						}))
+					)
+					.map((el) => {
+						const ret = el.to ? el.to : el
+						const member = el.id ? el.id : el
+
+						return {
+							...ret,
+							status:
+								["warning", "danger"].includes(
+									this.$options.filters.dateStatus(member.limitDate)
+								) && member.status == "MEMBER"
+									? "RENEW"
+									: member.status,
+							expired: member.expired || false
+						}
+					})
+
+				return {
+					sent_certifications,
+					received_certifications
+				}
+			},
+			error(err) {
+				this.error = err.message
+			}
+		}
+	},
+	methods: {
+		saveUID() {
+			localStorage.setItem("UID", document.getElementById("UID").value)
+		},
+		showPane(pane) {
+			const panel = new Tab(pane)
+
+			if (panel) panel.show()
+		},
+		pushRoute(e) {
+			this.$router.push(
+				this.localePath({
+					name: "mes-suivis",
+					hash: "#" + e.target.id
+				})
+			)
+		}
+	},
+	nuxtI18n: {
+		paths: {
+			fr: "/mes-suivis",
+			en: "/my-follow-ups",
+			es: "/mis-seguimientos",
+			de: "/meine-nachfolge",
+			it: "/i-miei-follow-up"
+		}
+	},
+	mounted() {
+		$nuxt.$emit("changeRoute", this.breadcrumb)
+
+		const $this = this
+		document.querySelectorAll('button[data-bs-toggle="tab"]').forEach((el) => {
+			el.addEventListener("shown.bs.tab", function (event) {
+				$this.$favourites.fixColumns()
+			})
+		})
+
+		if (this.$route.hash && this.currentAccount.hash != "") {
+			this.showPane(this.$route.hash)
+		}
+	},
+	watch: {
+		$route(n, o) {
+			this.showPane(n.hash ? n.hash : "#favoris")
+		}
+	}
+}
+</script>
+
+<style lang="scss">
+#suivis {
+	flex-direction: column;
+
+	@media (min-width: 768px) {
+		flex-direction: row;
+	}
+}
+</style>

pages/parametres.vue

 <template>
 	<main class="container">
-		<h2 class="text-center my-5 font-weight-light">{{ $t("params.title") }}</h2>
+		<h2 class="text-center my-5 font-weight-light">
+			<solid-adjustments-icon style="width: 2rem" aria-hidden="true" />&nbsp;{{
+				$t("params.title")
+			}}
+		</h2>
 		<NavigationLoader :isLoading="$apollo.queries.allParameters.loading" />
 		<transition name="fade">
-			<div class="alert alert-danger" v-if="error">{{ error }}</div>
+			<AlertDefault type="danger" v-if="error">{{ error }}</AlertDefault>
 		</transition>
 		<transition name="fade">
 			<div class="table-responsive" v-if="allParameters">
-				<table class="table table-striped">
+				<table class="table table-striped table-bordered">
 					<thead>
-						<th>{{ $t("nom") }}</th>
-						<th class="d-none d-sm-table-cell">{{ $t("type") }}</th>
-						<th>{{ $t("valeur") }}</th>
-						<th class="d-none d-md-table-cell">{{ $t("description") }}</th>
+						<tr>
+							<th>{{ $t("nom") }}</th>
+							<th class="d-none d-sm-table-cell">{{ $t("type") }}</th>
+							<th class="td-date">{{ $t("valeur") }}</th>
+							<th class="d-none d-md-table-cell">{{ $t("description") }}</th>
+						</tr>
 					</thead>
 					<tbody>
 						<tr v-for="param in allParameters" :key="param.name">
@@ -20,7 +26,19 @@
 							<td class="d-none d-sm-table-cell">
 								{{ param.par_type }}
 							</td>
-							<td>{{ param.value }}</td>
+							<td
+								v-if="param.par_type == 'DURATION'"
+								v-html="getDuration(param.value)"></td>
+							<td v-else-if="param.par_type == 'DATE'">
+								{{ $d(new Date(param.value * 1000)) }}
+							</td>
+							<td v-else-if="param.par_type == 'FLOAT'">
+								{{ param.value * 100 + "%" }}
+							</td>
+							<td
+								v-else-if="param.name == 'ud0'"
+								v-html="param.value / 100 + '&nbsp;Ğ1'"></td>
+							<td v-else>{{ param.value }}</td>
 							<td
 								class="d-none d-md-table-cell"
 								v-html="$t('params.name.' + param.name)"></td>
@@ -51,7 +69,27 @@ export default {
 			error: null
 		}
 	},
+	methods: {
+		getDuration(duration) {
+			let min = Math.floor(duration / 60)
+			let sec = duration % 60
+			let h = Math.floor(min / 60)
+			min = min % 60
+			let days = Math.floor(h / 24)
+			h = h % 24
+
+			sec = sec == 0 ? "" : sec + "s"
+			min = min == 0 ? "" : min + "min"
+			h = h == 0 ? "" : h + "h"
+			days = days == 0 ? "" : this.$tc("jours", days) + "&nbsp;"
+
+			return days + h + min + sec
+		}
+	},
 	apollo: {
+		$client() {
+			return this.getApolloClient
+		},
 		allParameters: {
 			query: PARAMS,
 			update(data) {
@@ -74,7 +112,9 @@ export default {
 		paths: {
 			fr: "/parametres",
 			en: "/parameters",
-			es: "/parametros"
+			es: "/parametros",
+			de: "/einstellungen",
+			it: "/impostazioni"
 		}
 	},
 	mounted() {

pages/previsions/index.vue → pages/previsions/futures_entrees.vue

@@ -2,14 +2,16 @@
 	<main class="container">
 		<NavigationLoader :isLoading="$apollo.queries.wwResult.loading" />
 		<transition name="fade">
-			<div class="alert alert-danger" v-if="error">{{ error }}</div>
+			<AlertDefault type="danger" v-if="error">{{ error }}</AlertDefault>
 		</transition>
 		<transition name="fade">
 			<div v-if="wwResult">
 				<h2 class="text-center my-5 font-weight-light">
-					{{ $t("previsions.title") }}
+					<solid-login-icon style="width: 2rem" aria-hidden="true" />&nbsp;{{
+						$t("previsions.futureentries")
+					}}
 					<small
-						><span class="badge badge-secondary">{{
+						><span class="badge bg-secondary">{{
 							$tc("dossier.attente", wwResult.dossiers_nb)
 						}}</span></small
 					>
@@ -46,45 +48,55 @@
 						<div v-if="display == 'forecastsByNames'">
 							<h3>{{ $t("previsions.parmembre") }}</h3>
 							<div class="table-responsive">
-								<table class="table table-striped table-hover">
+								<table class="table table-striped table-hover border">
 									<tbody>
 										<tr
 											v-for="forecast in wwResult.forecastsByNames"
 											:key="forecast.member.uid"
+											tabindex="0"
+											:title="$t('membre.voirinfos')"
 											@click="
 												$router.push(
 													localePath({
-														name: 'membres-hash',
-														params: { hash: forecast.member.hash }
+														name: 'membres-profil',
+														query: { hash: forecast.member.hash }
+													})
+												)
+											"
+											@keyup.enter="
+												$router.push(
+													localePath({
+														name: 'membres-profil',
+														query: { hash: forecast.member.hash }
 													})
 												)
 											">
-											<th scope="row">
-												<span v-if="$isFavourite(forecast.member.uid)"
-													>★&nbsp;</span
-												>
-												{{ forecast.member.uid }}
-												<BadgeStatus :membre="forecast.member" />
-											</th>
-											<td class="p-0">
+											<td class="td-uid">
+												<span
+													class="text-truncate mw-100 d-inline-block txt-secondary">
+													<span
+														v-if="
+															$favourites.list.includes(forecast.member.uid)
+														"
+														>★&nbsp;</span
+													>{{ forecast.member.uid }}
+												</span>
+											</td>
+											<td>
 												<div
-													class="d-flex justify-content-between p-3"
+													class="p-date d-flex justify-content-evenly gap-1 align-items-center"
 													v-for="date in forecast.forecasts"
 													:key="date.date">
 													<div
-														class="forecast_date mr-3"
+														class="text-center txt-secondary"
 														v-if="date.date < 9999999999">
-														{{ $d(new Date(date.date * 1000), "short") }}
-														{{ $t("time.a") }}
-														{{
-															$d(new Date(date.date * 1000), "hour").replace(
-																" ",
-																"&nbsp;"
-															)
-														}}
+														{{ $d(new Date(date.date * 1000)) }} {{ $t("time.a") }}
+														{{ new Date(date.date * 1000).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) }}
+													</div>
+													<div class="text-center" v-else>N/A</div>
+													<div class="badge bg-info">
+														{{ Math.round(date.proba * 100) }}&nbsp;%
 													</div>
-													<div class="forecast_date mr-3" v-else>N/A</div>
-													<div>{{ Math.round(date.proba * 100) }}&nbsp;%</div>
 												</div>
 											</td>
 										</tr>
@@ -95,35 +107,42 @@
 						<div v-if="display == 'forecastsByDates'">
 							<h3>{{ $t("previsions.pardate") }}</h3>
 							<div class="table-responsive">
-								<table class="table table-striped">
+								<table class="table table-striped border">
 									<tbody>
 										<tr
 											v-for="forecast in wwResult.forecastsByDates"
 											:key="forecast.date">
-											<th
-												scope="row"
-												class="forecast_date"
-												v-if="forecast.date < 9999999999">
-												{{ $d(new Date(forecast.date * 1000), "short") }}
-												{{ $t("time.a") }}
-												{{ $d(new Date(forecast.date * 1000), "hour") }}
-											</th>
-											<th scope="row" class="forecast_date" v-else>N/A</th>
-											<td class="p-0">
+											<td class="text-center" v-if="forecast.date < 9999999999">
+												<span class="txt-secondary">
+													{{ $d(new Date(forecast.date * 1000)) }} {{ $t("time.a") }}
+													{{ new Date(forecast.date * 1000).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) }}
+												</span>
+											</td>
+											<td class="text-center" v-else>N/A</td>
+											<td class="p-0 td-uid">
 												<div class="list-group rounded-0">
 													<nuxt-link
-														class="list-group-item list-group-item-action border-0 d-flex justify-content-between"
-														:to="localePath('/membres/' + member.member.hash)"
+														class="list-group-item list-group-item-action border-0 d-flex justify-content-between align-items-center"
+														:title="$t('membre.voirinfos')"
+														:to="
+															localePath(
+																'/membres/profil/?hash=' + member.member.hash
+															)
+														"
 														v-for="member in forecast.forecasts"
 														:key="member.member.uid">
-														<div class="mr-3">
-															<span v-if="$isFavourite(member.member.uid)"
-																>★&nbsp;</span
-															>
-															{{ member.member.uid }}
-															<BadgeStatus :membre="member.member" />
+														<div class="mw-100 text-center">
+															<span class="text-truncate d-inline-block mw-100">
+																<span
+																	v-if="
+																		$favourites.list.includes(member.member.uid)
+																	"
+																	>★&nbsp;</span
+																>
+																{{ member.member.uid }}
+															</span>
 														</div>
-														<div>
+														<div class="badge bg-info">
 															{{ Math.round(member.proba * 100) }}&nbsp;%
 														</div>
 													</nuxt-link>
@@ -155,18 +174,25 @@ export default {
 				{
 					text: this.$t("previsions.title"),
 					active: true
+				},
+				{
+					text: this.$t("previsions.futureentries"),
+					active: true
 				}
 			],
 			error: null,
-			display: "forecastsByNames"
+			display: ""
 		}
 	},
 	methods: {
 		save() {
-			localStorage.setItem("previsions", this.display)
+			localStorage.previsions = this.display
 		}
 	},
 	apollo: {
+		$client() {
+			return this.getApolloClient
+		},
 		wwResult: {
 			query: NEWCOMERS,
 			update(data) {
@@ -250,30 +276,46 @@ export default {
 	},
 	nuxtI18n: {
 		paths: {
-			fr: "/previsions",
-			en: "/forecasts",
-			es: "/pronosticos"
+			fr: "/previsions/futures_entrees",
+			en: "/forecasts/future_exits",
+			es: "/pronosticos/futuras_salidas",
+			de: "/prognosen/zukunftige_veroffentlichungen",
+			it: "/previsioni/ingressi-futuri"
 		}
 	},
 	mounted() {
 		$nuxt.$emit("changeRoute", this.breadcrumb)
-		if (localStorage.previsions) {
-			this.display = localStorage.getItem("previsions")
-		}
+		this.display = localStorage.previsions
+			? localStorage.previsions
+			: "forecastsByNames"
 	}
 }
 </script>
 
 <style lang="scss" scoped>
+.table-hover > tbody > tr:focus > * {
+	--bs-table-accent-bg: var(--bs-table-hover-bg);
+	color: var(--bs-table-hover-color);
+}
+
+.p-date,
 .list-group-item {
-	background: transparent;
-	&:hover {
-		background: rgba(0, 0, 255, 0.075);
-		color: var(--text-primary-color);
+	flex-direction: column;
+
+	&:not(:last-child) {
+		border-bottom: 1px solid var(--border-color) !important;
 	}
 }
 
-.forecast_date {
-	min-width: 150px;
+.td-uid {
+	width: 50%;
+}
+
+@media (min-width: 576px) {
+	.p-date,
+	.list-group-item {
+		flex-direction: row;
+		padding: 0.5rem;
+	}
 }
 </style>

pages/previsions/futures_sorties.vue

 <template>
 	<main class="container">
-		<h2 class="text-center my-5 font-weight-light">{{ $t("futureexits") }}</h2>
-		<div class="row mb-4">
-			<div class="col-6 m-auto text-center">
-				<label for="period" class="form-label">{{
-					$t("previsions.period.title")
-				}}</label>
-				<select
-					class="form-control"
-					id="period"
-					aria-describedby="periodHelp"
-					v-model="period"
-					@change="save">
-					<option v-for="index in 30" :key="index" :value="index">
-						{{ $tc("jours", index) }}
-					</option>
-				</select>
-				<small id="periodHelp" class="form-text text-muted">{{
-					$t("previsions.period.desc")
-				}}</small>
-			</div>
-		</div>
-		<NavigationLoader :isLoading="$apollo.queries.wwResult.loading" />
+		<h2 class="text-center my-5 font-weight-light">
+			<solid-logout-icon style="width: 2rem" aria-hidden="true" />&nbsp;{{
+				$t("previsions.futureexits")
+			}}
+		</h2>
+		<NavigationLoader :isLoading="$apollo.loading" />
 		<transition name="fade">
-			<div
-				class="alert alert-danger"
-				v-if="error && !$apollo.queries.wwResult.loading">
-				{{ error }}
-			</div>
+			<AlertDefault type="danger" v-if="error">{{ error }}</AlertDefault>
 		</transition>
 		<transition name="fade">
-			<div v-if="wwResult && !$apollo.queries.wwResult.loading">
-				<div class="row">
-					<div class="col-md-6 col-lg-6">
-						<h2 class="h4 text-danger text-center">{{ $t("statut.renew") }}</h2>
-						<MemberList
-							:members="wwResult['membership']"
-							:displayPubkey="false" />
-					</div>
-					<div class="col-md-6 col-lg-6">
-						<h2 class="h4 text-danger text-center">
-							{{ $t("statut.bientotmanquecertif") }}
-						</h2>
-						<MemberList
-							:members="wwResult['outOfCerts']"
-							:displayPubkey="false" />
-					</div>
+			<div class="row result" v-if="!$apollo.loading">
+				<div class="col-md-6 mb-5" v-if="memEnds">
+					<h2 class="h4 text-danger text-center text-truncate">
+						{{ $t("statut.renew") }}
+					</h2>
+					<MemberList
+						defaultSort="date_membership"
+						:members="memEnds"
+						id="adhesion" />
+				</div>
+				<div class="col-md-6 mb-5" v-if="certEnds">
+					<h2 class="h4 text-danger text-center text-truncate">
+						{{ $t("statut.bientotmanquecertif") }}
+					</h2>
+					<MemberList
+						defaultSort="date_certs"
+						:members="certEnds"
+						id="certif" />
 				</div>
 			</div>
 		</transition>
@@ -54,9 +36,7 @@
 
 <script>
 import { NEXT_EXITS } from "@/graphql/queries.js"
-
-const day = 24 * 60 * 60
-const defaultPeriod = 30 * day
+import { NEXT_LOOSE_CERTS } from "@/graphql/queries.js"
 
 export default {
 	data() {
@@ -68,81 +48,76 @@ export default {
 				},
 				{
 					text: this.$t("previsions.title"),
-					to: "/previsions"
+					active: true
 				},
 				{
-					text: this.$t("futureexits"),
+					text: this.$t("previsions.futureexits"),
 					active: true
 				}
 			],
 			error: null,
-			period: 30
+			period: 1317600
 		}
 	},
-	methods: {
-		save() {
-			this.error = null
-			localStorage.setItem("previsions_period", this.getPeriod() / day)
-		},
-		addValue(arr, val) {
-			if (
-				arr.filter(function (e) {
-					return e.uid === val.uid
-				}).length == 0
-			) {
-				arr.push(val)
-			}
-			return arr
-		},
-		getPeriod() {
-			if (this.period != "") {
-				let tempPeriod = parseInt(this.period)
-				if (tempPeriod < 1) {
-					this.error = this.$t("error.tooSmall", [tempPeriod, 1, 30])
-					return day
-				}
-				if (tempPeriod > 30) {
-					this.error = this.$t("error.tooBig", [tempPeriod, 1, 30])
-					return 30 * day
-				}
-				return this.period * day
-			}
-			return defaultPeriod
+	computed: {
+		getParams() {
+			return { period: this.period }
 		}
 	},
 	apollo: {
-		wwResult: {
+		$client() {
+			return this.getApolloClient
+		},
+		memEnds: {
 			query: NEXT_EXITS,
 			variables() {
-				return { period: this.getPeriod() }
+				return this.getParams
+			},
+			error(err) {
+				this.error = err.message
 			},
 			update(data) {
-				let result = { membership: [], outOfCerts: [] }
-
-				data.memEnds.forEach((member) => {
-					if (
-						["danger", "warning"].includes(
-							this.$options.filters.dateStatus(member.limitDate)
-						)
-					) {
-						result.membership.push(member)
-					}
-
-					if (
-						["danger", "warning"].includes(
-							this.$options.filters.dateStatus(
-								member.received_certifications.limit
-							)
-						)
-					) {
-						result.outOfCerts.push(member)
-					}
-				})
-
-				return result
+				return data.memEnds
+					.filter((el) => {
+						return el.limitDate > Date.now() / 1000
+					})
+					.map((el) => {
+						return {
+							...el,
+							status:
+								["warning", "danger"].includes(
+									this.$options.filters.dateStatus(el.limitDate)
+								) && el.status == "MEMBER"
+									? "RENEW"
+									: el.status
+						}
+					})
+			}
+		},
+		certEnds: {
+			query: NEXT_LOOSE_CERTS,
+			variables() {
+				return this.getParams
 			},
 			error(err) {
 				this.error = err.message
+			},
+			update(data) {
+				return data.certEnds
+					.filter((el) => {
+						return el.certsLimit > Date.now() / 1000
+					})
+					.map((el) => {
+						return {
+							...el,
+							status:
+								["warning", "danger"].includes(
+									this.$options.filters.dateStatus(el.limitDate)
+								) && el.status == "MEMBER"
+									? "RENEW"
+									: el.status
+						}
+					})
 			}
 		}
 	},
@@ -150,14 +125,13 @@ export default {
 		paths: {
 			fr: "/previsions/futures_sorties",
 			en: "/forecasts/future_exits",
-			es: "/pronosticos/futuras_salidas"
+			es: "/pronosticos/futuras_salidas",
+			de: "/prognosen/zukunftige_veroffentlichungen",
+			it: "/previsioni/future-uscite"
 		}
 	},
 	mounted() {
 		$nuxt.$emit("changeRoute", this.breadcrumb)
-		if (localStorage.previsions_sorties) {
-			this.period = localStorage.getItem("previsions_period")
-		}
 	}
 }
 </script>