515 lines
21 KiB
PHP
515 lines
21 KiB
PHP
<?php
|
|
session_start();
|
|
require '../config.php';
|
|
if (!in_array($_SESSION['login_role'] ?? 'viewer', ['owner', 'admin'], true)) {
|
|
http_response_code(403);
|
|
exit('Access denied.');
|
|
}
|
|
require '../include_header.php';
|
|
?>
|
|
|
|
<body>
|
|
<?php require '../include_topbar.php'; ?>
|
|
<?php require '../include_setting_sidebar.php'; ?>
|
|
|
|
<main id="content" class="content py-15">
|
|
<div class="container-fluid">
|
|
|
|
<!-- Page header -->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center mb-6 gap-3">
|
|
<div>
|
|
<h1 class="fs-3 mb-1">Users Access</h1>
|
|
<p class="mb-0">Manage team members and their roles in your company</p>
|
|
</div>
|
|
<div class="d-flex gap-2">
|
|
<button class="btn btn-primary" onclick="open_invite_modal()">
|
|
<i class="ti ti-user-plus me-1"></i>Add User
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Users table card -->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-body p-0">
|
|
|
|
<!-- Toolbar -->
|
|
<div class="d-flex align-items-center gap-3 px-4 py-3 border-bottom">
|
|
<div class="flex-grow-1" style="max-width:320px;">
|
|
<div class="input-group input-group-sm">
|
|
<span class="input-group-text bg-transparent border-end-0">
|
|
<i class="ti ti-search text-muted"></i>
|
|
</span>
|
|
<input type="text" id="search_input" class="form-control border-start-0 ps-0"
|
|
placeholder="Search by name or email…" oninput="filter_table()">
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<select id="filter_role" class="form-select form-select-sm" onchange="filter_table()" style="min-width:130px;">
|
|
<option value="">All roles</option>
|
|
<option value="owner">Owner</option>
|
|
<option value="admin">Admin</option>
|
|
<option value="staff">Staff</option>
|
|
<option value="viewer">Viewer</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Table -->
|
|
<div class="table-responsive">
|
|
<table class="table table-hover align-middle mb-0" id="users_table">
|
|
<thead class="table-light">
|
|
<tr>
|
|
<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="6" class="text-center py-5 text-muted">
|
|
<i class="ti ti-loader-2 fs-2 d-block mb-2"></i>Loading…
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<?php require '../include_ending.php'; ?>
|
|
</main>
|
|
|
|
|
|
<!-- ═══════════════════════════════════════════════
|
|
INVITE MODAL
|
|
═══════════════════════════════════════════════ -->
|
|
<div class="modal fade" id="inviteModal" 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-user-plus me-2"></i>Add User</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="mb-3">
|
|
<label class="form-label">Email Address <span class="text-danger">*</span></label>
|
|
<input type="email" class="form-control" id="invite_email"
|
|
placeholder="user@example.com">
|
|
<div class="form-text">Enter the email address of a registered user.</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Role <span class="text-danger">*</span></label>
|
|
<select class="form-select" id="invite_role" required>
|
|
<option value="">— Select role —</option>
|
|
<option value="admin">Admin — full access except billing</option>
|
|
<option value="staff">Staff — manage inventory & orders</option>
|
|
<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">
|
|
<li><strong>Admin</strong> — manage users, settings, all modules</li>
|
|
<li><strong>Staff</strong> — manage inventory, ICS, orders</li>
|
|
<li><strong>Viewer</strong> — view-only access across all modules</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn btn-ghost-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
<button class="btn btn-primary" onclick="send_invite()">
|
|
<i class="ti ti-user-plus me-1"></i>Add User
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- ═══════════════════════════════════════════════
|
|
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>Edit Access</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<input type="hidden" id="edit_map_id">
|
|
<div class="d-flex align-items-center gap-3 mb-4">
|
|
<img id="edit_avatar" src="" alt=""
|
|
class="rounded-circle border" style="width:48px;height:48px;object-fit:cover;">
|
|
<div>
|
|
<div class="fw-semibold" id="edit_username">—</div>
|
|
<div class="text-muted small" id="edit_email_display">—</div>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Role</label>
|
|
<select class="form-select" id="edit_role">
|
|
<option value="admin">Admin</option>
|
|
<option value="staff">Staff</option>
|
|
<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>
|
|
<button class="btn btn-primary" onclick="save_role()">
|
|
<i class="ti ti-device-floppy me-1"></i>Save
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<script>
|
|
// ═══════════════════════════════════════════════
|
|
// 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';
|
|
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 = [];
|
|
|
|
|
|
// ═══════════════════════════════════════════════
|
|
// On load
|
|
// ═══════════════════════════════════════════════
|
|
$(function () {
|
|
load_users();
|
|
});
|
|
|
|
|
|
// ═══════════════════════════════════════════════
|
|
// Load users
|
|
// ═══════════════════════════════════════════════
|
|
function load_users() {
|
|
return ajax_request({
|
|
url: api + 'retrieve_users.php',
|
|
autoPrepare: true,
|
|
checkRequired: 0,
|
|
action: 'read',
|
|
onSuccess: function (r) {
|
|
_users_data = r.output || [];
|
|
render_table(_users_data);
|
|
},
|
|
});
|
|
}
|
|
|
|
|
|
// ═══════════════════════════════════════════════
|
|
// Render table
|
|
// ═══════════════════════════════════════════════
|
|
function render_table(rows) {
|
|
const tbody = $('#users_tbody');
|
|
|
|
if (!rows.length) {
|
|
tbody.html(`
|
|
<tr>
|
|
<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>`);
|
|
return;
|
|
}
|
|
|
|
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 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'})
|
|
: '—';
|
|
|
|
const is_pending = u.status === 'pending' && u.is_pending_invite == 1;
|
|
|
|
let actions = '';
|
|
if (u.role === 'owner') {
|
|
// owner — no actions
|
|
} else if (is_pending) {
|
|
actions += `
|
|
<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)}')">
|
|
<i class="ti ti-user-minus"></i>
|
|
</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)}">
|
|
<td class="ps-4">
|
|
<div class="d-flex align-items-center gap-3">
|
|
${avatar}
|
|
<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>${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>
|
|
</td>
|
|
</tr>`;
|
|
}).join('');
|
|
|
|
tbody.html(html);
|
|
}
|
|
|
|
|
|
// ═══════════════════════════════════════════════
|
|
// Filter (client-side)
|
|
// ═══════════════════════════════════════════════
|
|
function filter_table() {
|
|
const kw = $('#search_input').val().toLowerCase();
|
|
const role = $('#filter_role').val();
|
|
|
|
const filtered = _users_data.filter(u => {
|
|
const haystack = `${u.name} ${u.surname} ${u.email}`.toLowerCase();
|
|
return (!kw || haystack.includes(kw))
|
|
&& (!role || u.role === role);
|
|
});
|
|
|
|
render_table(filtered);
|
|
}
|
|
|
|
|
|
// ═══════════════════════════════════════════════
|
|
// Invite
|
|
// ═══════════════════════════════════════════════
|
|
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();
|
|
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 (!valid) return;
|
|
|
|
ajax_request({
|
|
url: api + 'manage_users.php',
|
|
autoPrepare: true,
|
|
checkRequired: 0,
|
|
action: 'create',
|
|
data: { invite_email: email, invite_role: role, invite_app_access: app_access },
|
|
onSuccess: function (r) {
|
|
$('#inviteModal').modal('hide');
|
|
bootbox.alert(r.message || 'User added.');
|
|
load_users();
|
|
},
|
|
});
|
|
}
|
|
|
|
|
|
// ═══════════════════════════════════════════════
|
|
// Edit access
|
|
// ═══════════════════════════════════════════════
|
|
function open_edit_modal(map_id) {
|
|
const u = _users_data.find(x => x.map_id == map_id);
|
|
if (!u) return;
|
|
|
|
$('#edit_map_id').val(map_id);
|
|
$('#edit_username').text(`${u.name} ${u.surname}`);
|
|
$('#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');
|
|
}
|
|
|
|
function save_role() {
|
|
ajax_request({
|
|
url: api + 'manage_users.php',
|
|
autoPrepare: true,
|
|
checkRequired: 0,
|
|
action: 'update',
|
|
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 || 'Access updated.');
|
|
load_users();
|
|
},
|
|
});
|
|
}
|
|
|
|
|
|
// ═══════════════════════════════════════════════
|
|
// Remove user
|
|
// ═══════════════════════════════════════════════
|
|
function remove_user(map_id, display_name) {
|
|
bootbox.confirm(`Remove <strong>${display_name}</strong> from this company?`, function (ok) {
|
|
if (!ok) return;
|
|
ajax_request({
|
|
url: api + 'manage_users.php',
|
|
autoPrepare: true,
|
|
checkRequired: 0,
|
|
action: 'delete',
|
|
data: { map_id: map_id },
|
|
onSuccess: function (r) {
|
|
bootbox.alert(r.message || 'User removed.');
|
|
load_users();
|
|
},
|
|
});
|
|
});
|
|
}
|
|
|
|
|
|
// ═══════════════════════════════════════════════
|
|
// 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
|
|
// ═══════════════════════════════════════════════
|
|
function initials(name, surname) {
|
|
return ((name?.[0] || '') + (surname?.[0] || '')).toUpperCase() || '?';
|
|
}
|
|
|
|
function esc(str) {
|
|
if (!str) return '';
|
|
return String(str)
|
|
.replace(/&/g,'&').replace(/</g,'<')
|
|
.replace(/>/g,'>').replace(/"/g,'"');
|
|
}
|
|
|
|
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'],
|
|
};
|
|
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>
|
|
</html>
|