From 8fa4b2ea9e921e4fcc5421f7bea30312895801d4 Mon Sep 17 00:00:00 2001
From: Daeng Deni Mardaeni <ddeni05@gmail.com>
Date: Sun, 8 Jun 2025 23:45:05 +0700
Subject: [PATCH] feat(webstatement): tambahkan menu dan halaman untuk laporan
 transaksi ATM

- Menambahkan menu baru "Laporan Transaksi ATM" di file `module.json`:
  - Pengaturan path: `atm-reports`.
  - Ikon: `ki-filled ki-printer text-lg text-primary`.
  - Role akses hanya untuk `administrator`.

- Menambahkan breadcrumb untuk laporan transaksi ATM di file `breadcrumbs.php`:
  - Nama breadcrumb: `atm-reports.index`.
  - Nama tampilan: `Laporan Transaksi ATM`.
  - Mengarah ke route `atm-reports.index`.

- Menambahkan view halaman `atm-reports/index.blade.php`:
  - Form permintaan laporan transaksi ATM:
    - Input tanggal laporan.
    - Tombol submit laporan.
  - Tabel daftar laporan yang mendukung:
    - Pagination, filter, dan search.
    - Status laporan (`completed`, `processing`, `pending`, `failed`).
    - Status otorisasi (`approved`, `rejected`, `pending`).
    - Aksi: Lihat detail, unduh (jika selesai), dan hapus laporan (jika pending/failed).

- Menambahkan script handling untuk:
  - Delete laporan transaksi dengan modal konfirmasi menggunakan Swal.
  - Konfigurasi data datatable dengan sorting, pagination, dan API.

- Tujuan pembaruan:
  - Memberikan akses pengguna untuk mengelola laporan transaksi ATM melalui UI.
  - Memungkinkan permintaan, pelacakan, dan penghapusan laporan transaksi ATM secara mudah.

Signed-off-by: Daeng Deni Mardaeni <ddeni05@gmail.com>
---
 module.json                                 |  13 +
 resources/views/atm-reports/index.blade.php | 271 ++++++++++++++++++++
 routes/breadcrumbs.php                      |   6 +
 3 files changed, 290 insertions(+)
 create mode 100644 resources/views/atm-reports/index.blade.php

diff --git a/module.json b/module.json
index 9ac9e25..0e92183 100644
--- a/module.json
+++ b/module.json
@@ -63,6 +63,19 @@
                 "roles": []
             }
         ],
+        "laporan": [
+            {
+                "title": "Laporan Transaksi ATM",
+                "path": "atm-reports",
+                "icon": "ki-filled ki-printer text-lg text-primary",
+                "classes": "",
+                "attributes": [],
+                "permission": "",
+                "roles": [
+                    "administrator"
+                ]
+            }
+        ],
         "master": [
             {
                 "title": "Basic Data",
diff --git a/resources/views/atm-reports/index.blade.php b/resources/views/atm-reports/index.blade.php
new file mode 100644
index 0000000..adcc2a7
--- /dev/null
+++ b/resources/views/atm-reports/index.blade.php
@@ -0,0 +1,271 @@
+@extends('layouts.main')
+
+@section('title', 'ATM Transaction Reports')
+
+@section('breadcrumbs')
+    {{ Breadcrumbs::render(request()->route()->getName()) }}
+@endsection
+
+@section('content')
+    <div class="grid grid-cols-8 gap-5">
+        <div class="col-span-2 card">
+            <div class="card-header">
+                <h3 class="card-title">Request ATM Transaction Report</h3>
+            </div>
+            <div class="card-body">
+                <form action="{{ route('atm-reports.store') }}" method="POST">
+                    @csrf
+
+                    <div class="grid grid-cols-1 gap-5">
+                        <div class="form-group">
+                            <label class="form-label required" for="report_date">Report Date</label>
+                            <input type="date" class="input form-control @error('report_date') is-invalid @enderror"
+                                id="report_date" name="report_date" value="{{ old('report_date') }}" required>
+                            @error('report_date')
+                                <div class="invalid-feedback">{{ $message }}</div>
+                            @enderror
+                        </div>
+
+                        <div class="form-group">
+                            <button type="submit" class="w-full btn btn-primary">
+                                <i class="ki-filled ki-plus"></i>
+                                Generate Report
+                            </button>
+                        </div>
+                    </div>
+                </form>
+            </div>
+        </div>
+
+        <div class="col-span-6">
+            <div class="min-w-full card card-grid" data-datatable="false" data-datatable-page-size="10"
+                data-datatable-state-save="false" id="atm-reports-table"
+                data-api-url="{{ route('atm-reports.datatables') }}">
+                <div class="flex-wrap py-5 card-header">
+                    <h3 class="card-title">
+                        ATM Transaction Reports
+                    </h3>
+                    <div class="flex flex-wrap gap-2 lg:gap-5">
+                        <div class="flex">
+                            <label class="input input-sm"> <i class="ki-filled ki-magnifier"> </i>
+                                <input placeholder="Search Reports" id="search" type="text" value="">
+                            </label>
+                        </div>
+                    </div>
+                </div>
+                <div class="card-body">
+                    <div class="scrollable-x-auto">
+                        <table class="table text-sm font-medium text-gray-700 align-middle table-auto table-border"
+                            data-datatable-table="true">
+                            <thead>
+                                <tr>
+                                    <th class="w-14">
+                                        <input class="checkbox checkbox-sm" data-datatable-check="true" type="checkbox" />
+                                    </th>
+                                    <th class="min-w-[100px]" data-datatable-column="id">
+                                        <span class="sort"> <span class="sort-label"> ID </span>
+                                            <span class="sort-icon"> </span> </span>
+                                    </th>
+                                    <th class="min-w-[150px]" data-datatable-column="period">
+                                        <span class="sort"> <span class="sort-label"> Period </span>
+                                            <span class="sort-icon"> </span> </span>
+                                    </th>
+                                    <th class="min-w-[150px]" data-datatable-column="report_date">
+                                        <span class="sort"> <span class="sort-label"> Report Date </span>
+                                            <span class="sort-icon"> </span> </span>
+                                    </th>
+                                    <th class="min-w-[150px]" data-datatable-column="status">
+                                        <span class="sort"> <span class="sort-label"> Status </span>
+                                            <span class="sort-icon"> </span> </span>
+                                    </th>
+                                    <th class="min-w-[150px]" data-datatable-column="authorization_status">
+                                        <span class="sort"> <span class="sort-label"> Authorization </span>
+                                            <span class="sort-icon"> </span> </span>
+                                    </th>
+                                    <th class="min-w-[180px]" data-datatable-column="created_at">
+                                        <span class="sort"> <span class="sort-label"> Created At </span>
+                                            <span class="sort-icon"> </span> </span>
+                                    </th>
+                                    <th class="min-w-[50px] text-center" data-datatable-column="actions">Action</th>
+                                </tr>
+                            </thead>
+                        </table>
+                    </div>
+                    <div
+                        class="flex-col gap-3 justify-center font-medium text-gray-600 card-footer md:justify-between md:flex-row text-2sm">
+                        <div class="flex gap-2 items-center">
+                            Show
+                            <select class="w-16 select select-sm" data-datatable-size="true" name="perpage"> </select> per
+                            page
+                        </div>
+                        <div class="flex gap-4 items-center">
+                            <span data-datatable-info="true"> </span>
+                            <div class="pagination" data-datatable-pagination="true">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+@endsection
+
+@push('scripts')
+    <script type="text/javascript">
+        function deleteData(data) {
+            Swal.fire({
+                title: 'Are you sure?',
+                text: "You won't be able to revert this!",
+                icon: 'warning',
+                showCancelButton: true,
+                confirmButtonColor: '#3085d6',
+                cancelButtonColor: '#d33',
+                confirmButtonText: 'Yes, delete it!'
+            }).then((result) => {
+                if (result.isConfirmed) {
+                    $.ajaxSetup({
+                        headers: {
+                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
+                        }
+                    });
+
+                    $.ajax(`atm-reports/${data}`, {
+                        type: 'DELETE'
+                    }).then((response) => {
+                        swal.fire('Deleted!', 'ATM Transaction report has been deleted.', 'success').then(
+                        () => {
+                                window.location.reload();
+                            });
+                    }).catch((error) => {
+                        console.error('Error:', error);
+                        Swal.fire('Error!', 'An error occurred while deleting the record.', 'error');
+                    });
+                }
+            })
+        }
+    </script>
+
+    <script type="module">
+        const element = document.querySelector('#atm-reports-table');
+        const searchInput = document.getElementById('search');
+
+        const apiUrl = element.getAttribute('data-api-url');
+        const dataTableOptions = {
+            apiEndpoint: apiUrl,
+            pageSize: 10,
+            columns: {
+                select: {
+                    render: (item, data, context) => {
+                        const checkbox = document.createElement('input');
+                        checkbox.className = 'checkbox checkbox-sm';
+                        checkbox.type = 'checkbox';
+                        checkbox.value = data.id.toString();
+                        checkbox.setAttribute('data-datatable-row-check', 'true');
+                        return checkbox.outerHTML.trim();
+                    },
+                },
+                id: {
+                    title: 'ID',
+                },
+                period: {
+                    title: 'Period',
+                    render: (item, data) => {
+                        return data.period || '';
+                    },
+                },
+                report_date: {
+                    title: 'Report Date',
+                    render: (item, data) => {
+                        return data.report_date || '';
+                    },
+                },
+                status: {
+                    title: 'Status',
+                    render: (item, data) => {
+                        let statusClass = 'badge badge-light-primary';
+
+                        if (data.status === 'completed') {
+                            statusClass = 'badge badge-light-success';
+                        } else if (data.status === 'failed') {
+                            statusClass = 'badge badge-light-danger';
+                        } else if (data.status === 'processing') {
+                            statusClass = 'badge badge-light-warning';
+                        } else if (data.status === 'pending') {
+                            statusClass = 'badge badge-light-info';
+                        }
+
+                        return `<span class="${statusClass}">${data.status}</span>`;
+                    },
+                },
+                authorization_status: {
+                    title: 'Authorization',
+                    render: (item, data) => {
+                        let statusClass = 'badge badge-light-primary';
+
+                        if (data.authorization_status === 'approved') {
+                            statusClass = 'badge badge-light-success';
+                        } else if (data.authorization_status === 'rejected') {
+                            statusClass = 'badge badge-light-danger';
+                        } else if (data.authorization_status === 'pending') {
+                            statusClass = 'badge badge-light-warning';
+                        }
+
+                        return `<span class="${statusClass}">${data.authorization_status || 'pending'}</span>`;
+                    },
+                },
+                created_at: {
+                    title: 'Created At',
+                    render: (item, data) => {
+                        return data.created_at ?? '';
+                    },
+                },
+                actions: {
+                    title: 'Actions',
+                    render: (item, data) => {
+                        let buttons = `<div class="flex flex-nowrap justify-center">
+                            <a class="btn btn-sm btn-icon btn-clear btn-info" href="atm-reports/${data.id}">
+                                <i class="ki-outline ki-eye"></i>
+                            </a>`;
+
+                        // Show download button if report is completed
+                        if (data.status === 'completed' && data.file_path) {
+                            buttons += `<a class="btn btn-sm btn-icon btn-clear btn-success" href="atm-reports/${data.id}/download">
+                                <i class="ki-outline ki-cloud-download"></i>
+                            </a>`;
+                        }
+
+                        // Only show delete button if status is pending or failed
+                        if (data.status === 'pending' || data.status === 'failed') {
+                            buttons += `<a onclick="deleteData(${data.id})" class="delete btn btn-sm btn-icon btn-clear btn-danger">
+                                <i class="ki-outline ki-trash"></i>
+                            </a>`;
+                        }
+
+                        buttons += `</div>`;
+                        return buttons;
+                    },
+                }
+            },
+        };
+
+        let dataTable = new KTDataTable(element, dataTableOptions);
+        // Custom search functionality
+        searchInput.addEventListener('input', function() {
+            const searchValue = this.value.trim();
+            dataTable.search(searchValue, true);
+        });
+
+        // Handle the "select all" checkbox
+        const selectAllCheckbox = document.querySelector('input[data-datatable-check="true"]');
+        if (selectAllCheckbox) {
+            selectAllCheckbox.addEventListener('change', function() {
+                const isChecked = this.checked;
+                const rowCheckboxes = document.querySelectorAll('input[data-datatable-row-check="true"]');
+
+                rowCheckboxes.forEach(checkbox => {
+                    checkbox.checked = isChecked;
+                });
+            });
+        }
+    </script>
+@endpush
diff --git a/routes/breadcrumbs.php b/routes/breadcrumbs.php
index 9d43203..42fc368 100644
--- a/routes/breadcrumbs.php
+++ b/routes/breadcrumbs.php
@@ -114,3 +114,9 @@
         $trail->parent('home');
         $trail->push('Print Stetement', route('statements.index'));
     });
+
+
+    Breadcrumbs::for('atm-reports.index', function (BreadcrumbTrail $trail) {
+        $trail->parent('home');
+        $trail->push('Laporan Transaksi ATM', route('atm-reports.index'));
+    });