(More or less) finish upgrading to Bootstrap 4

build.bat

@@ -4,7 +4,7 @@ if %projectPath:~-1%==\ set projectPath=%projectPath:~0,-1%
 set releasePath=%projectPath%\.release
 mkdir "%releasePath%"
 
-for /f "tokens=*" %%a in ('type version.txt') do set version=%%a
+for /f "tokens=*" %%a in ('build_tools\jq.exe .Version version.json --raw-output') do set version=%%a
 
 del "%releasePath%\grocy_%version%.zip"
 "build_tools\7za.exe" a -r "%releasePath%\grocy_%version%.zip" "%projectPath%\*" -xr!.* -xr!build_tools -xr!build.bat -xr!composer.json -xr!composer.lock -xr!package.json -xr!yarn.lock -xr!publication_assets

localization/de.php

@@ -131,6 +131,7 @@ return array(
 	'Track execution of habit #1' => 'Erfasse eine Ausführung von #1',
 	'Filter by location' => 'Nach Standort filtern',
 	'Search' => 'Suche',
+	'Not logged in' => 'Nicht angemeldet',
 	
 	//Constants
 	'manually' => 'Manuell',

package.json

@@ -3,14 +3,15 @@
 	"private": true,
 	"dependencies": {
 		"bootstrap": "^4.1.1",
+		"startbootstrap-sb-admin": "^4.0.0",
 		"jquery": "^3.3.1",
 		"font-awesome": "^4.7.0",
-		"bootbox": "^4.4.0",
+		"bootbox": "https://github.com/makeusabrew/bootbox.git#v5.x",
 		"jquery-serializejson": "^2.8.1",
 		"bootstrap-validator": "^0.11.9",
 		"bootstrap-datepicker": "^1.8.0",
 		"moment": "^2.18.1",
-		"@danielfarrell/bootstrap-combobox": "^1.1.8",
+		"@danielfarrell/bootstrap-combobox": "https://github.com/pallidus-fintech/bootstrap-combobox.git#enhance/boostrap_4",
 		"datatables.net": "^1.10.19",
 		"datatables.net-bs4": "^1.10.19",
 		"datatables.net-responsive": "^2.2.3",
@@ -18,7 +19,7 @@
 		"timeago": "^1.6.1",
 		"toastr": "^2.1.3",
 		"tagmanager": "https://github.com/max-favilli/tagmanager.git#3.0.2",
-		"eonasdan-bootstrap-datetimepicker": "^4.17.47",
+		"tempusdominus-bootstrap-4": "^5.0.1",
 		"swagger-ui-dist": "^3.13.4",
 		"jquery-ui-dist": "^1.12.1",
 		"bootstrap-side-navbar": "https://github.com/samrayner/bootstrap-side-navbar.git#1.0.1"

public/css/grocy.css

@@ -1,112 +1,26 @@
-body {
+/* Main style customizations */
+body {
 	font-family: 'Noto Sans', sans-serif;
-	font-size: 0.85rem
 }
 
-#top-nav {
-	background-color: #e5e5e5;
-	border-bottom: 2px solid;
-	border-color: #d6d6d6;
-}
-
-.navbar-brand {
-	font-weight: bold;
-	letter-spacing: -5px;
-	font-size: 2.2em;
-	color: #0b024c !important;
-	margin-left: 0 !important;
-	padding-left: 5px !important;
-}
-
-#sidebar {
-	background-color: #e5e5e5;
-	border-right: 2px solid #d6d6d6;
-	max-width: 260px;
-	border-left: 0;
-	overflow-y: auto;
-	height: 100%;
-}
-
-#sidebar > ul > a > li {
-	background-color: #e5e5e5;
-	border: 0;
-}
-
-@media (min-width: 768px) {
-	#navbar-mobile {
-		display: none !important;
-	}
-
-	.nav-copyright {
-		padding-bottom: 100px;
-	}
-}
-
-.sidebar-nav > li {
-	padding-right: 20px;
-	padding-left: 20px;
-	transition: all 0.3s;
-}
-
-.sidebar-nav > li:hover {
-	box-shadow: inset 5px 0 0 #337ab7;
-	transition: all 0.3s;
-}
-
-.sidebar-nav > li:focus {
-	box-shadow: inset 5px 0 0 #ab2230;
-	transition: all 0.3s;
-}
-
-.sidebar-nav > .active,
-.sidebar-nav > .active:hover,
-.sidebar-nav > .active:focus {
-	background-color: #d6d6d6;
-	box-shadow: inset 5px 0 0 #ab2230;
-	transition: all 0.3s;
-}
-
-.nav > li.disabled > a,
-.nav-link-navbar {
-	color: #7d7d7d;
-}
-
-.nav-copyright {
-	color: #a7a7a7;
-	font-size: 11px;
-	text-align: center;
-}
-
-.nav-copyright > li > a {
-	padding-top: 0 !important;
-	padding-bottom: 0 !important;
-}
-
-#top-nav .navbar-nav > .open > a {
-	background-color: #d6d6d6 !important;
-}
-
-.dropdown-item > li > a:hover,
-.dropdown-item > li > a:focus,
-.dropdown-item:active {
-	background-color: #e5e5e5 !important;
-}
-
-.well {
-	background-color: #e5e5e5;
-	padding-right: 25px;
-	padding-left: 25px;
-}
-
-td {
-     vertical-align: middle !important;
+.content-text {
+	font-size: 0.85rem;
 }
 
 .responsive-button {
     white-space: normal;
 }
 
-.discrete-link {
+.no-real-button {
+	pointer-events: none;
+}
+
+.timeago-contextual {
+	font-style: italic;
+	font-size: 0.8em;
+}
+
+a.discrete-link {
 	color: inherit !important;
 	transition: all 0.3s !important;
 }
@@ -114,70 +28,114 @@ td {
 a.discrete-link:hover {
 	color: #337ab7 !important;
 	text-decoration: none !important;
-	transition: all 0.3s !important;
 }
 
 a.discrete-link:focus {
 	color: #ab2230 !important;
 	text-decoration: none !important;
+}
+
+.card {
+	border: 2px solid;
+	border-color: #d6d6d6;
+	border-radius: 0;
+}
+
+.card-header {
+	background-color: #e5e5e5;
+}
+
+/* Navigation style customizations */
+#mainNav {
+	background-color: #e5e5e5 !important;
+	border-bottom: 2px solid !important;
+	border-color: #d6d6d6 !important;
+}
+
+.navbar-sidenav {
+	overflow-y: auto;
+	overflow-x: hidden;
+}
+
+.navbar-sidenav,
+.sidenav-second-level {
+	background-color: #e5e5e5 !important;
+	border-top: 2px solid !important;
+	border-right: 2px solid !important;
+	border-color: #d6d6d6 !important;
+}
+
+.navbar-nav .dropdown-menu {
+	background-color: #e5e5e5 !important;
+	border: 0;
+	border-radius: 0;
+}
+
+.navbar-nav .dropdown-divider {
+	border-top: 2px solid !important;
+	border-color: #d6d6d6 !important;
+}
+
+.sidenav-toggler {
+	background-color: #d6d6d6 !important;
+	border-right: 2px solid !important;
+	border-color: #d6d6d6 !important;
+}
+
+.navbar-sidenav > li,
+.sidenav-second-level > li {
 	transition: all 0.3s !important;
 }
 
+.navbar-sidenav > li:hover,
+.sidenav-second-level > li:hover,
+.navbar-nav .dropdown-item:hover {
+	box-shadow: inset 5px 0 0 #337ab7 !important;
+	background-color: #d6d6d6 !important;
+}
+
+.navbar-sidenav > li > a:focus,
+.sidenav-second-level > li > a:focus,
+.navbar-nav .dropdown-item:focus {
+	box-shadow: inset 5px 0 0 #ab2230 !important;
+	background-color: #d6d6d6 !important;
+}
+
+.active-page {
+	box-shadow: inset 5px 0 0 #ab2230 !important;
+	background-color: #d6d6d6 !important;
+}
+
+/* Third party component customizations - DataTables */
+td {
+     vertical-align: middle !important;
+}
+
 .table td.fit-content,
 .table th.fit-content {
 	white-space: nowrap;
 	width: 1%;
 }
 
-.dataTables_info,
-.dataTables_length,
-.dataTables_filter {
-	font-style: italic;
-}
-
-.timeago-contextual {
-	font-style: italic;
-	font-size: 0.8em;
-}
-
-.disabled,
-.no-real-button {
-	pointer-events: none;
-	margin-top: 2px;
-	margin-bottom: 2px;
-}
-
-.discrete-content-separator-2x {
-	padding-top: 10px;
-	padding-bottom: 10px;
-}
-
-.warning-bg {
-	background-color: #fcf8e3 !important;
-}
-
-.error-bg {
-	background-color: #f2dede !important;
-}
-
-.info-bg {
-	background-color: #afd9ee !important;
+.dataTables_filter,
+.dataTables_info {
+	display: none;
 }
 
+/* Third party component customizations - toastr */
 #toast-container > div {
 	opacity: 1;
 	filter: alpha(opacity=100);
 }
 
 .toast-success {
-	background-color: #4c994c;
+	background-color: #28a745;
+}
+
+.toast-error {
+	background-color: #dc3545;
 }
 
 #toast-container > div {
 	box-shadow: none;
 }
-
-.dataTables_filter,
-.dataTables_info {
-	display: none;
-}

public/img/grocy_icon.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="60.000000pt" height="93.000000pt" viewBox="0 0 60.000000 93.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.15, written by Peter Selinger 2001-2017
+</metadata>
+<g transform="translate(0.000000,93.000000) scale(0.100000,-0.100000)"
+fill="#0b024c" stroke="none">
+<path d="M165 905 c-52 -18 -109 -82 -132 -148 -14 -39 -18 -82 -18 -172 0
+-104 3 -127 23 -170 43 -94 114 -144 205 -145 59 0 112 21 156 63 l33 32 -7
+-75 c-10 -96 -17 -116 -57 -140 -43 -26 -130 -26 -233 0 -43 11 -80 20 -82 20
+-2 0 -3 -30 -1 -67 l3 -68 50 -13 c28 -8 100 -14 160 -15 172 -1 255 38 304
+142 l26 56 3 353 4 352 -75 0 -75 0 -7 -40 -7 -40 -36 31 c-67 59 -150 75
+-237 44z m206 -141 c45 -23 62 -72 62 -180 1 -112 -18 -152 -79 -172 -125 -42
+-201 80 -163 260 21 96 97 135 180 92z"/>
+</g>
+</svg>

public/img/grocy_logo.svg

@@ -0,0 +1,33 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="242.000000pt" height="93.000000pt" viewBox="0 0 242.000000 93.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.15, written by Peter Selinger 2001-2017
+</metadata>
+<g transform="translate(0.000000,93.000000) scale(0.100000,-0.100000)"
+fill="#0b024c" stroke="none">
+<path d="M165 905 c-52 -18 -109 -82 -132 -148 -14 -39 -18 -82 -18 -172 0
+-104 3 -127 23 -170 43 -94 114 -144 205 -145 59 0 112 21 156 63 l33 32 -7
+-75 c-10 -96 -17 -116 -57 -140 -43 -26 -130 -26 -233 0 -43 11 -80 20 -82 20
+-2 0 -3 -30 -1 -67 l3 -68 50 -13 c28 -8 100 -14 160 -15 121 -1 183 14 244
+60 36 28 81 112 81 155 0 54 6 58 90 58 l78 0 4 193 c3 180 4 194 25 223 20
+28 99 72 110 61 2 -3 -1 -24 -6 -48 -6 -24 -11 -79 -11 -121 0 -137 53 -233
+158 -285 50 -24 69 -28 147 -28 107 0 158 20 219 83 l40 41 23 -34 c13 -20 46
+-45 80 -62 51 -25 69 -28 153 -28 68 0 108 5 143 18 l47 19 0 74 0 74 -42 -21
+c-58 -30 -154 -37 -197 -15 -85 44 -98 250 -21 328 24 24 36 28 84 28 99 0 92
+9 200 -260 l97 -242 -23 -46 c-32 -65 -67 -87 -134 -87 l-54 0 0 -66 0 -67 45
+-6 c108 -17 215 34 269 128 20 33 296 754 296 771 0 3 -40 5 -89 5 l-90 0 -64
+-197 c-35 -109 -69 -214 -75 -233 -10 -34 -10 -34 -11 -7 -1 16 -31 120 -68
+232 l-66 202 -143 8 c-116 5 -154 4 -197 -9 -61 -18 -126 -61 -145 -98 l-14
+-25 -52 53 c-40 39 -67 56 -106 68 -87 26 -181 19 -272 -19 -14 -5 -18 -2 -18
+14 0 19 -6 21 -52 21 -64 0 -129 -30 -164 -76 -15 -19 -30 -34 -34 -34 -4 0
+-13 23 -20 50 l-12 50 -133 0 -133 0 -7 -40 -7 -40 -36 31 c-67 59 -150 75
+-237 44z m206 -141 c45 -23 62 -72 62 -180 1 -112 -18 -152 -79 -172 -125 -42
+-201 80 -163 260 21 96 97 135 180 92z m888 -10 c40 -33 54 -89 49 -184 -7
+-118 -41 -160 -131 -160 -87 0 -121 53 -121 185 0 135 34 185 125 185 36 0 55
+-6 78 -26z"/>
+</g>
+</svg>

public/js/grocy.js

@@ -21,8 +21,8 @@ U = function(relativePath)
 
 if (!Grocy.ActiveNav.isEmpty())
 {
-	var menuItem = $('.nav').find("[data-nav-for-page='" + Grocy.ActiveNav + "']");
-	menuItem.addClass('active');
+	var menuItem = $('#sidebarResponsive').find("[data-nav-for-page='" + Grocy.ActiveNav + "']");
+	menuItem.addClass('active-page');
 }	
 
 $.timeago.settings.allowFuture = true;

public/viewjs/batteries.js

@@ -4,7 +4,8 @@
 	'columnDefs': [
 		{ 'orderable': false, 'targets': 0 }
 	],
-	'language': JSON.parse(L('datatables_localization'))
+	'language': JSON.parse(L('datatables_localization')),
+	'scrollY': false
 });
 
 $("#search").on("keyup", function()

public/viewjs/batteriesoverview.js

@@ -4,7 +4,8 @@
 	'columnDefs': [
 		{ 'orderable': false, 'targets': 0 }
 	],
-	'language': JSON.parse(L('datatables_localization'))
+	'language': JSON.parse(L('datatables_localization')),
+	'scrollY': false
 });
 
 $("#search").on("keyup", function()

public/viewjs/components/datetimepicker.js

@@ -6,6 +6,6 @@ $(function()
 		showTodayButton: true,
 		calendarWeeks: true,
 		maxDate: moment(),
-		locale: moment.locale('de')
+		locale: moment.locale()
 	});
 });

public/viewjs/habits.js

@@ -4,7 +4,8 @@
 	'columnDefs': [
 		{ 'orderable': false, 'targets': 0 }
 	],
-	'language': JSON.parse(L('datatables_localization'))
+	'language': JSON.parse(L('datatables_localization')),
+	'scrollY': false
 });
 
 $("#search").on("keyup", function()

public/viewjs/habitsoverview.js

@@ -4,7 +4,8 @@
 	'columnDefs': [
 		{ 'orderable': false, 'targets': 0 }
 	],
-	'language': JSON.parse(L('datatables_localization'))
+	'language': JSON.parse(L('datatables_localization')),
+	'scrollY': false
 });
 
 $("#search").on("keyup", function()

public/viewjs/inventory.js

@@ -243,8 +243,8 @@ var addBarcode = GetUriParam('addbarcodetoselection');
 if (addBarcode !== undefined)
 {
 	$('#addbarcodetoselection').text(addBarcode);
-	$('#flow-info-addbarcodetoselection').removeClass('hide');
-	$('#barcode-lookup-disabled-hint').removeClass('hide');
+	$('#flow-info-addbarcodetoselection').removeClass('d-none');
+	$('#barcode-lookup-disabled-hint').removeClass('d-none');
 }
 
 $('#new_amount').on('keypress', function(e)

public/viewjs/locations.js

@@ -4,7 +4,8 @@
 	'columnDefs': [
 		{ 'orderable': false, 'targets': 0 }
 	],
-	'language': JSON.parse(L('datatables_localization'))
+	'language': JSON.parse(L('datatables_localization')),
+	'scrollY': false
 });
 
 $("#search").on("keyup", function()

public/viewjs/login.js

@@ -1,4 +1,5 @@
 $('.logout-button').hide();
+$('.logout-button-divider').hide();
 
 $('#username').focus();
 

public/viewjs/manageapikeys.js

@@ -4,7 +4,8 @@
 	'columnDefs': [
 		{ 'orderable': false, 'targets': 0 }
 	],
-	'language': JSON.parse(L('datatables_localization'))
+	'language': JSON.parse(L('datatables_localization')),
+	'scrollY': false
 });
 
 var createdApiKeyId = GetUriParam('CreatedApiKeyId');

public/viewjs/products.js

@@ -4,7 +4,8 @@
 	'columnDefs': [
 		{ 'orderable': false, 'targets': 0 }
 	],
-	'language': JSON.parse(L('datatables_localization'))
+	'language': JSON.parse(L('datatables_localization')),
+	'scrollY': false
 });
 
 $("#search").on("keyup", function()

public/viewjs/purchase.js

@@ -97,7 +97,8 @@ $('#product_id').on('change', function(e)
 });
 
 $('.combobox').combobox({
-	appendId: '_text_input'
+	appendId: '_text_input',
+	bsVersion: '4'
 });
 
 $('#product_id_text_input').on('change', function(e)
@@ -253,8 +254,8 @@ var addBarcode = GetUriParam('addbarcodetoselection');
 if (addBarcode !== undefined)
 {
 	$('#addbarcodetoselection').text(addBarcode);
-	$('#flow-info-addbarcodetoselection').removeClass('hide');
-	$('#barcode-lookup-disabled-hint').removeClass('hide');
+	$('#flow-info-addbarcodetoselection').removeClass('d-none');
+	$('#barcode-lookup-disabled-hint').removeClass('d-none');
 }
 
 $('#best_before_date').on('change', function(e)

public/viewjs/quantityunits.js

@@ -4,7 +4,8 @@
 	'columnDefs': [
 		{ 'orderable': false, 'targets': 0 }
 	],
-	'language': JSON.parse(L('datatables_localization'))
+	'language': JSON.parse(L('datatables_localization')),
+	'scrollY': false
 });
 
 $("#search").on("keyup", function()

public/viewjs/shoppinglist.js

@@ -4,7 +4,8 @@
 	'columnDefs': [
 		{ 'orderable': false, 'targets': 0 }
 	],
-	'language': JSON.parse(L('datatables_localization'))
+	'language': JSON.parse(L('datatables_localization')),
+	'scrollY': false
 });
 
 $("#search").on("keyup", function()

views/batteries.blade.php

@@ -5,24 +5,27 @@
 @section('viewJsName', 'batteries')
 
 @section('content')
-<h1 class="page-header">
+<div class="row">
+	<div class="col">
+		<h1>
 			@yield('title')
-	<a class="btn btn-default" href="{{ $U('/battery/new') }}" role="button">
+			<a class="btn btn-outline-dark" href="{{ $U('/battery/new') }}">
 				<i class="fa fa-plus"></i>&nbsp;{{ $L('Add') }}
 			</a>
-</h1>
-
-<div class="container-fluid">
-	<div class="row">
-		<div class="col-sm-3 no-gutters">
-			<label for="search">{{ $L('Search') }}</label>
-			<input type="text" class="form-control" id="search">
-		</div>
+		</h1>
 	</div>
 </div>
 
-<div class="table-responsive">
-	<table id="batteries-table" class="table table-striped">
+<div class="row mt-3">
+	<div class="col-3">
+		<label for="search">{{ $L('Search') }}</label>
+		<input type="text" class="form-control" id="search">
+	</div>
+</div>
+
+<div class="row">
+	<div class="col">
+		<table id="batteries-table" class="table table-sm table-striped dt-responsive">
 			<thead>
 				<tr>
 					<th>#</th>
@@ -35,10 +38,10 @@
 				@foreach($batteries as $battery)
 				<tr>
 					<td class="fit-content">
-					<a class="btn btn-info" href="{{ $U('/battery/') }}{{ $battery->id }}" role="button">
+						<a class="btn btn-info btn-sm" href="{{ $U('/battery/') }}{{ $battery->id }}">
 							<i class="fa fa-pencil"></i>
 						</a>
-					<a class="btn btn-danger battery-delete-button" href="#" role="button" data-battery-id="{{ $battery->id }}" data-battery-name="{{ $battery->name }}">
+						<a class="btn btn-danger btn-sm battery-delete-button" href="#" data-battery-id="{{ $battery->id }}" data-battery-name="{{ $battery->name }}">
 							<i class="fa fa-trash"></i>
 						</a>
 					</td>
@@ -55,5 +58,6 @@
 				@endforeach
 			</tbody>
 		</table>
+	</div>
 </div>
 @stop

views/batteriesoverview.blade.php

@@ -9,24 +9,24 @@
 @endpush
 
 @section('content')
-<h1 class="page-header">@yield('title')</h1>
-
-<div class="container-fluid">
-	<div class="row">
-		<p class="btn btn-lg btn-warning no-real-button responsive-button">{{ $L('#1 batteries are due to be charged within the next #2 days', $countDueNextXDays, $nextXDays) }}</p>
+<div class="row">
+	<div class="col">
+		<h1>@yield('title')</h1>
+		<p class="btn btn-lg btn-warning no-real-button responsive-button mr-2">{{ $L('#1 batteries are due to be charged within the next #2 days', $countDueNextXDays, $nextXDays) }}</p>
 		<p class="btn btn-lg btn-danger no-real-button responsive-button">{{ $L('#1 batteries are overdue to be charged', $countOverdue) }}</p>
 	</div>
-	<div class="discrete-content-separator-2x"></div>
-	<div class="row">
-		<div class="col-sm-3 no-gutters">
-			<label for="search">{{ $L('Search') }}</label>
-			<input type="text" class="form-control" id="search">
-		</div>
-	</div>
 </div>
 
-<div class="table-responsive">
-	<table id="batteries-overview-table" class="table table-striped">
+<div class="row mt-3">
+	<div class="col-3">
+		<label for="search">{{ $L('Search') }}</label>
+		<input type="text" class="form-control" id="search">
+	</div>
+</div>
+
+<div class="row">
+	<div class="col">
+		<table id="batteries-overview-table" class="table table-sm table-striped dt-responsive">
 			<thead>
 				<tr>
 					<th>#</th>
@@ -37,9 +37,9 @@
 			</thead>
 			<tbody>
 				@foreach($current as $curentBatteryEntry)
-			<tr class="@if(FindObjectInArrayByPropertyValue($batteries, 'id', $curentBatteryEntry->battery_id)->charge_interval_days > 0 && $nextChargeTimes[$curentBatteryEntry->battery_id] < date('Y-m-d H:i:s')) error-bg @endif">
+				<tr class="@if(FindObjectInArrayByPropertyValue($batteries, 'id', $curentBatteryEntry->battery_id)->charge_interval_days > 0 && $nextChargeTimes[$curentBatteryEntry->battery_id] < date('Y-m-d H:i:s')) table-danger @endif">
 					<td class="fit-content">
-					<a class="btn btn-success btn-xs track-charge-cycle-button" href="#" title="{{ $L('Track charge cycle of battery #1', FindObjectInArrayByPropertyValue($batteries, 'id', $curentBatteryEntry->battery_id)->name) }}"
+						<a class="btn btn-success btn-sm track-charge-cycle-button" href="#" title="{{ $L('Track charge cycle of battery #1', FindObjectInArrayByPropertyValue($batteries, 'id', $curentBatteryEntry->battery_id)->name) }}"
 							data-battery-id="{{ $curentBatteryEntry->battery_id }}"
 							data-battery-name="{{ FindObjectInArrayByPropertyValue($batteries, 'id', $curentBatteryEntry->battery_id)->name }}">
 							<i class="fa fa-fire"></i>
@@ -64,5 +64,6 @@
 				@endforeach
 			</tbody>
 		</table>
+	</div>
 </div>
 @stop

views/batteryform.blade.php

@@ -9,8 +9,9 @@
 @section('viewJsName', 'batteryform')
 
 @section('content')
-<div class="col-lg-4 col-xs-12">
-	<h1 class="page-header">@yield('title')</h1>
+<div class="row">
+	<div class="col-lg-6 col-xs-12">
+		<h1>@yield('title')</h1>
 
 		<script>Grocy.EditMode = '{{ $mode }}';</script>
 
@@ -23,7 +24,7 @@
 			<div class="form-group">
 				<label for="name">{{ $L('Name') }}</label>
 				<input type="text" class="form-control" required id="name" name="name" value="@if($mode == 'edit'){{ $battery->name }}@endif">
-			<div class="help-block with-errors"></div>
+				<div class="invalid-feedback"></div>
 			</div>
 
 			<div class="form-group">
@@ -36,8 +37,9 @@
 				<input type="text" class="form-control" id="used_in" name="used_in" value="@if($mode == 'edit'){{ $battery->used_in }}@endif">
 			</div>
 
-		<button id="save-battery-button" type="submit" class="btn btn-default">{{ $L('Save') }}</button>
+			<button id="save-battery-button" type="submit" class="btn btn-success">{{ $L('Save') }}</button>
 
 		</form>
+	</div>
 </div>
 @stop

views/batterytracking.blade.php

@@ -5,8 +5,9 @@
 @section('viewJsName', 'batterytracking')
 
 @section('content')
-<div class="col-lg-4 col-xs-12">
-	<h1 class="page-header">@yield('title')</h1>
+<div class="row">
+	<div class="col-lg-4 col-xs-12">
+		<h1>@yield('title')</h1>
 
 		<form id="batterytracking-form">
 
@@ -18,7 +19,7 @@
 						<option value="{{ $battery->id }}">{{ $battery->name }}</option>
 					@endforeach
 				</select>
-			<div id="battery-error" class="help-block with-errors"></div>
+				<div id="battery-error" class="invalid-feedback"></div>
 			</div>
 
 			<div class="form-group">
@@ -29,15 +30,16 @@
 						<span class="fa fa-calendar"></span>
 					</span>
 				</div>
-			<div class="help-block with-errors"></div>
+				<div class="invalid-feedback"></div>
 			</div>
 
-		<button id="save-batterytracking-button" type="submit" class="btn btn-default">{{ $L('OK') }}</button>
+			<button id="save-batterytracking-button" type="submit" class="btn btn-success">{{ $L('OK') }}</button>
 
 		</form>
-</div>
+	</div>
 
-<div class="col-lg-4 col-xs-12">
+	<div class="col-lg-4 col-xs-12">
 		@include('components.batterycard')
+	</div>
 </div>
 @stop

views/components/batterycard.blade.php

@@ -2,14 +2,13 @@
 	<script src="{{ $U('/viewjs/components/batterycard.js', true) }}?v={{ $version }}"></script>
 @endpush
 
-<div class="main well">
-
-	<h3>{{ $L('Battery overview') }} <strong><span id="batterycard-battery-name"></span></strong></h3>
-
-	<p>
+<div class="card">
+	<div class="card-header">
+		<i class="fa fa-fw fa-battery-three-quarters"></i> {{ $L('Battery overview') }} <strong><span id="batterycard-battery-name"></span></strong>
+	</div>
+	<div class="card-body">
 		<strong>{{ $L('Used in') }}:</strong> <span id="batterycard-battery-used_in"></span><br>
 		<strong>{{ $L('Charge cycles count') }}:</strong> <span id="batterycard-battery-charge-cycles-count"></span><br>
 		<strong>{{ $L('Last charged') }}:</strong> <span id="batterycard-battery-last-charged"></span> <time id="batterycard-battery-last-charged-timeago" class="timeago timeago-contextual"></time><br>
-	</p>
-	
+	</div>
 </div>

views/components/datepicker.blade.php

@@ -6,9 +6,9 @@
 	<label for="{{ $id }}">{{ $L($label) }}&nbsp;&nbsp;<span class="small text-muted"><time id="datepicker-timeago" class="timeago timeago-contextual"></time>@if(!empty($hint))<br>{{ $L($hint) }}@endif</span></label>
 	<div class="input-group date">
 		<input type="text" data-isodate="isodate" class="form-control datepicker" id="{{ $id }}" name="{{ $id }}" required autocomplete="off">
-		<div id="datepicker-button" class="input-group-addon">
-			<i class="fa fa-calendar"></i>
+		<div id="datepicker-button" class="input-group-append">
+			<div class="input-group-text"><i class="fa fa-calendar"></i></div>
 		</div>
 	</div>
-	<div class="help-block with-errors"></div>
+	<div class="invalid-feedback"></div>
 </div>

views/components/datetimepicker.blade.php

@@ -3,12 +3,12 @@
 @endpush
 
 <div class="form-group">
-<label for="{{ $id }}">{{ $L($label) }}</label>
-	<div class="input-group date datetimepicker">
-		<input type="text" class="form-control" id="{{ $id }}" name="{{ $id }}" required>
-		<span class="input-group-addon">
-			<span class="fa fa-calendar"></span>
-		</span>
+	<label for="{{ $id }}">{{ $L($label) }}</label>
+	<div class="input-group date datetimepicker" id="{{ $id }}" data-target-input="nearest">
+		<input type="text" class="form-control datetimepicker-input" data-target="#{{ $id }}"/>
+		<div class="input-group-append" data-target="#{{ $id }}" data-toggle="datetimepicker">
+			<div class="input-group-text"><i class="fa fa-calendar"></i></div>
 		</div>
-	<div class="help-block with-errors"></div>
+	</div>
+	<div class="invalid-feedback"></div>
 </div>

views/components/habitcard.blade.php

@@ -2,13 +2,12 @@
 	<script src="{{ $U('/viewjs/components/habitcard.js', true) }}?v={{ $version }}"></script>
 @endpush
 
-<div class="main well">
-
-	<h3>{{ $L('Habit overview') }} <strong><span id="habitcard-habit-name"></span></strong></h3>
-
-	<p>
+<div class="card">
+	<div class="card-header">
+		<i class="fa fa-fw fa-refresh"></i> {{ $L('Habit overview') }} <strong><span id="habitcard-habit-name"></span></strong>
+	</div>
+	<div class="card-body">
 		<strong>{{ $L('Tracked count') }}:</strong> <span id="habitcard-habit-tracked-count"></span><br>
 		<strong>{{ $L('Last tracked') }}:</strong> <span id="habitcard-habit-last-tracked"></span> <time id="habitcard-habit-last-tracked-timeago" class="timeago timeago-contextual"></time><br>
-	</p>
-	
+	</div>
 </div>

views/components/menu.blade.php

@@ -1,96 +0,0 @@
-<ul class="list-group list-group-flush sidebar-nav">
-	<a class="discrete-link" href="{{ $U('/stockoverview') }}">
-		<li class="list-group-item" data-nav-for-page="stockoverview">
-			<i class="fa fa-tachometer fa-fw"></i>&nbsp;{{ $L('Stock overview') }}
-		</li>
-	</a>
-	<a class="discrete-link" href="{{ $U('/habitsoverview') }}">
-		<li class="list-group-item" data-nav-for-page="habitsoverview">
-			<i class="fa fa-tachometer fa-fw"></i>&nbsp;{{ $L('Habits overview') }}
-		</li>
-	</a>
-	<a class="discrete-link" href="{{ $U('/batteriesoverview') }}">
-		<li class="list-group-item" data-nav-for-page="batteriesoverview">
-			<i class="fa fa-tachometer fa-fw"></i>&nbsp;{{ $L('Batteries overview') }}
-		</li>
-	</a>
-</ul>
-
-<div class="discrete-content-separator-2x"></div>
-
-<ul class="list-group list-group-flush sidebar-nav">
-	<li class="list-group-item disabled"><a href="#"><strong>{{ $L('Record data') }}</strong></a></li>
-	<a class="discrete-link" href="{{ $U('/purchase') }}">
-		<li class="list-group-item" data-nav-for-page="purchase">
-			<i class="fa fa-shopping-cart fa-fw"></i>&nbsp;{{ $L('Purchase') }}
-		</li>
-	</a>
-	<a class="discrete-link" href="{{ $U('/consume') }}">
-		<li class="list-group-item" data-nav-for-page="consume">
-			<i class="fa fa-cutlery fa-fw"></i>&nbsp;{{ $L('Consume') }}
-		</li>
-	</a>
-	<a class="discrete-link" href="{{ $U('/shoppinglist') }}">
-		<li class="list-group-item" data-nav-for-page="shoppinglist">
-			<i class="fa fa-shopping-bag fa-fw"></i>&nbsp;{{ $L('Shopping list') }}
-		</li>
-	</a>
-	<a class="discrete-link" href="{{ $U('/inventory') }}">
-		<li class="list-group-item" data-nav-for-page="inventory">
-			<i class="fa fa-list fa-fw"></i>&nbsp;{{ $L('Inventory') }}
-		</li>
-	</a>
-	<a class="discrete-link" href="{{ $U('/habittracking') }}">
-		<li class="list-group-item" data-nav-for-page="habittracking">
-			<i class="fa fa-play fa-fw"></i>&nbsp;{{ $L('Habit tracking') }}
-		</li>
-	</a>
-	<a class="discrete-link" href="{{ $U('/batterytracking') }}">
-		<li class="list-group-item" data-nav-for-page="batterytracking">
-			<i class="fa fa-fire fa-fw"></i>&nbsp;{{ $L('Battery tracking') }}
-		</li>
-	</a>
-</ul>
-
-<div class="discrete-content-separator-2x"></div>
-
-<ul class="list-group list-group-flush sidebar-nav">
-	<li class="list-group-item disabled"><a href="#"><strong>{{ $L('Manage master data') }}</strong></a></li>
-	
-	<a class="discrete-link" href="{{ $U('/products') }}">
-		<li class="list-group-item" data-nav-for-page="products">
-			<i class="fa fa-product-hunt fa-fw"></i>&nbsp;{{ $L('Products') }}
-		</li>
-	</a>
-	<a class="discrete-link" href="{{ $U('/locations') }}">
-		<li class="list-group-item" data-nav-for-page="locations">
-			<i class="fa fa-map-marker fa-fw"></i>&nbsp;{{ $L('Locations') }}
-		</li>
-	</a>
-	<a class="discrete-link" href="{{ $U('/quantityunits') }}">
-		<li class="list-group-item" data-nav-for-page="quantityunits">
-			<i class="fa fa-balance-scale fa-fw"></i>&nbsp;{{ $L('Quantity units') }}
-		</li>
-	</a>
-	<a class="discrete-link" href="{{ $U('/habits') }}">
-		<li class="list-group-item" data-nav-for-page="habits">
-			<i class="fa fa-refresh fa-fw"></i>&nbsp;{{ $L('Habits') }}
-		</li>
-	</a>
-	<a class="discrete-link" href="{{ $U('/batteries') }}">
-		<li class="list-group-item" data-nav-for-page="batteries">
-			<i class="fa fa-battery-three-quarters fa-fw"></i>&nbsp;{{ $L('Batteries') }}
-		</li>
-	</a>
-</ul>
-
-<div class="discrete-content-separator-2x hidden-xs"></div>
-
-<ul class="list-group list-group-flush nav-copyright">
-	<a class="discrete-link" href="#" data-toggle="modal" data-target="#about-modal">
-		<li class="list-group-item">
-			Version {{ $version }}<br>
-			{{ $L('About grocy') }}
-		</li>
-	</a>
-</ul>

views/components/productcard.blade.php

@@ -2,15 +2,14 @@
 	<script src="{{ $U('/viewjs/components/productcard.js', true) }}?v={{ $version }}"></script>
 @endpush
 
-<div class="main well">
-
-	<h3>{{ $L('Product overview') }} <strong><span id="productcard-product-name"></span></strong></h3>
-	<h4><strong>{{ $L('Stock quantity unit') }}:</strong> <span id="productcard-product-stock-qu-name"></span></h4>
-
-	<p>
+<div class="card">
+	<div class="card-header">
+		<i class="fa fa-fw fa-product-hunt"></i> {{ $L('Product overview') }} <strong><span id="productcard-product-name"></span></strong>
+	</div>
+	<div class="card-body">
+		<strong>{{ $L('Stock quantity unit') }}:</strong> <span id="productcard-product-stock-qu-name"></span><br>
 		<strong>{{ $L('Stock amount') }}:</strong> <span id="productcard-product-stock-amount"></span> <span id="productcard-product-stock-qu-name2"></span><br>
 		<strong>{{ $L('Last purchased') }}:</strong> <span id="productcard-product-last-purchased"></span> <time id="productcard-product-last-purchased-timeago" class="timeago timeago-contextual"></time><br>
 		<strong>{{ $L('Last used') }}:</strong> <span id="productcard-product-last-used"></span> <time id="productcard-product-last-used-timeago" class="timeago timeago-contextual"></time>
-	</p>
-	
+	</div>
 </div>

views/components/usermenu.blade.php

@@ -1,17 +0,0 @@
-<ul class="nav navbar-nav ml-auto">
-	<li class="dropdown nav-item">
-		<a href="#" class="dropdown-toggle nav-link nav-link-navbar" data-toggle="dropdown">@if(AUTHENTICATED === true){{ HTTP_USER }}@endif <span class="caret"></span></a>
-		<ul class="dropdown-menu dropdown-menu-right">
-			<li class="dropdown-item">
-				<a class="discrete-link logout-button" href="{{ $U('/logout') }}"><i class="fa fa-sign-out fa-fw"></i>&nbsp;{{ $L('Logout') }}</a>
-			</li>
-			<div class="dropdown-divider"></div>
-			<li class="dropdown-item">
-				<a class="discrete-link" href="{{ $U('/manageapikeys') }}"><i class="fa fa-handshake-o fa-fw"></i>&nbsp;{{ $L('Manage API keys') }}</a>
-			</li>
-			<li class="dropdown-item">
-				<a class="discrete-link" target="_blank" href="{{ $U('/api') }}"><i class="fa fa-book"></i>&nbsp;{{ $L('REST API & data model documentation') }}</a>
-			</li>
-		</ul>
-	</li>
-</ul>

views/consume.blade.php

@@ -5,8 +5,9 @@
 @section('viewJsName', 'consume')
 
 @section('content')
-<div class="col-lg-4 col-xs-12">
-	<h1 class="page-header">@yield('title')</h1>
+<div class="row">
+	<div class="col-lg-4 col-xs-12">
+		<h1>@yield('title')</h1>
 
 		<form id="consume-form">
 
@@ -18,13 +19,13 @@
 						<option data-additional-searchdata="{{ $product->barcode }}" value="{{ $product->id }}">{{ $product->name }}</option>
 					@endforeach
 				</select>
-			<div id="product-error" class="help-block with-errors"></div>
+				<div id="product-error" class="invalid-feedback"></div>
 			</div>
 
 			<div class="form-group">
 				<label for="amount">{{ $L('Amount') }}&nbsp;&nbsp;<span id="amount_qu_unit" class="small text-muted"></span></label>
 				<input type="number" class="form-control" id="amount" name="amount" value="1" min="1" required>
-			<div class="help-block with-errors"></div>
+				<div class="invalid-feedback"></div>
 			</div>
 
 			<div class="checkbox">
@@ -33,12 +34,13 @@
 				</label>
 			</div>
 
-		<button id="save-consume-button" type="submit" class="btn btn-default">{{ $L('OK') }}</button>
+			<button id="save-consume-button" type="submit" class="btn btn-success">{{ $L('OK') }}</button>
 
 		</form>
-</div>
+	</div>
 
-<div class="col-lg-4 col-xs-12">
+	<div class="col-lg-6 col-xs-12">
 		@include('components.productcard')
+	</div>
 </div>
 @stop

views/habitform.blade.php

@@ -9,8 +9,9 @@
 @section('viewJsName', 'habitform')
 
 @section('content')
-<div class="col-lg-4 col-xs-12">
-	<h1 class="page-header">@yield('title')</h1>
+<div class="row">
+	<div class="col-lg-6 col-xs-12">
+		<h1>@yield('title')</h1>
 
 		<script>Grocy.EditMode = '{{ $mode }}';</script>
 
@@ -23,7 +24,7 @@
 			<div class="form-group">
 				<label for="name">{{ $L('Name') }}</label>
 				<input type="text" class="form-control" required id="name" name="name" value="@if($mode == 'edit'){{ $habit->name }}@endif">
-			<div class="help-block with-errors"></div>
+				<div class="invalid-feedback"></div>
 			</div>
 
 			<div class="form-group">
@@ -38,19 +39,20 @@
 						<option @if($mode == 'edit' && $periodType == $habit->period_type) selected="selected" @endif value="{{ $periodType }}">{{ $L($periodType) }}</option>
 					@endforeach
 				</select>
-			<div class="help-block with-errors"></div>
+				<div class="invalid-feedback"></div>
 			</div>
 
 			<div class="form-group">
 				<label for="period_days">{{ $L('Period days') }}</label>
 				<input type="number" class="form-control input-group-habit-period-type" id="period_days" name="period_days" value="@if($mode == 'edit'){{ $habit->period_days }}@endif">
-			<div class="help-block with-errors"></div>
+				<div class="invalid-feedback"></div>
 			</div>
 
 			<p id="habit-period-type-info" class="help-block text-muted"></p>
 
-		<button id="save-habit-button" type="submit" class="btn btn-default">{{ $L('Save') }}</button>
+			<button id="save-habit-button" type="submit" class="btn btn-success">{{ $L('Save') }}</button>
 
 		</form>
+	</div>
 </div>
 @stop

views/habits.blade.php

@@ -5,24 +5,27 @@
 @section('viewJsName', 'habits')
 
 @section('content')
-<h1 class="page-header">
+<div class="row">
+	<div class="col">
+		<h1>
 			@yield('title')
-	<a class="btn btn-default" href="{{ $U('/habit/new') }}" role="button">
+			<a class="btn btn-outline-dark" href="{{ $U('/habit/new') }}">
 				<i class="fa fa-plus"></i>&nbsp;{{ $L('Add') }}
 			</a>
-</h1>
-
-<div class="container-fluid">
-	<div class="row">
-		<div class="col-sm-3 no-gutters">
-			<label for="search">{{ $L('Search') }}</label>
-			<input type="text" class="form-control" id="search">
-		</div>
+		</h1>
 	</div>
 </div>
 
-<div class="table-responsive">
-	<table id="habits-table" class="table table-striped">
+<div class="row mt-3">
+	<div class="col-3">
+		<label for="search">{{ $L('Search') }}</label>
+		<input type="text" class="form-control" id="search">
+	</div>
+</div>
+
+<div class="row">
+	<div class="col">
+		<table id="habits-table" class="table table-sm table-striped dt-responsive">
 		<thead>
 			<tr>
 				<th>#</th>
@@ -36,10 +39,10 @@
 			@foreach($habits as $habit)
 			<tr>
 				<td class="fit-content">
-					<a class="btn btn-info" href="{{ $U('/habit/') }}{{ $habit->id }}" role="button">
+					<a class="btn btn-info btn-sm" href="{{ $U('/habit/') }}{{ $habit->id }}">
 						<i class="fa fa-pencil"></i>
 					</a>
-					<a class="btn btn-danger habit-delete-button" href="#" role="button" data-habit-id="{{ $habit->id }}" data-habit-name="{{ $habit->name }}">
+					<a class="btn btn-danger btn-sm habit-delete-button" href="#" data-habit-id="{{ $habit->id }}" data-habit-name="{{ $habit->name }}">
 						<i class="fa fa-trash"></i>
 					</a>
 				</td>
@@ -59,5 +62,6 @@
 			@endforeach
 		</tbody>
 		</table>
+	</div>
 </div>
 @stop

views/habitsoverview.blade.php

@@ -9,24 +9,24 @@
 @endpush
 
 @section('content')
-<h1 class="page-header">@yield('title')</h1>
-
-<div class="container-fluid">
-	<div class="row">
-		<p class="btn btn-lg btn-warning no-real-button responsive-button">{{ $L('#1 habits are due to be done within the next #2 days', $countDueNextXDays, $nextXDays) }}</p>
+<div class="row">
+	<div class="col">
+		<h1>@yield('title')</h1>
+		<p class="btn btn-lg btn-warning no-real-button responsive-button mr-2">{{ $L('#1 habits are due to be done within the next #2 days', $countDueNextXDays, $nextXDays) }}</p>
 		<p class="btn btn-lg btn-danger no-real-button responsive-button">{{ $L('#1 habits are overdue to be done', $countOverdue) }}</p>
 	</div>
-	<div class="discrete-content-separator-2x"></div>
-	<div class="row">
-		<div class="col-sm-3 no-gutters">
-			<label for="search">{{ $L('Search') }}</label>
-			<input type="text" class="form-control" id="search">
-		</div>
-	</div>
 </div>
 
-<div class="table-responsive">
-	<table id="habits-overview-table" class="table table-striped">
+<div class="row mt-3">
+	<div class="col-3">
+		<label for="search">{{ $L('Search') }}</label>
+		<input type="text" class="form-control" id="search">
+	</div>
+</div>
+
+<div class="row">
+	<div class="col">
+		<table id="habits-overview-table" class="table table-sm table-striped dt-responsive">
 			<thead>
 				<tr>
 					<th>#</th>
@@ -37,9 +37,9 @@
 			</thead>
 			<tbody>
 				@foreach($currentHabits as $curentHabitEntry)
-			<tr class="@if(FindObjectInArrayByPropertyValue($habits, 'id', $curentHabitEntry->habit_id)->period_type === \Grocy\Services\HabitsService::HABIT_TYPE_DYNAMIC_REGULAR && $nextHabitTimes[$curentHabitEntry->habit_id] < date('Y-m-d H:i:s')) error-bg @endif">
+				<tr class="@if(FindObjectInArrayByPropertyValue($habits, 'id', $curentHabitEntry->habit_id)->period_type === \Grocy\Services\HabitsService::HABIT_TYPE_DYNAMIC_REGULAR && $nextHabitTimes[$curentHabitEntry->habit_id] < date('Y-m-d H:i:s')) table-danger @endif">
 					<td class="fit-content">
-					<a class="btn btn-success btn-xs track-habit-button" href="#" title="{{ $L('Track execution of habit #1', FindObjectInArrayByPropertyValue($habits, 'id', $curentHabitEntry->habit_id)->name) }}"
+						<a class="btn btn-success btn-sm track-habit-button" href="#" title="{{ $L('Track execution of habit #1', FindObjectInArrayByPropertyValue($habits, 'id', $curentHabitEntry->habit_id)->name) }}"
 							data-habit-id="{{ $curentHabitEntry->habit_id }}"
 							data-habit-name="{{ FindObjectInArrayByPropertyValue($habits, 'id', $curentHabitEntry->habit_id)->name }}">
 							<i class="fa fa-play"></i>
@@ -64,5 +64,6 @@
 				@endforeach
 			</tbody>
 		</table>
+	</div>
 </div>
 @stop

views/habittracking.blade.php

@@ -5,8 +5,9 @@
 @section('viewJsName', 'habittracking')
 
 @section('content')
-<div class="col-lg-4 col-xs-12">
-	<h1 class="page-header">@yield('title')</h1>
+<div class="row">
+	<div class="col-lg-4 col-xs-12">
+		<h1>@yield('title')</h1>
 
 		<form id="habittracking-form">
 
@@ -18,7 +19,7 @@
 						<option value="{{ $habit->id }}">{{ $habit->name }}</option>
 					@endforeach
 				</select>
-			<div id="product-error" class="help-block with-errors"></div>
+				<div id="product-error" class="invalid-feedback"></div>
 			</div>
 
 			@include('components.datetimepicker', array(
@@ -26,12 +27,13 @@
 				'label' => 'Tracked time'
 			))
 
-		<button id="save-habittracking-button" type="submit" class="btn btn-default">{{ $L('OK') }}</button>
+			<button id="save-habittracking-button" type="submit" class="btn btn-success">{{ $L('OK') }}</button>
 
 		</form>
-</div>
+	</div>
 
-<div class="col-lg-4 col-xs-12">
+	<div class="col-lg-4 col-xs-12">
 		@include('components.habitcard')
+	</div>
 </div>
 @stop

views/inventory.blade.php

@@ -5,28 +5,29 @@
 @section('viewJsName', 'inventory')
 
 @section('content')
-<div class="col-lg-4 col-xs-12">
-	<h1 class="page-header">@yield('title')</h1>
+<div class="row">
+	<div class="col-lg-4 col-xs-12">
+		<h1>@yield('title')</h1>
 
 		<form id="inventory-form">
 
 			<div class="form-group">
-			<label for="product_id">{{ $L('Product') }}&nbsp;&nbsp;<i class="fa fa-barcode"></i><span id="barcode-lookup-disabled-hint" class="small text-muted hide">&nbsp;&nbsp;{{ $L('Barcode lookup is disabled') }}</span></label>
+				<label for="product_id">{{ $L('Product') }}&nbsp;&nbsp;<i class="fa fa-barcode"></i><span id="barcode-lookup-disabled-hint" class="small text-muted d-none">&nbsp;&nbsp;{{ $L('Barcode lookup is disabled') }}</span></label>
 				<select class="form-control combobox" id="product_id" name="product_id" required>
 					<option value=""></option>
 					@foreach($products as $product)
 						<option data-additional-searchdata="{{ $product->barcode }}" value="{{ $product->id }}">{{ $product->name }}</option>
 					@endforeach
 				</select>
-			<div class="help-block with-errors"></div>
-			<div id="flow-info-addbarcodetoselection" class="text-muted small hide"><strong><span id="addbarcodetoselection"></span></strong> {{ $L('will be added to the list of barcodes for the selected product on submit') }}</div>
+				<div class="invalid-feedback"></div>
+				<div id="flow-info-addbarcodetoselection" class="text-muted small d-none"><strong><span id="addbarcodetoselection"></span></strong> {{ $L('will be added to the list of barcodes for the selected product on submit') }}</div>
 			</div>
 
 			<div class="form-group">
 				<label for="new_amount">{{ $L('New amount') }}&nbsp;&nbsp;<span id="new_amount_qu_unit" class="small text-muted"></span></label>
 				<input type="number" data-notequal="notequal" class="form-control" id="new_amount" name="new_amount" min="0" not-equal="-1" required>
-			<div class="help-block with-errors"></div>
-			<div id="inventory-change-info" class="help-block text-muted"></div>
+				<div class="invalid-feedback"></div>
+				<div id="inventory-change-info" class="text-muted"></div>
 			</div>
 
 			@include('components.datepicker', array(
@@ -35,12 +36,13 @@
 				'hint' => 'This will apply to added products'
 			))
 
-		<button id="save-inventory-button" type="submit" class="btn btn-default">{{ $L('OK') }}</button>
+			<button id="save-inventory-button" type="submit" class="btn btn-success">{{ $L('OK') }}</button>
 
 		</form>
-</div>
+	</div>
 
-<div class="col-lg-4 col-xs-12">
+	<div class="col-lg-4 col-xs-12">
 		@include('components.productcard')
+	</div>
 </div>
 @stop

views/layout/default.blade.php

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="{{ CULTURE }}" class="h-100">
+<html lang="{{ CULTURE }}">
 <head>
 	<meta charset="utf-8">
 	<meta http-equiv="x-ua-compatible" content="ie=edge">
@@ -9,11 +9,12 @@
 	<meta name="format-detection" content="telephone=no">
 
 	<meta name="author" content="Bernd Bestel (bernd@berrnd.de)">
-	<link rel="icon" type="image/png" sizes="200x200" href="{{ $U('/img/grocy.png?v=', true) }}{{ $version }}">
+	<link rel="icon" href="{{ $U('/img/grocy_icon.svg?v=', true) }}{{ $version }}">
 
 	<title>@yield('title') | grocy</title>
 
 	<link href="{{ $U('/node_modules/bootstrap/dist/css/bootstrap.min.css?v=', true) }}{{ $version }}" rel="stylesheet">
+	<link href="{{ $U('/node_modules/startbootstrap-sb-admin/css/sb-admin.min.css?v=', true) }}{{ $version }}" rel="stylesheet">
 	<link href="{{ $U('/node_modules/font-awesome/css/font-awesome.min.css?v=', true) }}{{ $version }}" rel="stylesheet">
 	<link href="{{ $U('/node_modules/bootstrap-datepicker/dist/css/bootstrap-datepicker3.min.css?v=', true) }}{{ $version }}" rel="stylesheet">
 	<link href="{{ $U('/node_modules/@danielfarrell/bootstrap-combobox/css/bootstrap-combobox.css?v=', true) }}{{ $version }}" rel="stylesheet">
@@ -21,7 +22,7 @@
 	<link href="{{ $U('/node_modules/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css?v=', true) }}{{ $version }}" rel="stylesheet">
 	<link href="{{ $U('/node_modules/toastr/build/toastr.min.css?v=', true) }}{{ $version }}" rel="stylesheet">
 	<link href="{{ $U('/node_modules/tagmanager/tagmanager.css?v=', true) }}{{ $version }}" rel="stylesheet">
-	<link href="{{ $U('/node_modules/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css?v=', true) }}{{ $version }}" rel="stylesheet">
+	<link href="{{ $U('/node_modules/tempusdominus-bootstrap-4/build/css/tempusdominus-bootstrap-4.min.css?v=', true) }}{{ $version }}" rel="stylesheet">
 	<link href="{{ $U('/components_unmanaged/noto-sans-v6-latin/noto-sans-v6-latin.css?v=', true) }}{{ $version }}" rel="stylesheet">
 	<link href="{{ $U('/css/grocy.css?v=', true) }}{{ $version }}" rel="stylesheet">
 	@stack('pageStyles')
@@ -35,67 +36,180 @@
 	</script>
 </head>
 
-<body class="h-100">
-	<nav id="top-nav" class="navbar navbar-expand-lg navbar-light fixed-top py-0">
-		<a class="navbar-brand py-0" href="{{ $U('/') }}">grocy</a>
-		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-mobile">
+<body class="fixed-nav">
+	<nav id="mainNav" class="navbar navbar-expand-lg navbar-light fixed-top">
+		<a class="navbar-brand" href="{{ $U('/') }}"><img src="{{ $U('/img/grocy_logo.svg?v=', true) }}" height="30"></a>
+		
+		<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#sidebarResponsive">
 			<span class="navbar-toggler-icon"></span>
 		</button>
 
-		<div id="navbar" class="collapse navbar-collapse">
-			@include('components.usermenu')
-		</div>
+		<div id="sidebarResponsive" class="collapse navbar-collapse">
+			<ul class="navbar-nav navbar-sidenav">
 
-		<div id="navbar-mobile" class="collapse navbar-collapse">
-			<!--@include('components.menu')-->
-			@include('components.usermenu')
+				<li class="nav-item" data-toggle="tooltip" data-placement="right" title="{{ $L('Stock overview') }}" data-nav-for-page="stockoverview">
+					<a class="nav-link discrete-link" href="{{ $U('/stockoverview') }}">
+						<i class="fa fa-fw fa-dashboard"></i>
+						<span class="nav-link-text">{{ $L('Stock overview') }}</span>
+					</a>
+				</li>
+				<li class="nav-item" data-toggle="tooltip" data-placement="right" title="{{ $L('Habits overview') }}" data-nav-for-page="habitsoverview">
+					<a class="nav-link discrete-link" href="{{ $U('/habitsoverview') }}">
+						<i class="fa fa-fw fa-dashboard"></i>
+						<span class="nav-link-text">{{ $L('Habits overview') }}</span>
+					</a>
+				</li>
+				<li class="nav-item" data-toggle="tooltip" data-placement="right" title="{{ $L('Batteries overview') }}" data-nav-for-page="batteriesoverview">
+					<a class="nav-link discrete-link" href="{{ $U('/batteriesoverview') }}">
+						<i class="fa fa-fw fa-dashboard"></i>
+						<span class="nav-link-text">{{ $L('Batteries overview') }}</span>
+					</a>
+				</li>
+
+				<li class="nav-item mt-4" data-toggle="tooltip" data-placement="right" title="{{ $L('Purchase') }}" data-nav-for-page="purchase">
+					<a class="nav-link discrete-link" href="{{ $U('/purchase') }}">
+						<i class="fa fa-fw fa-shopping-cart"></i>
+						<span class="nav-link-text">{{ $L('Purchase') }}</span>
+					</a>
+				</li>
+				<li class="nav-item" data-toggle="tooltip" data-placement="right" title="{{ $L('Consume') }}" data-nav-for-page="consume">
+					<a class="nav-link discrete-link" href="{{ $U('/consume') }}">
+						<i class="fa fa-fw fa-cutlery"></i>
+						<span class="nav-link-text">{{ $L('Consume') }}</span>
+					</a>
+				</li>
+				<li class="nav-item" data-toggle="tooltip" data-placement="right" title="{{ $L('Shopping list') }}" data-nav-for-page="shoppinglist">
+					<a class="nav-link discrete-link" href="{{ $U('/shoppinglist') }}">
+						<i class="fa fa-fw fa-shopping-bag"></i>
+						<span class="nav-link-text">{{ $L('Shopping list') }}</span>
+					</a>
+				</li>
+				<li class="nav-item" data-toggle="tooltip" data-placement="right" title="{{ $L('Inventory') }}" data-nav-for-page="inventory">
+					<a class="nav-link discrete-link" href="{{ $U('/inventory') }}">
+						<i class="fa fa-fw fa-list"></i>
+						<span class="nav-link-text">{{ $L('Inventory') }}</span>
+					</a>
+				</li>
+				<li class="nav-item" data-toggle="tooltip" data-placement="right" title="{{ $L('Habit tracking') }}" data-nav-for-page="habittracking">
+					<a class="nav-link discrete-link" href="{{ $U('/habittracking') }}">
+						<i class="fa fa-fw fa-play"></i>
+						<span class="nav-link-text">{{ $L('Habit tracking') }}</span>
+					</a>
+				</li>
+				<li class="nav-item" data-toggle="tooltip" data-placement="right" title="{{ $L('Battery tracking') }}" data-nav-for-page="batterytracking">
+					<a class="nav-link discrete-link" href="{{ $U('/batterytracking') }}">
+						<i class="fa fa-fw fa-fire"></i>
+						<span class="nav-link-text">{{ $L('Battery tracking') }}</span>
+					</a>
+				</li>
+				
+				<li class="nav-item mt-4" data-toggle="tooltip" data-placement="right" title="{{ $L('Manage master data') }}">
+					<a class="nav-link nav-link-collapse collapsed discrete-link" data-toggle="collapse" href="#top-nav-manager-master-data">
+						<i class="fa fa-fw fa-wrench"></i>
+						<span class="nav-link-text">{{ $L('Manage master data') }}</span>
+					</a>
+					<ul id="top-nav-manager-master-data" class="sidenav-second-level collapse">
+						<li data-nav-for-page="products">
+							<a class="nav-link discrete-link" href="{{ $U('/products') }}">
+								<i class="fa fa-fw fa-product-hunt"></i>
+								<span class="nav-link-text">{{ $L('Products') }}</span>
+							</a>
+						</li>
+						<li data-nav-for-page="locations">
+							<a class="nav-link discrete-link" href="{{ $U('/locations') }}">
+								<i class="fa fa-fw fa-map-marker"></i>
+								<span class="nav-link-text">{{ $L('Locations') }}</span>
+							</a>
+						</li>
+						<li data-nav-for-page="quantityunits">
+							<a class="nav-link discrete-link" href="{{ $U('/quantityunits') }}">
+								<i class="fa fa-fw fa-balance-scale"></i>
+								<span class="nav-link-text">{{ $L('Quantity units') }}</span>
+							</a>
+						</li>
+						<li data-nav-for-page="habits">
+							<a class="nav-link discrete-link" href="{{ $U('/habits') }}">
+								<i class="fa fa-fw fa-refresh"></i>
+								<span class="nav-link-text">{{ $L('Habits') }}</span>
+							</a>
+						</li>
+						<li data-nav-for-page="batteries">
+							<a class="nav-link discrete-link" href="{{ $U('/batteries') }}">
+								<i class="fa fa-fw fa-battery-three-quarters"></i>
+								<span class="nav-link-text">{{ $L('Batteries') }}</span>
+							</a>
+						</li>
+					</ul>
+				</li>
+			</ul>
+
+			<ul class="navbar-nav sidenav-toggler">
+				<li class="nav-item">
+					<a id="sidenavToggler" class="nav-link text-center">
+						<i class="fa fa-fw fa-angle-left"></i>
+					</a>
+				</li>
+			</ul>
+
+			<ul class="navbar-nav ml-auto">
+				<li class="nav-item dropdown">
+					<a class="nav-link dropdown-toggle mr-lg-2" href="#" data-toggle="dropdown">@if(AUTHENTICATED === true){{ HTTP_USER }}@else{{ $L('Not logged in') }}@endif</a>
+
+					<div class="dropdown-menu dropdown-menu-right">
+						<a class="dropdown-item logout-button discrete-link" href="{{ $U('/logout') }}"><i class="fa fa-sign-out fa-fw"></i>&nbsp;{{ $L('Logout') }}</a>
+						
+						<div class="dropdown-divider logout-button-divider"></div>
+
+						<a class="dropdown-item discrete-link" href="{{ $U('/manageapikeys') }}"><i class="fa fa-handshake-o fa-fw"></i>&nbsp;{{ $L('Manage API keys') }}</a>
+						<a class="dropdown-item discrete-link" target="_blank" href="{{ $U('/api') }}"><i class="fa fa-book"></i>&nbsp;{{ $L('REST API & data model documentation') }}</a>
+						
+						<div class="dropdown-divider"></div>
+
+						<a class="dropdown-item discrete-link" href="#" data-toggle="modal" data-target="#about-modal"><i class="fa fa-info fa-fw"></i>&nbsp;{{ $L('About grocy') }} (Version {{ $version }})</a>
+					</div>
+				</li>
+			</ul>
 		</div>
 	</nav>
 
-	<div class="container-fluid h-100">
-		<div class="row h-100 pt-5">
-
-			<nav id="sidebar" class="col-2 d-none d-lg-block pt-3 px-0">
-				@include('components.menu')
-			</nav>
-
-			<div class="col pt-3 ml-4 mr-0">
+	<div class="content-wrapper">
+		<div class="container-fluid">
+			<div class="row">
+				<div class="col content-text">
 					@yield('content')
 				</div>
-
+			</div>
 		</div>
 	</div>
 
-	<div class="modal fade" id="about-modal" tabindex="-1">
+	<div class="modal fade content-text" id="about-modal" tabindex="-1">
 		<div class="modal-dialog">
 			<div class="modal-content text-center">
 				<div class="modal-header">
-					<button type="button" class="close" data-dismiss="modal">&times;</button>
-					<h4 class="modal-title">{{ $L('About grocy') }}</h4>
+					<h4 class="modal-title w-100">{{ $L('About grocy') }}</h4>
+					<button type="button" class="close" data-dismiss="modal" title="{{ $L('Close') }}">&times;</button>
 				</div>
 				<div class="modal-body">
 					grocy is a project by
-					<a href="https://berrnd.de" target="_blank">Bernd Bestel</a><br>
+					<a href="https://berrnd.de" class="discrete-link" target="_blank">Bernd Bestel</a><br>
 					Created with passion since 2017<br>
 					<br>
 					Version {{ $version }}<br>
 					{{ $L('Released on') }} {{ $releaseDate }} <time class="timeago timeago-contextual" datetime="{{ $releaseDate }}"></time><br>
 					<br>
 					Life runs on code<br>
-					<a href="https://github.com/berrnd/grocy" target="_blank">
+					<a href="https://github.com/berrnd/grocy" class="discrete-link" target="_blank">
 						<i class="fa fa-github"></i>
 					</a>
 				</div>
-				<div class="modal-footer">
-					<button type="button" class="btn btn-default" data-dismiss="modal">{{ $L('Close') }}</button>
-				</div>
 			</div>
 		</div>
 	</div>
 
 	<script src="{{ $U('/node_modules/jquery/dist/jquery.min.js?v=', true) }}{{ $version }}"></script>
-	<script src="{{ $U('/node_modules/bootstrap/dist/js/bootstrap.min.js?v=', true) }}{{ $version }}"></script>
-	<script src="{{ $U('/node_modules/bootbox/bootbox.js?v=', true) }}{{ $version }}"></script>
+	<script src="{{ $U('/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js?v=', true) }}{{ $version }}"></script>
+	<script src="{{ $U('/node_modules/startbootstrap-sb-admin/js/sb-admin.min.js?v=', true) }}{{ $version }}"></script>
+	<script src="{{ $U('/node_modules/bootbox/dist/bootbox.min.js?v=', true) }}{{ $version }}"></script>
 	<script src="{{ $U('/node_modules/jquery-serializeJSON/jquery.serializejson.min.js?v=', true) }}{{ $version }}"></script>
 	<script src="{{ $U('/node_modules/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js?v=', true) }}{{ $version }}"></script>
 	@if(!empty($L('bootstrap_datepicker_locale')))<script src="{{ $U('/bower_components', true) }}/bootstrap-datepicker/dist/locales/bootstrap-datepicker.{{ $L('bootstrap_datepicker_locale') }}.min.js?v={{ $version }}"></script>@endif
@@ -111,7 +225,7 @@
 	<script src="{{ $U('/node_modules', true) }}/timeago/locales/jquery.timeago.{{ $L('timeago_locale') }}.js?v={{ $version }}"></script>
 	<script src="{{ $U('/node_modules/toastr/build/toastr.min.js?v=', true) }}{{ $version }}"></script>
 	<script src="{{ $U('/node_modules/tagmanager/tagmanager.js?v=', true) }}{{ $version }}"></script>
-	<script src="{{ $U('/node_modules/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js?v=', true) }}{{ $version }}"></script>
+	<script src="{{ $U('/node_modules/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.min.js?v=', true) }}{{ $version }}"></script>
 
 	<script src="{{ $U('/js/extensions.js?v=', true) }}{{ $version }}"></script>
 	<script src="{{ $U('/js/grocy.js?v=', true) }}{{ $version }}"></script>
@@ -123,4 +237,5 @@
 		@php include __DIR__ . '/../../data/add_before_end_body.html' @endphp
 	@endif
 </body>
+
 </html>

views/locationform.blade.php

@@ -9,8 +9,9 @@
 @section('viewJsName', 'locationform')
 
 @section('content')
-<div class="col-lg-4 col-xs-12">
-	<h1 class="page-header">@yield('title')</h1>
+<div class="row">
+	<div class="col-lg-6 col-xs-12">
+		<h1>@yield('title')</h1>
 
 		<script>Grocy.EditMode = '{{ $mode }}';</script>
 
@@ -23,7 +24,7 @@
 			<div class="form-group">
 				<label for="name">{{ $L('Name') }}</label>
 				<input type="text" class="form-control" required id="name" name="name" value="@if($mode == 'edit'){{ $location->name }}@endif">
-			<div class="help-block with-errors"></div>
+				<div class="invalid-feedback"></div>
 			</div>
 
 			<div class="form-group">
@@ -31,8 +32,9 @@
 				<textarea class="form-control" rows="2" id="description" name="description">@if($mode == 'edit'){{ $location->description }}@endif</textarea>
 			</div>
 
-		<button id="save-location-button" type="submit" class="btn btn-default">{{ $L('Save') }}</button>
+			<button id="save-location-button" type="submit" class="btn btn-success">{{ $L('Save') }}</button>
 
 		</form>
+	</div>
 </div>
 @stop

views/locations.blade.php

@@ -5,24 +5,27 @@
 @section('viewJsName', 'locations')
 
 @section('content')
-<h1 class="page-header">
+<div class="row">
+	<div class="col">
+		<h1>
 			@yield('title')
-	<a class="btn btn-default" href="{{ $U('/location/new') }}" role="button">
+			<a class="btn btn-outline-dark" href="{{ $U('/location/new') }}">
 				<i class="fa fa-plus"></i>&nbsp;{{ $L('Add') }}
 			</a>
-</h1>
-
-<div class="container-fluid">
-	<div class="row">
-		<div class="col-sm-3 no-gutters">
-			<label for="search">{{ $L('Search') }}</label>
-			<input type="text" class="form-control" id="search">
-		</div>
+		</h1>
 	</div>
 </div>
 
-<div class="table-responsive">
-	<table id="locations-table" class="table table-striped">
+<div class="row mt-3">
+	<div class="col-3">
+		<label for="search">{{ $L('Search') }}</label>
+		<input type="text" class="form-control" id="search">
+	</div>
+</div>
+
+<div class="row">
+	<div class="col">
+		<table id="locations-table" class="table table-sm table-striped dt-responsive">
 			<thead>
 				<tr>
 					<th>#</th>
@@ -34,10 +37,10 @@
 				@foreach($locations as $location)
 				<tr>
 					<td class="fit-content">
-					<a class="btn btn-info" href="{{ $U('/location/') }}{{ $location->id }}" role="button">
+						<a class="btn btn-info btn-sm" href="{{ $U('/location/') }}{{ $location->id }}">
 							<i class="fa fa-pencil"></i>
 						</a>
-					<a class="btn btn-danger location-delete-button" href="#" role="button" data-location-id="{{ $location->id }}" data-location-name="{{ $location->name }}">
+						<a class="btn btn-danger btn-sm location-delete-button" href="#" data-location-id="{{ $location->id }}" data-location-name="{{ $location->name }}">
 							<i class="fa fa-trash"></i>
 						</a>
 					</td>
@@ -51,5 +54,6 @@
 				@endforeach
 			</tbody>
 		</table>
+	</div>
 </div>
 @stop

views/login.blade.php

@@ -4,25 +4,27 @@
 @section('viewJsName', 'login')
 
 @section('content')
-	<div class="col-md-6 col-md-offset-3 col-xs-12">
-		<h1 class="page-header text-center">@yield('title')</h1>
+<div class="row">
+	<div class="col-lg-6 offset-lg-3 col-xs-12">
+		<h1 class="text-center">@yield('title')</h1>
 
 		<form method="post" action="{{ $U('/login') }}" id="login-form">
 
 			<div class="form-group">
 				<label for="name">{{ $L('Username') }}</label>
 				<input type="text" class="form-control" required id="username" name="username">
-				<div class="help-block with-errors"></div>
+				<div class="invalid-feedback"></div>
 			</div>
 
 			<div class="form-group">
 				<label for="name">{{ $L('Password') }}</label>
 				<input type="password" class="form-control" required id="password" name="password">
-				<div id="login-error" class="help-block with-errors"></div>
+				<div id="login-error" class="invalid-feedback"></div>
 			</div>
 
-			<button id="login-button" type="submit" class="btn btn-default">{{ $L('OK') }}</button>
+			<button id="login-button" type="submit" class="btn btn-success">{{ $L('OK') }}</button>
 
 		</form>
 	</div>
+</div>
 @stop

views/manageapikeys.blade.php

@@ -9,26 +9,27 @@
 @endpush
 
 @section('content')
-<h1 class="page-header">
+<div class="row">
+	<div class="col">
+		<h1>
 			@yield('title')
-	<a class="btn btn-default" href="{{ $U('/manageapikeys/new') }}" role="button">
-		<i class="fa fa-plus"></i>&nbsp;{{ $L('Create new API key') }}
+			<a class="btn btn-outline-dark" href="{{ $U('/manageapikeys/new') }}">
+				<i class="fa fa-plus"></i>&nbsp;{{ $L('Add') }}
 			</a>
-</h1>
-
-<p class="lead"><a href="{{ $U('/api') }}" target="_blank">{{ $L('REST API & data model documentation') }}</a></p>
-
-<div class="container-fluid">
-	<div class="row">
-		<div class="col-sm-3 no-gutters">
-			<label for="search">{{ $L('Search') }}</label>
-			<input type="text" class="form-control" id="search">
-		</div>
+		</h1>
 	</div>
 </div>
 
-<div class="table-responsive">
-	<table id="apikeys-table" class="table table-striped">
+<div class="row mt-3">
+	<div class="col-3">
+		<label for="search">{{ $L('Search') }}</label>
+		<input type="text" class="form-control" id="search">
+	</div>
+</div>
+
+<div class="row">
+	<div class="col">
+		<table id="apikeys-table" class="table table-sm table-striped dt-responsive">
 			<thead>
 				<tr>
 					<th>#</th>
@@ -42,7 +43,7 @@
 				@foreach($apiKeys as $apiKey)
 				<tr id="apiKeyRow_{{ $apiKey->id }}">
 					<td class="fit-content">
-					<a class="btn btn-danger apikey-delete-button" href="#" role="button" data-apikey-id="{{ $apiKey->id }}" data-apikey-apikey="{{ $apiKey->api_key }}">
+						<a class="btn btn-danger btn-sm apikey-delete-button" href="#" data-apikey-id="{{ $apiKey->id }}" data-apikey-apikey="{{ $apiKey->api_key }}">
 							<i class="fa fa-trash"></i>
 						</a>
 					</td>
@@ -65,5 +66,6 @@
 				@endforeach
 			</tbody>
 		</table>
+	</div>
 </div>
 @stop

views/openapiui.blade.php

@@ -9,7 +9,7 @@
 	<meta name="format-detection" content="telephone=no">
 
 	<meta name="author" content="Bernd Bestel (bernd@berrnd.de)">
-	<link rel="icon" type="image/png" sizes="200x200" href="{{ $U('/img/grocy.png?v=', true) }}{{ $version }}">
+	<link rel="icon" href="{{ $U('/img/grocy_icon.svg?v=', true) }}{{ $version }}">
 
 	<title>{{ $L('REST API & data model documentation') }} | grocy</title>
 

views/productform.blade.php

@@ -9,8 +9,9 @@
 @section('viewJsName', 'productform')
 
 @section('content')
-<div class="col-lg-4 col-xs-12">
-	<h1 class="page-header">@yield('title')</h1>
+<div class="row">
+	<div class="col-lg-6 col-xs-12">
+		<h1>@yield('title')</h1>
 
 		<script>Grocy.EditMode = '{{ $mode }}';</script>
 
@@ -23,7 +24,7 @@
 			<div class="form-group">
 				<label for="name">{{ $L('Name') }}</label>
 				<input type="text" class="form-control" required id="name" name="name" value="@if($mode == 'edit'){{ $product->name}}@endif">
-			<div class="help-block with-errors"></div>
+				<div class="invalid-feedback"></div>
 			</div>
 
 			<div class="form-group">
@@ -44,19 +45,19 @@
 						<option @if($mode == 'edit' && $location->id == $product->location_id) selected="selected" @endif value="{{ $location->id }}">{{ $location->name }}</option>
 					@endforeach
 				</select>
-			<div class="help-block with-errors"></div>
+				<div class="invalid-feedback"></div>
 			</div>
 
 			<div class="form-group">
 				<label for="min_stock_amount">{{ $L('Minimum stock amount') }}</label>
 				<input required min="0" type="number" class="form-control" id="min_stock_amount" name="min_stock_amount" value="@if($mode == 'edit'){{ $product->min_stock_amount }}@else{{0}}@endif">
-			<div class="help-block with-errors"></div>
+				<div class="invalid-feedback"></div>
 			</div>
 
 			<div class="form-group">
 				<label for="default_best_before_days">{{ $L('Default best before days') }}<br><span class="small text-muted">{{ $L('For purchases this amount of days will be added to today for the best before date suggestion') }}</span></label>
 				<input required min="0" type="number" class="form-control" id="default_best_before_days" name="default_best_before_days" value="@if($mode == 'edit'){{ $product->default_best_before_days }}@else{{0}}@endif">
-			<div class="help-block with-errors"></div>
+				<div class="invalid-feedback"></div>
 			</div>
 
 			<div class="form-group">
@@ -66,7 +67,7 @@
 						<option @if($mode == 'edit' && $quantityunit->id == $product->qu_id_purchase) selected="selected" @endif value="{{ $quantityunit->id }}">{{ $quantityunit->name }}</option>
 					@endforeach
 				</select>
-			<div class="help-block with-errors"></div>
+				<div class="invalid-feedback"></div>
 			</div>
 
 			<div class="form-group">
@@ -76,18 +77,19 @@
 						<option @if($mode == 'edit' && $quantityunit->id == $product->qu_id_stock) selected="selected" @endif value="{{ $quantityunit->id }}">{{ $quantityunit->name }}</option>
 					@endforeach
 				</select>
-			<div class="help-block with-errors"></div>
+				<div class="invalid-feedback"></div>
 			</div>
 
 			<div class="form-group">
 				<label for="qu_factor_purchase_to_stock">{{ $L('Factor purchase to stock quantity unit') }}</label>
 				<input required min="1" type="number" class="form-control input-group-qu" id="qu_factor_purchase_to_stock" name="qu_factor_purchase_to_stock" value="@if ($mode == 'edit'){{ $product->qu_factor_purchase_to_stock }}@else{{1}}@endif">
-			<div class="help-block with-errors"></div>
+				<div class="invalid-feedback"></div>
 			</div>
 
-		<p id="qu-conversion-info" class="help-block text-muted"></p>
+			<p id="qu-conversion-info" class="text-muted"></p>
 
-		<button id="save-product-button" type="submit" class="btn btn-default">{{ $L('Save') }}</button>
+			<button id="save-product-button" type="submit" class="btn btn-success">{{ $L('Save') }}</button>
 		</form>
+	</div>
 </div>
 @stop

views/products.blade.php

@@ -5,24 +5,27 @@
 @section('viewJsName', 'products')
 
 @section('content')
-<h1 class="page-header">
+<div class="row">
+	<div class="col">
+		<h1>
 			@yield('title')
-	<a class="btn btn-default" href="{{ $U('/product/new') }}" role="button">
+			<a class="btn btn-outline-dark" href="{{ $U('/product/new') }}">
 				<i class="fa fa-plus"></i>&nbsp;{{ $L('Add') }}
 			</a>
-</h1>
-
-<div class="container-fluid">
-	<div class="row">
-		<div class="col-sm-3 no-gutters">
-			<label for="search">{{ $L('Search') }}</label>
-			<input type="text" class="form-control" id="search">
-		</div>
+		</h1>
 	</div>
 </div>
 
-<div class="table-responsive">
-	<table id="products-table" class="table table-striped">
+<div class="row mt-3">
+	<div class="col-3">
+		<label for="search">{{ $L('Search') }}</label>
+		<input type="text" class="form-control" id="search">
+	</div>
+</div>
+
+<div class="row">
+	<div class="col">
+		<table id="products-table" class="table table-sm table-striped dt-responsive">
 			<thead>
 				<tr>
 					<th>#</th>
@@ -39,10 +42,10 @@
 				@foreach($products as $product)
 				<tr>
 					<td class="fit-content">
-					<a class="btn btn-info" href="{{ $U('/product/') }}{{ $product->id }}" role="button">
+						<a class="btn btn-info btn-sm" href="{{ $U('/product/') }}{{ $product->id }}">
 							<i class="fa fa-pencil"></i>
 						</a>
-					<a class="btn btn-danger product-delete-button" href="#" role="button" data-product-id="{{ $product->id }}" data-product-name="{{ $product->name }}">
+						<a class="btn btn-danger btn-sm product-delete-button" href="#" data-product-id="{{ $product->id }}" data-product-name="{{ $product->name }}">
 							<i class="fa fa-trash"></i>
 						</a>
 					</td>
@@ -71,5 +74,6 @@
 				@endforeach
 			</tbody>
 		</table>
+	</div>
 </div>
 @stop

views/purchase.blade.php

@@ -5,21 +5,22 @@
 @section('viewJsName', 'purchase')
 
 @section('content')
-<div class="col-lg-4 col-xs-12">
-	<h1 class="page-header">@yield('title')</h1>
+<div class="row">
+	<div class="col-lg-4 col-xs-12">
+		<h1>@yield('title')</h1>
 
 		<form id="purchase-form">
 
 			<div class="form-group">
-			<label for="product_id">{{ $L('Product') }}&nbsp;&nbsp;<i class="fa fa-barcode"></i><span id="barcode-lookup-disabled-hint" class="small text-muted hide">&nbsp;&nbsp;Barcode lookup is disabled</span></label>
+				<label for="product_id">{{ $L('Product') }}&nbsp;&nbsp;<i class="fa fa-barcode"></i><span id="barcode-lookup-disabled-hint" class="small text-muted d-none">&nbsp;&nbsp;Barcode lookup is disabled</span></label>
 				<select class="form-control combobox" id="product_id" name="product_id" required>
 					<option value=""></option>
 					@foreach($products as $product)
 						<option data-additional-searchdata="{{ $product->barcode }}" value="{{ $product->id }}">{{ $product->name }}</option>
 					@endforeach
 				</select>
-			<div class="help-block with-errors"></div>
-			<div id="flow-info-addbarcodetoselection" class="text-muted small hide"><strong><span id="addbarcodetoselection"></span></strong> {{ $L('will be added to the list of barcodes for the selected product on submit') }}</div>
+				<div class="invalid-feedback"></div>
+				<div id="flow-info-addbarcodetoselection" class="text-muted small d-none"><strong><span id="addbarcodetoselection"></span></strong> {{ $L('will be added to the list of barcodes for the selected product on submit') }}</div>
 			</div>
 
 			@include('components.datepicker', array(
@@ -30,15 +31,16 @@
 			<div class="form-group">
 				<label for="amount">{{ $L('Amount') }}&nbsp;&nbsp;<span id="amount_qu_unit" class="small text-muted"></span></label>
 				<input type="number" class="form-control" id="amount" name="amount" value="1" min="1" required>
-			<div class="help-block with-errors"></div>
+				<div class="invalid-feedback"></div>
 			</div>
 
-		<button id="save-purchase-button" type="submit" class="btn btn-default">{{ $L('OK') }}</button>
+			<button id="save-purchase-button" type="submit" class="btn btn-success">{{ $L('OK') }}</button>
 
 		</form>
-</div>
+	</div>
 
-<div class="col-lg-4 col-xs-12">
+	<div class="col-lg-6 col-xs-12">
 		@include('components.productcard')
+	</div>
 </div>
 @stop

views/quantityunitform.blade.php

@@ -9,8 +9,9 @@
 @section('viewJsName', 'quantityunitform')
 
 @section('content')
-<div class="col-lg-4 col-xs-12">
-	<h1 class="page-header">@yield('title')</h1>
+<div class="row">
+	<div class="col-lg-6 col-xs-12">
+		<h1>@yield('title')</h1>
 
 		<script>Grocy.EditMode = '{{ $mode }}';</script>
 
@@ -23,7 +24,7 @@
 			<div class="form-group">
 				<label for="name">{{ $L('Name') }}</label>
 				<input type="text" class="form-control" required id="name" name="name" value="@if($mode == 'edit'){{ $quantityunit->name }}@endif">
-			<div class="help-block with-errors"></div>
+				<div class="invalid-feedback"></div>
 			</div>
 
 			<div class="form-group">
@@ -31,8 +32,9 @@
 				<textarea class="form-control" rows="2" id="description" name="description">@if($mode == 'edit'){{ $quantityunit->description }}@endif</textarea>
 			</div>
 
-		<button id="save-quantityunit-button" type="submit" class="btn btn-default">{{ $L('Save') }}</button>
+			<button id="save-quantityunit-button" type="submit" class="btn btn-success">{{ $L('Save') }}</button>
 
 		</form>
+	</div>
 </div>
 @stop

views/quantityunits.blade.php

@@ -5,24 +5,27 @@
 @section('viewJsName', 'quantityunits')
 
 @section('content')
-<h1 class="page-header">
+<div class="row">
+	<div class="col">
+		<h1>
 			@yield('title')
-	<a class="btn btn-default" href="{{ $U('/quantityunit/new') }}" role="button">
+			<a class="btn btn-outline-dark" href="{{ $U('/quantityunit/new') }}">
 				<i class="fa fa-plus"></i>&nbsp;{{ $L('Add') }}
 			</a>
-</h1>
-
-<div class="container-fluid">
-	<div class="row">
-		<div class="col-sm-3 no-gutters">
-			<label for="search">{{ $L('Search') }}</label>
-			<input type="text" class="form-control" id="search">
-		</div>
+		</h1>
 	</div>
 </div>
 
-<div class="table-responsive">
-	<table id="quantityunits-table" class="table table-striped">
+<div class="row mt-3">
+	<div class="col-3">
+		<label for="search">{{ $L('Search') }}</label>
+		<input type="text" class="form-control" id="search">
+	</div>
+</div>
+
+<div class="row">
+	<div class="col">
+		<table id="quantityunits-table" class="table table-sm table-striped dt-responsive">
 			<thead>
 				<tr>
 					<th>#</th>
@@ -34,10 +37,10 @@
 				@foreach($quantityunits as $quantityunit)
 				<tr>
 					<td class="fit-content">
-					<a class="btn btn-info" href="{{ $U('/quantityunit/') }}{{ $quantityunit->id }}" role="button">
+						<a class="btn btn-info btn-sm" href="{{ $U('/quantityunit/') }}{{ $quantityunit->id }}">
 							<i class="fa fa-pencil"></i>
 						</a>
-					<a class="btn btn-danger quantityunit-delete-button" href="#" role="button" data-quantityunit-id="{{ $quantityunit->id }}" data-quantityunit-name="{{ $quantityunit->name }}">
+						<a class="btn btn-danger btn-sm quantityunit-delete-button" href="#" data-quantityunit-id="{{ $quantityunit->id }}" data-quantityunit-name="{{ $quantityunit->name }}">
 							<i class="fa fa-trash"></i>
 						</a>
 					</td>
@@ -51,5 +54,6 @@
 				@endforeach
 			</tbody>
 		</table>
+	</div>
 </div>
 @stop

views/shoppinglist.blade.php

@@ -5,27 +5,30 @@
 @section('viewJsName', 'shoppinglist')
 
 @section('content')
-<h1 class="page-header">
+<div class="row">
+	<div class="col">
+		<h1>
 			@yield('title')
-	<a class="btn btn-default" href="{{ $U('/shoppinglistitem/new') }}" role="button">
+			<a class="btn btn-outline-dark" href="{{ $U('/shoppinglistitem/new') }}">
 				<i class="fa fa-plus"></i>&nbsp;{{ $L('Add') }}
 			</a>
-	<a id="add-products-below-min-stock-amount" class="btn btn-info" href="#" role="button">
+			<a id="add-products-below-min-stock-amount" class="btn btn-info" href="#">
 				<i class="fa fa-plus"></i>&nbsp;{{ $L('Add products that are below defined min. stock amount') }}
 			</a>
-</h1>
-
-<div class="container-fluid">
-	<div class="row">
-		<div class="col-sm-3 no-gutters">
-			<label for="search">{{ $L('Search') }}</label>
-			<input type="text" class="form-control" id="search">
-		</div>
+		</h1>
 	</div>
 </div>
 
-<div class="table-responsive">
-	<table id="shoppinglist-table" class="table table-striped">
+<div class="row mt-3">
+	<div class="col-3">
+		<label for="search">{{ $L('Search') }}</label>
+		<input type="text" class="form-control" id="search">
+	</div>
+</div>
+
+<div class="row">
+	<div class="col">
+		<table id="shoppinglist-table" class="table table-sm table-striped dt-responsive">
 			<thead>
 				<tr>
 					<th>#</th>
@@ -35,12 +38,12 @@
 			</thead>
 			<tbody>
 				@foreach($listItems as $listItem)
-			<tr class="@if($listItem->amount_autoadded > 0) info-bg @endif">
+				<tr class="@if($listItem->amount_autoadded > 0) table-info @endif">
 					<td class="fit-content">
-					<a class="btn btn-info" href="{{ $U('/shoppinglistitem/') }}{{ $listItem->id }}" role="button">
+						<a class="btn btn-info" href="{{ $U('/shoppinglistitem/') }}{{ $listItem->id }}">
 							<i class="fa fa-pencil"></i>
 						</a>
-					<a class="btn btn-danger shoppinglist-delete-button" href="#" role="button" data-shoppinglist-id="{{ $listItem->id }}">
+						<a class="btn btn-danger shoppinglist-delete-button" href="#" data-shoppinglist-id="{{ $listItem->id }}">
 							<i class="fa fa-trash"></i>
 						</a>
 					</td>
@@ -54,5 +57,6 @@
 				@endforeach
 			</tbody>
 		</table>
+	</div>
 </div>
 @stop

views/shoppinglistform.blade.php

@@ -9,8 +9,9 @@
 @section('viewJsName', 'shoppinglistform')
 
 @section('content')
-<div class="col-lg-4 col-xs-12">
-	<h1 class="page-header">@yield('title')</h1>
+<div class="row">
+	<div class="col-lg-4 col-xs-12">
+		<h1>@yield('title')</h1>
 
 		<script>Grocy.EditMode = '{{ $mode }}';</script>
 
@@ -28,13 +29,13 @@
 						<option @if($mode == 'edit' && $product->id == $listItem->product_id) selected="selected" @endif data-additional-searchdata="{{ $product->barcode }}" value="{{ $product->id }}">{{ $product->name }}</option>
 					@endforeach
 				</select>
-			<div id="product-error" class="help-block with-errors"></div>
+				<div id="product-error" class="invalid-feedback"></div>
 			</div>
 
 			<div class="form-group">
 				<label for="amount">{{ $L('Amount') }}&nbsp;&nbsp;<span id="amount_qu_unit" class="small text-muted"></span><br><span class="small text-warning">@if($mode == 'edit' && $listItem->amount_autoadded > 0){{ $L('#1 units were automatically added and will apply in addition to the amount entered here', $listItem->amount_autoadded) }}@endif</span></label>
 				<input type="number" class="form-control" id="amount" name="amount" value="@if($mode == 'edit'){{ $listItem->amount }}@else{{1}}@endif" min="0" required>
-			<div class="help-block with-errors"></div>
+				<div class="invalid-feedback"></div>
 			</div>
 
 			<div class="form-group">
@@ -42,12 +43,13 @@
 				<textarea class="form-control" rows="2" id="note" name="note">@if($mode == 'edit'){{ $listItem->note }}@endif</textarea>
 			</div>
 
-		<button id="save-shoppinglist-button" type="submit" class="btn btn-default">{{ $L('Save') }}</button>
+			<button id="save-shoppinglist-button" type="submit" class="btn btn-success">{{ $L('Save') }}</button>
 
 		</form>
-</div>
+	</div>
 
-<div class="col-lg-4 col-xs-12">
+	<div class="col-lg-4 col-xs-12">
 		@include('components.productcard')
+	</div>
 </div>
 @stop

views/stockoverview.blade.php

@@ -11,7 +11,7 @@
 @section('content')
 <div class="row">
 	<div class="col">
-		<h1>{{ $L('Stock overview') }} <small class="text-muted">{{ $L('#1 products with #2 units in stock', count($currentStock), SumArrayValue($currentStock, 'amount')) }}</small></h1>
+		<h1>@yield('title') <small class="text-muted">{{ $L('#1 products with #2 units in stock', count($currentStock), SumArrayValue($currentStock, 'amount')) }}</small></h1>
 		<p class="btn btn-lg btn-warning no-real-button responsive-button mr-2">{{ $L('#1 products expiring within the next #2 days', $countExpiringNextXDays, $nextXDays) }}</p>
 		<p class="btn btn-lg btn-danger no-real-button responsive-button mr-2">{{ $L('#1 products are already expired', $countAlreadyExpired) }}</p>
 		<p class="btn btn-lg btn-info no-real-button responsive-button">{{ $L('#1 products are below defined min. stock amount', count($missingProducts)) }}</p>
@@ -34,8 +34,9 @@
 	</div>
 </div>
 
-<div class="row table-responsive">
-	<table id="stock-overview-table" class="col table table-sm table-striped">
+<div class="row">
+	<div class="col">
+		<table id="stock-overview-table" class="table table-sm table-striped dt-responsive">
 			<thead>
 				<tr>
 					<th>#</th>
@@ -47,7 +48,7 @@
 			</thead>
 			<tbody>
 				@foreach($currentStock as $currentStockEntry) 
-			<tr id="product-{{ $currentStockEntry->product_id }}-row" class="@if($currentStockEntry->best_before_date < date('Y-m-d', strtotime('-1 days'))) error-bg @elseif($currentStockEntry->best_before_date < date('Y-m-d', strtotime('+5 days'))) warning-bg @elseif (FindObjectInArrayByPropertyValue($missingProducts, 'id', $currentStockEntry->product_id) !== null) info-bg @endif">
+				<tr id="product-{{ $currentStockEntry->product_id }}-row" class="@if($currentStockEntry->best_before_date < date('Y-m-d', strtotime('-1 days'))) table-danger @elseif($currentStockEntry->best_before_date < date('Y-m-d', strtotime('+5 days'))) table-warning @elseif (FindObjectInArrayByPropertyValue($missingProducts, 'id', $currentStockEntry->product_id) !== null) table-info @endif">
 					<td class="fit-content">
 						<a class="btn btn-success btn-sm product-consume-button" href="#" title="{{ $L('Consume #3 #1 of #2', FindObjectInArrayByPropertyValue($quantityunits, 'id', FindObjectInArrayByPropertyValue($products, 'id', $currentStockEntry->product_id)->qu_id_stock)->name, FindObjectInArrayByPropertyValue($products, 'id', $currentStockEntry->product_id)->name, 1) }}"
 							data-product-id="{{ $currentStockEntry->product_id }}"
@@ -81,5 +82,6 @@
 				@endforeach
 			</tbody>
 		</table>
+	</div>
 </div>
 @stop

yarn.lock

@@ -2,13 +2,13 @@
 # yarn lockfile v1
 
 
-"@danielfarrell/bootstrap-combobox@^1.1.8":
+"@danielfarrell/bootstrap-combobox@https://github.com/pallidus-fintech/bootstrap-combobox.git#enhance/boostrap_4":
   version "1.1.8"
-  resolved "https://registry.yarnpkg.com/@danielfarrell/bootstrap-combobox/-/bootstrap-combobox-1.1.8.tgz#489d0a9edb5a2fc9c65971d4422294e7ab9320ec"
+  resolved "https://github.com/pallidus-fintech/bootstrap-combobox.git#0bd1da781b99d390f1c75315b6025e7d8658b263"
 
-bootbox@^4.4.0:
-  version "4.4.0"
-  resolved "https://registry.yarnpkg.com/bootbox/-/bootbox-4.4.0.tgz#ff7f898fb87d4527e547feb64158f88450d1a0c9"
+"bootbox@https://github.com/makeusabrew/bootbox.git#v5.x":
+  version "5.0.0"
+  resolved "https://github.com/makeusabrew/bootbox.git#8d843602d6ba7a2367829e01feee399d5f0a3a07"
 
 bootstrap-datepicker@^1.8.0:
   version "1.8.0"
@@ -24,14 +24,49 @@ bootstrap-validator@^0.11.9:
   version "0.11.9"
   resolved "https://registry.yarnpkg.com/bootstrap-validator/-/bootstrap-validator-0.11.9.tgz#fb7058eef53623e78f5aa7967026f98f875a9404"
 
-bootstrap@^3.3:
-  version "3.3.7"
-  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-3.3.7.tgz#5a389394549f23330875a3b150656574f8a9eb71"
+bootstrap@4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.0.0.tgz#ceb03842c145fcc1b9b4e15da2a05656ba68469a"
 
 bootstrap@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.1.1.tgz#3aec85000fa619085da8d2e4983dfd67cf2114cb"
 
+chart.js@2.7.1:
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-2.7.1.tgz#ae90b4aa4ff1f02decd6b1a2a8dabfd73c9f9886"
+  dependencies:
+    chartjs-color "~2.2.0"
+    moment "~2.18.0"
+
+chartjs-color-string@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/chartjs-color-string/-/chartjs-color-string-0.5.0.tgz#8d3752d8581d86687c35bfe2cb80ac5213ceb8c1"
+  dependencies:
+    color-name "^1.0.0"
+
+chartjs-color@~2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/chartjs-color/-/chartjs-color-2.2.0.tgz#84a2fb755787ed85c39dd6dd8c7b1d88429baeae"
+  dependencies:
+    chartjs-color-string "^0.5.0"
+    color-convert "^0.5.3"
+
+color-convert@^0.5.3:
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-0.5.3.tgz#bdb6c69ce660fadffe0b0007cc447e1b9f7282bd"
+
+color-name@^1.0.0:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
+
+datatables.net-bs4@1.10.16:
+  version "1.10.16"
+  resolved "https://registry.yarnpkg.com/datatables.net-bs4/-/datatables.net-bs4-1.10.16.tgz#9eee67cfa8565bd3807a603a188305f7d0e20e32"
+  dependencies:
+    datatables.net "1.10.16"
+    jquery ">=1.7"
+
 datatables.net-bs4@^1.10.15, datatables.net-bs4@^1.10.19:
   version "1.10.19"
   resolved "https://registry.yarnpkg.com/datatables.net-bs4/-/datatables.net-bs4-1.10.19.tgz#0608dff22008cf3c7b8a68b1bc702ed255b404fb"
@@ -54,22 +89,19 @@ datatables.net-responsive@2.2.3, datatables.net-responsive@^2.2.3:
     datatables.net "^1.10.15"
     jquery ">=1.7"
 
+datatables.net@1.10.16:
+  version "1.10.16"
+  resolved "https://registry.yarnpkg.com/datatables.net/-/datatables.net-1.10.16.tgz#4b052d1082824261b68eed9d22741b711d3d2469"
+  dependencies:
+    jquery ">=1.7"
+
 datatables.net@1.10.19, datatables.net@^1.10.15, datatables.net@^1.10.19:
   version "1.10.19"
   resolved "https://registry.yarnpkg.com/datatables.net/-/datatables.net-1.10.19.tgz#97a1ed41c85e62d61040603481b59790a172dd1f"
   dependencies:
     jquery ">=1.7"
 
-eonasdan-bootstrap-datetimepicker@^4.17.47:
-  version "4.17.47"
-  resolved "https://registry.yarnpkg.com/eonasdan-bootstrap-datetimepicker/-/eonasdan-bootstrap-datetimepicker-4.17.47.tgz#7a49970044065276e7965efd16f822735219e735"
-  dependencies:
-    bootstrap "^3.3"
-    jquery "^1.8.3 || ^2.0 || ^3.0"
-    moment "^2.10"
-    moment-timezone "^0.4.0"
-
-font-awesome@^4.7.0:
+font-awesome@4.7.0, font-awesome@^4.7.0:
   version "4.7.0"
   resolved "https://registry.yarnpkg.com/font-awesome/-/font-awesome-4.7.0.tgz#8fa8cf0411a1a31afd07b06d2902bb9fc815a133"
 
@@ -81,24 +113,47 @@ jquery-ui-dist@^1.12.1:
   version "1.12.1"
   resolved "https://registry.yarnpkg.com/jquery-ui-dist/-/jquery-ui-dist-1.12.1.tgz#5c0815d3cc6f90ff5faaf5b268a6e23b4ca904fa"
 
+jquery.easing@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/jquery.easing/-/jquery.easing-1.4.1.tgz#47982c5836bd758fd48494923c4a101ef6e93e3b"
+
 jquery@1:
   version "1.12.4"
   resolved "https://registry.yarnpkg.com/jquery/-/jquery-1.12.4.tgz#01e1dfba290fe73deba77ceeacb0f9ba2fec9e0c"
 
-jquery@>=1.12.0, jquery@>=1.2.3, jquery@>=1.7, "jquery@>=1.7.1 <4.0.0", "jquery@^1.8.3 || ^2.0 || ^3.0":
+jquery@3.3.1, jquery@>=1.12.0, jquery@>=1.2.3, jquery@>=1.7, "jquery@>=1.7.1 <4.0.0", jquery@^3.0, jquery@^3.3.1:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.3.1.tgz#958ce29e81c9790f31be7792df5d4d95fc57fbca"
 
-moment-timezone@^0.4.0:
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/moment-timezone/-/moment-timezone-0.4.1.tgz#81f598c3ad5e22cdad796b67ecd8d88d0f5baa06"
+moment-timezone@^0.5.11:
+  version "0.5.21"
+  resolved "https://registry.yarnpkg.com/moment-timezone/-/moment-timezone-0.5.21.tgz#3cba247d84492174dbf71de2a9848fa13207b845"
   dependencies:
-    moment ">= 2.6.0"
+    moment ">= 2.9.0"
 
-"moment@>= 2.6.0", moment@^2.10, moment@^2.18.1:
+"moment@>= 2.9.0", moment@^2.18.1, moment@^2.22.2:
   version "2.22.2"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.22.2.tgz#3c257f9839fc0e93ff53149632239eb90783ff66"
 
+moment@~2.18.0:
+  version "2.18.1"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.18.1.tgz#c36193dd3ce1c2eed2adb7c802dbbc77a81b1c0f"
+
+popper.js@^1.12.9:
+  version "1.14.3"
+  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.14.3.tgz#1438f98d046acf7b4d78cd502bf418ac64d4f095"
+
+startbootstrap-sb-admin@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/startbootstrap-sb-admin/-/startbootstrap-sb-admin-4.0.0.tgz#cf141a260d031b36bdc013c68200a1c1ea6c9881"
+  dependencies:
+    bootstrap "4.0.0"
+    chart.js "2.7.1"
+    datatables.net-bs4 "1.10.16"
+    font-awesome "4.7.0"
+    jquery "3.3.1"
+    jquery.easing "^1.4.1"
+
 swagger-ui-dist@^3.13.4:
   version "3.17.3"
   resolved "https://registry.yarnpkg.com/swagger-ui-dist/-/swagger-ui-dist-3.17.3.tgz#dfb96408ccc46775155f7369190c5d4b2016fe5c"
@@ -109,6 +164,16 @@ swagger-ui-dist@^3.13.4:
   dependencies:
     jquery "1"
 
+tempusdominus-bootstrap-4@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/tempusdominus-bootstrap-4/-/tempusdominus-bootstrap-4-5.0.1.tgz#713d5d1547caf7784e510e480e32997ccbe7e511"
+  dependencies:
+    bootstrap "4.0.0"
+    jquery "^3.0"
+    moment "^2.22.2"
+    moment-timezone "^0.5.11"
+    popper.js "^1.12.9"
+
 timeago@^1.6.1:
   version "1.6.3"
   resolved "https://registry.yarnpkg.com/timeago/-/timeago-1.6.3.tgz#162a1adae99356297df59339837d09f1b0f36465"