role listing

resources/views/roles/index.blade.php

@@ -0,0 +1,42 @@
+<x-app-layout>
+    <x-slot name="header">
+        <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
+            {{ __('Roles') }}
+        </h2>
+    </x-slot>
+
+    <div class="py-12">
+        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
+            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
+                <div
+                    class="p-6"
+                    x-data="{
+                        loading: false,
+                        async paginate(url) {
+                            this.loading = true;
+                            const response = await fetch(url, {
+                                headers: { 'X-Requested-With': 'XMLHttpRequest' }
+                            });
+                            this.$refs.tableContainer.innerHTML = await response.text();
+                            this.loading = false;
+                        }
+                    }"
+                    @click.prevent="
+                        const link = $event.target.closest('a[href]');
+                        if (link && $refs.tableContainer.contains(link)) {
+                            paginate(link.href);
+                        }
+                    "
+                >
+                    <div x-show="loading" class="text-center py-4 text-gray-500 dark:text-gray-400">
+                        {{ __('Loading...') }}
+                    </div>
+
+                    <div x-ref="tableContainer" x-show="!loading">
+                        @include('roles._table')
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</x-app-layout>