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

add top-up, edit, view, delete, pagination, search, filter works

This commit is contained in:
armiejean 2025-05-16 00:53:36 +08:00
parent f2e522c0f7
commit d2a5e1cd24
9 changed files with 1062 additions and 921 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

357
app/Http/Controllers/TopUpController.php Normal file
View File

@ -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.');
}
}
}

767
resources/views/components/table-component.blade.php
View File

@ -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>

488
resources/views/components/top-up-component.blade.php Normal file
View File

@ -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>

40
resources/views/components/user-management-component.blade.php
View File

@ -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}`;
});
});
}

83
resources/views/pages/add-top-up.blade.php
View File

@ -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%;
}
</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;
.alert {
font-size: 0.9rem;
}
// 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>
</style>
@endsection

81
resources/views/pages/edit-top-up.blade.php Normal file
View File

@ -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

87
resources/views/pages/top-up.blade.php
View File

@ -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'
],
[
'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', [
<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]
['name' => 'Type', 'key' => 'type', 'sortable' => true],
],
'actions' => ['edit', 'view', 'delete'],
'actions' => ['view', 'edit', 'delete'],
'showAddButton' => true,
'addButtonUrl' => '/add-top-up',
'addButtonUrl' => route('top-up.create'),
'showCheckboxes' => true,
'showBatchDelete' => true,
'showEditModal' => true,
'showViewModal' => true
'currentPage' => $currentPage ?? 1,
'lastPage' => $lastPage ?? 1,
'total' => $total ?? 0,
])
<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>
<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

47
resources/views/pages/view-top-up.blade.php Normal file
View File

@ -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

11
routes/web.php
View File

@ -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;
@ -166,3 +167,13 @@ Route::put('user-management/{uuid}', [UserManagementController::class, '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');
//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');