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

station locator: station page

This commit is contained in:
armiejean 2025-05-19 18:03:37 +08:00
parent b350d6ad4a
commit de06c08832
9 changed files with 477 additions and 533 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

97
app/Http/Controllers/ReportsController.php
View File

@ -59,7 +59,7 @@ class ReportsController extends Controller
}
if ($isDownload) {
return $response; // Return raw response for file download
return $response;
}
return $response->json();
@ -77,6 +77,7 @@ class ReportsController extends Controller
return null;
}
}
public function mobileUsage(Request $request)
{
$params = [
@ -91,7 +92,7 @@ class ReportsController extends Controller
$data = $this->makeApiRequest('cms/reportMobileUsage', $params);
if (is_a($data, '\Illuminate\Http\RedirectResponse')) {
return $data; // Redirect to login if unauthorized
return $data;
}
$mobileUsageData = [];
@ -124,6 +125,33 @@ class ReportsController extends Controller
return view('pages.reports.mobile-usage-report', compact('mobileUsageData', 'currentPage', 'lastPage', 'total', 'errorMessage'));
}
public function exportMobileUsage(Request $request)
{
$params = [
'date_start' => $request->input('date_start'),
'date_end' => $request->input('date_end'),
'_search' => $request->input('_search'),
'sorting' => $request->input('sort', 'date|desc'),
];
$response = $this->makeApiRequest('cms/reportMobileUsageExport', $params, true);
if (is_a($response, '\Illuminate\Http\RedirectResponse')) {
return $response;
}
if (!$response) {
Log::warning("Failed to export mobile usage data", ['params' => $params]);
return redirect()->back()->with('error', 'Failed to export CSV.');
}
$filename = "reports_mobile_usage" . date("mdY") . ".csv";
return response($response->body(), 200)
->header('Content-Type', 'text/csv')
->header('Content-Disposition', "attachment; filename=\"$filename\"");
}
public function registration(Request $request)
{
$params = [
@ -170,6 +198,33 @@ class ReportsController extends Controller
return view('pages.reports.registration-report', compact('registrationData', 'currentPage', 'lastPage', 'total', 'errorMessage'));
}
public function exportRegistration(Request $request)
{
$params = [
'date_start' => $request->input('date_start'),
'date_end' => $request->input('date_end'),
'_search' => $request->input('_search'),
'sorting' => $request->input('sort', 'date|desc'),
];
$response = $this->makeApiRequest('cms/reportRegistrationExport', $params, true);
if (is_a($response, '\Illuminate\Http\RedirectResponse')) {
return $response;
}
if (!$response) {
Log::warning("Failed to export registration data", ['params' => $params]);
return redirect()->back()->with('error', 'Failed to export CSV.');
}
$filename = "registration" . date("mdY") . ".csv";
return response($response->body(), 200)
->header('Content-Type', 'text/csv')
->header('Content-Disposition', "attachment; filename=\"$filename\"");
}
public function stationRating(Request $request)
{
$params = [
@ -217,6 +272,34 @@ class ReportsController extends Controller
return view('pages.reports.station-rating-report', compact('stationRatingData', 'currentPage', 'lastPage', 'total', 'errorMessage'));
}
public function exportStationRating(Request $request)
{
$params = [
'date_start' => $request->input('date_start'),
'date_end' => $request->input('date_end'),
'_search' => $request->input('_search'),
'sorting' => $request->input('sort', 'date|desc'),
];
$response = $this->makeApiRequest('cms/reportStationRatingsExport', $params, true);
if (is_a($response, '\Illuminate\Http\RedirectResponse')) {
return $response;
}
if (!$response) {
Log::warning("Failed to export station rating data", ['params' => $params]);
return redirect()->back()->with('error', 'Failed to export CSV.');
}
$filename = "reports_station_rating" . date("mdY") . ".csv";
return response($response->body(), 200)
->header('Content-Type', 'text/csv')
->header('Content-Disposition', "attachment; filename=\"$filename\"");
}
public function topUp(Request $request)
{
$params = [
@ -263,27 +346,27 @@ class ReportsController extends Controller
return view('pages.reports.top-up-usage-report', compact('topUpData', 'currentPage', 'lastPage', 'total', 'errorMessage'));
}
public function exportStationRating(Request $request)
public function exportTopUp(Request $request)
{
$params = [
'date_start' => $request->input('date_start'),
'date_end' => $request->input('date_end'),
'_search' => $request->input('_search'),
'sorting' => $request->input('sort', 'date|desc'),
'sorting' => $request->input('sort', 'transaction_date_time|desc'),
];
$response = $this->makeApiRequest('cms/reportStationRatingsExport', $params, true);
$response = $this->makeApiRequest('cms/reportTopUpExport', $params, true);
if (is_a($response, '\Illuminate\Http\RedirectResponse')) {
return $response;
}
if (!$response) {
Log::warning("Failed to export station rating data", ['params' => $params]);
Log::warning("Failed to export top-up data", ['params' => $params]);
return redirect()->back()->with('error', 'Failed to export CSV.');
}
$filename = "reports_station_rating" . date("mdY") . ".csv";
$filename = "reports_top_up" . date("mdY") . ".csv";
return response($response->body(), 200)
->header('Content-Type', 'text/csv')

268
app/Http/Controllers/StationController.php
View File

@ -4,63 +4,98 @@ namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Http;
use Illuminate\Support\Str;
use Illuminate\Support\Facades\Log;
use Illuminate\Support\Facades\Session;
class StationController extends Controller
{
protected $apiBaseUrl = 'http://192.168.100.6:8081/api/';
protected $apiBaseUrl = 'http://192.168.100.6:8081/api/cms';
public function index(Request $request)
{
$params = [
'page' => $request->input('page', 1),
'page_size' => 5,
'_search' => $request->input('_search'),
'sort' => $request->input('sort', 'code|asc'),
];
try {
$user = Session::get('user');
$accessToken = $user['access_token'] ?? null;
$response = Http::get($this->apiBaseUrl . 'cms/getStations', $params);
$data = $response->json();
if (!$accessToken) {
Log::info('No access token found, redirecting to login from stations');
return redirect()->route('login')->with('error', 'Please log in to view stations.');
}
\Log::info('Stations API Response:', ['status' => $response->status(), 'data' => $data]);
$page = $request->input('page', 1);
$pageSize = 5;
$search = $request->input('_search', null);
$sort = $request->input('sort', 'station_code|asc');
$stations = [];
$currentPage = $params['page'];
$lastPage = 1;
$total = 0;
Log::info('Initiating API request to fetch stations', [
'url' => "{$this->apiBaseUrl}/getStations",
'params' => [
'page' => $page,
'page_size' => $pageSize,
'_search' => $search,
'sort' => $sort,
],
]);
if ($response->successful() && isset($data['data'])) {
$stations = array_map(function ($item) {
$response = Http::withHeaders([
'Accept' => 'application/json',
'Authorization' => 'Bearer ' . $accessToken,
])->timeout(30)->get("{$this->apiBaseUrl}/getStations", [
'page' => $page,
'page_size' => $pageSize,
'_search' => $search,
'sort' => $sort,
]);
$json = $response->json();
$rawResponse = $response->body();
Log::info('API response received for stations', [
'status' => $response->status(),
'headers' => $response->headers(),
'data' => $json,
'raw_response' => $rawResponse,
'reason' => $response->reason(),
]);
if ($response->status() === 401 || $response->status() === 403) {
Log::warning('Unauthorized or Forbidden API response for stations', ['response' => $json]);
return redirect()->route('login')->with('error', 'Your session has expired. Please log in again.');
}
if ($response->successful() && isset($json['code']) && $json['code'] == 200 && isset($json['data']) && is_array($json['data'])) {
$stations = array_map(function ($station) {
return [
'id' => $item['station_uuid'],
'station_code' => $item['code'],
'station_name' => $item['description'],
'branch_name' => 'N/A',
'date_created' => 'N/A',
'created_by' => 'N/A',
'modified_by' => 'N/A',
'date_modified' => 'N/A',
'id' => $station['station_uuid'] ?? '',
'station_code' => $station['code'] ?? '',
'station_name' => $station['description'] ?? '',
'branch_name' => $station['branch_name'] ?? '',
'date_created' => $station['date_created'] ?? '',
'created_by' => $station['created_by'] ?? '',
'modified_by' => $station['modified_by'] ?? '',
'date_modified' => $station['date_modified'] ?? '',
];
}, $data['data']);
}, $json['data']);
$total = count($data['data']);
$lastPage = ceil($total / $params['page_size']);
$currentPage = min($currentPage, $lastPage);
// Use meta for pagination if provided, else calculate locally
$total = $json['meta']['total'] ?? count($stations);
$lastPage = $json['meta']['last_page'] ?? ceil($total / $pageSize);
if ($params['_search']) {
$searchTerm = strtolower($params['_search']);
// Apply search filter locally if needed
if ($search) {
$searchTerm = strtolower($search);
$stations = array_filter($stations, function ($station) use ($searchTerm) {
return str_contains(strtolower($station['station_code']), $searchTerm) ||
str_contains(strtolower($station['station_name']), $searchTerm) ||
str_contains(strtolower($station['branch_name']), $searchTerm);
return str_contains(strtolower($station['station_code'] ?? ''), $searchTerm) ||
str_contains(strtolower($station['station_name'] ?? ''), $searchTerm);
});
$stations = array_values($stations);
$total = count($stations);
$lastPage = ceil($total / $params['page_size']);
$lastPage = ceil($total / $pageSize);
}
if ($params['sort']) {
[$sortField, $sortDir] = explode('|', $params['sort']);
// Apply sorting locally
if ($sort) {
[$sortField, $sortDir] = explode('|', $sort);
usort($stations, function ($a, $b) use ($sortField, $sortDir) {
$aValue = $a[$sortField] ?? '';
$bValue = $b[$sortField] ?? '';
@ -68,131 +103,42 @@ class StationController extends Controller
});
}
$start = ($currentPage - 1) * $params['page_size'];
$stations = array_slice($stations, $start, $params['page_size']);
// Paginate locally
$start = ($page - 1) * $pageSize;
$stations = array_slice($stations, $start, $pageSize);
} else {
Log::warning('No station data found or invalid API response', ['response' => $json]);
$stations = [];
$total = 0;
$lastPage = 1;
}
return view('pages.station locator.stations', compact('stations', 'currentPage', 'lastPage', 'total'));
Log::info('Processed stations data', [
'stations_count' => count($stations),
'total' => $total,
'currentPage' => $page,
'lastPage' => $lastPage,
'stations' => $stations,
]);
return view('pages.station locator.stations', [
'stations' => $stations,
'currentPage' => $page,
'lastPage' => $lastPage,
'total' => $total,
'search' => $search,
]);
} catch (\Exception $e) {
Log::error('Error fetching stations: ' . $e->getMessage(), [
'trace' => $e->getTraceAsString(),
]);
return view('pages.station locator.stations', [
'stations' => [],
'currentPage' => 1,
'lastPage' => 1,
'total' => 0,
'search' => $search,
])->with('error', 'Failed to fetch stations: ' . $e->getMessage());
}
}
// public function create()
// {
// return view('pages.add-station');
// }
// public function store(Request $request)
// {
// $request->validate([
// 'station_code' => 'required|string|max:50|unique:stations,station_code',
// 'station_name' => 'required|string|max:255',
// 'branch_name' => 'required|string|max:255',
// ]);
// // Mock API call to store station
// $response = Http::post($this->apiBaseUrl . 'cms/stations/store', [
// 'code' => $request->station_code,
// 'description' => $request->station_name,
// 'branch_name' => $request->branch_name,
// 'is_viewable' => 1,
// 'is_active' => 1,
// ]);
// if ($response->successful()) {
// return redirect()->route('station-management')->with('success', 'Station added successfully');
// }
// return back()->withErrors(['error' => 'Failed to add station']);
// }
// public function show($id)
// {
// $response = Http::get($this->apiBaseUrl . 'cms/getStations');
// $data = $response->json();
// $station = null;
// if ($response->successful() && isset($data['data'])) {
// $station = collect($data['data'])->firstWhere('station_uuid', $id);
// if ($station) {
// $station = [
// 'id' => $station['station_uuid'],
// 'station_code' => $station['code'],
// 'station_name' => $station['description'],
// 'branch_name' => 'N/A',
// 'date_created' => 'N/A',
// 'created_by' => 'N/A',
// 'modified_by' => 'N/A',
// 'date_modified' => 'N/A',
// ];
// }
// }
// if (!$station) {
// abort(404, 'Station not found');
// }
// return view('pages.view-station', compact('station'));
// }
// public function edit($id)
// {
// $response = Http::get($this->apiBaseUrl . 'cms/getStations');
// $data = $response->json();
// $station = null;
// if ($response->successful() && isset($data['data'])) {
// $station = collect($data['data'])->firstWhere('station_uuid', $id);
// if ($station) {
// $station = [
// 'id' => $station['station_uuid'],
// 'station_code' => $station['code'],
// 'station_name' => $station['description'],
// 'branch_name' => 'N/A',
// 'date_created' => 'N/A',
// 'created_by' => 'N/A',
// 'modified_by' => 'N/A',
// 'date_modified' => 'N/A',
// ];
// }
// }
// if (!$station) {
// abort(404, 'Station not found');
// }
// return view('pages.edit-station', compact('station'));
// }
// public function update(Request $request, $id)
// {
// $request->validate([
// 'station_code' => 'required|string|max:50|unique:stations,station_code,' . $id . ',id',
// 'station_name' => 'required|string|max:255',
// 'branch_name' => 'required|string|max:255',
// ]);
// // Mock API call to update station
// $response = Http::put($this->apiBaseUrl . 'cms/stations/update/' . $id, [
// 'code' => $request->station_code,
// 'description' => $request->station_name,
// 'branch_name' => $request->branch_name,
// ]);
// if ($response->successful()) {
// return redirect()->route('station-management')->with('success', 'Station updated successfully');
// }
// return back()->withErrors(['error' => 'Failed to update station']);
// }
// public function destroy($id)
// {
// // Mock API call to delete station
// $response = Http::delete($this->apiBaseUrl . 'cms/stations/delete/' . $id);
// if ($response->successful()) {
// return redirect()->route('station-management')->with('success', 'Station deleted successfully');
// }
// return back()->withErrors(['error' => 'Failed to delete station']);
// }
}

152
resources/views/components/station-component.blade.php
View File

@ -12,6 +12,7 @@
'currentPage' => 1,
'lastPage' => 1,
'total' => 0,
'search' => null,
])
<div class="card-header border-0 bg-transparent">
@ -32,7 +33,7 @@
<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">
<input type="text" class="form-control border-start-0" placeholder="Search..." id="searchInput" value="{{ $search }}" data-search-param="_search">
</div>
</div>
<div class="col-12 col-md-6 d-flex justify-content-end">
@ -47,13 +48,8 @@
<table class="table table-hover align-middle">
<thead class="table-light">
<tr>
@if ($showCheckboxes)
<th class="text-center" style="width: 40px;">
<input type="checkbox" id="selectAll">
</th>
@endif
@foreach ($columns as $index => $column)
<th class="{{ $column['sortable'] ? 'sortable' : '' }}" data-column="{{ $index + ($showCheckboxes ? 1 : 0) }}">
<th class="{{ $column['sortable'] ? 'sortable' : '' }}" data-column="{{ $index }}">
{{ $column['name'] }}
@if ($column['sortable'])
<i class="fa-solid fa-sort"></i>
@ -69,15 +65,8 @@
</table>
</div>
<!-- Batch Delete and Pagination -->
<div class="d-flex justify-content-between align-items-center mt-4">
@if ($showBatchDelete)
<div>
<button class="btn btn-danger btn-sm" id="deleteSelected" disabled>
<i class="fa-solid fa-trash-can me-1"></i> Delete Selected
</button>
</div>
@endif
<!-- Pagination -->
<div class="d-flex justify-content-end align-items-center mt-4">
<nav aria-label="Page navigation">
<ul class="pagination pagination-sm" id="pagination"></ul>
</nav>
@ -175,8 +164,6 @@
data: @json($data),
columns: @json($columns),
actions: @json($actions),
showCheckboxes: {{ json_encode($showCheckboxes) }},
showBatchDelete: {{ json_encode($showBatchDelete) }},
showEditModal: {{ json_encode($showEditModal) }},
showViewModal: {{ json_encode($showViewModal) }},
pageTitle: @json($pageTitle),
@ -184,38 +171,57 @@
currentPage: {{ $currentPage }},
lastPage: {{ $lastPage }},
total: {{ $total }},
search: @json($search),
};
console.log('Table Config:', {
data: tableConfig.data,
total: tableConfig.total,
currentPage: tableConfig.currentPage,
lastPage: tableConfig.lastPage,
search: tableConfig.search
});
const rowsPerPage = 5;
let currentPage = tableConfig.currentPage;
let filteredRows = [...tableConfig.data];
let originalRows = [...tableConfig.data].map(row => ({ ...row }));
let sortDirection = {};
function renderTable() {
const tableBody = document.getElementById('tableBody');
if (!tableBody) return;
if (!tableBody) {
console.error('Table body element not found');
return;
}
tableBody.innerHTML = '';
const startIndex = (currentPage - 1) * rowsPerPage;
const endIndex = startIndex + rowsPerPage;
const paginatedRows = filteredRows.slice(startIndex, endIndex);
console.log('Rendering table:', {
filteredRowsCount: filteredRows.length,
paginatedRows: paginatedRows,
paginatedRowsCount: paginatedRows.length,
startIndex: startIndex,
endIndex: endIndex
});
if (paginatedRows.length === 0) {
tableBody.innerHTML = '<tr><td colspan="' + (tableConfig.columns.length + (tableConfig.actions.length > 0 ? 1 : 0)) + '" class="text-center">No stations found</td></tr>';
} else {
paginatedRows.forEach(row => {
if (!row.id || !row.station_code || !row.station_name) {
console.warn('Invalid row data:', row);
return;
}
const tr = document.createElement('tr');
tr.setAttribute('data-id', row.id);
tr.classList.add('clickable-row');
let rowHtml = '';
if (tableConfig.showCheckboxes) {
rowHtml += `<td class="text-center"><input type="checkbox" class="rowCheckbox" value="${row.id}"></td>`;
}
tableConfig.columns.forEach(col => {
let value = row[col.key] || '';
if (col.key.includes('date')) {
value = value && value !== 'N/A' ? new Date(value).toLocaleDateString() : 'N/A';
}
let value = row[col.key] || 'N/A';
rowHtml += `<td>${value}</td>`;
});
@ -241,18 +247,22 @@
tr.innerHTML = rowHtml;
tableBody.appendChild(tr);
});
}
attachEventListeners();
updateNoDataMessage();
attachEventListeners();
}
function renderPagination() {
const pagination = document.getElementById('pagination');
if (!pagination) return;
if (!pagination) {
console.error('Pagination element not found');
return;
}
pagination.innerHTML = '';
const totalPages = Math.max(tableConfig.lastPage, 1);
const routeName = tableConfig.pageTitle.toLowerCase().replace(/\s+/g, '-') + '.index';
console.log('Rendering pagination:', { totalPages, currentPage });
const prevLi = document.createElement('li');
prevLi.className = `page-item ${currentPage === 1 ? 'disabled' : ''}`;
@ -292,6 +302,7 @@
}
function updateUrl(page, search = '') {
console.log('Updating URL:', { page, search });
const url = new URL(window.location);
url.searchParams.set('page', page);
if (search) {
@ -310,12 +321,16 @@
const noDataMessage = document.getElementById('no-data-message');
if (noDataMessage) {
noDataMessage.style.display = filteredRows.length === 0 ? 'block' : 'none';
console.log('No data message:', { display: noDataMessage.style.display, filteredRowsCount: filteredRows.length });
}
}
function openEditModal(id) {
const row = tableConfig.data.find(row => row.id === id);
if (!row) return;
if (!row) {
console.error('Row not found for edit:', id);
return;
}
const editForm = document.getElementById('editForm');
if (editForm) {
@ -334,16 +349,16 @@
function openViewModal(id) {
const row = tableConfig.data.find(row => row.id === id);
if (!row) return;
if (!row) {
console.error('Row not found for view:', id);
return;
}
const modalBody = document.getElementById('viewModalBody');
if (modalBody) {
let html = '';
tableConfig.columns.forEach(col => {
let value = row[col.key] || 'N/A';
if (col.key.includes('date')) {
value = value && value !== 'N/A' ? new Date(value).toLocaleDateString() : 'N/A';
}
html += `<p><strong>${col.name}:</strong> ${value}</p>`;
});
modalBody.innerHTML = html;
@ -356,16 +371,18 @@
const searchInput = document.getElementById('searchInput');
if (searchInput) {
searchInput.addEventListener('input', function() {
console.log('Search input:', this.value);
updateUrl(1, this.value);
});
}
document.querySelectorAll('.sortable').forEach(header => {
header.addEventListener('click', function() {
const columnIndex = parseInt(this.getAttribute('data-column')) - (tableConfig.showCheckboxes ? 1 : 0);
const columnIndex = parseInt(this.getAttribute('data-column'));
const key = tableConfig.columns[columnIndex].key;
sortDirection[columnIndex] = !sortDirection[columnIndex] ? 'asc' : sortDirection[columnIndex] === 'asc' ? 'desc' : 'asc';
console.log('Sorting:', { key, direction: sortDirection[columnIndex] });
document.querySelectorAll('.sortable i').forEach(icon => {
icon.classList.remove('fa-sort-up', 'fa-sort-down');
@ -384,6 +401,7 @@
const clearFilters = document.getElementById('clearFilters');
if (clearFilters) {
clearFilters.addEventListener('click', function() {
console.log('Clearing filters');
if (searchInput) searchInput.value = '';
sortDirection = {};
document.querySelectorAll('.sortable i').forEach(icon => {
@ -394,57 +412,13 @@
});
}
const checkboxes = document.querySelectorAll('.rowCheckbox');
const selectAll = document.getElementById('selectAll');
const deleteSelected = document.getElementById('deleteSelected');
if (selectAll) {
selectAll.addEventListener('change', function() {
checkboxes.forEach(checkbox => checkbox.checked = this.checked);
updateDeleteButton();
});
}
if (checkboxes.length > 0) {
checkboxes.forEach(checkbox => {
checkbox.addEventListener('change', updateDeleteButton);
});
}
if (deleteSelected) {
deleteSelected.addEventListener('click', function() {
const selectedIds = Array.from(document.querySelectorAll('.rowCheckbox:checked')).map(cb => cb.value);
if (selectedIds.length > 0 && confirm('Are you sure you want to delete the selected stations?')) {
fetch('/stations/batch-delete', {
method: 'POST',
headers: {
'X-CSRF-TOKEN': tableConfig.csrfToken,
'Content-Type': 'application/json',
'Accept': 'application/json',
},
body: JSON.stringify({ station_ids: selectedIds })
}).then(response => response.json())
.then(data => {
if (data.success) {
location.reload();
} else {
alert(data.message || 'Error deleting stations');
}
})
.catch(error => {
console.error('Error:', error);
alert('An error occurred while deleting the stations.');
});
}
});
}
document.querySelectorAll('.clickable-row').forEach(row => {
row.addEventListener('click', function(e) {
if (e.target.closest('.rowCheckbox, .edit-btn, .view-btn, .delete-btn')) {
if (e.target.closest('.edit-btn, .view-btn, .delete-btn')) {
return;
}
const id = this.getAttribute('data-id');
console.log('Row clicked:', id);
if (tableConfig.showViewModal) {
openViewModal(id);
} else {
@ -454,14 +428,12 @@
});
}
function updateDeleteButton() {
const deleteSelected = document.getElementById('deleteSelected');
const checkedBoxes = document.querySelectorAll('.rowCheckbox:checked');
deleteSelected.disabled = checkedBoxes.length === 0;
}
try {
renderTable();
renderPagination();
} catch (error) {
console.error('Error rendering table:', error);
}
</script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">

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

@ -8,20 +8,23 @@
</div>
<div class="row justify-content-center">
<div class="card-body p-3">
<!-- Filters -->
@if ($errorMessage)
<div class="alert alert-danger">{{ $errorMessage }}</div>
@endif
<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">
<input type="date" class="form-control" id="startDate" value="{{ request('date_start') }}">
</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">
<input type="date" class="form-control" id="endDate" value="{{ request('date_end') }}">
</div>
</div>
</div>
@ -30,7 +33,6 @@
</div>
</div>
<!-- Table -->
@include('components.reports-component', [
'pageTitle' => 'Mobile Usage Report',
'data' => $mobileUsageData ?? [],
@ -45,7 +47,7 @@
'showAddButton' => false,
'showCheckboxes' => false,
'showBatchDelete' => false,
'showSearch' => false,
'showSearch' => true,
'currentPage' => $currentPage ?? 1,
'lastPage' => $lastPage ?? 1,
'total' => $total ?? 0,
@ -54,20 +56,6 @@
</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;
@ -76,63 +64,43 @@
.btn-export-csv:hover {
background-color: #e65a00;
}
.input-group-text {
background-color: #f8f9fa;
}
</style>
<script>
let originalData = [...tableConfig.data];
const startDateInput = document.getElementById('startDate');
const endDateInput = document.getElementById('endDate');
const searchInput = document.getElementById('searchInput');
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;
function updateQueryParams() {
const url = new URL(window.location);
url.searchParams.set('page', '1');
if (startDateInput.value) url.searchParams.set('date_start', startDateInput.value);
else url.searchParams.delete('date_start');
if (endDateInput.value) url.searchParams.set('date_end', endDateInput.value);
else url.searchParams.delete('date_end');
if (searchInput?.value) url.searchParams.set('_search', searchInput.value);
else url.searchParams.delete('_search');
window.location = url;
}
return true;
startDateInput.addEventListener('change', updateQueryParams);
endDateInput.addEventListener('change', updateQueryParams);
searchInput?.addEventListener('input', () => {
clearTimeout(window.searchTimeout);
window.searchTimeout = setTimeout(updateQueryParams, 500);
});
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 url = new URL(tableConfig.exportEndpoint, window.location.origin);
if (startDateInput.value) url.searchParams.set('date_start', startDateInput.value);
if (endDateInput.value) url.searchParams.set('date_end', endDateInput.value);
if (searchInput?.value) url.searchParams.set('_search', searchInput.value);
if (sortColumn && sortDirection) {
url.searchParams.set('sort', `${sortColumn}|${sortDirection}`);
}
console.log('Exporting CSV to:', url.toString());
window.location.href = url.toString();
});
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

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

@ -8,20 +8,23 @@
</div>
<div class="row justify-content-center">
<div class="card-body p-3">
<!-- Filters -->
@if ($errorMessage)
<div class="alert alert-danger">{{ $errorMessage }}</div>
@endif
<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">
<input type="date" class="form-control" id="startDate" value="{{ request('date_start') }}">
</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">
<input type="date" class="form-control" id="endDate" value="{{ request('date_end') }}">
</div>
</div>
</div>
@ -30,7 +33,6 @@
</div>
</div>
<!-- Table -->
@include('components.reports-component', [
'pageTitle' => 'Registration Report',
'data' => $registrationData ?? [],
@ -44,7 +46,7 @@
'showAddButton' => false,
'showCheckboxes' => false,
'showBatchDelete' => false,
'showSearch' => false,
'showSearch' => true,
'currentPage' => $currentPage ?? 1,
'lastPage' => $lastPage ?? 1,
'total' => $total ?? 0,
@ -53,20 +55,6 @@
</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;
@ -75,62 +63,43 @@
.btn-export-csv:hover {
background-color: #e65a00;
}
.input-group-text {
background-color: #f8f9fa;
}
</style>
<script>
let originalData = [...tableConfig.data];
const startDateInput = document.getElementById('startDate');
const endDateInput = document.getElementById('endDate');
const searchInput = document.getElementById('searchInput');
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;
function updateQueryParams() {
const url = new URL(window.location);
url.searchParams.set('page', '1');
if (startDateInput.value) url.searchParams.set('date_start', startDateInput.value);
else url.searchParams.delete('date_start');
if (endDateInput.value) url.searchParams.set('date_end', endDateInput.value);
else url.searchParams.delete('date_end');
if (searchInput?.value) url.searchParams.set('_search', searchInput.value);
else url.searchParams.delete('_search');
window.location = url;
}
return true;
startDateInput.addEventListener('change', updateQueryParams);
endDateInput.addEventListener('change', updateQueryParams);
searchInput?.addEventListener('input', () => {
clearTimeout(window.searchTimeout);
window.searchTimeout = setTimeout(updateQueryParams, 500);
});
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.activatedCards,
item.registeredMembers
].join(',');
const url = new URL(tableConfig.exportEndpoint, window.location.origin);
if (startDateInput.value) url.searchParams.set('date_start', startDateInput.value);
if (endDateInput.value) url.searchParams.set('date_end', endDateInput.value);
if (searchInput?.value) url.searchParams.set('_search', searchInput.value);
if (sortColumn && sortDirection) {
url.searchParams.set('sort', `${sortColumn}|${sortDirection}`);
}
console.log('Exporting CSV to:', url.toString());
window.location.href = url.toString();
});
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
renderTable();
renderPagination();
</script>
@endsection

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

@ -8,20 +8,23 @@
</div>
<div class="row justify-content-center">
<div class="card-body p-3">
<!-- Filters -->
@if ($errorMessage)
<div class="alert alert-danger">{{ $errorMessage }}</div>
@endif
<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">
<input type="date" class="form-control" id="startDate" value="{{ request('date_start') }}">
</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">
<input type="date" class="form-control" id="endDate" value="{{ request('date_end') }}">
</div>
</div>
</div>
@ -30,7 +33,6 @@
</div>
</div>
<!-- Table -->
@include('components.reports-component', [
'pageTitle' => 'Top-Up Usage Report',
'data' => $topUpData ?? [],
@ -44,7 +46,7 @@
'showAddButton' => false,
'showCheckboxes' => false,
'showBatchDelete' => false,
'showSearch' => false,
'showSearch' => true,
'currentPage' => $currentPage ?? 1,
'lastPage' => $lastPage ?? 1,
'total' => $total ?? 0,
@ -81,56 +83,40 @@
</style>
<script>
let originalData = [...tableConfig.data];
const startDateInput = document.getElementById('startDate');
const endDateInput = document.getElementById('endDate');
const searchInput = document.getElementById('searchInput');
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);
if (startDate && itemDate < startDate) return false;
if (endDate) {
const endDateAdjusted = new Date(endDate);
endDateAdjusted.setHours(23, 59, 59, 999);
if (itemDate > endDateAdjusted) return false;
function updateQueryParams() {
const url = new URL(window.location);
url.searchParams.set('page', '1');
if (startDateInput.value) url.searchParams.set('date_start', startDateInput.value);
else url.searchParams.delete('date_start');
if (endDateInput.value) url.searchParams.set('date_end', endDateInput.value);
else url.searchParams.delete('date_end');
if (searchInput?.value) url.searchParams.set('_search', searchInput.value);
else url.searchParams.delete('_search');
window.location = url;
}
return true;
startDateInput.addEventListener('change', updateQueryParams);
endDateInput.addEventListener('change', updateQueryParams);
searchInput?.addEventListener('input', () => {
clearTimeout(window.searchTimeout);
window.searchTimeout = setTimeout(updateQueryParams, 500);
});
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 url = new URL(tableConfig.exportEndpoint, window.location.origin);
if (startDateInput.value) url.searchParams.set('date_start', startDateInput.value);
if (endDateInput.value) url.searchParams.set('date_end', endDateInput.value);
if (searchInput?.value) url.searchParams.set('_search', searchInput.value);
if (sortColumn && sortDirection) {
url.searchParams.set('sort', `${sortColumn}|${sortDirection}`);
}
console.log('Exporting CSV to:', url.toString());
window.location.href = url.toString();
});
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

17
resources/views/pages/station locator/stations.blade.php
View File

@ -3,7 +3,19 @@
@section('page_title', 'Station Management')
@section('content')
@include('components.table-component', [
@if (session('error'))
<div class="alert alert-danger">
{{ session('error') }}
</div>
@endif
<!-- Debug: Display raw stations data -->
<div style="display: none;">
<h6>Debug: Raw Stations Data</h6>
<pre>{{ json_encode($stations, JSON_PRETTY_PRINT) }}</pre>
</div>
@include('components.station-component', [
'pageTitle' => 'Station Management',
'data' => $stations ?? [],
'columns' => [
@ -25,8 +37,9 @@
'currentPage' => $currentPage ?? 1,
'lastPage' => $lastPage ?? 1,
'total' => $total ?? 0,
'search' => $search ?? null,
])
<div id="no-data-message" style="display: {{ empty($stations ?? []) ? 'block' : 'none' }}; text-align: center; margin-top: 20px;">
<div id="no-data-message" style="display: none; text-align: center; margin-top: 20px;">
<p>No stations found.</p>
</div>
@endsection

2
resources/views/pages/user-management/show-user.blade.php
View File

@ -42,6 +42,8 @@
@endif
<div class="text-end">
<a href="{{ route('user.management') }}" class="btn btn-primary">Back to Users</a>
<a href="{{ route('user-management.edit', $user['username']) }}" class="btn btn-primary">Edit</a>
</div>
</div>
</div>

5
routes/web.php
View File

@ -202,7 +202,12 @@ Route::get('/mobile-usage-report', [ReportsController::class, 'mobileUsage'])->n
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');
Route::get('/station-rating-reportExport', [ReportsController::class, 'exportStationRating'])->name('station-rating-reportExport');
Route::get('/mobile-usage-reportExport', [ReportsController::class, 'exportMobileUsage'])->name('mobile-usage-reportExport');
Route::get('/registration-reportExport', [ReportsController::class, 'exportRegistration'])->name('registration-reportExport');
Route::get('/top-up-usage-reportExport', [ReportsController::class, 'exportTopUp'])->name('top-up-usage-reportExport');
//Station
Route::get('/station-management', [StationController::class, 'index'])->name('stations');
Route::get('/stations/create', [StationController::class, 'create'])->name('stations.create');