add dashboard, fix get data scraping, fix table

This commit is contained in:
arifal
2025-01-24 01:58:06 +07:00
parent 4de7067487
commit 5f93a18f60
53 changed files with 2671 additions and 58 deletions

View File

@@ -26,4 +26,4 @@
window.innerWidth <= 1140
? e.setAttribute("data-sidebar-size", "hidden")
: e.setAttribute("data-sidebar-size", config.menu.size));
})();
})();

View 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();
});

View 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);
}

View 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();
});

View 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();
});

View File

@@ -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"

View 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

View File

@@ -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 -->

View File

@@ -4,7 +4,7 @@
<div class="col-12 text-center">
<script>
document.write(new Date().getFullYear())
</script> &copy; Darkone by StackBros.
</script> &copy; DPUTR Kabupaten Bandung
</div>
</div>
</div>

View File

@@ -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> -->

View File

@@ -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">

View 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

View 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

View 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

View 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

View 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

View 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

View 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