Fix: upload bulk in column date, and fix template

app/Http/Controllers/Api/AdvertisementController.php

@@ -199,7 +199,7 @@ class AdvertisementController extends Controller
 
     public function downloadExcelAdvertisement()
     {
-        $filePath = storage_path('app/public/templates/template_reklame.xlsx');
+        $filePath = public_path('templates/template_reklame.xlsx');
 
         // Cek apakah file ada
         if (!file_exists($filePath)) {

app/Http/Controllers/Api/SpatialPlanningController.php

@@ -0,0 +1,146 @@
+<?php
+
+namespace App\Http\Controllers\Api;
+
+use App\Models\SpatialPlanning;
+use Illuminate\Http\Request;
+use App\Http\Requests\SpatialPlanningRequest;
+use Illuminate\Http\Response;
+use App\Http\Controllers\Controller;
+use App\Http\Resources\SpatialPlanningResource;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Support\Facades\Validator;
+use Maatwebsite\Excel\Facades\Excel;
+use App\Imports\SpatialPlanningImport;
+use Illuminate\Support\Facades\Storage;
+
+class SpatialPlanningController extends Controller
+{
+    /**
+     * Display a listing of the resource.
+     */
+    public function index(Request $request)
+    {
+        info($request);
+        $perPage = $request->input('per_page', 15);
+        $search = $request->input('search', '');
+
+        $query = SpatialPlanning::query();
+        if ($search) {
+            $query->where(function ($q) use ($search) {
+                $q->where('name', 'like', "%$search%")
+                    ->orWhere('kbli', 'like', "%$search%")
+                    ->orWhere('activities', 'like', "%$search%")
+                    ->orWhere('area', 'like', "%$search%")
+                    ->orWhere('location', 'like', "%$search%")
+                    ->orWhere('number', 'like', "%$search%");
+            });
+        }
+                
+        $spatialPlannings = $query->paginate($perPage);
+
+        // Menambhakan nomor urut (No)
+        $start = ($spatialPlannings->currentPage()-1) * $perPage + 1;
+
+        // Tambahkan nomor urut ke dalam data
+        $data = $spatialPlannings->map(function ($item, $index) use ($start) {
+            return array_merge($item->toArray(), ['no' => $start + $index]);
+        });
+
+        info($data);
+
+        return response()->json([
+            'data' => $data,
+            'meta' => [
+                'total' => $spatialPlannings->total(),
+                'per_page' => $spatialPlannings->perPage(),
+                'current_page' => $spatialPlannings->currentPage(),
+                'last_page'=>$spatialPlannings->lastPage(),
+            ]
+        ]);
+    }
+
+    /**
+     * Store a newly created resource in storage.
+     */
+    public function store(SpatialPlanningRequest $request): SpatialPlanning
+    {
+        $data = $request->validated();
+        return SpatialPlanning::create($data);
+    }
+    
+    /**
+     * import spatial planning from excel
+     */
+    public function importFromFile(Request $request)
+    {
+        info($request);
+        //validasi file
+        $validator = Validator::make($request->all(), [
+            'file' => 'required|mimes:xlsx, xls|max:10240'
+        ]);
+
+        if ($validator->fails()) {
+            return response()->json([
+                'message'=>'File vaildation failed.',
+                "errors"=>$validator->errors()
+            ], 400);
+        }
+
+        try {
+            $file = $request->file('file');
+            Excel::import(new SpatialPlanningImport, $file);
+            return response()->json([
+                'message'=>'File uploaded and imported successfully!'
+            ], 200);
+        } catch (\Exception $e) {
+            return response()->json([
+                'message'=>'Error during file import.',
+                'error'=>$e->getMessage()
+            ], 500);
+        }
+    }
+
+    /**
+     * Display the specified resource.
+     */
+    public function show(SpatialPlanning $spatialPlanning): SpatialPlanning
+    {
+        return $spatialPlanning;
+    }
+
+    /**
+     * Update the specified resource in storage.
+     */
+    public function update(SpatialPlanningRequest $request, SpatialPlanning $spatialPlanning): SpatialPlanning
+    {
+        info($request);
+        $data = $request->validated();
+        info($data);
+
+        $spatialPlanning->update($data);
+
+        return $spatialPlanning;
+    }
+
+    public function destroy(SpatialPlanning $spatialPlanning): Response
+    {
+        $spatialPlanning->delete();
+
+        return response()->noContent();
+    }
+
+    public function downloadExcelSpatialPlanning()
+    {
+        $filePath = public_path('templates/template_spatial_planning.xlsx');
+        info(sprintf("File Path: %s | Exists: %s", $filePath, file_exists($filePath) ? 'Yes' : 'No'));
+
+        // Cek apakah file ada
+        if (!file_exists($filePath)) {
+            return response()-> json(['message' => 'File tidak ditemukan!'], Response::HTTP_NOT_FOUND);
+        }
+
+        // Return file to download
+        return response()->download($filePath);
+    }
+}

app/Http/Controllers/Api/TourismController.php

@@ -25,6 +25,13 @@ class TourismController extends Controller
         $search = $request->input('search', '');
 
         $query = Tourism::query();
+        if ($search) {
+            $query->where(function ($q) use ($search) {
+                $q->where('business_name', 'like', "%$search%")
+                    ->orWhere('project_name', 'like', "%$search%")
+                    ->orWhere('business_address', 'like', "%$search%");
+            });
+        }
         $tourisms = $query->paginate($perPage);
 
         $tourisms->getCollection()->transform(function ($tourisms) {
@@ -36,8 +43,14 @@ class TourismController extends Controller
             return $tourisms;
         });
 
+        $start = ($tourisms->currentPage()-1) * $perPage + 1;
+
+        $data = $tourisms->map(function ($item, $index) use ($start) {
+            return array_merge($item->toArray(), ['no' => $start + $index]);
+        });
+
         return response()->json([
-            'data' => TourismResource::collection($tourisms),
+            'data' => $data,
             'meta' => [
                 'total' => $tourisms->total(),
                 'per_page' => $tourisms->perPage(),
@@ -127,4 +140,18 @@ class TourismController extends Controller
 
         return response()->noContent();
     }
+
+    public function downloadExcelTourism()
+    {
+        $filePath = public_path('templates/template_pariwisata.xlsx');
+        info(sprintf("File Path: %s | Exists: %s", $filePath, file_exists($filePath) ? 'Yes' : 'No'));
+
+        // Cek apakah file ada
+        if (!file_exists($filePath)) {
+            return response()-> json(['message' => 'File tidak ditemukan!'], Response::HTTP_NOT_FOUND);
+        }
+
+        // Return file to download
+        return response()->download($filePath);
+    }
 }

app/Http/Controllers/Api/UmkmController.php

@@ -27,6 +27,17 @@ class UmkmController extends Controller
 
         $query = Umkm::query();
 
+        if ($search) {
+            $query->where(function ($q) use ($search) {
+                $q->where('business_name', 'like', "%$search%")
+                    ->orWhere('business_address', 'like', "%$search%")
+                    ->orWhere('business_desc', 'like', "%$search%")
+                    ->orWhere('business_id_number', 'like', "%$search%")
+                    ->orWhere('owner_id', 'like', "%$search%")
+                    ->orWhere('owner_name', 'like', "%$search%");
+            });
+        }
+
         $umkm = $query->paginate($perPage);
 
         $umkm->getCollection()->transform(function ($umkm) {
@@ -47,8 +58,14 @@ class UmkmController extends Controller
             return $umkm;
         });
 
+        $start = ($umkm->currentPage()-1) * $perPage + 1;
+
+        $data = $umkm->map(function ($item, $index) use ($start) {
+            return array_merge($item->toArray(), ['no' => $start + $index]);
+        });
+
         return response()->json([
-            'data' => UmkmResource::collection($umkm),
+            'data' => $data,
             'meta' => [
                 'total' => $umkm->total(),
                 'per_page' => $umkm->perPage(),
@@ -176,7 +193,7 @@ class UmkmController extends Controller
 
     public function downloadExcelUmkm()
     {
-        $filePath = storage_path('app/public/templates/template_umkm.xlsx');
+        $filePath = public_path('templates/template_umkm.xlsx');
 
         // Cek apakah file ada
         if (!file_exists($filePath)) {

app/Http/Controllers/Data/SpatialPlanningController.php

@@ -0,0 +1,125 @@
+<?php
+
+namespace App\Http\Controllers\Data;
+
+use App\Http\Controllers\Controller;
+use App\Models\SpatialPlanning;
+use Illuminate\Http\Request;
+
+class SpatialPlanningController extends Controller
+{
+    /**
+     * Display a listing of the resource.
+     */
+    public function index()
+    {
+        return view('data.spatialPlannings.index');
+    }
+
+    /**
+     * show the form for creating a new resource.
+     */
+    public function bulkCreate()
+    {
+        return view('data.spatialPlannings.form-upload');
+    }
+
+    /**
+     * Show the form for creating a new resource.
+     */
+    public function create()
+    {
+        $title = 'Rencana Tata Ruang';
+        $subtitle = "Create Data";
+
+        // Mengambil data untuk dropdown
+        $dropdownOptions = [];
+
+        $fields = $this->getFields();
+        $fieldTypes = $this->getFieldTypes();
+
+        $apiUrl = url('/api/spatial-plannings');
+        return view('data.spatialPlannings.form', compact('title', 'subtitle', 'fields', 'fieldTypes', 'apiUrl', 'dropdownOptions'));
+    }
+
+    /**
+     * 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)
+    {
+        $title = 'Rencana Tata Ruang';
+        $subtitle = 'Update Data';
+
+        $modelInstance = SpatialPlanning::find($id);
+        // Pastikan model ditemukan
+        if (!$modelInstance) {
+            return redirect()->route('spatialPlanning.index') ->with('error', 'Rencana tata ruang tidak ditemukan');
+        }
+
+        $dropdownOptions = [];
+
+        $fields = $this->getFields();
+        $fieldTypes = $this->getFieldTypes();
+
+        $apiUrl = url('/api/spatial-plannings');
+        return view('data.spatialPlannings.form', compact('title', 'subtitle', 'modelInstance', 'fields', 'fieldTypes', 'apiUrl', 'dropdownOptions'));
+    }
+
+    /**
+     * Update the specified resource in storage.
+     */
+    public function update(Request $request, string $id)
+    {
+        //
+    }
+
+    /**
+     * Remove the specified resource from storage.
+     */
+    public function destroy(string $id)
+    {
+        //
+    }
+
+    private function getFields()
+    {
+        return [
+            "name"=> "Nama",
+            "kbli"=> "KBLI",
+            "activities"=> "Kegiatan",
+            "area"=> "Luas (m2)",
+            "location"=> "Lokasi",
+            "number"=> "Nomor",
+            "date"=> "Tanggal",
+        ];
+    }
+
+    private function getFieldTypes() 
+    {
+        return [
+            "name"=> "text",
+            "kbli"=> "text",
+            "activities"=> "text",
+            "area"=> "text",
+            "location"=> "text",
+            "number"=> "text",
+            "date"=> "date",
+        ];
+    }
+}

app/Http/Controllers/Data/TourismController.php

@@ -53,7 +53,7 @@ class TourismController extends Controller
     public function edit($id)
     {
         $title = 'Pariwisata';
-        $subtitle = 'Create Data';
+        $subtitle = 'Update Data';
 
         $modelInstance = Tourism::find($id);
         // Pastikan model ditemukan

app/Http/Requests/AdvertisementRequest.php

@@ -40,4 +40,40 @@ class AdvertisementRequest extends FormRequest
 			'contact' => 'required|string',
         ];
     }
+
+    /**
+     * pesan error validasi
+     */
+    public function messages(): array
+    {
+        return [
+            'no.required' => 'Nomor harus diisi.',
+            'business_name.required' => 'Nama usaha harus diisi.',
+            'business_name.string' => 'Nama usaha harus berupa teks.',
+            'npwpd.required' => 'NPWPD harus diisi.',
+            'npwpd.string' => 'NPWPD harus berupa teks.',
+            'advertisement_type.required' => 'Jenis reklame harus diisi.',
+            'advertisement_type.string' => 'Jenis reklame harus berupa teks.',
+            'advertisement_content.required' => 'Isi reklame harus diisi.',
+            'advertisement_content.string' => 'Isi reklame harus berupa teks.',
+            'business_address.required' => 'Alamat usaha harus diisi.',
+            'business_address.string' => 'Alamat usaha harus berupa teks.',
+            'advertisement_location.required' => 'Lokasi reklame harus diisi.',
+            'advertisement_location.string' => 'Lokasi reklame harus berupa teks.',
+            'village_name.required' => 'Nama desa harus diisi.',
+            'district_name.required' => 'Nama kecamatan harus diisi.',
+            'length.required' => 'Panjang harus diisi.',
+            'width.required' => 'Lebar harus diisi.',
+            'viewing_angle.required' => 'Sudut pandang harus diisi.',
+            'viewing_angle.string' => 'Sudut pandang harus berupa teks.',
+            'face.required' => 'Jumlah sisi harus diisi.',
+            'face.string' => 'Jumlah sisi harus berupa teks.',
+            'area.required' => 'Luas harus diisi.',
+            'area.string' => 'Luas harus berupa teks.',
+            'angle.required' => 'Sudut harus diisi.',
+            'angle.string' => 'Sudut harus berupa teks.',
+            'contact.required' => 'Kontak harus diisi.',
+            'contact.string' => 'Kontak harus berupa teks.',
+        ];
+    }
 }

app/Http/Requests/SpatialPlanningRequest.php

@@ -0,0 +1,52 @@
+<?php
+
+namespace App\Http\Requests;
+
+use Illuminate\Foundation\Http\FormRequest;
+
+class SpatialPlanningRequest 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' => 'string',
+			'kbli' => 'string',
+			'activities' => 'string',
+			'area' => 'string',
+			'location' => 'string',
+			'number' => 'string',
+            'date' => 'date_format:Y-m-d',
+        ];
+    }
+
+    /**
+     * Get the validation messages for the defined validation rules.
+     *
+     * @return array<string, string>
+     */
+    public function messages(): array
+    {
+        return [
+            'name.string' => 'Kolom Nama harus berupa teks.',
+            'kbli.string' => 'Kolom KBLI harus berupa teks.',
+            'activities.string' => 'Kolom Kegiatan harus berupa teks.',
+            'area.string' => 'Kolom Area harus berupa teks.',
+            'location.string' => 'Kolom Lokasi harus berupa teks.',
+            'number.string' => 'Kolom Nomor harus berupa teks.',
+            'date.date_format' => 'Format tanggal tidak valid, gunakan format Y-m-d H:i:s.',
+        ];
+    }
+}

app/Http/Requests/TourismRequest.php

@@ -49,4 +49,85 @@ class TourismRequest extends FormRequest
 			'tki' => 'required|string',
         ];
     }
+
+	/**
+	 * Get the validation messages for the defined validation rules.
+	 *
+	 * @return array<string, string>
+	 */
+	public function messages(): array
+	{
+		return [
+			'project_id.required' => 'ID proyek harus diisi.',
+			'project_id.string' => 'ID proyek harus berupa teks.',
+
+			'project_type_id.required' => 'ID tipe proyek harus diisi.',
+			'project_type_id.string' => 'ID tipe proyek harus berupa teks.',
+
+			'nib.required' => 'NIB harus diisi.',
+			'nib.string' => 'NIB harus berupa teks.',
+
+			'business_name.required' => 'Nama usaha harus diisi.',
+			'business_name.string' => 'Nama usaha harus berupa teks.',
+
+			'oss_publication_date.required' => 'Tanggal publikasi OSS harus diisi.',
+
+			'investment_status_description.required' => 'Deskripsi status investasi harus diisi.',
+			'investment_status_description.string' => 'Deskripsi status investasi harus berupa teks.',
+
+			'business_form.required' => 'Bentuk usaha harus diisi.',
+			'business_form.string' => 'Bentuk usaha harus berupa teks.',
+
+			'project_risk.required' => 'Risiko proyek harus diisi.',
+			'project_risk.string' => 'Risiko proyek harus berupa teks.',
+
+			'project_name.required' => 'Nama proyek harus diisi.',
+			'project_name.string' => 'Nama proyek harus berupa teks.',
+
+			'business_scale.required' => 'Skala usaha harus diisi.',
+			'business_scale.string' => 'Skala usaha harus berupa teks.',
+
+			'business_address.required' => 'Alamat usaha harus diisi.',
+			'business_address.string' => 'Alamat usaha harus berupa teks.',
+
+			'district_name.required' => 'Nama kecamatan harus diisi.',
+
+			'village_name.required' => 'Nama desa harus diisi.',
+
+			'longitude.required' => 'Garis bujur harus diisi.',
+			'longitude.string' => 'Garis bujur harus berupa teks.',
+
+			'latitude.required' => 'Garis lintang harus diisi.',
+			'latitude.string' => 'Garis lintang harus berupa teks.',
+
+			'project_submission_date.required' => 'Tanggal pengajuan proyek harus diisi.',
+
+			'kbli.required' => 'Kode KBLI harus diisi.',
+			'kbli.string' => 'Kode KBLI harus berupa teks.',
+
+			'kbli_title.required' => 'Judul KBLI harus diisi.',
+			'kbli_title.string' => 'Judul KBLI harus berupa teks.',
+
+			'supervisory_sector.required' => 'Sektor pengawasan harus diisi.',
+			'supervisory_sector.string' => 'Sektor pengawasan harus berupa teks.',
+
+			'user_name.required' => 'Nama pengguna harus diisi.',
+			'user_name.string' => 'Nama pengguna harus berupa teks.',
+
+			'email.required' => 'Email harus diisi.',
+			'email.string' => 'Email harus berupa teks.',
+
+			'contact.required' => 'Kontak harus diisi.',
+			'contact.string' => 'Kontak harus berupa teks.',
+
+			'land_area_in_m2.required' => 'Luas lahan dalam m² harus diisi.',
+			'land_area_in_m2.string' => 'Luas lahan dalam m² harus berupa teks.',
+
+			'investment_amount.required' => 'Jumlah investasi harus diisi.',
+			'investment_amount.string' => 'Jumlah investasi harus berupa teks.',
+
+			'tki.required' => 'Jumlah tenaga kerja Indonesia harus diisi.',
+			'tki.string' => 'Jumlah tenaga kerja Indonesia harus berupa teks.',
+		];
+	}
 }

app/Http/Resources/SpatialPlanningResource.php

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

app/Imports/SpatialPlanningImport.php

@@ -0,0 +1,63 @@
+<?php
+
+namespace App\Imports;
+
+use App\Models\SpatialPlanning;
+use Illuminate\Support\Collection;
+use Maatwebsite\Excel\Concerns\ToCollection;
+use Illuminate\Support\Facades\DB;
+use DateTime;
+use Carbon\Carbon;
+
+class SpatialPlanningImport implements ToCollection
+{
+    protected static $processed = false;
+
+    /**
+     * Process each row in the file
+     */
+    public function collection(Collection $rows)
+    {
+        if (self::$processed) {
+            return;
+        }
+        self::$processed = true;
+
+        if ($rows->isEmpty())
+        {
+            return;
+        }
+
+        //cari header secara otomatis
+        $header = $rows->first();
+        $headerIndex = collect($header)->search(fn($value) => !empty($value));
+
+        // Pastikan header ditemukan
+        if ($headerIndex === false) {
+            return;
+        }
+
+        foreach ($rows->skip(1) as $row) {
+            $dateValue = trim($row[7]);
+            info($dateValue);
+            $parsedDate = Carbon::createFromFormat('Y-m-d', $dateValue)->format('Y-m-d');
+            info($parsedDate); 
+
+            $dataToInsert[] = [
+                'name'=>$row[1],
+                'kbli'=>$row[2],
+                'activities'=>$row[3],
+                'area'=>$row[4],
+                'location'=>$row[5],
+                'number'=>$row[6],
+                'date'=>$parsedDate,
+            ];
+        }
+
+        if(!empty($dataToInsert)) {
+            SpatialPlanning::insert($dataToInsert);
+        } else {
+            return;
+        }
+    }
+}

app/Imports/TourismImport.php

@@ -65,13 +65,6 @@ class TourismImport implements ToCollection
             // ambill village code yang village_name sama dengan $villageName
             $villageCode = $listTrueVillage[$villageName]['village_code'] ?? '000000';
 
-            
-            // if (empty($row[16])) {
-            //     info("Data kosong");
-            // } else {
-            //     info("Baris ke- | Nilai: " . $row[16]);
-            // }
-
             $excelSerialDate = $row[16];
             if (is_numeric($excelSerialDate)) {
                 $projectSubmissionDate = Carbon::createFromFormat('Y-m-d', '1899-12-30')
@@ -82,8 +75,6 @@ class TourismImport implements ToCollection
                     ->format('Y-m-d H:i:s');
             }
 
-            info("Tanggal dikonversi: " . $projectSubmissionDate);
-
             $dataToInsert[] = [
                 'project_id' => $row[1],
                 'project_type_id' => $row[2],

app/Models/SpatialPlanning.php

@@ -0,0 +1,37 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Model;
+
+/**
+ * Class SpatialPlanning
+ *
+ * @property $id
+ * @property $created_at
+ * @property $updated_at
+ * @property $name
+ * @property $kbli
+ * @property $activities
+ * @property $area
+ * @property $location
+ * @property $number
+ * @property $date
+ *
+ * @package App
+ * @mixin \Illuminate\Database\Eloquent\Builder
+ */
+class SpatialPlanning extends Model
+{
+    
+    protected $perPage = 20;
+
+    /**
+     * The attributes that are mass assignable.
+     *
+     * @var array<int, string>
+     */
+    protected $fillable = ['name', 'kbli', 'activities', 'area', 'location', 'number', 'date'];
+
+
+}

database/migrations/2025_02_20_050004_create_spatial_planning_table.php

@@ -0,0 +1,35 @@
+<?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_planning', function (Blueprint $table) {
+            $table->id();
+            $table->timestamp('created_at')->default(DB::raw('CURRENT_TIMESTAMP'));
+            $table->timestamp('updated_at')->default(DB::raw('CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP'));
+            $table->string('name')->nullable();
+            $table->string('kbli')->nullable();
+            $table->string('activities')->nullable();
+            $table->string('area')->nullable();
+            $table->string('location')->nullable();
+            $table->string('number')->nullable();
+            $table->dateTime('date')->nullable();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('spatial_planning');
+    }
+};

database/migrations/2025_02_20_073855_rename_spatial_planning_table.php

@@ -0,0 +1,24 @@
+<?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::rename('spatial_planning', 'spatial_plannings');
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::rename('spatial_plannings', 'spatial_planning');
+    }
+};

resources/js/data/advertisements/form-create-update.js

@@ -28,12 +28,7 @@ document.addEventListener("DOMContentLoaded", function () {
             data[key] = value;
         });
         
-        // Log semua data dalam FormData
-        for (let pair of formData.entries()) {
-            console.log(pair[0] + ": " + pair[1]);
-        }
         const url = form.getAttribute("action");
-        console.log("Ini adalah url dari form action", url);
         
         const method = isEdit ? "PUT" : "POST";
 
@@ -49,7 +44,6 @@ document.addEventListener("DOMContentLoaded", function () {
         })
         .then(response => response.json())
         .then(data => {
-            console.log("Response data:", data);
             if (!data.errors) {
                 // Remove existing icon (if any) before adding the new one
                 if (authLogo) {
@@ -74,11 +68,11 @@ document.addEventListener("DOMContentLoaded", function () {
                 toast.classList.add('show');  // Show the toast
                 setTimeout(() => {
                     toast.classList.remove('show');  // Hide the toast after 3 seconds
-                }, 3000);
+                }, 2000);
                 
                 setTimeout(() => {
                     window.location.href = '/data/advertisements';
-                }, 3000);
+                }, 1000);
             } else {
                 if (authLogo) {
                     // Hapus ikon yang sudah ada jika ada
@@ -96,21 +90,21 @@ document.addEventListener("DOMContentLoaded", function () {
                     // Tambahkan ikon ke dalam auth-logo
                     authLogo.appendChild(icon);
                 }
-                // Set error message for the toast
-                toastBody.textContent = "Error: " + (responseData.message || "Something went wrong");
-                toast.classList.add('show');  // Show the toast
 
                 // Enable button and reset its text on error
                 modalButton.disabled = false;
                 modalButton.innerHTML = isEdit ? "Update" : "Create"; 
 
+                // Set error message for the toast
+                toastBody.textContent = "Failed: " + (data.message || "Something went wrong");
+                toast.classList.add('show');  // Show the toast
+
                 setTimeout(() => {
                     toast.classList.remove('show');  // Hide the toast after 3 seconds
                 }, 3000);
             }
         })
-        .catch(error => {
+        .catch(errors => {
-            console.error("Error:", error);
             if (authLogo) {
                 // Hapus ikon yang sudah ada jika ada
                 const existingIcon = authLogo.querySelector('.bx');
@@ -127,14 +121,14 @@ document.addEventListener("DOMContentLoaded", function () {
                 // Tambahkan ikon ke dalam auth-logo
                 authLogo.appendChild(icon);
             }
+            // Enable button and reset its text on error
+            modalButton.disabled = false;
+            modalButton.innerHTML = isEdit ? "Update" : "Create";
+
             // Set error message for the toast
             toastBody.textContent = "An error occurred while processing your request.";
             toast.classList.add('show');  // Show the toast
 
-            // Enable button and reset its text on error
-            modalButton.disabled = false;
-            modalButton.innerHTML = isEdit ? "Update" : "Create"; 
-
             setTimeout(() => {
                 toast.classList.remove('show');  // Hide the toast after 3 seconds
             }, 3000);
@@ -144,7 +138,6 @@ document.addEventListener("DOMContentLoaded", function () {
     // Fungsi fetchOptions untuk autocomplete server-side
     window.fetchOptions = function (field) {
         let inputValue = document.getElementById(field).value;
-        console.log("Query Value:", inputValue); // Debugging log
         if (inputValue.length < 2) return;
         let districtValue = document.getElementById("district_name").value; // Ambil kecamatan terpilih
     

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

@@ -0,0 +1,63 @@
+import { Grid } from "gridjs/dist/gridjs.umd.js";
+import gridjs from "gridjs/dist/gridjs.umd.js";
+import "gridjs/dist/gridjs.umd.js";
+import GlobalConfig from "../../global-config.js";
+import GeneralTable from "../../table-generator.js";
+
+const dataSpatialPlanningColumns = [
+    "No",
+    "Nama",
+    "KBLI",
+    "Kegiatan",
+    "Luas",
+    "Lokasi",
+    "Nomor",
+    "Tanggal",
+    {
+        name: "Actions",
+        widht: "120px",
+        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">
+                    <button class="btn btn-warning me-2 btn-edit" 
+                        data-id="${id}" 
+                        data-model="${model}">
+                        <i class='bx bx-edit'></i></button>
+            
+                    <button class="btn btn-red btn-delete" 
+                        data-id="${id}">
+                        <i class='bx bxs-trash'></i></button>
+                </div>
+            `);
+        },
+    },
+];
+
+document.addEventListener("DOMContentLoaded", () => {
+    const table = new GeneralTable(
+        "spatial-planning-data-table",
+        `${GlobalConfig.apiHost}/api/spatial-plannings`,
+        `${GlobalConfig.apiHost}`,
+        dataSpatialPlanningColumns
+    );
+
+    table.processData = function (data) {
+        return data.data.map((item) => {
+            return [
+                item.no,
+                item.name,
+                item.kbli,
+                item.activities,
+                item.area,
+                item.location,
+                item.number,
+                item.date,
+                item.id,
+            ];
+        });
+    };
+
+    table.init();
+});

resources/js/data/spatialPlannings/form-create-update.js

@@ -0,0 +1,185 @@
+import GlobalConfig from "../../global-config";
+
+document.addEventListener("DOMContentLoaded", function () {
+    const saveButton = document.querySelector(".modal-footer .btn-primary");
+    const modalButton = document.querySelector(".btn-modal");
+    const form = document.querySelector("form#create-update-form");
+    var authLogo = document.querySelector(".auth-logo");
+
+    if (!saveButton || !form) return;
+
+    saveButton.addEventListener("click", function () {
+        // Disable tombol dan tampilkan spinner
+        modalButton.disabled = true;
+        modalButton.innerHTML = `
+            <span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>
+            Loading...
+        `;
+        const isEdit = saveButton.classList.contains("btn-edit");
+        const formData = new FormData(form);
+        const toast = document.getElementById("toastEditUpdate");
+        const toastBody = toast.querySelector(".toast-body");
+        const toastHeader = toast.querySelector(".toast-header small");
+
+        const data = {};
+
+        // Mengonversi FormData ke dalam JSON
+        formData.forEach((value, key) => {
+            data[key] = value;
+        });
+
+        const url = form.getAttribute("action");
+
+        const method = isEdit ? "PUT" : "POST";
+
+        fetch(url, {
+            method: method,
+            body: JSON.stringify(data),
+            headers: {
+                Authorization: `Bearer ${document
+                    .querySelector('meta[name="api-token"]')
+                    .getAttribute("content")}`,
+                "Content-Type": "application/json",
+            },
+        })
+            .then((response) => response.json())
+            .then((data) => {
+                if (!data.errors) {
+                    // Remove existing icon (if any) before adding the new one
+                    if (authLogo) {
+                        // Hapus ikon yang sudah ada jika ada
+                        const existingIcon = authLogo.querySelector(".bx");
+                        if (existingIcon) {
+                            authLogo.removeChild(existingIcon);
+                        }
+
+                        // Buat ikon baru
+                        const icon = document.createElement("i");
+                        icon.classList.add("bx", "bxs-check-square");
+                        icon.style.fontSize = "25px";
+                        icon.style.color = "green"; // Pastikan 'green' dalam bentuk string
+
+                        // Tambahkan ikon ke dalam auth-logo
+                        authLogo.appendChild(icon);
+                    }
+
+                    // Set success message for the toast
+                    toastBody.textContent = isEdit
+                        ? "Data updated successfully!"
+                        : "Data created successfully!";
+                    toast.classList.add("show"); // Show the toast
+                    setTimeout(() => {
+                        toast.classList.remove("show"); // Hide the toast after 3 seconds
+                    }, 3000);
+
+                    setTimeout(() => {
+                        window.location.href = "/data/spatial-plannings";
+                    }, 3000);
+                } else {
+                    if (authLogo) {
+                        // Hapus ikon yang sudah ada jika ada
+                        const existingIcon = authLogo.querySelector(".bx");
+                        if (existingIcon) {
+                            authLogo.removeChild(existingIcon);
+                        }
+
+                        // Buat ikon baru
+                        const icon = document.createElement("i");
+                        icon.classList.add("bx", "bxs-error-alt");
+                        icon.style.fontSize = "25px";
+                        icon.style.color = "red"; // Pastikan 'green' dalam bentuk string
+
+                        // Tambahkan ikon ke dalam auth-logo
+                        authLogo.appendChild(icon);
+                    }
+                    // Set error message for the toast
+                    toastBody.textContent =
+                        "Error: " + (data.message || "Something went wrong");
+                    toast.classList.add("show"); // Show the toast
+
+                    // Enable button and reset its text on error
+                    modalButton.disabled = false;
+                    modalButton.innerHTML = isEdit ? "Update" : "Create";
+
+                    setTimeout(() => {
+                        toast.classList.remove("show"); // Hide the toast after 3 seconds
+                    }, 3000);
+                }
+            })
+            .catch((error) => {
+                if (authLogo) {
+                    // Hapus ikon yang sudah ada jika ada
+                    const existingIcon = authLogo.querySelector(".bx");
+                    if (existingIcon) {
+                        authLogo.removeChild(existingIcon);
+                    }
+
+                    // Buat ikon baru
+                    const icon = document.createElement("i");
+                    icon.classList.add("bx", "bxs-error-alt");
+                    icon.style.fontSize = "25px";
+                    icon.style.color = "red"; // Pastikan 'green' dalam bentuk string
+
+                    // Tambahkan ikon ke dalam auth-logo
+                    authLogo.appendChild(icon);
+                }
+                // Set error message for the toast
+                toastBody.textContent =
+                    "An error occurred while processing your request.";
+                toast.classList.add("show"); // Show the toast
+
+                // Enable button and reset its text on error
+                modalButton.disabled = false;
+                modalButton.innerHTML = isEdit ? "Update" : "Create";
+
+                setTimeout(() => {
+                    toast.classList.remove("show"); // Hide the toast after 3 seconds
+                }, 3000);
+            });
+    });
+
+    // Fungsi fetchOptions untuk autocomplete server-side
+    window.fetchOptions = function (field) {
+        let inputValue = document.getElementById(field).value;
+        if (inputValue.length < 2) return;
+        let districtValue = document.getElementById("district_name").value; // Ambil kecamatan terpilih
+
+        let url = `${
+            GlobalConfig.apiHost
+        }/api/combobox/search-options?query=${encodeURIComponent(
+            inputValue
+        )}&field=${field}`;
+
+        // Jika field desa, tambahkan kecamatan sebagai filter
+        if (field === "village_name") {
+            url += `&district=${encodeURIComponent(districtValue)}`;
+        }
+
+        fetch(url, {
+            method: "GET",
+            headers: {
+                Authorization: `Bearer ${document
+                    .querySelector('meta[name="api-token"]')
+                    .getAttribute("content")}`,
+                "Content-Type": "application/json",
+            },
+        })
+            .then((response) => response.json())
+            .then((data) => {
+                let dataList = document.getElementById(field + "Options");
+                dataList.innerHTML = "";
+
+                data.forEach((item) => {
+                    let option = document.createElement("option");
+                    option.value = item.name;
+                    option.dataset.code = item.code;
+                    dataList.appendChild(option);
+                });
+            })
+            .catch((error) => console.error("Error fetching options:", error));
+    };
+
+    document.querySelector(".btn-back").addEventListener("click", function () {
+        window.history.back();
+    });
+});

resources/js/data/spatialPlannings/form-upload.js

@@ -0,0 +1,150 @@
+import { Dropzone } from "dropzone";
+import GlobalConfig from "../../global-config.js";
+
+Dropzone.autoDiscover = false;
+
+var previewTemplate,
+    dropzone,
+    dropzonePreviewNode = document.querySelector("#dropzone-preview-list");
+console.log(previewTemplate);
+console.log(dropzone);
+console.log(dropzonePreviewNode);
+
+(dropzonePreviewNode.id = ""),
+    dropzonePreviewNode &&
+        ((previewTemplate = dropzonePreviewNode.parentNode.innerHTML),
+        dropzonePreviewNode.parentNode.removeChild(dropzonePreviewNode),
+        (dropzone = new Dropzone(".dropzone", {
+            url: `${GlobalConfig.apiHost}/api/spatial-plannings/import`,
+            // url: "https://httpbin.org/post",
+            method: "post",
+            acceptedFiles: ".xls,.xlsx",  // Use acceptedFiles for better validation
+            previewTemplate: previewTemplate,
+            previewsContainer: "#dropzone-preview",
+            autoProcessQueue: false,  // Disable auto post
+            headers: {
+                Authorization: `Bearer ${document
+                    .querySelector('meta[name="api-token"]')
+                    .getAttribute("content")}`
+            },
+            init: function() {
+                // Listen for the success event
+                this.on("success", function(file, response) {
+                    console.log("File successfully uploaded:", file);
+                    console.log("API Response:", response);
+                    
+                    // Show success toast
+                    showToast('bxs-check-square', 'green', response.message);
+                    document.getElementById("submit-upload").innerHTML = "Upload Files";
+                    // Tunggu sebentar lalu reload halaman
+                    setTimeout(() => {
+                        window.location.href = "/data/spatial-plannings";
+                    }, 2000);
+                });
+                // Listen for the error event
+                this.on("error", function(file, errorMessage) {
+                    console.error("Error uploading file:", file);
+                    console.error("Error message:", errorMessage);
+                    // Handle the error response
+
+                    // Show error toast
+                    showToast('bxs-error-alt', 'red', errorMessage.message);
+                    document.getElementById("submit-upload").innerHTML = "Upload Files";
+                });
+            }
+        })));
+
+// Add event listener to control the submission manually
+document.querySelector("#submit-upload").addEventListener("click", function() {
+    console.log("Ini adalah value dropzone", dropzone.files[0]);
+    const formData = new FormData()
+    console.log("Dropzonefiles",dropzone.files);
+
+    this.innerHTML = '<span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>Loading...';
+
+    // Pastikan ada file dalam queue sebelum memprosesnya
+    if (dropzone.files.length > 0) {
+        formData.append('file', dropzone.files[0])
+        console.log("ini adalah form data on submit", ...formData);
+        dropzone.processQueue();  // Ini akan manual memicu upload
+    } else {
+        // Show error toast when no file is selected
+        showToast('bxs-error-alt', 'red', "Please add a file first.");
+        document.getElementById("submit-upload").innerHTML = "Upload Files";
+    }
+});
+
+// Optional: Listen for the 'addedfile' event to log or control file add behavior
+dropzone.on("addedfile", function (file) {
+    console.log("File ditambahkan:", file);
+    console.log("Nama File:", file.name);
+    console.log("Tipe File:", file.type);
+    console.log("Ukuran File:", (file.size / 1024).toFixed(2) + " KB");
+});
+
+dropzone.on("complete", function(file) {
+    dropzone.removeFile(file);
+});
+
+// Add event listener to download file template
+document.getElementById('downloadtempspatialPlannings').addEventListener('click', function() {
+    var url = `${GlobalConfig.apiHost}/api/download-template-spatialPlannings`;
+    fetch(url, {
+        method: 'GET',
+        headers: {
+            Authorization: `Bearer ${document
+                .querySelector('meta[name="api-token"]')
+                .getAttribute("content")}`
+        },
+    })
+    .then(response => {
+        if (response.ok) {
+            return response.blob();  // Jika respons OK, konversi menjadi blob
+        } else {
+            return response.json(); // Jika respons gagal, konversi menjadi JSON untuk menangani pesan error
+        }
+    })
+    .then((blob) => {
+        console.log(blob);
+        const url = window.URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.style.display = 'none';
+        a.href = url;
+        a.download = 'template_rencana_tata_ruang.xlsx';
+        document.body.appendChild(a);
+        a.click();
+        window.URL.revokeObjectURL(url);
+    })
+    .catch((error) => {
+        console.error("Gagal mendownload file:", error);
+        showToast('bxs-error-alt', 'red', "Template file is not already exist.");
+    })
+})
+
+// Function to show toast
+function showToast(iconClass, iconColor, message) {
+    const toastElement = document.getElementById('toastUploadSpatialPlannings');
+    const toastBody = toastElement.querySelector('.toast-body');
+    const toastHeader = toastElement.querySelector('.toast-header');
+
+    // Remove existing icon (if any) before adding the new one
+    const existingIcon = toastHeader.querySelector('.bx');
+    if (existingIcon) {
+        toastHeader.querySelector('.auth-logo').removeChild(existingIcon); // Remove the existing icon
+    }
+
+    // Add the new icon to the toast header
+    const icon = document.createElement('i');
+    icon.classList.add('bx', iconClass);
+    icon.style.fontSize = '25px';
+    icon.style.color = iconColor;
+    toastHeader.querySelector('.auth-logo').appendChild(icon);
+
+    // Set the toast message
+    toastBody.textContent = message;
+
+    // Show the toast
+    const toast = new bootstrap.Toast(toastElement); // Inisialisasi Bootstrap Toast
+    toast.show();
+}
+

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

@@ -5,6 +5,7 @@ import GlobalConfig from "../../global-config.js";
 import GeneralTable from "../../table-generator.js";
 
 const dataTourismsColumns = [
+    "No",
     "Nama Perusahaan",
     "Nama Proyek",
     "Alamat Usaha",
@@ -54,6 +55,7 @@ document.addEventListener("DOMContentLoaded", () => {
     table.processData = function (data) {
         return data.data.map((item) => {
             return [
+                item.no,
                 item.business_name,
                 item.project_name,
                 item.business_address,

resources/js/data/tourisms/form-create-update.js

@@ -28,12 +28,7 @@ document.addEventListener("DOMContentLoaded", function () {
             data[key] = value;
         });
 
-        // Log semua data dalam FormData
-        for (let pair of formData.entries()) {
-            console.log(pair[0] + ": " + pair[1]);
-        }
         const url = form.getAttribute("action");
-        console.log("Ini adalah url dari form action", url);
 
         const method = isEdit ? "PUT" : "POST";
 
@@ -49,7 +44,6 @@ document.addEventListener("DOMContentLoaded", function () {
         })
             .then((response) => response.json())
             .then((data) => {
-                console.log("Response data:", data);
                 if (!data.errors) {
                     // Remove existing icon (if any) before adding the new one
                     if (authLogo) {
@@ -113,7 +107,6 @@ document.addEventListener("DOMContentLoaded", function () {
                 }
             })
             .catch((error) => {
-                console.error("Error:", error);
                 if (authLogo) {
                     // Hapus ikon yang sudah ada jika ada
                     const existingIcon = authLogo.querySelector(".bx");
@@ -148,7 +141,6 @@ document.addEventListener("DOMContentLoaded", function () {
     // Fungsi fetchOptions untuk autocomplete server-side
     window.fetchOptions = function (field) {
         let inputValue = document.getElementById(field).value;
-        console.log("Query Value:", inputValue); // Debugging log
         if (inputValue.length < 2) return;
         let districtValue = document.getElementById("district_name").value; // Ambil kecamatan terpilih
 

resources/js/data/tourisms/form-upload.js

@@ -88,7 +88,7 @@ dropzone.on("complete", function(file) {
 
 // Add event listener to download file template
 document.getElementById('downloadtemptourisms').addEventListener('click', function() {
-    var url = `${GlobalConfig.apiHost}/api/download-template-umkm`;
+    var url = `${GlobalConfig.apiHost}/api/download-template-tourism`;
     fetch(url, {
         method: 'GET',
         headers: {
@@ -105,11 +105,12 @@ document.getElementById('downloadtemptourisms').addEventListener('click', functi
         }
     })
     .then((blob) => {
+        console.log(blob);
         const url = window.URL.createObjectURL(blob);
         const a = document.createElement('a');
         a.style.display = 'none';
         a.href = url;
-        a.download = 'template_tourisms.xlsx';
+        a.download = 'template_pariwisata.xlsx';
         document.body.appendChild(a);
         a.click();
         window.URL.revokeObjectURL(url);
@@ -122,7 +123,7 @@ document.getElementById('downloadtemptourisms').addEventListener('click', functi
 
 // Function to show toast
 function showToast(iconClass, iconColor, message) {
-    const toastElement = document.getElementById('toastUploadUmkm');
+    const toastElement = document.getElementById('toastUploadTourisms');
     const toastBody = toastElement.querySelector('.toast-body');
     const toastHeader = toastElement.querySelector('.toast-header');
 

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

@@ -4,6 +4,7 @@ import GlobalConfig from "../../global-config.js";
 import GeneralTable from "../../table-generator.js";
 
 const dataUMKMColumns = [
+    "No",
     "Nama Usaha",
     "Alamat Usaha",
     "Deskripsi Usaha",
@@ -54,6 +55,7 @@ document.addEventListener("DOMContentLoaded", () => {
     table.processData = function (data) {
         return data.data.map((item) => {
             return [
+                item.no,
                 item.business_name,
                 item.business_address,
                 item.business_desc,

resources/js/data/umkm/form-create-update.js

@@ -28,12 +28,7 @@ document.addEventListener("DOMContentLoaded", function () {
             data[key] = value;
         });
 
-        // Log semua data dalam FormData
-        for (let pair of formData.entries()) {
-            console.log(pair[0] + ": " + pair[1]);
-        }
         const url = form.getAttribute("action");
-        console.log("Ini adalah url dari form action", url);
 
         const method = isEdit ? "PUT" : "POST";
 
@@ -74,11 +69,11 @@ document.addEventListener("DOMContentLoaded", function () {
                 toast.classList.add('show');  // Show the toast
                 setTimeout(() => {
                     toast.classList.remove('show');  // Hide the toast after 3 seconds
-                }, 3000);
+                }, 2000);
 
                 setTimeout(() => {
                     window.location.href = '/data/umkm';
-                }, 3000);
+                }, 1000);
             } else {
                 if (authLogo) {
                     // Hapus ikon yang sudah ada jika ada
@@ -96,14 +91,16 @@ document.addEventListener("DOMContentLoaded", function () {
                     // Tambahkan ikon ke dalam auth-logo
                     authLogo.appendChild(icon);
                 }
-                // Set error message for the toast
-                toastBody.textContent = "Error: " + (data.message || "Something went wrong");
-                toast.classList.add('show');  // Show the toast
 
                 // Enable button and reset its text on error
                 modalButton.disabled = false;
                 modalButton.innerHTML = isEdit ? "Update" : "Create";
 
+                
+                // Set error message for the toast
+                toastBody.textContent = "Error: " + (data.message || "Something went wrong");
+                toast.classList.add('show');  // Show the toast
+
                 setTimeout(() => {
                     toast.classList.remove('show');  // Hide the toast after 3 seconds
                 }, 3000);
@@ -127,14 +124,15 @@ document.addEventListener("DOMContentLoaded", function () {
                 // Tambahkan ikon ke dalam auth-logo
                 authLogo.appendChild(icon);
             }
-            // Set error message for the toast
-            toastBody.textContent = "An error occurred while processing your request.";
-            toast.classList.add('show');  // Show the toast
 
             // Enable button and reset its text on error
             modalButton.disabled = false;
             modalButton.innerHTML = isEdit ? "Update" : "Create";
 
+            // Set error message for the toast
+            toastBody.textContent = "An error occurred while processing your request.";
+            toast.classList.add('show');  // Show the toast
+
             setTimeout(() => {
                 toast.classList.remove('show');  // Hide the toast after 3 seconds
             }, 3000);
@@ -144,7 +142,6 @@ document.addEventListener("DOMContentLoaded", function () {
     // Fungsi fetchOptions untuk autocomplete server-side
     window.fetchOptions = function (field) {
         let inputValue = document.getElementById(field).value;
-        console.log("Query Value:", inputValue); // Debugging log
         if (inputValue.length < 2) return;
         let districtValue = document.getElementById("district_name").value; // Ambil kecamatan terpilih
 

resources/views/data/spatialPlannings/form-upload.blade.php

@@ -0,0 +1,91 @@
+@extends('layouts.vertical', ['subtitle' => 'File Upload'])
+
+@section('content')
+
+@include('layouts.partials/page-title', ['title' => 'Form', 'subtitle' => 'File Uploads'])
+
+<div class="row">
+    <div class="col-xl-12">
+        <div class="card">
+            <div class="card-header">
+                <div class="d-flex justify-content-between align-items-center">
+                    <h5 class="card-title mb-0">Upload Data Pariwisata</h5>
+                    <button id="downloadtempspatialPlannings" class="btn btn-secondary">Download Template</button>
+                </div>
+            </div>
+
+            <div class="card-body">
+
+                <div class="mb-3">
+
+                    <div class="dropzone">
+                        <form action="" method="post" enctype="multipart/form-data">
+                            <div class="fallback">
+                                <input id="file-dropzone"type="file" name="file" 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>
+                            <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>
+                            </p>
+                        </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">Upload Files</button>
+                </div>
+            </div> <!-- end card body -->
+        </div> <!-- end card -->
+    </div> <!-- end col -->
+</div> <!-- end row -->
+
+<div class="toast-container position-fixed end-0 top-0 p-3">
+    <div id="toastUploadSpatialPlannings" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
+        <div class="toast-header">
+            <div class="auth-logo me-auto">
+            </div>
+            <small class="text-muted"></small>
+            <button type="button" class="btn-close" data-bs-dismiss="toast"
+                aria-label="Close"></button>
+        </div>
+        <div class="toast-body">
+        </div>
+    </div>
+</div>
+
+@endsection
+
+@section('scripts')
+@vite(['resources/js/data/spatialPlannings/form-upload.js'])
+@endsection

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

@@ -0,0 +1,130 @@
+@extends('layouts.vertical', ['subtitle' => $subtitle]) <!-- Menggunakan subtitle dari controller -->
+
+@section('content')
+
+@include('layouts.partials/page-title', ['title' => $title, 'subtitle' => $subtitle]) <!-- Menggunakan title dan subtitle dari controller -->
+
+<div class="row d-flex justify-content-center">
+    @if (session('error'))
+        <div class="alert alert-danger">
+            {{ session('error') }}
+        </div>
+    @endif
+
+    @if ($errors->any())
+        <div class="alert alert-danger">
+            <ul>
+                @foreach ($errors->all() as $error)
+                    <li>{{ $error }}</li>
+                @endforeach
+            </ul>
+        </div>
+    @endif
+
+    <div class="col-lg-12 col-md-12">
+        <div class="card">
+            <div class="card-header">
+                <button class="btn btn-danger float-end btn-back">
+                    <i class='bx bx-arrow-back'></i>
+                    Back
+                </button>
+            </div>
+            <div class="card-body">
+                <form id="create-update-form" action="{{ isset($modelInstance) && $modelInstance->id ? $apiUrl . '/' . $modelInstance->id : $apiUrl }}" method="POST">
+                    @csrf
+                    @if(isset($modelInstance))
+                        @method('PUT')
+                    @endif
+
+                    <div class="row">
+                        @foreach($fields as $field => $label)
+                            <div class="col-md-6 form-group mb-3">
+                                <label for="{{ $field }}">{{ $label }}</label>
+                                @php
+                                    $fieldType = $fieldTypes[$field] ?? 'text'; // Default text jika tidak ditemukan tipe
+                                @endphp
+
+                                @if($fieldType == 'textarea')
+                                    <textarea id="{{ $field }}" name="{{ $field }}" class="form-control">{{ old($field, isset($modelInstance) ? $modelInstance->{$field} : '') }}</textarea>
+                                @elseif($fieldType == 'select' && isset($dropdownOptions[$field]))
+                                    <select id="{{ $field }}" name="{{ $field }}" class="form-control">
+                                        @foreach($dropdownOptions[$field] as $code => $name)
+                                            @php
+                                                // $selectedValue = old($field, $modelInstance->{$field});
+                                                $selectedValue = old($field, $modelInstance->$field ?? '');
+                                                $isSelected = strval($selectedValue) === strval($code);
+                                            @endphp
+                                            <option value="{{ $code }}" class="{{ $isSelected ? 'selected' : '' }}" {{ $isSelected ? 'selected' : '' }}>
+                                                {{ $name }}
+                                            </option>                                        
+                                        @endforeach
+                                    </select>
+                                @elseif($fieldType == 'combobox' && isset($dropdownOptions[$field]))
+                                    <input class="form-control" list="{{ $field }}Options" id="{{ $field }}" name="{{ $field }}" 
+                                        value="{{ old($field, isset($modelInstance) ? $modelInstance->{$field} : '') }}" placeholder="Type to search..." oninput="fetchOptions('{{ $field }}')">
+                                    <datalist id="{{ $field }}Options"></datalist>
+                                    @elseif($fieldType == 'date')
+                                    <input type="date" id="{{ $field }}" name="{{ $field }}" class="form-control" 
+                                        value="{{ old($field, isset($modelInstance) && $modelInstance->{$field} ? \Carbon\Carbon::parse($modelInstance->{$field})->format('Y-m-d') : '') }}">
+                                @else
+                                    <input type="{{ $fieldType }}" id="{{ $field }}" name="{{ $field }}" class="form-control" value="{{ old($field, isset($modelInstance) ? $modelInstance->{$field} : '') }}">
+                                @endif
+                            </div>
+                        @endforeach
+                    </div>
+
+                    <div class="d-flex justify-content-end">
+                        <button type="button" class="btn {{ isset($modelInstance) ? 'btn-warning' : 'btn-success' }} width-lg btn-modal" data-bs-toggle="modal" data-bs-target="#confirmationModalCenter">
+                            {{ isset($modelInstance) ? 'Update' : 'Create' }}
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+</div>
+
+
+<!-- Modal -->
+<div class="modal fade" id="confirmationModalCenter" tabindex="-1"
+    aria-labelledby="confirmationModalCenterTitle" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="confirmationModalCenterTitle">
+                  {{ isset($modelInstance) ? 'Update Confirmation' : 'Create Confirmation' }}
+                </h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal"
+                    aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                <p>{{ isset($modelInstance) ? 'Are you sure you want to save the data changes?' : 'Are you sure you want to create new data based on the form contents?' }}</p>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary"
+                    data-bs-dismiss="modal">Close</button>
+                <button type="button" class="btn btn-primary {{ isset($modelInstance) ? 'btn-edit' : 'btn-create' }}" data-bs-dismiss="modal">Save changes</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="toast-container position-fixed end-0 top-0 p-3">
+  <div id="toastEditUpdate" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
+      <div class="toast-header">
+          <div class="auth-logo me-auto">
+          </div>
+          <small class="text-muted"></small>
+          <button type="button" class="btn-close" data-bs-dismiss="toast"
+              aria-label="Close"></button>
+      </div>
+      <div class="toast-body">
+      </div>
+  </div>
+</div>
+
+@endsection
+
+@section('scripts')
+@vite(['resources/js/data/spatialPlannings/form-create-update.js'])
+@endsection

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

@@ -0,0 +1,38 @@
+@extends('layouts.vertical', ['subtitle' => 'Rencana Tata Ruang'])
+
+@section('css')
+@vite(['node_modules/gridjs/dist/theme/mermaid.min.css'])
+@endsection
+
+@section('content')
+@include('layouts.partials/page-title', ['title' => 'Data', 'subtitle' => 'Rencana Tata Ruang'])
+
+<div class="card">
+    <div class="card-header">
+        <h5 class="card-title">Daftar Rencana Tata Ruang</h5>
+    </div>
+    <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">
+                    <i class='bx bxs-file-plus'></i>
+                    Create</button>
+                <button class="btn btn-primary width-lg btn-bulk-create" data-model="data/spatial-plannings">
+                    <i class='bx bx-upload' ></i>
+                    Bulk Create
+                </button>
+            </div>
+            <div>
+                <div id="spatial-planning-data-table"></div>
+            </div>
+        </div>
+    </div>
+</div>
+
+{{-- <div id="alert-container"></div> --}}
+
+@endsection
+
+@section('scripts')
+@vite(['resources/js/data/spatialPlannings/data-spatialPlannings.js'])
+@endsection

resources/views/data/tourisms/form-upload.blade.php

@@ -71,7 +71,7 @@
 </div> <!-- end row -->
 
 <div class="toast-container position-fixed end-0 top-0 p-3">
-    <div id="toastUploadUmkm" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
+    <div id="toastUploadTourisms" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
         <div class="toast-header">
             <div class="auth-logo me-auto">
             </div>

routes/api.php

@@ -16,6 +16,7 @@ use App\Http\Controllers\Settings\SyncronizeController;
 use App\Http\Controllers\Api\AdvertisementController;
 use App\Http\Controllers\Api\UmkmController;
 use App\Http\Controllers\Api\TourismController;
+use App\Http\Controllers\Api\SpatialPlanningController;
 use Illuminate\Support\Facades\Route;
 
 Route::post('/login', [UsersController::class, 'login'])->name('api.user.login');
@@ -65,7 +66,11 @@ Route::group(['middleware' => 'auth:sanctum'], function (){
     //tourism
     Route::apiResource('tourisms', TourismController::class);
     Route::post('/tourisms/import', [TourismController::class, 'importFromFile']);
+    Route::get('/download-template-tourism', [TourismController::class, 'downloadExcelTourism']);
 
+    Route::apiResource('spatial-plannings', SpatialPlanningController::class);
+    Route::post('/spatial-plannings/import', [SpatialPlanningController::class, 'importFromFile']);
+    Route::get('/download-template-spatialPlannings', [SpatialPlanningController::class, 'downloadExcelSpatialPlanning']);
     
     // data-settings
     Route::apiResource('/api-data-settings', DataSettingController::class);

routes/web.php

@@ -13,6 +13,7 @@ use App\Http\Controllers\Settings\SyncronizeController;
 use App\Http\Controllers\Data\AdvertisementController;
 use App\Http\Controllers\Data\UmkmController;
 use App\Http\Controllers\Data\TourismController;
+use App\Http\Controllers\Data\SpatialPlanningController;
 use App\Http\Controllers\Report\ReportTourismController;
 use Illuminate\Support\Facades\Route;
 
@@ -79,6 +80,14 @@ Route::group(['middleware' => 'auth'], function(){
         // Rute khusus untuk create dan bulk-create
         Route::get('/tourisms/create', [TourismController::class, 'create'])->name('tourisms.create');
         Route::get('/tourisms/bulk-create', [TourismController::class, 'bulkCreate'])->name('tourisms.bulk-create');
+
+        // Resource route, kecuali create karena dibuat terpisah
+        Route::resource('/spatial-plannings', SpatialPlanningController::class)->except(['create', 'show']);
+        // Rute khusus untuk create dan bulk-create
+        Route::get('/spatial-plannings/create', [SpatialPlanningController::class, 'create'])->name('tourisms.create');
+        Route::get('/spatial-plannings/bulk-create', [SpatialPlanningController::class, 'bulkCreate'])->name('tourisms.bulk-create');
+        
+
         Route::resource('/business-industries',BusinessOrIndustriesController::class);
     });