diff --git a/app/Http/Middleware/HandleInertiaRequests.php b/app/Http/Middleware/HandleInertiaRequests.php
index 3867f22..12b6f4e 100644
--- a/app/Http/Middleware/HandleInertiaRequests.php
+++ b/app/Http/Middleware/HandleInertiaRequests.php
@@ -27,13 +27,27 @@ class HandleInertiaRequests extends Middleware
      *
      * @return array<string, mixed>
      */
+    // public function share(Request $request): array
+    // {
+    //     return [
+    //         ...parent::share($request),
+    //         'auth' => [
+    //             'user' => $request->user(),
+    //         ],
+    //     ];
+    // }
+
     public function share(Request $request): array
     {
-        return [
-            ...parent::share($request),
+        return array_merge(parent::share($request), [
             'auth' => [
-                'user' => $request->user(),
+                'user' => $request->user() ? [
+                    'id' => $request->user()->id,
+                    'name' => $request->user()->name,
+                    'permissions' => $request->user()->getPermissionArray(), // Kirim permissions
+                ] : null,
             ],
-        ];
+        ]);
     }
+
 }
diff --git a/app/Http/Requests/RoleRequest.php b/app/Http/Requests/RoleRequest.php
index 5619589..f49087c 100644
--- a/app/Http/Requests/RoleRequest.php
+++ b/app/Http/Requests/RoleRequest.php
@@ -11,7 +11,7 @@ class RoleRequest extends FormRequest
      */
     public function authorize(): bool
     {
-        return false;
+        return true;
     }
 
     /**
diff --git a/app/Models/User.php b/app/Models/User.php
index b99dbcf..36a1207 100644
--- a/app/Models/User.php
+++ b/app/Models/User.php
@@ -46,4 +46,16 @@ class User extends Authenticatable /*implements MustVerifyEmail*/
             'password' => 'hashed',
         ];
     }
+
+    public function getPermissionArray()
+    {
+
+    return $this->getAllPermissions()->mapWithKeys(function ($permission) {
+        return [$permission->name => true];
+    })->toArray();
+
+    }
+
+
+
 }
diff --git a/bootstrap/app.php b/bootstrap/app.php
index ac0a023..73d4576 100644
--- a/bootstrap/app.php
+++ b/bootstrap/app.php
@@ -13,7 +13,6 @@ return Application::configure(basePath: dirname(__DIR__))
     )
     ->withMiddleware(function (Middleware $middleware) {
         $middleware->web(append: [
-            \App\Http\Middleware\HandleInertiaRequests::class,
             \Illuminate\Http\Middleware\AddLinkHeadersForPreloadedAssets::class,
             HandleInertiaRequests::class,
         ]);
@@ -22,6 +21,7 @@ return Application::configure(basePath: dirname(__DIR__))
             'role' => \Spatie\Permission\Middleware\RoleMiddleware::class,
             'permission' => \Spatie\Permission\Middleware\PermissionMiddleware::class,
             'role_or_permission' => \Spatie\Permission\Middleware\RoleOrPermissionMiddleware::class,
+            //'auth' => \App\Http\Middleware\HandleInertiaRequests::class,//harus nya gini sih, karena di route nya lu pake middleware auth
         ]);
     })
     ->withExceptions(function (Exceptions $exceptions) {
diff --git a/resources/js/pages/admin/roles/index_roles.jsx b/resources/js/pages/admin/roles/index_roles.jsx
new file mode 100644
index 0000000..9044f49
--- /dev/null
+++ b/resources/js/pages/admin/roles/index_roles.jsx
@@ -0,0 +1,157 @@
+import AuthenticatedLayout from "@/layouts/authenticated-layout";
+import { Head, usePage, router } from "@inertiajs/react";
+import React, { useState } from "react";
+import hasAnyPermission from "@/utils/hasAnyPermission";
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import Pagination from "@/components/pagination";
+
+export default function RolesIndex() {
+    const { roles } = usePage().props;
+    const [dialogOpen, setDialogOpen] = useState(false);
+    const [roleToDelete, setRoleToDelete] = useState(null);
+
+    const handleDelete = (id) => {
+        setRoleToDelete(id);
+        setDialogOpen(true);
+    };
+
+    const confirmDelete = () => {
+        router.delete(`/admin/roles/${roleToDelete}`, {
+            onSuccess: () => {
+                setDialogOpen(false);
+                setRoleToDelete(null);
+            },
+        });
+    };
+
+    return (
+        <AuthenticatedLayout header="Kelompok Pengguna">
+            <Head title="Kelompok Pengguna" />
+
+            <div className="container mx-auto p-4">
+                <div className="row mb-3">
+                    <div className="col-md-12">
+                        <div className="d-flex justify-content-between align-items-center">
+                            {hasAnyPermission(["Roles.index"]) && (
+                                <Link
+                                    href="/admin/role/create"
+                                    className="btn btn-success"
+                                >
+                                    <i className="bi bi-plus-circle-fill me-2"></i>
+                                    Add Role
+                                </Link>
+                            )}
+                        </div>
+                    </div>
+                </div>
+
+                <div className="card border rounded">
+                    <div className="card-body p-0">
+                        <div className="table-responsive p-4">
+                            <table className="table align-middle">
+                                <thead className="table-light">
+                                    <tr>
+                                        <th scope="col" className="text-center">
+                                            No.
+                                        </th>
+                                        <th scope="col">Role Name</th>
+                                        <th scope="col">Permissions</th>
+                                        <th scope="col" className="text-center">
+                                            Actions
+                                        </th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    {roles.data.map((role, index) => (
+                                        <tr key={role.id}>
+                                            <td className="text-center">
+                                                {index +
+                                                    1 +
+                                                    (roles.current_page - 1) *
+                                                        roles.per_page}
+                                            </td>
+                                            <td>{role.name}</td>
+                                            <td>
+                                                <div className="d-flex flex-wrap gap-1">
+                                                    {role.permissions.map(
+                                                        (permission, i) => (
+                                                            <span
+                                                                key={i}
+                                                                className="badge bg-success text-white badge-lg"
+                                                            >
+                                                                {
+                                                                    permission.name
+                                                                }
+                                                            </span>
+                                                        )
+                                                    )}
+                                                </div>
+                                            </td>
+                                            <td className="text-center">
+                                                {/* {hasAnyPermission([
+                                                    "roles.edit",
+                                                ]) && ( */}
+                                                <Link
+                                                    href={`/admin/roles/${role.id}/edit`}
+                                                    className="btn btn-primary btn-md me-2"
+                                                >
+                                                    <i className="bi bi-pencil"></i>{" "}
+                                                    Edit
+                                                </Link>
+                                                {/* )} */}
+                                                {/* {hasAnyPermission([
+                                                    "roles.delete",
+                                                ]) && ( */}
+                                                <button
+                                                    onClick={() =>
+                                                        handleDelete(role.id)
+                                                    }
+                                                    className="btn btn-danger btn-md"
+                                                >
+                                                    <i className="bi bi-trash"></i>{" "}
+                                                    Delete
+                                                </button>
+                                                {/* )} */}
+                                            </td>
+                                        </tr>
+                                    ))}
+                                </tbody>
+                            </table>
+                        </div>
+                        <Pagination links={roles.links} />
+                    </div>
+                </div>
+            </div>
+
+            <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+                <DialogContent>
+                    <DialogHeader>
+                        <DialogTitle>Apakah Anda yakin?</DialogTitle>
+                        <DialogDescription>
+                            Data ini akan dihapus secara permanen!
+                        </DialogDescription>
+                    </DialogHeader>
+                    <DialogFooter>
+                        <Button
+                            variant="outline"
+                            onClick={() => setDialogOpen(false)}
+                        >
+                            Batal
+                        </Button>
+                        <Button variant="destructive" onClick={confirmDelete}>
+                            Ya, hapus!
+                        </Button>
+                    </DialogFooter>
+                </DialogContent>
+            </Dialog>
+        </AuthenticatedLayout>
+    );
+}
diff --git a/resources/js/pages/admin/users/index_users.tsx b/resources/js/pages/admin/users/index_users.tsx
new file mode 100644
index 0000000..e69de29