create loading and handle from js create edit and delete roles

resources/js/roles/create.js

@@ -0,0 +1,55 @@
+document.addEventListener("DOMContentLoaded", function (e) {
+    const toastNotification = document.getElementById("toastNotification");
+    const toast = new bootstrap.Toast(toastNotification);
+    document
+        .getElementById("btnCreateRole")
+        .addEventListener("click", async function () {
+            let submitButton = this;
+            let spinner = document.getElementById("spinner");
+            let form = document.getElementById("formCreateRole");
+
+            if (!form) {
+                console.error("Form element not found!");
+                return;
+            }
+            // Get form data
+            let formData = new FormData(form);
+
+            // Disable button and show spinner
+            submitButton.disabled = true;
+            spinner.classList.remove("d-none");
+
+            try {
+                let response = await fetch(form.action, {
+                    method: "POST",
+                    headers: {
+                        "X-CSRF-TOKEN": document
+                            .querySelector('meta[name="csrf-token"]')
+                            .getAttribute("content"),
+                    },
+                    body: formData,
+                });
+
+                if (response.ok) {
+                    let result = await response.json();
+                    document.getElementById("toast-message").innerText =
+                        result.message;
+                    toast.show();
+                    setTimeout(() => {
+                        window.location.href = "/roles";
+                    }, 2000);
+                } else {
+                    let error = await response.json();
+                    document.getElementById("toast-message").innerText =
+                        error.message;
+                    toast.show();
+                    console.error("Error:", error);
+                }
+            } catch (error) {
+                console.error("Request failed:", error);
+                document.getElementById("toast-message").innerText =
+                    error.message;
+                toast.show();
+            }
+        });
+});

resources/js/roles/index.js

@@ -67,11 +67,37 @@ class Roles {
     handleDelete(event) {
         if (event.target.classList.contains("btn-delete-role")) {
             event.preventDefault();
-            const id = event.target.getAttribute("data-id");
 
-            if (confirm("Are you sure you want to delete this item?")) {
-                fetch(`/roles/${id}`, {
+            const id = event.target.getAttribute("data-id");
+            let modalElement = document.getElementById("modalConfirmation");
+
+            if (!modalElement) {
+                console.error("Modal element not found!");
+                return;
+            }
+
+            let modal = new bootstrap.Modal(modalElement);
+
+            // Set the role ID on the confirm button inside the modal
+            let btnSaveConfirmation = document.getElementById(
+                "btnSaveConfirmation"
+            );
+            btnSaveConfirmation.setAttribute("data-role-id", id);
+
+            let toastElement = document.getElementById("toastNotificationApi");
+            let toast = new bootstrap.Toast(toastElement);
+
+            // Show the modal
+            modal.show();
+
+            // Prevent multiple event listeners
+            btnSaveConfirmation.onclick = function () {
+                let roleId = this.getAttribute("data-role-id");
+                console.log("Deleted ID:", roleId);
+
+                fetch(`/roles/${roleId}`, {
                     method: "DELETE",
+                    credentials: "include",
                     headers: {
                         "X-CSRF-TOKEN": document
                             .querySelector('meta[name="csrf-token"]')
@@ -81,21 +107,21 @@ class Roles {
                 })
                     .then((response) => {
                         if (response.ok) {
-                            alert("Item deleted successfully!");
-                            window.location.reload();
+                            modal.hide();
+                            toast.show();
+                            setTimeout(() => window.location.reload(), 1500);
                         } else {
                             return response.json().then((error) => {
-                                throw new Error(
-                                    error.message || "Failed to delete item."
-                                );
+                                console.error("Delete failed:", error);
+                                toast.show();
                             });
                         }
                     })
                     .catch((error) => {
                         console.error("Error deleting item:", error);
-                        alert("Something went wrong. Please try again.");
+                        toast.show();
                     });
-            }
+            };
         }
     }
 }

resources/js/roles/update.js

@@ -0,0 +1,53 @@
+document.addEventListener("DOMContentLoaded", function (e) {
+    let form = document.getElementById("formUpdateRole");
+    let submitButton = document.getElementById("btnUpdateRole");
+    let spinner = document.getElementById("spinner");
+    let toastMessage = document.getElementById("toast-message");
+    let toast = new bootstrap.Toast(
+        document.getElementById("toastNotification")
+    );
+    submitButton.addEventListener("click", async function () {
+        let submitButton = this;
+
+        if (!form) {
+            console.error("Form element not found!");
+            return;
+        }
+        // Get form data
+        let formData = new FormData(form);
+
+        // Disable button and show spinner
+        submitButton.disabled = true;
+        spinner.classList.remove("d-none");
+
+        try {
+            let response = await fetch(form.action, {
+                method: "POST",
+                headers: {
+                    "X-CSRF-TOKEN": document
+                        .querySelector('meta[name="csrf-token"]')
+                        .getAttribute("content"),
+                },
+                body: formData,
+            });
+
+            if (response.ok) {
+                let result = await response.json();
+                toastMessage.innerText = result.message;
+                toast.show();
+                setTimeout(() => {
+                    window.location.href = "/roles";
+                }, 2000);
+            } else {
+                let error = await response.json();
+                toastMessage.innerText = error.message;
+                toast.show();
+                console.error("Error:", error);
+            }
+        } catch (error) {
+            console.error("Request failed:", error);
+            toastMessage.innerText = error.message;
+            toast.show();
+        }
+    });
+});

resources/scss/structure/_general.scss

@@ -3,128 +3,141 @@
 //
 
 .app-wrapper {
-     height: 100%;
-     margin: 0 auto;
-     position: relative;
+    height: 100%;
+    margin: 0 auto;
+    position: relative;
 }
 
 // Main Content
 .page-content {
-     position: relative;
-     transition: all 0.3s ease-in-out;
-     min-height: calc(100vh - $topbar-height);
-     padding: calc($spacer * 1) calc($spacer * 0.5) $footer-height calc($spacer * 0.5);
-     margin-left: $sidebar-width;
+    position: relative;
+    transition: all 0.3s ease-in-out;
+    min-height: calc(100vh - $topbar-height);
+    padding: calc($spacer * 1) calc($spacer * 0.5) $footer-height
+        calc($spacer * 0.5);
+    margin-left: $sidebar-width;
 }
 
-
 // Animated Star
 $shooting-time: 3000ms;
 
 .animated-stars {
-     position: relative;
-     width: 100%;
-     height: 100%;
-     transform: rotateZ(45deg);
+    position: relative;
+    width: 100%;
+    height: 100%;
+    transform: rotateZ(45deg);
 }
 
 .shooting-star {
-     position: absolute;
-     left: 50%;
-     top: 50%;
-     height: 2px;
-     background: linear-gradient(-45deg, rgba(95, 145, 255, 1), rgba(0, 0, 255, 0));
-     border-radius: 999px;
-     filter: drop-shadow(0 0 6px rgba(105, 155, 255, 1));
-     animation:
-          tail $shooting-time ease-in-out infinite,
-          shooting $shooting-time ease-in-out infinite;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    height: 2px;
+    background: linear-gradient(
+        -45deg,
+        rgba(95, 145, 255, 1),
+        rgba(0, 0, 255, 0)
+    );
+    border-radius: 999px;
+    filter: drop-shadow(0 0 6px rgba(105, 155, 255, 1));
+    animation: tail $shooting-time ease-in-out infinite,
+        shooting $shooting-time ease-in-out infinite;
 
-     &::before {
-          content: '';
-          position: absolute;
-          top: calc(50% - 1px);
-          right: 0;
-          height: 2px;
-          background: linear-gradient(-45deg, rgba(0, 0, 255, 0), rgba(95, 145, 255, 1), rgba(0, 0, 255, 0));
-          transform: translateX(50%) rotateZ(45deg);
-          border-radius: 100%;
-          animation: shining $shooting-time ease-in-out infinite;
-     }
+    &::before {
+        content: "";
+        position: absolute;
+        top: calc(50% - 1px);
+        right: 0;
+        height: 2px;
+        background: linear-gradient(
+            -45deg,
+            rgba(0, 0, 255, 0),
+            rgba(95, 145, 255, 1),
+            rgba(0, 0, 255, 0)
+        );
+        transform: translateX(50%) rotateZ(45deg);
+        border-radius: 100%;
+        animation: shining $shooting-time ease-in-out infinite;
+    }
 
-     &::after {
-          content: '';
-          position: absolute;
-          top: calc(50% - 1px);
-          right: 0;
-          height: 2px;
-          background: linear-gradient(-45deg, rgba(0, 0, 255, 0), rgba(95, 145, 255, 1), rgba(0, 0, 255, 0));
-          transform: translateX(50%) rotateZ(45deg);
-          border-radius: 100%;
-          animation: shining $shooting-time ease-in-out infinite;
-          transform: translateX(50%) rotateZ(-45deg);
-     }
+    &::after {
+        content: "";
+        position: absolute;
+        top: calc(50% - 1px);
+        right: 0;
+        height: 2px;
+        background: linear-gradient(
+            -45deg,
+            rgba(0, 0, 255, 0),
+            rgba(95, 145, 255, 1),
+            rgba(0, 0, 255, 0)
+        );
+        transform: translateX(50%) rotateZ(45deg);
+        border-radius: 100%;
+        animation: shining $shooting-time ease-in-out infinite;
+        transform: translateX(50%) rotateZ(-45deg);
+    }
 
-     @for $i from 1 through 20 {
-          &:nth-child(#{$i}) {
-               $delay: random(9999) + 0ms;
-               top: calc(50% - #{random(400) - 200px});
-               left: calc(50% - #{random(300) + 0px});
-               animation-delay: $delay;
-               // opacity: random(50) / 100 + 0.5;
+    @for $i from 1 through 20 {
+        &:nth-child(#{$i}) {
+            $delay: random(9999) + 0ms;
+            top: calc(50% - #{random(400) - 200px});
+            left: calc(50% - #{random(300) + 0px});
+            animation-delay: $delay;
+            // opacity: random(50) / 100 + 0.5;
 
-               &::before,
-               &::after {
-                    animation-delay: $delay;
-               }
-          }
-     }
+            &::before,
+            &::after {
+                animation-delay: $delay;
+            }
+        }
+    }
 }
 
 @keyframes tail {
-     0% {
-          width: 0;
-     }
+    0% {
+        width: 0;
+    }
 
-     30% {
-          width: 100px;
-     }
+    30% {
+        width: 100px;
+    }
 
-     100% {
-          width: 0;
-     }
+    100% {
+        width: 0;
+    }
 }
 
 @keyframes shining {
-     0% {
-          width: 0;
-     }
+    0% {
+        width: 0;
+    }
 
-     50% {
-          width: 30px;
-     }
+    50% {
+        width: 30px;
+    }
 
-     100% {
-          width: 0;
-     }
+    100% {
+        width: 0;
+    }
 }
 
 @keyframes shooting {
-     0% {
-          transform: translateX(0);
-     }
+    0% {
+        transform: translateX(0);
+    }
 
-     100% {
-          transform: translateX(300px);
-     }
+    100% {
+        transform: translateX(300px);
+    }
 }
 
 @keyframes sky {
-     0% {
-          transform: rotate(45deg);
-     }
+    0% {
+        transform: rotate(45deg);
+    }
 
-     100% {
-          transform: rotate(45 + 360deg);
-     }
-}
+    100% {
+        transform: rotate(45 + 360deg);
+    }
+}

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>

resources/views/data-settings/index.blade.php

@@ -9,11 +9,13 @@
 @include('layouts.partials/page-title', ['title' => 'Data Settings', 'subtitle' => 'Setting Dashboard'])
 
 <div class="row">
-	<div class="d-flex justify-content-end pb-3">
-		<a href="{{ route('data-settings.create')}}" class="btn btn-success width-lg">Create</a>
-	</div>
-	<div>
-		<div id="table-data-settings"></div>
+	<div class="card w-full">
+		<div class="card-body">
+			<div class="d-flex justify-content-end pb-3">
+				<a href="{{ route('data-settings.create')}}" class="btn btn-success width-lg">Create</a>
+			</div>
+			<div id="table-data-settings"></div>
+		</div>
 	</div>
 </div>
 

resources/views/master/users/index.blade.php

@@ -9,12 +9,13 @@
 @include('layouts.partials/page-title', ['title' => 'Master', 'subtitle' => 'Users'])
 
 <div class="row">
-    <div class="d-flex justify-content-end pb-3">
-        <a href="{{ route('users.create')}}" class="btn btn-success width-lg">Create</a>
-    </div>
-    {{$users}}
-    <div>
-        <div id="table-users"></div>
+    <div class="card w-full">
+        <div class="card-body">
+            <div class="d-flex justify-content-end pb-3">
+                <a href="{{ route('users.create')}}" class="btn btn-success width-lg">Create</a>
+            </div>
+            <div id="table-users"></div>
+        </div>
     </div>
 </div>
 

resources/views/menus/index.blade.php

@@ -9,11 +9,15 @@
 @include('layouts.partials/page-title', ['title' => 'Settings', 'subtitle' => 'Menu'])
 
 <div class="row">
-    <div class="d-flex justify-content-end pb-3">
-        <a href="{{ route('menus.create')}}" class="btn btn-success width-lg">Create</a>
-    </div>
-    <div>
-        <div id="table-menus"></div>
+    <div class="card w-full">
+        <div class="card-body">
+            <div class="d-flex justify-content-end pb-3">
+                <a href="{{ route('menus.create')}}" class="btn btn-success width-lg">Create</a>
+            </div>
+            <div>
+                <div id="table-menus"></div>
+            </div>
+        </div>
     </div>
 </div>
 

resources/views/pbg_task/index.blade.php

@@ -9,11 +9,13 @@
 @include('layouts.partials/page-title', ['title' => 'Data', 'subtitle' => 'PBG'])
 
 <div class="row">
-  <div class="d-flex justify-content-end pb-3">
-		<a href="{{ route('pbg-task.create')}}" class="btn btn-success width-lg">Create</a>
-	</div>
-  <div>
-    <div id="table-pbg-tasks"></div>
+  <div class="card w-full">
+    <div class="card-body">
+      <div class="d-flex justify-content-end pb-3">
+        <a href="{{ route('pbg-task.create')}}" class="btn btn-success width-lg">Create</a>
+      </div>
+      <div id="table-pbg-tasks"></div>
+    </div>
   </div>
 </div>
 

resources/views/roles/create.blade.php

@@ -4,11 +4,12 @@
 
 @include('layouts.partials/page-title', ['title' => 'Settings', 'subtitle' => 'Role'])
 
+<x-toast-notification />
 <div class="row d-flex justify-content-center">
     <div class="col-md-6">
         <div class="card">
             <div class="card-body">
-                <form action="{{route("roles.store")}}" method="post">
+                <form action="{{route("roles.store")}}" method="post" id="formCreateRole" data-redirect="{{route("roles.index")}}">
                     @csrf
                     <div class="mb-3">
                         <label class="form-label" for="name">Name</label>
@@ -20,7 +21,10 @@
                         <input type="text" id="description" name="description"
                                 class="form-control" placeholder="Enter description">
                     </div>
-                    <button type="submit" class="btn btn-success">Create</button>
+                    <button class="btn btn-primary me-1" type="button" id="btnCreateRole">
+                        <span id="spinner" class="spinner-border spinner-border-sm me-1 d-none" role="status" aria-hidden="true"></span>
+                        Create
+                    </button>
                 </form>
             </div>
         </div>
@@ -28,3 +32,7 @@
 </div>
 
 @endsection
+
+@section('scripts')
+@vite(['resources/js/roles/create.js'])
+@endsection

resources/views/roles/edit.blade.php

@@ -4,11 +4,12 @@
 
 @include('layouts.partials/page-title', ['title' => 'Settings', 'subtitle' => 'Role'])
 
+<x-toast-notification/>
 <div class="row d-flex justify-content-center">
     <div class="col-md-6">
         <div class="card">
             <div class="card-body">
-                <form action="{{route("roles.update", $role->id)}}" method="post">
+                <form id="formUpdateRole" action="{{route("roles.update", $role->id)}}" method="post" >
                     @csrf
                     @method("put")
                     <div class="mb-3">
@@ -21,7 +22,10 @@
                         <input type="text" id="description" name="description"
                                 class="form-control" placeholder="Enter description" value="{{$role->description}}">
                     </div>
-                    <button type="submit" class="btn btn-success">Update</button>
+                    <button class="btn btn-primary me-1" type="button" id="btnUpdateRole">
+                        <span id="spinner" class="spinner-border spinner-border-sm me-1 d-none" role="status" aria-hidden="true"></span>
+                        Update
+                    </button>
                 </form>
             </div>
         </div>
@@ -29,3 +33,6 @@
 </div>
 
 @endsection
+@section('scripts')
+@vite(['resources/js/roles/update.js'])
+@endsection

resources/views/roles/index.blade.php

@@ -8,12 +8,17 @@
 
 @include('layouts.partials/page-title', ['title' => 'Settings', 'subtitle' => 'Role'])
 
+<x-toast-notification/>
+<x-modal-confirmation buttonText="Delete" confirmationMessage="Are you sure you want to delete this?" />
+
 <div class="row">
-    <div class="d-flex justify-content-end pb-3">
-        <a href="{{ route('roles.create')}}" class="btn btn-success width-lg">Create</a>
-    </div>
-    <div>
-        <div id="table-roles"></div>
+    <div class="card w-full">
+        <div class="card-body">
+            <div class="d-flex justify-content-end pb-3">
+                <a href="{{ route('roles.create')}}" class="btn btn-success width-lg">Create</a>
+            </div>
+            <div id="table-roles"></div>
+        </div>
     </div>
 </div>
 

resources/views/settings/general/index.blade.php

@@ -9,11 +9,13 @@
 @include('layouts.partials/page-title', ['title' => 'Settings', 'subtitle' => 'General'])
 
 <div class="row">
-  <div class="d-flex justify-content-end pb-3">
-    <a href="{{ route('general.create') }}" class="btn btn-success width-lg">Create</a>
-  </div>
-  <div>
-    <div id="general-setting-table"></div>
+  <div class="card w-full">
+    <div class="card-body">
+      <div class="d-flex justify-content-end pb-3">
+        <a href="{{ route('general.create') }}" class="btn btn-success width-lg">Create</a>
+      </div>
+      <div id="general-setting-table"></div>
+    </div>
   </div>
 </div>
 

resources/views/settings/syncronize/index.blade.php

@@ -9,12 +9,16 @@
 @include('layouts.partials/page-title', ['title' => 'Settings', 'subtitle' => 'Syncronize'])
 
 <div class="row">
-    <div class="col-md-12 col-xl-12 d-flex justify-content-end">
-        <button type="button" class="btn btn-success" style="margin-right: 20px;" id="btn-sync-submit-google-sheet">Sync Google Sheet</button>
-        <button type="button" class="btn btn-success" id="btn-sync-submit">Sync SIMBG</button>
-    </div>
-    <div>
-        <div id="table-import-datasources"></div>
+    <div class="card w-full">
+        <div class="card-body">
+            <div class="col-md-12 col-xl-12 d-flex justify-content-end">
+                <button type="button" class="btn btn-success" style="margin-right: 20px;" id="btn-sync-submit-google-sheet">Sync Google Sheet</button>
+                <button type="button" class="btn btn-success" id="btn-sync-submit">Sync SIMBG</button>
+            </div>
+            <div>
+                <div id="table-import-datasources"></div>
+            </div>
+        </div>
     </div>
 </div>