add dashboard, fix get data scraping, fix table
This commit is contained in:
@@ -26,4 +26,4 @@
|
||||
window.innerWidth <= 1140
|
||||
? e.setAttribute("data-sidebar-size", "hidden")
|
||||
: e.setAttribute("data-sidebar-size", config.menu.size));
|
||||
})();
|
||||
})();
|
||||
868
resources/js/dashboards/bigdata.js
Normal file
868
resources/js/dashboards/bigdata.js
Normal file
@@ -0,0 +1,868 @@
|
||||
import ApexCharts from "apexcharts";
|
||||
|
||||
import jsVectorMap from "jsvectormap/dist/jsvectormap.js";
|
||||
import 'jsvectormap/dist/maps/world-merc.js';
|
||||
import 'jsvectormap/dist/maps/world.js';
|
||||
import GlobalConfig, {addThousandSeparators} from '../global-config.js';
|
||||
|
||||
class BigData {
|
||||
init(){
|
||||
this.initChartKekuranganPotensi();
|
||||
this.initChartTargetPAD();
|
||||
this.initChartUsaha();
|
||||
this.initChartNonUsaha();
|
||||
}
|
||||
|
||||
initChartTargetPAD() {
|
||||
console.log("api host : " + GlobalConfig.apiHost);
|
||||
fetch(`${GlobalConfig.apiHost}/api/all-task-documents`)
|
||||
.then(response => {
|
||||
if(!response.ok){
|
||||
throw new Error("Network response was not ok");
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then(data => {
|
||||
const seriesData = data.data.series;
|
||||
document.getElementById("countTargetPAD").innerText = `${data.data.count} Berkas`;
|
||||
document.getElementById("totalTargetPAD").innerText = `Rp.${addThousandSeparators(data.data.total)}`;
|
||||
var options1 = {
|
||||
chart: {
|
||||
type: 'area',
|
||||
height: 50,
|
||||
sparkline: {
|
||||
enabled: true
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
data: seriesData
|
||||
}],
|
||||
stroke: {
|
||||
width: 2,
|
||||
curve: 'smooth'
|
||||
},
|
||||
markers: {
|
||||
size: 0
|
||||
},
|
||||
colors: ["#7e67fe"],
|
||||
tooltip: {
|
||||
fixed: {
|
||||
enabled: false
|
||||
},
|
||||
x: {
|
||||
show: false
|
||||
},
|
||||
y: {
|
||||
title: {
|
||||
formatter: function (seriesName) {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
},
|
||||
marker: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
fill: {
|
||||
opacity: [1],
|
||||
type: ['gradient'],
|
||||
gradient: {
|
||||
type: "vertical",
|
||||
// shadeIntensity: 1,
|
||||
inverseColors: false,
|
||||
opacityFrom: 0.5,
|
||||
opacityTo: 0,
|
||||
stops: [0, 100]
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
new ApexCharts(document.querySelector("#chart12"), options1).render();
|
||||
})
|
||||
.catch(error => {
|
||||
console.error("error fetching chart dara : ", error);
|
||||
});
|
||||
}
|
||||
|
||||
initChartUsaha(){
|
||||
fetch(`${GlobalConfig.apiHost}/api/business-documents`)
|
||||
.then(response => {
|
||||
if(!response.ok){
|
||||
throw new Error("Network response was not ok");
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then(data => {
|
||||
const seriesData = data.data.series;
|
||||
document.getElementById("countBusinessDocuments").innerText = `${data.data.count} Berkas`;
|
||||
document.getElementById("totalBusinessDocuments").innerText = `Rp.${addThousandSeparators(data.data.total)}`;
|
||||
var options1 = {
|
||||
chart: {
|
||||
type: 'area',
|
||||
height: 50,
|
||||
sparkline: {
|
||||
enabled: true
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
data: seriesData
|
||||
}],
|
||||
stroke: {
|
||||
width: 2,
|
||||
curve: 'smooth'
|
||||
},
|
||||
markers: {
|
||||
size: 0
|
||||
},
|
||||
colors: ["#7e67fe"],
|
||||
tooltip: {
|
||||
fixed: {
|
||||
enabled: false
|
||||
},
|
||||
x: {
|
||||
show: false
|
||||
},
|
||||
y: {
|
||||
title: {
|
||||
formatter: function (seriesName) {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
},
|
||||
marker: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
fill: {
|
||||
opacity: [1],
|
||||
type: ['gradient'],
|
||||
gradient: {
|
||||
type: "vertical",
|
||||
// shadeIntensity: 1,
|
||||
inverseColors: false,
|
||||
opacityFrom: 0.5,
|
||||
opacityTo: 0,
|
||||
stops: [0, 100]
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
new ApexCharts(document.querySelector("#chartBusinessDocuments"), options1).render();
|
||||
})
|
||||
.catch(error => {
|
||||
console.error("error fetching chart dara : ", error);
|
||||
});
|
||||
}
|
||||
|
||||
initChartNonUsaha(){
|
||||
fetch(`${GlobalConfig.apiHost}/api/non-business-documents`)
|
||||
.then(response => {
|
||||
if(!response.ok){
|
||||
throw new Error("Network response was not ok");
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then(data => {
|
||||
const seriesData = data.data.series;
|
||||
document.getElementById("countNonUsaha").innerText = `${data.data.count} Berkas`;
|
||||
document.getElementById("totalNonUsaha").innerText = `Rp.${addThousandSeparators(data.data.total)}`;
|
||||
var options1 = {
|
||||
chart: {
|
||||
type: 'area',
|
||||
height: 50,
|
||||
sparkline: {
|
||||
enabled: true
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
data: seriesData
|
||||
}],
|
||||
stroke: {
|
||||
width: 2,
|
||||
curve: 'smooth'
|
||||
},
|
||||
markers: {
|
||||
size: 0
|
||||
},
|
||||
colors: ["#7e67fe"],
|
||||
tooltip: {
|
||||
fixed: {
|
||||
enabled: false
|
||||
},
|
||||
x: {
|
||||
show: false
|
||||
},
|
||||
y: {
|
||||
title: {
|
||||
formatter: function (seriesName) {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
},
|
||||
marker: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
fill: {
|
||||
opacity: [1],
|
||||
type: ['gradient'],
|
||||
gradient: {
|
||||
type: "vertical",
|
||||
// shadeIntensity: 1,
|
||||
inverseColors: false,
|
||||
opacityFrom: 0.5,
|
||||
opacityTo: 0,
|
||||
stops: [0, 100]
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
new ApexCharts(document.querySelector("#chartNonUsaha"), options1).render();
|
||||
})
|
||||
.catch(error => {
|
||||
console.error("error fetching chart dara : ", error);
|
||||
});
|
||||
}
|
||||
|
||||
initChartKekuranganPotensi(){
|
||||
var options1 = {
|
||||
chart: {
|
||||
type: 'area',
|
||||
height: 50,
|
||||
sparkline: {
|
||||
enabled: true
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
data: [80, 100, 50, 30, 90]
|
||||
}],
|
||||
stroke: {
|
||||
width: 2,
|
||||
curve: 'smooth'
|
||||
},
|
||||
markers: {
|
||||
size: 0
|
||||
},
|
||||
colors: ["#7e67fe"],
|
||||
tooltip: {
|
||||
fixed: {
|
||||
enabled: false
|
||||
},
|
||||
x: {
|
||||
show: false
|
||||
},
|
||||
y: {
|
||||
title: {
|
||||
formatter: function (seriesName) {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
},
|
||||
marker: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
fill: {
|
||||
opacity: [1],
|
||||
type: ['gradient'],
|
||||
gradient: {
|
||||
type: "vertical",
|
||||
// shadeIntensity: 1,
|
||||
inverseColors: false,
|
||||
opacityFrom: 0.5,
|
||||
opacityTo: 0,
|
||||
stops: [0, 100]
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
new ApexCharts(document.querySelector("#chart01"), options1).render();
|
||||
|
||||
var options1 = {
|
||||
chart: {
|
||||
type: 'area',
|
||||
height: 50,
|
||||
sparkline: {
|
||||
enabled: true
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
data: [87, 54, 4, 76, 31, 95, 70, 92, 53, 9, 6]
|
||||
}],
|
||||
stroke: {
|
||||
width: 2,
|
||||
curve: 'smooth'
|
||||
},
|
||||
markers: {
|
||||
size: 0
|
||||
},
|
||||
colors: ["#7e67fe"],
|
||||
tooltip: {
|
||||
fixed: {
|
||||
enabled: false
|
||||
},
|
||||
x: {
|
||||
show: false
|
||||
},
|
||||
y: {
|
||||
title: {
|
||||
formatter: function (seriesName) {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
},
|
||||
marker: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
fill: {
|
||||
opacity: [1],
|
||||
type: ['gradient'],
|
||||
gradient: {
|
||||
type: "vertical",
|
||||
// shadeIntensity: 1,
|
||||
inverseColors: false,
|
||||
opacityFrom: 0.5,
|
||||
opacityTo: 0,
|
||||
stops: [0, 100]
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
new ApexCharts(document.querySelector("#chart02"), options1).render();
|
||||
|
||||
var options1 = {
|
||||
chart: {
|
||||
type: 'area',
|
||||
height: 50,
|
||||
sparkline: {
|
||||
enabled: true
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
data: [41, 42, 35, 42, 6, 12, 13, 22, 42, 94, 95]
|
||||
}],
|
||||
stroke: {
|
||||
width: 2,
|
||||
curve: 'smooth'
|
||||
},
|
||||
markers: {
|
||||
size: 0
|
||||
},
|
||||
colors: ["#7e67fe"],
|
||||
tooltip: {
|
||||
fixed: {
|
||||
enabled: false
|
||||
},
|
||||
x: {
|
||||
show: false
|
||||
},
|
||||
y: {
|
||||
title: {
|
||||
formatter: function (seriesName) {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
},
|
||||
marker: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
fill: {
|
||||
opacity: [1],
|
||||
type: ['gradient'],
|
||||
gradient: {
|
||||
type: "vertical",
|
||||
// shadeIntensity: 1,
|
||||
inverseColors: false,
|
||||
opacityFrom: 0.5,
|
||||
opacityTo: 0,
|
||||
stops: [0, 100]
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
new ApexCharts(document.querySelector("#chart03"), options1).render();
|
||||
|
||||
// var options1 = {
|
||||
// chart: {
|
||||
// type: 'area',
|
||||
// height: 50,
|
||||
// sparkline: {
|
||||
// enabled: true
|
||||
// }
|
||||
// },
|
||||
// series: [{
|
||||
// data: [8, 41, 40, 48, 77, 35, 0, 77, 63, 100, 71]
|
||||
// }],
|
||||
// stroke: {
|
||||
// width: 2,
|
||||
// curve: 'smooth'
|
||||
// },
|
||||
// markers: {
|
||||
// size: 0
|
||||
// },
|
||||
// colors: ["#7e67fe"],
|
||||
// tooltip: {
|
||||
// fixed: {
|
||||
// enabled: false
|
||||
// },
|
||||
// x: {
|
||||
// show: false
|
||||
// },
|
||||
// y: {
|
||||
// title: {
|
||||
// formatter: function (seriesName) {
|
||||
// return ''
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
// marker: {
|
||||
// show: false
|
||||
// }
|
||||
// },
|
||||
// fill: {
|
||||
// opacity: [1],
|
||||
// type: ['gradient'],
|
||||
// gradient: {
|
||||
// type: "vertical",
|
||||
// // shadeIntensity: 1,
|
||||
// inverseColors: false,
|
||||
// opacityFrom: 0.5,
|
||||
// opacityTo: 0,
|
||||
// stops: [0, 100]
|
||||
// },
|
||||
// },
|
||||
// }
|
||||
|
||||
// new ApexCharts(document.querySelector("#chart04"), options1).render();
|
||||
|
||||
// var options1 = {
|
||||
// chart: {
|
||||
// type: 'area',
|
||||
// height: 50,
|
||||
// sparkline: {
|
||||
// enabled: true
|
||||
// }
|
||||
// },
|
||||
// series: [{
|
||||
// data: [80, 100, 50, 30, 90]
|
||||
// }],
|
||||
// stroke: {
|
||||
// width: 2,
|
||||
// curve: 'smooth'
|
||||
// },
|
||||
// markers: {
|
||||
// size: 0
|
||||
// },
|
||||
// colors: ["#7e67fe"],
|
||||
// tooltip: {
|
||||
// fixed: {
|
||||
// enabled: false
|
||||
// },
|
||||
// x: {
|
||||
// show: false
|
||||
// },
|
||||
// y: {
|
||||
// title: {
|
||||
// formatter: function (seriesName) {
|
||||
// return ''
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
// marker: {
|
||||
// show: false
|
||||
// }
|
||||
// },
|
||||
// fill: {
|
||||
// opacity: [1],
|
||||
// type: ['gradient'],
|
||||
// gradient: {
|
||||
// type: "vertical",
|
||||
// // shadeIntensity: 1,
|
||||
// inverseColors: false,
|
||||
// opacityFrom: 0.5,
|
||||
// opacityTo: 0,
|
||||
// stops: [0, 100]
|
||||
// },
|
||||
// },
|
||||
// }
|
||||
|
||||
// new ApexCharts(document.querySelector("#chart05"), options1).render();
|
||||
|
||||
var options1 = {
|
||||
chart: {
|
||||
type: 'area',
|
||||
height: 50,
|
||||
sparkline: {
|
||||
enabled: true
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
data: [87, 54, 4, 76, 31, 95, 70, 92, 53, 9, 6]
|
||||
}],
|
||||
stroke: {
|
||||
width: 2,
|
||||
curve: 'smooth'
|
||||
},
|
||||
markers: {
|
||||
size: 0
|
||||
},
|
||||
colors: ["#7e67fe"],
|
||||
tooltip: {
|
||||
fixed: {
|
||||
enabled: false
|
||||
},
|
||||
x: {
|
||||
show: false
|
||||
},
|
||||
y: {
|
||||
title: {
|
||||
formatter: function (seriesName) {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
},
|
||||
marker: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
fill: {
|
||||
opacity: [1],
|
||||
type: ['gradient'],
|
||||
gradient: {
|
||||
type: "vertical",
|
||||
// shadeIntensity: 1,
|
||||
inverseColors: false,
|
||||
opacityFrom: 0.5,
|
||||
opacityTo: 0,
|
||||
stops: [0, 100]
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
new ApexCharts(document.querySelector("#chart06"), options1).render();
|
||||
|
||||
var options1 = {
|
||||
chart: {
|
||||
type: 'area',
|
||||
height: 50,
|
||||
sparkline: {
|
||||
enabled: true
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
data: [41, 42, 35, 42, 6, 12, 13, 22, 42, 94, 95]
|
||||
}],
|
||||
stroke: {
|
||||
width: 2,
|
||||
curve: 'smooth'
|
||||
},
|
||||
markers: {
|
||||
size: 0
|
||||
},
|
||||
colors: ["#7e67fe"],
|
||||
tooltip: {
|
||||
fixed: {
|
||||
enabled: false
|
||||
},
|
||||
x: {
|
||||
show: false
|
||||
},
|
||||
y: {
|
||||
title: {
|
||||
formatter: function (seriesName) {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
},
|
||||
marker: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
fill: {
|
||||
opacity: [1],
|
||||
type: ['gradient'],
|
||||
gradient: {
|
||||
type: "vertical",
|
||||
// shadeIntensity: 1,
|
||||
inverseColors: false,
|
||||
opacityFrom: 0.5,
|
||||
opacityTo: 0,
|
||||
stops: [0, 100]
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
new ApexCharts(document.querySelector("#chart07"), options1).render();
|
||||
|
||||
var options1 = {
|
||||
chart: {
|
||||
type: 'area',
|
||||
height: 50,
|
||||
sparkline: {
|
||||
enabled: true
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
data: [8, 41, 40, 48, 77, 35, 0, 77, 63, 100, 71]
|
||||
}],
|
||||
stroke: {
|
||||
width: 2,
|
||||
curve: 'smooth'
|
||||
},
|
||||
markers: {
|
||||
size: 0
|
||||
},
|
||||
colors: ["#7e67fe"],
|
||||
tooltip: {
|
||||
fixed: {
|
||||
enabled: false
|
||||
},
|
||||
x: {
|
||||
show: false
|
||||
},
|
||||
y: {
|
||||
title: {
|
||||
formatter: function (seriesName) {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
},
|
||||
marker: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
fill: {
|
||||
opacity: [1],
|
||||
type: ['gradient'],
|
||||
gradient: {
|
||||
type: "vertical",
|
||||
// shadeIntensity: 1,
|
||||
inverseColors: false,
|
||||
opacityFrom: 0.5,
|
||||
opacityTo: 0,
|
||||
stops: [0, 100]
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
new ApexCharts(document.querySelector("#chart08"), options1).render();
|
||||
|
||||
var options1 = {
|
||||
chart: {
|
||||
type: 'area',
|
||||
height: 50,
|
||||
sparkline: {
|
||||
enabled: true
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
data: [80, 100, 50, 30, 90]
|
||||
}],
|
||||
stroke: {
|
||||
width: 2,
|
||||
curve: 'smooth'
|
||||
},
|
||||
markers: {
|
||||
size: 0
|
||||
},
|
||||
colors: ["#7e67fe"],
|
||||
tooltip: {
|
||||
fixed: {
|
||||
enabled: false
|
||||
},
|
||||
x: {
|
||||
show: false
|
||||
},
|
||||
y: {
|
||||
title: {
|
||||
formatter: function (seriesName) {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
},
|
||||
marker: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
fill: {
|
||||
opacity: [1],
|
||||
type: ['gradient'],
|
||||
gradient: {
|
||||
type: "vertical",
|
||||
// shadeIntensity: 1,
|
||||
inverseColors: false,
|
||||
opacityFrom: 0.5,
|
||||
opacityTo: 0,
|
||||
stops: [0, 100]
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
new ApexCharts(document.querySelector("#chart09"), options1).render();
|
||||
|
||||
var options1 = {
|
||||
chart: {
|
||||
type: 'area',
|
||||
height: 50,
|
||||
sparkline: {
|
||||
enabled: true
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
data: [87, 54, 4, 76, 31, 95, 70, 92, 53, 9, 6]
|
||||
}],
|
||||
stroke: {
|
||||
width: 2,
|
||||
curve: 'smooth'
|
||||
},
|
||||
markers: {
|
||||
size: 0
|
||||
},
|
||||
colors: ["#7e67fe"],
|
||||
tooltip: {
|
||||
fixed: {
|
||||
enabled: false
|
||||
},
|
||||
x: {
|
||||
show: false
|
||||
},
|
||||
y: {
|
||||
title: {
|
||||
formatter: function (seriesName) {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
},
|
||||
marker: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
fill: {
|
||||
opacity: [1],
|
||||
type: ['gradient'],
|
||||
gradient: {
|
||||
type: "vertical",
|
||||
// shadeIntensity: 1,
|
||||
inverseColors: false,
|
||||
opacityFrom: 0.5,
|
||||
opacityTo: 0,
|
||||
stops: [0, 100]
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
new ApexCharts(document.querySelector("#chart10"), options1).render();
|
||||
|
||||
var options1 = {
|
||||
chart: {
|
||||
type: 'area',
|
||||
height: 50,
|
||||
sparkline: {
|
||||
enabled: true
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
data: [41, 42, 35, 42, 6, 12, 13, 22, 42, 94, 95]
|
||||
}],
|
||||
stroke: {
|
||||
width: 2,
|
||||
curve: 'smooth'
|
||||
},
|
||||
markers: {
|
||||
size: 0
|
||||
},
|
||||
colors: ["#7e67fe"],
|
||||
tooltip: {
|
||||
fixed: {
|
||||
enabled: false
|
||||
},
|
||||
x: {
|
||||
show: false
|
||||
},
|
||||
y: {
|
||||
title: {
|
||||
formatter: function (seriesName) {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
},
|
||||
marker: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
fill: {
|
||||
opacity: [1],
|
||||
type: ['gradient'],
|
||||
gradient: {
|
||||
type: "vertical",
|
||||
// shadeIntensity: 1,
|
||||
inverseColors: false,
|
||||
opacityFrom: 0.5,
|
||||
opacityTo: 0,
|
||||
stops: [0, 100]
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
new ApexCharts(document.querySelector("#chart11"), options1).render();
|
||||
|
||||
// var options1 = {
|
||||
// chart: {
|
||||
// type: 'area',
|
||||
// height: 50,
|
||||
// sparkline: {
|
||||
// enabled: true
|
||||
// }
|
||||
// },
|
||||
// series: [{
|
||||
// data: [8, 41, 40, 48, 77, 35, 0, 77, 63, 100, 71]
|
||||
// }],
|
||||
// stroke: {
|
||||
// width: 2,
|
||||
// curve: 'smooth'
|
||||
// },
|
||||
// markers: {
|
||||
// size: 0
|
||||
// },
|
||||
// colors: ["#7e67fe"],
|
||||
// tooltip: {
|
||||
// fixed: {
|
||||
// enabled: false
|
||||
// },
|
||||
// x: {
|
||||
// show: false
|
||||
// },
|
||||
// y: {
|
||||
// title: {
|
||||
// formatter: function (seriesName) {
|
||||
// return ''
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
// marker: {
|
||||
// show: false
|
||||
// }
|
||||
// },
|
||||
// fill: {
|
||||
// opacity: [1],
|
||||
// type: ['gradient'],
|
||||
// gradient: {
|
||||
// type: "vertical",
|
||||
// // shadeIntensity: 1,
|
||||
// inverseColors: false,
|
||||
// opacityFrom: 0.5,
|
||||
// opacityTo: 0,
|
||||
// stops: [0, 100]
|
||||
// },
|
||||
// },
|
||||
// }
|
||||
|
||||
// new ApexCharts(document.querySelector("#chart12"), options1).render();
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function (e) {
|
||||
new BigData().init();
|
||||
});
|
||||
12
resources/js/global-config.js
Normal file
12
resources/js/global-config.js
Normal file
@@ -0,0 +1,12 @@
|
||||
const GlobalConfig = {
|
||||
apiHost: 'http://localhost:8000'
|
||||
};
|
||||
|
||||
export default GlobalConfig;
|
||||
|
||||
export function addThousandSeparators(number, fractionDigits = 2) {
|
||||
return new Intl.NumberFormat('en-US', {
|
||||
minimumFractionDigits: fractionDigits,
|
||||
maximumFractionDigits: fractionDigits,
|
||||
}).format(number);
|
||||
}
|
||||
23
resources/js/settings/syncronize/syncronize.js
Normal file
23
resources/js/settings/syncronize/syncronize.js
Normal file
@@ -0,0 +1,23 @@
|
||||
class SyncronizeTask {
|
||||
init(){
|
||||
this.onSyncSubmit();
|
||||
}
|
||||
onSyncSubmit(){
|
||||
const form = document.getElementById("sync-form");
|
||||
if(form){
|
||||
form.addEventListener("submit", function (event) {
|
||||
event.preventDefault(); // Prevent the default form submission
|
||||
|
||||
const button = document.getElementById("btn-sync-submit");
|
||||
if (button) {
|
||||
button.disabled = true;
|
||||
button.innerText = "Processing...";
|
||||
}
|
||||
form.submit();
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
document.addEventListener('DOMContentLoaded', function (e) {
|
||||
new SyncronizeTask().init();
|
||||
});
|
||||
128
resources/js/tables/common-table.js
Normal file
128
resources/js/tables/common-table.js
Normal file
@@ -0,0 +1,128 @@
|
||||
import { Grid } from "gridjs/dist/gridjs.umd.js";
|
||||
import gridjs from 'gridjs/dist/gridjs.umd.js'
|
||||
import 'gridjs/dist/gridjs.umd.js'
|
||||
import GlobalConfig from "../global-config";
|
||||
|
||||
class CommonTable {
|
||||
init() {
|
||||
// this.CommonTableInit();
|
||||
this.CommonTableInitWithFetchApi();
|
||||
}
|
||||
|
||||
CommonTableInit() {
|
||||
new Grid({
|
||||
columns: [
|
||||
{
|
||||
name: 'ID',
|
||||
formatter: (function (cell) {
|
||||
return gridjs.html('<span class="fw-semibold">' + cell + '</span>');
|
||||
})
|
||||
},
|
||||
"Name",
|
||||
{
|
||||
name: 'Email',
|
||||
formatter: (function (cell) {
|
||||
return gridjs.html('<a href="">' + cell + '</a>');
|
||||
})
|
||||
},
|
||||
"Position", "Company", "Country",
|
||||
{
|
||||
name: 'Actions',
|
||||
width: '120px',
|
||||
formatter: (function (cell) {
|
||||
return gridjs.html(`
|
||||
<div class="d-flex justify-items-end gap-10">
|
||||
<a href="#" class="text-primary text-decoration-underline me-2">Details</a>
|
||||
<a href="#" class="text-warning text-decoration-underline me-2">Update</a>
|
||||
<a href="#" class="text-danger text-decoration-underline">Delete</a>
|
||||
</div>
|
||||
`);
|
||||
})
|
||||
},
|
||||
],
|
||||
pagination: {
|
||||
limit: 10
|
||||
},
|
||||
sort: true,
|
||||
search: true,
|
||||
data: [
|
||||
["11", "Alice", "alice@example.com", "Software Engineer", "ABC Company", "United States"],
|
||||
["12", "Bob", "bob@example.com", "Product Manager", "XYZ Inc", "Canada"],
|
||||
["13", "Charlie", "charlie@example.com", "Data Analyst", "123 Corp", "Australia"],
|
||||
["14", "David", "david@example.com", "UI/UX Designer", "456 Ltd", "United Kingdom"],
|
||||
["15", "Eve", "eve@example.com", "Marketing Specialist", "789 Enterprises", "France"],
|
||||
["11", "Alice", "alice@example.com", "Software Engineer", "ABC Company", "United States"],
|
||||
["12", "Bob", "bob@example.com", "Product Manager", "XYZ Inc", "Canada"],
|
||||
["13", "Charlie", "charlie@example.com", "Data Analyst", "123 Corp", "Australia"],
|
||||
["14", "David", "david@example.com", "UI/UX Designer", "456 Ltd", "United Kingdom"],
|
||||
["15", "Eve", "eve@example.com", "Marketing Specialist", "789 Enterprises", "France"],
|
||||
["11", "Alice", "alice@example.com", "Software Engineer", "ABC Company", "United States"],
|
||||
["12", "Bob", "bob@example.com", "Product Manager", "XYZ Inc", "Canada"],
|
||||
["13", "Charlie", "charlie@example.com", "Data Analyst", "123 Corp", "Australia"],
|
||||
["14", "David", "david@example.com", "UI/UX Designer", "456 Ltd", "United Kingdom"],
|
||||
["15", "Eve", "eve@example.com", "Marketing Specialist", "789 Enterprises", "France"],
|
||||
["11", "Alice", "alice@example.com", "Software Engineer", "ABC Company", "United States"],
|
||||
["12", "Bob", "bob@example.com", "Product Manager", "XYZ Inc", "Canada"],
|
||||
["13", "Charlie", "charlie@example.com", "Data Analyst", "123 Corp", "Australia"],
|
||||
["14", "David", "david@example.com", "UI/UX Designer", "456 Ltd", "United Kingdom"],
|
||||
["15", "Eve", "eve@example.com", "Marketing Specialist", "789 Enterprises", "France"],
|
||||
["16", "Frank", "frank@example.com", "HR Manager", "ABC Company", "Germany"],
|
||||
["17", "Grace", "grace@example.com", "Financial Analyst", "XYZ Inc", "Japan"],
|
||||
["18", "Hannah", "hannah@example.com", "Sales Representative", "123 Corp", "Brazil"],
|
||||
["19", "Ian", "ian@example.com", "Software Developer", "456 Ltd", "India"],
|
||||
["20", "Jane", "jane@example.com", "Operations Manager", "789 Enterprises", "China"]
|
||||
]
|
||||
}).render(document.getElementById("common-table"));
|
||||
}
|
||||
|
||||
CommonTableInitWithFetchApi(){
|
||||
fetch(`${GlobalConfig.apiHost}/users`)
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
console.log("check log response");
|
||||
console.log(data.data);
|
||||
new Grid({
|
||||
columns: [
|
||||
{
|
||||
name: 'id',
|
||||
formatter: (function (cell) {
|
||||
return gridjs.html('<span class="fw-semibold">' + cell + '</span>');
|
||||
})
|
||||
},
|
||||
"name",
|
||||
{
|
||||
name: 'email',
|
||||
formatter: (function (cell) {
|
||||
return gridjs.html('<a href="">' + cell + '</a>');
|
||||
})
|
||||
},
|
||||
"position", "firstname", "lastname",
|
||||
{
|
||||
name: 'Actions',
|
||||
width: '120px',
|
||||
formatter: (function (cell) {
|
||||
return gridjs.html(`
|
||||
<div class="d-flex justify-items-end gap-10">
|
||||
<a href="#" class="text-primary text-decoration-underline me-2">Details</a>
|
||||
<a href="#" class="text-warning text-decoration-underline me-2">Update</a>
|
||||
<a href="#" class="text-danger text-decoration-underline">Delete</a>
|
||||
</div>
|
||||
`);
|
||||
})
|
||||
},
|
||||
],
|
||||
pagination: {
|
||||
limit: 10
|
||||
},
|
||||
sort: true,
|
||||
search: true,
|
||||
data: data.data
|
||||
}).render(document.getElementById("common-table"));
|
||||
})
|
||||
.catch((error) => console.error("Error fetching data: " + error));
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function (e) {
|
||||
new CommonTable().init();
|
||||
});
|
||||
@@ -13,11 +13,11 @@ class="authentication-bg"
|
||||
<div class="card-body p-5">
|
||||
<div class="text-center">
|
||||
<div class="mx-auto mb-4 text-center auth-logo">
|
||||
<a href="{{ route('any', 'index') }}" class="logo-dark">
|
||||
<a href="{{ route('home', 'index') }}" class="logo-dark">
|
||||
<img src="/images/logo-dark.png" height="32" alt="logo dark">
|
||||
</a>
|
||||
|
||||
<a href="{{ route('any', 'index') }}" class="logo-light">
|
||||
<a href="{{ route('home', 'index') }}" class="logo-light">
|
||||
<img src="/images/logo-light.png" height="28" alt="logo light">
|
||||
</a>
|
||||
</div>
|
||||
@@ -27,7 +27,7 @@ class="authentication-bg"
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form action="{{ route('any', 'index') }}" class="mt-4">
|
||||
<form action="{{ route('', 'index') }}" class="mt-4">
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="example-name">Name</label>
|
||||
<input type="name" id="example-name" name="example-name"
|
||||
|
||||
209
resources/views/dashboards/bigdata.blade.php
Normal file
209
resources/views/dashboards/bigdata.blade.php
Normal file
@@ -0,0 +1,209 @@
|
||||
@extends('layouts.vertical', ['subtitle' => 'Dashboards'])
|
||||
|
||||
@section('content')
|
||||
|
||||
@include('layouts.partials/page-title', ['title' => 'Dashboards', 'subtitle' => 'SIBEDAS'])
|
||||
|
||||
<div class="row">
|
||||
<!-- Card 1 -->
|
||||
<div class="col-md-6 col-xl-3">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<p class="text-muted mb-0 text-truncate">Total Potensi Berkas</p>
|
||||
<h5 class="text-dark mt-2 mb-0">2432 Pemohon</h5>
|
||||
<h3 class="text-dark mt-2 mb-0">Rp.24.416.920.070</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="chart01"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card 2 -->
|
||||
<div class="col-md-6 col-xl-3">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<p class="text-muted mb-0 text-truncate">Berkas Terverifikasi</p>
|
||||
<h5 class="text-dark mt-2 mb-0">1572 Berkas</h5>
|
||||
<h3 class="text-dark mt-2 mb-0">Rp.17.522.994.118</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="chart02"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card 3 -->
|
||||
<div class="col-md-6 col-xl-3">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<p class="text-muted mb-0 text-truncate">Berkas Belum Terverifikasi</p>
|
||||
<h5 class="text-dark mt-2 mb-0">860 Berkas</h5>
|
||||
<h3 class="text-dark mt-2 mb-0">Rp.6.893.925.952</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="chart03"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card 4 -->
|
||||
<div class="col-md-6 col-xl-3">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<p class="text-muted mb-0 text-truncate">Non Usaha</p>
|
||||
<h5 class="text-dark mt-2 mb-0" id="countNonUsaha"></h5>
|
||||
<h3 class="text-dark mt-2 mb-0" id="totalNonUsaha"></h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="chartNonUsaha"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<!-- Card 5 -->
|
||||
<div class="col-md-6 col-xl-3">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<p class="text-muted mb-0 text-truncate">Usaha</p>
|
||||
<h5 class="text-dark mt-2 mb-0" id="countBusinessDocuments"></h5>
|
||||
<h3 class="text-dark mt-2 mb-0" id="totalBusinessDocuments"></h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="chartBusinessDocuments"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card 6 -->
|
||||
<div class="col-md-6 col-xl-3">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<p class="text-muted mb-0 text-truncate">Berproses Di Dinas Teknis</p>
|
||||
<h5 class="text-dark mt-2 mb-0">171 Berkas</h5>
|
||||
<h3 class="text-dark mt-2 mb-0">Rp.1.973.666.055</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="chart06"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card 7 -->
|
||||
<div class="col-md-6 col-xl-3">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<p class="text-muted mb-0 text-truncate">Berproses Di DPMPTSP</p>
|
||||
<h5 class="text-dark mt-2 mb-0">23 Berkas</h5>
|
||||
<h3 class="text-dark mt-2 mb-0">Rp.1.086.206.621</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="chart07"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card 8 -->
|
||||
<div class="col-md-6 col-xl-3">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<p class="text-muted mb-0 text-truncate">Realisasi Terbit PBG</p>
|
||||
<h5 class="text-dark mt-2 mb-0">1378 Berkas</h5>
|
||||
<h3 class="text-dark mt-2 mb-0">Rp.14.463.121.442</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="chart08"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<!-- Card 5 -->
|
||||
<div class="col-md-6 col-xl-3">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<p class="text-muted mb-0 text-truncate">Progres Manual</p>
|
||||
<h5 class="text-dark mt-2 mb-0">85 Berkas</h5>
|
||||
<h3 class="text-dark mt-2 mb-0">Rp.1.479.160.749</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="chart09"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card 6 -->
|
||||
<div class="col-md-6 col-xl-3">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<p class="text-muted mb-0 text-truncate">Perkiraan Potensi PBG Dari Tata Ruang</p>
|
||||
<h5 class="text-dark mt-2 mb-0">5 Berkas</h5>
|
||||
<h3 class="text-dark mt-2 mb-0">Rp.1.898.364.080</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="chart10"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card 7 -->
|
||||
<div class="col-md-6 col-xl-3">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<p class="text-muted mb-0 text-truncate">Perkiraan Potensi PBG Dari Tata Ruang</p>
|
||||
<h5 class="text-dark mt-2 mb-0">18 Berkas</h5>
|
||||
<h3 class="text-dark mt-2 mb-0">Rp.3.076.196.000</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="chart11"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card 8 -->
|
||||
<div class="col-md-6 col-xl-3">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<p class="text-muted mb-0 text-truncate">Target PAD</p>
|
||||
<h5 class="text-dark mt-2 mb-0" id="countTargetPAD"></h5>
|
||||
<h3 class="text-dark mt-2 mb-0" id="totalTargetPAD"></h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="chart12"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@endsection
|
||||
|
||||
@section('scripts')
|
||||
@vite(['resources/js/dashboards/bigdata.js'])
|
||||
@endsection
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
@section('content')
|
||||
|
||||
@include('layouts.partials/page-title', ['title' => 'Darkone', 'subtitle' => 'Dashboard'])
|
||||
@include('layouts.partials/page-title', ['title' => 'Home', 'subtitle' => 'Dashboard'])
|
||||
|
||||
<div class="row">
|
||||
<!-- Card 1 -->
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<div class="col-12 text-center">
|
||||
<script>
|
||||
document.write(new Date().getFullYear())
|
||||
</script> © Darkone by StackBros.
|
||||
</script> © DPUTR Kabupaten Bandung
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -2,13 +2,13 @@
|
||||
<!-- Sidebar Logo -->
|
||||
<div class="logo-box">
|
||||
<a href="{{ route('home') }}" class="logo-dark">
|
||||
<img src="/images/logo-sm.png" class="logo-sm" alt="logo sm">
|
||||
<img src="/images/logo-dark.png" class="logo-lg" alt="logo dark">
|
||||
<img src="/images/dputr-kab-bandung.png" class="logo-sm" alt="logo sm">
|
||||
<img src="/images/dputr-kab-bandung.png" class="logo-lg" alt="logo dark">
|
||||
</a>
|
||||
|
||||
<a href="{{ route('home') }}" class="logo-light">
|
||||
<img src="/images/logo-sm.png" class="logo-sm" alt="logo sm">
|
||||
<img src="/images/logo-light.png" class="logo-lg" alt="logo light">
|
||||
<img src="/images/dputr-kab-bandung.png" class="logo-sm" alt="logo sm">
|
||||
<img src="/images/dputr-kab-bandung.png" class="logo-lg" alt="logo light">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -29,7 +29,7 @@
|
||||
<div class="collapse" id="sidebarDashboard">
|
||||
<ul class="nav sub-navbar-nav">
|
||||
<li class="sub-nav-item">
|
||||
<a class="sub-nav-link" href="{{ route ('home' ) }}">Dashboard 1</a>
|
||||
<a class="sub-nav-link" href="{{ route ('dashboards.bigdata' ) }}">SIBEDAS</a>
|
||||
</li>
|
||||
<li class="sub-nav-item">
|
||||
<a class="sub-nav-link" href="{{ route ('home' ) }}">Dashboard 2</a>
|
||||
@@ -41,45 +41,18 @@
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link menu-arrow" href="#sidebarAuthentication" data-bs-toggle="collapse" role="button"
|
||||
aria-expanded="false" aria-controls="sidebarAuthentication">
|
||||
<span class="nav-icon">
|
||||
<iconify-icon icon="mingcute:user-3-line"></iconify-icon>
|
||||
</span>
|
||||
<span class="nav-text"> Authentication </span>
|
||||
</a>
|
||||
<div class="collapse" id="sidebarAuthentication">
|
||||
<ul class="nav sub-navbar-nav">
|
||||
<li class="sub-nav-item">
|
||||
<a class="sub-nav-link" href="{{ route ('login') }}">Sign In</a>
|
||||
</li>
|
||||
<li class="sub-nav-item">
|
||||
<a class="sub-nav-link" href="{{ route ('register') }}">Sign Up</a>
|
||||
</li>
|
||||
<li class="sub-nav-item">
|
||||
<a class="sub-nav-link" href="{{ route ('password.request' ) }}">Forgot Password</a>
|
||||
</li>
|
||||
<li class="sub-nav-item">
|
||||
<a class="sub-nav-link" href="{{ route ('home') }}">Lock Screen</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link menu-arrow" href="#sidebarDataMaster" data-bs-toggle="collapse" role="button"
|
||||
aria-expanded="false" aria-controls="sidebarDataMaster">
|
||||
<span class="nav-icon">
|
||||
<!-- <iconify-icon icon="mingcute:slider"></iconify-icon> -->
|
||||
<i class='bx bx-cylinder'></i>
|
||||
<iconify-icon icon="mingcute:cylinder-line"></iconify-icon>
|
||||
</span>
|
||||
<span class="nav-text">Master</span>
|
||||
</a>
|
||||
<div class="collapse" id="sidebarDataMaster">
|
||||
<ul class="nav sub-navbar-nav">
|
||||
<li class="sub-nav-item">
|
||||
<a class="sub-nav-link" href="{{ route ('home' ) }}">Users</a>
|
||||
<a class="sub-nav-link" href="{{ route ('master.users' ) }}">Users</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -89,19 +62,17 @@
|
||||
<a class="nav-link menu-arrow" href="#sidebarSettings" data-bs-toggle="collapse" role="button"
|
||||
aria-expanded="false" aria-controls="sidebarSettings">
|
||||
<span class="nav-icon">
|
||||
<!-- <iconify-icon icon="injection"></iconify-icon> -->
|
||||
<!-- <box-icon name='slider-alt'></box-icon> -->
|
||||
<i class='bx bx-slider-alt'></i>
|
||||
<iconify-icon icon="mingcute:settings-6-line"></iconify-icon>
|
||||
</span>
|
||||
<span class="nav-text">Settings</span>
|
||||
</a>
|
||||
<div class="collapse" id="sidebarSettings">
|
||||
<ul class="nav sub-navbar-nav">
|
||||
<li class="sub-nav-item">
|
||||
<a class="sub-nav-link" href="{{ route ('home' ) }}">General Settings</a>
|
||||
<a class="sub-nav-link" href="{{ route ('settings.general' ) }}">General</a>
|
||||
</li>
|
||||
<li class="sub-nav-item">
|
||||
<a class="sub-nav-link" href="{{ route ('home' ) }}">Sync Data</a>
|
||||
<a class="sub-nav-link" href="{{ route ('settings.syncronize' ) }}">Syncronize</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -112,7 +83,7 @@
|
||||
</div>
|
||||
|
||||
|
||||
<div class="animated-stars">
|
||||
<!-- <div class="animated-stars">
|
||||
<div class="shooting-star"></div>
|
||||
<div class="shooting-star"></div>
|
||||
<div class="shooting-star"></div>
|
||||
@@ -133,4 +104,4 @@
|
||||
<div class="shooting-star"></div>
|
||||
<div class="shooting-star"></div>
|
||||
<div class="shooting-star"></div>
|
||||
</div>
|
||||
</div> -->
|
||||
@@ -1,13 +1,14 @@
|
||||
<!-- Title Meta -->
|
||||
<meta charset="utf-8" />
|
||||
<title>{{ $subtitle}} | Darkone - Dark Admin & UI Kit Template</title>
|
||||
<title>{{ $subtitle}} | DPUTR</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="Darkone: An advanced, fully responsive admin dashboard template packed with features to streamline your analytics and management needs." />
|
||||
<meta name="author" content="StackBros" />
|
||||
<meta name="keywords" content="Darkone, admin dashboard, responsive template, analytics, modern UI, management tools" />
|
||||
<meta name="description" content="DPUTR Dashboard App" />
|
||||
<meta name="author" content="DPUTR" />
|
||||
<meta name="keywords" content="DPUTR, PUTR, dinas pekerjaan umum dan tata ruang, kabupaten bandung" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="robots" content="index, follow" />
|
||||
<meta name="theme-color" content="#ffffff">
|
||||
<meta name="csrf-token" content="{{ csrf_token() }}">
|
||||
|
||||
<!-- App favicon -->
|
||||
<link rel="shortcut icon" href="/images/favicon.ico">
|
||||
<link rel="shortcut icon" href="/images/dputr.ico">
|
||||
54
resources/views/master/users/create.blade.php
Normal file
54
resources/views/master/users/create.blade.php
Normal file
@@ -0,0 +1,54 @@
|
||||
@extends('layouts.vertical', ['subtitle' => 'Users'])
|
||||
|
||||
@section('content')
|
||||
|
||||
@include('layouts.partials/page-title', ['title' => 'Users', 'subtitle' => 'Create'])
|
||||
|
||||
<div class="row d-flex justify-content-center">
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<form action="{{route('master.users.store')}}" method="POST">
|
||||
@csrf
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="name">Name</label>
|
||||
<input type="name" id="name" name="name"
|
||||
class="form-control" placeholder="Enter your name" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="email">Email</label>
|
||||
<input type="email" id="email" name="email"
|
||||
class="form-control" placeholder="Enter your email" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="password">Password</label>
|
||||
<input type="text" id="password" class="form-control" name="password"
|
||||
placeholder="Enter your password" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="firstname">Firstname</label>
|
||||
<input type="text" id="firstname" class="form-control" name="firstname"
|
||||
placeholder="Enter your firstname" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="lastname">Lastname</label>
|
||||
<input type="text" id="lastname" class="form-control" name="lastname"
|
||||
placeholder="Enter your lastname" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="position">Position</label>
|
||||
<input type="text" id="position" class="form-control" name="position"
|
||||
placeholder="Enter your position" required>
|
||||
</div>
|
||||
<!-- username, firstname, lastname, position -->
|
||||
<button type="submit" class="btn btn-outline-success width-lg">Create</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@endsection
|
||||
|
||||
@section('scripts')
|
||||
@endsection
|
||||
54
resources/views/master/users/edit.blade.php
Normal file
54
resources/views/master/users/edit.blade.php
Normal file
@@ -0,0 +1,54 @@
|
||||
@extends('layouts.vertical', ['subtitle' => 'Users'])
|
||||
|
||||
@section('content')
|
||||
|
||||
@include('layouts.partials/page-title', ['title' => 'Users', 'subtitle' => 'Create'])
|
||||
|
||||
<div class="row d-flex justify-content-center">
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<form action="{{ route('master.users.update')}}">
|
||||
@csrf
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="name">Name</label>
|
||||
<input type="name" id="name" name="name"
|
||||
class="form-control" placeholder="Enter your name" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="email">Email</label>
|
||||
<input type="email" id="email" name="email"
|
||||
class="form-control" placeholder="Enter your email" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="password">Password</label>
|
||||
<input type="text" id="password" class="form-control" name="password"
|
||||
placeholder="Enter your password" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="firstname">Firstname</label>
|
||||
<input type="text" id="firstname" class="form-control" name="firstname"
|
||||
placeholder="Enter your firstname" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="lastname">Lastname</label>
|
||||
<input type="text" id="lastname" class="form-control" name="lastname"
|
||||
placeholder="Enter your lastname" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="position">Position</label>
|
||||
<input type="text" id="position" class="form-control" name="position"
|
||||
placeholder="Enter your position" required>
|
||||
</div>
|
||||
<!-- username, firstname, lastname, position -->
|
||||
<button type="submit" class="btn btn-outline-success width-lg">Update</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@endsection
|
||||
|
||||
@section('scripts')
|
||||
@endsection
|
||||
25
resources/views/master/users/index.blade.php
Normal file
25
resources/views/master/users/index.blade.php
Normal file
@@ -0,0 +1,25 @@
|
||||
@extends('layouts.vertical', ['subtitle' => 'Master'])\
|
||||
|
||||
@section('css')
|
||||
@vite(['node_modules/gridjs/dist/theme/mermaid.min.css'])
|
||||
@endsection
|
||||
|
||||
@section('content')
|
||||
|
||||
@include('layouts.partials/page-title', ['title' => 'Master', 'subtitle' => 'Users'])
|
||||
|
||||
<div class="row">
|
||||
<div class="d-flex justify-content-end pb-3">
|
||||
<a href="{{ route('master.users.create')}}" class="btn btn-outline-success width-lg">Create</a>
|
||||
</div>
|
||||
{{$users}}
|
||||
<div>
|
||||
<div id="common-table"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@endsection
|
||||
|
||||
@section('scripts')
|
||||
@vite(['resources/js/tables/common-table.js'])
|
||||
@endsection
|
||||
49
resources/views/master/users/show.blade.php
Normal file
49
resources/views/master/users/show.blade.php
Normal file
@@ -0,0 +1,49 @@
|
||||
@extends('layouts.vertical', ['subtitle' => 'Users'])
|
||||
|
||||
@section('content')
|
||||
|
||||
@include('layouts.partials/page-title', ['title' => 'Users', 'subtitle' => 'Create'])
|
||||
|
||||
<div class="row d-flex justify-content-center">
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="user-name">Name</label>
|
||||
<input type="name" id="user-name" name="user-name"
|
||||
class="form-control" placeholder="Enter your name" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="user-email">Email</label>
|
||||
<input type="email" id="user-email" name="user-email"
|
||||
class="form-control" placeholder="Enter your email" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="user-password">Password</label>
|
||||
<input type="text" id="user-password" class="form-control"
|
||||
placeholder="Enter your password" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="user-firstname">Firstname</label>
|
||||
<input type="text" id="user-firstname" class="form-control"
|
||||
placeholder="Enter your firstname" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="user-lastname">Lastname</label>
|
||||
<input type="text" id="user-lastname" class="form-control"
|
||||
placeholder="Enter your lastname" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="user-position">Position</label>
|
||||
<input type="text" id="user-position" class="form-control"
|
||||
placeholder="Enter your position" required>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@endsection
|
||||
|
||||
@section('scripts')
|
||||
@endsection
|
||||
31
resources/views/settings/general/create.blade.php
Normal file
31
resources/views/settings/general/create.blade.php
Normal file
@@ -0,0 +1,31 @@
|
||||
@extends('layouts.vertical', ['subtitle' => 'Create User'])
|
||||
|
||||
@section('content')
|
||||
|
||||
@include('layouts.partials/page-title', ['title' => 'Se', 'subtitle' => 'Syncronize'])
|
||||
|
||||
<div class="row">
|
||||
<div class="columns-md">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<form>
|
||||
<div class="mb-3">
|
||||
<label for="keyInput" class="form-label">Key</label>
|
||||
<input type="text" id="simpleinput" class="form-control">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="valueInput" class="form-label">Value</label>
|
||||
<input type="text" id="simpleinput" class="form-control">
|
||||
</div>
|
||||
<button type="button" class="btn btn-outline-success width-lg">Create</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@endsection
|
||||
|
||||
@section('scripts')
|
||||
@vite(['resources/js/tables/common-table.js'])
|
||||
@endsection
|
||||
24
resources/views/settings/general/index.blade.php
Normal file
24
resources/views/settings/general/index.blade.php
Normal file
@@ -0,0 +1,24 @@
|
||||
@extends('layouts.vertical', ['subtitle' => 'Syncronize'])
|
||||
|
||||
@section('css')
|
||||
@vite(['node_modules/gridjs/dist/theme/mermaid.min.css'])
|
||||
@endsection
|
||||
|
||||
@section('content')
|
||||
|
||||
@include('layouts.partials/page-title', ['title' => 'Settings', 'subtitle' => 'Syncronize'])
|
||||
|
||||
<div class="row">
|
||||
<div class="d-flex justify-content-end pb-3">
|
||||
<button type="button" class="btn btn-outline-success width-lg">Create</button>
|
||||
</div>
|
||||
<div>
|
||||
<div id="common-table"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@endsection
|
||||
|
||||
@section('scripts')
|
||||
@vite(['resources/js/tables/common-table.js'])
|
||||
@endsection
|
||||
20
resources/views/settings/syncronize/index.blade.php
Normal file
20
resources/views/settings/syncronize/index.blade.php
Normal file
@@ -0,0 +1,20 @@
|
||||
@extends('layouts.vertical', ['subtitle' => 'Syncronize'])
|
||||
|
||||
@section('content')
|
||||
|
||||
@include('layouts.partials/page-title', ['title' => 'Settings', 'subtitle' => 'Syncronize'])
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12 col-xl-12 d-flex justify-content-end">
|
||||
<form action="{{route('settings.sync')}}" method="post" id="sync-form">
|
||||
@csrf
|
||||
<button type="submit" class="btn btn-success width-lg" id="btn-sync-submit">Sync SIMBG</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@endsection
|
||||
|
||||
@section('scripts')
|
||||
@vite(['resources/js/settings/syncronize/syncronize.js'])
|
||||
@endsection
|
||||
Reference in New Issue
Block a user