.editorconfig

-# editorconfig.org
-root = true
-
-[*]
-indent_style = space
-indent_size = 2
-end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true
-
-[*.md]
-trim_trailing_whitespace = false

.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

.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
+

.prettierrc

+{
+	"arrowParens": "always",
+	"bracketSpacing": true,
+	"bracketSameLine": true,
+	"embeddedLanguageFormatting": "auto",
+	"endOfLine": "lf",
+	"htmlWhitespaceSensitivity": "css",
+	"printWidth": 80,
+	"quoteProps": "as-needed",
+	"semi": false,
+	"singleQuote": false,
+	"tabWidth": 2,
+	"trailingComma": "none",
+	"useTabs": true,
+	"vueIndentScriptAndStyle": false
+}

README.md

 # wotwizard-ui
 
-## Build Setup
+## Prerequisite
+
+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
-# install dependencies
+$ git clone https://git.duniter.org/paidge/wotwizard-ui.git
+$ cd wotwizard-ui
+# 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
-
-# serve with hot reload at localhost:3000
+# 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
+```
 
-# build for production and launch server
-$ npm run build
-$ npm run start
+Then create a merge request.
 
-# generate static project
-$ npm run generate
-```
+### Add new wotwizard graphql endpoint
 
-For detailed explanation on how things work, check out the [documentation](https://nuxtjs.org).
+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.
+
+This template is extremly commented for beginners so you can create an apollo query and display the response very easily even using i18n !
+
+If you want to add your page in the menu, edit the `menus` variable in the `./layouts/default.vue` file.
+
+### GraphQL
 
-## Special Directories
+All files concerning Apollo Graphql are stored in `./graphql`.
+
+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 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
+
+For detailed explanation on how things work, check out the [documentation](https://nuxtjs.org).
 
 You can create the following extra directories, some of which have special behaviors. Only `pages` is required; you can delete them if you don't want to use their functionality.
 
-### `assets`
+#### `assets`
 
 The assets directory contains your uncompiled assets such as Stylus or Sass files, images, or fonts.
 
 More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/assets).
 
-### `components`
+#### `components`
 
 The components directory contains your Vue.js components. Components make up the different parts of your page and can be reused and imported into your pages, layouts and even other components.
 
 More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/components).
 
-### `layouts`
+#### `layouts`
 
 Layouts are a great help when you want to change the look and feel of your Nuxt app, whether you want to include a sidebar or have distinct layouts for mobile and desktop.
 
 More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/layouts).
 
-
-### `pages`
+#### `pages`
 
 This directory contains your application views and routes. Nuxt will read all the `*.vue` files inside this directory and setup Vue Router automatically.
 
 More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/get-started/routing).
 
-### `plugins`
+#### `plugins`
 
 The plugins directory contains JavaScript plugins that you want to run before instantiating the root Vue.js Application. This is the place to add Vue plugins and to inject functions or constants. Every time you need to use `Vue.use()`, you should create a file in `plugins/` and add its path to plugins in `nuxt.config.js`.
 
 More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/plugins).
 
-### `static`
+#### `static`
 
 This directory contains your static files. Each file inside this directory is mapped to `/`.
 
@@ -62,20 +100,25 @@ Example: `/static/robots.txt` is mapped as `/robots.txt`.
 
 More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/static).
 
-### `store`
+#### `store`
 
 This directory contains your Vuex store files. Creating a file in this directory automatically activates Vuex.
 
 More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/store).
 
+## Build Setup
 
-## Contributions
 ```bash
-$ git clone https://git.duniter.org/paidge/wotwizard-ui.git
-$ cd wotwizard-ui
+# use node 20
+$ nvm use 20
+
+# install dependencies
 $ npm install
-$ npm run dev
-```
 
-### Ajouter des pages
-Il suffit de créer un fichier `./pages/mapage.vue` pour que la nouvelle page soit accessible directement sur http://localhost/mapage. Pensez à insérer la logique pour le fil d'ariane dans ce fichier et à mettre à jour le menu dans la variable `menus` du fichier `./layouts/default.vue`. 3 pages d'exemple sont fournies pour montrer l'utilisation de l'API graphQL et de chartJS.
\ No newline at end of file
+# build for production and launch server for Server Side Rendering (SSR)
+$ npm run build
+$ npm run start
+
+# Or generate static project
+$ 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)
+ */
 
- @import "~bootstrap/scss/functions";
- @import "~bootstrap/scss/variables";
- @import "~bootstrap/scss/mixins";
- @import "~bootstrap/scss/root";
- @import "~bootstrap/scss/reboot";
- @import "~bootstrap/scss/type";
- @import "~bootstrap/scss/images";
- @import "~bootstrap/scss/code";
- @import "~bootstrap/scss/grid";
- @import "~bootstrap/scss/tables";
- @import "~bootstrap/scss/forms";
- @import "~bootstrap/scss/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/nav";
- @import "~bootstrap/scss/navbar";
- @import "~bootstrap/scss/card";
- @import "~bootstrap/scss/breadcrumb";
-//  @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/list-group";
- @import "~bootstrap/scss/close";
-//  @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";
- 
\ No newline at end of file
+// 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/containers";
+@import "~bootstrap/scss/grid";
+@import "~bootstrap/scss/tables";
+
+// 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/nav";
+@import "~bootstrap/scss/navbar";
+@import "~bootstrap/scss/card";
+// @import "~bootstrap/scss/accordion";
+@import "~bootstrap/scss/breadcrumb";
+// @import "~bootstrap/scss/pagination";
+@import "~bootstrap/scss/badge";
+@import "~bootstrap/scss/alert";
+// @import "~bootstrap/scss/progress";
+@import "~bootstrap/scss/list-group";
+@import "~bootstrap/scss/close";
+// @import "~bootstrap/scss/toasts";
+// @import "~bootstrap/scss/modal";
+@import "~bootstrap/scss/tooltip";
+// @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/_font.scss

 @font-face {
-    font-family: "Montserrat";
-    src: url("~assets/fonts/Montserrat-Light.otf") format("truetype");
-    font-weight: 300;
-    font-style: normal;
+	font-family: "Montserrat";
+	src: url("~assets/fonts/Montserrat-Light.otf") format("truetype");
+	font-weight: 300;
+	font-style: normal;
 }
 
 @font-face {
-    font-family: "Montserrat";
-    src: url("~assets/fonts/Montserrat-LightItalic.otf") format("truetype");
-    font-weight: 300;
-    font-style: italic;
+	font-family: "Montserrat";
+	src: url("~assets/fonts/Montserrat-LightItalic.otf") format("truetype");
+	font-weight: 300;
+	font-style: italic;
 }
 
 @font-face {
-    font-family: "Montserrat";
-    src: url("~assets/fonts/Montserrat-Regular.otf") format("truetype");
-    font-weight: normal;
-    font-style: normal;
+	font-family: "Montserrat";
+	src: url("~assets/fonts/Montserrat-Regular.otf") format("truetype");
+	font-weight: normal;
+	font-style: normal;
 }
 
 @font-face {
-    font-family: "Montserrat";
-    src: url("~assets/fonts/Montserrat-Italic.otf") format("truetype");
-    font-weight: normal;
-    font-style: italic;
+	font-family: "Montserrat";
+	src: url("~assets/fonts/Montserrat-Italic.otf") format("truetype");
+	font-weight: normal;
+	font-style: italic;
 }
 
 @font-face {
-    font-family: "Montserrat";
-    src: url("~assets/fonts/Montserrat-SemiBold.otf") format("truetype");
-    font-weight: 500;
-    font-style: normal;
+	font-family: "Montserrat";
+	src: url("~assets/fonts/Montserrat-SemiBold.otf") format("truetype");
+	font-weight: 500;
+	font-style: normal;
 }
 
 @font-face {
-    font-family: "Montserrat";
-    src: url("~assets/fonts/Montserrat-SemiBoldItalic.otf") format("truetype");
-    font-weight: 500;
-    font-style: italic;
+	font-family: "Montserrat";
+	src: url("~assets/fonts/Montserrat-SemiBoldItalic.otf") format("truetype");
+	font-weight: 500;
+	font-style: italic;
 }
 
 @font-face {
-    font-family: "Montserrat";
-    src: url("~assets/fonts/Montserrat-Bold.otf") format("truetype");
-    font-weight: bold;
-    font-style: normal;
+	font-family: "Montserrat";
+	src: url("~assets/fonts/Montserrat-Bold.otf") format("truetype");
+	font-weight: bold;
+	font-style: normal;
 }
 
 @font-face {
-    font-family: "Montserrat";
-    src: url("~assets/fonts/Montserrat-BoldItalic.otf") format("truetype");
-    font-weight: bold;
-    font-style: italic;
+	font-family: "Montserrat";
+	src: url("~assets/fonts/Montserrat-BoldItalic.otf") format("truetype");
+	font-weight: bold;
+	font-style: italic;
 }
 
 @font-face {
-    font-family: "Montserrat";
-    src: url("~assets/fonts/Montserrat-ExtraBold.otf") format("truetype");
-    font-weight: 800;
-    font-style: normal;
+	font-family: "Montserrat";
+	src: url("~assets/fonts/Montserrat-ExtraBold.otf") format("truetype");
+	font-weight: 800;
+	font-style: normal;
 }
 
 @font-face {
-    font-family: "Montserrat";
-    src: url("~assets/fonts/Montserrat-ExtraBoldItalic.otf") format("truetype");
-    font-weight: 800;
-    font-style: italic;
-}
\ No newline at end of file
+	font-family: "Montserrat";
+	src: url("~assets/fonts/Montserrat-ExtraBoldItalic.otf") format("truetype");
+	font-weight: 800;
+	font-style: italic;
+}

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: #a6a4b0;
-$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(--text-primary-color);
-$table-color: var(--background-color-primary);
-$table-head-bg: red;
+// 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-primary);
-$list-group-action-active-bg: transparent;
-$list-group-hover-bg: transparent;
-$list-group-action-color: var(--text-primary-color);
+$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(--bg-secondary-color);
+
+// 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;
+
+// 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";
+
+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;
+}
+
+.tab-content {
+	border-width: 0 1px 1px;
+	border-color: var(--txt-primary-color);
+	border-style: solid;
+	min-height: 420px;
+}
+
+.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;
+		}
+	}
 
-@import 'font';
-@import 'bootstrap';
\ No newline at end of file
+	@media (min-width: 768px) {
+		.nav-item + .nav-item {
+			margin-left: 0.5rem;
+		}
+	}
+}

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="d-inline-block help flex-shrink-0"
+		:class="classBadge"
+		:title="title"
+		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>
+
+<script>
+export default {
+	props: {
+		limitDate: {
+			type: Number,
+			default: 0
+		},
+		memberStatus: String
+	},
+	computed: {
+		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")
+			}
+		}
+	}
+}
+</script>

components/badge/Date.vue

+<template>
+	<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
+		}
+	},
+	computed: {
+		deltaDays() {
+			return Math.ceil((this.date - Math.round(Date.now() / 1000)) / 3600 / 24)
+		}
+	}
+}
+</script>

components/badge/Dispo.vue

+<template>
+	<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>
+	</span>
+</template>
+
+<script>
+export default {
+	props: {
+		isDispo: {
+			type: Boolean
+		},
+		dateDispo: {
+			type: Number
+		},
+		certifs: {
+			type: Array,
+			required: true
+		}
+	},
+	computed: {
+		nbPendingCertifs() {
+			return this.certifs.filter((el) => {
+				return el.pending == true
+			}).length
+		}
+	}
+}
+</script>

components/badge/Quality.vue

+<template>
+	<span
+		class="badge"
+		:class="{
+			'bg-success': quality >= 80,
+			'bg-warning': quality < 80
+		}">
+		{{ Math.round(quality * 100) / 100 }}
+	</span>
+</template>
+
+<script>
+export default {
+	props: {
+		quality: {
+			type: Number,
+			required: true
+		}
+	}
+}
+</script>