root
652 lines
40 KiB
PHP
652 lines
40 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title')
|
|
Dashboard
|
|
@endsection
|
|
|
|
@section('admin-content')
|
|
<style>
|
|
/* Style Awal Anda */
|
|
#outstandingCard {
|
|
cursor: pointer;
|
|
}
|
|
#outstandingCard.active {
|
|
box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.35);
|
|
}
|
|
|
|
/* Style Baru: Mini Status Cards */
|
|
.status-card {
|
|
cursor: pointer;
|
|
transition: all 0.2s ease-in-out;
|
|
border: 1px solid rgba(0,0,0,0.08);
|
|
border-radius: 6px;
|
|
background-color: #fff;
|
|
}
|
|
.status-card:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
|
|
.status-card.active-filter {
|
|
border: 2px solid #343a40;
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.15);
|
|
}
|
|
.mini-stat-box {
|
|
padding: 6px 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
min-height: 45px;
|
|
}
|
|
.mini-stat-box h6 { margin: 0; font-weight: 800; font-size: 0.95rem; color: #333; }
|
|
.mini-stat-box p { margin: 0; font-size: 0.65rem; text-transform: uppercase; color: #777; font-weight: 600; }
|
|
|
|
/* Border kiri mini untuk indikator warna */
|
|
.status-card[data-status="On Progress"] { border-left: 3px solid #ffc107; }
|
|
.status-card[data-status="Approved 1"] { border-left: 3px solid #17a2b8; }
|
|
.status-card[data-status="Approved 2"] { border-left: 3px solid #007bff; }
|
|
.status-card[data-status="Final Approved"] { border-left: 3px solid #28a745; }
|
|
.status-card[data-status="Rejected"] { border-left: 3px solid #dc3545; }
|
|
.status-card[data-status="Closed"] { border-left: 3px solid #6c757d; }
|
|
</style>
|
|
|
|
@php
|
|
$outstandingIdCollection = collect($outstandingIds ?? []);
|
|
|
|
// ==========================================
|
|
// FILTER PERIODE BERJALAN KHUSUS UNTUK MINI CARDS
|
|
// (Agar Angka 30 berubah jadi 2 secara riil)
|
|
// ==========================================
|
|
$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();
|
|
}
|
|
|
|
// Variabel baru 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
|
|
|
|
<section class="content-header">
|
|
<div class="container-fluid">
|
|
<div class="row mb-2">
|
|
<div class="col-sm-6">
|
|
<h1>Forms Up Country</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>
|
|
|
|
<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">
|
|
{{-- Inject variable $currentPeriodForms ke semua card agar sinkron --}}
|
|
<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>
|
|
|
|
<section class="content">
|
|
<div class="container-fluid">
|
|
<div class="card card-primary card-outline">
|
|
<div class="card-body">
|
|
<h4 class="header-title float-left">List Data Forms Up Country Anda</h4>
|
|
<p class="float-right mb-2">
|
|
@if (auth()->user()->can('forms.country.create'))
|
|
<a class="btn btn-primary text-white" href="{{ route('forms.up-country.create') }}">
|
|
Add New Expense Up Country
|
|
</a>
|
|
@endif
|
|
</p>
|
|
<div class="clearfix"></div>
|
|
<div class="dataTables_wrapper dt-bootstrap4 mt-2">
|
|
@include('backend.layouts.partials.messages')
|
|
<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>Rayon</th>
|
|
<th>Tanggal</th>
|
|
<th>Tujuan</th>
|
|
<th>Jarak</th>
|
|
<th>Total</th>
|
|
<th>Total Approved</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>{{ $item->rayon->code }}</td>
|
|
<td>{{ \Carbon\Carbon::parse($item->tanggal)->locale('id')->isoFormat('D MMMM Y') }}</td>
|
|
<td>{{ $item->tujuan }}</td>
|
|
<td>{{ $item->jarak }} km</td>
|
|
<td>{{ number_format($item->total, 0, ',', '.') }}</td>
|
|
<td>{{ $item->approved_total ? number_format($item->approved_total, 0, ',', '.') : '-' }}</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>
|
|
|
|
@if (auth()->user()->can('approval.view'))
|
|
<td>
|
|
<div class="d-none">
|
|
@if (auth()->user()->can('approval.approve') && $item->status == 'On Progress')
|
|
<button type="button" class="btn btn-success btn-sm final-approve-modal" data-id="{{ route('forms.up-country.approve', $item->id) }}">Approve 1</button>
|
|
<button type="button" class="btn btn-danger btn-sm open-reject-modal" data-action="{{ route('forms.up-country.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)
|
|
<button type="button" class="btn btn-success btn-sm open-approve-modal" data-id="{{ route('forms.up-country.approve2', $item->id) }}">Approve 2</button>
|
|
<button type="button" class="btn btn-danger btn-sm open-reject-modal" data-action="{{ route('forms.up-country.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)
|
|
<button type="button" class="btn btn-success btn-sm final-approve-modal" data-id="{{ route('forms.up-country.final-approve', $item->id) }}">Final Approve</button>
|
|
<button type="button" class="btn btn-danger btn-sm open-reject-modal" data-action="{{ route('forms.up-country.reject', $item->id) }}">Reject</button>
|
|
@elseif ($item->final_approved_at && auth()->user()->can('final_approval.open'))
|
|
<form action="{{ route('forms.up-country.open', $item->id) }}" method="POST" class="d-inline" onsubmit="return confirm('Confirm approve?');">
|
|
@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.country.view'))
|
|
<a href="{{ route('forms.up-country.view', $item->id) }}" class="btn btn-primary btn-sm" title="Periksa / Approve Via Kolom Aksi"><i class="fas fa-eye text-white"></i></a>
|
|
@endif
|
|
@php
|
|
$canEdit = auth()->user()->can('forms.country.edit') && (!in_array($role, ['Medical Representatif', 'Area Manager Cabang']) || $item->status == 'On Progress');
|
|
@endphp
|
|
@if ($canEdit)
|
|
<a href="{{ route('forms.up-country.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.country.delete')) || ($role == 'Medical Representatif' && $item->status == 'On Progress'))
|
|
<form action="{{ route('forms.up-country.destroy', $item->id) }}" method="POST" class="d-inline" onsubmit="return confirm('Delete 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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{{-- 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">Approve Item</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</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"></div></div>
|
|
<div id="modalContent" class="d-none">
|
|
<p>Review Details:</p>
|
|
<ul class="list-group">
|
|
<li class="list-group-item"><strong>Expense No:</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>Rayon:</strong> <span id="rayon"></span></li>
|
|
<li class="list-group-item"><strong>Tanggal:</strong> <span id="tanggal"></span></li>
|
|
<li class="list-group-item"><strong>Tujuan:</strong> <span id="tujuan"></span></li>
|
|
<li class="list-group-item"><strong>Jarak:</strong> <span id="jarak"></span></li>
|
|
<li class="list-group-item"><strong>Allowance:</strong> <span id="allowance_value"></span> (<span id="bukti_allowance"></span>)</li>
|
|
<li class="list-group-item"><strong>Transport Dalkot:</strong> <span id="transport_dalkot_value"></span> (<span id="bukti_transport_dalkot"></span>)</li>
|
|
<li class="list-group-item"><strong>Transport Ankot:</strong> <span id="transport_ankot_value"></span> (<span id="bukti_transport_ankot"></span>)</li>
|
|
<li class="list-group-item"><strong>Hotel:</strong> <span id="hotel_value"></span> (<span id="bukti_hotel"></span>)</li>
|
|
<li class="list-group-item"><strong>UC Plan:</strong> <span id="uc_plan"></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">Final Approve Item</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</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"></div></div>
|
|
<div id="finalModalContent" class="d-none">
|
|
<ul class="list-group mb-3">
|
|
<li class="list-group-item"><strong>Expense No:</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>File Bukti Allowance:</strong> <span id="final_bukti_allowance">-</span></li>
|
|
<li class="list-group-item"><strong>File Bukti Transport Dalkot:</strong> <span id="final_bukti_transport_dalkot">-</span></li>
|
|
<li class="list-group-item"><strong>File Bukti Transport Ankot:</strong> <span id="final_bukti_transport_ankot">-</span></li>
|
|
<li class="list-group-item"><strong>File Bukti Hotel:</strong> <span id="final_bukti_hotel">-</span></li>
|
|
<li class="list-group-item"><strong>UC Plan:</strong> <span id="final_uc_plan">-</span></li>
|
|
</ul>
|
|
<p class="mt-2">Select items to approve:</p>
|
|
<div class="form-group custom-control custom-checkbox"><input type="checkbox" class="custom-control-input" id="final_allowance" name="allowance"><label class="custom-control-label" for="final_allowance">Allowance (<span id="final_allowance_value"></span>)</label></div>
|
|
<div class="form-group custom-control custom-checkbox"><input type="checkbox" class="custom-control-input" id="final_transport_dalkot" name="transport_dalkot"><label class="custom-control-label" for="final_transport_dalkot">Transport Dalkot (<span id="final_transport_dalkot_value"></span>)</label></div>
|
|
<div class="form-group custom-control custom-checkbox"><input type="checkbox" class="custom-control-input" id="final_transport_ankot" name="transport_ankot"><label class="custom-control-label" for="final_transport_ankot">Transport Ankot (<span id="final_transport_ankot_value"></span>)</label></div>
|
|
<div class="form-group custom-control custom-checkbox"><input type="checkbox" class="custom-control-input" id="final_hotel" name="hotel"><label class="custom-control-label" for="final_hotel">Hotel (<span id="final_hotel_value"></span>)</label></div>
|
|
<div class="form-group mt-3"><label>Total Approved</label><input type="text" class="form-control font-weight-bold" id="total" value="0" readonly></div>
|
|
</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">Reject Expense</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="form-group"><label>Remarks <span class="text-danger">*</span></label><textarea class="form-control" name="remarks" id="rejectRemarks" rows="3" required></textarea></div>
|
|
</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>
|
|
@endsection
|
|
|
|
@section('scripts')
|
|
<script>
|
|
$(document).ready(function () {
|
|
$('.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';
|
|
const rowDateStr = row.attr('data-date'); // Format: YYYY-MM-DD
|
|
|
|
// 1. Prioritas Pertama: Outstanding Filter Murni
|
|
if (outstandingFilterActive) {
|
|
return isOutstanding; // Jika outstanding card diklik, hanya tampilkan outstanding lintas batas
|
|
}
|
|
|
|
// 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); // Kunci aman timezone
|
|
|
|
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: true,
|
|
dom: 'Blfrtip',
|
|
lengthMenu: [ [10, 50, 100, -1], [10, 50, 100, "All"] ],
|
|
buttons: [
|
|
{ extend: 'excel', text: 'Excel' },
|
|
{ extend: 'pdf', text: 'PDF', orientation: 'landscape', pageSize: 'A4' },
|
|
{ extend: 'print', text: 'Print' },
|
|
'colvis'
|
|
]
|
|
});
|
|
|
|
// Klik Status Card Murni
|
|
$('.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 Murni
|
|
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 ? 'Tampilkan semua data' : 'Klik untuk detail');
|
|
});
|
|
}
|
|
|
|
// AJAX: Reject Modal
|
|
$(document).on('click', '.open-reject-modal', function () {
|
|
$('#rejectForm').attr('action', $(this).data('action'));
|
|
$('#rejectRemarks').val('').focus();
|
|
$('#rejectModal').modal('show');
|
|
});
|
|
|
|
// AJAX: Approve 1/2 Modal
|
|
$(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 fmt = new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR', minimumFractionDigits: 0 });
|
|
$('#allowance_value').text(fmt.format(data.allowance));
|
|
$('#transport_dalkot_value').text(fmt.format(data.transport_dalkot));
|
|
$('#transport_ankot_value').text(fmt.format(data.transport_ankot));
|
|
$('#hotel_value').text(fmt.format(data.hotel));
|
|
$('#user').text(data.user.name);
|
|
$('#expense_number').text(data.expense_number);
|
|
$('#rayon').text(data.rayon.code);
|
|
$('#tanggal').text(new Date(data.tanggal).toLocaleDateString('id-ID', {year:'numeric', month:'long', day:'numeric'}));
|
|
$('#tujuan').text(data.tujuan);
|
|
$('#jarak').text(data.jarak + ' km');
|
|
$('#bukti_allowance').html(data.bukti_allowance ? '<a href="'+data.bukti_allowance+'" target="_blank">View</a>' : '-');
|
|
$('#bukti_transport_dalkot').html(data.bukti_transport_dalkot ? '<a href="'+data.bukti_transport_dalkot+'" target="_blank">View</a>' : '-');
|
|
$('#bukti_transport_ankot').html(data.bukti_transport_ankot ? '<a href="'+data.bukti_transport_ankot+'" target="_blank">View</a>' : '-');
|
|
$('#bukti_hotel').html(data.bukti_hotel ? '<a href="'+data.bukti_hotel+'" target="_blank">View</a>' : '-');
|
|
$('#uc_plan').html(data.uc_plan ? '<a href="'+data.uc_plan+'" target="_blank">View</a>' : '-');
|
|
$('#loadingSpinner').hide();
|
|
$('#modalContent').removeClass('d-none');
|
|
});
|
|
});
|
|
|
|
// AJAX: 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 fmt = new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR', minimumFractionDigits: 0 });
|
|
$('#final_allowance_value').text(fmt.format(data.allowance));
|
|
$('#final_transport_dalkot_value').text(fmt.format(data.transport_dalkot));
|
|
$('#final_transport_ankot_value').text(fmt.format(data.transport_ankot));
|
|
$('#final_hotel_value').text(fmt.format(data.hotel));
|
|
|
|
// Menyimpan data angka murni ke elemen checkbox
|
|
$('#final_allowance').data('value', data.allowance);
|
|
$('#final_transport_dalkot').data('value', data.transport_dalkot);
|
|
$('#final_transport_ankot').data('value', data.transport_ankot);
|
|
$('#final_hotel').data('value', data.hotel);
|
|
|
|
$('#final_user').text(data.user.name);
|
|
$('#final_expense_number').text(data.expense_number);
|
|
|
|
// Reset penampung bukti
|
|
$('#final_bukti_allowance').html('<span class="text-muted">-</span>');
|
|
$('#final_bukti_transport_dalkot').html('<span class="text-muted">-</span>');
|
|
$('#final_bukti_transport_ankot').html('<span class="text-muted">-</span>');
|
|
$('#final_bukti_hotel').html('<span class="text-muted">-</span>');
|
|
|
|
// Mapping berkas table-attachments dinamis Anda
|
|
if (data.attachments && data.attachments.length > 0) {
|
|
data.attachments.forEach(function(att) {
|
|
if (att.file_path) {
|
|
let fileUrl = `/api/attachments/stream?path=${encodeURIComponent(att.file_path)}`;
|
|
let linkMarkup = `<a href="${fileUrl}" target="_blank" class="btn btn-xs btn-primary px-2"><i class="fas fa-eye"></i> View</a>`;
|
|
if (att.file_category === 'bukti_allowance' && $('#final_bukti_allowance').length) $('#final_bukti_allowance').html(linkMarkup);
|
|
if (att.file_category === 'bukti_transport_dalkot' && $('#final_bukti_transport_dalkot').length) $('#final_bukti_transport_dalkot').html(linkMarkup);
|
|
if (att.file_category === 'bukti_transport_ankot' && $('#final_bukti_transport_ankot').length) $('#final_bukti_transport_ankot').html(linkMarkup);
|
|
if (att.file_category === 'bukti_hotel' && $('#final_bukti_hotel').length) $('#final_bukti_hotel').html(linkMarkup);
|
|
}
|
|
});
|
|
}
|
|
|
|
let planUrl = data.uc_plan ? (data.uc_plan.includes('http') ? data.uc_plan : `/api/attachments/stream?path=${encodeURIComponent(data.uc_plan)}`) : null;
|
|
if($('#final_uc_plan').length) {
|
|
$('#final_uc_plan').html(planUrl ? '<a href="'+planUrl+'" target="_blank" class="btn btn-xs btn-info"><i class="fas fa-file-pdf"></i> View Plan</a>' : '<span class="text-muted">-</span>');
|
|
}
|
|
|
|
// Default awal: Semua ter-checklist otomatis saat modal dibuka
|
|
$('.custom-control-input').prop('checked', true);
|
|
|
|
$('#finalLoadingSpinner').hide();
|
|
$('#finalModalContent').removeClass('d-none');
|
|
|
|
// Hitung total awal berdasarkan item yang aktif terpilih
|
|
calculateFinalApprovedTotal();
|
|
});
|
|
});
|
|
|
|
// Fungsi Kalkulasi Akumulasi Hanya yang Di-checklist
|
|
function calculateFinalApprovedTotal() {
|
|
let totalApproved = 0;
|
|
$('.custom-control-input:checked').each(function () {
|
|
totalApproved += parseFloat($(this).data('value') || 0);
|
|
});
|
|
|
|
const fmt = new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR', minimumFractionDigits: 0 });
|
|
$('#total').val(fmt.format(totalApproved));
|
|
|
|
if($('#hidden_approved_total').length === 0) {
|
|
$('#finalApproveForm').append(`<input type="hidden" id="hidden_approved_total" name="approved_total" value="${totalApproved}">`);
|
|
} else {
|
|
$('#hidden_approved_total').val(totalApproved);
|
|
}
|
|
}
|
|
|
|
$(document).on('change', '.custom-control-input', function () {
|
|
calculateFinalApprovedTotal();
|
|
});
|
|
|
|
$('#finalApproveModal').on('hidden.bs.modal', function () {
|
|
$('.custom-control-input').prop('checked', false);
|
|
$('#total').val('0');
|
|
if($('#hidden_approved_total').length) {
|
|
$('#hidden_approved_total').remove();
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
@endsection |