root
1341 lines
36 KiB
PHP
1341 lines
36 KiB
PHP
<div class="container mt-4">
|
|
|
|
<div class="card border-0 shadow-lg rounded-4">
|
|
|
|
<div class="card-body p-4">
|
|
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
|
|
<div>
|
|
<h4 class="mb-1 fw-bold">
|
|
Data Karyawan
|
|
</h4>
|
|
|
|
<small class="text-muted">
|
|
Management Data Karyawan
|
|
</small>
|
|
</div>
|
|
|
|
<button class="btn btn-warning rounded-pill px-4 btn-add">
|
|
<i class="fa fa-plus me-2"></i>
|
|
Tambah Karyawan
|
|
</button>
|
|
|
|
</div>
|
|
|
|
<div class="table-responsive">
|
|
|
|
<table id="tableEmployees"
|
|
class="table modern-table align-middle w-100">
|
|
|
|
<thead class="table-light">
|
|
|
|
<tr>
|
|
<th>No</th>
|
|
<th>Foto</th>
|
|
<th>Kode</th>
|
|
<th>Fingerprint</th>
|
|
<th>Nama</th>
|
|
<th>Department</th>
|
|
<th>Position</th>
|
|
<th>Branch</th>
|
|
<th>Phone</th>
|
|
<th>Status</th>
|
|
<th>Active</th>
|
|
<th>Aksi</th>
|
|
</tr>
|
|
|
|
</thead>
|
|
|
|
</table>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- MODAL -->
|
|
<div class="modal fade" id="modalEmployee">
|
|
|
|
<div class="modal-dialog modal-xl modal-dialog-scrollable modal-dialog-centered">
|
|
|
|
<div class="modal-content border-0 shadow-lg rounded-4">
|
|
|
|
<div class="modal-header bg-warning text-white">
|
|
|
|
<h5 class="modal-title">
|
|
Form Karyawan
|
|
</h5>
|
|
|
|
<button class="btn-close btn-close-white"
|
|
data-bs-dismiss="modal"></button>
|
|
|
|
</div>
|
|
|
|
<div class="modal-body p-4">
|
|
|
|
<input type="hidden" id="id">
|
|
|
|
<div class="row">
|
|
|
|
<!-- FOTO -->
|
|
<div class="col-md-4 mb-4">
|
|
|
|
<label class="fw-semibold mb-2">
|
|
Foto Karyawan
|
|
</label>
|
|
|
|
<div class="upload-box text-center p-4">
|
|
|
|
<img src="https://cdn-icons-png.flaticon.com/512/149/149071.png"
|
|
id="photoPreview"
|
|
class="preview-photo mb-3">
|
|
|
|
<div>
|
|
|
|
<input type="file"
|
|
id="photo_file"
|
|
accept="image/*"
|
|
hidden>
|
|
|
|
<button type="button"
|
|
class="btn btn-outline-warning rounded-pill"
|
|
id="btnChoosePhoto">
|
|
|
|
<i class="fa fa-image me-2"></i>
|
|
Pilih Foto
|
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
<small class="text-muted d-block mt-2">
|
|
JPG, PNG, WEBP Max 2MB
|
|
</small>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- FORM -->
|
|
<div class="col-md-8">
|
|
|
|
<div class="row">
|
|
|
|
<div class="col-md-7 mb-3">
|
|
|
|
<label>NIK</label>
|
|
|
|
<input type="text"
|
|
id="nik"
|
|
class="form-control">
|
|
|
|
</div>
|
|
|
|
<div class="col-md-5 mb-3">
|
|
|
|
<label>Fingerprint User ID</label>
|
|
|
|
<input type="text"
|
|
id="fingerprint_user_id"
|
|
class="form-control">
|
|
|
|
</div>
|
|
|
|
<div class="col-md-6 mb-3">
|
|
|
|
<label>Nama Lengkap</label>
|
|
|
|
<input type="text"
|
|
id="full_name"
|
|
class="form-control">
|
|
|
|
</div>
|
|
|
|
<div class="col-md-3 mb-3">
|
|
|
|
<label>Agama</label>
|
|
|
|
<select id="religion"
|
|
class="form-control">
|
|
|
|
<option value="">
|
|
-- Pilih --
|
|
</option>
|
|
|
|
<option value="Islam">
|
|
Islam
|
|
</option>
|
|
|
|
<option value="Kristen">
|
|
Kristen
|
|
</option>
|
|
|
|
<option value="Katolik">
|
|
Katolik
|
|
</option>
|
|
|
|
<option value="Hindu">
|
|
Hindu
|
|
</option>
|
|
|
|
<option value="Buddha">
|
|
Buddha
|
|
</option>
|
|
|
|
<option value="Konghucu">
|
|
Konghucu
|
|
</option>
|
|
|
|
</select>
|
|
|
|
</div>
|
|
|
|
<div class="col-md-3 mb-3">
|
|
|
|
<label>Gender</label>
|
|
|
|
<select id="gender"
|
|
class="form-control">
|
|
|
|
<option value="">
|
|
-- Pilih --
|
|
</option>
|
|
|
|
<option value="male">
|
|
Male
|
|
</option>
|
|
|
|
<option value="female">
|
|
Female
|
|
</option>
|
|
|
|
</select>
|
|
|
|
</div>
|
|
|
|
<div class="col-md-5 mb-3">
|
|
|
|
<label>Tempat Lahir</label>
|
|
|
|
<input type="text"
|
|
id="birth_place"
|
|
class="form-control">
|
|
|
|
</div>
|
|
|
|
<div class="col-md-4 mb-3">
|
|
|
|
<label>Tanggal Lahir</label>
|
|
|
|
<input type="date"
|
|
id="birth_date"
|
|
class="form-control">
|
|
|
|
</div>
|
|
|
|
<div class="col-md-3 mb-3">
|
|
|
|
<label>Status Pernikahan</label>
|
|
|
|
<select id="marital_status"
|
|
class="form-control">
|
|
|
|
<option value="single">
|
|
Single
|
|
</option>
|
|
|
|
<option value="married">
|
|
Married
|
|
</option>
|
|
|
|
<option value="divorced">
|
|
Divorced
|
|
</option>
|
|
|
|
</select>
|
|
|
|
</div>
|
|
|
|
<div class="col-md-6 mb-3">
|
|
|
|
<label>Phone</label>
|
|
|
|
<input type="text"
|
|
id="phone"
|
|
class="form-control">
|
|
|
|
</div>
|
|
|
|
<div class="col-md-6 mb-3">
|
|
|
|
<label>Email</label>
|
|
|
|
<input type="email"
|
|
id="email"
|
|
class="form-control">
|
|
|
|
</div>
|
|
|
|
<div class="col-md-12 mb-3">
|
|
|
|
<label>Alamat</label>
|
|
|
|
<textarea id="address"
|
|
class="form-control"></textarea>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- JOB -->
|
|
<div class="col-md-3 mb-3">
|
|
|
|
<label>Department</label>
|
|
|
|
<select id="department_id"
|
|
class="form-control">
|
|
|
|
<option value="">
|
|
-- Pilih Department --
|
|
</option>
|
|
|
|
<?php foreach($departments as $d): ?>
|
|
|
|
<option value="<?= $d->id ?>">
|
|
<?= $d->department_name ?>
|
|
</option>
|
|
|
|
<?php endforeach; ?>
|
|
|
|
</select>
|
|
|
|
</div>
|
|
|
|
<div class="col-md-3 mb-3">
|
|
|
|
<label>Position</label>
|
|
|
|
<select id="position_id"
|
|
class="form-control">
|
|
|
|
<option value="">
|
|
-- Pilih Position --
|
|
</option>
|
|
|
|
<?php foreach($positions as $p): ?>
|
|
|
|
<option value="<?= $p->id ?>">
|
|
<?= $p->position_name ?>
|
|
</option>
|
|
|
|
<?php endforeach; ?>
|
|
|
|
</select>
|
|
|
|
</div>
|
|
|
|
<div class="col-md-3 mb-3">
|
|
|
|
<label>Branch</label>
|
|
|
|
<select id="branch_id"
|
|
class="form-control">
|
|
|
|
<option value="">
|
|
-- Pilih Branch --
|
|
</option>
|
|
|
|
<?php foreach($branches as $b): ?>
|
|
|
|
<option value="<?= $b->id ?>">
|
|
<?= $b->branch_name ?>
|
|
</option>
|
|
|
|
<?php endforeach; ?>
|
|
|
|
</select>
|
|
|
|
</div>
|
|
|
|
<div class="col-md-3 mb-3">
|
|
|
|
<label>Status Karyawan</label>
|
|
|
|
<select id="employment_status"
|
|
class="form-control">
|
|
|
|
<option value="permanent">
|
|
Permanent
|
|
</option>
|
|
|
|
<option value="contract">
|
|
Contract
|
|
</option>
|
|
|
|
<option value="intern">
|
|
Intern
|
|
</option>
|
|
|
|
<option value="freelance">
|
|
Freelance
|
|
</option>
|
|
|
|
</select>
|
|
|
|
</div>
|
|
|
|
<div class="col-md-4 mb-3">
|
|
|
|
<label>Tanggal Masuk</label>
|
|
|
|
<input type="date"
|
|
id="join_date"
|
|
class="form-control">
|
|
|
|
</div>
|
|
|
|
<div class="col-md-4 mb-3">
|
|
|
|
<label>Status Active</label>
|
|
|
|
<select id="is_active"
|
|
class="form-control">
|
|
|
|
<option value="1">
|
|
Active
|
|
</option>
|
|
|
|
<option value="0">
|
|
Non Active
|
|
</option>
|
|
|
|
</select>
|
|
|
|
</div>
|
|
|
|
<div class="col-md-4 mb-3">
|
|
|
|
<label>Basic Salary</label>
|
|
|
|
<input type="number"
|
|
id="basic_salary"
|
|
class="form-control">
|
|
|
|
</div>
|
|
|
|
<div class="col-md-4 mb-3">
|
|
|
|
<label>Bank Name</label>
|
|
|
|
<input type="text"
|
|
id="bank_name"
|
|
class="form-control">
|
|
|
|
</div>
|
|
|
|
<div class="col-md-4 mb-3">
|
|
|
|
<label>Bank Account Number</label>
|
|
|
|
<input type="text"
|
|
id="bank_account_number"
|
|
class="form-control">
|
|
|
|
</div>
|
|
|
|
<div class="col-md-4 mb-3">
|
|
|
|
<label>Bank Account Name</label>
|
|
|
|
<input type="text"
|
|
id="bank_account_name"
|
|
class="form-control">
|
|
|
|
</div>
|
|
|
|
<div class="col-md-6 mb-3">
|
|
|
|
<label>BPJS Kesehatan</label>
|
|
|
|
<input type="text"
|
|
id="bpjs_kesehatan_number"
|
|
class="form-control">
|
|
|
|
</div>
|
|
|
|
<div class="col-md-6 mb-3">
|
|
|
|
<label>BPJS Ketenagakerjaan</label>
|
|
|
|
<input type="text"
|
|
id="bpjs_ketenagakerjaan_number"
|
|
class="form-control">
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="modal-footer">
|
|
|
|
<button class="btn btn-secondary"
|
|
data-bs-dismiss="modal">
|
|
|
|
Batal
|
|
|
|
</button>
|
|
|
|
<button class="btn btn-warning"
|
|
id="btnSimpan">
|
|
|
|
Simpan
|
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- MODAL DETAIL -->
|
|
<div class="modal fade" id="modalDetail">
|
|
|
|
<div class="modal-dialog modal-xl modal-dialog-scrollable modal-dialog-centered">
|
|
|
|
<div class="modal-content border-0 shadow-lg rounded-4">
|
|
|
|
<div class="modal-header bg-secondary text-white">
|
|
|
|
<h5 class="modal-title">
|
|
Detail Karyawan
|
|
</h5>
|
|
|
|
<button class="btn-close btn-close-white"
|
|
data-bs-dismiss="modal"></button>
|
|
|
|
</div>
|
|
|
|
<div class="modal-body"
|
|
id="detailBody">
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<style>
|
|
.preview-photo{
|
|
width:140px;
|
|
height:140px;
|
|
object-fit:cover;
|
|
border-radius:50%;
|
|
border:5px solid #f1f1f1;
|
|
}
|
|
|
|
.upload-box{
|
|
border:2px dashed #d9d9d9;
|
|
border-radius:20px;
|
|
background:#fafafa;
|
|
}
|
|
|
|
.table-photo{
|
|
width:50px;
|
|
height:50px;
|
|
border-radius:50%;
|
|
object-fit:cover;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
|
|
const base_url = "<?= base_url(); ?>";
|
|
|
|
$(function(){
|
|
|
|
let action = 'add';
|
|
|
|
// =========================================
|
|
// DATATABLE
|
|
// =========================================
|
|
let table = $('#tableEmployees').DataTable({
|
|
processing:true,
|
|
responsive:true,
|
|
autoWidth:false,
|
|
ajax:{
|
|
url: base_url + 'employees/getAll',
|
|
dataSrc:'data'
|
|
},
|
|
columns:[
|
|
|
|
{
|
|
data:null,
|
|
render:(d,t,r,m)=>m.row+1
|
|
},
|
|
|
|
{
|
|
data:'photo',
|
|
render:function(data){
|
|
|
|
let photo = data
|
|
? base_url + data
|
|
: 'https://cdn-icons-png.flaticon.com/512/149/149071.png';
|
|
|
|
return `
|
|
<img src="${photo}"
|
|
class="table-photo">
|
|
`;
|
|
}
|
|
},
|
|
|
|
{data:'employee_code'},
|
|
{data:'fingerprint_user_id'},
|
|
{data:'full_name'},
|
|
|
|
{
|
|
data:'department_name',
|
|
defaultContent:'-'
|
|
},
|
|
|
|
{
|
|
data:'position_name',
|
|
defaultContent:'-'
|
|
},
|
|
|
|
{
|
|
data:'branch_name',
|
|
defaultContent:'-'
|
|
},
|
|
|
|
{data:'phone'},
|
|
{data:'employment_status'},
|
|
|
|
{
|
|
data:'is_active',
|
|
render:function(data){
|
|
|
|
return data == 1
|
|
? '<span class="badge bg-success">Active</span>'
|
|
: '<span class="badge bg-danger">Non Active</span>';
|
|
}
|
|
},
|
|
|
|
{
|
|
data:null,
|
|
render:function(data){
|
|
|
|
return `
|
|
<button class="btn btn-info btn-sm btn-detail"
|
|
data-id="${data.id}">
|
|
Detail
|
|
</button>
|
|
|
|
<button class="btn btn-warning btn-sm btn-edit"
|
|
data-id="${data.id}">
|
|
Edit
|
|
</button>
|
|
|
|
<button class="btn btn-danger btn-sm btn-delete"
|
|
data-id="${data.id}">
|
|
Delete
|
|
</button>
|
|
`;
|
|
}
|
|
}
|
|
|
|
]
|
|
});
|
|
|
|
// =========================================
|
|
// RESET
|
|
// =========================================
|
|
function resetForm(){
|
|
|
|
$('#id').val('');
|
|
|
|
$('#modalEmployee input').val('');
|
|
$('#modalEmployee textarea').val('');
|
|
|
|
$('#department_id').val('');
|
|
$('#position_id').val('');
|
|
$('#branch_id').val('');
|
|
|
|
$('#gender').val('');
|
|
$('#employment_status').val('permanent');
|
|
$('#marital_status').val('single');
|
|
$('#is_active').val('1');
|
|
|
|
$('#photoPreview').attr(
|
|
'src',
|
|
'https://cdn-icons-png.flaticon.com/512/149/149071.png'
|
|
);
|
|
|
|
$('#photo_file').val('');
|
|
}
|
|
|
|
// =========================================
|
|
// FOTO
|
|
// =========================================
|
|
$('#btnChoosePhoto').click(function(){
|
|
$('#photo_file').click();
|
|
});
|
|
|
|
$('#photo_file').change(function(){
|
|
|
|
let file = this.files[0];
|
|
|
|
if(file){
|
|
|
|
let reader = new FileReader();
|
|
|
|
reader.onload = function(e){
|
|
|
|
$('#photoPreview').attr(
|
|
'src',
|
|
e.target.result
|
|
);
|
|
}
|
|
|
|
reader.readAsDataURL(file);
|
|
}
|
|
|
|
});
|
|
|
|
// =========================================
|
|
// ADD
|
|
// =========================================
|
|
$('.btn-add').click(function(){
|
|
|
|
resetForm();
|
|
|
|
action = 'add';
|
|
|
|
$('#modalEmployee').modal('show');
|
|
|
|
});
|
|
|
|
// =========================================
|
|
// EDIT
|
|
// =========================================
|
|
$(document).on('click','.btn-edit',function(){
|
|
|
|
let id = $(this).data('id');
|
|
|
|
$.get(
|
|
base_url + 'employees/detail/' + id,
|
|
function(res){
|
|
|
|
if(!res.status){
|
|
|
|
Swal.fire(
|
|
'Error',
|
|
res.message,
|
|
'error'
|
|
);
|
|
|
|
return;
|
|
}
|
|
|
|
let d = res.data;
|
|
|
|
$('#id').val(d.id);
|
|
|
|
$('#nik').val(d.nik);
|
|
$('#full_name').val(d.full_name);
|
|
|
|
$('#gender').val(d.gender);
|
|
|
|
$('#birth_place').val(d.birth_place);
|
|
$('#birth_date').val(d.birth_date);
|
|
|
|
$('#phone').val(d.phone);
|
|
$('#email').val(d.email);
|
|
|
|
$('#address').val(d.address);
|
|
|
|
$('#join_date').val(d.join_date);
|
|
$('#resign_date').val(d.resign_date);
|
|
|
|
$('#employment_status').val(d.employment_status);
|
|
$('#marital_status').val(d.marital_status);
|
|
|
|
$('#religion').val(d.religion);
|
|
|
|
$('#department_id').val(d.department_id);
|
|
$('#position_id').val(d.position_id);
|
|
$('#branch_id').val(d.branch_id);
|
|
|
|
$('#basic_salary').val(d.basic_salary);
|
|
|
|
$('#bank_name').val(d.bank_name);
|
|
$('#bank_account_number').val(d.bank_account_number);
|
|
$('#bank_account_name').val(d.bank_account_name);
|
|
|
|
$('#bpjs_kesehatan_number').val(d.bpjs_kesehatan_number);
|
|
$('#bpjs_ketenagakerjaan_number').val(d.bpjs_ketenagakerjaan_number);
|
|
|
|
$('#fingerprint_user_id').val(d.fingerprint_user_id);
|
|
|
|
$('#is_active').val(d.is_active);
|
|
|
|
if(d.photo){
|
|
|
|
$('#photoPreview').attr(
|
|
'src',
|
|
base_url + d.photo
|
|
);
|
|
}
|
|
|
|
action = 'edit';
|
|
|
|
$('#modalEmployee').modal('show');
|
|
|
|
},
|
|
'json'
|
|
);
|
|
|
|
});
|
|
|
|
// =========================================
|
|
// SAVE
|
|
// =========================================
|
|
$('#btnSimpan').click(function(){
|
|
|
|
let formData = new FormData();
|
|
|
|
formData.append('nik', $('#nik').val());
|
|
formData.append('full_name', $('#full_name').val());
|
|
|
|
formData.append('gender', $('#gender').val());
|
|
|
|
formData.append('birth_place', $('#birth_place').val());
|
|
formData.append('birth_date', $('#birth_date').val());
|
|
|
|
formData.append('phone', $('#phone').val());
|
|
formData.append('email', $('#email').val());
|
|
|
|
formData.append('address', $('#address').val());
|
|
|
|
formData.append('join_date', $('#join_date').val());
|
|
formData.append('resign_date', $('#resign_date').val());
|
|
|
|
formData.append('employment_status', $('#employment_status').val());
|
|
formData.append('marital_status', $('#marital_status').val());
|
|
|
|
formData.append('religion', $('#religion').val());
|
|
|
|
formData.append('department_id', $('#department_id').val());
|
|
formData.append('position_id', $('#position_id').val());
|
|
formData.append('branch_id', $('#branch_id').val());
|
|
|
|
formData.append('basic_salary', $('#basic_salary').val());
|
|
|
|
formData.append('bank_name', $('#bank_name').val());
|
|
formData.append('bank_account_number', $('#bank_account_number').val());
|
|
formData.append('bank_account_name', $('#bank_account_name').val());
|
|
|
|
formData.append('bpjs_kesehatan_number', $('#bpjs_kesehatan_number').val());
|
|
formData.append('bpjs_ketenagakerjaan_number', $('#bpjs_ketenagakerjaan_number').val());
|
|
|
|
formData.append('fingerprint_user_id', $('#fingerprint_user_id').val());
|
|
|
|
formData.append('is_active', $('#is_active').val());
|
|
|
|
let photo = $('#photo_file')[0].files[0];
|
|
|
|
if(photo){
|
|
formData.append('photo_file', photo);
|
|
}
|
|
|
|
if(
|
|
!$('#full_name').val() ||
|
|
!$('#join_date').val()
|
|
){
|
|
|
|
Swal.fire(
|
|
'Warning',
|
|
'Nama dan tanggal masuk wajib diisi',
|
|
'warning'
|
|
);
|
|
|
|
return;
|
|
}
|
|
|
|
let url = action === 'add'
|
|
? base_url + 'employees/store'
|
|
: base_url + 'employees/update/' + $('#id').val();
|
|
|
|
$.ajax({
|
|
|
|
url:url,
|
|
type:'POST',
|
|
data:formData,
|
|
processData:false,
|
|
contentType:false,
|
|
dataType:'json',
|
|
|
|
success:function(res){
|
|
|
|
if(res.status){
|
|
|
|
$('#modalEmployee').modal('hide');
|
|
|
|
table.ajax.reload(null,false);
|
|
|
|
Swal.fire(
|
|
'Sukses',
|
|
res.message,
|
|
'success'
|
|
);
|
|
|
|
} else {
|
|
|
|
Swal.fire(
|
|
'Error',
|
|
res.message,
|
|
'error'
|
|
);
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
// =========================================
|
|
// DETAIL
|
|
// =========================================
|
|
$(document).on('click','.btn-detail',function(){
|
|
|
|
let id = $(this).data('id');
|
|
|
|
$.get(
|
|
base_url + 'employees/detail/' + id,
|
|
function(res){
|
|
|
|
if(!res.status){
|
|
|
|
Swal.fire(
|
|
'Error',
|
|
res.message,
|
|
'error'
|
|
);
|
|
|
|
return;
|
|
}
|
|
|
|
let d = res.data;
|
|
|
|
let photo = d.photo
|
|
? base_url + d.photo
|
|
: 'https://cdn-icons-png.flaticon.com/512/149/149071.png';
|
|
|
|
$('#detailBody').html(`
|
|
|
|
<div class="row">
|
|
|
|
<div class="col-md-4 mb-4">
|
|
|
|
<div class="upload-box p-4 h-100 d-flex flex-column">
|
|
|
|
<div class="text-center">
|
|
|
|
<img src="${photo}"
|
|
class="preview-photo mb-3">
|
|
|
|
<h4 class="fw-bold mb-1">
|
|
${d.full_name || '-'}
|
|
</h4>
|
|
|
|
<div class="text-muted mb-3">
|
|
${d.employee_code || '-'}
|
|
</div>
|
|
|
|
<span class="badge ${d.is_active == 1 ? 'bg-success' : 'bg-danger'} px-3 py-2">
|
|
${d.is_active == 1 ? 'Active' : 'Non Active'}
|
|
</span>
|
|
|
|
</div>
|
|
|
|
<div class="mt-4">
|
|
|
|
<div class="border rounded-4 p-3 bg-white mb-3">
|
|
|
|
<small class="text-muted d-block">
|
|
Department
|
|
</small>
|
|
|
|
<div class="fw-semibold">
|
|
${d.department_name || '-'}
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="border rounded-4 p-3 bg-white mb-3">
|
|
|
|
<small class="text-muted d-block">
|
|
Position
|
|
</small>
|
|
|
|
<div class="fw-semibold">
|
|
${d.position_name || '-'}
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="border rounded-4 p-3 bg-white mb-3">
|
|
|
|
<small class="text-muted d-block">
|
|
Branch
|
|
</small>
|
|
|
|
<div class="fw-semibold">
|
|
${d.branch_name || '-'}
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="border rounded-4 p-3 bg-white mb-3">
|
|
|
|
<small class="text-muted d-block">
|
|
Phone
|
|
</small>
|
|
|
|
<div class="fw-semibold">
|
|
${d.phone || '-'}
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="border rounded-4 p-3 bg-white">
|
|
|
|
<small class="text-muted d-block">
|
|
Email
|
|
</small>
|
|
|
|
<div class="fw-semibold text-break">
|
|
${d.email || '-'}
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="col-md-8">
|
|
|
|
<div class="row">
|
|
|
|
<div class="col-12 mb-3">
|
|
|
|
<h5 class="fw-bold border-bottom pb-2">
|
|
Data Pribadi
|
|
</h5>
|
|
|
|
</div>
|
|
|
|
<div class="col-md-6 mb-3">
|
|
|
|
<label class="text-muted small">
|
|
NIK
|
|
</label>
|
|
|
|
<div class="fw-semibold">
|
|
${d.nik || '-'}
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="col-md-6 mb-3">
|
|
|
|
<label class="text-muted small">
|
|
Fingerprint User ID
|
|
</label>
|
|
|
|
<div class="fw-semibold">
|
|
${d.fingerprint_user_id || '-'}
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="col-md-6 mb-3">
|
|
|
|
<label class="text-muted small">
|
|
Gender
|
|
</label>
|
|
|
|
<div class="fw-semibold">
|
|
${d.gender || '-'}
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="col-md-6 mb-3">
|
|
|
|
<label class="text-muted small">
|
|
Agama
|
|
</label>
|
|
|
|
<div class="fw-semibold">
|
|
${d.religion || '-'}
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="col-md-6 mb-3">
|
|
|
|
<label class="text-muted small">
|
|
Status Pernikahan
|
|
</label>
|
|
|
|
<div class="fw-semibold">
|
|
${d.marital_status || '-'}
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="col-md-6 mb-3">
|
|
|
|
<label class="text-muted small">
|
|
Tempat Lahir
|
|
</label>
|
|
|
|
<div class="fw-semibold">
|
|
${d.birth_place || '-'}
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="col-md-6 mb-3">
|
|
|
|
<label class="text-muted small">
|
|
Tanggal Lahir
|
|
</label>
|
|
|
|
<div class="fw-semibold">
|
|
${d.birth_date || '-'}
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="col-12 mt-3 mb-3">
|
|
|
|
<h5 class="fw-bold border-bottom pb-2">
|
|
Kontak
|
|
</h5>
|
|
|
|
</div>
|
|
|
|
<div class="col-md-6 mb-3">
|
|
|
|
<label class="text-muted small">
|
|
Phone
|
|
</label>
|
|
|
|
<div class="fw-semibold">
|
|
${d.phone || '-'}
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="col-md-6 mb-3">
|
|
|
|
<label class="text-muted small">
|
|
Email
|
|
</label>
|
|
|
|
<div class="fw-semibold">
|
|
${d.email || '-'}
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="col-md-12 mb-3">
|
|
|
|
<label class="text-muted small">
|
|
Alamat
|
|
</label>
|
|
|
|
<div class="fw-semibold">
|
|
${d.address || '-'}
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="col-12 mt-3 mb-3">
|
|
|
|
<h5 class="fw-bold border-bottom pb-2">
|
|
Data Pekerjaan
|
|
</h5>
|
|
|
|
</div>
|
|
|
|
<div class="col-md-4 mb-3">
|
|
|
|
<label class="text-muted small">
|
|
Department
|
|
</label>
|
|
|
|
<div class="fw-semibold">
|
|
${d.department_name || '-'}
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="col-md-4 mb-3">
|
|
|
|
<label class="text-muted small">
|
|
Position
|
|
</label>
|
|
|
|
<div class="fw-semibold">
|
|
${d.position_name || '-'}
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="col-md-4 mb-3">
|
|
|
|
<label class="text-muted small">
|
|
Branch
|
|
</label>
|
|
|
|
<div class="fw-semibold">
|
|
${d.branch_name || '-'}
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="col-md-6 mb-3">
|
|
|
|
<label class="text-muted small">
|
|
Status Karyawan
|
|
</label>
|
|
|
|
<div class="fw-semibold">
|
|
${d.employment_status || '-'}
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="col-md-6 mb-3">
|
|
|
|
<label class="text-muted small">
|
|
Basic Salary
|
|
</label>
|
|
|
|
<div class="fw-semibold">
|
|
Rp ${parseInt(d.basic_salary || 0).toLocaleString('id-ID')}
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="col-md-6 mb-3">
|
|
|
|
<label class="text-muted small">
|
|
Tanggal Masuk
|
|
</label>
|
|
|
|
<div class="fw-semibold">
|
|
${d.join_date || '-'}
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="col-md-6 mb-3">
|
|
|
|
<label class="text-muted small">
|
|
Tanggal Resign
|
|
</label>
|
|
|
|
<div class="fw-semibold">
|
|
${d.resign_date || '-'}
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
`);
|
|
|
|
$('#modalDetail').modal('show');
|
|
|
|
},
|
|
'json'
|
|
);
|
|
|
|
});
|
|
|
|
// =========================================
|
|
// DELETE
|
|
// =========================================
|
|
$(document).on('click','.btn-delete',function(){
|
|
|
|
let id = $(this).data('id');
|
|
|
|
Swal.fire({
|
|
|
|
title:'Hapus karyawan?',
|
|
text:'Data tidak dapat dikembalikan',
|
|
icon:'warning',
|
|
showCancelButton:true
|
|
|
|
}).then((r)=>{
|
|
|
|
if(r.isConfirmed){
|
|
|
|
$.get(
|
|
base_url + 'employees/delete/' + id,
|
|
function(res){
|
|
|
|
if(res.status){
|
|
|
|
table.ajax.reload(null,false);
|
|
|
|
Swal.fire(
|
|
'Sukses',
|
|
res.message,
|
|
'success'
|
|
);
|
|
|
|
} else {
|
|
|
|
Swal.fire(
|
|
'Error',
|
|
res.message,
|
|
'error'
|
|
);
|
|
}
|
|
|
|
},
|
|
'json'
|
|
);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
</script>
|