diff --git a/App/Views/Employe/Conges/Liste.php b/App/Views/Employe/Conges/Liste.php
index 4ce10a9e5..d38399534 100644
--- a/App/Views/Employe/Conges/Liste.php
+++ b/App/Views/Employe/Conges/Liste.php
@@ -1,4 +1,4 @@
-<?php
+<?php declare(strict_types = 1);
 /*
  * $canAskConge
  * $titre
@@ -9,99 +9,104 @@
 <?php if ($canAskConge) : ?>
 <a href="<?= ROOT_PATH ?>utilisateur/user_index.php?onglet=nouvelle_absence" style="float:right" class="btn btn-success"><?= _('divers_nouvelle_absence') ?></a>
 <?php endif; ?>
-<h1><?= $titre ?></h1>
-<form method="post" action="" class="form-inline search" role="form">
-    <div class="form-group">
-        <label class="control-label col-md-4" for="statut">Statut&nbsp;:</label>
-        <div class="col-md-8">
-            <select class="form-control" name="search[p_etat]" id="statut">
-                <option value="all"><?= _('tous') ?></option>
-                <?php foreach (\App\Models\Conge::getOptionsStatuts() as $key => $value) : ?>
-                    <?php
-                    $selected = (isset($champsRecherche['p_etat']) && $key == $champsRecherche['p_etat'])
-                        ? 'selected="selected"'
-                        : '';
-                    ?>
-                    <option value="<?= $key ?>" <?= $selected ?>><?= $value ?></option>
-                <?php endforeach; ?>
-            </select>
+<h1><?= $titreTB ?></h1>
+<?php require_once VIEW_PATH . 'Employe/TableauBord.php'; ?>
+
+<div class="liste-conge wrapper" id="main-content">
+    <h1><?= $titre ?></h1>
+    <form method="post" action="" class="form-inline search" role="form">
+        <div class="form-group">
+            <label class="control-label col-md-4" for="statut">Statut&nbsp;:</label>
+            <div class="col-md-8">
+                <select class="form-control" name="search[p_etat]" id="statut">
+                    <option value="all"><?= _('tous') ?></option>
+                    <?php foreach (\App\Models\Conge::getOptionsStatuts() as $key => $value) : ?>
+                        <?php
+                        $selected = (isset($champsRecherche['p_etat']) && $key == $champsRecherche['p_etat'])
+                            ? 'selected="selected"'
+                            : '';
+                        ?>
+                        <option value="<?= $key ?>" <?= $selected ?>><?= $value ?></option>
+                    <?php endforeach; ?>
+                </select>
+            </div>
         </div>
-    </div>
-    <div class="form-group ">
-        <label class="control-label col-md-4" for="type">Type&nbsp;:</label>
-        <div class="col-md-8">
-            <select class="form-control" name="search[type]" id="type">
-                <option value="all"><?= _('tous') ?></option>
-                <?php foreach (\utilisateur\Fonctions::getOptionsTypeConges() as $key => $value) : ?>
-                    <?php
-                    $selected = (isset($champsRecherche['type']) && $key == $champsRecherche['type'])
-                        ? 'selected="selected"'
-                        : '';
-                    ?>
-                    <option value="<?= $key ?>" <?= $selected ?>><?= $value ?></option>
-                <?php endforeach; ?>
-            </select>
+        <div class="form-group ">
+            <label class="control-label col-md-4" for="type">Type&nbsp;:</label>
+            <div class="col-md-8">
+                <select class="form-control" name="search[type]" id="type">
+                    <option value="all"><?= _('tous') ?></option>
+                    <?php foreach (\utilisateur\Fonctions::getOptionsTypeConges() as $key => $value) : ?>
+                        <?php
+                        $selected = (isset($champsRecherche['type']) && $key == $champsRecherche['type'])
+                            ? 'selected="selected"'
+                            : '';
+                        ?>
+                        <option value="<?= $key ?>" <?= $selected ?>><?= $value ?></option>
+                    <?php endforeach; ?>
+                </select>
+            </div>
         </div>
-    </div>
-    <div class="form-group">
-        <label class="control-label col-md-4" for="annee">Année&nbsp;:</label>
-        <div class="col-md-8">
-            <select class="form-control" name="search[annee]" id="sel1">
-                <?php foreach (\utilisateur\Fonctions::getOptionsAnnees() as $key => $value) : ?>
-                    <?php
-                    $selected = (isset($champsRecherche['annee']) && $key == $champsRecherche['annee'])
-                        ? 'selected="selected"'
-                        : '';
-                    ?>
-                    <option value="<?= $key ?>" <?= $selected ?>><?= $value ?></option>
-                <?php endforeach; ?>
-            </select>
+        <div class="form-group">
+            <label class="control-label col-md-4" for="annee">Année&nbsp;:</label>
+            <div class="col-md-8">
+                <select class="form-control" name="search[annee]" id="sel1">
+                    <?php foreach (\utilisateur\Fonctions::getOptionsAnnees() as $key => $value) : ?>
+                        <?php
+                        $selected = (isset($champsRecherche['annee']) && $key == $champsRecherche['annee'])
+                            ? 'selected="selected"'
+                            : '';
+                        ?>
+                        <option value="<?= $key ?>" <?= $selected ?>><?= $value ?></option>
+                    <?php endforeach; ?>
+                </select>
+            </div>
         </div>
-    </div>
-    <div class="form-group">
-        <div class="input-group">
-            <button type="submit" class="btn btn-default"><i class="fa fa-search" aria-hidden="true"></i></button>&nbsp;<a href="<?= ROOT_PATH ?>utilisateur/user_index.php?onglet=liste_conge" type="reset" class="btn btn-default">Reset</a>
+        <div class="form-group">
+            <div class="input-group">
+                <button type="submit" class="btn btn-default"><i class="fa fa-search" aria-hidden="true"></i></button>&nbsp;<a href="<?= ROOT_PATH ?>utilisateur/user_index.php?onglet=liste_conge" type="reset" class="btn btn-default">Reset</a>
+            </div>
         </div>
-    </div>
-</form>
-<table class="table table-hover table-responsive table-condensed table-striped">
-    <thead>
-        <tr>
-            <th><?= _('divers_debut_maj_1') ?></th>
-            <th><?= _('divers_fin_maj_1') ?></th>
-            <th><?= _('divers_type_maj_1') ?></th>
-            <th><?= _('divers_nb_jours_pris_maj_1') ?></th>
-            <th>Statut</th>
-            <th></th>
-            <th></th>
-        </tr>
-    </thead>
-    <tbody>
-    <?php if (empty($listeConges)) : ?>
-        <tr><td colspan="8"><center><?= _('aucun_resultat') ?></center></td></tr>
-    <?php else : ?>
-        <?php foreach ($dataConges as $conges) : ?>
-        <tr>
-            <td><?= $conges->dateDebut ?> <span class="demi"><?= $conges->periodeDebut ?></span></td>
-            <td class="histo"><?= $conges->dateFin ?> <span class="demi"><?= $conges->periodeFin ?></span></td>
-            <td class="histo"><?= $conges->libelle ?></td>
-            <td class="histo"><?= $conges->nbJours ?></td>
-            <td class="histo"><?= $conges->statut ?></td>
-            <td class="histo"><i class="fa fa-comments" aria-hidden="true" title="<?= $conges->messageDemande ?><?= $conges->messageReponse ?>"></i></td>
-            <td>
-            <?php if ($conges->isModifiable) : ?>
-                <a href="user_index.php?p_num=<?= $conges->numConge ?>&amp;onglet=modif_demande"><i class="fa fa-pencil"></i></a>
-            <?php else : ?>
-                <i class="fa fa-pencil disabled"></i>
-            <?php endif; ?>
-            <?php if ($conges->isSupprimable) : ?>
-                <a href="user_index.php?p_num=<?= $conges->numConge ?>&amp;onglet=suppr_demande"><i class="fa fa-times-circle"></i></a>
-            <?php else : ?>
-                <i class="fa fa-times-circle disabled"></i>
-            <?php endif; ?>
-            </td>
-        </tr>
-        <?php endforeach ?>
-    <?php endif ?>
-    </tbody>
-</table>
+    </form>
+    <table class="table table-hover table-responsive table-condensed table-striped">
+        <thead>
+            <tr>
+                <th><?= _('divers_debut_maj_1') ?></th>
+                <th><?= _('divers_fin_maj_1') ?></th>
+                <th><?= _('divers_type_maj_1') ?></th>
+                <th><?= _('divers_nb_jours_pris_maj_1') ?></th>
+                <th>Statut</th>
+                <th></th>
+                <th></th>
+            </tr>
+        </thead>
+        <tbody>
+        <?php if (empty($listeConges)) : ?>
+            <tr><td colspan="8"><center><?= _('aucun_resultat') ?></center></td></tr>
+        <?php else : ?>
+            <?php foreach ($dataConges as $conges) : ?>
+            <tr>
+                <td><?= $conges->dateDebut ?> <span class="demi"><?= $conges->periodeDebut ?></span></td>
+                <td class="histo"><?= $conges->dateFin ?> <span class="demi"><?= $conges->periodeFin ?></span></td>
+                <td class="histo"><?= $conges->libelle ?></td>
+                <td class="histo"><?= $conges->nbJours ?></td>
+                <td class="histo"><?= $conges->statut ?></td>
+                <td class="histo"><i class="fa fa-comments" aria-hidden="true" title="<?= $conges->messageDemande ?><?= $conges->messageReponse ?>"></i></td>
+                <td>
+                <?php if ($conges->isModifiable) : ?>
+                    <a href="user_index.php?p_num=<?= $conges->numConge ?>&amp;onglet=modif_demande"><i class="fa fa-pencil"></i></a>
+                <?php else : ?>
+                    <i class="fa fa-pencil disabled"></i>
+                <?php endif; ?>
+                <?php if ($conges->isSupprimable) : ?>
+                    <a href="user_index.php?p_num=<?= $conges->numConge ?>&amp;onglet=suppr_demande"><i class="fa fa-times-circle"></i></a>
+                <?php else : ?>
+                    <i class="fa fa-times-circle disabled"></i>
+                <?php endif; ?>
+                </td>
+            </tr>
+            <?php endforeach ?>
+        <?php endif ?>
+        </tbody>
+    </table>
+</div>
diff --git a/App/Views/Employe/TableauBord.php b/App/Views/Employe/TableauBord.php
new file mode 100644
index 000000000..214432f54
--- /dev/null
+++ b/App/Views/Employe/TableauBord.php
@@ -0,0 +1,163 @@
+<?php declare(strict_types = 1);
+
+/*
+ * $baseURIApi
+ */
+
+?>
+<div id="inner-content">
+    <div id="loader-bar" class="progress">
+        <div class="progress-bar progress-bar-striped active" role="progressbar"
+        aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width:100%">
+        </div>
+    </div>
+    <div class="wrapper">
+        <div class="col-sm-12" v-for="s in soldesCongeNatif"> 
+            <div class="col-sm-2">
+                <h4 class="progress-label">{{ s.libelle }}</h4>
+            </div>
+            <div class="col-sm-10">
+                <div class="progress">
+                    <div role="progressbar" class="progress-bar progress-bar-success" :style="getWidthRestant(s)">Restants : {{ getRestant(s) }}</div>
+                    <div role="progressbar" class="progress-bar progress-bar" :style="getWidthReliquat(s)">Reliquats : {{ getReliquat(s) }}</div>
+                    <div role="progressbar" class="progress-bar progress-bar" :style="getWidthConsomme(s)">Consommés : {{ getConsomme(s) }}</div>
+                </div>
+            </div>
+        </div>
+        <hr>
+        <a href="#plus" data-toggle="collapse">Plus...</a>
+        <div id="plus" class="collapse">
+            <div class="col-sm-12" v-for="s in soldesConge"> 
+                <div class="col-sm-2">
+                    <h4 class="progress-label">{{ s.libelle }}</h4>
+                </div>
+                <div class="col-sm-10">
+                    <div class="progress">
+                        <div role="progressbar" class="progress-bar progress-bar-success" :style="getWidthRestant(s)">Restants : {{ getRestant(s) }}</div>
+                        <div role="progressbar" class="progress-bar progress-bar" :style="getWidthReliquat(s)">Reliquats : {{ getReliquat(s) }}</div>
+                        <div role="progressbar" class="progress-bar progress-bar" :style="getWidthConsomme(s)">Consommés : {{ getConsomme(s) }}</div>
+                    </div>
+                </div>
+            </div>
+           <div class="col-sm-4" v-for="s in soldesAutre">
+                <dl class="row">
+                    <dt class="col-sm-5">{{ s.libelle }}</dt>
+                    <dd class="col-sm-5">{{ getRestant(s) }} Jours</dd>
+                </dl>
+            </div>
+            <div class="col-sm-4" v-if="soldeHeure != 0">
+                <dl class="row">
+                    <dt class="col-sm-5">Heure</dt>
+                    <dd class="col-sm-5">{{ getSoldeHeure(soldeHeure) }}</dd>
+                </dl>
+            </div>
+        </div>
+    </div>
+</div>
+<script>
+
+var vm = new Vue({
+    el: '#inner-content',
+    data: {
+        types : {},
+        soldesCongeNatif : {},
+        soldesConge : {},
+        soldesAutre : {},
+        soldeHeure : 0,
+        axios : instance
+    },
+    computed: {
+    },
+    'methods' : {
+        getRestant : function (solde) {
+            return solde['solde'];
+        },
+        getWidthRestant : function (solde) {
+            return "width:" + ((solde['solde'] - solde['reliquat']) / solde['solde_annuel'] * 100) + "%";
+        },
+        getReliquat : function (solde) {
+            return solde['reliquat'];
+        },
+        getWidthReliquat : function (solde) {
+            return "width:" + (solde['reliquat'] / solde['solde_annuel'] * 100) + "%";
+        },
+        getConsomme : function (solde) {
+            return (solde['solde_annuel'] - solde['solde']);
+        },
+        getWidthConsomme : function (solde) {
+            return "width:" + ((solde['solde_annuel'] - solde['solde']) / solde['solde_annuel'] * 100) + "%; background-color:gray !important;";
+        },
+        getSoldeHeure : function (solde) {
+            var heures   = Math.floor(solde / 3600);
+            var minutes = Math.floor((solde - (heures * 3600)) / 60);
+            if (heures   < 10) {heures   = "0"+heures;}
+            if (minutes < 10) {minutes = "0"+minutes;}
+            return heures + " heure(s) et " + minutes + " minute(s)";
+        }
+    },
+    created () {
+        var vm = this;
+        this.axios.get('/employe/me')
+        .then((response) => {
+            if (typeof response.data != 'object') {
+                return;
+            }
+            const employe = response.data.data;
+            
+            vm.soldeHeure = employe.heure_solde;
+        })
+        .catch((error) => {
+            console.log(error.response);
+            console.error(error);
+        }),
+        this.axios.get('/absence/type')
+        .then((response) => {
+            if (typeof response.data != 'object') {
+                return;
+            }
+            const types = response.data.data;
+            vm.types = types;
+        })
+        .catch((error) => {
+            console.log(error.response);
+            console.error(error);
+        }),
+        this.axios.get('/employe/me/solde')
+        .then((response) => {
+            if (typeof response.data != 'object') {
+                return;
+            }
+            const soldes = response.data.data;
+            var soldesLibelleConges = new Array();
+            var soldesLibelleNatif = new Array();
+            var soldesLibelleAutre = new Array();
+            for (var i = 0; i < soldes.length; ++i) {
+                var solde = soldes[i];
+                for (var j = 0; j < vm.types.length; ++j) {
+                    var type = vm.types[j];
+                    if (solde.type_absence === type.id) {
+                        solde.libelle = type.libelle;
+                        if (type.typeNatif === true && type.type === 'conges') {
+                            soldesLibelleNatif.push(solde);
+                        } else if (type.type === 'conges') {
+                            soldesLibelleConges.push(solde);
+                        } else {
+                            soldesLibelleAutre.push(solde);
+                        }
+                    }
+                }
+            }
+        document.getElementById('loader-bar').classList.add('hidden');
+        vm.soldesCongeNatif = soldesLibelleNatif;
+        vm.soldesConge = soldesLibelleConges;
+        vm.soldesAutre = soldesLibelleAutre;
+        })
+        .catch((error) => {
+            console.log(error.response);
+            console.error(error);
+        });
+    },
+    updated () {
+    }
+});
+</script>
diff --git a/Public/Assets/Css/reboot.css b/Public/Assets/Css/reboot.css
index 0bee87527..3ca6300ec 100644
--- a/Public/Assets/Css/reboot.css
+++ b/Public/Assets/Css/reboot.css
@@ -240,6 +240,14 @@ content-title {
     font-size: 18px;
     font-size: 1.8rem
 }
+
+.progress-label {
+    float: left;
+    margin-right: 1em;
+    margin-bottom: 20px;
+    margin-top: 0px;
+}
+
 #main-content.traite_user .calendar-nav {
     margin: 0;
     padding: 0;
diff --git a/utilisateur/user_index.php b/utilisateur/user_index.php
index 5613c5bc0..42fd6a913 100644
--- a/utilisateur/user_index.php
+++ b/utilisateur/user_index.php
@@ -1,10 +1,11 @@
-<?php
+<?php declare(strict_types = 1);
 define('ROOT_PATH', '../');
 define('INCLUDE_PATH',     ROOT_PATH . 'includes/');
 require_once INCLUDE_PATH . 'define.php';
 require_once INCLUDE_PATH . 'session.php';
 
 $config = new \App\Libraries\Configuration(\includes\SQL::singleton());
+$baseURIApi = $config->getUrlAccueil() . '/api/';
 
 // SERVER
 $PHP_SELF = filter_var($_SERVER['PHP_SELF'], FILTER_SANITIZE_URL);
@@ -42,16 +43,6 @@
 
 header_menu('', 'Libertempo : ' . _('user'));
 
-/*********************************/
-/*   AFFICHAGE DU RECAP ...    */
-/*********************************/
-
-echo "<div class=\"wrapper\">\n";
-echo '<h3>' . _('tableau_recap') . '</h3>';
-echo affiche_tableau_bilan_conges_user($_SESSION['userlogin']);
-echo "<hr/>\n";
-echo "</div>\n";
-
 /*********************************/
 /*   AFFICHAGE DE L'ONGLET ...    */
 /*********************************/
diff --git a/utilisateur/user_liste_conge.php b/utilisateur/user_liste_conge.php
index 243affd76..9adcfad4a 100644
--- a/utilisateur/user_liste_conge.php
+++ b/utilisateur/user_liste_conge.php
@@ -27,6 +27,7 @@ function isSearch(array $post)
 
 $canAskConge = $config->canUserSaisieDemande() || $config->canUserSaisieMission();
 $titre = _('user_liste_conge_titre');
+$titreTB = ('Récapitulatif');
 $params = $champsSql + [
     'p_login' => $_SESSION['userlogin'],
 ]; // champs par défaut écrasés par posté