From bc1c314768a01c873ff52b7f6fea6d8715868aa9 Mon Sep 17 00:00:00 2001
From: Mehedi Jaman <mail4mjaman@gmail.com>
Date: Wed, 30 Oct 2024 11:20:20 +0600
Subject: [PATCH 1/3] Feature: Search feature for Sidebar Menu Items.

---
 .../resources/js/Components/Menu/AppMenu.vue  | 55 ++++++++++++++++++-
 1 file changed, 53 insertions(+), 2 deletions(-)

diff --git a/stubs/resources/js/Components/Menu/AppMenu.vue b/stubs/resources/js/Components/Menu/AppMenu.vue
index 6e1dd3a..8387c8b 100644
--- a/stubs/resources/js/Components/Menu/AppMenu.vue
+++ b/stubs/resources/js/Components/Menu/AppMenu.vue
@@ -1,16 +1,67 @@
 <template>
     <div>
-        <ul v-for="(item, index) in items" :key="index">
+        <li class="mb-2 block">
+            <div class="rounded-tl rounded-tr">
+                <label for="search" class="sr-only">Search</label>
+                <div class="flex items-center align-middle">
+                    <div
+                        class="pointer-events-none absolute flex items-center pl-3"
+                    >
+                        <i class="ri-search-line"></i>
+                    </div>
+                    <AppInputText
+                        id="search"
+                        v-model="searchTerm"
+                        :placeholder="__('Search...')"
+                        class="w-full pl-9"
+                    ></AppInputText>
+
+                    <AppButton
+                        v-if="searchTerm"
+                        class="btn ml-1 border border-skin-neutral-8 bg-skin-neutral-5 hover:bg-skin-neutral-8"
+                        @click="searchTerm = ''"
+                    >
+                        <i class="ri-close-line"></i>
+                    </AppButton>
+                </div>
+            </div>
+        </li>
+
+        <ul v-for="(item, index) in filteredItems" :key="index">
             <AppMenuSection :item="item" />
         </ul>
     </div>
 </template>
 
 <script setup>
-defineProps({
+import { ref } from 'vue'
+import { computed } from 'vue'
+
+const props = defineProps({
     items: {
         type: Array,
         default: () => []
     }
 })
+
+const searchTerm = ref('')
+
+// Computed property to filter items based on search term
+const filteredItems = computed(() => {
+    if (!searchTerm.value) return props.items
+    const searchFilter = (item) => {
+        // Convert search term to lowercase for case-insensitive matching
+        const term = searchTerm.value.toLowerCase()
+
+        // Check if the label or any child item contains the search term
+        const matches = (i) =>
+            i.label?.toLowerCase().includes(term) ||
+            (i.children && i.children.some(matches)) // Recursively check children
+
+        return matches(item)
+    }
+
+    // Filter items recursively
+    return props.items.filter(searchFilter)
+})
 </script>

From 01edec0d28e074020a8b8e2a426eee30bdfbc188 Mon Sep 17 00:00:00 2001
From: Mehedi Jaman <mail4mjaman@gmail.com>
Date: Wed, 30 Oct 2024 11:39:05 +0600
Subject: [PATCH 2/3] Added count cards for Users, Roles, and Permissions in
 the Dashboard.

---
 .../Http/Controllers/DashboardController.php  | 13 +++-
 .../js/Pages/Dashboard/DashboardIndex.vue     | 70 ++++++++++++++++++-
 2 files changed, 81 insertions(+), 2 deletions(-)

diff --git a/stubs/modules/Dashboard/Http/Controllers/DashboardController.php b/stubs/modules/Dashboard/Http/Controllers/DashboardController.php
index b237ee5..db6fd35 100755
--- 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
index f43b5b4..c6e1765 100644
--- 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>

From 7b3f6feeb47391c5f97c20ae9a56ab9d5aa3600b Mon Sep 17 00:00:00 2001
From: Mehedi Jaman <mail4mjaman@gmail.com>
Date: Sat, 2 Nov 2024 07:34:27 +0600
Subject: [PATCH 3/3] Fix: AppMenu Search Enhanced for larger amount of Items.
 Fix: Created dedicated component for dashboard card

---
 .../resources/js/Components/Menu/AppMenu.vue  | 44 ++++++++----
 .../Dashboard/Components/DashboardCard.vue    | 45 +++++++++++++
 .../js/Pages/Dashboard/DashboardIndex.vue     | 67 ++++++-------------
 3 files changed, 96 insertions(+), 60 deletions(-)
 create mode 100644 stubs/resources/js/Pages/Dashboard/Components/DashboardCard.vue

diff --git a/stubs/resources/js/Components/Menu/AppMenu.vue b/stubs/resources/js/Components/Menu/AppMenu.vue
index 8387c8b..2f5b958 100644
--- a/stubs/resources/js/Components/Menu/AppMenu.vue
+++ b/stubs/resources/js/Components/Menu/AppMenu.vue
@@ -34,8 +34,7 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
-import { computed } from 'vue'
+import { ref, computed } from 'vue'
 
 const props = defineProps({
     items: {
@@ -49,19 +48,40 @@ const searchTerm = ref('')
 // Computed property to filter items based on search term
 const filteredItems = computed(() => {
     if (!searchTerm.value) return props.items
-    const searchFilter = (item) => {
-        // Convert search term to lowercase for case-insensitive matching
-        const term = searchTerm.value.toLowerCase()
+    const term = searchTerm.value.toLowerCase()
 
-        // Check if the label or any child item contains the search term
-        const matches = (i) =>
-            i.label?.toLowerCase().includes(term) ||
-            (i.children && i.children.some(matches)) // Recursively check children
+    // Recursive function to filter items and their children
+    const filterItems = (items) => {
+        return items.reduce((acc, item) => {
+            const isParentMatch = item.label.toLowerCase().includes(term)
+            let filteredChildren = []
 
-        return matches(item)
+            if (item.children) {
+                if (isParentMatch) {
+                    // If parent matches, include all children
+                    filteredChildren = item.children
+                } else {
+                    // Else, filter children based on search term
+                    filteredChildren = filterItems(item.children)
+                }
+            }
+
+            // Include the item if the parent matches or any of its children match
+            if (
+                isParentMatch ||
+                (filteredChildren && filteredChildren.length)
+            ) {
+                acc.push({
+                    ...item,
+                    // If parent matches, include all children; else, include filtered children
+                    children: isParentMatch ? item.children : filteredChildren
+                })
+            }
+
+            return acc
+        }, [])
     }
 
-    // Filter items recursively
-    return props.items.filter(searchFilter)
+    return filterItems(props.items)
 })
 </script>
diff --git a/stubs/resources/js/Pages/Dashboard/Components/DashboardCard.vue b/stubs/resources/js/Pages/Dashboard/Components/DashboardCard.vue
new file mode 100644
index 0000000..5740643
--- /dev/null
+++ b/stubs/resources/js/Pages/Dashboard/Components/DashboardCard.vue
@@ -0,0 +1,45 @@
+<template>
+    <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(link))"
+    >
+        <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="icon" class="text-2xl"></i>
+        </div>
+        <div>
+            <p class="mb-2 text-sm font-medium">
+                {{ label }}
+            </p>
+            <p class="text-lg font-semibold">
+                {{ count }}
+            </p>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import useAuthCan from '@/Composables/useAuthCan'
+
+defineProps({
+    link: {
+        type: String,
+        default: null
+    },
+    count: {
+        type: String,
+        default: null
+    },
+    label: {
+        type: String,
+        default: null
+    },
+    icon: {
+        type: String,
+        default: null
+    }
+})
+
+const { can } = useAuthCan()
+</script>
diff --git a/stubs/resources/js/Pages/Dashboard/DashboardIndex.vue b/stubs/resources/js/Pages/Dashboard/DashboardIndex.vue
index c6e1765..61a5113 100644
--- a/stubs/resources/js/Pages/Dashboard/DashboardIndex.vue
+++ b/stubs/resources/js/Pages/Dashboard/DashboardIndex.vue
@@ -12,67 +12,38 @@
 
     <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'))"
+        <DashboardCard
             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>
+            link="user.index"
+            label="Users"
+            :count="props.count['users']"
+            icon="ri-user-fill"
+        ></DashboardCard>
 
         <!-- 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'))"
+        <DashboardCard
             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>
+            link="aclRole.index"
+            label="Roles"
+            :count="props.count['roles']"
+            icon="ri-user-settings-line"
+        ></DashboardCard>
 
         <!-- 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'))"
+        <DashboardCard
             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>
+            link="aclPermission.index"
+            label="Permissions"
+            :count="props.count['permissions']"
+            icon="ri-key-fill"
+        ></DashboardCard>
     </div>
 </template>
 <script setup>
 import { ref } from 'vue'
 import { Head } from '@inertiajs/vue3'
 import useAuthCan from '@/Composables/useAuthCan'
+import DashboardCard from '@/Pages/Dashboard/Components/DashboardCard.vue'
 
 const { can } = useAuthCan()