From 8322913e38ee4b0db432aa0878165cd401499218 Mon Sep 17 00:00:00 2001
From: Nadim Salloum <hello@salloum.ch>
Date: Wed, 16 Jun 2021 14:40:02 +0300
Subject: [PATCH] small design fixes

---
 package.json                               |   3 +-
 public/js/app.js                           | 122 +++++++++++----------
 resources/js/Components/Documents/View.vue |   4 +-
 resources/js/Components/SimpleTable.vue    | 111 +++++++++----------
 resources/js/Pages/Dashboard.vue           |   6 +-
 5 files changed, 124 insertions(+), 122 deletions(-)

diff --git a/package.json b/package.json
index fba8a47..bffdd11 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,6 @@
     },
     "devDependencies": {
         "@inertiajs/inertia": "^0.8.4",
-        "@inertiajs/inertia-vue3": "^0.3.5",
         "@inertiajs/progress": "^0.2.4",
         "@tailwindcss/forms": "^0.2.1",
         "@tailwindcss/typography": "^0.3.0",
@@ -24,10 +23,10 @@
         "postcss": "^8.1.14",
         "postcss-import": "^12.0.1",
         "tailwindcss": "^2.0.1",
-       
         "vue-loader": "^16.1.2"
     },
     "dependencies": {
+        "@inertiajs/inertia-vue3": "^0.3.5",
         "vue-currency-input": "^2.0.0",
         "vue-multiselect": "^3.0.0-alpha.2",
         "vue-unicons": "^3.2.1",
diff --git a/public/js/app.js b/public/js/app.js
index dafc232..236969c 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -18268,15 +18268,15 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
 /* harmony import */ var _inertiajs_inertia_vue3__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @inertiajs/inertia-vue3 */ "./node_modules/@inertiajs/inertia-vue3/dist/index.js");
-/* harmony import */ var _Components_Documents_Item_vue__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @/Components/Documents/Item.vue */ "./resources/js/Components/Documents/Item.vue");
-/* harmony import */ var _Components_Documents_Upload_vue__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @/Components/Documents/Upload.vue */ "./resources/js/Components/Documents/Upload.vue");
+/* harmony import */ var _Item_vue__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Item.vue */ "./resources/js/Components/Documents/Item.vue");
+/* harmony import */ var _Upload_vue__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Upload.vue */ "./resources/js/Components/Documents/Upload.vue");
 
 
 
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({
   components: {
-    DocumentItem: _Components_Documents_Item_vue__WEBPACK_IMPORTED_MODULE_1__.default,
-    DocumentUpload: _Components_Documents_Upload_vue__WEBPACK_IMPORTED_MODULE_2__.default
+    DocumentItem: _Item_vue__WEBPACK_IMPORTED_MODULE_1__.default,
+    DocumentUpload: _Upload_vue__WEBPACK_IMPORTED_MODULE_2__.default
   },
   props: {
     initial_documents: Object,
@@ -20696,9 +20696,13 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _Jetstream_Label_vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @/Jetstream/Label.vue */ "./resources/js/Jetstream/Label.vue");
 /* harmony import */ var _Jetstream_Input_vue__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @/Jetstream/Input.vue */ "./resources/js/Jetstream/Input.vue");
 /* harmony import */ var _Jetstream_InputError__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @/Jetstream/InputError */ "./resources/js/Jetstream/InputError.vue");
+/* harmony import */ var lodash__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! lodash */ "./node_modules/lodash/lodash.js");
+/* harmony import */ var lodash__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(lodash__WEBPACK_IMPORTED_MODULE_3__);
 
 
 
+ // import { throttle } from 'lodash';
+
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({
   components: {
     JetLabel: _Jetstream_Label_vue__WEBPACK_IMPORTED_MODULE_0__.default,
@@ -20707,6 +20711,32 @@ __webpack_require__.r(__webpack_exports__);
   },
   props: {
     form: Object
+  },
+  watch: {
+    'form.zip': function formZip(newVal, oldVal) {
+      this.fetchCity(newVal, oldVal);
+    }
+  },
+  methods: {
+    fetchCity: function fetchCity(newVal, oldVal) {
+      var _this = this;
+
+      if (newVal !== oldVal && newVal.length === 4 && this.form.country === 'CH') {
+        axios.get("https://swisspost.opendatasoft.com/api/records/1.0/search/?dataset=plz_verzeichnis_v2&q=&facet=ortbez18&refine.postleitzahl=".concat(newVal)).then(function (response) {
+          var records = response.data.records;
+
+          if (records.length > 1) {
+            records = records.filter(function (rec) {
+              return rec.geometry;
+            });
+          }
+
+          if (records[0]) {
+            _this.form.city = records[0].fields.ortbez18;
+          }
+        });
+      }
+    }
   }
 });
 
@@ -24176,61 +24206,55 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ "./node_modules/vue/dist/vue.esm-bundler.js");
 
 var _hoisted_1 = {
-  "class": "bg-grey overflow-hidden sm:rounded-lg"
+  key: 0,
+  "class": "font-semibold text-2xl font-medium mb-4 text-indigo-900 leading-tight"
 };
 var _hoisted_2 = {
-  key: 0,
-  "class": "whitespace-nowrap mb-3"
-};
-var _hoisted_3 = {
-  "class": "mb-1 font-bold text-3xl"
-};
-var _hoisted_4 = {
   key: 1,
   "class": "my-6 flex justify-between items-center"
 };
-var _hoisted_5 = {
+var _hoisted_3 = {
   "class": "flex items-center w-full max-w-md mr-4"
 };
-var _hoisted_6 = {
+var _hoisted_4 = {
   "class": "flex w-full bg-white shadow rounded"
 };
 
-var _hoisted_7 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)(" Excel-Export ");
+var _hoisted_5 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)(" Excel-Export ");
 
-var _hoisted_8 = {
+var _hoisted_6 = {
   key: 2,
-  "class": "bg-white rounded-md shadow overflow-x-auto"
+  "class": "bg-white shadow rounded-md sm:rounded-lg overflow-x-auto"
 };
-var _hoisted_9 = {
+var _hoisted_7 = {
   "class": "w-full whitespace-nowrap"
 };
-var _hoisted_10 = {
+var _hoisted_8 = {
   "class": "text-left font-bold"
 };
-var _hoisted_11 = {
+var _hoisted_9 = {
   key: 1,
   "class": "flex items-center"
 };
-var _hoisted_12 = {
+var _hoisted_10 = {
   key: 2,
   "class": "px-6 py-4 flex items-center"
 };
-var _hoisted_13 = {
+var _hoisted_11 = {
   key: 0,
   "class": "border-t w-px"
 };
-var _hoisted_14 = {
+var _hoisted_12 = {
   key: 0
 };
-var _hoisted_15 = {
+var _hoisted_13 = {
   key: 3
 };
-var _hoisted_16 = {
+var _hoisted_14 = {
   "class": "inline-flex font-medium text-gray-500 ml-3"
 };
 
-var _hoisted_17 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)(" Keine Einträge gefunden ");
+var _hoisted_15 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)(" Keine Einträge gefunden ");
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   var _this = this;
@@ -24241,9 +24265,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 
   var _component_Paginator = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("Paginator");
 
-  return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("div", null, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_1, [$props.title ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("div", _hoisted_2, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("h1", _hoisted_3, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.title), 1
+  return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("div", null, [$props.title ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("p", _hoisted_1, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.title), 1
   /* TEXT */
-  )])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true), $data.form ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("div", _hoisted_4, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_5, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_6, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.withDirectives)((0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("input", {
+  )) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true), $data.form ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("div", _hoisted_2, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_3, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_4, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.withDirectives)((0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("input", {
     type: "text",
     ref: "search",
     "onUpdate:modelValue": _cache[1] || (_cache[1] = function ($event) {
@@ -24276,9 +24300,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     height: "24",
     width: "24",
     name: "chart"
-  }), _hoisted_7], 8
+  }), _hoisted_5], 8
   /* PROPS */
-  , ["href"])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true), $props.data.total === undefined || $props.data.total > 0 ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("div", _hoisted_8, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("table", _hoisted_9, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("tr", _hoisted_10, [((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(true), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)(vue__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,vue__WEBPACK_IMPORTED_MODULE_0__.renderList)($props.columns, function (col, index) {
+  , ["href"])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true), $props.data.total === undefined || $props.data.total > 0 ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("div", _hoisted_6, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("table", _hoisted_7, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("tr", _hoisted_8, [((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(true), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)(vue__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,vue__WEBPACK_IMPORTED_MODULE_0__.renderList)($props.columns, function (col, index) {
     return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("th", {
       key: col.key,
       "class": "px-6 pt-4 pb-4",
@@ -24306,7 +24330,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       name: "arrow-down"
     })) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)], 8
     /* PROPS */
-    , ["onClick"])) : ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("span", _hoisted_11, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(col.value), 1
+    , ["onClick"])) : ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("span", _hoisted_9, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(col.value), 1
     /* TEXT */
     ))], 8
     /* PROPS */
@@ -24349,12 +24373,12 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         name: "trash-alt"
       })], 8
       /* PROPS */
-      , ["onClick"])) : ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("span", _hoisted_12, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($options.resolve(col.key, row)), 1
+      , ["onClick"])) : ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("span", _hoisted_10, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($options.resolve(col.key, row)), 1
       /* TEXT */
       ))]);
     }), 128
     /* KEYED_FRAGMENT */
-    )), row.link && !$props.hideArrow ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("td", _hoisted_13, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_inertia_link, {
+    )), row.link && !$props.hideArrow ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("td", _hoisted_11, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_inertia_link, {
       "class": "px-4 flex items-center",
       href: row.link,
       tabindex: "-1"
@@ -24375,19 +24399,19 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     , ["href"])])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)]);
   }), 128
   /* KEYED_FRAGMENT */
-  )), $props.data.total === 0 ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("tr", _hoisted_14, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("td", {
+  )), $props.data.total === 0 ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("tr", _hoisted_12, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("td", {
     "class": "border-t px-6 py-4",
     colspan: $props.columns.length
   }, "Keine Einträge gefunden", 8
   /* PROPS */
-  , ["colspan"])])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)])])) : ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("div", _hoisted_15, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("span", _hoisted_16, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_unicon, {
+  , ["colspan"])])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)])])) : ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("div", _hoisted_13, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("span", _hoisted_14, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_unicon, {
     fill: "#7e8491",
     "class": "mr-2",
     height: "24",
     width: "24",
     name: "meh"
-  }), _hoisted_17])]))]), $props.data.links ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)(_component_Paginator, {
-    key: 0,
+  }), _hoisted_15])])), $props.data.links ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)(_component_Paginator, {
+    key: 4,
     "class": "mt-6",
     links: $props.data.links
   }, null, 8
@@ -30314,23 +30338,9 @@ var _hoisted_2 = {
 var _hoisted_3 = {
   "class": "lg:col-span-6 col-span-12"
 };
-
-var _hoisted_4 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("p", {
-  "class": "font-semibold text-xl font-medium mb-4 text-indigo-900 leading-tight"
-}, "Neueste Einkäufe", -1
-/* HOISTED */
-);
-
-var _hoisted_5 = {
+var _hoisted_4 = {
   "class": "lg:col-span-6 col-span-12"
 };
-
-var _hoisted_6 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("p", {
-  "class": "font-semibold text-xl font-medium mb-4 text-indigo-900 leading-tight"
-}, "Neueste Verkäufe", -1
-/* HOISTED */
-);
-
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_dash_item = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("dash-item");
 
@@ -30359,16 +30369,16 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         number: $props.sold_this_year
       }, null, 8
       /* PROPS */
-      , ["title", "number"]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_3, [_hoisted_4, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_simple_table, {
-        "class": "shadow rounded-md sm:rounded-lg",
+      , ["title", "number"]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_3, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_simple_table, {
+        title: "Neueste Einkäufe",
         data: $props.buy_contracts,
         columns: $data.buyContractColumns,
         currentRoute: $data.currentRoute,
         hideArrow: true
       }, null, 8
       /* PROPS */
-      , ["data", "columns", "currentRoute"])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_5, [_hoisted_6, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_simple_table, {
-        "class": "shadow rounded-md sm:rounded-lg",
+      , ["data", "columns", "currentRoute"])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_4, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_simple_table, {
+        title: "Neueste Verkäufe",
         data: $props.sell_contracts,
         columns: $data.sellContractColumns,
         currentRoute: $data.currentRoute,
diff --git a/resources/js/Components/Documents/View.vue b/resources/js/Components/Documents/View.vue
index 8a499dc..6b7f2f1 100644
--- a/resources/js/Components/Documents/View.vue
+++ b/resources/js/Components/Documents/View.vue
@@ -10,8 +10,8 @@
 
 <script>
 import { useForm } from '@inertiajs/inertia-vue3';
-import DocumentItem from '@/Components/Documents/Item.vue';
-import DocumentUpload from '@/Components/Documents/Upload.vue';
+import DocumentItem from './Item.vue';
+import DocumentUpload from './Upload.vue';
 
 export default {
   components: {
diff --git a/resources/js/Components/SimpleTable.vue b/resources/js/Components/SimpleTable.vue
index 77d871d..6fa15ec 100644
--- a/resources/js/Components/SimpleTable.vue
+++ b/resources/js/Components/SimpleTable.vue
@@ -1,66 +1,61 @@
 <template>
     <div>
-        <div class="bg-grey overflow-hidden sm:rounded-lg">
-            <div v-if="title" class="whitespace-nowrap mb-3">
-                <h1 class="mb-1 font-bold text-3xl">{{ title }}</h1>
-            </div>
-            <div v-if="form" class="my-6 flex justify-between items-center">
-                <div class="flex items-center w-full max-w-md mr-4">
-                    <div class="flex w-full bg-white shadow rounded">
-                        <input type="text" ref="search" v-model="form.search" autofocus="true" name="search" placeholder="Suchen..." class="relative border-gray-200 w-full px-6 py-3 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded" autocomplete="off">
-                    </div>
-                    <button @click="reset" type="button" class="ml-3 text-sm text-gray-500 hover:text-gray-700 focus:text-blue-200">Reset</button>
+        <p v-if="title" class="font-semibold text-2xl font-medium mb-4 text-indigo-900 leading-tight">{{ title }}</p>
+        <div v-if="form" class="my-6 flex justify-between items-center">
+            <div class="flex items-center w-full max-w-md mr-4">
+                <div class="flex w-full bg-white shadow rounded">
+                    <input type="text" ref="search" v-model="form.search" autofocus="true" name="search" placeholder="Suchen..." class="relative border-gray-200 w-full px-6 py-3 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded" autocomplete="off">
                 </div>
-                <a v-if="print" :href="route(currentRoute + '.print', { search: form.search, sortBy: sort.by, direction: sort.direction })" class="justify-center inline-flex items-center px-4 py-2 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest focus:outline-none focus:ring disabled:opacity-25 transition bg-green-800 hover:bg-green-700 active:bg-green-900 focus:border-green-900 focus:ring-green-300 py-3">
-                    <unicon fill="white" class="mr-2" height="24" width="24" name="chart"></unicon>
-                    Excel-Export
-                </a>
-            </div>
-            <div v-if="data.total === undefined || data.total > 0" class="bg-white rounded-md shadow overflow-x-auto">
-                <table class="w-full whitespace-nowrap">
-                   <tr class="text-left font-bold">
-                        <th v-for="(col, index) in columns" :key="col.key" class="px-6 pt-4 pb-4" :colspan="[index == (columns.length - 1) ? 2 : 1]">
-                            <a v-if="col.sortable" href="#" @click="sortTable(col.key)" class="flex place-items-center">
-                                {{ col.value }}
-                                <unicon v-if="isActiveSort(col.key, 'asc')" fill="#4B5563" height="22" width="22" name="arrow-up"></unicon>
-                                <unicon v-if="isActiveSort(col.key, 'desc')" fill="#4B5563" height="22" width="22" name="arrow-down"></unicon>
-                            </a>
-                            <span v-else class="flex items-center">
-                                {{ col.value }}
-                            </span>
-                        </th>
-                    </tr>
-                    <tr v-for="row in (this.data.data ? this.data.data : this.data)" :key="row.link" class="hover:bg-indigo-100 focus-within:bg-indigo-100">
-                        <td v-for="col in columns" :key="col.key" class="border-t">
-                            <inertia-link v-if="row.link" class="px-6 py-4 flex items-center" :href="row.link">
-                                {{ resolve(col.key, row) }}
-                            </inertia-link>
-                            <span v-else-if="col.key == 'delete'" class="p-3 cursor-pointer" @click="this.$emit('delete', row.id)">
-                                <unicon fill="red" height="24" width="24" name="trash-alt"></unicon>
-                            </span>
-                            <span v-else class="px-6 py-4 flex items-center">
-                                {{ resolve(col.key, row) }}
-                            </span>
-                        </td>
-                        <td v-if="row.link && !hideArrow" class="border-t w-px">
-                            <inertia-link class="px-4 flex items-center" :href="row.link" tabindex="-1">
-                                <unicon class="m-2" height="22" width="22" name="angle-right"></unicon>
-                            </inertia-link>
-                        </td>
-                    </tr>
-                    <tr v-if="data.total === 0">
-                        <td class="border-t px-6 py-4" :colspan="columns.length">Keine Einträge gefunden</td>
-                    </tr>
-                </table>
-            </div>
-            <div v-else>
-                <span class="inline-flex font-medium text-gray-500 ml-3">
-                    <unicon fill="#7e8491" class="mr-2" height="24" width="24" name="meh"></unicon>
-                    Keine Einträge gefunden
-                </span>
+                <button @click="reset" type="button" class="ml-3 text-sm text-gray-500 hover:text-gray-700 focus:text-blue-200">Reset</button>
             </div>
+            <a v-if="print" :href="route(currentRoute + '.print', { search: form.search, sortBy: sort.by, direction: sort.direction })" class="justify-center inline-flex items-center px-4 py-2 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest focus:outline-none focus:ring disabled:opacity-25 transition bg-green-800 hover:bg-green-700 active:bg-green-900 focus:border-green-900 focus:ring-green-300 py-3">
+                <unicon fill="white" class="mr-2" height="24" width="24" name="chart"></unicon>
+                Excel-Export
+            </a>
+        </div>
+        <div v-if="data.total === undefined || data.total > 0" class="bg-white shadow rounded-md sm:rounded-lg overflow-x-auto">
+            <table class="w-full whitespace-nowrap">
+                <tr class="text-left font-bold">
+                    <th v-for="(col, index) in columns" :key="col.key" class="px-6 pt-4 pb-4" :colspan="[index == (columns.length - 1) ? 2 : 1]">
+                        <a v-if="col.sortable" href="#" @click="sortTable(col.key)" class="flex place-items-center">
+                            {{ col.value }}
+                            <unicon v-if="isActiveSort(col.key, 'asc')" fill="#4B5563" height="22" width="22" name="arrow-up"></unicon>
+                            <unicon v-if="isActiveSort(col.key, 'desc')" fill="#4B5563" height="22" width="22" name="arrow-down"></unicon>
+                        </a>
+                        <span v-else class="flex items-center">
+                            {{ col.value }}
+                        </span>
+                    </th>
+                </tr>
+                <tr v-for="row in (this.data.data ? this.data.data : this.data)" :key="row.link" class="hover:bg-indigo-100 focus-within:bg-indigo-100">
+                    <td v-for="col in columns" :key="col.key" class="border-t">
+                        <inertia-link v-if="row.link" class="px-6 py-4 flex items-center" :href="row.link">
+                            {{ resolve(col.key, row) }}
+                        </inertia-link>
+                        <span v-else-if="col.key == 'delete'" class="p-3 cursor-pointer" @click="this.$emit('delete', row.id)">
+                            <unicon fill="red" height="24" width="24" name="trash-alt"></unicon>
+                        </span>
+                        <span v-else class="px-6 py-4 flex items-center">
+                            {{ resolve(col.key, row) }}
+                        </span>
+                    </td>
+                    <td v-if="row.link && !hideArrow" class="border-t w-px">
+                        <inertia-link class="px-4 flex items-center" :href="row.link" tabindex="-1">
+                            <unicon class="m-2" height="22" width="22" name="angle-right"></unicon>
+                        </inertia-link>
+                    </td>
+                </tr>
+                <tr v-if="data.total === 0">
+                    <td class="border-t px-6 py-4" :colspan="columns.length">Keine Einträge gefunden</td>
+                </tr>
+            </table>
+        </div>
+        <div v-else>
+            <span class="inline-flex font-medium text-gray-500 ml-3">
+                <unicon fill="#7e8491" class="mr-2" height="24" width="24" name="meh"></unicon>
+                Keine Einträge gefunden
+            </span>
         </div>
-
         <Paginator v-if="data.links" class="mt-6" :links="data.links" />
     </div>
 </template>
diff --git a/resources/js/Pages/Dashboard.vue b/resources/js/Pages/Dashboard.vue
index c1977b3..5ac1376 100644
--- a/resources/js/Pages/Dashboard.vue
+++ b/resources/js/Pages/Dashboard.vue
@@ -10,12 +10,10 @@
             <dash-item :title="'Gekauft im ' + new Date().getFullYear()" :number="bought_this_year" />
             <dash-item :title="'Verkauft im ' + new Date().getFullYear()" :number="sold_this_year" />
             <div class="lg:col-span-6 col-span-12">
-                <p class="font-semibold text-xl font-medium mb-4 text-indigo-900 leading-tight">Neueste Einkäufe</p>
-                <simple-table class="shadow rounded-md sm:rounded-lg" :data="buy_contracts" :columns="buyContractColumns" :currentRoute="currentRoute" :hideArrow="true" />
+                <simple-table title="Neueste Einkäufe" :data="buy_contracts" :columns="buyContractColumns" :currentRoute="currentRoute" :hideArrow="true" />
             </div>
             <div class="lg:col-span-6 col-span-12">
-                <p class="font-semibold text-xl font-medium mb-4 text-indigo-900 leading-tight">Neueste Verkäufe</p>
-                <simple-table class="shadow rounded-md sm:rounded-lg" :data="sell_contracts" :columns="sellContractColumns" :currentRoute="currentRoute" :hideArrow="true" />
+                <simple-table title="Neueste Verkäufe" :data="sell_contracts" :columns="sellContractColumns" :currentRoute="currentRoute" :hideArrow="true" />
             </div>
         </div>
     </layout>