update tgl 4 maret
This commit is contained in:
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()
|
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')
|
$gajiKaryawan = GajiModel::whereNotNull('gaji')
|
||||||
->where('gaji', '>', 0)
|
->where('gaji', '>', 0)
|
||||||
->select('nama_karyawan', 'gaji') // Ambil kolom nama_karyawan dan gaji
|
->select('id', 'nama', 'usia', 'jabatan', 'gaji', 'created_at')
|
||||||
->get();
|
->get();
|
||||||
|
|
||||||
return view('Gaji', compact('gajiKaryawan'));
|
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;
|
use HasFactory;
|
||||||
|
|
||||||
// Nama tabel yang digunakan
|
// Nama tabel yang digunakan
|
||||||
protected $table = 'laporan_transaksis'; // Ganti dengan nama tabel yang sesuai
|
protected $table = 'karyawans';
|
||||||
|
|
||||||
// Primary key
|
// Primary key
|
||||||
protected $primaryKey = 'id';
|
protected $primaryKey = 'id';
|
||||||
|
@ -23,13 +23,9 @@ class GajiModel extends Model
|
||||||
|
|
||||||
// Kolom yang dapat diisi
|
// Kolom yang dapat diisi
|
||||||
protected $fillable = [
|
protected $fillable = [
|
||||||
'Tanggal',
|
'nama',
|
||||||
'kode',
|
'usia',
|
||||||
'kategori',
|
'jabatan',
|
||||||
'keterangan',
|
|
||||||
'nama_karyawan',
|
|
||||||
'uang_masuk',
|
|
||||||
'uang_keluar',
|
|
||||||
'gaji'
|
'gaji'
|
||||||
];
|
];
|
||||||
|
|
||||||
|
@ -41,9 +37,6 @@ class GajiModel extends Model
|
||||||
const UPDATED_AT = 'updated_at';
|
const UPDATED_AT = 'updated_at';
|
||||||
|
|
||||||
protected $casts = [
|
protected $casts = [
|
||||||
'Tanggal' => 'date',
|
|
||||||
'uang_masuk' => 'decimal:2',
|
|
||||||
'uang_keluar' => 'decimal:2',
|
|
||||||
'gaji' => '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">
|
<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">
|
<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>
|
<i class="fas fa-user mr-3"></i>
|
||||||
<span>Gaji Karyawan</span>
|
<span>Data Karyawan</span>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="mb-4">
|
<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>
|
||||||
|
|
||||||
<div class="bg-white rounded-lg shadow-lg p-6">
|
<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 -->
|
<!-- Filter Keterangan -->
|
||||||
<div class="flex flex-wrap gap-4 px-6 py-4 border-b border-gray-200">
|
|
||||||
<div class="flex items-center">
|
<div class="flex items-center">
|
||||||
<label class="mr-2 text-sm font-medium text-gray-600">Nama Karyawan:</label>
|
<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">
|
<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
|
<i class="fas fa-search mr-2"></i>Filter
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</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">
|
<table id="gajiTable" class="min-w-full bg-white border border-gray-300">
|
||||||
<thead>
|
<thead>
|
||||||
<tr class="bg-gray-50">
|
<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">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">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-left">Nominal Gaji</th>
|
||||||
<th class="py-2 px-4 border-b text-center">Aksi</th>
|
<th class="py-2 px-4 border-b text-center">Aksi</th>
|
||||||
</tr>
|
</tr>
|
||||||
|
@ -34,7 +48,9 @@
|
||||||
@forelse($gajiKaryawan as $index => $gaji)
|
@forelse($gajiKaryawan as $index => $gaji)
|
||||||
<tr>
|
<tr>
|
||||||
<td class="py-2 px-4 border-b">{{ $index + 1 }}</td>
|
<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-2 px-4 border-b">Rp {{ number_format($gaji->gaji, 0, ',', '.') }}</td>
|
||||||
<td class="py-3 px-4 text-center">
|
<td class="py-3 px-4 text-center">
|
||||||
<div class="flex justify-center space-x-2">
|
<div class="flex justify-center space-x-2">
|
||||||
|
@ -49,7 +65,7 @@
|
||||||
</tr>
|
</tr>
|
||||||
@empty
|
@empty
|
||||||
<tr>
|
<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
|
Tidak ada data gaji karyawan
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
@ -57,6 +73,25 @@
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
@ -53,9 +53,10 @@
|
||||||
|
|
||||||
<!-- Enhanced Filter Section -->
|
<!-- Enhanced Filter Section -->
|
||||||
<div class="flex flex-wrap gap-4 px-6 py-4 border-b border-gray-200">
|
<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">
|
<div class="flex items-center">
|
||||||
<label class="mr-2 text-sm font-medium text-gray-600">Periode:</label>
|
<label for="periode" 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">
|
<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="daily">Harian</option>
|
||||||
<option value="weekly">Mingguan</option>
|
<option value="weekly">Mingguan</option>
|
||||||
<option value="monthly" selected>Bulanan</option>
|
<option value="monthly" selected>Bulanan</option>
|
||||||
|
@ -63,16 +64,16 @@
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex items-center">
|
<div class="flex items-center">
|
||||||
<label class="mr-2 text-sm font-medium text-gray-600">Dari:</label>
|
<label for="startDate" 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">
|
<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>
|
||||||
<div class="flex items-center">
|
<div class="flex items-center">
|
||||||
<label class="mr-2 text-sm font-medium text-gray-600">Sampai:</label>
|
<label for="endDate" 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">
|
<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>
|
||||||
<div class="flex items-center">
|
<div class="flex items-center">
|
||||||
<label class="mr-2 text-sm font-medium text-gray-600">Kategori:</label>
|
<label for="category" 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">
|
<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="">Semua Kategori</option>
|
||||||
<option value="penjualan">Penjualan</option>
|
<option value="penjualan">Penjualan</option>
|
||||||
<option value="pembelian">Pembelian</option>
|
<option value="pembelian">Pembelian</option>
|
||||||
|
@ -81,12 +82,13 @@
|
||||||
<option value="lainnya">Lainnya</option>
|
<option value="lainnya">Lainnya</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</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
|
<i class="fas fa-search mr-2"></i>Filter
|
||||||
</button>
|
</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
|
<i class="fas fa-redo mr-2"></i>Reset
|
||||||
</button>
|
</button>
|
||||||
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Enhanced Table -->
|
<!-- Enhanced Table -->
|
||||||
|
@ -144,9 +146,6 @@
|
||||||
<button class="text-blue-600 hover:text-blue-800" title="Edit">
|
<button class="text-blue-600 hover:text-blue-800" title="Edit">
|
||||||
<i class="fas fa-edit"></i>
|
<i class="fas fa-edit"></i>
|
||||||
</button>
|
</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">
|
<button class="text-red-600 hover:text-red-800" title="Hapus">
|
||||||
<i class="fas fa-trash"></i>
|
<i class="fas fa-trash"></i>
|
||||||
</button>
|
</button>
|
||||||
|
@ -167,6 +166,26 @@
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</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 -->
|
<!-- Action Buttons -->
|
||||||
<div class="flex justify-between items-center mt-4 mb-4">
|
<div class="flex justify-between items-center mt-4 mb-4">
|
||||||
<div class="flex space-x-2">
|
<div class="flex space-x-2">
|
||||||
|
@ -209,5 +228,136 @@
|
||||||
<!-- JavaScript (same as before) -->
|
<!-- JavaScript (same as before) -->
|
||||||
</div>
|
</div>
|
||||||
</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>
|
</body>
|
||||||
@endsection
|
@endsection
|
|
@ -7,7 +7,9 @@
|
||||||
use App\Http\Controllers\UangMasukController;
|
use App\Http\Controllers\UangMasukController;
|
||||||
use App\Http\Controllers\UangKeluarController;
|
use App\Http\Controllers\UangKeluarController;
|
||||||
use App\Http\Controllers\InputGajiController;
|
use App\Http\Controllers\InputGajiController;
|
||||||
|
use App\Http\Controllers\ModalKaryawanController;
|
||||||
use App\Http\Controllers\GajiController;
|
use App\Http\Controllers\GajiController;
|
||||||
|
use App\Http\Controllers\DataKaryawanController;
|
||||||
use App\Http\Controllers\HomeController;
|
use App\Http\Controllers\HomeController;
|
||||||
use App\Http\Controllers\LaporanController;
|
use App\Http\Controllers\LaporanController;
|
||||||
use App\Http\Controllers\UserController;
|
use App\Http\Controllers\UserController;
|
||||||
|
@ -37,6 +39,11 @@
|
||||||
//untuk Uang Gaji
|
//untuk Uang Gaji
|
||||||
Route::get('/gaji', [GajiController::class, 'index'])->name('gaji.index');
|
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
|
//untuk Laporan
|
||||||
Route::get('/Laporan', [LaporanController::class, 'index'])->name('Laporan.index');
|
Route::get('/Laporan', [LaporanController::class, 'index'])->name('Laporan.index');
|
||||||
Route::get('laporan/export-excel', [App\Http\Controllers\LaporanController::class, 'exportExcel'])->name('laporan.export-excel');
|
Route::get('laporan/export-excel', [App\Http\Controllers\LaporanController::class, 'exportExcel'])->name('laporan.export-excel');
|
||||||
|
|
Loading…
Reference in New Issue