added report pages
This commit is contained in:
parent
11d4f2b17c
commit
21adb9364f
|
|
@ -1,5 +1,5 @@
|
||||||
@props([
|
@props([
|
||||||
'pageTitle' => 'Table',
|
'pageTitle' => '',
|
||||||
'data' => [],
|
'data' => [],
|
||||||
'columns' => [],
|
'columns' => [],
|
||||||
'actions' => [],
|
'actions' => [],
|
||||||
|
|
@ -43,7 +43,7 @@
|
||||||
<!-- Table -->
|
<!-- Table -->
|
||||||
<div class="table-container">
|
<div class="table-container">
|
||||||
<table class="table table-hover align-middle">
|
<table class="table table-hover align-middle">
|
||||||
<thead class="table-light">
|
<thead class="table-light" >
|
||||||
<tr>
|
<tr>
|
||||||
@if ($showCheckboxes)
|
@if ($showCheckboxes)
|
||||||
<th class="text-center" style="width: 40px;">
|
<th class="text-center" style="width: 40px;">
|
||||||
|
|
@ -367,6 +367,7 @@
|
||||||
width: 100px;
|
width: 100px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<!-- JavaScript -->
|
<!-- JavaScript -->
|
||||||
|
|
|
||||||
|
|
@ -1,14 +1,154 @@
|
||||||
@extends('layouts.app')
|
@extends('layouts.app')
|
||||||
|
|
||||||
@section('page_title', 'Reports')
|
@section('page_title', 'Mobile Usage Report')
|
||||||
|
|
||||||
@section('content')
|
@section('content')
|
||||||
<div class="card" style="min-height: 500px;">
|
@php
|
||||||
<div class="card-header">
|
$mobileUsageData = [
|
||||||
<i class="fa-solid fa-chart-column" style="color:gray;"> Mobile Usage Report</i>
|
['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>
|
||||||
<div class="card-body">
|
<div class="row justify-content-center">
|
||||||
<p>This is the Mobile Usage Report page content.</p>
|
<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>
|
||||||
|
|
||||||
|
<!-- 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>
|
</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
|
@endsection
|
||||||
|
|
@ -1,14 +1,209 @@
|
||||||
@extends('layouts.app')
|
@extends('layouts.app')
|
||||||
|
|
||||||
@section('page_title', 'Reports')
|
@section('page_title', 'Registration Report')
|
||||||
|
|
||||||
@section('content')
|
@section('content')
|
||||||
<div class="card" style="min-height: 500px;">
|
@php
|
||||||
<div class="card-header">
|
$registrationData = [
|
||||||
<i class="fa-solid fa-chart-column" style="color:gray;"> Registration Report</i>
|
[
|
||||||
</div>
|
'id' => 1,
|
||||||
<div class="card-body">
|
'date' => '2025-04-16',
|
||||||
<p>This is the Registration Report page content.</p>
|
'activatedCards' => 2,
|
||||||
</div>
|
'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>
|
||||||
|
<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
|
@endsection
|
||||||
|
|
@ -1,14 +1,155 @@
|
||||||
@extends('layouts.app')
|
@extends('layouts.app')
|
||||||
|
|
||||||
@section('page_title', 'Reports')
|
@section('page_title', 'Station Rating Report')
|
||||||
|
|
||||||
@section('content')
|
@section('content')
|
||||||
<div class="card" style="min-height: 500px;">
|
@php
|
||||||
<div class="card-header">
|
$stationRatingData = [
|
||||||
<i class="fa-solid fa-chart-column" style="color:gray;"> Station Rating Report</i>
|
['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>
|
||||||
<div class="card-body">
|
<div class="row justify-content-center">
|
||||||
<p>This is the Station Rating Report page content.</p>
|
<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>
|
||||||
|
|
||||||
|
<!-- 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>
|
</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
|
@endsection
|
||||||
|
|
@ -1,14 +1,187 @@
|
||||||
@extends('layouts.app')
|
@extends('layouts.app')
|
||||||
|
|
||||||
@section('page_title', 'Reports')
|
@section('page_title', 'Top-Up Usage Report')
|
||||||
|
|
||||||
@section('content')
|
@section('content')
|
||||||
<div class="card" style="min-height: 500px;">
|
@php
|
||||||
<div class="card-header">
|
$topUpData = [
|
||||||
<i class="fa-solid fa-chart-column" style="color:gray;"> Top-Up Usage Report</i>
|
[
|
||||||
|
'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>
|
||||||
<div class="card-body">
|
<div class="row justify-content-center">
|
||||||
<p>This is the Top-Up Usage Report page content.</p>
|
<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>
|
||||||
|
|
||||||
|
<!-- 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>
|
</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
|
@endsection
|
||||||
Loading…
Reference in New Issue