diff --git a/app/Http/Controllers/TopUpController.php b/app/Http/Controllers/TopUpController.php
new file mode 100644
index 0000000..08d68eb
--- /dev/null
+++ b/app/Http/Controllers/TopUpController.php
@@ -0,0 +1,357 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Http;
+use Illuminate\Support\Facades\Log;
+use Illuminate\Support\Facades\Session;
+
+class TopUpController extends Controller
+{
+    protected $apiBaseUrl = 'http://192.168.100.6:8081/api';
+
+   public function index(Request $request)
+{
+    try {
+        $user = Session::get('user');
+        $accessToken = $user['access_token'] ?? null;
+
+        if (!$accessToken) {
+            Log::info('No access token found, redirecting to login from top-up');
+            return redirect()->route('login')->with('error', 'Please log in to view top-ups.');
+        }
+
+        // Get the requested page from the request (default to 1)
+        $page = $request->input('page', 1);
+        $perPage = 5; // Set to 5 items per page
+
+        $response = Http::withHeaders([
+            'Accept' => 'application/json',
+            'Authorization' => 'Bearer ' . $accessToken,
+        ])->get("{$this->apiBaseUrl}/cms/topUp", [
+            'page' => $page,
+            'per_page' => $perPage,
+        ]);
+
+        if ($response->status() === 401 || $response->status() === 403) {
+            Log::warning('Unauthorized or Forbidden API response: ', $response->json());
+            return redirect()->route('login')->with('error', 'Your session has expired. Please log in again.');
+        }
+
+        $json = $response->json();
+
+        Log::info("TopUp API Response (Page {$page}): ", $json);
+
+        if ($response->successful() && isset($json['data']) && is_array($json['data'])) {
+            $topups = array_map(function ($topup) {
+                Log::info('Processing top-up record: ', $topup);
+                return [
+                    'topup_uuid' => $topup['topup_uuid'] ?? $topup['id'] ?? null,
+                    'freeCode' => $topup['fee_code'] ?? 'N/A',
+                    'name' => $topup['name'] ?? 'Unnamed',
+                    'value' => $topup['amount'] ?? 0,
+                    'type' => $topup['type'] ?? 'Unknown',
+                ];
+            }, $json['data']);
+
+            // Pass pagination metadata to the view
+            $total = $json['meta']['total'] ?? count($topups); // Total items, adjust based on API response
+            $lastPage = $json['meta']['last_page'] ?? ceil($total / $perPage); // Calculate last page
+
+            return view('pages.top-up', [
+                'topups' => $topups,
+                'currentPage' => $page,
+                'lastPage' => $lastPage,
+                'total' => $total,
+            ]);
+        } else {
+            Log::warning('No top-up data found or invalid API response: ', $json);
+            return view('pages.top-up', [
+                'topups' => [],
+                'currentPage' => 1,
+                'lastPage' => 1,
+                'total' => 0,
+            ]);
+        }
+    } catch (\Exception $e) {
+        Log::error('Error fetching top-up data: ' . $e->getMessage());
+        return view('pages.top-up', [
+            'topups' => [],
+            'currentPage' => 1,
+            'lastPage' => 1,
+            'total' => 0,
+        ]);
+    }
+}
+    public function create()
+    {
+        try {
+            $user = Session::get('user');
+            $accessToken = $user['access_token'] ?? null;
+
+            if (!$accessToken) {
+                Log::info('No access token found, redirecting to login from top-up create');
+                return redirect()->route('login')->with('error', 'Please log in to add a top-up.');
+            }
+
+            $response = Http::withHeaders([
+                'Accept' => 'application/json',
+                'Authorization' => 'Bearer ' . $accessToken,
+            ])->get("{$this->apiBaseUrl}/cms/generateFeeCode");
+
+            $json = $response->json();
+
+            if ($response->successful() && isset($json['data']['fee_code'])) {
+                $freeCode = $json['data']['fee_code'];
+                return view('pages.add-top-up', ['freeCode' => $freeCode]);
+            } else {
+                Log::warning('Failed to generate fee code: ', $json);
+                return view('pages.add-top-up', ['freeCode' => '']);
+            }
+        } catch (\Exception $e) {
+            Log::error('Error generating fee code: ' . $e->getMessage());
+            return view('pages.add-top-up', ['freeCode' => '']);
+        }
+    }
+
+    public function store(Request $request)
+    {
+        try {
+            $user = Session::get('user');
+            $accessToken = $user['access_token'] ?? null;
+
+            if (!$accessToken) {
+                return redirect()->route('login')->with('error', 'Please log in to add a top-up.');
+            }
+
+            $validated = $request->validate([
+                'freeCode' => 'required|string|max:255',
+                'name' => 'required|string|max:255',
+                'value' => 'required|numeric|min:0',
+                'type' => 'required|in:1,2,3',
+            ]);
+
+            $payload = [
+                'fee_code' => $validated['freeCode'],
+                'name' => $validated['name'],
+                'amount' => $validated['value'],
+                'type' => $validated['type'],
+            ];
+
+            Log::info('API Payload for creating top-up: ', $payload);
+
+            $response = Http::withHeaders([
+                'Accept' => 'application/json',
+                'Authorization' => 'Bearer ' . $accessToken,
+            ])->post("{$this->apiBaseUrl}/cms/topUp", $payload);
+
+            $json = $response->json();
+
+            if ($response->successful()) {
+                Log::info('Top-up created successfully: ', $json);
+                return redirect()->route('top-up')
+                    ->with('success', $json['message'] ?? 'Top-up added successfully');
+            } else {
+                Log::error('Failed to create top-up: ', $json);
+                return redirect()->back()->with('error', $json['message'] ?? 'Failed to add top-up.');
+            }
+        } catch (\Exception $e) {
+            Log::error('Error creating top-up: ' . $e->getMessage());
+            return redirect()->back()->with('error', 'An error occurred while adding the top-up.');
+        }
+    }
+
+    public function show($uuid)
+    {
+        try {
+            $user = Session::get('user');
+            $accessToken = $user['access_token'] ?? null;
+
+            if (!$accessToken) {
+                Log::info('No access token found, redirecting to login from top-up show');
+                return redirect()->route('login')->with('error', 'Please log in to view top-up details.');
+            }
+
+            $response = Http::withHeaders([
+                'Accept' => 'application/json',
+                'Authorization' => 'Bearer ' . $accessToken,
+            ])->get("{$this->apiBaseUrl}/cms/topUp/{$uuid}");
+
+            $json = $response->json();
+
+            if ($response->successful() && isset($json['data'])) {
+                $topup = [
+                    'topup_uuid' => $json['data']['topup_uuid'],
+                    'freeCode' => $json['data']['fee_code'],
+                    'name' => $json['data']['name'],
+                    'value' => $json['data']['amount'],
+                    'type' => $json['data']['type'],
+                ];
+                return view('pages.view-top-up', ['topup' => $topup]);
+            } else {
+                Log::warning('Top-up not found: ', $json);
+                return redirect()->route('top-up')->with('error', $json['message'] ?? 'Top-up not found.');
+            }
+        } catch (\Exception $e) {
+            Log::error('Error fetching top-up: ' . $e->getMessage());
+            return redirect()->route('top-up')->with('error', 'An error occurred while fetching the top-up.');
+        }
+    }
+
+    public function edit($uuid)
+    {
+        try {
+            $user = Session::get('user');
+            $accessToken = $user['access_token'] ?? null;
+
+            if (!$accessToken) {
+                Log::info('No access token found, redirecting to login from top-up edit');
+                return redirect()->route('login')->with('error', 'Please log in to edit a top-up.');
+            }
+
+            $response = Http::withHeaders([
+                'Accept' => 'application/json',
+                'Authorization' => 'Bearer ' . $accessToken,
+            ])->get("{$this->apiBaseUrl}/cms/topUp/{$uuid}");
+
+            $json = $response->json();
+
+            if ($response->successful() && isset($json['data'])) {
+                $topup = [
+                    'topup_uuid' => $json['data']['topup_uuid'],
+                    'freeCode' => $json['data']['fee_code'],
+                    'name' => $json['data']['name'],
+                    'value' => $json['data']['amount'],
+                    'type' => $json['data']['type'],
+                ];
+                return view('pages.edit-top-up', ['topup' => $topup]);
+            } else {
+                Log::warning('Top-up not found: ', $json);
+                return redirect()->route('top-up')->with('error', $json['message'] ?? 'Top-up not found.');
+            }
+        } catch (\Exception $e) {
+            Log::error('Error fetching top-up for edit: ' . $e->getMessage());
+            return redirect()->route('top-up')->with('error', 'An error occurred while fetching the top-up.');
+        }
+    }
+
+    public function update(Request $request, $uuid)
+    {
+        try {
+            $user = Session::get('user');
+            $accessToken = $user['access_token'] ?? null;
+
+            if (!$accessToken) {
+                return redirect()->route('login')->with('error', 'Please log in to update a top-up.');
+            }
+
+            $validated = $request->validate([
+                'freeCode' => 'required|string|max:255',
+                'name' => 'required|string|max:255',
+                'value' => 'required|numeric|min:0',
+                'type' => 'required|in:Prepaid,Postpaid,Bonus',
+            ]);
+
+            $payload = [
+                'fee_code' => $validated['freeCode'],
+                'name' => $validated['name'],
+                'amount' => $validated['value'],
+                'type' => $validated['type'],
+            ];
+
+            Log::info('API Payload for updating top-up: ', $payload);
+
+            $response = Http::withHeaders([
+                'Accept' => 'application/json',
+                'Authorization' => 'Bearer ' . $accessToken,
+            ])->put("{$this->apiBaseUrl}/cms/topUp/{$uuid}", $payload);
+
+            $json = $response->json();
+
+            if ($response->successful()) {
+                Log::info('Top-up updated successfully: ', $json);
+                return redirect()->route('top-up')
+                    ->with('success', $json['message'] ?? 'Top-up updated successfully');
+            } else {
+                Log::error('Failed to update top-up: ', $json);
+                return redirect()->back()->with('error', $json['message'] ?? 'Failed to update top-up.');
+            }
+        } catch (\Exception $e) {
+            Log::error('Error updating top-up: ' . $e->getMessage());
+            return redirect()->back()->with('error', 'An error occurred while updating the top-up.');
+        }
+    }
+
+    public function destroy($uuid)
+    {
+        try {
+            $user = Session::get('user');
+            $accessToken = $user['access_token'] ?? null;
+
+            if (!$accessToken) {
+                return redirect()->route('login')->with('error', 'Please log in to delete a top-up.');
+            }
+
+            $response = Http::withHeaders([
+                'Accept' => 'application/json',
+                'Authorization' => 'Bearer ' . $accessToken,
+            ])->delete("{$this->apiBaseUrl}/cms/topUp/{$uuid}");
+
+            $json = $response->json();
+
+            if ($response->successful()) {
+                Log::info('Top-up deleted successfully: ', $json);
+                return redirect()->route('top-up')
+                    ->with('success', $json['message'] ?? 'Top-up deleted successfully');
+            } else {
+                Log::error('Failed to delete top-up: ', $json);
+                return redirect()->back()->with('error', $json['message'] ?? 'Failed to delete top-up.');
+            }
+        } catch (\Exception $e) {
+            Log::error('Error deleting top-up: ' . $e->getMessage());
+            return redirect()->back()->with('error', 'An error occurred while deleting the top-up.');
+        }
+    }
+
+    public function batchDelete(Request $request)
+    {
+        try {
+            $user = Session::get('user');
+            $accessToken = $user['access_token'] ?? null;
+
+            if (!$accessToken) {
+                return redirect()->route('login')->with('error', 'Please log in to delete top-ups.');
+            }
+
+            $uuids = $request->input('topup_uuid', []);
+
+            if (empty($uuids)) {
+                return redirect()->back()->with('error', 'No top-ups selected for deletion.');
+            }
+
+            Log::info('Batch delete UUIDs: ', $uuids);
+
+            $response = Http::withHeaders([
+                'Accept' => 'application/json',
+                'Authorization' => 'Bearer ' . $accessToken,
+            ])->delete("{$this->apiBaseUrl}/cms/topUpBatchDelete", [
+                'topup_uuid' => $uuids,
+            ]);
+
+            $json = $response->json();
+
+            if ($response->successful()) {
+                Log::info('Batch delete successful for UUIDs: ', $uuids);
+                return redirect()->route('top-up')
+                    ->with('success', $json['message'] ?? 'Top-ups deleted successfully');
+            } else {
+                Log::error('Failed to batch delete top-ups: ', $json);
+                return redirect()->back()->with('error', $json['message'] ?? 'Failed to delete top-ups.');
+            }
+        } catch (\Exception $e) {
+            Log::error('Error in batch delete: ' . $e->getMessage());
+            return redirect()->back()->with('error', 'An error occurred while deleting top-ups.');
+        }
+    }
+}
\ No newline at end of file
diff --git a/resources/views/components/table-component.blade.php b/resources/views/components/table-component.blade.php
deleted file mode 100644
index be82f13..0000000
--- a/resources/views/components/table-component.blade.php
+++ /dev/null
@@ -1,767 +0,0 @@
-@props([
-    'pageTitle' => '',
-    'data' => [],
-    'columns' => [],
-    'actions' => [],
-    'showAddButton' => false,
-    'addButtonUrl' => '#',
-    'showCheckboxes' => false,
-    'showBatchDelete' => false,
-    'showEditModal' => false,
-    'showViewModal' => false
-])
-
-
-    <div class="card-header border-0 bg-transparent">
-        <div class="d-flex justify-content-between align-items-center">
-            <h5 class="mb-0 fw-bold text-dark">{{ $pageTitle }}</h5>
-            @if ($showAddButton)
-                <a href="{{ $addButtonUrl }}" class="btn btn-primary btn-sm px-3">
-                    <i class="fa-solid fa-plus me-1"></i> Add {{ $pageTitle }}
-                </a>
-            @endif
-        </div>
-    </div>
-    <div class="card-body">
-        <!-- Search and Filters -->
-        <div class="row mb-3 align-items-center">
-            <div class="col-12 col-md-6 mb-2 mb-md-0">
-                <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">
-                </div>
-            </div>
-            <div class="col-12 col-md-6 d-flex justify-content-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>
-                        @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 + 1 }}">
-                                {{ $column['name'] }}
-                                @if ($column['sortable'])
-                                    <i class="fa-solid fa-sort"></i>
-                                @endif
-                            </th>
-                        @endforeach
-                        @if (!empty($actions))
-                            <th class="text-center" style="width: 120px;">Action</th>
-                        @endif
-                    </tr>
-                </thead>
-                <tbody id="tableBody"></tbody>
-            </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
-            <nav aria-label="Page navigation">
-                <ul class="pagination pagination-sm" id="pagination"></ul>
-            </nav>
-        </div>
-    </div>
-
-
-<!-- Edit Modal -->
-@if ($showEditModal)
-    <div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
-        <div class="modal-dialog modal-dialog-centered">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <h5 class="modal-title" id="editModalLabel">Edit {{ $pageTitle }}</h5>
-                    <button type="button" class="modal-close-btn" data-bs-dismiss="modal" aria-label="Close">
-                        <i class="fa-solid fa-xmark"></i>
-                    </button>
-                </div>
-                <div class="modal-body">
-                    <form id="editForm">
-                        @foreach ($columns as $column)
-                            <div class="mb-3">
-                                <label for="edit{{ ucfirst($column['key']) }}" class="form-label">{{ $column['name'] }}</label>
-                                @if ($column['key'] === 'status')
-                                    <select class="form-select" id="edit{{ ucfirst($column['key']) }}">
-                                        <option value="Active">Active</option>
-                                        <option value="Inactive">Inactive</option>
-                                    </select>
-                                @else
-                                    <input type="{{ $column['key'] === 'email' ? 'email' : 'text' }}"
-                                           class="form-control"
-                                           id="edit{{ ucfirst($column['key']) }}"
-                                           {{ $column['key'] === 'username' || $column['key'] === 'memberId' ? 'readonly' : '' }}>
-                                @endif
-                            </div>
-                        @endforeach
-                    </form>
-                </div>
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
-                    <button type="button" class="btn btn-primary" id="updateBtn">Update</button>
-                </div>
-            </div>
-        </div>
-    </div>
-@endif
-
-<!-- View Modal -->
-@if ($showViewModal)
-    <div class="modal fade" id="viewModal" tabindex="-1" aria-labelledby="viewModalLabel" aria-hidden="true">
-        <div class="modal-dialog modal-dialog-centered">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <h5 class="modal-title" id="viewModalLabel">View {{ $pageTitle }} Details</h5>
-                    <button type="button" class="modal-close-btn" data-bs-dismiss="modal" aria-label="Close">
-                        <i class="fa-solid fa-xmark"></i>
-                    </button>
-                </div>
-                <div class="modal-body">
-                    <div class="view-details">
-                        @foreach ($columns as $column)
-                            <p><strong>{{ $column['name'] }}:</strong> <span id="view{{ ucfirst($column['key']) }}"></span></p>
-                        @endforeach
-                    </div>
-                </div>
-                <div class="modal-footer">
-                    @if ($pageTitle === 'Locked Account')
-                        <button type="button" class="btn btn-success" id="activateAccountBtn">Activate Account</button>
-                    @endif
-                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
-                </div>
-            </div>
-        </div>
-    </div>
-@endif
-
-
-<style>
-    .card,
-    .table,
-    .btn,
-    .form-control,
-    .input-group-text,
-    .modal-content {
-        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
-        font-weight: 400; 
-        line-height: 1.5;
-    }
-    .card-header h5,
-    .modal-title {
-        font-weight: 500;
-    }
-    .table thead th {
-        font-weight: 500;
-        font-size: 0.8rem;
-    }
-    .form-label {
-        font-weight: 500;
-        font-size: 0.9rem;
-    }
-    .card {
-        border-radius: 10px;
-    }
-    .card-header {
-        background-color: transparent;
-    }
-    .btn-primary {
-        background-color: #E74610;
-        border-color: #E74610;
-    }
-    .btn-primary:hover {
-        background-color: #E74610;
-        border-color: #E74610;
-    }
-    .sortable {
-        cursor: pointer;
-    }
-    .sortable:hover {
-        background-color: #f1f3f5;
-    }
-    .table {
-        font-size: 0.85rem;
-        width: 100%;
-        table-layout: auto;
-    }
-    .table th,
-    .table td {
-        padding: 0.5rem;
-        vertical-align: middle;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-    .table th:first-child,
-    .table td:first-child {
-        width: 40px;
-        text-align: center;
-    }
-    .table th:last-child,
-    .table td:last-child {
-        width: 120px;
-        text-align: center;
-    }
-    .table td:nth-child(5),
-    .table th:nth-child(5) {
-        width: 100px;
-    }
-    .table td:nth-child(6),
-    .table th:nth-child(6) {
-        max-width: 200px;
-    }
-    .table td:nth-child(7),
-    .table th:nth-child(7) {
-        width: 120px;
-    }
-    .status-btn {
-        font-size: 0.75rem;
-        padding: 0.2rem 0.5rem;
-    }
-    .dropdown-menu-sm {
-        min-width: 120px;
-    }
-    .dropdown-item {
-        font-size: 0.85rem;
-    }
-    .table thead .sortable i {
-        font-size: 0.7rem;
-        vertical-align: middle;
-    }
-    .table-container {
-        overflow-x: hidden;
-    }
-    .modal-content {
-        border-radius: 8px;
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-    }
-    .modal-header {
-        border-bottom: 1px solid #e9ecef;
-        position: relative;
-    }
-    .modal-footer {
-        border-top: 1px solid #e9ecef;
-    }
-    .form-control,
-    .form-select {
-        font-size: 0.9rem;
-        border-radius: 5px;
-    }
-    .modal-close-btn {
-        background: none;
-        border: none;
-        font-size: 1rem;
-        color: #6c757d;
-        position: absolute;
-        right: 15px;
-        top: 15px;
-        cursor: pointer;
-    }
-    .modal-close-btn:hover {
-        color: #343a40;
-    }
-    .view-details p {
-        margin-bottom: 0.75rem;
-        font-size: 0.9rem;
-    }
-    .view-details strong {
-        display: inline-block;
-        width: 120px;
-        font-weight: 500;
-        color: #343a40;
-    }
-    .view-details span {
-        color: #495057;
-    }
-    .pagination-sm .page-link {
-        padding: 0.25rem 0.5rem;
-        font-size: 0.85rem;
-        border-color: #E74610;
-        color: #E74610;
-    }
-    .pagination-sm .page-item.active .page-link {
-        background-color: #E74610;
-        border-color: #E74610;
-        color: #fff;
-    }
-    .pagination-sm .page-link:hover {
-        background-color: #E74610;
-        border-color: #E74610;
-        color: #fff;
-    }
-    .pagination-sm .page-item.disabled .page-link {
-        border-color: #dee2e6;
-        color: #6c757d;
-    }
-    .edit-btn {
-        border-color: #E74610;
-        color: #E74610;
-    }
-    .edit-btn:hover {
-        background-color: #E74610;
-        border-color: #E74610;
-        color: #fff;
-    }
-    @media (max-width: 576px) {
-        .table {
-            font-size: 0.75rem;
-        }
-        .table thead th {
-            font-size: 0.75rem;
-        }
-        .table th,
-        .table td {
-            padding: 0.3rem;
-        }
-        .btn-sm {
-            padding: 0.2rem 0.4rem;
-            font-size: 0.75rem;
-        }
-        .input-group-sm>.form-control {
-            font-size: 0.75rem;
-        }
-        .status-btn {
-            font-size: 0.65rem;
-        }
-        .dropdown-item {
-            font-size: 0.75rem;
-        }
-        .table thead .sortable i {
-            font-size: 0.65rem;
-        }
-        .pagination-sm .page-link {
-            padding: 0.2rem 0.4rem;
-            font-size: 0.75rem;
-        }
-        .table td:nth-child(6) {
-            max-width: 150px;
-        }
-        .form-control,
-        .form-select {
-            font-size: 0.85rem;
-        }
-        .modal-close-btn {
-            font-size: 0.9rem;
-        }
-        .view-details p {
-            font-size: 0.85rem;
-        }
-        .view-details strong {
-            width: 100px;
-        }
-    }
-    
-</style>
-
-<!-- JavaScript -->
-<script>
-    const tableConfig = {
-        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)
-    };
-
-    const rowsPerPage = 5;
-    let currentPage = 1;
-    let filteredRows = [...tableConfig.data];
-    let originalRows = [...tableConfig.data].map(row => ({ ...row }));
-    let sortDirection = {};
-    let currentRowId = null; // Track the row being viewed
-
-    function renderTable() {
-        const tableBody = document.getElementById('tableBody');
-        if (!tableBody) return;
-        tableBody.innerHTML = '';
-
-        const start = (currentPage - 1) * rowsPerPage;
-        const end = start + rowsPerPage;
-        const paginatedRows = filteredRows.slice(start, end);
-
-        paginatedRows.forEach(row => {
-            const tr = document.createElement('tr');
-            tr.setAttribute('data-id', row.id);
-            let rowHtml = '';
-
-            if (tableConfig.showCheckboxes) {
-                rowHtml += `<td class="text-center"><input type="checkbox" class="rowCheckbox"></td>`;
-            }
-
-            tableConfig.columns.forEach(col => {
-                if (col.key === 'status') {
-                    rowHtml += `
-                        <td>
-                            <div class="dropdown">
-                                <button class="btn btn-sm btn-outline-secondary status-btn" type="button" id="statusDropdown${row.id}" data-bs-toggle="dropdown" aria-expanded="false">
-                                    <span class="status-text">${row[col.key]}</span>
-                                </button>
-                                <ul class="dropdown-menu dropdown-menu-end dropdown-menu-sm" aria-labelledby="statusDropdown${row.id}">
-                                    <li>
-                                        <a class="dropdown-item d-flex align-items-center gap-2 status-option" href="#" data-status="Active">
-                                            <i class="fa-solid fa-check text-success" style="font-size: 14px;"></i>
-                                            <span>Active</span>
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a class="dropdown-item d-flex align-items-center gap-2 status-option" href="#" data-status="Inactive">
-                                            <i class="fa-solid fa-xmark text-danger" style="font-size: 14px;"></i>
-                                            <span>Inactive</span>
-                                        </a>
-                                    </li>
-                                </ul>
-                            </div>
-                        </td>`;
-                } else {
-                    rowHtml += `<td>${row[col.key] || ''}</td>`;
-                }
-            });
-
-            if (tableConfig.actions.length > 0) {
-                rowHtml += `<td class="text-center">`;
-                tableConfig.actions.forEach(action => {
-                    if (action === 'edit' && tableConfig.showEditModal) {
-                        rowHtml += `
-                            <a href="#" class="btn btn-sm edit-btn me-1" title="Edit" data-id="${row.id}">
-                                <i class="fa-solid fa-pen-to-square"></i>
-                            </a>`;
-                    } else if (action === 'view' && tableConfig.showViewModal) {
-                        rowHtml += `
-                            <a href="#" class="btn btn-sm btn-outline-secondary me-1 view-btn" title="View" data-id="${row.id}">
-                                <i class="fa-solid fa-eye"></i>
-                            </a>`;
-                    } else if (action === 'delete') {
-                        rowHtml += `
-                            <button class="btn btn-sm btn-outline-danger delete-btn" title="Delete" data-id="${row.id}">
-                                <i class="fa-solid fa-trash-can"></i>
-                            </button>`;
-                    }
-                });
-                rowHtml += `</td>`;
-            }
-
-            tr.innerHTML = rowHtml;
-            tableBody.appendChild(tr);
-        });
-
-        attachEventListeners();
-        updateDeleteButtonState();
-    }
-
-    function renderPagination() {
-        const pagination = document.getElementById('pagination');
-        if (!pagination) return;
-        pagination.innerHTML = '';
-
-        const pageCount = Math.ceil(filteredRows.length / rowsPerPage);
-
-        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) {
-                currentPage--;
-                renderTable();
-                renderPagination();
-            }
-        });
-        pagination.appendChild(prevLi);
-
-        for (let i = 1; i <= pageCount; 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();
-                currentPage = i;
-                renderTable();
-                renderPagination();
-            });
-            pagination.appendChild(li);
-        }
-
-        const nextLi = document.createElement('li');
-        nextLi.className = `page-item ${currentPage === pageCount ? '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 < pageCount) {
-                currentPage++;
-                renderTable();
-                renderPagination();
-            }
-        });
-        pagination.appendChild(nextLi);
-    }
-
-    function attachEventListeners() {
-        // Search
-        const searchInput = document.getElementById('searchInput');
-        if (searchInput) {
-            searchInput.addEventListener('input', function() {
-                const searchTerm = this.value.toLowerCase();
-                filteredRows = tableConfig.data.filter(row => {
-                    return Object.values(row).some(value =>
-                        value && value.toString().toLowerCase().includes(searchTerm)
-                    );
-                });
-                currentPage = 1;
-                renderTable();
-                renderPagination();
-            });
-        }
-
-        // Sort
-        document.querySelectorAll('.sortable').forEach(header => {
-            header.addEventListener('click', function() {
-                const columnIndex = parseInt(this.getAttribute('data-column')) - 1;
-                const key = tableConfig.columns[columnIndex].key;
-
-                sortDirection[columnIndex] = !sortDirection[columnIndex] ? 'asc' : sortDirection[columnIndex] === 'asc' ? 'desc' : 'asc';
-
-                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[columnIndex] === 'asc' ? 'fa-sort-up' : 'fa-sort-down');
-                }
-
-                filteredRows.sort((a, b) => {
-                    const aValue = (a[key] || '').toString().toLowerCase();
-                    const bValue = (b[key] || '').toString().toLowerCase();
-                    return sortDirection[columnIndex] === 'asc' ? aValue.localeCompare(bValue) : bValue.localeCompare(aValue);
-                });
-
-                currentPage = 1;
-                renderTable();
-                renderPagination();
-            });
-        });
-
-        // Clear Filters
-        const clearFilters = document.getElementById('clearFilters');
-        if (clearFilters) {
-            clearFilters.addEventListener('click', function() {
-                if (searchInput) searchInput.value = '';
-                document.querySelectorAll('.sortable i').forEach(icon => {
-                    icon.classList.remove('fa-sort-up', 'fa-sort-down');
-                    icon.classList.add('fa-sort');
-                });
-                sortDirection = {};
-                filteredRows = [...tableConfig.data];
-                currentPage = 1;
-                renderTable();
-                renderPagination();
-            });
-        }
-
-        // Checkboxes
-        if (tableConfig.showCheckboxes) {
-            const selectAll = document.getElementById('selectAll');
-            if (selectAll) {
-                selectAll.addEventListener('change', function() {
-                    const checkboxes = document.querySelectorAll('.rowCheckbox');
-                    checkboxes.forEach(checkbox => {
-                        checkbox.checked = this.checked;
-                    });
-                    updateDeleteButtonState();
-                });
-            }
-
-            document.querySelectorAll('.rowCheckbox').forEach(checkbox => {
-                checkbox.addEventListener('change', updateDeleteButtonState);
-            });
-        }
-
-        // Batch Delete
-        if (tableConfig.showBatchDelete) {
-            const deleteSelected = document.getElementById('deleteSelected');
-            if (deleteSelected) {
-                deleteSelected.addEventListener('click', function() {
-                    if (confirm('Are you sure you want to delete the selected items?')) {
-                        const checkboxes = document.querySelectorAll('.rowCheckbox');
-                        const selectedIds = Array.from(checkboxes)
-                            .filter(cb => cb.checked)
-                            .map(cb => cb.closest('tr').getAttribute('data-id'));
-
-                        filteredRows = filteredRows.filter(row => !selectedIds.includes(row.id.toString()));
-                        tableConfig.data = tableConfig.data.filter(row => !selectedIds.includes(row.id.toString()));
-                        originalRows = originalRows.filter(row => !selectedIds.includes(row.id.toString()));
-
-                        const maxPage = Math.ceil(filteredRows.length / rowsPerPage);
-                        if (currentPage > maxPage) {
-                            currentPage = maxPage || 1;
-                        }
-
-                        renderTable();
-                        renderPagination();
-                        if (selectAll) selectAll.checked = false;
-                    }
-                });
-            }
-        }
-
-        // Status
-        document.querySelectorAll('.status-option').forEach(option => {
-            option.addEventListener('click', function(e) {
-                e.preventDefault();
-                const newStatus = this.getAttribute('data-status');
-                const row = this.closest('tr');
-                const userId = row.getAttribute('data-id');
-                const statusText = row.querySelector('.status-text');
-
-                if (statusText) {
-                    statusText.textContent = newStatus;
-                }
-
-                const rowData = filteredRows.find(r => r.id == userId);
-                if (rowData) {
-                    rowData.status = newStatus;
-                }
-            });
-        });
-
-        // Edit
-        if (tableConfig.showEditModal) {
-            document.querySelectorAll('.edit-btn').forEach(button => {
-                button.addEventListener('click', function(e) {
-                    e.preventDefault();
-                    const userId = this.getAttribute('data-id');
-                    const user = filteredRows.find(row => row.id == userId);
-
-                    if (user) {
-                        tableConfig.columns.forEach(col => {
-                            const input = document.getElementById(`edit${col.key.charAt(0).toUpperCase() + col.key.slice(1)}`);
-                            if (input) {
-                                input.value = user[col.key] || '';
-                            }
-                        });
-
-                        const modal = new bootstrap.Modal(document.getElementById('editModal'));
-                        modal.show();
-                    }
-                });
-            });
-
-            const updateBtn = document.getElementById('updateBtn');
-            if (updateBtn) {
-                updateBtn.addEventListener('click', function() {
-                    const userId = document.querySelector('.edit-btn[data-id]')?.getAttribute('data-id');
-                    const user = filteredRows.find(row => row.id == userId);
-                    if (user) {
-                        tableConfig.columns.forEach(col => {
-                            const input = document.getElementById(`edit${col.key.charAt(0).toUpperCase() + col.key.slice(1)}`);
-                            if (input && !input.readOnly) {
-                                user[col.key] = input.value;
-                            }
-                        });
-                    }
-                    const modal = bootstrap.Modal.getInstance(document.getElementById('editModal'));
-                    modal.hide();
-                    renderTable();
-                });
-            }
-        }
-
-        // View
-        if (tableConfig.showViewModal) {
-            document.querySelectorAll('.view-btn').forEach(button => {
-                button.addEventListener('click', function(e) {
-                    e.preventDefault();
-                    currentRowId = this.getAttribute('data-id');
-                    const user = filteredRows.find(row => row.id == currentRowId);
-
-                    if (user) {
-                        tableConfig.columns.forEach(col => {
-                            const span = document.getElementById(`view${col.key.charAt(0).toUpperCase() + col.key.slice(1)}`);
-                            if (span) {
-                                span.textContent = user[col.key] || '';
-                            }
-                        });
-
-                        const modal = new bootstrap.Modal(document.getElementById('viewModal'));
-                        modal.show();
-                    }
-                });
-            });
-
-            // Activate Account for Locked Account page
-            if (tableConfig.pageTitle === 'Locked Account') {
-                const activateAccountBtn = document.getElementById('activateAccountBtn');
-                if (activateAccountBtn) {
-                    activateAccountBtn.addEventListener('click', function() {
-                        if (currentRowId) {
-                            const user = filteredRows.find(row => row.id == currentRowId);
-                            if (user) {
-                                user.status = 'Active';
-                            }
-                            const modal = bootstrap.Modal.getInstance(document.getElementById('viewModal'));
-                            modal.hide();
-                            renderTable();
-                            currentRowId = null;
-                        }
-                    });
-                }
-            }
-        }
-
-        // Delete
-        document.querySelectorAll('.delete-btn').forEach(button => {
-            button.addEventListener('click', function() {
-                const userId = this.getAttribute('data-id');
-                if (confirm('Are you sure you want to delete this item?')) {
-                    filteredRows = filteredRows.filter(row => row.id != userId);
-                    tableConfig.data = tableConfig.data.filter(row => row.id != userId);
-                    originalRows = originalRows.filter(row => row.id != userId);
-
-                    const maxPage = Math.ceil(filteredRows.length / rowsPerPage);
-                    if (currentPage > maxPage) {
-                        currentPage = maxPage || 1;
-                    }
-
-                    renderTable();
-                    renderPagination();
-                }
-            });
-        });
-    }
-
-    function updateDeleteButtonState() {
-        if (tableConfig.showBatchDelete) {
-            const checkboxes = document.querySelectorAll('.rowCheckbox');
-            const checkedCount = Array.from(checkboxes).filter(cb => cb.checked).length;
-            const deleteButton = document.getElementById('deleteSelected');
-            if (deleteButton) {
-                deleteButton.disabled = checkedCount < 2;
-            }
-        }
-    }
-
-    renderTable();
-    renderPagination();
-</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/components/top-up-component.blade.php b/resources/views/components/top-up-component.blade.php
new file mode 100644
index 0000000..ee4460b
--- /dev/null
+++ b/resources/views/components/top-up-component.blade.php
@@ -0,0 +1,488 @@
+@props([
+    'pageTitle' => '',
+    'data' => [],
+    'columns' => [],
+    'actions' => [],
+    'showAddButton' => false,
+    'addButtonUrl' => '#',
+    'showCheckboxes' => false,
+    'showBatchDelete' => false,
+    'currentPage' => 1,
+    'lastPage' => 1,
+    'total' => 0,
+])
+
+<div class="card-header border-0 bg-transparent">
+    <div class="d-flex justify-content-between align-items-center">
+        <h5 class="mb-0 fw-bold text-dark">{{ $pageTitle }}</h5>
+        @if ($showAddButton)
+            <a href="{{ $addButtonUrl }}" class="btn btn-primary btn-sm px-3">
+                <i class="fa-solid fa-plus me-1"></i> Add {{ $pageTitle }}
+            </a>
+        @endif
+    </div>
+</div>
+<div class="card-body">
+    <!-- Search and Filters -->
+    <div class="row mb-3 align-items-center">
+        <div class="col-12 col-md-6 mb-2 mb-md-0">
+            <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">
+            </div>
+        </div>
+        <div class="col-12 col-md-6 d-flex justify-content-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>
+                    @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 + 1 }}">
+                            {{ $column['name'] }}
+                            @if ($column['sortable'])
+                                <i class="fa-solid fa-sort"></i>
+                            @endif
+                        </th>
+                    @endforeach
+                    @if (!empty($actions))
+                        <th class="text-center" style="width: 120px;">Action</th>
+                    @endif
+                </tr>
+            </thead>
+            <tbody id="tableBody"></tbody>
+        </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
+        <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;
+    }
+    .card-header h5 {
+        font-weight: 500;
+    }
+    .table thead th {
+        font-weight: 500;
+        font-size: 0.8rem;
+    }
+    .form-label {
+        font-weight: 500;
+        font-size: 0.9rem;
+    }
+    .card {
+        border-radius: 10px;
+    }
+    .card-header {
+        background-color: transparent;
+    }
+    .btn-primary {
+        background-color: #E74610;
+        border-color: #E74610;
+    }
+    .btn-primary:hover {
+        background-color: #E74610;
+        border-color: #E74610;
+    }
+    .sortable {
+        cursor: pointer;
+    }
+    .sortable:hover {
+        background-color: #f1f3f5;
+    }
+    .table {
+        font-size: 0.85rem;
+        width: 100%;
+        table-layout: auto;
+    }
+    .table th,
+    .table td {
+        padding: 0.5rem;
+        vertical-align: middle;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+    .table th:first-child,
+    .table td:first-child {
+        width: 40px;
+        text-align: center;
+    }
+    .table th:last-child,
+    .table td:last-child {
+        width: 120px;
+        text-align: center;
+    }
+    .table td:nth-child(5),
+    .table th:nth-child(5) {
+        width: 100px;
+    }
+    .table td:nth-child(6),
+    .table th:nth-child(6) {
+        max-width: 200px;
+    }
+    .table td:nth-child(7),
+    .table th:nth-child(7) {
+        width: 120px;
+    }
+    .edit-btn {
+        border-color: #E74610;
+        color: #E74610;
+    }
+    .edit-btn:hover {
+        background-color: #E74610;
+        border-color: #E74610;
+        color: #fff;
+    }
+    .table-hover tbody tr:hover {
+        cursor: pointer;
+        background-color: #f8f9fa;
+    }
+    @media (max-width: 576px) {
+        .table {
+            font-size: 0.75rem;
+        }
+        .table thead th {
+            font-size: 0.75rem;
+        }
+        .table th,
+        .table td {
+            padding: 0.3rem;
+        }
+        .btn-sm {
+            padding: 0.2rem 0.4rem;
+            font-size: 0.75rem;
+        }
+        .input-group-sm>.form-control {
+            font-size: 0.75rem;
+        }
+        .pagination-sm .page-link {
+            padding: 0.2rem 0.4rem;
+            font-size: 0.75rem;
+        }
+        .table td:nth-child(6) {
+            max-width: 150px;
+        }
+        .form-control,
+        .form-select {
+            font-size: 0.85rem;
+        }
+    }
+</style>
+
+<script>
+    const tableConfig = {
+        data: @json($data),
+        columns: @json($columns),
+        actions: @json($actions),
+        showCheckboxes: {{ json_encode($showCheckboxes) }},
+        showBatchDelete: {{ json_encode($showBatchDelete) }},
+        pageTitle: @json($pageTitle),
+        csrfToken: '{{ csrf_token() }}',
+        currentPage: {{ $currentPage }},
+        lastPage: {{ $lastPage }},
+        total: {{ $total }},
+    };
+
+    const rowsPerPage = 5; // Fixed at 5 per page
+    let currentPage = tableConfig.currentPage; // Initialize with server-side page
+    let filteredRows = [...tableConfig.data];
+    let originalRows = [...tableConfig.data].map(row => ({ ...row }));
+    let sortDirection = {};
+
+    function renderTable() {
+        const tableBody = document.getElementById('tableBody');
+        if (!tableBody) return;
+        tableBody.innerHTML = '';
+
+        // Use the data passed from the server (already paginated to 5)
+        const paginatedRows = filteredRows; // No client-side slicing needed
+
+        paginatedRows.forEach(row => {
+            const tr = document.createElement('tr');
+            tr.setAttribute('data-id', row.topup_uuid || row.id);
+            tr.classList.add('clickable-row');
+            let rowHtml = '';
+
+            if (tableConfig.showCheckboxes) {
+                rowHtml += `<td class="text-center"><input type="checkbox" class="rowCheckbox"></td>`;
+            }
+
+            tableConfig.columns.forEach(col => {
+                let value = row[col.key] || '';
+                rowHtml += `<td>${value}</td>`;
+            });
+
+            if (tableConfig.actions.length > 0) {
+                rowHtml += `<td class="text-center">`;
+                tableConfig.actions.forEach(action => {
+                    if (action === 'edit') {
+                        rowHtml += `
+                            <a href="{{ route('top-up.edit', '') }}/${row.topup_uuid || row.id}" class="btn btn-sm edit-btn me-1" title="Edit">
+                                <i class="fa-solid fa-pen-to-square"></i>
+                            </a>`;
+                    } else if (action === 'view') {
+                        rowHtml += `
+                            <a href="{{ route('top-up.show', '') }}/${row.topup_uuid || row.id}" class="btn btn-sm btn-outline-secondary me-1 view-btn" title="View">
+                                <i class="fa-solid fa-eye"></i>
+                            </a>`;
+                    } else if (action === 'delete') {
+                        rowHtml += `
+                            <button class="btn btn-sm btn-outline-danger delete-btn" title="Delete" data-id="${row.topup_uuid || row.id}">
+                                <i class="fa-solid fa-trash-can"></i>
+                            </button>`;
+                    }
+                });
+                rowHtml += `</td>`;
+            }
+
+            tr.innerHTML = rowHtml;
+            tableBody.appendChild(tr);
+        });
+
+        attachEventListeners();
+        updateDeleteButtonState();
+        updateNoDataMessage();
+    }
+
+    function renderPagination() {
+        const pagination = document.getElementById('pagination');
+        if (!pagination) return;
+        pagination.innerHTML = '';
+
+        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) {
+                window.location.href = `{{ route('top-up') }}?page=${currentPage - 1}`;
+            }
+        });
+        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();
+                window.location.href = `{{ route('top-up') }}?page=${i}`;
+            });
+            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) {
+                window.location.href = `{{ route('top-up') }}?page=${currentPage + 1}`;
+            }
+        });
+        pagination.appendChild(nextLi);
+    }
+
+    function updateNoDataMessage() {
+        const noDataMessage = document.getElementById('no-data-message');
+        if (noDataMessage) {
+            noDataMessage.style.display = filteredRows.length === 0 ? 'block' : 'none';
+        }
+    }
+
+    function attachEventListeners() {
+        // Search
+        const searchInput = document.getElementById('searchInput');
+        if (searchInput) {
+            searchInput.addEventListener('input', function() {
+                const searchTerm = this.value.toLowerCase();
+                filteredRows = tableConfig.data.filter(row => {
+                    return Object.values(row).some(value =>
+                        value && value.toString().toLowerCase().includes(searchTerm)
+                    );
+                });
+                currentPage = 1; // Reset to first page on search
+                renderTable();
+                renderPagination();
+            });
+        }
+
+        // Sort
+        document.querySelectorAll('.sortable').forEach(header => {
+            header.addEventListener('click', function() {
+                const columnIndex = parseInt(this.getAttribute('data-column')) - (tableConfig.showCheckboxes ? 1 : 0);
+                const key = tableConfig.columns[columnIndex].key;
+
+                sortDirection[columnIndex] = !sortDirection[columnIndex] ? 'asc' : sortDirection[columnIndex] === 'asc' ? 'desc' : 'asc';
+
+                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[columnIndex] === 'asc' ? 'fa-sort-up' : 'fa-sort-down');
+                }
+
+                filteredRows.sort((a, b) => {
+                    const aValue = (a[key] || '').toString().toLowerCase();
+                    const bValue = (b[key] || '').toString().toLowerCase();
+                    return sortDirection[columnIndex] === 'asc' ? aValue.localeCompare(bValue) : bValue.localeCompare(aValue);
+                });
+
+                currentPage = 1; // Reset to first page on sort
+                renderTable();
+                renderPagination();
+            });
+        });
+
+        // Clear Filters
+        const clearFilters = document.getElementById('clearFilters');
+        if (clearFilters) {
+            clearFilters.addEventListener('click', function() {
+                if (searchInput) searchInput.value = '';
+                document.querySelectorAll('.sortable i').forEach(icon => {
+                    icon.classList.remove('fa-sort-up', 'fa-sort-down');
+                    icon.classList.add('fa-sort');
+                });
+                sortDirection = {};
+                filteredRows = [...tableConfig.data];
+                currentPage = 1;
+                renderTable();
+                renderPagination();
+            });
+        }
+
+        // Checkboxes
+        if (tableConfig.showCheckboxes) {
+            const selectAll = document.getElementById('selectAll');
+            if (selectAll) {
+                selectAll.addEventListener('change', function() {
+                    const checkboxes = document.querySelectorAll('.rowCheckbox');
+                    checkboxes.forEach(checkbox => {
+                        checkbox.checked = this.checked;
+                    });
+                    updateDeleteButtonState();
+                });
+            }
+
+            document.querySelectorAll('.rowCheckbox').forEach(checkbox => {
+                checkbox.addEventListener('change', updateDeleteButtonState);
+            });
+        }
+
+        // Batch Delete
+        if (tableConfig.showBatchDelete) {
+            const deleteSelected = document.getElementById('deleteSelected');
+            if (deleteSelected) {
+                deleteSelected.addEventListener('click', function() {
+                    const checkboxes = document.querySelectorAll('.rowCheckbox:checked');
+                    const selectedIds = Array.from(checkboxes)
+                        .map(cb => cb.closest('tr').getAttribute('data-id'));
+
+                    if (selectedIds.length === 0) {
+                        alert('Please select at least one top-up to delete.');
+                        return;
+                    }
+
+                    if (confirm('Are you sure you want to delete the selected top-ups?')) {
+                        axios.delete('{{ route('top-up.batchDelete') }}', {
+                            headers: {
+                                'X-CSRF-TOKEN': tableConfig.csrfToken
+                            },
+                            data: {
+                                topup_uuid: selectedIds
+                            }
+                        }).then(response => {
+                            window.location.reload(); // Reload to fetch new data
+                        }).catch(error => {
+                            console.error('Batch delete error:', error);
+                            alert(error.response?.data?.message || 'Failed to delete top-ups.');
+                        });
+                    }
+                });
+            }
+        }
+
+        // Delete
+        document.querySelectorAll('.delete-btn').forEach(button => {
+            button.addEventListener('click', function(e) {
+                e.stopPropagation();
+                const topupId = this.getAttribute('data-id');
+                if (confirm('Are you sure you want to delete this top-up?')) {
+                    axios.delete(`{{ route('top-up.destroy', '') }}/${topupId}`, {
+                        headers: {
+                            'X-CSRF-TOKEN': tableConfig.csrfToken
+                        }
+                    }).then(response => {
+                        window.location.reload(); // Reload to fetch new data
+                    }).catch(error => {
+                        console.error('Delete error:', error);
+                        alert(error.response?.data?.message || 'Failed to delete top-up.');
+                    });
+                }
+            });
+        });
+
+        // Row click to view
+        document.querySelectorAll('.clickable-row').forEach(row => {
+            row.addEventListener('click', function(e) {
+                if (e.target.closest('.rowCheckbox, .edit-btn, .view-btn, .delete-btn')) {
+                    return;
+                }
+                const topupId = this.getAttribute('data-id');
+                window.location.href = `{{ route('top-up.show', '') }}/${topupId}`;
+            });
+        });
+    }
+
+    function updateDeleteButtonState() {
+        if (tableConfig.showBatchDelete) {
+            const checkboxes = document.querySelectorAll('.rowCheckbox');
+            const checkedCount = Array.from(checkboxes).filter(cb => cb.checked).length;
+            const deleteButton = document.getElementById('deleteSelected');
+            if (deleteButton) {
+                deleteButton.disabled = checkedCount < 1;
+            }
+        }
+    }
+
+    renderTable();
+    renderPagination();
+</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/components/user-management-component.blade.php b/resources/views/components/user-management-component.blade.php
index ddcf3c0..eddcc41 100644
--- a/resources/views/components/user-management-component.blade.php
+++ b/resources/views/components/user-management-component.blade.php
@@ -232,7 +232,6 @@
         .table thead .sortable i {
             font-size: 0.65rem;
         }
-        . personally identifiable information like names, addresses, or other sensitive data.
         .pagination-sm .page-link {
             padding: 0.2rem 0.4rem;
             font-size: 0.75rem;
@@ -321,12 +320,12 @@
                 tableConfig.actions.forEach(action => {
                     if (action === 'edit') {
                         rowHtml += `
-                            <a href="${'{{ route('user-management.edit', '') }}'}/${row.admin_uuid}" class="btn btn-sm edit-btn me-1" title="Edit">
+                            <a href="{{ route('user-management.edit', '') }}/${row.admin_uuid}" class="btn btn-sm edit-btn me-1" title="Edit">
                                 <i class="fa-solid fa-pen-to-square"></i>
                             </a>`;
                     } else if (action === 'view') {
                         rowHtml += `
-                            <a href="${'{{ route('user-management.show', '') }}'}/${row.admin_uuid}" class="btn btn-sm btn-outline-secondary me-1 view-btn" title="View">
+                            <a href="{{ route('user-management.show', '') }}/${row.admin_uuid}" class="btn btn-sm btn-outline-secondary me-1 view-btn" title="View">
                                 <i class="fa-solid fa-eye"></i>
                             </a>`;
                     } else if (action === 'delete') {
@@ -522,7 +521,7 @@
                             renderTable();
                             renderPagination();
                             if (selectAll) selectAll.checked = false;
-                            window.location.reload();
+                            window.location.reload(); // Reload to trigger session flash
                         }).catch(error => {
                             console.error('Batch delete error:', error);
                             alert(error.response?.data?.message || 'Failed to delete users. You may have included your own account.');
@@ -536,7 +535,7 @@
         document.querySelectorAll('.status-option').forEach(option => {
             option.addEventListener('click', function(e) {
                 e.preventDefault();
-                const newStatus = this.getAttribute('data-status');
+                const newStatus = this.getAttribute('data-status'); // 'active' or 'inactive'
                 const row = this.closest('tr');
                 const userId = row.getAttribute('data-id');
                 const statusText = row.querySelector('.status-text');
@@ -553,7 +552,7 @@
                         status: newStatus,
                         _token: tableConfig.csrfToken
                     }).then(response => {
-                        window.location.reload();
+                        window.location.reload(); // Reload to trigger session flash
                     }).catch(error => {
                         console.error('Status update error:', error);
                         alert(error.response?.data?.message || 'Failed to update status. You cannot update your own account.');
@@ -576,7 +575,7 @@
                         }
                     }).then(response => {
                         filteredRows = filteredRows.filter(row => row.admin_uuid !== userId);
-                        tableConfig.data = tableConfig.data.filter(row => row.admin_uuid !== userId);
+                        tableConfig.data = tableConfig.data.filter(row => !selectedIds.includes(row.admin_uuid));
                         originalRows = originalRows.filter(row => row.admin_uuid !== userId);
 
                         const maxPage = Math.ceil(filteredRows.length / rowsPerPage);
@@ -586,7 +585,7 @@
 
                         renderTable();
                         renderPagination();
-                        window.location.reload();
+                        window.location.reload(); // Reload to trigger session flash
                     }).catch(error => {
                         console.error('Delete error:', error);
                         alert(error.response?.data?.message || 'Failed to delete user. You cannot delete your own account.');
@@ -595,27 +594,6 @@
             });
         });
 
-       //Edit
-        document.querySelectorAll('.edit-btn').forEach(button => {
-            button.addEventListener('click', function(e) {
-                e.preventDefault();
-                const userId = this.getAttribute('data-id');
-                const href = this.getAttribute('href').replace(':id', userId);
-                window.location.href = href;
-            });
-        });
-
-        // View
-        document.querySelectorAll('.view-btn').forEach(button => {
-            button.addEventListener('click', function(e) {
-                e.preventDefault();
-                e.stopPropagation();
-                const href = this.getAttribute('href');
-                console.log('View redirect:', href); // Debug
-                window.location.href = href;
-            });
-        });
-
         // Row click to view
         document.querySelectorAll('.clickable-row').forEach(row => {
             row.addEventListener('click', function(e) {
@@ -623,9 +601,7 @@
                     return;
                 }
                 const userId = this.getAttribute('data-id');
-                const url = `{{ route('user-management.show', '') }}/${userId}`;
-                console.log('Row redirect:', url); // Debug
-                window.location.href = url;
+                window.location.href = `{{ route('user-management.show', '') }}/${userId}`;
             });
         });
     }
diff --git a/resources/views/pages/add-top-up.blade.php b/resources/views/pages/add-top-up.blade.php
index 781a58e..313b1ad 100644
--- a/resources/views/pages/add-top-up.blade.php
+++ b/resources/views/pages/add-top-up.blade.php
@@ -8,30 +8,52 @@
     </div>
     <div class="row justify-content-center">
         <div class="card-body p-3">
-            <form id="addTopUpForm">
+            @if (session('success'))
+                <div class="alert alert-success">
+                    {{ session('success') }}
+                </div>
+            @endif
+            @if (session('error'))
+                <div class="alert alert-danger">
+                    {{ session('error') }}
+                </div>
+            @endif
+            <form method="POST" action="{{ route('top-up.store') }}">
+                @csrf
                 <div class="mb-3">
                     <label for="freeCode" class="form-label">Free Code</label>
-                    <input type="text" class="form-control" id="freeCode" placeholder="Enter free code" required>
+                    <input type="text" class="form-control @error('freeCode') is-invalid @enderror" id="freeCode" name="freeCode" value="{{ $freeCode }}" readonly>
+                    @error('freeCode')
+                        <div class="invalid-feedback">{{ $message }}</div>
+                    @enderror
                 </div>
                 <div class="mb-3">
                     <label for="name" class="form-label">Name</label>
-                    <input type="text" class="form-control" id="name" placeholder="Enter name" required>
+                    <input type="text" class="form-control @error('name') is-invalid @enderror" id="name" name="name" placeholder="Enter name" value="{{ old('name') }}" required>
+                    @error('name')
+                        <div class="invalid-feedback">{{ $message }}</div>
+                    @enderror
                 </div>
                 <div class="mb-3">
                     <label for="value" class="form-label">Value</label>
-                    <input type="number" class="form-control" id="value" placeholder="Enter value" step="0.01" required>
+                    <input type="number" class="form-control @error('value') is-invalid @enderror" id="value" name="value" placeholder="Enter value" step="0.01" value="{{ old('value') }}" required>
+                    @error('value')
+                        <div class="invalid-feedback">{{ $message }}</div>
+                    @enderror
                 </div>
                 <div class="mb-3">
                     <label for="type" class="form-label">Type</label>
-                    <select class="form-select" id="type" required>
-                        <option value="" disabled selected>Select type</option>
-                        <option value="Prepaid">Prepaid</option>
-                        <option value="Postpaid">Postpaid</option>
-                        <option value="Bonus">Bonus</option>
+                    <select class="form-select @error('type') is-invalid @enderror" id="type" name="type" required>
+                       <option value="1">Prepaid</option>
+                        <option value="2">Postpaid</option>
+                        <option value="3">Bonus</option>
                     </select>
+                    @error('type')
+                        <div class="invalid-feedback">{{ $message }}</div>
+                    @enderror
                 </div>
                 <div class="d-flex justify-content-end mt-3">
-                    <button type="button" class="btn btn-outline-secondary me-2" style="margin-right:5px">Cancel</button>
+                    <a href="{{ route('top-up') }}" class="btn btn-outline-secondary me-2" style="margin-right:5px">Cancel</a>
                     <button type="submit" class="btn btn-primary">Add Top-Up</button>
                 </div>
             </form>
@@ -51,43 +73,8 @@
             font-size: 0.9rem;
             width: 100%;
         }
+        .alert {
+            font-size: 0.9rem;
+        }
     </style>
-
-    <script>
-        document.getElementById('addTopUpForm').addEventListener('submit', function(e) {
-            e.preventDefault();
-
-            const freeCode = document.getElementById('freeCode').value;
-            const name = document.getElementById('name').value;
-            const value = document.getElementById('value').value;
-            const type = document.getElementById('type').value;
-
-            if (!freeCode || !name || !value || !type) {
-                alert('Please fill out all fields.');
-                return;
-            }
-
-            // Simulate adding top-up (frontend-only)
-            const newTopUp = {
-                id: Date.now(),
-                freeCode: freeCode,
-                name: name,
-                value: value,
-                type: type
-            };
-
-            // Store in sessionStorage
-            let topups = JSON.parse(sessionStorage.getItem('topups') || '[]');
-            topups.push(newTopUp);
-            sessionStorage.setItem('topups', JSON.stringify(topups));
-
-            alert('Top-Up added successfully!');
-            window.location.href = '/top-up';
-        });
-
-        // Cancel button click handler
-        document.querySelector('.btn-outline-secondary').addEventListener('click', function() {
-            window.location.href = '/top-up';
-        });
-    </script>
 @endsection
\ No newline at end of file
diff --git a/resources/views/pages/edit-top-up.blade.php b/resources/views/pages/edit-top-up.blade.php
new file mode 100644
index 0000000..068ac3a
--- /dev/null
+++ b/resources/views/pages/edit-top-up.blade.php
@@ -0,0 +1,81 @@
+@extends('layouts.app')
+
+@section('page_title', 'Edit Top-Up')
+
+@section('content')
+    <div class="card-header border-0 bg-transparent py-2">
+        <h5 class="mb-0 fw-bold text-dark" style="font-size: 1.25rem;">Edit Top-Up</h5>
+    </div>
+    <div class="row justify-content-center">
+        <div class="card-body p-3">
+            @if (session('success'))
+                <div class="alert alert-success">
+                    {{ session('success') }}
+                </div>
+            @endif
+            @if (session('error'))
+                <div class="alert alert-danger">
+                    {{ session('error') }}
+                </div>
+            @endif
+            <form method="POST" action="{{ route('top-up.update', $topup['topup_uuid']) }}">
+                @csrf
+                @method('PUT')
+                <div class="mb-3">
+                    <label for="freeCode" class="form-label">Free Code</label>
+                    <input type="text" class="form-control @error('freeCode') is-invalid @enderror" id="freeCode" name="freeCode" value="{{ old('freeCode', $topup['freeCode']) }}" required>
+                    @error('freeCode')
+                        <div class="invalid-feedback">{{ $message }}</div>
+                    @enderror
+                </div>
+                <div class="mb-3">
+                    <label for="name" class="form-label">Name</label>
+                    <input type="text" class="form-control @error('name') is-invalid @enderror" id="name" name="name" value="{{ old('name', $topup['name']) }}" required>
+                    @error('name')
+                        <div class="invalid-feedback">{{ $message }}</div>
+                    @enderror
+                </div>
+                <div class="mb-3">
+                    <label for="value" class="form-label">Value</label>
+                    <input type="number" class="form-control @error('value') is-invalid @enderror" id="value" name="value" step="0.01" value="{{ old('value', $topup['value']) }}" required>
+                    @error('value')
+                        <div class="invalid-feedback">{{ $message }}</div>
+                    @enderror
+                </div>
+                <div class="mb-3">
+                    <label for="type" class="form-label">Type</label>
+                    <select class="form-select @error('type') is-invalid @enderror" id="type" name="type" required>
+                        <option value="Prepaid" {{ old('type', $topup['type']) == 'Prepaid' ? 'selected' : '' }}>Prepaid</option>
+                        <option value="Postpaid" {{ old('type', $topup['type']) == 'Postpaid' ? 'selected' : '' }}>Postpaid</option>
+                        <option value="Bonus" {{ old('type', $topup['type']) == 'Bonus' ? 'selected' : '' }}>Bonus</option>
+                    </select>
+                    @error('type')
+                        <div class="invalid-feedback">{{ $message }}</div>
+                    @enderror
+                </div>
+                <div class="d-flex justify-content-end mt-3">
+                    <a href="{{ route('top-up') }}" class="btn btn-outline-secondary me-2" style="margin-right:5px">Cancel</a>
+                    <button type="submit" class="btn btn-primary">Update Top-Up</button>
+                </div>
+            </form>
+        </div>
+    </div>
+
+    <style>
+        .card {
+            border-radius: 5px;
+            border: 1px solid #dee2e6;
+        }
+        .form-label {
+            font-size: 0.95rem;
+        }
+        .form-control,
+        .form-select {
+            font-size: 0.9rem;
+            width: 100%;
+        }
+        .alert {
+            font-size: 0.9rem;
+        }
+    </style>
+@endsection
\ No newline at end of file
diff --git a/resources/views/pages/top-up.blade.php b/resources/views/pages/top-up.blade.php
index b29679a..0c07ea5 100644
--- a/resources/views/pages/top-up.blade.php
+++ b/resources/views/pages/top-up.blade.php
@@ -3,78 +3,39 @@
 @section('page_title', 'Top-Up')
 
 @section('content')
-    @php
-        $topups = [
-            [
-                'id' => 1,
-                'freeCode' => 'CODE123',
-                'name' => 'Monthly Top-Up',
-                'value' => '100.00',
-                'type' => 'Prepaid'
+    <div id="topup-table">
+        @if (session('success'))
+            <div class="alert alert-success alert-dismissible fade show" role="alert">
+                {{ session('success') }}
+                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+            </div>
+        @endif
+        @if (session('error'))
+            <div class="alert alert-danger alert-dismissible fade show" role="alert">
+                {{ session('error') }}
+                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+            </div>
+        @endif
+        @include('components.top-up-component', [
+            'pageTitle' => 'Top-Up',
+            'data' => $topups,
+            'columns' => [
+                ['name' => 'Free Code', 'key' => 'freeCode', 'sortable' => true],
+                ['name' => 'Name', 'key' => 'name', 'sortable' => true],
+                ['name' => 'Value', 'key' => 'value', 'sortable' => true],
+                ['name' => 'Type', 'key' => 'type', 'sortable' => true],
             ],
-            [
-                'id' => 2,
-                'freeCode' => 'CODE456',
-                'name' => 'Annual Plan',
-                'value' => '500.00',
-                'type' => 'Postpaid'
-            ],
-            [
-                'id' => 3,
-                'freeCode' => 'CODE789',
-                'name' => 'Welcome Bonus',
-                'value' => '50.00',
-                'type' => 'Bonus'
-            ],
-            [
-                'id' => 4,
-                'freeCode' => 'CODE101',
-                'name' => 'Data Boost',
-                'value' => '200.00',
-                'type' => 'Prepaid'
-            ],
-            [
-                'id' => 5,
-                'freeCode' => 'CODE202',
-                'name' => 'Family Plan',
-                'value' => '300.00',
-                'type' => 'Postpaid'
-            ],
-            [
-                'id' => 6,
-                'freeCode' => 'CODE303',
-                'name' => 'Loyalty Credit',
-                'value' => '75.00',
-                'type' => 'Bonus'
-            ]
-        ];
-    @endphp
-
-    @include('components.table-component', [
-        'pageTitle' => 'Top-Up',
-        'data' => $topups,
-        'columns' => [
-            ['name' => 'Free Code', 'key' => 'freeCode', 'sortable' => true],
-            ['name' => 'Name', 'key' => 'name', 'sortable' => true],
-            ['name' => 'Value', 'key' => 'value', 'sortable' => true],
-            ['name' => 'Type', 'key' => 'type', 'sortable' => true]
-        ],
-        'actions' => ['edit', 'view', 'delete'],
-        'showAddButton' => true,
-        'addButtonUrl' => '/add-top-up',
-        'showCheckboxes' => true,
-        'showBatchDelete' => true,
-        'showEditModal' => true,
-        'showViewModal' => true
-    ])
-
-    <script>
-        const storedTopups = JSON.parse(sessionStorage.getItem('topups') || '[]');
-        if (storedTopups.length > 0) {
-            const tableConfig = window.tableConfig || {};
-            tableConfig.data = [...tableConfig.data, ...storedTopups];
-            window.renderTable();
-            window.renderPagination();
-        }
-    </script>
+            'actions' => ['view', 'edit', 'delete'],
+            'showAddButton' => true,
+            'addButtonUrl' => route('top-up.create'),
+            'showCheckboxes' => true,
+            'showBatchDelete' => true,
+            'currentPage' => $currentPage ?? 1,
+            'lastPage' => $lastPage ?? 1,
+            'total' => $total ?? 0,
+        ])
+        <div id="no-data-message" style="display: {{ empty($topups) ? 'block' : 'none' }}; text-align: center; margin-top: 20px;">
+            <p>No top-ups found.</p>
+        </div>
+    </div>
 @endsection
\ No newline at end of file
diff --git a/resources/views/pages/view-top-up.blade.php b/resources/views/pages/view-top-up.blade.php
new file mode 100644
index 0000000..d706f72
--- /dev/null
+++ b/resources/views/pages/view-top-up.blade.php
@@ -0,0 +1,47 @@
+@extends('layouts.app')
+
+@section('page_title', 'View Top-Up')
+
+@section('content')
+    <div class="card-header border-0 bg-transparent py-2">
+        <h5 class="mb-0 fw-bold text-dark" style="font-size: 1.25rem;">View Top-Up</h5>
+    </div>
+    <div class="row justify-content-center">
+        <div class="card-body p-3">
+            <div class="mb-3">
+                <label class="form-label">Free Code</label>
+                <input type="text" class="form-control" value="{{ $topup['freeCode'] }}" readonly>
+            </div>
+            <div class="mb-3">
+                <label class="form-label">Name</label>
+                <input type="text" class="form-control" value="{{ $topup['name'] }}" readonly>
+            </div>
+            <div class="mb-3">
+                <label class="form-label">Value</label>
+                <input type="text" class="form-control" value="{{ $topup['value'] }}" readonly>
+            </div>
+            <div class="mb-3">
+                <label class="form-label">Type</label>
+                <input type="text" class="form-control" value="{{ $topup['type'] }}" readonly>
+            </div>
+            <div class="d-flex justify-content-end mt-3">
+                <a href="{{ route('top-up') }}" class="btn btn-outline-secondary">Back</a>
+            </div>
+        </div>
+    </div>
+
+    <style>
+        .card {
+            border-radius: 5px;
+            border: 1px solid #dee2e6;
+        }
+        .form-label {
+            font-size: 0.95rem;
+        }
+        .form-control {
+            font-size: 0.9rem;
+            width: 100%;
+            background-color: #f8f9fa;
+        }
+    </style>
+@endsection
\ No newline at end of file
diff --git a/routes/web.php b/routes/web.php
index f4452c2..c140fb0 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -5,6 +5,7 @@ use Illuminate\Support\Facades\Http;
 use App\Http\Controllers\AuthController;
 use App\Http\Controllers\UserManagementController;
 use App\Http\Controllers\PhotoSliderViewController;
+use App\Http\Controllers\TopUpController;
 
 
 
@@ -165,4 +166,14 @@ Route::get('user-management/{uuid}/edit', [UserManagementController::class, 'edi
 Route::put('user-management/{uuid}', [UserManagementController::class, 'update'])->name('user-management.update');
 Route::delete('user-management/{uuid}', [UserManagementController::class, 'destroy'])->name('user-management.destroy');
 Route::delete('user-management/batch', [UserManagementController::class, 'batchDelete'])->name('user-management.batchDelete');
-Route::post('user-management/{uuid}/status', [UserManagementController::class, 'changeStatus'])->name('user-management.changeStatus');
\ No newline at end of file
+Route::post('user-management/{uuid}/status', [UserManagementController::class, 'changeStatus'])->name('user-management.changeStatus');
+
+//TopUp
+Route::get('/top-up', [TopUpController::class, 'index'])->name('top-up');
+Route::get('/top-up/create', [TopUpController::class, 'create'])->name('top-up.create');
+Route::post('/top-up', [TopUpController::class, 'store'])->name('top-up.store');
+Route::get('/top-up/{uuid}', [TopUpController::class, 'show'])->name('top-up.show');
+Route::get('/top-up/{uuid}/edit', [TopUpController::class, 'edit'])->name('top-up.edit');
+Route::put('/top-up/{uuid}', [TopUpController::class, 'update'])->name('top-up.update');
+Route::delete('/top-up/{uuid}', [TopUpController::class, 'destroy'])->name('top-up.destroy');
+Route::delete('/top-up/batch', [TopUpController::class, 'batchDelete'])->name('top-up.batchDelete');