From b68fdb31a7f39fe2e3f19b498a3d3fe0d62c4c47 Mon Sep 17 00:00:00 2001
From: Jaroslav Drzik <jaroslav.drzik@gmail.com>
Date: Sat, 14 Jan 2023 15:37:59 +0100
Subject: [PATCH] First test

---
 .../Controllers/PersonController copy.php     |  75 ------
 package-lock.json                             | 216 +++++++-----------
 package.json                                  |   5 +-
 resources/js/Components/Input.vue             |  26 +++
 resources/js/Components/JsonQueryBuilder.vue  |  52 +++++
 .../js/Components/JsonQueryBuilderGroup.vue   |  90 ++++++++
 .../js/Components/JsonQueryBuilderRule.vue    | 127 ++++++++++
 resources/js/Components/MultiSelect.vue       |  12 +-
 resources/js/Components/Number.vue            |  27 +++
 resources/js/Components/TextInput.vue         |   5 +-
 .../{Pages => }/Data/MultiSelectOptionsRPO.js | 153 +++++++------
 resources/js/Pages/Rpo.vue                    | 140 +++---------
 tailwind.config.js                            |   5 +
 yarn.lock                                     |  25 +-
 14 files changed, 548 insertions(+), 410 deletions(-)
 delete mode 100644 app/Http/Controllers/PersonController copy.php
 create mode 100644 resources/js/Components/Input.vue
 create mode 100644 resources/js/Components/JsonQueryBuilder.vue
 create mode 100644 resources/js/Components/JsonQueryBuilderGroup.vue
 create mode 100644 resources/js/Components/JsonQueryBuilderRule.vue
 create mode 100644 resources/js/Components/Number.vue
 rename resources/js/{Pages => }/Data/MultiSelectOptionsRPO.js (53%)

diff --git a/app/Http/Controllers/PersonController copy.php b/app/Http/Controllers/PersonController copy.php
deleted file mode 100644
index 2cd754d..0000000
--- a/app/Http/Controllers/PersonController copy.php	
+++ /dev/null
@@ -1,75 +0,0 @@
-<?php
-
-namespace App\Http\Controllers;
-
-use Illuminate\Http\Request;
-use App\Models\Person;
-use App\Http\Controllers\JsonResponse;
-
-
-class PersonController extends Controller
-{
-
-    public function index() 
-    {
-        $persons = Person::skip(10)
-        ->take(5)
-        ->get();
-        return response()->json($persons);
-    }
-}
-// <?php
-
-// namespace App\Http\Controllers\Auth;
-
-// use App\Http\Controllers\Controller;
-// use App\Models\User;
-// use App\Providers\RouteServiceProvider;
-// use Illuminate\Auth\Events\Registered;
-// use Illuminate\Http\Request;
-// use Illuminate\Support\Facades\Auth;
-// use Illuminate\Support\Facades\Hash;
-// use Illuminate\Validation\Rules;
-// use Inertia\Inertia;
-
-// class RegisteredUserController extends Controller
-// {
-//     /**
-//      * Display the registration view.
-//      *
-//      * @return \Inertia\Response
-//      */
-//     public function create()
-//     {
-//         return Inertia::render('Auth/Register');
-//     }
-
-//     /**
-//      * Handle an incoming registration request.
-//      *
-//      * @param  \Illuminate\Http\Request  $request
-//      * @return \Illuminate\Http\RedirectResponse
-//      *
-//      * @throws \Illuminate\Validation\ValidationException
-//      */
-//     public function store(Request $request)
-//     {
-//         $request->validate([
-//             'name' => 'required|string|max:255',
-//             'email' => 'required|string|email|max:255|unique:'.User::class,
-//             'password' => ['required', 'confirmed', Rules\Password::defaults()],
-//         ]);
-
-//         $user = User::create([
-//             'name' => $request->name,
-//             'email' => $request->email,
-//             'password' => Hash::make($request->password),
-//         ]);
-
-//         event(new Registered($user));
-
-//         Auth::login($user);
-
-//         return redirect(RouteServiceProvider::HOME);
-//     }
-// }
diff --git a/package-lock.json b/package-lock.json
index 91659be..9f9c1db 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,9 +8,12 @@
         "@fortawesome/fontawesome-svg-core": "^6.2.1",
         "@fortawesome/free-solid-svg-icons": "^6.2.1",
         "@fortawesome/vue-fontawesome": "^3.0.2",
+        "@heroicons/vue": "^2.0.13",
         "@phongthien/vue3-query-builder": "^0.1.7",
         "@suadelabs/vue3-multiselect": "^1.0.2",
-        "font-awesome": "^4.7.0"
+        "dayjs": "^1.11.7",
+        "font-awesome": "^4.7.0",
+        "vue-tailwind-datepicker": "^1.2.6"
       },
       "devDependencies": {
         "@inertiajs/inertia": "^0.11.0",
@@ -99,7 +102,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "android"
@@ -115,7 +117,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "android"
@@ -131,7 +132,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "android"
@@ -147,7 +147,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "darwin"
@@ -163,7 +162,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "darwin"
@@ -179,7 +177,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "freebsd"
@@ -195,7 +192,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "freebsd"
@@ -211,7 +207,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -227,7 +222,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -243,7 +237,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -259,7 +252,6 @@
       "cpu": [
         "loong64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -275,7 +267,6 @@
       "cpu": [
         "mips64el"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -291,7 +282,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -307,7 +297,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -323,7 +312,6 @@
       "cpu": [
         "s390x"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -339,7 +327,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -355,7 +342,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "netbsd"
@@ -371,7 +357,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "openbsd"
@@ -387,7 +372,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "sunos"
@@ -403,7 +387,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -419,7 +402,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -435,7 +417,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -486,6 +467,14 @@
         "vue": ">= 3.0.0 < 4"
       }
     },
+    "node_modules/@heroicons/vue": {
+      "version": "2.0.13",
+      "resolved": "https://registry.npmjs.org/@heroicons/vue/-/vue-2.0.13.tgz",
+      "integrity": "sha512-vVCVF02+rNKXEmanVNnmktJlxCbOn0qVFP1gfZPn4bcBIwPX3h9AVHGCkwly+IWDEME8w5oooG0KRd2hhSe/HQ==",
+      "peerDependencies": {
+        "vue": ">= 3"
+      }
+    },
     "node_modules/@inertiajs/inertia": {
       "version": "0.11.1",
       "resolved": "https://registry.npmjs.org/@inertiajs/inertia/-/inertia-0.11.1.tgz",
@@ -758,7 +747,6 @@
       "version": "7.4.1",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
       "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
-      "dev": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -770,7 +758,6 @@
       "version": "1.8.2",
       "resolved": "https://registry.npmjs.org/acorn-node/-/acorn-node-1.8.2.tgz",
       "integrity": "sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==",
-      "dev": true,
       "dependencies": {
         "acorn": "^7.0.0",
         "acorn-walk": "^7.0.0",
@@ -781,7 +768,6 @@
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz",
       "integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==",
-      "dev": true,
       "engines": {
         "node": ">=0.4.0"
       }
@@ -835,8 +821,7 @@
     "node_modules/arg": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
-      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
-      "dev": true
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg=="
     },
     "node_modules/array-tree-filter": {
       "version": "2.1.0",
@@ -975,7 +960,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
       "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
-      "dev": true,
       "engines": {
         "node": ">= 6"
       }
@@ -1036,8 +1020,7 @@
     "node_modules/color-name": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
     },
     "node_modules/combined-stream": {
       "version": "1.0.8",
@@ -1070,7 +1053,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
       "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
-      "dev": true,
       "bin": {
         "cssesc": "bin/cssesc"
       },
@@ -1117,7 +1099,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.1.tgz",
       "integrity": "sha512-hsBd2qSVCRE+5PmNdHt1uzyrFu5d3RwmFDKzyNZMFq/EwDNJF7Ee5+D5oEKF0hU6LhtoUF1macFvOe4AskQC1Q==",
-      "dev": true,
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -1135,7 +1116,6 @@
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/detective/-/detective-5.2.1.tgz",
       "integrity": "sha512-v9XE1zRnz1wRtgurGu0Bs8uHKFSTdteYZNbIPFVhUZ39L/S79ppMpdmVOZAnoz1jfEFodc48n6MX483Xo3t1yw==",
-      "dev": true,
       "dependencies": {
         "acorn-node": "^1.8.2",
         "defined": "^1.0.0",
@@ -1151,14 +1131,12 @@
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
-      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
-      "dev": true
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw=="
     },
     "node_modules/dlv": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
-      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
-      "dev": true
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA=="
     },
     "node_modules/dom-align": {
       "version": "1.12.4",
@@ -1180,7 +1158,6 @@
       "version": "0.16.10",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.16.10.tgz",
       "integrity": "sha512-z5dIViHoVnw2l+NCJ3zj5behdXjYvXne9gL18OOivCadXDUhyDkeSvEtLcGVAJW2fNmh33TDUpsi704XYlDodw==",
-      "dev": true,
       "hasInstallScript": true,
       "bin": {
         "esbuild": "bin/esbuild"
@@ -1363,7 +1340,6 @@
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
       "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
-      "dev": true,
       "dependencies": {
         "is-glob": "^4.0.3"
       },
@@ -1398,7 +1374,7 @@
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.2.1.tgz",
       "integrity": "sha512-7WYV7Q5BTs0nlQm7tl92rDYYoyELLKHoDMBKhrxEoiV4mrfVdRz8hzPiYOzH7yWjzoVEamxRuAqhxL2PLRwZYQ==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/is-binary-path": {
       "version": "2.1.0",
@@ -1482,7 +1458,6 @@
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.6.tgz",
       "integrity": "sha512-9JROoBW7pobfsx+Sq2JsASvCo6Pfo6WWoUW79HuB1BCoBXD4PLWJPqDF6fNj67pqBYTbAHkE57M1kS/+L1neOg==",
-      "dev": true,
       "engines": {
         "node": ">=10"
       }
@@ -1604,7 +1579,6 @@
       "version": "1.2.7",
       "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.7.tgz",
       "integrity": "sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==",
-      "dev": true,
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -1668,7 +1642,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
       "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
-      "dev": true,
       "engines": {
         "node": ">= 6"
       }
@@ -1707,7 +1680,6 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
       "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -1739,7 +1711,6 @@
       "version": "14.1.0",
       "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-14.1.0.tgz",
       "integrity": "sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==",
-      "dev": true,
       "dependencies": {
         "postcss-value-parser": "^4.0.0",
         "read-cache": "^1.0.0",
@@ -1756,7 +1727,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.0.tgz",
       "integrity": "sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==",
-      "dev": true,
       "dependencies": {
         "camelcase-css": "^2.0.1"
       },
@@ -1775,7 +1745,6 @@
       "version": "3.1.4",
       "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.4.tgz",
       "integrity": "sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==",
-      "dev": true,
       "dependencies": {
         "lilconfig": "^2.0.5",
         "yaml": "^1.10.2"
@@ -1804,7 +1773,6 @@
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.0.tgz",
       "integrity": "sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w==",
-      "dev": true,
       "dependencies": {
         "postcss-selector-parser": "^6.0.10"
       },
@@ -1823,7 +1791,6 @@
       "version": "6.0.11",
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.11.tgz",
       "integrity": "sha512-zbARubNdogI9j7WY4nQJBiNqQf3sLS3wCP4WfOidu+p28LofJqDH1tcXypGrcmMHhDk2t9wGhCsYe/+szLTy1g==",
-      "dev": true,
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -1835,8 +1802,7 @@
     "node_modules/postcss-value-parser": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
-      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
-      "dev": true
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
     },
     "node_modules/proxy-from-env": {
       "version": "1.1.0",
@@ -1882,7 +1848,6 @@
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz",
       "integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==",
-      "dev": true,
       "engines": {
         "node": ">=10"
       },
@@ -1894,7 +1859,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
       "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
-      "dev": true,
       "dependencies": {
         "pify": "^2.3.0"
       }
@@ -1949,7 +1913,6 @@
       "version": "3.8.0",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.8.0.tgz",
       "integrity": "sha512-+UR6PnUslneJNiJfLSzy4XH6R50ZGF0MS7UCv20ftXrktF/TkvZDwiBtXX65esblLR5p8w6LmXgPwt2f2B8SoQ==",
-      "devOptional": true,
       "bin": {
         "rollup": "dist/bin/rollup"
       },
@@ -1987,7 +1950,7 @@
       "version": "1.57.1",
       "resolved": "https://registry.npmjs.org/sass/-/sass-1.57.1.tgz",
       "integrity": "sha512-O2+LwLS79op7GI0xZ8fqzF7X2m/m8WFfI02dHOdsK5R2ECeS5F62zrwg/relM1rjSLy7Vd/DiMNIvPrQGsA0jw==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "chokidar": ">=3.0.0 <4.0.0",
         "immutable": "^4.0.0",
@@ -2069,7 +2032,6 @@
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.2.4.tgz",
       "integrity": "sha512-AhwtHCKMtR71JgeYDaswmZXhPcW9iuI9Sp2LvZPo9upDZ7231ZJ7eA9RaURbhpXGVlrjX4cFNlB4ieTetEb7hQ==",
-      "dev": true,
       "dependencies": {
         "arg": "^5.0.2",
         "chokidar": "^3.5.3",
@@ -2211,14 +2173,12 @@
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
-      "dev": true
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
     },
     "node_modules/vite": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/vite/-/vite-4.0.3.tgz",
       "integrity": "sha512-HvuNv1RdE7deIfQb8mPk51UKjqptO/4RXZ5yXSAvurd5xOckwS/gg8h9Tky3uSbnjYTgUm0hVCet1cyhKd73ZA==",
-      "dev": true,
       "dependencies": {
         "esbuild": "^0.16.3",
         "postcss": "^8.4.20",
@@ -2263,6 +2223,14 @@
         }
       }
     },
+    "node_modules/vite-plugin-css-injected-by-js": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/vite-plugin-css-injected-by-js/-/vite-plugin-css-injected-by-js-2.2.0.tgz",
+      "integrity": "sha512-SRGuyY1WUHj7cPzv7AIE0bG5Cb+vioxuq3CkFc1j0b8z5Cy3rXLG8SwxjriylFcZAY7tH2jU4i1bsCJRE/ou6g==",
+      "peerDependencies": {
+        "vite": ">2.0.0-0"
+      }
+    },
     "node_modules/vite-plugin-full-reload": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/vite-plugin-full-reload/-/vite-plugin-full-reload-1.0.5.tgz",
@@ -2288,6 +2256,19 @@
         "@vue/shared": "3.2.45"
       }
     },
+    "node_modules/vue-tailwind-datepicker": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/vue-tailwind-datepicker/-/vue-tailwind-datepicker-1.2.6.tgz",
+      "integrity": "sha512-OCOL6hqhnu998hI8K6qGwyhHUOcgBhXhhWXSCQTAB040ALryO8IPYLef+qbsra27BG5aB4IJN87bUQXg5Ks1Tg==",
+      "dependencies": {
+        "vite-plugin-css-injected-by-js": "^2.0.4"
+      },
+      "peerDependencies": {
+        "dayjs": "^1.11.5",
+        "tailwindcss": "^3.1.8",
+        "vue": "^3.2.38"
+      }
+    },
     "node_modules/vue-types": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/vue-types/-/vue-types-3.0.2.tgz",
@@ -2343,7 +2324,6 @@
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
       "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
-      "dev": true,
       "engines": {
         "node": ">=0.4"
       }
@@ -2352,7 +2332,6 @@
       "version": "1.10.2",
       "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
       "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
-      "dev": true,
       "engines": {
         "node": ">= 6"
       }
@@ -2408,154 +2387,132 @@
       "version": "0.16.10",
       "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.16.10.tgz",
       "integrity": "sha512-RmJjQTRrO6VwUWDrzTBLmV4OJZTarYsiepLGlF2rYTVB701hSorPywPGvP6d8HCuuRibyXa5JX4s3jN2kHEtjQ==",
-      "dev": true,
       "optional": true
     },
     "@esbuild/android-arm64": {
       "version": "0.16.10",
       "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.16.10.tgz",
       "integrity": "sha512-47Y+NwVKTldTlDhSgJHZ/RpvBQMUDG7eKihqaF/u6g7s0ZPz4J1vy8A3rwnnUOF2CuDn7w7Gj/QcMoWz3U3SJw==",
-      "dev": true,
       "optional": true
     },
     "@esbuild/android-x64": {
       "version": "0.16.10",
       "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.16.10.tgz",
       "integrity": "sha512-C4PfnrBMcuAcOurQzpF1tTtZz94IXO5JmICJJ3NFJRHbXXsQUg9RFG45KvydKqtFfBaFLCHpduUkUfXwIvGnRg==",
-      "dev": true,
       "optional": true
     },
     "@esbuild/darwin-arm64": {
       "version": "0.16.10",
       "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.16.10.tgz",
       "integrity": "sha512-bH/bpFwldyOKdi9HSLCLhhKeVgRYr9KblchwXgY2NeUHBB/BzTUHtUSBgGBmpydB1/4E37m+ggXXfSrnD7/E7g==",
-      "dev": true,
       "optional": true
     },
     "@esbuild/darwin-x64": {
       "version": "0.16.10",
       "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.16.10.tgz",
       "integrity": "sha512-OXt7ijoLuy+AjDSKQWu+KdDFMBbdeaL6wtgMKtDUXKWHiAMKHan5+R1QAG6HD4+K0nnOvEJXKHeA9QhXNAjOTQ==",
-      "dev": true,
       "optional": true
     },
     "@esbuild/freebsd-arm64": {
       "version": "0.16.10",
       "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.16.10.tgz",
       "integrity": "sha512-shSQX/3GHuspE3Uxtq5kcFG/zqC+VuMnJkqV7LczO41cIe6CQaXHD3QdMLA4ziRq/m0vZo7JdterlgbmgNIAlQ==",
-      "dev": true,
       "optional": true
     },
     "@esbuild/freebsd-x64": {
       "version": "0.16.10",
       "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.16.10.tgz",
       "integrity": "sha512-5YVc1zdeaJGASijZmTzSO4h6uKzsQGG3pkjI6fuXvolhm3hVRhZwnHJkforaZLmzvNv5Tb7a3QL2FAVmrgySIA==",
-      "dev": true,
       "optional": true
     },
     "@esbuild/linux-arm": {
       "version": "0.16.10",
       "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.16.10.tgz",
       "integrity": "sha512-c360287ZWI2miBnvIj23bPyVctgzeMT2kQKR+x94pVqIN44h3GF8VMEs1SFPH1UgyDr3yBbx3vowDS1SVhyVhA==",
-      "dev": true,
       "optional": true
     },
     "@esbuild/linux-arm64": {
       "version": "0.16.10",
       "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.16.10.tgz",
       "integrity": "sha512-2aqeNVxIaRfPcIaMZIFoblLh588sWyCbmj1HHCCs9WmeNWm+EIN0SmvsmPvTa/TsNZFKnxTcvkX2eszTcCqIrA==",
-      "dev": true,
       "optional": true
     },
     "@esbuild/linux-ia32": {
       "version": "0.16.10",
       "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.16.10.tgz",
       "integrity": "sha512-sqMIEWeyrLGU7J5RB5fTkLRIFwsgsQ7ieWXlDLEmC2HblPYGb3AucD7inw2OrKFpRPKsec1l+lssiM3+NV5aOw==",
-      "dev": true,
       "optional": true
     },
     "@esbuild/linux-loong64": {
       "version": "0.16.10",
       "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.16.10.tgz",
       "integrity": "sha512-O7Pd5hLEtTg37NC73pfhUOGTjx/+aXu5YoSq3ahCxcN7Bcr2F47mv+kG5t840thnsEzrv0oB70+LJu3gUgchvg==",
-      "dev": true,
       "optional": true
     },
     "@esbuild/linux-mips64el": {
       "version": "0.16.10",
       "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.16.10.tgz",
       "integrity": "sha512-FN8mZOH7531iPHM0kaFhAOqqNHoAb6r/YHW2ZIxNi0a85UBi2DO4Vuyn7t1p4UN8a4LoAnLOT1PqNgHkgBJgbA==",
-      "dev": true,
       "optional": true
     },
     "@esbuild/linux-ppc64": {
       "version": "0.16.10",
       "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.16.10.tgz",
       "integrity": "sha512-Dg9RiqdvHOAWnOKIOTsIx8dFX9EDlY2IbPEY7YFzchrCiTZmMkD7jWA9UdZbNUygPjdmQBVPRCrLydReFlX9yg==",
-      "dev": true,
       "optional": true
     },
     "@esbuild/linux-riscv64": {
       "version": "0.16.10",
       "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.16.10.tgz",
       "integrity": "sha512-XMqtpjwzbmlar0BJIxmzu/RZ7EWlfVfH68Vadrva0Wj5UKOdKvqskuev2jY2oPV3aoQUyXwnMbMrFmloO2GfAw==",
-      "dev": true,
       "optional": true
     },
     "@esbuild/linux-s390x": {
       "version": "0.16.10",
       "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.16.10.tgz",
       "integrity": "sha512-fu7XtnoeRNFMx8DjK3gPWpFBDM2u5ba+FYwg27SjMJwKvJr4bDyKz5c+FLXLUSSAkMAt/UL+cUbEbra+rYtUgw==",
-      "dev": true,
       "optional": true
     },
     "@esbuild/linux-x64": {
       "version": "0.16.10",
       "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.16.10.tgz",
       "integrity": "sha512-61lcjVC/RldNNMUzQQdyCWjCxp9YLEQgIxErxU9XluX7juBdGKb0pvddS0vPNuCvotRbzijZ1pzII+26haWzbA==",
-      "dev": true,
       "optional": true
     },
     "@esbuild/netbsd-x64": {
       "version": "0.16.10",
       "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.16.10.tgz",
       "integrity": "sha512-JeZXCX3viSA9j4HqSoygjssdqYdfHd6yCFWyfSekLbz4Ef+D2EjvsN02ZQPwYl5a5gg/ehdHgegHhlfOFP0HCA==",
-      "dev": true,
       "optional": true
     },
     "@esbuild/openbsd-x64": {
       "version": "0.16.10",
       "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.16.10.tgz",
       "integrity": "sha512-3qpxQKuEVIIg8SebpXsp82OBrqjPV/OwNWmG+TnZDr3VGyChNnGMHccC1xkbxCHDQNnnXjxhMQNyHmdFJbmbRA==",
-      "dev": true,
       "optional": true
     },
     "@esbuild/sunos-x64": {
       "version": "0.16.10",
       "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.16.10.tgz",
       "integrity": "sha512-z+q0xZ+et/7etz7WoMyXTHZ1rB8PMSNp/FOqURLJLOPb3GWJ2aj4oCqFCjPwEbW1rsT7JPpxeH/DwGAWk/I1Bg==",
-      "dev": true,
       "optional": true
     },
     "@esbuild/win32-arm64": {
       "version": "0.16.10",
       "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.16.10.tgz",
       "integrity": "sha512-+YYu5sbQ9npkNT9Dec+tn1F/kjg6SMgr6bfi/6FpXYZvCRfu2YFPZGb+3x8K30s8eRxFpoG4sGhiSUkr1xbHEw==",
-      "dev": true,
       "optional": true
     },
     "@esbuild/win32-ia32": {
       "version": "0.16.10",
       "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.16.10.tgz",
       "integrity": "sha512-Aw7Fupk7XNehR1ftHGYwUteyJ2q+em/aE+fVU3YMTBN2V5A7Z4aVCSV+SvCp9HIIHZavPFBpbdP3VfjQpdf6Xg==",
-      "dev": true,
       "optional": true
     },
     "@esbuild/win32-x64": {
       "version": "0.16.10",
       "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.16.10.tgz",
       "integrity": "sha512-qddWullt3sC1EIpfHvCRBq3H4g3L86DZpD6n8k2XFjFVyp01D++uNbN1hT/JRsHxTbyyemZcpwL5aRlJwc/zFw==",
-      "dev": true,
       "optional": true
     },
     "@fortawesome/fontawesome-common-types": {
@@ -2585,6 +2542,12 @@
       "integrity": "sha512-xHVtVY8ASUeEvgcA/7vULUesENhD+pi/EirRHdMBqooHlXBqK+yrV6d8tUye1m5UKQKVgYAHMhUBfOnoiwvc8Q==",
       "requires": {}
     },
+    "@heroicons/vue": {
+      "version": "2.0.13",
+      "resolved": "https://registry.npmjs.org/@heroicons/vue/-/vue-2.0.13.tgz",
+      "integrity": "sha512-vVCVF02+rNKXEmanVNnmktJlxCbOn0qVFP1gfZPn4bcBIwPX3h9AVHGCkwly+IWDEME8w5oooG0KRd2hhSe/HQ==",
+      "requires": {}
+    },
     "@inertiajs/inertia": {
       "version": "0.11.1",
       "resolved": "https://registry.npmjs.org/@inertiajs/inertia/-/inertia-0.11.1.tgz",
@@ -2815,14 +2778,12 @@
     "acorn": {
       "version": "7.4.1",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
-      "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
-      "dev": true
+      "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A=="
     },
     "acorn-node": {
       "version": "1.8.2",
       "resolved": "https://registry.npmjs.org/acorn-node/-/acorn-node-1.8.2.tgz",
       "integrity": "sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==",
-      "dev": true,
       "requires": {
         "acorn": "^7.0.0",
         "acorn-walk": "^7.0.0",
@@ -2832,8 +2793,7 @@
     "acorn-walk": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz",
-      "integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==",
-      "dev": true
+      "integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA=="
     },
     "ant-design-vue": {
       "version": "3.2.15",
@@ -2871,8 +2831,7 @@
     "arg": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
-      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
-      "dev": true
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg=="
     },
     "array-tree-filter": {
       "version": "2.1.0",
@@ -2966,8 +2925,7 @@
     "camelcase-css": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
-      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
-      "dev": true
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA=="
     },
     "caniuse-lite": {
       "version": "1.0.30001441",
@@ -3003,8 +2961,7 @@
     "color-name": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
     },
     "combined-stream": {
       "version": "1.0.8",
@@ -3028,8 +2985,7 @@
     "cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
-      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
-      "dev": true
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg=="
     },
     "csstype": {
       "version": "2.6.21",
@@ -3058,8 +3014,7 @@
     "defined": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.1.tgz",
-      "integrity": "sha512-hsBd2qSVCRE+5PmNdHt1uzyrFu5d3RwmFDKzyNZMFq/EwDNJF7Ee5+D5oEKF0hU6LhtoUF1macFvOe4AskQC1Q==",
-      "dev": true
+      "integrity": "sha512-hsBd2qSVCRE+5PmNdHt1uzyrFu5d3RwmFDKzyNZMFq/EwDNJF7Ee5+D5oEKF0hU6LhtoUF1macFvOe4AskQC1Q=="
     },
     "delayed-stream": {
       "version": "1.0.0",
@@ -3071,7 +3026,6 @@
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/detective/-/detective-5.2.1.tgz",
       "integrity": "sha512-v9XE1zRnz1wRtgurGu0Bs8uHKFSTdteYZNbIPFVhUZ39L/S79ppMpdmVOZAnoz1jfEFodc48n6MX483Xo3t1yw==",
-      "dev": true,
       "requires": {
         "acorn-node": "^1.8.2",
         "defined": "^1.0.0",
@@ -3081,14 +3035,12 @@
     "didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
-      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
-      "dev": true
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw=="
     },
     "dlv": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
-      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
-      "dev": true
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA=="
     },
     "dom-align": {
       "version": "1.12.4",
@@ -3110,7 +3062,6 @@
       "version": "0.16.10",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.16.10.tgz",
       "integrity": "sha512-z5dIViHoVnw2l+NCJ3zj5behdXjYvXne9gL18OOivCadXDUhyDkeSvEtLcGVAJW2fNmh33TDUpsi704XYlDodw==",
-      "dev": true,
       "requires": {
         "@esbuild/android-arm": "0.16.10",
         "@esbuild/android-arm64": "0.16.10",
@@ -3239,7 +3190,6 @@
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
       "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
-      "dev": true,
       "requires": {
         "is-glob": "^4.0.3"
       }
@@ -3262,7 +3212,7 @@
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.2.1.tgz",
       "integrity": "sha512-7WYV7Q5BTs0nlQm7tl92rDYYoyELLKHoDMBKhrxEoiV4mrfVdRz8hzPiYOzH7yWjzoVEamxRuAqhxL2PLRwZYQ==",
-      "dev": true
+      "devOptional": true
     },
     "is-binary-path": {
       "version": "2.1.0",
@@ -3321,8 +3271,7 @@
     "lilconfig": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.6.tgz",
-      "integrity": "sha512-9JROoBW7pobfsx+Sq2JsASvCo6Pfo6WWoUW79HuB1BCoBXD4PLWJPqDF6fNj67pqBYTbAHkE57M1kS/+L1neOg==",
-      "dev": true
+      "integrity": "sha512-9JROoBW7pobfsx+Sq2JsASvCo6Pfo6WWoUW79HuB1BCoBXD4PLWJPqDF6fNj67pqBYTbAHkE57M1kS/+L1neOg=="
     },
     "local-pkg": {
       "version": "0.4.2",
@@ -3413,8 +3362,7 @@
     "minimist": {
       "version": "1.2.7",
       "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.7.tgz",
-      "integrity": "sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==",
-      "dev": true
+      "integrity": "sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g=="
     },
     "mitt": {
       "version": "3.0.0",
@@ -3462,8 +3410,7 @@
     "object-hash": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
-      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
-      "dev": true
+      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw=="
     },
     "object-inspect": {
       "version": "1.12.2",
@@ -3489,8 +3436,7 @@
     "pify": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
-      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
-      "dev": true
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog=="
     },
     "postcss": {
       "version": "8.4.20",
@@ -3506,7 +3452,6 @@
       "version": "14.1.0",
       "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-14.1.0.tgz",
       "integrity": "sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==",
-      "dev": true,
       "requires": {
         "postcss-value-parser": "^4.0.0",
         "read-cache": "^1.0.0",
@@ -3517,7 +3462,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.0.tgz",
       "integrity": "sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==",
-      "dev": true,
       "requires": {
         "camelcase-css": "^2.0.1"
       }
@@ -3526,7 +3470,6 @@
       "version": "3.1.4",
       "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.4.tgz",
       "integrity": "sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==",
-      "dev": true,
       "requires": {
         "lilconfig": "^2.0.5",
         "yaml": "^1.10.2"
@@ -3536,7 +3479,6 @@
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.0.tgz",
       "integrity": "sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w==",
-      "dev": true,
       "requires": {
         "postcss-selector-parser": "^6.0.10"
       }
@@ -3545,7 +3487,6 @@
       "version": "6.0.11",
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.11.tgz",
       "integrity": "sha512-zbARubNdogI9j7WY4nQJBiNqQf3sLS3wCP4WfOidu+p28LofJqDH1tcXypGrcmMHhDk2t9wGhCsYe/+szLTy1g==",
-      "dev": true,
       "requires": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -3554,8 +3495,7 @@
     "postcss-value-parser": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
-      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
-      "dev": true
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
     },
     "proxy-from-env": {
       "version": "1.1.0",
@@ -3580,14 +3520,12 @@
     "quick-lru": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz",
-      "integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==",
-      "dev": true
+      "integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA=="
     },
     "read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
       "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
-      "dev": true,
       "requires": {
         "pify": "^2.3.0"
       }
@@ -3629,7 +3567,6 @@
       "version": "3.8.0",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.8.0.tgz",
       "integrity": "sha512-+UR6PnUslneJNiJfLSzy4XH6R50ZGF0MS7UCv20ftXrktF/TkvZDwiBtXX65esblLR5p8w6LmXgPwt2f2B8SoQ==",
-      "devOptional": true,
       "requires": {
         "fsevents": "~2.3.2"
       }
@@ -3646,7 +3583,7 @@
       "version": "1.57.1",
       "resolved": "https://registry.npmjs.org/sass/-/sass-1.57.1.tgz",
       "integrity": "sha512-O2+LwLS79op7GI0xZ8fqzF7X2m/m8WFfI02dHOdsK5R2ECeS5F62zrwg/relM1rjSLy7Vd/DiMNIvPrQGsA0jw==",
-      "dev": true,
+      "devOptional": true,
       "requires": {
         "chokidar": ">=3.0.0 <4.0.0",
         "immutable": "^4.0.0",
@@ -3706,7 +3643,6 @@
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.2.4.tgz",
       "integrity": "sha512-AhwtHCKMtR71JgeYDaswmZXhPcW9iuI9Sp2LvZPo9upDZ7231ZJ7eA9RaURbhpXGVlrjX4cFNlB4ieTetEb7hQ==",
-      "dev": true,
       "requires": {
         "arg": "^5.0.2",
         "chokidar": "^3.5.3",
@@ -3799,14 +3735,12 @@
     "util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
-      "dev": true
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
     },
     "vite": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/vite/-/vite-4.0.3.tgz",
       "integrity": "sha512-HvuNv1RdE7deIfQb8mPk51UKjqptO/4RXZ5yXSAvurd5xOckwS/gg8h9Tky3uSbnjYTgUm0hVCet1cyhKd73ZA==",
-      "dev": true,
       "requires": {
         "esbuild": "^0.16.3",
         "fsevents": "~2.3.2",
@@ -3815,6 +3749,12 @@
         "rollup": "^3.7.0"
       }
     },
+    "vite-plugin-css-injected-by-js": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/vite-plugin-css-injected-by-js/-/vite-plugin-css-injected-by-js-2.2.0.tgz",
+      "integrity": "sha512-SRGuyY1WUHj7cPzv7AIE0bG5Cb+vioxuq3CkFc1j0b8z5Cy3rXLG8SwxjriylFcZAY7tH2jU4i1bsCJRE/ou6g==",
+      "requires": {}
+    },
     "vite-plugin-full-reload": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/vite-plugin-full-reload/-/vite-plugin-full-reload-1.0.5.tgz",
@@ -3837,6 +3777,14 @@
         "@vue/shared": "3.2.45"
       }
     },
+    "vue-tailwind-datepicker": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/vue-tailwind-datepicker/-/vue-tailwind-datepicker-1.2.6.tgz",
+      "integrity": "sha512-OCOL6hqhnu998hI8K6qGwyhHUOcgBhXhhWXSCQTAB040ALryO8IPYLef+qbsra27BG5aB4IJN87bUQXg5Ks1Tg==",
+      "requires": {
+        "vite-plugin-css-injected-by-js": "^2.0.4"
+      }
+    },
     "vue-types": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/vue-types/-/vue-types-3.0.2.tgz",
@@ -3881,14 +3829,12 @@
     "xtend": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
-      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
-      "dev": true
+      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ=="
     },
     "yaml": {
       "version": "1.10.2",
       "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
-      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
-      "dev": true
+      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg=="
     }
   }
 }
diff --git a/package.json b/package.json
index 3d1e364..7985d61 100644
--- a/package.json
+++ b/package.json
@@ -24,8 +24,11 @@
     "@fortawesome/fontawesome-svg-core": "^6.2.1",
     "@fortawesome/free-solid-svg-icons": "^6.2.1",
     "@fortawesome/vue-fontawesome": "^3.0.2",
+    "@heroicons/vue": "^2.0.13",
     "@phongthien/vue3-query-builder": "^0.1.7",
     "@suadelabs/vue3-multiselect": "^1.0.2",
-    "font-awesome": "^4.7.0"
+    "dayjs": "^1.11.7",
+    "font-awesome": "^4.7.0",
+    "vue-tailwind-datepicker": "^1.2.6"
   }
 }
diff --git a/resources/js/Components/Input.vue b/resources/js/Components/Input.vue
new file mode 100644
index 0000000..9c9b1a3
--- /dev/null
+++ b/resources/js/Components/Input.vue
@@ -0,0 +1,26 @@
+<script>
+
+export default {
+  props: {
+    value: {
+      type: String,
+      default: ""
+    }
+  },
+
+  computed: {
+    model: {
+      get() {
+        return this.value;
+      },
+      set(value) {
+        this.$emit("input", value);
+      }
+    }
+  }
+};
+</script>
+
+<template>
+  <input type="text" v-model="model" placeholder="dummy input">
+</template>
\ No newline at end of file
diff --git a/resources/js/Components/JsonQueryBuilder.vue b/resources/js/Components/JsonQueryBuilder.vue
new file mode 100644
index 0000000..2f6f16d
--- /dev/null
+++ b/resources/js/Components/JsonQueryBuilder.vue
@@ -0,0 +1,52 @@
+<script setup>
+import Multiselect from '@/Components/MultiSelect.vue';
+import JsonQueryBuilderGroup from '@/Components/JsonQueryBuilderGroup.vue';
+import TextInput from '@/Components/TextInput.vue';
+import { FolderPlusIcon, PlusCircleIcon, TrashIcon, ArrowPathRoundedSquareIcon} from '@heroicons/vue/24/solid';
+import VueTailwindDatepicker from 'vue-tailwind-datepicker'
+import { ref } from 'vue';
+import { computed } from 'vue';
+
+defineProps(['query', 'queryOptions', 'i18n']);
+defineEmits(['update:query', 'update:queryOptions']);
+
+const level = ref(0);
+
+</script>
+
+<template>
+    
+    <div class="container mx-auto mt-10">
+        <!-- Card -->
+        <div class="h-50 w-full rounded-lg bg-white ">
+            <!-- Header -->
+          <div class="flex items-center justify-between border-b bg-red-300">
+            <div class="p-3 text-gray-700 text-lg font-bold">Query Builder</div>
+            <div class="p-3 flex">
+                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path> v-if="!isVisible"</svg>
+                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>   v-else </svg>
+            </div>
+          </div>
+      
+          <JsonQueryBuilderGroup :currentQuery="query" :queryOptions="queryOptions" :level="level+1"> </JsonQueryBuilderGroup>
+    
+        <div class="h-50 w-full rounded-lg bg-white ">
+            <!-- Header -->
+          <div class="flex items-center justify-between border-b bg-gray-300">
+            <div class="p-3 text-gray-700 text-lg font-bold"></div>
+            <div class="p-3 flex">
+              <button
+                @click="$emit('runQuery')"
+                class="text-slate-800 hover:text-blue-600 text-sm bg-green-200 hover:bg-slate-100 border border-slate-200 rounded-lg font-medium px-4 py-2 inline-flex space-x-1 items-center">
+                <span>
+                    <ArrowPathRoundedSquareIcon class="w-4 h-4" />
+                </span>
+                <span>Spusti vyhľadávanie</span>
+              </button>
+
+            </div>
+          </div>
+        </div>
+    </div>
+</div>
+</template>
\ No newline at end of file
diff --git a/resources/js/Components/JsonQueryBuilderGroup.vue b/resources/js/Components/JsonQueryBuilderGroup.vue
new file mode 100644
index 0000000..9805266
--- /dev/null
+++ b/resources/js/Components/JsonQueryBuilderGroup.vue
@@ -0,0 +1,90 @@
+<script setup>
+import { FolderPlusIcon, PlusCircleIcon, TrashIcon} from '@heroicons/vue/24/solid';
+
+import JsonQueryBuilderRule from '@/Components/JsonQueryBuilderRule.vue';
+import { ref, onMounted } from 'vue';
+import { computed } from 'vue';
+
+const props = defineProps(['currentQuery', 'queryOptions', 'i18n', 'level']);
+
+function AddGroup(query) {
+    console.log(query.rules);
+    let len = query.rules.push({
+          condition: 'and',
+          rules: []
+        });
+    AddRule(query.rules[len-1]);
+}
+
+function DeleteGroup(query,item) {
+    console.log(item);
+    query.rules.splice(query.rules.indexOf(item), 1);
+}
+
+function AddRule(query){
+    console.log(query.rules);
+    query.rules.push({
+        id: '',
+        operator: '=',
+        value: ''
+    })
+}
+
+function DeleteRule(rules, rule) {
+    console.log(rule);
+    rules.splice(rules.indexOf(rule), 1);
+}
+</script>
+
+
+<template>
+<div :class="level > 1 ? 'border-4 border-blue-300' : ''">
+    <div class="flex items-center justify-between">
+        <div class="p-3 text-gray-700 text-lg font-bold">
+            <button
+                class="font-bold text-slate-800 hover:text-blue-600 text-sm bg-white hover:bg-slate-100 border border-slate-200 rounded-l-lg font-medium px-4 py-2 inline-flex space-x-1 items-center"
+                :class="currentQuery.condition == 'and' ? 'bg-blue-500' : 'bg-white'"
+                @click="currentQuery.condition = 'and'">
+                <span>AND</span>
+            </button>
+            <button
+                class="text-slate-800 hover:text-blue-600 text-sm bg-white hover:bg-slate-100 border border-slate-200 rounded-r-lg font-medium px-4 py-2 inline-flex space-x-1 items-center"
+                :class="currentQuery.condition != 'and' ? 'bg-blue-500' : 'bg-white'"
+                @click="currentQuery.condition = 'or'">
+                <span>OR</span>
+            </button>
+        </div>
+        <div class="p-3 text-gray-700 text-md font-bold">
+            <button v-if="level > 1"
+                @click="$emit('deleteGroup')"
+                class="text-slate-800 hover:text-blue-600 text-sm bg-red-300 hover:bg-slate-100 border border-slate-200 rounded-l-lg font-medium px-4 py-2 inline-flex space-x-1 items-center">
+                <span>
+                    <TrashIcon class="w-4 h-4" />
+                </span>
+                <span>Zmaž skupinu</span>
+            </button>
+            <button
+                @click="AddGroup(currentQuery)"
+                class="font-bold text-slate-800 hover:text-blue-600 text-sm bg-white hover:bg-slate-100 border border-slate-200 rounded--lg font-medium px-4 py-2 inline-flex space-x-1 items-center"
+                :class="level == 1 ? 'rounded-l-lg' : ''">
+                <span>
+                    <FolderPlusIcon class="w-4 h-4" />
+                </span>
+                <span>Pridaj skupinu</span>
+            </button>
+            <button
+                @click="AddRule(currentQuery)"
+                class="text-slate-800 hover:text-blue-600 text-sm bg-white hover:bg-slate-100 border border-slate-200 rounded-r-lg font-medium px-4 py-2 inline-flex space-x-1 items-center">
+                <span>
+                    <PlusCircleIcon class="w-4 h-4" />
+                </span>
+                <span>Pridaj pravidlo</span>
+            </button>
+        </div>
+    </div>
+    <template v-for="(item) in currentQuery.rules" :key="item._uuid">
+        <JsonQueryBuilderGroup v-if="typeof item.condition === 'string'" :currentQuery="item" :queryOptions="queryOptions" @delete-group="DeleteGroup(currentQuery,item)" :level="level + 1"></JsonQueryBuilderGroup> 
+        <JsonQueryBuilderRule v-else :rule="item" :options="queryOptions" @delete-rule="DeleteRule(currentQuery.rules,item)"></JsonQueryBuilderRule>
+    </template>
+</div>
+</template>
\ No newline at end of file
diff --git a/resources/js/Components/JsonQueryBuilderRule.vue b/resources/js/Components/JsonQueryBuilderRule.vue
new file mode 100644
index 0000000..94f7cc0
--- /dev/null
+++ b/resources/js/Components/JsonQueryBuilderRule.vue
@@ -0,0 +1,127 @@
+<script setup>
+import Multiselect from '@/Components/MultiSelect.vue';
+import TextInput from '@/Components/TextInput.vue';
+import NumberInput from '@/Components/Number.vue';
+import { FolderPlusIcon, PlusCircleIcon, TrashIcon} from '@heroicons/vue/24/solid';
+
+import { ref, onMounted } from 'vue';
+import { computed } from 'vue';
+import VueTailwindDatepicker from 'vue-tailwind-datepicker';
+
+const props = defineProps(['rule', 'options', 'i18n']);
+
+const dateValue = ref([props.rule.value]);
+const formatter = ref({
+  date: 'D.M.YYYY',
+  month: 'MMM'
+});
+
+
+
+const fieldValue = ref(selectByValue(props.options,"name",props.rule.id));
+
+const rulesOperatorOptions = computed({
+  get () {
+    switch(fieldValue.value.type) {
+    case 'Number': 
+        return [
+            {id: '=',  name: 'rovná sa'},
+            {id: '!=',  name: 'nerovná sa'},
+            {id: '>',  name: 'je väčšie'},
+            {id: '<',  name: 'je menšie'},
+            {id: '>=', name: 'je rovné, vačšie'},
+            {id: '<=', name: 'je menšie, rovné'}
+          ];
+          case 'Date': 
+        return [
+            {id: '=',  name: 'rovná sa'},
+            {id: '!=',  name: 'nerovný'},
+            {id: '>',  name: 'je väčší'},
+            {id: '<',  name: 'je menší'},
+            {id: '>=', name: 'je rovný, vačší'},
+            {id: '<=', name: 'je menši, rovný'}
+        ];
+        case 'String':
+            default:
+                return [
+                    {id: '=',  name: 'rovná'},
+                    {id: '!=',  name: 'nerovná sa'},
+                    {id: 'in', name: 'je v'},
+                    {id: 'not in', name: 'nieje v'},
+                    {id: '()',  name: 'obsahuje'},
+                    {id: '!()',  name: 'neobsahuje'},
+                    {id: '(',   name: 'začína'},
+                    {id: ')',   name: 'končí'},
+                    {id: '!(',   name: 'nezačína'},
+                    {id: '!)',   name: 'nekončí'}
+                ];
+            }
+        },
+    }
+);
+
+
+const criteria = ref(selectByValue(rulesOperatorOptions.value,"id",props.rule.operator));
+const input = ref(props.rule.value);
+
+
+function selectByValue(arr, id, value, single = true) {
+    let filtered = arr.filter(a => a[id] == value);
+    console.log(filtered);
+    if (single && filtered.length > 0)
+        return filtered[0];
+    return filtered;
+}
+
+function FieldChange(val) {
+    console.log(val);
+    props.rule.id = val.name;
+    fieldValue.value.type = val.type;
+    input.value = null; 
+    props.rule.value = null;
+}
+
+function CriteriaChange(params) {
+    console.log(params);
+    props.rule.operator = params.id;    
+}
+
+function DateChange(params) {
+    console.log(params);
+    props.rule.value = params[0];
+}
+
+function InputChange(params) {
+    console.log(params);
+    props.rule.value = params;
+}
+</script>
+
+
+<template>
+    <div class="flex justify-between ">
+        <div class="p-3 grow text-gray-700 text-lg font-bold">
+            <Multiselect @change-value="FieldChange" v-model="fieldValue" label="desc" trackby="desc" :options="options"></Multiselect>
+        </div>
+        <div class="p-3 text-gray-700 text-lg font-bold">
+            <Multiselect @change-value="CriteriaChange" v-model="criteria" :value="criteria" :allow-empty="false" label="name" trackby="name" :options="rulesOperatorOptions"></Multiselect>
+        </div>
+        <div class="p-3 grow text-gray-700 text-lg font-bold">
+            <vue-tailwind-datepicker as-single :formatter="formatter" i18n="sk" v-if="fieldValue.type == 'Date'"
+                v-model="dateValue" @update:model-value="DateChange" />
+            <TextInput v-if="fieldValue.type == 'String'" id="value" type="text" class="block w-full " v-model="input"
+                required @update:model-value="InputChange" />
+            <NumberInput v-if="fieldValue.type == 'Number'" id="value" type="number" class="block w-full " v-model="input"
+                required @update:model-value="InputChange" />
+        </div>
+        <div class="p-3 text-gray-700 text-lg font-bold">
+            <button
+                @click="$emit('deleteRule')"
+                class="text-slate-800 hover:text-blue-600 text-sm bg-red-400 hover:bg-slate-100 border border-slate-200 rounded-lg font-medium px-4 py-2 inline-flex space-x-1 items-center">
+                <span>
+                    <TrashIcon class="w-4 h-4 m-1" />
+                </span>
+            </button>
+        </div>
+    </div>
+</template>
\ No newline at end of file
diff --git a/resources/js/Components/MultiSelect.vue b/resources/js/Components/MultiSelect.vue
index c6202bb..dfd065d 100644
--- a/resources/js/Components/MultiSelect.vue
+++ b/resources/js/Components/MultiSelect.vue
@@ -4,15 +4,13 @@ import { onMounted, ref } from 'vue';
 import { defineEmits } from 'vue'
 
 
-defineProps(['modelValue', 'options', 'trackby', 'label']);
-defineEmits(['update:modelValue']);
+const props = defineProps(['modelValue', 'options', 'trackby', 'selectby', 'label', 'value', 'allowEmpty']);
+defineEmits(['update:modelValue', 'changeValue']);
 
 const input = ref(null);
+const value = ref(props.modelValue);
 
-function update(t) {
-  console.log(t);
-  context.emit("update:modelValue",t);
-}
+console.log('props=',value.value);
 
 </script>
   
@@ -20,7 +18,7 @@ function update(t) {
 <template>
 
   
-  <multiselect :value="modelValue" v-model="value" @select='$emit("update:modelValue", $event)'  :track-by="trackby" :label="label" placeholder="Vyber jednu" :options="options" :clear-on-select="false" :searchable="true"  ref="input">
+  <multiselect :value="modelValue" v-model="value" @select='$emit("changeValue", $event)'  :track-by="trackby" :label="label" placeholder="Vyber jednu" :options="options" :clear-on-select="false" :searchable="true"  ref="input">
     
   </multiselect>
 
diff --git a/resources/js/Components/Number.vue b/resources/js/Components/Number.vue
new file mode 100644
index 0000000..9efffcd
--- /dev/null
+++ b/resources/js/Components/Number.vue
@@ -0,0 +1,27 @@
+<script setup>
+import { onMounted, ref } from 'vue';
+
+defineProps(['modelValue']);
+
+defineEmits(['update:modelValue']);
+
+const input = ref(null);
+
+onMounted(() => {
+    if (input.value.hasAttribute('autofocus')) {
+        input.value.focus();
+    }
+});
+
+defineExpose({ focus: () => input.value.focus() });
+</script>
+  
+  <template>
+     <input
+        class="h-10 border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm"
+        :value="modelValue"
+        @input="$emit('update:modelValue', $event.target.value)"
+        ref="input"
+    />
+  </template>
+  
\ No newline at end of file
diff --git a/resources/js/Components/TextInput.vue b/resources/js/Components/TextInput.vue
index ccc6d53..096d9a0 100644
--- a/resources/js/Components/TextInput.vue
+++ b/resources/js/Components/TextInput.vue
@@ -1,11 +1,12 @@
 <script setup>
 import { onMounted, ref } from 'vue';
 
-defineProps(['modelValue']);
+const props = defineProps(['modelValue']);
 
 defineEmits(['update:modelValue']);
 
 const input = ref(null);
+const value = ref(props.modelValue);
 
 onMounted(() => {
     if (input.value.hasAttribute('autofocus')) {
@@ -18,7 +19,7 @@ defineExpose({ focus: () => input.value.focus() });
 
 <template>
     <input
-        class="border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm"
+        class="h-10 border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm"
         :value="modelValue"
         @input="$emit('update:modelValue', $event.target.value)"
         ref="input"
diff --git a/resources/js/Pages/Data/MultiSelectOptionsRPO.js b/resources/js/Data/MultiSelectOptionsRPO.js
similarity index 53%
rename from resources/js/Pages/Data/MultiSelectOptionsRPO.js
rename to resources/js/Data/MultiSelectOptionsRPO.js
index cbb31fa..ae8b311 100644
--- a/resources/js/Pages/Data/MultiSelectOptionsRPO.js
+++ b/resources/js/Data/MultiSelectOptionsRPO.js
@@ -1,90 +1,91 @@
-let rpoFields = [{name: 'identifiers.value', desc: 'Identifikátor' },
-{name: 'identifiers.validFrom', desc: 'Identifikátor, platnosť od' },
-{name: 'fullNames.value', desc: 'Plné meno' },
-{name: 'fullNames.validFrom', desc: 'Plné meno, platnosť od' },
-{name: 'addresses.validFrom', desc: 'Adresa, platnosť od' },
-{name: 'addresses.street', desc: 'Ulica' },
-{name: 'addresses.regNumber', desc: 'Reg. číslo' },
-{name: 'addresses.buildingNumber', desc: 'čislo budovy' },
-{name: 'addresses.postalCodes', desc: 'PSČ' },
-{name: 'addresses.municipality.value', desc: 'Mesto' },
+let rpoFields = 
+[{name: 'identifiers.value', desc: 'Identifikátor' , type: 'String'},
+{name: 'identifiers.validFrom', desc: 'Identifikátor, platnosť od', type: 'Date'},
+{name: 'fullNames.value', desc: 'Plné meno', type: 'String' },
+{name: 'fullNames.validFrom', desc: 'Plné meno, platnosť od', type: 'Date' },
+{name: 'addresses.validFrom', desc: 'Adresa, platnosť od', type: 'Date' },
+{name: 'addresses.street', desc: 'Ulica', type: 'String' },
+{name: 'addresses.regNumber', desc: 'Reg. číslo', type: 'String' },
+{name: 'addresses.buildingNumber', desc: 'čislo budovy', type: 'String' },
+{name: 'addresses.postalCodes', desc: 'PSČ', type: 'String' },
+{name: 'addresses.municipality.value', desc: 'Mesto', type: 'String' },
 {name: 'addresses.country.codelistCode', desc: 'Kód zoznamu krajiny' },
-{name: 'addresses.country.code', desc: 'Kód krajiny' },
-{name: 'addresses.country.value', desc: 'Krajina' },
+{name: 'addresses.country.code', desc: 'Kód krajiny', type: 'Number' },
+{name: 'addresses.country.value', desc: 'Krajina', type: 'String' },
 {name: 'legalForms.value.codelistCode', desc: 'Právna forma kód zoznamu' },
-{name: 'legalForms.value.code', desc: 'Právna forma kód' },
-{name: 'legalForms.value.value', desc: 'Právna forma' },
-{name: 'legalForms.validFrom', desc: 'Právna forma platná od' },
-{name: 'establishment', desc: 'Založenie' },
-{name: 'activities.economicActivityDescription', desc: 'Typ ekonomickej aktivity' },
-{name: 'activities.validFrom', desc: 'Typ ekonomickej aktivity platný od' },
+{name: 'legalForms.value.code', desc: 'Právna forma kód', type: 'Number' },
+{name: 'legalForms.value.value', desc: 'Právna forma', type: 'String' },
+{name: 'legalForms.validFrom', desc: 'Právna forma platná od', type: 'Date' },
+{name: 'establishment', desc: 'Založenie', type: 'Date' },
+{name: 'activities.economicActivityDescription', desc: 'Typ ekonomickej aktivity', type: 'String' },
+{name: 'activities.validFrom', desc: 'Typ ekonomickej aktivity platný od', type: 'Date' },
 {name: 'statutoryBodies.stakeholderType.codelistCode', desc: 'Partneri v podnikaní zoznam kód' },
-{name: 'statutoryBodies.stakeholderType.code', desc: 'Partneri v podnikaní kód' },
-{name: 'statutoryBodies.stakeholderType.value', desc: 'Partneri v podnikaní' },
-{name: 'statutoryBodies.validFrom', desc: 'Štatutári platný od' },
-{name: 'statutoryBodies.address.street', desc: 'Štatutári, adresa, ulica' },
-{name: 'statutoryBodies.address.regNumber', desc: 'Štatutári, adresa, reg. číslo' },
-{name: 'statutoryBodies.address.buildingNumber', desc: 'Štatutári, adresa, číslo budovy' },
-{name: 'statutoryBodies.address.postalCodes', desc: 'Štatutári, adresa, PSČ' },
-{name: 'statutoryBodies.address.municipality.value', desc: 'Štatutári, adresa, miesto' },
+{name: 'statutoryBodies.stakeholderType.code', desc: 'Partneri v podnikaní kód', type: 'Number' },
+{name: 'statutoryBodies.stakeholderType.value', desc: 'Partneri v podnikaní', type: 'String' },
+{name: 'statutoryBodies.validFrom', desc: 'Štatutári platný od', type: 'Date' },
+{name: 'statutoryBodies.address.street', desc: 'Štatutári, adresa, ulica', type: 'String' },
+{name: 'statutoryBodies.address.regNumber', desc: 'Štatutári, adresa, reg. číslo', type: 'String' },
+{name: 'statutoryBodies.address.buildingNumber', desc: 'Štatutári, adresa, číslo budovy', type: 'String' },
+{name: 'statutoryBodies.address.postalCodes', desc: 'Štatutári, adresa, PSČ', type: 'String' },
+{name: 'statutoryBodies.address.municipality.value', desc: 'Štatutári, adresa, miesto', type: 'String' },
 {name: 'statutoryBodies.address.country.codelistCode', desc: 'Štatutári, adresa, krajina CL' },
-{name: 'statutoryBodies.address.country.code', desc: 'Štatutári, adresa, krajina, kód' },
-{name: 'statutoryBodies.address.country.value', desc: 'Štatutári, krajina' },
-{name: 'statutoryBodies.personName.formatedName', desc: 'Štatutári, celé meno' },
-{name: 'statutoryBodies.personName.givenNames', desc: 'Štatutári, krstné meno' },
-{name: 'statutoryBodies.personName.familyNames', desc: 'Štatutári, priezvisko' },
+{name: 'statutoryBodies.address.country.code', desc: 'Štatutári, adresa, krajina, kód', type: 'Number' },
+{name: 'statutoryBodies.address.country.value', desc: 'Štatutári, krajina', type: 'String' },
+{name: 'statutoryBodies.personName.formatedName', desc: 'Štatutári, celé meno', type: 'String' },
+{name: 'statutoryBodies.personName.givenNames', desc: 'Štatutári, krstné meno', type: 'String' },
+{name: 'statutoryBodies.personName.familyNames', desc: 'Štatutári, priezvisko', type: 'String' },
 {name: 'stakeholders.stakeholderType.codelistCode', desc: 'Prartneri v podnikaní, CL' },
-{name: 'stakeholders.stakeholderType.code', desc: 'Prartneri v podnikaní, kód' },
-{name: 'stakeholders.stakeholderType.value', desc: 'Prartneri v podnikaní' },
-{name: 'stakeholders.validFrom', desc: 'Prartneri v podnikaní, platné od' },
-{name: 'stakeholders.address.street', desc: 'Prartneri v podnikaní, ulica' },
-{name: 'stakeholders.address.regNumber', desc: 'Prartneri v podnikaní, reg. číslo' },
-{name: 'stakeholders.address.buildingNumber', desc: 'Prartneri v podnikaní, budova číslo' },
-{name: 'stakeholders.address.postalCodes', desc: 'Prartneri v podnikaní, PSČ' },
-{name: 'stakeholders.address.municipality.value', desc: 'Prartneri v podnikaní, miesto' },
+{name: 'stakeholders.stakeholderType.code', desc: 'Prartneri v podnikaní, kód', type: 'Number' },
+{name: 'stakeholders.stakeholderType.value', desc: 'Prartneri v podnikaní', type: 'String' },
+{name: 'stakeholders.validFrom', desc: 'Prartneri v podnikaní, platné od', type: 'Date' },
+{name: 'stakeholders.address.street', desc: 'Prartneri v podnikaní, ulica', type: 'String' },
+{name: 'stakeholders.address.regNumber', desc: 'Prartneri v podnikaní, reg. číslo', type: 'String' },
+{name: 'stakeholders.address.buildingNumber', desc: 'Prartneri v podnikaní, budova číslo', type: 'String' },
+{name: 'stakeholders.address.postalCodes', desc: 'Prartneri v podnikaní, PSČ', type: 'String' },
+{name: 'stakeholders.address.municipality.value', desc: 'Prartneri v podnikaní, miesto', type: 'String' },
 {name: 'stakeholders.address.country.codelistCode', desc: 'Prartneri v podnikaní, adresa, CL' },
-{name: 'stakeholders.address.country.code', desc: 'Prartneri v podnikaní, krajina, kód' },
-{name: 'stakeholders.address.country.value', desc: 'Prartneri v podnikaní, krajina' },
-{name: 'stakeholders.personName.formatedName', desc: 'Prartneri v podnikaní, celé meno' },
-{name: 'stakeholders.personName.givenNames', desc: 'Prartneri v podnikaní, krstné meno' },
-{name: 'otherLegalFacts.value', desc: 'Poznámky k právnym informáciam' },
-{name: 'otherLegalFacts.validFrom', desc: 'Poznámky k právnym informáciam, platné od' },
-{name: 'authorizations.value', desc: 'Autorizácia' },
-{name: 'authorizations.validFrom', desc: 'Autorizácia, platná od' },
-{name: 'equities.validFrom', desc: 'Cenné papiere, platné od' },
-{name: 'equities.value', desc: 'Cenné papiere' },
+{name: 'stakeholders.address.country.code', desc: 'Prartneri v podnikaní, krajina, kód', type: 'Number' },
+{name: 'stakeholders.address.country.value', desc: 'Prartneri v podnikaní, krajina', type: 'String' },
+{name: 'stakeholders.personName.formatedName', desc: 'Prartneri v podnikaní, celé meno', type: 'String' },
+{name: 'stakeholders.personName.givenNames', desc: 'Prartneri v podnikaní, krstné meno', type: 'String' },
+{name: 'otherLegalFacts.value', desc: 'Poznámky k právnym informáciam', type: 'String' },
+{name: 'otherLegalFacts.validFrom', desc: 'Poznámky k právnym informáciam, platné od', type: 'Date' },
+{name: 'authorizations.value', desc: 'Autorizácia', type: 'String' },
+{name: 'authorizations.validFrom', desc: 'Autorizácia, platná od', type: 'Date' },
+{name: 'equities.validFrom', desc: 'Cenné papiere, platné od', type: 'Date' },
+{name: 'equities.value', desc: 'Cenné papiere', type: 'String' },
 {name: 'equities.currency.codelistCode', desc: 'Cenné papiere, mena, CL' },
-{name: 'equities.currency.code', desc: 'Cenné papiere, mena, kód' },
-{name: 'equities.currency.value', desc: 'Cenné papiere, mena' },
-{name: 'equities.valuePaid', desc: 'Cenné papiere, zaplatené' },
-{name: 'deposits.validTo', desc: 'Depozit, platný' },
-{name: 'deposits.personName.formatedName', desc: 'Depozit, celé meno' },
-{name: 'deposits.personName.givenNames', desc: 'Depozit, krstné meno' },
-{name: 'deposits.personName.familyNames', desc: 'Depozit, priezvisko' },
-{name: 'deposits.amount', desc: 'Depozit, čiastka' },
+{name: 'equities.currency.code', desc: 'Cenné papiere, mena, kód', type: 'Number' },
+{name: 'equities.currency.value', desc: 'Cenné papiere, mena', type: 'String' },
+{name: 'equities.valuePaid', desc: 'Cenné papiere, zaplatené', type: 'Number' },
+{name: 'deposits.validTo', desc: 'Depozit, platný', type: 'Date' },
+{name: 'deposits.personName.formatedName', desc: 'Depozit, celé meno', type: 'String' },
+{name: 'deposits.personName.givenNames', desc: 'Depozit, krstné meno', type: 'String' },
+{name: 'deposits.personName.familyNames', desc: 'Depozit, priezvisko', type: 'String' },
+{name: 'deposits.amount', desc: 'Depozit, čiastka', type: 'Number' },
 {name: 'deposits.currency.codelistCode', desc: 'Depozit, mena, CL' },
-{name: 'deposits.currency.code', desc: 'Depozit, mena, kód' },
-{name: 'deposits.currency.value', desc: 'Depozit, mena, hodnota' },
-{name: 'deposits.validFrom', desc: 'Depozit, platné od' },
-{name: 'deposits.personName.formatedName', desc: 'Depozit, celé meno' },
-{name: 'deposits.personName.givenNames', desc: 'Depozit, krstné meno' },
-{name: 'deposits.personName.familyNames', desc: 'Depozit, priezvisko' },
-{name: 'deposits.amount', desc: 'Depozit, čiastka' },
-{name: 'deposits.validTo', desc: 'Depozit, platný do' },
+{name: 'deposits.currency.code', desc: 'Depozit, mena, kód', type: 'Number' },
+{name: 'deposits.currency.value', desc: 'Depozit, mena, hodnota', type: 'String' },
+{name: 'deposits.validFrom', desc: 'Depozit, platné od', type: 'Date' },
+{name: 'deposits.personName.formatedName', desc: 'Depozit, celé meno', type: 'String' },
+{name: 'deposits.personName.givenNames', desc: 'Depozit, krstné meno', type: 'String' },
+{name: 'deposits.personName.familyNames', desc: 'Depozit, priezvisko', type: 'String' },
+{name: 'deposits.amount', desc: 'Depozit, čiastka', type: 'Number' },
+{name: 'deposits.validTo', desc: 'Depozit, platný do', type: 'Date' },
 {name: 'sourceRegister.value.codelistCode', desc: 'Registračný úrad, CL' },
-{name: 'sourceRegister.value.code', desc: 'Registračný úrad, kód' },
-{name: 'sourceRegister.value.value', desc: 'Registračný úrad' },
-{name: 'sourceRegister.registrationOffices.value', desc: 'Registračný úrad, kancelária' },
-{name: 'sourceRegister.registrationOffices.validFrom', desc: 'Registračný úrad, kancelária, platné od' },
-{name: 'sourceRegister.registrationNumbers.value', desc: 'Registračný úrad, registračné číslo' },
-{name: 'sourceRegister.registrationNumbers.validFrom', desc: 'Registračný úrad, registračné číslo, platné od' },
-{name: 'statisticalCodes.statCodesActualization', desc: 'Štatistický kód, aktualizácia' },
+{name: 'sourceRegister.value.code', desc: 'Registračný úrad, kód', type: 'Number' },
+{name: 'sourceRegister.value.value', desc: 'Registračný úrad', type: 'String' },
+{name: 'sourceRegister.registrationOffices.value', desc: 'Registračný úrad, kancelária', type: 'String' },
+{name: 'sourceRegister.registrationOffices.validFrom', desc: 'Registračný úrad, kancelária, platné od', type: 'Date' },
+{name: 'sourceRegister.registrationNumbers.value', desc: 'Registračný úrad, registračné číslo', type: 'String' },
+{name: 'sourceRegister.registrationNumbers.validFrom', desc: 'Registračný úrad, registračné číslo, platné od', type: 'Date' },
+{name: 'statisticalCodes.statCodesActualization', desc: 'Štatistický kód, aktualizácia', type: 'Date' },
 {name: 'statisticalCodes.mainActivity.codelistCode', desc: 'Štatistický kód, hlavná aktivita, CL' },
-{name: 'statisticalCodes.mainActivity.code', desc: 'Štatistický kód, hlavná aktivita, kód' },
-{name: 'statisticalCodes.mainActivity.value', desc: 'Štatistický kód, hlavná aktivita' },
+{name: 'statisticalCodes.mainActivity.code', desc: 'Štatistický kód, hlavná aktivita, kód', type: 'Number' },
+{name: 'statisticalCodes.mainActivity.value', desc: 'Štatistický kód, hlavná aktivita', type: 'String' },
 {name: 'statisticalCodes.esa2010.codelistCode', desc: 'Štatistický kód, ESA 2010, CL' },
-{name: 'statisticalCodes.esa2010.code', desc: 'Štatistický kód, ESA 2010, kód' },
-{name: 'statisticalCodes.esa2010.value', desc: 'Štatistický kód, ESA 2010' }
+{name: 'statisticalCodes.esa2010.code', desc: 'Štatistický kód, ESA 2010, kód', type: 'Number' },
+{name: 'statisticalCodes.esa2010.value', desc: 'Štatistický kód, ESA 2010', type: 'String' }
 ];
 
 export default rpoFields;
\ No newline at end of file
diff --git a/resources/js/Pages/Rpo.vue b/resources/js/Pages/Rpo.vue
index ccfdcbd..1661a30 100644
--- a/resources/js/Pages/Rpo.vue
+++ b/resources/js/Pages/Rpo.vue
@@ -7,59 +7,43 @@ import SecondaryButton from '@/Components/SecondaryButton.vue';
 import TextInput from '@/Components/TextInput.vue';
 import Multiselect from '@/Components/MultiSelect.vue';
 import { Head, Link, useForm } from '@inertiajs/inertia-vue3';
-import rpoFields from './Data/MultiSelectOptionsRPO';
+import rpoFields from '../Data/MultiSelectOptionsRPO';
 import ConditionDisplay from '@/Components/ConditionStatement.vue';
+import QueryBuilder from '@phongthien/vue3-query-builder';
+import Input from '@/Components/Input.vue';
+import Number from '@/Components/Number.vue';
+import JsonQueryBuilder from '@/Components/JsonQueryBuilder.vue';
+import { onMounted, ref } from 'vue';
+import { defineEmits } from 'vue'
 import { Inertia } from '@inertiajs/inertia';
-import { ref } from 'vue';
 
-const preoperator_val1 = ref(['-', 'NOT']);
-const preoperator_val2 = ref(['AND', 'AND NOT', 'OR', 'OR NOT']);
-
-const level = ref(0);
-const podmienka = ref([]);
-const count = ref(0);
-
-const criteria_val = ref([
-                           { name: "Obsahuje", operator: 'LIKE'},
-                           { name: "Začína", operator: 'LIKE START'},
-                           { name: "Rovná sa", operator: '='}
-                        ]);
-
-const form = useForm({
-    groupoperator: '',
-    preoperator: '',
-    field: '',
-    value: '',
-    criteria: '',
-});
+const query = ref({
+        condition: 'and',
+        rules: [{
+          id: 'addresses.street',
+          operator: '=',
+          value: 'V. Clementisa'
+          }, {
+          condition: 'and',
+          rules: [{
+            id: 'fullNames.value',
+            operator: '(',
+            value: 'Cobra s.r.o.'
+          }, {
+            id: 'equities.valuePaid',
+            operator: '<=',
+            value: 80000
+          }]
+        }]
+      })
+    
 
 const submit = () => {
     console.log('Post data');
-    Inertia.post(`/search`, podmienka.value);
+    console.log(query.value);
+    Inertia.post(`/search`, query.value);
 };
 
-const AddContition = () => {
-    podmienka.value.push({groupop: form.groupoperator,pre: form.preoperator, field: form.field, value: form.value, criteria: form.criteria, level: level.value, count: count.value});
-    for (var i = count.value; i >= 0; i--) {
-        podmienka.value[podmienka.value.length - i - 1]["groupop"] = form.groupoperator;
-    }
-    count.value++;
-    ConstructCondition(); 
-}
-
-const AddLevel = () => {
-    level.value++;
-    count.value=0; 
-}
-
-const RemLevel = () => {
-    level.value--;
-    count.value=0; 
-}
-
-const ConstructCondition = () => {
-
-}
 </script>
 
 <template>
@@ -67,71 +51,7 @@ const ConstructCondition = () => {
         
         <Head title="Register" />
 
-        <ConditionDisplay :conditions="podmienka"></ConditionDisplay>
-
-        <div class="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0 bg-gray-100">
-            <div class="w-full sm:max-w-md mt-6 px-6 py-4 bg-white shadow-md  sm:rounded-lg">
-                <form @submit.prevent="submit">
-                    <template v-if="level > 0">
-                        <InputLabel for="Operator" value="Skupinový operátor" />
-                        <Multiselect v-model="form.groupoperator" :options="preoperator_val2">
-                        </Multiselect>
-                    </template>
-
-
-                    <InputLabel for="Operator" value="Operator" />
-                    <Multiselect v-model="form.preoperator" :options="count == 0 ? preoperator_val1 : preoperator_val2">
-                    </Multiselect>
-
-                    <InputLabel for="field" value="Pole" />
-                    <Multiselect v-model="form.field" label="desc" trackby="desc" :options="rpoFields"></Multiselect>
-
-                    <InputLabel for="Kriteria" value="Kriteria" />
-                    <Multiselect v-model="form.criteria" label="name" trackby="name" :options="criteria_val">
-                    </Multiselect>
-
-                    <div class="mt-4">
-                        <InputLabel for="Hodnota" value="Hodnota" />
-                        <TextInput id="value" type="text" class="mt-1 block w-full" v-model="form.value" required />
-                        <InputError class="mt-2" :message="form.errors.email" />
-                    </div>
-
-                    <pre>podmienka = {{ podmienka }} </pre>
-                    <pre>level = {{ level }}</pre>
-                    <pre>count = {{ count }}</pre>
-
-
-                    <div class="flex items-center justify-end mt-4">
-
-                        <PrimaryButton class="ml-4" :class="{ 'opacity-25': form.processing }"
-                            :disabled="form.processing">
-                            Hľadaj
-                        </PrimaryButton>
-
-
-
-
-                        <SecondaryButton class="ml-4" @click="AddLevel">
-                            <font-awesome-icon icon="fa-solid fa-right-from-bracket" />
-                        </SecondaryButton>
-
-                        <SecondaryButton class="ml-4" @click="RemLevel">
-                            <font-awesome-icon icon="fa-solid fa-right-to-bracket" />
-                        </SecondaryButton>
-
-                        <SecondaryButton class="ml-4" @click="AddContition">
-                            <font-awesome-icon icon="fa-solid fa-circle-plus" />
-                        </SecondaryButton>
-
-
-                    </div>
-                </form>
-
-
-            </div>
-        </div>
-
-
+        <JsonQueryBuilder :query="query" :queryOptions="rpoFields" @run-query="submit" ></JsonQueryBuilder>
 
     </GuestLayout>
 </template>
diff --git a/tailwind.config.js b/tailwind.config.js
index 95c4599..d06179c 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -8,6 +8,7 @@ module.exports = {
         './storage/framework/views/*.php',
         './resources/views/**/*.blade.php',
         './resources/js/**/*.vue',
+        "./node_modules/vue-tailwind-datepicker/**/*.js",
     ],
 
     theme: {
@@ -15,6 +16,10 @@ module.exports = {
             fontFamily: {
                 sans: ['Nunito', ...defaultTheme.fontFamily.sans],
             },
+            colors: {
+                "vtd-primary": colors.sky, // Light mode Datepicker color
+                "vtd-secondary": colors.gray, // Dark mode Datepicker color
+              },
         },
     },
 
diff --git a/yarn.lock b/yarn.lock
index 6eeb560..9c983b4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -73,6 +73,11 @@
   "resolved" "https://registry.npmjs.org/@fortawesome/vue-fontawesome/-/vue-fontawesome-3.0.2.tgz"
   "version" "3.0.2"
 
+"@heroicons/vue@^2.0.13":
+  "integrity" "sha512-vVCVF02+rNKXEmanVNnmktJlxCbOn0qVFP1gfZPn4bcBIwPX3h9AVHGCkwly+IWDEME8w5oooG0KRd2hhSe/HQ=="
+  "resolved" "https://registry.npmjs.org/@heroicons/vue/-/vue-2.0.13.tgz"
+  "version" "2.0.13"
+
 "@inertiajs/inertia-vue3@^0.6.0":
   "integrity" "sha512-qhPBtd/G0VS7vVVbYw1rrqKB6JqRusxqt+5ec2GLmK6t7fTlBBnZ3KsakmGZLSM1m1OGkNcfn4ifmCk3zfA8RQ=="
   "resolved" "https://registry.npmjs.org/@inertiajs/inertia-vue3/-/inertia-vue3-0.6.0.tgz"
@@ -467,7 +472,7 @@
   "resolved" "https://registry.npmjs.org/csstype/-/csstype-2.6.21.tgz"
   "version" "2.6.21"
 
-"dayjs@^1.10.5":
+"dayjs@^1.10.5", "dayjs@^1.11.5", "dayjs@^1.11.7":
   "integrity" "sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ=="
   "resolved" "https://registry.npmjs.org/dayjs/-/dayjs-1.11.7.tgz"
   "version" "1.11.7"
@@ -1066,7 +1071,7 @@
   "resolved" "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz"
   "version" "1.0.0"
 
-"tailwindcss@^3.2.1", "tailwindcss@>=3.0.0 || >= 3.0.0-alpha.1":
+"tailwindcss@^3.1.8", "tailwindcss@^3.2.1", "tailwindcss@>=3.0.0 || >= 3.0.0-alpha.1":
   "integrity" "sha512-AhwtHCKMtR71JgeYDaswmZXhPcW9iuI9Sp2LvZPo9upDZ7231ZJ7eA9RaURbhpXGVlrjX4cFNlB4ieTetEb7hQ=="
   "resolved" "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.2.4.tgz"
   "version" "3.2.4"
@@ -1141,6 +1146,11 @@
   "resolved" "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz"
   "version" "1.0.2"
 
+"vite-plugin-css-injected-by-js@^2.0.4":
+  "integrity" "sha512-SRGuyY1WUHj7cPzv7AIE0bG5Cb+vioxuq3CkFc1j0b8z5Cy3rXLG8SwxjriylFcZAY7tH2jU4i1bsCJRE/ou6g=="
+  "resolved" "https://registry.npmjs.org/vite-plugin-css-injected-by-js/-/vite-plugin-css-injected-by-js-2.2.0.tgz"
+  "version" "2.2.0"
+
 "vite-plugin-full-reload@^1.0.5":
   "integrity" "sha512-kVZFDFWr0DxiHn6MuDVTQf7gnWIdETGlZh0hvTiMXzRN80vgF4PKbONSq8U1d0WtHsKaFODTQgJeakLacoPZEQ=="
   "resolved" "https://registry.npmjs.org/vite-plugin-full-reload/-/vite-plugin-full-reload-1.0.5.tgz"
@@ -1149,7 +1159,7 @@
     "picocolors" "^1.0.0"
     "picomatch" "^2.3.1"
 
-"vite@^2 || ^3 || ^4", "vite@^3.0.0 || ^4.0.0", "vite@^4.0.0":
+"vite@^2 || ^3 || ^4", "vite@^3.0.0 || ^4.0.0", "vite@^4.0.0", "vite@>2.0.0-0":
   "integrity" "sha512-HvuNv1RdE7deIfQb8mPk51UKjqptO/4RXZ5yXSAvurd5xOckwS/gg8h9Tky3uSbnjYTgUm0hVCet1cyhKd73ZA=="
   "resolved" "https://registry.npmjs.org/vite/-/vite-4.0.3.tgz"
   "version" "4.0.3"
@@ -1161,6 +1171,13 @@
   optionalDependencies:
     "fsevents" "~2.3.2"
 
+"vue-tailwind-datepicker@^1.2.6":
+  "integrity" "sha512-OCOL6hqhnu998hI8K6qGwyhHUOcgBhXhhWXSCQTAB040ALryO8IPYLef+qbsra27BG5aB4IJN87bUQXg5Ks1Tg=="
+  "resolved" "https://registry.npmjs.org/vue-tailwind-datepicker/-/vue-tailwind-datepicker-1.2.6.tgz"
+  "version" "1.2.6"
+  dependencies:
+    "vite-plugin-css-injected-by-js" "^2.0.4"
+
 "vue-types@^3.0.0":
   "integrity" "sha512-IwUC0Aq2zwaXqy74h4WCvFCUtoV0iSWr0snWnE9TnU18S66GAQyqQbRf2qfJtUuiFsBf6qp0MEwdonlwznlcrw=="
   "resolved" "https://registry.npmjs.org/vue-types/-/vue-types-3.0.2.tgz"
@@ -1168,7 +1185,7 @@
   dependencies:
     "is-plain-object" "3.0.1"
 
-"vue@^3.0.0", "vue@^3.0.1", "vue@^3.2.25", "vue@^3.2.41", "vue@>= 3.0.0 < 4", "vue@>=3.0.3", "vue@>=3.2.0", "vue@2 || 3", "vue@3.2.45":
+"vue@^3.0.0", "vue@^3.0.1", "vue@^3.2.25", "vue@^3.2.38", "vue@^3.2.41", "vue@>= 3", "vue@>= 3.0.0 < 4", "vue@>=3.0.3", "vue@>=3.2.0", "vue@2 || 3", "vue@3.2.45":
   "integrity" "sha512-9Nx/Mg2b2xWlXykmCwiTUCWHbWIj53bnkizBxKai1g61f2Xit700A1ljowpTIM11e3uipOeiPcSqnmBg6gyiaA=="
   "resolved" "https://registry.npmjs.org/vue/-/vue-3.2.45.tgz"
   "version" "3.2.45"