update tgl 4 maret
This commit is contained in:
whywdd
parent
7e6fa9d63b
commit
e19d32a1a4
|
|
@ -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());
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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',
|
||||
];
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
}
|
||||
};
|
||||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
@ -9,23 +9,37 @@
|
|||
</div>
|
||||
|
||||
<div class="bg-white rounded-lg shadow-lg p-6">
|
||||
<!-- 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 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">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">
|
||||
<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>
|
||||
|
|
@ -34,7 +48,9 @@
|
|||
@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">{{ $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">
|
||||
|
|
@ -49,14 +65,33 @@
|
|||
</tr>
|
||||
@empty
|
||||
<tr>
|
||||
<td colspan="4" class="py-4 px-4 text-center text-gray-500">
|
||||
<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>
|
||||
|
||||
|
|
|
|||
|
|
@ -53,9 +53,10 @@
|
|||
|
||||
<!-- Enhanced Filter Section -->
|
||||
<div class="flex flex-wrap gap-4 px-6 py-4 border-b border-gray-200">
|
||||
<form id="filterForm" class="flex flex-wrap gap-4 w-full" onsubmit="applyFilter(event)">
|
||||
<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">
|
||||
<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>
|
||||
|
|
@ -63,16 +64,16 @@
|
|||
</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">
|
||||
<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 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">
|
||||
<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 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">
|
||||
<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>
|
||||
|
|
@ -81,12 +82,13 @@
|
|||
<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">
|
||||
<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 class="bg-gray-500 text-white px-4 py-2 rounded-md hover:bg-gray-600 transition-colors">
|
||||
<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
|
||||
|
|
@ -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');
|
||||
|
|
|
|||
Loading…
Reference in New Issue