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>
2026-04-02 20:19:26 +02:00
parent dc5bbdc47d
commit 41eb722369
33 changed files with 6755 additions and 169 deletions
@@ -9,7 +9,8 @@
    "lint": "next lint",
    "typecheck": "tsc --project tsconfig.typecheck.json --noEmit",
    "test:unit": "vitest run",
-    "test:e2e": "playwright test"
+    "test:e2e": "playwright test",
+    "test:e2e:email": "playwright test --config playwright.dev.config.ts e2e/dev-system/invite-flow.spec.ts e2e/dev-system/password-reset.spec.ts"
  },
  "dependencies": {
    "@capakraken/api": "workspace:*",
@@ -8,6 +8,7 @@
  "theme_color": "#0284c7",
  "orientation": "any",
  "icons": [
+    { "src": "/favicon.svg", "type": "image/svg+xml", "sizes": "any", "purpose": "any" },
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png", "purpose": "any maskable" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any maskable" }
  ]
@@ -0,0 +1,137 @@
+"use client";
+
+import { useState, use } from "react";
+import { useRouter } from "next/navigation";
+import { trpc } from "~/lib/trpc/client.js";
+
+export default function AcceptInvitePage({ params }: { params: Promise<{ token: string }> }) {
+  const { token } = use(params);
+  const router = useRouter();
+
+  const [password, setPassword] = useState("");
+  const [confirm, setConfirm] = useState("");
+  const [formError, setFormError] = useState<string | null>(null);
+  const [done, setDone] = useState(false);
+
+  const { data: invite, isLoading, error: inviteError } = trpc.invite.getInvite.useQuery(
+    { token },
+    { retry: false },
+  );
+
+  const acceptMutation = trpc.invite.acceptInvite.useMutation({
+    onSuccess: () => setDone(true),
+    onError: (err) => setFormError(err.message),
+  });
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setFormError(null);
+    if (password.length < 8) { setFormError("Password must be at least 8 characters."); return; }
+    if (password !== confirm) { setFormError("Passwords do not match."); return; }
+    await acceptMutation.mutateAsync({ token, password });
+  }
+
+  if (isLoading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-950">
+        <p className="text-sm text-gray-500">Loading…</p>
+      </div>
+    );
+  }
+
+  if (inviteError || !invite) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-950 p-4">
+        <div className="w-full max-w-md rounded-2xl bg-white dark:bg-gray-900 shadow-lg p-8 text-center">
+          <div className="text-4xl mb-4">🔗</div>
+          <h1 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">
+            Invite link invalid or expired
+          </h1>
+          <p className="text-sm text-gray-500">
+            {inviteError?.message ?? "This invite link is no longer valid. Please request a new invitation from your administrator."}
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  if (done) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-950 p-4">
+        <div className="w-full max-w-md rounded-2xl bg-white dark:bg-gray-900 shadow-lg p-8 text-center">
+          <div className="text-4xl mb-4">✅</div>
+          <h1 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">
+            Account created
+          </h1>
+          <p className="text-sm text-gray-500 mb-6">Your account has been set up successfully.</p>
+          <button
+            type="button"
+            onClick={() => router.push("/auth/signin")}
+            className="rounded-lg bg-brand-600 px-5 py-2 text-sm font-semibold text-white hover:bg-brand-700 transition-colors"
+          >
+            Go to sign in
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-950 p-4">
+      <div className="w-full max-w-md rounded-2xl bg-white dark:bg-gray-900 shadow-lg p-8">
+        <div className="mb-6">
+          <h1 className="text-xl font-bold text-gray-900 dark:text-gray-100">Accept invitation</h1>
+          <p className="mt-1 text-sm text-gray-500">
+            You have been invited as <strong>{invite.role}</strong> to CapaKraken.
+            Set a password to activate your account (<span className="font-medium">{invite.email}</span>).
+          </p>
+        </div>
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          {formError && (
+            <div className="rounded-lg bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-700 px-4 py-3 text-sm text-red-700 dark:text-red-400">
+              {formError}
+            </div>
+          )}
+
+          <div>
+            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+              Password
+            </label>
+            <input
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              required
+              minLength={8}
+              placeholder="At least 8 characters"
+              className="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900 px-3 py-2 text-sm text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-brand-400"
+            />
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+              Confirm password
+            </label>
+            <input
+              type="password"
+              value={confirm}
+              onChange={(e) => setConfirm(e.target.value)}
+              required
+              placeholder="Repeat your password"
+              className="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900 px-3 py-2 text-sm text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-brand-400"
+            />
+          </div>
+
+          <button
+            type="submit"
+            disabled={acceptMutation.isPending}
+            className="w-full rounded-lg bg-brand-600 px-4 py-2 text-sm font-semibold text-white hover:bg-brand-700 transition-colors disabled:opacity-50"
+          >
+            {acceptMutation.isPending ? "Setting up account…" : "Create account"}
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+}
@@ -23,6 +23,15 @@ export const metadata: Metadata = {
  title: "CapaKraken — Resource & Capacity Planning",
  description: "Interactive resource planning and project staffing tool",
  manifest: "/manifest.json",
+  icons: {
+    icon: [
+      { url: "/favicon.svg", type: "image/svg+xml" },
+      { url: "/favicon-32x32.png", sizes: "32x32", type: "image/png" },
+      { url: "/favicon-16x16.png", sizes: "16x16", type: "image/png" },
+      { url: "/favicon.ico" },
+    ],
+    apple: [{ url: "/apple-touch-icon.png", sizes: "180x180" }],
+  },
  appleWebApp: {
    capable: true,
    statusBarStyle: "default",
@@ -51,7 +60,7 @@ export default async function RootLayout({ children }: { children: React.ReactNo
  return (
    <html lang="en" suppressHydrationWarning>
      <head>
-        <script nonce={nonce} dangerouslySetInnerHTML={{__html: `
+        <script nonce={nonce} suppressHydrationWarning dangerouslySetInnerHTML={{__html: `
  try {
    var p = JSON.parse(localStorage.getItem('capakraken_theme') || '{}');
    if (p.mode === 'dark') document.documentElement.classList.add('dark');
@@ -0,0 +1,129 @@
+"use client";
+
+import { useState } from "react";
+import { SystemRole } from "@capakraken/shared";
+import { trpc } from "~/lib/trpc/client.js";
+import { AnimatedModal } from "~/components/ui/AnimatedModal.js";
+
+interface InviteUserModalProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+const ROLE_OPTIONS: { value: SystemRole; label: string }[] = [
+  { value: SystemRole.USER, label: "User" },
+  { value: SystemRole.VIEWER, label: "Viewer" },
+  { value: SystemRole.CONTROLLER, label: "Controller" },
+  { value: SystemRole.MANAGER, label: "Manager" },
+  { value: SystemRole.ADMIN, label: "Admin" },
+];
+
+export function InviteUserModal({ open, onClose }: InviteUserModalProps) {
+  const [email, setEmail] = useState("");
+  const [role, setRole] = useState<SystemRole>(SystemRole.USER);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState(false);
+
+  const utils = trpc.useUtils();
+
+  const inviteMutation = trpc.invite.createInvite.useMutation({
+    onSuccess: async () => {
+      await utils.invite.listInvites.invalidate();
+      setSuccess(true);
+      setEmail("");
+      setRole(SystemRole.USER);
+      setTimeout(() => {
+        setSuccess(false);
+        onClose();
+      }, 1500);
+    },
+    onError: (err) => setError(err.message),
+  });
+
+  function handleClose() {
+    setEmail("");
+    setRole(SystemRole.USER);
+    setError(null);
+    setSuccess(false);
+    onClose();
+  }
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setError(null);
+    if (!email) { setError("Email is required."); return; }
+    await inviteMutation.mutateAsync({ email, role });
+  }
+
+  return (
+    <AnimatedModal open={open} onClose={handleClose} maxWidth="max-w-md">
+      <div className="px-6 py-5">
+        <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">Invite User</h2>
+
+        {success ? (
+          <div className="rounded-lg bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-700 px-4 py-3 text-sm text-green-700 dark:text-green-400">
+            Invitation sent successfully.
+          </div>
+        ) : (
+          <form onSubmit={handleSubmit} className="space-y-4">
+            {error && (
+              <div className="rounded-lg bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-700 px-4 py-3 text-sm text-red-700 dark:text-red-400">
+                {error}
+              </div>
+            )}
+
+            <div>
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                Email address
+              </label>
+              <input
+                type="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                placeholder="user@example.com"
+                required
+                className="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900 px-3 py-2 text-sm text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-brand-400"
+              />
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                Role
+              </label>
+              <select
+                value={role}
+                onChange={(e) => setRole(e.target.value as SystemRole)}
+                className="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900 px-3 py-2 text-sm text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-brand-400"
+              >
+                {ROLE_OPTIONS.map((opt) => (
+                  <option key={opt.value} value={opt.value}>{opt.label}</option>
+                ))}
+              </select>
+            </div>
+
+            <p className="text-xs text-gray-500 dark:text-gray-400">
+              An invite link valid for 72 hours will be sent to this email address.
+            </p>
+
+            <div className="flex justify-end gap-3 pt-2">
+              <button
+                type="button"
+                onClick={handleClose}
+                className="rounded-lg border border-gray-300 dark:border-gray-600 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
+              >
+                Cancel
+              </button>
+              <button
+                type="submit"
+                disabled={inviteMutation.isPending}
+                className="rounded-lg bg-brand-600 px-4 py-2 text-sm font-medium text-white hover:bg-brand-700 transition-colors disabled:opacity-50"
+              >
+                {inviteMutation.isPending ? "Sending..." : "Send Invite"}
+              </button>
+            </div>
+          </form>
+        )}
+      </div>
+    </AnimatedModal>
+  );
+}
@@ -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">
@@ -23,10 +23,21 @@ function WidgetFallback() {
  );
 }

+function GridLayoutSkeleton() {
+  return (
+    <div className="grid grid-cols-2 gap-3 p-3">
+      {Array.from({ length: 4 }).map((_, i) => (
+        <div key={i} className="h-48 shimmer-skeleton rounded-2xl" />
+      ))}
+    </div>
+  );
+}
+
 // Dynamic import — no WidthProvider (uses findDOMNode, broken in React 18 strict mode).
 // We measure container width ourselves via ResizeObserver and pass it as a prop.
 const GridLayout = dynamic(() => import("react-grid-layout").then((m) => m.Responsive), {
  ssr: false,
+  loading: () => <GridLayoutSkeleton />,
 });

 function renderWidget(
@@ -68,7 +68,6 @@ const authConfig = {
        const user = await prisma.user.findUnique({ where: { email } });
        if (!user?.passwordHash) {
          logger.warn({ email, reason: "user_not_found" }, "Failed login attempt");
-          // Audit failed login (unknown user)
          void createAuditEntry({
            db: prisma,
            entityType: "Auth",
@@ -81,6 +80,21 @@ const authConfig = {
          return null;
        }

+        if (!user.isActive) {
+          logger.warn({ email, userId: user.id, reason: "account_deactivated" }, "Login blocked — account deactivated");
+          void createAuditEntry({
+            db: prisma,
+            entityType: "Auth",
+            entityId: user.id,
+            entityName: user.email,
+            action: "CREATE",
+            userId: user.id,
+            summary: "Login blocked — account deactivated",
+            source: "ui",
+          });
+          return null;
+        }
+
        const isValid = await verify(user.passwordHash, password);
        if (!isValid) {
          logger.warn({ email, reason: "invalid_password" }, "Failed login attempt");