From 63ab66b06cb0f314589e6c47964ad463f73d900a Mon Sep 17 00:00:00 2001
From: Geriano <gerznewbie@gmail.com>
Date: Sun, 31 Jul 2022 10:36:50 +0700
Subject: [PATCH] refactor

---
 resources/js/Pages/Superuser/Menu/Index.vue   | 234 ++++++-------
 .../js/Pages/Superuser/Permission/Index.vue   |  64 ++--
 resources/js/Pages/Superuser/Role/Index.vue   | 178 +++++-----
 resources/js/Pages/Superuser/User/Index.vue   | 316 +++++++++---------
 4 files changed, 400 insertions(+), 392 deletions(-)

diff --git a/resources/js/Pages/Superuser/Menu/Index.vue b/resources/js/Pages/Superuser/Menu/Index.vue
index d563e6f..e6639d7 100644
--- a/resources/js/Pages/Superuser/Menu/Index.vue
+++ b/resources/js/Pages/Superuser/Menu/Index.vue
@@ -159,130 +159,130 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
         </div>
       </template>
     </Card>
-  </DashboardLayout>
 
-  <Modal :show="open">
-    <form @submit.prevent="submit" class="w-full max-w-xl sm:max-w-5xl h-fit rounded-md shadow-xl">
-      <Card class="bg-gray-50 dark:bg-gray-700 dark:text-gray-100">
+    <Modal :show="open">
+      <form @submit.prevent="submit" class="w-full max-w-xl sm:max-w-5xl h-fit rounded-md shadow-xl">
+        <Card class="bg-gray-50 dark:bg-gray-700 dark:text-gray-100">
+          <template #header>
+            <div class="flex items-center space-x-2 p-2 justify-end bg-gray-200 dark:bg-gray-800">
+              <Close @click.prevent="close" />
+            </div>
+          </template>
+
+          <template #body>
+            <div class="flex flex-col space-y-2 p-4">
+              <div class="flex flex-col space-y-1">
+                <div class="flex items-center space-x-2">
+                  <label for="name" class="lowercase first-letter:capitalize w-1/3">name</label>
+                  <Input v-model="form.name" type="text" name="name" placeholder="name" required autofocus />
+                </div>
+
+                <InputError :error="form.errors.name" />
+              </div>
+
+              <div class="flex flex-col space-y-1">
+                <div class="flex items-center space-x-2">
+                  <label for="route_or_url" class="lowercase first-letter:capitalize w-1/3">route name or url</label>
+                  <Select
+                    v-model="form.route_or_url"
+                    :options="routes"
+                    :searchable="true"
+                    :createOption="true"
+                    :value="form.route_or_url"
+                    ref="route_or_url"
+                    class="text-gray-800 placeholder:capitalize"
+                    placeholder="route name or url" />
+                </div>
+
+                <InputError :error="form.errors.route_or_url" />
+              </div>
+
+              <div class="flex flex-col space-y-1">
+                <div class="flex items-center space-x-2">
+                  <label for="actives" class="lowercase first-letter:capitalize w-1/3">actives</label>
+                  <Select
+                    v-model="form.actives"
+                    :options="[...routes, ...form.actives.filter(active => ! routes.includes(active))]"
+                    :searchable="true"
+                    :closeOnSelect="false"
+                    :clearOnSelect="false"
+                    :createTag="true"
+                    mode="tags"
+                    ref="actives"
+                    class="text-gray-800 placeholder:capitalize"
+                    placeholder="actives" />
+                </div>
+
+                <InputError :error="form.errors.actives" />
+              </div>
+
+              <div class="flex flex-col space-y-1">
+                <div class="flex items-center space-x-2">
+                  <label for="permissions" class="lowercase first-letter:capitalize w-1/3">permissions</label>
+                  <Select
+                    v-model="form.permissions"
+                    :options="permissions.map(p => ({
+                      label: p.name,
+                      value: p.id,
+                    }))"
+                    :searchable="true"
+                    :closeOnSelect="false"
+                    :clearOnSelect="false"
+                    mode="tags"
+                    ref="permissions"
+                    class="text-gray-800 placeholder:capitalize"
+                    placeholder="permissions" />
+                </div>
+
+                <InputError :error="form.errors.permissions" />
+              </div>
+
+              <div class="flex items-center space-x-2">
+                <label class="flex-none lowercase first-letter:capitalize w-1/4">icon</label>
+
+                <div class="flex items-center justify-between w-full">
+                  <p class="text-3xl">
+                    <Icon :name="form.icon" class="dark:text-white" />
+                  </p>
+
+                  <p class="text-sm uppercase">{{ form.icon }}</p>
+                  
+                  <ButtonBlue @click.prevent="icon = true" type="button">
+                    <Icon name="edit" />
+                    <p class="uppercase font-semibold">change</p>
+                  </ButtonBlue>
+                </div>
+              </div>
+            </div>
+          </template>
+
+          <template #footer>
+            <div class="flex items-center justify-end space-x-2 bg-gray-200 dark:bg-gray-800 py-1 px-2">
+              <ButtonGreen type="submit">
+                <Icon name="check" />
+                <p class="uppercase font-semibold">{{ form.id ? 'update' : 'create' }}</p>
+              </ButtonGreen>
+            </div>
+          </template>
+        </Card>
+      </form>
+    </Modal>
+
+    <Modal :show="icon">
+      <Card class="bg-gray-50 dark:bg-gray-700 dark:text-gray-100 w-full max-w-xl sm:max-w-5xl max-h-96 overflow-auto">
         <template #header>
-          <div class="flex items-center space-x-2 p-2 justify-end bg-gray-200 dark:bg-gray-800">
-            <Close @click.prevent="close" />
+          <div class="flex items-center space-x-2 p-2 justify-end bg-gray-200 dark:bg-gray-800 sticky top-0 left-0">
+            <input type="search" v-model="search" class="py-1 w-full bg-white dark:bg-transparent rounded-md text-sm uppercase" placeholder="search something">
+            <Icon @click.prevent="icon = false" name="times" class="px-2 py-1 bg-gray-300 hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 rounded-md transition-all cursor-pointer" />
           </div>
         </template>
 
         <template #body>
-          <div class="flex flex-col space-y-2 p-4">
-            <div class="flex flex-col space-y-1">
-              <div class="flex items-center space-x-2">
-                <label for="name" class="lowercase first-letter:capitalize w-1/3">name</label>
-                <Input v-model="form.name" type="text" name="name" placeholder="name" required autofocus />
-              </div>
-
-              <InputError :error="form.errors.name" />
-            </div>
-
-            <div class="flex flex-col space-y-1">
-              <div class="flex items-center space-x-2">
-                <label for="route_or_url" class="lowercase first-letter:capitalize w-1/3">route name or url</label>
-                <Select
-                  v-model="form.route_or_url"
-                  :options="routes"
-                  :searchable="true"
-                  :createOption="true"
-                  :value="form.route_or_url"
-                  ref="route_or_url"
-                  class="text-gray-800 placeholder:capitalize"
-                  placeholder="route name or url" />
-              </div>
-
-              <InputError :error="form.errors.route_or_url" />
-            </div>
-
-            <div class="flex flex-col space-y-1">
-              <div class="flex items-center space-x-2">
-                <label for="actives" class="lowercase first-letter:capitalize w-1/3">actives</label>
-                <Select
-                  v-model="form.actives"
-                  :options="[...routes, ...form.actives.filter(active => ! routes.includes(active))]"
-                  :searchable="true"
-                  :closeOnSelect="false"
-                  :clearOnSelect="false"
-                  :createTag="true"
-                  mode="tags"
-                  ref="actives"
-                  class="text-gray-800 placeholder:capitalize"
-                  placeholder="actives" />
-              </div>
-
-              <InputError :error="form.errors.actives" />
-            </div>
-
-            <div class="flex flex-col space-y-1">
-              <div class="flex items-center space-x-2">
-                <label for="permissions" class="lowercase first-letter:capitalize w-1/3">permissions</label>
-                <Select
-                  v-model="form.permissions"
-                  :options="permissions.map(p => ({
-                    label: p.name,
-                    value: p.id,
-                  }))"
-                  :searchable="true"
-                  :closeOnSelect="false"
-                  :clearOnSelect="false"
-                  mode="tags"
-                  ref="permissions"
-                  class="text-gray-800 placeholder:capitalize"
-                  placeholder="permissions" />
-              </div>
-
-              <InputError :error="form.errors.permissions" />
-            </div>
-
-            <div class="flex items-center space-x-2">
-              <label class="flex-none lowercase first-letter:capitalize w-1/4">icon</label>
-
-              <div class="flex items-center justify-between w-full">
-                <p class="text-3xl">
-                  <Icon :name="form.icon" class="dark:text-white" />
-                </p>
-
-                <p class="text-sm uppercase">{{ form.icon }}</p>
-                
-                <ButtonBlue @click.prevent="icon = true" type="button">
-                  <Icon name="edit" />
-                  <p class="uppercase font-semibold">change</p>
-                </ButtonBlue>
-              </div>
-            </div>
-          </div>
-        </template>
-
-        <template #footer>
-          <div class="flex items-center justify-end space-x-2 bg-gray-200 dark:bg-gray-800 py-1 px-2">
-            <ButtonGreen type="submit">
-              <Icon name="check" />
-              <p class="uppercase font-semibold">{{ form.id ? 'update' : 'create' }}</p>
-            </ButtonGreen>
+          <div class="flex-wrap p-4">
+            <Icon v-for="(icx, i) in icons.filter(icx => icx.includes(search.trim().toLocaleLowerCase()))" :key="i" @click.prevent="form.icon = icx; icon = false" :name="icx" class="m-1 text-5xl px-2 py-1 text-gray-800 bg-gray-200 hover:bg-gray-100 dark:text-white dark:bg-gray-600 dark:hover:bg-gray-700 rounded-md cursor-pointer transition-all" />
           </div>
         </template>
       </Card>
-    </form>
-  </Modal>
-
-  <Modal :show="icon">
-    <Card class="bg-gray-50 dark:bg-gray-700 dark:text-gray-100 w-full max-w-xl sm:max-w-5xl max-h-96 overflow-auto">
-      <template #header>
-        <div class="flex items-center space-x-2 p-2 justify-end bg-gray-200 dark:bg-gray-800 sticky top-0 left-0">
-          <input type="search" v-model="search" class="py-1 w-full bg-white dark:bg-transparent rounded-md text-sm uppercase" placeholder="search something">
-          <Icon @click.prevent="icon = false" name="times" class="px-2 py-1 bg-gray-300 hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 rounded-md transition-all cursor-pointer" />
-        </div>
-      </template>
-
-      <template #body>
-        <div class="flex-wrap p-4">
-          <Icon v-for="(icx, i) in icons.filter(icx => icx.includes(search.trim().toLocaleLowerCase()))" :key="i" @click.prevent="form.icon = icx; icon = false" :name="icx" class="m-1 text-5xl px-2 py-1 text-gray-800 bg-gray-200 hover:bg-gray-100 dark:text-white dark:bg-gray-600 dark:hover:bg-gray-700 rounded-md cursor-pointer transition-all" />
-        </div>
-      </template>
-    </Card>
-  </Modal>
+    </Modal>
+  </DashboardLayout>
 </template>
\ No newline at end of file
diff --git a/resources/js/Pages/Superuser/Permission/Index.vue b/resources/js/Pages/Superuser/Permission/Index.vue
index 3d3f062..5bb339d 100644
--- a/resources/js/Pages/Superuser/Permission/Index.vue
+++ b/resources/js/Pages/Superuser/Permission/Index.vue
@@ -139,39 +139,39 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
         </div>
       </template>
     </Card>
-  </DashboardLayout>
-  
-  <Modal :show="open">
-    <form @submit.prevent="submit" class="w-full max-w-xl h-fit shadow-xl">
-      <Card class="bg-gray-50 dark:bg-gray-700 dark:text-gray-100 border dark:border-gray-700">
-        <template #header>
-          <div class="flex items-center space-x-2 justify-end bg-gray-200 dark:bg-gray-800 dark:text-gray-50 p-2">
-            <Close @click.prevent="close" />
-          </div>
-        </template>
 
-        <template #body>
-          <div class="flex flex-col space-y-4 p-4">
-            <div class="flex flex-col space-y-2">
-              <div class="flex items-center space-x-2">
-                <label for="name" class="lowercase first-letter:capitalize flex-none w-1/4">name</label>
-                <Input v-model="form.name" type="text" placeholder="name" required autofocus />
-              </div>
-              
-              <InputError :error="form.errors.name" />
+    <Modal :show="open">
+      <form @submit.prevent="submit" class="w-full max-w-xl h-fit shadow-xl">
+        <Card class="bg-gray-50 dark:bg-gray-700 dark:text-gray-100 border dark:border-gray-700">
+          <template #header>
+            <div class="flex items-center space-x-2 justify-end bg-gray-200 dark:bg-gray-800 dark:text-gray-50 p-2">
+              <Close @click.prevent="close" />
             </div>
-          </div>
-        </template>
+          </template>
 
-        <template #footer>
-          <div class="flex items-center space-x-2 justify-end bg-gray-200 dark:bg-gray-800 text-white px-2 py-1">
-            <ButtonGreen type="submit">
-              <Icon name="check" />
-              <p class="uppercase font-semibold">{{ form.id ? 'update' : 'create' }}</p>
-            </ButtonGreen>
-          </div>
-        </template>
-      </Card>
-    </form>
-  </Modal>
+          <template #body>
+            <div class="flex flex-col space-y-4 p-4">
+              <div class="flex flex-col space-y-2">
+                <div class="flex items-center space-x-2">
+                  <label for="name" class="lowercase first-letter:capitalize flex-none w-1/4">name</label>
+                  <Input v-model="form.name" type="text" placeholder="name" required autofocus />
+                </div>
+                
+                <InputError :error="form.errors.name" />
+              </div>
+            </div>
+          </template>
+
+          <template #footer>
+            <div class="flex items-center space-x-2 justify-end bg-gray-200 dark:bg-gray-800 text-white px-2 py-1">
+              <ButtonGreen type="submit">
+                <Icon name="check" />
+                <p class="uppercase font-semibold">{{ form.id ? 'update' : 'create' }}</p>
+              </ButtonGreen>
+            </div>
+          </template>
+        </Card>
+      </form>
+    </Modal>
+  </DashboardLayout>
 </template>
\ No newline at end of file
diff --git a/resources/js/Pages/Superuser/Role/Index.vue b/resources/js/Pages/Superuser/Role/Index.vue
index ae41c9e..2e79e37 100644
--- a/resources/js/Pages/Superuser/Role/Index.vue
+++ b/resources/js/Pages/Superuser/Role/Index.vue
@@ -135,110 +135,114 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
             </template>
 
             <template #tbody="{ data, processing, empty, refresh }">
-              <transition-group
+              <TransitionGroup
                 enterActiveClass="transition-all duration-300"
                 leaveActiveClass="transition-all duration-100"
                 enterFromClass="opacity-0"
                 leaveToClass="opacity-0">
-                <template v-if="processing">
-                  <tr v-for="i in Array(1).fill(0)" :key="i">
+                <template v-if="empty">
+                  <tr v-if="empty">
+                    <td class="text-5xl text-center p-4" colspan="1000">
+                      <p class="lowercase first-letter:capitalize font-semibold">there are no data available</p>
+                    </td>
                   </tr>
                 </template>
 
                 <template v-else>
-                  <tr v-for="(role, i) in data" :key="i" class="dark:hover:bg-gray-600 transition-all duration-300">
-                    <td class="px-2 py-1 border dark:border-gray-800 text-center">{{ i + 1 }}</td>
-                    <td class="px-2 py-1 border dark:border-gray-800 uppercase">{{ role.name }}</td>
-                    <td class="px-2 py-1 border dark:border-gray-800">
-                      <div class="flex-wrap">
-                        <div v-for="(permission, j) in role.permissions" :key="j" class="inline-block bg-gray-200 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-900 border dark:border-gray-700 dark:hover:border-gray-800 rounded-md px-3 py-1 m-[1px] text-sm">
-                          <div class="flex items-center justify-between space-x-2">
-                            <p class="uppercase font-semibold">{{ permission.name }}</p>
+                  <template v-if="processing">
+                    <tr v-for="i in Array(1).fill(0)" :key="i">
+                    </tr>
+                  </template>
 
-                            <Icon @click.prevent="detach(role, permission, refresh)" v-if="can('update role')" name="times" class="px-2 py-1 rounded-md bg-red-500 dark:bg-gray-700 transition-all hover:bg-red-600 text-white cursor-pointer" />
+                  <template v-else>
+                    <tr v-for="(role, i) in data" :key="i" class="dark:hover:bg-gray-600 transition-all duration-300">
+                      <td class="px-2 py-1 border dark:border-gray-800 text-center">{{ i + 1 }}</td>
+                      <td class="px-2 py-1 border dark:border-gray-800 uppercase">{{ role.name }}</td>
+                      <td class="px-2 py-1 border dark:border-gray-800">
+                        <div class="flex-wrap">
+                          <div v-for="(permission, j) in role.permissions" :key="j" class="inline-block bg-gray-200 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-900 border dark:border-gray-700 dark:hover:border-gray-800 rounded-md px-3 py-1 m-[1px] text-sm">
+                            <div class="flex items-center justify-between space-x-2">
+                              <p class="uppercase font-semibold">{{ permission.name }}</p>
+
+                              <Icon @click.prevent="detach(role, permission, refresh)" v-if="can('update role')" name="times" class="px-2 py-1 rounded-md bg-red-500 dark:bg-gray-700 transition-all hover:bg-red-600 text-white cursor-pointer" />
+                            </div>
                           </div>
                         </div>
-                      </div>
-                    </td>
-                    <td class="px-2 py-1 border dark:border-gray-800">
-                      <div class="flex items-center space-x-2">
-                        <ButtonBlue v-if="can('update role')" @click.prevent="edit(role)">
-                          <Icon name="edit" />
-                          <p class="uppercase">edit</p>
-                        </ButtonBlue>
+                      </td>
+                      <td class="px-2 py-1 border dark:border-gray-800">
+                        <div class="flex items-center space-x-2">
+                          <ButtonBlue v-if="can('update role')" @click.prevent="edit(role)">
+                            <Icon name="edit" />
+                            <p class="uppercase">edit</p>
+                          </ButtonBlue>
 
-                        <ButtonRed v-if="can('delete role')" @click.prevent="destroy(role)">
-                          <Icon name="trash" />
-                          <p class="uppercase">delete</p>
-                        </ButtonRed>
-                      </div>
-                    </td>
-                  </tr>
+                          <ButtonRed v-if="can('delete role')" @click.prevent="destroy(role)">
+                            <Icon name="trash" />
+                            <p class="uppercase">delete</p>
+                          </ButtonRed>
+                        </div>
+                      </td>
+                    </tr>
+                  </template>
                 </template>
-
-                <tr v-if="empty">
-                  <td class="text-5xl text-center p-4" colspan="1000">
-                    <p class="lowercase first-letter:capitalize font-semibold">there are no data available</p>
-                  </td>
-                </tr>
-              </transition-group>
+              </TransitionGroup>
             </template>
           </Builder>
         </div>
       </template>
     </Card>
+    
+    <Modal :show="open">
+      <form @submit.prevent="submit" class="w-full max-w-xl h-fit shadow-xl">
+        <Card class="bg-gray-50 dark:bg-gray-700 dark:text-gray-100">
+          <template #header>
+            <div class="flex items-center justify-end bg-gray-200 dark:bg-gray-800 p-2">
+              <Close @click.prevent="close" />
+            </div>
+          </template>
+
+          <template #body>
+            <div class="flex flex-col space-y-4 p-4">
+              <div class="flex flex-col space-y-2">
+                <div class="flex items-center space-x-2">
+                  <label for="name" class="w-1/3 lowercase first-letter:capitalize">name</label>
+                  <Input v-model="form.name" type="text" name="name" placeholder="name" required autofocus />
+                </div>
+
+                <InputError :error="form.errors.name" />
+              </div>
+
+              <div class="flex flex-col space-y-2">
+                <div class="flex items-center space-x-2">
+                  <label for="permissions" class="w-1/3 lowercase first-letter:capitalize">permissions</label>
+                  <Select
+                    v-model="form.permissions"
+                    :options="permissions.map(p => ({
+                      label: p.name,
+                      value: p.id,
+                    }))"
+                    :searchable="true"
+                    :clearOnSelect="false"
+                    :closeOnSelect="false"
+                    class="text-gray-800 uppercase"
+                    mode="tags" />
+                </div>
+
+                <InputError :error="form.errors.permissions" />
+              </div>
+            </div>
+          </template>
+
+          <template #footer>
+            <div class="flex items-center justify-end space-x-2 bg-gray-200 dark:bg-gray-800 px-2 py-1">
+              <ButtonGreen type="submit">
+                <Icon name="check" />
+                <p class="uppercase font-semibold">{{ form.id ? 'update' : 'create' }}</p>
+              </ButtonGreen>
+            </div>
+          </template>
+        </Card>
+      </form>
+    </Modal>
   </DashboardLayout>
-
-  <Modal :show="open">
-    <form @submit.prevent="submit" class="w-full max-w-xl h-fit shadow-xl">
-      <Card class="bg-gray-50 dark:bg-gray-700 dark:text-gray-100">
-        <template #header>
-          <div class="flex items-center justify-end bg-gray-200 dark:bg-gray-800 p-2">
-            <Close @click.prevent="close" />
-          </div>
-        </template>
-
-        <template #body>
-          <div class="flex flex-col space-y-4 p-4">
-            <div class="flex flex-col space-y-2">
-              <div class="flex items-center space-x-2">
-                <label for="name" class="w-1/3 lowercase first-letter:capitalize">name</label>
-                <Input v-model="form.name" type="text" name="name" placeholder="name" required autofocus />
-              </div>
-
-              <InputError :error="form.errors.name" />
-            </div>
-
-            <div class="flex flex-col space-y-2">
-              <div class="flex items-center space-x-2">
-                <label for="permissions" class="w-1/3 lowercase first-letter:capitalize">permissions</label>
-                <Select
-                  v-model="form.permissions"
-                  :options="permissions.map(p => ({
-                    label: p.name,
-                    value: p.id,
-                  }))"
-                  :searchable="true"
-                  :clearOnSelect="false"
-                  :closeOnSelect="false"
-                  class="text-gray-800 uppercase"
-                  mode="tags" />
-              </div>
-
-              <InputError :error="form.errors.permissions" />
-            </div>
-          </div>
-        </template>
-
-        <template #footer>
-          <div class="flex items-center justify-end space-x-2 bg-gray-200 dark:bg-gray-800 px-2 py-1">
-            <ButtonGreen type="submit">
-              <Icon name="check" />
-              <p class="uppercase font-semibold">{{ form.id ? 'update' : 'create' }}</p>
-            </ButtonGreen>
-          </div>
-        </template>
-      </Card>
-    </form>
-  </Modal>
 </template>
\ No newline at end of file
diff --git a/resources/js/Pages/Superuser/User/Index.vue b/resources/js/Pages/Superuser/User/Index.vue
index b51e053..eae56df 100644
--- a/resources/js/Pages/Superuser/User/Index.vue
+++ b/resources/js/Pages/Superuser/User/Index.vue
@@ -179,180 +179,184 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
                 leaveActiveClass="transition-all duration-50"
                 enterFromClass="opacity-0 -scale-y-100"
                 leaveToClass="opacity-0 -scale-y-100">
-                <template v-if="processing">
-                  <tr v-for="i in Array(5).fill(0)" :key="i" class="border dark:border-gray-800">
-                    <td class="text-5xl text-center p-2" colspan="1000">
-                      <div class="lowercase first-letter:capitalize font-semibold dark:bg-gray-800 animate-pulse p-5 rounded-md"></div>
+                <template v-if="empty">
+                  <tr v-if="empty">
+                    <td class="text-5xl text-center p-4" colspan="1000">
+                      <p class="lowercase first-letter:capitalize font-semibold">there are no data available</p>
                     </td>
                   </tr>
                 </template>
 
                 <template v-else>
-                  <tr v-for="(user, i) in data" :key="i" class="dark:hover:bg-gray-600 transition-all duration-300">
-                    <td class="px-2 py-1 border dark:border-gray-800 text-center">{{ i + 1 }}</td>
-                    <td class="px-2 py-1 border dark:border-gray-800 uppercase">{{ user.name }}</td>
-                    <td class="px-2 py-1 border dark:border-gray-800 uppercase">{{ user.username }}</td>
-                    <td class="px-2 py-1 border dark:border-gray-800 uppercase">{{ user.email }}</td>
-                    <td class="px-2 py-1 border dark:border-gray-800">
-                      <div class="flex-wrap">
-                        <div v-for="(permission, j) in user.permissions" :key="j" class="inline-block bg-gray-600 rounded-md px-3 py-1 m-[1px] text-sm">
-                          <div class="flex items-center justify-between space-x-1">
-                            <p class="uppercase font-semibold">{{ permission.name }}</p>
+                  <template v-if="processing">
+                    <tr v-for="i in Array(5).fill(0)" :key="i" class="border dark:border-gray-800">
+                      <td class="text-5xl text-center p-2" colspan="1000">
+                        <div class="lowercase first-letter:capitalize font-semibold dark:bg-gray-800 animate-pulse p-5 rounded-md"></div>
+                      </td>
+                    </tr>
+                  </template>
 
-                            <Icon @click.prevent="detachPermission(user, permission)" v-if="can('update user')" name="times" class="px-2 py-1 rounded-md dark:bg-gray-700 transition-all hover:bg-red-500 cursor-pointer" />
+                  <template v-else>
+                    <tr v-for="(user, i) in data" :key="i" class="dark:hover:bg-gray-600 transition-all duration-300">
+                      <td class="px-2 py-1 border dark:border-gray-800 text-center">{{ i + 1 }}</td>
+                      <td class="px-2 py-1 border dark:border-gray-800 uppercase">{{ user.name }}</td>
+                      <td class="px-2 py-1 border dark:border-gray-800 uppercase">{{ user.username }}</td>
+                      <td class="px-2 py-1 border dark:border-gray-800 uppercase">{{ user.email }}</td>
+                      <td class="px-2 py-1 border dark:border-gray-800">
+                        <div class="flex-wrap">
+                          <div v-for="(permission, j) in user.permissions" :key="j" class="inline-block bg-gray-600 rounded-md px-3 py-1 m-[1px] text-sm">
+                            <div class="flex items-center justify-between space-x-1">
+                              <p class="uppercase font-semibold">{{ permission.name }}</p>
+
+                              <Icon @click.prevent="detachPermission(user, permission)" v-if="can('update user')" name="times" class="px-2 py-1 rounded-md dark:bg-gray-700 transition-all hover:bg-red-500 cursor-pointer" />
+                            </div>
                           </div>
                         </div>
-                      </div>
-                    </td>
-                    <td class="px-2 py-1 border dark:border-gray-800">
-                      <div class="flex-wrap">
-                        <div v-for="(role, j) in user.roles" :key="j" class="inline-block dark:bg-gray-800 dark:hover:bg-gray-900 border dark:border-gray-800 rounded-md px-3 py-1 m-[1px] text-sm transition-all">
-                          <div class="flex items-center justify-between space-x-2">
-                            <p class="uppercase font-semibold">{{ role.name }}</p>
+                      </td>
+                      <td class="px-2 py-1 border dark:border-gray-800">
+                        <div class="flex-wrap">
+                          <div v-for="(role, j) in user.roles" :key="j" class="inline-block dark:bg-gray-800 dark:hover:bg-gray-900 border dark:border-gray-800 rounded-md px-3 py-1 m-[1px] text-sm transition-all">
+                            <div class="flex items-center justify-between space-x-2">
+                              <p class="uppercase font-semibold">{{ role.name }}</p>
 
-                            <Icon @click.prevent="detachRole(user, role)" v-if="can('update user')" name="times" class="px-2 py-1 rounded-md dark:bg-gray-700 transition-all hover:bg-red-500 cursor-pointer" />
+                              <Icon @click.prevent="detachRole(user, role)" v-if="can('update user')" name="times" class="px-2 py-1 rounded-md dark:bg-gray-700 transition-all hover:bg-red-500 cursor-pointer" />
+                            </div>
                           </div>
                         </div>
-                      </div>
-                    </td>
-                    <td class="px-2 py-1 border dark:border-gray-800 uppercase">{{ new Date(user.email_verified_at).toLocaleString('id') }}</td>
-                    <td class="px-2 py-1 border dark:border-gray-800 uppercase">{{ new Date(user.created_at).toLocaleString('id') }}</td>
-                    <td class="px-2 py-1 border dark:border-gray-800 uppercase">{{ new Date(user.updated_at).toLocaleString('id') }}</td>
-                    <td class="px-2 py-1 border dark:border-gray-800">
-                      <div class="flex items-center space-x-2">
-                        <ButtonBlue v-if="can('update user')" @click.prevent="edit(user)">
-                          <Icon name="edit" />
-                          <p class="uppercase">edit</p>
-                        </ButtonBlue>
+                      </td>
+                      <td class="px-2 py-1 border dark:border-gray-800 uppercase">{{ new Date(user.email_verified_at).toLocaleString('id') }}</td>
+                      <td class="px-2 py-1 border dark:border-gray-800 uppercase">{{ new Date(user.created_at).toLocaleString('id') }}</td>
+                      <td class="px-2 py-1 border dark:border-gray-800 uppercase">{{ new Date(user.updated_at).toLocaleString('id') }}</td>
+                      <td class="px-2 py-1 border dark:border-gray-800">
+                        <div class="flex items-center space-x-2">
+                          <ButtonBlue v-if="can('update user')" @click.prevent="edit(user)">
+                            <Icon name="edit" />
+                            <p class="uppercase">edit</p>
+                          </ButtonBlue>
 
-                        <ButtonRed v-if="can('delete user')" @click.prevent="destroy(user)">
-                          <Icon name="trash" />
-                          <p class="uppercase">delete</p>
-                        </ButtonRed>
-                      </div>
-                    </td>
-                  </tr>
+                          <ButtonRed v-if="can('delete user')" @click.prevent="destroy(user)">
+                            <Icon name="trash" />
+                            <p class="uppercase">delete</p>
+                          </ButtonRed>
+                        </div>
+                      </td>
+                    </tr>
+                  </template>
                 </template>
-
-                <tr v-if="empty">
-                  <td class="text-5xl text-center p-4" colspan="1000">
-                    <p class="lowercase first-letter:capitalize font-semibold">there are no data available</p>
-                  </td>
-                </tr>
               </transition-group>
             </template>
           </Builder>
         </div>
       </template>
     </Card>
+
+    <Modal :show="open">
+      <form @submit.prevent="submit" class="w-full max-w-xl sm:max-w-5xl h-fit shadow-xl">
+        <Card class="bg-gray-50 dark:bg-gray-700 dark:text-gray-100">
+          <template #header>
+            <div class="flex items-center justify-end bg-gray-200 dark:bg-gray-800 p-2">
+              <Close @click.prevent="close" />
+            </div>
+          </template>
+
+          <template #body>
+            <div class="flex flex-col space-y-4 p-4">
+              <div class="flex flex-col space-y-2">
+                <div class="flex items-center space-x-2">
+                  <label for="name" class="w-1/3 lowercase first-letter:capitalize">name</label>
+                  <Input v-model="form.name" type="text" name="name" placeholder="name" required autofocus />
+                </div>
+
+                <InputError :error="form.errors.name" />
+              </div>
+
+              <div class="flex flex-col space-y-2">
+                <div class="flex items-center space-x-2">
+                  <label for="username" class="w-1/3 lowercase first-letter:capitalize">username</label>
+                  <Input v-model="form.username" type="text" name="username" placeholder="username" required />
+                </div>
+
+                <InputError :error="form.errors.username" />
+              </div>
+
+              <div class="flex flex-col space-y-2">
+                <div class="flex items-center space-x-2">
+                  <label for="email" class="w-1/3 lowercase first-letter:capitalize">email</label>
+                  <Input v-model="form.email" type="email" name="email" placeholder="email" required />
+                </div>
+
+                <InputError :error="form.errors.email" />
+              </div>
+
+              <div class="flex flex-col space-y-2">
+                <div class="flex items-center space-x-2">
+                  <label for="password" class="w-1/3 lowercase first-letter:capitalize">password</label>
+                  <Input v-model="form.password" type="password" name="password" placeholder="password" :required="form.id === null" />
+                </div>
+
+                <InputError :error="form.errors.password" />
+              </div>
+
+              <div class="flex flex-col space-y-2">
+                <div class="flex items-center space-x-2">
+                  <label for="password_confirmation" class="w-1/3 lowercase first-letter:capitalize">password confirmation</label>
+                  <Input v-model="form.password_confirmation" type="password" name="password_confirmation" placeholder="password confirmation" :required="form.id === null" />
+                </div>
+
+                <InputError :error="form.errors.password_confirmation" />
+              </div>
+
+              <div class="flex flex-col space-y-2">
+                <div class="flex items-center space-x-2">
+                  <label for="permissions" class="w-1/3 lowercase first-letter:capitalize">permissions</label>
+                  <Select
+                    v-model="form.permissions"
+                    :options="permissions.map(p => ({
+                      label: p.name,
+                      value: p.id,
+                    }))"
+                    :clearOnSelect="false"
+                    :closeOnSelect="false"
+                    :searchable="true"
+                    class="text-gray-800 uppercase"
+                    mode="tags" />
+                </div>
+
+                <InputError :error="form.errors.permissions" />
+              </div>
+
+              <div class="flex flex-col space-y-2">
+                <div class="flex items-center space-x-2">
+                  <label for="roles" class="w-1/3 lowercase first-letter:capitalize">roles</label>
+                  <Select
+                    v-model="form.roles"
+                    :options="roles.map(r => ({
+                      label: r.name,
+                      value: r.id,
+                    }))"
+                    :searchable="true"
+                    :clearOnSelect="false"
+                    :closeOnSelect="false"
+                    class="text-gray-800 uppercase"
+                    mode="tags" />
+                </div>
+
+                <InputError :error="form.errors.roles" />
+              </div>
+            </div>
+          </template>
+
+          <template #footer>
+            <div class="flex items-center justify-end space-x-2 bg-gray-200 dark:bg-gray-800 px-2 py-1">
+              <ButtonGreen type="submit">
+                <Icon name="check" />
+
+                <p class="uppercase font-semibold">{{ form.id ? 'update' : 'create' }}</p>
+              </ButtonGreen>
+            </div>
+          </template>
+        </Card>
+      </form>
+    </Modal>
   </DashboardLayout>
-
-  <Modal :show="open">
-    <form @submit.prevent="submit" class="w-full max-w-xl sm:max-w-5xl h-fit shadow-xl">
-      <Card class="bg-gray-50 dark:bg-gray-700 dark:text-gray-100">
-        <template #header>
-          <div class="flex items-center justify-end bg-gray-200 dark:bg-gray-800 p-2">
-            <Close @click.prevent="close" />
-          </div>
-        </template>
-
-        <template #body>
-          <div class="flex flex-col space-y-4 p-4">
-            <div class="flex flex-col space-y-2">
-              <div class="flex items-center space-x-2">
-                <label for="name" class="w-1/3 lowercase first-letter:capitalize">name</label>
-                <Input v-model="form.name" type="text" name="name" placeholder="name" required autofocus />
-              </div>
-
-              <InputError :error="form.errors.name" />
-            </div>
-
-            <div class="flex flex-col space-y-2">
-              <div class="flex items-center space-x-2">
-                <label for="username" class="w-1/3 lowercase first-letter:capitalize">username</label>
-                <Input v-model="form.username" type="text" name="username" placeholder="username" required />
-              </div>
-
-              <InputError :error="form.errors.username" />
-            </div>
-
-            <div class="flex flex-col space-y-2">
-              <div class="flex items-center space-x-2">
-                <label for="email" class="w-1/3 lowercase first-letter:capitalize">email</label>
-                <Input v-model="form.email" type="email" name="email" placeholder="email" required />
-              </div>
-
-              <InputError :error="form.errors.email" />
-            </div>
-
-            <div class="flex flex-col space-y-2">
-              <div class="flex items-center space-x-2">
-                <label for="password" class="w-1/3 lowercase first-letter:capitalize">password</label>
-                <Input v-model="form.password" type="password" name="password" placeholder="password" :required="form.id === null" />
-              </div>
-
-              <InputError :error="form.errors.password" />
-            </div>
-
-            <div class="flex flex-col space-y-2">
-              <div class="flex items-center space-x-2">
-                <label for="password_confirmation" class="w-1/3 lowercase first-letter:capitalize">password confirmation</label>
-                <Input v-model="form.password_confirmation" type="password" name="password_confirmation" placeholder="password confirmation" :required="form.id === null" />
-              </div>
-
-              <InputError :error="form.errors.password_confirmation" />
-            </div>
-
-            <div class="flex flex-col space-y-2">
-              <div class="flex items-center space-x-2">
-                <label for="permissions" class="w-1/3 lowercase first-letter:capitalize">permissions</label>
-                <Select
-                  v-model="form.permissions"
-                  :options="permissions.map(p => ({
-                    label: p.name,
-                    value: p.id,
-                  }))"
-                  :clearOnSelect="false"
-                  :closeOnSelect="false"
-                  :searchable="true"
-                  class="text-gray-800 uppercase"
-                  mode="tags" />
-              </div>
-
-              <InputError :error="form.errors.permissions" />
-            </div>
-
-            <div class="flex flex-col space-y-2">
-              <div class="flex items-center space-x-2">
-                <label for="roles" class="w-1/3 lowercase first-letter:capitalize">roles</label>
-                <Select
-                  v-model="form.roles"
-                  :options="roles.map(r => ({
-                    label: r.name,
-                    value: r.id,
-                  }))"
-                  :searchable="true"
-                  :clearOnSelect="false"
-                  :closeOnSelect="false"
-                  class="text-gray-800 uppercase"
-                  mode="tags" />
-              </div>
-
-              <InputError :error="form.errors.roles" />
-            </div>
-          </div>
-        </template>
-
-        <template #footer>
-          <div class="flex items-center justify-end space-x-2 bg-gray-200 dark:bg-gray-800 px-2 py-1">
-            <ButtonGreen type="submit">
-              <Icon name="check" />
-
-              <p class="uppercase font-semibold">{{ form.id ? 'update' : 'create' }}</p>
-            </ButtonGreen>
-          </div>
-        </template>
-      </Card>
-    </form>
-  </Modal>
 </template>
\ No newline at end of file