.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
 
+## 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
 $ 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
 ```
+
 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.
 
 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.
 
-### ChartJS
-There is an example to use component graph lazyly in `./pages/chartjs.vue`.
-
 ### GraphQL
-The schema documentation is stored in [./doc/graphQLschema.txt](/doc/graphQLschema.txt).
 
-All conf files for Apollo Graphql are stored in `./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 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
+
 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.
@@ -55,7 +80,6 @@ Layouts are a great help when you want to change the look and feel of your Nuxt
 
 More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/layouts).
 
-
 #### `pages`
 
 This directory contains your application views and routes. Nuxt will read all the `*.vue` files inside this directory and setup Vue Router automatically.
@@ -85,25 +109,16 @@ 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
 
-# serve with hot reload at localhost:3000
-$ npm run dev
-
-# Analyze assets to check bundle's size
-$ npm run analyze
-
 # build for production and launch server for Server Side Rendering (SSR)
 $ npm run build
 $ npm run start
 
-# generate static project
+# Or generate static project
 $ npm run generate
-
-# update introspection schema for graphql server
-$ npm run build-fragment
-```
\ No newline at end of file
+```

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="danger 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>
-
-<style lang="scss" scoped>
-.danger {
-    cursor: default;
-}
-</style>
\ 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>