diff --git a/apps/maarch_entreprise/Views/user-administration.component.html b/apps/maarch_entreprise/Views/user-administration.component.html
index c0cc2ee8386d2e1aaeb50b6ddfa46d1832ea68bd..1447e23b2375faca590669f5ab2213c1bc2d29a5 100755
--- a/apps/maarch_entreprise/Views/user-administration.component.html
+++ b/apps/maarch_entreprise/Views/user-administration.component.html
@@ -1,269 +1,171 @@
+<div class="page-header">
+    <h1 *ngIf="!userCreation">{{lang.userModification}} <small>{{user.lastname}} {{user.firstname}}</small></h1>
+    <h1 *ngIf="userCreation">{{lang.userCreation}} <small>{{user.lastname}} {{user.firstname}}</small></h1>
+</div>
 <div *ngIf="loading">
     <i class="fa fa-spinner fa-spin fa-5x" style="margin-left: 50%;margin-top: 16%;font-size: 8em"></i>
 </div>
 <div *ngIf="!loading" class="container-fluid">
-    <h1 *ngIf="userCreation" style="margin-top: 0">
-        <i class="fa fa-user fa-2x"></i> {{lang.userCreation}} {{user.userId}}
-    </h1>
-    <h1 *ngIf="!userCreation" style="margin-top: 0">
-        <i class="fa fa-user fa-2x"></i> {{lang.userModification}} : {{userId}}
-        <sup>
-            <span *ngIf="user.status == 'OK' && user.enabled == 'Y'" class="label label-primary">{{lang.active}}</span>
-            <span *ngIf="user.enabled == 'N'" class="label label-danger">{{lang.inactive}}</span>
-            <span *ngIf="user.status == 'ABS'" class="label label-warning">{{lang.abs}}</span>
-        </sup>
-    </h1>
-    <nav class="navbar navbar-default" id="toolBox">
-        <div class="container-fluid">
-            <div class="navbar-header">
-                <a routerLink="/administration/users" class="navbar-brand" style="cursor: pointer">
-                    <i class="fa fa-arrow-circle-left" title="{{lang.back}}"></i>
-                </a>
-            </div>
-            <div *ngIf="!userCreation" class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
-                <ul class="nav navbar-nav navbar-right userAdministrationClickable">
-                    <li>
-                        <a (click)="resetPassword()"><i class="fa fa-key"></i> {{lang.reinitPassword}}</a>
-                    </li>
-                    <li *ngIf="user.status == 'ABS'">
-                        <a (click)="deactivateAbsence()"><i class="fa fa-user"></i> {{lang.deactivateAbs}}</a>
-                    </li>
-                    <li *ngIf="user.status == 'OK'">
-                        <a data-toggle="modal" data-target="#manageAbs"><i class="fa fa-user-times"></i> {{lang.manageAbsences}}</a>
-                    </li>
-                    <li>
-                        <a data-toggle="modal" data-target="#manageSign"><i class="fa fa-vcard-o"></i> {{lang.manageSignatures}}</a>
-                    </li>
-                </ul>
-            </div>
-        </div>
-    </nav>
-    <div class="row row-eq-height">
-        <div class="col-md-4" [ngClass]="{'col-md-offset-4': userCreation}" style="border-left:solid 1px white;border-right:solid 1px white;background-color: #CEE9F1;border-top: solid 2px #FDD16C;border-bottom: solid 2px #FDD16C;padding:10px;">
-            <h2>{{lang.informations}}</h2>
-            <form class="form-horizontal" (ngSubmit)="onSubmit()" #profileForm="ngForm">
-                <div class="form-group">
-                    <div class="col-sm-12">
-                        <div class="input-group">
-                            <span class="input-group-addon"><i class="fa fa-user" aria-hidden="true"></i></span>
-                            <input *ngIf="userCreation" type="text" class="form-control" name="user_id" [(ngModel)]="user.userId" placeholder="{{lang.id}}" pattern="^[\w.@-]*$" required>
-                            <input *ngIf="!userCreation" type="text" class="form-control" title="{{lang.id}}" value="{{user.user_id}}" disabled>
-                        </div>
-                    </div>
-                </div>
-                <div class="form-group">
-                    <div class="col-sm-5" style="font-weight:bold;">
-                        <input type="text" class="form-control" id="lastname" name="lastname" title="{{lang.lastname}}" placeholder="{{lang.lastname}}" [(ngModel)]="user.lastname" required>
-                    </div>
-                    <div class="col-sm-5" style="font-weight:bold;">
-                        <input type="text" class="form-control" id="firstname" name="firstname" title="{{lang.firstname}}" placeholder="{{lang.firstname}}" [(ngModel)]="user.firstname" required>
-                    </div>
-                    <div class="col-sm-2" style="font-style:italic;">
-                        <input type="text" class="form-control" id="initials" name="initials" title="{{lang.initials}}" placeholder="{{lang.initials}}" [(ngModel)]="user.initials">
+    <div class="container-fluid">
+        <md-tab-group (selectChange)="initService()">
+            <md-tab label="Informations">    
+                <div *ngIf="user.status == 'ABS'" class="text-warning" style="position: absolute;opacity: 0.1;font-size: 120px;transform: rotate(324deg);-webkit-transform: rotate(324deg);margin-left: 35%;margin-top: 90px;">{{user.status}}</div>    
+                <div class="col-md-6 col-md-offset-3">
+                    <div class="example-sidenav-content">
+                        <form class="form-horizontal" (ngSubmit)="onSubmit()" #profileForm="ngForm">
+                            <div class="form-group">
+                                <div class="col-sm-12">
+                                    <div class="pull-left image">
+                                        <img src="img/maarch_box.png" class="img-circle avatar" alt="user profile image">
+                                    </div>
+                                    <div class="input-group">
+                                        <!--<span class="input-group-addon"><i class="fa fa-user" aria-hidden="true"></i></span>-->
+                                        <md-input-container>
+                                            <input mdInput *ngIf="userCreation" type="text" title="{{lang.id}}" name="user_id" [(ngModel)]="user.userId" placeholder="{{lang.id}}"
+                                                pattern="^[\w.@-]*$" required>
+
+                                            <input mdInput *ngIf="!userCreation" type="text" title="{{lang.id}}" value="{{user.user_id}}" placeholder="{{lang.id}}" disabled>
+                                        </md-input-container>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                <div class="col-sm-5" style="font-weight:bold;">
+                                    <md-input-container>
+                                        <input mdInput type="text" id="lastname" name="lastname" title="{{lang.lastname}}" placeholder="{{lang.lastname}}" [(ngModel)]="user.lastname"
+                                            required>
+                                    </md-input-container>
+                                </div>
+                                <div class="col-sm-5" style="font-weight:bold;">
+                                    <md-input-container>
+                                        <input mdInput type="text" id="firstname" name="firstname" title="{{lang.firstname}}" placeholder="{{lang.firstname}}" [(ngModel)]="user.firstname"
+                                            required>
+                                    </md-input-container>
+                                </div>
+                                <div class="col-sm-2" style="font-style:italic;">
+                                    <md-input-container>
+                                        <input mdInput type="text" id="initials" name="initials" title="{{lang.initials}}" placeholder="{{lang.initials}}" [(ngModel)]="user.initials">
+                                    </md-input-container>
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                <div class="col-sm-12">
+                                    <md-input-container>
+                                        <input mdInput type="tel" id="phone" name="phone" title="{{lang.phoneNumber}}" placeholder="{{lang.phoneNumber}}" [(ngModel)]="user.phone"
+                                            pattern="^(?:0|\+\d\d?\d?\s?)[1-9]([\.\-\s]?\d\d){4}([\.\-\s]?\d?\d?)$">
+                                    </md-input-container>
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                <div class="col-sm-12">
+                                    <md-input-container>
+                                        <input mdInput type="email" id="mail" name="mail" title="{{lang.email}}" placeholder="{{lang.email}}" [(ngModel)]="user.mail"
+                                            pattern="[^@\s]+@[^@\s]+">
+                                    </md-input-container>
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                <div class="col-sm-12">
+                                    <md-input-container>
+                                        <input mdInput type="text" id="fingerprint" name="fingerprint" title="{{lang.fingerprint}}" placeholder="{{lang.fingerprint}}"
+                                            [(ngModel)]="user.thumbprint">
+                                    </md-input-container>
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                <div style="text-align:center;">
+                                    <button *ngIf="userCreation" type="submit" class="btn btn-success" [disabled]="!profileForm.form.valid"><i class="fa fa-plus"></i> {{lang.save}}</button>
+                                    <button *ngIf="!userCreation" type="submit" class="btn btn-success" [disabled]="!profileForm.form.valid"><i class="fa fa-save"></i> {{lang.update}}</button>
+                                    <button *ngIf="user.status != 'ABS' && !userCreation" type="button" (click)="activateAbsence()" class="btn btn-warning"><i class="fa fa-plane"></i> {{lang.activateAbsence}}</button>
+                                    <button *ngIf="user.status == 'ABS' && !userCreation" type="button" (click)="desactivateAbsence()" class="btn btn-success"><i class="fa fa-check"></i> {{lang.desactivateAbsence}}</button>
+                                    <button type="button" *ngIf="!userCreation" (click)="resetPassword()" class="btn btn-default"><i class="fa fa-key"></i> {{lang.reinitPassword}}</button>
+                                </div>
+                            </div>
+                        </form>
                     </div>
                 </div>
-                <div class="form-group">
-                    <div class="col-sm-12">
-                        <div class="input-group">
-                            <span class="input-group-addon"><i class="fa fa-phone" aria-hidden="true"></i></span>
-                            <input type="tel" class="form-control" id="phone" name="phone" title="{{lang.phoneNumber}}" placeholder="{{lang.phoneNumber}}" [(ngModel)]="user.phone" pattern="^(?:0|\+\d\d?\d?\s?)[1-9]([\.\-\s]?\d\d){4}([\.\-\s]?\d?\d?)$">
-                        </div>
+            </md-tab>
+            <md-tab *ngIf="!userCreation" label="Groupe(s)">
+                <div class="col-md-6">
+                    <div class="groupList">
+                        <ul class="list-group col-md-12">
+                            <li class="list-group-item" *ngFor="let group of user.allGroups">
+                                <md-slide-toggle id="{{group.group_id}}" color="primary" [checked]="group.disabled == true" (change)="toggleGroup(group)">{{group.group_desc}}</md-slide-toggle>
+                            </li>
+                        </ul>
                     </div>
                 </div>
-                <div class="form-group">
-                    <div class="col-sm-12">
-                        <div class="input-group">
-                            <span class="input-group-addon"><i class="fa fa-envelope-o" aria-hidden="true"></i></span>
-                            <input type="email" class="form-control" id="mail" name="mail" title="{{lang.email}}"  placeholder="{{lang.email}}" [(ngModel)]="user.mail" pattern="[^@\s]+@[^@\s]+">
+                <div class="col-md-4 col-md-offset-1">
+                    <div class="panel" *ngFor="let userGroup of user.groups" [ngClass]="[userGroup.primary_group == 'Y' ? 'panel-primary' : 'panel-default']">
+                        <div class="panel-heading">
+                            {{userGroup.group_desc}} <i *ngIf="userGroup.primary_group != 'Y'" class="fa fa-asterisk" aria-hidden="true"></i>
                         </div>
+                        <div class="panel-body">
+                            <md-input-container>
+                                <input mdInput type="text" id="role" name="role" title="{{lang.role}}" placeholder="{{lang.role}}" [(ngModel)]="userGroup.role"
+                                    (focusout)="updateGroup(userGroup)">
+                            </md-input-container>
+                            <div class="col-md-12">
+                                <ul class="list-unstyled">
+                                    <li *ngFor="let basket of user.baskets; let i = index">
+                                        <span *ngIf="basket.group_id == userGroup.group_id">
+                                            <md-slide-toggle [(ngModel)]="basket.enabled" color="primary">{{basket.basket_name}} <small class="text-danger" style="font-style:italic;" *ngIf="basket.userToDisplay != '' && basket.enabled">(Redirigé à {{basket.userToDisplay}})</small></md-slide-toggle>
+                                            <i (click)="toogleRedirect(basket)" *ngIf="basket.userToDisplay == '' && basket.enabled" mdTooltip="Rediriger la banette à une personne lors de l'activation de l'absence" mdTooltipPosition="above"
+                                                class="fa fa-share-square text-primary" style="cursor:pointer;"></i>
+                                            <sup><i style="cursor:pointer;" *ngIf="basket.userToDisplay != '' && basket.enabled" mdTooltip="Supprimer la redirection" class="fa fa-times text-danger" aria-hidden="true" (click)="delBasketRedirection(i)"></i></sup>
+                                            <div *ngIf="basket.userToDisplay == '' && basket.enabled" id="redirectUser_{{basket.group_id}}_{{basket.basket_id}}" class="form-group typeahead__container" style="display:none;">
+                                                <div class="typeahead__field">
+                                                    <input id="absenceUser_{{basket.group_id}}_{{basket.basket_id}}" type="text" class="form-control" placeholder="{{lang.user}}" autocomplete="off" (change)="addBasketRedirection(i,basket)">
+                                                </div>
+                                            </div>
+                                        </span>
 
-                    </div>
-                </div>
-                <div class="form-group">
-                    <div class="col-sm-12">
-                        <div class="input-group">
-                            <span class="input-group-addon"><i class="fa fa-paw" aria-hidden="true"></i></span>
-                            <input type="text" class="form-control" id="fingerprint" name="fingerprint" title="{{lang.fingerprint}}" placeholder="{{lang.fingerprint}}" [(ngModel)]="user.thumbprint">
+                                    </li>
+                                </ul>
+                            </div>
+                        </div>
+                        <div class="panel-footer">
+                            <md-input-container>
+                                <input value="{{userGroup.maarch_comment}}" mdInput type="text" title="{{lang.perimeter}}" placeholder="Ressource documentaire"
+                                    disabled>
+                            </md-input-container>
                         </div>
                     </div>
                 </div>
-                <div class="form-group">
-                    <div style="text-align:center;">
-                        <button type="submit" class="btn btn-success" [disabled]="!profileForm.form.valid">{{lang.save}}</button>
-                    </div>
-                </div>
-            </form>
-        </div>
-        <div *ngIf="!userCreation" class="col-md-3 col-md-offset-1" style="border-left:solid 1px white;border-right:solid 1px white;background-color: #CEE9F1;border-top: solid 2px #FDD16C;border-bottom: solid 2px #FDD16C;padding:10px;">
-            <h2>{{lang.groups}} <i class="fa fa-plus pull-right" data-toggle="modal" data-target="#addGroupModal" style="cursor:pointer;" aria-hidden="true" title="Ajouter un groupe"></i></h2>
-            <div *ngFor="let group of user.groups" class="col-sm-12 form-group">
-                <div class="input-group">
-                    <div class="input-group-btn">
-                        <button type="button" style="color:white;" class="btn btn-default dropdown-toggle label-primary" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{group.group_desc}} <span class="caret"></span></button>
-                        <ul class="dropdown-menu userAdministrationClickable">
-                            <li><a (click)="updateGroup(group)">{{lang.save}}</a></li>
-                            <li role="separator" class="divider"></li>
-                            <li><a (click)="deleteGroup(group)">{{lang.delete}}</a></li>
-                        </ul>
-                    </div>
-                    <input type="text" class="form-control" aria-describedby="group_desc" placeholder="{{lang.role}}" [(ngModel)]="group.role">
-                </div>
-            </div>
-            <div *ngIf="user.groups.length == 0" class="col-sm-12 form-group">
-                L'utilisateur n'appartient à aucun groupe.
-            </div>
-        </div>
-        <div *ngIf="!userCreation" class="col-md-3 col-md-offset-1" style="border-left:solid 1px white;border-right:solid 1px white;background-color: #CEE9F1;border-top: solid 2px #FDD16C;border-bottom: solid 2px #FDD16C;padding:10px;">
-            <h2>{{lang.entities}} <i class="fa fa-plus pull-right" data-toggle="modal" data-target="#addEntityModal" style="cursor:pointer;" aria-hidden="true" title="Ajouter une entité"></i></h2>
-            <div *ngFor="let entity of user.entities" class="col-sm-12 form-group">
-                <div class="input-group">
-                    <div class="input-group-btn">
-                        <button *ngIf="entity.primary_entity == 'Y'" type="button" style="color:white;" class="btn btn-default dropdown-toggle label-primary" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" [title]="entity.entity_label">{{entity.entity_id}} <span class="caret"></span></button>
-                        <button *ngIf="entity.primary_entity == 'N'" type="button" style="background-color:#eee;" class="btn btn-default dropdown-toggle label-default" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" [title]="entity.entity_label">{{entity.entity_id}} <span class="caret"></span></button>
-                        <ul class="dropdown-menu userAdministrationClickable">
-                            <li *ngIf="entity.primary_entity == 'N'"><a (click)="updatePrimaryEntity(entity)">Passer en entité primaire</a></li>
-                            <li><a (click)="updateEntity(entity)">{{lang.save}}</a></li>
-                            <li role="separator" class="divider"></li>
-                            <li><a (click)="deleteEntity(entity)">{{lang.delete}}</a></li>
-                        </ul>
-                    </div>
-                    <input type="text" class="form-control" aria-describedby="group_desc" placeholder="{{lang.role}}" [(ngModel)]="entity.user_role">
+            </md-tab>
+            <md-tab *ngIf="!userCreation" label="Entité(s)">
+                <div class="col-md-6">
+                    <div id="jstree"></div>
                 </div>
-            </div>
-            <div *ngIf="user.entities.length == 0" class="col-sm-12 form-group">
-                L'utilisateur n'appartient à aucune entité.
-            </div>
-        </div>
-    </div>
-</div>
-
-<!-- ADD GROUP -->
-<div class="modal fade" id="addGroupModal" tabindex="-1" role="dialog" aria-labelledby="addGroupModalLabel">
-    <div class="modal-dialog" role="document">
-        <div class="modal-content">
-            <div class="modal-header">
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-                <h4 class="modal-title" id="addGroupModalLabel">Ajouter un groupe</h4>
-            </div>
-            <div class="modal-body">
-                <form class="form-horizontal">
-                    <div class="form-group">
-                        <div class="col-sm-6">
-                            <select id="groupsSelect" class="form-control">
-                                <option>{{lang.chooseGroup}}</option>
-                                <option *ngFor="let group of user.allGroups" [disabled]="group.disabled">{{group.group_desc}}</option>
-                            </select>
+                <div class="col-md-4 col-md-offset-1">
+                    <div class="panel" *ngFor="let userEntity of user.entities" [ngClass]="[userEntity.primary_entity == 'Y' ? 'panel-primary' : 'panel-default']">
+                        <div class="panel-heading">
+                            {{userEntity.entity_label}} <i mdTooltip="Passer en entité primaire" *ngIf="userEntity.primary_entity != 'Y'"
+                                (click)="updatePrimaryEntity(userEntity)" class="fa fa-asterisk text-primary pull-right" style="cursor:pointer;"></i>
                         </div>
-                        <div class="col-sm-6">
-                            <input id="groupRole" class="form-control" placeholder="{{lang.role}}" type="text">
+                        <div class="panel-body">
+                            <md-input-container>
+                                <input mdInput type="text" id="role" name="role" title="{{lang.role}}" placeholder="{{lang.role}}" [(ngModel)]="userEntity.user_role"
+                                    (focusout)="updateEntity(userEntity)">
+                            </md-input-container>
                         </div>
                     </div>
-                </form>
-            </div>
-            <div class="modal-footer">
-                <button (click)="addGroup()" type="button" class="btn btn-success">{{lang.validate}}</button>
-            </div>
-        </div>
-    </div>
-</div>
-
-<!-- ADD ENTITY -->
-<div class="modal fade" id="addEntityModal" tabindex="-1" role="dialog" aria-labelledby="addEntityModalLabel">
-    <div class="modal-dialog" role="document">
-        <div class="modal-content">
-            <div class="modal-header">
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-                <h4 class="modal-title" id="addEntityModalLabel">Ajouter une entité</h4>
-            </div>
-            <div class="modal-body">
-                <form class="form-horizontal">
+                </div>
+            </md-tab>
+            <md-tab *ngIf="!userCreation" label="Signature(s)">
+                <div class="col-md-6 col-md-offset-3">
                     <div class="form-group">
-                        <div class="col-sm-6">
-                            <select id="entitiesSelect" class="form-control">
-                                <option>Choisissez une entité</option>
-                                <option *ngFor="let entity of user.allEntities" [disabled]="entity.disabled">{{entity.entity_label}}</option>
-                            </select>
-                        </div>
-                        <div class="col-sm-6">
-                            <input class="form-control" id="entityRole" placeholder="Rôle" type="text">
-                        </div>
+                        <button (click)="clickOnUploader('uploadSignFile')" mdTooltip="taille de 2 mo maximum" class="form-control btn btn-sm btn-success"
+                            style="width:auto;">
+                                <i class="fa fa-plus"></i> Ajouter une signature
+                            </button>
                     </div>
-                </form>
-            </div>
-            <div class="modal-footer">
-                <button (click)="addEntity()" type="button" class="btn btn-success" >{{lang.validate}}</button>
-            </div>
-        </div>
-    </div>
-</div>
-
-<div id="manageAbs" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
-    <div class="modal-dialog modal-lg" role="document">
-        <div class="modal-content">
-            <div class="modal-header">
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-                <h4 class="modal-title" id="myModalLabel">{{lang.manageAbsences}}</h4>
-            </div>
-            <div class="modal-body">
-                <nav class="navbar navbar-default">
-                    <div class="container-fluid">
-                        <form class="navbar-form navbar-left">
-                            <div class="form-group">
-                                <select id="selectBasketAbsenceUser" class="form-control">
-                                    <option>{{lang.chooseBasket}}</option>
-                                    <option *ngFor="let basket of user.baskets" [disabled]="basket.disabled">
-                                        {{basket.basket_name}}
-                                        <span *ngIf="basket.group_id">({{basket.group_id}})</span>
-                                        <span *ngIf="basket.userToDisplay">({{basket.userToDisplay}})</span>
-                                    </option>
-                                </select>
-                                <span>&nbsp;{{lang.to}}&nbsp;</span>
-                            </div>
-                            <div class="form-group typeahead__container">
-                                <div class="typeahead__field">
-                                    <input id="absenceUser" type="text" class="form-control" placeholder="{{lang.user}}" autocomplete="off">
-                                </div>
-                            </div>
-                        </form>
-                        <ul class="nav navbar-nav navbar-right" (click)="addBasketRedirection()" style="cursor: pointer">
-                            <li><a title="{{lang.save}}"><i class="fa fa-plus"></i></a></li>
-                        </ul>
-                    </div>
-                </nav>
-                <ul class="list-group">
-                    <li class="list-group-item" *ngFor="let uam of userAbsenceModel; let i = index">
-                        <i class="fa fa-tasks" title="{{uam.basketId}}"></i> {{uam.basketName}}
-                        <span class="pull-right">
-                            <span class="label label-primary">{{uam.newUser}}</span>
-                            <a (click)="delBasketRedirection(i)" style="cursor: pointer" title="{{lang.delete}}"><i class="fa fa-trash" style="color:red;"></i></a>
-                        </span>
-                    </li>
-                </ul>
-            </div>
-            <div class="modal-footer">
-                <button type="button" (click)="activateAbsence()" class="btn btn-default">{{lang.activateAbsence}}</button>
-            </div>
-        </div>
-    </div>
-</div>
-
-<div id="manageSign" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
-    <div class="modal-dialog modal-lg" role="document">
-        <div class="modal-content">
-            <div class="modal-header">
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-                <h4 class="modal-title">{{lang.manageSignatures}}</h4>
-            </div>
-            <div class="modal-body">
-                <ul class="nav nav-tabs" role="tablist">
-                    <li role="presentation" class="active"><a href="#signatureBookSign" aria-controls="signatureBookSign" role="tab" data-toggle="tab">{{lang.sbSignatures}}</a></li>
-                </ul>
-                <div class="tab-content">
-                    <div role="tabpanel" class="tab-pane active" id="signatureBookSign">
-                        <div class="row" style="margin-top:5px;">
+                    <div class="form-group">
+                        <div class="row" style="margin-top:5px;display:none;">
                             <form (ngSubmit)="submitSignature()" #signatureForm="ngForm">
                                 <div class="col-md-11">
-                                    <input type="text" [(ngModel)]="signatureModel.label" id="signLabel" name="label" placeholder="{{lang.label}}" class="form-control" required>
+                                    <input type="text" [(ngModel)]="signatureModel.label" id="signLabel" name="label" placeholder="{{lang.label}}" class="form-control"
+                                        required>
                                     <div class="form-inline hide">
                                         <div class="form-group">
                                             <input type="file" name="files[]" id="uploadSignFile" (change)="uploadSignatureTrigger($event)" accept="image/*">
@@ -272,50 +174,43 @@
                                 </div>
                                 <div class="col-md-1" style="margin-bottom:5px;">
                                     <button class="form-control btn btn-sm btn-success" type="submit" [disabled]="!signatureForm.form.valid || !signatureModel.size">
-                                        <i class="fa fa-plus"></i>
-                                    </button>
+                                                    <i class="fa fa-plus"></i>
+                                                </button>
                                 </div>
                                 <div [ngClass]="[signatureModel.size != '' ? 'col-md-10' : 'col-md-12']">
                                     <div class="upload-drop-zone" (click)="clickOnUploader('uploadSignFile')" style="cursor:pointer">
-                                        {{lang.clickOn}} <i class="fa fa-upload fa-2x"></i>
-                                        (< 2MB)
+                                        {{lang.clickOn}} <i class="fa fa-upload fa-2x"></i> (
+                                        < 2MB) </div>
                                     </div>
-                                </div>
-                                <div class="col-md-2" *ngIf="signatureModel.size">
-                                    <img  id="signaturePreview" src="{{signatureModel.base64ForJs}}" alt="Invalid image" style="width: 100%;">
-                                </div>
-                            </form>
-                        </div>
-                        <div class="row" id="signList">
-                            <div *ngFor="let signature of user.signatures; let i = index" class="col-md-3">
-                                <div class="thumbnail">
-                                    <img src="{{signature.pathToSignatureOnTmp}}" alt="Signature" style="width:auto;height:60px;">
-                                    <div class="caption" style="margin-bottom:0px;">
-                                        <div *ngIf="selectedSignature != i">
-                                            <p title="{{signature.signature_label}}" style="text-overflow: ellipsis;">{{signature.signature_label}}</p>
-                                            <a (click)="displaySignatureEditionForm(i)" class="btn btn-success" role="button" title="{{lang.update}}">
-                                                <i class="fa fa-edit"></i>
-                                            </a>
-                                            <a (click)="deleteSignature(signature.id)" class="btn btn-danger" role="button" title="{{lang.delete}}">
-                                                <i class="fa fa-trash"></i>
-                                            </a>
-                                        </div>
-                                        <div *ngIf="selectedSignature == i">
-                                            <input type="text" [(ngModel)]="selectedSignatureLabel" name="selectedSignatureLabel" placeholder="{{lang.label}}" class="form-control" style="margin-bottom: 10px; font-size: 12px;height:28px">
-                                            <button (click)="updateSignature()" type="button" class="btn btn-success" [disabled]="!selectedSignatureLabel" title="{{lang.update}}">
-                                                <i class="fa fa-check"></i>
-                                            </button>
-                                            <button (click)="selectedSignature = -1" type="button" class="btn btn-warning" title="{{lang.cancel}}">
-                                                <i class="fa fa-times"></i>
-                                            </button>
-                                        </div>
+                                    <div class="col-md-2" *ngIf="signatureModel.size">
+                                        <img id="signaturePreview" src="{{signatureModel.base64ForJs}}" alt="Invalid image" style="width: 100%;">
                                     </div>
+                            </form>
+                            </div>
+                            <div id="signList">
+                                <div *ngFor="let signature of user.signatures; let i = index" class="col-md-4" style="margin-bottom:10px;">
+                                    <md-card>
+                                        <md-card-header>
+                                            <md-card-title>
+                                                <md-input-container>
+                                                    <input mdInput type="text" [(ngModel)]="signature.signature_label" name="selectedSignatureLabel" placeholder="{{lang.label}}"
+                                                        (focusout)="updateSignature(i)">
+                                                </md-input-container>
+                                            </md-card-title>
+                                            <i class="fa fa-times text-danger" style="cursor:pointer;" (click)="deleteSignature(signature.id)"></i>
+                                        </md-card-header>
+
+
+                                        <md-card-content>
+                                            <img src="{{signature.pathToSignatureOnTmp}}" alt="Signature" style="width:100%;height:60px;">
+                                        </md-card-content>
+                                    </md-card>
                                 </div>
+                                <div class="clearfix"></div>
                             </div>
                         </div>
                     </div>
-                </div>
-            </div>
+            </md-tab>
+        </md-tab-group>
         </div>
-    </div>
-</div>
+    </div>
\ No newline at end of file
diff --git a/apps/maarch_entreprise/css/jstree-custom.min.css b/apps/maarch_entreprise/css/jstree-custom.min.css
new file mode 100644
index 0000000000000000000000000000000000000000..89b68099e7cdf9daa024d9cc198ab7114227ea37
--- /dev/null
+++ b/apps/maarch_entreprise/css/jstree-custom.min.css
@@ -0,0 +1 @@
+.jstree-node,.jstree-children,.jstree-container-ul{display:block;margin:0;padding:0;list-style-type:none;list-style-image:none}.jstree-node{white-space:nowrap}.jstree-anchor{display:inline-block;color:#333;white-space:nowrap;padding:0 4px 0 1px;margin:0;vertical-align:top}.jstree-anchor:focus{outline:0}.jstree-anchor,.jstree-anchor:link,.jstree-anchor:visited,.jstree-anchor:hover,.jstree-anchor:active{text-decoration:none;color:inherit}.jstree-icon{display:inline-block;text-decoration:none;margin:0;padding:0;vertical-align:top;text-align:center}.jstree-icon:empty{display:inline-block;text-decoration:none;margin:0;padding:0;vertical-align:top;text-align:center}.jstree-ocl{cursor:pointer}.jstree-leaf>.jstree-ocl{cursor:default}.jstree .jstree-open>.jstree-children{display:block}.jstree .jstree-closed>.jstree-children,.jstree .jstree-leaf>.jstree-children{display:none}.jstree-anchor>.jstree-themeicon{margin-right:2px}.jstree-no-icons .jstree-themeicon,.jstree-anchor>.jstree-themeicon-hidden{display:none}.jstree-rtl .jstree-anchor{padding:0 1px 0 4px}.jstree-rtl .jstree-anchor>.jstree-themeicon{margin-left:2px;margin-right:0}.jstree-rtl .jstree-node{margin-left:0}.jstree-rtl .jstree-container-ul>.jstree-node{margin-right:0}.jstree-wholerow-ul{position:relative;display:inline-block;min-width:100%}.jstree-wholerow-ul .jstree-leaf>.jstree-ocl{cursor:pointer}.jstree-wholerow-ul .jstree-anchor,.jstree-wholerow-ul .jstree-icon{position:relative}.jstree-wholerow-ul .jstree-wholerow{width:100%;cursor:pointer;position:absolute;left:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vakata-context{display:none}.vakata-context,.vakata-context ul{margin:0;padding:2px;position:absolute;background:#f5f5f5;border:1px solid #979797;-moz-box-shadow:5px 5px 4px -4px #666;-webkit-box-shadow:2px 2px 2px #999;box-shadow:2px 2px 2px #999}.vakata-context ul{list-style:none;left:100%;margin-top:-2.7em;margin-left:-4px}.vakata-context .vakata-context-right ul{left:auto;right:100%;margin-left:auto;margin-right:-4px}.vakata-context li{list-style:none;display:inline}.vakata-context li>a{display:block;padding:0 2em;text-decoration:none;width:auto;color:#000;white-space:nowrap;line-height:2.4em;-moz-text-shadow:1px 1px 0 #fff;-webkit-text-shadow:1px 1px 0 #fff;text-shadow:1px 1px 0 #fff;-moz-border-radius:1px;-webkit-border-radius:1px;border-radius:1px}.vakata-context li>a:hover{position:relative;background-color:#e8eff7;-moz-box-shadow:0 0 2px #0a6aa1;-webkit-box-shadow:0 0 2px #0a6aa1;box-shadow:0 0 2px #0a6aa1}.vakata-context li>a.vakata-context-parent{background-image:url(data:image/gif;base64,R0lGODlhCwAHAIAAACgoKP///yH5BAEAAAEALAAAAAALAAcAAAIORI4JlrqN1oMSnmmZDQUAOw==);background-position:right center;background-repeat:no-repeat}.vakata-context li>a:focus{outline:0}.vakata-context .vakata-context-hover>a{position:relative;background-color:#e8eff7;-moz-box-shadow:0 0 2px #0a6aa1;-webkit-box-shadow:0 0 2px #0a6aa1;box-shadow:0 0 2px #0a6aa1}.vakata-context .vakata-context-separator>a,.vakata-context .vakata-context-separator>a:hover{background:#fff;border:0;border-top:1px solid #e2e3e3;height:1px;min-height:1px;max-height:1px;padding:0;margin:0 0 0 2.4em;border-left:1px solid #e0e0e0;-moz-text-shadow:0 0 0 transparent;-webkit-text-shadow:0 0 0 transparent;text-shadow:0 0 0 transparent;-moz-box-shadow:0 0 0 transparent;-webkit-box-shadow:0 0 0 transparent;box-shadow:0 0 0 transparent;-moz-border-radius:0;-webkit-border-radius:0;border-radius:0}.vakata-context .vakata-contextmenu-disabled a,.vakata-context .vakata-contextmenu-disabled a:hover{color:silver;background-color:transparent;border:0;box-shadow:0 0 0}.vakata-context li>a>i{text-decoration:none;display:inline-block;width:2.4em;height:2.4em;background:0 0;margin:0 0 0 -2em;vertical-align:top;text-align:center;line-height:2.4em}.vakata-context li>a>i:empty{width:2.4em;line-height:2.4em}.vakata-context li>a .vakata-contextmenu-sep{display:inline-block;width:1px;height:2.4em;background:#fff;margin:0 .5em 0 0;border-left:1px solid #e2e3e3}.vakata-context .vakata-contextmenu-shortcut{font-size:.8em;color:silver;opacity:.5;display:none}.vakata-context-rtl ul{left:auto;right:100%;margin-left:auto;margin-right:-4px}.vakata-context-rtl li>a.vakata-context-parent{background-image:url(data:image/gif;base64,R0lGODlhCwAHAIAAACgoKP///yH5BAEAAAEALAAAAAALAAcAAAINjI+AC7rWHIsPtmoxLAA7);background-position:left center;background-repeat:no-repeat}.vakata-context-rtl .vakata-context-separator>a{margin:0 2.4em 0 0;border-left:0;border-right:1px solid #e2e3e3}.vakata-context-rtl .vakata-context-left ul{right:auto;left:100%;margin-left:-4px;margin-right:auto}.vakata-context-rtl li>a>i{margin:0 -2em 0 0}.vakata-context-rtl li>a .vakata-contextmenu-sep{margin:0 0 0 .5em;border-left-color:#fff;background:#e2e3e3}#jstree-marker{position:absolute;top:0;left:0;margin:-5px 0 0 0;padding:0;border-right:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid;width:0;height:0;font-size:0;line-height:0}#jstree-dnd{line-height:16px;margin:0;padding:4px}#jstree-dnd .jstree-icon,#jstree-dnd .jstree-copy{display:inline-block;text-decoration:none;margin:0 2px 0 0;padding:0;width:16px;height:16px}#jstree-dnd .jstree-ok{background:green}#jstree-dnd .jstree-er{background:red}#jstree-dnd .jstree-copy{margin:0 2px}.jstree-proton .jstree-node,.jstree-proton .jstree-icon{background-repeat:no-repeat;background-color:transparent}.jstree-proton .jstree-anchor,.jstree-proton .jstree-wholerow{transition:background-color .15s,box-shadow .15s,color .15s}.jstree-proton .jstree-hovered{background:#76b6ec;color:#fff;border-radius:3px;box-shadow:inset 0 0 1px #76b6ec}.jstree-proton .jstree-clicked{background:#3392e3;color:#fff;border-radius:3px;box-shadow:inset 0 0 1px #3392e3}.jstree-proton .jstree-no-icons .jstree-anchor>.jstree-themeicon{display:none}.jstree-proton .jstree-disabled{background:0 0;color:#666}.jstree-proton .jstree-disabled.jstree-hovered{background:0 0;box-shadow:none}.jstree-proton .jstree-disabled.jstree-clicked{background:#efefef}.jstree-proton .jstree-disabled>.jstree-icon{opacity:.8;filter:url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'jstree-grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#jstree-grayscale");-webkit-filter:grayscale(100%)}.jstree-proton .jstree-search{font-style:italic;color:#8b0000;font-weight:700}.jstree-proton .jstree-no-checkboxes .jstree-checkbox{display:none!important}.jstree-proton.jstree-checkbox-no-clicked .jstree-clicked{background:0 0;color:inherit;box-shadow:none}.jstree-proton.jstree-checkbox-no-clicked .jstree-clicked.jstree-hovered{background:#76b6ec;color:#fff}.jstree-proton.jstree-checkbox-no-clicked>.jstree-wholerow-ul .jstree-wholerow-clicked{background:0 0;color:inherit}.jstree-proton.jstree-checkbox-no-clicked>.jstree-wholerow-ul .jstree-wholerow-clicked.jstree-wholerow-hovered{background:#76b6ec;color:#fff}.jstree-proton>.jstree-striped{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAMAAAB/qqA+AAAABlBMVEUAAAAAAAClZ7nPAAAAAnRSTlMNAMM9s3UAAAAXSURBVHjajcEBAQAAAIKg/H/aCQZ70AUBjAATb6YPDgAAAABJRU5ErkJggg==) left top repeat}.jstree-proton>.jstree-wholerow-ul .jstree-hovered,.jstree-proton>.jstree-wholerow-ul .jstree-clicked{background:0 0;box-shadow:none;border-radius:0}.jstree-proton .jstree-wholerow{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}.jstree-proton .jstree-wholerow-hovered{background:#76b6ec}.jstree-proton .jstree-wholerow-clicked{background:#3392e3;background:-moz-linear-gradient(top,#3392e3 0,#3392e3 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#3392e3),color-stop(100%,#3392e3));background:-webkit-linear-gradient(top,#3392e3 0,#3392e3 100%);background:-o-linear-gradient(top,#3392e3 0,#3392e3 100%);background:-ms-linear-gradient(top,#3392e3 0,#3392e3 100%);background:linear-gradient(to bottom,#3392e3 0,#3392e3 100%)}.jstree-proton .jstree-node{min-height:22px;line-height:22px;margin-left:22px;min-width:22px}.jstree-proton .jstree-anchor{line-height:22px;margin:1px 0 2px;height:22px}.jstree-proton .jstree-icon{width:22px;height:22px;line-height:22px}.jstree-proton .jstree-icon:empty{width:22px;height:22px;line-height:22px}.jstree-proton.jstree-rtl .jstree-node{margin-right:22px}.jstree-proton .jstree-wholerow{height:22px}.jstree-proton .jstree-node,.jstree-proton .jstree-icon{background-size:320px 96px;background-image:url(../../node_modules/jstree-bootstrap-theme/dist/themes/proton/32px.png)}.jstree-proton .jstree-node{background-position:-293px -5px;background-repeat:repeat-y}.jstree-proton .jstree-last{background:0 0}.jstree-proton .jstree-open>.jstree-ocl{background-position:-133px -5px}.jstree-proton .jstree-closed>.jstree-ocl{background-position:-101px -5px}.jstree-proton .jstree-leaf>.jstree-ocl{background-position:-69px -5px}.jstree-proton .jstree-themeicon{background-position:-261px -7px}.jstree-proton>.jstree-no-dots .jstree-node,.jstree-proton>.jstree-no-dots .jstree-leaf>.jstree-ocl{background:0 0}.jstree-proton>.jstree-no-dots .jstree-open>.jstree-ocl{background-position:-37px -5px}.jstree-proton>.jstree-no-dots .jstree-closed>.jstree-ocl{background-position:-5px -5px}.jstree-proton .jstree-disabled{background:0 0}.jstree-proton .jstree-disabled.jstree-hovered{background:0 0}.jstree-proton .jstree-disabled.jstree-clicked{background:#efefef}.jstree-proton .jstree-checkbox{background-position:-165px -5px}.jstree-proton .jstree-checkbox:hover{background-position:-165px -37px}.jstree-proton.jstree-checkbox-selection .jstree-clicked>.jstree-checkbox,.jstree-proton .jstree-checked>.jstree-checkbox{background-position:-229px -5px}.jstree-proton.jstree-checkbox-selection .jstree-clicked>.jstree-checkbox:hover,.jstree-proton .jstree-checked>.jstree-checkbox:hover{background-position:-229px -37px}.jstree-proton .jstree-anchor>.jstree-undetermined{background-position:-197px -5px}.jstree-proton .jstree-anchor>.jstree-undetermined:hover{background-position:-197px -37px}.jstree-proton>.jstree-striped{background-size:auto 44px}.jstree-proton.jstree-rtl .jstree-node{background-size:320px 96px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAACAQMAAAB49I5GAAAABlBMVEUAAAAdHRvEkCwcAAAAAXRSTlMAQObYZgAAAAxJREFUCNdjAAMOBgAAGAAJMwQHdQAAAABJRU5ErkJggg==);background-position:100% 1px;background-repeat:repeat-y}.jstree-proton.jstree-rtl .jstree-last{background:0 0}.jstree-proton.jstree-rtl .jstree-open>.jstree-ocl{background-position:-133px -37px}.jstree-proton.jstree-rtl .jstree-closed>.jstree-ocl{background-position:-101px -37px}.jstree-proton.jstree-rtl .jstree-leaf>.jstree-ocl{background-position:-69px -37px}.jstree-proton.jstree-rtl>.jstree-no-dots .jstree-node,.jstree-proton.jstree-rtl>.jstree-no-dots .jstree-leaf>.jstree-ocl{background:0 0}.jstree-proton.jstree-rtl>.jstree-no-dots .jstree-open>.jstree-ocl{background-position:-37px -37px}.jstree-proton.jstree-rtl>.jstree-no-dots .jstree-closed>.jstree-ocl{background-position:-5px -37px}.jstree-proton .jstree-themeicon-custom{background-color:transparent;background-size:320px 96px;background-image:none;background-position:0 0}.jstree-proton>.jstree-container-ul .jstree-loading>.jstree-ocl{background:url(../../node_modules/jstree-bootstrap-theme/dist/themes/proton/throbber.gif) center center no-repeat}.jstree-proton .jstree-file{background:url(../../node_modules/jstree-bootstrap-theme/dist/themes/proton/32px.png) -101px -69px no-repeat}.jstree-proton .jstree-folder{background:url(../../node_modules/jstree-bootstrap-theme/dist/themes/proton/32px.png) -261px -5px no-repeat}.jstree-proton>.jstree-container-ul>.jstree-node{margin-left:0;margin-right:0}#jstree-dnd.jstree-proton{line-height:22px;padding:0 4px}#jstree-dnd.jstree-proton .jstree-ok,#jstree-dnd.jstree-proton .jstree-er{background-size:320px 96px;background-image:url(../../node_modules/jstree-bootstrap-theme/dist/themes/proton/32px.png);background-repeat:no-repeat;background-color:transparent}#jstree-dnd.jstree-proton i{background:0 0;width:22px;height:22px;line-height:22px}#jstree-dnd.jstree-proton .jstree-ok{background-position:-5px -69px}#jstree-dnd.jstree-proton .jstree-er{background-position:-37px -69px}.jstree-proton.jstree-rtl .jstree-node{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAACAQMAAAB49I5GAAAABlBMVEUAAAAdHRvEkCwcAAAAAXRSTlMAQObYZgAAAAxJREFUCNdjAAMOBgAAGAAJMwQHdQAAAABJRU5ErkJggg==)}.jstree-proton.jstree-rtl .jstree-last{background:0 0}.jstree-proton-small .jstree-node{min-height:18px;line-height:18px;margin-left:18px;min-width:18px}.jstree-proton-small .jstree-anchor{line-height:18px;margin:1px 0 2px;height:18px}.jstree-proton-small .jstree-icon{width:18px;height:18px;line-height:18px}.jstree-proton-small .jstree-icon:empty{width:18px;height:18px;line-height:18px}.jstree-proton-small.jstree-rtl .jstree-node{margin-right:18px}.jstree-proton-small .jstree-wholerow{height:18px}.jstree-proton-small .jstree-node,.jstree-proton-small .jstree-icon{background-size:320px 96px;background-image:url(../../node_modules/jstree-bootstrap-theme/dist/themes/proton/32px.png)}.jstree-proton-small .jstree-node{background-position:-295px -7px;background-repeat:repeat-y}.jstree-proton-small .jstree-last{background:0 0}.jstree-proton-small .jstree-open>.jstree-ocl{background-position:-135px -7px}.jstree-proton-small .jstree-closed>.jstree-ocl{background-position:-103px -7px}.jstree-proton-small .jstree-leaf>.jstree-ocl{background-position:-71px -7px}.jstree-proton-small .jstree-themeicon{background-position:-263px -9px}.jstree-proton-small>.jstree-no-dots .jstree-node,.jstree-proton-small>.jstree-no-dots .jstree-leaf>.jstree-ocl{background:0 0}.jstree-proton-small>.jstree-no-dots .jstree-open>.jstree-ocl{background-position:-39px -7px}.jstree-proton-small>.jstree-no-dots .jstree-closed>.jstree-ocl{background-position:-7px -7px}.jstree-proton-small .jstree-disabled{background:0 0}.jstree-proton-small .jstree-disabled.jstree-hovered{background:0 0}.jstree-proton-small .jstree-disabled.jstree-clicked{background:#efefef}.jstree-proton-small .jstree-checkbox{background-position:-167px -7px}.jstree-proton-small .jstree-checkbox:hover{background-position:-167px -39px}.jstree-proton-small.jstree-checkbox-selection .jstree-clicked>.jstree-checkbox,.jstree-proton-small .jstree-checked>.jstree-checkbox{background-position:-231px -7px}.jstree-proton-small.jstree-checkbox-selection .jstree-clicked>.jstree-checkbox:hover,.jstree-proton-small .jstree-checked>.jstree-checkbox:hover{background-position:-231px -39px}.jstree-proton-small .jstree-anchor>.jstree-undetermined{background-position:-199px -7px}.jstree-proton-small .jstree-anchor>.jstree-undetermined:hover{background-position:-199px -39px}.jstree-proton-small>.jstree-striped{background-size:auto 36px}.jstree-proton-small.jstree-rtl .jstree-node{background-size:320px 96px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAACAQMAAAB49I5GAAAABlBMVEUAAAAdHRvEkCwcAAAAAXRSTlMAQObYZgAAAAxJREFUCNdjAAMOBgAAGAAJMwQHdQAAAABJRU5ErkJggg==);background-position:100% 1px;background-repeat:repeat-y}.jstree-proton-small.jstree-rtl .jstree-last{background:0 0}.jstree-proton-small.jstree-rtl .jstree-open>.jstree-ocl{background-position:-135px -39px}.jstree-proton-small.jstree-rtl .jstree-closed>.jstree-ocl{background-position:-103px -39px}.jstree-proton-small.jstree-rtl .jstree-leaf>.jstree-ocl{background-position:-71px -39px}.jstree-proton-small.jstree-rtl>.jstree-no-dots .jstree-node,.jstree-proton-small.jstree-rtl>.jstree-no-dots .jstree-leaf>.jstree-ocl{background:0 0}.jstree-proton-small.jstree-rtl>.jstree-no-dots .jstree-open>.jstree-ocl{background-position:-39px -39px}.jstree-proton-small.jstree-rtl>.jstree-no-dots .jstree-closed>.jstree-ocl{background-position:-7px -39px}.jstree-proton-small .jstree-themeicon-custom{background-color:transparent;background-size:320px 96px;background-image:none;background-position:0 0}.jstree-proton-small>.jstree-container-ul .jstree-loading>.jstree-ocl{background:url(../../node_modules/jstree-bootstrap-theme/dist/themes/proton/throbber.gif) center center no-repeat}.jstree-proton-small .jstree-file{background:url(../../node_modules/jstree-bootstrap-theme/dist/themes/proton/32px.png) -103px -71px no-repeat}.jstree-proton-small .jstree-folder{background:url(../../node_modules/jstree-bootstrap-theme/dist/themes/proton/32px.png) -263px -7px no-repeat}.jstree-proton-small>.jstree-container-ul>.jstree-node{margin-left:0;margin-right:0}#jstree-dnd.jstree-proton-small{line-height:18px;padding:0 4px}#jstree-dnd.jstree-proton-small .jstree-ok,#jstree-dnd.jstree-proton-small .jstree-er{background-size:320px 96px;background-image:url(../../node_modules/jstree-bootstrap-theme/dist/themes/proton/32px.png);background-repeat:no-repeat;background-color:transparent}#jstree-dnd.jstree-proton-small i{background:0 0;width:18px;height:18px;line-height:18px}#jstree-dnd.jstree-proton-small .jstree-ok{background-position:-7px -71px}#jstree-dnd.jstree-proton-small .jstree-er{background-position:-39px -71px}.jstree-proton-small.jstree-rtl .jstree-node{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAACAQMAAABv1h6PAAAABlBMVEUAAAAdHRvEkCwcAAAAAXRSTlMAQObYZgAAAAxJREFUCNdjAAMHBgAAiABBI4gz9AAAAABJRU5ErkJggg==)}.jstree-proton-small.jstree-rtl .jstree-last{background:0 0}.jstree-proton-large .jstree-node{min-height:32px;line-height:32px;margin-left:32px;min-width:32px}.jstree-proton-large .jstree-anchor{line-height:32px;margin:1px 0 2px;height:32px}.jstree-proton-large .jstree-icon{width:32px;height:32px;line-height:32px}.jstree-proton-large .jstree-icon:empty{width:32px;height:32px;line-height:32px}.jstree-proton-large.jstree-rtl .jstree-node{margin-right:32px}.jstree-proton-large .jstree-wholerow{height:32px}.jstree-proton-large .jstree-node,.jstree-proton-large .jstree-icon{background-size:320px 96px;background-image:url(../../node_modules/jstree-bootstrap-theme/dist/themes/proton/32px.png)}.jstree-proton-large .jstree-node{background-position:-288px 0;background-repeat:repeat-y}.jstree-proton-large .jstree-last{background:0 0}.jstree-proton-large .jstree-open>.jstree-ocl{background-position:-128px 0}.jstree-proton-large .jstree-closed>.jstree-ocl{background-position:-96px 0}.jstree-proton-large .jstree-leaf>.jstree-ocl{background-position:-64px 0}.jstree-proton-large .jstree-themeicon{background-position:-256px -2px}.jstree-proton-large>.jstree-no-dots .jstree-node,.jstree-proton-large>.jstree-no-dots .jstree-leaf>.jstree-ocl{background:0 0}.jstree-proton-large>.jstree-no-dots .jstree-open>.jstree-ocl{background-position:-32px 0}.jstree-proton-large>.jstree-no-dots .jstree-closed>.jstree-ocl{background-position:0 0}.jstree-proton-large .jstree-disabled{background:0 0}.jstree-proton-large .jstree-disabled.jstree-hovered{background:0 0}.jstree-proton-large .jstree-disabled.jstree-clicked{background:#efefef}.jstree-proton-large .jstree-checkbox{background-position:-160px 0}.jstree-proton-large .jstree-checkbox:hover{background-position:-160px -32px}.jstree-proton-large.jstree-checkbox-selection .jstree-clicked>.jstree-checkbox,.jstree-proton-large .jstree-checked>.jstree-checkbox{background-position:-224px 0}.jstree-proton-large.jstree-checkbox-selection .jstree-clicked>.jstree-checkbox:hover,.jstree-proton-large .jstree-checked>.jstree-checkbox:hover{background-position:-224px -32px}.jstree-proton-large .jstree-anchor>.jstree-undetermined{background-position:-192px 0}.jstree-proton-large .jstree-anchor>.jstree-undetermined:hover{background-position:-192px -32px}.jstree-proton-large>.jstree-striped{background-size:auto 64px}.jstree-proton-large.jstree-rtl .jstree-node{background-size:320px 96px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAACAQMAAAB49I5GAAAABlBMVEUAAAAdHRvEkCwcAAAAAXRSTlMAQObYZgAAAAxJREFUCNdjAAMOBgAAGAAJMwQHdQAAAABJRU5ErkJggg==);background-position:100% 1px;background-repeat:repeat-y}.jstree-proton-large.jstree-rtl .jstree-last{background:0 0}.jstree-proton-large.jstree-rtl .jstree-open>.jstree-ocl{background-position:-128px -32px}.jstree-proton-large.jstree-rtl .jstree-closed>.jstree-ocl{background-position:-96px -32px}.jstree-proton-large.jstree-rtl .jstree-leaf>.jstree-ocl{background-position:-64px -32px}.jstree-proton-large.jstree-rtl>.jstree-no-dots .jstree-node,.jstree-proton-large.jstree-rtl>.jstree-no-dots .jstree-leaf>.jstree-ocl{background:0 0}.jstree-proton-large.jstree-rtl>.jstree-no-dots .jstree-open>.jstree-ocl{background-position:-32px -32px}.jstree-proton-large.jstree-rtl>.jstree-no-dots .jstree-closed>.jstree-ocl{background-position:0 -32px}.jstree-proton-large .jstree-themeicon-custom{background-color:transparent;background-size:320px 96px;background-image:none;background-position:0 0}.jstree-proton-large>.jstree-container-ul .jstree-loading>.jstree-ocl{background:url(../../node_modules/jstree-bootstrap-theme/dist/themes/proton/throbber.gif) center center no-repeat}.jstree-proton-large .jstree-file{background:url(../../node_modules/jstree-bootstrap-theme/dist/themes/proton/32px.png) -96px -64px no-repeat}.jstree-proton-large .jstree-folder{background:url(../../node_modules/jstree-bootstrap-theme/dist/themes/proton/32px.png) -256px 0 no-repeat}.jstree-proton-large>.jstree-container-ul>.jstree-node{margin-left:0;margin-right:0}#jstree-dnd.jstree-proton-large{line-height:32px;padding:0 4px}#jstree-dnd.jstree-proton-large .jstree-ok,#jstree-dnd.jstree-proton-large .jstree-er{background-size:320px 96px;background-image:url(../../node_modules/jstree-bootstrap-theme/dist/themes/proton/32px.png);background-repeat:no-repeat;background-color:transparent}#jstree-dnd.jstree-proton-large i{background:0 0;width:32px;height:32px;line-height:32px}#jstree-dnd.jstree-proton-large .jstree-ok{background-position:0 -64px}#jstree-dnd.jstree-proton-large .jstree-er{background-position:-32px -64px}.jstree-proton-large.jstree-rtl .jstree-node{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAACAQMAAAAD0EyKAAAABlBMVEUAAAAdHRvEkCwcAAAAAXRSTlMAQObYZgAAAAxJREFUCNdjgIIGBgABCgCBvVLXcAAAAABJRU5ErkJggg==)}.jstree-proton-large.jstree-rtl .jstree-last{background:0 0}@media (max-width:768px){#jstree-dnd.jstree-dnd-responsive{line-height:30px;font-weight:700;font-size:1.1em;text-shadow:1px 1px #fff}#jstree-dnd.jstree-dnd-responsive>i{background:0 0;width:30px;height:30px}#jstree-dnd.jstree-dnd-responsive>.jstree-ok{background-image:url(../../node_modules/jstree-bootstrap-theme/dist/themes/proton/30px.png);background-position:0 -150px;background-size:90px 180px}#jstree-dnd.jstree-dnd-responsive>.jstree-er{background-image:url(../../node_modules/jstree-bootstrap-theme/dist/themes/proton/30px.png);background-position:-30px -150px;background-size:90px 180px}#jstree-marker.jstree-dnd-responsive{border-left-width:10px;border-top-width:10px;border-bottom-width:10px;margin-top:-10px}}@media (max-width:768px){.jstree-proton-responsive .jstree-container-ul{overflow:hidden}.jstree-proton-responsive .jstree-icon{background-image:url(../../node_modules/jstree-bootstrap-theme/dist/themes/proton/30px.png);background-size:90px 180px}.jstree-proton-responsive .jstree-node,.jstree-proton-responsive .jstree-leaf>.jstree-ocl{background:0 0}.jstree-proton-responsive .jstree-node{min-height:30px;line-height:30px;margin-left:30px;min-width:30px;white-space:nowrap}.jstree-proton-responsive .jstree-anchor{line-height:38px;height:38px;margin:0}.jstree-proton-responsive .jstree-icon,.jstree-proton-responsive .jstree-icon:empty{margin-top:4px;width:30px;height:30px;line-height:30px}.jstree-proton-responsive>.jstree-container-ul>.jstree-node{margin-left:0}.jstree-proton-responsive.jstree-rtl .jstree-node{margin-left:0;margin-right:30px}.jstree-proton-responsive.jstree-rtl .jstree-container-ul>.jstree-node{margin-right:0}.jstree-proton-responsive .jstree-ocl,.jstree-proton-responsive .jstree-themeicon,.jstree-proton-responsive .jstree-checkbox{background-size:90px 180px}.jstree-proton-responsive .jstree-leaf>.jstree-ocl{background:0 0}.jstree-proton-responsive .jstree-open>.jstree-ocl{background-position:0 0!important}.jstree-proton-responsive .jstree-closed>.jstree-ocl{background-position:0 -30px!important}.jstree-proton-responsive.jstree-rtl .jstree-closed>.jstree-ocl{background-position:-30px 0!important}.jstree-proton-responsive .jstree-themeicon{background-position:-30px -30px}.jstree-proton-responsive .jstree-checkbox,.jstree-proton-responsive .jstree-checkbox:hover{background-position:-30px -60px}.jstree-proton-responsive.jstree-checkbox-selection .jstree-clicked>.jstree-checkbox,.jstree-proton-responsive.jstree-checkbox-selection .jstree-clicked>.jstree-checkbox:hover,.jstree-proton-responsive .jstree-checked>.jstree-checkbox,.jstree-proton-responsive .jstree-checked>.jstree-checkbox:hover{background-position:0 -60px}.jstree-proton-responsive .jstree-anchor>.jstree-undetermined,.jstree-proton-responsive .jstree-anchor>.jstree-undetermined:hover{background-position:0 -90px}.jstree-proton-responsive>.jstree-striped{background:0 0}.jstree-proton-responsive .jstree-wholerow-ul li{position:relative}.jstree-proton-responsive .jstree-wholerow-ul .jstree-wholerow{position:absolute;top:0;left:-1000px;right:-1000px;width:auto;height:100%}.jstree-proton-responsive .jstree-wholerow{border-top:1px solid rgba(0,0,0,.05);background:rgba(0,0,0,.02);height:30px}.jstree-proton-responsive .jstree-wholerow-hovered{background:#76b6ec}.jstree-proton-responsive .jstree-wholerow-clicked{background:#3392e3}.jstree-proton-responsive .jstree-children .jstree-open+.jstree-open{box-shadow:none}.jstree-proton-responsive .jstree-node,.jstree-proton-responsive .jstree-icon,.jstree-proton-responsive .jstree-node>.jstree-ocl,.jstree-proton-responsive .jstree-themeicon,.jstree-proton-responsive .jstree-checkbox{background-image:url(../../node_modules/jstree-bootstrap-theme/dist/themes/proton/30px.png);background-size:90px 180px}.jstree-proton-responsive .jstree-node{background-position:-60px 0;background-repeat:repeat-y}.jstree-proton-responsive .jstree-last{background:0 0}.jstree-proton-responsive .jstree-leaf>.jstree-ocl{background-position:-30px -90px}.jstree-proton-responsive .jstree-last>.jstree-ocl{background-position:-30px -120px}.jstree-proton-responsive .jstree-themeicon-custom{background-color:transparent;background-image:none;background-position:0 0}.jstree-proton-responsive .jstree-file{background:url(../../node_modules/jstree-bootstrap-theme/dist/themes/proton/30px.png) 0 -120px no-repeat;background-size:90px 180px}.jstree-proton-responsive .jstree-folder{background:url(../../node_modules/jstree-bootstrap-theme/dist/themes/proton/30px.png) -30px -30px no-repeat;background-size:90px 180px}.jstree-proton-responsive>.jstree-container-ul>.jstree-node{margin-left:0;margin-right:0}}@font-face{font-family:'Titillium Web';src:url(fonts/titillium/titilliumweb-extralight-webfont.eot);src:url(fonts/titillium/titilliumweb-extralight-webfont.eot?#iefix) format('embedded-opentype'),url(fonts/titillium/titilliumweb-extralight-webfont.woff) format('woff'),url(fonts/titillium/titilliumweb-extralight-webfont.ttf) format('truetype'),url(fonts/titillium/titilliumweb-extralight-webfont.svg#titillium_webthin) format('svg');font-weight:300;font-style:normal}@font-face{font-family:'Titillium Web';src:url(fonts/titillium/titilliumweb-regular-webfont.eot);src:url(fonts/titillium/titilliumweb-regular-webfont.eot?#iefix) format('embedded-opentype'),url(fonts/titillium/titilliumweb-regular-webfont.woff) format('woff'),url(fonts/titillium/titilliumweb-regular-webfont.ttf) format('truetype'),url(fonts/titillium/titilliumweb-regular-webfont.svg#titillium_webregular) format('svg');font-weight:400;font-style:normal}@font-face{font-family:'Titillium Web';src:url(fonts/titillium/titilliumweb-bold-webfont.eot);src:url(fonts/titillium/titilliumweb-bold-webfont.eot?#iefix) format('embedded-opentype'),url(fonts/titillium/titilliumweb-bold-webfont.woff) format('woff'),url(fonts/titillium/titilliumweb-bold-webfont.ttf) format('truetype'),url(fonts/titillium/titilliumweb-bold-webfont.svg#titillium_webbold) format('svg');font-weight:700;font-style:normal}@media screen and (-webkit-min-device-pixel-ratio:0){@font-face{font-family:'Titillium Web';src:url(fonts/titillium/titilliumweb-extralight-webfont.svg#titillium_webthin) format('svg');font-weight:300;font-style:normal}@font-face{font-family:'Titillium Web';src:url(fonts/titillium/titilliumweb-regular-webfont.svg#titillium_webregular) format('svg');font-weight:400;font-style:normal}@font-face{font-family:'Titillium Web';src:url(fonts/titillium/titilliumweb-bold-webfont.svg#titillium_webbold) format('svg');font-weight:700;font-style:normal}}.jstree-proton{font-family:'Titillium Web',sans-serif,Arial,sans-serif}
\ No newline at end of file
diff --git a/apps/maarch_entreprise/css/user-administration.component.css b/apps/maarch_entreprise/css/user-administration.component.css
index d9e1defd75b1e6704e04e2db18445aa22415715e..0fddbc5a6578a01ea4f9403874d587bd4fd2bf47 100755
--- a/apps/maarch_entreprise/css/user-administration.component.css
+++ b/apps/maarch_entreprise/css/user-administration.component.css
@@ -1,100 +1,35 @@
-h2{
-    background-color: #009DC5 !important;
-    color: white !important;
-    margin-top: -10px !important;
-    margin-left: -10px !important;
-    margin-right: -10px !important;
-    padding: 10px !important;
-    font-size: 16px !important;
+.mat-input-container{
+    width:100% !important;
 }
 
-.btn-default:focus.label-primary ,.btn-default:hover.label-primary ,.btn-default.active.label-primary, .btn-default:active.label-primary, .open > .dropdown-toggle.btn-default.label-primary{
-    background: #337ab7 !important;
+.groupOtherInfo input{
+    opacity: 0.5;
 }
 
-.userAdministrationClickable li {
-    cursor: pointer;
+#basketList li{
+    font-size: 10px;
 }
 
-.ng-invalid:not(form)  {
-    border-left: 5px solid #a94442;
-}
+#basketList li:before {
+    /*Using a Bootstrap glyphicon as the bullet point*/
+    content: "\f01c";
+    font-family: 'FontAwesome';
+    font-size: 9px;
+    margin-right: 5px;
 
-.modal-content{
-    background-color: #009DC5 !important;
 }
-.modal-header h4{
-    color: white !important;
 
+.avatar {
+  width: 60px;
+  height: 60px;
+  display: block;
+  margin-right: 15px;
 }
 
-.modal-body{
-    background-color: white;
-    padding:10px;
-}
-.modal-body .list-group li{
-    /*border-color: #009DC5 !important;*/
-    font-weight: bold;
+/deep/ .mat-tab-body-wrapper{
+    margin-top:10px !important;
 }
 
-.modal-footer{
-    background:white;
-}
-/* layout.css Style */
-.upload-drop-zone {
-    font-size: 16px;
-    height: 100px;
-    border-width: 2px;
-    margin-bottom: 20px;
-}
-
-/* skin.css Style*/
-.upload-drop-zone {
-    color: #ccc;
-    border-style: dashed;
-    border-color: #ccc;
-    line-height: 100px;
-    text-align: center
-}
-.upload-drop-zone.drop {
-    color: #222;
-    border-color: #222;
-}
-/* Alert info*/
-#resultInfo{
-    top :10px;
-    text-align: center;
-    position: absolute;
-    width: 30%;
-    right: 10px;
-    z-index: 1051;
-    height: 40px;
-    -moz-box-shadow: 0px 0px 5px 0px #656565;
-    -webkit-box-shadow: 0px 0px 5px 0px #656565;
-    -o-box-shadow: 0px 0px 5px 0px #656565;
-    box-shadow: 0px 0px 5px 0px #656565;
-    filter:progid:DXImageTransform.Microsoft.Shadow(color=#656565, Direction=NaN, Strength=5);
-}
-#signList {
-    overflow-x:scroll;
-    overflow-y:hidden;
-    white-space:nowrap;
-    margin-right: 0px !important;
-    margin-left: 0px !important;
-}
-#signList [class*="col-lg"], #signList [class*="col-md"], #signList [class*="col-sm"] {
-    float:none;
-    display:inline-block;
-    white-space:normal;
-    vertical-align:top;
-}
-.caption p{
-    white-space: nowrap;
-    overflow: hidden;
-}
-.form-control.btn-success[disabled]{
-    background-color: #5cb85c;
-}
-.form-control.btn-primary[disabled]{
-    background-color: #286090;
-}
+.panel-footer /deep/ .mat-input-wrapper{
+    margin-bottom:-20px !important;
+}
\ No newline at end of file
diff --git a/apps/maarch_entreprise/js/angular/app/administration/user-administration.component.js b/apps/maarch_entreprise/js/angular/app/administration/user-administration.component.js
index b149172318c3cf84febee1e7037531718e48f6b0..48f06172bcb3a40576575a9b84905d0b54b826a8 100755
--- a/apps/maarch_entreprise/js/angular/app/administration/user-administration.component.js
+++ b/apps/maarch_entreprise/js/angular/app/administration/user-administration.component.js
@@ -13,13 +13,15 @@ var core_1 = require("@angular/core");
 var http_1 = require("@angular/common/http");
 var router_1 = require("@angular/router");
 var translate_component_1 = require("../translate.component");
+var material_1 = require("@angular/material");
 var UserAdministrationComponent = (function () {
-    function UserAdministrationComponent(http, route, router, zone) {
+    function UserAdministrationComponent(http, route, router, zone, snackBar) {
         var _this = this;
         this.http = http;
         this.route = route;
         this.router = router;
         this.zone = zone;
+        this.snackBar = snackBar;
         this.lang = translate_component_1.LANG;
         this.user = {};
         this.signatureModel = {
@@ -45,6 +47,7 @@ var UserAdministrationComponent = (function () {
     };
     UserAdministrationComponent.prototype.ngOnInit = function () {
         var _this = this;
+        //$j('#header').remove();
         this.updateBreadcrumb(angularGlobals.applicationName);
         this.coreUrl = angularGlobals.coreUrl;
         this.loading = true;
@@ -61,26 +64,50 @@ var UserAdministrationComponent = (function () {
                     _this.user = data;
                     _this.userId = data.user_id;
                     _this.loading = false;
-                    setTimeout(function () {
-                        $j("#absenceUser").typeahead({
-                            order: "asc",
-                            display: "formattedUser",
-                            templateValue: "{{user_id}}",
-                            source: {
-                                ajax: {
-                                    type: "GET",
-                                    dataType: "json",
-                                    url: _this.coreUrl + "rest/users/autocompleter",
-                                }
-                            }
-                        });
-                    }, 0);
                 }, function () {
                     location.href = "index.php";
                 });
             }
         });
     };
+    UserAdministrationComponent.prototype.toogleRedirect = function (basket) {
+        $j('#redirectUser_' + basket.group_id + '_' + basket.basket_id).toggle();
+        $j('#absenceUser_' + basket.group_id + '_' + basket.basket_id).typeahead({
+            order: "asc",
+            display: "formattedUser",
+            templateValue: "{{user_id}}",
+            source: {
+                ajax: {
+                    type: "GET",
+                    dataType: "json",
+                    url: this.coreUrl + "rest/users/autocompleter",
+                }
+            }
+        });
+    };
+    UserAdministrationComponent.prototype.initService = function () {
+        var _this = this;
+        $j('#jstree').jstree({
+            "checkbox": {
+                "three_state": false //no cascade selection
+            },
+            'core': {
+                'themes': {
+                    'name': 'proton',
+                    'responsive': true
+                },
+                'data': this.user.allEntities
+            },
+            "plugins": ["checkbox"]
+        });
+        $j('#jstree')
+            .on('select_node.jstree', function (e, data) {
+            _this.addEntity(data.node.id);
+        }).on('deselect_node.jstree', function (e, data) {
+            _this.deleteEntity(data.node.id);
+        })
+            .jstree();
+    };
     UserAdministrationComponent.prototype.processAfterUpload = function (b64Content) {
         var _this = this;
         this.zone.run(function () { return _this.resfreshUpload(b64Content); });
@@ -103,6 +130,7 @@ var UserAdministrationComponent = (function () {
         $j('#' + id).click();
     };
     UserAdministrationComponent.prototype.uploadSignatureTrigger = function (fileInput) {
+        var _this = this;
         if (fileInput.target.files && fileInput.target.files[0]) {
             var reader = new FileReader();
             this.signatureModel.name = fileInput.target.files[0].name;
@@ -114,6 +142,7 @@ var UserAdministrationComponent = (function () {
             reader.readAsDataURL(fileInput.target.files[0]);
             reader.onload = function (value) {
                 window['angularUserAdministrationComponent'].componentAfterUpload(value.target.result);
+                _this.submitSignature();
             };
         }
     };
@@ -132,20 +161,28 @@ var UserAdministrationComponent = (function () {
             });
         }
     };
-    UserAdministrationComponent.prototype.addGroup = function () {
+    UserAdministrationComponent.prototype.toggleGroup = function (group) {
         var _this = this;
-        var index = $j("#groupsSelect option:selected").index();
-        if (index > 0) {
-            var group = {
-                "groupId": this.user.allGroups[index - 1].group_id,
-                "role": $j("#groupRole")[0].value
+        if ($j('#' + group.group_id + '-input').is(':checked') == true) {
+            var groupReq = {
+                "groupId": group.group_id,
+                "role": group.role
             };
-            this.http.post(this.coreUrl + "rest/users/" + this.serialId + "/groups", group)
+            this.http.post(this.coreUrl + "rest/users/" + this.serialId + "/groups", groupReq)
+                .subscribe(function (data) {
+                _this.user.groups = data.groups;
+                _this.user.allGroups = data.allGroups;
+                _this.user.baskets = data.baskets;
+                successNotification(data.success);
+            }, function (err) {
+                errorNotification(err.error.errors);
+            });
+        }
+        else {
+            this.http.delete(this.coreUrl + "rest/users/" + this.serialId + "/groups/" + group.group_id)
                 .subscribe(function (data) {
                 _this.user.groups = data.groups;
                 _this.user.allGroups = data.allGroups;
-                $j("#groupRole")[0].value = "";
-                $j('#addGroupModal').modal('hide');
                 successNotification(data.success);
             }, function (err) {
                 errorNotification(err.error.errors);
@@ -174,25 +211,20 @@ var UserAdministrationComponent = (function () {
             });
         }
     };
-    UserAdministrationComponent.prototype.addEntity = function () {
+    UserAdministrationComponent.prototype.addEntity = function (entiyId) {
         var _this = this;
-        var index = $j("#entitiesSelect option:selected").index();
-        if (index > 0) {
-            var entity = {
-                "entityId": this.user.allEntities[index - 1].entity_id,
-                "role": $j("#entityRole")[0].value
-            };
-            this.http.post(this.coreUrl + "rest/users/" + this.serialId + "/entities", entity)
-                .subscribe(function (data) {
-                _this.user.entities = data.entities;
-                _this.user.allEntities = data.allEntities;
-                $j("#entityRole")[0].value = "";
-                $j('#addEntityModal').modal('hide');
-                successNotification(data.success);
-            }, function (err) {
-                errorNotification(err.error.errors);
-            });
-        }
+        var entity = {
+            "entityId": entiyId,
+            "role": ''
+        };
+        this.http.post(this.coreUrl + "rest/users/" + this.serialId + "/entities", entity)
+            .subscribe(function (data) {
+            _this.user.entities = data.entities;
+            _this.user.allEntities = data.allEntities;
+            successNotification(data.success);
+        }, function (err) {
+            errorNotification(err.error.errors);
+        });
     };
     UserAdministrationComponent.prototype.updateEntity = function (entity) {
         this.http.put(this.coreUrl + "rest/users/" + this.serialId + "/entities/" + entity.entity_id, entity)
@@ -212,19 +244,16 @@ var UserAdministrationComponent = (function () {
             errorNotification(err.error.errors);
         });
     };
-    UserAdministrationComponent.prototype.deleteEntity = function (entity) {
+    UserAdministrationComponent.prototype.deleteEntity = function (entityId) {
         var _this = this;
-        var r = confirm('Voulez-vous vraiment retirer l\'utilisateur de cette entité ?');
-        if (r) {
-            this.http.delete(this.coreUrl + "rest/users/" + this.serialId + "/entities/" + entity.entity_id)
-                .subscribe(function (data) {
-                _this.user.entities = data.entities;
-                _this.user.allEntities = data.allEntities;
-                successNotification(data.success);
-            }, function (err) {
-                errorNotification(err.error.errors);
-            });
-        }
+        this.http.delete(this.coreUrl + "rest/users/" + this.serialId + "/entities/" + entityId)
+            .subscribe(function (data) {
+            _this.user.entities = data.entities;
+            _this.user.allEntities = data.allEntities;
+            successNotification(data.success);
+        }, function (err) {
+            errorNotification(err.error.errors);
+        });
     };
     UserAdministrationComponent.prototype.submitSignature = function () {
         var _this = this;
@@ -244,14 +273,13 @@ var UserAdministrationComponent = (function () {
             errorNotification(err.error.errors);
         });
     };
-    UserAdministrationComponent.prototype.updateSignature = function () {
+    UserAdministrationComponent.prototype.updateSignature = function (selectedSignature) {
         var _this = this;
-        var id = this.user.signatures[this.selectedSignature].id;
-        this.http.put(this.coreUrl + "rest/users/" + this.serialId + "/signatures/" + id, { "label": this.selectedSignatureLabel })
+        var id = this.user.signatures[selectedSignature].id;
+        var label = this.user.signatures[selectedSignature].signature_label;
+        this.http.put(this.coreUrl + "rest/users/" + this.serialId + "/signatures/" + id, { "label": label })
             .subscribe(function (data) {
-            _this.user.signatures[_this.selectedSignature].signature_label = data.signature.signature_label;
-            _this.selectedSignature = -1;
-            _this.selectedSignatureLabel = "";
+            _this.user.signatures[selectedSignature].signature_label = data.signature.signature_label;
             successNotification(data.success);
         }, function (err) {
             errorNotification(err.error.errors);
@@ -270,25 +298,25 @@ var UserAdministrationComponent = (function () {
             });
         }
     };
-    UserAdministrationComponent.prototype.addBasketRedirection = function () {
-        var index = $j("#selectBasketAbsenceUser option:selected").index();
-        if (index > 0 && $j("#absenceUser")[0].value != "") {
+    UserAdministrationComponent.prototype.addBasketRedirection = function (i, basket) {
+        var r = false;
+        if (this.user.status != 'ABS') {
+            r = confirm('Cela activera automatiquement le mode absent, continuer ?');
+        }
+        if (r || this.user.status == 'ABS') {
+            this.user.baskets[i].userToDisplay = $j('#absenceUser_' + basket.group_id + '_' + basket.basket_id)[0].value;
             this.userAbsenceModel.push({
-                "basketId": this.user.baskets[index - 1].basket_id,
-                "basketName": this.user.baskets[index - 1].basket_name,
-                "virtual": this.user.baskets[index - 1].is_virtual,
-                "basketOwner": this.user.baskets[index - 1].basket_owner,
-                "newUser": $j("#absenceUser")[0].value,
-                "index": index - 1
+                "basketId": this.user.baskets[i].basket_id,
+                "basketName": this.user.baskets[i].basket_name,
+                "virtual": this.user.baskets[i].is_virtual,
+                "basketOwner": this.user.baskets[i].basket_owner,
+                "newUser": this.user.baskets[i].userToDisplay
             });
-            this.user.baskets[index - 1].disabled = true;
-            $j('#selectBasketAbsenceUser option:eq(0)').prop("selected", true);
-            $j("#absenceUser")[0].value = "";
+            this.activateAbsence();
         }
     };
-    UserAdministrationComponent.prototype.delBasketRedirection = function (index) {
-        this.user.baskets[this.userAbsenceModel[index].index].disabled = false;
-        this.userAbsenceModel.splice(index, 1);
+    UserAdministrationComponent.prototype.delBasketRedirection = function (i) {
+        this.user.baskets[i].userToDisplay = '';
     };
     UserAdministrationComponent.prototype.activateAbsence = function () {
         var _this = this;
@@ -296,17 +324,19 @@ var UserAdministrationComponent = (function () {
             .subscribe(function (data) {
             _this.user.status = data.user.status;
             _this.userAbsenceModel = [];
-            $j('#manageAbs').modal('hide');
             successNotification(data.success);
         }, function (err) {
             errorNotification(err.error.errors);
         });
     };
-    UserAdministrationComponent.prototype.deactivateAbsence = function () {
+    UserAdministrationComponent.prototype.desactivateAbsence = function () {
         var _this = this;
         this.http.put(this.coreUrl + "rest/users/" + this.serialId + "/status", { "status": "OK" })
             .subscribe(function (data) {
             _this.user.status = data.user.status;
+            for (var i in _this.user.baskets) {
+                _this.user.baskets[i].userToDisplay = '';
+            }
             successNotification(data.success);
         }, function (err) {
             errorNotification(err.error.errors);
@@ -326,6 +356,9 @@ var UserAdministrationComponent = (function () {
         else {
             this.http.put(this.coreUrl + "rest/users/" + this.serialId, this.user)
                 .subscribe(function (data) {
+                /*this.snackBar.open(data.success, 'Undo', {
+                    duration: 2000,
+                  });*/
                 successNotification(data.success);
             }, function (err) {
                 errorNotification(err.error.errors);
@@ -337,8 +370,8 @@ var UserAdministrationComponent = (function () {
 UserAdministrationComponent = __decorate([
     core_1.Component({
         templateUrl: angularGlobals["user-administrationView"],
-        styleUrls: ['../../node_modules/bootstrap/dist/css/bootstrap.min.css', 'css/user-administration.component.css']
+        styleUrls: ['../../node_modules/bootstrap/dist/css/bootstrap.min.css', 'css/user-administration.component.css', '../../node_modules/jstree-bootstrap-theme/dist/themes/proton/style.css']
     }),
-    __metadata("design:paramtypes", [http_1.HttpClient, router_1.ActivatedRoute, router_1.Router, core_1.NgZone])
+    __metadata("design:paramtypes", [http_1.HttpClient, router_1.ActivatedRoute, router_1.Router, core_1.NgZone, material_1.MdSnackBar])
 ], UserAdministrationComponent);
 exports.UserAdministrationComponent = UserAdministrationComponent;
diff --git a/apps/maarch_entreprise/js/angular/app/administration/user-administration.component.ts b/apps/maarch_entreprise/js/angular/app/administration/user-administration.component.ts
index 3f503996a9dd1f6cbc51d4146c5034c0ba61bd7c..2b7627535dbe5538542dc4afb81baf856a620aec 100755
--- a/apps/maarch_entreprise/js/angular/app/administration/user-administration.component.ts
+++ b/apps/maarch_entreprise/js/angular/app/administration/user-administration.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, NgZone } from '@angular/core';
+import { Component, OnInit, NgZone, ViewChild, ElementRef } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { ActivatedRoute, Router } from '@angular/router';
 import { LANG } from '../translate.component';
@@ -12,7 +12,7 @@ declare const angularGlobals : any;
 
 @Component({
     templateUrl : angularGlobals["user-administrationView"],
-    styleUrls   : ['../../node_modules/bootstrap/dist/css/bootstrap.min.css', 'css/user-administration.component.css']
+    styleUrls   : ['../../node_modules/bootstrap/dist/css/bootstrap.min.css','css/user-administration.component.css','../../node_modules/jstree-bootstrap-theme/dist/themes/proton/style.css']
 })
 export class UserAdministrationComponent implements OnInit {
 
@@ -42,6 +42,7 @@ export class UserAdministrationComponent implements OnInit {
         window['angularUserAdministrationComponent'] = {
             componentAfterUpload: (base64Content: any) => this.processAfterUpload(base64Content),
         };
+        
     }
 
     updateBreadcrumb(applicationName: string) {
@@ -51,6 +52,7 @@ export class UserAdministrationComponent implements OnInit {
     }
 
     ngOnInit(): void {
+        //$j('#header').remove();
         this.updateBreadcrumb(angularGlobals.applicationName);
         this.coreUrl = angularGlobals.coreUrl;
 
@@ -69,20 +71,7 @@ export class UserAdministrationComponent implements OnInit {
                         this.userId = data.user_id;
 
                         this.loading = false;
-                        setTimeout(() => {
-                            $j("#absenceUser").typeahead({
-                                order: "asc",
-                                display: "formattedUser",
-                                templateValue: "{{user_id}}",
-                                source: {
-                                    ajax: {
-                                        type: "GET",
-                                        dataType: "json",
-                                        url: this.coreUrl + "rest/users/autocompleter",
-                                    }
-                                }
-                            });
-                        }, 0);
+                        
                     }, () => {
                         location.href = "index.php";
                     });
@@ -90,6 +79,47 @@ export class UserAdministrationComponent implements OnInit {
         });
     }
 
+    toogleRedirect(basket:any) {
+        $j('#redirectUser_'+basket.group_id+'_'+basket.basket_id).toggle();
+        $j('#absenceUser_'+basket.group_id+'_'+basket.basket_id).typeahead({
+            order: "asc",
+            display: "formattedUser",
+            templateValue: "{{user_id}}",
+            source: {
+                ajax: {
+                    type: "GET",
+                    dataType: "json",
+                    url: this.coreUrl + "rest/users/autocompleter",
+                }
+            }
+        });
+    }
+
+    initService(){
+        $j('#jstree').jstree({ 
+            "checkbox" : {
+                "three_state" : false //no cascade selection
+            },
+            'core' : {
+                'themes': {
+                    'name': 'proton',
+                    'responsive': true
+                },
+                'data' : this.user.allEntities
+            },
+            "plugins" : [ "checkbox" ] 
+        });
+        $j('#jstree')
+        // listen for event
+        .on('select_node.jstree', (e:any, data:any) => {
+            this.addEntity(data.node.id);
+        }).on('deselect_node.jstree', (e:any, data:any) => {
+            this.deleteEntity(data.node.id);
+        })
+        // create the instance
+        .jstree();
+    }
+
     processAfterUpload(b64Content: any) {
         this.zone.run(() => this.resfreshUpload(b64Content));
     }
@@ -126,10 +156,10 @@ export class UserAdministrationComponent implements OnInit {
 
             reader.readAsDataURL(fileInput.target.files[0]);
 
-            reader.onload = function (value: any) {
+            reader.onload = (value: any) => {
                 window['angularUserAdministrationComponent'].componentAfterUpload(value.target.result);
+                this.submitSignature();
             };
-
         }
     }
 
@@ -151,28 +181,32 @@ export class UserAdministrationComponent implements OnInit {
         }
     }
 
-    addGroup() {
-        var index = $j("#groupsSelect option:selected").index();
-
-        if (index > 0) {
-            var group = {
-                "groupId"   : this.user.allGroups[index - 1].group_id,
-                "role"      : $j("#groupRole")[0].value
+    toggleGroup(group: any){
+        if($j('#'+group.group_id+'-input').is(':checked') == true){
+            var groupReq = {
+                "groupId"   : group.group_id,
+                "role"      : group.role
             };
-
-            this.http.post(this.coreUrl + "rest/users/" + this.serialId + "/groups", group)
-                .subscribe((data : any) => {
-                    this.user.groups = data.groups;
-                    this.user.allGroups = data.allGroups;
-                    $j("#groupRole")[0].value = "";
-                    $j('#addGroupModal').modal('hide');
-                    successNotification(data.success);
-                }, (err) => {
-                    errorNotification(err.error.errors);
-                });
+            this.http.post(this.coreUrl + "rest/users/" + this.serialId + "/groups", groupReq)
+            .subscribe((data : any) => {
+                this.user.groups = data.groups;
+                this.user.allGroups = data.allGroups;
+                this.user.baskets = data.baskets;
+                successNotification(data.success);
+            }, (err) => {
+                errorNotification(err.error.errors);
+            });
+        }else{
+            this.http.delete(this.coreUrl + "rest/users/" + this.serialId + "/groups/" + group.group_id)
+            .subscribe((data : any) => {
+                this.user.groups = data.groups;
+                this.user.allGroups = data.allGroups;
+                successNotification(data.success);
+            }, (err) => {
+                errorNotification(err.error.errors);
+            });
         }
     }
-
     updateGroup(group: any) {
         this.http.put(this.coreUrl + "rest/users/" + this.serialId + "/groups/" + group.group_id, group)
             .subscribe((data : any) => {
@@ -197,26 +231,23 @@ export class UserAdministrationComponent implements OnInit {
         }
     }
 
-    addEntity() {
-        var index = $j("#entitiesSelect option:selected").index();
+    addEntity(entiyId:any) {
 
-        if (index > 0) {
-            var entity = {
-                "entityId"   : this.user.allEntities[index - 1].entity_id,
-                "role"      : $j("#entityRole")[0].value
-            };
+        var entity = {
+            "entityId"   : entiyId,
+            "role"      : ''
+        };
 
-            this.http.post(this.coreUrl + "rest/users/" + this.serialId + "/entities", entity)
-                .subscribe((data : any) => {
-                    this.user.entities = data.entities;
-                    this.user.allEntities = data.allEntities;
-                    $j("#entityRole")[0].value = "";
-                    $j('#addEntityModal').modal('hide');
-                    successNotification(data.success);
-                }, (err) => {
-                    errorNotification(err.error.errors);
-                });
-        }
+        this.http.post(this.coreUrl + "rest/users/" + this.serialId + "/entities", entity)
+            .subscribe((data : any) => {
+                this.user.entities = data.entities;
+                this.user.allEntities = data.allEntities;
+
+                successNotification(data.success);
+            }, (err) => {
+                errorNotification(err.error.errors);
+            });
+        
     }
 
     updateEntity(entity: any) {
@@ -238,19 +269,17 @@ export class UserAdministrationComponent implements OnInit {
             });
     }
 
-    deleteEntity(entity: any) {
-        let r = confirm('Voulez-vous vraiment retirer l\'utilisateur de cette entité ?');
+    deleteEntity(entityId: any) {
 
-        if (r) {
-            this.http.delete(this.coreUrl + "rest/users/" + this.serialId + "/entities/" + entity.entity_id)
-                .subscribe((data : any) => {
-                    this.user.entities = data.entities;
-                    this.user.allEntities = data.allEntities;
-                    successNotification(data.success);
-                }, (err) => {
-                    errorNotification(err.error.errors);
-                });
-        }
+        this.http.delete(this.coreUrl + "rest/users/" + this.serialId + "/entities/" + entityId)
+            .subscribe((data : any) => {
+                this.user.entities = data.entities;
+                this.user.allEntities = data.allEntities;
+                successNotification(data.success);
+            }, (err) => {
+                errorNotification(err.error.errors);
+            });
+        
     }
 
     submitSignature() {
@@ -271,14 +300,13 @@ export class UserAdministrationComponent implements OnInit {
             });
     }
 
-    updateSignature() {
-        var id = this.user.signatures[this.selectedSignature].id;
-
-        this.http.put(this.coreUrl + "rest/users/" + this.serialId + "/signatures/" + id, {"label" : this.selectedSignatureLabel})
+    updateSignature(selectedSignature:any) {
+        var id = this.user.signatures[selectedSignature].id;
+        var label = this.user.signatures[selectedSignature].signature_label;
+        
+        this.http.put(this.coreUrl + "rest/users/" + this.serialId + "/signatures/" + id, {"label" : label})
             .subscribe((data : any) => {
-                this.user.signatures[this.selectedSignature].signature_label = data.signature.signature_label;
-                this.selectedSignature = -1;
-                this.selectedSignatureLabel = "";
+                this.user.signatures[selectedSignature].signature_label = data.signature.signature_label;
                 successNotification(data.success);
             }, (err) => {
                 errorNotification(err.error.errors);
@@ -299,27 +327,27 @@ export class UserAdministrationComponent implements OnInit {
         }
     }
 
-    addBasketRedirection() {
-        var index = $j("#selectBasketAbsenceUser option:selected").index();
-
-        if (index > 0 && $j("#absenceUser")[0].value != "") {
+    addBasketRedirection(i:number,basket:any) {
+        let r = false;
+        if(this.user.status != 'ABS'){
+            r = confirm('Cela activera automatiquement le mode absent, continuer ?');
+        }
+        
+        if (r || this.user.status == 'ABS') {
+            this.user.baskets[i].userToDisplay = $j('#absenceUser_'+basket.group_id+'_'+basket.basket_id)[0].value;
             this.userAbsenceModel.push({
-                "basketId"      : this.user.baskets[index - 1].basket_id,
-                "basketName"    : this.user.baskets[index - 1].basket_name,
-                "virtual"       : this.user.baskets[index - 1].is_virtual,
-                "basketOwner"   : this.user.baskets[index - 1].basket_owner,
-                "newUser"       : $j("#absenceUser")[0].value,
-                "index"         : index - 1
+                "basketId"      : this.user.baskets[i].basket_id,
+                "basketName"    : this.user.baskets[i].basket_name,
+                "virtual"       : this.user.baskets[i].is_virtual,
+                "basketOwner"   : this.user.baskets[i].basket_owner,
+                "newUser"       : this.user.baskets[i].userToDisplay
             });
-            this.user.baskets[index - 1].disabled = true;
-            $j('#selectBasketAbsenceUser option:eq(0)').prop("selected", true);
-            $j("#absenceUser")[0].value = "";
+            this.activateAbsence();
         }
     }
 
-    delBasketRedirection(index: number) {
-        this.user.baskets[this.userAbsenceModel[index].index].disabled = false;
-        this.userAbsenceModel.splice(index, 1);
+    delBasketRedirection(i:number) {
+        this.user.baskets[i].userToDisplay = '';
     }
 
     activateAbsence() {
@@ -327,17 +355,19 @@ export class UserAdministrationComponent implements OnInit {
             .subscribe((data : any) => {
                 this.user.status = data.user.status;
                 this.userAbsenceModel  = [];
-                $j('#manageAbs').modal('hide');
                 successNotification(data.success);
             }, (err) => {
                 errorNotification(err.error.errors);
             });
     }
 
-    deactivateAbsence() {
+    desactivateAbsence() {
         this.http.put(this.coreUrl + "rest/users/" + this.serialId + "/status", {"status" : "OK"})
                 .subscribe((data : any) => {
                 this.user.status = data.user.status;
+                for (let i in this.user.baskets) {
+                    this.user.baskets[i].userToDisplay = '';
+                }
                 successNotification(data.success);
             }, (err) => {
                     errorNotification(err.error.errors);
diff --git a/apps/maarch_entreprise/js/angular/app/app-material.module.js b/apps/maarch_entreprise/js/angular/app/app-material.module.js
index c3f4268ea7eb6220ffc1278937c2e512fdfeb9dd..f5ffbc313d593469d97b3c27863216f0ea6af5ff 100644
--- a/apps/maarch_entreprise/js/angular/app/app-material.module.js
+++ b/apps/maarch_entreprise/js/angular/app/app-material.module.js
@@ -17,11 +17,31 @@ AppMaterialModule = __decorate([
     core_1.NgModule({
         imports: [
             material_1.MdCheckboxModule,
-            material_1.MdSelectModule
+            material_1.MdSelectModule,
+            material_1.MdSlideToggleModule,
+            material_1.MdInputModule,
+            material_1.MdTooltipModule,
+            material_1.MdTabsModule,
+            material_1.MdSidenavModule,
+            material_1.MdButtonModule,
+            material_1.MdCardModule,
+            material_1.MdButtonToggleModule,
+            material_1.MdSnackBarModule,
+            material_1.MdAutocompleteModule
         ],
         exports: [
             material_1.MdCheckboxModule,
-            material_1.MdSelectModule
+            material_1.MdSelectModule,
+            material_1.MdSlideToggleModule,
+            material_1.MdInputModule,
+            material_1.MdTooltipModule,
+            material_1.MdTabsModule,
+            material_1.MdSidenavModule,
+            material_1.MdButtonModule,
+            material_1.MdCardModule,
+            material_1.MdButtonToggleModule,
+            material_1.MdSnackBarModule,
+            material_1.MdAutocompleteModule
         ]
     })
 ], AppMaterialModule);
diff --git a/apps/maarch_entreprise/js/angular/app/app-material.module.ts b/apps/maarch_entreprise/js/angular/app/app-material.module.ts
index b1e3499031d16c58cc0f39dcb3de6f777d0ab824..ae8de076d4453566787722f01fd697be80e07d3b 100644
--- a/apps/maarch_entreprise/js/angular/app/app-material.module.ts
+++ b/apps/maarch_entreprise/js/angular/app/app-material.module.ts
@@ -1,18 +1,42 @@
 import { NgModule } from '@angular/core';
 import {
     MdSelectModule,
-    MdCheckboxModule
+    MdCheckboxModule,
+    MdSlideToggleModule,
+    MdInputModule,
+    MdTooltipModule,
+    MdTabsModule,
+    MdSidenavModule,
+    MdButtonModule,
+    MdCardModule,
+    MdButtonToggleModule
 } from '@angular/material';
 
 
 @NgModule({
     imports: [
         MdCheckboxModule,
-        MdSelectModule
+        MdSelectModule,
+        MdSlideToggleModule,
+        MdInputModule,
+        MdTooltipModule,
+        MdTabsModule,
+        MdSidenavModule,
+        MdButtonModule,
+        MdCardModule,
+        MdButtonToggleModule
     ],
     exports: [
         MdCheckboxModule,
-        MdSelectModule
+        MdSelectModule,
+        MdSlideToggleModule,
+        MdInputModule,
+        MdTooltipModule,
+        MdTabsModule,
+        MdSidenavModule,
+        MdButtonModule,
+        MdCardModule,
+        MdButtonToggleModule
     ]
 })
 export class AppMaterialModule { }
diff --git a/apps/maarch_entreprise/js/angular/lang/lang-fr.js b/apps/maarch_entreprise/js/angular/lang/lang-fr.js
index 0b25cca22fcc9f54b65c884c881c507504b789bf..8a2c551770c3e9151c93b1dae2c8fea452259e01 100755
--- a/apps/maarch_entreprise/js/angular/lang/lang-fr.js
+++ b/apps/maarch_entreprise/js/angular/lang/lang-fr.js
@@ -62,7 +62,7 @@ exports.LANG_FR = {
     "newSignature": "Nouvelle signature",
     "manageAbsences": "Gérer les absences",
     "activateAbsence": "Activer l'absence",
-    "deactivateAbsence": "Désactiver l'absence",
+    "desactivateAbsence": "Désactiver l'absence",
     "autoLogoutAbsence": "Vous allez être automatiquement déconnecté après avoir défini vos redirections de bannettes",
     "reports": "Etats et éditions",
     "myProfile": "Mon profil",
diff --git a/apps/maarch_entreprise/js/angular/lang/lang-fr.ts b/apps/maarch_entreprise/js/angular/lang/lang-fr.ts
index 01f4f4830f6b936d0693522272e0c72d524107b9..76c29d0083813259afdf7da7b838d8cd2957da6a 100755
--- a/apps/maarch_entreprise/js/angular/lang/lang-fr.ts
+++ b/apps/maarch_entreprise/js/angular/lang/lang-fr.ts
@@ -62,7 +62,7 @@ export const LANG_FR = {
     "newSignature"              : "Nouvelle signature",
     "manageAbsences"            : "Gérer les absences",
     "activateAbsence"           : "Activer l'absence",
-    "deactivateAbsence"         : "Désactiver l'absence",
+    "desactivateAbsence"         : "Désactiver l'absence",
     "autoLogoutAbsence"         : "Vous allez être automatiquement déconnecté après avoir défini vos redirections de bannettes",
     "reports"                   : "Etats et éditions",
     "myProfile"                 : "Mon profil",
diff --git a/apps/maarch_entreprise/merged_css.php b/apps/maarch_entreprise/merged_css.php
index cf297a0045b1fda224e357baeb255023bc598ada..60454acccfa124bf6acd01493277721920b199d3 100755
--- a/apps/maarch_entreprise/merged_css.php
+++ b/apps/maarch_entreprise/merged_css.php
@@ -61,5 +61,5 @@ readfile('apps/maarch_entreprise/css/photoswipe_custom.css');
 //Custom CSS for V2
 readfile('apps/maarch_entreprise/css/engine.css');
 readfile('apps/maarch_entreprise/css/bootstrap-chosen.css');
-
+readfile('apps/maarch_entreprise/css/jstree-custom.min.css');
 ob_end_flush();
diff --git a/apps/maarch_entreprise/merged_jsAbstract.php b/apps/maarch_entreprise/merged_jsAbstract.php
index 59d80219e99afdbe1b0624af280fd7b48a0fccdb..ec57a22a92f7cf4333159c42692a660c57d93d31 100755
--- a/apps/maarch_entreprise/merged_jsAbstract.php
+++ b/apps/maarch_entreprise/merged_jsAbstract.php
@@ -59,7 +59,8 @@ class MergedJsAbstract {
 		readfile('node_modules/jquery-typeahead/dist/jquery.typeahead.min.js');
 		readfile('node_modules/hammerjs/hammer.min.js'); //Angular Material
 		readfile('apps/maarch_entreprise/js/chosen.jquery.min.js');
-		readfile('apps/maarch_entreprise/js/bootstrap-tree.js');
+		readfile('node_modules/jstree-bootstrap-theme/dist/jstree.js');
+		readfile('apps/maarch_entreprise/js/bootstrap-tree.js'); //DEPRECATED use jstree instead
 
 		//Mobile
 		readfile('node_modules/photoswipe/dist/photoswipe.min.js');
diff --git a/core/Controllers/UserController.php b/core/Controllers/UserController.php
index d42ba1c60dcca2ce7b4e659ecf76b2853e0297ed..579dd026b7baa7fc76187383f3a1a5abc9d70b9c 100755
--- a/core/Controllers/UserController.php
+++ b/core/Controllers/UserController.php
@@ -218,7 +218,7 @@ class UserController
         if (!empty($data['status']) && $data['status'] == 'OK') {
             $user = UserModel::getById(['id' => $aArgs['id'], 'select' => ['user_id', 'firstname', 'lastname']]);
 
-            UserModel::deactivateAbsenceById(['id' => $aArgs['id']]);
+            UserModel::desactivateAbsenceById(['id' => $aArgs['id']]);
             HistoryController::add([
                 'table_name'    => 'users',
                 'record_id'     => $user['user_id'],
@@ -528,7 +528,8 @@ class UserController
         return $response->withJson([
             'success'   => _ADDED_GROUP,
             'groups'    => UserModel::getGroupsByUserId(['userId' => $user['user_id']]),
-            'allGroups' => GroupModel::getAvailableGroupsByUserId(['userId' => $user['user_id']])
+            'allGroups' => GroupModel::getAvailableGroupsByUserId(['userId' => $user['user_id']]),
+            'baskets'   => BasketsModel::getBasketsByUserId(['userId' => $user['user_id']])
         ]);
     }
 
diff --git a/core/Models/GroupModelAbstract.php b/core/Models/GroupModelAbstract.php
index 5c6f4148f166a02cf8e19c303ecae9ef3fb73d71..c3c2abb59a032d8e87d13baf23287c8da22962dc 100755
--- a/core/Models/GroupModelAbstract.php
+++ b/core/Models/GroupModelAbstract.php
@@ -23,7 +23,8 @@ class GroupModelAbstract
             'select'    => empty($aArgs['select']) ? ['*'] : $aArgs['select'],
             'table'     => ['usergroups'],
             'where'     => ['enabled = ?'],
-            'data'      => ['Y']
+            'data'      => ['Y'],
+            'order_by'  => ['group_desc']
         ]);
 
         return $aGroups;
diff --git a/core/Models/UserModelAbstract.php b/core/Models/UserModelAbstract.php
index 95c6118856a43feaf294a67dc18858b426fc5029..2da7fdbf9a70ee91179dd0c102b96a2480d3fccc 100755
--- a/core/Models/UserModelAbstract.php
+++ b/core/Models/UserModelAbstract.php
@@ -484,9 +484,9 @@ class UserModelAbstract
         ValidatorModel::stringType($aArgs, ['userId']);
 
         $aGroups = DatabaseModel::select([
-            'select'    => ['usergroup_content.group_id', 'usergroups.group_desc', 'usergroup_content.primary_group', 'usergroup_content.role'],
-            'table'     => ['usergroup_content, usergroups'],
-            'where'     => ['usergroup_content.group_id = usergroups.group_id', 'usergroup_content.user_id = ?'],
+            'select'    => ['usergroup_content.group_id', 'usergroups.group_desc', 'usergroup_content.primary_group', 'usergroup_content.role', 'security.maarch_comment'],
+            'table'     => ['usergroup_content, usergroups, security'],
+            'where'     => ['usergroup_content.group_id = usergroups.group_id', 'usergroup_content.user_id = ?','usergroups.group_id = security.group_id'],
             'data'      => [$aArgs['userId']]
         ]);
 
@@ -541,7 +541,7 @@ class UserModelAbstract
         return true;
     }
 
-    public static function deactivateAbsenceById(array $aArgs = [])
+    public static function desactivateAbsenceById(array $aArgs = [])
     {
         ValidatorModel::notEmpty($aArgs, ['id']);
         ValidatorModel::intVal($aArgs, ['id']);
diff --git a/modules/basket/Models/BasketsModelAbstract.php b/modules/basket/Models/BasketsModelAbstract.php
index 1c05a64bca7f322ee48da73d2ef6a26b88e857a9..7d1f2edc4d189505c1d15a9b2eb01455dfea817e 100755
--- a/modules/basket/Models/BasketsModelAbstract.php
+++ b/modules/basket/Models/BasketsModelAbstract.php
@@ -103,6 +103,7 @@ class BasketsModelAbstract
             $aBaskets = DatabaseModel::select([
                     'select'    => ['groupbasket.basket_id', 'group_id', 'basket_name', 'basket_desc'],
                     'table'     => ['groupbasket, baskets'],
+                    'debug'     => ['true'],
                     'where'     => ['group_id in (?)', 'groupbasket.basket_id = baskets.basket_id'],
                     'data'      => [$groupIds],
                     'order_by'  => ['group_id, basket_order, basket_name']
@@ -111,6 +112,14 @@ class BasketsModelAbstract
             foreach ($aBaskets as $key => $value) {
                 $aBaskets[$key]['is_virtual'] = 'N';
                 $aBaskets[$key]['basket_owner'] = $aArgs['userId'];
+                $aBaskets2 = DatabaseModel::select([
+                        'select'    => ['new_user'],
+                        'table'     => ['user_abs'],
+                        'where'     => ['user_abs = ?', 'basket_id = ?'],
+                        'data'      => [$aArgs['userId'],$value['basket_id']],
+                ]);
+                $aBaskets[$key]['userToDisplay'] = UserModel::getLabelledUserById(['userId' => $aBaskets2[0]['new_user']]);
+                $aBaskets[$key]['enabled'] = true;
             }
             $aBaskets = array_merge($aBaskets, BasketsModel::getAbsBasketsByUserId(['userId' => $aArgs['userId']]));
         }
diff --git a/modules/entities/Models/EntityModelAbstract.php b/modules/entities/Models/EntityModelAbstract.php
index 6715d62923a98ec89cdbb7812075afffab4bb0fd..da49cf51fe1a3791f5fe95840b773a7c820bc6e7 100755
--- a/modules/entities/Models/EntityModelAbstract.php
+++ b/modules/entities/Models/EntityModelAbstract.php
@@ -27,7 +27,8 @@ class EntityModelAbstract
             'select'    => empty($aArgs['select']) ? ['*'] : $aArgs['select'],
             'table'     => ['entities'],
             'where'     => ['enabled = ?'],
-            'data'      => ['Y']
+            'data'      => ['Y'],
+            'order_by'  => ['entity_label']
         ]);
 
         return $aEntities;
@@ -148,13 +149,21 @@ class EntityModelAbstract
             $userEntities[] = $value['entity_id'];
         }
 
-        $allEntities = EntityModel::get(['select' => ['entity_id', 'entity_label']]);
+        $allEntities = EntityModel::get(['select' => ['entity_id', 'entity_label', 'parent_entity_id']]);
 
         foreach ($allEntities as $key => $value) {
-            if (in_array($value['entity_id'], $userEntities) || !in_array($value['entity_id'], $entitiesAllowedForAdministrator)) {
-                $allEntities[$key]['disabled'] = true;
+            $allEntities[$key]['id'] = $value['entity_id'];
+            if (empty($value['parent_entity_id'])) {
+                $allEntities[$key]['parent'] = '#';
+                $allEntities[$key]['icon'] = "fa fa-building";
             } else {
-                $allEntities[$key]['disabled'] = false;
+                $allEntities[$key]['parent'] = $value['parent_entity_id'];
+                $allEntities[$key]['icon'] = "fa fa-sitemap";
+            }
+            $allEntities[$key]['text'] = $value['entity_label'];
+            if (in_array($value['entity_id'], $userEntities) || !in_array($value['entity_id'], $entitiesAllowedForAdministrator)) {
+                $allEntities[$key]['state']['opened'] = true;
+                $allEntities[$key]['state']['selected'] = true;
             }
         }
 
diff --git a/package.json b/package.json
index 5c5deddb8155ddde5532d838a48d8f15867277f4..43c9b7e71f4bd07ee1ef59ac831463e8f928b7e1 100755
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "jquery": "^3.2.1",
     "jquery-typeahead": "^2.8.0",
     "jquery.nicescroll": "^3.6.8",
+    "jstree-bootstrap-theme": "^1.0.1",
     "photoswipe": "^4.1.2",
     "tinymce": "^4.6.2",
     "tooltipster": "^4.2.5",