diff --git a/resources/views/components/table-component.blade.php b/resources/views/components/table-component.blade.php
index a9f87bd..bae0c45 100644
--- a/resources/views/components/table-component.blade.php
+++ b/resources/views/components/table-component.blade.php
@@ -1,5 +1,5 @@
 @props([
-    'pageTitle' => 'Table',
+    'pageTitle' => '',
     'data' => [],
     'columns' => [],
     'actions' => [],
@@ -43,7 +43,7 @@
         <!-- Table -->
         <div class="table-container">
             <table class="table table-hover align-middle">
-                <thead class="table-light">
+                <thead class="table-light" >
                     <tr>
                         @if ($showCheckboxes)
                             <th class="text-center" style="width: 40px;">
@@ -367,6 +367,7 @@
             width: 100px;
         }
     }
+    
 </style>
 
 <!-- JavaScript -->
diff --git a/resources/views/pages/reports/mobile-usage-report.blade.php b/resources/views/pages/reports/mobile-usage-report.blade.php
index 3935903..2570ca3 100644
--- a/resources/views/pages/reports/mobile-usage-report.blade.php
+++ b/resources/views/pages/reports/mobile-usage-report.blade.php
@@ -1,14 +1,154 @@
 @extends('layouts.app')
 
-@section('page_title', 'Reports')
+@section('page_title', 'Mobile Usage Report')
 
 @section('content')
-<div class="card" style="min-height: 500px;">
-    <div class="card-header">
-        <i class="fa-solid fa-chart-column" style="color:gray;"> Mobile Usage Report</i>
+    @php
+        $mobileUsageData = [
+            ['id' => 1, 'date' => '2025-04-16', 'activeUsers' => 100, 'inactiveUsers' => 20, 'lockedUsers' => 5],
+            ['id' => 2, 'date' => '2025-04-15', 'activeUsers' => 95, 'inactiveUsers' => 22, 'lockedUsers' => 4],
+            ['id' => 3, 'date' => '2025-04-14', 'activeUsers' => 98, 'inactiveUsers' => 18, 'lockedUsers' => 6],
+            ['id' => 4, 'date' => '2025-04-13', 'activeUsers' => 102, 'inactiveUsers' => 19, 'lockedUsers' => 3],
+            ['id' => 5, 'date' => '2025-04-12', 'activeUsers' => 99, 'inactiveUsers' => 21, 'lockedUsers' => 4],
+            ['id' => 6, 'date' => '2025-04-11', 'activeUsers' => 101, 'inactiveUsers' => 20, 'lockedUsers' => 5],
+            ['id' => 7, 'date' => '2025-04-10', 'activeUsers' => 100, 'inactiveUsers' => 19, 'lockedUsers' => 4],
+        ];
+    @endphp
+
+    <div class="mb-3">
+        <h5 class="mb-0 fw-bold text-dark" style="font-size: 1.25rem;">Mobile Usage Report</h5>
     </div>
-    <div class="card-body">
-        <p>This is the Mobile Usage Report page content.</p>
+    <div class="row justify-content-center">
+        <div class="card-body p-3">
+            <!-- Filters -->
+            <div class="d-flex justify-content-between mb-3 flex-wrap gap-2">
+                <div class="d-flex align-items-center gap-2">
+                    <div class="d-flex flex-column">
+                        <label for="startDate" class="form-label mb-1">Start Date</label>
+                        <div class="input-group">
+                            <span class="input-group-text"><i class="fas fa-calendar-alt"></i></span>
+                            <input type="date" class="form-control" id="startDate">
+                        </div>
+                    </div>
+                    <div 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>
-@endsection
+
+    <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
\ No newline at end of file
diff --git a/resources/views/pages/reports/registration-report.blade.php b/resources/views/pages/reports/registration-report.blade.php
index 9b54acd..dae3a52 100644
--- a/resources/views/pages/reports/registration-report.blade.php
+++ b/resources/views/pages/reports/registration-report.blade.php
@@ -1,14 +1,209 @@
 @extends('layouts.app')
 
-@section('page_title', 'Reports')
+@section('page_title', 'Registration Report')
 
 @section('content')
-<div class="card" style="min-height: 500px;">
-    <div class="card-header">
-        <i class="fa-solid fa-chart-column" style="color:gray;"> Registration Report</i>
-    </div>
-    <div class="card-body">
-        <p>This is the Registration Report page content.</p>
-    </div>
+    @php
+        $registrationData = [
+            [
+                'id' => 1,
+                'date' => '2025-04-16',
+                'activatedCards' => 2,
+                'registeredMembers' => 2
+            ],
+            [
+                'id' => 2,
+                'date' => '2025-04-14',
+                'activatedCards' => 1,
+                'registeredMembers' => 1
+            ],
+            [
+                'id' => 3,
+                'date' => '2025-03-20',
+                'activatedCards' => 1,
+                'registeredMembers' => 1
+            ],
+            [
+                'id' => 4,
+                'date' => '2025-03-10',
+                'activatedCards' => 1,
+                'registeredMembers' => 1
+            ],
+            [
+                'id' => 5,
+                'date' => '2025-03-01',
+                'activatedCards' => 1,
+                'registeredMembers' => 1
+],[
+                'id' => 6,
+                'date' => '2025-03-01',
+                'activatedCards' => 1,
+                'registeredMembers' => 1
+],[
+                'id' => 7,
+                'date' => '2025-03-01',
+                'activatedCards' => 1,
+                'registeredMembers' => 1
+],
+        ];
+    @endphp
+ <div class="mb-3">
+    <h5 class="mb-0 fw-bold text-dark" style="font-size: 1.25rem;">Registration Report</h5>
 </div>
-@endsection
+    <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
\ No newline at end of file
diff --git a/resources/views/pages/reports/station-rating-report.blade.php b/resources/views/pages/reports/station-rating-report.blade.php
index 33e448d..44198cb 100644
--- a/resources/views/pages/reports/station-rating-report.blade.php
+++ b/resources/views/pages/reports/station-rating-report.blade.php
@@ -1,14 +1,155 @@
 @extends('layouts.app')
 
-@section('page_title', 'Reports')
+@section('page_title', 'Station Rating Report')
 
 @section('content')
-<div class="card" style="min-height: 500px;">
-    <div class="card-header">
-        <i class="fa-solid fa-chart-column" style="color:gray;"> Station Rating Report</i>
+    @php
+        $stationRatingData = [
+            ['id' => 1, 'transactionDateTime' => '2025-04-16 10:30:00', 'cardNumber' => '4111111111111111', 'salesInvoice' => 'INV001', 'station' => 'Station A', 'ratings' => 4.5],
+            ['id' => 2, 'transactionDateTime' => '2025-04-15 14:45:00', 'cardNumber' => '4012888888881881', 'salesInvoice' => 'INV002', 'station' => 'Station B', 'ratings' => 3.8],
+            ['id' => 3, 'transactionDateTime' => '2025-04-14 09:15:00', 'cardNumber' => '5555555555554444', 'salesInvoice' => 'INV003', 'station' => 'Station C', 'ratings' => 4.2],
+            ['id' => 4, 'transactionDateTime' => '2025-04-13 16:20:00', 'cardNumber' => '378282246310005', 'salesInvoice' => 'INV004', 'station' => 'Station D', 'ratings' => 4.0],
+            ['id' => 5, 'transactionDateTime' => '2025-04-12 11:00:00', 'cardNumber' => '6011111111111117', 'salesInvoice' => 'INV005', 'station' => 'Station E', 'ratings' => 3.9],
+            ['id' => 6, 'transactionDateTime' => '2025-04-11 08:50:00', 'cardNumber' => '3530111333300000', 'salesInvoice' => 'INV006', 'station' => 'Station F', 'ratings' => 4.3],
+            ['id' => 7, 'transactionDateTime' => '2025-04-10 12:10:00', 'cardNumber' => '4917610000000000', 'salesInvoice' => 'INV007', 'station' => 'Station G', 'ratings' => 4.1],
+        ];
+    @endphp
+
+    <div class="mb-3">
+        <h5 class="mb-0 fw-bold text-dark" style="font-size: 1.25rem;">Station Rating Report</h5>
     </div>
-    <div class="card-body">
-        <p>This is the Station Rating Report page content.</p>
+    <div class="row justify-content-center">
+        <div class="card-body p-3">
+            <!-- Filters -->
+            <div class="d-flex justify-content-between mb-3 flex-wrap gap-2">
+                <div class="d-flex align-items-center gap-2">
+                    <div class="d-flex flex-column">
+                        <label for="startDate" class="form-label mb-1">Start Date</label>
+                        <div class="input-group">
+                            <span class="input-group-text"><i class="fas fa-calendar-alt"></i></span>
+                            <input type="date" class="form-control" id="startDate">
+                        </div>
+                    </div>
+                    <div 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>
-@endsection
+
+    <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
\ 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 abe2ce2..1d71eb2 100644
--- a/resources/views/pages/reports/top-up-usage-report.blade.php
+++ b/resources/views/pages/reports/top-up-usage-report.blade.php
@@ -1,14 +1,187 @@
 @extends('layouts.app')
 
-@section('page_title', 'Reports')
+@section('page_title', 'Top-Up Usage Report')
 
 @section('content')
-<div class="card" style="min-height: 500px;">
-    <div class="card-header">
-        <i class="fa-solid fa-chart-column" style="color:gray;"> Top-Up Usage Report</i>
+    @php
+        $topUpData = [
+            [
+                'id' => 1,
+                'transactionDateTime' => '2025-04-16 10:30:00',
+                'cardNumber' => '4111111111111111',
+                'topUpAmount' => '50.00'
+            ],
+            [
+                'id' => 2,
+                'transactionDateTime' => '2025-04-15 14:45:00',
+                'cardNumber' => '4012888888881881',
+                'topUpAmount' => '20.00'
+            ],
+            [
+                'id' => 3,
+                'transactionDateTime' => '2025-04-14 09:15:00',
+                'cardNumber' => '5555555555554444',
+                'topUpAmount' => '30.00'
+            ],
+            [
+                'id' => 4,
+                'transactionDateTime' => '2025-04-13 16:20:00',
+                'cardNumber' => '378282246310005',
+                'topUpAmount' => '10.00'
+            ],
+            [
+                'id' => 5,
+                'transactionDateTime' => '2025-04-12 11:00:00',
+                'cardNumber' => '6011111111111117',
+                'topUpAmount' => '40.00'
+            ],
+            [
+                'id' => 6,
+                'transactionDateTime' => '2025-04-11 08:50:00',
+                'cardNumber' => '3530111333300000',
+                'topUpAmount' => '25.00'
+            ],
+            [
+                'id' => 7,
+                'transactionDateTime' => '2025-04-10 12:10:00',
+                'cardNumber' => '4917610000000000',
+                'topUpAmount' => '15.00'
+            ]
+        ];
+    @endphp
+
+    <div class="mb-3">
+        <h5 class="mb-0 fw-bold text-dark" style="font-size: 1.25rem;">Top-Up Usage Report</h5>
     </div>
-    <div class="card-body">
-        <p>This is the Top-Up Usage Report page content.</p>
+    <div class="row justify-content-center">
+        <div class="card-body p-3">
+            <!-- Filters -->
+            <div class="d-flex justify-content-between mb-3 flex-wrap gap-2">
+                <div class="d-flex align-items-center gap-2">
+                    <div class="d-flex flex-column">
+                        <label for="startDate" class="form-label mb-1">Start Date</label>
+                        <div class="input-group">
+                            <span class="input-group-text"><i class="fas fa-calendar-alt"></i></span>
+                            <input type="date" class="form-control" id="startDate">
+                        </div>
+                    </div>
+                    <div 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>
-@endsection
+
+    <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
\ No newline at end of file