fix inside and outside dashboard

.env.example

@@ -68,3 +68,4 @@ VITE_APP_NAME="${APP_NAME}"
 
 API_KEY_GOOGLE="xxxxx"
 SPREAD_SHEET_ID="xxxxx"
+OPENAI_API_KEY="xxxxx"

README.md

@@ -17,13 +17,14 @@ sudo nano /etc/supervisor/conf.d/laravel-worker.conf
 
 [program:laravel-worker]
 process_name=%(program_name)s_%(process_num)02d
-command=php /path-to-your-project/artisan queue:work --tries=3 --timeout=600
+command=php /home/arifal/development/sibedas-pbg-web/artisan queue:work --queue=default --timeout=40000 --tries=1 --sleep=3
 autostart=true
 autorestart=true
-numprocs=1
+numprocs=4
-user=www-data
 redirect_stderr=true
-stdout_logfile=/var/log/supervisor/laravel-worker.log
+stdout_logfile=/home/arifal/development/sibedas-pbg-web/storage/logs/worker.log
+stopasgroup=true
+killasgroup=true
 ```
 
 -   Reload Supervisor
@@ -35,3 +36,71 @@ sudo supervisorctl start laravel-worker
 sudo supervisorctl restart laravel-worker
 sudo supervisorctl status
 ```
+
+# How to running
+
+-   Install composer package
+
+```
+composer install
+```
+
+-   Install npm package
+
+```
+npm install && npm run build
+```
+
+-   Create symlinks storage
+
+```
+php artisan storage:link
+```
+
+-   Running migration
+
+```
+php artisan migrate
+```
+
+-   Create view table
+-   excute all sql queries on folder database/view_query
+
+# Add ENV variable
+
+-   API_KEY_GOOGLE
+
+```
+Get api key from google developer console for and turn on spreadsheet api or feaature for google sheet
+```
+
+-   SPREAD_SHEET_ID
+
+```
+Get spreadsheet id from google sheet link
+```
+
+-   OPENAI_API_KEY
+
+```
+Get OpenAI API key from chatgpt subscription
+```
+
+-   ENV
+
+```
+
+API_KEY_GOOGLE="xxxxx"
+SPREAD_SHEET_ID="xxxxx"
+OPENAI_API_KEY="xxxxx"
+
+```
+
+# Technology version
+
+-   php 8.3
+-   Laravel 11
+-   node v22.13.0
+-   npm 10.9.2
+-   mariadb Ver 15.1 Distrib 10.6.18-MariaDB, for debian-linux-gnu (x86_64) using EditLine wrapper
+-   Ubuntu 24.04

app/Console/Commands/ExecuteScraping.php

@@ -34,7 +34,7 @@ class ExecuteScraping extends Command
     }
     public function handle()
     {
-        SyncronizeSIMBG::dispatch();
+        SyncronizeSIMBG::dispatch()->onQueue('default');
         Log::info("running scheduler daily scraping");
     }
 }

app/Http/Controllers/Api/BigDataResumeController.php

@@ -162,7 +162,7 @@ class BigDataResumeController extends Controller
             $query = BigdataResume::query()->orderBy('id', 'desc');
         
             if($request->filled('search')){
-                $query->where('name', 'LIKE', '%'.$request->input('search').'%');
+                $query->where('year', 'LIKE', '%'.$request->input('search').'%');
             }
 
             $query = $query->paginate(config('app.paginate_per_page', 50));
@@ -173,6 +173,53 @@ class BigDataResumeController extends Controller
         }
     }
 
+    public function payment_recaps(Request $request)
+    {
+        try {
+            $query = BigdataResume::query()->orderBy('id', 'desc');
+
+            if ($request->filled('date')) {
+                $query->where('year', 'LIKE', '%' . $request->input('search') . '%');
+            }
+
+            $data = $query->paginate(10);
+
+            // Restructure response
+            $transformedData = [];
+
+            foreach ($data as $item) {
+                $createdAt = $item->created_at;
+                $id = $item->id;
+
+                foreach ($item->toArray() as $key => $value) {
+                    // Only include columns with "sum" in their names
+                    if (strpos($key, 'sum') !== false) {
+                        $transformedData[] = [
+                            'id' => $id,
+                            'category' => $key,
+                            'nominal' => $value,
+                            'created_at' => $createdAt,
+                        ];
+                    }
+                }
+            }
+
+            return response()->json([
+                'data' => $transformedData, // Flat array
+                'pagination' => [
+                    'total' => $data->total(),
+                    'per_page' => $data->perPage(),
+                    'current_page' => $data->currentPage(),
+                    'last_page' => $data->lastPage(),
+                ]
+            ]);
+        } catch (\Exception $e) {
+            Log::error($e->getMessage());
+            return response()->json(['message' => 'Error when fetching data'], 500);
+        }
+    }
+
+
     private function response_empty_resume(){
         $result = [
             'target_pad' => [

app/Http/Controllers/Api/GlobalSettingsController.php

@@ -34,7 +34,7 @@ class GlobalSettingsController extends Controller
         try {
             $data = GlobalSetting::create($request->validated());
             return new GlobalSettingResource($data);
-        } catch (\Exception $e) {
+        } catch (Exception $e) {
             return $this->resError($e->getMessage(), null, $e->getCode());
         }
     }

app/Http/Controllers/Api/GoogleSheetController.php

@@ -3,33 +3,15 @@
 namespace App\Http\Controllers\Api;
 
 use App\Http\Controllers\Controller;
-use App\Services\GoogleSheetService;
 use Illuminate\Http\Request;
 
 class GoogleSheetController extends Controller
 {
-    protected $googleSheetService;
+    public function index(Request $request)
-    public function __construct(GoogleSheetService $googleSheetService){
-        $this->googleSheetService = $googleSheetService;
-    }
-    /**
-     * Display a listing of the resource.
-     */
-    public function index()
     {
-        $dataCollection = $this->googleSheetService->getSheetDataCollection();
+        
-        $result = [
-            "last_row" => $this->googleSheetService->getLastRowByColumn("C"),
-            "last_column" => $this->googleSheetService->getLastColumn(),
-            "header" => $this->googleSheetService->getHeader(),
-            "data_collection" => $dataCollection
-        ];
-        return response()->json($result);
     }
 
-    /**
-     * Store a newly created resource in storage.
-     */
     public function store(Request $request)
     {
         //

app/Http/Controllers/Api/PbgTaskGoogleSheetsController.php

@@ -0,0 +1,61 @@
+<?php
+
+namespace App\Http\Controllers\Api;
+
+use App\Http\Controllers\Controller;
+use App\Http\Resources\PbgTaskGoogleSheetResource;
+use App\Models\PbgTaskGoogleSheet;
+use Illuminate\Http\Request;
+
+class PbgTaskGoogleSheetsController extends Controller
+{
+    /**
+     * Display a listing of the resource.
+     */
+    public function index(Request $request)
+    {
+        $query = PbgTaskGoogleSheet::query()->orderBy('id', 'desc');
+        if ($request->filled('search')) {
+            $query->where('no_registrasi', 'like', "%{$request->get('search')}%");
+        }
+        return PbgTaskGoogleSheetResource::collection($query->paginate(config('app.paginate_per_page', 50)));
+    }
+
+    /**
+     * 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)
+    {
+        try{
+            $data = PbgTaskGoogleSheet::find($id);
+            $data->delete();
+            return response()->json(['message' => 'Data deleted successfully'], 200);
+        }catch(\Exception $e){
+            return response()->json(['message' => 'Failed to delete data'], 500);
+        }
+    }
+}

app/Http/Controllers/Api/RequestAssignmentController.php

@@ -5,7 +5,11 @@ namespace App\Http\Controllers\Api;
 use App\Http\Controllers\Controller;
 use App\Http\Resources\RequestAssignmentResouce;
 use App\Models\PbgTask;
+use App\Models\PbgTaskGoogleSheet;
+use DB;
+use Exception;
 use Illuminate\Http\Request;
+use Log;
 
 class RequestAssignmentController extends Controller
 {
@@ -23,6 +27,51 @@ class RequestAssignmentController extends Controller
         return RequestAssignmentResouce::collection($query->paginate());
     }
 
+    public function report_payment_recaps(Request $request)
+    {
+        try {
+            // Query dengan group by kecamatan dan sum nilai_retribusi_keseluruhan_simbg
+            $query = PbgTaskGoogleSheet::select(
+                    'kecamatan',
+                    DB::raw('SUM(nilai_retribusi_keseluruhan_simbg) as total')
+                )
+                ->groupBy('kecamatan')
+                ->paginate(10);
+
+            // Return hasil dalam JSON format
+            return response()->json([
+                'success' => true,
+                'data' => $query
+            ]);
+
+        } catch (Exception $e) {
+            Log::error($e->getMessage());
+            return response()->json(['message' => 'Terjadi kesalahan: ' . $e->getMessage()], 500);
+        }
+    }
+    public function report_pbg_ptsp()
+    {
+        try {
+            // Query dengan group by status dan count total per status
+            $query = PbgTask::select(
+                    'status',
+                    'status_name',
+                    DB::raw('COUNT(*) as total')
+                )
+                ->groupBy('status', 'status_name')
+                ->paginate(10);
+
+            // Return hasil dalam JSON format
+            return response()->json([
+                'success' => true,
+                'data' => $query
+            ]);
+
+        } catch (Exception $e) {
+            Log::error($e->getMessage());
+            return response()->json(['message' => 'Terjadi kesalahan: ' . $e->getMessage()], 500);
+        }
+    }
     /**
      * Store a newly created resource in storage.
      */

app/Http/Controllers/Api/TaskAssignmentsController.php

@@ -0,0 +1,64 @@
+<?php
+
+namespace App\Http\Controllers\Api;
+
+use App\Http\Controllers\Controller;
+use App\Http\Resources\TaskAssignmentsResource;
+use App\Models\TaskAssignment;
+use Illuminate\Http\Request;
+
+class TaskAssignmentsController extends Controller
+{
+    /**
+     * Display a listing of the resource.
+     */
+    public function index(Request $request, $uuid)
+    {
+        try{
+            $query = TaskAssignment::query()
+            ->where('pbg_task_uid', $uuid)
+                ->orderBy('id', 'desc');
+
+            if ($request->filled('search')) {
+                $query->where('name', 'like', "%{$request->get('search')}%")
+                ->orWhere('email', 'like', "%{$request->get('search')}%");
+            }
+
+            return TaskAssignmentsResource::collection($query->paginate(config('app.paginate_per_page', 50)));
+        }catch(\Exception $exception){
+            return response()->json(['message' => $exception->getMessage()], 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)
+    {
+        //
+    }
+}

app/Http/Controllers/Api/TourismController.php

@@ -39,7 +39,7 @@ class TourismController extends Controller
             $tourisms->village_name = $village ? $village->village_name : null;
 
             $district = DB::table('districts')->where('district_code', $tourisms->district_code)->first();
-            $tourisms->district_name = $village ? $village->village_name : null;
+            $tourisms->district_name = $district ? $district->district_name : null;
             return $tourisms;
         });
 

app/Http/Controllers/Api/UsersController.php

@@ -11,6 +11,7 @@ use App\Traits\GlobalApiResponse;
 use Illuminate\Support\Facades\DB;
 use Illuminate\Support\Facades\Hash;
 use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Log;
 
 class UsersController extends Controller
 {
@@ -29,7 +30,8 @@ class UsersController extends Controller
     public function index(Request $request){
         $query = User::query();
         if($request->has('search') && !empty($request->get("search"))){
-            $query->where('name', 'LIKE', '%'.$request->get('search').'%');
+            $query->where('name', 'LIKE', '%'.$request->get('search').'%')
+            ->orWhere('email', 'LIKE', '%'.$request->get('search').'%');
         }
         return UserResource::collection($query->paginate(config('app.paginate_per_page', 50)));
     }

app/Http/Controllers/Approval/ApprovalController.php

@@ -0,0 +1,65 @@
+<?php
+
+namespace App\Http\Controllers\Approval;
+
+use App\Http\Controllers\Controller;
+use Illuminate\Http\Request;
+
+class ApprovalController extends Controller
+{
+    /**
+     * Display a listing of the resource.
+     */
+    public function index()
+    {
+        return view('approval.index');
+    }
+
+    /**
+     * Show the form for creating a new resource.
+     */
+    public function create()
+    {
+        //
+    }
+
+    /**
+     * Store a newly created resource in storage.
+     */
+    public function store(Request $request)
+    {
+        //
+    }
+
+    /**
+     * Display the specified resource.
+     */
+    public function show(string $id)
+    {
+        //
+    }
+
+    /**
+     * Show the form for editing the specified resource.
+     */
+    public function edit(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)
+    {
+        //
+    }
+}

app/Http/Controllers/Auth/AuthenticatedSessionController.php

@@ -38,8 +38,6 @@ class AuthenticatedSessionController extends Controller
 
         // Buat token untuk API
         $token = $user->createToken(env('APP_KEY'))->plainTextToken;
-
-        // Simpan token di session (bisa digunakan di JavaScript)
         session(['api_token' => $token]);
 
         return redirect()->intended(RouteServiceProvider::HOME);

app/Http/Controllers/BusinessOrIndustriesController.php

@@ -4,15 +4,36 @@ namespace App\Http\Controllers;
 
 use App\Models\BusinessOrIndustry;
 use Illuminate\Http\Request;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Support\Facades\Auth;
 
 class BusinessOrIndustriesController extends Controller
 {
     /**
      * Display a listing of the resource.
      */
-    public function index()
+    public function index(Request $request)
     {
-        return view('business-industries.index');
+        $menuId = $request->query('menu_id');
+        $user = Auth::user();
+        $userId = $user->id;
+
+        // Ambil role_id yang dimiliki user
+        $roleIds = DB::table('user_role')
+            ->where('user_id', $userId)
+            ->pluck('role_id');
+
+        // Ambil data akses berdasarkan role_id dan menu_id
+        $roleAccess = DB::table('role_menu')
+            ->whereIn('role_id', $roleIds)
+            ->where('menu_id', $menuId)
+            ->first();
+
+        // Pastikan roleAccess tidak null sebelum mengakses properti
+        $creator = $roleAccess->allow_create ?? 0;
+        $updater = $roleAccess->allow_update ?? 0;
+        $destroyer = $roleAccess->allow_destroy ?? 0;
+        return view('business-industries.index', compact('creator', 'updater', 'destroyer'));
     }
 
     /**

app/Http/Controllers/Controller.php

@@ -2,7 +2,54 @@
 
 namespace App\Http\Controllers;
 
+use Illuminate\Support\Facades\Auth;
+
 abstract class Controller
 {
-    //
+    protected array $permissions = [];
+
+    public function __construct()
+    {
+        if (!Auth::check()) {
+            return;
+        }
+        $this->setUserPermissions();
+    }
+
+    protected function setUserPermissions()
+    {
+        $user = Auth::user();
+
+        if (!$user) {
+            return;
+        }
+
+        $menus = $user->roles()
+            ->with(['menus' => function ($query) {
+                $query->select('menus.id', 'menus.name')
+                      ->withPivot(['allow_show' ,'allow_create', 'allow_update', 'allow_destroy']);
+            }])
+            ->get()
+            ->pluck('menus')
+            ->flatten()
+            ->unique('id');
+
+        // Store permissions in an associative array
+        foreach ($menus as $menu) {
+            $this->permissions[$menu->id] = [
+                'allow_show' => $menu->pivot->allow_show ?? 0,
+                'allow_create' => $menu->pivot->allow_create ?? 0,
+                'allow_update' => $menu->pivot->allow_update ?? 0,
+                'allow_destroy' => $menu->pivot->allow_destroy ?? 0,
+            ];
+        }
+
+        // Share permissions globally in views
+        view()->share('permissions', $this->permissions);
+    }
+
+    public function getPermissions()
+    {
+        return $this->permissions;
+    }
 }

app/Http/Controllers/CustomersController.php

@@ -4,12 +4,34 @@ namespace App\Http\Controllers;
 
 use App\Models\Customer;
 use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\DB;
 
 class CustomersController extends Controller
 {
-    public function index()
+    public function index(Request $request)
     {
-        return view('customers.index');
+        $menuId = $request->query('menu_id');
+        $user = Auth::user();
+        $userId = $user->id;
+
+        // Ambil role_id yang dimiliki user
+        $roleIds = DB::table('user_role')
+            ->where('user_id', $userId)
+            ->pluck('role_id');
+
+        // Ambil data akses berdasarkan role_id dan menu_id
+        $roleAccess = DB::table('role_menu')
+            ->whereIn('role_id', $roleIds)
+            ->where('menu_id', $menuId)
+            ->first();
+
+        // Pastikan roleAccess tidak null sebelum mengakses properti
+        $creator = $roleAccess->allow_create ?? 0;
+        $updater = $roleAccess->allow_update ?? 0;
+        $destroyer = $roleAccess->allow_destroy ?? 0;
+
+        return view('customers.index', compact('creator', 'updater', 'destroyer'));
     }
     public function create()
     {

app/Http/Controllers/Dashboards/PotentialsController.php

@@ -0,0 +1,16 @@
+<?php
+
+namespace App\Http\Controllers\Dashboards;
+
+use App\Http\Controllers\Controller;
+use Illuminate\Http\Request;
+
+class PotentialsController extends Controller
+{
+    public function inside_system(){
+        return view('dashboards.potentials.inside_system');
+    }
+    public function outside_system(){
+        return view('dashboards.potentials.outside_system');
+    }
+}

app/Http/Controllers/Data/AdvertisementController.php

@@ -6,15 +6,36 @@ use App\Http\Controllers\Controller;
 use App\Models\Advertisement;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\DB;
+use Illuminate\Support\Facades\Auth;
 
 class AdvertisementController extends Controller
 {
     /**
      * Display a listing of the resource.
      */
-    public function index()
+    public function index(Request $request)
     {
-        return view('data.advertisements.index');
+        $menuId = $request->query('menu_id');
+        $user = Auth::user();
+        $userId = $user->id;
+
+        // Ambil role_id yang dimiliki user
+        $roleIds = DB::table('user_role')
+            ->where('user_id', $userId)
+            ->pluck('role_id');
+
+        // Ambil data akses berdasarkan role_id dan menu_id
+        $roleAccess = DB::table('role_menu')
+            ->whereIn('role_id', $roleIds)
+            ->where('menu_id', $menuId)
+            ->first();
+
+        // Pastikan roleAccess tidak null sebelum mengakses properti
+        $creator = $roleAccess->allow_create ?? 0;
+        $updater = $roleAccess->allow_update ?? 0;
+        $destroyer = $roleAccess->allow_destroy ?? 0;
+
+        return view('data.advertisements.index', compact('creator', 'updater', 'destroyer'));
     }
 
     /**

app/Http/Controllers/Data/GoogleSheetsController.php

@@ -0,0 +1,36 @@
+<?php
+
+namespace App\Http\Controllers\Data;
+
+use App\Http\Controllers\Controller;
+use App\Models\PbgTaskGoogleSheet;
+use Illuminate\Http\Request;
+
+class GoogleSheetsController extends Controller
+{
+    /**
+     * Display a listing of the resource.
+     */
+    public function index(Request $request)
+    {
+        $menu_id = $request->query('menu_id');
+        $user_menu_permission = $this->permissions[$menu_id];
+        return view('data.google-sheet.index', compact('user_menu_permission'));
+    }
+
+    public function create()
+    {
+        return view('data.google-sheet.create');
+    }
+
+    public function show(string $id)
+    {
+        $data = PbgTaskGoogleSheet::find($id);
+        return view('data.google-sheet.show', compact('data'));
+    }
+
+    public function edit(string $id)
+    {
+        return view('data.google-sheet.edit');
+    }
+}

app/Http/Controllers/Data/SpatialPlanningController.php

@@ -5,15 +5,37 @@ namespace App\Http\Controllers\Data;
 use App\Http\Controllers\Controller;
 use App\Models\SpatialPlanning;
 use Illuminate\Http\Request;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Support\Facades\Auth;
 
 class SpatialPlanningController extends Controller
 {
     /**
      * Display a listing of the resource.
      */
-    public function index()
+    public function index(Request $request)
     {
-        return view('data.spatialPlannings.index');
+        $menuId = $request->query('menu_id');
+        $user = Auth::user();
+        $userId = $user->id;
+
+        // Ambil role_id yang dimiliki user
+        $roleIds = DB::table('user_role')
+            ->where('user_id', $userId)
+            ->pluck('role_id');
+
+        // Ambil data akses berdasarkan role_id dan menu_id
+        $roleAccess = DB::table('role_menu')
+            ->whereIn('role_id', $roleIds)
+            ->where('menu_id', $menuId)
+            ->first();
+
+        // Pastikan roleAccess tidak null sebelum mengakses properti
+        $creator = $roleAccess->allow_create ?? 0;
+        $updater = $roleAccess->allow_update ?? 0;
+        $destroyer = $roleAccess->allow_destroy ?? 0;
+
+        return view('data.spatialPlannings.index', compact('creator', 'updater', 'destroyer'));
     }
 
     /**

app/Http/Controllers/Data/TourismController.php

@@ -6,15 +6,35 @@ use App\Http\Controllers\Controller;
 use App\Models\Tourism;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\DB;
+use Illuminate\Support\Facades\Auth;
 
 class TourismController extends Controller
 {
     /**
      * Display a listing of the resource
      */
-    public function index()
+    public function index(Request $request)
     {
-        return view('data.tourisms.index');
+        $menuId = $request->query('menu_id');
+        $user = Auth::user();
+        $userId = $user->id;
+
+        // Ambil role_id yang dimiliki user
+        $roleIds = DB::table('user_role')
+            ->where('user_id', $userId)
+            ->pluck('role_id');
+
+        // Ambil data akses berdasarkan role_id dan menu_id
+        $roleAccess = DB::table('role_menu')
+            ->whereIn('role_id', $roleIds)
+            ->where('menu_id', $menuId)
+            ->first();
+
+        // Pastikan roleAccess tidak null sebelum mengakses properti
+        $creator = $roleAccess->allow_create ?? 0;
+        $updater = $roleAccess->allow_update ?? 0;
+        $destroyer = $roleAccess->allow_destroy ?? 0;
+        return view('data.tourisms.index', compact('creator', 'updater', 'destroyer'));
     }
 
     /**

app/Http/Controllers/Data/UmkmController.php

@@ -6,15 +6,35 @@ use App\Http\Controllers\Controller;
 use App\Models\Umkm;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\DB;
+use Illuminate\Support\Facades\Auth;
 
 class UmkmController extends Controller
 {
     /**
      * Display a listing of the resource.
      */
-    public function index()
+    public function index(Request $request)
     {
-        return view('data.umkm.index');
+        $menuId = $request->query('menu_id');
+        $user = Auth::user();
+        $userId = $user->id;
+
+        // Ambil role_id yang dimiliki user
+        $roleIds = DB::table('user_role')
+            ->where('user_id', $userId)
+            ->pluck('role_id');
+
+        // Ambil data akses berdasarkan role_id dan menu_id
+        $roleAccess = DB::table('role_menu')
+            ->whereIn('role_id', $roleIds)
+            ->where('menu_id', $menuId)
+            ->first();
+        
+        // Pastikan roleAccess tidak null sebelum mengakses properti
+        $creator = $roleAccess->allow_create ?? 0;
+        $updater = $roleAccess->allow_update ?? 0;
+        $destroyer = $roleAccess->allow_destroy ?? 0;
+        return view('data.umkm.index', compact('creator', 'updater', 'destroyer'));
     }
 
     /**

app/Http/Controllers/DataSettingController.php

@@ -8,15 +8,36 @@ use Exception;
 use Illuminate\Support\Facades\DB;
 use Illuminate\Support\Facades\Log;
 use Illuminate\Support\Facades\Request;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Http\Request as IndexRequest;
 
 class DataSettingController extends Controller
 {
     /**
      * Display a listing of the resource.
      */
-    public function index()
+    public function index(IndexRequest $request)
     {
-        return view("data-settings.index");
+        $menuId = $request->query('menu_id');
+        $user = Auth::user();
+        $userId = $user->id;
+
+        // Ambil role_id yang dimiliki user
+        $roleIds = DB::table('user_role')
+            ->where('user_id', $userId)
+            ->pluck('role_id');
+
+        // Ambil data akses berdasarkan role_id dan menu_id
+        $roleAccess = DB::table('role_menu')
+            ->whereIn('role_id', $roleIds)
+            ->where('menu_id', $menuId)
+            ->first();
+
+        // Pastikan roleAccess tidak null sebelum mengakses properti
+        $creator = $roleAccess->allow_create ?? 0;
+        $updater = $roleAccess->allow_update ?? 0;
+        $destroyer = $roleAccess->allow_destroy ?? 0;
+        return view("data-settings.index", compact('creator', 'updater', 'destroyer'));
     }
 
     /**

app/Http/Controllers/InvitationsController.php

@@ -0,0 +1,12 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+
+class InvitationsController extends Controller
+{
+    public function index(Request $request){
+        return view('invitations.index');
+    }
+}

app/Http/Controllers/Master/UsersController.php

@@ -13,6 +13,7 @@ use Illuminate\Support\Facades\Hash;
 use App\Models\User;
 use App\Traits\GlobalApiResponse;
 use Illuminate\Auth\Events\Registered;
+use Illuminate\Support\Facades\Auth;
 
 class UsersController extends Controller
 {
@@ -21,9 +22,29 @@ class UsersController extends Controller
         $users = User::all();
         return $this->resSuccess($users);
     }
-    public function index(){
+    public function index(Request $request){
+        $menuId = $request->query('menu_id');
+        $user = Auth::user();
+        $userId = $user->id;
+
+        // Ambil role_id yang dimiliki user
+        $roleIds = DB::table('user_role')
+            ->where('user_id', $userId)
+            ->pluck('role_id');
+
+        // Ambil data akses berdasarkan role_id dan menu_id
+        $roleAccess = DB::table('role_menu')
+            ->whereIn('role_id', $roleIds)
+            ->where('menu_id', $menuId)
+            ->first();
+
+        // Pastikan roleAccess tidak null sebelum mengakses properti
+        $creator = $roleAccess->allow_create ?? 0;
+        $updater = $roleAccess->allow_update ?? 0;
+        $destroyer = $roleAccess->allow_destroy ?? 0;
+
         $users = User::paginate();
-        return view('master.users.index', compact('users'));
+        return view('master.users.index', compact('users', 'creator', 'updater', 'destroyer'));
     }
     public function create(){
         $roles = Role::all();

app/Http/Controllers/MenusController.php

@@ -6,15 +6,36 @@ use App\Http\Requests\MenuRequest;
 use App\Models\Menu;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\DB;
+use Illuminate\Support\Facades\Auth;
 
 class MenusController extends Controller
 {
     /**
      * Display a listing of the resource.
      */
-    public function index()
+    public function index(Request $request)
     {
-        return view('menus.index');
+        $menuId = $request->query('menu_id');
+        $user = Auth::user();
+        $userId = $user->id;
+
+        // Ambil role_id yang dimiliki user
+        $roleIds = DB::table('user_role')
+            ->where('user_id', $userId)
+            ->pluck('role_id');
+
+        // Ambil data akses berdasarkan role_id dan menu_id
+        $roleAccess = DB::table('role_menu')
+            ->whereIn('role_id', $roleIds)
+            ->where('menu_id', $menuId)
+            ->first();
+
+        // Pastikan roleAccess tidak null sebelum mengakses properti
+        $creator = $roleAccess->allow_create ?? 0;
+        $updater = $roleAccess->allow_update ?? 0;
+        $destroyer = $roleAccess->allow_destroy ?? 0;
+
+        return view('menus.index', compact('creator', 'updater', 'destroyer'));
     }
 
     /**

app/Http/Controllers/PaymentRecapsController.php

@@ -0,0 +1,64 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+
+class PaymentRecapsController extends Controller
+{
+    /**
+     * Display a listing of the resource.
+     */
+    public function index()
+    {
+        return view('payment-recaps.index');
+    }
+
+    /**
+     * Show the form for creating a new resource.
+     */
+    public function create()
+    {
+        //
+    }
+
+    /**
+     * Store a newly created resource in storage.
+     */
+    public function store(Request $request)
+    {
+        //
+    }
+
+    /**
+     * Display the specified resource.
+     */
+    public function show(string $id)
+    {
+        //
+    }
+
+    /**
+     * Show the form for editing the specified resource.
+     */
+    public function edit(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)
+    {
+        //
+    }
+}

app/Http/Controllers/ReportPaymentRecapsController.php

@@ -0,0 +1,12 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+
+class ReportPaymentRecapsController extends Controller
+{
+    public function index(Request $request){
+        return view('report-payment-recaps.index');
+    }
+}

app/Http/Controllers/ReportPbgPTSPController.php

@@ -0,0 +1,12 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+
+class ReportPbgPTSPController extends Controller
+{
+    public function index(Request $request){
+        return view('report-pbg-ptsp.index');
+    }
+}

app/Http/Controllers/RequestAssignment/PbgTaskController.php

@@ -5,15 +5,37 @@ namespace App\Http\Controllers\RequestAssignment;
 use App\Http\Controllers\Controller;
 use App\Models\PbgTask;
 use Illuminate\Http\Request;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Support\Facades\Auth;
 
 class PbgTaskController extends Controller
 {
     /**
      * Display a listing of the resource.
      */
-    public function index()
+    public function index(Request $request)
     {
-        return view('pbg_task.index');
+        $menuId = $request->query('menu_id');
+        $user = Auth::user();
+        $userId = $user->id;
+
+        // Ambil role_id yang dimiliki user
+        $roleIds = DB::table('user_role')
+            ->where('user_id', $userId)
+            ->pluck('role_id');
+
+        // Ambil data akses berdasarkan role_id dan menu_id
+        $roleAccess = DB::table('role_menu')
+            ->whereIn('role_id', $roleIds)
+            ->where('menu_id', $menuId)
+            ->first();
+
+        // Pastikan roleAccess tidak null sebelum mengakses properti
+        $creator = $roleAccess->allow_create ?? 0;
+        $updater = $roleAccess->allow_update ?? 0;
+        $destroyer = $roleAccess->allow_destroy ?? 0;
+
+        return view('pbg_task.index', compact('creator', 'updater', 'destroyer'));
     }
 
     /**
@@ -37,7 +59,7 @@ class PbgTaskController extends Controller
      */
     public function show(string $id)
     {
-        $data = PbgTask::with(['pbg_task_retributions','pbg_task_index_integrations', 'pbg_task_retributions.pbg_task_prasarana', 'taskAssignments'])->findOrFail($id);
+        $data = PbgTask::with(['pbg_task_retributions','pbg_task_index_integrations', 'pbg_task_retributions.pbg_task_prasarana'])->findOrFail($id);
         return view("pbg_task.show", compact("data"));
     }
 

app/Http/Controllers/RolesController.php

@@ -10,15 +10,36 @@ use Illuminate\Http\Request;
 use Illuminate\Support\Facades\DB;
 use Illuminate\Support\Facades\Log;
 use Illuminate\Support\Facades\Schema;
+use Illuminate\Support\Facades\Auth;
 
 class RolesController extends Controller
 {
     /**
      * Display a listing of the resource.
      */
-    public function index()
+    public function index(Request $request)
     {
-        return view("roles.index");
+        $menuId = $request->query('menu_id');
+        $user = Auth::user();
+        $userId = $user->id;
+
+        // Ambil role_id yang dimiliki user
+        $roleIds = DB::table('user_role')
+            ->where('user_id', $userId)
+            ->pluck('role_id');
+
+        // Ambil data akses berdasarkan role_id dan menu_id
+        $roleAccess = DB::table('role_menu')
+            ->whereIn('role_id', $roleIds)
+            ->where('menu_id', $menuId)
+            ->first();
+
+        // Pastikan roleAccess tidak null sebelum mengakses properti
+        $creator = $roleAccess->allow_create ?? 0;
+        $updater = $roleAccess->allow_update ?? 0;
+        $destroyer = $roleAccess->allow_destroy ?? 0;
+
+        return view("roles.index", compact('creator', 'updater', 'destroyer'));
     }
 
     /**

app/Http/Controllers/Settings/SyncronizeController.php

@@ -6,6 +6,8 @@ use App\Http\Controllers\Controller;
 use App\Services\ServiceSIMBG;
 use Illuminate\Http\Request;
 use Exception;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\DB;
 class SyncronizeController extends Controller
 {
     protected $service_simbg;
@@ -13,7 +15,27 @@ class SyncronizeController extends Controller
         $this->service_simbg = $service_simbg;
     }
     public function index(Request $request){
-        return view('settings.syncronize.index');
+        $menuId = $request->query('menu_id');
+        $user = Auth::user();
+        $userId = $user->id;
+
+        // Ambil role_id yang dimiliki user
+        $roleIds = DB::table('user_role')
+            ->where('user_id', $userId)
+            ->pluck('role_id');
+
+        // Ambil data akses berdasarkan role_id dan menu_id
+        $roleAccess = DB::table('role_menu')
+            ->whereIn('role_id', $roleIds)
+            ->where('menu_id', $menuId)
+            ->first();
+
+        // Pastikan roleAccess tidak null sebelum mengakses properti
+        $creator = $roleAccess->allow_create ?? 0;
+        $updater = $roleAccess->allow_update ?? 0;
+        $destroyer = $roleAccess->allow_destroy ?? 0;
+
+        return view('settings.syncronize.index', compact('creator', 'updater', 'destroyer'));
     }
 
     public function syncPbgTask(){

app/Http/Controllers/TpatptsController.php

@@ -0,0 +1,28 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+
+class TpatptsController extends Controller
+{
+    public function index()
+    {
+        return view('tpa-tpt.index');
+    }
+
+    public function create()
+    {
+        //
+    }
+
+    public function show(string $id)
+    {
+        //
+    }
+
+    public function edit(string $id)
+    {
+        //
+    }
+}

app/Http/Resources/PbgTaskGoogleSheetResource.php

@@ -0,0 +1,19 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+
+class PbgTaskGoogleSheetResource extends JsonResource
+{
+    /**
+     * Transform the resource into an array.
+     *
+     * @return array<string, mixed>
+     */
+    public function toArray(Request $request): array
+    {
+        return parent::toArray($request);
+    }
+}

app/Http/Resources/TaskAssignmentsResource.php

@@ -0,0 +1,19 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+
+class TaskAssignmentsResource extends JsonResource
+{
+    /**
+     * Transform the resource into an array.
+     *
+     * @return array<string, mixed>
+     */
+    public function toArray(Request $request): array
+    {
+        return parent::toArray($request);
+    }
+}

app/Jobs/SyncronizeSIMBG.php

@@ -22,7 +22,14 @@ class SyncronizeSIMBG implements ShouldQueue
 
     public function handle(): void
     {
-        $serviceSIMBG = app(ServiceSIMBG::class);
+        try {
-        $serviceSIMBG->syncTaskPBG();
+            $serviceSIMBG = app(ServiceSIMBG::class);
+            $serviceSIMBG->syncTaskPBG();
+        } catch (\Exception $e) {
+            \Log::error("SyncronizeSIMBG Job Failed: " . $e->getMessage(), [
+                'exception' => $e,
+            ]);
+            $this->fail($e); // Mark the job as failed
+        }
     }
 }

app/Models/RoleMenu.php

@@ -18,6 +18,13 @@ class RoleMenu extends Model
         'allow_destroy',
     ];
 
+    protected $casts = [
+        'allow_show' => 'boolean',
+        'allow_create' => 'boolean',
+        'allow_update' => 'boolean',
+        'allow_destroy' => 'boolean',
+    ];
+
     public $timestamps = true;
 
     public function role(){

app/Models/TaskAssignment.php

@@ -12,7 +12,7 @@ class TaskAssignment extends Model
     protected $fillable = [
         'user_id', 'name', 'username', 'email', 'phone_number', 'role',
         'role_name', 'is_active', 'file', 'expertise', 'experience',
-        'is_verif', 'uid', 'status', 'status_name', 'note', 'pbg_task_uid'
+        'is_verif', 'uid', 'status', 'status_name', 'note', 'pbg_task_uid', 'tas_id'
     ];
 
     protected $casts = [

app/Models/User.php

@@ -53,4 +53,11 @@ class User extends Authenticatable
     public function roles(){
         return $this->belongsToMany(Role::class, 'user_role')->withTimestamps();
     }
+
+    public function menus(){
+        return Menu::whereHas('roles', function ($query){
+            $query->whereIn('roles.id', $this->roles->pluck('id'))
+            ->where('role_menu.allow_show', true);
+        });
+    }
 }

app/Providers/AppServiceProvider.php

@@ -34,21 +34,24 @@ class AppServiceProvider extends ServiceProvider
     {
         Blade::component('circle', Circle::class);
 
-        View::composer('layouts.partials.sidebar', function ($view){
+        View::composer('layouts.partials.sidebar', function ($view) {
             $user = Auth::user();
 
-            if($user){
+            if ($user) {
-                $menus = Menu::whereHas('roles', function ($query) use ($user){
+                $menus = Menu::whereHas('roles', function ($query) use ($user) {
-                    $query->where('roles.id', $user->roles->pluck('id'));
+                        $query->whereIn('roles.id', $user->roles->pluck('id'))
-                })
+                            ->where('role_menu.allow_show', 1);
-                ->with(['children' => function ($query) {
+                    })
-                    $query->whereHas('roles', function ($subQuery) {
+                    ->with(['children' => function ($query) use ($user) {
-                        $subQuery->where('role_menu.allow_show', 1);
+                        $query->whereHas('roles', function ($subQuery) use ($user) {
-                    });
+                            $subQuery->whereIn('roles.id', $user->roles->pluck('id'))
-                }])
+                                    ->where('role_menu.allow_show', 1);
-                ->orderBy('sort_order', 'asc')
+                        });
-                ->get();
+                    }])
-            }else{
+                    ->whereNull('parent_id') // Ambil hanya menu utama
+                    ->orderBy('sort_order', 'asc')
+                    ->get();
+            } else {
                 $menus = collect();
             }
 

app/Providers/RouteServiceProvider.php

@@ -17,7 +17,7 @@ class RouteServiceProvider extends ServiceProvider
      *
      * @var string
      */
-    public const HOME = '/dashboards/bigdata';
+    public const HOME = '/home';
 
     /**
      * Define your route model bindings, pattern filters, and other route configuration.

app/Services/ServiceSIMBG.php

@@ -339,20 +339,12 @@ class ServiceSIMBG
                             $decodedResponse = json_decode($response->getContent(), true);
 
                             if (isset($decodedResponse['errors']['code']) && $decodedResponse['errors']['code'] === 'token_not_valid') {
-                                Log::warning("Token is invalid, refreshing token...");
-
-                                // Regenerate token
                                 $initResToken = $this->getToken();
 
-                                // Check if new token is valid
                                 if (!empty($initResToken->original['data']['token']['access'])) {
                                     $new_token = $initResToken->original['data']['token']['access'];
-
-                                    // **Fix: Update headers before retrying**
                                     $headers['Authorization'] = "Bearer " . $new_token;
-
+                                    continue;
-                                    Log::info("Token refreshed successfully, retrying API request...");
-                                    continue; // Retry with new token
                                 } else {
                                     Log::error("Failed to refresh token");
                                     return $this->resError("Failed to refresh token");
@@ -464,29 +456,21 @@ class ServiceSIMBG
                 'Authorization' => "Bearer " . $token,
             ];
 
-            for ($attempt = 0; $attempt < 2; $attempt++) { // Try twice (original + retry)
+            for ($attempt = 0; $attempt < 2; $attempt++) { 
                 $res = $this->service_client->get($url, $headers);
 
                 // Check if response is JsonResponse and decode it
                 if ($res instanceof \Illuminate\Http\JsonResponse) {
                     $decodedResponse = json_decode($res->getContent(), true);
 
-                    // Handle invalid token case
                     if (isset($decodedResponse['errors']['code']) && $decodedResponse['errors']['code'] === 'token_not_valid') {
-                        Log::warning("Token is invalid, refreshing token...");
-
-                        // Regenerate the token
                         $initResToken = $this->getToken();
 
-                        // Check if the new token is valid
                         if (!empty($initResToken->original['data']['token']['access'])) {
                             $new_token = $initResToken->original['data']['token']['access'];
 
-                            // **Fix: Update headers with the new token**
                             $headers['Authorization'] = "Bearer " . $new_token;
-
+                            continue; 
-                            Log::info("Token refreshed successfully, retrying API request...");
-                            continue; // Retry the request with the new token
                         } else {
                             Log::error("Failed to refresh token");
                             return $this->resError("Failed to refresh token");
@@ -494,7 +478,6 @@ class ServiceSIMBG
                     }
                 }
 
-                // If request succeeds, break out of retry loop
                 break;
             }
 
@@ -502,7 +485,6 @@ class ServiceSIMBG
             $responseData = $res->original ?? [];
             $data = $responseData['data']['data'] ?? [];
             if (empty($data)) {
-                Log::error("API response indicates failure", ['url' => $url, 'uuid' => $uuid, 'response' => $responseData]);
                 return false;
             }
     
@@ -583,7 +565,7 @@ class ServiceSIMBG
 
             foreach ($datas as $data) {
                 $task_assignments[] = [
-                    'pbg_task_uid' => $uuid, // Assuming this is a foreign key
+                    'pbg_task_uid' => $uuid,
                     'user_id' => $data['user_id'],
                     'name' => $data['name'],
                     'username' => $data['username'],
@@ -592,22 +574,23 @@ class ServiceSIMBG
                     'role' => $data['role'],
                     'role_name' => $data['role_name'],
                     'is_active' => $data['is_active'],
-                    'file' => json_encode($data['file']), // Store as JSON if it's an array
+                    'file' => !empty($data['file']) ? json_encode($data['file']) : null, 
-                    'expertise' => $data['expertise'],
+                    'expertise' => !empty($data['expertise']) ? json_encode($data['expertise']) : null,
-                    'experience' => $data['experience'],
+                    'experience' => !empty($data['experience']) ? json_encode($data['experience']) : null,
                     'is_verif' => $data['is_verif'],
-                    'uid' => $data['uid'], // Unique identifier
+                    'uid' => $data['uid'],
                     'status' => $data['status'],
                     'status_name' => $data['status_name'],
                     'note' => $data['note'],
+                    'ta_id' => $data['id'],
                     'created_at' => now(),
                     'updated_at' => now(),
                 ];
             }
             TaskAssignment::upsert(
-                $task_assignments, // Data to insert/update
+                $task_assignments,
-                ['uid'], // Unique key for conflict resolution
+                ['uid'], 
-                ['name', 'username', 'email', 'phone_number', 'role', 'role_name', 'is_active', 'file', 'expertise', 'experience', 'is_verif', 'status', 'status_name', 'note', 'updated_at']
+                ['ta_id','name', 'username', 'email', 'phone_number', 'role', 'role_name', 'is_active', 'file', 'expertise', 'experience', 'is_verif', 'status', 'status_name', 'note', 'updated_at']
             );
             return true;
         }catch(Exception $e){

config/database.php

@@ -79,6 +79,8 @@ return [
             'engine' => null,
             'options' => extension_loaded('pdo_mysql') ? array_filter([
                 PDO::MYSQL_ATTR_SSL_CA => env('MYSQL_ATTR_SSL_CA'),
+                PDO::ATTR_TIMEOUT => 40000,
+                PDO::MYSQL_ATTR_INIT_COMMAND => "SET SESSION wait_timeout=40000; SET SESSION interactive_timeout=40000;"
             ]) : [],
         ],
 

config/queue.php

@@ -112,7 +112,7 @@ return [
     // set timeout queue
 
     'worker' => [
-        'timeout' => 300
+        'timeout' => 40000
     ]
 
 ];

database/migrations/2025_03_07_105725_modify_expertise_experience_in_task_assignments.php

@@ -0,0 +1,32 @@
+<?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('task_assignments', function (Blueprint $table) {
+            $table->json('expertise')->nullable()->change();
+            $table->json('experience')->nullable()->change();
+            $table->bigInteger('ta_id')->nullable()->after('id');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('task_assignments', function (Blueprint $table) {
+            $table->text('expertise')->nullable()->change();
+            $table->text('experience')->nullable()->change();
+            $table->dropColumn('ta_id');
+        });
+    }
+};

database/seeders/UsersRoleMenuSeeder.php

@@ -81,7 +81,21 @@ class UsersRoleMenuSeeder extends Seeder
                 "icon" => "mingcute:wechat-line",
                 "parent_id" => null,
                 "sort_order" => 7,
-            ]
+            ],
+            [
+                "name" => "Approval",
+                "url" => "/approval",
+                "icon" => "mingcute:user-follow-2-line",
+                "parent_id" => null,
+                "sort_order" => 8,
+            ],
+            [
+                "name" => "Tools",
+                "url" => "/tools",
+                "icon" => "mingcute:tool-line",
+                "parent_id" => null,
+                "sort_order" => 9,
+            ],
         ];
 
         foreach ($parent_menus as $parent_menu) {
@@ -100,6 +114,8 @@ class UsersRoleMenuSeeder extends Seeder
         $data = Menu::where('name', 'Data')->first();
         $laporan = Menu::where('name', 'Laporan')->first();
         $chat_bedas = Menu::where('name', 'Neng Bedas')->first();
+        $approval = Menu::where('name', 'Approval')->first();
+        $tools = Menu::where('name', 'Tools')->first();
 
         // create children menu
         $children_menus = [
@@ -119,7 +135,7 @@ class UsersRoleMenuSeeder extends Seeder
             ],
             [
                 "name" => "Dashboard Potensi",
-                "url" => "dashboard.lack_of_potential",
+                "url" => null,
                 "icon" => null,
                 "parent_id" => $dashboard->id,
                 "sort_order" => 3,
@@ -138,6 +154,13 @@ class UsersRoleMenuSeeder extends Seeder
                 "parent_id" => $master->id,
                 "sort_order" => 1,
             ],
+            [
+                "name" => "Approval Pejabat",
+                "url" => "approval-list",
+                "icon" => null,
+                "parent_id" => $approval->id,
+                "sort_order" => 1,
+            ],
             [
                 "name" => "Syncronize",
                 "url" => "settings.syncronize",
@@ -215,6 +238,20 @@ class UsersRoleMenuSeeder extends Seeder
                 "parent_id" => $data->id,
                 "sort_order" => 7,
             ],
+            [
+                "name" => "Google Sheets",
+                "url" => "google-sheets",
+                "icon" => null,
+                "parent_id" => $data->id,
+                "sort_order" => 8,
+            ],
+            [
+                "name" => "TPA TPT",
+                "url" => "tpa-tpt",
+                "icon" => null,
+                "parent_id" => $data->id,
+                "sort_order" => 9,
+            ],
             [
                 "name" => "Lap Pariwisata",
                 "url" => "tourisms-report.index",
@@ -229,6 +266,27 @@ class UsersRoleMenuSeeder extends Seeder
                 "parent_id" => $laporan->id,
                 "sort_order" => 2,
             ],
+            [
+                "name" => "Rekap Pembayaran",
+                "url" => "payment-recaps",
+                "icon" => null,
+                "parent_id" => $laporan->id,
+                "sort_order" => 3,
+            ],
+            [
+                "name" => "Lap Rekap Data Pembayaran",
+                "url" => "report-payment-recap",
+                "icon" => null,
+                "parent_id" => $laporan->id,
+                "sort_order" => 4,
+            ],
+            [
+                "name" => "Lap PBG (PTSP)",
+                "url" => "report-pbg-ptsp",
+                "icon" => null,
+                "parent_id" => $laporan->id,
+                "sort_order" => 5,
+            ],
             [
                 "name" => "Chat",
                 "url" => "main-chatbot.index",
@@ -236,6 +294,27 @@ class UsersRoleMenuSeeder extends Seeder
                 "parent_id" => $chat_bedas->id,
                 "sort_order" => 1,
             ],
+            [
+                "name" => "Luar Sistem",
+                "url" => "dashboard.potentials.inside_system",
+                "icon" => null,
+                "parent_id" => Menu::where('name', 'Dashboard Potensi')->first()->id,
+                "sort_order" => 1,
+            ],
+            [
+                "name" => "Dalam Sistem",
+                "url" => "dashboard.potentials.outside_system",
+                "icon" => null,
+                "parent_id" => Menu::where('name', 'Dashboard Potensi')->first()->id,
+                "sort_order" => 2,
+            ],
+            [
+                "name" => "Undangan",
+                "url" => "invitations",
+                "icon" => null,
+                "parent_id" => $tools->id,
+                "sort_order" => 1,
+            ],
         ];
 
         foreach ($children_menus as $child_menu) {
@@ -261,6 +340,15 @@ class UsersRoleMenuSeeder extends Seeder
         $peta = Menu::where('name', 'PETA')->first();
         $bigdata_resume = Menu::where('name', 'Lap Pimpinan')->first();
         $chatbot = Menu::where('name', 'Chat')->first();
+        $dalam_sistem = Menu::where('name', 'Dalam Sistem')->first();
+        $luar_sistem = Menu::where('name', 'Luar Sistem')->first();
+        $google_sheets = Menu::where('name', 'Google Sheets')->first();
+        $tpa_tpt = Menu::where('name', 'TPA TPT')->first();
+        $approval_pejabat = Menu::where('name', 'Approval Pejabat')->first();
+        $intivations = Menu::where('name', 'Undangan')->first();
+        $payment_recap = Menu::where('name', 'Rekap Pembayaran')->first();
+        $report_payment_recap = Menu::where('name', 'Lap Rekap Data Pembayaran')->first();
+        $report_pbg_ptsp = Menu::where('name', 'Lap PBG (PTSP)')->first();
 
         // Superadmin gets all menus
         $superadmin->menus()->sync([
@@ -272,6 +360,8 @@ class UsersRoleMenuSeeder extends Seeder
             $data->id => ["allow_show" => true, "allow_create" => false, "allow_update" => false, "allow_destroy" => false],
             $laporan->id => ["allow_show" => true, "allow_create" => false, "allow_update" => false, "allow_destroy" => false],
             $chat_bedas->id => ["allow_show" => true, "allow_create" => false, "allow_update" => false, "allow_destroy" => false],
+            $approval->id => ["allow_show" => true, "allow_create" => false, "allow_update" => false, "allow_destroy" => false],
+            $tools->id => ["allow_show" => true, "allow_create" => false, "allow_update" => false, "allow_destroy" => false],
             // children
             $dashboard_pimpinan->id => ["allow_show" => true, "allow_create" => true, "allow_update" => true, "allow_destroy" => true],
             $dashboard_pbg->id => ["allow_show" => true, "allow_create" => true, "allow_update" => true, "allow_destroy" => true],
@@ -289,9 +379,18 @@ 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],
+            // $peta->id => ["allow_show" => true, "allow_create" => true, "allow_update" => true, "allow_destroy" => true],
+            $dalam_sistem->id => ["allow_show" => true, "allow_create" => true, "allow_update" => true, "allow_destroy" => true],
+            $luar_sistem->id => ["allow_show" => true, "allow_create" => true, "allow_update" => true, "allow_destroy" => true],
             $bigdata_resume->id => ["allow_show" => true, "allow_create" => true, "allow_update" => true, "allow_destroy" => true],
             $chatbot->id => ["allow_show" => true, "allow_create" => true, "allow_update" => true, "allow_destroy" => true],
+            $google_sheets->id => ["allow_show" => true, "allow_create" => true, "allow_update" => true, "allow_destroy" => true],
+            $tpa_tpt->id => ["allow_show" => true, "allow_create" => true, "allow_update" => true, "allow_destroy" => true],
+            $approval_pejabat->id => ["allow_show" => true, "allow_create" => true, "allow_update" => true, "allow_destroy" => true],
+            $intivations->id => ["allow_show" => true, "allow_create" => true, "allow_update" => true, "allow_destroy" => true],
+            $payment_recap->id => ["allow_show" => true, "allow_create" => true, "allow_update" => true, "allow_destroy" => true],
+            $report_payment_recap->id => ["allow_show" => true, "allow_create" => true, "allow_update" => true, "allow_destroy" => true],
+            $report_pbg_ptsp->id => ["allow_show" => true, "allow_create" => true, "allow_update" => true, "allow_destroy" => true],
         ]);
 
         // Admin gets limited menus

resources/js/app.js

@@ -2,30 +2,6 @@ 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() {
@@ -131,7 +107,6 @@ class FormValidation {
 }
 document.addEventListener("DOMContentLoaded", function (e) {
     new Components().init(), new FormValidation().init();
-    // new InitDatePicker().init();
 });
 class ThemeLayout {
     constructor() {

resources/js/approval/index.js

@@ -0,0 +1,90 @@
+import { Grid } from "gridjs/dist/gridjs.umd.js";
+import "gridjs/dist/gridjs.umd.js";
+import gridjs from "gridjs/dist/gridjs.umd.js";
+import GlobalConfig from "../global-config";
+
+class Approval {
+    constructor() {
+        this.toastMessage = document.getElementById("toast-message");
+        this.toastElement = document.getElementById("toastNotification");
+        this.toast = new bootstrap.Toast(this.toastElement);
+        this.table = null;
+        this.initTableApproval();
+    }
+    initTableApproval() {
+        let tableContainer = document.getElementById("table-approvals");
+        this.table = new Grid({
+            columns: [
+                "ID",
+                { name: "Name", width: "15%" },
+                { name: "Condition", width: "7%" },
+                "Registration Number",
+                "Document Number",
+                { name: "Address", width: "30%" },
+                "Status",
+                "Function Type",
+                "Consultation Type",
+                { name: "Due Date", width: "10%" },
+                {
+                    name: "Action",
+                    formatter: (cell) => {
+                        return gridjs.html(`
+                                <div class="d-flex justify-content-center align-items-center gap-2">
+                                  <button class="btn btn-sm btn-success approve-btn" data-id="${cell}">
+                                    Approve
+                                  </button>
+                                  <button class="btn btn-sm btn-danger reject-btn" data-id="${cell}">
+                                    Reject
+                                  </button>
+                                </div>
+                            `);
+                    },
+                },
+            ],
+            search: {
+                server: {
+                    url: (prev, keyword) => `${prev}?search=${keyword}`,
+                },
+                debounceTimeout: 1000,
+            },
+            pagination: {
+                limit: 15,
+                server: {
+                    url: (prev, page) =>
+                        `${prev}${prev.includes("?") ? "&" : "?"}page=${
+                            page + 1
+                        }`,
+                },
+            },
+            sort: true,
+            server: {
+                url: `${GlobalConfig.apiHost}/api/request-assignments`,
+                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.condition,
+                        item.registration_number,
+                        item.document_number,
+                        item.address,
+                        item.status_name,
+                        item.function_type,
+                        item.consultation_type,
+                        item.due_date,
+                        item.id,
+                    ]),
+                total: (data) => data.meta.total,
+            },
+        }).render(tableContainer);
+    }
+}
+document.addEventListener("DOMContentLoaded", function (e) {
+    new Approval();
+});

resources/js/bigdata-resumes/index.js

@@ -2,7 +2,6 @@ import { Grid } from "gridjs/dist/gridjs.umd.js";
 import gridjs from "gridjs/dist/gridjs.umd.js";
 import "gridjs/dist/gridjs.umd.js";
 import GlobalConfig, { addThousandSeparators } from "../global-config.js";
-import Swal from "sweetalert2";
 import moment from "moment";
 
 class BigdataResume {
@@ -13,23 +12,16 @@ class BigdataResume {
         this.table = null;
 
         // Initialize functions
-        this.initTableDataSettings();
+        this.initEvents();
-        // this.initEvents();
     }
-    initEvents() {
+    async initEvents() {
-        document.body.addEventListener("click", async (event) => {
+        await this.initBigdataResumeTable();
-            const deleteButton = event.target.closest(
+        // this.handleSearch();
-                ".btn-delete-data-settings"
-            );
-            if (deleteButton) {
-                event.preventDefault();
-                await this.handleDelete(deleteButton);
-            }
-        });
     }
 
-    initTableDataSettings() {
+    async initBigdataResumeTable() {
         let tableContainer = document.getElementById("table-bigdata-resumes");
+
         this.table = new Grid({
             columns: [
                 { name: "ID" },
@@ -53,7 +45,9 @@ class BigdataResume {
                 { name: "Total Proses Dinas Teknis" },
                 {
                     name: "Created",
-                    attributes: { style: "width: 200px; white-space: nowrap;" }, // Set width dynamically
+                    attributes: {
+                        style: "width: 200px; white-space: nowrap;",
+                    },
                 },
             ],
             pagination: {
@@ -66,11 +60,12 @@ class BigdataResume {
                 },
             },
             sort: true,
-            // search: {
+            search: {
-            //     server: {
+                server: {
-            //         url: (prev, keyword) => `${prev}?search=${keyword}`,
+                    url: (prev, keyword) => `${prev}?search=${keyword}`,
-            //     },
+                },
-            // },
+                debounceTimeout: 1000,
+            },
             server: {
                 url: `${GlobalConfig.apiHost}/api/bigdata-report`,
                 headers: {
@@ -110,61 +105,72 @@ class BigdataResume {
                 total: (data) => data.total,
             },
             width: "auto",
-        }).render(tableContainer);
+            fixedHeader: true,
-    }
-    handleSearch() {}
-    async handleDelete(deleteButton) {
-        const id = deleteButton.getAttribute("data-id");
-
-        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 (result.isConfirmed) {
+        return new Promise((resolve) => {
-            try {
+            this.table.render(tableContainer);
-                let response = await fetch(
+            this.table.on("ready", resolve); // Tunggu event "ready"
-                    `${GlobalConfig.apiHost}/api/data-settings/${id}`,
+        });
-                    {
+    }
-                        method: "DELETE",
+
-                        credentials: "include",
+    handleSearch() {
+        document.getElementById("search-btn").addEventListener("click", () => {
+            let searchValue = document.getElementById("search-box").value;
+
+            if (!this.table) {
+                // Ensure table is initialized
+                console.error("Table element not found!");
+                return;
+            }
+
+            this.table
+                .updateConfig({
+                    server: {
+                        url: `${GlobalConfig.apiHost}/api/bigdata-report?search=${searchValue}`,
                         headers: {
                             Authorization: `Bearer ${document
                                 .querySelector('meta[name="api-token"]')
                                 .getAttribute("content")}`,
                             "Content-Type": "application/json",
                         },
-                    }
+                        then: (data) => {
-                );
+                            return data.data.map((item) => [
-
+                                item.id,
-                if (response.ok) {
+                                item.potention_count,
-                    let result = await response.json();
+                                addThousandSeparators(item.potention_sum),
-                    this.toastMessage.innerText =
+                                item.non_verified_count,
-                        result.message || "Deleted successfully!";
+                                addThousandSeparators(item.non_verified_sum),
-                    this.toast.show();
+                                item.verified_count,
-
+                                addThousandSeparators(item.verified_sum),
-                    // Refresh Grid.js table
+                                item.business_count,
-                    if (typeof this.table !== "undefined") {
+                                addThousandSeparators(item.business_sum),
-                        this.table.updateConfig({}).forceRender();
+                                item.non_business_count,
-                    }
+                                addThousandSeparators(item.non_business_sum),
-                } else {
+                                item.spatial_count,
-                    let error = await response.json();
+                                addThousandSeparators(item.spatial_sum),
-                    console.error("Delete failed:", error);
+                                item.waiting_click_dpmptsp_count,
-                    this.toastMessage.innerText =
+                                addThousandSeparators(
-                        error.message || "Delete failed!";
+                                    item.waiting_click_dpmptsp_sum
-                    this.toast.show();
+                                ),
-                }
+                                item.issuance_realization_pbg_count,
-            } catch (error) {
+                                addThousandSeparators(
-                console.error("Error deleting item:", error);
+                                    item.issuance_realization_pbg_sum
-                this.toastMessage.innerText = "An error occurred!";
+                                ),
-                this.toast.show();
+                                item.process_in_technical_office_count,
-            }
+                                addThousandSeparators(
-        }
+                                    item.process_in_technical_office_sum
+                                ),
+                                moment(item.created_at).format(
+                                    "YYYY-MM-DD H:mm:ss"
+                                ),
+                            ]);
+                        },
+                        total: (data) => data.total,
+                    },
+                })
+                .forceRender();
+        });
     }
 }
 document.addEventListener("DOMContentLoaded", function (e) {

resources/js/business-industries/index.js

@@ -31,6 +31,11 @@ class BusinessIndustries {
         let tableContainer = document.getElementById(
             "table-business-industries"
         );
+
+        tableContainer.innerHTML = "";
+        let canUpdate = tableContainer.getAttribute("data-updater") === "1";
+        let canDelete = tableContainer.getAttribute("data-destroyer") === "1";
+        
         // Create a new Grid.js instance only if it doesn't exist
         this.table = new Grid({
             columns: [
@@ -50,17 +55,30 @@ class BusinessIndustries {
                 { name: "Created", width: "180px" },
                 {
                     name: "Action",
-                    formatter: (cell) =>
+                    formatter: (cell) => {
-                        gridjs.html(`
+                        
-                                          <div class="d-flex justify-content-center gap-2">
+                        let buttons = `<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>
+                        if (canUpdate) {
-                                              </a>
+                            buttons += `
-                                              <button data-id="${cell}" class="btn btn-sm btn-red btn-delete-business-industry d-inline-flex align-items-center justify-content-center">
+                                <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 bxs-trash' ></i>
+                                    <i class='bx bx-edit'></i>
-                                              </button>
+                                </a>
-                                          </div>
+                            `;
-                                      `),
+                        }
+                
+                        if (canDelete) {
+                            buttons += `
+                                <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>
+                            `;
+                        }
+                
+                        buttons += `</div>`;
+                
+                        return gridjs.html(buttons);
+                    },
                 },
             ],
             pagination: {
@@ -77,6 +95,7 @@ class BusinessIndustries {
                 server: {
                     url: (prev, keyword) => `${prev}?search=${keyword}`,
                 },
+                debounceTimeout: 1000,
             },
             server: {
                 url: `${GlobalConfig.apiHost}/api/api-business-industries`,

resources/js/customers/index.js

@@ -28,6 +28,10 @@ class Customers {
     initTableCustomers() {
         let tableContainer = document.getElementById("table-customers");
         // Create a new Grid.js instance only if it doesn't exist
+
+        tableContainer.innerHTML = "";
+        let canUpdate = tableContainer.getAttribute("data-updater") === "1";
+        let canDelete = tableContainer.getAttribute("data-destroyer") === "1";
         this.table = new Grid({
             columns: [
                 "ID",
@@ -39,17 +43,31 @@ class Customers {
                 "Longitude",
                 {
                     name: "Action",
-                    formatter: (cell) =>
+                    formatter: (cell) => {
-                        gridjs.html(`
+                        let buttons = "";
-                                  <div class="d-flex justify-content-center gap-2">
+        
-                                      <a href="/data/customers/${cell}/edit" class="btn btn-yellow btn-sm d-inline-flex align-items-center justify-content-center">
+                        if (canUpdate) {
-                                          <i class='bx bx-edit'></i>
+                            buttons += `
-                                      </a>
+                                <a href="/data/customers/${cell}/edit" class="btn btn-yellow btn-sm d-inline-flex align-items-center justify-content-center">
-                                      <button data-id="${cell}" class="btn btn-sm btn-red btn-delete-customers d-inline-flex align-items-center justify-content-center">
+                                    <i class='bx bx-edit'></i>
-                                          <i class='bx bxs-trash' ></i>
+                                </a>
-                                      </button>
+                            `;
-                                  </div>
+                        }
-                              `),
+        
+                        if (canDelete) {
+                            buttons += `
+                                <button data-id="${cell}" class="btn btn-sm btn-red btn-delete-customers d-inline-flex align-items-center justify-content-center">
+                                    <i class='bx bxs-trash'></i>
+                                </button>
+                            `;
+                        }
+        
+                        if (!canUpdate && !canDelete) {
+                            buttons = `<span class="text-muted">No Privilege</span>`;
+                        }
+        
+                        return gridjs.html(`<div class="d-flex justify-content-center gap-2">${buttons}</div>`);
+                    },
                 },
             ],
             pagination: {
@@ -66,6 +84,7 @@ class Customers {
                 server: {
                     url: (prev, keyword) => `${prev}?search=${keyword}`,
                 },
+                debounceTimeout: 1000,
             },
             server: {
                 url: `${GlobalConfig.apiHost}/api/customers`,
@@ -91,6 +110,8 @@ class Customers {
         }).render(tableContainer);
     }
 
+    handleSearch() {}
+
     async handleDelete(deleteButton) {
         const id = deleteButton.getAttribute("data-id");
 

resources/js/dashboards/potentials/inside_system.js

@@ -0,0 +1,194 @@
+import Big from "big.js";
+import GlobalConfig, { addThousandSeparators } from "../../global-config.js";
+import InitDatePicker from "../../utils/InitDatePicker.js";
+
+class DashboardPotentialInsideSystem {
+    async init() {
+        new InitDatePicker(
+            "#datepicker-lack-of-potential",
+            this.handleChangedDate.bind(this)
+        ).init();
+        this.bigTotalLackPotential = 0;
+        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;
+
+        let dataReportTourism = this.allCountData.data_report;
+
+        this.totalVilla = dataReportTourism
+            .filter((item) => item.kbli_title.toLowerCase() === "vila")
+            .reduce((sum, item) => sum + item.total_records, 0);
+        this.totalRestoran = dataReportTourism
+            .filter((item) => item.kbli_title.toLowerCase() === "restoran")
+            .reduce((sum, item) => sum + item.total_records, 0);
+        this.totalPariwisata = dataReportTourism.reduce(
+            (sum, item) => sum + item.total_records,
+            0
+        );
+
+        this.bigTargetPAD = new Big(this.totalTargetPAD ?? 0);
+        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(filterDate) {
+        try {
+            const response = await fetch(
+                `${GlobalConfig.apiHost}/api/bigdata-resume?filterByDate=${filterDate}`,
+                {
+                    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 {
+                total: data.total_potensi.sum,
+            };
+        } catch (error) {
+            console.error("Error fetching chart data:", error);
+            return null;
+        }
+    }
+    async getDataSettings(string_key) {
+        try {
+            const response = await fetch(
+                `${GlobalConfig.apiHost}/api/data-settings?search=${string_key}`,
+                {
+                    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.data[0].value;
+        } catch (error) {
+            console.error("Error fetching chart data:", error);
+            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")
+            .forEach((element) => {
+                element.innerText = ``;
+            });
+        document
+            .querySelectorAll(".document-total.chart-lack-of-potential")
+            .forEach((element) => {
+                element.innerText = `Rp.${addThousandSeparators(
+                    this.bigTotalLackPotential.toString()
+                )}`;
+            });
+        document
+            .querySelectorAll(".small-percentage.chart-lack-of-potential")
+            .forEach((element) => {
+                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.getElementById("tata-ruang-count").innerText =
+            this.tataRuangCount;
+        document.getElementById("tata-ruang-usaha-count").innerText =
+            this.tataRuangCount;
+        document.getElementById("restoran-count").innerText =
+            this.totalRestoran;
+        document.getElementById("villa-count").innerText = this.totalVilla;
+        document.getElementById("pariwisata-count").innerText =
+            this.totalPariwisata;
+    }
+}
+document.addEventListener("DOMContentLoaded", async function (e) {
+    await new DashboardPotentialInsideSystem().init();
+});
+
+function resizeDashboard() {
+    let targetElement = document.getElementById("lack-of-potential-wrapper");
+    let dashboardElement = document.getElementById(
+        "lack-of-potential-fixed-container"
+    );
+
+    let targetWidth = targetElement.offsetWidth;
+    let dashboardWidth = 1400;
+
+    let scaleFactor = (targetWidth / dashboardWidth).toFixed(2);
+
+    // Prevent scaling beyond 1 (100%) to avoid overflow
+    scaleFactor = Math.min(scaleFactor, 1);
+
+    dashboardElement.style.transformOrigin = "left top";
+    dashboardElement.style.transition = "transform 0.2s ease-in-out";
+    dashboardElement.style.transform = `scale(${scaleFactor})`;
+
+    // Ensure horizontal scrolling is allowed if necessary
+    document.body.style.overflowX = "auto";
+}
+
+window.addEventListener("load", resizeDashboard);
+window.addEventListener("resize", resizeDashboard);

resources/js/dashboards/potentials/outside_system.js

@@ -0,0 +1,121 @@
+import InitDatePicker from "../../utils/InitDatePicker.js";
+import GlobalConfig, { addThousandSeparators } from "../../global-config.js";
+
+class DashboardPotentialOutsideSystem {
+    async init() {
+        new InitDatePicker(
+            "#datepicker-outside-system",
+            this.handleChangedDate.bind(this)
+        ).init();
+        this.bigTotalLackPotential = 0;
+        this.dataResume = await this.getBigDataResume("latest");
+        console.log(this.dataResume);
+        this.initChartNonBusiness();
+        this.initChartBusiness();
+    }
+    async handleChangedDate(filterDate) {
+        this.dataResume = await this.getBigDataResume(filterDate);
+        this.initChartNonBusiness();
+        this.initChartBusiness();
+    }
+    async getBigDataResume(filterDate) {
+        try {
+            const response = await fetch(
+                `${GlobalConfig.apiHost}/api/bigdata-resume?filterByDate=${filterDate}`,
+                {
+                    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);
+            }
+
+            return await response.json();
+        } catch (error) {
+            console.error("Error fetching chart data:", error);
+            return null;
+        }
+    }
+
+    initChartNonBusiness() {
+        const nonBusinessDoc = this.dataResume?.non_business_document ?? {};
+
+        document
+            .querySelectorAll(".document-count.outside-system-non-business")
+            .forEach((element) => {
+                element.innerText = `${nonBusinessDoc.count ?? 0}`;
+            });
+
+        document
+            .querySelectorAll(".document-total.outside-system-non-business")
+            .forEach((element) => {
+                element.innerText = `Rp.${addThousandSeparators(
+                    (nonBusinessDoc.sum ?? 0).toString()
+                )}`;
+            });
+
+        document
+            .querySelectorAll(".small-percentage.outside-system-non-business")
+            .forEach((element) => {
+                element.innerText = `${nonBusinessDoc.percentage ?? 0}%`;
+            });
+    }
+    initChartBusiness() {
+        const businessDoc = this.dataResume?.business_document ?? {};
+
+        document
+            .querySelectorAll(".document-count.outside-system-business")
+            .forEach((element) => {
+                element.innerText = `${businessDoc.count ?? 0}`;
+            });
+
+        document
+            .querySelectorAll(".document-total.outside-system-business")
+            .forEach((element) => {
+                element.innerText = `Rp.${addThousandSeparators(
+                    (businessDoc.sum ?? 0).toString()
+                )}`;
+            });
+
+        document
+            .querySelectorAll(".small-percentage.outside-system-business")
+            .forEach((element) => {
+                element.innerText = `${businessDoc.percentage ?? 0}%`;
+            });
+    }
+}
+document.addEventListener("DOMContentLoaded", async function (e) {
+    await new DashboardPotentialOutsideSystem().init();
+});
+function resizeDashboard() {
+    let targetElement = document.getElementById("outside-system-wrapper");
+    let dashboardElement = document.getElementById(
+        "outside-system-fixed-container"
+    );
+
+    let targetWidth = targetElement.offsetWidth;
+    let dashboardWidth = 1400;
+
+    let scaleFactor = (targetWidth / dashboardWidth).toFixed(2);
+
+    // Prevent scaling beyond 1 (100%) to avoid overflow
+    scaleFactor = Math.min(scaleFactor, 1);
+
+    dashboardElement.style.transformOrigin = "left top";
+    dashboardElement.style.transition = "transform 0.2s ease-in-out";
+    dashboardElement.style.transform = `scale(${scaleFactor})`;
+
+    // Ensure horizontal scrolling is allowed if necessary
+    document.body.style.overflowX = "auto";
+}
+
+window.addEventListener("load", resizeDashboard);
+window.addEventListener("resize", resizeDashboard);

resources/js/data-settings/index.js

@@ -29,6 +29,10 @@ class DataSettings {
 
     initTableDataSettings() {
         let tableContainer = document.getElementById("table-data-settings");
+
+        tableContainer.innerHTML = "";
+        let canUpdate = tableContainer.getAttribute("data-updater") === "1";
+        let canDelete = tableContainer.getAttribute("data-destroyer") === "1"
         // Create a new Grid.js instance only if it doesn't exist
         this.table = new Grid({
             columns: [
@@ -40,16 +44,29 @@ class DataSettings {
                     name: "Actions",
                     width: "120px",
                     formatter: function (cell) {
-                        return gridjs.html(`
+                        let buttons = "";
-                            <div class="d-flex justify-content-center gap-2">
+        
+                        if (canUpdate) {
+                            buttons += `
                                 <a href="/data-settings/${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-data-settings" data-id="${cell}">
+                            `;
-                                    <i class='bx bxs-trash' ></i>
+                        }
+        
+                        if (canDelete) {
+                            buttons += `
+                                <button class="btn btn-sm btn-red d-inline-flex align-items-center justify-content-center btn-delete-data-settings" data-id="${cell}">
+                                    <i class='bx bxs-trash'></i>
                                 </button>
-                            </div>
+                            `;
-                        `);
+                        }
+        
+                        if (!canUpdate && !canDelete) {
+                            buttons = `<span class="text-muted">No Privilege</span>`;
+                        }
+        
+                        return gridjs.html(`<div class="d-flex justify-content-center gap-2">${buttons}</div>`);
                     },
                 },
             ],
@@ -67,6 +84,7 @@ class DataSettings {
                 server: {
                     url: (prev, keyword) => `${prev}?search=${keyword}`,
                 },
+                debounceTimeout: 1000,
             },
             server: {
                 url: `${GlobalConfig.apiHost}/api/data-settings`,

resources/js/data/advertisements/data-advertisements.js

@@ -4,6 +4,11 @@ import "gridjs/dist/gridjs.umd.js";
 import GlobalConfig from "../../global-config.js";
 import GeneralTable from "../../table-generator.js";
 
+// Ambil hak akses dari data-attribute
+const tableElement = document.getElementById("reklame-data-table");
+const canUpdate = tableElement.getAttribute("data-updater") === "1";
+const canDelete = tableElement.getAttribute("data-destroyer") === "1";
+
 const dataAdvertisementsColumns = [
     "No",
     "Nama Wajib Pajak",
@@ -17,21 +22,39 @@ const dataAdvertisementsColumns = [
     "Kontak",
     {
         name: "Actions",
-        widht: "120px",
+        width: "120px",
         formatter: function(cell, row) {
             const id = row.cells[10].data;
             const model = "data/advertisements";
-            return gridjs.html(`
+            
-                <div class="d-flex justify-items-end gap-10">
+            let actionButtons = '<div class="d-flex justify-items-end gap-10">';
+            let hasPrivilege = false;
+    
+            // Tampilkan tombol Edit jika user punya akses update
+            if (canUpdate) {
+                hasPrivilege = true;
+                actionButtons += `
                     <button class="btn btn-warning me-2 btn-edit" 
                         data-id="${id}" 
                         data-model="${model}">
-                        <i class='bx bx-edit' ></i></button>
+                        <i class='bx bx-edit'></i>
+                    </button>`;
+            }
+    
+            // Tampilkan tombol Delete jika user punya akses delete
+            if (canDelete) {
+                hasPrivilege = true;
+                actionButtons += `
                     <button class="btn btn-red btn-delete" 
-                            data-id="${id}">
+                        data-id="${id}">
-                            <i class='bx bxs-trash' ></i></button>
+                        <i class='bx bxs-trash'></i>
-                </div>
+                    </button>`;
-            `);
+            }
+    
+            actionButtons += '</div>';
+    
+            // Jika tidak memiliki akses, tampilkan teks "No Privilege"
+            return gridjs.html(hasPrivilege ? actionButtons : '<span class="text-muted">No Privilege</span>');
         }
     }
 ];

resources/js/data/google-sheet/index.js

@@ -0,0 +1,211 @@
+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";
+
+class GoogleSheets {
+    constructor() {
+        this.toastMessage = document.getElementById("toast-message");
+        this.toastElement = document.getElementById("toastNotification");
+        this.toast = new bootstrap.Toast(this.toastElement);
+        this.table = null;
+
+        // Initialize functions
+        this.initTableGoogleSheets();
+        this.initEvents();
+    }
+
+    initEvents() {
+        document.body.addEventListener("click", async (event) => {
+            const deleteButton = event.target.closest(
+                ".btn-delete-google-sheet"
+            );
+            if (deleteButton) {
+                event.preventDefault();
+                await this.handleDelete(deleteButton);
+            }
+        });
+    }
+
+    initTableGoogleSheets() {
+        let tableContainer = document.getElementById(
+            "table-data-google-sheets"
+        );
+
+        if (!tableContainer) {
+            console.error("Table container not found!");
+            return;
+        }
+
+        // Clear previous table content
+        tableContainer.innerHTML = "";
+
+        // Get user permissions from data attributes
+        let canUpdate = tableContainer.getAttribute("data-updater") === "1";
+        let canDelete = tableContainer.getAttribute("data-destroyer") === "1";
+
+        this.table = new Grid({
+            columns: [
+                "ID",
+                "No Registratsi",
+                "No KRK",
+                "Format STS",
+                "Fungsi BG",
+                "Selesai Terbit",
+                "Selesai Verifikasi",
+                "Tanggal Permohonan",
+                {
+                    name: "Action",
+                    formatter: (cell) => {
+                        let buttons = "";
+
+                        buttons += `
+                          <a href="/data/google-sheets/${cell}" class="btn btn-primary btn-sm d-inline-flex align-items-center justify-content-center">
+                            <i class='bx bx-show'></i>
+                          </a>
+                        `;
+
+                        if (canUpdate) {
+                            buttons += `
+                            <a href="#" class="btn btn-yellow btn-sm d-inline-flex align-items-center justify-content-center">
+                                <i class='bx bx-edit'></i>
+                            </a>
+                        `;
+                        }
+
+                        if (canDelete) {
+                            buttons += `
+                            <button data-id="${cell}" class="btn btn-sm btn-red btn-delete-google-sheet d-inline-flex align-items-center justify-content-center">
+                                <i class='bx bxs-trash'></i>
+                            </button>
+                        `;
+                        }
+
+                        if (!canUpdate && !canDelete) {
+                            buttons = `<span class="text-muted">No Privilege</span>`;
+                        }
+
+                        return gridjs.html(
+                            `<div class="d-flex justify-content-center gap-2">${buttons}</div>`
+                        );
+                    },
+                },
+            ],
+            pagination: {
+                limit: 50,
+                server: {
+                    url: (prev, page) => {
+                        let separator = prev.includes("?") ? "&" : "?";
+                        return `${prev}${separator}page=${page + 1}`;
+                    },
+                },
+            },
+            sort: true,
+            search: {
+                server: {
+                    url: (prev, keyword) => {
+                        let separator = prev.includes("?") ? "&" : "?";
+                        return `${prev}${separator}search=${encodeURIComponent(
+                            keyword
+                        )}`;
+                    },
+                },
+                debounceTimeout: 1000,
+            },
+            server: {
+                url: `${GlobalConfig.apiHost}/api/pbg-task-google-sheet`,
+                headers: {
+                    Authorization: `Bearer ${document
+                        .querySelector('meta[name="api-token"]')
+                        .getAttribute("content")}`,
+                    "Content-Type": "application/json",
+                },
+                then: (data) => {
+                    if (!data || !data.data) {
+                        console.warn("⚠️ No data received from API");
+                        return [];
+                    }
+
+                    return data.data.map((item) => {
+                        console.log("🔹 Processing Item:", item);
+                        return [
+                            item.id,
+                            item.no_registrasi,
+                            item.no_krk,
+                            item.format_sts,
+                            item.fungsi_bg,
+                            item.selesai_terbit,
+                            item.selesai_verifikasi,
+                            item.tgl_permohonan,
+                            item.id,
+                        ];
+                    });
+                },
+                total: (data) => {
+                    let totalRecords = data?.meta?.total || 0;
+                    return totalRecords;
+                },
+                catch: (error) => {
+                    console.error("❌ Error fetching data:", error);
+                },
+            },
+        }).render(tableContainer);
+    }
+
+    async handleDelete(deleteButton) {
+        const id = deleteButton.getAttribute("data-id");
+
+        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 (result.isConfirmed) {
+            try {
+                let response = await fetch(
+                    `${GlobalConfig.apiHost}/api/pbg-task-google-sheet/${id}`,
+                    {
+                        method: "DELETE",
+                        credentials: "include",
+                        headers: {
+                            Authorization: `Bearer ${document
+                                .querySelector('meta[name="api-token"]')
+                                .getAttribute("content")}`,
+                            "Content-Type": "application/json",
+                        },
+                    }
+                );
+
+                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 GoogleSheets();
+});

resources/js/data/spatialPlannings/data-spatialPlannings.js

@@ -4,6 +4,11 @@ import "gridjs/dist/gridjs.umd.js";
 import GlobalConfig from "../../global-config.js";
 import GeneralTable from "../../table-generator.js";
 
+// Ambil hak akses dari data-attribute
+const tableElement = document.getElementById("spatial-planning-data-table");
+const canUpdate = tableElement.getAttribute("data-updater") === "1";
+const canDelete = tableElement.getAttribute("data-destroyer") === "1";
+
 const dataSpatialPlanningColumns = [
     "No",
     "Nama",
@@ -19,18 +24,35 @@ const dataSpatialPlanningColumns = [
         formatter: function (cell, row) {
             const id = row.cells[8].data;
             const model = "data/spatial-plannings";
-            return gridjs.html(`
+
-                <div class="d-flex justify-items-end gap-10">
+            let actionButtons = '<div class="d-flex justify-items-end gap-10">';
+            let hasPrivilege = false;
+
+            // Tampilkan tombol Edit jika user punya akses update
+            if (canUpdate) {
+                hasPrivilege = true;
+                actionButtons += `
                     <button class="btn btn-warning me-2 btn-edit" 
                         data-id="${id}" 
                         data-model="${model}">
-                        <i class='bx bx-edit'></i></button>
+                        <i class='bx bx-edit'></i>
+                    </button>`;
+            }
 
+            // Tampilkan tombol Delete jika user punya akses delete
+            if (canDelete) {
+                hasPrivilege = true;
+                actionButtons += `
                     <button class="btn btn-red btn-delete" 
                         data-id="${id}">
-                        <i class='bx bxs-trash'></i></button>
+                        <i class='bx bxs-trash'></i>
-                </div>
+                    </button>`;
-            `);
+            }
+
+            actionButtons += '</div>';
+
+            // Jika tidak memiliki akses, tampilkan teks "No Privilege"
+            return gridjs.html(hasPrivilege ? actionButtons : '<span class="text-muted">No Privilege</span>');
         },
     },
 ];

resources/js/data/tourisms/data-tourisms.js

@@ -3,6 +3,14 @@ import gridjs from "gridjs/dist/gridjs.umd.js";
 import "gridjs/dist/gridjs.umd.js";
 import GlobalConfig from "../../global-config.js";
 import GeneralTable from "../../table-generator.js";
+import L from "leaflet";
+import "leaflet/dist/leaflet.css";
+
+// Ambil hak akses dari data-attribute
+const tableElement = document.getElementById("tourisms-data-table");
+const canView = "1";
+const canUpdate = tableElement.getAttribute("data-updater") === "1";
+const canDelete = tableElement.getAttribute("data-destroyer") === "1";
 
 const dataTourismsColumns = [
     "No",
@@ -21,25 +29,52 @@ const dataTourismsColumns = [
         widht: "120px",
         formatter: function (cell, row) {
             const id = row.cells[11].data;
+            const district = row.cells[4].data;
             const long = row.cells[9].data;
             const lat = row.cells[10].data;
             const model = "data/tourisms";
-            return gridjs.html(`
+
-                <div class="d-flex justify-items-end gap-10">
+            let actionButtons = '<div class="d-flex justify-items-end gap-10">';
+            let hasPrivilege = false;
+
+            // Tampilkan tombol View jika user punya akses view
+            if (canView) {
+                hasPrivilege = true;
+                actionButtons += `
+                <button class="btn btn-info me-2 btn-view" 
+                    data-long="${long}" data-lat="${lat}" data-district="${district}">
+                    <i class='bx bx-map'></i>
+                </button>`;
+            }
+
+            // Tampilkan tombol Edit jika user punya akses update
+            if (canUpdate) {
+                hasPrivilege = true;
+                actionButtons += `
                     <button class="btn btn-warning me-2 btn-edit"
                         data-id="${id}"
                         data-model="${model}">
-                        <i class='bx bx-edit'></i></button>
+                        <i class='bx bx-edit'></i>
-                    
+                    </button>`;
-                    <button class="btn btn-info me-2 btn-view" 
+            }
-                        data-long="${long}" data-lat="${lat}">
-                        <i class='bx bx-map'></i></button>
 
+            // Tampilkan tombol Delete jika user punya akses delete
+            if (canDelete) {
+                hasPrivilege = true;
+                actionButtons += `
                     <button class="btn btn-red btn-delete" 
                         data-id="${id}">
-                        <i class='bx bxs-trash'></i></button>
+                        <i class='bx bxs-trash'></i>
-                </div>
+                    </button>`;
-            `);
+            }
+
+            actionButtons += "</div>";
+            // Jika tidak memiliki akses, tampilkan teks "No Privilege"
+            return gridjs.html(
+                hasPrivilege
+                    ? actionButtons
+                    : '<span class="text-muted">No Privilege</span>'
+            );
         },
     },
 ];
@@ -51,6 +86,15 @@ document.addEventListener("DOMContentLoaded", () => {
         `${GlobalConfig.apiHost}`,
         dataTourismsColumns
     );
+    const customIcon = new L.Icon({
+        iconUrl: "/leaflet/marker-icon.png",
+        iconRetinaUrl: "leaflet/marker-icon-2x.png",
+        shadowUrl: "/leaflet/marker-shadow.png",
+        iconSize: [25, 41],
+        iconAnchor: [12, 41],
+        popupAnchor: [1, -34],
+        shadowSize: [41, 41],
+    });
 
     table.processData = function (data) {
         return data.data.map((item) => {
@@ -74,24 +118,133 @@ document.addEventListener("DOMContentLoaded", () => {
     table.init();
 
     // Event listener untuk tombol "View" yang memunculkan modal
+    // document.addEventListener("click", function (e) {
+    //     if (e.target && e.target.classList.contains("btn-view")) {
+    //         const long = e.target.getAttribute("data-long");
+    //         const lat = e.target.getAttribute("data-lat");
+
+    //         // Menyiapkan URL iframe dengan koordinat yang didapatkan
+    //         const iframeSrc = `https://www.google.com/maps?q=${lat},${long}&hl=es;z=14&output=embed`;
+
+    //         // Menemukan modal dan iframe di dalam modal
+    //         const modal = document.querySelector(".modalGMaps");
+    //         const iframe = modal.querySelector("iframe");
+
+    //         // Set src iframe untuk menampilkan peta dengan koordinat yang relevan
+    //         iframe.src = iframeSrc;
+
+    //         // Menampilkan modal
+    //         var modalInstance = new bootstrap.Modal(modal);
+    //         modalInstance.show();
+    //     }
+    // });
+
+    let map;
+    let geoLayer;
+    // Event listener untuk tombol "View" yang memunculkan modal dengan Leaflet
     document.addEventListener("click", function (e) {
         if (e.target && e.target.classList.contains("btn-view")) {
-            const long = e.target.getAttribute("data-long");
+            const long = parseFloat(e.target.getAttribute("data-long"));
-            const lat = e.target.getAttribute("data-lat");
+            const lat = parseFloat(e.target.getAttribute("data-lat"));
+            const district = e.target.getAttribute("data-district");
 
-            // Menyiapkan URL iframe dengan koordinat yang didapatkan
-            const iframeSrc = `https://www.google.com/maps?q=${lat},${long}&hl=es;z=14&output=embed`;
-
-            // Menemukan modal dan iframe di dalam modal
             const modal = document.querySelector(".modalGMaps");
-            const iframe = modal.querySelector("iframe");
-
-            // Set src iframe untuk menampilkan peta dengan koordinat yang relevan
-            iframe.src = iframeSrc;
-
-            // Menampilkan modal
             var modalInstance = new bootstrap.Modal(modal);
             modalInstance.show();
+
+            const loading = document.getElementById("loading");
+            loading.style.display = "block";
+
+            setTimeout(() => {
+                if (!map) {
+                    map = L.map("map").setView([lat, long], 14);
+
+                    // Tambahkan tile layer (peta dasar)
+                    L.tileLayer(
+                        "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
+                        {
+                            attribution: "&copy; OpenStreetMap contributors",
+                        }
+                    ).addTo(map);
+                } else {
+                    map.setView([lat, long], 14);
+                }
+
+                if (geoLayer) {
+                    map.removeLayer(geoLayer);
+                }
+
+                // Tambahkan marker untuk lokasi
+                L.marker([lat, long], { icon: customIcon })
+                    .addTo(map)
+                    .bindPopup(
+                        `<b>${district}</b><br>Lat: ${lat}, Long: ${long}`
+                    )
+                    .openPopup();
+
+                // Tambahkan GeoJSON ke dalam peta
+                fetch(`/storage/maps/tourisms/${district.toUpperCase()}.json`)
+                    .then((res) => res.json())
+                    .then((geojson) => {
+                        let colorMapping = {
+                            BJ: "rgb(235, 30, 30)",
+                            BA: "rgb(151, 219, 242)",
+                            CA: "rgb(70, 70, 165)",
+                            "P-2": "rgb(230, 255, 75)",
+                            HL: "rgb(50, 95, 40)",
+                            HPT: "rgb(75, 155, 55)",
+                            HP: "rgb(125, 180, 55)",
+                            W: "rgb(255, 165, 255)",
+                            PTL: "rgb(0, 255, 205)",
+                            "IK-2": "rgb(130, 185, 210)",
+                            "P-3": "rgb(175, 175, 55)",
+                            PS: "rgb(5, 215, 215)",
+                            PD: "rgb(235, 155, 60)",
+                            PK: "rgb(245, 155, 30)",
+                            HK: "rgb(155, 0, 255)",
+                            KPI: "rgb(105, 0, 0)",
+                            MBT: "rgb(95, 115, 145)",
+                            "P-4": "rgb(185, 235, 185)",
+                            TB: "rgb(70, 150, 255)",
+                            "P-1": "rgb(200, 245, 70)",
+                            TR: "rgb(215, 55, 0)",
+                            THR: "rgb(185, 165, 255)",
+                            TWA: "rgb(210, 190, 255)",
+                        };
+                        var geoLayer = L.geoJSON(geojson, {
+                            style: function (feature) {
+                                let htmlString =
+                                    feature.properties.description.toString();
+                                let match = htmlString.match(
+                                    /<td>Kode Zona<\/td>\s*<td>(.*?)<\/td>/
+                                );
+
+                                let color_code = match[1];
+                                return {
+                                    color: colorMapping[color_code],
+                                    fillColor:
+                                        colorMapping[color_code] || "#cccccc",
+                                    fillOpacity: 0.6,
+                                    weight: 1.5,
+                                };
+                            },
+                            onEachFeature: function (feature, layer) {
+                                if (
+                                    feature.properties &&
+                                    feature.properties.name
+                                ) {
+                                    layer.bindPopup(feature.properties.name);
+                                }
+                            },
+                        }).addTo(map);
+                        map.fitBounds(geoLayer.getBounds());
+                        loading.style.display = "none";
+                    })
+                    .catch((error) => {
+                        console.error("Error loading GeoJSON:", error);
+                        loading.style.display = "none";
+                    });
+            }, 500);
         }
     });
 });

resources/js/data/umkm/data-umkm.js

@@ -3,6 +3,11 @@ import "gridjs/dist/gridjs.umd.js";
 import GlobalConfig from "../../global-config.js";
 import GeneralTable from "../../table-generator.js";
 
+// Ambil hak akses dari data-attribute
+const tableElement = document.getElementById("umkm-data-table");
+const canUpdate = tableElement.getAttribute("data-updater") === "1";
+const canDelete = tableElement.getAttribute("data-destroyer") === "1";
+
 const dataUMKMColumns = [
     "No",
     "Nama Usaha",
@@ -29,17 +34,35 @@ const dataUMKMColumns = [
         formatter: function(cell, row) {
             const id = row.cells[19].data;
             const model = "data/umkm";
-            return gridjs.html(`
+
-                <div class="d-flex justify-items-end gap-10">
+            let actionButtons = '<div class="d-flex justify-items-end gap-10">';
+            let hasPrivilege = false;
+    
+            // Tampilkan tombol Edit jika user punya akses update
+            if (canUpdate) {
+                hasPrivilege = true;
+                actionButtons += `
                     <button class="btn btn-warning me-2 btn-edit" 
                         data-id="${id}" 
                         data-model="${model}">
-                        <i class='bx bx-edit' ></i></button>
+                        <i class='bx bx-edit'></i>
+                    </button>`;
+            }
+    
+            // Tampilkan tombol Delete jika user punya akses delete
+            if (canDelete) {
+                hasPrivilege = true;
+                actionButtons += `
                     <button class="btn btn-red btn-delete" 
-                            data-id="${id}">
+                        data-id="${id}">
-                            <i class='bx bxs-trash' ></i></button>
+                        <i class='bx bxs-trash'></i>
-                </div>
+                    </button>`;
-            `);
+            }
+    
+            actionButtons += '</div>';
+    
+            // Jika tidak memiliki akses, tampilkan teks "No Privilege"
+            return gridjs.html(hasPrivilege ? actionButtons : '<span class="text-muted">No Privilege</span>');
         }
     }
 ];

resources/js/invitations/index.js

@@ -0,0 +1,56 @@
+import { Grid } from "gridjs/dist/gridjs.umd.js";
+import "gridjs/dist/gridjs.umd.js";
+
+// Fungsi untuk menghasilkan data dummy
+function generateDummyInvitations(count = 10) {
+    const statuses = ["Terkirim", "Gagal", "Menunggu"];
+    const dummyData = [];
+
+    for (let i = 1; i <= count; i++) {
+        const email = `user${i}@example.com`;
+        const status = statuses[Math.floor(Math.random() * statuses.length)];
+        const createdAt = new Date(
+            Date.now() - Math.floor(Math.random() * 100000000)
+        )
+            .toISOString()
+            .replace("T", " ")
+            .substring(0, 19);
+
+        dummyData.push([i, email, status, createdAt]);
+    }
+
+    return dummyData;
+}
+
+class Invitations {
+    constructor() {
+        this.table = null;
+        this.initEvents();
+    }
+
+    initEvents() {
+        this.initTableInvitations();
+    }
+
+    initTableInvitations() {
+        let tableContainer = document.getElementById("table-invitations");
+        this.table = new Grid({
+            columns: [
+                { name: "ID" },
+                { name: "Email" },
+                { name: "Status" },
+                { name: "Created" },
+            ],
+            data: generateDummyInvitations(50), // Bisa ganti jumlah data dummy
+            pagination: {
+                limit: 10,
+            },
+            sort: true,
+            search: true,
+        }).render(tableContainer);
+    }
+}
+
+document.addEventListener("DOMContentLoaded", function () {
+    new Invitations();
+});

resources/js/master/users/users.js

@@ -9,6 +9,12 @@ class UsersTable {
     }
 
     initTableUsers() {
+        let tableContainer = document.getElementById(
+            "table-users"
+        );
+
+        tableContainer.innerHTML = "";
+        let canUpdate = tableContainer.getAttribute("data-updater") === "1";
         new Grid({
             columns: [
                 "ID",
@@ -20,14 +26,18 @@ class UsersTable {
                 "Roles",
                 {
                     name: "Action",
-                    formatter: (cell) =>
+                    formatter: (cell) =>{
-                        gridjs.html(`
+                        if (!canUpdate) {
+                            return gridjs.html(`<span class="text-muted">No Privilege</span>`);
+                        }
+                        return gridjs.html(`
                             <div class="d-flex justify-content-center">
                                 <a href="/master/users/${cell}/edit" class="btn btn-yellow btn-sm d-inline-flex align-items-center justify-content-center">
                                     <i class='bx bx-edit'></i>
                                 </a>
                             </div>
-                        `),
+                        `);
+                    },
                 },
             ],
             pagination: {
@@ -44,6 +54,7 @@ class UsersTable {
                 server: {
                     url: (prev, keyword) => `${prev}?search=${keyword}`,
                 },
+                debounceTimeout: 1000,
             },
             server: {
                 url: `${GlobalConfig.apiHost}/api/users`,

resources/js/menus/index.js

@@ -28,35 +28,9 @@ class Menus {
     initTableMenus() {
         let tableContainer = document.getElementById("table-menus");
 
-        if (this.table) {
+        tableContainer.innerHTML = "";
-            // If table exists, update its data instead of recreating
+        let canUpdate = tableContainer.getAttribute("data-updater") === "1";
-            this.table
+        let canDelete = tableContainer.getAttribute("data-destroyer") === "1";
-                .updateConfig({
-                    server: {
-                        url: `${GlobalConfig.apiHost}/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();
-            return;
-        }
 
         this.table = new Grid({
             columns: [
@@ -68,18 +42,33 @@ class Menus {
                 "Sort Order",
                 {
                     name: "Action",
-                    formatter: (cell) =>
+                    formatter: (cell) => {
-                        gridjs.html(`
+                        let buttons = `<div class="d-flex justify-content-center align-items-center gap-2">`;
-                        <div class="d-flex justify-content-center align-items-center gap-2">
+
-                            <a href="/menus/${cell}/edit" class="btn btn-yellow btn-sm d-inline-flex align-items-center justify-content-center">
+                        if (canUpdate) {
-                                <i class='bx bx-edit'></i>
+                            buttons += `
-                            </a>
+                                <a href="/menus/${cell}/edit" class="btn btn-yellow btn-sm d-inline-flex align-items-center justify-content-center">
-                            <button data-id="${cell}"
+                                    <i class='bx bx-edit'></i>
-                            class="btn btn-red btn-sm btn-delete-menu d-inline-flex align-items-center justify-content-center">
+                                </a>
-                                <i class='bx bxs-trash' ></i>
+                            `;
-                            </button>
+                        }
-                        </div>
+
-                      `),
+                        if (canDelete) {
+                            buttons += `
+                                <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>
+                            `;
+                        }
+
+                        if (!canUpdate && !canDelete) {
+                            buttons += `<span class="text-muted">No Privilege</span>`;
+                        }
+
+                        buttons += `</div>`;
+
+                        return gridjs.html(buttons);
+                    },
                 },
             ],
             pagination: {
@@ -96,6 +85,7 @@ class Menus {
                 server: {
                     url: (prev, keyword) => `${prev}?search=${keyword}`,
                 },
+                debounceTimeout: 1000,
             },
             server: {
                 url: `${GlobalConfig.apiHost}/api/menus`,

resources/js/payment-recaps/index.js

@@ -0,0 +1,104 @@
+import { Grid } from "gridjs/dist/gridjs.umd.js";
+import "gridjs/dist/gridjs.umd.js";
+import gridjs from "gridjs/dist/gridjs.umd.js";
+import GlobalConfig, { addThousandSeparators } from "../global-config.js";
+import moment from "moment";
+import InitDatePicker from "../utils/InitDatePicker.js";
+
+class PaymentRecaps {
+    constructor() {
+        this.toastMessage = document.getElementById("toast-message");
+        this.toastElement = document.getElementById("toastNotification");
+        this.toast = new bootstrap.Toast(this.toastElement);
+        this.table = null;
+        this.initTablePaymentRecaps();
+        this.initFilterDatepicker();
+    }
+    initFilterDatepicker() {
+        new InitDatePicker(
+            "#datepicker-payment-recap",
+            this.handleChangeFilterDate.bind(this)
+        ).init();
+    }
+    handleChangeFilterDate(strDate) {
+        console.log("filter date : ", strDate);
+    }
+    formatCategory(category) {
+        const categoryMap = {
+            potention_sum: "Potensi",
+            non_verified_sum: "Belum Terverifikasi",
+            verified_sum: "Terverifikasi",
+            business_sum: "Usaha",
+            non_business_sum: "Non Usaha",
+            spatial_sum: "Tata Ruang",
+            waiting_click_dpmptsp_sum: "Menunggu Klik DPMPTSP",
+            issuance_realization_pbg_sum: "Realisasi Terbit PBG",
+            process_in_technical_office_sum: "Proses Di Dinas Teknis",
+        };
+
+        return categoryMap[category] || category; // Return mapped value or original category
+    }
+    initTablePaymentRecaps() {
+        let tableContainer = document.getElementById("table-payment-recaps");
+
+        this.table = new Grid({
+            columns: [
+                { name: "Kategori", data: (row) => row[0] },
+                { name: "Nominal", data: (row) => row[1] },
+                {
+                    name: "Created",
+                    data: (row) => row[2],
+                    attributes: { style: "width: 200px; white-space: nowrap;" },
+                },
+            ],
+            pagination: {
+                limit: 10,
+                server: {
+                    url: (prev, page) =>
+                        `${prev}${prev.includes("?") ? "&" : "?"}page=${
+                            page + 1
+                        }`,
+                },
+            },
+            sort: true,
+            server: {
+                url: `${GlobalConfig.apiHost}/api/payment-recaps`,
+                headers: {
+                    Authorization: `Bearer ${document
+                        .querySelector('meta[name="api-token"]')
+                        .getAttribute("content")}`,
+                    "Content-Type": "application/json",
+                },
+                then: (response) => {
+                    console.log("API Response:", response); // Debugging
+
+                    if (!response.data || !Array.isArray(response.data)) {
+                        console.error(
+                            "Error: Data is not an array",
+                            response.data
+                        );
+                        return [];
+                    }
+
+                    return response.data.map((item) => [
+                        this.formatCategory(item.category ?? "Unknown"), // Ensure category is not null
+                        addThousandSeparators(
+                            Number(item.nominal).toString() || 0
+                        ), // Ensure nominal is a valid number
+                        moment(item.created_at).isValid()
+                            ? moment(item.created_at).format(
+                                  "YYYY-MM-DD H:mm:ss"
+                              )
+                            : "-", // Handle invalid dates
+                    ]);
+                },
+                total: (response) => response.pagination?.total || 0,
+            },
+            width: "auto",
+            fixedHeader: true,
+        }).render(tableContainer);
+    }
+}
+document.addEventListener("DOMContentLoaded", function (e) {
+    new PaymentRecaps();
+});

resources/js/pbg-task/index.js

@@ -2,13 +2,23 @@ import { Grid } from "gridjs/dist/gridjs.umd.js";
 import "gridjs/dist/gridjs.umd.js";
 import gridjs from "gridjs/dist/gridjs.umd.js";
 import GlobalConfig from "../global-config";
+import { Dropzone } from "dropzone";
+Dropzone.autoDiscover = false;
 
 class PbgTasks {
     init() {
         this.initTableRequestAssignment();
+        this.handleSendNotification();
+        this.handleUpload();
+        this.handleUploadBeritaAcara();
     }
 
     initTableRequestAssignment() {
+        let tableContainer = document.getElementById("table-pbg-tasks");
+
+        // Pastikan kontainer kosong sebelum merender ulang Grid.js
+        tableContainer.innerHTML = "";
+        let canUpdate = tableContainer.getAttribute("data-updater") === "1";
         new Grid({
             columns: [
                 "ID",
@@ -23,10 +33,29 @@ class PbgTasks {
                 { name: "Due Date", width: "10%" },
                 {
                     name: "Action",
-                    formatter: function (cell) {
+                    formatter: (cell) => {
+                        let tableContainer =
+                            document.getElementById("table-pbg-tasks");
+                        let canUpdate =
+                            tableContainer.getAttribute("data-updater") === "1";
+
+                        if (!canUpdate) {
+                            return gridjs.html(
+                                `<span class="text-muted">No Privilege</span>`
+                            );
+                        }
+
                         return gridjs.html(`
                             <div class="d-flex justify-content-center align-items-center gap-2">
-                                <a href="/pbg-task/${cell}" class="btn btn-yellow btn-sm d-inline-flex align-items-center justify-content-center">Detail</a
+                                <a href="/pbg-task/${cell}" class="btn btn-yellow btn-sm d-inline-flex align-items-center justify-content-center">
+                                    Detail
+                                </a>
+                                <button class="btn btn-sm btn-info upload-btn" data-id="${cell}">
+                                    Upload Bukti Bayar
+                                </button>
+                                <button class="btn btn-sm btn-info upload-btn-berita-acara" data-id="${cell}">
+                                    Buat Berita Acara
+                                </button>
                             </div>
                         `);
                     },
@@ -36,6 +65,7 @@ class PbgTasks {
                 server: {
                     url: (prev, keyword) => `${prev}?search=${keyword}`,
                 },
+                debounceTimeout: 1000,
             },
             pagination: {
                 limit: 15,
@@ -74,6 +104,96 @@ class PbgTasks {
             },
         }).render(document.getElementById("table-pbg-tasks"));
     }
+
+    handleSendNotification() {
+        this.toastMessage = document.getElementById("toast-message");
+        this.toastElement = document.getElementById("toastNotification");
+        this.toast = new bootstrap.Toast(this.toastElement);
+
+        document
+            .getElementById("sendNotificationBtn")
+            .addEventListener("click", () => {
+                let notificationStatus =
+                    document.getElementById("notificationStatus").value;
+
+                // Show success toast
+                this.toastMessage.innerText = "Notifikasi berhasil dikirim!";
+                this.toast.show();
+
+                // Close modal after sending
+                let modal = bootstrap.Modal.getInstance(
+                    document.getElementById("sendNotificationModal")
+                );
+                modal.hide();
+            });
+    }
+
+    handleUpload() {
+        // Handle button click to show modal
+        document.addEventListener("click", function (event) {
+            if (event.target.classList.contains("upload-btn")) {
+                // Show modal
+                let uploadModal = new bootstrap.Modal(
+                    document.getElementById("uploadModal")
+                );
+                uploadModal.show();
+            }
+        });
+        let dropzone = new Dropzone("#singleFileDropzone", {
+            url: "/upload-bukti-bayar", // Adjust to your backend endpoint
+            maxFiles: 1, // Allow only 1 file
+            maxFilesize: 5, // Limit size to 5MB
+            acceptedFiles: ".jpg,.png,.pdf", // Allowed file types
+            autoProcessQueue: false, // Prevent automatic upload
+            addRemoveLinks: true, // Show remove button
+            dictDefaultMessage: "Drop your file here or click to upload.",
+            init: function () {
+                let dz = this;
+
+                // Remove previous file when a new file is added
+                dz.on("addedfile", function () {
+                    if (dz.files.length > 1) {
+                        dz.removeFile(dz.files[0]);
+                    }
+                });
+
+                // Handle upload button click
+                document
+                    .getElementById("uploadBtn")
+                    .addEventListener("click", function () {
+                        if (dz.getQueuedFiles().length > 0) {
+                            dz.processQueue(); // Manually process upload
+                        } else {
+                            alert("Please select a file to upload.");
+                        }
+                    });
+
+                // Success callback
+                dz.on("success", function (file, response) {
+                    alert("File uploaded successfully!");
+                    dz.removeAllFiles(); // Clear after upload
+                });
+
+                // Error callback
+                dz.on("error", function (file, errorMessage) {
+                    alert("Upload failed: " + errorMessage);
+                });
+            },
+        });
+    }
+
+    handleUploadBeritaAcara() {
+        // Handle button click to show modal
+        document.addEventListener("click", function (event) {
+            if (event.target.classList.contains("upload-btn-berita-acara")) {
+                // Show modal
+                let uploadModal = new bootstrap.Modal(
+                    document.getElementById("uploadBeritaAcara")
+                );
+                uploadModal.show();
+            }
+        });
+    }
 }
 
 document.addEventListener("DOMContentLoaded", function (e) {

resources/js/pbg-task/show.js

@@ -0,0 +1,69 @@
+import { Grid } from "gridjs/dist/gridjs.umd.js";
+import "gridjs/dist/gridjs.umd.js";
+import gridjs from "gridjs/dist/gridjs.umd.js";
+import GlobalConfig from "../global-config";
+
+class PbgTaskAssignments {
+    init() {
+        this.initTablePbgTaskAssignments();
+    }
+
+    initTablePbgTaskAssignments() {
+        let tableContainer = document.getElementById(
+            "table-pbg-task-assignments"
+        );
+
+        let uuid = document.getElementById("uuid").value;
+
+        new Grid({
+            columns: [
+                "ID",
+                "Nama",
+                "Email",
+                "Nomor Telepon",
+                "Keahlian",
+                "Status",
+            ],
+            search: {
+                server: {
+                    url: (prev, keyword) => `${prev}?search=${keyword}`,
+                },
+                debounceTimeout: 1000,
+            },
+            pagination: {
+                limit: 15,
+                server: {
+                    url: (prev, page) =>
+                        `${prev}${prev.includes("?") ? "&" : "?"}page=${
+                            page + 1
+                        }`,
+                },
+            },
+            sort: true,
+            server: {
+                url: `${GlobalConfig.apiHost}/api/task-assignments/${uuid}`,
+                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.email,
+                        item.phone_number,
+                        item.expertise,
+                        item.status_name,
+                    ]),
+                total: (data) => data.meta.total,
+            },
+        }).render(tableContainer);
+    }
+}
+
+document.addEventListener("DOMContentLoaded", function (e) {
+    new PbgTaskAssignments().init();
+});

resources/js/report-payment-recaps/index.js

@@ -0,0 +1,69 @@
+import { Grid } from "gridjs/dist/gridjs.umd.js";
+import "gridjs/dist/gridjs.umd.js";
+import gridjs from "gridjs/dist/gridjs.umd.js";
+import GlobalConfig, { addThousandSeparators } from "../global-config.js";
+
+class ReportPaymentRecaps {
+    constructor() {
+        this.table = null;
+        this.initTableReportPaymentRecaps();
+    }
+    initTableReportPaymentRecaps() {
+        let tableContainer = document.getElementById(
+            "table-report-payment-recaps"
+        );
+
+        this.table = new Grid({
+            columns: [
+                { name: "Kecamatan" },
+                {
+                    name: "Total",
+                    formatter: (cell) => addThousandSeparators(cell),
+                },
+            ],
+            pagination: {
+                limit: 10,
+                server: {
+                    url: (prev, page) =>
+                        `${prev}${prev.includes("?") ? "&" : "?"}page=${
+                            page + 1
+                        }`,
+                },
+            },
+            sort: true,
+            server: {
+                url: `${GlobalConfig.apiHost}/api/report-payment-recaps`,
+                headers: {
+                    Authorization: `Bearer ${document
+                        .querySelector('meta[name="api-token"]')
+                        .getAttribute("content")}`,
+                    "Content-Type": "application/json",
+                },
+                then: (response) => {
+                    console.log("API Response:", response); // Debugging
+
+                    // Pastikan response memiliki data
+                    if (
+                        !response ||
+                        !response.data ||
+                        !Array.isArray(response.data.data)
+                    ) {
+                        console.error("Error: Data is not an array", response);
+                        return [];
+                    }
+
+                    return response.data.data.map((item) => [
+                        item.kecamatan || "Unknown",
+                        item.total,
+                    ]);
+                },
+                total: (response) => response.data.total || 0, // Ambil total dari API pagination
+            },
+            width: "auto",
+            fixedHeader: true,
+        }).render(tableContainer);
+    }
+}
+document.addEventListener("DOMContentLoaded", function (e) {
+    new ReportPaymentRecaps();
+});

resources/js/report-pbg-ptsp/index.js

@@ -0,0 +1,67 @@
+import { Grid } from "gridjs/dist/gridjs.umd.js";
+import "gridjs/dist/gridjs.umd.js";
+import gridjs from "gridjs/dist/gridjs.umd.js";
+import GlobalConfig, { addThousandSeparators } from "../global-config.js";
+
+class ReportPbgPTSP {
+    constructor() {
+        this.table = null;
+        this.initTableReportPbgPTSP();
+    }
+    initTableReportPbgPTSP() {
+        let tableContainer = document.getElementById("table-report-pbg-ptsp");
+
+        this.table = new Grid({
+            columns: [
+                { name: "Status" },
+                {
+                    name: "Total",
+                    formatter: (cell) => cell,
+                },
+            ],
+            pagination: {
+                limit: 10,
+                server: {
+                    url: (prev, page) =>
+                        `${prev}${prev.includes("?") ? "&" : "?"}page=${
+                            page + 1
+                        }`,
+                },
+            },
+            sort: true,
+            server: {
+                url: `${GlobalConfig.apiHost}/api/report-pbg-ptsp`,
+                headers: {
+                    Authorization: `Bearer ${document
+                        .querySelector('meta[name="api-token"]')
+                        .getAttribute("content")}`,
+                    "Content-Type": "application/json",
+                },
+                then: (response) => {
+                    console.log("API Response:", response); // Debugging
+
+                    // Pastikan response memiliki data
+                    if (
+                        !response ||
+                        !response.data ||
+                        !Array.isArray(response.data.data)
+                    ) {
+                        console.error("Error: Data is not an array", response);
+                        return [];
+                    }
+
+                    return response.data.data.map((item) => [
+                        item.status_name || "Unknown",
+                        item.total,
+                    ]);
+                },
+                total: (response) => response.data.total || 0, // Ambil total dari API pagination
+            },
+            width: "auto",
+            fixedHeader: true,
+        }).render(tableContainer);
+    }
+}
+document.addEventListener("DOMContentLoaded", function (e) {
+    new ReportPbgPTSP();
+});

resources/js/roles/index.js

@@ -27,6 +27,10 @@ class Roles {
 
     initTableRoles() {
         let tableContainer = document.getElementById("table-roles");
+
+        tableContainer.innerHTML = "";
+        let canUpdate = tableContainer.getAttribute("data-updater") === "1";
+        let canDelete = tableContainer.getAttribute("data-destroyer") === "1";
         // Create a new Grid.js instance only if it doesn't exist
         this.table = new gridjs.Grid({
             columns: [
@@ -34,22 +38,38 @@ class Roles {
                 "Name",
                 "Description",
                 {
-                    name: "Action",
+                name: "Action",
-                    formatter: (cell) =>
+                formatter: (cell) => {
-                        gridjs.html(`
+                    let buttons = `<div class="d-flex justify-content-center gap-2">`;
-                            <div class="d-flex justify-content-center gap-2">
+
-                                <a href="/roles/${cell}/edit" class="btn btn-yellow btn-sm d-inline-flex align-items-center justify-content-center">
+                    if (canUpdate) {
-                                    <i class='bx bx-edit'></i>
+                        buttons += `
-                                </a>
+                            <a href="/roles/${cell}/edit" class="btn btn-yellow btn-sm d-inline-flex align-items-center justify-content-center">
-                                <a href="/roles/role-menu/${cell}" class="btn btn-primary btn-sm d-inline-flex align-items-center justify-content-center">
+                                <i class='bx bx-edit'></i>
-                                    Role Menu
+                            </a>
-                                </a>
+                            <a href="/roles/role-menu/${cell}" class="btn btn-primary btn-sm d-inline-flex align-items-center justify-content-center">
-                                <button data-id="${cell}" class="btn btn-sm btn-red btn-delete-role d-inline-flex align-items-center justify-content-center">
+                                Role Menu
-                                    <i class='bx bxs-trash' ></i>
+                            </a>
-                                </button>
+                        `;
-                            </div>
+                    }
-                        `),
+
+                    if (canDelete) {
+                        buttons += `
+                            <button data-id="${cell}" class="btn btn-sm btn-red btn-delete-role d-inline-flex align-items-center justify-content-center">
+                                <i class='bx bxs-trash'></i>
+                            </button>
+                        `;
+                    }
+
+                    if (!canUpdate && !canDelete) {
+                        buttons += `<span class="text-muted">No Privilege</span>`;
+                    }
+
+                    buttons += `</div>`;
+
+                    return gridjs.html(buttons);
                 },
+            },
             ],
             pagination: {
                 limit: 50,
@@ -65,6 +85,7 @@ class Roles {
                 server: {
                     url: (prev, keyword) => `${prev}?search=${keyword}`,
                 },
+                debounceTimeout: 1000,
             },
             server: {
                 url: `${GlobalConfig.apiHost}/api/roles`,

resources/js/table-generator.js

@@ -12,18 +12,26 @@ class GeneralTable {
     }
 
     init() {
+        const tableContainer = document.getElementById(this.tableId);
+    
+        // Kosongkan container sebelum render ulang
+        tableContainer.innerHTML = "";
+    
         const table = new Grid({
             columns: this.columns,
             search: this.options.search || {
                 server: {
                     url: (prev, keyword) => `${prev}?search=${keyword}`,
                 },
+                debounceTimeout: 1000,
             },
             pagination: this.options.pagination || {
                 limit: 15,
                 server: {
                     url: (prev, page) =>
-                        `${prev}${prev.includes("?") ? "&" : "?"}page=${page + 1}`,
+                        `${prev}${prev.includes("?") ? "&" : "?"}page=${
+                            page + 1
+                        }`,
                 },
             },
             sort: this.options.sort || true,
@@ -40,7 +48,7 @@ class GeneralTable {
             },
         });
     
-        table.render(document.getElementById(this.tableId));
+        table.render(tableContainer);
         this.handleActions();
     }
 
@@ -48,22 +56,29 @@ class GeneralTable {
     processData(data) {
         return data.data.map((item) => {
             return this.columns.map((column) => {
-                return item[column] || '';
+                return item[column] || "";
             });
         });
     }
 
     handleActions() {
         document.addEventListener("click", (event) => {
-            if (event.target && event.target.classList.contains('btn-edit')) {
+            if (event.target && event.target.classList.contains("btn-edit")) {
                 this.handleEdit(event);
-            }
+            } else if (
-            else if (event.target && event.target.classList.contains('btn-delete')) {
+                event.target &&
+                event.target.classList.contains("btn-delete")
+            ) {
                 this.handleDelete(event);
-            }
+            } else if (
-            else if (event.target && event.target.classList.contains('btn-create')) {
+                event.target &&
+                event.target.classList.contains("btn-create")
+            ) {
                 this.handleCreate(event);
-            } else if (event.target && event.target.classList.contains('btn-bulk-create')) {
+            } else if (
+                event.target &&
+                event.target.classList.contains("btn-bulk-create")
+            ) {
                 this.handleBulkCreate(event);
             }
         });
@@ -72,28 +87,28 @@ class GeneralTable {
     // Fungsi untuk menangani create
     handleCreate(event) {
         // Menggunakan model dan ID untuk membangun URL dinamis
-        const model = event.target.getAttribute('data-model'); // Mengambil model dari data-model
+        const model = event.target.getAttribute("data-model"); // Mengambil model dari data-model
         window.location.href = `${this.baseUrl}/${model}/create`;
     }
 
     handleBulkCreate(event) {
         // Menggunakan model dan ID untuk membangun URL dinamis
-        const model = event.target.getAttribute('data-model');
+        const model = event.target.getAttribute("data-model");
         window.location.href = `${this.baseUrl}/${model}/bulk-create`;
     }
 
     // Fungsi untuk menangani edit
     handleEdit(event) {
-        const id = event.target.getAttribute('data-id');
+        const id = event.target.getAttribute("data-id");
-        const model = event.target.getAttribute('data-model'); // Mengambil model dari data-model
+        const model = event.target.getAttribute("data-model"); // Mengambil model dari data-model
-        console.log('Editing record with ID:', id);
+        console.log("Editing record with ID:", id);
         // Menggunakan model dan ID untuk membangun URL dinamis
         window.location.href = `${this.baseUrl}/${model}/${id}/edit`;
     }
 
     // Fungsi untuk menangani delete
     handleDelete(event) {
-        const id = event.target.getAttribute('data-id');
+        const id = event.target.getAttribute("data-id");
         console.log(id);
         // if (confirm("Are you sure you want to delete this item?")) {
         //     this.deleteRecord(id);
@@ -105,7 +120,7 @@ class GeneralTable {
             showCancelButton: true,
             confirmButtonColor: "#d33",
             cancelButtonColor: "#3085d6",
-            confirmButtonText: "Yes, delete it!"
+            confirmButtonText: "Yes, delete it!",
         }).then((result) => {
             if (result.isConfirmed) {
                 this.deleteRecord(id);
@@ -114,7 +129,7 @@ class GeneralTable {
                     text: "Your record has been deleted.",
                     icon: "success",
                     showConfirmButton: false, // Menghilangkan tombol OK
-                    timer: 2000 // Menutup otomatis dalam 2 detik (opsional)
+                    timer: 2000, // Menutup otomatis dalam 2 detik (opsional)
                 });
             }
         });
@@ -123,8 +138,9 @@ class GeneralTable {
     async deleteRecord(id) {
         try {
             console.log(id);
-            const response = await fetch(`${this.apiUrl}/${id}`, { // Menambahkan model dalam URL
+            const response = await fetch(`${this.apiUrl}/${id}`, {
-                method: 'DELETE',
+                // Menambahkan model dalam URL
+                method: "DELETE",
                 headers: this.options.headers || {
                     Authorization: `Bearer ${document
                         .querySelector('meta[name="api-token"]')
@@ -136,10 +152,14 @@ class GeneralTable {
                 location.reload();
             } else {
                 const data = await response.json();
-                showErrorAlert(`Failed to delete record: ${data.message || "Unknown error"}`);
+                showErrorAlert(
+                    `Failed to delete record: ${
+                        data.message || "Unknown error"
+                    }`
+                );
             }
         } catch (error) {
-            console.error('Error deleting data:', error);
+            console.error("Error deleting data:", error);
             showErrorAlert("Error deleting data. Please try again.");
         }
     }

resources/js/tpa-tpt/index.js

@@ -0,0 +1,112 @@
+import { Grid } from "gridjs/dist/gridjs.umd.js";
+import "gridjs/dist/gridjs.umd.js";
+
+class TpaTpt {
+    constructor() {
+        this.toastMessage = document.getElementById("toast-message");
+        this.toastElement = document.getElementById("toastNotification");
+        this.toast = new bootstrap.Toast(this.toastElement);
+        this.table = null;
+
+        // Initialize functions
+        this.initTableTpaTpt();
+        this.initEvents();
+    }
+    initEvents() {}
+    initTableTpaTpt() {
+        let tableContainer = document.getElementById("table-tpa-tpt");
+
+        tableContainer.innerHTML = "";
+        let canUpdate = tableContainer.getAttribute("data-updater") === "1";
+        let canDelete = tableContainer.getAttribute("data-destroyer") === "1";
+
+        // Kecamatan (districts) in Kabupaten Bandung
+        const kecamatanList = [
+            "Bojongsoang",
+            "Cangkuang",
+            "Cicalengka",
+            "Cikancung",
+            "Cilengkrang",
+            "Cileunyi",
+            "Cimaung",
+            "Cimenyan",
+            "Ciparay",
+            "Cisaat",
+            "Dayeuhkolot",
+            "Ibun",
+            "Katapang",
+            "Kertasari",
+            "Kutawaringin",
+            "Majalaya",
+            "Margaasih",
+            "Margahayu",
+            "Nagreg",
+            "Pacet",
+            "Pameungpeuk",
+            "Pangalengan",
+            "Paseh",
+            "Rancaekek",
+            "Solokanjeruk",
+            "Soreang",
+            "Banjaran",
+            "Baleendah",
+        ];
+
+        // Generate random PT (companies)
+        function generateCompanyName() {
+            const prefixes = ["PT", "CV", "UD"];
+            const names = [
+                "Mitra Sejahtera",
+                "Berkah Jaya",
+                "Makmur Abadi",
+                "Sukses Mandiri",
+                "Indah Lestari",
+                "Tirta Alam",
+            ];
+            const suffixes = [
+                "Indonesia",
+                "Sentosa",
+                "Persada",
+                "Global",
+                "Tbk",
+                "Jaya",
+            ];
+
+            return `${prefixes[Math.floor(Math.random() * prefixes.length)]} ${
+                names[Math.floor(Math.random() * names.length)]
+            } ${suffixes[Math.floor(Math.random() * suffixes.length)]}`;
+        }
+
+        // Function to generate random dummy data
+        function generateDummyData(count) {
+            let data = [];
+
+            for (let i = 1; i <= count; i++) {
+                let name = `TPA ${String.fromCharCode(64 + (i % 26))}${i}`; // Example: TPA A1, TPA B2, etc.
+                let location =
+                    kecamatanList[
+                        Math.floor(Math.random() * kecamatanList.length)
+                    ];
+                let lat = (-6.9 + Math.random() * 0.3).toFixed(6); // Approximate latitude for Bandung area
+                let lng = (107.5 + Math.random() * 0.5).toFixed(6); // Approximate longitude for Bandung area
+                let owner = generateCompanyName();
+
+                data.push([name, location, lat, lng, owner]);
+            }
+            return data;
+        }
+
+        this.table = new Grid({
+            columns: ["Nama", "Kecamatan", "Lat", "Lng", "Pemilik (PT)"],
+            data: generateDummyData(100), // Generate 100 rows of dummy data
+            pagination: {
+                limit: 10,
+            },
+            search: true,
+            sort: true,
+        }).render(tableContainer);
+    }
+}
+document.addEventListener("DOMContentLoaded", function (e) {
+    new TpaTpt();
+});

resources/scss/dashboards/potentials/_inside_system.scss

@@ -0,0 +1,234 @@
+//
+// inside_system.scss
+//
+
+.square {
+    height: 100px;
+    width: 100px;
+    position: absolute;
+    z-index: -1;
+}
+
+.dia-top-left-bottom-right:after {
+    content: "";
+    width: 100%;
+    height: 100%;
+    position: absolute;
+
+    top: 0;
+    left: 0;
+    background: linear-gradient(
+        to top right,
+        transparent calc(50% - 2px),
+        black,
+        transparent calc(50% + 2px)
+    );
+}
+
+.dia-top-right-bottom-left:after {
+    content: "";
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    background: linear-gradient(
+        to top left,
+        transparent calc(50% - 2px),
+        black,
+        transparent calc(50% + 2px)
+    );
+}
+
+.lack-of-potential-wrapper {
+    background-image: url("/public/images/bg-dashboard.jpg");
+    background-size: cover;
+    background-position: center;
+    background-color: rgba(255, 255, 255, 0.7);
+    max-width: 100vw;
+}
+
+.lack-of-potential-wrapper::before {
+    content: "";
+    position: absolute;
+    pointer-events: none;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(255, 255, 255, 0.7);
+}
+// #lack-of-potential-fixed-container {
+//     min-width: 1110px;
+//     max-width: unset; /* Allow it to grow if needed */
+// }
+
+// @media (max-width: 768px) {
+//     #lack-of-potential-fixed-container {
+//         transform: scale(0.8); /* Adjust the scale as needed */
+//     }
+// }
+
+// line degrees
+.line {
+    background-color: black;
+    position: absolute;
+    height: 3px;
+}
+.home-to-non-usaha {
+    width: 100px;
+    top: 13%;
+    left: 38%;
+    transform: rotate(90deg);
+}
+.restoran-to-bapenda {
+    width: 110px;
+    top: 14%;
+    left: 60%;
+    transform: rotate(40deg);
+}
+.pbb-to-bapenda {
+    width: 80px;
+    top: 21%;
+    left: 80%;
+}
+.reklame-to-bapenda {
+    width: 120px;
+    left: 75%;
+    top: 30%;
+    transform: rotateZ(142deg);
+}
+.non-usaha-to-bapenda {
+    width: 116px;
+    left: 18%;
+    top: 33%;
+    transform: rotateZ(124deg);
+}
+.non-usaha-to-pdam {
+    width: 100px;
+    left: 38%;
+    top: 34%;
+    transform: rotateZ(90deg);
+}
+.non-usaha-to-kecamatan {
+    width: 140px;
+    left: 55%;
+    top: 33%;
+    transform: rotateZ(237deg);
+}
+.bapenda-to-usaha {
+    width: 114px;
+    left: 18%;
+    top: 49%;
+    transform: rotateZ(56deg);
+}
+.pdam-to-usaha {
+    width: 88px;
+    left: 39%;
+    top: 49%;
+    transform: rotateZ(90deg);
+}
+.kecamatan-to-usaha {
+    width: 118px;
+    left: 56%;
+    top: 50%;
+    transform: rotateZ(117deg);
+}
+.usaha-to-villa {
+    width: 100px;
+    left: 10%;
+    top: 63%;
+    transform: rotateZ(143deg);
+}
+.usaha-to-pabrik {
+    width: 150px;
+    left: 15%;
+    top: 70%;
+    transform: rotateZ(143deg);
+}
+.usaha-to-pariwisata {
+    width: 150px;
+    left: 43%;
+    top: 70%;
+    transform: rotateZ(38deg);
+}
+.usaha-to-protocol {
+    width: 106px;
+    left: 36%;
+    top: 71%;
+    transform: rotateZ(86deg);
+}
+.pariwisata-to-disbudpar {
+    width: 86px;
+    left: 54%;
+    top: 83%;
+    transform: rotateZ(150deg);
+}
+.non-usaha-to-wasdal {
+    width: 300px;
+    left: -32%;
+    top: 34%;
+    transform: rotateZ(226deg);
+}
+.usaha-to-wasdal {
+    width: 300px;
+    left: -34%;
+    top: 50%;
+    transform: rotateZ(129deg);
+}
+.wasdal-to-upt {
+    width: 155px;
+    left: 3%;
+    top: -67%;
+    transform: rotateZ(127deg);
+}
+.wasdal-to-satpol {
+    width: 155px;
+    left: 19%;
+    top: -52%;
+    transform: rotateZ(76deg);
+}
+.wasdal-to-kejari {
+    width: 182px;
+    left: 25%;
+    top: -55%;
+    transform: rotateZ(51deg);
+}
+.wasdal-to-tni {
+    width: 260px;
+    left: 29%;
+    top: -62%;
+    transform: rotateZ(30deg);
+}
+.wasdal-to-potential {
+    width: 50px;
+    left: 28%;
+    top: 41%;
+}
+.potential-to-tata-ruang {
+    width: 50px;
+    left: 72%;
+    top: 41%;
+}
+.tata-ruang-to-non-usaha {
+    width: 220px;
+    left: 0%;
+    top: 30%;
+    transform: rotateZ(144deg);
+}
+.tata-ruang-to-usaha {
+    width: 280px;
+    left: 0%;
+    top: 52%;
+    transform: rotateZ(224deg);
+}
+.tata-ruang-to-peta {
+    width: 122px;
+    left: 8%;
+    top: 41%;
+}
+.peta-to-tapak {
+    width: 30px;
+    left: 47%;
+    top: 41%;
+}

resources/scss/dashboards/potentials/_outside_system.scss

@@ -0,0 +1,59 @@
+//
+// outside_system.scss
+//
+.square {
+    height: 100px;
+    width: 100px;
+    position: absolute;
+    z-index: -1;
+}
+
+.dia-top-left-bottom-right:after {
+    content: "";
+    width: 100%;
+    height: 100%;
+    position: absolute;
+
+    top: 0;
+    left: 0;
+    background: linear-gradient(
+        to top right,
+        transparent calc(50% - 2px),
+        black,
+        transparent calc(50% + 2px)
+    );
+}
+
+.dia-top-right-bottom-left:after {
+    content: "";
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    background: linear-gradient(
+        to top left,
+        transparent calc(50% - 2px),
+        black,
+        transparent calc(50% + 2px)
+    );
+}
+
+.outside-system-wrapper {
+    background-image: url("/public/images/bg-dashboard.jpg");
+    background-size: cover;
+    background-position: center;
+    background-color: rgba(255, 255, 255, 0.7);
+    max-width: 90vw;
+}
+
+.outside-system-wrapper::before {
+    content: "";
+    position: absolute;
+    pointer-events: none;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(255, 255, 255, 0.7);
+}

resources/scss/plugins/_gridjs.scss

@@ -13,7 +13,6 @@
     border: 1px solid var(--#{$prefix}border-color);
     border-radius: 0px;
 
-
     &::-webkit-scrollbar {
         -webkit-appearance: none;
     }
@@ -24,11 +23,12 @@
     }
 
     &::-webkit-scrollbar:horizontal {
-        height: 5px;
+        height: 15px;
     }
 
     &::-webkit-scrollbar-thumb {
-        background-color: rgba(var(--#{$prefix}dark-rgb), .075);
+        // background-color: rgba(var(--#{$prefix}dark-rgb), 0.075);
+        background-color: $primary;
         border-radius: 10px;
         padding: 5px;
         border: none;
@@ -69,15 +69,13 @@ th {
     &.gridjs-th {
         border-top: 0;
         color: var(--#{$prefix}body-color);
-        background-color: rgba(var(--#{$prefix}light-rgb), .75);
+        background-color: rgba(var(--#{$prefix}light-rgb), 0.75);
-
     }
 
     &.gridjs-th-sort {
-
         &:focus,
         &:hover {
-            background-color: rgba(var(--#{$prefix}light-rgb), .85);
+            background-color: rgba(var(--#{$prefix}light-rgb), 0.85);
         }
     }
 }
@@ -99,7 +97,6 @@ th {
 }
 
 .gridjs-pagination {
-
     .gridjs-pages button {
         background-color: transparent;
         color: var(--#{$prefix}link-color);
@@ -166,7 +163,8 @@ input.gridjs-input {
     background-color: $input-bg;
     color: $input-color;
     line-height: $input-line-height;
-    padding: $input-padding-y $input-padding-x $input-padding-y $input-padding-x * 2.5;
+    padding: $input-padding-y $input-padding-x $input-padding-y $input-padding-x *
+        2.5;
     border-radius: $input-border-radius;
     @include font-size($input-font-size);
 
@@ -203,30 +201,26 @@ th.gridjs-th-sort .gridjs-th-content {
 }
 
 button {
-
     &.gridjs-sort-asc,
     &.gridjs-sort-desc {
         background-size: 7px;
     }
 }
 
-
 // gridjs selection
 .gridjs-tr-selected {
     td {
         background-color: $table-active-bg;
     }
 
-    .gridjs-td .gridjs-checkbox[type=checkbox] {
+    .gridjs-td .gridjs-checkbox[type="checkbox"] {
         background-color: $form-check-input-checked-bg-color;
         border-color: $form-check-input-checked-border-color;
 
         @if $enable-gradients {
             background-image: escape-svg($form-check-input-checked-bg-image),
-            var(--#{$prefix}gradient);
+                var(--#{$prefix}gradient);
-        }
+        } @else {
-
-        @else {
             background-image: escape-svg($form-check-input-checked-bg-image);
         }
     }
@@ -253,7 +247,6 @@ button {
 }
 
 .gridjs-border-none {
-
     td.gridjs-td,
     th.gridjs-th {
         border-right-width: 0;
@@ -267,7 +260,6 @@ button {
 
 [data-bs-theme="dark"] {
     button {
-
         &.gridjs-sort-neutral,
         &.gridjs-sort-asc,
         &.gridjs-sort-desc {

resources/scss/structure/_sidebar_custom.scss

@@ -0,0 +1,120 @@
+//
+// sidebar_custom.scss
+//
+
+.app-sidebar {
+    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
+    background-color: #f8f9fa; /* Warna sidebar putih */
+}
+
+.logo-box {
+    text-align: center;
+    padding: 15px;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+/* Menu utama */
+.navbar-nav {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.menu-title {
+    font-size: 14px;
+    font-weight: bold;
+    text-transform: uppercase;
+    color: #6c757d;
+    padding: 10px 15px;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+/* Parent Menu */
+.nav-item {
+    position: relative;
+}
+
+.nav-item > .nav-link {
+    display: flex;
+    align-items: center;
+    font-size: 16px;
+    font-weight: bold;
+    color: #343a40;
+    text-decoration: none;
+    padding: 12px 20px;
+    transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
+    cursor: pointer;
+}
+
+.nav-item > .nav-link:hover {
+    background: rgba(0, 0, 0, 0.05);
+    color: #007bff;
+}
+
+/* Ikon di sebelah kiri menu */
+.nav-icon {
+    font-size: 20px;
+    margin-right: 10px;
+    color: #6c757d;
+}
+
+/* CHILD MENU (Submenu) */
+.sub-navbar-nav {
+    list-style: none;
+    padding-left: 20px;
+}
+
+/* Menampilkan submenu ketika parent di-hover atau memiliki fokus */
+.nav-item:hover > .sub-navbar-nav,
+.nav-item:focus-within > .sub-navbar-nav {
+    display: block;
+}
+
+/* Aturan untuk setiap submenu item */
+.sub-navbar-nav .nav-item {
+    margin-left: 0;
+    width: 100%;
+}
+
+.sub-navbar-nav .nav-link {
+    font-size: 14px;
+    font-weight: normal;
+    color: #6c757d;
+    display: flex;
+    align-items: center;
+    padding: 8px 15px;
+    transition: color 0.3s ease-in-out, background 0.3s ease-in-out;
+}
+
+/* Hover effect untuk submenu */
+.sub-navbar-nav .nav-link:hover {
+    background: rgba(0, 0, 0, 0.05);
+    color: #007bff;
+}
+
+/* CHILD dari CHILD (Level lebih dalam) */
+.sub-navbar-nav .sub-navbar-nav {
+    margin-left: 15px;
+}
+
+/* Menampilkan submenu level dalam saat parent di-hover */
+.nav-item:hover > .sub-navbar-nav .nav-item:hover > .sub-navbar-nav {
+    display: block;
+}
+
+/* Aturan tambahan untuk submenu anak-anak */
+.sub-navbar-nav .sub-navbar-nav .nav-link {
+    font-size: 13px;
+    color: #868e96;
+}
+
+/* Ikon anak panah saat menu terbuka */
+.menu-arrow {
+    transition: transform 0.3s ease;
+}
+
+/* Efek putar ikon saat submenu terbuka */
+.nav-item:hover > .nav-link .menu-arrow,
+.nav-item:focus-within > .nav-link .menu-arrow {
+    transform: rotate(90deg);
+}

resources/scss/style.scss

@@ -16,6 +16,7 @@
 @import "structure/general";
 @import "structure/topbar";
 @import "structure/sidebar";
+@import "structure/sidebar_custom";
 @import "structure/footer";
 @import "structure/page-title";
 
@@ -46,7 +47,8 @@
 @import "components/widgets";
 @import "components/circle";
 @import "components/custom_circle";
-@import "dashboards/lack-of-potential";
+@import "dashboards/potentials/inside_system";
+@import "dashboards/potentials/outside_system";
 
 // Plugin
 @import "plugins/simplebar";

resources/views/approval/index.blade.php

@@ -0,0 +1,27 @@
+@extends('layouts.vertical', ['subtitle' => 'Approval'])
+
+@section('css')
+@vite(['node_modules/gridjs/dist/theme/mermaid.min.css'])
+@endsection
+
+@section('content')
+
+@include('layouts.partials/page-title', ['title' => 'Approval', 'subtitle' => 'Approval Pejabat'])
+
+<x-toast-notification />
+
+<div class="row">
+  <div class="col-12">
+    <div class="card w-100">
+      <div class="card-body">
+        <div id="table-approvals"></div>
+      </div>
+    </div>
+  </div>
+</div>
+
+@endsection
+
+@section('scripts')
+@vite(['resources/js/approval/index.js'])
+@endsection

resources/views/bigdata-resumes/index.blade.php

@@ -2,79 +2,6 @@
 
 @section('css')
 @vite(['node_modules/gridjs/dist/theme/mermaid.min.css'])
-<style>
-/* Ensure the Grid.js container allows full scrolling */
-#table-bigdata-resumes {
-    overflow-x: auto;
-    overflow-y: hidden; /* Prevent vertical scrolling */
-    white-space: nowrap;
-    max-width: 100%;
-    height: 100%; /* Adjust height if necessary */
-}
-
-/* Ensure Grid.js wrapper is scrollable */
-.gridjs-wrapper {
-    max-width: 100%;
-    overflow-x: auto;
-    overflow-y: hidden;
-    white-space: nowrap;
-}
-
-/* Make the entire scrollbar much bigger */
-.gridjs-wrapper::-webkit-scrollbar {
-    height: 40px; /* Increase scrollbar height */
-}
-
-/* Scrollbar track (background) */
-.gridjs-wrapper::-webkit-scrollbar-track {
-    background: #ddd;
-    border-radius: 20px;
-}
-
-/* Scrollbar thumb (draggable part) */
-.gridjs-wrapper::-webkit-scrollbar-thumb {
-    background: #007bff;
-    border-radius: 20px;
-    width: 40px; /* Wider scrollbar thumb */
-    min-width: 40px;
-}
-
-/* Scrollbar thumb hover effect */
-.gridjs-wrapper::-webkit-scrollbar-thumb:hover {
-    background: #0056b3;
-}
-
-/* Bigger Scrollbar Buttons */
-.gridjs-wrapper::-webkit-scrollbar-button {
-    background: #007bff;
-    height: 40px; /* Force bigger button height */
-    width: 40px; /* Force bigger button width */
-    border-radius: 10px;
-}
-
-/* Left Scroll Button */
-.gridjs-wrapper::-webkit-scrollbar-button:horizontal:decrement {
-    display: block;
-    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M15 18l-6-6 6-6"/></svg>') no-repeat center;
-    background-size: 30px;
-    width: 40px; /* Ensure button size */
-    height: 40px;
-}
-
-/* Right Scroll Button */
-.gridjs-wrapper::-webkit-scrollbar-button:horizontal:increment {
-    display: block;
-    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M9 18l6-6-6-6"/></svg>') no-repeat center;
-    background-size: 30px;
-    width: 40px; /* Ensure button size */
-    height: 40px;
-}
-
-/* Scrollbar button hover effect */
-.gridjs-wrapper::-webkit-scrollbar-button:hover {
-    background: #0056b3;
-}
-</style>
 @endsection
 
 @section('content')
@@ -86,10 +13,6 @@
 <div class="row">
     <div class="col-12">
         <div class="card w-100 h-100">
-            <div class="card-header d-flex align-items-center">
-                <input type="text" class="form-control me-2 w-auto" />
-                <button id="search-btn" class="btn btn-md btn-info text-white">Cari</button>
-            </div>
             <div class="card-body">
                 <div id="table-bigdata-resumes"></div>
             </div>

resources/views/business-industries/index.blade.php

@@ -15,9 +15,14 @@
 		<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">Upload</a>
+					@if ($creator)
+						<a href="{{ route('business-industries.create')}}" class="btn btn-success btn-sm d-block d-sm-inline w-auto">Upload</a>
+					@endif
+				</div>
+				<div id="table-business-industries"
+					data-updater="{{ $updater }}"
+					data-destroyer="{{ $destroyer }}">
 				</div>
-				<div id="table-business-industries"></div>
 			</div>
 		</div>
 	</div>

resources/views/customers/index.blade.php

@@ -15,10 +15,15 @@
         <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('customers.create')}}" class="btn btn-success btn-sm d-block d-sm-inline w-auto me-3">Create</a>
+                    @if ($creator)
-                    <a href="{{ route('customers.upload')}}" class="btn btn-success btn-sm d-block d-sm-inline w-auto">Upload</a>
+                        <a href="{{ route('customers.create')}}" class="btn btn-success btn-sm d-block d-sm-inline w-auto me-3">Create</a>
+                        <a href="{{ route('customers.upload')}}" class="btn btn-success btn-sm d-block d-sm-inline w-auto">Upload</a>
+                    @endif
+                </div>
+                <div id="table-customers"
+                     data-updater="{{ $updater }}"
+                     data-destroyer="{{ $destroyer }}">
                 </div>
-                <div id="table-customers"></div>
             </div>
         </div>
     </div>

resources/views/dashboards/potentials/inside_system.blade.php

@@ -0,0 +1,115 @@
+@extends('layouts.vertical', ['subtitle' => 'Dashboards'])
+
+@section('css')
+@vite(['resources/scss/dashboards/potentials/_inside_system.scss'])
+@endsection
+
+@section('content')
+@include('layouts.partials.page-title', ['title' => 'Dashboards', 'subtitle' => 'Luar Sistem'])
+
+<div class="lack-of-potential-wrapper">
+    <div class="row" id="lack-of-potential-wrapper">
+        <div class="d-flex justify-content-between align-items-center mt-3 ms-2">
+            <h2 class="text-danger m-0">
+                ANALISA BIG DATA MELALUI APLIKASI <br> SIBEDAS PBG LUAR SISTEM
+            </h2>
+            <div class="text-black text-end d-flex flex-column align-items-end me-3">
+                <input type="text" class="form-control mt-2" style="max-width: 125px;" id="datepicker-lack-of-potential" placeholder="Filter Date" />
+            </div>
+        </div>
+    </div>
+    <div class="wrapper">
+        <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;" visible_data="true" data_id="restoran-count" data_count="0" />
+                <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;" visible_data="true" data_id="villa-count" data_count="0" />
+                <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;" visible_data="true" data_id="pariwisata-count" data_count="0" />
+                <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;" visible_data="true" data_id="tata-ruang-count" data_count="0" />
+            </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;" visible_data="true" data_id="tata-ruang-usaha-count" data_count="0" />
+            </div>
+        </div>
+    </div>
+</div>
+@endsection
+
+@section('scripts')
+@vite(['resources/js/dashboards/potentials/inside_system.js'])
+@endsection
+

resources/views/dashboards/potentials/outside_system.blade.php

@@ -0,0 +1,73 @@
+<!-- base layout -->
+@extends('layouts.vertical', ['subtitle' => 'Dashboards'])
+<!-- style -->
+@section('css')
+@vite(['resources/scss/dashboards/potentials/_outside_system.scss'])
+@endsection
+<!-- content -->
+@section('content')
+@include('layouts.partials.page-title', ['title' => 'Dashboards', 'subtitle' => 'Dalam Sistem'])
+<div class="outside-system-wrapper" id="outside-system-wrapper">
+    <div class="row">
+        <div class="d-flex justify-content-between align-items-center mt-3 ms-2">
+            <h2 class="text-danger m-0">
+                ANALISA BIG DATA MELALUI APLIKASI <br>
+                SIBEDAS PBG DALAM SISTEM
+            </h2>
+            <div class="text-black text-end d-flex flex-column align-items-end me-3">
+                <input type="text" class="form-control mt-2" style="max-width: 125px;" id="datepicker-outside-system" placeholder="Filter Date" />
+            </div>
+        </div>
+    </div>
+    <div id="outside-system-fixed-container" class="" style="width:880px;height:770px;position:relative;margin:auto;z-index:1;">
+        <div style="position: absolute; top: 70px; left: 50px; width: 200px; height: 500px;">
+            @component('components.circle', [
+                'document_title' => 'Non Usaha',
+                'document_color' => '#399787',
+                'document_type' => 'Berkas',
+                'document_id' => 'outside-system-non-business',
+                'visible_small_circle' => true,
+                'style' => 'top:10px;'
+            ])
+            @endcomponent
+            <div class="square dia-top-right-bottom-left" style="top:10px;left:180px;width:230px;height:120px;"></div>
+            @component('components.circle', [
+                'document_title' => 'Usaha',
+                'document_color' => '#5e7c89',
+                'document_type' => 'Berkas',
+                'document_id' => 'outside-system-business',
+                'visible_small_circle' => true,
+                'style' => 'top:300px;'
+                ])
+            @endcomponent
+            <div class="square dia-top-right-bottom-left" style="top:320px;left:170px;width:200px;height:100px;"></div>
+            
+            <div class="square dia-top-left-bottom-right" style="top:120px;left:180px;width:500px;height:120px;"></div>
+            <div class="square dia-top-left-bottom-right" style="top:410px;left:180px;width:500px;height:160px;"></div>
+        </div>
+        <div style="position: absolute; top: 50px; left: 350px; width: 200px; height: 550px;">
+            <div class="square" style="width:200px;height:2px;background-color:black;left:100px;top:70px;"></div>
+            <x-custom-circle title="Keterangan Rencana Kota (KRK)" size="large" style="background-color: #306364;position: absolute;" />
+            <x-custom-circle title="Keterangan Rencana Kota (KRK)" size="large" style="background-color: #38b64b;position: absolute; top: 320px;" />
+            <div class="square" style="width:200px;height:2px;background-color:black;left:100px;top:390px;"></div>
+        </div>
+        <div style="position: absolute; top: 50px; left: 600px; width: 200px; height: 650px;">
+            <x-custom-circle title="Samirindu DPMPTSP" size="large" style="background-color: #0e4753;position: absolute; top: 0px;" />
+            <x-custom-circle title="RAB dan Gambar" size="large" style="background-color: #f0195b;position: absolute; top: 160px;" />
+            <x-custom-circle title="OSS RBA (Nasional)" size="large" style="background-color: #38b64b;position: absolute; top: 320px;" />
+            <x-custom-circle title="Dokumen Lingkungan (DLH)" size="large" style="background-color: #393536;position: absolute; top: 480px;" />
+            <div class="square dia-top-left-bottom-right" style="top:50px;left:120px;width:250px;height:250px;"></div>
+            <div class="square dia-top-left-bottom-right" style="top:230px;left:120px;width:220px;height:100px;"></div>
+            <div class="square dia-top-right-bottom-left" style="top:320px;left:120px;width:200px;height:100px;"></div>
+            <div class="square dia-top-right-bottom-left" style="top:350px;left:120px;width:250px;height:200px;"></div>
+        </div>
+        <div style="position: absolute; top: 50px; left: 900px; width: 200px; height: 550px;">
+            <x-custom-circle title="Pemohon" size="large" style="background-color: #393536;position: absolute; top: 250px;" />
+        </div>
+    </div>
+</div>
+@endsection
+<!-- javascripts -->
+@section('scripts')
+@vite(['resources/js/dashboards/potentials/outside_system.js'])
+@endsection

resources/views/data-settings/index.blade.php

@@ -15,9 +15,14 @@
 		<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('data-settings.create')}}" class="btn btn-success btn-sm d-block d-sm-inline w-auto">Create</a>
+					@if ($creator)
+						<a href="{{ route('data-settings.create')}}" class="btn btn-success btn-sm d-block d-sm-inline w-auto">Create</a>
+					@endif
+				</div>
+				<div id="table-data-settings"
+                     data-updater="{{ $updater }}"
+                     data-destroyer="{{ $destroyer }}">
 				</div>
-				<div id="table-data-settings"></div>
 			</div>
 		</div>
 	</div>

resources/views/data/advertisements/index.blade.php

@@ -16,16 +16,21 @@
     <div class="card-body">
         <div class="row">
             <div class="d-flex justify-content-end gap-10 pb-3">
-                <button class="btn btn-success me-2 width-lg btn-create" data-model="data/advertisements">
+                @if ($creator)
-                    <i class='bx bxs-file-plus'></i>
+                    <button class="btn btn-success me-2 width-lg btn-create" data-model="data/advertisements">
-                    Create</button>
+                        <i class='bx bxs-file-plus'></i>
-                <button class="btn btn-primary width-lg btn-bulk-create" data-model="data/advertisements">
+                        Create</button>
-                    <i class='bx bx-upload' ></i>
+                    <button class="btn btn-primary width-lg btn-bulk-create" data-model="data/advertisements">
-                    Bulk Create
+                        <i class='bx bx-upload' ></i>
-                </button>
+                        Bulk Create
+                    </button>
+                @endif
             </div>
             <div>
-                <div id="reklame-data-table"></div>
+                <div id="reklame-data-table"
+                     data-updater="{{ $updater }}"
+                     data-destroyer="{{ $destroyer }}">
+                </div>
             </div>
         </div>
     </div>

resources/views/data/google-sheet/create.blade.php

@@ -0,0 +1,162 @@
+@extends('layouts.vertical', ['subtitle' => 'Menu'])
+
+@section('content')
+
+@include('layouts.partials/page-title', ['title' => 'Settings', 'subtitle' => 'Menu'])
+
+<x-toast-notification />
+<div class="row">
+    <div class="card">
+        <div class="card-header d-flex justify-content-end">
+            <a href="{{ route('google-sheets') }}" class="btn btn-sm btn-secondary">Back</a>
+        </div>
+        <form id="formCreateGoogleSheet" action="{{route("pbg-task-google-sheet.store")}}" method="post">
+            @csrf
+            <div class="row">
+                <div class="col-6">
+                    <div class="mb-3 mr-3">
+                        <label class="form-label" for="jenis_konsultasi">Jenis Konsultasi</label>
+                        <input type="text" id="jenis_konsultasi" name="jenis_konsultasi"
+                                class="form-control" placeholder="Jenis Konsultasi" >
+                    </div>
+                    <div class="mb-3 mr-3">
+                        <label class="form-label" for="no_registrasi">No Registrasi</label>
+                        <input type="text" id="no_registrasi" name="no_registrasi"
+                                class="form-control" placeholder="Nomor Registrasi" >
+                    </div>
+                    <div class="mb-3 mr-3">
+                        <label class="form-label" for="nama_pemilik">Nama Pemilik</label>
+                        <input type="text" id="nama_pemilik" name="nama_pemilik"
+                                class="form-control" placeholder="Nama Pemilik" >
+                    </div>
+                    <div class="mb-3 mr-3">
+                        <label class="form-label" for="lokasi_bg">Lokasi BG</label>
+                        <input type="text" id="lokasi_bg" name="lokasi_bg"
+                                class="form-control" placeholder="Lokasi BG" >
+                    </div>
+                    <div class="mb-3 mr-3">
+                        <label class="form-label" for="fungsi_bg">Fungsi BG</label>
+                        <input type="text" id="fungsi_bg" name="fungsi_bg"
+                                class="form-control" placeholder="Fungsi BG" >
+                    </div>
+                    <div class="mb-3 mr-3">
+                        <label class="form-label" for="nama_bangunan">Nama Bangunan</label>
+                        <input type="text" id="nama_bangunan" name="nama_bangunan"
+                                class="form-control" placeholder="Nama Bangunan" >
+                    </div>
+                    <div class="mb-3 mr-3">
+                        <label class="form-label" for="tgl_permohonan">Tanggal Permohonan</label>
+                        <input type="text" id="tgl_permohonan" name="tgl_permohonan"
+                                class="form-control" placeholder="Tanggal Permohonan" >
+                    </div>
+                    <div class="mb-3 mr-3">
+                        <label class="form-label" for="status_verifikasi">Status Verifikasi</label>
+                        <input type="text" id="status_verifikasi" name="status_verifikasi"
+                                class="form-control" placeholder="Status Verifikasi" >
+                    </div>
+                    <div class="mb-3 mr-3">
+                        <label class="form-label" for="status_permohonan">Status Permohonan</label>
+                        <input type="text" id="status_permohonan" name="status_permohonan"
+                                class="form-control" placeholder="Status Permohonan" >
+                    </div>
+                    <div class="mb-3 mr-3">
+                        <label class="form-label" for="status_permohonan">Status Permohonan</label>
+                        <input type="text" id="status_permohonan" name="status_permohonan"
+                                class="form-control" placeholder="Status Permohonan" >
+                    </div>
+                    <div class="mb-3 mr-3">
+                        <label class="form-label" for="alamat_pemilik">Alamat Pemilik</label>
+                        <input type="text" id="alamat_pemilik" name="alamat_pemilik"
+                                class="form-control" placeholder="Alamat Pemilik" >
+                    </div>
+                </div>
+                <div class="col-6">
+                    <div class="mb-3">
+                        <label class="form-label" for="no_hp">No Hp</label>
+                        <input type="text" id="no_hp" name="no_hp"
+                                class="form-control" placeholder="No Hp" >
+                    </div>
+                    <div class="mb-3">
+                        <label class="form-label" for="email">Email</label>
+                        <input type="text" id="email" name="email"
+                                class="form-control" placeholder="Email" >
+                    </div>
+                    <div class="mb-3">
+                        <label class="form-label" for="tanggal_catatan">Tanggal Catatan</label>
+                        <input type="text" id="tanggal_catatan" name="tanggal_catatan"
+                                class="form-control" placeholder="Tanggal Catatan" >
+                    </div>
+                    <div class="mb-3">
+                        <label class="form-label" for="catatan_kekurangan_dokumen">Catatan Kekurangan Dokumen</label>
+                        <input type="text" id="catatan_kekurangan_dokumen" name="catatan_kekurangan_dokumen"
+                                class="form-control" placeholder="Catatan Kekurangan Dokumen" >
+                    </div>
+                    <div class="mb-3">
+                        <label class="form-label" for="gambar">Gambar</label>
+                        <input type="text" id="gambar" name="gambar"
+                                class="form-control" placeholder="Gambar" >
+                    </div>
+                    <div class="mb-3">
+                        <label class="form-label" for="krk_kkpr">KRK KKPR</label>
+                        <input type="text" id="krk_kkpr" name="krk_kkpr"
+                                class="form-control" placeholder="KRK KKPR" >
+                    </div>
+                    <div class="mb-3">
+                        <label class="form-label" for="no_krk">NO KRK</label>
+                        <input type="text" id="no_krk" name="no_krk"
+                                class="form-control" placeholder="NO KRK" >
+                    </div>
+                    <div class="mb-3">
+                        <label class="form-label" for="lh">LH</label>
+                        <input type="text" id="lh" name="lh"
+                                class="form-control" placeholder="LH" >
+                    </div>
+                    <div class="mb-3">
+                        <label class="form-label" for="ska">SKA</label>
+                        <input type="text" id="ska" name="ska"
+                                class="form-control" placeholder="SKA" >
+                    </div>
+                    <div class="mb-3">
+                        <label class="form-label" for="keterangan">Keterangan</label>
+                        <input type="text" id="keterangan" name="keterangan"
+                                class="form-control" placeholder="Keterangan" >
+                    </div>
+                    <div class="mb-3">
+                        <label class="form-label" for="helpdesk">Help Desk</label>
+                        <input type="text" id="helpdesk" name="helpdesk"
+                                class="form-control" placeholder="Help Desk" >
+                    </div>
+                    <div class="mb-3">
+                        <label class="form-label" for="pj">PJ</label>
+                        <input type="text" id="pj" name="pj" class="form-control" placeholder="PJ" >
+                    </div>
+                    <div class="mb-3">
+                        <label class="form-label" for="kepemilikan">Kepemilikan</label>
+                        <input type="text" id="kepemilikan" name="kepemilikan" class="form-control" placeholder="Kepemilikan" >
+                    </div>
+                    <div class="mb-3">
+                        <label class="form-label" for="potensi_taru">Potensi Taru</label>
+                        <input type="text" id="potensi_taru" name="potensi_taru" class="form-control" placeholder="Potensi Taru" >
+                    </div>
+                    <div class="mb-3">
+                        <label class="form-label" for="validasi_dinas">Validasi Dinas</label>
+                        <input type="text" id="validasi_dinas" name="validasi_dinas" class="form-control" placeholder="Validasi Dinas" >
+                    </div>
+                    <div class="mb-3">
+                        <label class="form-label" for="kategori_retribusi">Kategori Retribusi</label>
+                        <input type="text" id="kategori_retribusi" name="kategori_retribusi" class="form-control" placeholder="Kategori Retribusi" >
+                    </div>
+                </div>
+            </div>
+            <button class="btn btn-primary me-1" type="button" id="btnCreateGoogleSheet">
+                <span id="spinner" class="spinner-border spinner-border-sm me-1 d-none" role="status" aria-hidden="true"></span>
+                Create
+            </button>
+        </form>
+    </div>
+</div>
+
+@endsection
+
+@section('scripts')
+@endsection

resources/views/data/google-sheet/edit.blade.php

@@ -0,0 +1,3 @@
+<div>
+    <!-- Always remember that you are absolutely unique. Just like everyone else. - Margaret Mead -->
+</div>

resources/views/data/google-sheet/index.blade.php

@@ -0,0 +1,35 @@
+@extends('layouts.vertical', ['subtitle' => 'Google Sheets'])
+
+@section('css')
+@vite(['node_modules/gridjs/dist/theme/mermaid.min.css'])
+@endsection
+
+@section('content')
+
+@include('layouts.partials/page-title', ['title' => 'Data', 'subtitle' => 'Google Sheets'])
+
+<x-toast-notification />
+
+<div class="row">
+	<div class="col-12">
+		<div class="card w-100">
+			<div class="card-body">
+				<div class="d-flex flex-wrap justify-content-end align-items-center mb-2">
+					@if ($user_menu_permission['allow_create'])
+						<a href="#" class="btn btn-success btn-sm d-block d-sm-inline w-auto">Create</a>
+					@endif
+				</div>
+				<div id="table-data-google-sheets"
+                     data-updater="{{ $user_menu_permission['allow_update'] }}"
+                     data-destroyer="{{ $user_menu_permission['allow_destroy'] }}">
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
+
+@endsection
+
+@section('scripts')
+@vite(['resources/js/data/google-sheet/index.js'])
+@endsection

resources/views/data/google-sheet/show.blade.php

@@ -0,0 +1,90 @@
+@extends('layouts.vertical', ['subtitle' => 'Google Sheets'])
+
+@section('css')
+@endsection
+
+@section('content')
+
+@include('layouts.partials/page-title', ['title' => 'Data', 'subtitle' => 'Google Sheets'])
+
+<x-toast-notification />
+<div class="card w-100">
+  <div class="card-header d-flex justify-content-end">
+    <a href="{{ route('google-sheets', ['menu_id' => 32]) }}" class="btn btn-sm btn-secondary">Back</a>
+  </div>
+  <div class="card-body">
+    <div class="row">
+      @php
+        function displayData($label, $value) {
+            echo "<dt>{$label}</dt><dd>" . (!empty($value) ? $value : '-') . "</dd>";
+        }
+      @endphp
+
+      <div class="col-sm-6 col-md-6 col-lg-6">
+          @php
+            displayData('Jenis Konsultasi', $data->jenis_konsultasi);
+            displayData('No Registrasi', $data->no_registrasi);
+            displayData('Nama Pemilik', $data->nama_pemilik);
+            displayData('Lokasi Bangunan', $data->lokasi_bg);
+            displayData('Fungsi Bangunan', $data->fungsi_bg);
+            displayData('Nama Bangunan', $data->nama_bangunan);
+            displayData('Tanggal Permohonan', $data->tgl_permohonan);
+            displayData('Status Verifikasi', $data->status_verifikasi);
+            displayData('Status Permohonan', $data->status_permohonan);
+            displayData('Alamat Pemilik', $data->alamat_pemilik);
+            displayData('No Hp', $data->no_hp);
+            displayData('Email', $data->email);
+            displayData('Tanggal Catatan', $data->tanggal_catatan);
+            displayData('Catatan Kekurangan Dokumen', $data->catatan_kekurangan_dokumen);
+            displayData('Gambar', $data->gambar);
+            displayData('KRK KKPR', $data->krk_kkpr);
+            displayData('No KRK', $data->no_krk);
+            displayData('LH', $data->lh);
+            displayData('SKA', $data->ska);
+            displayData('Keterangan', $data->keterangan);
+            displayData('Helpdesk', $data->helpdesk);
+            displayData('PJ', $data->pj);
+            displayData('Kepemilikan', $data->Kepemilikan);
+            displayData('Potensi Taru', $data->potensi_taru);
+            displayData('Validasi Dinas', $data->validasi_dinas);
+            displayData('Kategori Retribusi', $data->kategori_retribusi);
+          @endphp
+      </div>
+
+      <div class="col-sm-6 col-md-6 col-lg-6">
+          @php
+            displayData('No Urut BA TPT', $data->no_urut_ba_tpt);
+            displayData('Tanggal BA TPT', $data->tanggal_ba_tpt);
+            displayData('No Urut BA TPA', $data->no_urut_ba_tpa);
+            displayData('Tanggal BA TPA', $data->tanggal_ba_tpa);
+            displayData('No Urut SKRD', $data->no_urut_skrd);
+            displayData('Tanggal SKRD', $data->tanggal_skrd);
+            displayData('PTSP', $data->ptsp);
+            displayData('Selesai Terbit', $data->selesai_terbit);
+            displayData('Tanggal Pembayaran', $data->tanggal_pembayaran);
+            displayData('Format STS', $data->format_sts);
+            displayData('Tahun Terbit', $data->tahun_terbit);
+            displayData('Tahun Berjalan', $data->tahun_berjalan);
+            displayData('Kelurahan', $data->kelurahan);
+            displayData('Kecamatan', $data->kecamatan);
+            displayData('LB', $data->lb);
+            displayData('TB', $data->tb);
+            displayData('JLB', $data->jlb);
+            displayData('Unit', $data->unit);
+            displayData('Usulan Retribusi', $data->usulan_retribusi);
+            displayData('Nilai Retribusi Keseluruhan SIMBG', $data->nilai_retribusi_keseluruhan_simbg);
+            displayData('Nilai Retribusi Keseluruhan PAD', $data->nilai_retribusi_keseluruhan_pad);
+            displayData('Denda', $data->denda);
+            displayData('Latitude', $data->latitude);
+            displayData('Longitude', $data->longitude);
+            displayData('NIK NIB', $data->nik_nib);
+            displayData('Dokumen Tanah', $data->dok_tanah);
+            displayData('Temuan', $data->temuan);
+          @endphp
+      </div>
+    </div>
+  </div>
+</div>
+
+
+@endsection

resources/views/data/spatialPlannings/index.blade.php

@@ -14,16 +14,21 @@
     <div class="card-body">
         <div class="row">
             <div class="d-flex justify-content-end gap-10 pb-3">
-                <button class="btn btn-success me-2 width-lg btn-create" data-model="data/spatial-plannings">
+                @if ($creator)
-                    <i class='bx bxs-file-plus'></i>
+                    <button class="btn btn-success me-2 width-lg btn-create" data-model="data/spatial-plannings">
-                    Create</button>
+                        <i class='bx bxs-file-plus'></i>
-                <button class="btn btn-primary width-lg btn-bulk-create" data-model="data/spatial-plannings">
+                        Create</button>
-                    <i class='bx bx-upload' ></i>
+                    <button class="btn btn-primary width-lg btn-bulk-create" data-model="data/spatial-plannings">
-                    Bulk Create
+                        <i class='bx bx-upload' ></i>
-                </button>
+                        Bulk Create
+                    </button>
+                @endif
             </div>
             <div>
-                <div id="spatial-planning-data-table"></div>
+                <div id="spatial-planning-data-table"
+                    data-updater="{{ $updater }}"
+                    data-destroyer="{{ $destroyer }}">
+                </div>
             </div>
         </div>
     </div>

resources/views/data/tourisms/index.blade.php

@@ -14,16 +14,21 @@
     <div class="card-body">
         <div class="row">
             <div class="d-flex justify-content-end gap-10 pb-3">
-                <button class="btn btn-success me-2 width-lg btn-create" data-model="data/tourisms">
+                @if ($creator)
-                    <i class='bx bxs-file-plus'></i>
+                    <button class="btn btn-success me-2 width-lg btn-create" data-model="data/tourisms">
-                    Create</button>
+                        <i class='bx bxs-file-plus'></i>
-                <button class="btn btn-primary width-lg btn-bulk-create" data-model="data/tourisms">
+                        Create</button>
-                    <i class='bx bx-upload' ></i>
+                    <button class="btn btn-primary width-lg btn-bulk-create" data-model="data/tourisms">
-                    Bulk Create
+                        <i class='bx bx-upload' ></i>
-                </button>
+                        Bulk Create
+                    </button>
+                @endif
             </div>
             <div>
-                <div id="tourisms-data-table"></div>
+                <div id="tourisms-data-table"
+                    data-updater="{{ $updater }}"
+                    data-destroyer="{{ $destroyer }}">
+                </div>
             </div>
         </div>
     </div>
@@ -35,25 +40,21 @@
     <div class="modal-dialog modal-dialog-centered modal-lg  modal-sm">
         <div class="modal-content">
             <div class="modal-header">
+                <div id="loading" style="display: none; text-align: center; padding: 20px;">
+                    <div class="spinner-border" role="status">
+                        <span class="visually-hidden">Loading...</span>
+                    </div>
+                </div>
                 <button type="button" class="btn-close" data-bs-dismiss="modal"
                     aria-label="Close"></button>
             </div>
             <div class="modal-body">
-                <iframe 
+                <div id="map" style="height: 400px;"></div>
-                        src="" 
-                        width="100%" 
-                        height="450" 
-                        style="border:0;" 
-                        allowfullscreen="" 
-                        loading="lazy">
-                </iframe>
             </div>
         </div>
     </div>
 </div>
 
-{{-- <div id="alert-container"></div> --}}
-
 @endsection
 
 @section('scripts')

resources/views/data/umkm/index.blade.php

@@ -14,16 +14,21 @@
     <div class="card-body">
         <div class="row">
             <div class="d-flex justify-content-end gap-10 pb-3">
-                <button class="btn btn-success me-2 width-lg btn-create" data-model="data/umkm">
+                @if ($creator)
-                    <i class='bx bxs-file-plus'></i>
+                    <button class="btn btn-success me-2 width-lg btn-create" data-model="data/umkm">
-                    Create</button>
+                        <i class='bx bxs-file-plus'></i>
-                <button class="btn btn-primary width-lg btn-bulk-create" data-model="data/umkm">
+                        Create</button>
-                    <i class='bx bx-upload' ></i>
+                    <button class="btn btn-primary width-lg btn-bulk-create" data-model="data/umkm">
-                    Bulk Create
+                        <i class='bx bx-upload' ></i>
-                </button>
+                        Bulk Create
+                    </button>
+                @endif
             </div>
             <div>
-                <div id="umkm-data-table"></div>
+                <div id="umkm-data-table"
+                    data-updater="{{ $updater }}"
+                    data-destroyer="{{ $destroyer }}">
+                </div>
             </div>
         </div>
     </div>

resources/views/home/index.blade.php

@@ -1,396 +1,9 @@
-@extends('layouts.vertical', ['subtitle' => 'Dashboard'])
+@extends('layouts.vertical', ['subtitle' => 'Home'])
 
 @section('content')
 
-@include('layouts.partials/page-title', ['title' => 'Home', 'subtitle' => 'Dashboard'])
+@include('layouts.partials/page-title', ['title' => 'Home', 'subtitle' => 'Home'])
 
-<div class="row">
-    <!-- Card 1 -->
-    <div class="col-md-6 col-xl-3">
-        <div class="card">
-            <div class="card-body">
-                <div class="row">
-                    <div class="col-6">
-                        <p class="text-muted mb-0 text-truncate">Total Income</p>
-                        <h3 class="text-dark mt-2 mb-0">$78.8k</h3>
-                    </div>
-
-                    <div class="col-6">
-                        <div class="ms-auto avatar-md bg-soft-primary rounded">
-                            <iconify-icon icon="solar:globus-outline"
-                                class="fs-32 avatar-title text-primary"></iconify-icon>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div id="chart01"></div>
-        </div>
-    </div>
-
-    <!-- Card 2 -->
-    <div class="col-md-6 col-xl-3">
-        <div class="card">
-            <div class="card-body">
-                <div class="row">
-                    <div class="col-6">
-                        <p class="text-muted mb-0 text-truncate">New Users</p>
-                        <h3 class="text-dark mt-2 mb-0">2,150</h3>
-                    </div>
-
-                    <div class="col-6">
-                        <div class="ms-auto avatar-md bg-soft-primary rounded">
-                            <iconify-icon icon="solar:users-group-two-rounded-broken"
-                                class="fs-32 avatar-title text-primary"></iconify-icon>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div id="chart02"></div>
-        </div>
-    </div>
-
-    <!-- Card 3 -->
-    <div class="col-md-6 col-xl-3">
-        <div class="card">
-            <div class="card-body">
-                <div class="row">
-                    <div class="col-6">
-                        <p class="text-muted mb-0 text-truncate">Orders</p>
-                        <h3 class="text-dark mt-2 mb-0">1,784</h3>
-                    </div>
-
-                    <div class="col-6">
-                        <div class="ms-auto avatar-md bg-soft-primary rounded">
-                            <iconify-icon icon="solar:cart-5-broken"
-                                class="fs-32 avatar-title text-primary"></iconify-icon>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div id="chart03"></div>
-        </div>
-    </div>
-
-    <!-- Card 4 -->
-    <div class="col-md-6 col-xl-3">
-        <div class="card">
-            <div class="card-body">
-                <div class="row">
-                    <div class="col-6">
-                        <p class="text-muted mb-0 text-truncate">Conversion Rate</p>
-                        <h3 class="text-dark mt-2 mb-0">12.3%</h3>
-                    </div>
-
-                    <div class="col-6">
-                        <div class="ms-auto avatar-md bg-soft-primary rounded">
-                            <iconify-icon icon="solar:pie-chart-2-broken"
-                                class="fs-32 avatar-title text-primary"></iconify-icon>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div id="chart04"></div>
-        </div>
-    </div>
-</div>
-
-
-
-<div class="row">
-    <div class="col-lg-4">
-        <div class="card card-height-100">
-            <div class="card-header d-flex align-items-center justify-content-between gap-2">
-                <h4 class=" mb-0 flex-grow-1 mb-0">Revenue</h4>
-                <div>
-                    <button type="button" class="btn btn-sm btn-outline-light">ALL</button>
-                    <button type="button" class="btn btn-sm btn-outline-light">1M</button>
-                    <button type="button" class="btn btn-sm btn-outline-light">6M</button>
-                    <button type="button" class="btn btn-sm btn-outline-light active">1Y</button>
-                </div>
-            </div>
-
-            <div class="card-body pt-0">
-                <div dir="ltr">
-                    <div id="dash-performance-chart" class="apex-charts"></div>
-                </div>
-            </div>
-
-        </div> <!-- end card-->
-    </div> <!-- end col -->
-
-    <div class="col-lg-4">
-        <div class="card card-height-100">
-            <div class="card-header d-flex align-items-center justify-content-between gap-2">
-                <h4 class="card-title flex-grow-1 mb-0">Sales By Category</h4>
-                <div>
-                    <button type="button" class="btn btn-sm btn-outline-light">ALL</button>
-                    <button type="button" class="btn btn-sm btn-outline-light">1M</button>
-                    <button type="button" class="btn btn-sm btn-outline-light">6M</button>
-                    <button type="button" class="btn btn-sm btn-outline-light active">1Y</button>
-                </div>
-            </div>
-
-            <div class="card-body">
-                <div dir="ltr">
-                    <div id="conversions" class="apex-charts"></div>
-                </div>
-                <div class="table-responsive mb-n1 mt-2">
-                    <table class="table table-nowrap table-borderless table-sm table-centered mb-0">
-                        <thead class="bg-light bg-opacity-50 thead-sm">
-                            <tr>
-                                <th class="py-1">
-                                    Category
-                                </th>
-                                <th class="py-1">Orders</th>
-                                <th class="py-1">Perc.</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr>
-                                <td>Grocery</td>
-                                <td>187,232</td>
-                                <td>
-                                    48.63%
-                                    <span class="badge badge-soft-success float-end">2.5% Up</span>
-                                </td>
-                            </tr>
-                            <tr>
-                                <td>Electonics</td>
-                                <td>126,874</td>
-                                <td>
-                                    36.08%
-                                    <span class="badge badge-soft-success float-end">8.5% Up</span>
-                                </td>
-                            </tr>
-                            <tr>
-                                <td>Other</td>
-                                <td>90,127</td>
-                                <td>
-                                    23.41%
-                                    <span class="badge badge-soft-danger float-end">10.98% Down</span>
-                                </td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-                <!-- end table-responsive-->
-            </div>
-
-        </div> <!-- end card-->
-    </div> <!-- end col -->
-
-    <div class="col-lg-4">
-        <div class="card">
-            <div
-                class="d-flex card-header justify-content-between align-items-center border-bottom border-dashed">
-                <h4 class="card-title mb-0">Sessions by Country</h4>
-                <div class="dropdown">
-                    <a href="#" class="dropdown-toggle btn btn-sm btn-outline-light"
-                        data-bs-toggle="dropdown" aria-expanded="false">
-                        View Data
-                    </a>
-                    <div class="dropdown-menu dropdown-menu-end">
-                        <!-- item-->
-                        <a href="javascript:void(0);" class="dropdown-item">Download</a>
-                        <!-- item-->
-                        <a href="javascript:void(0);" class="dropdown-item">Export</a>
-                        <!-- item-->
-                        <a href="javascript:void(0);" class="dropdown-item">Import</a>
-                    </div>
-                </div>
-            </div>
-
-            <div class="card-body pt-0">
-                <div id="world-map-markers" class="mt-3" style="height: 309px">
-                </div>
-            </div> <!-- end card-body-->
-
-
-        </div> <!-- end card-->
-    </div> <!-- end col-->
-
-</div> <!-- End row -->
-
-<div class="row">
-    <div class="col-xl-6">
-        <div class="card">
-            <div class="card-header d-flex justify-content-between align-items-center">
-                <h4 class="card-title mb-0">New Accounts</h4>
-                <a href="#!" class="btn btn-sm btn-light">
-                    View All
-                </a>
-            </div>
-            <!-- end card-header-->
-
-            <div class="card-body pb-1">
-                <div class="table-responsive">
-                    <table class="table table-hover mb-0 table-centered">
-                        <thead>
-                            <th class="py-1">ID</th>
-                            <th class="py-1">Date</th>
-                            <th class="py-1">User</th>
-                            <th class="py-1">Account</th>
-                            <th class="py-1">Username</th>
-                        </thead>
-                        <tbody>
-                            <tr>
-                                <td>#US523</td>
-                                <td>24 April, 2024</td>
-                                <td>
-                                    <img src="/images/users/avatar-2.jpg" alt="avatar-2"
-                                        class="img-fluid avatar-xs rounded-circle" />
-                                    <span class="align-middle ms-1">Dan Adrick</span>
-                                </td>
-                                <td>
-                                    <span class="badge badge-soft-success">Verified</span>
-                                </td>
-                                <td>@omions</td>
-                            </tr>
-                            <tr>
-                                <td>#US652</td>
-                                <td>24 April, 2024</td>
-                                <td>
-                                    <img src="/images/users/avatar-3.jpg" alt="avatar-2"
-                                        class="img-fluid avatar-xs rounded-circle" />
-                                    <span class="align-middle ms-1">Daniel Olsen</span>
-                                </td>
-                                <td>
-                                    <span class="badge badge-soft-success">Verified</span>
-                                </td>
-                                <td>@alliates</td>
-                            </tr>
-                            <tr>
-                                <td>#US862</td>
-                                <td>20 April, 2024</td>
-                                <td>
-                                    <img src="/images/users/avatar-4.jpg" alt="avatar-2"
-                                        class="img-fluid avatar-xs rounded-circle" />
-                                    <span class="align-middle ms-1">Jack Roldan</span>
-                                </td>
-                                <td>
-                                    <span class="badge badge-soft-warning">Pending</span>
-                                </td>
-                                <td>@griys</td>
-                            </tr>
-                            <tr>
-                                <td>#US756</td>
-                                <td>18 April, 2024</td>
-                                <td>
-                                    <img src="/images/users/avatar-5.jpg" alt="avatar-2"
-                                        class="img-fluid avatar-xs rounded-circle" />
-                                    <span class="align-middle ms-1">Betty Cox</span>
-                                </td>
-                                <td>
-                                    <span class="badge badge-soft-success">Verified</span>
-                                </td>
-                                <td>@reffon</td>
-                            </tr>
-                            <tr>
-                                <td>#US420</td>
-                                <td>18 April, 2024</td>
-                                <td>
-                                    <img src="/images/users/avatar-6.jpg" alt="avatar-2"
-                                        class="img-fluid avatar-xs rounded-circle" />
-                                    <span class="align-middle ms-1">Carlos
-                                        Johnson</span>
-                                </td>
-                                <td>
-                                    <span class="badge badge-soft-danger">Blocked</span>
-                                </td>
-                                <td>@bebo</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-            </div>
-            <!-- end card body -->
-        </div>
-        <!-- end card-->
-    </div>
-    <!-- end col -->
-
-    <div class="col-xl-6">
-        <div class="card">
-            <div class="card-header d-flex justify-content-between align-items-center">
-                <h4 class="card-title mb-0">
-                    Recent Transactions
-                </h4>
-
-                <a href="#!" class="btn btn-sm btn-light">
-                    View All
-                </a>
-            </div>
-            <!-- end card-header-->
-
-            <div class="card-body">
-                <div class="table-responsive">
-                    <table class="table table-hover mb-0 table-centered">
-                        <thead>
-                            <th class="py-1">ID</th>
-                            <th class="py-1">Date</th>
-                            <th class="py-1">Amount</th>
-                            <th class="py-1">Status</th>
-                            <th class="py-1">
-                                Description
-                            </th>
-                        </thead>
-                        <tbody>
-                            <tr>
-                                <td>#98521</td>
-                                <td>24 April, 2024</td>
-                                <td>$120.55</td>
-                                <td>
-                                    <span class="badge bg-success">Cr</span>
-                                </td>
-                                <td>Commisions</td>
-                            </tr>
-                            <tr>
-                                <td>#20158</td>
-                                <td>24 April, 2024</td>
-                                <td>$9.68</td>
-                                <td>
-                                    <span class="badge bg-success">Cr</span>
-                                </td>
-                                <td>Affiliates</td>
-                            </tr>
-                            <tr>
-                                <td>#36589</td>
-                                <td>20 April, 2024</td>
-                                <td>$105.22</td>
-                                <td>
-                                    <span class="badge bg-danger">Dr</span>
-                                </td>
-                                <td>Grocery</td>
-                            </tr>
-                            <tr>
-                                <td>#95362</td>
-                                <td>18 April, 2024</td>
-                                <td>$80.59</td>
-                                <td>
-                                    <span class="badge bg-success">Cr</span>
-                                </td>
-                                <td>Refunds</td>
-                            </tr>
-                            <tr>
-                                <td>#75214</td>
-                                <td>18 April, 2024</td>
-                                <td>$750.95</td>
-                                <td>
-                                    <span class="badge bg-danger">Dr</span>
-                                </td>
-                                <td>Bill Payments</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-            </div>
-            <!-- end card body -->
-        </div>
-        <!-- end card-->
-    </div>
-    <!-- end col -->
-</div>
-<!-- end row -->
 @endsection
 
 @section('scripts')

resources/views/invitations/index.blade.php

@@ -0,0 +1,45 @@
+@extends('layouts.vertical', ['subtitle' => 'Undangan'])
+
+@section('css')
+@vite(['node_modules/gridjs/dist/theme/mermaid.min.css'])
+@endsection
+
+@section('content')
+
+@include('layouts.partials/page-title', ['title' => 'Tools', 'subtitle' => 'Undangan'])
+
+<x-toast-notification />
+
+<div class="container">
+    <div class="row justify-content-center">
+        <!-- Bagian Kirim Undangan -->
+        <div class="col-lg-8 col-md-10">
+            <div class="card shadow-sm">
+                <div class="card-body">
+                    <h5 class="card-title">Kirim Undangan</h5>
+                    <label for="email-textarea" class="form-label">Alamat Email</label>
+                    <textarea class="form-control mb-3" id="email-textarea" rows="4" placeholder="Masukkan email, pisahkan dengan koma..."></textarea>
+                    <div class="d-flex justify-content-end">
+                        <button class="btn btn-info btn-sm px-4 btn-send-invitations">Kirim</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Bagian Tabel Undangan -->
+        <div class="col-lg-10 col-md-12 mt-4">
+            <div class="card shadow-sm">
+                <div class="card-body">
+                    <h5 class="card-title">Log Undangan</h5>
+                    <div id="table-invitations"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+@endsection
+
+@section('scripts')
+@vite(['resources/js/invitations/index.js'])
+@endsection