arifal/sibedas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add dashboard inside and outside system and fix timeout when search filter

Browse Source
This commit is contained in:
arifal
2025-03-06 23:33:31 +07:00
parent e0c35b8897
commit ffc08f26cc
24 changed files with 972 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
resources/js/bigdata-resumes/index.js
View File

@@ -16,7 +16,7 @@ class BigdataResume {
}
async initEvents() {
await this.initBigdataResumeTable();
this.handleSearch();
// this.handleSearch();
}
async initBigdataResumeTable() {
@@ -60,6 +60,12 @@ class BigdataResume {
},
},
sort: true,
search: {
server: {
url: (prev, keyword) => `${prev}?search=${keyword}`,
},
debounceTimeout: 1000,
},
server: {
url: `${GlobalConfig.apiHost}/api/bigdata-report`,
headers: {

1
resources/js/business-industries/index.js
View File

@@ -77,6 +77,7 @@ class BusinessIndustries {
server: {
url: (prev, keyword) => `${prev}?search=${keyword}`,
},
debounceTimeout: 1000,
},
server: {
url: `${GlobalConfig.apiHost}/api/api-business-industries`,

3
resources/js/customers/index.js
View File

@@ -66,6 +66,7 @@ class Customers {
server: {
url: (prev, keyword) => `${prev}?search=${keyword}`,
},
debounceTimeout: 1000,
},
server: {
url: `${GlobalConfig.apiHost}/api/customers`,
@@ -91,6 +92,8 @@ class Customers {
}).render(tableContainer);
}
handleSearch() {}
async handleDelete(deleteButton) {
const id = deleteButton.getAttribute("data-id");

194
resources/js/dashboards/potentials/inside_system.js Normal file
View File

@@ -0,0 +1,194 @@
import Big from "big.js";
import GlobalConfig, { addThousandSeparators } from "../../global-config.js";
import InitDatePicker from "../../utils/InitDatePicker.js";
class DashboardPotentialInsideSystem {
async init() {
new InitDatePicker(
"#datepicker-lack-of-potential",
this.handleChangedDate.bind(this)
).init();
this.bigTotalLackPotential = 0;
this.totalPotensi = await this.getDataTotalPotensi("latest");
this.totalTargetPAD = await this.getDataSettings("TARGET_PAD");
this.allCountData = await this.getValueDashboard();
this.reklameCount = this.allCountData.total_reklame ?? 0;
this.pdamCount = this.allCountData.total_pdam ?? 0;
this.tataRuangCount = this.allCountData.total_tata_ruang ?? 0;
let dataReportTourism = this.allCountData.data_report;
this.totalVilla = dataReportTourism
.filter((item) => item.kbli_title.toLowerCase() === "vila")
.reduce((sum, item) => sum + item.total_records, 0);
this.totalRestoran = dataReportTourism
.filter((item) => item.kbli_title.toLowerCase() === "restoran")
.reduce((sum, item) => sum + item.total_records, 0);
this.totalPariwisata = dataReportTourism.reduce(
(sum, item) => sum + item.total_records,
0
);
this.bigTargetPAD = new Big(this.totalTargetPAD ?? 0);
this.bigTotalPotensi = new Big(this.totalPotensi.total ?? 0);
this.bigTotalLackPotential = this.bigTargetPAD.minus(
this.bigTotalPotensi
);
this.initChartKekuranganPotensi();
this.initDataValueDashboard();
}
async handleChangedDate(filterDate) {
const totalPotensi = await this.getDataTotalPotensi(filterDate);
this.bigTotalPotensi = new Big(totalPotensi.total ?? 0);
this.bigTotalLackPotential = this.bigTargetPAD.minus(
this.bigTotalPotensi
);
this.initChartKekuranganPotensi();
}
async getDataTotalPotensi(filterDate) {
try {
const response = await fetch(
`${GlobalConfig.apiHost}/api/bigdata-resume?filterByDate=${filterDate}`,
{
credentials: "include",
headers: {
Authorization: `Bearer ${
document.querySelector("meta[name='api-token']")
.content
}`,
"Content-Type": "application/json",
},
}
);
if (!response.ok) {
console.error("Network response was not ok", response);
}
const data = await response.json();
return {
total: data.total_potensi.sum,
};
} catch (error) {
console.error("Error fetching chart data:", error);
return null;
}
}
async getDataSettings(string_key) {
try {
const response = await fetch(
`${GlobalConfig.apiHost}/api/data-settings?search=${string_key}`,
{
credentials: "include",
headers: {
Authorization: `Bearer ${
document.querySelector("meta[name='api-token']")
.content
}`,
"Content-Type": "application/json",
},
}
);
if (!response.ok) {
console.error("Network response was not ok", response);
}
const data = await response.json();
return data.data[0].value;
} catch (error) {
console.error("Error fetching chart data:", error);
return 0;
}
}
async getValueDashboard() {
try {
const response = await fetch(
`${GlobalConfig.apiHost}/api/dashboard-potential-count`,
{
credentials: "include",
headers: {
Authorization: `Bearer ${
document.querySelector("meta[name='api-token']")
.content
}`,
"Content-Type": "application/json",
},
}
);
if (!response.ok) {
console.error("Network response was not ok", response);
}
const data = await response.json();
return data;
} catch (error) {
console.error("Error fetching chart data:", error);
return 0;
}
}
initChartKekuranganPotensi() {
document
.querySelectorAll(".document-count.chart-lack-of-potential")
.forEach((element) => {
element.innerText = ``;
});
document
.querySelectorAll(".document-total.chart-lack-of-potential")
.forEach((element) => {
element.innerText = `Rp.${addThousandSeparators(
this.bigTotalLackPotential.toString()
)}`;
});
document
.querySelectorAll(".small-percentage.chart-lack-of-potential")
.forEach((element) => {
element.innerText = ``;
});
}
initDataValueDashboard() {
document.getElementById("reklame-count").innerText = this.reklameCount;
document.getElementById("pdam-count").innerText = this.pdamCount;
document.getElementById("pbb-bangunan-count").innerText =
this.tataRuangCount;
document.getElementById("tata-ruang-count").innerText =
this.tataRuangCount;
document.getElementById("tata-ruang-usaha-count").innerText =
this.tataRuangCount;
document.getElementById("restoran-count").innerText =
this.totalRestoran;
document.getElementById("villa-count").innerText = this.totalVilla;
document.getElementById("pariwisata-count").innerText =
this.totalPariwisata;
}
}
document.addEventListener("DOMContentLoaded", async function (e) {
await new DashboardPotentialInsideSystem().init();
});
function resizeDashboard() {
let targetElement = document.getElementById("lack-of-potential-wrapper");
let dashboardElement = document.getElementById(
"lack-of-potential-fixed-container"
);
let targetWidth = targetElement.offsetWidth;
let dashboardWidth = 1400;
let scaleFactor = (targetWidth / dashboardWidth).toFixed(2);
// Prevent scaling beyond 1 (100%) to avoid overflow
scaleFactor = Math.min(scaleFactor, 1);
dashboardElement.style.transformOrigin = "left top";
dashboardElement.style.transition = "transform 0.2s ease-in-out";
dashboardElement.style.transform = `scale(${scaleFactor})`;
// Ensure horizontal scrolling is allowed if necessary
document.body.style.overflowX = "auto";
}
window.addEventListener("load", resizeDashboard);
window.addEventListener("resize", resizeDashboard);

121
resources/js/dashboards/potentials/outside_system.js Normal file
View File

@@ -0,0 +1,121 @@
import InitDatePicker from "../../utils/InitDatePicker.js";
import GlobalConfig, { addThousandSeparators } from "../../global-config.js";
class DashboardPotentialOutsideSystem {
async init() {
new InitDatePicker(
"#datepicker-outside-system",
this.handleChangedDate.bind(this)
).init();
this.bigTotalLackPotential = 0;
this.dataResume = await this.getBigDataResume("latest");
console.log(this.dataResume);
this.initChartNonBusiness();
this.initChartBusiness();
}
async handleChangedDate(filterDate) {
this.dataResume = await this.getBigDataResume(filterDate);
this.initChartNonBusiness();
this.initChartBusiness();
}
async getBigDataResume(filterDate) {
try {
const response = await fetch(
`${GlobalConfig.apiHost}/api/bigdata-resume?filterByDate=${filterDate}`,
{
credentials: "include",
headers: {
Authorization: `Bearer ${
document.querySelector("meta[name='api-token']")
.content
}`,
"Content-Type": "application/json",
},
}
);
if (!response.ok) {
console.error("Network response was not ok", response);
}
return await response.json();
} catch (error) {
console.error("Error fetching chart data:", error);
return null;
}
}
initChartNonBusiness() {
const nonBusinessDoc = this.dataResume?.non_business_document ?? {};
document
.querySelectorAll(".document-count.outside-system-non-business")
.forEach((element) => {
element.innerText = `${nonBusinessDoc.count ?? 0}`;
});
document
.querySelectorAll(".document-total.outside-system-non-business")
.forEach((element) => {
element.innerText = `Rp.${addThousandSeparators(
(nonBusinessDoc.sum ?? 0).toString()
)}`;
});
document
.querySelectorAll(".small-percentage.outside-system-non-business")
.forEach((element) => {
element.innerText = `${nonBusinessDoc.percentage ?? 0}%`;
});
}
initChartBusiness() {
const businessDoc = this.dataResume?.business_document ?? {};
document
.querySelectorAll(".document-count.outside-system-business")
.forEach((element) => {
element.innerText = `${businessDoc.count ?? 0}`;
});
document
.querySelectorAll(".document-total.outside-system-business")
.forEach((element) => {
element.innerText = `Rp.${addThousandSeparators(
(businessDoc.sum ?? 0).toString()
)}`;
});
document
.querySelectorAll(".small-percentage.outside-system-business")
.forEach((element) => {
element.innerText = `${businessDoc.percentage ?? 0}%`;
});
}
}
document.addEventListener("DOMContentLoaded", async function (e) {
await new DashboardPotentialOutsideSystem().init();
});
function resizeDashboard() {
let targetElement = document.getElementById("outside-system-wrapper");
let dashboardElement = document.getElementById(
"outside-system-fixed-container"
);
let targetWidth = targetElement.offsetWidth;
let dashboardWidth = 1400;
let scaleFactor = (targetWidth / dashboardWidth).toFixed(2);
// Prevent scaling beyond 1 (100%) to avoid overflow
scaleFactor = Math.min(scaleFactor, 1);
dashboardElement.style.transformOrigin = "left top";
dashboardElement.style.transition = "transform 0.2s ease-in-out";
dashboardElement.style.transform = `scale(${scaleFactor})`;
// Ensure horizontal scrolling is allowed if necessary
document.body.style.overflowX = "auto";
}
window.addEventListener("load", resizeDashboard);
window.addEventListener("resize", resizeDashboard);

1
resources/js/data-settings/index.js
View File

@@ -67,6 +67,7 @@ class DataSettings {
server: {
url: (prev, keyword) => `${prev}?search=${keyword}`,
},
debounceTimeout: 1000,
},
server: {
url: `${GlobalConfig.apiHost}/api/data-settings`,

1
resources/js/master/users/users.js
View File

@@ -44,6 +44,7 @@ class UsersTable {
server: {
url: (prev, keyword) => `${prev}?search=${keyword}`,
},
debounceTimeout: 1000,
},
server: {
url: `${GlobalConfig.apiHost}/api/users`,

59
resources/js/menus/index.js
View File

@@ -28,35 +28,35 @@ class Menus {
initTableMenus() {
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/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;
}
// if (this.table) {
// // If table exists, update its data instead of recreating
// this.table
// .updateConfig({
// server: {
// url: `${GlobalConfig.apiHost}/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: [
@@ -96,6 +96,7 @@ class Menus {
server: {
url: (prev, keyword) => `${prev}?search=${keyword}`,
},
debounceTimeout: 1000,
},
server: {
url: `${GlobalConfig.apiHost}/api/menus`,

1
resources/js/pbg-task/index.js
View File

@@ -36,6 +36,7 @@ class PbgTasks {
server: {
url: (prev, keyword) => `${prev}?search=${keyword}`,
},
debounceTimeout: 1000,
},
pagination: {
limit: 15,

1
resources/js/roles/index.js
View File

@@ -65,6 +65,7 @@ class Roles {
server: {
url: (prev, keyword) => `${prev}?search=${keyword}`,
},
debounceTimeout: 1000,
},
server: {
url: `${GlobalConfig.apiHost}/api/roles`,

61
resources/js/table-generator.js
View File

@@ -18,12 +18,15 @@ class GeneralTable {
server: {
url: (prev, keyword) => `${prev}?search=${keyword}`,
},
debounceTimeout: 1000,
},
pagination: this.options.pagination || {
limit: 15,
server: {
url: (prev, page) =>
`${prev}${prev.includes("?") ? "&" : "?"}page=${page + 1}`,
`${prev}${prev.includes("?") ? "&" : "?"}page=${
page + 1
}`,
},
},
sort: this.options.sort || true,
@@ -48,22 +51,29 @@ class GeneralTable {
processData(data) {
return data.data.map((item) => {
return this.columns.map((column) => {
return item[column] || '';
return item[column] || "";
});
});
}
handleActions() {
document.addEventListener("click", (event) => {
if (event.target && event.target.classList.contains('btn-edit')) {
if (event.target && event.target.classList.contains("btn-edit")) {
this.handleEdit(event);
}
else if (event.target && event.target.classList.contains('btn-delete')) {
} else if (
event.target &&
event.target.classList.contains("btn-delete")
) {
this.handleDelete(event);
}
else if (event.target && event.target.classList.contains('btn-create')) {
} else if (
event.target &&
event.target.classList.contains("btn-create")
) {
this.handleCreate(event);
} else if (event.target && event.target.classList.contains('btn-bulk-create')) {
} else if (
event.target &&
event.target.classList.contains("btn-bulk-create")
) {
this.handleBulkCreate(event);
}
});
@@ -72,28 +82,28 @@ class GeneralTable {
// Fungsi untuk menangani create
handleCreate(event) {
// Menggunakan model dan ID untuk membangun URL dinamis
const model = event.target.getAttribute('data-model'); // Mengambil model dari data-model
const model = event.target.getAttribute("data-model"); // Mengambil model dari data-model
window.location.href = `${this.baseUrl}/${model}/create`;
}
handleBulkCreate(event) {
// Menggunakan model dan ID untuk membangun URL dinamis
const model = event.target.getAttribute('data-model');
const model = event.target.getAttribute("data-model");
window.location.href = `${this.baseUrl}/${model}/bulk-create`;
}
// Fungsi untuk menangani edit
handleEdit(event) {
const id = event.target.getAttribute('data-id');
const model = event.target.getAttribute('data-model'); // Mengambil model dari data-model
console.log('Editing record with ID:', id);
const id = event.target.getAttribute("data-id");
const model = event.target.getAttribute("data-model"); // Mengambil model dari data-model
console.log("Editing record with ID:", id);
// Menggunakan model dan ID untuk membangun URL dinamis
window.location.href = `${this.baseUrl}/${model}/${id}/edit`;
}
// Fungsi untuk menangani delete
handleDelete(event) {
const id = event.target.getAttribute('data-id');
const id = event.target.getAttribute("data-id");
console.log(id);
// if (confirm("Are you sure you want to delete this item?")) {
// this.deleteRecord(id);
@@ -105,7 +115,7 @@ class GeneralTable {
showCancelButton: true,
confirmButtonColor: "#d33",
cancelButtonColor: "#3085d6",
confirmButtonText: "Yes, delete it!"
confirmButtonText: "Yes, delete it!",
}).then((result) => {
if (result.isConfirmed) {
this.deleteRecord(id);
@@ -114,8 +124,8 @@ class GeneralTable {
text: "Your record has been deleted.",
icon: "success",
showConfirmButton: false, // Menghilangkan tombol OK
timer: 2000 // Menutup otomatis dalam 2 detik (opsional)
});
timer: 2000, // Menutup otomatis dalam 2 detik (opsional)
});
}
});
}
@@ -123,8 +133,9 @@ class GeneralTable {
async deleteRecord(id) {
try {
console.log(id);
const response = await fetch(`${this.apiUrl}/${id}`, { // Menambahkan model dalam URL
method: 'DELETE',
const response = await fetch(`${this.apiUrl}/${id}`, {
// Menambahkan model dalam URL
method: "DELETE",
headers: this.options.headers || {
Authorization: `Bearer ${document
.querySelector('meta[name="api-token"]')
@@ -136,10 +147,14 @@ class GeneralTable {
location.reload();
} else {
const data = await response.json();
showErrorAlert(`Failed to delete record: ${data.message || "Unknown error"}`);
showErrorAlert(
`Failed to delete record: ${
data.message || "Unknown error"
}`
);
}
} catch (error) {
console.error('Error deleting data:', error);
console.error("Error deleting data:", error);
showErrorAlert("Error deleting data. Please try again.");
}
}
@@ -148,7 +163,7 @@ class GeneralTable {
// Fungsi untuk menampilkan alert
function showErrorAlert(message) {
const alertContainer = document.getElementById("alert-container");
alertContainer.innerHTML = `
<div class="alert alert-danger alert-dismissible fade show" role="alert">
${message}
@@ -157,4 +172,4 @@ function showErrorAlert(message) {
`;
}
export default GeneralTable;
export default GeneralTable;

234
resources/scss/dashboards/potentials/_inside_system.scss Normal file
View File

@@ -0,0 +1,234 @@
//
// inside_system.scss
//
.square {
height: 100px;
width: 100px;
position: absolute;
z-index: -1;
}
.dia-top-left-bottom-right:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: linear-gradient(
to top right,
transparent calc(50% - 2px),
black,
transparent calc(50% + 2px)
);
}
.dia-top-right-bottom-left:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: linear-gradient(
to top left,
transparent calc(50% - 2px),
black,
transparent calc(50% + 2px)
);
}
.lack-of-potential-wrapper {
background-image: url("/public/images/bg-dashboard.jpg");
background-size: cover;
background-position: center;
background-color: rgba(255, 255, 255, 0.7);
max-width: 100vw;
}
.lack-of-potential-wrapper::before {
content: "";
position: absolute;
pointer-events: none;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.7);
}
// #lack-of-potential-fixed-container {
// min-width: 1110px;
// max-width: unset; /* Allow it to grow if needed */
// }
// @media (max-width: 768px) {
// #lack-of-potential-fixed-container {
// transform: scale(0.8); /* Adjust the scale as needed */
// }
// }
// line degrees
.line {
background-color: black;
position: absolute;
height: 3px;
}
.home-to-non-usaha {
width: 100px;
top: 13%;
left: 38%;
transform: rotate(90deg);
}
.restoran-to-bapenda {
width: 110px;
top: 14%;
left: 60%;
transform: rotate(40deg);
}
.pbb-to-bapenda {
width: 80px;
top: 21%;
left: 80%;
}
.reklame-to-bapenda {
width: 120px;
left: 75%;
top: 30%;
transform: rotateZ(142deg);
}
.non-usaha-to-bapenda {
width: 116px;
left: 18%;
top: 33%;
transform: rotateZ(124deg);
}
.non-usaha-to-pdam {
width: 100px;
left: 38%;
top: 34%;
transform: rotateZ(90deg);
}
.non-usaha-to-kecamatan {
width: 140px;
left: 55%;
top: 33%;
transform: rotateZ(237deg);
}
.bapenda-to-usaha {
width: 114px;
left: 18%;
top: 49%;
transform: rotateZ(56deg);
}
.pdam-to-usaha {
width: 88px;
left: 39%;
top: 49%;
transform: rotateZ(90deg);
}
.kecamatan-to-usaha {
width: 118px;
left: 56%;
top: 50%;
transform: rotateZ(117deg);
}
.usaha-to-villa {
width: 100px;
left: 10%;
top: 63%;
transform: rotateZ(143deg);
}
.usaha-to-pabrik {
width: 150px;
left: 15%;
top: 70%;
transform: rotateZ(143deg);
}
.usaha-to-pariwisata {
width: 150px;
left: 43%;
top: 70%;
transform: rotateZ(38deg);
}
.usaha-to-protocol {
width: 106px;
left: 36%;
top: 71%;
transform: rotateZ(86deg);
}
.pariwisata-to-disbudpar {
width: 86px;
left: 54%;
top: 83%;
transform: rotateZ(150deg);
}
.non-usaha-to-wasdal {
width: 300px;
left: -32%;
top: 34%;
transform: rotateZ(226deg);
}
.usaha-to-wasdal {
width: 300px;
left: -34%;
top: 50%;
transform: rotateZ(129deg);
}
.wasdal-to-upt {
width: 155px;
left: 3%;
top: -67%;
transform: rotateZ(127deg);
}
.wasdal-to-satpol {
width: 155px;
left: 19%;
top: -52%;
transform: rotateZ(76deg);
}
.wasdal-to-kejari {
width: 182px;
left: 25%;
top: -55%;
transform: rotateZ(51deg);
}
.wasdal-to-tni {
width: 260px;
left: 29%;
top: -62%;
transform: rotateZ(30deg);
}
.wasdal-to-potential {
width: 50px;
left: 28%;
top: 41%;
}
.potential-to-tata-ruang {
width: 50px;
left: 72%;
top: 41%;
}
.tata-ruang-to-non-usaha {
width: 220px;
left: 0%;
top: 30%;
transform: rotateZ(144deg);
}
.tata-ruang-to-usaha {
width: 280px;
left: 0%;
top: 52%;
transform: rotateZ(224deg);
}
.tata-ruang-to-peta {
width: 122px;
left: 8%;
top: 41%;
}
.peta-to-tapak {
width: 30px;
left: 47%;
top: 41%;
}

59
resources/scss/dashboards/potentials/_outside_system.scss Normal file
View File

@@ -0,0 +1,59 @@
//
// outside_system.scss
//
.square {
height: 100px;
width: 100px;
position: absolute;
z-index: -1;
}
.dia-top-left-bottom-right:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: linear-gradient(
to top right,
transparent calc(50% - 2px),
black,
transparent calc(50% + 2px)
);
}
.dia-top-right-bottom-left:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: linear-gradient(
to top left,
transparent calc(50% - 2px),
black,
transparent calc(50% + 2px)
);
}
.outside-system-wrapper {
background-image: url("/public/images/bg-dashboard.jpg");
background-size: cover;
background-position: center;
background-color: rgba(255, 255, 255, 0.7);
max-width: 90vw;
}
.outside-system-wrapper::before {
content: "";
position: absolute;
pointer-events: none;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.7);
}

3
resources/scss/style.scss
View File

@@ -46,7 +46,8 @@
@import "components/widgets";
@import "components/circle";
@import "components/custom_circle";
@import "dashboards/lack-of-potential";
@import "dashboards/potentials/inside_system";
@import "dashboards/potentials/outside_system";
// Plugin
@import "plugins/simplebar";

4
resources/views/bigdata-resumes/index.blade.php
View File

@@ -86,10 +86,10 @@
<div class="row">
<div class="col-12">
<div class="card w-100 h-100">
<div class="card-header d-flex align-items-center">
<!-- <div class="card-header d-flex align-items-center">
<input type="text" class="form-control me-2 w-auto" id="search-box" />
<button id="search-btn" class="btn btn-md btn-info text-white">Cari</button>
</div>
</div> -->
<div class="card-body">
<div id="table-bigdata-resumes"></div>
</div>

115
resources/views/dashboards/potentials/inside_system.blade.php Normal file
View File

@@ -0,0 +1,115 @@
@extends('layouts.vertical', ['subtitle' => 'Dashboards'])
@section('css')
@vite(['resources/scss/dashboards/potentials/_inside_system.scss'])
@endsection
@section('content')
@include('layouts.partials.page-title', ['title' => 'Dashboards', 'subtitle' => 'Dalam Sistem'])
<div class="lack-of-potential-wrapper">
<div class="row" id="lack-of-potential-wrapper">
<div class="d-flex justify-content-between align-items-center mt-3 ms-2">
<h2 class="text-danger m-0">
ANALISA BIG DATA MELALUI APLIKASI <br> SIBEDAS PBG DALAM SISTEM
</h2>
<div class="text-black text-end d-flex flex-column align-items-end me-3">
<input type="text" class="form-control mt-2" style="max-width: 125px;" id="datepicker-lack-of-potential" placeholder="Filter Date" />
</div>
</div>
</div>
<div class="wrapper">
<div id="lack-of-potential-fixed-container" class="" style="width:1400px;height:770px;position:relative;margin:auto;z-index:1;">
<div style="position: absolute; top: 200px; left: 50px;">
<x-custom-circle title="Restoran" size="small" style="background-color: #0e4753;" visible_data="true" data_id="restoran-count" data_count="0" />
<div class="square dia-top-left-bottom-right" style="top:30px;left:50px;width:150px;height:120px;"></div>
<x-custom-circle title="PBB Bangunan" visible_data="true" data_id="pbb-bangunan-count" data_count="0" size="small" style="background-color: #0e4753;" />
<div class="square" style="width:150px;height:2px;background-color:black;left:50px;top:150px;"></div>
<x-custom-circle title="Reklame" visible_data="true" data_id="reklame-count" data_count="0" size="small" style="background-color: #0e4753;" />
<div class="square dia-top-right-bottom-left" style="top:140px;left:50px;width:150px;height:120px;"></div>
</div>
<div style="position: absolute; top: 300px; left: 200px;">
<div class="square dia-top-right-bottom-left" style="top:-100px;left:30px;width:150px;height:120px;"></div>
<div class="square dia-top-left-bottom-right" style="top:-100px;left:120px;width:120px;height:120px;"></div>
<x-custom-circle title="BAPENDA" size="small" style="float:left;background-color: #234f6c;" />
<x-custom-circle title="PDAM" visible_data="true" data_id="pdam-count" data_count="0" visible_data_type="true" data_type="Pelanggan" size="small" style="float:left;background-color: #234f6c;" />
<x-custom-circle title="KECAMATAN" size="small" style="float:left;background-color: #234f6c;" />
</div>
<div style="position: absolute; top: 0px; left: 270px;">
<div class="square" style="width:5px;height:600px;background-color:black;left:70px;top:50px;"></div>
<div class="square dia-top-left-bottom-right" style="top:350px;left:-50px;width:120px;height:120px;"></div>
<div class="square dia-top-right-bottom-left" style="top:350px;left:70px;width:120px;height:120px;"></div>
<x-custom-circle title="Rumah Tinggal" size="small" style="background-color: #234f6c;margin:auto;" />
<x-custom-circle title="Non Usaha" size="large" style="background-color: #3a968b;margin-top:20px;" />
<x-custom-circle title="USAHA" size="large" style="background-color: #627c8b;margin-top:150px;" />
</div>
<div style="position: absolute; top: 650px; left: 110px;">
<div class="square dia-top-right-bottom-left" style="top:-110px;left:40px;width:200px;height:120px;"></div>
<div class="square dia-top-right-bottom-left" style="top:-110px;left:90px;width:150px;height:170px;"></div>
<div class="square dia-top-left-bottom-right" style="top:-110px;left:230px;width:150px;height:170px;"></div>
<div class="square dia-top-left-bottom-right" style="top:-110px;left:260px;width:200px;height:180px;"></div>
<x-custom-circle title="Villa" size="small" style="float:left;background-color: #234f6c;" visible_data="true" data_id="villa-count" data_count="0" />
<x-custom-circle title="Pabrik" size="small" style="float:left;background-color: #234f6c;" />
<x-custom-circle title="Jalan Protocol" size="small" style="float:left;background-color: #234f6c;" />
<x-custom-circle title="Ruko" size="small" style="float:left;background-color: #234f6c;" />
<x-custom-circle title="Pariwisata" size="small" style="float:left;background-color: #234f6c; margin-right: 20px;" visible_data="true" data_id="pariwisata-count" data_count="0" />
<div class="square" style="width:150px;height:2px;background-color:black;left:350px;top:50px;"></div>
<x-custom-circle title="DISBUDPAR" size="small" style="background-color: #3a968b;" />
</div>
<div style="position: absolute; top: 280px; left: 550px;">
<div class="square dia-top-left-bottom-right" style="top:-110px;left:-150px;width:200px;height:180px;"></div>
<div class="square dia-top-right-bottom-left" style="top:70px;left:-150px;width:200px;height:130px;"></div>
<x-custom-circle title="Tim Wasdal Gabungan" size="large" style="background-color: #da6635;float:left" />
<div class="square" style="width:650px;height:5px;background-color:black;left:100px;top:75px;"></div>
@component('components.circle', [
'document_title' => 'Kekurangan Potensi',
'document_color' => '#ff5757',
'document_type' => '',
'document_id' => 'chart-lack-of-potential',
'visible_small_circle' => false,
'style' => 'margin-left:180px;top:-20px;'
])
@endcomponent
<x-custom-circle title="Tata Ruang" size="large" style="background-color: #da6635;float:left;margin-left:250px;" visible_data="true" data_id="tata-ruang-count" data_count="0" />
</div>
<div style="position: absolute; top: 310px; left: 1150px;">
<div class="square dia-top-left-bottom-right" style="top:90px;left:-100px;width:100px;height:100px;"></div>
<div class="square dia-top-right-bottom-left" style="top:-110px;left:-100px;width:100px;height:100px;"></div>
<x-custom-circle title="Peta" visible_data_type="true" data_type="1:5000" size="small" style="background-color: #224f6d;float:left;" />
<x-custom-circle title="Tapak Bangunan" size="small" style="background-color: #2390af;float:left;margin-left:20px;" />
</div>
<x-custom-circle title="BPN" size="small" style="background-color: #2390af;position:absolute;left:1270px;top:440px;" />
<div style="position: absolute; top: 470px; left: 430px;">
<div class="square dia-top-right-bottom-left" style="top:-80px;left:20px;width:150px;height:120px;"></div>
<div class="square dia-top-right-bottom-left" style="top:-50px;left:100px;width:100px;height:100px;"></div>
<div class="square dia-top-left-bottom-right" style="top:-50px;left:180px;width:100px;height:100px;"></div>
<div class="square dia-top-left-bottom-right" style="top:-60px;left:240px;width:120px;height:120px;"></div>
<x-custom-circle title="UPT Wasdal" size="small" style="background-color: #0f4853;float:left;" />
<x-custom-circle title="Satpol PP" size="small" style="background-color: #0f4853;float:left;" />
<x-custom-circle title="KEJARI" size="small" style="background-color: #0f4853;float:left;" />
<x-custom-circle title="TNI & POLRI" size="small" style="background-color: #0f4853;float:left;" />
</div>
<x-custom-circle title="UUCK" size="small" style="background-color: #2390af;position:absolute;left:980px;top:500px;" />
<div style="position: absolute; top: 50px; left: 1100px;">
<x-custom-circle title="Non Usaha" size="large" style="background-color: #3a968b;margin-top:20px;" />
<x-custom-circle title="USAHA" size="large" style="background-color: #627c8b;margin-top:260px;" visible_data="true" data_id="tata-ruang-usaha-count" data_count="0" />
</div>
</div>
</div>
</div>
@endsection
@section('scripts')
@vite(['resources/js/dashboards/potentials/inside_system.js'])
@endsection

73
resources/views/dashboards/potentials/outside_system.blade.php Normal file
View File

@@ -0,0 +1,73 @@
<!-- base layout -->
@extends('layouts.vertical', ['subtitle' => 'Dashboards'])
<!-- style -->
@section('css')
@vite(['resources/scss/dashboards/potentials/_outside_system.scss'])
@endsection
<!-- content -->
@section('content')
@include('layouts.partials.page-title', ['title' => 'Dashboards', 'subtitle' => 'Luar Sistem'])
<div class="outside-system-wrapper" id="outside-system-wrapper">
<div class="row">
<div class="d-flex justify-content-between align-items-center mt-3 ms-2">
<h2 class="text-danger m-0">
ANALISA BIG DATA MELALUI APLIKASI <br>
SIBEDAS PBG LUAR SISTEM
</h2>
<div class="text-black text-end d-flex flex-column align-items-end me-3">
<input type="text" class="form-control mt-2" style="max-width: 125px;" id="datepicker-outside-system" placeholder="Filter Date" />
</div>
</div>
</div>
<div id="outside-system-fixed-container" class="" style="width:1400px;height:770px;position:relative;margin:auto;z-index:1;">
<div style="position: absolute; top: 70px; left: 50px; width: 200px; height: 500px;">
@component('components.circle', [
'document_title' => 'Non Usaha',
'document_color' => '#399787',
'document_type' => 'Berkas',
'document_id' => 'outside-system-non-business',
'visible_small_circle' => true,
'style' => 'top:10px;'
])
@endcomponent
<div class="square dia-top-right-bottom-left" style="top:10px;left:180px;width:230px;height:120px;"></div>
@component('components.circle', [
'document_title' => 'Usaha',
'document_color' => '#5e7c89',
'document_type' => 'Berkas',
'document_id' => 'outside-system-business',
'visible_small_circle' => true,
'style' => 'top:300px;'
])
@endcomponent
<div class="square dia-top-right-bottom-left" style="top:320px;left:170px;width:200px;height:100px;"></div>
<div class="square dia-top-left-bottom-right" style="top:120px;left:180px;width:500px;height:120px;"></div>
<div class="square dia-top-left-bottom-right" style="top:410px;left:180px;width:500px;height:160px;"></div>
</div>
<div style="position: absolute; top: 50px; left: 350px; width: 200px; height: 550px;">
<div class="square" style="width:200px;height:2px;background-color:black;left:100px;top:70px;"></div>
<x-custom-circle title="Keterangan Rencana Kota (KRK)" size="large" style="background-color: #306364;position: absolute;" />
<x-custom-circle title="Keterangan Rencana Kota (KRK)" size="large" style="background-color: #38b64b;position: absolute; top: 320px;" />
<div class="square" style="width:200px;height:2px;background-color:black;left:100px;top:390px;"></div>
</div>
<div style="position: absolute; top: 50px; left: 600px; width: 200px; height: 650px;">
<x-custom-circle title="Samirindu DPMPTSP" size="large" style="background-color: #0e4753;position: absolute; top: 0px;" />
<x-custom-circle title="RAB dan Gambar" size="large" style="background-color: #f0195b;position: absolute; top: 160px;" />
<x-custom-circle title="OSS RBA (Nasional)" size="large" style="background-color: #38b64b;position: absolute; top: 320px;" />
<x-custom-circle title="Dokumen Lingkungan (DLH)" size="large" style="background-color: #393536;position: absolute; top: 480px;" />
<div class="square dia-top-left-bottom-right" style="top:50px;left:120px;width:250px;height:250px;"></div>
<div class="square dia-top-left-bottom-right" style="top:230px;left:120px;width:220px;height:100px;"></div>
<div class="square dia-top-right-bottom-left" style="top:320px;left:120px;width:200px;height:100px;"></div>
<div class="square dia-top-right-bottom-left" style="top:350px;left:120px;width:250px;height:200px;"></div>
</div>
<div style="position: absolute; top: 50px; left: 900px; width: 200px; height: 550px;">
<x-custom-circle title="Pemohon" size="large" style="background-color: #393536;position: absolute; top: 250px;" />
</div>
</div>
</div>
@endsection
<!-- javascripts -->
@section('scripts')
@vite(['resources/js/dashboards/potentials/outside_system.js'])
@endsection

85
resources/views/layouts/partials/sidebar.blade.php
View File

@@ -16,58 +16,49 @@
<ul class="navbar-nav" id="navbar-nav">
<li class="menu-title">Menu</li>
@foreach ($menus as $menu)
<li class="nav-item">
<!-- parent menu -->
@if ($menu->parent_id == null)
<a class="nav-link menu-arrow" href="#sidebar-{{$menu->id}}" data-bs-toggle="collapse" role="button"
aria-expanded="true" aria-controls="sidebar-{{$menu->id}}">
@php
// Fungsi rekursif untuk menampilkan menu bertingkat dengan indentasi
function renderMenu($menus, $depth = 0) {
foreach ($menus as $menu) {
$collapseId = "sidebar-" . $menu->id; // Unique ID untuk Bootstrap Collapse
$hasChildren = $menu->children->count() > 0; // Cek apakah punya anak
$marginLeft = $depth * 5; // Set jarak margin berdasarkan level
echo '<li class="nav-item">';
// Menu utama / anak (dengan dropdown jika punya anak)
echo '<a class="nav-link ' . ($hasChildren ? 'menu-arrow' : '') . '"
href="' . ($hasChildren ? "#$collapseId" : ($menu->url ? (Route::has($menu->url) ? route($menu->url, ['menu_id' => $menu->id]) : $menu->url . '?menu_id=' . $menu->id) : '#')) . '"
' . ($hasChildren ? 'data-bs-toggle="collapse" role="button" aria-expanded="false" aria-controls="' . $collapseId . '"' : '') . '>
<span class="nav-icon">
<iconify-icon icon="{{$menu->icon}}"></iconify-icon>
<iconify-icon icon="' . $menu->icon . '"></iconify-icon>
</span>
<span class="nav-text">{{$menu->name}}</span>
</a>
@endif
<!-- children menu foreach -->
@if ($menu->children->count() > 0)
<div class="collapse" id="sidebar-{{$menu->id}}">
<ul class="nav sub-navbar-nav">
@foreach ( $menu->children as $child)
<li class="sub-nav-item">
<a class="sub-nav-link" href="{{ $child->url ? (Route::has($child->url) ? route($child->url) : $child->url) : '#' }}">
{{ $child->name }}
</a>
</li>
@endforeach
</ul>
</div>
@endif
</li>
@endforeach
<span class="nav-text">' . $menu->name . '</span>
</a>';
// Jika menu punya anak, buat sub-menu
if ($hasChildren) {
echo '<div class="collapse" id="' . $collapseId . '">
<ul class="nav sub-navbar-nav">';
renderMenu($menu->children, $depth + 1); // Rekursi dengan level lebih dalam
echo '</ul></div>';
}
echo '</li>';
}
}
@endphp
@php
// Tampilkan hanya menu dengan parent_id NULL (menu utama)
renderMenu($menus->where('parent_id', null));
@endphp
</ul>
</div>
</div>
<!-- Efek Bintang -->
<div class="animated-stars">
<div class="shooting-star"></div>
<div class="shooting-star"></div>
<div class="shooting-star"></div>
<div class="shooting-star"></div>
<div class="shooting-star"></div>
<div class="shooting-star"></div>
<div class="shooting-star"></div>
<div class="shooting-star"></div>
<div class="shooting-star"></div>
<div class="shooting-star"></div>
<div class="shooting-star"></div>
<div class="shooting-star"></div>
<div class="shooting-star"></div>
<div class="shooting-star"></div>
<div class="shooting-star"></div>
<div class="shooting-star"></div>
<div class="shooting-star"></div>
<div class="shooting-star"></div>
<div class="shooting-star"></div>
<div class="shooting-star"></div>
@for ($i = 0; $i < 20; $i++)
<div class="shooting-star"></div>
@endfor
</div>

21
resources/views/layouts/vertical.blade.php
View File

@@ -54,6 +54,13 @@
.floating-icon.animate {
animation: bounce 1s infinite;
}
.menu-arrow {
transition: transform 0.3s ease;
}
.nav-link[aria-expanded="true"] .menu-arrow i {
transform: rotate(180deg);
}
</style>
<head>
@@ -71,21 +78,9 @@
@include('layouts.partials/topbar')
<div class="page-content">
{{-- <div class="container-fluid">
@yield('content')
<div>
<iconify-icon icon="solar:chat-square-outline" class="fs-35 align-middle"></iconify-icon>
</div>
</div> --}}
<div class="container-fluid">
@yield('content')
{{-- <div class="floating-icon">
</div> --}}
@if (!Request::is('chatbot') && !Request::is('main-chatbot'))
<a href="{{ route('chatbot.index') }}" class="floating-icon">