Merge conflicts fixed

2025-08-20 14:43:49 +00:00 · 2022-02-04 10:25:46 +01:00
parent b87f14255d 2343a4a334
commit 481456a038
403 changed files with 15524 additions and 2846 deletions
--- a/src/Bundle/ChillMainBundle/Resources/public/chill/chillmain.scss
+++ b/src/Bundle/ChillMainBundle/Resources/public/chill/chillmain.scss
@@ -1,5 +1,5 @@
 // Access to Bootstrap variables and mixins
-@import '~ChillMainAssets/module/bootstrap/shared';
+@import 'ChillMainAssets/module/bootstrap/shared';

 // Chill variables
@import './scss/chill_variables';
@@ -240,6 +240,10 @@ table.table-bordered {
   color: $gray-800;
   font-size: 90%;

+    p {
+        margin-bottom: 0.75rem !important;
+    }
+
   // test a bottom right decoration (to be confirmed)
   &.test {
      position: relative;
@@ -273,11 +277,17 @@ table.table-bordered {
   }
 }

+/// meta-data
+div.updatedBy,
+div.metadata {
+    span.user, span.date {
+        text-decoration: underline dotted;
+    }
+}
 div.metadata {
   font-size: smaller;
   color: $gray-600;
   span.user, span.date {
-      text-decoration: underline dotted;
      &:hover {
         color: $gray-700;
      }
@@ -318,6 +328,7 @@ dl.definition-inline {
 .custom_field_no_data,
 .chill-no-data-statement {
   font-style: italic;
+   font-size: 90%;
 }

 /// flash
@@ -418,3 +429,65 @@ span.item-key {
    background-color: #0000000a;
    //text-decoration: dotted underline;
 }
+
+/// Workflows
+div.workflow {
+    section.step {
+        border: 1px solid $chill-l-gray;
+        padding: 1em 2em;
+        div.flex-table {
+            margin: 1.5em -2em;
+        }
+    }
+    div.to-decision,
+    div.decided {
+        font-variant: all-small-caps;
+        margin-left: 1em;
+    }
+    div.to-decision {
+        font-weight: 300;
+    }
+    div.decided {
+        font-weight: 600;
+    }
+    div.breadcrumb {
+        display: initial;
+        margin-bottom: 0;
+        padding-right: 0.5em;
+        background-color: tint-color($chill-yellow, 90%);
+        border: 1px solid $chill-yellow;
+        color: $primary;
+        border-radius: 1.5em;
+        font-size: 12pt;
+        font-weight: 500;
+        font-variant: small-caps;
+        span, a {
+            cursor: pointer;
+            text-decoration: none;
+            &:hover {
+                font-weight: 700;
+            }
+        }
+    }
+}
+
+// Override bootstrap popover styles
+div.popover {
+    box-shadow: 0 0 10px -5px $dark;
+    z-index: 9999;
+    .popover-arrow {}
+    .popover-header {}
+    .popover-body {}
+
+    // Specific worflow breadcrumb popover
+    &.workflow-transition {
+        .popover-header {
+            font-variant: small-caps;
+        }
+    }
+}
+
+// increase toast message z-index (above all modals)
+div.v-toast {
+   z-index: 10000!important;
+}
--- a/src/Bundle/ChillMainBundle/Resources/public/chill/index.js
+++ b/src/Bundle/ChillMainBundle/Resources/public/chill/index.js
@@ -25,6 +25,7 @@ import { chill } from './js/chill.js';
 global.chill = chill;

 require('./js/date.js');
+require('./js/counter.js');

 /// Load fonts
 require('./fonts/OpenSans/OpenSans.scss')
--- a/src/Bundle/ChillMainBundle/Resources/public/chill/js/counter.js
+++ b/src/Bundle/ChillMainBundle/Resources/public/chill/js/counter.js
@@ -0,0 +1,35 @@
+/**
+ *
+ * This script search for span.counter elements like
+ *   <span class="counter">Il y a 4 notifications</span>
+ * and return
+ *   <span class="counter">Il y a <span>4</span> notifications</span>
+ *
+ */
+const isNum = (v) => !isNaN(v);
+
+const parseCounter = () => {
+    document.querySelectorAll('span.counter')
+        .forEach(el => {
+            let r = [];
+            el.innerText
+                .trim()
+                .split(' ')
+                .forEach(w => {
+                    if (isNum(w)) {
+                        r.push(`<span>${w}</span>`);
+                    } else {
+                        r.push(w);
+                    }
+                })
+            ;
+            el.innerHTML = r.join(' ');
+        })
+    ;
+};
+
+window.addEventListener('DOMContentLoaded', function (e) {
+    parseCounter();
+});
+
+export { parseCounter };
--- a/src/Bundle/ChillMainBundle/Resources/public/chill/scss/badge.scss
+++ b/src/Bundle/ChillMainBundle/Resources/public/chill/scss/badge.scss
@@ -12,6 +12,7 @@
        display: block;
        top: calc(50% - 7px);
        right: 10px;
+        line-height: 11px;
    }
 }

@@ -62,14 +63,19 @@ ul.list-suggest {
            & span:hover {
                color: $chill-l-gray;
            }
+            .person-text {
+                span {
+                    padding-left: 0px;
+                }
+            }
        }
    }
    &.remove-items {
        li {
            position: relative;
-            span {
+            & > span {
                display: block;
-                padding-right: .75rem;
+                padding-right: 1.75rem;
                @include remove_link;
            }
        }
--- a/src/Bundle/ChillMainBundle/Resources/public/chill/scss/buttons.scss
+++ b/src/Bundle/ChillMainBundle/Resources/public/chill/scss/buttons.scss
@@ -18,9 +18,11 @@ $chill-theme-buttons: (
   "show":          $chill-blue,
   "view":          $chill-blue,
   "misc":          $gray-300,
+   "download":      $gray-300,
   "cancel":        $gray-300,
   "choose":        $gray-300,
-   "notify":        $gray-300,
+   "notify":        $chill-blue,
+   "search":        $gray-300,
   "unlink":        $chill-red,
   "tpchild":       $chill-pink,
 );
@@ -78,6 +80,8 @@ $chill-theme-buttons: (
   &.btn-choose::before,
   &.btn-notify::before,
   &.btn-tpchild::before,
+   &.btn-download::before,
+   &.btn-search::before,
   &.btn-cancel::before {
      font: normal normal normal 14px/1 ForkAwesome;
      margin-right: 0.5em;
@@ -105,6 +109,8 @@ $chill-theme-buttons: (
   &.btn-unlink::before    { content: "\f127"; } // fa-chain-broken
   &.btn-notify::before    { content: "\f1d8"; } // fa-paper-plane
   &.btn-tpchild::before   { content: "\f007"; } // fa-user
+   &.btn-download::before  { content: "\f019"; } // fa-download
+   &.btn-search::before    { content: "\f002"; } // fa-search
 }


@@ -130,3 +136,18 @@ $chill-theme-buttons: (
 .btn-sm, .btn-group-sm > .btn {
   min-width: 36px;
 }
+
+// Homepage special fast action buttons
+div.sticky-buttons {
+    position: fixed;
+    bottom: 3em;
+    right: 2em;
+    .btn-circle {
+        width: 50px; height: 50px;
+        border-radius: 50%;
+        text-align: center;
+        padding: 0.45rem 0.7rem;
+        display: block;
+        margin-bottom: 0.5rem;
+    }
+}
--- a/src/Bundle/ChillMainBundle/Resources/public/chill/scss/flex_table.scss
+++ b/src/Bundle/ChillMainBundle/Resources/public/chill/scss/flex_table.scss
@@ -41,6 +41,15 @@ div.flex-table {
            margin-right: 5px;
        }
    }
+
+    div.item-meta {
+        flex-grow: 1 !important;
+        flex-shrink: 1 !important;
+        width: unset !important;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+    }
 }

 /*
--- a/src/Bundle/ChillMainBundle/Resources/public/chill/scss/notification.scss
+++ b/src/Bundle/ChillMainBundle/Resources/public/chill/scss/notification.scss
@@ -36,27 +36,65 @@ div.notification {
 div.notification-list,
 div.notification-show {
    div.item-bloc {
-        div.item-row.header {
-
-            div.item-col {
-                &:first-child {
-                    flex-grow: 1;
+        div.item-row {
+            &.notification-header {
+                div.item-col {
+                    &:first-child {
+                        flex-grow: 1;

+                    }
+                    &:last-child {
+                        flex-grow: 0;
+                    }
                }
-                &:last-child {
-                    flex-grow: 0;
+                ul.small_in_title {
+                    list-style-type: circle;
+                    li {
+                        span.item-key {
+                            display: inline-block;
+                            width: 3em;
+                        }
+                    }
                }
            }
-
-            ul.small_in_title {
-                list-style-type: circle;
-                li {
-                    span.item-key {
-                        display: inline-block;
-                        width: 3em;
-                    }
+            div.notification-content {
+                margin: 1.5rem;
+                p {
+                    margin-bottom: 0.75rem;
                }
            }
        }
    }
 }
+
+// Override bootstrap accordion
+div#workflow-fold,
+div#notification-fold {
+    .accordion-button {
+        padding: 0;
+        background-color: unset;
+        &:not(.collapsed) {
+            background-color: unset;
+            box-shadow: unset;
+        }
+    }
+}
+
+// Counter
+div.notification-counter {
+    span.counter {
+        &:not(:first-child) {
+            &::before {
+                content: '/ ';
+            }
+        }
+    }
+}
+span.counter {
+    & > span {
+        font-weight: bold;
+        background-color: $chill-ll-gray;
+        padding: 0 0.4rem;
+        border-radius: 50%;
+    }
+}
--- a/src/Bundle/ChillMainBundle/Resources/public/chill/scss/render_box.scss
+++ b/src/Bundle/ChillMainBundle/Resources/public/chill/scss/render_box.scss
@@ -106,6 +106,8 @@ section.chill-entity {
    // used for comment-embeddable
    &.entity-comment-embeddable {
        width: 100%;
+        
+        /* already defined !!
        div.metadata {
            font-size: smaller;
            color: $gray-600;
@@ -116,5 +118,6 @@ section.chill-entity {
                }
            }
        }
+        */
    }
 }
--- a/src/Bundle/ChillMainBundle/Resources/public/lib/api/apiMethods.js
+++ b/src/Bundle/ChillMainBundle/Resources/public/lib/api/apiMethods.js
@@ -85,7 +85,9 @@ const fetchScopes = () => {
 const ValidationException = (response) => {
    const error = {};
    error.name = 'ValidationException';
-    error.violations = response.violations.map((violation) => `${violation.title}`);
+    error.violations = response.violations.map((violation) => `${violation.title}: ${violation.propertyPath}`);
+    error.titles = response.violations.map((violation) => violation.title);
+    error.propertyPaths = response.violations.map((violation) => violation.propertyPath);

    return error;
 }
--- a/src/Bundle/ChillMainBundle/Resources/public/lib/entity-workflow/api.js
+++ b/src/Bundle/ChillMainBundle/Resources/public/lib/entity-workflow/api.js
@@ -0,0 +1,12 @@
+const buildLinkCreate = function(workflowName, relatedEntityClass, relatedEntityId) {
+    let params = new URLSearchParams();
+    params.set('entityClass', relatedEntityClass);
+    params.set('entityId', relatedEntityId);
+    params.set('workflow', workflowName);
+
+    return `/fr/main/workflow/create?`+params.toString();
+};
+
+export {
+    buildLinkCreate,
+};
--- a/src/Bundle/ChillMainBundle/Resources/public/lib/show_hide/show_hide.js
+++ b/src/Bundle/ChillMainBundle/Resources/public/lib/show_hide/show_hide.js
@@ -1,19 +1,19 @@
 /**
 * Create a control to show or hide values
- * 
+ *
 * Possible options are:
- * 
+ *
 *  - froms: an Element, an Array of Element, or a NodeList. A
 *    listener will be attached to **all** input of those elements
 *    and will trigger the check on changes
- *  - test: a function which will test the element and will return true 
+ *  - test: a function which will test the element and will return true
 *    if the content must be shown, false if it must be hidden.
- *    The function will receive the `froms` as first argument, and the 
+ *    The function will receive the `froms` as first argument, and the
 *    event as second argument.
- *  - container: an Element, an Array of Element, or a Node List. The 
+ *  - container: an Element, an Array of Element, or a Node List. The
 *    child nodes will be hidden / shown inside this container
 *  - event_name: the name of the event to listen to. `'change'` by default.
- * 
+ *
 * @param object options
 */
 var ShowHide = function(options) {
@@ -26,8 +26,10 @@ var ShowHide = function(options) {
        container_content = [],
        debug = 'debug' in options ? options.debug : false,
        load_event = 'load_event' in options ? options.load_event : 'load',
-        id = 'uid' in options ? options.id : Math.random();
-    
+        id = 'uid' in options ? options.id : Math.random(),
+        toggle_callback = 'toggle_callback' in options ? options.toggle_callback : null
+    ;
+
    var bootstrap = function(event) {
        if (debug) {
            console.log('debug is activated on this show-hide', this);
@@ -43,10 +45,10 @@ var ShowHide = function(options) {

        // attach the listener on each input
        for (let f of froms.values()) {
-            let 
-                inputs = f.querySelectorAll('input'), 
+            let
+                inputs = f.querySelectorAll('input'),
                selects = f.querySelectorAll('select');
-        
+
            for (let input of inputs.values()) {
                if (debug) {
                    console.log('attaching event to input', input);
@@ -66,10 +68,10 @@ var ShowHide = function(options) {
        }

        // first launch of the show/hide
-        onChange(event);    
+        onChange(event);
    };

-    
+
    var onChange = function (event) {
        var result = test(froms, event), me;

@@ -88,45 +90,53 @@ var ShowHide = function(options) {
        } else {
            throw "the result of test is not a boolean";
        }
-        
+
    };
-    
+
    var forceHide = function() {
        if (debug) {
            console.log('force hide');
        }
-        for (let contents of container_content.values()) {
-            for (let el of contents.values()) {
-                el.remove();
+        if (toggle_callback !== null) {
+            toggle_callback(container, 'hide');
+        } else {
+            for (let contents of container_content.values()) {
+                for (let el of contents.values()) {
+                    el.remove();
+                }
            }
        }
        is_shown = false;
    };
-    
+
    var forceShow = function() {
        if (debug) {
            console.log('show');
        }
-        for (let i of container_content.keys()) {
-            var contents = container_content[i];
-            for (let el of contents.values()) {
-                container[i].appendChild(el);
+        if (toggle_callback !== null) {
+            toggle_callback(container, 'show');
+        } else {
+            for (let i of container_content.keys()) {
+                var contents = container_content[i];
+                for (let el of contents.values()) {
+                    container[i].appendChild(el);
+                }
            }
        }
        is_shown = true;
    };
-    
+
    var forceCompute = function(event) {
        onChange(event);
    };
-    
-    
+
+
    if (load_event !== null) {
        window.addEventListener('load', bootstrap);
    } else {
        bootstrap(null);
    }
-    
+
    return {
        forceHide: forceHide,
        forceShow: forceShow,
--- a/src/Bundle/ChillMainBundle/Resources/public/module/blur/index.js
+++ b/src/Bundle/ChillMainBundle/Resources/public/module/blur/index.js
@@ -1,21 +1,19 @@
 require('./blur.scss');

-var toggleBlur =  function(e){
-
-    var btn = e.target;
-
-    btn.previousElementSibling.classList.toggle("blur");
-    btn.classList.toggle("fa-eye");
-    btn.classList.toggle("fa-eye-slash");
-
-}
-
-var infos = document.getElementsByClassName("confidential");
-for(var i=0; i < infos.length; i++){
-    infos[i].insertAdjacentHTML('beforeend', '<i class="fa fa-eye toggle" aria-hidden="true"></i>');
-}
-
-var toggles = document.getElementsByClassName("toggle");
-for(var i=0; i < toggles.length; i++){
-    toggles[i].addEventListener("click", toggleBlur);
-}
+document.querySelectorAll('.confidential').forEach(function (el) {
+    let i = document.createElement('i');
+    const classes = ['fa', 'fa-eye', 'toggle'];
+    i.classList.add(...classes);
+    el.appendChild(i);
+    const toggleBlur = function(e) {
+        for (let child of el.children) {
+            if (!child.classList.contains('toggle')) {
+                child.classList.toggle('blur');
+            }
+        }
+        i.classList.toggle('fa-eye');
+        i.classList.toggle('fa-eye-slash');
+    }
+    i.addEventListener('click', toggleBlur);
+    toggleBlur();
+});
--- a/src/Bundle/ChillMainBundle/Resources/public/module/bootstrap/index.js
+++ b/src/Bundle/ChillMainBundle/Resources/public/module/bootstrap/index.js
@@ -9,9 +9,10 @@ import Dropdown from 'bootstrap/js/src/dropdown';
 import Modal from 'bootstrap/js/dist/modal';
 import Collapse from 'bootstrap/js/src/collapse';
 import Carousel from 'bootstrap/js/src/carousel';
+import Popover from 'bootstrap/js/src/popover';

 //
-// ACHeaderSlider is a small slider used in banner of AccompanyingCourse Section
+// Carousel: ACHeaderSlider is a small slider used in banner of AccompanyingCourse Section
 // Initialize options, and show/hide controls in first/last slides
 //
 let ACHeaderSlider = document.querySelector('#ACHeaderSlider');
@@ -48,3 +49,14 @@ if (ACHeaderSlider) {
        }
    })
 }
+
+//
+// Popover: used in workflow breadcrumb,
+// (expected in: contextual help, notification-box, workflow-box )
+//
+const triggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
+const popoverList = triggerList.map(function (el) {
+    return new Popover(el, {
+        html: true,
+    });
+});
--- a/src/Bundle/ChillMainBundle/Resources/public/module/entity-workflow-pick/index.js
+++ b/src/Bundle/ChillMainBundle/Resources/public/module/entity-workflow-pick/index.js
@@ -0,0 +1,34 @@
+import { createApp } from "vue";
+import ListWorkflowModalVue from 'ChillMainAssets/vuejs/_components/EntityWorkflow/ListWorkflowModal.vue';
+import { _createI18n } from "ChillMainAssets/vuejs/_js/i18n";
+
+const i18n = _createI18n({});
+
+// list workflow
+document.querySelectorAll('[data-list-workflows]')
+    .forEach(function (el) {
+        const app = {
+            components: {
+                ListWorkflowModalVue,
+            },
+            template:
+                '<list-workflow-modal-vue ' +
+                    ':workflows="workflows" ' +
+                    ':allowCreate="allowCreate" ' +
+                    ':relatedEntityClass="relatedEntityClass" ' +
+                    ':relatedEntityId="relatedEntityId" ' +
+                    ':workflowsAvailables="workflowsAvailables" ' +
+                '></list-workflow-modal-vue>',
+            data() {
+                return {
+                    workflows: JSON.parse(el.dataset.workflows),
+                    allowCreate: el.dataset.allowCreate === "1",
+                    relatedEntityClass: el.dataset.relatedEntityClass,
+                    relatedEntityId: Number.parseInt(el.dataset.relatedEntityId),
+                    workflowsAvailables: JSON.parse(el.dataset.workflowsAvailables),
+                }
+            }
+        };
+        createApp(app).use(i18n).mount(el);
+    })
+;
--- a/src/Bundle/ChillMainBundle/Resources/public/module/entity-workflow-subscribe/index.js
+++ b/src/Bundle/ChillMainBundle/Resources/public/module/entity-workflow-subscribe/index.js
@@ -0,0 +1,32 @@
+import {createApp} from "vue";
+import EntityWorkflowVueSubscriber from 'ChillMainAssets/vuejs/_components/EntityWorkflow/EntityWorkflowVueSubscriber.vue';
+import { _createI18n } from 'ChillMainAssets/vuejs/_js/i18n';
+import { appMessages } from 'ChillMainAssets/vuejs/PickEntity/i18n';
+
+const i18n = _createI18n(appMessages);
+
+let containers = document.querySelectorAll('[data-entity-workflow-subscribe]');
+
+containers.forEach(container => {
+    let app = {
+        components: {
+            EntityWorkflowVueSubscriber,
+        },
+        template: '<entity-workflow-vue-subscriber :entityWorkflowId="this.entityWorkflowId" :subscriberStep="this.subscriberStep" :subscriberFinal="this.subscriberFinal" @subscriptionUpdated="onUpdate"></entity-workflow-vue-subscriber>',
+        data() {
+            return {
+                entityWorkflowId: Number.parseInt(container.dataset.entityWorkflowId),
+                subscriberStep: container.dataset.subscribeStep === "1",
+                subscriberFinal: container.dataset.subscribeFinal === "1",
+            }
+        },
+        methods: {
+            onUpdate(status) {
+               this.subscriberStep = status.step;
+               this.subscriberFinal = status.final;
+            }
+        }
+    }
+
+    createApp(app).use(i18n).mount(container);
+})
--- a/src/Bundle/ChillMainBundle/Resources/public/module/notification/toggle_read.js
+++ b/src/Bundle/ChillMainBundle/Resources/public/module/notification/toggle_read.js
@@ -6,7 +6,7 @@ const i18n = _createI18n({});

 window.addEventListener('DOMContentLoaded', function (e) {
    document.querySelectorAll('.notification_toggle_read_status')
-        .forEach(function (el) {
+        .forEach(function (el, i) {
            createApp({
                template: '<notification-read-toggle ' +
                    ':notificationId="notificationId" ' +
@@ -26,13 +26,25 @@ window.addEventListener('DOMContentLoaded', function (e) {
                        buttonNoText: 'false' === el.dataset.buttonText,
                        showUrl: el.dataset.showButtonUrl,
                        isRead: 1 === +el.dataset.notificationCurrentIsRead,
+                        container: el.dataset.container
+                    }
+                },
+                computed: {
+                    getContainer() {
+                        return document.querySelectorAll('div.' + this.container);
                    }
                },
                methods: {
                    onMarkRead() {
+                        if (typeof this.getContainer[i] !== 'undefined') {
+                            this.getContainer[i].classList.replace('read', 'unread');
+                        } else { throw 'data-container attribute is missing' }
                        this.isRead = false;
                    },
                    onMarkUnread() {
+                        if (typeof this.getContainer[i] !== 'undefined') {
+                            this.getContainer[i].classList.replace('unread', 'read');
+                        } else { throw 'data-container attribute is missing' }
                        this.isRead = true;
                    },
                }
@@ -40,4 +52,4 @@ window.addEventListener('DOMContentLoaded', function (e) {
            .use(i18n)
            .mount(el);
        });
-})
+});
--- a/src/Bundle/ChillMainBundle/Resources/public/module/pick-entity/index.js
+++ b/src/Bundle/ChillMainBundle/Resources/public/module/pick-entity/index.js
@@ -5,18 +5,27 @@ import { appMessages } from 'ChillMainAssets/vuejs/PickEntity/i18n';

 const i18n = _createI18n(appMessages);

-window.addEventListener('DOMContentLoaded', function(e) {
+let appsOnPage = new Map();

-    let apps = document.querySelectorAll('[data-module="pick-dynamic"]');
+function loadDynamicPicker(element) {
+
+    let apps = element.querySelectorAll('[data-module="pick-dynamic"]');

    apps.forEach(function(el) {

        const
            isMultiple = parseInt(el.dataset.multiple) === 1,
-            input = document.querySelector('[data-input-uniqid="'+ el.dataset.uniqid +'"]'),
-            picked = isMultiple ? JSON.parse(input.value) : [JSON.parse(input.value)];
+            uniqId = el.dataset.uniqid,
+            input = element.querySelector('[data-input-uniqid="'+ el.dataset.uniqid +'"]'),
+            picked = (isMultiple) ? (JSON.parse(input.value)) : ((input.value === '[]') ? (null) : ([JSON.parse(input.value)]));

-        createApp({
+        if (!isMultiple) {
+            if (input.value === '[]'){
+                input.value = null;
+            }
+        }
+
+        const app = createApp({
            template: '<pick-entity ' +
                ':multiple="multiple" ' +
                ':types="types" ' +
@@ -31,7 +40,7 @@ window.addEventListener('DOMContentLoaded', function(e) {
                return {
                    multiple: isMultiple,
                    types: JSON.parse(el.dataset.types),
-                    picked,
+                    picked: picked === null ? [] : picked,
                    uniqid: el.dataset.uniqid,
                }
            },
@@ -65,5 +74,36 @@ window.addEventListener('DOMContentLoaded', function(e) {
        })
        .use(i18n)
        .mount(el);
+
+        appsOnPage.set(uniqId, app);
    });
-});
+}
+
+
+document.addEventListener('show-hide-show', function(e) {
+    console.log('creation event caught')
+    loadDynamicPicker(e.detail.container)
+})
+
+document.addEventListener('show-hide-hide', function(e) {
+    console.log('hiding event caught')
+    e.detail.container.querySelectorAll('[data-module="pick-dynamic"]').forEach((el) => {
+        let uniqId = el.dataset.uniqid;
+        console.log(uniqId);
+        if (appsOnPage.has(uniqId)) {
+            appsOnPage.get(uniqId).unmount();
+            console.log('App has been unmounted')
+            appsOnPage.delete(uniqId);
+        }
+    })
+})
+
+document.addEventListener('DOMContentLoaded', function(e) {
+    console.log('loaded event', e)
+    loadDynamicPicker(document)
+})
+
+
+
+
+
--- a/src/Bundle/ChillMainBundle/Resources/public/module/wopi-link/index.js
+++ b/src/Bundle/ChillMainBundle/Resources/public/module/wopi-link/index.js
@@ -0,0 +1,29 @@
+import { createApp } from 'vue';
+import OpenWopiLink from 'ChillMainAssets/vuejs/_components/OpenWopiLink';
+import {_createI18n} from "ChillMainAssets/vuejs/_js/i18n";
+
+const i18n = _createI18n({});
+
+window.addEventListener('DOMContentLoaded', function (e) {
+    document.querySelectorAll('span[data-module="wopi-link"]')
+        .forEach(function (el) {
+            createApp({
+                template: '<open-wopi-link :wopiUrl="wopiUrl" :title="title" :type="type" :button="button"></open-wopi-link>',
+                components: {
+                    OpenWopiLink
+                },
+                data() {
+                    return {
+                        wopiUrl: el.dataset.wopiUrl,
+                        title: el.dataset.docTitle,
+                        type: el.dataset.docType,
+                        button: el.dataset.button ? JSON.parse(el.dataset.button) : {}
+                    }
+                }
+            })
+            .use(i18n)
+            .mount(el)
+            ;
+        })
+    ;
+});
--- a/src/Bundle/ChillMainBundle/Resources/public/page/homepage_widget/index.js
+++ b/src/Bundle/ChillMainBundle/Resources/public/page/homepage_widget/index.js
@@ -0,0 +1,16 @@
+import { createApp } from 'vue';
+import { _createI18n } from 'ChillMainAssets/vuejs/_js/i18n';
+import { appMessages } from 'ChillMainAssets/vuejs/HomepageWidget/js/i18n';
+import { store } from 'ChillMainAssets/vuejs/HomepageWidget/js/store';
+import App from 'ChillMainAssets/vuejs/HomepageWidget/App';
+
+const i18n = _createI18n(appMessages);
+
+const app = createApp({
+    template: `<app></app>`,
+})
+.use(store)
+.use(i18n)
+.component('app', App)
+.mount('#homepage_widget')
+;
--- a/src/Bundle/ChillMainBundle/Resources/public/page/workflow-show/index.js
+++ b/src/Bundle/ChillMainBundle/Resources/public/page/workflow-show/index.js
@@ -0,0 +1,90 @@
+import {ShowHide} from 'ChillMainAssets/lib/show_hide/show_hide.js';
+
+window.addEventListener('DOMContentLoaded', function() {
+    let
+        divTransitions = document.querySelector('#transitions'),
+        futureDestUsersContainer = document.querySelector('#futureDestUsers')
+    ;
+
+    if (null !== divTransitions) {
+        new ShowHide({
+            load_event: null,
+            froms: [divTransitions],
+            container: [futureDestUsersContainer],
+            test: function(divs, arg2, arg3) {
+                for (let div of divs) {
+                    for (let input of div.querySelectorAll('input')) {
+                        if (input.checked) {
+                            if (input.dataset.toFinal === "1") {
+                                return false;
+                            } else {
+                                return true;
+                            }
+                        }
+                    }
+                }
+
+                return true;
+            },
+        });
+    }
+
+    let
+        transitionFilterContainer = document.querySelector('#transitionFilter'),
+        transitions = document.querySelector('#transitions')
+    ;
+
+    if (null !== transitionFilterContainer) {
+        transitions.querySelectorAll('.form-check').forEach(function(row) {
+
+            const isForward = row.querySelector('input').dataset.isForward;
+
+            new ShowHide({
+                load_event: null,
+                froms: [transitionFilterContainer],
+                container: row,
+                test: function (containers) {
+                    for (let container of containers) {
+                        for (let input of container.querySelectorAll('input')) {
+                            if (input.checked) {
+                                return isForward === input.value;
+                            }
+                        }
+                    }
+                },
+                toggle_callback: function (c, dir) {
+                    for (let div of c) {
+                        let input = div.querySelector('input');
+                        if ('hide' === dir) {
+                            input.checked = false;
+                            input.disabled = true;
+                        } else {
+                            input.disabled = false;
+                        }
+                    }
+                },
+            });
+        });
+    }
+
+    // validate form
+    let form = document.querySelector('form[name="workflow_step"]');
+
+    if (form === null) {
+        console.error('form to validate not found');
+    }
+
+    form.addEventListener('submit', function (event) {
+        const datas = new FormData(event.target);
+
+        if (datas.has('workflow_step[future_dest_users]')) {
+            const dests = JSON.parse(datas.get('workflow_step[future_dest_users]'));
+            if (dests === null || (dests instanceof Array && dests.length === 0)) {
+                event.preventDefault();
+                console.log('no users!');
+                window.alert('Indiquez un utilisateur pour traiter la prochaine étape.');
+            }
+        }
+    });
+
+});
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress.vue
@@ -98,6 +98,8 @@
               v-bind:defaultz="this.defaultz"
               v-bind:entity="this.entity"
               v-bind:flag="this.flag"
+               v-bind:errors="this.errors"
+               v-bind:checkErrors="this.checkErrors"
               @getCities="getCities"
               @getReferenceAddresses="getReferenceAddresses">
            </edit-pane>
@@ -123,6 +125,8 @@
         v-bind:defaultz="this.defaultz"
         v-bind:entity="this.entity"
         v-bind:flag="this.flag"
+         v-bind:errors="this.errors"
+         v-bind:checkErrors="this.checkErrors"
         v-bind:insideModal="false"
         @getCities="getCities"
         @getReferenceAddresses="getReferenceAddresses">
@@ -256,8 +260,10 @@ export default {
            editPane: false,
            datePane: false,
            loading: false,
-            success: false
+            success: false,
+            dirty: false
         },
+         errors: [],
         defaultz: {
            button: {
               text: { create: 'add_an_address_title', edit: 'edit_address' },
@@ -529,6 +535,23 @@ export default {
         });
      },

+      checkErrors() {
+         this.errors = [];
+         if (this.flag.dirty) {
+            if (this.entity.selected.country === null) {
+               this.errors.push("Un pays doit être sélectionné.");
+            }
+            if (Object.keys(this.entity.selected.city).length === 0) {
+               this.errors.push("Une ville doit être sélectionnée.");
+            }
+            if (!this.entity.selected.isNoAddress) {
+               if (this.entity.selected.address.street === null || this.entity.selected.address.streetNumber === null) {
+                  this.errors.push("Une adresse doit être sélectionnée.");
+               }
+            }
+         }
+      },
+
      /*
      *   Make form ready for new changes
      */
@@ -539,6 +562,7 @@ export default {
         this.entity.loaded.cities = [];
         this.entity.loaded.countries = [];

+         this.entity.selected.confidential = this.context.edit ? this.entity.address.confidential : false;
         this.entity.selected.isNoAddress = (this.context.edit && this.entity.address.text === '') ? true : false;

         this.entity.selected.country = this.context.edit ? this.entity.address.country : {};
@@ -570,6 +594,7 @@ export default {
      {
         console.log('apply changes');
         let newAddress = {
+            'confidential': this.entity.selected.confidential,
            'isNoAddress': this.entity.selected.isNoAddress,
            'street': this.entity.selected.isNoAddress ? '' : this.entity.selected.address.street,
            'streetNumber': this.entity.selected.isNoAddress ? '' : this.entity.selected.address.streetNumber,
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressMore.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressMore.vue
@@ -6,7 +6,6 @@
            <input class="form-control"
            type="text"
            name="floor"
-            maxlength=16
            :placeholder="$t('floor')"
            v-model="floor"/>
            <label for="floor">{{ $t('floor') }}</label>
@@ -15,7 +14,6 @@
            <input class="form-control"
            type="text"
            name="corridor"
-            maxlength=16
            :placeholder="$t('corridor')"
            v-model="corridor"/>
            <label for="corridor">{{ $t('corridor') }}</label>
@@ -24,7 +22,6 @@
            <input class="form-control"
            type="text"
            name="steps"
-            maxlength=16
            :placeholder="$t('steps')"
            v-model="steps"/>
            <label for="steps">{{ $t('steps') }}</label>
@@ -33,7 +30,6 @@
            <input class="form-control"
            type="text"
            name="flat"
-            maxlength=16
            :placeholder="$t('flat')"
            v-model="flat"/>
            <label for="flat">{{ $t('flat') }}</label>
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressSelection.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressSelection.vue
@@ -10,8 +10,10 @@
         :deselect-label="$t('create_address')"
         :selected-label="$t('multiselect.selected_label')"
         @search-change="listenInputSearch"
+         :internal-search="false"
         ref="addressSelector"
         @select="selectAddress"
+         @remove="remove"
         name="field"
         track-by="id"
         label="value"
@@ -56,7 +58,7 @@ import { searchReferenceAddresses, fetchReferenceAddresses } from '../../api.js'
 export default {
   name: 'AddressSelection',
   components: { VueMultiselect },
-   props: ['entity', 'context', 'updateMapCenter'],
+   props: ['entity', 'context', 'updateMapCenter', 'flag', 'checkErrors'],
   data() {
      return {
         value: this.context.edit ? this.entity.address.addressReference : null,
@@ -109,6 +111,13 @@ export default {
         this.entity.selected.address.streetNumber = value.streetNumber;
         this.entity.selected.writeNew.address = false;
         this.updateMapCenter(value.point);
+         this.flag.dirty = true;
+         this.checkErrors();
+      },
+      remove() {
+         this.flag.dirty = true;
+         this.entity.selected.address = {};
+         this.checkErrors();
      },
      listenInputSearch(query) {
         //console.log('listenInputSearch', query, this.isAddressSelectorOpen);
@@ -149,6 +158,8 @@ export default {
            this.entity.selected.address.street = addr.street;
            this.entity.selected.address.streetNumber = addr.number;
            this.entity.selected.writeNew.address = true;
+            this.flag.dirty = true;
+            this.checkErrors();
         }
      },
      splitAddress(address) {
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/CitySelection.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/CitySelection.vue
@@ -7,6 +7,7 @@
         @search-change="listenInputSearch"
         ref="citySelector"
         @select="selectCity"
+         @remove="remove"
         name="field"
         track-by="id"
         label="value"
@@ -17,6 +18,7 @@
         :selected-label="$t('multiselect.selected_label')"
         :taggable="true"
         :multiple="false"
+         :internal-search="false"
         @tag="addPostcode"
         :tagPlaceholder="$t('create_postal_code')"
         :loading="isLoading"
@@ -55,12 +57,12 @@ import { searchCities, fetchCities } from '../../api.js';
 export default {
   name: 'CitySelection',
   components: { VueMultiselect },
-   props: ['entity', 'context', 'focusOnAddress', 'updateMapCenter'],
+   props: ['entity', 'context', 'focusOnAddress', 'updateMapCenter', 'flag', 'checkErrors'],
   emits: ['getReferenceAddresses'],
   data() {
      return {
         value: this.context.edit ? this.entity.address.postcode : null,
-         isLoading: false
+         isLoading: false,
      }
   },
   computed: {
@@ -123,6 +125,13 @@ export default {
         if (value.center) {
            this.updateMapCenter(value.center);
         }
+         this.flag.dirty = true;
+         this.checkErrors();
+      },
+      remove() {
+         this.flag.dirty = true;
+         this.entity.selected.city = {};
+         this.checkErrors();
      },
      listenInputSearch(query) {
         if (query.length > 2) {
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/CountrySelection.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/CountrySelection.vue
@@ -12,7 +12,9 @@
         :select-label="$t('multiselect.select_label')"
         :deselect-label="$t('multiselect.deselect_label')"
         :selected-label="$t('multiselect.selected_label')"
-         @select="selectCountry">
+         @select="selectCountry"
+         @remove="remove"
+      >
      </VueMultiselect>
   </div>
 </template>
@@ -23,7 +25,7 @@ import VueMultiselect from 'vue-multiselect';
 export default {
   name: 'CountrySelection',
   components: { VueMultiselect },
-   props: ['context', 'entity'],
+   props: ['context', 'entity', 'flag', 'checkErrors'],
   emits: ['getCities'],
   data() {
      return {
@@ -34,14 +36,13 @@ export default {
   },
   computed: {
      sortedCountries() {
-         //console.log('sorted countries');
         const countries = this.entity.loaded.countries;
         let sortedCountries = [];
         sortedCountries.push(...countries.filter(c => c.countryCode === 'FR'))
         sortedCountries.push(...countries.filter(c => c.countryCode === 'BE'))
         sortedCountries.push(...countries.filter(c => c.countryCode !== 'FR').filter(c => c.countryCode !== 'BE'))
         return sortedCountries;
-      }
+      },
   },
   mounted() {
      this.init();
@@ -50,6 +51,7 @@ export default {
      init() {
         if (this.value !== undefined) {
            this.selectCountry(this.value);
+            this.flag.dirty = false;
         }
      },
      selectCountryByCode(countryCode) {
@@ -62,7 +64,13 @@ export default {
         //console.log('select country', value);
         this.entity.selected.country = value;
         this.$emit('getCities', value);
-      }
+         this.checkErrors();
+      },
+      remove() {
+         this.flag.dirty = true;
+         this.entity.selected.country = null;
+         this.checkErrors();
+      },

   }
 };
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/EditPane.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/EditPane.vue
@@ -7,16 +7,32 @@
         <span class="sr-only">Loading...</span>
      </div>

+      <div v-if="errors.length" class="alert alert-warning" >
+         <ul>
+            <li v-for="(e, i) in errors" :key="i">{{ e }}</li>
+         </ul>
+      </div>
+
      <h4 class="h3">{{ $t('select_an_address_title') }}</h4>
      <div class="row my-3">
         <div class="col-lg-6">

+            <div class="form-check">
+               <input type="checkbox"
+                  class="form-check-input"
+                  id="isConfidential"
+                  v-model="isConfidential"
+                  :value="valueConfidential" />
+               <label class="form-check-label" for="isConfidential">
+                  {{ $t('isConfidential') }}
+               </label>
+            </div>
            <div class="form-check">
               <input type="checkbox"
                  class="form-check-input"
                  id="isNoAddress"
                  v-model="isNoAddress"
-                  v-bind:value="value" />
+                  :value="value" />
               <label class="form-check-label" for="isNoAddress">
                  {{ $t('isNoAddress') }}
               </label>
@@ -25,6 +41,8 @@
            <country-selection
               v-bind:context="context"
               v-bind:entity="entity"
+               v-bind:flag="flag"
+               v-bind:checkErrors="checkErrors"
               @getCities="$emit('getCities', selected.country)">
            </country-selection>

@@ -33,13 +51,17 @@
               v-bind:context="context"
               v-bind:focusOnAddress="focusOnAddress"
               v-bind:updateMapCenter="updateMapCenter"
+               v-bind:flag="flag"
+               v-bind:checkErrors="checkErrors"
               @getReferenceAddresses="$emit('getReferenceAddresses', selected.city)">
            </city-selection>

            <address-selection v-if="!isNoAddress"
               v-bind:entity="entity"
               v-bind:context="context"
-               v-bind:updateMapCenter="updateMapCenter">
+               v-bind:updateMapCenter="updateMapCenter"
+               v-bind:flag="flag"
+               v-bind:checkErrors="checkErrors">
            </address-selection>

         </div>
@@ -99,12 +121,15 @@ export default {
      'flag',
      'entity',
      'errorMsg',
-      'insideModal'
+      'insideModal',
+      'errors',
+      'checkErrors',
   ],
   emits: ['getCities', 'getReferenceAddresses'],
   data() {
      return {
-         value: false
+         value: false,
+         valueConfidential: false,
      }
   },
   computed: {
@@ -120,6 +145,14 @@ export default {
      addressMap() {
         return this.entity.addressMap;
      },
+      isConfidential: {
+         set(value) {
+            this.entity.selected.confidential = value;
+         },
+         get() {
+            return this.entity.selected.confidential;
+         }
+      },
      isNoAddress: {
         set(value) {
            console.log('isNoAddress value', value);
@@ -128,7 +161,7 @@ export default {
         get() {
            return this.entity.selected.isNoAddress;
         }
-      }
+      },
   },
   methods: {
      focusOnAddress() {
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/i18n.js
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/i18n.js
@@ -18,6 +18,7 @@ const addressMessages = {
        other_address: 'Autre adresse',
        create_address: 'Adresse inconnue. Cliquez ici pour créer une nouvelle adresse',
        isNoAddress: 'Pas d\'adresse complète',
+        isConfidential: 'Adresse confidentielle',
        street: 'Nom de rue',
        streetNumber: 'Numéro',
        floor: 'Étage',
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/App.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/App.vue
@@ -0,0 +1,140 @@
+<template>
+   
+   <h2>{{ $t('main_title') }}</h2>
+   
+   <ul class="nav nav-tabs">
+      <li class="nav-item">
+         <a class="nav-link"
+            :class="{'active': activeTab === 'MyCustoms'}"
+            @click="selectTab('MyCustoms')">
+            <i class="fa fa-dashboard"></i>
+         </a>
+      </li>
+      <li class="nav-item">
+         <a class="nav-link"
+            :class="{'active': activeTab === 'MyNotifications'}"
+            @click="selectTab('MyNotifications')">
+            {{ $t('my_notifications.tab') }}
+            <tab-counter :count="state.notifications.count"></tab-counter>
+         </a>
+      </li>
+      <li class="nav-item">
+         <a class="nav-link"
+            :class="{'active': activeTab === 'MyAccompanyingCourses'}"
+            @click="selectTab('MyAccompanyingCourses')">
+            {{ $t('my_accompanying_courses.tab') }}
+            <tab-counter :count="state.accompanyingCourses.count"></tab-counter>
+         </a>
+      </li>
+      <li class="nav-item">
+         <a class="nav-link"
+            :class="{'active': activeTab === 'MyWorks'}"
+            @click="selectTab('MyWorks')">
+            {{ $t('my_works.tab') }}
+            <tab-counter :count="state.works.count"></tab-counter>
+         </a>
+      </li>
+      <li class="nav-item">
+         <a class="nav-link"
+            :class="{'active': activeTab === 'MyEvaluations'}"
+            @click="selectTab('MyEvaluations')">
+            {{ $t('my_evaluations.tab') }}
+            <tab-counter :count="state.evaluations.count"></tab-counter>
+         </a>
+      </li>
+      <li class="nav-item">
+         <a class="nav-link"
+            :class="{'active': activeTab === 'MyTasks'}"
+            @click="selectTab('MyTasks')">
+            {{ $t('my_tasks.tab') }}
+            <tab-counter :count="state.tasks.warning.count"></tab-counter>
+            <tab-counter :count="state.tasks.alert.count"></tab-counter>
+         </a>
+      </li>
+      <li class="nav-item loading ms-auto py-2" v-if="loading">
+         <i class="fa fa-circle-o-notch fa-spin fa-lg text-chill-gray" :title="$t('loading')"></i>
+      </li>
+   </ul>
+   
+   <div class="my-4">
+      <my-customs
+         v-if="activeTab === 'MyCustoms'">
+      </my-customs>
+      <my-works
+         v-else-if="activeTab === 'MyWorks'">
+      </my-works>
+      <my-evaluations
+         v-else-if="activeTab === 'MyEvaluations'">
+      </my-evaluations>
+      <my-tasks
+         v-else-if="activeTab === 'MyTasks'">
+      </my-tasks>
+      <my-accompanying-courses
+         v-else-if="activeTab === 'MyAccompanyingCourses'">
+      </my-accompanying-courses>
+      <my-notifications
+         v-else-if="activeTab === 'MyNotifications'">
+      </my-notifications>
+   </div>
+</template>
+
+<script>
+import MyCustoms from './MyCustoms';
+import MyWorks from './MyWorks';
+import MyEvaluations from './MyEvaluations';
+import MyTasks from './MyTasks';
+import MyAccompanyingCourses from './MyAccompanyingCourses';
+import MyNotifications from './MyNotifications';
+import TabCounter from './TabCounter';
+import { mapState } from "vuex";
+
+export default {
+   name: "App",
+   components: {
+      MyCustoms,
+      MyWorks,
+      MyEvaluations,
+      MyTasks,
+      MyAccompanyingCourses,
+      MyNotifications,
+      TabCounter,
+   },
+   data() {
+      return {
+         activeTab: 'MyCustoms'
+      }
+   },
+   computed: {
+      ...mapState([
+         'loading',
+      ]),
+      // just to see all in devtool :
+      ...mapState({
+         state: (state) => state,
+      }),
+   },
+   methods: {
+      selectTab(tab) {
+         this.$store.dispatch('getByTab', { tab: tab });
+         this.activeTab = tab;
+      }
+   },
+   mounted() {
+      for (const m of [
+         'MyNotifications',
+         'MyAccompanyingCourses',
+         'MyWorks',
+         'MyEvaluations',
+         'MyTasks',
+      ]) {
+         this.$store.dispatch('getByTab', { tab: m, param: "countOnly=1" });
+      }
+   }
+}
+</script>
+
+<style scoped>
+a.nav-link {
+   cursor: pointer;
+}
+</style>
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyAccompanyingCourses.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyAccompanyingCourses.vue
@@ -0,0 +1,84 @@
+<template>
+   <div class="alert alert-light">{{ $t('my_accompanying_courses.description') }}</div>
+   <span v-if="noResults" class="chill-no-data-statement">{{ $t('no_data') }}</span>
+   <tab-table v-else>
+      <template v-slot:thead>
+         <th scope="col">{{ $t('opening_date') }}</th>
+         <th scope="col">{{ $t('social_issues') }}</th>
+         <th scope="col">{{ $t('concerned_persons') }}</th>
+         <th scope="col"></th>
+         <th scope="col"></th>
+      </template>
+      <template v-slot:tbody>
+         <tr v-for="(c, i) in accompanyingCourses.results" :key="`course-${i}`">
+            <td>{{ $d(c.openingDate.datetime, 'short') }}</td>
+            <td>
+               <span v-for="i in c.socialIssues"
+                  class="chill-entity entity-social-issue">
+                  <span class="badge bg-chill-l-gray text-dark">
+                     {{ i.title.fr }}
+                  </span>
+               </span>
+            </td>
+            <td>
+               <span v-for="p in c.participations" class="me-1" :key="p.person.id">
+                  <on-the-fly
+                     :type="p.person.type"
+                     :id="p.person.id"
+                     :buttonText="p.person.textAge"
+                     :displayBadge="'true' === 'true'"
+                     action="show">
+                  </on-the-fly>
+               </span>
+            </td>
+            <td>
+               <span v-if="c.emergency" class="badge rounded-pill bg-danger">{{ $t('emergency') }}</span>
+               <span v-if="c.confidential" class="badge rounded-pill bg-danger">{{ $t('confidential') }}</span>
+            </td>
+            <td>
+               <a class="btn btn-sm btn-show" :href="getUrl(c)">
+                  {{ $t('show_entity', { entity: $t('the_course') }) }}
+               </a>
+            </td>
+         </tr>
+      </template>
+   </tab-table>
+</template>
+
+<script>
+import { mapState, mapGetters } from "vuex";
+import TabTable from "./TabTable";
+import OnTheFly from 'ChillMainAssets/vuejs/OnTheFly/components/OnTheFly';
+
+export default {
+   name: "MyAccompanyingCourses",
+   components: {
+      TabTable,
+      OnTheFly,
+   },
+   computed: {
+      ...mapState([
+         'accompanyingCourses',
+      ]),
+      ...mapGetters([
+         'isAccompanyingCoursesLoaded',
+      ]),
+      noResults() {
+         if (!this.isAccompanyingCoursesLoaded) {
+            return false;
+         } else {
+            return this.accompanyingCourses.count === 0;
+         }
+      },
+   },
+   methods: {
+      getUrl(c) {
+         return `/fr/parcours/${c.id}`
+      }
+   }
+}
+</script>
+
+<style scoped>
+
+</style>
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyCustoms.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyCustoms.vue
@@ -0,0 +1,101 @@
+<template>
+   <span v-if="noResults" class="chill-no-data-statement">{{ $t('no_dashboard') }}</span>
+   <div v-else id="dashboards" class="row g-3" data-masonry='{"percentPosition": true }'>
+      
+      <div class="mbloc col col-sm-6 col-lg-4">
+         <div class="custom1">
+            <ul class="list-unstyled">
+               <li v-if="counter.notifications > 0">
+                  <i18n-t keypath="counter.unread_notifications" tag="span" :class="counterClass" :plural="counter.notifications">
+                     <template v-slot:n><span>{{ counter.notifications }}</span></template>
+                  </i18n-t>
+               </li>
+               <li v-if="counter.accompanyingCourses > 0">
+                  <i18n-t keypath="counter.assignated_courses" tag="span" :class="counterClass" :plural="counter.accompanyingCourses">
+                     <template v-slot:n><span>{{ counter.accompanyingCourses }}</span></template>
+                  </i18n-t>
+               </li>
+               <li v-if="counter.works > 0">
+                  <i18n-t keypath="counter.assignated_actions" tag="span" :class="counterClass" :plural="counter.works">
+                     <template v-slot:n><span>{{ counter.works }}</span></template>
+                  </i18n-t>
+               </li>
+               <li v-if="counter.evaluations > 0">
+                  <i18n-t keypath="counter.assignated_evaluations" tag="span" :class="counterClass" :plural="counter.evaluations">
+                     <template v-slot:n><span>{{ counter.evaluations }}</span></template>
+                  </i18n-t>
+               </li>
+               <li v-if="counter.tasksAlert > 0">
+                  <i18n-t keypath="counter.alert_tasks" tag="span" :class="counterClass" :plural="counter.tasksAlert">
+                     <template v-slot:n><span>{{ counter.tasksAlert }}</span></template>
+                  </i18n-t>
+               </li>
+               <li v-if="counter.tasksWarning > 0">
+                  <i18n-t keypath="counter.warning_tasks" tag="span" :class="counterClass" :plural="counter.tasksWarning">
+                     <template v-slot:n><span>{{ counter.tasksWarning }}</span></template>
+                  </i18n-t>
+               </li>
+            </ul>
+         </div>
+      </div>
+      
+      <!--
+      <div class="mbloc col col-sm-6 col-lg-4">
+         <div class="custom2">
+            Mon dashboard personnalisé
+         </div>
+      </div>
+      <div class="mbloc col col-sm-6 col-lg-4">
+         <div class="custom3">
+            Mon dashboard personnalisé
+         </div>
+      </div>
+      <div class="mbloc col col-sm-6 col-lg-4">
+         <div class="custom4">
+            Mon dashboard personnalisé
+         </div>
+      </div>
+      -->
+
+   </div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+import Masonry from 'masonry-layout/masonry';
+
+export default {
+   name: "MyCustoms",
+   data() {
+      return {
+         counterClass: {
+            counter: true   //hack to pass class 'counter' in i18n-t
+         }
+      }
+   },
+   computed: {
+      ...mapGetters(['counter']),
+      noResults() {
+         return false
+      },
+   },
+   mounted() {
+      const elem = document.querySelector('#dashboards');
+      const masonry = new Masonry(elem, {});
+   }
+}
+</script>
+
+<style lang="scss" scoped>
+div.custom4,
+div.custom3,
+div.custom2 {
+   font-style: italic;
+   color: var(--bs-chill-gray);
+}
+span.counter {
+   & > span {
+      background-color: unset;
+   }
+}
+</style>
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyEvaluations.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyEvaluations.vue
@@ -0,0 +1,105 @@
+<template>
+<div class="accompanying_course_work">
+   <div class="alert alert-light">{{ $t('my_evaluations.description') }}</div>
+   <span v-if="noResults" class="chill-no-data-statement">{{ $t('no_data') }}</span>
+   <tab-table v-else>
+      <template v-slot:thead>
+         <th scope="col">{{ $t('max_date') }}</th>
+         <th scope="col">{{ $t('evaluation') }}</th>
+         <th scope="col">{{ $t('SocialAction') }}</th>
+         <th scope="col"></th>
+      </template>
+      <template v-slot:tbody>
+         <tr v-for="(e, i) in evaluations.results" :key="`evaluation-${i}`">
+            <td>{{ $d(e.maxDate.datetime, 'short') }}</td>
+            <td>
+               {{ e.evaluation.title.fr }}
+            </td>
+            <td>
+               <span class="chill-entity entity-social-issue">
+                  <span class="badge bg-chill-l-gray text-dark">
+                     {{ e.accompanyingPeriodWork.socialAction.issue.text }}
+                  </span>
+               </span>
+               <h4 class="badge-title">
+                  <span class="title_label"></span>
+                  <span class="title_action">
+                     {{ e.accompanyingPeriodWork.socialAction.text }}
+                  </span>
+               </h4>
+               <span v-for="person in e.accompanyingPeriodWork.persons" class="me-1" :key="person.id">
+                  <on-the-fly
+                     :type="person.type"
+                     :id="person.id"
+                     :buttonText="person.textAge"
+                     :displayBadge="'true' === 'true'"
+                     action="show">
+                  </on-the-fly>
+               </span>
+            </td>
+            <td>
+               <div class="btn-group-vertical" role="group" aria-label="Actions">
+                  <a class="btn btn-sm btn-show" :href="getUrl(e)">
+                     {{ $t('show_entity', { entity: $t('the_evaluation') }) }}
+                  </a>
+                  <a class="btn btn-sm btn-update" :href="getUrl(e.accompanyingPeriodWork)">
+                     {{ $t('show_entity', { entity: $t('the_action') }) }}
+                  </a>
+                  <a class="btn btn-sm btn-show" :href="getUrl(e.accompanyingPeriodWork.accompanyingPeriod)">
+                     {{ $t('show_entity', { entity: $t('the_course') }) }}
+                  </a>
+               </div>
+            </td>
+         </tr>
+      </template>
+   </tab-table>
+</div>
+</template>
+
+<script>
+import { mapState, mapGetters } from "vuex";
+import TabTable from "./TabTable";
+import OnTheFly from 'ChillMainAssets/vuejs/OnTheFly/components/OnTheFly';
+
+export default {
+   name: "MyEvaluations",
+   components: {
+      TabTable,
+      OnTheFly,
+   },
+   computed: {
+      ...mapState([
+         'evaluations',
+      ]),
+      ...mapGetters([
+         'isEvaluationsLoaded',
+      ]),
+      noResults() {
+         if (!this.isEvaluationsLoaded) {
+            return false;
+         } else {
+            return this.evaluations.count === 0;
+         }
+      }
+   },
+   methods: {
+      getUrl(e) {
+         switch (e.type) {
+            case 'accompanying_period_work_evaluation':
+               let anchor = '#evaluations';
+               return `/fr/person/accompanying-period/work/${e.accompanyingPeriodWork.id}/edit${anchor}`;
+            case 'accompanying_period_work':
+               return `/fr/person/accompanying-period/work/${e.id}/edit`
+            case 'accompanying_period':
+               return `/fr/parcours/${e.id}`
+            default:
+               throw 'entity type unknown';
+         }
+      }
+   },
+}
+</script>
+
+<style scoped>
+
+</style>
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyNotifications.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyNotifications.vue
@@ -0,0 +1,96 @@
+<template>
+   <div class="alert alert-light">{{ $t('my_notifications.description') }}</div>
+   <span v-if="noResults" class="chill-no-data-statement">{{ $t('no_data') }}</span>
+   <tab-table v-else>
+      <template v-slot:thead>
+         <th scope="col">{{ $t('Date') }}</th>
+         <th scope="col">{{ $t('Subject') }}</th>
+         <th scope="col">{{ $t('From') }}</th>
+         <th scope="col"></th>
+      </template>
+      <template v-slot:tbody>
+         <tr v-for="(n, i) in notifications.results" :key="`notify-${i}`">
+            <td>{{ $d(n.date.datetime, 'long') }}</td>
+            <td>
+               <span class="unread">
+                  <i class="fa fa-envelope-o"></i>
+                  <a :href="getNotificationUrl(n)">{{ n.title }}</a>
+               </span>
+            </td>
+            <td>{{ n.sender.text }}</td>
+            <td>
+               <a class="btn btn-sm btn-show"
+                  :href="getEntityUrl(n)">
+                  {{ $t('show_entity', { entity: getEntityName(n) }) }}
+               </a>
+            </td>
+         </tr>
+      </template>
+   </tab-table>
+</template>
+
+<script>
+import { mapState, mapGetters } from "vuex";
+import TabTable from "./TabTable";
+import { appMessages } from 'ChillMainAssets/vuejs/HomepageWidget/js/i18n';
+
+
+export default {
+   name: "MyNotifications",
+   components: {
+      TabTable
+   },
+   computed: {
+      ...mapState([
+         'notifications',
+      ]),
+      ...mapGetters([
+         'isNotificationsLoaded',
+      ]),
+      noResults() {
+         if (!this.isNotificationsLoaded) {
+            return false;
+         } else {
+            return this.notifications.count === 0;
+         }
+      }
+   },
+   methods: {
+      getNotificationUrl(n) {
+         return `/fr/notification/${n.id}/show`
+      },
+      getEntityName(n) {
+         switch (n.relatedEntityClass) {
+            case 'Chill\\ActivityBundle\\Entity\\Activity':
+               return appMessages.fr.the_activity;
+            case 'Chill\\PersonBundle\\Entity\\AccompanyingPeriod':
+               return appMessages.fr.the_course;
+            default:
+               throw 'notification type unknown';
+         }
+      },
+      getEntityUrl(n) {
+         switch (n.relatedEntityClass) {
+            case 'Chill\\ActivityBundle\\Entity\\Activity':
+               return `/fr/activity/${n.relatedEntityId}/show`
+            case 'Chill\\PersonBundle\\Entity\\AccompanyingPeriod':
+               return `/fr/parcours/${n.relatedEntityId}`
+            default:
+               throw 'notification type unknown';
+         }
+      }
+   }
+}
+</script>
+
+<style lang="scss" scoped>
+span.unread {
+   font-weight: bold;
+   i {
+      margin-right: 0.5em;
+   }
+   a {
+      text-decoration: unset;
+   }
+}
+</style>
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyTasks.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyTasks.vue
@@ -0,0 +1,100 @@
+<template>
+   
+   <div class="alert alert-light">{{ $t('my_tasks.description_warning') }}</div>
+   <span v-if="noResultsAlert" class="chill-no-data-statement">{{ $t('no_data') }}</span>
+   <tab-table v-else>
+      <template v-slot:thead>
+         <th scope="col">{{ $t('warning_date') }}</th>
+         <th scope="col">{{ $t('max_date') }}</th>
+         <th scope="col">{{ $t('task') }}</th>
+         <th scope="col"></th>
+      </template>
+      <template v-slot:tbody>
+         <tr v-for="(t, i) in tasks.alert.results" :key="`task-alert-${i}`">
+            <td>{{ $d(t.warningDate.datetime, 'short') }}</td>
+            <td>
+               <span class="outdated">{{ $d(t.endDate.datetime, 'short') }}</span>
+            </td>
+            <td>{{ t.title }}</td>
+            <td>
+               <a class="btn btn-sm btn-show" :href="getUrl(t)">
+                  {{ $t('show_entity', { entity: $t('the_task') }) }}
+               </a>
+            </td>
+         </tr>
+      </template>
+   </tab-table>
+   
+   <div class="alert alert-light">{{ $t('my_tasks.description_alert') }}</div>
+   <span v-if="noResultsWarning" class="chill-no-data-statement">{{ $t('no_data') }}</span>
+   <tab-table v-else>
+      <template v-slot:thead>
+         <th scope="col">{{ $t('warning_date') }}</th>
+         <th scope="col">{{ $t('max_date') }}</th>
+         <th scope="col">{{ $t('task') }}</th>
+         <th scope="col"></th>
+      </template>
+      <template v-slot:tbody>
+         <tr v-for="(t, i) in tasks.warning.results" :key="`task-warning-${i}`">
+            <td>
+               <span class="outdated">{{ $d(t.warningDate.datetime, 'short') }}</span>
+            </td>
+            <td>{{ $d(t.endDate.datetime, 'short') }}</td>
+            <td>{{ t.title }}</td>
+            <td>
+               <a class="btn btn-sm btn-show" :href="getUrl(t)">
+                  {{ $t('show_entity', { entity: $t('the_task') }) }}
+               </a>
+            </td>
+         </tr>
+      </template>
+   </tab-table>
+   
+</template>
+
+<script>
+import { mapState, mapGetters } from "vuex";
+import TabTable from "./TabTable";
+
+export default {
+   name: "MyTasks",
+   components: {
+      TabTable
+   },
+   computed: {
+      ...mapState([
+         'tasks',
+      ]),
+      ...mapGetters([
+         'isTasksWarningLoaded',
+         'isTasksAlertLoaded',
+      ]),
+      noResultsAlert() {
+         if (!this.isTasksAlertLoaded) {
+            return false;
+         } else {
+            return this.tasks.alert.count === 0;
+         }
+      },
+      noResultsWarning() {
+         if (!this.isTasksWarningLoaded) {
+            return false;
+         } else {
+            return this.tasks.warning.count === 0;
+         }
+      }
+   },
+   methods: {
+      getUrl(t) {
+         return `/fr/task/single-task/${t.id}/show`
+      }
+   },
+}
+</script>
+
+<style scoped>
+span.outdated {
+   font-weight: bold;
+   color: var(--bs-warning);
+}
+</style>
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyWorks.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyWorks.vue
@@ -0,0 +1,98 @@
+<template>
+<div class="accompanying_course_work">
+   <div class="alert alert-light">{{ $t('my_works.description') }}</div>
+   <span v-if="noResults" class="chill-no-data-statement">{{ $t('no_data') }}</span>
+   <tab-table v-else>
+      <template v-slot:thead>
+         <th scope="col">{{ $t('StartDate') }}</th>
+         <th scope="col">{{ $t('SocialAction') }}</th>
+         <th scope="col">{{ $t('concerned_persons') }}</th>
+         <th scope="col"></th>
+      </template>
+      <template v-slot:tbody>
+         <tr v-for="(w, i) in works.results" :key="`works-${i}`">
+            <td>{{ $d(w.startDate.datetime, 'short') }}</td>
+            <td>
+               <span class="chill-entity entity-social-issue">
+                  <span class="badge bg-chill-l-gray text-dark">
+                     {{ w.socialAction.issue.text }}
+                  </span>
+               </span>
+               <h4 class="badge-title">
+                  <span class="title_label"></span>
+                  <span class="title_action">
+                     {{ w.socialAction.text }}
+                  </span>
+               </h4>
+            </td>
+            <td>
+               <span v-for="person in w.persons" class="me-1" :key="person.id">
+                  <on-the-fly
+                     :type="person.type"
+                     :id="person.id"
+                     :buttonText="person.textAge"
+                     :displayBadge="'true' === 'true'"
+                     action="show">
+                  </on-the-fly>
+               </span>
+            </td>
+            <td>
+               <div class="btn-group-vertical" role="group" aria-label="Actions">
+                  <a class="btn btn-sm btn-update" :href="getUrl(w)">
+                     {{ $t('show_entity', { entity: $t('the_action') }) }}
+                  </a>
+                  <a class="btn btn-sm btn-show" :href="getUrl(w.accompanyingPeriod)">
+                     {{ $t('show_entity', { entity: $t('the_course') }) }}
+                  </a>
+               </div>
+            </td>
+         </tr>
+      </template>
+   </tab-table>
+</div>
+</template>
+
+<script>
+import { mapState, mapGetters } from "vuex";
+import TabTable from "./TabTable";
+import OnTheFly from 'ChillMainAssets/vuejs/OnTheFly/components/OnTheFly';
+
+export default {
+   name: "MyWorks",
+   components: {
+      TabTable,
+      OnTheFly,
+   },
+   computed: {
+      ...mapState([
+         'works',
+      ]),
+      ...mapGetters([
+         'isWorksLoaded',
+      ]),
+      noResults() {
+         if (!this.isWorksLoaded) {
+            return false;
+         } else {
+            return this.works.count === 0;
+         }
+      }
+   },
+   methods: {
+      getUrl(e) {
+         switch (e.type) {
+            case 'accompanying_period_work':
+               return `/fr/person/accompanying-period/work/${e.id}/edit`
+            case 'accompanying_period':
+               return `/fr/parcours/${e.id}`
+            default:
+               throw 'entity type unknown';
+         }
+      }
+   },
+}
+</script>
+
+<style scoped>
+
+</style>
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/TabCounter.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/TabCounter.vue
@@ -0,0 +1,18 @@
+<template>
+   <span v-if="isCounterAvailable"
+         class="badge rounded-pill bg-danger">
+      {{ count }}
+   </span>
+</template>
+
+<script>
+export default {
+   name: "TabCounter",
+   props: ['count'],
+   computed: {
+      isCounterAvailable() {
+         return (typeof this.count !== 'undefined' && this.count > 0 )
+      }
+   }
+}
+</script>
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/TabTable.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/TabTable.vue
@@ -0,0 +1,21 @@
+<template>
+   <table class="table table-striped table-hover">
+      <thead>
+         <tr>
+            <slot name="thead"></slot>
+         </tr>
+      </thead>
+      <tbody>
+         <slot name="tbody"></slot>
+      </tbody>
+   </table>
+</template>
+
+<script>
+export default {
+   name: "TabTable",
+   props: []
+}
+</script>
+
+<style scoped></style>
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/js/i18n.js
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/js/i18n.js
@@ -0,0 +1,61 @@
+const appMessages = {
+    fr: {
+        main_title: "Vue d'ensemble",
+        my_works: {
+            tab: "Mes actions",
+            description: "Liste des actions d'accompagnement dont je suis référent et qui arrivent à échéance.",
+        },
+        my_evaluations: {
+            tab: "Mes évaluations",
+            description: "Liste des évaluations dont je suis référent et qui arrivent à échéance.",
+        },
+        my_tasks: {
+            tab: "Mes tâches",
+            description_alert: "Liste des tâches auxquelles je suis assigné et dont la date de rappel est dépassée.",
+            description_warning: "Liste des tâches auxquelles je suis assigné et dont la date d'échéance est dépassée.",
+        },
+        my_accompanying_courses: {
+            tab: "Mes parcours",
+            description: "Liste des parcours d'accompagnement que l'on vient de m'attribuer.",
+        },
+        my_notifications: {
+            tab: "Mes notifications",
+            description: "Liste des notifications reçues et non lues.",
+        },
+        opening_date: "Date d'ouverture",
+        social_issues: "Problématiques sociales",
+        concerned_persons: "Usagers concernés",
+        max_date: "Date d'échéance",
+        warning_date: "Date de rappel",
+        evaluation: "Évaluation",
+        task: "Tâche",
+        Date: "Date",
+        From: "Expéditeur",
+        Subject: "Objet",
+        Entity: "Associé à",
+        show_entity: "Voir {entity}",
+        the_activity: "l'échange",
+        the_course: "le parcours",
+        the_action: "l'action",
+        the_evaluation: "l'évaluation",
+        the_task: "la tâche",
+        StartDate: "Date d'ouverture",
+        SocialAction: "Action d'accompagnement",
+        no_data: "Aucun résultats",
+        no_dashboard: "Pas de tableaux de bord",
+        counter: {
+            unread_notifications: "{n} notification non lue | {n} notifications non lues",
+            assignated_courses: "{n} parcours récent assigné | {n} parcours récents assignés",
+            assignated_actions: "{n} action assignée | {n} actions assignées",
+            assignated_evaluations: "{n} évaluation assignée | {n} évaluations assignées",
+            alert_tasks: "{n} tâche en rappel | {n} tâches en rappel",
+            warning_tasks: "{n} tâche à échéance | {n} tâches à échéance",
+        }
+    }
+};
+
+Object.assign(appMessages.fr);
+
+export {
+    appMessages
+};
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/js/store.js
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/js/store.js
@@ -0,0 +1,200 @@
+import 'es6-promise/auto';
+import { createStore } from 'vuex';
+import { makeFetch } from "ChillMainAssets/lib/api/apiMethods";
+import MyCustoms from "../MyCustoms";
+import MyWorks from "../MyWorks";
+import MyEvaluations from "../MyEvaluations";
+import MyTasks from "../MyTasks";
+import MyAccompanyingCourses from "../MyAccompanyingCourses";
+import MyNotifications from "../MyNotifications";
+
+const debug = process.env.NODE_ENV !== 'production';
+
+const isEmpty = (obj) => {
+    return obj
+        && Object.keys(obj).length <= 1
+        && Object.getPrototypeOf(obj) === Object.prototype;
+};
+
+const store = createStore({
+    strict: debug,
+    state: {
+        works: {},
+        evaluations: {},
+        tasks: {
+            warning: {},
+            alert: {}
+        },
+        accompanyingCourses: {},
+        notifications: {},
+        errorMsg: [],
+        loading: false
+    },
+    getters: {
+        isWorksLoaded(state) {
+            return !isEmpty(state.works);
+        },
+        isEvaluationsLoaded(state) {
+            return !isEmpty(state.evaluations);
+        },
+        isTasksWarningLoaded(state) {
+            return !isEmpty(state.tasks.warning);
+        },
+        isTasksAlertLoaded(state) {
+            return !isEmpty(state.tasks.alert);
+        },
+        isAccompanyingCoursesLoaded(state) {
+            return !isEmpty(state.accompanyingCourses);
+        },
+        isNotificationsLoaded(state) {
+            return !isEmpty(state.notifications);
+        },
+        counter(state) {
+            return {
+                works: state.works.count,
+                evaluations: state.evaluations.count,
+                tasksWarning: state.tasks.warning.count,
+                tasksAlert: state.tasks.alert.count,
+                accompanyingCourses: state.accompanyingCourses.count,
+                notifications: state.notifications.count,
+            }
+        }
+    },
+    mutations: {
+        addWorks(state, works) {
+            //console.log('addWorks', works);
+            state.works = works;
+        },
+        addEvaluations(state, evaluations) {
+            //console.log('addEvaluations', evaluations);
+            state.evaluations = evaluations;
+        },
+        addTasksWarning(state, tasks) {
+            //console.log('addTasksWarning', tasks);
+            state.tasks.warning = tasks;
+        },
+        addTasksAlert(state, tasks) {
+            //console.log('addTasksAlert', tasks);
+            state.tasks.alert = tasks;
+        },
+        addCourses(state, courses) {
+            //console.log('addCourses', courses);
+            state.accompanyingCourses = courses;
+        },
+        addNotifications(state, notifications) {
+            //console.log('addNotifications', notifications);
+            state.notifications = notifications;
+        },
+        setLoading(state, bool) {
+            state.loading = bool;
+        },
+        catchError(state, error) {
+            state.errorMsg.push(error);
+        }
+    },
+    actions: {
+        getByTab({ commit, getters }, { tab, param }) {
+            switch (tab) {
+                case 'MyCustoms':
+                    break;
+                case 'MyWorks':
+                    if (!getters.isWorksLoaded) {
+                        commit('setLoading', true);
+                        const url = `/api/1.0/person/accompanying-period/work/my-near-end${'?'+ param}`;
+                        makeFetch('GET', url)
+                            .then((response) => {
+                                commit('addWorks', response);
+                                commit('setLoading', false);
+                            })
+                            .catch((error) => {
+                                commit('catchError', error);
+                                throw error;
+                            })
+                        ;
+                    }
+                    break;
+                case 'MyEvaluations':
+                    if (!getters.isEvaluationsLoaded) {
+                        commit('setLoading', true);
+                        const url = `/api/1.0/person/accompanying-period/work/evaluation/my-near-end${'?'+ param}`;
+                        makeFetch('GET', url)
+                            .then((response) => {
+                                commit('addEvaluations', response);
+                                commit('setLoading', false);
+                            })
+                            .catch((error) => {
+                                commit('catchError', error);
+                                throw error;
+                            })
+                        ;
+                    }
+                    break;
+                case 'MyTasks':
+                    if (!(getters.isTasksWarningLoaded && getters.isTasksAlertLoaded)) {
+                        commit('setLoading', true);
+                        const
+                            urlWarning = `/api/1.0/task/single-task/list/my?f[q]=&f[checkboxes][status][]=warning&f[checkboxes][states][]=new&f[checkboxes][states][]=in_progress${'&'+ param}`,
+                            urlAlert   = `/api/1.0/task/single-task/list/my?f[q]=&f[checkboxes][status][]=alert&f[checkboxes][states][]=new&f[checkboxes][states][]=in_progress${'&'+ param}`
+                        ;
+                        makeFetch('GET', urlWarning)
+                            .then((response) => {
+                                commit('addTasksWarning', response);
+                                commit('setLoading', false);
+                            })
+                            .catch((error) => {
+                                commit('catchError', error);
+                                throw error;
+                            })
+                        ;
+                        makeFetch('GET', urlAlert)
+                            .then((response) => {
+                                commit('addTasksAlert', response);
+                                commit('setLoading', false);
+                            })
+                            .catch((error) => {
+                                commit('catchError', error);
+                                throw error;
+                            })
+                        ;
+                    }
+                    break;
+                case 'MyAccompanyingCourses':
+                    if (!getters.isAccompanyingCoursesLoaded) {
+                        commit('setLoading', true);
+                        const url = `/api/1.0/person/accompanying-course/list/by-recent-attributions${'?'+ param}`;
+                        makeFetch('GET', url)
+                            .then((response) => {
+                                commit('addCourses', response);
+                                commit('setLoading', false);
+                            })
+                            .catch((error) => {
+                                commit('catchError', error);
+                                throw error;
+                            })
+                        ;
+                    }
+                    break;
+                case 'MyNotifications':
+                    if (!getters.isNotificationsLoaded) {
+                        commit('setLoading', true);
+                        const url = `/api/1.0/main/notification/my/unread${'?'+ param}`;
+                        makeFetch('GET', url)
+                            .then((response) => {
+                                commit('addNotifications', response);
+                                commit('setLoading', false);
+                            })
+                            .catch((error) => {
+                                commit('catchError', error);
+                                throw error;
+                            })
+                        ;
+                    }
+                    break;
+                default:
+                    throw 'tab '+ tab;
+            }
+        }
+    },
+});
+
+export { store };
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/App.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/App.vue
@@ -5,6 +5,7 @@
        :action="context.action"
        :buttonText="options.buttonText"
        :displayBadge="options.displayBadge === 'true'"
+        :isDead="options.isDead"
        :parent="options.parent"
        @saveFormOnTheFly="saveFormOnTheFly">
    </on-the-fly>
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/components/OnTheFly.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/components/OnTheFly.vue
@@ -1,15 +1,15 @@
 <template>

-   <a v-if="isDisplayBadge" @click="openModal">
-      <span class="chill-entity" :class="badgeType">
-         {{ buttonText }}
-      </span>
-   </a>
-   <a v-else class="btn btn-sm" target="_blank"
+    <a v-if="isDisplayBadge" @click="openModal">
+        <span class="chill-entity" :class="badgeType">
+            {{ buttonText }}<span v-if="isDead"> (‡)</span>
+        </span>
+    </a>
+    <a v-else class="btn btn-sm" target="_blank"
      :class="classAction"
      :title="$t(titleAction)"
      @click="openModal">
-      {{ buttonText }}
+      {{ buttonText }}<span v-if="isDead"> (‡)</span>
   </a>

   <teleport to="body">
@@ -101,7 +101,7 @@ export default {
      OnTheFlyThirdparty,
      OnTheFlyCreate
   },
-   props: ['type', 'id', 'action', 'buttonText', 'displayBadge', 'parent'],
+   props: ['type', 'id', 'action', 'buttonText', 'displayBadge', 'isDead', 'parent', 'canCloseModal'],
   emits: ['saveFormOnTheFly'],
   data() {
      return {
@@ -179,7 +179,20 @@ export default {
         return 'entity-' + this.type + ' badge-' + this.type;
      }
   },
+   watch: {
+      canCloseModal: {
+         handler: function(val, oldVal) {
+            if (val) {
+               this.closeModal();
+            }
+         },
+         deep: true
+      }
+   },
   methods: {
+      closeModal() {
+         this.modal.showModal = false;
+      },
      openModal() {
         // console.log('## OPEN ON THE FLY MODAL');
         // console.log('## type:', this.type, ', action:', this.action);
@@ -237,8 +250,6 @@ export default {
         console.log('type', type, 'data', data)
         // pass datas to parent
         this.$emit('saveFormOnTheFly', { type: type, data: data });
-
-         this.modal.showModal = false;
      },
      buildLocation(id, type) {
         if (type === 'person') {
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/index.js
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/index.js
@@ -22,7 +22,8 @@ containers.forEach((container) => {
                    options: {
                        buttonText: container.dataset.buttonText || null,
                        displayBadge: container.dataset.displayBadge || false,
-                        parent: JSON.parse(container.dataset.parent) || null,
+                        isDead: container.dataset.isDead || false,
+                        parent: container.dataset.parent ? JSON.parse(container.dataset.parent) : null,
                    }
                }
            }
@@ -33,4 +34,5 @@ containers.forEach((container) => {
    .mount(container);

    //console.log('container dataset', container.dataset);
+    //console.log('data-parent', container.dataset.parent);
 });
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/PickEntity/PickEntity.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/PickEntity/PickEntity.vue
@@ -1,5 +1,5 @@
 <template>
-    <ul class="list-suggest remove-items">
+    <ul class="list-suggest remove-items" v-if="picked.length">
        <li v-for="p in picked" @click="removeEntity(p)" :key="p.type+p.id">
            <span class="chill_denomination">{{ p.text }}</span>
        </li>
@@ -79,11 +79,15 @@ export default {
            );
            this.$refs.addPersons.resetSearch(); // to cast child method
            modal.showModal = false;
+            console.log(this.picked)
        },
        removeEntity(entity) {
            console.log('remove entity', entity);
            this.$emit('removeEntity', entity);
        }
    },
+    mounted() {
+        console.log(this.picked);
+    }
 }
 </script>
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/BadgeEntity.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/BadgeEntity.vue
@@ -24,6 +24,11 @@
        {{ $t('user')}}
    </span>

+    <span v-if="entity.type === 'household'" class="badge rounded-pill bg-user">
+        {{ $t('household')}}
+    </span>
+
+
 </template>

 <script>
@@ -40,7 +45,8 @@ export default {
                    company: "Personne morale",
                    contact: "Personne physique",
                },
-                user: 'TMS'
+                user: 'TMS',
+                household: 'Ménage',
            }
        }
    }
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Confidential.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Confidential.vue
@@ -1,22 +1,26 @@
 <template>
-    <div class="confidential" v-on:click="toggleBlur">
-        <div class="confidential-content blur">
+    <div :class="classes">
+        <div class="confidential-content" :class="{ 'blur': isBlurred }">
            <slot name="confidential-content"></slot>
        </div>
-        <i class="fa fa-eye toggle" aria-hidden="true"></i>
+        <div>
+            <i class="fa fa-eye toggle" aria-hidden="true" @click="toggleBlur"></i>
+        </div>
    </div>
 </template>

 <script>
 export default {
    name: "Confidential",
+    data() {
+        return {
+            isBlurred: true,
+        };
+    },
    methods : {
-        toggleBlur: function(e){
-            if(e.target.matches('.toggle')){
-                e.target.previousElementSibling.classList.toggle("blur");
-                e.target.classList.toggle("fa-eye");
-                e.target.classList.toggle("fa-eye-slash");
-            }
+        toggleBlur() {
+            console.log('toggle blur');
+            this.isBlurred = !this.isBlurred;
        },
    }
 }
@@ -39,4 +43,4 @@ export default {
        -moz-filter: blur(5px);
        filter: blur(5px);
    }
-</style>
+</style>
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Entity/AddressRenderBox.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Entity/AddressRenderBox.vue
@@ -1,26 +1,58 @@
 <template>
+
   <component :is="component" class="chill-entity entity-address my-3">

      <component :is="component" class="address" :class="multiline">
-         <div v-if="isMultiline === true">
-            <p v-for="(l, i) in address.lines" :key="`line-${i}`">
-               {{ l }}
-            </p>
+
+         <div v-if="isConfidential">
+            <confidential>
+               <template v-slot:confidential-content>
+                  <div v-if="isMultiline === true">
+                     <p v-for="(l, i) in address.lines" :key="`line-${i}`">
+                        {{ l }}
+                     </p>
+                  </div>
+                  <div v-else>
+                     <p v-if="address.text"
+                        class="street">
+                        {{ address.text }}
+                     </p>
+                     <p v-if="address.postcode"
+                        class="postcode">
+                        {{ address.postcode.code }} {{ address.postcode.name }}
+                     </p>
+                     <p v-if="address.country"
+                        class="country">
+                        {{ address.country.name.fr }}
+                     </p>
+                  </div>
+               </template>
+
+            </confidential>
         </div>
-         <div v-else>
-            <p v-if="address.text"
-               class="street">
-               {{ address.text }}
-            </p>
-            <p v-if="address.postcode"
-               class="postcode">
-               {{ address.postcode.code }} {{ address.postcode.name }}
-            </p>
-            <p v-if="address.country"
-               class="country">
-               {{ address.country.name.fr }}
-            </p>
+
+         <div v-if="!isConfidential">
+            <div v-if="isMultiline === true">
+               <p v-for="(l, i) in address.lines" :key="`line-${i}`">
+                  {{ l }}
+               </p>
+            </div>
+            <div v-else>
+               <p v-if="address.text"
+                  class="street">
+                  {{ address.text }}
+               </p>
+               <p v-if="address.postcode"
+                  class="postcode">
+                  {{ address.postcode.code }} {{ address.postcode.name }}
+               </p>
+               <p v-if="address.country"
+                  class="country">
+                  {{ address.country.name.fr }}
+               </p>
+            </div>
         </div>
+
      </component>

      <!-- <div v-if="isMultiline === true" class="address-more">
@@ -78,8 +110,14 @@
 </template>

 <script>
+
+import Confidential from 'ChillMainAssets/vuejs/_components/Confidential.vue';
+
 export default {
   name: 'AddressRenderBox',
+   components: {
+      Confidential
+   },
   props: {
      address: {
         type: Object
@@ -100,6 +138,9 @@ export default {
      multiline() {
         //console.log(this.isMultiline, typeof this.isMultiline);
         return this.isMultiline === true ? "multiline" : "";
+      },
+      isConfidential() {
+         return this.address.confidential;
      }
   }
 };
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/EntityWorkflow/EntityWorkflowVueSubscriber.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/EntityWorkflow/EntityWorkflowVueSubscriber.vue
@@ -0,0 +1,101 @@
+<template>
+    <div class="d-grid gap-2 my-3">
+        <button class="btn btn-misc" type="button" v-if="!subscriberFinal" @click="subscribeTo('subscribe', 'final')">
+            <i class="fa fa-check fa-fw"></i>
+            {{ $t('subscribe_final') }}
+        </button>
+        <button class="btn btn-misc" type="button" v-if="subscriberFinal" @click="subscribeTo('unsubscribe', 'final')">
+            <i class="fa fa-times fa-fw"></i>
+            {{ $t('unsubscribe_final') }}
+        </button>
+        <button class="btn btn-misc" type="button" v-if="!subscriberStep" @click="subscribeTo('subscribe', 'step')">
+            <i class="fa fa-check fa-fw"></i>
+            {{ $t('subscribe_all_steps') }}
+        </button>
+        <button class="btn btn-misc" type="button" v-if="subscriberStep" @click="subscribeTo('unsubscribe', 'step')">
+            <i class="fa fa-times fa-fw"></i>
+            {{ $t('unsubscribe_all_steps') }}
+        </button>
+    </div>
+</template>
+
+<script>
+import {makeFetch} from 'ChillMainAssets/lib/api/apiMethods.js';
+
+export default {
+    name: "EntityWorkflowVueSubscriber",
+    i18n: {
+       messages: {
+          fr: {
+             subscribe_final: "Recevoir une notification à l'étape finale",
+             unsubscribe_final: "Ne plus recevoir de notification à l'étape finale",
+             subscribe_all_steps: "Recevoir une notification à chaque étape du suivi",
+             unsubscribe_all_steps: "Ne plus recevoir de notification à chaque étape du suivi",
+          }
+       }
+    },
+    props: {
+        entityWorkflowId: {
+            type: Number,
+            required: true,
+        },
+        subscriberStep: {
+            type: Boolean,
+            required: true,
+        },
+        subscriberFinal: {
+            type: Boolean,
+            required: true,
+        },
+    },
+    emits: ['subscriptionUpdated'],
+    methods: {
+        subscribeTo(step, to) {
+            let params = new URLSearchParams();
+            params.set('subscribe', to);
+
+            const url = `/api/1.0/main/workflow/${this.entityWorkflowId}/${step}?` + params.toString();
+
+            makeFetch('POST', url).then(response => {
+                this.$emit('subscriptionUpdated', response);
+            });
+        }
+    },
+}
+/*
+*   ALTERNATIVES
+*
+    <div class="form-check form-switch">
+        <input class="form-check-input" type="checkbox" role="switch" id="laststep">
+        <label class="form-check-label" for="laststep">{{ $t('subscribe_final') }}</label>
+    </div>
+    <div class="form-check form-switch">
+        <input class="form-check-input" type="checkbox" role="switch" id="allsteps">
+        <label class="form-check-label" for="allsteps">{{ $t('subscribe_all_steps') }}</label>
+    </div>
+
+    <div class="list-group my-3">
+        <label class="list-group-item">
+            <input class="form-check-input me-1" type="checkbox" value="">
+            {{ $t('subscribe_final') }}
+        </label>
+        <label class="list-group-item">
+            <input class="form-check-input me-1" type="checkbox" value="">
+            {{ $t('subscribe_all_steps') }}
+        </label>
+    </div>
+
+    <div class="btn-group-vertical my-3" role="group">
+        <button type="button" class="btn btn-outline-primary">
+            <i class="fa fa-check fa-fw"></i>
+            {{ $t('subscribe_final') }}
+        </button>
+        <button type="button" class="btn btn-outline-primary">
+            <i class="fa fa-check fa-fw"></i>
+            {{ $t('subscribe_all_steps') }}
+        </button>
+    </div>
+*/
+</script>
+
+<style scoped></style>
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/EntityWorkflow/ListWorkflow.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/EntityWorkflow/ListWorkflow.vue
@@ -0,0 +1,132 @@
+<template>
+   <div class="flex-table workflow" id="workflow-list">
+      <div v-for="(w, i) in workflows" :key="`workflow-${i}`"
+         class="item-bloc">
+
+         <div>
+            <div class="item-row col">
+               <h2>Workflow</h2>
+               <div class="flex-grow-1 ms-3 h3">
+                  <div class="visually-hidden">
+                     {{ w.relatedEntityClass }}
+                     {{ w.relatedEntityId }}
+                  </div>
+               </div>
+            </div>
+
+            <div class="breadcrumb">
+               <template v-for="(step, j) in w.steps" :key="`step-${j}`">
+                  <span class="mx-2"
+                     tabindex="0"
+                     data-bs-trigger="focus hover"
+                     data-bs-toggle="popover"
+                     data-bs-placement="bottom"
+                     data-bs-custom-class="workflow-transition"
+                     :title="getPopTitle(step)"
+                     :data-bs-content="getPopContent(step)">
+
+                     <i v-if="step.currentStep.name === 'initial'"
+                        class="fa fa-circle me-1 text-chill-yellow">
+                     </i>
+                     <i v-if="step.isFreezed"
+                        class="fa fa-snowflake-o fa-sm me-1">
+                     </i>
+                     {{ step.currentStep.text }}
+                  </span>
+                  <span v-if="j !== Object.keys(w.steps).length - 1">
+                     →
+                  </span>
+               </template>
+            </div>
+         </div>
+
+         <div class="item-row">
+            <div class="item-col flex-grow-1">
+               <p v-if="isUserSubscribedToStep(w)">
+                  <i class="fa fa-check fa-fw"></i>
+                  {{ $t('you_subscribed_to_all_steps') }}
+               </p>
+               <p v-if="isUserSubscribedToFinal(w)">
+                  <i class="fa fa-check fa-fw"></i>
+                  {{ $t('you_subscribed_to_final_step') }}
+               </p>
+            </div>
+            <div class="item-col">
+               <ul class="record_actions">
+                  <li>
+                     <a :href="goToUrl(w)" class="btn btn-sm btn-show" :title="$t('action.show')"></a>
+                  </li>
+               </ul>
+            </div>
+         </div>
+
+      </div>
+   </div>
+</template>
+
+<script>
+import Popover from 'bootstrap/js/src/popover';
+
+const i18n = {
+   messages: {
+      fr: {
+         you_subscribed_to_all_steps: "Vous recevrez une notification à chaque étape",
+         you_subscribed_to_final_step: "Vous recevrez une notification à l'étape finale",
+         by: "Par",
+         at: "Le"
+      }
+   }
+}
+
+export default {
+   name: "ListWorkflow",
+   i18n: i18n,
+   props: {
+      workflows: {
+         type: Array,
+         required: true,
+      }
+   },
+   methods: {
+      goToUrl(w) {
+         return `/fr/main/workflow/${w.id}/show`;
+      },
+      getPopTitle(step) {
+         if (step.transitionPrevious != null) {
+            //console.log(step.transitionPrevious.text);
+            let freezed = step.isFreezed ? `<i class="fa fa-snowflake-o fa-sm me-1"></i>` : ``;
+            return `${freezed}${step.transitionPrevious.text}`;
+         }
+      },
+      getPopContent(step) {
+         if (step.transitionPrevious != null) {
+            return `<ul class="small_in_title">
+              <li><span class="item-key">${i18n.messages.fr.by} : </span><b>${step.transitionPreviousBy.text}</b></li>
+              <li><span class="item-key">${i18n.messages.fr.at} : </span><b>${this.formatDate(step.transitionPreviousAt.datetime)}</b></li>
+              </ul>`
+            ;
+         }
+      },
+      formatDate(datetime) {
+         return datetime.split('T')[0] +' '+ datetime.split('T')[1].substring(0,5)
+      },
+      isUserSubscribedToStep(w) {
+         // todo
+         return false;
+      },
+      isUserSubscribedToFinal(w) {
+         // todo
+         return false;
+      },
+   },
+   mounted() {
+      const triggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
+      const popoverList = triggerList.map(function (el) {
+         //console.log('popover', el)
+         return new Popover(el, {
+            html: true,
+         });
+      });
+   }
+}
+</script>
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/EntityWorkflow/ListWorkflowModal.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/EntityWorkflow/ListWorkflowModal.vue
@@ -0,0 +1,124 @@
+<template>
+
+   <button v-if="hasWorkflow"
+      class="btn btn-primary"
+      @click="openModal">
+      <b>{{ countWorkflows }}</b>
+      <template v-if="countWorkflows > 1">{{ $t('workflows') }}</template>
+      <template v-else>{{ $t('workflow') }}</template>
+   </button>
+
+   <pick-workflow v-else-if="allowCreate"
+      :relatedEntityClass="this.relatedEntityClass"
+      :relatedEntityId="this.relatedEntityId"
+      :workflowsAvailables="workflowsAvailables"
+      @go-to-generate-workflow="goToGenerateWorkflow"
+   ></pick-workflow>
+
+   <teleport to="body">
+      <modal v-if="modal.showModal"
+         :modalDialogClass="modal.modalDialogClass"
+         @close="modal.showModal = false">
+
+         <template v-slot:header>
+            <h2 class="modal-title">{{ $t('workflow_list') }}</h2>
+         </template>
+
+         <template v-slot:body>
+            <list-workflow-vue
+               :workflows="workflows"
+            ></list-workflow-vue>
+         </template>
+
+         <template v-slot:footer>
+            <pick-workflow v-if="allowCreate"
+               :relatedEntityClass="this.relatedEntityClass"
+               :relatedEntityId="this.relatedEntityId"
+               :workflowsAvailables="workflowsAvailables"
+               :preventDefaultMoveToGenerate="this.$props.preventDefaultMoveToGenerate"
+               @go-to-generate-workflow="this.goToGenerateWorkflow"
+            ></pick-workflow>
+         </template>
+
+      </modal>
+   </teleport>
+</template>
+
+<script>
+import Modal from 'ChillMainAssets/vuejs/_components/Modal';
+import PickWorkflow from 'ChillMainAssets/vuejs/_components/EntityWorkflow/PickWorkflow.vue';
+import ListWorkflowVue from 'ChillMainAssets/vuejs/_components/EntityWorkflow/ListWorkflow.vue';
+
+export default {
+   name: "ListWorkflowModal",
+   components: {
+      Modal,
+      PickWorkflow,
+      ListWorkflowVue
+   },
+   emits: ['goToGenerateWorkflow'],
+   props: {
+      workflows: {
+         type: Array,
+         required: true,
+      },
+      allowCreate: {
+         type: Boolean,
+         required: true,
+      },
+      relatedEntityClass: {
+         type: String,
+         required: true,
+      },
+      relatedEntityId: {
+         type: Number,
+         required: false,
+      },
+      workflowsAvailables: {
+         type: Array,
+         required: true,
+      },
+      preventDefaultMoveToGenerate: {
+          type: Boolean,
+          required: false,
+          default: false,
+      },
+   },
+    data() {
+      return {
+         modal: {
+            showModal: false,
+            modalDialogClass: "modal-dialog-scrollable modal-xl"
+         },
+      }
+   },
+   computed: {
+      countWorkflows() {
+         return this.workflows.length;
+      },
+      hasWorkflow() {
+         return this.countWorkflows > 0;
+      }
+   },
+   methods: {
+      openModal() {
+         this.modal.showModal = true;
+      },
+      goToGenerateWorkflow(data) {
+          console.log('go to generate workflow intercepted');
+          this.$emit('goToGenerateWorkflow', data);
+      }
+   },
+   i18n: {
+      messages: {
+         fr: {
+            workflow_list: "Liste des workflows associés",
+            workflow: " workflow associé",
+            workflows: " workflows associés",
+         }
+      }
+   }
+}
+</script>
+
+<style scoped></style>
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/EntityWorkflow/PickWorkflow.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/EntityWorkflow/PickWorkflow.vue
@@ -0,0 +1,62 @@
+<template>
+    <template v-if="workflowsAvailables.length >= 1">
+        <div class="dropdown d-grid gap-2">
+            <button class="btn btn-primary dropdown-toggle" type="button" id="createWorkflowButton" data-bs-toggle="dropdown" aria-expanded="false">
+                Créer un workflow
+            </button>
+            <ul class="dropdown-menu" aria-labelledby="createWorkflowButton">
+                <li v-for="w in workflowsAvailables" :key="w.name">
+                    <a class="dropdown-item" :href="makeLink(w.name)" @click.prevent="goToGenerateWorkflow($event, w.name)">{{ w.text }}</a>
+                </li>
+            </ul>
+        </div>
+    </template>
+</template>
+
+<script>
+
+import {buildLinkCreate} from 'ChillMainAssets/lib/entity-workflow/api.js';
+
+export default {
+    name: "PickWorkflow",
+    props: {
+        relatedEntityClass: {
+            type: String,
+            required: true,
+        },
+        relatedEntityId: {
+            type: Number,
+            required: false,
+        },
+        workflowsAvailables: {
+            type: Array,
+            required: true,
+        },
+        preventDefaultMoveToGenerate: {
+            type: Boolean,
+            required: false,
+            default: false,
+        },
+    },
+    emits: ['goToGenerateWorkflow'],
+    methods: {
+        makeLink(workflowName) {
+            return buildLinkCreate(workflowName, this.relatedEntityClass, this.relatedEntityId);
+        },
+        goToGenerateWorkflow(event, workflowName) {
+            console.log('goToGenerateWorkflow', event, workflowName);
+
+            if (!this.$props.preventDefaultMoveToGenerate) {
+                console.log('to go generate');
+                window.location.assign(this.makeLink(workflowName));
+            }
+
+            this.$emit('goToGenerateWorkflow', {event, workflowName, link: this.makeLink(workflowName)});
+        }
+    }
+}
+</script>
+
+<style scoped>
+
+</style>
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Modal.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Modal.vue
@@ -15,7 +15,7 @@
               <div class="modal-body">
                  <slot name="body"></slot>
               </div>
-               <div class="modal-footer">
+               <div class="modal-footer" v-if="!hideFooter">
                  <button class="btn btn-cancel" @click="$emit('close')">{{ $t('action.close') }}</button>
                  <slot name="footer"></slot>
               </div>
@@ -38,7 +38,16 @@
 */
 export default {
   name: 'Modal',
-   props: ['modalDialogClass'],
+   props: {
+      modalDialogClass: {
+         type: String,
+         required: false
+      },
+      hideFooter: {
+         type: Boolean,
+         required: false
+      }
+   },
   emits: ['close']
 }
 </script>
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Notification/NotificationReadToggle.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Notification/NotificationReadToggle.vue
@@ -34,7 +34,7 @@
            :href="showUrl"
            :title="$t('action.show')"
            >
-            <i class="fa fa-sm fa-eye"></i>
+            <i class="fa fa-sm fa-comment-o"></i>
        </a>

    </div>
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/OpenWopiLink.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/OpenWopiLink.vue
@@ -0,0 +1,243 @@
+<template>
+   <a v-if="isOpenDocument"
+      class="btn change-icon" :class="[isChangeClass ? button.changeClass : 'btn-edit']"
+      @click="openModal">
+      
+      <i class="fa me-2" :class="[isChangeIcon ? button.changeIcon : 'fa-pencil']"></i>
+      
+      <span v-if="!noText">
+         {{ $t('Update_document') }}
+      </span>
+   </a>
+   
+   <teleport to="body">
+      <div class="wopi-frame" v-if="isOpenDocument">
+         <modal v-if="modal.showModal"
+            :modalDialogClass="modal.modalDialogClass"
+            :hideFooter=true
+            @close="modal.showModal = false">
+            
+            <template v-slot:header>
+               <img class="logo" :src="logo" height="45"/>
+                  <span class="ms-auto me-3">
+                     {{ this.title }}
+                  </span>
+                  <a class="btn btn-outline-light">
+                     <i class="fa fa-save fa-fw"></i>
+                     {{ $t('save_and_quit') }}
+                  </a>
+            </template>
+            
+            <template v-slot:body>
+               <div v-if="loading" class="loading">
+                  <i class="fa fa-circle-o-notch fa-spin fa-3x" :title="$t('loading')"></i>
+               </div>
+               <iframe
+                  :src="this.wopiUrl"
+                  @load="loaded"
+               ></iframe>
+            </template>
+            
+         </modal>
+      </div>
+      <div v-else>
+         <modal v-if="modal.showModal"
+            modalDialogClass="modal-sm"
+            @close="modal.showModal = false">
+            
+            <template v-slot:header>
+               <h3>{{ $t('invalid_title') }}</h3>
+            </template>
+            <template v-slot:body>
+               <div class="alert alert-warning">{{ $t('invalid_message') }}</div>
+            </template>
+   
+         </modal>
+      </div>
+   </teleport>
+</template>
+
+<script>
+import Modal from 'ChillMainAssets/vuejs/_components/Modal';
+import logo from 'ChillMainAssets/chill/img/logo-chill-sans-slogan_white.png';
+
+export default {
+   name: "OpenWopiLink",
+   components: {
+      Modal
+   },
+   props: {
+      wopiUrl: {
+         type: String,
+         required: true
+      },
+      title: {
+         type: String,
+         required: true
+      },
+      type: {
+         type: String,
+         required: true
+      },
+      button: {
+         type: Object,
+         required: false
+      }
+   },
+   data() {
+      return {
+         modal: {
+            showModal: false,
+            modalDialogClass: "modal-fullscreen" //modal-dialog-scrollable
+         },
+         logo: logo,
+         loading: false,
+         mime: [
+            // TODO temporary hardcoded. to be replaced by twig extension or a collabora server query
+            'application/clarisworks',
+            'application/coreldraw',
+            'application/macwriteii',
+            'application/msword',
+            'application/pdf',
+            'application/vnd.lotus-1-2-3',
+            'application/vnd.ms-excel',
+            'application/vnd.ms-excel.sheet.binary.macroEnabled.12',
+            'application/vnd.ms-excel.sheet.macroEnabled.12',
+            'application/vnd.ms-excel.template.macroEnabled.12',
+            'application/vnd.ms-powerpoint',
+            'application/vnd.ms-powerpoint.presentation.macroEnabled.12',
+            'application/vnd.ms-powerpoint.template.macroEnabled.12',
+            'application/vnd.ms-visio.drawing',
+            'application/vnd.ms-word.document.macroEnabled.12',
+            'application/vnd.ms-word.template.macroEnabled.12',
+            'application/vnd.ms-works',
+            'application/vnd.oasis.opendocument.chart',
+            'application/vnd.oasis.opendocument.formula',
+            'application/vnd.oasis.opendocument.graphics',
+            'application/vnd.oasis.opendocument.graphics-flat-xml',
+            'application/vnd.oasis.opendocument.graphics-template',
+            'application/vnd.oasis.opendocument.presentation',
+            'application/vnd.oasis.opendocument.presentation-flat-xml',
+            'application/vnd.oasis.opendocument.presentation-template',
+            'application/vnd.oasis.opendocument.spreadsheet',
+            'application/vnd.oasis.opendocument.spreadsheet-flat-xml',
+            'application/vnd.oasis.opendocument.spreadsheet-template',
+            'application/vnd.oasis.opendocument.text',
+            'application/vnd.oasis.opendocument.text-flat-xml',
+            'application/vnd.oasis.opendocument.text-master',
+            'application/vnd.oasis.opendocument.text-master-template',
+            'application/vnd.oasis.opendocument.text-template',
+            'application/vnd.oasis.opendocument.text-web',
+            'application/vnd.openxmlformats-officedocument.presentationml.presentation',
+            'application/vnd.openxmlformats-officedocument.presentationml.slideshow',
+            'application/vnd.openxmlformats-officedocument.presentationml.template',
+            'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+            'application/vnd.openxmlformats-officedocument.spreadsheetml.template',
+            'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+            'application/vnd.openxmlformats-officedocument.wordprocessingml.template',
+            'application/vnd.sun.xml.calc',
+            'application/vnd.sun.xml.calc.template',
+            'application/vnd.sun.xml.chart',
+            'application/vnd.sun.xml.draw',
+            'application/vnd.sun.xml.draw.template',
+            'application/vnd.sun.xml.impress',
+            'application/vnd.sun.xml.impress.template',
+            'application/vnd.sun.xml.math',
+            'application/vnd.sun.xml.writer',
+            'application/vnd.sun.xml.writer.global',
+            'application/vnd.sun.xml.writer.template',
+            'application/vnd.visio',
+            'application/vnd.visio2013',
+            'application/vnd.wordperfect',
+            'application/x-abiword',
+            'application/x-aportisdoc',
+            'application/x-dbase',
+            'application/x-dif-document',
+            'application/x-fictionbook+xml',
+            'application/x-gnumeric',
+            'application/x-hwp',
+            'application/x-iwork-keynote-sffkey',
+            'application/x-iwork-numbers-sffnumbers',
+            'application/x-iwork-pages-sffpages',
+            'application/x-mspublisher',
+            'application/x-mswrite',
+            'application/x-pagemaker',
+            'application/x-sony-bbeb',
+            'application/x-t602',
+         ]
+      }
+   },
+   computed: {
+      isOpenDocument() {
+         if (this.mime.indexOf(this.type) !== -1) {
+            return true;
+         }
+         return false;
+      },
+      noText() {
+         if (typeof this.button.noText !== 'undefined') {
+            return this.button.noText === true;
+         }
+         return false;
+      },
+      isChangeIcon() {
+         if (typeof this.button.changeIcon !== 'undefined') {
+            return (!(this.button.changeIcon === null || this.button.changeIcon === ''))
+         }
+         return false;
+      },
+      isChangeClass() {
+         if (typeof this.button.changeClass !== 'undefined') {
+            return (!(this.button.changeClass === null || this.button.changeClass === ''))
+         }
+         return false;
+      }
+   },
+   methods: {
+      openModal() {
+         this.loading = true;
+         this.modal.showModal = true;
+      },
+      loaded() {
+         this.loading = false;
+      }
+   },
+   i18n: {
+      messages: {
+         fr: {
+            Update_document: "Modifier le document",
+            save_and_quit: "Enregistrer et quitter",
+            loading: "Chargement de l'éditeur en ligne",
+            invalid_title: "Format incompatible",
+            invalid_message: "Désolé, ce format de document n'est pas éditable en ligne.",
+         }
+      }
+   }
+}
+</script>
+
+<style lang="scss">
+div.wopi-frame {
+   div.modal-header {
+      border-bottom: 0;
+      background-color: var(--bs-primary);
+      color: white;
+   }
+   div.modal-body {
+      padding: 0;
+      overflow-y: unset !important;
+      iframe {
+         height: 100%;
+         width: 100%;
+      }
+      div.loading {
+         position: absolute;
+         color: var(--bs-chill-gray);
+         top: calc(50% - 30px);
+         left: calc(50% - 30px);
+      }
+   }
+}
+</style>
+
+
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_js/i18n.js
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_js/i18n.js
@@ -62,14 +62,15 @@ const messages = {
            woman: "Née le"
         },
         deathdate: "Date de décès",
-         years_old: "ans",
         household_without_address: "Le ménage de l'usager est sans adresse",
         no_data: "Aucune information renseignée",
         type: {
            thirdparty: "Tiers",
            person: "Usager"
         },
-         holder: "Titulaire"
+         holder: "Titulaire",
+         years_old: "an | {n} an | {n} ans",
+
      }
   }
 };
--- a/src/Bundle/ChillMainBundle/Resources/views/Admin/layout.html.twig
+++ b/src/Bundle/ChillMainBundle/Resources/views/Admin/layout.html.twig
@@ -3,7 +3,7 @@
 {% block navigation_search_bar %}{% endblock %}
 {% block navigation_section_menu %}
 	{{ chill_menu('admin_section', {
-	   	'layout': '@ChillMain/Menu/adminSection.html.twig',
+	   	'layout': '@ChillMain/Menu/admin.html.twig',
 	}) }}
 {% endblock %}

--- a/src/Bundle/ChillMainBundle/Resources/views/Entity/CommentEmbeddable.html.twig
+++ b/src/Bundle/ChillMainBundle/Resources/views/Entity/CommentEmbeddable.html.twig
@@ -23,23 +23,23 @@

        {% if options['metadata'] %}
            <div class="metadata">
-                {% if user is not empty %}
-                    {{ 'Last updated by'| trans }}
-                    <span class="user">
-                        {{ user|chill_entity_render_box(options['user']) }}
-                    </span>
-                {% endif %}
                {% if comment.date is not empty %}
-                    {% if user is empty %}
-                        {{ 'Last updated on'|trans ~ ' ' }}
-                    {% else %}
-                        {{ 'on'|trans ~ ' ' }}
-                    {% endif %}
+                    {{ 'Last updated on'|trans ~ ' ' }}
                    <span class="date">
                        {{ comment.date|format_datetime("medium", "short") }}
                    </span>
                {% endif %}
+                {% if user is not empty %}
+                    {% if comment.date is empty %}
+                        {{ 'Last updated by'| trans }}
+                    {% else %}
+                        {{ 'by_user'|trans ~ ' ' }}
+                    {% endif %}
+                    <span class="user">
+                        {{ user|chill_entity_render_box(options['user']) }}
+                    </span>
+                {% endif %}
            </div>
        {% endif %}
    </blockquote>
-{{ closing_box|raw }}
+{{ closing_box|raw }}
--- a/src/Bundle/ChillMainBundle/Resources/views/Entity/address.html.twig
+++ b/src/Bundle/ChillMainBundle/Resources/views/Entity/address.html.twig
@@ -59,7 +59,7 @@
    must be shown in such list
 #}
 {%- if render == 'list' -%}
-    <li class="chill-entity entity-address">
+    <li class="chill-entity entity-address {% if address.confidential %}confidential{% endif %}">
        {% if options['with_picto'] %}
            <i class="fa fa-li fa-map-marker"></i>
        {% endif %}
@@ -68,7 +68,7 @@
 {%- endif -%}

 {%- if render == 'inline' -%}
-    <span class="chill-entity entity-address">
+    <span class="chill-entity entity-address {% if address.confidential %}confidential{% endif %}">
        {% if options['with_picto'] %}
            <i class="fa fa-fw fa-map-marker"></i>
        {% endif %}
@@ -77,7 +77,7 @@
 {%- endif -%}

 {%- if render == 'bloc' -%}
-    <div class="chill-entity entity-address">
+    <div class="chill-entity entity-address {% if address.confidential %}confidential{% endif %}">
        {% if options['has_no_address'] == true and address.isNoAddress == true %}
            {% if address.postCode is not empty %}
            <div class="address{% if options['multiline'] %} multiline{% endif %}{% if options['with_delimiter'] %} delimiter{% endif %}">
--- a/src/Bundle/ChillMainBundle/Resources/views/Form/fields.html.twig
+++ b/src/Bundle/ChillMainBundle/Resources/views/Form/fields.html.twig
@@ -216,7 +216,7 @@
    {% endif %}
 {% endblock %}

-{% block pick_user_dynamic_widget %}
+{% block pick_entity_dynamic_widget %}
    <input type="hidden" {{ block('widget_attributes') }} {% if value is not empty %}value="{{ value }}" {% endif %} data-input-uniqid="{{ form.vars['uniqid'] }}"/>
    <div data-module="pick-dynamic" data-types="{{ form.vars['types']|json_encode }}" data-multiple="{{ form.vars['multiple'] }}" data-uniqid="{{ form.vars['uniqid'] }}"></div>
 {% endblock %}
--- a/src/Bundle/ChillMainBundle/Resources/views/Homepage/fast_actions.html.twig
+++ b/src/Bundle/ChillMainBundle/Resources/views/Homepage/fast_actions.html.twig
@@ -0,0 +1,3 @@
+<div class="sticky-buttons">
+    {# Override this file to add fast actions buttons #}
+</div>
--- a/src/Bundle/ChillMainBundle/Resources/views/Homepage/index.html.twig
+++ b/src/Bundle/ChillMainBundle/Resources/views/Homepage/index.html.twig
@@ -0,0 +1,15 @@
+<div class="col-10 mt-5">
+    
+    {# vue component #}
+    <div id="homepage_widget"></div>
+    
+    {% include '@ChillMain/Homepage/fast_actions.html.twig' %}
+</div>
+
+{% block css %}
+    {{ encore_entry_link_tags('page_homepage_widget') }}
+{% endblock %}
+
+{% block js %}
+    {{ encore_entry_script_tags('page_homepage_widget') }}
+{% endblock %}
--- a/src/Bundle/ChillMainBundle/Resources/views/Location/index.html.twig
+++ b/src/Bundle/ChillMainBundle/Resources/views/Location/index.html.twig
@@ -23,7 +23,7 @@
 					<td>{{ entity.email }}</td>
 					<td>
 					{% if entity.address is not null %}
-					    {{ entity.address.street}}, {{ entity.address.streetnumber }}
+					    {{ entity.address| chill_entity_render_box }}
 					{% endif %}
 					</td>
 					<td style="text-align:center;">
--- a/src/Bundle/ChillMainBundle/Resources/views/LocationType/index.html.twig
+++ b/src/Bundle/ChillMainBundle/Resources/views/LocationType/index.html.twig
@@ -8,6 +8,7 @@
 			<tr>
                <th>{{ 'Title'|trans }}</th>
 				<th>{{ 'Available for users'|trans }}</th>
+				<th>{{ 'Editable by users'|trans }}</th>
 				<th>{{ 'Address required'|trans }}</th>
 				<th>{{ 'Contact data'|trans }}</th>
 				<th>{{ 'Active'|trans }}</th>
@@ -25,6 +26,13 @@
 							<i class="fa fa-square-o"></i>
 						{%- endif -%}
 					</td>
+					<td style="text-align:center;">
+						{%- if entity.editableByUsers -%}
+							<i class="fa fa-check-square-o"></i>
+						{%- else -%}
+							<i class="fa fa-square-o"></i>
+						{%- endif -%}
+					</td>
 					<td>{{ entity.addressRequired|trans }}</td>
 					<td>{{ entity.contactData|trans }}</td>
 					<td style="text-align:center;">
--- a/src/Bundle/ChillMainBundle/Resources/views/Menu/verticalMenu.html.twig
+++ b/src/Bundle/ChillMainBundle/Resources/views/Menu/verticalMenu.html.twig
@@ -21,13 +21,13 @@
    layout ../layoutWithVerticalMenu.html.twig.
 #}

-<ul class="tab-nav follow-href-path">
-    <li class="title">
+<div class="list-group vertical-menu {{ 'menu-' ~ menus.name }}">
+    <a class="list-group-item title">
        {% block v_menu_title %}<!-- title of the verticalMenu is empty -->{% endblock %}
-    </li>
+    </a>
    {% for menu in menus %}
-        <li class="{% if menu is knp_menu_current %}current {% endif %}">
-            <a href="{{ menu.uri }}" >{{ menu.label|trans }}</a>
-        </li>
+        <a class="list-group-item list-group-item-action" href="{{ menu.uri }}">
+            {{ menu.label|upper }}
+        </a>
    {% endfor %}
-</ul>
+</div>
--- a/src/Bundle/ChillMainBundle/Resources/views/Notification/_item_comments.html.twig
+++ b/src/Bundle/ChillMainBundle/Resources/views/Notification/_item_comments.html.twig
@@ -0,0 +1,77 @@
+{% import '@ChillPerson/AccompanyingCourse/Comment/macro_showItem.html.twig' as m %}
+
+{% macro recordAction(comment) %}
+    {% if is_granted('CHILL_MAIN_NOTIFICATION_COMMENT_EDIT', comment) %}
+        <li>
+            <a href="{{ chill_path_forward_return_path('chill_main_notification_show', {
+                '_fragment': 'comment-' ~ comment.id,
+                'edit': comment.id,
+                'id': comment.notification.id
+            }) }}" class="btn btn-edit" title="{{ 'Edit'|trans }}"
+            ></a>
+        </li>
+    {% endif %}
+{% endmacro %}
+
+<div class="notification-comment-list my-5">
+    <h2 class="chill-blue">{{ 'notification.comments_list'|trans }}</h2>
+    
+    {% if notification.comments|length > 0 %}
+        <div class="flex-table">
+            {% for comment in notification.comments %}
+                
+                {% if editedCommentForm is null or editedCommentId != comment.id %}
+                    {{ m.show_comment(comment, {
+                        'recordAction': _self.recordAction(comment)
+                    }) }}
+                {% else %}
+                    <div class="item-bloc">
+                        <div class="item-row row">
+                            <a id="comment-{{ comment.id }}"></a>
+                            
+                            {{ form_start(editedCommentForm) }}
+                            {{ form_errors(editedCommentForm) }}
+                            {{ form_widget(editedCommentForm.content) }}
+                            <input type="hidden" name="form" value="edit" />
+                            <ul class="record_actions">
+                                <li class="cancel">
+                                    <a href="{{ chill_path_forward_return_path('chill_main_notification_show', {
+                                        '_fragment': 'comment-' ~ comment.id,
+                                        'id': notification.id }) }}" class="btn btn-cancel">
+                                        {{ 'cancel'|trans }}
+                                    </a>
+                                </li>
+                                <li>
+                                    <button class="btn btn-save" type="submit">{{ 'Save'|trans }}</button>
+                                </li>
+                            </ul>
+                            {{ form_end(editedCommentForm) }}
+                        
+                        </div>
+                    </div>
+                {% endif %}
+            
+            {% endfor %}
+        </div>
+    {% else %}
+        <span class="chill-no-data-statement">{{ 'No comments'|trans }}</span>
+    {% endif %}
+    
+    {% if appendCommentForm is not null %}
+        <div class="new-comment my-5">
+            <h2 class="chill-blue mb-4">{{ 'Write a new comment'|trans }}</h2>
+            
+            {{ form_start(appendCommentForm) }}
+            {{ form_errors(appendCommentForm) }}
+            {{ form_widget(appendCommentForm.content) }}
+            <input type="hidden" name="form" value="append" />
+            <ul class="record_actions">
+                <li>
+                    <button class="btn btn-create" type="submit">{{ 'notification.append_comment'|trans }}</button>
+                </li>
+            </ul>
+            {{ form_end(appendCommentForm) }}
+        
+        </div>
+    {% endif %}
+</div>
--- a/src/Bundle/ChillMainBundle/Resources/views/Notification/_list_item.html.twig
+++ b/src/Bundle/ChillMainBundle/Resources/views/Notification/_list_item.html.twig
@@ -1,39 +1,41 @@
-<div class="item-bloc {% if not notification.isReadBy(app.user) %}unread{% else %}read{% endif %}">
+{% macro title(c) %}
    <div class="item-row title">
        <h2 class="notification-title">
-            <a href="{{ chill_path_add_return_path('chill_main_notification_show', {'id': notification.id}) }}">
-                {{ notification.title }}
+            <a href="{{ chill_path_add_return_path('chill_main_notification_show', {'id': c.notification.id}) }}">
+                {{ c.notification.title }}
            </a>
        </h2>
    </div>
-    <div class="item-row mt-2 header">
+{% endmacro %}

+{% macro header(c) %}
+    <div class="item-row notification-header mt-2">
        <div class="item-col">
            <ul class="small_in_title">
-                {% if step is not defined or step == 'inbox' %}
+                {% if c.step is not defined or c.step == 'inbox' %}
                    <li class="notification-from">
                        <span class="item-key">
                            <abbr title="{{ 'notification.received_from'|trans }}">
                                {{ 'notification.from'|trans }} :
                            </abbr>
                        </span>
-                        {% if not notification.isSystem %}
+                        {% if not c.notification.isSystem %}
                            <span class="badge-user">
-                                {{ notification.sender|chill_entity_render_string }}
-                            </span>
+                                    {{ c.notification.sender|chill_entity_render_string }}
+                                </span>
                        {% else %}
                            <span class="badge-user system">{{ 'notification.is_system'|trans }}</span>
                        {% endif %}
                    </li>
                {% endif %}
-                {% if notification.addressees|length > 0 %}
+                {% if c.notification.addressees|length > 0 %}
                    <li class="notification-to">
                        <span class="item-key">
                            <abbr title="{{ 'notification.sent_to'|trans }}">
                                {{ 'notification.to'|trans }} :
                            </abbr>
                        </span>
-                        {% for a in notification.addressees %}
+                        {% for a in c.notification.addressees %}
                            <span class="badge-user">
                                {{ a|chill_entity_render_string }}
                            </span>
@@ -42,47 +44,102 @@
                {% endif %}
            </ul>
        </div>
-
        <div class="item-col">
-            {{ notification.date|format_datetime('long', 'short') }}
+            {{ c.notification.date|format_datetime('long', 'short') }}
        </div>
+    </div>
+{% endmacro %}

-    </div>
+{% macro content(c) %}
    <div class="item-row separator">
-        <div class="mx-3 flex-grow-1">
-            {% include data.template with data.template_data %}
+        {% if c.data is defined %}
+            <div class="mx-3 flex-grow-1">
+                {% include c.data.template with c.data.template_data %}
+            </div>
+        {% endif %}
+    </div>
+    <div class="item-row">
+        <div class="notification-content">
+            {% if c.full_content is defined and c.full_content == true %}
+                {{ c.notification.message|chill_markdown_to_html }}
+            {% else %}
+                {{ c.notification.message|u.truncate(250, '…', false)|chill_markdown_to_html }}
+                <p class="read-more"><a href="{{ chill_path_add_return_path('chill_main_notification_show', {'id': c.notification.id}) }}">{{ 'Read more'|trans }}</a></p>
+            {% endif %}
        </div>
    </div>
-    <div class="item-row row">
-        <div>
-            <blockquote class="chill-user-quote">
-                {{ notification.message|u.truncate(250, '…', false)|chill_markdown_to_html }}
-            </blockquote>
-        </div>
-    </div>
-    {% if action_button is not defined or action_button != 'false' %}
+    {% if c.action_button is not defined or c.action_button != false %}
        <div class="item-row separator">
-            <ul class="record_actions">
-                <li>
-                    {# Vue component #}
-                    <span class="notification_toggle_read_status"
-                          data-notification-id="{{ notification.id }}"
-                          data-notification-current-is-read="{{ notification.isReadBy(app.user) }}"
-                    ></span>
-                </li>
-                {% if is_granted('CHILL_MAIN_NOTIFICATION_UPDATE', notification) %}
-                    <li>
-                        <a href="{{ chill_path_add_return_path('chill_main_notification_edit', {'id': notification.id}) }}"
-                           class="btn btn-edit" title="{{ 'Edit'|trans }}"></a>
-                    </li>
+            <div class="item-col item-meta">
+                
+                {% if c.notification.comments|length > 0 %}
+                    <div class="comment-counter">
+                        <span class="counter">
+                            {{ 'notification.counter comments'|trans({'nb': c.notification.comments|length }) }}
+                        </span>
+                    </div>
                {% endif %}
-                {% if is_granted('CHILL_MAIN_NOTIFICATION_SEE', notification) %}
+                
+            </div>
+            <div class="item-col">
+                <ul class="record_actions">
                    <li>
-                        <a href="{{ chill_path_add_return_path('chill_main_notification_show', {'id': notification.id}) }}"
-                           class="btn btn-show" title="{{ 'Show'|trans }}"></a>
+                        {# Vue component #}
+                        <span class="notification_toggle_read_status"
+                            data-notification-id="{{ c.notification.id }}"
+                            data-notification-current-is-read="{{ c.notification.isReadBy(app.user) }}"
+                            data-container="notification-status"
+                        ></span>
                    </li>
-                {% endif %}
-            </ul>
+                    {% if is_granted('CHILL_MAIN_NOTIFICATION_UPDATE', c.notification) %}
+                        <li>
+                            <a href="{{ chill_path_add_return_path('chill_main_notification_edit', {'id': c.notification.id}) }}"
+                               class="btn btn-edit" title="{{ 'Edit'|trans }}"></a>
+                        </li>
+                    {% endif %}
+                    {% if is_granted('CHILL_MAIN_NOTIFICATION_SEE', c.notification) %}
+                        <li>
+                            <a href="{{ chill_path_add_return_path('chill_main_notification_show', {'id': c.notification.id}) }}"
+                               class="btn {% if not c.notification.isSystem %}btn-show change-icon{% else %}btn-misc{% endif %}" title="{{ 'notification.see_comments_thread'|trans }}">
+                                {% if not c.notification.isSystem() %}
+                                    <i class="fa fa-comment"></i>
+                                {% else %}
+                                    {{ 'Read more'|trans }}
+                                {% endif %}
+                            </a>
+                        </li>
+                    {% endif %}
+                </ul>
+            </div>
        </div>
    {% endif %}
+{% endmacro %}
+
+<div class="item-bloc notification-status {% if notification.isReadBy(app.user) %}read{% else %}unread{% endif %}">
+
+    {% if fold_item is defined and fold_item != false %}
+        <div class="accordion-header" id="flush-heading-{{ notification.id }}">
+            <button type="button" class="accordion-button collapsed"
+                data-bs-toggle="collapse" data-bs-target="#flush-collapse-{{ notification.id }}"
+                aria-expanded="false" aria-controls="flush-collapse-{{ notification.id }}">
+                
+                {{ _self.title(_context) }}
+            </button>
+            {{ _self.header(_context) }}
+        
+        </div>
+        <div id="flush-collapse-{{ notification.id }}"
+            class="accordion-collapse collapse"
+            aria-labelledby="flush-heading-{{ notification.id }}"
+            data-bs-parent="#notification-fold">
+            
+            {{ _self.content(_context) }}
+        
+        </div>
+    {% else %}
+        {{ _self.title(_context) }}
+        {{ _self.header(_context) }}
+        {{ _self.content(_context) }}
+    {% endif %}
+
 </div>
--- a/src/Bundle/ChillMainBundle/Resources/views/Notification/create.html.twig
+++ b/src/Bundle/ChillMainBundle/Resources/views/Notification/create.html.twig
@@ -20,7 +20,7 @@

    {{ form_row(form.title, { 'label': 'notification.subject'|trans }) }}
    {{ form_row(form.addressees, { 'label': 'notification.sent_to'|trans }) }}
-
+    
    {% include handler.template(notification) with handler.templateData(notification) %}

    <div class="mb-3 row">
--- a/src/Bundle/ChillMainBundle/Resources/views/Notification/extension_counter_notifications_for.html.twig
+++ b/src/Bundle/ChillMainBundle/Resources/views/Notification/extension_counter_notifications_for.html.twig
@@ -0,0 +1,12 @@
+<div class="notification-counter">
+    {% if counter.total > 0 %}
+        <span class="counter">
+            {{ 'notification.counter total notifications'|trans({'total': counter.total }) }}
+        </span>
+    {% endif %}
+    {% if counter.unread > 0 %}
+        <span class="counter">
+            {{ 'notification.counter unread notifications'|trans({'unread': counter.unread }) }}
+        </span>
+    {% endif %}
+</div>
--- a/src/Bundle/ChillMainBundle/Resources/views/Notification/extension_list_notifications_for.html.twig
+++ b/src/Bundle/ChillMainBundle/Resources/views/Notification/extension_list_notifications_for.html.twig
@@ -1,45 +1,12 @@
-<div class="list-group my-2 notification notification-box">
-    <div class="list-group-item">
-        <h4>{{ 'notification.Sent'|trans }}</h4>
-    </div>
-    {# TODO pagination or limit #}
+<h1 class="mt-5"><a id="notification-list"></a>{{ 'notification.Notifications'|trans }}</h1>
+
+<div class="flex-table accordion accordion-flush" id="notification-fold">
    {% for notification in notifications %}
-        <div class="list-group-item {% if notification.isReadBy(app.user) %}read{% else %}unread{% endif %}">
-
-            {% if not notification.isSystem %}
-                {% if notification.sender == app.user %}
-
-                    <h6 class="notification-title">
-                        <abbr title="{{ 'Le ' ~ notification.date|format_date('long') ~ '\n' ~ notification.title }}">
-                            {{ notification.date|format_datetime('short','short') }}
-                        </abbr>
-                        {# Vue component #}
-                        <span class="notification_toggle_read_status"
-                            data-notification-id="{{ notification.id }}"
-                            data-notification-current-is-read="{{ notification.isReadBy(app.user) }}"
-                            data-show-button-url="{{ chill_path_add_return_path('chill_main_notification_show', {'id': notification.id}) }}"
-                            data-button-class="btn-outline-primary"
-                            data-button-text="false"
-                        ></span>
-                    </h6>
-
-                    {% if notification.addressees|length > 0 %}
-                        <abbr title="{{ 'notification.sent_to'|trans }}">{{ 'notification.to'|trans }}:</abbr>
-                    {% endif %}
-
-                    {% for a in notification.addressees %}
-                        <span class="badge-user">
-                            {{ a|chill_entity_render_string }}
-                        </span>
-                    {% endfor %}
-
-                {% else %}
-                    <div>{{ 'notification.you were notified by %sender%'|trans({'%sender%': notification.sender|chill_entity_render_string }) }}</div>
-                {% endif %}
-            {% else %}
-                <div>{{ 'notification.you were notified by system'|trans }}</div>
-            {% endif %}
-
-        </div>
+        {% include 'ChillMainBundle:Notification:_list_item.html.twig' with {
+            'full_content': true,
+            'fold_item': true,
+            'action_button': true,
+        } %}{#
+    #}
    {% endfor %}
 </div>
--- a/src/Bundle/ChillMainBundle/Resources/views/Notification/list.html.twig
+++ b/src/Bundle/ChillMainBundle/Resources/views/Notification/list.html.twig
@@ -46,10 +46,12 @@
            <p class="chill-no-data-statement">{{ 'notification.Any notification sent'|trans }}</p>
        {% endif %}
    {% else %}
-        <div class="flex-table">
+        <div class="flex-table accordion accordion-flush" id="notification-fold">
            {% for data in datas %}
                {% set notification = data.notification %}
-                {% include 'ChillMainBundle:Notification:_list_item.html.twig' %}
+                {% include 'ChillMainBundle:Notification:_list_item.html.twig' with {
+                    'fold_item': true
+                } %}
            {% endfor %}
        </div>
    {% endif %}
--- a/src/Bundle/ChillMainBundle/Resources/views/Notification/show.html.twig
+++ b/src/Bundle/ChillMainBundle/Resources/views/Notification/show.html.twig
@@ -14,21 +14,6 @@
    {{ encore_entry_link_tags('mod_notification_toggle_read_status') }}
 {% endblock %}

-{% import '@ChillPerson/AccompanyingCourse/Comment/macro_showItem.html.twig' as m %}
-
-{% macro recordAction(comment) %}
-    {% if is_granted('CHILL_MAIN_NOTIFICATION_COMMENT_EDIT', comment) %}
-    <li>
-        <a href="{{ chill_path_forward_return_path('chill_main_notification_show', {
-            '_fragment': 'comment-' ~ comment.id,
-            'edit': comment.id,
-            'id': comment.notification.id
-        }) }}" class="btn btn-edit" title="{{ 'Edit'|trans }}"
-        ></a>
-    </li>
-    {% endif %}
-{% endmacro %}
-
 {% block content %}
 <div class="col-10 notification notification-show">

@@ -40,68 +25,13 @@
                 'template': handler.getTemplate(notification),
                 'template_data': handler.getTemplateData(notification)
            },
-            'action_button': 'false'
+            'action_button': false,
+            'full_content': true,
+            'fold_item': false
        } %}
    </div>

-    <div class="notification-comment-list my-5">
-        <h2 class="chill-blue">{{ 'notification.comments_list'|trans }}</h2>
-
-        {% if notification.comments|length > 0 %}
-            <div class="flex-table">
-                {% for comment in notification.comments %}
-
-                    {% if editedCommentForm is null or editedCommentId != comment.id %}
-                        {{ m.show_comment(comment, {
-                            'recordAction': _self.recordAction(comment)
-                        }) }}
-                    {% else %}
-                        <div class="item-bloc">
-                            <div class="item-row row">
-                                <a id="comment-{{ comment.id }}"></a>
-
-                                {{ form_start(editedCommentForm) }}
-                                {{ form_errors(editedCommentForm) }}
-                                {{ form_widget(editedCommentForm.content) }}
-                                <input type="hidden" name="form" value="edit" />
-                                <ul class="record_actions">
-                                    <li class="cancel">
-                                        <a href="{{ chill_path_forward_return_path('chill_main_notification_show', {
-                                            '_fragment': 'comment-' ~ comment.id,
-                                            'id': notification.id }) }}" class="btn btn-cancel">
-                                            {{ 'cancel'|trans }}
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <button class="btn btn-save" type="submit">{{ 'Save'|trans }}</button>
-                                    </li>
-                                </ul>
-                                {{ form_end(editedCommentForm) }}
-
-                            </div>
-                        </div>
-                    {% endif %}
-
-                {% endfor %}
-            </div>
-        {% endif %}
-
-        <div class="new-comment my-5">
-            <h2 class="chill-blue">{{ 'Write a new comment'|trans }}</h2>
-
-            {{ form_start(appendCommentForm) }}
-            {{ form_errors(appendCommentForm) }}
-            {{ form_widget(appendCommentForm.content) }}
-            <input type="hidden" name="form" value="append" />
-            <ul class="record_actions">
-                <li>
-                    <button class="btn btn-create" type="submit">{{ 'notification.append_comment'|trans }}</button>
-                </li>
-            </ul>
-            {{ form_end(appendCommentForm) }}
-
-        </div>
-    </div>
+    {% include 'ChillMainBundle:Notification:_item_comments.html.twig' %}

    <ul class="record_actions sticky-form-buttons">
        <li class="cancel">
@@ -114,6 +44,7 @@
            <span class="notification_toggle_read_status"
                data-notification-id="{{ notification.id }}"
                data-notification-current-is-read="1"
+                data-container="notification-status"
            ></span>
        </li>
    </ul>
--- a/src/Bundle/ChillMainBundle/Resources/views/OnTheFly/_insert_vue_onthefly.html.twig
+++ b/src/Bundle/ChillMainBundle/Resources/views/OnTheFly/_insert_vue_onthefly.html.twig
@@ -11,6 +11,7 @@
    * buttonText    string
    * displayBadge  boolean (default: false)  replace button by badge, need to define buttonText for content
    * parent        object  (optional)        pass parent context of the targetEntity (used for course resource comment)
+    * isDead        boolean (default: false)  is the person dead

 #}
 <span class="onthefly-container"
@@ -28,6 +29,10 @@
        data-button-text="{{ buttonText|e('html_attr') }}"
    {% endif %}

+    {% if isDead is defined and isDead == 1  %}
+        data-is-dead="true"
+    {% endif %}
+
    {% if displayBadge is defined and displayBadge == 1 %}
        data-display-badge="true"
    {% endif %}
@@ -37,6 +42,3 @@
    {% endif %}

 ></span>
-
-{{ encore_entry_script_tags('vue_onthefly') }}
-{{ encore_entry_link_tags('vue_onthefly') }}
--- a/src/Bundle/ChillMainBundle/Resources/views/Workflow/_attachment.html.twig
+++ b/src/Bundle/ChillMainBundle/Resources/views/Workflow/_attachment.html.twig
@@ -0,0 +1,120 @@
+{# TODO Adapt condition #}
+{% if random(1) == 0 %}
+
+    {# For a document #}
+    <h2>{{ 'Document'|trans ~ 'target'|trans }}</h2>
+
+    <div class="row justify-content-center mt-5">
+        <div class="col-2">
+            <i class="fa fa-4x fa-file-text-o text-success"></i>
+        </div>
+        <div class="col-8">
+            <h3>Imprimé unique, parcours n°14635</h3>
+            <small>Document PDF (6.2 Mo)</small>
+            <p class="mt-2">
+                Description du document. Sed euismod nisi porta lorem mollis aliquam. Non curabitur gravida arcu ac tortor.
+            </p>
+        </div>
+    </div>
+
+{% else %}
+
+    {# For an action #}
+    <h2>{{ 'Accompanying Course Action'|trans ~ 'target'|trans }}</h2>
+
+    <div class="flex-table accompanying_course_work-list">
+        {# dynamic insertion
+            ::: TODO delete all static insertion, remove condition and pass work object in inclusion
+        #}{% if dynamic is defined %}
+
+            {% set work = '<pass work object here>' %}
+            {% include '@ChillPerson/AccompanyingCourseWork/_item.html.twig' with { 'w': work } %}
+
+        {% else %}
+
+        {# BEGIN static insertion #}
+            <div class="item-bloc">
+                <div class="item-row">
+                    <h2 class="badge-title">
+                        <span class="title_label"></span>
+                        <span class="title_action">Exercer un AEB &gt; Conclure l'AEB
+                            <ul class="small_in_title columns mt-1">
+                                <li><span class="item-key">Date de début : </span><b>25/11/2021</b></li>
+                                <li><span class="item-key">Date de fin : </span><b>10/03/2022</b></li>
+                            </ul>
+                        </span>
+                    </h2>
+                </div>
+                <div class="item-row separator">
+                    <div class="wrap-list">
+                        <div class="wl-row">
+                            <div class="wl-col title"><h3>Référent</h3></div>
+                            <div class="wl-col list"><p class="wl-item">Fred</p></div>
+                        </div>
+                        <div class="wl-row">
+                            <div class="wl-col title"><h3>Usagers du parcours</h3></div>
+                            <div class="wl-col list"><span class="wl-item">
+                                <span class="onthefly-container" data-target-name="person" data-target-id="1937" data-action="show" data-button-text="Vernon SUBUTEX" data-display-badge="true" data-v-app=""><a data-v-0c1a1125=""><span class="chill-entity entity-person badge-person" data-v-0c1a1125="">Vernon SUBUTEX</span></a><!--teleport start--><!--teleport end--></span></span>
+                                <span class="wl-item"><span class="onthefly-container" data-target-name="person" data-target-id="1941" data-action="show" data-button-text="Juan RAMON" data-display-badge="true" data-v-app=""><a data-v-0c1a1125=""><span class="chill-entity entity-person badge-person" data-v-0c1a1125="">Juan RAMON</span></a><!--teleport start--><!--teleport end--></span></span>
+                            </div>
+                        </div>
+                        <div class="wl-row">
+                            <div class="wl-col title"><h3>Problématique sociale</h3></div>
+                            <div class="wl-col list">
+                                <p class="wl-item social-issues">
+                                    <span class="chill-entity entity-social-issue"><span class="badge bg-chill-l-gray text-dark"><span class="parent-0">AD - PREVENTION, ACCES AUX DROITS, BUDGET &gt;</span><span class="child">SOUTIEN EQUILIBRE BUDGET</span></span></span>
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="item-row column">
+                    <table class="obj-res-eval my-3">
+                        <thead>
+                        <tr><th class="obj"><h4 class="title_label">Objectif - motif - dispositif</h4></th>
+                            <th class="res"><h4 class="title_label">Résultats - orientations</h4></th>
+                        </tr></thead>
+                        <tbody>
+                        <tr>
+                            <td class="obj">
+                                <p class="chill-no-data-statement">Aucun objectif - motif -  dispositif</p>
+                            </td>
+                            <td class="res">
+                                <ul class="result_list">
+                                    <li>Résultat : Arrêt à l'initiative du ménage pour déménagement</li>
+                                    <li>Orientation vers une MASP</li>
+                                </ul>
+                            </td>
+                        </tr>
+                        </tbody>
+                    </table>
+                </div>
+                <div class="item-row separator">
+                    <div class="updatedBy">
+                        Dernière mise à jour par
+                        <b><span class="chill-entity entity-user">Fred<span class="user-job">(Responsable tous les territoires)</span><span class="main-scope">(ASE)</span></span></b>,<br>
+                        le 3 décembre 2021 à 15:19
+                    </div>
+                </div>
+            </div>
+        {# END static insertion #}
+
+        {% endif %}
+    </div>
+
+{% endif %}
+
+<ul class="record_actions">
+    <li>
+        <button type="button" class="btn btn-misc">
+            <i class="fa fa-download fa-fw"></i>{{ 'Download'|trans }}
+        </button>
+    </li>
+    <li>
+        {% set x = random(1) %}
+        <button class="btn btn-update change-icon {% if x == 1 %}disabled{% endif %}">
+            <i class="fa fa-fw fa-{% if x == 0 %}un{% endif %}lock"></i>
+            {{ 'Edit'|trans }}
+        </button>
+    </li>
+</ul>
--- a/src/Bundle/ChillMainBundle/Resources/views/Workflow/_comment.html.twig
+++ b/src/Bundle/ChillMainBundle/Resources/views/Workflow/_comment.html.twig
@@ -0,0 +1,13 @@
+<h2>{{ 'Join a comment'|trans }}</h2>
+
+{{ form_start(comment_form) }}
+
+{{ form_widget(comment_form.comment) }}
+
+<ul class="record_actions">
+    <li>
+        <button type="submit" class="btn btn-save">{{ 'Save'|trans }}</button>
+    </li>
+</ul>
+
+{{ form_end(comment_form) }}
--- a/src/Bundle/ChillMainBundle/Resources/views/Workflow/_decision.html.twig
+++ b/src/Bundle/ChillMainBundle/Resources/views/Workflow/_decision.html.twig
@@ -0,0 +1,95 @@
+<h2>{{ 'Decision'|trans }}</h2>
+
+{% if transition_form is not null %}
+    {{ form_start(transition_form) }}
+
+    {% set step = entity_workflow.currentStepChained %}
+    {% set labels = workflow_metadata(entity_workflow, 'label', step.currentStep) %}
+    {% set label = labels is null ? step.currentStep : labels|localize_translatable_string %}
+
+    <div class="card">
+        <div class="card-body">
+            <div class="row">
+                <div class="col-sm-12">
+                    {{ 'workflow.Current step'|trans }}&nbsp;:
+                    <span class="badge bg-primary">{{ label }}</span>
+                </div>
+            </div>
+
+            {% if step.previous is not null %}
+                {% if step.previous.comment is not empty %}
+                    <div class="row">
+                        <div class="col-sm-12">
+                            <blockquote class="chill-user-quote">
+                                {{ step.previous.comment|chill_markdown_to_html }}
+                            </blockquote>
+                        </div>
+                    </div>
+                {% endif %}
+                <div class="row">
+                    <div class="col-sm-12">
+                        {{ 'By'|trans }}
+                        {{ step.previous.transitionBy|chill_entity_render_box }},
+                        {{ step.previous.transitionAt|format_datetime('short', 'short') }}
+                    </div>
+                </div>
+            {% else %}
+                <div class="row">
+                    <div class="col-sm-4">{{ 'workflow.Created by'|trans }}</div>
+                    <div class="col-sm-8">{{ step.entityWorkflow.createdBy|chill_entity_render_box }}</div>
+                </div>
+                <div class="row">
+                    <div class="col-sm-4">{{ 'Le'|trans }}</div>
+                    <div class="col-sm-8">{{ step.entityWorkflow.createdAt|format_datetime('short', 'short') }}</div>
+                </div>
+            {% endif %}
+        </div>
+    </div>
+
+    <div id="transitionFilter">
+        {% if transition_form.transitionFilter is defined %}
+            {{ form_row(transition_form.transitionFilter) }}
+        {% endif %}
+    </div>
+
+    <div id="transitions">
+        {{ form_row(transition_form.transition) }}
+    </div>
+
+    {% if transition_form.freezeAfter is defined %}
+        {{ form_row(transition_form.freezeAfter) }}
+    {% endif %}
+
+    <div id="futureDestUsers">
+        {{ form_row(transition_form.future_dest_users) }}
+    </div>
+
+    <p>{{ form_label(transition_form.comment) }}</p>
+
+    {{ form_widget(transition_form.comment) }}
+
+    <ul class="record_actions">
+        <li>
+            <button type="submit" class="btn btn-save">{{ 'Save'|trans }}</button>
+        </li>
+    </ul>
+
+    {{ form_end(transition_form) }}
+{% else %}
+    <div class="alert alert-chill-yellow">
+
+        {% if entity_workflow.currentStep.isFinal %}
+            <p>{{ 'workflow.This workflow is finalized'|trans }}</p>
+        {% else %}
+            <p>{{ 'workflow.You are not allowed to apply a transition on this workflow'|trans }}</p>
+            <p>{{ 'workflow.Only those users are allowed'|trans }}:</p>
+
+            <ul>
+                {% for u in entity_workflow.currentStep.destUser -%}
+                    <li>{{ u|chill_entity_render_box }}</li>
+                {%- endfor %}
+            </ul>
+        {% endif %}
+    </div>
+
+{% endif %}
--- a/src/Bundle/ChillMainBundle/Resources/views/Workflow/_extension_list_workflow_for.html.twig
+++ b/src/Bundle/ChillMainBundle/Resources/views/Workflow/_extension_list_workflow_for.html.twig
@@ -0,0 +1,13 @@
+{% set acl = "0" %}
+{% if is_granted('CHILL_MAIN_WORKFLOW_CREATE', blank_workflow) %}
+    {% set acl = "1" %}
+{% endif %}
+
+{# vue component #}
+<div data-list-workflows="1"
+    data-workflows="{{ entity_workflows_json|json_encode|e('html_attr') }}"
+    data-allow-create="{{ acl }}"
+    data-related-entity-class="{{ blank_workflow.relatedEntityClass }}"
+    data-related-entity-id="{{ blank_workflow.relatedEntityId }}"
+    data-workflows-availables="{{ workflows_availables|json_encode()|e('html_attr') }}"
+></div>
--- a/src/Bundle/ChillMainBundle/Resources/views/Workflow/_follow.html.twig
+++ b/src/Bundle/ChillMainBundle/Resources/views/Workflow/_follow.html.twig
@@ -0,0 +1,8 @@
+<h2>{{ 'Follow workflow'|trans }}</h2>
+
+{# vue component #}
+<div data-entity-workflow-subscribe="1"
+     data-entity-workflow-id="{{ entity_workflow.id }}"
+     data-subscribe-step="{{ entity_workflow.isUserSubscribedToStep(app.user)|e('html_attr') }}"
+     data-subscribe-final="{{ entity_workflow.isUserSubscribedToFinal(app.user)|e('html_attr') }}"
+></div>
--- a/src/Bundle/ChillMainBundle/Resources/views/Workflow/_history.html.twig
+++ b/src/Bundle/ChillMainBundle/Resources/views/Workflow/_history.html.twig
@@ -0,0 +1,88 @@
+<h2>{{ 'Workflow history'|trans }}</h2>
+
+<div class="flex-table">
+    {% for step in entity_workflow.stepsChained %}
+        {% set place_labels = workflow_metadata(entity_workflow, 'label', step.currentStep) %}
+        {% set place_label = place_labels is null ? step.currentStep : place_labels|localize_translatable_string %}
+
+        <div class="item-bloc {{ 'bloc' ~ step.id }} {% if loop.first %}initial{% endif %}">
+            <div class="item-row">
+
+                {% if loop.first and step.next is null %}
+                    <div class="item-col">
+                        {{ 'workflow.No transitions'|trans }}
+                    </div>
+                {% else %}
+
+                    <div class="item-col">
+                        {% if step.previous is not null and step.previous.freezeAfter == true %}
+                            <i class="fa fa-snowflake-o fa-sm me-1" title="{{ 'workflow.Freezed'|trans }}"></i>
+                        {% endif %}
+                    </div>
+                    <div class="item-col flex-column align-items-end">
+                        <div class="decided">
+                            {{ place_label }}
+                        </div>
+                        {#
+                        <div class="decided">
+                        <i class="fa fa-times fa-fw text-danger"></i>
+                        Refusé
+                        </div>
+                        #}
+                    </div>
+                {% endif %}
+
+            </div>
+            {% if step.next is not null %}
+                {% set transition = chill_workflow_transition_by_string(step.entityWorkflow, step.transitionAfter) %}
+                {% set transition_labels = workflow_metadata(step.entityWorkflow, 'label', transition) %}
+                {% set transition_label = transition_labels is null ? step.transitionAfter : transition_labels|localize_translatable_string %}
+                {% set forward = workflow_metadata(step.entityWorkflow, 'isForward', transition) %}
+                <div class="item-row separator">
+                    <div class="item-col" style="width: inherit;">
+                        {% if step.transitionBy is not null %}
+                            <div>
+                                {{ step.transitionBy|chill_entity_render_box }}
+                            </div>
+                        {% endif %}
+                        <div>
+                            <span>{{ step.transitionAt|format_datetime('long', 'medium') }}</span>
+                        </div>
+                    </div>
+                    <div class="item-col flex-column align-items-end">
+                        <div class="to-decision">
+                            <i class="fa fa-share fa-fw text-secondary" title="transféré"></i>
+                            {% if forward %}
+                                <i class="fa fa-check fa-fw text-success"></i>
+                            {% else %}
+                                <i class="fa fa-times fa-fw text-danger"></i>
+                            {% endif %}
+                            {{ transition_label }}
+                        </div>
+                    </div>
+                </div>
+            {% endif %}
+            {% if step.comment is not empty %}
+                <div class="item-row separator">
+                    <blockquote class="chill-user-quote col">
+                        {{ step.comment|chill_markdown_to_html }}
+                    </blockquote>
+                </div>
+            {% endif %}
+            {% if loop.last and step.destUser|length > 0 %}
+                <div class="item-row separator">
+                    <div>
+                        <p><b>{{ 'workflow.Users allowed to apply transition'|trans }}&nbsp;: </b></p>
+                        <ul>
+                            {% for u in step.destUser %}
+                                <li>{{ u|chill_entity_render_box }}</li>
+                            {% endfor %}
+                        </ul>
+                    </div>
+                </div>
+            {% endif %}
+        </div>
+
+    {% endfor %}
+
+</div>
--- a/src/Bundle/ChillMainBundle/Resources/views/Workflow/_notification_include.html.twig
+++ b/src/Bundle/ChillMainBundle/Resources/views/Workflow/_notification_include.html.twig
@@ -0,0 +1,12 @@
+<div class="item-row col">
+    <h2>
+        {{ 'workflow_'|trans }}
+    </h2>
+    {% include handler.templateTitle(entity_workflow) with handler.templateTitleData(entity_workflow)|merge({
+        'description': true,
+        'breadcrumb': true,
+        'add_classes': 'ms-3 h3'
+    }) %}
+
+
+</div>
--- a/src/Bundle/ChillMainBundle/Resources/views/Workflow/index.html.twig
+++ b/src/Bundle/ChillMainBundle/Resources/views/Workflow/index.html.twig
@@ -0,0 +1,56 @@
+{% extends '@ChillMain/layout.html.twig' %}
+
+{% block title %}
+    {{ 'Workflow'|trans }}
+{% endblock %}
+
+{% block js %}
+    {{ parent() }}
+    
+    {{ encore_entry_script_tags('mod_async_upload') }}
+    {{ encore_entry_script_tags('mod_pickentity_type') }}
+    {{ encore_entry_script_tags('mod_entity_workflow_subscribe') }}
+    {{ encore_entry_script_tags('page_workflow_show') }}
+    {{ encore_entry_script_tags('mod_wopi_link') }}
+{% endblock %}
+
+{% block css %}
+    {{ parent() }}
+    {{ encore_entry_link_tags('mod_pickentity_type') }}
+    {{ encore_entry_link_tags('mod_entity_workflow_subscribe') }}
+    {{ encore_entry_link_tags('page_workflow_show') }}
+    {{ encore_entry_link_tags('mod_wopi_link') }}
+{% endblock %}
+
+{% block content %}
+<div class="col-10 workflow">
+    <h1 class="mb-5">{{ block('title') }}</h1>
+    
+    {#  handler_template:
+        - src/Bundle/ChillPersonBundle/Resources/views/Workflow/_evaluation.html.twig
+        - src/Bundle/ChillPersonBundle/Resources/views/Workflow/_accompanying_period_work.html.twig
+        - src/Bundle/ChillDocStoreBundle/Resources/views/AccompanyingCourseDocument/_workflow.html.twig
+    #}
+    <section class="step my-4">
+        <div class="mb-5">
+            {% include handler_template_title with handler_template_data|merge({'breadcrumb': true }) %}
+        </div>
+        {% include handler_template with handler_template_data|merge({'display_action': true }) %}
+    </section>
+    
+    <section class="step my-4">{% include '@ChillMain/Workflow/_follow.html.twig' %}</section>
+    <section class="step my-4">{% include '@ChillMain/Workflow/_decision.html.twig' %}</section>{#
+    <section class="step my-4">{% include '@ChillMain/Workflow/_comment.html.twig' %}</section> #}
+    <section class="step my-4">{% include '@ChillMain/Workflow/_history.html.twig' %}</section>
+
+    {# useful ?
+    <ul class="record_actions sticky-form-buttons">
+        <li class="cancel">
+            <a class="btn btn-cancel" href="{{ path('chill_main_workflow_list_dest') }}">
+                {{ 'Back to the list'|trans }}
+            </a>
+        </li>
+    </ul>
+    #}
+</div>
+{% endblock %}
--- a/src/Bundle/ChillMainBundle/Resources/views/Workflow/list.html.twig
+++ b/src/Bundle/ChillMainBundle/Resources/views/Workflow/list.html.twig
@@ -0,0 +1,97 @@
+{% extends 'ChillMainBundle::layout.html.twig' %}
+
+{% import '@ChillMain/Workflow/macro_breadcrumb.html.twig' as macro %}
+
+{% block title %}
+    {{ 'workflow.My workflows'|trans }}
+{% endblock %}
+
+{% block content %}
+<div class="col-10 workflow">
+    
+    <h1 class="mb-5">{{ block('title') }}</h1>
+    
+    <ul class="nav nav-pills justify-content-center">
+        <li class="nav-item">
+            <a href="{{ path('chill_main_workflow_list_subscribed') }}"
+                class="nav-link {% if step == 'subscribed' %}active{% endif %}">
+                {{ 'workflow.subscribed'|trans }}
+            </a>
+        </li>
+        <li class="nav-item">
+            <a href="{{ path('chill_main_workflow_list_dest') }}"
+                class="nav-link {% if step == 'dest' %}active{% endif %}">
+                {{ 'workflow.dest'|trans }}
+            </a>
+        </li>
+    </ul>
+
+    {% if workflows|length == 0 %}
+        <p class="chill-no-data-statement">{{ 'workflow.No workflow'|trans }}</p>
+    {% else %}
+        <div class="flex-table accordion accordion-flush" id="workflow-fold">
+        {% for l in workflows %}
+            <div class="item-bloc">
+                <div class="accordion-header" id="flush-heading-{{ l.entity_workflow.id }}">
+                    <button type="button" class="accordion-button collapsed"
+                        data-bs-toggle="collapse" data-bs-target="#flush-collapse-{{ l.entity_workflow.id }}"
+                        aria-expanded="false" aria-controls="flush-collapse-{{ l.entity_workflow.id }}">
+                    
+                        <div class="item-row col">
+                            <h2>
+                                {{ 'workflow_'|trans }}
+                            </h2>
+                            {% include l.handler.templateTitle(l.entity_workflow) with l.handler.templateTitleData(l.entity_workflow)|merge({
+                                'description': true,
+                                'add_classes': 'ms-3 h3'
+                            }) %}
+                        </div>
+                        
+                    </button>
+                    {{ macro.breadcrumb(l) }}
+                    
+                </div>
+                <div id="flush-collapse-{{ l.entity_workflow.id }}"
+                    class="accordion-collapse collapse"
+                    aria-labelledby="flush-heading-{{ l.entity_workflow.id }}"
+                    data-bs-parent="#workflow-fold">
+                    
+                    <div class="item-row flex-column">
+                        {% include l.handler.template(l.entity_workflow) with l.handler.templateData(l.entity_workflow)|merge({
+                            'display_action': false
+                        }) %}
+                    </div>
+                    <div class="item-row">
+                        <div class="item-col flex-grow-1">
+                            <p>
+                                {% if l.entity_workflow.isUserSubscribedToStep(app.user) %}
+                                    <i class="fa fa-check fa-fw"></i>
+                                    {{ 'workflow.you subscribed to all steps'|trans }}
+                                {% endif %}
+                            </p>
+                            <p>
+                                {% if l.entity_workflow.isUserSubscribedToFinal(app.user) %}
+                                    <i class="fa fa-check fa-fw"></i>
+                                    {{ 'workflow.you subscribed to final step'|trans }}
+                                {% endif %}
+                            </p>
+                        </div>
+                        <div class="item-col">
+                            <ul class="record_actions">
+                                <li>
+                                    <a href="{{ path('chill_main_workflow_show', {'id': l.entity_workflow.id}) }}"
+                                        class="btn btn-show">
+                                        {{ 'Show'|trans }}
+                                    </a>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                    
+                </div>
+            </div>
+        {% endfor %}
+        </div>
+    {% endif %}
+</div>
+{% endblock %}
--- a/src/Bundle/ChillMainBundle/Resources/views/Workflow/macro_breadcrumb.html.twig
+++ b/src/Bundle/ChillMainBundle/Resources/views/Workflow/macro_breadcrumb.html.twig
@@ -0,0 +1,66 @@
+{% macro popoverContent(step) %}
+    <ul class="small_in_title">
+        {% if step.previous is not null %}
+            <li>
+                <span class="item-key">{{ 'By'|trans ~ ' : ' }}</span>
+                <b>{{ step.previous.transitionBy|chill_entity_render_box }}</b>
+            </li>
+            <li>
+                <span class="item-key">{{ 'Le'|trans ~ ' : ' }}</span>
+                <b>{{ step.previous.transitionAt|format_datetime('short', 'short') }}</b>
+            </li>
+        {% else %}
+            <li>
+                <span class="item-key">{{ 'workflow.Created by'|trans ~ ' : ' }}</span>
+                <b>{{ step.entityWorkflow.createdBy|chill_entity_render_box }}</b>
+            </li>
+            <li>
+                <span class="item-key">{{ 'Le'|trans ~ ' : ' }}</span>
+                <b>{{ step.entityWorkflow.createdAt|format_datetime('short', 'short') }}</b>
+            </li>
+        {% endif %}
+    </ul>
+{% endmacro %}
+
+{% macro popoverTitle(step) %}
+    {% if step.previous is not null and step.previous.freezeAfter == true %}
+        <i class="fa fa-snowflake-o fa-sm me-1" title="{{ 'workflow.Freezed'|trans }}"></i>
+    {% endif %}
+    {% if step.previous is not null %}
+        {% set transition = chill_workflow_transition_by_string(step.entityWorkflow, step.previous.transitionAfter) %}
+        {% set labels = workflow_metadata(step.entityWorkflow, 'label', transition) %}
+        {% set label = labels is null ? step.previous.transitionAfter : labels|localize_translatable_string %}
+        {{ label }}
+    {% endif %}
+{% endmacro %}
+
+{% macro breadcrumb(_ctx) %}
+    <div class="breadcrumb">
+        {% for step in _ctx.entity_workflow.stepsChained %}
+            {% set labels = workflow_metadata(_ctx.entity_workflow, 'label', step.currentStep) %}
+            {% set label = labels is null ? step.currentStep : labels|localize_translatable_string %}
+            {% set popTitle = _self.popoverTitle(step) %}
+            {% set popContent = _self.popoverContent(step) %}
+            <span class="mx-2"
+                tabindex="0"
+                data-bs-trigger="focus hover"
+                data-bs-toggle="popover"
+                data-bs-placement="bottom"
+                data-bs-custom-class="workflow-transition"
+                title="{{ popTitle|e('html_attr') }}"
+                data-bs-content="{{ popContent|e('html_attr') }}"
+                >
+                {% if step.currentStep == 'initial' %}
+                    <i class="fa fa-circle me-1 text-chill-yellow"></i>
+                {% endif %}
+                {% if step.previous is not null and step.previous.freezeAfter == true %}
+                    <i class="fa fa-snowflake-o fa-sm me-1" title="{{ 'workflow.Freezed'|trans }}"></i>
+                {% endif %}
+                {{ label }}
+            </span>
+            {% if not loop.last %}
+                →
+            {% endif %}
+        {% endfor %}
+    </div>
+{% endmacro %}
--- a/src/Bundle/ChillMainBundle/Resources/views/Workflow/workflow_notification_on_transition_completed_content.fr.txt.twig
+++ b/src/Bundle/ChillMainBundle/Resources/views/Workflow/workflow_notification_on_transition_completed_content.fr.txt.twig
@@ -0,0 +1,13 @@
+{{ dest.label }},
+
+Un suivi "{{ workflow.text }}" a atteint une nouvelle étape: {{ workflow.text }}
+{%- if is_dest %}
+
+Vous êtes invités à valider cette étape au plus tôt.
+{% endif %}
+
+Vous pouvez visualiser le workflow sur cette page:
+
+{{ absolute_url(path('chill_main_workflow_show', {'id': entity_workflow.id})) }}
+
+Cordialement,
--- a/src/Bundle/ChillMainBundle/Resources/views/Workflow/workflow_notification_on_transition_completed_title.fr.txt.twig
+++ b/src/Bundle/ChillMainBundle/Resources/views/Workflow/workflow_notification_on_transition_completed_title.fr.txt.twig
@@ -0,0 +1,5 @@
+{%- if is_dest -%}
+Un suivi {{ workflow.text }} demande votre attention
+{%- else -%}
+Un suivi {{ workflow.text }} a atteint une nouvelle étape: {{ place.text }}
+{%- endif -%}
--- a/src/Bundle/ChillMainBundle/Resources/views/layout.html.twig
+++ b/src/Bundle/ChillMainBundle/Resources/views/layout.html.twig
@@ -13,6 +13,7 @@
    {{ encore_entry_link_tags('mod_ckeditor5') }}
    {{ encore_entry_link_tags('chill') }}
    {{ encore_entry_link_tags('mod_blur') }}
+    {{ encore_entry_link_tags('vue_onthefly') }}
    {% block css %}<!-- nothing added to css -->{% endblock %}
 </head>

@@ -59,26 +60,26 @@
                {% endif %}

                {% block content %}
-                <div class="col-8 main_search">
-                    <h2>{{ 'Search'|trans }}</h2>
-
-                    <form action="{{ path('chill_main_search') }}" method="get">
-                        <input class="form-control form-control-lg" name="q" type="search" placeholder="{{ 'Search persons, ...'|trans }}" />
-                        <center>
-                            <button type="submit" class="btn btn-lg btn-warning mt-3">
-                                <i class="fa fa-fw fa-search"></i> {{ 'Search'|trans }}
-                            </button>
-                            <a class="btn btn-lg btn-misc mt-3" href="{{ path('chill_main_advanced_search_list') }}">
-                                <i class="fa fa-fw fa-search"></i> {{ 'Advanced search'|trans }}
-                            </a>
-                        </center>
-                    </form>
-                </div>
-                <div class="col-8">
-                    <a href="{{ path('chill_crud_aside_activity_new', {'type' : 7, 'duration' : '600', 'note' : 'Pas des remarques' }) }}"><div class="bloc btn btn-success btn-md btn-block">Appel téléphonique</div></a>
-                </div>
-
-                {{  chill_widget('homepage', {} ) }}
+                    <div class="col-8 main_search">
+                        <h2>{{ 'Search'|trans }}</h2>
+    
+                        <form action="{{ path('chill_main_search') }}" method="get">
+                            <input class="form-control form-control-lg" name="q" type="search" placeholder="{{ 'Search persons, ...'|trans }}" />
+                            <center>
+                                <button type="submit" class="btn btn-lg btn-warning mt-3">
+                                    <i class="fa fa-fw fa-search"></i> {{ 'Search'|trans }}
+                                </button>
+                                <a class="btn btn-lg btn-misc mt-3" href="{{ path('chill_main_advanced_search_list') }}">
+                                    <i class="fa fa-fw fa-search"></i> {{ 'Advanced search'|trans }}
+                                </a>
+                            </center>
+                        </form>
+                    </div>
+    
+                    {#  DISABLED {{  chill_widget('homepage', {} ) }} #}
+                    
+                    {% include '@ChillMain/Homepage/index.html.twig' %}
+                    
                {% endblock %}

            </div>
@@ -94,6 +95,7 @@
    {{ encore_entry_script_tags('mod_ckeditor5') }}
    {{ encore_entry_script_tags('mod_blur') }}
    {{ encore_entry_script_tags('chill') }}
+    {{ encore_entry_script_tags('vue_onthefly') }}

    <script type="text/javascript">
        window.addEventListener('DOMContentLoaded', function(e) {