From e19d32a1a42c8f4c0881321d4fa20732f2b2050e Mon Sep 17 00:00:00 2001
From: whywdd <widodo050304@gmail.com>
Date: Tue, 4 Mar 2025 09:51:08 +0700
Subject: [PATCH] update tgl 4 maret

---
 .../Controllers/DataKaryawanController.php    |  42 ++++
 app/Http/Controllers/GajiController.php       |  11 +-
 app/Models/DataKaryawanModel.php              |  20 ++
 app/Models/GajiModel.php                      |  15 +-
 ...25_03_04_011414_create_karyawans_table.php |  31 +++
 resources/views/Core/Sidebar.blade.php        |   2 +-
 resources/views/DataKaryawan.Blade.php        | 172 ++++++++++++++
 resources/views/Gaji.Blade.php                | 117 +++++----
 resources/views/Laporan.blade.php             | 224 +++++++++++++++---
 routes/web.php                                |   7 +
 10 files changed, 549 insertions(+), 92 deletions(-)
 create mode 100644 app/Http/Controllers/DataKaryawanController.php
 create mode 100644 app/Models/DataKaryawanModel.php
 create mode 100644 database/migrations/2025_03_04_011414_create_karyawans_table.php
 create mode 100644 resources/views/DataKaryawan.Blade.php

diff --git a/app/Http/Controllers/DataKaryawanController.php b/app/Http/Controllers/DataKaryawanController.php
new file mode 100644
index 0000000..8a695af
--- /dev/null
+++ b/app/Http/Controllers/DataKaryawanController.php
@@ -0,0 +1,42 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Models\DataKaryawanModel;
+use Illuminate\Http\Request;
+
+class DataKaryawanController extends Controller
+{
+    public function index()
+    {
+        return view('DataKaryawan');
+    }
+
+    public function store(Request $request)
+    {
+        try {
+            // Validasi input
+            $request->validate([
+                'nama' => 'required|string|max:100',
+                'usia' => 'required|integer|min:17|max:65',
+                'jabatan' => 'required|string|max:50',
+                'gaji' => 'required'
+            ]);
+
+            // Bersihkan format angka dari gaji
+            $gaji = str_replace('.', '', $request->gaji);
+
+            // Simpan data
+            DataKaryawanModel::create([
+                'nama' => $request->nama,
+                'usia' => $request->usia,
+                'jabatan' => $request->jabatan,
+                'gaji' => $gaji
+            ]);
+
+            return redirect()->back()->with('success', 'Data karyawan berhasil ditambahkan!');
+        } catch (\Exception $e) {
+            return redirect()->back()->with('error', 'Gagal menambahkan data karyawan: ' . $e->getMessage());
+        }
+    }
+}
diff --git a/app/Http/Controllers/GajiController.php b/app/Http/Controllers/GajiController.php
index 5f9a792..33e51b7 100644
--- a/app/Http/Controllers/GajiController.php
+++ b/app/Http/Controllers/GajiController.php
@@ -9,12 +9,19 @@ class GajiController extends Controller
 {
     public function index()
     {
-        // Ambil hanya data yang memiliki nilai gaji dan tidak null
+        // Ambil data dari tabel karyawans termasuk usia dan jabatan
         $gajiKaryawan = GajiModel::whereNotNull('gaji')
             ->where('gaji', '>', 0)
-            ->select('nama_karyawan', 'gaji') // Ambil kolom nama_karyawan dan gaji
+            ->select('id', 'nama', 'usia', 'jabatan', 'gaji', 'created_at')
             ->get();
             
         return view('Gaji', compact('gajiKaryawan'));
     }
+
+    // Tambahkan method untuk API
+    public function show($id)
+    {
+        $karyawan = GajiModel::findOrFail($id);
+        return response()->json($karyawan);
+    }
 }
\ No newline at end of file
diff --git a/app/Models/DataKaryawanModel.php b/app/Models/DataKaryawanModel.php
new file mode 100644
index 0000000..bba1d4d
--- /dev/null
+++ b/app/Models/DataKaryawanModel.php
@@ -0,0 +1,20 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Model;
+
+class DataKaryawanModel extends Model
+{
+    protected $table = 'karyawans';
+    
+    protected $fillable = [
+        'nama',
+        'usia',
+        'jabatan',
+        'gaji'
+    ];
+
+    // Jika ingin menggunakan timestamp (created_at & updated_at)
+    public $timestamps = true;
+}
diff --git a/app/Models/GajiModel.php b/app/Models/GajiModel.php
index 161751c..bd76e88 100644
--- a/app/Models/GajiModel.php
+++ b/app/Models/GajiModel.php
@@ -10,7 +10,7 @@ class GajiModel extends Model
     use HasFactory;
 
     // Nama tabel yang digunakan
-    protected $table = 'laporan_transaksis'; // Ganti dengan nama tabel yang sesuai
+    protected $table = 'karyawans';
 
     // Primary key
     protected $primaryKey = 'id';
@@ -23,13 +23,9 @@ class GajiModel extends Model
 
     // Kolom yang dapat diisi
     protected $fillable = [
-        'Tanggal',
-        'kode',
-        'kategori',
-        'keterangan',
-        'nama_karyawan',
-        'uang_masuk',
-        'uang_keluar',
+        'nama',
+        'usia',
+        'jabatan',
         'gaji'
     ];
 
@@ -41,9 +37,6 @@ class GajiModel extends Model
     const UPDATED_AT = 'updated_at';
 
     protected $casts = [
-        'Tanggal' => 'date',
-        'uang_masuk' => 'decimal:2',
-        'uang_keluar' => 'decimal:2',
         'gaji' => 'decimal:2',
     ];
 }
diff --git a/database/migrations/2025_03_04_011414_create_karyawans_table.php b/database/migrations/2025_03_04_011414_create_karyawans_table.php
new file mode 100644
index 0000000..54eb2c4
--- /dev/null
+++ b/database/migrations/2025_03_04_011414_create_karyawans_table.php
@@ -0,0 +1,31 @@
+<?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('karyawans', function (Blueprint $table) {
+            $table->id();
+            $table->string('nama', 100);
+            $table->integer('usia');
+            $table->string('jabatan', 50);
+            $table->decimal('gaji', 12, 2);
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('karyawans');
+    }
+};
diff --git a/resources/views/Core/Sidebar.blade.php b/resources/views/Core/Sidebar.blade.php
index dc8a0b8..89f55ea 100644
--- a/resources/views/Core/Sidebar.blade.php
+++ b/resources/views/Core/Sidebar.blade.php
@@ -135,7 +135,7 @@
             <li class="mb-4">
                 <a href="{{ route('gaji.index') }}" class="nav-link flex items-center p-2 rounded-lg hover:bg-blue-700 transition-colors">
                     <i class="fas fa-user mr-3"></i>
-                    <span>Gaji Karyawan</span>
+                    <span>Data Karyawan</span>
                 </a>
             </li>
             <li class="mb-4">
diff --git a/resources/views/DataKaryawan.Blade.php b/resources/views/DataKaryawan.Blade.php
new file mode 100644
index 0000000..a8e5f5e
--- /dev/null
+++ b/resources/views/DataKaryawan.Blade.php
@@ -0,0 +1,172 @@
+@extends('Core.Sidebar')
+
+@section('content')
+<div class="p-6 animate-fade-in">
+    <!-- Header -->
+    <div class="mb-4 bg-blue-600 text-white p-4 rounded-lg shadow-md">
+        <h1 class="text-2xl font-bold">Data Karyawan</h1>
+        <p class="text-sm mt-1">Formulir untuk menambahkan data karyawan</p>
+    </div>
+    
+    <div class="bg-white rounded-lg shadow-lg p-6">
+        <form id="karyawanForm" action="{{ route('karyawan.store') }}" method="POST" class="space-y-4">
+            @csrf
+            
+            <!-- Nama Karyawan -->
+            <div class="form-group">
+                <label class="block text-sm font-medium text-gray-700 mb-1">
+                    Nama Karyawan <span class="text-red-600">*</span>
+                </label>
+                <input 
+                    type="text" 
+                    name="nama" 
+                    class="w-full border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    placeholder="Masukkan nama karyawan"
+                    required
+                >
+            </div>
+
+            <!-- Usia -->
+            <div class="form-group">
+                <label class="block text-sm font-medium text-gray-700 mb-1">
+                    Usia <span class="text-red-600">*</span>
+                </label>
+                <input 
+                    type="number" 
+                    name="usia"
+                    class="w-full border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    placeholder="Masukkan usia"
+                    min="17"
+                    max="65"
+                    required
+                >
+                <p class="text-xs text-gray-500 mt-1">Usia minimal 17 tahun dan maksimal 65 tahun</p>
+            </div>
+
+            <!-- Jabatan -->
+            <div class="form-group">
+                <label class="block text-sm font-medium text-gray-700 mb-1">
+                    Jabatan <span class="text-red-600">*</span>
+                </label>
+                <input 
+                    type="text" 
+                    name="jabatan"
+                    class="w-full border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    placeholder="Masukkan jabatan"
+                    required
+                >
+            </div>
+
+            <!-- Gaji -->
+            <div class="form-group">
+                <label class="block text-sm font-medium text-gray-700 mb-1">
+                    Gaji <span class="text-red-600">*</span>
+                </label>
+                <div class="relative">
+                    <span class="absolute left-3 top-2 text-gray-600">Rp</span>
+                    <input 
+                        type="text" 
+                        name="gaji"
+                        class="w-full border rounded-lg pl-10 pr-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                        placeholder="0"
+                        required
+                        oninput="formatNumber(this)"
+                    >
+                </div>
+                <p class="text-xs text-gray-500 mt-1">Masukkan gaji tanpa tanda titik atau koma</p>
+            </div>
+
+            <!-- Tombol Submit -->
+            <div class="flex justify-end space-x-3 pt-4">
+                <button 
+                    type="button" 
+                    class="px-4 py-2 border rounded-lg hover:bg-gray-100 transition-colors"
+                    onclick="window.history.back()"
+                >
+                    Kembali
+                </button>
+                <button 
+                    type="submit" 
+                    class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+                >
+                    Simpan
+                </button>
+            </div>
+        </form>
+    </div>
+</div>
+
+<!-- SweetAlert2 -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
+<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+
+<script>
+function formatNumber(input) {
+    // Hapus semua karakter non-digit
+    let value = input.value.replace(/\D/g, '');
+    
+    // Format angka dengan pemisah ribuan
+    if (value !== '') {
+        value = new Intl.NumberFormat('id-ID').format(value);
+    }
+    
+    input.value = value;
+}
+
+// Menampilkan notifikasi jika ada pesan sukses atau error
+@if(session('success'))
+    Swal.fire({
+        icon: 'success',
+        title: 'Berhasil!',
+        text: '{{ session('success') }}',
+        confirmButtonText: 'OK'
+    });
+@endif
+
+@if(session('error'))
+    Swal.fire({
+        icon: 'error',
+        title: 'Gagal!',
+        text: '{{ session('error') }}',
+        confirmButtonText: 'OK'
+    });
+@endif
+</script>
+
+<style>
+/* Animasi dan styling yang sudah ada tetap sama */
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(-10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.animate-fade-in {
+    animation: fadeIn 0.5s ease-out;
+}
+
+/* Hover effects */
+.form-group input:hover,
+.form-group select:hover {
+    border-color: #93C5FD;
+}
+
+/* Button animations */
+button {
+    transition: all 0.2s ease-in-out;
+}
+
+button:hover {
+    transform: translateY(-1px);
+}
+
+button:active {
+    transform: translateY(0);
+}
+</style>
+@endsection
\ No newline at end of file
diff --git a/resources/views/Gaji.Blade.php b/resources/views/Gaji.Blade.php
index 4309142..77a375c 100644
--- a/resources/views/Gaji.Blade.php
+++ b/resources/views/Gaji.Blade.php
@@ -7,56 +7,91 @@
         <h1 class="text-2xl font-bold">Gaji Karyawan</h1>
         <p class="text-sm mt-1">Tabel keterangan gaji karyawan</p>
     </div>
-
+    
     <div class="bg-white rounded-lg shadow-lg p-6">
-        <!-- Filter Keterangan -->
-        <div class="flex flex-wrap gap-4 px-6 py-4 border-b border-gray-200">
+        <!-- Tombol Tambah dan Filter dalam satu baris -->
+        <div class="flex justify-between items-center mb-4">
+            <!-- Tombol Tambah Karyawan -->
+            <button onclick="window.location.href='{{ route('data-karyawan.index') }}'" 
+                    class="bg-green-500 text-white px-4 py-2 rounded-md hover:bg-green-600 transition-colors flex items-center">
+                <i class="fas fa-plus mr-2"></i>
+                Tambah Karyawan
+            </button>
+            
+            <!-- Filter Keterangan -->
             <div class="flex items-center">
                 <label class="mr-2 text-sm font-medium text-gray-600">Nama Karyawan:</label>
-                <input type="text" id="filterKeterangan" placeholder="Masukkan nama karyawan" class="border rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" onkeyup="filterTable()">
+                <input type="text" id="filterKeterangan" 
+                       placeholder="Masukkan nama karyawan" 
+                       class="border rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" 
+                       onkeyup="filterTable()">
                 <button class="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600 transition-colors ml-2">
                     <i class="fas fa-search mr-2"></i>Filter
                 </button>
             </div>
         </div>
     
-        <div class="overflow-x-auto">
-            <table id="gajiTable" class="min-w-full bg-white border border-gray-300">
-                <thead>
-                    <tr class="bg-gray-50">
-                        <th class="py-2 px-4 border-b text-left">No</th>
-                        <th class="py-2 px-4 border-b text-left">Nama Karyawan</th>
-                        <th class="py-2 px-4 border-b text-left">Nominal Gaji</th>
-                        <th class="py-2 px-4 border-b text-center">Aksi</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    @forelse($gajiKaryawan as $index => $gaji)
-                    <tr>
-                        <td class="py-2 px-4 border-b">{{ $index + 1 }}</td>
-                        <td class="py-2 px-4 border-b">{{ $gaji->nama_karyawan }}</td>
-                        <td class="py-2 px-4 border-b">Rp {{ number_format($gaji->gaji, 0, ',', '.') }}</td>
-                        <td class="py-3 px-4 text-center">
-                            <div class="flex justify-center space-x-2">
-                                <button class="text-blue-600 hover:text-blue-800" title="Edit">
-                                    <i class="fas fa-edit"></i>
-                                </button>
-                                <button class="text-red-600 hover:text-red-800" title="Hapus">
-                                    <i class="fas fa-trash"></i>
-                                </button>
-                            </div>
-                        </td>
-                    </tr>
-                    @empty
-                    <tr>
-                        <td colspan="4" class="py-4 px-4 text-center text-gray-500">
-                            Tidak ada data gaji karyawan
-                        </td>
-                    </tr>
-                    @endforelse
-                </tbody>
-            </table>
-        </div>
+        <div class="overflow-x-auto bg-white p-4 rounded-md shadow-md">
+    <!-- Table Section -->
+    <table id="gajiTable" class="min-w-full bg-white border border-gray-300">
+        <thead>
+            <tr class="bg-gray-50">
+                <th class="py-2 px-4 border-b text-left">No</th>
+                <th class="py-2 px-4 border-b text-left">Nama Karyawan</th>
+                <th class="py-2 px-4 border-b text-left">Usia</th>
+                <th class="py-2 px-4 border-b text-left">Jabatan</th>
+                <th class="py-2 px-4 border-b text-left">Nominal Gaji</th>
+                <th class="py-2 px-4 border-b text-center">Aksi</th>
+            </tr>
+        </thead>
+        <tbody>
+            @forelse($gajiKaryawan as $index => $gaji)
+            <tr>
+                <td class="py-2 px-4 border-b">{{ $index + 1 }}</td>
+                <td class="py-2 px-4 border-b">{{ $gaji->nama }}</td>
+                <td class="py-2 px-4 border-b">{{ $gaji->usia }} tahun</td>
+                <td class="py-2 px-4 border-b">{{ $gaji->jabatan }}</td>
+                <td class="py-2 px-4 border-b">Rp {{ number_format($gaji->gaji, 0, ',', '.') }}</td>
+                <td class="py-3 px-4 text-center">
+                    <div class="flex justify-center space-x-2">
+                        <button class="text-blue-600 hover:text-blue-800" title="Edit">
+                            <i class="fas fa-edit"></i>
+                        </button>
+                        <button class="text-red-600 hover:text-red-800" title="Hapus">
+                            <i class="fas fa-trash"></i>
+                        </button>
+                    </div>
+                </td>
+            </tr>
+            @empty
+            <tr>
+                <td colspan="6" class="py-4 px-4 text-center text-gray-500">
+                    Tidak ada data gaji karyawan
+                </td>
+            </tr>
+            @endforelse
+        </tbody>
+    </table>
+</div>
+
+<!-- Pagination Section -->
+<div class="intro-y col-span-12 flex flex-wrap sm:flex-row sm:flex-nowrap items-center py-5 px-4 bg-white rounded-md shadow-md mt-4">
+    <!-- Filter Rows per Page -->
+    <div class="flex items-center space-x-2 flex-grow">
+        <label for="rowsPerPage" class="text-sm font-medium">Rows per page:</label>
+        <select id="rowsPerPage" class="border rounded-md py-3 px-6 ml-1 text-sm focus:outline-none focus:ring focus:border-blue-300">
+            <option value="5" selected>5</option>
+            <option value="10">10</option>
+            <option value="15">15</option>
+            <option value="all">All</option>
+        </select>
+    </div>
+
+    <!-- Pagination Controls -->
+    <div class="flex items-center space-x-4 ml-2">
+        <button id="prevPage" class="text-sm px-3 py-2 border rounded-md bg-gray-100 hover:bg-gray-200 focus:outline-none">Previous</button>
+        <span id="pageIndicator" class="text-sm font-medium">Page 1</span>
+        <button id="nextPage" class="text-sm px-3 py-2 border rounded-md bg-gray-100 hover:bg-gray-200 focus:outline-none">Next</button>
     </div>
 </div>
 
diff --git a/resources/views/Laporan.blade.php b/resources/views/Laporan.blade.php
index e9d4367..08601fa 100644
--- a/resources/views/Laporan.blade.php
+++ b/resources/views/Laporan.blade.php
@@ -53,40 +53,42 @@
 
             <!-- Enhanced Filter Section -->
             <div class="flex flex-wrap gap-4 px-6 py-4 border-b border-gray-200">
-                <div class="flex items-center">
-                    <label class="mr-2 text-sm font-medium text-gray-600">Periode:</label>
-                    <select class="border rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
-                        <option value="daily">Harian</option>
-                        <option value="weekly">Mingguan</option>
-                        <option value="monthly" selected>Bulanan</option>
-                        <option value="yearly">Tahunan</option>
-                    </select>
-                </div>
-                <div class="flex items-center">
-                    <label class="mr-2 text-sm font-medium text-gray-600">Dari:</label>
-                    <input type="date" class="border rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
-                </div>
-                <div class="flex items-center">
-                    <label class="mr-2 text-sm font-medium text-gray-600">Sampai:</label>
-                    <input type="date" class="border rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
-                </div>
-                <div class="flex items-center">
-                    <label class="mr-2 text-sm font-medium text-gray-600">Kategori:</label>
-                    <select class="border rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
-                        <option value="">Semua Kategori</option>
-                        <option value="penjualan">Penjualan</option>
-                        <option value="pembelian">Pembelian</option>
-                        <option value="gaji">Gaji & Upah</option>
-                        <option value="operasional">Biaya Operasional</option>
-                        <option value="lainnya">Lainnya</option>
-                    </select>
-                </div>
-                <button class="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600 transition-colors">
-                    <i class="fas fa-search mr-2"></i>Filter
-                </button>
-                <button class="bg-gray-500 text-white px-4 py-2 rounded-md hover:bg-gray-600 transition-colors">
-                    <i class="fas fa-redo mr-2"></i>Reset
-                </button>
+                <form id="filterForm" class="flex flex-wrap gap-4 w-full" onsubmit="applyFilter(event)">
+                    <div class="flex items-center">
+                        <label for="periode" class="mr-2 text-sm font-medium text-gray-600">Periode:</label>
+                        <select id="periode" name="periode" class="border rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" onchange="handlePeriodeChange()">
+                            <option value="daily">Harian</option>
+                            <option value="weekly">Mingguan</option>
+                            <option value="monthly" selected>Bulanan</option>
+                            <option value="yearly">Tahunan</option>
+                        </select>
+                    </div>
+                    <div class="flex items-center">
+                        <label for="startDate" class="mr-2 text-sm font-medium text-gray-600">Dari:</label>
+                        <input type="date" id="startDate" name="startDate" class="border rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
+                    </div>
+                    <div class="flex items-center">
+                        <label for="endDate" class="mr-2 text-sm font-medium text-gray-600">Sampai:</label>
+                        <input type="date" id="endDate" name="endDate" class="border rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
+                    </div>
+                    <div class="flex items-center">
+                        <label for="category" class="mr-2 text-sm font-medium text-gray-600">Kategori:</label>
+                        <select id="category" name="category" class="border rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
+                            <option value="">Semua Kategori</option>
+                            <option value="penjualan">Penjualan</option>
+                            <option value="pembelian">Pembelian</option>
+                            <option value="gaji">Gaji & Upah</option>
+                            <option value="operasional">Biaya Operasional</option>
+                            <option value="lainnya">Lainnya</option>
+                        </select>
+                    </div>
+                    <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600 transition-colors">
+                        <i class="fas fa-search mr-2"></i>Filter
+                    </button>
+                    <button type="button" class="bg-gray-500 text-white px-4 py-2 rounded-md hover:bg-gray-600 transition-colors" onclick="resetFilter()">
+                        <i class="fas fa-redo mr-2"></i>Reset
+                    </button>
+                </form>
             </div>
 
             <!-- Enhanced Table -->
@@ -144,9 +146,6 @@
                                         <button class="text-blue-600 hover:text-blue-800" title="Edit">
                                             <i class="fas fa-edit"></i>
                                         </button>
-                                        <button class="text-green-600 hover:text-green-800" title="Detail">
-                                            <i class="fas fa-eye"></i>
-                                        </button>
                                         <button class="text-red-600 hover:text-red-800" title="Hapus">
                                             <i class="fas fa-trash"></i>
                                         </button>
@@ -167,6 +166,26 @@
                 </table>
             </div>
 
+            <div class="intro-y col-span-12 flex flex-wrap sm:flex-row sm:flex-nowrap items-center py-5 px-4 bg-white rounded-md shadow-md">
+            <!-- Filter Rows per Page -->
+            <div class="flex items-center space-x-2 flex-grow">
+                <label for="rowsPerPage" class="text-sm font-medium">Rows per page:</label>
+                <select id="rowsPerPage" class="border rounded-md py-3 px-6 ml-1 text-sm focus:outline-none focus:ring focus:border-blue-300">
+                    <option value="5" selected>5</option>
+                    <option value="10">10</option>
+                    <option value="15">15</option>
+                    <option value="all">All</option>
+                </select>
+            </div>
+
+            <!-- Pagination Controls -->
+            <div class="flex items-center space-x-4 ml-2">
+                <button id="prevPage" class="text-sm px-3 py-2 border rounded-md bg-gray-100 hover:bg-gray-200 focus:outline-none">Previous</button>
+                <span id="pageIndicator" class="text-sm font-medium">Page 1</span>
+                <button id="nextPage" class="text-sm px-3 py-2 border rounded-md bg-gray-100 hover:bg-gray-200 focus:outline-none">Next</button>
+            </div>
+        </div>
+
             <!-- Action Buttons -->
             <div class="flex justify-between items-center mt-4 mb-4">
                 <div class="flex space-x-2">
@@ -209,5 +228,136 @@
             <!-- JavaScript (same as before) -->
         </div>
     </div>
+
+<script>
+// Fungsi pagination yang sudah ada (jika ada)...
+
+document.addEventListener('DOMContentLoaded', function() {
+    const table = document.querySelector('table');
+    const tbody = table.querySelector('tbody');
+    const rows = tbody.getElementsByTagName('tr');
+    const rowsPerPageSelect = document.getElementById('rowsPerPage');
+    const prevButton = document.getElementById('prevPage');
+    const nextButton = document.getElementById('nextPage');
+    const pageIndicator = document.getElementById('pageIndicator');
+    
+    let currentPage = 1;
+    let rowsPerPage = parseInt(rowsPerPageSelect.value);
+    
+    function displayTableRows() {
+        const start = (currentPage - 1) * rowsPerPage;
+        const end = start + rowsPerPage;
+        let visibleRows = 0;
+        
+        // Sembunyikan semua baris terlebih dahulu
+        Array.from(rows).forEach((row, index) => {
+            if (index >= start && index < end) {
+                row.style.display = '';
+                visibleRows++;
+            } else {
+                row.style.display = 'none';
+            }
+        });
+        
+        // Update page indicator
+        const totalPages = Math.ceil(rows.length / rowsPerPage);
+        pageIndicator.textContent = `Page ${currentPage} of ${totalPages}`;
+        
+        // Update button states
+        prevButton.disabled = currentPage === 1;
+        nextButton.disabled = currentPage >= totalPages;
+        
+        // Tambahkan class untuk styling button disabled
+        if (prevButton.disabled) {
+            prevButton.classList.add('opacity-50', 'cursor-not-allowed');
+        } else {
+            prevButton.classList.remove('opacity-50', 'cursor-not-allowed');
+        }
+        
+        if (nextButton.disabled) {
+            nextButton.classList.add('opacity-50', 'cursor-not-allowed');
+        } else {
+            nextButton.classList.remove('opacity-50', 'cursor-not-allowed');
+        }
+    }
+    
+    // Event listener untuk rows per page
+    rowsPerPageSelect.addEventListener('change', function() {
+        if (this.value === 'all') {
+            rowsPerPage = rows.length;
+        } else {
+            rowsPerPage = parseInt(this.value);
+        }
+        currentPage = 1;
+        displayTableRows();
+        
+        // Simpan preferensi di localStorage
+        localStorage.setItem('preferredRowsPerPage', this.value);
+    });
+    
+    // Event listener untuk previous button
+    prevButton.addEventListener('click', function() {
+        if (currentPage > 1) {
+            currentPage--;
+            displayTableRows();
+        }
+    });
+    
+    // Event listener untuk next button
+    nextButton.addEventListener('click', function() {
+        if (currentPage < Math.ceil(rows.length / rowsPerPage)) {
+            currentPage++;
+            displayTableRows();
+        }
+    });
+    
+    // Load saved preference dari localStorage
+    const savedRowsPerPage = localStorage.getItem('preferredRowsPerPage');
+    if (savedRowsPerPage) {
+        rowsPerPageSelect.value = savedRowsPerPage;
+        if (savedRowsPerPage === 'all') {
+            rowsPerPage = rows.length;
+        } else {
+            rowsPerPage = parseInt(savedRowsPerPage);
+        }
+    }
+    
+    // Keyboard navigation
+    document.addEventListener('keydown', function(e) {
+        if (e.key === 'ArrowLeft' && !prevButton.disabled) {
+            prevButton.click();
+        } else if (e.key === 'ArrowRight' && !nextButton.disabled) {
+            nextButton.click();
+        }
+    });
+    
+    // Initial display
+    displayTableRows();
+});
+
+// Tambahkan ini ke dalam script yang sudah ada
+function updateTable() {
+    // Panggil displayTableRows setelah filter diterapkan
+    displayTableRows();
+}
+
+// Update fungsi applyFilter yang sudah ada
+function applyFilter(event) {
+    event.preventDefault();
+    const formData = new FormData(document.getElementById('filterForm'));
+    const queryString = new URLSearchParams(formData).toString();
+    
+    // Tambahkan callback untuk update table setelah filter
+    fetch(`${window.location.pathname}?${queryString}`)
+        .then(response => response.text())
+        .then(html => {
+            const parser = new DOMParser();
+            const doc = parser.parseFromString(html, 'text/html');
+            const newTbody = doc.querySelector('tbody');
+            document.querySelector('tbody').innerHTML = newTbody.innerHTML;
+            updateTable();
+        });
+}
+</script>
 </body>
 @endsection
\ No newline at end of file
diff --git a/routes/web.php b/routes/web.php
index 8289e0e..2a228e3 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -7,7 +7,9 @@
 use App\Http\Controllers\UangMasukController;
 use App\Http\Controllers\UangKeluarController;
 use App\Http\Controllers\InputGajiController;
+use App\Http\Controllers\ModalKaryawanController;
 use App\Http\Controllers\GajiController;
+use App\Http\Controllers\DataKaryawanController;
 use App\Http\Controllers\HomeController;
 use App\Http\Controllers\LaporanController;
 use App\Http\Controllers\UserController;
@@ -37,6 +39,11 @@
 //untuk Uang Gaji
 Route::get('/gaji', [GajiController::class, 'index'])->name('gaji.index');
 
+// Tambahkan Data Karyawan
+Route::get('/data-karyawan', [DataKaryawanController::class, 'index'])->name('data-karyawan.index');
+Route::post('/data-karyawan', [DataKaryawanController::class, 'store'])->name('karyawan.store');
+Route::resource('modal-karyawan', ModalKaryawanController::class);
+
 //untuk Laporan
 Route::get('/Laporan', [LaporanController::class, 'index'])->name('Laporan.index');
 Route::get('laporan/export-excel', [App\Http\Controllers\LaporanController::class, 'exportExcel'])->name('laporan.export-excel');