Changed the project structure.

app/application/resources/views/private/roles/_from.blade.php

@@ -0,0 +1,7 @@
+@csrf
+<x-private.forms.input :title="__('validation.attributes.name')" name="name" type="text" :value="$role->name" required autofocus />
+<x-private.forms.permissions_for_role :title="__('validation.attributes.permissions')" name="permissions[]" :value="$role->permissions->pluck('permission')->toArray()" :role="$role" />
+<x-private.forms.input :title="__('validation.attributes.code')" name="code" type="text" :value="$role->code" :disabled="!empty($role->id)" required />
+@canany(['create', 'update'], $role)
+    <button class="btn btn-primary" type="submit">{{ __('Save') }}</button>
+@endcanany

app/application/resources/views/private/roles/_top.blade.php

@@ -0,0 +1,8 @@
+@can('create', \App\Models\Role::class)
+    <div class="mb-4">
+        <a href="{{ route('roles.create') }}" class="btn btn-secondary d-inline-flex align-items-center me-2">
+            <svg class="icon icon-xs me-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
+            {{ __('Create') }}
+        </a>
+    </div>
+@endcan

app/application/resources/views/private/roles/create.blade.php

@@ -0,0 +1,16 @@
+@section('meta_title', __('sections.User group'))
+@section('h1', __('sections.User group'))
+<x-private.layout>
+    @include('private.roles._top')
+    <div class="row">
+        <div class="col-12 mb-4">
+            <div class="card border-0 shadow components-section">
+                <div class="card-body">
+                    <form method="post" action="{{ route('roles.store') }}">
+                        @include('private.roles._from')
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+</x-private.layout>

app/application/resources/views/private/roles/edit.blade.php

@@ -0,0 +1,17 @@
+@section('meta_title', __('sections.User group'))
+@section('h1', __('sections.User group'))
+<x-private.layout>
+    @include('private.roles._top')
+    <div class="row">
+        <div class="col-12 mb-4">
+            <div class="card border-0 shadow components-section">
+                <div class="card-body">
+                    <form method="post" action="{{ route('roles.update', $role) }}">
+                        @method('PUT')
+                        @include('private.roles._from')
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+</x-private.layout>

app/application/resources/views/private/roles/index.blade.php

@@ -0,0 +1,54 @@
+@section('meta_title', __('sections.User group'))
+@section('h1', __('sections.User group'))
+<x-private.layout>
+    @include('private.roles._top')
+    <div class="card border-0 shadow mb-4">
+        <div class="card-body">
+            <div class="table-responsive">
+                <table class="table table-centered table-nowrap mb-0 rounded">
+                    <thead class="thead-light">
+                    <tr>
+                        <th class="border-0">{{ __('validation.attributes.name') }}</th>
+                        <th class="border-0">{{ __('validation.attributes.code') }}</th>
+                        <th class="border-0 rounded-end" style="width: 150px"></th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    @foreach($roles as $role)
+                        <tr>
+                            <td>
+                                <a href="{{ route('roles.edit', $role)  }}" class="fw-bold">
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="align-text-top" viewBox="0 0 16 16">
+                                        <path d="M12.854.146a.5.5 0 0 0-.707 0L10.5 1.793 14.207 5.5l1.647-1.646a.5.5 0 0 0 0-.708l-3-3zm.646 6.061L9.793 2.5 3.293 9H3.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.207l6.5-6.5zm-7.468 7.468A.5.5 0 0 1 6 13.5V13h-.5a.5.5 0 0 1-.5-.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.5-.5V10h-.5a.499.499 0 0 1-.175-.032l-.179.178a.5.5 0 0 0-.11.168l-2 5a.5.5 0 0 0 .65.65l5-2a.5.5 0 0 0 .168-.11l.178-.178z"/>
+                                    </svg>
+                                    {{ $role->name }}
+                                </a>
+                            </td>
+                            <td>{{ $role->code }}</td>
+                            <td>
+                                @if($role->is_remove)
+                                    @can('delete', $role)
+                                        <form method="post" action="{{ route('roles.destroy', $role) }}">
+                                            @csrf
+                                            @method('DELETE')
+                                            <button type="submit" class="btn btn-danger click-confirm">
+                                                {{ __('Delete') }}
+                                            </button>
+                                        </form>
+                                    @endcan
+                                @endif
+                            </td>
+                        </tr>
+                    @endforeach
+                    </tbody>
+                </table>
+                <div class="card-footer border-0">
+                    {{ $roles->links() }}
+                </div>
+            </div>
+        </div>
+    </div>
+    @push('scripts')
+        @include('private._scripts._click-confirm', ['alert' => __('Do you want to delete?')])
+    @endpush
+</x-private.layout>