fix dashboard pbg, add soft delete users, fix js create pbg task
This commit is contained in:
arifal
@@ -3,107 +3,99 @@ import GlobalConfig, { addThousandSeparators } from "../global-config.js";
|
||||
import ApexCharts from "apexcharts";
|
||||
import "gridjs/dist/gridjs.umd.js";
|
||||
import GeneralTable from "../table-generator.js";
|
||||
import InitDatePicker from "../utils/InitDatePicker.js";
|
||||
|
||||
var chart;
|
||||
document.addEventListener("DOMContentLoaded", async function () {
|
||||
await initChart();
|
||||
const yearPicker = document.getElementById("yearPicker");
|
||||
|
||||
async function updateDataByYear(selectedYear) {
|
||||
// Target PAD Element
|
||||
class DashboardPBG {
|
||||
async init() {
|
||||
try {
|
||||
new InitDatePicker(
|
||||
"#datepicker-dashboard-pbg",
|
||||
this.handleChangedDate.bind(this)
|
||||
).init();
|
||||
|
||||
// Load initial data
|
||||
this.updateData("latest");
|
||||
} catch (error) {
|
||||
console.error("Error initializing data:", error);
|
||||
}
|
||||
}
|
||||
|
||||
handleChangedDate(filterDate) {
|
||||
if (!filterDate) return;
|
||||
this.updateData(filterDate);
|
||||
}
|
||||
|
||||
async updateData(filterDate) {
|
||||
let resumeData = await this.getResume(filterDate);
|
||||
if (!resumeData) return;
|
||||
|
||||
let targetPAD = resumeData.target_pad.sum;
|
||||
const targetPadElement = document.getElementById("target-pad");
|
||||
if (!targetPadElement) return;
|
||||
const targetPadValue = await getDataSettings("TARGET_PAD");
|
||||
targetPadElement.textContent = formatCurrency(targetPadValue);
|
||||
targetPadElement.textContent = formatCurrency(targetPAD);
|
||||
|
||||
// Total Potensi Berkas
|
||||
const totalPotensiBerkas = document.getElementById(
|
||||
"total-potensi-berkas"
|
||||
);
|
||||
if (!totalPotensiBerkas) return;
|
||||
const totalPotensiBerkasValue = await getDataTotalPotensi(selectedYear);
|
||||
totalPotensiBerkas.textContent = formatCurrency(
|
||||
totalPotensiBerkasValue.totalData
|
||||
resumeData.total_potensi.sum
|
||||
);
|
||||
|
||||
// Total Berkas Terverifikasi
|
||||
const totalBerkasTerverifikasi = document.getElementById(
|
||||
"total-berkas-terverifikasi"
|
||||
);
|
||||
if (!totalBerkasTerverifikasi) return;
|
||||
const totalBerkasTerverifikasiValue = await getDataVerification(
|
||||
selectedYear
|
||||
);
|
||||
totalBerkasTerverifikasi.textContent = formatCurrency(
|
||||
totalBerkasTerverifikasiValue.totalData
|
||||
resumeData.verified_document.sum
|
||||
);
|
||||
|
||||
// Total Kekurangan potensi
|
||||
const totalKekuranganPotensi = document.getElementById(
|
||||
"total-kekurangan-potensi"
|
||||
);
|
||||
if (!totalKekuranganPotensi) return;
|
||||
const totalKekuranganPotensiValue =
|
||||
new Big(targetPadValue) -
|
||||
new Big(totalPotensiBerkasValue.totalData);
|
||||
totalKekuranganPotensi.textContent = formatCurrency(
|
||||
totalKekuranganPotensiValue
|
||||
resumeData.kekurangan_potensi.sum
|
||||
);
|
||||
|
||||
// Total Potensi PBG dari tata ruang
|
||||
const totalPotensiPBGTataRuang = document.getElementById(
|
||||
"total-potensi-pbd-tata-ruang"
|
||||
);
|
||||
if (!totalPotensiPBGTataRuang) return;
|
||||
const totalPotensiPBGTataRuangValue = await getDataSettings(
|
||||
"TATA_RUANG"
|
||||
);
|
||||
totalPotensiPBGTataRuang.textContent = formatCurrency(
|
||||
totalPotensiPBGTataRuangValue
|
||||
);
|
||||
totalPotensiPBGTataRuang.textContent = "Rp.-";
|
||||
|
||||
// Total Berkas Belum terverifikasi
|
||||
const totalBerkasBelumTerverifikasi = document.getElementById(
|
||||
"total-berkas-belum-terverifikasi"
|
||||
);
|
||||
if (!totalBerkasBelumTerverifikasi) return;
|
||||
const totalBerkasBelumTerverifikasiValue = await getDataNonVerification(
|
||||
selectedYear
|
||||
);
|
||||
const totalBerkasBelumTerverifikasiCount =
|
||||
totalBerkasBelumTerverifikasiValue.countData;
|
||||
totalBerkasBelumTerverifikasi.textContent = formatCurrency(
|
||||
totalBerkasBelumTerverifikasiValue.totalData
|
||||
resumeData.non_verified_document.sum
|
||||
);
|
||||
|
||||
const totalRealisasiTerbitPBG = document.getElementById(
|
||||
"realisasi-terbit-pbg"
|
||||
);
|
||||
totalRealisasiTerbitPBG.textContent = formatCurrency(
|
||||
resumeData.realisasi_terbit.sum
|
||||
);
|
||||
|
||||
const totalProsesDinasTeknis = document.getElementById(
|
||||
"processing-technical-services"
|
||||
);
|
||||
totalProsesDinasTeknis.textContent = formatCurrency(
|
||||
resumeData.proses_dinas_teknis.sum
|
||||
);
|
||||
|
||||
await this.initPieChart(resumeData);
|
||||
}
|
||||
|
||||
async initPieChart(data) {
|
||||
// Total Berkas Usaha
|
||||
const totalBerkasUsahaValue = await getDataBusiness(selectedYear);
|
||||
const totalBerkasUsahaCount = totalBerkasUsahaValue.countData;
|
||||
const totalBerkasUsahaTotalData = totalBerkasUsahaValue.totalData;
|
||||
const totalBerkasUsahaTotalData = data.verified_document.sum;
|
||||
|
||||
// Total Berkas Non Usaha
|
||||
const totalBerkasNonUsahaValue = await getDataNonBusiness(selectedYear);
|
||||
const totalBerkasNonUsahaCount = totalBerkasNonUsahaValue.countData;
|
||||
const totalBerkasNonUsahaTotalData = totalBerkasNonUsahaValue.totalData;
|
||||
const totalBerkasNonUsahaTotalData = data.non_verified_document.sum;
|
||||
|
||||
// Pie Chart Section
|
||||
let persenUsaha =
|
||||
totalBerkasBelumTerverifikasiCount > 0
|
||||
? (
|
||||
(totalBerkasUsahaCount /
|
||||
totalBerkasBelumTerverifikasiCount) *
|
||||
100
|
||||
).toFixed(2)
|
||||
: "0";
|
||||
let persenUsaha = data.verified_document.percentage;
|
||||
|
||||
let persenNonUsaha =
|
||||
totalBerkasBelumTerverifikasiCount > 0
|
||||
? (
|
||||
(totalBerkasNonUsahaCount /
|
||||
totalBerkasBelumTerverifikasiCount) *
|
||||
100
|
||||
).toFixed(2)
|
||||
: "0";
|
||||
let persenNonUsaha = data.non_verified_document.percentage;
|
||||
|
||||
const dataSeriesPieChart = [
|
||||
Number(persenUsaha),
|
||||
@@ -123,7 +115,41 @@ document.addEventListener("DOMContentLoaded", async function () {
|
||||
).textContent = persenUsaha + "%";
|
||||
|
||||
updatePieChart(dataSeriesPieChart, labelsPieChart);
|
||||
}
|
||||
|
||||
async getResume(filterByDate) {
|
||||
try {
|
||||
const response = await fetch(
|
||||
`${GlobalConfig.apiHost}/api/bigdata-resume?filterByDate=${filterByDate}`,
|
||||
{
|
||||
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 null;
|
||||
}
|
||||
}
|
||||
}
|
||||
document.addEventListener("DOMContentLoaded", async function (e) {
|
||||
await new DashboardPBG().init();
|
||||
await initChart();
|
||||
|
||||
async function updateDataByYear() {
|
||||
// Load all Tourism location
|
||||
const allLocation = await getAllLocation();
|
||||
console.log(allLocation);
|
||||
@@ -159,42 +185,6 @@ document.addEventListener("DOMContentLoaded", async function () {
|
||||
.bindTooltip(loc.name, { permanent: false, direction: "top" }); // Tooltip saat di-hover
|
||||
});
|
||||
|
||||
// Realisasi terbit PBG
|
||||
const totalRealisasiTerbitPBG = document.getElementById(
|
||||
"realisasi-terbit-pbg"
|
||||
);
|
||||
if (!totalRealisasiTerbitPBG) return;
|
||||
const totalRealisasiTerbitPBGValue = await getDataSettings(
|
||||
"REALISASI_TERBIT_PBG_SUM"
|
||||
);
|
||||
totalRealisasiTerbitPBG.textContent = formatCurrency(
|
||||
totalRealisasiTerbitPBGValue
|
||||
);
|
||||
|
||||
// Menunggu Klik DPMPTSP
|
||||
const totalMenungguKlikDpmptsp = document.getElementById(
|
||||
"waiting-click-dpmptsp"
|
||||
);
|
||||
if (!totalMenungguKlikDpmptsp) return;
|
||||
const totalMenungguKlikDpmptspValue = await getDataSettings(
|
||||
"MENUNGGU_KLIK_DPMPTSP_SUM"
|
||||
);
|
||||
totalMenungguKlikDpmptsp.textContent = formatCurrency(
|
||||
totalMenungguKlikDpmptspValue
|
||||
);
|
||||
|
||||
// Proses Dinas Teknis
|
||||
const totalProsesDinasTeknis = document.getElementById(
|
||||
"processing-technical-services"
|
||||
);
|
||||
if (!totalProsesDinasTeknis) return;
|
||||
const totalProsesDinasTeknisValue = await getDataSettings(
|
||||
"PROSES_DINAS_TEKNIS_SUM"
|
||||
);
|
||||
totalProsesDinasTeknis.textContent = formatCurrency(
|
||||
totalProsesDinasTeknisValue
|
||||
);
|
||||
|
||||
// Load Tabel Baru di Update
|
||||
const tableLastUpdated = new GeneralTable(
|
||||
"pbg-filter-by-updated-at",
|
||||
@@ -255,188 +245,9 @@ document.addEventListener("DOMContentLoaded", async function () {
|
||||
).hidden = true;
|
||||
}
|
||||
|
||||
await updateDataByYear(yearPicker.value);
|
||||
|
||||
yearPicker.addEventListener("change", async function () {
|
||||
console.log("event change dropdown");
|
||||
await updateDataByYear(yearPicker.value);
|
||||
});
|
||||
await updateDataByYear();
|
||||
});
|
||||
|
||||
async function 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 ?? 0; // Pastikan tidak error jika data kosong
|
||||
} catch (error) {
|
||||
console.error("Error fetching data:", error);
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
|
||||
async function getDataTotalPotensi(year) {
|
||||
try {
|
||||
const response = await fetch(
|
||||
`${GlobalConfig.apiHost}/api/all-task-documents?year=${year}`,
|
||||
{
|
||||
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 {
|
||||
totalData: data.data.total,
|
||||
};
|
||||
} catch (error) {
|
||||
console.error("Error fetching chart data:", error);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
async function getDataVerification(year) {
|
||||
try {
|
||||
const response = await fetch(
|
||||
`${GlobalConfig.apiHost}/api/verification-documents?year=${year}`,
|
||||
{
|
||||
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 {
|
||||
totalData: data.data.total,
|
||||
};
|
||||
} catch (error) {
|
||||
console.error("Error fetching chart data:", error);
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
|
||||
async function getDataNonVerification(year) {
|
||||
try {
|
||||
const response = await fetch(
|
||||
`${GlobalConfig.apiHost}/api/non-verification-documents?year=${year}`,
|
||||
{
|
||||
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 {
|
||||
countData: data.data.count,
|
||||
totalData: data.data.total,
|
||||
};
|
||||
} catch (error) {
|
||||
console.error("Error fetching chart data:", error);
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
|
||||
async function getDataBusiness(year) {
|
||||
try {
|
||||
const response = await fetch(
|
||||
`${GlobalConfig.apiHost}/api/business-documents?year=${year}`,
|
||||
{
|
||||
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 {
|
||||
countData: data.data.count,
|
||||
totalData: data.data.total,
|
||||
};
|
||||
} catch (error) {
|
||||
console.error("Error fetching chart data:", error);
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
|
||||
async function getDataNonBusiness(year) {
|
||||
try {
|
||||
const response = await fetch(
|
||||
`${GlobalConfig.apiHost}/api/non-business-documents?year=${year}`,
|
||||
{
|
||||
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 {
|
||||
countData: data.data.count,
|
||||
totalData: data.data.total,
|
||||
};
|
||||
} catch (error) {
|
||||
console.error("Error fetching chart data:", error);
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
|
||||
async function getAllLocation() {
|
||||
try {
|
||||
const response = await fetch(
|
||||
|
||||
Reference in New Issue
Block a user