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

added report pages

This commit is contained in:
armiejean 2025-04-16 18:26:39 +08:00
parent 11d4f2b17c
commit 21adb9364f
5 changed files with 685 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
resources/views/components/table-component.blade.php
View File

@ -1,5 +1,5 @@
@props([
'pageTitle' => 'Table',
'pageTitle' => '',
'data' => [],
'columns' => [],
'actions' => [],
@ -43,7 +43,7 @@
<!-- Table -->
<div class="table-container">
<table class="table table-hover align-middle">
<thead class="table-light">
<thead class="table-light" >
<tr>
@if ($showCheckboxes)
<th class="text-center" style="width: 40px;">
@ -367,6 +367,7 @@
width: 100px;
}
}
</style>
<!-- JavaScript -->

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

@ -1,14 +1,154 @@
@extends('layouts.app')
@section('page_title', 'Reports')
@section('page_title', 'Mobile Usage Report')
@section('content')
<div class="card" style="min-height: 500px;">
<div class="card-header">
<i class="fa-solid fa-chart-column" style="color:gray;"> Mobile Usage Report</i>
@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>
<div class="card-body">
<p>This is the Mobile Usage Report page content.</p>
<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>
<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>
<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>
<!-- Table -->
@include('components.table-component', [
'data' => $mobileUsageData,
'columns' => [
['name' => 'Date', 'key' => 'date', 'sortable' => true, 'format' => 'date'],
['name' => 'Active Registered Users', 'key' => 'activeUsers', 'sortable' => true],
['name' => 'Inactive Registered Users', 'key' => 'inactiveUsers', 'sortable' => true],
['name' => 'Locked Registered Users', 'key' => 'lockedUsers', 'sortable' => true]
],
'allFields' => [],
'actions' => [],
'showAddButton' => false,
'showCheckboxes' => false,
'showBatchDelete' => false,
'showEditModal' => false,
'showViewModal' => false,
'showSearch' => false
])
</div>
</div>
<style>
.card {
border-radius: 5px;
border: 1px solid #dee2e6;
}
.form-control {
font-size: 0.9rem;
}
.btn-outline-secondary {
border-color: #6c757d;
color: #6c757d;
}
.btn-outline-secondary:hover {
background-color: #f8f9fa;
}
.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>
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');
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.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.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', 'mobile-usage-report.csv');
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
});
// Initial render
renderTable();
renderPagination();
</script>
@endsection

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

@ -1,14 +1,209 @@
@extends('layouts.app')
@section('page_title', 'Reports')
@section('page_title', 'Registration Report')
@section('content')
<div class="card" style="min-height: 500px;">
<div class="card-header">
<i class="fa-solid fa-chart-column" style="color:gray;"> Registration Report</i>
</div>
<div class="card-body">
<p>This is the Registration Report page content.</p>
</div>
@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="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>
<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">
<button type="button" class="btn btn-export-csv" id="exportCsv" style="margin:20px">Export CSV</button>
</div>
</div>
@include('components.table-component', [
'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]
],
'allFields' => [],
'actions' => [],
'showAddButton' => false,
'showCheckboxes' => false,
'showBatchDelete' => false,
'showEditModal' => false,
'showViewModal' => false,
'showSearch' => false
])
</div>
</div>
<style>
.card {
border-radius: 5px;
border: 1px solid #dee2e6;
}
.form-control {
font-size: 0.9rem;
}
.btn-outline-secondary {
border-color: #6c757d;
color: #6c757d;
}
.btn-outline-secondary:hover {
background-color: #f8f9fa;
}
.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>
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;
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);
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.activatedCards,
item.registeredMembers
].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', 'registration-report.csv');
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
});
// Initial render with formatted dates
tableConfig.data.forEach(item => {
item.displayDate = formatDateForDisplay(item.date);
});
renderTable();
renderPagination();
</script>
@endsection

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

@ -1,14 +1,155 @@
@extends('layouts.app')
@section('page_title', 'Reports')
@section('page_title', 'Station Rating Report')
@section('content')
<div class="card" style="min-height: 500px;">
<div class="card-header">
<i class="fa-solid fa-chart-column" style="color:gray;"> Station Rating Report</i>
@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>
<div class="card-body">
<p>This is the Station Rating Report page content.</p>
<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>
<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>
<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>
<!-- Table -->
@include('components.table-component', [
'data' => $stationRatingData,
'columns' => [
['name' => 'Transaction Date and Time', 'key' => 'transactionDateTime', 'sortable' => true],
['name' => 'Card Number', 'key' => 'cardNumber', 'sortable' => true],
['name' => 'Sales Invoice', 'key' => 'salesInvoice', 'sortable' => true],
['name' => 'Station', 'key' => 'station', 'sortable' => true],
['name' => 'Ratings', 'key' => 'ratings', 'sortable' => true]
],
'allFields' => [],
'actions' => [],
'showAddButton' => false,
'showCheckboxes' => false,
'showBatchDelete' => false,
'showEditModal' => false,
'showViewModal' => false,
'showSearch' => false
])
</div>
</div>
<style>
.card {
border-radius: 5px;
border: 1px solid #dee2e6;
}
.form-control {
font-size: 0.9rem;
}
.btn-outline-secondary {
border-color: #6c757d;
color: #6c757d;
}
.btn-outline-secondary:hover {
background-color: #f8f9fa;
}
.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>
let originalData = [...tableConfig.data];
const storedData = JSON.parse(sessionStorage.getItem('stationRatingReport') || '[]');
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');
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.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.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>
@endsection

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

@ -1,14 +1,187 @@
@extends('layouts.app')
@section('page_title', 'Reports')
@section('page_title', 'Top-Up Usage Report')
@section('content')
<div class="card" style="min-height: 500px;">
<div class="card-header">
<i class="fa-solid fa-chart-column" style="color:gray;"> Top-Up Usage Report</i>
@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>
<div class="card-body">
<p>This is the Top-Up Usage Report page content.</p>
<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>
<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>
<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>
<!-- Table -->
@include('components.table-component', [
'data' => $topUpData,
'columns' => [
['name' => 'Transaction Date and Time', 'key' => 'transactionDateTime', 'sortable' => true],
['name' => 'Card Number', 'key' => 'cardNumber', 'sortable' => true],
['name' => 'Top-Up Amount', 'key' => 'topUpAmount', 'sortable' => true]
],
'allFields' => [],
'actions' => [],
'showAddButton' => false,
'showCheckboxes' => false,
'showBatchDelete' => false,
'showEditModal' => false,
'showViewModal' => false,
'showSearch' => false
])
</div>
</div>
<style>
.card {
border-radius: 5px;
border: 1px solid #dee2e6;
}
.form-control {
font-size: 0.9rem;
}
.btn-outline-secondary {
border-color: #6c757d;
color: #6c757d;
}
.btn-outline-secondary:hover {
background-color: #f8f9fa;
}
.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>
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');
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.split(' ')[0]); // Extract date part
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.topUpAmount
].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', 'top-up-usage-report.csv');
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
});
// Initial render
renderTable();
renderPagination();
</script>
@endsection