payments

app/Enums/ContractType.php

@@ -13,6 +13,6 @@ use BenSampo\Enum\Enum;
  */
 final class ContractType extends Enum
 {
-    const BuyContract = 0;
+    const BuyContract = '0';
-    const SellContract = 1;
+    const SellContract = '1';
 }

app/Enums/InsuranceType.php

@@ -13,10 +13,10 @@ use BenSampo\Enum\Enum;
  */
 final class InsuranceType extends Enum
 {
-    const None = 0;
+    const None = '0';
-    const QBase = 1;
+    const QBase = '1';
-    const OneStar = 2;
+    const OneStar = '2';
-    const ThreeStar = 3;
+    const ThreeStar = '3';
-    const FiveStar = 4;
+    const FiveStar = '4';
-    const FiveStarPlus = 5;
+    const FiveStarPlus = '5';
 }

app/Enums/PaymentType.php

@@ -10,6 +10,6 @@ use BenSampo\Enum\Enum;
  */
 final class PaymentType extends Enum
 {
-    const Transaction = 0;
+    const Transaction = '0';
-    const Cash = 1;
+    const Cash = '1';
 }

app/Http/Controllers/BrandController.php

@@ -8,11 +8,6 @@ use Illuminate\Support\Facades\Redirect;
 
 class BrandController extends Controller
 {
-    /**
-     * Display a listing of the resource.
-     *
-     * @return \Illuminate\Http\Response
-     */
     public function index()
     {
         return Brand::all()->map(function ($brand) {
@@ -30,21 +25,6 @@ class BrandController extends Controller
         });
     }
 
-    /**
-     * Show the form for creating a new resource.
-     *
-     * @return \Illuminate\Http\Response
-     */
-    public function create()
-    {
-        //
-    }
-
-    /**
-     * Store a newly created resource in storage.
-     *
-     * @param  \Illuminate\Http\Request  $request
-     */
     public function store(Request $request)
     {
         $brand = Brand::create(
@@ -55,49 +35,4 @@ class BrandController extends Controller
 
         return $brand;
     }
-
-    /**
-     * Display the specified resource.
-     *
-     * @param  \App\Models\Brand  $brand
-     * @return \Illuminate\Http\Response
-     */
-    public function show(Brand $brand)
-    {
-        //
-    }
-
-    /**
-     * Show the form for editing the specified resource.
-     *
-     * @param  \App\Models\Brand  $brand
-     * @return \Illuminate\Http\Response
-     */
-    public function edit(Brand $brand)
-    {
-        //
-    }
-
-    /**
-     * Update the specified resource in storage.
-     *
-     * @param  \Illuminate\Http\Request  $request
-     * @param  \App\Models\Brand  $brand
-     * @return \Illuminate\Http\Response
-     */
-    public function update(Request $request, Brand $brand)
-    {
-        //
-    }
-
-    /**
-     * Remove the specified resource from storage.
-     *
-     * @param  \App\Models\Brand  $brand
-     * @return \Illuminate\Http\Response
-     */
-    public function destroy(Brand $brand)
-    {
-        //
-    }
 }

app/Http/Controllers/CarController.php

@@ -2,6 +2,7 @@
 
 namespace App\Http\Controllers;
 
+use Carbon\Carbon;
 use App\Models\Car;
 use Inertia\Inertia;
 use App\Models\Brand;
@@ -72,7 +73,7 @@ class CarController extends Controller
             'price' => $contract->price->format(),
             'type' => $contract->type,
             'is_sell_contract' => $contract->isSellContract(),
-            'insurance_type' => $contract->insurance_type ? InsuranceType::fromValue((int)$contract->insurance_type)->key : null,
+            'insurance_type' => $contract->insurance_type ? InsuranceType::fromValue($contract->insurance_type)->key : null,
             'contact' => [
                 'id' => $contact->id,
                 'name' => $contact->name,
@@ -183,6 +184,11 @@ class CarController extends Controller
 
     public function store(Request $request)
     {
+        $request->merge([
+            'initial_date' => Carbon::parse($request->get('initial_date'))->format('Y-m-d'),
+            'last_check_date' => Carbon::parse($request->get('last_check_date'))->format('Y-m-d'),
+        ]);
+
         $car = Car::create(
             $request->validate($this->getValidationRules())
         );
@@ -289,6 +295,11 @@ class CarController extends Controller
 
     public function update(Request $request, Car $car)
     {
+        $request->merge([
+            'initial_date' => Carbon::parse($request->get('initial_date'))->format('Y-m-d'),
+            'last_check_date' => Carbon::parse($request->get('last_check_date'))->format('Y-m-d'),
+        ]);
+
         $car->update(
             $request->validate([
                 'stammnummer' => ['required', 'unique:cars,stammnummer,' . $car->id, 'string', 'size:11', 'regex:/[0-9]{3}[.][0-9]{3}[.][0-9]{3}/i'],

app/Http/Controllers/CarModelController.php

@@ -7,32 +7,6 @@ use Illuminate\Http\Request;
 
 class CarModelController extends Controller
 {
-    /**
-     * Display a listing of the resource.
-     *
-     * @return \Illuminate\Http\Response
-     */
-    public function index()
-    {
-        //
-    }
-
-    /**
-     * Show the form for creating a new resource.
-     *
-     * @return \Illuminate\Http\Response
-     */
-    public function create()
-    {
-        //
-    }
-
-    /**
-     * Store a newly created resource in storage.
-     *
-     * @param  \Illuminate\Http\Request  $request
-     * @return \Illuminate\Http\Response
-     */
     public function store(Request $request)
     {
         $model = CarModel::create(
@@ -44,49 +18,4 @@ class CarModelController extends Controller
 
         return $model;
     }
-
-    /**
-     * Display the specified resource.
-     *
-     * @param  \App\Models\CarModel  $carModel
-     * @return \Illuminate\Http\Response
-     */
-    public function show(CarModel $carModel)
-    {
-        //
-    }
-
-    /**
-     * Show the form for editing the specified resource.
-     *
-     * @param  \App\Models\CarModel  $carModel
-     * @return \Illuminate\Http\Response
-     */
-    public function edit(CarModel $carModel)
-    {
-        //
-    }
-
-    /**
-     * Update the specified resource in storage.
-     *
-     * @param  \Illuminate\Http\Request  $request
-     * @param  \App\Models\CarModel  $carModel
-     * @return \Illuminate\Http\Response
-     */
-    public function update(Request $request, CarModel $carModel)
-    {
-        //
-    }
-
-    /**
-     * Remove the specified resource from storage.
-     *
-     * @param  \App\Models\CarModel  $carModel
-     * @return \Illuminate\Http\Response
-     */
-    public function destroy(CarModel $carModel)
-    {
-        //
-    }
 }

app/Http/Controllers/CarPaymentController.php

@@ -1,10 +0,0 @@
-<?php
-
-namespace App\Http\Controllers;
-
-use Illuminate\Http\Request;
-
-class CarPaymentController extends Controller
-{
-    //
-}

app/Http/Controllers/ContactController.php

@@ -179,7 +179,7 @@ class ContactController extends Controller
             'price' => $contract->price->format(),
             'type' => $contract->type,
             'is_sell_contract' => $contract->isSellContract(),
-            'insurance_type' => $contract->insurance_type ? InsuranceType::fromValue((int)$contract->insurance_type)->key : null,
+            'insurance_type' => $contract->insurance_type ? InsuranceType::fromValue($contract->insurance_type)->key : null,
             'car' => [
                  'id' => $car->id,
                     'stammnummer' => $car->stammnummer,

app/Http/Controllers/ContractController.php

@@ -2,49 +2,21 @@
 
 namespace App\Http\Controllers;
 
+use Carbon\Carbon;
 use App\Models\Car;
 use Inertia\Inertia;
 use App\Models\Brand;
 use App\Models\Contact;
 use App\Models\Contract;
 use App\Enums\ContractType;
-use Barryvdh\DomPDF\Facade as PDF;
 use App\Enums\InsuranceType;
 use Illuminate\Http\Request;
+use Illuminate\Validation\Rule;
+use Barryvdh\DomPDF\Facade as PDF;
 use Illuminate\Support\Facades\Redirect;
 
 class ContractController extends Controller
 {
-    /**
-     * Display a listing of the resource.
-     *
-     * @return \Illuminate\Http\Response
-     */
-    public function index(Request $request)
-    {
-        return [];
-    }
-
-    /**
-     * Display a listing of the resource.
-     *
-     * @return \Illuminate\Http\Response
-     */
-    public function buyContracts(Request $request)
-    {
-        return [];
-    }
-
-    /**
-     * Display a listing of the resource.
-     *
-     * @return \Illuminate\Http\Response
-     */
-    public function sellContracts(Request $request)
-    {
-        return [];
-    }       
-
     public function create(Request $request, int $type, Car $car, Contact $contact)
     {
         return Inertia::render('Contracts/Create', [
@@ -131,14 +103,20 @@ class ContractController extends Controller
 
     public function store(Request $request)
     {
+        $request->merge([
+            'type' => (string)$request->get('type'),
+            'insurance_type' => (string)$request->get('insurance_type'),
+            'date' => Carbon::parse($request->get('date'))->format('Y-m-d'),
+        ]);
+
         $contract = Contract::create(
             $request->validate([
-                'type' => ['required'],
+                'type' => ['required', 'string', Rule::in(ContractType::getValues())],
                 'date' => ['required', 'date'],
                 'price' => ['required', 'integer'],
                 'car_id' => ['required', 'exists:App\Models\Car,id'],
                 'contact_id' => ['required', 'exists:App\Models\Contact,id'],
-                'insurance_type' => ['nullable', 'max:75'],
+                'insurance_type' => ['nullable', 'string', Rule::in(InsuranceType::getValues())],
             ])
         );
 
@@ -168,11 +146,16 @@ class ContractController extends Controller
 
     public function update(Request $request, Contract $contract)
     {
+        $request->merge([
+            'insurance_type' => (string)$request->get('insurance_type'),
+            'date' => Carbon::parse($request->get('date'))->format('Y-m-d'),
+        ]);
+
         $contract->update(
             $request->validate([
                 'date' => ['required', 'date'],
                 'price' => ['required', 'integer'],
-                'insurance_type' => ['nullable', 'max:75'],
+                'insurance_type' => ['nullable', 'string', Rule::in(InsuranceType::getValues())],
             ])
         );
 
@@ -190,7 +173,7 @@ class ContractController extends Controller
             'price' => $contract->price->format(),
             'type' => $contract->type,
             'is_sell_contract' => $contract->isSellContract(),
-            'documents' => $contract->documents()->get()
+            'documents' => $contract->documents()->orderBy('created_at', 'asc')->get()
                 ->map(function ($document) {
                     return [
                         'id' => $document->id,
@@ -201,7 +184,15 @@ class ContractController extends Controller
                         'created_at' => $document->created_at,
                     ];
                 }),
-            'insurance_type' => $contract->insurance_type ? InsuranceType::fromValue((int)$contract->insurance_type)->key : null,
+            'payments' => $contract->payments()->orderBy('date', 'asc')->paginate(50)
+                ->through(fn ($payment) => [
+                        'id' => $payment->id,
+                        'date' => $payment->date,
+                        'amount' => $payment->amount,
+                        'type' => $payment->type,
+                        'delete_link' => $payment->delete_link,
+                ]),
+            'insurance_type' => $contract->insurance_type ? InsuranceType::fromValue($contract->insurance_type)->key : null,
             'deleted_at' => $contract->deleted_at,
             'contact' => [
                 'id' => $contract->contact->id,

app/Http/Controllers/DocumentController.php

@@ -10,7 +10,7 @@ use Illuminate\Support\Facades\Redirect;
 
 class DocumentController extends Controller
 {
-    public function show(Document $document)
+    public function show(Contract $contract, Document $document)
     {
         if (file_exists($document->path)) {
             header('Content-Disposition: filename="' . $document->name . '"');
@@ -43,11 +43,19 @@ class DocumentController extends Controller
         ];
     }
 
-    public function destroy(Document $document)
+    public function destroy(Request $request, Contract $contract)
     {
+        $document = Document::find((int)$request->get('id'));
+        
+        if (!$document) {
+            session()->flash('flash.banner', 'Fehler beim Löschen, Dokument nicht gefunden.');
+            return Redirect::back();
+        }
+
         if (file_exists($document->path)) {
             unlink($document->path);
         }
+
         $document->delete();
         session()->flash('flash.banner', 'Dokument gelöscht.');
         return Redirect::back();

app/Http/Controllers/PaymentController.php

@@ -0,0 +1,51 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Carbon\Carbon;
+use Inertia\Inertia;
+use App\Models\Payment;
+use App\Models\Contract;
+use App\Enums\PaymentType;
+use Illuminate\Http\Request;
+use Illuminate\Validation\Rule;
+use Illuminate\Support\Facades\Redirect;
+
+class PaymentController extends Controller
+{
+    public function create()
+    {
+        return Inertia::render('Payments/Create');
+    }
+
+    public function store(Request $request)
+    {
+        $request->merge([
+            'type' => (string)$request->get('type'),
+            'date' => Carbon::parse($request->get('date'))->format('Y-m-d'),
+        ]);
+
+        $Payment = Payment::create(
+            $request->validate([
+                'date' => ['required', 'date'],
+                'amount' => ['required', 'integer'],
+                'type' => ['required', 'string', Rule::in(PaymentType::getValues())],
+                'contract_id' => ['required', 'exists:App\Models\Contract,id'],
+            ])
+        );
+
+        session()->flash('flash.banner', 'Einzahlung gespeichert.');
+        return Redirect::route('contracts.show', $Payment->contract);
+    }
+
+    public function destroy(Request $request, Contract $contract)
+    {
+        if (Payment::destroy((int)$request->get('id'))) {
+            session()->flash('flash.banner', 'Einzahlung gelöscht.');
+        } else {
+            session()->flash('flash.banner', 'Fehler beim Löschen, Einzahlung nicht gefunden.');
+        }
+        
+        return Redirect::back();
+    }
+}

app/Models/CarPayment.php

@@ -1,28 +0,0 @@
-<?php
-
-namespace App\Models;
-
-use Illuminate\Database\Eloquent\Factories\HasFactory;
-use Illuminate\Database\Eloquent\Model;
-
-class CarPayment extends Model
-{
-    use HasFactory;
-
-    protected $fillable = [
-        'amount',
-        'date',
-        'type',
-        'sell_contract_id',
-    ];
-
-    public function sellContract()
-    {
-        return $this->belongsTo(SellContract::class);
-    }
-
-    public function car()
-    {
-        return $this->hasOneThrough(Car::class, SellContract::class);
-    }
-}

app/Models/Contract.php

@@ -80,6 +80,11 @@ class Contract extends Model
         return $this->hasMany(Document::class);
     }
 
+    public function payments()
+    {
+        return $this->hasMany(Payment::class);
+    }
+
     public function contact()
     {
         return $this->belongsTo(Contact::class)->withTrashed();

app/Models/Document.php

@@ -43,7 +43,7 @@ class Document extends Model
 
     public function getLinkAttribute()
     {
-        return route('documents.show', $this->id);
+        return route('documents.show', [$this->contract->id, $this->id]);
     }
 
     public function getPathAttribute()

app/Models/Payment.php

@@ -0,0 +1,47 @@
+<?php
+
+namespace App\Models;
+
+use Carbon\Carbon;
+use Cknow\Money\Money;
+use App\Models\Contract;
+use App\Enums\PaymentType;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+
+class Payment extends Model
+{
+    use HasFactory;
+
+    protected $fillable = [
+        'amount',
+        'date',
+        'type',
+        'contract_id',
+    ];
+
+    public function contract()
+    {
+        return $this->belongsTo(Contract::class)->withTrashed();
+    }
+
+    public function getDateAttribute($date)
+    {
+        return Carbon::parse($date)->format('d.m.Y');
+    }
+
+    public function getAmountAttribute($amount)
+    {
+        return Money::CHF($amount)->format();
+    }
+
+    public function getTypeAttribute($type)
+    {
+        return $type == PaymentType::Transaction() ? 'Überweisung' : 'Barzahlung';
+    }
+
+    public function getDeleteLinkAttribute()
+    {
+        return route('payments.destroy', [$this->contract->id, $this->id]);
+    }
+}

database/factories/PaymentFactory.php

@@ -2,19 +2,19 @@
 
 namespace Database\Factories;
 
-use App\Models\CarPayment;
+use App\Models\Payment;
 use Illuminate\Database\Eloquent\Factories\Factory;
 use App\Enums\PaymentType;
 use App\Models\Contract;
 
-class CarPaymentFactory extends Factory
+class PaymentFactory extends Factory
 {
     /**
      * The name of the factory's corresponding model.
      *
      * @var string
      */
-    protected $model = CarPayment::class;
+    protected $model = Payment::class;
 
     /**
      * Define the model's default state.

database/migrations/2021_05_10_144704_create_payments_table.php

@@ -5,7 +5,7 @@ use Illuminate\Database\Schema\Blueprint;
 use Illuminate\Support\Facades\Schema;
 use App\Enums\PaymentType;
 
-class CreateCarPaymentsTable extends Migration
+class CreatePaymentsTable extends Migration
 {
     /**
      * Run the migrations.
@@ -14,7 +14,7 @@ class CreateCarPaymentsTable extends Migration
      */
     public function up()
     {
-        Schema::create('car_payments', function (Blueprint $table) {
+        Schema::create('payments', function (Blueprint $table) {
             $table->id();
             $table->integer('amount');
             $table->date('date');
@@ -35,6 +35,6 @@ class CreateCarPaymentsTable extends Migration
      */
     public function down()
     {
-        Schema::dropIfExists('car_payments');
+        Schema::dropIfExists('payments');
     }
 }

database/seeders/DatabaseSeeder.php

@@ -8,7 +8,7 @@ use App\Models\Team;
 use App\Models\Car;
 use App\Models\CarModel;
 use App\Models\Brand;
-use App\Models\CarPayment;
+use App\Models\Payment;
 use App\Models\Contract;
 use App\Models\Contact;
 use App\Models\Document;
@@ -25,7 +25,7 @@ class DatabaseSeeder extends Seeder
     {
         DB::statement('SET FOREIGN_KEY_CHECKS=0;');
         User::truncate();
-        CarPayment::truncate();
+        Payment::truncate();
         Contract::truncate();
         Document::truncate();
         Car::truncate();
@@ -67,7 +67,7 @@ class DatabaseSeeder extends Seeder
             ->count($nOfCars * 2)
             ->create();
 
-        $carPayments = CarPayment::factory()
+        $payments = Payment::factory()
             ->count(60)
             ->create();
 

public/js/app.js

@@ -17908,7 +17908,7 @@ __webpack_require__.r(__webpack_exports__);
   },
   data: function data() {
     return {
-      colour: 'indigo'
+      colour: 'gray'
     };
   },
   computed: {
@@ -18109,12 +18109,14 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({
-  components: {},
   props: {
     document: Object
   },
-  data: function data() {
+  methods: {
-    return {};
+    deleteDocument: function deleteDocument(e) {
+      e.preventDefault();
+      this.$emit('delete', this.document.id);
+    }
   }
 });
 
@@ -18136,7 +18138,7 @@ var STATUS_INITIAL = 0,
     STATUS_FAILED = 2;
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({
   props: {
-    contract: Object,
+    id: Number,
     documents: Object
   },
   data: function data() {
@@ -18168,7 +18170,7 @@ var STATUS_INITIAL = 0,
 
       // upload data to the server
       this.currentStatus = STATUS_SAVING;
-      axios.post(this.route('documents.store', this.contract.id), formData).then(function (response) {
+      axios.post(this.route('documents.store', this.id), formData).then(function (response) {
         _this.documents.push(response.data);
 
         _this.reset();
@@ -18196,6 +18198,58 @@ var STATUS_INITIAL = 0,
 
 /***/ }),
 
+/***/ "./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/Documents/View.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/Documents/View.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 _inertiajs_inertia_vue3__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @inertiajs/inertia-vue3 */ "./node_modules/@inertiajs/inertia-vue3/dist/index.js");
+/* harmony import */ var _Components_Documents_Item_vue__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @/Components/Documents/Item.vue */ "./resources/js/Components/Documents/Item.vue");
+/* harmony import */ var _Components_Documents_Upload_vue__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @/Components/Documents/Upload.vue */ "./resources/js/Components/Documents/Upload.vue");
+
+
+
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({
+  components: {
+    DocumentItem: _Components_Documents_Item_vue__WEBPACK_IMPORTED_MODULE_1__.default,
+    DocumentUpload: _Components_Documents_Upload_vue__WEBPACK_IMPORTED_MODULE_2__.default
+  },
+  props: {
+    initial_documents: Object,
+    id: Number,
+    show_upload: Boolean
+  },
+  data: function data() {
+    return {
+      documents: this.initial_documents
+    };
+  },
+  methods: {
+    deleteDocument: function deleteDocument(documentId) {
+      var _this = this;
+
+      var form = (0,_inertiajs_inertia_vue3__WEBPACK_IMPORTED_MODULE_0__.useForm)("deleteDocument".concat(documentId), {
+        id: documentId
+      });
+      form["delete"](route('documents.destroy', this.id), {
+        preserveScroll: true,
+        onSuccess: function onSuccess() {
+          form.reset();
+          _this.documents = _this.initial_documents;
+        }
+      });
+    }
+  }
+});
+
+/***/ }),
+
 /***/ "./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/Navbar.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/Navbar.vue?vue&type=script&lang=js ***!
@@ -18261,6 +18315,155 @@ __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/Payments/CreateModal.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/Payments/CreateModal.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 _Jetstream_Button__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @/Jetstream/Button */ "./resources/js/Jetstream/Button.vue");
+/* harmony import */ var _Jetstream_Label_vue__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @/Jetstream/Label.vue */ "./resources/js/Jetstream/Label.vue");
+/* harmony import */ var _Jetstream_Input_vue__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @/Jetstream/Input.vue */ "./resources/js/Jetstream/Input.vue");
+/* harmony import */ var _Jetstream_InputError__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @/Jetstream/InputError */ "./resources/js/Jetstream/InputError.vue");
+/* harmony import */ var vue_multiselect__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! vue-multiselect */ "./node_modules/vue-multiselect/dist/vue-multiselect.esm.js");
+/* harmony import */ var vue3_datepicker__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! vue3-datepicker */ "./node_modules/vue3-datepicker/dist/vue3-datepicker.esm.js");
+/* harmony import */ var _inertiajs_inertia_vue3__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @inertiajs/inertia-vue3 */ "./node_modules/@inertiajs/inertia-vue3/dist/index.js");
+/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! vue */ "./node_modules/vue/dist/vue.esm-bundler.js");
+/* harmony import */ var _Jetstream_DialogModal_vue__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @/Jetstream/DialogModal.vue */ "./resources/js/Jetstream/DialogModal.vue");
+
+
+
+
+
+
+
+
+
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({
+  components: {
+    JetButton: _Jetstream_Button__WEBPACK_IMPORTED_MODULE_0__.default,
+    JetLabel: _Jetstream_Label_vue__WEBPACK_IMPORTED_MODULE_1__.default,
+    JetInput: _Jetstream_Input_vue__WEBPACK_IMPORTED_MODULE_2__.default,
+    JetInputError: _Jetstream_InputError__WEBPACK_IMPORTED_MODULE_3__.default,
+    Multiselect: vue_multiselect__WEBPACK_IMPORTED_MODULE_4__.default,
+    DialogModal: _Jetstream_DialogModal_vue__WEBPACK_IMPORTED_MODULE_8__.default,
+    Datepicker: vue3_datepicker__WEBPACK_IMPORTED_MODULE_5__.default
+  },
+  props: {
+    id: Number,
+    showModal: Boolean
+  },
+  data: function data() {
+    return {
+      form: (0,_inertiajs_inertia_vue3__WEBPACK_IMPORTED_MODULE_6__.useForm)('CreatePayment', {
+        id: null,
+        date: (0,vue__WEBPACK_IMPORTED_MODULE_7__.ref)(new Date()),
+        amount: null,
+        type: '1',
+        contract_id: this.id
+      }) // typeSelection: {key: this.data.type, label: 'asd'},
+
+    };
+  },
+  methods: {
+    submitForm: function submitForm() {
+      var _this = this;
+
+      this.form.post(this.route('payments.store', this.id), {
+        preserveScroll: true,
+        onSuccess: function onSuccess() {
+          _this.$emit('close');
+
+          form.reset();
+        }
+      });
+    } // updateTypeSelection(selection) {
+    //     this.form.type = (selection.key).toString();
+    // },
+
+  }
+});
+
+/***/ }),
+
+/***/ "./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/Payments/View.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/Payments/View.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 _Components_SimpleTable_vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @/Components/SimpleTable.vue */ "./resources/js/Components/SimpleTable.vue");
+/* harmony import */ var _Components_Payments_CreateModal_vue__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @/Components/Payments/CreateModal.vue */ "./resources/js/Components/Payments/CreateModal.vue");
+/* harmony import */ var _Components_Buttons_StandardButton_vue__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @/Components/Buttons/StandardButton.vue */ "./resources/js/Components/Buttons/StandardButton.vue");
+/* harmony import */ var _inertiajs_inertia_vue3__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @inertiajs/inertia-vue3 */ "./node_modules/@inertiajs/inertia-vue3/dist/index.js");
+
+
+
+
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({
+  components: {
+    SimpleTable: _Components_SimpleTable_vue__WEBPACK_IMPORTED_MODULE_0__.default,
+    PaymentCreateModal: _Components_Payments_CreateModal_vue__WEBPACK_IMPORTED_MODULE_1__.default,
+    StandardButton: _Components_Buttons_StandardButton_vue__WEBPACK_IMPORTED_MODULE_2__.default
+  },
+  props: {
+    payments: Object,
+    id: Number,
+    show_upload: Boolean
+  },
+  data: function data() {
+    return {
+      showModal: false,
+      columns: [{
+        key: 'date',
+        value: 'Datum',
+        sortable: false
+      }, {
+        key: 'amount',
+        value: 'Betrag',
+        sortable: false
+      }, {
+        key: 'type',
+        value: 'Bezahlart',
+        sortable: false
+      }, {
+        key: 'delete',
+        value: '',
+        sortable: false
+      }]
+    };
+  },
+  methods: {
+    openModal: function openModal(e) {
+      e.preventDefault();
+      this.showModal = true;
+    },
+    deletePayment: function deletePayment(id) {
+      var form = (0,_inertiajs_inertia_vue3__WEBPACK_IMPORTED_MODULE_3__.useForm)("deletePayment".concat(id), {
+        id: id
+      });
+      form["delete"](route('payments.destroy', this.id), {
+        preserveScroll: true,
+        onSuccess: function onSuccess() {
+          return form.reset();
+        }
+      });
+    }
+  }
+});
+
+/***/ }),
+
 /***/ "./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/SellContractCard.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/SellContractCard.vue?vue&type=script&lang=js ***!
@@ -21233,8 +21436,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _Components_Buttons_PrintButton_vue__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @/Components/Buttons/PrintButton.vue */ "./resources/js/Components/Buttons/PrintButton.vue");
 /* harmony import */ var _Components_ContactCard_vue__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @/Components/ContactCard.vue */ "./resources/js/Components/ContactCard.vue");
 /* harmony import */ var _Components_Buttons_EditButton_vue__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @/Components/Buttons/EditButton.vue */ "./resources/js/Components/Buttons/EditButton.vue");
-/* harmony import */ var _Components_Documents_Item_vue__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! @/Components/Documents/Item.vue */ "./resources/js/Components/Documents/Item.vue");
+/* harmony import */ var _Components_Documents_View_vue__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! @/Components/Documents/View.vue */ "./resources/js/Components/Documents/View.vue");
-/* harmony import */ var _Components_Documents_Upload_vue__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! @/Components/Documents/Upload.vue */ "./resources/js/Components/Documents/Upload.vue");
+/* harmony import */ var _Components_Payments_View_vue__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! @/Components/Payments/View.vue */ "./resources/js/Components/Payments/View.vue");
 var _components;
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -21261,7 +21464,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
     PrintButton: _Components_Buttons_PrintButton_vue__WEBPACK_IMPORTED_MODULE_6__.default,
     ContactCard: _Components_ContactCard_vue__WEBPACK_IMPORTED_MODULE_7__.default,
     EditButton: _Components_Buttons_EditButton_vue__WEBPACK_IMPORTED_MODULE_8__.default
-  }, _defineProperty(_components, "CarCard", _Components_CarCard_vue__WEBPACK_IMPORTED_MODULE_5__.default), _defineProperty(_components, "DocumentItem", _Components_Documents_Item_vue__WEBPACK_IMPORTED_MODULE_9__.default), _defineProperty(_components, "DocumentUpload", _Components_Documents_Upload_vue__WEBPACK_IMPORTED_MODULE_10__.default), _components),
+  }, _defineProperty(_components, "CarCard", _Components_CarCard_vue__WEBPACK_IMPORTED_MODULE_5__.default), _defineProperty(_components, "DocumentsView", _Components_Documents_View_vue__WEBPACK_IMPORTED_MODULE_9__.default), _defineProperty(_components, "PaymentsView", _Components_Payments_View_vue__WEBPACK_IMPORTED_MODULE_10__.default), _components),
   props: {
     contract: Object
   },
@@ -21276,7 +21479,6 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
   data: function data() {
     return {
       currentRoute: 'contracts.show',
-      documents: this.contract.documents,
       buyContractsColumns: [{
         key: 'contact',
         value: 'Verkäufer'
@@ -22772,31 +22974,23 @@ var _hoisted_4 = {
 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)("a", {
     target: "_blank",
     href: $props.document.link,
     "class": "p-3 col-span-2 grid relative grid-flow-rows cursor-pointer group auto-rows-max hover:bg-white bg-gray-50 transition shadow rounded-md font-medium"
-  }, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_inertia_link, {
+  }, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("a", {
-    href: _ctx.route('documents.destroy', $props.document.id),
+    onClick: _cache[1] || (_cache[1] = function () {
-    "class": "absolute right-0 opacity-0 group-hover:opacity-80 transition"
+      return $options.deleteDocument && $options.deleteDocument.apply($options, arguments);
-  }, {
-    "default": (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
-      return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_unicon, {
-        fill: "red",
-        "class": "p-2",
-        height: "40",
-        width: "40",
-        name: "trash-alt"
-      })];
     }),
-    _: 1
+    href: "#",
-    /* STABLE */
+    "class": "absolute right-0 opacity-0 group-hover:opacity-80 transition"
-
+  }, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_unicon, {
-  }, 8
+    fill: "red",
-  /* PROPS */
+    "class": "p-2",
-  , ["href"]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("span", _hoisted_1, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_unicon, {
+    height: "40",
+    width: "40",
+    name: "trash-alt"
+  })]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("span", _hoisted_1, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_unicon, {
     fill: "royalblue",
     "class": "p-2",
     height: "70",
@@ -22886,6 +23080,57 @@ 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/Documents/View.vue?vue&type=template&id=57be3cc7":
+/*!************************************************************************************************************************************************************************************************************************************************************************************!*\
+  !*** ./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/Documents/View.vue?vue&type=template&id=57be3cc7 ***!
+  \************************************************************************************************************************************************************************************************************************************************************************************/
+/***/ ((__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)("h3", {
+  "class": "mb-3"
+}, "Dokumente", -1
+/* HOISTED */
+);
+
+var _hoisted_2 = {
+  "class": "grid grid-cols-8 xs:grid-cols-6 gap-3"
+};
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _component_document_item = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("document-item");
+
+  var _component_document_upload = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("document-upload");
+
+  return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)(vue__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, [_hoisted_1, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_2, [((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)($data.documents, function (document) {
+    return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)(_component_document_item, {
+      key: document.id,
+      onDelete: $options.deleteDocument,
+      document: document
+    }, null, 8
+    /* PROPS */
+    , ["onDelete", "document"]);
+  }), 128
+  /* KEYED_FRAGMENT */
+  )), $props.show_upload ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)(_component_document_upload, {
+    key: 0,
+    id: $props.id,
+    documents: $data.documents
+  }, null, 8
+  /* PROPS */
+  , ["id", "documents"])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)])], 64
+  /* STABLE_FRAGMENT */
+  );
+}
+
+/***/ }),
+
 /***/ "./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/Navbar.vue?vue&type=template&id=4a80dbca":
 /*!****************************************************************************************************************************************************************************************************************************************************************************!*\
   !*** ./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/Navbar.vue?vue&type=template&id=4a80dbca ***!
@@ -23080,6 +23325,238 @@ 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/Payments/CreateModal.vue?vue&type=template&id=5635b85a":
+/*!******************************************************************************************************************************************************************************************************************************************************************************************!*\
+  !*** ./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/Payments/CreateModal.vue?vue&type=template&id=5635b85a ***!
+  \******************************************************************************************************************************************************************************************************************************************************************************************/
+/***/ ((__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__.createTextVNode)(" Neue Einzahlung ");
+
+var _hoisted_2 = {
+  "class": "grid grid-cols-6 gap-6"
+};
+var _hoisted_3 = {
+  "class": "col-span-6 sm:col-span-4"
+};
+var _hoisted_4 = {
+  "class": "col-span-6 sm:col-span-4"
+};
+var _hoisted_5 = {
+  "class": "col-span-6 sm:col-span-4"
+};
+
+var _hoisted_6 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)(" Einzahlung speichern ");
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _component_jet_label = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("jet-label");
+
+  var _component_datepicker = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("datepicker");
+
+  var _component_jet_input_error = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("jet-input-error");
+
+  var _component_jet_input = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("jet-input");
+
+  var _component_jet_button = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("jet-button");
+
+  var _component_dialog_modal = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("dialog-modal");
+
+  return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)(vue__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_dialog_modal, {
+    show: $props.showModal,
+    onClose: _cache[5] || (_cache[5] = function ($event) {
+      return _ctx.$emit('close');
+    })
+  }, {
+    title: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
+      return [_hoisted_1];
+    }),
+    content: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
+      return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("form", {
+        onSubmitted: _cache[4] || (_cache[4] = function () {
+          return $options.submitForm && $options.submitForm.apply($options, arguments);
+        })
+      }, [(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)(_component_jet_label, {
+        "for": "date",
+        value: "Datum"
+      }), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_datepicker, {
+        id: "date",
+        ref: "date",
+        modelValue: $data.form.date,
+        "onUpdate:modelValue": _cache[1] || (_cache[1] = function ($event) {
+          return $data.form.date = $event;
+        }),
+        inputFormat: "dd.MM.yyyy",
+        "class": "border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm mt-1 block w-full"
+      }, null, 8
+      /* PROPS */
+      , ["modelValue"]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_jet_input_error, {
+        message: $data.form.errors.date,
+        "class": "mt-2"
+      }, null, 8
+      /* PROPS */
+      , ["message"])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_4, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_jet_label, {
+        "for": "amount",
+        value: "Betrag"
+      }), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_jet_input, {
+        id: "amount",
+        type: "text",
+        "class": "mt-1 block w-full",
+        modelValue: $data.form.amount,
+        "onUpdate:modelValue": _cache[2] || (_cache[2] = function ($event) {
+          return $data.form.amount = $event;
+        }),
+        ref: "amount",
+        autocomplete: "amount"
+      }, null, 8
+      /* PROPS */
+      , ["modelValue"]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_jet_input_error, {
+        message: $data.form.errors.amount,
+        "class": "mt-2"
+      }, null, 8
+      /* PROPS */
+      , ["message"])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_5, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_jet_label, {
+        "for": "type",
+        value: "Einzahlungsart"
+      }), (0,vue__WEBPACK_IMPORTED_MODULE_0__.withDirectives)((0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("select", {
+        "onUpdate:modelValue": _cache[3] || (_cache[3] = function ($event) {
+          return $data.form.type = $event;
+        }),
+        "class": "mt-1 block w-full border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm"
+      }, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("option", {
+        value: "0",
+        selected: $data.form.type == '0'
+      }, "Banküberweisung", 8
+      /* PROPS */
+      , ["selected"]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("option", {
+        value: "1",
+        selected: $data.form.type == '1'
+      }, "Barzahlung", 8
+      /* PROPS */
+      , ["selected"])], 512
+      /* NEED_PATCH */
+      ), [[vue__WEBPACK_IMPORTED_MODULE_0__.vModelSelect, $data.form.type]]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_jet_input_error, {
+        message: $data.form.errors.type,
+        "class": "mt-2"
+      }, null, 8
+      /* PROPS */
+      , ["message"])])])], 32
+      /* HYDRATE_EVENTS */
+      )];
+    }),
+    footer: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
+      return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_jet_button, {
+        onClick: $options.submitForm,
+        "class": {
+          'opacity-25': $data.form.processing
+        },
+        disabled: $data.form.processing
+      }, {
+        "default": (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
+          return [_hoisted_6];
+        }),
+        _: 1
+        /* STABLE */
+
+      }, 8
+      /* PROPS */
+      , ["onClick", "class", "disabled"])];
+    }),
+    _: 1
+    /* STABLE */
+
+  }, 8
+  /* PROPS */
+  , ["show"]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)(" <multiselect class=\"mt-1 block w-full\" @select=\"updateTypeSelection\" v-model=\"typeSelection\" deselect-label=\"Kann nicht entfernt werden\" track-by=\"key\" label=\"label\" placeholder=\"Versicherung auswählen\" :options=\"types\" :searchable=\"false\" :allow-empty=\"false\" /> ")], 2112
+  /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
+  );
+}
+
+/***/ }),
+
+/***/ "./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/Payments/View.vue?vue&type=template&id=5d9b08ac":
+/*!***********************************************************************************************************************************************************************************************************************************************************************************!*\
+  !*** ./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/Payments/View.vue?vue&type=template&id=5d9b08ac ***!
+  \***********************************************************************************************************************************************************************************************************************************************************************************/
+/***/ ((__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": "w-full inline-flex items-end justify-between mb-3"
+};
+
+var _hoisted_2 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("h3", null, "Einzahlungen", -1
+/* HOISTED */
+);
+
+var _hoisted_3 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)(" Neue Einzahlung ");
+
+var _hoisted_4 = {
+  "class": "w-full mx-auto"
+};
+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");
+
+  var _component_simple_table = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("simple-table");
+
+  var _component_payment_create_modal = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("payment-create-modal");
+
+  return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)(vue__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("span", _hoisted_1, [_hoisted_2, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_standard_button, {
+    "class": "",
+    colour: "green",
+    onClick: $options.openModal,
+    href: _ctx.route('payments.create', $props.id)
+  }, {
+    "default": (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
+      return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_unicon, {
+        fill: "white",
+        "class": "mr-1",
+        height: "22",
+        width: "22",
+        name: "plus-circle"
+      }), _hoisted_3];
+    }),
+    _: 1
+    /* STABLE */
+
+  }, 8
+  /* PROPS */
+  , ["onClick", "href"])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_4, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_simple_table, {
+    data: $props.payments,
+    columns: $data.columns,
+    onDelete: $options.deletePayment
+  }, null, 8
+  /* PROPS */
+  , ["data", "columns", "onDelete"])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_payment_create_modal, {
+    id: $props.id,
+    show: $data.showModal,
+    onClose: _cache[1] || (_cache[1] = function ($event) {
+      return $data.showModal = false;
+    })
+  }, null, 8
+  /* PROPS */
+  , ["id", "show"])], 64
+  /* STABLE_FRAGMENT */
+  );
+}
+
+/***/ }),
+
 /***/ "./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/SellContractCard.vue?vue&type=template&id=6da16fff":
 /*!**************************************************************************************************************************************************************************************************************************************************************************************!*\
   !*** ./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/SellContractCard.vue?vue&type=template&id=6da16fff ***!
@@ -23434,7 +23911,7 @@ var _hoisted_10 = {
   "class": "flex items-center"
 };
 var _hoisted_11 = {
-  key: 1,
+  key: 2,
   "class": "px-6 py-4 flex items-center"
 };
 var _hoisted_12 = {
@@ -23454,6 +23931,8 @@ var _hoisted_15 = {
 var _hoisted_16 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)(" Keine Einträge gefunden ");
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _this = this;
+
   var _component_unicon = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("unicon");
 
   var _component_inertia_link = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("inertia-link");
@@ -23539,7 +24018,20 @@ 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_11, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($options.resolve(col.key, row)), 1
+      , ["href"])) : col.key == 'delete' ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("span", {
+        key: 1,
+        "class": "p-3 cursor-pointer",
+        onClick: function onClick($event) {
+          return _this.$emit('delete', row.id);
+        }
+      }, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_unicon, {
+        fill: "red",
+        height: "24",
+        width: "24",
+        name: "trash-alt"
+      })], 8
+      /* PROPS */
+      , ["onClick"])) : ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("span", _hoisted_11, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($options.resolve(col.key, row)), 1
       /* TEXT */
       ))]);
     }), 128
@@ -29325,34 +29817,27 @@ var _hoisted_10 = {
   key: 3
 };
 var _hoisted_11 = {
-  "class": "col-span-12"
-};
-
-var _hoisted_12 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("h3", {
-  "class": "mb-3"
-}, "Dokumente", -1
-/* HOISTED */
-);
-
-var _hoisted_13 = {
-  "class": "w-full grid grid-cols-12 xs:grid-cols-4 gap-3"
-};
-var _hoisted_14 = {
   "class": "col-span-6 xs:col-span-12"
 };
 
-var _hoisted_15 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("h3", {
+var _hoisted_12 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("h3", {
   "class": "mb-3"
 }, "Auto", -1
 /* HOISTED */
 );
 
-var _hoisted_16 = {
+var _hoisted_13 = {
   "class": "col-span-5 xs:col-span-12"
 };
-var _hoisted_17 = {
+var _hoisted_14 = {
   "class": "mb-3"
 };
+var _hoisted_15 = {
+  "class": "col-span-6 xs:col-span-12 mt-4"
+};
+var _hoisted_16 = {
+  "class": "col-span-5 xs:col-span-12"
+};
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_bread_crumb = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("bread-crumb");
 
@@ -29364,14 +29849,14 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 
   var _component_restore_button = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("restore-button");
 
-  var _component_document_item = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("document-item");
-
-  var _component_document_upload = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("document-upload");
-
   var _component_car_card = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("car-card");
 
   var _component_contact_card = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("contact-card");
 
+  var _component_documents_view = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("documents-view");
+
+  var _component_payments_view = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("payments-view");
+
   var _component_show_page = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("show-page");
 
   return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)(_component_show_page, null, {
@@ -29427,32 +29912,28 @@ 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_11, [_hoisted_12, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_13, [((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)($data.documents, function (document) {
+      return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_11, [_hoisted_12, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_car_card, {
-        return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)(_component_document_item, {
-          key: document.id,
-          document: document
-        }, null, 8
-        /* PROPS */
-        , ["document"]);
-      }), 128
-      /* KEYED_FRAGMENT */
-      )), !$props.contract.deleted_at ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)(_component_document_upload, {
-        key: 0,
-        contract: $props.contract,
-        documents: $data.documents
-      }, null, 8
-      /* PROPS */
-      , ["contract", "documents"])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_14, [_hoisted_15, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_car_card, {
         car: $props.contract.car
       }, null, 8
       /* PROPS */
-      , ["car"])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_16, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("h3", _hoisted_17, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($options.contactTitle), 1
+      , ["car"])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_13, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("h3", _hoisted_14, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($options.contactTitle), 1
       /* TEXT */
       ), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_contact_card, {
         contact: $props.contract.contact
       }, null, 8
       /* PROPS */
-      , ["contact"])])];
+      , ["contact"])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_15, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_documents_view, {
+        initial_documents: $props.contract.documents,
+        id: $props.contract.id,
+        show_upload: !$props.contract.deleted_at
+      }, null, 8
+      /* PROPS */
+      , ["initial_documents", "id", "show_upload"])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_16, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_payments_view, {
+        payments: $props.contract.payments,
+        id: $props.contract.id
+      }, null, 8
+      /* PROPS */
+      , ["payments", "id"])])];
     }),
     _: 1
     /* STABLE */
@@ -60996,6 +61477,32 @@ _Upload_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__.default.__file
 
 /***/ }),
 
+/***/ "./resources/js/Components/Documents/View.vue":
+/*!****************************************************!*\
+  !*** ./resources/js/Components/Documents/View.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 _View_vue_vue_type_template_id_57be3cc7__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./View.vue?vue&type=template&id=57be3cc7 */ "./resources/js/Components/Documents/View.vue?vue&type=template&id=57be3cc7");
+/* harmony import */ var _View_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./View.vue?vue&type=script&lang=js */ "./resources/js/Components/Documents/View.vue?vue&type=script&lang=js");
+
+
+
+_View_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__.default.render = _View_vue_vue_type_template_id_57be3cc7__WEBPACK_IMPORTED_MODULE_0__.render
+/* hot reload */
+if (false) {}
+
+_View_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__.default.__file = "resources/js/Components/Documents/View.vue"
+
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_View_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__.default);
+
+/***/ }),
+
 /***/ "./resources/js/Components/Navbar.vue":
 /*!********************************************!*\
   !*** ./resources/js/Components/Navbar.vue ***!
@@ -61048,6 +61555,58 @@ _Paginator_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__.default.__fi
 
 /***/ }),
 
+/***/ "./resources/js/Components/Payments/CreateModal.vue":
+/*!**********************************************************!*\
+  !*** ./resources/js/Components/Payments/CreateModal.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 _CreateModal_vue_vue_type_template_id_5635b85a__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./CreateModal.vue?vue&type=template&id=5635b85a */ "./resources/js/Components/Payments/CreateModal.vue?vue&type=template&id=5635b85a");
+/* harmony import */ var _CreateModal_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./CreateModal.vue?vue&type=script&lang=js */ "./resources/js/Components/Payments/CreateModal.vue?vue&type=script&lang=js");
+
+
+
+_CreateModal_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__.default.render = _CreateModal_vue_vue_type_template_id_5635b85a__WEBPACK_IMPORTED_MODULE_0__.render
+/* hot reload */
+if (false) {}
+
+_CreateModal_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__.default.__file = "resources/js/Components/Payments/CreateModal.vue"
+
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_CreateModal_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__.default);
+
+/***/ }),
+
+/***/ "./resources/js/Components/Payments/View.vue":
+/*!***************************************************!*\
+  !*** ./resources/js/Components/Payments/View.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 _View_vue_vue_type_template_id_5d9b08ac__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./View.vue?vue&type=template&id=5d9b08ac */ "./resources/js/Components/Payments/View.vue?vue&type=template&id=5d9b08ac");
+/* harmony import */ var _View_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./View.vue?vue&type=script&lang=js */ "./resources/js/Components/Payments/View.vue?vue&type=script&lang=js");
+
+
+
+_View_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__.default.render = _View_vue_vue_type_template_id_5d9b08ac__WEBPACK_IMPORTED_MODULE_0__.render
+/* hot reload */
+if (false) {}
+
+_View_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__.default.__file = "resources/js/Components/Payments/View.vue"
+
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_View_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__.default);
+
+/***/ }),
+
 /***/ "./resources/js/Components/SellContractCard.vue":
 /*!******************************************************!*\
   !*** ./resources/js/Components/SellContractCard.vue ***!
@@ -63190,6 +63749,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_Upload_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]!./Upload.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/Documents/Upload.vue?vue&type=script&lang=js");
  
 
+/***/ }),
+
+/***/ "./resources/js/Components/Documents/View.vue?vue&type=script&lang=js":
+/*!****************************************************************************!*\
+  !*** ./resources/js/Components/Documents/View.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_View_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_View_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]!./View.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/Documents/View.vue?vue&type=script&lang=js");
+ 
+
 /***/ }),
 
 /***/ "./resources/js/Components/Navbar.vue?vue&type=script&lang=js":
@@ -63222,6 +63797,38 @@ __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_Paginator_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]!./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");
  
 
+/***/ }),
+
+/***/ "./resources/js/Components/Payments/CreateModal.vue?vue&type=script&lang=js":
+/*!**********************************************************************************!*\
+  !*** ./resources/js/Components/Payments/CreateModal.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_CreateModal_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_CreateModal_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]!./CreateModal.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/Payments/CreateModal.vue?vue&type=script&lang=js");
+ 
+
+/***/ }),
+
+/***/ "./resources/js/Components/Payments/View.vue?vue&type=script&lang=js":
+/*!***************************************************************************!*\
+  !*** ./resources/js/Components/Payments/View.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_View_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_View_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]!./View.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/Payments/View.vue?vue&type=script&lang=js");
+ 
+
 /***/ }),
 
 /***/ "./resources/js/Components/SellContractCard.vue?vue&type=script&lang=js":
@@ -64534,6 +65141,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_Upload_vue_vue_type_template_id_0097a7a3__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]!./Upload.vue?vue&type=template&id=0097a7a3 */ "./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/Documents/Upload.vue?vue&type=template&id=0097a7a3");
 
 
+/***/ }),
+
+/***/ "./resources/js/Components/Documents/View.vue?vue&type=template&id=57be3cc7":
+/*!**********************************************************************************!*\
+  !*** ./resources/js/Components/Documents/View.vue?vue&type=template&id=57be3cc7 ***!
+  \**********************************************************************************/
+/***/ ((__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_View_vue_vue_type_template_id_57be3cc7__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_View_vue_vue_type_template_id_57be3cc7__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]!./View.vue?vue&type=template&id=57be3cc7 */ "./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/Documents/View.vue?vue&type=template&id=57be3cc7");
+
+
 /***/ }),
 
 /***/ "./resources/js/Components/Navbar.vue?vue&type=template&id=4a80dbca":
@@ -64566,6 +65189,38 @@ __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_Paginator_vue_vue_type_template_id_4d98dc54__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]!./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");
 
 
+/***/ }),
+
+/***/ "./resources/js/Components/Payments/CreateModal.vue?vue&type=template&id=5635b85a":
+/*!****************************************************************************************!*\
+  !*** ./resources/js/Components/Payments/CreateModal.vue?vue&type=template&id=5635b85a ***!
+  \****************************************************************************************/
+/***/ ((__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_CreateModal_vue_vue_type_template_id_5635b85a__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_CreateModal_vue_vue_type_template_id_5635b85a__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]!./CreateModal.vue?vue&type=template&id=5635b85a */ "./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/Payments/CreateModal.vue?vue&type=template&id=5635b85a");
+
+
+/***/ }),
+
+/***/ "./resources/js/Components/Payments/View.vue?vue&type=template&id=5d9b08ac":
+/*!*********************************************************************************!*\
+  !*** ./resources/js/Components/Payments/View.vue?vue&type=template&id=5d9b08ac ***!
+  \*********************************************************************************/
+/***/ ((__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_View_vue_vue_type_template_id_5d9b08ac__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_View_vue_vue_type_template_id_5d9b08ac__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]!./View.vue?vue&type=template&id=5d9b08ac */ "./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/Payments/View.vue?vue&type=template&id=5d9b08ac");
+
+
 /***/ }),
 
 /***/ "./resources/js/Components/SellContractCard.vue?vue&type=template&id=6da16fff":

resources/js/Components/Buttons/PrintButton.vue

@@ -13,7 +13,7 @@ export default {
     },
     data() {
         return {
-            colour: 'indigo',
+            colour: 'gray',
         }
     },
     computed: {

resources/js/Components/Documents/Item.vue

@@ -1,8 +1,8 @@
 <template>
     <a target="_blank" :href="document.link" class="p-3 col-span-2 grid relative grid-flow-rows cursor-pointer group auto-rows-max hover:bg-white bg-gray-50 transition shadow rounded-md font-medium">
-        <inertia-link :href="route('documents.destroy', document.id)" class="absolute right-0 opacity-0 group-hover:opacity-80 transition">
+        <a @click="deleteDocument" href="#" class="absolute right-0 opacity-0 group-hover:opacity-80 transition">
             <unicon fill="red" class="p-2" height="40" width="40" name="trash-alt"></unicon>
-        </inertia-link>
+        </a>
         <span class="justify-center inline-flex items-center mx-auto">
             <unicon fill="royalblue" class="p-2" height="70" width="70" name="file-alt"></unicon>
             <span class="text-blue-800 text-xl font-bold">{{ document.extension }}</span>
@@ -15,15 +15,14 @@
 <script>
 
 export default {
-    components: {
-    },
     props: {
         document: Object,
     },
-    data() {
+    methods: {
-        return {
+        deleteDocument(e) {
-            
+            e.preventDefault();
-        }
+            this.$emit('delete', this.document.id);
+        },
     },
 }
 </script>

resources/js/Components/Documents/Upload.vue

@@ -22,7 +22,7 @@ const STATUS_INITIAL = 0, STATUS_SAVING = 1, STATUS_FAILED = 2;
 
 export default {
     props: {
-        contract: Object,
+        id: Number,
         documents: Object,
     },
     data() {
@@ -52,7 +52,7 @@ export default {
         save(formData) {
             // upload data to the server
             this.currentStatus = STATUS_SAVING;
-            axios.post(this.route('documents.store', this.contract.id), formData)
+            axios.post(this.route('documents.store', this.id), formData)
                 .then(response => {
                     this.documents.push(response.data);
                     this.reset();

resources/js/Components/Documents/View.vue

@@ -0,0 +1,44 @@
+<template>
+    <h3 class="mb-3">Dokumente</h3>
+    <div class="grid grid-cols-8 xs:grid-cols-6 gap-3">
+        <template v-for="document in documents" :key="document.id">
+            <document-item @delete="deleteDocument" :document="document" />
+        </template>
+        <document-upload v-if="show_upload" :id="id" :documents="documents" />
+    </div>
+</template>
+
+<script>
+import { useForm } from '@inertiajs/inertia-vue3'
+import DocumentItem from '@/Components/Documents/Item.vue'
+import DocumentUpload from '@/Components/Documents/Upload.vue'
+
+export default {
+    components: {
+        DocumentItem,
+        DocumentUpload,
+    },
+    props: {
+        initial_documents: Object,
+        id: Number,
+        show_upload: Boolean,
+    },
+    data() {
+        return {
+            documents: this.initial_documents,
+        }
+    },
+    methods: {
+        deleteDocument(documentId) {
+            let form = useForm(`deleteDocument${documentId}`, {id: documentId});
+            form.delete(route('documents.destroy', this.id), {
+                preserveScroll: true,
+                onSuccess: () => {
+                    form.reset();
+                    this.documents = this.initial_documents;
+                }
+            });
+        },
+    }
+}
+</script>

resources/js/Components/Payments/CreateModal.vue

@@ -0,0 +1,93 @@
+<template>
+    <dialog-modal :show="showModal" @close="$emit('close')">
+        <template #title>
+            Neue Einzahlung
+        </template>
+        <template #content>
+            <form @submitted="submitForm">
+                <div class="grid grid-cols-6 gap-6">
+                    <div class="col-span-6 sm:col-span-4">
+                        <jet-label for="date" value="Datum" />
+                        <datepicker id="date" ref="date" v-model="form.date" inputFormat="dd.MM.yyyy" class="border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm mt-1 block w-full" />
+                        <jet-input-error :message="form.errors.date" class="mt-2" />
+                    </div>
+
+                    <div class="col-span-6 sm:col-span-4">
+                        <jet-label for="amount" value="Betrag" />
+                        <jet-input id="amount" type="text" class="mt-1 block w-full" v-model="form.amount" ref="amount" autocomplete="amount" />
+                        <jet-input-error :message="form.errors.amount" class="mt-2" />
+                    </div>
+
+                    <div class="col-span-6 sm:col-span-4">
+                        <jet-label for="type" value="Einzahlungsart" />
+                        <select v-model="form.type" class="mt-1 block w-full border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm">
+                            <option value="0" :selected="form.type == '0'">Banküberweisung</option>
+                            <option value="1" :selected="form.type == '1'">Barzahlung</option>
+                        </select>
+                        <jet-input-error :message="form.errors.type" class="mt-2" />
+                    </div>
+                </div>
+            </form>
+        </template>
+        <template #footer>
+            <jet-button @click="submitForm" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
+                    Einzahlung speichern
+            </jet-button>
+        </template>
+    </dialog-modal>
+    <!-- <multiselect class="mt-1 block w-full" @select="updateTypeSelection" v-model="typeSelection" deselect-label="Kann nicht entfernt werden" track-by="key" label="label" placeholder="Versicherung auswählen" :options="types" :searchable="false" :allow-empty="false" /> -->
+</template>
+
+<script>
+import JetButton from '@/Jetstream/Button'
+import JetLabel from '@/Jetstream/Label.vue'
+import JetInput from '@/Jetstream/Input.vue'
+import JetInputError from '@/Jetstream/InputError'
+import Multiselect from 'vue-multiselect'
+import Datepicker from 'vue3-datepicker'
+import { useForm } from '@inertiajs/inertia-vue3'
+import { ref } from 'vue'
+import DialogModal from '@/Jetstream/DialogModal.vue'
+
+export default {
+    components: {
+        JetButton,
+        JetLabel,
+        JetInput,
+        JetInputError,
+        Multiselect,
+        DialogModal,
+        Datepicker,
+    },
+    props: {
+        id: Number,
+        showModal: Boolean,
+    },
+    data() {
+        return {
+            form: useForm('CreatePayment', {
+                id: null,
+                date: ref(new Date()),
+                amount: null,
+                type: '1',
+                contract_id: this.id,
+            }),
+            // typeSelection: {key: this.data.type, label: 'asd'},
+        }
+    },
+    methods: {
+        submitForm() {
+            this.form.post(this.route('payments.store', this.id), {
+                preserveScroll: true,
+                onSuccess: () => {
+                    this.$emit('close');
+                    form.reset();
+                },
+            });
+        },
+        // updateTypeSelection(selection) {
+        //     this.form.type = (selection.key).toString();
+        // },
+    },
+}
+</script>

resources/js/Components/Payments/View.vue

@@ -0,0 +1,57 @@
+<template>
+    <span class="w-full inline-flex items-end justify-between mb-3">
+        <h3>Einzahlungen</h3>
+        <standard-button class="" colour="green" @click="openModal" :href="route('payments.create', id)">
+            <unicon fill="white" class="mr-1" height="22" width="22" name="plus-circle"></unicon>
+            Neue Einzahlung
+        </standard-button>
+    </span>
+    <div class="w-full mx-auto">
+        <simple-table :data="payments" :columns="columns" @delete="deletePayment" />
+    </div>
+    <payment-create-modal :id="id" :show="showModal" @close="showModal = false" />
+</template>
+
+<script>
+import SimpleTable from '@/Components/SimpleTable.vue'
+import PaymentCreateModal from '@/Components/Payments/CreateModal.vue'
+import StandardButton from '@/Components/Buttons/StandardButton.vue'
+import { useForm } from '@inertiajs/inertia-vue3'
+
+export default {
+    components: {
+        SimpleTable,
+        PaymentCreateModal,
+        StandardButton,
+    },
+    props: {
+        payments: Object,
+        id: Number,
+        show_upload: Boolean,
+    },
+    data() {
+        return {
+            showModal: false,
+            columns: [
+                {key: 'date', value: 'Datum', sortable: false},
+                {key: 'amount', value: 'Betrag', sortable: false},
+                {key: 'type', value: 'Bezahlart', sortable: false},
+                {key: 'delete', value: '', sortable: false},
+            ],
+        }
+    },
+    methods: {
+        openModal(e) {
+            e.preventDefault();
+            this.showModal = true;
+        },
+        deletePayment(id) {
+            let form = useForm(`deletePayment${id}`, {id: id});
+            form.delete(route('payments.destroy', this.id), {
+                preserveScroll: true,
+                onSuccess: () => form.reset(), 
+            });
+        },
+    },
+}
+</script>

resources/js/Components/SimpleTable.vue

@@ -31,6 +31,9 @@
                             <inertia-link v-if="row.link" class="px-6 py-4 flex items-center" :href="row.link">
                                 {{ resolve(col.key, row) }}
                             </inertia-link>
+                            <span v-else-if="col.key == 'delete'" class="p-3 cursor-pointer" @click="this.$emit('delete', row.id)">
+                                <unicon fill="red" height="24" width="24" name="trash-alt"></unicon>
+                            </span>
                             <span v-else class="px-6 py-4 flex items-center">
                                 {{ resolve(col.key, row) }}
                             </span>
@@ -114,7 +117,7 @@ export default {
         },
         isActiveSort(col, dir) {
             return col == this.sort.by && dir == this.sort.direction;
-        }
+        },
     },
 }
 </script>

resources/js/Pages/Contracts/Show.vue

@@ -42,15 +42,6 @@
             </div>
         </template>
         <template #more>
-            <div class="col-span-12">
-                <h3 class="mb-3">Dokumente</h3>
-                <div class="w-full grid grid-cols-12 xs:grid-cols-4 gap-3">
-                    <template v-for="document in documents" :key="document.id">
-                        <document-item :document="document" />
-                    </template>
-                    <document-upload v-if="!contract.deleted_at" :contract="contract" :documents="documents" />
-                </div>
-            </div>
             <div class="col-span-6 xs:col-span-12">
                 <h3 class="mb-3">Auto</h3>
                 <car-card :car="contract.car" />
@@ -59,6 +50,12 @@
                 <h3 class="mb-3">{{ contactTitle }}</h3>
                 <contact-card :contact="contract.contact" />
             </div>
+            <div class="col-span-6 xs:col-span-12 mt-4">
+                <documents-view :initial_documents="contract.documents" :id="contract.id" :show_upload="!contract.deleted_at" />
+            </div>
+            <div class="col-span-5 xs:col-span-12">
+                <payments-view :payments="contract.payments" :id="contract.id" />
+            </div>
         </template>
     </show-page>
 </template>
@@ -73,8 +70,9 @@ import CarCard from '@/Components/CarCard.vue'
 import PrintButton from '@/Components/Buttons/PrintButton.vue'
 import ContactCard from '@/Components/ContactCard.vue'
 import EditButton from '@/Components/Buttons/EditButton.vue'
-import DocumentItem from '@/Components/Documents/Item.vue'
+import DocumentsView from '@/Components/Documents/View.vue'
-import DocumentUpload from '@/Components/Documents/Upload.vue'
+import PaymentsView from '@/Components/Payments/View.vue'
+
 
 export default {
     components: {
@@ -88,8 +86,8 @@ export default {
         ContactCard,
         EditButton,
         CarCard,
-        DocumentItem,
+        DocumentsView,
-        DocumentUpload,
+        PaymentsView,
     },
     props: {
         contract: Object,
@@ -105,7 +103,6 @@ export default {
     data() {
         return {
             currentRoute: 'contracts.show', 
-            documents: this.contract.documents,
             buyContractsColumns: [
                 {key: 'contact', value: 'Verkäufer'},
                 {key: 'date', value: 'Kaufdatum'},

routes/web.php

@@ -1,37 +1,17 @@
 <?php
 
-use Illuminate\Foundation\Application;
 use App\Http\Controllers\ContactController;
 use App\Http\Controllers\CarController;
 use App\Http\Controllers\BrandController;
 use App\Http\Controllers\CarModelController;
+use App\Http\Controllers\PaymentController;
 use App\Http\Controllers\ContractController;
 use App\Http\Controllers\DocumentController;
 use Illuminate\Support\Facades\Route;
 use Inertia\Inertia;
 
-/*
-|--------------------------------------------------------------------------
-| Web Routes
-|--------------------------------------------------------------------------
-|
-| Here is where you can register web routes for your application. These
-| routes are loaded by the RouteServiceProvider within a group which
-| contains the "web" middleware group. Now create something great!
-|
-*/
-
-Route::get('/', function () {
-    return Inertia::render('Dashboard', [
-        'canLogin' => Route::has('login'),
-        'canRegister' => Route::has('register'),
-        'laravelVersion' => Application::VERSION,
-        'phpVersion' => PHP_VERSION,
-    ]);
-});
-
 Route::middleware(['auth:sanctum', 'verified'])->group(function () {
-    Route::get('/dashboard', function () {
+    Route::get('/', function () {
         return Inertia::render('Dashboard');
     })->name('dashboard');
 
@@ -57,8 +37,8 @@ Route::middleware(['auth:sanctum', 'verified'])->group(function () {
         Route::get('unsold', [CarController::class, 'unsold'])->name('cars.unsold');
         Route::get('sold', [CarController::class, 'sold'])->name('cars.sold');
         Route::get('create', [CarController::class, 'create'])->name('cars.create');
-        Route::post('cars', [CarController::class, 'store'])->name('cars.store');
+        Route::post('/', [CarController::class, 'store'])->name('cars.store');
-        Route::post('cars/store_for_contract', [CarController::class, 'storeForContract'])->name('cars.store_for_contract');
+        Route::post('/store_for_contract', [CarController::class, 'storeForContract'])->name('cars.store_for_contract');
 
         Route::prefix('{car}')->group(function () {
             Route::get('/', [CarController::class, 'show'])->name('cars.show');
@@ -72,7 +52,7 @@ Route::middleware(['auth:sanctum', 'verified'])->group(function () {
     Route::prefix('contracts')->group(function () {
         Route::post('/', [ContractController::class, 'store'])->name('contracts.store');
 
-        Route::prefix('create/{0|1}')->group(function () {
+        Route::prefix('create/{0|1}/')->group(function () {
             Route::get('car/{car}/contact/{contact}', [ContractController::class, 'create'])->name('contracts.create');
             Route::get('car/{car}', [ContractController::class, 'createFromCar'])->name('contracts.create_from_car');
             Route::get('contact/{contact}', [ContractController::class, 'createFromContact'])->name('contracts.create_from_contact');
@@ -85,13 +65,20 @@ Route::middleware(['auth:sanctum', 'verified'])->group(function () {
             Route::get('delete', [ContractController::class, 'destroy'])->name('contracts.destroy');
             Route::get('restore', [ContractController::class, 'restore'])->name('contracts.restore');
             Route::get('print', [ContractController::class, 'print'])->name('contracts.print');
-        });
-    });
 
-    Route::prefix('documents')->group(function () { 
+            Route::prefix('payments')->group(function () { 
-        Route::get('{document}', [DocumentController::class, 'show'])->name('documents.show');
+                Route::get('create', [PaymentController::class, 'create'])->name('payments.create');
-        Route::get('{document}/delete', [DocumentController::class, 'destroy'])->name('documents.destroy');
+                Route::delete('delete', [PaymentController::class, 'destroy'])->name('payments.destroy');
-        Route::post('{contract}', [DocumentController::class, 'store'])->name('documents.store');
+                Route::post('/', [PaymentController::class, 'store'])->name('payments.store');
+            });
+
+            Route::prefix('documents')->group(function () { 
+                Route::get('{document}', [DocumentController::class, 'show'])->name('documents.show');
+                Route::delete('delete', [DocumentController::class, 'destroy'])->name('documents.destroy');
+                Route::post('/', [DocumentController::class, 'store'])->name('documents.store');
+            });
+        });
+        
     });
 
     Route::post('brands', [BrandController::class, 'store'])->name('brands.store');