diff --git a/app/static/js/dashboard/roles.js b/app/static/js/dashboard/roles.js
new file mode 100644
index 0000000..d48013b
--- /dev/null
+++ b/app/static/js/dashboard/roles.js
@@ -0,0 +1,119 @@
+var token = document.getElementById("form-token" ).value;
+
+var table = $('#table-roles').DataTable({
+ "orderCellsTop": true, // move sorting to top header
+ "columnDefs": [
+ { "orderable": false, "targets": [3] } // Disable sorting on the first and fourth columns
+ ],
+ "ajax": {
+ "url": "/api/dashboard/roles/list",
+ "type": "POST", // Use POST method
+ "dataSrc": "data",
+ "contentType": "application/json",
+ "data": function(d) {
+ // Customize the data payload sent in the POST request
+ return JSON.stringify({
+ "token": token
+ });
+ },
+ "error": function (xhr, error, thrown) {
+ console.error('Error fetching data:', thrown);
+ console.error('Response:', xhr.responseText);
+ }
+ },
+ "columns": [
+ {
+ "data": "id",
+ "render": function(data, type, row) {
+ return `${data}`;
+ }
+ },
+ {
+ "data": "name",
+ "render": function(data, type, row) {
+ return `${data}`;
+ }
+ },
+ {
+ "data": "count",
+ "render": function(data, type, row) {
+ return `${data} User(s)`;
+ }
+ },
+ {
+ "data": null,
+ "defaultContent": "",
+ "render": function(data, type, row) {
+ if (row.id==1) return "";
+ else return `
+ `;
+ }
+ }
+ ],
+ "initComplete": function () {
+ // Custom init logic if needed
+ }
+});
+
+function submitAdd() {
+
+ var id = document.getElementById("form-add-id" ).value;
+ var name = document.getElementById("form-add-name" ).value;
+ var url = "/api/dashboard/roles/add";
+ var payload = {
+ "token" : token,
+ "id" : id,
+ "name" : name
+ };
+
+ sendHttpRequest(url, "POST", payload, function (error, response) {
+ if (error) console.error("Error:", error);
+ else {
+ table.ajax.reload(null, false); // false means keep the current page
+ console.log("JSON Response:", response);
+ }
+ }, "application/json");
+
+}
+
+function submitEdit(key) {
+ var id = document.getElementById(`form-edit-id-${key}` ).value;
+ var name = document.getElementById(`form-edit-name-${key}` ).value;
+ var url = "/api/dashboard/roles/edit";
+ var payload = {
+ "token" : token,
+ "key" : key,
+ "id" : id,
+ "name" : name
+ };
+
+ sendHttpRequest(url, "POST", payload, function (error, response) {
+ if (error) console.error("Error:", error);
+ else {
+ table.ajax.reload(null, false); // false means keep the current page
+ console.log("JSON Response:", response);
+ }
+ }, "application/json");
+
+}
+
+function submitRemove(key) {
+ var url = "/api/dashboard/roles/remove";
+ var payload = {
+ "token" : token,
+ "key" : key
+ };
+
+ sendHttpRequest(url, "POST", payload, function (error, response) {
+ if (error) console.error("Error:", error);
+ else {
+ table.ajax.reload(null, false); // false means keep the current page
+ console.log("JSON Response:", response);
+ }
+ }, "application/json");
+
+}
diff --git a/app/static/js/dashboard/users.js b/app/static/js/dashboard/users.js
new file mode 100644
index 0000000..6f30b07
--- /dev/null
+++ b/app/static/js/dashboard/users.js
@@ -0,0 +1,75 @@
+var token = document.getElementById("form-token" ).value;
+
+var table = $('#table-users').DataTable({
+ "columnDefs": [
+ { "orderable": false, "targets": [4, 5, 6] } // Disable sorting on the first and fourth columns
+ ],
+ "ajax": {
+ "url": "/api/dashboard/users/list",
+ "type": "POST", // Use POST method
+ "dataSrc": "data",
+ "contentType": "application/json",
+ "data": function(d) {
+ // Customize the data payload sent in the POST request
+ return JSON.stringify({
+ "token": token
+ });
+ },
+ "error": function (xhr, error, thrown) {
+ console.error('Error fetching data:', thrown);
+ console.error('Response:', xhr.responseText);
+ }
+ },
+ "columns": [
+ {
+ "data": "id",
+ "render": function(data, type, row) {
+ return `${data}`;
+ }
+ },
+ {
+ "data": "username",
+ "render": function(data, type, row) {
+ return `${data}`;
+ }
+ },
+ {
+ "data": "email",
+ "render": function(data, type, row) {
+ return `${data}`;
+ }
+ },
+ {
+ "data": "phone",
+ "render": function(data, type, row) {
+ return `${data}`;
+ }
+ },
+ {
+ "data": "roles",
+ "render": function(data, type, row) {
+ var roles = ""
+ for (let i = 0; i < data.length; i++) roles += `${data[i].name}`;
+ return roles;
+ }
+ },
+ {
+ "data": "verification",
+ "render": function(data, type, row) {
+ var verification = ""
+ for (let i = 0; i < data.length; i++) verification += ` ${data[i].type}`;
+ return verification;
+ }
+ },
+ {
+ "data": null,
+ "defaultContent": "",
+ "render": function(data, type, row) {
+ return "";
+ }
+ }
+ ],
+ "initComplete": function () {
+ // Custom init logic if needed
+ }
+});