work

app/Enums/InsuranceType.php

@@ -13,9 +13,9 @@ use BenSampo\Enum\Enum;
  */
 final class InsuranceType extends Enum
 {
-    const OptionOne =   0;
+    const QBase = 0;
-    const OptionTwo =   1;
+    const OneStar = 1;
-    const OptionThree = 2;
+    const ThreeStar = 2;
-    const OptionFour = 3;
+    const FiveStar = 3;
-    const OptionFive = 4;
+    const FiveStarPlus = 4;
 }

app/Http/Controllers/CarController.php

@@ -19,9 +19,9 @@ class CarController extends Controller
     {
         return Inertia::render('Cars/Index', [
             'filters' => request()->all('search', 'trashed'),
-            'cars' => Car::all()
+            'cars' => Car::filter(request()->only('search', 'trashed'))
-                ->filter(request()->only('search', 'trashed'))
+                ->orderByInitialDate()
-                ->paginate()
+                ->paginate(50)
                 ->withQueryString()
                 ->through(function ($car) {
                     return [
@@ -29,14 +29,12 @@ class CarController extends Controller
                         'stammnummer' => $car->stammnummer,
                         'vin' => $car->vin,
                         'bought_at' => $car->bought_at,
-                        'buy_price' => $car->buy_price,
+                        'buy_price' => $car->buy_price->format(),
-                        'seller' => $car->seller->only('name'),
+                        // 'seller' => $car->seller->only('name'),
-                        'buyer' => $car->buyer->only('name'),
+                        // 'buyer' => $car->buyer->only('name'),
                         'car_model' => $car->carModel->only('name'),
                         'name' => $car->name,
-                        'phone' => $car->phone,
+                        'initial_date' => $car->initial_date,
-                        'zipcode' => $car->city,
-                        'city' => $car->city,
                         'deleted_at' => $car->deleted_at,
                     ];
                 }),

app/Models/Car.php

@@ -2,36 +2,64 @@
 
 namespace App\Models;
 
-use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Carbon\Carbon;
+use Cknow\Money\Money;
 use Illuminate\Database\Eloquent\Model;
 use Illuminate\Database\Eloquent\SoftDeletes;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
 
 class Car extends Model
 {
     use HasFactory, softDeletes;
 
     protected $fillable = [
-        'variation',
         'stammnummer',
         'vin',
         'colour',
         'notes',
         'known_damage',
         'initial_date',
+        'last_check_date',
+        'kilometers',
         'bought_at',
         'buy_price',
         'seller_contact_id',
-        'car_model_id'
+        'car_model_id',
     ];
 
     public function getNameAttribute()
     {
         $out = $this->brand->name . ' ' . $this->carModel->name;
-        $out .= $this->variation ? ' ('  . $this->variation . ')' : '';
 
         return $out;
     }
 
+    public function getKilometersAttrobute($kilometers)
+    {
+        return $kilometers;
+    }
+
+    public function getStammnummerAttribute($stammnummer)
+    {
+        $out = substr($stammnummer, 0, 3);
+        $out .= '.';
+        $out .= substr($stammnummer, 3, 3);
+        $out .= '.';
+        $out .= substr($stammnummer, 6, 3);
+        
+        return $out;
+    }
+
+    public function getBuyPriceAttribute($price)
+    {
+        return Money::CHF($price);
+    }
+
+    public function getInitialDateAttribute($initialDate)
+    {
+        return Carbon::parse($initialDate)->format('d.m.Y');
+    }
+
     public function brand()
     {
         return $this->carModel->brand();
@@ -64,6 +92,44 @@ class Car extends Model
 
     public function scopeSoldThisYear($query)
     {
-        return $query->whereDate('sold_at', \Carbon\Carbon::today());
+        return $query->whereDate('sold_at', '>=', Carbon::today()->format('Y'));
+    }
+
+    public function scopeSoldCars($query)
+    {
+        return $query->whereDate('sold_at', '>=', Carbon::today()->format('Y'));
+    }
+
+    public function scopeUnsoldCars($query)
+    {
+        return $query->whereDate('sold_at', );
+    }
+
+    public function scopeOrderByInitialDate($query)
+    {
+        $query->orderBy('initial_date');
+    }
+
+    public function scopeFilter($query, array $filters)
+    {
+        $query->when($filters['search'] ?? null, function ($query, $search) {
+            $query->where(function ($query) use ($search) {
+                $query->orWhere('colour', 'like', $search . '%')
+                    ->orWhere('stammnummer', 'like', $search . '%')
+                    ->orWhere('vin', 'like', $search . '%')
+                    ->orWhereHas('carModel', function ($query) use ($search) {
+                        $query->where('name', 'like', $search.'%')
+                        ->orWhereHas('brand', function ($query) use ($search) {
+                            $query->where('name', 'like', $search.'%');
+                        });
+                    });
+            });
+        })->when($filters['trashed'] ?? null, function ($query, $trashed) {
+            if ($trashed === 'with') {
+                $query->withTrashed();
+            } elseif ($trashed === 'only') {
+                $query->onlyTrashed();
+            }
+        });
     }
 }

composer.json

@@ -7,6 +7,7 @@
     "require": {
         "php": "^7.3|^8.0",
         "bensampo/laravel-enum": "^3.3",
+        "cknow/laravel-money": "^6.1",
         "fideloper/proxy": "^4.4",
         "fruitcake/laravel-cors": "^2.0",
         "guzzlehttp/guzzle": "^7.0.1",

composer.lock

@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "a3bbf3a4cbd2672bb4b1dd877e708146",
+    "content-hash": "d0901202d0c56031775bb6cf095f0546",
     "packages": [
         {
             "name": "asm89/stack-cors",
@@ -254,6 +254,73 @@
             ],
             "time": "2021-01-20T22:51:39+00:00"
         },
+        {
+            "name": "cknow/laravel-money",
+            "version": "v6.1.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/cknow/laravel-money.git",
+                "reference": "3431fe3663efac5db883459b55949a269cb0880b"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/cknow/laravel-money/zipball/3431fe3663efac5db883459b55949a269cb0880b",
+                "reference": "3431fe3663efac5db883459b55949a269cb0880b",
+                "shasum": ""
+            },
+            "require": {
+                "ext-intl": "*",
+                "ext-json": "*",
+                "illuminate/support": "^7.0|^8.0",
+                "illuminate/view": "^7.0|^8.0",
+                "moneyphp/money": "^3.3",
+                "php": "^7.3|^8.0"
+            },
+            "require-dev": {
+                "graham-campbell/testbench": "^5.5",
+                "illuminate/filesystem": "^7.0|^8.0",
+                "mockery/mockery": "^1.4",
+                "phpunit/phpunit": "^8.5|^9.0"
+            },
+            "type": "library",
+            "extra": {
+                "laravel": {
+                    "providers": [
+                        "Cknow\\Money\\MoneyServiceProvider"
+                    ]
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Cknow\\Money\\": "src/"
+                },
+                "files": [
+                    "src/helpers.php"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Ricardo Gobbo de Souza",
+                    "email": "ricardogobbosouza@yahoo.com.br"
+                }
+            ],
+            "description": "Laravel Money",
+            "homepage": "https://github.com/cknow/laravel-money",
+            "keywords": [
+                "currency",
+                "laravel",
+                "money"
+            ],
+            "support": {
+                "issues": "https://github.com/cknow/laravel-money/issues",
+                "source": "https://github.com/cknow/laravel-money/tree/v6.1.0"
+            },
+            "time": "2020-11-05T20:05:04+00:00"
+        },
         {
             "name": "dasprid/enum",
             "version": "1.0.3",
@@ -2227,6 +2294,92 @@
             ],
             "time": "2021-02-19T21:22:57+00:00"
         },
+        {
+            "name": "moneyphp/money",
+            "version": "v3.3.1",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/moneyphp/money.git",
+                "reference": "122664c2621a95180a13c1ac81fea1d2ef20781e"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/moneyphp/money/zipball/122664c2621a95180a13c1ac81fea1d2ef20781e",
+                "reference": "122664c2621a95180a13c1ac81fea1d2ef20781e",
+                "shasum": ""
+            },
+            "require": {
+                "ext-json": "*",
+                "php": ">=5.6"
+            },
+            "require-dev": {
+                "cache/taggable-cache": "^0.4.0",
+                "doctrine/instantiator": "^1.0.5",
+                "ext-bcmath": "*",
+                "ext-gmp": "*",
+                "ext-intl": "*",
+                "florianv/exchanger": "^1.0",
+                "florianv/swap": "^3.0",
+                "friends-of-phpspec/phpspec-code-coverage": "^3.1.1 || ^4.3",
+                "moneyphp/iso-currencies": "^3.2.1",
+                "php-http/message": "^1.4",
+                "php-http/mock-client": "^1.0.0",
+                "phpspec/phpspec": "^3.4.3",
+                "phpunit/phpunit": "^5.7.27 || ^6.5.14 || ^7.5.18 || ^8.5",
+                "psr/cache": "^1.0",
+                "symfony/phpunit-bridge": "^4"
+            },
+            "suggest": {
+                "ext-bcmath": "Calculate without integer limits",
+                "ext-gmp": "Calculate without integer limits",
+                "ext-intl": "Format Money objects with intl",
+                "florianv/exchanger": "Exchange rates library for PHP",
+                "florianv/swap": "Exchange rates library for PHP",
+                "psr/cache-implementation": "Used for Currency caching"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "3.x-dev"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Money\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Mathias Verraes",
+                    "email": "mathias@verraes.net",
+                    "homepage": "http://verraes.net"
+                },
+                {
+                    "name": "Márk Sági-Kazár",
+                    "email": "mark.sagikazar@gmail.com"
+                },
+                {
+                    "name": "Frederik Bosch",
+                    "email": "f.bosch@genkgo.nl"
+                }
+            ],
+            "description": "PHP implementation of Fowler's Money pattern",
+            "homepage": "http://moneyphp.org",
+            "keywords": [
+                "Value Object",
+                "money",
+                "vo"
+            ],
+            "support": {
+                "issues": "https://github.com/moneyphp/money/issues",
+                "source": "https://github.com/moneyphp/money/tree/master"
+            },
+            "time": "2020-03-18T17:49:59+00:00"
+        },
         {
             "name": "monolog/monolog",
             "version": "2.2.0",

config/money.php

@@ -0,0 +1,19 @@
+<?php
+
+return [
+    /*
+     |--------------------------------------------------------------------------
+     | Laravel money
+     |--------------------------------------------------------------------------
+     */
+    'locale' => config('app.locale', 'de_CH'),
+    'defaultCurrency' => config('app.currency', 'CHF'),
+    'currencies' => [
+        'iso' => 'all',
+        'bitcoin' => 'all',
+        'custom' => [
+            // 'MY1' => 2,
+            // 'MY2' => 3
+        ]
+    ]
+];

database/factories/CarFactory.php

@@ -24,15 +24,16 @@ class CarFactory extends Factory
     public function definition()
     {
         return [
-            'variation' => $this->faker->word(),
+            'stammnummer' => $this->faker->regexify('[0-9]{3}.[0-9]{3}.[0-9]{3}'),
-            'stammnummer' => $this->faker->randomNumber(9, true),
             'vin' => $this->faker->regexify('[A-Z]{3}ZZZ[A-Z0-9]{3}[A-Z1-9]{1}[A-Z]{1}[0-9]{6}'),
             'colour' => $this->faker->safeColorName(),
             'notes' => $this->faker->paragraph(),
             'known_damage' => $this->faker->paragraph(),
             'initial_date' => $this->faker->date(),
+            'last_check_date' => $this->faker->date(),
             'bought_at' => $this->faker->date(),
-            'buy_price' => $this->faker->numberBetween(1000, 30000),
+            'kilometers' => $this->faker->numberBetween(5000, 200000),
+            'buy_price' => $this->faker->numberBetween(100000, 3000000),
             'seller_contact_id' => $this->faker->numberBetween(1, Contact::count()),
             'car_model_id' => $this->faker->numberBetween(1, CarModel::count()),
         ];

database/factories/ContractFactory.php

@@ -26,7 +26,7 @@ class ContractFactory extends Factory
     {
         return [
             'sold_at' => $this->faker->date(),
-            'sell_price' => $this->faker->numberBetween(1500, 35000),
+            'sell_price' => $this->faker->numberBetween(150000, 3500000),
             'contact_id' => $this->faker->numberBetween(1, Contact::count()),
             'car_id' => $this->faker->unique()->numberBetween(1, Car::count()),
             'insurance_type' => (string)InsuranceType::getRandomValue(),

database/migrations/2021_05_10_135957_create_cars_table.php

@@ -15,15 +15,16 @@ class CreateCarsTable extends Migration
     {
         Schema::create('cars', function (Blueprint $table) {
             $table->id();
-            $table->string('variation');
+            $table->string('stammnummer', 11)->unique();
-            $table->integer('stammnummer');
             $table->string('vin', 17);
             $table->string('colour')->nullable();
             $table->text('notes')->nullable();
             $table->text('known_damage')->nullable();
             $table->date('initial_date');
+            $table->date('last_check_date');
             $table->date('bought_at');
             $table->integer('buy_price');
+            $table->integer('kilometers');
             $table->unsignedBigInteger('seller_contact_id');
             $table->foreignId('car_model_id')
                 ->onUpdate('cascade')

database/migrations/2021_05_10_144041_create_contracts_table.php

@@ -27,7 +27,7 @@ class CreateContractsTable extends Migration
                 ->onDelete('cascade')
                 ->constrained('cars');
             $table->enum('insurance_type', InsuranceType::getValues())
-            ->default(InsuranceType::OptionOne);
+            ->default(InsuranceType::QBase);
             $table->timestamps();
             $table->softDeletes();
         });

public/js/app.js

@@ -16626,6 +16626,27 @@ __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/ContactCard.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/ContactCard.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 default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({
+  components: {},
+  props: {
+    contact: Object
+  },
+  computed: {}
+});
+
+/***/ }),
+
 /***/ "./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/Paginator.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/Paginator.vue?vue&type=script&lang=js ***!
@@ -16689,7 +16710,34 @@ __webpack_require__.r(__webpack_exports__);
   props: {
     data: Object,
     columns: Array,
-    title: String
+    title: String,
+    defaultSort: Object
+  },
+  data: function data() {
+    return {
+      sort: this.defaultSort
+    };
+  },
+  methods: {
+    sortTable: function sortTable(col) {
+      event.preventDefault();
+
+      if (this.sort.by == col) {
+        this.sort.direction = this.sort.direction == 'asc' ? 'desc' : 'asc';
+      } else {
+        this.sort.direction = 'asc';
+      } //this.$inertia.get(this.route('contacts'), { preserveState: true })
+
+
+      this.sort.by = col;
+    },
+    getIconColor: function getIconColor(col, dir) {
+      if (col == this.sort.by && dir == this.sort.direction) {
+        return '#4B5563';
+      }
+
+      return '#a0a5b9';
+    }
   }
 });
 
@@ -17958,6 +18006,90 @@ __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/Pages/Cars/Index.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/Pages/Cars/Index.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 lodash__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! lodash */ "./node_modules/lodash/lodash.js");
+/* harmony import */ var lodash__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(lodash__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _Layouts_AppLayout__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @/Layouts/AppLayout */ "./resources/js/Layouts/AppLayout.vue");
+/* harmony import */ var _Components_SimpleTable_vue__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @/Components/SimpleTable.vue */ "./resources/js/Components/SimpleTable.vue");
+/* harmony import */ var _Components_SearchFilter__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @/Components/SearchFilter */ "./resources/js/Components/SearchFilter.vue");
+/* harmony import */ var _Jetstream_Button__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @/Jetstream/Button */ "./resources/js/Jetstream/Button.vue");
+
+
+
+
+
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({
+  components: {
+    SearchFilter: _Components_SearchFilter__WEBPACK_IMPORTED_MODULE_3__.default,
+    JetButton: _Jetstream_Button__WEBPACK_IMPORTED_MODULE_4__.default,
+    AppLayout: _Layouts_AppLayout__WEBPACK_IMPORTED_MODULE_1__.default,
+    SimpleTable: _Components_SimpleTable_vue__WEBPACK_IMPORTED_MODULE_2__.default
+  },
+  props: {
+    filters: Object,
+    cars: Object
+  },
+  data: function data() {
+    return {
+      form: {
+        search: this.filters.search,
+        trashed: this.filters.trashed
+      },
+      columns: [{
+        key: 'name',
+        value: 'Name',
+        sortable: true
+      }, {
+        key: 'stammnummer',
+        value: 'Stammummer',
+        sortable: true
+      }, {
+        key: 'buy_price',
+        value: 'Kaufpreis',
+        sortable: true
+      }, {
+        key: 'initial_date',
+        value: 'Inverkehrssetzung',
+        sortable: true
+      }]
+    };
+  },
+  watch: {
+    form: {
+      deep: true,
+      handler: (0,lodash__WEBPACK_IMPORTED_MODULE_0__.throttle)(function () {
+        this.$inertia.get(this.route('cars'), (0,lodash__WEBPACK_IMPORTED_MODULE_0__.pickBy)(this.form), {
+          preserveState: false
+        });
+      }, 300)
+    }
+  },
+  methods: {
+    reset: function reset() {
+      this.form = (0,lodash__WEBPACK_IMPORTED_MODULE_0__.mapValues)(this.form, function () {
+        return null;
+      });
+    },
+    createCar: function createCar() {
+      this.$inertia.visit(route('cars.create'), {
+        method: 'get'
+      });
+    }
+  }
+});
+
+/***/ }),
+
 /***/ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/Pages/Contacts/Edit.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/Pages/Contacts/Edit.vue?vue&type=script&lang=js ***!
@@ -17972,12 +18104,14 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _Layouts_AppLayout__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @/Layouts/AppLayout */ "./resources/js/Layouts/AppLayout.vue");
 /* harmony import */ var _Jetstream_Button__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @/Jetstream/Button */ "./resources/js/Jetstream/Button.vue");
 /* harmony import */ var _Components_BreadCrumb_vue__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @/Components/BreadCrumb.vue */ "./resources/js/Components/BreadCrumb.vue");
-/* harmony import */ var _Components_SimpleTable_vue__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @/Components/SimpleTable.vue */ "./resources/js/Components/SimpleTable.vue");
+/* harmony import */ var _Components_ContactCard_vue__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @/Components/ContactCard.vue */ "./resources/js/Components/ContactCard.vue");
-/* harmony import */ var _Jetstream_Label_vue__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @/Jetstream/Label.vue */ "./resources/js/Jetstream/Label.vue");
+/* harmony import */ var _Components_SimpleTable_vue__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @/Components/SimpleTable.vue */ "./resources/js/Components/SimpleTable.vue");
-/* harmony import */ var _Jetstream_Input_vue__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @/Jetstream/Input.vue */ "./resources/js/Jetstream/Input.vue");
+/* harmony import */ var _Jetstream_Label_vue__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @/Jetstream/Label.vue */ "./resources/js/Jetstream/Label.vue");
-/* harmony import */ var _Jetstream_ActionMessage__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @/Jetstream/ActionMessage */ "./resources/js/Jetstream/ActionMessage.vue");
+/* harmony import */ var _Jetstream_Input_vue__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @/Jetstream/Input.vue */ "./resources/js/Jetstream/Input.vue");
-/* harmony import */ var _Jetstream_InputError__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @/Jetstream/InputError */ "./resources/js/Jetstream/InputError.vue");
+/* harmony import */ var _Jetstream_ActionMessage__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @/Jetstream/ActionMessage */ "./resources/js/Jetstream/ActionMessage.vue");
-/* harmony import */ var _Jetstream_FormSection__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @/Jetstream/FormSection */ "./resources/js/Jetstream/FormSection.vue");
+/* harmony import */ var _Jetstream_InputError__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @/Jetstream/InputError */ "./resources/js/Jetstream/InputError.vue");
+/* harmony import */ var _Jetstream_FormSection__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! @/Jetstream/FormSection */ "./resources/js/Jetstream/FormSection.vue");
+
 
 
 
@@ -17990,14 +18124,15 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({
   components: {
     JetButton: _Jetstream_Button__WEBPACK_IMPORTED_MODULE_1__.default,
-    JetFormSection: _Jetstream_FormSection__WEBPACK_IMPORTED_MODULE_8__.default,
+    JetFormSection: _Jetstream_FormSection__WEBPACK_IMPORTED_MODULE_9__.default,
     AppLayout: _Layouts_AppLayout__WEBPACK_IMPORTED_MODULE_0__.default,
     BreadCrumb: _Components_BreadCrumb_vue__WEBPACK_IMPORTED_MODULE_2__.default,
-    SimpleTable: _Components_SimpleTable_vue__WEBPACK_IMPORTED_MODULE_3__.default,
+    SimpleTable: _Components_SimpleTable_vue__WEBPACK_IMPORTED_MODULE_4__.default,
-    JetLabel: _Jetstream_Label_vue__WEBPACK_IMPORTED_MODULE_4__.default,
+    JetLabel: _Jetstream_Label_vue__WEBPACK_IMPORTED_MODULE_5__.default,
-    JetInput: _Jetstream_Input_vue__WEBPACK_IMPORTED_MODULE_5__.default,
+    JetInput: _Jetstream_Input_vue__WEBPACK_IMPORTED_MODULE_6__.default,
-    JetInputError: _Jetstream_InputError__WEBPACK_IMPORTED_MODULE_7__.default,
+    JetInputError: _Jetstream_InputError__WEBPACK_IMPORTED_MODULE_8__.default,
-    JetActionMessage: _Jetstream_ActionMessage__WEBPACK_IMPORTED_MODULE_6__.default
+    JetActionMessage: _Jetstream_ActionMessage__WEBPACK_IMPORTED_MODULE_7__.default,
+    ContactCard: _Components_ContactCard_vue__WEBPACK_IMPORTED_MODULE_3__.default
   },
   props: {
     contact: Object
@@ -18049,6 +18184,20 @@ __webpack_require__.r(__webpack_exports__);
       }
 
       return this.form.lastname + ' ' + this.form.firstname;
+    },
+    computedContact: function computedContact() {
+      return {
+        firstname: this.form.firstname,
+        lastname: this.form.lastname,
+        company: this.form.company,
+        email: this.form.email,
+        phone: this.form.phone,
+        address: this.form.address,
+        zip: this.form.zip,
+        city: this.form.city,
+        country: this.form.country,
+        link: route('contacts.update', this.contact)
+      };
     }
   },
   methods: {
@@ -18076,11 +18225,9 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var lodash__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! lodash */ "./node_modules/lodash/lodash.js");
 /* harmony import */ var lodash__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(lodash__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var _Layouts_AppLayout__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @/Layouts/AppLayout */ "./resources/js/Layouts/AppLayout.vue");
-/* harmony import */ var _Components_Paginator__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @/Components/Paginator */ "./resources/js/Components/Paginator.vue");
+/* harmony import */ var _Components_SimpleTable_vue__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @/Components/SimpleTable.vue */ "./resources/js/Components/SimpleTable.vue");
-/* harmony import */ var _Components_SimpleTable_vue__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @/Components/SimpleTable.vue */ "./resources/js/Components/SimpleTable.vue");
+/* harmony import */ var _Components_SearchFilter__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @/Components/SearchFilter */ "./resources/js/Components/SearchFilter.vue");
-/* harmony import */ var _Components_SearchFilter__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @/Components/SearchFilter */ "./resources/js/Components/SearchFilter.vue");
+/* harmony import */ var _Jetstream_Button__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @/Jetstream/Button */ "./resources/js/Jetstream/Button.vue");
-/* harmony import */ var _Jetstream_Button__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @/Jetstream/Button */ "./resources/js/Jetstream/Button.vue");
-
 
 
 
@@ -18088,11 +18235,10 @@ __webpack_require__.r(__webpack_exports__);
 
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({
   components: {
-    Paginator: _Components_Paginator__WEBPACK_IMPORTED_MODULE_2__.default,
+    SearchFilter: _Components_SearchFilter__WEBPACK_IMPORTED_MODULE_3__.default,
-    SearchFilter: _Components_SearchFilter__WEBPACK_IMPORTED_MODULE_4__.default,
+    JetButton: _Jetstream_Button__WEBPACK_IMPORTED_MODULE_4__.default,
-    JetButton: _Jetstream_Button__WEBPACK_IMPORTED_MODULE_5__.default,
     AppLayout: _Layouts_AppLayout__WEBPACK_IMPORTED_MODULE_1__.default,
-    SimpleTable: _Components_SimpleTable_vue__WEBPACK_IMPORTED_MODULE_3__.default
+    SimpleTable: _Components_SimpleTable_vue__WEBPACK_IMPORTED_MODULE_2__.default
   },
   props: {
     filters: Object,
@@ -18106,13 +18252,16 @@ __webpack_require__.r(__webpack_exports__);
       },
       columns: [{
         key: 'name',
-        value: 'Name'
+        value: 'Name',
+        sortable: true
       }, {
         key: 'company',
-        value: 'Firma'
+        value: 'Firma',
+        sortable: true
       }, {
         key: 'fullCity',
-        value: 'Ort'
+        value: 'Ort',
+        sortable: true
       }, {
         key: 'phone',
         value: 'Telefon'
@@ -18125,7 +18274,7 @@ __webpack_require__.r(__webpack_exports__);
       handler: (0,lodash__WEBPACK_IMPORTED_MODULE_0__.throttle)(function () {
         this.$inertia.get(this.route('contacts'), (0,lodash__WEBPACK_IMPORTED_MODULE_0__.pickBy)(this.form), {
           preserveState: false
-        }); // this.$refs.search.focus();
+        });
       }, 300)
     }
   },
@@ -18982,6 +19131,109 @@ 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/ContactCard.vue?vue&type=template&id=6cae7255":
+/*!*********************************************************************************************************************************************************************************************************************************************************************************!*\
+  !*** ./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/ContactCard.vue?vue&type=template&id=6cae7255 ***!
+  \*********************************************************************************************************************************************************************************************************************************************************************************/
+/***/ ((__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");
+
+var _hoisted_1 = {
+  "class": "mt-3 p-3 bg-white shadow rounded-md font-medium"
+};
+var _hoisted_2 = {
+  key: 0,
+  "class": "font-bold"
+};
+var _hoisted_3 = {
+  key: 1
+};
+var _hoisted_4 = {
+  key: 2
+};
+var _hoisted_5 = {
+  key: 3
+};
+var _hoisted_6 = {
+  key: 4,
+  "class": "mt-3"
+};
+var _hoisted_7 = {
+  key: 5,
+  "class": "mt-1"
+};
+var _hoisted_8 = {
+  key: 6,
+  "class": "pt-3 mt-3 border-t"
+};
+
+var _hoisted_9 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)(" Zum Kontakt ");
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _component_unicon = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("unicon");
+
+  var _component_inertia_link = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("inertia-link");
+
+  return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("div", _hoisted_1, [$props.contact.company ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("div", _hoisted_2, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.contact.company), 1
+  /* TEXT */
+  )) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true), $props.contact.lastname && $props.contact.firstname ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("div", _hoisted_3, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.contact.lastname + ' ' + $props.contact.firstname), 1
+  /* TEXT */
+  )) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true), $props.contact.address ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("div", _hoisted_4, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.contact.address), 1
+  /* TEXT */
+  )) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true), $props.contact.zip && $props.contact.city ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("div", _hoisted_5, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.contact.zip + ' ' + $props.contact.city + ' ' + $props.contact.country), 1
+  /* TEXT */
+  )) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true), $props.contact.email ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("div", _hoisted_6, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("a", {
+    href: 'mailto:' + $props.contact.email,
+    "class": "pt-1 pb-1 flex items-center"
+  }, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_unicon, {
+    "class": "mr-1",
+    height: "22",
+    width: "22",
+    name: "envelope"
+  }), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)(" " + (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.contact.email), 1
+  /* TEXT */
+  )], 8
+  /* PROPS */
+  , ["href"])])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true), $props.contact.phone ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("div", _hoisted_7, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("a", {
+    href: 'phone:' + $props.contact.phone,
+    "class": "pt-1 pb-1 flex items-center"
+  }, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_unicon, {
+    "class": "mr-1",
+    height: "22",
+    width: "22",
+    name: "phone"
+  }), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)(" " + (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.contact.phone), 1
+  /* TEXT */
+  )], 8
+  /* PROPS */
+  , ["href"])])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true), $props.contact.link ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("div", _hoisted_8, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_inertia_link, {
+    href: $props.contact.link,
+    "class": "pt-1 pb-1 flex items-center"
+  }, {
+    "default": (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
+      return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_unicon, {
+        "class": "mr-1",
+        height: "22",
+        width: "22",
+        name: "arrow-right"
+      }), _hoisted_9];
+    }),
+    _: 1
+    /* STABLE */
+
+  }, 8
+  /* PROPS */
+  , ["href"])])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)]);
+}
+
+/***/ }),
+
 /***/ "./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/Paginator.vue?vue&type=template&id=4d98dc54":
 /*!*******************************************************************************************************************************************************************************************************************************************************************************!*\
   !*** ./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/Paginator.vue?vue&type=template&id=4d98dc54 ***!
@@ -19104,30 +19356,37 @@ var _hoisted_6 = {
   "class": "text-left font-bold"
 };
 var _hoisted_7 = {
+  "class": "grid grid-cols-1 place-items-center ml-1"
+};
+var _hoisted_8 = {
+  key: 1,
+  "class": "px-4 flex items-center"
+};
+var _hoisted_9 = {
   key: 1,
   "class": "px-6 py-4 flex items-center focus:text-indigo-500"
 };
-var _hoisted_8 = {
+var _hoisted_10 = {
   key: 0,
   "class": "border-t w-px"
 };
-var _hoisted_9 = {
+var _hoisted_11 = {
   key: 0
 };
-var _hoisted_10 = {
+var _hoisted_12 = {
   key: 2
 };
-var _hoisted_11 = {
+var _hoisted_13 = {
   "class": "inline-flex font-medium text-gray-500 ml-3"
 };
 
-var _hoisted_12 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)(" Keine Einträge gefunden ");
+var _hoisted_14 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)(" Keine Einträge gefunden ");
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  var _component_inertia_link = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("inertia-link");
-
   var _component_unicon = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("unicon");
 
+  var _component_inertia_link = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("inertia-link");
+
   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)("h3", _hoisted_3, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.title), 1
@@ -19137,8 +19396,35 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       key: col.key,
       "class": "px-6 pt-4 pb-4",
       colspan: [index == $props.columns.length - 1 ? 2 : 1]
-    }, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(col.value), 9
+    }, [col.sortable ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("a", {
-    /* TEXT, PROPS */
+      key: 0,
+      href: "#",
+      onClick: function onClick($event) {
+        return $options.sortTable(col.key);
+      },
+      "class": "px-4 flex items-center"
+    }, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)((0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(col.value) + " ", 1
+    /* TEXT */
+    ), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_7, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_unicon, {
+      fill: $options.getIconColor(col.key, 'asc'),
+      height: "22",
+      width: "22",
+      name: "angle-up"
+    }, null, 8
+    /* PROPS */
+    , ["fill"]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_unicon, {
+      fill: $options.getIconColor(col.key, 'desc'),
+      height: "22",
+      width: "22",
+      name: "angle-down"
+    }, null, 8
+    /* PROPS */
+    , ["fill"])])], 8
+    /* PROPS */
+    , ["onClick"])) : ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("span", _hoisted_8, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(col.value), 1
+    /* TEXT */
+    ))], 8
+    /* PROPS */
     , ["colspan"]);
   }), 128
   /* KEYED_FRAGMENT */
@@ -19165,12 +19451,12 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 
       }, 1032
       /* PROPS, DYNAMIC_SLOTS */
-      , ["href"])) : ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("span", _hoisted_7, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(row[col.key]), 1
+      , ["href"])) : ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("span", _hoisted_9, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(row[col.key]), 1
       /* TEXT */
       ))]);
     }), 128
     /* KEYED_FRAGMENT */
-    )), row.link ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("td", _hoisted_8, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_inertia_link, {
+    )), row.link ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("td", _hoisted_10, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_inertia_link, {
       "class": "px-4 flex items-center",
       href: row.link,
       tabindex: "-1"
@@ -19191,18 +19477,18 @@ 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_9, [(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_11, [(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_10, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("span", _hoisted_11, [(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_12, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("span", _hoisted_13, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_unicon, {
     fill: "#7e8491",
     "class": "mr-2",
     height: "24",
     width: "24",
     name: "meh"
-  }), _hoisted_12])]))]), $props.data.links ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)(_component_Paginator, {
+  }), _hoisted_14])]))]), $props.data.links ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)(_component_Paginator, {
     key: 0,
     "class": "mt-6",
     links: $props.data.links
@@ -22299,6 +22585,95 @@ 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/Pages/Cars/Index.vue?vue&type=template&id=5cf1bb2b":
+/*!***************************************************************************************************************************************************************************************************************************************************************************!*\
+  !*** ./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/Pages/Cars/Index.vue?vue&type=template&id=5cf1bb2b ***!
+  \***************************************************************************************************************************************************************************************************************************************************************************/
+/***/ ((__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");
+
+
+var _hoisted_1 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("h2", {
+  "class": "font-semibold text-xl text-gray-800 leading-tight"
+}, " Autos ", -1
+/* HOISTED */
+);
+
+var _hoisted_2 = {
+  "class": "py-12"
+};
+var _hoisted_3 = {
+  "class": "max-w-7xl mx-auto sm:px-6 lg:px-8"
+};
+var _hoisted_4 = {
+  "class": "mb-6 flex justify-between items-center"
+};
+
+var _hoisted_5 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)(" Auto erfassen ");
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _component_jet_button = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("jet-button");
+
+  var _component_simple_table = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("simple-table");
+
+  var _component_app_layout = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("app-layout");
+
+  return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)(_component_app_layout, null, {
+    header: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
+      return [_hoisted_1];
+    }),
+    "default": (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
+      return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("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) {
+          return $data.form.search = $event;
+        }),
+        autofocus: "true",
+        name: "search",
+        placeholder: "Suchen...",
+        "class": "border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm block w-full",
+        autocomplete: "off"
+      }, null, 512
+      /* NEED_PATCH */
+      ), [[vue__WEBPACK_IMPORTED_MODULE_0__.vModelText, $data.form.search]]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_jet_button, {
+        "class": "ml-4",
+        onClick: $options.createCar
+      }, {
+        "default": (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
+          return [_hoisted_5];
+        }),
+        _: 1
+        /* STABLE */
+
+      }, 8
+      /* PROPS */
+      , ["onClick"])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_simple_table, {
+        title: $props.cars.total + ' Autos',
+        data: $props.cars,
+        columns: $data.columns,
+        defaultSort: {
+          by: 'name',
+          direction: 'asc'
+        }
+      }, null, 8
+      /* PROPS */
+      , ["title", "data", "columns"])])])];
+    }),
+    _: 1
+    /* STABLE */
+
+  });
+}
+
+/***/ }),
+
 /***/ "./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/Pages/Contacts/Edit.vue?vue&type=template&id=1c2aec8d":
 /*!******************************************************************************************************************************************************************************************************************************************************************************!*\
   !*** ./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/Pages/Contacts/Edit.vue?vue&type=template&id=1c2aec8d ***!
@@ -22321,7 +22696,7 @@ var _hoisted_2 = {
 
 var _hoisted_3 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)(" Kontaktinformationen ");
 
-var _hoisted_4 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)(" Kontaktinformationen anschauen & anpassen ");
+var _hoisted_4 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)(" Kontaktinformationen anschauen & anpassen. ");
 
 var _hoisted_5 = {
   "class": "col-span-6 sm:col-span-4"
@@ -22388,6 +22763,8 @@ var _hoisted_25 = {
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_bread_crumb = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("bread-crumb");
 
+  var _component_contact_card = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("contact-card");
+
   var _component_jet_label = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("jet-label");
 
   var _component_jet_input = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("jet-input");
@@ -22423,7 +22800,11 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           return [_hoisted_3];
         }),
         description: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
-          return [_hoisted_4];
+          return [_hoisted_4, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_contact_card, {
+            contact: $options.computedContact
+          }, null, 8
+          /* PROPS */
+          , ["contact"])];
         }),
         form: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
           return [(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__.createVNode)("div", _hoisted_7, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_jet_label, {
@@ -22659,13 +23040,13 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       }, 8
       /* PROPS */
       , ["onSubmitted"])])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_23, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_24, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_simple_table, {
-        title: 'An \'' + $options.title + '\' verkaufte Autos',
+        title: 'An ' + $options.title + ' verkaufte Autos',
         data: $props.contact.bought_cars,
         columns: $data.boughtCarColumns
       }, null, 8
       /* PROPS */
       , ["title", "data", "columns"])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_25, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_simple_table, {
-        title: 'Von \'' + $options.title + '\' gekaufte Autos',
+        title: 'Von ' + $options.title + ' gekaufte Autos',
         data: $props.contact.sold_cars,
         columns: $data.soldCarColumns
       }, null, 8
@@ -22710,7 +23091,7 @@ var _hoisted_4 = {
   "class": "mb-6 flex justify-between items-center"
 };
 
-var _hoisted_5 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)(" Kontakt erstellen ");
+var _hoisted_5 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)(" Kontakt erfassen ");
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_jet_button = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("jet-button");
@@ -22752,7 +23133,11 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       , ["onClick"])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_simple_table, {
         title: $props.contacts.total + ' Kontakte',
         data: $props.contacts,
-        columns: $data.columns
+        columns: $data.columns,
+        defaultSort: {
+          by: 'name',
+          direction: 'asc'
+        }
       }, null, 8
       /* PROPS */
       , ["title", "data", "columns"])])])];
@@ -24920,7 +25305,7 @@ __webpack_require__(/*! ./bootstrap */ "./resources/js/bootstrap.js"); // Import
 
 
 
-vue_unicons__WEBPACK_IMPORTED_MODULE_3__.default.add([vue_unicons_dist_icons__WEBPACK_IMPORTED_MODULE_4__.uniMeh, vue_unicons_dist_icons__WEBPACK_IMPORTED_MODULE_4__.uniUsersAlt, vue_unicons_dist_icons__WEBPACK_IMPORTED_MODULE_4__.uniCarSideview, vue_unicons_dist_icons__WEBPACK_IMPORTED_MODULE_4__.uniDashboard, vue_unicons_dist_icons__WEBPACK_IMPORTED_MODULE_4__.uniSearch, vue_unicons_dist_icons__WEBPACK_IMPORTED_MODULE_4__.uniFilter, vue_unicons_dist_icons__WEBPACK_IMPORTED_MODULE_4__.uniFilterSlash, vue_unicons_dist_icons__WEBPACK_IMPORTED_MODULE_4__.uniTrashAlt, vue_unicons_dist_icons__WEBPACK_IMPORTED_MODULE_4__.uniPen, vue_unicons_dist_icons__WEBPACK_IMPORTED_MODULE_4__.uniExclamationTriangle, vue_unicons_dist_icons__WEBPACK_IMPORTED_MODULE_4__.uniMapMarker, vue_unicons_dist_icons__WEBPACK_IMPORTED_MODULE_4__.uniPhone, vue_unicons_dist_icons__WEBPACK_IMPORTED_MODULE_4__.uniEnvelope, vue_unicons_dist_icons__WEBPACK_IMPORTED_MODULE_4__.uniFileDownload, vue_unicons_dist_icons__WEBPACK_IMPORTED_MODULE_4__.uniArrowDown, vue_unicons_dist_icons__WEBPACK_IMPORTED_MODULE_4__.uniArrowUp, vue_unicons_dist_icons__WEBPACK_IMPORTED_MODULE_4__.uniAngleRight, vue_unicons_dist_icons__WEBPACK_IMPORTED_MODULE_4__.uniAngleUp, vue_unicons_dist_icons__WEBPACK_IMPORTED_MODULE_4__.uniAngleDown, vue_unicons_dist_icons__WEBPACK_IMPORTED_MODULE_4__.uniAngleLeft, vue_unicons_dist_icons__WEBPACK_IMPORTED_MODULE_4__.uniFileUploadAlt]);
+vue_unicons__WEBPACK_IMPORTED_MODULE_3__.default.add([vue_unicons_dist_icons__WEBPACK_IMPORTED_MODULE_4__.uniMeh, vue_unicons_dist_icons__WEBPACK_IMPORTED_MODULE_4__.uniUsersAlt, vue_unicons_dist_icons__WEBPACK_IMPORTED_MODULE_4__.uniCarSideview, vue_unicons_dist_icons__WEBPACK_IMPORTED_MODULE_4__.uniDashboard, vue_unicons_dist_icons__WEBPACK_IMPORTED_MODULE_4__.uniSearch, vue_unicons_dist_icons__WEBPACK_IMPORTED_MODULE_4__.uniFilter, vue_unicons_dist_icons__WEBPACK_IMPORTED_MODULE_4__.uniFilterSlash, vue_unicons_dist_icons__WEBPACK_IMPORTED_MODULE_4__.uniTrashAlt, vue_unicons_dist_icons__WEBPACK_IMPORTED_MODULE_4__.uniPen, vue_unicons_dist_icons__WEBPACK_IMPORTED_MODULE_4__.uniExclamationTriangle, vue_unicons_dist_icons__WEBPACK_IMPORTED_MODULE_4__.uniMapMarker, vue_unicons_dist_icons__WEBPACK_IMPORTED_MODULE_4__.uniPhone, vue_unicons_dist_icons__WEBPACK_IMPORTED_MODULE_4__.uniEnvelope, vue_unicons_dist_icons__WEBPACK_IMPORTED_MODULE_4__.uniFileDownload, vue_unicons_dist_icons__WEBPACK_IMPORTED_MODULE_4__.uniArrowDown, vue_unicons_dist_icons__WEBPACK_IMPORTED_MODULE_4__.uniArrowUp, vue_unicons_dist_icons__WEBPACK_IMPORTED_MODULE_4__.uniArrowRight, vue_unicons_dist_icons__WEBPACK_IMPORTED_MODULE_4__.uniAngleRight, vue_unicons_dist_icons__WEBPACK_IMPORTED_MODULE_4__.uniAngleUp, vue_unicons_dist_icons__WEBPACK_IMPORTED_MODULE_4__.uniAngleDown, vue_unicons_dist_icons__WEBPACK_IMPORTED_MODULE_4__.uniAngleLeft, vue_unicons_dist_icons__WEBPACK_IMPORTED_MODULE_4__.uniFileUploadAlt]);
 var el = document.getElementById('app');
 (0,vue__WEBPACK_IMPORTED_MODULE_0__.createApp)({
   render: function render() {
@@ -46914,6 +47299,32 @@ _BreadCrumb_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__.default.__f
 
 /***/ }),
 
+/***/ "./resources/js/Components/ContactCard.vue":
+/*!*************************************************!*\
+  !*** ./resources/js/Components/ContactCard.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 _ContactCard_vue_vue_type_template_id_6cae7255__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./ContactCard.vue?vue&type=template&id=6cae7255 */ "./resources/js/Components/ContactCard.vue?vue&type=template&id=6cae7255");
+/* harmony import */ var _ContactCard_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./ContactCard.vue?vue&type=script&lang=js */ "./resources/js/Components/ContactCard.vue?vue&type=script&lang=js");
+
+
+
+_ContactCard_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__.default.render = _ContactCard_vue_vue_type_template_id_6cae7255__WEBPACK_IMPORTED_MODULE_0__.render
+/* hot reload */
+if (false) {}
+
+_ContactCard_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__.default.__file = "resources/js/Components/ContactCard.vue"
+
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_ContactCard_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__.default);
+
+/***/ }),
+
 /***/ "./resources/js/Components/Paginator.vue":
 /*!***********************************************!*\
   !*** ./resources/js/Components/Paginator.vue ***!
@@ -47892,6 +48303,32 @@ _VerifyEmail_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__.default.__
 
 /***/ }),
 
+/***/ "./resources/js/Pages/Cars/Index.vue":
+/*!*******************************************!*\
+  !*** ./resources/js/Pages/Cars/Index.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 _Index_vue_vue_type_template_id_5cf1bb2b__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Index.vue?vue&type=template&id=5cf1bb2b */ "./resources/js/Pages/Cars/Index.vue?vue&type=template&id=5cf1bb2b");
+/* harmony import */ var _Index_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Index.vue?vue&type=script&lang=js */ "./resources/js/Pages/Cars/Index.vue?vue&type=script&lang=js");
+
+
+
+_Index_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__.default.render = _Index_vue_vue_type_template_id_5cf1bb2b__WEBPACK_IMPORTED_MODULE_0__.render
+/* hot reload */
+if (false) {}
+
+_Index_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__.default.__file = "resources/js/Pages/Cars/Index.vue"
+
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_Index_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__.default);
+
+/***/ }),
+
 /***/ "./resources/js/Pages/Contacts/Create.vue":
 /*!************************************************!*\
   !*** ./resources/js/Pages/Contacts/Create.vue ***!
@@ -48314,6 +48751,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/ContactCard.vue?vue&type=script&lang=js":
+/*!*************************************************************************!*\
+  !*** ./resources/js/Components/ContactCard.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_ContactCard_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_ContactCard_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]!./ContactCard.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/ContactCard.vue?vue&type=script&lang=js");
+ 
+
 /***/ }),
 
 /***/ "./resources/js/Components/Paginator.vue?vue&type=script&lang=js":
@@ -48842,6 +49295,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_VerifyEmail_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]!./VerifyEmail.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/Pages/Auth/VerifyEmail.vue?vue&type=script&lang=js");
  
 
+/***/ }),
+
+/***/ "./resources/js/Pages/Cars/Index.vue?vue&type=script&lang=js":
+/*!*******************************************************************!*\
+  !*** ./resources/js/Pages/Cars/Index.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_Index_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_Index_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]!./Index.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/Pages/Cars/Index.vue?vue&type=script&lang=js");
+ 
+
 /***/ }),
 
 /***/ "./resources/js/Pages/Contacts/Edit.vue?vue&type=script&lang=js":
@@ -49098,6 +49567,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/ContactCard.vue?vue&type=template&id=6cae7255":
+/*!*******************************************************************************!*\
+  !*** ./resources/js/Components/ContactCard.vue?vue&type=template&id=6cae7255 ***!
+  \*******************************************************************************/
+/***/ ((__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_ContactCard_vue_vue_type_template_id_6cae7255__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_ContactCard_vue_vue_type_template_id_6cae7255__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]!./ContactCard.vue?vue&type=template&id=6cae7255 */ "./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/ContactCard.vue?vue&type=template&id=6cae7255");
+
+
 /***/ }),
 
 /***/ "./resources/js/Components/Paginator.vue?vue&type=template&id=4d98dc54":
@@ -49706,6 +50191,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_VerifyEmail_vue_vue_type_template_id_9f895776__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]!./VerifyEmail.vue?vue&type=template&id=9f895776 */ "./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/Pages/Auth/VerifyEmail.vue?vue&type=template&id=9f895776");
 
 
+/***/ }),
+
+/***/ "./resources/js/Pages/Cars/Index.vue?vue&type=template&id=5cf1bb2b":
+/*!*************************************************************************!*\
+  !*** ./resources/js/Pages/Cars/Index.vue?vue&type=template&id=5cf1bb2b ***!
+  \*************************************************************************/
+/***/ ((__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_Index_vue_vue_type_template_id_5cf1bb2b__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_Index_vue_vue_type_template_id_5cf1bb2b__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]!./Index.vue?vue&type=template&id=5cf1bb2b */ "./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/Pages/Cars/Index.vue?vue&type=template&id=5cf1bb2b");
+
+
 /***/ }),
 
 /***/ "./resources/js/Pages/Contacts/Edit.vue?vue&type=template&id=1c2aec8d":
@@ -53195,6 +53696,8 @@ var map = {
 	"./Auth/TwoFactorChallenge.vue": "./resources/js/Pages/Auth/TwoFactorChallenge.vue",
 	"./Auth/VerifyEmail": "./resources/js/Pages/Auth/VerifyEmail.vue",
 	"./Auth/VerifyEmail.vue": "./resources/js/Pages/Auth/VerifyEmail.vue",
+	"./Cars/Index": "./resources/js/Pages/Cars/Index.vue",
+	"./Cars/Index.vue": "./resources/js/Pages/Cars/Index.vue",
 	"./Contacts/Create": "./resources/js/Pages/Contacts/Create.vue",
 	"./Contacts/Create.vue": "./resources/js/Pages/Contacts/Create.vue",
 	"./Contacts/Edit": "./resources/js/Pages/Contacts/Edit.vue",

resources/js/Components/ContactCard.vue

@@ -0,0 +1,49 @@
+<template>
+    <div class="mt-3 p-3 bg-white shadow rounded-md font-medium">
+        <div v-if="contact.company" class="font-bold">
+            {{ contact.company }}
+        </div>
+        <div v-if="contact.lastname && contact.firstname">
+            {{ contact.lastname + ' ' + contact.firstname }}
+        </div>
+        <div v-if="contact.address">
+            {{ contact.address }}
+        </div>
+        <div v-if="contact.zip && contact.city">
+        {{ contact.zip + ' ' + contact.city + ' ' + contact.country }}
+        </div>
+        <div v-if="contact.email" class="mt-3">
+            <a :href="'mailto:' + contact.email" class="pt-1 pb-1 flex items-center">
+                <unicon class="mr-1" height="22" width="22" name="envelope"></unicon>  
+                {{ contact.email }}
+            </a>
+        </div>
+        <div v-if="contact.phone" class="mt-1">
+            <a :href="'phone:' + contact.phone" class="pt-1 pb-1 flex items-center">
+                <unicon class="mr-1" height="22" width="22" name="phone"></unicon>  
+                {{ contact.phone }}
+            </a>
+        </div>
+        <div v-if="contact.link" class="pt-3 mt-3 border-t">
+            <inertia-link :href="contact.link" class="pt-1 pb-1 flex items-center">
+                <unicon class="mr-1" height="22" width="22" name="arrow-right"></unicon>
+                Zum Kontakt
+            </inertia-link>
+        </div>
+    </div>
+</template>
+
+<script>
+
+export default ({
+    components: {
+    },
+
+    props: {
+        contact: Object,
+    },
+    computed: {
+
+    }
+})
+</script>

resources/js/Components/SimpleTable.vue

@@ -7,7 +7,18 @@
             <div v-if="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]">{{ col.value }}</th>
+                        <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="px-4 flex items-center">
+                                {{ col.value }}
+                                <div class="grid grid-cols-1 place-items-center ml-1">
+                                    <unicon :fill="getIconColor(col.key, 'asc')" height="22" width="22" name="angle-up"></unicon>
+                                    <unicon :fill="getIconColor(col.key, 'desc')" height="22" width="22" name="angle-down"></unicon>
+                                </div>
+                            </a>
+                            <span v-else class="px-4 flex items-center">
+                                {{ col.value }}
+                            </span>
+                        </th>
                     </tr>
                     <tr v-for="row in data.data" :key="row.link" class="hover:bg-gray-100 focus-within:bg-gray-100">
                         <td v-for="col in columns" :key="col.key" class="border-t">
@@ -20,7 +31,7 @@
                         </td>
                         <td v-if="row.link" 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>
+                                <unicon class="m-2" height="22" width="22" name="angle-right"></unicon>
                             </inertia-link>
                         </td>
                     </tr>
@@ -52,6 +63,31 @@ export default {
     data: Object,
     columns: Array,
     title: String,
+    defaultSort: Object,
+  },
+  data() {
+      return {
+          sort: this.defaultSort,
+      }
+  },
+  methods: {
+    sortTable(col) {
+        event.preventDefault();
+        if (this.sort.by == col) {
+            this.sort.direction = this.sort.direction == 'asc' ? 'desc' : 'asc';
+        } else {
+            this.sort.direction = 'asc';
+        }
+        //this.$inertia.get(this.route('contacts'), { preserveState: true })
+        this.sort.by = col;
+    },
+    getIconColor(col, dir) {
+        if (col == this.sort.by && dir == this.sort.direction) {
+            return '#4B5563';
+        }
+
+        return '#a0a5b9';
+    }
   },
 }
 </script>

resources/js/Pages/Cars/Index.vue

@@ -0,0 +1,71 @@
+<template>
+  <app-layout>
+    <template #header>
+        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
+            Autos
+        </h2>
+    </template>
+    <div class="py-12">
+        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
+              <div class="mb-6 flex justify-between items-center">
+                <input type="text" ref="search" v-model="form.search" autofocus="true" name="search" placeholder="Suchen..." class="border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm block w-full" autocomplete="off">
+                <jet-button class="ml-4" @click="createCar">
+                    Auto erfassen
+                </jet-button>
+            </div>
+            <simple-table :title="cars.total + ' Autos'" :data="cars" :columns="columns" :defaultSort="{ by: 'name', direction:'asc'}" />
+        </div>
+    </div>
+  </app-layout>
+</template>
+
+<script>
+import { pickBy, throttle, mapValues } from 'lodash'
+import AppLayout from '@/Layouts/AppLayout'
+import SimpleTable from '@/Components/SimpleTable.vue'
+import SearchFilter from '@/Components/SearchFilter'
+import JetButton from '@/Jetstream/Button'
+
+export default {
+  components: {
+    SearchFilter,
+    JetButton,
+    AppLayout,
+    SimpleTable,
+  },
+  props: {
+    filters: Object,
+    cars: Object,
+  },
+  data() {
+    return {
+      form: {
+        search: this.filters.search,
+        trashed: this.filters.trashed,
+      },
+      columns: [
+        {key: 'name', value: 'Name', sortable: true},
+        {key: 'stammnummer', value: 'Stammummer', sortable: true},
+        {key: 'buy_price', value: 'Kaufpreis', sortable: true},
+        {key: 'initial_date', value: 'Inverkehrssetzung', sortable: true},
+      ],
+    }
+  },
+  watch: {
+    form: {
+      deep: true,
+      handler: throttle(function() {
+        this.$inertia.get(this.route('cars'), pickBy(this.form), { preserveState: false })
+      }, 300),
+    },
+  },
+  methods: {
+    reset() {
+      this.form = mapValues(this.form, () => null)
+    },
+    createCar() {
+        this.$inertia.visit(route('cars.create'), { method: 'get' })
+    },
+  },
+}
+</script>

resources/js/Pages/Contacts/Edit.vue

@@ -15,7 +15,8 @@
                     </template>
 
                     <template #description>
-                        Kontaktinformationen anschauen &amp; anpassen
+                        Kontaktinformationen anschauen &amp; anpassen.
+                        <contact-card :contact="computedContact" />
                     </template>
 
                     <template #form>
@@ -103,10 +104,10 @@
         </div>
         <div class="py-12">
             <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
-                <simple-table :title="'An \'' + title + '\' verkaufte Autos'" :data="contact.bought_cars" :columns="boughtCarColumns" />
+                <simple-table :title="'An ' + title + ' verkaufte Autos'" :data="contact.bought_cars" :columns="boughtCarColumns" />
             </div>
             <div class="max-w-7xl pt-6 mx-auto sm:px-6 lg:px-8">    
-                <simple-table :title="'Von \'' + title + '\' gekaufte Autos'" :data="contact.sold_cars" :columns="soldCarColumns" />
+                <simple-table :title="'Von ' + title + ' gekaufte Autos'" :data="contact.sold_cars" :columns="soldCarColumns" />
             </div>
         </div>
     </app-layout>
@@ -116,6 +117,7 @@
 import AppLayout from '@/Layouts/AppLayout'
 import JetButton from '@/Jetstream/Button'
 import BreadCrumb from '@/Components/BreadCrumb.vue'
+import ContactCard from '@/Components/ContactCard.vue'
 import SimpleTable from '@/Components/SimpleTable.vue'
 import JetLabel from '@/Jetstream/Label.vue'
 import JetInput from '@/Jetstream/Input.vue'
@@ -134,6 +136,7 @@ export default {
         JetInput,
         JetInputError,
         JetActionMessage,
+        ContactCard,
     },
 
     props: {
@@ -174,6 +177,20 @@ export default {
             }
 
             return this.form.lastname + ' ' + this.form.firstname;
+        }, 
+        computedContact: function () {
+            return {
+                firstname: this.form.firstname,
+                lastname: this.form.lastname,
+                company: this.form.company,
+                email: this.form.email,
+                phone: this.form.phone,
+                address: this.form.address,
+                zip: this.form.zip,
+                city: this.form.city,
+                country: this.form.country,
+                link: route('contacts.update', this.contact),
+            }
         }
     },
 

resources/js/Pages/Contacts/Index.vue

@@ -11,10 +11,10 @@
                 <!-- <search-filter ref="search" v-model="form.search" class="w-full max-w-md mr-4" @reset="reset"></search-filter> -->
                 <input type="text" ref="search" v-model="form.search" autofocus="true" name="search" placeholder="Suchen..." class="border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm block w-full" autocomplete="off">
                 <jet-button class="ml-4" @click="createContact">
-                    Kontakt erstellen
+                    Kontakt erfassen
                 </jet-button>
             </div>
-            <simple-table :title="contacts.total + ' Kontakte'" :data="contacts" :columns="columns" />
+            <simple-table :title="contacts.total + ' Kontakte'" :data="contacts" :columns="columns" :defaultSort="{ by: 'name', direction:'asc'}" />
         </div>
     </div>
   </app-layout>
@@ -23,14 +23,12 @@
 <script>
 import { pickBy, throttle, mapValues } from 'lodash'
 import AppLayout from '@/Layouts/AppLayout'
-import Paginator from "@/Components/Paginator"
 import SimpleTable from '@/Components/SimpleTable.vue'
 import SearchFilter from '@/Components/SearchFilter'
 import JetButton from '@/Jetstream/Button'
 
 export default {
   components: {
-    Paginator,
     SearchFilter,
     JetButton,
     AppLayout,
@@ -47,9 +45,9 @@ export default {
         trashed: this.filters.trashed,
       },
       columns: [
-        {key: 'name', value: 'Name'},
+        {key: 'name', value: 'Name', sortable: true},
-        {key: 'company', value: 'Firma'},
+        {key: 'company', value: 'Firma', sortable: true},
-        {key: 'fullCity', value: 'Ort'},
+        {key: 'fullCity', value: 'Ort', sortable: true},
         {key: 'phone', value: 'Telefon'},
       ],
     }
@@ -59,7 +57,6 @@ export default {
       deep: true,
       handler: throttle(function() {
         this.$inertia.get(this.route('contacts'), pickBy(this.form), { preserveState: false })
-        // this.$refs.search.focus();
       }, 300),
     },
   },

resources/js/app.js

@@ -5,9 +5,9 @@ import { createApp, h } from 'vue';
 import { App as InertiaApp, plugin as InertiaPlugin } from '@inertiajs/inertia-vue3';
 import { InertiaProgress } from '@inertiajs/progress';
 import Unicon from 'vue-unicons';
-import { uniMeh, uniUsersAlt, uniCarSideview, uniDashboard, uniSearch, uniFilter, uniFilterSlash, uniTrashAlt, uniPen, uniExclamationTriangle, uniMapMarker, uniPhone, uniEnvelope, uniFileDownload, uniArrowDown, uniArrowUp, uniAngleRight, uniAngleUp, uniAngleDown, uniAngleLeft, uniFileUploadAlt } from 'vue-unicons/dist/icons'
+import { uniMeh, uniUsersAlt, uniCarSideview, uniDashboard, uniSearch, uniFilter, uniFilterSlash, uniTrashAlt, uniPen, uniExclamationTriangle, uniMapMarker, uniPhone, uniEnvelope, uniFileDownload, uniArrowDown, uniArrowUp, uniArrowRight, uniAngleRight, uniAngleUp, uniAngleDown, uniAngleLeft, uniFileUploadAlt } from 'vue-unicons/dist/icons'
 
-Unicon.add([uniMeh, uniUsersAlt, uniCarSideview, uniDashboard, uniSearch, uniFilter, uniFilterSlash, uniTrashAlt, uniPen, uniExclamationTriangle, uniMapMarker, uniPhone, uniEnvelope, uniFileDownload, uniArrowDown, uniArrowUp, uniAngleRight, uniAngleUp, uniAngleDown, uniAngleLeft, uniFileUploadAlt])
+Unicon.add([uniMeh, uniUsersAlt, uniCarSideview, uniDashboard, uniSearch, uniFilter, uniFilterSlash, uniTrashAlt, uniPen, uniExclamationTriangle, uniMapMarker, uniPhone, uniEnvelope, uniFileDownload, uniArrowDown, uniArrowUp, uniArrowRight, uniAngleRight, uniAngleUp, uniAngleDown, uniAngleLeft, uniFileUploadAlt])
 
 
 const el = document.getElementById('app');

routes/web.php

@@ -42,7 +42,7 @@ Route::post('contacts', [ContactController::class, 'store'])
     ->name('contacts.store')
     ->middleware(['auth:sanctum', 'verified']);
 
-Route::get('contacts/{contact}/edit', [ContactController::class, 'edit'])
+Route::get('contacts/{contact}', [ContactController::class, 'edit'])
     ->name('contacts.edit')
     ->middleware(['auth:sanctum', 'verified']);
 
@@ -62,6 +62,10 @@ Route::get('cars', [CarController::class, 'index'])
     ->name('cars')
     ->middleware(['auth:sanctum', 'verified']);
 
-Route::get('cars/{car}/edit', [CarController::class, 'edit'])
+Route::get('cars/create', [ContactController::class, 'create'])
+    ->name('cars.create')
+    ->middleware(['auth:sanctum', 'verified']);
+
+Route::get('cars/{car}', [CarController::class, 'edit'])
     ->name('cars.edit')
     ->middleware(['auth:sanctum', 'verified']);