.githooks/pre-commit

+#!/bin/bash
+
+# Color for echo
+RED='\e[31m'
+GREEN='\e[32m'
+BLUE='\e[34m'
+UNDERLINE='\e[4m'
+BOLD='\e[1m'
+NC='\e[0m'
+
+if ! command -v jq &> /dev/null
+then
+    echo -e "${RED}I require jq but it's not installed."
+    echo -e "${BOLD}${GREEN}See informations here : ${NC}${BLUE}${UNDERLINE}https://stedolan.github.io/jq/download/${NC}"
+    echo -e "${RED}We can't check if you have put all i18n keys in JSON files${NC}"
+    exit 0
+else
+    $(git rev-parse --show-toplevel)/utils/findMissingI18nKeys.sh
+    FINDING_MISSING_KEYS=$?
+    echo -e "$BLUE$FINDING_MISSING_KEYS$NC"
+    if [ $FINDING_MISSING_KEYS -ne 0 ]; then
+        echo -e "${RED}You must to complete all i18n keys used in pages${NC}"
+        git status i18n/locales/*.json
+        exit $FINDING_MISSING_KEYS
+    fi
+fi
+exit 0

.gitignore

@@ -37,7 +37,6 @@ build/Release
 # Dependency directories
 node_modules/
 jspm_packages/
-package-lock.json
 
 # TypeScript v1 declaration files
 typings/

.gitlab-ci.yml

+stages:
+  - tests
+  - build
+  - publish
+
+check-i18n:
+  image: debian:latest
+  stage: tests
+  script:
+    - apt update
+    - apt --yes install jq
+    - bash utils/findMissingI18nKeys.sh
+
+build:
+  image: node:20-bullseye
+  stage: tests
+  script:
+    - npm install
+    - npm run build
+
+generate:
+  image: node:20-bullseye
+  stage: build
+  script:
+    - npm install
+    - npm run build
+    - yarn generate
+  artifacts:
+    paths:
+      - dist
+    expire_in: 2 days
+  rules:
+    - if: $CI_COMMIT_TAG
+      when: manual
+
+pages:
+  stage: publish
+  needs: ["generate"]
+  script:
+    - ls dist
+  artifacts:
+    paths:
+      - dist
+    expire_in: 1 week
+  rules:
+    - if: $CI_COMMIT_TAG
+
+endpoint_check:
+  image: node:20-bullseye
+  stage: build
+  script:
+    - |
+      if git diff --name-only $CI_COMMIT_BEFORE_SHA $CI_COMMIT_SHA | grep -q "endpoints.json"; then
+        npm install
+        node graphql/generateEndpoints.js
+        git config --global user.email "ci@duniter.org"
+        git config --global user.name "CI Bot"
+        git add -A
+        git commit -m "Auto-update generated endpoints"
+        git push https://gitlab-ci-token:${CI_PUSH_TOKEN}@${CI_SERVER_HOST}/${CI_PROJECT_PATH}.git HEAD:$CI_COMMIT_REF_NAME
+      else
+        echo "No changes in endpoints.json"
+      fi
+  rules:
+    - changes:
+        - endpoints.json
+

README.md

@@ -2,18 +2,31 @@
 
 ## Prerequisite
 
-This project needs NodeJS v16
+This project needs NodeJS v20
+
+In order to use the `./utils/findMissingI18nKeys.sh` script, this project needs :
+
+- jq ([Download](https://stedolan.github.io/jq/download/))
 
 ## Contribute
 
 ```bash
 $ git clone https://git.duniter.org/paidge/wotwizard-ui.git
 $ cd wotwizard-ui
-$ nvm use 16
+# If you want to use the git's hook to prevent commits if language strings are missing
+$ git config --local core.hooksPath .githooks/
+# To be sure to use Node 20
+$ nvm use 20
+# Create your branch
 $ git checkout -b my-branch
+# Install the dependencies of the project
 $ npm install
+# Compile the project and launch a local server for development
 $ npm run dev
 ... Development...
+# If you don't use th git's hook and want to create missing language strings
+$ npm run trad
+# Analyze build assets sizes
 $ npm run analyze
 $ git commit
 $ git push
@@ -21,6 +34,10 @@ $ git push
 
 Then create a merge request.
 
+### Add new wotwizard graphql endpoint
+
+Just add your new endpoint in `endpoints.json` file and rebuild app.
+
 ### Add a new page
 
 Copy/paste the file `./pages/template.vue` and rename it to create a new page.
@@ -29,10 +46,6 @@ This template is extremly commented for beginners so you can create an apollo qu
 
 If you want to add your page in the menu, edit the `menus` variable in the `./layouts/default.vue` file.
 
-### ChartJS
-
-There is an example to use component graph lazyly in `./pages/chartjs.vue`.
-
 ### GraphQL
 
 All files concerning Apollo Graphql are stored in `./graphql`.
@@ -41,7 +54,7 @@ The schema documentation is stored in the `./graphql/doc/graphQLschema.txt` file
 
 In `queries.js` you'll find all queries.
 
-If you want to add a 2nd graphQL server, edit `./graphql/clients/endpoints.js` to put your URL and uncomment the line concerning the `apollo.clientConfigs.myotherclient` option in `nuxt.config.js`. I have not tested this functionnality.
+If you want to add a graphQL server, add a file in `./graphql/endpoints/` and edit `./nuxt.config.js` to add an entry in `apollo.clientConfigs` for your file.
 
 ### Special Directories
 
@@ -96,8 +109,8 @@ More information about the usage of this directory in [the documentation](https:
 ## Build Setup
 
 ```bash
-# use node 16
-$ nvm use 16
+# use node 20
+$ nvm use 20
 
 # install dependencies
 $ npm install
@@ -107,5 +120,5 @@ $ npm run build
 $ npm run start
 
 # Or generate static project
-$ npm run generates
+$ npm run generate
 ```

assets/css/_bootstrap.scss

+/*!
+ * Bootstrap v5.1.3 (https://getbootstrap.com/)
+ * Copyright 2011-2021 The Bootstrap Authors
+ * Copyright 2011-2021 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ */
+
+// scss-docs-start import-stack
+// Configuration
 @import "~bootstrap/scss/functions";
 @import "~bootstrap/scss/variables";
 @import "~bootstrap/scss/mixins";
+@import "~bootstrap/scss/utilities";
+
+@import "./override-mixins";
+
+// Layout
 @import "~bootstrap/scss/root";
 @import "~bootstrap/scss/reboot";
 @import "~bootstrap/scss/type";
-@import "~bootstrap/scss/images";
-@import "~bootstrap/scss/code";
+// @import "~bootstrap/scss/images";
+@import "~bootstrap/scss/containers";
 @import "~bootstrap/scss/grid";
 @import "~bootstrap/scss/tables";
-@import "~bootstrap/scss/forms";
-@import "~bootstrap/scss/buttons";
+
+// Forms
+// @import "~bootstrap/scss/forms/labels";
+@import "~bootstrap/scss/forms/form-text";
+@import "~bootstrap/scss/forms/form-control";
+@import "~bootstrap/scss/forms/form-select";
+@import "~bootstrap/scss/forms/form-check";
+// @import "~bootstrap/scss/forms/form-range";
+@import "~bootstrap/scss/forms/floating-labels";
+@import "~bootstrap/scss/forms/input-group";
+// @import "~bootstrap/scss/forms/validation";
+
+// Components
+@import "./custom_buttons";
 @import "~bootstrap/scss/transitions";
-//  @import "~bootstrap/scss/dropdown";
-//  @import "~bootstrap/scss/button-group";
-@import "~bootstrap/scss/input-group";
-//  @import "~bootstrap/scss/custom-forms";
+// @import "~bootstrap/scss/dropdown";
+@import "~bootstrap/scss/button-group";
 @import "~bootstrap/scss/nav";
 @import "~bootstrap/scss/navbar";
 @import "~bootstrap/scss/card";
+// @import "~bootstrap/scss/accordion";
 @import "~bootstrap/scss/breadcrumb";
-//  @import "~bootstrap/scss/pagination";
+// @import "~bootstrap/scss/pagination";
 @import "~bootstrap/scss/badge";
-//  @import "~bootstrap/scss/jumbotron";
 @import "~bootstrap/scss/alert";
-//  @import "~bootstrap/scss/progress";
-//  @import "~bootstrap/scss/media";
+// @import "~bootstrap/scss/progress";
 @import "~bootstrap/scss/list-group";
 @import "~bootstrap/scss/close";
-//  @import "~bootstrap/scss/toasts";
-//  @import "~bootstrap/scss/modal";
+// @import "~bootstrap/scss/toasts";
+// @import "~bootstrap/scss/modal";
 @import "~bootstrap/scss/tooltip";
-//  @import "~bootstrap/scss/popover";
-//  @import "~bootstrap/scss/carousel";
-//  @import "~bootstrap/scss/spinners";
-@import "~bootstrap/scss/utilities";
-@import "~bootstrap/scss/print";
+// @import "~bootstrap/scss/popover";
+// @import "~bootstrap/scss/carousel";
+// @import "~bootstrap/scss/spinners";
+// TODO : A tester
+// @import "~bootstrap/scss/offcanvas";
+// TODO : A tester
+// @import "~bootstrap/scss/placeholders";
+
+// Helpers
+// @import "~bootstrap/scss/helpers/clearfix";
+// @import "~bootstrap/scss/helpers/colored-links";
+// @import "~bootstrap/scss/helpers/ratio";
+// @import "~bootstrap/scss/helpers/position";
+// @import "~bootstrap/scss/helpers/stacks";
+@import "~bootstrap/scss/helpers/visually-hidden";
+// @import "~bootstrap/scss/helpers/stretched-link";
+@import "~bootstrap/scss/helpers/text-truncation";
+@import "~bootstrap/scss/helpers/vr";
+
+// Utilities
+@import "~bootstrap/scss/utilities/api";

assets/css/_custom_buttons.scss

+//
+// Base styles
+//
+
+.btn {
+	display: inline-block;
+	font-family: $btn-font-family;
+	font-weight: $btn-font-weight;
+	line-height: $btn-line-height;
+	color: $body-color;
+	text-align: center;
+	text-decoration: if($link-decoration == none, null, none);
+	white-space: $btn-white-space;
+	vertical-align: middle;
+	cursor: if($enable-button-pointers, pointer, null);
+	user-select: none;
+	background-color: transparent;
+	border: $btn-border-width solid transparent;
+	@include button-size(
+		$btn-padding-y,
+		$btn-padding-x,
+		$btn-font-size,
+		$btn-border-radius
+	);
+	@include transition($btn-transition);
+
+	&:hover {
+		text-decoration: if($link-hover-decoration == underline, none, null);
+	}
+
+	.btn-check:focus + &,
+	&:focus {
+		outline: 0;
+		box-shadow: $btn-focus-box-shadow;
+	}
+
+	.btn-check:checked + &,
+	.btn-check:active + &,
+	&:active,
+	&.active {
+		@include box-shadow($btn-active-box-shadow);
+
+		&:focus {
+			@include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
+		}
+	}
+
+	&:disabled,
+	&.disabled,
+	fieldset:disabled & {
+		pointer-events: none;
+		opacity: $btn-disabled-opacity;
+		@include box-shadow(none);
+	}
+}
+
+//
+// Alternate buttons
+//
+
+// scss-docs-start btn-variant-loops
+@each $color, $value in $theme-colors {
+	.btn-#{$color} {
+		@include button-variant($value, $value);
+	}
+}
+
+@each $color, $value in $theme-colors {
+	.btn-outline-#{$color} {
+		@include button-outline-variant($value);
+	}
+}
+// scss-docs-end btn-variant-loops
+
+//
+// Link buttons
+//
+
+// Make a button look and behave like a link
+.btn-link {
+	font-weight: $font-weight-normal;
+	color: $btn-link-color;
+	text-decoration: $link-decoration;
+
+	&:hover {
+		color: $btn-link-hover-color;
+		text-decoration: $link-hover-decoration;
+	}
+
+	&:focus {
+		text-decoration: $link-hover-decoration;
+	}
+
+	&:disabled,
+	&.disabled {
+		color: $btn-link-disabled-color;
+	}
+
+	// No need for an active state here
+}
+
+//
+// Button Sizes
+//
+
+.btn-lg {
+	@include button-size(
+		$btn-padding-y-lg,
+		$btn-padding-x-lg,
+		$btn-font-size-lg,
+		$btn-border-radius-lg
+	);
+}
+
+.btn-sm {
+	@include button-size(
+		$btn-padding-y-sm,
+		$btn-padding-x-sm,
+		$btn-font-size-sm,
+		$btn-border-radius-sm
+	);
+}

assets/css/_override-mixins.scss

+@mixin button-outline-variant(
+	$color,
+	$color-hover: color-contrast($color),
+	$active-background: $color,
+	$active-border: $color,
+	$active-color: color-contrast($active-background)
+) {
+	color: $color;
+	border-color: $color;
+
+	.btn-check:focus + &,
+	&:focus {
+		box-shadow: 0 0 0 $btn-focus-width rgba($color, 0.5);
+	}
+
+	.btn-check:checked + &,
+	.btn-check:active + &,
+	&:active,
+	&.active,
+	&.dropdown-toggle.show {
+		color: $active-color;
+		background-color: $active-background;
+		border-color: $active-border;
+
+		&:focus {
+			@if $enable-shadows {
+				@include box-shadow(
+					$btn-active-box-shadow,
+					0 0 0 $btn-focus-width rgba($color, 0.5)
+				);
+			} @else {
+				// Avoid using mixin so we can pass custom focus shadow properly
+				box-shadow: 0 0 0 $btn-focus-width rgba($color, 0.5);
+			}
+		}
+	}
+
+	&:disabled,
+	&.disabled {
+		color: $color;
+		background-color: transparent;
+	}
+}

assets/css/style.scss

 // Bootstrap variables customisation
+// Colors
+$border-color: var(--border-color);
+$secondary: #adb5bd;
+$success: #75b798;
+$info: #3d8bfd;
+$danger: #b02a37;
+$warning: #fd9843;
+
+// Mark
+$mark-padding: 0.2em 0;
+$mark-bg: yellow;
+
+// Forms
+$form-check-input-checked-bg-color: $info;
+
 // Fonts & Typo
-$link-hover-decoration: none;
-$text-muted: var(--text-secondary-color);
-$enable-responsive-font-sizes: true;
+$link-decoration: none;
+$text-muted: var(--txt-muted-color);
 $font-family-base: Montserrat, Helvetica, Arial, serif;
 $small-font-size: 70%;
+$code-font-size: 85%;
+$link-hover-decoration: underline;
 
-// Body
-$body-bg: var(--background-color-primary);
-$body-color: var(--text-primary-color);
+// Badges
+$badge-font-size: 0.7em;
+$badge-font-weight: 500;
 
-// Tables
-$table-bg: var(--background-color-primary);
-$table-color: var(--text-primary-color);
-$table-head-bg: var(--background-color-secondary);
-$table-hover-bg: rgba(0, 0, 255, 0.075);
+// Tables;
+$table-th-font-weight: 500;
+$table-bg: var(--bg-primary-color);
+$table-color: var(--txt-primary-color);
+$table-hover-bg: var(--bg-secondary-color);
+$table-striped-bg: var(--bg-menu-color);
 
 // Breadcrumb
-$breadcrumb-bg: var(--background-color-secondary);
-$breadcrumb-active-color: var(--text-primary-color);
-$breadcrumb-divider-color: var(--text-primary-color);
+$breadcrumb-bg: var(--bg-menu-color);
+$breadcrumb-active-color: var(--txt-primary-color);
+$breadcrumb-divider-color: var(--txt-primary-color);
+$breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='#6c757d'/%3E%3C/svg%3E");
 
 // List-groups
-$list-group-bg: var(--background-color-secondary);
-$list-group-active-bg: rgba(0, 0, 255, 0.075);
-$list-group-active-color: var(--text-primary-color);
-$list-group-action-hover-color: var(--text-secondary-color);
-$list-group-action-color: var(--text-primary-color);
-$list-group-border-width: 0;
+$list-group-bg: transparent;
+$list-group-color: var(--txt-secondary-color);
+$list-group-active-bg: var(--bg-secondary-color);
+$list-group-active-color: var(--txt-secondary-color);
+$list-group-border-color: var(--border-color);
+$list-group-action-hover-color: var(--txt-secondary-color);
+$list-group-hover-bg: var(--bg-secondary-color);
 
 // Cards
-$card-bg: var(--background-color-secondary);
+$card-bg: var(--bg-secondary-color);
 
-// Close button
-$close-color: var(--text-primary-color);
-$close-font-weight: 500;
+// Tooltips
+$tooltip-max-width: 300px;
+$tooltip-opacity: 1;
+$tooltip-bg: var(--bg-menu-color);
+$tooltip-color: var(--txt-secondary-color);
+$tooltip-font-size: 1rem;
+$tooltip-arrow-height: 1rem;
+$tooltip-arrow-width: 1.5rem;
 
-// Mark
-$mark-padding: 0.2em 0;
-$mark-bg: yellow;
+// Tabs
+$nav-tabs-link-active-bg: var(--txt-secondary-color);
+$nav-tabs-link-active-color: var(--bg-primary-color);
+$nav-tabs-link-hover-bg: $nav-tabs-link-active-bg;
+$nav-tabs-border-color: var(--txt-primary-color);
+$nav-tabs-link-active-border-color: $nav-tabs-border-color
+	$nav-tabs-border-color $nav-tabs-link-active-bg;
+$nav-tabs-link-hover-border-color: $nav-tabs-border-color $nav-tabs-border-color
+	$nav-tabs-link-hover-bg;
+$nav-link-color: var(--txt-link);
+$nav-link-hover-color: $nav-tabs-link-active-color;
 
 @import "font";
 @import "bootstrap";
 
-.table-hover tbody tr,
-thead.sortable th {
+body {
+	background: var(--bg-primary-color);
+	color: var(--txt-primary-color);
+}
+
+a,
+a:hover {
+	color: var(--txt-link);
+}
+
+.txt-secondary {
+	color: var(--txt-secondary-color);
+}
+
+.bg-warning,
+.bg-info,
+.bg-success,
+.bg-secondary {
+	@extend .text-dark;
+}
+
+.table {
+	&-fixed {
+		table-layout: fixed;
+	}
+
+	&-responsive {
+		tbody {
+			display: block;
+			overflow: auto;
+			scrollbar-width: thin;
+		}
+
+		thead,
+		tbody tr {
+			display: table;
+			width: 100%;
+			table-layout: fixed;
+		}
+	}
+
+	&.sortable {
+		thead {
+			th:not(:last-child) {
+				border-right: 1px solid var(--border-color);
+				border-bottom: 1px solid var(--border-color);
+			}
+		}
+
+		& > :not(:first-child) {
+			border-top: none;
+		}
+	}
+
+	tbody tr > * {
+		vertical-align: middle;
+	}
+
+	&-hover tbody tr {
+		cursor: pointer;
+
+		&:hover {
+			filter: brightness(90%);
+		}
+	}
+
+	.td-date {
+		width: 165px;
+	}
+
+	.td-quality {
+		width: 120px;
+	}
+}
+
+.list-group-item {
+	.menu-item {
+		transition: left 0.3s ease-in-out;
+		left: 0;
+
+		&:hover {
+			left: 0.5em;
+		}
+	}
+}
+
+.icon {
+	width: 1.3rem;
+}
+
+.help {
+	cursor: help;
+}
+
+.pointer {
 	cursor: pointer;
 }
 
-.up,
-.down {
-	line-height: 10px;
-	font-size: 1.1rem;
-	transform: scale(1.5, 1);
-	opacity: 0.3;
+.tab-content {
+	border-width: 0 1px 1px;
+	border-color: var(--txt-primary-color);
+	border-style: solid;
+	min-height: 420px;
 }
 
-.sorted {
-	opacity: 1;
+.nav-tabs {
+	.nav-link {
+		border-color: var(--txt-primary-color);
+
+		&:focus {
+			background: var(--txt-secondary-color);
+			box-shadow: 0 0 0 0.25rem rgba(173, 181, 189, 0.5);
+		}
+
+		&:not(.active):hover {
+			background: $nav-tabs-link-hover-bg;
+		}
+	}
+
+	@media (min-width: 768px) {
+		.nav-item + .nav-item {
+			margin-left: 0.5rem;
+		}
+	}
 }

assets/img/clipboard.svg

-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" x="0px" y="0px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve"><path d="M19,2h-4.2c-0.4-1.2-1.5-2-2.8-2S9.6,0.8,9.2,2H5C3.9,2,3,2.9,3,4v16c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V4  C21,2.9,20.1,2,19,2z M12,2c0.6,0,1,0.4,1,1c0,0.6-0.4,1-1,1s-1-0.4-1-1C11,2.4,11.4,2,12,2z M19,20H5V4h2v2h10V4h2V20z"/></svg>
\ No newline at end of file

components/Graph.vue

-<template>
-	<div>
-		<canvas :id="id" @click="test($event)"></canvas>
-	</div>
-</template>
-
-<script>
-import Chart from "chart.js/auto"
-
-export const chartTypes = [
-	"line",
-	"bar",
-	"doughnut",
-	"bubble",
-	"scatter"
-	// 'radar',
-	// 'polarArea'
-]
-
-export default {
-	props: {
-		id: {
-			type: String,
-			default: "my-chart",
-			required: true
-		},
-		type: {
-			type: String,
-			default: "line",
-			required: true,
-			validator: function (value) {
-				return chartTypes.indexOf(value) !== -1
-			}
-		},
-		data: {
-			type: Object,
-			default: undefined,
-			required: true
-		},
-		options: {
-			type: Object,
-			default: undefined
-		}
-	},
-	data() {
-		return {
-			chart: undefined,
-			chartData: {
-				type: this.type,
-				data: this.data,
-				options: this.options
-			}
-		}
-	},
-	methods: {
-		createChart() {
-			this.chart?.destroy()
-			this.chart = new Chart(document.getElementById(this.id), this.chartData)
-		}
-	},
-	mounted() {
-		this.createChart()
-	},
-	watch: {
-		type: {
-			handler(n, o) {
-				this.chartData.type = n
-				this.createChart()
-			}
-		},
-		data: {
-			handler(n, o) {
-				this.chartData.data = n
-				this.createChart()
-			}
-		},
-		options: {
-			handler(n, o) {
-				this.chartData.options = n
-				this.createChart()
-			}
-		}
-	}
-}
-</script>

components/alert/Default.vue

+<template>
+	<div
+		class="alert alert-dismissible fade show"
+		role="alert"
+		:class="classType">
+		<h3 class="alert-heading h5" v-if="title">
+			<span v-if="icon"
+				><component
+					aria-hidden="true"
+					:is="'solid-' + icon + '-icon'"
+					style="width: 1.5rem" />&nbsp;</span
+			>{{ title }}
+		</h3>
+		<slot></slot>
+		<button
+			type="button"
+			class="btn-close"
+			data-bs-dismiss="alert"
+			:aria-label="$t('aria.close')"></button>
+	</div>
+</template>
+
+<script>
+export default {
+	props: {
+		type: {
+			type: String,
+			required: true,
+			validator: function (value) {
+				return (
+					[
+						"primary",
+						"secondary",
+						"success",
+						"danger",
+						"warning",
+						"info",
+						"light",
+						"dark"
+					].indexOf(value) !== -1
+				)
+			}
+		},
+		title: {
+			type: String,
+			default: ""
+		},
+		icon: {
+			type: String,
+			default: ""
+		}
+	},
+	computed: {
+		classType() {
+			return "alert-" + this.type
+		}
+	}
+}
+</script>

components/alert/Member.vue

+<template>
+	<div v-if="displayAlert">
+		<AlertDefault
+			class="col-xxl-10 mx-auto mt-3"
+			:title="getTitle"
+			:icon="getIcon"
+			:type="typeAlerte">
+			<ul>
+				<li
+					v-if="hash.status == 'NEWCOMER' && !allCertifiersDispo"
+					v-html="$t('alert.notAllCertifiersDispo')"></li>
+				<li
+					v-if="this.hash.status == 'NEWCOMER' && this.isDossierOK"
+					v-html="$t('alert.dossierOK')"></li>
+				<li
+					v-if="hash.status == 'MISSING'"
+					v-html="
+						$tc(
+							'alert.missing',
+							Math.max(
+								1,
+								Math.round(
+									(hash.limitDate - Math.round(Date.now() / 1000)) / 3600 / 24
+								)
+							)
+						)
+					"></li>
+				<li
+					v-if="
+						hash.status == 'MEMBER' &&
+						['warning', 'danger'].includes(
+							$options.filters.dateStatus(hash.limitDate)
+						)
+					"
+					v-html="$t('alert.renew')"></li>
+				<li
+					v-if="hash.status != 'REVOKED' && !hash.distanceE.dist_ok"
+					v-html="$t('alert.distKO')"></li>
+				<li
+					v-if="
+						hash.status != 'REVOKED' && certifsNotExpired.received.length < 5
+					"
+					v-html="
+						$tc('alert.certifManquantes', 5 - certifsNotExpired.received.length)
+					"></li>
+				<li
+					v-if="
+						['MEMBER', 'MISSING'].includes(hash.status) &&
+						this.$options.filters.dateStatus(this.hash.certsLimit) == 'warning'
+					"
+					v-html="$t('alert.certifManquantesBientot')"></li>
+				<li
+					v-if="hash.status == 'MEMBER' && !hash.minDatePassed"
+					v-html="$t('alert.notAvailable')"></li>
+				<li
+					v-if="certifsNotExpired.sent.length == 100"
+					v-html="$t('alert.noMoreCert')"></li>
+				<li
+					v-else-if="certifsNotExpired.sent.length > 80"
+					v-html="
+						$tc('alert.certStockLim', 100 - certifsNotExpired.sent.length)
+					"></li>
+				<li v-if="hash.status == 'REVOKED'" v-html="$t('alert.revoked')"></li>
+			</ul>
+		</AlertDefault>
+	</div>
+</template>
+
+<script>
+export default {
+	props: {
+		hash: {
+			type: Object,
+			required: true
+		}
+	},
+	computed: {
+		displayAlert() {
+			return (
+				["MISSING", "REVOKED", "NEWCOMER"].includes(this.hash.status) ||
+				["warning", "danger"].includes(
+					this.$options.filters.dateStatus(this.hash.limitDate)
+				) ||
+				!this.hash.minDatePassed ||
+				this.certifsNotExpired.sent.length > 80 ||
+				this.certifsNotExpired.received.length < 5 ||
+				!this.hash.distanceE.dist_ok ||
+				this.$options.filters.dateStatus(this.hash.certsLimit) == "warning"
+			)
+		},
+		certifsNotExpired() {
+			return {
+				received: this.hash.received_certifications.filter((el) => !el.expired),
+				sent: this.hash.sent_certifications.filter((el) => !el.expired)
+			}
+		},
+		allCertifiersDispo() {
+			let nbCertifiersdispo = 0
+
+			for (const cert of this.certifsNotExpired.received) {
+				if (cert.from.minDatePassed) nbCertifiersdispo++
+			}
+
+			return nbCertifiersdispo > 4
+		},
+		isDossierOK() {
+			return (
+				this.hash.distanceE.dist_ok &&
+				this.hash.received_certifications.length > 4
+			)
+		},
+		typeAlerte() {
+			switch (this.hash.status) {
+				case "NEWCOMER":
+					return this.isDossierOK
+						? this.allCertifiersDispo
+							? "success"
+							: "info"
+						: "danger"
+				case "MISSING":
+					return "danger"
+				case "MEMBER":
+					if (
+						this.$options.filters.dateStatus(this.hash.certsLimit) ==
+							"danger" ||
+						this.$options.filters.dateStatus(this.hash.limitDate) == "danger"
+					)
+						return "danger"
+					if (!this.hash.distanceE.dist_ok) return "danger"
+					return "warning"
+				case "REVOKED":
+					return "secondary"
+			}
+		},
+		getTitle() {
+			let title = this.$t("alert.information")
+
+			switch (this.hash.status) {
+				case "MEMBER":
+					if (this.typeAlerte == "danger") title = this.$t("alert.attention")
+					break
+				case "NEWCOMER":
+					title = this.isDossierOK
+						? this.allCertifiersDispo
+							? this.$t("alert.dossierOKtitle")
+							: this.$t("alert.attenteCertifiers")
+						: this.$t("alert.dossierKOtitle")
+					break
+				case "MISSING":
+					title = this.$t("alert.attention")
+			}
+
+			return title
+		},
+		getIcon() {
+			let icon = "information-circle"
+
+			switch (this.hash.status) {
+				case "MEMBER":
+					if (this.typeAlerte == "danger") icon = "exclamation"
+					break
+				case "NEWCOMER":
+					if (!this.isDossierOK) {
+						icon = "exclamation"
+						break
+					}
+
+					if (this.allCertifiersDispo) icon = "check-circle"
+					break
+				case "MISSING":
+					icon = "exclamation"
+					break
+			}
+
+			return icon
+		}
+	}
+}
+</script>

components/apollo/List.vue

+<template>
+	<div class="form-floating">
+		<select
+			class="form-select"
+			id="selectClient"
+			@change="setClient($event)"
+			v-model="getApolloClient">
+			<option
+				:value="clientName"
+				v-for="(clientObject, clientName) in $nuxt.$apolloProvider.clients"
+				:key="clientName">
+				{{
+					clientName
+						.split(/(?=[A-Z])/)
+						.map((s) => s.toLowerCase())
+						.join("-")
+				}}
+			</option>
+		</select>
+		<label for="selectClient">{{ $t("wotwizard.nodeselect") }}</label>
+	</div>
+</template>
+
+<script>
+export default {
+	methods: {
+		setClient(e) {
+			localStorage.setItem("apollo-client", e.target.value)
+			window.location =
+				window.location.origin + "/" + this.$i18n.locale + "/index.html"
+		}
+	}
+}
+</script>

components/badge/Danger.vue

 <template>
 	<span
-		class="danger font-weight-normal"
-		:class="classWarning"
+		class="d-inline-block help flex-shrink-0"
+		:class="classBadge"
 		:title="title"
-		v-if="
-			$options.filters.dateStatus(limitDate) != 'success' &&
-			['MEMBER', 'MISSING'].includes(memberStatus)
-		"
-		>⚠
-		<span class="sr-only" v-if="title">{{ title }}</span>
+		v-if="!['NEWCOMER', 'REVOKED'].includes(memberStatus)">
+		<solid-shield-check-icon
+			v-if="$options.filters.dateStatus(limitDate) == 'success'" />
+		<solid-shield-exclamation-icon v-else />
+		<span class="visually-hidden">{{ title }}</span>
 	</span>
 </template>
 
@@ -19,19 +18,28 @@ export default {
 			type: Number,
 			default: 0
 		},
-		title: {
-			type: String
-		},
 		memberStatus: String
 	},
 	computed: {
-		classWarning() {
+		classBadge() {
 			return {
+				"text-success":
+					this.$options.filters.dateStatus(this.limitDate) == "success",
 				"text-danger":
 					this.$options.filters.dateStatus(this.limitDate) == "danger",
 				"text-warning":
 					this.$options.filters.dateStatus(this.limitDate) == "warning"
 			}
+		},
+		title() {
+			switch (this.$options.filters.dateStatus(this.limitDate)) {
+				case "success":
+					return this.$t("statut.allcertif")
+				case "warning":
+					return this.$t("statut.bientotmanquecertif")
+				case "danger":
+					return this.$t("statut.manquecertif")
+			}
 		}
 	}
 }

components/badge/Date.vue

 <template>
-	<small>
-		<span class="badge" :class="'badge-' + $options.filters.dateStatus(date)">
-			{{ date == 0 ? "N/A" : $d(new Date(date * 1000), styleDate) }}
-		</span>
-	</small>
+	<span class="badge" :class="'bg-' + $options.filters.dateStatus(date)">
+		{{
+			!date
+				? "N/A"
+				: 0 > deltaDays
+				? $tc("jours_avant", Math.abs(deltaDays))
+				: $tc("jours", Math.abs(deltaDays))
+		}}
+	</span>
 </template>
 
 <script>
 export default {
 	props: {
 		date: {
-			type: Number,
-			required: true
-		},
-		styleDate: {
-			type: String,
-			required: true
+			type: Number
+		}
+	},
+	computed: {
+		deltaDays() {
+			return Math.ceil((this.date - Math.round(Date.now() / 1000)) / 3600 / 24)
 		}
 	}
 }

components/badge/Dispo.vue

 <template>
-	<small>
-		<span
-			class="badge"
-			:class="{
-				'badge-success': isDispo,
-				'badge-danger': !isDispo
-			}">
-			{{
-				isDispo
-					? $t("membre.dispo")
-					: $t("membre.nodispo") +
-					  " >&nbsp;" +
-					  $d(new Date(dateDispo * 1000), "short")
+	<span
+		class="badge"
+		:class="{
+			'bg-success': isDispo,
+			'bg-danger': !isDispo
+		}">
+		<span v-if="isDispo">{{ $t("membre.dispo") }}</span>
+		<span v-else
+			>⏱&nbsp;{{
+				dateDispo == null
+					? "N/A"
+					: nbPendingCertifs +
+					  " (&nbsp;" +
+					  $d(new Date(dateDispo * 1000)) +
+					  ")"
 			}}
 		</span>
-	</small>
+	</span>
 </template>
 
 <script>
 export default {
 	props: {
 		isDispo: {
-			type: Boolean,
-			required: true
+			type: Boolean
 		},
 		dateDispo: {
 			type: Number
+		},
+		certifs: {
+			type: Array,
+			required: true
+		}
+	},
+	computed: {
+		nbPendingCertifs() {
+			return this.certifs.filter((el) => {
+				return el.pending == true
+			}).length
 		}
 	}
 }