fix query scraping using upsert and connect dashboard

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

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(){
@@ -93,40 +96,31 @@ class ServiceSIMBG
         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'])) {
+        if (empty($resToken->original['data']['token']['access'])) {
-            Log::error("Token not retrieved for syncTaskList");
             $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,44 +128,27 @@ class ServiceSIMBG
             return $this->resError("Invalid response from API");
         }
 
-        $totalPage = $initialResponse->original['data']['total_page'];
+        $savedCount = $failedCount = 0;
-        $savedCount = 0;
-        $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 " . $token];
-            $headers = ['Authorization' => "Bearer " . $simbg_token];
+            $response = $clientHelper->get($pageUrl, $headers);
+            $tasks = $response->original['data']['data'] ?? [];
 
-            $queryParams = http_build_query([
+            if (empty($tasks)) {
-                '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'])) {
                 Log::warning("No data found on page", ['page' => $currentPage]);
-                $importDatasource->update([
+                continue;
-                    'status' => ImportDatasourceStatus::Success->value,
-                    'message' => 'Success but no data loaded on page'
-                ]);
             }
 
-            foreach ($response->original['data']['data'] as $item) {
+            Log::info("executed page", ['page' => $currentPage, 'total' => $totalPage]);
+
+            $tasksCollective = [];
+            foreach ($tasks as $item) {
                 try {
-                    $taskCreatedAt = isset($item['created_at']) 
+                    $tasksCollective[] = [
-                    ? \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'],
@@ -188,43 +165,39 @@ class ServiceSIMBG
                         'consultation_type' => $item['consultation_type'],
                         'due_date' => $item['due_date'],
                         'land_certificate_phase' => $item['land_certificate_phase'],
-                            'task_created_at' => $taskCreatedAt,
+                        '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([
+                    $failedCount++;
-                        'status' => ImportDatasourceStatus::Failed->value,
-                        'message' => 'failed to save',
-                        'response_body' => $item
-                    ]);
                     Log::error("Failed to process task", [
                         'error' => $e->getMessage(),
                         'task' => $item,
                     ]);
-                    $failedCount++;
-                }
                 }
             }
 
-        $result = [
+            PbgTask::upsert($tasksCollective, ['uuid'], [
-            "savedCount" => $savedCount,
+                'name', 'owner_name', 'application_type', 'application_type_name', 'condition',
-            "failedCount" => $failedCount,
+                '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'
+            ]);
+        }
 
         $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);
+        Log::info("syncTaskList completed", ['savedCount' => $savedCount, 'failedCount' => $failedCount]);
-        return $this->resSuccess($result);
+
+        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) {
+        if (!empty($prasaranaData)) {
-            foreach ($prasaranaData as $item) {
+            $insertData = array_map(fn($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,
-                    ]
+            ], $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]);

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"),
+                ]
+            );
+        }
     }
 }

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" },
         };

resources/js/dashboards/bigdata.js

@@ -7,15 +7,28 @@ 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`, {
-        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");
@@ -94,7 +107,13 @@ class BigData {
     }
 
     initChartUsaha() {
-        fetch(`${GlobalConfig.apiHost}/api/business-documents`)
+        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");
@@ -173,7 +192,13 @@ class BigData {
     }
 
     initChartNonUsaha() {
-        fetch(`${GlobalConfig.apiHost}/api/non-business-documents`)
+        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");
@@ -251,7 +276,28 @@ class BigData {
         });
     }
 
-    initAllChart() {
+    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",
@@ -262,7 +308,7 @@ class BigData {
                 },
                 series: [
                     {
-                    data: [80, 100, 50, 30, 90],
+                        data: seriesData,
                     },
                 ],
                 stroke: {
@@ -305,8 +351,38 @@ class BigData {
                 },
             };
 
-        new ApexCharts(document.querySelector("#chart01"), options1).render();
+            new ApexCharts(
+                document.querySelector("#char-pbg-status-1"),
+                options1
+            ).render();
+        })
+        .catch((error) => {
+            console.error("error fetching chart dara : ", error);
+        });
+    }
 
+    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",
@@ -317,7 +393,7 @@ class BigData {
                 },
                 series: [
                     {
-                    data: [87, 54, 4, 76, 31, 95, 70, 92, 53, 9, 6],
+                        data: seriesData,
                     },
                 ],
                 stroke: {
@@ -360,8 +436,38 @@ class BigData {
                 },
             };
 
-        new ApexCharts(document.querySelector("#chart02"), options1).render();
+            new ApexCharts(
+                document.querySelector("#chart-pbg-status-2"),
+                options1
+            ).render();
+        })
+        .catch((error) => {
+            console.error("error fetching chart dara : ", error);
+        });
+    }
 
+    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",
@@ -372,7 +478,7 @@ class BigData {
                 },
                 series: [
                     {
-                    data: [41, 42, 35, 42, 6, 12, 13, 22, 42, 94, 95],
+                        data: seriesData,
                     },
                 ],
                 stroke: {
@@ -415,114 +521,37 @@ class BigData {
                 },
             };
 
-        new ApexCharts(document.querySelector("#chart03"), options1).render();
+            new ApexCharts(
-
+                document.querySelector("#chart-pbg-status-3"),
-        // var options1 = {
+                options1
-        //     chart: {
+            ).render();
-        //         type: 'area',
+        })
-        //         height: 50,
+        .catch((error) => {
-        //         sparkline: {
+            console.error("error fetching chart dara : ", error);
-        //             enabled: true
+        });
-        //         }
+    }
-        //     },
+    initChartStatus4(){
-        //     series: [{
+        fetch(`${GlobalConfig.apiHost}/api/pbg-task-documents?status=4`, {
-        //         data: [8, 41, 40, 48, 77, 35, 0, 77, 63, 100, 71]
+            credentials: "include",
-        //     }],
+            headers: {
-        //     stroke: {
+                Authorization: `Bearer ${document.querySelector("meta[name='api-token']").content}`,
-        //         width: 2,
+                "Content-Type": "application/json",
-        //         curve: 'smooth'
+            }
-        //     },
+        })
-        //     markers: {
+        .then((response) => {
-        //         size: 0
+            if (!response.ok) {
-        //     },
+                throw new Error("Network response was not ok");
-        //     colors: ["#7e67fe"],
+            }
-        //     tooltip: {
+            return response.json();
-        //         fixed: {
+        })
-        //             enabled: false
+        .then((data) => {
-        //         },
+            const seriesData = data.data.series;
-        //         x: {
+            document.getElementById(
-        //             show: false
+                "countStatus4"
-        //         },
+            ).innerText = `${data.data.count} Berkas`;
-        //         y: {
+            document.getElementById(
-        //             title: {
+                "totalStatus4"
-        //                 formatter: function (seriesName) {
+            ).innerText = `Rp.${addThousandSeparators(data.data.total)}`;
-        //                     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",
@@ -533,7 +562,7 @@ class BigData {
                 },
                 series: [
                     {
-                    data: [87, 54, 4, 76, 31, 95, 70, 92, 53, 9, 6],
+                        data: seriesData,
                     },
                 ],
                 stroke: {
@@ -576,8 +605,37 @@ class BigData {
                 },
             };
 
-        new ApexCharts(document.querySelector("#chart06"), options1).render();
+            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",
@@ -588,7 +646,7 @@ class BigData {
                 },
                 series: [
                     {
-                    data: [41, 42, 35, 42, 6, 12, 13, 22, 42, 94, 95],
+                        data: seriesData,
                     },
                 ],
                 stroke: {
@@ -631,8 +689,37 @@ class BigData {
                 },
             };
 
-        new ApexCharts(document.querySelector("#chart07"), 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",
@@ -643,7 +730,7 @@ class BigData {
                 },
                 series: [
                     {
-                    data: [8, 41, 40, 48, 77, 35, 0, 77, 63, 100, 71],
+                        data: seriesData,
                     },
                 ],
                 stroke: {
@@ -686,8 +773,37 @@ class BigData {
                 },
             };
 
-        new ApexCharts(document.querySelector("#chart08"), options1).render();
+            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",
@@ -698,7 +814,7 @@ class BigData {
                 },
                 series: [
                     {
-                    data: [80, 100, 50, 30, 90],
+                        data: seriesData,
                     },
                 ],
                 stroke: {
@@ -741,8 +857,37 @@ class BigData {
                 },
             };
 
-        new ApexCharts(document.querySelector("#chart09"), options1).render();
+            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",
@@ -753,7 +898,7 @@ class BigData {
                 },
                 series: [
                     {
-                    data: [87, 54, 4, 76, 31, 95, 70, 92, 53, 9, 6],
+                        data: seriesData,
                     },
                 ],
                 stroke: {
@@ -796,8 +941,37 @@ class BigData {
                 },
             };
 
-        new ApexCharts(document.querySelector("#chart10"), options1).render();
+            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",
@@ -808,7 +982,7 @@ class BigData {
                 },
                 series: [
                     {
-                    data: [41, 42, 35, 42, 6, 12, 13, 22, 42, 94, 95],
+                        data: seriesData,
                     },
                 ],
                 stroke: {
@@ -851,70 +1025,17 @@ class BigData {
                 },
             };
 
-        new ApexCharts(document.querySelector("#chart11"), options1).render();
+            new ApexCharts(
-
+                document.querySelector("#chart-pbg-status-24"),
-        // var options1 = {
+                options1
-        //     chart: {
+            ).render();
-        //         type: 'area',
+        })
-        //         height: 50,
+        .catch((error) => {
-        //         sparkline: {
+            console.error("error fetching chart dara : ", error);
-        //             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) {
-    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();
 });

resources/views/auth/signin.blade.php

@@ -14,11 +14,11 @@ class="authentication-bg"
                         <div class="text-center">
                             <div class="mx-auto mb-4 text-center auth-logo">
                                 <a href="{{ route('home') }}" class="logo-dark">
-                                    <img src="/images/logo-dark.png" height="32" alt="logo dark">
+                                    <img src="/images/dputr-kab-bandung.png" height="auto" width="100%" alt="logo dark">
                                 </a>
 
                                 <a href="{{ route('home') }}" class="logo-light">
-                                    <img src="/images/logo-light.png" height="28" alt="logo light">
+                                    <img src="/images/dputr-kab-bandung.png" height="auto" width="100%" alt="logo light">
                                 </a>
                             </div>
                             <h4 class="fw-bold text-dark mb-2">Welcome Back!</h3>

resources/views/dashboards/bigdata.blade.php

@@ -12,12 +12,12 @@
                 <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>
+                        <h5 class="text-dark mt-2 mb-0" id="countStatus1"></h5>
-                        <h3 class="text-dark mt-2 mb-0">Rp.24.416.920.070</h3>
+                        <h3 class="text-dark mt-2 mb-0" id="totalStatus1"></h3>
                     </div>
                 </div>
             </div>
-            <div id="chart01"></div>
+            <div id="char-pbg-status-1"></div>
         </div>
     </div>
 
@@ -28,12 +28,12 @@
                 <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>
+                        <h5 class="text-dark mt-2 mb-0" id="countStatus2"></h5>
-                        <h3 class="text-dark mt-2 mb-0">Rp.17.522.994.118</h3>
+                        <h3 class="text-dark mt-2 mb-0" id="totalStatus2"></h3>
                     </div>
                 </div>
             </div>
-            <div id="chart02"></div>
+            <div id="chart-pbg-status-2"></div>
         </div>
     </div>
 
@@ -44,12 +44,12 @@
                 <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>
+                        <h5 class="text-dark mt-2 mb-0" id="countStatus3"></h5>
-                        <h3 class="text-dark mt-2 mb-0">Rp.6.893.925.952</h3>
+                        <h3 class="text-dark mt-2 mb-0" id="totalStatus3"></h3>
                     </div>
                 </div>
             </div>
-            <div id="chart03"></div>
+            <div id="chart-pbg-status-3"></div>
         </div>
     </div>
 
@@ -94,12 +94,12 @@
                 <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>
+                        <h5 class="text-dark mt-2 mb-0" id="countStatus4"></h5>
-                        <h3 class="text-dark mt-2 mb-0">Rp.1.973.666.055</h3>
+                        <h3 class="text-dark mt-2 mb-0" id="totalStatus4"></h3>
                     </div>
                 </div>
             </div>
-            <div id="chart06"></div>
+            <div id="chart-pbg-status-4"></div>
         </div>
     </div>
 
@@ -110,12 +110,12 @@
                 <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>
+                        <h5 class="text-dark mt-2 mb-0" id="countStatus5"></h5>
-                        <h3 class="text-dark mt-2 mb-0">Rp.1.086.206.621</h3>
+                        <h3 class="text-dark mt-2 mb-0" id="totalStatus5"></h3>
                     </div>
                 </div>
             </div>
-            <div id="chart07"></div>
+            <div id="chart-pbg-status-5"></div>
         </div>
     </div>
 
@@ -126,12 +126,12 @@
                 <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>
+                        <h5 class="text-dark mt-2 mb-0" id="countStatus6"></h5>
-                        <h3 class="text-dark mt-2 mb-0">Rp.14.463.121.442</h3>
+                        <h3 class="text-dark mt-2 mb-0" id="totalStatus6"></h3>
                     </div>
                 </div>
             </div>
-            <div id="chart08"></div>
+            <div id="chart-pbg-status-6"></div>
         </div>
     </div>
 </div>
@@ -144,12 +144,12 @@
                 <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>
+                        <h5 class="text-dark mt-2 mb-0" id="countStatus7"></h5>
-                        <h3 class="text-dark mt-2 mb-0">Rp.1.479.160.749</h3>
+                        <h3 class="text-dark mt-2 mb-0" id="totalStatus7"></h3>
                     </div>
                 </div>
             </div>
-            <div id="chart09"></div>
+            <div id="chart-pbg-status-7"></div>
         </div>
     </div>
 
@@ -160,12 +160,12 @@
                 <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>
+                        <h5 class="text-dark mt-2 mb-0" id="countStatus20"></h5>
-                        <h3 class="text-dark mt-2 mb-0">Rp.1.898.364.080</h3>
+                        <h3 class="text-dark mt-2 mb-0" id="totalStatus20"></h3>
                     </div>
                 </div>
             </div>
-            <div id="chart10"></div>
+            <div id="chart-pbg-status-20"></div>
         </div>
     </div>
 
@@ -176,12 +176,12 @@
                 <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>
+                        <h5 class="text-dark mt-2 mb-0" id="countStatus24"></h5>
-                        <h3 class="text-dark mt-2 mb-0">Rp.3.076.196.000</h3>
+                        <h3 class="text-dark mt-2 mb-0" id="totalStatus24"></h3>
                     </div>
                 </div>
             </div>
-            <div id="chart11"></div>
+            <div id="chart-pbg-status-24"></div>
         </div>
     </div>
 

routes/api.php

@@ -29,11 +29,14 @@ Route::group(['middleware' => 'auth:sanctum'], function (){
 
     // request assignments
     Route::apiResource('request-assignments',RequestAssignmentController::class);
-});
+
-Route::controller(DashboardController::class)->group(function(){
+    // all dashboards
+    Route::controller(DashboardController::class)->group(function(){
         Route::get('/business-documents','businnessDocument');
         Route::get('/non-business-documents','nonBusinnessDocument');
         Route::get('/all-task-documents', 'allTaskDocuments');
+        Route::get('/pbg-task-documents', 'pbgTaskDocuments');
+    });
 });