This commit is contained in:
root
@@ -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