commit 7b66c45edcc6145cb64c9bbc8ec8d289331de4c1 · dunkirk.sh/thistle

+244

src/components/admin-data-table.ts

···

       1
       1
       +
       import { LitElement, html, css } from "lit";

     

       2
       2
       +
       import { customElement, property } from "lit/decorators.js";

     

       3
       3
       +
       

     

       4
       4
       +
       export interface TableColumn {

     

       5
       5
       +
       	key: string;

     

       6
       6
       +
       	label: string;

     

       7
       7
       +
       	sortable?: boolean;

     

       8
       8
       +
       	render?: (value: unknown, row: unknown) => unknown;

     

       9
       9
       +
       }

     

       10
       10
       +
       

     

       11
       11
       +
       @customElement("admin-data-table")

     

       12
       12
       +
       export class AdminDataTable extends LitElement {

     

       13
       13
       +
       	@property({ type: Array }) columns: TableColumn[] = [];

     

       14
       14
       +
       	@property({ type: Array }) data: unknown[] = [];

     

       15
       15
       +
       	@property({ type: String }) searchPlaceholder = "Search...";

     

       16
       16
       +
       	@property({ type: String }) emptyMessage = "No data available";

     

       17
       17
       +
       	@property({ type: Boolean}) loading = false;

     

       18
       18
       +
       

     

       19
       19
       +
       	@property({ type: String }) private searchTerm = "";

     

       20
       20
       +
       	@property({ type: String }) private sortKey = "";

     

       21
       21
       +
       	@property({ type: String }) private sortDirection: "asc" | "desc" = "asc";

     

       22
       22
       +
       

     

       23
       23
       +
       	static override styles = css`

     

       24
       24
       +
           :host {

     

       25
       25
       +
             display: block;

     

       26
       26
       +
           }

     

       27
       27
       +
       

     

       28
       28
       +
           .controls {

     

       29
       29
       +
             margin-bottom: 1rem;

     

       30
       30
       +
             display: flex;

     

       31
       31
       +
             gap: 1rem;

     

       32
       32
       +
             align-items: center;

     

       33
       33
       +
           }

     

       34
       34
       +
       

     

       35
       35
       +
           .search {

     

       36
       36
       +
             flex: 1;

     

       37
       37
       +
             max-width: 20rem;

     

       38
       38
       +
             padding: 0.5rem 0.75rem;

     

       39
       39
       +
             border: 2px solid var(--secondary);

     

       40
       40
       +
             border-radius: 4px;

     

       41
       41
       +
             font-size: 1rem;

     

       42
       42
       +
             font-family: inherit;

     

       43
       43
       +
             background: var(--background);

     

       44
       44
       +
             color: var(--text);

     

       45
       45
       +
           }

     

       46
       46
       +
       

     

       47
       47
       +
           .search:focus {

     

       48
       48
       +
             outline: none;

     

       49
       49
       +
             border-color: var(--primary);

     

       50
       50
       +
           }

     

       51
       51
       +
       

     

       52
       52
       +
           table {

     

       53
       53
       +
             width: 100%;

     

       54
       54
       +
             border-collapse: collapse;

     

       55
       55
       +
             background: var(--background);

     

       56
       56
       +
             border: 2px solid var(--secondary);

     

       57
       57
       +
             border-radius: 8px;

     

       58
       58
       +
             overflow: hidden;

     

       59
       59
       +
           }

     

       60
       60
       +
       

     

       61
       61
       +
           thead {

     

       62
       62
       +
             background: var(--primary);

     

       63
       63
       +
             color: white;

     

       64
       64
       +
           }

     

       65
       65
       +
       

     

       66
       66
       +
           th {

     

       67
       67
       +
             padding: 1rem;

     

       68
       68
       +
             text-align: left;

     

       69
       69
       +
             font-weight: 600;

     

       70
       70
       +
             user-select: none;

     

       71
       71
       +
           }

     

       72
       72
       +
       

     

       73
       73
       +
           th.sortable {

     

       74
       74
       +
             cursor: pointer;

     

       75
       75
       +
             position: relative;

     

       76
       76
       +
           }

     

       77
       77
       +
       

     

       78
       78
       +
           th.sortable:hover {

     

       79
       79
       +
             background: var(--gunmetal);

     

       80
       80
       +
           }

     

       81
       81
       +
       

     

       82
       82
       +
           .sort-indicator {

     

       83
       83
       +
             margin-left: 0.5rem;

     

       84
       84
       +
             opacity: 0.6;

     

       85
       85
       +
           }

     

       86
       86
       +
       

     

       87
       87
       +
           td {

     

       88
       88
       +
             padding: 1rem;

     

       89
       89
       +
             border-top: 1px solid var(--secondary);

     

       90
       90
       +
             color: var(--text);

     

       91
       91
       +
           }

     

       92
       92
       +
       

     

       93
       93
       +
           tbody tr {

     

       94
       94
       +
             cursor: pointer;

     

       95
       95
       +
           }

     

       96
       96
       +
       

     

       97
       97
       +
           tbody tr:hover {

     

       98
       98
       +
             background: rgba(0, 0, 0, 0.02);

     

       99
       99
       +
           }

     

       100
       100
       +
       

     

       101
       101
       +
           .empty-state, .loading {

     

       102
       102
       +
             text-align: center;

     

       103
       103
       +
             padding: 3rem;

     

       104
       104
       +
             color: var(--text);

     

       105
       105
       +
             opacity: 0.6;

     

       106
       106
       +
           }

     

       107
       107
       +
         `;

     

       108
       108
       +
       

     

       109
       109
       +
       	private get filteredData() {

     

       110
       110
       +
       		let result = [...this.data];

     

       111
       111
       +
       

     

       112
       112
       +
       		if (this.searchTerm) {

     

       113
       113
       +
       			const term = this.searchTerm.toLowerCase();

     

       114
       114
       +
       			result = result.filter((row) => {

     

       115
       115
       +
       				return this.columns.some((col) => {

     

       116
       116
       +
       					const value = (row as Record<string, unknown>)[col.key];

     

       117
       117
       +
       					return String(value).toLowerCase().includes(term);

     

       118
       118
       +
       				});

     

       119
       119
       +
       			});

     

       120
       120
       +
       		}

     

       121
       121
       +
       

     

       122
       122
       +
       		if (this.sortKey) {

     

       123
       123
       +
       			result.sort((a, b) => {

     

       124
       124
       +
       				const aVal = (a as Record<string, unknown>)[this.sortKey];

     

       125
       125
       +
       				const bVal = (b as Record<string, unknown>)[this.sortKey];

     

       126
       126
       +
       

     

       127
       127
       +
       				let comparison = 0;

     

       128
       128
       +
       				if (typeof aVal === "string" && typeof bVal === "string") {

     

       129
       129
       +
       					comparison = aVal.localeCompare(bVal);

     

       130
       130
       +
       				} else if (typeof aVal === "number" && typeof bVal === "number") {

     

       131
       131
       +
       					comparison = aVal - bVal;

     

       132
       132
       +
       				} else {

     

       133
       133
       +
       					const aStr = String(aVal);

     

       134
       134
       +
       					const bStr = String(bVal);

     

       135
       135
       +
       					comparison = aStr.localeCompare(bStr);

     

       136
       136
       +
       				}

     

       137
       137
       +
       

     

       138
       138
       +
       				return this.sortDirection === "asc" ? comparison : -comparison;

     

       139
       139
       +
       			});

     

       140
       140
       +
       		}

     

       141
       141
       +
       

     

       142
       142
       +
       		return result;

     

       143
       143
       +
       	}

     

       144
       144
       +
       

     

       145
       145
       +
       	private handleSearch(e: Event) {

     

       146
       146
       +
       		this.searchTerm = (e.target as HTMLInputElement).value;

     

       147
       147
       +
       	}

     

       148
       148
       +
       

     

       149
       149
       +
       	private handleSort(column: TableColumn) {

     

       150
       150
       +
       		if (!column.sortable) return;

     

       151
       151
       +
       

     

       152
       152
       +
       		if (this.sortKey === column.key) {

     

       153
       153
       +
       			this.sortDirection = this.sortDirection === "asc" ? "desc" : "asc";

     

       154
       154
       +
       		} else {

     

       155
       155
       +
       			this.sortKey = column.key;

     

       156
       156
       +
       			this.sortDirection = "asc";

     

       157
       157
       +
       		}

     

       158
       158
       +
       	}

     

       159
       159
       +
       

     

       160
       160
       +
       	private renderCell(column: TableColumn, row: unknown) {

     

       161
       161
       +
       		const value = (row as Record<string, unknown>)[column.key];

     

       162
       162
       +
       		if (column.render) {

     

       163
       163
       +
       			return column.render(value, row);

     

       164
       164
       +
       		}

     

       165
       165
       +
       		return value;

     

       166
       166
       +
       	}

     

       167
       167
       +
       

     

       168
       168
       +
       	private handleRowClick(row: unknown) {

     

       169
       169
       +
       		this.dispatchEvent(

     

       170
       170
       +
       			new CustomEvent("row-click", {

     

       171
       171
       +
       				detail: row,

     

       172
       172
       +
       				bubbles: true,

     

       173
       173
       +
       				composed: true,

     

       174
       174
       +
       			}),

     

       175
       175
       +
       		);

     

       176
       176
       +
       	}

     

       177
       177
       +
       

     

       178
       178
       +
       	override render() {

     

       179
       179
       +
       		if (this.loading) {

     

       180
       180
       +
       			return html`<div class="loading">Loading...</div>`;

     

       181
       181
       +
       		}

     

       182
       182
       +
       

     

       183
       183
       +
       		const filtered = this.filteredData;

     

       184
       184
       +
       

     

       185
       185
       +
       		return html`

     

       186
       186
       +
             <div class="controls">

     

       187
       187
       +
               <input

     

       188
       188
       +
                 type="text"

     

       189
       189
       +
                 class="search"

     

       190
       190
       +
                 placeholder=${this.searchPlaceholder}

     

       191
       191
       +
                 @input=${this.handleSearch}

     

       192
       192
       +
                 value=${this.searchTerm}

     

       193
       193
       +
               />

     

       194
       194
       +
             </div>

     

       195
       195
       +
       

     

       196
       196
       +
             ${

     

       197
       197
       +
       				filtered.length === 0

     

       198
       198
       +
       					? html`<div class="empty-state">${this.emptyMessage}</div>`

     

       199
       199
       +
       					: html`

     

       200
       200
       +
                 <table>

     

       201
       201
       +
                   <thead>

     

       202
       202
       +
                     <tr>

     

       203
       203
       +
                       ${this.columns.map(

     

       204
       204
       +
       									(col) => html`

     

       205
       205
       +
                         <th

     

       206
       206
       +
                           class=${col.sortable ? "sortable" : ""}

     

       207
       207
       +
                           @click=${() => this.handleSort(col)}

     

       208
       208
       +
                         >

     

       209
       209
       +
                           ${col.label}

     

       210
       210
       +
                           ${

     

       211
       211
       +
       											col.sortable && this.sortKey === col.key

     

       212
       212
       +
       												? html`<span class="sort-indicator">

     

       213
       213
       +
                                 ${this.sortDirection === "asc" ? "▲" : "▼"}

     

       214
       214
       +
                               </span>`

     

       215
       215
       +
       												: ""

     

       216
       216
       +
       										}

     

       217
       217
       +
                         </th>

     

       218
       218
       +
                       `,

     

       219
       219
       +
       								)}

     

       220
       220
       +
                     </tr>

     

       221
       221
       +
                   </thead>

     

       222
       222
       +
                   <tbody>

     

       223
       223
       +
                     ${filtered.map(

     

       224
       224
       +
       								(row) => html`

     

       225
       225
       +
                       <tr @click=${() => this.handleRowClick(row)}>

     

       226
       226
       +
                         ${this.columns.map(

     

       227
       227
       +
       										(col) => html`<td>${this.renderCell(col, row)}</td>`,

     

       228
       228
       +
       									)}

     

       229
       229
       +
                       </tr>

     

       230
       230
       +
                     `,

     

       231
       231
       +
       							)}

     

       232
       232
       +
                   </tbody>

     

       233
       233
       +
                 </table>

     

       234
       234
       +
               `

     

       235
       235
       +
       			}

     

       236
       236
       +
           `;

     

       237
       237
       +
       	}

     

       238
       238
       +
       }

     

       239
       239
       +
       

     

       240
       240
       +
       declare global {

     

       241
       241
       +
       	interface HTMLElementTagNameMap {

     

       242
       242
       +
       		"admin-data-table": AdminDataTable;

     

       243
       243
       +
       	}

     

       244
       244
       +
       }

src/db/schema.ts

···

       138
       138
        
             CREATE INDEX IF NOT EXISTS idx_users_role ON users(role);

     

       139
       139
        
           `,

     

       140
       140
        
       	},

     

       141
       141
       +
       	{

     

       142
       142
       +
       		version: 8,

     

       143
       143
       +
       		name: "Add last_login to users",

     

       144
       144
       +
       		sql: `

     

       145
       145
       +
             ALTER TABLE users ADD COLUMN last_login INTEGER;

     

       146
       146
       +
             CREATE INDEX IF NOT EXISTS idx_users_last_login ON users(last_login);

     

       147
       147
       +
           `,

     

       148
       148
       +
       	},

     

       141
       149
        
       ];

     

       142
       150
        
       

     

       143
       151
        
       function getCurrentVersion(): number {

+240 -1

src/index.ts

···

       4
       4
        
       	cleanupExpiredSessions,

     

       5
       5
        
       	createSession,

     

       6
       6
        
       	createUser,

     

       7
       7
       +
       	deleteAllUserSessions,

     

       7
       8
        
       	deleteSession,

     

       9
       9
       +
       	deleteSessionById,

     

       8
       10
        
       	deleteTranscription,

     

       9
       11
        
       	deleteUser,

     

       10
       12
        
       	getAllTranscriptions,

     

       11
       13
        
       	getAllUsers,

     

       14
       14
       +
       	getAllUsersWithStats,

     

       12
       15
        
       	getSession,

     

       13
       16
        
       	getSessionFromRequest,

     

       17
       17
       +
       	getSessionsForUser,

     

       14
       18
        
       	getUserBySession,

     

       15
       19
        
       	getUserSessionsForUser,

     

       16
       20
        
       	updateUserAvatar,

     

       17
       21
        
       	updateUserEmail,

     

       22
       22
       +
       	updateUserEmailAddress,

     

       18
       23
        
       	updateUserName,

     

       19
       24
        
       	updateUserPassword,

     

       20
       25
        
       	updateUserRole,

     
···

       1001
       1006
        
       			GET: async (req) => {

     

       1002
       1007
        
       				try {

     

       1003
       1008
        
       					requireAdmin(req);

     

       1004
       1004
       -
       					const users = getAllUsers();

     

       1009
       1009
       +
       					const users = getAllUsersWithStats();

     

       1005
       1010
        
       					return Response.json(users);

     

       1006
       1011
        
       				} catch (error) {

     

       1007
       1012
        
       					return handleError(error);

     
···

       1055
       1060
        
       					}

     

       1056
       1061
        
       

     

       1057
       1062
        
       					updateUserRole(userId, role);

     

       1063
       1063
       +
       					return Response.json({ success: true });

     

       1064
       1064
       +
       				} catch (error) {

     

       1065
       1065
       +
       					return handleError(error);

     

       1066
       1066
       +
       				}

     

       1067
       1067
       +
       			},

     

       1068
       1068
       +
       		},

     

       1069
       1069
       +
       		"/api/admin/users/:id/details": {

     

       1070
       1070
       +
       			GET: async (req) => {

     

       1071
       1071
       +
       				try {

     

       1072
       1072
       +
       					requireAdmin(req);

     

       1073
       1073
       +
       					const userId = Number.parseInt(req.params.id, 10);

     

       1074
       1074
       +
       					if (Number.isNaN(userId)) {

     

       1075
       1075
       +
       						return Response.json({ error: "Invalid user ID" }, { status: 400 });

     

       1076
       1076
       +
       					}

     

       1077
       1077
       +
       

     

       1078
       1078
       +
       					const user = db

     

       1079
       1079
       +
       						.query<

     

       1080
       1080
       +
       							{

     

       1081
       1081
       +
       								id: number;

     

       1082
       1082
       +
       								email: string;

     

       1083
       1083
       +
       								name: string | null;

     

       1084
       1084
       +
       								avatar: string;

     

       1085
       1085
       +
       								created_at: number;

     

       1086
       1086
       +
       								role: UserRole;

     

       1087
       1087
       +
       								password_hash: string | null;

     

       1088
       1088
       +
       								last_login: number | null;

     

       1089
       1089
       +
       							},

     

       1090
       1090
       +
       							[number]

     

       1091
       1091
       +
       						>(

     

       1092
       1092
       +
       							"SELECT id, email, name, avatar, created_at, role, password_hash, last_login FROM users WHERE id = ?",

     

       1093
       1093
       +
       						)

     

       1094
       1094
       +
       						.get(userId);

     

       1095
       1095
       +
       

     

       1096
       1096
       +
       					if (!user) {

     

       1097
       1097
       +
       						return Response.json({ error: "User not found" }, { status: 404 });

     

       1098
       1098
       +
       					}

     

       1099
       1099
       +
       

     

       1100
       1100
       +
       					const passkeys = getPasskeysForUser(userId);

     

       1101
       1101
       +
       					const sessions = getSessionsForUser(userId);

     

       1102
       1102
       +
       

     

       1103
       1103
       +
       					// Get transcription count

     

       1104
       1104
       +
       					const transcriptionCount = db

     

       1105
       1105
       +
       						.query<{ count: number }, [number]>(

     

       1106
       1106
       +
       							"SELECT COUNT(*) as count FROM transcriptions WHERE user_id = ?",

     

       1107
       1107
       +
       						)

     

       1108
       1108
       +
       						.get(userId)?.count ?? 0;

     

       1109
       1109
       +
       

     

       1110
       1110
       +
       					return Response.json({

     

       1111
       1111
       +
       						id: user.id,

     

       1112
       1112
       +
       						email: user.email,

     

       1113
       1113
       +
       						name: user.name,

     

       1114
       1114
       +
       						avatar: user.avatar,

     

       1115
       1115
       +
       						created_at: user.created_at,

     

       1116
       1116
       +
       						role: user.role,

     

       1117
       1117
       +
       						last_login: user.last_login,

     

       1118
       1118
       +
       						hasPassword: !!user.password_hash,

     

       1119
       1119
       +
       						transcriptionCount,

     

       1120
       1120
       +
       						passkeys: passkeys.map((pk) => ({

     

       1121
       1121
       +
       							id: pk.id,

     

       1122
       1122
       +
       							name: pk.name,

     

       1123
       1123
       +
       							created_at: pk.created_at,

     

       1124
       1124
       +
       							last_used_at: pk.last_used_at,

     

       1125
       1125
       +
       						})),

     

       1126
       1126
       +
       						sessions: sessions.map((s) => ({

     

       1127
       1127
       +
       							id: s.id,

     

       1128
       1128
       +
       							ip_address: s.ip_address,

     

       1129
       1129
       +
       							user_agent: s.user_agent,

     

       1130
       1130
       +
       							created_at: s.created_at,

     

       1131
       1131
       +
       							expires_at: s.expires_at,

     

       1132
       1132
       +
       						})),

     

       1133
       1133
       +
       					});

     

       1134
       1134
       +
       				} catch (error) {

     

       1135
       1135
       +
       					return handleError(error);

     

       1136
       1136
       +
       				}

     

       1137
       1137
       +
       			},

     

       1138
       1138
       +
       		},

     

       1139
       1139
       +
       		"/api/admin/users/:id/password": {

     

       1140
       1140
       +
       			PUT: async (req) => {

     

       1141
       1141
       +
       				try {

     

       1142
       1142
       +
       					requireAdmin(req);

     

       1143
       1143
       +
       					const userId = Number.parseInt(req.params.id, 10);

     

       1144
       1144
       +
       					if (Number.isNaN(userId)) {

     

       1145
       1145
       +
       						return Response.json({ error: "Invalid user ID" }, { status: 400 });

     

       1146
       1146
       +
       					}

     

       1147
       1147
       +
       

     

       1148
       1148
       +
       					const body = await req.json();

     

       1149
       1149
       +
       					const { password } = body as { password: string };

     

       1150
       1150
       +
       

     

       1151
       1151
       +
       					if (!password || password.length < 8) {

     

       1152
       1152
       +
       						return Response.json(

     

       1153
       1153
       +
       							{ error: "Password must be at least 8 characters" },

     

       1154
       1154
       +
       							{ status: 400 },

     

       1155
       1155
       +
       						);

     

       1156
       1156
       +
       					}

     

       1157
       1157
       +
       

     

       1158
       1158
       +
       					await updateUserPassword(userId, password);

     

       1159
       1159
       +
       					return Response.json({ success: true });

     

       1160
       1160
       +
       				} catch (error) {

     

       1161
       1161
       +
       					return handleError(error);

     

       1162
       1162
       +
       				}

     

       1163
       1163
       +
       			},

     

       1164
       1164
       +
       		},

     

       1165
       1165
       +
       		"/api/admin/users/:id/passkeys/:passkeyId": {

     

       1166
       1166
       +
       			DELETE: async (req) => {

     

       1167
       1167
       +
       				try {

     

       1168
       1168
       +
       					requireAdmin(req);

     

       1169
       1169
       +
       					const userId = Number.parseInt(req.params.id, 10);

     

       1170
       1170
       +
       					if (Number.isNaN(userId)) {

     

       1171
       1171
       +
       						return Response.json({ error: "Invalid user ID" }, { status: 400 });

     

       1172
       1172
       +
       					}

     

       1173
       1173
       +
       

     

       1174
       1174
       +
       					const { passkeyId } = req.params;

     

       1175
       1175
       +
       					deletePasskey(passkeyId, userId);

     

       1176
       1176
       +
       					return Response.json({ success: true });

     

       1177
       1177
       +
       				} catch (error) {

     

       1178
       1178
       +
       					return handleError(error);

     

       1179
       1179
       +
       				}

     

       1180
       1180
       +
       			},

     

       1181
       1181
       +
       		},

     

       1182
       1182
       +
       		"/api/admin/users/:id/name": {

     

       1183
       1183
       +
       			PUT: async (req) => {

     

       1184
       1184
       +
       				try {

     

       1185
       1185
       +
       					requireAdmin(req);

     

       1186
       1186
       +
       					const userId = Number.parseInt(req.params.id, 10);

     

       1187
       1187
       +
       					if (Number.isNaN(userId)) {

     

       1188
       1188
       +
       						return Response.json({ error: "Invalid user ID" }, { status: 400 });

     

       1189
       1189
       +
       					}

     

       1190
       1190
       +
       

     

       1191
       1191
       +
       					const body = await req.json();

     

       1192
       1192
       +
       					const { name } = body as { name: string };

     

       1193
       1193
       +
       

     

       1194
       1194
       +
       					if (!name || name.trim().length === 0) {

     

       1195
       1195
       +
       						return Response.json(

     

       1196
       1196
       +
       							{ error: "Name cannot be empty" },

     

       1197
       1197
       +
       							{ status: 400 },

     

       1198
       1198
       +
       						);

     

       1199
       1199
       +
       					}

     

       1200
       1200
       +
       

     

       1201
       1201
       +
       					updateUserName(userId, name.trim());

     

       1202
       1202
       +
       					return Response.json({ success: true });

     

       1203
       1203
       +
       				} catch (error) {

     

       1204
       1204
       +
       					return handleError(error);

     

       1205
       1205
       +
       				}

     

       1206
       1206
       +
       			},

     

       1207
       1207
       +
       		},

     

       1208
       1208
       +
       		"/api/admin/users/:id/email": {

     

       1209
       1209
       +
       			PUT: async (req) => {

     

       1210
       1210
       +
       				try {

     

       1211
       1211
       +
       					requireAdmin(req);

     

       1212
       1212
       +
       					const userId = Number.parseInt(req.params.id, 10);

     

       1213
       1213
       +
       					if (Number.isNaN(userId)) {

     

       1214
       1214
       +
       						return Response.json({ error: "Invalid user ID" }, { status: 400 });

     

       1215
       1215
       +
       					}

     

       1216
       1216
       +
       

     

       1217
       1217
       +
       					const body = await req.json();

     

       1218
       1218
       +
       					const { email } = body as { email: string };

     

       1219
       1219
       +
       

     

       1220
       1220
       +
       					if (!email || !email.includes("@")) {

     

       1221
       1221
       +
       						return Response.json(

     

       1222
       1222
       +
       							{ error: "Invalid email address" },

     

       1223
       1223
       +
       							{ status: 400 },

     

       1224
       1224
       +
       						);

     

       1225
       1225
       +
       					}

     

       1226
       1226
       +
       

     

       1227
       1227
       +
       					// Check if email already exists

     

       1228
       1228
       +
       					const existing = db

     

       1229
       1229
       +
       						.query<{ id: number }, [string, number]>(

     

       1230
       1230
       +
       							"SELECT id FROM users WHERE email = ? AND id != ?",

     

       1231
       1231
       +
       						)

     

       1232
       1232
       +
       						.get(email, userId);

     

       1233
       1233
       +
       

     

       1234
       1234
       +
       					if (existing) {

     

       1235
       1235
       +
       						return Response.json(

     

       1236
       1236
       +
       							{ error: "Email already in use" },

     

       1237
       1237
       +
       							{ status: 400 },

     

       1238
       1238
       +
       						);

     

       1239
       1239
       +
       					}

     

       1240
       1240
       +
       

     

       1241
       1241
       +
       					updateUserEmailAddress(userId, email);

     

       1242
       1242
       +
       					return Response.json({ success: true });

     

       1243
       1243
       +
       				} catch (error) {

     

       1244
       1244
       +
       					return handleError(error);

     

       1245
       1245
       +
       				}

     

       1246
       1246
       +
       			},

     

       1247
       1247
       +
       		},

     

       1248
       1248
       +
       		"/api/admin/users/:id/sessions": {

     

       1249
       1249
       +
       			GET: async (req) => {

     

       1250
       1250
       +
       				try {

     

       1251
       1251
       +
       					requireAdmin(req);

     

       1252
       1252
       +
       					const userId = Number.parseInt(req.params.id, 10);

     

       1253
       1253
       +
       					if (Number.isNaN(userId)) {

     

       1254
       1254
       +
       						return Response.json({ error: "Invalid user ID" }, { status: 400 });

     

       1255
       1255
       +
       					}

     

       1256
       1256
       +
       

     

       1257
       1257
       +
       					const sessions = getSessionsForUser(userId);

     

       1258
       1258
       +
       					return Response.json(sessions);

     

       1259
       1259
       +
       				} catch (error) {

     

       1260
       1260
       +
       					return handleError(error);

     

       1261
       1261
       +
       				}

     

       1262
       1262
       +
       			},

     

       1263
       1263
       +
       			DELETE: async (req) => {

     

       1264
       1264
       +
       				try {

     

       1265
       1265
       +
       					requireAdmin(req);

     

       1266
       1266
       +
       					const userId = Number.parseInt(req.params.id, 10);

     

       1267
       1267
       +
       					if (Number.isNaN(userId)) {

     

       1268
       1268
       +
       						return Response.json({ error: "Invalid user ID" }, { status: 400 });

     

       1269
       1269
       +
       					}

     

       1270
       1270
       +
       

     

       1271
       1271
       +
       					deleteAllUserSessions(userId);

     

       1272
       1272
       +
       					return Response.json({ success: true });

     

       1273
       1273
       +
       				} catch (error) {

     

       1274
       1274
       +
       					return handleError(error);

     

       1275
       1275
       +
       				}

     

       1276
       1276
       +
       			},

     

       1277
       1277
       +
       		},

     

       1278
       1278
       +
       		"/api/admin/users/:id/sessions/:sessionId": {

     

       1279
       1279
       +
       			DELETE: async (req) => {

     

       1280
       1280
       +
       				try {

     

       1281
       1281
       +
       					requireAdmin(req);

     

       1282
       1282
       +
       					const userId = Number.parseInt(req.params.id, 10);

     

       1283
       1283
       +
       					if (Number.isNaN(userId)) {

     

       1284
       1284
       +
       						return Response.json({ error: "Invalid user ID" }, { status: 400 });

     

       1285
       1285
       +
       					}

     

       1286
       1286
       +
       

     

       1287
       1287
       +
       					const { sessionId } = req.params;

     

       1288
       1288
       +
       					const success = deleteSessionById(sessionId, userId);

     

       1289
       1289
       +
       

     

       1290
       1290
       +
       					if (!success) {

     

       1291
       1291
       +
       						return Response.json(

     

       1292
       1292
       +
       							{ error: "Session not found" },

     

       1293
       1293
       +
       							{ status: 404 },

     

       1294
       1294
       +
       						);

     

       1295
       1295
       +
       					}

     

       1296
       1296
       +
       

     

       1058
       1297
        
       					return Response.json({ success: true });

     

       1059
       1298
        
       				} catch (error) {

     

       1060
       1299
        
       					return handleError(error);

+186

src/lib/admin.test.ts

···

       1
       1
       +
       import { afterEach, beforeEach, expect, test } from "bun:test";

     

       2
       2
       +
       import { Database } from "bun:sqlite";

     

       3
       3
       +
       

     

       4
       4
       +
       let testDb: Database;

     

       5
       5
       +
       

     

       6
       6
       +
       beforeEach(() => {

     

       7
       7
       +
       	testDb = new Database(":memory:");

     

       8
       8
       +
       

     

       9
       9
       +
       	testDb.run(`

     

       10
       10
       +
           CREATE TABLE users (

     

       11
       11
       +
             id INTEGER PRIMARY KEY AUTOINCREMENT,

     

       12
       12
       +
             email TEXT UNIQUE NOT NULL,

     

       13
       13
       +
             password_hash TEXT,

     

       14
       14
       +
             name TEXT,

     

       15
       15
       +
             avatar TEXT DEFAULT 'd',

     

       16
       16
       +
             created_at INTEGER NOT NULL DEFAULT (strftime('%s', 'now')),

     

       17
       17
       +
             role TEXT NOT NULL DEFAULT 'user'

     

       18
       18
       +
           )

     

       19
       19
       +
         `);

     

       20
       20
       +
       

     

       21
       21
       +
       	testDb.run(`

     

       22
       22
       +
           CREATE TABLE passkeys (

     

       23
       23
       +
             id TEXT PRIMARY KEY,

     

       24
       24
       +
             user_id INTEGER NOT NULL,

     

       25
       25
       +
             credential_id TEXT NOT NULL UNIQUE,

     

       26
       26
       +
             public_key TEXT NOT NULL,

     

       27
       27
       +
             counter INTEGER NOT NULL DEFAULT 0,

     

       28
       28
       +
             transports TEXT,

     

       29
       29
       +
             name TEXT,

     

       30
       30
       +
             created_at INTEGER NOT NULL DEFAULT (strftime('%s', 'now')),

     

       31
       31
       +
             last_used_at INTEGER,

     

       32
       32
       +
             FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE

     

       33
       33
       +
           )

     

       34
       34
       +
         `);

     

       35
       35
       +
       });

     

       36
       36
       +
       

     

       37
       37
       +
       afterEach(() => {

     

       38
       38
       +
       	testDb.close();

     

       39
       39
       +
       });

     

       40
       40
       +
       

     

       41
       41
       +
       test("admin can update user name", async () => {

     

       42
       42
       +
       	const result = testDb.run(

     

       43
       43
       +
       		"INSERT INTO users (email, password_hash, name, avatar) VALUES (?, ?, ?, ?)",

     

       44
       44
       +
       		["test@example.com", "password123", "Old Name", "avatar1"],

     

       45
       45
       +
       	);

     

       46
       46
       +
       

     

       47
       47
       +
       	const userId = Number(result.lastInsertRowid);

     

       48
       48
       +
       

     

       49
       49
       +
       	testDb.run("UPDATE users SET name = ? WHERE id = ?", ["New Name", userId]);

     

       50
       50
       +
       

     

       51
       51
       +
       	const user = testDb

     

       52
       52
       +
       		.query<{ name: string }, [number]>("SELECT name FROM users WHERE id = ?")

     

       53
       53
       +
       		.get(userId);

     

       54
       54
       +
       

     

       55
       55
       +
       	expect(user?.name).toBe("New Name");

     

       56
       56
       +
       });

     

       57
       57
       +
       

     

       58
       58
       +
       test("admin can update user password", async () => {

     

       59
       59
       +
       	const result = testDb.run(

     

       60
       60
       +
       		"INSERT INTO users (email, password_hash) VALUES (?, ?)",

     

       61
       61
       +
       		["test@example.com", "password123"],

     

       62
       62
       +
       	);

     

       63
       63
       +
       

     

       64
       64
       +
       	const userId = Number(result.lastInsertRowid);

     

       65
       65
       +
       

     

       66
       66
       +
       	testDb.run("UPDATE users SET password_hash = ? WHERE id = ?", [

     

       67
       67
       +
       		"newpassword456",

     

       68
       68
       +
       		userId,

     

       69
       69
       +
       	]);

     

       70
       70
       +
       

     

       71
       71
       +
       	const user = testDb

     

       72
       72
       +
       		.query<{ password_hash: string }, [number]>(

     

       73
       73
       +
       			"SELECT password_hash FROM users WHERE id = ?",

     

       74
       74
       +
       		)

     

       75
       75
       +
       		.get(userId);

     

       76
       76
       +
       

     

       77
       77
       +
       	expect(user?.password_hash).toBe("newpassword456");

     

       78
       78
       +
       });

     

       79
       79
       +
       

     

       80
       80
       +
       test("admin can view user passkeys", async () => {

     

       81
       81
       +
       	const result = testDb.run(

     

       82
       82
       +
       		"INSERT INTO users (email, password_hash) VALUES (?, ?)",

     

       83
       83
       +
       		["test@example.com", "password123"],

     

       84
       84
       +
       	);

     

       85
       85
       +
       

     

       86
       86
       +
       	const userId = Number(result.lastInsertRowid);

     

       87
       87
       +
       

     

       88
       88
       +
       	testDb.run(

     

       89
       89
       +
       		"INSERT INTO passkeys (id, user_id, credential_id, public_key, counter) VALUES (?, ?, ?, ?, ?)",

     

       90
       90
       +
       		["pk1", userId, "cred1", "pubkey1", 0],

     

       91
       91
       +
       	);

     

       92
       92
       +
       

     

       93
       93
       +
       	testDb.run(

     

       94
       94
       +
       		"INSERT INTO passkeys (id, user_id, credential_id, public_key, counter) VALUES (?, ?, ?, ?, ?)",

     

       95
       95
       +
       		["pk2", userId, "cred2", "pubkey2", 0],

     

       96
       96
       +
       	);

     

       97
       97
       +
       

     

       98
       98
       +
       	const passkeys = testDb

     

       99
       99
       +
       		.query<{ id: string }, [number]>(

     

       100
       100
       +
       			"SELECT id FROM passkeys WHERE user_id = ?",

     

       101
       101
       +
       		)

     

       102
       102
       +
       		.all(userId);

     

       103
       103
       +
       

     

       104
       104
       +
       	expect(passkeys.length).toBe(2);

     

       105
       105
       +
       });

     

       106
       106
       +
       

     

       107
       107
       +
       test("admin can revoke user passkey", async () => {

     

       108
       108
       +
       	const result = testDb.run(

     

       109
       109
       +
       		"INSERT INTO users (email, password_hash) VALUES (?, ?)",

     

       110
       110
       +
       		["test@example.com", "password123"],

     

       111
       111
       +
       	);

     

       112
       112
       +
       

     

       113
       113
       +
       	const userId = Number(result.lastInsertRowid);

     

       114
       114
       +
       

     

       115
       115
       +
       	testDb.run(

     

       116
       116
       +
       		"INSERT INTO passkeys (id, user_id, credential_id, public_key, counter) VALUES (?, ?, ?, ?, ?)",

     

       117
       117
       +
       		["pk1", userId, "cred1", "pubkey1", 0],

     

       118
       118
       +
       	);

     

       119
       119
       +
       

     

       120
       120
       +
       	let passkeys = testDb

     

       121
       121
       +
       		.query<{ id: string }, [number]>(

     

       122
       122
       +
       			"SELECT id FROM passkeys WHERE user_id = ?",

     

       123
       123
       +
       		)

     

       124
       124
       +
       		.all(userId);

     

       125
       125
       +
       	expect(passkeys.length).toBe(1);

     

       126
       126
       +
       

     

       127
       127
       +
       	testDb.run("DELETE FROM passkeys WHERE id = ? AND user_id = ?", [

     

       128
       128
       +
       		"pk1",

     

       129
       129
       +
       		userId,

     

       130
       130
       +
       	]);

     

       131
       131
       +
       

     

       132
       132
       +
       	passkeys = testDb

     

       133
       133
       +
       		.query<{ id: string }, [number]>(

     

       134
       134
       +
       			"SELECT id FROM passkeys WHERE user_id = ?",

     

       135
       135
       +
       		)

     

       136
       136
       +
       		.all(userId);

     

       137
       137
       +
       	expect(passkeys.length).toBe(0);

     

       138
       138
       +
       });

     

       139
       139
       +
       

     

       140
       140
       +
       test("updating password clears user sessions", async () => {

     

       141
       141
       +
       	testDb.run(`

     

       142
       142
       +
           CREATE TABLE sessions (

     

       143
       143
       +
             id TEXT PRIMARY KEY,

     

       144
       144
       +
             user_id INTEGER NOT NULL,

     

       145
       145
       +
             ip_address TEXT,

     

       146
       146
       +
             user_agent TEXT,

     

       147
       147
       +
             created_at INTEGER NOT NULL DEFAULT (strftime('%s', 'now')),

     

       148
       148
       +
             expires_at INTEGER NOT NULL,

     

       149
       149
       +
             FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE

     

       150
       150
       +
           )

     

       151
       151
       +
         `);

     

       152
       152
       +
       

     

       153
       153
       +
       	const result = testDb.run(

     

       154
       154
       +
       		"INSERT INTO users (email, password_hash) VALUES (?, ?)",

     

       155
       155
       +
       		["test@example.com", "password123"],

     

       156
       156
       +
       	);

     

       157
       157
       +
       

     

       158
       158
       +
       	const userId = Number(result.lastInsertRowid);

     

       159
       159
       +
       

     

       160
       160
       +
       	const expiresAt = Math.floor(Date.now() / 1000) + 3600;

     

       161
       161
       +
       	testDb.run(

     

       162
       162
       +
       		"INSERT INTO sessions (id, user_id, expires_at) VALUES (?, ?, ?)",

     

       163
       163
       +
       		["session1", userId, expiresAt],

     

       164
       164
       +
       	);

     

       165
       165
       +
       

     

       166
       166
       +
       	let sessions = testDb

     

       167
       167
       +
       		.query<{ id: string }, [number]>(

     

       168
       168
       +
       			"SELECT id FROM sessions WHERE user_id = ?",

     

       169
       169
       +
       		)

     

       170
       170
       +
       		.all(userId);

     

       171
       171
       +
       	expect(sessions.length).toBe(1);

     

       172
       172
       +
       

     

       173
       173
       +
       	testDb.run("UPDATE users SET password_hash = ? WHERE id = ?", [

     

       174
       174
       +
       		"newpassword",

     

       175
       175
       +
       		userId,

     

       176
       176
       +
       	]);

     

       177
       177
       +
       	testDb.run("DELETE FROM sessions WHERE user_id = ?", [userId]);

     

       178
       178
       +
       

     

       179
       179
       +
       	sessions = testDb

     

       180
       180
       +
       		.query<{ id: string }, [number]>(

     

       181
       181
       +
       			"SELECT id FROM sessions WHERE user_id = ?",

     

       182
       182
       +
       		)

     

       183
       183
       +
       		.all(userId);

     

       184
       184
       +
       	expect(sessions.length).toBe(0);

     

       185
       185
       +
       });

     

       186
       186
       +

+74 -4

src/lib/auth.ts

···

       11
       11
        
       	avatar: string;

     

       12
       12
        
       	created_at: number;

     

       13
       13
        
       	role: UserRole;

     

       14
       14
       +
       	last_login: number | null;

     

       14
       15
        
       }

     

       15
       16
        
       

     

       16
       17
        
       export interface Session {

     
···

       56
       57
        
       

     

       57
       58
        
       	const user = db

     

       58
       59
        
       		.query<User, [number]>(

     

       59
       59
       -
       			"SELECT id, email, name, avatar, created_at, role FROM users WHERE id = ?",

     

       60
       60
       +
       			"SELECT id, email, name, avatar, created_at, role, last_login FROM users WHERE id = ?",

     

       60
       61
        
       		)

     

       61
       62
        
       		.get(session.user_id);

     

       62
       63
        
       

     
···

       94
       95
        
       

     

       95
       96
        
       	const user = db

     

       96
       97
        
       		.query<User, [number]>(

     

       97
       97
       -
       			"SELECT id, email, name, avatar, created_at, role FROM users WHERE id = ?",

     

       98
       98
       +
       			"SELECT id, email, name, avatar, created_at, role, last_login FROM users WHERE id = ?",

     

       98
       99
        
       		)

     

       99
       100
        
       		.get(Number(result.lastInsertRowid));

     

       100
       101
        
       

     
···

       119
       120
        
       				password_hash: string;

     

       120
       121
        
       				created_at: number;

     

       121
       122
        
       				role: UserRole;

     

       123
       123
       +
       				last_login: number | null;

     

       122
       124
        
       			},

     

       123
       125
        
       			[string]

     

       124
       126
        
       		>(

     

       125
       125
       -
       			"SELECT id, email, name, avatar, password_hash, created_at, role FROM users WHERE email = ?",

     

       127
       127
       +
       			"SELECT id, email, name, avatar, password_hash, created_at, role, last_login FROM users WHERE email = ?",

     

       126
       128
        
       		)

     

       127
       129
        
       		.get(email);

     

       128
       130
        
       

     
···

       135
       137
        
       

     

       136
       138
        
       	if (password !== result.password_hash) return null;

     

       137
       139
        
       

     

       140
       140
       +
       	// Update last_login

     

       141
       141
       +
       	const now = Math.floor(Date.now() / 1000);

     

       142
       142
       +
       	db.run("UPDATE users SET last_login = ? WHERE id = ?", [now, result.id]);

     

       143
       143
       +
       

     

       138
       144
        
       	return {

     

       139
       145
        
       		id: result.id,

     

       140
       146
        
       		email: result.email,

     
···

       142
       148
        
       		avatar: result.avatar,

     

       143
       149
        
       		created_at: result.created_at,

     

       144
       150
        
       		role: result.role,

     

       151
       151
       +
       		last_login: now,

     

       145
       152
        
       	};

     

       146
       153
        
       }

     

       147
       154
        
       

     
···

       221
       228
        
       				avatar: string;

     

       222
       229
        
       				created_at: number;

     

       223
       230
        
       				role: UserRole;

     

       231
       231
       +
       				last_login: number | null;

     

       224
       232
        
       			},

     

       225
       233
        
       			[]

     

       226
       226
       -
       		>("SELECT id, email, name, avatar, created_at, role FROM users ORDER BY created_at DESC")

     

       234
       234
       +
       		>("SELECT id, email, name, avatar, created_at, role, last_login FROM users ORDER BY created_at DESC")

     

       227
       235
        
       		.all();

     

       228
       236
        
       }

     

       229
       237
        
       

     
···

       311
       319
        
       		// Files might not exist, ignore errors

     

       312
       320
        
       	}

     

       313
       321
        
       }

     

       322
       322
       +
       

     

       323
       323
       +
       export function getSessionsForUser(userId: number): Session[] {

     

       324
       324
       +
       	const now = Math.floor(Date.now() / 1000);

     

       325
       325
       +
       	return db

     

       326
       326
       +
       		.query<Session, [number, number]>(

     

       327
       327
       +
       			"SELECT id, user_id, ip_address, user_agent, created_at, expires_at FROM sessions WHERE user_id = ? AND expires_at > ? ORDER BY created_at DESC",

     

       328
       328
       +
       		)

     

       329
       329
       +
       		.all(userId, now);

     

       330
       330
       +
       }

     

       331
       331
       +
       

     

       332
       332
       +
       export function deleteSessionById(

     

       333
       333
       +
       	sessionId: string,

     

       334
       334
       +
       	userId: number,

     

       335
       335
       +
       ): boolean {

     

       336
       336
       +
       	const result = db.run(

     

       337
       337
       +
       		"DELETE FROM sessions WHERE id = ? AND user_id = ?",

     

       338
       338
       +
       		[sessionId, userId],

     

       339
       339
       +
       	);

     

       340
       340
       +
       	return result.changes > 0;

     

       341
       341
       +
       }

     

       342
       342
       +
       

     

       343
       343
       +
       export function deleteAllUserSessions(userId: number): void {

     

       344
       344
       +
       	db.run("DELETE FROM sessions WHERE user_id = ?", [userId]);

     

       345
       345
       +
       }

     

       346
       346
       +
       

     

       347
       347
       +
       export function updateUserEmailAddress(

     

       348
       348
       +
       	userId: number,

     

       349
       349
       +
       	newEmail: string,

     

       350
       350
       +
       ): void {

     

       351
       351
       +
       	db.run("UPDATE users SET email = ? WHERE id = ?", [newEmail, userId]);

     

       352
       352
       +
       }

     

       353
       353
       +
       

     

       354
       354
       +
       export interface UserWithStats {

     

       355
       355
       +
       	id: number;

     

       356
       356
       +
       	email: string;

     

       357
       357
       +
       	name: string | null;

     

       358
       358
       +
       	avatar: string;

     

       359
       359
       +
       	created_at: number;

     

       360
       360
       +
       	role: UserRole;

     

       361
       361
       +
       	last_login: number | null;

     

       362
       362
       +
       	transcription_count: number;

     

       363
       363
       +
       }

     

       364
       364
       +
       

     

       365
       365
       +
       export function getAllUsersWithStats(): UserWithStats[] {

     

       366
       366
       +
       	return db

     

       367
       367
       +
       		.query<UserWithStats, []>(

     

       368
       368
       +
       			`SELECT 

     

       369
       369
       +
               u.id, 

     

       370
       370
       +
               u.email, 

     

       371
       371
       +
               u.name, 

     

       372
       372
       +
               u.avatar, 

     

       373
       373
       +
               u.created_at, 

     

       374
       374
       +
               u.role,

     

       375
       375
       +
               u.last_login,

     

       376
       376
       +
               COUNT(t.id) as transcription_count

     

       377
       377
       +
             FROM users u

     

       378
       378
       +
             LEFT JOIN transcriptions t ON u.id = t.user_id

     

       379
       379
       +
             GROUP BY u.id

     

       380
       380
       +
             ORDER BY u.created_at DESC`,

     

       381
       381
       +
       		)

     

       382
       382
       +
       		.all();

     

       383
       383
       +
       }

+5 -2

src/lib/passkey.ts

···

       297
       297
        
       	// Remove used challenge

     

       298
       298
        
       	authenticationChallenges.delete(expectedChallenge);

     

       299
       299
        
       

     

       300
       300
       -
       	// Update last used timestamp and counter

     

       300
       300
       +
       	// Update last used timestamp and counter for passkey

     

       301
       301
        
       	const now = Math.floor(Date.now() / 1000);

     

       302
       302
        
       	db.run(

     

       303
       303
        
       		"UPDATE passkeys SET last_used_at = ?, counter = ? WHERE id = ?",

     

       304
       304
        
       		[now, verification.authenticationInfo.newCounter, passkey.id],

     

       305
       305
        
       	);

     

       306
       306
        
       

     

       307
       307
       +
       	// Update user's last_login

     

       308
       308
       +
       	db.run("UPDATE users SET last_login = ? WHERE id = ?", [now, passkey.user_id]);

     

       309
       309
       +
       

     

       307
       310
        
       	// Get user

     

       308
       311
        
       	const user = db

     

       309
       312
        
       		.query<User, [number]>(

     

       310
       310
       -
       			"SELECT id, email, name, avatar, created_at, role FROM users WHERE id = ?",

     

       313
       313
       +
       			"SELECT id, email, name, avatar, created_at, role, last_login FROM users WHERE id = ?",

     

       311
       314
        
       		)

     

       312
       315
        
       		.get(passkey.user_id);

     

       313
       316

+870 -8

src/pages/admin.html

···

       273
       273
        
             opacity: 0.5;

     

       274
       274
        
             cursor: not-allowed;

     

       275
       275
        
           }

     

       276
       276
       +
       

     

       277
       277
       +
           tbody tr {

     

       278
       278
       +
             cursor: pointer;

     

       279
       279
       +
           }

     

       280
       280
       +
       

     

       281
       281
       +
           tbody tr:hover {

     

       282
       282
       +
             background: rgba(0, 0, 0, 0.04);

     

       283
       283
       +
           }

     

       284
       284
       +
       

     

       285
       285
       +
           .modal {

     

       286
       286
       +
             display: none;

     

       287
       287
       +
             position: fixed;

     

       288
       288
       +
             top: 0;

     

       289
       289
       +
             left: 0;

     

       290
       290
       +
             right: 0;

     

       291
       291
       +
             bottom: 0;

     

       292
       292
       +
             background: rgba(0, 0, 0, 0.5);

     

       293
       293
       +
             z-index: 1000;

     

       294
       294
       +
             align-items: center;

     

       295
       295
       +
             justify-content: center;

     

       296
       296
       +
             padding: 2rem;

     

       297
       297
       +
           }

     

       298
       298
       +
       

     

       299
       299
       +
           .modal.active {

     

       300
       300
       +
             display: flex;

     

       301
       301
       +
           }

     

       302
       302
       +
       

     

       303
       303
       +
           .modal-content {

     

       304
       304
       +
             background: var(--background);

     

       305
       305
       +
             border-radius: 8px;

     

       306
       306
       +
             max-width: 40rem;

     

       307
       307
       +
             width: 100%;

     

       308
       308
       +
             max-height: 80vh;

     

       309
       309
       +
             overflow-y: auto;

     

       310
       310
       +
             box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.3);

     

       311
       311
       +
           }

     

       312
       312
       +
       

     

       313
       313
       +
           .modal-header {

     

       314
       314
       +
             padding: 1.5rem;

     

       315
       315
       +
             border-bottom: 2px solid var(--secondary);

     

       316
       316
       +
             display: flex;

     

       317
       317
       +
             justify-content: space-between;

     

       318
       318
       +
             align-items: center;

     

       319
       319
       +
           }

     

       320
       320
       +
       

     

       321
       321
       +
           .modal-title {

     

       322
       322
       +
             font-size: 1.5rem;

     

       323
       323
       +
             font-weight: 600;

     

       324
       324
       +
             color: var(--text);

     

       325
       325
       +
             margin: 0;

     

       326
       326
       +
           }

     

       327
       327
       +
       

     

       328
       328
       +
           .modal-close {

     

       329
       329
       +
             background: transparent;

     

       330
       330
       +
             border: none;

     

       331
       331
       +
             font-size: 1.5rem;

     

       332
       332
       +
             cursor: pointer;

     

       333
       333
       +
             color: var(--text);

     

       334
       334
       +
             padding: 0;

     

       335
       335
       +
             width: 2rem;

     

       336
       336
       +
             height: 2rem;

     

       337
       337
       +
             display: flex;

     

       338
       338
       +
             align-items: center;

     

       339
       339
       +
             justify-content: center;

     

       340
       340
       +
             border-radius: 4px;

     

       341
       341
       +
             transition: background 0.2s;

     

       342
       342
       +
           }

     

       343
       343
       +
       

     

       344
       344
       +
           .modal-close:hover {

     

       345
       345
       +
             background: var(--secondary);

     

       346
       346
       +
           }

     

       347
       347
       +
       

     

       348
       348
       +
           .modal-body {

     

       349
       349
       +
             padding: 1.5rem;

     

       350
       350
       +
           }

     

       351
       351
       +
       

     

       352
       352
       +
           .detail-section {

     

       353
       353
       +
             margin-bottom: 2rem;

     

       354
       354
       +
           }

     

       355
       355
       +
       

     

       356
       356
       +
           .detail-section:last-child {

     

       357
       357
       +
             margin-bottom: 0;

     

       358
       358
       +
           }

     

       359
       359
       +
       

     

       360
       360
       +
           .detail-section-title {

     

       361
       361
       +
             font-size: 1.125rem;

     

       362
       362
       +
             font-weight: 600;

     

       363
       363
       +
             color: var(--text);

     

       364
       364
       +
             margin-bottom: 1rem;

     

       365
       365
       +
             padding-bottom: 0.5rem;

     

       366
       366
       +
             border-bottom: 2px solid var(--secondary);

     

       367
       367
       +
           }

     

       368
       368
       +
       

     

       369
       369
       +
           .detail-row {

     

       370
       370
       +
             display: flex;

     

       371
       371
       +
             justify-content: space-between;

     

       372
       372
       +
             align-items: center;

     

       373
       373
       +
             padding: 0.75rem 0;

     

       374
       374
       +
             border-bottom: 1px solid var(--secondary);

     

       375
       375
       +
           }

     

       376
       376
       +
       

     

       377
       377
       +
           .detail-row:last-child {

     

       378
       378
       +
             border-bottom: none;

     

       379
       379
       +
           }

     

       380
       380
       +
       

     

       381
       381
       +
           .detail-label {

     

       382
       382
       +
             font-weight: 500;

     

       383
       383
       +
             color: var(--text);

     

       384
       384
       +
           }

     

       385
       385
       +
       

     

       386
       386
       +
           .detail-value {

     

       387
       387
       +
             color: var(--text);

     

       388
       388
       +
             opacity: 0.8;

     

       389
       389
       +
           }

     

       390
       390
       +
       

     

       391
       391
       +
           .form-group {

     

       392
       392
       +
             margin-bottom: 1rem;

     

       393
       393
       +
           }

     

       394
       394
       +
       

     

       395
       395
       +
           .form-label {

     

       396
       396
       +
             display: block;

     

       397
       397
       +
             font-weight: 500;

     

       398
       398
       +
             color: var(--text);

     

       399
       399
       +
             margin-bottom: 0.5rem;

     

       400
       400
       +
           }

     

       401
       401
       +
       

     

       402
       402
       +
           .form-input {

     

       403
       403
       +
             width: 100%;

     

       404
       404
       +
             padding: 0.5rem 0.75rem;

     

       405
       405
       +
             border: 2px solid var(--secondary);

     

       406
       406
       +
             border-radius: 4px;

     

       407
       407
       +
             font-size: 1rem;

     

       408
       408
       +
             font-family: inherit;

     

       409
       409
       +
             background: var(--background);

     

       410
       410
       +
             color: var(--text);

     

       411
       411
       +
           }

     

       412
       412
       +
       

     

       413
       413
       +
           .form-input:focus {

     

       414
       414
       +
             outline: none;

     

       415
       415
       +
             border-color: var(--primary);

     

       416
       416
       +
           }

     

       417
       417
       +
       

     

       418
       418
       +
           .btn {

     

       419
       419
       +
             padding: 0.5rem 1rem;

     

       420
       420
       +
             border: none;

     

       421
       421
       +
             border-radius: 4px;

     

       422
       422
       +
             font-size: 1rem;

     

       423
       423
       +
             font-weight: 500;

     

       424
       424
       +
             font-family: inherit;

     

       425
       425
       +
             cursor: pointer;

     

       426
       426
       +
             transition: all 0.2s;

     

       427
       427
       +
           }

     

       428
       428
       +
       

     

       429
       429
       +
           .btn-primary {

     

       430
       430
       +
             background: var(--primary);

     

       431
       431
       +
             color: white;

     

       432
       432
       +
           }

     

       433
       433
       +
       

     

       434
       434
       +
           .btn-primary:hover {

     

       435
       435
       +
             background: var(--gunmetal);

     

       436
       436
       +
           }

     

       437
       437
       +
       

     

       438
       438
       +
           .btn-primary:disabled {

     

       439
       439
       +
             opacity: 0.5;

     

       440
       440
       +
             cursor: not-allowed;

     

       441
       441
       +
           }

     

       442
       442
       +
       

     

       443
       443
       +
           .btn-danger {

     

       444
       444
       +
             background: #dc2626;

     

       445
       445
       +
             color: white;

     

       446
       446
       +
           }

     

       447
       447
       +
       

     

       448
       448
       +
           .btn-danger:hover {

     

       449
       449
       +
             background: #b91c1c;

     

       450
       450
       +
           }

     

       451
       451
       +
       

     

       452
       452
       +
           .btn-danger:disabled {

     

       453
       453
       +
             opacity: 0.5;

     

       454
       454
       +
             cursor: not-allowed;

     

       455
       455
       +
           }

     

       456
       456
       +
       

     

       457
       457
       +
           .passkey-list {

     

       458
       458
       +
             list-style: none;

     

       459
       459
       +
             padding: 0;

     

       460
       460
       +
             margin: 0;

     

       461
       461
       +
           }

     

       462
       462
       +
       

     

       463
       463
       +
           .passkey-item {

     

       464
       464
       +
             display: flex;

     

       465
       465
       +
             justify-content: space-between;

     

       466
       466
       +
             align-items: center;

     

       467
       467
       +
             padding: 0.75rem;

     

       468
       468
       +
             border: 2px solid var(--secondary);

     

       469
       469
       +
             border-radius: 4px;

     

       470
       470
       +
             margin-bottom: 0.5rem;

     

       471
       471
       +
           }

     

       472
       472
       +
       

     

       473
       473
       +
           .passkey-item:last-child {

     

       474
       474
       +
             margin-bottom: 0;

     

       475
       475
       +
           }

     

       476
       476
       +
       

     

       477
       477
       +
           .passkey-info {

     

       478
       478
       +
             flex: 1;

     

       479
       479
       +
           }

     

       480
       480
       +
       

     

       481
       481
       +
           .passkey-name {

     

       482
       482
       +
             font-weight: 500;

     

       483
       483
       +
             color: var(--text);

     

       484
       484
       +
             margin-bottom: 0.25rem;

     

       485
       485
       +
           }

     

       486
       486
       +
       

     

       487
       487
       +
           .passkey-meta {

     

       488
       488
       +
             font-size: 0.875rem;

     

       489
       489
       +
             color: var(--text);

     

       490
       490
       +
             opacity: 0.6;

     

       491
       491
       +
           }

     

       492
       492
       +
       

     

       493
       493
       +
           .passkey-actions {

     

       494
       494
       +
             display: flex;

     

       495
       495
       +
             gap: 0.5rem;

     

       496
       496
       +
           }

     

       497
       497
       +
       

     

       498
       498
       +
           .btn-small {

     

       499
       499
       +
             padding: 0.25rem 0.75rem;

     

       500
       500
       +
             font-size: 0.875rem;

     

       501
       501
       +
           }

     

       502
       502
       +
       

     

       503
       503
       +
           .empty-passkeys {

     

       504
       504
       +
             text-align: center;

     

       505
       505
       +
             padding: 2rem;

     

       506
       506
       +
             color: var(--text);

     

       507
       507
       +
             opacity: 0.6;

     

       508
       508
       +
             background: rgba(0, 0, 0, 0.02);

     

       509
       509
       +
             border-radius: 4px;

     

       510
       510
       +
           }

     

       511
       511
       +
       

     

       512
       512
       +
           .password-status {

     

       513
       513
       +
             display: inline-block;

     

       514
       514
       +
             padding: 0.25rem 0.75rem;

     

       515
       515
       +
             border-radius: 4px;

     

       516
       516
       +
             font-size: 0.875rem;

     

       517
       517
       +
             font-weight: 500;

     

       518
       518
       +
           }

     

       519
       519
       +
       

     

       520
       520
       +
           .password-status.has-password {

     

       521
       521
       +
             background: #dcfce7;

     

       522
       522
       +
             color: #166534;

     

       523
       523
       +
           }

     

       524
       524
       +
       

     

       525
       525
       +
           .password-status.no-password {

     

       526
       526
       +
             background: #fee2e2;

     

       527
       527
       +
             color: #991b1b;

     

       528
       528
       +
           }

     

       529
       529
       +
       

     

       530
       530
       +
           .search {

     

       531
       531
       +
             width: 100%;

     

       532
       532
       +
             max-width: 30rem;

     

       533
       533
       +
             margin-bottom: 1rem;

     

       534
       534
       +
             padding: 0.5rem 0.75rem;

     

       535
       535
       +
             border: 2px solid var(--secondary);

     

       536
       536
       +
             border-radius: 4px;

     

       537
       537
       +
             font-size: 1rem;

     

       538
       538
       +
             font-family: inherit;

     

       539
       539
       +
             background: var(--background);

     

       540
       540
       +
             color: var(--text);

     

       541
       541
       +
           }

     

       542
       542
       +
       

     

       543
       543
       +
           .search:focus {

     

       544
       544
       +
             outline: none;

     

       545
       545
       +
             border-color: var(--primary);

     

       546
       546
       +
           }

     

       547
       547
       +
       

     

       548
       548
       +
           th.sortable {

     

       549
       549
       +
             cursor: pointer;

     

       550
       550
       +
             user-select: none;

     

       551
       551
       +
             position: relative;

     

       552
       552
       +
           }

     

       553
       553
       +
       

     

       554
       554
       +
           th.sortable:hover {

     

       555
       555
       +
             background: var(--gunmetal);

     

       556
       556
       +
           }

     

       557
       557
       +
       

     

       558
       558
       +
           th.sortable::after {

     

       559
       559
       +
             content: '';

     

       560
       560
       +
             margin-left: 0.5rem;

     

       561
       561
       +
             opacity: 0.3;

     

       562
       562
       +
           }

     

       563
       563
       +
       

     

       564
       564
       +
           th.sortable.asc::after {

     

       565
       565
       +
             content: '▲';

     

       566
       566
       +
             opacity: 1;

     

       567
       567
       +
           }

     

       568
       568
       +
       

     

       569
       569
       +
           th.sortable.desc::after {

     

       570
       570
       +
             content: '▼';

     

       571
       571
       +
             opacity: 1;

     

       572
       572
       +
           }

     

       573
       573
       +
       

     

       574
       574
       +
           .session-list {

     

       575
       575
       +
             list-style: none;

     

       576
       576
       +
             padding: 0;

     

       577
       577
       +
             margin: 0;

     

       578
       578
       +
           }

     

       579
       579
       +
       

     

       580
       580
       +
           .session-item {

     

       581
       581
       +
             display: flex;

     

       582
       582
       +
             justify-content: space-between;

     

       583
       583
       +
             align-items: center;

     

       584
       584
       +
             padding: 0.75rem;

     

       585
       585
       +
             border: 2px solid var(--secondary);

     

       586
       586
       +
             border-radius: 4px;

     

       587
       587
       +
             margin-bottom: 0.5rem;

     

       588
       588
       +
           }

     

       589
       589
       +
       

     

       590
       590
       +
           .session-item:last-child {

     

       591
       591
       +
             margin-bottom: 0;

     

       592
       592
       +
           }

     

       593
       593
       +
       

     

       594
       594
       +
           .session-info {

     

       595
       595
       +
             flex: 1;

     

       596
       596
       +
           }

     

       597
       597
       +
       

     

       598
       598
       +
           .session-device {

     

       599
       599
       +
             font-weight: 500;

     

       600
       600
       +
             color: var(--text);

     

       601
       601
       +
             margin-bottom: 0.25rem;

     

       602
       602
       +
           }

     

       603
       603
       +
       

     

       604
       604
       +
           .session-meta {

     

       605
       605
       +
             font-size: 0.875rem;

     

       606
       606
       +
             color: var(--text);

     

       607
       607
       +
             opacity: 0.6;

     

       608
       608
       +
           }

     

       609
       609
       +
       

     

       610
       610
       +
           .session-actions {

     

       611
       611
       +
             display: flex;

     

       612
       612
       +
             gap: 0.5rem;

     

       613
       613
       +
           }

     

       614
       614
       +
       

     

       615
       615
       +
           .empty-sessions {

     

       616
       616
       +
             text-align: center;

     

       617
       617
       +
             padding: 2rem;

     

       618
       618
       +
             color: var(--text);

     

       619
       619
       +
             opacity: 0.6;

     

       620
       620
       +
             background: rgba(0, 0, 0, 0.02);

     

       621
       621
       +
             border-radius: 4px;

     

       622
       622
       +
           }

     

       623
       623
       +
       

     

       624
       624
       +
           .section-actions {

     

       625
       625
       +
             display: flex;

     

       626
       626
       +
             justify-content: space-between;

     

       627
       627
       +
             align-items: center;

     

       628
       628
       +
             margin-bottom: 1rem;

     

       629
       629
       +
           }

     

       276
       630
        
         </style>

     

       277
       631
        
       </head>

     

       278
       632
        
       

     
···

       325
       679
        
             <div id="users-tab" class="tab-content">

     

       326
       680
        
               <div class="section">

     

       327
       681
        
                 <h2 class="section-title">All Users</h2>

     

       682
       682
       +
                 <input type="text" id="user-search" class="search" placeholder="Search by name or email..." />

     

       328
       683
        
                 <div id="users-table"></div>

     

       329
       684
        
               </div>

     

       330
       685
        
             </div>

     

       331
       686
        
           </div>

     

       332
       687
        
         </main>

     

       333
       688
        
       

     

       689
       689
       +
         <div id="user-modal" class="modal">

     

       690
       690
       +
           <div class="modal-content">

     

       691
       691
       +
             <div class="modal-header">

     

       692
       692
       +
               <h2 class="modal-title">User Details</h2>

     

       693
       693
       +
               <button class="modal-close" aria-label="Close">&times;</button>

     

       694
       694
       +
             </div>

     

       695
       695
       +
             <div class="modal-body">

     

       696
       696
       +
               <div class="detail-section">

     

       697
       697
       +
                 <h3 class="detail-section-title">User Information</h3>

     

       698
       698
       +
                 <div class="detail-row">

     

       699
       699
       +
                   <span class="detail-label">Email</span>

     

       700
       700
       +
                   <span class="detail-value" id="modal-email">-</span>

     

       701
       701
       +
                 </div>

     

       702
       702
       +
                 <div class="detail-row">

     

       703
       703
       +
                   <span class="detail-label">Name</span>

     

       704
       704
       +
                   <span class="detail-value" id="modal-name">-</span>

     

       705
       705
       +
                 </div>

     

       706
       706
       +
                 <div class="detail-row">

     

       707
       707
       +
                   <span class="detail-label">Role</span>

     

       708
       708
       +
                   <span class="detail-value" id="modal-role">-</span>

     

       709
       709
       +
                 </div>

     

       710
       710
       +
                 <div class="detail-row">

     

       711
       711
       +
                   <span class="detail-label">Joined</span>

     

       712
       712
       +
                   <span class="detail-value" id="modal-joined">-</span>

     

       713
       713
       +
                 </div>

     

       714
       714
       +
                 <div class="detail-row">

     

       715
       715
       +
                   <span class="detail-label">Last Login</span>

     

       716
       716
       +
                   <span class="detail-value" id="modal-last-login">-</span>

     

       717
       717
       +
                 </div>

     

       718
       718
       +
                 <div class="detail-row">

     

       719
       719
       +
                   <span class="detail-label">Transcriptions</span>

     

       720
       720
       +
                   <span class="detail-value" id="modal-transcription-count">-</span>

     

       721
       721
       +
                 </div>

     

       722
       722
       +
                 <div class="detail-row">

     

       723
       723
       +
                   <span class="detail-label">Password Status</span>

     

       724
       724
       +
                   <span id="modal-password-status">-</span>

     

       725
       725
       +
                 </div>

     

       726
       726
       +
               </div>

     

       727
       727
       +
       

     

       728
       728
       +
               <div class="detail-section">

     

       729
       729
       +
                 <h3 class="detail-section-title">Change Name</h3>

     

       730
       730
       +
                 <form id="change-name-form">

     

       731
       731
       +
                   <div class="form-group">

     

       732
       732
       +
                     <label class="form-label" for="new-name">New Name</label>

     

       733
       733
       +
                     <input type="text" id="new-name" class="form-input" placeholder="Enter new name">

     

       734
       734
       +
                   </div>

     

       735
       735
       +
                   <button type="submit" class="btn btn-primary">Update Name</button>

     

       736
       736
       +
                 </form>

     

       737
       737
       +
               </div>

     

       738
       738
       +
       

     

       739
       739
       +
               <div class="detail-section">

     

       740
       740
       +
                 <h3 class="detail-section-title">Change Email</h3>

     

       741
       741
       +
                 <form id="change-email-form">

     

       742
       742
       +
                   <div class="form-group">

     

       743
       743
       +
                     <label class="form-label" for="new-email">New Email</label>

     

       744
       744
       +
                     <input type="email" id="new-email" class="form-input" placeholder="Enter new email">

     

       745
       745
       +
                   </div>

     

       746
       746
       +
                   <button type="submit" class="btn btn-primary">Update Email</button>

     

       747
       747
       +
                 </form>

     

       748
       748
       +
               </div>

     

       749
       749
       +
       

     

       750
       750
       +
               <div class="detail-section">

     

       751
       751
       +
                 <h3 class="detail-section-title">Change Password</h3>

     

       752
       752
       +
                 <form id="change-password-form">

     

       753
       753
       +
                   <div class="form-group">

     

       754
       754
       +
                     <label class="form-label" for="new-password">New Password</label>

     

       755
       755
       +
                     <input type="password" id="new-password" class="form-input" placeholder="Enter new password (min 8 characters)">

     

       756
       756
       +
                   </div>

     

       757
       757
       +
                   <button type="submit" class="btn btn-primary">Update Password</button>

     

       758
       758
       +
                 </form>

     

       759
       759
       +
               </div>

     

       760
       760
       +
       

     

       761
       761
       +
               <div class="detail-section">

     

       762
       762
       +
                 <h3 class="detail-section-title">Active Sessions</h3>

     

       763
       763
       +
                 <div class="section-actions">

     

       764
       764
       +
                   <span class="detail-label" id="session-count">0 active sessions</span>

     

       765
       765
       +
                   <button id="logout-all-btn" class="btn btn-danger btn-small">Logout All Devices</button>

     

       766
       766
       +
                 </div>

     

       767
       767
       +
                 <div id="sessions-container">

     

       768
       768
       +
                   <div class="loading">Loading sessions...</div>

     

       769
       769
       +
                 </div>

     

       770
       770
       +
               </div>

     

       771
       771
       +
       

     

       772
       772
       +
               <div class="detail-section">

     

       773
       773
       +
                 <h3 class="detail-section-title">Passkeys</h3>

     

       774
       774
       +
                 <div id="passkeys-container">

     

       775
       775
       +
                   <div class="loading">Loading passkeys...</div>

     

       776
       776
       +
                 </div>

     

       777
       777
       +
               </div>

     

       778
       778
       +
             </div>

     

       779
       779
       +
           </div>

     

       780
       780
       +
         </div>

     

       781
       781
       +
       

     

       334
       782
        
         <script type="module" src="../components/auth.ts"></script>

     

       335
       783
        
         <script type="module">

     

       336
       784
        
           const errorMessage = document.getElementById('error-message');

     
···

       338
       786
        
           const content = document.getElementById('content');

     

       339
       787
        
           const transcriptionsTable = document.getElementById('transcriptions-table');

     

       340
       788
        
           const usersTable = document.getElementById('users-table');

     

       789
       789
       +
           const userModal = document.getElementById('user-modal');

     

       790
       790
       +
           const modalClose = userModal.querySelector('.modal-close');

     

       341
       791
        
       

     

       342
       792
        
           let currentUserEmail = null;

     

       793
       793
       +
           let currentModalUserId = null;

     

       794
       794
       +
           let allUsers = [];

     

       795
       795
       +
           let userSortKey = 'created_at';

     

       796
       796
       +
           let userSortDirection = 'desc';

     

       797
       797
       +
           let userSearchTerm = '';

     

       343
       798
        
       

     

       344
       799
        
           // Get current user info

     

       345
       800
        
           async function getCurrentUser() {

     
···

       365
       820
        
             return date.toLocaleString();

     

       366
       821
        
           }

     

       367
       822
        
       

     

       823
       823
       +
           function parseUserAgent(userAgent) {

     

       824
       824
       +
             if (!userAgent) return '🖥️ Unknown Device';

     

       825
       825
       +
             if (userAgent.includes('iPhone')) return '📱 iPhone';

     

       826
       826
       +
             if (userAgent.includes('iPad')) return '📱 iPad';

     

       827
       827
       +
             if (userAgent.includes('Android')) return '📱 Android';

     

       828
       828
       +
             if (userAgent.includes('Mac')) return '💻 Mac';

     

       829
       829
       +
             if (userAgent.includes('Windows')) return '💻 Windows';

     

       830
       830
       +
             if (userAgent.includes('Linux')) return '💻 Linux';

     

       831
       831
       +
             return '🖥️ Unknown Device';

     

       832
       832
       +
           }

     

       833
       833
       +
       

     

       834
       834
       +
           // Modal functions

     

       835
       835
       +
           function openUserModal(userId) {

     

       836
       836
       +
             currentModalUserId = userId;

     

       837
       837
       +
             userModal.classList.add('active');

     

       838
       838
       +
             loadUserDetails(userId);

     

       839
       839
       +
           }

     

       840
       840
       +
       

     

       841
       841
       +
           function closeUserModal() {

     

       842
       842
       +
             userModal.classList.remove('active');

     

       843
       843
       +
             currentModalUserId = null;

     

       844
       844
       +
           }

     

       845
       845
       +
       

     

       846
       846
       +
           async function loadUserDetails(userId) {

     

       847
       847
       +
             try {

     

       848
       848
       +
               const res = await fetch(`/api/admin/users/${userId}/details`);

     

       849
       849
       +
               if (!res.ok) {

     

       850
       850
       +
                 throw new Error('Failed to load user details');

     

       851
       851
       +
               }

     

       852
       852
       +
       

     

       853
       853
       +
               const user = await res.json();

     

       854
       854
       +
       

     

       855
       855
       +
               document.getElementById('modal-email').textContent = user.email;

     

       856
       856
       +
               document.getElementById('modal-name').textContent = user.name || 'Not set';

     

       857
       857
       +
               document.getElementById('modal-role').textContent = user.role;

     

       858
       858
       +
               document.getElementById('modal-joined').textContent = formatTimestamp(user.created_at);

     

       859
       859
       +
               document.getElementById('modal-last-login').textContent = user.last_login ? formatTimestamp(user.last_login) : 'Never';

     

       860
       860
       +
               document.getElementById('modal-transcription-count').textContent = user.transcriptionCount;

     

       861
       861
       +
       

     

       862
       862
       +
               const passwordStatus = document.getElementById('modal-password-status');

     

       863
       863
       +
               if (user.hasPassword) {

     

       864
       864
       +
                 passwordStatus.innerHTML = '<span class="password-status has-password">Has password</span>';

     

       865
       865
       +
               } else {

     

       866
       866
       +
                 passwordStatus.innerHTML = '<span class="password-status no-password">No password (passkey only)</span>';

     

       867
       867
       +
               }

     

       868
       868
       +
       

     

       869
       869
       +
               document.getElementById('new-name').value = user.name || '';

     

       870
       870
       +
               document.getElementById('new-email').value = user.email;

     

       871
       871
       +
       

     

       872
       872
       +
               renderSessions(user.sessions, userId);

     

       873
       873
       +
               renderPasskeys(user.passkeys, userId);

     

       874
       874
       +
             } catch {

     

       875
       875
       +
               alert('Failed to load user details');

     

       876
       876
       +
               closeUserModal();

     

       877
       877
       +
             }

     

       878
       878
       +
           }

     

       879
       879
       +
       

     

       880
       880
       +
           function renderSessions(sessions, userId) {

     

       881
       881
       +
             const container = document.getElementById('sessions-container');

     

       882
       882
       +
             const sessionCount = document.getElementById('session-count');

     

       883
       883
       +
             const logoutAllBtn = document.getElementById('logout-all-btn');

     

       884
       884
       +
       

     

       885
       885
       +
             sessionCount.textContent = `${sessions.length} active session${sessions.length !== 1 ? 's' : ''}`;

     

       886
       886
       +
       

     

       887
       887
       +
             if (sessions.length === 0) {

     

       888
       888
       +
               container.innerHTML = '<div class="empty-sessions">No active sessions</div>';

     

       889
       889
       +
               logoutAllBtn.disabled = true;

     

       890
       890
       +
               return;

     

       891
       891
       +
             }

     

       892
       892
       +
       

     

       893
       893
       +
             logoutAllBtn.disabled = false;

     

       894
       894
       +
       

     

       895
       895
       +
             const list = document.createElement('ul');

     

       896
       896
       +
             list.className = 'session-list';

     

       897
       897
       +
             list.innerHTML = sessions.map(s => `

     

       898
       898
       +
               <li class="session-item">

     

       899
       899
       +
                 <div class="session-info">

     

       900
       900
       +
                   <div class="session-device">${parseUserAgent(s.user_agent)}</div>

     

       901
       901
       +
                   <div class="session-meta">

     

       902
       902
       +
                     IP: ${s.ip_address || 'Unknown'} • 

     

       903
       903
       +
                     Created: ${formatTimestamp(s.created_at)} • 

     

       904
       904
       +
                     Expires: ${formatTimestamp(s.expires_at)}

     

       905
       905
       +
                   </div>

     

       906
       906
       +
                 </div>

     

       907
       907
       +
                 <div class="session-actions">

     

       908
       908
       +
                   <button class="btn btn-danger btn-small revoke-session-btn" data-session-id="${s.id}" data-user-id="${userId}">

     

       909
       909
       +
                     Revoke

     

       910
       910
       +
                   </button>

     

       911
       911
       +
                 </div>

     

       912
       912
       +
               </li>

     

       913
       913
       +
             `).join('');

     

       914
       914
       +
       

     

       915
       915
       +
             container.innerHTML = '';

     

       916
       916
       +
             container.appendChild(list);

     

       917
       917
       +
       

     

       918
       918
       +
             // Add revoke event listeners

     

       919
       919
       +
             list.querySelectorAll('.revoke-session-btn').forEach(btn => {

     

       920
       920
       +
               btn.addEventListener('click', async (e) => {

     

       921
       921
       +
                 const button = e.target;

     

       922
       922
       +
                 const sessionId = button.dataset.sessionId;

     

       923
       923
       +
                 const userId = button.dataset.userId;

     

       924
       924
       +
       

     

       925
       925
       +
                 if (!confirm('Revoke this session? The user will be logged out of this device.')) {

     

       926
       926
       +
                   return;

     

       927
       927
       +
                 }

     

       928
       928
       +
       

     

       929
       929
       +
                 button.disabled = true;

     

       930
       930
       +
                 button.textContent = 'Revoking...';

     

       931
       931
       +
       

     

       932
       932
       +
                 try {

     

       933
       933
       +
                   const res = await fetch(`/api/admin/users/${userId}/sessions/${sessionId}`, {

     

       934
       934
       +
                     method: 'DELETE'

     

       935
       935
       +
                   });

     

       936
       936
       +
       

     

       937
       937
       +
                   if (!res.ok) {

     

       938
       938
       +
                     throw new Error('Failed to revoke session');

     

       939
       939
       +
                   }

     

       940
       940
       +
       

     

       941
       941
       +
                   await loadUserDetails(userId);

     

       942
       942
       +
                 } catch {

     

       943
       943
       +
                   alert('Failed to revoke session');

     

       944
       944
       +
                   button.disabled = false;

     

       945
       945
       +
                   button.textContent = 'Revoke';

     

       946
       946
       +
                 }

     

       947
       947
       +
               });

     

       948
       948
       +
             });

     

       949
       949
       +
           }

     

       950
       950
       +
       

     

       951
       951
       +
           function renderPasskeys(passkeys, userId) {

     

       952
       952
       +
             const container = document.getElementById('passkeys-container');

     

       953
       953
       +
       

     

       954
       954
       +
             if (passkeys.length === 0) {

     

       955
       955
       +
               container.innerHTML = '<div class="empty-passkeys">No passkeys registered</div>';

     

       956
       956
       +
               return;

     

       957
       957
       +
             }

     

       958
       958
       +
       

     

       959
       959
       +
             const list = document.createElement('ul');

     

       960
       960
       +
             list.className = 'passkey-list';

     

       961
       961
       +
             list.innerHTML = passkeys.map(pk => `

     

       962
       962
       +
               <li class="passkey-item">

     

       963
       963
       +
                 <div class="passkey-info">

     

       964
       964
       +
                   <div class="passkey-name">${pk.name || 'Unnamed Passkey'}</div>

     

       965
       965
       +
                   <div class="passkey-meta">

     

       966
       966
       +
                     Created: ${formatTimestamp(pk.created_at)}

     

       967
       967
       +
                     ${pk.last_used_at ? ` • Last used: ${formatTimestamp(pk.last_used_at)}` : ''}

     

       968
       968
       +
                   </div>

     

       969
       969
       +
                 </div>

     

       970
       970
       +
                 <div class="passkey-actions">

     

       971
       971
       +
                   <button class="btn btn-danger btn-small revoke-passkey-btn" data-passkey-id="${pk.id}" data-user-id="${userId}">

     

       972
       972
       +
                     Revoke

     

       973
       973
       +
                   </button>

     

       974
       974
       +
                 </div>

     

       975
       975
       +
               </li>

     

       976
       976
       +
             `).join('');

     

       977
       977
       +
       

     

       978
       978
       +
             container.innerHTML = '';

     

       979
       979
       +
             container.appendChild(list);

     

       980
       980
       +
       

     

       981
       981
       +
             list.querySelectorAll('.revoke-passkey-btn').forEach(btn => {

     

       982
       982
       +
               btn.addEventListener('click', async (e) => {

     

       983
       983
       +
                 const button = e.target;

     

       984
       984
       +
                 const passkeyId = button.dataset.passkeyId;

     

       985
       985
       +
                 const userId = button.dataset.userId;

     

       986
       986
       +
       

     

       987
       987
       +
                 if (!confirm('Are you sure you want to revoke this passkey? The user will no longer be able to use it to sign in.')) {

     

       988
       988
       +
                   return;

     

       989
       989
       +
                 }

     

       990
       990
       +
       

     

       991
       991
       +
                 button.disabled = true;

     

       992
       992
       +
                 button.textContent = 'Revoking...';

     

       993
       993
       +
       

     

       994
       994
       +
                 try {

     

       995
       995
       +
                   const res = await fetch(`/api/admin/users/${userId}/passkeys/${passkeyId}`, {

     

       996
       996
       +
                     method: 'DELETE'

     

       997
       997
       +
                   });

     

       998
       998
       +
       

     

       999
       999
       +
                   if (!res.ok) {

     

       1000
       1000
       +
                     throw new Error('Failed to revoke passkey');

     

       1001
       1001
       +
                   }

     

       1002
       1002
       +
       

     

       1003
       1003
       +
                   await loadUserDetails(userId);

     

       1004
       1004
       +
                 } catch {

     

       1005
       1005
       +
                   alert('Failed to revoke passkey');

     

       1006
       1006
       +
                   button.disabled = false;

     

       1007
       1007
       +
                   button.textContent = 'Revoke';

     

       1008
       1008
       +
                 }

     

       1009
       1009
       +
               });

     

       1010
       1010
       +
             });

     

       1011
       1011
       +
           }

     

       1012
       1012
       +
       

     

       1013
       1013
       +
           modalClose.addEventListener('click', closeUserModal);

     

       1014
       1014
       +
           userModal.addEventListener('click', (e) => {

     

       1015
       1015
       +
             if (e.target === userModal) {

     

       1016
       1016
       +
               closeUserModal();

     

       1017
       1017
       +
             }

     

       1018
       1018
       +
           });

     

       1019
       1019
       +
       

     

       1020
       1020
       +
           document.getElementById('change-name-form').addEventListener('submit', async (e) => {

     

       1021
       1021
       +
             e.preventDefault();

     

       1022
       1022
       +
             const name = document.getElementById('new-name').value.trim();

     

       1023
       1023
       +
       

     

       1024
       1024
       +
             if (!name) {

     

       1025
       1025
       +
               alert('Please enter a name');

     

       1026
       1026
       +
               return;

     

       1027
       1027
       +
             }

     

       1028
       1028
       +
       

     

       1029
       1029
       +
             const submitBtn = e.target.querySelector('button[type="submit"]');

     

       1030
       1030
       +
             submitBtn.disabled = true;

     

       1031
       1031
       +
             submitBtn.textContent = 'Updating...';

     

       1032
       1032
       +
       

     

       1033
       1033
       +
             try {

     

       1034
       1034
       +
               const res = await fetch(`/api/admin/users/${currentModalUserId}/name`, {

     

       1035
       1035
       +
                 method: 'PUT',

     

       1036
       1036
       +
                 headers: {'Content-Type': 'application/json'},

     

       1037
       1037
       +
                 body: JSON.stringify({name})

     

       1038
       1038
       +
               });

     

       1039
       1039
       +
       

     

       1040
       1040
       +
               if (!res.ok) {

     

       1041
       1041
       +
                 throw new Error('Failed to update name');

     

       1042
       1042
       +
               }

     

       1043
       1043
       +
       

     

       1044
       1044
       +
               alert('Name updated successfully');

     

       1045
       1045
       +
               await loadUserDetails(currentModalUserId);

     

       1046
       1046
       +
               await loadData();

     

       1047
       1047
       +
             } catch {

     

       1048
       1048
       +
               alert('Failed to update name');

     

       1049
       1049
       +
             } finally {

     

       1050
       1050
       +
               submitBtn.disabled = false;

     

       1051
       1051
       +
               submitBtn.textContent = 'Update Name';

     

       1052
       1052
       +
             }

     

       1053
       1053
       +
           });

     

       1054
       1054
       +
       

     

       1055
       1055
       +
           document.getElementById('change-email-form').addEventListener('submit', async (e) => {

     

       1056
       1056
       +
             e.preventDefault();

     

       1057
       1057
       +
             const email = document.getElementById('new-email').value.trim();

     

       1058
       1058
       +
       

     

       1059
       1059
       +
             if (!email || !email.includes('@')) {

     

       1060
       1060
       +
               alert('Please enter a valid email');

     

       1061
       1061
       +
               return;

     

       1062
       1062
       +
             }

     

       1063
       1063
       +
       

     

       1064
       1064
       +
             const submitBtn = e.target.querySelector('button[type="submit"]');

     

       1065
       1065
       +
             submitBtn.disabled = true;

     

       1066
       1066
       +
             submitBtn.textContent = 'Updating...';

     

       1067
       1067
       +
       

     

       1068
       1068
       +
             try {

     

       1069
       1069
       +
               const res = await fetch(`/api/admin/users/${currentModalUserId}/email`, {

     

       1070
       1070
       +
                 method: 'PUT',

     

       1071
       1071
       +
                 headers: {'Content-Type': 'application/json'},

     

       1072
       1072
       +
                 body: JSON.stringify({email})

     

       1073
       1073
       +
               });

     

       1074
       1074
       +
       

     

       1075
       1075
       +
               if (!res.ok) {

     

       1076
       1076
       +
                 const data = await res.json();

     

       1077
       1077
       +
                 throw new Error(data.error || 'Failed to update email');

     

       1078
       1078
       +
               }

     

       1079
       1079
       +
       

     

       1080
       1080
       +
               alert('Email updated successfully');

     

       1081
       1081
       +
               await loadUserDetails(currentModalUserId);

     

       1082
       1082
       +
               await loadData();

     

       1083
       1083
       +
             } catch (error) {

     

       1084
       1084
       +
               alert(error.message || 'Failed to update email');

     

       1085
       1085
       +
             } finally {

     

       1086
       1086
       +
               submitBtn.disabled = false;

     

       1087
       1087
       +
               submitBtn.textContent = 'Update Email';

     

       1088
       1088
       +
             }

     

       1089
       1089
       +
           });

     

       1090
       1090
       +
       

     

       1091
       1091
       +
           document.getElementById('change-password-form').addEventListener('submit', async (e) => {

     

       1092
       1092
       +
             e.preventDefault();

     

       1093
       1093
       +
             const password = document.getElementById('new-password').value;

     

       1094
       1094
       +
       

     

       1095
       1095
       +
             if (password.length < 8) {

     

       1096
       1096
       +
               alert('Password must be at least 8 characters');

     

       1097
       1097
       +
               return;

     

       1098
       1098
       +
             }

     

       1099
       1099
       +
       

     

       1100
       1100
       +
             if (!confirm('Are you sure you want to change this user\'s password? This will log them out of all devices.')) {

     

       1101
       1101
       +
               return;

     

       1102
       1102
       +
             }

     

       1103
       1103
       +
       

     

       1104
       1104
       +
             const submitBtn = e.target.querySelector('button[type="submit"]');

     

       1105
       1105
       +
             submitBtn.disabled = true;

     

       1106
       1106
       +
             submitBtn.textContent = 'Updating...';

     

       1107
       1107
       +
       

     

       1108
       1108
       +
             try {

     

       1109
       1109
       +
               const res = await fetch(`/api/admin/users/${currentModalUserId}/password`, {

     

       1110
       1110
       +
                 method: 'PUT',

     

       1111
       1111
       +
                 headers: {'Content-Type': 'application/json'},

     

       1112
       1112
       +
                 body: JSON.stringify({password})

     

       1113
       1113
       +
               });

     

       1114
       1114
       +
       

     

       1115
       1115
       +
               if (!res.ok) {

     

       1116
       1116
       +
                 throw new Error('Failed to update password');

     

       1117
       1117
       +
               }

     

       1118
       1118
       +
       

     

       1119
       1119
       +
               alert('Password updated successfully. User has been logged out of all devices.');

     

       1120
       1120
       +
               document.getElementById('new-password').value = '';

     

       1121
       1121
       +
               await loadUserDetails(currentModalUserId);

     

       1122
       1122
       +
             } catch {

     

       1123
       1123
       +
               alert('Failed to update password');

     

       1124
       1124
       +
             } finally {

     

       1125
       1125
       +
               submitBtn.disabled = false;

     

       1126
       1126
       +
               submitBtn.textContent = 'Update Password';

     

       1127
       1127
       +
             }

     

       1128
       1128
       +
           });

     

       1129
       1129
       +
       

     

       1130
       1130
       +
           document.getElementById('logout-all-btn').addEventListener('click', async (e) => {

     

       1131
       1131
       +
             if (!confirm('Are you sure you want to logout this user from ALL devices? This will terminate all active sessions.')) {

     

       1132
       1132
       +
               return;

     

       1133
       1133
       +
             }

     

       1134
       1134
       +
       

     

       1135
       1135
       +
             const button = e.target;

     

       1136
       1136
       +
             button.disabled = true;

     

       1137
       1137
       +
             button.textContent = 'Logging out...';

     

       1138
       1138
       +
       

     

       1139
       1139
       +
             try {

     

       1140
       1140
       +
               const res = await fetch(`/api/admin/users/${currentModalUserId}/sessions`, {

     

       1141
       1141
       +
                 method: 'DELETE'

     

       1142
       1142
       +
               });

     

       1143
       1143
       +
       

     

       1144
       1144
       +
               if (!res.ok) {

     

       1145
       1145
       +
                 throw new Error('Failed to logout all devices');

     

       1146
       1146
       +
               }

     

       1147
       1147
       +
       

     

       1148
       1148
       +
               alert('User logged out from all devices');

     

       1149
       1149
       +
               await loadUserDetails(currentModalUserId);

     

       1150
       1150
       +
             } catch {

     

       1151
       1151
       +
               alert('Failed to logout all devices');

     

       1152
       1152
       +
             } finally {

     

       1153
       1153
       +
               button.disabled = false;

     

       1154
       1154
       +
               button.textContent = 'Logout All Devices';

     

       1155
       1155
       +
             }

     

       1156
       1156
       +
           });

     

       1157
       1157
       +
       

     

       1158
       1158
       +
       

     

       368
       1159
        
           function renderTranscriptions(transcriptions) {

     

       369
       1160
        
             if (transcriptions.length === 0) {

     

       370
       1161
        
               transcriptionsTable.innerHTML = '<div class="empty-state">No transcriptions yet</div>';

     
···

       447
       1238
        
           }

     

       448
       1239
        
       

     

       449
       1240
        
           function renderUsers(users) {

     

       450
       450
       -
             if (users.length === 0) {

     

       451
       451
       -
               usersTable.innerHTML = '<div class="empty-state">No users yet</div>';

     

       1241
       1241
       +
             allUsers = users;

     

       1242
       1242
       +
       

     

       1243
       1243
       +
             // Filter users based on search term

     

       1244
       1244
       +
             let filteredUsers = users.filter(u => {

     

       1245
       1245
       +
               if (!userSearchTerm) return true;

     

       1246
       1246
       +
               const term = userSearchTerm.toLowerCase();

     

       1247
       1247
       +
               const name = (u.name || '').toLowerCase();

     

       1248
       1248
       +
               const email = u.email.toLowerCase();

     

       1249
       1249
       +
               return name.includes(term) || email.includes(term);

     

       1250
       1250
       +
             });

     

       1251
       1251
       +
       

     

       1252
       1252
       +
             // Sort users

     

       1253
       1253
       +
             filteredUsers.sort((a, b) => {

     

       1254
       1254
       +
               let aVal = a[userSortKey];

     

       1255
       1255
       +
               let bVal = b[userSortKey];

     

       1256
       1256
       +
       

     

       1257
       1257
       +
               // Handle null values

     

       1258
       1258
       +
               if (aVal === null || aVal === undefined) aVal = '';

     

       1259
       1259
       +
               if (bVal === null || bVal === undefined) bVal = '';

     

       1260
       1260
       +
       

     

       1261
       1261
       +
               let comparison = 0;

     

       1262
       1262
       +
               if (typeof aVal === 'string' && typeof bVal === 'string') {

     

       1263
       1263
       +
                 comparison = aVal.localeCompare(bVal);

     

       1264
       1264
       +
               } else if (typeof aVal === 'number' && typeof bVal === 'number') {

     

       1265
       1265
       +
                 comparison = aVal - bVal;

     

       1266
       1266
       +
               } else {

     

       1267
       1267
       +
                 comparison = String(aVal).localeCompare(String(bVal));

     

       1268
       1268
       +
               }

     

       1269
       1269
       +
       

     

       1270
       1270
       +
               return userSortDirection === 'asc' ? comparison : -comparison;

     

       1271
       1271
       +
             });

     

       1272
       1272
       +
       

     

       1273
       1273
       +
             if (filteredUsers.length === 0) {

     

       1274
       1274
       +
               usersTable.innerHTML = '<div class="empty-state">No users found</div>';

     

       452
       1275
        
               return;

     

       453
       1276
        
             }

     

       454
       1277
        
       

     
···

       456
       1279
        
             table.innerHTML = `

     

       457
       1280
        
               <thead>

     

       458
       1281
        
                 <tr>

     

       459
       459
       -
                   <th>User</th>

     

       460
       460
       -
                   <th>Email</th>

     

       461
       461
       -
                   <th>Role</th>

     

       462
       462
       -
                   <th>Joined</th>

     

       1282
       1282
       +
                   <th class="sortable ${userSortKey === 'name' ? userSortDirection : ''}" data-sort="name">User</th>

     

       1283
       1283
       +
                   <th class="sortable ${userSortKey === 'email' ? userSortDirection : ''}" data-sort="email">Email</th>

     

       1284
       1284
       +
                   <th class="sortable ${userSortKey === 'role' ? userSortDirection : ''}" data-sort="role">Role</th>

     

       1285
       1285
       +
                   <th class="sortable ${userSortKey === 'transcription_count' ? userSortDirection : ''}" data-sort="transcription_count">Transcriptions</th>

     

       1286
       1286
       +
                   <th class="sortable ${userSortKey === 'last_login' ? userSortDirection : ''}" data-sort="last_login">Last Login</th>

     

       1287
       1287
       +
                   <th class="sortable ${userSortKey === 'created_at' ? userSortDirection : ''}" data-sort="created_at">Joined</th>

     

       463
       1288
        
                   <th>Actions</th>

     

       464
       1289
        
                 </tr>

     

       465
       1290
        
               </thead>

     

       466
       1291
        
               <tbody>

     

       467
       467
       -
                 ${users.map(u => `

     

       1292
       1292
       +
                 ${filteredUsers.map(u => `

     

       468
       1293
        
                   <tr>

     

       469
       1294
        
                     <td>

     

       470
       1295
        
                       <div class="user-info">

     
···

       484
       1309
        
                         <option value="admin" ${u.role === 'admin' ? 'selected' : ''}>Admin</option>

     

       485
       1310
        
                       </select>

     

       486
       1311
        
                     </td>

     

       1312
       1312
       +
                     <td>${u.transcription_count}</td>

     

       1313
       1313
       +
                     <td class="timestamp">${u.last_login ? formatTimestamp(u.last_login) : 'Never'}</td>

     

       487
       1314
        
                     <td class="timestamp">${formatTimestamp(u.created_at)}</td>

     

       488
       1315
        
                     <td>

     

       489
       489
       -
                       <button class="delete-user-btn" data-user-id="${u.id}" data-user-email="${u.email}">Delete</button>

     

       1316
       1316
       +
                       <div class="actions">

     

       1317
       1317
       +
                         <button class="delete-user-btn" data-user-id="${u.id}" data-user-email="${u.email}">Delete</button>

     

       1318
       1318
       +
                       </div>

     

       490
       1319
        
                     </td>

     

       491
       1320
        
                   </tr>

     

       492
       1321
        
                 `).join('')}

     
···

       495
       1324
        
             usersTable.innerHTML = '';

     

       496
       1325
        
             usersTable.appendChild(table);

     

       497
       1326
        
       

     

       1327
       1327
       +
             // Add sort event listeners

     

       1328
       1328
       +
             table.querySelectorAll('th.sortable').forEach(th => {

     

       1329
       1329
       +
               th.addEventListener('click', () => {

     

       1330
       1330
       +
                 const sortKey = th.dataset.sort;

     

       1331
       1331
       +
                 if (userSortKey === sortKey) {

     

       1332
       1332
       +
                   userSortDirection = userSortDirection === 'asc' ? 'desc' : 'asc';

     

       1333
       1333
       +
                 } else {

     

       1334
       1334
       +
                   userSortKey = sortKey;

     

       1335
       1335
       +
                   userSortDirection = 'asc';

     

       1336
       1336
       +
                 }

     

       1337
       1337
       +
                 renderUsers(allUsers);

     

       1338
       1338
       +
               });

     

       1339
       1339
       +
             });

     

       1340
       1340
       +
       

     

       498
       1341
        
             // Add role change event listeners

     

       499
       1342
        
             table.querySelectorAll('.role-select').forEach(select => {

     

       500
       1343
        
               select.addEventListener('change', async (e) => {

     
···

       584
       1427
        
                 }

     

       585
       1428
        
               });

     

       586
       1429
        
             });

     

       1430
       1430
       +
       

     

       1431
       1431
       +
             // Add click event to table rows to open modal

     

       1432
       1432
       +
             table.querySelectorAll('tbody tr').forEach(row => {

     

       1433
       1433
       +
               row.addEventListener('click', (e) => {

     

       1434
       1434
       +
                 // Don't open modal if clicking on delete button or role select

     

       1435
       1435
       +
                 if (e.target.closest('.delete-user-btn') || e.target.closest('.role-select')) {

     

       1436
       1436
       +
                   return;

     

       1437
       1437
       +
                 }

     

       1438
       1438
       +
                 

     

       1439
       1439
       +
                 const userId = row.querySelector('.delete-user-btn').dataset.userId;

     

       1440
       1440
       +
                 openUserModal(userId);

     

       1441
       1441
       +
               });

     

       1442
       1442
       +
             });

     

       587
       1443
        
           }

     

       588
       1444
        
       

     

       589
       1445
        
           async function loadData() {

     
···

       632
       1488
        
               tab.classList.add('active');

     

       633
       1489
        
               document.getElementById(`${tabName}-tab`).classList.add('active');

     

       634
       1490
        
             });

     

       1491
       1491
       +
           });

     

       1492
       1492
       +
       

     

       1493
       1493
       +
           // User search

     

       1494
       1494
       +
           document.getElementById('user-search').addEventListener('input', (e) => {

     

       1495
       1495
       +
             userSearchTerm = e.target.value.trim();

     

       1496
       1496
       +
             renderUsers(allUsers);

     

       635
       1497
        
           });

     

       636
       1498
        
       

     

       637
       1499
        
           // Initialize