Add Permission

resources/views/components/permission/form.blade.php

@@ -1,20 +1,40 @@
-<div class="p-4 max-w-md">
+<div class="row justify-content-center">
+    <div class="col-lg col-md-8">
+        <div class="card mb-4">
+            {{-- Card Header --}}
+            <div class="card-header pb-0">
+                <h6 class="mb-0">
+                    {{ $permissionId ? 'Edit Permission' : 'Create Permission' }}
+                </h6>
+            </div>
+            {{-- Card Body --}}
+            <div class="card-body">
                 @if (session()->has('message'))
-        <div class="alert alert-success mb-2">{{ session('message') }}</div>
+                    <div class="alert alert-success mb-3">
+                        {{ session('message') }}
+                    </div>
                 @endif
 
                 <form wire:submit.prevent="save">
-        <div class="mb-4">
-            <label class="block mb-1">Name</label>
-            <input
-                type="text"
-                wire:model.defer="name"
-                class="border p-2 w-full"
-            >
-            @error('name') <span class="text-red-600">{{ $message }}</span> @enderror
-        </div>
-        <button type="submit" class="btn btn-primary">
+                    <div class="mb-3">
+                        <label for="name" class="form-label">Name</label>
+                        <input id="name" type="text" wire:model.defer="name" class="form-control"
+                            placeholder="Enter permission name">
+                        @error('name')
+                            <div class="text-danger text-xs mt-1">{{ $message }}</div>
+                        @enderror
+                    </div>
+
+                    <div class="d-flex justify-content-end">
+                        <a href="{{ route('permissions.index') }}" class="btn btn-secondary btn-sm me-2">
+                            Cancel
+                        </a>
+                        <button type="submit" class="btn btn-primary btn-sm">
                             {{ $permissionId ? 'Update' : 'Create' }}
                         </button>
+                    </div>
                 </form>
             </div>
+        </div>
+    </div>
+</div>

resources/views/components/permission/index.blade.php

@@ -1,22 +1,25 @@
 <div class="row">
     <div class="col-12">
         <div class="card mb-4">
+            <!-- Card Header -->
             <div class="card-header pb-0 d-flex justify-content-between align-items-center">
-                <h6>Permissions</h6>
-
-                {{-- Nếu muốn có nút Search --}}
-                <div class="input-group input-group-sm w-auto">
+                <h6 class="mb-0">Permissions</h6>
+                <div class="d-flex align-items-center">
+                    {{-- Search field with Soft UI outline style --}}
+                    <div class="input-group input-group-outline me-2">
                         <input type="text" wire:model.debounce.500ms="search" wire:keydown.enter="resetPage"
                             class="form-control" placeholder="Search permissions...">
-                    <button class="btn btn-outline-secondary" type="button" wire:click.prevent="$refresh">
+                    </div>
+                    {{-- Search button --}}
+                    <button wire:click="resetPage" class="btn btn-sm btn-outline-secondary m-0" type="button">
                         <i class="fa-solid fa-magnifying-glass"></i>
                     </button>
+                    {{-- New Permission button --}}
+                    <a href="{{ route('permissions.create') }}" class="btn btn-sm btn-primary ms-2 m-0">Create</a>
                 </div>
-
-                <a href="{{ route('permissions.create') }}" class="btn btn-sm btn-primary">
-                    + New
-                </a>
             </div>
+
+            <!-- Card Body -->
             <div class="card-body p-3">
                 @if (session()->has('message'))
                     <div class="alert alert-success">{{ session('message') }}</div>
@@ -38,7 +41,7 @@
                                     <td>{{ $p->name }}</td>
                                     <td class="text-center">
                                         <a href="{{ route('permissions.edit', $p) }}"
-                                            class="btn btn-sm btn-info">Edit</a>
+                                            class="btn btn-sm btn-info me-1">Edit</a>
                                         <button wire:click="delete({{ $p->id }})"
                                             class="btn btn-sm btn-danger">Delete</button>
                                     </td>
@@ -52,8 +55,9 @@
                     </table>
                 </div>
 
+                {{-- Pagination --}}
                 <div class="mt-3">
-                    {{ $permissions->links() }}
+                    {{ $permissions->links('pagination::bootstrap-5') }}
                 </div>
             </div>
         </div>