diff --git a/app/Exports/JenisKartuExport.php b/app/Exports/JenisKartuExport.php
new file mode 100644
index 0000000..36d5d78
--- /dev/null
+++ b/app/Exports/JenisKartuExport.php
@@ -0,0 +1,67 @@
+<?php
+
+namespace Modules\Webstatement\Exports;
+
+use Maatwebsite\Excel\Concerns\FromCollection;
+use Maatwebsite\Excel\Concerns\WithHeadings;
+use Maatwebsite\Excel\Concerns\WithMapping;
+use Maatwebsite\Excel\Concerns\ShouldAutoSize;
+use Maatwebsite\Excel\Concerns\WithStyles;
+use PhpOffice\PhpSpreadsheet\Worksheet\Worksheet;
+use Modules\Webstatement\Models\JenisKartu;
+
+class JenisKartuExport implements FromCollection, WithHeadings, WithMapping, ShouldAutoSize, WithStyles
+{
+    /**
+     * @return \Illuminate\Support\Collection
+     */
+    public function collection()
+    {
+        return JenisKartu::all();
+    }
+
+    /**
+     * @return array
+     */
+    public function headings(): array
+    {
+        return [
+            'ID',
+            'Code',
+            'Name',
+            'Biaya',
+            'Authorized Status',
+            'Created At',
+            'Updated At'
+        ];
+    }
+
+    /**
+     * @param mixed $row
+     * @return array
+     */
+    public function map($row): array
+    {
+        return [
+            $row->id,
+            $row->code,
+            $row->name,
+            $row->biaya,
+            $row->authorized_status ? 'Yes' : 'No',
+            $row->created_at->format('Y-m-d H:i:s'),
+            $row->updated_at ? $row->updated_at->format('Y-m-d H:i:s') : '',
+        ];
+    }
+
+    /**
+     * @param Worksheet $sheet
+     * @return array
+     */
+    public function styles(Worksheet $sheet)
+    {
+        return [
+            // Style the first row as bold text
+            1 => ['font' => ['bold' => true]],
+        ];
+    }
+}
diff --git a/app/Http/Controllers/JenisKartuController.php b/app/Http/Controllers/JenisKartuController.php
new file mode 100644
index 0000000..4e33cdd
--- /dev/null
+++ b/app/Http/Controllers/JenisKartuController.php
@@ -0,0 +1,207 @@
+<?php
+
+    namespace Modules\Webstatement\Http\Controllers;
+
+    use App\Http\Controllers\Controller;
+    use Exception;
+    use Illuminate\Http\Request;
+    use Maatwebsite\Excel\Facades\Excel;
+    use Modules\Webstatement\Exports\JenisKartuExport;
+    use Modules\Webstatement\Http\Requests\JenisKartuRequest;
+    use Modules\Webstatement\Models\JenisKartu;
+
+    // Added for Request class
+
+    class JenisKartuController extends Controller
+    {
+        public $user;
+
+        /**
+         * Display a listing of the resource.
+         */
+        public function index()
+        {
+            return view('webstatement::jenis-kartu.index');
+        }
+
+        /**
+         * Store a newly created resource in storage.
+         */
+        public function store(JenisKartuRequest $request)
+        {
+            $validate = $request->validated();
+
+            if ($validate) {
+                try {
+                    // Add created_by field
+                    $validate['created_by'] = auth()->id();
+
+                    // Save to database
+                    JenisKartu::create($validate);
+
+                    return redirect()
+                        ->route('jenis-kartu.index')
+                        ->with('success', 'Jenis Kartu created successfully');
+                } catch (Exception $e) {
+                    return redirect()
+                        ->route('jenis-kartu.create')
+                        ->with('error', 'Failed to create Jenis Kartu');
+                }
+            }
+        }
+
+        /**
+         * Show the form for creating a new resource.
+         */
+        public function create()
+        {
+            return view('webstatement::jenis-kartu.create');
+        }
+
+        /**
+         * Show the specified resource.
+         */
+        public function show($id)
+        {
+            $jenisKartu = JenisKartu::find($id);
+            return view('webstatement::jenis-kartu.show', compact('jenisKartu'));
+        }
+
+        /**
+         * Show the form for editing the specified resource.
+         */
+        public function edit($id)
+        {
+            $jenisKartu = JenisKartu::find($id);
+            return view('webstatement::jenis-kartu.create', compact('jenisKartu'));
+        }
+
+        /**
+         * Update the specified resource in storage.
+         */
+        public function update(JenisKartuRequest $request, $id)
+        {
+            $validate = $request->validated();
+
+            if ($validate) {
+                try {
+                    // Add updated_by field
+                    $validate['updated_by'] = auth()->id();
+
+                    // Update in database
+                    $jenisKartu = JenisKartu::find($id);
+                    $jenisKartu->update($validate);
+
+                    return redirect()
+                        ->route('jenis-kartu.index')
+                        ->with('success', 'Jenis Kartu updated successfully');
+                } catch (Exception $e) {
+                    return redirect()
+                        ->route('jenis-kartu.edit', $id)
+                        ->with('error', 'Failed to update Jenis Kartu');
+                }
+            }
+        }
+
+        /**
+         * Remove the specified resource from storage.
+         */
+        public function destroy($id)
+        {
+            try {
+                // Add deleted_by field
+                $jenisKartu             = JenisKartu::find($id);
+                $jenisKartu->deleted_by = auth()->id();
+                $jenisKartu->save();
+
+                // Delete from database
+                $jenisKartu->delete();
+
+                echo json_encode(['success' => true, 'message' => 'Jenis Kartu deleted successfully']);
+            } catch (Exception $e) {
+                echo json_encode(['success' => false, 'message' => 'Failed to delete Jenis Kartu']);
+            }
+        }
+
+        /**
+         * Provide data for datatables.
+         */
+        public function dataForDatatables(Request $request)
+        {
+            if (is_null($this->user) || !$this->user->can('jenis-kartu.view')) {
+                //abort(403, 'Sorry! You are not allowed to view jenis kartu.');
+            }
+
+            // Retrieve data from the database
+            $query = JenisKartu::query();
+            // Apply search filter if provided
+            if ($request->has('search') && !empty($request->get('search'))) {
+                $search = $request->get('search');
+                $query->where(function ($q) use ($search) {
+                    $q->where('code', 'LIKE', "%$search%");
+                    $q->orWhere('name', 'LIKE', "%$search%");
+                    $q->orWhere('biaya', 'LIKE', "%$search%");
+                });
+            }
+
+            // Apply sorting if provided
+            if ($request->has('sortOrder') && !empty($request->get('sortOrder'))) {
+                $order  = $request->get('sortOrder');
+                $column = $request->get('sortField');
+                $query->orderBy($column, $order);
+            }
+
+            // Get the total count of records
+            $totalRecords = $query->count();
+
+            // Apply pagination if provided
+            if ($request->has('page') && $request->has('size')) {
+                $page   = $request->get('page');
+                $size   = $request->get('size');
+                $offset = ($page - 1) * $size; // Calculate the offset
+
+                $query->skip($offset)->take($size);
+            }
+
+            // Get the filtered count of records
+            $filteredRecords = $query->count();
+
+            // Get the data for the current page
+            $data = $query->get();
+
+            // Calculate the page count
+            $pageCount = ceil($filteredRecords / ($request->get('size') ?: 1));
+
+            // Calculate the current page number
+            $currentPage = $request->get('page') ?: 1;
+
+            // Return the response data as a JSON object
+            return response()->json([
+                'draw'            => $request->get('draw'),
+                'recordsTotal'    => $totalRecords,
+                'recordsFiltered' => $filteredRecords,
+                'pageCount'       => $pageCount,
+                'page'            => $currentPage,
+                'totalCount'      => $totalRecords,
+                'data'            => $data,
+            ]);
+        }
+
+        /**
+         * Delete multiple records.
+         */
+        public function deleteMultiple(Request $request)
+        {
+            $ids = $request->input('ids');
+            JenisKartu::whereIn('id', $ids)->delete();
+            return response()->json(['message' => 'Jenis Kartu deleted successfully']);
+        }
+
+        /**
+         * Export data to Excel.
+         */
+        public function export()
+        {
+            return Excel::download(new JenisKartuExport, 'jenis-kartu.xlsx');
+        }
+    }
diff --git a/app/Http/Requests/JenisKartuRequest.php b/app/Http/Requests/JenisKartuRequest.php
new file mode 100644
index 0000000..ab9ea0f
--- /dev/null
+++ b/app/Http/Requests/JenisKartuRequest.php
@@ -0,0 +1,41 @@
+<?php
+
+namespace Modules\Webstatement\Http\Requests;
+
+use Illuminate\Foundation\Http\FormRequest;
+
+class JenisKartuRequest extends FormRequest
+{
+    /**
+     * Determine if the user is authorized to make this request.
+     */
+    public function authorize(): bool
+    {
+        return true;
+    }
+
+    /**
+     * Get the validation rules that apply to the request.
+     */
+    public function rules(): array
+    {
+        $rules = [
+            'code' => 'required|string|max:50',
+            'name' => 'required|string|max:255',
+            'biaya' => 'required|numeric',
+            'authorized_status' => 'nullable|boolean',
+        ];
+
+        // Add unique validation for code field on create
+        if ($this->isMethod('post')) {
+            $rules['code'] .= '|unique:jenis_kartu,code';
+        }
+
+        // Add unique validation for code field on update, excluding the current record
+        if ($this->isMethod('put') || $this->isMethod('patch')) {
+            $rules['code'] .= '|unique:jenis_kartu,code,' . $this->id;
+        }
+
+        return $rules;
+    }
+}
diff --git a/app/Models/Base.php b/app/Models/Base.php
new file mode 100644
index 0000000..e64fd63
--- /dev/null
+++ b/app/Models/Base.php
@@ -0,0 +1,51 @@
+<?php
+
+    namespace Modules\Webstatement\Models;
+
+    use Illuminate\Database\Eloquent\Model;
+    use Illuminate\Database\Eloquent\SoftDeletes;
+    use Spatie\Activitylog\LogOptions;
+    use Spatie\Activitylog\Traits\LogsActivity;
+    use Wildside\Userstamps\Userstamps;
+
+
+    /**
+     *
+     */
+    class Base extends Model
+    {
+        use LogsActivity, SoftDeletes, Userstamps;
+
+        protected $connection;
+
+        /**
+         * Constructs a new instance of the class.
+         *
+         * @param array $attributes Optional attributes to initialize the object with.
+         *
+         * @return void
+         */
+        public function __construct(array $attributes = [])
+        {
+            parent::__construct($attributes);
+
+            // Retrieve the module configuration from the module.json file
+            $modulePath = dirname(__FILE__, 3) . '/module.json';
+            $module = file_get_contents($modulePath);
+            $module = json_decode($module);
+
+            // Set the connection property to the database connection specified in the module configuration
+            $this->connection = $module->database;
+        }
+
+        /**
+         * Retrieves the activity log options for the User Management.
+         *
+         * @return LogOptions The activity log options.
+         */
+        public function getActivitylogOptions()
+        : LogOptions
+        {
+            return LogOptions::defaults()->logAll()->useLogName('User Management : ');
+        }
+    }
diff --git a/app/Models/JenisKartu.php b/app/Models/JenisKartu.php
new file mode 100644
index 0000000..d37382c
--- /dev/null
+++ b/app/Models/JenisKartu.php
@@ -0,0 +1,22 @@
+<?php
+
+namespace Modules\Webstatement\Models;
+
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+// use Modules\Webstatement\Database\Factories\JenisKartuFactory;
+
+class JenisKartu extends Base
+{
+    protected $table = "jenis_kartu";
+    protected $fillable = [
+        'code',
+        'name',
+        'biaya',
+        'authorized_status',
+        'created_by',
+        'updated_by',
+        'deleted_by',
+        'authorized_by',
+    ];
+}
diff --git a/database/migrations/2025_05_08_062000_create_jenis_kartu_table.php b/database/migrations/2025_05_08_062000_create_jenis_kartu_table.php
new file mode 100644
index 0000000..10f4c5f
--- /dev/null
+++ b/database/migrations/2025_05_08_062000_create_jenis_kartu_table.php
@@ -0,0 +1,37 @@
+<?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('jenis_kartu', function (Blueprint $table) {
+            $table->id();
+            $table->string('code')->unique();
+            $table->string('name');
+            $table->decimal('biaya', 10, 2)->nullable();
+            $table->timestamps();
+            $table->softDeletes();
+            $table->timestamp('crreated_at')->nullable();
+            $table->string('authorized_status', 1)->default('0');
+            $table->unsignedBigInteger('created_by')->nullable();
+            $table->unsignedBigInteger('updated_by')->nullable();
+            $table->unsignedBigInteger('deleted_by')->nullable();
+            $table->unsignedBigInteger('authorized_by')->nullable();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('jenis_kartu');
+    }
+};
diff --git a/database/seeders/JenisKartuSeeder.php b/database/seeders/JenisKartuSeeder.php
new file mode 100644
index 0000000..866227e
--- /dev/null
+++ b/database/seeders/JenisKartuSeeder.php
@@ -0,0 +1,56 @@
+<?php
+
+namespace Modules\Webstatement\Database\Seeders;
+
+use Illuminate\Database\Seeder;
+use Modules\Webstatement\Models\JenisKartu;
+
+class JenisKartuSeeder extends Seeder
+{
+    /**
+     * Run the database seeds.
+     */
+    public function run(): void
+    {
+        $jenisKartu = [
+            [
+                'code' => 'CLASSIC',
+                'name' => 'Kartu Classic',
+                'biaya' => 3000,
+                'created_at' => now(),
+                'updated_at' => now(),
+            ],
+            [
+                'code' => 'CLAS',
+                'name' => 'Kartu Classic (Singkatan)',
+                'biaya' => 3000,
+                'created_at' => now(),
+                'updated_at' => now(),
+            ],
+            [
+                'code' => 'SILVER',
+                'name' => 'Kartu Silver',
+                'biaya' => 5000,
+                'created_at' => now(),
+                'updated_at' => now(),
+            ],
+            [
+                'code' => 'SILV',
+                'name' => 'Kartu Silver (Singkatan)',
+                'biaya' => 5000,
+                'created_at' => now(),
+                'updated_at' => now(),
+            ],
+            [
+                'code' => 'GOLD',
+                'name' => 'Kartu Gold',
+                'biaya' => 10000,
+                'created_at' => now(),
+                'updated_at' => now(),
+            ],
+        ];
+
+        JenisKartu::insert($jenisKartu);
+    }
+
+}
diff --git a/database/seeders/WebstatementDatabaseSeeder.php b/database/seeders/WebstatementDatabaseSeeder.php
index 81cf7b6..de346f6 100644
--- a/database/seeders/WebstatementDatabaseSeeder.php
+++ b/database/seeders/WebstatementDatabaseSeeder.php
@@ -11,6 +11,8 @@ class WebstatementDatabaseSeeder extends Seeder
      */
     public function run(): void
     {
-        // $this->call([]);
+        $this->call([
+            JenisKartuSeeder::class
+        ]);
     }
 }
diff --git a/module.json b/module.json
index b57f975..d8f6836 100644
--- a/module.json
+++ b/module.json
@@ -10,40 +10,48 @@
     ],
     "files": [],
     "menu": {
-        "main": [{
-            "title": "Staging Data",
-            "path": "",
-            "icon": "ki-filled ki-questionnaire-tablet text-lg text-primary",
-            "classes": "",
-            "attributes": [],
-            "permission": "",
-            "roles": []
-        },{
-            "title": "Nasabah",
-            "path": "customer",
-            "icon": "ki-filled ki-people text-lg text-primary",
-            "classes": "",
-            "attributes": [],
-            "permission": "",
-            "roles": []
-        },{
-            "title": "Email Blast",
-            "path": "emailblast",
-            "icon": "ki-filled ki-sms text-lg text-primary",
-            "classes": "",
-            "attributes": [],
-            "permission": "",
-            "roles": []
-        }],
-        "master": [{
-            "title": "Pesan Sponsor",
-            "path": "migrasi",
-            "icon": "ki-filled ki-category text-lg",
-            "classes": "",
-            "attributes": [],
-            "permission": "",
-            "roles": []
-        }],
+        "main": [
+            {
+                "title": "Nasabah",
+                "path": "customer",
+                "icon": "ki-filled ki-people text-lg text-primary",
+                "classes": "",
+                "attributes": [],
+                "permission": "",
+                "roles": []
+            },
+            {
+                "title": "Email Blast",
+                "path": "emailblast",
+                "icon": "ki-filled ki-sms text-lg text-primary",
+                "classes": "",
+                "attributes": [],
+                "permission": "",
+                "roles": []
+            }
+        ],
+        "master": [
+            {
+                "title": "Jenis Kartu",
+                "path": "jenis-kartu",
+                "icon": "ki-filled ki-category text-lg",
+                "classes": "",
+                "attributes": [],
+                "permission": "",
+                "roles": [
+                    "administrator"
+                ]
+            },
+            {
+                "title": "Pesan Sponsor",
+                "path": "migrasi",
+                "icon": "ki-filled ki-category text-lg",
+                "classes": "",
+                "attributes": [],
+                "permission": "",
+                "roles": []
+            }
+        ],
         "system": []
     }
 }
diff --git a/resources/views/jenis-kartu/create.blade.php b/resources/views/jenis-kartu/create.blade.php
new file mode 100644
index 0000000..606c986
--- /dev/null
+++ b/resources/views/jenis-kartu/create.blade.php
@@ -0,0 +1,74 @@
+@extends('layouts.main')
+
+@section('breadcrumbs')
+    @if(isset($jenisKartu->id))
+        {{ Breadcrumbs::render(request()->route()->getName(),$jenisKartu) }}
+    @else
+        {{ Breadcrumbs::render(request()->route()->getName()) }}
+
+    @endif
+@endsection
+
+@section('content')
+    <div class="w-full grid gap-5 lg:gap-7.5 mx-auto">
+        @if(isset($jenisKartu->id))
+            <form action="{{ route('jenis-kartu.update', $jenisKartu->id) }}" method="POST">
+                <input type="hidden" name="id" value="{{ $jenisKartu->id }}">
+                @method('PUT')
+        @else
+            <form method="POST" action="{{ route('jenis-kartu.store') }}">
+        @endif
+                @csrf
+                <div class="card pb-2.5">
+                    <div class="card-header" id="basic_settings">
+                        <h3 class="card-title">
+                            {{ isset($jenisKartu->id) ? 'Edit' : 'Tambah' }} Jenis Kartu
+                        </h3>
+                        <div class="flex items-center gap-2">
+                            <a href="{{ route('jenis-kartu.index') }}" class="btn btn-xs btn-info"><i class="ki-filled ki-exit-left"></i> Back</a>
+                        </div>
+                    </div>
+                    <div class="card-body grid gap-5">
+                        <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                            <label class="form-label max-w-56">
+                                Code
+                            </label>
+                            <div class="flex flex-wrap items-baseline w-full">
+                                <input class="input  @error('code') border-danger bg-danger-light @enderror" type="text" name="code" value="{{ $jenisKartu->code ?? old('code') }}">
+                                @error('code')
+                                <em class="alert text-danger text-sm">{{ $message }}</em>
+                                @enderror
+                            </div>
+                        </div>
+                        <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                            <label class="form-label max-w-56">
+                                Nama
+                            </label>
+                            <div class="flex flex-wrap items-baseline w-full">
+                                <input class="input  @error('name') border-danger bg-danger-light @enderror" type="text" name="name" value="{{ $jenisKartu->name ?? old('name') }}">
+                                @error('name')
+                                <em class="alert text-danger text-sm">{{ $message }}</em>
+                                @enderror
+                            </div>
+                        </div>
+                        <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                            <label class="form-label max-w-56">
+                                Biaya
+                            </label>
+                            <div class="flex flex-wrap items-baseline w-full">
+                                <input class="input @error('biaya') border-danger bg-danger-light @enderror" type="number" min="0" step="1000" name="biaya" value="{{ $jenisKartu->biaya ?? old('biaya') }}">
+                                @error('biaya')
+                                <em class="alert text-danger text-sm">{{ $message }}</em>
+                                @enderror
+                            </div>
+                        </div>
+                        <div class="flex justify-end">
+                            <button type="submit" class="btn btn-primary">
+                                Simpan
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </form>
+    </div>
+@endsection
diff --git a/resources/views/jenis-kartu/index.blade.php b/resources/views/jenis-kartu/index.blade.php
new file mode 100644
index 0000000..4b59bfc
--- /dev/null
+++ b/resources/views/jenis-kartu/index.blade.php
@@ -0,0 +1,228 @@
+@extends('layouts.main')
+
+@section('breadcrumbs')
+    {{ Breadcrumbs::render(request()->route()->getName()) }}
+@endsection
+
+@section('content')
+    <div class="grid">
+        <div class="card card-grid min-w-full" data-datatable="false" data-datatable-page-size="10" data-datatable-state-save="false" id="jenis-kartu-table" data-api-url="{{ route('jenis-kartu.datatables') }}">
+            <div class="card-header py-5 flex-wrap">
+                <h3 class="card-title">
+                    Daftar Jenis Kartu
+                </h3>
+                <div class="flex flex-wrap gap-2 lg:gap-5">
+                    <div class="flex">
+                        <label class="input input-sm"> <i class="ki-filled ki-magnifier"> </i>
+                            <input placeholder="Search Jenis Kartu" id="search" type="text" value="">
+                        </label>
+                    </div>
+                    <div class="flex flex-wrap gap-2.5">
+                        <div class="h-[24px] border border-r-gray-200"></div>
+                        <a class="btn btn-sm btn-light" href="{{ route('jenis-kartu.export') }}"> Export to Excel </a>
+                        <a class="btn btn-sm btn-primary" href="{{ route('jenis-kartu.create') }}"> Tambah Jenis Kartu </a>
+                        <button class="btn btn-sm btn-danger hidden" id="deleteSelected" onclick="deleteSelectedRows()">Delete Selected</button>
+                    </div>
+                </div>
+            </div>
+            <div class="card-body">
+                <div class="scrollable-x-auto">
+                    <table class="table table-auto table-border align-middle text-gray-700 font-medium text-sm" data-datatable-table="true">
+                        <thead>
+                        <tr>
+                            <th class="w-14">
+                                <input class="checkbox checkbox-sm" data-datatable-check="true" type="checkbox"/>
+                            </th>
+                            <th class="min-w-[250px]" data-datatable-column="code">
+                                <span class="sort"> <span class="sort-label"> Code </span>
+                                    <span class="sort-icon"> </span> </span>
+                            </th>
+                            <th class="min-w-[250px]" data-datatable-column="name">
+                                <span class="sort"> <span class="sort-label"> Nama </span>
+                                    <span class="sort-icon"> </span> </span>
+                            </th>
+                            <th class="min-w-[150px]" data-datatable-column="biaya">
+                                <span class="sort"> <span class="sort-label"> Biaya </span>
+                                    <span class="sort-icon"> </span> </span>
+                            </th>
+                            <th class="min-w-[50px] text-center" data-datatable-column="actions">Action</th>
+                        </tr>
+                        </thead>
+                    </table>
+                </div>
+                <div class="card-footer justify-center md:justify-between flex-col md:flex-row gap-3 text-gray-600 text-2sm font-medium">
+                    <div class="flex items-center gap-2">
+                        Show
+                        <select class="select select-sm w-16" data-datatable-size="true" name="perpage"> </select> per page
+                    </div>
+                    <div class="flex items-center gap-4">
+                        <span data-datatable-info="true"> </span>
+                        <div class="pagination" data-datatable-pagination="true">
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+@endsection
+
+@push('scripts')
+    <script type="text/javascript">
+        function deleteData(data) {
+            Swal.fire({
+                title: 'Are you sure?',
+                text: "You won't be able to revert this!",
+                icon: 'warning',
+                showCancelButton: true,
+                confirmButtonColor: '#3085d6',
+                cancelButtonColor: '#d33',
+                confirmButtonText: 'Yes, delete it!'
+            }).then((result) => {
+                if (result.isConfirmed) {
+                    $.ajaxSetup({
+                        headers: {
+                            'X-CSRF-TOKEN': '{{ csrf_token()  }}'
+                        }
+                    });
+
+                    $.ajax(`webstatement/jenis-kartu/${data}`, {
+                        type: 'DELETE'
+                    }).then((response) => {
+                        swal.fire('Deleted!', 'Jenis Kartu has been deleted.', 'success').then(() => {
+                            window.location.reload();
+                        });
+                    }).catch((error) => {
+                        console.error('Error:', error);
+                        Swal.fire('Error!', 'An error occurred while deleting the file.', 'error');
+                    });
+                }
+            })
+        }
+
+        function deleteSelectedRows() {
+            const selectedCheckboxes = document.querySelectorAll('input[data-datatable-row-check="true"]:checked');
+            if (selectedCheckboxes.length === 0) {
+                Swal.fire('Warning', 'Please select at least one row to delete.', 'warning');
+                return;
+            }
+
+            Swal.fire({
+                title: 'Are you sure?',
+                text: `You are about to delete ${selectedCheckboxes.length} selected row(s). This action cannot be undone!`,
+                icon: 'warning',
+                showCancelButton: true,
+                confirmButtonColor: '#3085d6',
+                cancelButtonColor: '#d33',
+                confirmButtonText: 'Yes, delete them!'
+            }).then((result) => {
+                if (result.isConfirmed) {
+                    const ids = Array.from(selectedCheckboxes).map(checkbox => checkbox.value);
+
+                    $.ajaxSetup({
+                        headers: {
+                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
+                        }
+                    });
+
+                    $.ajax('{{ route("jenis-kartu.deleteMultiple") }}', {
+                        type: 'POST',
+                        data: {ids: ids}
+                    }).then((response) => {
+                        Swal.fire('Deleted!', 'Selected rows have been deleted.', 'success').then(() => {
+                            window.location.reload();
+                        });
+                    }).catch((error) => {
+                        console.error('Error:', error);
+                        Swal.fire('Error!', 'An error occurred while deleting the rows.', 'error');
+                    });
+                }
+            })
+        }
+    </script>
+    <script type="module">
+        const element = document.querySelector('#jenis-kartu-table');
+        const searchInput = document.getElementById('search');
+        const deleteSelectedButton = document.getElementById('deleteSelected');
+
+        const apiUrl = element.getAttribute('data-api-url');
+        const dataTableOptions = {
+            apiEndpoint: apiUrl,
+            pageSize: 5,
+            columns: {
+                select: {
+                    render: (item, data, context) => {
+                        const checkbox = document.createElement('input');
+                        checkbox.className = 'checkbox checkbox-sm';
+                        checkbox.type = 'checkbox';
+                        checkbox.value = data.id.toString();
+                        checkbox.setAttribute('data-datatable-row-check', 'true');
+                        return checkbox.outerHTML.trim();
+                    },
+                },
+                code: {
+                    title: 'Code',
+                },
+                name: {
+                    title: 'Nama',
+                },
+                biaya: {
+                    title: 'Biaya',
+                    render: (item, data) => {
+                        return data.biaya ? parseFloat(data.biaya).toLocaleString('id-ID', {
+                            style: 'currency',
+                            currency: 'IDR'
+                        }) : '-';
+                    },
+                },
+                actions: {
+                    title: 'Action',
+                    render: (item, data) => {
+                        return `<div class="flex flex-nowrap justify-center">
+                            <a class="btn btn-sm btn-icon btn-clear btn-info" href="jenis-kartu/${data.id}/edit">
+                                <i class="ki-outline ki-notepad-edit"></i>
+                            </a>
+                            <a onclick="deleteData(${data.id})" class="delete btn btn-sm btn-icon btn-clear btn-danger">
+                                <i class="ki-outline ki-trash"></i>
+                            </a>
+                        </div>`;
+                    },
+                }
+            },
+        };
+
+        let dataTable = new KTDataTable(element, dataTableOptions);
+        // Custom search functionality
+        searchInput.addEventListener('change', function () {
+            const searchValue = this.value.trim();
+            dataTable.goPage(1);
+            dataTable.search(searchValue, true);
+        });
+
+        function updateDeleteButtonVisibility() {
+            const selectedCheckboxes = document.querySelectorAll('input[data-datatable-row-check="true"]:checked');
+            if (selectedCheckboxes.length > 0) {
+                deleteSelectedButton.classList.remove('hidden');
+            } else {
+                deleteSelectedButton.classList.add('hidden');
+            }
+        }
+
+        // Initial call to set button visibility
+        updateDeleteButtonVisibility();
+
+        // Add event listener to the table for checkbox changes
+        element.addEventListener('change', function (event) {
+            if (event.target.matches('input[data-datatable-row-check="true"]')) {
+                updateDeleteButtonVisibility();
+            }
+        });
+
+        // Add event listener for the "select all" checkbox
+        const selectAllCheckbox = element.querySelector('input[data-datatable-check="true"]');
+        if (selectAllCheckbox) {
+            selectAllCheckbox.addEventListener('change', updateDeleteButtonVisibility);
+        }
+
+        window.dataTable = dataTable;
+    </script>
+@endpush
diff --git a/routes/breadcrumbs.php b/routes/breadcrumbs.php
index 9e1771f..3c1f5fc 100644
--- a/routes/breadcrumbs.php
+++ b/routes/breadcrumbs.php
@@ -55,3 +55,25 @@
         $trail->parent('emailblast.index');
         $trail->push('Edit Email Blast', route('emailblast.edit', $emailBlast->id));
     });
+
+    Breadcrumbs::for('jenis-kartu.index', function (BreadcrumbTrail $trail) {
+        $trail->parent('home');
+        $trail->push('Jenis Kartu', route('jenis-kartu.index'));
+    });
+
+    Breadcrumbs::for('jenis-kartu.create', function (BreadcrumbTrail $trail) {
+        $trail->parent('jenis-kartu.index');
+        $trail->push('Create Jenis Kartu', route('jenis-kartu.create'));
+    });
+
+    // Home > Jenis Kartus > View Jenis Kartu
+    Breadcrumbs::for('jenis-kartu.view', function (BreadcrumbTrail $trail, $data) {
+        $trail->parent('jenis-kartu.index');
+        $trail->push('View Jenis Kartu', route('jenis-kartu.view', $data->id));
+    });
+
+    // Home > Jenis Kartus > Edit Jenis Kartu
+    Breadcrumbs::for('jenis-kartu.edit', function (BreadcrumbTrail $trail, $data) {
+        $trail->parent('jenis-kartu.index');
+        $trail->push('Edit Jenis Kartu', route('jenis-kartu.edit', $data->id));
+    });
diff --git a/routes/web.php b/routes/web.php
index 6296da8..58e3235 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -2,32 +2,42 @@
 
 use Illuminate\Support\Facades\Route;
     use Modules\Webstatement\Http\Controllers\BiayaKartuController;
+    use Modules\Webstatement\Http\Controllers\JenisKartuController;
     use Modules\Webstatement\Http\Controllers\MigrasiController;
 use Modules\Webstatement\Http\Controllers\WebstatementController;
 use Modules\Webstatement\Http\Controllers\CustomerController;
 use Modules\Webstatement\Http\Controllers\EmailBlastController;
 
 
-/*
-|--------------------------------------------------------------------------
-| Web Routes
-|--------------------------------------------------------------------------
-|
-| Here is where you can register web routes for your application. These
-| routes are loaded by the RouteServiceProvider within a group which
-| contains the "web" middleware group. Now create something great!
-|
-*/
+    /*
+    |--------------------------------------------------------------------------
+    | Web Routes
+    |--------------------------------------------------------------------------
+    |
+    | Here is where you can register web routes for your application. These
+    | routes are loaded by the RouteServiceProvider within a group which
+    | contains the "web" middleware group. Now create something great!
+    |
+    */
 
 Route::middleware(['auth'])->group(function () {
     //Route::get('/', [WebstatementController::class, 'index'])->name('webstatement.index');
 
     // Customer routes
+
     Route::get('datatables', [CustomerController::class, 'dataForDatatables'])->name('customer.datatables');
     Route::get('export', [CustomerController::class, 'export'])->name('customer.export');
+    Route::post('delete-multiple', [CustomerController::class, 'deleteMultiple'])->name('deleteMultiple');
     Route::resource('customer', CustomerController::class);
 
 
+    Route::prefix('jenis-kartu')->name('jenis-kartu.')->group(function () {
+        Route::get('datatables', [JenisKartuController::class, 'dataForDatatables'])->name('datatables');
+        Route::get('export', [JenisKartuController::class, 'export'])->name('export');
+        Route::post('delete-multiple', [JenisKartuController::class, 'deleteMultiple'])->name('deleteMultiple');
+    });
+    Route::resource('jenis-kartu', JenisKartuController::class);
+
     Route::prefix('emailblast')->group(function () {
         Route::get('/', [EmailBlastController::class, 'index'])->name('emailblast.index');
         Route::get('/create', [EmailBlastController::class, 'create'])->name('emailblast.create');