feat: user invite flow, deactivate/delete, favicon, dashboard loading fix, admin full-width
- Invite flow: admin can invite users by email with role selection; accept-invite page sets password and creates the account; 72-hour token expiry; E2E tests - User deactivate/reactivate/delete: new tRPC procedures + UI buttons; deactivation revokes all active sessions immediately; delete cascades vacation/broadcast records; isActive field added via migration 20260402000000_user_isactive - Auth: block login for inactive users with audit entry - Favicon: SVG favicon + ICO/PNG fallbacks (16, 32, 180, 192, 512px); manifest updated - Dashboard: GridLayout dynamic-import loading skeleton prevents blank dark area on first login before react-grid-layout chunk is cached - Admin users: remove max-w-5xl constraint so table uses full page width - Dev: docker container restart workflow documented in LEARNINGS.md; Prisma generate must run inside the container after schema changes (named node_modules volume) Co-Authored-By: claude-flow <ruv@ruv.net>
This commit is contained in:
@@ -4,6 +4,7 @@ import { useState, useMemo } from "react";
|
||||
import { SystemRole, PermissionKey, ROLE_DEFAULT_PERMISSIONS, type PermissionOverrides } from "@capakraken/shared";
|
||||
import { trpc } from "~/lib/trpc/client.js";
|
||||
import { AnimatedModal } from "~/components/ui/AnimatedModal.js";
|
||||
import { InviteUserModal } from "./InviteUserModal.js";
|
||||
import { SuccessToast } from "~/components/ui/SuccessToast.js";
|
||||
import { FilterChips } from "~/components/ui/FilterChips.js";
|
||||
import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
|
||||
@@ -65,6 +66,7 @@ type UserRow = {
|
||||
lastActiveAt: Date | null;
|
||||
permissionOverrides: PermissionOverrides | null;
|
||||
totpEnabled: boolean;
|
||||
isActive: boolean;
|
||||
};
|
||||
|
||||
type EditState = {
|
||||
@@ -102,6 +104,8 @@ export function UsersClient() {
|
||||
const [confirmPassword, setConfirmPassword] = useState("");
|
||||
const [passwordError, setPasswordError] = useState<string | null>(null);
|
||||
const [passwordSuccess, setPasswordSuccess] = useState(false);
|
||||
const [inviteOpen, setInviteOpen] = useState(false);
|
||||
const [deleteTarget, setDeleteTarget] = useState<{ userId: string; userName: string } | null>(null);
|
||||
|
||||
const utils = trpc.useUtils();
|
||||
|
||||
@@ -208,6 +212,34 @@ export function UsersClient() {
|
||||
onError: (err) => setActionError(err.message),
|
||||
});
|
||||
|
||||
const deactivateMutation = trpc.user.deactivate.useMutation({
|
||||
onSuccess: async () => {
|
||||
await utils.user.list.invalidate();
|
||||
setActionError(null);
|
||||
},
|
||||
onError: (err) => setActionError(err.message),
|
||||
});
|
||||
|
||||
const reactivateMutation = trpc.user.reactivate.useMutation({
|
||||
onSuccess: async () => {
|
||||
await utils.user.list.invalidate();
|
||||
setActionError(null);
|
||||
},
|
||||
onError: (err) => setActionError(err.message),
|
||||
});
|
||||
|
||||
const deleteMutation = trpc.user.delete.useMutation({
|
||||
onSuccess: async () => {
|
||||
await utils.user.list.invalidate();
|
||||
setDeleteTarget(null);
|
||||
setActionError(null);
|
||||
},
|
||||
onError: (err) => {
|
||||
setActionError(err.message);
|
||||
setDeleteTarget(null);
|
||||
},
|
||||
});
|
||||
|
||||
function openSetPassword(user: UserRow) {
|
||||
setPasswordTarget({ userId: user.id, userName: user.name ?? user.email });
|
||||
setNewPassword("");
|
||||
@@ -395,11 +427,11 @@ export function UsersClient() {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="p-6 max-w-5xl mx-auto">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<div className="app-page">
|
||||
<div className="app-page-header mb-6">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900 dark:text-gray-50">User Management</h1>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
|
||||
<h1 className="app-page-title">User Management</h1>
|
||||
<p className="app-page-subtitle mt-1">
|
||||
Manage user roles and permission overrides
|
||||
</p>
|
||||
</div>
|
||||
@@ -430,6 +462,16 @@ export function UsersClient() {
|
||||
</svg>
|
||||
{autoLinkMutation.isPending ? "Linking..." : "Auto-link Resources"}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setInviteOpen(true)}
|
||||
className="inline-flex items-center gap-2 rounded-lg border border-brand-300 dark:border-brand-600 px-4 py-2 text-sm font-medium text-brand-700 dark:text-brand-300 hover:bg-brand-50 dark:hover:bg-brand-900/20 transition-colors"
|
||||
>
|
||||
<svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||||
</svg>
|
||||
Invite User
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => { setCreateState({ ...EMPTY_CREATE }); setActionError(null); }}
|
||||
@@ -515,7 +557,7 @@ export function UsersClient() {
|
||||
{sorted.map((user) => (
|
||||
<tr
|
||||
key={user.id}
|
||||
className="border-b border-gray-100 dark:border-gray-800 hover:bg-gray-50 dark:hover:bg-gray-800/30 transition-colors"
|
||||
className={`border-b border-gray-100 dark:border-gray-800 hover:bg-gray-50 dark:hover:bg-gray-800/30 transition-colors ${!user.isActive ? "opacity-60" : ""}`}
|
||||
>
|
||||
<td className="px-4 py-3 font-medium text-gray-900 dark:text-gray-100">
|
||||
{user.name ?? <span className="italic text-gray-400">—</span>}
|
||||
@@ -532,7 +574,12 @@ export function UsersClient() {
|
||||
</td>
|
||||
<td className="px-4 py-3 text-center">
|
||||
<div className="flex items-center justify-center gap-1.5">
|
||||
{isOnline(user) ? (
|
||||
{!user.isActive ? (
|
||||
<span className="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-600 dark:bg-red-900/30 dark:text-red-400">
|
||||
<span className="h-1.5 w-1.5 rounded-full bg-red-500" />
|
||||
Inactive
|
||||
</span>
|
||||
) : isOnline(user) ? (
|
||||
<span className="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-400">
|
||||
<span className="h-1.5 w-1.5 rounded-full bg-green-500" />
|
||||
Online
|
||||
@@ -594,6 +641,39 @@ export function UsersClient() {
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
{user.isActive ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
if (confirm(`Deactivate ${user.name ?? user.email}? They will be logged out immediately and cannot log in until reactivated.`)) {
|
||||
void deactivateMutation.mutateAsync({ userId: user.id });
|
||||
}
|
||||
}}
|
||||
disabled={deactivateMutation.isPending}
|
||||
className="text-xs text-amber-600 hover:text-amber-800 dark:text-amber-400 dark:hover:text-amber-300 font-medium"
|
||||
title="Deactivate user — blocks login and revokes sessions"
|
||||
>
|
||||
Deactivate
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => void reactivateMutation.mutateAsync({ userId: user.id })}
|
||||
disabled={reactivateMutation.isPending}
|
||||
className="text-xs text-green-600 hover:text-green-800 dark:text-green-400 dark:hover:text-green-300 font-medium"
|
||||
title="Reactivate user — allows login again"
|
||||
>
|
||||
Reactivate
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setDeleteTarget({ userId: user.id, userName: user.name ?? user.email })}
|
||||
className="text-xs text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 font-medium"
|
||||
title="Permanently delete user"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@@ -677,6 +757,49 @@ export function UsersClient() {
|
||||
|
||||
<SuccessToast show={passwordSuccess} message="Password updated successfully" />
|
||||
|
||||
<InviteUserModal open={inviteOpen} onClose={() => setInviteOpen(false)} />
|
||||
|
||||
{/* Delete Confirmation Modal */}
|
||||
{deleteTarget && (
|
||||
<div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
|
||||
<div className="bg-white dark:bg-gray-900 rounded-xl shadow-2xl w-full max-w-md mx-4">
|
||||
<div className="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
|
||||
<h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
|
||||
Delete User
|
||||
</h2>
|
||||
</div>
|
||||
<div className="px-6 py-5 space-y-3">
|
||||
<p className="text-sm text-gray-700 dark:text-gray-300">
|
||||
Are you sure you want to permanently delete{" "}
|
||||
<strong>{deleteTarget.userName}</strong>?
|
||||
</p>
|
||||
<p className="text-sm text-red-600 dark:text-red-400">
|
||||
This will permanently remove their account, sessions, vacation records, and notifications.
|
||||
Audit history entries will be retained but anonymised. This action cannot be undone.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex justify-end gap-3 px-6 py-4 border-t border-gray-200 dark:border-gray-700">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setDeleteTarget(null)}
|
||||
disabled={deleteMutation.isPending}
|
||||
className="px-4 py-2 text-sm rounded-lg border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => void deleteMutation.mutateAsync({ userId: deleteTarget.userId })}
|
||||
disabled={deleteMutation.isPending}
|
||||
className="px-4 py-2 text-sm rounded-lg bg-red-600 hover:bg-red-700 text-white font-medium transition-colors disabled:opacity-50"
|
||||
>
|
||||
{deleteMutation.isPending ? "Deleting…" : "Delete permanently"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Create User Modal */}
|
||||
{createState && (
|
||||
<div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
|
||||
|
||||
Reference in New Issue
Block a user