nok/wms-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Login , Register ,and onboarding

Browse Source
This commit is contained in:
Thanakorn S
2026-04-28 11:59:49 +07:00
parent d8c55d278a
commit d8fd30c961
25 changed files with 2394 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/setting/users.php
+424
View File
@@ -0,0 +1,424 @@
<?php
session_start();
require '../config.php';
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>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">
<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 &amp; orders</option>
<option value="viewer">Viewer — read-only access</option>
</select>
</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 ROLE 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>
<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>
<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';
let _users_data = []; // full list from server
// ═══════════════════════════════════════════════
// 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="5" 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 joined = u.created_at
? new Date(u.created_at).toLocaleDateString('en-GB', {day:'2-digit', month:'short', year:'numeric'})
: '—';
// Build action buttons — owner cannot be edited or removed
let actions = '';
if (u.role !== 'owner') {
actions += `
<button class="btn btn-sm btn-ghost-secondary" title="Change role"
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>`;
}
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">${esc(u.name)} ${esc(u.surname)}</div>
<div class="small" style="color:#6c757d;">@${esc(u.username)}</div>
</div>
</div>
</td>
<td style="color:#495057;">${esc(u.email)}</td>
<td>${role_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');
new bootstrap.Modal('#inviteModal').show();
}
function send_invite() {
const email = $('#invite_email').val().trim();
const role = $('#invite_role').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 },
onSuccess: function (r) {
bootstrap.Modal.getInstance('#inviteModal')?.hide();
bootbox.alert(r.message || 'Invitation sent.');
load_users();
},
});
}
// ═══════════════════════════════════════════════
// Edit role
// ═══════════════════════════════════════════════
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);
new bootstrap.Modal('#editRoleModal').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() },
onSuccess: function (r) {
bootstrap.Modal.getInstance('#editRoleModal')?.hide();
bootbox.alert(r.message || 'Role 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();
},
});
});
}
// ═══════════════════════════════════════════════
// Helpers
// ═══════════════════════════════════════════════
function initials(name, surname) {
return ((name?.[0] || '') + (surname?.[0] || '')).toUpperCase() || '?';
}
function esc(str) {
if (!str) return '';
return String(str)
.replace(/&/g,'&amp;').replace(/</g,'&lt;')
.replace(/>/g,'&gt;').replace(/"/g,'&quot;');
}
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>`;
}
</script>
</body>
</html>