armiejean
/
cms-frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

reports functionality works

This commit is contained in:
armiejean 2025-05-16 16:42:36 +08:00
parent 41b7cd37c0
commit 4061579428
7 changed files with 580 additions and 258 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

154
app/Http/Controllers/ReportsController.php Normal file
View File

@ -0,0 +1,154 @@
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Http;
class ReportsController extends Controller
{
protected $apiBaseUrl = 'http://192.168.100.6:8081/api/';
public function mobileUsage(Request $request)
{
$params = [
'page' => $request->input('page', 1),
'page_size' => 5,
'date_start' => $request->input('date_start'),
'date_end' => $request->input('date_end'),
'sorting' => $request->input('sort', 'date|desc'),
];
$response = Http::get($this->apiBaseUrl . 'cms/reportMobileUsage', $params);
$data = $response->json();
$mobileUsageData = [];
$currentPage = $params['page'];
$lastPage = 1;
$total = 0;
if ($response->successful() && isset($data['data'])) {
$mobileUsageData = array_map(function ($item) {
return [
'id' => $item['id'] ?? uniqid(),
'date' => $item['date'],
'activeUsers' => $item['active_users'],
'inactiveUsers' => $item['inactive_users'],
'lockedUsers' => $item['locked_users'],
];
}, $data['data']);
$currentPage = $data['meta']['current_page'] ?? 1;
$lastPage = $data['meta']['last_page'] ?? 1;
$total = $data['meta']['total'] ?? count($mobileUsageData);
}
return view('pages.reports.mobile-usage-report', compact('mobileUsageData', 'currentPage', 'lastPage', 'total'));
}
public function registration(Request $request)
{
$params = [
'page' => $request->input('page', 1),
'page_size' => 5,
'date_start' => $request->input('date_start'),
'date_end' => $request->input('date_end'),
'sorting' => $request->input('sort', 'date|desc'),
];
$response = Http::get($this->apiBaseUrl . 'cms/reportRegistration', $params);
$data = $response->json();
$registrationData = [];
$currentPage = $params['page'];
$lastPage = 1;
$total = 0;
if ($response->successful() && isset($data['data'])) {
$registrationData = array_map(function ($item) {
return [
'id' => $item['id'] ?? uniqid(),
'date' => $item['date'],
'activatedCards' => $item['activated_cards'],
'registeredMembers' => $item['registered_members'],
];
}, $data['data']);
$currentPage = $data['meta']['current_page'] ?? 1;
$lastPage = $data['meta']['last_page'] ?? 1;
$total = $data['meta']['total'] ?? count($registrationData);
}
return view('pages.reports.registration-report', compact('registrationData', 'currentPage', 'lastPage', 'total'));
}
public function stationRating(Request $request)
{
$params = [
'page' => $request->input('page', 1),
'page_size' => 5,
'date_start' => $request->input('date_start'),
'date_end' => $request->input('date_end'),
'sorting' => $request->input('sort', 'transaction_date_time|desc'),
];
$response = Http::get($this->apiBaseUrl . 'cms/reportStationRatings', $params);
$data = $response->json();
$stationRatingData = [];
$currentPage = $params['page'];
$lastPage = 1;
$total = 0;
if ($response->successful() && isset($data['data'])) {
$stationRatingData = array_map(function ($item) {
return [
'id' => $item['id'] ?? uniqid(),
'transactionDateTime' => $item['transaction_date_time'],
'cardNumber' => $item['card_number'],
'salesInvoice' => $item['sales_invoice'],
'station' => $item['station'],
'ratings' => $item['ratings'],
];
}, $data['data']);
$currentPage = $data['meta']['current_page'] ?? 1;
$lastPage = $data['meta']['last_page'] ?? 1;
$total = $data['meta']['total'] ?? count($stationRatingData);
}
return view('pages.reports.station-rating-report', compact('stationRatingData', 'currentPage', 'lastPage', 'total'));
}
public function topUp(Request $request)
{
$params = [
'page' => $request->input('page', 1),
'page_size' => 5,
'date_start' => $request->input('date_start'),
'date_end' => $request->input('date_end'),
'sorting' => $request->input('sort', 'transaction_date_time|desc'),
];
$response = Http::get($this->apiBaseUrl . 'cms/reportTopUp', $params);
$data = $response->json();
$topUpData = [];
$currentPage = $params['page'];
$lastPage = 1;
$total = 0;
if ($response->successful() && isset($data['data'])) {
$topUpData = array_map(function ($item) {
return [
'id' => $item['id'] ?? uniqid(),
'transactionDateTime' => $item['transaction_date_time'],
'cardNumber' => $item['card_number'],
'topUpAmount' => $item['top_up_amount'],
];
}, $data['data']);
$currentPage = $data['meta']['current_page'] ?? 1;
$lastPage = $data['meta']['last_page'] ?? 1;
$total = $data['meta']['total'] ?? count($topUpData);
}
return view('pages.reports.top-up-usage-report', compact('topUpData', 'currentPage', 'lastPage', 'total'));
}
}

331
resources/views/components/reports-component.blade.php Normal file
View File

@ -0,0 +1,331 @@
@props([
'pageTitle' => '',
'data' => [],
'columns' => [],
'allFields' => [],
'actions' => [],
'showAddButton' => false,
'addButtonUrl' => '#',
'showCheckboxes' => false,
'showBatchDelete' => false,
'showSearch' => true,
'currentPage' => 1,
'lastPage' => 1,
'total' => 0,
])
<div class="card-body">
<!-- Filters -->
<div class="d-flex justify-content-between mb-3 flex-wrap gap-2">
<div class="d-flex align-items-center gap-2">
@if ($showSearch)
<div class="d-flex flex-column">
<label for="searchInput" class="form-label mb-1">Search</label>
<div class="input-group input-group-sm">
<span class="input-group-text bg-light border-end-0">
<i class="fa-solid fa-magnifying-glass text-muted"></i>
</span>
<input type="text" class="form-control border-start-0" placeholder="Search..." id="searchInput" data-search-param="_search">
</div>
</div>
@endif
{{-- <div class="d-flex flex-column">
<label for="startDate" class="form-label mb-1">Start Date</label>
<div class="input-group">
<span class="input-group-text"><i class="fas fa-calendar-alt"></i></span>
<input type="date" class="form-control" id="startDate">
</div>
</div> --}}
{{-- <div class="d-flex flex-column">
<label for="endDate" class="form-label mb-1">End Date</label>
<div class="input-group">
<input type="date" class="form-control" id="endDate">
</div>
</div> --}}
</div>
<div class="d-flex gap-2 align-items-end">
<button class="btn btn-outline-secondary btn-sm" id="clearFilters">
<i class="fa-solid fa-filter-circle-xmark me-1"></i> Clear Filters
</button>
</div>
</div>
<!-- Table -->
<div class="table-container">
<table class="table table-hover align-middle">
<thead class="table-light">
<tr>
@foreach ($columns as $index => $column)
<th class="{{ $column['sortable'] ? 'sortable' : '' }}" data-column="{{ $index }}" data-key="{{ $column['key'] }}">
{{ $column['name'] }}
@if ($column['sortable'])
<i class="fa-solid fa-sort"></i>
@endif
</th>
@endforeach
</tr>
</thead>
<tbody id="tableBody"></tbody>
</table>
</div>
<!-- Pagination -->
<div class="d-flex justify-content-end mt-4">
<nav aria-label="Page navigation">
<ul class="pagination pagination-sm" id="pagination"></ul>
</nav>
</div>
</div>
<style>
.card, .table, .btn, .form-control, .input-group-text {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
font-weight: 400;
line-height: 1.5;
}
.table-container {
overflow-x: auto;
}
.table th, .table td {
white-space: nowrap;
}
.sortable {
cursor: pointer;
position: relative;
}
.sortable:hover {
background-color: #f8f9fa;
}
.sortable i {
margin-left: 5px;
color: #6c757d;
}
.btn-export-csv {
background-color: #ff6200;
color: white;
border: none;
}
.btn-export-csv:hover {
background-color: #e65a00;
}
.input-group-text {
background-color: #f8f9fa;
}
</style>
<script>
const tableConfig = {
data: @json($data),
columns: @json($columns),
pageTitle: @json($pageTitle),
csrfToken: '{{ csrf_token() }}',
currentPage: {{ $currentPage }},
lastPage: {{ $lastPage }},
total: {{ $total }},
apiEndpoint: '{{ route( Str::kebab(str_replace(" ", "-", strtolower($pageTitle)))) }}',
exportEndpoint: '{{ route( Str::kebab(str_replace(" ", "-", strtolower($pageTitle)))) }}Export',
};
const rowsPerPage = 5;
let currentPage = tableConfig.currentPage;
let filteredRows = [...tableConfig.data];
let sortColumn = '';
let sortDirection = '';
function formatDateForDisplay(dateStr, isDateTime = false) {
if (!dateStr) return '';
const date = new Date(dateStr);
if (isDateTime) {
return date.toLocaleString('en-US', {
year: 'numeric',
month: 'short',
day: '2-digit',
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
});
}
return date.toLocaleDateString('en-US', {
year: 'numeric',
month: 'short',
day: '2-digit',
}).replace(/,/, '');
}
function renderTable() {
const tableBody = document.getElementById('tableBody');
if (!tableBody) return;
tableBody.innerHTML = '';
filteredRows.forEach(row => {
const tr = document.createElement('tr');
let rowHtml = '';
tableConfig.columns.forEach(col => {
let value = row[col.key] || '';
if (col.format === 'date' || col.key.includes('DateTime')) {
value = formatDateForDisplay(value, col.key.includes('DateTime'));
}
rowHtml += `<td>${value}</td>`;
});
tr.innerHTML = rowHtml;
tableBody.appendChild(tr);
});
updateNoDataMessage();
}
function renderPagination() {
const pagination = document.getElementById('pagination');
if (!pagination) return;
pagination.innerHTML = '';
const routeBase = tableConfig.pageTitle.toLowerCase().replace(/\s+/g, '-');
const searchTerm = document.getElementById('searchInput')?.value || '';
const startDate = document.getElementById('startDate')?.value || '';
const endDate = document.getElementById('endDate')?.value || '';
const prevLi = document.createElement('li');
prevLi.className = `page-item ${currentPage === 1 ? 'disabled' : ''}`;
prevLi.innerHTML = `<a class="page-link" href="#" aria-label="Previous"><span aria-hidden="true">«</span></a>`;
prevLi.addEventListener('click', (e) => {
e.preventDefault();
if (currentPage > 1) {
updateUrl(currentPage - 1, searchTerm, startDate, endDate);
}
});
pagination.appendChild(prevLi);
for (let i = 1; i <= tableConfig.lastPage; i++) {
const li = document.createElement('li');
li.className = `page-item ${currentPage === i ? 'active' : ''}`;
li.innerHTML = `<a class="page-link" href="#">${i}</a>`;
li.addEventListener('click', (e) => {
e.preventDefault();
updateUrl(i, searchTerm, startDate, endDate);
});
pagination.appendChild(li);
}
const nextLi = document.createElement('li');
nextLi.className = `page-item ${currentPage === tableConfig.lastPage ? 'disabled' : ''}`;
nextLi.innerHTML = `<a class="page-link" href="#" aria-label="Next"><span aria-hidden="true">»</span></a>`;
nextLi.addEventListener('click', (e) => {
e.preventDefault();
if (currentPage < tableConfig.lastPage) {
updateUrl(currentPage + 1, searchTerm, startDate, endDate);
}
});
pagination.appendChild(nextLi);
}
function updateUrl(page, search, startDate, endDate) {
const url = new URL(window.location);
url.searchParams.set('page', page);
if (search) url.searchParams.set('_search', search);
else url.searchParams.delete('_search');
if (startDate) url.searchParams.set('date_start', startDate);
else url.searchParams.delete('date_start');
if (endDate) url.searchParams.set('date_end', endDate);
else url.searchParams.delete('date_end');
if (sortColumn && sortDirection) {
url.searchParams.set('sort', `${sortColumn}|${sortDirection}`);
} else {
url.searchParams.delete('sort');
}
window.location.href = url.toString();
}
function updateNoDataMessage() {
const noDataMessage = document.getElementById('no-data-message');
if (noDataMessage) {
noDataMessage.style.display = filteredRows.length === 0 ? 'block' : 'none';
}
}
function attachEventListeners() {
const searchInput = document.getElementById('searchInput');
if (searchInput) {
searchInput.addEventListener('input', function() {
const url = new URL(window.location);
const searchTerm = this.value;
if (searchTerm) {
url.searchParams.set('_search', searchTerm);
} else {
url.searchParams.delete('_search');
}
url.searchParams.set('page', 1);
window.location.href = url.toString();
});
}
document.querySelectorAll('.sortable').forEach(header => {
header.addEventListener('click', function() {
const columnKey = this.getAttribute('data-key');
sortDirection = sortColumn === columnKey && sortDirection === 'asc' ? 'desc' : 'asc';
sortColumn = columnKey;
document.querySelectorAll('.sortable i').forEach(icon => {
icon.classList.remove('fa-sort-up', 'fa-sort-down');
icon.classList.add('fa-sort');
});
const icon = this.querySelector('i');
if (icon) {
icon.classList.remove('fa-sort');
icon.classList.add(sortDirection === 'asc' ? 'fa-sort-up' : 'fa-sort-down');
}
updateUrl(1, document.getElementById('searchInput')?.value || '',
document.getElementById('startDate')?.value || '',
document.getElementById('endDate')?.value || '');
});
});
const startDateInput = document.getElementById('startDate');
const endDateInput = document.getElementById('endDate');
if (startDateInput && endDateInput) {
startDateInput.addEventListener('change', () => updateUrl(1, document.getElementById('searchInput')?.value || '', startDateInput.value, endDateInput.value));
endDateInput.addEventListener('change', () => updateUrl(1, document.getElementById('searchInput')?.value || '', startDateInput.value, endDateInput.value));
}
const clearFilters = document.getElementById('clearFilters');
if (clearFilters) {
clearFilters.addEventListener('click', function() {
if (searchInput) searchInput.value = '';
if (startDateInput) startDateInput.value = '';
if (endDateInput) endDateInput.value = '';
sortColumn = '';
sortDirection = '';
document.querySelectorAll('.sortable i').forEach(icon => {
icon.classList.remove('fa-sort-up', 'fa-sort-down');
icon.classList.add('fa-sort');
});
updateUrl(1, '', '', '');
});
}
const exportCsvBtn = document.getElementById('exportCsv');
if (exportCsvBtn) {
exportCsvBtn.addEventListener('click', () => {
const url = new URL(tableConfig.exportEndpoint, window.location.origin);
const searchTerm = document.getElementById('searchInput')?.value || '';
const startDate = document.getElementById('startDate')?.value || '';
const endDate = document.getElementById('endDate')?.value || '';
if (searchTerm) url.searchParams.set('_search', searchTerm);
if (startDate) url.searchParams.set('date_start', startDate);
if (endDate) url.searchParams.set('date_end', endDate);
if (sortColumn && sortDirection) {
url.searchParams.set('sort', `${sortColumn}|${sortDirection}`);
}
window.location.href = url.toString();
});
}
}
renderTable();
renderPagination();
attachEventListeners();
</script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

30
resources/views/pages/reports/mobile-usage-report.blade.php
View File

@ -3,18 +3,6 @@
@section('page_title', 'Mobile Usage Report')
@section('content')
@php
$mobileUsageData = [
['id' => 1, 'date' => '2025-04-16', 'activeUsers' => 100, 'inactiveUsers' => 20, 'lockedUsers' => 5],
['id' => 2, 'date' => '2025-04-15', 'activeUsers' => 95, 'inactiveUsers' => 22, 'lockedUsers' => 4],
['id' => 3, 'date' => '2025-04-14', 'activeUsers' => 98, 'inactiveUsers' => 18, 'lockedUsers' => 6],
['id' => 4, 'date' => '2025-04-13', 'activeUsers' => 102, 'inactiveUsers' => 19, 'lockedUsers' => 3],
['id' => 5, 'date' => '2025-04-12', 'activeUsers' => 99, 'inactiveUsers' => 21, 'lockedUsers' => 4],
['id' => 6, 'date' => '2025-04-11', 'activeUsers' => 101, 'inactiveUsers' => 20, 'lockedUsers' => 5],
['id' => 7, 'date' => '2025-04-10', 'activeUsers' => 100, 'inactiveUsers' => 19, 'lockedUsers' => 4],
];
@endphp
<div class="mb-3">
<h5 class="mb-0 fw-bold text-dark" style="font-size: 1.25rem;">Mobile Usage Report</h5>
</div>
@ -43,8 +31,9 @@
</div>
<!-- Table -->
@include('components.table-component', [
'data' => $mobileUsageData,
@include('components.reports-component', [
'pageTitle' => 'Mobile Usage Report',
'data' => $mobileUsageData ?? [],
'columns' => [
['name' => 'Date', 'key' => 'date', 'sortable' => true, 'format' => 'date'],
['name' => 'Active Registered Users', 'key' => 'activeUsers', 'sortable' => true],
@ -56,9 +45,10 @@
'showAddButton' => false,
'showCheckboxes' => false,
'showBatchDelete' => false,
'showEditModal' => false,
'showViewModal' => false,
'showSearch' => false
'showSearch' => false,
'currentPage' => $currentPage ?? 1,
'lastPage' => $lastPage ?? 1,
'total' => $total ?? 0,
])
</div>
</div>
@ -93,12 +83,6 @@
<script>
let originalData = [...tableConfig.data];
const storedData = JSON.parse(sessionStorage.getItem('mobileUsageReport') || '[]');
if (storedData.length > 0) {
tableConfig.data = [...tableConfig.data, ...storedData];
originalData = [...tableConfig.data];
}
const startDateInput = document.getElementById('startDate');
const endDateInput = document.getElementById('endDate');
const exportCsvBtn = document.getElementById('exportCsv');

99
resources/views/pages/reports/registration-report.blade.php
View File

@ -3,58 +3,13 @@
@section('page_title', 'Registration Report')
@section('content')
@php
$registrationData = [
[
'id' => 1,
'date' => '2025-04-16',
'activatedCards' => 2,
'registeredMembers' => 2
],
[
'id' => 2,
'date' => '2025-04-14',
'activatedCards' => 1,
'registeredMembers' => 1
],
[
'id' => 3,
'date' => '2025-03-20',
'activatedCards' => 1,
'registeredMembers' => 1
],
[
'id' => 4,
'date' => '2025-03-10',
'activatedCards' => 1,
'registeredMembers' => 1
],
[
'id' => 5,
'date' => '2025-03-01',
'activatedCards' => 1,
'registeredMembers' => 1
],[
'id' => 6,
'date' => '2025-03-01',
'activatedCards' => 1,
'registeredMembers' => 1
],[
'id' => 7,
'date' => '2025-03-01',
'activatedCards' => 1,
'registeredMembers' => 1
],
];
@endphp
<div class="mb-3">
<h5 class="mb-0 fw-bold text-dark" style="font-size: 1.25rem;">Registration Report</h5>
</div>
<div class="mb-3">
<h5 class="mb-0 fw-bold text-dark" style="font-size: 1.25rem;">Registration Report</h5>
</div>
<div class="row justify-content-center">
<div class="card-body p-3">
<!-- Filters -->
<div class="d-flex justify-content-between mb-3 flex-wrap gap-2">
<div class="d-flex align-items-center gap-2">
<div class="d-flex flex-column">
<label for="startDate" class="form-label mb-1">Start Date</label>
@ -66,23 +21,20 @@
<div class="d-flex flex-column">
<label for="endDate" class="form-label mb-1">End Date</label>
<div class="input-group">
<input type="date" class="form-control" id="endDate">
</div>
</div>
</div>
<div class="d-flex gap-2">
<button type="button" class="btn btn-export-csv" id="exportCsv" style="margin:20px">Export CSV</button>
</div>
</div>
@include('components.table-component', [
'data' => $registrationData,
<!-- Table -->
@include('components.reports-component', [
'pageTitle' => 'Registration Report',
'data' => $registrationData ?? [],
'columns' => [
['name' => 'Date', 'key' => 'date', 'sortable' => true, 'format' => 'date'],
['name' => 'No. of Activated Cards', 'key' => 'activatedCards', 'sortable' => true],
['name' => 'No. of Registered Members', 'key' => 'registeredMembers', 'sortable' => true]
@ -92,9 +44,10 @@
'showAddButton' => false,
'showCheckboxes' => false,
'showBatchDelete' => false,
'showEditModal' => false,
'showViewModal' => false,
'showSearch' => false
'showSearch' => false,
'currentPage' => $currentPage ?? 1,
'lastPage' => $lastPage ?? 1,
'total' => $total ?? 0,
])
</div>
</div>
@ -118,7 +71,6 @@
background-color: #ff6200;
color: white;
border: none;
}
.btn-export-csv:hover {
background-color: #e65a00;
@ -130,23 +82,10 @@
<script>
let originalData = [...tableConfig.data];
const storedData = JSON.parse(sessionStorage.getItem('registrationReport') || '[]');
if (storedData.length > 0) {
tableConfig.data = [...tableConfig.data, ...storedData];
originalData = [...tableConfig.data];
}
const startDateInput = document.getElementById('startDate');
const endDateInput = document.getElementById('endDate');
const clearFiltersBtn = document.getElementById('clearFilters');
const exportCsvBtn = document.getElementById('exportCsv');
function formatDateForDisplay(dateStr) {
const date = new Date(dateStr);
const options = { day: '2-digit', month: 'short', year: 'numeric' };
return date.toLocaleDateString('en-US', options).replace(/,/, '');
}
function filterData() {
const startDate = startDateInput.value ? new Date(startDateInput.value) : null;
const endDate = endDateInput.value ? new Date(endDateInput.value) : null;
@ -170,20 +109,11 @@
startDateInput.addEventListener('change', filterData);
endDateInput.addEventListener('change', filterData);
clearFiltersBtn.addEventListener('click', () => {
startDateInput.value = '';
endDateInput.value = '';
tableConfig.data = [...originalData];
currentPage = 1;
renderTable();
renderPagination();
});
exportCsvBtn.addEventListener('click', () => {
const headers = tableConfig.columns.map(col => col.name).join(',');
const rows = tableConfig.data.map(item => {
return [
formatDateForDisplay(item.date),
item.date,
item.activatedCards,
item.registeredMembers
].join(',');
@ -199,10 +129,7 @@
document.body.removeChild(link);
});
// Initial render with formatted dates
tableConfig.data.forEach(item => {
item.displayDate = formatDateForDisplay(item.date);
});
// Initial render
renderTable();
renderPagination();
</script>

125
resources/views/pages/reports/station-rating-report.blade.php
View File

@ -3,18 +3,6 @@
@section('page_title', 'Station Rating Report')
@section('content')
@php
$stationRatingData = [
['id' => 1, 'transactionDateTime' => '2025-04-16 10:30:00', 'cardNumber' => '4111111111111111', 'salesInvoice' => 'INV001', 'station' => 'Station A', 'ratings' => 4.5],
['id' => 2, 'transactionDateTime' => '2025-04-15 14:45:00', 'cardNumber' => '4012888888881881', 'salesInvoice' => 'INV002', 'station' => 'Station B', 'ratings' => 3.8],
['id' => 3, 'transactionDateTime' => '2025-04-14 09:15:00', 'cardNumber' => '5555555555554444', 'salesInvoice' => 'INV003', 'station' => 'Station C', 'ratings' => 4.2],
['id' => 4, 'transactionDateTime' => '2025-04-13 16:20:00', 'cardNumber' => '378282246310005', 'salesInvoice' => 'INV004', 'station' => 'Station D', 'ratings' => 4.0],
['id' => 5, 'transactionDateTime' => '2025-04-12 11:00:00', 'cardNumber' => '6011111111111117', 'salesInvoice' => 'INV005', 'station' => 'Station E', 'ratings' => 3.9],
['id' => 6, 'transactionDateTime' => '2025-04-11 08:50:00', 'cardNumber' => '3530111333300000', 'salesInvoice' => 'INV006', 'station' => 'Station F', 'ratings' => 4.3],
['id' => 7, 'transactionDateTime' => '2025-04-10 12:10:00', 'cardNumber' => '4917610000000000', 'salesInvoice' => 'INV007', 'station' => 'Station G', 'ratings' => 4.1],
];
@endphp
<div class="mb-3">
<h5 class="mb-0 fw-bold text-dark" style="font-size: 1.25rem;">Station Rating Report</h5>
</div>
@ -43,8 +31,9 @@
</div>
<!-- Table -->
@include('components.table-component', [
'data' => $stationRatingData,
@include('components.reports-component', [
'pageTitle' => 'Station Rating Report',
'data' => $stationRatingData ?? [],
'columns' => [
['name' => 'Transaction Date and Time', 'key' => 'transactionDateTime', 'sortable' => true],
['name' => 'Card Number', 'key' => 'cardNumber', 'sortable' => true],
@ -57,9 +46,10 @@
'showAddButton' => false,
'showCheckboxes' => false,
'showBatchDelete' => false,
'showEditModal' => false,
'showViewModal' => false,
'showSearch' => false
'showSearch' => false,
'currentPage' => $currentPage ?? 1,
'lastPage' => $lastPage ?? 1,
'total' => $total ?? 0,
])
</div>
</div>
@ -92,64 +82,59 @@
}
</style>
<script>
let originalData = [...tableConfig.data];
const storedData = JSON.parse(sessionStorage.getItem('stationRatingReport') || '[]');
if (storedData.length > 0) {
tableConfig.data = [...tableConfig.data, ...storedData];
originalData = [...tableConfig.data];
}
<script>
let originalData = [...tableConfig.data];
const startDateInput = document.getElementById('startDate');
const endDateInput = document.getElementById('endDate');
const exportCsvBtn = document.getElementById('exportCsv');
const startDateInput = document.getElementById('startDate');
const endDateInput = document.getElementById('endDate');
const exportCsvBtn = document.getElementById('exportCsv');
function filterData() {
const startDate = startDateInput.value ? new Date(startDateInput.value) : null;
const endDate = endDateInput.value ? new Date(endDateInput.value) : null;
function filterData() {
const startDate = startDateInput.value ? new Date(startDateInput.value) : null;
const endDate = endDateInput.value ? new Date(endDateInput.value) : null;
tableConfig.data = originalData.filter(item => {
const itemDate = new Date(item.transactionDateTime);
if (startDate && itemDate < startDate) return false;
if (endDate) {
const endDateAdjusted = new Date(endDate);
endDateAdjusted.setHours(23, 59, 59, 999);
if (itemDate > endDateAdjusted) return false;
}
return true;
});
tableConfig.data = originalData.filter(item => {
const itemDate = new Date(item.date);
if (startDate && itemDate < startDate) return false;
if (endDate) {
const endDateAdjusted = new Date(endDate);
endDateAdjusted.setHours(23, 59, 59, 999);
if (itemDate > endDateAdjusted) return false;
}
return true;
currentPage = 1;
renderTable();
renderPagination();
}
startDateInput.addEventListener('change', filterData);
endDateInput.addEventListener('change', filterData);
exportCsvBtn.addEventListener('click', () => {
const headers = tableConfig.columns.map(col => col.name).join(',');
const rows = tableConfig.data.map(item => {
return [
item.transactionDateTime,
item.cardNumber,
item.salesInvoice,
item.station,
item.ratings
].join(',');
});
const csvContent = [headers, ...rows].join('\n');
const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
const link = document.createElement('a');
const url = URL.createObjectURL(blob);
link.setAttribute('href', url);
link.setAttribute('download', 'station-rating-report.csv');
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
});
currentPage = 1;
// Initial render
renderTable();
renderPagination();
}
startDateInput.addEventListener('change', filterData);
endDateInput.addEventListener('change', filterData);
exportCsvBtn.addEventListener('click', () => {
const headers = tableConfig.columns.map(col => col.name).join(',');
const rows = tableConfig.data.map(item => {
return [
item.date,
item.activeUsers,
item.inactiveUsers,
item.lockedUsers
].join(',');
});
const csvContent = [headers, ...rows].join('\n');
const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
const link = document.createElement('a');
const url = URL.createObjectURL(blob);
link.setAttribute('href', url);
link.setAttribute('download', 'station-rating-report.csv');
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
});
// Initial render
renderTable();
renderPagination();
</script>
</script>
@endsection

67
resources/views/pages/reports/top-up-usage-report.blade.php
View File

@ -3,53 +3,6 @@
@section('page_title', 'Top-Up Usage Report')
@section('content')
@php
$topUpData = [
[
'id' => 1,
'transactionDateTime' => '2025-04-16 10:30:00',
'cardNumber' => '4111111111111111',
'topUpAmount' => '50.00'
],
[
'id' => 2,
'transactionDateTime' => '2025-04-15 14:45:00',
'cardNumber' => '4012888888881881',
'topUpAmount' => '20.00'
],
[
'id' => 3,
'transactionDateTime' => '2025-04-14 09:15:00',
'cardNumber' => '5555555555554444',
'topUpAmount' => '30.00'
],
[
'id' => 4,
'transactionDateTime' => '2025-04-13 16:20:00',
'cardNumber' => '378282246310005',
'topUpAmount' => '10.00'
],
[
'id' => 5,
'transactionDateTime' => '2025-04-12 11:00:00',
'cardNumber' => '6011111111111117',
'topUpAmount' => '40.00'
],
[
'id' => 6,
'transactionDateTime' => '2025-04-11 08:50:00',
'cardNumber' => '3530111333300000',
'topUpAmount' => '25.00'
],
[
'id' => 7,
'transactionDateTime' => '2025-04-10 12:10:00',
'cardNumber' => '4917610000000000',
'topUpAmount' => '15.00'
]
];
@endphp
<div class="mb-3">
<h5 class="mb-0 fw-bold text-dark" style="font-size: 1.25rem;">Top-Up Usage Report</h5>
</div>
@ -78,8 +31,9 @@
</div>
<!-- Table -->
@include('components.table-component', [
'data' => $topUpData,
@include('components.reports-component', [
'pageTitle' => 'Top-Up Usage Report',
'data' => $topUpData ?? [],
'columns' => [
['name' => 'Transaction Date and Time', 'key' => 'transactionDateTime', 'sortable' => true],
['name' => 'Card Number', 'key' => 'cardNumber', 'sortable' => true],
@ -90,9 +44,10 @@
'showAddButton' => false,
'showCheckboxes' => false,
'showBatchDelete' => false,
'showEditModal' => false,
'showViewModal' => false,
'showSearch' => false
'showSearch' => false,
'currentPage' => $currentPage ?? 1,
'lastPage' => $lastPage ?? 1,
'total' => $total ?? 0,
])
</div>
</div>
@ -127,12 +82,6 @@
<script>
let originalData = [...tableConfig.data];
const storedData = JSON.parse(sessionStorage.getItem('topUpUsageReport') || '[]');
if (storedData.length > 0) {
tableConfig.data = [...tableConfig.data, ...storedData];
originalData = [...tableConfig.data];
}
const startDateInput = document.getElementById('startDate');
const endDateInput = document.getElementById('endDate');
const exportCsvBtn = document.getElementById('exportCsv');
@ -142,7 +91,7 @@
const endDate = endDateInput.value ? new Date(endDateInput.value) : null;
tableConfig.data = originalData.filter(item => {
const itemDate = new Date(item.transactionDateTime.split(' ')[0]); // Extract date part
const itemDate = new Date(item.transactionDateTime);
if (startDate && itemDate < startDate) return false;
if (endDate) {
const endDateAdjusted = new Date(endDate);

30
routes/web.php
View File

@ -11,7 +11,7 @@ use App\Http\Controllers\CardMemberController;
use App\Http\Controllers\PromotionController;
use App\Http\Controllers\TermsAndPrivacyController;
use App\Http\Controllers\CardTypeController;
use App\Http\Controllers\ReportsController;
Route::get('/', function () {
@ -47,24 +47,6 @@ Route::get('/card-types', function () {
return view('pages.about us.card-types');
})->name('card-types');
Route::get('/registration-report', function () {
return view('pages.reports.registration-report');
})->name('registration-report');
Route::get('/top-up-usage-report', function () {
return view('pages.reports.top-up-usage-report');
})->name('top-up-usage-report');
Route::get('/mobile-usage-report', function () {
return view('pages.reports.mobile-usage-report');
})->name('mobile-usage-report');
Route::get('/station-rating-report', function () {
return view('pages.reports.station-rating-report');
})->name('station-rating-report');
Route::get('/system-parameters', function () {
return view('pages.system-parameters');
})->name('system-parameters');
@ -216,3 +198,13 @@ Route::get('/card-types/{uuid}/edit', [CardTypeController::class, 'edit'])->name
Route::post('/card-types/{uuid}', [CardTypeController::class, 'update'])->name('card-types.update');
Route::delete('/card-types/{uuid}', [CardTypeController::class, 'destroy'])->name('card-types.destroy');
Route::delete('/card-types/batch-delete', [CardTypeController::class, 'batchDelete'])->name('card-types.batchDelete');
//Reports
Route::get('/mobile-usage-report', [ReportsController::class, 'mobileUsage'])->name('mobile-usage-report');
Route::get('/registration-report', [ReportsController::class, 'registration'])->name('registration-report');
Route::get('/station-rating-report', [ReportsController::class, 'stationRating'])->name('station-rating-report');
Route::get('/top-up-usage-report', [ReportsController::class, 'topUp'])->name('top-up-usage-report');