fix: authorization for dashboard

app/Http/Controllers/DashboardController.php

@@ -6,6 +6,7 @@ use App\Models\Member;
 use App\Models\Mutation;
 use App\Models\TypeMember;
 use App\Models\TypeVehicle;
+use App\Models\User;
 use App\Services\MutationService;
 use Carbon\Carbon;
 use Illuminate\Http\Request;
@@ -20,13 +21,15 @@ class DashboardController extends Controller
      */
     public function __invoke(Request $request)
     {
-        $member = Member::get();
+        $members = Member::get();
 
-        $typeMember = TypeMember::get();
+        $typeMembers = TypeMember::get();
 
-        $typeVehicle = TypeVehicle::get();
+        $typeVehicles = TypeVehicle::get();
 
-        $mutation = Mutation::whereYear('created_at', date('Y'))
+        $users = User::get();
+
+        $mutations = Mutation::whereYear('created_at', date('Y'))
             ->get()
             ->groupBy([
                 fn($mutation) => $mutation->type,
@@ -41,31 +44,49 @@ class DashboardController extends Controller
                 //     'amount' => ...,
                 //     'amountLabel' => ...,
                 //     'value' => ...,
+                //     'roleId' => [...,...]
                 // ],
                 [
                     'title' => __('words.member'),
                     'icon' => 'pi pi-id-card',
-                    'amount' => $member->count(),
+                    'amount' => $members->count(),
                     'amountLabel' => __('words.total'),
+                    'roleId' => [3],
                 ],
                 [
                     'title' => __('words.type_member'),
                     'icon' => 'pi pi-id-card',
-                    'amount' => $typeMember->count(),
+                    'amount' => $typeMembers->count(),
                     'amountLabel' => __('words.total'),
+                    'roleId' => [2],
                 ],
                 [
                     'title' => __('words.type_vehicle'),
                     'icon' => 'pi pi-car',
-                    'amount' => $typeVehicle->count(),
+                    'amount' => $typeVehicles->count(),
+                    'amountLabel' => __('words.total'),
+                    'roleId' => [3],
+                ],
+                [
+                    'title' => __('words.user'),
+                    'icon' => 'pi pi-user',
+                    'amount' => $users->count(),
                     'amountLabel' => __('words.total'),
+                    'roleId' => [1],
                 ],
             ],
             'barStatistics' => [
+                // [
+                //     'title' => ...,
+                //     'description' => ...,
+                //     'data' => ...,
+                //     'roleId' => [..., ...],
+                // ],
                 [
                     'title' => __('words.mutation_statistic'),
                     'description' => __('words.per_year') . ' ' . date('Y'),
-                    'data' => (new MutationService)->statistic($mutation),
+                    'data' => (new MutationService)->statistic($mutations),
+                    'roleId' => [2, 3],
                 ],
             ],
         ]);

lang/en/words.php

@@ -36,5 +36,6 @@ return [
     'type_vehicle' => 'Type Kendaraan',
     'top_up_rank' => 'Top Up',
     'top_up_number_rank' => 'Top Up :number Rank',
+    'user' => 'User',
 
 ];

lang/id/words.php

@@ -36,5 +36,6 @@ return [
     'type_vehicle' => 'Jenis Kendaraan',
     'top_up_rank' => 'Top Up',
     'top_up_number_rank' => 'Peringkat :number Top Up',
+    'user' => 'User',
 
 ];

public/js/vue.js

@@ -58396,7 +58396,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":"24ce2fe5d7bc72c8","resources_js_pages_expense_Index_vue":"798dbf6d69320567","resources_js_pages_expense_Show_vue":"d5681c75fde77308","resources_js_pages_expense_TableHeader_js":"eed3f0613f167cfd","resources_js_pages_home_Index_vue":"b922dc090509ea08","resources_js_pages_member_Create_vue":"fc1cd382141d2c70","resources_js_pages_member_Edit_vue":"33eee7f2667de50d","resources_js_pages_member_Index_vue":"cf14eae2779192d8","resources_js_pages_member_TableHeader_js":"51dbf053f7ddd45c","resources_js_pages_mutation_Report_vue":"0c0abe807726ddb5","resources_js_pages_mutation_TableHeader_js":"7822e888aa3c52fc","resources_js_pages_parkingfee_Create_vue":"4d1d60defdf2c684","resources_js_pages_topup_Create_vue":"d4b2fe633c0691f2","resources_js_pages_topup_Index_vue":"b2565eb99363b9ba","resources_js_pages_topup_Show_vue":"cd5e15ada76e9fbe","resources_js_pages_topup_TableHeader_js":"601b7c0a855ce64e","resources_js_pages_typemember_Create_vue":"06b9f61209ca7651","resources_js_pages_typemember_Edit_vue":"4d8a32f046a9a08b","resources_js_pages_typemember_Index_vue":"73b3a8ec31100c62","resources_js_pages_typemember_TableHeader_js":"ac1d31a59f8d464e","resources_js_pages_typevehicle_Create_vue":"75389ee20755d74a","resources_js_pages_typevehicle_Edit_vue":"09a18fe1169d4335","resources_js_pages_typevehicle_Index_vue":"d15b150b4fdee4ad","resources_js_pages_typevehicle_TableHeader_js":"a40378918fbe74e1","resources_js_pages_user_Create_vue":"9b13f9080e20bf2d","resources_js_pages_user_Edit_vue":"4edf8db4d7073eac","resources_js_pages_user_Index_vue":"9c791e4ceac6a483","resources_js_pages_user_Show_vue":"2431556dd033ddb2","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":"24ce2fe5d7bc72c8","resources_js_pages_expense_Index_vue":"798dbf6d69320567","resources_js_pages_expense_Show_vue":"d5681c75fde77308","resources_js_pages_expense_TableHeader_js":"eed3f0613f167cfd","resources_js_pages_home_Index_vue":"ad1968615775596e","resources_js_pages_member_Create_vue":"fc1cd382141d2c70","resources_js_pages_member_Edit_vue":"33eee7f2667de50d","resources_js_pages_member_Index_vue":"cf14eae2779192d8","resources_js_pages_member_TableHeader_js":"51dbf053f7ddd45c","resources_js_pages_mutation_Report_vue":"0c0abe807726ddb5","resources_js_pages_mutation_TableHeader_js":"7822e888aa3c52fc","resources_js_pages_parkingfee_Create_vue":"4d1d60defdf2c684","resources_js_pages_topup_Create_vue":"d4b2fe633c0691f2","resources_js_pages_topup_Index_vue":"b2565eb99363b9ba","resources_js_pages_topup_Show_vue":"cd5e15ada76e9fbe","resources_js_pages_topup_TableHeader_js":"601b7c0a855ce64e","resources_js_pages_typemember_Create_vue":"06b9f61209ca7651","resources_js_pages_typemember_Edit_vue":"4d8a32f046a9a08b","resources_js_pages_typemember_Index_vue":"73b3a8ec31100c62","resources_js_pages_typemember_TableHeader_js":"ac1d31a59f8d464e","resources_js_pages_typevehicle_Create_vue":"75389ee20755d74a","resources_js_pages_typevehicle_Edit_vue":"09a18fe1169d4335","resources_js_pages_typevehicle_Index_vue":"d15b150b4fdee4ad","resources_js_pages_typevehicle_TableHeader_js":"a40378918fbe74e1","resources_js_pages_user_Create_vue":"9b13f9080e20bf2d","resources_js_pages_user_Edit_vue":"4edf8db4d7073eac","resources_js_pages_user_Index_vue":"9c791e4ceac6a483","resources_js_pages_user_Show_vue":"2431556dd033ddb2","resources_js_pages_user_TableHeader_js":"0d87fd422fe40491"}[chunkId] + "";
 /******/ 		};
 /******/ 	})();
 /******/ 	

resources/js/components/AppCardStatistic.vue

@@ -1,29 +0,0 @@
-<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,6 +1,6 @@
 <script setup>
 import { Head } from '@inertiajs/inertia-vue3'
-import AppCardStatistic from '@/components/AppCardStatistic.vue'
+import { includes } from 'lodash'
 import AppLayout from '@/layouts/AppLayout.vue'
 
 defineProps({
@@ -110,31 +110,54 @@ const pieChartOption = {
     <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" />
+      <template v-for="cardStatistic in cardStatistics">
+        <div v-if="includes(cardStatistic.roleId, $page.props.auth.user.role_id)" class="col-12 md:col-4 xl:col-3">
+          <Card class="h-full">
+            <template #content>
+              <div class="flex justify-content-between mb-3">
+                <div>
+                  <span class="block text-500 font-medium mb-3">{{ cardStatistic.title }}</span>
+                  <div v-if="cardStatistic.value" class="text-900 font-medium text-xl">{{ cardStatistic.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="cardStatistic.icon"></i>
+                </div>
+              </div>
+              <span class="text-green-500 font-medium">{{ cardStatistic.amount }} </span>
+              <span class="text-500"> {{ ' ' + cardStatistic.amountLabel }}</span>
+            </template>
+          </Card>
         </div>
-      </div>
+      </template>
+    </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 v-if="Object.keys(barStatistic.data).length" #content>
-            <Chart
-              type="bar"
-              :width="600"
-              :height="300"
-              :data="barChart(barStatistic.data)"
-              :options="barChartOption"
-            />
-          </template>
-        </Card>
-      </div>
+    <div class="grid">
+      <template v-for="barStatistic in barStatistics">
+        <div v-if="includes(barStatistic.roleId, $page.props.auth.user.role_id)" 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 v-if="Object.keys(barStatistic.data).length" #content>
+              <Chart
+                type="bar"
+                :width="600"
+                :height="300"
+                :data="barChart(barStatistic.data)"
+                :options="barChartOption"
+              />
+            </template>
+          </Card>
+        </div>
+      </template>
 
       <!-- <div v-for="barHorizontalStatistic in barHorizontalStatistics" class="col-12 md:col-6">
         <Card>
@@ -180,9 +203,3 @@ const pieChartOption = {
     </div>
   </AppLayout>
 </template>
-
-<style scoped>
-.card-statistic {
-  gap: 1rem;
-}
-</style>