2024-12-16 17:01:55 +07:00
@ extends ( 'layouts.app' )
@ section ( 'title' )
2026-06-01 15:01:03 +07:00
Dashboard
2024-12-16 17:01:55 +07:00
@ endsection
@ section ( 'admin-content' )
2026-06-01 15:01:03 +07:00
< style >
/* Style Awal Anda */
#outstandingCard {
cursor : pointer ;
}
#outstandingCard.active {
box - shadow : 0 0 0 0.25 rem rgba ( 255 , 255 , 255 , 0.35 );
}
/* Style Baru: Mini Status Cards */
. status - card {
cursor : pointer ;
transition : all 0.2 s ease - in - out ;
border : 1 px solid rgba ( 0 , 0 , 0 , 0.08 );
border - radius : 6 px ;
background - color : #fff;
}
. status - card : hover { transform : translateY ( - 2 px ); box - shadow : 0 4 px 8 px rgba ( 0 , 0 , 0 , 0.1 ); }
. status - card . active - filter {
border : 2 px solid #343a40;
box - shadow : 0 2 px 10 px rgba ( 0 , 0 , 0 , 0.15 );
}
. mini - stat - box {
padding : 6 px 10 px ;
display : flex ;
align - items : center ;
justify - content : space - between ;
min - height : 45 px ;
}
. mini - stat - box h6 { margin : 0 ; font - weight : 800 ; font - size : 0.95 rem ; color : #333; }
. mini - stat - box p { margin : 0 ; font - size : 0.65 rem ; text - transform : uppercase ; color : #777; font-weight: 600; }
/* Border kiri mini untuk indikator warna */
. status - card [ data - status = " On Progress " ] { border - left : 3 px solid #ffc107; }
. status - card [ data - status = " Approved 1 " ] { border - left : 3 px solid #17a2b8; }
. status - card [ data - status = " Approved 2 " ] { border - left : 3 px solid #007bff; }
. status - card [ data - status = " Final Approved " ] { border - left : 3 px solid #28a745; }
. status - card [ data - status = " Rejected " ] { border - left : 3 px solid #dc3545; }
. status - card [ data - status = " Closed " ] { border - left : 3 px solid #6c757d; }
</ style >
@ php
$outstandingIdCollection = collect ( $outstandingIds ? ? []);
// ==========================================
// FILTER PERIODE BERJALAN KHUSUS UNTUK MINI CARDS
// (Agar Angka sinkron dengan tabel filter JS di bawah)
// ==========================================
$startDayIndex = ( int ) env ( 'STARTING_DATE' , 11 );
$closingDayIndex = ( int ) env ( 'CLOSING_DATE' , 13 );
$nowIndex = \Carbon\Carbon :: now ();
if ( $nowIndex -> day >= $startDayIndex ) {
$startPeriodIndex = \Carbon\Carbon :: create ( $nowIndex -> year , $nowIndex -> month , $startDayIndex ) -> startOfDay ();
$endPeriodIndex = \Carbon\Carbon :: create ( $nowIndex -> copy () -> addMonth () -> year , $nowIndex -> copy () -> addMonth () -> month , $closingDayIndex ) -> endOfDay ();
} else {
$startPeriodIndex = \Carbon\Carbon :: create ( $nowIndex -> copy () -> subMonth () -> year , $nowIndex -> copy () -> subMonth () -> month , $startDayIndex ) -> startOfDay ();
$endPeriodIndex = \Carbon\Carbon :: create ( $nowIndex -> year , $nowIndex -> month , $closingDayIndex ) -> endOfDay ();
}
// Penampung data pengajuan MURNI HANYA DI PERIODE BERJALAN SAAT INI
$currentPeriodForms = $forms -> filter ( function ( $form ) use ( $startPeriodIndex , $endPeriodIndex ) {
$tanggalForm = \Carbon\Carbon :: parse ( $form -> tanggal );
return $tanggalForm -> between ( $startPeriodIndex , $endPeriodIndex );
});
@ endphp
2024-12-16 17:01:55 +07:00
< section class = " content-header " >
< div class = " container-fluid " >
< div class = " row mb-2 " >
< div class = " col-sm-6 " >
< h1 > Forms Vehicle Running Cost </ h1 >
</ div >
< div class = " col-sm-6 " >
< ol class = " breadcrumb float-sm-right " >
< li class = " breadcrumb-item " >< a href = " { { route('dashboard.index') }} " > Dashboard </ a ></ li >
</ ol >
</ div >
</ div >
</ div >
</ section >
2026-06-01 15:01:03 +07:00
< section class = " content " >
< div class = " container-fluid " >
< div class = " row row-cols-1 row-cols-md-2 row-cols-xl-5 g-3 " >
< div class = " col d-flex " >
< div class = " small-box bg-info flex-fill " >
< div class = " inner " >
< h3 > Rp {{ number_format ( $forms -> sum ( 'total' ), 0 , ',' , '.' ) }} </ h3 >
< p > Total Expense </ p >
</ div >
< div class = " icon " >< i class = " fas fa-wallet " ></ i ></ div >
</ div >
</ div >
< div class = " col d-flex " >
< div class = " small-box bg-success flex-fill " >
< div class = " inner " >
< h3 > Rp {{ number_format ( $forms -> whereIn ( 'status' , [ 'Approved' , 'Closed' , 'Final Approved' ]) -> sum ( 'approved_total' ), 0 , ',' , '.' ) }} </ h3 >
< p > Approved Expenses </ p >
</ div >
< div class = " icon " >< i class = " fas fa-check-circle " ></ i ></ div >
</ div >
</ div >
< div class = " col d-flex " >
< div class = " small-box bg-warning flex-fill " >
< div class = " inner " >
< h3 class = " text-white " > Rp {{ number_format ( $forms -> where ( 'status' , 'On Progress' ) -> sum ( 'total' ), 0 , ',' , '.' ) }} </ h3 >
< p class = " text-white " > Pending Expenses </ p >
</ div >
< div class = " icon " >< i class = " fas fa-hourglass-half " ></ i ></ div >
</ div >
</ div >
< div class = " col d-flex " >
< div class = " small-box bg-danger flex-fill " id = " outstandingCard " >
< div class = " inner " >
< h3 > {{ $outstandingCount }} </ h3 >
< p > Outstanding Expenses </ p >
< p class = " mb-0 " >< small > Total Rp {{ number_format ( $outstandingTotal , 0 , ',' , '.' ) }} </ small ></ p >
< p class = " mb-0 filter-hint " >< small > Klik untuk menampilkan detail </ small ></ p >
</ div >
< div class = " icon " >< i class = " fas fa-exclamation-triangle " ></ i ></ div >
</ div >
</ div >
@ if ( $availableBudget > 0 )
< div class = " col d-flex " >
< div class = " small-box bg-purple flex-fill " >
< div class = " inner " >
< h3 class = " text-white " > Rp {{ number_format ( $availableBudget , 0 , ',' , '.' ) }} </ h3 >
< p class = " text-white " > Available Budget </ p >
</ div >
< div class = " icon " >< i class = " fas fa-money-bill " ></ i ></ div >
</ div >
</ div >
@ endif
</ div >
</ div >
</ section >
< section class = " content mt-2 " >
< div class = " container-fluid " >
< div class = " row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-xl-7 g-2 mb-3 " >
< div class = " col " >
< div class = " status-card active-filter " data - status = " all " >
< div class = " mini-stat-box " >
< div >< p > Semua </ p >< h6 > {{ $currentPeriodForms -> count () }} </ h6 ></ div >
< i class = " fas fa-list-ul text-muted " ></ i >
</ div >
</ div >
</ div >
< div class = " col " >
< div class = " status-card " data - status = " On Progress " >
< div class = " mini-stat-box " >
< div >< p > Progress </ p >< h6 > {{ $currentPeriodForms -> where ( 'status' , 'On Progress' ) -> count () }} </ h6 ></ div >
< i class = " fas fa-sync text-warning fa-xs " ></ i >
</ div >
</ div >
</ div >
< div class = " col " >
< div class = " status-card " data - status = " Approved 1 " >
< div class = " mini-stat-box " >
< div >< p > App 1 </ p >< h6 > {{ $currentPeriodForms -> where ( 'status' , 'Approved 1' ) -> count () }} </ h6 ></ div >
< i class = " fas fa-user-check text-info fa-xs " ></ i >
</ div >
</ div >
</ div >
< div class = " col " >
< div class = " status-card " data - status = " Approved 2 " >
< div class = " mini-stat-box " >
< div >< p > App 2 </ p >< h6 > {{ $currentPeriodForms -> where ( 'status' , 'Approved 2' ) -> count () }} </ h6 ></ div >
< i class = " fas fa-users text-primary fa-xs " ></ i >
</ div >
</ div >
</ div >
< div class = " col " >
< div class = " status-card " data - status = " Final Approved " >
< div class = " mini-stat-box " >
< div >< p > Final </ p >< h6 > {{ $currentPeriodForms -> where ( 'status' , 'Final Approved' ) -> count () }} </ h6 ></ div >
< i class = " fas fa-check-double text-success fa-xs " ></ i >
</ div >
</ div >
</ div >
< div class = " col " >
< div class = " status-card " data - status = " Rejected " >
< div class = " mini-stat-box " >
< div >< p > Reject </ p >< h6 > {{ $currentPeriodForms -> where ( 'status' , 'Rejected' ) -> count () }} </ h6 ></ div >
< i class = " fas fa-ban text-danger fa-xs " ></ i >
</ div >
</ div >
</ div >
< div class = " col " >
< div class = " status-card " data - status = " Closed " >
< div class = " mini-stat-box " >
< div >< p > Closed </ p >< h6 > {{ $currentPeriodForms -> where ( 'status' , 'Closed' ) -> count () }} </ h6 ></ div >
< i class = " fas fa-lock text-secondary fa-xs " ></ i >
</ div >
</ div >
</ div >
</ div >
</ div >
</ section >
2024-12-16 17:01:55 +07:00
< section class = " content " >
< div class = " container-fluid " >
< div class = " card card-primary card-outline " >
< div class = " card-body " >
2026-06-01 15:01:03 +07:00
< h4 class = " header-title float-left " > List Data Forms Vehicle Running Cost Anda </ h4 >
2024-12-16 17:01:55 +07:00
< p class = " float-right mb-2 " >
2026-06-01 15:01:03 +07:00
@ if ( auth () -> user () -> can ( 'forms.vehicle.create' ))
< a class = " btn btn-primary text-white " href = " { { route('forms.vehicle.create') }} " >
Add New Expense Vehicle Running Cost
</ a >
@ endif
2024-12-16 17:01:55 +07:00
</ p >
< div class = " clearfix " ></ div >
< div class = " dataTables_wrapper dt-bootstrap4 mt-2 " >
@ include ( 'backend.layouts.partials.messages' )
2026-06-01 15:01:03 +07:00
< div class = " table-responsive " >
< table id = " dataTable " class = " table table-bordered table-striped table-head-fixed dataTable dtr-inline " style = " width:100% " >
< thead class = " bg-light text-capitalize " >
< tr >
< th > #</th>
< th > No Expense </ th >
< th > Nama </ th >
< th > Cabang </ th >
< th > Tanggal </ th >
< th > Type </ th >
< th > Liter </ th >
< th > Keterangan </ th >
< th > Total </ th >
< th > Total Approved </ th >
< th > Km ( Odometer ) </ th >
< th > Tipe Bensin </ th >
< th > Nomor Polisi </ th >
< th > Bukti </ th >
< th > Account Number </ th >
< th > Status </ th >
@ if ( auth () -> user () -> can ( 'approval.view' )) < th > Approval 1 </ th > @ endif
@ if ( auth () -> user () -> can ( 'approval2.view' )) < th > Approval 2 </ th > @ endif
@ if ( auth () -> user () -> can ( 'final_approval.view' )) < th > Final Approval </ th > @ endif
< th > Aksi </ th >
</ tr >
</ thead >
< tbody >
@ php
use App\Helpers\NextCloudHelper ;
$role = auth () -> user () -> getRoleNames ()[ 0 ];
@ endphp
@ foreach ( $forms as $item )
< tr data - id = " { { $item->id }} " data - status = " { { $item->status }} " data - date = " { { \ Carbon \ Carbon::parse( $item->tanggal )->format('Y-m-d') }} " data - outstanding = " { { $outstandingIdCollection->contains ( $item->id ) ? '1' : '0' }} " >
< td > {{ $loop -> iteration }} </ td >
< td > {{ $item -> expense_number }} </ td >
< td > {{ $item -> user -> name }} </ td >
< td > {{ $item -> user -> cabang -> cabang -> name }} </ td >
< td > {{ \Carbon\Carbon :: parse ( $item -> tanggal ) -> locale ( 'id' ) -> isoFormat ( 'dddd, D MMMM Y HH:mm:ss' ) }} </ td >
< td >
@ if ( $item -> type == 'gasoline' )
< span class = " badge badge-info " > Gasoline </ span >
@ elseif ( $item -> type == 'parking_toll' )
< span class = " badge badge-warning text-white " > Parking / Toll </ span >
@ else
< span class = " badge badge-secondary " > Unknown </ span >
@ endif
</ td >
< td > {{ $item -> liter }} </ td >
< td > {{ $item -> keterangan }} </ td >
< td > {{ number_format ( $item -> total , 0 , ',' , '.' ) }} </ td >
< td > {{ number_format ( $item -> approved_total , 0 , ',' , '.' ) }} </ td >
< td > {{ $item -> jarak }} km </ td >
< td > {{ $item -> tipe_bensin }} </ td >
< td > {{ $item -> nopol }} </ td >
< td >
@ if ( $item -> bukti_total )
< a href = " { { NextCloudHelper::getFileUrl( $item->bukti_total ) }} " target = " _blank " > Download </ a >
@ else
-
@ endif
</ td >
< td > {{ $item -> account_number }} </ td >
< td >
@ if ( $item -> status == 'On Progress' )
< span class = " badge badge-warning text-white " > {{ $item -> status }} </ span >
@ elseif ( $item -> status == 'Approved 1' || $item -> status == 'Approved 2' || $item -> status == 'Final Approved' )
< span class = " badge badge-success text-white " > {{ $item -> status }} </ span >
@ else
< span class = " badge badge-danger text-white " > {{ $item -> status }} </ span >
@ endif
</ td >
{{ -- SELEKTIF MENYEMBUNYIKAN TOMBOL APPROVE / REJECT DIRECT DI INDEX TANPA MENGHAPUS LOGIKA KODE -- }}
@ if ( auth () -> user () -> can ( 'approval.view' ))
< td >
< div class = " d-none " >
@ if ( auth () -> user () -> can ( 'approval.approve' ) && $item -> status == 'On Progress' )
< form action = " javascript:void(0); " class = " d-inline " >
< button type = " button " class = " btn btn-success btn-sm final-approve-modal " data - id = " { { route('forms.vehicle.approve', $item->id ) }} " > Approve 1 </ button >
</ form >
< button type = " button " class = " btn btn-danger btn-sm open-reject-modal " data - action = " { { route('forms.vehicle.reject', $item->id ) }} " > Reject </ button >
@ endif
</ div >
@ if ( $item -> approved_at ) {{ \Carbon\Carbon :: parse ( $item -> approved_at ) -> locale ( 'id' ) -> isoFormat ( 'D MMMM Y HH:mm' ) }} @ endif
</ td >
@ endif
@ if ( auth () -> user () -> can ( 'approval2.view' ))
< td >
< div class = " d-none " >
@ if ( auth () -> user () -> can ( 'approval2.approve' ) && $item -> status == 'Approved 1' && $item -> approved_at )
< form action = " javascript:void(0); " class = " d-inline " >
< button type = " button " class = " btn btn-success btn-sm open-approve-modal " data - id = " { { route('forms.vehicle.approve2', $item->id ) }} " > Approve 2 </ button >
</ form >
< button type = " button " class = " btn btn-danger btn-sm open-reject-modal " data - action = " { { route('forms.vehicle.reject', $item->id ) }} " > Reject </ button >
@ endif
</ div >
@ if ( $item -> approved2_at ) {{ \Carbon\Carbon :: parse ( $item -> approved2_at ) -> locale ( 'id' ) -> isoFormat ( 'D MMMM Y HH:mm' ) }} @ endif
</ td >
@ endif
@ if ( auth () -> user () -> can ( 'final_approval.view' ))
< td >
< div class = " d-none " >
@ if ( auth () -> user () -> can ( 'final_approval.approve' ))
@ if ( $item -> status == 'Approved 2' && $item -> approved2_at && ! $item -> final_approved_at )
< form action = " javascript:void(0); " class = " d-inline " >
< button type = " button " class = " btn btn-success btn-sm open-approve-modal " data - id = " { { route('forms.vehicle.final-approve', $item->id ) }} " > Final Approve </ button >
</ form >
< button type = " button " class = " btn btn-danger btn-sm open-reject-modal " data - action = " { { route('forms.vehicle.reject', $item->id ) }} " > Reject </ button >
@ elseif ( $item -> final_approved_at && auth () -> user () -> can ( 'final_approval.open' ))
< form action = " { { route('forms.vehicle.open', $item->id ) }} " method = " POST " class = " d-inline " onsubmit = " return confirm('Are you sure you want to open this item?'); " >
@ csrf @ method ( 'PUT' )
< button type = " submit " class = " btn btn-success btn-sm " > Open </ button >
</ form >
@ endif
@ endif
</ div >
@ if ( $item -> final_approved_at ) {{ \Carbon\Carbon :: parse ( $item -> final_approved_at ) -> locale ( 'id' ) -> isoFormat ( 'D MMMM Y HH:mm' ) }} @ endif
</ td >
@ endif
< td >
@ if ( auth () -> user () -> can ( 'forms.vehicle.view' ))
< a href = " { { route('forms.vehicle.view', $item->id ) }} " class = " btn btn-primary btn-sm " >< i class = " fas fa-eye text-white " ></ i ></ a >
@ endif
@ php
$canEdit = auth () -> user () -> can ( 'forms.vehicle.edit' ) && ( ! in_array ( $role , [ 'Medical Representatif' , 'Area Manager Cabang' ]) || $item -> status == 'On Progress' );
@ endphp
@ if ( $canEdit )
< a href = " { { route('forms.vehicle.edit', $item->id ) }} " class = " btn btn-warning btn-sm " >< i class = " fas fa-edit text-white " ></ i ></ a >
@ endif
@ if (( $role != 'Medical Representatif' && auth () -> user () -> can ( 'forms.vehicle.delete' )) || ( $role == 'Medical Representatif' && $item -> status == 'On Progress' ))
< form action = " { { route('forms.vehicle.destroy', $item->id ) }} " method = " POST " class = " d-inline " onsubmit = " return confirm('Are you sure you want to delete this item?'); " >
@ csrf @ method ( 'DELETE' )
< button type = " submit " class = " btn btn-danger btn-sm " >< i class = " fas fa-trash " ></ i ></ button >
</ form >
@ endif
</ td >
</ tr >
@ endforeach
</ tbody >
</ table >
</ div >
</ div >
2024-12-16 17:01:55 +07:00
</ div >
</ div >
</ div >
</ section >
2026-06-01 15:01:03 +07:00
{{ -- MODAL CONTAINER DI BAWAH ( TETAP UTUH UNTUK KEBUTUHAN ROUTING AJAX ) -- }}
< div class = " modal fade " id = " approveModal " tabindex = " -1 " role = " dialog " aria - hidden = " true " >
< div class = " modal-dialog modal-lg " role = " document " >
< div class = " modal-content " >
< form id = " approveForm " method = " POST " action = " " >
@ csrf @ method ( 'PUT' )
< div class = " modal-header " >
< h5 class = " modal-title " id = " approveModalLabel " > Approve Item </ h5 >
< button type = " button " class = " close " data - dismiss = " modal " aria - label = " Close " >< span aria - hidden = " true " >& times ; </ span ></ button >
</ div >
< div class = " modal-body " >
< div id = " loadingSpinner " class = " d-flex justify-content-center align-items-center " style = " height: 200px; " >< div class = " spinner-border text-primary " role = " status " >< span class = " sr-only " > Loading ...</ span ></ div ></ div >
< div id = " modalContent " class = " d-none " >
< p > Please review the details below :</ p >
< ul class = " list-group " >
< li class = " list-group-item " >< strong > Expense Number :</ strong > < span id = " expense_number " ></ span ></ li >
< li class = " list-group-item " >< strong > User :</ strong > < span id = " user " ></ span ></ li >
< li class = " list-group-item " >< strong > Tipe :</ strong > < span id = " type " ></ span ></ li >
< li class = " list-group-item " >< strong > Tanggal & Waktu :</ strong > < span id = " tanggal " ></ span ></ li >
< li class = " list-group-item " >< strong > Jarak :</ strong > < span id = " jarak " ></ span > km </ li >
< li class = " list-group-item " >< strong > Total Liter Bensin :</ strong > < span id = " liter " ></ span > liter </ li >
< li class = " list-group-item " >< strong > No Polisi :</ strong > < span id = " nopol " ></ span ></ li >
< li class = " list-group-item " >< strong > Tipe Bensin :</ strong > < span id = " tipe_bensin " ></ span ></ li >
< li class = " list-group-item " >< strong > Bukti Total :</ strong > < span id = " bukti_total " ></ span ></ li >
< li class = " list-group-item " >< strong > Nominal Total :</ strong > < span id = " total_value " ></ span ></ li >
</ ul >
</ div >
</ div >
< div class = " modal-footer " >< button type = " button " class = " btn btn-secondary " data - dismiss = " modal " > Cancel </ button >< button type = " submit " class = " btn btn-primary " > Approve </ button ></ div >
</ form >
</ div >
</ div >
</ div >
< div class = " modal fade " id = " finalApproveModal " tabindex = " -1 " role = " dialog " aria - hidden = " true " >
< div class = " modal-dialog modal-lg " role = " document " >
< div class = " modal-content " >
< form id = " finalApproveForm " method = " POST " action = " " >
@ csrf @ method ( 'PUT' )
< div class = " modal-header " >
< h5 class = " modal-title " id = " finalApproveModalLabel " > Approve Item </ h5 >
< button type = " button " class = " close " data - dismiss = " modal " aria - label = " Close " >< span aria - hidden = " true " >& times ; </ span ></ button >
</ div >
< div class = " modal-body " >
< div id = " finalLoadingSpinner " class = " d-flex justify-content-center align-items-center " style = " height: 200px; " >< div class = " spinner-border text-primary " role = " status " >< span class = " sr-only " > Loading ...</ span ></ div ></ div >
< div id = " finalModalContent " class = " d-none " >
< p > Please review the details below :</ p >
< ul class = " list-group " >
< li class = " list-group-item " >< strong > Expense Number :</ strong > < span id = " final_expense_number " ></ span ></ li >
< li class = " list-group-item " >< strong > User :</ strong > < span id = " final_user " ></ span ></ li >
< li class = " list-group-item " >< strong > Tipe :</ strong > < span id = " final_type " ></ span ></ li >
< li class = " list-group-item " >< strong > Tanggal & Waktu :</ strong > < span id = " final_tanggal " ></ span ></ li >
< li class = " list-group-item " >< strong > Jarak :</ strong > < span id = " final_jarak " ></ span > km </ li >
< li class = " list-group-item " >< strong > Total Liter Bensin :</ strong > < span id = " final_liter " ></ span > liter </ li >
< li class = " list-group-item " >< strong > No Polisi :</ strong > < span id = " final_nopol " ></ span ></ li >
< li class = " list-group-item " >< strong > Tipe Bensin :</ strong > < span id = " final_tipe_bensin " ></ span ></ li >
< li class = " list-group-item " >< strong > Bukti Total :</ strong > < span id = " final_bukti_total " ></ span ></ li >
</ ul >
< p class = " mt-2 " > Please select the items you want to approve :</ p >
< ul class = " list-group list-unstyled " >
< li >
< div class = " form-group " >
< div class = " custom-control custom-checkbox " >
< input type = " checkbox " class = " custom-control-input " id = " final_total " name = " total " required >
< label class = " custom-control-label " for = " final_total " > Total ( < span id = " final_total_value " ></ span > ) </ label >
</ div >
</ div >
</ li >
< li >
< div class = " form-group " >
< label for = " total " > Total </ label >
< input type = " text " class = " form-control " id = " total " name = " total " value = " 0 " readonly >
</ div >
</ li >
</ ul >
</ div >
</ div >
< div class = " modal-footer " >< button type = " button " class = " btn btn-secondary " data - dismiss = " modal " > Cancel </ button >< button type = " submit " class = " btn btn-primary " > Approve </ button ></ div >
</ form >
</ div >
</ div >
</ div >
< div class = " modal fade " id = " rejectModal " tabindex = " -1 " role = " dialog " aria - hidden = " true " >
< div class = " modal-dialog " role = " document " >
< div class = " modal-content " >
< form id = " rejectForm " method = " POST " action = " " >
@ csrf @ method ( 'PUT' )
< div class = " modal-header " >
< h5 class = " modal-title " id = " rejectModalLabel " > Reject Expense </ h5 >
< button type = " button " class = " close " data - dismiss = " modal " aria - label = " Close " >< span aria - hidden = " true " >& times ; </ span ></ button >
</ div >
< div class = " modal-body " >
< div class = " form-group " >< label for = " rejectRemarks " > Remarks < span class = " text-danger " >*</ span ></ label >< textarea class = " form-control " name = " remarks " id = " rejectRemarks " rows = " 3 " required ></ textarea ></ div >
< p class = " mb-0 text-muted small " > Pengajuan akan ditolak setelah Anda mengirimkan catatan ini .</ p >
</ div >
< div class = " modal-footer " >< button type = " button " class = " btn btn-secondary " data - dismiss = " modal " > Cancel </ button >< button type = " submit " class = " btn btn-danger " > Reject </ button ></ div >
</ form >
</ div >
</ div >
</ div >
2024-12-16 17:01:55 +07:00
@ endsection
2024-12-24 11:40:49 +07:00
@ section ( 'scripts' )
2026-06-01 15:01:03 +07:00
< script >
$ ( document ) . ready ( function () {
// Uncheck all checkboxes on page refresh
$ ( '.custom-control-input' ) . prop ( 'checked' , false );
if ( $ ( '#dataTable' ) . length ) {
let outstandingFilterActive = false ;
let statusFilterActive = 'all' ;
// Custom Search DataTables (Filter Sinkron: Status + Outstanding + Siklus Periode Berjalan 11 - 13)
$ . fn . dataTable . ext . search . push ( function ( settings , data , dataIndex ) {
const row = $ ( settings . aoData [ dataIndex ] . nTr );
const rowStatus = row . attr ( 'data-status' );
const isOutstanding = row . attr ( 'data-outstanding' ) === '1' || row . attr ( 'data-outstanding' ) === 1 ;
const rowDateStr = row . attr ( 'data-date' ); // Format: YYYY-MM-DD
// 1. Prioritas Pertama: Outstanding Filter Murni
if ( outstandingFilterActive ) {
return isOutstanding ;
}
// 2. Prioritas Kedua: Aturan Jendela Waktu (Cut-off) Berlaku MUTLAK Untuk Semua Mini Card
if ( rowDateStr ) {
const dateParts = rowDateStr . split ( '-' );
const rowDate = new Date ( dateParts [ 0 ], dateParts [ 1 ] - 1 , dateParts [ 2 ], 12 , 0 , 0 );
const now = new Date ();
let startPeriod , endPeriod ;
const startDay = 11 ;
const closingDay = 13 ;
if ( now . getDate () >= startDay ) {
startPeriod = new Date ( now . getFullYear (), now . getMonth (), startDay , 0 , 0 , 0 );
endPeriod = new Date ( now . getFullYear (), now . getMonth () + 1 , closingDay , 23 , 59 , 59 );
} else {
startPeriod = new Date ( now . getFullYear (), now . getMonth () - 1 , startDay , 0 , 0 , 0 );
endPeriod = new Date ( now . getFullYear (), now . getMonth (), closingDay , 23 , 59 , 59 );
}
// TENGGELAMKAN ROW jika tidak berada di dalam siklus berjalan
if ( rowDate < startPeriod || rowDate > endPeriod ) {
return false ;
}
}
// 3. Prioritas Ketiga: Filter Status Setelah Melewati Karantina Tanggal
if ( statusFilterActive !== 'all' && rowStatus !== statusFilterActive ) {
return false ;
}
return true ;
});
const table = $ ( '#dataTable' ) . DataTable ({
responsive : false ,
dom : 'Blfrtip' ,
lengthMenu : [ [ 10 , 50 , 100 , - 1 ], [ 10 , 50 , 100 , " All " ] ],
buttons : [
{ extend : 'excel' , text : 'Excel' },
{ extend : 'pdf' , text : 'PDF' , orientation : 'landscape' , pageSize : 'A4' , exportOptions : { columns : ':visible' } },
{ extend : 'print' , text : 'Print' , orientation : 'landscape' , exportOptions : { columns : ':visible' } },
'colvis'
]
});
// Klik Status Card
$ ( '.status-card' ) . on ( 'click' , function () {
outstandingFilterActive = false ;
$ ( '#outstandingCard' ) . removeClass ( 'active' );
$ ( '#outstandingCard' ) . find ( '.filter-hint small' ) . text ( 'Klik untuk detail' );
$ ( '.status-card' ) . removeClass ( 'active-filter' );
$ ( this ) . addClass ( 'active-filter' );
statusFilterActive = $ ( this ) . data ( 'status' );
table . draw ();
});
// Klik Outstanding Card
const $outstandingCard = $ ( '#outstandingCard' );
$outstandingCard . on ( 'click' , function () {
outstandingFilterActive = ! outstandingFilterActive ;
$ ( this ) . toggleClass ( 'active' , outstandingFilterActive );
if ( outstandingFilterActive ) {
$ ( '.status-card' ) . removeClass ( 'active-filter' );
$ ( '.status-card[data-status="all"]' ) . addClass ( 'active-filter' );
statusFilterActive = 'all' ;
}
table . draw ();
$ ( this ) . find ( '.filter-hint small' ) . text ( outstandingFilterActive ? 'Klik untuk menampilkan semua data' : 'Klik untuk menampilkan detail' );
});
}
// Handle Reject Button Click
$ ( document ) . on ( 'click' , '.open-reject-modal' , function () {
$ ( '#rejectForm' ) . attr ( 'action' , $ ( this ) . data ( 'action' ));
$ ( '#rejectRemarks' ) . val ( '' );
$ ( '#rejectModal' ) . modal ( 'show' );
});
$ ( '#rejectModal' ) . on ( 'shown.bs.modal' , function () { $ ( '#rejectRemarks' ) . trigger ( 'focus' ); });
$ ( '#rejectModal' ) . on ( 'hidden.bs.modal' , function () { $ ( '#rejectForm' ) . attr ( 'action' , '' ); $ ( '#rejectRemarks' ) . val ( '' ); });
// Handle Approve Button Click
$ ( document ) . on ( 'click' , '.open-approve-modal' , function () {
const approveUrl = $ ( this ) . data ( 'id' );
$ ( '#loadingSpinner' ) . show (); $ ( '#modalContent' ) . addClass ( 'd-none' );
$ ( '#approveForm' ) . attr ( 'action' , approveUrl ); $ ( '#approveModal' ) . modal ( 'show' );
$ . get ( approveUrl . replace ( / approve2 | final - approve / g , 'detail' ), function ( data ) {
const formatter = new Intl . NumberFormat ( 'id-ID' , { style : 'currency' , currency : 'IDR' , minimumFractionDigits : 0 });
$ ( '#total_value' ) . text ( formatter . format ( data . total ));
$ ( '#user' ) . text ( data . user . name ); $ ( '#expense_number' ) . text ( data . expense_number );
$ ( '#tanggal' ) . text ( new Date ( data . created_at ) . toLocaleDateString ( 'id-ID' , { year : 'numeric' , month : 'long' , day : 'numeric' }));
$ ( '#type' ) . html ( data . type . split ( '_' ) . map ( w => w . charAt ( 0 ) . toUpperCase () + w . slice ( 1 )) . join ( ' ' ));
$ ( '#jarak' ) . text ( data . jarak > 0 ? data . jarak : '-' );
$ ( '#liter' ) . text ( data . liter > 0 ? data . liter : '-' );
$ ( '#tipe_bensin' ) . text ( data . tipe_bensin ); $ ( '#nopol' ) . text ( data . nopol );
$ ( '#bukti_total' ) . html ( data . bukti_total ? '<a href="' + data . bukti_total + '" target="_blank">Download</a>' : '-' );
$ ( '#loadingSpinner' ) . hide (); $ ( '#modalContent' ) . removeClass ( 'd-none' );
$ ( '#total' ) . val ( 0 );
});
});
// Handle Final Approve Modal
$ ( document ) . on ( 'click' , '.final-approve-modal' , function () {
const approveUrl = $ ( this ) . data ( 'id' );
$ ( '#finalLoadingSpinner' ) . show (); $ ( '#finalModalContent' ) . addClass ( 'd-none' );
$ ( '#finalApproveForm' ) . attr ( 'action' , approveUrl ); $ ( '#finalApproveModal' ) . modal ( 'show' );
$ . get ( approveUrl . replace ( 'approve' , 'detail' ), function ( data ) {
const formatter = new Intl . NumberFormat ( 'id-ID' , { style : 'currency' , currency : 'IDR' , minimumFractionDigits : 0 });
$ ( '#final_total_value' ) . text ( formatter . format ( data . total ));
$ ( '#final_total' ) . data ( 'value' , data . total );
$ ( '#final_user' ) . text ( data . user . name ); $ ( '#final_expense_number' ) . text ( data . expense_number );
$ ( '#final_tanggal' ) . text ( new Date ( data . created_at ) . toLocaleDateString ( 'id-ID' , { year : 'numeric' , month : 'long' , day : 'numeric' }));
$ ( '#final_type' ) . html ( data . type . split ( '_' ) . map ( w => w . charAt ( 0 ) . toUpperCase () + w . slice ( 1 )) . join ( ' ' ));
$ ( '#final_jarak' ) . text ( data . jarak > 0 ? data . jarak : '-' );
$ ( '#final_liter' ) . text ( data . liter > 0 ? data . liter : '-' );
$ ( '#final_tipe_bensin' ) . text ( data . tipe_bensin ); $ ( '#final_nopol' ) . text ( data . nopol );
$ ( '#final_bukti_total' ) . html ( data . bukti_total ? '<a href="' + data . bukti_total + '" target="_blank">Download</a>' : '-' );
$ ( '#finalLoadingSpinner' ) . hide (); $ ( '#finalModalContent' ) . removeClass ( 'd-none' );
$ ( '#total' ) . val ( 0 );
});
});
// Update total dynamically
$ ( '.custom-control-input' ) . on ( 'change' , function () {
let total = 0 ;
$ ( '.custom-control-input:checked' ) . each ( function () { total += parseFloat ( $ ( this ) . data ( 'value' ) || 0 ); });
const formatter = new Intl . NumberFormat ( 'id-ID' , { style : 'currency' , currency : 'IDR' , minimumFractionDigits : 0 });
$ ( '#total' ) . val ( formatter . format ( total ));
});
$ ( '#finalApproveModal' ) . on ( 'hidden.bs.modal' , function () {
$ ( '.custom-control-input' ) . prop ( 'checked' , false ); $ ( '#total' ) . val ( '0' );
});
});
</ script >
@ endsection
