1) user invitation 2) app access control 3) txn quota guard

This commit is contained in:
Thanakorn S
2026-05-21 11:42:47 +07:00
parent 8ec2e89f79
commit 6eeebfeacb
50 changed files with 1062 additions and 113 deletions
+135 -49
View File
@@ -68,13 +68,14 @@
<th class="ps-4">User</th>
<th>Email</th>
<th>Role</th>
<th>App Access</th>
<th>Joined</th>
<th class="text-end pe-4">Actions</th>
</tr>
</thead>
<tbody id="users_tbody">
<tr>
<td colspan="5" class="text-center py-5 text-muted">
<td colspan="6" class="text-center py-5 text-muted">
<i class="ti ti-loader-2 fs-2 d-block mb-2"></i>Loading…
</td>
</tr>
@@ -118,6 +119,13 @@
<option value="viewer">Viewer — read-only access</option>
</select>
</div>
<div class="mb-3">
<label class="form-label">App Access <span class="text-danger">*</span></label>
<select class="form-select" id="invite_app_access"></select>
<div id="invite_app_access_note" class="form-text text-warning mt-1" style="display:none;">
<i class="ti ti-info-circle me-1"></i>Single app license — access is limited to <strong id="invite_app_access_label"></strong>.
</div>
</div>
<div class="alert alert-light border small mb-0">
<div class="fw-semibold mb-1">Role permissions</div>
<ul class="mb-0 ps-3">
@@ -139,13 +147,13 @@
<!-- ═══════════════════════════════════════════════
EDIT ROLE MODAL
EDIT ACCESS MODAL
═══════════════════════════════════════════════ -->
<div class="modal fade" id="editRoleModal" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"><i class="ti ti-shield-half me-2"></i>Change Role</h5>
<h5 class="modal-title"><i class="ti ti-shield-half me-2"></i>Edit Access</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
@@ -166,6 +174,13 @@
<option value="viewer">Viewer</option>
</select>
</div>
<div class="mb-3">
<label class="form-label">App Access</label>
<select class="form-select" id="edit_app_access"></select>
<div id="edit_app_access_note" class="form-text text-warning mt-1" style="display:none;">
<i class="ti ti-info-circle me-1"></i>Single app license — access is limited to <strong id="edit_app_access_label"></strong>.
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-ghost-secondary" data-bs-dismiss="modal">Cancel</button>
@@ -182,10 +197,12 @@
// ═══════════════════════════════════════════════
// State
// ═══════════════════════════════════════════════
const api = '<?php echo $server_url?>setting/api/engine/';
const img_base = '<?php echo $server_url?>uploads/profile/';
const avatar_ph = '<?php echo $server_url?>assets/images/logo.svg';
let _users_data = []; // full list from server
const api = '<?php echo $server_url?>setting/api/engine/';
const img_base = '<?php echo $server_url?>uploads/profile/';
const avatar_ph = '<?php echo $server_url?>assets/images/logo.svg';
const owner_app_access = '<?php echo htmlspecialchars($_SESSION['login_app_access'] ?? 'wms', ENT_QUOTES); ?>';
const APP_REGISTRY = <?php echo json_encode($app_registry); ?>;
let _users_data = [];
// ═══════════════════════════════════════════════
@@ -222,7 +239,7 @@
if (!rows.length) {
tbody.html(`
<tr>
<td colspan="5" class="text-center py-5 text-muted">
<td colspan="6" class="text-center py-5 text-muted">
<i class="ti ti-users-group fs-2 d-block mb-2"></i>No users found.
</td>
</tr>`);
@@ -230,26 +247,40 @@
}
const html = rows.map(u => {
const avatar = u.profile_picture
? `<img src="${img_base}${u.profile_picture}" class="rounded-circle border" style="width:36px;height:36px;object-fit:cover;" alt="">`
: `<span class="avatar-initials rounded-circle d-inline-flex align-items-center justify-content-center bg-light border fw-semibold text-secondary"
style="width:36px;height:36px;font-size:13px;">${initials(u.name, u.surname)}</span>`;
const avatar = u.profile_picture
? `<img src="${img_base}${u.profile_picture}" class="rounded-circle border" style="width:36px;height:36px;object-fit:cover;" alt="">`
: `<span class="avatar-initials rounded-circle d-inline-flex align-items-center justify-content-center bg-light border fw-semibold text-secondary"
style="width:36px;height:36px;font-size:13px;">${initials(u.name, u.surname)}</span>`;
const role_badge = role_html(u.role);
const role_badge = role_html(u.role);
const access_badge = app_access_html(u.app_access);
const joined = u.created_at
? new Date(u.created_at).toLocaleDateString('en-GB', {day:'2-digit', month:'short', year:'numeric'})
: '—';
? new Date(u.created_at).toLocaleDateString('en-GB', {day:'2-digit', month:'short', year:'numeric'})
: '—';
const is_pending = u.status === 'pending' && u.is_pending_invite == 1;
// Build action buttons — owner cannot be edited or removed
let actions = '';
if (u.role !== 'owner') {
if (u.role === 'owner') {
// owner — no actions
} else if (is_pending) {
actions += `
<button class="btn btn-sm btn-ghost-secondary" title="Change role"
<button class="btn btn-sm btn-ghost-secondary" title="Resend invitation"
onclick="resend_invite(${u.map_id}, '${esc(u.email)}')">
<i class="ti ti-send"></i>
</button>`;
actions += `
<button class="btn btn-sm btn-ghost-danger" title="Cancel invitation"
onclick="remove_user(${u.map_id}, '${esc(u.email)}')">
<i class="ti ti-user-minus"></i>
</button>`;
} else {
actions += `
<button class="btn btn-sm btn-ghost-secondary" title="Edit access"
onclick="open_edit_modal(${u.map_id})">
<i class="ti ti-shield-half"></i>
</button>`;
actions += `
<button class="btn btn-sm btn-ghost-danger" title="Remove user"
onclick="remove_user(${u.map_id}, '${esc(u.name)} ${esc(u.surname)}')">
@@ -257,6 +288,10 @@
</button>`;
}
const display_role = is_pending
? `<span class="badge bg-warning text-dark"><i class="ti ti-clock me-1"></i>Pending Invite</span>`
: role_badge;
return `
<tr data-role="${u.role}"
data-search="${esc(u.name)} ${esc(u.surname)} ${esc(u.email)}">
@@ -264,13 +299,14 @@
<div class="d-flex align-items-center gap-3">
${avatar}
<div>
<div class="fw-semibold lh-sm">${esc(u.name)} ${esc(u.surname)}</div>
<div class="small" style="color:#6c757d;">@${esc(u.username)}</div>
<div class="fw-semibold lh-sm">${is_pending ? '—' : esc(u.name) + ' ' + esc(u.surname)}</div>
<div class="small" style="color:#6c757d;">${is_pending ? esc(u.email) : '@' + esc(u.username)}</div>
</div>
</div>
</td>
<td style="color:#495057;">${esc(u.email)}</td>
<td>${role_badge}</td>
<td>${display_role}</td>
<td>${is_pending ? '—' : access_badge}</td>
<td style="color:#495057;">${joined}</td>
<td class="text-end pe-4">
<div class="d-flex justify-content-end gap-1">${actions}</div>
@@ -305,26 +341,20 @@
function open_invite_modal() {
$('#invite_email').val('').removeClass('is-invalid is-valid');
$('#invite_role').val('').removeClass('is-invalid');
build_app_access_select('invite_app_access', 'invite_app_access_note', 'invite_app_access_label', null);
$('#inviteModal').modal('show');
}
function send_invite() {
const email = $('#invite_email').val().trim();
const role = $('#invite_role').val();
let valid = true;
const email = $('#invite_email').val().trim();
const role = $('#invite_role').val();
const app_access = $('#invite_app_access').val();
let valid = true;
if (!email) {
$('#invite_email').addClass('is-invalid');
valid = false;
} else {
$('#invite_email').removeClass('is-invalid');
}
if (!role) {
$('#invite_role').addClass('is-invalid');
valid = false;
} else {
$('#invite_role').removeClass('is-invalid');
}
if (!email) { $('#invite_email').addClass('is-invalid'); valid = false; }
else { $('#invite_email').removeClass('is-invalid'); }
if (!role) { $('#invite_role').addClass('is-invalid'); valid = false; }
else { $('#invite_role').removeClass('is-invalid'); }
if (!valid) return;
ajax_request({
@@ -332,20 +362,18 @@
autoPrepare: true,
checkRequired: 0,
action: 'create',
data: { invite_email: email, invite_role: role },
data: { invite_email: email, invite_role: role, invite_app_access: app_access },
onSuccess: function (r) {
$('#inviteModal').modal('hide');
bootbox.alert(r.message || 'Invitation sent.');
bootbox.alert(r.message || 'User added.');
load_users();
},
});
}
// ═══════════════════════════════════════════════
// Edit role
// Edit access
// ═══════════════════════════════════════════════
function open_edit_modal(map_id) {
const u = _users_data.find(x => x.map_id == map_id);
@@ -356,6 +384,7 @@
$('#edit_email_display').text(u.email);
$('#edit_role').val(u.role);
$('#edit_avatar').attr('src', u.profile_picture ? img_base + u.profile_picture : avatar_ph);
build_app_access_select('edit_app_access', 'edit_app_access_note', 'edit_app_access_label', u.app_access);
$('#editRoleModal').modal('show');
}
@@ -366,10 +395,10 @@
autoPrepare: true,
checkRequired: 0,
action: 'update',
data: { map_id: $('#edit_map_id').val(), role: $('#edit_role').val() },
data: { map_id: $('#edit_map_id').val(), role: $('#edit_role').val(), app_access: $('#edit_app_access').val() },
onSuccess: function (r) {
$('#editRoleModal').modal('hide');
bootbox.alert(r.message || 'Role updated.');
bootbox.alert(r.message || 'Access updated.');
load_users();
},
});
@@ -397,6 +426,26 @@
}
// ═══════════════════════════════════════════════
// Resend invite
// ═══════════════════════════════════════════════
function resend_invite(map_id, email) {
bootbox.confirm(`Resend invitation to <strong>${esc(email)}</strong>?`, function (ok) {
if (!ok) return;
ajax_request({
url: api + 'manage_users.php',
autoPrepare: true,
checkRequired: 0,
action: 'resend',
data: { map_id: map_id },
onSuccess: function (r) {
bootbox.alert(r.message || 'Invitation resent.');
},
});
});
}
// ═══════════════════════════════════════════════
// Helpers
// ═══════════════════════════════════════════════
@@ -413,15 +462,52 @@
function role_html(role) {
const map = {
owner: ['bg-dark', 'ti-crown', 'Owner'],
admin: ['bg-primary', 'ti-shield-check','Admin'],
staff: ['bg-info', 'ti-tool', 'Staff'],
viewer: ['bg-secondary','ti-eye', 'Viewer'],
owner: ['bg-dark', 'ti-crown', 'Owner'],
admin: ['bg-primary', 'ti-shield-check', 'Admin'],
staff: ['bg-info', 'ti-tool', 'Staff'],
viewer: ['bg-secondary', 'ti-eye', 'Viewer'],
};
const [cls, icon, label] = map[role] || ['bg-label-secondary','ti-user','Unknown'];
const [cls, icon, label] = map[role] || ['bg-label-secondary', 'ti-user', 'Unknown'];
return `<span class="badge ${cls}"><i class="ti ${icon} me-1"></i>${label}</span>`;
}
function app_access_label(access) {
if (access === 'all') return 'All Apps';
return APP_REGISTRY[access]?.label || access;
}
function app_access_html(access) {
if (access === 'all') {
return `<span class="badge bg-secondary"><i class="ti ti-apps me-1"></i>All Apps</span>`;
}
const app = APP_REGISTRY[access];
if (!app) return `<span class="badge bg-label-secondary">${access || '—'}</span>`;
return `<span class="badge ${app.color}"><i class="ti ${app.icon} me-1"></i>${app.label}</span>`;
}
// Populate and lock/unlock an app_access <select> based on the owner's license.
// Disabled with a notice when owner has a single-app license; enabled when 'all'.
// Adding a new app to $app_registry in config.php automatically appears here.
function build_app_access_select(select_id, note_id, label_id, current_val) {
const $sel = $('#' + select_id);
const $note = $('#' + note_id);
const $lbl = $('#' + label_id);
if (owner_app_access === 'all') {
const options = Object.entries(APP_REGISTRY)
.map(([key, app]) => `<option value="${key}">${app.label}</option>`)
.join('') + `<option value="all">All Apps</option>`;
$sel.prop('disabled', false).html(options).val(current_val || Object.keys(APP_REGISTRY)[0]);
$note.hide();
} else {
$sel.prop('disabled', true)
.html(`<option value="${owner_app_access}">${app_access_label(owner_app_access)}</option>`)
.val(owner_app_access);
$lbl.text(app_access_label(owner_app_access));
$note.show();
}
}
</script>
</body>