sso-manager-node/nodejs/views/dashboard.ejs

<%- include('top') %>

<script type="text/javascript">
	app.auth.forceLogin('app_sso_admin');

	// ── Overview (stats, recent signups, inactive users) ────────────────────
	async function loadDashboard() {
		try {
			const stats = await app.api.get('user/stats');

			// Stat cards
			document.getElementById('stat-total').textContent   = stats.totalUsers;
			document.getElementById('stat-active').textContent  = stats.activeUsers;
			document.getElementById('stat-inactive').textContent = stats.inactiveUsers;
			document.getElementById('stat-groups').textContent  = stats.totalGroups;

			// Recent signups
			stats.recentSignups.forEach(function(u) {
				u.createTimestamp = moment(u.createTimestamp, 'YYYYMMDDHHmmssZ').fromNow();
			});
			$.scope.recentSignups.push(...stats.recentSignups);

			// Inactive users
			$.scope.inactiveUsers.push(...stats.inactiveList);

			document.getElementById('dashboard-overview').style.display = '';
		} catch(e) {
			if (e && (e.status === 401 || e.name === 'Insufficient Permission')) {
				location.replace('/');
			} else {
				console.error('Dashboard load error:', e);
			}
		}
	}

	async function activateUser(uid) {
		try {
			await app.api.put('user/' + uid + '/active', { active: true });
			$.scope.inactiveUsers.remove('uid', uid);
			document.getElementById('stat-inactive').textContent =
				parseInt(document.getElementById('stat-inactive').textContent) - 1;
			document.getElementById('stat-active').textContent =
				parseInt(document.getElementById('stat-active').textContent) + 1;
		} catch(e) {
			alert('Failed to activate user.');
		}
	}

	async function exportUsers() {
		const resp = await fetch('/api/user/export', {
			headers: { 'auth-token': localStorage.getItem('APIToken') }
		});
		const blob = await resp.blob();
		const a = document.createElement('a');
		a.href = URL.createObjectURL(blob);
		a.download = 'users.csv';
		a.click();
	}

	// ── Notifications (compose + history) ────────────────────────────────────
	async function loadHistory() {
		try {
			const data = await app.api.get('notification');
			const list = data.results || [];
			list.forEach(function(n) {
				n.created_on_fmt = moment(n.created_on).fromNow();
				n.filter_label = formatFilterLabel(n.filter_type, n.filter_value, n.active_only);
			});
			$.scope.notificationHistory.push(...list);
		} catch(e) {
			if (e && e.status === 401) location.replace('/');
			else console.error('Failed to load notification history:', e);
		}
	}

	function formatFilterLabel(type, value, active_only) {
		const suffix = active_only ? ' (active only)' : '';
		if (type === 'group')      return 'Groups: ' + value + suffix;
		if (type === 'users')      return 'Specific users';
		if (type === 'all_active') return 'All active users';
		if (type === 'all')        return 'All users';
		return type;
	}

	function toggleFilterInputs() {
		const type = document.querySelector('input[name="notif-filter"]:checked').value;
		document.getElementById('notif-group-row').style.display  = type === 'group'  ? '' : 'none';
		document.getElementById('notif-users-row').style.display  = type === 'users'  ? '' : 'none';
		document.getElementById('notif-active-row').style.display = (type === 'group' || type === 'all') ? '' : 'none';
	}

	async function sendNotification() {
		const subject    = document.getElementById('notif-subject').value.trim();
		const message    = document.getElementById('notif-message').value.trim();
		const filterType = document.querySelector('input[name="notif-filter"]:checked').value;
		const groupValue = document.getElementById('notif-group').value.trim();
		const usersValue = document.getElementById('notif-users').value.trim();
		const activeOnly = document.getElementById('notif-active-only').checked;
		const msgEl      = document.getElementById('notif-result');

		if (!subject || !message) { alert('Subject and message are required.'); return; }

		let filter_value = '';
		if (filterType === 'group') filter_value = groupValue;
		if (filterType === 'users') filter_value = JSON.stringify(usersValue.split(',').map(s => s.trim()).filter(Boolean));

		msgEl.className = 'alert alert-info mt-2';
		msgEl.textContent = 'Sending…';
		msgEl.style.display = '';

		try {
			const result = await app.api.post('notification', {
				subject,
				message,
				filter_type: filterType,
				filter_value,
				active_only: activeOnly,
			});
			msgEl.className = 'alert alert-success mt-2';
			msgEl.textContent = `Sent to ${result.results.sent_count} recipient(s). ${result.results.failed_count} failed.`;

			const n = result.results;
			n.created_on_fmt = 'just now';
			n.filter_label   = formatFilterLabel(n.filter_type, n.filter_value, n.active_only);
			$.scope.notificationHistory.unshift([n]);

			// Reset form
			document.getElementById('notif-subject').value = '';
			document.getElementById('notif-message').value = '';
		} catch(e) {
			msgEl.className = 'alert alert-danger mt-2';
			msgEl.textContent = 'Failed: ' + ((e.responseJSON && e.responseJSON.message) || e.message || 'Unknown error');
		}
	}

	$(document).ready(function() {
		loadDashboard();
		loadHistory();
		toggleFilterInputs();
	});
</script>

<div class="row mb-3 mt-2">
	<div class="col-12">
		<h4 class="mb-0"><i class="fa-solid fa-gauge-high"></i> Dashboard</h4>
	</div>
</div>

<div id="dashboard-overview" class="row" style="display:none">
	<div class="col-12">

		<!-- Header -->
		<div class="d-flex justify-content-between align-items-center mb-3">
			<h5 class="mb-0"><i class="fa-solid fa-users"></i> Overview</h5>
			<button class="btn btn-outline-secondary shadow" onclick="exportUsers()">
				<i class="fa-solid fa-file-csv"></i> Export Users CSV
			</button>
		</div>

		<!-- Stat cards -->
		<div class="row g-3 mb-4">
			<div class="col-6 col-md-3">
				<div class="card shadow text-center">
					<div class="card-body">
						<div class="display-6 fw-bold" id="stat-total">—</div>
						<div class="text-muted small"><i class="fa-solid fa-users"></i> Total Users</div>
					</div>
				</div>
			</div>
			<div class="col-6 col-md-3">
				<div class="card shadow text-center border-success">
					<div class="card-body">
						<div class="display-6 fw-bold text-success" id="stat-active">—</div>
						<div class="text-muted small"><i class="fa-solid fa-circle-check"></i> Active</div>
					</div>
				</div>
			</div>
			<div class="col-6 col-md-3">
				<div class="card shadow text-center border-danger">
					<div class="card-body">
						<div class="display-6 fw-bold text-danger" id="stat-inactive">—</div>
						<div class="text-muted small"><i class="fa-solid fa-lock"></i> Inactive</div>
					</div>
				</div>
			</div>
			<div class="col-6 col-md-3">
				<div class="card shadow text-center border-info">
					<div class="card-body">
						<div class="display-6 fw-bold text-info" id="stat-groups">—</div>
						<div class="text-muted small"><i class="fa-solid fa-users-viewfinder"></i> Groups</div>
					</div>
				</div>
			</div>
		</div>

		<div class="row g-3">

			<!-- Recent signups -->
			<div class="col-md-6">
				<div class="card shadow-lg">
					<div class="card-header shadow">
						<i class="fa-solid fa-user-plus"></i> Recent Signups
					</div>
					<div class="card-body p-0">
						<div class="table-responsive">
						<table class="table table-sm mb-0">
							<thead>
								<tr><th>User</th><th>Email</th><th>Joined</th></tr>
							</thead>
							<tbody jq-repeat="recentSignups">
								<tr>
									<td><a href="/users/{{uid}}">{{uid}}</a><br><small class="text-muted">{{givenName}} {{sn}}</small></td>
									<td><small>{{mail}}</small></td>
									<td><small class="text-muted">{{createTimestamp}}</small></td>
								</tr>
							</tbody>
						</table>
						</div>
					</div>
				</div>
			</div>

			<!-- Inactive users -->
			<div class="col-md-6">
				<div class="card shadow-lg">
					<div class="card-header shadow">
						<i class="fa-solid fa-lock"></i> Inactive Users
					</div>
					<div class="card-body p-0">
						<div class="table-responsive">
						<table class="table table-sm mb-0">
							<thead>
								<tr><th>User</th><th>Email</th><th></th></tr>
							</thead>
							<tbody jq-repeat="inactiveUsers" jq-index-key="uid">
								<tr>
									<td><a href="/users/{{uid}}">{{uid}}</a><br><small class="text-muted">{{givenName}} {{sn}}</small></td>
									<td><small>{{mail}}</small></td>
									<td class="text-end">
										<button class="btn btn-sm btn-outline-success" onclick="activateUser('{{uid}}')">
											<i class="fa-solid fa-lock-open"></i>
										</button>
									</td>
								</tr>
							</tbody>
						</table>
						</div>
					</div>
				</div>
			</div>

		</div>
	</div>
</div>

<div class="row mt-4">
	<div class="col-12">
		<h5 class="mb-3"><i class="fa-solid fa-paper-plane"></i> Notifications</h5>
	</div>
</div>

<div class="row g-3">

	<!-- Compose -->
	<div class="col-lg-6">
		<div class="card shadow-lg">
			<div class="card-header shadow">
				<i class="fa-solid fa-pencil"></i> Compose
			</div>
			<div class="card-body">
				<div class="mb-3">
					<label class="form-label">Subject</label>
					<input type="text" class="form-control shadow" id="notif-subject" placeholder="Maintenance window tonight" />
				</div>
				<div class="mb-3">
					<label class="form-label">Message <small class="text-muted">(HTML allowed)</small></label>
					<textarea class="form-control shadow" id="notif-message" rows="6" placeholder="<p>Hello, we will be performing maintenance...</p>"></textarea>
				</div>
				<div class="mb-3">
					<label class="form-label">Send to</label>
					<div class="form-check">
						<input class="form-check-input" type="radio" name="notif-filter" id="f-all-active" value="all_active" checked onchange="toggleFilterInputs()">
						<label class="form-check-label" for="f-all-active">All active users</label>
					</div>
					<div class="form-check">
						<input class="form-check-input" type="radio" name="notif-filter" id="f-all" value="all" onchange="toggleFilterInputs()">
						<label class="form-check-label" for="f-all">All users (including inactive)</label>
					</div>
					<div class="form-check">
						<input class="form-check-input" type="radio" name="notif-filter" id="f-group" value="group" onchange="toggleFilterInputs()">
						<label class="form-check-label" for="f-group">Group members</label>
					</div>
					<div class="form-check">
						<input class="form-check-input" type="radio" name="notif-filter" id="f-users" value="users" onchange="toggleFilterInputs()">
						<label class="form-check-label" for="f-users">Specific users</label>
					</div>
				</div>

				<div id="notif-group-row" class="mb-3" style="display:none">
					<label class="form-label">Groups <small class="text-muted">(comma-separated)</small></label>
					<input type="text" class="form-control shadow" id="notif-group" placeholder="host_hec-bot_admin, app_sso_admin" />
				</div>
				<div id="notif-users-row" class="mb-3" style="display:none">
					<label class="form-label">UIDs <small class="text-muted">(comma-separated)</small></label>
					<input type="text" class="form-control shadow" id="notif-users" placeholder="wmantly, jsmith" />
				</div>
				<div id="notif-active-row" class="mb-3" style="display:none">
					<div class="form-check">
						<input class="form-check-input" type="checkbox" id="notif-active-only" checked>
						<label class="form-check-label" for="notif-active-only">Active members only</label>
					</div>
				</div>

				<button class="btn btn-primary shadow" onclick="sendNotification()">
					<i class="fa-solid fa-paper-plane"></i> Send
				</button>
				<div id="notif-result" style="display:none" class="mt-2"></div>
			</div>
		</div>
	</div>

	<!-- History -->
	<div class="col-lg-6">
		<div class="card shadow-lg">
			<div class="card-header shadow">
				<i class="fa-solid fa-clock-rotate-left"></i> History
			</div>
			<div class="card-body p-0">
				<div class="table-responsive">
				<table class="table table-sm mb-0">
					<thead>
						<tr>
							<th>Sent</th>
							<th>Subject</th>
							<th>Filter</th>
							<th class="text-center">✓</th>
							<th class="text-center">✗</th>
						</tr>
					</thead>
					<tbody jq-repeat="notificationHistory" jq-index-key="notification_id">
						<tr>
							<td><small class="text-muted">{{created_on_fmt}}</small></td>
							<td><small>{{subject}}</small></td>
							<td><small class="text-muted">{{filter_label}}</small></td>
							<td class="text-center text-success"><small>{{sent_count}}</small></td>
							<td class="text-center text-danger"><small>{{failed_count}}</small></td>
						</tr>
					</tbody>
				</table>
				</div>
			</div>
		</div>
	</div>

</div>

<%- include('impersonate_modal') %>
<%- include('bottom') %>