add dashboard

app/Exports/BuyContractsSheet.php

@@ -11,7 +11,7 @@ class BuyContractsSheet extends ContractsSheet
 
     public function query()
     {
-        return Contract::where('type', ContractType::BuyContract)->whereYear('date', '=', $this->year)->orderBy('date', 'asc');
+        return Contract::buyContracts()->whereYear('date', '=', $this->year)->orderBy('date', 'asc');
     }
 
     public function headings(): array

app/Exports/SellContractsSheet.php

@@ -12,7 +12,7 @@ class SellContractsSheet extends ContractsSheet
 
     public function query()
     {
-        return Contract::where('type', ContractType::SellContract)->whereYear('date', '=', $this->year)->orderBy('date', 'asc');
+        return Contract::sellContracts()->whereYear('date', '=', $this->year)->orderBy('date', 'asc');
     }
 
     public function headings(): array

app/Http/Controllers/ContractController.php

@@ -17,6 +17,42 @@ use Illuminate\Support\Facades\Redirect;
 
 class ContractController extends Controller
 {
+
+    public function dashboard()
+    {
+        return Inertia::render('Dashboard', [
+            'bought_this_year' => Contract::boughtThisYear()->count(),
+            'sold_this_year' => Contract::soldThisYear()->count(),
+            'my_cars' => Car::unsoldOnly()->count(),
+            'buy_contracts' => Contract::buyContracts()
+                                ->orderBy('date', 'desc')
+                                ->limit(10)
+                                ->get()
+                                ->map(function ($contract) {
+                                    return [
+                                        'date' => $contract->date_formatted,
+                                        'price' => $contract->price->format(),
+                                        'car' => $contract->car->name,
+                                        'contact' => $contract->contact->title,
+                                        'link' => route('contracts.show', $contract),
+                                    ];
+                                }),
+            'sell_contracts' => Contract::sellContracts()
+                                ->orderBy('date', 'desc')
+                                ->limit(10)
+                                ->get()
+                                ->map(function ($contract) {
+                                    return [
+                                        'date' => $contract->date_formatted,
+                                        'price' => $contract->price->format(),
+                                        'car' => $contract->car->name,
+                                        'contact' => $contract->contact->title,
+                                        'link' => route('contracts.show', $contract),
+                                    ];
+                                }),
+        ]);
+    }
+
     public function create(Request $request, string $type, Car $car, Contact $contact)
     {
         return Inertia::render('Contracts/Create', [

app/Models/Car.php

@@ -95,11 +95,6 @@ class Car extends Model
         return $this->hasMany(Contract::class);
     }
 
-    // public function scopeSoldThisYear($query)
-    // {
-    //     return $query->whereDate('sold_at', '>=', Carbon::today()->format('Y'));
-    // }
-
     public function buyContracts()
     {
         return $this->hasMany(Contract::class)->buyContracts();

app/Models/Contract.php

@@ -109,17 +109,17 @@ class Contract extends Model
 
     public function scopeThisYear($query)
     {
-        $query->where('date', '>', date('Y'));
+        $query->whereYear('date', date('Y'));
     }
 
     public function scopeSoldThisYear($query)
     {
-        $query->buyContracts()->thisYear();
+        $query->sellContracts()->thisYear();
     }
 
     public function scopeBoughtThisYear($query)
     {
-        $query->sellContracts()->thisYear();
+        $query->buyContracts()->thisYear();
     }
 
     public function scopeBuyContracts($query)

public/js/app.js

@@ -18134,6 +18134,27 @@ __webpack_require__.r(__webpack_exports__);
 
 /***/ }),
 
+/***/ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/Components/Dashboard/DashItem.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/Dashboard/DashItem.vue?vue&type=script&lang=js ***!
+  \************************************************************************************************************************************************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({
+  props: {
+    title: String,
+    number: Number,
+    link: String
+  }
+});
+
+/***/ }),
+
 /***/ "./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/Item.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/Item.vue?vue&type=script&lang=js ***!
@@ -18615,7 +18636,8 @@ __webpack_require__.r(__webpack_exports__);
     currentRoute: String,
     defaultSort: Object,
     filters: Object,
-    print: Boolean
+    print: Boolean,
+    hideArrow: Boolean
   },
   data: function data() {
     return {
@@ -21527,10 +21549,56 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
 /* harmony import */ var _Layouts_Layout__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @/Layouts/Layout */ "./resources/js/Layouts/Layout.vue");
+/* harmony import */ var _Components_SimpleTable_vue__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @/Components/SimpleTable.vue */ "./resources/js/Components/SimpleTable.vue");
+/* harmony import */ var _Components_Dashboard_DashItem_vue__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @/Components/Dashboard/DashItem.vue */ "./resources/js/Components/Dashboard/DashItem.vue");
+
+
 
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({
   components: {
-    Layout: _Layouts_Layout__WEBPACK_IMPORTED_MODULE_0__.default
+    Layout: _Layouts_Layout__WEBPACK_IMPORTED_MODULE_0__.default,
+    SimpleTable: _Components_SimpleTable_vue__WEBPACK_IMPORTED_MODULE_1__.default,
+    DashItem: _Components_Dashboard_DashItem_vue__WEBPACK_IMPORTED_MODULE_2__.default
+  },
+  props: {
+    buy_contracts: Object,
+    sell_contracts: Object,
+    sold_this_year: Number,
+    bought_this_year: Number,
+    my_cars: Number
+  },
+  data: function data() {
+    return {
+      currentRoute: 'cars',
+      buyContractColumns: [{
+        key: 'date',
+        value: 'Datum',
+        sortable: false
+      }, // {key: 'car', value: 'Auto', sortable: false},
+      {
+        key: 'contact',
+        value: 'Verkäufer',
+        sortable: false
+      }, {
+        key: 'price',
+        value: 'Einkaufspreis',
+        sortable: false
+      }],
+      sellContractColumns: [{
+        key: 'date',
+        value: 'Datum',
+        sortable: false
+      }, // {key: 'car', value: 'Auto', sortable: false},
+      {
+        key: 'contact',
+        value: 'Käufer',
+        sortable: false
+      }, {
+        key: 'price',
+        value: 'Verkaufspreis',
+        sortable: false
+      }]
+    };
   }
 });
 
@@ -23064,6 +23132,66 @@ 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/Dashboard/DashItem.vue?vue&type=template&id=3419308b":
+/*!****************************************************************************************************************************************************************************************************************************************************************************************!*\
+  !*** ./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/Dashboard/DashItem.vue?vue&type=template&id=3419308b ***!
+  \****************************************************************************************************************************************************************************************************************************************************************************************/
+/***/ ((__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": "col-span-4 xs:col-span-6 shadow bg-white rounded-md sm:rounded-lg text-center"
+};
+var _hoisted_2 = {
+  "class": "font-bold text-6xl text-indigo-600 group-hover:text-indigo-700 py-5 transition"
+};
+var _hoisted_3 = {
+  "class": "font-semibold text-2xl bg-indigo-600 group-hover:bg-indigo-700 text-white py-4 rounded-b-lg transition"
+};
+var _hoisted_4 = {
+  key: 1
+};
+var _hoisted_5 = {
+  "class": "font-bold text-6xl text-indigo-600 py-5"
+};
+var _hoisted_6 = {
+  "class": "font-semibold text-2xl bg-indigo-600 text-white py-4 rounded-b-lg"
+};
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _component_inertia_link = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("inertia-link");
+
+  return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("div", _hoisted_1, [$props.link ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)(_component_inertia_link, {
+    key: 0,
+    href: $props.link,
+    "class": "group"
+  }, {
+    "default": (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
+      return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("p", _hoisted_2, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.number), 1
+      /* TEXT */
+      ), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("p", _hoisted_3, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.title), 1
+      /* TEXT */
+      )];
+    }),
+    _: 1
+    /* STABLE */
+
+  }, 8
+  /* PROPS */
+  , ["href"])) : ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("span", _hoisted_4, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("p", _hoisted_5, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.number), 1
+  /* TEXT */
+  ), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("p", _hoisted_6, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.title), 1
+  /* TEXT */
+  )]))]);
+}
+
+/***/ }),
+
 /***/ "./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/Item.vue?vue&type=template&id=56a69635":
 /*!************************************************************************************************************************************************************************************************************************************************************************************!*\
   !*** ./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/Item.vue?vue&type=template&id=56a69635 ***!
@@ -24134,7 +24262,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     name: "chart"
   }), _hoisted_7], 8
   /* PROPS */
-  , ["href"])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true), $props.data.total > 0 ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("div", _hoisted_8, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("table", _hoisted_9, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("tr", _hoisted_10, [((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(true), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)(vue__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,vue__WEBPACK_IMPORTED_MODULE_0__.renderList)($props.columns, function (col, index) {
+  , ["href"])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true), $props.data.total === undefined || $props.data.total > 0 ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("div", _hoisted_8, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("table", _hoisted_9, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("tr", _hoisted_10, [((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(true), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)(vue__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,vue__WEBPACK_IMPORTED_MODULE_0__.renderList)($props.columns, function (col, index) {
     return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("th", {
       key: col.key,
       "class": "px-6 pt-4 pb-4",
@@ -24169,7 +24297,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     , ["colspan"]);
   }), 128
   /* KEYED_FRAGMENT */
-  ))]), ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(true), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)(vue__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,vue__WEBPACK_IMPORTED_MODULE_0__.renderList)($props.data.data, function (row) {
+  ))]), ((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)(this.data.data ? this.data.data : this.data, function (row) {
     return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("tr", {
       key: row.link,
       "class": "hover:bg-gray-100 focus-within:bg-gray-100"
@@ -24210,7 +24338,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       ))]);
     }), 128
     /* KEYED_FRAGMENT */
-    )), row.link ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("td", _hoisted_13, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_inertia_link, {
+    )), row.link && !$props.hideArrow ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("td", _hoisted_13, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_inertia_link, {
       "class": "px-4 flex items-center",
       href: row.link,
       tabindex: "-1"
@@ -30164,19 +30292,37 @@ var _hoisted_1 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("
 /* HOISTED */
 );
 
-var _hoisted_2 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", {
+var _hoisted_2 = {
-  "class": "py-12"
+  "class": "grid grid-cols-12 gap-x-8 gap-y-12"
-}, [/*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", {
+};
-  "class": "max-w-7xl mx-auto sm:px-6 lg:px-8"
+var _hoisted_3 = {
-}, [/*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", {
+  "class": "col-span-6 xs:col-span-12"
-  "class": "bg-white overflow-hidden shadow-xl sm:rounded-lg"
+};
-}, [/*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("p", {
+
-  "class": "font-semibold text-xl mt-3 ml-3 mb-3 text-gray-800 leading-tight"
+var _hoisted_4 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("p", {
-}, "hallo")])])], -1
+  "class": "font-semibold p-4 pl-6 shadow bg-white rounded-md sm:rounded-lg text-xl font-medium mb-3 text-gray-800 leading-tight"
+}, "Letzte Einkäufe", -1
+/* HOISTED */
+);
+
+var _hoisted_5 = {
+  "class": "col-span-6 xs:col-span-12"
+};
+var _hoisted_6 = {
+  "class": "pt-5 bg-white shadow rounded-md sm:rounded-lg"
+};
+
+var _hoisted_7 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("p", {
+  "class": "font-semibold text-xl font-medium ml-6 mb-2 text-gray-800 leading-tight"
+}, "Letzte Verkäufe", -1
 /* HOISTED */
 );
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _component_dash_item = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("dash-item");
+
+  var _component_simple_table = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("simple-table");
+
   var _component_layout = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("layout");
 
   return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)(_component_layout, null, {
@@ -30184,7 +30330,38 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       return [_hoisted_1];
     }),
     "default": (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
-      return [_hoisted_2];
+      return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_2, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_dash_item, {
+        title: "Meine Autos",
+        number: $props.my_cars,
+        link: _ctx.route('cars.unsold')
+      }, null, 8
+      /* PROPS */
+      , ["number", "link"]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_dash_item, {
+        title: 'Gekauft im ' + new Date().getFullYear(),
+        number: $props.bought_this_year
+      }, null, 8
+      /* PROPS */
+      , ["title", "number"]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_dash_item, {
+        title: 'Verkauft im ' + new Date().getFullYear(),
+        number: $props.sold_this_year
+      }, null, 8
+      /* PROPS */
+      , ["title", "number"]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_3, [_hoisted_4, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_simple_table, {
+        "class": "shadow rounded-md sm:rounded-lg",
+        data: $props.buy_contracts,
+        columns: $data.buyContractColumns,
+        currentRoute: $data.currentRoute,
+        hideArrow: true
+      }, null, 8
+      /* PROPS */
+      , ["data", "columns", "currentRoute"])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_5, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_6, [_hoisted_7, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_simple_table, {
+        data: $props.sell_contracts,
+        columns: $data.sellContractColumns,
+        currentRoute: $data.currentRoute,
+        hideArrow: true
+      }, null, 8
+      /* PROPS */
+      , ["data", "columns", "currentRoute"])])])])];
     }),
     _: 1
     /* STABLE */
@@ -62433,6 +62610,32 @@ _CurrencyInput_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__.default.
 
 /***/ }),
 
+/***/ "./resources/js/Components/Dashboard/DashItem.vue":
+/*!********************************************************!*\
+  !*** ./resources/js/Components/Dashboard/DashItem.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 _DashItem_vue_vue_type_template_id_3419308b__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./DashItem.vue?vue&type=template&id=3419308b */ "./resources/js/Components/Dashboard/DashItem.vue?vue&type=template&id=3419308b");
+/* harmony import */ var _DashItem_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./DashItem.vue?vue&type=script&lang=js */ "./resources/js/Components/Dashboard/DashItem.vue?vue&type=script&lang=js");
+
+
+
+_DashItem_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__.default.render = _DashItem_vue_vue_type_template_id_3419308b__WEBPACK_IMPORTED_MODULE_0__.render
+/* hot reload */
+if (false) {}
+
+_DashItem_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__.default.__file = "resources/js/Components/Dashboard/DashItem.vue"
+
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_DashItem_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__.default);
+
+/***/ }),
+
 /***/ "./resources/js/Components/Documents/Item.vue":
 /*!****************************************************!*\
   !*** ./resources/js/Components/Documents/Item.vue ***!
@@ -64764,6 +64967,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_CurrencyInput_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]!./CurrencyInput.vue?vue&type=script&lang=js */ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/Components/CurrencyInput.vue?vue&type=script&lang=js");
  
 
+/***/ }),
+
+/***/ "./resources/js/Components/Dashboard/DashItem.vue?vue&type=script&lang=js":
+/*!********************************************************************************!*\
+  !*** ./resources/js/Components/Dashboard/DashItem.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_DashItem_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_DashItem_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]!./DashItem.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/Dashboard/DashItem.vue?vue&type=script&lang=js");
+ 
+
 /***/ }),
 
 /***/ "./resources/js/Components/Documents/Item.vue?vue&type=script&lang=js":
@@ -66188,6 +66407,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_CurrencyInput_vue_vue_type_template_id_08bc457e__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]!./CurrencyInput.vue?vue&type=template&id=08bc457e */ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/Components/CurrencyInput.vue?vue&type=template&id=08bc457e");
 
 
+/***/ }),
+
+/***/ "./resources/js/Components/Dashboard/DashItem.vue?vue&type=template&id=3419308b":
+/*!**************************************************************************************!*\
+  !*** ./resources/js/Components/Dashboard/DashItem.vue?vue&type=template&id=3419308b ***!
+  \**************************************************************************************/
+/***/ ((__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_DashItem_vue_vue_type_template_id_3419308b__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_DashItem_vue_vue_type_template_id_3419308b__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]!./DashItem.vue?vue&type=template&id=3419308b */ "./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/Dashboard/DashItem.vue?vue&type=template&id=3419308b");
+
+
 /***/ }),
 
 /***/ "./resources/js/Components/Documents/Item.vue?vue&type=template&id=56a69635":

resources/js/Components/Dashboard/DashItem.vue

@@ -0,0 +1,22 @@
+<template>
+    <div class="col-span-4 xs:col-span-6 shadow bg-white rounded-md sm:rounded-lg text-center">
+        <inertia-link v-if="link" :href="link" class="group">
+            <p class="font-bold text-6xl text-indigo-600 group-hover:text-indigo-700 py-5 transition">{{ number }}</p>
+            <p class="font-semibold text-2xl bg-indigo-600 group-hover:bg-indigo-700 text-white py-4 rounded-b-lg transition">{{ title }}</p>  
+        </inertia-link>
+        <span v-else>
+            <p class="font-bold text-6xl text-indigo-600 py-5">{{ number }}</p>
+            <p class="font-semibold text-2xl bg-indigo-600 text-white py-4 rounded-b-lg">{{ title }}</p>  
+        </span>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        title: String,
+        number: Number,
+        link: String,
+    },
+}
+</script>

resources/js/Components/SimpleTable.vue

@@ -16,7 +16,7 @@
                     Excel-Export
                 </a>
             </div>
-            <div v-if="data.total > 0" class="bg-white rounded-md shadow overflow-x-auto">
+            <div v-if="data.total === undefined || data.total > 0" class="bg-white rounded-md shadow overflow-x-auto">
                 <table class="w-full whitespace-nowrap">
                    <tr class="text-left font-bold">
                         <th v-for="(col, index) in columns" :key="col.key" class="px-6 pt-4 pb-4" :colspan="[index == (columns.length - 1) ? 2 : 1]">
@@ -30,7 +30,7 @@
                             </span>
                         </th>
                     </tr>
-                    <tr v-for="row in data.data" :key="row.link" class="hover:bg-gray-100 focus-within:bg-gray-100">
+                    <tr v-for="row in (this.data.data ? this.data.data : this.data)" :key="row.link" class="hover:bg-gray-100 focus-within:bg-gray-100">
                         <td v-for="col in columns" :key="col.key" class="border-t">
                             <inertia-link v-if="row.link" class="px-6 py-4 flex items-center" :href="row.link">
                                 {{ resolve(col.key, row) }}
@@ -42,7 +42,7 @@
                                 {{ resolve(col.key, row) }}
                             </span>
                         </td>
-                        <td v-if="row.link" class="border-t w-px">
+                        <td v-if="row.link && !hideArrow" class="border-t w-px">
                             <inertia-link class="px-4 flex items-center" :href="row.link" tabindex="-1">
                                 <unicon class="m-2" height="22" width="22" name="angle-right"></unicon>
                             </inertia-link>
@@ -83,6 +83,7 @@ export default {
         defaultSort: Object,
         filters: Object,
         print: Boolean,
+        hideArrow: Boolean,
     },
     data() {
         return {

resources/js/Pages/Dashboard.vue

@@ -5,11 +5,18 @@
                 Dashboard
             </h2>
         </template>
-
+        <div class="grid grid-cols-12 gap-x-8 gap-y-12">
-        <div class="py-12">
+            <dash-item title="Meine Autos" :number="my_cars" :link="route('cars.unsold')" />
-            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
+            <dash-item :title="'Gekauft im ' + new Date().getFullYear()" :number="bought_this_year" />
-                <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">
+            <dash-item :title="'Verkauft im ' + new Date().getFullYear()" :number="sold_this_year" />
-                    <p class="font-semibold text-xl mt-3 ml-3 mb-3 text-gray-800 leading-tight">hallo</p>
+            <div class="col-span-6 xs:col-span-12">
+                    <p class="font-semibold p-4 pl-6 shadow bg-white rounded-md sm:rounded-lg text-xl font-medium mb-3 text-gray-800 leading-tight">Letzte Einkäufe</p>
+                    <simple-table class="shadow rounded-md sm:rounded-lg" :data="buy_contracts" :columns="buyContractColumns" :currentRoute="currentRoute" :hideArrow="true" />
+            </div>
+            <div class="col-span-6 xs:col-span-12">
+                <div class="pt-5 bg-white shadow rounded-md sm:rounded-lg">
+                    <p class="font-semibold text-xl font-medium ml-6 mb-2 text-gray-800 leading-tight">Letzte Verkäufe</p>
+                    <simple-table :data="sell_contracts" :columns="sellContractColumns" :currentRoute="currentRoute" :hideArrow="true" />
                 </div>
             </div>
         </div>
@@ -18,10 +25,38 @@
 
 <script>
     import Layout from '@/Layouts/Layout'
+    import SimpleTable from '@/Components/SimpleTable.vue'
+    import DashItem from '@/Components/Dashboard/DashItem.vue'
 
     export default {
         components: {
             Layout,
+            SimpleTable,
+            DashItem,
+        },
+        props: {
+            buy_contracts: Object,
+            sell_contracts: Object,
+            sold_this_year: Number,
+            bought_this_year: Number,
+            my_cars: Number,
+        },
+        data() {
+            return {
+                currentRoute: 'cars',
+                buyContractColumns: [
+                    {key: 'date', value: 'Datum', sortable: false},
+                    // {key: 'car', value: 'Auto', sortable: false},
+                    {key: 'contact', value: 'Verkäufer', sortable: false},
+                    {key: 'price', value: 'Einkaufspreis', sortable: false},
+                ],
+                sellContractColumns: [
+                    {key: 'date', value: 'Datum', sortable: false},
+                    // {key: 'car', value: 'Auto', sortable: false},
+                    {key: 'contact', value: 'Käufer', sortable: false},
+                    {key: 'price', value: 'Verkaufspreis', sortable: false},
+                ],
+            }
         },
     }
 </script>

routes/web.php

@@ -12,9 +12,7 @@ use Illuminate\Support\Facades\Route;
 use Inertia\Inertia;
 
 Route::middleware(['auth:sanctum', 'verified'])->group(function () {
-    Route::get('/', function () {
+    Route::get('/', [ContractController::class, 'dashboard'])->name('dashboard');
-        return Inertia::render('Dashboard');
-    })->name('dashboard');
 
     Route::get('reports', [ReportController::class, 'index'])->name('reports');
     Route::get('reports/print', [ReportController::class, 'print'])->name('reports.print');