Update Master Data

app/Http/Controllers/AuthController.php

@@ -0,0 +1,93 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+use App\Models\User;
+use Illuminate\Support\Facades\Hash;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Validation\ValidationException;
+use Illuminate\Support\Facades\Session;
+use Illuminate\Support\Facades\Validator;
+use Carbon\Carbon;
+class AuthController extends Controller
+{
+    public function login()
+    {
+        return view('auth.login');
+    }
+
+    public function register()
+    {
+        return view('auth.register');
+    }
+
+    public function createAccount(Request $request)
+    {
+        $validator = Validator::make($request->all(), [
+            'name' => 'required|string|max:255',
+            'email' => 'required|string|email|max:255|unique:users',
+            'password' => 'required|string|min:8|confirmed',
+        ]);
+
+        User::create([
+            'name' => $request->name,
+            'email' => $request->email,
+            'password' => Hash::make($request->password),
+            'email_verified_at' => null,
+            'created_by' => null,
+            'updated_by' => null,
+            'deleted_by' => null,
+        ]);
+
+        return redirect()->route('auth.login')->with('success', 'Account created successfully. Please login.');
+    }
+
+    public function verify(User $user)
+    {
+        try {
+            $newStatus = $user->email_verified_at ? null : now();
+            
+            $user->update([
+                'email_verified_at' => $newStatus
+            ]);
+
+            return response()->json([
+                'status' => 'success',
+                'message' => 'User status updated successfully'
+            ]);
+        } catch (\Exception $e) {
+            return response()->json(['message' => 'Server Error'], 500);
+        }
+    }
+
+    public function authenticate(Request $request)
+    {
+        $request->validate([
+            'email_username' => 'required|string',
+            'password' => 'required|string',
+        ]);
+
+        $login = $request->input('email_username');
+
+        $field = filter_var($login, FILTER_VALIDATE_EMAIL)
+            ? 'email'
+            : 'name';
+
+        if (Auth::attempt([$field => $login, 'password' => $request->password])) {
+            if (Auth::user()->email_verified_at === null) {
+                Auth::logout();
+
+                return back()->withErrors([
+                    'email_username' => 'Akun belum diverifikasi.',
+                ]);
+            }
+            $request->session()->regenerate();
+            return redirect()->intended('');
+        }
+
+        throw ValidationException::withMessages([
+            'email_username' => ['Email atau username salah.'],
+        ]);
+    }
+}

app/Http/Controllers/DesaKelurahanController.php

@@ -0,0 +1,10 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+
+class DesaKelurahanController extends Controller
+{
+    //
+}

app/Http/Controllers/HomeController.php

@@ -0,0 +1,13 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+
+class HomeController extends Controller
+{
+    public function index()
+    {
+        return view('index');
+    }
+}

app/Http/Controllers/KabupatenKotaController.php

@@ -0,0 +1,35 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+use App\Models\Wilayah\KabupatenKota;
+use App\Models\Wilayah\Provinsi;
+
+class KabupatenKotaController extends Controller
+{
+    public function index()
+    {
+        return view('master.kabupatenkota.index');
+    }
+
+    public function getKabupatenKota(Request $request)
+    {
+        $kabupatenKotaQuery = KabupatenKota::with(['provinsi']);
+
+        if ($request->has('provinsi_id') && !empty($request->provinsi_id)) {
+            $kabupatenKotaQuery->where('provinsi_id', $request->provinsi_id);
+        }
+
+        $kabupatenKota = $kabupatenKotaQuery->get()->map(function($item) {
+            return [
+                'id' => $item->id,
+                'kode_kabupaten_kota' => $item->kode_kabupaten_kota,
+                'nama_kabupaten_kota' => $item->nama_kabupaten_kota,
+                'nama_provinsi' => $item->provinsi->nama_provinsi ?? '-', 
+            ];
+        });
+
+        return response()->json(['data' => $kabupatenKota]);
+    }
+}

app/Http/Controllers/KecamatanController.php

@@ -0,0 +1,33 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+use App\Models\Wilayah\Kecamatan;
+use App\Models\Wilayah\KabupatenKota;
+
+class KecamatanController extends Controller
+{
+    public function index()
+    {
+        return view('master.kecamatan.index');
+    }
+
+    public function getKecamatan(Request $request)
+    {
+        $kecamatanQuery = Kecamatan::with(['kabupatenKota.provinsi']);
+        if ($request->has('kabupaten_kota_id') && !empty($request->kabupaten_kota_id)) {
+            $kecamatanQuery->where('kabupaten_kota_id', $request->kabupaten_kota_id);
+        }
+        $kecamatan = $kecamatanQuery->get()->map(function($item) {
+            return [
+                'id' => $item->id,
+                'kode_kecamatan' => $item->kode_kecamatan,
+                'nama_kecamatan' => $item->nama_kecamatan,
+                'nama_kabupaten_kota' => $item->kabupatenKota->nama_kabupaten_kota ?? '-', 
+                'nama_provinsi' => $item->kabupatenKota->provinsi->nama_provinsi ?? '-',
+            ];
+        });
+        return response()->json(['data' => $kecamatan]);
+    }
+}

app/Http/Controllers/ProvinsiController.php

@@ -0,0 +1,20 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+use App\Models\Wilayah\Provinsi;
+
+class ProvinsiController extends Controller
+{
+    public function index()
+    {
+        return view('master.provinsi.index');
+    }
+
+    public function getProvinsi()
+    {
+        $provinsi = Provinsi::select(['id', 'kode_provinsi', 'nama_provinsi', 'iso'])->get();
+        return response()->json(['data' => $provinsi]);
+    }
+}

app/Http/Controllers/UserController.php

@@ -0,0 +1,37 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+use App\Models\User;
+
+
+class UserController extends Controller
+{
+    public function index()
+    {
+        $users = User::all();
+        $totalUsers = $users->count();
+        return view('users.user.index', compact('users', 'totalUsers'));
+    }
+
+    public function getUsers()
+    {
+        $users = User::select(['id', 'name', 'email', 'email_verified_at', 'created_at'])->get();
+        return response()->json(['data' => $users]);
+    }
+
+    public function show($id)
+    {
+        $user = User::findOrFail($id);
+        return view('users.user.show', compact('user'));
+    }
+
+    public function destroy($id)
+    {
+        $user = User::findOrFail($id);
+        $user->delete();
+
+        return redirect()->route('users.user.index')->with('success', 'User deleted successfully.');
+    }
+}

app/Http/Controllers/UserRoleController.php

@@ -0,0 +1,23 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+
+class UserRoleController extends Controller
+{
+    public function index()
+    {
+        return view('users.role.index');
+    }
+
+    public function store(Request $request)
+    {
+        // Logic to store a new role
+    }
+
+    public function destroy($id)
+    {
+        // Logic to delete a role
+    }
+}

app/Models/User.php

@@ -10,35 +10,18 @@ use Laravel\Sanctum\HasApiTokens;
 
 class User extends Authenticatable
 {
-    /** @use HasFactory<\Database\Factories\UserFactory> */
-    use HasFactory, Notifiable, HasApiTokens;
-
-    /**
-     * The attributes that are mass assignable.
-     *
-     * @var list<string>
-     */
     protected $fillable = [
         'name',
         'email',
         'password',
+        'email_verified_at',
     ];
 
-    /**
-     * The attributes that should be hidden for serialization.
-     *
-     * @var list<string>
-     */
     protected $hidden = [
         'password',
         'remember_token',
     ];
 
-    /**
-     * Get the attributes that should be cast.
-     *
-     * @return array<string, string>
-     */
     protected function casts(): array
     {
         return [

app/Models/Wilayah/DesaKelurahan.php

@@ -0,0 +1,17 @@
+<?php
+
+namespace App\Models\wilayah;
+
+use Illuminate\Database\Eloquent\Model;
+
+class DesaKelurahan extends Model
+{
+    protected $table = 'master_desa_kelurahan';
+
+    protected $fillable = [
+        'kode_desa_kelurahan',
+        'nama_desa_kelurahan',
+        'path',
+        'kecamatan_id',
+    ];
+}

app/Models/Wilayah/KabupatenKota.php

@@ -0,0 +1,22 @@
+<?php
+
+namespace App\Models\Wilayah;
+
+use Illuminate\Database\Eloquent\Model;
+
+class KabupatenKota extends Model
+{
+    protected $table = 'master_kabupaten_kota';
+
+    protected $fillable = [
+        'kode_kabupaten_kota',
+        'nama_kabupaten_kota',
+        'path',
+        'provinsi_id',
+    ];
+
+    public function provinsi()
+    {
+        return $this->belongsTo(Provinsi::class, 'provinsi_id');
+    }
+}

app/Models/Wilayah/Kecamatan.php

@@ -0,0 +1,22 @@
+<?php
+
+namespace App\Models\Wilayah;
+
+use Illuminate\Database\Eloquent\Model;
+
+class Kecamatan extends Model
+{
+    protected $table = 'master_kecamatan';
+
+    protected $fillable = [
+        'kode_kecamatan',
+        'nama_kecamatan',
+        'path',
+        'kabupaten_kota_id',
+    ];
+
+    public function kabupatenKota()
+    {
+        return $this->belongsTo(KabupatenKota::class, 'kabupaten_kota_id');
+    }
+}

app/Models/Wilayah/Provinsi.php

@@ -0,0 +1,17 @@
+<?php
+
+namespace App\Models\Wilayah;
+
+use Illuminate\Database\Eloquent\Model;
+
+class Provinsi extends Model
+{
+    protected $table = 'master_provinsi';
+
+    protected $fillable = [
+        'kode_provinsi',
+        'nama_provinsi',
+        'path',
+        'iso',
+    ]; 
+}

config/app.php

@@ -65,7 +65,7 @@ return [
     |
     */
 
-    'timezone' => 'UTC',
+    'timezone' => 'Asia/Jakarta',
 
     /*
     |--------------------------------------------------------------------------

database/migrations/0001_01_01_000000_create_users_table.php

@@ -6,11 +6,8 @@ use Illuminate\Support\Facades\Schema;
 
 return new class extends Migration
 {
-    /**
-     * Run the migrations.
-     */
     public function up(): void
-    {
+    {   
         Schema::create('users', function (Blueprint $table) {
             $table->id();
             $table->string('name');
@@ -18,7 +15,22 @@ return new class extends Migration
             $table->timestamp('email_verified_at')->nullable();
             $table->string('password');
             $table->rememberToken();
+            $table->foreignId('created_by')->nullable()->constrained('users')->onDelete('set null');
+            $table->foreignId('updated_by')->nullable()->constrained('users')->onDelete('set null');
+            $table->foreignId('deleted_by')->nullable()->constrained('users')->onDelete('set null');
             $table->timestamps();
+            $table->softDeletes();
+        });
+
+        Schema::create('user_roles', function (Blueprint $table) {
+            $table->id();
+            $table->foreignId('user_id')->unique()->constrained('users')->onDelete('cascade');
+            $table->enum('role_name', ['Super Admin', 'Admin', 'Koordinator', 'Penyuluh', 'Pendamping', 'Petani'])->default('Petani');
+            $table->foreignId('created_by')->nullable()->constrained('users')->onDelete('set null');
+            $table->foreignId('updated_by')->nullable()->constrained('users')->onDelete('set null');
+            $table->foreignId('deleted_by')->nullable()->constrained('users')->onDelete('set null');
+            $table->timestamps();
+            $table->softDeletes();
         });
 
         Schema::create('password_reset_tokens', function (Blueprint $table) {
@@ -37,12 +49,10 @@ return new class extends Migration
         });
     }
 
-    /**
-     * Reverse the migrations.
-     */
     public function down(): void
     {
         Schema::dropIfExists('users');
+        Schema::dropIfExists('user_roles');
         Schema::dropIfExists('password_reset_tokens');
         Schema::dropIfExists('sessions');
     }

database/migrations/2026_02_12_110653_create_wilayah_table.php

@@ -0,0 +1,74 @@
+<?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('master_provinsi', function (Blueprint $table) {
+            $table->id();
+            $table->string('kode_provinsi', 10)->unique();
+            $table->string('nama_provinsi', 100);
+            $table->string('path', 10000);
+            $table->string('iso', 100);
+            $table->foreignId('created_by')->nullable()->constrained('users')->onDelete('set null');
+            $table->foreignId('updated_by')->nullable()->constrained('users')->onDelete('set null');
+            $table->foreignId('deleted_by')->nullable()->constrained('users')->onDelete('set null');
+            $table->timestamps();
+            $table->softDeletes();
+        });
+
+        Schema::create('master_kabupaten_kota', function (Blueprint $table) {
+            $table->id();
+            $table->string('kode_kabupaten_kota', 10)->unique();
+            $table->string('nama_kabupaten_kota', 100);
+            $table->string('path', 10000);
+            $table->foreignId('provinsi_id')->constrained('master_provinsi')->onDelete('set null');
+            $table->foreignId('created_by')->nullable()->constrained('users')->onDelete('set null');
+            $table->foreignId('updated_by')->nullable()->constrained('users')->onDelete('set null');
+            $table->foreignId('deleted_by')->nullable()->constrained('users')->onDelete('set null');
+            $table->timestamps();
+            $table->softDeletes();
+        });
+
+        Schema::create('master_kecamatan', function (Blueprint $table) {
+            $table->id();
+            $table->string('kode_kecamatan', 10)->unique();
+            $table->string('nama_kecamatan', 100);
+            $table->string('path', 10000);
+            $table->foreignId('kabupaten_kota_id')->constrained('master_kabupaten_kota')->onDelete('set null');
+            $table->foreignId('created_by')->nullable()->constrained('users')->onDelete('set null');
+            $table->foreignId('updated_by')->nullable()->constrained('users')->onDelete('set null');
+            $table->foreignId('deleted_by')->nullable()->constrained('users')->onDelete('set null');
+            $table->timestamps();
+            $table->softDeletes();
+        });
+
+        Schema::create('master_desa_kelurahan', function (Blueprint $table) {
+            $table->id();
+            $table->string('kode_desa_kelurahan', 10)->unique();
+            $table->string('nama_desa_kelurahan', 100);
+            $table->string('path', 10000);
+            $table->foreignId('kecamatan_id')->constrained('master_kecamatan')->onDelete('set null');
+            $table->foreignId('created_by')->nullable()->constrained('users')->onDelete('set null');
+            $table->foreignId('updated_by')->nullable()->constrained('users')->onDelete('set null');
+            $table->foreignId('deleted_by')->nullable()->constrained('users')->onDelete('set null');
+            $table->timestamps();
+            $table->softDeletes();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('master_desa_kelurahan');
+        Schema::dropIfExists('master_kecamatan');
+        Schema::dropIfExists('master_kabupaten_kota');
+        Schema::dropIfExists('master_provinsi');
+    }
+};

public/assets/css/demo.css

@@ -0,0 +1,105 @@
+/*
+* demo.css
+* File include item demo only specific css only
+******************************************************************************/
+
+.menu .app-brand.demo {
+  height: 64px;
+}
+
+.app-brand-logo.demo svg {
+  width: 34px;
+  height: 24px;
+}
+
+.app-brand-text.demo {
+  font-size: 1.375rem;
+}
+
+/* ! For .layout-navbar-fixed added fix padding top to .layout-page */
+/* Default navbar */
+.layout-navbar-fixed .layout-wrapper:not(.layout-without-menu) .layout-page {
+  padding-top: 64px !important;
+}
+.layout-navbar-fixed .layout-wrapper:not(.layout-horizontal):not(.layout-without-menu) .layout-page {
+  padding-top: 72px !important;
+}
+/* Navbar page z-index issue solution */
+.content-wrapper .navbar {
+  z-index: auto;
+}
+
+/*
+* Content
+******************************************************************************/
+
+.demo-blocks > * {
+  display: block !important;
+}
+
+.demo-inline-spacing > * {
+  margin: 1rem 0.375rem 0 0 !important;
+}
+
+/* ? .demo-vertical-spacing class is used to have vertical margins between elements. To remove margin-top from the first-child, use .demo-only-element class with .demo-vertical-spacing class. For example, we have used this class in forms-input-groups.html file. */
+.demo-vertical-spacing > * {
+  margin-top: 1rem !important;
+  margin-bottom: 0 !important;
+}
+.demo-vertical-spacing.demo-only-element > :first-child {
+  margin-top: 0 !important;
+}
+
+.demo-vertical-spacing-lg > * {
+  margin-top: 1.875rem !important;
+  margin-bottom: 0 !important;
+}
+.demo-vertical-spacing-lg.demo-only-element > :first-child {
+  margin-top: 0 !important;
+}
+
+.demo-vertical-spacing-xl > * {
+  margin-top: 5rem !important;
+  margin-bottom: 0 !important;
+}
+.demo-vertical-spacing-xl.demo-only-element > :first-child {
+  margin-top: 0 !important;
+}
+
+/* Dropdown buttons going out of small screens */
+@media (max-width: 576px) {
+  #dropdown-variation-demo .btn-group .text-truncate {
+    width: 254px;
+    position: relative;
+  }
+  #dropdown-variation-demo .btn-group .text-truncate::after {
+    position: absolute;
+    top: 45%;
+    right: 0.65rem;
+  }
+}
+
+/*
+* Layout demo
+******************************************************************************/
+
+.layout-demo-wrapper {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  margin-top: 1rem;
+}
+.layout-demo-placeholder img {
+  width: 900px;
+}
+.layout-demo-info {
+  text-align: center;
+  margin-top: 1rem;
+}

public/assets/img/customizer/content-compact.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 104 66" height="62" width="98"><rect fill-opacity="0.02" fill="currentColor" rx="4" height="66" width="104"></rect><rect fill-opacity="0.08" fill="currentColor" rx="2" height="8.8" width="64.7547" y="4.67169" x="19.4209"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1" height="4.4" width="3.92453" y="6.87164" x="22.3447"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1" height="4.4" width="3.92453" y="6.87164" x="65.5146"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1" height="4.4" width="3.92453" y="6.87164" x="71.4014"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1" height="4.4" width="3.92453" y="6.87164" x="77.2881"></rect><rect fill-opacity="0.08" fill="currentColor" rx="2" height="17.6" width="40.2264" y="19.6135" x="44.3525"></rect><rect fill-opacity="0.08" fill="currentColor" rx="2" height="17.6" width="19.0455" y="19.6135" x="19.4209"></rect><rect fill-opacity="0.08" fill="currentColor" rx="2" height="17.6" width="65.1591" y="42.4545" x="19.4209"></rect></svg>

public/assets/img/customizer/content-wide.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 104 66" height="62" width="98"><rect fill-opacity="0.02" fill="currentColor" rx="4" height="66" width="104"></rect><rect fill-opacity="0.08" fill="currentColor" rx="2" height="8.8" width="90.6244" y="4.67169" x="6.6875"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1" height="4.4" width="4.90566" y="6.87164" x="10.165"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1" height="4.4" width="4.90566" y="6.87164" x="75.2002"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1" height="4.4" width="4.90566" y="6.87164" x="82.0674"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1" height="4.4" width="4.90566" y="6.87164" x="88.9346"></rect><rect fill-opacity="0.08" fill="currentColor" rx="2" height="17.6" width="55.9476" y="19.6135" x="41.3652"></rect><rect fill-opacity="0.08" fill="currentColor" rx="2" height="17.6" width="26.4888" y="19.6135" x="6.6875"></rect><rect fill-opacity="0.08" fill="currentColor" rx="2" height="17.6" width="90.6244" y="42.4545" x="6.6875"></rect></svg>

public/assets/img/customizer/direction-ltr.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 104 66" height="62" width="98"><rect fill-opacity="0.02" fill="currentColor" rx="4" height="66" width="104"></rect><rect fill-opacity="0.08" fill="currentColor" rx="2" height="57.5885" width="24.0976" y="4.12146" x="5.20215"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1.04605" height="2.0921" width="13.8545" y="16.8697" x="10.3232"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1.04605" height="2.0921" width="9.87943" y="25.5618" x="10.3232"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1.04605" height="2.0921" width="12.3826" y="34.2538" x="10.3232"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1.04605" height="2.0921" width="6.08818" y="42.946" x="10.3232"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1.04605" height="2.0921" width="8.09094" y="51.6384" x="10.3232"></rect><rect fill-opacity="0.08" fill="currentColor" rx="2" height="57.5885" width="62.3885" y="4.12134" x="35.5137"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1.04605" height="2.0921" width="13.8545" y="14.1833" x="43.7578"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1.04605" height="2.0921" width="32.8013" y="22.8753" x="43.7578"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1.04605" height="2.0921" width="41.2076" y="31.5674" x="43.7578"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1.04605" height="2.0921" width="32.8013" y="40.2593" x="43.7578"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1.04605" height="2.0921" width="5.77482" y="48.9517" x="43.7578"></rect></svg>

public/assets/img/customizer/direction-rtl.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 104 66" height="62" width="98"><rect fill-opacity="0.02" fill="currentColor" rx="4" height="66" width="104"></rect><rect fill-opacity="0.08" fill="currentColor" rx="2" height="57.5885" width="24.0976" y="4.12134" x="73.4756"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1.04605" height="2.0921" width="13.8545" y="16.8697" x="78.5986"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1.04605" height="2.0921" width="9.87943" y="25.5618" x="82.5713"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1.04605" height="2.0921" width="12.3826" y="34.2537" x="80.0693"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1.04605" height="2.0921" width="6.08818" y="42.9459" x="86.3633"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1.04605" height="2.0921" width="8.09094" y="51.6382" x="84.3613"></rect><rect fill-opacity="0.08" fill="currentColor" rx="2" height="57.5885" width="62.3885" y="4.12146" x="5.20215"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1.04605" height="2.0921" width="13.8545" y="14.1833" x="45.709"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1.04605" height="2.0921" width="32.8013" y="22.8754" x="26.7617"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1.04605" height="2.0921" width="41.2076" y="31.5674" x="18.3555"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1.04605" height="2.0921" width="32.8013" y="40.2594" x="26.7617"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1.04605" height="2.0921" width="5.77482" y="48.9517" x="53.7881"></rect></svg>

public/assets/img/customizer/horizontal-fixed.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 104 66" height="62" width="98">
+<rect fill-opacity="0.02" fill="currentColor" rx="4" height="66" width="104"></rect>
+<rect fill-opacity="0.08" fill="currentColor" rx="2" height="8.8" width="64.7547" y="4.67169" x="19.4209"></rect>
+<rect fill-opacity="0.3" fill="currentColor" rx="1" height="4.4" width="3.92453" y="6.87164" x="22.3447"></rect>
+<rect fill-opacity="0.3" fill="currentColor" rx="1" height="4.4" width="3.92453" y="6.87164" x="65.5146"></rect>
+<rect fill-opacity="0.3" fill="currentColor" rx="1" height="4.4" width="3.92453" y="6.87164" x="71.4014"></rect>
+<rect fill-opacity="0.3" fill="currentColor" rx="1" height="4.4" width="3.92453" y="6.87164" x="77.2881"></rect>
+<rect fill-opacity="0.08" fill="currentColor" rx="2" height="17.6" width="40.2264" y="19.6135" x="44.3525"></rect>
+<rect fill-opacity="0.08" fill="currentColor" rx="2" height="17.6" width="19.0455" y="19.6135" x="19.4209"></rect>
+<rect fill-opacity="0.08" fill="currentColor" rx="2" height="17.6" width="65.1591" y="42.4545" x="19.4209"></rect>
+</svg>

public/assets/img/customizer/horizontal-static.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 104 66" height="62" width="98"><rect fill-opacity="0.02" fill="currentColor" rx="4" height="66" width="104"></rect><rect fill-opacity="0.08" fill="currentColor" rx="2" height="17.6" width="46.8212" y="19.6136" x="44.0068"></rect><rect fill-opacity="0.08" fill="currentColor" rx="2" height="17.6" width="22.1679" y="19.6136" x="14.9854"></rect><rect fill-opacity="0.08" fill="currentColor" rx="2" height="17.6" width="75.8413" y="42.4547" x="14.9854"></rect><rect fill-opacity="0.08" fill="currentColor" rx="2" height="9.00999" width="74.1506" y="4.68896" x="14.9248"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1" height="5.38019" width="6.00327" y="6.50403" x="20.0264"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1.23064" height="2.46129" width="6.6372" y="7.96356" x="33.877"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1.23064" height="2.46129" width="6.6372" y="7.96356" x="48.3652"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1.23064" height="2.46129" width="6.6372" y="7.96356" x="62.8506"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1.23064" height="2.46129" width="6.6372" y="7.96356" x="77.3379"></rect></svg>

public/assets/img/customizer/layouts-collapsed.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 104 66" height="62" width="98"><rect fill-opacity="0.02" fill="currentColor" rx="4" height="66" width="104"></rect><path fill-opacity="0.04" fill="currentColor" d="M0 4C0 1.79086 1.79086 0 4 0H13.7359V66H4C1.79086 66 0 64.2091 0 62V4Z"></path><rect fill-opacity="0.3" fill="currentColor" rx="1.39473" height="2.78946" width="7.84906" y="23.8839" x="2.94336"></rect><rect fill-opacity="0.3" fill="currentColor" rx="2" height="6.79412" width="6.86793" y="5.88135" x="3.43359"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1.39473" height="2.78946" width="7.84906" y="34.4382" x="2.94336"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1.39473" height="2.78946" width="7.84906" y="44.9923" x="2.94336"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1.39473" height="2.78946" width="7.84906" y="55.5463" x="2.94336"></rect><rect fill-opacity="0.08" fill="currentColor" rx="2" height="8.8" width="75.437" y="4.67169" x="21.4717"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1" height="4.4" width="3.92453" y="6.87158" x="25.6172"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1" height="4.4" width="3.92453" y="6.87158" x="78.248"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1" height="4.4" width="3.92453" y="6.87158" x="84.1348"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1" height="4.4" width="3.92453" y="6.87158" x="90.0215"></rect><rect fill-opacity="0.08" fill="currentColor" rx="2" height="17.6" width="46.8212" y="19.6134" x="50.4912"></rect><rect fill-opacity="0.08" fill="currentColor" rx="2" height="17.6" width="22.1679" y="19.6134" x="21.4717"></rect><rect fill-opacity="0.08" fill="currentColor" rx="2" height="17.6" width="75.8413" y="42.4545" x="21.4717"></rect></svg>

public/assets/img/customizer/layouts-expanded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 104 66" height="62" width="98"><rect fill-opacity="0.02" fill="currentColor" rx="4" height="66" width="104"></rect><path fill-opacity="0.08" fill="currentColor" d="M0 4C0 1.79086 1.79086 0 4 0H27.4717V66H4C1.79086 66 0 64.2091 0 62V4Z"></path><rect fill-opacity="0.3" fill="currentColor" rx="1.39473" height="2.78946" width="17.6604" y="23.8839" x="4.90625"></rect><rect fill-opacity="0.3" fill="currentColor" rx="2" height="9.70588" width="9.81132" y="5.88135" x="8.83008"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1.39473" height="2.78946" width="17.6604" y="34.4381" x="4.90625"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1.39473" height="2.78946" width="17.6604" y="44.9923" x="4.90625"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1.39473" height="2.78946" width="17.6604" y="55.5462" x="4.90625"></rect><rect fill-opacity="0.08" fill="currentColor" rx="2" height="8.8" width="64.7547" y="4.67166" x="34.1152"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1" height="4.4" width="3.92453" y="6.87158" x="37.0391"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1" height="4.4" width="3.92453" y="6.87158" x="80.21"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1" height="4.4" width="3.92453" y="6.87158" x="86.0957"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1" height="4.4" width="3.92453" y="6.87158" x="91.9824"></rect><rect fill-opacity="0.08" fill="currentColor" rx="2" height="17.6" width="40.2264" y="19.6134" x="58.4844"></rect><rect fill-opacity="0.08" fill="currentColor" rx="2" height="17.6" width="19.0455" y="19.6134" x="34.1152"></rect><rect fill-opacity="0.08" fill="currentColor" rx="2" height="17.6" width="64.7547" y="42.4545" x="34.1152"></rect></svg>

public/assets/img/customizer/navbar-hidden.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 104 66" height="62" width="98">
+<rect fill-opacity="0.02" fill="currentColor" rx="4" height="66" width="104"></rect>
+<rect fill-opacity="0.08" fill="currentColor" rx="2" height="17.6" width="46.8212" y="19.6136" x="44.0068"></rect>
+<rect fill-opacity="0.08" fill="currentColor" rx="2" height="17.6" width="22.1679" y="19.6136" x="14.9854"></rect>
+<rect fill-opacity="0.08" fill="currentColor" rx="2" height="17.6" width="75.8413" y="42.4547" x="14.9854"></rect>
+<rect fill-opacity="0.08" fill="currentColor" rx="2" height="9.00999" width="74.1506" y="4.68896" x="14.9248"></rect>
+<rect fill-opacity="0.3" fill="currentColor" rx="1" height="5.38019" width="6.00327" y="6.50403" x="20.0264"></rect>
+<rect fill-opacity="0.3" fill="currentColor" rx="1.23064" height="2.46129" width="6.6372" y="7.96356" x="33.877"></rect>
+<rect fill-opacity="0.3" fill="currentColor" rx="1.23064" height="2.46129" width="6.6372" y="7.96356" x="48.3652"></rect>
+<rect fill-opacity="0.3" fill="currentColor" rx="1.23064" height="2.46129" width="6.6372" y="7.96356" x="62.8506"></rect>
+<rect fill-opacity="0.3" fill="currentColor" rx="1.23064" height="2.46129" width="6.6372" y="7.96356" x="77.3379"></rect>
+</svg>

public/assets/img/customizer/navbar-static.svg

@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 104 66" height="62" width="98">
+<rect fill-opacity="0.02" fill="currentColor" rx="4" height="66" width="104"></rect>
+<path fill-opacity="0.06" fill="currentColor" d="M0 4C0 1.79086 1.79086 0 4 0H13.7359V66H4C1.79086 66 0 64.2091 0 62V4Z"></path>
+<rect fill-opacity="0.3" fill="currentColor" rx="1.39473" height="2.78946" width="7.84906" y="23.8839" x="2.94336"></rect>
+<rect fill-opacity="0.3" fill="currentColor" rx="2" height="6.79412" width="6.86793" y="5.88135" x="3.43359"></rect>
+<rect fill-opacity="0.3" fill="currentColor" rx="1.39473" height="2.78946" width="7.84906" y="34.4382" x="2.94336"></rect>
+<rect fill-opacity="0.3" fill="currentColor" rx="1.39473" height="2.78946" width="7.84906" y="44.9923" x="2.94336"></rect>
+<rect fill-opacity="0.3" fill="currentColor" rx="1.39473" height="2.78946" width="7.84906" y="55.5463" x="2.94336"></rect>
+<rect fill-opacity="0.08" fill="currentColor" rx="2" height="8.8" width="75.437" y="4.67169" x="21.4717"></rect>
+<rect fill-opacity="0.3" fill="currentColor" rx="1" height="4.4" width="3.92453" y="6.87158" x="25.6172"></rect>
+<rect fill-opacity="0.3" fill="currentColor" rx="1" height="4.4" width="3.92453" y="6.87158" x="78.248"></rect>
+<rect fill-opacity="0.3" fill="currentColor" rx="1" height="4.4" width="3.92453" y="6.87158" x="84.1348"></rect>
+<rect fill-opacity="0.3" fill="currentColor" rx="1" height="4.4" width="3.92453" y="6.87158" x="90.0215"></rect>
+<rect fill-opacity="0.08" fill="currentColor" rx="2" height="17.6" width="46.8212" y="19.6134" x="50.4912"></rect>
+<rect fill-opacity="0.08" fill="currentColor" rx="2" height="17.6" width="22.1679" y="19.6134" x="21.4717"></rect>
+<rect fill-opacity="0.08" fill="currentColor" rx="2" height="17.6" width="75.8413" y="42.4545" x="21.4717"></rect>
+</svg>

public/assets/img/customizer/navbar-sticky.svg

@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 104 66" height="62" width="98">
+<rect fill-opacity="0.02" fill="currentColor" rx="4" height="66" width="104"></rect>
+<path fill-opacity="0.08" fill="currentColor" d="M0 4C0 1.79086 1.79086 0 4 0H27.4717V66H4C1.79086 66 0 64.2091 0 62V4Z"></path>
+<rect fill-opacity="0.3" fill="currentColor" rx="1.39473" height="2.78946" width="17.6604" y="23.8839" x="4.90625"></rect>
+<rect fill-opacity="0.3" fill="currentColor" rx="2" height="9.70588" width="9.81132" y="5.88135" x="8.83008"></rect>
+<rect fill-opacity="0.3" fill="currentColor" rx="1.39473" height="2.78946" width="17.6604" y="34.4382" x="4.90625"></rect>
+<rect fill-opacity="0.3" fill="currentColor" rx="1.39473" height="2.78946" width="17.6604" y="44.9923" x="4.90625"></rect>
+<rect fill-opacity="0.3" fill="currentColor" rx="1.39473" height="2.78946" width="17.6604" y="55.5463" x="4.90625"></rect>
+<rect fill-opacity="0.08" fill="currentColor" rx="2" height="8.8" width="64.7547" y="4.67169" x="32.1523"></rect>
+<rect fill-opacity="0.3" fill="currentColor" rx="1" height="4.4" width="3.92453" y="6.87158" x="35.0781"></rect>
+<rect fill-opacity="0.3" fill="currentColor" rx="1" height="4.4" width="3.92453" y="6.87158" x="78.248"></rect>
+<rect fill-opacity="0.3" fill="currentColor" rx="1" height="4.4" width="3.92453" y="6.87158" x="84.1348"></rect>
+<rect fill-opacity="0.3" fill="currentColor" rx="1" height="4.4" width="3.92453" y="6.87158" x="90.0215"></rect>
+<rect fill-opacity="0.08" fill="currentColor" rx="2" height="17.6" width="40.2264" y="19.6134" x="57.0859"></rect>
+<rect fill-opacity="0.08" fill="currentColor" rx="2" height="17.6" width="19.0455" y="19.6134" x="32.1523"></rect>
+<rect fill-opacity="0.08" fill="currentColor" rx="2" height="17.6" width="65.1591" y="42.4545" x="32.1523"></rect>
+</svg>

public/assets/img/customizer/skin-border.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 104 66" height="62" width="98"><rect fill-opacity="0.02" fill="currentColor" rx="4" height="66" width="104"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1.39473" height="2.78946" width="17.6604" y="23.8839" x="4.90625"></rect><rect fill-opacity="0.3" fill="currentColor" rx="2" height="9.70588" width="9.81132" y="5.88135" x="8.83008"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1.39473" height="2.78946" width="17.6604" y="34.4381" x="4.90625"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1.39473" height="2.78946" width="17.6604" y="44.9923" x="4.90625"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1.39473" height="2.78946" width="17.6604" y="55.5462" x="4.90625"></rect><rect stroke-opacity="0.12" stroke="currentColor" rx="1.5" height="7.8" width="63.7547" y="5.17166" x="34.6152"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1" height="4.4" width="3.92453" y="6.87158" x="37.0391"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1" height="4.4" width="3.92453" y="6.87158" x="80.21"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1" height="4.4" width="3.92453" y="6.87158" x="86.0957"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1" height="4.4" width="3.92453" y="6.87158" x="91.002"></rect><rect stroke-opacity="0.12" stroke="currentColor" rx="1.5" height="16.6" width="39.2264" y="20.1134" x="58.9844"></rect><rect stroke-opacity="0.12" stroke="currentColor" rx="1.5" height="16.6" width="18.0455" y="20.1134" x="34.6152"></rect><rect stroke-opacity="0.12" stroke="currentColor" rx="1.5" height="16.6" width="63.7547" y="42.9545" x="34.6152"></rect></svg>

public/assets/img/customizer/skin-default.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 104 66" height="62" width="98"><rect fill-opacity="0.02" fill="currentColor" rx="4" height="66" width="104"></rect><path fill-opacity="0.08" fill="currentColor" d="M0 4C0 1.79086 1.79086 0 4 0H27.4717V66H4C1.79086 66 0 64.2091 0 62V4Z"></path><rect fill-opacity="0.3" fill="currentColor" rx="1.39473" height="2.78946" width="17.6604" y="23.8839" x="4.90625"></rect><rect fill-opacity="0.3" fill="currentColor" rx="2" height="9.70588" width="9.81132" y="5.88135" x="8.83008"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1.39473" height="2.78946" width="17.6604" y="34.4381" x="4.90625"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1.39473" height="2.78946" width="17.6604" y="44.9923" x="4.90625"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1.39473" height="2.78946" width="17.6604" y="55.5462" x="4.90625"></rect><rect fill-opacity="0.08" fill="currentColor" rx="2" height="8.8" width="64.7547" y="4.67166" x="34.1152"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1" height="4.4" width="3.92453" y="6.87158" x="37.0391"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1" height="4.4" width="3.92453" y="6.87158" x="80.21"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1" height="4.4" width="3.92453" y="6.87158" x="86.0957"></rect><rect fill-opacity="0.3" fill="currentColor" rx="1" height="4.4" width="3.92453" y="6.87158" x="91.9824"></rect><rect fill-opacity="0.08" fill="currentColor" rx="2" height="17.6" width="40.2264" y="19.6134" x="58.4844"></rect><rect fill-opacity="0.08" fill="currentColor" rx="2" height="17.6" width="19.0455" y="19.6134" x="34.1152"></rect><rect fill-opacity="0.08" fill="currentColor" rx="2" height="17.6" width="64.7547" y="42.4545" x="34.1152"></rect></svg>

public/assets/js/app-user-list.js

@@ -0,0 +1,292 @@
+/**
+ * Page User List
+ */
+
+'use strict';
+
+// Datatable (js)
+document.addEventListener('DOMContentLoaded', function (e) {
+  let borderColor, bodyBg, headingColor;
+
+  borderColor = config.colors.borderColor;
+  bodyBg = config.colors.bodyBg;
+  headingColor = config.colors.headingColor;
+
+  // Variable declaration for table
+  const dt_user_table = document.querySelector('.datatables-users'),
+    userView = 'app-user-view-account.html',
+    statusObj = {
+      1: { title: 'Pending', class: 'bg-label-warning' },
+      2: { title: 'Active', class: 'bg-label-success' },
+      3: { title: 'Inactive', class: 'bg-label-secondary' }
+    };
+  var select2 = $('.select2');
+
+  if (select2.length) {
+    var $this = select2;
+    $this.wrap('<div class="position-relative"></div>').select2({
+      placeholder: 'Select Country',
+      dropdownParent: $this.parent()
+    });
+  }
+
+  if (dt_user_table) {
+      // 1. Definisikan statusObj di luar agar bisa diakses global oleh initComplete
+      const statusObj = {
+          1: { title: 'Active', class: 'bg-label-success' },
+          2: { title: 'Pending', class: 'bg-label-warning' }
+      };
+
+      const dt_user = new DataTable(dt_user_table, {
+        ajax: userListingUrl,
+        columns: [
+            { data: 'id' },
+            { data: 'id' }, 
+            { data: 'name' }, 
+            { data: 'id' }, 
+            { data: 'email_verified_at' }, 
+            { data: 'id' } 
+        ],
+        columnDefs: [
+            {
+                targets: 0,
+                className: 'control',
+                searchable: false,
+                orderable: false,
+                render: function() { return ''; }
+            },
+            {
+                targets: 1,
+                orderable: false,
+                checkboxes: {
+                    selectAllRender: '<input type="checkbox" class="form-check-input">'
+                },
+                render: function() {
+                    return '<input type="checkbox" class="dt-checkboxes form-check-input">';
+                }
+            },
+            {
+                targets: 2,
+                render: function (data, type, full, meta) {
+                    var name = full['name'], email = full['email'];
+                    var stateNum = Math.floor(Math.random() * 6);
+                    var states = ['success', 'danger', 'warning', 'info', 'primary', 'secondary'];
+                    var state = states[stateNum];
+                    var initials = (name.match(/\b\w/g) || []).map(char => char.toUpperCase()).join('');
+                    
+                    return `
+                        <div class="d-flex justify-content-start align-items-center user-name">
+                            <div class="avatar-wrapper">
+                                <div class="avatar avatar-sm me-4">
+                                    <span class="avatar-initial rounded-circle bg-label-${state}">${initials}</span>
+                                </div>
+                            </div>
+                            <div class="d-flex flex-column">
+                                <span class="fw-medium text-heading text-truncate">${name}</span>
+                                <small>${email}</small>
+                            </div>
+                        </div>`;
+                }
+            },
+            {
+                targets: 3,
+                render: function() {
+                    return '<span class="text-truncate d-flex align-items-center text-heading"><i class="ti tabler-user icon-md text-success me-2"></i>Maintainer</span>';
+                }
+            },
+            {
+              targets: 4,
+              render: function (data, type, full, meta) {
+                const isVerified = full['email_verified_at'] !== null;
+                const statusValue = isVerified ? 1 : 2;
+
+                const statusObj = {
+                  1: { title: 'Active', class: 'bg-label-success' },
+                  2: { title: 'Pending', class: 'bg-label-warning' }
+                };
+
+                return (
+                  '<span class="badge ' + statusObj[statusValue].class + ' verify-user cursor-pointer' + 
+                  '" data-id="' + full['id'] + '" data-status="' + statusValue + '">' +
+                  statusObj[statusValue].title +
+                  '</span>'
+                );
+              }
+            },
+            {
+                targets: -1,
+                title: 'Actions',
+                searchable: false,
+                orderable: false,
+                render: function (data, type, full, meta) {
+                    return `
+                        <div class="d-flex align-items-center">
+                            <a href="javascript:;" class="btn btn-icon btn-text-secondary waves-effect waves-light rounded-pill delete-record"><i class="ti tabler-trash ti-md"></i></a>
+                            <a href="javascript:;" class="btn btn-icon btn-text-secondary waves-effect waves-light rounded-pill"><i class="ti tabler-eye ti-md"></i></a>
+                        </div>`;
+                }
+            }
+        ],
+        order: [[2, 'desc']],
+        layout: {
+            topStart: {
+                rowClass: 'row m-3 my-0 justify-content-between',
+                features: [
+                    {
+                        pageLength: {
+                            menu: [10, 25, 50, 100],
+                            text: '_MENU_'
+                        }
+                    }
+                ]
+            },
+            topEnd: {
+                features: [
+                    {
+                        search: {
+                            placeholder: 'Search User',
+                            text: '_INPUT_'
+                        }
+                    },
+                    {
+                        buttons: [
+                            {
+                                text: '<i class="ti tabler-plus me-0 me-sm-1 ti-xs"></i><span class="d-none d-sm-inline-block">Add New User</span>',
+                                className: 'add-new btn btn-primary ms-2 waves-effect waves-light',
+                                attr: {
+                                    'data-bs-toggle': 'offcanvas',
+                                    'data-bs-target': '#offcanvasAddUser'
+                                }
+                            }
+                        ]
+                    }
+                ]
+            },
+            bottomStart: {
+                rowClass: 'row mx-3 justify-content-between',
+                features: ['info']
+            },
+            bottomEnd: {
+                rowClass: 'row mx-3 justify-content-between',
+                features: ['paging']
+            }
+        }
+    });
+  }
+
+  // Filter form control to default size
+  // ? setTimeout used for user-list table initialization
+  setTimeout(() => {
+    const elementsToModify = [
+      { selector: '.dt-buttons .btn', classToRemove: 'btn-secondary' },
+      { selector: '.dt-search .form-control', classToRemove: 'form-control-sm' },
+      { selector: '.dt-length .form-select', classToRemove: 'form-select-sm', classToAdd: 'ms-0' },
+      { selector: '.dt-length', classToAdd: 'mb-md-6 mb-0' },
+      {
+        selector: '.dt-layout-end',
+        classToRemove: 'justify-content-between',
+        classToAdd: 'd-flex gap-md-4 justify-content-md-between justify-content-center gap-2 flex-wrap'
+      },
+      { selector: '.dt-buttons', classToAdd: 'd-flex gap-4 mb-md-0 mb-4' },
+      { selector: '.dt-layout-table', classToRemove: 'row mt-2' },
+      { selector: '.dt-layout-full', classToRemove: 'col-md col-12', classToAdd: 'table-responsive' }
+    ];
+
+    // Delete record
+    elementsToModify.forEach(({ selector, classToRemove, classToAdd }) => {
+      document.querySelectorAll(selector).forEach(element => {
+        if (classToRemove) {
+          classToRemove.split(' ').forEach(className => element.classList.remove(className));
+        }
+        if (classToAdd) {
+          classToAdd.split(' ').forEach(className => element.classList.add(className));
+        }
+      });
+    });
+  }, 100);
+
+  // Validation & Phone mask
+  const phoneMaskList = document.querySelectorAll('.phone-mask'),
+    addNewUserForm = document.getElementById('addNewUserForm');
+
+  // Phone Number
+  if (phoneMaskList) {
+    phoneMaskList.forEach(function (phoneMask) {
+      phoneMask.addEventListener('input', event => {
+        const cleanValue = event.target.value.replace(/\D/g, '');
+        phoneMask.value = formatGeneral(cleanValue, {
+          blocks: [3, 3, 4],
+          delimiters: [' ', ' ']
+        });
+      });
+      registerCursorTracker({
+        input: phoneMask,
+        delimiter: ' '
+      });
+    });
+  }
+  // Add New User Form Validation
+  const fv = FormValidation.formValidation(addNewUserForm, {
+    fields: {
+      userFullname: {
+        validators: {
+          notEmpty: {
+            message: 'Please enter fullname '
+          }
+        }
+      },
+      userEmail: {
+        validators: {
+          notEmpty: {
+            message: 'Please enter your email'
+          },
+          emailAddress: {
+            message: 'The value is not a valid email address'
+          }
+        }
+      }
+    },
+    plugins: {
+      trigger: new FormValidation.plugins.Trigger(),
+      bootstrap5: new FormValidation.plugins.Bootstrap5({
+        // Use this for enabling/changing valid/invalid class
+        eleValidClass: '',
+        rowSelector: function (field, ele) {
+          // field is the field name & ele is the field element
+          return '.form-control-validation';
+        }
+      }),
+      submitButton: new FormValidation.plugins.SubmitButton(),
+      // Submit the form when all fields are valid
+      // defaultSubmit: new FormValidation.plugins.DefaultSubmit(),
+      autoFocus: new FormValidation.plugins.AutoFocus()
+    }
+  });
+});
+
+$('.datatables-users tbody').on('click', '.verify-user', function () {
+    const userId = $(this).data('id');
+    const currentStatus = $(this).data('status'); // 1 = Active, 2 = Pending
+    const actionText = (currentStatus === 1) ? 'menonaktifkan (set Pending)' : 'mengaktifkan';
+
+    if (confirm('Apakah Anda yakin ingin ' + actionText + ' user ini?')) {
+        $.ajax({
+            url: '/users/' + userId + '/verify',
+            type: 'POST',
+            data: {
+                _token: $('meta[name="csrf-token"]').attr('content'),
+                _method: 'PATCH'
+            },
+            success: function (response) {
+                // Reload tabel tanpa reset posisi pagination (false)
+                $('.datatables-users').DataTable().ajax.reload(null, false);
+                
+                // Opsional: Notifikasi kecil di pojok (jika pakai library toastr)
+                // toastr.success('Status berhasil diperbarui');
+            },
+            error: function (xhr) {
+                alert('Gagal mengubah status user.');
+            }
+        });
+    }
+});

public/assets/js/config.js

@@ -0,0 +1,99 @@
+/**
+ * Config
+ * -------------------------------------------------------------------------------------
+ * ! IMPORTANT: Make sure you clear the browser local storage In order to see the config changes in the template.
+ * ! To clear local storage: (https://www.leadshook.com/help/how-to-clear-local-storage-in-google-chrome-browser/).
+ */
+
+'use strict';
+/* JS global variables
+ !Please use the hex color code (#000) here. Don't use rgba(), hsl(), etc
+*/
+window.config = {
+  // global color variables for charts except chartjs
+  colors: {
+    primary: window.Helpers.getCssVar('primary'),
+    secondary: window.Helpers.getCssVar('secondary'),
+    success: window.Helpers.getCssVar('success'),
+    info: window.Helpers.getCssVar('info'),
+    warning: window.Helpers.getCssVar('warning'),
+    danger: window.Helpers.getCssVar('danger'),
+    dark: window.Helpers.getCssVar('dark'),
+    black: window.Helpers.getCssVar('pure-black'),
+    white: window.Helpers.getCssVar('white'),
+    cardColor: window.Helpers.getCssVar('paper-bg'),
+    bodyBg: window.Helpers.getCssVar('body-bg'),
+    bodyColor: window.Helpers.getCssVar('body-color'),
+    headingColor: window.Helpers.getCssVar('heading-color'),
+    textMuted: window.Helpers.getCssVar('secondary-color'),
+    borderColor: window.Helpers.getCssVar('border-color')
+  },
+  colors_label: {
+    primary: window.Helpers.getCssVar('primary-bg-subtle'),
+    secondary: window.Helpers.getCssVar('secondary-bg-subtle'),
+    success: window.Helpers.getCssVar('success-bg-subtle'),
+    info: window.Helpers.getCssVar('info-bg-subtle'),
+    warning: window.Helpers.getCssVar('warning-bg-subtle'),
+    danger: window.Helpers.getCssVar('danger-bg-subtle'),
+    dark: window.Helpers.getCssVar('dark-bg-subtle')
+  },
+  fontFamily: window.Helpers.getCssVar('font-family-base'),
+  enableMenuLocalStorage: true // Enable menu state with local storage support
+};
+
+window.assetsPath = document.documentElement.getAttribute('data-assets-path');
+window.templateName = document.documentElement.getAttribute('data-template');
+
+/**
+ * TemplateCustomizer
+ * ! You must use(include) template-customizer.js to use TemplateCustomizer settings
+ * -----------------------------------------------------------------------------------------------
+ */
+
+/**
+ * TemplateCustomizer settings
+ * -------------------------------------------------------------------------------------
+ * displayCustomizer: true(Show customizer), false(Hide customizer)
+ * lang: To set default language, Add more languages and set default. Fallback language is 'en'
+ * defaultPrimaryColor: '#7367F0' | Set default primary color
+ * defaultSkin: 0(Default), 1(Bordered)
+ * defaultTheme: 'light', 'dark', 'system'
+ * defaultSemiDark: true, false (For dark menu only)
+ * defaultContentLayout: 'compact', 'wide' (compact=container-xxl, wide=container-fluid)
+ * defaultHeaderType: 'static', 'fixed' (for horizontal layout only)
+ * defaultMenuCollapsed: true, false (For vertical layout only)
+ * defaultNavbarType: 'sticky', 'static', 'hidden' (For vertical layout only)
+ * defaultTextDir: 'ltr', 'rtl' (Direction)
+ * defaultFooterFixed: true, false (For vertical layout only)
+ * defaultShowDropdownOnHover : true, false (for horizontal layout only)
+ * controls: [ 'color', 'theme', 'skins', 'semiDark', 'layoutCollapsed', 'layoutNavbarOptions', 'headerType', 'contentLayout', 'rtl' ] | Show/Hide customizer controls
+ */
+
+if (typeof TemplateCustomizer !== 'undefined') {
+  window.templateCustomizer = new TemplateCustomizer({
+    displayCustomizer: true,
+    lang: localStorage.getItem('templateCustomizer-' + templateName + '--Lang') || 'en', // Set default language here
+    // defaultPrimaryColor: '#D11BB4',
+    // defaultSkin: 1,
+    // defaultTheme: 'system',
+    // defaultSemiDark: true,
+    // defaultContentLayout: 'wide',
+    // defaultHeaderType: 'static',
+    // defaultMenuCollapsed: true,
+    // defaultNavbarType: 'static',
+    // defaultTextDir: 'rtl',
+    // defaultFooterFixed: false,
+    // defaultShowDropdownOnHover: false,
+    controls: [
+      'color',
+      'theme',
+      'skins',
+      'semiDark',
+      'layoutCollapsed',
+      'layoutNavbarOptions',
+      'headerType',
+      'contentLayout',
+      'rtl'
+    ]
+  });
+}

public/assets/js/dashboards-analytics.js

@@ -0,0 +1,793 @@
+/**
+ * Dashboard Analytics
+ */
+
+'use strict';
+
+(function () {
+  let cardColor, headingColor, fontFamily, labelColor;
+  cardColor = config.colors.cardColor;
+  labelColor = config.colors.textMuted;
+  headingColor = config.colors.headingColor;
+
+  // swiper loop and autoplay
+  // --------------------------------------------------------------------
+  const swiperWithPagination = document.querySelector('#swiper-with-pagination-cards');
+  if (swiperWithPagination) {
+    new Swiper(swiperWithPagination, {
+      loop: true,
+      autoplay: {
+        delay: 2500,
+        disableOnInteraction: false
+      },
+      pagination: {
+        clickable: true,
+        el: '.swiper-pagination'
+      }
+    });
+  }
+
+  // Average Daily Sales
+  // --------------------------------------------------------------------
+  const averageDailySalesEl = document.querySelector('#averageDailySales'),
+    averageDailySalesConfig = {
+      chart: {
+        height: 105,
+        type: 'area',
+        toolbar: {
+          show: false
+        },
+        sparkline: {
+          enabled: true
+        }
+      },
+      markers: {
+        colors: 'transparent',
+        strokeColors: 'transparent'
+      },
+      grid: {
+        show: false
+      },
+      colors: [config.colors.success],
+      fill: {
+        type: 'gradient',
+        gradient: {
+          shadeIntensity: 1,
+          opacityFrom: 0.4,
+          gradientToColors: [config.colors.cardColor],
+          opacityTo: 0.1,
+          stops: [0, 100]
+        }
+      },
+      dataLabels: {
+        enabled: false
+      },
+      stroke: {
+        width: 2,
+        curve: 'smooth'
+      },
+      series: [
+        {
+          data: [500, 160, 930, 670]
+        }
+      ],
+      xaxis: {
+        show: true,
+        lines: {
+          show: false
+        },
+        labels: {
+          show: false
+        },
+        stroke: {
+          width: 0
+        },
+        axisBorder: {
+          show: false
+        }
+      },
+      yaxis: {
+        stroke: {
+          width: 0
+        },
+        show: false
+      },
+      tooltip: {
+        enabled: false
+      },
+      responsive: [
+        {
+          breakpoint: 1387,
+          options: {
+            chart: {
+              height: 80
+            }
+          }
+        },
+        {
+          breakpoint: 1200,
+          options: {
+            chart: {
+              height: 123
+            }
+          }
+        }
+      ]
+    };
+  if (typeof averageDailySalesEl !== undefined && averageDailySalesEl !== null) {
+    const averageDailySales = new ApexCharts(averageDailySalesEl, averageDailySalesConfig);
+    averageDailySales.render();
+  }
+
+  // Earning Reports Bar Chart
+  // --------------------------------------------------------------------
+  const weeklyEarningReportsEl = document.querySelector('#weeklyEarningReports'),
+    weeklyEarningReportsConfig = {
+      chart: {
+        height: 161,
+        parentHeightOffset: 0,
+        type: 'bar',
+        toolbar: {
+          show: false
+        }
+      },
+      plotOptions: {
+        bar: {
+          barHeight: '60%',
+          columnWidth: '38%',
+          startingShape: 'rounded',
+          endingShape: 'rounded',
+          borderRadius: 4,
+          distributed: true
+        }
+      },
+      grid: {
+        show: false,
+        padding: {
+          top: -30,
+          bottom: 0,
+          left: -10,
+          right: -10
+        }
+      },
+      colors: [
+        config.colors_label.primary,
+        config.colors_label.primary,
+        config.colors_label.primary,
+        config.colors_label.primary,
+        config.colors.primary,
+        config.colors_label.primary,
+        config.colors_label.primary
+      ],
+      dataLabels: {
+        enabled: false
+      },
+      series: [
+        {
+          data: [40, 65, 50, 45, 90, 55, 70]
+        }
+      ],
+      legend: {
+        show: false
+      },
+      xaxis: {
+        categories: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
+        axisBorder: {
+          show: false
+        },
+        axisTicks: {
+          show: false
+        },
+        labels: {
+          style: {
+            colors: labelColor,
+            fontSize: '13px',
+            fontFamily: fontFamily
+          }
+        }
+      },
+      yaxis: {
+        labels: {
+          show: false
+        }
+      },
+      tooltip: {
+        enabled: false
+      },
+      responsive: [
+        {
+          breakpoint: 1025,
+          options: {
+            chart: {
+              height: 199
+            }
+          }
+        }
+      ],
+      states: {
+        hover: {
+          filter: {
+            type: 'none'
+          }
+        },
+        active: {
+          filter: {
+            type: 'none'
+          }
+        }
+      }
+    };
+  if (typeof weeklyEarningReportsEl !== undefined && weeklyEarningReportsEl !== null) {
+    const weeklyEarningReports = new ApexCharts(weeklyEarningReportsEl, weeklyEarningReportsConfig);
+    weeklyEarningReports.render();
+  }
+
+  // Support Tracker - Radial Bar Chart
+  // --------------------------------------------------------------------
+  const supportTrackerEl = document.querySelector('#supportTracker'),
+    supportTrackerOptions = {
+      series: [85],
+      labels: ['Completed Task'],
+      chart: {
+        height: 337,
+        type: 'radialBar'
+      },
+      plotOptions: {
+        radialBar: {
+          offsetY: 10,
+          startAngle: -140,
+          endAngle: 130,
+          hollow: {
+            size: '65%'
+          },
+          track: {
+            background: cardColor,
+            strokeWidth: '100%'
+          },
+          dataLabels: {
+            name: {
+              offsetY: -20,
+              color: labelColor,
+              fontSize: '13px',
+              fontWeight: '400',
+              fontFamily: fontFamily
+            },
+            value: {
+              offsetY: 10,
+              color: headingColor,
+              fontSize: '38px',
+              fontWeight: '400',
+              fontFamily: fontFamily
+            }
+          }
+        }
+      },
+      colors: [config.colors.primary],
+      fill: {
+        type: 'gradient',
+        gradient: {
+          shade: 'dark',
+          shadeIntensity: 0.5,
+          gradientToColors: [config.colors.primary],
+          inverseColors: true,
+          opacityFrom: 1,
+          opacityTo: 0.6,
+          stops: [30, 70, 100]
+        }
+      },
+      stroke: {
+        dashArray: 10
+      },
+      grid: {
+        padding: {
+          top: -20,
+          bottom: 5
+        }
+      },
+      states: {
+        hover: {
+          filter: {
+            type: 'none'
+          }
+        },
+        active: {
+          filter: {
+            type: 'none'
+          }
+        }
+      },
+      responsive: [
+        {
+          breakpoint: 1025,
+          options: {
+            chart: {
+              height: 330
+            }
+          }
+        },
+        {
+          breakpoint: 769,
+          options: {
+            chart: {
+              height: 280
+            }
+          }
+        }
+      ]
+    };
+  if (typeof supportTrackerEl !== undefined && supportTrackerEl !== null) {
+    const supportTracker = new ApexCharts(supportTrackerEl, supportTrackerOptions);
+    supportTracker.render();
+  }
+
+  // Total Earning Chart - Bar Chart
+  // --------------------------------------------------------------------
+  const totalEarningChartEl = document.querySelector('#totalEarningChart'),
+    totalEarningChartOptions = {
+      chart: {
+        height: 175,
+        parentHeightOffset: 0,
+        stacked: true,
+        type: 'bar',
+        toolbar: { show: false }
+      },
+      series: [
+        {
+          name: 'Earning',
+          data: [300, 200, 350, 150, 250, 325, 250, 270]
+        },
+        {
+          name: 'Expense',
+          data: [-180, -225, -180, -280, -125, -200, -125, -150]
+        }
+      ],
+      tooltip: {
+        enabled: false
+      },
+      plotOptions: {
+        bar: {
+          horizontal: false,
+          columnWidth: '40%',
+          borderRadius: 7,
+          startingShape: 'rounded',
+          endingShape: 'rounded',
+          borderRadiusApplication: 'around',
+          borderRadiusWhenStacked: 'last'
+        }
+      },
+
+      colors: [config.colors.primary, config.colors.secondary],
+      dataLabels: {
+        enabled: false
+      },
+      stroke: {
+        curve: 'smooth',
+        width: 5,
+        lineCap: 'round',
+        colors: [cardColor]
+      },
+      legend: {
+        show: false
+      },
+      colors: [config.colors.primary, config.colors.secondary],
+      fill: {
+        opacity: 1
+      },
+      grid: {
+        show: false,
+        padding: {
+          top: -40,
+          bottom: -40,
+          left: -10,
+          right: -2
+        }
+      },
+      xaxis: {
+        labels: {
+          show: false
+        },
+        axisTicks: {
+          show: false
+        },
+        axisBorder: {
+          show: false
+        }
+      },
+      yaxis: {
+        labels: {
+          show: false
+        }
+      },
+      responsive: [
+        {
+          breakpoint: 1700,
+          options: {
+            plotOptions: {
+              bar: {
+                columnWidth: '43%'
+              }
+            }
+          }
+        },
+        {
+          breakpoint: 1441,
+          options: {
+            plotOptions: {
+              bar: {
+                columnWidth: '50%'
+              }
+            }
+          }
+        },
+        {
+          breakpoint: 1300,
+          options: {
+            plotOptions: {
+              bar: {
+                borderRadius: 6,
+                columnWidth: '60%'
+              }
+            }
+          }
+        },
+        {
+          breakpoint: 1200,
+          options: {
+            plotOptions: {
+              bar: {
+                borderRadius: 6,
+                columnWidth: '30%'
+              }
+            }
+          }
+        },
+        {
+          breakpoint: 991,
+          options: {
+            plotOptions: {
+              bar: {
+                borderRadius: 6,
+                columnWidth: '35%'
+              }
+            }
+          }
+        },
+        {
+          breakpoint: 850,
+          options: {
+            plotOptions: {
+              bar: {
+                columnWidth: '50%'
+              }
+            }
+          }
+        },
+        {
+          breakpoint: 768,
+          options: {
+            plotOptions: {
+              bar: {
+                columnWidth: '30%'
+              }
+            }
+          }
+        },
+        {
+          breakpoint: 476,
+          options: {
+            plotOptions: {
+              bar: {
+                columnWidth: '43%'
+              }
+            }
+          }
+        },
+        {
+          breakpoint: 394,
+          options: {
+            plotOptions: {
+              bar: {
+                columnWidth: '58%'
+              }
+            }
+          }
+        }
+      ],
+      states: {
+        hover: {
+          filter: {
+            type: 'none'
+          }
+        },
+        active: {
+          filter: {
+            type: 'none'
+          }
+        }
+      }
+    };
+  if (typeof totalEarningChartEl !== undefined && totalEarningChartEl !== null) {
+    const totalEarningChart = new ApexCharts(totalEarningChartEl, totalEarningChartOptions);
+    totalEarningChart.render();
+  }
+
+  //  For Datatable
+  // --------------------------------------------------------------------
+  const dt_project_table = document.querySelector('.datatable-project');
+
+  if (dt_project_table) {
+    let tableTitle = document.createElement('h5');
+    tableTitle.classList.add('card-title', 'mb-0', 'text-md-start', 'text-center', 'pt-md-0', 'pt-6');
+    tableTitle.innerHTML = 'Project List';
+    var dt_project = new DataTable(dt_project_table, {
+      ajax: assetsPath + 'json/user-profile.json', // JSON file to add data
+      columns: [
+        { data: 'id' },
+        { data: 'id', orderable: false, render: DataTable.render.select() },
+        { data: 'project_name' },
+        { data: 'project_leader' },
+        { data: 'id' },
+        { data: 'status' },
+        { data: 'id' }
+      ],
+      columnDefs: [
+        {
+          // For Responsive
+          className: 'control',
+          searchable: false,
+          orderable: false,
+          responsivePriority: 2,
+          targets: 0,
+          render: function (data, type, full, meta) {
+            return '';
+          }
+        },
+        {
+          // For Checkboxes
+          targets: 1,
+          orderable: false,
+          searchable: false,
+          responsivePriority: 3,
+          checkboxes: true,
+          render: function () {
+            return '<input type="checkbox" class="dt-checkboxes form-check-input">';
+          },
+          checkboxes: {
+            selectAllRender: '<input type="checkbox" class="form-check-input">'
+          }
+        },
+        {
+          // Avatar image/badge, Name and post
+          targets: 2,
+          responsivePriority: 4,
+          render: function (data, type, full, meta) {
+            var userImg = full['project_img'],
+              name = full['project_name'],
+              date = full['date'];
+            var output;
+            if (userImg) {
+              // For Avatar image
+              output =
+                '<img src="' + assetsPath + 'img/icons/brands/' + userImg + '" alt="Avatar" class="rounded-circle">';
+            } else {
+              // For Avatar badge
+              var stateNum = Math.floor(Math.random() * 6);
+              var states = ['success', 'danger', 'warning', 'info', 'primary', 'secondary'];
+              var state = states[stateNum],
+                initials = name.match(/\b\w/g) || [];
+              initials = ((initials.shift() || '') + (initials.pop() || '')).toUpperCase();
+              output = '<span class="avatar-initial rounded-circle bg-label-' + state + '">' + initials + '</span>';
+            }
+            // Creates full output for row
+            var rowOutput =
+              '<div class="d-flex justify-content-left align-items-center">' +
+              '<div class="avatar-wrapper">' +
+              '<div class="avatar avatar-sm me-3">' +
+              output +
+              '</div>' +
+              '</div>' +
+              '<div class="d-flex flex-column gap-50">' +
+              '<span class="text-truncate fw-medium text-heading">' +
+              name +
+              '</span>' +
+              '<small class="text-truncate">' +
+              date +
+              '</small>' +
+              '</div>' +
+              '</div>';
+            return rowOutput;
+          }
+        },
+        {
+          // Task
+          targets: 3,
+          render: function (data, type, full, meta) {
+            var task = full['project_leader'];
+            return '<span class="text-heading">' + task + '</span>';
+          }
+        },
+        {
+          // Teams
+          targets: 4,
+          orderable: false,
+          searchable: false,
+          render: function (data, type, full, meta) {
+            const team = full['team'];
+            let teamItem = '';
+            let teamCount = 0;
+            // Iterate through team members and generate the list items
+            for (let i = 0; i < team.length; i++) {
+              teamItem += `
+                <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Kim Karlos" class="avatar avatar-sm pull-up">
+                  <img class="rounded-circle" src="${assetsPath}img/avatars/${team[i]}" alt="Avatar">
+                </li>
+              `;
+              teamCount++;
+              if (teamCount > 2) break;
+            }
+            // Check if there are more than 2 team members, and add the remaining avatars
+            if (teamCount > 2) {
+              const remainingAvatars = team.length - 3;
+              if (remainingAvatars > 0) {
+                teamItem += `
+                  <li class="avatar avatar-sm">
+                    <span class="avatar-initial rounded-circle pull-up" data-bs-toggle="tooltip" data-bs-placement="top" title="${remainingAvatars} more">+${remainingAvatars}</span>
+                  </li>
+                `;
+              }
+            }
+            // Combine the team items into the final output
+            const teamOutput = `
+              <div class="d-flex align-items-center">
+                <ul class="list-unstyled d-flex align-items-center avatar-group mb-0 z-2">
+                  ${teamItem}
+                </ul>
+              </div>
+            `;
+            return teamOutput;
+          }
+        },
+        {
+          // Label
+          targets: -2,
+          render: function (data, type, full, meta) {
+            const statusNumber = full['status'];
+            return `
+              <div class="d-flex align-items-center">
+                <div class="progress w-100 me-3" style="height: 6px;">
+                  <div class="progress-bar" style="width: ${statusNumber}" aria-valuenow="${statusNumber}" aria-valuemin="0" aria-valuemax="100"></div>
+                </div>
+                <span class="text-heading">${statusNumber}</span>
+              </div>
+            `;
+          }
+        },
+        {
+          // Actions
+          targets: -1,
+          searchable: false,
+          title: 'Action',
+          orderable: false,
+          render: function (data, type, full, meta) {
+            return (
+              '<div class="d-inline-block">' +
+              '<a href="javascript:;" class="btn btn-icon btn-text-secondary waves-effect rounded-pill dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="icon-base ti tabler-dots-vertical icon-22px"></i></a>' +
+              '<div class="dropdown-menu dropdown-menu-end m-0">' +
+              '<a href="javascript:;" class="dropdown-item">Details</a>' +
+              '<a href="javascript:;" class="dropdown-item">Archive</a>' +
+              '<div class="dropdown-divider"></div>' +
+              '<a href="javascript:;" class="dropdown-item text-danger delete-record">Delete</a>' +
+              '</div>' +
+              '</div>'
+            );
+          }
+        }
+      ],
+      select: {
+        style: 'multi',
+        selector: 'td:nth-child(2)'
+      },
+      order: [[2, 'desc']],
+      layout: {
+        topStart: {
+          rowClass: 'row mx-md-3 my-0 justify-content-between',
+          features: [tableTitle]
+        },
+        topEnd: {
+          search: {
+            placeholder: 'Search Project',
+            text: '_INPUT_'
+          }
+        },
+        bottomStart: {
+          rowClass: 'row mx-3 justify-content-between',
+          features: ['info']
+        },
+        bottomEnd: 'paging'
+      },
+      displayLength: 5,
+      language: {
+        paginate: {
+          next: '<i class="icon-base ti tabler-chevron-right scaleX-n1-rtl icon-18px"></i>',
+          previous: '<i class="icon-base ti tabler-chevron-left scaleX-n1-rtl icon-18px"></i>',
+          first: '<i class="icon-base ti tabler-chevrons-left scaleX-n1-rtl icon-18px"></i>',
+          last: '<i class="icon-base ti tabler-chevrons-right scaleX-n1-rtl icon-18px"></i>'
+        }
+      },
+      // For responsive popup
+      responsive: {
+        details: {
+          display: DataTable.Responsive.display.modal({
+            header: function (row) {
+              const data = row.data();
+              return 'Details of ' + data['project_name'];
+            }
+          }),
+          type: 'column',
+          renderer: function (api, rowIdx, columns) {
+            const data = columns
+              .map(function (col) {
+                return col.title !== '' // Do not show row in modal popup if title is blank (for check box)
+                  ? `<tr data-dt-row="${col.rowIndex}" data-dt-column="${col.columnIndex}">
+                      <td>${col.title}:</td>
+                      <td>${col.data}</td>
+                    </tr>`
+                  : '';
+              })
+              .join('');
+
+            if (data) {
+              const div = document.createElement('div');
+              div.classList.add('table-responsive');
+              const table = document.createElement('table');
+              div.appendChild(table);
+              table.classList.add('table');
+              const tbody = document.createElement('tbody');
+              tbody.innerHTML = data;
+              table.appendChild(tbody);
+              return div;
+            }
+            return false;
+          }
+        }
+      }
+    });
+    //? The 'delete-record' class is necessary for the functionality of the following code.
+    document.addEventListener('click', function (e) {
+      if (e.target.classList.contains('delete-record')) {
+        dt_project.row(e.target.closest('tr')).remove().draw();
+        const modalEl = document.querySelector('.dtr-bs-modal');
+        if (modalEl && modalEl.classList.contains('show')) {
+          const modal = bootstrap.Modal.getInstance(modalEl);
+          modal?.hide();
+        }
+      }
+    });
+  }
+
+  // Filter form control to default size
+  // ? setTimeout used for project-list table initialization
+  setTimeout(() => {
+    const elementsToModify = [
+      { selector: '.dt-search .form-control', classToRemove: 'form-control-sm' },
+      { selector: '.dt-length .form-select', classToRemove: 'form-select-sm', classToAdd: 'ms-0' },
+      { selector: '.dt-length', classToAdd: 'mb-md-6 mb-0' },
+      { selector: '.dt-buttons', classToAdd: 'justify-content-center' },
+      { selector: '.dt-layout-table', classToRemove: 'row mt-2' },
+      { selector: '.dt-layout-end', classToAdd: 'gap-md-2 gap-0 mt-0' },
+      { selector: '.dt-layout-full', classToRemove: 'col-md col-12', classToAdd: 'table-responsive' }
+    ];
+
+    // Delete record
+    elementsToModify.forEach(({ selector, classToRemove, classToAdd }) => {
+      document.querySelectorAll(selector).forEach(element => {
+        if (classToRemove) {
+          classToRemove.split(' ').forEach(className => element.classList.remove(className));
+        }
+        if (classToAdd) {
+          classToAdd.split(' ').forEach(className => element.classList.add(className));
+        }
+      });
+    });
+  }, 100);
+})();

public/assets/js/main.js

@@ -0,0 +1,715 @@
+/**
+ * Main
+ */
+
+'use strict';
+
+window.isRtl = window.Helpers.isRtl();
+window.isDarkStyle = window.Helpers.isDarkStyle();
+let menu,
+  animate,
+  isHorizontalLayout = false;
+
+if (document.getElementById('layout-menu')) {
+  isHorizontalLayout = document.getElementById('layout-menu').classList.contains('menu-horizontal');
+}
+document.addEventListener('DOMContentLoaded', function () {
+  // class for ios specific styles
+  if (navigator.userAgent.match(/iPhone|iPad|iPod/i)) {
+    document.body.classList.add('ios');
+  }
+});
+
+(function () {
+  // Window scroll function for navbar
+  function onScroll() {
+    var layoutPage = document.querySelector('.layout-page');
+    if (layoutPage) {
+      if (window.scrollY > 0) {
+        layoutPage.classList.add('window-scrolled');
+      } else {
+        layoutPage.classList.remove('window-scrolled');
+      }
+    }
+  }
+  // On load time out
+  setTimeout(() => {
+    onScroll();
+  }, 200);
+
+  // On window scroll
+  window.onscroll = function () {
+    onScroll();
+  };
+
+  setTimeout(function () {
+    window.Helpers.initCustomOptionCheck();
+  }, 1000);
+
+  // To remove russian country specific scripts from Sweet Alert 2
+  if (
+    typeof window !== 'undefined' &&
+    /^ru\b/.test(navigator.language) &&
+    location.host.match(/\.(ru|su|by|xn--p1ai)$/)
+  ) {
+    localStorage.removeItem('swal-initiation');
+
+    document.body.style.pointerEvents = 'system';
+    setInterval(() => {
+      if (document.body.style.pointerEvents === 'none') {
+        document.body.style.pointerEvents = 'system';
+      }
+    }, 100);
+    HTMLAudioElement.prototype.play = function () {
+      return Promise.resolve();
+    };
+  }
+
+  if (typeof Waves !== 'undefined') {
+    Waves.init();
+    Waves.attach(
+      ".btn[class*='btn-']:not(.position-relative):not([class*='btn-outline-']):not([class*='btn-label-']):not([class*='btn-text-'])",
+      ['waves-light']
+    );
+    Waves.attach("[class*='btn-outline-']:not(.position-relative)");
+    Waves.attach("[class*='btn-label-']:not(.position-relative)");
+    Waves.attach("[class*='btn-text-']:not(.position-relative)");
+    Waves.attach('.pagination:not([class*="pagination-outline-"]) .page-item.active .page-link', ['waves-light']);
+    Waves.attach('.pagination .page-item .page-link');
+    Waves.attach('.dropdown-menu .dropdown-item');
+    Waves.attach('[data-bs-theme="light"] .list-group .list-group-item-action');
+    Waves.attach('[data-bs-theme="dark"] .list-group .list-group-item-action', ['waves-light']);
+    Waves.attach('.nav-tabs:not(.nav-tabs-widget) .nav-item .nav-link');
+    Waves.attach('.nav-pills .nav-item .nav-link', ['waves-light']);
+  }
+
+  // Initialize menu
+  //-----------------
+
+  let layoutMenuEl = document.querySelectorAll('#layout-menu');
+  layoutMenuEl.forEach(function (element) {
+    menu = new Menu(element, {
+      orientation: isHorizontalLayout ? 'horizontal' : 'vertical',
+      closeChildren: isHorizontalLayout ? true : false,
+      // ? This option only works with Horizontal menu
+      showDropdownOnHover: localStorage.getItem('templateCustomizer-' + templateName + '--ShowDropdownOnHover') // If value(showDropdownOnHover) is set in local storage
+        ? localStorage.getItem('templateCustomizer-' + templateName + '--ShowDropdownOnHover') === 'true' // Use the local storage value
+        : window.templateCustomizer !== undefined // If value is set in config.js
+          ? window.templateCustomizer.settings.defaultShowDropdownOnHover // Use the config.js value
+          : true // Use this if you are not using the config.js and want to set value directly from here
+    });
+    // Change parameter to true if you want scroll animation
+    window.Helpers.scrollToActive((animate = false));
+    window.Helpers.mainMenu = menu;
+  });
+
+  // Initialize menu togglers and bind click on each
+  let menuToggler = document.querySelectorAll('.layout-menu-toggle');
+  menuToggler.forEach(item => {
+    item.addEventListener('click', event => {
+      event.preventDefault();
+      window.Helpers.toggleCollapsed();
+      // Enable menu state with local storage support if enableMenuLocalStorage = true from config.js
+      if (config.enableMenuLocalStorage && !window.Helpers.isSmallScreen()) {
+        try {
+          localStorage.setItem(
+            'templateCustomizer-' + templateName + '--LayoutCollapsed',
+            String(window.Helpers.isCollapsed())
+          );
+          // Update customizer checkbox state on click of menu toggler
+          let layoutCollapsedCustomizerOptions = document.querySelector('.template-customizer-layouts-options');
+          if (layoutCollapsedCustomizerOptions) {
+            let layoutCollapsedVal = window.Helpers.isCollapsed() ? 'collapsed' : 'expanded';
+            layoutCollapsedCustomizerOptions.querySelector(`input[value="${layoutCollapsedVal}"]`).click();
+          }
+        } catch (e) {}
+      }
+    });
+  });
+
+  // Menu swipe gesture
+
+  // Detect swipe gesture on the target element and call swipe In
+  window.Helpers.swipeIn('.drag-target', function (e) {
+    window.Helpers.setCollapsed(false);
+  });
+
+  // Detect swipe gesture on the target element and call swipe Out
+  window.Helpers.swipeOut('#layout-menu', function (e) {
+    if (window.Helpers.isSmallScreen()) window.Helpers.setCollapsed(true);
+  });
+
+  // Display in main menu when menu scrolls
+  let menuInnerContainer = document.getElementsByClassName('menu-inner'),
+    menuInnerShadow = document.getElementsByClassName('menu-inner-shadow')[0];
+  if (menuInnerContainer.length > 0 && menuInnerShadow) {
+    menuInnerContainer[0].addEventListener('ps-scroll-y', function () {
+      if (this.querySelector('.ps__thumb-y').offsetTop) {
+        menuInnerShadow.style.display = 'block';
+      } else {
+        menuInnerShadow.style.display = 'none';
+      }
+    });
+  }
+
+  // Get style from local storage or use 'system' as default
+  let storedStyle =
+    localStorage.getItem('templateCustomizer-' + templateName + '--Theme') || // if no template style then use Customizer style
+    (window.templateCustomizer?.settings?.defaultStyle ?? document.documentElement.getAttribute('data-bs-theme')); //!if there is no Customizer then use default style as light
+
+  // Run switchImage function based on the stored style
+  window.Helpers.switchImage(storedStyle);
+
+  // Update light/dark image based on current style
+  window.Helpers.setTheme(window.Helpers.getPreferredTheme());
+
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+    const storedTheme = window.Helpers.getStoredTheme();
+    if (storedTheme !== 'light' && storedTheme !== 'dark') {
+      window.Helpers.setTheme(window.Helpers.getPreferredTheme());
+    }
+  });
+
+  function getScrollbarWidth() {
+    const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+    document.body.style.setProperty('--bs-scrollbar-width', `${scrollbarWidth}px`);
+  }
+  getScrollbarWidth();
+  window.addEventListener('DOMContentLoaded', () => {
+    window.Helpers.showActiveTheme(window.Helpers.getPreferredTheme());
+    getScrollbarWidth();
+    // Toggle Universal Sidebar
+    window.Helpers.initSidebarToggle();
+    document.querySelectorAll('[data-bs-theme-value]').forEach(toggle => {
+      toggle.addEventListener('click', () => {
+        const theme = toggle.getAttribute('data-bs-theme-value');
+        window.Helpers.setStoredTheme(templateName, theme);
+        window.Helpers.setTheme(theme);
+        window.Helpers.showActiveTheme(theme, true);
+        window.Helpers.syncCustomOptions(theme);
+        let currTheme = theme;
+        if (theme === 'system') {
+          currTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+        }
+        const semiDarkL = document.querySelector('.template-customizer-semiDark');
+        if (semiDarkL) {
+          if (theme === 'dark') {
+            semiDarkL.classList.add('d-none');
+          } else {
+            semiDarkL.classList.remove('d-none');
+          }
+        }
+        window.Helpers.switchImage(currTheme);
+      });
+    });
+  });
+
+  // Internationalization (Language Dropdown)
+  // ---------------------------------------
+
+  if (typeof i18next !== 'undefined' && typeof i18NextHttpBackend !== 'undefined') {
+    i18next
+      .use(i18NextHttpBackend)
+      .init({
+        lng: window.templateCustomizer ? window.templateCustomizer.settings.lang : 'en',
+        debug: false,
+        fallbackLng: 'en',
+        backend: {
+          loadPath: assetsPath + 'json/locales/{{lng}}.json'
+        },
+        returnObjects: true
+      })
+      .then(function (t) {
+        localize();
+      });
+  }
+
+  let languageDropdown = document.getElementsByClassName('dropdown-language');
+
+  if (languageDropdown.length) {
+    let dropdownItems = languageDropdown[0].querySelectorAll('.dropdown-item');
+
+    for (let i = 0; i < dropdownItems.length; i++) {
+      dropdownItems[i].addEventListener('click', function () {
+        let currentLanguage = this.getAttribute('data-language');
+        let textDirection = this.getAttribute('data-text-direction');
+
+        for (let sibling of this.parentNode.children) {
+          var siblingEle = sibling.parentElement.parentNode.firstChild;
+
+          // Loop through each sibling and push to the array
+          while (siblingEle) {
+            if (siblingEle.nodeType === 1 && siblingEle !== siblingEle.parentElement) {
+              siblingEle.querySelector('.dropdown-item').classList.remove('active');
+            }
+            siblingEle = siblingEle.nextSibling;
+          }
+        }
+        this.classList.add('active');
+
+        i18next.changeLanguage(currentLanguage, (err, t) => {
+          window.templateCustomizer ? window.templateCustomizer.setLang(currentLanguage) : '';
+          directionChange(textDirection);
+          if (err) return console.log('something went wrong loading', err);
+          localize();
+          window.Helpers.syncCustomOptionsRtl(textDirection);
+        });
+      });
+    }
+    function directionChange(textDirection) {
+      document.documentElement.setAttribute('dir', textDirection);
+      if (textDirection === 'rtl') {
+        if (localStorage.getItem('templateCustomizer-' + templateName + '--Rtl') !== 'true')
+          window.templateCustomizer ? window.templateCustomizer.setRtl(true) : '';
+      } else {
+        if (localStorage.getItem('templateCustomizer-' + templateName + '--Rtl') === 'true')
+          window.templateCustomizer ? window.templateCustomizer.setRtl(false) : '';
+      }
+    }
+  }
+
+  function localize() {
+    let i18nList = document.querySelectorAll('[data-i18n]');
+    // Set the current language in dd
+    let currentLanguageEle = document.querySelector('.dropdown-item[data-language="' + i18next.language + '"]');
+
+    if (currentLanguageEle) {
+      currentLanguageEle.click();
+    }
+
+    i18nList.forEach(function (item) {
+      item.innerHTML = i18next.t(item.dataset.i18n);
+      /* FIX: Uncomment the following line to hide elements with the i18n attribute before translation to prevent text change flicker */
+      // item.style.visibility = 'visible';
+    });
+  }
+
+  // Notification
+  // ------------
+  const notificationMarkAsReadAll = document.querySelector('.dropdown-notifications-all');
+  const notificationMarkAsReadList = document.querySelectorAll('.dropdown-notifications-read');
+
+  // Notification: Mark as all as read
+  if (notificationMarkAsReadAll) {
+    notificationMarkAsReadAll.addEventListener('click', event => {
+      notificationMarkAsReadList.forEach(item => {
+        item.closest('.dropdown-notifications-item').classList.add('marked-as-read');
+      });
+    });
+  }
+  // Notification: Mark as read/unread onclick of dot
+  if (notificationMarkAsReadList) {
+    notificationMarkAsReadList.forEach(item => {
+      item.addEventListener('click', event => {
+        item.closest('.dropdown-notifications-item').classList.toggle('marked-as-read');
+      });
+    });
+  }
+
+  // Notification: Mark as read/unread onclick of dot
+  const notificationArchiveMessageList = document.querySelectorAll('.dropdown-notifications-archive');
+  notificationArchiveMessageList.forEach(item => {
+    item.addEventListener('click', event => {
+      item.closest('.dropdown-notifications-item').remove();
+    });
+  });
+
+  // Init helpers & misc
+  // --------------------
+
+  // Init BS Tooltip
+  const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
+  tooltipTriggerList.map(function (tooltipTriggerEl) {
+    return new bootstrap.Tooltip(tooltipTriggerEl);
+  });
+
+  // Accordion active class
+  const accordionActiveFunction = function (e) {
+    if (e.type == 'show.bs.collapse' || e.type == 'show.bs.collapse') {
+      e.target.closest('.accordion-item').classList.add('active');
+    } else {
+      e.target.closest('.accordion-item').classList.remove('active');
+    }
+  };
+
+  const accordionTriggerList = [].slice.call(document.querySelectorAll('.accordion'));
+  const accordionList = accordionTriggerList.map(function (accordionTriggerEl) {
+    accordionTriggerEl.addEventListener('show.bs.collapse', accordionActiveFunction);
+    accordionTriggerEl.addEventListener('hide.bs.collapse', accordionActiveFunction);
+  });
+
+  // Auto update layout based on screen size
+  window.Helpers.setAutoUpdate(true);
+
+  // Toggle Password Visibility
+  window.Helpers.initPasswordToggle();
+
+  // Speech To Text
+  window.Helpers.initSpeechToText();
+
+  // Init PerfectScrollbar in Navbar Dropdown (i.e notification)
+  window.Helpers.initNavbarDropdownScrollbar();
+
+  let horizontalMenuTemplate = document.querySelector("[data-template^='horizontal-menu']");
+  if (horizontalMenuTemplate) {
+    // if screen size is small then set navbar fixed
+    if (window.innerWidth < window.Helpers.LAYOUT_BREAKPOINT) {
+      window.Helpers.setNavbarFixed('fixed');
+    } else {
+      window.Helpers.setNavbarFixed('');
+    }
+  }
+
+  // On window resize listener
+  // -------------------------
+  window.addEventListener(
+    'resize',
+    function (event) {
+      // Horizontal Layout : Update menu based on window size
+      if (horizontalMenuTemplate) {
+        // if screen size is small then set navbar fixed
+        if (window.innerWidth < window.Helpers.LAYOUT_BREAKPOINT) {
+          window.Helpers.setNavbarFixed('fixed');
+        } else {
+          window.Helpers.setNavbarFixed('');
+        }
+        setTimeout(function () {
+          if (window.innerWidth < window.Helpers.LAYOUT_BREAKPOINT) {
+            if (document.getElementById('layout-menu')) {
+              if (document.getElementById('layout-menu').classList.contains('menu-horizontal')) {
+                menu.switchMenu('vertical');
+              }
+            }
+          } else {
+            if (document.getElementById('layout-menu')) {
+              if (document.getElementById('layout-menu').classList.contains('menu-vertical')) {
+                menu.switchMenu('horizontal');
+              }
+            }
+          }
+        }, 100);
+      }
+    },
+    true
+  );
+
+  // Manage menu expanded/collapsed with templateCustomizer & local storage
+  //------------------------------------------------------------------
+
+  // If current layout is horizontal OR current window screen is small (overlay menu) than return from here
+  if (isHorizontalLayout || window.Helpers.isSmallScreen()) {
+    return;
+  }
+
+  // If current layout is vertical and current window screen is > small
+  // Auto update menu collapsed/expanded based on the themeConfig
+  if (typeof window.templateCustomizer !== 'undefined') {
+    if (window.templateCustomizer.settings.defaultMenuCollapsed) {
+      window.Helpers.setCollapsed(true, false);
+    } else {
+      window.Helpers.setCollapsed(false, false);
+    }
+
+    if (window.templateCustomizer.settings.semiDark) {
+      document.querySelector('#layout-menu').setAttribute('data-bs-theme', 'dark');
+    }
+  }
+
+  // Manage menu expanded/collapsed state with local storage support If enableMenuLocalStorage = true in config.js
+  if (typeof config !== 'undefined') {
+    if (config.enableMenuLocalStorage) {
+      try {
+        if (localStorage.getItem('templateCustomizer-' + templateName + '--LayoutCollapsed') !== null)
+          window.Helpers.setCollapsed(
+            localStorage.getItem('templateCustomizer-' + templateName + '--LayoutCollapsed') === 'true',
+            false
+          );
+      } catch (e) {}
+    }
+  }
+})();
+
+// Search Configuration
+const SearchConfig = {
+  container: '#autocomplete',
+  placeholder: 'Search [CTRL + K]',
+  classNames: {
+    detachedContainer: 'd-flex flex-column',
+    detachedFormContainer: 'd-flex align-items-center justify-content-between border-bottom',
+    form: 'd-flex align-items-center',
+    input: 'search-control border-none',
+    detachedCancelButton: 'btn-search-close',
+    panel: 'flex-grow content-wrapper overflow-hidden position-relative',
+    panelLayout: 'h-100',
+    clearButton: 'd-none',
+    item: 'd-block'
+  }
+};
+
+// Search state and data
+let data = {};
+let currentFocusIndex = -1;
+
+// Utils
+function isMacOS() {
+  return /Mac|iPod|iPhone|iPad/.test(navigator.userAgent);
+}
+
+// Load search data
+function loadSearchData() {
+  const searchJson = $('#layout-menu').hasClass('menu-horizontal') ? 'search-horizontal.json' : 'search-vertical.json';
+
+  fetch(assetsPath + 'json/' + searchJson)
+    .then(response => {
+      if (!response.ok) throw new Error('Failed to fetch data');
+      return response.json();
+    })
+    .then(json => {
+      data = json;
+      initializeAutocomplete();
+    })
+    .catch(error => console.error('Error loading JSON:', error));
+}
+
+// Initialize autocomplete
+function initializeAutocomplete() {
+  const searchElement = document.getElementById('autocomplete');
+  if (!searchElement) return;
+
+  return autocomplete({
+    ...SearchConfig,
+    openOnFocus: true,
+    onStateChange({ state, setQuery }) {
+      // When autocomplete is opened
+      if (state.isOpen) {
+        // Hide body scroll and add padding to prevent layout shift
+        document.body.style.overflow = 'hidden';
+        document.body.style.paddingRight = 'var(--bs-scrollbar-width)';
+        // Replace "Cancel" text with icon
+        const cancelIcon = document.querySelector('.aa-DetachedCancelButton');
+        if (cancelIcon) {
+          cancelIcon.innerHTML =
+            '<span class="text-body-secondary">[esc]</span> <span class="icon-base icon-md ti tabler-x text-heading"></span>';
+        }
+
+        // Perfect Scrollbar
+        if (!window.autoCompletePS) {
+          const panel = document.querySelector('.aa-Panel');
+          if (panel) {
+            window.autoCompletePS = new PerfectScrollbar(panel);
+          }
+        }
+      } else {
+        // When autocomplete is closed
+        if (state.status === 'idle' && state.query) {
+          setQuery('');
+        }
+
+        // Restore body scroll and padding when autocomplete is closed
+        document.body.style.overflow = 'auto';
+        document.body.style.paddingRight = '';
+      }
+    },
+    render(args, root) {
+      const { render, html, children, state } = args;
+
+      // Initial Suggestions
+      if (!state.query) {
+        const initialSuggestions = html`
+          <div class="p-5 p-lg-12">
+            <div class="row g-4">
+              ${Object.entries(data.suggestions || {}).map(
+                ([section, items]) => html`
+                  <div class="col-md-6 suggestion-section">
+                    <p class="search-headings mb-2">${section}</p>
+                    <div class="suggestion-items">
+                      ${items.map(
+                        item => html`
+                          <a href="${item.url}" class="suggestion-item d-flex align-items-center">
+                            <i class="icon-base ti ${item.icon}"></i>
+                            <span>${item.name}</span>
+                          </a>
+                        `
+                      )}
+                    </div>
+                  </div>
+                `
+              )}
+            </div>
+          </div>
+        `;
+
+        render(initialSuggestions, root);
+        return;
+      }
+
+      // No items
+      if (!args.sections.length) {
+        render(
+          html`
+            <div class="search-no-results-wrapper">
+              <div class="d-flex justify-content-center align-items-center h-100">
+                <div class="text-center text-heading">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24">
+                    <g
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="0.6">
+                      <path d="M14 3v4a1 1 0 0 0 1 1h4" />
+                      <path d="M17 21H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2m-5-4h.01M12 11v3" />
+                    </g>
+                  </svg>
+                  <h5 class="mt-2">No results found</h5>
+                </div>
+              </div>
+            </div>
+          `,
+          root
+        );
+        return;
+      }
+
+      render(children, root);
+      window.autoCompletePS?.update();
+    },
+    getSources() {
+      const sources = [];
+
+      // Add navigation sources if available
+      if (data.navigation) {
+        // Add other navigation sources first
+        const navigationSources = Object.keys(data.navigation)
+          .filter(section => section !== 'files' && section !== 'members')
+          .map(section => ({
+            sourceId: `nav-${section}`,
+            getItems({ query }) {
+              const items = data.navigation[section];
+              if (!query) return items;
+              return items.filter(item => item.name.toLowerCase().includes(query.toLowerCase()));
+            },
+            getItemUrl({ item }) {
+              return item.url;
+            },
+            templates: {
+              header({ items, html }) {
+                if (items.length === 0) return null;
+                return html`<span class="search-headings">${section}</span>`;
+              },
+              item({ item, html }) {
+                return html`
+                  <a href="${item.url}" class="d-flex justify-content-between align-items-center">
+                    <span class="item-wrapper"><i class="icon-base ti ${item.icon}"></i>${item.name}</span>
+                    <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24">
+                      <g
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="1.8"
+                        color="currentColor">
+                        <path d="M11 6h4.5a4.5 4.5 0 1 1 0 9H4" />
+                        <path d="M7 12s-3 2.21-3 3s3 3 3 3" />
+                      </g>
+                    </svg>
+                  </a>
+                `;
+              }
+            }
+          }));
+        sources.push(...navigationSources);
+
+        // Add Files source second
+        if (data.navigation.files) {
+          sources.push({
+            sourceId: 'files',
+            getItems({ query }) {
+              const items = data.navigation.files;
+              if (!query) return items;
+              return items.filter(item => item.name.toLowerCase().includes(query.toLowerCase()));
+            },
+            getItemUrl({ item }) {
+              return item.url;
+            },
+            templates: {
+              header({ items, html }) {
+                if (items.length === 0) return null;
+                return html`<span class="search-headings">Files</span>`;
+              },
+              item({ item, html }) {
+                return html`
+                  <a href="${item.url}" class="d-flex align-items-center position-relative px-4 py-2">
+                    <div class="file-preview me-2">
+                      <img src="${assetsPath}${item.src}" alt="${item.name}" class="rounded" width="42" />
+                    </div>
+                    <div class="flex-grow-1">
+                      <h6 class="mb-0">${item.name}</h6>
+                      <small class="text-body-secondary">${item.subtitle}</small>
+                    </div>
+                    ${item.meta
+                      ? html`
+                          <div class="position-absolute end-0 me-4">
+                            <span class="text-body-secondary small">${item.meta}</span>
+                          </div>
+                        `
+                      : ''}
+                  </a>
+                `;
+              }
+            }
+          });
+        }
+
+        // Add Members source last
+        if (data.navigation.members) {
+          sources.push({
+            sourceId: 'members',
+            getItems({ query }) {
+              const items = data.navigation.members;
+              if (!query) return items;
+              return items.filter(item => item.name.toLowerCase().includes(query.toLowerCase()));
+            },
+            getItemUrl({ item }) {
+              return item.url;
+            },
+            templates: {
+              header({ items, html }) {
+                if (items.length === 0) return null;
+                return html`<span class="search-headings">Members</span>`;
+              },
+              item({ item, html }) {
+                return html`
+                  <a href="${item.url}" class="d-flex align-items-center py-2 px-4">
+                    <div class="avatar me-2">
+                      <img src="${assetsPath}${item.src}" alt="${item.name}" class="rounded-circle" width="32" />
+                    </div>
+                    <div class="flex-grow-1">
+                      <h6 class="mb-0">${item.name}</h6>
+                      <small class="text-body-secondary">${item.subtitle}</small>
+                    </div>
+                  </a>
+                `;
+              }
+            }
+          });
+        }
+      }
+
+      return sources;
+    }
+  });
+}
+
+// Initialize search shortcut
+document.addEventListener('keydown', event => {
+  if ((event.ctrlKey || event.metaKey) && event.key === 'k') {
+    event.preventDefault();
+    document.querySelector('.aa-DetachedSearchButton').click();
+  }
+});
+
+// Load search data on page load
+if (document.documentElement.querySelector('#autocomplete')) {
+  loadSearchData();
+}

public/assets/js/master-kabupatenkota.js

@@ -0,0 +1,256 @@
+/**
+ * Page User List
+ */
+
+'use strict';
+
+// Datatable (js)
+document.addEventListener('DOMContentLoaded', function (e) {
+  let borderColor, bodyBg, headingColor;
+
+  borderColor = config.colors.borderColor;
+  bodyBg = config.colors.bodyBg;
+  headingColor = config.colors.headingColor;
+
+  // Variable declaration for table
+  const dt_user_table = document.querySelector('.datatables-users'),
+    userView = 'app-user-view-account.html',
+    statusObj = {
+      1: { title: 'Pending', class: 'bg-label-warning' },
+      2: { title: 'Active', class: 'bg-label-success' },
+      3: { title: 'Inactive', class: 'bg-label-secondary' }
+    };
+  var select2 = $('.select2');
+
+  if (select2.length) {
+    var $this = select2;
+    $this.wrap('<div class="position-relative"></div>').select2({
+      placeholder: 'Select Country',
+      dropdownParent: $this.parent()
+    });
+  }
+
+  if (dt_user_table) {
+      const dt_user = new DataTable(dt_user_table, {
+        ajax: kabupatenKotaListUrl,
+        columns: [
+            { data: 'id' },
+            { data: 'id' },
+            { data: 'kode_kabupaten_kota' }, 
+            { data: 'nama_kabupaten_kota' }, 
+            { data: 'nama_provinsi' },
+            { data: null, defaultContent: '' }
+        ],
+        columnDefs: [
+            {
+                targets: 0,
+                className: 'control',
+                searchable: false,
+                orderable: false,
+                render: function() { return ''; }
+            },
+            {
+                targets: 1,
+                orderable: false,
+                checkboxes: {
+                    selectAllRender: '<input type="checkbox" class="form-check-input">'
+                },
+                render: function() {
+                    return '<input type="checkbox" class="dt-checkboxes form-check-input">';
+                }
+            },
+            {
+                targets: 2,
+                render: function (data, type, full, meta) {
+                    return '<span class="text-truncate d-flex align-items-center text-heading">' + full['kode_kabupaten_kota'] + '</span>';
+                }
+            },
+            {
+                targets: 3,
+                render: function (data, type, full, meta) {
+                    return '<span class="text-truncate d-flex align-items-center text-heading">' + full['nama_kabupaten_kota'] + '</span>';
+                }
+            },
+            {
+                targets: 4,
+                render: function (data, type, full, meta) {
+                    return '<span class="text-truncate d-flex align-items-center text-heading">' + full['nama_provinsi'] + '</span>';
+                }
+            },
+            {
+                targets: -1,
+                title: 'Actions',
+                searchable: false,
+                orderable: false,
+                render: function (data, type, full, meta) {
+                    return `
+                        <div class="d-flex align-items-center">
+                            <a href="javascript:;" class="btn btn-icon btn-text-secondary waves-effect waves-light rounded-pill delete-record"><i class="ti tabler-trash ti-md"></i></a>
+                            <a href="javascript:;" class="btn btn-icon btn-text-secondary waves-effect waves-light rounded-pill"><i class="ti tabler-eye ti-md"></i></a>
+                        </div>`;
+                }
+            }
+        ],
+        order: [[3, 'asc']],
+        layout: {
+            topStart: {
+                rowClass: 'row m-3 my-0 justify-content-between',
+                features: [
+                    {
+                        pageLength: {
+                            menu: [10, 25, 50, 100],
+                            text: '_MENU_'
+                        }
+                    }
+                ]
+            },
+            topEnd: {
+                features: [
+                    {
+                        search: {
+                            placeholder: 'Search User',
+                            text: '_INPUT_'
+                        }
+                    },
+                    {
+                        buttons: [
+                            {
+                                text: '<i class="ti tabler-plus me-0 me-sm-1 ti-xs"></i><span class="d-none d-sm-inline-block">Add New User</span>',
+                                className: 'add-new btn btn-primary ms-2 waves-effect waves-light',
+                                attr: {
+                                    'data-bs-toggle': 'offcanvas',
+                                    'data-bs-target': '#offcanvasAddUser'
+                                }
+                            }
+                        ]
+                    }
+                ]
+            },
+            bottomStart: {
+                rowClass: 'row mx-3 justify-content-between',
+                features: ['info']
+            },
+            bottomEnd: {
+                rowClass: 'row mx-3 justify-content-between',
+                features: ['paging']
+            }
+        }
+    });
+  }
+
+  // Filter form control to default size
+  // ? setTimeout used for user-list table initialization
+  setTimeout(() => {
+    const elementsToModify = [
+      { selector: '.dt-buttons .btn', classToRemove: 'btn-secondary' },
+      { selector: '.dt-search .form-control', classToRemove: 'form-control-sm' },
+      { selector: '.dt-length .form-select', classToRemove: 'form-select-sm', classToAdd: 'ms-0' },
+      { selector: '.dt-length', classToAdd: 'mb-md-6 mb-0' },
+      {
+        selector: '.dt-layout-end',
+        classToRemove: 'justify-content-between',
+        classToAdd: 'd-flex gap-md-4 justify-content-md-between justify-content-center gap-2 flex-wrap'
+      },
+      { selector: '.dt-buttons', classToAdd: 'd-flex gap-4 mb-md-0 mb-4' },
+      { selector: '.dt-layout-table', classToRemove: 'row mt-2' },
+      { selector: '.dt-layout-full', classToRemove: 'col-md col-12', classToAdd: 'table-responsive' }
+    ];
+
+    // Delete record
+    elementsToModify.forEach(({ selector, classToRemove, classToAdd }) => {
+      document.querySelectorAll(selector).forEach(element => {
+        if (classToRemove) {
+          classToRemove.split(' ').forEach(className => element.classList.remove(className));
+        }
+        if (classToAdd) {
+          classToAdd.split(' ').forEach(className => element.classList.add(className));
+        }
+      });
+    });
+  }, 100);
+
+  // Validation & Phone mask
+  const phoneMaskList = document.querySelectorAll('.phone-mask'),
+    addNewUserForm = document.getElementById('addNewUserForm');
+
+  // Phone Number
+  if (phoneMaskList) {
+    phoneMaskList.forEach(function (phoneMask) {
+      phoneMask.addEventListener('input', event => {
+        const cleanValue = event.target.value.replace(/\D/g, '');
+        phoneMask.value = formatGeneral(cleanValue, {
+          blocks: [3, 3, 4],
+          delimiters: [' ', ' ']
+        });
+      });
+      registerCursorTracker({
+        input: phoneMask,
+        delimiter: ' '
+      });
+    });
+  }
+  // Add New User Form Validation
+  const fv = FormValidation.formValidation(addNewUserForm, {
+    fields: {
+      userFullname: {
+        validators: {
+          notEmpty: {
+            message: 'Please enter fullname '
+          }
+        }
+      },
+      userEmail: {
+        validators: {
+          notEmpty: {
+            message: 'Please enter your email'
+          },
+          emailAddress: {
+            message: 'The value is not a valid email address'
+          }
+        }
+      }
+    },
+    plugins: {
+      trigger: new FormValidation.plugins.Trigger(),
+      bootstrap5: new FormValidation.plugins.Bootstrap5({
+        // Use this for enabling/changing valid/invalid class
+        eleValidClass: '',
+        rowSelector: function (field, ele) {
+          // field is the field name & ele is the field element
+          return '.form-control-validation';
+        }
+      }),
+      submitButton: new FormValidation.plugins.SubmitButton(),
+      // Submit the form when all fields are valid
+      // defaultSubmit: new FormValidation.plugins.DefaultSubmit(),
+      autoFocus: new FormValidation.plugins.AutoFocus()
+    }
+  });
+});
+
+$('.datatables-users tbody').on('click', '.verify-user', function () {
+    const userId = $(this).data('id');
+    const currentStatus = $(this).data('status'); // 1 = Active, 2 = Pending
+    const actionText = (currentStatus === 1) ? 'menonaktifkan (set Pending)' : 'mengaktifkan';
+
+    if (confirm('Apakah Anda yakin ingin ' + actionText + ' user ini?')) {
+        $.ajax({
+            url: '/users/' + userId + '/verify',
+            type: 'POST',
+            data: {
+                _token: $('meta[name="csrf-token"]').attr('content'),
+                _method: 'PATCH'
+            },
+            success: function (response) {
+                // Reload tabel tanpa reset posisi pagination (false)
+                $('.datatables-users').DataTable().ajax.reload(null, false);
+                
+                // Opsional: Notifikasi kecil di pojok (jika pakai library toastr)
+                // toastr.success('Status berhasil diperbarui');
+            },
+            error: function (xhr) {
+                alert('Gagal mengubah status user.');
+            }
+        });
+    }
+});

public/assets/js/master-kecamatan.js

@@ -0,0 +1,265 @@
+/**
+ * Page User List
+ */
+
+'use strict';
+
+// Datatable (js)
+document.addEventListener('DOMContentLoaded', function (e) {
+  let borderColor, bodyBg, headingColor;
+
+  borderColor = config.colors.borderColor;
+  bodyBg = config.colors.bodyBg;
+  headingColor = config.colors.headingColor;
+
+  // Variable declaration for table
+  const dt_user_table = document.querySelector('.datatables-users'),
+    userView = 'app-user-view-account.html',
+    statusObj = {
+      1: { title: 'Pending', class: 'bg-label-warning' },
+      2: { title: 'Active', class: 'bg-label-success' },
+      3: { title: 'Inactive', class: 'bg-label-secondary' }
+    };
+  var select2 = $('.select2');
+
+  if (select2.length) {
+    var $this = select2;
+    $this.wrap('<div class="position-relative"></div>').select2({
+      placeholder: 'Select Country',
+      dropdownParent: $this.parent()
+    });
+  }
+
+  if (dt_user_table) {
+      const dt_user = new DataTable(dt_user_table, {
+        ajax: kecamatanListUrl,
+        columns: [
+            { data: 'id' },
+            { data: 'id' },
+            { data: 'kode_kecamatan' }, 
+            { data: 'nama_kecamatan' }, 
+            { data: 'nama_kabupaten_kota' },
+            { data: 'nama_provinsi' },
+            { data: null, defaultContent: '' }
+        ],
+        columnDefs: [
+            {
+                targets: 0,
+                className: 'control',
+                searchable: false,
+                orderable: false,
+                render: function() { return ''; }
+            },
+            {
+                targets: 1,
+                orderable: false,
+                checkboxes: {
+                    selectAllRender: '<input type="checkbox" class="form-check-input">'
+                },
+                render: function() {
+                    return '<input type="checkbox" class="dt-checkboxes form-check-input">';
+                }
+            },
+            {
+                targets: 2,
+                render: function (data, type, full, meta) {
+                    return '<span class="text-truncate d-flex align-items-center text-heading">' + full['kode_kecamatan'] + '</span>';
+                }
+            },
+            {
+                targets: 3,
+                render: function (data, type, full, meta) {
+                    return '<span class="text-truncate d-flex align-items-center text-heading">' + full['nama_kecamatan'] + '</span>';
+                }
+            },
+            {
+                targets: 4,
+
+                render: function (data, type, full, meta) {
+                    return '<span class="text-truncate d-flex align-items-center text-heading">' + full['nama_kabupaten_kota'] + '</span>';
+                }
+            },
+            {
+                targets: 5,
+
+                render: function (data, type, full, meta) {
+                    return '<span class="text-truncate d-flex align-items-center text-heading">' + full['nama_provinsi'] + '</span>';
+                }
+            },
+            {
+                targets: -1,
+                title: 'Actions',
+                searchable: false,
+                orderable: false,
+                render: function (data, type, full, meta) {
+                    return `
+                        <div class="d-flex align-items-center">
+                            <a href="javascript:;" class="btn btn-icon btn-text-secondary waves-effect waves-light rounded-pill delete-record"><i class="ti tabler-trash ti-md"></i></a>
+                            <a href="javascript:;" class="btn btn-icon btn-text-secondary waves-effect waves-light rounded-pill"><i class="ti tabler-eye ti-md"></i></a>
+                        </div>`;
+                }
+            }
+        ],
+        order: [[3, 'asc']],
+        layout: {
+            topStart: {
+                rowClass: 'row m-3 my-0 justify-content-between',
+                features: [
+                    {
+                        pageLength: {
+                            menu: [10, 25, 50, 100],
+                            text: '_MENU_'
+                        }
+                    }
+                ]
+            },
+            topEnd: {
+                features: [
+                    {
+                        search: {
+                            placeholder: 'Search User',
+                            text: '_INPUT_'
+                        }
+                    },
+                    {
+                        buttons: [
+                            {
+                                text: '<i class="ti tabler-plus me-0 me-sm-1 ti-xs"></i><span class="d-none d-sm-inline-block">Add New User</span>',
+                                className: 'add-new btn btn-primary ms-2 waves-effect waves-light',
+                                attr: {
+                                    'data-bs-toggle': 'offcanvas',
+                                    'data-bs-target': '#offcanvasAddUser'
+                                }
+                            }
+                        ]
+                    }
+                ]
+            },
+            bottomStart: {
+                rowClass: 'row mx-3 justify-content-between',
+                features: ['info']
+            },
+            bottomEnd: {
+                rowClass: 'row mx-3 justify-content-between',
+                features: ['paging']
+            }
+        }
+    });
+  }
+
+  // Filter form control to default size
+  // ? setTimeout used for user-list table initialization
+  setTimeout(() => {
+    const elementsToModify = [
+      { selector: '.dt-buttons .btn', classToRemove: 'btn-secondary' },
+      { selector: '.dt-search .form-control', classToRemove: 'form-control-sm' },
+      { selector: '.dt-length .form-select', classToRemove: 'form-select-sm', classToAdd: 'ms-0' },
+      { selector: '.dt-length', classToAdd: 'mb-md-6 mb-0' },
+      {
+        selector: '.dt-layout-end',
+        classToRemove: 'justify-content-between',
+        classToAdd: 'd-flex gap-md-4 justify-content-md-between justify-content-center gap-2 flex-wrap'
+      },
+      { selector: '.dt-buttons', classToAdd: 'd-flex gap-4 mb-md-0 mb-4' },
+      { selector: '.dt-layout-table', classToRemove: 'row mt-2' },
+      { selector: '.dt-layout-full', classToRemove: 'col-md col-12', classToAdd: 'table-responsive' }
+    ];
+
+    // Delete record
+    elementsToModify.forEach(({ selector, classToRemove, classToAdd }) => {
+      document.querySelectorAll(selector).forEach(element => {
+        if (classToRemove) {
+          classToRemove.split(' ').forEach(className => element.classList.remove(className));
+        }
+        if (classToAdd) {
+          classToAdd.split(' ').forEach(className => element.classList.add(className));
+        }
+      });
+    });
+  }, 100);
+
+  // Validation & Phone mask
+  const phoneMaskList = document.querySelectorAll('.phone-mask'),
+    addNewUserForm = document.getElementById('addNewUserForm');
+
+  // Phone Number
+  if (phoneMaskList) {
+    phoneMaskList.forEach(function (phoneMask) {
+      phoneMask.addEventListener('input', event => {
+        const cleanValue = event.target.value.replace(/\D/g, '');
+        phoneMask.value = formatGeneral(cleanValue, {
+          blocks: [3, 3, 4],
+          delimiters: [' ', ' ']
+        });
+      });
+      registerCursorTracker({
+        input: phoneMask,
+        delimiter: ' '
+      });
+    });
+  }
+  // Add New User Form Validation
+  const fv = FormValidation.formValidation(addNewUserForm, {
+    fields: {
+      userFullname: {
+        validators: {
+          notEmpty: {
+            message: 'Please enter fullname '
+          }
+        }
+      },
+      userEmail: {
+        validators: {
+          notEmpty: {
+            message: 'Please enter your email'
+          },
+          emailAddress: {
+            message: 'The value is not a valid email address'
+          }
+        }
+      }
+    },
+    plugins: {
+      trigger: new FormValidation.plugins.Trigger(),
+      bootstrap5: new FormValidation.plugins.Bootstrap5({
+        // Use this for enabling/changing valid/invalid class
+        eleValidClass: '',
+        rowSelector: function (field, ele) {
+          // field is the field name & ele is the field element
+          return '.form-control-validation';
+        }
+      }),
+      submitButton: new FormValidation.plugins.SubmitButton(),
+      // Submit the form when all fields are valid
+      // defaultSubmit: new FormValidation.plugins.DefaultSubmit(),
+      autoFocus: new FormValidation.plugins.AutoFocus()
+    }
+  });
+});
+
+$('.datatables-users tbody').on('click', '.verify-user', function () {
+    const userId = $(this).data('id');
+    const currentStatus = $(this).data('status'); // 1 = Active, 2 = Pending
+    const actionText = (currentStatus === 1) ? 'menonaktifkan (set Pending)' : 'mengaktifkan';
+
+    if (confirm('Apakah Anda yakin ingin ' + actionText + ' user ini?')) {
+        $.ajax({
+            url: '/users/' + userId + '/verify',
+            type: 'POST',
+            data: {
+                _token: $('meta[name="csrf-token"]').attr('content'),
+                _method: 'PATCH'
+            },
+            success: function (response) {
+                // Reload tabel tanpa reset posisi pagination (false)
+                $('.datatables-users').DataTable().ajax.reload(null, false);
+                
+                // Opsional: Notifikasi kecil di pojok (jika pakai library toastr)
+                // toastr.success('Status berhasil diperbarui');
+            },
+            error: function (xhr) {
+                alert('Gagal mengubah status user.');
+            }
+        });
+    }
+});

public/assets/js/master-provinsi.js

@@ -0,0 +1,266 @@
+/**
+ * Page User List
+ */
+
+'use strict';
+
+// Datatable (js)
+document.addEventListener('DOMContentLoaded', function (e) {
+  let borderColor, bodyBg, headingColor;
+
+  borderColor = config.colors.borderColor;
+  bodyBg = config.colors.bodyBg;
+  headingColor = config.colors.headingColor;
+
+  // Variable declaration for table
+  const dt_user_table = document.querySelector('.datatables-users'),
+    userView = 'app-user-view-account.html',
+    statusObj = {
+      1: { title: 'Pending', class: 'bg-label-warning' },
+      2: { title: 'Active', class: 'bg-label-success' },
+      3: { title: 'Inactive', class: 'bg-label-secondary' }
+    };
+  var select2 = $('.select2');
+
+  if (select2.length) {
+    var $this = select2;
+    $this.wrap('<div class="position-relative"></div>').select2({
+      placeholder: 'Select Country',
+      dropdownParent: $this.parent()
+    });
+  }
+
+  if (dt_user_table) {
+      const dt_user = new DataTable(dt_user_table, {
+        ajax: provinsiListUrl,
+        columns: [
+            { data: 'id' },
+            { data: 'id' },
+            { data: 'kode_provinsi' }, 
+            { data: 'nama' }, 
+            { data: 'iso' }
+        ],
+        columnDefs: [
+            {
+                targets: 0,
+                className: 'control',
+                searchable: false,
+                orderable: false,
+                render: function() { return ''; }
+            },
+            {
+                targets: 1,
+                orderable: false,
+                checkboxes: {
+                    selectAllRender: '<input type="checkbox" class="form-check-input">'
+                },
+                render: function() {
+                    return '<input type="checkbox" class="dt-checkboxes form-check-input">';
+                }
+            },
+            {
+                targets: 2,
+                render: function (data, type, full, meta) {
+                    return '<span class="text-truncate d-flex align-items-center text-heading">' + full['kode_provinsi'] + '</span>';
+                }
+            },
+            {
+                targets: 3,
+                render: function (data, type, full, meta) {
+                    var name = full['nama_provinsi'], iso = full['iso'];
+                    var stateNum = Math.floor(Math.random() * 6);
+                    var states = ['success', 'danger', 'warning', 'info', 'primary', 'secondary'];
+                    var state = states[stateNum];
+                    var initials = (name.match(/\b\w/g) || []).map(char => char.toUpperCase()).join('');
+                    
+                    return `
+                        <div class="d-flex justify-content-start align-items-center user-name">
+                            <div class="avatar-wrapper">
+                                <div class="avatar avatar-sm me-4">
+                                    <span class="avatar-initial rounded-circle bg-label-${state}">${initials}</span>
+                                </div>
+                            </div>
+                            <div class="d-flex flex-column">
+                                <span class="fw-medium text-heading text-truncate">${name}</span>
+                                <small>${iso}</small>
+                            </div>
+                        </div>`;
+                }
+            },
+            {
+                targets: -1,
+                title: 'Actions',
+                searchable: false,
+                orderable: false,
+                render: function (data, type, full, meta) {
+                    return `
+                        <div class="d-flex align-items-center">
+                            <a href="javascript:;" class="btn btn-icon btn-text-secondary waves-effect waves-light rounded-pill delete-record"><i class="ti tabler-trash ti-md"></i></a>
+                            <a href="javascript:;" class="btn btn-icon btn-text-secondary waves-effect waves-light rounded-pill"><i class="ti tabler-eye ti-md"></i></a>
+                        </div>`;
+                }
+            }
+        ],
+        order: [[2, 'desc']],
+        layout: {
+            topStart: {
+                rowClass: 'row m-3 my-0 justify-content-between',
+                features: [
+                    {
+                        pageLength: {
+                            menu: [10, 25, 50, 100],
+                            text: '_MENU_'
+                        }
+                    }
+                ]
+            },
+            topEnd: {
+                features: [
+                    {
+                        search: {
+                            placeholder: 'Search User',
+                            text: '_INPUT_'
+                        }
+                    },
+                    {
+                        buttons: [
+                            {
+                                text: '<i class="ti tabler-plus me-0 me-sm-1 ti-xs"></i><span class="d-none d-sm-inline-block">Add New User</span>',
+                                className: 'add-new btn btn-primary ms-2 waves-effect waves-light',
+                                attr: {
+                                    'data-bs-toggle': 'offcanvas',
+                                    'data-bs-target': '#offcanvasAddUser'
+                                }
+                            }
+                        ]
+                    }
+                ]
+            },
+            bottomStart: {
+                rowClass: 'row mx-3 justify-content-between',
+                features: ['info']
+            },
+            bottomEnd: {
+                rowClass: 'row mx-3 justify-content-between',
+                features: ['paging']
+            }
+        }
+    });
+  }
+
+  // Filter form control to default size
+  // ? setTimeout used for user-list table initialization
+  setTimeout(() => {
+    const elementsToModify = [
+      { selector: '.dt-buttons .btn', classToRemove: 'btn-secondary' },
+      { selector: '.dt-search .form-control', classToRemove: 'form-control-sm' },
+      { selector: '.dt-length .form-select', classToRemove: 'form-select-sm', classToAdd: 'ms-0' },
+      { selector: '.dt-length', classToAdd: 'mb-md-6 mb-0' },
+      {
+        selector: '.dt-layout-end',
+        classToRemove: 'justify-content-between',
+        classToAdd: 'd-flex gap-md-4 justify-content-md-between justify-content-center gap-2 flex-wrap'
+      },
+      { selector: '.dt-buttons', classToAdd: 'd-flex gap-4 mb-md-0 mb-4' },
+      { selector: '.dt-layout-table', classToRemove: 'row mt-2' },
+      { selector: '.dt-layout-full', classToRemove: 'col-md col-12', classToAdd: 'table-responsive' }
+    ];
+
+    // Delete record
+    elementsToModify.forEach(({ selector, classToRemove, classToAdd }) => {
+      document.querySelectorAll(selector).forEach(element => {
+        if (classToRemove) {
+          classToRemove.split(' ').forEach(className => element.classList.remove(className));
+        }
+        if (classToAdd) {
+          classToAdd.split(' ').forEach(className => element.classList.add(className));
+        }
+      });
+    });
+  }, 100);
+
+  // Validation & Phone mask
+  const phoneMaskList = document.querySelectorAll('.phone-mask'),
+    addNewUserForm = document.getElementById('addNewUserForm');
+
+  // Phone Number
+  if (phoneMaskList) {
+    phoneMaskList.forEach(function (phoneMask) {
+      phoneMask.addEventListener('input', event => {
+        const cleanValue = event.target.value.replace(/\D/g, '');
+        phoneMask.value = formatGeneral(cleanValue, {
+          blocks: [3, 3, 4],
+          delimiters: [' ', ' ']
+        });
+      });
+      registerCursorTracker({
+        input: phoneMask,
+        delimiter: ' '
+      });
+    });
+  }
+  // Add New User Form Validation
+  const fv = FormValidation.formValidation(addNewUserForm, {
+    fields: {
+      userFullname: {
+        validators: {
+          notEmpty: {
+            message: 'Please enter fullname '
+          }
+        }
+      },
+      userEmail: {
+        validators: {
+          notEmpty: {
+            message: 'Please enter your email'
+          },
+          emailAddress: {
+            message: 'The value is not a valid email address'
+          }
+        }
+      }
+    },
+    plugins: {
+      trigger: new FormValidation.plugins.Trigger(),
+      bootstrap5: new FormValidation.plugins.Bootstrap5({
+        // Use this for enabling/changing valid/invalid class
+        eleValidClass: '',
+        rowSelector: function (field, ele) {
+          // field is the field name & ele is the field element
+          return '.form-control-validation';
+        }
+      }),
+      submitButton: new FormValidation.plugins.SubmitButton(),
+      // Submit the form when all fields are valid
+      // defaultSubmit: new FormValidation.plugins.DefaultSubmit(),
+      autoFocus: new FormValidation.plugins.AutoFocus()
+    }
+  });
+});
+
+$('.datatables-users tbody').on('click', '.verify-user', function () {
+    const userId = $(this).data('id');
+    const currentStatus = $(this).data('status'); // 1 = Active, 2 = Pending
+    const actionText = (currentStatus === 1) ? 'menonaktifkan (set Pending)' : 'mengaktifkan';
+
+    if (confirm('Apakah Anda yakin ingin ' + actionText + ' user ini?')) {
+        $.ajax({
+            url: '/users/' + userId + '/verify',
+            type: 'POST',
+            data: {
+                _token: $('meta[name="csrf-token"]').attr('content'),
+                _method: 'PATCH'
+            },
+            success: function (response) {
+                // Reload tabel tanpa reset posisi pagination (false)
+                $('.datatables-users').DataTable().ajax.reload(null, false);
+                
+                // Opsional: Notifikasi kecil di pojok (jika pakai library toastr)
+                // toastr.success('Status berhasil diperbarui');
+            },
+            error: function (xhr) {
+                alert('Gagal mengubah status user.');
+            }
+        });
+    }
+});

public/assets/js/pages-auth.js

@@ -0,0 +1,114 @@
+/**
+ *  Pages Authentication
+ */
+'use strict';
+
+document.addEventListener('DOMContentLoaded', function () {
+  (() => {
+    const formAuthentication = document.querySelector('#formAuthentication');
+
+    // Form validation for Add new record
+    if (formAuthentication && typeof FormValidation !== 'undefined') {
+      FormValidation.formValidation(formAuthentication, {
+        fields: {
+          username: {
+            validators: {
+              notEmpty: {
+                message: 'Please enter username'
+              },
+              stringLength: {
+                min: 6,
+                message: 'Username must be more than 6 characters'
+              }
+            }
+          },
+          email: {
+            validators: {
+              notEmpty: {
+                message: 'Please enter your email'
+              },
+              emailAddress: {
+                message: 'Please enter a valid email address'
+              }
+            }
+          },
+          'email-username': {
+            validators: {
+              notEmpty: {
+                message: 'Please enter email / username'
+              },
+              stringLength: {
+                min: 6,
+                message: 'Username must be more than 6 characters'
+              }
+            }
+          },
+          password: {
+            validators: {
+              notEmpty: {
+                message: 'Please enter your password'
+              },
+              stringLength: {
+                min: 6,
+                message: 'Password must be more than 6 characters'
+              }
+            }
+          },
+          'confirm-password': {
+            validators: {
+              notEmpty: {
+                message: 'Please confirm password'
+              },
+              identical: {
+                compare: () => formAuthentication.querySelector('[name="password"]').value,
+                message: 'The password and its confirmation do not match'
+              },
+              stringLength: {
+                min: 6,
+                message: 'Password must be more than 6 characters'
+              }
+            }
+          },
+          terms: {
+            validators: {
+              notEmpty: {
+                message: 'Please agree to terms & conditions'
+              }
+            }
+          }
+        },
+        plugins: {
+          trigger: new FormValidation.plugins.Trigger(),
+          bootstrap5: new FormValidation.plugins.Bootstrap5({
+            eleValidClass: '',
+            rowSelector: '.form-control-validation'
+          }),
+          submitButton: new FormValidation.plugins.SubmitButton(),
+          defaultSubmit: new FormValidation.plugins.DefaultSubmit(),
+          autoFocus: new FormValidation.plugins.AutoFocus()
+        },
+        init: instance => {
+          instance.on('plugins.message.placed', e => {
+            if (e.element.parentElement.classList.contains('input-group')) {
+              e.element.parentElement.insertAdjacentElement('afterend', e.messageElement);
+            }
+          });
+        }
+      });
+    }
+
+    // Two Steps Verification for numeral input mask
+    const numeralMaskElements = document.querySelectorAll('.numeral-mask');
+
+    // Format function for numeral mask
+    const formatNumeral = value => value.replace(/\D/g, ''); // Only keep digits
+
+    if (numeralMaskElements.length > 0) {
+      numeralMaskElements.forEach(numeralMaskEl => {
+        numeralMaskEl.addEventListener('input', event => {
+          numeralMaskEl.value = formatNumeral(event.target.value);
+        });
+      });
+    }
+  })();
+});

public/assets/json/locales/en.json

@@ -0,0 +1,177 @@
+{
+  "Dashboards": "Dashboards",
+  "Dashboard": "Dashboard",
+  "eCommerce": "eCommerce",
+  "CRM": "CRM",
+  "Layouts": "Layouts",
+  "Collapsed menu": "Collapsed menu",
+  "Content navbar": "Content navbar",
+  "Content nav + Sidebar": "Content nav + Sidebar",
+  "Horizontal": "Horizontal",
+  "Vertical": "Vertical",
+  "Without menu": "Without menu",
+  "Without navbar": "Without navbar",
+  "Fluid": "Fluid",
+  "Container": "Container",
+  "Blank": "Blank",
+  "Apps": "Apps",
+  "Email": "Email",
+  "Chat": "Chat",
+  "Calendar": "Calendar",
+  "Kanban": "Kanban",
+  "Products": "Products",
+  "Add Product": "Add Product",
+  "Product List": "Product List",
+  "Category List": "Category List",
+  "Category": "Category",
+  "Order": "Order",
+  "Order List": "Order List",
+  "Order Details": "Order Details",
+  "Customer": "Customer",
+  "All Customer": "All Customer",
+  "All Customers": "All Customers",
+  "Customer Details": "Customer Details",
+  "Overview": "Overview",
+  "Address & Billing": "Address & Billing",
+  "Manage Reviews": "Manage Reviews",
+  "Referrals": "Referrals",
+  "Settings": "Settings",
+  "Store Details": "Store Details",
+  "Payments": "Payments",
+  "Shipping & Delivery": "Shipping & Delivery",
+  "Locations": "Locations",
+  "Roles & Permissions": "Roles & Permissions",
+  "Roles": "Roles",
+  "Permission": "Permission",
+  "Users": "Users",
+  "List": "List",
+  "View": "View",
+  "Edit": "Edit",
+  "Logistics": "Logistics",
+  "Fleet": "Fleet",
+  "Invoice": "Invoice",
+  "Preview": "Preview",
+  "Add": "Add",
+  "Pages": "Pages",
+  "User Profile": "User Profile",
+  "Profile": "Profile",
+  "Teams": "Teams",
+  "Projects": "Projects",
+  "Account Settings": "Account Settings",
+  "Account": "Account",
+  "Security": "Security",
+  "Billing & Plans": "Billing & Plans",
+  "Notifications": "Notifications",
+  "Connections": "Connections",
+  "FAQ": "FAQ",
+  "Front Pages": "Front Pages",
+  "Payment": "Payment",
+  "Help Center": "Help Center",
+  "Landing": "Landing",
+  "Categories": "Categories",
+  "Article": "Article",
+  "Pricing": "Pricing",
+  "Error": "Error",
+  "Coming Soon": "Coming Soon",
+  "Under Maintenance": "Under Maintenance",
+  "Not Authorized": "Not Authorized",
+  "Authentications": "Authentications",
+  "Login": "Login",
+  "Register": "Register",
+  "Verify Email": "Verify Email",
+  "Reset Password": "Reset Password",
+  "Forgot Password": "Forgot Password",
+  "Two Steps": "Two Steps",
+  "Basic": "Basic",
+  "Cover": "Cover",
+  "Multi-steps": "Multi-steps",
+  "Modal Examples": "Modal Examples",
+  "Wizard Examples": "Wizard Examples",
+  "Checkout": "Checkout",
+  "Property Listing": "Property Listing",
+  "Create Deal": "Create Deal",
+  "Icons": "Icons",
+  "Tabler": "Tabler",
+  "Font Awesome": "Font Awesome",
+  "User interface": "User interface",
+  "Accordion": "Accordion",
+  "Alerts": "Alerts",
+  "App Brand": "App Brand",
+  "Badges": "Badges",
+  "Buttons": "Buttons",
+  "Cards": "Cards",
+  "Advance": "Advance",
+  "Statistics": "Statistics",
+  "Analytics": "Analytics",
+  "Actions": "Actions",
+  "Carousel": "Carousel",
+  "Collapse": "Collapse",
+  "Dropdowns": "Dropdowns",
+  "Footer": "Footer",
+  "List Groups": "List Groups",
+  "Modals": "Modals",
+  "Menu": "Menu",
+  "Navbar": "Navbar",
+  "Offcanvas": "Offcanvas",
+  "Pagination & Breadcrumbs": "Pagination & Breadcrumbs",
+  "Progress": "Progress",
+  "Spinners": "Spinners",
+  "Tabs & Pills": "Tabs & Pills",
+  "Toasts": "Toasts",
+  "Tooltips & Popovers": "Tooltips & Popovers",
+  "Typography": "Typography",
+  "Extended UI": "Extended UI",
+  "Avatar": "Avatar",
+  "BlockUI": "BlockUI",
+  "Drag & Drop": "Drag & Drop",
+  "Media Player": "Media Player",
+  "Perfect Scrollbar": "Perfect Scrollbar",
+  "Star Ratings": "Star Ratings",
+  "SweetAlert2": "SweetAlert2",
+  "Text Divider": "Text Divider",
+  "Timeline": "Timeline",
+  "Fullscreen": "Fullscreen",
+  "Tour": "Tour",
+  "Treeview": "Treeview",
+  "Miscellaneous": "Miscellaneous",
+  "Misc": "Misc",
+  "Form Elements": "Form Elements",
+  "Basic Inputs": "Basic Inputs",
+  "Input groups": "Input groups",
+  "Custom Options": "Custom Options",
+  "Editors": "Editors",
+  "File Upload": "File Upload",
+  "Pickers": "Pickers",
+  "Select & Tags": "Select & Tags",
+  "Sliders": "Sliders",
+  "Switches": "Switches",
+  "Extras": "Extras",
+  "Form Layouts": "Form Layouts",
+  "Vertical Form": "Vertical Form",
+  "Horizontal Form": "Horizontal Form",
+  "Sticky Actions": "Sticky Actions",
+  "Form Wizard": "Form Wizard",
+  "Numbered": "Numbered",
+  "Advanced": "Advanced",
+  "Forms": "Forms",
+  "Form Validation": "Form Validation",
+  "Tables": "Tables",
+  "Datatables": "Datatables",
+  "Extensions": "Extensions",
+  "Charts": "Charts",
+  "Apex Charts": "Apex Charts",
+  "ChartJS": "ChartJS",
+  "Leaflet Maps": "Leaflet Maps",
+  "Support": "Support",
+  "Documentation": "Documentation",
+  "Academy": "Academy",
+  "My Course": "My Course",
+  "Course Details": "Course Details",
+  "Apps & Pages": "Apps & Pages",
+  "Components": "Components",
+  "Forms & Tables": "Forms & Tables",
+  "Charts & Maps": "Charts & Maps",
+  "Multi Level": "Multi Level",
+  "Level 2": "Level 2",
+  "Level 3": "Level 3"
+}

public/assets/json/search-vertical.json

@@ -0,0 +1,978 @@
+{
+  "navigation": {
+    "Dashboards": [
+      {
+        "name": "Dashboard Analytics",
+        "icon": "tabler-smart-home",
+        "url": "index.html"
+      },
+      {
+        "name": "Dashboard CRM",
+        "icon": "tabler-smart-home",
+        "url": "dashboards-crm.html"
+      }
+    ],
+    "Layouts": [
+      {
+        "name": "Layout Collapsed menu",
+        "icon": "tabler-layout-sidebar",
+        "url": "layouts-collapsed-menu.html"
+      },
+      {
+        "name": "Layout Content navbar",
+        "icon": "tabler-layout-sidebar",
+        "url": "layouts-content-navbar.html"
+      },
+      {
+        "name": "Layout Content nav + Sidebar",
+        "icon": "tabler-layout-sidebar",
+        "url": "layouts-content-navbar-with-sidebar.html"
+      },
+      {
+        "name": "Layout Without menu",
+        "icon": "tabler-layout-sidebar",
+        "url": "layouts-without-menu.html"
+      },
+      {
+        "name": "Layout Without navbar",
+        "icon": "tabler-layout-sidebar",
+        "url": "layouts-without-navbar.html"
+      },
+      {
+        "name": "Layout Fluid",
+        "icon": "tabler-layout-sidebar",
+        "url": "layouts-fluid.html"
+      },
+      {
+        "name": "Layout Container",
+        "icon": "tabler-layout-sidebar",
+        "url": "layouts-container.html"
+      },
+      {
+        "name": "Layout Blank",
+        "icon": "tabler-layout-sidebar",
+        "url": "layouts-blank.html"
+      }
+    ],
+    "Apps": [
+      {
+        "name": "Email",
+        "icon": "tabler-mail",
+        "url": "app-email.html"
+      },
+      {
+        "name": "Chat",
+        "icon": "tabler-messages",
+        "url": "app-chat.html"
+      },
+      {
+        "name": "Calendar",
+        "icon": "tabler-calendar",
+        "url": "app-calendar.html"
+      },
+      {
+        "name": "Kanban",
+        "icon": "tabler-layout-kanban",
+        "url": "app-kanban.html"
+      },
+      {
+        "name": "eCommerce Dashboard",
+        "icon": "tabler-smart-home",
+        "url": "app-ecommerce-dashboard.html"
+      },
+      {
+        "name": "eCommerce - Product",
+        "icon": "tabler-building-factory-2",
+        "url": "app-ecommerce-product-list.html"
+      },
+      {
+        "name": "eCommerce - Product List",
+        "icon": "tabler-list-details",
+        "url": "app-ecommerce-product-list.html"
+      },
+      {
+        "name": "eCommerce - Add Product",
+        "icon": "tabler-plus",
+        "url": "app-ecommerce-product-add.html"
+      },
+      {
+        "name": "eCommerce - Category List",
+        "icon": "tabler-list",
+        "url": "app-ecommerce-category-list.html"
+      },
+      {
+        "name": "eCommerce - Order List",
+        "icon": "tabler-list",
+        "url": "app-ecommerce-order-list.html"
+      },
+      {
+        "name": "eCommerce - Orders Details",
+        "icon": "tabler-list-check",
+        "url": "app-ecommerce-order-details.html"
+      },
+      {
+        "name": "eCommerce - Customers",
+        "icon": "tabler-user",
+        "url": "app-ecommerce-customer-all.html"
+      },
+      {
+        "name": "eCommerce - Customers Overview",
+        "icon": "tabler-list-details",
+        "url": "app-ecommerce-customer-details-overview.html"
+      },
+      {
+        "name": "eCommerce - Customers Security",
+        "icon": "tabler-home-shield",
+        "url": "app-ecommerce-customer-details-security.html"
+      },
+      {
+        "name": "eCommerce - Customers Address and Billing",
+        "icon": "tabler-map-pin",
+        "url": "app-ecommerce-customer-details-billing.html"
+      },
+      {
+        "name": "eCommerce - Customers Notifications",
+        "icon": "tabler-bell",
+        "url": "app-ecommerce-customer-details-notifications.html"
+      },
+      {
+        "name": "eCommerce - Manage Reviews",
+        "icon": "tabler-quote",
+        "url": "app-ecommerce-manage-reviews.html"
+      },
+      {
+        "name": "eCommerce - Referrals",
+        "icon": "tabler-building-factory-2",
+        "url": "app-ecommerce-referral.html"
+      },
+      {
+        "name": "eCommerce - Settings Store Details",
+        "icon": "tabler-building-store",
+        "url": "app-ecommerce-settings-detail.html"
+      },
+      {
+        "name": "eCommerce - Settings Store Payments",
+        "icon": "tabler-currency-dollar",
+        "url": "app-ecommerce-settings-payments.html"
+      },
+      {
+        "name": "eCommerce - Settings Store Checkout",
+        "icon": "tabler-shopping-cart",
+        "url": "app-ecommerce-settings-checkout.html"
+      },
+      {
+        "name": "eCommerce - Settings Shipping & Delivery",
+        "icon": "tabler-truck",
+        "url": "app-ecommerce-settings-shipping.html"
+      },
+      {
+        "name": "eCommerce - Settings Locations",
+        "icon": "tabler-map-pin",
+        "url": "app-ecommerce-settings-locations.html"
+      },
+      {
+        "name": "eCommerce - Settings Notifications",
+        "icon": "tabler-bell-ringing",
+        "url": "app-ecommerce-settings-notifications.html"
+      },
+      {
+        "name": "Academy - Dashboard",
+        "icon": "tabler-book",
+        "url": "app-academy-dashboard.html"
+      },
+      {
+        "name": "Academy - My Course",
+        "icon": "tabler-list",
+        "url": "app-academy-course.html"
+      },
+      {
+        "name": "Academy - Course Details",
+        "icon": "tabler-list",
+        "url": "app-academy-course-details.html"
+      },
+      {
+        "name": "User List",
+        "icon": "tabler-list-numbers",
+        "url": "app-user-list.html"
+      },
+      {
+        "name": "User View - Account",
+        "icon": "tabler-user",
+        "url": "app-user-view-account.html"
+      },
+      {
+        "name": "User View - Security",
+        "icon": "tabler-shield-chevron",
+        "url": "app-user-view-security.html"
+      },
+      {
+        "name": "User View - Billing & Plans",
+        "icon": "tabler-file-text",
+        "url": "app-user-view-billing.html"
+      },
+      {
+        "name": "User View - Notifications",
+        "icon": "tabler-notification",
+        "url": "app-user-view-notifications.html"
+      },
+      {
+        "name": "User View - Connections",
+        "icon": "tabler-brand-google",
+        "url": "app-user-view-connections.html"
+      },
+      {
+        "name": "Roles",
+        "icon": "tabler-shield-checkered",
+        "url": "app-access-roles.html"
+      },
+      {
+        "name": "Permission",
+        "icon": "tabler-ban",
+        "url": "app-access-permission.html"
+      },
+      {
+        "name": "Logistics Dashboard",
+        "icon": "tabler-truck",
+        "url": "app-logistics-dashboard.html"
+      },
+      {
+        "name": "Logistics Fleet",
+        "icon": "tabler-car",
+        "url": "app-logistics-fleet.html"
+      },
+      {
+        "name": "Invoice List",
+        "icon": "tabler-list-numbers",
+        "url": "app-invoice-list.html"
+      },
+      {
+        "name": "Invoice Preview",
+        "icon": "tabler-file-text",
+        "url": "app-invoice-preview.html"
+      },
+      {
+        "name": "Invoice Edit",
+        "icon": "tabler-user-plus",
+        "url": "app-invoice-edit.html"
+      },
+      {
+        "name": "Invoice Add",
+        "icon": "tabler-user-plus",
+        "url": "app-invoice-add.html"
+      }
+    ],
+    "Pages": [
+      {
+        "name": "User Profile",
+        "icon": "tabler-user-circle",
+        "url": "pages-profile-user.html"
+      },
+      {
+        "name": "User Profile - Teams",
+        "icon": "tabler-users",
+        "url": "pages-profile-teams.html"
+      },
+      {
+        "name": "User Profile - Projects",
+        "icon": "tabler-layout-grid",
+        "url": "pages-profile-projects.html"
+      },
+      {
+        "name": "User Profile - Connections",
+        "icon": "tabler-link",
+        "url": "pages-profile-connections.html"
+      },
+      {
+        "name": "Account Settings - Account",
+        "icon": "tabler-user",
+        "url": "pages-account-settings-account.html"
+      },
+      {
+        "name": "Account Settings - Security",
+        "icon": "tabler-shield-chevron",
+        "url": "pages-account-settings-security.html"
+      },
+      {
+        "name": "Account Settings - Billing & Plans",
+        "icon": "tabler-file-text",
+        "url": "pages-account-settings-billing.html"
+      },
+      {
+        "name": "Account Settings - Notifications",
+        "icon": "tabler-notification",
+        "url": "pages-account-settings-notifications.html"
+      },
+      {
+        "name": "Account Settings - Connections",
+        "icon": "tabler-link",
+        "url": "pages-account-settings-connections.html"
+      },
+      {
+        "name": "FAQ",
+        "icon": "tabler-help",
+        "url": "pages-faq.html"
+      },
+      {
+        "name": "Pricing",
+        "icon": "tabler-diamond",
+        "url": "pages-pricing.html"
+      },
+      {
+        "name": "Error",
+        "icon": "tabler-alert-circle",
+        "url": "pages-misc-error.html"
+      },
+      {
+        "name": "Under Maintenance",
+        "icon": "tabler-barrier-block",
+        "url": "pages-misc-under-maintenance.html"
+      },
+      {
+        "name": "Coming Soon",
+        "icon": "tabler-clock",
+        "url": "pages-misc-comingsoon.html"
+      },
+      {
+        "name": "Not Authorized",
+        "icon": "tabler-user-x",
+        "url": "pages-misc-not-authorized.html"
+      },
+      {
+        "name": "Login Basic",
+        "icon": "tabler-login",
+        "url": "auth-login-basic.html"
+      },
+      {
+        "name": "Login Cover",
+        "icon": "tabler-login",
+        "url": "auth-login-cover.html"
+      },
+      {
+        "name": "Register Basic",
+        "icon": "tabler-user-plus",
+        "url": "auth-register-basic.html"
+      },
+      {
+        "name": "Register Cover",
+        "icon": "tabler-user-plus",
+        "url": "auth-register-cover.html"
+      },
+      {
+        "name": "Register Multi-steps",
+        "icon": "tabler-user-plus",
+        "url": "auth-register-multisteps.html"
+      },
+      {
+        "name": "Verify Email Basic",
+        "icon": "tabler-mail",
+        "url": "auth-verify-email-basic.html"
+      },
+      {
+        "name": "Verify Email Cover",
+        "icon": "tabler-mail",
+        "url": "auth-verify-email-cover.html"
+      },
+      {
+        "name": "Reset Password Basic",
+        "icon": "tabler-help",
+        "url": "auth-reset-password-basic.html"
+      },
+      {
+        "name": "Reset Password Cover",
+        "icon": "tabler-help",
+        "url": "auth-reset-password-cover.html"
+      },
+      {
+        "name": "Forgot Password Basic",
+        "icon": "tabler-question-mark",
+        "url": "auth-forgot-password-basic.html"
+      },
+      {
+        "name": "Forgot Password Cover",
+        "icon": "tabler-question-mark",
+        "url": "auth-forgot-password-cover.html"
+      },
+      {
+        "name": "Two Steps Verification Basic",
+        "icon": "tabler-question-mark",
+        "url": "auth-two-steps-basic.html"
+      },
+      {
+        "name": "Two Steps Verification Cover",
+        "icon": "tabler-question-mark",
+        "url": "auth-two-steps-cover.html"
+      },
+      {
+        "name": "Modal Examples",
+        "icon": "tabler-square",
+        "url": "modal-examples.html"
+      },
+      {
+        "name": "Checkout Wizard",
+        "icon": "tabler-shopping-cart",
+        "url": "wizard-ex-checkout.html"
+      },
+      {
+        "name": "Property Listing Wizard",
+        "icon": "tabler-building-cottage",
+        "url": "wizard-ex-property-listing.html"
+      },
+      {
+        "name": "Create Deal Wizard",
+        "icon": "tabler-gift",
+        "url": "wizard-ex-create-deal.html"
+      }
+    ],
+    "Front Pages": [
+      {
+        "name": "Help Center Front",
+        "icon": "tabler-progress-help",
+        "url": "../front-pages/help-center-landing.html"
+      },
+      {
+        "name": "Landing Front",
+        "icon": "tabler-files",
+        "url": "../front-pages/landing-page.html"
+      },
+      {
+        "name": "Pricing Front",
+        "icon": "tabler-currency-dollar",
+        "url": "../front-pages/pricing-page.html"
+      },
+      {
+        "name": "Checkout Front",
+        "icon": "tabler-check",
+        "url": "../front-pages/checkout-page.html"
+      },
+      {
+        "name": "Payment Front",
+        "icon": "tabler-credit-card",
+        "url": "../front-pages/payment-page.html"
+      }
+    ],
+    "Components": [
+      {
+        "name": "Tabler",
+        "icon": "tabler-pencil",
+        "url": "icons-tabler.html"
+      },
+      {
+        "name": "Font Awesome",
+        "icon": "tabler-typography",
+        "url": "icons-font-awesome.html"
+      },
+      {
+        "name": "Basic Cards",
+        "icon": "tabler-credit-card",
+        "url": "cards-basic.html"
+      },
+      {
+        "name": "Advance Cards",
+        "icon": "tabler-id",
+        "url": "cards-advance.html"
+      },
+      {
+        "name": "Statistics Cards",
+        "icon": "tabler-chart-bar",
+        "url": "cards-statistics.html"
+      },
+      {
+        "name": "Analytics Cards",
+        "icon": "tabler-chart-bar",
+        "url": "cards-analytics.html"
+      },
+      {
+        "name": "Actions Cards",
+        "icon": "tabler-mouse-2",
+        "url": "cards-actions.html"
+      },
+      {
+        "name": "Accordion",
+        "icon": "tabler-arrows-maximize",
+        "url": "ui-accordion.html"
+      },
+      {
+        "name": "Alerts",
+        "icon": "tabler-alert-triangle",
+        "url": "ui-alerts.html"
+      },
+      {
+        "name": "Badges",
+        "icon": "tabler-badge",
+        "url": "ui-badges.html"
+      },
+      {
+        "name": "Buttons",
+        "icon": "tabler-circle-plus",
+        "url": "ui-buttons.html"
+      },
+      {
+        "name": "Carousel",
+        "icon": "tabler-photo",
+        "url": "ui-carousel.html"
+      },
+      {
+        "name": "Collapse",
+        "icon": "tabler-arrows-minimize",
+        "url": "ui-collapse.html"
+      },
+      {
+        "name": "Dropdowns",
+        "icon": "tabler-arrow-autofit-height",
+        "url": "ui-dropdowns.html"
+      },
+      {
+        "name": "Footer",
+        "icon": "tabler-layout-bottombar",
+        "url": "ui-footer.html"
+      },
+      {
+        "name": "List Groups",
+        "icon": "tabler-list-numbers",
+        "url": "ui-list-groups.html"
+      },
+      {
+        "name": "Modals",
+        "icon": "tabler-layout",
+        "url": "ui-modals.html"
+      },
+      {
+        "name": "Navbar",
+        "icon": "tabler-layout-navbar",
+        "url": "ui-navbar.html"
+      },
+      {
+        "name": "Offcanvas",
+        "icon": "tabler-layout",
+        "url": "ui-offcanvas.html"
+      },
+      {
+        "name": "Pagination & Breadcrumbs",
+        "icon": "tabler-chevrons-right",
+        "url": "ui-pagination-breadcrumbs.html"
+      },
+      {
+        "name": "Progress",
+        "icon": "tabler-adjustments-horizontal",
+        "url": "ui-progress.html"
+      },
+      {
+        "name": "Spinners",
+        "icon": "tabler-loader-2",
+        "url": "ui-spinners.html"
+      },
+      {
+        "name": "Tabs & Pills",
+        "icon": "tabler-server-2",
+        "url": "ui-tabs-pills.html"
+      },
+      {
+        "name": "Toasts",
+        "icon": "tabler-box-model",
+        "url": "ui-toasts.html"
+      },
+      {
+        "name": "Tooltips & Popovers",
+        "icon": "tabler-message-2",
+        "url": "ui-tooltips-popovers.html"
+      },
+      {
+        "name": "Typography",
+        "icon": "tabler-typography",
+        "url": "ui-typography.html"
+      },
+      {
+        "name": "Avatar",
+        "icon": "tabler-user-circle",
+        "url": "extended-ui-avatar.html"
+      },
+      {
+        "name": "BlockUI",
+        "icon": "tabler-window-maximize",
+        "url": "extended-ui-blockui.html"
+      },
+      {
+        "name": "Drag & Drop",
+        "icon": "tabler-drag-drop",
+        "url": "extended-ui-drag-and-drop.html"
+      },
+      {
+        "name": "Media Player",
+        "icon": "tabler-music",
+        "url": "extended-ui-media-player.html"
+      },
+      {
+        "name": "Perfect Scrollbar",
+        "icon": "tabler-arrows-move-vertical",
+        "url": "extended-ui-perfect-scrollbar.html"
+      },
+      {
+        "name": "Star Ratings",
+        "icon": "tabler-star",
+        "url": "extended-ui-star-ratings.html"
+      },
+      {
+        "name": "SweetAlert2",
+        "icon": "tabler-alert-triangle",
+        "url": "extended-ui-sweetalert2.html"
+      },
+      {
+        "name": "Text Divider",
+        "icon": "tabler-separator-horizontal",
+        "url": "extended-ui-text-divider.html"
+      },
+      {
+        "name": "Timeline Basic",
+        "icon": "tabler-arrows-horizontal",
+        "url": "extended-ui-timeline-basic.html"
+      },
+      {
+        "name": "Timeline Fullscreen",
+        "icon": "tabler-arrows-horizontal",
+        "url": "extended-ui-timeline-fullscreen.html"
+      },
+      {
+        "name": "Tour",
+        "icon": "tabler-brand-telegram",
+        "url": "extended-ui-tour.html"
+      },
+      {
+        "name": "Treeview",
+        "icon": "tabler-git-fork rotate-180",
+        "url": "extended-ui-treeview.html"
+      },
+      {
+        "name": "Miscellaneous",
+        "icon": "tabler-sitemap",
+        "url": "extended-ui-misc.html"
+      }
+    ],
+    "Forms": [
+      {
+        "name": "Basic Inputs",
+        "icon": "tabler-cursor-text",
+        "url": "forms-basic-inputs.html"
+      },
+      {
+        "name": "Input groups",
+        "icon": "tabler-arrow-autofit-content",
+        "url": "forms-input-groups.html"
+      },
+      {
+        "name": "Custom Options",
+        "icon": "tabler-circle",
+        "url": "forms-custom-options.html"
+      },
+      {
+        "name": "Editors",
+        "icon": "tabler-text-resize",
+        "url": "forms-editors.html"
+      },
+      {
+        "name": "File Upload",
+        "icon": "tabler-file-upload",
+        "url": "forms-file-upload.html"
+      },
+      {
+        "name": "Pickers",
+        "icon": "tabler-edit-circle",
+        "url": "forms-pickers.html"
+      },
+      {
+        "name": "Select & Tags",
+        "icon": "tabler-select",
+        "url": "forms-selects.html"
+      },
+      {
+        "name": "Sliders",
+        "icon": "tabler-adjustments-horizontal",
+        "url": "forms-sliders.html"
+      },
+      {
+        "name": "Switches",
+        "icon": "tabler-toggle-right",
+        "url": "forms-switches.html"
+      },
+      {
+        "name": "Extras",
+        "icon": "tabler-circle-plus",
+        "url": "forms-extras.html"
+      },
+      {
+        "name": "Vertical Form",
+        "icon": "tabler-file-text",
+        "url": "form-layouts-vertical.html"
+      },
+      {
+        "name": "Horizontal Form",
+        "icon": "tabler-file-text",
+        "url": "form-layouts-horizontal.html"
+      },
+      {
+        "name": "Sticky Actions",
+        "icon": "tabler-file-text",
+        "url": "form-layouts-sticky.html"
+      },
+      {
+        "name": "Numbered Wizard",
+        "icon": "tabler-text-wrap-disabled",
+        "url": "form-wizard-numbered.html"
+      },
+      {
+        "name": "Icons Wizard",
+        "icon": "tabler-text-wrap-disabled",
+        "url": "form-wizard-icons.html"
+      },
+      {
+        "name": "Form Validation",
+        "icon": "tabler-checkbox",
+        "url": "form-validation.html"
+      }
+    ],
+    "Tables": [
+      {
+        "name": "Tables",
+        "icon": "tabler-table",
+        "url": "tables-basic.html"
+      },
+      {
+        "name": "Datatable Basic",
+        "icon": "tabler-layout-grid",
+        "url": "tables-datatables-basic.html"
+      },
+      {
+        "name": "Datatable Advanced",
+        "icon": "tabler-layout-grid",
+        "url": "tables-datatables-advanced.html"
+      },
+      {
+        "name": "Datatable Extensions",
+        "icon": "tabler-layout-grid",
+        "url": "tables-datatables-extensions.html"
+      }
+    ],
+    "Charts & Maps": [
+      {
+        "name": "Apex Charts",
+        "icon": "tabler-chart-line",
+        "url": "charts-apex.html"
+      },
+      {
+        "name": "ChartJS",
+        "icon": "tabler-chart-bar",
+        "url": "charts-chartjs.html"
+      },
+      {
+        "name": "Leaflet Maps",
+        "icon": "tabler-map-pin",
+        "url": "maps-leaflet.html"
+      }
+    ],
+    "files": [
+      {
+        "name": "Class Attendance",
+        "subtitle": "By Tommy Shelby",
+        "src": "img/icons/misc/search-xls.png",
+        "meta": "17kb",
+        "url": "javascript:;"
+      },
+      {
+        "name": "Passport Image",
+        "subtitle": "By William Budd",
+        "src": "img/icons/misc/search-jpg.png",
+        "meta": "35kb",
+        "url": "javascript:;"
+      },
+      {
+        "name": "Class Notes",
+        "subtitle": "By Laurel Lance",
+        "src": "img/icons/misc/search-doc.png",
+        "meta": "153kb",
+        "url": "javascript:;"
+      },
+      {
+        "name": "Receipt",
+        "subtitle": "By Donnie Darko",
+        "src": "img/icons/misc/search-jpg.png",
+        "meta": "25kb",
+        "url": "javascript:;"
+      },
+      {
+        "name": "Social Guide",
+        "subtitle": "By Ryan Middleton",
+        "src": "img/icons/misc/search-doc.png",
+        "meta": "39kb",
+        "url": "javascript:;"
+      },
+      {
+        "name": "Expenses",
+        "subtitle": "By Slade Wilson",
+        "src": "img/icons/misc/search-xls.png",
+        "meta": "15kb",
+        "url": "javascript:;"
+      },
+      {
+        "name": "Documentation",
+        "subtitle": "By Walter White",
+        "src": "img/icons/misc/search-doc.png",
+        "meta": "200kb",
+        "url": "javascript:;"
+      },
+      {
+        "name": "Avatar",
+        "subtitle": "By Ross Geller",
+        "src": "img/icons/misc/search-jpg.png",
+        "meta": "100kb",
+        "url": "javascript:;"
+      },
+      {
+        "name": "Data",
+        "subtitle": "By Erik Foreman",
+        "src": "img/icons/misc/search-xls.png",
+        "meta": "5kb",
+        "url": "javascript:;"
+      },
+      {
+        "name": "Gardening Guide",
+        "subtitle": "By Jerry Seinfeld",
+        "src": "img/icons/misc/search-doc.png",
+        "meta": "25kb",
+        "url": "javascript:;"
+      }
+    ],
+    "members": [
+      {
+        "name": "John Doe",
+        "subtitle": "Admin",
+        "src": "img/avatars/1.png",
+        "url": "app-user-view-account.html"
+      },
+      {
+        "name": "Micheal Clarke",
+        "subtitle": "Customer",
+        "src": "img/avatars/2.png",
+        "url": "app-user-view-account.html"
+      },
+      {
+        "name": "Melina Gibson",
+        "subtitle": "Staff",
+        "src": "img/avatars/5.png",
+        "url": "app-user-view-account.html"
+      },
+      {
+        "name": "Anna Strong",
+        "subtitle": "Staff",
+        "src": "img/avatars/7.png",
+        "url": "app-user-view-account.html"
+      },
+      {
+        "name": "Stephanie Gould",
+        "subtitle": "Customer",
+        "src": "img/avatars/3.png",
+        "url": "app-user-view-account.html"
+      },
+      {
+        "name": "David Budd",
+        "subtitle": "Admin",
+        "src": "img/avatars/10.png",
+        "url": "app-user-view-account.html"
+      },
+      {
+        "name": "Mark Shepiro",
+        "subtitle": "Admin",
+        "src": "img/avatars/12.png",
+        "url": "app-user-view-account.html"
+      }
+    ]
+  },
+  "suggestions": {
+    "Popular Searches": [
+      {
+        "name": "Analytics",
+        "icon": "tabler-smart-home",
+        "url": "index.html"
+      },
+      {
+        "name": "CRM",
+        "icon": "tabler-vector-bezier-circle",
+        "url": "dashboards-crm.html"
+      },
+      {
+        "name": "eCommerce",
+        "icon": "tabler-smart-home",
+        "url": "app-ecommerce-dashboard.html"
+      },
+      {
+        "name": "User List",
+        "icon": "tabler-list-numbers",
+        "url": "app-user-list.html"
+      }
+    ],
+    "Apps & Pages": [
+      {
+        "name": "Calendar",
+        "icon": "tabler-calendar",
+        "url": "app-calendar.html"
+      },
+      {
+        "name": "Invoice List",
+        "icon": "tabler-list-numbers",
+        "url": "app-invoice-list.html"
+      },
+      {
+        "name": "Account Settings",
+        "icon": "tabler-user",
+        "url": "pages-account-settings-account.html"
+      },
+      {
+        "name": "Dialog Examples",
+        "icon": "tabler-square",
+        "url": "modal-examples.html"
+      }
+    ],
+    "User Interface": [
+      {
+        "name": "Typography",
+        "icon": "tabler-typography",
+        "url": "ui-typography.html"
+      },
+      {
+        "name": "Advanced Cards",
+        "icon": "tabler-id",
+        "url": "cards-advance.html"
+      },
+      {
+        "name": "Tabler",
+        "icon": "tabler-pencil",
+        "url": "icons-tabler.html"
+      },
+      {
+        "name": "Widget Cards",
+        "icon": "tabler-id",
+        "url": "cards-advance.html"
+      }
+    ],
+    "Forms & Charts": [
+      {
+        "name": "Form Layouts",
+        "icon": "tabler-file",
+        "url": "form-layouts-vertical.html"
+      },
+      {
+        "name": "Form Validation",
+        "icon": "tabler-checkbox",
+        "url": "form-validation.html"
+      },
+      {
+        "name": "Form Wizard",
+        "icon": "tabler-text-wrap-disabled",
+        "url": "form-wizard-numbered.html"
+      },
+      {
+        "name": "E-Charts",
+        "icon": "tabler-chart-line",
+        "url": "charts-apex.html"
+      }
+    ]
+  }
+}

public/assets/json/user-list.json

@@ -0,0 +1,554 @@
+{
+  "data": [
+    {
+      "id": 1,
+      "full_name": "Galen Slixby",
+      "role": "Editor",
+      "username": "gslixby0",
+      "email": "gslixby0@abc.net.au",
+      "current_plan": "Enterprise",
+      "billing": "Manual - Credit Card",
+      "status": 3,
+      "avatar": ""
+    },
+    {
+      "id": 2,
+      "full_name": "Halsey Redmore",
+      "role": "Author",
+      "username": "hredmore1",
+      "email": "hredmore1@imgur.com",
+      "current_plan": "Team",
+      "billing": "Manual - Paypal",
+      "status": 1,
+      "avatar": "10.png"
+    },
+    {
+      "id": 3,
+      "full_name": "Marjory Sicely",
+      "role": "Maintainer",
+      "username": "msicely2",
+      "email": "msicely2@who.int",
+      "current_plan": "Enterprise",
+      "billing": "Auto Debit",
+      "status": 2,
+      "avatar": "1.png"
+    },
+    {
+      "id": 4,
+      "full_name": "Cyrill Risby",
+      "role": "Maintainer",
+      "username": "crisby3",
+      "email": "crisby3@wordpress.com",
+      "current_plan": "Team",
+      "billing": "Manual - Credit Card",
+      "status": 3,
+      "avatar": "9.png"
+    },
+    {
+      "id": 5,
+      "full_name": "Maggy Hurran",
+      "role": "Subscriber",
+      "username": "mhurran4",
+      "email": "mhurran4@yahoo.co.jp",
+      "current_plan": "Enterprise",
+      "billing": "Auto Debit",
+      "status": 1,
+      "avatar": "10.png"
+    },
+    {
+      "id": 6,
+      "full_name": "Silvain Halstead",
+      "role": "Author",
+      "username": "shalstead5",
+      "email": "shalstead5@shinystat.com",
+      "current_plan": "Company",
+      "billing": "Auto Debit",
+      "status": 2,
+      "avatar": ""
+    },
+    {
+      "id": 7,
+      "full_name": "Breena Gallemore",
+      "role": "Subscriber",
+      "username": "bgallemore6",
+      "email": "bgallemore6@boston.com",
+      "current_plan": "Company",
+      "billing": "Manual - Paypal",
+      "status": 1,
+      "avatar": ""
+    },
+    {
+      "id": 8,
+      "full_name": "Kathryne Liger",
+      "role": "Author",
+      "username": "kliger7",
+      "email": "kliger7@vinaora.com",
+      "current_plan": "Enterprise",
+      "billing": "Manual - Cash",
+      "status": 1,
+      "avatar": "9.png"
+    },
+    {
+      "id": 9,
+      "full_name": "Franz Scotfurth",
+      "role": "Subscriber",
+      "username": "fscotfurth8",
+      "email": "fscotfurth8@dailymotion.com",
+      "current_plan": "Team",
+      "billing": "Auto Debit",
+      "status": 1,
+      "avatar": "2.png"
+    },
+    {
+      "id": 10,
+      "full_name": "Jillene Bellany",
+      "role": "Maintainer",
+      "username": "jbellany9",
+      "email": "jbellany9@kickstarter.com",
+      "current_plan": "Company",
+      "billing": "Auto Debit",
+      "status": 3,
+      "avatar": "9.png"
+    },
+    {
+      "id": 11,
+      "full_name": "Jonah Wharlton",
+      "role": "Subscriber",
+      "username": "jwharltona",
+      "email": "jwharltona@oakley.com",
+      "current_plan": "Team",
+      "billing": "Manual - Paypal",
+      "status": 3,
+      "avatar": "4.png"
+    },
+    {
+      "id": 12,
+      "full_name": "Seth Hallam",
+      "role": "Subscriber",
+      "username": "shallamb",
+      "email": "shallamb@hugedomains.com",
+      "current_plan": "Team",
+      "billing": "Manual - Credit Card",
+      "status": 1,
+      "avatar": "5.png"
+    },
+    {
+      "id": 13,
+      "full_name": "Yoko Pottie",
+      "role": "Subscriber",
+      "username": "ypottiec",
+      "email": "ypottiec@privacy.gov.au",
+      "current_plan": "Basic",
+      "billing": "Auto Debit",
+      "status": 3,
+      "avatar": "7.png"
+    },
+    {
+      "id": 14,
+      "full_name": "Maximilianus Krause",
+      "role": "Author",
+      "username": "mkraused",
+      "email": "mkraused@stanford.edu",
+      "current_plan": "Team",
+      "billing": "Auto Debit",
+      "status": 2,
+      "avatar": "9.png"
+    },
+    {
+      "id": 15,
+      "full_name": "Zsazsa McCleverty",
+      "role": "Maintainer",
+      "username": "zmcclevertye",
+      "email": "zmcclevertye@soundcloud.com",
+      "current_plan": "Enterprise",
+      "billing": "Auto Debit",
+      "status": 2,
+      "avatar": "2.png"
+    },
+    {
+      "id": 16,
+      "full_name": "Bentlee Emblin",
+      "role": "Author",
+      "username": "bemblinf",
+      "email": "bemblinf@wired.com",
+      "current_plan": "Company",
+      "billing": "Auto Debit",
+      "status": 2,
+      "avatar": "6.png"
+    },
+    {
+      "id": 17,
+      "full_name": "Brockie Myles",
+      "role": "Maintainer",
+      "username": "bmylesg",
+      "email": "bmylesg@amazon.com",
+      "current_plan": "Basic",
+      "billing": "Manual - Paypal",
+      "status": 2,
+      "avatar": ""
+    },
+    {
+      "id": 18,
+      "full_name": "Bertha Biner",
+      "role": "Editor",
+      "username": "bbinerh",
+      "email": "bbinerh@mozilla.com",
+      "current_plan": "Team",
+      "billing": "Manual - Cash",
+      "status": 2,
+      "avatar": "7.png"
+    },
+    {
+      "id": 19,
+      "full_name": "Travus Bruntjen",
+      "role": "Admin",
+      "username": "tbruntjeni",
+      "email": "tbruntjeni@sitemeter.com",
+      "current_plan": "Enterprise",
+      "billing": "Manual - Cash",
+      "status": 2,
+      "avatar": ""
+    },
+    {
+      "id": 20,
+      "full_name": "Wesley Burland",
+      "role": "Editor",
+      "username": "wburlandj",
+      "email": "wburlandj@uiuc.edu",
+      "current_plan": "Team",
+      "billing": "Auto Debit",
+      "status": 3,
+      "avatar": "6.png"
+    },
+    {
+      "id": 21,
+      "full_name": "Stu Delamaine",
+      "role": "Author",
+      "username": "sdelamainek",
+      "email": "sdelamainek@who.int",
+      "current_plan": "Basic",
+      "billing": "Auto Debit",
+      "status": 1,
+      "avatar": "1.png"
+    },
+    {
+      "id": 22,
+      "full_name": "Jameson Lyster",
+      "role": "Editor",
+      "username": "jlysterl",
+      "email": "jlysterl@guardian.co.uk",
+      "current_plan": "Company",
+      "billing": "Auto Debit",
+      "status": 3,
+      "avatar": "8.png"
+    },
+    {
+      "id": 23,
+      "full_name": "Kare Skitterel",
+      "role": "Maintainer",
+      "username": "kskitterelm",
+      "email": "kskitterelm@washingtonpost.com",
+      "current_plan": "Basic",
+      "billing": "Manual - Paypal",
+      "status": 1,
+      "avatar": "3.png"
+    },
+    {
+      "id": 24,
+      "full_name": "Cleavland Hatherleigh",
+      "role": "Admin",
+      "username": "chatherleighn",
+      "email": "chatherleighn@washington.edu",
+      "current_plan": "Team",
+      "billing": "Manual - Paypal",
+      "status": 1,
+      "avatar": "2.png"
+    },
+    {
+      "id": 25,
+      "full_name": "Adeline Micco",
+      "role": "Admin",
+      "username": "amiccoo",
+      "email": "amiccoo@whitehouse.gov",
+      "current_plan": "Enterprise",
+      "billing": "Manual - Credit Card",
+      "status": 1,
+      "avatar": ""
+    },
+    {
+      "id": 26,
+      "full_name": "Hugh Hasson",
+      "role": "Admin",
+      "username": "hhassonp",
+      "email": "hhassonp@bizjournals.com",
+      "current_plan": "Basic",
+      "billing": "Manual - Cash",
+      "status": 3,
+      "avatar": "4.png"
+    },
+    {
+      "id": 27,
+      "full_name": "Germain Jacombs",
+      "role": "Editor",
+      "username": "gjacombsq",
+      "email": "gjacombsq@jigsy.com",
+      "current_plan": "Enterprise",
+      "billing": "Manual - Cash",
+      "status": 2,
+      "avatar": "10.png"
+    },
+    {
+      "id": 28,
+      "full_name": "Bree Kilday",
+      "role": "Maintainer",
+      "username": "bkildayr",
+      "email": "bkildayr@mashable.com",
+      "current_plan": "Team",
+      "billing": "Manual - Credit Card",
+      "status": 2,
+      "avatar": ""
+    },
+    {
+      "id": 29,
+      "full_name": "Candice Pinyon",
+      "role": "Maintainer",
+      "username": "cpinyons",
+      "email": "cpinyons@behance.net",
+      "current_plan": "Team",
+      "billing": "Auto Debit",
+      "status": 2,
+      "avatar": "7.png"
+    },
+    {
+      "id": 30,
+      "full_name": "Isabel Mallindine",
+      "role": "Subscriber",
+      "username": "imallindinet",
+      "email": "imallindinet@shinystat.com",
+      "current_plan": "Team",
+      "billing": "Manual - Credit Card",
+      "status": 1,
+      "avatar": ""
+    },
+    {
+      "id": 31,
+      "full_name": "Gwendolyn Meineken",
+      "role": "Admin",
+      "username": "gmeinekenu",
+      "email": "gmeinekenu@hc360.com",
+      "current_plan": "Basic",
+      "billing": "Manual - Cash",
+      "status": 1,
+      "avatar": "1.png"
+    },
+    {
+      "id": 32,
+      "full_name": "Rafaellle Snowball",
+      "role": "Editor",
+      "username": "rsnowballv",
+      "email": "rsnowballv@indiegogo.com",
+      "current_plan": "Basic",
+      "billing": "Manual - Paypal",
+      "status": 1,
+      "avatar": "5.png"
+    },
+    {
+      "id": 33,
+      "full_name": "Rochette Emer",
+      "role": "Admin",
+      "username": "remerw",
+      "email": "remerw@blogtalkradio.com",
+      "current_plan": "Basic",
+      "billing": "Auto Debit",
+      "status": 2,
+      "avatar": "8.png"
+    },
+    {
+      "id": 34,
+      "full_name": "Ophelie Fibbens",
+      "role": "Subscriber",
+      "username": "ofibbensx",
+      "email": "ofibbensx@booking.com",
+      "current_plan": "Company",
+      "billing": "Manual - Cash",
+      "status": 2,
+      "avatar": "4.png"
+    },
+    {
+      "id": 35,
+      "full_name": "Stephen MacGilfoyle",
+      "role": "Maintainer",
+      "username": "smacgilfoyley",
+      "email": "smacgilfoyley@bigcartel.com",
+      "current_plan": "Company",
+      "billing": "Manual - Paypal",
+      "status": 1,
+      "avatar": ""
+    },
+    {
+      "id": 36,
+      "full_name": "Bradan Rosebotham",
+      "role": "Subscriber",
+      "username": "brosebothamz",
+      "email": "brosebothamz@tripadvisor.com",
+      "current_plan": "Team",
+      "billing": "Manual - Paypal",
+      "status": 3,
+      "avatar": ""
+    },
+    {
+      "id": 37,
+      "full_name": "Skip Hebblethwaite",
+      "role": "Admin",
+      "username": "shebblethwaite10",
+      "email": "shebblethwaite10@arizona.edu",
+      "current_plan": "Company",
+      "billing": "Manual - Cash",
+      "status": 3,
+      "avatar": "9.png"
+    },
+    {
+      "id": 38,
+      "full_name": "Moritz Piccard",
+      "role": "Maintainer",
+      "username": "mpiccard11",
+      "email": "mpiccard11@vimeo.com",
+      "current_plan": "Enterprise",
+      "billing": "Manual - Credit Card",
+      "status": 3,
+      "avatar": "1.png"
+    },
+    {
+      "id": 39,
+      "full_name": "Tyne Widmore",
+      "role": "Subscriber",
+      "username": "twidmore12",
+      "email": "twidmore12@bravesites.com",
+      "current_plan": "Team",
+      "billing": "Manual - Cash",
+      "status": 1,
+      "avatar": ""
+    },
+    {
+      "id": 40,
+      "full_name": "Florenza Desporte",
+      "role": "Author",
+      "username": "fdesporte13",
+      "email": "fdesporte13@omniture.com",
+      "current_plan": "Company",
+      "billing": "Manual - Cash",
+      "status": 2,
+      "avatar": "6.png"
+    },
+    {
+      "id": 41,
+      "full_name": "Edwina Baldetti",
+      "role": "Maintainer",
+      "username": "ebaldetti14",
+      "email": "ebaldetti14@theguardian.com",
+      "current_plan": "Team",
+      "billing": "Manual - Credit Card",
+      "status": 1,
+      "avatar": ""
+    },
+    {
+      "id": 42,
+      "full_name": "Benedetto Rossiter",
+      "role": "Editor",
+      "username": "brossiter15",
+      "email": "brossiter15@craigslist.org",
+      "current_plan": "Team",
+      "billing": "Manual - Cash",
+      "status": 3,
+      "avatar": ""
+    },
+    {
+      "id": 43,
+      "full_name": "Micaela McNirlan",
+      "role": "Admin",
+      "username": "mmcnirlan16",
+      "email": "mmcnirlan16@hc360.com",
+      "current_plan": "Basic",
+      "billing": "Manual - Credit Card",
+      "status": 3,
+      "avatar": ""
+    },
+    {
+      "id": 44,
+      "full_name": "Vladamir Koschek",
+      "role": "Author",
+      "username": "vkoschek17",
+      "email": "vkoschek17@abc.net.au",
+      "current_plan": "Team",
+      "billing": "Manual - Paypal",
+      "status": 2,
+      "avatar": ""
+    },
+    {
+      "id": 45,
+      "full_name": "Corrie Perot",
+      "role": "Subscriber",
+      "username": "cperot18",
+      "email": "cperot18@goo.ne.jp",
+      "current_plan": "Team",
+      "billing": "Manual - Paypal",
+      "status": 1,
+      "avatar": "3.png"
+    },
+    {
+      "id": 46,
+      "full_name": "Saunder Offner",
+      "role": "Maintainer",
+      "username": "soffner19",
+      "email": "soffner19@mac.com",
+      "current_plan": "Enterprise",
+      "billing": "Auto Debit",
+      "status": 1,
+      "avatar": ""
+    },
+    {
+      "id": 47,
+      "full_name": "Karena Courtliff",
+      "role": "Admin",
+      "username": "kcourtliff1a",
+      "email": "kcourtliff1a@bbc.co.uk",
+      "current_plan": "Basic",
+      "billing": "Manual - Paypal",
+      "status": 2,
+      "avatar": "1.png"
+    },
+    {
+      "id": 48,
+      "full_name": "Onfre Wind",
+      "role": "Admin",
+      "username": "owind1b",
+      "email": "owind1b@yandex.ru",
+      "current_plan": "Basic",
+      "billing": "Manual - Paypal",
+      "status": 1,
+      "avatar": ""
+    },
+    {
+      "id": 49,
+      "full_name": "Paulie Durber",
+      "role": "Subscriber",
+      "username": "pdurber1c",
+      "email": "pdurber1c@gov.uk",
+      "current_plan": "Team",
+      "billing": "Manual - Cash",
+      "status": 3,
+      "avatar": ""
+    },
+    {
+      "id": 50,
+      "full_name": "Beverlie Krabbe",
+      "role": "Editor",
+      "username": "bkrabbe1d",
+      "email": "bkrabbe1d@home.pl",
+      "current_plan": "Company",
+      "billing": "Auto Debit",
+      "status": 2,
+      "avatar": "9.png"
+    }
+  ]
+}

public/assets/vendor/css/pages/cards-advance.css

@@ -0,0 +1,45 @@
+/* (C) */
+.swiper-container.swiper-card-advance-bg {
+  border-radius: 0.375rem;
+  background-color: var(--bs-primary);
+  box-shadow: var(--bs-card-box-shadow);
+}
+.swiper-container .swiper-wrapper .swiper-slide {
+  padding: 1.5rem;
+  white-space: nowrap;
+}
+.swiper-container .swiper-wrapper .swiper-slide .website-analytics-text-bg {
+  border-radius: 0.375rem;
+  background-color: color-mix(in sRGB, var(--bs-primary) 85%, var(--bs-pure-black));
+  min-inline-size: 48px;
+  padding-block: 0.293rem;
+  padding-inline: 0.5rem;
+  text-align: center;
+}
+.swiper-container .swiper-wrapper .swiper-slide .card-website-analytics-img {
+  filter: drop-shadow(rgba(var(--bs-pure-black-rgb), 0.5) 0 4px 60px);
+}
+.swiper-container.swiper-container-horizontal > .swiper-pagination-bullets {
+  inset-block: 1rem auto;
+  inset-inline: auto 1rem;
+  text-align: end;
+}
+.swiper-container.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
+  background: rgba(var(--bs-white-rgb), 0.4) !important;
+  opacity: unset;
+}
+.swiper-container.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active {
+  background: var(--bs-white) !important;
+}
+
+@media (min-width: 768px) {
+  .swiper-container .swiper-wrapper .swiper-slide .card-website-analytics-img {
+    position: absolute;
+    inset-inline-end: 3%;
+  }
+}
+@media (min-width: 1400px) {
+  .swiper-container .swiper-wrapper .swiper-slide .card-website-analytics-img {
+    inset-inline-end: 8%;
+  }
+}

public/assets/vendor/css/pages/page-auth.css

@@ -0,0 +1,140 @@
+/* Authentication
+******************************************************************************* */
+/* (C) */
+.authentication-wrapper {
+  --bs-auth-basic-inner-max-width: 460px;
+  display: flex;
+  flex-basis: 100%;
+  inline-size: 100%;
+  min-block-size: 100vh;
+  /* For two-steps auth */
+}
+.authentication-wrapper .authentication-bg {
+  background-color: var(--bs-paper-bg);
+}
+@media (max-width: 1199.98px) {
+  .authentication-wrapper:not(.authentication-basic) .authentication-inner {
+    block-size: 100vh;
+  }
+}
+.authentication-wrapper .authentication-inner {
+  block-size: 100%;
+  inline-size: 100%;
+  margin-block: auto;
+  margin-inline: 0;
+}
+.authentication-wrapper .authentication-inner .auth-cover-bg {
+  position: relative;
+  block-size: 100vh;
+  inline-size: 100%;
+}
+.authentication-wrapper .authentication-inner .auth-cover-bg .auth-illustration {
+  z-index: 1;
+  max-block-size: 65%;
+  max-inline-size: 65%;
+}
+.authentication-wrapper .authentication-inner .platform-bg {
+  position: absolute;
+  block-size: 35%;
+  inline-size: 100%;
+  inset-block-end: 0%;
+  inset-inline-start: 0%;
+}
+.authentication-wrapper .authentication-inner .auth-multisteps-bg-height {
+  block-size: 100vh;
+}
+.authentication-wrapper .authentication-inner .auth-multisteps-bg-height > img:first-child {
+  z-index: 1;
+}
+.authentication-wrapper.authentication-basic {
+  align-items: center;
+  justify-content: center;
+}
+.authentication-wrapper.authentication-basic .authentication-inner {
+  position: relative;
+  max-inline-size: var(--bs-auth-basic-inner-max-width);
+}
+.authentication-wrapper.authentication-basic .authentication-inner::before {
+  position: absolute;
+  background: var(--bs-primary);
+  block-size: 233px;
+  content: " ";
+  inline-size: 238px;
+  inset-block-start: -35px;
+  inset-inline-start: -45px;
+  mask-image: url("data:image/svg+xml,%3Csvg width='238' height='233' viewBox='0 0 238 233' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='88.5605' y='0.700195' width='149' height='149' rx='19.5' stroke='%237367F0' stroke-opacity='0.16'/%3E%3Crect x='0.621094' y='33.761' width='200' height='200' rx='10' fill='%237367F0' fill-opacity='0.08'/%3E%3C/svg%3E%0A");
+  mask-repeat: no-repeat;
+  mask-size: 100% 100%;
+}
+@media (max-width: 575.98px) {
+  .authentication-wrapper.authentication-basic .authentication-inner::before {
+    display: none;
+  }
+}
+:dir(rtl) .authentication-wrapper.authentication-basic .authentication-inner::before {
+  inset-inline-start: -70px;
+}
+.authentication-wrapper.authentication-basic .authentication-inner::after {
+  position: absolute;
+  z-index: -1;
+  background: var(--bs-primary);
+  block-size: 180px;
+  content: " ";
+  inline-size: 180px;
+  inset-block-end: -30px;
+  inset-inline-end: -56px;
+  mask-image: url("data:image/svg+xml,%3Csvg width='180' height='180' viewBox='0 0 180 180' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1.30469' y='1.44312' width='178' height='178' rx='19' stroke='%237367F0' stroke-opacity='0.16' stroke-width='2' stroke-dasharray='8 8'/%3E%3Crect x='22.8047' y='22.9431' width='135' height='135' rx='10' fill='%237367F0' fill-opacity='0.08'/%3E%3C/svg%3E");
+  mask-repeat: no-repeat;
+  mask-size: 100% 100%;
+}
+@media (max-width: 575.98px) {
+  .authentication-wrapper.authentication-basic .authentication-inner::after {
+    display: none;
+  }
+}
+.authentication-wrapper.authentication-basic .authentication-inner .card {
+  z-index: 1;
+}
+@media (min-width: 576px) {
+  .authentication-wrapper.authentication-basic .authentication-inner .card {
+    padding: 1.5rem;
+  }
+}
+.authentication-wrapper.authentication-basic .authentication-inner .card .app-brand {
+  margin-block-end: 1.5rem;
+}
+.authentication-wrapper .auth-input-wrapper .auth-input {
+  font-size: 150%;
+  max-inline-size: 50px;
+  padding-inline: 0.4rem;
+}
+@media (max-width: 575.98px) {
+  .authentication-wrapper .auth-input-wrapper .auth-input {
+    font-size: 1.125rem;
+  }
+}
+
+/* app-brand at he corner of page */
+.auth-cover-brand {
+  position: absolute;
+  z-index: 1;
+  inset-block-start: 2.5rem;
+  inset-inline-start: 1.5rem;
+}
+
+/* Two Steps Verification
+? Used for validation specific style as we have validated hidden field */
+#twoStepsForm .fv-plugins-bootstrap5-row-invalid .form-control {
+  border-width: 2px;
+  border-color: #ff4c51;
+  box-shadow: none;
+}
+
+@media (max-width: 575.98px) {
+  .numeral-mask-wrapper .numeral-mask {
+    padding: 0;
+  }
+  .numeral-mask {
+    margin-inline: 1px;
+  }
+}

public/assets/vendor/libs/@form-validation/form-validation.css

@@ -0,0 +1,84 @@
+.fv-sr-only {
+  display: none;
+}
+
+.fv-plugins-framework input::-ms-clear,
+.fv-plugins-framework textarea::-ms-clear {
+  display: none;
+  height: 0;
+  width: 0;
+}
+
+.fv-plugins-message-container--enabled {
+  display: block;
+}
+
+.fv-plugins-message-container--disabled {
+  display: none;
+}
+
+.fv-plugins-bootstrap5 {
+  /* Support floating label */
+  /* For horizontal form */
+  /* Stacked form */
+  /* Inline form */
+}
+
+.fv-plugins-bootstrap5 .fv-plugins-bootstrap5-row-invalid .fv-plugins-icon {
+  color: #dc3545;
+}
+
+.fv-plugins-bootstrap5 .fv-plugins-bootstrap5-row-valid .fv-plugins-icon {
+  color: #198754;
+}
+
+.fv-plugins-bootstrap5 .fv-plugins-icon {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  height: 38px;
+  width: 38px;
+}
+
+.fv-plugins-bootstrap5 .input-group ~ .fv-plugins-icon {
+  z-index: 3;
+}
+
+.fv-plugins-bootstrap5 .fv-plugins-icon-input-group {
+  right: -38px;
+}
+
+.fv-plugins-bootstrap5 .form-floating .fv-plugins-icon {
+  height: 58px;
+}
+
+.fv-plugins-bootstrap5 .row .fv-plugins-icon {
+  right: 12px;
+}
+
+.fv-plugins-bootstrap5 .row .fv-plugins-icon-check {
+  top: -7px; /* labelHeight/2 - iconHeight/2 */
+}
+
+.fv-plugins-bootstrap5:not(.fv-plugins-bootstrap5-form-inline) label ~ .fv-plugins-icon {
+  top: 32px;
+}
+
+.fv-plugins-bootstrap5:not(.fv-plugins-bootstrap5-form-inline) label ~ .fv-plugins-icon-check {
+  top: 25px;
+}
+
+.fv-plugins-bootstrap5:not(.fv-plugins-bootstrap5-form-inline) label.sr-only ~ .fv-plugins-icon-check {
+  top: -7px;
+}
+
+.fv-plugins-bootstrap5.fv-plugins-bootstrap5-form-inline .fv-plugins-icon {
+  right: calc(var(--bs-gutter-x, 1.5rem) / 2);
+}
+
+.fv-plugins-bootstrap5 .form-select.fv-plugins-icon-input.is-valid,
+.fv-plugins-bootstrap5 .form-select.fv-plugins-icon-input.is-invalid,
+.fv-plugins-bootstrap5 .form-control.fv-plugins-icon-input.is-valid,
+.fv-plugins-bootstrap5 .form-control.fv-plugins-icon-input.is-invalid {
+  background-image: none;
+}

public/assets/vendor/libs/apex-charts/apex-charts.css

@@ -0,0 +1,752 @@
+/**
+* Apex Charts
+*/
+/* (C) */
+@keyframes opaque {
+  0% {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes resizeanim {
+  0%, to {
+    opacity: 0;
+  }
+}
+.apexcharts-canvas {
+  position: relative;
+  direction: ltr !important;
+  user-select: none;
+}
+
+.apexcharts-canvas ::-webkit-scrollbar {
+  -webkit-appearance: none;
+  width: 6px;
+}
+
+.apexcharts-canvas ::-webkit-scrollbar-thumb {
+  border-radius: 4px;
+  background-color: rgba(0, 0, 0, 0.5);
+  box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
+  -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
+}
+
+.apexcharts-inner {
+  position: relative;
+}
+
+.apexcharts-text tspan {
+  font-family: inherit;
+}
+
+rect.legend-mouseover-inactive,
+.legend-mouseover-inactive rect,
+.legend-mouseover-inactive path,
+.legend-mouseover-inactive circle,
+.legend-mouseover-inactive line,
+.legend-mouseover-inactive text.apexcharts-yaxis-title-text,
+.legend-mouseover-inactive text.apexcharts-yaxis-label {
+  transition: 0.15s ease all;
+  opacity: 0.2;
+}
+
+.apexcharts-legend-text {
+  padding-left: 15px;
+  margin-left: -15px;
+}
+
+.apexcharts-series-collapsed {
+  opacity: 0;
+}
+
+.apexcharts-tooltip {
+  border-radius: 5px;
+  box-shadow: 2px 2px 6px -4px #999;
+  cursor: default;
+  font-size: 14px;
+  left: 62px;
+  opacity: 0;
+  pointer-events: none;
+  position: absolute;
+  top: 20px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  white-space: nowrap;
+  z-index: 12;
+  transition: 0.15s ease all;
+}
+
+.apexcharts-tooltip.apexcharts-active {
+  opacity: 1;
+  transition: 0.15s ease all;
+}
+
+.apexcharts-tooltip.apexcharts-theme-light {
+  border: 1px solid #e3e3e3;
+  background: rgba(255, 255, 255, 0.96);
+}
+
+.apexcharts-tooltip.apexcharts-theme-dark {
+  color: #fff;
+  background: rgba(30, 30, 30, 0.8);
+}
+
+.apexcharts-tooltip * {
+  font-family: inherit;
+}
+
+.apexcharts-tooltip-title {
+  padding: 6px;
+  font-size: 15px;
+  margin-bottom: 4px;
+}
+
+.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
+  background: #eceff1;
+  border-bottom: 1px solid #ddd;
+}
+
+.apexcharts-tooltip.apexcharts-theme-dark .apexcharts-tooltip-title {
+  background: rgba(0, 0, 0, 0.7);
+  border-bottom: 1px solid #333;
+}
+
+.apexcharts-tooltip-text-goals-value,
+.apexcharts-tooltip-text-y-value,
+.apexcharts-tooltip-text-z-value {
+  display: inline-block;
+  margin-left: 5px;
+  font-weight: 600;
+}
+
+.apexcharts-tooltip-text-goals-label:empty,
+.apexcharts-tooltip-text-goals-value:empty,
+.apexcharts-tooltip-text-y-label:empty,
+.apexcharts-tooltip-text-y-value:empty,
+.apexcharts-tooltip-text-z-value:empty,
+.apexcharts-tooltip-title:empty {
+  display: none;
+}
+
+.apexcharts-tooltip-text-goals-label,
+.apexcharts-tooltip-text-goals-value {
+  padding: 6px 0 5px;
+}
+
+.apexcharts-tooltip-goals-group,
+.apexcharts-tooltip-text-goals-label,
+.apexcharts-tooltip-text-goals-value {
+  display: flex;
+}
+
+.apexcharts-tooltip-text-goals-label:not(:empty),
+.apexcharts-tooltip-text-goals-value:not(:empty) {
+  margin-top: -6px;
+}
+
+.apexcharts-tooltip-marker {
+  width: 12px;
+  height: 12px;
+  position: relative;
+  top: 0;
+  margin-right: 10px;
+  border-radius: 50%;
+}
+
+.apexcharts-tooltip-series-group {
+  padding: 0 10px;
+  display: none;
+  text-align: left;
+  justify-content: left;
+  align-items: center;
+}
+
+.apexcharts-tooltip-series-group.apexcharts-active .apexcharts-tooltip-marker {
+  opacity: 1;
+}
+
+.apexcharts-tooltip-series-group.apexcharts-active,
+.apexcharts-tooltip-series-group:last-child {
+  padding-bottom: 4px;
+}
+
+.apexcharts-tooltip-y-group {
+  padding: 6px 0 5px;
+}
+
+.apexcharts-custom-tooltip,
+.apexcharts-tooltip-box {
+  padding: 4px 8px;
+}
+
+.apexcharts-tooltip-boxPlot {
+  display: flex;
+  flex-direction: column-reverse;
+}
+
+.apexcharts-tooltip-box > div {
+  margin: 4px 0;
+}
+
+.apexcharts-tooltip-box span.value {
+  font-weight: 700;
+}
+
+.apexcharts-tooltip-rangebar {
+  padding: 5px 8px;
+}
+
+.apexcharts-tooltip-rangebar .category {
+  font-weight: 600;
+  color: #777;
+}
+
+.apexcharts-tooltip-rangebar .series-name {
+  font-weight: 700;
+  display: block;
+  margin-bottom: 5px;
+}
+
+.apexcharts-xaxistooltip,
+.apexcharts-yaxistooltip {
+  opacity: 0;
+  pointer-events: none;
+  color: #373d3f;
+  font-size: 13px;
+  text-align: center;
+  border-radius: 2px;
+  position: absolute;
+  z-index: 10;
+  background: #eceff1;
+  border: 1px solid #90a4ae;
+}
+
+.apexcharts-xaxistooltip {
+  padding: 9px 10px;
+  transition: 0.15s ease all;
+}
+
+.apexcharts-xaxistooltip.apexcharts-theme-dark {
+  background: rgba(0, 0, 0, 0.7);
+  border: 1px solid rgba(0, 0, 0, 0.5);
+  color: #fff;
+}
+
+.apexcharts-xaxistooltip:after,
+.apexcharts-xaxistooltip:before {
+  left: 50%;
+  border: solid transparent;
+  content: " ";
+  height: 0;
+  width: 0;
+  position: absolute;
+  pointer-events: none;
+}
+
+.apexcharts-xaxistooltip:after {
+  border-color: transparent;
+  border-width: 6px;
+  margin-left: -6px;
+}
+
+.apexcharts-xaxistooltip:before {
+  border-color: transparent;
+  border-width: 7px;
+  margin-left: -7px;
+}
+
+.apexcharts-xaxistooltip-bottom:after,
+.apexcharts-xaxistooltip-bottom:before {
+  bottom: 100%;
+}
+
+.apexcharts-xaxistooltip-top:after,
+.apexcharts-xaxistooltip-top:before {
+  top: 100%;
+}
+
+.apexcharts-xaxistooltip-bottom:after {
+  border-bottom-color: #eceff1;
+}
+
+.apexcharts-xaxistooltip-bottom:before {
+  border-bottom-color: #90a4ae;
+}
+
+.apexcharts-xaxistooltip-bottom.apexcharts-theme-dark:after,
+.apexcharts-xaxistooltip-bottom.apexcharts-theme-dark:before {
+  border-bottom-color: rgba(0, 0, 0, 0.5);
+}
+
+.apexcharts-xaxistooltip-top:after {
+  border-top-color: #eceff1;
+}
+
+.apexcharts-xaxistooltip-top:before {
+  border-top-color: #90a4ae;
+}
+
+.apexcharts-xaxistooltip-top.apexcharts-theme-dark:after,
+.apexcharts-xaxistooltip-top.apexcharts-theme-dark:before {
+  border-top-color: rgba(0, 0, 0, 0.5);
+}
+
+.apexcharts-xaxistooltip.apexcharts-active {
+  opacity: 1;
+  transition: 0.15s ease all;
+}
+
+.apexcharts-yaxistooltip {
+  padding: 4px 10px;
+}
+
+.apexcharts-yaxistooltip.apexcharts-theme-dark {
+  background: rgba(0, 0, 0, 0.7);
+  border: 1px solid rgba(0, 0, 0, 0.5);
+  color: #fff;
+}
+
+.apexcharts-yaxistooltip:after,
+.apexcharts-yaxistooltip:before {
+  top: 50%;
+  border: solid transparent;
+  content: " ";
+  height: 0;
+  width: 0;
+  position: absolute;
+  pointer-events: none;
+}
+
+.apexcharts-yaxistooltip:after {
+  border-color: transparent;
+  border-width: 6px;
+  margin-top: -6px;
+}
+
+.apexcharts-yaxistooltip:before {
+  border-color: transparent;
+  border-width: 7px;
+  margin-top: -7px;
+}
+
+.apexcharts-yaxistooltip-left:after,
+.apexcharts-yaxistooltip-left:before {
+  left: 100%;
+}
+
+.apexcharts-yaxistooltip-right:after,
+.apexcharts-yaxistooltip-right:before {
+  right: 100%;
+}
+
+.apexcharts-yaxistooltip-left:after {
+  border-left-color: #eceff1;
+}
+
+.apexcharts-yaxistooltip-left:before {
+  border-left-color: #90a4ae;
+}
+
+.apexcharts-yaxistooltip-left.apexcharts-theme-dark:after,
+.apexcharts-yaxistooltip-left.apexcharts-theme-dark:before {
+  border-left-color: rgba(0, 0, 0, 0.5);
+}
+
+.apexcharts-yaxistooltip-right:after {
+  border-right-color: #eceff1;
+}
+
+.apexcharts-yaxistooltip-right:before {
+  border-right-color: #90a4ae;
+}
+
+.apexcharts-yaxistooltip-right.apexcharts-theme-dark:after,
+.apexcharts-yaxistooltip-right.apexcharts-theme-dark:before {
+  border-right-color: rgba(0, 0, 0, 0.5);
+}
+
+.apexcharts-yaxistooltip.apexcharts-active {
+  opacity: 1;
+}
+
+.apexcharts-yaxistooltip-hidden {
+  display: none;
+}
+
+.apexcharts-xcrosshairs,
+.apexcharts-ycrosshairs {
+  pointer-events: none;
+  opacity: 0;
+  transition: 0.15s ease all;
+}
+
+.apexcharts-xcrosshairs.apexcharts-active,
+.apexcharts-ycrosshairs.apexcharts-active {
+  opacity: 1;
+  transition: 0.15s ease all;
+}
+
+.apexcharts-ycrosshairs-hidden {
+  opacity: 0;
+}
+
+.apexcharts-selection-rect {
+  cursor: move;
+}
+
+.svg_select_shape {
+  stroke-width: 1;
+  stroke-dasharray: 10 10;
+  stroke: black;
+  stroke-opacity: 0.1;
+  pointer-events: none;
+  fill: none;
+}
+
+.svg_select_handle {
+  stroke-width: 3;
+  stroke: black;
+  fill: none;
+}
+
+.svg_select_handle_r {
+  cursor: e-resize;
+}
+
+.svg_select_handle_l {
+  cursor: w-resize;
+}
+
+.apexcharts-svg.apexcharts-zoomable.hovering-zoom {
+  cursor: crosshair;
+}
+
+.apexcharts-svg.apexcharts-zoomable.hovering-pan {
+  cursor: move;
+}
+
+.apexcharts-menu-icon,
+.apexcharts-pan-icon,
+.apexcharts-reset-icon,
+.apexcharts-selection-icon,
+.apexcharts-toolbar-custom-icon,
+.apexcharts-zoom-icon,
+.apexcharts-zoomin-icon,
+.apexcharts-zoomout-icon {
+  cursor: pointer;
+  width: 20px;
+  height: 20px;
+  line-height: 24px;
+  color: #6e8192;
+  text-align: center;
+}
+
+.apexcharts-menu-icon svg,
+.apexcharts-reset-icon svg,
+.apexcharts-zoom-icon svg,
+.apexcharts-zoomin-icon svg,
+.apexcharts-zoomout-icon svg {
+  fill: #6e8192;
+}
+
+.apexcharts-selection-icon svg {
+  fill: #444;
+  transform: scale(0.76);
+}
+
+.apexcharts-theme-dark .apexcharts-menu-icon svg,
+.apexcharts-theme-dark .apexcharts-pan-icon svg,
+.apexcharts-theme-dark .apexcharts-reset-icon svg,
+.apexcharts-theme-dark .apexcharts-selection-icon svg,
+.apexcharts-theme-dark .apexcharts-toolbar-custom-icon svg,
+.apexcharts-theme-dark .apexcharts-zoom-icon svg,
+.apexcharts-theme-dark .apexcharts-zoomin-icon svg,
+.apexcharts-theme-dark .apexcharts-zoomout-icon svg {
+  fill: #f3f4f5;
+}
+
+.apexcharts-canvas .apexcharts-reset-zoom-icon.apexcharts-selected svg,
+.apexcharts-canvas .apexcharts-selection-icon.apexcharts-selected svg,
+.apexcharts-canvas .apexcharts-zoom-icon.apexcharts-selected svg {
+  fill: #008ffb;
+}
+
+.apexcharts-theme-light .apexcharts-menu-icon:hover svg,
+.apexcharts-theme-light .apexcharts-reset-icon:hover svg,
+.apexcharts-theme-light .apexcharts-selection-icon:not(.apexcharts-selected):hover svg,
+.apexcharts-theme-light .apexcharts-zoom-icon:not(.apexcharts-selected):hover svg,
+.apexcharts-theme-light .apexcharts-zoomin-icon:hover svg,
+.apexcharts-theme-light .apexcharts-zoomout-icon:hover svg {
+  fill: #333;
+}
+
+.apexcharts-menu-icon,
+.apexcharts-selection-icon {
+  position: relative;
+}
+
+.apexcharts-reset-icon {
+  margin-left: 5px;
+}
+
+.apexcharts-menu-icon,
+.apexcharts-reset-icon,
+.apexcharts-zoom-icon {
+  transform: scale(0.85);
+}
+
+.apexcharts-zoomin-icon,
+.apexcharts-zoomout-icon {
+  transform: scale(0.7);
+}
+
+.apexcharts-zoomout-icon {
+  margin-right: 3px;
+}
+
+.apexcharts-pan-icon {
+  transform: scale(0.62);
+  position: relative;
+  left: 1px;
+  top: 0;
+}
+
+.apexcharts-pan-icon svg {
+  fill: #fff;
+  stroke: #6e8192;
+  stroke-width: 2;
+}
+
+.apexcharts-pan-icon.apexcharts-selected svg {
+  stroke: #008ffb;
+}
+
+.apexcharts-pan-icon:not(.apexcharts-selected):hover svg {
+  stroke: #333;
+}
+
+.apexcharts-toolbar {
+  position: absolute;
+  z-index: 11;
+  max-width: 176px;
+  text-align: right;
+  border-radius: 3px;
+  padding: 0 6px 2px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.apexcharts-menu {
+  background: #fff;
+  position: absolute;
+  top: 100%;
+  border: 1px solid #ddd;
+  border-radius: 3px;
+  padding: 3px;
+  right: 10px;
+  opacity: 0;
+  min-width: 110px;
+  transition: 0.15s ease all;
+  pointer-events: none;
+}
+
+.apexcharts-menu.apexcharts-menu-open {
+  opacity: 1;
+  pointer-events: all;
+  transition: 0.15s ease all;
+}
+
+.apexcharts-menu-item {
+  padding: 6px 7px;
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.apexcharts-theme-light .apexcharts-menu-item:hover {
+  background: #eee;
+}
+
+.apexcharts-theme-dark .apexcharts-menu {
+  background: rgba(0, 0, 0, 0.7);
+  color: #fff;
+}
+
+@media screen and (min-width: 768px) {
+  .apexcharts-canvas:hover .apexcharts-toolbar {
+    opacity: 1;
+  }
+}
+.apexcharts-canvas .apexcharts-element-hidden,
+.apexcharts-datalabel.apexcharts-element-hidden,
+.apexcharts-hide .apexcharts-series-points {
+  opacity: 0;
+}
+
+.apexcharts-hidden-element-shown {
+  opacity: 1;
+  transition: 0.25s ease all;
+}
+
+.apexcharts-datalabel,
+.apexcharts-datalabel-label,
+.apexcharts-datalabel-value,
+.apexcharts-datalabels,
+.apexcharts-pie-label {
+  cursor: default;
+  pointer-events: none;
+}
+
+.apexcharts-pie-label-delay {
+  opacity: 0;
+  animation-name: opaque;
+  animation-duration: 0.3s;
+  animation-fill-mode: forwards;
+  animation-timing-function: ease;
+}
+
+.apexcharts-radialbar-label {
+  cursor: pointer;
+}
+
+.apexcharts-annotation-rect,
+.apexcharts-area-series .apexcharts-area,
+.apexcharts-gridline,
+.apexcharts-line,
+.apexcharts-point-annotation-label,
+.apexcharts-radar-series path:not(.apexcharts-marker),
+.apexcharts-radar-series polygon,
+.apexcharts-toolbar svg,
+.apexcharts-tooltip .apexcharts-marker,
+.apexcharts-xaxis-annotation-label,
+.apexcharts-yaxis-annotation-label,
+.apexcharts-zoom-rect,
+.no-pointer-events {
+  pointer-events: none;
+}
+
+.apexcharts-tooltip-active .apexcharts-marker {
+  transition: 0.15s ease all;
+}
+
+.resize-triggers {
+  animation: 1ms resizeanim;
+  visibility: hidden;
+  opacity: 0;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+}
+
+.contract-trigger:before,
+.resize-triggers,
+.resize-triggers > div {
+  content: " ";
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.resize-triggers > div {
+  height: 100%;
+  width: 100%;
+  background: #eee;
+  overflow: auto;
+}
+
+.contract-trigger:before {
+  overflow: hidden;
+  width: 200%;
+  height: 200%;
+}
+
+.apexcharts-bar-goals-markers {
+  pointer-events: none;
+}
+
+.apexcharts-bar-shadows {
+  pointer-events: none;
+}
+
+.apexcharts-rangebar-goals-markers {
+  pointer-events: none;
+}
+
+.apexcharts-canvas .apexcharts-tooltip {
+  box-shadow: var(--bs-box-shadow);
+}
+.apexcharts-canvas .apexcharts-tooltip.apexcharts-theme-light {
+  border-color: var(--bs-border-color);
+  background: var(--bs-paper-bg);
+  color: var(--bs-heading-color);
+}
+.apexcharts-canvas .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
+  background: var(--bs-paper-bg);
+  border-block-end-color: var(--bs-border-color);
+  font-family: var(--bs-font-sans-serif) !important;
+  font-weight: 500;
+}
+.apexcharts-canvas .apexcharts-tooltip.apexcharts-theme-dark {
+  background: transparent;
+}
+.apexcharts-canvas .apexcharts-xaxistooltip,
+.apexcharts-canvas .apexcharts-yaxistooltip {
+  border-color: var(--bs-border-color);
+  background: var(--bs-paper-bg);
+  color: var(--bs-heading-color);
+}
+.apexcharts-canvas .apexcharts-xaxistooltip.apexcharts-xaxistooltip-bottom::after, .apexcharts-canvas .apexcharts-xaxistooltip.apexcharts-yaxistooltip-bottom::after,
+.apexcharts-canvas .apexcharts-yaxistooltip.apexcharts-xaxistooltip-bottom::after,
+.apexcharts-canvas .apexcharts-yaxistooltip.apexcharts-yaxistooltip-bottom::after {
+  border-block-end-color: var(--bs-paper-bg);
+}
+.apexcharts-canvas .apexcharts-xaxistooltip.apexcharts-xaxistooltip-bottom::before, .apexcharts-canvas .apexcharts-xaxistooltip.apexcharts-yaxistooltip-bottom::before,
+.apexcharts-canvas .apexcharts-yaxistooltip.apexcharts-xaxistooltip-bottom::before,
+.apexcharts-canvas .apexcharts-yaxistooltip.apexcharts-yaxistooltip-bottom::before {
+  border-block-end-color: var(--bs-border-color);
+}
+.apexcharts-canvas .apexcharts-xaxistooltip.apexcharts-xaxistooltip-left::after, .apexcharts-canvas .apexcharts-xaxistooltip.apexcharts-yaxistooltip-left::after,
+.apexcharts-canvas .apexcharts-yaxistooltip.apexcharts-xaxistooltip-left::after,
+.apexcharts-canvas .apexcharts-yaxistooltip.apexcharts-yaxistooltip-left::after {
+  border-inline-start-color: var(--bs-paper-bg);
+}
+.apexcharts-canvas .apexcharts-xaxistooltip.apexcharts-xaxistooltip-left::before, .apexcharts-canvas .apexcharts-xaxistooltip.apexcharts-yaxistooltip-left::before,
+.apexcharts-canvas .apexcharts-yaxistooltip.apexcharts-xaxistooltip-left::before,
+.apexcharts-canvas .apexcharts-yaxistooltip.apexcharts-yaxistooltip-left::before {
+  border-inline-start-color: var(--bs-border-color);
+}
+.apexcharts-canvas .apexcharts-xaxistooltip.apexcharts-xaxistooltip-right::after, .apexcharts-canvas .apexcharts-xaxistooltip.apexcharts-yaxistooltip-right::after,
+.apexcharts-canvas .apexcharts-yaxistooltip.apexcharts-xaxistooltip-right::after,
+.apexcharts-canvas .apexcharts-yaxistooltip.apexcharts-yaxistooltip-right::after {
+  border-inline-end-color: var(--bs-paper-bg);
+}
+.apexcharts-canvas .apexcharts-xaxistooltip.apexcharts-xaxistooltip-right::before, .apexcharts-canvas .apexcharts-xaxistooltip.apexcharts-yaxistooltip-right::before,
+.apexcharts-canvas .apexcharts-yaxistooltip.apexcharts-xaxistooltip-right::before,
+.apexcharts-canvas .apexcharts-yaxistooltip.apexcharts-yaxistooltip-right::before {
+  border-inline-end-color: var(--bs-border-color);
+}
+.apexcharts-canvas .apexcharts-xaxistooltip.apexcharts-xaxistooltip-top::after, .apexcharts-canvas .apexcharts-xaxistooltip.apexcharts-yaxistooltip-top::after,
+.apexcharts-canvas .apexcharts-yaxistooltip.apexcharts-xaxistooltip-top::after,
+.apexcharts-canvas .apexcharts-yaxistooltip.apexcharts-yaxistooltip-top::after {
+  border-block-start-color: var(--bs-paper-bg);
+}
+.apexcharts-canvas .apexcharts-xaxistooltip.apexcharts-xaxistooltip-top::before, .apexcharts-canvas .apexcharts-xaxistooltip.apexcharts-yaxistooltip-top::before,
+.apexcharts-canvas .apexcharts-yaxistooltip.apexcharts-xaxistooltip-top::before,
+.apexcharts-canvas .apexcharts-yaxistooltip.apexcharts-yaxistooltip-top::before {
+  border-block-start-color: var(--bs-border-color);
+}
+.apexcharts-canvas .apexcharts-tooltip-text {
+  font-family: var(--bs-font-sans-serif) !important;
+}
+.apexcharts-canvas .apexcharts-legend-marker,
+.apexcharts-canvas .apexcharts-tooltip-marker {
+  margin-inline: 0 0.1875rem;
+}
+
+:dir(rtl) .apexcharts-canvas .apexcharts-legend {
+  direction: rtl !important;
+}

public/assets/vendor/libs/datatables-bs5/datatables.bootstrap5.css

@@ -0,0 +1,834 @@
+@charset "UTF-8";
+/* (C) */
+:root {
+  --dt-row-selected: 13, 110, 253;
+  --dt-row-selected-text: 255, 255, 255;
+  --dt-row-selected-link: 9, 10, 11;
+  --dt-row-stripe: 0, 0, 0;
+  --dt-row-hover: 0, 0, 0;
+  --dt-column-ordering: 0, 0, 0;
+  --dt-html-background: white;
+}
+
+:root.dark {
+  --dt-html-background: rgb(33, 37, 41);
+}
+
+table.dataTable td.dt-control {
+  text-align: center;
+  cursor: pointer;
+}
+
+table.dataTable td.dt-control:before {
+  display: inline-block;
+  box-sizing: border-box;
+  content: "";
+  border-top: 5px solid transparent;
+  border-left: 10px solid rgba(0, 0, 0, 0.5);
+  border-bottom: 5px solid transparent;
+  border-right: 0px solid transparent;
+}
+
+table.dataTable tr.dt-hasChild td.dt-control:before {
+  border-top: 10px solid rgba(0, 0, 0, 0.5);
+  border-left: 5px solid transparent;
+  border-bottom: 0px solid transparent;
+  border-right: 5px solid transparent;
+}
+
+html.dark table.dataTable td.dt-control:before,
+:root[data-bs-theme=dark] table.dataTable td.dt-control:before,
+:root[data-theme=dark] table.dataTable td.dt-control:before {
+  border-left-color: rgba(255, 255, 255, 0.5);
+}
+
+html.dark table.dataTable tr.dt-hasChild td.dt-control:before,
+:root[data-bs-theme=dark] table.dataTable tr.dt-hasChild td.dt-control:before,
+:root[data-theme=dark] table.dataTable tr.dt-hasChild td.dt-control:before {
+  border-top-color: rgba(255, 255, 255, 0.5);
+  border-left-color: transparent;
+}
+
+div.dt-scroll {
+  width: 100%;
+}
+
+div.dt-scroll-body thead tr,
+div.dt-scroll-body tfoot tr {
+  height: 0;
+}
+
+div.dt-scroll-body thead tr th, div.dt-scroll-body thead tr td,
+div.dt-scroll-body tfoot tr th,
+div.dt-scroll-body tfoot tr td {
+  height: 0 !important;
+  padding-top: 0px !important;
+  padding-bottom: 0px !important;
+  border-top-width: 0px !important;
+  border-bottom-width: 0px !important;
+}
+
+div.dt-scroll-body thead tr th div.dt-scroll-sizing, div.dt-scroll-body thead tr td div.dt-scroll-sizing,
+div.dt-scroll-body tfoot tr th div.dt-scroll-sizing,
+div.dt-scroll-body tfoot tr td div.dt-scroll-sizing {
+  height: 0 !important;
+  overflow: hidden !important;
+}
+
+table.dataTable thead > tr > th:active,
+table.dataTable thead > tr > td:active {
+  outline: none;
+}
+
+table.dataTable thead > tr > th.dt-orderable-asc span.dt-column-order:before, table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order:before,
+table.dataTable thead > tr > td.dt-orderable-asc span.dt-column-order:before,
+table.dataTable thead > tr > td.dt-ordering-asc span.dt-column-order:before {
+  position: absolute;
+  display: block;
+  bottom: 50%;
+  content: "▲";
+  content: "▲"/"";
+}
+
+table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order:after, table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order:after,
+table.dataTable thead > tr > td.dt-orderable-desc span.dt-column-order:after,
+table.dataTable thead > tr > td.dt-ordering-desc span.dt-column-order:after {
+  position: absolute;
+  display: block;
+  top: 50%;
+  content: "▼";
+  content: "▼"/"";
+}
+
+table.dataTable thead > tr > th.dt-orderable-asc, table.dataTable thead > tr > th.dt-orderable-desc, table.dataTable thead > tr > th.dt-ordering-asc, table.dataTable thead > tr > th.dt-ordering-desc,
+table.dataTable thead > tr > td.dt-orderable-asc,
+table.dataTable thead > tr > td.dt-orderable-desc,
+table.dataTable thead > tr > td.dt-ordering-asc,
+table.dataTable thead > tr > td.dt-ordering-desc {
+  position: relative;
+  padding-right: 30px;
+}
+
+table.dataTable thead > tr > th.dt-orderable-asc span.dt-column-order, table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order, table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order, table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order,
+table.dataTable thead > tr > td.dt-orderable-asc span.dt-column-order,
+table.dataTable thead > tr > td.dt-orderable-desc span.dt-column-order,
+table.dataTable thead > tr > td.dt-ordering-asc span.dt-column-order,
+table.dataTable thead > tr > td.dt-ordering-desc span.dt-column-order {
+  position: absolute;
+  right: 12px;
+  top: 0;
+  bottom: 0;
+  width: 12px;
+}
+
+table.dataTable thead > tr > th.dt-orderable-asc span.dt-column-order:before, table.dataTable thead > tr > th.dt-orderable-asc span.dt-column-order:after, table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order:before, table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order:after, table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order:before, table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order:after, table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order:before, table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order:after,
+table.dataTable thead > tr > td.dt-orderable-asc span.dt-column-order:before,
+table.dataTable thead > tr > td.dt-orderable-asc span.dt-column-order:after,
+table.dataTable thead > tr > td.dt-orderable-desc span.dt-column-order:before,
+table.dataTable thead > tr > td.dt-orderable-desc span.dt-column-order:after,
+table.dataTable thead > tr > td.dt-ordering-asc span.dt-column-order:before,
+table.dataTable thead > tr > td.dt-ordering-asc span.dt-column-order:after,
+table.dataTable thead > tr > td.dt-ordering-desc span.dt-column-order:before,
+table.dataTable thead > tr > td.dt-ordering-desc span.dt-column-order:after {
+  left: 0;
+  opacity: 0.125;
+  line-height: 9px;
+  font-size: 0.8em;
+}
+
+table.dataTable thead > tr > th.dt-orderable-asc, table.dataTable thead > tr > th.dt-orderable-desc,
+table.dataTable thead > tr > td.dt-orderable-asc,
+table.dataTable thead > tr > td.dt-orderable-desc {
+  cursor: pointer;
+}
+
+table.dataTable thead > tr > th.dt-orderable-asc:hover, table.dataTable thead > tr > th.dt-orderable-desc:hover,
+table.dataTable thead > tr > td.dt-orderable-asc:hover,
+table.dataTable thead > tr > td.dt-orderable-desc:hover {
+  outline: 2px solid rgba(0, 0, 0, 0.05);
+  outline-offset: -2px;
+}
+
+table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order:before, table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order:after,
+table.dataTable thead > tr > td.dt-ordering-asc span.dt-column-order:before,
+table.dataTable thead > tr > td.dt-ordering-desc span.dt-column-order:after {
+  opacity: 0.6;
+}
+
+table.dataTable thead > tr > th.sorting_desc_disabled span.dt-column-order:after, table.dataTable thead > tr > th.sorting_asc_disabled span.dt-column-order:before,
+table.dataTable thead > tr > td.sorting_desc_disabled span.dt-column-order:after,
+table.dataTable thead > tr > td.sorting_asc_disabled span.dt-column-order:before {
+  display: none;
+}
+
+table.dataTable thead > tr > th:active,
+table.dataTable thead > tr > td:active {
+  outline: none;
+}
+
+div.dt-scroll-body > table.dataTable > thead > tr > th,
+div.dt-scroll-body > table.dataTable > thead > tr > td {
+  overflow: hidden;
+}
+
+:root.dark table.dataTable thead > tr > th.dt-orderable-asc:hover, :root.dark table.dataTable thead > tr > th.dt-orderable-desc:hover,
+:root.dark table.dataTable thead > tr > td.dt-orderable-asc:hover,
+:root.dark table.dataTable thead > tr > td.dt-orderable-desc:hover,
+:root[data-bs-theme=dark] table.dataTable thead > tr > th.dt-orderable-asc:hover,
+:root[data-bs-theme=dark] table.dataTable thead > tr > th.dt-orderable-desc:hover,
+:root[data-bs-theme=dark] table.dataTable thead > tr > td.dt-orderable-asc:hover,
+:root[data-bs-theme=dark] table.dataTable thead > tr > td.dt-orderable-desc:hover {
+  outline: 2px solid rgba(255, 255, 255, 0.05);
+}
+
+div.dt-processing {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 200px;
+  margin-left: -100px;
+  margin-top: -22px;
+  text-align: center;
+  padding: 2px;
+  z-index: 10;
+}
+
+div.dt-processing > div:last-child {
+  position: relative;
+  width: 80px;
+  height: 15px;
+  margin: 1em auto;
+}
+
+div.dt-processing > div:last-child > div {
+  position: absolute;
+  top: 0;
+  width: 13px;
+  height: 13px;
+  border-radius: 50%;
+  background: rgb(13, 110, 253);
+  background: rgb(var(--dt-row-selected));
+  animation-timing-function: cubic-bezier(0, 1, 1, 0);
+}
+
+div.dt-processing > div:last-child > div:nth-child(1) {
+  left: 8px;
+  animation: datatables-loader-1 0.6s infinite;
+}
+
+div.dt-processing > div:last-child > div:nth-child(2) {
+  left: 8px;
+  animation: datatables-loader-2 0.6s infinite;
+}
+
+div.dt-processing > div:last-child > div:nth-child(3) {
+  left: 32px;
+  animation: datatables-loader-2 0.6s infinite;
+}
+
+div.dt-processing > div:last-child > div:nth-child(4) {
+  left: 56px;
+  animation: datatables-loader-3 0.6s infinite;
+}
+
+@keyframes datatables-loader-1 {
+  0% {
+    transform: scale(0);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+@keyframes datatables-loader-3 {
+  0% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(0);
+  }
+}
+@keyframes datatables-loader-2 {
+  0% {
+    transform: translate(0, 0);
+  }
+  100% {
+    transform: translate(24px, 0);
+  }
+}
+table.dataTable.nowrap th, table.dataTable.nowrap td {
+  white-space: nowrap;
+}
+
+table.dataTable th,
+table.dataTable td {
+  box-sizing: border-box;
+}
+
+table.dataTable th.dt-left,
+table.dataTable td.dt-left {
+  text-align: left;
+}
+
+table.dataTable th.dt-center,
+table.dataTable td.dt-center {
+  text-align: center;
+}
+
+table.dataTable th.dt-right,
+table.dataTable td.dt-right {
+  text-align: right;
+}
+
+table.dataTable th.dt-justify,
+table.dataTable td.dt-justify {
+  text-align: justify;
+}
+
+table.dataTable th.dt-nowrap,
+table.dataTable td.dt-nowrap {
+  white-space: nowrap;
+}
+
+table.dataTable th.dt-empty,
+table.dataTable td.dt-empty {
+  text-align: center;
+  vertical-align: top;
+}
+
+table.dataTable th.dt-type-numeric, table.dataTable th.dt-type-date,
+table.dataTable td.dt-type-numeric,
+table.dataTable td.dt-type-date {
+  text-align: right;
+}
+
+table.dataTable thead th,
+table.dataTable thead td,
+table.dataTable tfoot th,
+table.dataTable tfoot td {
+  text-align: left;
+}
+
+table.dataTable thead th.dt-head-left,
+table.dataTable thead td.dt-head-left,
+table.dataTable tfoot th.dt-head-left,
+table.dataTable tfoot td.dt-head-left {
+  text-align: left;
+}
+
+table.dataTable thead th.dt-head-center,
+table.dataTable thead td.dt-head-center,
+table.dataTable tfoot th.dt-head-center,
+table.dataTable tfoot td.dt-head-center {
+  text-align: center;
+}
+
+table.dataTable thead th.dt-head-right,
+table.dataTable thead td.dt-head-right,
+table.dataTable tfoot th.dt-head-right,
+table.dataTable tfoot td.dt-head-right {
+  text-align: right;
+}
+
+table.dataTable thead th.dt-head-justify,
+table.dataTable thead td.dt-head-justify,
+table.dataTable tfoot th.dt-head-justify,
+table.dataTable tfoot td.dt-head-justify {
+  text-align: justify;
+}
+
+table.dataTable thead th.dt-head-nowrap,
+table.dataTable thead td.dt-head-nowrap,
+table.dataTable tfoot th.dt-head-nowrap,
+table.dataTable tfoot td.dt-head-nowrap {
+  white-space: nowrap;
+}
+
+table.dataTable tbody th.dt-body-left,
+table.dataTable tbody td.dt-body-left {
+  text-align: left;
+}
+
+table.dataTable tbody th.dt-body-center,
+table.dataTable tbody td.dt-body-center {
+  text-align: center;
+}
+
+table.dataTable tbody th.dt-body-right,
+table.dataTable tbody td.dt-body-right {
+  text-align: right;
+}
+
+table.dataTable tbody th.dt-body-justify,
+table.dataTable tbody td.dt-body-justify {
+  text-align: justify;
+}
+
+table.dataTable tbody th.dt-body-nowrap,
+table.dataTable tbody td.dt-body-nowrap {
+  white-space: nowrap;
+}
+
+/*! Bootstrap 5 integration for DataTables
+ *
+ * ©2020 SpryMedia Ltd, all rights reserved.
+ * License: MIT datatables.net/license/mit
+ */
+table.table.dataTable {
+  clear: both;
+  margin-bottom: 0;
+  max-width: none;
+  border-spacing: 0;
+}
+
+table.table.dataTable.table-striped > tbody > tr:nth-of-type(2n+1) > * {
+  box-shadow: none;
+}
+
+table.table.dataTable > :not(caption) > * > * {
+  background-color: var(--bs-table-bg);
+}
+
+table.table.dataTable > tbody > tr {
+  background-color: transparent;
+}
+
+table.table.dataTable > tbody > tr.selected > * {
+  box-shadow: inset 0 0 0 9999px rgb(13, 110, 253);
+  box-shadow: inset 0 0 0 9999px rgb(var(--dt-row-selected));
+  color: rgb(255, 255, 255);
+  color: rgb(var(--dt-row-selected-text));
+}
+
+table.table.dataTable > tbody > tr.selected a {
+  color: rgb(9, 10, 11);
+  color: rgb(var(--dt-row-selected-link));
+}
+
+table.table.dataTable.table-striped > tbody > tr:nth-of-type(2n+1) > * {
+  box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-stripe), 0.05);
+}
+
+table.table.dataTable.table-striped > tbody > tr:nth-of-type(2n+1).selected > * {
+  box-shadow: inset 0 0 0 9999px rgba(13, 110, 253, 0.95);
+  box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), 0.95);
+}
+
+table.table.dataTable.table-hover > tbody > tr:hover > * {
+  box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-hover), 0.075);
+}
+
+table.table.dataTable.table-hover > tbody > tr.selected:hover > * {
+  box-shadow: inset 0 0 0 9999px rgba(13, 110, 253, 0.975);
+  box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), 0.975);
+}
+
+div.dt-container div.dt-layout-start > *:not(:last-child) {
+  margin-right: 1em;
+}
+
+div.dt-container div.dt-layout-end > *:not(:first-child) {
+  margin-left: 1em;
+}
+
+div.dt-container div.dt-layout-full {
+  width: 100%;
+}
+
+div.dt-container div.dt-layout-full > *:only-child {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+div.dt-container div.dt-layout-table > div {
+  display: block !important;
+}
+
+@media screen and (max-width: 767px) {
+  div.dt-container div.dt-layout-start > *:not(:last-child) {
+    margin-right: 0;
+  }
+  div.dt-container div.dt-layout-end > *:not(:first-child) {
+    margin-left: 0;
+  }
+}
+div.dt-container div.dt-length label {
+  font-weight: normal;
+  text-align: left;
+  white-space: nowrap;
+}
+
+div.dt-container div.dt-length select {
+  width: auto;
+  display: inline-block;
+  margin-right: 0.5em;
+}
+
+div.dt-container div.dt-search {
+  text-align: right;
+}
+
+div.dt-container div.dt-search label {
+  font-weight: normal;
+  white-space: nowrap;
+  text-align: left;
+}
+
+div.dt-container div.dt-search input {
+  margin-left: 0.5em;
+  display: inline-block;
+  width: auto;
+}
+
+div.dt-container div.dt-paging {
+  margin: 0;
+}
+
+div.dt-container div.dt-paging ul.pagination {
+  margin: 2px 0;
+  flex-wrap: wrap;
+}
+
+div.dt-container div.dt-row {
+  position: relative;
+}
+
+div.dt-scroll-head table.dataTable {
+  margin-bottom: 0 !important;
+}
+
+div.dt-scroll-body {
+  border-bottom-color: var(--bs-border-color);
+  border-bottom-width: var(--bs-border-width);
+  border-bottom-style: solid;
+}
+
+div.dt-scroll-body > table {
+  border-top: none;
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+}
+
+div.dt-scroll-body > table > tbody > tr:first-child {
+  border-top-width: 0;
+}
+
+div.dt-scroll-body > table > thead > tr {
+  border-width: 0 !important;
+}
+
+div.dt-scroll-body > table > tbody > tr:last-child > * {
+  border-bottom: none;
+}
+
+div.dt-scroll-foot > .dt-scroll-footInner {
+  box-sizing: content-box;
+}
+
+div.dt-scroll-foot > .dt-scroll-footInner > table {
+  margin-top: 0 !important;
+  border-top: none;
+}
+
+div.dt-scroll-foot > .dt-scroll-footInner > table > tfoot > tr:first-child {
+  border-top-width: 0 !important;
+}
+
+@media screen and (max-width: 767px) {
+  div.dt-container div.dt-length,
+  div.dt-container div.dt-search,
+  div.dt-container div.dt-info,
+  div.dt-container div.dt-paging {
+    text-align: center;
+  }
+  div.dt-container .row {
+    --bs-gutter-y: 0.5rem;
+  }
+  div.dt-container div.dt-paging ul.pagination {
+    justify-content: center !important;
+  }
+}
+table.dataTable.table-sm > thead > tr th.dt-orderable-asc, table.dataTable.table-sm > thead > tr th.dt-orderable-desc, table.dataTable.table-sm > thead > tr th.dt-ordering-asc, table.dataTable.table-sm > thead > tr th.dt-ordering-desc,
+table.dataTable.table-sm > thead > tr td.dt-orderable-asc,
+table.dataTable.table-sm > thead > tr td.dt-orderable-desc,
+table.dataTable.table-sm > thead > tr td.dt-ordering-asc,
+table.dataTable.table-sm > thead > tr td.dt-ordering-desc {
+  padding-right: 20px;
+}
+
+table.dataTable.table-sm > thead > tr th.dt-orderable-asc span.dt-column-order, table.dataTable.table-sm > thead > tr th.dt-orderable-desc span.dt-column-order, table.dataTable.table-sm > thead > tr th.dt-ordering-asc span.dt-column-order, table.dataTable.table-sm > thead > tr th.dt-ordering-desc span.dt-column-order,
+table.dataTable.table-sm > thead > tr td.dt-orderable-asc span.dt-column-order,
+table.dataTable.table-sm > thead > tr td.dt-orderable-desc span.dt-column-order,
+table.dataTable.table-sm > thead > tr td.dt-ordering-asc span.dt-column-order,
+table.dataTable.table-sm > thead > tr td.dt-ordering-desc span.dt-column-order {
+  right: 5px;
+}
+
+div.dt-scroll-head table.table-bordered {
+  border-bottom-width: 0;
+}
+
+div.table-responsive > div.dt-container > div.row {
+  margin: 0;
+}
+
+div.table-responsive > div.dt-container > div.row > div[class^=col-]:first-child {
+  padding-left: 0;
+}
+
+div.table-responsive > div.dt-container > div.row > div[class^=col-]:last-child {
+  padding-right: 0;
+}
+
+:root[data-bs-theme=dark] {
+  --dt-row-hover: 255, 255, 255;
+  --dt-row-stripe: 255, 255, 255;
+  --dt-column-ordering: 255, 255, 255;
+}
+
+/* FIX: broken ui in tablet devices */
+@media (hover: none) and (pointer: coarse) {
+  table.dataTable {
+    display: table;
+    overflow-x: auto;
+  }
+}
+/* Card header inside the datatable */
+div.dt-container {
+  /* Remove left and right border from datatable with table-bordered class */
+  /* Responsive datatable in desktop screen */
+  /* common style for light / dark */
+}
+div.dt-container .card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+div.dt-container .dt-buttons {
+  inline-size: auto;
+}
+div.dt-container .dt-buttons .dt-button-down-arrow {
+  display: none;
+}
+@media (max-width: 767.98px) {
+  div.dt-container .dt-buttons.btn-group {
+    display: block;
+  }
+}
+div.dt-container .table.table-bordered.dataTable.dt-complex-header thead tr th, div.dt-container .table.table-bordered.dataTable.dt-column-search thead tr th {
+  border-width: 1px;
+}
+div.dt-container .table.table-bordered.dataTable.dt-complex-header thead tr th:first-child, div.dt-container .table.table-bordered.dataTable.dt-column-search thead tr th:first-child {
+  border-inline-start-width: 0;
+}
+div.dt-container .table.table-bordered.dataTable.dt-complex-header thead tr th:last-child, div.dt-container .table.table-bordered.dataTable.dt-column-search thead tr th:last-child {
+  border-inline-end-width: 0;
+}
+div.dt-container .table.table-bordered.dataTable th:last-child,
+div.dt-container .table.table-bordered.dataTable td:last-child {
+  border-width: 0;
+}
+@media screen and (width >= 1399.98px) {
+  div.dt-container table.table-responsive {
+    display: table;
+  }
+}
+div.dt-container div.dt-search input {
+  margin-inline: 0.5rem 0;
+}
+div.dt-container div.dt-search .form-control::-webkit-search-cancel-button {
+  margin-inline-start: 0.375rem;
+}
+div.dt-container div.dt-layout-end > *:not(:first-child) {
+  margin-inline: 0;
+}
+div.dt-container table.dataTable {
+  border-collapse: collapse;
+  inline-size: 100%;
+  margin-block: 0 1rem;
+  /* Checkbox height & width for datatables checkboxes */
+}
+div.dt-container table.dataTable .form-check-input {
+  block-size: 1.125rem;
+  inline-size: 1.125rem;
+}
+div.dt-container table.dataTable thead > tr > th.dt-orderable-asc:hover, div.dt-container table.dataTable thead > tr > th.dt-orderable-desc:hover,
+div.dt-container table.dataTable thead > tr > td.dt-orderable-asc:hover,
+div.dt-container table.dataTable thead > tr > td.dt-orderable-desc:hover {
+  outline: none !important;
+}
+div.dt-container table.dataTable thead th {
+  /* Used while complex headers */
+  vertical-align: middle;
+}
+div.dt-container table.dataTable .dt-control.dt-orderable-none .dt-column-order::before {
+  opacity: 0;
+}
+div.dt-container table.dataTable td.dt-control::before {
+  border: 2px solid;
+  block-size: 0.55em;
+  border-block-start: 0;
+  border-inline-start: 0;
+  inline-size: 0.55em;
+  transform: rotate(-45deg);
+}
+:dir(rtl) div.dt-container table.dataTable td.dt-control::before {
+  transform: rotate(-315deg);
+}
+div.dt-container table.dataTable tr.dt-hasChild td.dt-control::before {
+  border-block-start: 0;
+  border-inline-start: 0;
+  transform: rotate(45deg);
+}
+:dir(rtl) div.dt-container table.dataTable tr.dt-hasChild td.dt-control::before {
+  transform: rotate(-45deg);
+}
+div.dt-container table.dataTable.table tbody > tr.selected, div.dt-container table.dataTable.table tbody > tr > .selected {
+  background-color: rgba(var(--bs-primary-rgb), 0.08);
+}
+div.dt-container table.dataTable.table tbody > tr.selected > *, div.dt-container table.dataTable.table tbody > tr > .selected > * {
+  box-shadow: none;
+  color: var(--bs-body-color);
+}
+div.dt-container table.dataTable.table tbody > tr.selected a, div.dt-container table.dataTable.table tbody > tr > .selected a {
+  color: var(--bs-body-color);
+}
+div.dt-container div.dt-scroll-body {
+  border-block-end-width: 0;
+}
+@media screen and (width <= 575.98px) {
+  div.dt-container .card-header .dt-action-buttons {
+    padding-block-start: 1rem;
+  }
+  div.dt-container .dtr-bs-modal.modal .modal-body {
+    padding: 0;
+  }
+  div.dt-container .dtr-bs-modal.modal .modal-body .table {
+    margin-block-end: 0;
+  }
+}
+@media screen and (width <= 767.98px) {
+  div.dt-container div.dt-info {
+    padding-block: 0 0.782rem;
+  }
+}
+div.dt-container div.dt-length,
+div.dt-container div.dt-search {
+  margin-block: 1.5rem;
+}
+div.dt-container div.dt-length select {
+  margin-inline: 0.5rem;
+}
+div.dt-container div.dt-paging ul.pagination .page-link {
+  padding: 0.4809rem;
+  font-size: 0.9375rem;
+  line-height: 1.375;
+  border-radius: 0.375rem;
+}
+@media screen and (width <= 575.98px) {
+  div.dt-container div.dt-paging ul.pagination .page-link {
+    font-size: 0.8125rem;
+    min-block-size: calc(1.7501875rem + calc(1px * 2));
+    min-inline-size: calc(1.7509515rem + calc(1px * 2));
+    padding-block: 0.211rem;
+    padding-inline: 0.1635rem;
+  }
+  div.dt-container div.dt-paging ul.pagination .page-item .next.page-link,
+  div.dt-container div.dt-paging ul.pagination .page-item .previous.page-link,
+  div.dt-container div.dt-paging ul.pagination .page-item .first.page-link,
+  div.dt-container div.dt-paging ul.pagination .page-item .last.page-link {
+    padding: 0.211rem;
+  }
+}
+div.dt-container div.dt-info .select-info .select-item {
+  margin-inline: 0.5rem;
+}
+
+/* DataTable within card */
+div.card-datatable {
+  padding-block-end: 1rem;
+}
+div.card-datatable div.dt-info {
+  color: var(--bs-secondary-color);
+}
+
+.table-bordered > :not(caption) > * > * {
+  border-width: 0;
+}
+
+/* overrides styles of library for rtl */
+table.dataTable th, table.dataTable th.dt-type-numeric, table.dataTable th.dt-type-date,
+table.dataTable td,
+table.dataTable td.dt-type-numeric,
+table.dataTable td.dt-type-date,
+table.dataTable thead th,
+table.dataTable thead th.dt-type-numeric,
+table.dataTable thead th.dt-type-date,
+table.dataTable thead td,
+table.dataTable thead td.dt-type-numeric,
+table.dataTable thead td.dt-type-date,
+table.dataTable tfoot th,
+table.dataTable tfoot th.dt-type-numeric,
+table.dataTable tfoot th.dt-type-date,
+table.dataTable tfoot td,
+table.dataTable tfoot td.dt-type-numeric,
+table.dataTable tfoot td.dt-type-date {
+  text-align: start;
+}
+table.dataTable th:first-child,
+table.dataTable td:first-child,
+table.dataTable thead th:first-child,
+table.dataTable thead td:first-child,
+table.dataTable tfoot th:first-child,
+table.dataTable tfoot td:first-child {
+  padding-inline: 1.5rem;
+}
+table.dataTable th:last-child,
+table.dataTable thead th:last-child,
+table.dataTable tfoot th:last-child {
+  padding-inline-end: 1rem;
+}
+table.dataTable thead .dt-orderable-asc.dt-orderable-desc .dt-column-order,
+table.dataTable thead .dt-ordering-desc .dt-column-order,
+table.dataTable thead .dt-ordering-asc .dt-column-order {
+  inset-inline: auto 1em;
+}
+table.dataTable thead .dt-orderable-asc.dt-orderable-desc .dt-column-order::before, table.dataTable thead .dt-orderable-asc.dt-orderable-desc .dt-column-order::after,
+table.dataTable thead .dt-ordering-desc .dt-column-order::before,
+table.dataTable thead .dt-ordering-desc .dt-column-order::after,
+table.dataTable thead .dt-ordering-asc .dt-column-order::before,
+table.dataTable thead .dt-ordering-asc .dt-column-order::after {
+  background-color: var(--bs-heading-color);
+  block-size: 1.125rem;
+  content: "";
+  inline-size: 1.125rem;
+  mask-repeat: no-repeat;
+  mask-size: 100% 100%;
+  visibility: hidden;
+}
+table.dataTable thead .dt-orderable-asc.dt-orderable-desc .dt-column-order::before,
+table.dataTable thead .dt-ordering-desc .dt-column-order::before,
+table.dataTable thead .dt-ordering-asc .dt-column-order::before {
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='m6.293 13.293l1.414 1.414L12 10.414l4.293 4.293l1.414-1.414L12 7.586z'/%3E%3C/svg%3E");
+}
+table.dataTable thead .dt-orderable-asc.dt-orderable-desc .dt-column-order::after,
+table.dataTable thead .dt-ordering-desc .dt-column-order::after,
+table.dataTable thead .dt-ordering-asc .dt-column-order::after {
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M16.293 9.293L12 13.586L7.707 9.293l-1.414 1.414L12 16.414l5.707-5.707z'/%3E%3C/svg%3E");
+}
+table.dataTable thead .dt-orderable-asc.dt-orderable-desc:hover .dt-column-order::before, table.dataTable thead .dt-orderable-asc.dt-orderable-desc:hover .dt-column-order::after,
+table.dataTable thead .dt-ordering-desc:hover .dt-column-order::before,
+table.dataTable thead .dt-ordering-desc:hover .dt-column-order::after,
+table.dataTable thead .dt-ordering-asc:hover .dt-column-order::before,
+table.dataTable thead .dt-ordering-asc:hover .dt-column-order::after {
+  visibility: visible;
+}
+
+/* text align styles in modal */
+.modal.dtr-bs-modal .text-xxl-center {
+  text-align: start !important;
+}
+
+/* Dark theme */
+[data-bs-theme=dark] div.dt-container table.dataTable tr.dt-hasChild td.dt-control::before {
+  border-color: rgba(var(--bs-white-rgb), 0.5);
+}

public/assets/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.css

@@ -0,0 +1,461 @@
+@charset "UTF-8";
+/* (C) */
+@keyframes dtb-spinner {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@-o-keyframes dtb-spinner {
+  100% {
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@-ms-keyframes dtb-spinner {
+  100% {
+    -ms-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@-webkit-keyframes dtb-spinner {
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@-moz-keyframes dtb-spinner {
+  100% {
+    -moz-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+div.dataTables_wrapper {
+  position: relative;
+}
+
+div.dt-buttons {
+  position: initial;
+}
+
+div.dt-buttons .dt-button {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+div.dt-button-info {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  width: 400px;
+  margin-top: -100px;
+  margin-left: -200px;
+  background-color: white;
+  border-radius: 0.75em;
+  box-shadow: 3px 4px 10px 1px rgba(0, 0, 0, 0.8);
+  text-align: center;
+  z-index: 2003;
+  overflow: hidden;
+}
+
+div.dt-button-info h2 {
+  padding: 2rem 2rem 1rem 2rem;
+  margin: 0;
+  font-weight: normal;
+}
+
+div.dt-button-info > div {
+  padding: 1em 2em 2em 2em;
+}
+
+div.dtb-popover-close {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  width: 22px;
+  height: 22px;
+  text-align: center;
+  border-radius: 3px;
+  cursor: pointer;
+  z-index: 2003;
+}
+
+button.dtb-hide-drop {
+  display: none !important;
+}
+
+div.dt-button-collection-title {
+  text-align: center;
+  padding: 0.3em 0.5em 0.5em;
+  margin-left: 0.5em;
+  margin-right: 0.5em;
+  font-size: 0.9em;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+div.dt-button-collection-title:empty {
+  display: none;
+}
+
+span.dt-button-spacer {
+  display: inline-block;
+  margin: 0.5em;
+  white-space: nowrap;
+}
+
+span.dt-button-spacer.bar {
+  border-left: 1px solid rgba(0, 0, 0, 0.3);
+  vertical-align: middle;
+  padding-left: 0.5em;
+}
+
+span.dt-button-spacer.bar:empty {
+  height: 1em;
+  width: 1px;
+  padding-left: 0;
+}
+
+div.dt-button-collection .dt-button-active {
+  padding-right: 3em;
+}
+
+div.dt-button-collection .dt-button-active:after {
+  position: absolute;
+  top: 50%;
+  margin-top: -10px;
+  right: 1em;
+  display: inline-block;
+  content: "✓";
+  color: inherit;
+}
+
+div.dt-button-collection .dt-button-active.dt-button-split {
+  padding-right: 0;
+}
+
+div.dt-button-collection .dt-button-active.dt-button-split:after {
+  display: none;
+}
+
+div.dt-button-collection .dt-button-active.dt-button-split > *:first-child {
+  padding-right: 3em;
+}
+
+div.dt-button-collection .dt-button-active.dt-button-split > *:first-child:after {
+  position: absolute;
+  top: 50%;
+  margin-top: -10px;
+  right: 1em;
+  display: inline-block;
+  content: "✓";
+  color: inherit;
+}
+
+div.dt-button-collection .dt-button-active-a a {
+  padding-right: 3em;
+}
+
+div.dt-button-collection .dt-button-active-a a:after {
+  position: absolute;
+  right: 1em;
+  display: inline-block;
+  content: "✓";
+  color: inherit;
+}
+
+div.dt-button-collection span.dt-button-spacer {
+  width: 100%;
+  font-size: 0.9em;
+  text-align: center;
+  margin: 0.5em 0;
+}
+
+div.dt-button-collection span.dt-button-spacer:empty {
+  height: 0;
+  width: 100%;
+}
+
+div.dt-button-collection span.dt-button-spacer.bar {
+  border-left: none;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  padding-left: 0;
+}
+
+@media print {
+  table.dataTable tr > * {
+    box-shadow: none !important;
+  }
+}
+div.dt-buttons div.btn-group {
+  position: initial;
+}
+
+div.dt-buttons span.dt-button-spacer.empty {
+  margin: 1px;
+}
+
+div.dt-buttons span.dt-button-spacer.bar:empty {
+  height: inherit;
+}
+
+div.dt-buttons .btn.processing {
+  color: rgba(0, 0, 0, 0.2);
+}
+
+div.dt-buttons .btn.processing:after {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 16px;
+  height: 16px;
+  margin: -8px 0 0 -8px;
+  box-sizing: border-box;
+  display: block;
+  content: " ";
+  border: 2px solid rgb(40, 40, 40);
+  border-radius: 50%;
+  border-left-color: transparent;
+  border-right-color: transparent;
+  animation: dtb-spinner 1500ms infinite linear;
+  -o-animation: dtb-spinner 1500ms infinite linear;
+  -ms-animation: dtb-spinner 1500ms infinite linear;
+  -webkit-animation: dtb-spinner 1500ms infinite linear;
+  -moz-animation: dtb-spinner 1500ms infinite linear;
+}
+
+div.dropdown-menu.dt-button-collection {
+  margin-top: 4px;
+  width: 200px;
+}
+
+div.dropdown-menu.dt-button-collection .dt-button {
+  position: relative;
+}
+
+div.dropdown-menu.dt-button-collection .dt-button.dropdown-toggle::after {
+  position: absolute;
+  right: 12px;
+  top: 14px;
+}
+
+div.dropdown-menu.dt-button-collection div.dt-button-split {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  align-content: flex-start;
+  align-items: stretch;
+}
+
+div.dropdown-menu.dt-button-collection div.dt-button-split a:first-child {
+  min-width: auto;
+  flex: 1 0 50px;
+  padding-right: 0;
+}
+
+div.dropdown-menu.dt-button-collection div.dt-button-split button:last-child {
+  min-width: 33px;
+  flex: 0;
+  background: transparent;
+  border: none;
+  line-height: 1rem;
+  color: var(--bs-dropdown-link-color);
+  padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);
+  overflow: visible;
+}
+
+div.dropdown-menu.dt-button-collection div.dt-button-split button:last-child:hover {
+  color: var(--bs-dropdown-link-hover-color);
+  background-color: var(--bs-dropdown-link-hover-bg);
+}
+
+div.dropdown-menu.dt-button-collection.fixed {
+  position: fixed;
+  display: block;
+  top: 50%;
+  left: 50%;
+  margin-left: -75px;
+  border-radius: 5px;
+  background-color: white;
+  padding: 0.5em;
+}
+
+div.dropdown-menu.dt-button-collection.fixed.two-column {
+  margin-left: -200px;
+}
+
+div.dropdown-menu.dt-button-collection.fixed.three-column {
+  margin-left: -225px;
+}
+
+div.dropdown-menu.dt-button-collection.fixed.four-column {
+  margin-left: -300px;
+}
+
+div.dropdown-menu.dt-button-collection.fixed.columns {
+  margin-left: -409px;
+}
+
+@media screen and (max-width: 1024px) {
+  div.dropdown-menu.dt-button-collection.fixed.columns {
+    margin-left: -308px;
+  }
+}
+@media screen and (max-width: 640px) {
+  div.dropdown-menu.dt-button-collection.fixed.columns {
+    margin-left: -203px;
+  }
+}
+@media screen and (max-width: 460px) {
+  div.dropdown-menu.dt-button-collection.fixed.columns {
+    margin-left: -100px;
+  }
+}
+div.dropdown-menu.dt-button-collection.fixed > :last-child {
+  max-height: 100vh;
+  overflow: auto;
+}
+
+div.dropdown-menu.dt-button-collection.two-column > :last-child, div.dropdown-menu.dt-button-collection.three-column > :last-child, div.dropdown-menu.dt-button-collection.four-column > :last-child {
+  display: block !important;
+  column-gap: 8px;
+}
+
+div.dropdown-menu.dt-button-collection.two-column > :last-child > *, div.dropdown-menu.dt-button-collection.three-column > :last-child > *, div.dropdown-menu.dt-button-collection.four-column > :last-child > * {
+  -webkit-column-break-inside: avoid;
+  break-inside: avoid;
+}
+
+div.dropdown-menu.dt-button-collection.two-column {
+  width: 400px;
+}
+
+div.dropdown-menu.dt-button-collection.two-column > :last-child {
+  padding-bottom: 1px;
+  column-count: 2;
+}
+
+div.dropdown-menu.dt-button-collection.three-column {
+  width: 450px;
+}
+
+div.dropdown-menu.dt-button-collection.three-column > :last-child {
+  padding-bottom: 1px;
+  column-count: 3;
+}
+
+div.dropdown-menu.dt-button-collection.four-column {
+  width: 600px;
+}
+
+div.dropdown-menu.dt-button-collection.four-column > :last-child {
+  padding-bottom: 1px;
+  column-count: 4;
+}
+
+div.dropdown-menu.dt-button-collection .dt-button {
+  border-radius: 0;
+}
+
+div.dropdown-menu.dt-button-collection.columns {
+  width: auto;
+}
+
+div.dropdown-menu.dt-button-collection.columns > :last-child {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 6px;
+  width: 818px;
+  padding-bottom: 1px;
+}
+
+div.dropdown-menu.dt-button-collection.columns > :last-child .dt-button {
+  min-width: 200px;
+  flex: 0 1;
+  margin: 0;
+}
+
+div.dropdown-menu.dt-button-collection.columns.dtb-b3 > :last-child, div.dropdown-menu.dt-button-collection.columns.dtb-b2 > :last-child, div.dropdown-menu.dt-button-collection.columns.dtb-b1 > :last-child {
+  justify-content: space-between;
+}
+
+div.dropdown-menu.dt-button-collection.columns.dtb-b3 .dt-button {
+  flex: 1 1 32%;
+}
+
+div.dropdown-menu.dt-button-collection.columns.dtb-b2 .dt-button {
+  flex: 1 1 48%;
+}
+
+div.dropdown-menu.dt-button-collection.columns.dtb-b1 .dt-button {
+  flex: 1 1 100%;
+}
+
+@media screen and (max-width: 1024px) {
+  div.dropdown-menu.dt-button-collection.columns > :last-child {
+    width: 612px;
+  }
+}
+@media screen and (max-width: 640px) {
+  div.dropdown-menu.dt-button-collection.columns > :last-child {
+    width: 406px;
+  }
+  div.dropdown-menu.dt-button-collection.columns.dtb-b3 .dt-button {
+    flex: 0 1 32%;
+  }
+}
+@media screen and (max-width: 460px) {
+  div.dropdown-menu.dt-button-collection.columns > :last-child {
+    width: 200px;
+  }
+}
+div.dt-button-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 999;
+}
+
+@media screen and (max-width: 767px) {
+  div.dt-buttons {
+    float: none;
+    width: 100%;
+    text-align: center;
+    margin-bottom: 0.5em;
+  }
+  div.dt-buttons a.btn {
+    float: none;
+  }
+}
+div.dt-button-info {
+  background-color: var(--bs-body-bg);
+  border: 1px solid var(--bs-border-color-translucent);
+}
+
+:root[data-bs-theme=dark] div.dropdown-menu.dt-button-collection.fixed {
+  background-color: var(--bs-body-bg);
+  border: 1px solid var(--bs-border-color-translucent);
+}
+
+div.dt-container .dt-button-collection {
+  min-inline-size: 3.5rem;
+}
+div.dt-container div.dropdown-menu.dt-button-collection,
+div.dt-container div.dt-button-collection .dt-button:not(.dt-btn-split-drop) {
+  min-inline-size: 8rem;
+}
+div.dt-container div.dropdown-menu.dt-button-collection .dt-button {
+  border-radius: 0.375rem;
+}
+div.dt-container .dt-buttons.btn-group .btn {
+  border-color: transparent;
+}
+div.dt-container .dt-buttons.btn-group:not(.btn-group-vertical) > .btn-group:not(:last-child) > .btn, div.dt-container .dt-buttons.btn-group:not(.btn-group-vertical) > :not(.btn-check) + .btn {
+  border-radius: 0.375rem !important;
+}

public/assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.css

@@ -0,0 +1,282 @@
+/* (C) */
+table.dataTable.dtr-inline.collapsed > tbody > tr > td.child,
+table.dataTable.dtr-inline.collapsed > tbody > tr > th.child,
+table.dataTable.dtr-inline.collapsed > tbody > tr > td.dataTables_empty {
+  cursor: default !important;
+}
+
+table.dataTable.dtr-inline.collapsed > tbody > tr > td.child:before,
+table.dataTable.dtr-inline.collapsed > tbody > tr > th.child:before,
+table.dataTable.dtr-inline.collapsed > tbody > tr > td.dataTables_empty:before {
+  display: none !important;
+}
+
+table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control,
+table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control {
+  cursor: pointer;
+}
+
+table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
+table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {
+  margin-right: 0.5em;
+  display: inline-block;
+  box-sizing: border-box;
+  content: "";
+  border-top: 5px solid transparent;
+  border-left: 10px solid rgba(0, 0, 0, 0.5);
+  border-bottom: 5px solid transparent;
+  border-right: 0px solid transparent;
+}
+
+table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control.arrow-right::before,
+table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control.arrow-right::before {
+  border-top: 5px solid transparent;
+  border-left: 0px solid transparent;
+  border-bottom: 5px solid transparent;
+  border-right: 10px solid rgba(0, 0, 0, 0.5);
+}
+
+table.dataTable.dtr-inline.collapsed > tbody > tr.dtr-expanded > td.dtr-control:before,
+table.dataTable.dtr-inline.collapsed > tbody > tr.dtr-expanded > th.dtr-control:before {
+  border-top: 10px solid rgba(0, 0, 0, 0.5);
+  border-left: 5px solid transparent;
+  border-bottom: 0px solid transparent;
+  border-right: 5px solid transparent;
+}
+
+table.dataTable.dtr-inline.collapsed.compact > tbody > tr > td.dtr-control,
+table.dataTable.dtr-inline.collapsed.compact > tbody > tr > th.dtr-control {
+  padding-left: 0.333em;
+}
+
+table.dataTable.dtr-column > tbody > tr > td.dtr-control,
+table.dataTable.dtr-column > tbody > tr > th.dtr-control,
+table.dataTable.dtr-column > tbody > tr > td.control,
+table.dataTable.dtr-column > tbody > tr > th.control {
+  cursor: pointer;
+}
+
+table.dataTable.dtr-column > tbody > tr > td.dtr-control:before,
+table.dataTable.dtr-column > tbody > tr > th.dtr-control:before,
+table.dataTable.dtr-column > tbody > tr > td.control:before,
+table.dataTable.dtr-column > tbody > tr > th.control:before {
+  display: inline-block;
+  box-sizing: border-box;
+  content: "";
+  border-top: 5px solid transparent;
+  border-left: 10px solid rgba(0, 0, 0, 0.5);
+  border-bottom: 5px solid transparent;
+  border-right: 0px solid transparent;
+}
+
+table.dataTable.dtr-column > tbody > tr > td.dtr-control.arrow-right::before,
+table.dataTable.dtr-column > tbody > tr > th.dtr-control.arrow-right::before,
+table.dataTable.dtr-column > tbody > tr > td.control.arrow-right::before,
+table.dataTable.dtr-column > tbody > tr > th.control.arrow-right::before {
+  border-top: 5px solid transparent;
+  border-left: 0px solid transparent;
+  border-bottom: 5px solid transparent;
+  border-right: 10px solid rgba(0, 0, 0, 0.5);
+}
+
+table.dataTable.dtr-column > tbody > tr.dtr-expanded td.dtr-control:before,
+table.dataTable.dtr-column > tbody > tr.dtr-expanded th.dtr-control:before,
+table.dataTable.dtr-column > tbody > tr.dtr-expanded td.control:before,
+table.dataTable.dtr-column > tbody > tr.dtr-expanded th.control:before {
+  border-top: 10px solid rgba(0, 0, 0, 0.5);
+  border-left: 5px solid transparent;
+  border-bottom: 0px solid transparent;
+  border-right: 5px solid transparent;
+}
+
+table.dataTable > tbody > tr.child {
+  padding: 0.5em 1em;
+}
+
+table.dataTable > tbody > tr.child:hover {
+  background: transparent !important;
+}
+
+table.dataTable > tbody > tr.child ul.dtr-details {
+  display: inline-block;
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+table.dataTable > tbody > tr.child ul.dtr-details > li {
+  border-bottom: 1px solid #efefef;
+  padding: 0.5em 0;
+}
+
+table.dataTable > tbody > tr.child ul.dtr-details > li:first-child {
+  padding-top: 0;
+}
+
+table.dataTable > tbody > tr.child ul.dtr-details > li:last-child {
+  padding-bottom: 0;
+  border-bottom: none;
+}
+
+table.dataTable > tbody > tr.child span.dtr-title {
+  display: inline-block;
+  min-width: 75px;
+  font-weight: bold;
+}
+
+div.dtr-modal {
+  position: fixed;
+  box-sizing: border-box;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  z-index: 100;
+  padding: 10em 1em;
+}
+
+div.dtr-modal div.dtr-modal-display {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  width: 50%;
+  height: fit-content;
+  max-height: 75%;
+  overflow: auto;
+  margin: auto;
+  z-index: 102;
+  overflow: auto;
+  background-color: #f5f5f7;
+  border: 1px solid black;
+  border-radius: 0.5em;
+  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
+}
+
+div.dtr-modal div.dtr-modal-content {
+  position: relative;
+  padding: 2.5em;
+}
+
+div.dtr-modal div.dtr-modal-content h2 {
+  margin-top: 0;
+}
+
+div.dtr-modal div.dtr-modal-close {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  width: 22px;
+  height: 22px;
+  text-align: center;
+  border-radius: 3px;
+  cursor: pointer;
+  z-index: 12;
+}
+
+div.dtr-modal div.dtr-modal-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 101;
+  background: rgba(0, 0, 0, 0.6);
+}
+
+@media screen and (max-width: 767px) {
+  div.dtr-modal div.dtr-modal-display {
+    width: 95%;
+  }
+}
+html.dark table.dataTable > tbody > tr > td.dtr-control:before,
+html[data-bs-theme=dark] table.dataTable > tbody > tr > td.dtr-control:before {
+  border-left-color: rgba(255, 255, 255, 0.5) !important;
+}
+
+html.dark table.dataTable > tbody > tr > td.dtr-control.arrow-right::before,
+html[data-bs-theme=dark] table.dataTable > tbody > tr > td.dtr-control.arrow-right::before {
+  border-right-color: rgba(255, 255, 255, 0.5) !important;
+}
+
+html.dark table.dataTable > tbody > tr.dtr-expanded > td.dtr-control:before,
+html.dark table.dataTable > tbody > tr.dtr-expanded > th.dtr-control:before,
+html[data-bs-theme=dark] table.dataTable > tbody > tr.dtr-expanded > td.dtr-control:before,
+html[data-bs-theme=dark] table.dataTable > tbody > tr.dtr-expanded > th.dtr-control:before {
+  border-top-color: rgba(255, 255, 255, 0.5) !important;
+  border-left-color: transparent !important;
+  border-right-color: transparent !important;
+}
+
+html.dark table.dataTable > tbody > tr.child ul.dtr-details > li,
+html[data-bs-theme=dark] table.dataTable > tbody > tr.child ul.dtr-details > li {
+  border-bottom-color: rgb(64, 67, 70);
+}
+
+html.dark div.dtr-modal div.dtr-modal-display,
+html[data-bs-theme=dark] div.dtr-modal div.dtr-modal-display {
+  background-color: rgb(33, 37, 41);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+}
+
+div.dtr-bs-modal table.table tr:first-child td {
+  border-top: none;
+}
+
+table.dataTable.table-bordered th.dtr-control.dtr-hidden + *,
+table.dataTable.table-bordered td.dtr-control.dtr-hidden + * {
+  border-left-width: 1px;
+}
+
+/* Responsive table area '+' icon position */
+table.dataTable.dtr-column > tbody > tr > td.control, table.dataTable.dtr-column > tbody > tr > th.control, table.dataTable.dtr-column > tbody > tr.dtr-expanded > td.control, table.dataTable.dtr-column > tbody > tr.dtr-expanded > th.control {
+  position: relative;
+}
+table.dataTable.dtr-column > tbody > tr > td.control::before, table.dataTable.dtr-column > tbody > tr > th.control::before, table.dataTable.dtr-column > tbody > tr.dtr-expanded > td.control::before, table.dataTable.dtr-column > tbody > tr.dtr-expanded > th.control::before {
+  position: absolute;
+  box-sizing: content-box;
+  border: 2px solid var(--bs-paper-bg);
+  border-radius: 1rem;
+  background-color: var(--bs-primary);
+  block-size: 0.85rem;
+  box-shadow: 0 0 3px var(--bs-gray-800);
+  color: var(--bs-white);
+  content: "+";
+  font-family: "Courier New", Courier, monospace;
+  font-weight: 500;
+  inline-size: 0.85rem;
+  inset-block-start: 50%;
+  inset-inline-start: 50%;
+  line-height: 1em;
+  text-align: center;
+  transform: translate(-50%, -51%);
+}
+table.dataTable.table-responsive {
+  /* To scroll within datatable area */
+}
+@media screen and (width <= 1399.98px) {
+  table.dataTable.table-responsive {
+    display: block;
+  }
+}
+
+/* Modal table style */
+.modal.dtr-bs-modal .modal-body {
+  padding: 0;
+}
+.modal.dtr-bs-modal .table {
+  margin-block-end: 0;
+}
+.modal.dtr-bs-modal .table tr:last-child > td {
+  border-block-end: 0;
+}
+.modal.dtr-bs-modal .table .btn {
+  box-shadow: none !important;
+}
+.modal.dtr-bs-modal .table .emp_name {
+  font-weight: 500;
+}
+.modal.dtr-bs-modal .dropdown-item.text-danger:active {
+  color: var(--bs-primary) !important;
+}

public/assets/vendor/libs/node-waves/node-waves.css

@@ -0,0 +1,146 @@
+/* Waves
+******************************************************************************* */
+/*!
+ * Waves v0.7.6
+ * http://fian.my.id/Waves 
+ * 
+ * Copyright 2014-2018 Alfiana E. Sibuea and other contributors 
+ * Released under the MIT license 
+ * https://github.com/fians/Waves/blob/master/LICENSE */
+.waves-effect {
+  position: relative;
+  cursor: pointer;
+  display: inline-block;
+  overflow: hidden;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+}
+.waves-effect .waves-ripple {
+  position: absolute;
+  border-radius: 50%;
+  width: 100px;
+  height: 100px;
+  margin-top: -50px;
+  margin-left: -50px;
+  opacity: 0;
+  background: rgba(0, 0, 0, 0.2);
+  background: -webkit-radial-gradient(rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
+  background: -o-radial-gradient(rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
+  background: -moz-radial-gradient(rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
+  background: radial-gradient(rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
+  -webkit-transition: all 0.5s ease-out;
+  -moz-transition: all 0.5s ease-out;
+  -o-transition: all 0.5s ease-out;
+  transition: all 0.5s ease-out;
+  -webkit-transition-property: -webkit-transform, opacity;
+  -moz-transition-property: -moz-transform, opacity;
+  -o-transition-property: -o-transform, opacity;
+  transition-property: transform, opacity;
+  -webkit-transform: scale(0) translate(0, 0);
+  -moz-transform: scale(0) translate(0, 0);
+  -ms-transform: scale(0) translate(0, 0);
+  -o-transform: scale(0) translate(0, 0);
+  transform: scale(0) translate(0, 0);
+  pointer-events: none;
+}
+.waves-effect.waves-light .waves-ripple {
+  background: rgba(255, 255, 255, 0.4);
+  background: -webkit-radial-gradient(rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
+  background: -o-radial-gradient(rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
+  background: -moz-radial-gradient(rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
+  background: radial-gradient(rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
+}
+.waves-effect.waves-classic .waves-ripple {
+  background: rgba(0, 0, 0, 0.2);
+}
+.waves-effect.waves-classic.waves-light .waves-ripple {
+  background: rgba(255, 255, 255, 0.4);
+}
+
+.waves-notransition {
+  -webkit-transition: none !important;
+  -moz-transition: none !important;
+  -o-transition: none !important;
+  transition: none !important;
+}
+
+.waves-button,
+.waves-circle {
+  -webkit-transform: translateZ(0);
+  -moz-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  -o-transform: translateZ(0);
+  transform: translateZ(0);
+  -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
+}
+
+.waves-button,
+.waves-button:hover,
+.waves-button:visited,
+.waves-button-input {
+  white-space: nowrap;
+  vertical-align: middle;
+  cursor: pointer;
+  border: none;
+  outline: none;
+  color: inherit;
+  background-color: rgba(0, 0, 0, 0);
+  font-size: 1em;
+  line-height: 1em;
+  text-align: center;
+  text-decoration: none;
+  z-index: 1;
+}
+
+.waves-button {
+  padding: 0.85em 1.1em;
+  border-radius: 0.2em;
+}
+
+.waves-button-input {
+  margin: 0;
+  padding: 0.85em 1.1em;
+}
+
+.waves-input-wrapper {
+  border-radius: 0.2em;
+  vertical-align: bottom;
+}
+.waves-input-wrapper.waves-button {
+  padding: 0;
+}
+.waves-input-wrapper .waves-button-input {
+  position: relative;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+.waves-circle {
+  text-align: center;
+  width: 2.5em;
+  height: 2.5em;
+  line-height: 2.5em;
+  border-radius: 50%;
+}
+
+.waves-float {
+  -webkit-mask-image: none;
+  -webkit-box-shadow: 0px 1px 1.5px 1px rgba(0, 0, 0, 0.12);
+  box-shadow: 0px 1px 1.5px 1px rgba(0, 0, 0, 0.12);
+  -webkit-transition: all 300ms;
+  -moz-transition: all 300ms;
+  -o-transition: all 300ms;
+  transition: all 300ms;
+}
+.waves-float:active {
+  -webkit-box-shadow: 0px 8px 20px 1px rgba(0, 0, 0, 0.3);
+  box-shadow: 0px 8px 20px 1px rgba(0, 0, 0, 0.3);
+}
+
+.waves-block {
+  display: block;
+}

public/assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.css

@@ -0,0 +1,186 @@
+/* (C) */
+/*
+ * Container style
+ */
+.ps {
+  overflow: hidden !important;
+  overflow-anchor: none;
+  -ms-overflow-style: none;
+  touch-action: auto;
+  -ms-touch-action: auto;
+}
+
+/*
+ * Scrollbar rail styles
+ */
+.ps__rail-x {
+  display: none;
+  opacity: 0;
+  transition: background-color 0.2s linear, opacity 0.2s linear;
+  -webkit-transition: background-color 0.2s linear, opacity 0.2s linear;
+  height: 15px;
+  /* there must be 'bottom' or 'top' for ps__rail-x */
+  bottom: 0px;
+  /* please don't change 'position' */
+  position: absolute;
+}
+
+.ps__rail-y {
+  display: none;
+  opacity: 0;
+  transition: background-color 0.2s linear, opacity 0.2s linear;
+  -webkit-transition: background-color 0.2s linear, opacity 0.2s linear;
+  width: 15px;
+  /* there must be 'right' or 'left' for ps__rail-y */
+  right: 0;
+  /* please don't change 'position' */
+  position: absolute;
+}
+
+.ps--active-x > .ps__rail-x,
+.ps--active-y > .ps__rail-y {
+  display: block;
+  background-color: transparent;
+}
+
+.ps:hover > .ps__rail-x,
+.ps:hover > .ps__rail-y,
+.ps--focus > .ps__rail-x,
+.ps--focus > .ps__rail-y,
+.ps--scrolling-x > .ps__rail-x,
+.ps--scrolling-y > .ps__rail-y {
+  opacity: 0.6;
+}
+
+.ps .ps__rail-x:hover,
+.ps .ps__rail-y:hover,
+.ps .ps__rail-x:focus,
+.ps .ps__rail-y:focus,
+.ps .ps__rail-x.ps--clicking,
+.ps .ps__rail-y.ps--clicking {
+  background-color: #eee;
+  opacity: 0.9;
+}
+
+/*
+ * Scrollbar thumb styles
+ */
+.ps__thumb-x {
+  background-color: #aaa;
+  border-radius: 6px;
+  transition: background-color 0.2s linear, height 0.2s ease-in-out;
+  -webkit-transition: background-color 0.2s linear, height 0.2s ease-in-out;
+  height: 6px;
+  /* there must be 'bottom' for ps__thumb-x */
+  bottom: 2px;
+  /* please don't change 'position' */
+  position: absolute;
+}
+
+.ps__thumb-y {
+  background-color: #aaa;
+  border-radius: 6px;
+  transition: background-color 0.2s linear, width 0.2s ease-in-out;
+  -webkit-transition: background-color 0.2s linear, width 0.2s ease-in-out;
+  width: 6px;
+  /* there must be 'right' for ps__thumb-y */
+  right: 2px;
+  /* please don't change 'position' */
+  position: absolute;
+}
+
+.ps__rail-x:hover > .ps__thumb-x,
+.ps__rail-x:focus > .ps__thumb-x,
+.ps__rail-x.ps--clicking .ps__thumb-x {
+  background-color: #999;
+  height: 11px;
+}
+
+.ps__rail-y:hover > .ps__thumb-y,
+.ps__rail-y:focus > .ps__thumb-y,
+.ps__rail-y.ps--clicking .ps__thumb-y {
+  background-color: #999;
+  width: 11px;
+}
+
+/* MS supports */
+@supports (-ms-overflow-style: none) {
+  .ps {
+    overflow: auto !important;
+  }
+}
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+  .ps {
+    overflow: auto !important;
+  }
+}
+.ps {
+  position: relative;
+}
+.ps .ps__rail-x {
+  block-size: 0.25rem;
+}
+.ps .ps__rail-y {
+  z-index: 3;
+  inline-size: 0.25rem;
+}
+.ps .ps__rail-x,
+.ps .ps__rail-y,
+.ps .ps__thumb-x,
+.ps .ps__thumb-y {
+  border-radius: 50rem;
+}
+.ps .ps__rail-x:hover,
+.ps .ps__rail-x:focus,
+.ps .ps__rail-x.ps--clicking,
+.ps .ps__rail-x:hover > .ps__thumb-x,
+.ps .ps__rail-x:focus > .ps__thumb-x,
+.ps .ps__rail-x.ps--clicking > .ps__thumb-x {
+  block-size: 0.375rem;
+}
+.ps .ps__rail-y:hover,
+.ps .ps__rail-y:focus,
+.ps .ps__rail-y.ps--clicking,
+.ps .ps__rail-y:hover > .ps__thumb-y,
+.ps .ps__rail-y:focus > .ps__thumb-y,
+.ps .ps__rail-y.ps--clicking > .ps__thumb-y {
+  inline-size: 0.375rem;
+}
+.ps .ps__thumb-x {
+  block-size: 0.25rem;
+  inset-block-end: 0;
+}
+.ps .ps__thumb-y {
+  inline-size: 0.25rem;
+  inset-inline-end: 0;
+}
+.ps .ps__thumb-x,
+.ps .ps__thumb-y {
+  background-color: var(--bs-gray-400);
+}
+.ps .ps__rail-x:hover,
+.ps .ps__rail-y:hover,
+.ps .ps__rail-x:focus,
+.ps .ps__rail-y:focus,
+.ps .ps__rail-x.ps--clicking,
+.ps .ps__rail-y.ps--clicking {
+  background-color: var(--bs-gray-200);
+}
+.ps .ps__rail-x:hover > .ps__thumb-x,
+.ps .ps__rail-y:hover > .ps__thumb-y,
+.ps .ps__rail-x:focus > .ps__thumb-x,
+.ps .ps__rail-y:focus > .ps__thumb-y,
+.ps .ps__rail-x.ps--clicking > .ps__thumb-x,
+.ps .ps__rail-y.ps--clicking > .ps__thumb-y {
+  background-color: var(--bs-gray-700);
+}
+
+/* Firefox width issue fixed */
+@supports (-moz-appearance: none) {
+  #both-scrollbars-example {
+    margin-block: 0;
+    margin-inline: auto;
+    max-inline-size: 1080px;
+    padding-inline: 0;
+  }
+}

public/assets/vendor/libs/select2/select2.css

@@ -0,0 +1,868 @@
+/* Select2 */
+/* ******************************************************************************* */
+/* (C) */
+.select2-container {
+  box-sizing: border-box;
+  display: inline-block;
+  margin: 0;
+  position: relative;
+  vertical-align: middle;
+}
+.select2-container .select2-selection--single {
+  box-sizing: border-box;
+  cursor: pointer;
+  display: block;
+  height: 28px;
+  user-select: none;
+  -webkit-user-select: none;
+}
+.select2-container .select2-selection--single .select2-selection__rendered {
+  display: block;
+  padding-left: 8px;
+  padding-right: 20px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.select2-container .select2-selection--single .select2-selection__clear {
+  position: relative;
+}
+.select2-container[dir=rtl] .select2-selection--single .select2-selection__rendered {
+  padding-right: 8px;
+  padding-left: 20px;
+}
+.select2-container .select2-selection--multiple {
+  box-sizing: border-box;
+  cursor: pointer;
+  display: block;
+  min-height: 32px;
+  user-select: none;
+  -webkit-user-select: none;
+}
+.select2-container .select2-selection--multiple .select2-selection__rendered {
+  display: inline-block;
+  overflow: hidden;
+  padding-left: 8px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.select2-container .select2-search--inline {
+  float: left;
+}
+.select2-container .select2-search--inline .select2-search__field {
+  box-sizing: border-box;
+  border: none;
+  font-size: 100%;
+  margin-top: 5px;
+  padding: 0;
+}
+.select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+}
+
+.select2-dropdown {
+  background-color: white;
+  border: 1px solid #aaa;
+  border-radius: 4px;
+  box-sizing: border-box;
+  display: block;
+  position: absolute;
+  left: -100000px;
+  width: 100%;
+  z-index: 1051;
+}
+
+.select2-results {
+  display: block;
+}
+
+.select2-results__options {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.select2-results__option {
+  padding: 6px;
+  user-select: none;
+  -webkit-user-select: none;
+}
+.select2-results__option[aria-selected] {
+  cursor: pointer;
+}
+
+.select2-container--open .select2-dropdown {
+  left: 0;
+}
+
+.select2-container--open .select2-dropdown--above {
+  border-bottom: none;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.select2-container--open .select2-dropdown--below {
+  border-top: none;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.select2-search--dropdown {
+  display: block;
+  padding: 4px;
+}
+.select2-search--dropdown .select2-search__field {
+  padding: 4px;
+  width: 100%;
+  box-sizing: border-box;
+}
+.select2-search--dropdown .select2-search__field::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+}
+.select2-search--dropdown.select2-search--hide {
+  display: none;
+}
+
+.select2-close-mask {
+  border: 0;
+  margin: 0;
+  padding: 0;
+  display: block;
+  position: fixed;
+  left: 0;
+  top: 0;
+  min-height: 100%;
+  min-width: 100%;
+  height: auto;
+  width: auto;
+  opacity: 0;
+  z-index: 99;
+  background-color: #fff;
+  filter: alpha(opacity=0);
+}
+
+.select2-hidden-accessible {
+  border: 0 !important;
+  clip: rect(0 0 0 0) !important;
+  -webkit-clip-path: inset(50%) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  overflow: hidden !important;
+  padding: 0 !important;
+  position: absolute !important;
+  width: 1px !important;
+  white-space: nowrap !important;
+}
+
+.select2-container--default .select2-selection--single {
+  background-color: #fff;
+  border: 1px solid #aaa;
+  border-radius: 4px;
+}
+.select2-container--default .select2-selection--single .select2-selection__rendered {
+  color: #444;
+  line-height: 28px;
+}
+.select2-container--default .select2-selection--single .select2-selection__clear {
+  cursor: pointer;
+  float: right;
+  font-weight: bold;
+}
+.select2-container--default .select2-selection--single .select2-selection__placeholder {
+  color: #999;
+}
+.select2-container--default .select2-selection--single .select2-selection__arrow {
+  height: 26px;
+  position: absolute;
+  top: 1px;
+  right: 1px;
+  width: 20px;
+}
+.select2-container--default .select2-selection--single .select2-selection__arrow b {
+  border-color: #888 transparent transparent transparent;
+  border-style: solid;
+  border-width: 5px 4px 0 4px;
+  height: 0;
+  left: 50%;
+  margin-left: -4px;
+  margin-top: -2px;
+  position: absolute;
+  top: 50%;
+  width: 0;
+}
+.select2-container--default[dir=rtl] .select2-selection--single .select2-selection__clear {
+  float: left;
+}
+.select2-container--default[dir=rtl] .select2-selection--single .select2-selection__arrow {
+  left: 1px;
+  right: auto;
+}
+.select2-container--default.select2-container--disabled .select2-selection--single {
+  background-color: #eee;
+  cursor: default;
+}
+.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear {
+  display: none;
+}
+.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
+  border-color: transparent transparent #888 transparent;
+  border-width: 0 4px 5px 4px;
+}
+.select2-container--default .select2-selection--multiple {
+  background-color: white;
+  border: 1px solid #aaa;
+  border-radius: 4px;
+  cursor: text;
+}
+.select2-container--default .select2-selection--multiple .select2-selection__rendered {
+  box-sizing: border-box;
+  list-style: none;
+  margin: 0;
+  padding: 0 5px;
+  width: 100%;
+}
+.select2-container--default .select2-selection--multiple .select2-selection__rendered li {
+  list-style: none;
+}
+.select2-container--default .select2-selection--multiple .select2-selection__clear {
+  cursor: pointer;
+  float: right;
+  font-weight: bold;
+  margin-top: 5px;
+  margin-right: 10px;
+  padding: 1px;
+}
+.select2-container--default .select2-selection--multiple .select2-selection__choice {
+  background-color: #e4e4e4;
+  border: 1px solid #aaa;
+  border-radius: 4px;
+  cursor: default;
+  float: left;
+  margin-right: 5px;
+  margin-top: 5px;
+  padding: 0 5px;
+}
+.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
+  color: #999;
+  cursor: pointer;
+  display: inline-block;
+  font-weight: bold;
+  margin-right: 2px;
+}
+.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
+  color: #333;
+}
+.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice, .select2-container--default[dir=rtl] .select2-selection--multiple .select2-search--inline {
+  float: right;
+}
+.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice {
+  margin-left: 5px;
+  margin-right: auto;
+}
+.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice__remove {
+  margin-left: 2px;
+  margin-right: auto;
+}
+.select2-container--default.select2-container--focus .select2-selection--multiple {
+  border: solid black 1px;
+  outline: 0;
+}
+.select2-container--default.select2-container--disabled .select2-selection--multiple {
+  background-color: #eee;
+  cursor: default;
+}
+.select2-container--default.select2-container--disabled .select2-selection__choice__remove {
+  display: none;
+}
+.select2-container--default.select2-container--open.select2-container--above .select2-selection--single, .select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+.select2-container--default.select2-container--open.select2-container--below .select2-selection--single, .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.select2-container--default .select2-search--dropdown .select2-search__field {
+  border: 1px solid #aaa;
+}
+.select2-container--default .select2-search--inline .select2-search__field {
+  background: transparent;
+  border: none;
+  outline: 0;
+  box-shadow: none;
+  -webkit-appearance: textfield;
+}
+.select2-container--default .select2-results > .select2-results__options {
+  max-height: 200px;
+  overflow-y: auto;
+}
+.select2-container--default .select2-results__option[role=group] {
+  padding: 0;
+}
+.select2-container--default .select2-results__option[aria-disabled=true] {
+  color: #999;
+}
+.select2-container--default .select2-results__option[aria-selected=true] {
+  background-color: #ddd;
+}
+.select2-container--default .select2-results__option .select2-results__option {
+  padding-left: 1em;
+}
+.select2-container--default .select2-results__option .select2-results__option .select2-results__group {
+  padding-left: 0;
+}
+.select2-container--default .select2-results__option .select2-results__option .select2-results__option {
+  margin-left: -1em;
+  padding-left: 2em;
+}
+.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
+  margin-left: -2em;
+  padding-left: 3em;
+}
+.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
+  margin-left: -3em;
+  padding-left: 4em;
+}
+.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
+  margin-left: -4em;
+  padding-left: 5em;
+}
+.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
+  margin-left: -5em;
+  padding-left: 6em;
+}
+.select2-container--default .select2-results__option--highlighted[aria-selected] {
+  background-color: #5897fb;
+  color: white;
+}
+.select2-container--default .select2-results__group {
+  cursor: default;
+  display: block;
+  padding: 6px;
+}
+
+.select2-container--classic .select2-selection--single {
+  background-color: #f7f7f7;
+  border: 1px solid var(--bs-gray-200);
+  border-radius: 0.375rem;
+  outline: 0;
+  background-image: -webkit-linear-gradient(top, white 50%, #eeeeee 100%);
+  background-image: -o-linear-gradient(top, white 50%, #eeeeee 100%);
+  background-image: linear-gradient(to bottom, white 50%, #eeeeee 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FFFFFFFF", endColorstr="#FFEEEEEE", GradientType=0);
+}
+.select2-container--classic .select2-selection--single:focus {
+  border: 1px solid #5897fb;
+}
+.select2-container--classic .select2-selection--single .select2-selection__rendered {
+  color: #444;
+  line-height: 28px;
+}
+.select2-container--classic .select2-selection--single .select2-selection__clear {
+  cursor: pointer;
+  float: right;
+  font-weight: bold;
+  margin-right: 10px;
+}
+.select2-container--classic .select2-selection--single .select2-selection__placeholder {
+  color: #999;
+}
+.select2-container--classic .select2-selection--single .select2-selection__arrow {
+  background-color: #ddd;
+  border: none;
+  border-left: 1px solid var(--bs-gray-200);
+  border-top-right-radius: 0.375rem;
+  border-bottom-right-radius: 0.375rem;
+  height: 26px;
+  position: absolute;
+  top: 1px;
+  right: 1px;
+  width: 20px;
+  background-image: -webkit-linear-gradient(top, #eeeeee 50%, #cccccc 100%);
+  background-image: -o-linear-gradient(top, #eeeeee 50%, #cccccc 100%);
+  background-image: linear-gradient(to bottom, #eeeeee 50%, #cccccc 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FFEEEEEE", endColorstr="#FFCCCCCC", GradientType=0);
+}
+.select2-container--classic .select2-selection--single .select2-selection__arrow b {
+  border-color: #888 transparent transparent transparent;
+  border-style: solid;
+  border-width: 5px 4px 0 4px;
+  height: 0;
+  left: 50%;
+  margin-left: -4px;
+  margin-top: -2px;
+  position: absolute;
+  top: 50%;
+  width: 0;
+}
+.select2-container--classic[dir=rtl] .select2-selection--single .select2-selection__clear {
+  float: left;
+}
+.select2-container--classic[dir=rtl] .select2-selection--single .select2-selection__arrow {
+  border: none;
+  border-right: 1px solid var(--bs-gray-200);
+  border-radius: 0;
+  border-top-left-radius: 0.375rem;
+  border-bottom-left-radius: 0.375rem;
+  left: 1px;
+  right: auto;
+}
+.select2-container--classic.select2-container--open .select2-selection--single {
+  border: 1px solid #5897fb;
+}
+.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow {
+  background: transparent;
+  border: none;
+}
+.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow b {
+  border-color: transparent transparent #888 transparent;
+  border-width: 0 4px 5px 4px;
+}
+.select2-container--classic.select2-container--open.select2-container--above .select2-selection--single {
+  border-top: none;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  background-image: -webkit-linear-gradient(top, white 0%, #eeeeee 50%);
+  background-image: -o-linear-gradient(top, white 0%, #eeeeee 50%);
+  background-image: linear-gradient(to bottom, white 0%, #eeeeee 50%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FFFFFFFF", endColorstr="#FFEEEEEE", GradientType=0);
+}
+.select2-container--classic.select2-container--open.select2-container--below .select2-selection--single {
+  border-bottom: none;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  background-image: -webkit-linear-gradient(top, #eeeeee 50%, white 100%);
+  background-image: -o-linear-gradient(top, #eeeeee 50%, white 100%);
+  background-image: linear-gradient(to bottom, #eeeeee 50%, white 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FFEEEEEE", endColorstr="#FFFFFFFF", GradientType=0);
+}
+.select2-container--classic .select2-selection--multiple {
+  background-color: white;
+  border: 1px solid var(--bs-gray-200);
+  border-radius: 0.375rem;
+  cursor: text;
+  outline: 0;
+}
+.select2-container--classic .select2-selection--multiple:focus {
+  border: 1px solid #5897fb;
+}
+.select2-container--classic .select2-selection--multiple .select2-selection__rendered {
+  list-style: none;
+  margin: 0;
+  padding: 0 5px;
+}
+.select2-container--classic .select2-selection--multiple .select2-selection__clear {
+  display: none;
+}
+.select2-container--classic .select2-selection--multiple .select2-selection__choice {
+  background-color: #e4e4e4;
+  border: 1px solid var(--bs-gray-200);
+  border-radius: 0.375rem;
+  cursor: default;
+  float: left;
+  margin-right: 5px;
+  margin-top: 5px;
+  padding: 0 5px;
+}
+.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove {
+  color: #888;
+  cursor: pointer;
+  display: inline-block;
+  font-weight: bold;
+  margin-right: 2px;
+}
+.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover {
+  color: #555;
+}
+.select2-container--classic[dir=rtl] .select2-selection--multiple .select2-selection__choice {
+  float: right;
+  margin-left: 5px;
+  margin-right: auto;
+}
+.select2-container--classic[dir=rtl] .select2-selection--multiple .select2-selection__choice__remove {
+  margin-left: 2px;
+  margin-right: auto;
+}
+.select2-container--classic.select2-container--open .select2-selection--multiple {
+  border: 1px solid #5897fb;
+}
+.select2-container--classic.select2-container--open.select2-container--above .select2-selection--multiple {
+  border-top: none;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+.select2-container--classic.select2-container--open.select2-container--below .select2-selection--multiple {
+  border-bottom: none;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.select2-container--classic .select2-search--dropdown .select2-search__field {
+  border: 1px solid var(--bs-gray-200);
+  outline: 0;
+}
+.select2-container--classic .select2-search--inline .select2-search__field {
+  outline: 0;
+  box-shadow: none;
+}
+.select2-container--classic .select2-dropdown {
+  background-color: white;
+  border: 1px solid transparent;
+}
+.select2-container--classic .select2-dropdown--above {
+  border-bottom: none;
+}
+.select2-container--classic .select2-dropdown--below {
+  border-top: none;
+}
+.select2-container--classic .select2-results > .select2-results__options {
+  max-height: 200px;
+  overflow-y: auto;
+}
+.select2-container--classic .select2-results__option[role=group] {
+  padding: 0;
+}
+.select2-container--classic .select2-results__option[aria-disabled=true] {
+  color: grey;
+}
+.select2-container--classic .select2-results__option--highlighted[aria-selected] {
+  background-color: #3875d7;
+  color: white;
+}
+.select2-container--classic .select2-results__group {
+  cursor: default;
+  display: block;
+  padding: 6px;
+}
+.select2-container--classic.select2-container--open .select2-dropdown {
+  border-color: #5897fb;
+}
+
+.select2-container {
+  --bs-select-height: 2.375rem;
+  --bs-select-color: var(--bs-heading-color);
+  --bs-select-border-width: var(--bs-border-width);
+  --bs-select-border-color: color-mix(in sRGB, var(--bs-base-color) 22%, var(--bs-paper-bg));
+  --bs-select-active-border: 0 0 0 var(--bs-border-width) var(--bs-primary);
+  --bs-select-active-border-color: var(--bs-primary);
+  --bs-select-active-box-shadow: 0 0.125rem 0.375rem 0 rgba(var(--bs-primary-rgb), 0.3);
+  --bs-select-disabled-color: var(--bs-secondary-color);
+  --bs-select-disabled-border-color: color-mix(in sRGB, var(--bs-base-color) 24%, var(--bs-paper-bg));
+  --bs-select-disabled-bg: var(--bs-gray-50);
+  --bs-select-arrow: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 22" fill="none"%3e%3cpath d="M10.9999 12.0743L15.5374 7.53676L16.8336 8.83292L10.9999 14.6666L5.16626 8.83292L6.46243 7.53676L10.9999 12.0743Z" fill="%232f2b3d" fill-opacity="0.9"/%3e%3c/svg%3e');
+  --bs-select-disabled-arrow: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 22" fill="none"%3e%3cpath d="M10.9999 12.0743L15.5374 7.53676L16.8336 8.83292L10.9999 14.6666L5.16626 8.83292L6.46243 7.53676L10.9999 12.0743Z" fill="%23acaab1" fill-opacity="0.9"/%3e%3c/svg%3e');
+  /* Dropdown */
+  --bs-select-dropdown-border-width: 0;
+  --bs-select-dropdown-border-color: var(--bs-border-color);
+  --bs-select-dropdown-bg: var(--bs-paper-bg);
+  --bs-select-dropdown-box-shadow: var(--bs-box-shadow-lg);
+  --bs-select-dropdown-link-hover-bg: var(--bs-gray-50);
+  --bs-select-dropdown-link-active-bg: rgba(var(--bs-primary-rgb), 0.16);
+  --bs-select-dropdown-link-active-color: var(--bs-primary);
+  /* Multiple */
+  --bs-select-multiple-padding-x: .3125rem;
+  --bs-select-multiple-padding-y: .3125rem;
+  --bs-select-multiple-line-height: 1.5rem;
+  --bs-select-multiple-choice-color: var(--bs-body-color);
+  --bs-select-multiple-choice-bg: color-mix(in sRGB, var(--bs-base-color) 8%, var(--bs-paper-bg));
+  --bs-select-multiple-disabled-choice-color: var(--bs-secondary-color);
+  --bs-select-multiple-disabled-choice-bg: color-mix(in sRGB, var(--bs-base-color) 18%, var(--bs-paper-bg));
+  /* using below style to assign default width to the select2 container */
+  inline-size: 100% !important;
+}
+.select2-container .select2-selection--single {
+  block-size: var(--bs-select-height);
+}
+.select2-container.select2-container--default .select2-selection--single .select2-selection__rendered {
+  padding-inline-end: 2.1875rem;
+  padding-inline-start: 0.875rem;
+}
+
+.select2-search__field {
+  color: var(--bs-heading-color);
+}
+
+.select2-dropdown {
+  border: var(--bs-select-dropdown-border-width) solid var(--bs-select-dropdown-border-color);
+  background-color: var(--bs-select-dropdown-bg);
+  box-shadow: var(--bs-select-dropdown-box-shadow);
+  border-radius: var(--bs-border-radius);
+}
+
+.select2-results__option[role=option] {
+  border-radius: 0.375rem;
+  margin-block: 0.125rem;
+  margin-inline: 0.5rem;
+  padding-block: 0.543rem;
+  padding-inline: 0.75rem;
+}
+.select2-results__option .select2-results__group {
+  font-size: 0.8125rem;
+  font-weight: 500;
+  padding-block: 0.5rem;
+  padding-inline: 0.46875rem;
+  text-transform: uppercase;
+}
+
+.select2-results__options {
+  /* Select option levels loop for padding left/right */
+}
+.select2-results__options .select2-results__options .select2-results__group {
+  margin-inline-start: -0.8125rem;
+}
+.select2-results__options .select2-results__options .select2-results__option .select2-results__option {
+  margin-inline-start: 2rem;
+}
+.select2-results__options .select2-results__options .select2-results__group {
+  margin-inline-start: 0.1875rem;
+}
+.select2-results__options .select2-results__options .select2-results__option .select2-results__option .select2-results__option {
+  margin-inline-start: 3rem;
+}
+.select2-results__options .select2-results__options .select2-results__group {
+  margin-inline-start: 1.1875rem;
+}
+.select2-results__options .select2-results__options .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
+  margin-inline-start: 4rem;
+}
+.select2-results__options .select2-results__options .select2-results__group {
+  margin-inline-start: 2.1875rem;
+}
+.select2-results__options .select2-results__options .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
+  margin-inline-start: 5rem;
+}
+
+.select2-container--default {
+  /* Remove outlines */
+  /* search field styles */
+  /* Single Selection */
+  /* Multiple Selection */
+}
+.select2-container--default,
+.select2-container--default * {
+  outline: 0;
+}
+.select2-container--default .select2-selection {
+  border: var(--bs-select-border-width) solid var(--bs-select-border-color);
+  background-color: transparent;
+  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  border-radius: 0.375rem;
+}
+.select2-container--default .select2-selection:hover {
+  border-color: var(--bs-gray-600);
+}
+.select2-container--default .select2-search--dropdown .select2-search__field {
+  border-color: var(--bs-select-border-color);
+  border-radius: var(--bs-border-radius);
+  background-color: var(--bs-select-dropdown-bg);
+  inline-size: calc(100% - 1rem);
+  margin-block: 0.25rem;
+  margin-block-end: 0;
+  margin-inline: 0.5rem;
+}
+.select2-container--default .select2-results__message {
+  margin-inline: 0.5rem;
+}
+.select2-container--default .select2-selection--single .select2-selection__clear {
+  color: var(--bs-secondary-color);
+  font-weight: 500;
+  inset-inline-end: 0.625rem;
+}
+.select2-container--default .select2-selection--single .select2-selection__placeholder {
+  color: var(--bs-secondary-color);
+}
+.select2-container--default .select2-selection--single .select2-selection__rendered {
+  color: var(--bs-select-color);
+  line-height: calc(var(--bs-select-height) - var(--bs-select-border-width) * 2);
+}
+.select2-container--default .select2-selection--single .select2-selection__arrow {
+  position: absolute;
+  block-size: 100%;
+  inline-size: 2.625rem;
+  inset-block-start: var(--bs-border-width);
+  inset-inline-end: 0.375rem !important;
+  inset-inline-start: auto;
+}
+.select2-container--default .select2-selection--single .select2-selection__arrow b {
+  border: none;
+  margin: 0;
+  background-image: var(--bs-select-arrow);
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 20px 19px;
+  block-size: 100%;
+  inline-size: 100%;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  transform-origin: center;
+  transition: transform 0.3s ease;
+}
+.is-invalid ~ .select2-container--default .select2-selection--single {
+  border-width: 2px;
+  border-color: var(--bs-form-validation-border-color);
+  box-shadow: var(--bs-form-validation-shadow);
+}
+.select2-container--default .select2-selection__rendered:has(> .select2-selection__placeholder) ~ .select2-selection__arrow b {
+  background-image: var(--bs-select-disabled-arrow);
+}
+.select2-container--default .select2-selection--multiple {
+  min-block-size: var(--bs-select-height);
+}
+.select2-container--default .select2-selection--multiple .select2-selection__rendered {
+  display: block;
+  margin-block-start: calc(var(--bs-select-multiple-padding-y) * -1);
+  margin-inline-end: calc(var(--bs-select-multiple-padding-x) * -1);
+  padding-block: var(--bs-select-multiple-padding-y);
+  padding-inline: var(--bs-select-multiple-padding-x);
+}
+.select2-container--default .select2-selection--multiple .select2-selection__rendered .select2-search--inline:first-child .select2-search__field {
+  padding-inline-start: calc(0.9375rem - var(--bs-select-multiple-padding-x));
+}
+.select2-container--default .select2-selection--multiple .select2-selection__clear {
+  font-weight: 500;
+  margin-block-start: 0.25rem;
+}
+.select2-container--default .select2-selection--multiple .select2-search--inline {
+  line-height: var(--bs-select-multiple-line-height);
+}
+.select2-container--default .select2-selection--multiple .select2-selection__choice {
+  position: relative;
+  border-color: var(--bs-select-multiple-choice-bg);
+  border-radius: 0.25rem;
+  background-color: var(--bs-select-multiple-choice-bg);
+  color: var(--bs-select-multiple-choice-color);
+  font-size: 0.8125rem;
+  line-height: var(--bs-select-multiple-line-height);
+  padding-inline: 0.5rem 1rem;
+}
+:dir(rtl) .select2-container--default .select2-selection--multiple .select2-selection__choice, .select2-container--default .select2-selection--multiple .select2-selection__choice {
+  margin-block-start: var(--bs-select-multiple-padding-y);
+  margin-inline: 0 var(--bs-select-multiple-padding-x);
+}
+.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
+  position: absolute;
+  color: inherit;
+  font-weight: 500;
+  inset-inline-end: 0.3rem;
+  opacity: 0.5;
+}
+:dir(rtl) .select2-container--default .select2-selection--multiple .select2-selection__choice__remove, .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
+  margin-inline-end: 0;
+  margin-inline-start: 0.25rem;
+}
+.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
+  color: inherit;
+  opacity: 0.8;
+}
+.select2-container--default .select2-results > .select2-results__options {
+  margin-block: 0.5rem;
+}
+.select2-container--default .select2-results__option {
+  color: var(--bs-select-color);
+}
+.select2-container--default .select2-results__option--highlighted[aria-selected] {
+  background-color: var(--bs-select-dropdown-link-hover-bg);
+  color: var(--bs-select-color);
+}
+.select2-container--default .select2-results__option[aria-selected=true] {
+  background-color: var(--bs-select-dropdown-link-active-bg);
+  color: var(--bs-select-dropdown-link-active-color);
+}
+.select2-container--default .select2-results__option[aria-disabled=true] {
+  background-color: var(--bs-select-disabled-bg);
+  color: var(--bs-select-disabled-color);
+}
+.select2-container--default .select2-results__option .select2-results__option {
+  padding-inline-start: 0.75rem;
+}
+.select2-container--default.select2-container--focus .select2-selection, .select2-container--default.select2-container--open .select2-selection {
+  border-width: 2px;
+  border-color: var(--bs-select-active-border-color);
+  box-shadow: var(--bs-select-active-box-shadow);
+}
+.select2-container--default.select2-container--focus .select2-selection--single .select2-selection__rendered, .select2-container--default.select2-container--open .select2-selection--single .select2-selection__rendered {
+  line-height: calc(var(--bs-select-height) - 4px);
+  padding-inline-end: 2.125rem;
+  padding-inline-start: calc(0.9375rem - 2px);
+}
+.select2-container--default.select2-container--focus .select2-selection--single .select2-selection__arrow b, .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
+  border: none;
+  transform: rotate(180deg);
+}
+.select2-container--default.select2-container--focus .select2-selection--multiple .select2-selection__rendered, .select2-container--default.select2-container--open .select2-selection--multiple .select2-selection__rendered {
+  padding-block: calc(var(--bs-select-multiple-padding-y) - var(--bs-select-border-width));
+  padding-inline-start: calc(var(--bs-select-multiple-padding-x) - var(--bs-select-border-width));
+}
+.select2-container--default.select2-container--disabled {
+  pointer-events: none;
+}
+.select2-container--default.select2-container--disabled .select2-selection--multiple,
+.select2-container--default.select2-container--disabled .select2-selection--single {
+  border-color: var(--bs-select-disabled-border-color);
+  background-color: var(--bs-select-disabled-bg);
+  box-shadow: none;
+}
+.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__rendered {
+  color: var(--bs-select-disabled-color);
+}
+.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__arrow b {
+  background-image: var(--bs-select-disabled-arrow);
+}
+.select2-container--default.select2-container--disabled .select2-selection--multiple .select2-selection__choice {
+  border-color: var(--bs-select-multiple-disabled-choice-bg);
+  background-color: var(--bs-select-multiple-disabled-choice-bg);
+  color: var(--bs-select-multiple-disabled-choice-color);
+}
+
+.select2-primary .select2-container {
+  --bs-select-multiple-choice-bg: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--bs-primary));
+  --bs-select-multiple-choice-color: var(--bs-primary);
+}
+
+.select2-secondary .select2-container {
+  --bs-select-multiple-choice-bg: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--bs-secondary));
+  --bs-select-multiple-choice-color: var(--bs-secondary);
+}
+
+.select2-success .select2-container {
+  --bs-select-multiple-choice-bg: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--bs-success));
+  --bs-select-multiple-choice-color: var(--bs-success);
+}
+
+.select2-info .select2-container {
+  --bs-select-multiple-choice-bg: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--bs-info));
+  --bs-select-multiple-choice-color: var(--bs-info);
+}
+
+.select2-warning .select2-container {
+  --bs-select-multiple-choice-bg: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--bs-warning));
+  --bs-select-multiple-choice-color: var(--bs-warning);
+}
+
+.select2-danger .select2-container {
+  --bs-select-multiple-choice-bg: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--bs-danger));
+  --bs-select-multiple-choice-color: var(--bs-danger);
+}
+
+.select2-light .select2-container {
+  --bs-select-multiple-choice-bg: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--bs-light));
+  --bs-select-multiple-choice-color: var(--bs-light);
+}
+
+.select2-dark .select2-container {
+  --bs-select-multiple-choice-bg: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--bs-dark));
+  --bs-select-multiple-choice-color: var(--bs-dark);
+}
+
+.select2-gray .select2-container {
+  --bs-select-multiple-choice-bg: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--bs-gray));
+  --bs-select-multiple-choice-color: var(--bs-gray);
+}
+
+[data-bs-theme=dark] .select2-container {
+  --bs-select-arrow: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 22" fill="none"%3e%3cpath d="M10.9999 12.0743L15.5374 7.53676L16.8336 8.83292L10.9999 14.6666L5.16626 8.83292L6.46243 7.53676L10.9999 12.0743Z" fill="%23fff" fill-opacity="0.9"/%3e%3c/svg%3e');
+  --bs-select-disabled-arrow: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 22" fill="none"%3e%3cpath d="M10.9999 12.0743L15.5374 7.53676L16.8336 8.83292L10.9999 14.6666L5.16626 8.83292L6.46243 7.53676L10.9999 12.0743Z" fill="%2376778e" fill-opacity="0.9"/%3e%3c/svg%3e');
+}

public/assets/vendor/libs/swiper/swiper.css

@@ -0,0 +1,926 @@
+/* (C) */
+/**
+ * Swiper 11.1.15
+ * Most modern mobile touch slider and framework with hardware accelerated transitions
+ * https://swiperjs.com
+ *
+ * Copyright 2014-2024 Vladimir Kharlampidi
+ *
+ * Released under the MIT License
+ *
+ * Released on: November 18, 2024
+ */
+/* FONT_START */
+@font-face {
+  font-family: "swiper-icons";
+  src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA");
+  font-weight: 400;
+  font-style: normal;
+}
+/* FONT_END */
+:root {
+  --swiper-theme-color: #007aff;
+  /*
+  --swiper-preloader-color: var(--swiper-theme-color);
+  --swiper-wrapper-transition-timing-function: initial;
+  */
+}
+
+:host {
+  position: relative;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  z-index: 1;
+}
+
+.swiper {
+  margin-left: auto;
+  margin-right: auto;
+  position: relative;
+  overflow: hidden;
+  list-style: none;
+  padding: 0;
+  /* Fix of Webkit flickering */
+  z-index: 1;
+  display: block;
+}
+
+.swiper-vertical > .swiper-wrapper {
+  flex-direction: column;
+}
+
+.swiper-wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  display: flex;
+  transition-property: transform;
+  transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
+  box-sizing: content-box;
+}
+
+.swiper-android .swiper-slide,
+.swiper-ios .swiper-slide,
+.swiper-wrapper {
+  transform: translate3d(0px, 0, 0);
+}
+
+.swiper-horizontal {
+  touch-action: pan-y;
+}
+
+.swiper-vertical {
+  touch-action: pan-x;
+}
+
+.swiper-slide {
+  flex-shrink: 0;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  transition-property: transform;
+  display: block;
+}
+
+.swiper-slide-invisible-blank {
+  visibility: hidden;
+}
+
+/* Auto Height */
+.swiper-autoheight,
+.swiper-autoheight .swiper-slide {
+  height: auto;
+}
+
+.swiper-autoheight .swiper-wrapper {
+  align-items: flex-start;
+  transition-property: transform, height;
+}
+
+.swiper-backface-hidden .swiper-slide {
+  transform: translateZ(0);
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+
+/* 3D Effects */
+.swiper-3d.swiper-css-mode .swiper-wrapper {
+  perspective: 1200px;
+}
+
+.swiper-3d .swiper-wrapper {
+  transform-style: preserve-3d;
+}
+
+.swiper-3d {
+  perspective: 1200px;
+}
+
+.swiper-3d .swiper-slide,
+.swiper-3d .swiper-cube-shadow {
+  transform-style: preserve-3d;
+}
+
+/* CSS Mode */
+.swiper-css-mode > .swiper-wrapper {
+  overflow: auto;
+  scrollbar-width: none;
+  /* For Firefox */
+  -ms-overflow-style: none;
+  /* For Internet Explorer and Edge */
+}
+
+.swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {
+  display: none;
+}
+
+.swiper-css-mode > .swiper-wrapper > .swiper-slide {
+  scroll-snap-align: start start;
+}
+
+.swiper-css-mode.swiper-horizontal > .swiper-wrapper {
+  scroll-snap-type: x mandatory;
+}
+
+.swiper-css-mode.swiper-vertical > .swiper-wrapper {
+  scroll-snap-type: y mandatory;
+}
+
+.swiper-css-mode.swiper-free-mode > .swiper-wrapper {
+  scroll-snap-type: none;
+}
+
+.swiper-css-mode.swiper-free-mode > .swiper-wrapper > .swiper-slide {
+  scroll-snap-align: none;
+}
+
+.swiper-css-mode.swiper-centered > .swiper-wrapper::before {
+  content: "";
+  flex-shrink: 0;
+  order: 9999;
+}
+
+.swiper-css-mode.swiper-centered > .swiper-wrapper > .swiper-slide {
+  scroll-snap-align: center center;
+  scroll-snap-stop: always;
+}
+
+.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
+  margin-inline-start: var(--swiper-centered-offset-before);
+}
+
+.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper::before {
+  height: 100%;
+  min-height: 1px;
+  width: var(--swiper-centered-offset-after);
+}
+
+.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
+  margin-block-start: var(--swiper-centered-offset-before);
+}
+
+.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper::before {
+  width: 100%;
+  min-width: 1px;
+  height: var(--swiper-centered-offset-after);
+}
+
+/* Slide styles start */
+/* 3D Shadows */
+.swiper-3d .swiper-slide-shadow,
+.swiper-3d .swiper-slide-shadow-left,
+.swiper-3d .swiper-slide-shadow-right,
+.swiper-3d .swiper-slide-shadow-top,
+.swiper-3d .swiper-slide-shadow-bottom,
+.swiper-3d .swiper-slide-shadow,
+.swiper-3d .swiper-slide-shadow-left,
+.swiper-3d .swiper-slide-shadow-right,
+.swiper-3d .swiper-slide-shadow-top,
+.swiper-3d .swiper-slide-shadow-bottom {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 10;
+}
+
+.swiper-3d .swiper-slide-shadow {
+  background: rgba(0, 0, 0, 0.15);
+}
+
+.swiper-3d .swiper-slide-shadow-left {
+  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+}
+
+.swiper-3d .swiper-slide-shadow-right {
+  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+}
+
+.swiper-3d .swiper-slide-shadow-top {
+  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+}
+
+.swiper-3d .swiper-slide-shadow-bottom {
+  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+}
+
+.swiper-lazy-preloader {
+  width: 42px;
+  height: 42px;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  margin-left: -21px;
+  margin-top: -21px;
+  z-index: 10;
+  transform-origin: 50%;
+  box-sizing: border-box;
+  border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
+  border-radius: 50%;
+  border-top-color: transparent;
+}
+
+.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,
+.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader {
+  animation: swiper-preloader-spin 1s infinite linear;
+}
+
+.swiper-lazy-preloader-white {
+  --swiper-preloader-color: #fff;
+}
+
+.swiper-lazy-preloader-black {
+  --swiper-preloader-color: #000;
+}
+
+@keyframes swiper-preloader-spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+/* Slide styles end */
+.swiper-virtual .swiper-slide {
+  -webkit-backface-visibility: hidden;
+  transform: translateZ(0);
+}
+
+.swiper-virtual.swiper-css-mode .swiper-wrapper::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  pointer-events: none;
+}
+
+.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after {
+  height: 1px;
+  width: var(--swiper-virtual-size);
+}
+
+.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after {
+  width: 1px;
+  height: var(--swiper-virtual-size);
+}
+
+:root {
+  --swiper-navigation-size: 44px;
+  /*
+  --swiper-navigation-top-offset: 50%;
+  --swiper-navigation-sides-offset: 10px;
+  --swiper-navigation-color: var(--swiper-theme-color);
+  */
+}
+
+.swiper-button-prev,
+.swiper-button-next {
+  position: absolute;
+  top: var(--swiper-navigation-top-offset, 50%);
+  width: calc(var(--swiper-navigation-size) / 44 * 27);
+  height: var(--swiper-navigation-size);
+  margin-top: calc(0px - var(--swiper-navigation-size) / 2);
+  z-index: 10;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--swiper-navigation-color, var(--swiper-theme-color));
+}
+
+.swiper-button-prev.swiper-button-disabled,
+.swiper-button-next.swiper-button-disabled {
+  opacity: 0.35;
+  cursor: auto;
+  pointer-events: none;
+}
+
+.swiper-button-prev.swiper-button-hidden,
+.swiper-button-next.swiper-button-hidden {
+  opacity: 0;
+  cursor: auto;
+  pointer-events: none;
+}
+
+.swiper-navigation-disabled .swiper-button-prev,
+.swiper-navigation-disabled .swiper-button-next {
+  display: none !important;
+}
+
+.swiper-button-prev svg,
+.swiper-button-next svg {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  transform-origin: center;
+}
+
+.swiper-rtl .swiper-button-prev svg,
+.swiper-rtl .swiper-button-next svg {
+  transform: rotate(180deg);
+}
+
+.swiper-button-prev,
+.swiper-rtl .swiper-button-next {
+  left: var(--swiper-navigation-sides-offset, 10px);
+  right: auto;
+}
+
+.swiper-button-next,
+.swiper-rtl .swiper-button-prev {
+  right: var(--swiper-navigation-sides-offset, 10px);
+  left: auto;
+}
+
+.swiper-button-lock {
+  display: none;
+}
+
+/* Navigation font start */
+.swiper-button-prev:after,
+.swiper-button-next:after {
+  font-family: swiper-icons;
+  font-size: var(--swiper-navigation-size);
+  text-transform: none !important;
+  letter-spacing: 0;
+  font-variant: initial;
+  line-height: 1;
+}
+
+.swiper-button-prev:after,
+.swiper-rtl .swiper-button-next:after {
+  content: "prev";
+}
+
+.swiper-button-next,
+.swiper-rtl .swiper-button-prev {
+  right: var(--swiper-navigation-sides-offset, 10px);
+  left: auto;
+}
+
+.swiper-button-next:after,
+.swiper-rtl .swiper-button-prev:after {
+  content: "next";
+}
+
+/* Navigation font end */
+:root {
+  /*
+  --swiper-pagination-color: var(--swiper-theme-color);
+  --swiper-pagination-left: auto;
+  --swiper-pagination-right: 8px;
+  --swiper-pagination-bottom: 8px;
+  --swiper-pagination-top: auto;
+  --swiper-pagination-fraction-color: inherit;
+  --swiper-pagination-progressbar-bg-color: rgba(0,0,0,0.25);
+  --swiper-pagination-progressbar-size: 4px;
+  --swiper-pagination-bullet-size: 8px;
+  --swiper-pagination-bullet-width: 8px;
+  --swiper-pagination-bullet-height: 8px;
+  --swiper-pagination-bullet-border-radius: 50%;
+  --swiper-pagination-bullet-inactive-color: #000;
+  --swiper-pagination-bullet-inactive-opacity: 0.2;
+  --swiper-pagination-bullet-opacity: 1;
+  --swiper-pagination-bullet-horizontal-gap: 4px;
+  --swiper-pagination-bullet-vertical-gap: 6px;
+  */
+}
+
+.swiper-pagination {
+  position: absolute;
+  text-align: center;
+  transition: 300ms opacity;
+  transform: translate3d(0, 0, 0);
+  z-index: 10;
+}
+
+.swiper-pagination.swiper-pagination-hidden {
+  opacity: 0;
+}
+
+.swiper-pagination-disabled > .swiper-pagination,
+.swiper-pagination.swiper-pagination-disabled {
+  display: none !important;
+}
+
+/* Common Styles */
+.swiper-pagination-fraction,
+.swiper-pagination-custom,
+.swiper-horizontal > .swiper-pagination-bullets,
+.swiper-pagination-bullets.swiper-pagination-horizontal {
+  bottom: var(--swiper-pagination-bottom, 8px);
+  top: var(--swiper-pagination-top, auto);
+  left: 0;
+  width: 100%;
+}
+
+/* Bullets */
+.swiper-pagination-bullets-dynamic {
+  overflow: hidden;
+  font-size: 0;
+}
+
+.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
+  transform: scale(0.33);
+  position: relative;
+}
+
+.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
+  transform: scale(1);
+}
+
+.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
+  transform: scale(1);
+}
+
+.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
+  transform: scale(0.66);
+}
+
+.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
+  transform: scale(0.33);
+}
+
+.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
+  transform: scale(0.66);
+}
+
+.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
+  transform: scale(0.33);
+}
+
+.swiper-pagination-bullet {
+  width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
+  height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
+  display: inline-block;
+  border-radius: var(--swiper-pagination-bullet-border-radius, 50%);
+  background: var(--swiper-pagination-bullet-inactive-color, #000);
+  opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2);
+}
+
+button.swiper-pagination-bullet {
+  border: none;
+  margin: 0;
+  padding: 0;
+  box-shadow: none;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+.swiper-pagination-clickable .swiper-pagination-bullet {
+  cursor: pointer;
+}
+
+.swiper-pagination-bullet:only-child {
+  display: none !important;
+}
+
+.swiper-pagination-bullet-active {
+  opacity: var(--swiper-pagination-bullet-opacity, 1);
+  background: var(--swiper-pagination-color, var(--swiper-theme-color));
+}
+
+.swiper-vertical > .swiper-pagination-bullets,
+.swiper-pagination-vertical.swiper-pagination-bullets {
+  right: var(--swiper-pagination-right, 8px);
+  left: var(--swiper-pagination-left, auto);
+  top: 50%;
+  transform: translate3d(0px, -50%, 0);
+}
+
+.swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet,
+.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet {
+  margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
+  display: block;
+}
+
+.swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
+.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
+  top: 50%;
+  transform: translateY(-50%);
+  width: 8px;
+}
+
+.swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
+.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
+  display: inline-block;
+  transition: 200ms transform, 200ms top;
+}
+
+.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
+.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
+  margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
+}
+
+.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
+.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
+  left: 50%;
+  transform: translateX(-50%);
+  white-space: nowrap;
+}
+
+.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
+.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
+  transition: 200ms transform, 200ms left;
+}
+
+.swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
+  transition: 200ms transform, 200ms right;
+}
+
+/* Fraction */
+.swiper-pagination-fraction {
+  color: var(--swiper-pagination-fraction-color, inherit);
+}
+
+/* Progress */
+.swiper-pagination-progressbar {
+  background: var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, 0.25));
+  position: absolute;
+}
+
+.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
+  background: var(--swiper-pagination-color, var(--swiper-theme-color));
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  transform: scale(0);
+  transform-origin: left top;
+}
+
+.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
+  transform-origin: right top;
+}
+
+.swiper-horizontal > .swiper-pagination-progressbar,
+.swiper-pagination-progressbar.swiper-pagination-horizontal,
+.swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
+.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite {
+  width: 100%;
+  height: var(--swiper-pagination-progressbar-size, 4px);
+  left: 0;
+  top: 0;
+}
+
+.swiper-vertical > .swiper-pagination-progressbar,
+.swiper-pagination-progressbar.swiper-pagination-vertical,
+.swiper-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
+.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite {
+  width: var(--swiper-pagination-progressbar-size, 4px);
+  height: 100%;
+  left: 0;
+  top: 0;
+}
+
+.swiper-pagination-lock {
+  display: none;
+}
+
+:root {
+  /*
+  --swiper-scrollbar-border-radius: 10px;
+  --swiper-scrollbar-top: auto;
+  --swiper-scrollbar-bottom: 4px;
+  --swiper-scrollbar-left: auto;
+  --swiper-scrollbar-right: 4px;
+  --swiper-scrollbar-sides-offset: 1%;
+  --swiper-scrollbar-bg-color: rgba(0, 0, 0, 0.1);
+  --swiper-scrollbar-drag-bg-color: rgba(0, 0, 0, 0.5);
+  --swiper-scrollbar-size: 4px;
+  */
+}
+
+.swiper-scrollbar {
+  border-radius: var(--swiper-scrollbar-border-radius, 10px);
+  position: relative;
+  touch-action: none;
+  background: var(--swiper-scrollbar-bg-color, rgba(0, 0, 0, 0.1));
+}
+
+.swiper-scrollbar-disabled > .swiper-scrollbar,
+.swiper-scrollbar.swiper-scrollbar-disabled {
+  display: none !important;
+}
+
+.swiper-horizontal > .swiper-scrollbar,
+.swiper-scrollbar.swiper-scrollbar-horizontal {
+  position: absolute;
+  left: var(--swiper-scrollbar-sides-offset, 1%);
+  bottom: var(--swiper-scrollbar-bottom, 4px);
+  top: var(--swiper-scrollbar-top, auto);
+  z-index: 50;
+  height: var(--swiper-scrollbar-size, 4px);
+  width: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
+}
+
+.swiper-vertical > .swiper-scrollbar,
+.swiper-scrollbar.swiper-scrollbar-vertical {
+  position: absolute;
+  left: var(--swiper-scrollbar-left, auto);
+  right: var(--swiper-scrollbar-right, 4px);
+  top: var(--swiper-scrollbar-sides-offset, 1%);
+  z-index: 50;
+  width: var(--swiper-scrollbar-size, 4px);
+  height: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
+}
+
+.swiper-scrollbar-drag {
+  height: 100%;
+  width: 100%;
+  position: relative;
+  background: var(--swiper-scrollbar-drag-bg-color, rgba(0, 0, 0, 0.5));
+  border-radius: var(--swiper-scrollbar-border-radius, 10px);
+  left: 0;
+  top: 0;
+}
+
+.swiper-scrollbar-cursor-drag {
+  cursor: move;
+}
+
+.swiper-scrollbar-lock {
+  display: none;
+}
+
+/* Zoom container styles start */
+.swiper-zoom-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+
+.swiper-zoom-container > img,
+.swiper-zoom-container > svg,
+.swiper-zoom-container > canvas {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}
+
+/* Zoom container styles end */
+.swiper-slide-zoomed {
+  cursor: move;
+  touch-action: none;
+}
+
+/* a11y */
+.swiper .swiper-notification {
+  position: absolute;
+  left: 0;
+  top: 0;
+  pointer-events: none;
+  opacity: 0;
+  z-index: -1000;
+}
+
+.swiper-free-mode > .swiper-wrapper {
+  transition-timing-function: ease-out;
+  margin: 0 auto;
+}
+
+.swiper-grid > .swiper-wrapper {
+  flex-wrap: wrap;
+}
+
+.swiper-grid-column > .swiper-wrapper {
+  flex-wrap: wrap;
+  flex-direction: column;
+}
+
+.swiper-fade.swiper-free-mode .swiper-slide {
+  transition-timing-function: ease-out;
+}
+
+.swiper-fade .swiper-slide {
+  pointer-events: none;
+  transition-property: opacity;
+}
+
+.swiper-fade .swiper-slide .swiper-slide {
+  pointer-events: none;
+}
+
+.swiper-fade .swiper-slide-active {
+  pointer-events: auto;
+}
+
+.swiper-fade .swiper-slide-active .swiper-slide-active {
+  pointer-events: auto;
+}
+
+.swiper.swiper-cube {
+  overflow: visible;
+}
+
+.swiper-cube .swiper-slide {
+  pointer-events: none;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  z-index: 1;
+  visibility: hidden;
+  transform-origin: 0 0;
+  width: 100%;
+  height: 100%;
+}
+
+.swiper-cube .swiper-slide .swiper-slide {
+  pointer-events: none;
+}
+
+.swiper-cube.swiper-rtl .swiper-slide {
+  transform-origin: 100% 0;
+}
+
+.swiper-cube .swiper-slide-active,
+.swiper-cube .swiper-slide-active .swiper-slide-active {
+  pointer-events: auto;
+}
+
+.swiper-cube .swiper-slide-active,
+.swiper-cube .swiper-slide-next,
+.swiper-cube .swiper-slide-prev {
+  pointer-events: auto;
+  visibility: visible;
+}
+
+.swiper-cube .swiper-cube-shadow {
+  position: absolute;
+  left: 0;
+  bottom: 0px;
+  width: 100%;
+  height: 100%;
+  opacity: 0.6;
+  z-index: 0;
+}
+
+.swiper-cube .swiper-cube-shadow:before {
+  content: "";
+  background: #000;
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  filter: blur(50px);
+}
+
+.swiper-cube .swiper-slide-next + .swiper-slide {
+  pointer-events: auto;
+  visibility: visible;
+}
+
+/* Cube slide shadows start */
+.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-top,
+.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-bottom,
+.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-left,
+.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-right {
+  z-index: 0;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+
+/* Cube slide shadows end */
+.swiper.swiper-flip {
+  overflow: visible;
+}
+
+.swiper-flip .swiper-slide {
+  pointer-events: none;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  z-index: 1;
+}
+
+.swiper-flip .swiper-slide .swiper-slide {
+  pointer-events: none;
+}
+
+.swiper-flip .swiper-slide-active,
+.swiper-flip .swiper-slide-active .swiper-slide-active {
+  pointer-events: auto;
+}
+
+/* Flip slide shadows start */
+.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-top,
+.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-bottom,
+.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-left,
+.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-right {
+  z-index: 0;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+
+/* Flip slide shadows end */
+.swiper-creative .swiper-slide {
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  overflow: hidden;
+  transition-property: transform, opacity, height;
+}
+
+.swiper.swiper-cards {
+  overflow: visible;
+}
+
+.swiper-cards .swiper-slide {
+  transform-origin: center bottom;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  overflow: hidden;
+}
+
+.swiper {
+  --swiper-theme-color: var(--bs-primary);
+  inline-size: 100%;
+}
+.swiper .swiper-slide {
+  color: var(--bs-white);
+}
+
+@media (max-width: 575.98px) {
+  .swiper#swiper-multiple-slides {
+    block-size: 11rem;
+  }
+}
+
+.swiper-button-prev,
+.swiper-button-next {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.swiper-button-prev.swiper-button-white,
+.swiper-button-next.swiper-button-white {
+  color: var(--bs-white);
+}
+:dir(rtl) .swiper-button-prev,
+:dir(rtl) .swiper-button-next {
+  transform: scaleX(-1);
+}
+.swiper-button-prev.custom-icon,
+.swiper-button-next.custom-icon {
+  background-image: none;
+  line-height: 1;
+}
+.swiper-button-prev.custom-icon::after,
+.swiper-button-next.custom-icon::after {
+  font-size: 2rem;
+}
+
+.swiper-pagination-bullet.swiper-pagination-bullet-active,
+.swiper-pagination.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
+  background: var(--bs-primary);
+}
+
+.swiper-pagination-bullet {
+  background: rgba(0, 0, 0, 0.7);
+}
+
+.swiper-pagination-progressbar,
+.swiper-scrollbar {
+  background: rgba(0, 0, 0, 0.08);
+}
+
+.swiper-scrollbar-drag {
+  background: rgba(0, 0, 0, 0.3);
+}
+
+:dir(rtl) .swiper-button-next {
+  inset-inline: 10px auto;
+}
+:dir(rtl) .swiper-button-prev {
+  inset-inline: auto 10px;
+}
+:dir(rtl) .swiper-vertical > .swiper-pagination-bullets {
+  inset-inline: 10px auto;
+}

resources/views/auth/layout.blade.php

@@ -0,0 +1,118 @@
+<!doctype html>
+
+<html
+  lang="en"
+  class=" layout-wide  customizer-hide"
+  dir="ltr"
+  data-skin="default"
+  data-bs-theme="light"
+  data-assets-path="../../assets/"
+  data-template="vertical-menu-template">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
+    <meta name="robots" content="noindex, nofollow" />
+    <title>Demo: Register Basic - Pages | Vuexy - Bootstrap Dashboard PRO</title>
+
+    <meta name="description" content="" />
+
+    <!-- Favicon -->
+    <link rel="icon" type="image/x-icon" href="../../assets/img/favicon/favicon.ico" />
+
+    <!-- Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&ampdisplay=swap"
+      rel="stylesheet" />
+
+    <link rel="stylesheet" href="{{ asset('assets/vendor/fonts/iconify-icons.css') }}" />
+
+    <script src="{{ asset('assets/vendor/libs/@algolia/autocomplete-js.js') }}"></script>
+
+    <!-- Core CSS -->
+    <!-- build:css assets/vendor/css/theme.css  -->
+
+    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/node-waves/node-waves.css') }}" />
+
+    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/pickr/pickr-themes.css') }}" />
+
+    <link rel="stylesheet" href="{{ asset('assets/vendor/css/core.css') }}" />
+    <link rel="stylesheet" href="{{ asset('assets/css/demo.css') }}" />
+
+    <!-- Vendors CSS -->
+
+    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.css') }}" />
+
+    <!-- endbuild -->
+
+    <!-- Vendor -->
+    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/@form-validation/form-validation.css') }}" />
+
+    <!-- Page CSS -->
+    <!-- Page -->
+    <link rel="stylesheet" href="{{ asset('assets/vendor/css/pages/page-auth.css') }}" />
+
+    <!-- Helpers -->
+    <script src="{{ asset('assets/vendor/js/helpers.js') }}"></script>
+    <!--! Template customizer & Theme config files MUST be included after core stylesheets and helpers.js in the <head> section -->
+
+    <!--? Template customizer: To hide customizer set displayCustomizer value false in config.js.  -->
+    <script src="{{ asset('assets/vendor/js/template-customizer.js') }}"></script>
+
+    <!--? Config:  Mandatory theme config file contain global vars & default theme options, Set your preferred theme option in this file.  -->
+
+    <script src="{{ asset('assets/js/config.js') }}"></script>
+  </head>
+
+  <body>
+    <!-- Content -->
+
+    <div class="container-xxl">
+      <div class="authentication-wrapper authentication-basic container-p-y">
+        <div class="authentication-inner py-6">
+          <!-- Register Card -->
+          @yield('content')
+          <!-- Register Card -->
+        </div>
+      </div>
+    </div>
+
+    <!-- / Content -->
+
+    <!-- Core JS -->
+    <!-- build:js assets/vendor/js/theme.js  -->
+
+    <script src="{{ asset('assets/vendor/libs/jquery/jquery.js') }}"></script>
+
+    <script src="{{ asset('assets/vendor/libs/popper/popper.js') }}"></script>
+    <script src="{{ asset('assets/vendor/js/bootstrap.js') }}"></script>
+    <script src="{{ asset('assets/vendor/libs/node-waves/node-waves.js') }}"></script>
+
+    <script src="{{ asset('assets/vendor/libs/pickr/pickr.js') }}"></script>
+
+    <script src="{{ asset('assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.js') }}"></script>
+
+    <script src="{{ asset('assets/vendor/libs/hammer/hammer.js') }}"></script>
+
+    <script src="{{ asset('assets/vendor/libs/i18n/i18n.js') }}"></script>
+
+    <script src="{{ asset('assets/vendor/js/menu.js') }}"></script>
+
+    <!-- endbuild -->
+
+    <!-- Vendors JS -->
+    <script src="{{ asset('assets/vendor/libs/@form-validation/popular.js') }}"></script>
+    <script src="{{ asset('assets/vendor/libs/@form-validation/bootstrap5.js') }}"></script>
+    <script src="{{ asset('assets/vendor/libs/@form-validation/auto-focus.js') }}"></script>
+
+    <!-- Main JS -->
+
+    <script src="{{ asset('assets/js/main.js') }}"></script>
+
+    <!-- Page JS -->
+    <script src="{{ asset('assets/js/pages-auth.js') }}"></script>
+  </body>
+</html>

resources/views/auth/login.blade.php

@@ -0,0 +1,122 @@
+@extends('auth.layout')
+@section('content')
+<div class="card">
+    <div class="card-body">
+        <!-- Logo -->
+        <div class="app-brand justify-content-center mb-6">
+        <a href="index.html" class="app-brand-link">
+            <span class="app-brand-logo demo">
+            <span class="text-primary">
+                <svg width="32" height="22" viewBox="0 0 32 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path
+                    fill-rule="evenodd"
+                    clip-rule="evenodd"
+                    d="M0.00172773 0V6.85398C0.00172773 6.85398 -0.133178 9.01207 1.98092 10.8388L13.6912 21.9964L19.7809 21.9181L18.8042 9.88248L16.4951 7.17289L9.23799 0H0.00172773Z"
+                    fill="currentColor" />
+                <path
+                    opacity="0.06"
+                    fill-rule="evenodd"
+                    clip-rule="evenodd"
+                    d="M7.69824 16.4364L12.5199 3.23696L16.5541 7.25596L7.69824 16.4364Z"
+                    fill="#161616" />
+                <path
+                    opacity="0.06"
+                    fill-rule="evenodd"
+                    clip-rule="evenodd"
+                    d="M8.07751 15.9175L13.9419 4.63989L16.5849 7.28475L8.07751 15.9175Z"
+                    fill="#161616" />
+                <path
+                    fill-rule="evenodd"
+                    clip-rule="evenodd"
+                    d="M7.77295 16.3566L23.6563 0H32V6.88383C32 6.88383 31.8262 9.17836 30.6591 10.4057L19.7824 22H13.6938L7.77295 16.3566Z"
+                    fill="currentColor" />
+                </svg>
+            </span>
+            </span>
+            <span class="app-brand-text demo text-heading fw-bold">Vuexy</span>
+        </a>
+        </div>
+        <!-- /Logo -->
+        <h4 class="mb-1">Welcome to Vuexy! 👋</h4>
+        <p class="mb-6">Please sign-in to your account and start the adventure</p>
+        @if ($errors->any())
+            <div class="alert alert-danger">
+                <ul class="mb-0">
+                    @foreach ($errors->all() as $error)
+                        <li>{{ $error }}</li>
+                    @endforeach
+                </ul>
+            </div>
+        @endif
+        <form id="formAuthentication" class="mb-4" action="{{ route('auth.authenticate') }}" method="POST">
+        @csrf
+        <div class="mb-6 form-control-validation">
+            <label for="email" class="form-label">Email or Username</label>
+            <input
+            type="text"
+            class="form-control"
+            id="email"
+            name="email_username"
+            placeholder="Enter your email or username"
+            autofocus />
+        </div>
+        <div class="mb-6 form-password-toggle form-control-validation">
+            <label class="form-label" for="password">Password</label>
+            <div class="input-group input-group-merge">
+            <input
+                type="password"
+                id="password"
+                class="form-control"
+                name="password"
+                placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;"
+                aria-describedby="password" />
+            <span class="input-group-text cursor-pointer"><i class="icon-base ti tabler-eye-off"></i></span>
+            </div>
+        </div>
+        <div class="my-8">
+            <div class="d-flex justify-content-between">
+            <div class="form-check mb-0 ms-2">
+                <input class="form-check-input" type="checkbox" id="remember-me" />
+                <label class="form-check-label" for="remember-me"> Remember Me </label>
+            </div>
+            <a href="auth-forgot-password-basic.html">
+                <p class="mb-0">Forgot Password?</p>
+            </a>
+            </div>
+        </div>
+        <div class="mb-6">
+            <button class="btn btn-primary d-grid w-100" type="submit">Login</button>
+        </div>
+        </form>
+
+        <p class="text-center">
+        <span>New on our platform?</span>
+        <a href="auth-register-basic.html">
+            <span>Create an account</span>
+        </a>
+        </p>
+
+        <div class="divider my-6">
+        <div class="divider-text">or</div>
+        </div>
+
+        <div class="d-flex justify-content-center">
+        <a href="javascript:;" class="btn btn-icon rounded-circle btn-text-facebook me-1_5">
+            <i class="icon-base ti tabler-brand-facebook-filled icon-20px"></i>
+        </a>
+
+        <a href="javascript:;" class="btn btn-icon rounded-circle btn-text-twitter me-1_5">
+            <i class="icon-base ti tabler-brand-twitter-filled icon-20px"></i>
+        </a>
+
+        <a href="javascript:;" class="btn btn-icon rounded-circle btn-text-github me-1_5">
+            <i class="icon-base ti tabler-brand-github-filled icon-20px"></i>
+        </a>
+
+        <a href="javascript:;" class="btn btn-icon rounded-circle btn-text-google-plus">
+            <i class="icon-base ti tabler-brand-google-filled icon-20px"></i>
+        </a>
+        </div>
+    </div>
+</div>
+@endsection

resources/views/auth/register.blade.php

@@ -0,0 +1,114 @@
+@extends('auth.layout')
+@section('content')
+<div class="card">
+    <div class="card-body">
+        <!-- Logo -->
+        <div class="app-brand justify-content-center mb-6">
+        <a href="index.html" class="app-brand-link">
+            <span class="app-brand-logo demo">
+            <span class="text-primary">
+                <svg width="32" height="22" viewBox="0 0 32 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path
+                    fill-rule="evenodd"
+                    clip-rule="evenodd"
+                    d="M0.00172773 0V6.85398C0.00172773 6.85398 -0.133178 9.01207 1.98092 10.8388L13.6912 21.9964L19.7809 21.9181L18.8042 9.88248L16.4951 7.17289L9.23799 0H0.00172773Z"
+                    fill="currentColor" />
+                <path
+                    opacity="0.06"
+                    fill-rule="evenodd"
+                    clip-rule="evenodd"
+                    d="M7.69824 16.4364L12.5199 3.23696L16.5541 7.25596L7.69824 16.4364Z"
+                    fill="#161616" />
+                <path
+                    opacity="0.06"
+                    fill-rule="evenodd"
+                    clip-rule="evenodd"
+                    d="M8.07751 15.9175L13.9419 4.63989L16.5849 7.28475L8.07751 15.9175Z"
+                    fill="#161616" />
+                <path
+                    fill-rule="evenodd"
+                    clip-rule="evenodd"
+                    d="M7.77295 16.3566L23.6563 0H32V6.88383C32 6.88383 31.8262 9.17836 30.6591 10.4057L19.7824 22H13.6938L7.77295 16.3566Z"
+                    fill="currentColor" />
+                </svg>
+            </span>
+            </span>
+            <span class="app-brand-text demo text-heading fw-bold">Vuexy</span>
+        </a>
+        </div>
+        <!-- /Logo -->
+        <h4 class="mb-1">Adventure starts here 🚀</h4>
+        <p class="mb-6">Make your app management easy and fun!</p>
+
+        <form id="formAuthentication" class="mb-6" action="{{ route('auth.createAccount') }}" method="POST">
+        @csrf
+        <div class="mb-6 form-control-validation">
+            <label for="username" class="form-label">Username</label>
+            <input
+            type="text"
+            class="form-control"
+            id="username"
+            name="name"
+            placeholder="Enter your username"
+            autofocus />
+        </div>
+        <div class="mb-6 form-control-validation">
+            <label for="email" class="form-label">Email</label>
+            <input type="text" class="form-control" id="email" name="email" placeholder="Enter your email" />
+        </div>
+        <div class="mb-6 form-password-toggle form-control-validation">
+            <label class="form-label" for="password">Password</label>
+            <div class="input-group input-group-merge">
+            <input
+                type="password"
+                id="password"
+                class="form-control"
+                name="password"
+                placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;"
+                aria-describedby="password" />
+            <span class="input-group-text cursor-pointer"><i class="icon-base ti tabler-eye-off"></i></span>
+            </div>
+        </div>
+        <div class="my-8 form-control-validation">
+            <div class="form-check mb-0 ms-2">
+            <input class="form-check-input" type="checkbox" id="terms-conditions" name="terms" />
+            <label class="form-check-label" for="terms-conditions">
+                I agree to
+                <a href="javascript:void(0);">privacy policy & terms</a>
+            </label>
+            </div>
+        </div>
+        <button type="submit" class="btn btn-primary d-grid w-100">Sign up</button>
+        </form>
+
+        <p class="text-center">
+        <span>Already have an account?</span>
+        <a href="auth-login-basic.html">
+            <span>Sign in instead</span>
+        </a>
+        </p>
+
+        <div class="divider my-6">
+        <div class="divider-text">or</div>
+        </div>
+
+        <div class="d-flex justify-content-center">
+        <a href="javascript:;" class="btn btn-icon rounded-circle btn-text-facebook me-1_5">
+            <i class="icon-base ti tabler-brand-facebook-filled icon-20px"></i>
+        </a>
+
+        <a href="javascript:;" class="btn btn-icon rounded-circle btn-text-twitter me-1_5">
+            <i class="icon-base ti tabler-brand-twitter-filled icon-20px"></i>
+        </a>
+
+        <a href="javascript:;" class="btn btn-icon rounded-circle btn-text-github me-1_5">
+            <i class="icon-base ti tabler-brand-github-filled icon-20px"></i>
+        </a>
+
+        <a href="javascript:;" class="btn btn-icon rounded-circle btn-text-google-plus">
+            <i class="icon-base ti tabler-brand-google-filled icon-20px"></i>
+        </a>
+        </div>
+    </div>
+</div>
+@endsection

resources/views/index.blade.php

@@ -0,0 +1,18 @@
+@extends('layout.main')
+@section('content')
+<div class="container-xxl flex-grow-1 container-p-y">
+    <div class="row">
+        <div class="col-12">
+            <div class="card">
+                <div class="card-body text-center my-5">
+                    <h2 class="mb-2">Selamat Datang</h2>
+                    <p class="text-body-secondary fs-5">Website Database Petani</p>
+                    <div class="mt-4">
+                        <img src="{{ asset('assets/img/illustrations/card-website-analytics-1.png') }}" alt="Welcome" width="200" class="img-fluid">
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+@endsection

resources/views/layout/footer.blade.php

@@ -0,0 +1,33 @@
+<footer class="content-footer footer bg-footer-theme">
+    <div class="container-xxl">
+    <div
+        class="footer-container d-flex align-items-center justify-content-between py-4 flex-md-row flex-column">
+        <div class="text-body">
+        &#169;
+        <script>
+            document.write(new Date().getFullYear());
+        </script>
+        , made with ❤️ by <a href="https://pixinvent.com" target="_blank" class="footer-link">Pixinvent</a>
+        </div>
+        <div class="d-none d-lg-inline-block">
+        <a href="https://themeforest.net/licenses/standard" class="footer-link me-4" target="_blank"
+            >License</a
+        >
+        <a href="https://themeforest.net/user/pixinvent/portfolio" target="_blank" class="footer-link me-4"
+            >More Themes</a
+        >
+
+        <a
+            href="https://demos.pixinvent.com/vuexy-html-admin-template/documentation/"
+            target="_blank"
+            class="footer-link me-4"
+            >Documentation</a
+        >
+
+        <a href="https://pixinvent.ticksy.com/" target="_blank" class="footer-link d-none d-sm-inline-block"
+            >Support</a
+        >
+        </div>
+    </div>
+    </div>
+</footer>

resources/views/layout/header.blade.php

@@ -0,0 +1,61 @@
+<!doctype html>
+
+<html
+  lang="en"
+  class=" layout-navbar-fixed layout-menu-fixed layout-compact "
+  dir="ltr"
+  data-skin="default"
+  data-bs-theme="light"
+  data-assets-path="../../assets/"
+  data-template="vertical-menu-template">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
+    <meta name="robots" content="noindex, nofollow" />
+    <title>Demo: Dashboard - Analytics | Vuexy - Bootstrap Dashboard PRO</title>
+
+    <meta name="description" content="" />
+
+    <link rel="icon" type="image/x-icon" href="../../assets/img/favicon/favicon.ico" />
+
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&ampdisplay=swap"
+      rel="stylesheet" />
+
+    <link rel="stylesheet" href="{{ asset('assets/vendor/fonts/iconify-icons.css') }}" />
+
+    <script src="{{ asset('assets/vendor/libs/@algolia/autocomplete-js.js') }}"></script>
+
+    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/node-waves/node-waves.css') }}" />
+
+    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/pickr/pickr-themes.css') }}" />
+
+    <link rel="stylesheet" href="{{ asset('assets/vendor/css/core.css') }}" />
+    <link rel="stylesheet" href="{{ asset('assets/css/demo.css') }}" />
+
+    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.css') }}" />
+
+    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/apex-charts/apex-charts.css') }}" />
+    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/swiper/swiper.css') }}" />
+    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/datatables-bs5/datatables.bootstrap5.css') }}" />
+    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.css') }}" />
+
+    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.css') }}" />
+    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/select2/select2.css') }}" />
+    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/@form-validation/form-validation.css') }}" />
+
+    <link rel="stylesheet" href="{{ asset('assets/vendor/fonts/flag-icons.css') }}" />
+
+    <link rel="stylesheet" href="{{ asset('assets/vendor/css/pages/cards-advance.css') }}" />
+
+    <script src="{{ asset('assets/vendor/js/helpers.js') }}"></script>
+
+    <script src="{{ asset('assets/vendor/js/template-customizer.js') }}"></script>
+
+    <script src="{{ asset('assets/js/config.js') }}"></script>
+    @stack('style')
+  </head>

resources/views/layout/main.blade.php

@@ -0,0 +1,83 @@
+@include('layout.header')
+<body>
+    <!-- Layout wrapper -->
+    <div class="layout-wrapper layout-content-navbar  ">
+      <div class="layout-container">
+        <!-- Menu -->
+        @include('layout.sidebar')
+        <!-- / Menu -->
+
+        <!-- Layout container -->
+        <div class="layout-page">
+          <!-- Navbar -->
+
+            @include('layout.navbar')
+
+          <!-- / Navbar -->
+
+          <!-- Content wrapper -->
+          <div class="content-wrapper">
+            <!-- Content -->
+            @yield('content')
+            <!-- / Content -->
+
+            <!-- Footer -->
+            @include('layout.footer')
+            <!-- / Footer -->
+
+            <div class="content-backdrop fade"></div>
+          </div>
+          <!-- Content wrapper -->
+        </div>
+        <!-- / Layout page -->
+      </div>
+
+      <!-- Overlay -->
+      <div class="layout-overlay layout-menu-toggle"></div>
+
+      <!-- Drag Target Area To SlideIn Menu On Small Screens -->
+      <div class="drag-target"></div>
+    </div>
+    <!-- / Layout wrapper -->
+
+    <!-- Core JS -->
+    <!-- build:js assets/vendor/js/theme.js  -->
+
+    <script src="{{ asset('assets/vendor/libs/jquery/jquery.js') }}"></script>
+
+    <script src="{{ asset('assets/vendor/libs/popper/popper.js') }}"></script>
+    <script src="{{ asset('assets/vendor/js/bootstrap.js') }}"></script>
+    <script src="{{ asset('assets/vendor/libs/node-waves/node-waves.js') }}"></script>
+
+    <script src="{{ asset('assets/vendor/libs/pickr/pickr.js') }}"></script>
+
+    <script src="{{ asset('assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.js') }}"></script>
+
+    <script src="{{ asset('assets/vendor/libs/hammer/hammer.js') }}"></script>
+
+    <script src="{{ asset('assets/vendor/libs/i18n/i18n.js') }}"></script>
+
+    <script src="{{ asset('assets/vendor/js/menu.js') }}"></script>
+
+    <!-- endbuild -->
+
+    <!-- Vendors JS -->
+    <script src="{{ asset('assets/vendor/libs/apex-charts/apexcharts.js') }}"></script>
+    <script src="{{ asset('assets/vendor/libs/swiper/swiper.js') }}"></script>
+    <script src="{{ asset('assets/vendor/libs/moment/moment.js') }}"></script>
+    <script src="{{ asset('assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js') }}"></script>
+    <script src="{{ asset('assets/vendor/libs/select2/select2.js') }}"></script>
+    <script src="{{ asset('assets/vendor/libs/@form-validation/popular.js') }}"></script>
+    <script src="{{ asset('assets/vendor/libs/@form-validation/bootstrap5.js') }}"></script>
+    <script src="{{ asset('assets/vendor/libs/@form-validation/auto-focus.js') }}"></script>
+    <script src="{{ asset('assets/vendor/libs/cleave-zen/cleave-zen.js') }}"></script>
+
+    <!-- Main JS -->
+
+    <script src="{{ asset('assets/js/main.js') }}"></script>
+
+    <!-- Page JS -->
+    <script src="{{ asset('assets/js/dashboards-analytics.js') }}"></script>
+    @stack('scripts')
+  </body>
+</html>

resources/views/layout/navbar.blade.php

@@ -0,0 +1,527 @@
+<nav class="layout-navbar container-xxl navbar-detached navbar navbar-expand-xl align-items-center bg-navbar-theme" id="layout-navbar">
+    <div class="layout-menu-toggle navbar-nav align-items-xl-center me-3 me-xl-0   d-xl-none ">
+        <a class="nav-item nav-link px-0 me-xl-6" href="javascript:void(0)">
+        <i class="icon-base ti tabler-menu-2 icon-md"></i>
+        </a>
+    </div>
+
+    <div class="navbar-nav-right d-flex align-items-center justify-content-end" id="navbar-collapse">
+        <!-- Search -->
+        <div class="navbar-nav align-items-center">
+        <div class="nav-item navbar-search-wrapper px-md-0 px-2 mb-0">
+            <a class="nav-item nav-link search-toggler d-flex align-items-center px-0" href="javascript:void(0);">
+            <span class="d-inline-block text-body-secondary fw-normal" id="autocomplete"></span>
+            </a>
+        </div>
+        </div>
+
+        <!-- /Search -->
+
+        <ul class="navbar-nav flex-row align-items-center ms-md-auto">
+        <li class="nav-item dropdown-language dropdown me-2 me-xl-0">
+            <a class="nav-link dropdown-toggle hide-arrow" href="javascript:void(0);" data-bs-toggle="dropdown">
+            <i class="icon-base ti tabler-language icon-22px text-heading"></i>
+            </a>
+            <ul class="dropdown-menu dropdown-menu-end">
+            <li>
+                <a class="dropdown-item" href="javascript:void(0);" data-language="en" data-text-direction="ltr">
+                <span>English</span>
+                </a>
+            </li>
+            <li>
+                <a class="dropdown-item" href="javascript:void(0);" data-language="fr" data-text-direction="ltr">
+                <span>French</span>
+                </a>
+            </li>
+            <li>
+                <a class="dropdown-item" href="javascript:void(0);" data-language="ar" data-text-direction="rtl">
+                <span>Arabic</span>
+                </a>
+            </li>
+            <li>
+                <a class="dropdown-item" href="javascript:void(0);" data-language="de" data-text-direction="ltr">
+                <span>German</span>
+                </a>
+            </li>
+            </ul>
+        </li>
+        <!--/ Language -->
+
+        <!-- Style Switcher -->
+        <li class="nav-item dropdown">
+            <a
+            class="nav-link dropdown-toggle hide-arrow btn btn-icon btn-text-secondary rounded-pill"
+            id="nav-theme"
+            href="javascript:void(0);"
+            data-bs-toggle="dropdown">
+            <i class="icon-base ti tabler-sun icon-22px theme-icon-active text-heading"></i>
+            <span class="d-none ms-2" id="nav-theme-text">Toggle theme</span>
+            </a>
+            <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="nav-theme-text">
+            <li>
+                <button
+                type="button"
+                class="dropdown-item align-items-center active"
+                data-bs-theme-value="light"
+                aria-pressed="false">
+                <span><i class="icon-base ti tabler-sun icon-22px me-3" data-icon="sun"></i>Light</span>
+                </button>
+            </li>
+            <li>
+                <button
+                type="button"
+                class="dropdown-item align-items-center"
+                data-bs-theme-value="dark"
+                aria-pressed="true">
+                <span
+                    ><i class="icon-base ti tabler-moon-stars icon-22px me-3" data-icon="moon-stars"></i
+                    >Dark</span
+                >
+                </button>
+            </li>
+            <li>
+                <button
+                type="button"
+                class="dropdown-item align-items-center"
+                data-bs-theme-value="system"
+                aria-pressed="false">
+                <span
+                    ><i
+                    class="icon-base ti tabler-device-desktop-analytics icon-22px me-3"
+                    data-icon="device-desktop-analytics"></i
+                    >System</span
+                >
+                </button>
+            </li>
+            </ul>
+        </li>
+        <!-- / Style Switcher-->
+
+        <!-- Quick links  -->
+        <li class="nav-item dropdown-shortcuts navbar-dropdown dropdown">
+            <a
+            class="nav-link dropdown-toggle hide-arrow btn btn-icon btn-text-secondary rounded-pill"
+            href="javascript:void(0);"
+            data-bs-toggle="dropdown"
+            data-bs-auto-close="outside"
+            aria-expanded="false">
+            <i class="icon-base ti tabler-layout-grid-add icon-22px text-heading"></i>
+            </a>
+            <div class="dropdown-menu dropdown-menu-end p-0">
+            <div class="dropdown-menu-header border-bottom">
+                <div class="dropdown-header d-flex align-items-center py-3">
+                <h6 class="mb-0 me-auto">Shortcuts</h6>
+                <a
+                    href="javascript:void(0)"
+                    class="dropdown-shortcuts-add py-2 btn btn-text-secondary rounded-pill btn-icon"
+                    data-bs-toggle="tooltip"
+                    data-bs-placement="top"
+                    title="Add shortcuts"
+                    ><i class="icon-base ti tabler-plus icon-20px text-heading"></i
+                ></a>
+                </div>
+            </div>
+            <div class="dropdown-shortcuts-list scrollable-container">
+                <div class="row row-bordered overflow-visible g-0">
+                <div class="dropdown-shortcuts-item col">
+                    <span class="dropdown-shortcuts-icon rounded-circle mb-3">
+                    <i class="icon-base ti tabler-calendar icon-26px text-heading"></i>
+                    </span>
+                    <a href="app-calendar.html" class="stretched-link">Calendar</a>
+                    <small>Appointments</small>
+                </div>
+                <div class="dropdown-shortcuts-item col">
+                    <span class="dropdown-shortcuts-icon rounded-circle mb-3">
+                    <i class="icon-base ti tabler-file-dollar icon-26px text-heading"></i>
+                    </span>
+                    <a href="app-invoice-list.html" class="stretched-link">Invoice App</a>
+                    <small>Manage Accounts</small>
+                </div>
+                </div>
+                <div class="row row-bordered overflow-visible g-0">
+                <div class="dropdown-shortcuts-item col">
+                    <span class="dropdown-shortcuts-icon rounded-circle mb-3">
+                    <i class="icon-base ti tabler-user icon-26px text-heading"></i>
+                    </span>
+                    <a href="app-user-list.html" class="stretched-link">User App</a>
+                    <small>Manage Users</small>
+                </div>
+                <div class="dropdown-shortcuts-item col">
+                    <span class="dropdown-shortcuts-icon rounded-circle mb-3">
+                    <i class="icon-base ti tabler-users icon-26px text-heading"></i>
+                    </span>
+                    <a href="app-access-roles.html" class="stretched-link">Role Management</a>
+                    <small>Permission</small>
+                </div>
+                </div>
+                <div class="row row-bordered overflow-visible g-0">
+                <div class="dropdown-shortcuts-item col">
+                    <span class="dropdown-shortcuts-icon rounded-circle mb-3">
+                    <i class="icon-base ti tabler-device-desktop-analytics icon-26px text-heading"></i>
+                    </span>
+                    <a href="index.html" class="stretched-link">Dashboard</a>
+                    <small>User Dashboard</small>
+                </div>
+                <div class="dropdown-shortcuts-item col">
+                    <span class="dropdown-shortcuts-icon rounded-circle mb-3">
+                    <i class="icon-base ti tabler-settings icon-26px text-heading"></i>
+                    </span>
+                    <a href="pages-account-settings-account.html" class="stretched-link">Setting</a>
+                    <small>Account Settings</small>
+                </div>
+                </div>
+                <div class="row row-bordered overflow-visible g-0">
+                <div class="dropdown-shortcuts-item col">
+                    <span class="dropdown-shortcuts-icon rounded-circle mb-3">
+                    <i class="icon-base ti tabler-help-circle icon-26px text-heading"></i>
+                    </span>
+                    <a href="pages-faq.html" class="stretched-link">FAQs</a>
+                    <small>FAQs & Articles</small>
+                </div>
+                <div class="dropdown-shortcuts-item col">
+                    <span class="dropdown-shortcuts-icon rounded-circle mb-3">
+                    <i class="icon-base ti tabler-square icon-26px text-heading"></i>
+                    </span>
+                    <a href="modal-examples.html" class="stretched-link">Modals</a>
+                    <small>Useful Popups</small>
+                </div>
+                </div>
+            </div>
+            </div>
+        </li>
+        <!-- Quick links -->
+
+        <!-- Notification -->
+        <li class="nav-item dropdown-notifications navbar-dropdown dropdown me-3 me-xl-2">
+            <a
+            class="nav-link dropdown-toggle hide-arrow btn btn-icon btn-text-secondary rounded-pill"
+            href="javascript:void(0);"
+            data-bs-toggle="dropdown"
+            data-bs-auto-close="outside"
+            aria-expanded="false">
+            <span class="position-relative">
+                <i class="icon-base ti tabler-bell icon-22px text-heading"></i>
+                <span class="badge rounded-pill bg-danger badge-dot badge-notifications border"></span>
+            </span>
+            </a>
+            <ul class="dropdown-menu dropdown-menu-end p-0">
+            <li class="dropdown-menu-header border-bottom">
+                <div class="dropdown-header d-flex align-items-center py-3">
+                <h6 class="mb-0 me-auto">Notification</h6>
+                <div class="d-flex align-items-center h6 mb-0">
+                    <span class="badge bg-label-primary me-2">8 New</span>
+                    <a
+                    href="javascript:void(0)"
+                    class="dropdown-notifications-all p-2 btn btn-icon"
+                    data-bs-toggle="tooltip"
+                    data-bs-placement="top"
+                    title="Mark all as read"
+                    ><i class="icon-base ti tabler-mail-opened text-heading"></i
+                    ></a>
+                </div>
+                </div>
+            </li>
+            <li class="dropdown-notifications-list scrollable-container">
+                <ul class="list-group list-group-flush">
+                <li class="list-group-item list-group-item-action dropdown-notifications-item">
+                    <div class="d-flex">
+                    <div class="flex-shrink-0 me-3">
+                        <div class="avatar">
+                        <img src="../../assets/img/avatars/1.png" alt class="rounded-circle" />
+                        </div>
+                    </div>
+                    <div class="flex-grow-1">
+                        <h6 class="small mb-1">Congratulation Lettie 🎉</h6>
+                        <small class="mb-1 d-block text-body">Won the monthly best seller gold badge</small>
+                        <small class="text-body-secondary">1h ago</small>
+                    </div>
+                    <div class="flex-shrink-0 dropdown-notifications-actions">
+                        <a href="javascript:void(0)" class="dropdown-notifications-read"
+                        ><span class="badge badge-dot"></span
+                        ></a>
+                        <a href="javascript:void(0)" class="dropdown-notifications-archive"
+                        ><span class="icon-base ti tabler-x"></span
+                        ></a>
+                    </div>
+                    </div>
+                </li>
+                <li class="list-group-item list-group-item-action dropdown-notifications-item">
+                    <div class="d-flex">
+                    <div class="flex-shrink-0 me-3">
+                        <div class="avatar">
+                        <span class="avatar-initial rounded-circle bg-label-danger">CF</span>
+                        </div>
+                    </div>
+                    <div class="flex-grow-1">
+                        <h6 class="mb-1 small">Charles Franklin</h6>
+                        <small class="mb-1 d-block text-body">Accepted your connection</small>
+                        <small class="text-body-secondary">12hr ago</small>
+                    </div>
+                    <div class="flex-shrink-0 dropdown-notifications-actions">
+                        <a href="javascript:void(0)" class="dropdown-notifications-read"
+                        ><span class="badge badge-dot"></span
+                        ></a>
+                        <a href="javascript:void(0)" class="dropdown-notifications-archive"
+                        ><span class="icon-base ti tabler-x"></span
+                        ></a>
+                    </div>
+                    </div>
+                </li>
+                <li class="list-group-item list-group-item-action dropdown-notifications-item marked-as-read">
+                    <div class="d-flex">
+                    <div class="flex-shrink-0 me-3">
+                        <div class="avatar">
+                        <img src="../../assets/img/avatars/2.png" alt class="rounded-circle" />
+                        </div>
+                    </div>
+                    <div class="flex-grow-1">
+                        <h6 class="mb-1 small">New Message ✉️</h6>
+                        <small class="mb-1 d-block text-body">You have new message from Natalie</small>
+                        <small class="text-body-secondary">1h ago</small>
+                    </div>
+                    <div class="flex-shrink-0 dropdown-notifications-actions">
+                        <a href="javascript:void(0)" class="dropdown-notifications-read"
+                        ><span class="badge badge-dot"></span
+                        ></a>
+                        <a href="javascript:void(0)" class="dropdown-notifications-archive"
+                        ><span class="icon-base ti tabler-x"></span
+                        ></a>
+                    </div>
+                    </div>
+                </li>
+                <li class="list-group-item list-group-item-action dropdown-notifications-item">
+                    <div class="d-flex">
+                    <div class="flex-shrink-0 me-3">
+                        <div class="avatar">
+                        <span class="avatar-initial rounded-circle bg-label-success"
+                            ><i class="icon-base ti tabler-shopping-cart"></i
+                        ></span>
+                        </div>
+                    </div>
+                    <div class="flex-grow-1">
+                        <h6 class="mb-1 small">Whoo! You have new order 🛒</h6>
+                        <small class="mb-1 d-block text-body">ACME Inc. made new order $1,154</small>
+                        <small class="text-body-secondary">1 day ago</small>
+                    </div>
+                    <div class="flex-shrink-0 dropdown-notifications-actions">
+                        <a href="javascript:void(0)" class="dropdown-notifications-read"
+                        ><span class="badge badge-dot"></span
+                        ></a>
+                        <a href="javascript:void(0)" class="dropdown-notifications-archive"
+                        ><span class="icon-base ti tabler-x"></span
+                        ></a>
+                    </div>
+                    </div>
+                </li>
+                <li class="list-group-item list-group-item-action dropdown-notifications-item marked-as-read">
+                    <div class="d-flex">
+                    <div class="flex-shrink-0 me-3">
+                        <div class="avatar">
+                        <img src="../../assets/img/avatars/9.png" alt class="rounded-circle" />
+                        </div>
+                    </div>
+                    <div class="flex-grow-1">
+                        <h6 class="mb-1 small">Application has been approved 🚀</h6>
+                        <small class="mb-1 d-block text-body"
+                        >Your ABC project application has been approved.</small
+                        >
+                        <small class="text-body-secondary">2 days ago</small>
+                    </div>
+                    <div class="flex-shrink-0 dropdown-notifications-actions">
+                        <a href="javascript:void(0)" class="dropdown-notifications-read"
+                        ><span class="badge badge-dot"></span
+                        ></a>
+                        <a href="javascript:void(0)" class="dropdown-notifications-archive"
+                        ><span class="icon-base ti tabler-x"></span
+                        ></a>
+                    </div>
+                    </div>
+                </li>
+                <li class="list-group-item list-group-item-action dropdown-notifications-item marked-as-read">
+                    <div class="d-flex">
+                    <div class="flex-shrink-0 me-3">
+                        <div class="avatar">
+                        <span class="avatar-initial rounded-circle bg-label-success"
+                            ><i class="icon-base ti tabler-chart-pie"></i
+                        ></span>
+                        </div>
+                    </div>
+                    <div class="flex-grow-1">
+                        <h6 class="mb-1 small">Monthly report is generated</h6>
+                        <small class="mb-1 d-block text-body">July monthly financial report is generated </small>
+                        <small class="text-body-secondary">3 days ago</small>
+                    </div>
+                    <div class="flex-shrink-0 dropdown-notifications-actions">
+                        <a href="javascript:void(0)" class="dropdown-notifications-read"
+                        ><span class="badge badge-dot"></span
+                        ></a>
+                        <a href="javascript:void(0)" class="dropdown-notifications-archive"
+                        ><span class="icon-base ti tabler-x"></span
+                        ></a>
+                    </div>
+                    </div>
+                </li>
+                <li class="list-group-item list-group-item-action dropdown-notifications-item marked-as-read">
+                    <div class="d-flex">
+                    <div class="flex-shrink-0 me-3">
+                        <div class="avatar">
+                        <img src="../../assets/img/avatars/5.png" alt class="rounded-circle" />
+                        </div>
+                    </div>
+                    <div class="flex-grow-1">
+                        <h6 class="mb-1 small">Send connection request</h6>
+                        <small class="mb-1 d-block text-body">Peter sent you connection request</small>
+                        <small class="text-body-secondary">4 days ago</small>
+                    </div>
+                    <div class="flex-shrink-0 dropdown-notifications-actions">
+                        <a href="javascript:void(0)" class="dropdown-notifications-read"
+                        ><span class="badge badge-dot"></span
+                        ></a>
+                        <a href="javascript:void(0)" class="dropdown-notifications-archive"
+                        ><span class="icon-base ti tabler-x"></span
+                        ></a>
+                    </div>
+                    </div>
+                </li>
+                <li class="list-group-item list-group-item-action dropdown-notifications-item">
+                    <div class="d-flex">
+                    <div class="flex-shrink-0 me-3">
+                        <div class="avatar">
+                        <img src="../../assets/img/avatars/6.png" alt class="rounded-circle" />
+                        </div>
+                    </div>
+                    <div class="flex-grow-1">
+                        <h6 class="mb-1 small">New message from Jane</h6>
+                        <small class="mb-1 d-block text-body">Your have new message from Jane</small>
+                        <small class="text-body-secondary">5 days ago</small>
+                    </div>
+                    <div class="flex-shrink-0 dropdown-notifications-actions">
+                        <a href="javascript:void(0)" class="dropdown-notifications-read"
+                        ><span class="badge badge-dot"></span
+                        ></a>
+                        <a href="javascript:void(0)" class="dropdown-notifications-archive"
+                        ><span class="icon-base ti tabler-x"></span
+                        ></a>
+                    </div>
+                    </div>
+                </li>
+                <li class="list-group-item list-group-item-action dropdown-notifications-item marked-as-read">
+                    <div class="d-flex">
+                    <div class="flex-shrink-0 me-3">
+                        <div class="avatar">
+                        <span class="avatar-initial rounded-circle bg-label-warning"
+                            ><i class="icon-base ti tabler-alert-triangle"></i
+                        ></span>
+                        </div>
+                    </div>
+                    <div class="flex-grow-1">
+                        <h6 class="mb-1 small">CPU is running high</h6>
+                        <small class="mb-1 d-block text-body"
+                        >CPU Utilization Percent is currently at 88.63%,</small
+                        >
+                        <small class="text-body-secondary">5 days ago</small>
+                    </div>
+                    <div class="flex-shrink-0 dropdown-notifications-actions">
+                        <a href="javascript:void(0)" class="dropdown-notifications-read"
+                        ><span class="badge badge-dot"></span
+                        ></a>
+                        <a href="javascript:void(0)" class="dropdown-notifications-archive"
+                        ><span class="icon-base ti tabler-x"></span
+                        ></a>
+                    </div>
+                    </div>
+                </li>
+                </ul>
+            </li>
+            <li class="border-top">
+                <div class="d-grid p-4">
+                <a class="btn btn-primary btn-sm d-flex" href="javascript:void(0);">
+                    <small class="align-middle">View all notifications</small>
+                </a>
+                </div>
+            </li>
+            </ul>
+        </li>
+        <!--/ Notification -->
+
+        <!-- User -->
+        <li class="nav-item navbar-dropdown dropdown-user dropdown">
+            <a
+            class="nav-link dropdown-toggle hide-arrow p-0"
+            href="javascript:void(0);"
+            data-bs-toggle="dropdown">
+            <div class="avatar avatar-online">
+                <img src="../../assets/img/avatars/1.png" alt class="rounded-circle" />
+            </div>
+            </a>
+            <ul class="dropdown-menu dropdown-menu-end">
+            <li>
+                <a class="dropdown-item mt-0" href="pages-account-settings-account.html">
+                <div class="d-flex align-items-center">
+                    <div class="flex-shrink-0 me-2">
+                    <div class="avatar avatar-online">
+                        <img src="../../assets/img/avatars/1.png" alt class="rounded-circle" />
+                    </div>
+                    </div>
+                    <div class="flex-grow-1">
+                    <h6 class="mb-0">John Doe</h6>
+                    <small class="text-body-secondary">Admin</small>
+                    </div>
+                </div>
+                </a>
+            </li>
+            <li>
+                <div class="dropdown-divider my-1 mx-n2"></div>
+            </li>
+            <li>
+                <a class="dropdown-item" href="pages-profile-user.html">
+                <i class="icon-base ti tabler-user me-3 icon-md"></i
+                ><span class="align-middle">My Profile</span>
+                </a>
+            </li>
+            <li>
+                <a class="dropdown-item" href="pages-account-settings-account.html">
+                <i class="icon-base ti tabler-settings me-3 icon-md"></i
+                ><span class="align-middle">Settings</span>
+                </a>
+            </li>
+            <li>
+                <a class="dropdown-item" href="pages-account-settings-billing.html">
+                <span class="d-flex align-items-center align-middle">
+                    <i class="flex-shrink-0 icon-base ti tabler-file-dollar me-3 icon-md"></i
+                    ><span class="flex-grow-1 align-middle">Billing</span>
+                    <span class="flex-shrink-0 badge bg-danger d-flex align-items-center justify-content-center"
+                    >4</span
+                    >
+                </span>
+                </a>
+            </li>
+            <li>
+                <div class="dropdown-divider my-1 mx-n2"></div>
+            </li>
+            <li>
+                <a class="dropdown-item" href="pages-pricing.html">
+                <i class="icon-base ti tabler-currency-dollar me-3 icon-md"></i
+                ><span class="align-middle">Pricing</span>
+                </a>
+            </li>
+            <li>
+                <a class="dropdown-item" href="pages-faq.html">
+                <i class="icon-base ti tabler-question-mark me-3 icon-md"></i
+                ><span class="align-middle">FAQ</span>
+                </a>
+            </li>
+            <li>
+                <div class="d-grid px-2 pt-2 pb-1">
+                <a class="btn btn-sm btn-danger d-flex" href="auth-login-cover.html" target="_blank">
+                    <small class="align-middle">Logout</small>
+                    <i class="icon-base ti tabler-logout ms-2 icon-14px"></i>
+                </a>
+                </div>
+            </li>
+            </ul>
+        </li>
+        <!--/ User -->
+        </ul>
+    </div>
+</nav>

resources/views/layout/sidebar.blade.php

@@ -0,0 +1,188 @@
+<aside id="layout-menu" class="layout-menu menu-vertical menu">
+    <div class="app-brand demo ">
+    <a href="index.html" class="app-brand-link">
+        <span class="app-brand-logo demo">
+        <span class="text-primary">
+            <svg width="32" height="22" viewBox="0 0 32 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M0.00172773 0V6.85398C0.00172773 6.85398 -0.133178 9.01207 1.98092 10.8388L13.6912 21.9964L19.7809 21.9181L18.8042 9.88248L16.4951 7.17289L9.23799 0H0.00172773Z"
+                fill="currentColor" />
+            <path
+                opacity="0.06"
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M7.69824 16.4364L12.5199 3.23696L16.5541 7.25596L7.69824 16.4364Z"
+                fill="#161616" />
+            <path
+                opacity="0.06"
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M8.07751 15.9175L13.9419 4.63989L16.5849 7.28475L8.07751 15.9175Z"
+                fill="#161616" />
+            <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M7.77295 16.3566L23.6563 0H32V6.88383C32 6.88383 31.8262 9.17836 30.6591 10.4057L19.7824 22H13.6938L7.77295 16.3566Z"
+                fill="currentColor" />
+            </svg>
+        </span>
+        </span>
+        <span class="app-brand-text demo menu-text fw-bold ms-3">Vuexy</span>
+    </a>
+
+    <a href="javascript:void(0);" class="layout-menu-toggle menu-link text-large ms-auto">
+        <i class="icon-base ti menu-toggle-icon d-none d-xl-block"></i>
+        <i class="icon-base ti tabler-x d-block d-xl-none"></i>
+    </a>
+    </div>
+
+    <div class="menu-inner-shadow"></div>
+
+    <ul class="menu-inner py-1">
+    <!-- Dashboards -->
+    <li class="menu-item active open">
+        <a href="javascript:void(0);" class="menu-link menu-toggle">
+        <i class="menu-icon icon-base ti tabler-smart-home"></i>
+        <div data-i18n="Dashboards">Dashboards</div>
+        <div class="badge text-bg-danger rounded-pill ms-auto">5</div>
+        </a>
+        <ul class="menu-sub">
+        <li class="menu-item active">
+            <a href="{{ route('home.index') }}" class="menu-link">
+            <div data-i18n="Welcome">Welcome</div>
+            </a>
+        </li>
+        <li class="menu-item">
+            <a href="dashboards-crm.html" class="menu-link">
+            <div data-i18n="CRM">CRM</div>
+            </a>
+        </li>
+        <li class="menu-item">
+            <a href="app-ecommerce-dashboard.html" class="menu-link">
+            <div data-i18n="eCommerce">eCommerce</div>
+            </a>
+        </li>
+        <li class="menu-item">
+            <a href="app-logistics-dashboard.html" class="menu-link">
+            <div data-i18n="Logistics">Logistics</div>
+            </a>
+        </li>
+        <li class="menu-item">
+            <a href="app-academy-dashboard.html" class="menu-link">
+            <div data-i18n="Academy">Academy</div>
+            </a>
+        </li>
+        </ul>
+    </li>
+    <!-- Konfigurasi -->
+    <li class="menu-header small">
+        <span class="menu-header-text" data-i18n="Apps & Pages">Konfigurasi</span>
+    </li>
+    <li class="menu-item">
+        <a href="javascript:void(0);" class="menu-link menu-toggle">
+        <i class="menu-icon icon-base ti tabler-users"></i>
+        <div data-i18n="Users">Users</div>
+        </a>
+        <ul class="menu-sub">
+        <li class="menu-item">
+            <a href="{{ route('users.index') }}" class="menu-link">
+            <div data-i18n="List">List</div>
+            </a>
+        </li>
+
+        <li class="menu-item">
+            <a href="javascript:void(0);" class="menu-link menu-toggle">
+            <div data-i18n="View">View</div>
+            </a>
+            <ul class="menu-sub">
+            <li class="menu-item">
+                <a href="app-user-view-account.html" class="menu-link">
+                <div data-i18n="Account">Account</div>
+                </a>
+            </li>
+            <li class="menu-item">
+                <a href="app-user-view-security.html" class="menu-link">
+                <div data-i18n="Security">Security</div>
+                </a>
+            </li>
+            <li class="menu-item">
+                <a href="app-user-view-billing.html" class="menu-link">
+                <div data-i18n="Billing & Plans">Billing & Plans</div>
+                </a>
+            </li>
+            <li class="menu-item">
+                <a href="app-user-view-notifications.html" class="menu-link">
+                <div data-i18n="Notifications">Notifications</div>
+                </a>
+            </li>
+            <li class="menu-item">
+                <a href="app-user-view-connections.html" class="menu-link">
+                <div data-i18n="Connections">Connections</div>
+                </a>
+            </li>
+            </ul>
+        </li>
+        </ul>
+    </li>
+    <li class="menu-item">
+        <a href="javascript:void(0);" class="menu-link menu-toggle">
+        <i class="menu-icon icon-base ti tabler-file"></i>
+        <div data-i18n="master">Master</div>
+        </a>
+        <ul class="menu-sub">
+            <li class="menu-item">
+                <a href="javascript:void(0);" class="menu-link menu-toggle">
+                <div data-i18n="wilayah">Wilayah</div>
+                </a>
+                <ul class="menu-sub">
+                <li class="menu-item">
+                    <a href="{{ route('provinsi.index') }}" class="menu-link">
+                    <div data-i18n="Provinsi">provinsi</div>
+                    </a>
+                </li>
+                <li class="menu-item">
+                    <a href="{{ route('kabupatenkota.index') }}" class="menu-link">
+                    <div data-i18n="Kabupaten Kota">Kabupaten Kota</div>
+                    </a>
+                </li>
+                <li class="menu-item">
+                    <a href="{{ route('kecamatan.index') }}" class="menu-link">
+                    <div data-i18n="Kecamatan">Kecamatan</div>
+                    </a>
+                </li>
+                <li class="menu-item">
+                    <a href="{{ route('desakelurahan.index') }}" class="menu-link">
+                    <div data-i18n="Desa Kelurahan">Desa Kelurahan</div>
+                    </a>
+                </li>
+                </ul>
+            </li>
+        </ul>
+    </li>
+
+    <!-- Misc -->
+    <li class="menu-header small">
+        <span class="menu-header-text" data-i18n="Misc">Misc</span>
+    </li>
+
+    <!-- Multi Level Menu -->
+    <li class="menu-item">
+        <a
+        href="https://demos.pixinvent.com/vuexy-html-admin-template/documentation/"
+        target="_blank"
+        class="menu-link">
+        <i class="menu-icon icon-base ti tabler-file-description"></i>
+        <div data-i18n="Documentation">Documentation</div>
+        </a>
+    </li>
+    </ul>
+</aside>
+
+<div class="menu-mobile-toggler d-xl-none rounded-1">
+    <a href="javascript:void(0);" class="layout-menu-toggle menu-link text-large text-bg-secondary p-2 rounded-1">
+    <i class="ti tabler-menu icon-base"></i>
+    <i class="ti tabler-chevron-right icon-base"></i>
+    </a>
+</div>

resources/views/master/kabupatenkota/index.blade.php

@@ -0,0 +1,33 @@
+@extends('layout.main')
+@section('content')
+<div class="container-xxl flex-grow-1 container-p-y">
+    <div class="card">
+    <div class="card-header border-bottom">
+        <h5 class="card-title mb-0">Filters</h5>
+        <div class="d-flex justify-content-between align-items-center row pt-4 gap-4 gap-md-0">
+        <div class="col-md-4 user_role"></div>
+        <div class="col-md-4 user_plan"></div>
+        <div class="col-md-4 user_status"></div>
+        </div>
+    </div>
+    <div class="card-datatable">
+        <table class="datatables-users table">
+            <thead class="border-top">
+                <tr>
+                <th></th> <th>ID</th>
+                <th>Kode Kabupaten Kota</th>
+                <th>Nama Kabupaten Kota</th>
+                <th>Nama Provinsi</th>
+                <th>Actions</th>
+                </tr>
+            </thead>
+        </table>
+    </div>
+    @include('users.user.add')
+</div>
+@endsection
+
+@push('scripts')
+<script>var kabupatenKotaListUrl = "{{ route('kabupatenkota.list') }}";</script>
+<script src="{{ asset('assets/js/master-kabupatenkota.js') }}"></script>
+@endpush

resources/views/master/kecamatan/index.blade.php

@@ -0,0 +1,34 @@
+@extends('layout.main')
+@section('content')
+<div class="container-xxl flex-grow-1 container-p-y">
+    <div class="card">
+    <div class="card-header border-bottom">
+        <h5 class="card-title mb-0">Filters</h5>
+        <div class="d-flex justify-content-between align-items-center row pt-4 gap-4 gap-md-0">
+        <div class="col-md-4 user_role"></div>
+        <div class="col-md-4 user_plan"></div>
+        <div class="col-md-4 user_status"></div>
+        </div>
+    </div>
+    <div class="card-datatable">
+        <table class="datatables-users table">
+            <thead class="border-top">
+                <tr>
+                <th></th> <th>ID</th>
+                <th>Kode Kecamatan</th>
+                <th>Nama Kecamatan</th>
+                <th>Nama Kabupaten Kota</th>
+                <th>Nama Provinsi</th>
+                <th>Actions</th>
+                </tr>
+            </thead>
+        </table>
+    </div>
+    @include('users.user.add')
+</div>
+@endsection
+
+@push('scripts')
+<script>var kecamatanListUrl = "{{ route('kecamatan.list') }}";</script>
+<script src="{{ asset('assets/js/master-kecamatan.js') }}"></script>
+@endpush

resources/views/master/provinsi/index.blade.php

@@ -0,0 +1,32 @@
+@extends('layout.main')
+@section('content')
+<div class="container-xxl flex-grow-1 container-p-y">
+    <div class="card">
+    <div class="card-header border-bottom">
+        <h5 class="card-title mb-0">Filters</h5>
+        <div class="d-flex justify-content-between align-items-center row pt-4 gap-4 gap-md-0">
+        <div class="col-md-4 user_role"></div>
+        <div class="col-md-4 user_plan"></div>
+        <div class="col-md-4 user_status"></div>
+        </div>
+    </div>
+    <div class="card-datatable">
+        <table class="datatables-users table">
+            <thead class="border-top">
+                <tr>
+                <th></th> <th>ID</th>
+                <th>Kode Provinsi</th>
+                <th>Nama Provinsi</th>
+                <th>Actions</th>
+                </tr>
+            </thead>
+        </table>
+    </div>
+    @include('users.user.add')
+</div>
+@endsection
+
+@push('scripts')
+<script>var provinsiListUrl = "{{ route('provinsi.list') }}";</script>
+<script src="{{ asset('assets/js/master-provinsi.js') }}"></script>
+@endpush

resources/views/users/role/index.blade.php

@@ -0,0 +1,597 @@
+@extends('layout.main')
+@section('content')
+<div class="container-xxl flex-grow-1 container-p-y">
+    <h4 class="mb-1">Roles List</h4>
+
+    <p class="mb-6">
+    A role provided access to predefined menus and features so that depending on <br />
+    assigned role an administrator can have access to what user needs.
+    </p>
+    <!-- Role cards -->
+    <div class="row g-6">
+    <div class="col-xl-4 col-lg-6 col-md-6">
+        <div class="card">
+        <div class="card-body">
+            <div class="d-flex justify-content-between align-items-center mb-4">
+            <h6 class="fw-normal mb-0 text-body">Total 4 users</h6>
+            <ul class="list-unstyled d-flex align-items-center avatar-group mb-0">
+                <li
+                data-bs-toggle="tooltip"
+                data-popup="tooltip-custom"
+                data-bs-placement="top"
+                title="Vinnie Mostowy"
+                class="avatar pull-up">
+                <img class="rounded-circle" src="../../assets/img/avatars/5.png" alt="Avatar" />
+                </li>
+                <li
+                data-bs-toggle="tooltip"
+                data-popup="tooltip-custom"
+                data-bs-placement="top"
+                title="Allen Rieske"
+                class="avatar pull-up">
+                <img class="rounded-circle" src="../../assets/img/avatars/12.png" alt="Avatar" />
+                </li>
+                <li
+                data-bs-toggle="tooltip"
+                data-popup="tooltip-custom"
+                data-bs-placement="top"
+                title="Julee Rossignol"
+                class="avatar pull-up">
+                <img class="rounded-circle" src="../../assets/img/avatars/6.png" alt="Avatar" />
+                </li>
+                <li
+                data-bs-toggle="tooltip"
+                data-popup="tooltip-custom"
+                data-bs-placement="top"
+                title="Kaith D'souza"
+                class="avatar pull-up">
+                <img class="rounded-circle" src="../../assets/img/avatars/3.png" alt="Avatar" />
+                </li>
+            </ul>
+            </div>
+            <div class="d-flex justify-content-between align-items-end">
+            <div class="role-heading">
+                <h5 class="mb-1">Administrator</h5>
+                <a
+                href="javascript:;"
+                data-bs-toggle="modal"
+                data-bs-target="#addRoleModal"
+                class="role-edit-modal"
+                ><span>Edit Role</span></a
+                >
+            </div>
+            <a href="javascript:void(0);"><i class="icon-base ti tabler-copy icon-md text-heading"></i></a>
+            </div>
+        </div>
+        </div>
+    </div>
+    <div class="col-xl-4 col-lg-6 col-md-6">
+        <div class="card">
+        <div class="card-body">
+            <div class="d-flex justify-content-between align-items-center mb-4">
+            <h6 class="fw-normal mb-0 text-body">Total 7 users</h6>
+            <ul class="list-unstyled d-flex align-items-center avatar-group mb-0">
+                <li
+                data-bs-toggle="tooltip"
+                data-popup="tooltip-custom"
+                data-bs-placement="top"
+                title="Jimmy Ressula"
+                class="avatar pull-up">
+                <img class="rounded-circle" src="../../assets/img/avatars/4.png" alt="Avatar" />
+                </li>
+                <li
+                data-bs-toggle="tooltip"
+                data-popup="tooltip-custom"
+                data-bs-placement="top"
+                title="John Doe"
+                class="avatar pull-up">
+                <img class="rounded-circle" src="../../assets/img/avatars/1.png" alt="Avatar" />
+                </li>
+                <li
+                data-bs-toggle="tooltip"
+                data-popup="tooltip-custom"
+                data-bs-placement="top"
+                title="Kristi Lawker"
+                class="avatar pull-up">
+                <img class="rounded-circle" src="../../assets/img/avatars/2.png" alt="Avatar" />
+                </li>
+                <li class="avatar">
+                <span
+                    class="avatar-initial rounded-circle pull-up"
+                    data-bs-toggle="tooltip"
+                    data-bs-placement="bottom"
+                    title="4 more"
+                    >+4</span
+                >
+                </li>
+            </ul>
+            </div>
+            <div class="d-flex justify-content-between align-items-end">
+            <div class="role-heading">
+                <h5 class="mb-1">Manager</h5>
+                <a
+                href="javascript:;"
+                data-bs-toggle="modal"
+                data-bs-target="#addRoleModal"
+                class="role-edit-modal"
+                ><span>Edit Role</span></a
+                >
+            </div>
+            <a href="javascript:void(0);"><i class="icon-base ti tabler-copy icon-md text-heading"></i></a>
+            </div>
+        </div>
+        </div>
+    </div>
+    <div class="col-xl-4 col-lg-6 col-md-6">
+        <div class="card">
+        <div class="card-body">
+            <div class="d-flex justify-content-between align-items-center mb-4">
+            <h6 class="fw-normal mb-0 text-body">Total 5 users</h6>
+            <ul class="list-unstyled d-flex align-items-center avatar-group mb-0">
+                <li
+                data-bs-toggle="tooltip"
+                data-popup="tooltip-custom"
+                data-bs-placement="top"
+                title="Andrew Tye"
+                class="avatar pull-up">
+                <img class="rounded-circle" src="../../assets/img/avatars/6.png" alt="Avatar" />
+                </li>
+                <li
+                data-bs-toggle="tooltip"
+                data-popup="tooltip-custom"
+                data-bs-placement="top"
+                title="Rishi Swaat"
+                class="avatar pull-up">
+                <img class="rounded-circle" src="../../assets/img/avatars/9.png" alt="Avatar" />
+                </li>
+                <li
+                data-bs-toggle="tooltip"
+                data-popup="tooltip-custom"
+                data-bs-placement="top"
+                title="Rossie Kim"
+                class="avatar pull-up">
+                <img class="rounded-circle" src="../../assets/img/avatars/12.png" alt="Avatar" />
+                </li>
+                <li class="avatar">
+                <span
+                    class="avatar-initial rounded-circle pull-up"
+                    data-bs-toggle="tooltip"
+                    data-bs-placement="bottom"
+                    title="2 more"
+                    >+2</span
+                >
+                </li>
+            </ul>
+            </div>
+            <div class="d-flex justify-content-between align-items-end">
+            <div class="role-heading">
+                <h5 class="mb-1">Users</h5>
+                <a
+                href="javascript:;"
+                data-bs-toggle="modal"
+                data-bs-target="#addRoleModal"
+                class="role-edit-modal"
+                ><span>Edit Role</span></a
+                >
+            </div>
+            <a href="javascript:void(0);"><i class="icon-base ti tabler-copy icon-md text-heading"></i></a>
+            </div>
+        </div>
+        </div>
+    </div>
+    <div class="col-xl-4 col-lg-6 col-md-6">
+        <div class="card">
+        <div class="card-body">
+            <div class="d-flex justify-content-between align-items-center mb-4">
+            <h6 class="fw-normal mb-0 text-body">Total 3 users</h6>
+            <ul class="list-unstyled d-flex align-items-center avatar-group mb-0">
+                <li
+                data-bs-toggle="tooltip"
+                data-popup="tooltip-custom"
+                data-bs-placement="top"
+                title="Kim Karlos"
+                class="avatar pull-up">
+                <img class="rounded-circle" src="../../assets/img/avatars/3.png" alt="Avatar" />
+                </li>
+                <li
+                data-bs-toggle="tooltip"
+                data-popup="tooltip-custom"
+                data-bs-placement="top"
+                title="Katy Turner"
+                class="avatar pull-up">
+                <img class="rounded-circle" src="../../assets/img/avatars/9.png" alt="Avatar" />
+                </li>
+                <li
+                data-bs-toggle="tooltip"
+                data-popup="tooltip-custom"
+                data-bs-placement="top"
+                title="Peter Adward"
+                class="avatar pull-up">
+                <img class="rounded-circle" src="../../assets/img/avatars/4.png" alt="Avatar" />
+                </li>
+                <li class="avatar">
+                <span
+                    class="avatar-initial rounded-circle pull-up"
+                    data-bs-toggle="tooltip"
+                    data-bs-placement="bottom"
+                    title="3 more"
+                    >+3</span
+                >
+                </li>
+            </ul>
+            </div>
+            <div class="d-flex justify-content-between align-items-end">
+            <div class="role-heading">
+                <h5 class="mb-1">Support</h5>
+                <a
+                href="javascript:;"
+                data-bs-toggle="modal"
+                data-bs-target="#addRoleModal"
+                class="role-edit-modal"
+                ><span>Edit Role</span></a
+                >
+            </div>
+            <a href="javascript:void(0);"><i class="icon-base ti tabler-copy icon-md text-heading"></i></a>
+            </div>
+        </div>
+        </div>
+    </div>
+    <div class="col-xl-4 col-lg-6 col-md-6">
+        <div class="card">
+        <div class="card-body">
+            <div class="d-flex justify-content-between align-items-center mb-4">
+            <h6 class="fw-normal mb-0 text-body">Total 2 users</h6>
+            <ul class="list-unstyled d-flex align-items-center avatar-group mb-0">
+                <li
+                data-bs-toggle="tooltip"
+                data-popup="tooltip-custom"
+                data-bs-placement="top"
+                title="Kim Merchent"
+                class="avatar pull-up">
+                <img class="rounded-circle" src="../../assets/img/avatars/10.png" alt="Avatar" />
+                </li>
+                <li
+                data-bs-toggle="tooltip"
+                data-popup="tooltip-custom"
+                data-bs-placement="top"
+                title="Sam D'souza"
+                class="avatar pull-up">
+                <img class="rounded-circle" src="../../assets/img/avatars/13.png" alt="Avatar" />
+                </li>
+                <li
+                data-bs-toggle="tooltip"
+                data-popup="tooltip-custom"
+                data-bs-placement="top"
+                title="Nurvi Karlos"
+                class="avatar pull-up">
+                <img class="rounded-circle" src="../../assets/img/avatars/5.png" alt="Avatar" />
+                </li>
+                <li class="avatar">
+                <span
+                    class="avatar-initial rounded-circle pull-up"
+                    data-bs-toggle="tooltip"
+                    data-bs-placement="bottom"
+                    title="7 more"
+                    >+7</span
+                >
+                </li>
+            </ul>
+            </div>
+            <div class="d-flex justify-content-between align-items-end">
+            <div class="role-heading">
+                <h5 class="mb-1">Restricted User</h5>
+                <a
+                href="javascript:;"
+                data-bs-toggle="modal"
+                data-bs-target="#addRoleModal"
+                class="role-edit-modal"
+                ><span>Edit Role</span></a
+                >
+            </div>
+            <a href="javascript:void(0);"><i class="icon-base ti tabler-copy icon-md text-heading"></i></a>
+            </div>
+        </div>
+        </div>
+    </div>
+    <div class="col-xl-4 col-lg-6 col-md-6">
+        <div class="card h-100">
+        <div class="row h-100">
+            <div class="col-sm-5">
+            <div class="d-flex align-items-end h-100 justify-content-center mt-sm-0 mt-4">
+                <img
+                src="{{ asset('assets/img/illustrations/add-new-roles.png') }}"
+                class="img-fluid"
+                alt="Image"
+                width="83" />
+            </div>
+            </div>
+            <div class="col-sm-7">
+            <div class="card-body text-sm-end text-center ps-sm-0">
+                <button
+                data-bs-target="#addRoleModal"
+                data-bs-toggle="modal"
+                class="btn btn-sm btn-primary mb-4 text-nowrap add-new-role">
+                Add New Role
+                </button>
+                <p class="mb-0">
+                Add new role, <br />
+                if it doesn't exist.
+                </p>
+            </div>
+            </div>
+        </div>
+        </div>
+    </div>
+    <div class="col-12">
+        <h4 class="mt-6 mb-1">Total users with their roles</h4>
+        <p class="mb-0">Find all of your company’s administrator accounts and their associate roles.</p>
+    </div>
+    <div class="col-12">
+        <!-- Role Table -->
+        <div class="card">
+        <div class="card-datatable">
+            <table class="datatables-users table border-top">
+            <thead>
+                <tr>
+                <th></th>
+                <th></th>
+                <th>User</th>
+                <th>Role</th>
+                <th>Plan</th>
+                <th>Billing</th>
+                <th>Status</th>
+                <th>Actions</th>
+                </tr>
+            </thead>
+            </table>
+        </div>
+        </div>
+        <!--/ Role Table -->
+    </div>
+    </div>
+    <!--/ Role cards -->
+
+    <!-- Add Role Modal -->
+    <!-- Add Role Modal -->
+    <div class="modal fade" id="addRoleModal" tabindex="-1" aria-hidden="true">
+    <div class="modal-dialog modal-lg modal-simple modal-dialog-centered modal-add-new-role">
+        <div class="modal-content">
+        <div class="modal-body">
+            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            <div class="text-center mb-6">
+            <h4 class="role-title">Add New Role</h4>
+            <p class="text-body-secondary">Set role permissions</p>
+            </div>
+            <!-- Add role form -->
+            <form id="addRoleForm" class="row g-3" onsubmit="return false">
+            <div class="col-12 form-control-validation mb-3">
+                <label class="form-label" for="modalRoleName">Role Name</label>
+                <input
+                type="text"
+                id="modalRoleName"
+                name="modalRoleName"
+                class="form-control"
+                placeholder="Enter a role name"
+                tabindex="-1" />
+            </div>
+            <div class="col-12">
+                <h5 class="mb-6">Role Permissions</h5>
+                <!-- Permission table -->
+                <div class="table-responsive">
+                <table class="table table-flush-spacing">
+                    <tbody>
+                    <tr>
+                        <td class="text-nowrap fw-medium">
+                        Administrator Access
+                        <i
+                            class="icon-base ti tabler-info-circle icon-xs"
+                            data-bs-toggle="tooltip"
+                            data-bs-placement="top"
+                            title="Allows a full access to the system"></i>
+                        </td>
+                        <td>
+                        <div class="d-flex justify-content-end">
+                            <div class="form-check mb-0">
+                            <input class="form-check-input" type="checkbox" id="selectAll" />
+                            <label class="form-check-label" for="selectAll"> Select All </label>
+                            </div>
+                        </div>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="text-nowrap fw-medium text-heading">User Management</td>
+                        <td>
+                        <div class="d-flex justify-content-end">
+                            <div class="form-check mb-0 me-4 me-lg-12">
+                            <input class="form-check-input" type="checkbox" id="userManagementRead" />
+                            <label class="form-check-label" for="userManagementRead"> Read </label>
+                            </div>
+                            <div class="form-check mb-0 me-4 me-lg-12">
+                            <input class="form-check-input" type="checkbox" id="userManagementWrite" />
+                            <label class="form-check-label" for="userManagementWrite"> Write </label>
+                            </div>
+                            <div class="form-check mb-0">
+                            <input class="form-check-input" type="checkbox" id="userManagementCreate" />
+                            <label class="form-check-label" for="userManagementCreate"> Create </label>
+                            </div>
+                        </div>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="text-nowrap fw-medium text-heading">Content Management</td>
+                        <td>
+                        <div class="d-flex justify-content-end">
+                            <div class="form-check mb-0 me-4 me-lg-12">
+                            <input class="form-check-input" type="checkbox" id="contentManagementRead" />
+                            <label class="form-check-label" for="contentManagementRead"> Read </label>
+                            </div>
+                            <div class="form-check mb-0 me-4 me-lg-12">
+                            <input class="form-check-input" type="checkbox" id="contentManagementWrite" />
+                            <label class="form-check-label" for="contentManagementWrite"> Write </label>
+                            </div>
+                            <div class="form-check mb-0">
+                            <input class="form-check-input" type="checkbox" id="contentManagementCreate" />
+                            <label class="form-check-label" for="contentManagementCreate"> Create </label>
+                            </div>
+                        </div>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="text-nowrap fw-medium text-heading">Disputes Management</td>
+                        <td>
+                        <div class="d-flex justify-content-end">
+                            <div class="form-check mb-0 me-4 me-lg-12">
+                            <input class="form-check-input" type="checkbox" id="dispManagementRead" />
+                            <label class="form-check-label" for="dispManagementRead"> Read </label>
+                            </div>
+                            <div class="form-check mb-0 me-4 me-lg-12">
+                            <input class="form-check-input" type="checkbox" id="dispManagementWrite" />
+                            <label class="form-check-label" for="dispManagementWrite"> Write </label>
+                            </div>
+                            <div class="form-check mb-0">
+                            <input class="form-check-input" type="checkbox" id="dispManagementCreate" />
+                            <label class="form-check-label" for="dispManagementCreate"> Create </label>
+                            </div>
+                        </div>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="text-nowrap fw-medium text-heading">Database Management</td>
+                        <td>
+                        <div class="d-flex justify-content-end">
+                            <div class="form-check mb-0 me-4 me-lg-12">
+                            <input class="form-check-input" type="checkbox" id="dbManagementRead" />
+                            <label class="form-check-label" for="dbManagementRead"> Read </label>
+                            </div>
+                            <div class="form-check mb-0 me-4 me-lg-12">
+                            <input class="form-check-input" type="checkbox" id="dbManagementWrite" />
+                            <label class="form-check-label" for="dbManagementWrite"> Write </label>
+                            </div>
+                            <div class="form-check mb-0">
+                            <input class="form-check-input" type="checkbox" id="dbManagementCreate" />
+                            <label class="form-check-label" for="dbManagementCreate"> Create </label>
+                            </div>
+                        </div>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="text-nowrap fw-medium text-heading">Financial Management</td>
+                        <td>
+                        <div class="d-flex justify-content-end">
+                            <div class="form-check mb-0 me-4 me-lg-12">
+                            <input class="form-check-input" type="checkbox" id="finManagementRead" />
+                            <label class="form-check-label" for="finManagementRead"> Read </label>
+                            </div>
+                            <div class="form-check mb-0 me-4 me-lg-12">
+                            <input class="form-check-input" type="checkbox" id="finManagementWrite" />
+                            <label class="form-check-label" for="finManagementWrite"> Write </label>
+                            </div>
+                            <div class="form-check mb-0">
+                            <input class="form-check-input" type="checkbox" id="finManagementCreate" />
+                            <label class="form-check-label" for="finManagementCreate"> Create </label>
+                            </div>
+                        </div>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="text-nowrap fw-medium text-heading">Reporting</td>
+                        <td>
+                        <div class="d-flex justify-content-end">
+                            <div class="form-check mb-0 me-4 me-lg-12">
+                            <input class="form-check-input" type="checkbox" id="reportingRead" />
+                            <label class="form-check-label" for="reportingRead"> Read </label>
+                            </div>
+                            <div class="form-check mb-0 me-4 me-lg-12">
+                            <input class="form-check-input" type="checkbox" id="reportingWrite" />
+                            <label class="form-check-label" for="reportingWrite"> Write </label>
+                            </div>
+                            <div class="form-check mb-0">
+                            <input class="form-check-input" type="checkbox" id="reportingCreate" />
+                            <label class="form-check-label" for="reportingCreate"> Create </label>
+                            </div>
+                        </div>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="text-nowrap fw-medium text-heading">API Control</td>
+                        <td>
+                        <div class="d-flex justify-content-end">
+                            <div class="form-check mb-0 me-4 me-lg-12">
+                            <input class="form-check-input" type="checkbox" id="apiRead" />
+                            <label class="form-check-label" for="apiRead"> Read </label>
+                            </div>
+                            <div class="form-check mb-0 me-4 me-lg-12">
+                            <input class="form-check-input" type="checkbox" id="apiWrite" />
+                            <label class="form-check-label" for="apiWrite"> Write </label>
+                            </div>
+                            <div class="form-check mb-0">
+                            <input class="form-check-input" type="checkbox" id="apiCreate" />
+                            <label class="form-check-label" for="apiCreate"> Create </label>
+                            </div>
+                        </div>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="text-nowrap fw-medium text-heading">Repository Management</td>
+                        <td>
+                        <div class="d-flex justify-content-end">
+                            <div class="form-check mb-0 me-4 me-lg-12">
+                            <input class="form-check-input" type="checkbox" id="repoRead" />
+                            <label class="form-check-label" for="repoRead"> Read </label>
+                            </div>
+                            <div class="form-check mb-0 me-4 me-lg-12">
+                            <input class="form-check-input" type="checkbox" id="repoWrite" />
+                            <label class="form-check-label" for="repoWrite"> Write </label>
+                            </div>
+                            <div class="form-check mb-0">
+                            <input class="form-check-input" type="checkbox" id="repoCreate" />
+                            <label class="form-check-label" for="repoCreate"> Create </label>
+                            </div>
+                        </div>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="text-nowrap fw-medium text-heading">Payroll</td>
+                        <td>
+                        <div class="d-flex justify-content-end">
+                            <div class="form-check mb-0 me-4 me-lg-12">
+                            <input class="form-check-input" type="checkbox" id="payrollRead" />
+                            <label class="form-check-label" for="payrollRead"> Read </label>
+                            </div>
+                            <div class="form-check mb-0 me-4 me-lg-12">
+                            <input class="form-check-input" type="checkbox" id="payrollWrite" />
+                            <label class="form-check-label" for="payrollWrite"> Write </label>
+                            </div>
+                            <div class="form-check mb-0">
+                            <input class="form-check-input" type="checkbox" id="payrollCreate" />
+                            <label class="form-check-label" for="payrollCreate"> Create </label>
+                            </div>
+                        </div>
+                        </td>
+                    </tr>
+                    </tbody>
+                </table>
+                </div>
+                <!-- Permission table -->
+            </div>
+            <div class="col-12 text-center">
+                <button type="submit" class="btn btn-primary me-sm-4 me-1">Submit</button>
+                <button
+                type="reset"
+                class="btn btn-label-secondary"
+                data-bs-dismiss="modal"
+                aria-label="Close">
+                Cancel
+                </button>
+            </div>
+            </form>
+            <!--/ Add role form -->
+        </div>
+        </div>
+    </div>
+    </div>
+    <!--/ Add Role Modal -->
+
+    <!-- / Add Role Modal -->
+</div>
+@endsection

resources/views/users/user/add.blade.php

@@ -0,0 +1,56 @@
+<div
+    class="offcanvas offcanvas-end"
+    tabindex="-1"
+    id="offcanvasAddUser"
+    aria-labelledby="offcanvasAddUserLabel">
+    <div class="offcanvas-header border-bottom">
+        <h5 id="offcanvasAddUserLabel" class="offcanvas-title">Add User</h5>
+        <button
+            type="button"
+            class="btn-close text-reset"
+            data-bs-dismiss="offcanvas"
+            aria-label="Close"></button>
+    </div>
+    <div class="offcanvas-body mx-0 flex-grow-0 p-6 h-100">
+        <form class="add-new-user pt-0" id="addNewUserForm" action="{{ route('auth.createAccount') }}" method="POST" onsubmit="return false;">
+            @csrf
+            <div class="mb-6 form-control-validation">
+                <label class="form-label" for="add-user-fullname">User Name</label>
+                <input
+                    type="text"
+                    class="form-control"
+                    id="add-user-name"
+                    placeholder="john"
+                    name="name"
+                    aria-label="john" />
+                </div>
+            <div class="mb-6 form-control-validation">
+                <label class="form-label" for="add-user-email">Email</label>
+                <input
+                    type="text"
+                    id="add-user-email"
+                    class="form-control"
+                    placeholder="john.doe@example.com"
+                    aria-label="john.doe@example.com"
+                    name="email" />
+                </div>
+            <div class="mb-6 form-password-toggle form-control-validation">
+                <label class="form-label" for="add-user-password">Password</label>
+                <div class="input-group input-group-merge">
+                    <input
+                    type="password"
+                    id="add-user-password"
+                    class="form-control"
+                    name="password"
+                    placeholder="Enter password" />
+                    <span class="input-group-text cursor-pointer">
+                        <i class="bx bx-hide"></i>
+                    </span>
+                </div>
+            </div>
+            <button type="submit" class="btn btn-primary me-3 data-submit">Submit</button>
+            <button type="reset" class="btn btn-label-danger" data-bs-dismiss="offcanvas">Cancel</button>
+        </form>
+        </div>
+    </div>
+</div>

resources/views/users/user/index.blade.php

@@ -0,0 +1,118 @@
+@extends('layout.main')
+@section('content')
+<div class="container-xxl flex-grow-1 container-p-y">
+    <div class="row g-6 mb-6">
+    <div class="col-sm-6 col-xl-3">
+        <div class="card">
+        <div class="card-body">
+            <div class="d-flex align-items-start justify-content-between">
+            <div class="content-left">
+                <span class="text-heading">Session</span>
+                <div class="d-flex align-items-center my-1">
+                <h4 class="mb-0 me-2">21,459</h4>
+                <p class="text-success mb-0">(+29%)</p>
+                </div>
+                <small class="mb-0">Total Users</small>
+            </div>
+            <div class="avatar">
+                <span class="avatar-initial rounded bg-label-primary">
+                <i class="icon-base ti tabler-users icon-26px"></i>
+                </span>
+            </div>
+            </div>
+        </div>
+        </div>
+    </div>
+    <div class="col-sm-6 col-xl-3">
+        <div class="card">
+        <div class="card-body">
+            <div class="d-flex align-items-start justify-content-between">
+            <div class="content-left">
+                <span class="text-heading">Paid Users</span>
+                <div class="d-flex align-items-center my-1">
+                <h4 class="mb-0 me-2">4,567</h4>
+                <p class="text-success mb-0">(+18%)</p>
+                </div>
+                <small class="mb-0">Last week analytics </small>
+            </div>
+            <div class="avatar">
+                <span class="avatar-initial rounded bg-label-danger">
+                <i class="icon-base ti tabler-user-plus icon-26px"></i>
+                </span>
+            </div>
+            </div>
+        </div>
+        </div>
+    </div>
+    <div class="col-sm-6 col-xl-3">
+        <div class="card">
+        <div class="card-body">
+            <div class="d-flex align-items-start justify-content-between">
+            <div class="content-left">
+                <span class="text-heading">Active Users</span>
+                <div class="d-flex align-items-center my-1">
+                <h4 class="mb-0 me-2">{{ number_format($totalUsers) }}</h4>
+                </div>
+                <small class="mb-0">Last week analytics</small>
+            </div>
+            <div class="avatar">
+                <span class="avatar-initial rounded bg-label-success">
+                <i class="icon-base ti tabler-user-check icon-26px"></i>
+                </span>
+            </div>
+            </div>
+        </div>
+        </div>
+    </div>
+    <div class="col-sm-6 col-xl-3">
+        <div class="card">
+        <div class="card-body">
+            <div class="d-flex align-items-start justify-content-between">
+            <div class="content-left">
+                <span class="text-heading">Pending Users</span>
+                <div class="d-flex align-items-center my-1">
+                <h4 class="mb-0 me-2">1,234</h4>
+                <p class="text-success mb-0">(+42%)</p>
+                </div>
+                <small class="mb-0">Last week analytics</small>
+            </div>
+            <div class="avatar">
+                <span class="avatar-initial rounded bg-label-warning">
+                <i class="icon-base ti tabler-user-search icon-26px"></i>
+                </span>
+            </div>
+            </div>
+        </div>
+        </div>
+    </div>
+    </div>
+    <div class="card">
+    <div class="card-header border-bottom">
+        <h5 class="card-title mb-0">Filters</h5>
+        <div class="d-flex justify-content-between align-items-center row pt-4 gap-4 gap-md-0">
+        <div class="col-md-4 user_role"></div>
+        <div class="col-md-4 user_plan"></div>
+        <div class="col-md-4 user_status"></div>
+        </div>
+    </div>
+    <div class="card-datatable">
+        <table class="datatables-users table">
+            <thead class="border-top">
+                <tr>
+                <th></th> <th>ID</th>
+                <th>User</th>
+                <th>Role</th>
+                <th>Status</th>
+                <th>Actions</th>
+                </tr>
+            </thead>
+        </table>
+    </div>
+    @include('users.user.add')
+</div>
+@endsection
+
+@push('scripts')
+<script>var userListingUrl = "{{ route('api.users.list') }}";</script>
+<script src="{{ asset('assets/js/app-user-list.js') }}"></script>
+@endpush

routes/web.php

@@ -2,6 +2,38 @@
 
 use Illuminate\Support\Facades\Route;
 
-Route::get('/', function () {
+//Auth
-    return view('welcome');
+Route::get('/login', [App\Http\Controllers\AuthController::class, 'login'])->name('auth.login');
-});
+Route::get('/register', [App\Http\Controllers\AuthController::class, 'register'])->name('auth.register');
+Route::post('/create-account', [App\Http\Controllers\AuthController::class, 'createAccount'])->name('auth.createAccount');
+Route::patch('/users/{user}/verify', [App\Http\Controllers\AuthController::class, 'verify'])->name('users.verify');
+Route::post('/authenticate', [App\Http\Controllers\AuthController::class, 'authenticate'])->name('auth.authenticate');
+Route::post('/logout', [App\Http\Controllers\AuthController::class, 'logout'])->name('auth.logout');
+Route::get('/roles', [App\Http\Controllers\UserRoleController::class, 'index'])->name('roles.index');
+Route::post('/roles', [App\Http\Controllers\UserRoleController::class, 'store'])->name('roles.store');
+Route::delete('/roles/{role}', [App\Http\Controllers\UserRoleController::class, 'destroy'])->name('roles.destroy');
+
+// Route::middleware('auth')->group(function () {
+// Home
+Route::get('/', [App\Http\Controllers\HomeController::class, 'index'])->name('home.index');
+
+// User
+Route::get('/users', [App\Http\Controllers\UserController::class, 'index'])->name('users.index');
+Route::get('/api/users-list', [App\Http\Controllers\UserController::class, 'getUsers'])->name('api.users.list');
+// });
+
+// Provinsi
+Route::get('/provinsi', [App\Http\Controllers\ProvinsiController::class, 'index'])->name('provinsi.index');
+Route::get('/getprovinsi', [App\Http\Controllers\ProvinsiController::class, 'getProvinsi'])->name('provinsi.list');
+
+// Kabupaten
+Route::get('/kabupatenkota', [App\Http\Controllers\KabupatenKotaController::class, 'index'])->name('kabupatenkota.index');
+Route::get('/getkabupatenkota', [App\Http\Controllers\KabupatenKotaController::class, 'getKabupatenKota'])->name('kabupatenkota.list');
+
+// Kecamatan
+Route::get('/kecamatan', [App\Http\Controllers\KecamatanController::class, 'index'])->name('kecamatan.index');
+Route::get('/getkecamatan', [App\Http\Controllers\KecamatanController::class, 'getKecamatan'])->name('kecamatan.list');
+
+// Kelurahan
+Route::get('/desakelurahan', [App\Http\Controllers\KelurahanController::class, 'index'])->name('desakelurahan.index');
+Route::get('/getdesakelurahan', [App\Http\Controllers\KelurahanController::class, 'getDesaKelurahan'])->name('desakelurahan.list');