fix: dashboard

app/Http/Controllers/DashboardController.php

@@ -2,6 +2,14 @@
 
 namespace App\Http\Controllers;
 
+use App\Models\Member;
+use App\Models\Mutation;
+use App\Models\TopUp;
+use App\Models\TypeMember;
+use App\Models\TypeVehicle;
+use App\Services\MutationService;
+use App\Services\TopUpService;
+use Carbon\Carbon;
 use Illuminate\Http\Request;
 
 class DashboardController extends Controller
@@ -14,6 +22,62 @@ class DashboardController extends Controller
      */
     public function __invoke(Request $request)
     {
-        return inertia('home/Index.vue');
+        $member = Member::get();
+
+        $typeMember = TypeMember::get();
+
+        $typeVehicle = TypeVehicle::get();
+
+        $mutation = Mutation::whereYear('created_at', date('Y'))
+            ->get()
+            ->groupBy([
+                fn($mutation) => $mutation->type,
+                fn($mutation) => Carbon::parse($mutation->getRawOriginal('created_at'))->format('M'),
+            ]);
+
+        $topUp = TopUp::get()->groupBy('member_id');
+        return inertia('home/Index.vue', [
+            'cardStatistics' => [
+                //  [
+                //     'title' => ...,
+                //     'icon' => ...',
+                //     'amount' => ...,
+                //     'amountLabel' => ...,
+                //     'value' => ...,
+                // ],
+                [
+                    'title' => __('words.member'),
+                    'icon' => 'pi pi-id-card',
+                    'amount' => $member->count(),
+                    'amountLabel' => __('words.total'),
+                ],
+                [
+                    'title' => __('words.type_member'),
+                    'icon' => 'pi pi-id-card',
+                    'amount' => $typeMember->count(),
+                    'amountLabel' => __('words.total'),
+                ],
+                [
+                    'title' => __('words.type_vehicle'),
+                    'icon' => 'pi pi-car',
+                    'amount' => $typeVehicle->count(),
+                    'amountLabel' => __('words.total'),
+                ],
+            ],
+            'barStatistics' => [
+                [
+                    'title' => __('words.mutation_statistic'),
+                    'description' => __('words.per_year') . ' ' . date('Y'),
+                    'data' => (new MutationService)->statistic($mutation),
+                ],
+            ],
+            'barHorizontalStatistics' => [
+                [
+                    'title' => __('words.top_up_rank'),
+                    'description' => __('words.top_up_number_rank', ['number' => 5]),
+                    'data' => (new TopUpService)->topUpRank($topUp),
+                ],
+            ],
+        ]);
     }
 }

app/Services/MutationService.php

@@ -63,9 +63,9 @@ class MutationService extends CurrencyFormatService
         return $collections->transform(fn($collection) => $collection->sum(fn($collect) => $collect->getRawOriginal('amount')));
     }
 
-    public function statisticData(SupportCollection $collections, int $take = -1)
+    public function statistic(SupportCollection $collections)
     {
-        $collections = $collections->take($take);
+        $collections = $collections;
         $collections->transform(fn($collections) => $this->totalPerMonth($collections));
         return $collections;
     }

app/Services/TopUpService.php

@@ -0,0 +1,21 @@
+<?php
+
+namespace App\Services;
+
+use Illuminate\Database\Eloquent\Collection as EloquentCollection;
+
+class TopUpService extends CurrencyFormatService
+{
+    public function topUpRank(EloquentCollection $collections, int $take = 5)
+    {
+        return $collections
+            ->transform(fn($collects) => [[
+                'name' => $collects->first()->member->name,
+                'phone' => $collects->first()->member->phone,
+                'amount' => $collects->sum(fn($collect) => $collect->getRawOriginal('amount')),
+            ]])
+            ->sortByDesc('amount')
+            ->take($take)
+            ->flatten(1);
+    }
+}

lang/en/words.php

@@ -31,5 +31,10 @@ return [
     'per_year' => 'Per Year',
     'top_customer' => 'Top customer',
     'top_number_customer' => 'Top :number Customer',
+    'member' => 'Member',
+    'type_member' => 'Type Member',
+    'type_vehicle' => 'Type Kendaraan',
+    'top_up_rank' => 'Top Up',
+    'top_up_number_rank' => 'Top Up :number Rank',
 
 ];

lang/id/words.php

@@ -31,5 +31,10 @@ return [
     'per_year' => 'Pertahun',
     'top_customer' => 'Top Pelanggan',
     'top_number_customer' => 'Top :number Pelanggan',
+    'member' => 'Member',
+    'type_member' => 'Jenis Member',
+    'type_vehicle' => 'Jenis Kendaraan',
+    'top_up_rank' => 'Top Up',
+    'top_up_number_rank' => 'Peringkat :number Top Up',
 
 ];

public/js/resources_js_pages_home_TableHeader_js.js

@@ -0,0 +1,29 @@
+"use strict";
+(self["webpackChunk"] = self["webpackChunk"] || []).push([["resources_js_pages_home_TableHeader_js"],{
+
+/***/ "./resources/js/pages/home/TableHeader.js":
+/*!************************************************!*\
+  !*** ./resources/js/pages/home/TableHeader.js ***!
+  \************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "TypeMemberTable": () => (/* binding */ TypeMemberTable),
+/* harmony export */   "TypeVehicleTable": () => (/* binding */ TypeVehicleTable)
+/* harmony export */ });
+var TypeVehicleTable = [{
+  field: 'type',
+  header: 'Jenis Kendaraan'
+}];
+var TypeMemberTable = [{
+  field: 'type',
+  header: 'Jenis Member'
+}, {
+  field: 'price',
+  header: 'Tarif Member'
+}];
+
+/***/ })
+
+}]);

public/js/resources_js_pages_home_TableHeader_vue.js

@@ -0,0 +1,45 @@
+"use strict";
+(self["webpackChunk"] = self["webpackChunk"] || []).push([["resources_js_pages_home_TableHeader_vue"],{
+
+/***/ "./node_modules/vue-loader/dist/exportHelper.js":
+/*!******************************************************!*\
+  !*** ./node_modules/vue-loader/dist/exportHelper.js ***!
+  \******************************************************/
+/***/ ((__unused_webpack_module, exports) => {
+
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+// runtime helper for setting properties on components
+// in a tree-shakable way
+exports["default"] = (sfc, props) => {
+    const target = sfc.__vccOpts || sfc;
+    for (const [key, val] of props) {
+        target[key] = val;
+    }
+    return target;
+};
+
+
+/***/ }),
+
+/***/ "./resources/js/pages/home/TableHeader.vue":
+/*!*************************************************!*\
+  !*** ./resources/js/pages/home/TableHeader.vue ***!
+  \*************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var _home_dijitalcode_Projects_parkirin_node_modules_vue_loader_dist_exportHelper_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./node_modules/vue-loader/dist/exportHelper.js */ "./node_modules/vue-loader/dist/exportHelper.js");
+const script = {}
+
+;
+const __exports__ = /*#__PURE__*/(0,_home_dijitalcode_Projects_parkirin_node_modules_vue_loader_dist_exportHelper_js__WEBPACK_IMPORTED_MODULE_0__["default"])(script, [['__file',"resources/js/pages/home/TableHeader.vue"]])
+
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (__exports__);
+
+/***/ })
+
+}]);

public/js/vue.js

@@ -58388,7 +58388,7 @@ module.exports = JSON.parse('{"name":"axios","version":"0.21.4","description":"P
 /******/ 		// This function allow to reference async chunks
 /******/ 		__webpack_require__.u = (chunkId) => {
 /******/ 			// return url for filenames based on template
-/******/ 			return "js/" + chunkId + ".js?id=" + {"node_modules_chart_js_auto_auto_esm_js":"10c6b388645ceb22","resources_js_pages_auth_ForgotPassword_vue":"5b9f0529bda25a9b","resources_js_pages_auth_Login_vue":"61b9c9ae1ae9da32","resources_js_pages_auth_ResetPassword_vue":"b091193a1e114ce8","resources_js_pages_auth_VerifyEmail_vue":"d9853eae0a0235f2","resources_js_pages_expense_Create_vue":"310e7d98ea6b356a","resources_js_pages_expense_Index_vue":"bc7ec2fb070cf568","resources_js_pages_expense_Show_vue":"877a19596ee241b4","resources_js_pages_expense_TableHeader_js":"eed3f0613f167cfd","resources_js_pages_home_Index_vue":"4c4f4fe595ce63c4","resources_js_pages_member_Create_vue":"838296974c6b4913","resources_js_pages_member_Edit_vue":"bc2c701451f6a653","resources_js_pages_member_Index_vue":"caaaba41d56c9f67","resources_js_pages_member_TableHeader_js":"51dbf053f7ddd45c","resources_js_pages_mutation_Report_vue":"6e9122d512297940","resources_js_pages_mutation_TableHeader_js":"7822e888aa3c52fc","resources_js_pages_topup_Create_vue":"958203b0038681b5","resources_js_pages_topup_Index_vue":"ccfe12c579a19810","resources_js_pages_topup_Show_vue":"4d5dea1719d4048e","resources_js_pages_topup_TableHeader_js":"601b7c0a855ce64e","resources_js_pages_typemember_Create_vue":"5bba3a97069a1889","resources_js_pages_typemember_Edit_vue":"8ab79ae9735ce84f","resources_js_pages_typemember_Index_vue":"37e8f6153840325d","resources_js_pages_typemember_TableHeader_js":"ac1d31a59f8d464e","resources_js_pages_typevehicle_Create_vue":"4799ba8b5384d9a3","resources_js_pages_typevehicle_Edit_vue":"1ec4ba3e7994e2bc","resources_js_pages_typevehicle_Index_vue":"69ab68f9968f9aff","resources_js_pages_typevehicle_TableHeader_js":"a40378918fbe74e1","resources_js_pages_user_Create_vue":"ed7565eb901e854c","resources_js_pages_user_Edit_vue":"4948ac292320388a","resources_js_pages_user_Index_vue":"552950b60f6dbb1b","resources_js_pages_user_Show_vue":"1d1d7702785d1470","resources_js_pages_user_TableHeader_js":"0d87fd422fe40491"}[chunkId] + "";
+/******/ 			return "js/" + chunkId + ".js?id=" + {"node_modules_chart_js_auto_auto_esm_js":"10c6b388645ceb22","resources_js_pages_auth_ForgotPassword_vue":"5b9f0529bda25a9b","resources_js_pages_auth_Login_vue":"61b9c9ae1ae9da32","resources_js_pages_auth_ResetPassword_vue":"b091193a1e114ce8","resources_js_pages_auth_VerifyEmail_vue":"d9853eae0a0235f2","resources_js_pages_expense_Create_vue":"310e7d98ea6b356a","resources_js_pages_expense_Index_vue":"bc7ec2fb070cf568","resources_js_pages_expense_Show_vue":"877a19596ee241b4","resources_js_pages_expense_TableHeader_js":"eed3f0613f167cfd","resources_js_pages_home_Index_vue":"4a180c0ce9438466","resources_js_pages_member_Create_vue":"838296974c6b4913","resources_js_pages_member_Edit_vue":"bc2c701451f6a653","resources_js_pages_member_Index_vue":"caaaba41d56c9f67","resources_js_pages_member_TableHeader_js":"51dbf053f7ddd45c","resources_js_pages_mutation_Report_vue":"6e9122d512297940","resources_js_pages_mutation_TableHeader_js":"7822e888aa3c52fc","resources_js_pages_topup_Create_vue":"958203b0038681b5","resources_js_pages_topup_Index_vue":"ccfe12c579a19810","resources_js_pages_topup_Show_vue":"4d5dea1719d4048e","resources_js_pages_topup_TableHeader_js":"601b7c0a855ce64e","resources_js_pages_typemember_Create_vue":"5bba3a97069a1889","resources_js_pages_typemember_Edit_vue":"8ab79ae9735ce84f","resources_js_pages_typemember_Index_vue":"37e8f6153840325d","resources_js_pages_typemember_TableHeader_js":"ac1d31a59f8d464e","resources_js_pages_typevehicle_Create_vue":"4799ba8b5384d9a3","resources_js_pages_typevehicle_Edit_vue":"1ec4ba3e7994e2bc","resources_js_pages_typevehicle_Index_vue":"69ab68f9968f9aff","resources_js_pages_typevehicle_TableHeader_js":"a40378918fbe74e1","resources_js_pages_user_Create_vue":"ed7565eb901e854c","resources_js_pages_user_Edit_vue":"4948ac292320388a","resources_js_pages_user_Index_vue":"552950b60f6dbb1b","resources_js_pages_user_Show_vue":"1d1d7702785d1470","resources_js_pages_user_TableHeader_js":"0d87fd422fe40491"}[chunkId] + "";
 /******/ 		};
 /******/ 	})();
 /******/ 	

resources/js/components/AppCardStatistic.vue

@@ -0,0 +1,29 @@
+<script setup>
+defineProps({
+  data: {
+    type: Object,
+    required: true,
+  },
+})
+</script>
+
+<template>
+  <Card class="h-full">
+    <template #content>
+      <div class="flex justify-content-between mb-3">
+        <div>
+          <span class="block text-500 font-medium mb-3">{{ data.title }}</span>
+          <div v-if="data.value" class="text-900 font-medium text-xl">{{ data.value }}</div>
+        </div>
+        <div
+          class="flex align-items-center justify-content-center bg-orange-100 border-round"
+          style="width: 2.5rem; height: 2.5rem"
+        >
+          <i class="text-orange-500 text-xl" :class="data.icon"></i>
+        </div>
+      </div>
+      <span class="text-green-500 font-medium">{{ data.amount }} </span>
+      <span class="text-500"> {{ ' ' + data.amountLabel }}</span>
+    </template>
+  </Card>
+</template>

resources/js/pages/home/Index.vue

@@ -1,9 +1,206 @@
 <script setup>
+import { Head } from '@inertiajs/inertia-vue3'
+import { orderBy } from 'lodash'
+import AppCardStatistic from '@/components/AppCardStatistic.vue'
 import AppLayout from '@/layouts/AppLayout.vue'
+
+defineProps({
+  cardStatistics: Object,
+  barStatistics: Object,
+  barHorizontalStatistics: Object,
+})
+
+const colors = [
+  '#349dcf',
+  '#00b2da',
+  '#00c7dd',
+  '#1fdbdb',
+  '#57eed3',
+  '#88ffc9',
+  '#96ed9a',
+  '#a8d96c',
+  '#bbc242',
+  '#cda91d',
+]
+
+const barChart = (chartData) => {
+  const colors = ['#349dcf', '#a8d96c']
+
+  const data = {
+    datasets: [],
+  }
+
+  let id = 0
+  for (const key in chartData) {
+    data.datasets.push({
+      label: key,
+      backgroundColor: colors[id],
+      data: chartData[key],
+    })
+
+    id++
+  }
+
+  return data
+}
+
+const barChartOption = {
+  maintainAspectRatio: false,
+  datasetFill: false,
+}
+
+const barHorizontalChart = (chartData) => {
+  // const data = {
+  //   datasets: [],
+  // }
+
+  // let id = 0
+  // for (const key in chartData) {
+  //   data.datasets.push({
+  //     label: key,
+  //     backgroundColor: colors[id],
+  //     data: chartData[key],
+  //   })
+
+  //   id++
+  // }
+
+  // return data
+
+  const labels = []
+  const data = []
+
+  for (const chartData of chartData) {
+    labels.push([chartData.phone, chartData.name])
+    data.push(chartData.amount)
+  }
+
+  return {
+    labels: labels,
+    datasets: [
+      {
+        data: data,
+        backgroundColor: colors,
+      },
+    ],
+  }
+}
+
+const barHorizontalChartOption = {
+  maintainAspectRatio: false,
+  datasetFill: false,
+  indexAxis: 'y',
+  plugins: {
+    legend: {
+      display: false,
+    },
+  },
+}
+
+const pieChart = (chartData) => {
+  const labels = []
+  const data = []
+
+  for (const key in chartData) {
+    labels.push(key)
+    data.push(chartData[key])
+  }
+
+  return {
+    labels: labels,
+    datasets: [
+      {
+        data: data,
+        backgroundColor: colors,
+      },
+    ],
+  }
+}
+
+const pieChartOption = {
+  maintainAspectRatio: false,
+  datasetFill: false,
+}
 </script>
 
 <template>
   <AppLayout>
-    <h1>Web App Parkirin</h1>
+    <Head title="Dashboard" />
+
+    <div class="grid">
+      <div class="col-12 flex flex-wrap justify-content-between card-statistic">
+        <div v-for="cardStatistic in cardStatistics" class="flex-grow-1">
+          <AppCardStatistic :data="cardStatistic" />
+        </div>
+      </div>
+
+      <div v-for="barStatistic in barStatistics" class="col-12 md:col-6">
+        <Card>
+          <template #title>
+            <div class="flex flex-column">
+              <span>{{ barStatistic.title }}</span>
+              <span v-if="barStatistic.description" class="text-base font-normal">{{ barStatistic.description }}</span>
+            </div>
+          </template>
+          <template #content>
+            <Chart
+              type="bar"
+              :width="600"
+              :height="300"
+              :data="barChart(barStatistic.data)"
+              :options="barChartOption"
+            />
+          </template>
+        </Card>
+      </div>
+
+      <div v-for="barHorizontalStatistic in barHorizontalStatistics" class="col-12 md:col-6">
+        <Card>
+          <template #title>
+            <div class="flex flex-column">
+              <span>{{ barHorizontalStatistic.title }}</span>
+              <span v-if="barHorizontalStatistic.description" class="text-base font-normal">{{
+                barHorizontalStatistic.description
+              }}</span>
+            </div>
+          </template>
+          <template #content>
+            <Chart
+              type="bar"
+              :width="600"
+              :height="300"
+              :data="barHorizontalChart(barHorizontalStatistic.data)"
+              :options="barHorizontalChartOption"
+            />
+          </template>
+        </Card>
+      </div>
+
+      <!-- <div v-for="pieStatistic in pieStatistics" class="col-12 md:col-6">
+        <Card>
+          <template #title>
+            <div class="flex flex-column">
+              <span>{{ pieStatistic.title }}</span>
+              <span v-if="pieStatistic.description" class="text-base font-normal">{{ pieStatistic.description }}</span>
+            </div>
+          </template>
+          <template #content>
+            <Chart
+              type="pie"
+              :width="600"
+              :height="300"
+              :data="pieChart(pieStatistic.data)"
+              :options="pieChartOption"
+            />
+          </template>
+        </Card>
+      </div> -->
+    </div>
   </AppLayout>
 </template>
+
+<style scoped>
+.card-statistic {
+  gap: 1rem;
+}
+</style>