diff --git a/app/Http/Controllers/Api/DashboardController.php b/app/Http/Controllers/Api/DashboardController.php index fd69fc5..d3771c5 100644 --- a/app/Http/Controllers/Api/DashboardController.php +++ b/app/Http/Controllers/Api/DashboardController.php @@ -69,4 +69,29 @@ class DashboardController extends Controller ]; return $this->resSuccess($result); } + + public function pbgTaskDocuments(Request $request){ + $request->validate([ + 'status' => 'required|string' + ]); + + $businessData = DB::table('pbg_task') + ->leftJoin('pbg_task_retributions', 'pbg_task.uuid', '=', 'pbg_task_retributions.pbg_task_uid') + ->select( + DB::raw('COUNT(DISTINCT pbg_task.id) as task_count'), + DB::raw('SUM(pbg_task_retributions.nilai_retribusi_bangunan) as total_retribution') + ) + ->where(function ($query) use ($request) { + $query->where("pbg_task.status", "=", $request->get('status')); + }) + ->first(); + $taskCount = $businessData->task_count; + $taskTotal = $businessData->total_retribution; + $result = [ + "count" => $taskCount, + "series" => [$taskCount], + "total" => $taskTotal + ]; + return $this->resSuccess($result); + } } diff --git a/app/ServiceSIMBG.php b/app/ServiceSIMBG.php index e70e85c..c65a52d 100644 --- a/app/ServiceSIMBG.php +++ b/app/ServiceSIMBG.php @@ -12,6 +12,7 @@ use Exception; use App\Models\PbgTask; use App\Traits\GlobalApiResponse; use Illuminate\Support\Facades\Log; +use Carbon\Carbon; class ServiceSIMBG { @@ -19,6 +20,7 @@ class ServiceSIMBG private $email; private $password; private $simbg_host; + private $fetch_per_page; /** * Create a new class instance. */ @@ -27,6 +29,7 @@ class ServiceSIMBG $this->email = trim((string) GlobalSetting::where('key','SIMBG_EMAIL')->first()->value); $this->password = trim((string) GlobalSetting::where('key','SIMBG_PASSWORD')->first()->value); $this->simbg_host = trim((string)GlobalSetting::where('key','SIMBG_HOST')->first()->value); + $this->fetch_per_page = trim((string)GlobalSetting::where('key','FETCH_PER_PAGE')->first()->value); } public function getToken(){ @@ -92,41 +95,32 @@ class ServiceSIMBG // Log success Log::info("syncIndexIntegration completed successfully", ['uuid' => $uuid]); } - public function syncTaskList() { $clientHelper = new ServiceClient($this->simbg_host); $resToken = $this->getToken(); - // create log import datasource $importDatasource = ImportDatasource::create([ 'status' => ImportDatasourceStatus::Processing->value, ]); - if (!isset($resToken) || empty($resToken->original['data']['token']['access'])) { - Log::error("Token not retrieved for syncTaskList"); + if (empty($resToken->original['data']['token']['access'])) { $importDatasource->update([ 'status' => ImportDatasourceStatus::Failed->value, - 'message' => 'Failed to retrive token' + 'message' => 'Failed to retrieve token' ]); - return $this->resError("Failed to retrive token"); + return $this->resError("Failed to retrieve token"); } $apiToken = $resToken->original['data']['token']['access']; - $queryParams = http_build_query([ - 'page' => 1, - 'size' => 20, - 'sort' => 'ASC', - // 'type' => 'task', - ]); - - $url = "/api/pbg/v1/list/?" . $queryParams; $headers = ['Authorization' => "Bearer " . $apiToken]; + $url = "/api/pbg/v1/list/?page=1&size={$this->fetch_per_page}&sort=ASC"; $initialResponse = $clientHelper->get($url, $headers); - if (empty($initialResponse->original['data']['total_page'])) { - Log::error("Invalid response: no total_page", ['response' => $initialResponse->original]); + + $totalPage = $initialResponse->original['data']['total_page'] ?? 0; + if ($totalPage === 0) { $importDatasource->update([ 'status' => ImportDatasourceStatus::Failed->value, 'message' => 'Invalid response: no total_page' @@ -134,97 +128,76 @@ class ServiceSIMBG return $this->resError("Invalid response from API"); } - $totalPage = $initialResponse->original['data']['total_page']; - $savedCount = 0; - $failedCount = 0; + $savedCount = $failedCount = 0; for ($currentPage = 1; $currentPage <= $totalPage; $currentPage++) { - + $pageUrl = "/api/pbg/v1/list/?page={$currentPage}&size={$this->fetch_per_page}&sort=ASC"; $token = $this->getToken(); - $simbg_token = $token->original['data']['token']['access']; - $headers = ['Authorization' => "Bearer " . $simbg_token]; + $headers = ['Authorization' => "Bearer " . $token]; + $response = $clientHelper->get($pageUrl, $headers); + $tasks = $response->original['data']['data'] ?? []; - $queryParams = http_build_query([ - 'page' => $currentPage, - 'size' => 20, - 'sort' => 'ASC', - // 'type' => 'task' - ]); - - $url = "/api/pbg/v1/list/?" . $queryParams; - $response = $clientHelper->get($url, $headers); - - if (empty($response->original['data']['data'])) { + if (empty($tasks)) { Log::warning("No data found on page", ['page' => $currentPage]); - $importDatasource->update([ - 'status' => ImportDatasourceStatus::Success->value, - 'message' => 'Success but no data loaded on page' - ]); + continue; } - foreach ($response->original['data']['data'] as $item) { - try { - $taskCreatedAt = isset($item['created_at']) - ? \Carbon\Carbon::parse($item['created_at'])->format('Y-m-d H:i:s') - : null; - PbgTask::updateOrCreate( - [ - 'uuid' => $item['uid'], - ], - [ - 'name' => $item['name'], - 'owner_name' => $item['owner_name'], - 'application_type' => $item['application_type'], - 'application_type_name' => $item['application_type_name'], - 'condition' => $item['condition'], - 'registration_number' => $item['registration_number'], - 'document_number' => $item['document_number'], - 'address' => $item['address'], - 'status' => $item['status'], - 'status_name' => $item['status_name'], - 'slf_status' => $item['slf_status'] ?? null, - 'slf_status_name' => $item['slf_status_name'] ?? null, - 'function_type' => $item['function_type'], - 'consultation_type' => $item['consultation_type'], - 'due_date' => $item['due_date'], - 'land_certificate_phase' => $item['land_certificate_phase'], - 'task_created_at' => $taskCreatedAt, - ] - ); + Log::info("executed page", ['page' => $currentPage, 'total' => $totalPage]); + + $tasksCollective = []; + foreach ($tasks as $item) { + try { + $tasksCollective[] = [ + 'uuid' => $item['uid'], + 'name' => $item['name'], + 'owner_name' => $item['owner_name'], + 'application_type' => $item['application_type'], + 'application_type_name' => $item['application_type_name'], + 'condition' => $item['condition'], + 'registration_number' => $item['registration_number'], + 'document_number' => $item['document_number'], + 'address' => $item['address'], + 'status' => $item['status'], + 'status_name' => $item['status_name'], + 'slf_status' => $item['slf_status'] ?? null, + 'slf_status_name' => $item['slf_status_name'] ?? null, + 'function_type' => $item['function_type'], + 'consultation_type' => $item['consultation_type'], + 'due_date' => $item['due_date'], + 'land_certificate_phase' => $item['land_certificate_phase'], + 'task_created_at' => isset($item['created_at']) ? Carbon::parse($item['created_at'])->format('Y-m-d H:i:s') : null, + 'updated_at' => now(), + 'created_at' => now(), + ]; - // Synchronize additional details $this->syncIndexIntegration($item['uid']); $this->syncTaskDetailSubmit($item['uid']); - Log::info("executed page: ". $currentPage); $savedCount++; } catch (Exception $e) { - $importDatasource->update([ - 'status' => ImportDatasourceStatus::Failed->value, - 'message' => 'failed to save', - 'response_body' => $item - ]); + $failedCount++; Log::error("Failed to process task", [ 'error' => $e->getMessage(), 'task' => $item, ]); - $failedCount++; } } + + PbgTask::upsert($tasksCollective, ['uuid'], [ + 'name', 'owner_name', 'application_type', 'application_type_name', 'condition', + 'registration_number', 'document_number', 'address', 'status', 'status_name', + 'slf_status', 'slf_status_name', 'function_type', 'consultation_type', 'due_date', + 'land_certificate_phase', 'task_created_at', 'updated_at' + ]); } - $result = [ - "savedCount" => $savedCount, - "failedCount" => $failedCount, - ]; - - $importDatasource->update([ 'status' => ImportDatasourceStatus::Success->value, - 'message' => "Successfully success data: " .$savedCount. " failed data : " .$failedCount + 'message' => "Successfully processed: $savedCount, Failed: $failedCount" ]); - - Log::info("syncTaskList completed", $result); - return $this->resSuccess($result); + + Log::info("syncTaskList completed", ['savedCount' => $savedCount, 'failedCount' => $failedCount]); + + return $this->resSuccess(['savedCount' => $savedCount, 'failedCount' => $failedCount]); } @@ -260,11 +233,11 @@ class ServiceSIMBG } $detailCreatedAt = isset($data['created_at']) - ? \Carbon\Carbon::parse($data['created_at'])->format('Y-m-d H:i:s') + ? Carbon::parse($data['created_at'])->format('Y-m-d H:i:s') : null; $detailUpdatedAt = isset($data['updated_at']) - ? \Carbon\Carbon::parse($data['updated_at'])->format('Y-m-d H:i:s') + ? Carbon::parse($data['updated_at'])->format('Y-m-d H:i:s') : null; PbgTaskRetributions::updateOrCreate( @@ -292,24 +265,20 @@ class ServiceSIMBG ); $prasaranaData = $data['prasarana'] ?? []; - if (is_array($prasaranaData) && count($prasaranaData) > 0) { - foreach ($prasaranaData as $item) { - PbgTaskPrasarana::updateOrCreate( - [ - 'pbg_task_uid' => $uuid, - 'prasarana_id' => $item['id'] ?? null, - ], - [ - 'pbg_task_uid' => $uuid, - 'prasarana_type' => $item['prasarana_type'] ?? null, - 'building_type' => $item['building_type'] ?? null, - 'total' => $item['total'] ?? null, - 'quantity' => $item['quantity'] ?? null, - 'unit' => $item['unit'] ?? null, - 'index_prasarana' => $item['index_prasarana'] ?? null, - ] - ); - } + if (!empty($prasaranaData)) { + $insertData = array_map(fn($item) => [ + 'pbg_task_uid' => $uuid, + 'prasarana_id' => $item['id'] ?? null, + 'prasarana_type' => $item['prasarana_type'] ?? null, + 'building_type' => $item['building_type'] ?? null, + 'total' => $item['total'] ?? null, + 'quantity' => $item['quantity'] ?? null, + 'unit' => $item['unit'] ?? null, + 'index_prasarana' => $item['index_prasarana'] ?? null, + ], $prasaranaData); + + // Use bulk insert or upsert for faster database operation + PbgTaskPrasarana::upsert($insertData, ['pbg_task_uid', 'prasarana_id']); } Log::info("syncTaskDetailSubmit completed successfully", ['uuid' => $uuid]); diff --git a/database/seeders/GlobalSettingSeeder.php b/database/seeders/GlobalSettingSeeder.php index 527ba9a..d2c97c1 100644 --- a/database/seeders/GlobalSettingSeeder.php +++ b/database/seeders/GlobalSettingSeeder.php @@ -39,7 +39,26 @@ class GlobalSettingSeeder extends Seeder "created_at" => Carbon::now()->format("Y-m-d H:i:s"), "updated_at" => Carbon::now()->format("Y-m-d H:i:s"), ], + [ + "key" => "FETCH_PER_PAGE", + "value" => "100", + "type" => "integer", + "description" => "Total data per page", + "created_at" => Carbon::now()->format("Y-m-d H:i:s"), + "updated_at" => Carbon::now()->format("Y-m-d H:i:s"), + ], ]; - GlobalSetting::insert($globalSettings); + foreach($globalSettings as $setting){ + GlobalSetting::updateOrCreate( + ["key" => $setting["key"]], + [ + "value" =>$setting["value"], + "type" => $setting["type"], + "description" => $setting["description"], + "created_at" => Carbon::now()->format("Y-m-d H:i:s"), + "updated_at" => Carbon::now()->format("Y-m-d H:i:s"), + ] + ); + } } } diff --git a/public/images/simbg-dputr.png b/public/images/simbg-dputr.png new file mode 100644 index 0000000..9451b92 Binary files /dev/null and b/public/images/simbg-dputr.png differ diff --git a/resources/js/config.js b/resources/js/config.js index c6f0bc7..ce6afca 100755 --- a/resources/js/config.js +++ b/resources/js/config.js @@ -2,7 +2,7 @@ var t = sessionStorage.getItem("__DARKONE_CONFIG__"), e = document.getElementsByTagName("html")[0], o = { - theme: "dark", + theme: "light", topbar: { color: "light" }, menu: { size: "default", color: "light" }, }; diff --git a/resources/js/dashboards/bigdata.js b/resources/js/dashboards/bigdata.js index 4d63b0c..ac928cb 100644 --- a/resources/js/dashboards/bigdata.js +++ b/resources/js/dashboards/bigdata.js @@ -7,914 +7,1035 @@ import GlobalConfig, { addThousandSeparators } from "../global-config.js"; class BigData { init() { - this.initAllChart(); this.initChartTargetPAD(); this.initChartUsaha(); this.initChartNonUsaha(); + this.initChartStatus1(); + this.initChartStatus2(); + this.initChartStatus3(); + this.initChartStatus4(); + this.initChartStatus5(); + this.initChartStatus6(); + this.initChartStatus7(); + this.initChartStatus20(); + this.initChartStatus24(); } 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, - }, + fetch(`${GlobalConfig.apiHost}/api/all-task-documents`, { + credentials: "include", + headers: { + Authorization: `Bearer ${document.querySelector("meta[name='api-token']").content}`, + "Content-Type": "application/json", + }, + }) + .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", + }, + series: [ + { + data: seriesData, }, - markers: { - size: 0, + ], + stroke: { + width: 2, + curve: "smooth", + }, + markers: { + size: 0, + }, + colors: ["#7e67fe"], + tooltip: { + fixed: { + enabled: false, }, - colors: ["#7e67fe"], - tooltip: { - fixed: { - enabled: false, - }, - x: { - show: false, - }, - y: { - title: { - formatter: function (seriesName) { - return ""; - }, + 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], - }, + 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); - }); + 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, - }, + fetch(`${GlobalConfig.apiHost}/api/business-documents`,{ + credentials: "include", + headers: { + Authorization: `Bearer ${document.querySelector("meta[name='api-token']").content}`, + "Content-Type": "application/json", + }, + }) + .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", + }, + series: [ + { + data: seriesData, }, - markers: { - size: 0, + ], + stroke: { + width: 2, + curve: "smooth", + }, + markers: { + size: 0, + }, + colors: ["#7e67fe"], + tooltip: { + fixed: { + enabled: false, }, - colors: ["#7e67fe"], - tooltip: { - fixed: { - enabled: false, - }, - x: { - show: false, - }, - y: { - title: { - formatter: function (seriesName) { - return ""; - }, + 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], - }, + 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); - }); + 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, - }, + fetch(`${GlobalConfig.apiHost}/api/non-business-documents`, { + credentials: "include", + headers: { + Authorization: `Bearer ${document.querySelector("meta[name='api-token']").content}`, + "Content-Type": "application/json", + }, + }) + .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", + }, + series: [ + { + data: seriesData, }, - markers: { - size: 0, + ], + stroke: { + width: 2, + curve: "smooth", + }, + markers: { + size: 0, + }, + colors: ["#7e67fe"], + tooltip: { + fixed: { + enabled: false, }, - colors: ["#7e67fe"], - tooltip: { - fixed: { - enabled: false, - }, - x: { - show: false, - }, - y: { - title: { - formatter: function (seriesName) { - return ""; - }, + 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], - }, + 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); - }); + new ApexCharts( + document.querySelector("#chartNonUsaha"), + options1 + ).render(); + }) + .catch((error) => { + console.error("error fetching chart dara : ", error); + }); } - initAllChart() { - 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 ""; - }, + initChartStatus1(){ + fetch(`${GlobalConfig.apiHost}/api/pbg-task-documents?status=1`, { + credentials: "include", + headers: { + Authorization: `Bearer ${document.querySelector("meta[name='api-token']").content}`, + "Content-Type": "application/json", + } + }) + .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( + "countStatus1" + ).innerText = `${data.data.count} Berkas`; + document.getElementById( + "totalStatus1" + ).innerText = `Rp.${addThousandSeparators(data.data.total)}`; + var options1 = { + chart: { + type: "area", + height: 50, + sparkline: { + enabled: true, }, }, - marker: { - show: false, + series: [ + { + data: seriesData, + }, + ], + stroke: { + width: 2, + curve: "smooth", }, - }, - fill: { - opacity: [1], - type: ["gradient"], - gradient: { - type: "vertical", - // shadeIntensity: 1, - inverseColors: false, - opacityFrom: 0.5, - opacityTo: 0, - stops: [0, 100], + markers: { + size: 0, }, - }, - }; - - 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 ""; + 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, }, }, - 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 ""; - }, + fill: { + opacity: [1], + type: ["gradient"], + gradient: { + type: "vertical", + // shadeIntensity: 1, + inverseColors: false, + opacityFrom: 0.5, + opacityTo: 0, + stops: [0, 100], }, }, - 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(); + new ApexCharts( + document.querySelector("#char-pbg-status-1"), + options1 + ).render(); + }) + .catch((error) => { + console.error("error fetching chart dara : ", error); + }); + } - 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 ""; - }, + initChartStatus2(){ + fetch(`${GlobalConfig.apiHost}/api/pbg-task-documents?status=2`, { + credentials: "include", + headers: { + Authorization: `Bearer ${document.querySelector("meta[name='api-token']").content}`, + "Content-Type": "application/json", + } + }) + .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( + "countStatus2" + ).innerText = `${data.data.count} Berkas`; + document.getElementById( + "totalStatus2" + ).innerText = `Rp.${addThousandSeparators(data.data.total)}`; + var options1 = { + chart: { + type: "area", + height: 50, + sparkline: { + enabled: true, }, }, - marker: { - show: false, + series: [ + { + data: seriesData, + }, + ], + stroke: { + width: 2, + curve: "smooth", }, - }, - fill: { - opacity: [1], - type: ["gradient"], - gradient: { - type: "vertical", - // shadeIntensity: 1, - inverseColors: false, - opacityFrom: 0.5, - opacityTo: 0, - stops: [0, 100], + markers: { + size: 0, }, - }, - }; - - 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 ""; + 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, }, }, - 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 ""; - }, + fill: { + opacity: [1], + type: ["gradient"], + gradient: { + type: "vertical", + // shadeIntensity: 1, + inverseColors: false, + opacityFrom: 0.5, + opacityTo: 0, + stops: [0, 100], }, }, - 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(); + new ApexCharts( + document.querySelector("#chart-pbg-status-2"), + options1 + ).render(); + }) + .catch((error) => { + console.error("error fetching chart dara : ", error); + }); + } - 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 ""; - }, + initChartStatus3(){ + fetch(`${GlobalConfig.apiHost}/api/pbg-task-documents?status=3`, { + credentials: "include", + headers: { + Authorization: `Bearer ${document.querySelector("meta[name='api-token']").content}`, + "Content-Type": "application/json", + } + }) + .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( + "countStatus3" + ).innerText = `${data.data.count} Berkas`; + document.getElementById( + "totalStatus3" + ).innerText = `Rp.${addThousandSeparators(data.data.total)}`; + var options1 = { + chart: { + type: "area", + height: 50, + sparkline: { + enabled: true, }, }, - marker: { - show: false, + series: [ + { + data: seriesData, + }, + ], + stroke: { + width: 2, + curve: "smooth", }, - }, - fill: { - opacity: [1], - type: ["gradient"], - gradient: { - type: "vertical", - // shadeIntensity: 1, - inverseColors: false, - opacityFrom: 0.5, - opacityTo: 0, - stops: [0, 100], + 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(); + new ApexCharts( + document.querySelector("#chart-pbg-status-3"), + options1 + ).render(); + }) + .catch((error) => { + console.error("error fetching chart dara : ", error); + }); + } + initChartStatus4(){ + fetch(`${GlobalConfig.apiHost}/api/pbg-task-documents?status=4`, { + credentials: "include", + headers: { + Authorization: `Bearer ${document.querySelector("meta[name='api-token']").content}`, + "Content-Type": "application/json", + } + }) + .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( + "countStatus4" + ).innerText = `${data.data.count} Berkas`; + document.getElementById( + "totalStatus4" + ).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], + }, + }, + }; - // 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("#chart-pbg-status-4"), + options1 + ).render(); + }) + .catch((error) => { + console.error("error fetching chart dara : ", error); + }); + } + initChartStatus5(){ + fetch(`${GlobalConfig.apiHost}/api/pbg-task-documents?status=5`, { + credentials: "include", + headers: { + Authorization: `Bearer ${document.querySelector("meta[name='api-token']").content}`, + "Content-Type": "application/json", + } + }) + .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( + "countStatus5" + ).innerText = `${data.data.count} Berkas`; + document.getElementById( + "totalStatus5" + ).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(); + new ApexCharts( + document.querySelector("#chart-pbg-status-5"), + options1 + ).render(); + }) + .catch((error) => { + console.error("error fetching chart dara : ", error); + }); + } + initChartStatus6(){ + fetch(`${GlobalConfig.apiHost}/api/pbg-task-documents?status=6`, { + credentials: "include", + headers: { + Authorization: `Bearer ${document.querySelector("meta[name='api-token']").content}`, + "Content-Type": "application/json", + } + }) + .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( + "countStatus6" + ).innerText = `${data.data.count} Berkas`; + document.getElementById( + "totalStatus6" + ).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("#chart-pbg-status-6"), + options1 + ).render(); + }) + .catch((error) => { + console.error("error fetching chart dara : ", error); + }); + } + initChartStatus7(){ + fetch(`${GlobalConfig.apiHost}/api/pbg-task-documents?status=7`, { + credentials: "include", + headers: { + Authorization: `Bearer ${document.querySelector("meta[name='api-token']").content}`, + "Content-Type": "application/json", + } + }) + .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( + "countStatus7" + ).innerText = `${data.data.count} Berkas`; + document.getElementById( + "totalStatus7" + ).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("#chart-pbg-status-7"), + options1 + ).render(); + }) + .catch((error) => { + console.error("error fetching chart dara : ", error); + }); + } + initChartStatus20(){ + fetch(`${GlobalConfig.apiHost}/api/pbg-task-documents?status=20`, { + credentials: "include", + headers: { + Authorization: `Bearer ${document.querySelector("meta[name='api-token']").content}`, + "Content-Type": "application/json", + } + }) + .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( + "countStatus20" + ).innerText = `${data.data.count} Berkas`; + document.getElementById( + "totalStatus20" + ).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("#chart-pbg-status-20"), + options1 + ).render(); + }) + .catch((error) => { + console.error("error fetching chart dara : ", error); + }); + } + initChartStatus24(){ + fetch(`${GlobalConfig.apiHost}/api/pbg-task-documents?status=24`, { + credentials: "include", + headers: { + Authorization: `Bearer ${document.querySelector("meta[name='api-token']").content}`, + "Content-Type": "application/json", + } + }) + .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( + "countStatus24" + ).innerText = `${data.data.count} Berkas`; + document.getElementById( + "totalStatus24" + ).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("#chart-pbg-status-24"), + options1 + ).render(); + }) + .catch((error) => { + console.error("error fetching chart dara : ", error); + }); } } document.addEventListener("DOMContentLoaded", function (e) { - let apiTokenMeta = document.querySelector("meta[name='api-token']"); - - if (apiTokenMeta && apiTokenMeta.content) { - let apiToken = apiTokenMeta.content; - localStorage.setItem("token", apiToken); // Simpan token ke localStorage - console.log("Token berhasil disimpan:", apiToken); - } new BigData().init(); }); diff --git a/resources/views/auth/signin.blade.php b/resources/views/auth/signin.blade.php index a7fe03b..acabffd 100755 --- a/resources/views/auth/signin.blade.php +++ b/resources/views/auth/signin.blade.php @@ -14,11 +14,11 @@ class="authentication-bg"
Total Potensi Berkas
-Berkas Terverifikasi
-Berkas Belum Terverifikasi
-Berproses Di Dinas Teknis
-Berproses Di DPMPTSP
-Realisasi Terbit PBG
-Progres Manual
-Perkiraan Potensi PBG Dari Tata Ruang
-Perkiraan Potensi PBG Dari Tata Ruang
-