fix loading all pages

app/Http/Controllers/DataSettingController.php

@@ -36,12 +36,13 @@ class DataSettingController extends Controller
             DB::beginTransaction();
             DataSetting::create($request->validated());
             DB::commit();
-            return redirect()->route("data-settings.index")->with("success","Successfully created");
+            return response()->json(['message' => 'Successfully created'],201);
         }catch(Exception $ex){
             DB::rollBack();
-            return redirect()->back()
+            return response()->json([
-            ->withInput()
+                'message' => 'Failed to create data setting',
-            ->with('error', 'Something went wrong while saving data. ' . $ex->getMessage());
+                'error' => $ex->getMessage()
+            ], 500);
         }
     }
 
@@ -79,12 +80,10 @@ class DataSettingController extends Controller
             $data = DataSetting::findOrFail($id);
             $data->update($request->validated());
             DB::commit();
-            return redirect()->route("data-settings.index")->with("success","Successfully updated");
+            return response()->json(['message' => 'Successfully updated'], 200);
         }catch(Exception $ex){
             DB::rollBack();
-            return redirect()->back()
+            return response()->json(['message' => $ex->getMessage()],500);
-            ->withInput()
-            ->with('error', 'Something went wrong while saving data. ' . $ex->getMessage());
         }
     }
 
@@ -97,7 +96,7 @@ class DataSettingController extends Controller
             DB::beginTransaction();
             DataSetting::findOrFail($id)->delete();
             DB::commit();
-            return response()->json(['success' => true, 'message' => 'Item deleted successfully.']);
+            return response()->json(['success' => true, 'message' => 'Item deleted successfully.'], 200);
         }catch(Exception $e){
             DB::rollBack();
             Log::error($e->getMessage());

app/Http/Controllers/Master/UsersController.php

@@ -53,10 +53,10 @@ class UsersController extends Controller
             $user->roles()->attach($request->role_id);
 
             DB::commit();
-            return redirect()->route('users.index')->with('success','Successfully registered');
+            return response()->json(['message' => 'Successfully created'],201);
         }catch(\Exception $e){
             DB::rollBack();
-            return redirect()->back()->with("error", $e->getMessage());
+            return response()->json(['message' => $e->getMessage()],500);
         };
     }
     public function show($id){
@@ -90,10 +90,10 @@ class UsersController extends Controller
             $user->update($updateData);
             $user->roles()->sync([$request->role_id]);
             DB::commit();
-            return redirect()->route('users.index')->with('success', 'Successfully');
+            return response()->json(['message' => 'Successfully updated'],200);
         }catch(\Exception $e){
             DB::rollBack();
-            return redirect()->back()->with("error", $e->getMessage());
+            return response()->json(['message' => $e->getMessage()],500);
         }
     }
     public function destroy($id){

app/Http/Controllers/MenusController.php

@@ -47,13 +47,11 @@ class MenusController extends Controller
                'sort_order' => $request->sort_order,
             ]);
             DB::commit();
-            return redirect()->route('menus.index')->with('success','Success created menu');
+            return response()->json(['message' => 'Successfully created'], 200);
         }catch(\Exception $e){
             DB::rollBack();
             \Log::error('Menu creation failed: ' . $e->getMessage()); // Log the error for debugging
-            return redirect()->back()
+            return response()->json(['message'=> $e->getMessage()],500);
-            ->withInput()
-            ->withErrors('Something went wrong! Please try again.');
         }
 
     }
@@ -95,13 +93,11 @@ class MenusController extends Controller
             DB::beginTransaction();
             $menu->update($validateData);
             DB::commit();
-            return redirect()->route('menus.index')->with('success','Successfully updated');
+            return response()->json(['message' => 'Successfully updated'], 200);
         }catch(\Exception $e){
             DB::rollBack();
             \Log::error('Menu update failed: '. $e->getMessage()); // Log the error for debugging
-            return redirect()->back()
+            return response()->json(['message' => $e->getMessage()],500);
-            ->withInput()
-            ->withErrors('Something went wrong! Please try again.');
         }
     }
 

app/Http/Controllers/RolesController.php

@@ -98,12 +98,11 @@ class RolesController extends Controller
         try{
             DB::beginTransaction();
             $deleted = Role::findOrFail($id)->delete();
-            info("deleted". $deleted);
             DB::commit();
-            return response()->json(array('success' => true, "message" => "Successfully deleted"));
+            return response()->json(['success' => true, "message" => "Successfully deleted"]);
         }catch(\Exception $e){
             DB::rollBack();
-            return response()->json(array('success' => false, "message" => $e->getMessage()));
+            return response()->json(['success' => false, "message" => $e->getMessage()]);
         }
     }
 

resources/js/data-settings/create.js

@@ -0,0 +1,57 @@
+document.addEventListener("DOMContentLoaded", function (e) {
+    const toastNotification = document.getElementById("toastNotification");
+    const toast = new bootstrap.Toast(toastNotification);
+    document
+        .getElementById("btnCreateDataSettings")
+        .addEventListener("click", async function () {
+            let submitButton = this;
+            let spinner = document.getElementById("spinner");
+            let form = document.getElementById("formDataSettings");
+
+            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",
+                    credentials: "include",
+                    headers: {
+                        "X-CSRF-TOKEN": document
+                            .querySelector('meta[name="csrf-token"]')
+                            .getAttribute("content"),
+                        "Content-Type": "application/json",
+                    },
+                    body: formData,
+                });
+
+                if (response.ok) {
+                    let result = await response.json();
+                    document.getElementById("toast-message").innerText =
+                        result.message;
+                    toast.show();
+                    setTimeout(() => {
+                        window.location.href = "/data-settings";
+                    }, 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/data-settings/index.js

@@ -4,12 +4,45 @@ import "gridjs/dist/gridjs.umd.js";
 import GlobalConfig from "../global-config.js";
 
 class DataSettings {
+    constructor() {
+        this.table = null; // Store Grid.js instance
+    }
     init() {
         this.getFetchApiData();
     }
 
     getFetchApiData() {
-        const table = new Grid({
+        let tableContainer = document.getElementById("table-data-settings");
+
+        if (this.table) {
+            // If table exists, update its data instead of recreating
+            this.table
+                .updateConfig({
+                    server: {
+                        url: `${GlobalConfig.apiHost}/api/api-data-settings`,
+                        credentials: "include",
+                        headers: {
+                            Authorization: `Bearer ${document
+                                .querySelector('meta[name="api-token"]')
+                                .getAttribute("content")}`,
+                            "Content-Type": "application/json",
+                        },
+                        then: (data) =>
+                            data.data.map((item) => [
+                                item.id,
+                                item.key,
+                                item.value,
+                                item.created_at,
+                                item.id,
+                            ]),
+                        total: (data) => data.meta.total,
+                    },
+                })
+                .forceRender();
+            return;
+        }
+
+        this.table = new Grid({
             columns: [
                 "ID",
                 "Key",
@@ -62,43 +95,114 @@ class DataSettings {
                     ]),
                 total: (data) => data.meta.total,
             },
-        });
+        }).render(tableContainer);
-        table.render(document.getElementById("table-data-settings"));
 
-        document.addEventListener("click", this.handleDelete);
+        document.addEventListener("click", this.handleDelete.bind(this));
     }
     handleDelete(event) {
         if (event.target.classList.contains("btn-delete-data-settings")) {
             event.preventDefault();
             const id = event.target.getAttribute("data-id");
+            let modalElement = document.getElementById("modalConfirmation");
+            let toastMessage = document.getElementById("toast-message");
 
-            if (confirm("Are you sure you want to delete this item?")) {
+            if (!modalElement) {
-                fetch(`/data-settings/${id}`, {
+                console.error("Modal element not found!");
-                    method: "DELETE",
+                return;
-                    headers: {
+            }
-                        "X-CSRF-TOKEN": document
+
-                            .querySelector('meta[name="csrf-token"]')
+            let modal = new bootstrap.Modal(modalElement);
-                            .getAttribute("content"),
+            let btnSaveConfirmation = document.getElementById(
-                        "Content-Type": "application/json",
+                "btnSaveConfirmation"
+            );
+            let toastElement = document.getElementById("toastNotification");
+            let toast = new bootstrap.Toast(toastElement);
+
+            // Remove previous event listeners to avoid multiple bindings
+            btnSaveConfirmation.replaceWith(
+                btnSaveConfirmation.cloneNode(true)
+            );
+            btnSaveConfirmation = document.getElementById(
+                "btnSaveConfirmation"
+            );
+
+            // Set the role ID on the confirm button inside the modal
+            btnSaveConfirmation.setAttribute("data-settings-id", id);
+
+            // Show the modal
+            modal.show();
+
+            btnSaveConfirmation.addEventListener("click", async () => {
+                let dataSettingId =
+                    btnSaveConfirmation.getAttribute("data-settings-id");
+
+                try {
+                    let response = await fetch(
+                        `/data-settings/${dataSettingId}`,
+                        {
+                            method: "DELETE",
+                            credentials: "include",
+                            headers: {
+                                "X-CSRF-TOKEN": document
+                                    .querySelector('meta[name="csrf-token"]')
+                                    .getAttribute("content"),
+                                "Content-Type": "application/json",
+                            },
+                        }
+                    );
+
+                    if (response.ok) {
+                        let result = await response.json();
+                        toastMessage.innerText =
+                            result.message || "Deleted successfully!";
+                        toast.show();
+
+                        // Hide modal
+                        modal.hide();
+
+                        // Refresh Grid.js table
+                        this.refreshDataSettings();
+                    } else {
+                        let error = await response.json();
+                        console.error("Delete failed:", error);
+                        toastMessage.innerText =
+                            error.message || "Delete failed!";
+                        toast.show();
+                    }
+                } catch (error) {
+                    console.error("Error deleting item:", error);
+                    toastMessage.innerText = "An error occurred!";
+                    toast.show();
+                }
+            });
+        }
+    }
+
+    refreshDataSettings() {
+        if (this.table) {
+            this.table
+                .updateConfig({
+                    server: {
+                        url: `${GlobalConfig.apiHost}/api/api-data-settings`,
+                        credentials: "include",
+                        headers: {
+                            Authorization: `Bearer ${document
+                                .querySelector('meta[name="api-token"]')
+                                .getAttribute("content")}`,
+                            "Content-Type": "application/json",
+                        },
+                        then: (data) =>
+                            data.data.map((item) => [
+                                item.id,
+                                item.key,
+                                item.value,
+                                item.created_at,
+                                item.id,
+                            ]),
+                        total: (data) => data.meta.total,
                     },
                 })
-                    .then((response) => {
+                .forceRender();
-                        if (response.ok) {
-                            alert("Item deleted successfully!");
-                            window.location.reload();
-                        } else {
-                            return response.json().then((error) => {
-                                throw new Error(
-                                    error.message || "Failed to delete item."
-                                );
-                            });
-                        }
-                    })
-                    .catch((error) => {
-                        console.error("Error deleting item:", error);
-                        alert("Something went wrong. Please try again.");
-                    });
-            }
         }
     }
 }

resources/js/data-settings/update.js

@@ -0,0 +1,53 @@
+document.addEventListener("DOMContentLoaded", function (e) {
+    let form = document.getElementById("formUpdateDataSettings");
+    let submitButton = document.getElementById("btnUpdateDataSettings");
+    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 = "/data-settings";
+                }, 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/js/master/users/create.js

@@ -0,0 +1,55 @@
+document.addEventListener("DOMContentLoaded", function (e) {
+    const toastNotification = document.getElementById("toastNotification");
+    const toast = new bootstrap.Toast(toastNotification);
+    document
+        .getElementById("btnCreateUsers")
+        .addEventListener("click", async function () {
+            let submitButton = this;
+            let spinner = document.getElementById("spinner");
+            let form = document.getElementById("formCreateUsers");
+
+            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 = "/master/users";
+                    }, 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/master/users/update.js

@@ -0,0 +1,53 @@
+document.addEventListener("DOMContentLoaded", function (e) {
+    let form = document.getElementById("formUpdateUsers");
+    let submitButton = document.getElementById("btnUpdateUsers");
+    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 = "/master/users";
+                }, 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/js/menus/create.js

@@ -0,0 +1,55 @@
+document.addEventListener("DOMContentLoaded", function (e) {
+    const toastNotification = document.getElementById("toastNotification");
+    const toast = new bootstrap.Toast(toastNotification);
+    document
+        .getElementById("btnCreateMenus")
+        .addEventListener("click", async function () {
+            let submitButton = this;
+            let spinner = document.getElementById("spinner");
+            let form = document.getElementById("formCreateMenus");
+
+            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 = "/menus";
+                    }, 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/menus/index.js

@@ -4,12 +4,47 @@ import "gridjs/dist/gridjs.umd.js";
 import GlobalConfig from "../global-config";
 
 class Menus {
+    constructor() {
+        this.table = null;
+    }
     init() {
         this.initTableMenus();
     }
 
     initTableMenus() {
-        new Grid({
+        let tableContainer = document.getElementById("table-menus");
+
+        if (this.table) {
+            // If table exists, update its data instead of recreating
+            this.table
+                .updateConfig({
+                    server: {
+                        url: `${GlobalConfig.apiHost}/api/api-menus`,
+                        credentials: "include",
+                        headers: {
+                            Authorization: `Bearer ${document
+                                .querySelector('meta[name="api-token"]')
+                                .getAttribute("content")}`,
+                            "Content-Type": "application/json",
+                        },
+                        then: (data) =>
+                            data.data.map((item) => [
+                                item.id,
+                                item.name,
+                                item.url,
+                                item.icon,
+                                item.parent_id,
+                                item.sort_order,
+                                item.id,
+                            ]),
+                        total: (data) => data.total,
+                    },
+                })
+                .forceRender();
+            return;
+        }
+
+        this.table = new Grid({
             columns: [
                 "ID",
                 "Name",
@@ -63,43 +98,115 @@ class Menus {
                     ]),
                 total: (data) => data.total,
             },
-        }).render(document.getElementById("table-menus"));
+        }).render(tableContainer);
 
-        document.addEventListener("click", this.handleDelete);
+        document.addEventListener("click", this.handleDelete.bind(this));
     }
 
     handleDelete(event) {
         if (event.target.classList.contains("btn-delete-menu")) {
             event.preventDefault();
             const id = event.target.getAttribute("data-id");
+            let modalElement = document.getElementById("modalConfirmation");
+            let toastMessage = document.getElementById("toast-message");
 
-            if (confirm("Are you sure you want to delete this item?")) {
+            if (!modalElement) {
-                fetch(`/menus/${id}`, {
+                console.error("Modal element not found!");
-                    method: "DELETE",
+                return;
-                    headers: {
+            }
-                        "X-CSRF-TOKEN": document
+
-                            .querySelector('meta[name="csrf-token"]')
+            let modal = new bootstrap.Modal(modalElement);
-                            .getAttribute("content"),
+            let btnSaveConfirmation = document.getElementById(
-                        "Content-Type": "application/json",
+                "btnSaveConfirmation"
+            );
+            let toastElement = document.getElementById("toastNotification");
+            let toast = new bootstrap.Toast(toastElement);
+
+            // Remove previous event listeners to avoid multiple bindings
+            btnSaveConfirmation.replaceWith(
+                btnSaveConfirmation.cloneNode(true)
+            );
+            btnSaveConfirmation = document.getElementById(
+                "btnSaveConfirmation"
+            );
+
+            // Set the role ID on the confirm button inside the modal
+            btnSaveConfirmation.setAttribute("data-menu-id", id);
+
+            // Show the modal
+            modal.show();
+
+            btnSaveConfirmation.addEventListener("click", async () => {
+                let menuId = btnSaveConfirmation.getAttribute("data-menu-id");
+
+                try {
+                    let response = await fetch(`/menus/${menuId}`, {
+                        method: "DELETE",
+                        credentials: "include",
+                        headers: {
+                            "X-CSRF-TOKEN": document
+                                .querySelector('meta[name="csrf-token"]')
+                                .getAttribute("content"),
+                            "Content-Type": "application/json",
+                        },
+                    });
+
+                    if (response.ok) {
+                        let result = await response.json();
+                        toastMessage.innerText =
+                            result.message || "Deleted successfully!";
+                        toast.show();
+
+                        // Hide modal
+                        modal.hide();
+
+                        // Refresh Grid.js table
+                        this.refreshTableMenus();
+                    } else {
+                        let error = await response.json();
+                        console.error("Delete failed:", error);
+                        toastMessage.innerText =
+                            error.message || "Delete failed!";
+                        toast.show();
+                    }
+                } catch (error) {
+                    console.error("Error deleting item:", error);
+                    toastMessage.innerText = "An error occurred!";
+                    toast.show();
+                }
+            });
+        }
+    }
+
+    refreshTableMenus() {
+        if (this.table) {
+            this.table
+                .updateConfig({
+                    server: {
+                        url: `${GlobalConfig.apiHost}/api/api-menus`,
+                        credentials: "include",
+                        headers: {
+                            Authorization: `Bearer ${document
+                                .querySelector('meta[name="api-token"]')
+                                .getAttribute("content")}`,
+                            "Content-Type": "application/json",
+                        },
+                        then: (data) =>
+                            data.data.map((item) => [
+                                item.id,
+                                item.name,
+                                item.url,
+                                item.icon,
+                                item.parent_id,
+                                item.sort_order,
+                                item.id,
+                            ]),
+                        total: (data) => data.total,
                     },
                 })
-                    .then((response) => {
+                .forceRender();
-                        if (response.ok) {
+        } else {
-                            alert("Item deleted successfully!");
+            this.initTableMenus(); // If no table exists, reinitialize it
-                            window.location.reload();
-                        } else {
-                            return response.json().then((error) => {
-                                throw new Error(
-                                    error.message || "Failed to delete item."
-                                );
-                            });
-                        }
-                    })
-                    .catch((error) => {
-                        console.error("Error deleting item:", error);
-                        alert("Something went wrong. Please try again.");
-                    });
-            }
         }
     }
 }

resources/js/menus/update.js

@@ -0,0 +1,53 @@
+document.addEventListener("DOMContentLoaded", function (e) {
+    let form = document.getElementById("formUpdateMenus");
+    let submitButton = document.getElementById("btnUpdateMenus");
+    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 = "/menus";
+                }, 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/js/roles/index.js

@@ -4,12 +4,46 @@ import "gridjs/dist/gridjs.umd.js";
 import GlobalConfig from "../global-config";
 
 class Roles {
+    constructor() {
+        this.table = null; // Store Grid.js instance
+    }
+
     init() {
         this.initTableRoles();
     }
 
     initTableRoles() {
-        new Grid({
+        let tableContainer = document.getElementById("table-roles");
+
+        // If table instance already exists, update it instead of re-creating
+        if (this.table) {
+            this.table
+                .updateConfig({
+                    server: {
+                        url: `${GlobalConfig.apiHost}/api/api-roles`,
+                        credentials: "include",
+                        headers: {
+                            Authorization: `Bearer ${document
+                                .querySelector('meta[name="api-token"]')
+                                .getAttribute("content")}`,
+                            "Content-Type": "application/json",
+                        },
+                        then: (data) =>
+                            data.data.map((item) => [
+                                item.id,
+                                item.name,
+                                item.description,
+                                item.id,
+                            ]),
+                        total: (data) => data.total,
+                    },
+                })
+                .forceRender();
+            return;
+        }
+
+        // Create a new Grid.js instance only if it doesn't exist
+        this.table = new gridjs.Grid({
             columns: [
                 "ID",
                 "Name",
@@ -21,8 +55,8 @@ class Roles {
                             <div class="d-flex justify-content-end gap-x-2">
                                 <a href="/roles/${cell}/edit" class="btn btn-yellow me-2">Update</a>
                                 <a href="/roles/role-menu/${cell}" class="btn btn-yellow me-2">Role Menu</a>
-                                <button class="btn btn-red btn-delete btn-delete-role" data-id="${cell}">Delete</button>
+                                <button class="btn btn-red btn-delete-role" data-id="${cell}">Delete</button>
-                            <div>
+                            </div>
                         `),
                 },
             ],
@@ -59,9 +93,9 @@ class Roles {
                     ]),
                 total: (data) => data.total,
             },
-        }).render(document.getElementById("table-roles"));
+        }).render(tableContainer);
 
-        document.addEventListener("click", this.handleDelete);
+        document.addEventListener("click", this.handleDelete.bind(this));
     }
 
     handleDelete(event) {
@@ -70,6 +104,7 @@ class Roles {
 
             const id = event.target.getAttribute("data-id");
             let modalElement = document.getElementById("modalConfirmation");
+            let toastMessage = document.getElementById("toast-message");
 
             if (!modalElement) {
                 console.error("Modal element not found!");
@@ -77,51 +112,94 @@ class Roles {
             }
 
             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("toastNotification");
-
-            let toastElement = document.getElementById("toastNotificationApi");
             let toast = new bootstrap.Toast(toastElement);
 
+            // Remove previous event listeners to avoid multiple bindings
+            btnSaveConfirmation.replaceWith(
+                btnSaveConfirmation.cloneNode(true)
+            );
+            btnSaveConfirmation = document.getElementById(
+                "btnSaveConfirmation"
+            );
+
+            // Set the role ID on the confirm button inside the modal
+            btnSaveConfirmation.setAttribute("data-role-id", id);
+
             // Show the modal
             modal.show();
 
-            // Prevent multiple event listeners
+            btnSaveConfirmation.addEventListener("click", async () => {
-            btnSaveConfirmation.onclick = function () {
+                let roleId = btnSaveConfirmation.getAttribute("data-role-id");
-                let roleId = this.getAttribute("data-role-id");
-                console.log("Deleted ID:", roleId);
 
-                fetch(`/roles/${roleId}`, {
+                try {
-                    method: "DELETE",
+                    let response = await fetch(`/roles/${roleId}`, {
-                    credentials: "include",
+                        method: "DELETE",
-                    headers: {
+                        credentials: "include",
-                        "X-CSRF-TOKEN": document
+                        headers: {
-                            .querySelector('meta[name="csrf-token"]')
+                            "X-CSRF-TOKEN": document
-                            .getAttribute("content"),
+                                .querySelector('meta[name="csrf-token"]')
-                        "Content-Type": "application/json",
+                                .getAttribute("content"),
+                            "Content-Type": "application/json",
+                        },
+                    });
+
+                    if (response.ok) {
+                        let result = await response.json();
+                        toastMessage.innerText =
+                            result.message || "Deleted successfully!";
+                        toast.show();
+
+                        // Hide modal
+                        modal.hide();
+
+                        // Refresh Grid.js table
+                        this.refreshRolesTable();
+                    } else {
+                        let error = await response.json();
+                        console.error("Delete failed:", error);
+                        toastMessage.innerText =
+                            error.message || "Delete failed!";
+                        toast.show();
+                    }
+                } catch (error) {
+                    console.error("Error deleting item:", error);
+                    toastMessage.innerText = "An error occurred!";
+                    toast.show();
+                }
+            });
+        }
+    }
+
+    refreshRolesTable() {
+        if (this.table) {
+            this.table
+                .updateConfig({
+                    server: {
+                        url: `${GlobalConfig.apiHost}/api/api-roles`,
+                        credentials: "include",
+                        headers: {
+                            Authorization: `Bearer ${document
+                                .querySelector('meta[name="api-token"]')
+                                .getAttribute("content")}`,
+                            "Content-Type": "application/json",
+                        },
+                        then: (data) =>
+                            data.data.map((item) => [
+                                item.id,
+                                item.name,
+                                item.description,
+                                item.id,
+                            ]),
+                        total: (data) => data.total,
                     },
                 })
-                    .then((response) => {
+                .forceRender();
-                        if (response.ok) {
+        } else {
-                            modal.hide();
+            this.initTableRoles(); // If the table is null, reinitialize
-                            toast.show();
-                            setTimeout(() => window.location.reload(), 1500);
-                        } else {
-                            return response.json().then((error) => {
-                                console.error("Delete failed:", error);
-                                toast.show();
-                            });
-                        }
-                    })
-                    .catch((error) => {
-                        console.error("Error deleting item:", error);
-                        toast.show();
-                    });
-            };
         }
     }
 }

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

@@ -4,26 +4,12 @@
 
 @include('layouts.partials/page-title', ['title' => 'Data Settings', 'subtitle' => 'Setting Dashboard'])
 
+<x-toast-notification />
 <div class="row d-flex justify-content-center">
-  @if (session('error'))
-    <div class="alert alert-danger">
-    {{ session('error') }}
-    </div>
-  @endif
-
-  @if ($errors->any())
-    <div class="alert alert-danger">
-    <ul>
-      @foreach ($errors->all() as $error)
-      <li>{{ $error }}</li>
-    @endforeach
-    </ul>
-    </div>
-  @endif
   <div class="col-lg-6">
     <div class="card">
       <div class="card-body">
-        <form action="{{ route('data-settings.store') }}" method="POST">
+        <form id="formDataSettings" action="{{ route('data-settings.store') }}" method="POST">
           @csrf
           <div class="mb-3">
             <label for="key" class="form-label">Key</label>
@@ -37,7 +23,10 @@
             <label for="type" class="form-label">Type</label>
             <input type="text" id="type" class="form-control" name="type">
           </div>
-          <button type="submit" class="btn btn-success width-lg">Create</button>
+          <button class="btn btn-primary me-1" type="button" id="btnCreateDataSettings">
+              <span id="spinner" class="spinner-border spinner-border-sm me-1 d-none" role="status" aria-hidden="true"></span>
+              Create
+          </button>
         </form>
       </div>
     </div>
@@ -47,4 +36,5 @@
 @endsection
 
 @section('scripts')
+@vite(['resources/js/data-settings/create.js'])
 @endsection

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

@@ -4,26 +4,12 @@
 
 @include('layouts.partials/page-title', ['title' => 'Data Settings', 'subtitle' => 'Setting Dashboard'])
 
+<x-toast-notification />
 <div class="row d-flex justify-content-center">
-	@if (session('error'))
-		<div class="alert alert-danger">
-			{{ session('error') }}
-		</div>
-	@endif
-
-	@if ($errors->any())
-		<div class="alert alert-danger">
-			<ul>
-				@foreach ($errors->all() as $error)
-					<li>{{ $error }}</li>
-				@endforeach
-			</ul>
-		</div>
-	@endif
 	<div class="col-lg-6">
 		<div class="card">
 			<div class="card-body">
-				<form action="{{ route('data-settings.update', $data->id) }}" method="POST">
+				<form id="formUpdateDataSettings" action="{{ route('data-settings.update', $data->id) }}" method="POST">
 					@csrf
 					@method('PUT')
 					<div class="mb-3">
@@ -38,7 +24,10 @@
 						<label for="type" class="form-label">Type</label>
 						<input type="text" id="type" class="form-control" name="type" value="{{$data->type}}">
 					</div>
-					<button type="submit" class="btn btn-success width-lg">Update</button>
+          <button class="btn btn-primary me-1" type="button" id="btnUpdateDataSettings">
+              <span id="spinner" class="spinner-border spinner-border-sm me-1 d-none" role="status" aria-hidden="true"></span>
+              Update
+          </button>
 				</form>
 			</div>
 		</div>
@@ -48,4 +37,5 @@
 @endsection
 
 @section('scripts')
+@vite(['resources/js/data-settings/update.js'])
 @endsection

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

@@ -8,6 +8,8 @@
 
 @include('layouts.partials/page-title', ['title' => 'Data Settings', 'subtitle' => 'Setting Dashboard'])
 
+<x-toast-notification />
+<x-modal-confirmation buttonText="Delete" confirmationMessage="Are you sure you want to delete this?" />
 <div class="row">
 	<div class="card w-full">
 		<div class="card-body">

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

@@ -4,11 +4,12 @@
 
 @include('layouts.partials/page-title', ['title' => 'Users', 'subtitle' => 'Create'])
 
+<x-toast-notification />
 <div class="row d-flex justify-content-center">
     <div class="col-lg-6">
         <div class="card">
             <div class="card-body">
-                <form action="{{route('users.store')}}" method="POST">
+                <form id="formCreateUsers" action="{{route('users.store')}}" method="POST">
                     @csrf
                     <div class="mb-3">
                         <label class="form-label" for="name">Name</label>
@@ -54,8 +55,10 @@
                             @endforeach
                         </select>
                     </div>
-                    <!-- username, firstname, lastname, position -->
+                    <button class="btn btn-primary me-1" type="button" id="btnCreateUsers">
-                    <button type="submit" class="btn btn-success width-lg">Create</button>
+                        <span id="spinner" class="spinner-border spinner-border-sm me-1 d-none" role="status" aria-hidden="true"></span>
+                        Create
+                    </button>
                 </form>
             </div>
         </div>
@@ -65,4 +68,5 @@
 @endsection
 
 @section('scripts')
+@vite(['resources/js/master/users/create.js'])
 @endsection

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

@@ -4,11 +4,12 @@
 
 @include('layouts.partials/page-title', ['title' => 'Users', 'subtitle' => 'Create'])
 
+<x-toast-notification />
 <div class="row d-flex justify-content-center">
     <div class="col-lg-6">
         <div class="card">
             <div class="card-body">
-                <form action="{{ route('users.update', $user->id)}}" method="post">
+                <form id="formUpdateUsers" action="{{ route('users.update', $user->id)}}" method="post">
                     @csrf
                     @method("put")
                     <div class="mb-3">
@@ -47,8 +48,10 @@
                             @endforeach
                         </select>
                     </div>
-                    <!-- username, firstname, lastname, position -->
+                    <button class="btn btn-primary me-1" type="button" id="btnUpdateUsers">
-                    <button type="submit" class="btn btn-success width-lg">Update</button>
+                        <span id="spinner" class="spinner-border spinner-border-sm me-1 d-none" role="status" aria-hidden="true"></span>
+                        Update
+                    </button>
                 </form>
             </div>
         </div>
@@ -58,4 +61,5 @@
 @endsection
 
 @section('scripts')
+@vite(['resources/js/master/users/update.js'])
 @endsection

resources/views/menus/create.blade.php

@@ -8,11 +8,12 @@
 
 @include('layouts.partials/page-title', ['title' => 'Settings', 'subtitle' => 'Menu'])
 
+<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("menus.store")}}" method="post">
+                <form id="formCreateMenus" action="{{route("menus.store")}}" method="post">
                     @csrf
                     <div class="mb-3">
                         <label class="form-label" for="name">Name</label>
@@ -43,7 +44,10 @@
                         <input type="number" id="sort_order" name="sort_order"
                                 class="form-control" placeholder="Enter sort order" required>
                     </div>
-                    <button type="submit" class="btn btn-success">Create</button>
+                    <button class="btn btn-primary me-1" type="button" id="btnCreateMenus">
+                        <span id="spinner" class="spinner-border spinner-border-sm me-1 d-none" role="status" aria-hidden="true"></span>
+                        Create
+                    </button>
                 </form>
             </div>
         </div>
@@ -53,4 +57,5 @@
 @endsection
 
 @section('scripts')
+@vite(['resources/js/menus/create.js'])
 @endsection

resources/views/menus/edit.blade.php

@@ -8,11 +8,12 @@
 
 @include('layouts.partials/page-title', ['title' => 'Settings', 'subtitle' => 'Menu'])
 
+<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("menus.update", $menu->id)}}" method="post">
+                <form id="formUpdateMenus" action="{{route("menus.update", $menu->id)}}" method="post">
                     @csrf
                     @method("put")
                     <div class="mb-3">
@@ -44,7 +45,10 @@
                         <input type="number" id="sort_order" name="sort_order"
                                 class="form-control" placeholder="Enter sort order" value="{{$menu->sort_order}}" required>
                     </div>
-                    <button type="submit" class="btn btn-success">Update</button>
+                    <button class="btn btn-primary me-1" type="button" id="btnUpdateMenus">
+                        <span id="spinner" class="spinner-border spinner-border-sm me-1 d-none" role="status" aria-hidden="true"></span>
+                        Update
+                    </button>
                 </form>
             </div>
         </div>
@@ -54,4 +58,5 @@
 @endsection
 
 @section('scripts')
+@vite(['resources/js/menus/update.js'])
 @endsection

resources/views/menus/index.blade.php

@@ -8,6 +8,8 @@
 
 @include('layouts.partials/page-title', ['title' => 'Settings', 'subtitle' => 'Menu'])
 
+<x-toast-notification />
+<x-modal-confirmation buttonText="Delete" confirmationMessage="Are you sure you want to delete this?" />
 <div class="row">
     <div class="card w-full">
         <div class="card-body">

vite.config.js

@@ -46,17 +46,24 @@ export default defineConfig({
 
                 //js-additional
                 "resources/js/dashboards/bigdata.js",
-                "resources/js/master/users/users.js",
                 "resources/js/settings/syncronize/syncronize.js",
                 "resources/js/data-settings/index.js",
                 "resources/js/pbg-task/index.js",
                 "resources/js/settings/general/general-settings.js",
                 "resources/js/tables/common-table.js",
-                "resources/js/menus/index.js",
+                // roles
                 "resources/js/roles/index.js",
                 "resources/js/roles/create.js",
                 "resources/js/roles/update.js",
                 "resources/roles/role_menu.js",
+                // users
+                "resources/js/master/users/users.js",
+                "resources/js/master/users/create.js",
+                "resources/js/master/users/update.js",
+                // menus
+                "resources/js/menus/index.js",
+                "resources/js/menus/create.js",
+                "resources/js/menus/update.js",
             ],
             refresh: true,
         }),