feat(webstatement): tambahkan halaman detail laporan transaksi ATM
- Menambahkan view `atm-reports/show.blade.php` untuk menampilkan detail laporan transaksi ATM: - Menampilkan informasi laporan seperti periode, tanggal laporan, status, dan status otorisasi. - Menyediakan informasi file laporan jika status selesai, seperti path, ukuran file, dan jumlah data. - Menampilkan pesan error jika status laporan gagal, termasuk pesan kesalahan detail. - Menampilkan status unduhan laporan beserta waktu unduhan jika sudah diunduh. - Menambahkan informasi pengguna terkait: - Pihak yang membuat, memodifikasi, dan memberikan otorisasi laporan. - Metadata tambahan seperti IP address dan user agent. - Menambahkan form otorisasi untuk laporan dengan status `pending authorization`: - Menyediakan opsi untuk `approve` atau `reject` laporan. - Menyertakan field remarks sebagai catatan keputusan otorisasi. - Memasukkan elemen navigasi: - Tombol kembali ke daftar laporan. - Tombol unduh file laporan (jika tersedia). - Menyertakan scripting tambahan untuk inisialisasi dinamika halaman menggunakan JavaScript. Signed-off-by: Daeng Deni Mardaeni <ddeni05@gmail.com>
This commit is contained in:
Daeng Deni Mardaeni
249
resources/views/atm-reports/show.blade.php
Normal file
249
resources/views/atm-reports/show.blade.php
Normal file
@@ -0,0 +1,249 @@
|
||||
@extends('layouts.main')
|
||||
|
||||
@section('content')
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">ATM Transaction Report Details</h3>
|
||||
<div class="card-toolbar">
|
||||
<a href="{{ route('atm-reports.index') }}" class="btn btn-sm btn-info me-2">
|
||||
<i class="ki-duotone ki-arrow-left fs-2"></i>Back to List
|
||||
</a>
|
||||
|
||||
@if ($atmReport->status === 'completed' && $atmReport->file_path)
|
||||
<a href="{{ route('atm-reports.download', $atmReport->id) }}" class="btn btn-sm btn-primary">
|
||||
<i class="ki-duotone ki-document fs-2"></i>Download Report
|
||||
</a>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
@if (session('success'))
|
||||
<div class="alert alert-success">
|
||||
{{ session('success') }}
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if (session('error'))
|
||||
<div class="alert alert-danger">
|
||||
{{ session('error') }}
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div class="grid grid-cols-2 gap-5 g-5">
|
||||
<!-- Left Column - Report Information -->
|
||||
<div class="shadow-sm card card-flush h-xl-100">
|
||||
<div class="card-header">
|
||||
<div class="card-title">
|
||||
<h2>Report Information</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="py-5 card-body">
|
||||
<div class="gap-5 d-flex flex-column">
|
||||
<div class="d-flex flex-column">
|
||||
<div class="text-gray-500 fw-semibold">Period</div>
|
||||
<div class="fw-bold fs-5">
|
||||
@php
|
||||
// Convert format YYYYMMDD to readable date
|
||||
$date = \Carbon\Carbon::createFromFormat('Ymd', $atmReport->period);
|
||||
$periodText = $date->format('d F Y');
|
||||
@endphp
|
||||
{{ $periodText }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex flex-column">
|
||||
<div class="text-gray-500 fw-semibold">Report Date</div>
|
||||
<div class="fw-bold fs-5">{{ $atmReport->report_date }}</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex flex-column">
|
||||
<div class="text-gray-500 fw-semibold">Status</div>
|
||||
<div>
|
||||
@if ($atmReport->status === 'pending')
|
||||
<span class="badge badge-info">Pending</span>
|
||||
@elseif($atmReport->status === 'processing')
|
||||
<span class="badge badge-warning">Processing</span>
|
||||
@elseif($atmReport->status === 'completed')
|
||||
<span class="badge badge-success">Completed</span>
|
||||
@elseif($atmReport->status === 'failed')
|
||||
<span class="badge badge-danger">Failed</span>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex flex-column">
|
||||
<div class="text-gray-500 fw-semibold">Authorization Status</div>
|
||||
<div>
|
||||
@if ($atmReport->authorization_status === 'pending')
|
||||
<span class="badge badge-warning">Pending Authorization</span>
|
||||
@elseif($atmReport->authorization_status === 'approved')
|
||||
<span class="badge badge-success">Approved</span>
|
||||
@elseif($atmReport->authorization_status === 'rejected')
|
||||
<span class="badge badge-danger">Rejected</span>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if ($atmReport->status === 'completed')
|
||||
<div class="d-flex flex-column">
|
||||
<div class="text-gray-500 fw-semibold">File Information</div>
|
||||
<div class="fw-bold fs-6">
|
||||
@if ($atmReport->file_path)
|
||||
<div>Path: {{ $atmReport->file_path }}</div>
|
||||
@endif
|
||||
@if ($atmReport->file_size)
|
||||
<div>Size: {{ number_format($atmReport->file_size / 1024, 2) }} KB</div>
|
||||
@endif
|
||||
@if ($atmReport->record_count)
|
||||
<div>Records: {{ number_format($atmReport->record_count) }}</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if ($atmReport->status === 'failed' && $atmReport->error_message)
|
||||
<div class="d-flex flex-column">
|
||||
<div class="text-gray-500 fw-semibold">Error Message</div>
|
||||
<div class="text-danger fw-bold fs-6">{{ $atmReport->error_message }}</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div class="d-flex flex-column">
|
||||
<div class="text-gray-500 fw-semibold">Downloaded</div>
|
||||
<div>
|
||||
@if ($atmReport->is_downloaded)
|
||||
<span class="badge badge-success">Yes</span>
|
||||
<div class="mt-1 text-muted">
|
||||
Downloaded at:
|
||||
{{ $atmReport->downloaded_at ? $atmReport->downloaded_at->format('d M Y H:i:s') : 'N/A' }}
|
||||
</div>
|
||||
@else
|
||||
<span class="badge badge-light-primary">No</span>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Column - Request Information -->
|
||||
<div class="shadow-sm card card-flush h-xl-100">
|
||||
<div class="card-header">
|
||||
<div class="card-title">
|
||||
<h2>Request Information</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="py-5 card-body">
|
||||
<div class="gap-5 d-flex flex-column">
|
||||
<div class="d-flex flex-column">
|
||||
<div class="text-gray-500 fw-semibold">Requested By</div>
|
||||
<div class="fw-bold fs-5">{{ $atmReport->user->name ?? 'N/A' }}</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex flex-column">
|
||||
<div class="text-gray-500 fw-semibold">Requested At</div>
|
||||
<div class="fw-bold fs-5">{{ dateFormat($atmReport->created_at, 1, 1) }}</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex flex-column">
|
||||
<div class="text-gray-500 fw-semibold">IP Address</div>
|
||||
<div class="fw-bold fs-5">{{ $atmReport->ip_address }}</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex flex-column">
|
||||
<div class="text-gray-500 fw-semibold">User Agent</div>
|
||||
<div class="text-muted small">{{ $atmReport->user_agent }}</div>
|
||||
</div>
|
||||
|
||||
@if ($atmReport->authorization_status !== 'pending')
|
||||
<div class="d-flex flex-column">
|
||||
<div class="text-gray-500 fw-semibold">Authorized By</div>
|
||||
<div class="fw-bold fs-5">{{ $atmReport->authorizer->name ?? 'N/A' }}</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex flex-column">
|
||||
<div class="text-gray-500 fw-semibold">Authorized At</div>
|
||||
<div class="fw-bold fs-5">
|
||||
{{ $atmReport->authorized_at ? $atmReport->authorized_at->format('d M Y H:i:s') : 'N/A' }}
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if ($atmReport->created_by && $atmReport->created_by !== $atmReport->user_id)
|
||||
<div class="d-flex flex-column">
|
||||
<div class="text-gray-500 fw-semibold">Created By</div>
|
||||
<div class="fw-bold fs-5">{{ $atmReport->creator->name ?? 'N/A' }}</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if ($atmReport->updated_by)
|
||||
<div class="d-flex flex-column">
|
||||
<div class="text-gray-500 fw-semibold">Last Updated By</div>
|
||||
<div class="fw-bold fs-5">{{ $atmReport->updater->name ?? 'N/A' }}</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex flex-column">
|
||||
<div class="text-gray-500 fw-semibold">Last Updated At</div>
|
||||
<div class="fw-bold fs-5">{{ dateFormat($atmReport->updated_at, 1, 1) }}</div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if ($atmReport->authorization_status === 'pending' && auth()->user()->can('authorize_atm_reports'))
|
||||
<div class="mt-7 shadow-sm card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Authorization</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form action="{{ route('atm-reports.authorize', $atmReport->id) }}" method="POST">
|
||||
@csrf
|
||||
|
||||
<div class="mb-5">
|
||||
<label class="form-label required">Authorization Decision</label>
|
||||
<div class="d-flex">
|
||||
<div class="form-check form-check-custom form-check-solid me-5">
|
||||
<input class="form-check-input" type="radio" name="authorization_status"
|
||||
value="approved" id="status_approved" required />
|
||||
<label class="form-check-label" for="status_approved">
|
||||
Approve
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check form-check-custom form-check-solid">
|
||||
<input class="form-check-input" type="radio" name="authorization_status"
|
||||
value="rejected" id="status_rejected" required />
|
||||
<label class="form-check-label" for="status_rejected">
|
||||
Reject
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-5">
|
||||
<label class="form-label">Remarks</label>
|
||||
<textarea class="form-control" name="remarks" rows="3"
|
||||
placeholder="Enter any remarks or reasons for your decision"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="text-end">
|
||||
<button type="submit" class="btn btn-primary">Submit Authorization</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('scripts')
|
||||
<script>
|
||||
// Any additional JavaScript for this page
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Initialize any components if needed
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
Reference in New Issue
Block a user