Fixed Link navbar

app/Components/Permission/Index.php

@@ -8,7 +8,7 @@ use Spatie\Permission\Models\Permission;
 class Index extends Component
 {
     use WithPagination;
-
+    protected string $paginationTheme = 'bootstrap';
     public $search = '';
     protected $listeners = ['permissionSaved' => '$refresh'];
 

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

@@ -1,47 +1,61 @@
-<div class="p-4">
+<div class="row">
-    <div class="flex justify-between mb-4">
+    <div class="col-12">
-        <input
+        <div class="card mb-4">
-            type="text"
+            <div class="card-header pb-0 d-flex justify-content-between align-items-center">
-            wire:model.debounce.300ms="search"
+                <h6>Permissions</h6>
-            placeholder="Search permissions..."
+
-            class="border p-2"
+                {{-- Nếu muốn có nút Search --}}
-        >
+                <div class="input-group input-group-sm w-auto">
-        <a href="{{ route('permissions.create') }}" class="btn btn-primary">
+                    <input type="text" wire:model.debounce.500ms="search" wire:keydown.enter="resetPage"
-            New Permission
+                        class="form-control" placeholder="Search permissions...">
-        </a>
+                    <button class="btn btn-outline-secondary" type="button" wire:click.prevent="$refresh">
+                        <i class="fa-solid fa-magnifying-glass"></i>
+                    </button>
                 </div>
 
+                <a href="{{ route('permissions.create') }}" class="btn btn-sm btn-primary">
+                    + New
+                </a>
+            </div>
+            <div class="card-body p-3">
                 @if (session()->has('message'))
-        <div class="alert alert-success mb-2">{{ session('message') }}</div>
+                    <div class="alert alert-success">{{ session('message') }}</div>
                 @endif
 
-    <table class="w-full table-auto border-collapse border">
+                <div class="table-responsive">
+                    <table class="table align-items-center mb-0">
                         <thead>
                             <tr>
-                <th class="border px-2 py-1">ID</th>
+                                <th class="text-center">ID</th>
-                <th class="border px-2 py-1">Name</th>
+                                <th>Name</th>
-                <th class="border px-2 py-1">Actions</th>
+                                <th class="text-center">Actions</th>
                             </tr>
                         </thead>
                         <tbody>
-        @foreach($permissions as $p)
+                            @forelse($permissions as $p)
                                 <tr>
-                <td class="border px-2 py-1">{{ $p->id }}</td>
+                                    <td class="text-center">{{ $p->id }}</td>
-                <td class="border px-2 py-1">{{ $p->name }}</td>
+                                    <td>{{ $p->name }}</td>
-                <td class="border px-2 py-1">
+                                    <td class="text-center">
-                    <a
+                                        <a href="{{ route('permissions.edit', $p) }}"
-                      href="{{ route('permissions.edit', $p) }}"
+                                            class="btn btn-sm btn-info">Edit</a>
-                      class="text-blue-600"
+                                        <button wire:click="delete({{ $p->id }})"
-                    >Edit</a>
+                                            class="btn btn-sm btn-danger">Delete</button>
-                    <button
-                      wire:click="delete({{ $p->id }})"
-                      class="text-red-600 ml-2"
-                    >Delete</button>
                                     </td>
                                 </tr>
-        @endforeach
+                            @empty
+                                <tr>
+                                    <td colspan="3" class="text-center">No permissions found.</td>
+                                </tr>
+                            @endforelse
                         </tbody>
                     </table>
+                </div>
 
-    <div class="mt-4">{{ $permissions->links() }}</div>
+                <div class="mt-3">
+                    {{ $permissions->links() }}
+                </div>
+            </div>
+        </div>
+    </div>
 </div>

resources/views/layouts/app.blade.php

@@ -15,7 +15,8 @@
     <link href="https://fonts.googleapis.com/css?family=Inter:300,400,500,600,700,800" rel="stylesheet">
     <link href="{{ asset('soft-ui/assets/css/nucleo-icons.css') }}" rel="stylesheet">
     <link href="{{ asset('soft-ui/assets/css/nucleo-svg.css') }}" rel="stylesheet">
-    <script src="https://kit.fontawesome.com/42d5adcbca.js" crossorigin="anonymous"></script>
+    {{-- <script src="https://kit.fontawesome.com/42d5adcbca.js" crossorigin="anonymous"></script> --}}
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">
 
     {{-- CSS --}}
     <link id="pagestyle" href="{{ asset('soft-ui/assets/css/soft-ui-dashboard.css?v=1.1.0') }}" rel="stylesheet">

resources/views/layouts/partials/sidebar.blade.php

@@ -20,7 +20,7 @@
 
             <!-- Dashboard -->
             <li class="nav-item">
-                <a class="nav-link active" href="{{ asset('soft-ui/pages/dashboard.html') }}">
+                <a class="nav-link active" href="{{ route('dashboard') }}">
                     <div
                         class="icon icon-shape icon-sm shadow border-radius-md bg-white text-center me-2 d-flex align-items-center justify-content-center">
                         <svg width="12px" height="12px" viewBox="0 0 45 40" version="1.1"
@@ -48,7 +48,7 @@
 
             <!-- Permissions -->
             <li class="nav-item">
-                <a class="nav-link" href="{{ asset('soft-ui/pages/tables.html') }}">
+                <a class="nav-link" href="{{ route('permissions.index') }}">
                     <div
                         class="icon icon-shape icon-sm shadow border-radius-md bg-white text-center me-2 d-flex align-items-center justify-content-center">
                         <svg width="12px" height="12px" viewBox="0 0 42 42" version="1.1"