Norwegian localization (#16 )

* Create no.php * Update no.php
Describe new API function
2025-09-16 17:56:51 +00:00 · 2018-07-15 21:46:16 +02:00 · 2018-07-15 13:57:27 +02:00 · 2018-07-15 13:39:48 +02:00 · 2018-07-15 13:35:54 +02:00 · 2018-07-15 13:33:59 +02:00
111 changed files with 4201 additions and 1987 deletions
--- a/.bowerrc
+++ b/.bowerrc
@@ -1,3 +0,0 @@
-{
-	"directory": "public/bower_components"
-}
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,3 @@
-/public/bower_components
+/public/node_modules
 /vendor
 /.release
--- a/.yarnrc
+++ b/.yarnrc
@@ -0,0 +1,4 @@
+--modules-folder public/node_modules
+--install.production true
+--install.ignore-scripts true
+--install.ignore-optional true
--- a/README.md
+++ b/README.md
@@ -11,14 +11,22 @@ A household needs to be managed. I did this so far (almost 10 years) with my fir
 For now my main focus is on stock management, ERP your fridge!

 ## How to install
-Just unpack the [latest release](https://github.com/berrnd/grocy/releases/latest) on your PHP (currently only tested with PHP 7.2) enabled webserver (webservers root should point to the `/public` directory), copy `config-dist.php` to `data/config.php`, edit it to your needs, ensure that the `data` directory is writable and you're ready to go.
+Just unpack the [latest release](https://github.com/berrnd/grocy/releases/latest) on your PHP (SQLite extension required, currently only tested with PHP 7.2) enabled webserver (webservers root should point to the `/public` directory), copy `config-dist.php` to `data/config.php`, edit it to your needs, ensure that the `data` directory is writable and you're ready to go.

-Default login is user `admin` with password `admin` - see the `data/config.php` file. Alternatively clone this repository and install Composer and Bower dependencies manually.
+Default login is user `admin` with password `admin` - see the `data/config.php` file. Alternatively clone this repository and install Composer and Yarn dependencies manually.

 If you use nginx as your webserver, please include `try_files $uri /index.php;` in your location block.

+If, however, your webserver does not support URL rewriting, set `DISABLE_URL_REWRITING` in `data/config.php` (`Setting('DISABLE_URL_REWRITING', true);`).
+
 ## How to update
-Just overwrite everything with the latest release while keeping the `/data` directory, check `config-dist.php` for new configuration options and add them to your `data/config.php` (it will show up as an error if something is missing there).
+Just overwrite everything with the latest release while keeping the `/data` directory, check `config-dist.php` for new configuration options and add them to your `data/config.php` (the default from values `config-dist.php` will be used for not in `data/config.php` defined settings).
+
+## Localization
+grocy is fully localizable - the default language is English (integrated into code), a German localization is always maintained by me. There is one file per language in the `localization` directory, if you want to create a translation, it's best to copy `localization/de.php` to a new one (e. g. `localization/it.php`) and translating all strings there. (Language can be changed in `data/config.php`, e. g. `Setting('CULTURE', 'it');`)
+
+### Maintaining your own localization
+As the German translation will always be the most complete one, for maintaining your localization it would be easiest when you compare your localization with the German one with a diff tool of your choice.

 ## Things worth to know

@@ -54,8 +62,9 @@ Database schema migration is automatically done when visiting the root (`/`) rou
 ### Demo mode
 When the file `data/demo.txt` exists, the application will work in a demo mode which means authentication is disabled and some demo data will be generated during the database schema migration.

-### Other things
-When the file `data/add_before_end_body.html` exists, the contents of the file be added just before `</body>` on every page, useful for your own JS/CSS without to have to modify the application itself.
+### Adding your own CSS or JS without to have to modify the application itself
+- When the file `data/custom_js.html` exists, the contents of the file will be added just before `</body>` (end of body) on every page
+- When the file `data/custom_css.html` exists, the contents of the file will be added just before `</head>` (end of head) on every page

 ## Screenshots
 #### Dashboard
--- a/app.php
+++ b/app.php
@@ -8,6 +8,7 @@ use \Grocy\Controllers\LoginController;

 require_once __DIR__ . '/vendor/autoload.php';
 require_once __DIR__ . '/data/config.php';
+require_once __DIR__ . '/config-dist.php'; //For not in own config defined values we use the default ones

 // Setup base application
 $appContainer = new \Slim\Container([
--- a/bower.json
+++ b/bower.json
@@ -1,25 +0,0 @@
-{
-	"name": "grocy",
-	"private": true,
-	"dependencies": {
-		"bootstrap": "^3.3.7",
-		"font-awesome": "^4.7.0",
-		"bootbox": "^4.4.0",
-		"jquery.serializeJSON": "^2.8.1",
-		"bootstrap-validator": "^0.11.9",
-		"bootstrap-datepicker": "^1.7.1",
-		"moment": "^2.18.1",
-		"bootstrap-combobox": "^1.1.8",
-		"datatables.net": "^1.10.15",
-		"datatables.net-bs": "^2.1.1",
-		"datatables.net-responsive": "^2.1.1",
-		"datatables.net-responsive-bs": "^2.1.1",
-		"jquery-timeago": "^1.6.1",
-		"toastr": "^2.1.3",
-		"tagmanager": "^3.0.2",
-		"eonasdan-bootstrap-datetimepicker": "^4.17.47",
-		"swagger-ui": "^3.13.4",
-		"jquery-ui": "^1.12.1",
-		"bootstrap-side-navbar": "^1.0.1"
-	}
-}
--- a/build.bat
+++ b/build.bat
@@ -4,10 +4,10 @@ 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!bower.json -xr!publication_assets
+"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
 "build_tools\7za.exe" a "%releasePath%\grocy_%version%.zip" "%projectPath%\public\.htaccess"
 "build_tools\7za.exe" rn "%releasePath%\grocy_%version%.zip" .htaccess public\.htaccess
 "build_tools\7za.exe" d "%releasePath%\grocy_%version%.zip" data\*.* data\sessions data\viewcache\*
--- a/build_tools/jq.exe
+++ b/build_tools/jq.exe
--- a/composer.lock
+++ b/composer.lock
@@ -4,7 +4,7 @@
        "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#composer-lock-the-lock-file",
        "This file is @generated automatically"
    ],
-    "content-hash": "42031c0b205b7ce7efb4b6eb95a0096a",
+    "content-hash": "131ab83ecb1ea3d1a431cc70b5092448",
    "packages": [
        {
            "name": "container-interop/container-interop",
@@ -158,16 +158,16 @@
        },
        {
            "name": "illuminate/container",
-            "version": "v5.6.17",
+            "version": "v5.6.27",
            "source": {
                "type": "git",
                "url": "https://github.com/illuminate/container.git",
-                "reference": "4a42d667a05ec6d31f05b532cdac7e8e68e5ea2a"
+                "reference": "1f0757cae8749400aeda730f6438a081fc3c082d"
            },
            "dist": {
                "type": "zip",
-                "url": "https://api.github.com/repos/illuminate/container/zipball/4a42d667a05ec6d31f05b532cdac7e8e68e5ea2a",
-                "reference": "4a42d667a05ec6d31f05b532cdac7e8e68e5ea2a",
+                "url": "https://api.github.com/repos/illuminate/container/zipball/1f0757cae8749400aeda730f6438a081fc3c082d",
+                "reference": "1f0757cae8749400aeda730f6438a081fc3c082d",
                "shasum": ""
            },
            "require": {
@@ -198,20 +198,20 @@
            ],
            "description": "The Illuminate Container package.",
            "homepage": "https://laravel.com",
-            "time": "2018-01-21T02:13:38+00:00"
+            "time": "2018-05-24T13:16:56+00:00"
        },
        {
            "name": "illuminate/contracts",
-            "version": "v5.6.17",
+            "version": "v5.6.27",
            "source": {
                "type": "git",
                "url": "https://github.com/illuminate/contracts.git",
-                "reference": "322ec80498b3bf85bc4025d028e130a9b50242b9"
+                "reference": "3dc639feabe0f302f574157a782ede323881a944"
            },
            "dist": {
                "type": "zip",
-                "url": "https://api.github.com/repos/illuminate/contracts/zipball/322ec80498b3bf85bc4025d028e130a9b50242b9",
-                "reference": "322ec80498b3bf85bc4025d028e130a9b50242b9",
+                "url": "https://api.github.com/repos/illuminate/contracts/zipball/3dc639feabe0f302f574157a782ede323881a944",
+                "reference": "3dc639feabe0f302f574157a782ede323881a944",
                "shasum": ""
            },
            "require": {
@@ -242,11 +242,11 @@
            ],
            "description": "The Illuminate Contracts package.",
            "homepage": "https://laravel.com",
-            "time": "2018-04-07T17:05:26+00:00"
+            "time": "2018-05-11T23:38:58+00:00"
        },
        {
            "name": "illuminate/events",
-            "version": "v5.6.17",
+            "version": "v5.6.27",
            "source": {
                "type": "git",
                "url": "https://github.com/illuminate/events.git",
@@ -291,16 +291,16 @@
        },
        {
            "name": "illuminate/filesystem",
-            "version": "v5.6.17",
+            "version": "v5.6.27",
            "source": {
                "type": "git",
                "url": "https://github.com/illuminate/filesystem.git",
-                "reference": "c9ab9376076cedd88a374d7281d62b619634d578"
+                "reference": "2677365f61c66fad13ff12a37cd4fa8aaeb048d2"
            },
            "dist": {
                "type": "zip",
-                "url": "https://api.github.com/repos/illuminate/filesystem/zipball/c9ab9376076cedd88a374d7281d62b619634d578",
-                "reference": "c9ab9376076cedd88a374d7281d62b619634d578",
+                "url": "https://api.github.com/repos/illuminate/filesystem/zipball/2677365f61c66fad13ff12a37cd4fa8aaeb048d2",
+                "reference": "2677365f61c66fad13ff12a37cd4fa8aaeb048d2",
                "shasum": ""
            },
            "require": {
@@ -339,20 +339,20 @@
            ],
            "description": "The Illuminate Filesystem package.",
            "homepage": "https://laravel.com",
-            "time": "2018-04-06T13:15:37+00:00"
+            "time": "2018-07-07T14:54:27+00:00"
        },
        {
            "name": "illuminate/support",
-            "version": "v5.6.17",
+            "version": "v5.6.27",
            "source": {
                "type": "git",
                "url": "https://github.com/illuminate/support.git",
-                "reference": "cc8d6f5cef3a901de6bb7d1b362102a6db001085"
+                "reference": "97ca44c95392ce0a41749fa47b953734d88b94b1"
            },
            "dist": {
                "type": "zip",
-                "url": "https://api.github.com/repos/illuminate/support/zipball/cc8d6f5cef3a901de6bb7d1b362102a6db001085",
-                "reference": "cc8d6f5cef3a901de6bb7d1b362102a6db001085",
+                "url": "https://api.github.com/repos/illuminate/support/zipball/97ca44c95392ce0a41749fa47b953734d88b94b1",
+                "reference": "97ca44c95392ce0a41749fa47b953734d88b94b1",
                "shasum": ""
            },
            "require": {
@@ -367,6 +367,7 @@
            },
            "suggest": {
                "illuminate/filesystem": "Required to use the composer class (5.6.*).",
+                "ramsey/uuid": "Required to use Str::uuid() (^3.7).",
                "symfony/process": "Required to use the composer class (~4.0).",
                "symfony/var-dumper": "Required to use the dd function (~4.0)."
            },
@@ -396,20 +397,20 @@
            ],
            "description": "The Illuminate Support package.",
            "homepage": "https://laravel.com",
-            "time": "2018-04-17T12:26:47+00:00"
+            "time": "2018-07-04T01:23:57+00:00"
        },
        {
            "name": "illuminate/view",
-            "version": "v5.6.17",
+            "version": "v5.6.27",
            "source": {
                "type": "git",
                "url": "https://github.com/illuminate/view.git",
-                "reference": "54eaf45ee7946d8f8cde13d5e89c5ea2e997040d"
+                "reference": "625c35e8942f0ecd467acb8db8daf8449390d559"
            },
            "dist": {
                "type": "zip",
-                "url": "https://api.github.com/repos/illuminate/view/zipball/54eaf45ee7946d8f8cde13d5e89c5ea2e997040d",
-                "reference": "54eaf45ee7946d8f8cde13d5e89c5ea2e997040d",
+                "url": "https://api.github.com/repos/illuminate/view/zipball/625c35e8942f0ecd467acb8db8daf8449390d559",
+                "reference": "625c35e8942f0ecd467acb8db8daf8449390d559",
                "shasum": ""
            },
            "require": {
@@ -444,7 +445,7 @@
            ],
            "description": "The Illuminate View package.",
            "homepage": "https://laravel.com",
-            "time": "2018-04-03T12:56:35+00:00"
+            "time": "2018-07-06T14:55:12+00:00"
        },
        {
            "name": "morris/lessql",
@@ -496,16 +497,16 @@
        },
        {
            "name": "neomerx/cors-psr7",
-            "version": "v1.0.12",
+            "version": "v1.0.13",
            "source": {
                "type": "git",
                "url": "https://github.com/neomerx/cors-psr7.git",
-                "reference": "24944f39483d1a89f66ae9d58cca9f82b8815b35"
+                "reference": "2556e2013f16a55532c95928455257d5b6bbc6e2"
            },
            "dist": {
                "type": "zip",
-                "url": "https://api.github.com/repos/neomerx/cors-psr7/zipball/24944f39483d1a89f66ae9d58cca9f82b8815b35",
-                "reference": "24944f39483d1a89f66ae9d58cca9f82b8815b35",
+                "url": "https://api.github.com/repos/neomerx/cors-psr7/zipball/2556e2013f16a55532c95928455257d5b6bbc6e2",
+                "reference": "2556e2013f16a55532c95928455257d5b6bbc6e2",
                "shasum": ""
            },
            "require": {
@@ -514,7 +515,7 @@
                "psr/log": "^1.0"
            },
            "require-dev": {
-                "mockery/mockery": "^0.9.9",
+                "mockery/mockery": "^1.0",
                "phpunit/phpunit": "^5.7",
                "scrutinizer/ocular": "^1.1",
                "squizlabs/php_codesniffer": "^3.0"
@@ -547,20 +548,20 @@
                "w3.org",
                "www.w3.org"
            ],
-            "time": "2017-09-03T22:31:57+00:00"
+            "time": "2018-05-23T16:10:11+00:00"
        },
        {
            "name": "nesbot/carbon",
-            "version": "1.26.4",
+            "version": "1.32.0",
            "source": {
                "type": "git",
                "url": "https://github.com/briannesbitt/Carbon.git",
-                "reference": "e3d9014279133a3cccc01f6a691322a2d5a6a87b"
+                "reference": "64563e2b9f69e4db1b82a60e81efa327a30ff343"
            },
            "dist": {
                "type": "zip",
-                "url": "https://api.github.com/repos/briannesbitt/Carbon/zipball/e3d9014279133a3cccc01f6a691322a2d5a6a87b",
-                "reference": "e3d9014279133a3cccc01f6a691322a2d5a6a87b",
+                "url": "https://api.github.com/repos/briannesbitt/Carbon/zipball/64563e2b9f69e4db1b82a60e81efa327a30ff343",
+                "reference": "64563e2b9f69e4db1b82a60e81efa327a30ff343",
                "shasum": ""
            },
            "require": {
@@ -572,6 +573,13 @@
                "phpunit/phpunit": "^4.8.35 || ^5.7"
            },
            "type": "library",
+            "extra": {
+                "laravel": {
+                    "providers": [
+                        "Carbon\\Laravel\\ServiceProvider"
+                    ]
+                }
+            },
            "autoload": {
                "psr-4": {
                    "": "src/"
@@ -595,7 +603,7 @@
                "datetime",
                "time"
            ],
-            "time": "2018-04-17T15:35:42+00:00"
+            "time": "2018-07-05T06:59:26+00:00"
        },
        {
            "name": "nikic/fast-route",
@@ -1206,16 +1214,16 @@
        },
        {
            "name": "symfony/debug",
-            "version": "v4.0.8",
+            "version": "v4.1.1",
            "source": {
                "type": "git",
                "url": "https://github.com/symfony/debug.git",
-                "reference": "5961d02d48828671f5d8a7805e06579d692f6ede"
+                "reference": "dbe0fad88046a755dcf9379f2964c61a02f5ae3d"
            },
            "dist": {
                "type": "zip",
-                "url": "https://api.github.com/repos/symfony/debug/zipball/5961d02d48828671f5d8a7805e06579d692f6ede",
-                "reference": "5961d02d48828671f5d8a7805e06579d692f6ede",
+                "url": "https://api.github.com/repos/symfony/debug/zipball/dbe0fad88046a755dcf9379f2964c61a02f5ae3d",
+                "reference": "dbe0fad88046a755dcf9379f2964c61a02f5ae3d",
                "shasum": ""
            },
            "require": {
@@ -1231,7 +1239,7 @@
            "type": "library",
            "extra": {
                "branch-alias": {
-                    "dev-master": "4.0-dev"
+                    "dev-master": "4.1-dev"
                }
            },
            "autoload": {
@@ -1258,20 +1266,20 @@
            ],
            "description": "Symfony Debug Component",
            "homepage": "https://symfony.com",
-            "time": "2018-04-03T05:24:00+00:00"
+            "time": "2018-06-08T09:39:36+00:00"
        },
        {
            "name": "symfony/finder",
-            "version": "v4.0.8",
+            "version": "v4.1.1",
            "source": {
                "type": "git",
                "url": "https://github.com/symfony/finder.git",
-                "reference": "ca27c02b7a3fef4828c998c2ff9ba7aae1641c49"
+                "reference": "84714b8417d19e4ba02ea78a41a975b3efaafddb"
            },
            "dist": {
                "type": "zip",
-                "url": "https://api.github.com/repos/symfony/finder/zipball/ca27c02b7a3fef4828c998c2ff9ba7aae1641c49",
-                "reference": "ca27c02b7a3fef4828c998c2ff9ba7aae1641c49",
+                "url": "https://api.github.com/repos/symfony/finder/zipball/84714b8417d19e4ba02ea78a41a975b3efaafddb",
+                "reference": "84714b8417d19e4ba02ea78a41a975b3efaafddb",
                "shasum": ""
            },
            "require": {
@@ -1280,7 +1288,7 @@
            "type": "library",
            "extra": {
                "branch-alias": {
-                    "dev-master": "4.0-dev"
+                    "dev-master": "4.1-dev"
                }
            },
            "autoload": {
@@ -1307,20 +1315,20 @@
            ],
            "description": "Symfony Finder Component",
            "homepage": "https://symfony.com",
-            "time": "2018-04-04T05:10:37+00:00"
+            "time": "2018-06-19T21:38:16+00:00"
        },
        {
            "name": "symfony/polyfill-mbstring",
-            "version": "v1.7.0",
+            "version": "v1.8.0",
            "source": {
                "type": "git",
                "url": "https://github.com/symfony/polyfill-mbstring.git",
-                "reference": "78be803ce01e55d3491c1397cf1c64beb9c1b63b"
+                "reference": "3296adf6a6454a050679cde90f95350ad604b171"
            },
            "dist": {
                "type": "zip",
-                "url": "https://api.github.com/repos/symfony/polyfill-mbstring/zipball/78be803ce01e55d3491c1397cf1c64beb9c1b63b",
-                "reference": "78be803ce01e55d3491c1397cf1c64beb9c1b63b",
+                "url": "https://api.github.com/repos/symfony/polyfill-mbstring/zipball/3296adf6a6454a050679cde90f95350ad604b171",
+                "reference": "3296adf6a6454a050679cde90f95350ad604b171",
                "shasum": ""
            },
            "require": {
@@ -1332,7 +1340,7 @@
            "type": "library",
            "extra": {
                "branch-alias": {
-                    "dev-master": "1.7-dev"
+                    "dev-master": "1.8-dev"
                }
            },
            "autoload": {
@@ -1366,20 +1374,20 @@
                "portable",
                "shim"
            ],
-            "time": "2018-01-30T19:27:44+00:00"
+            "time": "2018-04-26T10:06:28+00:00"
        },
        {
            "name": "symfony/translation",
-            "version": "v4.0.8",
+            "version": "v4.1.1",
            "source": {
                "type": "git",
                "url": "https://github.com/symfony/translation.git",
-                "reference": "e20a9b7f9f62cb33a11638b345c248e7d510c938"
+                "reference": "b6d8164085ee0b6debcd1b7a131fd6f63bb04854"
            },
            "dist": {
                "type": "zip",
-                "url": "https://api.github.com/repos/symfony/translation/zipball/e20a9b7f9f62cb33a11638b345c248e7d510c938",
-                "reference": "e20a9b7f9f62cb33a11638b345c248e7d510c938",
+                "url": "https://api.github.com/repos/symfony/translation/zipball/b6d8164085ee0b6debcd1b7a131fd6f63bb04854",
+                "reference": "b6d8164085ee0b6debcd1b7a131fd6f63bb04854",
                "shasum": ""
            },
            "require": {
@@ -1394,20 +1402,21 @@
            "require-dev": {
                "psr/log": "~1.0",
                "symfony/config": "~3.4|~4.0",
+                "symfony/console": "~3.4|~4.0",
                "symfony/dependency-injection": "~3.4|~4.0",
                "symfony/finder": "~2.8|~3.0|~4.0",
                "symfony/intl": "~3.4|~4.0",
                "symfony/yaml": "~3.4|~4.0"
            },
            "suggest": {
-                "psr/log": "To use logging capability in translator",
+                "psr/log-implementation": "To use logging capability in translator",
                "symfony/config": "",
                "symfony/yaml": ""
            },
            "type": "library",
            "extra": {
                "branch-alias": {
-                    "dev-master": "4.0-dev"
+                    "dev-master": "4.1-dev"
                }
            },
            "autoload": {
@@ -1434,7 +1443,7 @@
            ],
            "description": "Symfony Translation Component",
            "homepage": "https://symfony.com",
-            "time": "2018-02-22T10:50:29+00:00"
+            "time": "2018-06-22T08:59:39+00:00"
        },
        {
            "name": "tuupola/callable-handler",
@@ -1604,7 +1613,7 @@
    "prefer-stable": false,
    "prefer-lowest": false,
    "platform": {
-        "php": ">=7.0"
+        "php": ">=7.2"
    },
    "platform-dev": []
 }
--- a/config-dist.php
+++ b/config-dist.php
@@ -1,22 +1,26 @@
 <?php

 # Login credentials
-define('HTTP_USER', 'admin');
-define('HTTP_PASSWORD', 'admin');
+Setting('HTTP_USER', 'admin');
+Setting('HTTP_PASSWORD', 'admin');

 # Either "production" or "dev"
-define('MODE', 'production');
+Setting('MODE', 'production');

 # Either "en" or "de" or the filename (without extension) of
 # one of the other available localization files in the "/localization" directory
-define('CULTURE', 'en');
+Setting('CULTURE', 'en');

 # The base url of your installation,
 # should be just "/" when running directly under the root of a (sub)domain
 # or for example "https:/example.com/grocy" when using a subdirectory
-define('BASE_URL', '/');
+Setting('BASE_URL', '/');

 # The plugin to use for external barcode lookups,
 # must be the filename without .php extension and must be located in /data/plugins,
 # see /data/plugins/DemoBarcodeLookupPlugin.php for an example implementation
-define('STOCK_BARCODE_LOOKUP_PLUGIN', 'DemoBarcodeLookupPlugin');
+Setting('STOCK_BARCODE_LOOKUP_PLUGIN', 'DemoBarcodeLookupPlugin');
+
+# If, however, your webserver does not support URL rewriting,
+# set this to true
+Setting('DISABLE_URL_REWRITING', false);
--- a/controllers/BaseController.php
+++ b/controllers/BaseController.php
@@ -12,20 +12,22 @@ class BaseController
 		$databaseService = new DatabaseService();
 		$this->Database = $databaseService->GetDbConnection();
 		
+		$localizationService = new LocalizationService(CULTURE);
+		$this->LocalizationService = $localizationService;
+
 		$applicationService = new ApplicationService();
 		$versionInfo = $applicationService->GetInstalledVersion();
 		$container->view->set('version', $versionInfo->Version);
 		$container->view->set('releaseDate', $versionInfo->ReleaseDate);

-		$localizationService = new LocalizationService(CULTURE);
 		$container->view->set('localizationStrings', $localizationService->GetCurrentCultureLocalizations());
 		$container->view->set('L', function($text, ...$placeholderValues) use($localizationService)
 		{
 			return $localizationService->Localize($text, ...$placeholderValues);
 		});
-		$container->view->set('U', function($relativePath) use($container)
+		$container->view->set('U', function($relativePath, $isResource = false) use($container)
 		{
-			return $container->UrlManager->ConstructUrl($relativePath);
+			return $container->UrlManager->ConstructUrl($relativePath, $isResource);
 		});

 		$this->AppContainer = $container;
@@ -33,4 +35,5 @@ class BaseController

 	protected $AppContainer;
 	protected $Database;
+	protected $LocalizationService;
 }
--- a/controllers/BatteriesApiController.php
+++ b/controllers/BatteriesApiController.php
@@ -17,7 +17,7 @@ class BatteriesApiController extends BaseApiController
 	public function TrackChargeCycle(\Slim\Http\Request $request, \Slim\Http\Response $response, array $args)
 	{
 		$trackedTime = date('Y-m-d H:i:s');
-		if (isset($request->getQueryParams()['tracked_time']) && !empty($request->getQueryParams()['tracked_time']))
+		if (isset($request->getQueryParams()['tracked_time']) && !empty($request->getQueryParams()['tracked_time']) && IsIsoDateTime($request->getQueryParams()['tracked_time']))
 		{
 			$trackedTime = $request->getQueryParams()['tracked_time'];
 		}
--- a/controllers/BatteriesController.php
+++ b/controllers/BatteriesController.php
@@ -26,7 +26,7 @@ class BatteriesController extends BaseController
 		$countDueNextXDays = count(FindAllItemsInArrayByValue($nextChargeTimes, date('Y-m-d', strtotime("+$nextXDays days")), '<'));
 		$countOverdue = count(FindAllItemsInArrayByValue($nextChargeTimes, date('Y-m-d', strtotime('-1 days')), '<'));
 		return $this->AppContainer->view->render($response, 'batteriesoverview', [
-			'batteries' => $this->Database->batteries(),
+			'batteries' => $this->Database->batteries()->orderBy('name'),
 			'current' => $this->BatteriesService->GetCurrent(),
 			'nextChargeTimes' => $nextChargeTimes,
 			'nextXDays' => $nextXDays,
@@ -38,14 +38,14 @@ class BatteriesController extends BaseController
 	public function TrackChargeCycle(\Slim\Http\Request $request, \Slim\Http\Response $response, array $args)
 	{
 		return $this->AppContainer->view->render($response, 'batterytracking', [
-			'batteries' =>  $this->Database->batteries()
+			'batteries' =>  $this->Database->batteries()->orderBy('name')
 		]);
 	}

 	public function BatteriesList(\Slim\Http\Request $request, \Slim\Http\Response $response, array $args)
 	{
 		return $this->AppContainer->view->render($response, 'batteries', [
-			'batteries' => $this->Database->batteries()
+			'batteries' => $this->Database->batteries()->orderBy('name')
 		]);
 	}

--- a/controllers/HabitsApiController.php
+++ b/controllers/HabitsApiController.php
@@ -17,7 +17,7 @@ class HabitsApiController extends BaseApiController
 	public function TrackHabitExecution(\Slim\Http\Request $request, \Slim\Http\Response $response, array $args)
 	{
 		$trackedTime = date('Y-m-d H:i:s');
-		if (isset($request->getQueryParams()['tracked_time']) && !empty($request->getQueryParams()['tracked_time']))
+		if (isset($request->getQueryParams()['tracked_time']) && !empty($request->getQueryParams()['tracked_time']) && IsIsoDateTime($request->getQueryParams()['tracked_time']))
 		{
 			$trackedTime = $request->getQueryParams()['tracked_time'];
 		}
--- a/controllers/HabitsController.php
+++ b/controllers/HabitsController.php
@@ -26,7 +26,7 @@ class HabitsController extends BaseController
 		$countDueNextXDays = count(FindAllItemsInArrayByValue($nextHabitTimes, date('Y-m-d', strtotime("+$nextXDays days")), '<'));
 		$countOverdue = count(FindAllItemsInArrayByValue($nextHabitTimes, date('Y-m-d', strtotime('-1 days')), '<'));
 		return $this->AppContainer->view->render($response, 'habitsoverview', [
-			'habits' => $this->Database->habits(),
+			'habits' => $this->Database->habits()->orderBy('name'),
 			'currentHabits' => $this->HabitsService->GetCurrentHabits(),
 			'nextHabitTimes' => $nextHabitTimes,
 			'nextXDays' => $nextXDays,
@@ -38,14 +38,14 @@ class HabitsController extends BaseController
 	public function TrackHabitExecution(\Slim\Http\Request $request, \Slim\Http\Response $response, array $args)
 	{
 		return $this->AppContainer->view->render($response, 'habittracking', [
-			'habits' => $this->Database->habits()
+			'habits' => $this->Database->habits()->orderBy('name')
 		]);
 	}

 	public function HabitsList(\Slim\Http\Request $request, \Slim\Http\Response $response, array $args)
 	{
 		return $this->AppContainer->view->render($response, 'habits', [
-			'habits' => $this->Database->habits()
+			'habits' => $this->Database->habits()->orderBy('name')
 		]);
 	}

--- a/controllers/OpenApiController.php
+++ b/controllers/OpenApiController.php
@@ -24,7 +24,8 @@ class OpenApiController extends BaseApiController
 	{
 		$applicationService = new ApplicationService();

-		$this->OpenApiSpec->info->version = $applicationService->GetInstalledVersion();
+		$versionInfo = $applicationService->GetInstalledVersion();
+		$this->OpenApiSpec->info->version = $versionInfo->Version;
 		$this->OpenApiSpec->info->description = str_replace('PlaceHolderManageApiKeysUrl', $this->AppContainer->UrlManager->ConstructUrl('/manageapikeys'), $this->OpenApiSpec->info->description);
 		$this->OpenApiSpec->servers[0]->url = $this->AppContainer->UrlManager->ConstructUrl('/api');

--- a/controllers/RecipesApiController.php
+++ b/controllers/RecipesApiController.php
@@ -0,0 +1,22 @@
+<?php
+
+namespace Grocy\Controllers;
+
+use \Grocy\Services\RecipesService;
+
+class RecipesApiController extends BaseApiController
+{
+	public function __construct(\Slim\Container $container)
+	{
+		parent::__construct($container);
+		$this->RecipesService = new RecipesService();
+	}
+
+	protected $RecipesService;
+
+	public function AddNotFulfilledProductsToShoppingList(\Slim\Http\Request $request, \Slim\Http\Response $response, array $args)
+	{
+		$this->RecipesService->AddNotFulfilledProductsToShoppingList($args['recipeId']);
+		return $this->VoidApiActionResponse($response);
+	}
+}
--- a/controllers/RecipesController.php
+++ b/controllers/RecipesController.php
@@ -0,0 +1,93 @@
+<?php
+
+namespace Grocy\Controllers;
+
+use \Grocy\Services\RecipesService;
+
+class RecipesController extends BaseController
+{
+	public function __construct(\Slim\Container $container)
+	{
+		parent::__construct($container);
+		$this->RecipesService = new RecipesService();
+	}
+
+	protected $RecipesService;
+
+	public function Overview(\Slim\Http\Request $request, \Slim\Http\Response $response, array $args)
+	{
+		$recipes = $this->Database->recipes()->orderBy('name');
+
+		$selectedRecipe = null;
+		$selectedRecipePositions = null;
+		if (isset($request->getQueryParams()['recipe']))
+		{
+			$selectedRecipe = $this->Database->recipes($request->getQueryParams()['recipe']);
+			$selectedRecipePositions = $this->Database->recipes_pos()->where('recipe_id', $request->getQueryParams()['recipe']);
+		}
+		else
+		{
+			foreach ($recipes as $recipe)
+			{
+				$selectedRecipe = $recipe;
+				$selectedRecipePositions = $this->Database->recipes_pos()->where('recipe_id', $recipe->id);
+				break;
+			}
+		}
+
+		return $this->AppContainer->view->render($response, 'recipes', [
+			'recipes' => $recipes,
+			'recipesFulfillment' => $this->RecipesService->GetRecipesFulfillment(),
+			'recipesSumFulfillment' => $this->RecipesService->GetRecipesSumFulfillment(),
+			'selectedRecipe' => $selectedRecipe,
+			'selectedRecipePositions' => $selectedRecipePositions,
+			'products' => $this->Database->products(),
+			'quantityunits' => $this->Database->quantity_units()
+		]);
+	}
+
+	public function RecipeEditForm(\Slim\Http\Request $request, \Slim\Http\Response $response, array $args)
+	{
+		$recipeId = $args['recipeId'];
+		if ($recipeId  == 'new')
+		{
+			$newRecipe = $this->Database->recipes()->createRow(array(
+				'name' => $this->LocalizationService->Localize('New recipe')
+			));
+			$newRecipe->save();
+
+			$recipeId = $this->Database->lastInsertId();
+		}
+		
+		return $this->AppContainer->view->render($response, 'recipeform', [
+			'recipe' =>  $this->Database->recipes($recipeId),
+			'recipePositions' =>  $this->Database->recipes_pos()->where('recipe_id', $recipeId),
+			'mode' => 'edit',
+			'products' => $this->Database->products(),
+			'quantityunits' => $this->Database->quantity_units(),
+			'recipesFulfillment' => $this->RecipesService->GetRecipesFulfillment(),
+			'recipesSumFulfillment' => $this->RecipesService->GetRecipesSumFulfillment()
+		]);
+	}
+
+	public function RecipePosEditForm(\Slim\Http\Request $request, \Slim\Http\Response $response, array $args)
+	{
+		if ($args['recipePosId'] == 'new')
+		{
+			return $this->AppContainer->view->render($response, 'recipeposform', [
+				'mode' => 'create',
+				'recipe' =>  $this->Database->recipes($args['recipeId']),
+				'products' =>  $this->Database->products()->orderBy('name')
+			]);
+		}
+		else
+		{
+			return $this->AppContainer->view->render($response, 'recipeposform', [
+				'mode' => 'edit',
+				'recipe' =>  $this->Database->recipes($args['recipeId']),
+				'recipePos' =>  $this->Database->recipes_pos($args['recipePosId']),
+				'products' =>  $this->Database->products()->orderBy('name')
+			]);
+		}
+	}
+}
--- a/controllers/StockApiController.php
+++ b/controllers/StockApiController.php
@@ -29,7 +29,7 @@ class StockApiController extends BaseApiController
 	public function AddProduct(\Slim\Http\Request $request, \Slim\Http\Response $response, array $args)
 	{
 		$bestBeforeDate = date('Y-m-d');
-		if (isset($request->getQueryParams()['bestbeforedate']) && !empty($request->getQueryParams()['bestbeforedate']))
+		if (isset($request->getQueryParams()['bestbeforedate']) && !empty($request->getQueryParams()['bestbeforedate']) && IsIsoDate($request->getQueryParams()['bestbeforedate']))
 		{
 			$bestBeforeDate = $request->getQueryParams()['bestbeforedate'];
 		}
@@ -79,7 +79,7 @@ class StockApiController extends BaseApiController
 	public function InventoryProduct(\Slim\Http\Request $request, \Slim\Http\Response $response, array $args)
 	{
 		$bestBeforeDate = date('Y-m-d');
-		if (isset($request->getQueryParams()['bestbeforedate']) && !empty($request->getQueryParams()['bestbeforedate']))
+		if (isset($request->getQueryParams()['bestbeforedate']) && !empty($request->getQueryParams()['bestbeforedate']) && IsIsoDate($request->getQueryParams()['bestbeforedate']))
 		{
 			$bestBeforeDate = $request->getQueryParams()['bestbeforedate'];
 		}
@@ -106,6 +106,12 @@ class StockApiController extends BaseApiController
 		return $this->VoidApiActionResponse($response);
 	}

+	public function ClearShoppingList(\Slim\Http\Request $request, \Slim\Http\Response $response, array $args)
+	{
+		$this->StockService->ClearShoppingList();
+		return $this->VoidApiActionResponse($response);
+	}
+
 	public function ExternalBarcodeLookup(\Slim\Http\Request $request, \Slim\Http\Response $response, array $args)
 	{
 		try
--- a/controllers/StockController.php
+++ b/controllers/StockController.php
@@ -22,8 +22,9 @@ class StockController extends BaseController
 		$countExpiringNextXDays = count(FindAllObjectsInArrayByPropertyValue($currentStock, 'best_before_date', date('Y-m-d', strtotime('+5 days')), '<'));
 		$countAlreadyExpired = count(FindAllObjectsInArrayByPropertyValue($currentStock, 'best_before_date', date('Y-m-d', strtotime('-1 days')), '<'));
 		return $this->AppContainer->view->render($response, 'stockoverview', [
-			'products' => $this->Database->products(),
-			'quantityunits' => $this->Database->quantity_units(),
+			'products' => $this->Database->products()->orderBy('name'),
+			'quantityunits' => $this->Database->quantity_units()->orderBy('name'),
+			'locations' => $this->Database->locations()->orderBy('name'),
 			'currentStock' => $currentStock,
 			'missingProducts' => $this->StockService->GetMissingProducts(),
 			'nextXDays' => $nextXDays,
@@ -35,21 +36,21 @@ class StockController extends BaseController
 	public function Purchase(\Slim\Http\Request $request, \Slim\Http\Response $response, array $args)
 	{
 		return $this->AppContainer->view->render($response, 'purchase', [
-			'products' => $this->Database->products()
+			'products' => $this->Database->products()->orderBy('name')
 		]);
 	}

 	public function Consume(\Slim\Http\Request $request, \Slim\Http\Response $response, array $args)
 	{
 		return $this->AppContainer->view->render($response, 'consume', [
-			'products' => $this->Database->products()
+			'products' => $this->Database->products()->orderBy('name')
 		]);
 	}

 	public function Inventory(\Slim\Http\Request $request, \Slim\Http\Response $response, array $args)
 	{
 		return $this->AppContainer->view->render($response, 'inventory', [
-			'products' => $this->Database->products()
+			'products' => $this->Database->products()->orderBy('name')
 		]);
 	}

@@ -57,8 +58,8 @@ class StockController extends BaseController
 	{
 		return $this->AppContainer->view->render($response, 'shoppinglist', [
 			'listItems' => $this->Database->shopping_list(),
-			'products' => $this->Database->products(),
-			'quantityunits' => $this->Database->quantity_units(),
+			'products' => $this->Database->products()->orderBy('name'),
+			'quantityunits' => $this->Database->quantity_units()->orderBy('name'),
 			'missingProducts' => $this->StockService->GetMissingProducts()
 		]);
 	}
@@ -66,23 +67,23 @@ class StockController extends BaseController
 	public function ProductsList(\Slim\Http\Request $request, \Slim\Http\Response $response, array $args)
 	{
 		return $this->AppContainer->view->render($response, 'products', [
-			'products' => $this->Database->products(),
-			'locations' => $this->Database->locations(),
-			'quantityunits' => $this->Database->quantity_units()
+			'products' => $this->Database->products()->orderBy('name'),
+			'locations' => $this->Database->locations()->orderBy('name'),
+			'quantityunits' => $this->Database->quantity_units()->orderBy('name')
 		]);
 	}

 	public function LocationsList(\Slim\Http\Request $request, \Slim\Http\Response $response, array $args)
 	{
 		return $this->AppContainer->view->render($response, 'locations', [
-			'locations' => $this->Database->locations()
+			'locations' => $this->Database->locations()->orderBy('name')
 		]);
 	}

 	public function QuantityUnitsList(\Slim\Http\Request $request, \Slim\Http\Response $response, array $args)
 	{
 		return $this->AppContainer->view->render($response, 'quantityunits', [
-			'quantityunits' => $this->Database->quantity_units()
+			'quantityunits' => $this->Database->quantity_units()->orderBy('name')
 		]);
 	}

@@ -91,8 +92,8 @@ class StockController extends BaseController
 		if ($args['productId'] == 'new')
 		{
 			return $this->AppContainer->view->render($response, 'productform', [
-				'locations' =>  $this->Database->locations(),
-				'quantityunits' =>  $this->Database->quantity_units(),
+				'locations' =>  $this->Database->locations()->orderBy('name'),
+				'quantityunits' =>  $this->Database->quantity_units()->orderBy('name'),
 				'mode' => 'create'
 			]);
 		}
@@ -100,8 +101,8 @@ class StockController extends BaseController
 		{
 			return $this->AppContainer->view->render($response, 'productform', [
 				'product' =>  $this->Database->products($args['productId']),
-				'locations' =>  $this->Database->locations(),
-				'quantityunits' =>  $this->Database->quantity_units(),
+				'locations' =>  $this->Database->locations()->orderBy('name'),
+				'quantityunits' =>  $this->Database->quantity_units()->orderBy('name'),
 				'mode' => 'edit'
 			]);
 		}
@@ -146,7 +147,7 @@ class StockController extends BaseController
 		if ($args['itemId'] == 'new')
 		{
 			return $this->AppContainer->view->render($response, 'shoppinglistform', [
-				'products' =>  $this->Database->products(),
+				'products' =>  $this->Database->products()->orderBy('name'),
 				'mode' => 'create'
 			]);
 		}
@@ -154,7 +155,7 @@ class StockController extends BaseController
 		{
 			return $this->AppContainer->view->render($response, 'shoppinglistform', [
 				'listItem' =>  $this->Database->shopping_list($args['itemId']),
-				'products' =>  $this->Database->products(),
+				'products' =>  $this->Database->products()->orderBy('name'),
 				'mode' => 'edit'
 			]);
 		}
--- a/data/plugins/DemoBarcodeLookupPlugin.php
+++ b/data/plugins/DemoBarcodeLookupPlugin.php
@@ -9,7 +9,7 @@ class DemoBarcodeLookupPlugin extends BaseBarcodeLookupPlugin
 {
 	/*
 		To use this plugin, configure it in data/config.php like this:
-		define('STOCK_BARCODE_LOOKUP_PLUGIN', 'DemoBarcodeLookupPlugin');
+		Setting('STOCK_BARCODE_LOOKUP_PLUGIN', 'DemoBarcodeLookupPlugin');
 	*/

 	/*
--- a/grocy.openapi.json
+++ b/grocy.openapi.json
@@ -650,6 +650,26 @@
 				}
 			}
 		},
+		"/stock/clear-shopping-list": {
+			"get": {
+				"description": "Removes all items from the shopping list",
+				"tags": [
+					"Stock"
+				],
+				"responses": {
+					"200": {
+						"description": "A VoidApiActionResponse object",
+						"content": {
+							"application/json": {
+								"schema": {
+									"$ref": "#/components/schemas/VoidApiActionResponse"
+								}
+							}
+						}
+					}
+				}
+			}
+		},
 		"/stock/external-barcode-lookup/{barcode}": {
 			"get": {
 				"description": "Executes an external barcode lookoup via the configured plugin with the given barcode",
@@ -701,6 +721,37 @@
 				}
 			}
 		},
+		"/recipes/add-not-fulfilled-products-to-shopping-list/{recipeId}": {
+			"get": {
+				"description": "Adds all missing products for the given recipe to the shopping list",
+				"tags": [
+					"Recipes"
+				],
+				"parameters": [
+					{
+						"in": "path",
+						"name": "recipeId",
+						"required": true,
+						"description": "A valid recipe id",
+						"schema": {
+							"type": "string"
+						}
+					}
+				],
+				"responses": {
+					"200": {
+						"description": "A VoidApiActionResponse object",
+						"content": {
+							"application/json": {
+								"schema": {
+									"$ref": "#/components/schemas/VoidApiActionResponse"
+								}
+							}
+						}
+					}
+				}
+			}
+		},
 		"/habits/track-habit-execution/{habitId}": {
 			"get": {
 				"description": "Tracks an execution of the given habit",
@@ -894,7 +945,9 @@
 					"batteries",
 					"locations",
 					"quantity_units",
-					"shopping_list"
+					"shopping_list",
+					"recipes",
+					"recipes_pos"
 				]
 			},
 			"StockTransactionType": {
--- a/helpers/UrlManager.php
+++ b/helpers/UrlManager.php
@@ -18,10 +18,17 @@ class UrlManager

 	protected $BasePath;

-	public function ConstructUrl($relativePath)
+	public function ConstructUrl($relativePath, $isResource = false)
+	{
+		if (DISABLE_URL_REWRITING === false || $isResource === true)
 		{
 			return rtrim($this->BasePath, '/') . $relativePath;
 		}
+		else // Is not a resource and URL rewriting is disabled
+		{
+			return rtrim($this->BasePath, '/') . '/index.php' . $relativePath;
+		}
+	}

 	private function GetBaseUrl()
 	{
--- a/helpers/extensions.php
+++ b/helpers/extensions.php
@@ -110,3 +110,28 @@ function IsAssociativeArray(array $array)
 	$keys = array_keys($array);
 	return array_keys($keys) !== $keys;
 }
+
+function IsIsoDate($dateString)
+{
+	$d = DateTime::createFromFormat('Y-m-d', $dateString);
+	return $d && $d->format('Y-m-d') === $dateString;
+}
+
+function IsIsoDateTime($dateTimeString)
+{
+	$d = DateTime::createFromFormat('Y-m-d H:i:s', $dateTimeString);
+	return $d && $d->format('Y-m-d H:i:s') === $dateTimeString;
+}
+
+function BoolToString(bool $bool)
+{
+	return $bool ? 'true' : 'false';
+}
+
+function Setting(string $name, $value)
+{
+	if (!defined($name))
+	{
+		define($name, $value);
+	}
+}
--- a/localization/de.php
+++ b/localization/de.php
@@ -120,11 +120,55 @@ return array(
 	'#1 habits are due to be done within the next #2 days' => '#1 Gewohnheiten stehen in den nächsten #2 Tagen an',
 	'#1 habits are overdue to be done' => '#1 Gewohnheiten sind überfällig',
 	'Released on' => 'Veröffentlicht am',
-	'Consume 1 #1 of #2' => 'Verbrauche 1 #1 #2',
+	'Consume #3 #1 of #2' => 'Verbrauche #3 #1 #2',
 	'Added #1 #2 of #3 to stock' => '#1 #2 #3 dem Bestand hinzugefügt',
 	'Stock amount of #1 is now #2 #3' => 'Es sind nun #2 #3 #1 im Bestand',
 	'Tracked execution of habit #1 on #2' => 'Ausführung von #1 am #2 erfasst',
 	'Tracked charge cylce of battery #1 on #2' => 'Ladezyklus für Batterie #1 am #2 erfasst',
+	'Consume all #1 which are currently in stock' => 'Verbrauche den kompletten Bestand von #1',
+	'All' => 'Alle',
+	'Track charge cycle of battery #1' => 'Erfasse einen Ladezyklus für Batterie #1',
+	'Track execution of habit #1' => 'Erfasse eine Ausführung von #1',
+	'Filter by location' => 'Nach Standort filtern',
+	'Search' => 'Suche',
+	'Not logged in' => 'Nicht angemeldet',
+	'You have to select a product' => 'Ein Produkt muss ausgewählt werden',
+	'You have to select a habit' => 'Eine Gewohnheit muss ausgewählt werden',
+	'You have to select a battery' => 'Eine Batterie muss ausgewählt werden',
+	'A name is required' => 'Ein Name ist erforderlich',
+	'A location is required' => 'Ein Standort ist erforderlich',
+	'The amount cannot be lower than #1' => 'Die Menge darf nicht kleiner als #1 sein',
+	'This cannot be negative' => 'Dies darf nicht negativ sein',
+	'A quantity unit is required' => 'Eine Mengeneinheit muss ausgewählt werden',
+	'A period type is required' => 'Eine Periodentyp muss ausgewählt werden',
+	'A best before date is required and must be later than today' => 'Ein Mindesthaltbarkeitsdatum ist erforderlich und muss später als heute sein',
+	'Settings' => 'Einstellungen',
+	'This can only be before now' => 'Dies kann nur vor jetzt sein',
+	'Calendar' => 'Kalender',
+	'Recipes' => 'Rezepte',
+	'Edit recipe' => 'Rezept bearbeiten',
+	'New recipe' => 'Neues Rezept',
+	'Ingredients list' => 'Zutatenliste',
+	'Add recipe ingredient' => 'Rezeptzutat hinzufügen',
+	'Edit recipe ingredient' => 'Rezeptzutat bearbeiten',
+	'Are you sure to delete recipe "#1"?' => 'Rezept "#1" wirklich löschen?',
+	'Are you sure to delete recipe ingredient "#1"?' => 'Rezeptzutat "#1" wirklich löschen?',
+	'Are you sure to empty the shopping list?' => 'Sicher, dass den Einkaufszettel geleert werden soll?',
+	'Clear list' => 'Liste leeren',
+	'Requirements fulfilled' => 'Bedarf im Bestand',
+	'Put missing products on shopping list' => 'Fehlende Produkte auf den Einkaufszettel setzen',
+	'Not enough in stock, #1 ingredients missing' => 'Nicht ausreichend im Bestand, #1 Zutaten fehlen',
+	'Enough in stock' => 'Bestand reicht aus',
+	'Not enough in stock, #1 ingredients missing but already on the shopping list' => 'Bestand nicht ausreichend, #1 Zutaten fehlen, stehen aber bereits auf dem Einkaufszettel',
+	'Expand to fullscreen' => 'Auf ganzen Bildschirm vergrößern',
+	'Ingredients' => 'Zutaten',
+	'Preparation' => 'Zubereitung',
+	'Recipe' => 'Rezept',
+	'Not enough in stock, #1 missing, #2 already on shopping list' => 'Nicht ausreichend im Bestand, #1 fehlen, #2 stehen bereits auf dem Einkaufszettel',
+	'Show notes' => 'Notizen anzeigen',
+	'Put missing amount on shopping list' => 'Fehlende Menge auf den Einkaufszettel setzen',
+	'Are you sure to put all missing ingredients for recipe "#1" on the shopping list?' => 'Sicher alle fehlenden Zutaten für Rezept "#1" auf die Einkaufsliste zu setzen?',
+	'Added for recipe #1' => 'Hinzugefügt für Rezept #1',
 	
 	//Constants
 	'manually' => 'Manuell',
@@ -134,7 +178,6 @@ return array(
 	'timeago_locale' => 'de',
 	'timeago_nan' => 'vor NaN Jahren',
 	'moment_locale' => 'de',
-	'bootstrap_datepicker_locale' => 'de',
 	'datatables_localization' => '{"sEmptyTable":"Keine Daten in der Tabelle vorhanden","sInfo":"_START_ bis _END_ von _TOTAL_ Einträgen","sInfoEmpty":"Keine Daten vorhanden","sInfoFiltered":"(gefiltert von _MAX_ Einträgen)","sInfoPostFix":"","sInfoThousands":".","sLengthMenu":"_MENU_ Einträge anzeigen","sLoadingRecords":"Wird geladen ..","sProcessing":"Bitte warten ..","sSearch":"Suchen","sZeroRecords":"Keine Einträge vorhanden","oPaginate":{"sFirst":"Erste","sPrevious":"Zurück","sNext":"Nächste","sLast":"Letzte"},"oAria":{"sSortAscending":": aktivieren, um Spalte aufsteigend zu sortieren","sSortDescending":": aktivieren, um Spalte absteigend zu sortieren"},"select":{"rows":{"0":"Zum Auswählen auf eine Zeile klicken","1":"1 Zeile ausgewählt","_":"%d Zeilen ausgewählt"}},"buttons":{"print":"Drucken","colvis":"Spalten","copy":"Kopieren","copyTitle":"In Zwischenablage kopieren","copyKeys":"Taste <i>ctrl</i> oder <i>⌘</i> + <i>C</i> um Tabelle<br>in Zwischenspeicher zu kopieren.<br><br>Um abzubrechen die Nachricht anklicken oder Escape drücken.","copySuccess":{"1":"1 Spalte kopiert","_":"%d Spalten kopiert"}}}',
 	
 	//Demo data
@@ -168,5 +211,20 @@ return array(
 	'Warranty ends' => 'Garantie endet',
 	'TV remote control' => 'TV Fernbedienung',
 	'Alarm clock' => 'Wecker',
-	'Heat remote control' => 'Fernbedienung Heizung'
+	'Heat remote control' => 'Fernbedienung Heizung',
+	'Lawn mowed in the garden' => 'Rasen im Garten gemäht',
+	'Some good snacks' => 'Paar gute Snacks',
+	'Pizza dough' => 'Pizzateig',
+	'Sieved tomatoes' => 'Passierte Tomaten',
+	'Salami' => 'Salami',
+	'Toast' => 'Toast',
+	'Minced meat' => 'Hackfleisch',
+	'Pizza' => 'Pizza',
+	'Spaghetti bolognese' => 'Spaghetti Bolognese',
+	'Sandwiches' => 'Belegte Toasts',
+	'English' => 'Englisch',
+	'German' => 'Deutsch',
+	'Italian' => 'Italienisch',
+	'Demo in different language' => 'Demo in anderer Sprache',
+	'This is the note content of the recipe ingredient' => 'Dies ist der Inhalt der Notiz der Zutat'
 );
--- a/localization/en.php
+++ b/localization/en.php
@@ -9,6 +9,5 @@ return array(
 	'timeago_locale' => 'en',
 	'timeago_nan' => 'NaN years ago',
 	'moment_locale' => '',
-	'bootstrap_datepicker_locale' => '',
 	'datatables_localization' => '{"sEmptyTable":"No data available in table","sInfo":"Showing _START_ to _END_ of _TOTAL_ entries","sInfoEmpty":"Showing 0 to 0 of 0 entries","sInfoFiltered":"(filtered from _MAX_ total entries)","sInfoPostFix":"","sInfoThousands":",","sLengthMenu":"Show _MENU_ entries","sLoadingRecords":"Loading...","sProcessing":"Processing...","sSearch":"Search:","sZeroRecords":"No matching records found","oPaginate":{"sFirst":"First","sLast":"Last","sNext":"Next","sPrevious":"Previous"},"oAria":{"sSortAscending":": activate to sort column ascending","sSortDescending":": activate to sort column descending"}}'
 );
--- a/localization/it.php
+++ b/localization/it.php
@@ -0,0 +1,187 @@
+<?php
+
+return array(
+	'Stock overview' => 'Dispensa',
+	'#1 products with #2 units in stock' => '#1 prodotti stano per finire(#2 unità)',
+	'#1 products expiring within the next #2 days' => '#1 prodotti scadranno tra #2 giorni',
+	'#1 products are already expired' => '#1 prodotti scaduti',
+	'#1 products are below defined min. stock amount' => '#1 prodotti sotto il limite minimo',
+	'Product' => 'prodotto',
+	'Amount' => 'quantità',
+	'Next best before date' => 'Prossima data di scadenza',
+	'Logout' => 'Logout',
+	'Habits overview' => 'Riepilogo delle abitudini',
+	'Batteries overview' => 'Riepilogo delle batterie',
+	'Purchase' => 'Acquisti',
+	'Consume' => 'Consumi',
+	'Inventory' => 'Inventario',
+	'Shopping list' => 'Lista della spesa',
+	'Habit tracking' => 'Dati abitudini',
+	'Battery tracking' => 'Dati batterie',
+	'Products' => 'Prodotti',
+	'Locations' => 'Posizioni',
+	'Quantity units' => 'Unità di misura',
+	'Habits' => 'Abitudini',
+	'Batteries' => 'Batterie',
+	'Habit' => 'Abitudine',
+	'Next estimated tracking' => 'Prossima esecuzione',
+	'Last tracked' => 'Ultima esecuzione',
+	'Battery' => 'Batterie',
+	'Last charged' => 'Ultima ricarica',
+	'Next planned charge cycle' => 'Prossima ricarica',
+	'Best before' => 'Data di scadenza',
+	'OK' => 'OK',
+	'Product overview' => 'Riepilogo dei prodotti',
+	'Stock quantity unit' => 'Unità di misura',
+	'Stock amount' => 'Quantità',
+	'Last purchased' => 'Ultimo acquisto',
+	'Last used' => 'Ultimo utilizzo',
+	'Spoiled' => 'Scaduto',
+	'Barcode lookup is disabled' => 'I codici a barre sono disabilitati',
+	'will be added to the list of barcodes for the selected product on submit' => 'sarà aggiunto alla lista dei codici a barre per questo prodotto',
+	'New amount' => 'Nuova quantità',
+	'Note' => 'Nota',
+	'Tracked time' => 'Ora di esecuzione',
+	'Habit overview' => 'Riepilogo dell\'abitudine',
+	'Tracked count' => 'Numero di esecuzioni',
+	'Battery overview' => 'Riepilogo della batteria',
+	'Charge cycles count' => 'Numero di ricariche',
+	'Create shopping list item' => 'Aggiungi un prodotto alla lista della spesa',
+	'Edit shopping list item' => 'Modifica un\'entrata della lista della spesa',
+	'#1 units were automatically added and will apply in addition to the amount entered here' => '#1 sono state aggiunte automaticamente',
+	'Save' => 'Salva',
+	'Add' => 'Aggiungi',
+	'Name' => 'Nome',
+	'Location' => 'Posizione',
+	'Min. stock amount' => 'Quantità minima',
+	'QU purchase' => 'Unità di acquisto',
+	'QU stock' => 'Unità di dispensa',
+	'QU factor' => 'Fattore di conversione',
+	'Description' => 'Descrizione',
+	'Create product' => 'Aggiungi prodotto',
+	'Barcode(s)' => 'Codice a barre',
+	'Minimum stock amount' => 'Quantità minima',
+	'Default best before days' => 'Data di scadenza standard in giorni',
+	'Quantity unit purchase' => 'Unità di acquisto',
+	'Quantity unit stock' => 'Unità di dispensa',
+	'Factor purchase to stock quantity unit' => 'Fattore di conversione tra quantità di acquisto e di dispensa',
+	'Create location' => 'Aggiungi posizione',
+	'Create quantity unit' => 'Aggiungi unità di misura',
+	'Period type' => 'Tipo di ripetizione',
+	'Period days' => 'Periodo in giorni',
+	'Create habit' => 'Aggiungi abitudine',
+	'Used in' => 'Usato in',
+	'Create battery' => 'Aggiungi batteria',
+	'Edit battery' => 'Modifica batteria',
+	'Edit habit' => 'Modifica abitudine',
+	'Edit quantity unit' => 'Modifica unità di misura',
+	'Edit product' => 'Modifica prodotto',
+	'Edit location' => 'Modifica posizione',
+	'Record data' => 'Registra dati',
+	'Manage master data' => 'Gestisci dati',
+	'This will apply to added products' => 'Verrà applicato ai prodotti aggiunti',
+	'never' => 'mai',
+	'Add products that are below defined min. stock amount' => 'Aggiungi prodotti sotti il limite minimo',
+	'For purchases this amount of days will be added to today for the best before date suggestion' => 'Questo numero di giorni verrà aggiunto alla data di acquisto per la data di scadenza',
+	'This means 1 #1 purchased will be converted into #2 #3 in stock' => 'Questo significa che 1 #1 acquistato diventerà #2 #3 in dispensa',
+	'Login' => 'Login',
+	'Username' => 'Username',
+	'Password' => 'Password',
+	'Invalid credentials, please try again' => 'Credenziali non valide, per favore riprova',
+	'Are you sure to delete battery "#1"?' => 'Sei sicuro di voler eliminare la batteria "#1"?',
+	'Yes' => 'Si',
+	'No' => 'No',
+	'Are you sure to delete habit "#1"?' => 'Sei sicuro di voler eliminare l\'abitudine "#1"?',
+	'"#1" could not be resolved to a product, how do you want to proceed?' => '"#1" non è stato associato a nessun prodotto, vuoi procedere?',
+	'Create or assign product' => 'Aggiungi o assegna prodotto',
+	'Cancel' => 'Annulla',
+	'Add as new product' => 'Aggiungi come nuovo prodotto',
+	'Add as barcode to existing product' => 'Assegna il codice a barre ad un prodotto',
+	'Add as new product and prefill barcode' => 'Aggiungi come nuovo prodotto ed assegna il codice a barre',
+	'Are you sure to delete quantity unit "#1"?' => 'Sei sicuro di voler eliminare l\'unità di misura "#1"?',
+	'Are you sure to delete product "#1"?' => 'Sei sicuro di voler eliminare il prodotto "#1"?',
+	'Are you sure to delete location "#1"?' => 'Sei sicuro di voler eliminare la posizione "#1"?',
+	'Manage API keys' => 'Gestisci le chiavi API',
+    'REST API & data model documentation' => 'REST API & Documentazione del modello di dati',
+    'API keys' => 'Chiavi API',
+    'Create new API key' => 'Crea nuova chiave API',
+    'API key' => 'Chiave API',
+    'Expires' => 'Scade il',
+    'Created' => 'Creata il',
+	'This product is not in stock' => 'Questo prodotto non è in dispensa',
+	'This means #1 will be added to stock' => '#1 sarà aggiunto alla dispensa',
+	'This means #1 will be removed from stock' => '#1 sarà rimosso dalla dispensa',
+	'This means it is estimated that a new execution of this habit is tracked #1 days after the last was tracked' => 'L\'esecuzione dell\'abitudine è #1 giorni dopo la precedente',
+	'Removed #1 #2 of #3 from stock' => '#1 #2 su #3 rimossi dalla dispensa',
+	'About grocy' => 'Riguardo grocy',
+	'Close' => 'Chiudi',
+	'#1 batteries are due to be charged within the next #2 days' => '#1 batterie da ricaricare entro #2 giorni',
+	'#1 batteries are overdue to be charged' => '#1 batterie devono essere ricaricate',
+	'#1 habits are due to be done within the next #2 days' => '#1 abitudini da eseguire entro #2 giorni',
+	'#1 habits are overdue to be done' => '#1 abitudini da eseguire',
+	'Released on' => 'Rilasciato il',
+	'Consume #3 #1 of #2' => 'Consumati #3 #1 di #2',
+	'Added #1 #2 of #3 to stock' => 'Aggiunti #1 #2 di #3',
+	'Stock amount of #1 is now #2 #3' => 'La quantità in dispensa di #1 è ora #2 #3',
+	'Tracked execution of habit #1 on #2' => 'Esecuzione dell\'abitudine #1 registrata il #2',
+	'Tracked charge cylce of battery #1 on #2' => 'Ricarica della batteria #1 effettuata il #2',
+	'Consume all #1 which are currently in stock' => 'Consuma tutto #1 in dispensa',
+	'All' => 'Tutto',
+	'Track charge cycle of battery #1' => 'Registra la ricarica della batteria #1',
+	'Track execution of habit #1' => 'Registra l\'esecuzione dell\'abitudine #1',
+	'Filter by location' => 'Filtra per posizione',
+	'Search' => 'Cerca',
+	'Not logged in' => 'Non autenticato',
+	'You have to select a product' => 'Devi selezionare un prodotto',
+	'You have to select a habit' => 'Devi selezionare un\'abitudine',
+	'You have to select a battery' => 'Devi selezionare una batteria',
+	'A name is required' => 'Inserisci un nome',
+	'A location is required' => 'Inserisci la posizione',
+	'The amount cannot be lower than #1' => 'La quantità non può essere minore di #1',
+	'This cannot be negative' => 'Il numero non può essere negativo',
+	'A quantity unit is required' => 'Inserisci un\'unità di misura',
+	'A period type is required' => 'Seleziona un tipo di ripetizione',
+	
+	//Constants
+	'manually' => 'Manualmente',
+	'dynamic-regular' => 'Regolatore dinamico',
+	
+	//Technical component translations
+	'timeago_locale' => 'it',
+	'timeago_nan' => 'NaN anni fa',
+	'moment_locale' => 'it',
+	'datatables_localization' => '{"sEmptyTable":"Nessun dato disponibile","sInfo":"Mostrando da _START_ a _END_ di _TOTAL_ voci","sInfoEmpty":"Mostrando da 0 a 0 di 0 voci","sInfoFiltered":"(Filtrato da _MAX_ voci totali)","sInfoPostFix":"","sInfoThousands":",","sLengthMenu":"Mostra _MENU_ voci","sLoadingRecords":"Caricando...","sProcessing":"Calcolando...","sSearch":"Cerca:","sZeroRecords":"Nessun risultato trovato","oPaginate":{"sFirst":"Prima","sLast":"Ultima","sNext":"Prossima","sPrevious":"Precedente"},"oAria":{"sSortAscending":": ordine crescente","sSortDescending":": ordine decrescente"}}',
+	
+	//Demo data
+	'Cookies' => 'Biscotti',
+	'Chocolate' => 'Cioccolato',
+	'Pantry' => 'Vorratskammer',
+	'Candy cupboard' => 'Süßigkeitenschrank',
+	'Tinned food cupboard' => 'Konservenschrank',
+	'Fridge' => 'Kühlschrank',
+	'Piece' => 'Pezzo',
+	'Pack' => 'Pacco',
+	'Glass' => 'Bicchiere',
+	'Tin' => 'Scatola',
+	'Can' => 'Lattina',
+	'Bunch' => 'Cespo',
+	'Gummy bears' => 'Caramelle',
+	'Crisps' => 'Patatine',
+	'Eggs' => 'Uova',
+	'Noodles' => 'Spaghetti',
+	'Pickles' => 'Marmellata',
+	'Gulash soup' => 'Dado',
+	'Yogurt' => 'Yogurt',
+	'Cheese' => 'Parmigiano',
+	'Cold cuts' => 'Pancetta',
+	'Paprika' => 'Pepe',
+	'Cucumber' => 'Zucchine',
+	'Radish' => 'Radicchio',
+	'Tomato' => 'Pomodori',
+	'Changed towels in the bathroom' => 'Cambiare asciugamani in bagno',
+	'Cleaned the kitchen floor' => 'Pulire la cucina',
+	'Warranty ends' => 'Scadenza dalla garanzia',
+	'TV remote control' => 'Telecomando',
+	'Alarm clock' => 'Sveglia',
+	'Heat remote control' => 'Termostato'
+);
--- a/localization/no.php
+++ b/localization/no.php
@@ -0,0 +1,230 @@
+<?php
+
+return array(
+	'Stock overview' => 'Husholdning',
+	'#1 products with #2 units in stock' => '#1 Produkter med #2 i husholdningen',
+	'#1 products expiring within the next #2 days' => '#1 Produkter som går ut på dato innen de neste #2 dagene',
+	'#1 products are already expired' => '#1 Produkt som har gått ut på dato',
+	'#1 products are below defined min. stock amount' => '#1 Produkt under minimum husholdningsnivå',
+	'Product' => 'Produkt',
+	'Amount' => 'Antall',
+	'Next best before date' => 'Kommende best før dato',
+	'Logout' => 'Logg Av',
+	'Habits overview' => 'Oversikt Husoppgaver',
+	'Batteries overview' => 'Oversikt Batteri',
+	'Purchase' => 'Innkjøp',
+	'Consume' => 'Forbrukt',
+	'Inventory' => 'Endre Husholdning',
+	'Shopping list' => 'Handleliste',
+	'Habit tracking' => 'Logge Husoppgaver',
+	'Battery tracking' => 'Ladesyklus Batteri',
+	'Products' => 'Produkter',
+	'Locations' => 'Lokasjoner',
+	'Quantity units' => 'Forpakning',
+	'Habits' => 'Husoppgaver',
+	'Batteries' => 'Batterier',
+	'Habit' => 'Husoppgave',
+	'Next estimated tracking' => 'Neste handling',
+	'Last tracked' => 'Sist logget',
+	'Battery' => 'Batteri',
+	'Last charged' => 'Sist ladet',
+	'Next planned charge cycle' => 'Neste planlagte ladesyklus',
+	'Best before' => 'Best før',
+	'OK' => 'OK',
+	'Product overview' => 'Oversikt Produkt',
+	'Stock quantity unit' => 'Forpakning i husholdningen',
+	'Stock amount' => 'Husholdning',
+	'Last purchased' => 'Sist kjøpt',
+	'Last used' => 'Sist brukt',
+	'Spoiled' => 'Produkt har gått ut på dato',
+	'Barcode lookup is disabled' => 'Strekkodesøk deaktivert',
+	'will be added to the list of barcodes for the selected product on submit' => 'Blir lagt til liste over strekkoder når produkt blir lagt inn.',
+	'New amount' => 'Nytt antall',
+	'Note' => 'Info',
+	'Tracked time' => 'Tid logget',
+	'Habit overview' => 'Oversikt Husoppgave',
+	'Tracked count' => 'Logget',
+	'Battery overview' => 'Batteri Oversikt',
+	'Charge cycles count' => 'Antall ladesykluser',
+	'Create shopping list item' => 'Opprett handelisteoppføring',
+	'Edit shopping list item' => 'Endre på handlelistoppføring',
+	'#1 units were automatically added and will apply in addition to the amount entered here' => '#1 enheter ble automatisk lagt til i tillegg til hva som blir skrevet inn her',
+	'Save' => 'Lagre',
+	'Add' => 'Legg til',
+	'Name' => 'Navn',
+	'Location' => 'Lokasjon',
+	'Min. stock amount' => 'Minimums antall for husholdingen',
+	'QU purchase' => 'QU innkjøp',
+	'QU stock' => 'QU husholdning',
+	'QU factor' => 'QU faktor',
+	'Description' => 'Beskrivelse',
+	'Create product' => 'Opprett produkt',
+	'Barcode(s)' => 'Strekkode(r)',
+	'Minimum stock amount' => 'Minimums antall for husholdningen',
+	'Default best before days' => 'Standard antall dager best før',
+	'Quantity unit purchase' => 'Forpakning kjøpt',
+	'Quantity unit stock' => 'Forpakning husholdning',
+	'Factor purchase to stock quantity unit' => 'Innkjøpsfaktor for forpakning',
+	'Create location' => 'Opprett lokasjon',
+	'Create quantity unit' => 'Opprett forpakning',
+	'Period type' => 'Periodetype',
+	'Period days' => 'Dager/ Periode',
+	'Create habit' => 'Opprett husoppgave',
+	'Used in' => 'Brukt',
+	'Create battery' => 'Opprett batteri',
+	'Edit battery' => 'Endre batteri',
+	'Edit habit' => 'Endre husoppgave',
+	'Edit quantity unit' => 'Endre forpakning',
+	'Edit product' => 'Endre produkt',
+	'Edit location' => 'Endre lokasjon',
+	'Record data' => 'Logg handlinger',
+	'Manage master data' => 'Administrer masterdata',
+	'This will apply to added products' => 'Dette vil gjelde for produkt som blir lagt til',
+	'never' => 'aldri',
+	'Add products that are below defined min. stock amount' => 'Legg til produkt som er under definert minimums antall for husholdningen',
+	'For purchases this amount of days will be added to today for the best before date suggestion' => 'For innkjøp vil dette antallet dager legges til bestfør forslaget',
+	'This means 1 #1 purchased will be converted into #2 #3 in stock' => 'Dette betyr at 1 #1 innkjøp vil bli omgjort til #2 #3 husholdning',
+	'Login' => 'Logg inn',
+	'Username' => 'Brukernavn',
+	'Password' => 'Passord',
+	'Invalid credentials, please try again' => 'Feil brukernavn og/eller passord, prøv igjen',
+	'Are you sure to delete battery "#1"?' => 'Er du sikker du ønsker å slette Batteri "#1"?',
+	'Yes' => 'Ja',
+	'No' => 'Nei',
+	'Are you sure to delete habit "#1"?' => 'Er du sikker på du ønsker å slette husoppgave "#1"?',
+	'"#1" could not be resolved to a product, how do you want to proceed?' => '"#1" kunne ikke bli tildelt et produkt, hvordan ønsker du å fortsette?',
+	'Create or assign product' => 'Opprett eller tildel til produkt',
+	'Cancel' => 'Avbryt',
+	'Add as new product' => 'Legg til som nytt produkt',
+	'Add as barcode to existing product' => 'Legg til strekkode til allerede eksiterende produkt',
+	'Add as new product and prefill barcode' => 'Legg til som nytt produkt med forhåndsutfylt strekkode',
+	'Are you sure to delete quantity unit "#1"?' => 'Er du sikker du ønsker å slette forpakning "#1"?',
+	'Are you sure to delete product "#1"?' => 'Er du sikker du ønsker å slette produkt "#1"?',
+	'Are you sure to delete location "#1"?' => 'Er du sikker du ønsker å slette lokasjon "#1"?',
+	'Manage API keys' => 'Administrer API-Keys',
+    'REST API & data model documentation' => 'REST-API & Datamodell Dokumentasjon',
+    'API keys' => 'API-Keys',
+    'Create new API key' => 'Opprett ny API-Key',
+    'API key' => 'API-Key',
+    'Expires' => 'Går ut',
+    'Created' => 'Opprettet',
+	'This product is not in stock' => 'Dette produktet er ikke i husholdningen',
+	'This means #1 will be added to stock' => 'Dette betyr at #1 vil bli lagt til i husholdningen',
+	'This means #1 will be removed from stock' => 'Dette betyr at #1 vil bli fjernet fra husholdningen',
+	'This means it is estimated that a new execution of this habit is tracked #1 days after the last was tracked' => 'Dette betyr at det er estimert at den nye utførelsen av denne husoppgaven er logget #1 dag etter den sist var logget',
+	'Removed #1 #2 of #3 from stock' => 'Fjernet #1 #2 av #3 fra husholdningen',
+	'About grocy' => 'Om Grocy',
+	'Close' => 'Lukk',
+	'#1 batteries are due to be charged within the next #2 days' => '#1 Batteri må lades innen de #2 dagene',
+	'#1 batteries are overdue to be charged' => '#1 Batteri har gått over fristen for å bli ladet opp',
+	'#1 habits are due to be done within the next #2 days' => '#1 husoppgaver skal gjøres inne de #2 neste dagene',
+	'#1 habits are overdue to be done' => '#1 husoppgaver har gått over fristen for utførelse',
+	'Released on' => 'Utgitt',
+	'Consume #3 #1 of #2' => 'Forbruk #3 #1 #2',
+	'Added #1 #2 of #3 to stock' => '#1 #2 #3 lagt til i husholdningen',
+	'Stock amount of #1 is now #2 #3' => 'Husholdning antall #1 er nå #2 #3',
+	'Tracked execution of habit #1 on #2' => 'Logget utførelse av husoppgave "#1" den #2',
+	'Tracked charge cylce of battery #1 on #2' => 'Logget ladesyklus for batteri #1 og #2',
+	'Consume all #1 which are currently in stock' => 'Konsumér alle #1 som er i husholdningen',
+	'All' => 'Alle',
+	'Track charge cycle of battery #1' => 'Logg ladesyklus for batteri #1',
+	'Track execution of habit #1' => 'Logg utførelse av husoppgave #1',
+	'Filter by location' => 'Filtrér etter lokasjon',
+	'Search' => 'Søk',
+	'Not logged in' => 'Ikke logget inn',
+	'You have to select a product' => 'Du må velge et produkt',
+	'You have to select a habit' => 'Du mpå velge en husoppgaven',
+	'You have to select a battery' => 'Du må velge et batteri',
+	'A name is required' => 'Et navn kreves',
+	'A location is required' => 'En lokasjon kreves',
+	'The amount cannot be lower than #1' => 'Antallet kan ikke være lavere enn #1',
+	'This cannot be negative' => 'Dette kan ikke være negativt',
+	'A quantity unit is required' => 'Forpakning antall/størrelse kreves',
+	'A period type is required' => 'En periodetype kreves',
+	'A best before date is required and must be later than today' => 'En best før dato kreves, denne må være senere enn i dag',
+	'Settings' => 'Instillinger',
+	'This can only be before now' => 'Dette kan kun være før nå',
+        'Calendar' => 'Kalender',
+	'Recipes' => 'Oppskrifter',
+	'Edit recipe' => 'Endre oppskrift',
+	'New recipe' => 'Ny oppskrift',
+	'Ingredients list' => 'Liste over ingredienser',
+	'Add recipe ingredient' => 'Legg ingrediens til oppskrift',
+	'Edit recipe ingredient' => 'Endre ingrediens i oppskrift',
+	'Are you sure to delete recipe "#1"?' => 'Er du sikker du ønsker å slette oppskrift "#1"?',
+	'Are you sure to delete recipe ingredient "#1"?' => 'Er du sikker du ønsker å slette ingrediens "#1" fra oppskriften?',
+	'Are you sure to empty the shopping list?' => 'Er du sikker du ønsker å slette handlelisten??',
+	'Clear list' => 'Tøm liste',
+	'Requirements fulfilled' => 'Krav oppfylt',
+	'Put missing products on shopping list' => 'Legg manglende produkter til handlelisten',
+	'Not enough in stock, #1 ingredients missing' => 'Ikke nok i husholdningen, #1 ingrediens mangler',
+	'Enough in stock' => 'Nok i husholdningen',
+	'Not enough in stock, #1 ingredients missing but already on the shopping list' => 'Ikke nok i husholdningen, #1 ingrediens mangler, men lagt til i handelisten',
+	'Expand to fullscreen' => 'Full skjerm',
+	'Ingredients' => 'Ingrediens',
+	'Preparation' => 'Forberedelse',
+	'Recipe' => 'Oppskrift',
+	'Not enough in stock, #1 missing, #2 already on shopping list' => 'Ikke nok i husholdningen, #1 mangler, #2 allerede i handlisten',
+	'Show notes' => 'Vis notater',
+	'Put missing amount on shopping list' => 'Legg manglende til handlelisten',
+	'Are you sure to put all missing ingredients for recipe "#1" on the shopping list?' => 'Er du sikker du ønsker å legge alle manglende ingredienser til oppskrift "#1"?',
+	'Added for recipe #1' => 'Lagt til oppskrift #1',
+	
+	//Constants
+	'manually' => 'Manuel',
+	'dynamic-regular' => 'Dynamisk Regulering',
+	
+	//Technical component translations
+	'timeago_locale' => 'no',
+	'timeago_nan' => 'for NaN År',
+	'moment_locale' => 'nb',
+	'datatables_localization' => '{"sEmptyTable":"Det finnes ingen data i tabellen","sInfo":"_START_ fra _END_ til _TOTAL_ skriv","sInfoEmpty":"Ingen data tilgjengelign","sInfoFiltered":"(filtrert fra _MAX_ skriv)","sInfoPostFix":"","sInfoThousands":".","sLengthMenu":"_MENU_ registrer deg","sLoadingRecords":"Laster ..","sProcessing":"Vennligst vent ..","sSearch":"Søk","sZeroRecords":"Ingen oppføringer tilgjengelig","oPaginate":{"sFirst":"Første","sPrevious":"Bakover","sNext":"Neste","sLast":"Siste"},"oAria":{"sSortAscending":": Sortér stigende","sSortDescending":": Sortér synkende"},"select":{"rows":{"0":"klikk på en linje for å velge","1":"1 linje valgt","_":"%d linger valgt"}},"buttons":{"print":"Print","colvis":"Søyle","copy":"Kopi","copyTitle":"Kopier til utklippstavlen","copyKeys":"Trykk <i>ctrl</i> eller <i>⌘</i> + <i>C</i> for å kopiere tabell<br> til utklipptavlen.<br><br>For å avbryte, klikke på meldingen eller trykk på ESC.","copySuccess":{"1":"1 Kolonne kopiert","_":"%d kolonne kopiert"}}}',
+	
+	//Demo data
+	'Cookies' => 'Cookies',
+	'Chocolate' => 'Sjokolade',
+	'Pantry' => 'Spiskammers',
+	'Candy cupboard' => 'Godteriskapet',
+	'Tinned food cupboard' => 'Boksematskapet',
+	'Fridge' => 'Kjøleskapet',
+	'Piece' => 'Ett',
+	'Pack' => 'Pakke',
+	'Glass' => 'Glass',
+	'Tin' => 'Hermetikkboks',
+	'Can' => 'Boks',
+	'Bunch' => 'Klase',
+	'Gummy bears' => 'Vingummibjørner',
+	'Crisps' => 'Chips',
+	'Eggs' => 'Egg',
+	'Noodles' => 'Nuddler',
+	'Pickles' => 'Sur agurk',
+	'Gulash soup' => 'Gulasj suppe',
+	'Yogurt' => 'Yoghurt',
+	'Cheese' => 'Ost',
+	'Cold cuts' => 'Kjøttpålegg',
+	'Paprika' => 'Paprika',
+	'Cucumber' => 'Agurk',
+	'Radish' => 'Reddik',
+	'Tomato' => 'Tomat',
+	'Changed towels in the bathroom' => 'Bytt handler på badet',
+	'Cleaned the kitchen floor' => 'Vasket kjøkkengulvet',
+	'Warranty ends' => 'Garanti utgår',
+	'TV remote control' => 'Fjernkontroll for TV',
+	'Alarm clock' => 'Alarm klokke',
+	'Heat remote control' => 'Fjernkontroll for termostat',
+        'Lawn mowed in the garden' => 'Kuttet gresse i hagen',
+	'Some good snacks' => 'Noen gode snacks',
+	'Pizza dough' => 'Pizzadeig',
+	'Sieved tomatoes' => 'Passierte Tomaten',
+	'Salami' => 'Salami',
+	'Toast' => 'Risted brød',
+	'Minced meat' => 'Kjøttdeig',
+	'Pizza' => 'Pizza',
+	'Spaghetti bolognese' => 'Spaghetti Bolognese',
+	'Sandwiches' => 'Smørbrød',
+	'English' => 'Engelsk',
+	'German' => 'Tysk',
+	'Italian' => 'Italiensk',
+	'Demo in different language' => 'Demo i annet språk',
+	'This is the note content of the recipe ingredient' => 'Dette er notisen for ingrediensen i oppskriften'
+);
--- a/migrations/0025.sql
+++ b/migrations/0025.sql
@@ -0,0 +1,50 @@
+CREATE TABLE recipes (
+	id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT UNIQUE,
+	name TEXT NOT NULL,
+	description TEXT,
+	row_created_timestamp DATETIME DEFAULT (datetime('now', 'localtime'))
+);
+
+CREATE TABLE recipes_pos (
+	id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT UNIQUE,
+	recipe_id INTEGER NOT NULL,
+	product_id INTEGER NOT NULL,
+	amount INTEGER NOT NULL DEFAULT 0,
+	note TEXT,
+	row_created_timestamp DATETIME DEFAULT (datetime('now', 'localtime'))
+);
+
+CREATE VIEW recipes_fulfillment
+AS
+SELECT
+	r.id AS recipe_id,
+	rp.id AS recipe_pos_id,
+	rp.product_id AS product_id,
+	rp.amount AS recipe_amount,
+	IFNULL(sc.amount, 0) AS stock_amount,
+	CASE WHEN IFNULL(sc.amount, 0) >= rp.amount THEN 1 ELSE 0 END AS need_fulfilled,
+	CASE WHEN IFNULL(sc.amount, 0) - IFNULL(rp.amount, 0) < 0 THEN ABS(IFNULL(sc.amount, 0) - IFNULL(rp.amount, 0)) ELSE 0 END AS missing_amount,
+	IFNULL(sl.amount, 0) AS amount_on_shopping_list,
+	CASE WHEN IFNULL(sc.amount, 0) + IFNULL(sl.amount, 0) >= rp.amount THEN 1 ELSE 0 END AS need_fulfilled_with_shopping_list
+FROM recipes r
+JOIN recipes_pos rp
+	ON r.id = rp.recipe_id
+LEFT JOIN (
+	SELECT product_id, SUM(amount + amount_autoadded) AS amount
+	FROM shopping_list
+	GROUP BY product_id) sl
+	ON rp.product_id = sl.product_id
+LEFT JOIN stock_current sc
+	ON rp.product_id = sc.product_id;
+
+CREATE VIEW recipes_fulfillment_sum
+AS
+SELECT
+	r.id AS recipe_id,
+	IFNULL(MIN(rf.need_fulfilled), 1) AS need_fulfilled,
+	IFNULL(MIN(rf.need_fulfilled_with_shopping_list), 1) AS need_fulfilled_with_shopping_list,
+	(SELECT COUNT(*) FROM recipes_fulfillment WHERE recipe_id = rf.recipe_id AND need_fulfilled = 0 AND recipe_pos_id IS NOT NULL) AS missing_products_count
+FROM recipes r
+LEFT JOIN recipes_fulfillment rf
+	ON rf.recipe_id = r.id
+GROUP BY r.id;
--- a/package.json
+++ b/package.json
@@ -0,0 +1,30 @@
+{
+	"name": "grocy",
+	"private": true,
+	"dependencies": {
+		"@danielfarrell/bootstrap-combobox": "https://github.com/pallidus-fintech/bootstrap-combobox.git#enhance/boostrap_4",
+		"@fortawesome/fontawesome-free": "^5.1.0",
+		"TagManager": "https://github.com/max-favilli/tagmanager.git#3.0.2",
+		"bootbox": "https://github.com/makeusabrew/bootbox.git#v5.x",
+		"bootstrap": "^4.1.1",
+		"bootstrap-side-navbar": "https://github.com/samrayner/bootstrap-side-navbar.git#1.0.1",
+		"datatables.net": "^1.10.19",
+		"datatables.net-bs4": "^1.10.19",
+		"datatables.net-colreorder": "^1.5.1",
+		"datatables.net-colreorder-bs4": "^1.5.1",
+		"datatables.net-responsive": "^2.2.3",
+		"datatables.net-responsive-bs4": "^2.2.3",
+		"datatables.net-select": "^1.2.7",
+		"datatables.net-select-bs4": "^1.2.7",
+		"jquery": "^3.3.1",
+		"jquery-serializejson": "^2.8.1",
+		"jquery-ui-dist": "^1.12.1",
+		"moment": "^2.22.2",
+		"startbootstrap-sb-admin": "^4.0.0",
+		"swagger-ui-dist": "^3.17.3",
+		"tagmanager": "https://github.com/max-favilli/tagmanager.git#3.0.2",
+		"tempusdominus-bootstrap-4": "^5.0.1",
+		"timeago": "^1.6.3",
+		"toastr": "^2.1.4"
+	}
+}
--- a/public/css/grocy.css
+++ b/public/css/grocy.css
@@ -1,118 +1,26 @@
-body {
-	padding-top: 50px;
+/* Main style customizations */
+body {
 	font-family: 'Noto Sans', sans-serif;
 }

-.navbar-fixed-top {
-	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;
-	
-}
-
-.navbar-fixed-side {
-	top: 51px;
-	padding-top: 20px;
-	margin-bottom: 20px;
-	background-color: #e5e5e5;
-	border-right: 2px solid #d6d6d6;
-	max-width: 260px;
-	border-left: 0;
-}
-
-#sidebar {
-	overflow-y: auto;
-}
-
-@media (min-width: 768px) {
-	#navbar-mobile {
-		display: none !important;
-	}
-
-	.nav-copyright {
-		padding-bottom: 100px;
-	}
-}
-
-@media (max-width: 768px) {
-	.navbar-brand {
-		margin-left: 25px !important;
-	}
-}
-
-.sidebar-nav > li > a {
-	padding-right: 20px;
-	padding-left: 20px;
-	transition: all 0.3s;
-}
-
-.sidebar-nav > li > a:hover {
-	box-shadow: inset 5px 0 0 #337ab7;
-	transition: all 0.3s;
-}
-
-.sidebar-nav > li > a:focus {
-	box-shadow: inset 5px 0 0 #ab2230;
-	transition: all 0.3s;
-}
-
-.sidebar-nav > .active > a,
-.sidebar-nav > .active > a:hover,
-.sidebar-nav > .active > a:focus {
-	background-color: #d6d6d6;
-	box-shadow: inset 5px 0 0 #ab2230;
-	transition: all 0.3s;
-}
-
-.nav > li.disabled > a,
-.navbar-default .navbar-nav > .disabled > a {
-	color: #a7a7a7;
-}
-
-.nav-copyright {
-	color: #a7a7a7;
-	font-size: 11px;
-	text-align: center;
-}
-
-.nav-copyright > li > a {
-	padding-top: 0 !important;
-	padding-bottom: 0 !important;
-}
-
-.navbar-default .navbar-nav > .open > a {
-	background-color: #d6d6d6 !important;
-}
-
-.dropdown-menu > li > a:hover,
-.dropdown-menu > li > a:focus {
-	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;
 }
@@ -120,65 +28,154 @@ 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;
+}
+
+.card-body {
+	flex-grow: 0;
+}
+
+.content-text .invalid-feedback {
+	font-size: 95%;
+}
+
+.fullscreen {
+	z-index: 9999; 
+	width: 100%; 
+	height: 100%; 
+	position: fixed; 
+	top: 0; 
+	left: 0; 
+ }
+
+/* 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;
+	border-top: 2px solid !important;
+}
+
+.navbar-sidenav,
+.sidenav-second-level {
+	background-color: #e5e5e5 !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;
 }
+
+/* Third party component customizations - SB Admin 2 */
+#mainNav .navbar-collapse .navbar-nav > .nav-item.dropdown > .nav-link:after,
+#mainNav .navbar-collapse .navbar-sidenav .nav-link-collapse:after {
+  font-family: 'Font Awesome 5 Free';
+  font-weight: 900;
+}
+
+@media (max-width:992px) {
+	#mainNav .navbar-collapse .navbar-sidenav > .nav-item > .nav-link {
+		padding: 0.8em;
+	}
+}
+
+/* Third party component customizations - Tempus Dominus */
+.date-only-datetimepicker .bootstrap-datetimepicker-widget.dropdown-menu {
+	width: auto !important;
+}
+
+/* Third party component customizations - Popper.js */
+.tooltip .arrow {
+	display: none;
+}
--- a/public/img/grocy.png
+++ b/public/img/grocy.png
--- a/public/img/grocy_icon.svg
+++ b/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>
--- a/public/img/grocy_logo.svg
+++ b/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>
--- a/public/js/grocy.js
+++ b/public/js/grocy.js
@@ -21,12 +21,49 @@ 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');
+
+	var parentMenuSelector = menuItem.data("sub-menu-of");
+	if (typeof parentMenuSelector !== "undefined")
+	{
+		$(parentMenuSelector).collapse("show");
+		$(parentMenuSelector).prev(".nav-link-collapse").addClass("active-page");
+	}
+}
+
+var observer = new MutationObserver(function(mutations)
+{
+	mutations.forEach(function(mutation)
+	{
+		if (mutation.attributeName === "class")
+		{
+			var attributeValue = $(mutation.target).prop(mutation.attributeName);
+			if (attributeValue.contains("sidenav-toggled"))
+			{
+				window.localStorage.setItem("sidebar_state", "collapsed");
+			}
+			else
+			{
+				window.localStorage.setItem("sidebar_state", "expanded");
+			}
+		}
+	});
+});
+observer.observe(document.body, {
+	attributes: true
+});
+if (window.localStorage.getItem("sidebar_state") === "collapsed")
+{
+	$("#sidenavToggler").click();
 }

 $.timeago.settings.allowFuture = true;
+RefreshContextualTimeago = function()
+{	
 	$('time.timeago').timeago();
+}
+RefreshContextualTimeago();

 toastr.options = {
 	toastClass: 'alert',
@@ -35,6 +72,10 @@ toastr.options = {
 	extendedTimeOut: 5000
 };

+window.FontAwesomeConfig = {
+	searchPseudoElements: true
+}
+
 Grocy.Api = { };
 Grocy.Api.Get = function(apiFunction, success, error)
 {
@@ -96,3 +137,19 @@ Grocy.Api.Post = function(apiFunction, jsonData, success, error)
 	xhr.setRequestHeader('Content-type', 'application/json');
 	xhr.send(JSON.stringify(jsonData));
 };
+
+Grocy.FrontendHelpers = { };
+Grocy.FrontendHelpers.ValidateForm = function(formId)
+{
+	var form = document.getElementById(formId);
+	if (form.checkValidity() === true)
+	{
+		$(form).find(':submit').removeClass('disabled');
+	}
+	else
+	{
+		$(form).find(':submit').addClass('disabled');
+	}
+
+	$(form).addClass('was-validated');
+}
--- a/public/viewjs/batteries.js
+++ b/public/viewjs/batteries.js
@@ -1,4 +1,27 @@
-$(document).on('click', '.battery-delete-button', function(e)
+var batteriesTable = $('#batteries-table').DataTable({
+	'paginate': false,
+	'order': [[1, 'asc']],
+	'columnDefs': [
+		{ 'orderable': false, 'targets': 0 }
+	],
+	'language': JSON.parse(L('datatables_localization')),
+	'scrollY': false,
+	'colReorder': true,
+	'stateSave': true
+});
+
+$("#search").on("keyup", function()
+{
+	var value = $(this).val();
+	if (value === "all")
+	{
+		value = "";
+	}
+	
+	batteriesTable.search(value).draw();
+});
+
+$(document).on('click', '.battery-delete-button', function (e)
 {
 	var objectName = $(e.currentTarget).attr('data-battery-name');
 	var objectId = $(e.currentTarget).attr('data-battery-id');
@@ -33,12 +56,3 @@
 		}
 	});
 });
-
-$('#batteries-table').DataTable({
-	'pageLength': 50,
-	'order': [[1, 'asc']],
-	'columnDefs': [
-		{ 'orderable': false, 'targets': 0 }
-	],
-	'language': JSON.parse(L('datatables_localization'))
-});
--- a/public/viewjs/batteriesoverview.js
+++ b/public/viewjs/batteriesoverview.js
@@ -1,5 +1,47 @@
-$('#batteries-overview-table').DataTable({
-	'pageLength': 50,
-	'order': [[1, 'desc']],
-	'language': JSON.parse(L('datatables_localization'))
+var batteriesOverviewTable = $('#batteries-overview-table').DataTable({
+	'paginate': false,
+	'order': [[2, 'desc']],
+	'columnDefs': [
+		{ 'orderable': false, 'targets': 0 }
+	],
+	'language': JSON.parse(L('datatables_localization')),
+	'scrollY': false,
+	'colReorder': true,
+	'stateSave': true
+});
+
+$("#search").on("keyup", function()
+{
+	var value = $(this).val();
+	if (value === "all")
+	{
+		value = "";
+	}
+	
+	batteriesOverviewTable.search(value).draw();
+});
+
+$(document).on('click', '.track-charge-cycle-button', function(e)
+{
+	var batteryId = $(e.currentTarget).attr('data-battery-id');
+	var batteryName = $(e.currentTarget).attr('data-battery-name');
+	var trackedTime = moment().format('YYYY-MM-DD HH:mm:ss');
+
+	Grocy.Api.Get('batteries/track-charge-cycle/' + batteryId + '?tracked_time=' + trackedTime,
+		function(result)
+		{
+			$('#battery-' + batteryId + '-last-tracked-time').parent().effect('highlight', {}, 500);
+			$('#battery-' + batteryId + '-last-tracked-time').fadeOut(500, function () {
+				$(this).text(trackedTime).fadeIn(500);
+			});
+			$('#battery-' + batteryId + '-last-tracked-time-timeago').attr('datetime', trackedTime);
+			RefreshContextualTimeago();
+
+			toastr.success(L('Tracked charge cylce of battery #1 on #2', batteryName, trackedTime));
+		},
+		function(xhr)
+		{
+			console.error(xhr);
+		}
+	);
 });
--- a/public/viewjs/batteryform.js
+++ b/public/viewjs/batteryform.js
@@ -30,6 +30,26 @@
 	}
 });

+$('#battery-form input').keyup(function(event)
+{
+	Grocy.FrontendHelpers.ValidateForm('battery-form');
+});
+
+$('#battery-form input').keydown(function(event)
+{
+	if (event.keyCode === 13) //Enter
+	{
+		if (document.getElementById('battery-form').checkValidity() === false) //There is at least one validation error
+		{
+			event.preventDefault();
+			return false;
+		}
+		else
+		{
+			$('#save-battery-button').click();
+		}
+	}
+});
+
 $('#name').focus();
-$('#battery-form').validator();
-$('#battery-form').validator('validate');
+Grocy.FrontendHelpers.ValidateForm('battery-form');
--- a/public/viewjs/batterytracking.js
+++ b/public/viewjs/batterytracking.js
@@ -7,18 +7,18 @@
 	Grocy.Api.Get('batteries/get-battery-details/' + jsonForm.battery_id,
 		function (batteryDetails)
 		{
-			Grocy.Api.Get('batteries/track-charge-cycle/' + jsonForm.battery_id + '?tracked_time=' + $('#tracked_time').val(),
+			Grocy.Api.Get('batteries/track-charge-cycle/' + jsonForm.battery_id + '?tracked_time=' + $('#tracked_time').find('input').val(),
 				function(result)
 				{
-					toastr.success(L('Tracked charge cylce of battery #1 on #2', batteryDetails.battery.name, $('#tracked_time').val()));
+					toastr.success(L('Tracked charge cylce of battery #1 on #2', batteryDetails.battery.name, $('#tracked_time').find('input').val()));

 					$('#battery_id').val('');
 					$('#battery_id_text_input').focus();
 					$('#battery_id_text_input').val('');
-					$('#tracked_time').val(moment().format('YYYY-MM-DD HH:mm:ss'));
-					$('#tracked_time').trigger('change');
+					$('#tracked_time').find('input').val(moment().format('YYYY-MM-DD HH:mm:ss'));
+					$('#tracked_time').find('input').trigger('change');
 					$('#battery_id_text_input').trigger('change');
-					$('#batterytracking-form').validator('validate');
+					Grocy.FrontendHelpers.ValidateForm('batterytracking-form');
 				},
 				function(xhr)
 				{
@@ -40,26 +40,7 @@ $('#battery_id').on('change', function(e)
 	if (batteryId)
 	{
 		Grocy.Components.BatteryCard.Refresh(batteryId);
-		$('#tracked_time').focus();
-	}
-});
-
-$('.datetimepicker').datetimepicker(
-{
-	format: 'YYYY-MM-DD HH:mm:ss',
-	showTodayButton: true,
-	calendarWeeks: true,
-	maxDate: moment()
-});
-
-$('#tracked_time').val(moment().format('YYYY-MM-DD HH:mm:ss'));
-$('#tracked_time').trigger('change');
-
-$('#tracked_time').on('focus', function(e)
-{
-	if ($('#battery_id_text_input').val().length === 0)
-	{
-		$('#battery_id_text_input').focus();
+		$('#tracked_time').find('input').focus();
 	}
 });

@@ -71,79 +52,31 @@ $('#battery_id').val('');
 $('#battery_id_text_input').focus();
 $('#battery_id_text_input').val('');
 $('#battery_id_text_input').trigger('change');
+Grocy.FrontendHelpers.ValidateForm('batterytracking-form');

-$('#batterytracking-form').validator();
-$('#batterytracking-form').validator('validate');
+$('#batterytracking-form input').keyup(function (event)
+{
+	Grocy.FrontendHelpers.ValidateForm('batterytracking-form');
+});

 $('#batterytracking-form input').keydown(function(event)
 {
 	if (event.keyCode === 13) //Enter
 	{
-		if ($('#batterytracking-form').validator('validate').has('.has-error').length !== 0) //There is at least one validation error
+		if (document.getElementById('batterytracking-form').checkValidity() === false) //There is at least one validation error
 		{
 			event.preventDefault();
 			return false;
 		}
+		else
+		{
+			$('#save-batterytracking-button').click();
+		}
 	}
 });

-$('#tracked_time').on('change', function(e)
+$('#tracked_time').find('input').on('keypress', function (e)
 {
-	var value = $('#tracked_time').val();
-	var now = new Date();
-	var centuryStart = Number.parseInt(now.getFullYear().toString().substring(0, 2) + '00');
-	var centuryEnd = Number.parseInt(now.getFullYear().toString().substring(0, 2) + '99');
-
-	if (value === 'x' || value === 'X') {
-		value = '29991231';
-	}
-
-	if (value.length === 4 && !(Number.parseInt(value) > centuryStart && Number.parseInt(value) < centuryEnd))
-	{
-		value = (new Date()).getFullYear().toString() + value;
-	}
-
-	if (value.length === 8 && $.isNumeric(value))
-	{
-		value = value.replace(/(\d{4})(\d{2})(\d{2})/, '$1-$2-$3');
-		$('#tracked_time').val(value);
-		$('#batterytracking-form').validator('validate');
-	}
+	Grocy.FrontendHelpers.ValidateForm('batterytracking-form');
 });

-$('#tracked_time').on('keypress', function(e)
-{
-	var element = $(e.target);
-	var value = element.val();
-	var dateObj = moment(element.val(), 'YYYY-MM-DD', true);
-
-	$('.datepicker').datepicker('hide');
-
-	//If input is empty and any arrow key is pressed, set date to today
-	if (value.length === 0 && (e.keyCode === 38 || e.keyCode === 40 || e.keyCode === 37 || e.keyCode === 39))
-	{
-		dateObj = moment(new Date(), 'YYYY-MM-DD', true);
-	}
-
-	if (dateObj.isValid())
-	{
-		if (e.keyCode === 38) //Up
-		{
-			element.val(dateObj.add(-1, 'days').format('YYYY-MM-DD'));
-		}
-		else if (e.keyCode === 40) //Down
-		{
-			element.val(dateObj.add(1, 'days').format('YYYY-MM-DD'));
-		}
-		else if (e.keyCode === 37) //Left
-		{
-			element.val(dateObj.add(-1, 'weeks').format('YYYY-MM-DD'));
-		}
-		else if (e.keyCode === 39) //Right
-		{
-			element.val(dateObj.add(1, 'weeks').format('YYYY-MM-DD'));
-		}
-	}
-
-	$('#batterytracking-form').validator('validate');
-});
--- a/public/viewjs/components/calendarcard.js
+++ b/public/viewjs/components/calendarcard.js
@@ -0,0 +1,40 @@
+$('#calendar').datetimepicker(
+{
+	format: 'L',
+	buttons: {
+		showToday: true,
+		showClose: false
+	},
+	calendarWeeks: true,
+	locale: moment.locale(),
+	icons: {
+		time: 'far fa-clock',
+		date: 'far fa-calendar',
+		up: 'fas fa-arrow-up',
+		down: 'fas fa-arrow-down',
+		previous: 'fas fa-chevron-left',
+		next: 'fas fa-chevron-right',
+		today: 'fas fa-calendar-check',
+		clear: 'far fa-trash-alt',
+		close: 'far fa-times-circle'
+	},
+	keepOpen: true,
+	inline: true,
+	keyBinds: {
+		up: function(widget) { },
+		down: function(widget) { },
+		'control up': function(widget) { },
+		'control down': function(widget) { },
+		left: function(widget) { },
+		right: function(widget) { },
+		pageUp: function(widget) { },
+		pageDown: function(widget) { },
+		enter: function(widget) { },
+		escape: function(widget) { },
+		'control space': function(widget) { },
+		t: function(widget) { },
+		'delete': function(widget) { }
+	}
+});
+
+$('#calendar').datetimepicker('show');
--- a/public/viewjs/components/datepicker.js
+++ b/public/viewjs/components/datepicker.js
@@ -1,92 +0,0 @@
-$(function()
-{
-	$('.datepicker').datepicker(
-	{
-		format: 'yyyy-mm-dd',
-		startDate: '+0d',
-		todayHighlight: true,
-		autoclose: true,
-		calendarWeeks: true,
-		orientation: 'bottom auto',
-		weekStart: 1,
-		showOnFocus: false,
-		language: L('bootstrap_datepicker_locale')
-	});
-	$('.datepicker').trigger('change');
-
-	EmptyElementWhenMatches('#datepicker-timeago', L('timeago_nan'));
-});
-
-$('.datepicker').on('keydown', function(e)
-{
-	if (e.keyCode === 13) //Enter
-	{
-		$('.datepicker').trigger('change');
-	}
-});
-
-$('.datepicker').on('keypress', function(e)
-{
-	var element = $(e.target);
-	var value = element.val();
-	var dateObj = moment(element.val(), 'YYYY-MM-DD', true);
-
-	$('.datepicker').datepicker('hide');
-
-	//If input is empty and any arrow key is pressed, set date to today
-	if (value.length === 0 && (e.keyCode === 38 || e.keyCode === 40 || e.keyCode === 37 || e.keyCode === 39))
-	{
-		dateObj = moment(new Date(), 'YYYY-MM-DD', true);
-	}
-
-	if (dateObj.isValid())
-	{
-		if (e.keyCode === 38) //Up
-		{
-			element.val(dateObj.add(-1, 'days').format('YYYY-MM-DD'));
-		}
-		else if (e.keyCode === 40) //Down
-		{
-			element.val(dateObj.add(1, 'days').format('YYYY-MM-DD'));
-		}
-		else if (e.keyCode === 37) //Left
-		{
-			element.val(dateObj.add(-1, 'weeks').format('YYYY-MM-DD'));
-		}
-		else if (e.keyCode === 39) //Right
-		{
-			element.val(dateObj.add(1, 'weeks').format('YYYY-MM-DD'));
-		}
-	}
-});
-
-$('.datepicker').on('change', function(e)
-{
-	var value = $('.datepicker').val();
-	var now = new Date();
-	var centuryStart = Number.parseInt(now.getFullYear().toString().substring(0, 2) + '00');
-	var centuryEnd = Number.parseInt(now.getFullYear().toString().substring(0, 2) + '99');
-
-	if (value === 'x' || value === 'X') {
-		value = '29991231';
-	}
-
-	if (value.length === 4 && !(Number.parseInt(value) > centuryStart && Number.parseInt(value) < centuryEnd))
-	{
-		value = (new Date()).getFullYear().toString() + value;
-	}
-
-	if (value.length === 8 && $.isNumeric(value))
-	{
-		value = value.replace(/(\d{4})(\d{2})(\d{2})/, '$1-$2-$3');
-		$('.datepicker').val(value);
-	}
-
-	$('#datepicker-timeago').text($.timeago($('.datepicker').val()));
-	EmptyElementWhenMatches('#datepicker-timeago', L('timeago_nan'));
-});
-
-$('#datepicker-button').on('click', function(e)
-{
-	$('.datepicker').datepicker('show');
-});
--- a/public/viewjs/components/datetimepicker.js
+++ b/public/viewjs/components/datetimepicker.js
@@ -1,11 +1,162 @@
-$(function()
+Grocy.Components.DateTimePicker = { };
+
+Grocy.Components.DateTimePicker.GetInputElement = function()
 {
+	return $('.datetimepicker').find('input');
+}
+
+Grocy.Components.DateTimePicker.GetValue = function()
+{
+	return Grocy.Components.DateTimePicker.GetInputElement().val();
+}
+
+Grocy.Components.DateTimePicker.SetValue = function(value)
+{
+	Grocy.Components.DateTimePicker.GetInputElement().val(value);
+	Grocy.Components.DateTimePicker.GetInputElement().trigger('change');
+}
+
+var startDate = null;
+if (Grocy.Components.DateTimePicker.GetInputElement().data('init-with-now') === true)
+{
+	startDate = moment().format(Grocy.Components.DateTimePicker.GetInputElement().data('format'));
+}
+
+var limitDate = moment('2999-12-31 23:59:59');
+if (Grocy.Components.DateTimePicker.GetInputElement().data('limit-end-to-now') === true)
+{
+	limitDate = moment();
+}
+
 $('.datetimepicker').datetimepicker(
 {
-		format: 'YYYY-MM-DD HH:mm:ss',
-		showTodayButton: true,
+	format: Grocy.Components.DateTimePicker.GetInputElement().data('format'),
+	buttons: {
+		showToday: true,
+		showClose: true
+	},
 	calendarWeeks: true,
-		maxDate: moment(),
-		locale: moment.locale('de')
+	maxDate: limitDate,
+	locale: moment.locale(),
+	defaultDate: startDate,
+	useCurrent: false,
+	icons: {
+		time: 'far fa-clock',
+		date: 'far fa-calendar',
+		up: 'fas fa-arrow-up',
+		down: 'fas fa-arrow-down',
+		previous: 'fas fa-chevron-left',
+		next: 'fas fa-chevron-right',
+		today: 'fas fa-calendar-check',
+		clear: 'far fa-trash-alt',
+		close: 'far fa-times-circle'
+	},
+	sideBySide: true,
+	keyBinds: {
+		up: function(widget) { },
+		down: function(widget) { },
+		'control up': function(widget) { },
+		'control down': function(widget) { },
+		left: function(widget) { },
+		right: function(widget) { },
+		pageUp: function(widget) { },
+		pageDown: function(widget) { },
+		enter: function(widget) { },
+		escape: function(widget) { },
+		'control space': function(widget) { },
+		t: function(widget) { },
+		'delete': function(widget) { }
+	}
 });
+
+Grocy.Components.DateTimePicker.GetInputElement().on('keyup', function(e)
+{
+	$('.datetimepicker').datetimepicker('hide');
+
+	var value = Grocy.Components.DateTimePicker.GetValue();
+	var now = new Date();
+	var centuryStart = Number.parseInt(now.getFullYear().toString().substring(0, 2) + '00');
+	var centuryEnd = Number.parseInt(now.getFullYear().toString().substring(0, 2) + '99');
+	var format = Grocy.Components.DateTimePicker.GetInputElement().data('format');
+	var nextInputElement = $(Grocy.Components.DateTimePicker.GetInputElement().data('next-input-selector'));
+
+	//If input is empty and any arrow key is pressed, set date to today
+	if (value.length === 0 && (e.keyCode === 38 || e.keyCode === 40 || e.keyCode === 37 || e.keyCode === 39))
+	{
+		Grocy.Components.DateTimePicker.SetValue(moment(new Date(), format, true).format(format));
+		nextInputElement.focus();
+	}
+	else if (value === 'x' || value === 'X')
+	{
+		Grocy.Components.DateTimePicker.SetValue(moment('2999-12-31 23:59:59').format(format));
+		nextInputElement.focus();
+	}
+	else if (value.length === 4 && !(Number.parseInt(value) > centuryStart && Number.parseInt(value) < centuryEnd))
+	{
+		Grocy.Components.DateTimePicker.SetValue((new Date()).getFullYear().toString() + value);
+		nextInputElement.focus();
+	}
+	else if (value.length === 8 && $.isNumeric(value))
+	{
+		Grocy.Components.DateTimePicker.SetValue(value.replace(/(\d{4})(\d{2})(\d{2})/, '$1-$2-$3'));
+		nextInputElement.focus();
+	}
+	else
+	{
+		var dateObj = moment(value, format, true);
+		if (dateObj.isValid())
+		{
+			if (e.keyCode === 38) //Up
+			{
+				Grocy.Components.DateTimePicker.SetValue(dateObj.add(-1, 'days').format(format));
+			}
+			else if (e.keyCode === 40) //Down
+			{
+				Grocy.Components.DateTimePicker.SetValue(dateObj.add(1, 'days').format(format));
+			}
+			else if (e.keyCode === 37) //Left
+			{
+				Grocy.Components.DateTimePicker.SetValue(dateObj.add(-1, 'weeks').format(format));
+			}
+			else if (e.keyCode === 39) //Right
+			{
+				Grocy.Components.DateTimePicker.SetValue(dateObj.add(1, 'weeks').format(format));
+			}
+		}
+	}
+
+	//Custom validation
+	value = Grocy.Components.DateTimePicker.GetValue();
+	dateObj = moment(value, format, true);
+	var element = Grocy.Components.DateTimePicker.GetInputElement()[0];
+	if (!dateObj.isValid())
+	{
+		element.setCustomValidity("error");
+	}
+	else
+	{
+		if (Grocy.Components.DateTimePicker.GetInputElement().data('limit-end-to-now') === true && dateObj.isAfter(moment()))
+		{
+			element.setCustomValidity("error");
+		}
+		else if (Grocy.Components.DateTimePicker.GetInputElement().data('limit-start-to-now') === true && dateObj.isBefore(moment()))
+		{
+			element.setCustomValidity("error");
+		}
+		else
+		{
+			element.setCustomValidity("");
+		}
+	}
+});
+
+Grocy.Components.DateTimePicker.GetInputElement().on('input', function(e)
+{
+	$('#datetimepicker-timeago').text($.timeago(Grocy.Components.DateTimePicker.GetValue()));
+	EmptyElementWhenMatches('#datetimepicker-timeago', L('timeago_nan'));
+});
+
+$('.datetimepicker').on('update.datetimepicker', function(e)
+{
+	Grocy.Components.DateTimePicker.GetInputElement().trigger('input');
 });
--- a/public/viewjs/components/productpicker.js
+++ b/public/viewjs/components/productpicker.js
@@ -0,0 +1,160 @@
+Grocy.Components.ProductPicker = { };
+
+Grocy.Components.ProductPicker.GetPicker = function ()
+{
+	return $('#product_id');
+}
+
+Grocy.Components.ProductPicker.GetInputElement = function()
+{
+	return $('#product_id_text_input');
+}
+
+Grocy.Components.ProductPicker.GetValue = function()
+{
+	return $('#product_id').val();
+}
+
+Grocy.Components.ProductPicker.SetValue = function(value)
+{
+	Grocy.Components.ProductPicker.GetInputElement().val(value);
+	Grocy.Components.ProductPicker.GetInputElement().trigger('change');
+}
+
+Grocy.Components.ProductPicker.InProductAddWorkflow = function()
+{
+	return typeof GetUriParam('createdproduct') !== "undefined";
+}
+
+Grocy.Components.ProductPicker.InProductModifyWorkflow = function()
+{
+	return typeof GetUriParam('addbarcodetoselection') !== "undefined";
+}
+
+Grocy.Components.ProductPicker.ShowCustomError = function(text)
+{
+	var element = $("#custom-productpicker-error");
+	element.text(text);
+	element.removeClass("d-none");
+}
+
+Grocy.Components.ProductPicker.HideCustomError = function()
+{
+	$("#custom-productpicker-error").addClass("d-none");
+}
+
+$('.combobox').combobox({
+	appendId: '_text_input',
+	bsVersion: '4'
+});
+
+var prefillProduct = GetUriParam('createdproduct');
+var prefillProduct2 = Grocy.Components.ProductPicker.GetPicker().parent().data('prefill-by-name').toString();
+if (!prefillProduct2.isEmpty())
+{
+	prefillProduct = prefillProduct2;
+}
+if (typeof prefillProduct !== "undefined")
+{
+	var possibleOptionElement = $("#product_id option[data-additional-searchdata*='" + prefillProduct + "']").first();
+	if (possibleOptionElement.length === 0)
+	{
+		possibleOptionElement = $("#product_id option:contains('" + prefillProduct + "')").first();
+	}
+
+	if (possibleOptionElement.length > 0)
+	{
+		$('#product_id').val(possibleOptionElement.val());
+		$('#product_id').data('combobox').refresh();
+		$('#product_id').trigger('change');
+
+		var nextInputElement = $(Grocy.Components.ProductPicker.GetPicker().parent().data('next-input-selector').toString());
+		nextInputElement.focus();
+	}
+}
+
+var addBarcode = GetUriParam('addbarcodetoselection');
+if (addBarcode !== undefined)
+{
+	$('#addbarcodetoselection').text(addBarcode);
+	$('#flow-info-addbarcodetoselection').removeClass('d-none');
+	$('#barcode-lookup-disabled-hint').removeClass('d-none');
+}
+
+$('#product_id_text_input').on('change', function(e)
+{
+	var input = $('#product_id_text_input').val().toString();
+	var possibleOptionElement = $("#product_id option[data-additional-searchdata*='" + input + "']").first();
+	
+	if (GetUriParam('addbarcodetoselection') === undefined && possibleOptionElement.length > 0)
+	{
+		$('#product_id').val(possibleOptionElement.val());
+		$('#product_id').data('combobox').refresh();
+		$('#product_id').trigger('change');
+	}
+	else
+	{
+		var optionElement = $("#product_id option:contains('" + input + "')").first();
+		if (input.length > 0 && optionElement.length === 0 && typeof GetUriParam('addbarcodetoselection') === "undefined")
+		{
+			var addProductWorkflowsAdditionalCssClasses = "";
+			if (Grocy.Components.ProductPicker.GetPicker().parent().data('disallow-add-product-workflows').toString() === "true")
+			{
+				addProductWorkflowsAdditionalCssClasses = "d-none";
+			}
+
+			bootbox.dialog({
+				message: L('"#1" could not be resolved to a product, how do you want to proceed?', input),
+				title: L('Create or assign product'),
+				onEscape: function() { },
+				size: 'large',
+				backdrop: true,
+				buttons: {
+					cancel: {
+						label: 'Cancel',
+						className: 'btn-default responsive-button',
+						callback: function() { }
+					},
+					addnewproduct: {
+						label: '<strong>P</strong> ' + L('Add as new product'),
+						className: 'btn-success add-new-product-dialog-button responsive-button ' + addProductWorkflowsAdditionalCssClasses,
+						callback: function()
+						{
+							window.location.href = U('/product/new?prefillname=' + encodeURIComponent(input) + '&returnto=' + encodeURIComponent(window.location.pathname));
+						}
+					},
+					addbarcode: {
+						label: '<strong>B</strong> ' + L('Add as barcode to existing product'),
+						className: 'btn-info add-new-barcode-dialog-button responsive-button',
+						callback: function()
+						{
+							window.location.href = U(window.location.pathname + '?addbarcodetoselection=' + encodeURIComponent(input));
+						}
+					},
+					addnewproductwithbarcode: {
+						label: '<strong>A</strong> ' + L('Add as new product and prefill barcode'),
+						className: 'btn-warning add-new-product-with-barcode-dialog-button responsive-button ' + addProductWorkflowsAdditionalCssClasses,
+						callback: function()
+						{
+							window.location.href = U('/product/new?prefillbarcode=' + encodeURIComponent(input) + '&returnto=' + encodeURIComponent(window.location.pathname));
+						}
+					}
+				}
+			}).on('keypress', function(e)
+			{
+				if (e.key === 'B' || e.key === 'b')
+				{
+					$('.add-new-barcode-dialog-button').not(".d-none").click();
+				}
+				if (e.key === 'p' || e.key === 'P')
+				{
+					$('.add-new-product-dialog-button').not(".d-none").click();
+				}
+				if (e.key === 'a' || e.key === 'A')
+				{
+					$('.add-new-product-with-barcode-dialog-button').not(".d-none").click();
+				}
+			});
+		}
+	}
+});
--- a/public/viewjs/consume.js
+++ b/public/viewjs/consume.js
@@ -19,11 +19,9 @@
 					toastr.success(L('Removed #1 #2 of #3 from stock', jsonForm.amount, productDetails.quantity_unit_stock.name, productDetails.product.name));

 					$('#amount').val(1);
-					$('#product_id').val('');
-					$('#product_id_text_input').focus();
-					$('#product_id_text_input').val('');
-					$('#product_id_text_input').trigger('change');
-					$('#consume-form').validator('validate');
+					Grocy.Components.ProductPicker.SetValue('');
+					Grocy.Components.ProductPicker.GetInputElement().focus();
+					Grocy.FrontendHelpers.ValidateForm('consume-form');
 				},
 				function(xhr)
 				{
@@ -38,7 +36,7 @@
 	);
 });

-$('#product_id').on('change', function(e)
+Grocy.Components.ProductPicker.GetPicker().on('change', function(e)
 {
 	var productId = $(e.target).val();

@@ -50,26 +48,19 @@ $('#product_id').on('change', function(e)
 			function (productDetails)
 			{
 				$('#amount').attr('max', productDetails.stock_amount);
-				$('#consume-form').validator('update');
 				$('#amount_qu_unit').text(productDetails.quantity_unit_stock.name);

 				if ((productDetails.stock_amount || 0) === 0)
 				{
-					$('#product_id').val('');
-					$('#product_id_text_input').val('');
-					$('#product_id_text_input').addClass('has-error');
-					$('#product_id_text_input').parent('.input-group').addClass('has-error');
-					$('#product_id_text_input').closest('.form-group').addClass('has-error');
-					$('#product-error').text(L('This product is not in stock'));
-					$('#product-error').show();
-					$('#product_id_text_input').focus();
+					Grocy.Components.ProductPicker.SetValue('');
+					Grocy.FrontendHelpers.ValidateForm('consume-form');
+					Grocy.Components.ProductPicker.ShowCustomError(L('This product is not in stock'));
+					Grocy.Components.ProductPicker.GetInputElement().focus();
 				}
 				else
 				{
-					$('#product_id_text_input').removeClass('has-error');
-					$('#product_id_text_input').parent('.input-group').removeClass('has-error');
-					$('#product_id_text_input').closest('.form-group').removeClass('has-error');
-					$('#product-error').hide();
+					Grocy.Components.ProductPicker.HideCustomError();
+					Grocy.FrontendHelpers.ValidateForm('consume-form');
 					$('#amount').focus();
 				}
 			},
@@ -81,52 +72,32 @@ $('#product_id').on('change', function(e)
 	}
 });

-$('.combobox').combobox({
-	appendId: '_text_input'
-});
-
-$('#product_id_text_input').on('change', function(e)
-{
-	var input = $('#product_id_text_input').val().toString();
-	var possibleOptionElement = $("#product_id option[data-additional-searchdata*='" + input + "']").first();
-	
-	if (possibleOptionElement.length > 0)
-	{
-		$('#product_id').val(possibleOptionElement.val());
-		$('#product_id').data('combobox').refresh();
-		$('#product_id').trigger('change');
-	}
-});
-
 $('#amount').val(1);
-$('#product_id').val('');
-$('#product_id_text_input').focus();
-$('#product_id_text_input').val('');
-$('#product_id_text_input').trigger('change');
-
-$('#consume-form').validator();
-$('#consume-form').validator('validate');
+Grocy.Components.ProductPicker.GetInputElement().focus();
+Grocy.FrontendHelpers.ValidateForm('consume-form');

 $('#amount').on('focus', function(e)
-{
-	if ($('#product_id_text_input').val().length === 0)
-	{
-		$('#product_id_text_input').focus();
-	}
-	else
 {
 	$(this).select();
-	}
+});
+
+$('#consume-form input').keyup(function (event)
+{
+	Grocy.FrontendHelpers.ValidateForm('consume-form');
 });

 $('#consume-form input').keydown(function(event)
 {
 	if (event.keyCode === 13) //Enter
 	{
-		if ($('#consume-form').validator('validate').has('.has-error').length !== 0) //There is at least one validation error
+		if (document.getElementById('consume-form').checkValidity() === false) //There is at least one validation error
 		{
 			event.preventDefault();
 			return false;
 		}
+		else
+		{
+			$('#save-consume-button').click();
+		}
 	}
 });
--- a/public/viewjs/habitform.js
+++ b/public/viewjs/habitform.js
@@ -30,9 +30,29 @@
 	}
 });

+$('#habit-form input').keyup(function(event)
+{
+	Grocy.FrontendHelpers.ValidateForm('habit-form');
+});
+
+$('#habit-form input').keydown(function(event)
+{
+	if (event.keyCode === 13) //Enter
+	{
+		if (document.getElementById('habit-form').checkValidity() === false) //There is at least one validation error
+		{
+			event.preventDefault();
+			return false;
+		}
+		else
+		{
+			$('#save-habit-button').click();
+		}
+	}
+});
+
 $('#name').focus();
-$('#habit-form').validator();
-$('#habit-form').validator('validate');
+Grocy.FrontendHelpers.ValidateForm('habit-form');

 $('.input-group-habit-period-type').on('change', function(e)
 {
@@ -42,10 +62,10 @@ $('.input-group-habit-period-type').on('change', function(e)
 	if (periodType === 'dynamic-regular')
 	{
 		$('#habit-period-type-info').text(L('This means it is estimated that a new execution of this habit is tracked #1 days after the last was tracked', periodDays.toString()));
-		$('#habit-period-type-info').show();
+		$('#habit-period-type-info').removeClass('d-none');
 	}
 	else
 	{
-		$('#habit-period-type-info').hide();
+		$('#habit-period-type-info').addClass('d-none');
 	}
 });
--- a/public/viewjs/habits.js
+++ b/public/viewjs/habits.js
@@ -1,4 +1,27 @@
-$(document).on('click', '.habit-delete-button', function(e)
+var habitsTable  = $('#habits-table').DataTable({
+	'paginate': false,
+	'order': [[1, 'asc']],
+	'columnDefs': [
+		{ 'orderable': false, 'targets': 0 }
+	],
+	'language': JSON.parse(L('datatables_localization')),
+	'scrollY': false,
+	'colReorder': true,
+	'stateSave': true
+});
+
+$("#search").on("keyup", function()
+{
+	var value = $(this).val();
+	if (value === "all")
+	{
+		value = "";
+	}
+	
+	habitsTable.search(value).draw();
+});
+
+$(document).on('click', '.habit-delete-button', function (e)
 {
 	var objectName = $(e.currentTarget).attr('data-habit-name');
 	var objectId = $(e.currentTarget).attr('data-habit-id');
@@ -33,12 +56,3 @@
 		}
 	});
 });
-
-$('#habits-table').DataTable({
-	'pageLength': 50,
-	'order': [[1, 'asc']],
-	'columnDefs': [
-		{ 'orderable': false, 'targets': 0 }
-	],
-	'language': JSON.parse(L('datatables_localization'))
-});
--- a/public/viewjs/habitsoverview.js
+++ b/public/viewjs/habitsoverview.js
@@ -1,5 +1,47 @@
-$('#habits-overview-table').DataTable({
-	'pageLength': 50,
-	'order': [[1, 'desc']],
-	'language': JSON.parse(L('datatables_localization'))
+var habitsOverviewTable = $('#habits-overview-table').DataTable({
+	'paginate': false,
+	'order': [[2, 'desc']],
+	'columnDefs': [
+		{ 'orderable': false, 'targets': 0 }
+	],
+	'language': JSON.parse(L('datatables_localization')),
+	'scrollY': false,
+	'colReorder': true,
+	'stateSave': true
+});
+
+$("#search").on("keyup", function()
+{
+	var value = $(this).val();
+	if (value === "all")
+	{
+		value = "";
+	}
+	
+	habitsOverviewTable.search(value).draw();
+});
+
+$(document).on('click', '.track-habit-button', function(e)
+{
+	var habitId = $(e.currentTarget).attr('data-habit-id');
+	var habitName = $(e.currentTarget).attr('data-habit-name');
+	var trackedTime = moment().format('YYYY-MM-DD HH:mm:ss');
+
+	Grocy.Api.Get('habits/track-habit-execution/' + habitId + '?tracked_time=' + trackedTime,
+		function(result)
+		{
+			$('#habit-' + habitId + '-last-tracked-time').parent().effect('highlight', {}, 500);
+			$('#habit-' + habitId + '-last-tracked-time').fadeOut(500, function () {
+				$(this).text(trackedTime).fadeIn(500);
+			});
+			$('#habit-' + habitId + '-last-tracked-time-timeago').attr('datetime', trackedTime);
+			RefreshContextualTimeago();
+
+			toastr.success(L('Tracked execution of habit #1 on #2', habitName, trackedTime));
+		},
+		function(xhr)
+		{
+			console.error(xhr);
+		}
+	);
 });
--- a/public/viewjs/habittracking.js
+++ b/public/viewjs/habittracking.js
@@ -7,18 +7,17 @@
 	Grocy.Api.Get('habits/get-habit-details/' + jsonForm.habit_id,
 		function (habitDetails)
 		{
-			Grocy.Api.Get('habits/track-habit-execution/' + jsonForm.habit_id + '?tracked_time=' + $('#tracked_time').val(),
+			Grocy.Api.Get('habits/track-habit-execution/' + jsonForm.habit_id + '?tracked_time=' + Grocy.Components.DateTimePicker.GetValue(),
 				function(result)
 				{
-					toastr.success(L('Tracked execution of habit #1 on #2', habitDetails.habit.name, $('#tracked_time').val()));
+					toastr.success(L('Tracked execution of habit #1 on #2', habitDetails.habit.name, Grocy.Components.DateTimePicker.GetValue()));

 					$('#habit_id').val('');
 					$('#habit_id_text_input').focus();
 					$('#habit_id_text_input').val('');
-					$('#tracked_time').val(moment().format('YYYY-MM-DD HH:mm:ss'));
-					$('#tracked_time').trigger('change');
+					Grocy.Components.DateTimePicker.SetValue(moment().format('YYYY-MM-DD HH:mm:ss'));
 					$('#habit_id_text_input').trigger('change');
-					$('#habittracking-form').validator('validate');
+					Grocy.FrontendHelpers.ValidateForm('habittracking-form');
 				},
 				function(xhr)
 				{
@@ -40,18 +39,7 @@ $('#habit_id').on('change', function(e)
 	if (habitId)
 	{
 		Grocy.Components.HabitCard.Refresh(habitId);
-		$('#tracked_time').focus();
-	}
-});
-
-$('#tracked_time').val(moment().format('YYYY-MM-DD HH:mm:ss'));
-$('#tracked_time').trigger('change');
-
-$('#tracked_time').on('focus', function(e)
-{
-	if ($('#habit_id_text_input').val().length === 0)
-	{
-		$('#habit_id_text_input').focus();
+		Grocy.Components.DateTimePicker.GetInputElement().focus();
 	}
 });

@@ -59,27 +47,32 @@ $('.combobox').combobox({
 	appendId: '_text_input'
 });

-$('#habit_id').val('');
 $('#habit_id_text_input').focus();
-$('#habit_id_text_input').val('');
 $('#habit_id_text_input').trigger('change');
+Grocy.FrontendHelpers.ValidateForm('habittracking-form');

-$('#habittracking-form').validator();
-$('#habittracking-form').validator('validate');
+$('#habittracking-form input').keyup(function (event)
+{
+	Grocy.FrontendHelpers.ValidateForm('habittracking-form');
+});

 $('#habittracking-form input').keydown(function(event)
 {
 	if (event.keyCode === 13) //Enter
 	{
-		if ($('#habittracking-form').validator('validate').has('.has-error').length !== 0) //There is at least one validation error
+		if (document.getElementById('habittracking-form').checkValidity() === false) //There is at least one validation error
 		{
 			event.preventDefault();
 			return false;
 		}
+		else
+		{
+			$('#save-habittracking-button').click();
+		}
 	}
 });

-$('#tracked_time').on('keypress', function(e)
+Grocy.Components.DateTimePicker.GetInputElement().on('keypress', function(e)
 {
-	$('#habittracking-form').validator('validate');
+	Grocy.FrontendHelpers.ValidateForm('habittracking-form');
 });
--- a/public/viewjs/inventory.js
+++ b/public/viewjs/inventory.js
@@ -7,7 +7,7 @@
 	Grocy.Api.Get('stock/get-product-details/' + jsonForm.product_id,
 		function (productDetails)
 		{
-			Grocy.Api.Get('stock/inventory-product/' + jsonForm.product_id + '/' + jsonForm.new_amount + '?bestbeforedate=' + $('#best_before_date').val(),
+			Grocy.Api.Get('stock/inventory-product/' + jsonForm.product_id + '/' + jsonForm.new_amount + '?bestbeforedate=' + Grocy.Components.DateTimePicker.GetValue(),
 				function(result)
 				{
 					var addBarcode = GetUriParam('addbarcodetoselection');
@@ -40,14 +40,12 @@
 					}
 					else
 					{
-						$('#inventory-change-info').hide();
+						$('#inventory-change-info').addClass('d-none');
 						$('#new_amount').val('');
-						$('#best_before_date').val('');
-						$('#product_id').val('');
-						$('#product_id_text_input').focus();
-						$('#product_id_text_input').val('');
-						$('#product_id_text_input').trigger('change');
-						$('#inventory-form').validator('validate');
+						Grocy.Components.DateTimePicker.SetValue('');
+						Grocy.Components.ProductPicker.SetValue('');
+						Grocy.Components.ProductPicker.GetInputElement().focus();
+						Grocy.FrontendHelpers.ValidateForm('inventory-form');
 					}
 				},
 				function(xhr)
@@ -63,7 +61,7 @@
 	);
 });

-$('#product_id').on('change', function(e)
+Grocy.Components.ProductPicker.GetPicker().on('change', function(e)
 {
 	var productId = $(e.target).val();

@@ -87,121 +85,23 @@ $('#product_id').on('change', function(e)
 	}
 });

-$('.combobox').combobox({
-	appendId: '_text_input'
-});
+$('#new_amount').val('');
+Grocy.FrontendHelpers.ValidateForm('inventory-form');

-$('#product_id_text_input').on('change', function(e)
+if (Grocy.Components.ProductPicker.InProductAddWorkflow() === false)
 {
-	var input = $('#product_id_text_input').val().toString();
-	var possibleOptionElement = $("#product_id option[data-additional-searchdata*='" + input + "']").first();
-	
-	if (GetUriParam('addbarcodetoselection') === undefined && possibleOptionElement.length > 0)
-	{
-		$('#product_id').val(possibleOptionElement.val());
-		$('#product_id').data('combobox').refresh();
-		$('#product_id').trigger('change');
+	Grocy.Components.ProductPicker.GetInputElement().focus();
 }
 else
 {
-		var optionElement = $("#product_id option:contains('" + input + "')").first();
-		if (input.length > 0 && optionElement.length === 0 && GetUriParam('addbarcodetoselection') === undefined	)
-		{
-			bootbox.dialog({
-				message: L('#1 could not be resolved to a product, how do you want to proceed?', input),
-				title: L('Create or assign product'),
-				onEscape: function() { },
-				size: 'large',
-				backdrop: true,
-				buttons: {
-					cancel: {
-						label: L('Cancel'),
-						className: 'btn-default',
-						callback: function() { }
-					},
-					addnewproduct: {
-						label: '<strong>P</strong> ' + L('Add as new product'),
-						className: 'btn-success add-new-product-dialog-button',
-						callback: function()
-						{
-							window.location.href = U('/product/new?prefillname=' + encodeURIComponent(input) + '&returnto=' + encodeURIComponent(window.location.pathname));
+	Grocy.Components.ProductPicker.GetPicker().trigger('change');
 }
-					},
-					addbarcode: {
-						label: '<strong>B</strong> ' + L('Add as barcode to existing product'),
-						className: 'btn-info add-new-barcode-dialog-button',
-						callback: function()
-						{
-							window.location.href = U('/inventory?addbarcodetoselection=' + encodeURIComponent(input));
-						}
-					},
-					addnewproductwithbarcode: {
-						label: '<strong>A</strong> ' + L('Add as new product and prefill barcode'),
-						className: 'btn-warning add-new-product-with-barcode-dialog-button',
-						callback: function()
-						{
-							window.location.href = U('/product/new?prefillbarcode=' + encodeURIComponent(input) + '&returnto=' + encodeURIComponent(window.location.pathname));
-						}
-					}
-				}
-			}).on('keypress', function(e)
-			{
-				if (e.key === 'B' || e.key === 'b')
-				{
-					$('.add-new-barcode-dialog-button').click();
-				}
-				if (e.key === 'p' || e.key === 'P')
-				{
-					$('.add-new-product-dialog-button').click();
-				}
-				if (e.key === 'a' || e.key === 'A')
-				{
-					$('.add-new-product-with-barcode-dialog-button').click();
-				}
-			});
-		}
-	}
-});
-
-$('#new_amount').val('');
-$('#best_before_date').val('');
-$('#product_id').val('');
-$('#product_id_text_input').focus();
-$('#product_id_text_input').val('');
-$('#product_id_text_input').trigger('change');
-
-$('#inventory-form').validator({
-	custom: {
-		'isodate': function($el)
-		{
-			if ($el.val().length !== 0 && !moment($el.val(), 'YYYY-MM-DD', true).isValid())
-			{
-				return 'Wrong date format, needs to be YYYY-MM-DD';
-			}
-			else if (moment($el.val()).isValid())
-			{
-				if (moment($el.val()).isBefore(moment(), 'day'))
-				{
-					return 'This value cannot be before today.';
-				}
-			}
-		},
-		'notequal': function($el)
-		{
-			if ($el.val().length !== 0 && $el.val().toString() === $el.attr('not-equal').toString())
-			{
-				return 'This value cannot be equal to ' + $el.attr('not-equal').toString();
-			}
-		}
-	}
-});
-$('#inventory-form').validator('validate');

 $('#new_amount').on('focus', function(e)
 {
-	if ($('#product_id_text_input').val().length === 0)
+	if (Grocy.Components.ProductPicker.GetValue().length === 0)
 	{
-		$('#product_id_text_input').focus();
+		Grocy.Components.ProductPicker.GetInputElement().focus();
 	}
 	else
 	{
@@ -209,106 +109,74 @@ $('#new_amount').on('focus', function(e)
 	}
 });

+$('#inventory-form input').keyup(function (event)
+{
+	Grocy.FrontendHelpers.ValidateForm('inventory-form');
+});
+
 $('#inventory-form input').keydown(function(event)
 {
 	if (event.keyCode === 13) //Enter
 	{
-		if ($('#inventory-form').validator('validate').has('.has-error').length !== 0) //There is at least one validation error
+		if (document.getElementById('inventory-form').checkValidity() === false) //There is at least one validation error
 		{
 			event.preventDefault();
 			return false;
 		}
+		else
+		{
+			$('#save-inventory-button').click();
+		}
 	}
 });

-var prefillProduct = GetUriParam('createdproduct');
-if (prefillProduct !== undefined)
-{
-	var possibleOptionElement = $("#product_id option[data-additional-searchdata*='" + prefillProduct + "']").first();
-	if (possibleOptionElement.length === 0)
-	{
-		possibleOptionElement = $("#product_id option:contains('" + prefillProduct + "')").first();
-	}
-
-	if (possibleOptionElement.length > 0)
-	{
-		$('#product_id').val(possibleOptionElement.val());
-		$('#product_id').data('combobox').refresh();
-		$('#product_id').trigger('change');
-		$('#new_amount').focus();
-	}
-}
-
-var addBarcode = GetUriParam('addbarcodetoselection');
-if (addBarcode !== undefined)
-{
-	$('#addbarcodetoselection').text(addBarcode);
-	$('#flow-info-addbarcodetoselection').removeClass('hide');
-	$('#barcode-lookup-disabled-hint').removeClass('hide');
-}
-
 $('#new_amount').on('keypress', function(e)
 {
 	$('#new_amount').trigger('change');
 });
 	
-$('#best_before_date').on('change', function(e)
+Grocy.Components.DateTimePicker.GetInputElement().on('change', function(e)
 {
-	$('#inventory-form').validator('validate');
+	Grocy.FrontendHelpers.ValidateForm('inventory-form');
 });

-$('#best_before_date').on('keypress', function(e)
+Grocy.Components.DateTimePicker.GetInputElement().on('keypress', function(e)
 {
-	$('#inventory-form').validator('validate');
+	Grocy.FrontendHelpers.ValidateForm('inventory-form');
 });

-$('#best_before_date').on('keydown', function(e)
+$('#new_amount').on('keyup', function(e)
 {
-	if (e.keyCode === 13) //Enter
-	{
-		$('#best_before_date').trigger('change');
-	}
-});	
-
-$('#new_amount').on('change', function(e)
-{
-	if ($('#product_id').parent().hasClass('has-error'))
-	{
-		$('#inventory-change-info').hide();
-		return;
-	}
-
-	var productId = $('#product_id').val();
-	var newAmount = $('#new_amount').val();
+	var productId = Grocy.Components.ProductPicker.GetValue();
+	var newAmount = parseInt($('#new_amount').val());
 	
 	if (productId)
 	{
 		Grocy.Api.Get('stock/get-product-details/' + productId,
 			function(productDetails)
 			{
-				var productStockAmount = productDetails.stock_amount || '0';
+				var productStockAmount = parseInt(productDetails.stock_amount || '0');
 				
 				if (newAmount > productStockAmount)
 				{
 					var amountToAdd = newAmount - productDetails.stock_amount;
 					$('#inventory-change-info').text(L('This means #1 will be added to stock', amountToAdd.toString() + ' ' + productDetails.quantity_unit_stock.name));
-					$('#inventory-change-info').show();
-					$('#best_before_date').attr('required', 'required');
+					$('#inventory-change-info').removeClass('d-none');
+					Grocy.Components.DateTimePicker.GetInputElement().attr('required', '');
 				}
 				else if (newAmount < productStockAmount)
 				{
 					var amountToRemove = productStockAmount - newAmount;
 					$('#inventory-change-info').text(L('This means #1 will be removed from stock', amountToRemove.toString() + ' ' + productDetails.quantity_unit_stock.name));
-					$('#inventory-change-info').show();
-					$('#best_before_date').removeAttr('required');
+					$('#inventory-change-info').removeClass('d-none');
+					Grocy.Components.DateTimePicker.GetInputElement().removeAttr('required');
 				}
 				else
 				{
-					$('#inventory-change-info').hide();
+					$('#inventory-change-info').addClass('d-none');
 				}

-				$('#inventory-form').validator('update');
-				$('#inventory-form').validator('validate');
+				Grocy.FrontendHelpers.ValidateForm('inventory-form');
 			},
 			function(xhr)
 			{
--- a/public/viewjs/locationform.js
+++ b/public/viewjs/locationform.js
@@ -30,6 +30,26 @@
 	}
 });

+$('#location-form input').keyup(function (event)
+{
+	Grocy.FrontendHelpers.ValidateForm('location-form');
+});
+
+$('#location-form input').keydown(function (event)
+{
+	if (event.keyCode === 13) //Enter
+	{
+		if (document.getElementById('location-form').checkValidity() === false) //There is at least one validation error
+		{
+			event.preventDefault();
+			return false;
+		}
+		else
+		{
+			$('#save-location-button').click();
+		}
+	}
+});
+
 $('#name').focus();
-$('#location-form').validator();
-$('#location-form').validator('validate');
+Grocy.FrontendHelpers.ValidateForm('location-form');
--- a/public/viewjs/locations.js
+++ b/public/viewjs/locations.js
@@ -1,4 +1,27 @@
-$(document).on('click', '.location-delete-button', function(e)
+var locationsTable = $('#locations-table').DataTable({
+	'paginate': false,
+	'order': [[1, 'asc']],
+	'columnDefs': [
+		{ 'orderable': false, 'targets': 0 }
+	],
+	'language': JSON.parse(L('datatables_localization')),
+	'scrollY': false,
+	'colReorder': true,
+	'stateSave': true
+});
+
+$("#search").on("keyup", function()
+{
+	var value = $(this).val();
+	if (value === "all")
+	{
+		value = "";
+	}
+	
+	locationsTable.search(value).draw();
+});
+
+$(document).on('click', '.location-delete-button', function (e)
 {
 	var objectName = $(e.currentTarget).attr('data-location-name');
 	var objectId = $(e.currentTarget).attr('data-location-id');
@@ -33,12 +56,3 @@
 		}
 	});
 });
-
-$('#locations-table').DataTable({
-	'pageLength': 50,
-	'order': [[1, 'asc']],
-	'columnDefs': [
-		{ 'orderable': false, 'targets': 0 }
-	],
-	'language': JSON.parse(L('datatables_localization'))
-});
--- a/public/viewjs/login.js
+++ b/public/viewjs/login.js
@@ -1,9 +1,7 @@
-$('.logout-button').hide();
-
-$('#username').focus();
+$('#username').focus();

 if (GetUriParam('invalid') === 'true')
 {
 	$('#login-error').text(L('Invalid credentials, please try again'));
-	$('#login-error').show();
+	$('#login-error').removeClass('d-none');
 }
--- a/public/viewjs/manageapikeys.js
+++ b/public/viewjs/manageapikeys.js
@@ -1,4 +1,33 @@
-$(document).on('click', '.apikey-delete-button', function(e)
+var apiKeysTable = $('#apikeys-table').DataTable({
+	'paginate': false,
+	'order': [[4, 'desc']],
+	'columnDefs': [
+		{ 'orderable': false, 'targets': 0 }
+	],
+	'language': JSON.parse(L('datatables_localization')),
+	'scrollY': false,
+	'colReorder': true,
+	'stateSave': true
+});
+
+var createdApiKeyId = GetUriParam('CreatedApiKeyId');
+if (createdApiKeyId !== undefined)
+{
+	$('#apiKeyRow_' + createdApiKeyId).effect('highlight', {}, 3000);
+}
+
+$("#search").on("keyup", function()
+{
+	var value = $(this).val();
+	if (value === "all")
+	{
+		value = "";
+	}
+	
+	apiKeysTable.search(value).draw();
+});
+
+$(document).on('click', '.apikey-delete-button', function (e)
 {
 	var objectName = $(e.currentTarget).attr('data-apikey-apikey');
 	var objectId = $(e.currentTarget).attr('data-apikey-id');
@@ -33,18 +62,3 @@
 		}
 	});
 });
-
-$('#apikeys-table').DataTable({
-	'pageLength': 50,
-	'order': [[4, 'desc']],
-	'columnDefs': [
-		{ 'orderable': false, 'targets': 0 }
-	],
-	'language': JSON.parse(L('datatables_localization'))
-});
-
-var createdApiKeyId = GetUriParam('CreatedApiKeyId');
-if (createdApiKeyId !== undefined)
-{
-	$('#apiKeyRow_' + createdApiKeyId).effect('highlight', { }, 3000);
-}
--- a/public/viewjs/productform.js
+++ b/public/viewjs/productform.js
@@ -82,15 +82,35 @@ $('.input-group-qu').on('change', function(e)
 	if (factor > 1)
 	{
 		$('#qu-conversion-info').text(L('This means 1 #1 purchased will be converted into #2 #3 in stock', $("#qu_id_purchase option:selected").text(), (1 * factor).toString(), $("#qu_id_stock option:selected").text()));
-		$('#qu-conversion-info').show();
+		$('#qu-conversion-info').removeClass('d-none');
 	}
 	else
 	{
-		$('#qu-conversion-info').hide();
+		$('#qu-conversion-info').addClass('d-none');
+	}
+});
+
+$('#product-form input').keyup(function(event)
+{
+	Grocy.FrontendHelpers.ValidateForm('product-form');
+});
+
+$('#product-form input').keydown(function(event)
+{
+	if (event.keyCode === 13) //Enter
+	{
+		if (document.getElementById('product-form').checkValidity() === false) //There is at least one validation error
+		{
+			event.preventDefault();
+			return false;
+		}
+		else
+		{
+			$('#save-product-button').click();
+		}
 	}
 });

 $('#name').focus();
-$('#product-form').validator();
-$('#product-form').validator('validate');
 $('.input-group-qu').trigger('change');
+Grocy.FrontendHelpers.ValidateForm('product-form');
--- a/public/viewjs/products.js
+++ b/public/viewjs/products.js
@@ -1,4 +1,27 @@
-$(document).on('click', '.product-delete-button', function(e)
+var productsTable = $('#products-table').DataTable({
+	'paginate': false,
+	'order': [[1, 'asc']],
+	'columnDefs': [
+		{ 'orderable': false, 'targets': 0 }
+	],
+	'language': JSON.parse(L('datatables_localization')),
+	'scrollY': false,
+	'colReorder': true,
+	'stateSave': true
+});
+
+$("#search").on("keyup", function()
+{
+	var value = $(this).val();
+	if (value === "all")
+	{
+		value = "";
+	}
+	
+	productsTable.search(value).draw();
+});
+
+$(document).on('click', '.product-delete-button', function (e)
 {
 	var objectName = $(e.currentTarget).attr('data-product-name');
 	var objectId = $(e.currentTarget).attr('data-product-id');
@@ -33,12 +56,3 @@
 		}
 	});
 });
-
-$('#products-table').DataTable({
-	'pageLength': 50,
-	'order': [[1, 'asc']],
-	'columnDefs': [
-		{ 'orderable': false, 'targets': 0 }
-	],
-	'language': JSON.parse(L('datatables_localization'))
-});
--- a/public/viewjs/purchase.js
+++ b/public/viewjs/purchase.js
@@ -9,7 +9,7 @@
 		{
 			var amount = jsonForm.amount * productDetails.product.qu_factor_purchase_to_stock;

-			Grocy.Api.Get('stock/add-product/' + jsonForm.product_id + '/' + amount + '?bestbeforedate=' + $('#best_before_date').val(),
+			Grocy.Api.Get('stock/add-product/' + jsonForm.product_id + '/' + amount + '?bestbeforedate=' + Grocy.Components.DateTimePicker.GetValue(),
 				function(result)
 				{
 					var addBarcode = GetUriParam('addbarcodetoselection');
@@ -43,12 +43,10 @@
 					else
 					{
 						$('#amount').val(0);
-						$('#best_before_date').val('');
-						$('#product_id').val('');
-						$('#product_id_text_input').focus();
-						$('#product_id_text_input').val('');
-						$('#product_id_text_input').trigger('change');
-						$('#purchase-form').validator('validate');
+						Grocy.Components.DateTimePicker.SetValue('');
+						Grocy.Components.ProductPicker.SetValue('');
+						Grocy.Components.ProductPicker.GetInputElement().focus();
+						Grocy.FrontendHelpers.ValidateForm('purchase-form');
 					}
 				},
 				function(xhr)
@@ -64,7 +62,7 @@
 	);
 });

-$('#product_id').on('change', function(e)
+Grocy.Components.ProductPicker.GetPicker().on('change', function(e)
 {
 	var productId = $(e.target).val();

@@ -79,13 +77,12 @@ $('#product_id').on('change', function(e)
 				
 				if (productDetails.product.default_best_before_days.toString() !== '0')
 				{
-					$('#best_before_date').val(moment().add(productDetails.product.default_best_before_days, 'days').format('YYYY-MM-DD'));
-					$('#best_before_date').trigger('change');
+					Grocy.Components.DateTimePicker.SetValue(moment().add(productDetails.product.default_best_before_days, 'days').format('YYYY-MM-DD'));
 					$('#amount').focus();
 				}
 				else
 				{
-					$('#best_before_date').focus();
+					Grocy.Components.DateTimePicker.GetInputElement().focus();
 				}
 			},
 			function(xhr)
@@ -96,122 +93,23 @@ $('#product_id').on('change', function(e)
 	}
 });

-$('.combobox').combobox({
-	appendId: '_text_input'
-});
+$('#amount').val(0);
+Grocy.FrontendHelpers.ValidateForm('purchase-form');

-$('#product_id_text_input').on('change', function(e)
+if (Grocy.Components.ProductPicker.InProductAddWorkflow() === false)
 {
-	var input = $('#product_id_text_input').val().toString();
-	var possibleOptionElement = $("#product_id option[data-additional-searchdata*='" + input + "']").first();
-	
-	if (GetUriParam('addbarcodetoselection') === undefined && possibleOptionElement.length > 0)
-	{
-		$('#product_id').val(possibleOptionElement.val());
-		$('#product_id').data('combobox').refresh();
-		$('#product_id').trigger('change');
+	Grocy.Components.ProductPicker.GetInputElement().focus();
 }
 else
 {
-		var optionElement = $("#product_id option:contains('" + input + "')").first();
-		if (input.length > 0 && optionElement.length === 0 && GetUriParam('addbarcodetoselection') === undefined	)
-		{
-			bootbox.dialog({
-				message: L('"#1" could not be resolved to a product, how do you want to proceed?', input),
-				title: L('Create or assign product'),
-				onEscape: function() { },
-				size: 'large',
-				backdrop: true,
-				buttons: {
-					cancel: {
-						label: 'Cancel',
-						className: 'btn-default',
-						callback: function() { }
-					},
-					addnewproduct: {
-						label: '<strong>P</strong> ' + L('Add as new product'),
-						className: 'btn-success add-new-product-dialog-button',
-						callback: function()
-						{
-							window.location.href = U('/product/new?prefillname=' + encodeURIComponent(input) + '&returnto=' + encodeURIComponent(window.location.pathname));
+	Grocy.Components.ProductPicker.GetPicker().trigger('change');
 }
-					},
-					addbarcode: {
-						label: '<strong>B</strong> ' + L('Add as barcode to existing product'),
-						className: 'btn-info add-new-barcode-dialog-button',
-						callback: function()
-						{
-							window.location.href = U('/purchase?addbarcodetoselection=' + encodeURIComponent(input));
-						}
-					},
-					addnewproductwithbarcode: {
-						label: '<strong>A</strong> ' + L('Add as new product and prefill barcode'),
-						className: 'btn-warning add-new-product-with-barcode-dialog-button',
-						callback: function()
-						{
-							window.location.href = U('/product/new?prefillbarcode=' + encodeURIComponent(input) + '&returnto=' + encodeURIComponent(window.location.pathname));
-						}
-					}
-				}
-			}).on('keypress', function(e)
-			{
-				if (e.key === 'B' || e.key === 'b')
-				{
-					$('.add-new-barcode-dialog-button').click();
-				}
-				if (e.key === 'p' || e.key === 'P')
-				{
-					$('.add-new-product-dialog-button').click();
-				}
-				if (e.key === 'a' || e.key === 'A')
-				{
-					$('.add-new-product-with-barcode-dialog-button').click();
-				}
-			});
-		}
-	}
-});
-
-$('#amount').val(0);
-$('#best_before_date').val('');
-$('#product_id').val('');
-$('#product_id_text_input').focus();
-$('#product_id_text_input').val('');
-$('#product_id_text_input').trigger('change');
-
-$('#purchase-form').validator({
-	custom: {
-		'isodate': function($el)
-		{
-			if ($el.val().length !== 0 && !moment($el.val(), 'YYYY-MM-DD', true).isValid())
-			{
-				return 'Wrong date format, needs to be YYYY-MM-DD';
-			}
-			else if (moment($el.val()).isValid())
-			{
-				if (moment($el.val()).isBefore(moment(), 'day'))
-				{
-					return 'This value cannot be before today.';
-				}
-			}
-		}
-	}
-});
-$('#purchase-form').validator('validate');
-
-$('#best_before_date').on('focus', function(e)
-{
-	if ($('#product_id_text_input').val().length === 0)
-	{
-		$('#product_id_text_input').focus();
-	}
-});

 $('#amount').on('focus', function(e)
 {
-	if ($('#product_id_text_input').val().length === 0)
+	if (Grocy.Components.ProductPicker.GetValue().length === 0)
 	{
-		$('#product_id_text_input').focus();
+		Grocy.Components.ProductPicker.GetInputElement().focus();
 	}
 	else
 	{
@@ -219,50 +117,38 @@ $('#amount').on('focus', function(e)
 	}
 });

+$('#purchase-form input').keyup(function(event)
+{
+	Grocy.FrontendHelpers.ValidateForm('purchase-form');
+});
+
 $('#purchase-form input').keydown(function(event)
 {
 	if (event.keyCode === 13) //Enter
 	{
-		if ($('#purchase-form').validator('validate').has('.has-error').length !== 0) //There is at least one validation error
+		if (document.getElementById('purchase-form').checkValidity() === false) //There is at least one validation error
 		{
 			event.preventDefault();
 			return false;
 		}
+		else
+		{
+			$('#save-purchase-button').click();
+		}
 	}
 });

-var prefillProduct = GetUriParam('createdproduct');
-if (prefillProduct !== undefined)
+Grocy.Components.DateTimePicker.GetInputElement().on('change', function(e)
 {
-	var possibleOptionElement = $("#product_id option[data-additional-searchdata*='" + prefillProduct + "']").first();
-	if (possibleOptionElement.length === 0)
-	{
-		possibleOptionElement = $("#product_id option:contains('" + prefillProduct + "')").first();
-	}
-
-	if (possibleOptionElement.length > 0)
-	{
-		$('#product_id').val(possibleOptionElement.val());
-		$('#product_id').data('combobox').refresh();
-		$('#product_id').trigger('change');
-		$('#best_before_date').focus();
-	}
-}
-
-var addBarcode = GetUriParam('addbarcodetoselection');
-if (addBarcode !== undefined)
-{
-	$('#addbarcodetoselection').text(addBarcode);
-	$('#flow-info-addbarcodetoselection').removeClass('hide');
-	$('#barcode-lookup-disabled-hint').removeClass('hide');
-}
-
-$('#best_before_date').on('change', function(e)
-{
-	$('#purchase-form').validator('validate');
+	Grocy.FrontendHelpers.ValidateForm('purchase-form');
 });

-$('#best_before_date').on('keypress', function(e)
+Grocy.Components.DateTimePicker.GetInputElement().on('keypress', function(e)
 {
-	$('#purchase-form').validator('validate');
+	Grocy.FrontendHelpers.ValidateForm('purchase-form');
+});
+
+$('#amount').on('change', function (e)
+{
+	Grocy.FrontendHelpers.ValidateForm('purchase-form');
 });
--- a/public/viewjs/quantityunitform.js
+++ b/public/viewjs/quantityunitform.js
@@ -30,6 +30,26 @@
 	}
 });

+$('#quantityunit-form input').keyup(function(event)
+{
+	Grocy.FrontendHelpers.ValidateForm('quantityunit-form');
+});
+
+$('#quantityunit-form input').keydown(function(event)
+{
+	if (event.keyCode === 13) //Enter
+	{
+		if (document.getElementById('quantityunit-form').checkValidity() === false) //There is at least one validation error
+		{
+			event.preventDefault();
+			return false;
+		}
+		else
+		{
+			$('#save-quantityunit-button').click();
+		}
+	}
+});
+
 $('#name').focus();
-$('#quantityunit-form').validator();
-$('#quantityunit-form').validator('validate');
+Grocy.FrontendHelpers.ValidateForm('quantityunit-form');
--- a/public/viewjs/quantityunits.js
+++ b/public/viewjs/quantityunits.js
@@ -1,4 +1,27 @@
-$(document).on('click', '.quantityunit-delete-button', function(e)
+var quantityUnitsTable = $('#quantityunits-table').DataTable({
+	'paginate': false,
+	'order': [[1, 'asc']],
+	'columnDefs': [
+		{ 'orderable': false, 'targets': 0 }
+	],
+	'language': JSON.parse(L('datatables_localization')),
+	'scrollY': false,
+	'colReorder': true,
+	'stateSave': true
+});
+
+$("#search").on("keyup", function()
+{
+	var value = $(this).val();
+	if (value === "all")
+	{
+		value = "";
+	}
+	
+	quantityUnitsTable.search(value).draw();
+});
+
+$(document).on('click', '.quantityunit-delete-button', function (e)
 {
 	var objectName = $(e.currentTarget).attr('data-quantityunit-name');
 	var objectId = $(e.currentTarget).attr('data-quantityunit-id');
@@ -33,12 +56,3 @@
 		}
 	});
 });
-
-$('#quantityunits-table').DataTable({
-	'pageLength': 50,
-	'order': [[1, 'asc']],
-	'columnDefs': [
-		{ 'orderable': false, 'targets': 0 }
-	],
-	'language': JSON.parse(L('datatables_localization'))
-});
--- a/public/viewjs/recipeform.js
+++ b/public/viewjs/recipeform.js
@@ -0,0 +1,129 @@
+$('#save-recipe-button').on('click', function(e)
+{
+	e.preventDefault();
+
+	Grocy.Api.Post('edit-object/recipes/' + Grocy.EditObjectId, $('#recipe-form').serializeJSON(),
+		function(result)
+		{
+			window.location.href = U('/recipes');
+		},
+		function(xhr)
+		{
+			console.error(xhr);
+		}
+	);
+});
+
+var recipesPosTables = $('#recipes-pos-table').DataTable({
+	'paginate': false,
+	'order': [[1, 'asc']],
+	'columnDefs': [
+		{ 'orderable': false, 'targets': 0 }
+	],
+	'language': JSON.parse(L('datatables_localization')),
+	'scrollY': false,
+	'colReorder': true,
+	'stateSave': true
+});
+
+$("#search").on("keyup", function ()
+{
+	var value = $(this).val();
+	if (value === "all")
+	{
+		value = "";
+	}
+
+	recipesPosTables.search(value).draw();
+});
+
+Grocy.FrontendHelpers.ValidateForm('recipe-form');
+$("#name").focus();
+
+$('#recipe-form input').keyup(function (event)
+{
+	Grocy.FrontendHelpers.ValidateForm('recipe-form');
+});
+
+$('#recipe-form input').keydown(function (event)
+{
+	if (event.keyCode === 13) //Enter
+	{
+		if (document.getElementById('recipe-form').checkValidity() === false) //There is at least one validation error
+		{
+			event.preventDefault();
+			return false;
+		}
+		else
+		{
+			$('#save-recipe-button').click();
+		}
+	}
+});
+
+$(document).on('click', '.recipe-pos-delete-button', function(e)
+{
+	var objectName = $(e.currentTarget).attr('data-recipe-pos-name');
+	var objectId = $(e.currentTarget).attr('data-recipe-pos-id');
+
+	bootbox.confirm({
+		message: L('Are you sure to delete recipe ingredient "#1"?', objectName),
+		buttons: {
+			confirm: {
+				label: L('Yes'),
+				className: 'btn-success'
+			},
+			cancel: {
+				label: L('No'),
+				className: 'btn-danger'
+			}
+		},
+		callback: function(result)
+		{
+			if (result === true)
+			{
+				Grocy.Api.Get('delete-object/recipes_pos/' + objectId,
+					function(result)
+					{
+						window.location.href = U('/recipe/' + Grocy.EditObjectId);
+					},
+					function(xhr)
+					{
+						console.error(xhr);
+					}
+				);
+			}
+		}
+	});
+});
+
+$(document).on('click', '.recipe-pos-order-missing-button', function(e)
+{
+	var productName = $(e.currentTarget).attr('data-product-name');
+	var productId = $(e.currentTarget).attr('data-product-id');
+	var productAmount = $(e.currentTarget).attr('data-product-amount');
+	var recipeName = $(e.currentTarget).attr('data-recipe-name');
+
+	var jsonData = {};
+	jsonData.product_id = productId;
+	jsonData.amount = productAmount;
+	jsonData.note = L('Added for recipe #1', recipeName);
+
+	Grocy.Api.Post('add-object/shopping_list', jsonData,
+		function(result)
+		{
+			window.location.href = U('/recipe/' + Grocy.EditObjectId);
+		},
+		function(xhr)
+		{
+			console.error(xhr);
+		}
+	);
+});
+
+$(document).on('click', '.recipe-pos-show-note-button', function(e)
+{
+	var note = $(e.currentTarget).attr('data-recipe-pos-note');
+
+	bootbox.alert(note);
+});
--- a/public/viewjs/recipeposform.js
+++ b/public/viewjs/recipeposform.js
@@ -0,0 +1,98 @@
+$('#save-recipe-pos-button').on('click', function(e)
+{
+	e.preventDefault();
+
+	var jsonData = $('#recipe-pos-form').serializeJSON();
+	jsonData.recipe_id = Grocy.EditObjectParentId;
+	console.log(jsonData);
+	if (Grocy.EditMode === 'create')
+	{
+		Grocy.Api.Post('add-object/recipes_pos', jsonData,
+			function(result)
+			{
+				window.location.href = U('/recipe/' + Grocy.EditObjectParentId);
+			},
+			function(xhr)
+			{
+				console.error(xhr);
+			}
+		);
+	}
+	else
+	{
+		Grocy.Api.Post('edit-object/recipes_pos/' + Grocy.EditObjectId, jsonData,
+			function(result)
+			{
+				window.location.href = U('/recipe/' + Grocy.EditObjectParentId);
+			},
+			function(xhr)
+			{
+				console.error(xhr);
+			}
+		);
+	}
+});
+
+Grocy.Components.ProductPicker.GetPicker().on('change', function(e)
+{
+	var productId = $(e.target).val();
+
+	if (productId)
+	{
+		Grocy.Components.ProductCard.Refresh(productId);
+		
+		Grocy.Api.Get('stock/get-product-details/' + productId,
+			function (productDetails)
+			{
+				$('#amount_qu_unit').text(productDetails.quantity_unit_purchase.name);
+				$('#amount').focus();
+				Grocy.FrontendHelpers.ValidateForm('recipe-pos-form');
+			},
+			function(xhr)
+			{
+				console.error(xhr);
+			}
+		);
+	}
+});
+
+Grocy.FrontendHelpers.ValidateForm('recipe-pos-form');
+
+if (Grocy.Components.ProductPicker.InProductAddWorkflow() === false)
+{
+	Grocy.Components.ProductPicker.GetInputElement().focus();
+}
+Grocy.Components.ProductPicker.GetPicker().trigger('change');
+
+$('#amount').on('focus', function(e)
+{
+	if (Grocy.Components.ProductPicker.GetValue().length === 0)
+	{
+		Grocy.Components.ProductPicker.GetInputElement().focus();
+	}
+	else
+	{
+		$(this).select();
+	}
+});
+
+$('#recipe-pos-form input').keyup(function (event)
+{
+	Grocy.FrontendHelpers.ValidateForm('recipe-pos-form');
+});
+
+$('#recipe-pos-form input').keydown(function (event)
+{
+	if (event.keyCode === 13) //Enter
+	{
+		if (document.getElementById('recipe-pos-form').checkValidity() === false) //There is at least one validation error
+		{
+			event.preventDefault();
+			return false;
+		}
+		else
+		{
+			$('#save-recipe-pos-button').click();
+		}
+	}
+});
--- a/public/viewjs/recipes.js
+++ b/public/viewjs/recipes.js
@@ -0,0 +1,119 @@
+var recipesTables = $('#recipes-table').DataTable({
+	'paginate': false,
+	'order': [[1, 'asc']],
+	'columnDefs': [
+		{ 'orderable': false, 'targets': 0 }
+	],
+	'language': JSON.parse(L('datatables_localization')),
+	'scrollY': false,
+	'colReorder': true,
+	'stateSave': true,
+	'select': 'single',
+	'initComplete': function()
+	{
+		this.api().row({ order: 'current' }, 0).select();
+	}
+});
+
+var rowSelect = GetUriParam("row");
+if (typeof rowSelect !== "undefined")
+{
+	recipesTables.row(rowSelect).select();
+}
+
+$("#search").on("keyup", function()
+{
+	var value = $(this).val();
+	if (value === "all")
+	{
+		value = "";
+	}
+	
+	recipesTables.search(value).draw();
+});
+
+$(document).on('click', '.recipe-delete-button', function(e)
+{
+	var objectName = $(e.currentTarget).attr('data-recipe-name');
+	var objectId = $(e.currentTarget).attr('data-recipe-id');
+
+	bootbox.confirm({
+		message: L('Are you sure to delete recipe "#1"?', objectName),
+		buttons: {
+			confirm: {
+				label: L('Yes'),
+				className: 'btn-success'
+			},
+			cancel: {
+				label: L('No'),
+				className: 'btn-danger'
+			}
+		},
+		callback: function(result)
+		{
+			if (result === true)
+			{
+				Grocy.Api.Get('delete-object/recipes/' + objectId,
+					function(result)
+					{
+						window.location.href = U('/recipes');
+					},
+					function(xhr)
+					{
+						console.error(xhr);
+					}
+				);
+			}
+		}
+	});
+});
+
+$(document).on('click', '.recipe-order-missing-button', function(e)
+{
+	var objectName = $(e.currentTarget).attr('data-recipe-name');
+	var objectId = $(e.currentTarget).attr('data-recipe-id');
+
+	bootbox.confirm({
+		message: L('Are you sure to put all missing ingredients for recipe "#1" on the shopping list?', objectName),
+		buttons: {
+			confirm: {
+				label: L('Yes'),
+				className: 'btn-success'
+			},
+			cancel: {
+				label: L('No'),
+				className: 'btn-danger'
+			}
+		},
+		callback: function(result)
+		{
+			if (result === true)
+			{
+				Grocy.Api.Get('recipes/add-not-fulfilled-products-to-shopping-list/' + objectId,
+					function(result)
+					{
+						window.location.href = U('/recipes');
+					},
+					function(xhr)
+					{
+						console.error(xhr);
+					}
+				);
+			}
+		}
+	});
+});
+
+recipesTables.on('select', function(e, dt, type, indexes)
+{
+	if (type === 'row')
+	{
+		var selectedRecipeId = $(recipesTables.row(indexes[0]).node()).data("recipe-id");
+		window.location.href = U('/recipes?recipe=' + selectedRecipeId.toString() + "&row=" + indexes[0].toString());
+	}
+});
+
+$("#selectedRecipeToggleFullscreenButton").on('click', function(e)
+{
+	$("#selectedRecipeCard").toggleClass("fullscreen");
+});
--- a/public/viewjs/shoppinglist.js
+++ b/public/viewjs/shoppinglist.js
@@ -1,4 +1,27 @@
-$(document).on('click', '.shoppinglist-delete-button', function(e)
+var shoppingListTable = $('#shoppinglist-table').DataTable({
+	'paginate': false,
+	'order': [[1, 'asc']],
+	'columnDefs': [
+		{ 'orderable': false, 'targets': 0 }
+	],
+	'language': JSON.parse(L('datatables_localization')),
+	'scrollY': false,
+	'colReorder': true,
+	'stateSave': true
+});
+
+$("#search").on("keyup", function()
+{
+	var value = $(this).val();
+	if (value === "all")
+	{
+		value = "";
+	}
+	
+	shoppingListTable.search(value).draw();
+});
+
+$(document).on('click', '.shoppinglist-delete-button', function (e)
 {
 	Grocy.Api.Get('delete-object/shopping_list/' + $(e.currentTarget).attr('data-shoppinglist-id'),
 		function(result)
@@ -26,11 +49,35 @@ $(document).on('click', '#add-products-below-min-stock-amount', function(e)
 	);
 });

-$('#shoppinglist-table').DataTable({
-	'pageLength': 50,
-	'order': [[1, 'asc']],
-	'columnDefs': [
-		{ 'orderable': false, 'targets': 0 }
-	],
-	'language': JSON.parse(L('datatables_localization'))
+$(document).on('click', '#clear-shopping-list', function(e)
+{
+	bootbox.confirm({
+		message: L('Are you sure to empty the shopping list?'),
+		buttons: {
+			confirm: {
+				label: L('Yes'),
+				className: 'btn-success'
+			},
+			cancel: {
+				label: L('No'),
+				className: 'btn-danger'
+			}
+		},
+		callback: function(result)
+		{
+			if (result === true)
+			{
+				Grocy.Api.Get('stock/clear-shopping-list',
+					function(result)
+					{
+						window.location.href = U('/shoppinglist');
+					},
+					function(xhr)
+					{
+						console.error(xhr);
+					}
+				);
+			}
+		}
+	});
 });
--- a/public/viewjs/shoppinglistform.js
+++ b/public/viewjs/shoppinglistform.js
@@ -30,7 +30,7 @@
 	}
 });

-$('#product_id').on('change', function(e)
+Grocy.Components.ProductPicker.GetPicker().on('change', function(e)
 {
 	var productId = $(e.target).val();

@@ -42,43 +42,8 @@ $('#product_id').on('change', function(e)
 			function (productDetails)
 			{
 				$('#amount_qu_unit').text(productDetails.quantity_unit_purchase.name);
-
-				if ($('#product_id').hasClass('suppress-next-custom-validate-event'))
-				{
-					$('#product_id').removeClass('suppress-next-custom-validate-event');
-				}
-				else
-				{
-					Grocy.Api.Get('get-objects/shopping_list',
-						function (currentShoppingListItems)
-						{
-							if (currentShoppingListItems.filter(function (e) { return e.product_id === productId; }).length > 0)
-							{
-								$('#product_id').val('');
-								$('#product_id_text_input').val('');
-								$('#product_id_text_input').addClass('has-error');
-								$('#product_id_text_input').parent('.input-group').addClass('has-error');
-								$('#product_id_text_input').closest('.form-group').addClass('has-error');
-								$('#product-error').text('This product is already on the shopping list.');
-								$('#product-error').show();
-								$('#product_id_text_input').focus();
-							}
-							else
-							{
-								$('#product_id_text_input').removeClass('has-error');
-								$('#product_id_text_input').parent('.input-group').removeClass('has-error');
-								$('#product_id_text_input').closest('.form-group').removeClass('has-error');
-								$('#product-error').hide();
-
 				$('#amount').focus();
-							}
-						},
-						function(xhr)
-						{
-							console.error(xhr);
-						}
-					);
-				}
+				Grocy.FrontendHelpers.ValidateForm('shoppinglist-form');
 			},
 			function(xhr)
 			{
@@ -88,50 +53,46 @@ $('#product_id').on('change', function(e)
 	}
 });

-$('.combobox').combobox({
-	appendId: '_text_input'
-});
+Grocy.FrontendHelpers.ValidateForm('shoppinglist-form');

-$('#product_id_text_input').on('change', function(e)
+if (Grocy.Components.ProductPicker.InProductAddWorkflow() === false)
 {
-	var input = $('#product_id_text_input').val().toString();
-	var possibleOptionElement = $("#product_id option[data-additional-searchdata*='" + input + "']").first();
-
-	if (possibleOptionElement.length > 0 && possibleOptionElement.text().length > 0) {
-		$('#product_id').val(possibleOptionElement.val());
-		$('#product_id').data('combobox').refresh();
-		$('#product_id').trigger('change');
+	Grocy.Components.ProductPicker.GetInputElement().focus();
 }
-});
-
-$('#product_id_text_input').focus();
-$('#product_id_text_input').trigger('change');
-
-if (Grocy.EditMode === 'edit')
+else
 {
-	$('#product_id').addClass('suppress-next-custom-validate-event');
-	$('#product_id').trigger('change');
+	Grocy.Components.ProductPicker.GetPicker().trigger('change');
 }

-$('#shoppinglist-form').validator();
-$('#shoppinglist-form').validator('validate');
-
 $('#amount').on('focus', function(e)
 {
-	if ($('#product_id_text_input').val().length === 0)
+	if (Grocy.Components.ProductPicker.GetValue().length === 0)
 	{
-		$('#product_id_text_input').focus();
+		Grocy.Components.ProductPicker.GetInputElement().focus();
 	}
+	else
+	{
+		$(this).select();
+	}
+});
+
+$('#shoppinglist-form input').keyup(function (event)
+{
+	Grocy.FrontendHelpers.ValidateForm('shoppinglist-form');
 });

 $('#shoppinglist-form input').keydown(function (event)
 {
 	if (event.keyCode === 13) //Enter
 	{
-		if ($('#shoppinglist-form').validator('validate').has('.has-error').length !== 0) //There is at least one validation error
+		if (document.getElementById('shoppinglist-form').checkValidity() === false) //There is at least one validation error
 		{
 			event.preventDefault();
 			return false;
 		}
+		else
+		{
+			$('#save-shoppinglist-button').click();
+		}
 	}
 });
--- a/public/viewjs/stockoverview.js
+++ b/public/viewjs/stockoverview.js
@@ -1,10 +1,36 @@
-$('#stock-overview-table').DataTable({
-	'pageLength': 50,
+var stockOverviewTable = $('#stock-overview-table').DataTable({
+	'paginate': false,
 	'order': [[3, 'asc']],
 	'columnDefs': [
-		{ 'orderable': false, 'targets': 0 }
+		{ 'orderable': false, 'targets': 0 },
+		{ 'visible': false, 'targets': 4 }
 	],
-	'language': JSON.parse(L('datatables_localization'))
+	'language': JSON.parse(L('datatables_localization')),
+	'scrollY': false,
+	'colReorder': true,
+	'stateSave': true
+});
+
+$("#location-filter").on("change", function()
+{
+	var value = $(this).val();
+	if (value === "all")
+	{
+		value = "";
+	}
+	
+	stockOverviewTable.column(4).search(value).draw();
+});
+
+$("#search").on("keyup", function()
+{
+	var value = $(this).val();
+	if (value === "all")
+	{
+		value = "";
+	}
+	
+	stockOverviewTable.search(value).draw();
 });

 $(document).on('click', '.product-consume-button', function(e)
@@ -12,22 +38,31 @@ $(document).on('click', '.product-consume-button', function(e)
 	var productId = $(e.currentTarget).attr('data-product-id');
 	var productName = $(e.currentTarget).attr('data-product-name');
 	var productQuName = $(e.currentTarget).attr('data-product-qu-name');
+	var consumeAmount = $(e.currentTarget).attr('data-consume-amount');

-	Grocy.Api.Get('stock/consume-product/' + productId + '/1',
+	Grocy.Api.Get('stock/consume-product/' + productId + '/' + consumeAmount,
 		function(result)
 		{
 			var oldAmount = parseInt($('#product-' + productId + '-amount').text());
-			var newAmount = oldAmount - 1;
+			var newAmount = oldAmount - consumeAmount;
 			if (newAmount === 0)
 			{
-				$('#product-' + productId + '-row').remove();
+				$('#product-' + productId + '-row').fadeOut(500, function()
+				{
+					$(this).remove();
+				});
 			}	
 			else
 			{
-				$('#product-' + productId + '-amount').text(newAmount);
+				$('#product-' + productId + '-amount').parent().effect('highlight', { }, 500);
+				$('#product-' + productId + '-amount').fadeOut(500, function()
+				{
+					$(this).text(newAmount).fadeIn(500);
+				});
+				$('#product-' + productId + '-consume-all-button').attr('data-consume-amount', newAmount);
 			}	

-			toastr.success(L('Removed #1 #2 of #3 from stock', 1, productQuName, productName));
+			toastr.success(L('Removed #1 #2 of #3 from stock', consumeAmount, productQuName, productName));
 		},
 		function(xhr)
 		{
--- a/publication_assets/consume.gif
+++ b/publication_assets/consume.gif
--- a/publication_assets/dashboard.png
+++ b/publication_assets/dashboard.png
--- a/publication_assets/purchase-with-barcode.gif
+++ b/publication_assets/purchase-with-barcode.gif
--- a/routes.php
+++ b/routes.php
@@ -34,6 +34,11 @@ $app->group('', function()
 	$this->get('/shoppinglist', 'Grocy\Controllers\StockController:ShoppingList');
 	$this->get('/shoppinglistitem/{itemId}', 'Grocy\Controllers\StockController:ShoppingListItemEditForm');

+	// Recipe routes
+	$this->get('/recipes', 'Grocy\Controllers\RecipesController:Overview');
+	$this->get('/recipe/{recipeId}', 'Grocy\Controllers\RecipesController:RecipeEditForm');
+	$this->get('/recipe/{recipeId}/pos/{recipePosId}', 'Grocy\Controllers\RecipesController:RecipePosEditForm');
+
 	// Habit routes
 	$this->get('/habitsoverview', 'Grocy\Controllers\HabitsController:Overview');
 	$this->get('/habittracking', 'Grocy\Controllers\HabitsController:TrackHabitExecution');
@@ -41,7 +46,7 @@ $app->group('', function()
 	$this->get('/habits', 'Grocy\Controllers\HabitsController:HabitsList');
 	$this->get('/habit/{habitId}', 'Grocy\Controllers\HabitsController:HabitEditForm');

-	// Batterry routes
+	// Battery routes
 	$this->get('/batteriesoverview', 'Grocy\Controllers\BatteriesController:Overview');
 	$this->get('/batterytracking', 'Grocy\Controllers\BatteriesController:TrackChargeCycle');

@@ -70,8 +75,11 @@ $app->group('/api', function()
 	$this->get('/stock/get-product-details/{productId}', 'Grocy\Controllers\StockApiController:ProductDetails');
 	$this->get('/stock/get-current-stock', 'Grocy\Controllers\StockApiController:CurrentStock');
 	$this->get('/stock/add-missing-products-to-shoppinglist', 'Grocy\Controllers\StockApiController:AddMissingProductsToShoppingList');
+	$this->get('/stock/clear-shopping-list', 'Grocy\Controllers\StockApiController:ClearShoppingList');
 	$this->get('/stock/external-barcode-lookup/{barcode}', 'Grocy\Controllers\StockApiController:ExternalBarcodeLookup');

+	$this->get('/recipes/add-not-fulfilled-products-to-shopping-list/{recipeId}', 'Grocy\Controllers\RecipesApiController:AddNotFulfilledProductsToShoppingList');
+
 	$this->get('/habits/track-habit-execution/{habitId}', 'Grocy\Controllers\HabitsApiController:TrackHabitExecution');
 	$this->get('/habits/get-habit-details/{habitId}', 'Grocy\Controllers\HabitsApiController:HabitDetails');
 	
--- a/services/BaseService.php
+++ b/services/BaseService.php
@@ -3,14 +3,19 @@
 namespace Grocy\Services;

 use \Grocy\Services\DatabaseService;
+use \Grocy\Services\LocalizationService;

 class BaseService
 {
 	public function __construct() {
 		$this->DatabaseService = new DatabaseService();
 		$this->Database = $this->DatabaseService->GetDbConnection();
+
+		$localizationService = new LocalizationService(CULTURE);
+		$this->LocalizationService = $localizationService;
 	}

 	protected $DatabaseService;
 	protected $Database;
+	protected $LocalizationService;
 }
--- a/services/DemoDataGeneratorService.php
+++ b/services/DemoDataGeneratorService.php
@@ -13,6 +13,8 @@ class DemoDataGeneratorService extends BaseService
 		$rowCount = $this->DatabaseService->ExecuteDbQuery('SELECT COUNT(*) FROM migrations WHERE migration = -1')->fetchColumn();
 		if (intval($rowCount) === 0)
 		{
+			$loremIpsum = 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.';
+
 			$sql = "
 				INSERT INTO locations (name) VALUES ('{$localizationService->Localize('Pantry')}'); --2
 				INSERT INTO locations (name) VALUES ('{$localizationService->Localize('Candy cupboard')}'); --3
@@ -26,6 +28,7 @@ class DemoDataGeneratorService extends BaseService
 				INSERT INTO quantity_units (name) VALUES ('{$localizationService->Localize('Can')}'); --6
 				INSERT INTO quantity_units (name) VALUES ('{$localizationService->Localize('Bunch')}'); --7

+				DELETE FROM sqlite_sequence WHERE name = 'products'; --Just to keep IDs in order as mentioned here...
 				INSERT INTO products (name, location_id, qu_id_purchase, qu_id_stock, qu_factor_purchase_to_stock, min_stock_amount) VALUES ('{$localizationService->Localize('Cookies')}', 3, 3, 3, 1, 8); --1
 				INSERT INTO products (name, location_id, qu_id_purchase, qu_id_stock, qu_factor_purchase_to_stock, min_stock_amount) VALUES ('{$localizationService->Localize('Chocolate')}', 3, 3, 3, 1, 8); --2
 				INSERT INTO products (name, location_id, qu_id_purchase, qu_id_stock, qu_factor_purchase_to_stock, min_stock_amount) VALUES ('{$localizationService->Localize('Gummy bears')}', 3, 3, 3, 1, 8); --3
@@ -41,13 +44,39 @@ class DemoDataGeneratorService extends BaseService
 				INSERT INTO products (name, location_id, qu_id_purchase, qu_id_stock, qu_factor_purchase_to_stock) VALUES ('{$localizationService->Localize('Cucumber')}', 5, 2, 2, 1); --13
 				INSERT INTO products (name, location_id, qu_id_purchase, qu_id_stock, qu_factor_purchase_to_stock) VALUES ('{$localizationService->Localize('Radish')}', 5, 7, 7, 1); --14
 				INSERT INTO products (name, location_id, qu_id_purchase, qu_id_stock, qu_factor_purchase_to_stock) VALUES ('{$localizationService->Localize('Tomato')}', 5, 2, 2, 1); --15
+				INSERT INTO products (name, location_id, qu_id_purchase, qu_id_stock, qu_factor_purchase_to_stock) VALUES ('{$localizationService->Localize('Pizza dough')}', 3, 3, 3, 1); --16
+				INSERT INTO products (name, location_id, qu_id_purchase, qu_id_stock, qu_factor_purchase_to_stock) VALUES ('{$localizationService->Localize('Sieved tomatoes')}', 4, 5, 5, 1); --17
+				INSERT INTO products (name, location_id, qu_id_purchase, qu_id_stock, qu_factor_purchase_to_stock) VALUES ('{$localizationService->Localize('Salami')}', 5, 3, 3, 1); --18
+				INSERT INTO products (name, location_id, qu_id_purchase, qu_id_stock, qu_factor_purchase_to_stock) VALUES ('{$localizationService->Localize('Toast')}', 4, 5, 5, 1); --19
+				INSERT INTO products (name, location_id, qu_id_purchase, qu_id_stock, qu_factor_purchase_to_stock) VALUES ('{$localizationService->Localize('Minced meat')}', 5, 3, 3, 1); --20
+
+				INSERT INTO shopping_list (note, amount) VALUES ('{$localizationService->Localize('Some good snacks')}', 1);
+				INSERT INTO shopping_list (product_id, amount) VALUES (20, 1);
+				INSERT INTO shopping_list (product_id, amount) VALUES (17, 1);
+
+				INSERT INTO recipes (name, description) VALUES ('{$localizationService->Localize('Pizza')}', '{$loremIpsum}'); --1
+				INSERT INTO recipes (name, description) VALUES ('{$localizationService->Localize('Spaghetti bolognese')}', '{$loremIpsum}'); --2
+				INSERT INTO recipes (name, description) VALUES ('{$localizationService->Localize('Sandwiches')}', '{$loremIpsum}'); --3
+
+				INSERT INTO recipes_pos (recipe_id, product_id, amount) VALUES (1, 16, 1);
+				INSERT INTO recipes_pos (recipe_id, product_id, amount) VALUES (1, 17, 1);
+				INSERT INTO recipes_pos (recipe_id, product_id, amount, note) VALUES (1, 18, 1, '{$localizationService->Localize('This is the note content of the recipe ingredient')}');
+				INSERT INTO recipes_pos (recipe_id, product_id, amount) VALUES (1, 10, 1);
+				INSERT INTO recipes_pos (recipe_id, product_id, amount) VALUES (2, 6, 1);
+				INSERT INTO recipes_pos (recipe_id, product_id, amount) VALUES (2, 10, 1);
+				INSERT INTO recipes_pos (recipe_id, product_id, amount, note) VALUES (2, 17, 1, '{$localizationService->Localize('This is the note content of the recipe ingredient')}');
+				INSERT INTO recipes_pos (recipe_id, product_id, amount) VALUES (2, 20, 1);
+				INSERT INTO recipes_pos (recipe_id, product_id, amount) VALUES (3, 10, 1);
+				INSERT INTO recipes_pos (recipe_id, product_id, amount) VALUES (3, 11, 1);

 				INSERT INTO habits (name, period_type, period_days) VALUES ('{$localizationService->Localize('Changed towels in the bathroom')}', 'manually', 5); --1
 				INSERT INTO habits (name, period_type, period_days) VALUES ('{$localizationService->Localize('Cleaned the kitchen floor')}', 'dynamic-regular', 7); --2
+				INSERT INTO habits (name, period_type, period_days) VALUES ('{$localizationService->Localize('Lawn mowed in the garden')}', 'dynamic-regular', 21); --3

 				INSERT INTO batteries (name, description, used_in) VALUES ('{$localizationService->Localize('Battery')}1', '{$localizationService->Localize('Warranty ends')} 2023', '{$localizationService->Localize('TV remote control')}'); --1
 				INSERT INTO batteries (name, description, used_in) VALUES ('{$localizationService->Localize('Battery')}2', '{$localizationService->Localize('Warranty ends')} 2022', '{$localizationService->Localize('Alarm clock')}'); --2
 				INSERT INTO batteries (name, description, used_in, charge_interval_days) VALUES ('{$localizationService->Localize('Battery')}3', '{$localizationService->Localize('Warranty ends')} 2022', '{$localizationService->Localize('Heat remote control')}', 60); --3
+				INSERT INTO batteries (name, description, used_in, charge_interval_days) VALUES ('{$localizationService->Localize('Battery')}4', '{$localizationService->Localize('Warranty ends')} 2028', '{$localizationService->Localize('Heat remote control')}', 60); --4

 				INSERT INTO migrations (migration) VALUES (-1);
 			";
@@ -76,6 +105,7 @@ class DemoDataGeneratorService extends BaseService
 			$habitsService->TrackHabit(1, date('Y-m-d H:i:s', strtotime('-15 days')));
 			$habitsService->TrackHabit(2, date('Y-m-d H:i:s', strtotime('-10 days')));
 			$habitsService->TrackHabit(2, date('Y-m-d H:i:s', strtotime('-20 days')));
+			$habitsService->TrackHabit(3, date('Y-m-d H:i:s', strtotime('-17 days')));

 			$batteriesService = new BatteriesService();
 			$batteriesService->TrackChargeCycle(1, date('Y-m-d H:i:s', strtotime('-200 days')));
@@ -87,6 +117,7 @@ class DemoDataGeneratorService extends BaseService
 			$batteriesService->TrackChargeCycle(2, date('Y-m-d H:i:s', strtotime('-100 days')));
 			$batteriesService->TrackChargeCycle(2, date('Y-m-d H:i:s', strtotime('-50 days')));
 			$batteriesService->TrackChargeCycle(3, date('Y-m-d H:i:s', strtotime('-65 days')));
+			$batteriesService->TrackChargeCycle(4, date('Y-m-d H:i:s', strtotime('-56 days')));
 		}
 	}

--- a/services/LocalizationService.php
+++ b/services/LocalizationService.php
@@ -2,14 +2,12 @@

 namespace Grocy\Services;

-class LocalizationService extends BaseService
+class LocalizationService
 {
 	const DEFAULT_CULTURE = 'en';

 	public function __construct(string $culture)
 	{
-		parent::__construct();
-
 		$this->Culture = $culture;

 		$this->StringsDefaultCulture = $this->LoadLocalizationFile(self::DEFAULT_CULTURE);
--- a/services/RecipesService.php
+++ b/services/RecipesService.php
@@ -0,0 +1,41 @@
+<?php
+
+namespace Grocy\Services;
+
+class RecipesService extends BaseService
+{
+	public function GetRecipesFulfillment()
+	{
+		$sql = 'SELECT * from recipes_fulfillment';
+		return $this->DatabaseService->ExecuteDbQuery($sql)->fetchAll(\PDO::FETCH_OBJ);
+	}
+
+	public function GetRecipesSumFulfillment()
+	{
+		$sql = 'SELECT * from recipes_fulfillment_sum';
+		return $this->DatabaseService->ExecuteDbQuery($sql)->fetchAll(\PDO::FETCH_OBJ);
+	}
+
+	public function AddNotFulfilledProductsToShoppingList($recipeId)
+	{
+		$recipe = $this->Database->recipes($recipeId);
+
+		$recipePositions = $this->GetRecipesFulfillment();
+		foreach ($recipePositions as $recipePosition)
+		{
+			if($recipePosition->recipe_id == $recipeId)
+			{
+				$toOrderAmount = $recipePosition->missing_amount - $recipePosition->amount_on_shopping_list;
+				if($toOrderAmount > 0)
+				{
+					$shoppinglistRow = $this->Database->shopping_list()->createRow(array(
+						'product_id' => $recipePosition->product_id,
+						'amount' => $toOrderAmount,
+						'note' => $this->LocalizationService->Localize('Added for recipe #1', $recipe->name)
+					));
+					$shoppinglistRow->save();
+				}
+			}
+		}
+	}
+}
--- a/services/StockService.php
+++ b/services/StockService.php
@@ -203,6 +203,11 @@ class StockService extends BaseService
 		}
 	}

+	public function ClearShoppingList()
+	{
+		$this->Database->shopping_list()->delete();
+	}
+
 	private function ProductExists($productId)
 	{
 		$productRow = $this->Database->products()->where('id = :1', $productId)->fetch();
--- a/version.json
+++ b/version.json
@@ -1,4 +1,4 @@
 {
-	"Version": "1.10.0",
-	"ReleaseDate": "2018-05-12"
+	"Version": "1.14.0",
+	"ReleaseDate": "2018-07-15"
 }
--- a/views/batteries.blade.php
+++ b/views/batteries.blade.php
@@ -5,15 +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">
-		<i class="fa fa-plus"></i>&nbsp;{{ $L('Add') }}
+			<a class="btn btn-outline-dark" href="{{ $U('/battery/new') }}">
+				<i class="fas fa-plus"></i>&nbsp;{{ $L('Add') }}
 			</a>
 		</h1>
+	</div>
+</div>

-<div class="table-responsive">
-	<table id="batteries-table" class="table table-striped">
+<div class="row mt-3">
+	<div class="col-xs-12 col-md-6 col-xl-3">
+		<label for="search">{{ $L('Search') }}</label> <i class="fas fa-search"></i>
+		<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>
@@ -26,11 +38,11 @@
 				@foreach($batteries as $battery)
 				<tr>
 					<td class="fit-content">
-					<a class="btn btn-info" href="{{ $U('/battery/') }}{{ $battery->id }}" role="button">
-						<i class="fa fa-pencil"></i>
+						<a class="btn btn-info btn-sm" href="{{ $U('/battery/') }}{{ $battery->id }}">
+							<i class="fas fa-edit"></i>
 						</a>
-					<a class="btn btn-danger battery-delete-button" href="#" role="button" data-battery-id="{{ $battery->id }}" data-battery-name="{{ $battery->name }}">
-						<i class="fa fa-trash"></i>
+						<a class="btn btn-danger btn-sm battery-delete-button" href="#" data-battery-id="{{ $battery->id }}" data-battery-name="{{ $battery->name }}">
+							<i class="fas fa-trash"></i>
 						</a>
 					</td>
 					<td>
@@ -47,4 +59,5 @@
 			</tbody>
 		</table>
 	</div>
+</div>
@stop
--- a/views/batteriesoverview.blade.php
+++ b/views/batteriesoverview.blade.php
@@ -4,22 +4,32 @@
@section('activeNav', 'batteriesoverview')
@section('viewJsName', 'batteriesoverview')

-@section('content')
-<h1 class="page-header">@yield('title')</h1>
+@push('pageScripts')
+	<script src="{{ $U('/node_modules/jquery-ui-dist/jquery-ui.min.js?v=', true) }}{{ $version }}"></script>
+@endpush

-<div class="container-fluid">
+@section('content')
 <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="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>

-<div class="discrete-content-separator-2x"></div>
+<div class="row mt-3">
+	<div class="col-xs-12 col-md-6 col-xl-3">
+		<label for="search">{{ $L('Search') }}</label> <i class="fas fa-search"></i>
+		<input type="text" class="form-control" id="search">
+	</div>
+</div>

-<div class="table-responsive">
-	<table id="batteries-overview-table" class="table table-striped">
+<div class="row">
+	<div class="col">
+		<table id="batteries-overview-table" class="table table-sm table-striped dt-responsive">
 			<thead>
 				<tr>
+					<th>#</th>
 					<th>{{ $L('Battery') }}</th>
 					<th>{{ $L('Last charged') }}</th>
 					<th>{{ $L('Next planned charge cycle') }}</th>
@@ -27,13 +37,20 @@
 			</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-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="fas fa-fire"></i>
+						</a>
+					</td>
 					<td>
 						{{ FindObjectInArrayByPropertyValue($batteries, 'id', $curentBatteryEntry->battery_id)->name }}
 					</td>
 					<td>
-					{{ $curentBatteryEntry->last_tracked_time }}
-					<time class="timeago timeago-contextual" datetime="{{ $curentBatteryEntry->last_tracked_time }}"></time>
+						<span id="battery-{{ $curentBatteryEntry->battery_id }}-last-tracked-time">{{ $curentBatteryEntry->last_tracked_time }}</span>
+						<time id="battery-{{ $curentBatteryEntry->battery_id }}-last-tracked-time-timeago" class="timeago timeago-contextual" datetime="{{ $curentBatteryEntry->last_tracked_time }}"></time>
 					</td>
 					<td>
 						@if(FindObjectInArrayByPropertyValue($batteries, 'id', $curentBatteryEntry->battery_id)->charge_interval_days > 0)
@@ -48,4 +65,5 @@
 			</tbody>
 		</table>
 	</div>
+</div>
@stop
--- a/views/batteryform.blade.php
+++ b/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>

@@ -18,12 +19,12 @@
 			<script>Grocy.EditObjectId = {{ $battery->id }}</script>
 		@endif

-	<form id="battery-form">
+		<form id="battery-form" novalidate>

 			<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">{{ $L('A name is required') }}</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
--- a/views/batterytracking.blade.php
+++ b/views/batterytracking.blade.php
@@ -5,10 +5,11 @@
@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-xs-12 col-md-6 col-xl-4 pb-3">
+		<h1>@yield('title')</h1>

-	<form id="batterytracking-form">
+		<form id="batterytracking-form" novalidate>

 			<div class="form-group">
 				<label for="battery_id">{{ $L('Battery') }}</label>
@@ -18,26 +19,26 @@
 						<option value="{{ $battery->id }}">{{ $battery->name }}</option>
 					@endforeach
 				</select>
-			<div id="battery-error" class="help-block with-errors"></div>
+				<div class="invalid-feedback">{{ $L('You have to select a battery') }}</div>
 			</div>

-		<div class="form-group">
-			<label for="tracked_time">{{ $L('Tracked time') }}</label>
-			<div class="input-group date datetimepicker">
-				<input type="text" class="form-control" id="tracked_time" name="tracked_time" required >
-				<span class="input-group-addon">
-					<span class="fa fa-calendar"></span>
-				</span>
-			</div>
-			<div class="help-block with-errors"></div>
-		</div>
+			@include('components.datetimepicker', array(
+				'id' => 'tracked_time',
+				'label' => 'Tracked time',
+				'format' => 'YYYY-MM-DD HH:mm:ss',
+				'initWithNow' => true,
+				'limitEndToNow' => true,
+				'limitStartToNow' => false,
+				'invalidFeedback' => $L('This can only be before now')
+			))

-		<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 class="col-lg-4 col-xs-12">
+	<div class="col-xs-12 col-md-6 col-xl-4">
 		@include('components.batterycard')
 	</div>
+</div>
@stop
--- a/views/components/batterycard.blade.php
+++ b/views/components/batterycard.blade.php
@@ -1,15 +1,15 @@
@push('componentScripts')
-	<script src="{{ $U('/viewjs/components/batterycard.js') }}?v={{ $version }}"></script>
+	<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="fas fa-battery-three-quarters"></i> {{ $L('Battery overview') }}
+	</div>
+	<div class="card-body">
+		<h3><span id="batterycard-battery-name"></span></h3>
 		<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>
--- a/views/components/calendarcard.blade.php
+++ b/views/components/calendarcard.blade.php
@@ -0,0 +1,12 @@
+@push('componentScripts')
+	<script src="{{ $U('/viewjs/components/calendarcard.js', true) }}?v={{ $version }}"></script>
+@endpush
+
+<div class="card">
+	<div class="card-header">
+		<i class="fas fa-calendar"></i> {{ $L('Calendar') }}
+	</div>
+	<div class="card-body">
+		<div id="calendar" data-target-input="nearest"></div>
+	</div>
+</div>
--- a/views/components/datepicker.blade.php
+++ b/views/components/datepicker.blade.php
@@ -1,14 +0,0 @@
-@push('componentScripts')
-	<script src="{{ $U('/viewjs/components/datepicker.js') }}?v={{ $version }}"></script>
-@endpush
-
-<div class="form-group">
-	<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>
-	</div>
-	<div class="help-block with-errors"></div>
-</div>
--- a/views/components/datetimepicker.blade.php
+++ b/views/components/datetimepicker.blade.php
@@ -1,14 +1,19 @@
@push('componentScripts')
-	<script src="{{ $U('/viewjs/components/datetimepicker.js') }}?v={{ $version }}"></script>
+	<script src="{{ $U('/viewjs/components/datetimepicker.js', true) }}?v={{ $version }}"></script>
@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) }}  <span class="small text-muted"><time id="datetimepicker-timeago" class="timeago timeago-contextual"></time>@if(!empty($hint))<br>{{ $L($hint) }}@endif</span></label>
+	<div class="input-group date datetimepicker @if(!empty($additionalCssClasses)){{ $additionalCssClasses }}@endif" id="{{ $id }}" data-target-input="nearest">
+		<input type="text" required class="form-control datetimepicker-input"
+			data-target="#{{ $id }}" data-format="{{ $format }}"
+			data-init-with-now="{{ BoolToString($initWithNow) }}"
+			data-limit-end-to-now="{{ BoolToString($limitEndToNow) }}"
+			data-limit-start-to-now="{{ BoolToString($limitStartToNow) }}"
+			data-next-input-selector="{{ $nextInputSelector }}" />
+		<div class="input-group-append" data-target="#{{ $id }}" data-toggle="datetimepicker">
+			<div class="input-group-text"><i class="fas fa-calendar"></i></div>
+		</div>
+		<div class="invalid-feedback">{{ $invalidFeedback }}</div>
 	</div>
-	<div class="help-block with-errors"></div>
 </div>
--- a/views/components/habitcard.blade.php
+++ b/views/components/habitcard.blade.php
@@ -1,14 +1,14 @@
@push('componentScripts')
-	<script src="{{ $U('/viewjs/components/habitcard.js') }}?v={{ $version }}"></script>
+	<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="fas fa-refresh"></i> {{ $L('Habit overview') }}
+	</div>
+	<div class="card-body">
+		<h3><span id="habitcard-habit-name"></span></h3>
 		<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>
--- a/views/components/menu.blade.php
+++ b/views/components/menu.blade.php
@@ -1,66 +0,0 @@
-
-<ul class="nav navbar-nav sidebar-nav">
-	<li data-nav-for-page="stockoverview">
-		<a class="discrete-link" href="{{ $U('/stockoverview') }}"><i class="fa fa-tachometer fa-fw"></i>&nbsp;{{ $L('Stock overview') }}</a>
-	</li>
-	<li data-nav-for-page="habitsoverview">
-		<a class="discrete-link" href="{{ $U('/habitsoverview') }}"><i class="fa fa-tachometer fa-fw"></i>&nbsp;{{ $L('Habits overview') }}</a>
-	</li>
-	<li data-nav-for-page="batteriesoverview">
-		<a class="discrete-link" href="{{ $U('/batteriesoverview') }}"><i class="fa fa-tachometer fa-fw"></i>&nbsp;{{ $L('Batteries overview') }}</a>
-	</li>
-</ul>
-
-<div class="discrete-content-separator-2x"></div>
-
-<ul class="nav navbar-nav sidebar-nav">
-	<li class="disabled"><a href="#"><strong>{{ $L('Record data') }}</strong></a></li>
-	<li data-nav-for-page="purchase">
-		<a class="discrete-link" href="{{ $U('/purchase') }}"><i class="fa fa-shopping-cart fa-fw"></i>&nbsp;{{ $L('Purchase') }}</a>
-	</li>
-	<li data-nav-for-page="consume">
-		<a class="discrete-link" href="{{ $U('/consume') }}"><i class="fa fa-cutlery fa-fw"></i>&nbsp;{{ $L('Consume') }}</a>
-	</li>
-	<li data-nav-for-page="shoppinglist">
-		<a class="discrete-link" href="{{ $U('/shoppinglist') }}"><i class="fa fa-shopping-bag fa-fw"></i>&nbsp;{{ $L('Shopping list') }}</a>
-	</li>
-	<li data-nav-for-page="inventory">
-		<a class="discrete-link" href="{{ $U('/inventory') }}"><i class="fa fa-list fa-fw"></i>&nbsp;{{ $L('Inventory') }}</a>
-	</li>
-	<li data-nav-for-page="habittracking">
-		<a class="discrete-link" href="{{ $U('/habittracking') }}"><i class="fa fa-play fa-fw"></i>&nbsp;{{ $L('Habit tracking') }}</a>
-	</li>
-	<li data-nav-for-page="batterytracking">
-		<a class="discrete-link" href="{{ $U('/batterytracking') }}"><i class="fa fa-fire fa-fw"></i>&nbsp;{{ $L('Battery tracking') }}</a>
-	</li>
-</ul>
-
-<div class="discrete-content-separator-2x"></div>
-
-<ul class="nav navbar-nav sidebar-nav">
-	<li class="disabled"><a href="#"><strong>{{ $L('Manage master data') }}</strong></a></li>
-	<li data-nav-for-page="products">
-		<a class="discrete-link" href="{{ $U('/products') }}"><i class="fa fa-product-hunt fa-fw"></i>&nbsp;{{ $L('Products') }}</a>
-	</li>
-	<li data-nav-for-page="locations">
-		<a class="discrete-link" href="{{ $U('/locations') }}"><i class="fa fa-map-marker fa-fw"></i>&nbsp;{{ $L('Locations') }}</a>
-	</li>
-	<li data-nav-for-page="quantityunits">
-		<a class="discrete-link" href="{{ $U('/quantityunits') }}"><i class="fa fa-balance-scale fa-fw"></i>&nbsp;{{ $L('Quantity units') }}</a>
-	</li>
-	<li data-nav-for-page="habits">
-		<a class="discrete-link" href="{{ $U('/habits') }}"><i class="fa fa-refresh fa-fw"></i>&nbsp;{{ $L('Habits') }}</a>
-	</li>
-	<li data-nav-for-page="batteries">
-		<a class="discrete-link" href="{{ $U('/batteries') }}"><i class="fa fa-battery-three-quarters fa-fw"></i>&nbsp;{{ $L('Batteries') }}</a>
-	</li>
-</ul>
-
-<div class="discrete-content-separator-2x hidden-xs"></div>
-
-<ul class="nav navbar-nav sidebar-nav nav-copyright">
-	<li>
-		Version {{ $version }}<br>
-		<a class="discrete-link" href="#" data-toggle="modal" data-target="#about-modal">{{ $L('About grocy') }}</a>
-	</li>
-</ul>
--- a/views/components/productcard.blade.php
+++ b/views/components/productcard.blade.php
@@ -1,16 +1,16 @@
@push('componentScripts')
-	<script src="{{ $U('/viewjs/components/productcard.js') }}?v={{ $version }}"></script>
+	<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="fab fa-product-hunt"></i> {{ $L('Product overview') }}
+	</div>
+	<div class="card-body">
+		<h3><span id="productcard-product-name"></span></h3>
+		<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>
--- a/views/components/productpicker.blade.php
+++ b/views/components/productpicker.blade.php
@@ -0,0 +1,19 @@
+@push('componentScripts')
+	<script src="{{ $U('/viewjs/components/productpicker.js', true) }}?v={{ $version }}"></script>
+@endpush
+
+@php if(empty($disallowAddProductWorkflows)) { $disallowAddProductWorkflows = false; } @endphp
+@php if(empty($prefillByName)) { $prefillByName = ''; } @endphp
+
+<div class="form-group" data-next-input-selector="{{ $nextInputSelector }}" data-disallow-add-product-workflows="{{ BoolToString($disallowAddProductWorkflows) }}" data-prefill-by-name="{{ $prefillByName }}">
+	<label for="product_id">{{ $L('Product') }} <i class="fas fa-barcode"></i><span id="barcode-lookup-disabled-hint" class="small text-muted d-none"> 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="invalid-feedback">{{ $L('You have to select a product') }}</div>
+	<div id="custom-productpicker-error" class="form-text text-danger d-none"></div>
+	<div id="flow-info-addbarcodetoselection" class="form-text 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>
--- a/views/components/usermenu.blade.php
+++ b/views/components/usermenu.blade.php
@@ -1,17 +0,0 @@
-<ul class="nav navbar-nav navbar-right">
-	<li class="dropdown">
-		<a href="#" class="dropdown-toggle" data-toggle="dropdown">@if(AUTHENTICATED === true){{ HTTP_USER }}@endif <span class="caret"></span></a>
-		<ul class="dropdown-menu">
-			<li>
-				<a class="discrete-link logout-button" href="{{ $U('/logout') }}"><i class="fa fa-sign-out fa-fw"></i>&nbsp;{{ $L('Logout') }}</a>
-			</li>
-			<li class="divider logout-button"></li>
-			<li>
-				<a class="discrete-link" href="{{ $U('/manageapikeys') }}"><i class="fa fa-handshake-o fa-fw"></i>&nbsp;{{ $L('Manage API keys') }}</a>
-			</li>
-			<li>
-				<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>
--- a/views/consume.blade.php
+++ b/views/consume.blade.php
@@ -5,26 +5,22 @@
@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-xs-12 col-md-6 col-xl-4 pb-3">
+		<h1>@yield('title')</h1>

-	<form id="consume-form">
+		<form id="consume-form" novalidate>

-		<div class="form-group">
-			<label for="product_id">{{ $L('Product') }}&nbsp;&nbsp;<i class="fa fa-barcode"></i></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 id="product-error" class="help-block with-errors"></div>
-		</div>
+			@include('components.productpicker', array(
+				'products' => $products,
+				'nextInputSelector' => '#amount',
+				'disallowAddProductWorkflows' => true
+			))

 			<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">{{ $L('The amount cannot be lower than #1', '0') }}</div>
 			</div>

 			<div class="checkbox">
@@ -33,12 +29,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 class="col-lg-4 col-xs-12">
+	<div class="col-xs-12 col-md-6 col-xl-4">
 		@include('components.productcard')
 	</div>
+</div>
@stop
--- a/views/habitform.blade.php
+++ b/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>

@@ -18,12 +19,12 @@
 			<script>Grocy.EditObjectId = {{ $habit->id }};</script>
 		@endif

-	<form id="habit-form">
+		<form id="habit-form" novalidate>

 			<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">{{ $L('A name is required') }}</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">{{ $L('A period type is required') }}</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>
+				<input type="number" class="form-control input-group-habit-period-type" id="period_days" name="period_days" min="0" value="@if($mode == 'edit'){{ $habit->period_days }}@endif">
+				<div class="invalid-feedback">{{ $L('This cannot be negative') }}</div>
 			</div>

-		<p id="habit-period-type-info" class="help-block text-muted"></p>
+			<p id="habit-period-type-info" class="form-text text-muted small d-none"></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
--- a/views/habits.blade.php
+++ b/views/habits.blade.php
@@ -5,15 +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">
-		<i class="fa fa-plus"></i>&nbsp;{{ $L('Add') }}
+			<a class="btn btn-outline-dark" href="{{ $U('/habit/new') }}">
+				<i class="fas fa-plus"></i>&nbsp;{{ $L('Add') }}
 			</a>
 		</h1>
+	</div>
+</div>

-<div class="table-responsive">
-	<table id="habits-table" class="table table-striped">
+<div class="row mt-3">
+	<div class="col-xs-12 col-md-6 col-xl-3">
+		<label for="search">{{ $L('Search') }}</label> <i class="fas fa-search"></i>
+		<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>
@@ -27,11 +39,11 @@
 			@foreach($habits as $habit)
 			<tr>
 				<td class="fit-content">
-					<a class="btn btn-info" href="{{ $U('/habit/') }}{{ $habit->id }}" role="button">
-						<i class="fa fa-pencil"></i>
+					<a class="btn btn-info btn-sm" href="{{ $U('/habit/') }}{{ $habit->id }}">
+						<i class="fas fa-edit"></i>
 					</a>
-					<a class="btn btn-danger habit-delete-button" href="#" role="button" data-habit-id="{{ $habit->id }}" data-habit-name="{{ $habit->name }}">
-						<i class="fa fa-trash"></i>
+					<a class="btn btn-danger btn-sm habit-delete-button" href="#" data-habit-id="{{ $habit->id }}" data-habit-name="{{ $habit->name }}">
+						<i class="fas fa-trash"></i>
 					</a>
 				</td>
 				<td>
@@ -51,4 +63,5 @@
 		</tbody>
 		</table>
 	</div>
+</div>
@stop
--- a/views/habitsoverview.blade.php
+++ b/views/habitsoverview.blade.php
@@ -4,22 +4,32 @@
@section('activeNav', 'habitsoverview')
@section('viewJsName', 'habitsoverview')

-@section('content')
-<h1 class="page-header">@yield('title')</h1>
+@push('pageScripts')
+	<script src="{{ $U('/node_modules/jquery-ui-dist/jquery-ui.min.js?v=', true) }}{{ $version }}"></script>
+@endpush

-<div class="container-fluid">
+@section('content')
 <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="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>

-<div class="discrete-content-separator-2x"></div>
+<div class="row mt-3">
+	<div class="col-xs-12 col-md-6 col-xl-3">
+		<label for="search">{{ $L('Search') }}</label> <i class="fas fa-search"></i>
+		<input type="text" class="form-control" id="search">
+	</div>
+</div>

-<div class="table-responsive">
-	<table id="habits-overview-table" class="table table-striped">
+<div class="row">
+	<div class="col">
+		<table id="habits-overview-table" class="table table-sm table-striped dt-responsive">
 			<thead>
 				<tr>
+					<th>#</th>
 					<th>{{ $L('Habit') }}</th>
 					<th>{{ $L('Next estimated tracking') }}</th>
 					<th>{{ $L('Last tracked') }}</th>
@@ -27,7 +37,14 @@
 			</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-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="fas fa-play"></i>
+						</a>
+					</td>
 					<td>
 						{{ FindObjectInArrayByPropertyValue($habits, 'id', $curentHabitEntry->habit_id)->name }}
 					</td>
@@ -40,12 +57,13 @@
 						@endif
 					</td>
 					<td>
-					{{ $curentHabitEntry->last_tracked_time }}
-					<time class="timeago timeago-contextual" datetime="{{ $curentHabitEntry->last_tracked_time }}"></time>
+						<span id="habit-{{ $curentHabitEntry->habit_id }}-last-tracked-time">{{ $curentHabitEntry->last_tracked_time }}</span>
+						<time id="habit-{{ $curentHabitEntry->habit_id }}-last-tracked-time-timeago" class="timeago timeago-contextual" datetime="{{ $curentHabitEntry->last_tracked_time }}"></time>
 					</td>
 				</tr>
 				@endforeach
 			</tbody>
 		</table>
 	</div>
+</div>
@stop
--- a/views/habittracking.blade.php
+++ b/views/habittracking.blade.php
@@ -5,10 +5,11 @@
@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-xs-12 col-md-6 col-xl-4 pb-3">
+		<h1>@yield('title')</h1>

-	<form id="habittracking-form">
+		<form id="habittracking-form" novalidate>

 			<div class="form-group">
 				<label for="habit_id">{{ $L('Habit') }}</label>
@@ -18,20 +19,26 @@
 						<option value="{{ $habit->id }}">{{ $habit->name }}</option>
 					@endforeach
 				</select>
-			<div id="product-error" class="help-block with-errors"></div>
+				<div class="invalid-feedback">{{ $L('You have to select a habit') }}</div>
 			</div>

 			@include('components.datetimepicker', array(
 				'id' => 'tracked_time',
-			'label' => 'Tracked time'
+				'label' => 'Tracked time',
+				'format' => 'YYYY-MM-DD HH:mm:ss',
+				'initWithNow' => true,
+				'limitEndToNow' => true,
+				'limitStartToNow' => false,
+				'invalidFeedback' => $L('This can only be before now')
 			))

-		<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 class="col-lg-4 col-xs-12">
+	<div class="col-xs-12 col-md-6 col-xl-4">
 		@include('components.habitcard')
 	</div>
+</div>
@stop
--- a/views/inventory.blade.php
+++ b/views/inventory.blade.php
@@ -5,42 +5,44 @@
@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-xs-12 col-md-6 col-xl-4 pb-3">
+		<h1>@yield('title')</h1>

-	<form id="inventory-form">
+		<form id="inventory-form" novalidate>

-		<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>
-			<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>
+			@include('components.productpicker', array(
+				'products' => $products,
+				'nextInputSelector' => '#new_amount'
+			))

 			<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">{{ $L('The amount cannot be lower than #1', '0') }}</div>
+				<div id="inventory-change-info" class="form-text text-muted small d-none"></div>
 			</div>
 			
-		@include('components.datepicker', array(
+			@include('components.datetimepicker', array(
 				'id' => 'best_before_date',
 				'label' => 'Best before',
-			'hint' => 'This will apply to added products'
+				'hint' => 'This will apply to added products',
+				'format' => 'YYYY-MM-DD',
+				'initWithNow' => false,
+				'limitEndToNow' => false,
+				'limitStartToNow' => true,
+				'invalidFeedback' => $L('A best before date is required and must be later than today'),
+				'nextInputSelector' => '#best_before_date',
+				'additionalCssClasses' => 'date-only-datetimepicker'
 			))

-		<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 class="col-lg-4 col-xs-12">
+	<div class="col-xs-12 col-md-6 col-xl-4">
 		@include('components.productcard')
 	</div>
+</div>
@stop
--- a/views/layout/default.blade.php
+++ b/views/layout/default.blade.php
@@ -9,129 +9,252 @@
 	<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=') }}{{ $version }}">
+	<link rel="icon" href="{{ $U('/img/grocy_icon.svg?v=', true) }}{{ $version }}">

 	<title>@yield('title') | grocy</title>

-	<link href="{{ $U('/bower_components/bootstrap/dist/css/bootstrap.min.css?v=') }}{{ $version }}" rel="stylesheet">
-	<link href="{{ $U('/bower_components/font-awesome/css/font-awesome.min.css?v=') }}{{ $version }}" rel="stylesheet">
-	<link href="{{ $U('/bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker3.min.css?v=') }}{{ $version }}" rel="stylesheet">
-	<link href="{{ $U('/bower_components/bootstrap-combobox/css/bootstrap-combobox.css?v=') }}{{ $version }}" rel="stylesheet">
-	<link href="{{ $U('/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css?v=') }}{{ $version }}" rel="stylesheet">
-	<link href="{{ $U('/bower_components/datatables.net-responsive-bs/css/responsive.bootstrap.min.css?v=') }}{{ $version }}" rel="stylesheet">
-	<link href="{{ $U('/bower_components/toastr/toastr.min.css?v=') }}{{ $version }}" rel="stylesheet">
-	<link href="{{ $U('/bower_components/tagmanager/tagmanager.css?v=') }}{{ $version }}" rel="stylesheet">
-	<link href="{{ $U('/bower_components/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css?v=') }}{{ $version }}" rel="stylesheet">
-	<link href="{{ $U('/bower_components/bootstrap-side-navbar/source/assets/stylesheets/navbar-fixed-side.css?v=') }}{{ $version }}" rel="stylesheet">
-	<link href="{{ $U('/components_unmanaged/noto-sans-v6-latin/noto-sans-v6-latin.css?v=') }}{{ $version }}" rel="stylesheet">
-	<link href="{{ $U('/css/grocy.css?v=') }}{{ $version }}" rel="stylesheet">
+	<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/@fortawesome/fontawesome-free/css/all.css?v=', true) }}{{ $version }}" rel="stylesheet">
+	<link href="{{ $U('/node_modules/@danielfarrell/bootstrap-combobox/css/bootstrap-combobox.css?v=', true) }}{{ $version }}" rel="stylesheet">
+	<link href="{{ $U('/node_modules/datatables.net-bs4/css/dataTables.bootstrap4.min.css?v=', true) }}{{ $version }}" rel="stylesheet">
+	<link href="{{ $U('/node_modules/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css?v=', true) }}{{ $version }}" rel="stylesheet">
+	<link href="{{ $U('/node_modules/datatables.net-colreorder-bs4/css/colReorder.bootstrap4.min.css?v=', true) }}{{ $version }}" rel="stylesheet">
+	<link href="{{ $U('/node_modules/datatables.net-select-bs4/css/select.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/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')

+	@if(file_exists(__DIR__ . '/../../data/custom_css.html'))
+		@php include __DIR__ . '/../../data/custom_css.html' @endphp
+	@endif
+
 	<script>
 		var Grocy = { };
 		Grocy.Components = { };
 		Grocy.BaseUrl = '{{ $U('/') }}';
 		Grocy.LocalizationStrings = {!! json_encode($localizationStrings) !!};
 		Grocy.ActiveNav = '@yield('activeNav', '')';
+		Grocy.Culture = '{{ CULTURE }}';
 	</script>
 </head>

-<body>
-	<nav class="navbar navbar-default navbar-fixed-top">
-		<div class="container-fluid">
-			<div class="navbar-header">
-				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-mobile" >
-					<span class="icon-bar"></span>
-					<span class="icon-bar"></span>
-					<span class="icon-bar"></span>
+<body class="fixed-nav">
+	<nav id="mainNav" class="navbar navbar-expand-lg navbar-light fixed-top">
+		<a class="navbar-brand py-0" href="{{ $U('/') }}"><img src="{{ $U('/img/grocy_logo.svg?v=', true) }}{{ $version }}" 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>
-				<a class="navbar-brand" href="{{ $U('/') }}">grocy</a>
-			</div>

-			<div id="navbar" class="navbar-collapse collapse">
-				@include('components.usermenu')
-			</div>
+		<div id="sidebarResponsive" class="collapse navbar-collapse">
+			<ul class="navbar-nav navbar-sidenav pt-2">

-			<div id="navbar-mobile" class="navbar-collapse 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="fas fa-tachometer-alt"></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="fas fa-tachometer-alt"></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="fas fa-tachometer-alt"></i>
+						<span class="nav-link-text">{{ $L('Batteries overview') }}</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="fas fa-shopping-cart"></i>
+						<span class="nav-link-text">{{ $L('Shopping list') }}</span>
+					</a>
+				</li>
+				<li class="nav-item" data-toggle="tooltip" data-placement="right" title="{{ $L('Recipes') }}" data-nav-for-page="recipes">
+					<a class="nav-link discrete-link" href="{{ $U('/recipes') }}">
+						<i class="fas fa-cocktail"></i>
+						<span class="nav-link-text">{{ $L('Recipes') }}</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="fas 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="fas fa-utensils"></i>
+						<span class="nav-link-text">{{ $L('Consume') }}</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="fas 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="fas 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="fas 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="fas fa-table"></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" data-sub-menu-of="#top-nav-manager-master-data">
+							<a class="nav-link discrete-link" href="{{ $U('/products') }}">
+								<i class="fab fa-product-hunt"></i>
+								<span class="nav-link-text">{{ $L('Products') }}</span>
+							</a>
+						</li>
+						<li data-nav-for-page="locations" data-sub-menu-of="#top-nav-manager-master-data">
+							<a class="nav-link discrete-link" href="{{ $U('/locations') }}">
+								<i class="fas fa-map-marker-alt"></i>
+								<span class="nav-link-text">{{ $L('Locations') }}</span>
+							</a>
+						</li>
+						<li data-nav-for-page="quantityunits" data-sub-menu-of="#top-nav-manager-master-data">
+							<a class="nav-link discrete-link" href="{{ $U('/quantityunits') }}">
+								<i class="fas fa-balance-scale"></i>
+								<span class="nav-link-text">{{ $L('Quantity units') }}</span>
+							</a>
+						</li>
+						<li data-nav-for-page="habits" data-sub-menu-of="#top-nav-manager-master-data">
+							<a class="nav-link discrete-link" href="{{ $U('/habits') }}">
+								<i class="fas fa-sync-alt"></i>
+								<span class="nav-link-text">{{ $L('Habits') }}</span>
+							</a>
+						</li>
+						<li data-nav-for-page="batteries" data-sub-menu-of="#top-nav-manager-master-data">
+							<a class="nav-link discrete-link" href="{{ $U('/batteries') }}">
+								<i class="fas 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="fas fa-angle-left"></i>
+					</a>
+				</li>
+			</ul>
+
+			<ul class="navbar-nav ml-auto">
+				@if(AUTHENTICATED === true)
+				<li class="nav-item dropdown">
+					<a class="nav-link dropdown-toggle discrete-link" href="#" data-toggle="dropdown"><i class="fas fa-user"></i> {{ HTTP_USER }}</a>
+
+					<div class="dropdown-menu dropdown-menu-right">
+						<a class="dropdown-item logout-button discrete-link" href="{{ $U('/logout') }}"><i class="fas fa-sign-out-alt"></i>&nbsp;{{ $L('Logout') }}</a>
 					</div>
+				</li>
+				@endif
+
+				<li class="nav-item dropdown">
+					<a class="nav-link dropdown-toggle discrete-link" href="#" data-toggle="dropdown"><i class="fas fa-wrench"></i> <span class="d-inline d-lg-none">{{ $L('Settings') }}</span></a>
+
+					<div class="dropdown-menu dropdown-menu-right">
+						<a class="dropdown-item discrete-link" href="{{ $U('/manageapikeys') }}"><i class="fas fa-handshake"></i>&nbsp;{{ $L('Manage API keys') }}</a>
+						<a class="dropdown-item discrete-link" target="_blank" href="{{ $U('/api') }}"><i class="fas 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="fas fa-info fa-fw"></i>&nbsp;{{ $L('About grocy') }} (Version {{ $version }})</a>
+					</div>
+				</li>
+			</ul>
 		</div>
 	</nav>

+	<div class="content-wrapper">
 		<div class="container-fluid">
-		<div class="row">
-
-			<div id="sidebar" class="col-sm-3 col-lg-2">
-				<nav class="navbar navbar-default navbar-fixed-side hidden-xs">
-					<div class="navbar-collapse collapse">
-						@include('components.menu')
-					</div>
-				</nav>
-			</div>
-
-			<div class="col-sm-9 col-lg-10">
+			<div class="row mb-3">
+				<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">
-						<i class="fa fa-github"></i>
+					<a href="https://github.com/berrnd/grocy" class="discrete-link" target="_blank">
+						<i class="fab 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('/bower_components/jquery/dist/jquery.min.js?v=') }}{{ $version }}"></script>
-	<script src="{{ $U('/bower_components/bootstrap/dist/js/bootstrap.min.js?v=') }}{{ $version }}"></script>
-	<script src="{{ $U('/bower_components/bootbox/bootbox.js?v=') }}{{ $version }}"></script>
-	<script src="{{ $U('/bower_components/jquery.serializeJSON/jquery.serializejson.min.js?v=') }}{{ $version }}"></script>
-	<script src="{{ $U('/bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js?v=') }}{{ $version }}"></script>
-	@if(!empty($L('bootstrap_datepicker_locale')))<script src="{{ $U('/bower_components') }}/bootstrap-datepicker/dist/locales/bootstrap-datepicker.{{ $L('bootstrap_datepicker_locale') }}.min.js?v={{ $version }}"></script>@endif
-	<script src="{{ $U('/bower_components/moment/min/moment.min.js?v=') }}{{ $version }}"></script>
-	@if(!empty($L('moment_locale')))<script src="{{ $U('/bower_components') }}/moment/locale/{{ $L('moment_locale') }}.js?v={{ $version }}"></script>@endif
-	<script src="{{ $U('/bower_components/bootstrap-validator/dist/validator.min.js?v=') }}{{ $version }}"></script>
-	<script src="{{ $U('/bower_components/bootstrap-combobox/js/bootstrap-combobox.js?v=') }}{{ $version }}"></script>
-	<script src="{{ $U('/bower_components/datatables.net/js/jquery.dataTables.min.js?v=') }}{{ $version }}"></script>
-	<script src="{{ $U('/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js?v=') }}{{ $version }}"></script>
-	<script src="{{ $U('/bower_components/datatables.net-responsive/js/dataTables.responsive.min.js?v=') }}{{ $version }}"></script>
-	<script src="{{ $U('/bower_components/datatables.net-responsive-bs/js/responsive.bootstrap.min.js?v=') }}{{ $version }}"></script>
-	<script src="{{ $U('/bower_components/jquery-timeago/jquery.timeago.js?v=') }}{{ $version }}"></script>
-	<script src="{{ $U('/bower_components') }}/jquery-timeago/locales/jquery.timeago.{{ $L('timeago_locale') }}.js?v={{ $version }}"></script>
-	<script src="{{ $U('/bower_components/toastr/toastr.min.js?v=') }}{{ $version }}"></script>
-	<script src="{{ $U('/bower_components/tagmanager/tagmanager.js?v=') }}{{ $version }}"></script>
-	<script src="{{ $U('/bower_components/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js?v=') }}{{ $version }}"></script>
+	<script src="{{ $U('/node_modules/jquery/dist/jquery.min.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/moment/min/moment.min.js?v=', true) }}{{ $version }}"></script>
+	@if(!empty($L('moment_locale')))<script src="{{ $U('/node_modules', true) }}/moment/locale/{{ $L('moment_locale') }}.js?v={{ $version }}"></script>@endif
+	<script src="{{ $U('/node_modules/@danielfarrell/bootstrap-combobox/js/bootstrap-combobox.js?v=', true) }}{{ $version }}"></script>
+	<script src="{{ $U('/node_modules/datatables.net/js/jquery.dataTables.min.js?v=', true) }}{{ $version }}"></script>
+	<script src="{{ $U('/node_modules/datatables.net-bs4/js/dataTables.bootstrap4.js?v=', true) }}{{ $version }}"></script>
+	<script src="{{ $U('/node_modules/datatables.net-responsive/js/dataTables.responsive.min.js?v=', true) }}{{ $version }}"></script>
+	<script src="{{ $U('/node_modules/datatables.net-responsive-bs4/js/responsive.bootstrap4.min.js?v=', true) }}{{ $version }}"></script>
+	<script src="{{ $U('/node_modules/datatables.net-colreorder/js/dataTables.colReorder.min.js?v=', true) }}{{ $version }}"></script>
+	<script src="{{ $U('/node_modules/datatables.net-colreorder-bs4/js/colReorder.bootstrap4.min.js?v=', true) }}{{ $version }}"></script>
+	<script src="{{ $U('/node_modules/datatables.net-select/js/dataTables.select.min.js?v=', true) }}{{ $version }}"></script>
+	<script src="{{ $U('/node_modules/datatables.net-select-bs4/js/select.bootstrap4.min.js?v=', true) }}{{ $version }}"></script>
+	<script src="{{ $U('/node_modules/timeago/jquery.timeago.js?v=', true) }}{{ $version }}"></script>
+	<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/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.min.js?v=', true) }}{{ $version }}"></script>

-	<script src="{{ $U('/js/extensions.js?v=') }}{{ $version }}"></script>
-	<script src="{{ $U('/js/grocy.js?v=') }}{{ $version }}"></script>
+	<script src="{{ $U('/js/extensions.js?v=', true) }}{{ $version }}"></script>
+	<script src="{{ $U('/js/grocy.js?v=', true) }}{{ $version }}"></script>
 	@stack('pageScripts')
 	@stack('componentScripts')
-	<script src="{{ $U('/viewjs') }}/@yield('viewJsName').js?v={{ $version }}"></script>
+	<script src="{{ $U('/viewjs', true) }}/@yield('viewJsName').js?v={{ $version }}"></script>

-	@if(file_exists(__DIR__ . '/../../data/add_before_end_body.html'))
-		@php include __DIR__ . '/../../data/add_before_end_body.html' @endphp
+	@if(file_exists(__DIR__ . '/../../data/custom_js.html'))
+		@php include __DIR__ . '/../../data/custom_js.html' @endphp
 	@endif
 </body>
+
 </html>
--- a/views/locationform.blade.php
+++ b/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>

@@ -18,12 +19,12 @@
 			<script>Grocy.EditObjectId = {{ $location->id }};</script>
 		@endif

-	<form id="location-form">
+		<form id="location-form" novalidate>

 			<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">{{ $L('A name is required') }}</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
--- a/views/locations.blade.php
+++ b/views/locations.blade.php
@@ -5,15 +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">
-		<i class="fa fa-plus"></i>&nbsp;{{ $L('Add') }}
+			<a class="btn btn-outline-dark" href="{{ $U('/location/new') }}">
+				<i class="fas fa-plus"></i>&nbsp;{{ $L('Add') }}
 			</a>
 		</h1>
+	</div>
+</div>

-<div class="table-responsive">
-	<table id="locations-table" class="table table-striped">
+<div class="row mt-3">
+	<div class="col-xs-12 col-md-6 col-xl-3">
+		<label for="search">{{ $L('Search') }}</label> <i class="fas fa-search"></i>
+		<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>
@@ -25,11 +37,11 @@
 				@foreach($locations as $location)
 				<tr>
 					<td class="fit-content">
-					<a class="btn btn-info" href="{{ $U('/location/') }}{{ $location->id }}" role="button">
-						<i class="fa fa-pencil"></i>
+						<a class="btn btn-info btn-sm" href="{{ $U('/location/') }}{{ $location->id }}">
+							<i class="fas fa-edit"></i>
 						</a>
-					<a class="btn btn-danger location-delete-button" href="#" role="button" data-location-id="{{ $location->id }}" data-location-name="{{ $location->name }}">
-						<i class="fa fa-trash"></i>
+						<a class="btn btn-danger btn-sm location-delete-button" href="#" data-location-id="{{ $location->id }}" data-location-name="{{ $location->name }}">
+							<i class="fas fa-trash"></i>
 						</a>
 					</td>
 					<td>
@@ -43,4 +55,5 @@
 			</tbody>
 		</table>
 	</div>
+</div>
@stop
--- a/views/login.blade.php
+++ b/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">
+		<form method="post" action="{{ $U('/login') }}" id="login-form" novalidate>

 			<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="form-text text-danger d-none"></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
--- a/views/manageapikeys.blade.php
+++ b/views/manageapikeys.blade.php
@@ -5,21 +5,31 @@
@section('viewJsName', 'manageapikeys')

@push('pageScripts')
-	<script src="{{ $U('/bower_components/jquery-ui/jquery-ui.min.js?v=') }}{{ $version }}"></script>
+	<script src="{{ $U('/node_modules/jquery-ui-dist/jquery-ui.min.js?v=', true) }}{{ $version }}"></script>
@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="fas fa-plus"></i>&nbsp;{{ $L('Add') }}
 			</a>
 		</h1>
+	</div>
+</div>

-<p class="lead"><a href="{{ $U('/api') }}" target="_blank">{{ $L('REST API & data model documentation') }}</a></p>
+<div class="row mt-3">
+	<div class="col-xs-12 col-md-6 col-xl-3">
+		<label for="search">{{ $L('Search') }}</label> <i class="fas fa-search"></i>
+		<input type="text" class="form-control" id="search">
+	</div>
+</div>

-<div class="table-responsive">
-	<table id="apikeys-table" class="table table-striped">
+<div class="row">
+	<div class="col">
+		<table id="apikeys-table" class="table table-sm table-striped dt-responsive">
 			<thead>
 				<tr>
 					<th>#</th>
@@ -33,8 +43,8 @@
 				@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 }}">
-						<i class="fa fa-trash"></i>
+						<a class="btn btn-danger btn-sm apikey-delete-button" href="#" data-apikey-id="{{ $apiKey->id }}" data-apikey-apikey="{{ $apiKey->api_key }}">
+							<i class="fas fa-trash"></i>
 						</a>
 					</td>
 					<td>
@@ -57,4 +67,5 @@
 			</tbody>
 		</table>
 	</div>
+</div>
@stop
--- a/views/openapiui.blade.php
+++ b/views/openapiui.blade.php
@@ -9,11 +9,11 @@
 	<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=') }}{{ $version }}">
+	<link rel="icon" href="{{ $U('/img/grocy_icon.svg?v=', true) }}{{ $version }}">

 	<title>{{ $L('REST API & data model documentation') }} | grocy</title>

-	<link href="{{ $U('/bower_components/swagger-ui/dist/swagger-ui.css?v=') }}{{ $version }}" rel="stylesheet">
+	<link href="{{ $U('/node_modules/swagger-ui-dist/swagger-ui.css?v=', true) }}{{ $version }}" rel="stylesheet">

 	<script>
 		var Grocy = { };
@@ -25,9 +25,10 @@
 <body>
 	<div id="swagger-ui"></div>

-	<script src="{{ $U('/bower_components/swagger-ui/dist/swagger-ui-bundle.js?v=') }}{{ $version }}"></script>
-	<script src="{{ $U('/bower_components/swagger-ui/dist/swagger-ui-standalone-preset.js?v=') }}{{ $version }}"></script>
-	<script src="{{ $U('/viewjs') }}/openapiui.js?v={{ $version }}"></script>
+	<script src="{{ $U('/node_modules/swagger-ui-dist/swagger-ui.js?v=', true) }}{{ $version }}"></script>
+	<script src="{{ $U('/node_modules/swagger-ui-dist/swagger-ui-bundle.js?v=', true) }}{{ $version }}"></script>
+	<script src="{{ $U('/node_modules/swagger-ui-dist/swagger-ui-standalone-preset.js?v=', true) }}{{ $version }}"></script>
+	<script src="{{ $U('/viewjs', true) }}/openapiui.js?v={{ $version }}"></script>

 	@if(file_exists(__DIR__ . '/../../data/add_before_end_body.html'))
 		@php include __DIR__ . '/../../data/add_before_end_body.html' @endphp
--- a/views/productform.blade.php
+++ b/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>

@@ -18,12 +19,12 @@
 			<script>Grocy.EditObjectId = {{ $product->id }};</script>
 		@endif

-	<form id="product-form">
+		<form id="product-form" novalidate>

 			<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">{{ $L('A name is required') }}</div>
 			</div>

 			<div class="form-group">
@@ -32,7 +33,7 @@
 			</div>

 			<div class="form-group tm-group">
-			<label for="barcode-taginput">{{ $L('Barcode(s)') }}&nbsp;&nbsp;<i class="fa fa-barcode"></i></label>
+				<label for="barcode-taginput">{{ $L('Barcode(s)') }}&nbsp;&nbsp;<i class="fas fa-barcode"></i></label>
 				<input type="text" class="form-control tm-input" id="barcode-taginput">
 				<div id="barcode-taginput-container"></div>
 			</div>
@@ -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">{{ $L('A location is required') }}</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">{{ $L('The amount cannot be lower than #1', '0') }}</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">{{ $L('This cannot be negative') }}</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">{{ $L('A quantity unit is required') }}</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">{{ $L('A quantity unit is required') }}</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">{{ $L('The amount cannot be lower than #1', '1') }}</div>
 			</div>

-		<p id="qu-conversion-info" class="help-block text-muted"></p>
+			<p id="qu-conversion-info" class="form-text text-muted small d-none"></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
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
BlizzWave	db9ee93d2b	Norwegian localization (#16 ) * Create no.php * Update no.php	2018-07-15 21:46:16 +02:00
Bernd Bestel	1eabd29105	Describe new API function	2018-07-15 13:57:27 +02:00
Bernd Bestel	dc05c56440	Do not expand card body automatically	2018-07-15 13:39:48 +02:00
Bernd Bestel	cb88ab2080	Changed file extension of custom CSS and JS files to clarify that the content is HTML and not directly CSS/JS	2018-07-15 13:35:54 +02:00
Bernd Bestel	254e1a9bc1	Fix all the little things for the next release	2018-07-15 13:33:59 +02:00
Bernd Bestel	0fc7c297bf	Fixed a problem about recipe fulfillment wrong when there is no stock of a given product	2018-07-15 11:25:12 +02:00
Bernd Bestel	82bfb6a3c3	Improve demo data	2018-07-15 11:24:36 +02:00
Bernd Bestel	277c622475	Add missing German translations	2018-07-15 10:40:21 +02:00
Bernd Bestel	091a0f3efe	Removed not needed Italian technical translation item	2018-07-15 10:32:50 +02:00
Bernd Bestel	823c76aa08	Add missing German translations	2018-07-15 10:30:27 +02:00
Bernd Bestel	37dee2a50b	Display first recipe by default on recipes page	2018-07-15 10:16:36 +02:00
Bernd Bestel	ea0f5101ec	Finalize recipes feature	2018-07-15 09:56:10 +02:00
Bernd Bestel	be650d093d	Add a button to clear the whole shopping list	2018-07-15 08:29:26 +02:00
Bernd Bestel	734814d96b	More or less finalize recipes feature	2018-07-14 22:49:42 +02:00
Bernd Bestel	d9246b9b42	Start working on recipes feature	2018-07-14 18:23:41 +02:00
Bernd Bestel	70e7e630c3	Refresh screenshots	2018-07-14 14:52:18 +02:00
Bernd Bestel	71fc49252f	Modularize product picker	2018-07-14 14:43:57 +02:00
Bernd Bestel	aa0771877f	Remember sidebar collapsed state	2018-07-14 11:25:19 +02:00
Bernd Bestel	e5a4d11c0b	Remove arrows on tooltips (only needed for sidebar, but found now way to limit this now)	2018-07-14 11:08:10 +02:00
Bernd Bestel	909949a9e1	Expand and highlight parent menu item when active page sidebar navigation item is a sub menu	2018-07-14 10:28:33 +02:00
Bernd Bestel	f018696219	Save data tables state (client side for now)	2018-07-14 10:17:12 +02:00
Bernd Bestel	347a47d0d2	Add info about how to maintain own localizations	2018-07-14 08:51:48 +02:00
Bernd Bestel	c3de4b86b0	Enable column reordering for all data tables	2018-07-14 08:48:14 +02:00
Bernd Bestel	594e77ca41	Only changed default width of datetimepicker for date-only inputs, as this does not work for side-by-side with time picker (references #14 )	2018-07-14 08:38:03 +02:00
Bernd Bestel	31ce7a13ea	Show a calendar on the shopping list page (just for info purposes)	2018-07-13 22:38:31 +02:00
Bernd Bestel	5d762001c8	Fix too small border in datetime picker (references #14 )	2018-07-13 21:37:49 +02:00
Bernd Bestel	bc3d339d9c	Small UI adjustments	2018-07-13 21:10:58 +02:00
Bernd Bestel	33e5ed9ddc	Fix non-string settings were not correctly recognized	2018-07-12 22:23:00 +02:00
Bernd Bestel	2d712b0ef7	Update comment to reflect changed config "style"	2018-07-12 21:24:37 +02:00
Bernd Bestel	13d81a4e4b	Fixed wrong icon	2018-07-12 21:23:47 +02:00
Bernd Bestel	8d917aee12	Corrected typo	2018-07-12 21:21:51 +02:00
Bernd Bestel	09b2cfc46a	Fixed loading of a JS when the webserver is case sensitive	2018-07-12 19:48:59 +02:00
Bernd Bestel	789e475207	Fix missing comma	2018-07-12 19:30:33 +02:00
Bernd Bestel	eec5105e5b	Merge pull request #13 from davidoskky/master Italian localization	2018-07-12 19:27:38 +02:00
Bernd Bestel	82f7b2109c	Changed how custom JS/CSS can be added	2018-07-12 19:25:45 +02:00
Bernd Bestel	840dd58c03	Add some more info	2018-07-12 19:22:05 +02:00
Bernd Bestel	37d1377f99	Fixed the rest of the broken stuff after the dependency upgrade party	2018-07-12 19:12:31 +02:00
davidoskky	882a3545e5	Add files via upload	2018-07-12 01:04:42 +02:00
Bernd Bestel	778191fd11	Fixed all (or most of) the broken stuff after the dependency upgrade party	2018-07-11 19:43:05 +02:00
Bernd Bestel	71701804ea	(More or less) finish upgrading to Bootstrap 4	2018-07-10 20:37:13 +02:00
Bernd Bestel	306c404362	Continue upgrading to Bootstrap 4	2018-07-10 00:07:38 +02:00
Bernd Bestel	4fab4f87d3	Start upgrading top Bootstrap 4	2018-07-09 21:33:23 +02:00
Bernd Bestel	54717a81b1	Streamline data tables	2018-07-09 19:27:22 +02:00
Bernd Bestel	eca299454b	Migrate to use Yarn instead of Bower for frontend dependencies	2018-07-08 21:36:07 +02:00
Bernd Bestel	c58083f84a	Better approach for stock overview filtering by location (references #11 )	2018-07-08 16:54:37 +02:00
Bernd Bestel	ecf96252b9	Add possibility to filter products by location (references #10 )	2018-07-08 15:16:24 +02:00
Bernd Bestel	92e648490a	Sort all dropdowns	2018-07-08 13:59:42 +02:00
Bernd Bestel	6dd3c26ddd	Fix Bower (for now, need to switch to Yarn soon)	2018-07-08 13:51:29 +02:00
Bernd Bestel	02ea26b090	Disable pagination for data tables	2018-07-08 13:50:52 +02:00
Bernd Bestel	0954b5a741	Add option to not use URL rewriting	2018-06-15 20:50:40 +02:00
Bernd Bestel	02b6c3b721	Make it also possible to directly execute/track battery charge cycles and habits from overview pages	2018-05-13 09:38:22 +02:00
Bernd Bestel	6fa4e13ba2	Fix API version display	2018-05-13 09:00:14 +02:00
Bernd Bestel	9837f79f9c	Make it also possible to consume the whole stock of a product from stock overview	2018-05-13 08:42:45 +02:00