Added count cards for Users, Roles, and Permissions in the Dashboard.

ModularThink · Oct 30, 2024 · 01edec0 · 01edec0
1 parent bc1c314
commit 01edec0
Show file tree

Hide file tree

Showing 2 changed files with 81 additions and 2 deletions.
diff --git a/stubs/modules/Dashboard/Http/Controllers/DashboardController.php b/stubs/modules/Dashboard/Http/Controllers/DashboardController.php
@@ -2,7 +2,10 @@
 
 namespace Modules\Dashboard\Http\Controllers;
 
+use App\Models\User;
 use Inertia\Inertia;
+use Spatie\Permission\Models\Role;
+use Spatie\Permission\Models\Permission;
 use Modules\Support\Http\Controllers\BackendController;
 
 class DashboardController extends BackendController
@@ -14,6 +17,14 @@ class DashboardController extends BackendController
      */
     public function index()
     {
-        return Inertia::render('Dashboard/DashboardIndex');
+        $count = [
+            'users' => User::count(),
+            'permissions' => Permission::count(),
+            'roles' => Role::count(),
+        ];
+
+        return Inertia::render('Dashboard/DashboardIndex', [
+            'count' => $count
+        ]);
     }
 }
diff --git a/stubs/resources/js/Pages/Dashboard/DashboardIndex.vue b/stubs/resources/js/Pages/Dashboard/DashboardIndex.vue
@@ -9,8 +9,76 @@
             <span class="font-bold">{{ $page.props.auth.user.name }}</span> !
         </div>
     </div>
-</template>
 
+    <div class="my-6 grid grid-cols-1 gap-6 md:grid-cols-3">
+        <!-- User Count Card -->
+        <div
+            class="shadow-xs flex items-center rounded-lg border border-skin-neutral-4 bg-skin-neutral-2 p-4 hover:cursor-pointer hover:bg-skin-neutral-1"
+            @click="$inertia.visit(route('user.index'))"
+            v-if="can('Acl')"
+        >
+            <div
+                class="mr-4 rounded-full bg-green-100 px-3 py-2 text-green-500 dark:bg-green-500 dark:text-green-100"
+            >
+                <i class="ri-user-fill text-2xl"></i>
+            </div>
+            <div>
+                <p class="mb-2 text-sm font-medium">Users</p>
+                <p class="text-lg font-semibold">
+                    {{ props.count['users'] }}
+                </p>
+            </div>
+        </div>
+
+        <!-- Role Count Card -->
+        <div
+            class="shadow-xs flex items-center rounded-lg border border-skin-neutral-4 bg-skin-neutral-2 p-4 hover:cursor-pointer hover:bg-skin-neutral-1"
+            @click="$inertia.visit(route('aclRole.index'))"
+            v-if="can('Acl')"
+        >
+            <div
+                class="mr-4 rounded-full bg-blue-100 px-3 py-2 text-blue-500 dark:bg-blue-500 dark:text-blue-100"
+            >
+                <i class="ri-user-settings-line text-2xl"></i>
+            </div>
+            <div>
+                <p class="mb-2 text-sm font-medium">Roles</p>
+                <p class="text-lg font-semibold">
+                    {{ props.count['roles'] }}
+                </p>
+            </div>
+        </div>
+
+        <!-- Permission Count Card -->
+        <div
+            class="shadow-xs flex items-center rounded-lg border border-skin-neutral-4 bg-skin-neutral-2 p-4 hover:cursor-pointer hover:bg-skin-neutral-1"
+            @click="$inertia.visit(route('aclPermission.index'))"
+            v-if="can('Acl')"
+        >
+            <div
+                class="mr-4 rounded-full bg-orange-100 px-3 py-2 text-orange-500 dark:bg-orange-500 dark:text-orange-100"
+            >
+                <i class="ri-key-fill text-2xl"></i>
+            </div>
+            <div>
+                <p class="mb-2 text-sm font-medium">Permissions</p>
+                <p class="text-lg font-semibold">
+                    {{ props.count['permissions'] }}
+                </p>
+            </div>
+        </div>
+    </div>
+</template>
 <script setup>
+import { ref } from 'vue'
 import { Head } from '@inertiajs/vue3'
+import useAuthCan from '@/Composables/useAuthCan'
+
+const { can } = useAuthCan()
+
+const props = defineProps({
+    count: {
+        type: Object
+    }
+})
 </script>