create loading and handle from js create edit and delete roles

resources/views/components/modal-confirmation.blade.php

@@ -0,0 +1,17 @@
+@props(['buttonText' => 'Confirm', 'confirmationMessage' => 'Are you sure?'])
+
+<div class="modal fade" id="modalConfirmation" tabindex="-1"
+    aria-labelledby="modalConfirmationTitle" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content">
+            <div class="modal-body">
+                <p class="confirmation-message">{{$confirmationMessage}}</p>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary"
+                    data-bs-dismiss="modal" id="btnCloseModal">Close</button>
+                <button type="button" class="btn btn-primary" id="btnSaveConfirmation">{{$buttonText}}</button>
+            </div>
+        </div>
+    </div>
+</div>

resources/views/components/toast-notification.blade.php

@@ -0,0 +1,14 @@
+<div class="toast-container position-fixed end-0 top-0 p-3">
+    <div id="toastNotification" class="toast align-items-center" role="alert" aria-live="assertive" aria-atomic="true">
+        <div class="toast-header">
+            <div class="auth-logo me-auto">
+            </div>
+            <small class="text-muted">{{now()->format("Y-m-d H:i:s")}}</small>
+            <button type="button" class="btn-close" data-bs-dismiss="toast"
+                aria-label="Close"></button>
+        </div>
+        <div class="toast-body">
+            <p id="toast-message"></p>
+        </div>
+    </div>
+</div>