Dashboard refactoring.

ModularThink · Nov 4, 2024 · 1516210 · 1516210
1 parent 02e585c
commit 1516210
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 48 deletions.
diff --git a/stubs/resources/js/Components/Menu/AppMenu.vue b/stubs/resources/js/Components/Menu/AppMenu.vue
@@ -1,36 +1,34 @@
 <template>
-    <div>
-        <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 v-if="showInputSearch" class="mb-3 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>
-            </div>
-        </li>
+                <AppInputText
+                    id="search"
+                    v-model="searchTerm"
+                    :placeholder="__('Search...')"
+                    class="w-full pl-9"
+                ></AppInputText>
 
-        <ul v-for="(item, index) in filteredItems" :key="index">
-            <AppMenuSection :item="item" />
-        </ul>
+                <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>
     </div>
+
+    <ul v-for="(item, index) in filteredItems" :key="index">
+        <AppMenuSection :item="item" />
+    </ul>
 </template>
 
 <script setup>
@@ -43,11 +41,16 @@ const props = defineProps({
     }
 })
 
+const showInputSearch = true
+
 const searchTerm = ref('')
 
 // Computed property to filter items based on search term
 const filteredItems = computed(() => {
-    if (!searchTerm.value) return props.items
+    if (!showInputSearch || !searchTerm.value) {
+        return props.items
+    }
+
     const term = searchTerm.value.toLowerCase()
 
     // Recursive function to filter items and their children

diff --git a/stubs/resources/js/Pages/Dashboard/Components/DashboardCard.vue b/stubs/resources/js/Pages/Dashboard/Components/DashboardCard.vue
@@ -1,34 +1,30 @@
 <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"
+        class="shadow-xs flex items-center rounded-lg border border-skin-neutral-4 bg-skin-neutral-2 p-4 transition-all duration-300 hover:cursor-pointer hover:bg-skin-neutral-3"
         @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"
-        >
+        <div class="mr-4 rounded-full px-3 py-2" :class="color">
             <i :class="icon" class="text-2xl"></i>
         </div>
         <div>
-            <p class="mb-2 text-sm font-medium">
+            <p class="mb-2 font-semibold">
                 {{ label }}
             </p>
-            <p class="text-lg font-semibold">
+            <p>
                 {{ count }}
             </p>
         </div>
     </div>
 </template>
 
 <script setup>
-import useAuthCan from '@/Composables/useAuthCan'
-
 defineProps({
     link: {
         type: String,
         default: null
     },
     count: {
-        type: String,
+        type: Number,
         default: null
     },
     label: {
@@ -38,8 +34,31 @@ defineProps({
     icon: {
         type: String,
         default: null
+    },
+    color: {
+        type: String,
+        default: 'info',
+        validator: (value) => {
+            return ['info', 'success', 'warning', 'danger'].includes(value)
+        }
     }
 })
-
-const { can } = useAuthCan()
 </script>
+
+<style scoped>
+.info {
+    @apply bg-skin-info-light text-skin-info;
+}
+
+.success {
+    @apply bg-skin-success-light text-skin-success;
+}
+
+.warning {
+    @apply bg-skin-warning-light text-skin-warning;
+}
+
+.danger {
+    @apply bg-skin-error-light text-skin-error;
+}
+</style>
diff --git a/stubs/resources/js/Pages/Dashboard/DashboardIndex.vue b/stubs/resources/js/Pages/Dashboard/DashboardIndex.vue
@@ -16,31 +16,33 @@
             v-if="can('Acl')"
             link="user.index"
             label="Users"
-            :count="props.count['users']"
-            icon="ri-user-fill"
+            :count="props.count.users"
+            icon="ri-user-line"
+            color="info"
         ></DashboardCard>
 
         <!-- Role Count Card -->
         <DashboardCard
             v-if="can('Acl')"
             link="aclRole.index"
             label="Roles"
-            :count="props.count['roles']"
-            icon="ri-user-settings-line"
+            :count="props.count.roles"
+            icon="ri-account-box-line"
+            color="warning"
         ></DashboardCard>
 
         <!-- Permission Count Card -->
         <DashboardCard
             v-if="can('Acl')"
             link="aclPermission.index"
             label="Permissions"
-            :count="props.count['permissions']"
-            icon="ri-key-fill"
+            :count="props.count.permissions"
+            icon="ri-shield-keyhole-line"
+            color="success"
         ></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'