From 4061579428ec06be4488d1f1157293b5a17c754f Mon Sep 17 00:00:00 2001
From: armiejean <armie.miranda@qlicqer.com>
Date: Fri, 16 May 2025 16:42:36 +0800
Subject: [PATCH] reports functionality works

---
 app/Http/Controllers/ReportsController.php    | 154 ++++++++
 .../components/reports-component.blade.php    | 331 ++++++++++++++++++
 .../reports/mobile-usage-report.blade.php     |  30 +-
 .../reports/registration-report.blade.php     |  99 +-----
 .../reports/station-rating-report.blade.php   | 125 +++----
 .../reports/top-up-usage-report.blade.php     |  67 +---
 routes/web.php                                |  32 +-
 7 files changed, 580 insertions(+), 258 deletions(-)
 create mode 100644 app/Http/Controllers/ReportsController.php
 create mode 100644 resources/views/components/reports-component.blade.php

diff --git a/app/Http/Controllers/ReportsController.php b/app/Http/Controllers/ReportsController.php
new file mode 100644
index 0000000..cb15799
--- /dev/null
+++ b/app/Http/Controllers/ReportsController.php
@@ -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'));
+    }
+}
\ No newline at end of file
diff --git a/resources/views/components/reports-component.blade.php b/resources/views/components/reports-component.blade.php
new file mode 100644
index 0000000..e6a8f2d
--- /dev/null
+++ b/resources/views/components/reports-component.blade.php
@@ -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>
\ No newline at end of file
diff --git a/resources/views/pages/reports/mobile-usage-report.blade.php b/resources/views/pages/reports/mobile-usage-report.blade.php
index 2570ca3..f47c495 100644
--- a/resources/views/pages/reports/mobile-usage-report.blade.php
+++ b/resources/views/pages/reports/mobile-usage-report.blade.php
@@ -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');
diff --git a/resources/views/pages/reports/registration-report.blade.php b/resources/views/pages/reports/registration-report.blade.php
index dae3a52..a773c1d 100644
--- a/resources/views/pages/reports/registration-report.blade.php
+++ b/resources/views/pages/reports/registration-report.blade.php
@@ -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>
diff --git a/resources/views/pages/reports/station-rating-report.blade.php b/resources/views/pages/reports/station-rating-report.blade.php
index 44198cb..f79e2d6 100644
--- a/resources/views/pages/reports/station-rating-report.blade.php
+++ b/resources/views/pages/reports/station-rating-report.blade.php
@@ -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
\ No newline at end of file
diff --git a/resources/views/pages/reports/top-up-usage-report.blade.php b/resources/views/pages/reports/top-up-usage-report.blade.php
index 1d71eb2..57a0f6d 100644
--- a/resources/views/pages/reports/top-up-usage-report.blade.php
+++ b/resources/views/pages/reports/top-up-usage-report.blade.php
@@ -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);
diff --git a/routes/web.php b/routes/web.php
index ce57947..646c716 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -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');
@@ -215,4 +197,14 @@ Route::get('/card-types/{uuid}', [CardTypeController::class, 'show'])->name('car
 Route::get('/card-types/{uuid}/edit', [CardTypeController::class, 'edit'])->name('card-types.edit');
 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');
\ No newline at end of file
+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');
+
+
+
+