feature: chatbot

Merge branch 'feature/dashboard-pbg' into dev
hot fix vite config js resources
2025-02-28 17:53:16 +07:00 · 2025-02-25 11:34:08 +07:00 · 2025-02-25 04:18:15 +00:00 · 2025-02-25 10:41:59 +07:00 · 2025-02-25 10:23:41 +07:00 · 2025-02-24 19:00:09 +07:00
57 changed files with 2666 additions and 1297 deletions
--- a/app/Http/Controllers/Api/BigDataResumeController.php
+++ b/app/Http/Controllers/Api/BigDataResumeController.php
@@ -0,0 +1,241 @@
+<?php
+
+namespace App\Http\Controllers\Api;
+
+use App\Http\Controllers\Controller;
+use App\Models\BigdataResume;
+use App\Models\DataSetting;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Log;
+
+class BigDataResumeController extends Controller
+{
+    /**
+     * Display a listing of the resource.
+     */
+    public function index(Request $request)
+    {
+        try{
+            $filterDate = $request->get("filterByDate");
+
+            // If filterByDate is "latest" or empty, get the most recent record
+            if (!$filterDate || $filterDate === "latest") {
+                $big_data_resume = BigdataResume::latest()->first();
+            } else {
+                // Filter by specific date
+                $big_data_resume = BigdataResume::whereDate('created_at', $filterDate)
+                    ->orderBy('id', 'desc')
+                    ->first();
+
+                if (!$big_data_resume) {
+                    return $this->response_empty_resume();
+                }
+            }
+
+            $data_settings = DataSetting::all();
+            if($data_settings->isEmpty()){
+                return response()->json(['message' => 'No data setting found']);
+            }
+
+            $target_pad = floatval(optional($data_settings->where('key', 'TARGET_PAD')->first())->value);
+            $tata_ruang = floatval(optional($data_settings->where('key', 'TATA_RUANG')->first())->value);
+            $realisasi_terbit_pbg_sum = floatval(optional($data_settings->where('key', 'REALISASI_TERBIT_PBG_SUM')->first())->value);
+            $realisasi_terbit_pbg_count = floatval(optional($data_settings->where('key', 'REALISASI_TERBIT_PBG_COUNT')->first())->value);
+            $menuggu_klik_dpmptsp_sum = floatval(optional($data_settings->where('key', 'MENUNGGU_KLIK_DPMPTSP_SUM')->first())->value);
+            $menuggu_klik_dpmptsp_count = floatval(optional($data_settings->where('key', 'MENUNGGU_KLIK_DPMPTSP_COUNT')->first())->value);
+            $proses_dinas_teknis_sum = floatval(optional($data_settings->where('key', 'PROSES_DINAS_TEKNIS_SUM')->first())->value);
+            $proses_dinas_teknis_count = floatval(optional($data_settings->where('key', 'PROSES_DINAS_TEKNIS_COUNT')->first())->value);
+
+            $kekurangan_potensi = $target_pad - $big_data_resume->potention_sum;
+
+            // percentage kekurangan potensi
+            $kekurangan_potensi_percentage = $target_pad > 0 && $target_pad > 0 
+            ? round(($kekurangan_potensi / $target_pad) * 100, 2) : 0;
+
+            // percentage total potensi
+            $total_potensi_percentage = $big_data_resume->potention_sum > 0 && $target_pad > 0 
+            ? round(($big_data_resume->potention_sum / $target_pad) * 100, 2) : 0;
+            
+            // percentage verified document
+            $verified_percentage = $big_data_resume->verified_sum > 0 && $big_data_resume->potention_sum > 0 
+            ? round(($big_data_resume->verified_sum / $big_data_resume->potention_sum) * 100, 2) : 0;
+
+            // percentage non-verified document
+            $non_verified_percentage = $big_data_resume->non_verified_sum > 0 && $big_data_resume->potention_sum > 0 
+            ? round(($big_data_resume->non_verified_sum / $big_data_resume->potention_sum) * 100, 2) : 0;
+
+            // percentage business document
+            $business_percentage = $big_data_resume->business_sum > 0 && $big_data_resume->non_verified_sum > 0 
+            ? round(($big_data_resume->business_sum / $big_data_resume->non_verified_sum) * 100, 2) : 0;
+
+            // percentage non-business document
+            $non_business_percentage = $big_data_resume->non_business_sum > 0 && $big_data_resume->potention_sum > 0 
+            ? round(($big_data_resume->non_business_sum / $big_data_resume->potention_sum) * 100, 2) : 0;
+
+            // percentage tata ruang
+            $tata_ruang_percentage = $tata_ruang > 0 && $big_data_resume->potention_sum > 0 
+            ? round(($tata_ruang / $big_data_resume->potention_sum) * 100, 2) : 0;
+
+            // percentage realisasi terbit pbg
+            $realisasi_terbit_percentage = $big_data_resume->verified_sum > 0 && $realisasi_terbit_pbg_sum > 0
+            ? round(($realisasi_terbit_pbg_sum / $big_data_resume->verified_sum) * 100, 2) : 0;
+
+            // percentage menunggu klik dpmptsp
+            $menunggu_klik_dpmptsp_percentage = $big_data_resume->verified_sum > 0 && $menuggu_klik_dpmptsp_sum > 0
+            ? round(($menuggu_klik_dpmptsp_sum / $big_data_resume->verified_sum) * 100, 2) : 0;
+
+            // percentage proses_dinas_teknis
+            $proses_dinas_teknis_percentage = $big_data_resume->verified_sum > 0 && $proses_dinas_teknis_sum > 0
+            ? round(($proses_dinas_teknis_sum / $big_data_resume->verified_sum) * 100, 2) : 0;
+
+            $result = [
+                'target_pad' => [
+                    'sum' => $target_pad,
+                    'percentage' => 100,
+                ],
+                'tata_ruang' => [
+                    'sum' => $tata_ruang,
+                    'percentage' => $tata_ruang_percentage,
+                ],
+                'kekurangan_potensi' => [
+                    'sum' => $kekurangan_potensi,
+                    'percentage' => $kekurangan_potensi_percentage
+                ],
+                'total_potensi' => [
+                    'sum' => (float) $big_data_resume->potention_sum,
+                    'count' => $big_data_resume->potention_count,
+                    'percentage' => $total_potensi_percentage
+                ],
+                'verified_document' => [
+                    'sum' => (float) $big_data_resume->verified_sum,
+                    'count' => $big_data_resume->verified_count,
+                    'percentage' => $verified_percentage
+                ],
+                'non_verified_document' => [
+                    'sum' => (float) $big_data_resume->non_verified_sum,
+                    'count' => $big_data_resume->non_verified_count,
+                    'percentage' => $non_verified_percentage
+                ],
+                'business_document' => [
+                    'sum' => (float) $big_data_resume->business_sum,
+                    'count' => $big_data_resume->business_count,
+                    'percentage' => $business_percentage
+                ],
+                'non_business_document' => [
+                    'sum' => (float) $big_data_resume->non_business_sum,
+                    'count' => $big_data_resume->non_business_count,
+                    'percentage' => $non_business_percentage
+                ],
+                'realisasi_terbit' => [
+                    'sum' => $realisasi_terbit_pbg_sum,
+                    'count' => $realisasi_terbit_pbg_count,
+                    'percentage' => $realisasi_terbit_percentage
+                ],
+                'menunggu_klik_dpmptsp' => [
+                    'sum' => $menuggu_klik_dpmptsp_sum,
+                    'count' => $menuggu_klik_dpmptsp_count,
+                    'percentage' => $menunggu_klik_dpmptsp_percentage
+                ],
+                'proses_dinas_teknis' => [
+                    'sum' => $proses_dinas_teknis_sum,
+                    'count' => $proses_dinas_teknis_count,
+                    'percentage' => $proses_dinas_teknis_percentage
+                ]
+            ];
+            return response()->json($result);
+        }catch(\Exception $e){
+            return response()->json(['message' => 'Error when fetching data'], 500);
+        }
+    }
+
+    /**
+     * Store a newly created resource in storage.
+     */
+    public function store(Request $request)
+    {
+        //
+    }
+
+    /**
+     * Display the specified resource.
+     */
+    public function show(string $id)
+    {
+        //
+    }
+
+    /**
+     * Update the specified resource in storage.
+     */
+    public function update(Request $request, string $id)
+    {
+        //
+    }
+
+    /**
+     * Remove the specified resource from storage.
+     */
+    public function destroy(string $id)
+    {
+        //
+    }
+
+    private function response_empty_resume(){
+        $result = [
+            'target_pad' => [
+                'sum' => 0,
+                'percentage' => 100,
+            ],
+            'tata_ruang' => [
+                'sum' => 0,
+                'percentage' => 0,
+            ],
+            'kekurangan_potensi' => [
+                'sum' => 0,
+                'percentage' => 0
+            ],
+            'total_potensi' => [
+                'sum' => 0,
+                'count' => 0,
+                'percentage' => 0
+            ],
+            'verified_document' => [
+                'sum' => 0,
+                'count' => 0,
+                'percentage' => 0
+            ],
+            'non_verified_document' => [
+                'sum' => 0,
+                'count' => 0,
+                'percentage' => 0
+            ],
+            'business_document' => [
+                'sum' => 0,
+                'count' => 0,
+                'percentage' => 0
+            ],
+            'non_business_document' => [
+                'sum' => 0,
+                'count' => 0,
+                'percentage' => 0
+            ],
+            'realisasi_terbit' => [
+                'sum' => 0,
+                'count' => 0,
+                'percentage' => 0
+            ],
+            'menunggu_klik_dpmptsp' => [
+                'sum' => 0,
+                'count' => 0,
+                'percentage' => 0
+            ],
+            'proses_dinas_teknis' => [
+                'sum' => 0,
+                'count' => 0,
+                'percentage' => 0
+            ]
+        ];
+
+        return response()->json($result);
+    }
+}
--- a/app/Http/Controllers/Api/ChatbotController.php
+++ b/app/Http/Controllers/Api/ChatbotController.php
@@ -0,0 +1,84 @@
+<?php
+
+namespace App\Http\Controllers\Api;
+
+use Illuminate\Http\Request;
+use App\Services\OpenAIService;
+use App\Http\Controllers\Controller;
+use Illuminate\Http\Response;
+use Illuminate\Support\Facades\DB;
+
+class ChatbotController extends Controller
+{
+    protected $openAIService;
+
+    public function __construct(OpenAIService $openAIService)
+    {
+        $this->openAIService = $openAIService;
+    }
+
+    public function generateText(Request $request)
+    {
+        info($request);
+        $request->validate([
+            'tab_active' => 'required|string',
+            'prompt' => 'required|string',
+        ]);
+
+        $tab_active = $request->input('tab_active');
+        $main_content = match ($tab_active) {
+            "count-retribusi" => "RETRIBUTION",
+            "document-validation" => "DOCUMENT VALIDATION",
+            "data-information" => "DATA SUMMARY",
+            default => "UNKNOWN",
+        };
+
+        if ($main_content === "UNKNOWN") {
+            return response()->json(['response' => 'Invalid tab_active value.'], 400);
+        }
+
+        info($main_content);
+
+        // Klasifikasi apakah pertanyaan butuh database atau bisa dijawab langsung
+        $classifyResponse = $this->openAIService->generateClassifyMainContent($request->input('prompt'), $main_content);
+
+        if ($classifyResponse === "DATABASE") {
+            $queryResponse = $this->openAIService->generateQueryBasedMainContent($request->input('prompt'), $main_content);
+            if (is_array($queryResponse)) {
+                info('Query Response is an array: ', $queryResponse);
+            } else {
+                info('Query Response is a string: ' . $queryResponse);
+            }
+            
+            // Validasi query dua kali sebelum eksekusi
+            if (
+                $this->openAIService->validateSyntaxQuery($queryResponse) === "VALID" &&
+                $this->openAIService->validateSyntaxQuery($queryResponse) === "VALID"
+            ) {
+                info($queryResponse);
+                $queryResponse = str_replace(['```sql', '```'], '', $queryResponse);
+                $resultQuery = DB::select($queryResponse);
+                $formattedResultQuery = json_encode($resultQuery, JSON_PRETTY_PRINT);
+                $nlpResult = $this->openAIService->generateNLPFromQuery($request->input('prompt'), $formattedResultQuery);
+                $finalGeneratedText =$this->openAIService->generateFinalText($nlpResult);
+                return response()->json(['response' => $finalGeneratedText]);
+            }
+
+            return response()->json(['response' => ''], 400);
+        }
+
+        if ($classifyResponse === "GENERAL") {
+            $nlpResult = $this->openAIService->generateGeneralText($request->input('prompt'), $main_content);
+            $finalGeneratedText =$this->openAIService->generateFinalText($nlpResult);
+            return response()->json(['response' => $finalGeneratedText]);
+        }
+
+        return response()->json(['response' => ''], 500);
+    }
+
+
+    private function classifyContent(string $prompt) {
+        $classifyResponse = $this->openAIService->generateClassifyContent($prompt);
+        return $classifyResponse;
+    }
+}
--- a/app/Http/Controllers/Api/LackOfPotentialController.php
+++ b/app/Http/Controllers/Api/LackOfPotentialController.php
@@ -0,0 +1,31 @@
+<?php
+
+namespace App\Http\Controllers\Api;
+
+use App\Http\Controllers\Controller;
+use App\Models\Advertisement;
+use App\Models\Customer;
+use App\Models\SpatialPlanning;
+use Illuminate\Http\Request;
+
+class LackOfPotentialController extends Controller
+{
+
+    public function count_lack_of_potential(){
+        try{
+            $total_reklame = Advertisement::count();
+            $total_pdam = Customer::count();
+            $total_tata_ruang = SpatialPlanning::count();
+
+            return response()->json([
+                'total_reklame' => $total_reklame,
+                'total_pdam' => $total_pdam,
+                'total_tata_ruang' => $total_tata_ruang
+            ], 200);
+        }catch(\Exception $e){
+            return response()->json([
+                'message' => 'Error: '.$e->getMessage()
+            ], 500);
+        }
+    }
+}
--- a/app/Http/Controllers/Api/MenusController.php
+++ b/app/Http/Controllers/Api/MenusController.php
@@ -3,8 +3,11 @@
 namespace App\Http\Controllers\Api;

 use App\Http\Controllers\Controller;
+use App\Http\Requests\MenuRequest;
+use App\Http\Resources\MenuResource;
 use App\Models\Menu;
 use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Log;

 class MenusController extends Controller
 {
@@ -13,7 +16,7 @@ class MenusController extends Controller
     */
    public function index(Request $request)
    {
-        $query = Menu::query();
+        $query = Menu::query()->orderBy('id', 'desc');

        if($request->has("search") && !empty($request->get("search"))){
            $query = $query->where("name", "like", "%".$request->get("search")."%");
@@ -25,9 +28,15 @@ class MenusController extends Controller
    /**
     * Store a newly created resource in storage.
     */
-    public function store(Request $request)
+    public function store(MenuRequest $request)
    {
-        //
+        try{
+            $menu = Menu::create($request->validated());
+            return response()->json(['message' => 'Menu created successfully', 'data' => new MenuResource($menu)]);
+        }catch(\Exception $e){
+            Log::error($e);
+            return response()->json(['message' => 'Error when creating menu'], 500);
+        }
    }

    /**
@@ -35,15 +44,37 @@ class MenusController extends Controller
     */
    public function show(string $id)
    {
-        //
+        try{
+            $menu = Menu::find($id);
+            if($menu){
+                return response()->json(['message' => 'Menu found', 'data' => new MenuResource($menu)]);
+            } else {
+                return response()->json(['message' => 'Menu not found'], 404);
+            }
+        }catch(\Exception $e){
+            Log::error($e);
+            Log::error($e->getMessage());
+            return response()->json(['message' => 'Error when finding menu'], 500);
+        }
    }

    /**
     * Update the specified resource in storage.
     */
-    public function update(Request $request, string $id)
+    public function update(MenuRequest $request, string $id)
    {
-        //
+        try{
+            $menu = Menu::findOrFail($id);
+            if($menu){
+                $menu->update($request->validated());
+                return response()->json(['message' => 'Menu updated successfully', 'data' => new MenuResource($menu)]);
+            } else {
+                return response()->json(['message' => 'Menu not found'], 404);
+            }
+        }catch(\Exception $e){
+            Log::error($e);
+            return response()->json(['message' => 'Error when updating menu'], 500);
+        }
    }

    /**
@@ -51,6 +82,28 @@ class MenusController extends Controller
     */
    public function destroy(string $id)
    {
-        //
+        try{
+            $menu = Menu::findOrFail($id);
+            if($menu){
+                $this->deleteChildren($menu);
+                $menu->roles()->detach();
+                $menu->delete();
+                return response()->json(['message' => 'Menu deleted successfully']);
+            } else {
+                return response()->json(['message' => 'Menu not found'], 404);
+            }
+        }catch(\Exception $e){
+            Log::error($e);
+            return response()->json(['message' => 'Error when deleting menu'], 500);
+        }
+    }
+
+    private function deleteChildren($menu)
+    {
+        foreach ($menu->children as $child) {
+            $this->deleteChildren($child); // Recursively delete its children
+            $child->roles()->detach(); // Detach roles before deleting
+            $child->delete();
+        }
    }
 }
--- a/app/Http/Controllers/Api/RolesController.php
+++ b/app/Http/Controllers/Api/RolesController.php
@@ -3,6 +3,7 @@
 namespace App\Http\Controllers\Api;

 use App\Http\Controllers\Controller;
+use App\Http\Requests\RoleRequest;
 use App\Models\Role;
 use Illuminate\Http\Request;

@@ -13,7 +14,7 @@ class RolesController extends Controller
     */
    public function index(Request $request)
    {
-        $query = Role::query();
+        $query = Role::query()->orderBy('id', 'desc');

        if($request->has('search') && !empty($request->get('search'))){
            $query = $query->where('name', 'like', '%'. $request->get('search') . '%');
@@ -25,9 +26,14 @@ class RolesController extends Controller
    /**
     * Store a newly created resource in storage.
     */
-    public function store(Request $request)
+    public function store(RoleRequest $request)
    {
-        //
+        try{
+            $role = Role::create($request->validated());
+            return response()->json(['message' => 'Successfully created', 'data' => $role]);
+        }catch(\Exception $e){
+            return response()->json(['message' => 'Error when creating role', 'error' => $e->getMessage()], 500);
+        }
    }

    /**
@@ -35,15 +41,34 @@ class RolesController extends Controller
     */
    public function show(string $id)
    {
-        //
+        try{
+            $role = Role::find($id);
+            if($role){
+                return response()->json(['data' => $role]);
+            } else {
+                return response()->json(['message' => 'Role not found'], 404);
+            }
+        }catch(\Exception $e){
+            return response()->json(['message' => 'Error when getting role', 'error' => $e->getMessage()], 500);
+        }
    }

    /**
     * Update the specified resource in storage.
     */
-    public function update(Request $request, string $id)
+    public function update(RoleRequest $request, string $id)
    {
-        //
+        try{
+            $role = Role::find($id);
+            if($role){
+                $role->update($request->validated());
+                return response()->json(['message' => 'Successfully updated', 'data' => $role]);
+            } else {
+                return response()->json(['message' => 'Role not found'], 404);
+            }
+        }catch(\Exception $e){
+            return response()->json(['message' => 'Error when updating role', 'error' => $e->getMessage()], 500);
+        }
    }

    /**
@@ -51,6 +76,16 @@ class RolesController extends Controller
     */
    public function destroy(string $id)
    {
-        //
+        try{
+            $role = Role::find($id);
+            if($role){
+                $role->delete();
+                return response()->json(['message' => 'Successfully deleted']);
+            } else {
+                return response()->json(['message' => 'Role not found'], 404);
+            }
+        }catch(\Exception $e){
+            return response()->json(['message' => 'Error when deleting role', 'error' => $e->getMessage()], 500);
+        }
    }
 }
--- a/app/Http/Controllers/Chatbot/ChatbotController.php
+++ b/app/Http/Controllers/Chatbot/ChatbotController.php
@@ -0,0 +1,17 @@
+<?php
+
+namespace App\Http\Controllers\Chatbot;
+
+use App\Http\Controllers\Controller;
+use Illuminate\Http\Request;
+
+class ChatbotController extends Controller
+{
+    /**
+     * Displya a listing of the resource
+     */
+    public function index()
+    {
+        return view('chatbot.index');
+    }
+}
--- a/app/Http/Controllers/GoogleApisController.php
+++ b/app/Http/Controllers/GoogleApisController.php
@@ -0,0 +1,12 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+
+class GoogleApisController extends Controller
+{
+    public function index(){
+        return view('maps.google-api');
+    }
+}
--- a/app/Http/Requests/DataSettingRequest.php
+++ b/app/Http/Requests/DataSettingRequest.php
@@ -21,7 +21,7 @@ class DataSettingRequest extends FormRequest
     */
    public function rules(): array
    {
-        $id = $this->route('data_setting');
+        $id = $this->route('data_setting_id');
        return [
            "key" => "required|unique:data_settings,key," . $id,
            "value" => "required",
--- a/app/Http/Requests/MenuRequest.php
+++ b/app/Http/Requests/MenuRequest.php
@@ -3,6 +3,7 @@
 namespace App\Http\Requests;

 use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Validation\Rule;

 class MenuRequest extends FormRequest
 {
@@ -21,12 +22,14 @@ class MenuRequest extends FormRequest
     */
    public function rules(): array
    {
+        $menuId = $this->route('menu_id'); // Get the menu ID if updating
+
        return [
-            'name' => ['required','string','max:255'],
-            'url' => ['nullable','string','max:255'],
-            'icon' => ['nullable','string','max:255'],
-            'parent_id' => ['nullable','exists:menus,id'],
-            'sort_order' => ['required','integer'],
+            'name' => ['required', 'string', 'max:255', Rule::unique('menus', 'name')->ignore($menuId)],
+            'url' => ['nullable', 'string', 'max:255'],
+            'icon' => ['nullable', 'string', 'max:255'],
+            'parent_id' => ['nullable', 'exists:menus,id'],
+            'sort_order' => ['required', 'integer'],
        ];
    }
 }
--- a/app/Http/Requests/RoleRequest.php
+++ b/app/Http/Requests/RoleRequest.php
@@ -21,7 +21,7 @@ class RoleRequest extends FormRequest
     */
    public function rules(): array
    {
-        $roleId = $this->route('role');
+        $roleId = $this->route('role_id');
        return [
            'name' => 'required|string|max:255|unique:roles,name,' . ($roleId ?? 'NULL') . ',id',
            'description' => 'nullable|string',
--- a/app/Http/Resources/MenuResource.php
+++ b/app/Http/Resources/MenuResource.php
@@ -0,0 +1,19 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+
+class MenuResource extends JsonResource
+{
+    /**
+     * Transform the resource into an array.
+     *
+     * @return array<string, mixed>
+     */
+    public function toArray(Request $request): array
+    {
+        return parent::toArray($request);
+    }
+}
--- a/app/Services/OpenAIService.php
+++ b/app/Services/OpenAIService.php
@@ -0,0 +1,157 @@
+<?php
+
+namespace App\Services;
+
+use OpenAI;
+use Illuminate\Support\Facades\Storage;
+
+class OpenAIService
+{
+    protected $client;
+
+    public function __construct()
+    {
+        $this->client = OpenAI::client(env('OPENAI_API_KEY'));
+    }
+
+    public function generateGeneralText($prompt, $mainContent)
+    {
+        $response = $this->client->chat()->create([
+            'model' => 'gpt-4o-mini',
+            'messages' => [
+                [
+                    'role' => 'system', 
+                    'content' => "You are an expert assistant. Your task is to generate a concise response based on the provided prompt and main content. 
+
+                    Guidelines:
+                    - Summarize the key points in exactly 5 bullet points.
+                    - Ensure the response is clear and relevant to the prompt.
+                    - Use simple and professional language."
+                ],
+                ['role' => 'user', 'content' => "Prompt: $prompt \nMain Content: $mainContent"],
+            ],
+        ]);
+
+        return trim($response['choices'][0]['message']['content'] ?? 'No response');
+    }
+
+    public function generateClassifyMainContent($prompt, $mainContent)
+    {
+        $response = $this->client->chat()->create([
+            'model' => 'gpt-4o-mini',
+            'messages' => [
+                [
+                    'role' => 'system', 
+                    'content' => "You are an expert assistant in classifying questions based on whether their answers must be retrieved from a database or can be explained generally.
+                    Your task is to return one of the following two labels:
+                    - \"DATABASE\" → If the question requires specific data that can only be obtained from a database.
+                    - \"GENERAL\" → If the question can be answered without accessing a database.
+                    
+                    Consider the following context: \"$mainContent\"
+                    
+                    Respond with only one of the labels: \"DATABASE\" or \"GENERAL\"."
+                ],
+                ['role' => 'user', 'content' => $prompt],
+            ],
+        ]);
+
+        return trim($response['choices'][0]['message']['content'] ?? 'No response');
+    }
+
+    public function generateQueryBasedMainContent($prompt, $mainContent)
+    {
+        // Load file JSON
+        $jsonPath = public_path('templates/contentTemplatePrompt.json'); // Sesuaikan path
+        $jsonData = json_decode(file_get_contents($jsonPath), true);
+
+        // Periksa apakah kategori ada dalam JSON
+        if (!isset($jsonData[$mainContent])) {
+            return "Template prompt tidak ditemukan.";
+        }
+
+        // Ambil template berdasarkan kategori
+        $promptTemplate = $jsonData[$mainContent]['prompt'];
+
+        $response = $this->client->chat()->create([
+            'model' => 'gpt-4o-mini',
+            'messages' => [
+                ['role' => 'system', 'content' => $promptTemplate],
+                ['role' => 'user', 'content' => $prompt],
+            ],
+        ]);
+
+        return trim($response['choices'][0]['message']['content'] ?? 'No response');
+    }
+
+
+    public function validateSyntaxQuery($queryResponse)
+    {
+        $response = $this->client->chat()->create([
+            'model' => 'gpt-4o-mini',
+            'messages' => [
+                [
+                    'role' => 'system', 
+                    'content' => "You are a MariaDB SQL expert. Your task is to validate the syntax of an SQL query to ensure it follows proper MariaDB syntax rules. 
+
+                    Guidelines:
+                    - Check for any syntax errors, missing keywords, or incorrect clause usage.
+                    - Ensure the query is well-structured and adheres to best practices.
+                    - Verify that all SQL keywords are used correctly and in the right order.
+                    - If the query is valid, respond with: \"VALID\".
+                    - If the query has issues, respond with: \"INVALID\".
+                    
+                    Always respond with either \"VALID\" or \"INVALID\"."
+                ],
+                ['role' => 'user', 'content' => $queryResponse],
+            ],
+        ]);
+
+        return trim($response['choices'][0]['message']['content'] ?? 'No response');
+    }
+
+    public function generateNLPFromQuery($inputUser, $resultQuery) {
+        $response = $this->client->chat()->create([
+            'model' => 'gpt-4o-mini',
+            'messages' => [
+                [
+                    'role' => 'system', 
+                    'content' => "You are an expert assistant. Your task is to analyze the database query results and transform them into a human-readable answer based on the user's question.
+    
+                    Guidelines:
+                    - Understand the user's question and extract the key intent.
+                    - Summarize or format the query results to directly answer the user's question.
+                    - Ensure the response is clear, concise, and relevant.
+                    - If the query result is empty or does not match the question, provide a polite response indicating that no data is available.
+    
+                    Always provide a well-structured response that makes sense based on the input question."
+                ],
+                ['role' => 'user', 'content' => "User's question: $inputUser \nDatabase result: $resultQuery"],
+            ],
+        ]);
+    
+        return trim($response['choices'][0]['message']['content'] ?? 'No response');
+    }
+
+    public function generateFinalText($nlpResult) {
+        $response = $this->client->chat()->create([
+            'model' => 'gpt-4o-mini',
+            'messages' => [
+                [
+                    'role' => 'system',
+                    'content' => "You are an expert text formatter. Your task is to take the given NLP result and format it into a structured, human-readable text suitable for rendering inside an HTML <div>.
+    
+                    Guidelines:
+                    - Preserve the meaning and clarity of the content.
+                    - Use proper line breaks for readability.
+                    - If the text contains lists, convert them into bullet points.
+                    - Emphasize important keywords using <strong> tags if necessary.
+                    - Ensure the response remains clean and concise without extra explanations."
+                ],
+                ['role' => 'user', 'content' => "Here is the NLP result that needs formatting:\n\n$nlpResult"],
+            ],
+        ]);
+    
+        return trim($response['choices'][0]['message']['content'] ?? 'No response');
+    }    
+
+}
--- a/app/Services/ServiceSIMBG.php
+++ b/app/Services/ServiceSIMBG.php
@@ -61,32 +61,37 @@ class ServiceSIMBG
        }
    }

-    public function syncIndexIntegration($uuid, $token)
+    public function syncIndexIntegration($uuids, $token)
    {
        try{
-            $url = "/api/pbg/v1/detail/" . $uuid . "/retribution/indeks-terintegrasi/";
-    
-            $headers = [
-                'Authorization' => "Bearer " . $token,
-            ];
-        
-            $res = $this->service_client->get($url, $headers);
-        
-            if (empty($res->original['success']) || !$res->original['success']) {
-                // Log error
-                Log::error("API response indicates failure", ['url' => $url, 'uuid' => $uuid]);
+            if(empty($uuids)){
                return false;
            }
+            
+            $integrations = [];
+            foreach($uuids as $uuid){
+                $url = "/api/pbg/v1/detail/" . $uuid . "/retribution/indeks-terintegrasi/";
        
-            $data = $res->original['data']['data'] ?? null;
-            if (!$data) {
-                Log::error("No valid data returned from API", ['url' => $url, 'uuid' => $uuid]);
-                return false;
-            }
-        
-            $resultData = PbgTaskIndexIntegrations::updateOrCreate(
-                ['pbg_task_uid' => $uuid],
-                [
+                $headers = [
+                    'Authorization' => "Bearer " . $token,
+                ];
+            
+                $res = $this->service_client->get($url, $headers);
+            
+                if (empty($res->original['success']) || !$res->original['success']) {
+                    // Log error
+                    Log::error("API response indicates failure", ['url' => $url, 'uuid' => $uuid]);
+                    return false;
+                }
+            
+                $data = $res->original['data']['data'] ?? null;
+                if (!$data) {
+                    Log::error("No valid data returned from API", ['url' => $url, 'uuid' => $uuid]);
+                    return false;
+                }
+
+                $integrations[] = [
+                    'pbg_task_uid' => $uuid,
                    'indeks_fungsi_bangunan' => $data['indeks_fungsi_bangunan'] ?? null,
                    'indeks_parameter_kompleksitas' => $data['indeks_parameter_kompleksitas'] ?? null,
                    'indeks_parameter_permanensi' => $data['indeks_parameter_permanensi'] ?? null,
@@ -94,8 +99,24 @@ class ServiceSIMBG
                    'faktor_kepemilikan' => $data['faktor_kepemilikan'] ?? null,
                    'indeks_terintegrasi' => $data['indeks_terintegrasi'] ?? null,
                    'total' => $data['total'] ?? null,
-                ]
-            );
+                ];
+            }
+
+            PbgTaskIndexIntegrations::upsert($integrations, ['pbg_task_uid'], ['indeks_fungsi_bangunan', 
+            'indeks_parameter_kompleksitas', 'indeks_parameter_permanensi', 'indeks_parameter_ketinggian', 'faktor_kepemilikan', 'indeks_terintegrasi', 'total']);
+        
+            // $resultData = PbgTaskIndexIntegrations::updateOrCreate(
+            //     ['pbg_task_uid' => $uuid],
+            //     [
+            //         'indeks_fungsi_bangunan' => $data['indeks_fungsi_bangunan'] ?? null,
+            //         'indeks_parameter_kompleksitas' => $data['indeks_parameter_kompleksitas'] ?? null,
+            //         'indeks_parameter_permanensi' => $data['indeks_parameter_permanensi'] ?? null,
+            //         'indeks_parameter_ketinggian' => $data['indeks_parameter_ketinggian'] ?? null,
+            //         'faktor_kepemilikan' => $data['faktor_kepemilikan'] ?? null,
+            //         'indeks_terintegrasi' => $data['indeks_terintegrasi'] ?? null,
+            //         'total' => $data['total'] ?? null,
+            //     ]
+            // );
            
            return true;
        }catch (Exception $e){
@@ -190,7 +211,7 @@ class ServiceSIMBG
                        'created_at' => now(),
                    ];

-                    $this->syncIndexIntegration($item['uid'], $token);
+                    // $this->syncIndexIntegration($item['uid'], $token);

                    $this->syncTaskDetailSubmit($item['uid'], $token);
                    
@@ -215,8 +236,11 @@ class ServiceSIMBG
                'slf_status', 'slf_status_name', 'function_type', 'consultation_type', 'due_date',
                'land_certificate_phase', 'task_created_at', 'updated_at'
            ]);
+            
+            $uuids = array_column($tasksCollective, 'uuid');
+            $this->syncIndexIntegration($uuids, $token);
        }
-
+        
        $importDatasource->update([
            'status' => ImportDatasourceStatus::Success->value,
            'message' => "Successfully processed: $savedCount, Failed: $failedCount"
@@ -311,5 +335,4 @@ class ServiceSIMBG
        }
    }

-}
-
+}
--- a/composer.json
+++ b/composer.json
@@ -15,7 +15,8 @@
        "laravel/framework": "^11.31",
        "laravel/sanctum": "^4.0",
        "laravel/tinker": "^2.9",
-        "maatwebsite/excel": "^3.1"
+        "maatwebsite/excel": "^3.1",
+        "openai-php/client": "^0.10.3"
    },
    "require-dev": {
        "fakerphp/faker": "^1.23",
--- a/composer.lock
+++ b/composer.lock
@@ -4,7 +4,7 @@
        "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
        "This file is @generated automatically"
    ],
-    "content-hash": "52617d098d62b15c6ce8538cc8aea775",
+    "content-hash": "41bb51871a746904ab745e4095db8b46",
    "packages": [
        {
            "name": "brick/math",
@@ -3296,6 +3296,97 @@
            ],
            "time": "2024-11-21T10:39:51+00:00"
        },
+        {
+            "name": "openai-php/client",
+            "version": "v0.10.3",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/openai-php/client.git",
+                "reference": "4a565d145e0fb3ea1baba8fffe39d86c56b6dc2c"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/openai-php/client/zipball/4a565d145e0fb3ea1baba8fffe39d86c56b6dc2c",
+                "reference": "4a565d145e0fb3ea1baba8fffe39d86c56b6dc2c",
+                "shasum": ""
+            },
+            "require": {
+                "php": "^8.1.0",
+                "php-http/discovery": "^1.20.0",
+                "php-http/multipart-stream-builder": "^1.4.2",
+                "psr/http-client": "^1.0.3",
+                "psr/http-client-implementation": "^1.0.1",
+                "psr/http-factory-implementation": "*",
+                "psr/http-message": "^1.1.0|^2.0.0"
+            },
+            "require-dev": {
+                "guzzlehttp/guzzle": "^7.9.2",
+                "guzzlehttp/psr7": "^2.7.0",
+                "laravel/pint": "^1.18.1",
+                "mockery/mockery": "^1.6.12",
+                "nunomaduro/collision": "^7.11.0|^8.5.0",
+                "pestphp/pest": "^2.36.0|^3.5.0",
+                "pestphp/pest-plugin-arch": "^2.7|^3.0",
+                "pestphp/pest-plugin-type-coverage": "^2.8.7|^3.1.0",
+                "phpstan/phpstan": "^1.12.7",
+                "symfony/var-dumper": "^6.4.11|^7.1.5"
+            },
+            "type": "library",
+            "autoload": {
+                "files": [
+                    "src/OpenAI.php"
+                ],
+                "psr-4": {
+                    "OpenAI\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Nuno Maduro",
+                    "email": "enunomaduro@gmail.com"
+                },
+                {
+                    "name": "Sandro Gehri"
+                }
+            ],
+            "description": "OpenAI PHP is a supercharged PHP API client that allows you to interact with the Open AI API",
+            "keywords": [
+                "GPT-3",
+                "api",
+                "client",
+                "codex",
+                "dall-e",
+                "language",
+                "natural",
+                "openai",
+                "php",
+                "processing",
+                "sdk"
+            ],
+            "support": {
+                "issues": "https://github.com/openai-php/client/issues",
+                "source": "https://github.com/openai-php/client/tree/v0.10.3"
+            },
+            "funding": [
+                {
+                    "url": "https://www.paypal.com/paypalme/enunomaduro",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/gehrisandro",
+                    "type": "github"
+                },
+                {
+                    "url": "https://github.com/nunomaduro",
+                    "type": "github"
+                }
+            ],
+            "time": "2024-11-12T20:51:16+00:00"
+        },
        {
            "name": "paragonie/constant_time_encoding",
            "version": "v3.0.0",
@@ -3413,6 +3504,141 @@
            },
            "time": "2020-10-15T08:29:30+00:00"
        },
+        {
+            "name": "php-http/discovery",
+            "version": "1.20.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/php-http/discovery.git",
+                "reference": "82fe4c73ef3363caed49ff8dd1539ba06044910d"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/php-http/discovery/zipball/82fe4c73ef3363caed49ff8dd1539ba06044910d",
+                "reference": "82fe4c73ef3363caed49ff8dd1539ba06044910d",
+                "shasum": ""
+            },
+            "require": {
+                "composer-plugin-api": "^1.0|^2.0",
+                "php": "^7.1 || ^8.0"
+            },
+            "conflict": {
+                "nyholm/psr7": "<1.0",
+                "zendframework/zend-diactoros": "*"
+            },
+            "provide": {
+                "php-http/async-client-implementation": "*",
+                "php-http/client-implementation": "*",
+                "psr/http-client-implementation": "*",
+                "psr/http-factory-implementation": "*",
+                "psr/http-message-implementation": "*"
+            },
+            "require-dev": {
+                "composer/composer": "^1.0.2|^2.0",
+                "graham-campbell/phpspec-skip-example-extension": "^5.0",
+                "php-http/httplug": "^1.0 || ^2.0",
+                "php-http/message-factory": "^1.0",
+                "phpspec/phpspec": "^5.1 || ^6.1 || ^7.3",
+                "sebastian/comparator": "^3.0.5 || ^4.0.8",
+                "symfony/phpunit-bridge": "^6.4.4 || ^7.0.1"
+            },
+            "type": "composer-plugin",
+            "extra": {
+                "class": "Http\\Discovery\\Composer\\Plugin",
+                "plugin-optional": true
+            },
+            "autoload": {
+                "psr-4": {
+                    "Http\\Discovery\\": "src/"
+                },
+                "exclude-from-classmap": [
+                    "src/Composer/Plugin.php"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Márk Sági-Kazár",
+                    "email": "mark.sagikazar@gmail.com"
+                }
+            ],
+            "description": "Finds and installs PSR-7, PSR-17, PSR-18 and HTTPlug implementations",
+            "homepage": "http://php-http.org",
+            "keywords": [
+                "adapter",
+                "client",
+                "discovery",
+                "factory",
+                "http",
+                "message",
+                "psr17",
+                "psr7"
+            ],
+            "support": {
+                "issues": "https://github.com/php-http/discovery/issues",
+                "source": "https://github.com/php-http/discovery/tree/1.20.0"
+            },
+            "time": "2024-10-02T11:20:13+00:00"
+        },
+        {
+            "name": "php-http/multipart-stream-builder",
+            "version": "1.4.2",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/php-http/multipart-stream-builder.git",
+                "reference": "10086e6de6f53489cca5ecc45b6f468604d3460e"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/php-http/multipart-stream-builder/zipball/10086e6de6f53489cca5ecc45b6f468604d3460e",
+                "reference": "10086e6de6f53489cca5ecc45b6f468604d3460e",
+                "shasum": ""
+            },
+            "require": {
+                "php": "^7.1 || ^8.0",
+                "php-http/discovery": "^1.15",
+                "psr/http-factory-implementation": "^1.0"
+            },
+            "require-dev": {
+                "nyholm/psr7": "^1.0",
+                "php-http/message": "^1.5",
+                "php-http/message-factory": "^1.0.2",
+                "phpunit/phpunit": "^7.5.15 || ^8.5 || ^9.3"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Http\\Message\\MultipartStream\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Tobias Nyholm",
+                    "email": "tobias.nyholm@gmail.com"
+                }
+            ],
+            "description": "A builder class that help you create a multipart stream",
+            "homepage": "http://php-http.org",
+            "keywords": [
+                "factory",
+                "http",
+                "message",
+                "multipart stream",
+                "stream"
+            ],
+            "support": {
+                "issues": "https://github.com/php-http/multipart-stream-builder/issues",
+                "source": "https://github.com/php-http/multipart-stream-builder/tree/1.4.2"
+            },
+            "time": "2024-09-04T13:22:54+00:00"
+        },
        {
            "name": "phpoffice/phpspreadsheet",
            "version": "1.29.10",
@@ -7155,74 +7381,6 @@
            },
            "time": "2020-07-09T08:09:16+00:00"
        },
-        {
-            "name": "ibex/crud-generator",
-            "version": "v2.1.2",
-            "source": {
-                "type": "git",
-                "url": "https://github.com/awais-vteams/laravel-crud-generator.git",
-                "reference": "3906f4a702c91bbe3a84d940c3021d1511834320"
-            },
-            "dist": {
-                "type": "zip",
-                "url": "https://api.github.com/repos/awais-vteams/laravel-crud-generator/zipball/3906f4a702c91bbe3a84d940c3021d1511834320",
-                "reference": "3906f4a702c91bbe3a84d940c3021d1511834320",
-                "shasum": ""
-            },
-            "require": {
-                "laravel/framework": "^10.30|^11.0",
-                "php": "^8.2"
-            },
-            "type": "library",
-            "extra": {
-                "laravel": {
-                    "providers": [
-                        "Ibex\\CrudGenerator\\CrudServiceProvider"
-                    ]
-                }
-            },
-            "autoload": {
-                "psr-4": {
-                    "Ibex\\CrudGenerator\\": "src/"
-                }
-            },
-            "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
-            "authors": [
-                {
-                    "name": "M Awais",
-                    "email": "asargodha@gmail.com"
-                }
-            ],
-            "description": "Laravel CRUD Generator",
-            "keywords": [
-                "alpine js",
-                "bootstrap css",
-                "crud",
-                "crud generator",
-                "laravel",
-                "laravel crud generator",
-                "laravel package",
-                "tailwind css"
-            ],
-            "support": {
-                "issues": "https://github.com/awais-vteams/laravel-crud-generator/issues",
-                "source": "https://github.com/awais-vteams/laravel-crud-generator/tree/v2.1.2"
-            },
-            "funding": [
-                {
-                    "url": "https://github.com/awais-vteams",
-                    "type": "github"
-                },
-                {
-                    "url": "https://ko-fi.com/mawais",
-                    "type": "ko_fi"
-                }
-            ],
-            "time": "2024-12-09T06:01:54+00:00"
-        },
        {
            "name": "laravel/pail",
            "version": "v1.2.2",
@@ -9316,12 +9474,12 @@
    ],
    "aliases": [],
    "minimum-stability": "stable",
-    "stability-flags": [],
+    "stability-flags": {},
    "prefer-stable": true,
    "prefer-lowest": false,
    "platform": {
        "php": "^8.2"
    },
-    "platform-dev": [],
+    "platform-dev": {},
    "plugin-api-version": "2.6.0"
 }
--- a/database/migrations/2025_02_27_163347_add_formatted_registration_number_to_pbg_task_google_sheet.php
+++ b/database/migrations/2025_02_27_163347_add_formatted_registration_number_to_pbg_task_google_sheet.php
@@ -0,0 +1,28 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('pbg_task_google_sheet', function (Blueprint $table) {
+            $table->string('formatted_registration_number')->nullable()->after('no_registrasi');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('pbg_task_google_sheet', function (Blueprint $table) {
+            $table->dropColumn('formatted_registration_number');
+        });
+    }
+};
--- a/database/seeders/UsersRoleMenuSeeder.php
+++ b/database/seeders/UsersRoleMenuSeeder.php
@@ -116,6 +116,13 @@ class UsersRoleMenuSeeder extends Seeder
                "parent_id" => $dashboard->id,
                "sort_order" => 3,
            ],
+            [
+                "name" => "PETA",
+                "url" => "dashboard.maps",
+                "icon" => null,
+                "parent_id" => $dashboard->id,
+                "sort_order" => 4,
+            ],
            [
                "name" => "Users",
                "url" => "users.index",
@@ -229,6 +236,7 @@ class UsersRoleMenuSeeder extends Seeder
        $lack_of_potentials = Menu::where('name', 'Dashboard Potensi')->first();
        $spatial_plannings = Menu::where('name', 'Tata Ruang')->first();
        $pdam = Menu::where('name', 'PDAM')->first();
+        $peta = Menu::where('name', 'PETA')->first();

        // Superadmin gets all menus
        $superadmin->menus()->sync([
@@ -256,6 +264,7 @@ class UsersRoleMenuSeeder extends Seeder
            $lack_of_potentials->id => ["allow_show" => true, "allow_create" => true, "allow_update" => true, "allow_destroy" => true],
            $spatial_plannings->id => ["allow_show" => true, "allow_create" => true, "allow_update" => true, "allow_destroy" => true],
            $pdam->id => ["allow_show" => true, "allow_create" => true, "allow_update" => true, "allow_destroy" => true],
+            $peta->id => ["allow_show" => true, "allow_create" => true, "allow_update" => true, "allow_destroy" => true],
        ]);

        // Admin gets limited menus
--- a/public/images/iconchatbot.jpeg
+++ b/public/images/iconchatbot.jpeg
--- a/public/templates/contentTemplatePrompt.json
+++ b/public/templates/contentTemplatePrompt.json
@@ -0,0 +1,11 @@
+{
+    "RETRIBUTION": {
+        "prompt": "You are a MariaDB SQL expert. Your task is to generate an efficient and optimized SQL query based on user input.\n\n        The query should retrieve data from the view table `v_pbg_task_with_retributions`, specifically selecting the following columns:\n\n        - nilai_retribusi_bangunan\n        - land_certificate_phase\n        - due_date\n        - consultation_type\n        - function_type\n        - slf_status_name\n        - slf_status\n        - status_name\n        - status\n        - address\n        - document_number\n        - registration_number\n        - application_type_name\n        - application_type\n        - owner_name\n        - name\n\n        Ensure the query is well-structured, uses best indexing practices, and avoids performance bottlenecks.\n\n        Consider the following context: \"$mainContent\".\n\n        Always return only the SQL query without any additional explanation."
+    },
+    "DOCUMENT VALIDATION": {
+        "prompt": "You are a MariaDB SQL expert. Your task is to generate an efficient and optimized SQL query based on user input.\n\n        The query should retrieve data from the view table `pbg_task`, specifically selecting the following columns:\n\n        - name\n        - owner_name\n        - application_type\n        - application_type_name\n        - registration_number\n        - document_number\n        - address\n        - status_name\n        - slf_status\n        - slf_status_name\n        - function_type\n        - consultation_type\n        - function_type\n        - consultation_type\n        - due_date\n        - land_certificate_phase\n\n        Ensure the query is well-structured, uses best indexing practices, and avoids performance bottlenecks.\n\n        Consider the following context: \"$mainContent\".\n\n        Always return only the SQL query without any additional explanation."
+    },
+    "DATA SUMMARY": {
+        "prompt": "You are a MariaDB SQL expert. Your task is to generate an efficient and optimized SQL query based on user input.\n\n        The query should retrieve data from the view table `bigdata_resumes`, specifically selecting the following columns:\n\n        - potention_count\n        - potention_sum\n        - non_verified_count\n        - non_verified_sum\n        - verified_sum\n        - verified_count\n        - business_count\n        - business_sum\n        - non_business_count\n        - non_business_sum\n        - spatial_count\n        - spatial_sum\n        - updated_at\n\n        Ensure the query is well-structured, uses best indexing practices, and avoids performance bottlenecks.\n\n        Consider the following context: \"$mainContent\".\n\n        Always return only the SQL query without any additional explanation."
+    }
+}
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -2,6 +2,30 @@ import bootstrap from "bootstrap/dist/js/bootstrap";
 window.bootstrap = bootstrap;
 import "iconify-icon";
 import "simplebar/dist/simplebar";
+// import flatpickr from "flatpickr";
+// import "flatpickr/dist/flatpickr.min.css";
+
+// class InitDatePicker {
+//     constructor(selector = ".datepicker") {
+//         this.selector = selector;
+//     }
+//     init() {
+//         const elements = document.querySelectorAll(this.selector);
+//         if (elements.length === 0) return; // Skip if no elements found
+
+//         const today = new Date();
+//         const minYear = today.getFullYear() - 5;
+
+//         elements.forEach((element) => {
+//             flatpickr(element, {
+//                 enableTime: false,
+//                 dateFormat: "Y-m-d",
+//                 minDate: `${minYear}-01-01`,
+//                 maxDate: today,
+//             });
+//         });
+//     }
+// }

 class Components {
    initBootstrapComponents() {
@@ -107,6 +131,7 @@ class FormValidation {
 }
 document.addEventListener("DOMContentLoaded", function (e) {
    new Components().init(), new FormValidation().init();
+    // new InitDatePicker().init();
 });
 class ThemeLayout {
    constructor() {
--- a/resources/js/business-industries/index.js
+++ b/resources/js/business-industries/index.js
@@ -2,58 +2,36 @@ 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.js";
+import Swal from "sweetalert2";

 class BusinessIndustries {
    constructor() {
-        this.table = null; // Store Grid.js instance
+        this.toastMessage = document.getElementById("toast-message");
+        this.toastElement = document.getElementById("toastNotification");
+        this.toast = new bootstrap.Toast(this.toastElement);
+        this.table = null;
+
+        // Initialize functions
+        this.initTableBusinessIndustries();
+        this.initEvents();
    }
-    init() {
-        this.getFetchApiData();
+    initEvents() {
+        document.body.addEventListener("click", async (event) => {
+            const deleteButton = event.target.closest(
+                ".btn-delete-business-industry"
+            );
+            if (deleteButton) {
+                event.preventDefault();
+                await this.handleDelete(deleteButton);
+            }
+        });
    }

-    getFetchApiData() {
+    initTableBusinessIndustries() {
        let tableContainer = document.getElementById(
            "table-business-industries"
        );
-
-        if (this.table) {
-            // If table exists, update its data instead of recreating
-            this.table
-                .updateConfig({
-                    server: {
-                        url: `${GlobalConfig.apiHost}/api/api-business-industries`,
-                        credentials: "include",
-                        headers: {
-                            Authorization: `Bearer ${document
-                                .querySelector('meta[name="api-token"]')
-                                .getAttribute("content")}`,
-                            "Content-Type": "application/json",
-                        },
-                        then: (data) =>
-                            data.data.map((item) => [
-                                item.id,
-                                item.nama_kecamatan,
-                                item.nama_kelurahan,
-                                item.nop,
-                                item.nama_wajib_pajak,
-                                item.alamat_wajib_pajak,
-                                item.alamat_objek_pajak,
-                                item.luas_bumi,
-                                item.luas_bangunan,
-                                item.njop_bumi,
-                                item.njop_bangunan,
-                                item.ketetapan,
-                                item.tahun_pajak,
-                                item.created_at,
-                                item.id,
-                            ]),
-                        total: (data) => data.total,
-                    },
-                })
-                .forceRender();
-            return;
-        }
-
+        // Create a new Grid.js instance only if it doesn't exist
        this.table = new Grid({
            columns: [
                { name: "ID", width: "80px", hidden: false },
@@ -71,27 +49,20 @@ class BusinessIndustries {
                { name: "Tahun Pajak", width: "120px" },
                { name: "Created", width: "180px" },
                {
-                    name: "Actions",
-                    width: "120px",
-                    formatter: function (cell) {
-                        return gridjs.html(`
-                    <div class="d-flex justify-content-center gap-2">
-                        <a href="/data/business-industries/${cell}/edit" class="btn btn-yellow btn-sm d-inline-flex align-items-center justify-content-center">
-                            <i class='bx bx-edit'></i>
-                        </a>
-                        <button class="btn btn-sm btn-red d-inline-flex align-items-center justify-content-center btn-delete-business-industries" data-id="${cell}">
-                            <i class='bx bxs-trash'></i>
-                        </button>
-                    </div>
-                `);
-                    },
+                    name: "Action",
+                    formatter: (cell) =>
+                        gridjs.html(`
+                                          <div class="d-flex justify-content-center gap-2">
+                                              <a href="/data/business-industries/${cell}/edit" class="btn btn-yellow btn-sm d-inline-flex align-items-center justify-content-center">
+                                                  <i class='bx bx-edit'></i>
+                                              </a>
+                                              <button data-id="${cell}" class="btn btn-sm btn-red btn-delete-business-industry d-inline-flex align-items-center justify-content-center">
+                                                  <i class='bx bxs-trash' ></i>
+                                              </button>
+                                          </div>
+                                      `),
                },
            ],
-            search: {
-                server: {
-                    url: (prev, keyword) => `${prev}?search=${keyword}`,
-                },
-            },
            pagination: {
                limit: 15,
                server: {
@@ -102,6 +73,11 @@ class BusinessIndustries {
                },
            },
            sort: true,
+            search: {
+                server: {
+                    url: (prev, keyword) => `${prev}?search=${keyword}`,
+                },
+            },
            server: {
                url: `${GlobalConfig.apiHost}/api/api-business-industries`,
                headers: {
@@ -131,98 +107,26 @@ class BusinessIndustries {
                total: (data) => data.total,
            },
        }).render(tableContainer);
-
-        document.addEventListener("click", this.handleDelete.bind(this));
    }
-    handleDelete(event) {
-        if (event.target.classList.contains("btn-delete-business-industries")) {
-            event.preventDefault();
-            const id = event.target.getAttribute("data-id");
-            let modalElement = document.getElementById("modalConfirmation");
-            let toastMessage = document.getElementById("toast-message");
+    async handleDelete(deleteButton) {
+        const id = deleteButton.getAttribute("data-id");

-            if (!modalElement) {
-                console.error("Modal element not found!");
-                return;
-            }
+        const result = await Swal.fire({
+            title: "Are you sure?",
+            text: "You won't be able to revert this!",
+            icon: "warning",
+            showCancelButton: true,
+            confirmButtonColor: "#3085d6",
+            cancelButtonColor: "#d33",
+            confirmButtonText: "Yes, delete it!",
+        });

-            let modal = new bootstrap.Modal(modalElement);
-            let btnSaveConfirmation = document.getElementById(
-                "btnSaveConfirmation"
-            );
-            let toastElement = document.getElementById("toastNotification");
-            let toast = new bootstrap.Toast(toastElement);
-
-            // Remove previous event listeners to avoid multiple bindings
-            btnSaveConfirmation.replaceWith(
-                btnSaveConfirmation.cloneNode(true)
-            );
-            btnSaveConfirmation = document.getElementById(
-                "btnSaveConfirmation"
-            );
-
-            // Set the role ID on the confirm button inside the modal
-            btnSaveConfirmation.setAttribute("data-business-industries-id", id);
-
-            // Show the modal
-            modal.show();
-
-            btnSaveConfirmation.addEventListener("click", async () => {
-                let deletedId = btnSaveConfirmation.getAttribute(
-                    "data-business-industries-id"
-                );
-
-                try {
-                    let response = await fetch(
-                        `${GlobalConfig.apiHost}/api/api-business-industries/${deletedId}`,
-                        {
-                            method: "DELETE",
-                            credentials: "include",
-                            headers: {
-                                "X-CSRF-TOKEN": document
-                                    .querySelector('meta[name="csrf-token"]')
-                                    .getAttribute("content"),
-                                Authorization: `Bearer ${document
-                                    .querySelector('meta[name="api-token"]')
-                                    .getAttribute("content")}`,
-                                "Content-Type": "application/json",
-                            },
-                        }
-                    );
-
-                    if (response.ok) {
-                        let result = await response.json();
-                        toastMessage.innerText =
-                            result.message || "Deleted successfully!";
-                        toast.show();
-
-                        // Hide modal
-                        modal.hide();
-
-                        // Refresh Grid.js table
-                        this.refreshDataSettings();
-                    } else {
-                        let error = await response.json();
-                        console.error("Delete failed:", error);
-                        toastMessage.innerText =
-                            error.message || "Delete failed!";
-                        toast.show();
-                    }
-                } catch (error) {
-                    console.error("Error deleting item:", error);
-                    toastMessage.innerText = "An error occurred!";
-                    toast.show();
-                }
-            });
-        }
-    }
-
-    refreshDataSettings() {
-        if (this.table) {
-            this.table
-                .updateConfig({
-                    server: {
-                        url: `${GlobalConfig.apiHost}/api/api-business-industries`,
+        if (result.isConfirmed) {
+            try {
+                let response = await fetch(
+                    `${GlobalConfig.apiHost}/api/api-business-industries/${id}`,
+                    {
+                        method: "DELETE",
                        credentials: "include",
                        headers: {
                            Authorization: `Bearer ${document
@@ -230,31 +134,34 @@ class BusinessIndustries {
                                .getAttribute("content")}`,
                            "Content-Type": "application/json",
                        },
-                        then: (data) =>
-                            data.data.map((item) => [
-                                item.id,
-                                item.nama_kecamatan,
-                                item.nama_kelurahan,
-                                item.nop,
-                                item.nama_wajib_pajak,
-                                item.alamat_wajib_pajak,
-                                item.alamat_objek_pajak,
-                                item.luas_bumi,
-                                item.luas_bangunan,
-                                item.njop_bumi,
-                                item.njop_bangunan,
-                                item.ketetapan,
-                                item.tahun_pajak,
-                                item.created_at,
-                                item.id, // ID for Actions column
-                            ]),
-                        total: (data) => data.total,
-                    },
-                })
-                .forceRender();
+                    }
+                );
+
+                if (response.ok) {
+                    let result = await response.json();
+                    this.toastMessage.innerText =
+                        result.message || "Deleted successfully!";
+                    this.toast.show();
+
+                    // Refresh Grid.js table
+                    if (typeof this.table !== "undefined") {
+                        this.table.updateConfig({}).forceRender();
+                    }
+                } else {
+                    let error = await response.json();
+                    console.error("Delete failed:", error);
+                    this.toastMessage.innerText =
+                        error.message || "Delete failed!";
+                    this.toast.show();
+                }
+            } catch (error) {
+                console.error("Error deleting item:", error);
+                this.toastMessage.innerText = "An error occurred!";
+                this.toast.show();
+            }
        }
    }
 }
 document.addEventListener("DOMContentLoaded", function (e) {
-    new BusinessIndustries().init();
+    new BusinessIndustries();
 });
--- a/resources/js/chatbot/index.js
+++ b/resources/js/chatbot/index.js
@@ -0,0 +1,176 @@
+import GlobalConfig from "../global-config.js";
+
+document.addEventListener("DOMContentLoaded", function () {
+    document.querySelectorAll(".nav-link").forEach(tab => {
+        tab.addEventListener("click", function () {
+            setTimeout(() => {
+                const tab_active = getActiveTabId();
+                console.log("Active Tab ID:", tab_active);
+            }, 100); // Timeout untuk memastikan class `active` sudah diperbarui
+        });
+    });
+
+    const textarea = document.getElementById("user-message");
+    const sendButton = document.getElementById("send");
+    const conversationArea = document.querySelector(".row.flex-grow");
+
+    // Fungsi untuk mengirim pesan
+    async function sendMessage() {
+        const userText = textarea.value.trim();
+        if (userText !== "") {
+            // Kosongkan textarea setelah mengirim
+            textarea.value = "";
+
+            // Ambil tab aktif saat ini
+            const currentTab = getActiveTabId();
+
+            // Tambahkan pesan user ke UI
+            addMessage(userText, "user");
+
+            // Tambahkan pesan bot sementara dengan "Loading..."
+            const botMessageElement = addMessage('<div class="loader w-auto"></div>', "bot");
+
+            // Panggil API untuk mendapatkan response dari bot
+            const botResponse = await getBotResponse(currentTab, userText);
+
+            // Perbarui pesan bot dengan respons yang sebenarnya
+            botMessageElement.innerHTML = botResponse;;
+        }
+    }
+
+    // Event listener untuk klik tombol
+    sendButton.addEventListener("click", sendMessage);
+
+    // Event listener untuk menekan Enter di textarea
+    textarea.addEventListener("keydown", function (event) {
+        if (event.key === "Enter" && !event.shiftKey) {
+            event.preventDefault(); // Mencegah newline di textarea
+            sendMessage(); // Panggil fungsi kirim pesan
+        }
+    });
+
+    function addMessage(text, sender) {
+        const messageRow = document.createElement("div");
+        messageRow.classList.add("row", "flex-grow", "overflow-auto");
+    
+        const messageCol = document.createElement("div");
+        messageCol.classList.add("w-auto", "d-inline-block"); // Menyesuaikan lebar konten
+    
+        if (sender === "user") {
+            messageCol.classList.add("ms-auto", "max-w-50"); // Rata kanan, max 50% (setara col-6)
+        } else {
+            messageCol.classList.add("max-w-75"); // Max 75% (setara col-9)
+    
+            // Tambahkan avatar hanya untuk bot
+            const avatarSpan = document.createElement("span");
+            avatarSpan.classList.add("d-flex", "align-items-center", "mb-1");
+    
+            const avatarImg = document.createElement("img");
+            avatarImg.classList.add("rounded-circle");
+            avatarImg.width = 32;
+            avatarImg.src = "/images/iconchatbot.jpeg";
+            avatarImg.alt = "bot-avatar";
+    
+            avatarSpan.appendChild(avatarImg);
+            messageCol.appendChild(avatarSpan);
+        }
+    
+        const messageDiv = document.createElement("div");
+        messageDiv.classList.add("p-2", "rounded", "mb-2");
+    
+        if (sender === "user") {
+            messageDiv.classList.add("user-response", "bg-primary", "text-white");
+        } else {
+            messageDiv.classList.add("bot-response", "bg-light");
+        }
+    
+        // Menyisipkan konten HTML langsung (bisa berupa teks atau loader)
+        messageDiv.innerHTML = text;
+        messageCol.appendChild(messageDiv);
+        messageRow.appendChild(messageCol);
+    
+        // Tambahkan ke area percakapan
+        conversationArea.appendChild(messageRow);
+    
+        // Scroll otomatis ke bawah
+        conversationArea.scrollTop = conversationArea.scrollHeight;
+    
+        return messageDiv; // Mengembalikan elemen agar bisa diperbarui nanti
+    }
+    
+
+    // function addMessage(text, sender) {
+    //     const messageRow = document.createElement("div");
+    //     messageRow.classList.add("row", "flex-grow", "overflow-auto");
+    
+    //     const messageCol = document.createElement("div");
+    //     messageCol.classList.add("col-9", "w-auto");
+    
+    //     if (sender === "user") {
+    //         messageCol.classList.add("ms-auto"); // Geser ke kanan untuk user
+    //     }
+    
+    //     const messageDiv = document.createElement("div");
+    //     messageDiv.classList.add("p-2", "rounded", "mb-2");
+    
+    //     if (sender === "user") {
+    //         messageDiv.classList.add("user-response", "bg-primary", "text-white");
+    //     } else {
+    //         messageDiv.classList.add("bot-response", "bg-light");
+    
+    //         // Tambahkan avatar hanya untuk bot
+    //         const avatarSpan = document.createElement("span");
+    //         avatarSpan.classList.add("d-flex", "align-items-center", "mb-1");
+    
+    //         const avatarImg = document.createElement("img");
+    //         avatarImg.classList.add("rounded-circle");
+    //         avatarImg.width = 32;
+    //         avatarImg.src = "/images/iconchatbot.jpeg";
+    //         avatarImg.alt = "bot-avatar";
+    
+    //         avatarSpan.appendChild(avatarImg);
+    //         messageCol.appendChild(avatarSpan);
+    //     }
+    
+    //     // Menyisipkan konten HTML langsung (bisa berupa teks atau loader)
+    //     messageDiv.innerHTML = text;
+    //     messageCol.appendChild(messageDiv);
+    //     messageRow.appendChild(messageCol);
+    
+    //     // Tambahkan ke area percakapan
+    //     conversationArea.appendChild(messageRow);
+    
+    //     // Scroll otomatis ke bawah
+    //     conversationArea.scrollTop = conversationArea.scrollHeight;
+    
+    //     return messageDiv; // Mengembalikan elemen agar bisa diperbarui nanti
+    // }
+
+    // Fungsi untuk memanggil API
+    async function getBotResponse(tab_active, userText) {
+        try {
+            const url = `${GlobalConfig.apiHost}/api/generate-text`;
+            const response = await fetch(url, {
+                method: "POST",
+                body: JSON.stringify({tab_active:tab_active, prompt: userText }),
+                headers: {
+                    Authorization: `Bearer ${document
+                        .querySelector('meta[name="api-token"]')
+                        .getAttribute("content")}`,
+                    "Content-Type": "application/json",
+                },
+            });
+
+            const data = await response.json();
+            return data.response || "Maaf, saya tidak mengerti.";
+        } catch (error) {
+            console.error("Error fetching bot response:", error);
+            return "Terjadi kesalahan, coba lagi nanti.";
+        }
+    }
+});
+
+function getActiveTabId() {
+    const activeTab = document.querySelector(".nav-link.active");
+    return activeTab ? activeTab.id : null;
+}
--- a/resources/js/customers/edit.js
+++ b/resources/js/customers/edit.js
@@ -1,9 +1,9 @@
 class UpdateCustomer {
    constructor() {
-        this.initUpdateSpatial();
+        this.initUpdateCustomer();
    }

-    initUpdateSpatial() {
+    initUpdateCustomer() {
        const toastNotification = document.getElementById("toastNotification");
        const toast = new bootstrap.Toast(toastNotification);
        document
--- a/resources/js/customers/index.js
+++ b/resources/js/customers/index.js
@@ -12,7 +12,7 @@ class Customers {
        this.table = null;

        // Initialize functions
-        this.initTableSpatialPlannings();
+        this.initTableCustomers();
        this.initEvents();
    }
    initEvents() {
@@ -25,7 +25,7 @@ class Customers {
        });
    }

-    initTableSpatialPlannings() {
+    initTableCustomers() {
        let tableContainer = document.getElementById("table-customers");
        // Create a new Grid.js instance only if it doesn't exist
        this.table = new Grid({
--- a/resources/js/dashboards/bigdata.js
+++ b/resources/js/dashboards/bigdata.js
@@ -1,165 +1,141 @@
 import Big from "big.js";
 import GlobalConfig, { addThousandSeparators } from "../global-config.js";
-import flatpickr from "flatpickr";
-import "flatpickr/dist/flatpickr.min.css";
+import InitDatePicker from "../utils/InitDatePicker.js";

 class BigData {
    async init() {
        try {
-            this.filterYear = new Date().getFullYear(); // Set initial year
-
-            let yearSelect = document.querySelector("#yearPicker");
-            let filterButton = document.querySelector("#btnFilterYear");
-
-            if (!yearSelect || !filterButton) {
-                console.error(
-                    "Element #yearPicker or #btnFilterYear not found."
-                );
-                return;
-            }
-
-            // Set default value for input
-            yearSelect.value = this.filterYear;
-
-            yearSelect.addEventListener("change", () => {
-                this.updateYear(yearSelect.value);
-            });
-
-            // Handle button click
-            filterButton.addEventListener("click", () => {
-                this.updateYear(yearSelect.value);
-            });
-
-            console.log("init filter this year", this.filterYear);
+            new InitDatePicker(
+                "#datepicker-dashboard-bigdata",
+                this.handleChangeDate.bind(this)
+            ).init();

            // Load initial data
-            await this.updateData(this.filterYear);
+            this.updateData("latest");
        } catch (error) {
            console.error("Error initializing data:", error);
        }
    }
-    updateYear(value) {
-        let inputYear = parseInt(value, 10);
-        if (!isNaN(inputYear)) {
-            this.filterYear = inputYear;
-            this.updateData(this.filterYear);
-        } else {
-            console.error("Invalid year input");
-        }
+
+    handleChangeDate(filterDate) {
+        if (!filterDate) return;
+        this.updateData(filterDate);
    }
-    async updateData(year) {
+    async updateData(filterDate) {
        try {
-            this.totalTargetPAD = await this.getDataSettings("TARGET_PAD");
-            this.resultDataTotal = await this.getDataTotalPotensi(year);
-            this.dataVerification = await this.getDataVerfication(year);
-            this.dataNonVerification = await this.getDataNonVerfication(year);
-            this.dataBusiness = await this.getDataBusiness(year);
-            this.dataNonBusiness = await this.getDataNonBusiness(year);
-            this.dataTataRuang = await this.getDataSettings("TATA_RUANG");
-            this.dataSumRealisasiTerbit = await this.getDataSettings(
-                "REALISASI_TERBIT_PBG_SUM"
-            );
-            this.dataCountRealisasiTerbit = await this.getDataSettings(
-                "REALISASI_TERBIT_PBG_COUNT"
-            );
-            this.dataSumMenungguKlikDPMPTSP = await this.getDataSettings(
-                "MENUNGGU_KLIK_DPMPTSP_SUM"
-            );
-            this.dataCountMenungguKlikDPMPTSP = await this.getDataSettings(
-                "MENUNGGU_KLIK_DPMPTSP_COUNT"
-            );
-            this.dataSumProsesDinasTeknis = await this.getDataSettings(
-                "PROSES_DINAS_TEKNIS_SUM"
-            );
-            this.dataCountProsesDinasTeknis = await this.getDataSettings(
-                "PROSES_DINAS_TEKNIS_COUNT"
-            );
+            console.log("Filtering data for date:", filterDate);
+            this.resumeBigData = await this.getBigDataResume(filterDate);
+            // this.totalTargetPAD = await this.getDataSettings("TARGET_PAD");
+            // this.resultDataTotal = await this.getDataTotalPotensi(year);
+            // this.dataVerification = await this.getDataVerfication(year);
+            // this.dataNonVerification = await this.getDataNonVerfication(year);
+            // this.dataBusiness = await this.getDataBusiness(year);
+            // this.dataNonBusiness = await this.getDataNonBusiness(year);
+            // this.dataTataRuang = await this.getDataSettings("TATA_RUANG");
+            // this.dataSumRealisasiTerbit = await this.getDataSettings(
+            //     "REALISASI_TERBIT_PBG_SUM"
+            // );
+            // this.dataCountRealisasiTerbit = await this.getDataSettings(
+            //     "REALISASI_TERBIT_PBG_COUNT"
+            // );
+            // this.dataSumMenungguKlikDPMPTSP = await this.getDataSettings(
+            //     "MENUNGGU_KLIK_DPMPTSP_SUM"
+            // );
+            // this.dataCountMenungguKlikDPMPTSP = await this.getDataSettings(
+            //     "MENUNGGU_KLIK_DPMPTSP_COUNT"
+            // );
+            // this.dataSumProsesDinasTeknis = await this.getDataSettings(
+            //     "PROSES_DINAS_TEKNIS_SUM"
+            // );
+            // this.dataCountProsesDinasTeknis = await this.getDataSettings(
+            //     "PROSES_DINAS_TEKNIS_COUNT"
+            // );

-            // total potensi
-            this.bigTargetPAD = new Big(this.totalTargetPAD ?? 0);
-            this.bigTotalPotensi = new Big(this.resultDataTotal.totalData ?? 0);
+            // // total potensi
+            // this.bigTargetPAD = new Big(this.totalTargetPAD ?? 0);
+            // this.bigTotalPotensi = new Big(this.resultDataTotal.totalData ?? 0);

-            this.resultPercentage = 0;
-            if (this.bigTotalPotensi > 0 && this.bigTargetPAD > 0) {
-                this.resultPercentage = this.bigTotalPotensi
-                    .div(this.bigTargetPAD)
-                    .times(100)
-                    .toFixed(2);
-                if (this.resultPercentage > 100) {
-                    this.resultPercentage = 100;
-                }
-            }
+            // this.resultPercentage = 0;
+            // if (this.bigTotalPotensi > 0 && this.bigTargetPAD > 0) {
+            //     this.resultPercentage = this.bigTotalPotensi
+            //         .div(this.bigTargetPAD)
+            //         .times(100)
+            //         .toFixed(2);
+            //     if (this.resultPercentage > 100) {
+            //         this.resultPercentage = 100;
+            //     }
+            // }

-            // tata ruang
-            this.bigTotalTataRuang = new Big(this.dataTataRuang);
-            this.percentageResultTataRuang =
-                this.bigTotalTataRuang <= 0 || this.bigTotalPotensi <= 0
-                    ? 0
-                    : this.bigTotalTataRuang
-                          .div(this.bigTotalPotensi)
-                          .times(100)
-                          .toFixed(2);
+            // // tata ruang
+            // this.bigTotalTataRuang = new Big(this.dataTataRuang);
+            // this.percentageResultTataRuang =
+            //     this.bigTotalTataRuang <= 0 || this.bigTotalPotensi <= 0
+            //         ? 0
+            //         : this.bigTotalTataRuang
+            //               .div(this.bigTotalPotensi)
+            //               .times(100)
+            //               .toFixed(2);

-            // kekurangan potensi
-            this.totalKekuranganPotensi = new Big(
-                this.bigTargetPAD - this.bigTotalPotensi
-            );
+            // // kekurangan potensi
+            // this.totalKekuranganPotensi = new Big(
+            //     this.bigTargetPAD - this.bigTotalPotensi
+            // );

-            this.percentageKekuranganPotensi =
-                this.totalKekuranganPotensi <= 0 || this.bigTargetPAD <= 0
-                    ? 0
-                    : this.totalKekuranganPotensi
-                          .div(this.bigTargetPAD)
-                          .times(100)
-                          .toFixed(2);
+            // this.percentageKekuranganPotensi =
+            //     this.totalKekuranganPotensi <= 0 || this.bigTargetPAD <= 0
+            //         ? 0
+            //         : this.totalKekuranganPotensi
+            //               .div(this.bigTargetPAD)
+            //               .times(100)
+            //               .toFixed(2);

-            // non-verification documents
-            this.bigTotalNonVerification = new Big(
-                this.dataNonVerification.total
-            );
-            this.percentageResultNonVerification =
-                this.bigTotalNonVerification <= 0 || this.bigTotalPotensi <= 0
-                    ? 0
-                    : this.bigTotalNonVerification
-                          .div(this.bigTotalPotensi)
-                          .times(100)
-                          .toFixed(2);
+            // // non-verification documents
+            // this.bigTotalNonVerification = new Big(
+            //     this.dataNonVerification.total
+            // );
+            // this.percentageResultNonVerification =
+            //     this.bigTotalNonVerification <= 0 || this.bigTotalPotensi <= 0
+            //         ? 0
+            //         : this.bigTotalNonVerification
+            //               .div(this.bigTotalPotensi)
+            //               .times(100)
+            //               .toFixed(2);

-            // verification documents
-            this.bigTotalVerification = new Big(this.dataVerification.total);
-            this.percetageResultVerification =
-                this.bigTotalVerification <= 0 || this.bigTotalPotensi <= 0
-                    ? 0
-                    : this.bigTotalVerification
-                          .div(this.bigTargetPAD)
-                          .times(100)
-                          .toFixed(2);
+            // // verification documents
+            // this.bigTotalVerification = new Big(this.dataVerification.total);
+            // this.percetageResultVerification =
+            //     this.bigTotalVerification <= 0 || this.bigTotalPotensi <= 0
+            //         ? 0
+            //         : this.bigTotalVerification
+            //               .div(this.bigTargetPAD)
+            //               .times(100)
+            //               .toFixed(2);

-            // business documents
-            this.bigTotalBusiness = new Big(this.dataBusiness.total);
-            this.percentageResultBusiness =
-                this.bigTotalNonVerification <= 0 || this.bigTotalBusiness <= 0
-                    ? 0
-                    : this.bigTotalBusiness
-                          .div(this.bigTotalNonVerification)
-                          .times(100)
-                          .toFixed(2);
+            // // business documents
+            // this.bigTotalBusiness = new Big(this.dataBusiness.total);
+            // this.percentageResultBusiness =
+            //     this.bigTotalNonVerification <= 0 || this.bigTotalBusiness <= 0
+            //         ? 0
+            //         : this.bigTotalBusiness
+            //               .div(this.bigTotalNonVerification)
+            //               .times(100)
+            //               .toFixed(2);

-            // non-business documents
-            this.bigTotalNonBusiness = new Big(this.dataNonBusiness.total);
-            this.percentageResultNonBusiness =
-                this.bigTotalNonBusiness <= 0 ||
-                this.bigTotalNonVerification <= 0
-                    ? 0
-                    : this.bigTotalNonBusiness
-                          .div(this.bigTotalNonVerification)
-                          .times(100)
-                          .toFixed(2);
+            // // non-business documents
+            // this.bigTotalNonBusiness = new Big(this.dataNonBusiness.total);
+            // this.percentageResultNonBusiness =
+            //     this.bigTotalNonBusiness <= 0 ||
+            //     this.bigTotalNonVerification <= 0
+            //         ? 0
+            //         : this.bigTotalNonBusiness
+            //               .div(this.bigTotalNonVerification)
+            //               .times(100)
+            //               .toFixed(2);

-            if (!this.bigTargetPAD) {
-                console.error("Failed to load chart data");
-                return;
-            }
+            // if (!this.bigTargetPAD) {
+            //     console.error("Failed to load chart data");
+            //     return;
+            // }

            this.initChartTargetPAD();
            this.initChartUsaha();
@@ -177,6 +153,33 @@ class BigData {
        }
    }

+    async getBigDataResume(filterByDate) {
+        try {
+            const response = await fetch(
+                `${GlobalConfig.apiHost}/api/bigdata-resume?filterByDate=${filterByDate}`,
+                {
+                    credentials: "include",
+                    headers: {
+                        Authorization: `Bearer ${
+                            document.querySelector("meta[name='api-token']")
+                                .content
+                        }`,
+                        "Content-Type": "application/json",
+                    },
+                }
+            );
+
+            if (!response.ok) {
+                console.error("Network response was not ok", response);
+            }
+
+            const data = await response.json();
+            return data;
+        } catch (error) {
+            console.error("Error fetching chart data:", error);
+            return null;
+        }
+    }
    async getDataTotalPotensi(year) {
        try {
            const response = await fetch(
@@ -370,53 +373,60 @@ class BigData {
            .querySelectorAll(".document-total.chart-target-pad")
            .forEach((element) => {
                element.innerText = `Rp.${addThousandSeparators(
-                    this.bigTargetPAD.toString()
+                    // this.bigTargetPAD.toString()
+                    this.resumeBigData.target_pad.sum.toString()
                )}`;
            });
        document
            .querySelectorAll(".small-percentage.chart-target-pad")
            .forEach((element) => {
-                element.innerText = `${100}%`;
+                element.innerText = `${this.resumeBigData.target_pad.percentage}%`;
            });
    }
    initChartTotalPotensi() {
-        const countAll = this.resultDataTotal.countData ?? 0;
+        // const countAll = this.resultDataTotal.countData ?? 0;

        document
            .querySelectorAll(".document-count.chart-total-potensi")
            .forEach((element) => {
-                element.innerText = `${countAll}`;
+                // element.innerText = `${countAll}`;
+                element.innerText = `${this.resumeBigData.total_potensi.count}`;
            });
        document
            .querySelectorAll(".document-total.chart-total-potensi")
            .forEach((element) => {
                element.innerText = `Rp.${addThousandSeparators(
-                    this.bigTotalPotensi.toString()
+                    // this.bigTotalPotensi.toString()
+                    this.resumeBigData.total_potensi.sum.toString()
                )}`;
            });
        document
            .querySelectorAll(".small-percentage.chart-total-potensi")
            .forEach((element) => {
-                element.innerText = `${this.resultPercentage}%`;
+                // element.innerText = `${this.resultPercentage}%`;
+                element.innerText = `${this.resumeBigData.total_potensi.percentage}%`;
            });
    }
    initChartVerificationDocuments() {
        document
            .querySelectorAll(".document-count.chart-berkas-terverifikasi")
            .forEach((element) => {
-                element.innerText = `${this.dataVerification.count}`;
+                // element.innerText = `${this.dataVerification.count}`;
+                element.innerText = `${this.resumeBigData.verified_document.count}`;
            });
        document
            .querySelectorAll(".document-total.chart-berkas-terverifikasi")
            .forEach((element) => {
                element.innerText = `Rp.${addThousandSeparators(
-                    this.bigTotalVerification.toString()
+                    // this.bigTotalVerification.toString()
+                    this.resumeBigData.verified_document.sum.toString()
                )}`;
            });
        document
            .querySelectorAll(".small-percentage.chart-berkas-terverifikasi")
            .forEach((element) => {
-                element.innerText = `${this.percetageResultVerification}%`;
+                // element.innerText = `${this.percetageResultVerification}%`;
+                element.innerText = `${this.resumeBigData.verified_document.percentage}%`;
            });
    }
    initChartNonVerificationDocuments() {
@@ -425,7 +435,8 @@ class BigData {
                ".document-count.chart-berkas-belum-terverifikasi"
            )
            .forEach((element) => {
-                element.innerText = `${this.dataNonVerification.count}`;
+                // element.innerText = `${this.dataNonVerification.count}`;
+                element.innerText = `${this.resumeBigData.non_verified_document.count}`;
            });
        document
            .querySelectorAll(
@@ -433,7 +444,8 @@ class BigData {
            )
            .forEach((element) => {
                element.innerText = `Rp.${addThousandSeparators(
-                    this.bigTotalNonVerification.toString()
+                    // this.bigTotalNonVerification.toString()
+                    this.resumeBigData.non_verified_document.sum.toString()
                )}`;
            });
        document
@@ -441,45 +453,52 @@ class BigData {
                ".small-percentage.chart-berkas-belum-terverifikasi"
            )
            .forEach((element) => {
-                element.innerText = `${this.percentageResultNonVerification}%`;
+                // element.innerText = `${this.percentageResultNonVerification}%`;
+                element.innerText = `${this.resumeBigData.non_verified_document.percentage}%`;
            });
    }
    initChartUsaha() {
        document
            .querySelectorAll(".document-count.chart-business")
            .forEach((element) => {
-                element.innerText = `${this.dataBusiness.count}`;
+                // element.innerText = `${this.dataBusiness.count}`;
+                element.innerText = `${this.resumeBigData.business_document.count}`;
            });
        document
            .querySelectorAll(".document-total.chart-business")
            .forEach((element) => {
                element.innerText = `Rp.${addThousandSeparators(
-                    this.bigTotalBusiness.toString()
+                    // this.bigTotalBusiness.toString()
+                    this.resumeBigData.business_document.sum.toString()
                )}`;
            });
        document
            .querySelectorAll(".small-percentage.chart-business")
            .forEach((element) => {
-                element.innerText = `${this.percentageResultBusiness}%`;
+                // element.innerText = `${this.percentageResultBusiness}%`;
+                element.innerText = `${this.resumeBigData.business_document.percentage}%`;
            });
    }
    initChartNonUsaha() {
        document
            .querySelectorAll(".document-count.chart-non-business")
            .forEach((element) => {
-                element.innerText = `${this.dataNonBusiness.count}`;
+                // element.innerText = `${this.dataNonBusiness.count}`;
+                element.innerText = `${this.resumeBigData.non_business_document.count}`;
            });
        document
            .querySelectorAll(".document-total.chart-non-business")
            .forEach((element) => {
                element.innerText = `Rp.${addThousandSeparators(
-                    this.bigTotalNonBusiness.toString()
+                    // this.bigTotalNonBusiness.toString()
+                    this.resumeBigData.non_business_document.sum.toString()
                )}`;
            });
        document
            .querySelectorAll(".small-percentage.chart-non-business")
            .forEach((element) => {
-                element.innerText = `${this.percentageResultNonBusiness}%`;
+                // element.innerText = `${this.percentageResultNonBusiness}%`;
+                element.innerText = `${this.resumeBigData.non_business_document.percentage}%`;
            });
    }
    initChartKekuranganPotensi() {
@@ -492,70 +511,78 @@ class BigData {
            .querySelectorAll(".document-total.chart-kekurangan-potensi")
            .forEach((element) => {
                element.innerText = `Rp.${addThousandSeparators(
-                    this.totalKekuranganPotensi.toString()
+                    // this.totalKekuranganPotensi.toString()
+                    this.resumeBigData.kekurangan_potensi.sum.toString()
                )}`;
            });
        document
            .querySelectorAll(".small-percentage.chart-kekurangan-potensi")
            .forEach((element) => {
-                element.innerText = `${this.percentageKekuranganPotensi}%`;
+                // element.innerText = `${this.percentageKekuranganPotensi}%`;
+                element.innerText = `${this.resumeBigData.kekurangan_potensi.percentage}%`;
            });
    }
    initChartRealisasiTerbitPBG() {
        document
            .querySelectorAll(".document-count.chart-realisasi-tebit-pbg")
            .forEach((element) => {
-                element.innerText = `${this.dataCountRealisasiTerbit}`;
+                // element.innerText = `${this.dataCountRealisasiTerbit}`;
+                element.innerText = `${this.resumeBigData.realisasi_terbit.count}`;
            });
        document
            .querySelectorAll(".document-total.chart-realisasi-tebit-pbg")
            .forEach((element) => {
                element.innerText = `Rp.${addThousandSeparators(
-                    this.dataSumRealisasiTerbit
+                    // this.dataSumRealisasiTerbit
+                    this.resumeBigData.realisasi_terbit.sum.toString()
                )}`;
            });
        document
            .querySelectorAll(".small-percentage.chart-realisasi-tebit-pbg")
            .forEach((element) => {
-                element.innerText = `0.00%`;
+                element.innerText = `${this.resumeBigData.realisasi_terbit.percentage}%`;
            });
    }
    initChartMenungguKlikDPMPTSP() {
        document
            .querySelectorAll(".document-count.chart-menunggu-klik-dpmptsp")
            .forEach((element) => {
-                element.innerText = `${this.dataCountMenungguKlikDPMPTSP}`;
+                // element.innerText = `${this.dataCountMenungguKlikDPMPTSP}`;
+                element.innerText = `${this.resumeBigData.menunggu_klik_dpmptsp.count}`;
            });
        document
            .querySelectorAll(".document-total.chart-menunggu-klik-dpmptsp")
            .forEach((element) => {
                element.innerText = `Rp.${addThousandSeparators(
-                    this.dataSumMenungguKlikDPMPTSP
+                    // this.dataSumMenungguKlikDPMPTSP
+                    this.resumeBigData.menunggu_klik_dpmptsp.sum.toString()
                )}`;
            });
        document
            .querySelectorAll(".small-percentage.chart-menunggu-klik-dpmptsp")
            .forEach((element) => {
-                element.innerText = `0.00%`;
+                element.innerText = `${this.resumeBigData.menunggu_klik_dpmptsp.percentage}%`;
            });
    }
    initChartProsesDinasTeknis() {
        document
            .querySelectorAll(".document-count.chart-proses-dinas-teknis")
            .forEach((element) => {
-                element.innerText = `${this.dataCountProsesDinasTeknis}`;
+                // element.innerText = `${this.dataCountProsesDinasTeknis}`;
+                element.innerText = `${this.resumeBigData.proses_dinas_teknis.count}`;
            });
        document
            .querySelectorAll(".document-total.chart-proses-dinas-teknis")
            .forEach((element) => {
                element.innerText = `Rp.${addThousandSeparators(
-                    this.dataSumProsesDinasTeknis
+                    // this.dataSumProsesDinasTeknis
+                    this.resumeBigData.proses_dinas_teknis.sum.toString()
                )}`;
            });
        document
            .querySelectorAll(".small-percentage.chart-proses-dinas-teknis")
            .forEach((element) => {
-                element.innerText = `0.00%`;
+                element.innerText = `${this.resumeBigData.proses_dinas_teknis.percentage}%`;
            });
    }
    initChartPotensiTataRuang() {
@@ -568,13 +595,15 @@ class BigData {
            .querySelectorAll(".document-total.chart-potensi-tata-ruang")
            .forEach((element) => {
                element.innerText = `Rp.${addThousandSeparators(
-                    this.bigTotalTataRuang.toString()
+                    // this.bigTotalTataRuang.toString()
+                    this.resumeBigData.tata_ruang.sum.toString()
                )}`;
            });
        document
            .querySelectorAll(".small-percentage.chart-potensi-tata-ruang")
            .forEach((element) => {
-                element.innerText = `${this.percentageResultTataRuang}%`;
+                // element.innerText = `${this.percentageResultTataRuang}%`;
+                element.innerText = `${this.resumeBigData.tata_ruang.percentage}%`;
            });
    }
 }
--- a/resources/js/dashboards/lack-of-potential.js
+++ b/resources/js/dashboards/lack-of-potential.js
@@ -1,21 +1,42 @@
 import Big from "big.js";
 import GlobalConfig, { addThousandSeparators } from "../global-config.js";
+import InitDatePicker from "../utils/InitDatePicker.js";

 class LackOfPotential {
    async init() {
+        new InitDatePicker(
+            "#datepicker-lack-of-potential",
+            this.handleChangedDate.bind(this)
+        ).init();
        this.bigTotalLackPotential = 0;
-        this.totalPotensi = await this.getDataTotalPotensi(2025);
+        this.totalPotensi = await this.getDataTotalPotensi("latest");
        this.totalTargetPAD = await this.getDataSettings("TARGET_PAD");
+        this.allCountData = await this.getValueDashboard();
+        this.reklameCount = this.allCountData.total_reklame ?? 0;
+        this.pdamCount = this.allCountData.total_pdam ?? 0;
+        this.tataRuangCount = this.allCountData.total_tata_ruang ?? 0;

        this.bigTargetPAD = new Big(this.totalTargetPAD ?? 0);
-        this.bigTotalPotensi = new Big(this.totalPotensi.totalData ?? 0);
-        this.bigTotalLackPotential = this.bigTargetPAD - this.bigTotalPotensi;
+        this.bigTotalPotensi = new Big(this.totalPotensi.total ?? 0);
+        this.bigTotalLackPotential = this.bigTargetPAD.minus(
+            this.bigTotalPotensi
+        );
+        this.initChartKekuranganPotensi();
+        this.initDataValueDashboard();
+    }
+    async handleChangedDate(filterDate) {
+        const totalPotensi = await this.getDataTotalPotensi(filterDate);
+        this.bigTotalPotensi = new Big(totalPotensi.total ?? 0);
+        this.bigTotalLackPotential = this.bigTargetPAD.minus(
+            this.bigTotalPotensi
+        );
+
        this.initChartKekuranganPotensi();
    }
-    async getDataTotalPotensi(year) {
+    async getDataTotalPotensi(filterDate) {
        try {
            const response = await fetch(
-                `${GlobalConfig.apiHost}/api/all-task-documents?year=${year}`,
+                `${GlobalConfig.apiHost}/api/bigdata-resume?filterByDate=${filterDate}`,
                {
                    credentials: "include",
                    headers: {
@@ -34,8 +55,7 @@ class LackOfPotential {

            const data = await response.json();
            return {
-                countData: data.data.count,
-                totalData: data.data.total,
+                total: data.total_potensi.sum,
            };
        } catch (error) {
            console.error("Error fetching chart data:", error);
@@ -45,7 +65,7 @@ class LackOfPotential {
    async getDataSettings(string_key) {
        try {
            const response = await fetch(
-                `${GlobalConfig.apiHost}/api/api-data-settings?search=${string_key}`,
+                `${GlobalConfig.apiHost}/api/data-settings?search=${string_key}`,
                {
                    credentials: "include",
                    headers: {
@@ -69,6 +89,33 @@ class LackOfPotential {
            return 0;
        }
    }
+    async getValueDashboard() {
+        try {
+            const response = await fetch(
+                `${GlobalConfig.apiHost}/api/dashboard-potential-count`,
+                {
+                    credentials: "include",
+                    headers: {
+                        Authorization: `Bearer ${
+                            document.querySelector("meta[name='api-token']")
+                                .content
+                        }`,
+                        "Content-Type": "application/json",
+                    },
+                }
+            );
+
+            if (!response.ok) {
+                console.error("Network response was not ok", response);
+            }
+
+            const data = await response.json();
+            return data;
+        } catch (error) {
+            console.error("Error fetching chart data:", error);
+            return 0;
+        }
+    }
    initChartKekuranganPotensi() {
        document
            .querySelectorAll(".document-count.chart-lack-of-potential")
@@ -88,6 +135,12 @@ class LackOfPotential {
                element.innerText = ``;
            });
    }
+    initDataValueDashboard() {
+        document.getElementById("reklame-count").innerText = this.reklameCount;
+        document.getElementById("pdam-count").innerText = this.pdamCount;
+        document.getElementById("pbb-bangunan-count").innerText =
+            this.tataRuangCount;
+    }
 }
 document.addEventListener("DOMContentLoaded", async function (e) {
    await new LackOfPotential().init();
--- a/resources/js/dashboards/pbg.js
+++ b/resources/js/dashboards/pbg.js
@@ -17,35 +17,64 @@ document.addEventListener("DOMContentLoaded", async function () {
        targetPadElement.textContent = formatCurrency(targetPadValue);

        // Total Potensi Berkas
-        const totalPotensiBerkas = document.getElementById("total-potensi-berkas");
+        const totalPotensiBerkas = document.getElementById(
+            "total-potensi-berkas"
+        );
        if (!totalPotensiBerkas) return;
        const totalPotensiBerkasValue = await getDataTotalPotensi(selectedYear);
-        totalPotensiBerkas.textContent = formatCurrency(totalPotensiBerkasValue.totalData);
+        totalPotensiBerkas.textContent = formatCurrency(
+            totalPotensiBerkasValue.totalData
+        );

        // Total Berkas Terverifikasi
-        const totalBerkasTerverifikasi = document.getElementById("total-berkas-terverifikasi");
+        const totalBerkasTerverifikasi = document.getElementById(
+            "total-berkas-terverifikasi"
+        );
        if (!totalBerkasTerverifikasi) return;
-        const totalBerkasTerverifikasiValue = await getDataVerification(selectedYear);
-        totalBerkasTerverifikasi.textContent = formatCurrency(totalBerkasTerverifikasiValue.totalData);
+        const totalBerkasTerverifikasiValue = await getDataVerification(
+            selectedYear
+        );
+        totalBerkasTerverifikasi.textContent = formatCurrency(
+            totalBerkasTerverifikasiValue.totalData
+        );

        // Total Kekurangan potensi
-        const totalKekuranganPotensi = document.getElementById("total-kekurangan-potensi");
+        const totalKekuranganPotensi = document.getElementById(
+            "total-kekurangan-potensi"
+        );
        if (!totalKekuranganPotensi) return;
-        const totalKekuranganPotensiValue = new Big(targetPadValue) - new Big(totalPotensiBerkasValue.totalData);
-        totalKekuranganPotensi.textContent = formatCurrency(totalKekuranganPotensiValue)
+        const totalKekuranganPotensiValue =
+            new Big(targetPadValue) -
+            new Big(totalPotensiBerkasValue.totalData);
+        totalKekuranganPotensi.textContent = formatCurrency(
+            totalKekuranganPotensiValue
+        );

        // Total Potensi PBG dari tata ruang
-        const totalPotensiPBGTataRuang = document.getElementById("total-potensi-pbd-tata-ruang");
+        const totalPotensiPBGTataRuang = document.getElementById(
+            "total-potensi-pbd-tata-ruang"
+        );
        if (!totalPotensiPBGTataRuang) return;
-        const totalPotensiPBGTataRuangValue = await getDataSettings("TATA_RUANG");
-        totalPotensiPBGTataRuang.textContent = formatCurrency(totalPotensiPBGTataRuangValue);
+        const totalPotensiPBGTataRuangValue = await getDataSettings(
+            "TATA_RUANG"
+        );
+        totalPotensiPBGTataRuang.textContent = formatCurrency(
+            totalPotensiPBGTataRuangValue
+        );

        // Total Berkas Belum terverifikasi
-        const totalBerkasBelumTerverifikasi = document.getElementById("total-berkas-belum-terverifikasi");
+        const totalBerkasBelumTerverifikasi = document.getElementById(
+            "total-berkas-belum-terverifikasi"
+        );
        if (!totalBerkasBelumTerverifikasi) return;
-        const totalBerkasBelumTerverifikasiValue = await getDataNonVerification(selectedYear);
-        const totalBerkasBelumTerverifikasiCount = totalBerkasBelumTerverifikasiValue.countData;
-        totalBerkasBelumTerverifikasi.textContent = formatCurrency(totalBerkasBelumTerverifikasiValue.totalData);
+        const totalBerkasBelumTerverifikasiValue = await getDataNonVerification(
+            selectedYear
+        );
+        const totalBerkasBelumTerverifikasiCount =
+            totalBerkasBelumTerverifikasiValue.countData;
+        totalBerkasBelumTerverifikasi.textContent = formatCurrency(
+            totalBerkasBelumTerverifikasiValue.totalData
+        );

        // Total Berkas Usaha
        const totalBerkasUsahaValue = await getDataBusiness(selectedYear);
@@ -58,21 +87,40 @@ document.addEventListener("DOMContentLoaded", async function () {
        const totalBerkasNonUsahaTotalData = totalBerkasNonUsahaValue.totalData;

        // Pie Chart Section
-        let persenUsaha = totalBerkasBelumTerverifikasiCount > 0 
-            ? ((totalBerkasUsahaCount / totalBerkasBelumTerverifikasiCount) * 100).toFixed(2)
-            : "0";
+        let persenUsaha =
+            totalBerkasBelumTerverifikasiCount > 0
+                ? (
+                      (totalBerkasUsahaCount /
+                          totalBerkasBelumTerverifikasiCount) *
+                      100
+                  ).toFixed(2)
+                : "0";

-        let persenNonUsaha = totalBerkasBelumTerverifikasiCount > 0 
-            ? ((totalBerkasNonUsahaCount / totalBerkasBelumTerverifikasiCount) * 100).toFixed(2)
-            : "0";
+        let persenNonUsaha =
+            totalBerkasBelumTerverifikasiCount > 0
+                ? (
+                      (totalBerkasNonUsahaCount /
+                          totalBerkasBelumTerverifikasiCount) *
+                      100
+                  ).toFixed(2)
+                : "0";

-        const dataSeriesPieChart = [Number(persenUsaha), Number(persenNonUsaha)]
+        const dataSeriesPieChart = [
+            Number(persenUsaha),
+            Number(persenNonUsaha),
+        ];
        const labelsPieChart = ["Berkas Usaha", "Berkas Non Usaha"];
-        document.querySelector("td[data-category='non-usaha']").textContent = formatCurrency(totalBerkasNonUsahaTotalData).toLocaleString();
-        document.querySelector("td[data-category='non-usaha-percentage']").textContent = persenNonUsaha + "%";
+        document.querySelector("td[data-category='non-usaha']").textContent =
+            formatCurrency(totalBerkasNonUsahaTotalData).toLocaleString();
+        document.querySelector(
+            "td[data-category='non-usaha-percentage']"
+        ).textContent = persenNonUsaha + "%";

-        document.querySelector("td[data-category='usaha']").textContent = formatCurrency(totalBerkasUsahaTotalData).toLocaleString();
-        document.querySelector("td[data-category='usaha-percentage']").textContent = persenUsaha + "%";
+        document.querySelector("td[data-category='usaha']").textContent =
+            formatCurrency(totalBerkasUsahaTotalData).toLocaleString();
+        document.querySelector(
+            "td[data-category='usaha-percentage']"
+        ).textContent = persenUsaha + "%";

        updatePieChart(dataSeriesPieChart, labelsPieChart);

@@ -81,27 +129,30 @@ document.addEventListener("DOMContentLoaded", async function () {
        console.log(allLocation);

        // Filter hanya data yang memiliki angka valid
-        let validLocations = allLocation.dataLocation.filter(loc => {
-            return !isNaN(parseFloat(loc.longitude)) && !isNaN(parseFloat(loc.latitude));
+        let validLocations = allLocation.dataLocation.filter((loc) => {
+            return (
+                !isNaN(parseFloat(loc.longitude)) &&
+                !isNaN(parseFloat(loc.latitude))
+            );
        });

        // Ubah string ke float
-        validLocations = validLocations.map(loc => ({
+        validLocations = validLocations.map((loc) => ({
            name: loc.project_name,
            longitude: parseFloat(loc.longitude),
-            latitude: parseFloat(loc.latitude)
+            latitude: parseFloat(loc.latitude),
        }));

-        console.log(validLocations.name)
+        console.log(validLocations.name);

        // Inisialisasi peta
-        var map = L.map('map').setView([-7.0230, 107.5275], 10);
-        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-            attribution: '&copy; OpenStreetMap contributors'
+        var map = L.map("map").setView([-7.023, 107.5275], 10);
+        L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
+            attribution: "&copy; OpenStreetMap contributors",
        }).addTo(map);

        // Tambahkan marker ke peta
-        validLocations.forEach(function(loc) {
+        validLocations.forEach(function (loc) {
            L.marker([loc.latitude, loc.longitude])
                .addTo(map)
                .bindPopup(`<b>${loc.name}</b>`) // Popup saat diklik
@@ -109,22 +160,40 @@ document.addEventListener("DOMContentLoaded", async function () {
        });

        // Realisasi terbit PBG
-        const totalRealisasiTerbitPBG = document.getElementById("realisasi-terbit-pbg");
+        const totalRealisasiTerbitPBG = document.getElementById(
+            "realisasi-terbit-pbg"
+        );
        if (!totalRealisasiTerbitPBG) return;
-        const totalRealisasiTerbitPBGValue = await getDataSettings("REALISASI_TERBIT_PBG_SUM");
-        totalRealisasiTerbitPBG.textContent = formatCurrency(totalRealisasiTerbitPBGValue);
+        const totalRealisasiTerbitPBGValue = await getDataSettings(
+            "REALISASI_TERBIT_PBG_SUM"
+        );
+        totalRealisasiTerbitPBG.textContent = formatCurrency(
+            totalRealisasiTerbitPBGValue
+        );

        // Menunggu Klik DPMPTSP
-        const totalMenungguKlikDpmptsp = document.getElementById("waiting-click-dpmptsp");
+        const totalMenungguKlikDpmptsp = document.getElementById(
+            "waiting-click-dpmptsp"
+        );
        if (!totalMenungguKlikDpmptsp) return;
-        const totalMenungguKlikDpmptspValue = await getDataSettings("MENUNGGU_KLIK_DPMPTSP_SUM");
-        totalMenungguKlikDpmptsp.textContent = formatCurrency(totalMenungguKlikDpmptspValue);
+        const totalMenungguKlikDpmptspValue = await getDataSettings(
+            "MENUNGGU_KLIK_DPMPTSP_SUM"
+        );
+        totalMenungguKlikDpmptsp.textContent = formatCurrency(
+            totalMenungguKlikDpmptspValue
+        );

        // Proses Dinas Teknis
-        const totalProsesDinasTeknis = document.getElementById("processing-technical-services");
+        const totalProsesDinasTeknis = document.getElementById(
+            "processing-technical-services"
+        );
        if (!totalProsesDinasTeknis) return;
-        const totalProsesDinasTeknisValue = await getDataSettings("PROSES_DINAS_TEKNIS_SUM");
-        totalProsesDinasTeknis.textContent = formatCurrency(totalProsesDinasTeknisValue);
+        const totalProsesDinasTeknisValue = await getDataSettings(
+            "PROSES_DINAS_TEKNIS_SUM"
+        );
+        totalProsesDinasTeknis.textContent = formatCurrency(
+            totalProsesDinasTeknisValue
+        );

        // Load Tabel Baru di Update
        const tableLastUpdated = new GeneralTable(
@@ -172,25 +241,32 @@ document.addEventListener("DOMContentLoaded", async function () {

        tableSKPBGTerbit.init();

-        document.querySelector("#pbg-filter-by-updated-at .gridjs-search").hidden = true;
-        document.querySelector("#pbg-filter-by-updated-at .gridjs-footer").hidden = true;
-        document.querySelector("#pbg-filter-by-status .gridjs-search").hidden = true;
-        document.querySelector("#pbg-filter-by-status .gridjs-footer").hidden = true;
+        document.querySelector(
+            "#pbg-filter-by-updated-at .gridjs-search"
+        ).hidden = true;
+        document.querySelector(
+            "#pbg-filter-by-updated-at .gridjs-footer"
+        ).hidden = true;
+        document.querySelector(
+            "#pbg-filter-by-status .gridjs-search"
+        ).hidden = true;
+        document.querySelector(
+            "#pbg-filter-by-status .gridjs-footer"
+        ).hidden = true;
    }

    await updateDataByYear(yearPicker.value);

    yearPicker.addEventListener("change", async function () {
-        console.log("event change dropdown")
+        console.log("event change dropdown");
        await updateDataByYear(yearPicker.value);
    });
-
 });

 async function getDataSettings(string_key) {
    try {
        const response = await fetch(
-            `${GlobalConfig.apiHost}/api/api-data-settings?search=${string_key}`,
+            `${GlobalConfig.apiHost}/api/data-settings?search=${string_key}`,
            {
                credentials: "include",
                headers: {
@@ -224,7 +300,7 @@ async function getDataTotalPotensi(year) {
                    Authorization: `Bearer ${
                        document.querySelector("meta[name='api-token']").content
                    }`,
-                    "Content-Type": "application/json"
+                    "Content-Type": "application/json",
                },
            }
        );
@@ -251,8 +327,7 @@ async function getDataVerification(year) {
                credentials: "include",
                headers: {
                    Authorization: `Bearer ${
-                        document.querySelector("meta[name='api-token']")
-                            .content
+                        document.querySelector("meta[name='api-token']").content
                    }`,
                    "Content-Type": "application/json",
                },
@@ -263,26 +338,25 @@ async function getDataVerification(year) {
            console.error("Network response was not ok", response);
        }

-        const data = await response.json()
+        const data = await response.json();
        return {
            totalData: data.data.total,
        };
    } catch (error) {
        console.error("Error fetching chart data:", error);
-        return 0
+        return 0;
    }
 }

 async function getDataNonVerification(year) {
    try {
-        const response = await fetch (
+        const response = await fetch(
            `${GlobalConfig.apiHost}/api/non-verification-documents?year=${year}`,
            {
                credentials: "include",
                headers: {
                    Authorization: `Bearer ${
-                        document.querySelector("meta[name='api-token']")
-                            .content
+                        document.querySelector("meta[name='api-token']").content
                    }`,
                    "Content-Type": "application/json",
                },
@@ -297,7 +371,7 @@ async function getDataNonVerification(year) {
        return {
            countData: data.data.count,
            totalData: data.data.total,
-        }
+        };
    } catch (error) {
        console.error("Error fetching chart data:", error);
        return 0;
@@ -312,8 +386,7 @@ async function getDataBusiness(year) {
                credentials: "include",
                headers: {
                    Authorization: `Bearer ${
-                        document.querySelector("meta[name='api-token']")
-                            .content
+                        document.querySelector("meta[name='api-token']").content
                    }`,
                    "Content-Type": "application/json",
                },
@@ -343,8 +416,7 @@ async function getDataNonBusiness(year) {
                credentials: "include",
                headers: {
                    Authorization: `Bearer ${
-                        document.querySelector("meta[name='api-token']")
-                            .content
+                        document.querySelector("meta[name='api-token']").content
                    }`,
                    "Content-Type": "application/json",
                },
@@ -357,8 +429,8 @@ async function getDataNonBusiness(year) {
        const data = await response.json();
        return {
            countData: data.data.count,
-            totalData: data.data.total
-        }
+            totalData: data.data.total,
+        };
    } catch (error) {
        console.error("Error fetching chart data:", error);
        return 0;
@@ -373,8 +445,7 @@ async function getAllLocation() {
                credentials: "include",
                headers: {
                    Authorization: `Bearer ${
-                        document.querySelector("meta[name='api-token']")
-                            .content
+                        document.querySelector("meta[name='api-token']").content
                    }`,
                    "Content-Type": "application/json",
                },
@@ -386,7 +457,7 @@ async function getAllLocation() {
        const data = await response.json();
        return {
            dataLocation: data.data,
-        }
+        };
    } catch (error) {
        console.error("Error fetching chart data:", error);
        return 0;
@@ -397,38 +468,40 @@ async function initChart() {
    var options = {
        chart: {
            height: 180,
-            type: 'donut',
+            type: "donut",
        },
        series: [0, 0], // Inisialisasi dengan nilai awal
        labels: ["Berkas Usaha", "Berkas Non Usaha"],
        legend: {
-            show: false
+            show: false,
        },
        stroke: {
-            width: 0
+            width: 0,
        },
        plotOptions: {
            pie: {
                donut: {
-                    size: '60%',
-                }
-            }
+                    size: "60%",
+                },
+            },
        },
        colors: ["#7e67fe", "#17c553"],
        dataLabels: {
-            enabled: false
+            enabled: false,
        },
-        responsive: [{
-            breakpoint: 480,
-            options: {
-                chart: {
-                    width: 200
-                }
-            }
-        }],
+        responsive: [
+            {
+                breakpoint: 480,
+                options: {
+                    chart: {
+                        width: 200,
+                    },
+                },
+            },
+        ],
        fill: {
-            type: 'gradient'
-        }
+            type: "gradient",
+        },
    };

    chart = new ApexCharts(document.querySelector("#conversions"), options);
@@ -447,7 +520,7 @@ async function updatePieChart(dataSeries, labels) {
    // Perbarui label jika diperlukan
    if (Array.isArray(labels) && labels.length === dataSeries.length) {
        chart.updateOptions({
-            labels: labels
+            labels: labels,
        });
    }
 }
@@ -457,7 +530,7 @@ function formatCurrency(number) {
    return new Intl.NumberFormat("id-ID", {
        style: "currency",
        currency: "IDR",
-        minimumFractionDigits: 0
+        minimumFractionDigits: 0,
    }).format(number);
 }

@@ -467,4 +540,4 @@ const pbgTaskColumns = [
    "Nomor Registrasi",
    "Nomor Dokumen",
    "Alamat",
-]
+];
--- a/resources/js/data-settings/create.js
+++ b/resources/js/data-settings/create.js
@@ -24,10 +24,9 @@ document.addEventListener("DOMContentLoaded", function (e) {
                    method: "POST",
                    credentials: "include",
                    headers: {
-                        "X-CSRF-TOKEN": document
-                            .querySelector('meta[name="csrf-token"]')
-                            .getAttribute("content"),
-                        "Content-Type": "application/json",
+                        Authorization: `Bearer ${document
+                            .querySelector('meta[name="api-token"]')
+                            .getAttribute("content")}`,
                    },
                    body: formData,
                });
@@ -35,7 +34,7 @@ document.addEventListener("DOMContentLoaded", function (e) {
                if (response.ok) {
                    let result = await response.json();
                    document.getElementById("toast-message").innerText =
-                        result.message;
+                        result.data.message;
                    toast.show();
                    setTimeout(() => {
                        window.location.href = "/data-settings";
@@ -46,6 +45,8 @@ document.addEventListener("DOMContentLoaded", function (e) {
                        error.message;
                    toast.show();
                    console.error("Error:", error);
+                    submitButton.disabled = false;
+                    spinner.classList.add("d-none");
                }
            } catch (error) {
                console.error("Request failed:", error);
--- a/resources/js/data-settings/index.js
+++ b/resources/js/data-settings/index.js
@@ -2,46 +2,34 @@ 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.js";
+import Swal from "sweetalert2";

 class DataSettings {
    constructor() {
-        this.table = null; // Store Grid.js instance
+        this.toastMessage = document.getElementById("toast-message");
+        this.toastElement = document.getElementById("toastNotification");
+        this.toast = new bootstrap.Toast(this.toastElement);
+        this.table = null;
+
+        // Initialize functions
+        this.initTableDataSettings();
+        this.initEvents();
    }
-    init() {
-        this.getFetchApiData();
+    initEvents() {
+        document.body.addEventListener("click", async (event) => {
+            const deleteButton = event.target.closest(
+                ".btn-delete-data-settings"
+            );
+            if (deleteButton) {
+                event.preventDefault();
+                await this.handleDelete(deleteButton);
+            }
+        });
    }

-    getFetchApiData() {
+    initTableDataSettings() {
        let tableContainer = document.getElementById("table-data-settings");
-
-        if (this.table) {
-            // If table exists, update its data instead of recreating
-            this.table
-                .updateConfig({
-                    server: {
-                        url: `${GlobalConfig.apiHost}/api/api-data-settings`,
-                        credentials: "include",
-                        headers: {
-                            Authorization: `Bearer ${document
-                                .querySelector('meta[name="api-token"]')
-                                .getAttribute("content")}`,
-                            "Content-Type": "application/json",
-                        },
-                        then: (data) =>
-                            data.data.map((item) => [
-                                item.id,
-                                item.key,
-                                item.value,
-                                item.created_at,
-                                item.id,
-                            ]),
-                        total: (data) => data.meta.total,
-                    },
-                })
-                .forceRender();
-            return;
-        }
-
+        // Create a new Grid.js instance only if it doesn't exist
        this.table = new Grid({
            columns: [
                "ID",
@@ -65,11 +53,6 @@ class DataSettings {
                    },
                },
            ],
-            search: {
-                server: {
-                    url: (prev, keyword) => `${prev}?search=${keyword}`,
-                },
-            },
            pagination: {
                limit: 15,
                server: {
@@ -80,8 +63,13 @@ class DataSettings {
                },
            },
            sort: true,
+            search: {
+                server: {
+                    url: (prev, keyword) => `${prev}?search=${keyword}`,
+                },
+            },
            server: {
-                url: `${GlobalConfig.apiHost}/api/api-data-settings`,
+                url: `${GlobalConfig.apiHost}/api/data-settings`,
                headers: {
                    Authorization: `Bearer ${document
                        .querySelector('meta[name="api-token"]')
@@ -99,94 +87,26 @@ class DataSettings {
                total: (data) => data.meta.total,
            },
        }).render(tableContainer);
-
-        document.addEventListener("click", this.handleDelete.bind(this));
    }
-    handleDelete(event) {
-        if (event.target.classList.contains("btn-delete-data-settings")) {
-            event.preventDefault();
-            const id = event.target.getAttribute("data-id");
-            let modalElement = document.getElementById("modalConfirmation");
-            let toastMessage = document.getElementById("toast-message");
+    async handleDelete(deleteButton) {
+        const id = deleteButton.getAttribute("data-id");

-            if (!modalElement) {
-                console.error("Modal element not found!");
-                return;
-            }
+        const result = await Swal.fire({
+            title: "Are you sure?",
+            text: "You won't be able to revert this!",
+            icon: "warning",
+            showCancelButton: true,
+            confirmButtonColor: "#3085d6",
+            cancelButtonColor: "#d33",
+            confirmButtonText: "Yes, delete it!",
+        });

-            let modal = new bootstrap.Modal(modalElement);
-            let btnSaveConfirmation = document.getElementById(
-                "btnSaveConfirmation"
-            );
-            let toastElement = document.getElementById("toastNotification");
-            let toast = new bootstrap.Toast(toastElement);
-
-            // Remove previous event listeners to avoid multiple bindings
-            btnSaveConfirmation.replaceWith(
-                btnSaveConfirmation.cloneNode(true)
-            );
-            btnSaveConfirmation = document.getElementById(
-                "btnSaveConfirmation"
-            );
-
-            // Set the role ID on the confirm button inside the modal
-            btnSaveConfirmation.setAttribute("data-settings-id", id);
-
-            // Show the modal
-            modal.show();
-
-            btnSaveConfirmation.addEventListener("click", async () => {
-                let dataSettingId =
-                    btnSaveConfirmation.getAttribute("data-settings-id");
-
-                try {
-                    let response = await fetch(
-                        `/data-settings/${dataSettingId}`,
-                        {
-                            method: "DELETE",
-                            credentials: "include",
-                            headers: {
-                                "X-CSRF-TOKEN": document
-                                    .querySelector('meta[name="csrf-token"]')
-                                    .getAttribute("content"),
-                                "Content-Type": "application/json",
-                            },
-                        }
-                    );
-
-                    if (response.ok) {
-                        let result = await response.json();
-                        toastMessage.innerText =
-                            result.message || "Deleted successfully!";
-                        toast.show();
-
-                        // Hide modal
-                        modal.hide();
-
-                        // Refresh Grid.js table
-                        this.refreshDataSettings();
-                    } else {
-                        let error = await response.json();
-                        console.error("Delete failed:", error);
-                        toastMessage.innerText =
-                            error.message || "Delete failed!";
-                        toast.show();
-                    }
-                } catch (error) {
-                    console.error("Error deleting item:", error);
-                    toastMessage.innerText = "An error occurred!";
-                    toast.show();
-                }
-            });
-        }
-    }
-
-    refreshDataSettings() {
-        if (this.table) {
-            this.table
-                .updateConfig({
-                    server: {
-                        url: `${GlobalConfig.apiHost}/api/api-data-settings`,
+        if (result.isConfirmed) {
+            try {
+                let response = await fetch(
+                    `${GlobalConfig.apiHost}/api/data-settings/${id}`,
+                    {
+                        method: "DELETE",
                        credentials: "include",
                        headers: {
                            Authorization: `Bearer ${document
@@ -194,21 +114,34 @@ class DataSettings {
                                .getAttribute("content")}`,
                            "Content-Type": "application/json",
                        },
-                        then: (data) =>
-                            data.data.map((item) => [
-                                item.id,
-                                item.key,
-                                item.value,
-                                item.created_at,
-                                item.id,
-                            ]),
-                        total: (data) => data.meta.total,
-                    },
-                })
-                .forceRender();
+                    }
+                );
+
+                if (response.ok) {
+                    let result = await response.json();
+                    this.toastMessage.innerText =
+                        result.message || "Deleted successfully!";
+                    this.toast.show();
+
+                    // Refresh Grid.js table
+                    if (typeof this.table !== "undefined") {
+                        this.table.updateConfig({}).forceRender();
+                    }
+                } else {
+                    let error = await response.json();
+                    console.error("Delete failed:", error);
+                    this.toastMessage.innerText =
+                        error.message || "Delete failed!";
+                    this.toast.show();
+                }
+            } catch (error) {
+                console.error("Error deleting item:", error);
+                this.toastMessage.innerText = "An error occurred!";
+                this.toast.show();
+            }
        }
    }
 }
 document.addEventListener("DOMContentLoaded", function (e) {
-    new DataSettings().init();
+    new DataSettings();
 });
--- a/resources/js/data-settings/update.js
+++ b/resources/js/data-settings/update.js
@@ -24,16 +24,16 @@ document.addEventListener("DOMContentLoaded", function (e) {
            let response = await fetch(form.action, {
                method: "POST",
                headers: {
-                    "X-CSRF-TOKEN": document
-                        .querySelector('meta[name="csrf-token"]')
-                        .getAttribute("content"),
+                    Authorization: `Bearer ${document
+                        .querySelector('meta[name="api-token"]')
+                        .getAttribute("content")}`,
                },
                body: formData,
            });

            if (response.ok) {
                let result = await response.json();
-                toastMessage.innerText = result.message;
+                toastMessage.innerText = result.data.message;
                toast.show();
                setTimeout(() => {
                    window.location.href = "/data-settings";
@@ -43,6 +43,8 @@ document.addEventListener("DOMContentLoaded", function (e) {
                toastMessage.innerText = error.message;
                toast.show();
                console.error("Error:", error);
+                submitButton.disabled = false;
+                spinner.classList.add("d-none");
            }
        } catch (error) {
            console.error("Request failed:", error);
--- a/resources/js/menus/create.js
+++ b/resources/js/menus/create.js
@@ -1,55 +1,67 @@
-document.addEventListener("DOMContentLoaded", function (e) {
-    const toastNotification = document.getElementById("toastNotification");
-    const toast = new bootstrap.Toast(toastNotification);
-    document
-        .getElementById("btnCreateMenus")
-        .addEventListener("click", async function () {
-            let submitButton = this;
-            let spinner = document.getElementById("spinner");
-            let form = document.getElementById("formCreateMenus");
+class CreateMenu {
+    constructor() {
+        this.initCreateMenu();
+    }

-            if (!form) {
-                console.error("Form element not found!");
-                return;
-            }
-            // Get form data
-            let formData = new FormData(form);
+    initCreateMenu() {
+        const toastNotification = document.getElementById("toastNotification");
+        const toast = new bootstrap.Toast(toastNotification);
+        document
+            .getElementById("btnCreateMenus")
+            .addEventListener("click", async function () {
+                let submitButton = this;
+                let spinner = document.getElementById("spinner");
+                let form = document.getElementById("formCreateMenus");

-            // Disable button and show spinner
-            submitButton.disabled = true;
-            spinner.classList.remove("d-none");
+                if (!form) {
+                    console.error("Form element not found!");
+                    return;
+                }
+                // Get form data
+                let formData = new FormData(form);

-            try {
-                let response = await fetch(form.action, {
-                    method: "POST",
-                    headers: {
-                        "X-CSRF-TOKEN": document
-                            .querySelector('meta[name="csrf-token"]')
-                            .getAttribute("content"),
-                    },
-                    body: formData,
-                });
+                // Disable button and show spinner
+                submitButton.disabled = true;
+                spinner.classList.remove("d-none");

-                if (response.ok) {
-                    let result = await response.json();
-                    document.getElementById("toast-message").innerText =
-                        result.message;
-                    toast.show();
-                    setTimeout(() => {
-                        window.location.href = "/menus";
-                    }, 2000);
-                } else {
-                    let error = await response.json();
+                try {
+                    let response = await fetch(form.action, {
+                        method: "POST",
+                        headers: {
+                            Authorization: `Bearer ${document
+                                .querySelector('meta[name="api-token"]')
+                                .getAttribute("content")}`,
+                        },
+                        body: formData,
+                    });
+
+                    if (response.ok) {
+                        let result = await response.json();
+                        document.getElementById("toast-message").innerText =
+                            result.message;
+                        toast.show();
+                        setTimeout(() => {
+                            window.location.href = "/menus";
+                        }, 2000);
+                    } else {
+                        let error = await response.json();
+                        document.getElementById("toast-message").innerText =
+                            error.message;
+                        toast.show();
+                        console.error("Error:", error);
+                        submitButton.disabled = false;
+                        spinner.classList.add("d-none");
+                    }
+                } catch (error) {
+                    console.error("Request failed:", error);
                    document.getElementById("toast-message").innerText =
                        error.message;
                    toast.show();
-                    console.error("Error:", error);
                }
-            } catch (error) {
-                console.error("Request failed:", error);
-                document.getElementById("toast-message").innerText =
-                    error.message;
-                toast.show();
-            }
-        });
+            });
+    }
+}
+
+document.addEventListener("DOMContentLoaded", function (e) {
+    new CreateMenu();
 });
--- a/resources/js/menus/index.js
+++ b/resources/js/menus/index.js
@@ -2,13 +2,27 @@ 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";
+import Swal from "sweetalert2";

 class Menus {
    constructor() {
+        this.toastMessage = document.getElementById("toast-message");
+        this.toastElement = document.getElementById("toastNotification");
+        this.toast = new bootstrap.Toast(this.toastElement);
        this.table = null;
-    }
-    init() {
+
+        // Initialize functions
        this.initTableMenus();
+        this.initEvents();
+    }
+    initEvents() {
+        document.body.addEventListener("click", async (event) => {
+            const deleteButton = event.target.closest(".btn-delete-menu");
+            if (deleteButton) {
+                event.preventDefault();
+                await this.handleDelete(deleteButton);
+            }
+        });
    }

    initTableMenus() {
@@ -19,7 +33,7 @@ class Menus {
            this.table
                .updateConfig({
                    server: {
-                        url: `${GlobalConfig.apiHost}/api/api-menus`,
+                        url: `${GlobalConfig.apiHost}/api/menus`,
                        credentials: "include",
                        headers: {
                            Authorization: `Bearer ${document
@@ -60,7 +74,8 @@ class Menus {
                            <a href="/menus/${cell}/edit" class="btn btn-yellow btn-sm d-inline-flex align-items-center justify-content-center">
                                <i class='bx bx-edit'></i>
                            </a>
-                            <button data-id="${cell}" class="btn btn-red btn-sm btn-delete-menu d-inline-flex align-items-center justify-content-center">
+                            <button data-id="${cell}"
+                            class="btn btn-red btn-sm btn-delete-menu d-inline-flex align-items-center justify-content-center">
                                <i class='bx bxs-trash' ></i>
                            </button>
                        </div>
@@ -83,7 +98,7 @@ class Menus {
                },
            },
            server: {
-                url: `${GlobalConfig.apiHost}/api/api-menus`,
+                url: `${GlobalConfig.apiHost}/api/menus`,
                credentials: "include",
                headers: {
                    Authorization: `Bearer ${document
@@ -104,118 +119,63 @@ class Menus {
                total: (data) => data.total,
            },
        }).render(tableContainer);
-
-        document.addEventListener("click", this.handleDelete.bind(this));
    }

-    handleDelete(event) {
-        if (event.target.classList.contains("btn-delete-menu")) {
-            event.preventDefault();
-            const id = event.target.getAttribute("data-id");
-            let modalElement = document.getElementById("modalConfirmation");
-            let toastMessage = document.getElementById("toast-message");
+    async handleDelete(button) {
+        const id = button.getAttribute("data-id");

-            if (!modalElement) {
-                console.error("Modal element not found!");
-                return;
-            }
+        const result = await Swal.fire({
+            title: "Are you sure?",
+            text: "You won't be able to revert this!",
+            icon: "warning",
+            showCancelButton: true,
+            confirmButtonColor: "#3085d6",
+            cancelButtonColor: "#d33",
+            confirmButtonText: "Yes, delete it!",
+        });

-            let modal = new bootstrap.Modal(modalElement);
-            let btnSaveConfirmation = document.getElementById(
-                "btnSaveConfirmation"
-            );
-            let toastElement = document.getElementById("toastNotification");
-            let toast = new bootstrap.Toast(toastElement);
-
-            // Remove previous event listeners to avoid multiple bindings
-            btnSaveConfirmation.replaceWith(
-                btnSaveConfirmation.cloneNode(true)
-            );
-            btnSaveConfirmation = document.getElementById(
-                "btnSaveConfirmation"
-            );
-
-            // Set the role ID on the confirm button inside the modal
-            btnSaveConfirmation.setAttribute("data-menu-id", id);
-
-            // Show the modal
-            modal.show();
-
-            btnSaveConfirmation.addEventListener("click", async () => {
-                let menuId = btnSaveConfirmation.getAttribute("data-menu-id");
-
-                try {
-                    let response = await fetch(`/menus/${menuId}`, {
+        if (result.isConfirmed) {
+            try {
+                let response = await fetch(
+                    `${GlobalConfig.apiHost}/api/menus/${id}`,
+                    {
                        method: "DELETE",
                        credentials: "include",
-                        headers: {
-                            "X-CSRF-TOKEN": document
-                                .querySelector('meta[name="csrf-token"]')
-                                .getAttribute("content"),
-                            "Content-Type": "application/json",
-                        },
-                    });
-
-                    if (response.ok) {
-                        let result = await response.json();
-                        toastMessage.innerText =
-                            result.message || "Deleted successfully!";
-                        toast.show();
-
-                        // Hide modal
-                        modal.hide();
-
-                        // Refresh Grid.js table
-                        this.refreshTableMenus();
-                    } else {
-                        let error = await response.json();
-                        console.error("Delete failed:", error);
-                        toastMessage.innerText =
-                            error.message || "Delete failed!";
-                        toast.show();
-                    }
-                } catch (error) {
-                    console.error("Error deleting item:", error);
-                    toastMessage.innerText = "An error occurred!";
-                    toast.show();
-                }
-            });
-        }
-    }
-
-    refreshTableMenus() {
-        if (this.table) {
-            this.table
-                .updateConfig({
-                    server: {
-                        url: `${GlobalConfig.apiHost}/api/api-menus`,
-                        credentials: "include",
                        headers: {
                            Authorization: `Bearer ${document
                                .querySelector('meta[name="api-token"]')
                                .getAttribute("content")}`,
                            "Content-Type": "application/json",
                        },
-                        then: (data) =>
-                            data.data.map((item) => [
-                                item.id,
-                                item.name,
-                                item.url,
-                                item.icon,
-                                item.parent_id,
-                                item.sort_order,
-                                item.id,
-                            ]),
-                        total: (data) => data.total,
-                    },
-                })
-                .forceRender();
-        } else {
-            this.initTableMenus(); // If no table exists, reinitialize it
+                    }
+                );
+
+                if (response.ok) {
+                    let result = await response.json();
+                    this.toastMessage.innerText =
+                        result.message || "Deleted successfully!";
+                    this.toast.show();
+
+                    // Refresh Grid.js table
+                    if (typeof this.table !== "undefined") {
+                        this.table.updateConfig({}).forceRender();
+                    }
+                } else {
+                    let error = await response.json();
+                    console.error("Delete failed:", error);
+                    this.toastMessage.innerText =
+                        error.message || "Delete failed!";
+                    this.toast.show();
+                }
+            } catch (error) {
+                console.error("Error deleting item:", error);
+                this.toastMessage.innerText = "An error occurred!";
+                this.toast.show();
+            }
        }
    }
 }

 document.addEventListener("DOMContentLoaded", function (e) {
-    new Menus().init();
+    new Menus();
 });
--- a/resources/js/menus/update.js
+++ b/resources/js/menus/update.js
@@ -1,53 +1,67 @@
-document.addEventListener("DOMContentLoaded", function (e) {
-    let form = document.getElementById("formUpdateMenus");
-    let submitButton = document.getElementById("btnUpdateMenus");
-    let spinner = document.getElementById("spinner");
-    let toastMessage = document.getElementById("toast-message");
-    let toast = new bootstrap.Toast(
-        document.getElementById("toastNotification")
-    );
-    submitButton.addEventListener("click", async function () {
-        let submitButton = this;
+class UpdateMenu {
+    constructor() {
+        this.initUpdateMenu();
+    }

-        if (!form) {
-            console.error("Form element not found!");
-            return;
-        }
-        // Get form data
-        let formData = new FormData(form);
+    initUpdateMenu() {
+        const toastNotification = document.getElementById("toastNotification");
+        const toast = new bootstrap.Toast(toastNotification);
+        document
+            .getElementById("btnUpdateMenus")
+            .addEventListener("click", async function () {
+                let submitButton = this;
+                let spinner = document.getElementById("spinner");
+                let form = document.getElementById("formUpdateMenus");

-        // Disable button and show spinner
-        submitButton.disabled = true;
-        spinner.classList.remove("d-none");
+                if (!form) {
+                    console.error("Form element not found!");
+                    return;
+                }
+                // Get form data
+                let formData = new FormData(form);

-        try {
-            let response = await fetch(form.action, {
-                method: "POST",
-                headers: {
-                    "X-CSRF-TOKEN": document
-                        .querySelector('meta[name="csrf-token"]')
-                        .getAttribute("content"),
-                },
-                body: formData,
+                // Disable button and show spinner
+                submitButton.disabled = true;
+                spinner.classList.remove("d-none");
+
+                try {
+                    let response = await fetch(form.action, {
+                        method: "POST",
+                        headers: {
+                            Authorization: `Bearer ${document
+                                .querySelector('meta[name="api-token"]')
+                                .getAttribute("content")}`,
+                        },
+                        body: formData,
+                    });
+
+                    if (response.ok) {
+                        let result = await response.json();
+                        document.getElementById("toast-message").innerText =
+                            result.message;
+                        toast.show();
+                        setTimeout(() => {
+                            window.location.href = "/menus";
+                        }, 2000);
+                    } else {
+                        let error = await response.json();
+                        document.getElementById("toast-message").innerText =
+                            error.message;
+                        toast.show();
+                        console.error("Error:", error);
+                        submitButton.disabled = false;
+                        spinner.classList.add("d-none");
+                    }
+                } catch (error) {
+                    console.error("Request failed:", error);
+                    document.getElementById("toast-message").innerText =
+                        error.message;
+                    toast.show();
+                }
            });
+    }
+}

-            if (response.ok) {
-                let result = await response.json();
-                toastMessage.innerText = result.message;
-                toast.show();
-                setTimeout(() => {
-                    window.location.href = "/menus";
-                }, 2000);
-            } else {
-                let error = await response.json();
-                toastMessage.innerText = error.message;
-                toast.show();
-                console.error("Error:", error);
-            }
-        } catch (error) {
-            console.error("Request failed:", error);
-            toastMessage.innerText = error.message;
-            toast.show();
-        }
-    });
+document.addEventListener("DOMContentLoaded", function (e) {
+    new UpdateMenu();
 });
--- a/resources/js/roles/create.js
+++ b/resources/js/roles/create.js
@@ -1,55 +1,67 @@
-document.addEventListener("DOMContentLoaded", function (e) {
-    const toastNotification = document.getElementById("toastNotification");
-    const toast = new bootstrap.Toast(toastNotification);
-    document
-        .getElementById("btnCreateRole")
-        .addEventListener("click", async function () {
-            let submitButton = this;
-            let spinner = document.getElementById("spinner");
-            let form = document.getElementById("formCreateRole");
+class CreateRoles {
+    constructor() {
+        this.initCreateRole();
+    }

-            if (!form) {
-                console.error("Form element not found!");
-                return;
-            }
-            // Get form data
-            let formData = new FormData(form);
+    initCreateRole() {
+        const toastNotification = document.getElementById("toastNotification");
+        const toast = new bootstrap.Toast(toastNotification);
+        document
+            .getElementById("btnCreateRole")
+            .addEventListener("click", async function () {
+                let submitButton = this;
+                let spinner = document.getElementById("spinner");
+                let form = document.getElementById("formCreateRole");

-            // Disable button and show spinner
-            submitButton.disabled = true;
-            spinner.classList.remove("d-none");
+                if (!form) {
+                    console.error("Form element not found!");
+                    return;
+                }
+                // Get form data
+                let formData = new FormData(form);

-            try {
-                let response = await fetch(form.action, {
-                    method: "POST",
-                    headers: {
-                        "X-CSRF-TOKEN": document
-                            .querySelector('meta[name="csrf-token"]')
-                            .getAttribute("content"),
-                    },
-                    body: formData,
-                });
+                // Disable button and show spinner
+                submitButton.disabled = true;
+                spinner.classList.remove("d-none");

-                if (response.ok) {
-                    let result = await response.json();
-                    document.getElementById("toast-message").innerText =
-                        result.message;
-                    toast.show();
-                    setTimeout(() => {
-                        window.location.href = "/roles";
-                    }, 2000);
-                } else {
-                    let error = await response.json();
+                try {
+                    let response = await fetch(form.action, {
+                        method: "POST",
+                        headers: {
+                            Authorization: `Bearer ${document
+                                .querySelector('meta[name="api-token"]')
+                                .getAttribute("content")}`,
+                        },
+                        body: formData,
+                    });
+
+                    if (response.ok) {
+                        let result = await response.json();
+                        document.getElementById("toast-message").innerText =
+                            result.message;
+                        toast.show();
+                        setTimeout(() => {
+                            window.location.href = "/roles";
+                        }, 2000);
+                    } else {
+                        let error = await response.json();
+                        document.getElementById("toast-message").innerText =
+                            error.message;
+                        toast.show();
+                        console.error("Error:", error);
+                        submitButton.disabled = false;
+                        spinner.classList.add("d-none");
+                    }
+                } catch (error) {
+                    console.error("Request failed:", error);
                    document.getElementById("toast-message").innerText =
                        error.message;
                    toast.show();
-                    console.error("Error:", error);
                }
-            } catch (error) {
-                console.error("Request failed:", error);
-                document.getElementById("toast-message").innerText =
-                    error.message;
-                toast.show();
-            }
-        });
+            });
+    }
+}
+
+document.addEventListener("DOMContentLoaded", function (e) {
+    new CreateRoles();
 });
--- a/resources/js/roles/index.js
+++ b/resources/js/roles/index.js
@@ -2,46 +2,31 @@ 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";
+import Swal from "sweetalert2";

 class Roles {
    constructor() {
-        this.table = null; // Store Grid.js instance
-    }
+        this.toastMessage = document.getElementById("toast-message");
+        this.toastElement = document.getElementById("toastNotification");
+        this.toast = new bootstrap.Toast(this.toastElement);
+        this.table = null;

-    init() {
+        // Initialize functions
        this.initTableRoles();
+        this.initEvents();
+    }
+    initEvents() {
+        document.body.addEventListener("click", async (event) => {
+            const deleteButton = event.target.closest(".btn-delete-role");
+            if (deleteButton) {
+                event.preventDefault();
+                await this.handleDelete(deleteButton);
+            }
+        });
    }

    initTableRoles() {
        let tableContainer = document.getElementById("table-roles");
-
-        // If table instance already exists, update it instead of re-creating
-        if (this.table) {
-            this.table
-                .updateConfig({
-                    server: {
-                        url: `${GlobalConfig.apiHost}/api/api-roles`,
-                        credentials: "include",
-                        headers: {
-                            Authorization: `Bearer ${document
-                                .querySelector('meta[name="api-token"]')
-                                .getAttribute("content")}`,
-                            "Content-Type": "application/json",
-                        },
-                        then: (data) =>
-                            data.data.map((item) => [
-                                item.id,
-                                item.name,
-                                item.description,
-                                item.id,
-                            ]),
-                        total: (data) => data.total,
-                    },
-                })
-                .forceRender();
-            return;
-        }
-
        // Create a new Grid.js instance only if it doesn't exist
        this.table = new gridjs.Grid({
            columns: [
@@ -82,7 +67,7 @@ class Roles {
                },
            },
            server: {
-                url: `${GlobalConfig.apiHost}/api/api-roles`,
+                url: `${GlobalConfig.apiHost}/api/roles`,
                credentials: "include",
                headers: {
                    Authorization: `Bearer ${document
@@ -100,116 +85,63 @@ class Roles {
                total: (data) => data.total,
            },
        }).render(tableContainer);
-
-        document.addEventListener("click", this.handleDelete.bind(this));
    }

-    handleDelete(event) {
-        if (event.target.classList.contains("btn-delete-role")) {
-            event.preventDefault();
+    async handleDelete(deleteButton) {
+        const id = deleteButton.getAttribute("data-id");

-            const id = event.target.getAttribute("data-id");
-            let modalElement = document.getElementById("modalConfirmation");
-            let toastMessage = document.getElementById("toast-message");
+        const result = await Swal.fire({
+            title: "Are you sure?",
+            text: "You won't be able to revert this!",
+            icon: "warning",
+            showCancelButton: true,
+            confirmButtonColor: "#3085d6",
+            cancelButtonColor: "#d33",
+            confirmButtonText: "Yes, delete it!",
+        });

-            if (!modalElement) {
-                console.error("Modal element not found!");
-                return;
-            }
-
-            let modal = new bootstrap.Modal(modalElement);
-            let btnSaveConfirmation = document.getElementById(
-                "btnSaveConfirmation"
-            );
-            let toastElement = document.getElementById("toastNotification");
-            let toast = new bootstrap.Toast(toastElement);
-
-            // Remove previous event listeners to avoid multiple bindings
-            btnSaveConfirmation.replaceWith(
-                btnSaveConfirmation.cloneNode(true)
-            );
-            btnSaveConfirmation = document.getElementById(
-                "btnSaveConfirmation"
-            );
-
-            // Set the role ID on the confirm button inside the modal
-            btnSaveConfirmation.setAttribute("data-role-id", id);
-
-            // Show the modal
-            modal.show();
-
-            btnSaveConfirmation.addEventListener("click", async () => {
-                let roleId = btnSaveConfirmation.getAttribute("data-role-id");
-
-                try {
-                    let response = await fetch(`/roles/${roleId}`, {
+        if (result.isConfirmed) {
+            try {
+                let response = await fetch(
+                    `${GlobalConfig.apiHost}/api/roles/${id}`,
+                    {
                        method: "DELETE",
                        credentials: "include",
-                        headers: {
-                            "X-CSRF-TOKEN": document
-                                .querySelector('meta[name="csrf-token"]')
-                                .getAttribute("content"),
-                            "Content-Type": "application/json",
-                        },
-                    });
-
-                    if (response.ok) {
-                        let result = await response.json();
-                        toastMessage.innerText =
-                            result.message || "Deleted successfully!";
-                        toast.show();
-
-                        // Hide modal
-                        modal.hide();
-
-                        // Refresh Grid.js table
-                        this.refreshRolesTable();
-                    } else {
-                        let error = await response.json();
-                        console.error("Delete failed:", error);
-                        toastMessage.innerText =
-                            error.message || "Delete failed!";
-                        toast.show();
-                    }
-                } catch (error) {
-                    console.error("Error deleting item:", error);
-                    toastMessage.innerText = "An error occurred!";
-                    toast.show();
-                }
-            });
-        }
-    }
-
-    refreshRolesTable() {
-        if (this.table) {
-            this.table
-                .updateConfig({
-                    server: {
-                        url: `${GlobalConfig.apiHost}/api/api-roles`,
-                        credentials: "include",
                        headers: {
                            Authorization: `Bearer ${document
                                .querySelector('meta[name="api-token"]')
                                .getAttribute("content")}`,
                            "Content-Type": "application/json",
                        },
-                        then: (data) =>
-                            data.data.map((item) => [
-                                item.id,
-                                item.name,
-                                item.description,
-                                item.id,
-                            ]),
-                        total: (data) => data.total,
-                    },
-                })
-                .forceRender();
-        } else {
-            this.initTableRoles(); // If the table is null, reinitialize
+                    }
+                );
+
+                if (response.ok) {
+                    let result = await response.json();
+                    this.toastMessage.innerText =
+                        result.message || "Deleted successfully!";
+                    this.toast.show();
+
+                    // Refresh Grid.js table
+                    if (typeof this.table !== "undefined") {
+                        this.table.updateConfig({}).forceRender();
+                    }
+                } else {
+                    let error = await response.json();
+                    console.error("Delete failed:", error);
+                    this.toastMessage.innerText =
+                        error.message || "Delete failed!";
+                    this.toast.show();
+                }
+            } catch (error) {
+                console.error("Error deleting item:", error);
+                this.toastMessage.innerText = "An error occurred!";
+                this.toast.show();
+            }
        }
    }
 }

 document.addEventListener("DOMContentLoaded", function (e) {
-    new Roles().init();
+    new Roles();
 });
--- a/resources/js/roles/update.js
+++ b/resources/js/roles/update.js
@@ -1,53 +1,67 @@
-document.addEventListener("DOMContentLoaded", function (e) {
-    let form = document.getElementById("formUpdateRole");
-    let submitButton = document.getElementById("btnUpdateRole");
-    let spinner = document.getElementById("spinner");
-    let toastMessage = document.getElementById("toast-message");
-    let toast = new bootstrap.Toast(
-        document.getElementById("toastNotification")
-    );
-    submitButton.addEventListener("click", async function () {
-        let submitButton = this;
+class UpdateRoles {
+    constructor() {
+        this.initUpdateRole();
+    }

-        if (!form) {
-            console.error("Form element not found!");
-            return;
-        }
-        // Get form data
-        let formData = new FormData(form);
+    initUpdateRole() {
+        const toastNotification = document.getElementById("toastNotification");
+        const toast = new bootstrap.Toast(toastNotification);
+        document
+            .getElementById("btnUpdateRole")
+            .addEventListener("click", async function () {
+                let submitButton = this;
+                let spinner = document.getElementById("spinner");
+                let form = document.getElementById("formUpdateRole");

-        // Disable button and show spinner
-        submitButton.disabled = true;
-        spinner.classList.remove("d-none");
+                if (!form) {
+                    console.error("Form element not found!");
+                    return;
+                }
+                // Get form data
+                let formData = new FormData(form);

-        try {
-            let response = await fetch(form.action, {
-                method: "POST",
-                headers: {
-                    "X-CSRF-TOKEN": document
-                        .querySelector('meta[name="csrf-token"]')
-                        .getAttribute("content"),
-                },
-                body: formData,
+                // Disable button and show spinner
+                submitButton.disabled = true;
+                spinner.classList.remove("d-none");
+
+                try {
+                    let response = await fetch(form.action, {
+                        method: "POST",
+                        headers: {
+                            Authorization: `Bearer ${document
+                                .querySelector('meta[name="api-token"]')
+                                .getAttribute("content")}`,
+                        },
+                        body: formData,
+                    });
+
+                    if (response.ok) {
+                        let result = await response.json();
+                        document.getElementById("toast-message").innerText =
+                            result.message;
+                        toast.show();
+                        setTimeout(() => {
+                            window.location.href = "/roles";
+                        }, 2000);
+                    } else {
+                        let error = await response.json();
+                        document.getElementById("toast-message").innerText =
+                            error.message;
+                        toast.show();
+                        console.error("Error:", error);
+                        submitButton.disabled = false;
+                        spinner.classList.add("d-none");
+                    }
+                } catch (error) {
+                    console.error("Request failed:", error);
+                    document.getElementById("toast-message").innerText =
+                        error.message;
+                    toast.show();
+                }
            });
+    }
+}

-            if (response.ok) {
-                let result = await response.json();
-                toastMessage.innerText = result.message;
-                toast.show();
-                setTimeout(() => {
-                    window.location.href = "/roles";
-                }, 2000);
-            } else {
-                let error = await response.json();
-                toastMessage.innerText = error.message;
-                toast.show();
-                console.error("Error:", error);
-            }
-        } catch (error) {
-            console.error("Request failed:", error);
-            toastMessage.innerText = error.message;
-            toast.show();
-        }
-    });
+document.addEventListener("DOMContentLoaded", function (e) {
+    new UpdateRoles();
 });
--- a/resources/js/utils/InitDatePicker.js
+++ b/resources/js/utils/InitDatePicker.js
@@ -0,0 +1,34 @@
+import flatpickr from "flatpickr";
+import "flatpickr/dist/flatpickr.min.css";
+
+class InitDatePicker {
+    constructor(selector = ".datepicker", onChangeCallback = null) {
+        this.selector = selector;
+        this.onChangeCallback = onChangeCallback;
+    }
+
+    init() {
+        const today = new Date();
+
+        document.querySelectorAll(this.selector).forEach((element) => {
+            flatpickr(element, {
+                enableTime: false,
+                dateFormat: "Y-m-d",
+                maxDate: today,
+                onChange: (selectedDates, dateStr) => {
+                    if (this.onChangeCallback) {
+                        this.onChangeCallback(dateStr); // Call callback with selected date
+                    }
+                },
+                onReady: (selectedDates, dateStr, instance) => {
+                    // Call the callback with the default date when initialized
+                    if (this.onChangeCallback && dateStr) {
+                        this.onChangeCallback(dateStr);
+                    }
+                },
+            });
+        });
+    }
+}
+
+export default InitDatePicker;
--- a/resources/views/business-industries/index.blade.php
+++ b/resources/views/business-industries/index.blade.php
@@ -16,7 +16,7 @@
 		<div class="card w-100">
 			<div class="card-body">
 				<div class="d-flex flex-wrap justify-content-end align-items-center mb-2">
-					<a href="{{ route('business-industries.create')}}" class="btn btn-success btn-sm d-block d-sm-inline w-auto">Create</a>
+					<a href="{{ route('business-industries.create')}}" class="btn btn-success btn-sm d-block d-sm-inline w-auto">Upload</a>
 				</div>
 				<div id="table-business-industries"></div>
 			</div>
--- a/resources/views/chatbot/index.blade.php
+++ b/resources/views/chatbot/index.blade.php
@@ -0,0 +1,92 @@
+@extends('layouts.vertical', ['subtitle' => 'Chatbot'])
+
+@section('css')
+@vite(['node_modules/gridjs/dist/theme/mermaid.min.css'])
+<style>
+#user-message {
+    height: 60px; /* Menambah tinggi textarea */
+    font-size: 1.1rem; /* Memperbesar font */
+    padding: 10px; /* Menambah ruang di dalam textarea */
+    resize: none; /* Mencegah resize manual */
+}
+
+.loader {
+  width: 10px;
+  aspect-ratio: 1;
+  border-radius: 50%;
+  animation: l5 1s infinite linear alternate;
+}
+
+@keyframes l5 {
+    0%  {box-shadow: 10px 0 #000, -10px 0 #0002; background: #000 }
+    33% {box-shadow: 10px 0 #000, -10px 0 #0002; background: #0002}
+    66% {box-shadow: 10px 0 #0002, -10px 0 #000; background: #0002}
+    100%{box-shadow: 10px 0 #0002, -10px 0 #000; background: #000 }
+}
+</style>
+@endsection
+
+@section('content')
+@include('layouts.partials/page-title', ['title' => 'Chatbot', 'subtitle' => 'Chatbot'])
+
+<div class="card">
+    <div class="card-header">
+        <ul class="nav nav-tabs nav-justified">
+            <li class="nav-item">
+                <button id="count-retribusi" data-bs-toggle="tab" aria-expanded="false" class="nav-link">
+                    <span class="d-block d-sm-none"><i class="bx bx-home"></i></span>
+                    <span class="d-none d-sm-block">Perhitungan Retribusi</span>
+                </button>
+            </li>
+            <li class="nav-item">
+                <button id="document-validation" data-bs-toggle="tab" aria-expanded="true"
+                    class="nav-link active">
+                    <span class="d-block d-sm-none"><i class="bx bx-user"></i></span>
+                    <span class="d-none d-sm-block">Validasi Dokumen PBG</span>
+                </button>
+            </li>
+            <li class="nav-item">
+                <button id="data-information" data-bs-toggle="tab" aria-expanded="false" class="nav-link">
+                    <span class="d-block d-sm-none"><i class="bx bx-envelope"></i></span>
+                    <span class="d-none d-sm-block">Pengumpulan Data PBG</span>
+                </button>
+            </li>
+        </ul>
+    </div>
+    <div class="card-body d-flex flex-column" style="height: 700px;">
+        <!-- Conversation Area -->
+        
+        <!-- Bot Response -->
+        <div class="row flex-grow overflow-auto">
+            <div class="col-9 w-auto">
+                <span class="d-flex align-items-center mb-1">
+                    <img class="rounded-circle" width="32" src="/images/iconchatbot.jpeg" alt="avatar-3">
+               </span>
+                <div class="bot-response p-2 bg-light rounded mb-2">
+                    <p>Halo! Ada yang bisa saya bantu?</p>
+                </div>
+            </div>
+        </div>
+    
+        <!-- Input & Button (Selalu di Bawah) -->
+        <div class="row mt-auto">
+            <div class="col-xl-12 d-flex align-items-end gap-1">
+                <textarea class="form-control" id="user-message"></textarea>
+                <button id="send" class="btn btn-primary btn-lg rounded-pill">
+                    <i class='bx bx-send'></i>
+                </button>
+            </div>
+            {{-- <div class="col-xl-2 d-flex justify-content-end">
+                
+            </div> --}}
+        </div>
+        </div>
+        
+    </div>    
+</div>
+
+@endsection
+
+@section('scripts')
+@vite(['resources/js/chatbot/index.js'])
+@endsection
--- a/resources/views/components/custom-circle.blade.php
+++ b/resources/views/components/custom-circle.blade.php
@@ -1,5 +1,5 @@
-@props(['title' => 'title component', 'visible_data' => false, 'data' => 'data text', 'visible_data_type' => false, 
-'data_type' => '','style' => '', 'size' => '', 'line' => []])
+@props(['title' => 'title component', 'visible_data' => false, 'data_count' => '', 'visible_data_type' => false, 
+'data_type' => '','style' => '', 'size' => '', 'line' => [], 'data_id' => ''])

@section('css')
@vite(['resources/scss/components/_custom_circle.scss'])
@@ -9,7 +9,7 @@
    <div class="custom-circle-content">
        <p class="custom-circle-text">{{ $title }}</p>
        @if ($visible_data === "true")
-            <div class="custom-circle-data">{{ $data }}</div>
+            <div class="custom-circle-data" id="{{ $data_id }}">{{ $data_count }}</div>
        @endif
        @if ($visible_data_type === "true")
            <div class="custom-circle-data-type">{{ $data_type }}</div>
--- a/resources/views/dashboards/bigdata.blade.php
+++ b/resources/views/dashboards/bigdata.blade.php
@@ -20,13 +20,8 @@

    <div class="row d-flex justify-content-end">
        <div class="col-12 col-sm-6 col-md-3">
-            <div class="d-flex flex-sm-nowrap flex-wrap justify-content-end gap-2">
-                <select class="form-select w-auto" id="yearPicker" name="year" style="min-width: 100px;">
-                @for ($i = date('Y'); $i > date('Y') - 5; $i--)
-                    <option value="{{ $i }}" {{ $i == date('Y') ? 'selected' : '' }}>{{ $i }}</option>
-                @endfor
-                </select>
-                <button class="btn btn-sm btn-primary" id="btnFilterYear">Filter</button>
+            <div class="d-flex flex-sm-nowrap flex-wrap justify-content-end">
+                <input type="text" class="form-control" style="max-width: 125px;" id="datepicker-dashboard-bigdata" placeholder="Filter Date" />
            </div>
        </div>
    </div>
--- a/resources/views/dashboards/lack_of_potential.blade.php
+++ b/resources/views/dashboards/lack_of_potential.blade.php
@@ -15,100 +15,103 @@
            </h3>
        </div>
    </div>
-    <div class="">
-        <div class="">
-            <div id="lack-of-potential-fixed-container" class="" style="width:1400px;height:770px;position:relative;margin:auto;z-index:1;">
-                <div style="position: absolute; top: 200px; left: 50px;">
-                    <x-custom-circle title="Restoran" size="small" style="background-color: #0e4753;" />
-                    <div class="square dia-top-left-bottom-right" style="top:30px;left:50px;width:150px;height:120px;"></div>
-                    <x-custom-circle title="PBB Bangunan" visible_data="true" data="649.157" size="small" style="background-color: #0e4753;" />
-                    <div class="square" style="width:150px;height:2px;background-color:black;left:50px;top:150px;"></div>
-                    <x-custom-circle title="Reklame" visible_data="true" data="2.428" size="small" style="background-color: #0e4753;" />
-                    <div class="square dia-top-right-bottom-left" style="top:140px;left:50px;width:150px;height:120px;"></div>
-                </div>
-                
-                <div style="position: absolute; top: 300px; left: 200px;">
-                    <div class="square dia-top-right-bottom-left" style="top:-100px;left:30px;width:150px;height:120px;"></div>
-                    <div class="square dia-top-left-bottom-right" style="top:-100px;left:120px;width:120px;height:120px;"></div>
-                    <x-custom-circle title="BAPENDA" size="small" style="float:left;background-color: #234f6c;" />
-                    <x-custom-circle title="PDAM" visible_data="true" data="9.022" visible_data_type="true" data_type="Pelanggan" size="small" style="float:left;background-color: #234f6c;" />
-                    <x-custom-circle title="KECAMATAN" size="small" style="float:left;background-color: #234f6c;" />
-                    
-                </div>
-                
-                <div  style="position: absolute; top: 0px; left: 270px;">
-                    <div class="square" style="width:5px;height:600px;background-color:black;left:70px;top:50px;"></div>
-                    <div class="square dia-top-left-bottom-right" style="top:350px;left:-50px;width:120px;height:120px;"></div>
-                    <div class="square dia-top-right-bottom-left" style="top:350px;left:70px;width:120px;height:120px;"></div>
-                    <x-custom-circle title="Rumah Tinggal" size="small" style="background-color: #234f6c;margin:auto;" />
-                    <x-custom-circle title="Non Usaha" size="large" style="background-color: #3a968b;margin-top:20px;" />
-                    <x-custom-circle title="USAHA" size="large" style="background-color: #627c8b;margin-top:150px;" />
-                </div>
-                
-                <div  style="position: absolute; top: 650px; left: 110px;">
-                    <div class="square dia-top-right-bottom-left" style="top:-110px;left:40px;width:200px;height:120px;"></div>
-                    <div class="square dia-top-right-bottom-left" style="top:-110px;left:90px;width:150px;height:170px;"></div>
-                    <div class="square dia-top-left-bottom-right" style="top:-110px;left:230px;width:150px;height:170px;"></div>
-                    <div class="square dia-top-left-bottom-right" style="top:-110px;left:260px;width:200px;height:180px;"></div>
-                    <x-custom-circle title="Villa" size="small" style="float:left;background-color: #234f6c;" />
-                    <x-custom-circle title="Pabrik" size="small" style="float:left;background-color: #234f6c;" />
-                    <x-custom-circle title="Jalan Protocol" size="small" style="float:left;background-color: #234f6c;" />
-                    <x-custom-circle title="Ruko" size="small" style="float:left;background-color: #234f6c;" />
-                    <x-custom-circle title="Pariwisata" size="small" style="float:left;background-color: #234f6c; margin-right: 20px;" />
-                    <div class="square" style="width:150px;height:2px;background-color:black;left:350px;top:50px;"></div>
-                    <x-custom-circle title="DISBUDPAR" size="small" style="background-color: #3a968b;" />
-                </div>
-                
-                <div style="position: absolute; top: 280px; left: 550px;">
-                    <div class="square dia-top-left-bottom-right" style="top:-110px;left:-150px;width:200px;height:180px;"></div>
-                    <div class="square dia-top-right-bottom-left" style="top:70px;left:-150px;width:200px;height:130px;"></div>
-                    <x-custom-circle title="Tim Wasdal Gabungan" size="large" style="background-color: #da6635;float:left" />
-                    <div class="square" style="width:650px;height:5px;background-color:black;left:100px;top:75px;"></div>
-                    @component('components.circle', [
-                        'document_title' => 'Kekurangan Potensi',
-                        'document_color' => '#ff5757',
-                        'document_type' => '',
-                        'document_id' => 'chart-lack-of-potential',
-                        'visible_small_circle' => false,
-                        'style' => 'margin-left:180px;top:-20px;'
-                        ])
-                        @endcomponent
-                        
-                        <x-custom-circle title="Tata Ruang" size="large" style="background-color: #da6635;float:left;margin-left:250px;" />
-                        
-                    </div>
-                    
-                    <div style="position: absolute; top: 310px; left: 1150px;">
-                        <div class="square dia-top-left-bottom-right" style="top:90px;left:-100px;width:100px;height:100px;"></div>
-                        <div class="square dia-top-right-bottom-left" style="top:-110px;left:-100px;width:100px;height:100px;"></div>
-                        <x-custom-circle title="Peta" visible_data_type="true" data_type="1:5000" size="small" style="background-color: #224f6d;float:left;" />
-                        <x-custom-circle title="Tapak Bangunan" size="small" style="background-color: #2390af;float:left;margin-left:20px;" />
-                        
-                    </div>
-                    
-                    <x-custom-circle title="UUCK" size="small" style="background-color: #2390af;position:absolute;left:1270px;top:440px;" />
-                    
-                    <div style="position: absolute; top: 470px; left: 430px;">
-                    <div class="square dia-top-right-bottom-left" style="top:-80px;left:20px;width:150px;height:120px;"></div>
-                    <div class="square dia-top-right-bottom-left" style="top:-50px;left:100px;width:100px;height:100px;"></div>
-                    <div class="square dia-top-left-bottom-right" style="top:-50px;left:180px;width:100px;height:100px;"></div>
-                    <div class="square dia-top-left-bottom-right" style="top:-60px;left:240px;width:120px;height:120px;"></div>
-                    <x-custom-circle title="UPT Wasdal" size="small" style="background-color: #0f4853;float:left;" />
-                    <x-custom-circle title="Satpol PP" size="small" style="background-color: #0f4853;float:left;" />
-                    <x-custom-circle title="KEJARI" size="small" style="background-color: #0f4853;float:left;" />
-                    <x-custom-circle title="TNI & POLRI" size="small" style="background-color: #0f4853;float:left;" />
-                </div>
-
-                <x-custom-circle title="UUCK" size="small" style="background-color: #2390af;position:absolute;left:980px;top:500px;" />
-
-                <div  style="position: absolute; top: 50px; left: 1100px;">
-                    <x-custom-circle title="Non Usaha" size="large" style="background-color: #3a968b;margin-top:20px;" />
-                    <x-custom-circle title="USAHA" size="large" style="background-color: #627c8b;margin-top:260px;" />
+    <div class="wrapper">
+        <div class="row d-flex justify-content-end">
+            <div class="col-12 col-sm-6 col-md-3">
+                <div class="d-flex flex-sm-nowrap flex-wrap justify-content-end">
+                    <input type="text" class="form-control me-3" style="max-width: 125px;" id="datepicker-lack-of-potential" placeholder="Filter Date" />
                </div>
            </div>
        </div>
-        
-        
+        <div id="lack-of-potential-fixed-container" class="" style="width:1400px;height:770px;position:relative;margin:auto;z-index:1;">
+            <div style="position: absolute; top: 200px; left: 50px;">
+                <x-custom-circle title="Restoran" size="small" style="background-color: #0e4753;" />
+                <div class="square dia-top-left-bottom-right" style="top:30px;left:50px;width:150px;height:120px;"></div>
+                <x-custom-circle title="PBB Bangunan" visible_data="true" data_id="pbb-bangunan-count" data_count="0" size="small" style="background-color: #0e4753;" />
+                <div class="square" style="width:150px;height:2px;background-color:black;left:50px;top:150px;"></div>
+                <x-custom-circle title="Reklame" visible_data="true" data_id="reklame-count" data_count="0" size="small" style="background-color: #0e4753;" />
+                <div class="square dia-top-right-bottom-left" style="top:140px;left:50px;width:150px;height:120px;"></div>
+            </div>
+            
+            <div style="position: absolute; top: 300px; left: 200px;">
+                <div class="square dia-top-right-bottom-left" style="top:-100px;left:30px;width:150px;height:120px;"></div>
+                <div class="square dia-top-left-bottom-right" style="top:-100px;left:120px;width:120px;height:120px;"></div>
+                <x-custom-circle title="BAPENDA" size="small" style="float:left;background-color: #234f6c;" />
+                <x-custom-circle title="PDAM" visible_data="true" data_id="pdam-count" data_count="0" visible_data_type="true" data_type="Pelanggan" size="small" style="float:left;background-color: #234f6c;" />
+                <x-custom-circle title="KECAMATAN" size="small" style="float:left;background-color: #234f6c;" />
+                
+            </div>
+            
+            <div  style="position: absolute; top: 0px; left: 270px;">
+                <div class="square" style="width:5px;height:600px;background-color:black;left:70px;top:50px;"></div>
+                <div class="square dia-top-left-bottom-right" style="top:350px;left:-50px;width:120px;height:120px;"></div>
+                <div class="square dia-top-right-bottom-left" style="top:350px;left:70px;width:120px;height:120px;"></div>
+                <x-custom-circle title="Rumah Tinggal" size="small" style="background-color: #234f6c;margin:auto;" />
+                <x-custom-circle title="Non Usaha" size="large" style="background-color: #3a968b;margin-top:20px;" />
+                <x-custom-circle title="USAHA" size="large" style="background-color: #627c8b;margin-top:150px;" />
+            </div>
+            
+            <div  style="position: absolute; top: 650px; left: 110px;">
+                <div class="square dia-top-right-bottom-left" style="top:-110px;left:40px;width:200px;height:120px;"></div>
+                <div class="square dia-top-right-bottom-left" style="top:-110px;left:90px;width:150px;height:170px;"></div>
+                <div class="square dia-top-left-bottom-right" style="top:-110px;left:230px;width:150px;height:170px;"></div>
+                <div class="square dia-top-left-bottom-right" style="top:-110px;left:260px;width:200px;height:180px;"></div>
+                <x-custom-circle title="Villa" size="small" style="float:left;background-color: #234f6c;" />
+                <x-custom-circle title="Pabrik" size="small" style="float:left;background-color: #234f6c;" />
+                <x-custom-circle title="Jalan Protocol" size="small" style="float:left;background-color: #234f6c;" />
+                <x-custom-circle title="Ruko" size="small" style="float:left;background-color: #234f6c;" />
+                <x-custom-circle title="Pariwisata" size="small" style="float:left;background-color: #234f6c; margin-right: 20px;" />
+                <div class="square" style="width:150px;height:2px;background-color:black;left:350px;top:50px;"></div>
+                <x-custom-circle title="DISBUDPAR" size="small" style="background-color: #3a968b;" />
+            </div>
+            
+            <div style="position: absolute; top: 280px; left: 550px;">
+                <div class="square dia-top-left-bottom-right" style="top:-110px;left:-150px;width:200px;height:180px;"></div>
+                <div class="square dia-top-right-bottom-left" style="top:70px;left:-150px;width:200px;height:130px;"></div>
+                <x-custom-circle title="Tim Wasdal Gabungan" size="large" style="background-color: #da6635;float:left" />
+                <div class="square" style="width:650px;height:5px;background-color:black;left:100px;top:75px;"></div>
+                @component('components.circle', [
+                    'document_title' => 'Kekurangan Potensi',
+                    'document_color' => '#ff5757',
+                    'document_type' => '',
+                    'document_id' => 'chart-lack-of-potential',
+                    'visible_small_circle' => false,
+                    'style' => 'margin-left:180px;top:-20px;'
+                    ])
+                    @endcomponent
+                    
+                    <x-custom-circle title="Tata Ruang" size="large" style="background-color: #da6635;float:left;margin-left:250px;" />
+                    
+                </div>
+                
+                <div style="position: absolute; top: 310px; left: 1150px;">
+                    <div class="square dia-top-left-bottom-right" style="top:90px;left:-100px;width:100px;height:100px;"></div>
+                    <div class="square dia-top-right-bottom-left" style="top:-110px;left:-100px;width:100px;height:100px;"></div>
+                    <x-custom-circle title="Peta" visible_data_type="true" data_type="1:5000" size="small" style="background-color: #224f6d;float:left;" />
+                    <x-custom-circle title="Tapak Bangunan" size="small" style="background-color: #2390af;float:left;margin-left:20px;" />
+                    
+                </div>
+                
+                <x-custom-circle title="BPN" size="small" style="background-color: #2390af;position:absolute;left:1270px;top:440px;" />
+                
+                <div style="position: absolute; top: 470px; left: 430px;">
+                <div class="square dia-top-right-bottom-left" style="top:-80px;left:20px;width:150px;height:120px;"></div>
+                <div class="square dia-top-right-bottom-left" style="top:-50px;left:100px;width:100px;height:100px;"></div>
+                <div class="square dia-top-left-bottom-right" style="top:-50px;left:180px;width:100px;height:100px;"></div>
+                <div class="square dia-top-left-bottom-right" style="top:-60px;left:240px;width:120px;height:120px;"></div>
+                <x-custom-circle title="UPT Wasdal" size="small" style="background-color: #0f4853;float:left;" />
+                <x-custom-circle title="Satpol PP" size="small" style="background-color: #0f4853;float:left;" />
+                <x-custom-circle title="KEJARI" size="small" style="background-color: #0f4853;float:left;" />
+                <x-custom-circle title="TNI & POLRI" size="small" style="background-color: #0f4853;float:left;" />
+            </div>
+
+            <x-custom-circle title="UUCK" size="small" style="background-color: #2390af;position:absolute;left:980px;top:500px;" />
+
+            <div  style="position: absolute; top: 50px; left: 1100px;">
+                <x-custom-circle title="Non Usaha" size="large" style="background-color: #3a968b;margin-top:20px;" />
+                <x-custom-circle title="USAHA" size="large" style="background-color: #627c8b;margin-top:260px;" />
+            </div>
+        </div>
    </div>
 </div>
@endsection
--- a/resources/views/data-settings/create.blade.php
+++ b/resources/views/data-settings/create.blade.php
@@ -8,8 +8,11 @@
 <div class="row d-flex justify-content-center">
  <div class="col-lg-6">
    <div class="card">
+      <div class="card-header d-flex justify-content-end">
+        <a href="{{ route('data-settings.index') }}" class="btn btn-sm btn-secondary">Back</a>
+      </div>
      <div class="card-body">
-        <form id="formDataSettings" action="{{ route('data-settings.store') }}" method="POST">
+        <form id="formDataSettings" action="{{ route('api.data-settings.store') }}" method="POST">
          @csrf
          <div class="mb-3">
            <label for="key" class="form-label">Key</label>
--- a/resources/views/data-settings/edit.blade.php
+++ b/resources/views/data-settings/edit.blade.php
@@ -8,8 +8,11 @@
 <div class="row d-flex justify-content-center">
 	<div class="col-lg-6">
 		<div class="card">
+			<div class="card-header d-flex justify-content-end">
+        <a href="{{ route('data-settings.index') }}" class="btn btn-sm btn-secondary">Back</a>
+      </div>
 			<div class="card-body">
-				<form id="formUpdateDataSettings" action="{{ route('data-settings.update', $data->id) }}" method="POST">
+				<form id="formUpdateDataSettings" action="{{ route('api.data-settings.update', $data->id) }}" method="POST">
 					@csrf
 					@method('PUT')
 					<div class="mb-3">
--- a/resources/views/data-settings/index.blade.php
+++ b/resources/views/data-settings/index.blade.php
@@ -9,7 +9,6 @@
@include('layouts.partials/page-title', ['title' => 'Data Settings', 'subtitle' => 'Setting Dashboard'])

 <x-toast-notification />
-<x-modal-confirmation buttonText="Delete" confirmationMessage="Are you sure you want to delete this?" />

 <div class="row">
 	<div class="col-12">
--- a/resources/views/layouts/partials/topbar.blade.php
+++ b/resources/views/layouts/partials/topbar.blade.php
@@ -22,14 +22,20 @@

               <div class="d-flex align-items-center gap-2">
                    <!-- Theme Color (Light/Dark) -->
-                    <!-- <div class="topbar-item">
+                    {{-- <div class="topbar-item">
                         <button type="button" class="topbar-button" id="light-dark-mode">
                              <iconify-icon icon="solar:moon-outline"
                                   class="fs-22 align-middle light-mode"></iconify-icon>
                              <iconify-icon icon="solar:sun-2-outline"
                                   class="fs-22 align-middle dark-mode"></iconify-icon>
                         </button>
-                    </div> -->
+                    </div> --}}
+
+                    <div class="topbar-item">
+                         <a href="{{ route('chatbot.index') }}" class="topbar-button">
+                             <iconify-icon icon="solar:chat-square-outline" class="fs-22 align-middle"></iconify-icon>
+                         </a>
+                     </div>

                    <!-- Notification -->
                    <div class="dropdown topbar-item">
--- a/resources/views/layouts/vertical.blade.php
+++ b/resources/views/layouts/vertical.blade.php
@@ -1,6 +1,36 @@
 <!DOCTYPE html>
 <html lang="en" @yield('html-attribute')>

+<style>
+    /* .floating-icon {
+        position: fixed;
+        right: 30px;
+        bottom: 70px;
+        background: white;
+        padding: 10px;
+        border-radius: 50%;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        cursor: pointer;
+        z-index: 1000;
+    } */
+    .floating-icon {
+        position: fixed;
+        right: 40px;
+        bottom: 100px;
+        width: 70px;  /* Sesuaikan ukuran */
+        height: 70px; /* Sesuaikan ukuran */
+        background: white;
+        border-radius: 50%;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        cursor: pointer;
+        z-index: 1000;
+        background-image: url('/images/iconchatbot.jpeg'); /* Path ke gambar */
+        background-size: cover;  /* Agar gambar menyesuaikan */
+        background-position: center; /* Memusatkan gambar */
+    }
+
+</style>
+
 <head>
    @include('layouts.partials/title-meta')

@@ -17,10 +47,25 @@

        <div class="page-content">

-            <div class="container-fluid">
+            {{-- <div class="container-fluid">

                @yield('content')
+                <div>
+                    <iconify-icon icon="solar:chat-square-outline" class="fs-35 align-middle"></iconify-icon>
+                </div>

+            </div> --}}
+            <div class="container-fluid">
+                @yield('content')
+            
+                {{-- <div class="floating-icon">
+                    
+                </div>             --}}
+                @if (!Request::is('chatbot'))
+                    <a href="{{ route('chatbot.index') }}" class="floating-icon">
+                        
+                    </a>
+                @endif
            </div>

            @include('layouts.partials/footer')
--- a/resources/views/maps/google-api.blade.php
+++ b/resources/views/maps/google-api.blade.php
@@ -0,0 +1,45 @@
+@extends('layouts.vertical', ['subtitle' => 'Google Maps'])
+@section('css')
+<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
+@endsection
+
+@section('content')
+@include('layouts.partials/page-title', ['title' => 'Maps', 'subtitle' => 'Google Maps'])
+<div id="map" style="width: 100%; height: 90vh;"></div>
+@endsection
+
+@section('scripts')
+<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
+<script src="https://unpkg.com/togeojson@0.16.0"></script>
+<script src="https://unpkg.com/leaflet-omnivore@0.3.4/leaflet-omnivore.min.js"></script>
+<script src="https://unpkg.com/leaflet-kml/L.KML.js"></script>
+<script>
+    document.addEventListener("DOMContentLoaded", function () {
+        var map = L.map('map').setView([-6.9175, 107.6191], 10); // Jakarta
+
+        // Tambahkan peta dasar dari OpenStreetMap
+        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+            attribution: '&copy; OpenStreetMap contributors'
+        }).addTo(map);
+
+        // Muat file KMZ
+        omnivore.kml("{{ asset('storage/maps/rencanapolaruang_rtrw_2024_2044__rencana_pola_ruang.kml') }}")
+            .on('ready', function () {
+                try {
+                    var bounds = this.getBounds();
+                    if (bounds.isValid()) {
+                        map.fitBounds(bounds);
+                    } else {
+                        console.warn("Bounds tidak valid, gunakan fallback.");
+                        map.setView([-6.9175, 107.6191], 10); // Default ke Jakarta
+                    }
+                } catch (error) {
+                    console.error("Error setting bounds:", error);
+                    map.setView([-6.1751, 106.8650], 10);
+                }
+            })
+            .addTo(map);
+
+    });
+</script>
+@endsection
--- a/resources/views/menus/create.blade.php
+++ b/resources/views/menus/create.blade.php
@@ -12,8 +12,11 @@
 <div class="row d-flex justify-content-center">
    <div class="col-md-6">
        <div class="card">
+            <div class="card-header d-flex justify-content-end">
+                <a href="{{ route('menus.index') }}" class="btn btn-sm btn-secondary">Back</a>
+            </div>
            <div class="card-body">
-                <form id="formCreateMenus" action="{{route("menus.store")}}" method="post">
+                <form id="formCreateMenus" action="{{route("api.menus.store")}}" method="post">
                    @csrf
                    <div class="mb-3">
                        <label class="form-label" for="name">Name</label>
--- a/resources/views/menus/edit.blade.php
+++ b/resources/views/menus/edit.blade.php
@@ -12,8 +12,11 @@
 <div class="row d-flex justify-content-center">
    <div class="col-md-6">
        <div class="card">
+            <div class="card-header d-flex justify-content-end">
+                <a href="{{ route('menus.index') }}" class="btn btn-sm btn-secondary">Back</a>
+            </div>
            <div class="card-body">
-                <form id="formUpdateMenus" action="{{route("menus.update", $menu->id)}}" method="post">
+                <form id="formUpdateMenus" action="{{route("api.menus.update", $menu->id)}}" method="post">
                    @csrf
                    @method("put")
                    <div class="mb-3">
--- a/resources/views/roles/create.blade.php
+++ b/resources/views/roles/create.blade.php
@@ -8,8 +8,11 @@
 <div class="row d-flex justify-content-center">
    <div class="col-md-6">
        <div class="card">
+            <div class="card-header d-flex justify-content-end">
+                <a href="{{ route('roles.index') }}" class="btn btn-sm btn-secondary">Back</a>
+            </div>
            <div class="card-body">
-                <form action="{{route("roles.store")}}" method="post" id="formCreateRole" data-redirect="{{route("roles.index")}}">
+                <form action="{{route("api.roles.store")}}" method="post" id="formCreateRole" data-redirect="{{route("roles.index")}}">
                    @csrf
                    <div class="mb-3">
                        <label class="form-label" for="name">Name</label>
--- a/resources/views/roles/edit.blade.php
+++ b/resources/views/roles/edit.blade.php
@@ -8,8 +8,11 @@
 <div class="row d-flex justify-content-center">
    <div class="col-md-6">
        <div class="card">
+            <div class="card-header d-flex justify-content-end">
+                <a href="{{ route('roles.index') }}" class="btn btn-sm btn-secondary">Back</a>
+            </div>
            <div class="card-body">
-                <form id="formUpdateRole" action="{{route("roles.update", $role->id)}}" method="post" >
+                <form id="formUpdateRole" action="{{route("api.roles.update", $role->id)}}" method="post" >
                    @csrf
                    @method("put")
                    <div class="mb-3">
--- a/resources/views/roles/role_menu.blade.php
+++ b/resources/views/roles/role_menu.blade.php
@@ -7,6 +7,9 @@
 <div class="row d-flex justify-content-center">
    <div class="col-md-12">
        <div class="card">
+            <div class="card-header d-flex justify-content-end">
+                <a href="{{ route('roles.index') }}" class="btn btn-sm btn-secondary">Back</a>
+            </div>
            <div class="card-body">
                <h5>Manage Permissions for Role: {{ $role->name }}</h5>
                <form action="{{route("role-menu.permission.update", $role->id)}}" method="post">
--- a/routes/api.php
+++ b/routes/api.php
@@ -1,5 +1,6 @@
 <?php

+use App\Http\Controllers\Api\BigDataResumeController;
 use App\Http\Controllers\Api\BusinessOrIndustriesController;
 use App\Http\Controllers\Api\CustomersController;
 use App\Http\Controllers\Api\DashboardController;
@@ -7,6 +8,7 @@ use App\Http\Controllers\Api\DataSettingController;
 use App\Http\Controllers\Api\GlobalSettingsController;
 use App\Http\Controllers\Api\GoogleSheetController;
 use App\Http\Controllers\Api\ImportDatasourceController;
+use App\Http\Controllers\Api\LackOfPotentialController;
 use App\Http\Controllers\Api\MenusController;
 use App\Http\Controllers\Api\PbgTaskController;
 use App\Http\Controllers\Api\RequestAssignmentController;
@@ -19,9 +21,11 @@ use App\Http\Controllers\Api\AdvertisementController;
 use App\Http\Controllers\Api\UmkmController;
 use App\Http\Controllers\Api\TourismController;
 use App\Http\Controllers\Api\SpatialPlanningController;
+use App\Http\Controllers\Api\ChatbotController;
 use Illuminate\Support\Facades\Route;

 Route::post('/login', [UsersController::class, 'login'])->name('api.user.login');
+Route::post('/generate-text', [ChatbotController::class, 'generateText']);
 Route::group(['middleware' => 'auth:sanctum'], function (){
    // users
    Route::controller(UsersController::class)->group(function(){
@@ -80,7 +84,13 @@ Route::group(['middleware' => 'auth:sanctum'], function (){
    Route::get('/download-template-spatialPlannings', [SpatialPlanningController::class, 'downloadExcelSpatialPlanning']);
    
    // data-settings
-    Route::apiResource('/api-data-settings', DataSettingController::class);
+    // Route::apiResource('/api-data-settings', DataSettingController::class);
+    Route::controller(DataSettingController::class)->group(function (){
+        Route::get('/data-settings', 'index')->name('api.data-settings');
+        Route::post('/data-settings', 'store')->name('api.data-settings.store');
+        Route::put('/data-settings/{data_setting_id}', 'update')->name('api.data-settings.update');
+        Route::delete('/data-settings/{data_setting_id}', 'destroy')->name('api.data-settings.destroy');
+    });

    Route::apiResource('/api-pbg-task', PbgTaskController::class);

@@ -93,10 +103,20 @@ Route::group(['middleware' => 'auth:sanctum'], function (){
    Route::get('/sync-task-submit/{uuid}', [SyncronizeController::class, 'syncTaskDetailSubmit'])->name('api.task.submit');

    // menus api
-    Route::apiResource('api-menus', MenusController::class);
+    Route::controller(MenusController::class)->group(function (){
+        Route::get('/menus', 'index')->name('api.menus');
+        Route::post('/menus', 'store')->name('api.menus.store');
+        Route::put('/menus/{menu_id}', 'update')->name('api.menus.update');
+        Route::delete('/menus/{menu_id}', 'destroy')->name('api.menus.destroy');
+    });

    // roles api
-    Route::apiResource('api-roles', RolesController::class);
+    Route::controller(RolesController::class)->group(function (){
+        Route::get('/roles', 'index')->name('api.roles');
+        Route::post('/roles', 'store')->name('api.roles.store');
+        Route::put('/roles/{role_id}', 'update')->name('api.roles.update');
+        Route::delete('/roles/{role_id}', 'destroy')->name('api.roles.destroy');
+    });

    //business industries api 
    Route::apiResource('api-business-industries', BusinessOrIndustriesController::class);
@@ -109,4 +129,10 @@ Route::group(['middleware' => 'auth:sanctum'], function (){
        Route::delete('/customers/{id}', 'destroy')->name('api.customers.destroy');
        Route::post('/customers/upload', 'upload')->name('api.customers.upload');
    });
+
+    //dashboard potensi
+    Route::get('/dashboard-potential-count', [LackOfPotentialController::class, 'count_lack_of_potential'])->name('api.count-dashboard-potential');
+
+    // big data resume
+    Route::get('/bigdata-resume', [BigDataResumeController::class, 'index'])->name('api.bigdata-resume');
 });
--- a/routes/web.php
+++ b/routes/web.php
@@ -5,6 +5,7 @@ use App\Http\Controllers\CustomersController;
 use App\Http\Controllers\Dashboards\LackOfPotentialController;
 use App\Http\Controllers\DataSettingController;
 use App\Http\Controllers\Dashboards\BigDataController;
+use App\Http\Controllers\GoogleApisController;
 use App\Http\Controllers\Home\HomeController;
 use App\Http\Controllers\Master\UsersController;
 use App\Http\Controllers\MenusController;
@@ -18,6 +19,7 @@ use App\Http\Controllers\Data\TourismController;
 use App\Http\Controllers\Data\SpatialPlanningController;
 use App\Http\Controllers\Report\ReportTourismController;
 use App\Http\Controllers\SpatialPlanningsController;
+use App\Http\Controllers\Chatbot\ChatbotController;
 use Illuminate\Support\Facades\Route;

 require __DIR__ . '/auth.php';
@@ -32,6 +34,7 @@ Route::group(['middleware' => 'auth'], function(){
        Route::get('/bigdata', [BigDataController::class, 'index'])->name('dashboard.home');
        Route::get('/dashboard-pbg', [BigDataController::class, 'pbg'])->name('dashboard.pbg');
        Route::get('/lack-of-potential', [LackOfPotentialController::class, 'lack_of_potential'])->name('dashboard.lack_of_potential');
+        Route::get('/maps', [GoogleApisController::class, 'index'])->name('dashboard.maps');
    });
    
    // settings
@@ -56,6 +59,9 @@ Route::group(['middleware' => 'auth'], function(){
    // menus
    Route::resource('/menus', MenusController::class);

+    // chatbot
+    Route::resource('/chatbot', ChatbotController::class);
+
    // roles
    Route::resource('/roles', RolesController::class);
    Route::group(['prefix' => '/roles'], function (){
--- a/sibedas.sql
+++ b/sibedas.sql
--- a/vite.config.js
+++ b/vite.config.js
@@ -98,6 +98,7 @@ export default defineConfig({
                "resources/js/customers/index.js",
                "resources/js/customers/create.js",
                "resources/js/customers/edit.js",
+		"resources/js/dashboards/pbg.js"
            ],
            refresh: true,
        }),
Author	SHA1	Message	Date
@jamaludinarifrohman6661	fefef609ac	feature: chatbot	2025-02-28 17:53:16 +07:00
arifal	7f8a2e4936	Merge branch 'feature/dashboard-pbg' into dev	2025-02-25 11:34:08 +07:00
arifal	aa9943ba45	hot fix vite config js resources	2025-02-25 04:18:15 +00:00
arifal	9e55ea0dbb	fix change api route data settings	2025-02-25 10:41:59 +07:00
arifal	93f0ac5ef7	Merge branch 'feature/dashboard-pbg' into fix/dashboard-resume	2025-02-25 10:23:41 +07:00
arifal	bb4ab5c769	add filter date for dashboard	2025-02-24 19:00:09 +07:00
arifal hidayat	e743b82087	add remove disabled if error on data settings	2025-02-23 07:11:14 +07:00
arifal hidayat	c3c7b8e3ec	fix js roles and add back button on card header	2025-02-23 07:08:50 +07:00
arifal hidayat	d49035ce8d	fix js menus and handle api menus	2025-02-23 06:42:13 +07:00
arifal hidayat	ffd9d3514c	fix business industries and data settings front end	2025-02-22 16:08:59 +07:00
arifal	675477c734	fix service sync simbg upsert integrations	2025-02-21 18:49:42 +07:00
arifal	4350c466e3	add backup db from local	2025-02-21 18:18:45 +07:00
arifal	5ab407d672	change get value dashboard pimpinan from resume bigdata	2025-02-21 18:09:32 +07:00
arifal	2aaa487746	fix get total data from api	2025-02-21 14:49:09 +07:00
arifal	080582f7ab	add new menu peta in dashboard	2025-02-21 11:12:35 +07:00
arifal	91475aeead	Merge branch 'dev' into feat/load-map-from-kmz	2025-02-21 10:43:06 +07:00
arifal	5d50d6d6cc	fix height card	2025-02-19 15:34:28 +07:00
arifal	39717d184c	partial update create google map from kmz file	2025-02-19 14:31:12 +07:00