refactor contracts table

app/Http/Controllers/ContractController.php

@@ -32,7 +32,7 @@ class ContractController extends Controller
                                     return [
                                         'date' => $contract->date_formatted,
                                         'price' => $contract->price->format(),
-                                        'car' => $contract->car->name,
+                                        'car' => $contract->car->name_with_year,
                                         'contact' => $contract->contact->title,
                                         'link' => route('contracts.show', $contract),
                                     ];
@@ -45,7 +45,7 @@ class ContractController extends Controller
                                     return [
                                         'date' => $contract->date_formatted,
                                         'price' => $contract->price->format(),
-                                        'car' => $contract->car->name,
+                                        'car' => $contract->car->name_with_year,
                                         'contact' => $contract->contact->title,
                                         'link' => route('contracts.show', $contract),
                                     ];

public/js/app.js

@@ -17840,6 +17840,48 @@ __webpack_require__.r(__webpack_exports__);
 
 /***/ }),
 
+/***/ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/Components/Buttons/CreateContractButton.vue?vue&type=script&lang=js":
+/*!**********************************************************************************************************************************************************************************************************************!*\
+  !*** ./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/Components/Buttons/CreateContractButton.vue?vue&type=script&lang=js ***!
+  \**********************************************************************************************************************************************************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var _StandardButton_vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./StandardButton.vue */ "./resources/js/Components/Buttons/StandardButton.vue");
+
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({
+  components: {
+    StandardButton: _StandardButton_vue__WEBPACK_IMPORTED_MODULE_0__.default
+  },
+  props: {
+    type: Number,
+    contactId: Number,
+    carId: Number
+  },
+  computed: {
+    text: function text() {
+      return this.type === 1 ? 'Verkaufsvertrag' : 'Ankaufsvertrag';
+    },
+    link: function link() {
+      if (this.contactId && this.carId) {
+        return route('contracts.create', [this.type, this.carId, this.contactId]);
+      }
+
+      if (this.contactId) {
+        return route('contracts.create_from_contact', [this.type, this.contactId]);
+      }
+
+      return route('contracts.create_from_car', [this.type, this.carId]);
+    }
+  }
+});
+
+/***/ }),
+
 /***/ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/Components/Buttons/DeleteButton.vue?vue&type=script&lang=js":
 /*!**************************************************************************************************************************************************************************************************************!*\
   !*** ./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/Components/Buttons/DeleteButton.vue?vue&type=script&lang=js ***!
@@ -18101,6 +18143,74 @@ __webpack_require__.r(__webpack_exports__);
 
 /***/ }),
 
+/***/ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/Components/Contracts/ContractTable.vue?vue&type=script&lang=js":
+/*!*****************************************************************************************************************************************************************************************************************!*\
+  !*** ./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/Components/Contracts/ContractTable.vue?vue&type=script&lang=js ***!
+  \*****************************************************************************************************************************************************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var _Buttons_CreateContractButton_vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../Buttons/CreateContractButton.vue */ "./resources/js/Components/Buttons/CreateContractButton.vue");
+/* harmony import */ var _Components_SimpleTable_vue__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @/Components/SimpleTable.vue */ "./resources/js/Components/SimpleTable.vue");
+
+
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({
+  components: {
+    CreateContractButton: _Buttons_CreateContractButton_vue__WEBPACK_IMPORTED_MODULE_0__.default,
+    SimpleTable: _Components_SimpleTable_vue__WEBPACK_IMPORTED_MODULE_1__.default
+  },
+  props: {
+    contracts: Array,
+    contactId: Number,
+    type: Number,
+    carId: Number,
+    show_upload: Boolean,
+    title: String
+  },
+  computed: {
+    columns: function columns() {
+      if (this.contracts.length === 0) {
+        return [];
+      }
+
+      var columns = [{
+        key: 'date',
+        value: 'Datum',
+        sortable: false
+      }];
+
+      if (this.contracts[0].car) {
+        columns.push({
+          key: 'car',
+          value: 'Auto',
+          sortable: false
+        });
+      }
+
+      if (this.contracts[0].contact) {
+        columns.push({
+          key: 'contact',
+          value: this.type == '1' ? 'Käufer' : 'Verkäufer',
+          sortable: false
+        });
+      }
+
+      columns.push({
+        key: 'price',
+        value: this.type == '1' ? 'Verkaufspreis' : 'Einkaufspreis',
+        sortable: false
+      });
+      return columns;
+    }
+  }
+});
+
+/***/ }),
+
 /***/ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/Components/CurrencyInput.vue?vue&type=script&lang=js":
 /*!*******************************************************************************************************************************************************************************************************!*\
   !*** ./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/Components/CurrencyInput.vue?vue&type=script&lang=js ***!
@@ -20470,9 +20580,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _Components_Buttons_EditButton_vue__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @/Components/Buttons/EditButton.vue */ "./resources/js/Components/Buttons/EditButton.vue");
 /* harmony import */ var _Components_Buttons_DeleteButton_vue__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @/Components/Buttons/DeleteButton.vue */ "./resources/js/Components/Buttons/DeleteButton.vue");
 /* harmony import */ var _Components_Buttons_RestoreButton_vue__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @/Components/Buttons/RestoreButton.vue */ "./resources/js/Components/Buttons/RestoreButton.vue");
-/* harmony import */ var _Components_Buttons_StandardButton_vue__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @/Components/Buttons/StandardButton.vue */ "./resources/js/Components/Buttons/StandardButton.vue");
+/* harmony import */ var _Components_Contracts_ContractTable_vue__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../Components/Contracts/ContractTable.vue */ "./resources/js/Components/Contracts/ContractTable.vue");
-/* harmony import */ var _Components_SimpleTable_vue__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! @/Components/SimpleTable.vue */ "./resources/js/Components/SimpleTable.vue");
-
 
 
 
@@ -20492,42 +20600,10 @@ __webpack_require__.r(__webpack_exports__);
     EditButton: _Components_Buttons_EditButton_vue__WEBPACK_IMPORTED_MODULE_5__.default,
     DeleteButton: _Components_Buttons_DeleteButton_vue__WEBPACK_IMPORTED_MODULE_6__.default,
     RestoreButton: _Components_Buttons_RestoreButton_vue__WEBPACK_IMPORTED_MODULE_7__.default,
-    StandardButton: _Components_Buttons_StandardButton_vue__WEBPACK_IMPORTED_MODULE_8__.default,
+    ContractTable: _Components_Contracts_ContractTable_vue__WEBPACK_IMPORTED_MODULE_8__.default
-    SimpleTable: _Components_SimpleTable_vue__WEBPACK_IMPORTED_MODULE_9__.default
   },
   props: {
     car: Object
-  },
-  data: function data() {
-    return {
-      currentRoute: 'cars.show',
-      buyContractColumns: [{
-        key: 'date',
-        value: 'Datum',
-        sortable: false
-      }, {
-        key: 'contact',
-        value: 'Verkäufer',
-        sortable: false
-      }, {
-        key: 'price',
-        value: 'Einkaufspreis',
-        sortable: false
-      }],
-      sellContractColumns: [{
-        key: 'date',
-        value: 'Datum',
-        sortable: false
-      }, {
-        key: 'contact',
-        value: 'Käufer',
-        sortable: false
-      }, {
-        key: 'price',
-        value: 'Verkaufspreis',
-        sortable: false
-      }]
-    };
   }
 });
 
@@ -21050,9 +21126,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _Components_Buttons_EditButton_vue__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @/Components/Buttons/EditButton.vue */ "./resources/js/Components/Buttons/EditButton.vue");
 /* harmony import */ var _Components_Buttons_DeleteButton_vue__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @/Components/Buttons/DeleteButton.vue */ "./resources/js/Components/Buttons/DeleteButton.vue");
 /* harmony import */ var _Components_Buttons_RestoreButton_vue__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @/Components/Buttons/RestoreButton.vue */ "./resources/js/Components/Buttons/RestoreButton.vue");
-/* harmony import */ var _Components_SimpleTable_vue__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @/Components/SimpleTable.vue */ "./resources/js/Components/SimpleTable.vue");
+/* harmony import */ var _Components_Contracts_ContractTable_vue__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../Components/Contracts/ContractTable.vue */ "./resources/js/Components/Contracts/ContractTable.vue");
-/* harmony import */ var _Components_Buttons_StandardButton_vue__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! @/Components/Buttons/StandardButton.vue */ "./resources/js/Components/Buttons/StandardButton.vue");
-
 
 
 
@@ -21072,42 +21146,10 @@ __webpack_require__.r(__webpack_exports__);
     EditButton: _Components_Buttons_EditButton_vue__WEBPACK_IMPORTED_MODULE_5__.default,
     DeleteButton: _Components_Buttons_DeleteButton_vue__WEBPACK_IMPORTED_MODULE_6__.default,
     RestoreButton: _Components_Buttons_RestoreButton_vue__WEBPACK_IMPORTED_MODULE_7__.default,
-    SimpleTable: _Components_SimpleTable_vue__WEBPACK_IMPORTED_MODULE_8__.default,
+    ContractTable: _Components_Contracts_ContractTable_vue__WEBPACK_IMPORTED_MODULE_8__.default
-    StandardButton: _Components_Buttons_StandardButton_vue__WEBPACK_IMPORTED_MODULE_9__.default
   },
   props: {
     contact: Object
-  },
-  data: function data() {
-    return {
-      currentRoute: 'contacts.show',
-      buyContractColumns: [{
-        key: 'date',
-        value: 'Datum',
-        sortable: false
-      }, {
-        key: 'car',
-        value: 'Auto',
-        sortable: false
-      }, {
-        key: 'price',
-        value: 'Einkaufspreis',
-        sortable: false
-      }],
-      sellContractColumns: [{
-        key: 'date',
-        value: 'Datum',
-        sortable: false
-      }, {
-        key: 'car',
-        value: 'Auto',
-        sortable: false
-      }, {
-        key: 'price',
-        value: 'Verkaufspreis',
-        sortable: false
-      }]
-    };
   }
 });
 
@@ -21679,16 +21721,16 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
 /* harmony import */ var _Layouts_Layout__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @/Layouts/Layout */ "./resources/js/Layouts/Layout.vue");
-/* harmony import */ var _Components_SimpleTable_vue__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @/Components/SimpleTable.vue */ "./resources/js/Components/SimpleTable.vue");
+/* harmony import */ var _Components_Dashboard_DashItem_vue__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @/Components/Dashboard/DashItem.vue */ "./resources/js/Components/Dashboard/DashItem.vue");
-/* harmony import */ var _Components_Dashboard_DashItem_vue__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @/Components/Dashboard/DashItem.vue */ "./resources/js/Components/Dashboard/DashItem.vue");
+/* harmony import */ var _Components_Contracts_ContractTable_vue__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @/Components/Contracts/ContractTable.vue */ "./resources/js/Components/Contracts/ContractTable.vue");
 
 
 
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({
   components: {
     Layout: _Layouts_Layout__WEBPACK_IMPORTED_MODULE_0__.default,
-    SimpleTable: _Components_SimpleTable_vue__WEBPACK_IMPORTED_MODULE_1__.default,
+    ContractTable: _Components_Contracts_ContractTable_vue__WEBPACK_IMPORTED_MODULE_2__.default,
-    DashItem: _Components_Dashboard_DashItem_vue__WEBPACK_IMPORTED_MODULE_2__.default
+    DashItem: _Components_Dashboard_DashItem_vue__WEBPACK_IMPORTED_MODULE_1__.default
   },
   props: {
     buy_contracts: Object,
@@ -21696,39 +21738,6 @@ __webpack_require__.r(__webpack_exports__);
     sold_this_year: Number,
     bought_this_year: Number,
     my_cars: Number
-  },
-  data: function data() {
-    return {
-      currentRoute: 'cars',
-      buyContractColumns: [{
-        key: 'date',
-        value: 'Datum',
-        sortable: false
-      }, // {key: 'car', value: 'Auto', sortable: false},
-      {
-        key: 'contact',
-        value: 'Verkäufer',
-        sortable: false
-      }, {
-        key: 'price',
-        value: 'Einkaufspreis',
-        sortable: false
-      }],
-      sellContractColumns: [{
-        key: 'date',
-        value: 'Datum',
-        sortable: false
-      }, // {key: 'car', value: 'Auto', sortable: false},
-      {
-        key: 'contact',
-        value: 'Käufer',
-        sortable: false
-      }, {
-        key: 'price',
-        value: 'Verkaufspreis',
-        sortable: false
-      }]
-    };
   }
 });
 
@@ -22591,6 +22600,49 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 
 /***/ }),
 
+/***/ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/Components/Buttons/CreateContractButton.vue?vue&type=template&id=de1a188e":
+/*!**************************************************************************************************************************************************************************************************************************************************************************************************!*\
+  !*** ./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/Components/Buttons/CreateContractButton.vue?vue&type=template&id=de1a188e ***!
+  \**************************************************************************************************************************************************************************************************************************************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "render": () => (/* binding */ render)
+/* harmony export */ });
+/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ "./node_modules/vue/dist/vue.esm-bundler.js");
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _component_unicon = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("unicon");
+
+  var _component_standard_button = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("standard-button");
+
+  return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)(_component_standard_button, {
+    colour: "green",
+    href: $options.link
+  }, {
+    "default": (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
+      return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_unicon, {
+        fill: "currentColor",
+        "class": "mr-1",
+        height: "22",
+        width: "22",
+        name: "plus-circle"
+      }), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)(" " + (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($options.text), 1
+      /* TEXT */
+      )];
+    }),
+    _: 1
+    /* STABLE */
+
+  }, 8
+  /* PROPS */
+  , ["href"]);
+}
+
+/***/ }),
+
 /***/ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/Components/Buttons/DeleteButton.vue?vue&type=template&id=1c5557f6":
 /*!******************************************************************************************************************************************************************************************************************************************************************************************!*\
   !*** ./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/Components/Buttons/DeleteButton.vue?vue&type=template&id=1c5557f6 ***!
@@ -23263,6 +23315,50 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 
 /***/ }),
 
+/***/ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/Components/Contracts/ContractTable.vue?vue&type=template&id=42e73253":
+/*!*********************************************************************************************************************************************************************************************************************************************************************************************!*\
+  !*** ./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/Components/Contracts/ContractTable.vue?vue&type=template&id=42e73253 ***!
+  \*********************************************************************************************************************************************************************************************************************************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "render": () => (/* binding */ render)
+/* harmony export */ });
+/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ "./node_modules/vue/dist/vue.esm-bundler.js");
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _component_create_contract_button = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("create-contract-button");
+
+  var _component_simple_table = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("simple-table");
+
+  return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)(_component_simple_table, {
+    title: $props.title,
+    data: $props.contracts,
+    columns: $options.columns,
+    hideArrow: true
+  }, {
+    actions: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
+      return [$props.show_upload ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)(_component_create_contract_button, {
+        key: 0,
+        type: $props.type,
+        contactId: $props.contactId,
+        carId: $props.carId
+      }, null, 8
+      /* PROPS */
+      , ["type", "contactId", "carId"])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)];
+    }),
+    _: 1
+    /* STABLE */
+
+  }, 8
+  /* PROPS */
+  , ["title", "data", "columns"]);
+}
+
+/***/ }),
+
 /***/ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/Components/CurrencyInput.vue?vue&type=template&id=08bc457e":
 /*!***********************************************************************************************************************************************************************************************************************************************************************************!*\
   !*** ./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/Components/CurrencyInput.vue?vue&type=template&id=08bc457e ***!
@@ -24378,7 +24474,7 @@ var _hoisted_10 = {
 };
 var _hoisted_11 = {
   key: 2,
-  "class": "px-6 xl:py-4 py-2 flex items-center"
+  "class": "2xl:px-5 lg:px-3 md:px-2 px-1 2xl:py-4 lg:py-3 md:py-2 py-1 flex items-center"
 };
 var _hoisted_12 = {
   key: 0,
@@ -24447,7 +24543,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   , ["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.length > 0 || $props.data.total > 0 ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("div", _hoisted_7, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("table", _hoisted_8, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("tr", _hoisted_9, [((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",
+      "class": "2xl:px-5 lg:px-3 md:px-2 px-1 pt-4 pb-4",
       colspan: [index == $props.columns.length - 1 ? 2 : 1]
     }, [col.sortable ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("a", {
       key: 0,
@@ -24486,10 +24582,10 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     }, [((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) {
       return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("td", {
         key: col.key,
-        "class": "border-t"
+        "class": "border-t xl:text-base lg:text-sm text-base"
       }, [row.link ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)(_component_inertia_link, {
         key: 0,
-        "class": "px-6 xl:py-4 py-2 flex items-center",
+        "class": "2xl:px-5 lg:px-3 md:px-2 px-1 2xl:py-4 lg:py-3 md:py-2 py-1 flex items-center",
         href: row.link
       }, {
         "default": (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
@@ -28330,15 +28426,9 @@ var _hoisted_2 = {
 var _hoisted_3 = {
   "class": "xl:col-span-6 col-span-12"
 };
-
+var _hoisted_4 = {
-var _hoisted_4 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)(" Ankaufsvertrag ");
-
-var _hoisted_5 = {
   "class": "xl:col-span-6 col-span-12"
 };
-
-var _hoisted_6 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)(" Verkaufssvertrag ");
-
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_bread_crumb = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("bread-crumb");
 
@@ -28350,11 +28440,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 
   var _component_restore_button = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("restore-button");
 
-  var _component_unicon = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("unicon");
+  var _component_contract_table = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("contract-table");
-
-  var _component_standard_button = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("standard-button");
-
-  var _component_simple_table = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("simple-table");
 
   var _component_show_page = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("show-page");
 
@@ -28397,75 +28483,23 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       )) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)];
     }),
     more: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
-      return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_3, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_simple_table, {
+      return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_3, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_contract_table, {
-        title: $props.car.buy_contracts.total > 1 ? $props.car.buy_contracts.total + ' Ankaufsverträge' : 'Ankaufsvertrag',
+        contracts: $props.car.buy_contracts,
-        data: $props.car.buy_contracts,
+        type: 0,
-        columns: $data.buyContractColumns,
+        carId: $props.car.id,
-        currentRoute: $data.currentRoute,
+        show_upload: !$props.car.deleted_at,
-        hideArrow: true
+        title: $props.car.buy_contracts.length > 1 ? $props.car.buy_contracts.length + ' Ankaufsverträge' : 'Ankaufsvertrag'
-      }, {
+      }, null, 8
-        actions: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
-          return [!$props.car.deleted_at ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)(_component_standard_button, {
-            key: 0,
-            colour: "green",
-            href: _ctx.route('contracts.create_from_car', [0, $props.car.id])
-          }, {
-            "default": (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
-              return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_unicon, {
-                fill: "currentColor",
-                "class": "mr-1",
-                height: "22",
-                width: "22",
-                name: "plus-circle"
-              }), _hoisted_4];
-            }),
-            _: 1
-            /* STABLE */
-
-          }, 8
       /* PROPS */
-          , ["href"])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)];
+      , ["contracts", "carId", "show_upload", "title"])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_4, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_contract_table, {
-        }),
+        contracts: $props.car.sell_contracts,
-        _: 1
+        type: 1,
-        /* STABLE */
+        carId: $props.car.id,
-
+        show_upload: !$props.car.deleted_at,
-      }, 8
+        title: $props.car.sell_contracts.length > 1 ? $props.car.sell_contracts.length + ' Verkaufsverträge' : 'Verkaufsvertrag'
+      }, null, 8
       /* PROPS */
-      , ["title", "data", "columns", "currentRoute"])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_5, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_simple_table, {
+      , ["contracts", "carId", "show_upload", "title"])])];
-        title: $props.car.sell_contracts.total > 1 ? $props.car.sell_contracts.total + ' Verkaufsverträge' : 'Verkaufsvertrag',
-        data: $props.car.sell_contracts,
-        columns: $data.sellContractColumns,
-        currentRoute: $data.currentRoute,
-        hideArrow: true
-      }, {
-        actions: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
-          return [!$props.car.deleted_at ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)(_component_standard_button, {
-            key: 0,
-            colour: "green",
-            href: _ctx.route('contracts.create_from_car', [1, $props.car.id])
-          }, {
-            "default": (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
-              return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_unicon, {
-                fill: "currentColor",
-                "class": "mr-1",
-                height: "22",
-                width: "22",
-                name: "plus-circle"
-              }), _hoisted_6];
-            }),
-            _: 1
-            /* STABLE */
-
-          }, 8
-          /* PROPS */
-          , ["href"])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)];
-        }),
-        _: 1
-        /* STABLE */
-
-      }, 8
-      /* PROPS */
-      , ["title", "data", "columns", "currentRoute"])])];
     }),
     _: 1
     /* STABLE */
@@ -29282,15 +29316,9 @@ var _hoisted_2 = {
 var _hoisted_3 = {
   "class": "xl:col-span-6 col-span-12"
 };
-
+var _hoisted_4 = {
-var _hoisted_4 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)(" Ankaufsvertrag ");
-
-var _hoisted_5 = {
   "class": "xl:col-span-6 col-span-12"
 };
-
-var _hoisted_6 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)(" Verkaufssvertrag ");
-
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_bread_crumb = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("bread-crumb");
 
@@ -29302,11 +29330,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 
   var _component_restore_button = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("restore-button");
 
-  var _component_unicon = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("unicon");
+  var _component_contract_table = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("contract-table");
-
-  var _component_standard_button = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("standard-button");
-
-  var _component_simple_table = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("simple-table");
 
   var _component_show_page = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("show-page");
 
@@ -29349,75 +29373,23 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       )) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)];
     }),
     more: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
-      return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_3, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_simple_table, {
+      return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_3, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_contract_table, {
-        title: $props.contact.buy_contracts.total > 1 ? $props.contact.buy_contracts.total + ' Ankaufsverträge' : 'Ankaufsvertrag',
+        contracts: $props.contact.buy_contracts,
-        data: $props.contact.buy_contracts,
+        type: 0,
-        columns: $data.buyContractColumns,
+        contactId: $props.contact.id,
-        currentRoute: $data.currentRoute,
+        show_upload: !$props.contact.deleted_at,
-        hideArrow: true
+        title: $props.contact.buy_contracts.length > 1 ? $props.contact.buy_contracts.length + ' Ankaufsverträge' : 'Ankaufsvertrag'
-      }, {
+      }, null, 8
-        actions: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
-          return [!$props.contact.deleted_at ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)(_component_standard_button, {
-            key: 0,
-            colour: "green",
-            href: _ctx.route('contracts.create_from_contact', [0, $props.contact.id])
-          }, {
-            "default": (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
-              return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_unicon, {
-                fill: "currentColor",
-                "class": "mr-1",
-                height: "22",
-                width: "22",
-                name: "plus-circle"
-              }), _hoisted_4];
-            }),
-            _: 1
-            /* STABLE */
-
-          }, 8
       /* PROPS */
-          , ["href"])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)];
+      , ["contracts", "contactId", "show_upload", "title"])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_4, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_contract_table, {
-        }),
+        contracts: $props.contact.sell_contracts,
-        _: 1
+        type: 1,
-        /* STABLE */
+        contactId: $props.contact.id,
-
+        show_upload: !$props.contact.deleted_at,
-      }, 8
+        title: $props.contact.sell_contracts.length > 1 ? $props.contact.sell_contracts.length + ' Verkaufsverträge' : 'Verkaufsvertrag'
+      }, null, 8
       /* PROPS */
-      , ["title", "data", "columns", "currentRoute"])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_5, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_simple_table, {
+      , ["contracts", "contactId", "show_upload", "title"])])];
-        title: $props.contact.sell_contracts.total > 1 ? $props.contact.sell_contracts.total + ' Verkaufsverträge' : 'Verkaufsvertrag',
-        data: $props.contact.sell_contracts,
-        columns: $data.sellContractColumns,
-        currentRoute: $data.currentRoute,
-        hideArrow: true
-      }, {
-        actions: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
-          return [!$props.contact.deleted_at ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)(_component_standard_button, {
-            key: 0,
-            colour: "green",
-            href: _ctx.route('contracts.create_from_contact', [1, $props.contact.id])
-          }, {
-            "default": (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
-              return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_unicon, {
-                fill: "currentColor",
-                "class": "mr-1",
-                height: "22",
-                width: "22",
-                name: "plus-circle"
-              }), _hoisted_6];
-            }),
-            _: 1
-            /* STABLE */
-
-          }, 8
-          /* PROPS */
-          , ["href"])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)];
-        }),
-        _: 1
-        /* STABLE */
-
-      }, 8
-      /* PROPS */
-      , ["title", "data", "columns", "currentRoute"])])];
     }),
     _: 1
     /* STABLE */
@@ -30585,7 +30557,7 @@ var _hoisted_4 = {
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_dash_item = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("dash-item");
 
-  var _component_simple_table = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("simple-table");
+  var _component_contract_table = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("contract-table");
 
   var _component_layout = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("layout");
 
@@ -30610,23 +30582,21 @@ 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, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_simple_table, {
+      , ["title", "number"]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_3, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_contract_table, {
-        title: "Neueste Einkäufe",
+        contracts: $props.buy_contracts,
-        data: $props.buy_contracts,
+        show_upload: false,
-        columns: $data.buyContractColumns,
+        type: 0,
-        currentRoute: $data.currentRoute,
+        title: "Neueste Einkäufe"
-        hideArrow: true
       }, null, 8
       /* PROPS */
-      , ["data", "columns", "currentRoute"])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_4, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_simple_table, {
+      , ["contracts"])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_4, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_contract_table, {
-        title: "Neueste Verkäufe",
+        contracts: $props.sell_contracts,
-        data: $props.sell_contracts,
+        show_upload: false,
-        columns: $data.sellContractColumns,
+        type: 1,
-        currentRoute: $data.currentRoute,
+        title: "Neueste Verkäufe"
-        hideArrow: true
       }, null, 8
       /* PROPS */
-      , ["data", "columns", "currentRoute"])])])];
+      , ["contracts"])])])];
     }),
     _: 1
     /* STABLE */
@@ -62616,6 +62586,32 @@ _BreadCrumb_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__.default.__f
 
 /***/ }),
 
+/***/ "./resources/js/Components/Buttons/CreateContractButton.vue":
+/*!******************************************************************!*\
+  !*** ./resources/js/Components/Buttons/CreateContractButton.vue ***!
+  \******************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var _CreateContractButton_vue_vue_type_template_id_de1a188e__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./CreateContractButton.vue?vue&type=template&id=de1a188e */ "./resources/js/Components/Buttons/CreateContractButton.vue?vue&type=template&id=de1a188e");
+/* harmony import */ var _CreateContractButton_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./CreateContractButton.vue?vue&type=script&lang=js */ "./resources/js/Components/Buttons/CreateContractButton.vue?vue&type=script&lang=js");
+
+
+
+_CreateContractButton_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__.default.render = _CreateContractButton_vue_vue_type_template_id_de1a188e__WEBPACK_IMPORTED_MODULE_0__.render
+/* hot reload */
+if (false) {}
+
+_CreateContractButton_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__.default.__file = "resources/js/Components/Buttons/CreateContractButton.vue"
+
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_CreateContractButton_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__.default);
+
+/***/ }),
+
 /***/ "./resources/js/Components/Buttons/DeleteButton.vue":
 /*!**********************************************************!*\
   !*** ./resources/js/Components/Buttons/DeleteButton.vue ***!
@@ -62850,6 +62846,32 @@ _ContractCard_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__.default._
 
 /***/ }),
 
+/***/ "./resources/js/Components/Contracts/ContractTable.vue":
+/*!*************************************************************!*\
+  !*** ./resources/js/Components/Contracts/ContractTable.vue ***!
+  \*************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var _ContractTable_vue_vue_type_template_id_42e73253__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./ContractTable.vue?vue&type=template&id=42e73253 */ "./resources/js/Components/Contracts/ContractTable.vue?vue&type=template&id=42e73253");
+/* harmony import */ var _ContractTable_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./ContractTable.vue?vue&type=script&lang=js */ "./resources/js/Components/Contracts/ContractTable.vue?vue&type=script&lang=js");
+
+
+
+_ContractTable_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__.default.render = _ContractTable_vue_vue_type_template_id_42e73253__WEBPACK_IMPORTED_MODULE_0__.render
+/* hot reload */
+if (false) {}
+
+_ContractTable_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__.default.__file = "resources/js/Components/Contracts/ContractTable.vue"
+
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_ContractTable_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__.default);
+
+/***/ }),
+
 /***/ "./resources/js/Components/CurrencyInput.vue":
 /*!***************************************************!*\
   !*** ./resources/js/Components/CurrencyInput.vue ***!
@@ -65125,6 +65147,22 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _node_modules_babel_loader_lib_index_js_clonedRuleSet_5_use_0_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_BreadCrumb_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!../../../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./BreadCrumb.vue?vue&type=script&lang=js */ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/Components/BreadCrumb.vue?vue&type=script&lang=js");
  
 
+/***/ }),
+
+/***/ "./resources/js/Components/Buttons/CreateContractButton.vue?vue&type=script&lang=js":
+/*!******************************************************************************************!*\
+  !*** ./resources/js/Components/Buttons/CreateContractButton.vue?vue&type=script&lang=js ***!
+  \******************************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (/* reexport safe */ _node_modules_babel_loader_lib_index_js_clonedRuleSet_5_use_0_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_CreateContractButton_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_0__.default)
+/* harmony export */ });
+/* harmony import */ var _node_modules_babel_loader_lib_index_js_clonedRuleSet_5_use_0_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_CreateContractButton_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../../node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!../../../../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./CreateContractButton.vue?vue&type=script&lang=js */ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/Components/Buttons/CreateContractButton.vue?vue&type=script&lang=js");
+ 
+
 /***/ }),
 
 /***/ "./resources/js/Components/Buttons/DeleteButton.vue?vue&type=script&lang=js":
@@ -65269,6 +65307,22 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _node_modules_babel_loader_lib_index_js_clonedRuleSet_5_use_0_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_ContractCard_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!../../../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./ContractCard.vue?vue&type=script&lang=js */ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/Components/ContractCard.vue?vue&type=script&lang=js");
  
 
+/***/ }),
+
+/***/ "./resources/js/Components/Contracts/ContractTable.vue?vue&type=script&lang=js":
+/*!*************************************************************************************!*\
+  !*** ./resources/js/Components/Contracts/ContractTable.vue?vue&type=script&lang=js ***!
+  \*************************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (/* reexport safe */ _node_modules_babel_loader_lib_index_js_clonedRuleSet_5_use_0_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_ContractTable_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_0__.default)
+/* harmony export */ });
+/* harmony import */ var _node_modules_babel_loader_lib_index_js_clonedRuleSet_5_use_0_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_ContractTable_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../../node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!../../../../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./ContractTable.vue?vue&type=script&lang=js */ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/Components/Contracts/ContractTable.vue?vue&type=script&lang=js");
+ 
+
 /***/ }),
 
 /***/ "./resources/js/Components/CurrencyInput.vue?vue&type=script&lang=js":
@@ -66597,6 +66651,22 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _node_modules_babel_loader_lib_index_js_clonedRuleSet_5_use_0_node_modules_vue_loader_dist_templateLoader_js_ruleSet_1_rules_2_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_BreadCrumb_vue_vue_type_template_id_df88ba24__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!../../../node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!../../../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./BreadCrumb.vue?vue&type=template&id=df88ba24 */ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/Components/BreadCrumb.vue?vue&type=template&id=df88ba24");
 
 
+/***/ }),
+
+/***/ "./resources/js/Components/Buttons/CreateContractButton.vue?vue&type=template&id=de1a188e":
+/*!************************************************************************************************!*\
+  !*** ./resources/js/Components/Buttons/CreateContractButton.vue?vue&type=template&id=de1a188e ***!
+  \************************************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "render": () => (/* reexport safe */ _node_modules_babel_loader_lib_index_js_clonedRuleSet_5_use_0_node_modules_vue_loader_dist_templateLoader_js_ruleSet_1_rules_2_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_CreateContractButton_vue_vue_type_template_id_de1a188e__WEBPACK_IMPORTED_MODULE_0__.render)
+/* harmony export */ });
+/* harmony import */ var _node_modules_babel_loader_lib_index_js_clonedRuleSet_5_use_0_node_modules_vue_loader_dist_templateLoader_js_ruleSet_1_rules_2_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_CreateContractButton_vue_vue_type_template_id_de1a188e__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../../node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!../../../../node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!../../../../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./CreateContractButton.vue?vue&type=template&id=de1a188e */ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/Components/Buttons/CreateContractButton.vue?vue&type=template&id=de1a188e");
+
+
 /***/ }),
 
 /***/ "./resources/js/Components/Buttons/DeleteButton.vue?vue&type=template&id=1c5557f6":
@@ -66741,6 +66811,22 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _node_modules_babel_loader_lib_index_js_clonedRuleSet_5_use_0_node_modules_vue_loader_dist_templateLoader_js_ruleSet_1_rules_2_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_ContractCard_vue_vue_type_template_id_156a120d__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!../../../node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!../../../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./ContractCard.vue?vue&type=template&id=156a120d */ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/Components/ContractCard.vue?vue&type=template&id=156a120d");
 
 
+/***/ }),
+
+/***/ "./resources/js/Components/Contracts/ContractTable.vue?vue&type=template&id=42e73253":
+/*!*******************************************************************************************!*\
+  !*** ./resources/js/Components/Contracts/ContractTable.vue?vue&type=template&id=42e73253 ***!
+  \*******************************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "render": () => (/* reexport safe */ _node_modules_babel_loader_lib_index_js_clonedRuleSet_5_use_0_node_modules_vue_loader_dist_templateLoader_js_ruleSet_1_rules_2_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_ContractTable_vue_vue_type_template_id_42e73253__WEBPACK_IMPORTED_MODULE_0__.render)
+/* harmony export */ });
+/* harmony import */ var _node_modules_babel_loader_lib_index_js_clonedRuleSet_5_use_0_node_modules_vue_loader_dist_templateLoader_js_ruleSet_1_rules_2_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_ContractTable_vue_vue_type_template_id_42e73253__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../../node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!../../../../node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!../../../../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./ContractTable.vue?vue&type=template&id=42e73253 */ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/Components/Contracts/ContractTable.vue?vue&type=template&id=42e73253");
+
+
 /***/ }),
 
 /***/ "./resources/js/Components/CurrencyInput.vue?vue&type=template&id=08bc457e":

resources/js/Components/Buttons/CreateContractButton.vue

@@ -0,0 +1,35 @@
+<template>
+    <standard-button colour="green" :href="link">
+        <unicon fill="currentColor" class="mr-1" height="22" width="22" name="plus-circle"></unicon>
+        {{ text }}
+    </standard-button>
+</template>
+
+<script>
+import StandardButton from './StandardButton.vue';
+
+export default {
+    components: {
+      StandardButton,
+    },
+    props: {
+        type: Number,
+        contactId: Number,
+        carId: Number
+    },
+    computed: {
+        text() {
+            return this.type === 1 ? 'Verkaufsvertrag' : 'Ankaufsvertrag';
+        },
+        link() {
+            if (this.contactId && this.carId) {
+                return route('contracts.create', [this.type, this.carId, this.contactId]);
+            }
+            if (this.contactId) {
+                return route('contracts.create_from_contact', [this.type, this.contactId]);
+            }
+            return route('contracts.create_from_car', [this.type, this.carId]);
+        },
+    },
+};
+</script>

resources/js/Components/Contracts/ContractTable.vue

@@ -0,0 +1,45 @@
+<template>
+    <simple-table :title="title" :data="contracts" :columns="columns" :hideArrow="true">
+        <template #actions>
+            <create-contract-button v-if="show_upload" :type="type" :contactId="contactId" :carId="carId" />
+        </template>
+    </simple-table>
+</template>
+
+<script>
+import CreateContractButton from '../Buttons/CreateContractButton.vue';
+import SimpleTable from '@/Components/SimpleTable.vue';
+
+export default {
+    components: {
+        CreateContractButton,
+        SimpleTable,
+    },
+    props: {
+        contracts: Array,
+        contactId: Number,
+        type: Number,
+        carId: Number,
+        show_upload: Boolean,
+        title: String,
+    },
+    computed: {
+        columns() {
+            if (this.contracts.length === 0) {
+                return [];
+            }
+            let columns = [{ key: 'date', value: 'Datum', sortable: false }];
+
+            if (this.contracts[0].car) {
+                columns.push({ key: 'car', value: 'Auto', sortable: false})
+            }
+            if (this.contracts[0].contact) {
+                columns.push({ key: 'contact', value: this.type == '1' ? 'Käufer' : 'Verkäufer', sortable: false})
+            }
+            columns.push({ key: 'price', value: this.type == '1' ? 'Verkaufspreis' : 'Einkaufspreis', sortable: false})
+            
+            return columns;
+        },
+    },
+};
+</script>

resources/js/Components/SimpleTable.vue

@@ -19,7 +19,7 @@
         <div v-if="(data.total === undefined && data.length > 0) || 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]">
+                    <th v-for="(col, index) in columns" :key="col.key" class="2xl:px-5 lg:px-3 md:px-2 px-1 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>
@@ -31,14 +31,14 @@
                     </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">
+                    <td v-for="col in columns" :key="col.key" class="border-t xl:text-base lg:text-sm text-base">
-                        <inertia-link v-if="row.link" class="px-6 xl:py-4 py-2 flex items-center" :href="row.link">
+                        <inertia-link v-if="row.link" class="2xl:px-5 lg:px-3 md:px-2 px-1 2xl:py-4 lg:py-3 md:py-2 py-1 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="#f04040" hover-fill="red" height="24" width="24" name="trash-alt"></unicon>
                         </span>
-                        <span v-else class="px-6 xl:py-4 py-2 flex items-center">
+                        <span v-else class="2xl:px-5 lg:px-3 md:px-2 px-1 2xl:py-4 lg:py-3 md:py-2 py-1 flex items-center">
                             {{ resolve(col.key, row) }}
                         </span>
                     </td>

resources/js/Pages/Cars/Show.vue

@@ -19,24 +19,22 @@
         </template>
         <template #more>
             <div class="xl:col-span-6 col-span-12">
-                <simple-table :title="car.buy_contracts.total > 1 ? car.buy_contracts.total + ' Ankaufsverträge' : 'Ankaufsvertrag'" :data="car.buy_contracts" :columns="buyContractColumns" :currentRoute="currentRoute" :hideArrow="true">
+                <contract-table
-                    <template #actions>
+                    :contracts="car.buy_contracts"
-                        <standard-button v-if="!car.deleted_at" colour="green" :href="route('contracts.create_from_car', [0, car.id])">
+                    :type="0"
-                        <unicon fill="currentColor" class="mr-1" height="22" width="22" name="plus-circle"></unicon>
+                    :carId="car.id"
-                        Ankaufsvertrag
+                    :show_upload="!car.deleted_at"
-                    </standard-button>
+                    :title="car.buy_contracts.length > 1 ? car.buy_contracts.length + ' Ankaufsverträge' : 'Ankaufsvertrag'"
-                    </template>
+                />
-                </simple-table>
             </div>
             <div class="xl:col-span-6 col-span-12">
-                <simple-table :title="car.sell_contracts.total > 1 ? car.sell_contracts.total + ' Verkaufsverträge' : 'Verkaufsvertrag'" :data="car.sell_contracts" :columns="sellContractColumns" :currentRoute="currentRoute" :hideArrow="true">
+                <contract-table
-                    <template #actions>
+                    :contracts="car.sell_contracts"
-                        <standard-button v-if="!car.deleted_at" colour="green" :href="route('contracts.create_from_car', [1, car.id])">
+                    :type="1"
-                            <unicon fill="currentColor" class="mr-1" height="22" width="22" name="plus-circle"></unicon>
+                    :carId="car.id"
-                            Verkaufssvertrag
+                    :show_upload="!car.deleted_at"
-                        </standard-button>
+                    :title="car.sell_contracts.length > 1 ? car.sell_contracts.length + ' Verkaufsverträge' : 'Verkaufsvertrag'"
-                    </template>
+                />
-                </simple-table>
             </div>
         </template>
     </show-page>
@@ -51,8 +49,7 @@ import SellContractCard from '@/Components/SellContractCard.vue';
 import EditButton from '@/Components/Buttons/EditButton.vue';
 import DeleteButton from '@/Components/Buttons/DeleteButton.vue';
 import RestoreButton from '@/Components/Buttons/RestoreButton.vue';
-import StandardButton from '@/Components/Buttons/StandardButton.vue';
+import ContractTable from '../../Components/Contracts/ContractTable.vue';
-import SimpleTable from '@/Components/SimpleTable.vue';
 
 export default {
   components: {
@@ -64,26 +61,10 @@ export default {
     EditButton,
     DeleteButton,
     RestoreButton,
-    StandardButton,
+    ContractTable,
-    SimpleTable,
   },
   props: {
     car: Object,
   },
-  data() {
-    return {
-      currentRoute: 'cars.show',
-      buyContractColumns: [
-        { key: 'date', value: 'Datum', sortable: false },
-        { key: 'contact', value: 'Verkäufer', sortable: false },
-        { key: 'price', value: 'Einkaufspreis', sortable: false },
-      ],
-      sellContractColumns: [
-        { key: 'date', value: 'Datum', sortable: false },
-        { key: 'contact', value: 'Käufer', sortable: false },
-        { key: 'price', value: 'Verkaufspreis', sortable: false },
-      ],
-    };
-  },
 };
 </script>

resources/js/Pages/Contacts/Show.vue

@@ -22,24 +22,22 @@
 
         <template #more>
             <div class="xl:col-span-6 col-span-12">
-                <simple-table :title="contact.buy_contracts.total > 1 ? contact.buy_contracts.total + ' Ankaufsverträge' : 'Ankaufsvertrag'" :data="contact.buy_contracts" :columns="buyContractColumns" :currentRoute="currentRoute" :hideArrow="true">
+                <contract-table
-                    <template #actions>
+                    :contracts="contact.buy_contracts"
-                        <standard-button v-if="!contact.deleted_at" colour="green" :href="route('contracts.create_from_contact', [0, contact.id])">
+                    :type="0"
-                        <unicon fill="currentColor" class="mr-1" height="22" width="22" name="plus-circle"></unicon>
+                    :contactId="contact.id"
-                        Ankaufsvertrag
+                    :show_upload="!contact.deleted_at"
-                    </standard-button>
+                    :title="contact.buy_contracts.length > 1 ? contact.buy_contracts.length + ' Ankaufsverträge' : 'Ankaufsvertrag'"
-                    </template>
+                />
-                </simple-table>
             </div>
             <div class="xl:col-span-6 col-span-12">
-                <simple-table :title="contact.sell_contracts.total > 1 ? contact.sell_contracts.total + ' Verkaufsverträge' : 'Verkaufsvertrag'" :data="contact.sell_contracts" :columns="sellContractColumns" :currentRoute="currentRoute" :hideArrow="true">
+                <contract-table
-                    <template #actions>
+                    :contracts="contact.sell_contracts"
-                        <standard-button v-if="!contact.deleted_at" colour="green" :href="route('contracts.create_from_contact', [1, contact.id])">
+                    :type="1"
-                            <unicon fill="currentColor" class="mr-1" height="22" width="22" name="plus-circle"></unicon>
+                    :contactId="contact.id"
-                            Verkaufssvertrag
+                    :show_upload="!contact.deleted_at"
-                        </standard-button>
+                    :title="contact.sell_contracts.length > 1 ? contact.sell_contracts.length + ' Verkaufsverträge' : 'Verkaufsvertrag'"
-                    </template>
+                />
-                </simple-table>
             </div>
         </template>
     </show-page>
@@ -54,8 +52,7 @@ import SellContractCard from '@/Components/SellContractCard.vue';
 import EditButton from '@/Components/Buttons/EditButton.vue';
 import DeleteButton from '@/Components/Buttons/DeleteButton.vue';
 import RestoreButton from '@/Components/Buttons/RestoreButton.vue';
-import SimpleTable from '@/Components/SimpleTable.vue';
+import ContractTable from '../../Components/Contracts/ContractTable.vue';
-import StandardButton from '@/Components/Buttons/StandardButton.vue';
 
 export default {
   components: {
@@ -67,27 +64,11 @@ export default {
     EditButton,
     DeleteButton,
     RestoreButton,
-    SimpleTable,
+    ContractTable,
-    StandardButton,
   },
 
   props: {
     contact: Object,
   },
-  data() {
-    return {
-      currentRoute: 'contacts.show',
-      buyContractColumns: [
-        { key: 'date', value: 'Datum', sortable: false },
-        { key: 'car', value: 'Auto', sortable: false},
-        { key: 'price', value: 'Einkaufspreis', sortable: false },
-      ],
-      sellContractColumns: [
-        { key: 'date', value: 'Datum', sortable: false },
-        { key: 'car', value: 'Auto', sortable: false},
-        { key: 'price', value: 'Verkaufspreis', sortable: false },
-      ],
-    };
-  },
 };
 </script>

resources/js/Pages/Dashboard.vue

@@ -10,10 +10,20 @@
             <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">
-                <simple-table title="Neueste Einkäufe" :data="buy_contracts" :columns="buyContractColumns" :currentRoute="currentRoute" :hideArrow="true" />
+                <contract-table
+                    :contracts="buy_contracts"
+                    :show_upload="false"
+                    :type="0"
+                    title="Neueste Einkäufe"
+                />
             </div>
             <div class="lg:col-span-6 col-span-12">
-                <simple-table title="Neueste Verkäufe" :data="sell_contracts" :columns="sellContractColumns" :currentRoute="currentRoute" :hideArrow="true" />
+                <contract-table
+                    :contracts="sell_contracts"
+                    :show_upload="false"
+                    :type="1"
+                    title="Neueste Verkäufe"
+                />
             </div>
         </div>
     </layout>
@@ -21,13 +31,13 @@
 
 <script>
 import Layout from '@/Layouts/Layout';
-import SimpleTable from '@/Components/SimpleTable.vue';
 import DashItem from '@/Components/Dashboard/DashItem.vue';
+import ContractTable from '@/Components/Contracts/ContractTable.vue';
 
 export default {
   components: {
     Layout,
-    SimpleTable,
+    ContractTable,
     DashItem,
   },
   props: {
@@ -37,22 +47,5 @@ export default {
     bought_this_year: Number,
     my_cars: Number,
   },
-  data() {
-    return {
-      currentRoute: 'cars',
-      buyContractColumns: [
-        { key: 'date', value: 'Datum', sortable: false },
-        // {key: 'car', value: 'Auto', sortable: false},
-        { key: 'contact', value: 'Verkäufer', sortable: false },
-        { key: 'price', value: 'Einkaufspreis', sortable: false },
-      ],
-      sellContractColumns: [
-        { key: 'date', value: 'Datum', sortable: false },
-        // {key: 'car', value: 'Auto', sortable: false},
-        { key: 'contact', value: 'Käufer', sortable: false },
-        { key: 'price', value: 'Verkaufspreis', sortable: false },
-      ],
-    };
-  },
 };
 </script>