diff --git a/Gruntfile.js b/Gruntfile.js
index ef54fe49..848679ba 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -3,6 +3,33 @@ var jsCompatibilty = [
 	'node_modules/es6-promise/dist/es6-promise.min.js'
 ]
 
+var jsCoreInclude = [
+	'build/include/core/appender.js',
+	'build/include/core/cache.js',
+	'build/include/core/handlebars.js',
+	'build/include/core/lang.js',
+	'build/include/core/objectLength.js',
+	'build/include/core/session.js',
+	'build/include/core/url.js',
+	'build/include/core/user.js',
+	'build/include/form/check_fields.js',
+	'build/include/form/checkbox.js',
+	'build/include/form/datetime.js',
+	'build/include/form/multi-select.js',
+	'build/include/form/radio.js',
+	'build/include/form/select.js',
+	'build/include/form/upload.js',
+	'build/include/form/validator.js',
+	'build/include/layout/animate.js',
+	'build/include/layout/message.js',
+	'build/include/layout/modal.js',
+	'build/include/layout/scroll.js',
+	'build/include/layout/tooltip.js',
+	'build/include/datatable.js',
+	'build/include/file.js',
+	'build/include/uploader.js',
+]
+
 var jsMain = [
 //	'node_modules/sweetalert2/dist/sweetalert2.all.min.js',
 	'node_modules/inputmask/dist/min/jquery.inputmask.bundle.min.js',
@@ -28,11 +55,8 @@ var jsMain = [
 	'node_modules/numeral/min/numeral.min.js',
 	'node_modules/numeral/min/locales/fr.min.js',
 	'build/js/include/plugins/jquery.hcaptions.js',
-	'build/js/include/url_on_tab.js',
-	'build/js/include/set_options.js',
+	jsCoreInclude
 	// 'build/js/include/confirm.js',
-	'build/js/include/appender.js',
-	'build/js/include/app.js',
 ]
 
 var cssMain = [
diff --git a/app/DataTables/ParentDataTable.php b/app/DataTables/ParentDataTable.php
index b7d145e8..d0e8b167 100644
--- a/app/DataTables/ParentDataTable.php
+++ b/app/DataTables/ParentDataTable.php
@@ -10,9 +10,9 @@ use Yajra\DataTables\Services\DataTable;
 
 class ParentDataTable extends DataTable
 {
-    public $rowReorder;
-    public $colReorder;         // ['selector' => 'tr']
-    public $fixedColumns;       // ['leftColumns' => 1, 'rightColumns' => 1]
+    public $rowReorder;          // ['selector' => 'tr']
+    public $colReorder = true;
+    public $fixedColumns = false;
 
      /**
      * Build DataTable class.
@@ -27,7 +27,7 @@ class ParentDataTable extends DataTable
 
     public function modifier($datatables)
     {
-        return $this->addButtons($datatables);
+        return $this->addButtons($datatables->setRowId('{{$id}}'));
     }
 
     /**
@@ -50,6 +50,7 @@ class ParentDataTable extends DataTable
         $buttons .= '<button type="button" data-id="{{$id}}" class="btn btn-xs btn-primary btn-edit mr-2"><i class="fa fa-fw fa-pencil-alt"></i></button>';
         $buttons .= '<button type="button" data-id="{{$id}}" class="btn btn-xs btn-danger btn-del"><i class="fa fa-fw fa-trash"></i></button>';
         return $buttons;
+        // return view('components.datatables.buttons.row_action');
     }
 
     public function makeColumnButtons()
@@ -72,8 +73,7 @@ class ParentDataTable extends DataTable
     {
         return $model->newQuery();
     }
-
-
+    
     /**
      * Optional method if you want to use html builder.
      *
@@ -126,7 +126,7 @@ class ParentDataTable extends DataTable
     {
         $dom = '';
         // $dom .= $this->getDatatablesHeaderDefault();
-        $dom .= "<'overlay-block'r<t>>";
+        $dom .= "rt";
         $dom .= $this->getDatatablesFooterDefault();
         return $dom;
     }
diff --git a/app/DataTables/Shop/ArticleAttributeFamiliesDataTable.php b/app/DataTables/Shop/ArticleAttributeFamiliesDataTable.php
index 6aeceff0..c1e7e1a8 100644
--- a/app/DataTables/Shop/ArticleAttributeFamiliesDataTable.php
+++ b/app/DataTables/Shop/ArticleAttributeFamiliesDataTable.php
@@ -12,7 +12,7 @@ class ArticleAttributeFamiliesDataTable extends DataTable
 
 	public function query(ArticleAttributeFamily $model)
 	{
-		$model = $model::withCount(['Attributes']);
+		$model = $model::withCount(['values','articles']);
 		return self::buildQuery($model);
 	}
 
@@ -20,7 +20,8 @@ class ArticleAttributeFamiliesDataTable extends DataTable
 	{
 		return [
 			Column::make('name')->title('Nom'),
-			Column::make('attributes_count')->title('Nb attributs')->searchable(false)->addClass('text-right'),
+			Column::make('values_count')->title('Nb attributs')->searchable(false)->addClass('text-right'),
+			Column::make('articles_count')->title('Nb d\'articles')->searchable(false)->addClass('text-right'),
 			self::makeColumnButtons(),
 		];
 	}
diff --git a/app/DataTables/Shop/ArticleAttributeValuesDataTable.php b/app/DataTables/Shop/ArticleAttributeValuesDataTable.php
index 60ba3eaf..cbb626e9 100644
--- a/app/DataTables/Shop/ArticleAttributeValuesDataTable.php
+++ b/app/DataTables/Shop/ArticleAttributeValuesDataTable.php
@@ -12,7 +12,7 @@ class ArticleAttributeValuesDataTable extends DataTable
 
 	public function query(ArticleAttributeValue $model)
 	{
-		$model = $model::with(['ArticleAttributeFamily']);
+		$model = $model::with(['article_attribute_family']);
 		return self::buildQuery($model);
 	}
 
diff --git a/app/Http/Controllers/Shop/Admin/ArticleAttributeFamilyController.php b/app/Http/Controllers/Shop/Admin/ArticleAttributeFamilyController.php
index 98a0a7bb..6958909b 100644
--- a/app/Http/Controllers/Shop/Admin/ArticleAttributeFamilyController.php
+++ b/app/Http/Controllers/Shop/Admin/ArticleAttributeFamilyController.php
@@ -12,7 +12,7 @@ class ArticleAttributeFamilyController extends Controller
 {
     public function index(ArticleAttributeFamiliesDataTable $dataTable)
     {
-        return $dataTable->render('Shop.Admin.ArticleAttributeFamilies.list');
+        return $dataTable->render('Shop.Admin.ArticleAttributeFamilies.index');
     }
 
     public function getDatatable(Request $request)
diff --git a/app/Models/Shop/Article.php b/app/Models/Shop/Article.php
index 422b6402..ec7b8971 100644
--- a/app/Models/Shop/Article.php
+++ b/app/Models/Shop/Article.php
@@ -11,40 +11,37 @@ use Fico7489\Laravel\EloquentJoin\Traits\EloquentJoin;
 
 class Article extends Model implements HasMedia
 {
-    use Categorizable;
-    use Taggable;
-    use HasMediaTrait;
-    use EloquentJoin;
+    use Categorizable, Taggable, HasMediaTrait, EloquentJoin;
 
     protected $guarded = ['id']; 
     protected $table = 'shop_articles'; 
 
-    public function Family()
+    public function article_family()
     {
-        return $this->belongsTo('App\Models\Shop\ArticleFamily','article_family_id');
+        return $this->belongsTo('App\Models\Shop\ArticleFamily');
     }
 
-    public function Inventories()
+    public function attributes()
+    {
+        return $this->hasMany('App\Models\Shop\ArticleAttribute');
+    }
+
+    public function prices()
+    {
+        return $this->hasManyThrough('App\Models\Shop\ArticlePrice','App\Models\Shop\ArticleAttribute');
+    }
+
+    public function inventories()
     {
         return $this->hasMany('App\Models\Shop\Inventory');
     }
 
-    public function Prices()
-    {
-        return $this->hasMany('App\Models\Shop\ArticlePrice');
-    }
-
-    public function Attributes()
-    {
-        return $this->hasManyThrough('App\Models\Shop\ArticleAttribute','App\Models\Shop\ArticlePrice');
-    }
-
-    public function InvoiceItems()
+    public function invoiceItems()
     {
         return $this->hasMany('App\Models\Shop\InvoiceItem');
     }
 
-    public function Product()
+    public function product()
     {
         return $this->belongsTo($this->model, 'model_id');
     }
diff --git a/app/Models/Shop/ArticleAttribute.php b/app/Models/Shop/ArticleAttribute.php
index 67fceee5..ec8b93f8 100644
--- a/app/Models/Shop/ArticleAttribute.php
+++ b/app/Models/Shop/ArticleAttribute.php
@@ -9,23 +9,28 @@ class ArticleAttribute extends Model
 	protected $guarded = ['id'];
     protected $table = 'shop_article_attributes';   
 
-	public function Price()
+    public function article()
+    {
+    	return $this->belongsTo('App\Models\Shop\Article');
+    }
+
+	public function attribute_value()
 	{
-		return $this->belongsTo('App\Models\Shop\ArticlePrice','article_price_id');
+		return $this->belongsTo('App\Models\Shop\ArticleAttributeValue');
 	}
 
-	public function Value()
+	public function prices()
 	{
-		return $this->belongsTo('App\Models\Shop\ArticleAttributeValue','attribute_value_id');
+		return $this->hasMany('App\Models\Shop\ArticlePrice');
 	}
 
-	public function scopeByPrice($query, $article_price_id)
+	public function scopeByArticle($query, $id)
 	{
-		return $query->where('article_price_id', $article_price_id);
+		return $query->where('article_id', $id);
 	}
 
-	public function scopeByAttribueValue($query, $article_value_id)
+	public function scopeByAttributeValue($query, $id)
 	{
-		return $query->where('article_value_id', $article_value_id);
+		return $query->where('attribute_value_id', $id);
 	}
 }
\ No newline at end of file
diff --git a/app/Models/Shop/ArticleAttributeFamily.php b/app/Models/Shop/ArticleAttributeFamily.php
index 8e7151cf..4300664c 100644
--- a/app/Models/Shop/ArticleAttributeFamily.php
+++ b/app/Models/Shop/ArticleAttributeFamily.php
@@ -3,15 +3,23 @@
 namespace App\Models\Shop;
 
 use Illuminate\Database\Eloquent\Model; 
+use Staudenmeir\EloquentHasManyDeep\HasRelationships;
 
 class ArticleAttributeFamily extends Model
 {
+	use HasRelationships;
+
 	protected $guarded = ['id'];
     protected $table = 'shop_article_attribute_families';  
 
-    public function Attributes()
+    public function values()
     {
         return $this->hasMany('App\Models\Shop\ArticleAttributeValue');
     }
 
+    public function articles()
+    {
+    	return $this->hasManyThrough('App\Models\Shop\ArticleAttribute','App\Models\Shop\ArticleAttributeValue');
+    }
+
 }
\ No newline at end of file
diff --git a/app/Models/Shop/ArticleAttributeValue.php b/app/Models/Shop/ArticleAttributeValue.php
index 74afe4be..027cd9b9 100644
--- a/app/Models/Shop/ArticleAttributeValue.php
+++ b/app/Models/Shop/ArticleAttributeValue.php
@@ -9,14 +9,24 @@ class ArticleAttributeValue extends Model
 	protected $guarded = ['id'];
 	protected $table = 'shop_article_attribute_values';   
 	
-	public function ArticleAttributeFamily()
+	public function article_attribute_family()
 	{
 		return $this->belongsTo('App\Models\Shop\ArticleAttributeFamily');		
 	}
 
-	public function scopeByFamily($query, $attribute_family_id)
+	public function attributes()
+	{
+		return $this->hasMany('App\Models\Shop\ArticleAttribute');
+	}
+
+	public function articles()
+	{
+		return $this->hasMany('App\Models\Shop\ArticleAttribute')->groupBy('article_id');
+	}
+
+	public function scopeByFamily($query, $id)
     {
-    	return $query->where('article_attribute_family_id', $attribute_family_id);
+    	return $query->where('article_attribute_family_id', $id);
     }
 
 }
\ No newline at end of file
diff --git a/app/Models/Shop/ArticleCategory.php b/app/Models/Shop/ArticleCategory.php
index 2c452111..db0eb9f6 100644
--- a/app/Models/Shop/ArticleCategory.php
+++ b/app/Models/Shop/ArticleCategory.php
@@ -9,12 +9,12 @@ class ArticleCategory extends Model
     protected $guarded = ['id'];
     protected $table = 'shop_article_categories'; 
 
-    public function Article()
+    public function article()
     {
         return $this->belongsTo('App\Models\Shop\Article');
     }
 
-    public function Category()
+    public function category()
     {
         return $this->belongsTo('App\Models\Shop\Category');
     }
diff --git a/app/Models/Shop/ArticleFamily.php b/app/Models/Shop/ArticleFamily.php
index 9209afc2..b4aa3f60 100644
--- a/app/Models/Shop/ArticleFamily.php
+++ b/app/Models/Shop/ArticleFamily.php
@@ -9,10 +9,7 @@ class ArticleFamily extends Model
     protected $guarded = ['id']; 
     protected $table = 'shop_article_families';
     
-    /**
-     * @return \Illuminate\Database\Eloquent\Relations\BelongsTo
-     */
-    public function Articles()
+    public function articles()
     {
         return $this->hasMany('App\Models\Shop\Article');
     }
diff --git a/app/Models/Shop/ArticlePrice.php b/app/Models/Shop/ArticlePrice.php
index fa98ab55..863fa12b 100644
--- a/app/Models/Shop/ArticlePrice.php
+++ b/app/Models/Shop/ArticlePrice.php
@@ -9,19 +9,14 @@ class ArticlePrice extends Model
     protected $guarded = ['id']; 
     protected $table = 'shop_article_prices';
 
-    public function Article()
+    public function article_attribute()
+    {
+        return $this->belongsTo('App\Models\Shop\ArticleAttribute');
+    }
+
+    public function article()
     {
         return $this->belongsTo('App\Models\Shop\Article');
     }
 
-    public function ArticleAttributes()
-    {
-        return $this->hasMany('App\Models\Shop\ArticleAttribute');
-    }
-
-    public function scopeByArticle($query, $id)
-    {
-        return $query->where('article_id', $id);
-    }
-
 }
\ No newline at end of file
diff --git a/build/js/include/app.js b/build/js/include/app.js
index 87dd225d..82c4bc37 100644
--- a/build/js/include/app.js
+++ b/build/js/include/app.js
@@ -3,75 +3,6 @@ function sleep(ms) {
 }
 
 (function($) {
-	"use strict"; // Start of use strict
-
-	// Toggle the side navigation
-	$("#sidebarToggle, #sidebarToggleTop").on('click', function(e) {
-		$("body").toggleClass("sidebar-toggled");
-		$(".sidebar").toggleClass("toggled");
-		if ($(".sidebar").hasClass("toggled")) {
-			$('.sidebar .collapse').collapse('hide');
-		};
-	});
-
-	// Close any open menu accordions when window is resized below 768px
-	$(window).resize(function() {
-		if ($(window).width() < 768) {
-			$('.sidebar .collapse').collapse('hide');
-		};
-	});
-
-	// Prevent the content wrapper from scrolling when the fixed side navigation hovered over
-	$('body.fixed-nav .sidebar').on('mousewheel DOMMouseScroll wheel', function(e) {
-		if ($(window).width() > 768) {
-			var e0 = e.originalEvent,
-			delta = e0.wheelDelta || -e0.detail;
-			this.scrollTop += (delta < 0 ? 1 : -1) * 30;
-			e.preventDefault();
-		}
-	});
-
-	// Scroll to top button appear
-	$(document).on('scroll', function() {
-		var scrollDistance = $(this).scrollTop();
-		if (scrollDistance > 100) {
-			$('.scroll-to-top').fadeIn();
-		} else {
-			$('.scroll-to-top').fadeOut();
-		}
-	});
-
-	// Smooth scrolling using jQuery easing
-	$(document).on('click', 'a.scroll-to-top', function(e) {
-		var $anchor = $(this);
-		$('html, body').stop().animate({
-			scrollTop: ($($anchor.attr('href')).offset().top)
-		}, 1000, 'easeInOutExpo');
-		e.preventDefault();
-	});
-
-	$('#changePassword-submit').click(function(e){
-        e.preventDefault();
-
-        $.ajax({
-            url: '/changePassword',
-            data: $('#password-form-data').serialize(),
-            method : 'POST',
-            success: function(resp){
-                if (resp.success) {
-                    $('#changePasswordMessage').html(resp.message);
-                    // await sleep(1000);
-                    $('#changepasswordModal').modal('hide');
-                    $('#password-form-data').each(function(){
-						this.reset();
-					});
-                } else {
-                    $('#changePasswordMessage').html(resp.message);
-                }
-            }
-        });
-    });
-
 	numeral.locale('fr');
 
 })(jQuery); // End of use strict
diff --git a/build/js/include/check_fields.js b/build/js/include/check_fields.js
deleted file mode 100644
index e00f2cf0..00000000
--- a/build/js/include/check_fields.js
+++ /dev/null
@@ -1,27 +0,0 @@
-function checkCollapsedFields(selector)
-{
-	var selector = selector + ' input,textarea,select';
-	var nb_fields = $(selector).length();
-	var nb_required = $(selector).filter('[required]').length();
-	var nb_filled = 0;
-	var nb_necessary = 0; 
-	
-    $(selector).each(function(i, Field){
-        if ($(Field).val() != '')
-        {
-            nb_filled++;
-        }
-    });
-	
-    $(selector).filter('[required]').each(function(i, required){
-        if ($(required).val() != '')
-        {
-            nb_necessary++;
-        }
-    });
-
-    result = nb_filled + " / " + nb_fields;
-    result + " | " + nb_necessary + " / " + nb_required;
-
-    $(selector + ' .check').html(result);
-}
diff --git a/build/js/include/core/appender.js b/build/js/include/core/appender.js
new file mode 100644
index 00000000..6c2f2a60
--- /dev/null
+++ b/build/js/include/core/appender.js
@@ -0,0 +1,75 @@
+(function ($) {
+	$.fn.appender = function (settings) {
+		let appendArea = this;
+		let rowHtml = $(settings.rowSection)[0].outerHTML;
+
+		settings.hideSection ? $(settings.rowSection).remove() : "";
+
+		let rowCounter = 1;
+
+		if (settings.rowNumberStart) {
+			rowCounter = Number(settings.rowNumberStart);
+		}
+
+		$(document).on('click', settings.addBtn, function (event) {
+			
+			$(appendArea).append(rowHtml);
+
+			if (settings.appendEffect === 'fade') {
+				$(settings.rowSection).last().hide().fadeIn();
+			} else if (settings.appendEffect === 'slide') {
+				$(settings.rowSection).last().hide().slideDown(200);
+			}
+
+			$(settings.rowSection).last().addClass(settings.addClass);
+
+			$(settings.rowNumber).last().text(rowCounter);
+
+			if (settings.type) {
+				type = settings.type;
+			} else {
+				type = settings.rowSection;
+			}
+			
+			$(type).each(function(rowIndex) {
+				$(this).find('input[name]').each(function(){
+					var name;
+					name = $(this).attr('name');
+					name = name.replace(/\[[0-9]?\]/g, '['+rowIndex+']');
+					$(this).attr('name',name);
+				});
+				$(this).find('select[name]').each(function(){
+					var name;
+					name = $(this).attr('name');
+					name = name.replace(/\[[0-9]?\]/g, '['+rowIndex+']');
+					$(this).attr('name',name);
+				});
+				$(this).find('textarea[name]').each(function(){
+					var name;
+					name = $(this).attr('name');
+					name = name.replace(/\[[0-9]?\]/g, '['+rowIndex+']');
+					$(this).attr('name',name);
+				});
+			});
+
+			rowCounter++;
+
+			if (settings.callback) {
+				settings.callback();
+			}
+
+		});
+
+
+		if(settings.deleteBtn) {
+			$(document).on('click', settings.deleteBtn, function (e) {
+				$(e.target).closest(settings.rowSection).remove();
+				if (settings.callback) {
+					settings.callback();
+				}
+			})
+
+		}
+	};
+
+}(jQuery));
\ No newline at end of file
diff --git a/build/js/include/cache.js b/build/js/include/core/cache.js
similarity index 100%
rename from build/js/include/cache.js
rename to build/js/include/core/cache.js
diff --git a/build/js/include/core/handlebars.js b/build/js/include/core/handlebars.js
new file mode 100644
index 00000000..bec5d1f1
--- /dev/null
+++ b/build/js/include/core/handlebars.js
@@ -0,0 +1,70 @@
+function renderContractDriveTPL(filename, data, selector) {
+	if (typeof(data) == 'undefined') {
+		var data = {};
+	}
+	data.translate = translate;
+	var path = '/assets/apps/ContractDrive/templates/';
+	var content = getTemplate(path + filename, data);
+	if (typeof(selector) == 'undefined')
+	{
+		return content;
+	} else {
+		$(selector).html(content);
+	}
+}
+
+function getTemplate(file, data) {
+	var source = getSource(file);
+	var template = Handlebars.compile(source);
+    return template(data);
+}
+
+function getSource(file) {
+	var source = null;
+	$.ajax({
+		async: false,
+		dataType: 'html',
+     	type: 'GET',
+     	url: file + '?' + Date.now(),
+     	success: function(data) {
+        	source = data;
+     	}
+	});
+	return source;
+}
+
+function view(template_id, data) {
+	// console.log(template_id);
+	// console.log(data);
+	var source = document.getElementById(template_id).innerHTML;
+	var template = Handlebars.compile(source);
+	return template(data);
+}
+
+function helperSelect(name, items, selected, options) {
+
+	// If the selected value is an array, then convert the
+	// select to a multiple select
+	if (selected instanceof Array) {
+		options.hash.multiple = 'multiple';
+	}
+
+	// Generate the list of options
+	var optionsHtml = '';
+	for (var i = 0, j = items.length; i < j; i++) {
+
+		// <option> attributes
+		var attr = {
+			value: items[i].value
+		};
+
+		// We can specify which options are selected by using either:
+		// * an array of selected values or
+		// * a single selected value
+		if ((selected instanceof Array && indexOf(selected, items[i].value) !== -1) || (selected === items[i].value)) {
+			attr.selected = 'selected';
+		}
+
+		optionsHtml += createElement('option', true, attr, items[i].text);
+	}
+}
diff --git a/build/js/include/core/lang.js b/build/js/include/core/lang.js
new file mode 100644
index 00000000..8cca62a8
--- /dev/null
+++ b/build/js/include/core/lang.js
@@ -0,0 +1,12 @@
+function initLangSelector() {
+	$('.language-choice').click(function() {
+		var lang = $(this).data('lang');
+		var url = laroute.route('language', {lang:lang});
+		window.location = url;
+	});
+}
+
+function getLang() {
+	return $('#language-btn').attr('data-current-lang');
+}
+
diff --git a/build/js/include/core/objectLength.js b/build/js/include/core/objectLength.js
new file mode 100644
index 00000000..4054b2fe
--- /dev/null
+++ b/build/js/include/core/objectLength.js
@@ -0,0 +1,5 @@
+function objectLength(list)
+{
+	return ( typeof(list) == 'Array' ) ? list.length : Object.keys(list).length;
+}
+
diff --git a/build/js/include/core/session.js b/build/js/include/core/session.js
new file mode 100644
index 00000000..8aaa1477
--- /dev/null
+++ b/build/js/include/core/session.js
@@ -0,0 +1,6 @@
+function initAjaxCheckSession() {
+	$( document ).ajaxError(function( event, jqxhr, settings, thrownError ) {
+	    alert("Session expired. You'll be take to the login page");
+	    location.href = "/login"; 
+	});
+}
\ No newline at end of file
diff --git a/build/js/include/core/url.js b/build/js/include/core/url.js
new file mode 100644
index 00000000..4912e93b
--- /dev/null
+++ b/build/js/include/core/url.js
@@ -0,0 +1,4 @@
+function openURL(url) {
+	window.location = url; 
+}
+
diff --git a/build/js/include/user.js b/build/js/include/core/user.js
similarity index 100%
rename from build/js/include/user.js
rename to build/js/include/core/user.js
diff --git a/build/js/include/datetime.js b/build/js/include/datetime.js
deleted file mode 100644
index 9a2bcebd..00000000
--- a/build/js/include/datetime.js
+++ /dev/null
@@ -1,67 +0,0 @@
-function initDatepicker() {
-	var lang = getLang(); 
-	loadScript('assets/plugins/datepicker/bootstrap-datepicker.' + lang + '.min.js', function() {
-		$(".datepicker").datepicker({
-			language: lang
-		});
-	});
-}
-
-function initDaterangePicker() {
-	var lang = getLang();
-	loadScript('assets/plugins/daterangepicker/' + lang + '.js');
-}
-
-function initMomentLang() {
-	var lang = getLang();
-	loadScript('assets/plugins/moment/' + lang + '.js');
-}
-
-function getDaterangePicker(selector, startDate, parentEl, endDate) {
-	// console.log('getDaterangePicker');
-	if (typeof(parentEL) == 'undefined') {
-		parentEl = 'file_effect_date_selection';
-	}
-	if (typeof(startDate) == 'undefined') {
-		startDate = moment().format(dateRangePickerLanguage.format);
-	}
-	// console.log("selector : ", selector);
-	// console.log("StartDate : ", startDate);
-	var options = {
-		autoUpdateInput: false,
-		autoApply: true,
-		singleDatePicker: true,
-		format: dateRangePickerLanguage.format,
-		opens: 'left',
-		showDropdowns: true,
-		showWeekNumbers: true,
-		alwaysShowCalendars: true,
-		startDate: startDate,
-		separator: dateRangePickerLanguage.separator,
-		locale: dateRangePickerLanguage.locale,
-		buttonClasses: 'btn btn-light uppercase weight-900',
-		parentEl: '.' +parentEl
-	};
-
-	if (typeof(endDate) != 'undefined') {
-		options.endDate = endDate;
-		options.ranges = dateRangePickerLanguage.ranges;
-	};
-
-	$('#files_selection').parent().parent().parent().parent().parent().parent().parent().parent().parent().removeClass(parentEl).addClass(parentEl);
-	var picker = $(selector).daterangepicker(options, function(start, end, label) {
-		//console.log("New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')");
-	});
-	
-	$(selector + ' .daterangepicker').removeClass('light').addClass('light');
-
-	$(selector).next('span.add-on').off('click').on('click', function() {
-		$(selector).trigger('click');
-	});
-
-	$(selector).on('apply.daterangepicker', function(ev, picker) {
-		$(this).val(picker.startDate.format(dateRangePickerLanguage.format));
-	});
-
-	return picker;
-}
\ No newline at end of file
diff --git a/build/js/include/form/check_fields.js b/build/js/include/form/check_fields.js
new file mode 100644
index 00000000..0d33d4d0
--- /dev/null
+++ b/build/js/include/form/check_fields.js
@@ -0,0 +1,39 @@
+function checkCollapsedFields(selector)
+{
+	var fields = selector + ' input,' + selector + ' textarea,' + selector + ' select';
+    console.log(fields);
+
+	var nb_fields = $(fields).length;
+    console.log(nb_fields);
+	var nb_required = $(fields).filter('[required]').length;
+	console.log(nb_required);
+    var nb_filled = 0;
+	var nb_necessary = 0; 
+	
+    $(fields).each(function(i, field){
+        if ($(field).val() != '')
+        {
+            nb_filled++;
+        }
+    });
+	
+    $(fields).filter('[required]').each(function(i, required){
+        if ($(required).val() != '')
+        {
+            nb_necessary++;
+        }
+    });
+
+    var result = nb_filled + " / " + nb_fields;
+    result = result + " | " + nb_necessary + " / " + nb_required;
+
+    console.log(result);
+
+    var check = $(selector).parent().find('.check');
+    console.log(check);
+
+    // $(selector).parent().find('.check').html(result);
+    if (nb_necessary < nb_required) {
+        $(selector).collapse('show');
+    }
+}
diff --git a/build/js/include/form/checkbox.js b/build/js/include/form/checkbox.js
new file mode 100644
index 00000000..2c50b34c
--- /dev/null
+++ b/build/js/include/form/checkbox.js
@@ -0,0 +1,42 @@
+function initIcheck(selector)
+{
+    var selector = (typeof(selector) != 'undefined') ? selector : '.iCheck'; 
+    console.log('initIcheck');
+    $(selector).each(function(){
+    // var each element .iCheck
+        var $this = $(this),
+        skin = $this.attr('data-skin'),
+        color = $this.attr('data-color'),
+        checkbox, radio, insert = '';
+
+        if (skin === undefined) {
+            checkbox = 'icheckbox_minimal';
+            radio = 'iradio_minimal';
+        } else {
+            checkbox = 'icheckbox_' + skin;
+            radio = 'iradio_' + skin;
+        }
+
+        if (color !== undefined) {
+            checkbox = checkbox + '-' + color;
+            radio = radio + '-' + color;
+        }
+
+        // handle iCheck skin 'line'
+        if (skin == 'line') {
+            var label = $this.next(),
+            label_text = label.text();
+
+            insert = '<div class="icheck_line-icon"></div>' + label_text;
+            label.remove();
+        }
+
+        // initialize
+        $this.iCheck({
+            checkboxClass: checkbox,
+            radioClass: radio,
+            insert: insert,
+            increaseArea: '30%' // optional
+        });
+    });
+}
diff --git a/build/js/include/form/datetime.js b/build/js/include/form/datetime.js
new file mode 100644
index 00000000..896d7415
--- /dev/null
+++ b/build/js/include/form/datetime.js
@@ -0,0 +1,130 @@
+function initDatepicker() {
+	var lang = getLang(); 
+	loadScript('assets/plugins/datepicker/bootstrap-datepicker.' + lang + '.min.js', function() {
+		$(".datepicker").datepicker({
+			language: lang
+		});
+	});
+}
+
+function initDaterangePicker() {
+	var lang = getLang();
+	loadScript('assets/plugins/daterangepicker/' + lang + '.js');
+}
+
+function initMomentLang() {
+	var lang = getLang();
+	loadScript('assets/plugins/moment/' + lang + '.js');
+}
+
+function getFormatDate() {
+	var lang = getLang();
+	switch (lang) {
+		case 'en':
+			return 'YYYY-MM-DD';
+			break;
+		case 'fr':
+			return 'DD/MM/YYYY';
+			break;
+		default:
+			return 'YYYY-MM-DD';
+			break;
+	}
+}
+
+function getFormatDatetime() {
+	var lang = getLang();
+	switch (lang) {
+		case 'en':
+			return 'YYYY-MM-DD HH:mm:ss';
+			break;
+		case 'fr':
+			return 'DD/MM/YYYY HH:mm:ss';
+			break;
+		default:
+			return 'YYYY-MM-DD HH:mm:ss';
+			break;
+	}	
+}
+
+function convertToDateRange(str)
+{
+	return str.replace('-','/');
+}
+
+function getDaterangePicker(selector, startDate, parentEl, endDate) {
+	// console.log('getDaterangePicker');
+	// console.log("StartDate : ", startDate);
+	if (typeof(parentEL) == 'undefined') {
+		parentEl = 'file_effect_date_selection';
+	} else {
+		$(selector).parent().parent().parent().parent().parent().parent().parent().parent().parent().addClass(parentEl);
+	}
+	if (typeof(startDate) == 'undefined') {
+		// startDate = moment().format(dateRangePickerLanguage.format);
+		startDate = moment();
+	} else {
+		// console.log("ici");
+		startDate = moment(startDate, getFormatDate());
+	}
+	// console.log("selector : ", selector);
+	// console.log("StartDate : ", startDate);
+	// console.log("format", dateRangePickerLanguage.format);
+	var options = {
+		alwaysShowCalendars: true,
+		autoUpdateInput: false,
+		format: dateRangePickerLanguage.format,
+		opens: 'left',
+		showDropdowns: true,
+		showWeekNumbers: true,
+		startDate: startDate,
+		separator: dateRangePickerLanguage.separator,
+		locale: dateRangePickerLanguage.locale,
+		buttonClasses: 'btn light uppercase weight-900',
+		parentEl: '.' +parentEl
+	};
+
+	if (typeof(endDate) != 'undefined') {
+		options.cancelClass = "btn-danger";
+		options.endDate = endDate;
+		options.ranges = dateRangePickerLanguage.ranges;
+		options.template =
+            '<div class="daterangepicker">' +
+                '<div class="ranges"></div>' +
+                '<div class="drp-calendar left">' +
+                    '<div class="calendar-table"></div>' +
+                    '<div class="calendar-time"></div>' +
+                '</div>' +
+                '<div class="drp-calendar right">' +
+                    '<div class="calendar-table"></div>' +
+                    '<div class="calendar-time"></div>' +
+                '</div>' +
+                '<div class="drp-buttons">' +
+                    '<span class="drp-selected"></span>' +
+                    '<button class="cancelBtn" type="button"></button>' +
+                    '<button class="applyBtn" disabled="disabled" type="button"></button> ' +
+                '</div>' +
+            '</div>';
+	} else {
+		options.autoApply = true;
+		options.singleDatePicker = true;
+	};
+
+	$('#files_selection').parent().parent().parent().parent().parent().parent().parent().parent().parent().removeClass(parentEl).addClass(parentEl);
+	var picker = $(selector).daterangepicker(options, function(start, end, label) {
+		//console.log("New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')");
+	});
+	
+	$(selector + ' .daterangepicker').removeClass('light').addClass('light');
+
+	$(selector).next('span.add-on').off('click').on('click', function() {
+		$(selector).trigger('click');
+	});
+
+	$(selector).on('apply.daterangepicker', function(ev, picker) {
+		$(this).val(picker.startDate.format(dateRangePickerLanguage.format));
+		$(selector).trigger('change');
+	});
+
+	return picker;
+}
\ No newline at end of file
diff --git a/build/js/include/form/multi-select.js b/build/js/include/form/multi-select.js
new file mode 100644
index 00000000..354fe215
--- /dev/null
+++ b/build/js/include/form/multi-select.js
@@ -0,0 +1,154 @@
+function initMultiselect(model, item, route, availables, associated, event)
+{
+    console.log('initMultiselect');
+    console.log(route);
+    var toggle_button = "#toggle_button_" + model;
+    var assoc_form = model + "_assoc_form";
+    var assoc_submit = '#' + model + '_assoc_submit';
+    var assoc_selection = '#' + model + '_search_selection';
+    var assoc_selectable = '#' + model + '_search_selectable';
+    var list = '#' + model + '_list';
+
+    $(assoc_submit).off('click').on('click', function(event) {
+        event.preventDefault();
+        $('form[name="' + assoc_form + '"]').submit();
+    });
+
+    $(toggle_button).off('click').on('click', function(event) {
+        if (!$(assoc_submit).is(':hover')) {
+            event.preventDefault();
+            $(toggle_button + " .header-wrapper .glyph-icon:first-child").toggleClass("icon-caret-right icon-caret-down");
+            $(assoc_submit).toggleClass('hidden');
+            $(this).parents(".content-box:first").find(".content-box-wrapper").slideToggle(100, function() {
+                admin_content.orderSelect($(list));
+                renderMultiselect(list, model, item, availables, associated);
+                modobox.resize();
+            });
+        }
+    });
+
+    $('form[name="'+assoc_form+'"]').off('submit').on('submit', function() {
+        var error = 0;
+        var datas = $(this).serializeJSON();
+
+        if (error == 0) {
+            datas["language"] = getLang();
+            $.ajax({
+                type: "POST",
+                dataType: "json",
+                url: laroute.route(route),
+                data: datas,
+                success: function(response) {
+                    if (response.error == -1) {
+                        header.logout();
+                    } else if (response.error == -6) {
+                        admin_content.alertNotFound();
+                    } else {
+                        admin_content.showSuccessMsg('.information_messages_manage', 'informations_has_been_saved');
+                        if (response.nb > 0) {
+                            $(toggle_button + " .bs-badge").removeClass("opacity-3");
+                        } else {
+                            $(toggle_button + " .bs-badge").addClass("opacity-3");
+                        }
+                        $(toggle_button + " .bs-badge").html(response.nb);
+                        setTimeout(function(){
+                            $(toggle_button).click();
+                        }, 1000);
+                    }
+                },
+                error: function() {
+                    admin_content.showCustomErrorMsg('.information_messages_manage', translate.getText.an_error_occured);
+                }
+            });
+        } else {
+            admin_content.showCustomErrorMsg('.information_messages_manage', translate.getText.an_error_occured);
+        }
+    });
+
+    $(assoc_submit).off('click').on('click', function(event) {
+        event.preventDefault();
+        $('form[name="'+assoc_form+'"]').submit();
+    });
+
+    $(".ms-container").append('<i class="glyph-icon center-icon icon-exchange text-white"></i>');
+}
+
+function renderMultiselect(selector, model, item, availables, associated, parent)
+{
+    console.log('renderMultiselect');
+    var assoc_submit = "#" + model + "_assoc_submit";
+    var assoc_form = model + "_assoc_form";
+    var assoc_toggle = "#toggle_button_" + model;
+    var assoc_list = "#" + model + "_list"; 
+    var assoc_selectable = '#' + model + '_search_selectable';
+    var assoc_selection = '#' + model + '_search_selection';
+    var assoc_selected = '#ms-' + model + '_list';
+    var select_all = 'select-all-' + item;
+    var deselect_all = 'deselect-all-' + item;
+
+    var selectableHeader = (typeof(availables) != 'undefined') ? "<div class='col-md-12 text-center'><label class='light'>"+availables+"</label></div>" : '';
+    var selectionHeader = (typeof(associated) != 'undefined') ? "<div class='col-md-12 text-center'><label class='green'>"+associated+"</label></div>" : '';
+
+    $(selector).multiSelect({
+        selectableHeader: selectableHeader + "<input type='text' id='"+assoc_selectable+"' class='mb-2 form-control quicksearch selectable-search styled' autocomplete='off' placeholder='"+translate.getText.search+"...'>",
+        selectionHeader: selectionHeader + "<input type='text' id='"+assoc_selection+"' class='mb-2 form-control quicksearch selectable-search styled' autocomplete='off' placeholder='"+translate.getText.search+"...'>",
+        selectableFooter: "<button id='"+select_all+"' class='btn btn-alt btn-success btn-block mt-2 noradius pr-3'><span>"+translate.getText.select_all+"</span><i class='glyph-icon icon-arrow-right pull-right'></i></button>",
+        selectionFooter: "<button id='"+deselect_all+"' class='btn btn-alt btn-danger btn-block mt-2 noradius pl-3'><i class='glyph-icon icon-arrow-left pull-left'></i><span>"+translate.getText.deselect_all+"</span></button>",
+        afterInit: function(ms) {
+            var that = this,
+            $selectableSearch = that.$selectableUl.prev(),
+            $selectionSearch = that.$selectionUl.prev(),
+            selectableSearchString = '#'+that.$container.attr('id')+' .ms-elem-selectable:not(.ms-selected)',
+            selectionSearchString = '#'+that.$container.attr('id')+' .ms-elem-selection.ms-selected';
+
+            that.qs1 = $selectableSearch.quicksearch(selectableSearchString).on('keydown', function(e){
+                if (e.which === 40) {
+                    that.$selectableUl.focus();
+                    return false;
+                }
+            });
+
+            that.qs2 = $selectionSearch.quicksearch(selectionSearchString).on('keydown', function(e){
+                if (e.which == 40) {
+                    that.$selectionUl.focus();
+                    return false;
+                }
+            });
+
+            $(select_all).off('click').on('click', function() {
+                console.log('select_all');
+                console.log('#ms-' + model + '_list');
+                if ($(assoc_selectable).val() == "") {
+                    $(list).multiSelect('select_all');
+                } else {
+                    $('#ms-' + model + '_list .ms-elem-selectable').each(function() {
+                        if(!$(this).is(':hidden')) { $(this).click(); }
+                    });
+                }
+                return false;
+            });
+
+            $(deselect_all).off('click').on('click', function() {
+                if ($(assoc_selection).val() == "") {
+                    $(list).multiSelect('deselect_all');
+                } else {
+                    $('#ms-' + model + '_list .ms-elem-selection').each(function() {
+                        if(!$(this).is(':hidden')) { $(this).click(); }
+                    });
+                }
+                return false;
+            });
+
+        },
+        afterSelect: function(){
+            this.qs1.cache();
+            this.qs2.cache();
+        },
+        afterDeselect: function(){
+            this.qs1.cache();
+            this.qs2.cache();
+        }
+    });
+
+
+}
diff --git a/build/js/include/form/radio.js b/build/js/include/form/radio.js
new file mode 100644
index 00000000..3c3360e4
--- /dev/null
+++ b/build/js/include/form/radio.js
@@ -0,0 +1,5 @@
+function initRadio()
+{
+	$('input[type="radio"].custom-radio').uniform();
+	$('.radio span').append('<i class="glyph-icon icon-circle"></i>');
+}
diff --git a/build/js/include/chosen.js b/build/js/include/form/select.js
similarity index 78%
rename from build/js/include/chosen.js
rename to build/js/include/form/select.js
index 0649de46..7f6850cf 100644
--- a/build/js/include/chosen.js
+++ b/build/js/include/form/select.js
@@ -1,3 +1,12 @@
+function initSelect2()
+{
+	$(".select2").select2({
+		placeholder: "Select a value",
+		allowClear: true
+	});
+}
+
+
 function initChosen()
 {
     $(".chosen-select").chosen({ no_results_text: translate.getText.no_result });
@@ -11,4 +20,5 @@ function resetChosen()
 	$('.chosen-select').each(function() {
 		$(this).val("").trigger("chosen:updated");
 	});
-}
\ No newline at end of file
+}
+
diff --git a/build/js/include/set_options.js b/build/js/include/form/set_options.js
similarity index 100%
rename from build/js/include/set_options.js
rename to build/js/include/form/set_options.js
diff --git a/build/js/include/form/upload.js b/build/js/include/form/upload.js
new file mode 100644
index 00000000..53aeb829
--- /dev/null
+++ b/build/js/include/form/upload.js
@@ -0,0 +1,21 @@
+function initFileInputImage(images, uploadRoute)
+{
+	$(".file").fileinput({
+		uploadUrl: "/file-upload-batch/2",
+		allowedFileExtensions: ['jpg', 'png', 'gif'],
+		overwriteInitial: true,
+		showRemove: true,
+		frameClass: '',
+		initialPreviewAsData: false,
+		maxFileSize: 10000,
+		removeFromPreviewOnError: true,
+		initialPreview: images,
+		layoutTemplates: {
+			footer: ''
+		},
+		previewTemplates: {
+			image: '<img src="{data}" class="kv-preview-data file-preview-image img-fluid" title="{caption}" alt="{caption}" {style}>\n',
+		}
+	});
+
+}
diff --git a/build/js/include/form/validator.js b/build/js/include/form/validator.js
new file mode 100644
index 00000000..bd7c154a
--- /dev/null
+++ b/build/js/include/form/validator.js
@@ -0,0 +1,74 @@
+function initValidator() {
+	$( document ).ready(function() {
+		// console.log('initValidator');
+		// $(window).on('load', function() {
+		// window.addEventListener('load', function() {
+
+			// console.log('initValidator load');
+			var forms = $('.needs-validation');
+
+			$(forms).each(function(i, form) {
+				form.addEventListener('submit', function(event) {
+					checkValidatorFields(form);
+				}, false);
+			});
+
+		// }, false);
+	});
+}
+
+function checkValidatorFields(form) {
+	console.log('checkValidatorFields');
+	if (form.checkValidity() === false) {
+		console.log('non validé');
+		event.preventDefault();
+		event.stopPropagation();
+	} else {
+		console.log("validé");
+		form.classList.add('valid');
+	}
+	form.classList.add('was-validated');
+			
+	form.addEventListener('invalid', function(e) {
+		console.log(e);
+	}, true);
+
+}
+
+function initValidatorHtml() {
+	window.addEventListener('load', function() {
+		// Fetch all the forms we want to apply custom Bootstrap validation styles to
+		var forms = document.getElementsByClassName('needs-validation');
+		// Loop over them and prevent submission
+		var validation = Array.prototype.filter.call(forms, function(form) {
+		  	form.addEventListener('submit', function(event) {
+				if (form.checkValidity() === false) {
+					event.preventDefault();
+					event.stopPropagation();
+				}
+				form.classList.add('was-validated');
+		  	}, false);
+		});
+	}, false);	
+}
+
+function initValidator2() {
+	$('.needs-validation').bootstrapValidator().on('submit', function(e) {
+		if (e.isDefaultPrevented()) {
+			console.log('bad');
+		} else {
+			console.log('good');
+		}
+
+		e.preventDefault();
+		e.stopPropagation();
+		// Active the panel element containing the first invalid element
+		var $form         = $(e.target),
+			validator     = $form.data('bootstrapValidator'),
+			$invalidField = validator.getInvalidFields().eq(0),
+			$collapse     = $invalidField.parents('.collapse');
+
+		$collapse.collapse('show');
+	});
+
+}
\ No newline at end of file
diff --git a/build/js/include/animate.js b/build/js/include/layout/animate.js
similarity index 100%
rename from build/js/include/animate.js
rename to build/js/include/layout/animate.js
diff --git a/build/js/include/layout/message.js b/build/js/include/layout/message.js
new file mode 100644
index 00000000..ecbcfe25
--- /dev/null
+++ b/build/js/include/layout/message.js
@@ -0,0 +1,9 @@
+function errorMessage(message)
+{
+
+	var message = (typeof(message) != 'undefined') ? message : translate.getText.please_contact_the_administrator;
+	if ( typeof(screenErrors) != 'undefined' ) { 
+		screenErrors.execute('error', translate.getText.an_error_occured+'.<br>'+message+'.'); 
+	}
+}
+
diff --git a/build/js/include/layout/modal.js b/build/js/include/layout/modal.js
new file mode 100644
index 00000000..cb6ae6d3
--- /dev/null
+++ b/build/js/include/layout/modal.js
@@ -0,0 +1,37 @@
+function openModal(title, route, params)
+{
+	var params = (typeof(params) == 'undefined') ? [] : params;
+	var message = (typeof(params['preload']) == 'undefined') ? '<p><i class="fa fa-spin fa-spinner"></i> Loading...</p>' : params['preload'];
+	var callback_apply = (typeof(params['onApply']) == 'undefined') ? false : params['onApply'];
+	var callback_open = (typeof(params['onOpen']) == 'undefined') ? false : params['onOpen'];
+
+	var dialog = bootbox.dialog({
+		title: title,
+		message: message,
+		buttons: getModalButtons(callback_apply),
+		callback: function() {
+			if (callback_open) {
+				callback_open();
+			} 
+		}
+	});
+						
+	dialog.init(function(){
+		dialog.find('.bootbox-body').load(route);
+	});
+
+}
+
+function getModalButtons(callback) {
+	return {
+		ok: {
+			label: "Apply",
+			className: 'btn-info',
+			callback: function() {
+				if (typeof(callback) !== 'undefined') {
+					callback();
+				}
+			}
+		}
+	}
+}
diff --git a/build/js/include/layout/scroll.js b/build/js/include/layout/scroll.js
new file mode 100644
index 00000000..14146343
--- /dev/null
+++ b/build/js/include/layout/scroll.js
@@ -0,0 +1,24 @@
+function initScroll(selector)
+{
+	if (typeof(selector) == 'undefined')
+	{
+		selector = ('.nicescrollable');
+	}
+
+	$(selector).niceScroll({
+		horizrailenabled: false,
+		cursorborder: "0",
+		cursorwidth: "8px",
+		cursorcolor: "#fff",
+		zindex: "5555",
+		autohidemode: true,
+		bouncescroll: true,
+		mousescrollstep: 40,
+		scrollspeed: 100,
+		background: "#cdcdcd",
+		cursoropacitymin: 0.3,
+		cursoropacitymax: 0.7,
+		cursorborderradius: 0,
+		railpadding: {top:0,right:1,left:0,bottom:0}
+	});
+}
diff --git a/build/js/include/layout/tooltip.js b/build/js/include/layout/tooltip.js
new file mode 100644
index 00000000..867670e6
--- /dev/null
+++ b/build/js/include/layout/tooltip.js
@@ -0,0 +1,7 @@
+function initTooltip()
+{
+	$('[data-toggle="tooltip"]').tooltip({
+		trigger : 'hover',
+		delay: { "show": 500, "hide": 100 }
+	});  
+}
diff --git a/build/js/include/rights.js b/build/js/include/rights.js
deleted file mode 100644
index 0f674e21..00000000
--- a/build/js/include/rights.js
+++ /dev/null
@@ -1,20 +0,0 @@
-function hasRole(str) {
-	return checkRole('admin') ? true : checkRole(str); 
-}
-
-function checkRole(str) {
-	return (global.roles.indexOf(str) == -1 ) ? false : true;	
-}
-
-function isAdmin() {
-	return hasRole('admin');
-}
-
-function hasPermission(str) {
-	if (isAdmin()) {
-		return true;
-	} else {
-		return (global.permissions.indexOf(str) == -1 ) ? false : true;
-	} 
-}
-
diff --git a/build/js/include/validator.js b/build/js/include/validator.js
deleted file mode 100644
index 5ff99994..00000000
--- a/build/js/include/validator.js
+++ /dev/null
@@ -1,17 +0,0 @@
-function initValidator()
-{
-	window.addEventListener('load', function() {
-	    // Fetch all the forms we want to apply custom Bootstrap validation styles to
-	    var forms = document.getElementsByClassName('needs-validation');
-	    // Loop over them and prevent submission
-	    var validation = Array.prototype.filter.call(forms, function(form) {
-	      form.addEventListener('submit', function(event) {
-	        if (form.checkValidity() === false) {
-	          event.preventDefault();
-	          event.stopPropagation();
-	        }
-	        form.classList.add('was-validated');
-	      }, false);
-	    });
-	}, false);
-}
\ No newline at end of file
diff --git a/resources/views/Botanic/Admin/Families/list.blade.php b/resources/views/Botanic/Admin/Families/list.blade.php
index 425aef39..dfdeb3a5 100644
--- a/resources/views/Botanic/Admin/Families/list.blade.php
+++ b/resources/views/Botanic/Admin/Families/list.blade.php
@@ -5,9 +5,7 @@
 ])
 
 @section('content')
-	@include('components.datatable', ['route' => route('Botanic.Admin.Families.create'), 'label' => __('Botanic.families.add')])
-@endsection
-
-@push('scripts')
-	@include('components.js.datatable', ['route' => '/Botanic/Admin/Families', 'model' => 'families'])
-@endpush
\ No newline at end of file
+	@component('components.card')
+		@include('components.datatable', ['route' => route('Botanic.Admin.Families.index'), 'model' => 'families'])
+	@endcomponent
+@endsection
\ No newline at end of file
diff --git a/resources/views/Botanic/Admin/Genres/list.blade.php b/resources/views/Botanic/Admin/Genres/list.blade.php
index 7345a94c..d0c8068b 100644
--- a/resources/views/Botanic/Admin/Genres/list.blade.php
+++ b/resources/views/Botanic/Admin/Genres/list.blade.php
@@ -5,10 +5,8 @@
 ])
 
 @section('content')
-	@include('components.datatable', ['route' => route('Botanic.Admin.Genres.create'), 'label' => __('Botanic.genres.add')])
+	@component('components.card')
+		@include('components.datatable', ['route' => route('Botanic.Admin.Genres.index'), 'model' => 'BotanicGenres'])
+	@endcomponent
 @endsection
 
-@push('scripts')
-	@include('components.js.datatable', ['route' => '/Botanic/Admin/Genres', 'model' => 'genres'])
-@endpush
-
diff --git a/resources/views/Botanic/Admin/Species/list.blade.php b/resources/views/Botanic/Admin/Species/list.blade.php
index 7ac87c97..8ee15dfc 100644
--- a/resources/views/Botanic/Admin/Species/list.blade.php
+++ b/resources/views/Botanic/Admin/Species/list.blade.php
@@ -5,10 +5,8 @@
 ])
 
 @section('content')
-	@include('components.datatable', ['route' => route('Botanic.Admin.Species.create'), 'label' => __('Botanic.species.add')])
+	@component('components.card')
+		@include('components.datatable', ['route' => route('Botanic.Admin.Species.index'), 'model' => 'BotanicSpecies'])
+	@endcomponent
 @endsection
 
-@push('scripts')
-	@include('components.js.datatable', ['route' => '/Botanic/Admin/Species', 'model' => 'species'])
-@endpush
-
diff --git a/resources/views/Botanic/Admin/Varieties/list.blade.php b/resources/views/Botanic/Admin/Varieties/list.blade.php
index 09043388..526468c0 100644
--- a/resources/views/Botanic/Admin/Varieties/list.blade.php
+++ b/resources/views/Botanic/Admin/Varieties/list.blade.php
@@ -5,10 +5,8 @@
 ])
 
 @section('content')
-	@include('components.datatable', ['route' => route('Botanic.Admin.Varieties.create'), 'label' => __('Botanic.varieties.add')])
+	@component('components.card')
+		@include('components.datatable', ['route' => route('Botanic.Admin.Varieties.index'), 'model' => 'BotanicVarieties'])
+	@endcomponent
 @endsection
 
-@push('scripts')
-	@include('components.js.datatable', ['route' => '/Botanic/Admin/Varieties', 'model' => 'varieties'])
-@endpush
-
diff --git a/resources/views/Shop/Admin/ArticleAttributeFamilies/index.blade.php b/resources/views/Shop/Admin/ArticleAttributeFamilies/index.blade.php
new file mode 100644
index 00000000..526bffab
--- /dev/null
+++ b/resources/views/Shop/Admin/ArticleAttributeFamilies/index.blade.php
@@ -0,0 +1,39 @@
+@extends('layout.index', [
+	'title' => __('Shop.article_attributes.title'),
+	'subtitle' => __('Shop.article_attributes.list'),
+	'breadcrumb' => [__('Shop.article_attributes.title')]
+])
+
+@include('boilerplate::load.select2')
+
+@section('content')
+
+	<nav>
+		<div class="nav nav-tabs">
+			<a href="#families" data-toggle="tab" class="nav-item nav-link active" role="tab" aria-controls="families" aria-selected="true">
+				{{ __('Shop.article_attribute_families.title') }}
+			</a>
+			<a href="#values" data-toggle="tab" class="nav-item nav-link" role="tab" aria-controls="values" aria-selected="false">
+				{{ __('Shop.article_attribute_values.title') }}
+			</a>
+		</div>
+	</nav>
+
+	<div class="tab-content mb-0">
+
+		<div class="tab-pane fade show active" id="families">
+			@component('components.card')
+				@include('components.datatable', ['route' => route('Shop.Admin.ArticleAttributeFamilies.index'), 'model' => 'ArticleAttributeFamilies'])
+			@endcomponent
+		</div>
+
+		<div class="tab-pane fade" id="values">
+			@component('components.card')
+				@include('components.datatable', ['route' => route('Shop.Admin.ArticleAttributeValues.index'), 'model' => 'ArticleAttributeValues'])
+			@endcomponent
+
+		</div>
+
+	</div>
+
+@endsection
diff --git a/resources/views/Shop/Admin/ArticleAttributeValues/list.blade.php b/resources/views/Shop/Admin/ArticleAttributeValues/list.blade.php
index 4a189a34..b3e1f1f5 100644
--- a/resources/views/Shop/Admin/ArticleAttributeValues/list.blade.php
+++ b/resources/views/Shop/Admin/ArticleAttributeValues/list.blade.php
@@ -14,7 +14,3 @@
 	@endcomponent
 
 @endsection
-
-@push('scripts')
-	@include('components.js.datatable', ['route' => route('Shop.Admin.ArticleAttributeValues.index'), 'model' => 'articleattributevalues'])
-@endpush
\ No newline at end of file
diff --git a/resources/views/components/datatable.blade.php b/resources/views/components/datatable.blade.php
index 0b66b12d..cea926e2 100644
--- a/resources/views/components/datatable.blade.php
+++ b/resources/views/components/datatable.blade.php
@@ -1,13 +1,10 @@
+@include('load.datatables')
+
 <div id="{{ $model }}-datatable-content">
 	@include('components.datatables.header')
 	{{$dataTable->table(['class'=>'table table-bordered table-hover table-striped w-100 mb-0'])}}
 </div>
 
-@push('css')
-    <link rel="stylesheet" href="{{ asset('assets/plugins/datatables.min.css') }}">
-@endpush
-
-@push('scripts')
-    <script src="{{ asset('assets/plugins/datatables.min.js') }}"></script>
-    <script src="{{ asset('vendor/datatables/buttons.server-side.js') }}"></script>
+@push('js')
+	@include('components.js.datatable', ['route' => $route, 'model' => $model])
 @endpush
\ No newline at end of file
diff --git a/resources/views/components/datatables/buttons/colvis.blade.php b/resources/views/components/datatables/buttons/colvis.blade.php
index a4cb7704..a4796586 100644
--- a/resources/views/components/datatables/buttons/colvis.blade.php
+++ b/resources/views/components/datatables/buttons/colvis.blade.php
@@ -8,10 +8,28 @@
 
 		$colvis.on( 'click', function () {
 			var table = window.LaravelDataTables["{{ $model }}-table"];
+			console.log(table);
+
+			console.log(table.column(1).dataSrc());
+			var header = table.column(1).header();
+			console.log($(header).html());
+			var visible = table.column(1).visible();
+			console.log(visible);
+
+/*
+			// var names = table.columns().names();
+			columns = table.columns();
+			console.log(columns);
+
+			var names = columns.names();
+			console.log(names);
+
 			// table.search($search.val()).draw();
 			buttons = table.buttons();
 			console.log(table.button('colvis'));
 			console.log(buttons);
+*/
+
 /*
 			for (var i = buttons.length - 1; i >= 0; i--) {
 				console.log(buttons[i]);
diff --git a/resources/views/components/datatables/buttons/download.blade.php b/resources/views/components/datatables/buttons/download.blade.php
index 0f1cb855..eebba1e1 100644
--- a/resources/views/components/datatables/buttons/download.blade.php
+++ b/resources/views/components/datatables/buttons/download.blade.php
@@ -4,27 +4,25 @@
 	</button>
 
 	<ul class="dropdown-menu" x-placement="bottom-start">
-		<li class="dropdown-item excelWithFilter"><a href="#"><i class="fa fa-file-excel"></i> Exporter la sélection</a></li>
+		<li class="dropdown-item"><a href="#" class="excelWithFilter"><i class="fa fa-file-excel"></i> Exporter la sélection</a></li>
 		<li class="dropdown-item"><a href="{{ $route }}/exportExcel"><i class="fa fa-file-excel"></i> Exporter la liste complète</a></li>
-		<li class="dropdown-item"><a href="#"><i class="fa fa-file-pdf"></i> Exporter la sélection</a></li>
+		<div class="dropdown-divider"></div>
+		<li class="dropdown-item"><a href="#" class="pdfWithFilter"><i class="fa fa-file-pdf"></i> Exporter la sélection</a></li>
 		<li class="dropdown-item"><a href="{{ $route }}/exportPDF"><i class="fa fa-file-pdf"></i> Exporter la liste complète</a></li>
 	</ul>
 </span>
 
 @push('js')
-<script>
-	$('.excelWithFilter').click(function() {
-		/*
-		var data = $('#filters').serializeJSON();
-		var query = encodeURIComponent(JSON.stringify(data));
-		console.log(data);
-		console.log(query);
-		var url = "{{ $route }}/exportExcel?filters=" + query; 
-		console.log(url);
-*/
-		var data = $('#filters').serialize();
-		var url = "{{ $route }}/exportExcel?" + data;
-		window.location = url;
-	})
-</script>
-@endpush
\ No newline at end of file
+	<script>
+		$('.excelWithFilter').click(function() {
+			var data = $('#filters').serialize();
+			var url = "{{ $route }}/exportExcel?" + data;
+			window.location = url;
+		})
+		$('.pdfWithFilter').click(function() {
+			var data = $('#filters').serialize();
+			var url = "{{ $route }}/exportPDF?" + data;
+			window.location = url;
+		})
+	</script>
+@endpush
diff --git a/resources/views/components/datatables/buttons/exports.blade.php b/resources/views/components/datatables/buttons/exports.blade.php
index e4434a71..1233bda8 100644
--- a/resources/views/components/datatables/buttons/exports.blade.php
+++ b/resources/views/components/datatables/buttons/exports.blade.php
@@ -1,6 +1,9 @@
 <div class="datatable-export-buttons">
 
 	@include('components.datatables.buttons.print')
-	@include('components.datatables.buttons.download')
+
+	@if (isset($with_exports) && $with_exports)
+		@include('components.datatables.buttons.download')
+	@endif
 	
 </div>
diff --git a/resources/views/components/datatables/buttons/print.blade.php b/resources/views/components/datatables/buttons/print.blade.php
index 893ee7f7..404c7921 100644
--- a/resources/views/components/datatables/buttons/print.blade.php
+++ b/resources/views/components/datatables/buttons/print.blade.php
@@ -4,8 +4,8 @@
 	</button>
 
 	<ul class="dropdown-menu" x-placement="bottom-start">
-		<li class="dropdown-item btn-print"><a href="#">Imprimer la sélection</a></li>
-		<li class="dropdown-item"><a href="{{ $route }}/print">Imprimer la liste complète</a></li>
+		<li class="dropdown-item printWithFilter"><a href="#" target="_BLANK">Imprimer la sélection</a></li>
+		<li class="dropdown-item"><a href="{{ $route }}/print" target="_BLANK">Imprimer la liste complète</a></li>
 	</ul>
 </span>
 
@@ -16,6 +16,12 @@
 			var table = window.LaravelDataTables["{{ $model }}-table"];
 			table.button(1).trigger();
 		});
+
+		$('.printWithFilter').click(function() {
+			var data = $('#filters').serialize();
+			var url = "{{ $route }}/print?" + data;
+			window.location = url;
+		})
 	</script>
 @endpush	
 
diff --git a/resources/views/components/datatables/search.blade.php b/resources/views/components/datatables/search.blade.php
index b3cfc872..2c44e2f2 100644
--- a/resources/views/components/datatables/search.blade.php
+++ b/resources/views/components/datatables/search.blade.php
@@ -3,11 +3,17 @@
 		@include('components.datatables.buttons.pageLength')
 		<span class="input-group-text"><i class="fa fa-search"></i></span>
 	</div>
-  	<input type="text" class="form-control search-btn" placeholder="Rechercher..." value="">
-  	<div class="input-group-append">
-  		@include('components.datatables.buttons.filters')
-  		@include('components.datatables.buttons.colvis')
-  	</div>
+	<input type="text" class="form-control search-btn" placeholder="Rechercher..." value="">
+	@if ((isset($with_filters) and $with_filters) || (isset($with_colvis) and $with_colvis))
+		<div class="input-group-append">
+			@if (isset($with_filters) && $with_filters)
+				@include('components.datatables.buttons.filters')
+			@endif
+			@if (isset($with_colvis) && $with_colvis)
+				@include('components.datatables.buttons.colvis')
+			@endif
+		</div>
+	@endif
 </div>
 
 @push('js')
@@ -15,7 +21,7 @@
 		var $search = $('#{{ $model }}-table-header .search-btn');
 		$search.on( 'keyup click', function () {
 			var table = window.LaravelDataTables["{{ $model }}-table"];
-	    	table.search($search.val()).draw();
-	  	} );
+			table.search($search.val()).draw();
+		} );
 	</script>
 @endpush
\ No newline at end of file
diff --git a/resources/views/components/js/datatable.blade.php b/resources/views/components/js/datatable.blade.php
index 113d9af0..66db9c08 100644
--- a/resources/views/components/js/datatable.blade.php
+++ b/resources/views/components/js/datatable.blade.php
@@ -1,11 +1,3 @@
-<script>
-	$.extend( true, $.fn.dataTable.defaults, {
-		language: {
-			url: "/assets/vendor/boilerplate/js/datatables/i18n/French.json"
-		},
-	});
-</script>
-
 {{$dataTable->scripts()}}
 
 <script>
@@ -14,22 +6,27 @@
 
 		var table = window.LaravelDataTables["{{ $model }}-table"];
 		
-		$('.btn-edit').off('click').click(function() {
-			var id = table.row(this).id();
+		$('.btn-edit').off('click').click(function(e) {
+			e.preventDefault();
+			// var id = table.row(this).id();
+			var id = $(this).data('id');
 			url = '{{ $route }}' + '/edit/' + id;
+			console.log(url);
 			openURL(url);
 		});
 
-		$('.btn-show').off('click').click(function() {
-			
-			var id = table.row(this).id();
+		$('.btn-show').off('click').click(function(e) {
+			e.preventDefault();			
+			// var id = table.row(this).id();
+			var id = $(this).data('id');
 			url = '{{ $route }}' + '/show/' + id;
 			openURL(url);
 		});
 
 		$('.btn-del').off('click').click(function (e) {
 			e.preventDefault();
-			var id = table.row(this).id();
+			// var id = table.row(this).id();
+			var id = $(this).data('id');
 
 			bootbox.confirm("{{ __('admin.confirmdelete') }}", function (result) {
 				if (result === false) return;
@@ -39,7 +36,7 @@
 					method: 'delete',
 					headers: {'X-CSRF-TOKEN': '{{ csrf_token() }}'},
 					success: function(){
-						line.remove();
+						// line.remove();
 						table.draw();
 						growl("{{ __('admin.deletesuccess') }}", 'success');
 					}
diff --git a/resources/views/layout/index.blade.php b/resources/views/layout/index.blade.php
index 6498195a..ca8f59c2 100644
--- a/resources/views/layout/index.blade.php
+++ b/resources/views/layout/index.blade.php
@@ -44,9 +44,7 @@
     <script src="{{ mix('/admin-lte.min.js', '/assets/vendor/boilerplate') }}"></script>
     <script src="{{ mix('/boilerplate.min.js', '/assets/vendor/boilerplate') }}"></script>
 
-    <script src="/js/datatables.min.js"></script>
     <script src="/js/main.min.js"></script>
-    <script src="{{ asset('vendor/datatables/buttons.server-side.js') }}"></script>
     @stack('scripts')
     <script>
         $.ajaxSetup({headers: {'X-CSRF-TOKEN': '{{ csrf_token() }}'}});
diff --git a/resources/views/load/datatables.blade.php b/resources/views/load/datatables.blade.php
new file mode 100644
index 00000000..18bdf624
--- /dev/null
+++ b/resources/views/load/datatables.blade.php
@@ -0,0 +1,23 @@
+@if(!defined('LOAD_DATATABLES'))
+
+	@push('css')
+		<link rel="stylesheet" href="{{ asset('css/datatables.min.css') }}">
+	@endpush
+
+	@push('scripts')
+		<script src="{{ asset('js/datatables.min.js') }}"></script>
+		<script src="{{ asset('vendor/datatables/buttons.server-side.js') }}"></script>
+
+		<script>
+			$.extend( true, $.fn.dataTable.defaults, {
+				language: {
+					url: "/assets/vendor/boilerplate/js/datatables/i18n/French.json"
+				}
+			}); 
+		</script>
+
+	@endpush
+
+	@php(define('LOAD_DATATABLES', true))
+
+@endif
\ No newline at end of file