[backend] Rapports : interactivité JS sections Utilisateurs / Points de vente / Distributions

backend/assets/VuejsReportIndexAsset.php

@@ -0,0 +1,62 @@
+<?php
+/** 
+Copyright distrib (2018) 
+
+contact@opendistrib.net
+
+Ce logiciel est un programme informatique servant à aider les producteurs 
+à distribuer leur production en circuits courts. 
+
+Ce logiciel est régi par la licence CeCILL soumise au droit français et
+respectant les principes de diffusion des logiciels libres. Vous pouvez
+utiliser, modifier et/ou redistribuer ce programme sous les conditions
+de la licence CeCILL telle que diffusée par le CEA, le CNRS et l'INRIA 
+sur le site "http://www.cecill.info".
+
+En contrepartie de l'accessibilité au code source et des droits de copie,
+de modification et de redistribution accordés par cette licence, il n'est
+offert aux utilisateurs qu'une garantie limitée.  Pour les mêmes raisons,
+seule une responsabilité restreinte pèse sur l'auteur du programme,  le
+titulaire des droits patrimoniaux et les concédants successifs.
+
+A cet égard  l'attention de l'utilisateur est attirée sur les risques
+associés au chargement,  à l'utilisation,  à la modification et/ou au
+développement et à la reproduction du logiciel par l'utilisateur étant 
+donné sa spécificité de logiciel libre, qui peut le rendre complexe à 
+manipuler et qui le réserve donc à des développeurs et des professionnels
+avertis possédant  des  connaissances  informatiques approfondies.  Les
+utilisateurs sont donc invités à charger  et  tester  l'adéquation  du
+logiciel à leurs besoins dans des conditions permettant d'assurer la
+sécurité de leurs systèmes et ou de leurs données et, plus généralement, 
+à l'utiliser et l'exploiter dans les mêmes conditions de sécurité. 
+
+Le fait que vous puissiez accéder à cet en-tête signifie que vous avez 
+pris connaissance de la licence CeCILL, et que vous en avez accepté les
+termes.
+*/
+
+namespace backend\assets;
+
+use yii\web\AssetBundle;
+use yii ;
+
+/**
+ * @author Qiang Xue <qiang.xue@gmail.com>
+ * @since 2.0
+ */
+class VuejsReportIndexAsset extends \common\components\MyAssetBundle
+{
+    public $basePath = '@webroot';
+    public $baseUrl = '@web';
+    public $css = [];
+    public $js = [];
+    public $depends = [
+        'common\assets\CommonAsset'
+    ];
+    
+    public function __construct() 
+    {
+        parent::__construct() ;
+        $this->addAsset('js','js/vuejs/report-index.js') ;
+    }
+}

backend/controllers/ReportController.php

@@ -67,7 +67,13 @@ class ReportController extends BackendController
     public function actionIndex() 
     {
         $this->checkProductsPointsSale() ;
-        
+        return $this->render('index') ;
+    }
+    
+    public function actionAjaxInit() 
+    {
+        \Yii::$app->response->format = \yii\web\Response::FORMAT_JSON;
+               
         $usersArray = User::findBy()->all() ;
         $pointsSaleArray = PointSale::searchAll() ;
         
@@ -78,10 +84,17 @@ class ReportController extends BackendController
         $lastDistribution = Distribution::searchOne([], [
             'orderby' => 'id DESC'
         ]) ;
+        
         $firstYear = date('Y',strtotime($firstDistribution->date)) ;
         $lastYear = date('Y',strtotime($lastDistribution->date)) ;
+        $distributionYearsArray = [] ;
+        for($year = $firstYear; $year <= $lastYear; $year ++) {
+            $distributionYearsArray[] = $year ;
+        }
         
-        $distributionsArray = Distribution::searchAll([], [
+        $distributionsArray = Distribution::searchAll([
+            'distribution.active' => 1
+        ], [
             'orderby' => 'date ASC',
         ]) ;
         $distributionsByMonthArray = [] ;
@@ -89,20 +102,22 @@ class ReportController extends BackendController
             $month = date('Y-m', strtotime($distribution->date)) ;
             if(!isset($distributionsByMonthArray[$month])) {
                 $distributionsByMonthArray[$month] = [
-                    'month' => strftime('%B %Y', strtotime($distribution->date)),
+                    'display' => 0,
+                    'year' => date('Y',strtotime($distribution->date)),
+                    'month' => strftime('%B', strtotime($distribution->date)),
                     'distributions' => []
                 ] ;
             }
+            $distribution->date = strftime('%A %d %B', strtotime($distribution->date)) ;
             $distributionsByMonthArray[$month]['distributions'][] = $distribution ;
         }
-       
-        return $this->render('index', [
+        
+        return  [
             'usersArray' => $usersArray,
             'pointsSaleArray' => $pointsSaleArray,
-            'firstYear' => $firstYear,
-            'lastYear' => $lastYear,
-            'distributionByMonthArray' => $distributionsByMonthArray
-        ]) ;
+            'distributionYearsArray' => $distributionYearsArray,
+            'distributionsByMonthArray' => $distributionsByMonthArray
+        ] ;
     }
     
 }

backend/views/report/index.php

@@ -36,88 +36,79 @@ pris connaissance de la licence CeCILL, et que vous en avez accepté les
 termes.
 */
 
+\backend\assets\VuejsReportIndexAsset::register($this);
+
 $this->setTitle('Rapports') ;
 $this->addBreadcrumb('Rapports') ;
 
 ?>
-
-<div class="col-md-6">
-    <div id="nav-sections-report">
-        <a href="#" class="btn btn-primary">Utilisateurs <span class="glyphicon glyphicon-triangle-bottom"></span></a>
-        <a href="#" class="btn btn-default">Points de vente</a>
-        <a href="#" class="btn btn-default">Distributions</a>
-    </div>
-    <div id="section-users" class="panel panel-default section">
-        <div class="panel-body">
-            <div id="wrapper-search-user">
-                <span class="glyphicon glyphicon-search"></span>
-                <input type="text" class="form-control" id="input-search-user" placeholder="Rechercher" />
-            </div>
-            <div class="content-max-height">
-                <ul id="list-users">
-                    <?php foreach($usersArray as $user): ?>
-                        <li>
-                            <input type="checkbox" id="user_<?= $user['user_id']; ?>" /> 
-                            <label for="user_<?= $user['user_id'] ?>"><?= Html::encode($user['lastname'].' '.$user['name']); ?></label>
+<div id="app-report-index">
+    <div class="col-md-6">
+        <div id="nav-sections-report">
+            <a v-for="section in sections" :class="'btn-section btn '+(currentSection == section.id ? 'btn-primary' : 'btn-default')" @click="changeSection(section)">{{ section.name }}<span v-if="currentSection == section.id"> <span class="glyphicon glyphicon-triangle-bottom"></span></span></a>
+        </div>
+        <div id="section-users" class="panel panel-default section" v-show="currentSection == 'users'">
+            <div class="panel-body">
+                <div id="wrapper-search-user">
+                    <span class="glyphicon glyphicon-search"></span>
+                    <input type="text" class="form-control" id="input-search-user" placeholder="Rechercher" v-model="termSearchUser" />
+                </div>
+                <div class="content-max-height">
+                    <ul id="list-users">
+                        <li v-for="user in usersArray" v-if="!termSearchUser.length || (termSearchUser.length && (user.lastname.toLowerCase().indexOf(termSearchUser.toLowerCase()) != -1 || user.name.toLowerCase().indexOf(termSearchUser.toLowerCase()) != -1 ))">
+                            <input type="checkbox" :id="'user_'+user.user_id" /> 
+                            <label :for="'user_'+user.user_id" v-html="user.lastname+' '+user.name"></label>
                         </li>
-                    <?php endforeach; ?>
-                </ul>
+                    </ul>
+                </div>
             </div>
         </div>
-    </div>
-    <div id="section-points-sale" class="panel panel-default section">
-        <div class="panel-body">
-            <div class="content-max-height">
-                <ul class="list" id="list-points-sale">
-                    <?php foreach($pointsSaleArray as $pointSale): ?>
-                        <li>
-                            <input type="checkbox" id="pointsale_<?= $pointSale->id; ?>" /> 
-                            <label for="pointsale_<?= $pointSale->id ?>"><?= Html::encode($pointSale->name); ?></label>
+        <div id="section-points-sale" class="panel panel-default section" v-show="currentSection == 'points-sale'">
+            <div class="panel-body">
+                <div class="content-max-height">
+                    <ul class="list" id="list-points-sale">
+                        <li v-for="pointSale in pointsSaleArray">
+                            <input type="checkbox" :id="'pointsale_'+pointSale.id" /> 
+                            <label :for="'pointsale_'+pointSale.id" v-html="pointSale.name"></label>
                         </li>
-                    <?php endforeach; ?>
-                </ul>
+                    </ul>
+                </div>
             </div>
         </div>
-    </div>
-    <div id="section-distributions" class="panel panel-default section">
-        <div class="panel-body">
-            <div id="wrapper-select-year">
-                <select class="form-control">
-                    <?php for($i = $firstYear ; $i <= $lastYear ; $i++): ?>
-                    <option value="<?= $i ?>"><?= $i ?></option>
-                    <?php endfor; ?>
-                </select>
-            </div>
-            <div class="content-max-height">
-                <?php foreach($distributionByMonthArray as $distributionsMonth): ?>
-                    <a href="#" class="btn btn-default month-distribution"><?= $distributionsMonth['month']; ?></a>
-                    <?php if(count($distributionsMonth['distributions'])): ?>
-                        <ul>
-                        <?php foreach($distributionsMonth['distributions'] as $distribution): ?>
-                            <li>
-                                <input type="checkbox" id="distribution_<?= $distribution->id ?>" />
-                                <label for="distribution_<?= $distribution->id ?>"><?= strftime('%A %d %B', strtotime($distribution->date)); ?></label>
+        <div id="section-distributions" class="panel panel-default section" v-show="currentSection == 'distributions'">
+            <div class="panel-body">
+                <div id="wrapper-select-year">
+                    <select class="form-control" v-model="distributionYear">                        
+                        <option v-for="year in distributionYearsArray">{{ year }}</option>
+                    </select>
+                </div>
+                <div class="content-max-height">
+                    <div class="distribution-month" v-for="distributionsMonth in distributionsByMonthArray" v-if="distributionsMonth.year == distributionYear && distributionsMonth.distributions.length > 0">
+                        <a class="btn btn-default link-month-distribution" @click="distributionsMonth.display = !distributionsMonth.display">{{ distributionsMonth.month }} <span class="glyphicon glyphicon-menu-down"></span></a>
+                        <ul v-if="distributionsMonth.display">
+                            <li v-for="distribution in distributionsMonth.distributions">
+                                <input type="checkbox" :id="'distribution_'+distribution.id" />
+                                <label :for="'distribution_'+distribution.id">{{ distribution.date }}</label>
                             </li>
-                        <?php endforeach; ?>
                         </ul>
-                    <?php endif; ?>
-                <?php endforeach; ?>
+                    </div>
+                </div>
             </div>
         </div>
     </div>
-</div>
 
-<div class="col-md-6">
-    <div id="report" class="panel panel-default">
-        <div class="panel-heading">
-            Rapport
-        </div>
-        <div class="panel-body">
-            <div id="summary">
-                Résumé
+    <div class="col-md-6">
+        <div id="report" class="panel panel-default">
+            <div class="panel-heading">
+                Rapport
             </div>
-            <div id="report">
-                <a href="#" class="btn btn-primary">Générer</a>
+            <div class="panel-body">
+                <div id="summary">
+                    Résumé
+                </div>
+                <div id="report">
+                    <a href="#" class="btn btn-primary">Générer</a>
+                </div>
             </div>
         </div>
     </div>

backend/web/css/screen.css

@@ -1476,97 +1476,98 @@ body.skin-black .content-wrapper .btn {
 /* line 122, ../sass/_adminlte.scss */
 body.skin-black .content-wrapper .btn-default {
   color: #333;
+  background-color: white;
 }
-/* line 126, ../sass/_adminlte.scss */
+/* line 127, ../sass/_adminlte.scss */
 body.skin-black .content-wrapper .btn-primary {
   background-color: #FF7F00;
   color: white;
   border-color: #FF7F00;
 }
-/* line 133, ../sass/_adminlte.scss */
+/* line 134, ../sass/_adminlte.scss */
 body.skin-black .content-wrapper .alert a {
   color: white;
 }
-/* line 136, ../sass/_adminlte.scss */
+/* line 137, ../sass/_adminlte.scss */
 body.skin-black .content-wrapper .alert a.btn {
   color: #333;
   text-decoration: none;
 }
-/* line 143, ../sass/_adminlte.scss */
+/* line 144, ../sass/_adminlte.scss */
 body.skin-black .content-wrapper .callout h4 .fa {
   margin-right: 7px;
 }
-/* line 146, ../sass/_adminlte.scss */
+/* line 147, ../sass/_adminlte.scss */
 body.skin-black .content-wrapper .callout a {
   color: white;
 }
-/* line 149, ../sass/_adminlte.scss */
+/* line 150, ../sass/_adminlte.scss */
 body.skin-black .content-wrapper .callout .btn {
   color: #333;
   text-decoration: none;
 }
-/* line 156, ../sass/_adminlte.scss */
+/* line 157, ../sass/_adminlte.scss */
 body.skin-black .content-wrapper .table th {
   font-size: 13px;
 }
-/* line 159, ../sass/_adminlte.scss */
+/* line 160, ../sass/_adminlte.scss */
 body.skin-black .content-wrapper .table th.column-actions, body.skin-black .content-wrapper .table td.column-actions {
   width: 150px;
   text-align: right;
 }
-/* line 163, ../sass/_adminlte.scss */
+/* line 164, ../sass/_adminlte.scss */
 body.skin-black .content-wrapper .table td.text-small, body.skin-black .content-wrapper .table th.text-small {
   font-size: 12px;
 }
-/* line 168, ../sass/_adminlte.scss */
+/* line 169, ../sass/_adminlte.scss */
 body.skin-black .content-wrapper .pagination > .active > a, body.skin-black .content-wrapper .pagination > .active > span, body.skin-black .content-wrapper .pagination > .active > a:hover, body.skin-black .content-wrapper .pagination > .active > span:hover, body.skin-black .content-wrapper .pagination > .active > a:focus, body.skin-black .content-wrapper .pagination > .active > span:focus {
   background-color: #FF7F00;
   border: solid 1px #FF7F00;
   color: white;
 }
-/* line 173, ../sass/_adminlte.scss */
+/* line 174, ../sass/_adminlte.scss */
 body.skin-black .content-wrapper .pagination > li > a, body.skin-black .content-wrapper .pagination > li > span {
   color: #FF7F00;
 }
-/* line 175, ../sass/_adminlte.scss */
+/* line 176, ../sass/_adminlte.scss */
 body.skin-black .content-wrapper .pagination > li > a:hover, body.skin-black .content-wrapper .pagination > li > span:hover {
   color: #cc6600;
 }
-/* line 182, ../sass/_adminlte.scss */
+/* line 183, ../sass/_adminlte.scss */
 body.skin-black .main-footer a {
   color: #FF7F00;
 }
 
-/* line 188, ../sass/_adminlte.scss */
+/* line 189, ../sass/_adminlte.scss */
 body.login-page {
   background: none;
   background-color: white;
 }
-/* line 192, ../sass/_adminlte.scss */
+/* line 193, ../sass/_adminlte.scss */
 body.login-page .login-box .login-logo {
   text-align: center;
   font-family: "comfortaalight";
 }
-/* line 195, ../sass/_adminlte.scss */
+/* line 196, ../sass/_adminlte.scss */
 body.login-page .login-box .login-logo img {
   width: 50px;
 }
-/* line 200, ../sass/_adminlte.scss */
+/* line 201, ../sass/_adminlte.scss */
 body.login-page .login-box .login-box-body .btn-primary {
   background-color: #FF7F00;
   border-color: #FF7F00;
   padding: 5px 10px;
 }
-/* line 205, ../sass/_adminlte.scss */
+/* line 206, ../sass/_adminlte.scss */
 body.login-page .login-box .login-box-body .btn-primary:active {
   background-color: #ff8c1a;
   border-color: #FF7F00;
 }
-/* line 211, ../sass/_adminlte.scss */
+/* line 212, ../sass/_adminlte.scss */
 body.login-page .login-box .login-box-body a {
   color: #FF7F00;
 }
-/* line 213, ../sass/_adminlte.scss */
+/* line 214, ../sass/_adminlte.scss */
 body.login-page .login-box .login-box-body a:hover {
   color: #ff8c1a;
 }
@@ -2071,56 +2072,66 @@ Le fait que vous puissiez accéder à cet en-tête signifie que vous avez
 pris connaissance de la licence CeCILL, et que vous en avez accepté les
 termes.
 */
-/* line 38, ../sass/report/_index.scss */
+/* line 40, ../sass/report/_index.scss */
+.report-index #nav-sections-report .btn-section {
+  margin-right: 5px;
+}
+/* line 45, ../sass/report/_index.scss */
 .report-index .section {
   margin-top: 10px;
 }
-/* line 40, ../sass/report/_index.scss */
+/* line 47, ../sass/report/_index.scss */
 .report-index .section .content-max-height {
-  max-height: 300px;
+  max-height: 400px;
   overflow-y: scroll;
 }
-/* line 44, ../sass/report/_index.scss */
+/* line 51, ../sass/report/_index.scss */
 .report-index .section .content-max-height ul {
   list-style-type: none;
   margin-left: 0px;
   padding-left: 5px;
 }
-/* line 50, ../sass/report/_index.scss */
+/* line 57, ../sass/report/_index.scss */
+.report-index .section .content-max-height ul li input {
+  position: relative;
+  top: 2px;
+}
+/* line 61, ../sass/report/_index.scss */
 .report-index .section .content-max-height ul li label {
   font-weight: normal;
+  margin-bottom: 0px;
 }
-/* line 57, ../sass/report/_index.scss */
-.report-index #section-users {
-  display: none;
-}
-/* line 59, ../sass/report/_index.scss */
+/* line 70, ../sass/report/_index.scss */
 .report-index #section-users #wrapper-search-user {
   margin-bottom: 10px;
   position: relative;
 }
-/* line 62, ../sass/report/_index.scss */
+/* line 73, ../sass/report/_index.scss */
 .report-index #section-users #wrapper-search-user .glyphicon-search {
   position: absolute;
   top: 10px;
   right: 16px;
   color: gray;
 }
-/* line 70, ../sass/report/_index.scss */
-.report-index #section-points-sale {
-  display: none;
-}
-/* line 74, ../sass/report/_index.scss */
+/* line 85, ../sass/report/_index.scss */
 .report-index #section-distributions #wrapper-select-year {
   margin-bottom: 10px;
 }
-/* line 77, ../sass/report/_index.scss */
-.report-index #section-distributions .month-distribution {
+/* line 89, ../sass/report/_index.scss */
+.report-index #section-distributions .distribution-month {
+  margin-bottom: 10px;
+}
+/* line 91, ../sass/report/_index.scss */
+.report-index #section-distributions .distribution-month .link-month-distribution {
   display: block;
   text-transform: capitalize;
   text-align: left;
 }
-/* line 84, ../sass/report/_index.scss */
+/* line 96, ../sass/report/_index.scss */
+.report-index #section-distributions .distribution-month .link-month-distribution .glyphicon {
+  float: right;
+}
+/* line 105, ../sass/report/_index.scss */
 .report-index #report {
   margin-top: 43px;
 }

backend/web/js/vuejs/distribution-index.js

@@ -1,4 +1,39 @@
 
+/** 
+Copyright distrib (2018) 
+
+contact@opendistrib.net
+
+Ce logiciel est un programme informatique servant à aider les producteurs 
+à distribuer leur production en circuits courts. 
+
+Ce logiciel est régi par la licence CeCILL soumise au droit français et
+respectant les principes de diffusion des logiciels libres. Vous pouvez
+utiliser, modifier et/ou redistribuer ce programme sous les conditions
+de la licence CeCILL telle que diffusée par le CEA, le CNRS et l'INRIA 
+sur le site "http://www.cecill.info".
+
+En contrepartie de l'accessibilité au code source et des droits de copie,
+de modification et de redistribution accordés par cette licence, il n'est
+offert aux utilisateurs qu'une garantie limitée.  Pour les mêmes raisons,
+seule une responsabilité restreinte pèse sur l'auteur du programme,  le
+titulaire des droits patrimoniaux et les concédants successifs.
+
+A cet égard  l'attention de l'utilisateur est attirée sur les risques
+associés au chargement,  à l'utilisation,  à la modification et/ou au
+développement et à la reproduction du logiciel par l'utilisateur étant 
+donné sa spécificité de logiciel libre, qui peut le rendre complexe à 
+manipuler et qui le réserve donc à des développeurs et des professionnels
+avertis possédant  des  connaissances  informatiques approfondies.  Les
+utilisateurs sont donc invités à charger  et  tester  l'adéquation  du
+logiciel à leurs besoins dans des conditions permettant d'assurer la
+sécurité de leurs systèmes et ou de leurs données et, plus généralement, 
+à l'utiliser et l'exploiter dans les mêmes conditions de sécurité. 
+
+Le fait que vous puissiez accéder à cet en-tête signifie que vous avez 
+pris connaissance de la licence CeCILL, et que vous en avez accepté les
+termes.
+*/
 
 var app = new Vue({
     el: '#app-distribution-index',

backend/web/js/vuejs/producer-update.js

@@ -1,4 +1,40 @@
 
+/** 
+Copyright distrib (2018) 
+
+contact@opendistrib.net
+
+Ce logiciel est un programme informatique servant à aider les producteurs 
+à distribuer leur production en circuits courts. 
+
+Ce logiciel est régi par la licence CeCILL soumise au droit français et
+respectant les principes de diffusion des logiciels libres. Vous pouvez
+utiliser, modifier et/ou redistribuer ce programme sous les conditions
+de la licence CeCILL telle que diffusée par le CEA, le CNRS et l'INRIA 
+sur le site "http://www.cecill.info".
+
+En contrepartie de l'accessibilité au code source et des droits de copie,
+de modification et de redistribution accordés par cette licence, il n'est
+offert aux utilisateurs qu'une garantie limitée.  Pour les mêmes raisons,
+seule une responsabilité restreinte pèse sur l'auteur du programme,  le
+titulaire des droits patrimoniaux et les concédants successifs.
+
+A cet égard  l'attention de l'utilisateur est attirée sur les risques
+associés au chargement,  à l'utilisation,  à la modification et/ou au
+développement et à la reproduction du logiciel par l'utilisateur étant 
+donné sa spécificité de logiciel libre, qui peut le rendre complexe à 
+manipuler et qui le réserve donc à des développeurs et des professionnels
+avertis possédant  des  connaissances  informatiques approfondies.  Les
+utilisateurs sont donc invités à charger  et  tester  l'adéquation  du
+logiciel à leurs besoins dans des conditions permettant d'assurer la
+sécurité de leurs systèmes et ou de leurs données et, plus généralement, 
+à l'utiliser et l'exploiter dans les mêmes conditions de sécurité. 
+
+Le fait que vous puissiez accéder à cet en-tête signifie que vous avez 
+pris connaissance de la licence CeCILL, et que vous en avez accepté les
+termes.
+*/
+
 var app = new Vue({
     el: '#app-producer-update',
     data: {

backend/web/js/vuejs/report-index.js

@@ -0,0 +1,48 @@
+
+var app = new Vue({
+    el: '#app-report-index',
+    data: {
+        currentSection: 'users',
+        sections: [
+            {
+              name: 'Utilisateurs',
+              id: 'users',
+            },
+            {
+                name: 'Points de vente',
+                id: 'points-sale',
+            },
+            {
+                name: 'Distributions',
+                id: 'distributions',
+            }
+        ],
+        termSearchUser: '',
+        usersArray: [],
+        pointsSaleArray: [],
+        distributionYearsArray: [],
+        distributionYear: null,
+        distributionsByMonthArray: []
+    },
+    mounted: function() {
+        this.init() ;
+    },
+    methods: {
+        init: function() {
+            var app = this ;
+            axios.get("ajax-init",{params: {}})
+                .then(function(response) {
+                    app.usersArray = response.data.usersArray ;
+                    app.pointsSaleArray = response.data.pointsSaleArray ;
+                    app.distributionYearsArray = response.data.distributionYearsArray ;
+                    app.distributionYear = app.distributionYearsArray[app.distributionYearsArray.length - 1] ;
+                    app.distributionsByMonthArray = response.data.distributionsByMonthArray ;
+                });
+        },
+        changeSection: function(section) {
+            this.currentSection = section.id ;
+        }
+    }
+});
+
+

backend/web/sass/_adminlte.scss

@@ -121,6 +121,7 @@ body.skin-black {
         
         .btn-default {
             color: #333 ;
+            background-color: white ;
         }
         
         .btn-primary {

backend/web/sass/report/_index.scss

@@ -35,10 +35,17 @@ termes.
 */
 
 .report-index {
+    
+    #nav-sections-report {
+        .btn-section {
+            margin-right: 5px ;
+        }
+    }
+    
     .section {
         margin-top: 10px ;
         .content-max-height {
-            max-height: 300px ;
+            max-height: 400px ;
             overflow-y: scroll ;
             
             ul {
@@ -47,15 +54,19 @@ termes.
                 padding-left: 5px ;
 
                 li {
+                    input {
+                        position: relative ;
+                        top: 2px ;
+                    }
                     label {
                         font-weight: normal;
+                        margin-bottom: 0px ;
                     }
                 }
             }
         }
     }
     #section-users {
-        display: none ;
         #wrapper-search-user {
             margin-bottom: 10px ;
             position: relative ;
@@ -68,17 +79,27 @@ termes.
         }
     }
     #section-points-sale {
-        display: none ;
+
     }
     #section-distributions {
         #wrapper-select-year {
             margin-bottom: 10px ;
         }
-        .month-distribution {
-            display: block ;
-            text-transform: capitalize ;
-            text-align: left ;
+        
+        .distribution-month {
+            margin-bottom: 10px ;
+            .link-month-distribution {
+                display: block ;
+                text-transform: capitalize ;
+                text-align: left ;
+                
+                .glyphicon {
+                    float: right ;
+                }
+            }
         }
+        
+        
     }
     
     #report {