.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

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

.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
 
-```bash
-# use node 16
-$ nvm use 16
+This project needs NodeJS v20
 
-# install dependencies
-$ npm install
+In order to use the `./utils/findMissingI18nKeys.sh` script, this project needs :
 
-# serve with hot reload at localhost:3000
-$ npm run dev
+- jq ([Download](https://stedolan.github.io/jq/download/))
+
+## Contribute
 
-# Analyze assets to check bundle's size
+```bash
+$ 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
+# 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 for Server Side Rendering (SSR)
-$ npm run build
-$ npm run start
+Then create a merge request.
 
-# generate static project
-$ npm run generate
+### Add new wotwizard graphql endpoint
 
-# generate introspection schema for graphql server
-$ npm run build-fragment
-```
+Just add your new endpoint in `endpoints.json` file and rebuild app.
 
-For detailed explanation on how things work, check out the [documentation](https://nuxtjs.org).
+### 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.
 
-## Special Directories
+### GraphQL
+
+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 `/`.
 
@@ -71,27 +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
-$ git checkout -b my-branch
+# use node 20
+$ nvm use 20
+
+# install dependencies
 $ npm install
-$ npm run dev
-$ npm run analyze
-$ git commit
-$ git push
-```
 
-### 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.
+# build for production and launch server for Server Side Rendering (SSR)
+$ npm run build
+$ npm run start
 
-## GraphQL
-Tout ce qui touche à GraphQL se trouve dans le dossier `./graphql`. Le fichier endpoints.js contient la liste des serveurs graphQL, le fichier queries.js contient toutes les requêtes de l'application.
\ No newline at end of file
+# 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: 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: red;
-$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-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);
+
+// 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);
+			}
+		}
 
-// Close button
-$close-color: var(--text-primary-color);
-$close-font-weight: 500;
+		& > :not(:first-child) {
+			border-top: none;
+		}
+	}
 
-@import 'font';
-@import 'bootstrap';
+	tbody tr > * {
+		vertical-align: middle;
+	}
 
-.card-subtitle {
-    font-style: italic;
-    font-size: 90%;
+	&-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;
 }
 
-.table-hover tbody tr{
-    cursor: pointer;
-}
\ No newline at end of file
+.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;
+		}
+	}
+}

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>
\ No newline at end of file

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/CertifStatus.vue

-<template>
-    <span class="font-weight-normal" :class="classWarning" :title="textWarning" v-if="($options.filters.dateStatus(limitDate) != 'success') && (['MEMBER', 'MISSING'].includes(memberStatus))">⚠
-        <span class="sr-only">{{ textWarning }}</span>
-    </span>
-</template>
-
-<script>
-export default {
-    props: {
-        limitDate : {
-            type: Number,
-            default: 0
-        },
-        memberStatus : String
-    },
-    computed: {
-        classWarning: function() {
-            return {
-                'text-danger' : this.$options.filters.dateStatus(this.limitDate) == 'danger',
-                'text-warning' : this.$options.filters.dateStatus(this.limitDate) == 'warning'
-            }
-        },
-        textWarning: function() {
-            return (this.$options.filters.dateStatus(this.limitDate) == 'danger') ? this.$i18n.t('statut.manquecertif') : this.$i18n.t('statut.bientotmanquecertif')
-        }
-    }
-}
-</script>
\ No newline at end of file

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>