<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>User Management - POS System</title>
<link rel="stylesheet" href="../assets/css/fonts.css">
<link rel="stylesheet" href="../assets/css/styles.css">
</head>
<body>
<div class="app-container">
<aside class="sidebar">
<div class="sidebar-header">
<a href="index.html" class="sidebar-brand">
<i class="icon-cart"></i>
<span>POS System</span>
</a>
</div>
<ul class="sidebar-menu">
<li>
<a href="index.html">
<i class="icon-dashboard"></i>
<span>Dashboard</span>
</a>
</li>
<li>
<a href="inventory.html">
<i class="icon-product"></i>
<span>Inventory</span>
</a>
</li>
<li>
<a href="../pos/index.html">
<i class="icon-cart"></i>
<span>POS</span>
</a>
</li>
<li>
<a href="sales.html">
<i class="icon-stats"></i>
<span>Sales</span>
</a>
</li>
<li>
<a href="reports.html">
<i class="icon-report"></i>
<span>Reports</span>
</a>
</li>
<li>
<a href="users.html" class="active">
<i class="icon-users"></i>
<span>Users</span>
</a>
</li>
<li>
<a href="settings.html">
<i class="icon-settings"></i>
<span>Settings</span>
</a>
</li>
</ul>
</aside>
<main class="content-area">
<div class="topbar">
<button class="toggle-sidebar">
<i class="icon-bars"></i>
</button>
<div class="user-dropdown">
<button class="user-dropdown-toggle">
<div class="user-avatar">
<i class="icon-user"></i>
</div>
<span class="user-name">Admin</span>
<i class="icon-down"></i>
</button>
<div class="user-dropdown-menu">
<a href="#"><i class="icon-user"></i> Profile</a>
<a href="../admin/settings.html"><i class="icon-settings"></i> Settings</a>
<a href="#" id="logoutBtn"><i class="icon-signout"></i> Logout</a>
</div>
</div>
</div>
<div class="page-header">
<h1>User Management</h1>
<button class="btn btn-primary" id="addUserBtn">
<i class="icon-additem"></i> Add User
</button>
</div>
<div class="card">
<div class="card-header">
<h2 class="card-title">Users List</h2>
<div class="card-tools">
<input type="text" id="userSearch" class="form-control" placeholder="Search users...">
</div>
</div>
<div class="card-body">
<div class="filters">
<select id="roleFilter" class="form-control">
<option value="">All Roles</option>
<option value="admin">Admin</option>
<option value="manager">Manager</option>
<option value="cashier">Cashier</option>
</select>
<select id="statusFilter" class="form-control">
<option value="">All Status</option>
<option value="active">Active</option>
<option value="inactive">Inactive</option>
</select>
</div>
<div class="table-container">
<table class="data-table" id="usersTable">
<thead>
<tr>
<th>Username</th>
<th>Full Name</th>
<th>Email</th>
<th>Role</th>
<th>Status</th>
<th>Last Login</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<!-- Users will be loaded here -->
</tbody>
</table>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h2 class="card-title">User Activity Log</h2>
<div class="card-tools">
<select id="userActivityFilter" class="form-control">
<option value="">All Users</option>
<!-- Users will be loaded here -->
</select>
</div>
</div>
<div class="card-body">
<div class="table-container">
<table class="data-table" id="activityLogTable">
<thead>
<tr>
<th>User</th>
<th>Action</th>
<th>Description</th>
<th>IP Address</th>
<th>Date/Time</th>
</tr>
</thead>
<tbody>
<!-- Activity logs will be loaded here -->
</tbody>
</table>
</div>
<div class="pagination" id="activityPagination">
<!-- Pagination will be added here -->
</div>
</div>
</div>
</main>
</div>
<!-- User Modal -->
<div class="modal" id="userModal">
<div class="modal-content">
<div class="modal-header">
<h2 id="userModalTitle">Add User</h2>
<button class="close-modal">×</button>
</div>
<div class="modal-body">
<form id="userForm">
<input type="hidden" id="userId">
<div class="form-row">
<div class="form-col">
<label for="username">Username*</label>
<input type="text" id="username" class="form-control" required>
<div class="form-hint">Username cannot be changed later</div>
</div>
<div class="form-col">
<label for="email">Email*</label>
<input type="email" id="email" class="form-control" required>
</div>
</div>
<div class="form-row">
<div class="form-col">
<label for="fullName">Full Name*</label>
<input type="text" id="fullName" class="form-control" required>
</div>
<div class="form-col">
<label for="role">Role*</label>
<select id="role" class="form-control" required>
<option value="">Select Role</option>
<option value="admin">Admin</option>
<option value="manager">Manager</option>
<option value="cashier">Cashier</option>
</select>
</div>
</div>
<div class="form-row password-fields">
<div class="form-col">
<label for="password">Password*</label>
<input type="password" id="password" class="form-control">
<div class="form-hint">Leave empty to keep current password</div>
</div>
<div class="form-col">
<label for="confirmPassword">Confirm Password*</label>
<input type="password" id="confirmPassword" class="form-control">
</div>
</div>
<div class="form-row">
<div class="form-col">
<label for="status">Status</label>
<select id="status" class="form-control">
<option value="active">Active</option>
<option value="inactive">Inactive</option>
</select>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" id="cancelUser">Cancel</button>
<button class="btn btn-primary" id="saveUser">Save User</button>
</div>
</div>
</div>
<!-- Change Password Modal -->
<div class="modal" id="passwordModal">
<div class="modal-content modal-sm">
<div class="modal-header">
<h2>Change Password</h2>
<button class="close-modal">×</button>
</div>
<div class="modal-body">
<form id="passwordForm">
<input type="hidden" id="passwordUserId">
<div class="form-group">
<label for="newPassword">New Password*</label>
<input type="password" id="newPassword" class="form-control" required>
</div>
<div class="form-group">
<label for="confirmNewPassword">Confirm New Password*</label>
<input type="password" id="confirmNewPassword" class="form-control" required>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" id="cancelPassword">Cancel</button>
<button class="btn btn-primary" id="savePassword">Change Password</button>
</div>
</div>
</div>
<div id="notification-container"></div>
<script src="../assets/js/config.js"></script>
<script src="../assets/js/common.js"></script>
<script src="../assets/js/users.js"></script>
</body>
</html>