add vite js customers

app/Http/Controllers/Api/CustomersController.php

@@ -0,0 +1,130 @@
+<?php
+
+namespace App\Http\Controllers\Api;
+
+use App\Http\Controllers\Controller;
+use App\Http\Requests\CustomersRequest;
+use App\Http\Requests\ExcelUploadRequest;
+use App\Http\Resources\CustomersResource;
+use App\Imports\CustomersImport;
+use App\Models\Customer;
+use Illuminate\Http\Request;
+use Maatwebsite\Excel\Facades\Excel;
+
+class CustomersController extends Controller
+{
+    /**
+     * Display a listing of the resource.
+     */
+    public function index(Request $request)
+    {
+        $query = Customer::query()->orderBy('id', 'desc');
+        if ($request->has('search') &&!empty($request->get('search'))) {
+            $query = $query->where('nomor_pelanggan', 'LIKE', '%'.$request->get('search').'%')
+                ->orWhere('nama', 'LIKE', '%'.$request->get('search').'%')
+                ->orWhere('kota_palayanan', 'LIKE', '%'.$request->get('search').'%');
+        }
+        return CustomersResource::collection($query->paginate());
+    }
+
+    /**
+     * Store a newly created resource in storage.
+     */
+    public function store(CustomersRequest $request)
+    {
+        try{
+            $customer = Customer::create($request->validated());
+            return response()->json(['message' => 'Successfully created', new CustomersResource($customer)]);
+        }catch(\Exception $e){
+            return response()->json([
+                'message' => 'Failed to create customer',
+                'error' => $e->getMessage()
+            ], 500);
+        }
+    }
+
+    /**
+     * Display the specified resource.
+     */
+    public function show(string $id)
+    {
+        try{
+            $customer = Customer::find($id);
+            if($customer){
+                return new CustomersResource($customer);
+            } else {
+                return response()->json(['message' => 'Customer not found'], 404);
+            }
+        }catch(\Exception $e){
+            return response()->json([
+                'message' => 'Failed to retrieve customer',
+                'error' => $e->getMessage()
+            ], 500);
+        }
+    }
+
+    /**
+     * Update the specified resource in storage.
+     */
+    public function update(CustomersRequest $request, string $id)
+    {
+        try{
+            $customer = Customer::find($id);
+            if($customer){
+                $customer->update($request->validated());
+                return response()->json(['message' => 'Successfully updated', new CustomersResource($customer)]);
+            } else {
+                return response()->json(['message' => 'Customer not found'], 404);
+            }
+        }catch(\Exception $e) {
+            return response()->json([
+                'message' => 'Failed to update customer',
+                'error' => $e->getMessage()
+            ], 500);
+        }
+    }
+
+    /**
+     * Remove the specified resource from storage.
+     */
+    public function destroy(string $id)
+    {
+        try{
+            $customer = Customer::find($id);
+            if($customer){
+                $customer->delete();
+                return response()->json(['message' => 'Successfully deleted']);
+            }else {
+                return response()->json(['message' => 'Customer not found'], 404);
+            }
+        }catch(\Exception $e) {
+            return response()->json([
+                'message' => 'Failed to delete customer',
+                'error' => $e->getMessage()
+            ], 500);
+        }
+    }
+
+    public function upload(ExcelUploadRequest $request){
+        try{
+            if(!$request->hasFile('file')){
+                return response()->json([
+                   'error' => 'No file provided'
+                ], 400);
+            }
+
+            $file = $request->file('file');
+            Excel::import(new CustomersImport, $file);
+
+            return response()->json([
+                'message' => 'File uploaded successfully',
+            ]);
+        }catch(\Exception $e){
+            \Log::info($e->getMessage());
+            return response()->json([
+                'error' => 'Failed to upload file',
+               'message' => $e->getMessage()
+            ], 500);
+        }
+    }
+}

app/Http/Controllers/Api/SpatialPlanningsController.php

@@ -0,0 +1,103 @@
+<?php
+
+namespace App\Http\Controllers\Api;
+
+use App\Http\Controllers\Controller;
+use App\Http\Requests\ExcelUploadRequest;
+use App\Http\Requests\SpatialPlanningsRequest;
+use App\Http\Resources\SpatialPlanningsResource;
+use App\Imports\SpatialPlanningImport;
+use App\Models\SpatialPlanning;
+use Illuminate\Http\Request;
+use Maatwebsite\Excel\Facades\Excel;
+
+class SpatialPlanningsController extends Controller
+{
+    /**
+     * Display a listing of the resource.
+     */
+    public function index(Request $request)
+    {
+        $query = SpatialPlanning::query()->orderBy('id', 'desc');
+        if ($request->has("search") &&!empty($request->get("search"))) {
+            $query = $query->where("name", "LIKE", "%{$request->get("search")}%")
+                ->orWhere("nomor", "LIKE", "%{$request->get("search")}%");
+        }
+        return SpatialPlanningsResource::collection($query->paginate());
+    }
+    
+    public function store(SpatialPlanningsRequest $request)
+    {
+        try{
+            $validated = $request->validated();
+            $data = SpatialPlanning::create($validated);
+            return response()->json(['message' => 'Successfully created', new SpatialPlanningsResource($data)]);
+        }catch(\Exception $e){
+            return response()->json([
+                'message' => $e->getMessage()
+            ], 500);
+        }
+    }
+
+    /**
+     * Display the specified resource.
+     */
+    public function show(string $id)
+    {
+        //
+    }
+
+    /**
+     * Update the specified resource in storage.
+     */
+    public function update(SpatialPlanningsRequest $request, string $id)
+    {
+        try{
+            $validated = $request->validated();
+            $data = SpatialPlanning::find($id);
+            $data->update($validated);
+            return response()->json(['message' => 'Successfully updated', new SpatialPlanningsResource($data)]);
+        }catch(\Exception $e){
+            return response()->json([
+               'message' => $e->getMessage()
+            ], 500);
+        }
+    }
+
+    /**
+     * Remove the specified resource from storage.
+     */
+    public function destroy(string $id)
+    {
+        try{
+            SpatialPlanning::destroy($id);
+            return response()->json([
+               'message' => 'Successfully deleted'
+            ], 200);
+        }catch(\Exception $e){
+            return response()->json([
+                'message' => $e->getMessage()
+            ], 500);
+        }
+    }
+
+    public function upload(ExcelUploadRequest $request){
+        try{
+            if(!$request->hasFile('file')){
+                return response()->json([
+                   'error' => 'No file provided'
+                ], 400);
+            }
+
+            $file = $request->file('file');
+            Excel::import(new SpatialPlanningImport, $file); 
+            return response()->json([
+               'message' => 'Successfully imported'
+            ], 200);
+        }catch(\Exception $e){
+            return response()->json([
+                'error' => $e->getMessage()
+            ], 500);
+        }
+    }
+}

app/Http/Controllers/CustomersController.php

@@ -0,0 +1,26 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Models\Customer;
+use Illuminate\Http\Request;
+
+class CustomersController extends Controller
+{
+    public function index()
+    {
+        return view('customers.index');
+    }
+    public function create()
+    {
+        return view('customers.create');
+    }
+    public function edit(string $id)
+    {
+        $data = Customer::findOrFail($id);
+        return view('customers.edit', compact('data'));
+    }
+    public function upload(){
+        return view('customers.upload');
+    }
+}

app/Http/Controllers/SpatialPlanningsController.php

@@ -0,0 +1,28 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Models\SpatialPlanning;
+use Illuminate\Http\Request;
+
+class SpatialPlanningsController extends Controller
+{
+    public function index()
+    {
+        return view('spatial-plannings.index');
+    }
+    public function create()
+    {
+        return view('spatial-plannings.create');
+    }
+
+    public function edit(string $id)
+    {
+        $data = SpatialPlanning::findOrFail($id);
+        return view('spatial-plannings.update', compact('data'));
+    }
+
+    public function upload (){
+        return view('spatial-plannings.upload');
+    }
+}

app/Http/Requests/CustomersRequest.php

@@ -0,0 +1,33 @@
+<?php
+
+namespace App\Http\Requests;
+
+use Illuminate\Foundation\Http\FormRequest;
+
+class CustomersRequest extends FormRequest
+{
+    /**
+     * Determine if the user is authorized to make this request.
+     */
+    public function authorize(): bool
+    {
+        return true;
+    }
+
+    /**
+     * Get the validation rules that apply to the request.
+     *
+     * @return array<string, \Illuminate\Contracts\Validation\ValidationRule|array<mixed>|string>
+     */
+    public function rules(): array
+    {
+        return [
+            'nomor_pelanggan' => ['required', 'string'],
+            'kota_pelayanan' => ['required', 'string'],
+            'nama' => ['required', 'string'],
+            'alamat' => ['required', 'string'],
+            'latitude' => ['required', 'numeric', 'between:-90,90'],
+            'longitude' => ['required', 'numeric', 'between:-180,180'],
+        ];
+    }
+}

app/Http/Requests/ExcelUploadRequest.php

@@ -0,0 +1,28 @@
+<?php
+
+namespace App\Http\Requests;
+
+use Illuminate\Foundation\Http\FormRequest;
+
+class ExcelUploadRequest extends FormRequest
+{
+    /**
+     * Determine if the user is authorized to make this request.
+     */
+    public function authorize(): bool
+    {
+        return true;
+    }
+
+    /**
+     * Get the validation rules that apply to the request.
+     *
+     * @return array<string, \Illuminate\Contracts\Validation\ValidationRule|array<mixed>|string>
+     */
+    public function rules(): array
+    {
+        return [
+            "file" => "required|file|mimes:xlsx,xls|max:102400"
+        ];
+    }
+}

app/Http/Requests/SpatialPlanningsRequest.php

@@ -0,0 +1,35 @@
+<?php
+
+namespace App\Http\Requests;
+
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Validation\Rule;
+
+class SpatialPlanningsRequest extends FormRequest
+{
+    /**
+     * Determine if the user is authorized to make this request.
+     */
+    public function authorize(): bool
+    {
+        return true;
+    }
+
+    /**
+     * Get the validation rules that apply to the request.
+     *
+     * @return array<string, \Illuminate\Contracts\Validation\ValidationRule|array<mixed>|string>
+     */
+    public function rules(): array
+    {
+        return [
+            'name' => ['required','string','max:255'],
+            'kbli' => ['required','string','max:255'],
+            'kegiatan' => ['required','string'],
+            'luas' => ['required','numeric','regex:/^\d{1,16}(\.\d{1,2})?$/'],
+            'lokasi' => ['required','string'],
+            'nomor' => ['required','string','max:255',Rule::unique('spatial_plannings')->ignore($this->id)],
+            'sp_date' => ['required','date'],
+        ];
+    }
+}

app/Http/Resources/CustomersResource.php

@@ -0,0 +1,19 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+
+class CustomersResource 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/SpatialPlanningsResource.php

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

app/Imports/CustomersImport.php

@@ -0,0 +1,52 @@
+<?php
+
+namespace App\Imports;
+
+use App\Models\Customer;
+use Illuminate\Support\Collection;
+use Maatwebsite\Excel\Concerns\ToCollection;
+use Maatwebsite\Excel\Concerns\WithLimit;
+use Maatwebsite\Excel\Concerns\WithChunkReading;
+use Maatwebsite\Excel\Concerns\WithHeadingRow;
+use Maatwebsite\Excel\Concerns\WithMultipleSheets;
+use Illuminate\Contracts\Queue\ShouldQueue;
+use Maatwebsite\Excel\Concerns\WithBatchInserts;
+
+class CustomersImport implements ToCollection, WithMultipleSheets
+{
+    /**
+    * @param Collection $collection
+    */
+    public function collection(Collection $collection)
+    {
+        $batchData = [];
+
+        foreach ($collection->skip(1) as $row) {
+            if (!isset($row[0]) || empty($row[0])) {
+                continue;
+            }
+
+            $latitude = filter_var($row[4], FILTER_VALIDATE_FLOAT) ? bcadd($row[4], '0', 18) : null;
+            $longitude = filter_var($row[5], FILTER_VALIDATE_FLOAT) ? bcadd($row[5], '0', 18) : null;
+
+            $batchData[] = [
+                'nomor_pelanggan' => $row[0],
+                'kota_pelayanan' => $row[1],
+                'nama' => $row[2],
+                'alamat' => $row[3],
+                'latitude' => $latitude,
+                'longitude' => $longitude,
+            ];
+        }
+
+        if (!empty($batchData)) {
+            Customer::upsert($batchData, ['nomor_pelanggan'], ['kota_pelayanan', 'nama', 'alamat', 'latitude', 'longitude']);
+        }
+    }
+
+    public function sheets(): array {
+        return [
+            0 => $this
+        ];
+    }
+}

app/Imports/SpatialPlanningImport.php

@@ -0,0 +1,77 @@
+<?php
+
+namespace App\Imports;
+
+use App\Models\SpatialPlanning;
+use Carbon\Carbon;
+use DateTime;
+use Illuminate\Support\Collection;
+use Illuminate\Support\Facades\Log;
+use Maatwebsite\Excel\Concerns\ToCollection;
+use Maatwebsite\Excel\Concerns\WithMultipleSheets;
+
+class SpatialPlanningImport implements ToCollection, WithMultipleSheets
+{
+    /**
+    * @param Collection $collection
+    */
+    public function collection(Collection $collection)
+    {
+        $months = [
+            "Januari" => "January", "Februari" => "February", "Maret" => "March",
+            "April" => "April", "Mei" => "May", "Juni" => "June",
+            "Juli" => "July", "Agustus" => "August", "September" => "September",
+            "Oktober" => "October", "November" => "November", "Desember" => "December"
+        ];
+
+        $collection->skip(2)->each(function ($row) use ($months) {
+            if (empty(array_filter($row->toArray()))) {
+                return;
+            }
+
+            if (!isset($row[6]) || empty($row[6])) {
+                return;
+            }
+
+            if(!SpatialPlanning::where("nomor", $row[6])->exists()){
+                $clean_nomor = str_replace('\\','',$row[6]);
+                $date_string = isset($row[7]) ? trim($row[7]) : null;
+                $clean_sp_date = null;
+                if ($date_string) {
+                    if(is_numeric($date_string)) {
+                        $clean_sp_date = Carbon::createFromFormat('Y-m-d', '1900-01-01')->addDays($date_string - 2)->format('Y-m-d');
+                    }else{
+                        foreach ($months as $id => $en) {
+                            $date_string = str_replace($id, $en, $date_string);
+                        }
+    
+                        $formats = ['j F Y', 'd F Y', 'j-M-Y', 'd-M-Y'];
+
+                        foreach ($formats as $format) {
+                            $date = DateTime::createFromFormat($format, $date_string);
+                            if ($date) {
+                                $clean_sp_date = $date->format('Y-m-d');
+                                break;
+                            }
+                        }
+                    }
+                }
+                SpatialPlanning::create([
+                    'name'          => $row[1],
+                    'kbli'         => $row[2],
+                    'kegiatan'       => $row[3],
+                    'luas'     => $row[4],
+                    'lokasi' => $row[5],
+                    'nomor'        => $clean_nomor,
+                    'sp_date' => $clean_sp_date,
+                ]);
+            }
+        });
+    }
+
+    public function sheets(): array {
+        return [
+            0 => $this
+        ];
+    }
+}

app/Models/Customer.php

@@ -0,0 +1,20 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Model;
+
+class Customer extends Model
+{
+    protected $table = 'customers';
+    protected $fillable = [
+        'nomor_pelanggan',
+        'kota_pelayanan',
+        'nama',
+        'alamat',
+        'latitude',
+        'longitude',
+    ];
+
+    
+}

app/Models/SpatialPlanning.php

@@ -0,0 +1,19 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Model;
+
+class SpatialPlanning extends Model
+{
+    protected $table = "spatial_plannings";
+    protected $fillable = [
+        'name',
+        'kbli',
+        'kegiatan',
+        'luas',
+        'lokasi',
+        'nomor',
+        'sp_date'
+    ];
+}

database/migrations/2025_02_19_113154_create_spatial_plannings_table.php

@@ -0,0 +1,34 @@
+<?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::create('spatial_plannings', function (Blueprint $table) {
+            $table->id();
+            $table->string('name');
+            $table->string('kbli');
+            $table->text('kegiatan');
+            $table->decimal('luas',18,2);
+            $table->text('lokasi');
+            $table->string('nomor')->unique();
+            $table->date('sp_date');
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('spatial_plannings');
+    }
+};

database/migrations/2025_02_20_154106_create_customers_table.php

@@ -0,0 +1,33 @@
+<?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::create('customers', function (Blueprint $table) {
+            $table->id();
+            $table->string('nomor_pelanggan')->unique();
+            $table->string('kota_pelayanan');
+            $table->string('nama');
+            $table->text('alamat');
+            $table->decimal('latitude', 22,18);
+            $table->decimal('longitude', 22,18);
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('customers');
+    }
+};

database/seeders/UsersRoleMenuSeeder.php

@@ -186,6 +186,20 @@ class UsersRoleMenuSeeder extends Seeder
                 "parent_id" => $data->id,
                 "sort_order" => 5,
             ],
+            [
+                "name" => "Tata Ruang",
+                "url" => "spatial-plannings",
+                "icon" => null,
+                "parent_id" => $data->id,
+                "sort_order" => 6,
+            ],
+            [
+                "name" => "PDAM",
+                "url" => "customers",
+                "icon" => null,
+                "parent_id" => $data->id,
+                "sort_order" => 7,
+            ],
             [
                 "name" => "Lap Pariwisata",
                 "url" => "tourisms.index",
@@ -213,6 +227,8 @@ class UsersRoleMenuSeeder extends Seeder
         $laporan_pariwisata = Menu::where('name', 'Lap Pariwisata')->first();
         $umkm = Menu::where('name', 'UMKM')->first();
         $lack_of_potentials = Menu::where('name', 'Dashboard Potensi')->first();
+        $spatial_plannings = Menu::where('name', 'Tata Ruang')->first();
+        $pdam = Menu::where('name', 'PDAM')->first();
 
         // Superadmin gets all menus
         $superadmin->menus()->sync([
@@ -238,6 +254,8 @@ class UsersRoleMenuSeeder extends Seeder
             $laporan_pariwisata->id => ["allow_show" => true, "allow_create" => true, "allow_update" => true, "allow_destroy" => true],
             $umkm->id => ["allow_show" => true, "allow_create" => true, "allow_update" => true, "allow_destroy" => true],
             $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],
         ]);
 
         // Admin gets limited menus

resources/js/customers/create.js

@@ -0,0 +1,65 @@
+class CreateCustomer {
+    constructor() {
+        this.initCreateCustomer();
+    }
+
+    initCreateCustomer() {
+        const toastNotification = document.getElementById("toastNotification");
+        const toast = new bootstrap.Toast(toastNotification);
+        document
+            .getElementById("btnCreateCustomer")
+            .addEventListener("click", async function () {
+                let submitButton = this;
+                let spinner = document.getElementById("spinner");
+                let form = document.getElementById("formCreateCustomer");
+
+                if (!form) {
+                    console.error("Form element not found!");
+                    return;
+                }
+                // Get form data
+                let formData = new FormData(form);
+
+                // Disable button and show spinner
+                submitButton.disabled = true;
+                spinner.classList.remove("d-none");
+
+                try {
+                    let response = await fetch(form.action, {
+                        method: "POST",
+                        headers: {
+                            Authorization: `Bearer ${document
+                                .querySelector('meta[name="api-token"]')
+                                .getAttribute("content")}`,
+                        },
+                        body: formData,
+                    });
+
+                    if (response.ok) {
+                        let result = await response.json();
+                        document.getElementById("toast-message").innerText =
+                            result.message;
+                        toast.show();
+                        setTimeout(() => {
+                            window.location.href = "/data/customers";
+                        }, 2000);
+                    } else {
+                        let error = await response.json();
+                        document.getElementById("toast-message").innerText =
+                            error.message;
+                        toast.show();
+                        console.error("Error:", error);
+                    }
+                } catch (error) {
+                    console.error("Request failed:", error);
+                    document.getElementById("toast-message").innerText =
+                        error.message;
+                    toast.show();
+                }
+            });
+    }
+}
+
+document.addEventListener("DOMContentLoaded", function (e) {
+    new CreateCustomer();
+});

resources/js/customers/edit.js

@@ -0,0 +1,65 @@
+class UpdateCustomer {
+    constructor() {
+        this.initUpdateSpatial();
+    }
+
+    initUpdateSpatial() {
+        const toastNotification = document.getElementById("toastNotification");
+        const toast = new bootstrap.Toast(toastNotification);
+        document
+            .getElementById("btnUpdateCustomer")
+            .addEventListener("click", async function () {
+                let submitButton = this;
+                let spinner = document.getElementById("spinner");
+                let form = document.getElementById("formUpdateCustomer");
+
+                if (!form) {
+                    console.error("Form element not found!");
+                    return;
+                }
+                // Get form data
+                let formData = new FormData(form);
+
+                // Disable button and show spinner
+                submitButton.disabled = true;
+                spinner.classList.remove("d-none");
+
+                try {
+                    let response = await fetch(form.action, {
+                        method: "POST",
+                        headers: {
+                            Authorization: `Bearer ${document
+                                .querySelector('meta[name="api-token"]')
+                                .getAttribute("content")}`,
+                        },
+                        body: formData,
+                    });
+
+                    if (response.ok) {
+                        let result = await response.json();
+                        document.getElementById("toast-message").innerText =
+                            result.message;
+                        toast.show();
+                        setTimeout(() => {
+                            window.location.href = "/data/customers";
+                        }, 2000);
+                    } else {
+                        let error = await response.json();
+                        document.getElementById("toast-message").innerText =
+                            error.message;
+                        toast.show();
+                        console.error("Error:", error);
+                    }
+                } catch (error) {
+                    console.error("Request failed:", error);
+                    document.getElementById("toast-message").innerText =
+                        error.message;
+                    toast.show();
+                }
+            });
+    }
+}
+
+document.addEventListener("DOMContentLoaded", function (e) {
+    new UpdateCustomer();
+});

resources/js/customers/index.js

@@ -0,0 +1,151 @@
+import { Grid } from "gridjs/dist/gridjs.umd.js";
+import gridjs from "gridjs/dist/gridjs.umd.js";
+import "gridjs/dist/gridjs.umd.js";
+import GlobalConfig from "../global-config";
+import Swal from "sweetalert2";
+
+class Customers {
+    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.initTableSpatialPlannings();
+        this.initEvents();
+    }
+    initEvents() {
+        document.body.addEventListener("click", async (event) => {
+            const deleteButton = event.target.closest(".btn-delete-customers");
+            if (deleteButton) {
+                event.preventDefault();
+                await this.handleDelete(deleteButton);
+            }
+        });
+    }
+
+    initTableSpatialPlannings() {
+        let tableContainer = document.getElementById("table-customers");
+        // Create a new Grid.js instance only if it doesn't exist
+        this.table = new Grid({
+            columns: [
+                "ID",
+                "Nomor Pelanggan",
+                "Nama",
+                "Kota Pelayanan",
+                "Alamat",
+                "Latitude",
+                "Longitude",
+                {
+                    name: "Action",
+                    formatter: (cell) =>
+                        gridjs.html(`
+                                  <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">
+                                          <i class='bx bx-edit'></i>
+                                      </a>
+                                      <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>
+                                  </div>
+                              `),
+                },
+            ],
+            pagination: {
+                limit: 15,
+                server: {
+                    url: (prev, page) =>
+                        `${prev}${prev.includes("?") ? "&" : "?"}page=${
+                            page + 1
+                        }`,
+                },
+            },
+            sort: true,
+            search: {
+                server: {
+                    url: (prev, keyword) => `${prev}?search=${keyword}`,
+                },
+            },
+            server: {
+                url: `${GlobalConfig.apiHost}/api/customers`,
+                headers: {
+                    Authorization: `Bearer ${document
+                        .querySelector('meta[name="api-token"]')
+                        .getAttribute("content")}`,
+                    "Content-Type": "application/json",
+                },
+                then: (data) =>
+                    data.data.map((item) => [
+                        item.id,
+                        item.nomor_pelanggan,
+                        item.nama,
+                        item.kota_pelayanan,
+                        item.alamat,
+                        item.latitude,
+                        item.longitude,
+                        item.id,
+                    ]),
+                total: (data) => data.meta.total,
+            },
+        }).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/customers/${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 Customers();
+});

resources/js/customers/upload.js

@@ -0,0 +1,78 @@
+import { Dropzone } from "dropzone";
+Dropzone.autoDiscover = false;
+
+class UploadCustomers {
+    constructor() {
+        this.spatialDropzone = null;
+        this.formElement = document.getElementById("formUploadCustomers");
+        this.uploadButton = document.getElementById("submit-upload");
+        this.spinner = document.getElementById("spinner");
+        if (!this.formElement) {
+            console.error("Element formUploadCustomers tidak ditemukan!");
+        }
+    }
+
+    init() {
+        this.initDropzone();
+        this.setupUploadButton();
+    }
+
+    initDropzone() {
+        const toastNotification = document.getElementById("toastNotification");
+        const toast = new bootstrap.Toast(toastNotification);
+        var previewTemplate,
+            dropzonePreviewNode = document.querySelector(
+                "#dropzone-preview-list"
+            );
+        (dropzonePreviewNode.id = ""),
+            dropzonePreviewNode &&
+                ((previewTemplate = dropzonePreviewNode.parentNode.innerHTML),
+                dropzonePreviewNode.parentNode.removeChild(dropzonePreviewNode),
+                (this.spatialDropzone = new Dropzone(".dropzone", {
+                    url: this.formElement.action,
+                    method: "post",
+                    acceptedFiles: ".xls,.xlsx",
+                    previewTemplate: previewTemplate,
+                    previewsContainer: "#dropzone-preview",
+                    autoProcessQueue: false,
+                    headers: {
+                        Authorization: `Bearer ${document
+                            .querySelector('meta[name="api-token"]')
+                            .getAttribute("content")}`,
+                    },
+                    init: function () {
+                        this.on("success", function (file, response) {
+                            document.getElementById("toast-message").innerText =
+                                response.message;
+                            toast.show();
+                            setTimeout(() => {
+                                window.location.href = "/data/customers";
+                            }, 2000);
+                        });
+                        this.on("error", function (file, errorMessage) {
+                            document.getElementById("toast-message").innerText =
+                                errorMessage.message;
+                            toast.show();
+                            this.uploadButton.disabled = false;
+                            this.spinner.classList.add("d-none");
+                        });
+                    },
+                })));
+    }
+
+    setupUploadButton() {
+        this.uploadButton.addEventListener("click", (e) => {
+            if (this.spatialDropzone.files.length > 0) {
+                this.spatialDropzone.processQueue();
+                this.uploadButton.disabled = true;
+                this.spinner.classList.remove("d-none");
+            } else {
+                return;
+            }
+        });
+    }
+}
+
+document.addEventListener("DOMContentLoaded", function (e) {
+    new UploadCustomers().init();
+});

resources/js/spatial-plannings/create.js

@@ -0,0 +1,69 @@
+import flatpickr from "flatpickr";
+
+class CreateSpatialPlannings {
+    constructor() {
+        this.initCreateSpatial();
+    }
+
+    initCreateSpatial() {
+        const toastNotification = document.getElementById("toastNotification");
+        const toast = new bootstrap.Toast(toastNotification);
+        document
+            .getElementById("btnCreateSpatialPlannings")
+            .addEventListener("click", async function () {
+                let submitButton = this;
+                let spinner = document.getElementById("spinner");
+                let form = document.getElementById(
+                    "formCreateSpatialPlannings"
+                );
+
+                if (!form) {
+                    console.error("Form element not found!");
+                    return;
+                }
+                // Get form data
+                let formData = new FormData(form);
+
+                // Disable button and show spinner
+                submitButton.disabled = true;
+                spinner.classList.remove("d-none");
+
+                try {
+                    let response = await fetch(form.action, {
+                        method: "POST",
+                        headers: {
+                            Authorization: `Bearer ${document
+                                .querySelector('meta[name="api-token"]')
+                                .getAttribute("content")}`,
+                        },
+                        body: formData,
+                    });
+
+                    if (response.ok) {
+                        let result = await response.json();
+                        document.getElementById("toast-message").innerText =
+                            result.message;
+                        toast.show();
+                        setTimeout(() => {
+                            window.location.href = "/data/spatial-plannings";
+                        }, 2000);
+                    } else {
+                        let error = await response.json();
+                        document.getElementById("toast-message").innerText =
+                            error.message;
+                        toast.show();
+                        console.error("Error:", error);
+                    }
+                } catch (error) {
+                    console.error("Request failed:", error);
+                    document.getElementById("toast-message").innerText =
+                        error.message;
+                    toast.show();
+                }
+            });
+    }
+}
+
+document.addEventListener("DOMContentLoaded", function (e) {
+    new CreateSpatialPlannings();
+});

resources/js/spatial-plannings/index.js

@@ -0,0 +1,156 @@
+import { Grid } from "gridjs/dist/gridjs.umd.js";
+import gridjs from "gridjs/dist/gridjs.umd.js";
+import "gridjs/dist/gridjs.umd.js";
+import GlobalConfig from "../global-config";
+import Swal from "sweetalert2";
+
+class SpatialPlannings {
+    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.initTableSpatialPlannings();
+        this.initEvents();
+    }
+    initEvents() {
+        document.body.addEventListener("click", async (event) => {
+            const deleteButton = event.target.closest(
+                ".btn-delete-spatial-plannings"
+            );
+            if (deleteButton) {
+                event.preventDefault();
+                await this.handleDelete(deleteButton);
+            }
+        });
+    }
+
+    initTableSpatialPlannings() {
+        let tableContainer = document.getElementById("table-spatial-plannings");
+        // Create a new Grid.js instance only if it doesn't exist
+        this.table = new Grid({
+            columns: [
+                "ID",
+                "Name",
+                "KBLI",
+                "Kegiatan",
+                "Luas",
+                "Lokasi",
+                "Nomor",
+                "Date",
+                {
+                    name: "Action",
+                    formatter: (cell) =>
+                        gridjs.html(`
+                                  <div class="d-flex justify-content-center gap-2">
+                                      <a href="/data/spatial-plannings/${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 id="btn-delete-spatial-plannings" data-id="${cell}" class="btn btn-sm btn-red btn-delete-spatial-plannings d-inline-flex align-items-center justify-content-center">
+                                          <i class='bx bxs-trash' ></i>
+                                      </button>
+                                  </div>
+                              `),
+                },
+            ],
+            pagination: {
+                limit: 15,
+                server: {
+                    url: (prev, page) =>
+                        `${prev}${prev.includes("?") ? "&" : "?"}page=${
+                            page + 1
+                        }`,
+                },
+            },
+            sort: true,
+            search: {
+                server: {
+                    url: (prev, keyword) => `${prev}?search=${keyword}`,
+                },
+            },
+            server: {
+                url: `${GlobalConfig.apiHost}/api/spatial-plannings`,
+                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.kbli,
+                        item.kegiatan,
+                        item.luas,
+                        item.lokasi,
+                        item.nomor,
+                        item.sp_date,
+                        item.id,
+                    ]),
+                total: (data) => data.meta.total,
+            },
+        }).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/spatial-plannings/${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 SpatialPlannings();
+});

resources/js/spatial-plannings/update.js

@@ -0,0 +1,67 @@
+class UpdateSpatialPlannings {
+    constructor() {
+        this.initUpdateSpatial();
+    }
+
+    initUpdateSpatial() {
+        const toastNotification = document.getElementById("toastNotification");
+        const toast = new bootstrap.Toast(toastNotification);
+        document
+            .getElementById("btnUpdateSpatialPlannings")
+            .addEventListener("click", async function () {
+                let submitButton = this;
+                let spinner = document.getElementById("spinner");
+                let form = document.getElementById(
+                    "formUpdateSpatialPlannings"
+                );
+
+                if (!form) {
+                    console.error("Form element not found!");
+                    return;
+                }
+                // Get form data
+                let formData = new FormData(form);
+
+                // Disable button and show spinner
+                submitButton.disabled = true;
+                spinner.classList.remove("d-none");
+
+                try {
+                    let response = await fetch(form.action, {
+                        method: "POST",
+                        headers: {
+                            Authorization: `Bearer ${document
+                                .querySelector('meta[name="api-token"]')
+                                .getAttribute("content")}`,
+                        },
+                        body: formData,
+                    });
+
+                    if (response.ok) {
+                        let result = await response.json();
+                        document.getElementById("toast-message").innerText =
+                            result.message;
+                        toast.show();
+                        setTimeout(() => {
+                            window.location.href = "/data/spatial-plannings";
+                        }, 2000);
+                    } else {
+                        let error = await response.json();
+                        document.getElementById("toast-message").innerText =
+                            error.message;
+                        toast.show();
+                        console.error("Error:", error);
+                    }
+                } catch (error) {
+                    console.error("Request failed:", error);
+                    document.getElementById("toast-message").innerText =
+                        error.message;
+                    toast.show();
+                }
+            });
+    }
+}
+
+document.addEventListener("DOMContentLoaded", function (e) {
+    new UpdateSpatialPlannings();
+});

resources/js/spatial-plannings/upload.js

@@ -0,0 +1,83 @@
+import { Dropzone } from "dropzone";
+Dropzone.autoDiscover = false;
+
+class UploadSpatialPlannings {
+    constructor() {
+        this.spatialDropzone = null;
+        this.formElement = document.getElementById(
+            "formUploadSpatialPlannings"
+        );
+        this.uploadButton = document.getElementById("submit-upload");
+        this.spinner = document.getElementById("spinner");
+        if (!this.formElement) {
+            console.error(
+                "Element formUploadSpatialPlannings tidak ditemukan!"
+            );
+        }
+    }
+
+    init() {
+        this.initDropzone();
+        this.setupUploadButton();
+    }
+
+    initDropzone() {
+        const toastNotification = document.getElementById("toastNotification");
+        const toast = new bootstrap.Toast(toastNotification);
+        var previewTemplate,
+            dropzonePreviewNode = document.querySelector(
+                "#dropzone-preview-list"
+            );
+        (dropzonePreviewNode.id = ""),
+            dropzonePreviewNode &&
+                ((previewTemplate = dropzonePreviewNode.parentNode.innerHTML),
+                dropzonePreviewNode.parentNode.removeChild(dropzonePreviewNode),
+                (this.spatialDropzone = new Dropzone(".dropzone", {
+                    url: this.formElement.action,
+                    method: "post",
+                    acceptedFiles: ".xls,.xlsx",
+                    previewTemplate: previewTemplate,
+                    previewsContainer: "#dropzone-preview",
+                    autoProcessQueue: false,
+                    headers: {
+                        Authorization: `Bearer ${document
+                            .querySelector('meta[name="api-token"]')
+                            .getAttribute("content")}`,
+                    },
+                    init: function () {
+                        this.on("success", function (file, response) {
+                            document.getElementById("toast-message").innerText =
+                                response.message;
+                            toast.show();
+                            setTimeout(() => {
+                                window.location.href =
+                                    "/data/spatial-plannings";
+                            }, 2000);
+                        });
+                        this.on("error", function (file, errorMessage) {
+                            document.getElementById("toast-message").innerText =
+                                errorMessage.message;
+                            toast.show();
+                            this.uploadButton.disabled = false;
+                            this.spinner.classList.add("d-none");
+                        });
+                    },
+                })));
+    }
+
+    setupUploadButton() {
+        this.uploadButton.addEventListener("click", (e) => {
+            if (this.spatialDropzone.files.length > 0) {
+                this.spatialDropzone.processQueue();
+                this.uploadButton.disabled = true;
+                this.spinner.classList.remove("d-none");
+            } else {
+                return;
+            }
+        });
+    }
+}
+
+document.addEventListener("DOMContentLoaded", function (e) {
+    new UploadSpatialPlannings().init();
+});

resources/views/customers/create.blade.php

@@ -0,0 +1,32 @@
+@extends('layouts.vertical', ['subtitle' => 'Data'])
+
+@section('content')
+
+@include('layouts.partials/page-title', ['title' => 'Data', 'subtitle' => 'PDAM'])
+
+<x-toast-notification />
+<div class="row d-flex justify-content-center">
+    <div class="col-md-6">
+        <div class="card">
+            <div class="card-header d-flex justify-content-end">
+                <a href="{{ route('customers') }}" class="btn btn-sm btn-secondary">Back</a>
+            </div>
+            <div class="card-body">
+                <form id="formCreateCustomer" action="{{ route('api.customers.store') }}" method="post">
+                    @csrf
+                    @include('customers.form')
+                    <button type="button" class="btn btn-primary" id="btnCreateCustomer">
+                        <span id="spinner" class="spinner-border spinner-border-sm me-1 d-none" role="status" aria-hidden="true"></span>
+                        Create
+                    </button>
+                </form>
+            </div>
+        </div>
+    </div>
+</div>
+
+@endsection
+
+@section('scripts')
+@vite(['resources/js/customers/create.js'])
+@endsection

resources/views/customers/edit.blade.php

@@ -0,0 +1,33 @@
+@extends('layouts.vertical', ['subtitle' => 'Data'])
+
+@section('content')
+
+@include('layouts.partials/page-title', ['title' => 'Data', 'subtitle' => 'PDAM'])
+
+<x-toast-notification />
+<div class="row d-flex justify-content-center">
+    <div class="col-md-6">
+        <div class="card">
+            <div class="card-header d-flex justify-content-end">
+                <a href="{{ route('customers') }}" class="btn btn-sm btn-secondary">Back</a>
+            </div>
+            <div class="card-body">
+                <form id="formUpdateCustomer" action="{{ route('api.customers.update', $data->id) }}" method="post">
+                    @csrf
+                    @method('put')
+                    @include('customers.form')
+                    <button type="button" class="btn btn-primary" id="btnUpdateCustomer">
+                        <span id="spinner" class="spinner-border spinner-border-sm me-1 d-none" role="status" aria-hidden="true"></span>
+                        Update
+                    </button>
+                </form>
+            </div>
+        </div>
+    </div>
+</div>
+
+@endsection
+
+@section('scripts')
+@vite(['resources/js/customers/edit.js'])
+@endsection

resources/views/customers/form.blade.php

@@ -0,0 +1,24 @@
+<div class="mb-3">
+    <label class="form-label" for="nomor_pelanggan">Nomor Pelanggan</label>
+    <input type="text" id="nomor_pelanggan" name="nomor_pelanggan" class="form-control" placeholder="Enter nomor_pelanggan" value="{{ old('nomor_pelanggan', $data->nomor_pelanggan ?? '')  }}" required>
+</div>
+<div class="mb-3">
+    <label class="form-label" for="kota_pelayanan">Kota Pelayanan</label>
+    <input type="text" id="kota_pelayanan" name="kota_pelayanan" class="form-control" placeholder="Enter kota_pelayanan" value="{{ old('kota_pelayanan', $data->kota_pelayanan ?? '')  }}" required>
+</div>
+<div class="mb-3">
+    <label class="form-label" for="nama">Nama</label>
+    <input type="text" id="nama" name="nama" class="form-control" placeholder="Enter nama" value="{{ old('nama', $data->nama ?? '')  }}" required>
+</div>
+<div class="mb-3">
+    <label class="form-label" for="alamat">Alamat</label>
+    <textarea class="form-control" id="alamat" name="alamat" rows="5" required>{{ old('alamat', $data->alamat ?? '')  }}</textarea>
+</div>
+<div class="mb-3">
+    <label class="form-label" for="latitude">Latitude</label>
+    <input type="text" id="latitude" name="latitude" class="form-control" placeholder="Enter latitude" value="{{ old('latitude', $data->latitude ?? '')  }}" required>
+</div>
+<div class="mb-3">
+    <label class="form-label" for="longitude">Longitude</label>
+    <input type="text" id="longitude" name="longitude" class="form-control" placeholder="Enter longitude" value="{{ old('longitude', $data->longitude ?? '')  }}" required>
+</div>

resources/views/customers/index.blade.php

@@ -0,0 +1,31 @@
+@extends('layouts.vertical', ['subtitle' => 'Data'])
+
+@section('css')
+@vite(['node_modules/gridjs/dist/theme/mermaid.min.css'])
+@endsection
+
+@section('content')
+
+@include('layouts.partials/page-title', ['title' => 'Data', 'subtitle' => 'PDAM'])
+
+<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">
+                    <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>
+                </div>
+                <div id="table-customers"></div>
+            </div>
+        </div>
+    </div>
+</div>
+
+@endsection
+
+@section('scripts')
+@vite(['resources/js/customers/index.js'])
+@endsection

resources/views/customers/upload.blade.php

@@ -0,0 +1,80 @@
+@extends('layouts.vertical', ['subtitle' => 'Data'])
+
+@section('content')
+
+@include('layouts.partials/page-title', ['title' => 'Data', 'subtitle' => 'Tata Ruang'])
+
+<x-toast-notification />
+<div class="row">
+    <div class="col-xl-12">
+        <div class="card">
+            <div class="card-header">
+                <h5 class="card-title">Upload Data</h5>
+                <p class="card-subtitle">  
+                    Please upload a file with the extension <strong>.xls or .xlsx</strong> with a maximum size of <strong>10 MB</strong>.  
+                    <br>  
+                    For <strong>.xls</strong> and <strong>.xlsx</strong> files, ensure that the data is contained within a <strong>single sheet</strong> with the following columns:  
+                    <strong>Nomor Pelanggan, Kota Pelayanan, Nama, Alamat, Latitude, Longitude</strong>  
+                </p>
+            </div>
+
+            <div class="card-body">
+
+                <div class="mb-3">
+
+                    <div class="dropzone">
+                        <form id="formUploadCustomers" action="{{ route('api.customers.upload') }}" method="post" enctype="multipart/form-data">
+                            <div class="fallback">
+                                <!-- <input id="file-dropzone" type="file" name="file" accept=".xlsx,.xls" multiple/> -->
+                            </div>
+                        </form>
+                        <div class="dz-message needsclick">
+                            <i class="h1 bx bx-cloud-upload"></i>
+                            <h3>Drop files here or click to upload.</h3>
+                        </div>
+                    </div>
+
+                    <ul class="list-unstyled mb-0" id="dropzone-preview">
+                        <li class="mt-2" id="dropzone-preview-list">
+                            <!-- This is used as the file preview template -->
+                            <div class="border rounded">
+                                <div class="d-flex align-items-center p-2">
+                                    <div class="flex-shrink-0 me-3">
+                                        <div class="avatar-sm bg-light rounded">
+                                            <img data-dz-thumbnail class="img-fluid rounded d-block" src="#"
+                                                alt="" />
+                                        </div>
+                                    </div>
+                                    <div class="flex-grow-1">
+                                        <div class="pt-1">
+                                            <h5 class="fs-14 mb-1" data-dz-name>&nbsp;
+                                            </h5>
+                                            <p class="fs-13 text-muted mb-0" data-dz-size></p>
+                                            <strong class="error text-danger" data-dz-errormessage></strong>
+                                        </div>
+                                    </div>
+                                    <div class="flex-shrink-0 ms-3">
+                                        <button data-dz-remove class="btn btn-sm btn-danger">Delete</button>
+                                    </div>
+                                </div>
+                            </div>
+                        </li>
+                    </ul>
+                    <!-- end dropzon-preview -->
+                </div>
+                <div class="d-flex justify-content-end">
+                    <button id="submit-upload" class="btn btn-primary">
+                        <span id="spinner" class="spinner-border spinner-border-sm me-1 d-none" role="status" aria-hidden="true"></span>
+                        Upload Files
+                    </button>
+                </div>
+            </div> <!-- end card body -->
+        </div> <!-- end card -->
+    </div> <!-- end col -->
+</div> <!-- end row -->
+
+@endsection
+
+@section('scripts')
+@vite(['resources/js/customers/upload.js'])
+@endsection

resources/views/spatial-plannings/create.blade.php

@@ -0,0 +1,32 @@
+@extends('layouts.vertical', ['subtitle' => 'Data'])
+
+@section('content')
+
+@include('layouts.partials/page-title', ['title' => 'Data', 'subtitle' => 'Tata Ruang'])
+
+<x-toast-notification />
+<div class="row d-flex justify-content-center">
+    <div class="col-md-6">
+        <div class="card">
+            <div class="card-header d-flex justify-content-end">
+                <a href="{{ route('spatial-plannings') }}" class="btn btn-sm btn-secondary">Back</a>
+            </div>
+            <div class="card-body">
+                <form id="formCreateSpatialPlannings" action="{{ route('api.spatial-plannings.store') }}" method="post">
+                    @csrf
+                    @include('spatial-plannings.form')
+                    <button type="button" class="btn btn-primary" id="btnCreateSpatialPlannings">
+                        <span id="spinner" class="spinner-border spinner-border-sm me-1 d-none" role="status" aria-hidden="true"></span>
+                        Create
+                    </button>
+                </form>
+            </div>
+        </div>
+    </div>
+</div>
+
+@endsection
+
+@section('scripts')
+@vite(['resources/js/spatial-plannings/create.js'])
+@endsection

resources/views/spatial-plannings/form.blade.php

@@ -0,0 +1,28 @@
+<div class="mb-3">
+    <label class="form-label" for="name">Name</label>
+    <input type="text" id="name" name="name" class="form-control" placeholder="Enter name" value="{{ old('name', $data->name ?? '')  }}" required>
+</div>
+<div class="mb-3">
+    <label class="form-label" for="kbli">KBLI</label>
+    <input type="text" id="kbli" name="kbli" class="form-control" placeholder="Enter kbli" value="{{ old('kbli', $data->kbli ?? '')  }}" required>
+</div>
+<div class="mb-3">
+    <label class="form-label" for="kegiatan">Kegiatan</label>
+    <input type="text" id="kegiatan" name="kegiatan" class="form-control" placeholder="Enter kegiatan" value="{{ old('kegiatan', $data->kegiatan ?? '')  }}" required>
+</div>
+<div class="mb-3">
+    <label class="form-label" for="luas">Luas</label>
+    <input type="number" id="luas" name="luas" class="form-control" placeholder="Enter luas" value="{{ old('luas', $data->luas ?? '')  }}" required>
+</div>
+<div class="mb-3">
+    <label class="form-label" for="lokasi">Lokasi</label>
+    <input type="text" id="lokasi" name="lokasi" class="form-control" placeholder="Enter lokasi" value="{{ old('lokasi', $data->lokasi ?? '')  }}" required>
+</div>
+<div class="mb-3">
+    <label class="form-label" for="nomor">Nomor</label>
+    <input type="text" id="nomor" name="nomor" class="form-control" placeholder="Enter nomor" value="{{ old('nomor', $data->nomor ?? '')  }}" required>
+</div>
+<div class="mb-3">
+    <label class="form-label" for="sp_date">Date</label>
+    <input type="date" id="sp_date" name="sp_date" class="form-control" placeholder="Enter sp_date" value="{{ old('sp_date', $data->sp_date ?? '')  }}" required>
+</div>

resources/views/spatial-plannings/index.blade.php

@@ -0,0 +1,31 @@
+@extends('layouts.vertical', ['subtitle' => 'Data'])
+
+@section('css')
+@vite(['node_modules/gridjs/dist/theme/mermaid.min.css'])
+@endsection
+
+@section('content')
+
+@include('layouts.partials/page-title', ['title' => 'Data', 'subtitle' => 'Tata Ruang'])
+
+<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">
+                    <a href="{{ route('spatial-plannings.create')}}" class="btn btn-success btn-sm d-block d-sm-inline w-auto me-3">Create</a>
+                    <a href="{{ route('spatial-plannings.upload')}}" class="btn btn-success btn-sm d-block d-sm-inline w-auto">Upload</a>
+                </div>
+                <div id="table-spatial-plannings"></div>
+            </div>
+        </div>
+    </div>
+</div>
+
+@endsection
+
+@section('scripts')
+@vite(['resources/js/spatial-plannings/index.js'])
+@endsection

resources/views/spatial-plannings/update.blade.php

@@ -0,0 +1,33 @@
+@extends('layouts.vertical', ['subtitle' => 'Data'])
+
+@section('content')
+
+@include('layouts.partials/page-title', ['title' => 'Data', 'subtitle' => 'Tata Ruang'])
+
+<x-toast-notification />
+<div class="row d-flex justify-content-center">
+    <div class="col-md-6">
+        <div class="card">
+            <div class="card-header d-flex justify-content-end">
+                <a href="{{ route('spatial-plannings') }}" class="btn btn-sm btn-secondary">Back</a>
+            </div>
+            <div class="card-body">
+                <form id="formUpdateSpatialPlannings" action="{{ route('api.spatial-plannings.update', $data->id) }}" method="post">
+                    @csrf
+                    @method('put')
+                    @include('spatial-plannings.form')
+                    <button type="button" class="btn btn-primary" id="btnUpdateSpatialPlannings">
+                        <span id="spinner" class="spinner-border spinner-border-sm me-1 d-none" role="status" aria-hidden="true"></span>
+                        Update
+                    </button>
+                </form>
+            </div>
+        </div>
+    </div>
+</div>
+
+@endsection
+
+@section('scripts')
+@vite(['resources/js/spatial-plannings/update.js'])
+@endsection

resources/views/spatial-plannings/upload.blade.php

@@ -0,0 +1,80 @@
+@extends('layouts.vertical', ['subtitle' => 'Data'])
+
+@section('content')
+
+@include('layouts.partials/page-title', ['title' => 'Data', 'subtitle' => 'Tata Ruang'])
+
+<x-toast-notification />
+<div class="row">
+    <div class="col-xl-12">
+        <div class="card">
+            <div class="card-header">
+                <h5 class="card-title">Upload Data</h5>
+                <p class="card-subtitle">  
+                    Please upload a file with the extension <strong>.xls or .xlsx</strong> with a maximum size of <strong>10 MB</strong>.  
+                    <br>  
+                    For <strong>.xls</strong> and <strong>.xlsx</strong> files, ensure that the data is contained within a <strong>single sheet</strong> with the following columns:  
+                    <strong>No, Nama, KBLI, Kegiatan, Luas, Lokasi, Nomor, Tanggal.</strong>  
+                </p>
+            </div>
+
+            <div class="card-body">
+
+                <div class="mb-3">
+
+                    <div class="dropzone">
+                        <form id="formUploadSpatialPlannings" action="{{ route('api.spatial-plannings.upload') }}" method="post" enctype="multipart/form-data">
+                            <div class="fallback">
+                                <!-- <input id="file-dropzone" type="file" name="file" accept=".xlsx,.xls" multiple/> -->
+                            </div>
+                        </form>
+                        <div class="dz-message needsclick">
+                            <i class="h1 bx bx-cloud-upload"></i>
+                            <h3>Drop files here or click to upload.</h3>
+                        </div>
+                    </div>
+
+                    <ul class="list-unstyled mb-0" id="dropzone-preview">
+                        <li class="mt-2" id="dropzone-preview-list">
+                            <!-- This is used as the file preview template -->
+                            <div class="border rounded">
+                                <div class="d-flex align-items-center p-2">
+                                    <div class="flex-shrink-0 me-3">
+                                        <div class="avatar-sm bg-light rounded">
+                                            <img data-dz-thumbnail class="img-fluid rounded d-block" src="#"
+                                                alt="" />
+                                        </div>
+                                    </div>
+                                    <div class="flex-grow-1">
+                                        <div class="pt-1">
+                                            <h5 class="fs-14 mb-1" data-dz-name>&nbsp;
+                                            </h5>
+                                            <p class="fs-13 text-muted mb-0" data-dz-size></p>
+                                            <strong class="error text-danger" data-dz-errormessage></strong>
+                                        </div>
+                                    </div>
+                                    <div class="flex-shrink-0 ms-3">
+                                        <button data-dz-remove class="btn btn-sm btn-danger">Delete</button>
+                                    </div>
+                                </div>
+                            </div>
+                        </li>
+                    </ul>
+                    <!-- end dropzon-preview -->
+                </div>
+                <div class="d-flex justify-content-end">
+                    <button id="submit-upload" class="btn btn-primary">
+                        <span id="spinner" class="spinner-border spinner-border-sm me-1 d-none" role="status" aria-hidden="true"></span>
+                        Upload Files
+                    </button>
+                </div>
+            </div> <!-- end card body -->
+        </div> <!-- end card -->
+    </div> <!-- end col -->
+</div> <!-- end row -->
+
+@endsection
+
+@section('scripts')
+@vite(['resources/js/spatial-plannings/upload.js'])
+@endsection

routes/api.php

@@ -1,6 +1,7 @@
 <?php
 
 use App\Http\Controllers\Api\BusinessOrIndustriesController;
+use App\Http\Controllers\Api\CustomersController;
 use App\Http\Controllers\Api\DashboardController;
 use App\Http\Controllers\Api\DataSettingController;
 use App\Http\Controllers\Api\GlobalSettingsController;
@@ -11,6 +12,7 @@ use App\Http\Controllers\Api\PbgTaskController;
 use App\Http\Controllers\Api\RequestAssignmentController;
 use App\Http\Controllers\Api\RolesController;
 use App\Http\Controllers\Api\ScrapingController;
+use App\Http\Controllers\Api\SpatialPlanningsController;
 use App\Http\Controllers\Api\UsersController;
 use App\Http\Controllers\Settings\SyncronizeController;
 use App\Http\Controllers\Api\AdvertisementController;
@@ -93,6 +95,20 @@ Route::group(['middleware' => 'auth:sanctum'], function (){
     //business industries api 
     Route::apiResource('api-business-industries', BusinessOrIndustriesController::class);
     Route::post('api-business-industries/upload', [BusinessOrIndustriesController::class, 'upload'])->name('business-industries.upload');
-});
 
+    Route::controller(SpatialPlanningsController::class)->group( function (){
+        Route::get('/spatial-plannings', 'index')->name('api.spatial-plannings');
+        Route::post('/spatial-plannings', 'store')->name('api.spatial-plannings.store');
+        Route::put('/spatial-plannings/{id}', 'update')->name('api.spatial-plannings.update');
+        Route::delete('/spatial-plannings/{id}', 'destroy')->name('api.spatial-plannings.destroy');
+        Route::post('/spatial-plannings/upload', 'upload')->name('api.spatial-plannings.upload');
+    });
 
+    Route::controller(CustomersController::class)->group( function (){
+        Route::get('/customers', 'index')->name('api.customers');
+        Route::post('/customers', 'store')->name('api.customers.store');
+        Route::put('/customers/{id}', 'update')->name('api.customers.update');
+        Route::delete('/customers/{id}', 'destroy')->name('api.customers.destroy');
+        Route::post('/customers/upload', 'upload')->name('api.customers.upload');
+    });
+});

routes/web.php

@@ -1,6 +1,7 @@
 <?php
 
 use App\Http\Controllers\BusinessOrIndustriesController;
+use App\Http\Controllers\CustomersController;
 use App\Http\Controllers\Dashboards\LackOfPotentialController;
 use App\Http\Controllers\DataSettingController;
 use App\Http\Controllers\Dashboards\BigDataController;
@@ -15,6 +16,7 @@ use App\Http\Controllers\Data\AdvertisementController;
 use App\Http\Controllers\Data\UmkmController;
 use App\Http\Controllers\Data\TourismController;
 use App\Http\Controllers\Report\ReportTourismController;
+use App\Http\Controllers\SpatialPlanningsController;
 use Illuminate\Support\Facades\Route;
 
 require __DIR__ . '/auth.php';
@@ -82,6 +84,20 @@ Route::group(['middleware' => 'auth'], function(){
         Route::get('/tourisms/create', [TourismController::class, 'create'])->name('tourisms.create');
         Route::get('/tourisms/bulk-create', [TourismController::class, 'bulkCreate'])->name('tourisms.bulk-create');
         Route::resource('/business-industries',BusinessOrIndustriesController::class);
+
+        Route::controller(SpatialPlanningsController::class)->group( function (){
+            Route::get('/spatial-plannings', 'index')->name('spatial-plannings');
+            Route::get('/spatial-plannings/create', 'create')->name('spatial-plannings.create');
+            Route::get('/spatial-plannings/{spatial_planning_id}/edit', 'edit')->name('spatial-plannings.edit');
+            Route::get('/spatial-plannings/upload', 'upload')->name('spatial-plannings.upload');
+        });
+
+        Route::controller(CustomersController::class)->group( function (){
+            Route::get('/customers', 'index')->name('customers');
+            Route::get('/customers/create', 'create')->name('customers.create');
+            Route::get('/customers/{customer_id}/edit', 'edit')->name('customers.edit');
+            Route::get('/customers/upload', 'upload')->name('customers.upload');
+        });
     });
 
     // Report

vite.config.js

@@ -89,6 +89,16 @@ export default defineConfig({
                 "resources/js/data/tourisms/form-create-update.js",
                 "resources/js/data/tourisms/form-upload.js",
                 "resources/js/report/tourisms/index.js",
+                // spatial-plannings
+                "resources/js/spatial-plannings/index.js",
+                "resources/js/spatial-plannings/create.js",
+                "resources/js/spatial-plannings/update.js",
+                "resources/js/spatial-plannings/upload.js",
+                // customers
+                "resources/js/customers/upload.js",
+                "resources/js/customers/index.js",
+                "resources/js/customers/create.js",
+                "resources/js/customers/edit.js",
             ],
             refresh: true,
         }),