This commit is contained in:
root
@@ -1,23 +1,31 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title')
|
||||
{{ $pageInfo['title'] }}
|
||||
@endsection
|
||||
|
||||
@section('title', $pageInfo['title'])
|
||||
|
||||
@section('admin-content')
|
||||
<section class="content-header">
|
||||
<div class="container-fluid">
|
||||
<div class="row mb-2">
|
||||
<div class="row mb-3">
|
||||
<div class="col-sm-6">
|
||||
<h1>{{ $pageInfo['title'] }}</h1>
|
||||
<h1 class="fw-bold text-dark">{{ $pageInfo['title'] }}</h1>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<ol class="breadcrumb float-sm-right">
|
||||
<li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">{{ __('Dashboard') }}</a></li>
|
||||
<li class="breadcrumb-item active"><a href="{{ $pageInfo['path'] }}">{{ $pageInfo['title'] }}</a>
|
||||
</li>
|
||||
</ol>
|
||||
<!-- Tombol Aksi Global (Kanan Atas) -->
|
||||
<div class="float-sm-right d-flex align-items-center" style="gap: 10px;">
|
||||
<a href="{{ route('admin.audit-trail.clear-cache') }}"
|
||||
class="btn btn-outline-info btn-sm shadow-sm"
|
||||
onclick="return confirm('Apakah Anda yakin ingin mereset cache sistem?')">
|
||||
<i class="fa fa-sync"></i> Reset Cache
|
||||
</a>
|
||||
|
||||
<form action="{{ route('admin.audit-trail.clear') }}" method="POST" onsubmit="return confirm('PERINGATAN! Semua log audit akan dihapus permanen. Lanjutkan?')">
|
||||
@csrf
|
||||
@method('DELETE')
|
||||
<button type="submit" class="btn btn-outline-danger btn-sm shadow-sm">
|
||||
<i class="fa fa-trash"></i> Clear All Logs
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -25,82 +33,137 @@
|
||||
|
||||
<section class="content">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="header-title float-left">{{ $pageInfo['title'] }}</h4>
|
||||
<div class="clearfix"></div>
|
||||
<div class="data-tables">
|
||||
@include('backend.layouts.partials.messages')
|
||||
<div class="table-responsive">
|
||||
<table id="dataTable" class="text-center">
|
||||
<thead class="bg-light text-capitalize">
|
||||
<tr>
|
||||
<th width="5%">{{ __('User') }}</th>
|
||||
<th width="5%">{{ __('Ip Address') }}</th>
|
||||
<th width="5%">{{ __('Action') }}</th>
|
||||
<th width="15%">{{ __('Activity') }}</th>
|
||||
<th width="5%">Browser</th>
|
||||
<th width="15%">User Agent</th>
|
||||
<th width="5%">Tanggal</th>
|
||||
<th width="5%">Waktu</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach ($data as $item)
|
||||
<tr>
|
||||
<td>
|
||||
{{ $item->user ? $item->user->username : preg_replace('/\).*$/', '', explode('(', $item->activity)[1]) }}
|
||||
</td>
|
||||
<td>{{ $item->ip_address }}</td>
|
||||
<td>
|
||||
@php
|
||||
$color = 'info';
|
||||
if ($item->action == 'Create') {
|
||||
$color = 'success';
|
||||
} elseif ($item->action == 'Update') {
|
||||
$color = 'warning';
|
||||
} elseif ($item->action == 'Delete' || $item->action == 'Error') {
|
||||
$color = 'danger';
|
||||
}
|
||||
@endphp
|
||||
<div class="badge badge-{{ $color }} text-white">
|
||||
{{ $item->action }}
|
||||
</div>
|
||||
</td>
|
||||
<td>{{ $item->activity }}</td>
|
||||
<td>{{ $item->browser }}</td>
|
||||
<td>{{ $item->user_agent }}</td>
|
||||
<td>{{ $item->created_at }}</td>
|
||||
<td>{{ $item->created_at->diffForHumans() }}</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<!-- CARD FILTER -->
|
||||
<div class="card shadow-sm mb-4" style="border-radius: 12px; border: none; border-top: 3px solid #007bff;">
|
||||
<div class="card-header bg-white py-3">
|
||||
<h6 class="m-0 font-weight-bold text-primary"><i class="fa fa-filter mr-1"></i> Panel Pencarian & Filter</h6>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form action="{{ route('admin.audit-trail.index') }}" method="GET">
|
||||
<div class="row">
|
||||
<!-- Filter User -->
|
||||
<div class="col-md-3 mb-3">
|
||||
<label class="small font-weight-bold text-muted text-uppercase">Berdasarkan User</label>
|
||||
<select name="admin_id" class="form-control select2 shadow-none">
|
||||
<option value="">-- Semua User --</option>
|
||||
@foreach($admins as $admin)
|
||||
<option value="{{ $admin->id }}" {{ request('admin_id') == $admin->id ? 'selected' : '' }}>
|
||||
{{ $admin->name }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Filter Region -->
|
||||
<div class="col-md-3 mb-3">
|
||||
<label class="small font-weight-bold text-muted text-uppercase">Berdasarkan Region</label>
|
||||
<select name="region" class="form-control shadow-none">
|
||||
<option value="">-- Semua Region --</option>
|
||||
@foreach($regions as $reg)
|
||||
<option value="{{ $reg->code }}" {{ request('region') == $reg->code ? 'selected' : '' }}>
|
||||
{{ $reg->name }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Filter Rentang Waktu -->
|
||||
<div class="col-md-4 mb-3">
|
||||
<label class="small font-weight-bold text-muted text-uppercase">Rentang Waktu</label>
|
||||
<div class="input-group">
|
||||
<input type="date" name="start_date" class="form-control shadow-none" value="{{ request('start_date') }}">
|
||||
<div class="input-group-append">
|
||||
<span class="input-group-text bg-light border-left-0 border-right-0">s/d</span>
|
||||
</div>
|
||||
<input type="date" name="end_date" class="form-control shadow-none" value="{{ request('end_date') }}">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tombol Eksekusi Filter -->
|
||||
<div class="col-md-2 mb-3 text-right d-flex align-items-end justify-content-end" style="gap: 5px;">
|
||||
<button type="submit" class="btn btn-primary btn-block mb-0 shadow-sm">
|
||||
<i class="fa fa-search"></i> Cari
|
||||
</button>
|
||||
<a href="{{ route('admin.audit-trail.index') }}" class="btn btn-light border shadow-sm px-3" title="Reset Filter">
|
||||
<i class="fa fa-undo"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="my-3">
|
||||
|
||||
<!-- Tombol Export Excel -->
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<a href="{{ route('admin.audit-trail.export', request()->all()) }}" class="btn btn-success shadow-sm">
|
||||
<i class="fa fa-file-excel"></i> Export Hasil Pencarian ke Excel
|
||||
</a>
|
||||
<span class="text-muted small ml-2 mt-2 d-inline-block">
|
||||
* Menampilkan <strong>{{ $data->firstItem() }}</strong> sampai <strong>{{ $data->lastItem() }}</strong> dari <strong>{{ $data->total() }}</strong> log.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- TABEL DATA -->
|
||||
<div class="card shadow-sm" style="border-radius: 12px; border: none;">
|
||||
<div class="card-body p-0">
|
||||
@include('backend.layouts.partials.messages')
|
||||
<div class="table-responsive">
|
||||
<table id="dataTable" class="table table-hover mb-0">
|
||||
<thead class="bg-light">
|
||||
<tr>
|
||||
<th class="border-top-0" width="10%">User</th>
|
||||
<th class="border-top-0" width="10%">IP Address</th>
|
||||
<th class="border-top-0" width="10%">Aksi</th>
|
||||
<th class="border-top-0" width="35%">Aktivitas</th>
|
||||
<th class="border-top-0" width="10%">Browser</th>
|
||||
<th class="border-top-0" width="15%">Waktu</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach ($data as $item)
|
||||
<tr>
|
||||
<td class="align-middle">
|
||||
<span class="text-primary font-weight-bold">{{ $item->user->username ?? 'System' }}</span>
|
||||
</td>
|
||||
<td class="align-middle text-muted small">{{ $item->ip_address }}</td>
|
||||
<td class="align-middle text-center">
|
||||
@php
|
||||
$badge = match($item->action) {
|
||||
'Insert', 'Create' => 'success',
|
||||
'Update' => 'warning',
|
||||
'Delete', 'Reject', 'Error' => 'danger',
|
||||
'Approve' => 'primary',
|
||||
default => 'info'
|
||||
};
|
||||
@endphp
|
||||
<span class="badge badge-{{ $badge }} px-2 py-1 text-white shadow-xs">{{ $item->action }}</span>
|
||||
</td>
|
||||
<td class="align-middle text-left"><small class="text-dark">{{ $item->activity }}</small></td>
|
||||
<td class="align-middle"><small class="text-muted">{{ $item->browser }}</small></td>
|
||||
<td class="align-middle">
|
||||
<div style="line-height: 1.1;">
|
||||
<small class="d-block font-weight-bold">{{ $item->created_at->format('d M Y') }}</small>
|
||||
<small class="text-muted" style="font-size: 10px;">{{ $item->created_at->format('H:i') }} ({{ $item->created_at->diffForHumans() }})</small>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<!-- FOOTER CARD UNTUK PAGINATION -->
|
||||
<div class="card-footer bg-white py-3 border-top-0">
|
||||
<div class="d-flex justify-content-center">
|
||||
{{ $data->links() }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@endsection
|
||||
|
||||
@section('scripts')
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
if ($('#dataTable').length) {
|
||||
$('#dataTable').DataTable({
|
||||
responsive: false,
|
||||
dom: 'Bfrtip',
|
||||
buttons: [
|
||||
'excel', 'pdf', 'print'
|
||||
],
|
||||
order: [[6, 'desc']]
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@endsection
|
||||
@endsection
|
||||
@@ -1,138 +1,273 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title')
|
||||
Dashboard
|
||||
@endsection
|
||||
@section('title', 'Active Budgets Control')
|
||||
|
||||
@section('admin-content')
|
||||
<section class="content-header">
|
||||
<div class="container-fluid">
|
||||
<div class="row mb-2">
|
||||
<div class="col-sm-6">
|
||||
<h1>Active Budgets</h1>
|
||||
<h1 class="fw-bold text-dark">Active Budgets Control</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>
|
||||
</li>
|
||||
<li class="breadcrumb-item active">Budget Control</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="content">
|
||||
<div class="container-fluid">
|
||||
<div class="card card-primary card-outline">
|
||||
|
||||
{{-- --- BAGIAN 1: PANEL FILTER DINAMIS --- --}}
|
||||
<div class="card shadow-sm mb-4" style="border-radius: 15px; border-top: 3px solid #007bff;">
|
||||
<div class="card-body py-3">
|
||||
<form action="{{ route('budget_control') }}" method="GET" id="filter-form">
|
||||
<div class="row align-items-end">
|
||||
<div class="col-md-3 mb-2 mb-md-0">
|
||||
<label class="small font-weight-bold text-muted text-uppercase">Region</label>
|
||||
<select name="region_id" id="filter_region" class="form-control form-control-sm select2-filter">
|
||||
{{-- Munculkan 'Semua Region' HANYA untuk role pusat --}}
|
||||
@if(auth()->user()->hasAnyRole(['Superadmin', 'Super Admin', 'Accounting', 'accounting']))
|
||||
<option value="">Semua Region</option>
|
||||
@else
|
||||
{{-- Untuk Admin Region, langsung arahkan ke pilihannya --}}
|
||||
<option value="" disabled>Pilih Region Anda</option>
|
||||
@endif
|
||||
|
||||
@foreach($regions as $reg)
|
||||
<option value="{{ $reg->id }}" {{ request('region_id', (count($regions) == 1 ? $regions->first()->id : '')) == $reg->id ? 'selected' : '' }}>
|
||||
{{ $reg->name }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-3 mb-2 mb-md-0">
|
||||
<label class="small font-weight-bold text-muted text-uppercase">Cabang</label>
|
||||
<select name="cabang_id" id="filter_cabang" class="form-control form-control-sm select2-filter">
|
||||
<option value="">Semua Cabang</option>
|
||||
@foreach($cabangOptions as $cab)
|
||||
<option value="{{ $cab->id }}" {{ request('cabang_id') == $cab->id ? 'selected' : '' }}>{{ $cab->name }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-2 mb-2 mb-md-0">
|
||||
<label class="small font-weight-bold text-muted text-uppercase">Bulan</label>
|
||||
<select name="month" class="form-control form-control-sm select2-filter">
|
||||
<option value="">Semua Bulan</option>
|
||||
@foreach(['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] as $m)
|
||||
<option value="{{ $m }}" {{ request('month') == $m ? 'selected' : '' }}>{{ $m }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-2 mb-2 mb-md-0">
|
||||
<label class="small font-weight-bold text-muted text-uppercase">Tahun</label>
|
||||
<select name="year" class="form-control form-control-sm select2-filter">
|
||||
@for($y = date('Y'); $y >= 2024; $y--)
|
||||
<option value="{{ $y }}" {{ request('year', date('Y')) == $y ? 'selected' : '' }}>{{ $y }}</option>
|
||||
@endfor
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<div class="btn-group w-100">
|
||||
<button type="submit" class="btn btn-sm btn-primary shadow-sm"><i class="fas fa-filter mr-1"></i></button>
|
||||
<a href="{{ route('budget_control') }}" class="btn btn-sm btn-secondary shadow-sm"><i class="fas fa-sync-alt"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card card-primary card-outline shadow-sm" style="border-radius: 15px;">
|
||||
<div class="card-body">
|
||||
<h4 class="header-title float-left">Current Active Budget</h4>
|
||||
<p class="float-right mb-2">
|
||||
@if (auth()->user()->can('budget_control.create'))
|
||||
<a class="btn btn-primary text-white" href="{{ route('budget_control.create') }}">
|
||||
Add New Budget
|
||||
</a>
|
||||
@endif
|
||||
</p>
|
||||
<div class="clearfix"></div>
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<h4 class="header-title m-0">Current Active Budget</h4>
|
||||
@if (auth()->user()->can('budget_control.create'))
|
||||
<div>
|
||||
@if(auth()->user()->hasAnyRole(['Accounting', 'accounting', 'Admin Region', 'Superadmin', 'Super Admin']))
|
||||
<button type="button" class="btn btn-success btn-sm rounded-pill px-3 shadow-sm mr-2" data-toggle="modal" data-target="#modalBulkUpload">
|
||||
<i class="fas fa-file-excel mr-1"></i> Bulk Upload
|
||||
</button>
|
||||
@endif
|
||||
|
||||
<a class="btn btn-primary btn-sm rounded-pill px-3 shadow-sm" href="{{ route('budget_control.create') }}">
|
||||
<i class="fas fa-plus-circle mr-1"></i> Add New Budget
|
||||
</a>
|
||||
</div>
|
||||
@endif
|
||||
</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>Penerima</th>
|
||||
<th>Cabang</th>
|
||||
<th>Pengirim</th>
|
||||
<th>Total</th>
|
||||
<th>Sisa Budget Tersedia</th>
|
||||
<th>Keterangan</th>
|
||||
<th>Periode</th>
|
||||
<th>Status</th>
|
||||
<th>Aksi</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@php
|
||||
use App\Helpers\BudgetHelper;
|
||||
@endphp
|
||||
@foreach ($data as $item)
|
||||
<tr>
|
||||
<td>{{ $loop->iteration }}</td>
|
||||
<td>{{ $item->receiver->name }}</td>
|
||||
<td>{{ $item->cabang->name }}</td>
|
||||
<td>{{ $item->sender->name }}</td>
|
||||
<td>{{ number_format($item->amount, 0, ',', '.') }}</td>
|
||||
<td>{{ number_format($item->availableBudget, 0, ',', '.') }}</td>
|
||||
<td>{{ $item->remarks }}</td>
|
||||
<td>{{ strtoupper($item->periode_month) }} {{ $item->periode_year }}</td>
|
||||
<td>
|
||||
@if ($item->status == 'Unassigned')
|
||||
<span class="badge badge-warning text-white">{{ $item->status }}</span>
|
||||
@elseif ($item->status == 'Assigned')
|
||||
<span class="badge badge-success text-white">{{ $item->status }}</span>
|
||||
@else
|
||||
<span class="badge badge-danger text-white">{{ $item->status }}</span>
|
||||
@endif
|
||||
</td>
|
||||
<td>
|
||||
@if (auth()->user()->can('budget_control.delete'))
|
||||
<form action="{{ route('budget_control.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>
|
||||
<div class="table-responsive">
|
||||
<table id="dataTable" class="table table-bordered table-striped table-hover w-100">
|
||||
<thead class="bg-light text-capitalize">
|
||||
<tr>
|
||||
<th width="3%">#</th>
|
||||
<th>Penerima / Cabang</th>
|
||||
<th>Pengirim</th>
|
||||
<th>Assigned Budget</th>
|
||||
<th>Real-time Sisa Budget</th>
|
||||
<th>Periode</th>
|
||||
<th>Status Budget</th>
|
||||
<th>Status Transfer</th>
|
||||
<th width="5%" class="text-center">Bukti</th>
|
||||
<th width="10%">Aksi</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach ($data as $item)
|
||||
@php
|
||||
$realtimeBudget = $item->availableBudget ?? 0;
|
||||
@endphp
|
||||
<tr>
|
||||
<td>{{ ($data->currentPage() - 1) * $data->perPage() + $loop->iteration }}</td>
|
||||
<td>
|
||||
<div class="fw-bold text-dark">{{ $item->receiver->name ?? '-' }}</div>
|
||||
<small class="text-muted"><i class="fas fa-building mr-1"></i>{{ $item->cabang->name ?? '-' }}</small>
|
||||
</td>
|
||||
<td>{{ $item->sender->name ?? '-' }}</td>
|
||||
<td class="align-middle">
|
||||
<div class="fw-bold text-primary">Rp {{ number_format($item->amount, 0, ',', '.') }}</div>
|
||||
</td>
|
||||
<td class="align-middle">
|
||||
<div class="fw-bold {{ $realtimeBudget >= 0 ? 'text-success' : 'text-danger' }}">
|
||||
Rp {{ number_format($realtimeBudget, 0, ',', '.') }}
|
||||
</div>
|
||||
</td>
|
||||
<td class="align-middle">
|
||||
<span class="badge badge-light border shadow-sm px-2 py-1">
|
||||
{{ strtoupper($item->periode_month) }} {{ $item->periode_year }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="align-middle text-center">
|
||||
<span class="badge {{ $item->status == 'Assigned' ? 'badge-success' : 'badge-warning' }} px-2 py-1">
|
||||
{{ $item->status }}
|
||||
</span>
|
||||
<div class="mt-1" style="line-height: 1.1;">
|
||||
<small class="text-muted d-block" style="font-size: 10px;">{{ $item->created_at->format('d M Y H:i') }} WIB</small>
|
||||
</div>
|
||||
</td>
|
||||
<td class="align-middle text-center">
|
||||
@php
|
||||
$tStatus = $item->transfer_status ?? 'Pending';
|
||||
$badgeClass = match(strtolower($tStatus)) {
|
||||
'validated' => 'badge-success',
|
||||
'waiting approval' => 'badge-info',
|
||||
'rejected' => 'badge-danger',
|
||||
default => 'badge-secondary'
|
||||
};
|
||||
@endphp
|
||||
<span class="badge {{ $badgeClass }} px-2 py-1">{{ $tStatus }}</span>
|
||||
</td>
|
||||
<td class="text-center align-middle">
|
||||
@if($item->transfer_proof)
|
||||
<a href="{{ asset(str_starts_with($item->transfer_proof, 'uploads/') ? $item->transfer_proof : 'uploads/' . $item->transfer_proof) }}"
|
||||
target="_blank" class="btn btn-xs btn-info shadow-sm">
|
||||
<i class="fas fa-eye"></i> View
|
||||
</a>
|
||||
@else
|
||||
<span class="text-muted small">-</span>
|
||||
@endif
|
||||
</td>
|
||||
<td class="align-middle">
|
||||
<div class="btn-group shadow-sm">
|
||||
@if(strtolower($item->transfer_status) != 'validated')
|
||||
<button type="button" class="btn btn-sm btn-outline-primary btn-upload" data-id="{{ $item->id }}" data-toggle="modal" data-target="#modalUploadProof">
|
||||
<i class="fas fa-upload"></i>
|
||||
</button>
|
||||
@endif
|
||||
|
||||
@if(Auth::user()->hasAnyRole(['accounting', 'Accounting', 'admin', 'Admin', 'Superadmin']) && strtolower($item->transfer_status) == 'waiting approval')
|
||||
<form action="{{ route('budget_control.approve_transfer', $item->id) }}" method="POST" class="d-inline ml-1">
|
||||
@csrf
|
||||
<button type="submit" class="btn btn-sm btn-success" onclick="return confirm('Sahkan transfer ini?')"><i class="fas fa-check"></i></button>
|
||||
</form>
|
||||
<form action="{{ route('budget_control.reject_transfer', $item->id) }}" method="POST" class="d-inline ml-1">
|
||||
@csrf
|
||||
<button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Tolak transfer ini?')"><i class="fas fa-times"></i></button>
|
||||
</form>
|
||||
@endif
|
||||
|
||||
@if (auth()->user()->can('budget_control.delete'))
|
||||
<form action="{{ route('budget_control.destroy', $item->id) }}" method="POST" class="d-inline ml-1" onsubmit="return confirm('Hapus data?');">
|
||||
@csrf @method('DELETE')
|
||||
<button type="submit" class="btn btn-danger btn-sm"><i class="fas fa-trash"></i></button>
|
||||
</form>
|
||||
@endif
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{{-- --- BAGIAN 2: NAVIGASI HALAMAN (SERVER-SIDE) --- --}}
|
||||
<div class="mt-4 d-flex justify-content-between align-items-center">
|
||||
<div class="small text-muted">
|
||||
Menampilkan {{ $data->firstItem() }} sampai {{ $data->lastItem() }} dari {{ $data->total() }} data
|
||||
</div>
|
||||
<div>
|
||||
{{ $data->appends(request()->query())->links('pagination::bootstrap-4') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@include('backend.pages.budget_control.partials.modals')
|
||||
@endsection
|
||||
|
||||
@section('scripts')
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
if ($('#dataTable').length) {
|
||||
$('#dataTable').DataTable({
|
||||
responsive: false,
|
||||
dom: 'Blfrtip',
|
||||
lengthMenu: [ [10, 50, 100, -1], [10, 50, 100, "All"] ], // Control the entries dropdown
|
||||
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'
|
||||
]
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@endsection
|
||||
function toggleUploadType() {
|
||||
const isRegion = document.getElementById('type_region').checked;
|
||||
document.getElementById('group_region').classList.toggle('d-none', !isRegion);
|
||||
document.getElementById('group_cabang').classList.toggle('d-none', isRegion);
|
||||
}
|
||||
|
||||
$(document).ready(function () {
|
||||
// Inisialisasi Select2 untuk Filter
|
||||
$('.select2-filter').select2({
|
||||
theme: 'bootstrap4',
|
||||
width: '100%'
|
||||
}).on('change', function() {
|
||||
$('#filter-form').submit();
|
||||
});
|
||||
|
||||
// Inisialisasi DataTables
|
||||
if ($('#dataTable').length) {
|
||||
$('#dataTable').DataTable({
|
||||
paging: false,
|
||||
info: false,
|
||||
responsive: false,
|
||||
dom: 'Blfrtip',
|
||||
buttons: [
|
||||
{ extend: 'excel', className: 'btn-sm btn-success', text: '<i class="fas fa-file-excel mr-1"></i> Excel' },
|
||||
{ extend: 'pdf', className: 'btn-sm btn-danger', text: '<i class="fas fa-file-pdf mr-1"></i> PDF' }
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
$(document).on('click', '.btn-upload', function() {
|
||||
$('#budget_id').val($(this).data('id'));
|
||||
});
|
||||
|
||||
// Select2 di dalam modal
|
||||
$('#modalBulkUpload').on('shown.bs.modal', function () {
|
||||
$('.select2_modal').select2({
|
||||
theme: 'bootstrap4',
|
||||
width: '100%',
|
||||
dropdownParent: $('#modalBulkUpload')
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@endsection
|
||||
@@ -1,90 +1,270 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title')
|
||||
Dashboard
|
||||
@endsection
|
||||
@section('title', 'Riwayat Transfer & Realisasi')
|
||||
|
||||
@section('admin-content')
|
||||
<section class="content-header">
|
||||
<div class="container-fluid">
|
||||
<div class="row mb-2">
|
||||
<div class="col-sm-6">
|
||||
<h1>Log Transfer Budgets</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>
|
||||
</li>
|
||||
</ol>
|
||||
<section class="content-header">
|
||||
<div class="container-fluid">
|
||||
<div class="row mb-2">
|
||||
<div class="col-sm-6">
|
||||
<h1 class="fw-bold text-dark">Log Riwayat Budget & Transaksi</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>
|
||||
<li class="breadcrumb-item"><a href="{{ route('budget_control') }}">Budget Control</a></li>
|
||||
<li class="breadcrumb-item active">Riwayat</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="content">
|
||||
<div class="container-fluid">
|
||||
|
||||
{{-- --- BAGIAN BARU: PANEL FILTER --- --}}
|
||||
<div class="card shadow-sm mb-4" style="border-radius: 15px; border-top: 3px solid #17a2b8;">
|
||||
<div class="card-body py-3">
|
||||
<form action="{{ route('budget_control.log') }}" method="GET" id="filter-form">
|
||||
<div class="row align-items-end">
|
||||
<div class="col-md-3 mb-2 mb-md-0">
|
||||
<label class="small font-weight-bold text-muted text-uppercase">Region</label>
|
||||
<select name="region_id" class="form-control form-control-sm select2" onchange="this.form.submit()">
|
||||
<option value="">Semua Region</option>
|
||||
@foreach($regions as $reg)
|
||||
<option value="{{ $reg->id }}" {{ request('region_id') == $reg->id ? 'selected' : '' }}>{{ $reg->name }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-3 mb-2 mb-md-0">
|
||||
<label class="small font-weight-bold text-muted text-uppercase">Cabang</label>
|
||||
<select name="cabang_id" class="form-control form-control-sm select2" onchange="this.form.submit()">
|
||||
<option value="">Semua Cabang</option>
|
||||
@foreach($cabangOptions as $cab)
|
||||
<option value="{{ $cab->id }}" {{ request('cabang_id') == $cab->id ? 'selected' : '' }}>{{ $cab->name }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-2 mb-2 mb-md-0">
|
||||
<label class="small font-weight-bold text-muted text-uppercase">Bulan</label>
|
||||
<select name="month" class="form-control form-control-sm" onchange="this.form.submit()">
|
||||
<option value="">Semua Bulan</option>
|
||||
@foreach(['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] as $m)
|
||||
<option value="{{ $m }}" {{ request('month') == $m ? 'selected' : '' }}>{{ $m }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-2 mb-2 mb-md-0">
|
||||
<label class="small font-weight-bold text-muted text-uppercase">Tahun</label>
|
||||
<select name="year" class="form-control form-control-sm" onchange="this.form.submit()">
|
||||
@for($y = date('Y'); $y >= 2024; $y--)
|
||||
<option value="{{ $y }}" {{ request('year', date('Y')) == $y ? 'selected' : '' }}>{{ $y }}</option>
|
||||
@endfor
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<div class="btn-group w-100">
|
||||
<button type="submit" class="btn btn-sm btn-primary px-3 shadow-sm">
|
||||
<i class="fas fa-filter"></i>
|
||||
</button>
|
||||
<a href="{{ route('budget_control.log') }}" class="btn btn-sm btn-secondary shadow-sm" title="Reset Filter">
|
||||
<i class="fas fa-sync-alt"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- --- BAGIAN GRAFIK PERBANDINGAN (TETAP ADA) --- --}}
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card shadow-sm mb-4" style="border-radius: 15px; border-left: 5px solid #007bff;">
|
||||
<div class="card-header bg-white border-0 pt-3">
|
||||
<h3 class="card-title fw-bold text-primary">
|
||||
<i class="fas fa-chart-bar mr-2"></i> Perbandingan Petty Cash vs Realisasi (Halaman Ini)
|
||||
</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div style="height: 280px;">
|
||||
<canvas id="logComparisonChart"></canvas>
|
||||
</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">Log Transfer Budgets</h4>
|
||||
<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>Penerima</th>
|
||||
<th>Cabang</th>
|
||||
<th>Pengirim</th>
|
||||
<th>Total</th>
|
||||
<th>Keterangan</th>
|
||||
<th>Periode</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach ($data as $item)
|
||||
<tr>
|
||||
<td>{{ $loop->iteration }}</td>
|
||||
<td>{{ $item->receiver->name }}</td>
|
||||
<td>{{ $item->cabang->name }}</td>
|
||||
<td>{{ $item->sender->name }}</td>
|
||||
<td>{{ number_format($item->amount, 0, ',', '.') }}</td>
|
||||
<td>{{ $item->remarks }}</td>
|
||||
<td>{{ strtoupper($item->periode_month) }} {{ $item->periode_year }}</td>
|
||||
<td>
|
||||
@if ($item->status == 'Unassigned')
|
||||
<span class="badge badge-warning text-white">{{ $item->status }}</span>
|
||||
@elseif ($item->status == 'Assigned')
|
||||
<span class="badge badge-success text-white">{{ $item->status }}</span>
|
||||
@else
|
||||
<span class="badge badge-danger text-white">{{ $item->status }}</span>
|
||||
@endif
|
||||
</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- --- TABEL DATA --- --}}
|
||||
<div class="card card-primary card-outline shadow-sm" style="border-radius: 15px;">
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<h6 class="text-muted font-weight-bold m-0 text-uppercase small">Detail Transaksi Riwayat</h6>
|
||||
<div id="dt-buttons-container"></div>
|
||||
</div>
|
||||
|
||||
<div class="table-responsive">
|
||||
<table id="logTable" class="table table-bordered table-striped table-hover w-100">
|
||||
<thead class="bg-light text-center text-uppercase small font-weight-bold">
|
||||
<tr>
|
||||
<th width="3%">#</th>
|
||||
<th class="text-left">Cabang / Region</th>
|
||||
<th>Periode</th>
|
||||
<th>Total Budget (Petty Cash)</th>
|
||||
<th>Total Debet (Masuk)</th>
|
||||
<th>Total Kredit (Keluar)</th>
|
||||
<th class="text-success">Realisasi (Sisa)</th>
|
||||
<th>Waktu Assign</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="text-center">
|
||||
@forelse ($data as $item)
|
||||
<tr>
|
||||
<td>{{ ($data->currentPage() - 1) * $data->perPage() + $loop->iteration }}</td>
|
||||
<td class="text-left align-middle">
|
||||
<div class="fw-bold text-dark">{{ $item->cabang->name ?? '-' }}</div>
|
||||
<small class="text-muted">{{ $item->cabang->region->name ?? '-' }}</small>
|
||||
</td>
|
||||
<td class="align-middle">
|
||||
<span class="badge badge-light border shadow-sm px-2 py-1">
|
||||
{{ strtoupper($item->periode_month) }} {{ $item->periode_year }}
|
||||
</span>
|
||||
</td>
|
||||
|
||||
<td class="align-middle fw-bold text-dark">
|
||||
Rp {{ number_format($item->total_budget, 0, ',', '.') }}
|
||||
</td>
|
||||
<td class="align-middle text-primary">
|
||||
Rp {{ number_format($item->total_debet, 0, ',', '.') }}
|
||||
</td>
|
||||
<td class="align-middle text-danger">
|
||||
Rp {{ number_format($item->total_credit, 0, ',', '.') }}
|
||||
</td>
|
||||
<td class="align-middle fw-bold text-success" style="font-size: 15px;">
|
||||
Rp {{ number_format($item->realisasi, 0, ',', '.') }}
|
||||
</td>
|
||||
|
||||
<td class="align-middle">
|
||||
<small class="text-muted d-block">
|
||||
<i class="fas fa-calendar-alt mr-1"></i>{{ $item->created_at->format('d M Y') }}
|
||||
</small>
|
||||
<small class="text-muted d-block">
|
||||
<i class="fas fa-clock mr-1"></i>{{ $item->created_at->format('H:i') }} WIB
|
||||
</small>
|
||||
</td>
|
||||
|
||||
<td class="align-middle">
|
||||
<span class="badge {{ $item->status == 'Assigned' ? 'badge-success' : 'badge-secondary' }} px-2 py-1 shadow-sm">
|
||||
{{ $item->status }}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
@empty
|
||||
<tr>
|
||||
<td colspan="9" class="text-center py-5 text-muted">
|
||||
<i class="fas fa-folder-open fa-2x mb-2"></i><br>
|
||||
Belum ada riwayat budget yang tercatat.
|
||||
</td>
|
||||
</tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{{-- --- PAGINATION LARAVEL (TETAP ADA) --- --}}
|
||||
<div class="mt-4 d-flex justify-content-between align-items-center">
|
||||
<div class="small text-muted">
|
||||
Menampilkan {{ $data->firstItem() }} sampai {{ $data->lastItem() }} dari {{ $data->total() }} data
|
||||
</div>
|
||||
<div>
|
||||
{{ $data->appends(request()->query())->links('pagination::bootstrap-4') }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
@endsection
|
||||
|
||||
@section('scripts')
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
if ($('#dataTable').length) {
|
||||
$('#dataTable').DataTable({
|
||||
responsive: false,
|
||||
dom: 'Bfrtip',
|
||||
buttons: ['excel', 'pdf', 'print']
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@endsection
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
|
||||
// 1. INISIALISASI GRAFIK PERBANDINGAN
|
||||
const ctx = document.getElementById('logComparisonChart').getContext('2d');
|
||||
new Chart(ctx, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: {!! json_encode($chartData['labels'] ?? []) !!},
|
||||
datasets: [
|
||||
{
|
||||
label: 'Petty Cash (Budget)',
|
||||
data: {!! json_encode($chartData['budget'] ?? []) !!},
|
||||
backgroundColor: 'rgba(54, 162, 235, 0.7)',
|
||||
borderColor: 'rgba(54, 162, 235, 1)',
|
||||
borderWidth: 1,
|
||||
borderRadius: 5
|
||||
},
|
||||
{
|
||||
label: 'Sisa Realisasi',
|
||||
data: {!! json_encode($chartData['realisasi'] ?? []) !!},
|
||||
backgroundColor: 'rgba(40, 167, 69, 0.7)',
|
||||
borderColor: 'rgba(40, 167, 69, 1)',
|
||||
borderWidth: 1,
|
||||
borderRadius: 5
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: { position: 'top' }
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
ticks: {
|
||||
callback: function(value) { return 'Rp ' + value.toLocaleString('id-ID'); }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 2. DATATABLES OPTIMIZATION
|
||||
if ($('#logTable').length) {
|
||||
var table = $('#logTable').DataTable({
|
||||
paging: false,
|
||||
info: false,
|
||||
searching: true,
|
||||
responsive: false,
|
||||
dom: 'Bfrtip',
|
||||
buttons: [
|
||||
{
|
||||
extend: 'excelHtml5',
|
||||
className: 'btn-sm btn-success shadow-sm',
|
||||
text: '<i class="fas fa-file-excel mr-1"></i> Export Excel',
|
||||
title: 'Laporan Riwayat Budget - ' + new Date().toLocaleDateString('id-ID'),
|
||||
exportOptions: { columns: ':visible' }
|
||||
},
|
||||
{
|
||||
extend: 'pdfHtml5',
|
||||
className: 'btn-sm btn-danger shadow-sm',
|
||||
text: '<i class="fas fa-file-pdf mr-1"></i> Export PDF',
|
||||
orientation: 'landscape',
|
||||
pageSize: 'A4'
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
table.buttons().container().appendTo('#dt-buttons-container');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@endsection
|
||||
@@ -0,0 +1,113 @@
|
||||
{{-- Modal Upload Bukti Transfer --}}
|
||||
<div class="modal fade" id="modalUploadProof" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered" role="document">
|
||||
<div class="modal-content" style="border-radius: 15px; border: none;">
|
||||
<form id="formUploadProof" action="{{ route('budget_control.upload_proof') }}" method="POST" enctype="multipart/form-data">
|
||||
@csrf
|
||||
<input type="hidden" name="budget_id" id="budget_id">
|
||||
|
||||
<div class="modal-header bg-primary text-white" style="border-radius: 15px 15px 0 0;">
|
||||
<h5 class="modal-title font-weight-bold"><i class="fas fa-file-invoice mr-2"></i>Upload Bukti Transfer</h5>
|
||||
<button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="form-group">
|
||||
<label for="transfer_proof">Upload Dokumen Budget (PDF/Gambar) <span class="text-danger">*</span></label>
|
||||
<input type="file" name="transfer_proof" id="transfer_proof" class="form-control" accept=".pdf, .jpg, .jpeg, .png" required>
|
||||
<small class="form-text text-muted">Format yang diizinkan: PDF, JPG, JPEG, PNG. Maksimal ukuran file: 5MB.</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer bg-light" style="border-radius: 0 0 15px 15px;">
|
||||
<button type="button" class="btn btn-secondary rounded-pill px-4" data-dismiss="modal">Batal</button>
|
||||
<button type="submit" class="btn btn-primary rounded-pill px-4 shadow">Simpan Bukti</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Modal Bulk Upload Budget --}}
|
||||
<div class="modal fade" id="modalBulkUpload" tabindex="-1" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content" style="border-radius: 15px; border: none;">
|
||||
<div class="modal-header bg-success text-white" style="border-radius: 15px 15px 0 0;">
|
||||
<h5 class="modal-title"><i class="fas fa-upload mr-2"></i> Bulk Upload Budget (Excel)</h5>
|
||||
<button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form action="{{ route('budget_control.bulk_upload') }}" method="POST" enctype="multipart/form-data">
|
||||
@csrf
|
||||
<div class="modal-body">
|
||||
<div class="alert alert-info small shadow-sm">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<b>Format Kolom Excel (Baris 1 wajib Header):</b><br>
|
||||
Kolom A: Kode Cabang | Kolom B: Bulan | Kolom C: Nominal | Kolom D: Keterangan
|
||||
</div>
|
||||
<div>
|
||||
<a href="{{ route('budget_control.download_template') }}" class="btn btn-sm btn-light font-weight-bold shadow-sm text-info">
|
||||
<i class="fas fa-download mr-1"></i> Download Template
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="font-weight-bold small text-muted">METODE UPLOAD <span class="text-danger">*</span></label>
|
||||
<div class="d-flex">
|
||||
<div class="custom-control custom-radio mr-4">
|
||||
<input type="radio" id="type_region" name="upload_type" value="region" class="custom-control-input" checked onchange="toggleUploadType()">
|
||||
<label class="custom-control-label" for="type_region">Per Region</label>
|
||||
</div>
|
||||
<div class="custom-control custom-radio">
|
||||
<input type="radio" id="type_cabang" name="upload_type" value="cabang" class="custom-control-input" onchange="toggleUploadType()">
|
||||
<label class="custom-control-label" for="type_cabang">Pilih Cabang Tertentu</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 form-group" id="group_region">
|
||||
<label class="font-weight-bold small text-muted text-uppercase">Region <span class="text-danger">*</span></label>
|
||||
<select name="region_id" class="form-control select2_modal">
|
||||
<option value="">-- Pilih Region --</option>
|
||||
@foreach($regions as $reg)
|
||||
<option value="{{ $reg->id }}">{{ $reg->name }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 form-group d-none" id="group_cabang">
|
||||
<label class="font-weight-bold small text-muted text-uppercase">Cabang <span class="text-danger">*</span></label>
|
||||
<select name="cabang_id[]" class="form-control select2_modal" multiple="multiple" style="width: 100%;">
|
||||
@foreach($cabangOptions as $cab)
|
||||
<option value="{{ $cab->id }}">{{ $cab->code }} - {{ $cab->name }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 form-group">
|
||||
<label class="font-weight-bold small text-muted text-uppercase">Tahun Periode <span class="text-danger">*</span></label>
|
||||
<input type="number" name="periode_year" class="form-control" value="{{ date('Y') }}" required>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="font-weight-bold small text-muted">FILE UPLOAD (.xlsx, .xls, .csv) <span class="text-danger">*</span></label>
|
||||
<input type="file" name="file_excel" class="form-control-file" accept=".xlsx, .xls, .csv" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer bg-light" style="border-radius: 0 0 15px 15px;">
|
||||
<button type="button" class="btn btn-secondary shadow-sm" data-dismiss="modal">Batal</button>
|
||||
<button type="submit" class="btn btn-success shadow-sm"><i class="fas fa-check"></i> Proses Upload</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,125 +1,357 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title')
|
||||
Dashboard
|
||||
@section('title', 'Dashboard Operational Analytics')
|
||||
|
||||
@section('styles')
|
||||
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.7/css/dataTables.bootstrap4.min.css">
|
||||
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.2/css/buttons.bootstrap4.min.css">
|
||||
{{-- Tambahan CDN Select2 untuk menjamin inisialisasi select2 dropdown berjalan lancar --}}
|
||||
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ttskch/select2-bootstrap4-theme@x.x.x/dist/select2-bootstrap4.min.css">
|
||||
<style>
|
||||
.chart-container { position: relative; height: 300px; width: 100%; }
|
||||
.select2-container--bootstrap4 .select2-selection--single { height: calc(1.8125rem + 2px) !important; }
|
||||
#table-monitoring thead th a { color: inherit; text-decoration: none; display: block; width: 100%; }
|
||||
#table-monitoring tbody tr:hover { background-color: rgba(0,123,255,0.05); transition: 0.2s; }
|
||||
.section-title { border-left: 5px solid #007bff; padding-left: 15px; margin-bottom: 20px; font-weight: 700; color: #333; text-transform: uppercase; }
|
||||
.row-region-group { background-color: #f4f6f9 !important; border-top: 2px solid #dee2e6; }
|
||||
</style>
|
||||
@endsection
|
||||
|
||||
@section('admin-content')
|
||||
<section class="content-header">
|
||||
<div class="container-fluid">
|
||||
<div class="row mb-2">
|
||||
<div class="col-sm-6">
|
||||
<h1>Home</h1>
|
||||
<div class="container-fluid pt-5">
|
||||
|
||||
{{-- 1. HEADER & LIVE CLOCK --}}
|
||||
<div class="alert bg-primary text-white shadow-sm d-flex justify-content-between align-items-center mb-4" style="border-radius: 15px; border: none;">
|
||||
<div>
|
||||
<span class="font-weight-bold"><i class="fas fa-clock mr-2"></i> Waktu Sistem: </span>
|
||||
<span id="live-clock" class="badge badge-light text-primary px-3 py-2 shadow-sm" style="font-size: 0.95rem; border-radius: 10px;">
|
||||
Memuat...
|
||||
</span>
|
||||
</div>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="bg-white text-primary px-4 py-2 shadow-sm d-none d-md-block ml-3" style="border-radius: 50px;">
|
||||
<i class="far fa-calendar-alt mr-2"></i>
|
||||
<span class="font-weight-bold">Periode Input: {{ $periodeLabel ?? '-' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- 2. KARTU STATISTIK --}}
|
||||
<div class="row">
|
||||
<div class="col-lg-3 col-6 mb-3">
|
||||
<div class="small-box bg-info shadow-sm h-100" style="border-radius: 15px;">
|
||||
<div class="inner p-4"><h3>{{ $totalRegions ?? 0 }}</h3><p>Total Region</p></div>
|
||||
<div class="icon"><i class="fas fa-map-marked-alt"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-6 mb-3">
|
||||
<div class="small-box bg-success shadow-sm h-100" style="border-radius: 15px;">
|
||||
<div class="inner p-4"><h3>{{ $totalCabangs ?? 0 }}</h3><p>Cabang Aktif</p></div>
|
||||
<div class="icon"><i class="fas fa-building"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-6 mb-3">
|
||||
<div class="small-box bg-warning shadow-sm h-100" style="border-radius: 15px;">
|
||||
<div class="inner p-4 text-white"><h3>{{ $pendingCount ?? 0 }}</h3><p>Total Dokumen Pending</p></div>
|
||||
<div class="icon"><i class="fas fa-file-signature"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-6 mb-3">
|
||||
<div class="small-box bg-danger shadow-sm h-100" style="border-radius: 15px;">
|
||||
<div class="inner p-4">
|
||||
<h3>{{ $totalKategori ?? 0 }}</h3>
|
||||
<p>Master Kategori</p>
|
||||
</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 class="icon"><i class="fas fa-tags"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- FILTER KHUSUS GRAFIK PERFORMA --}}
|
||||
<div class="card shadow-sm mb-4 mt-2" style="border-radius: 15px; background-color: #f8f9fa; border-left: 5px solid #17a2b8;">
|
||||
<div class="card-body py-2 px-3">
|
||||
<form action="{{ route('admin.dashboard') }}" method="GET" id="chart-filter-form" class="m-0">
|
||||
<input type="hidden" name="region_id" value="{{ request('region_id') }}">
|
||||
<input type="hidden" name="cabang_id" value="{{ request('cabang_id') }}">
|
||||
<input type="hidden" name="category" value="{{ request('category') }}">
|
||||
<input type="hidden" name="search" value="{{ request('search') }}">
|
||||
|
||||
<div class="d-flex justify-content-between align-items-center flex-wrap">
|
||||
<h6 class="m-0 font-weight-bold text-info"><i class="fas fa-filter mr-2"></i>Filter Performa Closing Expense</h6>
|
||||
<div class="d-flex align-items-center mt-2 mt-md-0">
|
||||
<label class="small font-weight-bold text-muted mr-2 mb-0">Bulan:</label>
|
||||
<select name="chart_month" class="form-control form-control-sm mr-3" style="width: 130px;" onchange="this.form.submit()">
|
||||
<option value="">Semua Bulan</option>
|
||||
@foreach(range(1, 12) as $m)
|
||||
<option value="{{ sprintf('%02d', $m) }}" {{ (request('chart_month') ?? date('m')) == sprintf('%02d', $m) ? 'selected' : '' }}>
|
||||
{{ Carbon\Carbon::create()->month($m)->translatedFormat('F') }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
|
||||
<label class="small font-weight-bold text-muted mr-2 mb-0">Tahun:</label>
|
||||
<select name="chart_year" class="form-control form-control-sm" style="width: 100px;" onchange="this.form.submit()">
|
||||
@php $currentYear = date('Y'); @endphp
|
||||
@for($y = $currentYear; $y >= 2023; $y--)
|
||||
<option value="{{ $y }}" {{ (request('chart_year') ?? date('Y')) == $y ? 'selected' : '' }}>{{ $y }}</option>
|
||||
@endfor
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- 3. GRAFIK PERFORMA CLOSING EXPENSE --}}
|
||||
<h5 class="section-title mt-4">Respon Speed Expense</h5>
|
||||
<div class="row mt-2">
|
||||
<div class="col-md-6 mb-4">
|
||||
<div class="card shadow-sm h-100" style="border-radius: 15px;">
|
||||
<div class="card-header bg-white border-0 pt-3">
|
||||
<h3 class="card-title font-weight-bold text-success text-uppercase small"><i class="fas fa-bolt mr-2"></i> 5 Cabang Tercepat</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="chart-container"><canvas id="chartFastest"></canvas></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="content">
|
||||
<div class="container-fluid">
|
||||
<!-- Statistic Cards Grid -->
|
||||
<div class="row row-cols-2 row-cols-md-2 row-cols-lg-3 g-4">
|
||||
<!-- Statistic Card 1 -->
|
||||
<div class="col">
|
||||
<div class="small-box bg-info">
|
||||
<div class="inner">
|
||||
<h3>Rp {{ number_format($forms['vehicle'] + $forms['entertainment'] + $forms['meeting'] + $forms['upcountry'] + $forms['others'], 0, ',', '.') }}</h3>
|
||||
<p>All Approved Expenses</p>
|
||||
</div>
|
||||
<div class="icon">
|
||||
<i class="fas fa-check-circle"></i>
|
||||
</div>
|
||||
<a href="#" class="small-box-footer">
|
||||
More info <i class="fas fa-arrow-circle-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-md-6 mb-4">
|
||||
<div class="card shadow-sm h-100" style="border-radius: 15px;">
|
||||
<div class="card-header bg-white border-0 pt-3">
|
||||
<h3 class="card-title font-weight-bold text-danger text-uppercase small"><i class="fas fa-snail mr-2"></i> 5 Cabang Terlama</h3>
|
||||
</div>
|
||||
<!-- Statistic Card 2 -->
|
||||
<div class="col">
|
||||
<div class="small-box bg-success">
|
||||
<div class="inner">
|
||||
<h3>Rp {{ number_format($forms['upcountry'], 0, ',', '.') }}</h3>
|
||||
<p>Approved Up Country Expenses</p>
|
||||
</div>
|
||||
<div class="icon">
|
||||
<i class="fa fa-flag" aria-hidden="true"></i>
|
||||
</div>
|
||||
<a href="{{ route('forms.up-country') }}" class="small-box-footer">
|
||||
More info <i class="fas fa-arrow-circle-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Statistic Card 3 -->
|
||||
<div class="col">
|
||||
<div class="small-box bg-warning">
|
||||
<div class="inner text-white">
|
||||
<h3>Rp {{ number_format($forms['vehicle'], 0, ',', '.') }}</h3>
|
||||
<p>Approved Vehicle Running Cost Expenses</p>
|
||||
</div>
|
||||
<div class="icon">
|
||||
<i class="fa fa-car" aria-hidden="true"></i>
|
||||
</div>
|
||||
<a href="{{ route('forms.vehicle') }}" class="small-box-footer text-white">
|
||||
<span class="text-white">More info</span> <i class="fas fa-arrow-circle-right text-white"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Statistic Card 4 -->
|
||||
<div class="col">
|
||||
<div class="small-box bg-purple">
|
||||
<div class="inner">
|
||||
<h3>Rp {{ number_format($forms['entertainment'], 0, ',', '.') }}</h3>
|
||||
<p>Approved Entertainment Presentation Expenses</p>
|
||||
</div>
|
||||
<div class="icon">
|
||||
<i class="fa fa-desktop" aria-hidden="true"></i>
|
||||
</div>
|
||||
<a href="{{ route('forms.entertainment') }}" class="small-box-footer">
|
||||
More info <i class="fas fa-arrow-circle-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Statistic Card 5 -->
|
||||
<div class="col">
|
||||
<div class="small-box bg-danger">
|
||||
<div class="inner">
|
||||
<h3>Rp {{ number_format($forms['meeting'], 0, ',', '.') }}</h3>
|
||||
<p>Approved Meeting Seminar Expenses</p>
|
||||
</div>
|
||||
<div class="icon">
|
||||
<i class="fa fa-users" aria-hidden="true"></i>
|
||||
</div>
|
||||
<a href="{{ route('forms.meeting') }}" class="small-box-footer">
|
||||
More info <i class="fas fa-arrow-circle-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Statistic Card 6 -->
|
||||
<div class="col">
|
||||
<div class="small-box bg-pink">
|
||||
<div class="inner">
|
||||
<h3>Rp {{ number_format($forms['others'], 0, ',', '.') }}</h3>
|
||||
<p>Approved Other Expenses</p>
|
||||
</div>
|
||||
<div class="icon">
|
||||
<i class="fa fa-bars" aria-hidden="true"></i>
|
||||
</div>
|
||||
<a href="{{ route('forms.other') }}" class="small-box-footer">
|
||||
More info <i class="fas fa-arrow-circle-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Welcome Card -->
|
||||
<div class="card card-primary card-outline mt-4">
|
||||
<div class="card-body text-center">
|
||||
<p class="lead">Welcome to {{ config('app.name') }} (development version).</p>
|
||||
<div class="card-body">
|
||||
<div class="chart-container"><canvas id="chartSlowest"></canvas></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
{{-- 4. FILTER PANEL TABEL PENDING --}}
|
||||
<div class="card shadow-sm mb-4" style="border-radius: 15px;">
|
||||
<div class="card-body py-3">
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<h6 class="font-weight-bold text-muted m-0 small text-uppercase">Tabel Monitoring Dokumen Pending</h6>
|
||||
{{-- Container Tombol Excel --}}
|
||||
<div id="export-button-container"></div>
|
||||
</div>
|
||||
|
||||
<form action="{{ route('admin.dashboard') }}" method="GET" id="filter-form">
|
||||
<input type="hidden" name="chart_month" value="{{ request('chart_month') }}">
|
||||
<input type="hidden" name="chart_year" value="{{ request('chart_year') }}">
|
||||
|
||||
<div class="row align-items-end">
|
||||
<div class="col-md-3 mb-2 mb-md-0">
|
||||
<label class="small font-weight-bold text-muted text-uppercase">Region</label>
|
||||
<select name="region_id" class="form-control form-control-sm select2" onchange="this.form.submit()">
|
||||
<option value="">Semua Region</option>
|
||||
@foreach($regions as $reg)
|
||||
<option value="{{ $reg->id }}" {{ request('region_id') == $reg->id ? 'selected' : '' }}>{{ $reg->name }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-3 mb-2 mb-md-0">
|
||||
<label class="small font-weight-bold text-muted text-uppercase">Cabang</label>
|
||||
<select name="cabang_id" class="form-control form-control-sm select2" onchange="this.form.submit()">
|
||||
<option value="">Semua Cabang</option>
|
||||
@foreach($cabangOptions as $cab)
|
||||
<option value="{{ $cab->id }}" {{ request('cabang_id') == $cab->id ? 'selected' : '' }}>{{ $cab->name }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-3 mb-2 mb-md-0">
|
||||
<label class="small font-weight-bold text-muted text-uppercase">Highlight Kategori</label>
|
||||
<select name="category" class="form-control form-control-sm" onchange="this.form.submit()">
|
||||
<option value="">Pilih Kategori</option>
|
||||
@php
|
||||
$categories = [
|
||||
'up_country' => 'Up Country',
|
||||
'vehicle' => 'Vehicle Running Cost',
|
||||
'entertainment' => 'Entertainment',
|
||||
'meeting' => 'Meeting Seminar',
|
||||
'others' => 'Others'
|
||||
];
|
||||
@endphp
|
||||
@foreach($categories as $key => $val)
|
||||
<option value="{{ $key }}" {{ request('category') == $key ? 'selected' : '' }}>{{ $val }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="d-flex">
|
||||
<input type="text" name="search" class="form-control form-control-sm mr-2" placeholder="Cari..." value="{{ request('search') }}">
|
||||
<button type="submit" class="btn btn-sm btn-primary px-3 shadow-sm">Filter</button>
|
||||
<a href="{{ route('admin.dashboard') }}" class="btn btn-sm btn-secondary ml-1 shadow-sm" title="Reset Filter"><i class="fas fa-sync-alt"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- 5. TABEL MONITORING --}}
|
||||
<div class="card shadow-sm" style="border-radius: 15px; overflow: hidden;">
|
||||
<div class="card-body p-0 table-responsive">
|
||||
<table id="table-monitoring" class="table table-bordered m-0">
|
||||
<thead class="bg-light text-center small text-uppercase font-weight-bold">
|
||||
<tr>
|
||||
<th rowspan="2" class="align-middle">
|
||||
<a href="{{ request()->fullUrlWithQuery(['sort' => 'region', 'direction' => request('direction') == 'asc' ? 'desc' : 'asc']) }}">Region <i class="fas fa-sort ml-1 opacity-50"></i></a>
|
||||
</th>
|
||||
<th rowspan="2" class="align-middle text-left">
|
||||
<a href="{{ request()->fullUrlWithQuery(['sort' => 'name', 'direction' => request('direction') == 'asc' ? 'desc' : 'asc']) }}">Cabang <i class="fas fa-sort ml-1 opacity-50"></i></a>
|
||||
</th>
|
||||
<th colspan="5" class="bg-white text-center align-middle">Rincian Dokumen Pending</th>
|
||||
<th rowspan="2" class="align-middle text-center">
|
||||
<a href="{{ request()->fullUrlWithQuery(['sort' => 'total_pending', 'direction' => request('direction') == 'asc' ? 'desc' : 'asc']) }}">Total <i class="fas fa-sort ml-1 opacity-50"></i></a>
|
||||
</th>
|
||||
<th rowspan="2" class="align-middle no-export text-center">Aksi</th>
|
||||
</tr>
|
||||
<tr class="bg-white">
|
||||
<th class="{{ request('category') == 'up_country' ? 'bg-warning' : '' }}">UC</th>
|
||||
<th class="{{ request('category') == 'vehicle' ? 'bg-warning' : '' }}">VC</th>
|
||||
<th class="{{ request('category') == 'entertainment' ? 'bg-warning' : '' }}">EN</th>
|
||||
<th class="{{ request('category') == 'meeting' ? 'bg-warning' : '' }}">MT</th>
|
||||
<th class="{{ request('category') == 'others' ? 'bg-warning' : '' }}">OT</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="text-center">
|
||||
@php $currentRegion = null; @endphp
|
||||
@forelse($cabangDetails as $detail)
|
||||
@if($currentRegion != ($detail->region_id ?? null))
|
||||
<tr class="row-region-group">
|
||||
<td colspan="9" class="text-left font-weight-bold text-primary text-uppercase" style="letter-spacing: 1px;">
|
||||
<i class="fas fa-map-marked-alt mr-2 text-warning"></i> REGION: {{ $detail->region->name ?? 'TANPA REGION' }}
|
||||
</td>
|
||||
</tr>
|
||||
@php $currentRegion = $detail->region_id ?? null; @endphp
|
||||
@endif
|
||||
|
||||
<tr>
|
||||
<td class="text-left small text-muted"><i class="fas fa-level-up-alt fa-rotate-90 text-muted mr-1 ml-2"></i> {{ $detail->region->name ?? '-' }}</td>
|
||||
<td class="text-left font-weight-bold text-dark">{{ $detail->name }}</td>
|
||||
<td>{{ $detail->pending_details['up_country'] ?? 0 }}</td>
|
||||
<td>{{ $detail->pending_details['vehicle'] ?? 0 }}</td>
|
||||
<td>{{ $detail->pending_details['entertainment'] ?? 0 }}</td>
|
||||
<td>{{ $detail->pending_details['meeting'] ?? 0 }}</td>
|
||||
<td>{{ $detail->pending_details['others'] ?? 0 }}</td>
|
||||
<td class="bg-light font-weight-bold text-center align-middle">{{ $detail->total_pending }}</td>
|
||||
<td class="no-export text-center align-middle">
|
||||
<a href="{{ route('admin.dashboard.show', $detail->id) }}" class="btn btn-xs btn-info shadow-sm" title="Lihat Detail"><i class="fas fa-eye"></i></a>
|
||||
</td>
|
||||
</tr>
|
||||
@empty
|
||||
<tr>
|
||||
<td colspan="9" class="py-5 text-center text-muted">
|
||||
<i class="fas fa-info-circle mr-2"></i> Data tidak ditemukan untuk filter ini.
|
||||
</td>
|
||||
</tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="card-footer bg-white border-0 py-3">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
@if(isset($cabangDetails) && method_exists($cabangDetails, 'firstItem'))
|
||||
<div class="small text-muted">Menampilkan <b>{{ $cabangDetails->firstItem() ?? 0 }}</b> - <b>{{ $cabangDetails->lastItem() ?? 0 }}</b> dari <b>{{ $cabangDetails->total() ?? 0 }}</b> Cabang.</div>
|
||||
<div>{{ $cabangDetails->appends(request()->query())->links('pagination::bootstrap-4') }}</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@section('scripts')
|
||||
{{-- Library Wajib DataTables --}}
|
||||
<script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
|
||||
<script src="https://cdn.datatables.net/1.13.7/js/dataTables.bootstrap4.min.js"></script>
|
||||
{{-- Library Wajib untuk Tombol Export --}}
|
||||
<script src="https://cdn.datatables.net/buttons/2.4.2/js/dataTables.buttons.min.js"></script>
|
||||
<script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.bootstrap4.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
|
||||
<script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.html5.min.js"></script>
|
||||
{{-- Library Grafik --}}
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
|
||||
{{-- Library Select2 untuk keindahan select input --}}
|
||||
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
|
||||
|
||||
<script>
|
||||
// 1. LIVE CLOCK
|
||||
function updateClock() {
|
||||
const now = new Date();
|
||||
const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit' };
|
||||
const clockEl = document.getElementById('live-clock');
|
||||
if(clockEl) clockEl.innerText = now.toLocaleDateString('id-ID', options) + ' WIB';
|
||||
}
|
||||
setInterval(updateClock, 1000); updateClock();
|
||||
|
||||
$(document).ready(function() {
|
||||
// Inisialisasi Select2
|
||||
$('.select2').select2({
|
||||
theme: 'bootstrap4',
|
||||
width: '100%'
|
||||
});
|
||||
|
||||
// Hindari pesan error alert bawaan browser
|
||||
$.fn.dataTable.ext.errMode = 'none';
|
||||
|
||||
// Inisialisasi DataTable
|
||||
var table = $('#table-monitoring').DataTable({
|
||||
paging: false,
|
||||
searching: false,
|
||||
info: false,
|
||||
ordering: false,
|
||||
autoWidth: false,
|
||||
buttons: [
|
||||
{
|
||||
extend: 'excelHtml5',
|
||||
text: '<i class="fas fa-file-excel mr-1"></i> Export Excel',
|
||||
className: 'btn btn-sm btn-success font-weight-bold shadow-sm',
|
||||
title: 'Laporan Pending - {{ $periodeLabel ?? "Mei 2026" }}',
|
||||
exportOptions: {
|
||||
columns: ':not(.no-export)'
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
// Append tombol ke container
|
||||
if (table.buttons().container().length) {
|
||||
table.buttons().container().appendTo('#export-button-container');
|
||||
}
|
||||
});
|
||||
|
||||
// 3. CHARTS PERFORMA
|
||||
Chart.register(ChartDataLabels);
|
||||
|
||||
const configChart = (ctxId, labels, data, color, rawDurations) => {
|
||||
const ctx = document.getElementById(ctxId);
|
||||
if(!ctx || !labels || labels.length === 0) return;
|
||||
new Chart(ctx, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [{ data: data, backgroundColor: color, borderRadius: 8, barThickness: 20 }]
|
||||
},
|
||||
options: {
|
||||
indexAxis: 'y', responsive: true, maintainAspectRatio: false,
|
||||
layout: { padding: { right: 85 } },
|
||||
plugins: {
|
||||
legend: { display: false },
|
||||
datalabels: {
|
||||
anchor: 'end', align: 'right', color: '#444', font: { weight: 'bold', size: 10 },
|
||||
formatter: (val, ctx) => rawDurations[ctx.dataIndex] || ''
|
||||
}
|
||||
},
|
||||
scales: { x: { display: false }, y: { ticks: { font: { size: 10, weight: 'bold' } } } }
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
configChart('chartFastest', {!! json_encode($chartFastest['labels'] ?? []) !!}, {!! json_encode($chartFastest['data'] ?? []) !!}, '#28a745', {!! json_encode($chartFastest['raw'] ?? []) !!});
|
||||
configChart('chartSlowest', {!! json_encode($chartSlowest['labels'] ?? []) !!}, {!! json_encode($chartSlowest['data'] ?? []) !!}, '#dc3545', {!! json_encode($chartSlowest['raw'] ?? []) !!});
|
||||
</script>
|
||||
@endsection
|
||||
@@ -0,0 +1,42 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('admin-content')
|
||||
<div class="container-fluid">
|
||||
<div class="card shadow-sm mt-3">
|
||||
<div class="card-header bg-info text-white">
|
||||
<h3 class="card-title">Detail Pending: {{ $cabang->name }} ({{ $cabang->region->name ?? '' }})</h3>
|
||||
<div class="card-tools">
|
||||
<a href="{{ route('admin.dashboard') }}" class="btn btn-tool text-white"><i class="fas fa-times"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
{{-- Loop menggunakan variabel $data yang dikirim dari controller --}}
|
||||
@foreach($data as $label => $items)
|
||||
@if($items->count() > 0)
|
||||
<h5 class="mt-4 text-uppercase font-weight-bold text-secondary">{{ $label }}</h5>
|
||||
<table class="table table-sm table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>No. Expense</th>
|
||||
<th>Tanggal</th>
|
||||
<th>Total</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach($items as $item)
|
||||
<tr>
|
||||
<td>{{ $item->expense_number }}</td>
|
||||
<td>{{ \Carbon\Carbon::parse($item->tanggal)->format('d/m/Y') }}</td>
|
||||
<td>Rp {{ number_format($item->total, 0, ',', '.') }}</td>
|
||||
<td><span class="badge badge-warning">{{ $item->status }}</span></td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
@endif
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
@@ -1,11 +1,12 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title')
|
||||
Dashboard
|
||||
Dashboard
|
||||
@endsection
|
||||
|
||||
@section('admin-content')
|
||||
<script src="https://cdn.jsdelivr.net/npm/autonumeric@4.6.0/dist/autoNumeric.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
||||
|
||||
<section class="content-header">
|
||||
<div class="container-fluid">
|
||||
@@ -16,7 +17,6 @@
|
||||
<div class="col-sm-6">
|
||||
<ol class="breadcrumb float-sm-right">
|
||||
<li class="breadcrumb-item"><a href="{{ route('dashboard.index') }}">Dashboard</a></li>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
@@ -45,7 +45,7 @@
|
||||
<div class="container-fluid">
|
||||
<div class="card card-primary card-outline">
|
||||
<div class="card-body">
|
||||
<form id="expense-form" method="POST" action="{{ route('forms.entertainment.store') }}" enctype="multipart/form-data">
|
||||
<form id="expense-form" method="POST" action="{{ route('forms.entertainment.store') }}" enctype="multipart/form-data">
|
||||
@csrf
|
||||
@include('backend.layouts.partials.messages')
|
||||
<div class="row">
|
||||
@@ -57,7 +57,7 @@
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Jenis <span class="font-italic font-weight-normal">(required)</span></label>
|
||||
<select class="form-control form-control-md" name="jenis" required >
|
||||
<option value="">Pilih Jenis</option>
|
||||
<option value="" disabled {{ old('jenis') == '' ? 'selected' : '' }}>Pilih Jenis</option>
|
||||
<option value="entertainment" {{ old('jenis') == 'entertainment' ? 'selected' : '' }} >Entertainment</option>
|
||||
<option value="presentation" {{ old('jenis') == 'presentation' ? 'selected' : '' }}>Presentation</option>
|
||||
<option value="sponsorship" {{ old('jenis') == 'sponsorship' ? 'selected' : '' }}>Sponsorship</option>
|
||||
@@ -78,9 +78,25 @@
|
||||
<label class="form-label">Alamat <span class="font-italic font-weight-normal">(required)</span></label>
|
||||
<input type="text" class="form-control" name="alamat" id="alamat" required value="{{ old('alamat') }}">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<label>Nama Perusahaan <span class="font-italic font-weight-normal">(required)</span></label>
|
||||
<input type="text" name="nama_perusahaan" class="form-control" placeholder="Contoh: PT. Maju Jaya" required value="{{ old('nama_perusahaan') }}">
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label>Jabatan <span class="font-italic font-weight-normal">(required)</span></label>
|
||||
<input type="text" name="jabatan" class="form-control" placeholder="Contoh: Manager Operasional" required value="{{ old('jabatan') }}">
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label>Jenis Usaha <span class="font-italic font-weight-normal">(required)</span></label>
|
||||
<input type="text" name="jenis_usaha" class="form-control" placeholder="Contoh: Farmasi / Manufaktur" required value="{{ old('jenis_usaha') }}">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3 mt-3">
|
||||
<label class="form-label">Total <span class="font-italic font-weight-normal">(required)</span></label>
|
||||
<input type="string" class="form-control" name="total" id="total" required value="{{ old('total') }}">
|
||||
<input type="text" class="form-control" name="total" id="total" required value="{{ old('total') }}">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Keterangan <span class="font-italic font-weight-normal">(required)</span></label>
|
||||
@@ -122,13 +138,13 @@
|
||||
<button type="submit" class="btn btn-primary">Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</form>
|
||||
|
||||
<div id="loading-spinner-overlay" class="d-none">
|
||||
<div class="spinner-wrapper">
|
||||
<div class="spinner-border text-primary" role="status">
|
||||
</div>
|
||||
<p>Submitting, please wait...</p>
|
||||
<p class="mt-2">Submitting, please wait...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -137,21 +153,50 @@
|
||||
</section>
|
||||
|
||||
<script>
|
||||
new AutoNumeric('#total', {
|
||||
digitGroupSeparator: '.', // Pemisah ribuan
|
||||
decimalCharacter: ',', // Karakter desimal (tidak digunakan karena tanpa desimal)
|
||||
currencySymbol: 'Rp.', // Simbol mata uang
|
||||
decimalPlaces: 0, // Tidak ada angka desimal
|
||||
unformatOnSubmit: true // Nilai asli tanpa format saat dikirimkan
|
||||
});
|
||||
$(document).ready(function () {
|
||||
// 1. Inisialisasi AutoNumeric
|
||||
const totalInput = new AutoNumeric('#total', {
|
||||
digitGroupSeparator: '.', // Pemisah ribuan
|
||||
decimalCharacter: ',', // Karakter desimal
|
||||
currencySymbol: 'Rp. ', // Simbol mata uang
|
||||
decimalPlaces: 0, // Tidak ada angka desimal
|
||||
minimumValue: '0', // Cegah minus
|
||||
unformatOnSubmit: true // Nilai asli tanpa format saat dikirimkan
|
||||
});
|
||||
|
||||
document.getElementById('expense-form').addEventListener('submit', function (e) {
|
||||
const spinnerOverlay = document.getElementById('loading-spinner-overlay');
|
||||
spinnerOverlay.classList.remove('d-none'); // Show overlay
|
||||
spinnerOverlay.classList.add('d-flex'); // Use flexbox for centering
|
||||
// 2. Mencegah Scroll Mouse Wheel pada Input Nominal
|
||||
$('#total').on('wheel font-wheel', function(e) {
|
||||
e.preventDefault();
|
||||
$(this).blur();
|
||||
});
|
||||
|
||||
// 3. Interseptor Form Submit untuk Validasi Maksimal Rp 1 Juta
|
||||
$('#expense-form').on('submit', function (e) {
|
||||
e.preventDefault(); // Tahan pengiriman sementara
|
||||
const form = this;
|
||||
const spinnerOverlay = $('#loading-spinner-overlay');
|
||||
|
||||
// Ambil nilai nominal mentah dari AutoNumeric
|
||||
const totalExpense = totalInput.getNumber() || 0;
|
||||
|
||||
// Cek Aturan Bisnis: Tidak Boleh Lebih dari Rp 1.000.000
|
||||
if (totalExpense > 1000000) {
|
||||
Swal.fire({
|
||||
title: 'Nominal Melebihi Batas!',
|
||||
text: `Pengajuan Anda sebesar Rp ${new Intl.NumberFormat('id-ID').format(totalExpense)} melebihi batas maksimal yang diizinkan yaitu Rp 1.000.000. Mohon sesuaikan nominal Anda.`,
|
||||
icon: 'error',
|
||||
confirmButtonColor: '#d33',
|
||||
confirmButtonText: 'Revisi Angka'
|
||||
});
|
||||
} else {
|
||||
// Lolos Validasi -> Tampilkan Spinner & Eksekusi Submit
|
||||
spinnerOverlay.removeClass('d-none').addClass('d-flex');
|
||||
form.submit();
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
@include('backend.pages.forms.entertainment.partials.attachment-modal')
|
||||
@include('backend.pages.forms.entertainment.partials.attachment-scripts')
|
||||
@endsection
|
||||
@endsection
|
||||
@@ -1,11 +1,12 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title')
|
||||
Dashboard
|
||||
Dashboard
|
||||
@endsection
|
||||
|
||||
@section('admin-content')
|
||||
<script src="https://cdn.jsdelivr.net/npm/autonumeric@4.6.0/dist/autoNumeric.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
||||
|
||||
<section class="content-header">
|
||||
<div class="container-fluid">
|
||||
@@ -16,12 +17,12 @@
|
||||
<div class="col-sm-6">
|
||||
<ol class="breadcrumb float-sm-right">
|
||||
<li class="breadcrumb-item"><a href="{{ route('dashboard.index') }}">Dashboard</a></li>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
#loading-spinner-overlay {
|
||||
position: fixed;
|
||||
@@ -29,23 +30,20 @@
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
|
||||
z-index: 9999; /* High z-index to cover everything */
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.spinner-wrapper {
|
||||
text-align: center;
|
||||
color: white;
|
||||
}
|
||||
.spinner-wrapper { text-align: center; color: white; }
|
||||
</style>
|
||||
|
||||
<section class="content">
|
||||
<div class="container-fluid">
|
||||
<div class="card card-primary card-outline">
|
||||
<div class="card-body">
|
||||
<form id="expense-form" method="POST" action="{{ route('forms.entertainment.update', $form->id) }}" enctype="multipart/form-data">
|
||||
<form id="expense-form" method="POST" action="{{ route('forms.entertainment.update', $form->id) }}" enctype="multipart/form-data">
|
||||
@csrf
|
||||
@method('PUT')
|
||||
@include('backend.layouts.partials.messages')
|
||||
@@ -53,14 +51,15 @@
|
||||
<div class="col-lg-6">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Tanggal <span class="font-italic font-weight-normal">(required)</span></label>
|
||||
<input type="date" class="form-control" name="tanggal" required value="{{ $form->tanggal }}">
|
||||
{{-- Diubah menjadi input date murni --}}
|
||||
<input type="date" class="form-control" name="tanggal" required value="{{ \Carbon\Carbon::parse($form->tanggal)->format('Y-m-d') }}">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Jenis <span class="font-italic font-weight-normal">(required)</span></label>
|
||||
<select class="form-control form-control-md" name="jenis" required>
|
||||
<option value="">Pilih Jenis</option>
|
||||
<option value="entertainment" {{ $form->jenis == 'entertainment' ? 'selected' : '' }}>Entertainment</option>
|
||||
<option value="presentation" {{ $form->jenis == 'presentation' ? 'selected' : '' }}>Presentation</option>
|
||||
<option value="presentation" {{ $form->jenis == 'presentation' ? 'selected' : '' }}>Presentation</option>
|
||||
<option value="sponsorship" {{ $form->jenis == 'sponsorship' ? 'selected' : '' }}>Sponsorship</option>
|
||||
</select>
|
||||
</div>
|
||||
@@ -79,9 +78,25 @@
|
||||
<label class="form-label">Alamat <span class="font-italic font-weight-normal">(required)</span></label>
|
||||
<input type="text" class="form-control" name="alamat" id="alamat" required value="{{ $form->alamat }}">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<label>Nama Perusahaan <span class="font-italic font-weight-normal">(required)</span></label>
|
||||
<input type="text" name="nama_perusahaan" class="form-control" required value="{{ old('nama_perusahaan', $form->nama_perusahaan) }}">
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label>Jabatan <span class="font-italic font-weight-normal">(required)</span></label>
|
||||
<input type="text" name="jabatan" class="form-control" required value="{{ old('jabatan', $form->jabatan) }}">
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label>Jenis Usaha <span class="font-italic font-weight-normal">(required)</span></label>
|
||||
<input type="text" name="jenis_usaha" class="form-control" required value="{{ old('jenis_usaha', $form->jenis_usaha) }}">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3 mt-3">
|
||||
<label class="form-label">Total <span class="font-italic font-weight-normal">(required)</span></label>
|
||||
<input type="string" class="form-control" name="total" id="total" required value="{{ $form->total }}">
|
||||
<input type="text" class="form-control" name="total" id="total" required value="{{ $form->total }}">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Keterangan <span class="font-italic font-weight-normal">(required)</span></label>
|
||||
@@ -89,6 +104,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Lampiran Existing --}}
|
||||
<div class="col-12">
|
||||
<hr class="my-4">
|
||||
<h5 class="mb-3">Lampiran Saat Ini</h5>
|
||||
@@ -100,55 +116,41 @@
|
||||
<th>Nama File</th>
|
||||
<th style="width: 120px;" class="text-center">Preview</th>
|
||||
<th style="width: 120px;" class="text-center">Download</th>
|
||||
<th style="width: 100px;" class="text-center">Delete</th>
|
||||
<th style="width: 100px;" class="text-center">Aksi</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@forelse ($attachments as $attachment)
|
||||
<tr class="entertainment-attachment-row">
|
||||
<td>{{ $attachment['category_label'] ?? '-' }}</td>
|
||||
<td>{{ ucwords(str_replace('_', ' ', $attachment['file_category'])) }}</td>
|
||||
<td>{{ $attachment['filename'] }}</td>
|
||||
<td class="text-center">
|
||||
<button type="button"
|
||||
class="btn btn-sm btn-outline-secondary entertainment-preview-trigger"
|
||||
data-preview-type="{{ $attachment['preview_type'] }}"
|
||||
data-preview-source="{{ $attachment['preview_url'] ?? '' }}"
|
||||
data-download-url="{{ $attachment['download_url'] ?? '' }}"
|
||||
data-filename="{{ $attachment['filename'] }}">
|
||||
Preview
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary entertainment-preview-trigger"
|
||||
data-preview-type="{{ $attachment['preview_type'] }}"
|
||||
data-preview-source="{{ $attachment['preview_url'] }}"
|
||||
data-download-url="{{ $attachment['download_url'] }}"
|
||||
data-filename="{{ $attachment['filename'] }}">Preview</button>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<a href="{{ $attachment['download_url'] }}" class="btn btn-sm btn-outline-success" target="_blank">Download</a>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<button type="button" class="btn btn-sm btn-outline-danger entertainment-delete-existing-attachment"
|
||||
data-delete-url="{{ route('forms.entertainment.attachments.destroy', [$form->id, $attachment['id']]) }}">
|
||||
<i class="fas fa-trash"></i>
|
||||
</button>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
@if (!empty($attachment['download_url']))
|
||||
<a href="{{ $attachment['download_url'] }}" class="btn btn-sm btn-outline-success" target="_blank" rel="noopener">Download</a>
|
||||
@else
|
||||
<span class="text-muted">Tidak tersedia</span>
|
||||
@endif
|
||||
</td>
|
||||
<td class="text-center">
|
||||
@if (!empty($attachment['can_delete']))
|
||||
<button type="button"
|
||||
class="btn btn-sm btn-outline-danger entertainment-delete-existing-attachment"
|
||||
data-delete-url="{{ route('forms.entertainment.attachments.destroy', [$form->id, $attachment['id']]) }}">
|
||||
<i class="fas fa-trash"></i>
|
||||
</button>
|
||||
@else
|
||||
<span class="text-muted">Tidak tersedia</span>
|
||||
@endif
|
||||
</td>
|
||||
</tr>
|
||||
@empty
|
||||
<tr class="entertainment-empty-row">
|
||||
<td colspan="5" class="text-center text-muted">Belum ada attachment.</td>
|
||||
</tr>
|
||||
<tr class="text-center text-muted"><td colspan="5">Belum ada lampiran tersimpan.</td></tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<hr class="my-4">
|
||||
{{-- Lampiran Baru --}}
|
||||
<div class="col-12 mt-4">
|
||||
<div class="d-flex justify-content-between align-items-center mb-2">
|
||||
<h5 class="mb-0">Tambah Lampiran Baru</h5>
|
||||
<button type="button" class="btn btn-sm btn-primary" id="entertainment-add-attachment-row">
|
||||
@@ -156,7 +158,7 @@
|
||||
</button>
|
||||
</div>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered table-striped mb-0" id="entertainment-new-attachments-table" data-next-index="0">
|
||||
<table class="table table-bordered align-middle" id="entertainment-new-attachments-table">
|
||||
<thead class="bg-light">
|
||||
<tr>
|
||||
<th style="width: 30%;">Kategori</th>
|
||||
@@ -166,27 +168,21 @@
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="entertainment-empty-row">
|
||||
<td colspan="4" class="text-center text-muted">Belum ada attachment.</td>
|
||||
</tr>
|
||||
<tr class="entertainment-empty-row"><td colspan="4" class="text-center text-muted">Belum ada lampiran baru.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<small class="text-muted d-block mt-2">
|
||||
Maksimum 10 MB per file. Tidak diperbolehkan: {{ implode(', ', $entertainmentBlockedExtensions ?? []) }}.
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<div class="col-12 text-right mt-4">
|
||||
<button type="submit" class="btn btn-primary">Update</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</form>
|
||||
|
||||
<div id="loading-spinner-overlay" class="d-none">
|
||||
<div class="spinner-wrapper">
|
||||
<div class="spinner-border text-primary" role="status">
|
||||
</div>
|
||||
<div class="spinner-border text-primary" role="status"></div>
|
||||
<p>Submitting, please wait...</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -196,21 +192,37 @@
|
||||
</section>
|
||||
|
||||
<script>
|
||||
new AutoNumeric('#total', {
|
||||
digitGroupSeparator: '.', // Pemisah ribuan
|
||||
decimalCharacter: ',', // Karakter desimal (tidak digunakan karena tanpa desimal)
|
||||
currencySymbol: 'Rp.', // Simbol mata uang
|
||||
decimalPlaces: 0, // Tidak ada angka desimal
|
||||
unformatOnSubmit: true // Nilai asli tanpa format saat dikirimkan
|
||||
});
|
||||
$(document).ready(function() {
|
||||
// 1. Inisialisasi AutoNumeric Aman
|
||||
const totalInput = new AutoNumeric('#total', {
|
||||
digitGroupSeparator: '.',
|
||||
decimalCharacter: ',',
|
||||
currencySymbol: 'Rp. ',
|
||||
decimalPlaces: 0,
|
||||
minimumValue: '0',
|
||||
unformatOnSubmit: true
|
||||
});
|
||||
|
||||
document.getElementById('expense-form').addEventListener('submit', function (e) {
|
||||
const spinnerOverlay = document.getElementById('loading-spinner-overlay');
|
||||
spinnerOverlay.classList.remove('d-none'); // Show overlay
|
||||
spinnerOverlay.classList.add('d-flex'); // Use flexbox for centering
|
||||
// 2. Cegah Scroll Wheel pada Input
|
||||
$('#total').on('wheel', function(e) { e.preventDefault(); $(this).blur(); });
|
||||
|
||||
// 3. Interseptor Form Submit dengan Validasi 1 Juta
|
||||
$('#expense-form').on('submit', function (e) {
|
||||
const totalExpense = totalInput.getNumber() || 0;
|
||||
if (totalExpense > 1000000) {
|
||||
e.preventDefault();
|
||||
Swal.fire({
|
||||
title: 'Nominal Melebihi Batas!',
|
||||
text: 'Total pengajuan melebihi batas Rp 1.000.000. Mohon revisi nominal Anda.',
|
||||
icon: 'error'
|
||||
});
|
||||
} else {
|
||||
$('#loading-spinner-overlay').removeClass('d-none').addClass('d-flex');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
@include('backend.pages.forms.entertainment.partials.attachment-modal')
|
||||
@include('backend.pages.forms.entertainment.partials.attachment-scripts')
|
||||
@endsection
|
||||
@endsection
|
||||
File diff suppressed because it is too large
Load Diff
@@ -26,11 +26,11 @@
|
||||
<div class="container-fluid">
|
||||
<div class="card card-primary card-outline">
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<div>
|
||||
@include('backend.layouts.partials.messages')
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="mb-3">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">No Expense</label>
|
||||
<input type="text" class="form-control" name="expense_number" value="{{ $form->expense_number }}" readonly>
|
||||
</div>
|
||||
@@ -55,6 +55,10 @@
|
||||
<label class="form-label">NPWP / NIK</label>
|
||||
<input type="text" class="form-control" name="nik_or_npwp" id="nik_or_npwp" readonly value="{{ $form->nik_or_npwp }}">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Nama Perusahaan</label>
|
||||
<input type="text" class="form-control" name="nama_perusahaan" id="nama_perusahaan" readonly value="{{ $form->nama_perusahaan }}">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
@@ -62,6 +66,14 @@
|
||||
<label class="form-label">Alamat</label>
|
||||
<input type="text" class="form-control" name="alamat" id="alamat" readonly value="{{ $form->alamat }}">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Jabatan</label>
|
||||
<input type="text" class="form-control" name="jabatan" id="jabatan" readonly value="{{ $form->jabatan }}">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Jenis Usaha</label>
|
||||
<input type="text" class="form-control" name="jenis_usaha" id="jenis_usaha" readonly value="{{ $form->jenis_usaha }}">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Total</label>
|
||||
<input type="string" class="form-control" name="total" id="total" readonly value="{{ $form->total }}">
|
||||
@@ -118,7 +130,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-12">
|
||||
<div class="col-lg-12">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Status</label>
|
||||
<input type="text" class="form-control" name="status" value="{{ $form->status }}" readonly>
|
||||
@@ -130,196 +142,210 @@
|
||||
@if (auth()->user()->can('approval.approve') && $form->status == 'On Progress')
|
||||
<button type="button" class="btn btn-success final-approve-modal" data-id="{{ route('forms.entertainment.approve', $form->id) }}">Approve 1</button>
|
||||
|
||||
<button type="button"
|
||||
class="btn btn-danger open-reject-modal"
|
||||
data-action="{{ route('forms.entertainment.reject', $form->id) }}">
|
||||
Reject
|
||||
</button>
|
||||
<button type="button"
|
||||
class="btn btn-danger open-reject-modal"
|
||||
data-action="{{ route('forms.entertainment.reject', $form->id) }}">
|
||||
Reject
|
||||
</button>
|
||||
@elseif(auth()->user()->can('approval2.approve') && $form->status == 'Approved 1')
|
||||
<button type="button" class="btn btn-success open-approve-modal" data-id="{{ route('forms.entertainment.approve2', $form->id) }}">Approve 2</button>
|
||||
|
||||
<button type="button"
|
||||
class="btn btn-danger open-reject-modal"
|
||||
data-action="{{ route('forms.entertainment.reject', $form->id) }}">
|
||||
Reject
|
||||
</button>
|
||||
<button type="button"
|
||||
class="btn btn-danger open-reject-modal"
|
||||
data-action="{{ route('forms.entertainment.reject', $form->id) }}">
|
||||
Reject
|
||||
</button>
|
||||
@elseif(auth()->user()->can('final_approval.approve') && $form->status == 'Approved 2')
|
||||
<button type="button" class="btn btn-primary open-approve-modal" data-id="{{ route('forms.entertainment.final-approve', $form->id) }}">Final Approve</button>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<div class="modal fade" id="approveModal" tabindex="-1" role="dialog" aria-labelledby="approveModalLabel" 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">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<!-- Loading spinner -->
|
||||
<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 class="modal fade" id="approveModal" tabindex="-1" role="dialog" aria-labelledby="approveModalLabel" 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">×</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>
|
||||
|
||||
<!-- Modal content (hidden initially) -->
|
||||
<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>NIK/NPWP Penerima:</strong> <span id="nik_or_npwp"></span>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<strong>Tanggal:</strong> <span id="tanggal"></span>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<strong>Nama Penerima:</strong> <span id="name"></span>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<strong>Jenis:</strong> <span id="jenis"></span>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<strong>Keterangan:</strong> <span id="keterangan"></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 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="modal_expense_number"></span>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<strong>User:</strong> <span id="modal_user"></span>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<strong>NIK/NPWP Penerima:</strong> <span id="modal_nik_or_npwp"></span>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<strong>Nama Perusahaan:</strong> <span id="modal_nama_perusahaan"></span>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<strong>Jabatan:</strong> <span id="modal_jabatan"></span>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<strong>Jenis Usaha:</strong> <span id="modal_jenis_usaha"></span>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<strong>Tanggal:</strong> <span id="modal_tanggal"></span>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<strong>Nama Penerima:</strong> <span id="modal_name"></span>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<strong>Jenis:</strong> <span id="modal_jenis"></span>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<strong>Keterangan:</strong> <span id="modal_keterangan"></span>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<strong>Bukti Total:</strong> <span id="modal_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>
|
||||
</section>
|
||||
<section>
|
||||
<div class="modal fade" id="finalApproveModal" tabindex="-1" role="dialog" aria-labelledby="finalApproveModalLabel" 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="approveModalLabel">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">
|
||||
<!-- Loading spinner -->
|
||||
<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 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>
|
||||
</section>
|
||||
<section>
|
||||
<div class="modal fade" id="finalApproveModal" tabindex="-1" role="dialog" aria-labelledby="finalApproveModalLabel" 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">×</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>
|
||||
|
||||
<!-- Modal content (hidden initially) -->
|
||||
<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>NIK/NPWP Penerima:</strong> <span id="final_nik_or_npwp"></span>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<strong>Tanggal:</strong> <span id="final_tanggal"></span>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<strong>Nama Penerima:</strong> <span id="final_name"></span>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<strong>Jenis:</strong> <span id="final_jenis"></span>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<strong>Keterangan:</strong> <span id="final_keterangan"></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>
|
||||
</ul>
|
||||
</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>NIK/NPWP Penerima:</strong> <span id="final_nik_or_npwp"></span>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<strong>Nama Perusahaan:</strong> <span id="final_nama_perusahaan"></span>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<strong>Jabatan:</strong> <span id="final_jabatan"></span>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<strong>Jenis Usaha:</strong> <span id="final_jenis_usaha"></span>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<strong>Tanggal:</strong> <span id="final_tanggal"></span>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<strong>Nama Penerima:</strong> <span id="final_name"></span>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<strong>Jenis:</strong> <span id="final_jenis"></span>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<strong>Keterangan:</strong> <span id="final_keterangan"></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>
|
||||
</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>
|
||||
</section>
|
||||
<section>
|
||||
<div class="modal fade" id="rejectModal" tabindex="-1" role="dialog" aria-labelledby="rejectModalLabel" 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">×</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>
|
||||
</section>
|
||||
<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>
|
||||
</section>
|
||||
<section>
|
||||
<div class="modal fade" id="rejectModal" tabindex="-1" role="dialog" aria-labelledby="rejectModalLabel" 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">×</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>
|
||||
</section>
|
||||
@endsection
|
||||
|
||||
@section('scripts')
|
||||
@@ -329,7 +355,7 @@
|
||||
decimalCharacter: ',', // Karakter desimal (tidak digunakan karena tanpa desimal)
|
||||
currencySymbol: 'Rp.', // Simbol mata uang
|
||||
decimalPlaces: 0, // Tidak ada angka desimal
|
||||
unformatOnSubmit: true // Nilai asli tanpa format saat dikirimkan
|
||||
unformatOnSubmit: true // Nilai asli tanpa format saat dikirimkan
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -351,131 +377,141 @@
|
||||
});
|
||||
|
||||
$(document).on('click', '.open-approve-modal', function() {
|
||||
const approveUrl = $(this).data('id');
|
||||
const approveUrl = $(this).data('id');
|
||||
|
||||
// Show spinner and hide content initially
|
||||
$('#loadingSpinner').show();
|
||||
$('#modalContent').addClass('d-none');
|
||||
// Show spinner and hide content initially
|
||||
$('#loadingSpinner').show();
|
||||
$('#modalContent').addClass('d-none');
|
||||
|
||||
$('#approveForm').attr('action', approveUrl); // Set the form action
|
||||
$('#loadingSpinner').addClass('d-flex');
|
||||
$('#approveModal').modal('show'); // Show the modal
|
||||
$('#approveForm').attr('action', approveUrl); // Set the form action
|
||||
$('#loadingSpinner').addClass('d-flex');
|
||||
$('#approveModal').modal('show'); // Show the modal
|
||||
|
||||
// Get detail from /forms/entertainment/detail/{id}
|
||||
$.get(approveUrl.replace(/approve2|final-approve/g, 'detail'), function (data) {
|
||||
const formatter = new Intl.NumberFormat('id-ID', {
|
||||
style: 'currency',
|
||||
currency: 'IDR',
|
||||
minimumFractionDigits: 0
|
||||
});
|
||||
// Get detail from /forms/entertainment/detail/{id}
|
||||
$.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));
|
||||
$('#total_value').text(formatter.format(data.total));
|
||||
|
||||
// Detail data
|
||||
$('#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'
|
||||
}));
|
||||
// Detail data
|
||||
$('#modal_user').text(data.user.name);
|
||||
$('#modal_expense_number').text(data.expense_number);
|
||||
$('#modal_tanggal').text(new Date(data.created_at).toLocaleDateString('id-ID', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric'
|
||||
}));
|
||||
|
||||
$('#nik_or_npwp').text(data.nik_or_npwp);
|
||||
$('#name').text(data.name);
|
||||
$('#jenis').text(data.jenis);
|
||||
$('#keterangan').text(data.keterangan);
|
||||
$('#modal_nik_or_npwp').text(data.nik_or_npwp);
|
||||
|
||||
// Tambahan Mapping Data Perusahaan
|
||||
$('#modal_nama_perusahaan').text(data.nama_perusahaan || '-');
|
||||
$('#modal_jabatan').text(data.jabatan || '-');
|
||||
$('#modal_jenis_usaha').text(data.jenis_usaha || '-');
|
||||
|
||||
$('#modal_name').text(data.name);
|
||||
$('#modal_jenis').text(data.jenis);
|
||||
$('#modal_keterangan').text(data.keterangan);
|
||||
|
||||
$('#bukti_total').html(data.total ? '<a href="' + data.total + '" target="_blank">Download</a>' : '-');
|
||||
$('#modal_bukti_total').html(data.total ? '<a href="' + data.total + '" target="_blank">Download</a>' : '-');
|
||||
|
||||
// Hide spinner and show content
|
||||
$('#loadingSpinner').hide();
|
||||
$('#loadingSpinner').removeClass('d-flex');
|
||||
$('#loadingSpinner').addClass('d-none');
|
||||
$('#modalContent').removeClass('d-none');
|
||||
// Hide spinner and show content
|
||||
$('#loadingSpinner').hide();
|
||||
$('#loadingSpinner').removeClass('d-flex');
|
||||
$('#loadingSpinner').addClass('d-none');
|
||||
$('#modalContent').removeClass('d-none');
|
||||
|
||||
// Reset the total to zero
|
||||
$('#total').val(0);
|
||||
});
|
||||
});
|
||||
// Reset the total to zero
|
||||
$('#total').val(0);
|
||||
});
|
||||
});
|
||||
|
||||
// Handle Approve Button Click
|
||||
$(document).on('click', '.final-approve-modal', function() {
|
||||
const approveUrl = $(this).data('id');
|
||||
// Handle Approve Button Click
|
||||
$(document).on('click', '.final-approve-modal', function() {
|
||||
const approveUrl = $(this).data('id');
|
||||
|
||||
// Show spinner and hide content initially
|
||||
$('#finalLoadingSpinner').show();
|
||||
$('#finalModalContent').addClass('d-none');
|
||||
// Show spinner and hide content initially
|
||||
$('#finalLoadingSpinner').show();
|
||||
$('#finalModalContent').addClass('d-none');
|
||||
|
||||
$('#finalApproveForm').attr('action', approveUrl); // Set the form action
|
||||
$('#finalLoadingSpinner').addClass('d-flex');
|
||||
$('#finalApproveModal').modal('show'); // Show the modal
|
||||
$('#finalApproveForm').attr('action', approveUrl); // Set the form action
|
||||
$('#finalLoadingSpinner').addClass('d-flex');
|
||||
$('#finalApproveModal').modal('show'); // Show the modal
|
||||
|
||||
// Get detail from /forms/entertainment/detail/{id}
|
||||
$.get(approveUrl.replace('approve', 'detail'), function (data) {
|
||||
console.log(data);
|
||||
const formatter = new Intl.NumberFormat('id-ID', {
|
||||
style: 'currency',
|
||||
currency: 'IDR',
|
||||
minimumFractionDigits: 0
|
||||
});
|
||||
// Get detail from /forms/entertainment/detail/{id}
|
||||
$.get(approveUrl.replace('approve', 'detail'), function (data) {
|
||||
console.log(data);
|
||||
const formatter = new Intl.NumberFormat('id-ID', {
|
||||
style: 'currency',
|
||||
currency: 'IDR',
|
||||
minimumFractionDigits: 0
|
||||
});
|
||||
|
||||
$('#final_total_value').text(formatter.format(data.total));
|
||||
$('#final_total_value').text(formatter.format(data.total));
|
||||
|
||||
// Assign data values to checkboxes
|
||||
$('#final_total').data('value', data.total);
|
||||
// Assign data values to checkboxes
|
||||
$('#final_total').data('value', data.total);
|
||||
|
||||
// Detail data
|
||||
$('#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'
|
||||
}));
|
||||
// Detail data
|
||||
$('#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_nik_or_npwp').text(data.nik_or_npwp);
|
||||
$('#final_name').text(data.name);
|
||||
$('#final_jenis').text(data.jenis);
|
||||
$('#final_keterangan').text(data.keterangan);
|
||||
$('#final_nik_or_npwp').text(data.nik_or_npwp);
|
||||
|
||||
// Tambahan Mapping Data Perusahaan
|
||||
$('#final_nama_perusahaan').text(data.nama_perusahaan || '-');
|
||||
$('#final_jabatan').text(data.jabatan || '-');
|
||||
$('#final_jenis_usaha').text(data.jenis_usaha || '-');
|
||||
|
||||
$('#final_name').text(data.name);
|
||||
$('#final_jenis').text(data.jenis);
|
||||
$('#final_keterangan').text(data.keterangan);
|
||||
|
||||
$('#final_bukti_total').html(data.bukti_total ? '<a href="' + data.bukti_total + '" target="_blank">Download</a>' : '-');
|
||||
|
||||
$('#final_bukti_total').html(data.bukti_total ? '<a href="' + data.bukti_total + '" target="_blank">Download</a>' : '-');
|
||||
// Hide spinner and show content
|
||||
$('#finalLoadingSpinner').hide();
|
||||
$('#finalLoadingSpinner').removeClass('d-flex');
|
||||
$('#finalLoadingSpinner').addClass('d-none');
|
||||
$('#finalModalContent').removeClass('d-none');
|
||||
|
||||
// Hide spinner and show content
|
||||
$('#finalLoadingSpinner').hide();
|
||||
$('#finalLoadingSpinner').removeClass('d-flex');
|
||||
$('#finalLoadingSpinner').addClass('d-none');
|
||||
$('#finalModalContent').removeClass('d-none');
|
||||
// Reset the total to zero
|
||||
$('#total').val(0);
|
||||
});
|
||||
});
|
||||
|
||||
// Reset the total to zero
|
||||
$('#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);
|
||||
});
|
||||
|
||||
// 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,
|
||||
});
|
||||
|
||||
const formatter = new Intl.NumberFormat('id-ID', {
|
||||
style: 'currency',
|
||||
currency: 'IDR',
|
||||
minimumFractionDigits: 0,
|
||||
});
|
||||
$('#total').val(formatter.format(total));
|
||||
});
|
||||
|
||||
$('#total').val(formatter.format(total));
|
||||
});
|
||||
|
||||
|
||||
// Uncheck all checkboxes when the modal is closed
|
||||
$('#finalApproveModal').on('hidden.bs.modal', function () {
|
||||
$('.custom-control-input').prop('checked', false); // Uncheck all checkboxes
|
||||
$('#total').val('0'); // Reset total to 0
|
||||
});
|
||||
// Uncheck all checkboxes when the modal is closed
|
||||
$('#finalApproveModal').on('hidden.bs.modal', function () {
|
||||
$('.custom-control-input').prop('checked', false); // Uncheck all checkboxes
|
||||
$('#total').val('0'); // Reset total to 0
|
||||
});
|
||||
</script>
|
||||
|
||||
@include('backend.pages.forms.entertainment.partials.attachment-modal')
|
||||
@include('backend.pages.forms.entertainment.partials.attachment-scripts')
|
||||
@endsection
|
||||
@endsection
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,11 +1,12 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title')
|
||||
Dashboard
|
||||
Dashboard
|
||||
@endsection
|
||||
|
||||
@section('admin-content')
|
||||
<script src="https://cdn.jsdelivr.net/npm/autonumeric@4.6.0/dist/autoNumeric.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
||||
|
||||
<section class="content-header">
|
||||
<div class="container-fluid">
|
||||
@@ -45,7 +46,7 @@
|
||||
<div class="container-fluid">
|
||||
<div class="card card-primary card-outline">
|
||||
<div class="card-body">
|
||||
<form id="expense-form" method="POST" action="{{ route('forms.other.store') }}" enctype="multipart/form-data">
|
||||
<form id="expense-form" method="POST" action="{{ route('forms.other.store') }}" enctype="multipart/form-data">
|
||||
@csrf
|
||||
@include('backend.layouts.partials.messages')
|
||||
<div class="row">
|
||||
@@ -82,7 +83,7 @@
|
||||
<div class="mb-3">
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<label class="form-label mb-0">Lampiran</label>
|
||||
<button type="button" class="btn btn-outline-primary btn-sm" id="other-add-attachment-row">
|
||||
<button type="button" class="btn btn-slate-custom btn-outline-primary btn-sm" id="other-add-attachment-row">
|
||||
<i class="fas fa-plus mr-1"></i> Tambah Lampiran
|
||||
</button>
|
||||
</div>
|
||||
@@ -113,7 +114,7 @@
|
||||
<button type="submit" class="btn btn-primary ml-2">Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</form>
|
||||
|
||||
@include('backend.components.attachment-preview-modal', [
|
||||
'modalId' => 'otherAttachmentPreviewModal',
|
||||
@@ -133,19 +134,44 @@
|
||||
</section>
|
||||
|
||||
<script>
|
||||
new AutoNumeric('#total', {
|
||||
// 1. Inisialisasi AutoNumeric dengan batasan angka minimum nol
|
||||
const totalAutoNumeric = new AutoNumeric('#total', {
|
||||
digitGroupSeparator: '.',
|
||||
decimalCharacter: ',',
|
||||
currencySymbol: 'Rp.',
|
||||
decimalPlaces: 0,
|
||||
minimumValue: '0',
|
||||
unformatOnSubmit: true
|
||||
});
|
||||
|
||||
// 2. Mematikan sliding wheel mouse (scrolling) pada kolom input nominal angka
|
||||
document.getElementById('total').addEventListener('wheel', function (e) {
|
||||
e.preventDefault();
|
||||
this.blur();
|
||||
});
|
||||
|
||||
const spinnerOverlay = document.getElementById('loading-spinner-overlay');
|
||||
|
||||
document.getElementById('expense-form').addEventListener('submit', function () {
|
||||
spinnerOverlay.classList.remove('d-none');
|
||||
spinnerOverlay.classList.add('d-flex');
|
||||
// 3. Interseptor Validasi Submit Form dengan Batasan Nilai Rp 1.000.000 bersih
|
||||
document.getElementById('expense-form').addEventListener('submit', function (e) {
|
||||
// Mengambil angka murni tanpa format simbol dari instance AutoNumeric
|
||||
const rawTotalValue = totalAutoNumeric.getNumber() || 0;
|
||||
|
||||
if (rawTotalValue > 1000000) {
|
||||
e.preventDefault(); // Batalkan pengiriman form ke route backend
|
||||
|
||||
Swal.fire({
|
||||
title: 'Batas Angka Terlampaui!',
|
||||
text: 'Pengajuan nominal Expense Other tidak diperbolehkan melebihi batas Rp 1.000.000. Mohon periksa kembali input Anda.',
|
||||
icon: 'error',
|
||||
confirmButtonColor: '#d33',
|
||||
confirmButtonText: 'Revisi Data'
|
||||
});
|
||||
} else {
|
||||
// Lolos validasi, aktifkan spinner overlay UI
|
||||
spinnerOverlay.classList.remove('d-none');
|
||||
spinnerOverlay.classList.add('d-flex');
|
||||
}
|
||||
});
|
||||
|
||||
const attachmentCategories = @json($attachmentCategories ?? ($otherAttachmentCategories ?? []));
|
||||
@@ -394,4 +420,4 @@
|
||||
addOtherAttachmentRow();
|
||||
});
|
||||
</script>
|
||||
@endsection
|
||||
@endsection
|
||||
@@ -1,7 +1,7 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title')
|
||||
Dashboard
|
||||
Dashboard
|
||||
@endsection
|
||||
|
||||
@section('admin-content')
|
||||
@@ -45,7 +45,7 @@
|
||||
<div class="container-fluid">
|
||||
<div class="card card-primary card-outline">
|
||||
<div class="card-body">
|
||||
<form id="expense-form" method="POST" action="{{ route('forms.other.update', $form->id) }}" enctype="multipart/form-data">
|
||||
<form id="expense-form" method="POST" action="{{ route('forms.other.update', $form->id) }}" enctype="multipart/form-data">
|
||||
@csrf
|
||||
@method('PUT')
|
||||
@include('backend.layouts.partials.messages')
|
||||
@@ -169,7 +169,7 @@
|
||||
<button type="submit" class="btn btn-primary ml-2">Update</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</form>
|
||||
|
||||
@include('backend.components.attachment-preview-modal', [
|
||||
'modalId' => 'otherExistingAttachmentPreviewModal',
|
||||
@@ -195,18 +195,44 @@
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
||||
<script>
|
||||
new AutoNumeric('#total', {
|
||||
// 1. Inisialisasi AutoNumeric dengan batasan angka minimum nol
|
||||
const totalAutoNumeric = new AutoNumeric('#total', {
|
||||
digitGroupSeparator: '.',
|
||||
decimalCharacter: ',',
|
||||
currencySymbol: 'Rp.',
|
||||
decimalPlaces: 0,
|
||||
minimumValue: '0',
|
||||
unformatOnSubmit: true
|
||||
});
|
||||
|
||||
// 2. Mematikan sliding wheel mouse (scrolling) pada kolom input nominal angka
|
||||
document.getElementById('total').addEventListener('wheel', function (e) {
|
||||
e.preventDefault();
|
||||
this.blur();
|
||||
});
|
||||
|
||||
const spinnerOverlay = document.getElementById('loading-spinner-overlay');
|
||||
|
||||
document.getElementById('expense-form').addEventListener('submit', function () {
|
||||
spinnerOverlay.classList.remove('d-none');
|
||||
spinnerOverlay.classList.add('d-flex');
|
||||
// 3. Interseptor Validasi Submit Form dengan Batasan Nilai Rp 1.000.000 bersih
|
||||
document.getElementById('expense-form').addEventListener('submit', function (e) {
|
||||
// Mengambil angka murni tanpa format simbol dari instance AutoNumeric
|
||||
const rawTotalValue = totalAutoNumeric.getNumber() || 0;
|
||||
|
||||
if (rawTotalValue > 1000000) {
|
||||
e.preventDefault(); // Batalkan pengiriman form ke route backend
|
||||
|
||||
Swal.fire({
|
||||
title: 'Batas Angka Terlampaui!',
|
||||
text: 'Pengajuan nominal Expense Other tidak diperbolehkan melebihi batas Rp 1.000.000. Mohon periksa kembali input Anda.',
|
||||
icon: 'error',
|
||||
confirmButtonColor: '#d33',
|
||||
confirmButtonText: 'Revisi Data'
|
||||
});
|
||||
} else {
|
||||
// Lolos validasi, aktifkan spinner overlay UI
|
||||
spinnerOverlay.classList.remove('d-none');
|
||||
spinnerOverlay.classList.add('d-flex');
|
||||
}
|
||||
});
|
||||
|
||||
const attachmentCategories = @json($attachmentCategories ?? ($otherAttachmentCategories ?? []));
|
||||
@@ -543,4 +569,4 @@
|
||||
addOtherNewAttachmentRow();
|
||||
});
|
||||
</script>
|
||||
@endsection
|
||||
@endsection
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,11 +1,13 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title')
|
||||
Dashboard
|
||||
Dashboard
|
||||
@endsection
|
||||
|
||||
@section('admin-content')
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/autonumeric@4.6.0/dist/autoNumeric.min.js"></script>
|
||||
|
||||
<section class="content-header">
|
||||
<div class="container-fluid">
|
||||
<div class="row mb-2">
|
||||
@@ -15,12 +17,12 @@
|
||||
<div class="col-sm-6">
|
||||
<ol class="breadcrumb float-sm-right">
|
||||
<li class="breadcrumb-item"><a href="{{ route('dashboard.index') }}">Dashboard</a></li>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
#loading-spinner-overlay {
|
||||
position: fixed;
|
||||
@@ -28,8 +30,8 @@
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
|
||||
z-index: 9999; /* High z-index to cover everything */
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@@ -40,15 +42,17 @@
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
|
||||
@php
|
||||
$attachmentCategoryLabels = $attachmentCategoryLabels ?? ($upCountryAttachmentCategories ?? []);
|
||||
$attachmentCategories = $attachmentCategories ?? ($upCountryAttachmentCategoryKeys ?? array_keys($attachmentCategoryLabels));
|
||||
@endphp
|
||||
|
||||
<section class="content">
|
||||
<div class="container-fluid">
|
||||
<div class="card card-primary card-outline">
|
||||
<div class="card-body">
|
||||
<form id="expense-form" method="POST" action="{{ route('forms.up-country.store') }}" enctype="multipart/form-data">
|
||||
<form id="expense-form" method="POST" action="{{ route('forms.up-country.store') }}" enctype="multipart/form-data">
|
||||
@csrf
|
||||
@include('backend.layouts.partials.messages')
|
||||
<div class="row">
|
||||
@@ -78,22 +82,22 @@
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Allowance <span class="font-italic font-weight-normal">(optional)</span></label>
|
||||
<input type="string" class="form-control" name="allowance" id="allowance" value="{{ old('allowance') }}">
|
||||
<input type="text" class="form-control autonumeric-input" name="allowance" id="allowance" value="{{ old('allowance') }}">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Transport Dalam Kota <span class="font-italic font-weight-normal">(optional)</span></label>
|
||||
<input type="string" class="form-control" name="transport_dalkot" id="transport_dalkot" value="{{ old('transport_dalkot') }}">
|
||||
<input type="text" class="form-control autonumeric-input" name="transport_dalkot" id="transport_dalkot" value="{{ old('transport_dalkot') }}">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Transport Antar Kota <span class="font-italic font-weight-normal">(optional)</span></label>
|
||||
<input type="string" class="form-control" name="transport_ankot" id="transport_ankot" value="{{ old('transport_ankot') }}">
|
||||
<input type="text" class="form-control autonumeric-input" name="transport_ankot" id="transport_ankot" value="{{ old('transport_ankot') }}">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Hotel <span class="font-italic font-weight-normal">(optional)</span></label>
|
||||
<input type="string" class="form-control" name="hotel" id="hotel" value="{{ old('hotel') }}">
|
||||
<input type="text" class="form-control autonumeric-input" name="hotel" id="hotel" value="{{ old('hotel') }}">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -137,7 +141,7 @@
|
||||
|
||||
<button type="submit" class="btn btn-primary ml-2">Submit</button>
|
||||
</div>
|
||||
</form>
|
||||
</form>
|
||||
|
||||
@include('backend.components.attachment-preview-modal', [
|
||||
'modalId' => 'newAttachmentPreviewModal',
|
||||
@@ -146,256 +150,284 @@
|
||||
|
||||
<div id="loading-spinner-overlay" class="d-none">
|
||||
<div class="spinner-wrapper">
|
||||
<div class="spinner-border text-primary" role="status">
|
||||
</div>
|
||||
<p>Sedang mengirim, mohon tunggu...</p>
|
||||
<div class="spinner-border text-primary" role="status"></div>
|
||||
<p class="mt-2">Sedang mengirim, mohon tunggu...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@endsection
|
||||
|
||||
@section('scripts')
|
||||
<script>
|
||||
new AutoNumeric('#allowance', {
|
||||
digitGroupSeparator: '.',
|
||||
decimalCharacter: ',',
|
||||
currencySymbol: 'Rp.',
|
||||
decimalPlaces: 0,
|
||||
unformatOnSubmit: true
|
||||
});
|
||||
|
||||
new AutoNumeric('#transport_dalkot', {
|
||||
digitGroupSeparator: '.',
|
||||
decimalCharacter: ',',
|
||||
currencySymbol: 'Rp.',
|
||||
decimalPlaces: 0,
|
||||
unformatOnSubmit: true
|
||||
});
|
||||
|
||||
new AutoNumeric('#transport_ankot', {
|
||||
digitGroupSeparator: '.',
|
||||
decimalCharacter: ',',
|
||||
currencySymbol: 'Rp.',
|
||||
decimalPlaces: 0,
|
||||
unformatOnSubmit: true
|
||||
});
|
||||
|
||||
new AutoNumeric('#hotel', {
|
||||
digitGroupSeparator: '.',
|
||||
decimalCharacter: ',',
|
||||
currencySymbol: 'Rp.',
|
||||
decimalPlaces: 0,
|
||||
unformatOnSubmit: true
|
||||
});
|
||||
|
||||
const attachmentCategories = @json($attachmentCategories ?? ($upCountryAttachmentCategoryKeys ?? []));
|
||||
const attachmentCategoryLabels = @json($attachmentCategoryLabels ?? ($upCountryAttachmentCategories ?? []));
|
||||
const fileAccept = '.jpg,.jpeg,.png,.pdf';
|
||||
let attachmentIndex = 0;
|
||||
|
||||
function categoryToLabel(value) {
|
||||
if (!value) {
|
||||
return 'Pilih Kategori';
|
||||
}
|
||||
|
||||
if (attachmentCategoryLabels && attachmentCategoryLabels[value]) {
|
||||
return attachmentCategoryLabels[value];
|
||||
}
|
||||
|
||||
return value
|
||||
.replace(/_/g, ' ')
|
||||
.replace(/\b\w/g, (char) => char.toUpperCase());
|
||||
}
|
||||
|
||||
function buildCategoryOptions() {
|
||||
return attachmentCategories
|
||||
.map((category) => `<option value="${category}">${categoryToLabel(category)}</option>`)
|
||||
.join('');
|
||||
}
|
||||
|
||||
function resetInlinePreview($row) {
|
||||
$row
|
||||
.find('.attachment-inline-preview')
|
||||
.removeClass('bg-light')
|
||||
.html('<i class="fas fa-file-upload text-muted"></i>');
|
||||
}
|
||||
|
||||
function clearRowData($row) {
|
||||
const existingUrl = $row.data('objectUrl');
|
||||
if (existingUrl) {
|
||||
URL.revokeObjectURL(existingUrl);
|
||||
}
|
||||
|
||||
$row.removeData('objectUrl');
|
||||
$row.removeData('previewType');
|
||||
$row.removeData('previewSource');
|
||||
resetInlinePreview($row);
|
||||
$row.find('.preview-new-attachment').addClass('d-none');
|
||||
$row.find('.preview-filename').text('');
|
||||
}
|
||||
|
||||
function addAttachmentRow() {
|
||||
const attachmentTableBody = $('#attachments-table tbody');
|
||||
const emptyRowMarkup = `<tr class="attachments-empty text-center text-muted"><td colspan="4">Belum ada lampiran ditambahkan.</td></tr>`;
|
||||
|
||||
if (attachmentTableBody.find('.attachments-empty').length) {
|
||||
attachmentTableBody.empty();
|
||||
}
|
||||
|
||||
const index = attachmentIndex++;
|
||||
const row = $(`
|
||||
<tr class="attachment-row" data-index="${index}">
|
||||
<td>
|
||||
<select class="form-control attachment-category" name="attachments[${index}][file_category]" required>
|
||||
<option value="">${categoryToLabel('')}</option>
|
||||
${buildCategoryOptions()}
|
||||
</select>
|
||||
</td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<div class="attachment-inline-preview border rounded d-flex align-items-center justify-content-center bg-white" style="width: 56px; height: 56px;">
|
||||
<i class="fas fa-file-upload text-muted"></i>
|
||||
</div>
|
||||
<input type="file" class="form-control attachment-file" name="attachments[${index}][file_path]" accept="${fileAccept}">
|
||||
</div>
|
||||
<div class="small text-muted mt-1 preview-filename"></div>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary preview-new-attachment d-none" data-modal="#newAttachmentPreviewModal">
|
||||
Pratinjau
|
||||
</button>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<button type="button" class="btn btn-sm btn-outline-danger remove-attachment-row">
|
||||
<i class="fas fa-trash"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
`);
|
||||
|
||||
attachmentTableBody.append(row);
|
||||
}
|
||||
|
||||
function removeAttachmentRow(button) {
|
||||
const $row = $(button).closest('tr');
|
||||
const attachmentTableBody = $('#attachments-table tbody');
|
||||
const emptyRowMarkup = `<tr class="attachments-empty text-center text-muted"><td colspan="4">Belum ada lampiran ditambahkan.</td></tr>`;
|
||||
|
||||
clearRowData($row);
|
||||
$row.remove();
|
||||
|
||||
if (!attachmentTableBody.find('.attachment-row').length) {
|
||||
attachmentTableBody.append(emptyRowMarkup);
|
||||
}
|
||||
}
|
||||
|
||||
function setInlinePreview($row, type, source) {
|
||||
const previewBox = $row.find('.attachment-inline-preview');
|
||||
|
||||
if (type === 'image' && source) {
|
||||
previewBox
|
||||
.html(`<img src="${source}" class="img-thumbnail" style="width: 100%; height: 100%; object-fit: cover;" alt="Pratinjau lampiran">`)
|
||||
.addClass('bg-light');
|
||||
} else if (type === 'pdf') {
|
||||
previewBox
|
||||
.html('<i class="fas fa-file-pdf text-danger fa-lg"></i>')
|
||||
.addClass('bg-light');
|
||||
} else {
|
||||
resetInlinePreview($row);
|
||||
}
|
||||
}
|
||||
|
||||
function openAttachmentModal(modalSelector, title, type, source) {
|
||||
const $modal = $(modalSelector);
|
||||
const $image = $modal.find('.attachment-preview-image');
|
||||
const $object = $modal.find('.attachment-preview-object');
|
||||
const $placeholder = $modal.find('.attachment-preview-placeholder');
|
||||
|
||||
$modal.find('.attachment-preview-modal-title').text(title || 'Lampiran');
|
||||
$image.addClass('d-none').attr('src', '');
|
||||
$object.addClass('d-none').attr('data', '').attr('src', '');
|
||||
$placeholder.removeClass('d-none');
|
||||
|
||||
if (type === 'image' && source) {
|
||||
$image.attr('src', source).removeClass('d-none');
|
||||
$placeholder.addClass('d-none');
|
||||
} else if (type === 'pdf' && source) {
|
||||
$object.attr('data', source).attr('src', source).removeClass('d-none');
|
||||
$placeholder.addClass('d-none');
|
||||
}
|
||||
|
||||
if (window.bootstrap && bootstrap.Modal && typeof bootstrap.Modal.getOrCreateInstance === 'function') {
|
||||
bootstrap.Modal.getOrCreateInstance($modal[0]).show();
|
||||
} else {
|
||||
$modal.modal('show');
|
||||
}
|
||||
}
|
||||
|
||||
function previewFile(input) {
|
||||
const $input = $(input);
|
||||
const $row = $input.closest('tr');
|
||||
const previewButton = $row.find('.preview-new-attachment');
|
||||
const filenameHolder = $row.find('.preview-filename');
|
||||
|
||||
clearRowData($row);
|
||||
|
||||
const file = input.files && input.files[0];
|
||||
if (!file) {
|
||||
return;
|
||||
}
|
||||
|
||||
filenameHolder.text(file.name);
|
||||
const extension = file.name.split('.').pop().toLowerCase();
|
||||
|
||||
if (['jpg', 'jpeg', 'png'].includes(extension)) {
|
||||
const reader = new FileReader();
|
||||
reader.onload = function (event) {
|
||||
const source = event.target.result;
|
||||
$row.data('previewType', 'image');
|
||||
$row.data('previewSource', source);
|
||||
setInlinePreview($row, 'image', source);
|
||||
previewButton.removeClass('d-none');
|
||||
// Gunakan DOMContentLoaded agar script terisolasi dan langsung jalan sebelum jQuery external selesai
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
try {
|
||||
// ==========================================
|
||||
// 1. INISIALISASI AUTONUMERIC ASLI & AMAN
|
||||
// ==========================================
|
||||
const autoNumericConfig = {
|
||||
digitGroupSeparator: '.',
|
||||
decimalCharacter: ',',
|
||||
currencySymbol: 'Rp. ',
|
||||
decimalPlaces: 0,
|
||||
unformatOnSubmit: true // Mengirim nilai integer murni ke backend
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
} else {
|
||||
const objectUrl = URL.createObjectURL(file);
|
||||
$row.data('previewType', 'pdf');
|
||||
$row.data('previewSource', objectUrl);
|
||||
$row.data('objectUrl', objectUrl);
|
||||
setInlinePreview($row, 'pdf');
|
||||
previewButton.removeClass('d-none');
|
||||
|
||||
const allowanceInput = new AutoNumeric('#allowance', autoNumericConfig);
|
||||
const dalkotInput = new AutoNumeric('#transport_dalkot', autoNumericConfig);
|
||||
const ankotInput = new AutoNumeric('#transport_ankot', autoNumericConfig);
|
||||
const hotelInput = new AutoNumeric('#hotel', autoNumericConfig);
|
||||
|
||||
|
||||
// ==========================================
|
||||
// 2. BLOKIR SCROLL WHEEL DENGAN EVENT BROWSER NATIVE
|
||||
// ==========================================
|
||||
// Mencegah input berubah tanpa memicu error library
|
||||
const inputIds = ['allowance', 'transport_dalkot', 'transport_ankot', 'hotel'];
|
||||
inputIds.forEach(function(id) {
|
||||
const el = document.getElementById(id);
|
||||
if (el) {
|
||||
el.addEventListener('wheel', function(e) {
|
||||
e.preventDefault(); // Menghentikan angka bergulir
|
||||
this.blur(); // Melepas fokus kursor
|
||||
}, { passive: false });
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// ==========================================
|
||||
// 3. LOGIKA MULTI UPLOAD ATTACHMENT
|
||||
// ==========================================
|
||||
const attachmentCategories = @json($attachmentCategories ?? ($upCountryAttachmentCategoryKeys ?? []));
|
||||
const attachmentCategoryLabels = @json($attachmentCategoryLabels ?? ($upCountryAttachmentCategories ?? []));
|
||||
const fileAccept = '.jpg,.jpeg,.png,.pdf';
|
||||
let attachmentIndex = 0;
|
||||
|
||||
function categoryToLabel(value) {
|
||||
if (!value) return 'Pilih Kategori';
|
||||
if (attachmentCategoryLabels && attachmentCategoryLabels[value]) {
|
||||
return attachmentCategoryLabels[value];
|
||||
}
|
||||
return value.replace(/_/g, ' ').replace(/\b\w/g, (char) => char.toUpperCase());
|
||||
}
|
||||
|
||||
function buildCategoryOptions() {
|
||||
return attachmentCategories
|
||||
.map((category) => `<option value="${category}">${categoryToLabel(category)}</option>`)
|
||||
.join('');
|
||||
}
|
||||
|
||||
function resetInlinePreview($row) {
|
||||
$row.find('.attachment-inline-preview')
|
||||
.removeClass('bg-light')
|
||||
.html('<i class="fas fa-file-upload text-muted"></i>');
|
||||
}
|
||||
|
||||
function clearRowData($row) {
|
||||
const existingUrl = $row.data('objectUrl');
|
||||
if (existingUrl) {
|
||||
URL.revokeObjectURL(existingUrl);
|
||||
}
|
||||
$row.removeData('objectUrl');
|
||||
$row.removeData('previewType');
|
||||
$row.removeData('previewSource');
|
||||
resetInlinePreview($row);
|
||||
$row.find('.preview-new-attachment').addClass('d-none');
|
||||
$row.find('.preview-filename').text('');
|
||||
}
|
||||
|
||||
function addAttachmentRow() {
|
||||
const attachmentTableBody = $('#attachments-table tbody');
|
||||
if (attachmentTableBody.find('.attachments-empty').length) {
|
||||
attachmentTableBody.empty();
|
||||
}
|
||||
|
||||
const index = attachmentIndex++;
|
||||
const row = $(`
|
||||
<tr class="attachment-row" data-index="${index}">
|
||||
<td>
|
||||
<select class="form-control attachment-category" name="attachments[${index}][file_category]" required>
|
||||
<option value="">${categoryToLabel('')}</option>
|
||||
${buildCategoryOptions()}
|
||||
</select>
|
||||
</td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<div class="attachment-inline-preview border rounded d-flex align-items-center justify-content-center bg-white" style="width: 56px; height: 56px;">
|
||||
<i class="fas fa-file-upload text-muted"></i>
|
||||
</div>
|
||||
<input type="file" class="form-control attachment-file" name="attachments[${index}][file_path]" accept="${fileAccept}" required>
|
||||
</div>
|
||||
<div class="small text-muted mt-1 preview-filename"></div>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary preview-new-attachment d-none" data-modal="#newAttachmentPreviewModal">
|
||||
Pratinjau
|
||||
</button>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<button type="button" class="btn btn-sm btn-outline-danger remove-attachment-row">
|
||||
<i class="fas fa-trash"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
`);
|
||||
attachmentTableBody.append(row);
|
||||
}
|
||||
|
||||
function removeAttachmentRow(button) {
|
||||
const $row = $(button).closest('tr');
|
||||
const attachmentTableBody = $('#attachments-table tbody');
|
||||
const emptyRowMarkup = `<tr class="attachments-empty text-center text-muted"><td colspan="4">Belum ada lampiran ditambahkan.</td></tr>`;
|
||||
|
||||
clearRowData($row);
|
||||
$row.remove();
|
||||
|
||||
if (!attachmentTableBody.find('.attachment-row').length) {
|
||||
attachmentTableBody.append(emptyRowMarkup);
|
||||
}
|
||||
}
|
||||
|
||||
function setInlinePreview($row, type, source) {
|
||||
const previewBox = $row.find('.attachment-inline-preview');
|
||||
if (type === 'image' && source) {
|
||||
previewBox
|
||||
.html(`<img src="${source}" class="img-thumbnail" style="width: 100%; height: 100%; object-fit: cover;" alt="Pratinjau">`)
|
||||
.addClass('bg-light');
|
||||
} else if (type === 'pdf') {
|
||||
previewBox
|
||||
.html('<i class="fas fa-file-pdf text-danger fa-lg"></i>')
|
||||
.addClass('bg-light');
|
||||
} else {
|
||||
resetInlinePreview($row);
|
||||
}
|
||||
}
|
||||
|
||||
function openAttachmentModal(modalSelector, title, type, source) {
|
||||
const $modal = $(modalSelector);
|
||||
const $image = $modal.find('.attachment-preview-image');
|
||||
const $object = $modal.find('.attachment-preview-object');
|
||||
const $placeholder = $modal.find('.attachment-preview-placeholder');
|
||||
|
||||
$modal.find('.attachment-preview-modal-title').text(title || 'Lampiran');
|
||||
$image.addClass('d-none').attr('src', '');
|
||||
$object.addClass('d-none').attr('data', '').attr('src', '');
|
||||
$placeholder.removeClass('d-none');
|
||||
|
||||
if (type === 'image' && source) {
|
||||
$image.attr('src', source).removeClass('d-none');
|
||||
$placeholder.addClass('d-none');
|
||||
} else if (type === 'pdf' && source) {
|
||||
$object.attr('data', source).attr('src', source).removeClass('d-none');
|
||||
$placeholder.addClass('d-none');
|
||||
}
|
||||
|
||||
if (window.bootstrap && bootstrap.Modal && typeof bootstrap.Modal.getOrCreateInstance === 'function') {
|
||||
bootstrap.Modal.getOrCreateInstance($modal[0]).show();
|
||||
} else {
|
||||
$modal.modal('show');
|
||||
}
|
||||
}
|
||||
|
||||
function previewFile(input) {
|
||||
const $input = $(input);
|
||||
const $row = $input.closest('tr');
|
||||
const previewButton = $row.find('.preview-new-attachment');
|
||||
const filenameHolder = $row.find('.preview-filename');
|
||||
|
||||
clearRowData($row);
|
||||
|
||||
const file = input.files && input.files[0];
|
||||
if (!file) return;
|
||||
|
||||
filenameHolder.text(file.name);
|
||||
const extension = file.name.split('.').pop().toLowerCase();
|
||||
|
||||
if (['jpg', 'jpeg', 'png'].includes(extension)) {
|
||||
const reader = new FileReader();
|
||||
reader.onload = function (event) {
|
||||
const source = event.target.result;
|
||||
$row.data('previewType', 'image');
|
||||
$row.data('previewSource', source);
|
||||
setInlinePreview($row, 'image', source);
|
||||
previewButton.removeClass('d-none');
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
} else {
|
||||
const objectUrl = URL.createObjectURL(file);
|
||||
$row.data('previewType', 'pdf');
|
||||
$row.data('previewSource', objectUrl);
|
||||
$row.data('objectUrl', objectUrl);
|
||||
setInlinePreview($row, 'pdf');
|
||||
previewButton.removeClass('d-none');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// ==========================================
|
||||
// 4. INTERCEPTOR FORM SUBMISSION DENGAN SWEETALERT (> 1 JUTA)
|
||||
// ==========================================
|
||||
$('#expense-form').on('submit', function (e) {
|
||||
e.preventDefault();
|
||||
const form = this;
|
||||
|
||||
// Mengambil nilai desimal asli dari object AutoNumeric
|
||||
const allowance = allowanceInput.getNumber() || 0;
|
||||
const transportDalkot = dalkotInput.getNumber() || 0;
|
||||
const transportAnkot = ankotInput.getNumber() || 0;
|
||||
const hotel = hotelInput.getNumber() || 0;
|
||||
|
||||
const totalExpense = allowance + transportDalkot + transportAnkot + hotel;
|
||||
|
||||
if (totalExpense > 1000000) {
|
||||
Swal.fire({
|
||||
title: 'Nominal Melebihi Batas Expense!',
|
||||
text: `Total pengajuan Anda adalah Rp ${new Intl.NumberFormat('id-ID').format(totalExpense)}. Jumlah ini melebihi batas standar Rp 1.000.000. Apakah yakin tetap ajukan?`,
|
||||
icon: 'warning',
|
||||
showCancelButton: true,
|
||||
confirmButtonColor: '#3085d6',
|
||||
cancelButtonColor: '#d33',
|
||||
confirmButtonText: 'Yes, Tetap Ajukan!',
|
||||
cancelButtonText: 'No, Batalkan'
|
||||
}).then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
$('#loading-spinner-overlay').removeClass('d-none').addClass('d-flex');
|
||||
form.submit();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
$('#loading-spinner-overlay').removeClass('d-none').addClass('d-flex');
|
||||
form.submit();
|
||||
}
|
||||
});
|
||||
|
||||
// ==========================================
|
||||
// 5. EVENT BINDINGS
|
||||
// ==========================================
|
||||
$('#add-attachment-row').on('click', function (e) {
|
||||
e.preventDefault();
|
||||
addAttachmentRow();
|
||||
});
|
||||
|
||||
$(document).on('click', '.remove-attachment-row', function () { removeAttachmentRow(this); });
|
||||
$(document).on('change', '.attachment-file', function () { previewFile(this); });
|
||||
|
||||
$(document).on('click', '.preview-new-attachment', function () {
|
||||
const $row = $(this).closest('tr');
|
||||
const previewType = $row.data('previewType');
|
||||
const previewSource = $row.data('previewSource');
|
||||
const category = categoryToLabel($row.find('.attachment-category').val());
|
||||
const modalSelector = $(this).data('modal') || '#newAttachmentPreviewModal';
|
||||
|
||||
openAttachmentModal(modalSelector, category, previewType, previewSource);
|
||||
});
|
||||
|
||||
} catch (err) {
|
||||
console.error("Local Script Error:", err);
|
||||
}
|
||||
}
|
||||
|
||||
$(function () {
|
||||
const spinnerOverlay = $('#loading-spinner-overlay');
|
||||
|
||||
$('#expense-form').on('submit', function () {
|
||||
spinnerOverlay.removeClass('d-none').addClass('d-flex');
|
||||
});
|
||||
|
||||
$('#add-attachment-row').on('click', function () {
|
||||
addAttachmentRow();
|
||||
});
|
||||
|
||||
$(document).on('click', '.remove-attachment-row', function () {
|
||||
removeAttachmentRow(this);
|
||||
});
|
||||
|
||||
$(document).on('change', '.attachment-file', function () {
|
||||
previewFile(this);
|
||||
});
|
||||
|
||||
$(document).on('click', '.preview-new-attachment', function () {
|
||||
const $row = $(this).closest('tr');
|
||||
const previewType = $row.data('previewType');
|
||||
const previewSource = $row.data('previewSource');
|
||||
const category = categoryToLabel($row.find('.attachment-category').val());
|
||||
const modalSelector = $(this).data('modal') || '#newAttachmentPreviewModal';
|
||||
|
||||
openAttachmentModal(modalSelector, category, previewType, previewSource);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@endsection
|
||||
@endsection
|
||||
@@ -1,12 +1,13 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title')
|
||||
Dashboard
|
||||
Dashboard
|
||||
@endsection
|
||||
|
||||
@section('admin-content')
|
||||
<script src="https://cdn.jsdelivr.net/npm/autonumeric@4.6.0/dist/autoNumeric.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/autonumeric@4.6.0/dist/autoNumeric.min.js"></script>
|
||||
|
||||
<section class="content-header">
|
||||
<div class="container-fluid">
|
||||
<div class="row mb-2">
|
||||
@@ -16,12 +17,12 @@
|
||||
<div class="col-sm-6">
|
||||
<ol class="breadcrumb float-sm-right">
|
||||
<li class="breadcrumb-item"><a href="{{ route('dashboard.index') }}">Dashboard</a></li>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
#loading-spinner-overlay {
|
||||
position: fixed;
|
||||
@@ -29,8 +30,8 @@
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
|
||||
z-index: 9999; /* High z-index to cover everything */
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@@ -41,15 +42,17 @@
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
|
||||
@php
|
||||
$attachmentCategoryLabels = $attachmentCategoryLabels ?? ($upCountryAttachmentCategories ?? []);
|
||||
$attachmentCategories = $attachmentCategories ?? ($upCountryAttachmentCategoryKeys ?? array_keys($attachmentCategoryLabels));
|
||||
@endphp
|
||||
|
||||
<section class="content">
|
||||
<div class="container-fluid">
|
||||
<div class="card card-primary card-outline">
|
||||
<div class="card-body">
|
||||
<form id="expense-form" method="POST" action="{{ route('forms.up-country.update', $form->id) }}" enctype="multipart/form-data">
|
||||
<form id="expense-form" method="POST" action="{{ route('forms.up-country.update', $form->id) }}" enctype="multipart/form-data">
|
||||
@csrf
|
||||
@method('PUT')
|
||||
@include('backend.layouts.partials.messages')
|
||||
@@ -68,7 +71,8 @@
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Tanggal <span class="font-italic font-weight-normal">(required)</span></label>
|
||||
<input type="date" class="form-control" name="tanggal" required value="{{ $form->tanggal }}">
|
||||
<input type="date" class="form-control" name="tanggal" required
|
||||
value="{{ old('tanggal', !empty($form->tanggal) ? date('Y-m-d', strtotime($form->tanggal)) : '') }}">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Tujuan <span class="font-italic font-weight-normal">(required)</span></label>
|
||||
@@ -80,22 +84,22 @@
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Allowance <span class="font-italic font-weight-normal">(optional)</span></label>
|
||||
<input type="string" class="form-control" name="allowance" id="allowance" value="{{ $form->allowance }}">
|
||||
<input type="text" class="form-control" name="allowance" id="allowance" value="{{ $form->allowance }}">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Transport Dalam Kota <span class="font-italic font-weight-normal">(optional)</span></label>
|
||||
<input type="string" class="form-control" name="transport_dalkot" id="transport_dalkot" value="{{ $form->transport_dalkot }}">
|
||||
<input type="text" class="form-control" name="transport_dalkot" id="transport_dalkot" value="{{ $form->transport_dalkot }}">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Transport Antar Kota <span class="font-italic font-weight-normal">(optional)</span></label>
|
||||
<input type="string" class="form-control" name="transport_ankot" id="transport_ankot" value="{{ $form->transport_ankot }}">
|
||||
<input type="text" class="form-control" name="transport_ankot" id="transport_ankot" value="{{ $form->transport_ankot }}">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Hotel <span class="font-italic font-weight-normal">(optional)</span></label>
|
||||
<input type="string" class="form-control" name="hotel" id="hotel" value="{{ $form->hotel }}">
|
||||
<input type="text" class="form-control" name="hotel" id="hotel" value="{{ $form->hotel }}">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -201,7 +205,7 @@
|
||||
|
||||
<button type="submit" class="btn btn-primary ml-2">Save</button>
|
||||
</div>
|
||||
</form>
|
||||
</form>
|
||||
|
||||
@include('backend.components.attachment-preview-modal', [
|
||||
'modalId' => 'existingAttachmentPreviewModal',
|
||||
@@ -217,7 +221,7 @@
|
||||
<div class="spinner-wrapper">
|
||||
<div class="spinner-border text-primary" role="status">
|
||||
</div>
|
||||
<p>Sedang mengirim, mohon tunggu...</p>
|
||||
<p class="mt-2">Sedang mengirim, mohon tunggu...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -226,317 +230,333 @@
|
||||
</section>
|
||||
|
||||
<script>
|
||||
new AutoNumeric('#allowance', {
|
||||
digitGroupSeparator: '.',
|
||||
decimalCharacter: ',',
|
||||
currencySymbol: 'Rp.',
|
||||
decimalPlaces: 0,
|
||||
unformatOnSubmit: true
|
||||
});
|
||||
|
||||
new AutoNumeric('#transport_dalkot', {
|
||||
digitGroupSeparator: '.',
|
||||
decimalCharacter: ',',
|
||||
currencySymbol: 'Rp.',
|
||||
decimalPlaces: 0,
|
||||
unformatOnSubmit: true
|
||||
});
|
||||
|
||||
new AutoNumeric('#transport_ankot', {
|
||||
digitGroupSeparator: '.',
|
||||
decimalCharacter: ',',
|
||||
currencySymbol: 'Rp.',
|
||||
decimalPlaces: 0,
|
||||
unformatOnSubmit: true
|
||||
});
|
||||
|
||||
new AutoNumeric('#hotel', {
|
||||
digitGroupSeparator: '.',
|
||||
decimalCharacter: ',',
|
||||
currencySymbol: 'Rp.',
|
||||
decimalPlaces: 0,
|
||||
unformatOnSubmit: true
|
||||
});
|
||||
|
||||
const attachmentCategories = @json($attachmentCategories ?? ($upCountryAttachmentCategoryKeys ?? []));
|
||||
const attachmentCategoryLabels = @json($attachmentCategoryLabels ?? ($upCountryAttachmentCategories ?? []));
|
||||
const fileAccept = '.jpg,.jpeg,.png,.pdf';
|
||||
let attachmentIndex = 0;
|
||||
let newAttachmentsTableBody;
|
||||
let existingAttachmentsTableBody;
|
||||
let emptyNewRowMarkup = '';
|
||||
let emptyExistingRowMarkup = '';
|
||||
|
||||
function categoryToLabel(value) {
|
||||
if (!value) {
|
||||
return 'Pilih Kategori';
|
||||
}
|
||||
|
||||
if (attachmentCategoryLabels && attachmentCategoryLabels[value]) {
|
||||
return attachmentCategoryLabels[value];
|
||||
}
|
||||
|
||||
return value
|
||||
.replace(/_/g, ' ')
|
||||
.replace(/\b\w/g, (char) => char.toUpperCase());
|
||||
}
|
||||
|
||||
function buildCategoryOptions() {
|
||||
return attachmentCategories
|
||||
.map((category) => `<option value="${category}">${categoryToLabel(category)}</option>`)
|
||||
.join('');
|
||||
}
|
||||
|
||||
function resetInlinePreview($row) {
|
||||
$row
|
||||
.find('.attachment-inline-preview')
|
||||
.removeClass('bg-light')
|
||||
.html('<i class="fas fa-file-upload text-muted"></i>');
|
||||
}
|
||||
|
||||
function clearRowData($row) {
|
||||
const existingUrl = $row.data('objectUrl');
|
||||
if (existingUrl) {
|
||||
URL.revokeObjectURL(existingUrl);
|
||||
}
|
||||
|
||||
$row.removeData('objectUrl');
|
||||
$row.removeData('previewType');
|
||||
$row.removeData('previewSource');
|
||||
resetInlinePreview($row);
|
||||
$row.find('.preview-new-attachment').addClass('d-none');
|
||||
$row.find('.preview-filename').text('');
|
||||
}
|
||||
|
||||
function addAttachmentRow() {
|
||||
if (!newAttachmentsTableBody) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (newAttachmentsTableBody.find('.new-attachments-empty').length) {
|
||||
newAttachmentsTableBody.empty();
|
||||
}
|
||||
|
||||
const index = attachmentIndex++;
|
||||
const row = $(`
|
||||
<tr class="attachment-row" data-index="${index}">
|
||||
<td>
|
||||
<select class="form-control attachment-category" name="attachments[${index}][file_category]" required>
|
||||
<option value="">${categoryToLabel('')}</option>
|
||||
${buildCategoryOptions()}
|
||||
</select>
|
||||
</td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<div class="attachment-inline-preview border rounded d-flex align-items-center justify-content-center bg-white" style="width: 56px; height: 56px;">
|
||||
<i class="fas fa-file-upload text-muted"></i>
|
||||
</div>
|
||||
<input type="file" class="form-control attachment-file" name="attachments[${index}][file_path]" accept="${fileAccept}">
|
||||
</div>
|
||||
<div class="small text-muted mt-1 preview-filename"></div>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary preview-new-attachment d-none">
|
||||
Pratinjau
|
||||
</button>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<button type="button" class="btn btn-sm btn-outline-danger remove-attachment-row">
|
||||
<i class="fas fa-trash"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
`);
|
||||
|
||||
newAttachmentsTableBody.append(row);
|
||||
}
|
||||
|
||||
function removeAttachmentRow(button) {
|
||||
if (!newAttachmentsTableBody) {
|
||||
return;
|
||||
}
|
||||
|
||||
const $row = $(button).closest('tr');
|
||||
clearRowData($row);
|
||||
$row.remove();
|
||||
|
||||
if (!newAttachmentsTableBody.find('.attachment-row').length) {
|
||||
newAttachmentsTableBody.html(emptyNewRowMarkup);
|
||||
}
|
||||
}
|
||||
|
||||
function setInlinePreview($row, type, source) {
|
||||
const previewBox = $row.find('.attachment-inline-preview');
|
||||
|
||||
if (type === 'image' && source) {
|
||||
previewBox
|
||||
.html(`<img src="${source}" class="img-thumbnail" style="width: 100%; height: 100%; object-fit: cover;" alt="Pratinjau lampiran">`)
|
||||
.addClass('bg-light');
|
||||
} else if (type === 'pdf') {
|
||||
previewBox
|
||||
.html('<i class="fas fa-file-pdf text-danger fa-lg"></i>')
|
||||
.addClass('bg-light');
|
||||
} else {
|
||||
resetInlinePreview($row);
|
||||
}
|
||||
}
|
||||
|
||||
function openAttachmentModal(modalSelector, title, type, source) {
|
||||
const $modal = $(modalSelector);
|
||||
const $image = $modal.find('.attachment-preview-image');
|
||||
const $object = $modal.find('.attachment-preview-object');
|
||||
const $placeholder = $modal.find('.attachment-preview-placeholder');
|
||||
|
||||
$modal.find('.attachment-preview-modal-title').text(title || 'Lampiran');
|
||||
$image.addClass('d-none').attr('src', '');
|
||||
$object.addClass('d-none').attr('data', '').attr('src', '');
|
||||
$placeholder.removeClass('d-none');
|
||||
|
||||
if (type === 'image' && source) {
|
||||
$image.attr('src', source).removeClass('d-none');
|
||||
$placeholder.addClass('d-none');
|
||||
} else if (type === 'pdf' && source) {
|
||||
$object.attr('data', source).attr('src', source).removeClass('d-none');
|
||||
$placeholder.addClass('d-none');
|
||||
}
|
||||
|
||||
if (window.bootstrap && bootstrap.Modal && typeof bootstrap.Modal.getOrCreateInstance === 'function') {
|
||||
bootstrap.Modal.getOrCreateInstance($modal[0]).show();
|
||||
} else {
|
||||
$modal.modal('show');
|
||||
}
|
||||
}
|
||||
|
||||
function previewFile(input) {
|
||||
const $input = $(input);
|
||||
const $row = $input.closest('tr');
|
||||
const previewButton = $row.find('.preview-new-attachment');
|
||||
const filenameHolder = $row.find('.preview-filename');
|
||||
|
||||
clearRowData($row);
|
||||
|
||||
const file = input.files && input.files[0];
|
||||
if (!file) {
|
||||
return;
|
||||
}
|
||||
|
||||
filenameHolder.text(file.name);
|
||||
const extension = file.name.split('.').pop().toLowerCase();
|
||||
|
||||
if (['jpg', 'jpeg', 'png'].includes(extension)) {
|
||||
const reader = new FileReader();
|
||||
reader.onload = function (event) {
|
||||
const source = event.target.result;
|
||||
$row.data('previewType', 'image');
|
||||
$row.data('previewSource', source);
|
||||
setInlinePreview($row, 'image', source);
|
||||
previewButton.removeClass('d-none');
|
||||
$(document).ready(function() {
|
||||
try {
|
||||
// ==========================================
|
||||
// 1. INISIALISASI AUTONUMERIC ASLI (KEMBALI NORMAL & ANTI MINUS)
|
||||
// ==========================================
|
||||
const autoNumericConfig = {
|
||||
digitGroupSeparator: '.',
|
||||
decimalCharacter: ',',
|
||||
currencySymbol: 'Rp. ',
|
||||
decimalPlaces: 0,
|
||||
minimumValue: '0', // Mencegah nilai minus
|
||||
unformatOnSubmit: true // Mengirimkan angka bersih ke backend
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
} else {
|
||||
const objectUrl = URL.createObjectURL(file);
|
||||
$row.data('previewType', 'pdf');
|
||||
$row.data('previewSource', objectUrl);
|
||||
$row.data('objectUrl', objectUrl);
|
||||
setInlinePreview($row, 'pdf');
|
||||
previewButton.removeClass('d-none');
|
||||
}
|
||||
}
|
||||
|
||||
$(function () {
|
||||
const spinnerOverlay = $('#loading-spinner-overlay');
|
||||
const allowanceInput = new AutoNumeric('#allowance', autoNumericConfig);
|
||||
const dalkotInput = new AutoNumeric('#transport_dalkot', autoNumericConfig);
|
||||
const ankotInput = new AutoNumeric('#transport_ankot', autoNumericConfig);
|
||||
const hotelInput = new AutoNumeric('#hotel', autoNumericConfig);
|
||||
|
||||
$('#expense-form').on('submit', function () {
|
||||
spinnerOverlay.removeClass('d-none').addClass('d-flex');
|
||||
});
|
||||
|
||||
newAttachmentsTableBody = $('#new-attachments-table tbody');
|
||||
existingAttachmentsTableBody = $('#existing-attachments-table tbody');
|
||||
emptyNewRowMarkup = `<tr class="new-attachments-empty text-center text-muted"><td colspan="4">Belum ada lampiran baru.</td></tr>`;
|
||||
emptyExistingRowMarkup = `<tr class="existing-attachments-empty text-center text-muted"><td colspan="5">Belum ada lampiran tersimpan.</td></tr>`;
|
||||
|
||||
const csrfToken = $('meta[name="csrf-token"]').attr('content');
|
||||
if (csrfToken) {
|
||||
$.ajaxSetup({
|
||||
headers: {
|
||||
'X-CSRF-TOKEN': csrfToken
|
||||
}
|
||||
// ==========================================
|
||||
// 2. SOLUSI FIX SCROLLING: Blokir Paksa Menggunakan jQuery Native
|
||||
// ==========================================
|
||||
$('#allowance, #transport_dalkot, #transport_ankot, #hotel').on('wheel font-wheel', function(e) {
|
||||
e.preventDefault();
|
||||
$(this).blur(); // Melepas fokus kursor saat roda scroll digerakkan
|
||||
});
|
||||
}
|
||||
|
||||
$('#add-new-attachment-row').on('click', function () {
|
||||
addAttachmentRow();
|
||||
});
|
||||
|
||||
$(document).on('click', '.remove-attachment-row', function () {
|
||||
removeAttachmentRow(this);
|
||||
});
|
||||
// ==========================================
|
||||
// 3. LOGIKA MULTI UPLOAD ATTACHMENT
|
||||
// ==========================================
|
||||
const attachmentCategories = @json($attachmentCategories ?? ($upCountryAttachmentCategoryKeys ?? []));
|
||||
const attachmentCategoryLabels = @json($attachmentCategoryLabels ?? ($upCountryAttachmentCategories ?? []));
|
||||
const fileAccept = '.jpg,.jpeg,.png,.pdf';
|
||||
let attachmentIndex = 0;
|
||||
let newAttachmentsTableBody = $('#new-attachments-table tbody');
|
||||
let existingAttachmentsTableBody = $('#existing-attachments-table tbody');
|
||||
let emptyNewRowMarkup = `<tr class="new-attachments-empty text-center text-muted"><td colspan="4">Belum ada lampiran baru.</td></tr>`;
|
||||
let emptyExistingRowMarkup = `<tr class="existing-attachments-empty text-center text-muted"><td colspan="5">Belum ada lampiran tersimpan.</td></tr>`;
|
||||
|
||||
$(document).on('change', '.attachment-file', function () {
|
||||
previewFile(this);
|
||||
});
|
||||
|
||||
$(document).on('click', '.preview-new-attachment', function () {
|
||||
const $row = $(this).closest('tr');
|
||||
const previewType = $row.data('previewType');
|
||||
const previewSource = $row.data('previewSource');
|
||||
const category = categoryToLabel($row.find('.attachment-category').val());
|
||||
|
||||
openAttachmentModal('#newAttachmentPreviewModal', category, previewType, previewSource);
|
||||
});
|
||||
|
||||
$(document).on('click', '.preview-existing-attachment', function () {
|
||||
const button = $(this);
|
||||
const previewType = button.data('preview-type');
|
||||
const previewUrl = button.data('preview-url');
|
||||
const downloadUrl = button.data('download-url');
|
||||
const category = button.data('category') || 'Lampiran';
|
||||
|
||||
if (!previewUrl) {
|
||||
if (downloadUrl) {
|
||||
window.open(downloadUrl, '_blank');
|
||||
}
|
||||
return;
|
||||
const csrfToken = $('meta[name="csrf-token"]').attr('content');
|
||||
if (csrfToken) {
|
||||
$.ajaxSetup({
|
||||
headers: {
|
||||
'X-CSRF-TOKEN': csrfToken
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
openAttachmentModal('#existingAttachmentPreviewModal', category, previewType, previewUrl);
|
||||
});
|
||||
function categoryToLabel(value) {
|
||||
if (!value) return 'Pilih Kategori';
|
||||
if (attachmentCategoryLabels && attachmentCategoryLabels[value]) {
|
||||
return attachmentCategoryLabels[value];
|
||||
}
|
||||
return value.replace(/_/g, ' ').replace(/\b\w/g, (char) => char.toUpperCase());
|
||||
}
|
||||
|
||||
$(document).on('click', '.delete-attachment', function () {
|
||||
const button = $(this);
|
||||
const deleteUrl = button.data('delete-url');
|
||||
const $row = button.closest('tr');
|
||||
function buildCategoryOptions() {
|
||||
return attachmentCategories
|
||||
.map((category) => `<option value="${category}">${categoryToLabel(category)}</option>`)
|
||||
.join('');
|
||||
}
|
||||
|
||||
Swal.fire({
|
||||
title: 'Hapus lampiran?',
|
||||
text: 'Lampiran yang dihapus tidak dapat dikembalikan.',
|
||||
icon: 'warning',
|
||||
showCancelButton: true,
|
||||
confirmButtonText: 'Ya, hapus',
|
||||
cancelButtonText: 'Batal'
|
||||
}).then((result) => {
|
||||
if (!result.isConfirmed) {
|
||||
function resetInlinePreview($row) {
|
||||
$row.find('.attachment-inline-preview')
|
||||
.removeClass('bg-light')
|
||||
.html('<i class="fas fa-file-upload text-muted"></i>');
|
||||
}
|
||||
|
||||
function clearRowData($row) {
|
||||
const existingUrl = $row.data('objectUrl');
|
||||
if (existingUrl) {
|
||||
URL.revokeObjectURL(existingUrl);
|
||||
}
|
||||
$row.removeData('objectUrl');
|
||||
$row.removeData('previewType');
|
||||
$row.removeData('previewSource');
|
||||
resetInlinePreview($row);
|
||||
$row.find('.preview-new-attachment').addClass('d-none');
|
||||
$row.find('.preview-filename').text('');
|
||||
}
|
||||
|
||||
window.addAttachmentRow = function() {
|
||||
if (!newAttachmentsTableBody) return;
|
||||
|
||||
if (newAttachmentsTableBody.find('.new-attachments-empty').length) {
|
||||
newAttachmentsTableBody.empty();
|
||||
}
|
||||
|
||||
const index = attachmentIndex++;
|
||||
const row = $(`
|
||||
<tr class="attachment-row" data-index="${index}">
|
||||
<td>
|
||||
<select class="form-control attachment-category" name="attachments[${index}][file_category]" required>
|
||||
<option value="">${categoryToLabel('')}</option>
|
||||
${buildCategoryOptions()}
|
||||
</select>
|
||||
</td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<div class="attachment-inline-preview border rounded d-flex align-items-center justify-content-center bg-white" style="width: 56px; height: 56px;">
|
||||
<i class="fas fa-file-upload text-muted"></i>
|
||||
</div>
|
||||
<input type="file" class="form-control attachment-file" name="attachments[${index}][file_path]" accept="${fileAccept}" required>
|
||||
</div>
|
||||
<div class="small text-muted mt-1 preview-filename"></div>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary preview-new-attachment d-none" data-modal="#newAttachmentPreviewModal">
|
||||
Pratinjau
|
||||
</button>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<button type="button" class="btn btn-sm btn-outline-danger remove-attachment-row">
|
||||
<i class="fas fa-trash"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
`);
|
||||
newAttachmentsTableBody.append(row);
|
||||
}
|
||||
|
||||
function removeAttachmentRow(button) {
|
||||
if (!newAttachmentsTableBody) return;
|
||||
|
||||
const $row = $(button).closest('tr');
|
||||
clearRowData($row);
|
||||
$row.remove();
|
||||
|
||||
if (!newAttachmentsTableBody.find('.attachment-row').length) {
|
||||
newAttachmentsTableBody.html(emptyNewRowMarkup);
|
||||
}
|
||||
}
|
||||
|
||||
function setInlinePreview($row, type, source) {
|
||||
const previewBox = $row.find('.attachment-inline-preview');
|
||||
|
||||
if (type === 'image' && source) {
|
||||
previewBox
|
||||
.html(`<img src="${source}" class="img-thumbnail" style="width: 100%; height: 100%; object-fit: cover;" alt="Pratinjau lampiran">`)
|
||||
.addClass('bg-light');
|
||||
} else if (type === 'pdf') {
|
||||
previewBox
|
||||
.html('<i class="fas fa-file-pdf text-danger fa-lg"></i>')
|
||||
.addClass('bg-light');
|
||||
} else {
|
||||
resetInlinePreview($row);
|
||||
}
|
||||
}
|
||||
|
||||
function openAttachmentModal(modalSelector, title, type, source) {
|
||||
const $modal = $(modalSelector);
|
||||
const $image = $modal.find('.attachment-preview-image');
|
||||
const $object = $modal.find('.attachment-preview-object');
|
||||
const $placeholder = $modal.find('.attachment-preview-placeholder');
|
||||
|
||||
$modal.find('.attachment-preview-modal-title').text(title || 'Lampiran');
|
||||
$image.addClass('d-none').attr('src', '');
|
||||
$object.addClass('d-none').attr('data', '').attr('src', '');
|
||||
$placeholder.removeClass('d-none');
|
||||
|
||||
if (type === 'image' && source) {
|
||||
$image.attr('src', source).removeClass('d-none');
|
||||
$placeholder.addClass('d-none');
|
||||
} else if (type === 'pdf' && source) {
|
||||
$object.attr('data', source).attr('src', source).removeClass('d-none');
|
||||
$placeholder.addClass('d-none');
|
||||
}
|
||||
|
||||
if (window.bootstrap && bootstrap.Modal && typeof bootstrap.Modal.getOrCreateInstance === 'function') {
|
||||
bootstrap.Modal.getOrCreateInstance($modal[0]).show();
|
||||
} else {
|
||||
$modal.modal('show');
|
||||
}
|
||||
}
|
||||
|
||||
function previewFile(input) {
|
||||
const $input = $(input);
|
||||
const $row = $input.closest('tr');
|
||||
const previewButton = $row.find('.preview-new-attachment');
|
||||
const filenameHolder = $row.find('.preview-filename');
|
||||
|
||||
clearRowData($row);
|
||||
|
||||
const file = input.files && input.files[0];
|
||||
if (!file) {
|
||||
return;
|
||||
}
|
||||
|
||||
$.ajax({
|
||||
url: deleteUrl,
|
||||
type: 'DELETE',
|
||||
success: function (response) {
|
||||
$row.remove();
|
||||
if (!existingAttachmentsTableBody.find('tr').not('.existing-attachments-empty').length) {
|
||||
existingAttachmentsTableBody.html(emptyExistingRowMarkup);
|
||||
}
|
||||
filenameHolder.text(file.name);
|
||||
const extension = file.name.split('.').pop().toLowerCase();
|
||||
|
||||
Swal.fire('Berhasil', response?.message || 'Lampiran berhasil dihapus.', 'success');
|
||||
},
|
||||
error: function (xhr) {
|
||||
const message = xhr?.responseJSON?.message || 'Gagal menghapus lampiran.';
|
||||
Swal.fire('Error', message, 'error');
|
||||
if (['jpg', 'jpeg', 'png'].includes(extension)) {
|
||||
const reader = new FileReader();
|
||||
reader.onload = function (event) {
|
||||
const source = event.target.result;
|
||||
$row.data('previewType', 'image');
|
||||
$row.data('previewSource', source);
|
||||
setInlinePreview($row, 'image', source);
|
||||
previewButton.removeClass('d-none');
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
} else {
|
||||
const objectUrl = URL.createObjectURL(file);
|
||||
$row.data('previewType', 'pdf');
|
||||
$row.data('previewSource', objectUrl);
|
||||
$row.data('objectUrl', objectUrl);
|
||||
setInlinePreview($row, 'pdf');
|
||||
previewButton.removeClass('d-none');
|
||||
}
|
||||
}
|
||||
|
||||
// ==========================================
|
||||
// 4. INTERCEPTOR FORM SUBMIT & SWEETALERT (> 1 JUTA)
|
||||
// ==========================================
|
||||
const spinnerOverlay = $('#loading-spinner-overlay');
|
||||
|
||||
$('#expense-form').on('submit', function (e) {
|
||||
e.preventDefault();
|
||||
const form = this;
|
||||
|
||||
const allowance = allowanceInput.getNumber() || 0;
|
||||
const transportDalkot = dalkotInput.getNumber() || 0;
|
||||
const transportAnkot = ankotInput.getNumber() || 0;
|
||||
const hotel = hotelInput.getNumber() || 0;
|
||||
|
||||
const totalExpense = allowance + transportDalkot + transportAnkot + hotel;
|
||||
|
||||
if (totalExpense > 1000000) {
|
||||
Swal.fire({
|
||||
title: 'Nominal Melebihi Batas Expense!',
|
||||
text: `Total pengajuan Anda adalah Rp ${new Intl.NumberFormat('id-ID').format(totalExpense)}. Jumlah ini melebihi batas standar Rp 1.000.000. Apakah yakin tetap ajukan?`,
|
||||
icon: 'warning',
|
||||
showCancelButton: true,
|
||||
confirmButtonColor: '#3085d6',
|
||||
cancelButtonColor: '#d33',
|
||||
confirmButtonText: 'Yes, Tetap Ajukan!',
|
||||
cancelButtonText: 'No, Batalkan'
|
||||
}).then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
spinnerOverlay.removeClass('d-none').addClass('d-flex');
|
||||
form.submit();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
spinnerOverlay.removeClass('d-none').addClass('d-flex');
|
||||
form.submit();
|
||||
}
|
||||
});
|
||||
|
||||
// Event Listeners DOM
|
||||
$('#add-new-attachment-row').on('click', function (e) {
|
||||
e.preventDefault();
|
||||
addAttachmentRow();
|
||||
});
|
||||
|
||||
$(document).on('click', '.remove-attachment-row', function () {
|
||||
removeAttachmentRow(this);
|
||||
});
|
||||
|
||||
$(document).on('change', '.attachment-file', function () {
|
||||
previewFile(this);
|
||||
});
|
||||
|
||||
$(document).on('click', '.preview-new-attachment', function () {
|
||||
const $row = $(this).closest('tr');
|
||||
const previewType = $row.data('previewType');
|
||||
const previewSource = $row.data('previewSource');
|
||||
const category = categoryToLabel($row.find('.attachment-category').val());
|
||||
|
||||
openAttachmentModal('#newAttachmentPreviewModal', category, previewType, previewSource);
|
||||
});
|
||||
|
||||
$(document).on('click', '.preview-existing-attachment', function () {
|
||||
const button = $(this);
|
||||
const previewType = button.data('preview-type');
|
||||
const previewUrl = button.data('preview-url');
|
||||
const downloadUrl = button.data('download-url');
|
||||
const category = button.data('category') || 'Lampiran';
|
||||
|
||||
if (!previewUrl) {
|
||||
if (downloadUrl) {
|
||||
window.open(downloadUrl, '_blank');
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
openAttachmentModal('#existingAttachmentPreviewModal', category, previewType, previewUrl);
|
||||
});
|
||||
|
||||
$(document).on('click', '.delete-attachment', function () {
|
||||
const button = $(this);
|
||||
const deleteUrl = button.data('delete-url');
|
||||
const $row = button.closest('tr');
|
||||
|
||||
Swal.fire({
|
||||
title: 'Hapus lampiran?',
|
||||
text: 'Lampiran yang dihapus tidak dapat dikembalikan.',
|
||||
icon: 'warning',
|
||||
showCancelButton: true,
|
||||
confirmButtonText: 'Ya, hapus',
|
||||
cancelButtonText: 'Batal'
|
||||
}).then((result) => {
|
||||
if (!result.isConfirmed) return;
|
||||
|
||||
$.ajax({
|
||||
url: deleteUrl,
|
||||
type: 'DELETE',
|
||||
success: function (response) {
|
||||
$row.remove();
|
||||
if (!existingAttachmentsTableBody.find('tr').not('.existing-attachments-empty').length) {
|
||||
existingAttachmentsTableBody.html(emptyExistingRowMarkup);
|
||||
}
|
||||
Swal.fire('Berhasil', response?.message || 'Lampiran berhasil dihapus.', 'success');
|
||||
},
|
||||
error: function (xhr) {
|
||||
const message = xhr?.responseJSON?.message || 'Gagal menghapus lampiran.';
|
||||
Swal.fire('Error', message, 'error');
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
} catch (err) {
|
||||
console.error("Local Script Error:", err);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@endsection
|
||||
@endsection
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -6,6 +6,7 @@
|
||||
|
||||
@section('admin-content')
|
||||
<script src="https://cdn.jsdelivr.net/npm/autonumeric@4.6.0/dist/autoNumeric.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
||||
|
||||
<section class="content-header">
|
||||
<div class="container-fluid">
|
||||
@@ -28,8 +29,8 @@
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
|
||||
z-index: 9999; /* High z-index to cover everything */
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@@ -51,7 +52,8 @@
|
||||
<div class="col-lg-6">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Tanggal <span class="font-italic font-weight-normal">(required)</span></label>
|
||||
<input type="datetime-local" class="form-control" name="tanggal" required value="{{ old('tanggal') }}">
|
||||
{{-- Mengubah datetime-local menjadi date --}}
|
||||
<input type="date" class="form-control" name="tanggal" required value="{{ old('tanggal') }}">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Tipe Pengeluaran <span class="font-italic font-weight-normal">(required)</span></label>
|
||||
@@ -63,11 +65,11 @@
|
||||
|
||||
<div class="mb-3 gasoline-fields">
|
||||
<label class="form-label">Liter Bensin <span class="font-italic font-weight-normal">(required)</span></label>
|
||||
<input type="text" class="form-control" name="liter" value="{{ old('liter') }}">
|
||||
<input type="number" step="0.01" class="form-control" name="liter" id="liter" value="{{ old('liter') }}">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Total Harga <span class="font-italic font-weight-normal">(required)</span></label>
|
||||
<input type="string" class="form-control" name="total" id="total" required value="{{ old('total') }}">
|
||||
<input type="text" class="form-control" name="total" id="total" required value="{{ old('total') }}">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -78,7 +80,8 @@
|
||||
</div>
|
||||
<div class="mb-3 gasoline-fields">
|
||||
<label class="form-label">Tipe Bensin <span class="font-italic font-weight-normal">(required)</span></label>
|
||||
<select class="form-control" name="tipe_bensin" id="tipe_bensin" value="{{ old('tipe_bensin') }}">
|
||||
<select class="form-control" name="tipe_bensin" id="tipe_bensin">
|
||||
<option value="" disabled selected>Pilih Tipe</option>
|
||||
<option value="pertamax" {{ old('tipe_bensin') == 'pertamax' ? 'selected' : '' }}>Pertamax</option>
|
||||
<option value="pertalite" {{ old('tipe_bensin') == 'pertalite' ? 'selected' : '' }}>Pertalite</option>
|
||||
</select>
|
||||
@@ -135,9 +138,8 @@
|
||||
|
||||
<div id="loading-spinner-overlay" class="d-none">
|
||||
<div class="spinner-wrapper">
|
||||
<div class="spinner-border text-primary" role="status">
|
||||
</div>
|
||||
<p>Submitting, please wait...</p>
|
||||
<div class="spinner-border text-primary" role="status"></div>
|
||||
<p class="mt-2">Submitting, please wait...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -146,226 +148,211 @@
|
||||
</section>
|
||||
|
||||
<script>
|
||||
new AutoNumeric('#total', {
|
||||
digitGroupSeparator: '.',
|
||||
decimalCharacter: ',',
|
||||
currencySymbol: 'Rp.',
|
||||
decimalPlaces: 0,
|
||||
unformatOnSubmit: true
|
||||
});
|
||||
$(document).ready(function() {
|
||||
// 1. Inisialisasi Aman AutoNumeric (Sesuai Standar Up Country)
|
||||
const autoNumericConfig = {
|
||||
digitGroupSeparator: '.',
|
||||
decimalCharacter: ',',
|
||||
currencySymbol: 'Rp. ',
|
||||
decimalPlaces: 0,
|
||||
minimumValue: '0', // Mencegah nilai minus
|
||||
unformatOnSubmit: true
|
||||
};
|
||||
const totalInput = new AutoNumeric('#total', autoNumericConfig);
|
||||
|
||||
const spinnerOverlay = document.getElementById('loading-spinner-overlay');
|
||||
|
||||
document.getElementById('expense-form').addEventListener('submit', function () {
|
||||
spinnerOverlay.classList.remove('d-none');
|
||||
spinnerOverlay.classList.add('d-flex');
|
||||
});
|
||||
|
||||
// Toggle gasoline specific fields
|
||||
const expenseTypeSelect = document.getElementById('expense_type');
|
||||
const gasolineFields = document.querySelectorAll('.gasoline-fields');
|
||||
const literInput = document.querySelector('input[name="liter"]');
|
||||
const jarakInput = document.querySelector('input[name="jarak"]');
|
||||
const tipeBensinSelect = document.getElementById('tipe_bensin');
|
||||
const nopolInput = document.getElementById('nopol');
|
||||
|
||||
function toggleGasolineFields() {
|
||||
if (expenseTypeSelect.value === 'gasoline') {
|
||||
gasolineFields.forEach(field => field.style.display = 'block');
|
||||
literInput.setAttribute('required', 'required');
|
||||
jarakInput.setAttribute('required', 'required');
|
||||
tipeBensinSelect.setAttribute('required', 'required');
|
||||
nopolInput.setAttribute('required', 'required');
|
||||
} else {
|
||||
gasolineFields.forEach(field => field.style.display = 'none');
|
||||
literInput.value = '';
|
||||
jarakInput.value = '';
|
||||
tipeBensinSelect.value = '';
|
||||
nopolInput.value = '';
|
||||
literInput.removeAttribute('required');
|
||||
jarakInput.removeAttribute('required');
|
||||
tipeBensinSelect.removeAttribute('required');
|
||||
nopolInput.removeAttribute('required');
|
||||
}
|
||||
}
|
||||
|
||||
toggleGasolineFields();
|
||||
expenseTypeSelect.addEventListener('change', toggleGasolineFields);
|
||||
|
||||
const attachmentCategories = @json($attachmentCategories ?? ($vehicleAttachmentCategories ?? []));
|
||||
const blockedExtensions = ['exe', 'bat', 'sh', 'cmd', 'dll', 'msi'];
|
||||
const maxFileSizeBytes = 10 * 1024 * 1024;
|
||||
const vehicleAttachmentEmptyRow = '<tr class="vehicle-attachments-empty text-center text-muted"><td colspan="4">Belum ada lampiran.</td></tr>';
|
||||
let vehicleAttachmentIndex = 0;
|
||||
|
||||
function escapeHtml(value) {
|
||||
return String(value || '')
|
||||
.replace(/&/g, '&')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')
|
||||
.replace(/"/g, '"')
|
||||
.replace(/'/g, ''');
|
||||
}
|
||||
|
||||
function categoryToLabel(value) {
|
||||
if (!value) {
|
||||
return 'Pilih Kategori';
|
||||
}
|
||||
return value.replace(/_/g, ' ').replace(/\b\w/g, function (char) {
|
||||
return char.toUpperCase();
|
||||
// 2. Cegah Scroll Wheel agar angka tidak berubah tanpa sengaja
|
||||
$('#total, #liter, #jarak').on('wheel font-wheel', function(e) {
|
||||
e.preventDefault();
|
||||
$(this).blur();
|
||||
});
|
||||
}
|
||||
|
||||
function detectPreviewType(extension) {
|
||||
const images = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'];
|
||||
if (images.indexOf(extension) !== -1) {
|
||||
return 'image';
|
||||
}
|
||||
if (extension === 'pdf') {
|
||||
return 'pdf';
|
||||
}
|
||||
return 'other';
|
||||
}
|
||||
// 3. Toggle Logika Field Bensin
|
||||
const expenseTypeSelect = document.getElementById('expense_type');
|
||||
const gasolineFields = document.querySelectorAll('.gasoline-fields');
|
||||
const literInput = document.getElementById('liter');
|
||||
const jarakInput = document.getElementById('jarak');
|
||||
const tipeBensinSelect = document.getElementById('tipe_bensin');
|
||||
const nopolInput = document.getElementById('nopol');
|
||||
|
||||
function buildCategoryOptions() {
|
||||
return attachmentCategories.map(function (category) {
|
||||
return '<option value="' + category + '">' + escapeHtml(categoryToLabel(category)) + '</option>';
|
||||
}).join('');
|
||||
}
|
||||
|
||||
function setInlinePreview($row, type, source) {
|
||||
const $box = $row.find('.vehicle-attachment-inline-preview');
|
||||
$box.removeClass('bg-light').html('<i class="fas fa-file-upload text-muted"></i>');
|
||||
|
||||
if (type === 'image' && source) {
|
||||
$box.addClass('bg-light').html(
|
||||
'<img src="' + source + '" class="img-thumbnail" style="width:100%;height:100%;object-fit:cover;" alt="Preview">'
|
||||
);
|
||||
} else if (type === 'pdf') {
|
||||
$box.addClass('bg-light').html('<i class="fas fa-file-pdf text-danger fa-lg"></i>');
|
||||
} else if (type === 'other') {
|
||||
$box.addClass('bg-light').html('<i class="fas fa-file-alt text-secondary fa-lg"></i>');
|
||||
}
|
||||
}
|
||||
|
||||
function resetAttachmentRowData($row, clearInput = true) {
|
||||
const existingUrl = $row.data('objectUrl');
|
||||
if (existingUrl) {
|
||||
URL.revokeObjectURL(existingUrl);
|
||||
}
|
||||
|
||||
$row.removeData('objectUrl')
|
||||
.removeData('previewType')
|
||||
.removeData('previewSource')
|
||||
.removeData('previewFileName')
|
||||
.removeData('downloadUrl');
|
||||
|
||||
setInlinePreview($row, null, null);
|
||||
$row.find('.vehicle-preview-new-attachment').addClass('d-none');
|
||||
$row.find('.vehicle-preview-filename').text('');
|
||||
|
||||
if (clearInput) {
|
||||
$row.find('.vehicle-attachment-file').val('');
|
||||
}
|
||||
}
|
||||
|
||||
function openAttachmentModal(modalSelector, options) {
|
||||
const settings = Object.assign({
|
||||
title: 'Lampiran',
|
||||
type: 'other',
|
||||
source: null,
|
||||
downloadUrl: null,
|
||||
fileName: 'Lampiran'
|
||||
}, options || {});
|
||||
|
||||
const $modal = $(modalSelector);
|
||||
const $image = $modal.find('.attachment-preview-image');
|
||||
const $object = $modal.find('.attachment-preview-object');
|
||||
const $placeholder = $modal.find('.attachment-preview-placeholder');
|
||||
|
||||
$modal.find('.attachment-preview-modal-title').text(settings.title || 'Lampiran');
|
||||
|
||||
$image.addClass('d-none').attr('src', '');
|
||||
$object.addClass('d-none').attr('data', '').attr('src', '');
|
||||
$placeholder.removeClass('d-none').html('Tidak ada file untuk ditampilkan.');
|
||||
|
||||
if (settings.type === 'image' && settings.source) {
|
||||
$image.attr('src', settings.source).removeClass('d-none');
|
||||
$placeholder.addClass('d-none');
|
||||
} else if (settings.type === 'pdf' && settings.source) {
|
||||
$object.attr('data', settings.source).attr('src', settings.source).removeClass('d-none');
|
||||
$placeholder.addClass('d-none');
|
||||
} else {
|
||||
const safeName = escapeHtml(settings.fileName || 'Lampiran');
|
||||
let message = '<p class="mb-2">' + safeName + '</p><p class="text-muted mb-0">Preview tidak tersedia. Silakan unduh file untuk melihat konten.</p>';
|
||||
if (settings.downloadUrl) {
|
||||
message += '<div class="mt-3"><a href="' + settings.downloadUrl + '" target="_blank" class="btn btn-sm btn-outline-primary">Download</a></div>';
|
||||
function toggleGasolineFields() {
|
||||
if (expenseTypeSelect.value === 'gasoline') {
|
||||
gasolineFields.forEach(field => field.style.display = 'block');
|
||||
literInput.setAttribute('required', 'required');
|
||||
jarakInput.setAttribute('required', 'required');
|
||||
tipeBensinSelect.setAttribute('required', 'required');
|
||||
nopolInput.setAttribute('required', 'required');
|
||||
} else {
|
||||
gasolineFields.forEach(field => field.style.display = 'none');
|
||||
literInput.value = '';
|
||||
jarakInput.value = '';
|
||||
tipeBensinSelect.value = '';
|
||||
nopolInput.value = '';
|
||||
literInput.removeAttribute('required');
|
||||
jarakInput.removeAttribute('required');
|
||||
tipeBensinSelect.removeAttribute('required');
|
||||
nopolInput.removeAttribute('required');
|
||||
}
|
||||
$placeholder.html(message);
|
||||
}
|
||||
|
||||
if (window.bootstrap && bootstrap.Modal && typeof bootstrap.Modal.getOrCreateInstance === 'function') {
|
||||
bootstrap.Modal.getOrCreateInstance($modal[0]).show();
|
||||
} else {
|
||||
toggleGasolineFields();
|
||||
expenseTypeSelect.addEventListener('change', toggleGasolineFields);
|
||||
|
||||
// 4. Integrasi Interseptor Form Submit & SweetAlert
|
||||
const spinnerOverlay = $('#loading-spinner-overlay');
|
||||
|
||||
$('#expense-form').on('submit', function (e) {
|
||||
e.preventDefault();
|
||||
const form = this;
|
||||
const totalExpense = totalInput.getNumber() || 0;
|
||||
|
||||
if (totalExpense > 1000000) {
|
||||
Swal.fire({
|
||||
title: 'Nominal Melebihi Batas Expense!',
|
||||
text: `Total pengajuan Anda adalah Rp ${new Intl.NumberFormat('id-ID').format(totalExpense)}. Jumlah ini melebihi batas standar Rp 1.000.000. Apakah yakin tetap ajukan?`,
|
||||
icon: 'warning',
|
||||
showCancelButton: true,
|
||||
confirmButtonColor: '#3085d6',
|
||||
cancelButtonColor: '#d33',
|
||||
confirmButtonText: 'Yes, Tetap Ajukan!',
|
||||
cancelButtonText: 'No, Batalkan'
|
||||
}).then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
spinnerOverlay.removeClass('d-none').addClass('d-flex');
|
||||
form.submit();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
spinnerOverlay.removeClass('d-none').addClass('d-flex');
|
||||
form.submit();
|
||||
}
|
||||
});
|
||||
|
||||
// 5. Lampiran Engine (Tetap Utuh)
|
||||
const attachmentCategories = @json($attachmentCategories ?? ($vehicleAttachmentCategories ?? []));
|
||||
const blockedExtensions = ['exe', 'bat', 'sh', 'cmd', 'dll', 'msi'];
|
||||
const maxFileSizeBytes = 10 * 1024 * 1024;
|
||||
const vehicleAttachmentEmptyRow = '<tr class="vehicle-attachments-empty text-center text-muted"><td colspan="4">Belum ada lampiran.</td></tr>';
|
||||
let vehicleAttachmentIndex = 0;
|
||||
|
||||
function escapeHtml(value) {
|
||||
return String(value || '')
|
||||
.replace(/&/g, '&')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')
|
||||
.replace(/"/g, '"')
|
||||
.replace(/'/g, ''');
|
||||
}
|
||||
|
||||
function categoryToLabel(value) {
|
||||
if (!value) return 'Pilih Kategori';
|
||||
return value.replace(/_/g, ' ').replace(/\b\w/g, function (char) { return char.toUpperCase(); });
|
||||
}
|
||||
|
||||
function detectPreviewType(extension) {
|
||||
const images = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'];
|
||||
if (images.indexOf(extension) !== -1) return 'image';
|
||||
if (extension === 'pdf') return 'pdf';
|
||||
return 'other';
|
||||
}
|
||||
|
||||
function buildCategoryOptions() {
|
||||
return attachmentCategories.map(function (category) {
|
||||
return '<option value="' + category + '">' + escapeHtml(categoryToLabel(category)) + '</option>';
|
||||
}).join('');
|
||||
}
|
||||
|
||||
function setInlinePreview($row, type, source) {
|
||||
const $box = $row.find('.vehicle-attachment-inline-preview');
|
||||
$box.removeClass('bg-light').html('<i class="fas fa-file-upload text-muted"></i>');
|
||||
|
||||
if (type === 'image' && source) {
|
||||
$box.addClass('bg-light').html('<img src="' + source + '" class="img-thumbnail" style="width:100%;height:100%;object-fit:cover;" alt="Preview">');
|
||||
} else if (type === 'pdf') {
|
||||
$box.addClass('bg-light').html('<i class="fas fa-file-pdf text-danger fa-lg"></i>');
|
||||
} else if (type === 'other') {
|
||||
$box.addClass('bg-light').html('<i class="fas fa-file-alt text-secondary fa-lg"></i>');
|
||||
}
|
||||
}
|
||||
|
||||
function resetAttachmentRowData($row, clearInput = true) {
|
||||
const existingUrl = $row.data('objectUrl');
|
||||
if (existingUrl) URL.revokeObjectURL(existingUrl);
|
||||
|
||||
$row.removeData('objectUrl').removeData('previewType').removeData('previewSource').removeData('previewFileName').removeData('downloadUrl');
|
||||
setInlinePreview($row, null, null);
|
||||
$row.find('.vehicle-preview-new-attachment').addClass('d-none');
|
||||
$row.find('.vehicle-preview-filename').text('');
|
||||
if (clearInput) $row.find('.vehicle-attachment-file').val('');
|
||||
}
|
||||
|
||||
function openAttachmentModal(modalSelector, options) {
|
||||
const settings = Object.assign({ title: 'Lampiran', type: 'other', source: null, downloadUrl: null, fileName: 'Lampiran' }, options || {});
|
||||
const $modal = $(modalSelector);
|
||||
const $image = $modal.find('.attachment-preview-image');
|
||||
const $object = $modal.find('.attachment-preview-object');
|
||||
const $placeholder = $modal.find('.attachment-preview-placeholder');
|
||||
|
||||
$modal.find('.attachment-preview-modal-title').text(settings.title || 'Lampiran');
|
||||
$image.addClass('d-none').attr('src', '');
|
||||
$object.addClass('d-none').attr('data', '').attr('src', '');
|
||||
$placeholder.removeClass('d-none').html('Tidak ada file untuk ditampilkan.');
|
||||
|
||||
if (settings.type === 'image' && settings.source) {
|
||||
$image.attr('src', settings.source).removeClass('d-none');
|
||||
$placeholder.addClass('d-none');
|
||||
} else if (settings.type === 'pdf' && settings.source) {
|
||||
$object.attr('data', settings.source).attr('src', settings.source).removeClass('d-none');
|
||||
$placeholder.addClass('d-none');
|
||||
} else {
|
||||
const safeName = escapeHtml(settings.fileName || 'Lampiran');
|
||||
let message = '<p class="mb-2">' + safeName + '</p><p class="text-muted mb-0">Preview tidak tersedia. Silakan unduh file untuk melihat konten.</p>';
|
||||
if (settings.downloadUrl) message += '<div class="mt-3"><a href="' + settings.downloadUrl + '" target="_blank" class="btn btn-sm btn-outline-primary">Download</a></div>';
|
||||
$placeholder.html(message);
|
||||
}
|
||||
$modal.modal('show');
|
||||
}
|
||||
}
|
||||
|
||||
function addVehicleAttachmentRow() {
|
||||
const $tbody = $('#vehicle-attachments-table tbody');
|
||||
function addVehicleAttachmentRow() {
|
||||
const $tbody = $('#vehicle-attachments-table tbody');
|
||||
if ($tbody.find('.vehicle-attachments-empty').length) $tbody.empty();
|
||||
|
||||
if ($tbody.find('.vehicle-attachments-empty').length) {
|
||||
$tbody.empty();
|
||||
const index = vehicleAttachmentIndex++;
|
||||
const rowHtml = `
|
||||
<tr class="vehicle-attachment-row" data-index="${index}">
|
||||
<td>
|
||||
<select class="form-control vehicle-attachment-category" name="attachments[${index}][file_category]" required>
|
||||
<option value="">${escapeHtml(categoryToLabel(''))}</option>
|
||||
${buildCategoryOptions()}
|
||||
</select>
|
||||
</td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="vehicle-attachment-inline-preview border rounded d-flex align-items-center justify-content-center bg-white mr-2" style="width:56px;height:56px;">
|
||||
<i class="fas fa-file-upload text-muted"></i>
|
||||
</div>
|
||||
<input type="file" class="form-control vehicle-attachment-file" name="attachments[${index}][file_path]" required>
|
||||
</div>
|
||||
<div class="small text-muted mt-1 vehicle-preview-filename"></div>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary vehicle-preview-new-attachment d-none">Preview</button>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<button type="button" class="btn btn-sm btn-outline-danger vehicle-remove-attachment-row"><i class="fas fa-trash"></i></button>
|
||||
</td>
|
||||
</tr>
|
||||
`;
|
||||
$tbody.append(rowHtml);
|
||||
}
|
||||
|
||||
const index = vehicleAttachmentIndex++;
|
||||
const rowHtml = `
|
||||
<tr class="vehicle-attachment-row" data-index="${index}">
|
||||
<td>
|
||||
<select class="form-control vehicle-attachment-category" name="attachments[${index}][file_category]" required>
|
||||
<option value="">${escapeHtml(categoryToLabel(''))}</option>
|
||||
${buildCategoryOptions()}
|
||||
</select>
|
||||
</td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="vehicle-attachment-inline-preview border rounded d-flex align-items-center justify-content-center bg-white mr-2" style="width:56px;height:56px;">
|
||||
<i class="fas fa-file-upload text-muted"></i>
|
||||
</div>
|
||||
<input type="file" class="form-control vehicle-attachment-file" name="attachments[${index}][file_path]">
|
||||
</div>
|
||||
<div class="small text-muted mt-1 vehicle-preview-filename"></div>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary vehicle-preview-new-attachment d-none">
|
||||
Preview
|
||||
</button>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<button type="button" class="btn btn-sm btn-outline-danger vehicle-remove-attachment-row">
|
||||
<i class="fas fa-trash"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
`;
|
||||
|
||||
$tbody.append(rowHtml);
|
||||
}
|
||||
|
||||
$(function () {
|
||||
$('#vehicle-add-attachment-row').on('click', function () {
|
||||
addVehicleAttachmentRow();
|
||||
});
|
||||
$('#vehicle-add-attachment-row').on('click', function () { addVehicleAttachmentRow(); });
|
||||
|
||||
$(document).on('click', '.vehicle-remove-attachment-row', function () {
|
||||
const $row = $(this).closest('tr');
|
||||
const $tbody = $('#vehicle-attachments-table tbody');
|
||||
resetAttachmentRowData($row, true);
|
||||
$row.remove();
|
||||
|
||||
if (!$tbody.find('.vehicle-attachment-row').length) {
|
||||
$tbody.html(vehicleAttachmentEmptyRow);
|
||||
}
|
||||
if (!$tbody.find('.vehicle-attachment-row').length) $tbody.html(vehicleAttachmentEmptyRow);
|
||||
});
|
||||
|
||||
$(document).on('change', '.vehicle-attachment-file', function () {
|
||||
@@ -378,9 +365,7 @@
|
||||
filenameHolder.text('');
|
||||
|
||||
const file = this.files && this.files[0];
|
||||
if (!file) {
|
||||
return;
|
||||
}
|
||||
if (!file) return;
|
||||
|
||||
if (file.size > maxFileSizeBytes) {
|
||||
alert('Ukuran file melebihi 10 MB.');
|
||||
@@ -419,7 +404,6 @@
|
||||
$row.data('previewSource', null);
|
||||
setInlinePreview($row, 'other', null);
|
||||
}
|
||||
|
||||
previewButton.removeClass('d-none');
|
||||
});
|
||||
|
||||
@@ -438,8 +422,8 @@
|
||||
});
|
||||
});
|
||||
|
||||
// Add initial attachment row for user convenience
|
||||
// Berikan 1 baris input file kosong sebagai default awal
|
||||
addVehicleAttachmentRow();
|
||||
});
|
||||
</script>
|
||||
@endsection
|
||||
@endsection
|
||||
@@ -6,6 +6,8 @@
|
||||
|
||||
@section('admin-content')
|
||||
<script src="https://cdn.jsdelivr.net/npm/autonumeric@4.6.0/dist/autoNumeric.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
||||
|
||||
<section class="content-header">
|
||||
<div class="container-fluid">
|
||||
<div class="row mb-2">
|
||||
@@ -27,8 +29,8 @@
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
|
||||
z-index: 9999; /* High z-index to cover everything */
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@@ -39,6 +41,12 @@
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
|
||||
@php
|
||||
$attachmentCategoryLabels = $attachmentCategoryLabels ?? ($vehicleAttachmentCategories ?? []);
|
||||
$attachmentCategories = $attachmentCategories ?? ($vehicleAttachmentCategoryKeys ?? array_keys($attachmentCategoryLabels));
|
||||
@endphp
|
||||
|
||||
<section class="content">
|
||||
<div class="container-fluid">
|
||||
<div class="card card-primary card-outline">
|
||||
@@ -51,9 +59,10 @@
|
||||
<div class="col-lg-6">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Tanggal <span class="font-italic font-weight-normal">(required)</span></label>
|
||||
<input type="datetime-local" class="form-control" name="tanggal" required value="{{ old('tanggal', $form->tanggal ? \Carbon\Carbon::parse($form->tanggal)->format('Y-m-d\TH:i') : '') }}">
|
||||
{{-- Konversi Cerdas Format Input Tipe 'date' --}}
|
||||
<input type="date" class="form-control" name="tanggal" required
|
||||
value="{{ old('tanggal', $form->tanggal ? \Carbon\Carbon::parse($form->tanggal)->format('Y-m-d') : '') }}">
|
||||
</div>
|
||||
{{-- Updated: Expense Type dropdown with name="type" and $form->type for selection --}}
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Tipe Pengeluaran <span class="font-italic font-weight-normal">(required)</span></label>
|
||||
<select class="form-control" name="type" id="expense_type" required>
|
||||
@@ -62,19 +71,17 @@
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{{-- Wrap gasoline-specific fields with .gasoline-fields --}}
|
||||
<div class="mb-3 gasoline-fields">
|
||||
<label class="form-label">Liter Bensin <span class="font-italic font-weight-normal">(required)</span></label>
|
||||
<input type="text" class="form-control" name="liter" value="{{ old('liter', $form->liter) }}">
|
||||
<input type="number" step="0.01" class="form-control" name="liter" id="liter" value="{{ old('liter', $form->liter) }}">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Total Harga <span class="font-italic font-weight-normal">(required)</span></label>
|
||||
<input type="string" class="form-control" name="total" id="total" required value="{{ old('total', $form->total) }}">
|
||||
<input type="text" class="form-control" name="total" id="total" required value="{{ old('total', $form->total) }}">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
{{-- Wrap gasoline-specific fields with .gasoline-fields --}}
|
||||
<div class="mb-3 gasoline-fields">
|
||||
<label class="form-label">Km (Odometer) <span class="font-italic font-weight-normal">(required)</span></label>
|
||||
<input type="number" class="form-control" name="jarak" id="jarak" value="{{ old('jarak', $form->jarak) }}">
|
||||
@@ -82,6 +89,7 @@
|
||||
<div class="mb-3 gasoline-fields">
|
||||
<label class="form-label">Tipe Bensin <span class="font-italic font-weight-normal">(required)</span></label>
|
||||
<select class="form-control" name="tipe_bensin" id="tipe_bensin">
|
||||
<option value="" disabled selected>Pilih Tipe</option>
|
||||
<option value="pertamax" {{ old('tipe_bensin', $form->tipe_bensin) == 'pertamax' ? 'selected' : '' }}>Pertamax</option>
|
||||
<option value="pertalite" {{ old('tipe_bensin', $form->tipe_bensin) == 'pertalite' ? 'selected' : '' }}>Pertalite</option>
|
||||
</select>
|
||||
@@ -96,53 +104,61 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
{{-- BAGIAN LAMPIRAN TERSIMPAN DATABASE --}}
|
||||
<div class="col-lg-12">
|
||||
<div class="mb-4">
|
||||
<label class="form-label mb-0">Lampiran Saat Ini</label>
|
||||
<p class="text-muted small mt-1 mb-2">Gunakan tombol preview untuk melihat lampiran.</p>
|
||||
<label class="form-label mb-0">Lampiran Tersimpan</label>
|
||||
<p class="text-muted small mt-1 mb-2">Pratinjau, unduh, atau hapus lampiran yang telah diunggah sebelumnya.</p>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered align-middle" id="vehicle-existing-attachments-table">
|
||||
<table class="table table-bordered align-middle" id="existing-attachments-table">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th style="width: 30%">Kategori</th>
|
||||
<th style="width: 35%">Nama File</th>
|
||||
<th style="width: 15%" class="text-center">Preview</th>
|
||||
<th style="width: 20%" class="text-center">Aksi</th>
|
||||
<th style="width: 30%">Kategori Lampiran</th>
|
||||
<th style="width: 30%">Nama File</th>
|
||||
<th style="width: 15%" class="text-center">Pratinjau</th>
|
||||
<th style="width: 15%" class="text-center">Unduh</th>
|
||||
<th style="width: 10%" class="text-center">Aksi</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@forelse ($attachments as $attachment)
|
||||
<tr class="vehicle-existing-attachment-row" data-attachment-id="{{ $attachment['id'] }}">
|
||||
<td>{{ $attachment['file_category'] ? ucwords(str_replace('_', ' ', $attachment['file_category'])) : '-' }}</td>
|
||||
@php
|
||||
$categoryValue = $attachment['file_category'] ?? null;
|
||||
$categoryLabel = $categoryValue
|
||||
? ($attachmentCategoryLabels[$categoryValue] ?? ucwords(str_replace('_', ' ', $categoryValue)))
|
||||
: '-';
|
||||
@endphp
|
||||
<tr data-attachment-id="{{ $attachment['id'] }}">
|
||||
<td>{{ $categoryLabel }}</td>
|
||||
<td>{{ $attachment['filename'] ?? basename($attachment['file_path']) }}</td>
|
||||
<td class="text-center">
|
||||
<button type="button"
|
||||
class="btn btn-sm btn-outline-secondary vehicle-preview-existing-attachment"
|
||||
data-preview-url="{{ $attachment['preview_url'] }}"
|
||||
data-download-url="{{ $attachment['download_url'] }}"
|
||||
data-preview-type="{{ $attachment['preview_type'] }}"
|
||||
data-file-name="{{ $attachment['filename'] ?? basename($attachment['file_path']) }}">
|
||||
Preview
|
||||
class="btn btn-sm btn-outline-secondary preview-existing-attachment"
|
||||
data-preview-url="{{ $attachment['preview_url'] }}"
|
||||
data-download-url="{{ $attachment['download_url'] }}"
|
||||
data-preview-type="{{ $attachment['preview_type'] }}"
|
||||
data-category="{{ $categoryLabel }}">
|
||||
Pratinjau
|
||||
</button>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<a href="{{ $attachment['download_url'] }}"
|
||||
target="_blank"
|
||||
class="btn btn-sm btn-outline-primary mr-1">
|
||||
Download
|
||||
class="btn btn-sm btn-outline-primary">
|
||||
Unduh
|
||||
</a>
|
||||
@if($attachment['can_delete'])
|
||||
<button type="button"
|
||||
class="btn btn-sm btn-outline-danger vehicle-delete-attachment"
|
||||
data-delete-url="{{ route('forms.vehicle.attachments.destroy', [$form->id, $attachment['id']]) }}">
|
||||
<i class="fas fa-trash"></i>
|
||||
</button>
|
||||
@endif
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<button type="button"
|
||||
class="btn btn-sm btn-outline-danger delete-attachment"
|
||||
data-delete-url="{{ route('forms.vehicle.attachments.destroy', [$form->id, $attachment['id']]) }}">
|
||||
<i class="fas fa-trash"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
@empty
|
||||
<tr class="vehicle-existing-attachments-empty text-center text-muted">
|
||||
<td colspan="4">Belum ada lampiran.</td>
|
||||
<tr class="existing-attachments-empty text-center text-muted">
|
||||
<td colspan="5">Belum ada lampiran tersimpan.</td>
|
||||
</tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
@@ -155,15 +171,15 @@
|
||||
<div class="mb-3">
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<label class="form-label mb-0">Tambah Lampiran Baru</label>
|
||||
<button type="button" class="btn btn-outline-primary btn-sm" id="vehicle-add-new-attachment-row">
|
||||
<i class="fas fa-plus mr-1"></i> Tambah Lampiran
|
||||
<button type="button" class="btn btn-outline-primary btn-sm" id="vehicle-add-attachment-row">
|
||||
<i class="fas fa-plus mr-1"></i> Add attachment
|
||||
</button>
|
||||
</div>
|
||||
<p class="text-muted small mt-1 mb-2">
|
||||
Maksimal 10 MB per file. Semua tipe file diperbolehkan kecuali <code>.exe</code>, <code>.bat</code>, <code>.sh</code>, <code>.cmd</code>, <code>.dll</code>, dan <code>.msi</code>.
|
||||
</p>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered align-middle" id="vehicle-new-attachments-table">
|
||||
<table class="table table-bordered align-middle" id="vehicle-attachments-table">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th style="width: 30%">Kategori</th>
|
||||
@@ -173,8 +189,8 @@
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="vehicle-new-attachments-empty text-center text-muted">
|
||||
<td colspan="4">Belum ada lampiran baru.</td>
|
||||
<tr class="vehicle-attachments-empty text-center text-muted">
|
||||
<td colspan="4">Belum ada lampiran.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -182,13 +198,13 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary ml-2">Save</button>
|
||||
<button type="submit" class="btn btn-primary ml-2">Simpan Perubahan</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@include('backend.components.attachment-preview-modal', [
|
||||
'modalId' => 'vehicleExistingAttachmentPreviewModal',
|
||||
'title' => 'Preview Lampiran',
|
||||
'modalId' => 'existingAttachmentPreviewModal',
|
||||
'title' => 'Pratinjau Lampiran',
|
||||
])
|
||||
|
||||
@include('backend.components.attachment-preview-modal', [
|
||||
@@ -198,9 +214,8 @@
|
||||
|
||||
<div id="loading-spinner-overlay" class="d-none">
|
||||
<div class="spinner-wrapper">
|
||||
<div class="spinner-border text-primary" role="status">
|
||||
</div>
|
||||
<p>Submitting, please wait...</p>
|
||||
<div class="spinner-border text-primary" role="status"></div>
|
||||
<p class="mt-2">Submitting, please wait...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -208,255 +223,280 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
||||
<script>
|
||||
new AutoNumeric('#total', {
|
||||
digitGroupSeparator: '.',
|
||||
decimalCharacter: ',',
|
||||
currencySymbol: 'Rp.',
|
||||
decimalPlaces: 0,
|
||||
unformatOnSubmit: true
|
||||
});
|
||||
|
||||
const spinnerOverlay = document.getElementById('loading-spinner-overlay');
|
||||
|
||||
document.getElementById('expense-form').addEventListener('submit', function () {
|
||||
spinnerOverlay.classList.remove('d-none');
|
||||
spinnerOverlay.classList.add('d-flex');
|
||||
});
|
||||
|
||||
// Toggle gasoline specific fields
|
||||
const expenseTypeSelect = document.getElementById('expense_type');
|
||||
const gasolineFields = document.querySelectorAll('.gasoline-fields');
|
||||
const literInput = document.querySelector('input[name="liter"]');
|
||||
const jarakInput = document.querySelector('input[name="jarak"]');
|
||||
const tipeBensinSelect = document.getElementById('tipe_bensin');
|
||||
const nopolInput = document.getElementById('nopol');
|
||||
|
||||
function toggleGasolineFields() {
|
||||
if (expenseTypeSelect.value === 'gasoline') {
|
||||
gasolineFields.forEach(field => field.style.display = 'block');
|
||||
literInput.setAttribute('required', 'required');
|
||||
jarakInput.setAttribute('required', 'required');
|
||||
tipeBensinSelect.setAttribute('required', 'required');
|
||||
nopolInput.setAttribute('required', 'required');
|
||||
} else {
|
||||
gasolineFields.forEach(field => field.style.display = 'none');
|
||||
literInput.value = '';
|
||||
jarakInput.value = '';
|
||||
tipeBensinSelect.value = '';
|
||||
nopolInput.value = '';
|
||||
literInput.removeAttribute('required');
|
||||
jarakInput.removeAttribute('required');
|
||||
tipeBensinSelect.removeAttribute('required');
|
||||
nopolInput.removeAttribute('required');
|
||||
$(document).ready(function() {
|
||||
// Setup Global Token CSRF Khusus untuk Delete File via AJAX
|
||||
const csrfToken = $('meta[name="csrf-token"]').attr('content');
|
||||
if (csrfToken) {
|
||||
$.ajaxSetup({
|
||||
headers: { 'X-CSRF-TOKEN': csrfToken }
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
toggleGasolineFields();
|
||||
expenseTypeSelect.addEventListener('change', toggleGasolineFields);
|
||||
// 1. Inisialisasi Aman AutoNumeric (Sesuai Standar Up Country)
|
||||
const autoNumericConfig = {
|
||||
digitGroupSeparator: '.',
|
||||
decimalCharacter: ',',
|
||||
currencySymbol: 'Rp. ',
|
||||
decimalPlaces: 0,
|
||||
minimumValue: '0',
|
||||
unformatOnSubmit: true
|
||||
};
|
||||
const totalInput = new AutoNumeric('#total', autoNumericConfig);
|
||||
|
||||
const attachmentCategories = @json($attachmentCategories ?? ($vehicleAttachmentCategories ?? []));
|
||||
const blockedExtensions = ['exe', 'bat', 'sh', 'cmd', 'dll', 'msi'];
|
||||
const maxFileSizeBytes = 10 * 1024 * 1024;
|
||||
const existingEmptyRow = '<tr class="vehicle-existing-attachments-empty text-center text-muted"><td colspan="4">Belum ada lampiran.</td></tr>';
|
||||
const newEmptyRow = '<tr class="vehicle-new-attachments-empty text-center text-muted"><td colspan="4">Belum ada lampiran baru.</td></tr>';
|
||||
let vehicleNewAttachmentIndex = 0;
|
||||
|
||||
function escapeHtml(value) {
|
||||
return String(value || '')
|
||||
.replace(/&/g, '&')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')
|
||||
.replace(/"/g, '"')
|
||||
.replace(/'/g, ''');
|
||||
}
|
||||
|
||||
function categoryToLabel(value) {
|
||||
if (!value) {
|
||||
return 'Pilih Kategori';
|
||||
}
|
||||
return value.replace(/_/g, ' ').replace(/\b\w/g, function (char) {
|
||||
return char.toUpperCase();
|
||||
// 2. Cegah Scroll Wheel
|
||||
$('#total, #liter, #jarak').on('wheel font-wheel', function(e) {
|
||||
e.preventDefault();
|
||||
$(this).blur();
|
||||
});
|
||||
}
|
||||
|
||||
function detectPreviewType(extension) {
|
||||
const images = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'];
|
||||
if (images.indexOf(extension) !== -1) {
|
||||
return 'image';
|
||||
}
|
||||
if (extension === 'pdf') {
|
||||
return 'pdf';
|
||||
}
|
||||
return 'other';
|
||||
}
|
||||
// 3. Toggle Logika Field Bensin
|
||||
const expenseTypeSelect = document.getElementById('expense_type');
|
||||
const gasolineFields = document.querySelectorAll('.gasoline-fields');
|
||||
const literInput = document.getElementById('liter');
|
||||
const jarakInput = document.getElementById('jarak');
|
||||
const tipeBensinSelect = document.getElementById('tipe_bensin');
|
||||
const nopolInput = document.getElementById('nopol');
|
||||
|
||||
function buildCategoryOptions() {
|
||||
return attachmentCategories.map(function (category) {
|
||||
return '<option value="' + category + '">' + escapeHtml(categoryToLabel(category)) + '</option>';
|
||||
}).join('');
|
||||
}
|
||||
|
||||
function setInlinePreview($row, type, source) {
|
||||
const $box = $row.find('.vehicle-new-attachment-inline-preview');
|
||||
$box.removeClass('bg-light').html('<i class="fas fa-file-upload text-muted"></i>');
|
||||
|
||||
if (type === 'image' && source) {
|
||||
$box.addClass('bg-light').html(
|
||||
'<img src="' + source + '" class="img-thumbnail" style="width:100%;height:100%;object-fit:cover;" alt="Preview">'
|
||||
);
|
||||
} else if (type === 'pdf') {
|
||||
$box.addClass('bg-light').html('<i class="fas fa-file-pdf text-danger fa-lg"></i>');
|
||||
} else if (type === 'other') {
|
||||
$box.addClass('bg-light').html('<i class="fas fa-file-alt text-secondary fa-lg"></i>');
|
||||
}
|
||||
}
|
||||
|
||||
function resetNewAttachmentRowData($row, clearInput = true) {
|
||||
const existingUrl = $row.data('objectUrl');
|
||||
if (existingUrl) {
|
||||
URL.revokeObjectURL(existingUrl);
|
||||
}
|
||||
|
||||
$row.removeData('objectUrl')
|
||||
.removeData('previewType')
|
||||
.removeData('previewSource')
|
||||
.removeData('previewFileName')
|
||||
.removeData('downloadUrl');
|
||||
|
||||
setInlinePreview($row, null, null);
|
||||
$row.find('.vehicle-preview-new-attachment').addClass('d-none');
|
||||
$row.find('.vehicle-new-preview-filename').text('');
|
||||
|
||||
if (clearInput) {
|
||||
$row.find('.vehicle-new-attachment-file').val('');
|
||||
}
|
||||
}
|
||||
|
||||
function openAttachmentModal(modalSelector, options) {
|
||||
const settings = Object.assign({
|
||||
title: 'Lampiran',
|
||||
type: 'other',
|
||||
source: null,
|
||||
downloadUrl: null,
|
||||
fileName: 'Lampiran'
|
||||
}, options || {});
|
||||
|
||||
const $modal = $(modalSelector);
|
||||
const $image = $modal.find('.attachment-preview-image');
|
||||
const $object = $modal.find('.attachment-preview-object');
|
||||
const $placeholder = $modal.find('.attachment-preview-placeholder');
|
||||
|
||||
$modal.find('.attachment-preview-modal-title').text(settings.title || 'Lampiran');
|
||||
|
||||
$image.addClass('d-none').attr('src', '');
|
||||
$object.addClass('d-none').attr('data', '').attr('src', '');
|
||||
$placeholder.removeClass('d-none').html('Tidak ada file untuk ditampilkan.');
|
||||
|
||||
if (settings.type === 'image' && settings.source) {
|
||||
$image.attr('src', settings.source).removeClass('d-none');
|
||||
$placeholder.addClass('d-none');
|
||||
} else if (settings.type === 'pdf' && settings.source) {
|
||||
$object.attr('data', settings.source).attr('src', settings.source).removeClass('d-none');
|
||||
$placeholder.addClass('d-none');
|
||||
} else {
|
||||
const safeName = escapeHtml(settings.fileName || 'Lampiran');
|
||||
let message = '<p class="mb-2">' + safeName + '</p><p class="text-muted mb-0">Preview tidak tersedia. Silakan unduh file untuk melihat konten.</p>';
|
||||
if (settings.downloadUrl) {
|
||||
message += '<div class="mt-3"><a href="' + settings.downloadUrl + '" target="_blank" class="btn btn-sm btn-outline-primary">Download</a></div>';
|
||||
function toggleGasolineFields() {
|
||||
if (expenseTypeSelect.value === 'gasoline') {
|
||||
gasolineFields.forEach(field => field.style.display = 'block');
|
||||
literInput.setAttribute('required', 'required');
|
||||
jarakInput.setAttribute('required', 'required');
|
||||
tipeBensinSelect.setAttribute('required', 'required');
|
||||
nopolInput.setAttribute('required', 'required');
|
||||
} else {
|
||||
gasolineFields.forEach(field => field.style.display = 'none');
|
||||
literInput.value = '';
|
||||
jarakInput.value = '';
|
||||
tipeBensinSelect.value = '';
|
||||
nopolInput.value = '';
|
||||
literInput.removeAttribute('required');
|
||||
jarakInput.removeAttribute('required');
|
||||
tipeBensinSelect.removeAttribute('required');
|
||||
nopolInput.removeAttribute('required');
|
||||
}
|
||||
$placeholder.html(message);
|
||||
}
|
||||
|
||||
if (window.bootstrap && bootstrap.Modal && typeof bootstrap.Modal.getOrCreateInstance === 'function') {
|
||||
bootstrap.Modal.getOrCreateInstance($modal[0]).show();
|
||||
} else {
|
||||
toggleGasolineFields();
|
||||
expenseTypeSelect.addEventListener('change', toggleGasolineFields);
|
||||
|
||||
// 4. Integrasi Interseptor Form Submit & SweetAlert
|
||||
const spinnerOverlay = $('#loading-spinner-overlay');
|
||||
|
||||
$('#expense-form').on('submit', function (e) {
|
||||
e.preventDefault();
|
||||
const form = this;
|
||||
const totalExpense = totalInput.getNumber() || 0;
|
||||
|
||||
if (totalExpense > 1000000) {
|
||||
Swal.fire({
|
||||
title: 'Nominal Melebihi Batas Expense!',
|
||||
text: `Total pengajuan Anda adalah Rp ${new Intl.NumberFormat('id-ID').format(totalExpense)}. Jumlah ini melebihi batas standar Rp 1.000.000. Apakah yakin tetap ajukan?`,
|
||||
icon: 'warning',
|
||||
showCancelButton: true,
|
||||
confirmButtonColor: '#3085d6',
|
||||
cancelButtonColor: '#d33',
|
||||
confirmButtonText: 'Yes, Tetap Simpan!',
|
||||
cancelButtonText: 'No, Batalkan'
|
||||
}).then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
spinnerOverlay.removeClass('d-none').addClass('d-flex');
|
||||
form.submit();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
spinnerOverlay.removeClass('d-none').addClass('d-flex');
|
||||
form.submit();
|
||||
}
|
||||
});
|
||||
|
||||
// 5. Lampiran Engine AJAX (Existing Table Delete)
|
||||
$(document).on('click', '.delete-attachment', function () {
|
||||
const button = $(this);
|
||||
const deleteUrl = button.data('delete-url');
|
||||
const $row = button.closest('tr');
|
||||
const existingAttachmentsTableBody = $('#existing-attachments-table tbody');
|
||||
const emptyExistingRowMarkup = '<tr class="existing-attachments-empty text-center text-muted"><td colspan="5">Belum ada lampiran tersimpan.</td></tr>';
|
||||
|
||||
Swal.fire({
|
||||
title: 'Hapus lampiran?',
|
||||
text: 'Lampiran yang dihapus tidak dapat dikembalikan.',
|
||||
icon: 'warning',
|
||||
showCancelButton: true,
|
||||
confirmButtonText: 'Ya, hapus',
|
||||
cancelButtonText: 'Batal'
|
||||
}).then((result) => {
|
||||
if (!result.isConfirmed) return;
|
||||
|
||||
$.ajax({
|
||||
url: deleteUrl,
|
||||
type: 'DELETE',
|
||||
success: function (response) {
|
||||
$row.remove();
|
||||
if (!existingAttachmentsTableBody.find('tr').not('.existing-attachments-empty').length) {
|
||||
existingAttachmentsTableBody.html(emptyExistingRowMarkup);
|
||||
}
|
||||
Swal.fire('Berhasil', response?.message || 'Lampiran berhasil dihapus.', 'success');
|
||||
},
|
||||
error: function (xhr) {
|
||||
const message = xhr?.responseJSON?.message || 'Gagal menghapus lampiran.';
|
||||
Swal.fire('Error', message, 'error');
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
$(document).on('click', '.preview-existing-attachment', function () {
|
||||
const button = $(this);
|
||||
const previewType = button.data('preview-type');
|
||||
const previewUrl = button.data('preview-url');
|
||||
const downloadUrl = button.data('download-url');
|
||||
const category = button.data('category') || 'Lampiran';
|
||||
|
||||
if (!previewUrl) {
|
||||
if (downloadUrl) window.open(downloadUrl, '_blank');
|
||||
return;
|
||||
}
|
||||
openAttachmentModal('#existingAttachmentPreviewModal', {
|
||||
title: category, type: previewType, source: previewUrl
|
||||
});
|
||||
});
|
||||
|
||||
// 6. Lampiran Engine Tambahan Baru
|
||||
const attachmentCategories = @json($attachmentCategories ?? ($vehicleAttachmentCategories ?? []));
|
||||
const blockedExtensions = ['exe', 'bat', 'sh', 'cmd', 'dll', 'msi'];
|
||||
const maxFileSizeBytes = 10 * 1024 * 1024;
|
||||
const vehicleAttachmentEmptyRow = '<tr class="vehicle-attachments-empty text-center text-muted"><td colspan="4">Belum ada lampiran.</td></tr>';
|
||||
let vehicleAttachmentIndex = 0;
|
||||
|
||||
function escapeHtml(value) {
|
||||
return String(value || '')
|
||||
.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"').replace(/'/g, ''');
|
||||
}
|
||||
|
||||
function categoryToLabel(value) {
|
||||
if (!value) return 'Pilih Kategori';
|
||||
return value.replace(/_/g, ' ').replace(/\b\w/g, function (char) { return char.toUpperCase(); });
|
||||
}
|
||||
|
||||
function detectPreviewType(extension) {
|
||||
const images = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'];
|
||||
if (images.indexOf(extension) !== -1) return 'image';
|
||||
if (extension === 'pdf') return 'pdf';
|
||||
return 'other';
|
||||
}
|
||||
|
||||
function buildCategoryOptions() {
|
||||
return attachmentCategories.map(function (category) {
|
||||
return '<option value="' + category + '">' + escapeHtml(categoryToLabel(category)) + '</option>';
|
||||
}).join('');
|
||||
}
|
||||
|
||||
function setInlinePreview($row, type, source) {
|
||||
const $box = $row.find('.vehicle-attachment-inline-preview');
|
||||
$box.removeClass('bg-light').html('<i class="fas fa-file-upload text-muted"></i>');
|
||||
if (type === 'image' && source) {
|
||||
$box.addClass('bg-light').html('<img src="' + source + '" class="img-thumbnail" style="width:100%;height:100%;object-fit:cover;" alt="Preview">');
|
||||
} else if (type === 'pdf') {
|
||||
$box.addClass('bg-light').html('<i class="fas fa-file-pdf text-danger fa-lg"></i>');
|
||||
} else if (type === 'other') {
|
||||
$box.addClass('bg-light').html('<i class="fas fa-file-alt text-secondary fa-lg"></i>');
|
||||
}
|
||||
}
|
||||
|
||||
function resetAttachmentRowData($row, clearInput = true) {
|
||||
const existingUrl = $row.data('objectUrl');
|
||||
if (existingUrl) URL.revokeObjectURL(existingUrl);
|
||||
|
||||
$row.removeData('objectUrl').removeData('previewType').removeData('previewSource').removeData('previewFileName').removeData('downloadUrl');
|
||||
setInlinePreview($row, null, null);
|
||||
$row.find('.vehicle-preview-new-attachment').addClass('d-none');
|
||||
$row.find('.vehicle-preview-filename').text('');
|
||||
if (clearInput) $row.find('.vehicle-attachment-file').val('');
|
||||
}
|
||||
|
||||
function openAttachmentModal(modalSelector, options) {
|
||||
const settings = Object.assign({ title: 'Lampiran', type: 'other', source: null, downloadUrl: null, fileName: 'Lampiran' }, options || {});
|
||||
const $modal = $(modalSelector);
|
||||
const $image = $modal.find('.attachment-preview-image');
|
||||
const $object = $modal.find('.attachment-preview-object');
|
||||
const $placeholder = $modal.find('.attachment-preview-placeholder');
|
||||
|
||||
$modal.find('.attachment-preview-modal-title').text(settings.title || 'Lampiran');
|
||||
$image.addClass('d-none').attr('src', '');
|
||||
$object.addClass('d-none').attr('data', '').attr('src', '');
|
||||
$placeholder.removeClass('d-none').html('Tidak ada file untuk ditampilkan.');
|
||||
|
||||
if (settings.type === 'image' && settings.source) {
|
||||
$image.attr('src', settings.source).removeClass('d-none');
|
||||
$placeholder.addClass('d-none');
|
||||
} else if (settings.type === 'pdf' && settings.source) {
|
||||
$object.attr('data', settings.source).attr('src', settings.source).removeClass('d-none');
|
||||
$placeholder.addClass('d-none');
|
||||
} else {
|
||||
const safeName = escapeHtml(settings.fileName || 'Lampiran');
|
||||
let message = '<p class="mb-2">' + safeName + '</p><p class="text-muted mb-0">Preview tidak tersedia. Silakan unduh file untuk melihat konten.</p>';
|
||||
if (settings.downloadUrl) message += '<div class="mt-3"><a href="' + settings.downloadUrl + '" target="_blank" class="btn btn-sm btn-outline-primary">Download</a></div>';
|
||||
$placeholder.html(message);
|
||||
}
|
||||
$modal.modal('show');
|
||||
}
|
||||
}
|
||||
|
||||
function refreshExistingEmptyState() {
|
||||
const $tbody = $('#vehicle-existing-attachments-table tbody');
|
||||
if (!$tbody.find('.vehicle-existing-attachment-row').length) {
|
||||
$tbody.html(existingEmptyRow);
|
||||
}
|
||||
}
|
||||
function addVehicleAttachmentRow() {
|
||||
const $tbody = $('#vehicle-attachments-table tbody');
|
||||
if ($tbody.find('.vehicle-attachments-empty').length) $tbody.empty();
|
||||
|
||||
function refreshNewEmptyState() {
|
||||
const $tbody = $('#vehicle-new-attachments-table tbody');
|
||||
if (!$tbody.find('.vehicle-new-attachment-row').length) {
|
||||
$tbody.html(newEmptyRow);
|
||||
}
|
||||
}
|
||||
|
||||
function addVehicleNewAttachmentRow() {
|
||||
const $tbody = $('#vehicle-new-attachments-table tbody');
|
||||
|
||||
if ($tbody.find('.vehicle-new-attachments-empty').length) {
|
||||
$tbody.empty();
|
||||
}
|
||||
|
||||
const index = vehicleNewAttachmentIndex++;
|
||||
const rowHtml = `
|
||||
<tr class="vehicle-new-attachment-row" data-index="${index}">
|
||||
<td>
|
||||
<select class="form-control vehicle-new-attachment-category" name="attachments[${index}][file_category]" required>
|
||||
<option value="">${escapeHtml(categoryToLabel(''))}</option>
|
||||
${buildCategoryOptions()}
|
||||
</select>
|
||||
</td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="vehicle-new-attachment-inline-preview border rounded d-flex align-items-center justify-content-center bg-white mr-2" style="width:56px;height:56px;">
|
||||
<i class="fas fa-file-upload text-muted"></i>
|
||||
const index = vehicleAttachmentIndex++;
|
||||
const rowHtml = `
|
||||
<tr class="vehicle-attachment-row" data-index="${index}">
|
||||
<td>
|
||||
<select class="form-control vehicle-attachment-category" name="attachments[${index}][file_category]" required>
|
||||
<option value="">${escapeHtml(categoryToLabel(''))}</option>
|
||||
${buildCategoryOptions()}
|
||||
</select>
|
||||
</td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="vehicle-attachment-inline-preview border rounded d-flex align-items-center justify-content-center bg-white mr-2" style="width:56px;height:56px;">
|
||||
<i class="fas fa-file-upload text-muted"></i>
|
||||
</div>
|
||||
<input type="file" class="form-control vehicle-attachment-file" name="attachments[${index}][file_path]" required>
|
||||
</div>
|
||||
<input type="file" class="form-control vehicle-new-attachment-file" name="attachments[${index}][file_path]">
|
||||
</div>
|
||||
<div class="small text-muted mt-1 vehicle-new-preview-filename"></div>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary vehicle-preview-new-attachment d-none">
|
||||
Preview
|
||||
</button>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<button type="button" class="btn btn-sm btn-outline-danger vehicle-remove-new-attachment-row">
|
||||
<i class="fas fa-trash"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
`;
|
||||
<div class="small text-muted mt-1 vehicle-preview-filename"></div>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary vehicle-preview-new-attachment d-none">Preview</button>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<button type="button" class="btn btn-sm btn-outline-danger vehicle-remove-attachment-row"><i class="fas fa-trash"></i></button>
|
||||
</td>
|
||||
</tr>
|
||||
`;
|
||||
$tbody.append(rowHtml);
|
||||
}
|
||||
|
||||
$tbody.append(rowHtml);
|
||||
}
|
||||
$('#vehicle-add-attachment-row').on('click', function () { addVehicleAttachmentRow(); });
|
||||
|
||||
$(function () {
|
||||
$('#vehicle-add-new-attachment-row').on('click', function () {
|
||||
addVehicleNewAttachmentRow();
|
||||
});
|
||||
|
||||
$(document).on('click', '.vehicle-remove-new-attachment-row', function () {
|
||||
$(document).on('click', '.vehicle-remove-attachment-row', function () {
|
||||
const $row = $(this).closest('tr');
|
||||
const $tbody = $('#vehicle-new-attachments-table tbody');
|
||||
resetNewAttachmentRowData($row, true);
|
||||
const $tbody = $('#vehicle-attachments-table tbody');
|
||||
resetAttachmentRowData($row, true);
|
||||
$row.remove();
|
||||
refreshNewEmptyState();
|
||||
if (!$tbody.find('.vehicle-attachment-row').length) $tbody.html(vehicleAttachmentEmptyRow);
|
||||
});
|
||||
|
||||
$(document).on('change', '.vehicle-new-attachment-file', function () {
|
||||
$(document).on('change', '.vehicle-attachment-file', function () {
|
||||
const $input = $(this);
|
||||
const $row = $input.closest('tr');
|
||||
const previewButton = $row.find('.vehicle-preview-new-attachment');
|
||||
const filenameHolder = $row.find('.vehicle-new-preview-filename');
|
||||
const filenameHolder = $row.find('.vehicle-preview-filename');
|
||||
|
||||
resetNewAttachmentRowData($row, false);
|
||||
resetAttachmentRowData($row, false);
|
||||
filenameHolder.text('');
|
||||
|
||||
const file = this.files && this.files[0];
|
||||
if (!file) {
|
||||
return;
|
||||
}
|
||||
if (!file) return;
|
||||
|
||||
if (file.size > maxFileSizeBytes) {
|
||||
alert('Ukuran file melebihi 10 MB.');
|
||||
@@ -495,7 +535,6 @@
|
||||
$row.data('previewSource', null);
|
||||
setInlinePreview($row, 'other', null);
|
||||
}
|
||||
|
||||
previewButton.removeClass('d-none');
|
||||
});
|
||||
|
||||
@@ -513,73 +552,6 @@
|
||||
fileName: fileName
|
||||
});
|
||||
});
|
||||
|
||||
$(document).on('click', '.vehicle-preview-existing-attachment', function () {
|
||||
const $button = $(this);
|
||||
const previewType = $button.data('preview-type') || 'other';
|
||||
const previewUrl = $button.data('preview-url') || null;
|
||||
const downloadUrl = $button.data('download-url') || null;
|
||||
const fileName = $button.data('file-name') || 'Lampiran';
|
||||
|
||||
let type = previewType;
|
||||
let source = previewUrl;
|
||||
|
||||
if (!previewUrl || (previewType !== 'image' && previewType !== 'pdf')) {
|
||||
type = 'other';
|
||||
source = null;
|
||||
}
|
||||
|
||||
openAttachmentModal('#vehicleExistingAttachmentPreviewModal', {
|
||||
title: fileName,
|
||||
type: type,
|
||||
source: source,
|
||||
downloadUrl: downloadUrl,
|
||||
fileName: fileName
|
||||
});
|
||||
});
|
||||
|
||||
$(document).on('click', '.vehicle-delete-attachment', function () {
|
||||
const $button = $(this);
|
||||
const deleteUrl = $button.data('delete-url');
|
||||
const $row = $button.closest('tr');
|
||||
|
||||
if (!deleteUrl) {
|
||||
return;
|
||||
}
|
||||
|
||||
Swal.fire({
|
||||
title: 'Hapus lampiran?',
|
||||
text: 'Lampiran yang dihapus tidak dapat dikembalikan.',
|
||||
icon: 'warning',
|
||||
showCancelButton: true,
|
||||
confirmButtonText: 'Ya, hapus',
|
||||
cancelButtonText: 'Batal'
|
||||
}).then((result) => {
|
||||
if (!result.isConfirmed) {
|
||||
return;
|
||||
}
|
||||
|
||||
$.ajax({
|
||||
url: deleteUrl,
|
||||
type: 'DELETE',
|
||||
success: function (response) {
|
||||
$row.remove();
|
||||
refreshExistingEmptyState();
|
||||
Swal.fire('Berhasil', response?.message || 'Lampiran berhasil dihapus.', 'success');
|
||||
},
|
||||
error: function (xhr) {
|
||||
const message = xhr?.responseJSON?.message || 'Gagal menghapus lampiran.';
|
||||
Swal.fire('Error', message, 'error');
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
refreshExistingEmptyState();
|
||||
refreshNewEmptyState();
|
||||
|
||||
// Provide an initial row for new attachments
|
||||
addVehicleNewAttachmentRow();
|
||||
});
|
||||
</script>
|
||||
@endsection
|
||||
@endsection
|
||||
File diff suppressed because it is too large
Load Diff
@@ -5,288 +5,421 @@
|
||||
@endsection
|
||||
|
||||
@section('admin-content')
|
||||
<section class="content-header">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<section class="content-header">
|
||||
<div class="container-fluid">
|
||||
<div class="row mb-3">
|
||||
<div class="col-sm-6">
|
||||
<h1>{{ $pageInfo['title'] }}</h1>
|
||||
<h1 class="fw-bold">{{ $pageInfo['title'] }}</h1>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<ol class="breadcrumb float-sm-right">
|
||||
<li class="breadcrumb-form"><a href="{{ route('admin.dashboard') }}">{{ __('Dashboard') }}</a> / </li>
|
||||
<li class="breadcrumb-form active"> {{ $pageInfo['title'] }}</li>
|
||||
<li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">{{ __('Dashboard') }}</a></li>
|
||||
<li class="breadcrumb-item active">{{ $pageInfo['title'] }}</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-4">
|
||||
<!-- Total Expense -->
|
||||
<div class="col-lg-3 col-6">
|
||||
<div class="small-box bg-info">
|
||||
<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>
|
||||
<!-- Approved Expense -->
|
||||
<div class="col-lg-3 col-6">
|
||||
<div class="small-box bg-success">
|
||||
<div class="inner">
|
||||
<h3>Rp {{ number_format($forms->whereIn('status', ['Approved', 'Closed'])->sum('approved_total'), 0, ',', '.') }}</h3>
|
||||
<p>Approved Expenses</p>
|
||||
</div>
|
||||
<div class="icon">
|
||||
<i class="fas fa-check-circle"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Pending Expense -->
|
||||
<div class="col-lg-3 col-6">
|
||||
<div class="small-box bg-warning">
|
||||
<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>
|
||||
<!-- Budget Available -->
|
||||
<div class="col-lg-3 col-6">
|
||||
<div class="small-box bg-purple">
|
||||
<div class="inner">
|
||||
{{-- <h3 class="text-white">Rp {{ number_format($availableBudget, 0, ',', '.') }}</h3> --}}
|
||||
{{-- check if availableBudget is not - --}}
|
||||
<h3 class="text-white">{{ $availableBudget == '0' ? '-' : '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>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="content">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<form action="{{ route('reports.all') }}" method="GET">
|
||||
<div class="d-flex">
|
||||
<div class="col-md-3">
|
||||
<div class="form-group mb-3">
|
||||
<label for="region">Pilih Region</label>
|
||||
<select name="region" id="region" class="form-control">
|
||||
<option value="">Semua Region</option>
|
||||
@foreach ($regions as $region)
|
||||
<option value="{{ $region->code }}" {{ request()->region == $region->code ? 'selected' : '' }}>
|
||||
{{ $region->name }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="form-group mb-3">
|
||||
<label for="cabang">Pilih Cabang</label>
|
||||
<select name="cabang" id="cabang" class="form-control">
|
||||
<option value="">Semua Cabang</option>
|
||||
<!-- Cabang options will be dynamically populated -->
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<div class="form-group mb-3">
|
||||
<label for="month">Pilih Periode Bulan</label>
|
||||
<select name="month" id="month" class="form-control">
|
||||
<option value="">Pilih Bulan</option>
|
||||
<option value="january" {{ request()->month == 'january' ? 'selected' : '' }}>Januari</option>
|
||||
<option value="february" {{ request()->month == 'february' ? 'selected' : '' }}>Februari</option>
|
||||
<option value="march" {{ request()->month == 'march' ? 'selected' : '' }}>Maret</option>
|
||||
<option value="april" {{ request()->month == 'april' ? 'selected' : '' }}>April</option>
|
||||
<option value="may" {{ request()->month == 'may' ? 'selected' : '' }}>Mei</option>
|
||||
<option value="june" {{ request()->month == 'june' ? 'selected' : '' }}>Juni</option>
|
||||
<option value="july" {{ request()->month == 'july' ? 'selected' : '' }}>Juli</option>
|
||||
<option value="august" {{ request()->month == 'august' ? 'selected' : '' }}>Agustus</option>
|
||||
<option value="september" {{ request()->month == 'september' ? 'selected' : '' }}>September</option>
|
||||
<option value="october" {{ request()->month == 'october' ? 'selected' : '' }}>Oktober</option>
|
||||
<option value="november" {{ request()->month == 'november' ? 'selected' : '' }}>November</option>
|
||||
<option value="december" {{ request()->month == 'december' ? 'selected' : '' }}>Desember</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-2">
|
||||
<div class="form-group mb-3">
|
||||
<label for="year">Pilih Periode Tahun</label>
|
||||
<select name="year" id="year" class="form-control">
|
||||
<option value="">Pilih Tahun</option>
|
||||
@for ($i = 2024; $i <= date('Y'); $i++)
|
||||
<option value="{{ $i }}" {{ request()->year == $i ? 'selected' : '' }}>{{ $i }}</option>
|
||||
@endfor
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
{{-- Summary Widgets --}}
|
||||
<div class="row mt-4">
|
||||
<div class="col-lg-3 col-6">
|
||||
<div class="small-box bg-info shadow-sm" style="border-radius: 15px;">
|
||||
<div class="inner">
|
||||
<h3>Rp {{ number_format($forms->sum('total'), 0, ',', '.') }}</h3>
|
||||
<div class="fw-bold">Total Submission</div>
|
||||
</div>
|
||||
<div class="icon"><i class="fas fa-wallet"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-6">
|
||||
<div class="small-box bg-success shadow-sm" style="border-radius: 15px;">
|
||||
<div class="inner">
|
||||
<h3>Rp {{ number_format($forms->whereIn('status', ['Approved', 'Approved 1', 'Approved 2', 'Closed', 'Final Approved'])->sum('approved_total'), 0, ',', '.') }}</h3>
|
||||
<div class="fw-bold">Total Approved</div>
|
||||
</div>
|
||||
<div class="icon"><i class="fas fa-check-circle"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-6">
|
||||
<div class="small-box bg-warning shadow-sm" style="border-radius: 15px;">
|
||||
<div class="inner">
|
||||
<h3 class="text-white">Rp {{ number_format($forms->where('status', 'On Progress')->sum('total'), 0, ',', '.') }}</h3>
|
||||
<div class="text-white fw-bold">Total Pending</div>
|
||||
</div>
|
||||
<div class="icon"><i class="fas fa-hourglass-half"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-6">
|
||||
<div class="small-box bg-purple shadow-sm" style="border-radius: 15px; background-color: #6f42c1 !important;">
|
||||
<div class="inner">
|
||||
<h3 class="text-white">{{ !$availableBudget || $availableBudget == 0 ? '-' : 'Rp ' . number_format((float)$availableBudget, 0, ',', '.') }}</h3>
|
||||
<div class="text-white fw-bold">Budget Available</div>
|
||||
</div>
|
||||
<div class="icon"><i class="fas fa-money-bill"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-2">
|
||||
<div class="form-group mb-3">
|
||||
<label for="status">Status</label>
|
||||
<select name="status" id="status" class="form-control">
|
||||
<option value="">Semua Status</option>
|
||||
<option value="On Progress" {{ request()->status == 'On Progress' ? 'selected' : '' }}>On Progress</option>
|
||||
<option value="Approved 1" {{ request()->status == 'Approved 1' ? 'selected' : '' }}>Approved 1</option>
|
||||
<option value="Approved 2" {{ request()->status == 'Approved 2' ? 'selected' : '' }}>Approved 2</option>
|
||||
<option value="Closed" {{ request()->status == 'Closed' ? 'selected' : '' }}>Closed</option>
|
||||
<option value="Rejected" {{ request()->status == 'Rejected' ? 'selected' : '' }}>Rejected</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-md-3">
|
||||
<div class="form-group">
|
||||
<button type="submit" class="btn btn-primary">Filter</button>
|
||||
<a href="{{ route('reports.all') }}" class="btn btn-secondary">Reset</a>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{-- Filter Section - Sistem Periode Bulan Akuntansi --}}
|
||||
<div class="row mt-4">
|
||||
<div class="col-md-12">
|
||||
<div class="card shadow-sm border-0" style="border-radius: 15px;">
|
||||
<div class="card-body">
|
||||
<form action="{{ route('reports.all') }}" method="GET">
|
||||
<div class="row align-items-end">
|
||||
<div class="col-md-3">
|
||||
<div class="form-group mb-3">
|
||||
<label class="small fw-bold text-muted">Pilih Region</label>
|
||||
<select name="region" id="region" class="form-control select2">
|
||||
<option value="">Semua Region</option>
|
||||
@foreach ($regions as $region)
|
||||
<option value="{{ $region->code }}" {{ request()->region == $region->code ? 'selected' : '' }}>
|
||||
{{ $region->name }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="form-group mb-3">
|
||||
<label class="small fw-bold text-muted">Pilih Cabang</label>
|
||||
<select name="cabang" id="cabang" class="form-control select2">
|
||||
<option value="">Semua Cabang</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<div class="form-group mb-3">
|
||||
<label class="small fw-bold text-muted">Periode Bulan</label>
|
||||
<select name="month" id="month" class="form-control">
|
||||
<option value="">Pilih Bulan</option>
|
||||
@foreach(['january','february','march','april','may','june','july','august','september','october','november','december'] as $m)
|
||||
<option value="{{ $m }}" {{ (request()->month ?? strtolower(date('F'))) == $m ? 'selected' : '' }}>{{ ucfirst($m) }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<div class="form-group mb-3">
|
||||
<label class="small fw-bold text-muted">Tahun</label>
|
||||
<select name="year" id="year" class="form-control">
|
||||
<option value="">Pilih Tahun</option>
|
||||
@for ($i = 2024; $i <= date('Y'); $i++)
|
||||
<option value="{{ $i }}" {{ (request()->year ?? date('Y')) == $i ? 'selected' : '' }}>{{ $i }}</option>
|
||||
@endfor
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<div class="form-group mb-3">
|
||||
<label class="small fw-bold text-muted">Status</label>
|
||||
<select name="status" id="status" class="form-control">
|
||||
<option value="">Semua Status</option>
|
||||
@foreach(['On Progress', 'Approved 1', 'Approved 2', 'Closed', 'Rejected'] as $st)
|
||||
<option value="{{ $st }}" {{ request()->status == $st ? 'selected' : '' }}>{{ $st }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-12 text-right mt-2">
|
||||
<button type="submit" class="btn btn-primary px-4 shadow-sm"><i class="fas fa-filter mr-1"></i> Filter</button>
|
||||
<a href="{{ route('reports.all') }}" class="btn btn-outline-secondary px-4 shadow-sm">Reset</a>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@php
|
||||
use App\Helpers\NextCloudHelper;
|
||||
@endphp
|
||||
@php use App\Helpers\NextCloudHelper; @endphp
|
||||
|
||||
<section class="content">
|
||||
<div class="container-fluid">
|
||||
<!-- All Forms Table -->
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card shadow-sm border-0" style="border-radius: 15px;">
|
||||
<div class="card-body">
|
||||
<h4 class="header-title">All Forms</h4>
|
||||
<div class="data-tables">
|
||||
@include('backend.layouts.partials.messages')
|
||||
<div class="table-responsive">
|
||||
<table id="dataTable-table">
|
||||
<thead class="bg-light text-capitalize">
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>No Expense</th>
|
||||
<th>Tipe</th>
|
||||
<th>Nama</th>
|
||||
<th>Region</th>
|
||||
<th>Cabang</th>
|
||||
<th>Total</th>
|
||||
<th>Total Approved</th>
|
||||
<th>Account Number</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach ($forms as $item)
|
||||
<tr>
|
||||
<td>{{ $loop->iteration }}</td>
|
||||
<td>{{ $item->expense_number }}</td>
|
||||
<td>{{ $item->type }}</td>
|
||||
<td>{{ $item->user->name }}</td>
|
||||
<td>{{ $item->user->region->cabang->region->name }}</td>
|
||||
<td>{{ $item->user->cabang->cabang->name }}</td>
|
||||
<td>{{ number_format($item->total, 0, ',', '.') }}</td>
|
||||
<td>{{ 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>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<h4 class="header-title mb-4">Database Konsolidasi (All Forms)</h4>
|
||||
<div class="table-responsive">
|
||||
@include('backend.layouts.partials.messages')
|
||||
<table id="dataTable-table" class="table table-hover w-100">
|
||||
<thead class="bg-light text-capitalize">
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>No Expense</th>
|
||||
<th>Kategori</th>
|
||||
<th>Nama Pengaju</th>
|
||||
<th>Region / Cabang</th>
|
||||
<th>Tgl. Dibuat</th>
|
||||
<th>Nominal (Appr)</th>
|
||||
<th class="text-center">Bukti</th>
|
||||
<th>Status</th>
|
||||
<th>Detail Rejeksi</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach ($forms as $item)
|
||||
<tr>
|
||||
<td>{{ $loop->iteration }}</td>
|
||||
<td class="fw-bold text-primary">{{ $item->expense_number }}</td>
|
||||
<td>
|
||||
<span class="badge badge-light border text-capitalize px-2 py-1">
|
||||
{{ str_replace(['form_', '_'], ['', ' '], (string)$item->type) }}
|
||||
</span>
|
||||
</td>
|
||||
<td>{{ $item->user->name ?? '-' }}</td>
|
||||
<td>
|
||||
<span class="d-block small fw-bold text-dark">{{ $item->user->region->cabang->region->name ?? '-' }}</span>
|
||||
<span class="text-muted small">{{ $item->user->cabang->cabang->name ?? '-' }}</span>
|
||||
</td>
|
||||
<td>
|
||||
@php $createdAt = \Carbon\Carbon::parse($item->created_at); @endphp
|
||||
<div class="fw-bold small">{{ $createdAt->locale('id')->translatedFormat('d F Y') }}</div>
|
||||
<small class="text-muted">{{ $createdAt->format('H:i') }} WIB</small>
|
||||
</td>
|
||||
<td class="text-success fw-bold">
|
||||
{{ $item->approved_total ? 'Rp ' . number_format($item->approved_total, 0, ',', '.') : '-' }}
|
||||
</td>
|
||||
|
||||
<td class="text-center">
|
||||
@php
|
||||
$fileData = [];
|
||||
$imgExts = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp'];
|
||||
if (!empty($item->main_proof)) {
|
||||
$ext = strtolower(pathinfo($item->main_proof, PATHINFO_EXTENSION));
|
||||
$fileData[] = [
|
||||
'url' => NextCloudHelper::getFileUrl($item->main_proof),
|
||||
'is_img' => in_array($ext, $imgExts)
|
||||
];
|
||||
}
|
||||
if(isset($item->extra_attachments)) {
|
||||
foreach ($item->extra_attachments as $att) {
|
||||
$ext = strtolower(pathinfo($att->file_path, PATHINFO_EXTENSION));
|
||||
$fileData[] = [
|
||||
'url' => NextCloudHelper::getFileUrl($att->file_path),
|
||||
'is_img' => in_array($ext, $imgExts)
|
||||
];
|
||||
}
|
||||
}
|
||||
$uniqueFiles = collect($fileData)->unique('url')->values()->all();
|
||||
@endphp
|
||||
|
||||
@if (count($uniqueFiles) > 0)
|
||||
<button type="button" class="btn btn-sm btn-info rounded-pill px-3 shadow-sm btn-preview-bukti"
|
||||
data-expense="{{ $item->expense_number }}"
|
||||
data-files='@json($uniqueFiles)'>
|
||||
<i class="fas fa-eye"></i> {{ count($uniqueFiles) }}
|
||||
</button>
|
||||
@else
|
||||
<span class="text-muted small">-</span>
|
||||
@endif
|
||||
</td>
|
||||
|
||||
<td>
|
||||
@php
|
||||
$badgeClass = match($item->status) {
|
||||
'On Progress' => 'badge-warning text-white',
|
||||
'Approved 1', 'Approved 2', 'Closed', 'Final Approved' => 'badge-success text-white',
|
||||
'Rejected' => 'badge-danger text-white',
|
||||
default => 'badge-secondary'
|
||||
};
|
||||
@endphp
|
||||
<span class="badge {{ $badgeClass }} px-3 py-2">{{ $item->status }}</span>
|
||||
|
||||
{{-- Tgl Final Approved --}}
|
||||
@if(isset($item->report_date) && in_array($item->status, ['Approved 2', 'Closed', 'Final Approved']))
|
||||
<div class="mt-2" style="line-height: 1.2;">
|
||||
<small class="text-success fw-bold d-block" style="font-size: 10px;">
|
||||
<i class="fas fa-check-double mr-1"></i> Final Approved:
|
||||
</small>
|
||||
<small class="text-muted d-block" style="font-size: 10px;">
|
||||
{{ \Carbon\Carbon::parse($item->report_date)->translatedFormat('d M Y') }}
|
||||
</small>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
{{-- Penanda Tgl Waktu Rejeksi --}}
|
||||
@if($item->status == 'Rejected' && isset($item->rejected_at))
|
||||
<div class="mt-2" style="line-height: 1.2;">
|
||||
<small class="text-danger fw-bold d-block" style="font-size: 10px;">
|
||||
<i class="fas fa-times-circle mr-1"></i> Rejected At:
|
||||
</small>
|
||||
<small class="text-muted d-block" style="font-size: 10px;">
|
||||
{{ \Carbon\Carbon::parse($item->rejected_at)->translatedFormat('d M Y H:i') }} WIB
|
||||
</small>
|
||||
</div>
|
||||
@endif
|
||||
</td>
|
||||
|
||||
{{-- Kolom Detail Rejeksi Sinkron --}}
|
||||
<td>
|
||||
@if($item->status == 'Rejected')
|
||||
<div class="mt-1 p-2 bg-light border border-danger rounded" style="line-height: 1.3; min-width: 160px; border-style: dashed !important;">
|
||||
<div class="mb-1">
|
||||
<small class="fw-bold text-dark" style="font-size: 10px;">Oleh:</small>
|
||||
<small class="text-primary font-weight-bold" style="font-size: 10px;">{{ $item->rejector->name ?? $item->rejected_by ?? 'System' }}</small>
|
||||
</div>
|
||||
<div>
|
||||
<small class="fw-bold text-dark" style="font-size: 10px;">Alasan:</small>
|
||||
<small class="text-danger font-italic d-block mt-1" style="font-size: 10px; line-height: 1.1;">"{{ $item->remarks ?? '-' }}"</small>
|
||||
</div>
|
||||
</div>
|
||||
@else
|
||||
<span class="text-muted small">-</span>
|
||||
@endif
|
||||
</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{{-- MODAL PREVIEW --}}
|
||||
<div class="modal fade" id="modalPreviewBukti" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered modal-lg">
|
||||
<div class="modal-content" style="border-radius: 15px; border: none; overflow: hidden;">
|
||||
<div class="modal-header bg-primary text-white border-0">
|
||||
<h5 class="modal-title fw-bold"><i class="fas fa-images mr-2"></i>Lampiran Bukti <span id="textExpenseNum"></span></h5>
|
||||
<button type="button" class="close text-white" data-dismiss="modal">×</button>
|
||||
</div>
|
||||
<div class="modal-body bg-light" id="containerPreview" style="max-height: 70vh; overflow-y: auto; padding: 25px;"></div>
|
||||
<div class="modal-footer bg-light border-0">
|
||||
<button type="button" class="btn btn-secondary rounded-pill px-4" data-dismiss="modal">Tutup</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- MODAL ZOOM --}}
|
||||
<div class="modal fade" id="modalImageFull" tabindex="-2" role="dialog" aria-hidden="true" style="background: rgba(0,0,0,0.85); z-index: 1060;">
|
||||
<div class="modal-dialog modal-dialog-centered modal-xl">
|
||||
<div class="modal-content" style="background: transparent; border: none;">
|
||||
<div class="modal-header border-0 p-0">
|
||||
<button type="button" class="close text-white" data-dismiss="modal" style="font-size: 2.5rem; position: absolute; right: 15px; top: 10px; z-index: 999;">×</button>
|
||||
</div>
|
||||
<div class="modal-body p-0 text-center">
|
||||
<img src="" id="imgFullDisplay" style="max-width: 100%; max-height: 90vh; border-radius: 8px;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@section('scripts')
|
||||
<script>
|
||||
if ($('#dataTable-table').length) {
|
||||
$('#dataTable-table').DataTable({
|
||||
responsive: false,
|
||||
pagging: true,
|
||||
dom: 'Blfrtip',
|
||||
lengthMenu: [ [10, 25, 50, -1], [10, 25, 50, "All"] ], // Control the entries dropdown
|
||||
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'
|
||||
]
|
||||
});
|
||||
}
|
||||
</script>
|
||||
$(document).ready(function() {
|
||||
if ($('#dataTable-table').length) {
|
||||
$('#dataTable-table').DataTable({
|
||||
responsive: false,
|
||||
dom: 'Blfrtip',
|
||||
deferRender: true, // Optimasi performa loading render DOM fisik tabel
|
||||
lengthMenu: [ [10, 25, 50, -1], [10, 25, 50, "All"] ],
|
||||
buttons: [
|
||||
{
|
||||
extend: 'excelHtml5',
|
||||
text: '<i class="fas fa-file-excel mr-1"></i> Excel',
|
||||
className: 'btn-success',
|
||||
exportOptions: {
|
||||
columns: [0, 1, 2, 3, 4, 5, 6, 8, 9],
|
||||
format: {
|
||||
body: function (data, row, column, node) {
|
||||
let text = node.textContent || node.innerText || "";
|
||||
text = text.replace(/\s+/g, ' ').trim();
|
||||
|
||||
if (column === 6) {
|
||||
return text.replace(/Rp\s?|[.]/g, '');
|
||||
}
|
||||
return text;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
extend: 'pdfHtml5',
|
||||
text: '<i class="fas fa-file-pdf mr-1"></i> PDF',
|
||||
className: 'btn-danger',
|
||||
orientation: 'landscape',
|
||||
pageSize: 'A4',
|
||||
exportOptions: { columns: [0, 1, 2, 3, 4, 5, 6, 8, 9] },
|
||||
customize: function(doc) {
|
||||
doc.defaultStyle.fontSize = 7;
|
||||
doc.styles.tableHeader.fontSize = 8;
|
||||
}
|
||||
},
|
||||
'colvis'
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
<script>
|
||||
document.getElementById('region').addEventListener('change', function () {
|
||||
const regionCode = this.value;
|
||||
const cabangSelect = document.getElementById('cabang');
|
||||
$(document).on('click', '.btn-preview-bukti', function(e) {
|
||||
e.preventDefault();
|
||||
const expenseNum = $(this).data('expense');
|
||||
const files = $(this).data('files');
|
||||
let html = '<div class="row">';
|
||||
|
||||
// Clear existing options
|
||||
cabangSelect.innerHTML = '<option value="">Semua Cabang</option>';
|
||||
$('#textExpenseNum').text('#' + expenseNum);
|
||||
$('#containerPreview').html('<div class="text-center py-5"><i class="fas fa-spinner fa-spin fa-3x text-primary"></i></div>');
|
||||
|
||||
if (regionCode) {
|
||||
fetch(`/api/cabang-by-region/${regionCode}`)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
data.forEach(cabang => {
|
||||
const option = document.createElement('option');
|
||||
option.value = cabang.code;
|
||||
option.textContent = cabang.name;
|
||||
cabangSelect.appendChild(option);
|
||||
});
|
||||
})
|
||||
.catch(error => console.error('Error fetching cabang data:', error));
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@endsection
|
||||
if(files && files.length > 0) {
|
||||
files.forEach((file) => {
|
||||
html += `
|
||||
<div class="col-md-6 mb-4">
|
||||
<div class="card h-100 border-0 shadow-sm rounded-lg overflow-hidden">
|
||||
<div class="card-body p-2 text-center bg-white">
|
||||
<div class="mb-3" style="height: 220px; display: flex; align-items: center; justify-content: center; background: #f8f9fa; border-radius: 8px; overflow: hidden; border: 1px solid #eee;">
|
||||
${file.is_img
|
||||
? `<img src="${file.url}" class="img-fluid" style="max-height: 100%; object-fit: contain; cursor: zoom-in;" onclick="openFullImage('${file.url}')">`
|
||||
: `<div class="text-center"><i class="fas fa-file-pdf fa-4x text-danger"></i><p class="small text-muted mt-2 fw-bold">Dokumen Digital</p></div>`
|
||||
}
|
||||
</div>
|
||||
<div class="btn-group w-100">
|
||||
${file.is_img
|
||||
? `<button type="button" onclick="openFullImage('${file.url}')" class="btn btn-outline-primary btn-sm px-3"><i class="fas fa-eye"></i> Preview</button>`
|
||||
: `<a href="${file.url}" target="_blank" class="btn btn-outline-primary btn-sm px-3"><i class="fas fa-external-link-alt"></i> Open PDF</a>`
|
||||
}
|
||||
<a href="${file.url}" download class="btn btn-primary btn-sm px-3"><i class="fas fa-download"></i> Download</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
});
|
||||
}
|
||||
$('#containerPreview').html(html + '</div>');
|
||||
$('#modalPreviewBukti').modal('show');
|
||||
});
|
||||
|
||||
function loadCabang(regionCode, selectedCabang = null) {
|
||||
const cabangSelect = $('#cabang');
|
||||
if (regionCode) {
|
||||
fetch(`/api/cabang-by-region/${regionCode}`)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
cabangSelect.html('<option value="">Semua Cabang</option>');
|
||||
data.forEach(cabang => {
|
||||
const isSelected = (selectedCabang && cabang.code === selectedCabang) ? 'selected' : '';
|
||||
cabangSelect.append(`<option value="${cabang.code}" ${isSelected}>${cabang.name}</option>`);
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
$('#region').on('change', function() { loadCabang(this.value); });
|
||||
const currentRegion = '{{ request()->region }}';
|
||||
const currentCabang = '{{ request()->cabang }}';
|
||||
if (currentRegion) { loadCabang(currentRegion, currentCabang); }
|
||||
});
|
||||
|
||||
function openFullImage(url) {
|
||||
$('#imgFullDisplay').attr('src', url);
|
||||
$('#modalImageFull').modal('show');
|
||||
}
|
||||
</script>
|
||||
@endsection
|
||||
@@ -9,221 +9,440 @@
|
||||
<div class="container-fluid">
|
||||
<div class="row mb-2">
|
||||
<div class="col-sm-6">
|
||||
<h1>{{ $pageInfo['title'] }}</h1>
|
||||
<h1 class="fw-bold">{{ $pageInfo['title'] }}</h1>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<ol class="breadcrumb float-sm-right">
|
||||
<li class="breadcrumb-form"><a href="{{ route('admin.dashboard') }}">{{ __('Dashboard') }}</a> / </li>
|
||||
<li class="breadcrumb-form active"> {{ $pageInfo['title'] }}</li>
|
||||
<li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">{{ __('Dashboard') }}</a></li>
|
||||
<li class="breadcrumb-item active">{{ $pageInfo['title'] }}</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-4">
|
||||
<div class="col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<form action="{{ route('reports.entertainment') }}" method="GET">
|
||||
<div class="d-flex">
|
||||
<div class="col-md-3">
|
||||
<div class="form-group mb-3">
|
||||
<label for="region">Pilih Region</label>
|
||||
<select name="region" id="region" class="form-control">
|
||||
<option value="">Semua Region</option>
|
||||
@foreach ($regions as $region)
|
||||
<option value="{{ $region->code }}" {{ request()->region == $region->code ? 'selected' : '' }}>
|
||||
{{ $region->name }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="form-group mb-3">
|
||||
<label for="cabang">Pilih Cabang</label>
|
||||
<select name="cabang" id="cabang" class="form-control">
|
||||
<option value="">Semua Cabang</option>
|
||||
<!-- Cabang options will be dynamically populated -->
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<div class="form-group mb-3">
|
||||
<label for="status">Start Date</label>
|
||||
<input type="date" name="start_date" class="form-control" value="{{ request()->start_date }}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<div class="form-group mb-3">
|
||||
<label for="status">End Date</label>
|
||||
<input type="date" name="end_date" class="form-control" value="{{ request()->end_date }}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<div class="form-group mb-3">
|
||||
<label for="status">Status</label>
|
||||
<select name="status" id="status" class="form-control">
|
||||
<option value="">Semua Status</option>
|
||||
<option value="On Progress" {{ request()->status == 'On Progress' ? 'selected' : '' }}>On Progress</option>
|
||||
<option value="Approved 1" {{ request()->status == 'Approved 1' ? 'selected' : '' }}>Approved 1</option>
|
||||
<option value="Approved 2" {{ request()->status == 'Approved 2' ? 'selected' : '' }}>Approved 2</option>
|
||||
<option value="Closed" {{ request()->status == 'Closed' ? 'selected' : '' }}>Closed</option>
|
||||
<option value="Rejected" {{ request()->status == 'Rejected' ? 'selected' : '' }}>Rejected</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-3">
|
||||
<div class="form-group">
|
||||
<button type="submit" class="btn btn-primary">Filter</button>
|
||||
<a href="{{ route('reports.entertainment') }}" class="btn btn-secondary">Reset</a>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Filter Section - Sistem Periode Bulan Akuntansi (11 s/d 13 Bulan Berikut) --}}
|
||||
<div class="row mt-4">
|
||||
<div class="col-md-12">
|
||||
<div class="card shadow-sm border-0" style="border-radius: 15px;">
|
||||
<div class="card-body">
|
||||
<form action="{{ route('reports.entertainment') }}" method="GET">
|
||||
<div class="row align-items-end">
|
||||
<div class="col-md-3">
|
||||
<div class="form-group mb-3">
|
||||
<label class="small fw-bold text-muted">Pilih Region</label>
|
||||
<select name="region" id="region" class="form-control select2">
|
||||
<option value="">Semua Region</option>
|
||||
@foreach ($regions as $region)
|
||||
<option value="{{ $region->code }}" {{ request()->region == $region->code ? 'selected' : '' }}>
|
||||
{{ $region->name }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="form-group mb-3">
|
||||
<label class="small fw-bold text-muted">Pilih Cabang</label>
|
||||
<select name="cabang" id="cabang" class="form-control select2">
|
||||
<option value="">Semua Cabang</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<div class="form-group mb-3">
|
||||
<label class="small fw-bold text-muted">Periode Bulan</label>
|
||||
<select name="month" id="month" class="form-control">
|
||||
<option value="">Pilih Bulan</option>
|
||||
@foreach(['january','february','march','april','may','june','july','august','september','october','november','december'] as $m)
|
||||
<option value="{{ $m }}" {{ (request()->month ?? strtolower(date('F'))) == $m ? 'selected' : '' }}>{{ ucfirst($m) }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<div class="form-group mb-3">
|
||||
<label class="small fw-bold text-muted">Tahun</label>
|
||||
<select name="year" id="year" class="form-control">
|
||||
<option value="">Pilih Tahun</option>
|
||||
@for ($i = 2024; $i <= date('Y'); $i++)
|
||||
<option value="{{ $i }}" {{ (request()->year ?? date('Y')) == $i ? 'selected' : '' }}>{{ $i }}</option>
|
||||
@endfor
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<div class="form-group mb-3">
|
||||
<label class="small fw-bold text-muted">Status</label>
|
||||
<select name="status" id="status" class="form-control">
|
||||
<option value="">Semua Status</option>
|
||||
@foreach(['On Progress', 'Approved 1', 'Approved 2', 'Closed', 'Rejected'] as $st)
|
||||
<option value="{{ $st }}" {{ request()->status == $st ? 'selected' : '' }}>{{ $st }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-12 text-right mt-2">
|
||||
<button type="submit" class="btn btn-primary px-4 shadow-sm"><i class="fas fa-filter mr-1"></i> Filter</button>
|
||||
<a href="{{ route('reports.entertainment') }}" class="btn btn-outline-secondary px-4 shadow-sm">Reset</a>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@php
|
||||
use App\Helpers\NextCloudHelper;
|
||||
@endphp
|
||||
@php use App\Helpers\NextCloudHelper; @endphp
|
||||
|
||||
<section class="content">
|
||||
<div class="container-fluid">
|
||||
<!-- Form Entertainment Presentation Table -->
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card shadow-sm border-0" style="border-radius: 15px;">
|
||||
<div class="card-body">
|
||||
<h4 class="header-title">Form Entertainment & Presentation</h4>
|
||||
<div class="data-tables">
|
||||
@include('backend.layouts.partials.messages')
|
||||
<div class="table-responsive">
|
||||
<table id="dataTable-table">
|
||||
<thead class="bg-light text-capitalize">
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>No Expense</th>
|
||||
<th>User</th>
|
||||
<th>Region</th>
|
||||
<th>Cabang</th>
|
||||
<th>Nama Penerima</th>
|
||||
<th>Tanggal</th>
|
||||
<th>Jenis</th>
|
||||
<th>Keterangan</th>
|
||||
<th>Total</th>
|
||||
<th>Total Approved</th>
|
||||
<th>Bukti</th>
|
||||
<th>Account Number</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach ($forms as $item)
|
||||
<tr>
|
||||
<td>{{ $loop->iteration }}</td>
|
||||
<td>{{ $item->expense_number }}</td>
|
||||
<td>{{ $item->user->name }}</td>
|
||||
<td>{{ $item->user->region->cabang->region->name }}</td>
|
||||
<td>{{ $item->user->cabang->cabang->name }}</td>
|
||||
<td>{{ $item->name }}</td>
|
||||
<td>{{ \Carbon\Carbon::parse($item->tanggal)->locale('id')->isoFormat('D MMMM Y') }}</td>
|
||||
<td>{{ $item->jenis }}</td>
|
||||
<td>{{ $item->keterangan }}</td>
|
||||
<td>{{ number_format($item->total, 0, ',', '.') }}</td>
|
||||
<td>{{ number_format($item->approved_total, 0, ',', '.') }}</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>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<h4 class="header-title mb-4">List Report Entertainment & Presentation</h4>
|
||||
<div class="table-responsive">
|
||||
<table id="dataTable-table" class="table table-hover w-100">
|
||||
<thead class="bg-light text-capitalize">
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>No Expense</th>
|
||||
<th>Account No.</th>
|
||||
<th>Pengaju / Penerima</th>
|
||||
<th>NIK/NPWP & Alamat</th>
|
||||
<th>Nama Perusahaan</th>
|
||||
<th>Jabatan</th>
|
||||
<th>Jenis Usaha</th>
|
||||
<th>Region / Cabang</th>
|
||||
<th>Tgl. Digunakan & Dibuat</th>
|
||||
<th>Jenis & Keterangan</th>
|
||||
<th>Total Approved</th>
|
||||
<th class="text-center">Bukti</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach ($forms as $item)
|
||||
<tr>
|
||||
<td>{{ $loop->iteration }}</td>
|
||||
<td class="fw-bold text-primary">{{ $item->expense_number }}</td>
|
||||
<td class="fw-bold text-center">{{ $item->account_number ?? ($item->kategori->account_number ?? '-') }}</td>
|
||||
<td>
|
||||
<div class="fw-bold">{{ $item->user->name ?? '-' }}</div>
|
||||
<small class="text-muted italic">Penerima: {{ $item->name }}</small>
|
||||
</td>
|
||||
<td>
|
||||
<div class="small fw-bold text-dark">{{ $item->nik_or_npwp ?? '-' }}</div>
|
||||
<div class="small text-muted text-truncate" style="max-width: 150px;" title="{{ $item->alamat }}">
|
||||
{{ $item->alamat ?? '-' }}
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td class="small">{{ $item->nama_perusahaan ?? '-' }}</td>
|
||||
<td class="small">{{ $item->jabatan ?? '-' }}</td>
|
||||
<td class="small">{{ $item->jenis_usaha ?? '-' }}</td>
|
||||
|
||||
<td>
|
||||
<span class="d-block small fw-bold">{{ $item->user->region->cabang->region->name ?? '-' }}</span>
|
||||
<span class="text-muted small">{{ $item->user->cabang->cabang->name ?? '-' }}</span>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<div class="small fw-bold text-dark" title="Tgl Penggunaan">
|
||||
<i class="far fa-calendar-check mr-1 text-primary"></i>{{ \Carbon\Carbon::parse($item->tanggal)->format('d M Y') }}
|
||||
</div>
|
||||
<div class="small text-muted mt-1" title="Tgl Dibuat">
|
||||
<i class="fas fa-clock mr-1"></i>{{ $item->created_at->format('d M Y') }} <span class="ml-1">{{ $item->created_at->format('H:i') }}</span>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<span class="badge badge-light border mb-1">{{ $item->jenis }}</span>
|
||||
<div class="small text-muted text-truncate" style="max-width: 120px;" title="{{ $item->keterangan }}">{{ $item->keterangan }}</div>
|
||||
</td>
|
||||
<td class="fw-bold text-success">
|
||||
{{ $item->approved_total ? number_format($item->approved_total, 0, ',', '.') : '-' }}
|
||||
</td>
|
||||
|
||||
<td class="text-center">
|
||||
@php
|
||||
$fileData = [];
|
||||
$imgExts = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp'];
|
||||
|
||||
if (!empty($item->bukti_total)) {
|
||||
$extension = strtolower(pathinfo($item->bukti_total, PATHINFO_EXTENSION));
|
||||
$fileData[] = [
|
||||
'url' => NextCloudHelper::getFileUrl($item->bukti_total),
|
||||
'is_img' => in_array($extension, $imgExts)
|
||||
];
|
||||
}
|
||||
|
||||
if ($item->attachments) {
|
||||
foreach ($item->attachments as $att) {
|
||||
if ($att->file_path) {
|
||||
$extension = strtolower(pathinfo($att->file_path, PATHINFO_EXTENSION));
|
||||
$fileData[] = [
|
||||
'url' => NextCloudHelper::getFileUrl($att->file_path),
|
||||
'is_img' => in_array($extension, $imgExts)
|
||||
];
|
||||
}
|
||||
}
|
||||
}
|
||||
$uniqueFiles = collect($fileData)->unique('url')->values()->all();
|
||||
@endphp
|
||||
|
||||
@if (count($uniqueFiles) > 0)
|
||||
<button type="button" class="btn btn-sm btn-info rounded-pill px-3 shadow-sm btn-preview-bukti"
|
||||
data-expense="{{ $item->expense_number }}"
|
||||
data-files='@json($uniqueFiles)'>
|
||||
<i class="fas fa-eye"></i> {{ count($uniqueFiles) }}
|
||||
</button>
|
||||
@else
|
||||
<span class="text-muted small">-</span>
|
||||
@endif
|
||||
</td>
|
||||
|
||||
<td>
|
||||
@php
|
||||
$badgeClass = match($item->status) {
|
||||
'On Progress' => 'badge-warning text-white',
|
||||
'Approved 1', 'Approved 2', 'Closed' => 'badge-success text-white',
|
||||
'Rejected' => 'badge-danger text-white',
|
||||
default => 'badge-secondary'
|
||||
};
|
||||
@endphp
|
||||
<span class="badge {{ $badgeClass }} px-3 py-2">{{ $item->status }}</span>
|
||||
|
||||
{{-- BLOK AUDIT TRAIL REJECTED --}}
|
||||
@if($item->status === 'Rejected')
|
||||
<div class="mt-2 p-2 bg-light border border-danger rounded" style="line-height: 1.3; min-width: 160px; border-style: dashed !important;">
|
||||
<small class="text-danger fw-bold d-block mb-1" style="font-size: 10px;">
|
||||
<i class="fas fa-times-circle mr-1"></i> Detail Penolakan:
|
||||
</small>
|
||||
<small class="text-dark d-block" style="font-size: 10px;">
|
||||
<strong>Oleh:</strong> {{ $item->rejector->name ?? $item->rejected_by ?? 'System' }}
|
||||
</small>
|
||||
@if($item->rejected_at)
|
||||
<small class="text-muted d-block" style="font-size: 10px;">
|
||||
<strong>Waktu:</strong> {{ \Carbon\Carbon::parse($item->rejected_at)->translatedFormat('d M Y H:i') }} WIB
|
||||
</small>
|
||||
@elseif($item->updated_at && $item->remarks)
|
||||
<small class="text-muted d-block" style="font-size: 10px;">
|
||||
<strong>Waktu:</strong> {{ \Carbon\Carbon::parse($item->updated_at)->translatedFormat('d M Y H:i') }} WIB
|
||||
</small>
|
||||
@endif
|
||||
@if($item->remarks)
|
||||
<small class="text-danger d-block mt-1 italic" style="font-size: 10px; line-height: 1.1;">
|
||||
<strong>Ket:</strong> "{{ $item->remarks }}"
|
||||
</small>
|
||||
@endif
|
||||
</div>
|
||||
@endif
|
||||
|
||||
{{-- BLOK EXISTING FINAL APPROVED / CLOSED --}}
|
||||
@if($item->final_approved_at && in_array($item->status, ['Approved 2', 'Closed']))
|
||||
<div class="mt-2" style="line-height: 1.2;">
|
||||
<small class="text-success fw-bold d-block" style="font-size: 10px;">
|
||||
<i class="fas fa-check-double mr-1"></i> Final Approved:
|
||||
</small>
|
||||
<small class="text-muted d-block" style="font-size: 10px;">
|
||||
{{ \Carbon\Carbon::parse($item->final_approved_at)->translatedFormat('d M Y') }}
|
||||
<span class="ml-1">{{ \Carbon\Carbon::parse($item->final_approved_at)->format('H:i') }} WIB</span>
|
||||
</small>
|
||||
</div>
|
||||
@endif
|
||||
</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{{-- MODAL 1: DAFTAR LAMPIRAN --}}
|
||||
<div class="modal fade" id="modalPreviewBukti" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered modal-lg">
|
||||
<div class="modal-content" style="border-radius: 15px; border: none; overflow: hidden;">
|
||||
<div class="modal-header bg-primary text-white border-0">
|
||||
<h5 class="modal-title fw-bold"><i class="fas fa-images mr-2"></i>Lampiran Bukti <span id="textExpenseNum"></span></h5>
|
||||
<button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body bg-light" id="containerPreview" style="max-height: 70vh; overflow-y: auto; padding: 25px;"></div>
|
||||
<div class="modal-footer bg-light border-0">
|
||||
<button type="button" class="btn btn-secondary rounded-pill px-4" data-dismiss="modal">Tutup</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- MODAL 2: ZOOM GAMBAR FULL --}}
|
||||
<div class="modal fade" id="modalImageFull" tabindex="-2" role="dialog" aria-hidden="true" style="background: rgba(0,0,0,0.85); z-index: 1060;">
|
||||
<div class="modal-dialog modal-dialog-centered modal-xl">
|
||||
<div class="modal-content" style="background: transparent; border: none;">
|
||||
<div class="modal-header border-0 p-0">
|
||||
<button type="button" class="close text-white" data-dismiss="modal" style="font-size: 2.5rem; position: absolute; right: 15px; top: 10px; z-index: 999; opacity: 1;">×</button>
|
||||
</div>
|
||||
<div class="modal-body p-0 text-center">
|
||||
<img src="" id="imgFullDisplay" style="max-width: 100%; max-height: 90vh; border-radius: 8px; box-shadow: 0 0 30px rgba(0,0,0,0.5);">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@section('scripts')
|
||||
<script>
|
||||
if ($('#dataTable-table').length) {
|
||||
$('#dataTable-table').DataTable({
|
||||
responsive: false,
|
||||
dom: 'Blfrtip',
|
||||
lengthMenu: [ [10, 50, 100, -1], [10, 50, 100, "All"] ], // Control the entries dropdown
|
||||
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'
|
||||
]
|
||||
});
|
||||
}
|
||||
</script>
|
||||
$(document).ready(function() {
|
||||
if ($('#dataTable-table').length) {
|
||||
$('#dataTable-table').DataTable({
|
||||
responsive: false,
|
||||
dom: 'Blfrtip',
|
||||
deferRender: true, // Membuat pemuatan ribuan baris menjadi instan & ringan
|
||||
lengthMenu: [ [10, 50, 100, -1], [10, 50, 100, "All"] ],
|
||||
buttons: [
|
||||
{
|
||||
extend: 'excelHtml5',
|
||||
text: '<i class="fas fa-file-excel mr-1"></i> Excel',
|
||||
className: 'btn-success',
|
||||
exportOptions: {
|
||||
columns: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 13],
|
||||
format: {
|
||||
body: function (data, row, column, node) {
|
||||
let text = node.textContent || node.innerText || "";
|
||||
text = text.replace(/\s+/g, ' ').trim();
|
||||
|
||||
<script>
|
||||
document.getElementById('region').addEventListener('change', function () {
|
||||
const regionCode = this.value;
|
||||
const cabangSelect = document.getElementById('cabang');
|
||||
if (column === 11) {
|
||||
return text.replace(/[.]/g, '');
|
||||
}
|
||||
return text;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
extend: 'pdfHtml5',
|
||||
text: '<i class="fas fa-file-pdf mr-1"></i> PDF',
|
||||
className: 'btn-danger',
|
||||
orientation: 'landscape',
|
||||
pageSize: 'A4',
|
||||
exportOptions: {
|
||||
columns: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 13],
|
||||
format: {
|
||||
body: function (data, row, column, node) {
|
||||
let text = node.textContent || node.innerText || "";
|
||||
text = text.replace(/\s+/g, ' ').trim();
|
||||
|
||||
// Clear existing options
|
||||
cabangSelect.innerHTML = '<option value="">Semua Cabang</option>';
|
||||
if (column === 11) {
|
||||
return text.replace(/[.]/g, '');
|
||||
}
|
||||
return text;
|
||||
}
|
||||
}
|
||||
},
|
||||
customize: function(doc) {
|
||||
doc.defaultStyle.fontSize = 6;
|
||||
doc.styles.tableHeader.fontSize = 7;
|
||||
doc.styles.tableHeader.alignment = 'center';
|
||||
doc.pageMargins = [10, 15, 10, 15];
|
||||
|
||||
if (regionCode) {
|
||||
fetch(`/api/cabang-by-region/${regionCode}`)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
data.forEach(cabang => {
|
||||
const option = document.createElement('option');
|
||||
option.value = cabang.code;
|
||||
option.textContent = cabang.name;
|
||||
cabangSelect.appendChild(option);
|
||||
});
|
||||
})
|
||||
.catch(error => console.error('Error fetching cabang data:', error));
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@endsection
|
||||
var tableObj;
|
||||
for (var i = 0; i < doc.content.length; i++) {
|
||||
if (doc.content[i].table !== undefined) {
|
||||
tableObj = doc.content[i];
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if(tableObj) {
|
||||
tableObj.table.widths = [
|
||||
'2%', '11%', '6%', '8%', '9%', '8%', '7%', '7%', '8%', '9%', '11%', '8%', '6%'
|
||||
];
|
||||
tableObj.layout = {
|
||||
hLineWidth: function(i, node) { return 0.5; },
|
||||
vLineWidth: function(i, node) { return 0.5; },
|
||||
hLineColor: function(i, node) { return '#aaa'; },
|
||||
vLineColor: function(i, node) { return '#aaa'; },
|
||||
paddingLeft: function(i, node) { return 3; },
|
||||
paddingRight: function(i, node) { return 3; },
|
||||
paddingTop: function(i, node) { return 3; },
|
||||
paddingBottom: function(i, node) { return 3; }
|
||||
};
|
||||
}
|
||||
}
|
||||
},
|
||||
'colvis'
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
$(document).on('click', '.btn-preview-bukti', function(e) {
|
||||
e.preventDefault();
|
||||
const expenseNum = $(this).data('expense');
|
||||
const files = $(this).data('files');
|
||||
let html = '<div class="row">';
|
||||
|
||||
$('#textExpenseNum').text('#' + expenseNum);
|
||||
$('#containerPreview').html('<div class="text-center py-5"><i class="fas fa-spinner fa-spin fa-3x text-primary"></i></div>');
|
||||
|
||||
if(files && files.length > 0) {
|
||||
files.forEach((file) => {
|
||||
html += `
|
||||
<div class="col-md-6 mb-4">
|
||||
<div class="card h-100 border-0 shadow-sm rounded-lg overflow-hidden">
|
||||
<div class="card-body p-2 text-center bg-white">
|
||||
<div class="thumbnail-container mb-3" style="height: 220px; display: flex; align-items: center; justify-content: center; background: #f8f9fa; border-radius: 8px; overflow: hidden; border: 1px solid #eee;">
|
||||
${file.is_img
|
||||
? `<img src="${file.url}" class="img-fluid" style="max-height: 100%; object-fit: contain; cursor: zoom-in;" onclick="openFullImage('${file.url}')">`
|
||||
: `<div class="text-center"><i class="fas fa-file-pdf fa-4x text-danger"></i><p class="small text-muted mt-2 fw-bold">Dokumen Digital</p></div>`
|
||||
}
|
||||
</div>
|
||||
<div class="btn-group w-100">
|
||||
${file.is_img
|
||||
? `<button type="button" onclick="openFullImage('${file.url}')" class="btn btn-outline-primary btn-sm px-3"><i class="fas fa-eye"></i> Preview Full</button>`
|
||||
: `<a href="${file.url}" target="_blank" class="btn btn-outline-primary btn-sm px-3"><i class="fas fa-external-link-alt"></i> Buka PDF</a>`
|
||||
}
|
||||
<a href="${file.url}" download class="btn btn-primary btn-sm px-3"><i class="fas fa-download"></i> Download</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
});
|
||||
}
|
||||
$('#containerPreview').html(html + '</div>');
|
||||
$('#modalPreviewBukti').modal('show');
|
||||
});
|
||||
|
||||
function loadCabang(regionCode, selectedCabang = null) {
|
||||
const cabangSelect = $('#cabang');
|
||||
if (regionCode) {
|
||||
fetch(`/api/cabang-by-region/${regionCode}`)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
cabangSelect.html('<option value="">Semua Cabang</option>');
|
||||
data.forEach(cabang => {
|
||||
const isSelected = (selectedCabang && cabang.code === selectedCabang) ? 'selected' : '';
|
||||
cabangSelect.append(`<option value="${cabang.code}" ${isSelected}>${cabang.name}</option>`);
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
$('#region').on('change', function() { loadCabang(this.value); });
|
||||
const currentRegion = '{{ request()->region }}';
|
||||
const currentCabang = '{{ request()->cabang }}';
|
||||
if (currentRegion) { loadCabang(currentRegion, currentCabang); }
|
||||
});
|
||||
|
||||
function openFullImage(url) {
|
||||
$('#imgFullDisplay').attr('src', url);
|
||||
$('#modalImageFull').modal('show');
|
||||
}
|
||||
</script>
|
||||
@endsection
|
||||
@@ -5,272 +5,272 @@
|
||||
@endsection
|
||||
|
||||
@section('admin-content')
|
||||
<section class="content-header">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<section class="content-header">
|
||||
<div class="container-fluid">
|
||||
<div class="row mb-3">
|
||||
<div class="col-sm-6">
|
||||
<h1>{{ $pageInfo['title'] }}</h1>
|
||||
<h1 class="fw-bold">{{ $pageInfo['title'] }}</h1>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<ol class="breadcrumb float-sm-right">
|
||||
<li class="breadcrumb-form"><a href="{{ route('admin.dashboard') }}">{{ __('Dashboard') }}</a> / </li>
|
||||
<li class="breadcrumb-form active"> {{ $pageInfo['title'] }}</li>
|
||||
<li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">{{ __('Dashboard') }}</a></li>
|
||||
<li class="breadcrumb-item active">{{ $pageInfo['title'] }}</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-4">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<ul>
|
||||
<li><b>Cabang:</b> {{ $cabang->name }}</li>
|
||||
<li><b>Periode:</b> {{ ucfirst($month) }} {{ $year }}</li>
|
||||
<li><b>Cost Centre</b> {{ $cabang->cost->code }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@php
|
||||
use App\Helpers\FormHelper;
|
||||
@endphp
|
||||
<div class="row mt-4">
|
||||
<div class="col-12">
|
||||
<div class="card shadow-sm" style="border-radius: 15px;">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-8">
|
||||
<ul class="list-unstyled">
|
||||
<li><b>Cabang:</b> {{ $cabang->name }}</li>
|
||||
<li>
|
||||
<b>Periode:</b> {{ ucfirst($month) }} {{ $year }}
|
||||
<span class="ml-4"><b>Periode Accounting:</b> {{ request()->accounting_period ?? '-' }}</span>
|
||||
</li>
|
||||
<li><b>Cost Centre:</b> {{ $cabang->cost->code }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@php
|
||||
/**
|
||||
* PEMBARUAN LOGIKA:
|
||||
* 1. Building Maintenance Dihapus
|
||||
* 2. Presentation Ditambahkan di urutan ke-7
|
||||
* 3. Account Number disesuaikan dengan image_01e273.png
|
||||
*/
|
||||
$configJurnal = [
|
||||
['name' => 'Telp./ Fax / Email', 'account' => '800 104 00'],
|
||||
['name' => 'Listrik', 'account' => '800 105 00'],
|
||||
['name' => 'Postages / Courier', 'account' => '800 107 00'],
|
||||
['name' => 'Office Supplies / Bank Changes / Interest', 'account' => '800 108 00'],
|
||||
['name' => 'Relokasi', 'account' => '800 111 00'],
|
||||
['name' => 'Meeting / Seminar', 'account' => '800 201 00'],
|
||||
['name' => 'Presentation', 'account' => '800 304 00'], // Urutan ke-7
|
||||
['name' => 'Up Country', 'account' => '800 305 00'],
|
||||
['name' => 'Vehicle Running Cost', 'account' => '800 306 00'],
|
||||
['name' => 'Field Force', 'account' => '800 308 00'],
|
||||
['name' => 'Entertainment', 'account' => '800 309 00'],
|
||||
['name' => 'Rumah Tangga', 'account' => '800 213 00'],
|
||||
];
|
||||
|
||||
$totalDr = 0;
|
||||
$totalCr = 0;
|
||||
$counter = 1;
|
||||
|
||||
// Mencari ID Kategori berdasarkan nama untuk mengambil nilai dari array $nominals
|
||||
$kategoriCollection = collect($kategori);
|
||||
@endphp
|
||||
|
||||
<section class="content">
|
||||
<div class="container-fluid">
|
||||
<!-- All Forms Table -->
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="data-tables">
|
||||
@include('backend.layouts.partials.messages')
|
||||
<div class="table-responsive">
|
||||
<table id="dataTable-table">
|
||||
<thead class="bg-light text-capitalize">
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Type</th>
|
||||
<th>Account Number</th>
|
||||
<th>Dr</th>
|
||||
<th>Cr</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- Dynamic Rows -->
|
||||
@php
|
||||
$totalDr = 0;
|
||||
$totalCr = 0;
|
||||
@endphp
|
||||
@foreach ($kategori as $item)
|
||||
@php
|
||||
$drValue = $nominals[$item->id] ?? 0;
|
||||
$drFormatted = $drValue == 0 ? '' : number_format($drValue, 0, ',', ',');
|
||||
$totalDr += $drValue;
|
||||
@endphp
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card shadow-sm" style="border-radius: 15px;">
|
||||
<div class="card-body">
|
||||
<div class="table-responsive">
|
||||
@include('backend.layouts.partials.messages')
|
||||
<table id="dataTable-table" class="table table-hover w-100">
|
||||
<thead class="bg-light text-capitalize">
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Type</th>
|
||||
<th>Account Number</th>
|
||||
<th>Dr</th>
|
||||
<th>Cr</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{-- 1 - 12: Loop berdasarkan config yang sudah diurutkan --}}
|
||||
@foreach ($configJurnal as $conf)
|
||||
@php
|
||||
// Ambil objek kategori dari database yang namanya cocok
|
||||
$katObj = $kategoriCollection->where('name', $conf['name'])->first();
|
||||
$drValue = $katObj ? ($nominals[$katObj->id] ?? 0) : 0;
|
||||
|
||||
$totalDr += $drValue;
|
||||
@endphp
|
||||
<tr>
|
||||
<td>{{ $counter++ }}</td>
|
||||
<td>{{ $conf['name'] }}</td>
|
||||
<td>{{ $conf['account'] }}</td>
|
||||
<td class="text-right">{{ $drValue == 0 ? '' : number_format($drValue, 0, ',', '.') }}</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
@endforeach
|
||||
|
||||
|
||||
<tr>
|
||||
<td>{{ $loop->iteration }}</td>
|
||||
<td>{{ $item->name }}</td>
|
||||
<td>{{ $item->account_number }}</td>
|
||||
<td>{{ $drFormatted }}</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
{{-- 13: Cash in Bank BCA --}}
|
||||
@php
|
||||
$cashInBankValue = $pettyCashAmount - $totalKategori;
|
||||
@endphp
|
||||
<tr>
|
||||
<td>{{ $counter++ }}</td>
|
||||
<td>Cash in Bank BCA</td>
|
||||
<td>170 600 00</td>
|
||||
@if ($cashInBankValue >= 0)
|
||||
@php $totalDr += $cashInBankValue; @endphp
|
||||
<td class="text-right">{{ $cashInBankValue == 0 ? '' : number_format($cashInBankValue, 0, ',', '.') }}</td>
|
||||
<td></td>
|
||||
@else
|
||||
@php $totalCr += abs($cashInBankValue); @endphp
|
||||
<td></td>
|
||||
<td class="text-right">{{ number_format(abs($cashInBankValue), 0, ',', '.') }}</td>
|
||||
@endif
|
||||
</tr>
|
||||
|
||||
|
||||
@endforeach
|
||||
{{-- 14: Petty Cash --}}
|
||||
<tr>
|
||||
<td>{{ $counter++ }}</td>
|
||||
<td>Petty Cash</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td class="text-right">
|
||||
@php $totalCr += $pettyCashAmount; @endphp
|
||||
{{ $pettyCashAmount == 0 ? '' : number_format($pettyCashAmount, 0, ',', '.') }}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
|
||||
<!-- Cash in Bank BCA -->
|
||||
@php
|
||||
$cashInBankValue = $pettyCashAmount - $totalKategori;
|
||||
$rowIndex = $kategori->count() + 1;
|
||||
@endphp
|
||||
<tr>
|
||||
<td>{{ $rowIndex }}</td>
|
||||
<td>Cash in Bank BCA</td>
|
||||
<td>{{ $kategori_bca->account_number }}</td>
|
||||
@if ($cashInBankValue >= 0)
|
||||
@php
|
||||
$totalDr += $cashInBankValue;
|
||||
@endphp
|
||||
<td>{{ $cashInBankValue == 0 ? '' : number_format($cashInBankValue, 0, ',', ',') }}</td>
|
||||
<td></td>
|
||||
@else
|
||||
@php
|
||||
$totalCr += abs($cashInBankValue);
|
||||
@endphp
|
||||
<td></td>
|
||||
<td>{{ number_format(abs($cashInBankValue), 0, ',', ',') }}</td>
|
||||
@endif
|
||||
</tr>
|
||||
|
||||
{{-- 15: Cash Advance (Opening) --}}
|
||||
<tr>
|
||||
<td>{{ $counter++ }}</td>
|
||||
<td>Cash Advance (Opening Balance)</td>
|
||||
<td>170 600 00</td>
|
||||
<td></td>
|
||||
<td class="text-right">
|
||||
@php $totalCr += 500000; @endphp
|
||||
{{ number_format(500000, 0, ',', '.') }}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- petty cash -->
|
||||
<tr>
|
||||
<td>{{ $rowIndex + 1 }}</td>
|
||||
<td>Petty Cash</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td>
|
||||
@php
|
||||
$totalCr += $pettyCashAmount;
|
||||
echo $pettyCashAmount == 0 ? '' : number_format($pettyCashAmount, 0, ',', ',');
|
||||
@endphp
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
{{-- Static Rows --}}
|
||||
<tr>
|
||||
<td>{{ $rowIndex + 2 }}</td>
|
||||
<td>Cash Advance (Opening Balance)</td>
|
||||
<td>{{ $kategori_bca->account_number }}</td>
|
||||
<td></td>
|
||||
<td>
|
||||
@php
|
||||
$totalCr += 500000;
|
||||
@endphp
|
||||
{{ number_format(500000, 0, ',', ',') }}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>{{ $rowIndex + 3 }}</td>
|
||||
<td>Cash Advance (Ending Balance)</td>
|
||||
<td>{{ $kategori_bca->account_number }}</td>
|
||||
<td>
|
||||
@php
|
||||
$totalDr += 500000;
|
||||
@endphp
|
||||
{{ number_format(500000, 0, ',', ',') }}
|
||||
</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colspan="3" class="text-right"><strong>Total</strong></td>
|
||||
<td>{{ number_format($totalDr, 0, ',', '.') }}</td>
|
||||
<td>{{ number_format($totalCr, 0, ',', '.') }}</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{-- 16: Cash Advance (Ending) --}}
|
||||
<tr>
|
||||
<td>{{ $counter++ }}</td>
|
||||
<td>Cash Advance (Ending Balance)</td>
|
||||
<td>170 600 00</td>
|
||||
<td class="text-right">
|
||||
@php $totalDr += 500000; @endphp
|
||||
{{ number_format(500000, 0, ',', '.') }}
|
||||
</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot class="bg-light">
|
||||
<tr>
|
||||
<td colspan="3" class="text-right"><strong>Total</strong></td>
|
||||
<td class="text-right"><strong>{{ number_format($totalDr, 0, ',', '.') }}</strong></td>
|
||||
<td class="text-right"><strong>{{ number_format($totalCr, 0, ',', '.') }}</strong></td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@endsection
|
||||
|
||||
@section('scripts')
|
||||
<script>
|
||||
if ($('#dataTable-table').length) {
|
||||
$('#dataTable-table').DataTable({
|
||||
responsive: false,
|
||||
dom: 'Bfrtip',
|
||||
buttons: [
|
||||
{
|
||||
extend: 'excel',
|
||||
text: 'Export Excel',
|
||||
customize: function (xlsx) {
|
||||
var sheet = xlsx.xl.worksheets['sheet1.xml'];
|
||||
var styles = xlsx.xl['styles.xml'];
|
||||
var cellXfs = $(styles).find('cellXfs');
|
||||
|
||||
// Add number format style for thousands separator
|
||||
var numFmtId = 3; // Built-in ID for thousands separator
|
||||
var xfCount = cellXfs.children().length;
|
||||
cellXfs.append(`
|
||||
<xf numFmtId="${numFmtId}" xfId="0" applyNumberFormat="1">
|
||||
<alignment horizontal="right"/>
|
||||
</xf>
|
||||
`);
|
||||
var xfIndex = xfCount; // Index of the new style
|
||||
|
||||
// Add additional info and blank row
|
||||
var sheetData = $(sheet).find('sheetData');
|
||||
var existingRows = sheetData.children();
|
||||
existingRows.last().after(`
|
||||
<row><c t="inlineStr"><is><t></t></is></c></row>
|
||||
<row>
|
||||
<c t="inlineStr" s="2"><is><t>Cabang: {{ $cabang->name }}</t></is></c>
|
||||
</row>
|
||||
<row>
|
||||
<c t="inlineStr" s="2"><is><t>Periode: {{ ucfirst($month) }} {{ $year }}</t></is></c>
|
||||
</row>
|
||||
<row>
|
||||
<c t="inlineStr" s="2"><is><t>Cost Centre: {{ $cabang->cost->code }}</t></is></c>
|
||||
</row>
|
||||
`);
|
||||
|
||||
// Update total row with number formatting
|
||||
var totalRow = sheetData.find("row:last");
|
||||
var totalDr = {{ $totalDr }};
|
||||
var totalCr = {{ $totalCr }};
|
||||
|
||||
totalRow.find("c:nth-child(4)").attr({
|
||||
't': 'n', // Set type to number
|
||||
's': xfIndex // Apply the thousands separator style
|
||||
}).html('<v>' + totalDr + '</v>');
|
||||
|
||||
totalRow.find("c:nth-child(5)").attr({
|
||||
't': 'n',
|
||||
's': xfIndex
|
||||
}).html('<v>' + totalCr + '</v>');
|
||||
},
|
||||
},
|
||||
{
|
||||
extend: 'csv',
|
||||
text: 'Export CSV',
|
||||
customize: function (csv) {
|
||||
// Add header information to the CSV
|
||||
var additionalInfo = `
|
||||
Cabang: {{ $cabang->name }}
|
||||
Periode: {{ ucfirst($month) }} {{ $year }}
|
||||
Cost Centre: {{ $cabang->cost->code }}
|
||||
`;
|
||||
return additionalInfo + csv;
|
||||
$(document).ready(function() {
|
||||
if ($('#dataTable-table').length) {
|
||||
$('#dataTable-table').DataTable({
|
||||
responsive: false,
|
||||
dom: 'Blfrtip',
|
||||
paging: false,
|
||||
info: false,
|
||||
buttons: [
|
||||
{
|
||||
extend: 'excelHtml5',
|
||||
text: '<i class="fas fa-file-excel mr-1"></i> Export Excel',
|
||||
className: 'btn-success',
|
||||
title: 'Generate Reports For Jurnal',
|
||||
exportOptions: {
|
||||
columns: [0, 1, 2, 3, 4],
|
||||
format: {
|
||||
body: function (data, row, column, node) {
|
||||
// Bersihkan titik ribuan agar jadi angka murni di Excel
|
||||
if (column === 3 || column === 4) {
|
||||
return data ? data.replace(/[.]/g, '') : '';
|
||||
}
|
||||
return data;
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
extend: 'pdf',
|
||||
text: 'Export PDF',
|
||||
customize: function (doc) {
|
||||
// Add additional information to the PDF
|
||||
doc.content.splice(0, 0, {
|
||||
margin: [0, 0, 0, 12],
|
||||
alignment: 'left',
|
||||
table: {
|
||||
widths: ['*'],
|
||||
body: [
|
||||
[{ text: 'Cabang: {{ $cabang->name }}', style: 'header' }],
|
||||
[{ text: 'Periode: {{ ucfirst($month) }} {{ $year }}', style: 'header' }],
|
||||
[{ text: 'Cost Centre: {{ $cabang->cost->code }}', style: 'header' }]
|
||||
]
|
||||
},
|
||||
layout: 'noBorders'
|
||||
});
|
||||
customize: function (xlsx) {
|
||||
var sheet = xlsx.xl.worksheets['sheet1.xml'];
|
||||
var numrows = 5; // Jumlah baris yang akan ditambahkan di atas
|
||||
var clRow = $('row', sheet);
|
||||
|
||||
// Update index baris yang sudah ada
|
||||
clRow.each(function () {
|
||||
var attr = $(this).attr('r');
|
||||
var ind = parseInt(attr);
|
||||
$(this).attr('r', ind + numrows);
|
||||
});
|
||||
|
||||
// Update referensi cell (A1 -> A6, dsb)
|
||||
$('row c', sheet).each(function () {
|
||||
var attr = $(this).attr('r');
|
||||
var pre = attr.substring(0, 1);
|
||||
var ind = parseInt(attr.substring(1));
|
||||
$(this).attr('r', pre + (ind + numrows));
|
||||
});
|
||||
|
||||
// Fungsi untuk membuat baris XML baru
|
||||
function createRow(index, value) {
|
||||
return '<row r="' + index + '"><c r="A' + index + '" t="inlineStr"><is><t>' + value + '</t></is></c></row>';
|
||||
}
|
||||
},
|
||||
{
|
||||
extend: 'print',
|
||||
text: 'Print'
|
||||
},
|
||||
{
|
||||
extend: 'colvis',
|
||||
text: 'Column Visibility'
|
||||
|
||||
// Tambahkan data informasi di baris atas
|
||||
var r1 = createRow(1, 'Cabang: {{ $cabang->name }}');
|
||||
var r2 = createRow(2, 'Periode: {{ ucfirst($month) }} {{ $year }}');
|
||||
var r3 = createRow(3, 'Periode Accounting: {{ request()->accounting_period ?? "-" }}');
|
||||
var r4 = createRow(4, 'Cost Centre: {{ $cabang->cost->code }}');
|
||||
var r5 = createRow(5, ''); // Baris kosong sebagai pemisah
|
||||
|
||||
var sheetData = $(sheet).find('sheetData');
|
||||
sheetData.prepend(r1 + r2 + r3 + r4 + r5);
|
||||
}
|
||||
],
|
||||
paging: false,
|
||||
info: false,
|
||||
pageLength: -1
|
||||
});
|
||||
}
|
||||
},
|
||||
{
|
||||
extend: 'pdfHtml5',
|
||||
text: '<i class="fas fa-file-pdf mr-1"></i> Export PDF',
|
||||
className: 'btn-danger',
|
||||
orientation: 'landscape',
|
||||
pageSize: 'A4',
|
||||
title: 'Generate Reports For Jurnal',
|
||||
exportOptions: { columns: [0, 1, 2, 3, 4] },
|
||||
customize: function (doc) {
|
||||
// Menambahkan metadata di atas tabel PDF
|
||||
doc.content.splice(0, 0, {
|
||||
margin: [0, 0, 0, 12],
|
||||
alignment: 'left',
|
||||
text: [
|
||||
{ text: 'Cabang: {{ $cabang->name }}\n', bold: true },
|
||||
{ text: 'Periode: {{ ucfirst($month) }} {{ $year }}\n' },
|
||||
{ text: 'Periode Accounting: {{ request()->accounting_period ?? "-" }}\n' },
|
||||
{ text: 'Cost Centre: {{ $cabang->cost->code }}\n' }
|
||||
]
|
||||
});
|
||||
}
|
||||
},
|
||||
{ extend: 'print', text: 'Print', className: 'btn-dark' },
|
||||
'colvis'
|
||||
]
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@endsection
|
||||
@endsection
|
||||
@@ -7,123 +7,147 @@
|
||||
@section('admin-content')
|
||||
<section class="content-header">
|
||||
<div class="container-fluid">
|
||||
<div class="row mt-1">
|
||||
<div class="col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<form action="{{ route('reports.jurnal.generate') }}" method="GET">
|
||||
<div class="d-flex">
|
||||
<div class="col-md-3">
|
||||
<div class="form-group mb-3">
|
||||
<label for="region">Pilih Region</label>
|
||||
<select name="region" id="region" class="form-control">
|
||||
<option value="">Semua Region</option>
|
||||
@foreach ($regions as $region)
|
||||
<option value="{{ $region->code }}" {{ request()->region == $region->code ? 'selected' : '' }}>
|
||||
{{ $region->name }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="form-group mb-3">
|
||||
<label for="cabang">Pilih Cabang</label>
|
||||
<select name="cabang" id="cabang" class="form-control">
|
||||
<option value="">Semua Cabang</option>
|
||||
@foreach ($cabang as $itemCabang)
|
||||
<option value="{{ $itemCabang->code }}" {{ request()->cabang == $itemCabang->code ? 'selected' : '' }}>
|
||||
{{ $itemCabang->name }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="form-group mb-3">
|
||||
<label for="month">Pilih Periode Bulan</label>
|
||||
<select name="month" id="month" class="form-control">
|
||||
<option value="">Pilih Bulan</option>
|
||||
<option value="january" {{ request()->month == 'january' ? 'selected' : '' }}>Januari</option>
|
||||
<option value="february" {{ request()->month == 'february' ? 'selected' : '' }}>Februari</option>
|
||||
<option value="march" {{ request()->month == 'march' ? 'selected' : '' }}>Maret</option>
|
||||
<option value="april" {{ request()->month == 'april' ? 'selected' : '' }}>April</option>
|
||||
<option value="may" {{ request()->month == 'may' ? 'selected' : '' }}>Mei</option>
|
||||
<option value="june" {{ request()->month == 'june' ? 'selected' : '' }}>Juni</option>
|
||||
<option value="july" {{ request()->month == 'july' ? 'selected' : '' }}>Juli</option>
|
||||
<option value="august" {{ request()->month == 'august' ? 'selected' : '' }}>Agustus</option>
|
||||
<option value="september" {{ request()->month == 'september' ? 'selected' : '' }}>September</option>
|
||||
<option value="october" {{ request()->month == 'october' ? 'selected' : '' }}>Oktober</option>
|
||||
<option value="november" {{ request()->month == 'november' ? 'selected' : '' }}>November</option>
|
||||
<option value="december" {{ request()->month == 'december' ? 'selected' : '' }}>Desember</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-2">
|
||||
<div class="col-sm-6">
|
||||
<h1 class="fw-bold">{{ $pageInfo['title'] }}</h1>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<ol class="breadcrumb float-sm-right">
|
||||
<li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">{{ __('Dashboard') }}</a></li>
|
||||
<li class="breadcrumb-item active">{{ $pageInfo['title'] }}</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-3">
|
||||
<div class="form-group mb-3">
|
||||
<label for="year">Pilih Periode Tahun</label>
|
||||
<select name="year" id="year" class="form-control">
|
||||
<option value="">Pilih Tahun</option>
|
||||
@for ($i = 2024; $i <= date('Y'); $i++)
|
||||
<option value="{{ $i }}" {{ request()->year == $i ? 'selected' : '' }}>{{ $i }}</option>
|
||||
@endfor
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{{-- Filter Filter Generator Jurnal - Sinkron 11 s/d 13 Bulan Berikut --}}
|
||||
<div class="row mt-4">
|
||||
<div class="col-md-12">
|
||||
<div class="card shadow-sm border-0" style="border-radius: 15px;">
|
||||
<div class="card-body">
|
||||
<form action="{{ route('reports.jurnal.generate') }}" method="GET" id="formGenerateJurnal">
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<div class="form-group mb-3">
|
||||
<label class="small fw-bold text-muted" for="region">Pilih Region</label>
|
||||
<select name="region" id="region" class="form-control select2">
|
||||
<option value="">Semua Region</option>
|
||||
@foreach ($regions as $region)
|
||||
<option value="{{ $region->code }}" {{ request()->region == $region->code ? 'selected' : '' }}>
|
||||
{{ $region->name }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="form-group mb-3">
|
||||
<label class="small fw-bold text-muted" for="cabang">Pilih Cabang <span class="text-danger">*</span></label>
|
||||
<select name="cabang" id="cabang" class="form-control select2" required>
|
||||
<option value="">Semua Cabang</option>
|
||||
{{-- Data diisi via JavaScript --}}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<div class="form-group mb-3">
|
||||
<label class="small fw-bold text-muted" for="month">Periode Bulan</label>
|
||||
<select name="month" id="month" class="form-control">
|
||||
<option value="">Pilih Bulan</option>
|
||||
@php
|
||||
$months = ['january' => 'Januari', 'february' => 'Februari', 'march' => 'Maret', 'april' => 'April', 'may' => 'Mei', 'june' => 'Juni', 'july' => 'Juli', 'august' => 'Agustus', 'september' => 'September', 'october' => 'Oktober', 'november' => 'November', 'december' => 'Desember'];
|
||||
@endphp
|
||||
@foreach($months as $key => $val)
|
||||
<option value="{{ $key }}" {{ (request()->month ?? strtolower(date('F'))) == $key ? 'selected' : '' }}>{{ $val }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-3">
|
||||
<div class="form-group">
|
||||
<button type="submit" class="btn btn-primary">Filter</button>
|
||||
<a href="{{ route('reports.jurnal') }}" class="btn btn-secondary">Reset</a>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<div class="form-group mb-3">
|
||||
<label class="small fw-bold text-muted" for="year">Periode Tahun</label>
|
||||
<select name="year" id="year" class="form-control">
|
||||
<option value="">Pilih Tahun</option>
|
||||
@for ($i = 2024; $i <= date('Y'); $i++)
|
||||
<option value="{{ $i }}" {{ (request()->year ?? date('Y')) == $i ? 'selected' : '' }}>{{ $i }}</option>
|
||||
@endfor
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-2">
|
||||
<div class="form-group mb-3">
|
||||
<label class="small fw-bold text-muted" for="accounting_period">Periode Accounting</label>
|
||||
<input type="text" name="accounting_period" id="accounting_period" class="form-control" placeholder="Contoh: 2026/04" value="{{ request()->accounting_period ?? date('Y/m') }}">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12 text-right">
|
||||
<div class="form-group mt-2">
|
||||
<button type="submit" class="btn btn-primary px-4 shadow-sm">
|
||||
<i class="fas fa-filter mr-1"></i> Generate Jurnal
|
||||
</button>
|
||||
<a href="{{ route('reports.jurnal') }}" class="btn btn-outline-secondary px-4 shadow-sm">Reset</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@endsection
|
||||
|
||||
@section('scripts')
|
||||
<script>
|
||||
if ($('#dataTable-table').length) {
|
||||
$('#dataTable-table').DataTable({
|
||||
responsive: false,
|
||||
dom: 'Blfrtip',
|
||||
lengthMenu: [ [10, 50, 100, -1], [10, 50, 100, "All"] ], // Control the entries dropdown
|
||||
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'
|
||||
]
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
// Fungsi untuk memuat cabang berdasarkan region
|
||||
function loadCabang(regionCode, selectedCabang = null) {
|
||||
const cabangSelect = $('#cabang');
|
||||
if (regionCode) {
|
||||
fetch(`/api/cabang-by-region/${regionCode}`)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
cabangSelect.html('<option value="">Semua Cabang</option>');
|
||||
data.forEach(cabang => {
|
||||
const isSelected = (selectedCabang && cabang.code === selectedCabang) ? 'selected' : '';
|
||||
cabangSelect.append(`<option value="${cabang.code}" ${isSelected}>${cabang.name}</option>`);
|
||||
});
|
||||
})
|
||||
.catch(error => console.error('Error fetching cabang:', error));
|
||||
} else {
|
||||
cabangSelect.html('<option value="">Semua Cabang</option>');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@endsection
|
||||
// Trigger saat region diubah
|
||||
$('#region').on('change', function() {
|
||||
loadCabang(this.value);
|
||||
});
|
||||
|
||||
// Jalankan saat halaman pertama kali dimuat (untuk persistence filter)
|
||||
const initialRegion = '{{ request()->region }}';
|
||||
const initialCabang = '{{ request()->cabang }}';
|
||||
if (initialRegion) {
|
||||
loadCabang(initialRegion, initialCabang);
|
||||
}
|
||||
|
||||
// Otomatis sinkronisasi ketikan field 'Periode Accounting' saat Dropdown Bulan/Tahun diubah oleh user
|
||||
$('#month, #year').on('change', function() {
|
||||
const yearVal = $('#year').val();
|
||||
const monthSelect = document.getElementById('month');
|
||||
const monthIdx = monthSelect.selectedIndex;
|
||||
|
||||
if(yearVal && monthIdx > 0) {
|
||||
// Merubah index bulan menjadi format 2 digit pad string (ex: April -> "04")
|
||||
const paddedMonth = String(monthIdx).padStart(2, '0');
|
||||
$('#accounting_period').val(`${yearVal}/${paddedMonth}`);
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@endsection
|
||||
@@ -9,211 +9,354 @@
|
||||
<div class="container-fluid">
|
||||
<div class="row mb-2">
|
||||
<div class="col-sm-6">
|
||||
<h1>{{ $pageInfo['title'] }}</h1>
|
||||
<h1 class="fw-bold">{{ $pageInfo['title'] }}</h1>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<ol class="breadcrumb float-sm-right">
|
||||
<li class="breadcrumb-form"><a href="{{ route('admin.dashboard') }}">{{ __('Dashboard') }}</a> / </li>
|
||||
<li class="breadcrumb-form active"> {{ $pageInfo['title'] }}</li>
|
||||
<li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
|
||||
<li class="breadcrumb-item active">{{ $pageInfo['title'] }}</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-4">
|
||||
<div class="col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<form action="{{ route('reports.meeting') }}" method="GET">
|
||||
<div class="d-flex">
|
||||
<div class="col-md-3">
|
||||
<div class="form-group mb-3">
|
||||
<label for="region">Pilih Region</label>
|
||||
<select name="region" id="region" class="form-control">
|
||||
<option value="">Semua Region</option>
|
||||
@foreach ($regions as $region)
|
||||
<option value="{{ $region->code }}" {{ request()->region == $region->code ? 'selected' : '' }}>
|
||||
{{ $region->name }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="form-group mb-3">
|
||||
<label for="cabang">Pilih Cabang</label>
|
||||
<select name="cabang" id="cabang" class="form-control">
|
||||
<option value="">Semua Cabang</option>
|
||||
<!-- Cabang options will be dynamically populated -->
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<div class="form-group mb-3">
|
||||
<label for="status">Start Date</label>
|
||||
<input type="date" name="start_date" class="form-control" value="{{ request()->start_date }}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<div class="form-group mb-3">
|
||||
<label for="status">End Date</label>
|
||||
<input type="date" name="end_date" class="form-control" value="{{ request()->end_date }}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<div class="form-group mb-3">
|
||||
<label for="status">Status</label>
|
||||
<select name="status" id="status" class="form-control">
|
||||
<option value="">Semua Status</option>
|
||||
<option value="On Progress" {{ request()->status == 'On Progress' ? 'selected' : '' }}>On Progress</option>
|
||||
<option value="Approved 1" {{ request()->status == 'Approved 1' ? 'selected' : '' }}>Approved 1</option>
|
||||
<option value="Approved 2" {{ request()->status == 'Approved 2' ? 'selected' : '' }}>Approved 2</option>
|
||||
<option value="Closed" {{ request()->status == 'Closed' ? 'selected' : '' }}>Closed</option>
|
||||
<option value="Rejected" {{ request()->status == 'Rejected' ? 'selected' : '' }}>Rejected</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-3">
|
||||
<div class="form-group">
|
||||
<button type="submit" class="btn btn-primary">Filter</button>
|
||||
<a href="{{ route('reports.meeting') }}" class="btn btn-secondary">Reset</a>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Filter Section - Disinkronkan dengan Sistem Periode Bulan Akuntansi (11 s/d 13 Bulan Berikut) --}}
|
||||
<div class="row mt-4">
|
||||
<div class="col-md-12">
|
||||
<div class="card shadow-sm border-0" style="border-radius: 15px;">
|
||||
<div class="card-body">
|
||||
<form action="{{ route('reports.meeting') }}" method="GET">
|
||||
<div class="row align-items-end">
|
||||
<div class="col-md-3">
|
||||
<div class="form-group mb-3">
|
||||
<label class="small fw-bold text-muted">Pilih Region</label>
|
||||
<select name="region" id="region" class="form-control select2">
|
||||
<option value="">Semua Region</option>
|
||||
@foreach ($regions as $region)
|
||||
<option value="{{ $region->code }}" {{ request()->region == $region->code ? 'selected' : '' }}>{{ $region->name }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="form-group mb-3">
|
||||
<label class="small fw-bold text-muted">Pilih Cabang</label>
|
||||
<select name="cabang" id="cabang" class="form-control select2">
|
||||
<option value="">Semua Cabang</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<div class="form-group mb-3">
|
||||
<label class="small fw-bold text-muted">Periode Bulan</label>
|
||||
<select name="month" id="month" class="form-control">
|
||||
<option value="">Pilih Bulan</option>
|
||||
@foreach(['january','february','march','april','may','june','july','august','september','october','november','december'] as $m)
|
||||
<option value="{{ $m }}" {{ (request()->month ?? strtolower(date('F'))) == $m ? 'selected' : '' }}>{{ ucfirst($m) }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<div class="form-group mb-3">
|
||||
<label class="small fw-bold text-muted">Tahun</label>
|
||||
<select name="year" id="year" class="form-control">
|
||||
<option value="">Pilih Tahun</option>
|
||||
@for ($i = 2024; $i <= date('Y'); $i++)
|
||||
<option value="{{ $i }}" {{ (request()->year ?? date('Y')) == $i ? 'selected' : '' }}>{{ $i }}</option>
|
||||
@endfor
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<div class="form-group mb-3">
|
||||
<label class="small fw-bold text-muted">Status</label>
|
||||
<select name="status" id="status" class="form-control">
|
||||
<option value="">Semua Status</option>
|
||||
@foreach(['On Progress', 'Approved 1', 'Approved 2', 'Closed', 'Rejected'] as $st)
|
||||
<option value="{{ $st }}" {{ request()->status == $st ? 'selected' : '' }}>{{ $st }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-12 text-right mt-2">
|
||||
<button type="submit" class="btn btn-primary px-4 shadow-sm"><i class="fas fa-filter mr-1"></i> Filter</button>
|
||||
<a href="{{ route('reports.meeting') }}" class="btn btn-outline-secondary px-4 shadow-sm">Reset</a>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@php
|
||||
use App\Helpers\NextCloudHelper;
|
||||
@endphp
|
||||
@php use App\Helpers\NextCloudHelper; @endphp
|
||||
|
||||
<section class="content">
|
||||
<div class="container-fluid">
|
||||
<!-- Form Meeting & Seminar Table -->
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card shadow-sm border-0" style="border-radius: 15px;">
|
||||
<div class="card-body">
|
||||
<h4 class="header-title">Form Meeting & Seminar</h4>
|
||||
<div class="data-tables">
|
||||
@include('backend.layouts.partials.messages')
|
||||
<div class="table-responsive">
|
||||
<table id="dataTable-table">
|
||||
<thead class="bg-light text-capitalize">
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>No Expense</th>
|
||||
<th>Nama</th>
|
||||
<th>Region</th>
|
||||
<th>Cabang</th>
|
||||
<th>Tanggal</th>
|
||||
<th>Allowance</th>
|
||||
<th>Transport Ankot</th>
|
||||
<th>Hotel</th>
|
||||
<th>Total</th>
|
||||
<th>Total Approved</th>
|
||||
<th>Account Number</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach ($forms as $item)
|
||||
<tr>
|
||||
<td>{{ $loop->iteration }}</td>
|
||||
<td>{{ $item->expense_number }}</td>
|
||||
<td>{{ $item->user->name }}</td>
|
||||
<td>{{ $item->user->region->cabang->region->name }}</td>
|
||||
<td>{{ $item->user->cabang->cabang->name }}</td>
|
||||
<td>{{ \Carbon\Carbon::parse($item->created_at)->locale('id')->isoFormat('D MMMM Y') }}</td>
|
||||
<td>{{ number_format($item->allowance, 0, ',', '.') }}</td>
|
||||
<td>{{ number_format($item->transport_ankot, 0, ',', '.') }}</td>
|
||||
<td>{{ number_format($item->hotel, 0, ',', '.') }}</td>
|
||||
<td>{{ number_format($item->total, 0, ',', '.') }}</td>
|
||||
<td>{{ 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>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<h4 class="header-title mb-4">List Report Meeting & Seminar</h4>
|
||||
<div class="table-responsive">
|
||||
<table id="dataTable-table" class="table table-hover w-100">
|
||||
<thead class="bg-light text-capitalize">
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>No Expense</th>
|
||||
<th>Pengaju</th>
|
||||
<th>Region / Cabang</th>
|
||||
<th>Tgl. Penggunaan</th>
|
||||
<th>Tgl. Dibuat</th>
|
||||
<th>Total Approved</th>
|
||||
<th class="text-center">Bukti</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach ($forms as $item)
|
||||
<tr>
|
||||
<td>{{ $loop->iteration }}</td>
|
||||
<td class="fw-bold text-primary">{{ $item->expense_number }}</td>
|
||||
<td>{{ $item->user->name ?? '-' }}</td>
|
||||
<td>
|
||||
<span class="d-block small fw-bold">{{ $item->user->region->cabang->region->name ?? '-' }}</span>
|
||||
<span class="text-muted small">{{ $item->user->cabang->cabang->name ?? '-' }}</span>
|
||||
</td>
|
||||
<td class="small">{{ \Carbon\Carbon::parse($item->tanggal)->format('d M Y') }}</td>
|
||||
<td>
|
||||
<div class="fw-bold small">{{ $item->created_at->format('d M Y') }}</div>
|
||||
<small class="text-muted">{{ $item->created_at->format('H:i') }} WIB</small>
|
||||
</td>
|
||||
<td class="fw-bold text-success">{{ $item->approved_total ? number_format($item->approved_total, 0, ',', '.') : '-' }}</td>
|
||||
|
||||
{{-- LOGIKA ATTACHMENT MULTI-KOLOM --}}
|
||||
<td class="text-center">
|
||||
@php
|
||||
$fileData = [];
|
||||
$imgExts = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp'];
|
||||
$rawColumns = ['bukti_allowance', 'bukti_transport_ankot', 'bukti_hotel'];
|
||||
|
||||
foreach ($rawColumns as $col) {
|
||||
if (!empty($item->$col)) {
|
||||
$ext = strtolower(pathinfo($item->$col, PATHINFO_EXTENSION));
|
||||
$fileData[] = ['url' => NextCloudHelper::getFileUrl($item->$col), 'is_img' => in_array($ext, $imgExts)];
|
||||
}
|
||||
}
|
||||
|
||||
if ($item->attachments) {
|
||||
foreach ($item->attachments as $att) {
|
||||
if ($att->file_path) {
|
||||
$ext = strtolower(pathinfo($att->file_path, PATHINFO_EXTENSION));
|
||||
$fileData[] = ['url' => NextCloudHelper::getFileUrl($att->file_path), 'is_img' => in_array($ext, $imgExts)];
|
||||
}
|
||||
}
|
||||
}
|
||||
$uniqueFiles = collect($fileData)->unique('url')->values()->all();
|
||||
@endphp
|
||||
|
||||
@if (count($uniqueFiles) > 0)
|
||||
<button type="button" class="btn btn-sm btn-info rounded-pill px-3 shadow-sm btn-preview-bukti"
|
||||
data-expense="{{ $item->expense_number }}"
|
||||
data-files='@json($uniqueFiles)'>
|
||||
<i class="fas fa-eye"></i> {{ count($uniqueFiles) }}
|
||||
</button>
|
||||
@else
|
||||
<span class="text-muted small">-</span>
|
||||
@endif
|
||||
</td>
|
||||
|
||||
<td>
|
||||
@php
|
||||
$badgeClass = match($item->status) {
|
||||
'On Progress' => 'badge-warning text-white',
|
||||
'Approved 1', 'Approved 2', 'Closed' => 'badge-success text-white',
|
||||
'Rejected' => 'badge-danger text-white',
|
||||
default => 'badge-secondary'
|
||||
};
|
||||
@endphp
|
||||
<span class="badge {{ $badgeClass }} px-3 py-2">{{ $item->status }}</span>
|
||||
|
||||
{{-- BLOK AUDIT TRAIL LOG REJECTED --}}
|
||||
@if($item->status === 'Rejected')
|
||||
<div class="mt-2 p-2 bg-light border border-danger rounded" style="line-height: 1.3; min-width: 160px; border-style: dashed !important;">
|
||||
<small class="text-danger fw-bold d-block mb-1" style="font-size: 10px;">
|
||||
<i class="fas fa-times-circle mr-1"></i> Detail Penolakan:
|
||||
</small>
|
||||
<small class="text-dark d-block" style="font-size: 10px;">
|
||||
<strong>Oleh:</strong> {{ $item->rejector->name ?? $item->rejected_by ?? 'System' }}
|
||||
</small>
|
||||
@if($item->rejected_at)
|
||||
<small class="text-muted d-block" style="font-size: 10px;">
|
||||
<strong>Waktu:</strong> {{ \Carbon\Carbon::parse($item->rejected_at)->translatedFormat('d M Y H:i') }} WIB
|
||||
</small>
|
||||
@elseif($item->updated_at && $item->remarks)
|
||||
<small class="text-muted d-block" style="font-size: 10px;">
|
||||
<strong>Waktu:</strong> {{ \Carbon\Carbon::parse($item->updated_at)->translatedFormat('d M Y H:i') }} WIB
|
||||
</small>
|
||||
@endif
|
||||
@if($item->remarks)
|
||||
<small class="text-danger d-block mt-1 italic" style="font-size: 10px; line-height: 1.1;">
|
||||
<strong>Ket:</strong> "{{ $item->remarks }}"
|
||||
</small>
|
||||
@endif
|
||||
</div>
|
||||
@endif
|
||||
|
||||
{{-- BLOK EXISTING FINAL APPROVED / CLOSED --}}
|
||||
@if($item->final_approved_at && in_array($item->status, ['Approved 2', 'Closed']))
|
||||
<div class="mt-2" style="line-height: 1.2;">
|
||||
<small class="text-success fw-bold d-block" style="font-size: 10px;">
|
||||
<i class="fas fa-check-double mr-1"></i> Final Approved:
|
||||
</small>
|
||||
<small class="text-muted d-block" style="font-size: 10px;">
|
||||
{{ \Carbon\Carbon::parse($item->final_approved_at)->translatedFormat('d M Y') }}
|
||||
<span class="ml-1">{{ \Carbon\Carbon::parse($item->final_approved_at)->format('H:i') }} WIB</span>
|
||||
</small>
|
||||
</div>
|
||||
@endif
|
||||
</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{{-- MODAL PREVIEW & ZOOM --}}
|
||||
<div class="modal fade" id="modalPreviewBukti" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered modal-lg">
|
||||
<div class="modal-content" style="border-radius: 15px; border: none; overflow: hidden;">
|
||||
<div class="modal-header bg-primary text-white border-0">
|
||||
<h5 class="modal-title fw-bold"><i class="fas fa-images mr-2"></i>Lampiran Bukti <span id="textExpenseNum"></span></h5>
|
||||
<button type="button" class="close text-white" data-dismiss="modal">×</button>
|
||||
</div>
|
||||
<div class="modal-body bg-light" id="containerPreview" style="max-height: 70vh; overflow-y: auto; padding: 25px;"></div>
|
||||
<div class="modal-footer bg-light border-0">
|
||||
<button type="button" class="btn btn-secondary rounded-pill px-4" data-dismiss="modal">Tutup</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal fade" id="modalImageFull" tabindex="-2" role="dialog" aria-hidden="true" style="background: rgba(0,0,0,0.85); z-index: 1060;">
|
||||
<div class="modal-dialog modal-dialog-centered modal-xl">
|
||||
<div class="modal-content" style="background: transparent; border: none;">
|
||||
<div class="modal-header border-0 p-0">
|
||||
<button type="button" class="close text-white" data-dismiss="modal" style="font-size: 2.5rem; position: absolute; right: 15px; top: 10px; z-index: 999; opacity: 1;">×</button>
|
||||
</div>
|
||||
<div class="modal-body p-0 text-center">
|
||||
<img src="" id="imgFullDisplay" style="max-width: 100%; max-height: 90vh; border-radius: 8px; box-shadow: 0 0 30px rgba(0,0,0,0.5);">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@section('scripts')
|
||||
<script>
|
||||
if ($('#dataTable-table').length) {
|
||||
$('#dataTable-table').DataTable({
|
||||
responsive: false,
|
||||
dom: 'Blfrtip',
|
||||
lengthMenu: [ [10, 50, 100, -1], [10, 50, 100, "All"] ], // Control the entries dropdown
|
||||
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'
|
||||
]
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
if ($('#dataTable-table').length) {
|
||||
$('#dataTable-table').DataTable({
|
||||
responsive: false,
|
||||
dom: 'Blfrtip',
|
||||
deferRender: true, // Mempercepat rendering DOM HTML tabel agar ringan saat di-load
|
||||
lengthMenu: [ [10, 50, 100, -1], [10, 50, 100, "All"] ],
|
||||
buttons: [
|
||||
{
|
||||
extend: 'excelHtml5', text: '<i class="fas fa-file-excel mr-1"></i> Excel', className: 'btn-success',
|
||||
exportOptions: {
|
||||
columns: [0, 1, 2, 3, 4, 5, 6, 8],
|
||||
format: {
|
||||
body: function (data, row, column, node) {
|
||||
let text = node.textContent || node.innerText || "";
|
||||
if (column === 6) return text.replace(/[.]/g, '');
|
||||
return text.replace(/\s+/g, ' ').trim();
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
extend: 'pdfHtml5', text: '<i class="fas fa-file-pdf mr-1"></i> PDF', className: 'btn-danger',
|
||||
orientation: 'landscape', pageSize: 'A4',
|
||||
exportOptions: { columns: [0, 1, 2, 3, 4, 5, 6, 8] },
|
||||
customize: function(doc) {
|
||||
doc.defaultStyle.fontSize = 8;
|
||||
doc.styles.tableHeader.fontSize = 9;
|
||||
}
|
||||
},
|
||||
'colvis'
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
<script>
|
||||
document.getElementById('region').addEventListener('change', function () {
|
||||
const regionCode = this.value;
|
||||
const cabangSelect = document.getElementById('cabang');
|
||||
$(document).on('click', '.btn-preview-bukti', function(e) {
|
||||
e.preventDefault();
|
||||
const expenseNum = $(this).data('expense');
|
||||
const files = $(this).data('files');
|
||||
let html = '<div class="row">';
|
||||
|
||||
// Clear existing options
|
||||
cabangSelect.innerHTML = '<option value="">Semua Cabang</option>';
|
||||
$('#textExpenseNum').text('#' + expenseNum);
|
||||
$('#containerPreview').html('<div class="text-center py-5"><i class="fas fa-spinner fa-spin fa-3x text-primary"></i></div>');
|
||||
|
||||
if (regionCode) {
|
||||
fetch(`/api/cabang-by-region/${regionCode}`)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
data.forEach(cabang => {
|
||||
const option = document.createElement('option');
|
||||
option.value = cabang.code;
|
||||
option.textContent = cabang.name;
|
||||
cabangSelect.appendChild(option);
|
||||
});
|
||||
})
|
||||
.catch(error => console.error('Error fetching cabang data:', error));
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@endsection
|
||||
if(files && files.length > 0) {
|
||||
files.forEach((file) => {
|
||||
html += `
|
||||
<div class="col-md-6 mb-4">
|
||||
<div class="card h-100 border-0 shadow-sm rounded-lg overflow-hidden">
|
||||
<div class="card-body p-2 text-center bg-white">
|
||||
<div class="thumbnail-container mb-3" style="height: 220px; display: flex; align-items: center; justify-content: center; background: #f8f9fa; border-radius: 8px; overflow: hidden; border: 1px solid #eee;">
|
||||
${file.is_img
|
||||
? `<img src="${file.url}" class="img-fluid" style="max-height: 100%; object-fit: contain; cursor: zoom-in;" onclick="openFullImage('${file.url}')">`
|
||||
: `<div class="text-center"><i class="fas fa-file-pdf fa-4x text-danger"></i><p class="small text-muted mt-2 fw-bold">Dokumen Digital</p></div>`
|
||||
}
|
||||
</div>
|
||||
<div class="btn-group w-100">
|
||||
${file.is_img
|
||||
? `<button type="button" onclick="openFullImage('${file.url}')" class="btn btn-outline-primary btn-sm px-3"><i class="fas fa-eye"></i> Preview Full</button>`
|
||||
: `<a href="${file.url}" target="_blank" class="btn btn-outline-primary btn-sm px-3"><i class="fas fa-external-link-alt"></i> Buka PDF</a>`
|
||||
}
|
||||
<a href="${file.url}" download class="btn btn-primary btn-sm px-3"><i class="fas fa-download"></i> Download</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
});
|
||||
}
|
||||
$('#containerPreview').html(html + '</div>');
|
||||
$('#modalPreviewBukti').modal('show');
|
||||
});
|
||||
|
||||
function loadCabang(regionCode, selectedCabang = null) {
|
||||
const cabangSelect = $('#cabang');
|
||||
if (regionCode) {
|
||||
fetch(`/api/cabang-by-region/${regionCode}`)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
cabangSelect.html('<option value="">Semua Cabang</option>');
|
||||
data.forEach(cabang => {
|
||||
const isSelected = (selectedCabang && cabang.code === selectedCabang) ? 'selected' : '';
|
||||
cabangSelect.append(`<option value="${cabang.code}" ${isSelected}>${cabang.name}</option>`);
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
$('#region').on('change', function() { loadCabang(this.value); });
|
||||
const currentRegion = '{{ request()->region }}';
|
||||
const currentCabang = '{{ request()->cabang }}';
|
||||
if (currentRegion) { loadCabang(currentRegion, currentCabang); }
|
||||
});
|
||||
|
||||
function openFullImage(url) {
|
||||
$('#imgFullDisplay').attr('src', url);
|
||||
$('#modalImageFull').modal('show');
|
||||
}
|
||||
</script>
|
||||
@endsection
|
||||
@@ -9,219 +9,357 @@
|
||||
<div class="container-fluid">
|
||||
<div class="row mb-2">
|
||||
<div class="col-sm-6">
|
||||
<h1>{{ $pageInfo['title'] }}</h1>
|
||||
<h1 class="fw-bold">{{ $pageInfo['title'] }}</h1>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<ol class="breadcrumb float-sm-right">
|
||||
<li class="breadcrumb-form"><a href="{{ route('admin.dashboard') }}">{{ __('Dashboard') }}</a> / </li>
|
||||
<li class="breadcrumb-form active"> {{ $pageInfo['title'] }}</li>
|
||||
<li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
|
||||
<li class="breadcrumb-item active">{{ $pageInfo['title'] }}</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-4">
|
||||
<div class="col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<form action="{{ route('reports.others') }}" method="GET">
|
||||
<div class="d-flex">
|
||||
<div class="col-md-3">
|
||||
<div class="form-group mb-3">
|
||||
<label for="region">Pilih Region</label>
|
||||
<select name="region" id="region" class="form-control">
|
||||
<option value="">Semua Region</option>
|
||||
@foreach ($regions as $region)
|
||||
<option value="{{ $region->code }}" {{ request()->region == $region->code ? 'selected' : '' }}>
|
||||
{{ $region->name }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="form-group mb-3">
|
||||
<label for="cabang">Pilih Cabang</label>
|
||||
<select name="cabang" id="cabang" class="form-control">
|
||||
<option value="">Semua Cabang</option>
|
||||
<!-- Cabang options will be dynamically populated -->
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<div class="form-group mb-3">
|
||||
<label for="status">Start Date</label>
|
||||
<input type="date" name="start_date" class="form-control" value="{{ request()->start_date }}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<div class="form-group mb-3">
|
||||
<label for="status">End Date</label>
|
||||
<input type="date" name="end_date" class="form-control" value="{{ request()->end_date }}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<div class="form-group mb-3">
|
||||
<label for="status">Status</label>
|
||||
<select name="status" id="status" class="form-control">
|
||||
<option value="">Semua Status</option>
|
||||
<option value="On Progress" {{ request()->status == 'On Progress' ? 'selected' : '' }}>On Progress</option>
|
||||
<option value="Approved 1" {{ request()->status == 'Approved 1' ? 'selected' : '' }}>Approved 1</option>
|
||||
<option value="Approved 2" {{ request()->status == 'Approved 2' ? 'selected' : '' }}>Approved 2</option>
|
||||
<option value="Closed" {{ request()->status == 'Closed' ? 'selected' : '' }}>Closed</option>
|
||||
<option value="Rejected" {{ request()->status == 'Rejected' ? 'selected' : '' }}>Rejected</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-3">
|
||||
<div class="form-group">
|
||||
<button type="submit" class="btn btn-primary">Filter</button>
|
||||
<a href="{{ route('reports.others') }}" class="btn btn-secondary">Reset</a>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Filter Section - Disinkronkan dengan Sistem Periode Bulan Akuntansi (11 s/d 13 Bulan Berikut) --}}
|
||||
<div class="row mt-4">
|
||||
<div class="col-md-12">
|
||||
<div class="card shadow-sm border-0" style="border-radius: 15px;">
|
||||
<div class="card-body">
|
||||
<form action="{{ route('reports.others') }}" method="GET">
|
||||
<div class="row align-items-end">
|
||||
<div class="col-md-3">
|
||||
<div class="form-group mb-3">
|
||||
<label class="small fw-bold text-muted">Pilih Region</label>
|
||||
<select name="region" id="region" class="form-control select2">
|
||||
<option value="">Semua Region</option>
|
||||
@foreach ($regions as $region)
|
||||
<option value="{{ $region->code }}" {{ request()->region == $region->code ? 'selected' : '' }}>{{ $region->name }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="form-group mb-3">
|
||||
<label class="small fw-bold text-muted">Pilih Cabang</label>
|
||||
<select name="cabang" id="cabang" class="form-control select2">
|
||||
<option value="">Semua Cabang</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<div class="form-group mb-3">
|
||||
<label class="small fw-bold text-muted">Periode Bulan</label>
|
||||
<select name="month" id="month" class="form-control">
|
||||
<option value="">Pilih Bulan</option>
|
||||
@foreach(['january','february','march','april','may','june','july','august','september','october','november','december'] as $m)
|
||||
<option value="{{ $m }}" {{ (request()->month ?? strtolower(date('F'))) == $m ? 'selected' : '' }}>{{ ucfirst($m) }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<div class="form-group mb-3">
|
||||
<label class="small fw-bold text-muted">Tahun</label>
|
||||
<select name="year" id="year" class="form-control">
|
||||
<option value="">Pilih Tahun</option>
|
||||
@for ($i = 2024; $i <= date('Y'); $i++)
|
||||
<option value="{{ $i }}" {{ (request()->year ?? date('Y')) == $i ? 'selected' : '' }}>{{ $i }}</option>
|
||||
@endfor
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<div class="form-group mb-3">
|
||||
<label class="small fw-bold text-muted">Status</label>
|
||||
<select name="status" id="status" class="form-control">
|
||||
<option value="">Semua Status</option>
|
||||
@foreach(['On Progress', 'Approved 1', 'Approved 2', 'Closed', 'Rejected'] as $st)
|
||||
<option value="{{ $st }}" {{ request()->status == $st ? 'selected' : '' }}>{{ $st }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-12 text-right mt-2">
|
||||
<button type="submit" class="btn btn-primary px-4 shadow-sm"><i class="fas fa-filter mr-1"></i> Filter</button>
|
||||
<a href="{{ route('reports.others') }}" class="btn btn-outline-secondary px-4 shadow-sm">Reset</a>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@php
|
||||
use App\Helpers\NextCloudHelper;
|
||||
@endphp
|
||||
@php use App\Helpers\NextCloudHelper; @endphp
|
||||
|
||||
<section class="content">
|
||||
<div class="container-fluid">
|
||||
<!-- Form Others Table -->
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card shadow-sm border-0" style="border-radius: 15px;">
|
||||
<div class="card-body">
|
||||
<h4 class="header-title">Form Others</h4>
|
||||
<div class="data-tables">
|
||||
@include('backend.layouts.partials.messages')
|
||||
<div class="table-responsive">
|
||||
<table id="dataTable-table">
|
||||
<thead class="bg-light text-capitalize">
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>No Expense</th>
|
||||
<th>Nama</th>
|
||||
<th>Region</th>
|
||||
<th>Cabang</th>
|
||||
<th>Tanggal</th>
|
||||
<th>Jenis</th>
|
||||
<th>Keterangan</th>
|
||||
<th>Total</th>
|
||||
<th>Total Aproved</th>
|
||||
<th>Bukti Total</th>
|
||||
<th>Account Number</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach ($forms as $item)
|
||||
<tr>
|
||||
<td>{{ $loop->iteration }}</td>
|
||||
<td>{{ $item->expense_number }}</td>
|
||||
<td>{{ $item->user->name }}</td>
|
||||
<td>{{ $item->user->region->cabang->region->name }}</td>
|
||||
<td>{{ $item->user->cabang->cabang->name }}</td>
|
||||
<td>{{ \Carbon\Carbon::parse($item->tanggal)->locale('id')->isoFormat('D MMMM Y') }}</td>
|
||||
<td>{{ $item->kategori->name }}</td>
|
||||
<td>{{ $item->keterangan }}</td>
|
||||
<td>{{ number_format($item->total, 0, ',', '.') }}</td>
|
||||
<td>{{ number_format($item->approved_total, 0, ',', '.') }}</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>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<h4 class="header-title mb-4">List Report Form Others</h4>
|
||||
<div class="table-responsive">
|
||||
<table id="dataTable-table" class="table table-hover w-100">
|
||||
<thead class="bg-light text-capitalize">
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>No Expense</th>
|
||||
<th>Pengaju</th>
|
||||
<th>Region / Cabang</th>
|
||||
<th>Kategori / Ket.</th>
|
||||
<th>Tgl. Penggunaan</th>
|
||||
<th>Tgl. Dibuat</th>
|
||||
<th>Total Approved</th>
|
||||
<th class="text-center">Bukti</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach ($forms as $item)
|
||||
<tr>
|
||||
<td>{{ $loop->iteration }}</td>
|
||||
<td class="fw-bold text-primary">{{ $item->expense_number }}</td>
|
||||
<td>{{ $item->user->name ?? '-' }}</td>
|
||||
<td>
|
||||
<span class="d-block small fw-bold">{{ $item->user->region->cabang->region->name ?? '-' }}</span>
|
||||
<span class="text-muted small">{{ $item->user->cabang->cabang->name ?? '-' }}</span>
|
||||
</td>
|
||||
<td>
|
||||
<div class="fw-bold small">{{ $item->kategori->name ?? '-' }}</div>
|
||||
<div class="text-muted small text-truncate" style="max-width: 150px;" title="{{ $item->keterangan }}">
|
||||
{{ $item->keterangan }}
|
||||
</div>
|
||||
</td>
|
||||
<td class="small">{{ \Carbon\Carbon::parse($item->tanggal)->format('d M Y') }}</td>
|
||||
<td>
|
||||
<div class="fw-bold small">{{ $item->created_at->format('d M Y') }}</div>
|
||||
<small class="text-muted">{{ $item->created_at->format('H:i') }} WIB</small>
|
||||
</td>
|
||||
<td class="fw-bold text-success">{{ $item->approved_total ? number_format($item->approved_total, 0, ',', '.') : '-' }}</td>
|
||||
|
||||
<td class="text-center">
|
||||
@php
|
||||
$fileData = [];
|
||||
$imgExts = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp'];
|
||||
|
||||
if (!empty($item->bukti_total)) {
|
||||
$ext = strtolower(pathinfo($item->bukti_total, PATHINFO_EXTENSION));
|
||||
$fileData[] = ['url' => NextCloudHelper::getFileUrl($item->bukti_total), 'is_img' => in_array($ext, $imgExts)];
|
||||
}
|
||||
|
||||
if ($item->attachments) {
|
||||
foreach ($item->attachments as $att) {
|
||||
if ($att->file_path) {
|
||||
$ext = strtolower(pathinfo($att->file_path, PATHINFO_EXTENSION));
|
||||
$fileData[] = ['url' => NextCloudHelper::getFileUrl($att->file_path), 'is_img' => in_array($ext, $imgExts)];
|
||||
}
|
||||
}
|
||||
}
|
||||
$uniqueFiles = collect($fileData)->unique('url')->values()->all();
|
||||
@endphp
|
||||
|
||||
@if (count($uniqueFiles) > 0)
|
||||
<button type="button" class="btn btn-sm btn-info rounded-pill px-3 shadow-sm btn-preview-bukti"
|
||||
data-expense="{{ $item->expense_number }}"
|
||||
data-files='@json($uniqueFiles)'>
|
||||
<i class="fas fa-eye"></i> {{ count($uniqueFiles) }}
|
||||
</button>
|
||||
@else
|
||||
<span class="text-muted small">-</span>
|
||||
@endif
|
||||
</td>
|
||||
|
||||
<td>
|
||||
@php
|
||||
$badgeClass = match($item->status) {
|
||||
'On Progress' => 'badge-warning text-white',
|
||||
'Approved 1', 'Approved 2', 'Closed' => 'badge-success text-white',
|
||||
'Rejected' => 'badge-danger text-white',
|
||||
default => 'badge-secondary'
|
||||
};
|
||||
@endphp
|
||||
<span class="badge {{ $badgeClass }} px-3 py-2">{{ $item->status }}</span>
|
||||
|
||||
{{-- BLOK AUDIT TRAIL LOG REJECTED --}}
|
||||
@if($item->status === 'Rejected')
|
||||
<div class="mt-2 p-2 bg-light border border-danger rounded" style="line-height: 1.3; min-width: 160px; border-style: dashed !important;">
|
||||
<small class="text-danger fw-bold d-block mb-1" style="font-size: 10px;">
|
||||
<i class="fas fa-times-circle mr-1"></i> Detail Penolakan:
|
||||
</small>
|
||||
<small class="text-dark d-block" style="font-size: 10px;">
|
||||
<strong>Oleh:</strong> {{ $item->rejector->name ?? $item->rejected_by ?? 'System' }}
|
||||
</small>
|
||||
@if($item->rejected_at)
|
||||
<small class="text-muted d-block" style="font-size: 10px;">
|
||||
<strong>Waktu:</strong> {{ \Carbon\Carbon::parse($item->rejected_at)->translatedFormat('d M Y H:i') }} WIB
|
||||
</small>
|
||||
@elseif($item->updated_at && $item->remarks)
|
||||
<small class="text-muted d-block" style="font-size: 10px;">
|
||||
<strong>Waktu:</strong> {{ \Carbon\Carbon::parse($item->updated_at)->translatedFormat('d M Y H:i') }} WIB
|
||||
</small>
|
||||
@endif
|
||||
@if($item->remarks)
|
||||
<small class="text-danger d-block mt-1 italic" style="font-size: 10px; line-height: 1.1;">
|
||||
<strong>Ket:</strong> "{{ $item->remarks }}"
|
||||
</small>
|
||||
@endif
|
||||
</div>
|
||||
@endif
|
||||
|
||||
{{-- BLOK EXISTING FINAL APPROVED / CLOSED --}}
|
||||
@if($item->final_approved_at && in_array($item->status, ['Approved 2', 'Closed']))
|
||||
<div class="mt-2" style="line-height: 1.2;">
|
||||
<small class="text-success fw-bold d-block" style="font-size: 10px;">
|
||||
<i class="fas fa-check-double mr-1"></i> Final Approved:
|
||||
</small>
|
||||
<small class="text-muted d-block" style="font-size: 10px;">
|
||||
{{ \Carbon\Carbon::parse($item->final_approved_at)->translatedFormat('d M Y') }}
|
||||
<span class="ml-1">{{ \Carbon\Carbon::parse($item->final_approved_at)->format('H:i') }} WIB</span>
|
||||
</small>
|
||||
</div>
|
||||
@endif
|
||||
</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{{-- MODAL PREVIEW & ZOOM --}}
|
||||
<div class="modal fade" id="modalPreviewBukti" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered modal-lg">
|
||||
<div class="modal-content" style="border-radius: 15px; border: none; overflow: hidden;">
|
||||
<div class="modal-header bg-primary text-white border-0">
|
||||
<h5 class="modal-title fw-bold"><i class="fas fa-images mr-2"></i>Lampiran Bukti <span id="textExpenseNum"></span></h5>
|
||||
<button type="button" class="close text-white" data-dismiss="modal">×</button>
|
||||
</div>
|
||||
<div class="modal-body bg-light" id="containerPreview" style="max-height: 70vh; overflow-y: auto; padding: 25px;"></div>
|
||||
<div class="modal-footer bg-light border-0">
|
||||
<button type="button" class="btn btn-secondary rounded-pill px-4" data-dismiss="modal">Tutup</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal fade" id="modalImageFull" tabindex="-2" role="dialog" aria-hidden="true" style="background: rgba(0,0,0,0.85); z-index: 1060;">
|
||||
<div class="modal-dialog modal-dialog-centered modal-xl">
|
||||
<div class="modal-content" style="background: transparent; border: none;">
|
||||
<div class="modal-header border-0 p-0">
|
||||
<button type="button" class="close text-white" data-dismiss="modal" style="font-size: 2.5rem; position: absolute; right: 15px; top: 10px; z-index: 999; opacity: 1;">×</button>
|
||||
</div>
|
||||
<div class="modal-body p-0 text-center">
|
||||
<img src="" id="imgFullDisplay" style="max-width: 100%; max-height: 90vh; border-radius: 8px; box-shadow: 0 0 30px rgba(0,0,0,0.5);">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@section('scripts')
|
||||
<script>
|
||||
if ($('#dataTable-table').length) {
|
||||
$('#dataTable-table').DataTable({
|
||||
responsive: false,
|
||||
dom: 'Blfrtip',
|
||||
lengthMenu: [ [10, 50, 100, -1], [10, 50, 100, "All"] ], // Control the entries dropdown
|
||||
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'
|
||||
]
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
if ($('#dataTable-table').length) {
|
||||
$('#dataTable-table').DataTable({
|
||||
responsive: false,
|
||||
dom: 'Blfrtip',
|
||||
deferRender: true, // Optimasi performa penanganan baris DOM data dalam jumlah banyak
|
||||
lengthMenu: [ [10, 50, 100, -1], [10, 50, 100, "All"] ],
|
||||
buttons: [
|
||||
{
|
||||
extend: 'excelHtml5', text: '<i class="fas fa-file-excel mr-1"></i> Excel', className: 'btn-success',
|
||||
exportOptions: {
|
||||
columns: [0, 1, 2, 3, 4, 5, 6, 7, 9],
|
||||
format: {
|
||||
body: function (data, row, column, node) {
|
||||
let text = node.textContent || node.innerText || "";
|
||||
if (column === 7) return text.replace(/[.]/g, '');
|
||||
return text.replace(/\s+/g, ' ').trim();
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
extend: 'pdfHtml5', text: '<i class="fas fa-file-pdf mr-1"></i> PDF', className: 'btn-danger',
|
||||
orientation: 'landscape', pageSize: 'A4',
|
||||
exportOptions: { columns: [0, 1, 2, 3, 4, 5, 6, 7, 9] },
|
||||
customize: function(doc) {
|
||||
doc.defaultStyle.fontSize = 8;
|
||||
doc.styles.tableHeader.fontSize = 9;
|
||||
}
|
||||
},
|
||||
'colvis'
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
<script>
|
||||
document.getElementById('region').addEventListener('change', function () {
|
||||
const regionCode = this.value;
|
||||
const cabangSelect = document.getElementById('cabang');
|
||||
$(document).on('click', '.btn-preview-bukti', function(e) {
|
||||
e.preventDefault();
|
||||
const expenseNum = $(this).data('expense');
|
||||
const files = $(this).data('files');
|
||||
let html = '<div class="row">';
|
||||
|
||||
// Clear existing options
|
||||
cabangSelect.innerHTML = '<option value="">Semua Cabang</option>';
|
||||
$('#textExpenseNum').text('#' + expenseNum);
|
||||
$('#containerPreview').html('<div class="text-center py-5"><i class="fas fa-spinner fa-spin fa-3x text-primary"></i></div>');
|
||||
|
||||
if (regionCode) {
|
||||
fetch(`/api/cabang-by-region/${regionCode}`)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
data.forEach(cabang => {
|
||||
const option = document.createElement('option');
|
||||
option.value = cabang.code;
|
||||
option.textContent = cabang.name;
|
||||
cabangSelect.appendChild(option);
|
||||
});
|
||||
})
|
||||
.catch(error => console.error('Error fetching cabang data:', error));
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@endsection
|
||||
if(files && files.length > 0) {
|
||||
files.forEach((file) => {
|
||||
html += `
|
||||
<div class="col-md-6 mb-4">
|
||||
<div class="card h-100 border-0 shadow-sm rounded-lg overflow-hidden">
|
||||
<div class="card-body p-2 text-center bg-white">
|
||||
<div class="thumbnail-container mb-3" style="height: 220px; display: flex; align-items: center; justify-content: center; background: #f8f9fa; border-radius: 8px; overflow: hidden; border: 1px solid #eee;">
|
||||
${file.is_img
|
||||
? `<img src="${file.url}" class="img-fluid" style="max-height: 100%; object-fit: contain; cursor: zoom-in;" onclick="openFullImage('${file.url}')">`
|
||||
: `<div class="text-center"><i class="fas fa-file-pdf fa-4x text-danger"></i><p class="small text-muted mt-2 fw-bold">Dokumen Digital</p></div>`
|
||||
}
|
||||
</div>
|
||||
<div class="btn-group w-100">
|
||||
${file.is_img
|
||||
? `<button type="button" onclick="openFullImage('${file.url}')" class="btn btn-outline-primary btn-sm px-3"><i class="fas fa-eye"></i> Preview Full</button>`
|
||||
: `<a href="${file.url}" target="_blank" class="btn btn-outline-primary btn-sm px-3"><i class="fas fa-external-link-alt"></i> Buka PDF</a>`
|
||||
}
|
||||
<a href="${file.url}" download class="btn btn-primary btn-sm px-3"><i class="fas fa-download"></i> Download</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
});
|
||||
}
|
||||
$('#containerPreview').html(html + '</div>');
|
||||
$('#modalPreviewBukti').modal('show');
|
||||
});
|
||||
|
||||
function loadCabang(regionCode, selectedCabang = null) {
|
||||
const cabangSelect = $('#cabang');
|
||||
if (regionCode) {
|
||||
fetch(`/api/cabang-by-region/${regionCode}`)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
cabangSelect.html('<option value="">Semua Cabang</option>');
|
||||
data.forEach(cabang => {
|
||||
const isSelected = (selectedCabang && cabang.code === selectedCabang) ? 'selected' : '';
|
||||
cabangSelect.append(`<option value="${cabang.code}" ${isSelected}>${cabang.name}</option>`);
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
$('#region').on('change', function() { loadCabang(this.value); });
|
||||
const currentRegion = '{{ request()->region }}';
|
||||
const currentCabang = '{{ request()->cabang }}';
|
||||
if (currentRegion) { loadCabang(currentRegion, currentCabang); }
|
||||
});
|
||||
|
||||
function openFullImage(url) {
|
||||
$('#imgFullDisplay').attr('src', url);
|
||||
$('#modalImageFull').modal('show');
|
||||
}
|
||||
</script>
|
||||
@endsection
|
||||
@@ -9,216 +9,356 @@
|
||||
<div class="container-fluid">
|
||||
<div class="row mb-2">
|
||||
<div class="col-sm-6">
|
||||
<h1>{{ $pageInfo['title'] }}</h1>
|
||||
<h1 class="fw-bold">{{ $pageInfo['title'] }}</h1>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<ol class="breadcrumb float-sm-right">
|
||||
<li class="breadcrumb-form"><a href="{{ route('admin.dashboard') }}">{{ __('Dashboard') }}</a> / </li>
|
||||
<li class="breadcrumb-form active"> {{ $pageInfo['title'] }}</li>
|
||||
<li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
|
||||
<li class="breadcrumb-item active">{{ $pageInfo['title'] }}</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-4">
|
||||
<div class="col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<form action="{{ route('reports.upcountry') }}" method="GET">
|
||||
<div class="d-flex">
|
||||
<div class="col-md-3">
|
||||
<div class="form-group mb-3">
|
||||
<label for="region">Pilih Region</label>
|
||||
<select name="region" id="region" class="form-control">
|
||||
<option value="">Semua Region</option>
|
||||
@foreach ($regions as $region)
|
||||
<option value="{{ $region->code }}" {{ request()->region == $region->code ? 'selected' : '' }}>
|
||||
{{ $region->name }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="form-group mb-3">
|
||||
<label for="cabang">Pilih Cabang</label>
|
||||
<select name="cabang" id="cabang" class="form-control">
|
||||
<option value="">Semua Cabang</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<div class="form-group mb-3">
|
||||
<label for="status">Start Date</label>
|
||||
<input type="date" name="start_date" class="form-control" value="{{ request()->start_date }}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<div class="form-group mb-3">
|
||||
<label for="status">End Date</label>
|
||||
<input type="date" name="end_date" class="form-control" value="{{ request()->end_date }}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<div class="form-group mb-3">
|
||||
<label for="status">Status</label>
|
||||
<select name="status" id="status" class="form-control">
|
||||
<option value="">Semua Status</option>
|
||||
<option value="On Progress" {{ request()->status == 'On Progress' ? 'selected' : '' }}>On Progress</option>
|
||||
<option value="Approved 1" {{ request()->status == 'Approved 1' ? 'selected' : '' }}>Approved 1</option>
|
||||
<option value="Approved 2" {{ request()->status == 'Approved 2' ? 'selected' : '' }}>Approved 2</option>
|
||||
<option value="Closed" {{ request()->status == 'Closed' ? 'selected' : '' }}>Closed</option>
|
||||
<option value="Rejected" {{ request()->status == 'Rejected' ? 'selected' : '' }}>Rejected</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-3">
|
||||
<div class="form-group">
|
||||
<button type="submit" class="btn btn-primary">Filter</button>
|
||||
<a href="{{ route('reports.upcountry') }}" class="btn btn-secondary">Reset</a>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Filter Section - Dioptimasi Menggunakan Dropdown Periode Bulan Akuntansi --}}
|
||||
<div class="row mt-4">
|
||||
<div class="col-md-12">
|
||||
<div class="card shadow-sm border-0" style="border-radius: 15px;">
|
||||
<div class="card-body">
|
||||
<form action="{{ route('reports.upcountry') }}" method="GET">
|
||||
<div class="row align-items-end">
|
||||
<div class="col-md-3">
|
||||
<div class="form-group mb-3">
|
||||
<label class="small fw-bold text-muted">Pilih Region</label>
|
||||
<select name="region" id="region" class="form-control select2">
|
||||
<option value="">Semua Region</option>
|
||||
@foreach ($regions as $reg)
|
||||
<option value="{{ $reg->code }}" {{ request()->region == $reg->code ? 'selected' : '' }}>{{ $reg->name }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="form-group mb-3">
|
||||
<label class="small fw-bold text-muted">Pilih Cabang</label>
|
||||
<select name="cabang" id="cabang" class="form-control select2">
|
||||
<option value="">Semua Cabang</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<div class="form-group mb-3">
|
||||
<label class="small fw-bold text-muted">Periode Bulan</label>
|
||||
<select name="month" id="month" class="form-control">
|
||||
<option value="">Pilih Bulan</option>
|
||||
@foreach(['january','february','march','april','may','june','july','august','september','october','november','december'] as $m)
|
||||
<option value="{{ $m }}" {{ (request()->month ?? strtolower(date('F'))) == $m ? 'selected' : '' }}>{{ ucfirst($m) }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<div class="form-group mb-3">
|
||||
<label class="small fw-bold text-muted">Tahun</label>
|
||||
<select name="year" id="year" class="form-control">
|
||||
<option value="">Pilih Tahun</option>
|
||||
@for ($i = 2024; $i <= date('Y'); $i++)
|
||||
<option value="{{ $i }}" {{ (request()->year ?? date('Y')) == $i ? 'selected' : '' }}>{{ $i }}</option>
|
||||
@endfor
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<div class="form-group mb-3">
|
||||
<label class="small fw-bold text-muted">Status</label>
|
||||
<select name="status" id="status" class="form-control">
|
||||
<option value="">Semua Status</option>
|
||||
@foreach(['On Progress', 'Approved 1', 'Approved 2', 'Closed', 'Rejected'] as $st)
|
||||
<option value="{{ $st }}" {{ request()->status == $st ? 'selected' : '' }}>{{ $st }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-12 text-right mt-2">
|
||||
<button type="submit" class="btn btn-primary px-4 shadow-sm"><i class="fas fa-filter mr-1"></i> Filter</button>
|
||||
<a href="{{ route('reports.upcountry') }}" class="btn btn-outline-secondary px-4 shadow-sm">Reset</a>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@php
|
||||
use App\Helpers\NextCloudHelper;
|
||||
@endphp
|
||||
@php use App\Helpers\NextCloudHelper; @endphp
|
||||
|
||||
<section class="content">
|
||||
<div class="container-fluid">
|
||||
<!-- Form Up Country Table -->
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card shadow-sm border-0" style="border-radius: 15px;">
|
||||
<div class="card-body">
|
||||
<h4 class="header-title">Form Up Country</h4>
|
||||
<div class="data-tables">
|
||||
@include('backend.layouts.partials.messages')
|
||||
<div class="table-responsive">
|
||||
<table id="dataTable-table">
|
||||
<thead class="bg-light text-capitalize">
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>No Expense</th>
|
||||
<th>Nama</th>
|
||||
<th>Region</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>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach ($forms as $item)
|
||||
<tr>
|
||||
<td>{{ $loop->iteration }}</td>
|
||||
<td>{{ $item->expense_number }}</td>
|
||||
<td>{{ $item->user->name }}</td>
|
||||
<td>{{ $item->user->region->cabang->region->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>
|
||||
@if ($item->approved_total)
|
||||
{{ number_format($item->approved_total, 0, ',', '.') }}
|
||||
@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>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<h4 class="header-title mb-4">List Report Up Country</h4>
|
||||
<div class="table-responsive">
|
||||
<table id="dataTable-table" class="table table-hover w-100">
|
||||
<thead class="bg-light text-capitalize">
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>No Expense</th>
|
||||
<th>Pengaju</th>
|
||||
<th>Region / Cabang</th>
|
||||
<th>Rayon</th>
|
||||
<th>Tgl. Penggunaan</th>
|
||||
<th>Tgl. Dibuat</th>
|
||||
<th>Tujuan / Jarak</th>
|
||||
<th>Total Approved</th>
|
||||
<th class="text-center">Bukti</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach ($forms as $item)
|
||||
<tr>
|
||||
<td>{{ $loop->iteration }}</td>
|
||||
<td class="fw-bold text-primary">{{ $item->expense_number }}</td>
|
||||
<td>{{ $item->user->name ?? '-' }}</td>
|
||||
<td>
|
||||
<span class="d-block small fw-bold text-dark">{{ $item->user->region->cabang->region->name ?? '-' }}</span>
|
||||
<span class="text-muted small">{{ $item->user->cabang->cabang->name ?? '-' }}</span>
|
||||
</td>
|
||||
<td><span class="badge badge-light border">{{ $item->rayon->code ?? '-' }}</span></td>
|
||||
<td class="small text-dark">{{ \Carbon\Carbon::parse($item->tanggal)->format('d M Y') }}</td>
|
||||
<td>
|
||||
<div class="fw-bold small">{{ $item->created_at->format('d M Y') }}</div>
|
||||
<small class="text-muted">{{ $item->created_at->format('H:i') }} WIB</small>
|
||||
</td>
|
||||
<td>
|
||||
<div class="small fw-bold text-dark text-truncate" style="max-width: 150px;">{{ $item->tujuan }}</div>
|
||||
<div class="text-muted small italic">{{ $item->jarak }} km</div>
|
||||
</td>
|
||||
<td class="fw-bold text-success">{{ $item->approved_total ? number_format($item->approved_total, 0, ',', '.') : '-' }}</td>
|
||||
|
||||
<td class="text-center">
|
||||
@php
|
||||
$fileData = [];
|
||||
$imgExts = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp'];
|
||||
|
||||
if ($item->attachments) {
|
||||
foreach ($item->attachments as $att) {
|
||||
if ($att->file_path) {
|
||||
$ext = strtolower(pathinfo($att->file_path, PATHINFO_EXTENSION));
|
||||
$fileData[] = [
|
||||
'url' => NextCloudHelper::getFileUrl($att->file_path),
|
||||
'is_img' => in_array($ext, $imgExts)
|
||||
];
|
||||
}
|
||||
}
|
||||
}
|
||||
$uniqueFiles = collect($fileData)->unique('url')->values()->all();
|
||||
@endphp
|
||||
|
||||
@if (count($uniqueFiles) > 0)
|
||||
<button type="button" class="btn btn-sm btn-info rounded-pill px-3 shadow-sm btn-preview-bukti"
|
||||
data-expense="{{ $item->expense_number }}"
|
||||
data-files='@json($uniqueFiles)'>
|
||||
<i class="fas fa-eye"></i> {{ count($uniqueFiles) }}
|
||||
</button>
|
||||
@else
|
||||
<span class="text-muted small">-</span>
|
||||
@endif
|
||||
</td>
|
||||
|
||||
<td>
|
||||
@php
|
||||
$badgeClass = match($item->status) {
|
||||
'On Progress' => 'badge-warning text-white',
|
||||
'Approved 1', 'Approved 2', 'Closed' => 'badge-success text-white',
|
||||
'Rejected' => 'badge-danger text-white',
|
||||
default => 'badge-secondary'
|
||||
};
|
||||
@endphp
|
||||
<span class="badge {{ $badgeClass }} px-3 py-2">{{ $item->status }}</span>
|
||||
|
||||
{{-- BLOK AUDIT TRAIL REJECTED --}}
|
||||
@if($item->status === 'Rejected')
|
||||
<div class="mt-2 p-2 bg-light border border-danger rounded" style="line-height: 1.3; min-width: 160px; border-style: dashed !important;">
|
||||
<small class="text-danger fw-bold d-block mb-1" style="font-size: 10px;">
|
||||
<i class="fas fa-times-circle mr-1"></i> Detail Penolakan:
|
||||
</small>
|
||||
<small class="text-dark d-block" style="font-size: 10px;">
|
||||
<strong>Oleh:</strong> {{ $item->rejector->name ?? $item->rejected_by ?? 'System' }}
|
||||
</small>
|
||||
@if($item->rejected_at)
|
||||
<small class="text-muted d-block" style="font-size: 10px;">
|
||||
<strong>Waktu:</strong> {{ \Carbon\Carbon::parse($item->rejected_at)->translatedFormat('d M Y H:i') }} WIB
|
||||
</small>
|
||||
@elseif($item->updated_at && $item->remarks)
|
||||
<small class="text-muted d-block" style="font-size: 10px;">
|
||||
<strong>Waktu:</strong> {{ \Carbon\Carbon::parse($item->updated_at)->translatedFormat('d M Y H:i') }} WIB
|
||||
</small>
|
||||
@endif
|
||||
@if($item->remarks)
|
||||
<small class="text-danger d-block mt-1 italic" style="font-size: 10px; line-height: 1.1;">
|
||||
<strong>Ket:</strong> "{{ $item->remarks }}"
|
||||
</small>
|
||||
@endif
|
||||
</div>
|
||||
@endif
|
||||
|
||||
{{-- BLOK EXISTING FINAL APPROVED / CLOSED --}}
|
||||
@if($item->final_approved_at && in_array($item->status, ['Approved 2', 'Closed']))
|
||||
<div class="mt-2" style="line-height: 1.2;">
|
||||
<small class="text-success fw-bold d-block" style="font-size: 10px;">
|
||||
<i class="fas fa-check-double mr-1"></i> Final Approved:
|
||||
</small>
|
||||
<small class="text-muted d-block" style="font-size: 10px;">
|
||||
{{ \Carbon\Carbon::parse($item->final_approved_at)->translatedFormat('d M Y') }}
|
||||
<span class="ml-1">{{ \Carbon\Carbon::parse($item->final_approved_at)->format('H:i') }} WIB</span>
|
||||
</small>
|
||||
</div>
|
||||
@endif
|
||||
</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{{-- MODAL PREVIEW --}}
|
||||
<div class="modal fade" id="modalPreviewBukti" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered modal-lg">
|
||||
<div class="modal-content" style="border-radius: 15px; border: none; overflow: hidden;">
|
||||
<div class="modal-header bg-primary text-white border-0">
|
||||
<h5 class="modal-title fw-bold"><i class="fas fa-images mr-2"></i>Lampiran Bukti <span id="textExpenseNum"></span></h5>
|
||||
<button type="button" class="close text-white" data-dismiss="modal">×</button>
|
||||
</div>
|
||||
<div class="modal-body bg-light" id="containerPreview" style="max-height: 70vh; overflow-y: auto; padding: 25px;"></div>
|
||||
<div class="modal-footer bg-light border-0">
|
||||
<button type="button" class="btn btn-secondary rounded-pill px-4" data-dismiss="modal">Tutup</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- MODAL ZOOM --}}
|
||||
<div class="modal fade" id="modalImageFull" tabindex="-2" role="dialog" aria-hidden="true" style="background: rgba(0,0,0,0.85); z-index: 1060;">
|
||||
<div class="modal-dialog modal-dialog-centered modal-xl">
|
||||
<div class="modal-content" style="background: transparent; border: none;">
|
||||
<div class="modal-header border-0 p-0">
|
||||
<button type="button" class="close text-white" data-dismiss="modal" style="font-size: 2.5rem; position: absolute; right: 15px; top: 10px; z-index: 999; opacity: 1;">×</button>
|
||||
</div>
|
||||
<div class="modal-body p-0 text-center">
|
||||
<img src="" id="imgFullDisplay" style="max-width: 100%; max-height: 90vh; border-radius: 8px; box-shadow: 0 0 30px rgba(0,0,0,0.5);">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@section('scripts')
|
||||
<script>
|
||||
if ($('#dataTable-table').length) {
|
||||
$('#dataTable-table').DataTable({
|
||||
responsive: false,
|
||||
dom: 'Blfrtip',
|
||||
lengthMenu: [ [10, 50, 100, -1], [10, 50, 100, "All"] ], // Control the entries dropdown
|
||||
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'
|
||||
]
|
||||
});
|
||||
}
|
||||
</script>
|
||||
$(document).ready(function() {
|
||||
if ($('#dataTable-table').length) {
|
||||
$('#dataTable-table').DataTable({
|
||||
responsive: false,
|
||||
dom: 'Blfrtip',
|
||||
deferRender: true, // Optimasi performa DataTables untuk memuat ribuan baris tanpa freeze
|
||||
lengthMenu: [ [10, 50, 100, -1], [10, 50, 100, "All"] ],
|
||||
buttons: [
|
||||
{
|
||||
extend: 'excelHtml5', text: '<i class="fas fa-file-excel mr-1"></i> Excel', className: 'btn-success',
|
||||
exportOptions: {
|
||||
columns: [0, 1, 2, 3, 4, 5, 6, 7, 8, 10],
|
||||
format: {
|
||||
body: function (data, row, column, node) {
|
||||
let text = node.textContent || node.innerText || "";
|
||||
if (column === 8) return text.replace(/[.]/g, '');
|
||||
return text.replace(/\s+/g, ' ').trim();
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
extend: 'pdfHtml5', text: '<i class="fas fa-file-pdf mr-1"></i> PDF', className: 'btn-danger',
|
||||
orientation: 'landscape', pageSize: 'A4',
|
||||
exportOptions: { columns: [0, 1, 2, 3, 4, 5, 6, 7, 8, 10] },
|
||||
customize: function(doc) {
|
||||
doc.defaultStyle.fontSize = 8;
|
||||
doc.styles.tableHeader.fontSize = 9;
|
||||
}
|
||||
},
|
||||
'colvis'
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
<script>
|
||||
document.getElementById('region').addEventListener('change', function () {
|
||||
const regionCode = this.value;
|
||||
const cabangSelect = document.getElementById('cabang');
|
||||
$(document).on('click', '.btn-preview-bukti', function(e) {
|
||||
e.preventDefault();
|
||||
const expenseNum = $(this).data('expense');
|
||||
const files = $(this).data('files');
|
||||
let html = '<div class="row">';
|
||||
|
||||
// Clear existing options
|
||||
cabangSelect.innerHTML = '<option value="">Semua Cabang</option>';
|
||||
$('#textExpenseNum').text('#' + expenseNum);
|
||||
$('#containerPreview').html('<div class="text-center py-5"><i class="fas fa-circle-notch fa-spin fa-3x text-primary"></i></div>');
|
||||
|
||||
if (regionCode) {
|
||||
fetch(`/api/cabang-by-region/${regionCode}`)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
data.forEach(cabang => {
|
||||
const option = document.createElement('option');
|
||||
option.value = cabang.code;
|
||||
option.textContent = cabang.name;
|
||||
cabangSelect.appendChild(option);
|
||||
});
|
||||
})
|
||||
.catch(error => console.error('Error fetching cabang data:', error));
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@endsection
|
||||
if(files && files.length > 0) {
|
||||
files.forEach((file) => {
|
||||
html += `
|
||||
<div class="col-md-6 mb-4">
|
||||
<div class="card h-100 border-0 shadow-sm rounded-lg overflow-hidden">
|
||||
<div class="card-body p-2 text-center bg-white">
|
||||
<div class="thumbnail-container mb-3" style="height: 220px; display: flex; align-items: center; justify-content: center; background: #f8f9fa; border-radius: 8px; overflow: hidden; border: 1px solid #eee;">
|
||||
${file.is_img
|
||||
? `<img src="${file.url}" class="img-fluid" style="max-height: 100%; object-fit: contain; cursor: zoom-in;" onclick="openFullImage('${file.url}')">`
|
||||
: `<div class="text-center"><i class="fas fa-file-pdf fa-4x text-danger"></i><p class="small text-muted mt-2 fw-bold">Dokumen Digital</p></div>`
|
||||
}
|
||||
</div>
|
||||
<div class="btn-group w-100">
|
||||
${file.is_img
|
||||
? `<button type="button" onclick="openFullImage('${file.url}')" class="btn btn-outline-primary btn-sm px-3"><i class="fas fa-eye"></i> Preview Full</button>`
|
||||
: `<a href="${file.url}" target="_blank" class="btn btn-outline-primary btn-sm px-3"><i class="fas fa-external-link-alt"></i> Buka PDF</a>`
|
||||
}
|
||||
<a href="${file.url}" download class="btn btn-primary btn-sm px-3"><i class="fas fa-download"></i> Download</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
});
|
||||
}
|
||||
$('#containerPreview').html(html + '</div>');
|
||||
$('#modalPreviewBukti').modal('show');
|
||||
});
|
||||
|
||||
function loadCabang(regionCode, selectedCabang = null) {
|
||||
const cabangSelect = $('#cabang');
|
||||
if (regionCode) {
|
||||
fetch(`/api/cabang-by-region/${regionCode}`)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
cabangSelect.html('<option value="">Semua Cabang</option>');
|
||||
data.forEach(cabang => {
|
||||
const isSelected = (selectedCabang && cabang.code === selectedCabang) ? 'selected' : '';
|
||||
cabangSelect.append(`<option value="${cabang.code}" ${isSelected}>${cabang.name}</option>`);
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
$('#region').on('change', function() { loadCabang(this.value); });
|
||||
const currentRegion = '{{ request()->region }}';
|
||||
const currentCabang = '{{ request()->cabang }}';
|
||||
if (currentRegion) { loadCabang(currentRegion, currentCabang); }
|
||||
});
|
||||
|
||||
function openFullImage(url) {
|
||||
$('#imgFullDisplay').attr('src', url);
|
||||
$('#modalImageFull').modal('show');
|
||||
}
|
||||
</script>
|
||||
@endsection
|
||||
@@ -9,223 +9,362 @@
|
||||
<div class="container-fluid">
|
||||
<div class="row mb-2">
|
||||
<div class="col-sm-6">
|
||||
<h1>{{ $pageInfo['title'] }}</h1>
|
||||
<h1 class="fw-bold">{{ $pageInfo['title'] }}</h1>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<ol class="breadcrumb float-sm-right">
|
||||
<li class="breadcrumb-form"><a href="{{ route('admin.dashboard') }}">{{ __('Dashboard') }}</a> / </li>
|
||||
<li class="breadcrumb-form active"> {{ $pageInfo['title'] }}</li>
|
||||
<li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
|
||||
<li class="breadcrumb-item active">{{ $pageInfo['title'] }}</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-4">
|
||||
<div class="col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<form action="{{ route('reports.vehicle') }}" method="GET">
|
||||
<div class="d-flex">
|
||||
<div class="col-md-3">
|
||||
<div class="form-group mb-3">
|
||||
<label for="region">Pilih Region</label>
|
||||
<select name="region" id="region" class="form-control">
|
||||
<option value="">Semua Region</option>
|
||||
@foreach ($regions as $region)
|
||||
<option value="{{ $region->code }}" {{ request()->region == $region->code ? 'selected' : '' }}>
|
||||
{{ $region->name }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="form-group mb-3">
|
||||
<label for="cabang">Pilih Cabang</label>
|
||||
<select name="cabang" id="cabang" class="form-control">
|
||||
<option value="">Semua Cabang</option>
|
||||
<!-- Cabang options will be dynamically populated -->
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<div class="form-group mb-3">
|
||||
<label for="status">Start Date</label>
|
||||
<input type="date" name="start_date" class="form-control" value="{{ request()->start_date }}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<div class="form-group mb-3">
|
||||
<label for="status">End Date</label>
|
||||
<input type="date" name="end_date" class="form-control" value="{{ request()->end_date }}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<div class="form-group mb-3">
|
||||
<label for="status">Status</label>
|
||||
<select name="status" id="status" class="form-control">
|
||||
<option value="">Semua Status</option>
|
||||
<option value="On Progress" {{ request()->status == 'On Progress' ? 'selected' : '' }}>On Progress</option>
|
||||
<option value="Approved 1" {{ request()->status == 'Approved 1' ? 'selected' : '' }}>Approved 1</option>
|
||||
<option value="Approved 2" {{ request()->status == 'Approved 2' ? 'selected' : '' }}>Approved 2</option>
|
||||
<option value="Closed" {{ request()->status == 'Closed' ? 'selected' : '' }}>Closed</option>
|
||||
<option value="Rejected" {{ request()->status == 'Rejected' ? 'selected' : '' }}>Rejected</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-3">
|
||||
<div class="form-group">
|
||||
<button type="submit" class="btn btn-primary">Filter</button>
|
||||
<a href="{{ route('reports.vehicle') }}" class="btn btn-secondary">Reset</a>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Filter Section - Diperbarui ke Sistem Periode Bulan Akuntansi --}}
|
||||
<div class="row mt-4">
|
||||
<div class="col-md-12">
|
||||
<div class="card shadow-sm border-0" style="border-radius: 15px;">
|
||||
<div class="card-body">
|
||||
<form action="{{ route('reports.vehicle') }}" method="GET">
|
||||
<div class="row align-items-end">
|
||||
<div class="col-md-3">
|
||||
<div class="form-group mb-3">
|
||||
<label class="small fw-bold text-muted">Pilih Region</label>
|
||||
<select name="region" id="region" class="form-control select2">
|
||||
<option value="">Semua Region</option>
|
||||
@foreach ($regions as $region)
|
||||
<option value="{{ $region->code }}" {{ request()->region == $region->code ? 'selected' : '' }}>{{ $region->name }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="form-group mb-3">
|
||||
<label class="small fw-bold text-muted">Pilih Cabang</label>
|
||||
<select name="cabang" id="cabang" class="form-control select2">
|
||||
<option value="">Semua Cabang</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<div class="form-group mb-3">
|
||||
<label class="small fw-bold text-muted">Periode Bulan</label>
|
||||
<select name="month" id="month" class="form-control">
|
||||
<option value="">Pilih Bulan</option>
|
||||
@foreach(['january','february','march','april','may','june','july','august','september','october','november','december'] as $m)
|
||||
<option value="{{ $m }}" {{ (request()->month ?? strtolower(date('F'))) == $m ? 'selected' : '' }}>{{ ucfirst($m) }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<div class="form-group mb-3">
|
||||
<label class="small fw-bold text-muted">Tahun</label>
|
||||
<select name="year" id="year" class="form-control">
|
||||
<option value="">Pilih Tahun</option>
|
||||
@for ($i = 2024; $i <= date('Y'); $i++)
|
||||
<option value="{{ $i }}" {{ (request()->year ?? date('Y')) == $i ? 'selected' : '' }}>{{ $i }}</option>
|
||||
@endfor
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<div class="form-group mb-3">
|
||||
<label class="small fw-bold text-muted">Status</label>
|
||||
<select name="status" id="status" class="form-control">
|
||||
<option value="">Semua Status</option>
|
||||
@foreach(['On Progress', 'Approved 1', 'Approved 2', 'Closed', 'Rejected'] as $st)
|
||||
<option value="{{ $st }}" {{ request()->status == $st ? 'selected' : '' }}>{{ $st }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-12 text-right mt-2">
|
||||
<button type="submit" class="btn btn-primary px-4 shadow-sm"><i class="fas fa-filter mr-1"></i> Filter</button>
|
||||
<a href="{{ route('reports.vehicle') }}" class="btn btn-outline-secondary px-4 shadow-sm">Reset</a>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@php
|
||||
use App\Helpers\NextCloudHelper;
|
||||
@endphp
|
||||
@php use App\Helpers\NextCloudHelper; @endphp
|
||||
|
||||
<section class="content">
|
||||
<div class="container-fluid">
|
||||
<!-- Form Up Vehicle Table -->
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card shadow-sm border-0" style="border-radius: 15px;">
|
||||
<div class="card-body">
|
||||
<h4 class="header-title">Form Vehicle Running Cost</h4>
|
||||
<div class="data-tables">
|
||||
@include('backend.layouts.partials.messages')
|
||||
<div class="table-responsive">
|
||||
<table id="dataTable-table">
|
||||
<thead class="bg-light text-capitalize">
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>No Expense</th>
|
||||
<th>Nama</th>
|
||||
<th>Region</th>
|
||||
<th>Cabang</th>
|
||||
<th>Tanggal</th>
|
||||
<th>Liter</th>
|
||||
<th>Total</th>
|
||||
<th>Total Approved</th>
|
||||
<th>Jarak</th>
|
||||
<th>Tipe Bensin</th>
|
||||
<th>Nomor Polisi</th>
|
||||
<th>Bukti</th>
|
||||
<th>Account Number</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach ($forms as $item)
|
||||
<tr>
|
||||
<td>{{ $loop->iteration }}</td>
|
||||
<td>{{ $item->expense_number }}</td>
|
||||
<td>{{ $item->user->name }}</td>
|
||||
<td>{{ $item->user->region->cabang->region->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>{{ $item->liter }}</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>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<h4 class="header-title mb-4">List Report Vehicle Running Cost</h4>
|
||||
<div class="table-responsive">
|
||||
<table id="dataTable-table" class="table table-hover w-100">
|
||||
<thead class="bg-light text-capitalize">
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>No Expense</th>
|
||||
<th>Pengaju</th>
|
||||
<th>Region / Cabang</th>
|
||||
<th>Nopol / Bensin</th>
|
||||
<th>Tgl. Penggunaan</th>
|
||||
<th>Tgl. Dibuat</th>
|
||||
<th>Liter / Jarak</th>
|
||||
<th>Total Approved</th>
|
||||
<th class="text-center">Bukti</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach ($forms as $item)
|
||||
<tr>
|
||||
<td>{{ $loop->iteration }}</td>
|
||||
<td class="fw-bold text-primary">{{ $item->expense_number }}</td>
|
||||
<td>{{ $item->user->name ?? '-' }}</td>
|
||||
<td>
|
||||
<span class="d-block small fw-bold">{{ $item->user->region->cabang->region->name ?? '-' }}</span>
|
||||
<span class="text-muted small">{{ $item->user->cabang->cabang->name ?? '-' }}</span>
|
||||
</td>
|
||||
<td>
|
||||
<div class="fw-bold small">{{ $item->nopol ?? '-' }}</div>
|
||||
<div class="badge badge-light border small">{{ $item->tipe_bensin }}</div>
|
||||
</td>
|
||||
<td class="small">{{ \Carbon\Carbon::parse($item->tanggal)->format('d M Y') }}</td>
|
||||
<td>
|
||||
<div class="fw-bold small">{{ $item->created_at->format('d M Y') }}</div>
|
||||
<small class="text-muted">{{ $item->created_at->format('H:i') }} WIB</small>
|
||||
</td>
|
||||
<td>
|
||||
<div class="small fw-bold">{{ $item->liter }} Liter</div>
|
||||
<div class="text-muted small italic">{{ $item->jarak }} km</div>
|
||||
</td>
|
||||
<td class="fw-bold text-success">{{ $item->approved_total ? number_format($item->approved_total, 0, ',', '.') : '-' }}</td>
|
||||
|
||||
{{-- AREA PREVIEW LAMPIRAN --}}
|
||||
<td class="text-center">
|
||||
@php
|
||||
$fileData = [];
|
||||
$imgExts = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp'];
|
||||
|
||||
if (!empty($item->bukti_total)) {
|
||||
$ext = strtolower(pathinfo($item->bukti_total, PATHINFO_EXTENSION));
|
||||
$fileData[] = ['url' => NextCloudHelper::getFileUrl($item->bukti_total), 'is_img' => in_array($ext, $imgExts)];
|
||||
}
|
||||
|
||||
if ($item->attachments) {
|
||||
foreach ($item->attachments as $att) {
|
||||
if ($att->file_path) {
|
||||
$ext = strtolower(pathinfo($att->file_path, PATHINFO_EXTENSION));
|
||||
$fileData[] = ['url' => NextCloudHelper::getFileUrl($att->file_path), 'is_img' => in_array($ext, $imgExts)];
|
||||
}
|
||||
}
|
||||
}
|
||||
$uniqueFiles = collect($fileData)->unique('url')->values()->all();
|
||||
@endphp
|
||||
|
||||
@if (count($uniqueFiles) > 0)
|
||||
<button type="button" class="btn btn-sm btn-info rounded-pill px-3 shadow-sm btn-preview-bukti"
|
||||
data-expense="{{ $item->expense_number }}"
|
||||
data-files='@json($uniqueFiles)'>
|
||||
<i class="fas fa-eye"></i> {{ count($uniqueFiles) }}
|
||||
</button>
|
||||
@else
|
||||
<span class="text-muted small">-</span>
|
||||
@endif
|
||||
</td>
|
||||
|
||||
<td>
|
||||
@php
|
||||
$badgeClass = match($item->status) {
|
||||
'On Progress' => 'badge-warning text-white',
|
||||
'Approved 1', 'Approved 2', 'Closed' => 'badge-success text-white',
|
||||
'Rejected' => 'badge-danger text-white',
|
||||
default => 'badge-secondary'
|
||||
};
|
||||
@endphp
|
||||
<span class="badge {{ $badgeClass }} px-3 py-2">{{ $item->status }}</span>
|
||||
|
||||
{{-- BLOK AUDIT TRAIL LOG REJECTED --}}
|
||||
@if($item->status === 'Rejected')
|
||||
<div class="mt-2 p-2 bg-light border border-danger rounded" style="line-height: 1.3; min-width: 160px; border-style: dashed !important;">
|
||||
<small class="text-danger fw-bold d-block mb-1" style="font-size: 10px;">
|
||||
<i class="fas fa-times-circle mr-1"></i> Detail Penolakan:
|
||||
</small>
|
||||
<small class="text-dark d-block" style="font-size: 10px;">
|
||||
<strong>Oleh:</strong> {{ $item->rejector->name ?? $item->rejected_by ?? 'System' }}
|
||||
</small>
|
||||
@if($item->rejected_at)
|
||||
<small class="text-muted d-block" style="font-size: 10px;">
|
||||
<strong>Waktu:</strong> {{ \Carbon\Carbon::parse($item->rejected_at)->translatedFormat('d M Y H:i') }} WIB
|
||||
</small>
|
||||
@elseif($item->updated_at && $item->remarks)
|
||||
<small class="text-muted d-block" style="font-size: 10px;">
|
||||
<strong>Waktu:</strong> {{ \Carbon\Carbon::parse($item->updated_at)->translatedFormat('d M Y H:i') }} WIB
|
||||
</small>
|
||||
@endif
|
||||
@if($item->remarks)
|
||||
<small class="text-danger d-block mt-1 italic" style="font-size: 10px; line-height: 1.1;">
|
||||
<strong>Ket:</strong> "{{ $item->remarks }}"
|
||||
</small>
|
||||
@endif
|
||||
</div>
|
||||
@endif
|
||||
|
||||
{{-- BLOK EXISTING FINAL APPROVED / CLOSED --}}
|
||||
@if($item->final_approved_at && in_array($item->status, ['Approved 2', 'Closed']))
|
||||
<div class="mt-2" style="line-height: 1.2;">
|
||||
<small class="text-success fw-bold d-block" style="font-size: 10px;">
|
||||
<i class="fas fa-check-double mr-1"></i> Final Approved:
|
||||
</small>
|
||||
<small class="text-muted d-block" style="font-size: 10px;">
|
||||
{{ \Carbon\Carbon::parse($item->final_approved_at)->translatedFormat('d M Y') }}
|
||||
<span class="ml-1">{{ \Carbon\Carbon::parse($item->final_approved_at)->format('H:i') }} WIB</span>
|
||||
</small>
|
||||
</div>
|
||||
@endif
|
||||
</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{{-- MODAL PREVIEW & ZOOM --}}
|
||||
<div class="modal fade" id="modalPreviewBukti" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered modal-lg">
|
||||
<div class="modal-content" style="border-radius: 15px; border: none; overflow: hidden;">
|
||||
<div class="modal-header bg-primary text-white border-0">
|
||||
<h5 class="modal-title fw-bold"><i class="fas fa-images mr-2"></i>Lampiran Bukti <span id="textExpenseNum"></span></h5>
|
||||
<button type="button" class="close text-white" data-dismiss="modal">×</button>
|
||||
</div>
|
||||
<div class="modal-body bg-light" id="containerPreview" style="max-height: 70vh; overflow-y: auto; padding: 25px;"></div>
|
||||
<div class="modal-footer bg-light border-0">
|
||||
<button type="button" class="btn btn-secondary rounded-pill px-4" data-dismiss="modal">Tutup</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal fade" id="modalImageFull" tabindex="-2" role="dialog" aria-hidden="true" style="background: rgba(0,0,0,0.85); z-index: 1060;">
|
||||
<div class="modal-dialog modal-dialog-centered modal-xl">
|
||||
<div class="modal-content" style="background: transparent; border: none;">
|
||||
<div class="modal-header border-0 p-0">
|
||||
<button type="button" class="close text-white" data-dismiss="modal" style="font-size: 2.5rem; position: absolute; right: 15px; top: 10px; z-index: 999; opacity: 1;">×</button>
|
||||
</div>
|
||||
<div class="modal-body p-0 text-center">
|
||||
<img src="" id="imgFullDisplay" style="max-width: 100%; max-height: 90vh; border-radius: 8px; box-shadow: 0 0 30px rgba(0,0,0,0.5);">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@section('scripts')
|
||||
<script>
|
||||
if ($('#dataTable-table').length) {
|
||||
$('#dataTable-table').DataTable({
|
||||
responsive: false,
|
||||
dom: 'Blfrtip',
|
||||
lengthMenu: [ [10, 50, 100, -1], [10, 50, 100, "All"] ], // Control the entries dropdown
|
||||
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'
|
||||
]
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
if ($('#dataTable-table').length) {
|
||||
$('#dataTable-table').DataTable({
|
||||
responsive: false,
|
||||
dom: 'Blfrtip',
|
||||
deferRender: true, // Meningkatkan kecepatan muat halaman secara drastis
|
||||
lengthMenu: [ [10, 50, 100, -1], [10, 50, 100, "All"] ],
|
||||
buttons: [
|
||||
{
|
||||
extend: 'excelHtml5', text: '<i class="fas fa-file-excel mr-1"></i> Excel', className: 'btn-success',
|
||||
exportOptions: {
|
||||
columns: [0, 1, 2, 3, 4, 5, 6, 7, 8, 10],
|
||||
format: {
|
||||
body: function (data, row, column, node) {
|
||||
let text = node.textContent || node.innerText || "";
|
||||
if (column === 8) return text.replace(/[.]/g, '');
|
||||
return text.replace(/\s+/g, ' ').trim();
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
extend: 'pdfHtml5', text: '<i class="fas fa-file-pdf mr-1"></i> PDF', className: 'btn-danger',
|
||||
orientation: 'landscape', pageSize: 'A4',
|
||||
exportOptions: { columns: [0, 1, 2, 3, 4, 5, 6, 7, 8, 10] },
|
||||
customize: function(doc) {
|
||||
doc.defaultStyle.fontSize = 8;
|
||||
doc.styles.tableHeader.fontSize = 9;
|
||||
}
|
||||
},
|
||||
'colvis'
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
<script>
|
||||
document.getElementById('region').addEventListener('change', function () {
|
||||
const regionCode = this.value;
|
||||
const cabangSelect = document.getElementById('cabang');
|
||||
$(document).on('click', '.btn-preview-bukti', function(e) {
|
||||
e.preventDefault();
|
||||
const expenseNum = $(this).data('expense');
|
||||
const files = $(this).data('files');
|
||||
let html = '<div class="row">';
|
||||
|
||||
// Clear existing options
|
||||
cabangSelect.innerHTML = '<option value="">Semua Cabang</option>';
|
||||
$('#textExpenseNum').text('#' + expenseNum);
|
||||
$('#containerPreview').html('<div class="text-center py-5"><i class="fas fa-circle-notch fa-spin fa-3x text-primary"></i></div>');
|
||||
|
||||
if (regionCode) {
|
||||
fetch(`/api/cabang-by-region/${regionCode}`)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
data.forEach(cabang => {
|
||||
const option = document.createElement('option');
|
||||
option.value = cabang.code;
|
||||
option.textContent = cabang.name;
|
||||
cabangSelect.appendChild(option);
|
||||
});
|
||||
})
|
||||
.catch(error => console.error('Error fetching cabang data:', error));
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@endsection
|
||||
if(files && files.length > 0) {
|
||||
files.forEach((file) => {
|
||||
html += `
|
||||
<div class="col-md-6 mb-4">
|
||||
<div class="card h-100 border-0 shadow-sm rounded-lg overflow-hidden">
|
||||
<div class="card-body p-2 text-center bg-white">
|
||||
<div class="thumbnail-container mb-3" style="height: 220px; display: flex; align-items: center; justify-content: center; background: #f8f9fa; border-radius: 8px; overflow: hidden; border: 1px solid #eee;">
|
||||
${file.is_img
|
||||
? `<img src="${file.url}" class="img-fluid" style="max-height: 100%; object-fit: contain; cursor: zoom-in;" onclick="openFullImage('${file.url}')">`
|
||||
: `<div class="text-center"><i class="fas fa-file-pdf fa-4x text-danger"></i><p class="small text-muted mt-2 fw-bold">Dokumen Digital</p></div>`
|
||||
}
|
||||
</div>
|
||||
<div class="btn-group w-100">
|
||||
${file.is_img
|
||||
? `<button type="button" onclick="openFullImage('${file.url}')" class="btn btn-outline-primary btn-sm px-3"><i class="fas fa-eye"></i> Preview Full</button>`
|
||||
: `<a href="${file.url}" target="_blank" class="btn btn-outline-primary btn-sm px-3"><i class="fas fa-external-link-alt"></i> Buka PDF</a>`
|
||||
}
|
||||
<a href="${file.url}" download class="btn btn-primary btn-sm px-3"><i class="fas fa-download"></i> Download</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
});
|
||||
}
|
||||
$('#containerPreview').html(html + '</div>');
|
||||
$('#modalPreviewBukti').modal('show');
|
||||
});
|
||||
|
||||
function loadCabang(regionCode, selectedCabang = null) {
|
||||
const cabangSelect = $('#cabang');
|
||||
if (regionCode) {
|
||||
fetch(`/api/cabang-by-region/${regionCode}`)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
cabangSelect.html('<option value="">Semua Cabang</option>');
|
||||
data.forEach(cabang => {
|
||||
const isSelected = (selectedCabang && cabang.code === selectedCabang) ? 'selected' : '';
|
||||
cabangSelect.append(`<option value="${cabang.code}" ${isSelected}>${cabang.name}</option>`);
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
$('#region').on('change', function() { loadCabang(this.value); });
|
||||
const currentRegion = '{{ request()->region }}';
|
||||
const currentCabang = '{{ request()->cabang }}';
|
||||
if (currentRegion) { loadCabang(currentRegion, currentCabang); }
|
||||
});
|
||||
|
||||
function openFullImage(url) {
|
||||
$('#imgFullDisplay').attr('src', url);
|
||||
$('#modalImageFull').modal('show');
|
||||
}
|
||||
</script>
|
||||
@endsection
|
||||
Reference in New Issue
Block a user