feat: add approvals workflow and unified member invitation management across projects, workspaces, and videos

app/(auth)/login/page.tsx

@@ -10,6 +10,18 @@ import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { signIn } from 'next-auth/react';
 
+function getSafeCallbackUrl(value: string | null): string {
+  if (!value) return '/dashboard';
+  try {
+    const baseOrigin = typeof window === 'undefined' ? 'http://localhost' : window.location.origin;
+    const parsed = new URL(value, baseOrigin);
+    if (parsed.origin !== baseOrigin) return '/dashboard';
+    return `${parsed.pathname}${parsed.search}${parsed.hash}`;
+  } catch {
+    return '/dashboard';
+  }
+}
+
 function LoginForm() {
   const router = useRouter();
   const searchParams = useSearchParams();
@@ -18,6 +30,7 @@ function LoginForm() {
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const [showSuccess, setShowSuccess] = useState(false);
+  const callbackUrl = getSafeCallbackUrl(searchParams.get('callbackUrl'));
 
   useEffect(() => {
     if (searchParams.get('registered') === 'true') {
@@ -35,6 +48,7 @@ function LoginForm() {
         email,
         password,
         redirect: false,
+        callbackUrl,
       });
 
       if (result?.error) {
@@ -42,7 +56,8 @@ function LoginForm() {
         return;
       }
 
-      router.push('/dashboard');
+      const destination = getSafeCallbackUrl(result?.url || callbackUrl);
+      router.push(destination);
       router.refresh();
     } catch {
       setError('Something went wrong. Please try again.');

app/(auth)/register/page.tsx

@@ -1,8 +1,8 @@
 'use client';
 
-import { useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import Link from 'next/link';
-import { useRouter } from 'next/navigation';
+import { useRouter, useSearchParams } from 'next/navigation';
 import { Video, Loader2, KeyRound, UserPlus } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
@@ -11,6 +11,10 @@ import { Label } from '@/components/ui/label';
 
 export default function RegisterPage() {
     const router = useRouter();
+    const searchParams = useSearchParams();
+    const invitationToken = useMemo(() => searchParams.get('invitationToken') || '', [searchParams]);
+    const invitedEmail = useMemo(() => searchParams.get('email') || '', [searchParams]);
+    const isInvitationFlow = invitationToken.length > 0;
     const [isLoading, setIsLoading] = useState(false);
     const [error, setError] = useState('');
     const [formData, setFormData] = useState({
@@ -21,6 +25,14 @@ export default function RegisterPage() {
         inviteCode: '',
     });
 
+    useEffect(() => {
+        if (!invitedEmail) return;
+        setFormData((prev) => ({
+            ...prev,
+            email: invitedEmail,
+        }));
+    }, [invitedEmail]);
+
     const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         setFormData(prev => ({
             ...prev,
@@ -55,7 +67,8 @@ export default function RegisterPage() {
                     name: formData.name,
                     email: formData.email,
                     password: formData.password,
-                    inviteCode: formData.inviteCode,
+                    inviteCode: formData.inviteCode || undefined,
+                    invitationToken: invitationToken || undefined,
                 }),
             });
 
@@ -97,28 +110,36 @@ export default function RegisterPage() {
                     <CardContent>
                         <form onSubmit={handleRegister} className="space-y-4">
                             {/* Invite Code - First and prominent */}
-                            <div className="space-y-2">
-                                <Label htmlFor="inviteCode" className="flex items-center gap-2">
-                                    <KeyRound className="h-4 w-4 text-amber-500" />
-                                    Invite Code
-                                </Label>
-                                <Input
-                                    id="inviteCode"
-                                    name="inviteCode"
-                                    type="text"
-                                    placeholder="Enter your invite code"
-                                    value={formData.inviteCode}
-                                    onChange={handleChange}
-                                    required
-                                    disabled={isLoading}
-                                    className="border-amber-500/30 focus:border-amber-500"
-                                />
-                                <p className="text-xs text-muted-foreground">
-                                    An invite code is required to create an account
-                                </p>
-                            </div>
+                            {isInvitationFlow ? (
+                                <div className="p-3 rounded-md bg-primary/10 text-sm">
+                                    You are registering via an invitation link.
+                                </div>
+                            ) : (
+                                <>
+                                    <div className="space-y-2">
+                                        <Label htmlFor="inviteCode" className="flex items-center gap-2">
+                                            <KeyRound className="h-4 w-4 text-amber-500" />
+                                            Invite Code
+                                        </Label>
+                                        <Input
+                                            id="inviteCode"
+                                            name="inviteCode"
+                                            type="text"
+                                            placeholder="Enter your invite code"
+                                            value={formData.inviteCode}
+                                            onChange={handleChange}
+                                            required
+                                            disabled={isLoading}
+                                            className="border-amber-500/30 focus:border-amber-500"
+                                        />
+                                        <p className="text-xs text-muted-foreground">
+                                            An invite code is required to create an account
+                                        </p>
+                                    </div>
 
-                            <div className="h-px bg-border my-4" />
+                                    <div className="h-px bg-border my-4" />
+                                </>
+                            )}
 
                             <div className="space-y-2">
                                 <Label htmlFor="name">Full Name</Label>

app/(dashboard)/dashboard/dashboard-client.tsx

@@ -18,15 +18,17 @@ interface DashboardClientProps {
   serializedProjects: SerializedProject[];
   workspaces: { id: string; name: string }[];
   totalPages: number;
+  canCreateProjects: boolean;
 }
 
-export function DashboardClient({ serializedProjects, workspaces, totalPages }: DashboardClientProps) {
+export function DashboardClient({ serializedProjects, workspaces, totalPages, canCreateProjects }: DashboardClientProps) {
   return (
     <div className="px-6 lg:px-8 py-8 w-full">
       <ProjectFilter
         projects={serializedProjects}
         workspaces={workspaces}
         totalPages={totalPages}
+        canCreateProjects={canCreateProjects}
       />
     </div>
   );

app/(dashboard)/dashboard/page.tsx

@@ -49,6 +49,16 @@ export default async function DashboardPage({
         distinct: ['workspaceId']
     });
 
+    const creatableWorkspaces = await db.workspace.count({
+        where: {
+            OR: [
+                { ownerId: session.user.id },
+                { members: { some: { userId: session.user.id, role: 'ADMIN' } } },
+            ],
+        },
+    });
+    const canCreateProjects = creatableWorkspaces > 0;
+
     const workspaceMap = new Map<string, string>();
     for (const project of accessibleProjects) {
         if (project.workspace) {
@@ -105,6 +115,7 @@ export default async function DashboardPage({
             serializedProjects={serializedProjects}
             workspaces={workspaces}
             totalPages={totalPages}
+            canCreateProjects={canCreateProjects}
         />
     );
 }

app/(dashboard)/dashboard/project-filter.tsx

@@ -31,6 +31,7 @@ interface ProjectFilterProps {
   projects: SerializedProject[];
   workspaces: { id: string; name: string }[];
   totalPages: number;
+  canCreateProjects: boolean;
 }
 
 function formatRelativeTime(dateStr: string): string {
@@ -61,7 +62,7 @@ function VisibilityIcon({ visibility }: { visibility: string }) {
 
 type SortOrder = 'desc' | 'asc';
 
-export function ProjectFilter({ projects, workspaces, totalPages }: ProjectFilterProps) {
+export function ProjectFilter({ projects, workspaces, totalPages, canCreateProjects }: ProjectFilterProps) {
   const router = useRouter();
   const pathname = usePathname();
   const searchParams = useSearchParams();
@@ -138,12 +139,14 @@ export function ProjectFilter({ projects, workspaces, totalPages }: ProjectFilte
               </>
             )}
           </Button>
-          <Button asChild>
-            <Link href="/projects/new">
-              <Plus className="h-4 w-4 mr-2" />
-              New Project
-            </Link>
-          </Button>
+          {canCreateProjects && (
+            <Button asChild>
+              <Link href="/projects/new">
+                <Plus className="h-4 w-4 mr-2" />
+                New Project
+              </Link>
+            </Button>
+          )}
         </div>
       </div>
 
@@ -205,12 +208,14 @@ export function ProjectFilter({ projects, workspaces, totalPages }: ProjectFilte
                 ? 'Create your first project to start collecting video feedback'
                 : 'Create a project in this workspace to get started'}
             </p>
-            <Button asChild>
-              <Link href="/projects/new">
-                <Plus className="h-4 w-4 mr-2" />
-                Create Project
-              </Link>
-            </Button>
+            {canCreateProjects && (
+              <Button asChild>
+                <Link href="/projects/new">
+                  <Plus className="h-4 w-4 mr-2" />
+                  Create Project
+                </Link>
+              </Button>
+            )}
           </CardContent>
         </Card>
       )}

app/(dashboard)/projects/[projectId]/members/page.tsx

@@ -1,335 +1,26 @@
 'use client';
 
-import { useState, useEffect, useCallback } from 'react';
-import { useParams, useRouter } from 'next/navigation';
-import Link from 'next/link';
-import {
-  ArrowLeft,
-  Plus,
-  Loader2,
-  Crown,
-  Shield,
-  MessageSquare,
-  Trash2,
-  UserPlus,
-} from 'lucide-react';
-import { Button } from '@/components/ui/button';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
-import { Badge } from '@/components/ui/badge';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-
-interface Member {
-  id: string;
-  role: 'ADMIN' | 'COMMENTATOR';
-  userId: string;
-  user: {
-    id: string;
-    name: string | null;
-    email: string | null;
-    image: string | null;
-  };
-}
-
-interface Owner {
-  id: string;
-  name: string | null;
-  email: string | null;
-  image: string | null;
-}
+import { useParams } from 'next/navigation';
+import { MembersManagementPage } from '@/components/members-management-page';
 
 export default function ProjectMembersPage() {
   const params = useParams();
-  const router = useRouter();
   const projectId = params.projectId as string;
 
-  const [members, setMembers] = useState<Member[]>([]);
-  const [owner, setOwner] = useState<Owner | null>(null);
-  const [isLoading, setIsLoading] = useState(true);
-  const [inviteEmail, setInviteEmail] = useState('');
-  const [inviteRole, setInviteRole] = useState<'ADMIN' | 'COMMENTATOR'>('COMMENTATOR');
-  const [isInviting, setIsInviting] = useState(false);
-  const [error, setError] = useState('');
-  const [success, setSuccess] = useState('');
-
-  const fetchMembers = useCallback(async () => {
-    try {
-      const res = await fetch(`/api/projects/${projectId}/members`);
-      if (!res.ok) {
-        if (res.status === 403) router.push('/dashboard');
-        return;
-      }
-      const data = await res.json();
-      setMembers(data.data.members);
-      setOwner(data.data.owner);
-    } catch {
-      setError('Failed to load members');
-    } finally {
-      setIsLoading(false);
-    }
-  }, [projectId, router]);
-
-  useEffect(() => {
-    fetchMembers();
-  }, [fetchMembers]);
-
-  const handleInvite = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setIsInviting(true);
-    setError('');
-    setSuccess('');
-
-    try {
-      const res = await fetch(`/api/projects/${projectId}/members`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ email: inviteEmail, role: inviteRole }),
-      });
-
-      const data = await res.json();
-
-      if (!res.ok) {
-        setError(data.error || 'Failed to invite member');
-        return;
-      }
-
-      if (data.user) {
-        setSuccess(`Invited ${data.user.name || data.user.email || inviteEmail} as ${inviteRole.toLowerCase()}`);
-      } else {
-        setSuccess(data.message || `Invitation sent to ${inviteEmail}`);
-      }
-      setInviteEmail('');
-      fetchMembers();
-    } catch {
-      setError('Something went wrong');
-    } finally {
-      setIsInviting(false);
-    }
-  };
-
-  const handleRoleChange = async (memberId: string, newRole: string) => {
-    try {
-      const res = await fetch(`/api/projects/${projectId}/members/${memberId}`, {
-        method: 'PATCH',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ role: newRole }),
-      });
-
-      if (!res.ok) {
-        const data = await res.json();
-        setError(data.error || 'Failed to update role');
-        return;
-      }
-
-      fetchMembers();
-    } catch {
-      setError('Failed to update role');
-    }
-  };
-
-  const handleRemove = async (memberId: string) => {
-    if (!confirm('Are you sure you want to remove this member?')) return;
-
-    try {
-      const res = await fetch(`/api/projects/${projectId}/members/${memberId}`, {
-        method: 'DELETE',
-      });
-
-      if (!res.ok) {
-        const data = await res.json();
-        setError(data.error || 'Failed to remove member');
-        return;
-      }
-
-      fetchMembers();
-    } catch {
-      setError('Failed to remove member');
-    }
-  };
-
-  if (isLoading) {
-    return (
-      <div className="flex items-center justify-center min-h-[50vh]">
-        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
-      </div>
-    );
-  }
-
   return (
-    <div className="px-6 lg:px-8 py-8 w-full max-w-4xl mx-auto">
-      <div className="mb-6">
-        <Link
-          href={`/projects/${projectId}`}
-          className="inline-flex items-center text-sm text-muted-foreground hover:text-foreground transition-colors"
-        >
-          <ArrowLeft className="h-4 w-4 mr-1" />
-          Back to Project
-        </Link>
-      </div>
-
-      <div className="mb-8">
-        <h1 className="text-3xl font-bold tracking-tight">Project Members</h1>
-        <p className="text-muted-foreground mt-1">
-          Manage who has access to this project. Admins can manage settings and delete content.
-          Commentators can only view and leave comments.
-        </p>
-      </div>
-
-      {/* Invite Form */}
-      <Card className="mb-8">
-        <CardHeader>
-          <CardTitle className="flex items-center gap-2">
-            <UserPlus className="h-5 w-5" />
-            Invite Member
-          </CardTitle>
-          <CardDescription>
-            Invite someone by email. They must have an account to be added.
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <form onSubmit={handleInvite} className="flex flex-col sm:flex-row gap-3 sm:items-end">
-            <div className="w-full sm:flex-1">
-              <Label htmlFor="email" className="mb-2 block">Email Address</Label>
-              <Input
-                id="email"
-                type="email"
-                placeholder="[email protected]"
-                value={inviteEmail}
-                onChange={(e) => setInviteEmail(e.target.value)}
-                required
-                disabled={isInviting}
-              />
-            </div>
-            <div className="w-full sm:w-40">
-              <Label className="mb-2 block">Role</Label>
-              <Select value={inviteRole} onValueChange={(v) => setInviteRole(v as 'ADMIN' | 'COMMENTATOR')}>
-                <SelectTrigger className="w-full">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="ADMIN">Admin</SelectItem>
-                  <SelectItem value="COMMENTATOR">Commentator</SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-            <Button type="submit" disabled={isInviting} className="w-full sm:w-auto">
-              {isInviting ? (
-                <Loader2 className="h-4 w-4 animate-spin" />
-              ) : (
-                <>
-                  <Plus className="h-4 w-4 mr-1" />
-                  Invite
-                </>
-              )}
-            </Button>
-          </form>
-
-          {error && (
-            <div className="mt-3 rounded-md bg-destructive/10 p-3 text-sm text-destructive">
-              {error}
-            </div>
-          )}
-          {success && (
-            <div className="mt-3 rounded-md bg-green-500/10 p-3 text-sm text-green-700 dark:text-green-400">
-              {success}
-            </div>
-          )}
-        </CardContent>
-      </Card>
-
-      {/* Members List */}
-      <Card>
-        <CardHeader>
-          <CardTitle>Current Members</CardTitle>
-          <CardDescription>
-            <strong>Admin</strong> — can manage project settings, members, and delete content.{' '}
-            <strong>Commentator</strong> — can view and comment only.
-          </CardDescription>
-        </CardHeader>
-        <CardContent className="space-y-3">
-          {/* Owner */}
-          {owner && (
-            <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 sm:gap-0 p-3 rounded-lg bg-accent/30">
-              <div className="flex items-center gap-3">
-                <Avatar className="h-9 w-9">
-                  <AvatarImage src={owner.image ?? undefined} />
-                  <AvatarFallback>{owner.name?.charAt(0).toUpperCase() ?? 'U'}</AvatarFallback>
-                </Avatar>
-                <div>
-                  <p className="text-sm font-medium">{owner.name || 'Unnamed'}</p>
-                  <p className="text-xs text-muted-foreground">{owner.email}</p>
-                </div>
-              </div>
-              <Badge variant="default" className="flex items-center gap-1">
-                <Crown className="h-3 w-3" />
-                Owner
-              </Badge>
-            </div>
-          )}
-
-          {/* Members */}
-          {members.map((member) => (
-            <div key={member.id} className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 sm:gap-0 p-3 rounded-lg border">
-              <div className="flex items-center gap-3">
-                <Avatar className="h-9 w-9">
-                  <AvatarImage src={member.user.image ?? undefined} />
-                  <AvatarFallback>{member.user.name?.charAt(0).toUpperCase() ?? 'U'}</AvatarFallback>
-                </Avatar>
-                <div>
-                  <p className="text-sm font-medium">{member.user.name || 'Unnamed'}</p>
-                  <p className="text-xs text-muted-foreground">{member.user.email}</p>
-                </div>
-              </div>
-              <div className="flex items-center gap-2 w-full sm:w-auto">
-                <Select
-                  value={member.role}
-                  onValueChange={(v) => handleRoleChange(member.id, v)}
-                >
-                  <SelectTrigger className="w-full sm:w-36 h-8">
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="ADMIN">
-                      <span className="flex items-center gap-1.5">
-                        <Shield className="h-3.5 w-3.5" />
-                        Admin
-                      </span>
-                    </SelectItem>
-                    <SelectItem value="COMMENTATOR">
-                      <span className="flex items-center gap-1.5">
-                        <MessageSquare className="h-3.5 w-3.5" />
-                        Commentator
-                      </span>
-                    </SelectItem>
-                  </SelectContent>
-                </Select>
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  className="h-8 w-8 text-destructive hover:text-destructive"
-                  onClick={() => handleRemove(member.id)}
-                >
-                  <Trash2 className="h-4 w-4" />
-                </Button>
-              </div>
-            </div>
-          ))}
-
-          {members.length === 0 && (
-            <p className="text-sm text-muted-foreground text-center py-4">
-              No members yet. Invite someone above.
-            </p>
-          )}
-        </CardContent>
-      </Card>
-    </div>
+    <MembersManagementPage
+      apiBasePath={`/api/projects/${projectId}`}
+      backHref={`/projects/${projectId}`}
+      backLabel="Back to Project"
+      title="Project Members"
+      subtitle="Manage who has access to this project. Admins can manage settings and delete content. Commentators can only view and leave comments."
+      membersDescription={
+        <>
+          <strong>Admin</strong> - can manage project settings, members, and delete content.{' '}
+          <strong>Commentator</strong> - can view and comment only.
+        </>
+      }
+      forbiddenRedirect="/dashboard"
+    />
   );
 }

app/(dashboard)/projects/[projectId]/project-content-client.tsx

@@ -143,12 +143,14 @@ export function ProjectContentClient({
               </>
             )}
           </Button>
-          <Button variant="outline" size="sm" asChild>
-            <Link href={`/projects/${projectId}/share`}>
-              <Share2 className="h-4 w-4 mr-2" />
-              Share
-            </Link>
-          </Button>
+          {canEdit && (
+            <Button variant="outline" size="sm" asChild>
+              <Link href={`/projects/${projectId}/share`}>
+                <Share2 className="h-4 w-4 mr-2" />
+                Share
+              </Link>
+            </Button>
+          )}
           {(isOwner || project.members[0]?.role === 'ADMIN') && (
             <>
               <Button variant="outline" size="sm" asChild>

app/(dashboard)/settings/page.tsx

@@ -29,6 +29,7 @@ interface NotificationSettings {
   onNewVersion: boolean;
   onNewComment: boolean;
   onNewReply: boolean;
+  onApprovalEvents: boolean;
   timezone: string;
 }
 
@@ -87,6 +88,7 @@ export default function SettingsPage() {
     onNewVersion: true,
     onNewComment: true,
     onNewReply: true,
+    onApprovalEvents: true,
     timezone: Intl.DateTimeFormat().resolvedOptions().timeZone || 'UTC',
   });
   const [loading, setLoading] = useState(true);
@@ -283,6 +285,14 @@ export default function SettingsPage() {
             label="New Reply"
             description="When someone replies to a comment thread"
           />
+          <ToggleButton
+            enabled={settings.onApprovalEvents}
+            onToggle={() =>
+              setSettings((s) => ({ ...s, onApprovalEvents: !s.onApprovalEvents }))
+            }
+            label="Approval Workflow"
+            description="When approval requests are created, responded to, or finalized"
+          />
         </CardContent>
       </Card>
 

app/(dashboard)/workspaces/[workspaceId]/members/page.tsx

@@ -1,333 +1,21 @@
 'use client';
 
-import { useState, useEffect, useCallback } from 'react';
-import { useParams, useRouter } from 'next/navigation';
-import Link from 'next/link';
-import {
-  ArrowLeft,
-  Plus,
-  Loader2,
-  Crown,
-  Shield,
-  MessageSquare,
-  Trash2,
-  UserPlus,
-} from 'lucide-react';
-import { Button } from '@/components/ui/button';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
-import { Badge } from '@/components/ui/badge';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-
-interface Member {
-  id: string;
-  role: 'ADMIN' | 'COMMENTATOR';
-  userId: string;
-  user: {
-    id: string;
-    name: string | null;
-    email: string | null;
-    image: string | null;
-  };
-}
-
-interface Owner {
-  id: string;
-  name: string | null;
-  email: string | null;
-  image: string | null;
-}
+import { useParams } from 'next/navigation';
+import { MembersManagementPage } from '@/components/members-management-page';
 
 export default function WorkspaceMembersPage() {
   const params = useParams();
-  const router = useRouter();
   const workspaceId = params.workspaceId as string;
 
-  const [members, setMembers] = useState<Member[]>([]);
-  const [owner, setOwner] = useState<Owner | null>(null);
-  const [isLoading, setIsLoading] = useState(true);
-  const [inviteEmail, setInviteEmail] = useState('');
-  const [inviteRole, setInviteRole] = useState<'ADMIN' | 'COMMENTATOR'>('COMMENTATOR');
-  const [isInviting, setIsInviting] = useState(false);
-  const [error, setError] = useState('');
-  const [success, setSuccess] = useState('');
-
-  const fetchMembers = useCallback(async () => {
-    try {
-      const res = await fetch(`/api/workspaces/${workspaceId}/members`);
-      if (!res.ok) {
-        if (res.status === 403) router.push('/workspaces');
-        return;
-      }
-      const data = await res.json();
-      setMembers(data.data.members);
-      setOwner(data.data.owner);
-    } catch {
-      setError('Failed to load members');
-    } finally {
-      setIsLoading(false);
-    }
-  }, [workspaceId, router]);
-
-  useEffect(() => {
-    fetchMembers();
-  }, [fetchMembers]);
-
-  const handleInvite = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setIsInviting(true);
-    setError('');
-    setSuccess('');
-
-    try {
-      const res = await fetch(`/api/workspaces/${workspaceId}/members`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ email: inviteEmail, role: inviteRole }),
-      });
-
-      const data = await res.json();
-
-      if (!res.ok) {
-        setError(data.error || 'Failed to invite member');
-        return;
-      }
-
-      if (data.user) {
-        setSuccess(`Invited ${data.user.name || data.user.email || inviteEmail} as ${inviteRole.toLowerCase()}`);
-      } else {
-        setSuccess(data.message || `Invitation sent to ${inviteEmail}`);
-      }
-      setInviteEmail('');
-      fetchMembers();
-    } catch {
-      setError('Something went wrong');
-    } finally {
-      setIsInviting(false);
-    }
-  };
-
-  const handleRoleChange = async (memberId: string, newRole: string) => {
-    try {
-      const res = await fetch(`/api/workspaces/${workspaceId}/members/${memberId}`, {
-        method: 'PATCH',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ role: newRole }),
-      });
-
-      if (!res.ok) {
-        const data = await res.json();
-        setError(data.error || 'Failed to update role');
-        return;
-      }
-
-      fetchMembers();
-    } catch {
-      setError('Failed to update role');
-    }
-  };
-
-  const handleRemove = async (memberId: string) => {
-    if (!confirm('Are you sure you want to remove this member?')) return;
-
-    try {
-      const res = await fetch(`/api/workspaces/${workspaceId}/members/${memberId}`, {
-        method: 'DELETE',
-      });
-
-      if (!res.ok) {
-        const data = await res.json();
-        setError(data.error || 'Failed to remove member');
-        return;
-      }
-
-      fetchMembers();
-    } catch {
-      setError('Failed to remove member');
-    }
-  };
-
-  if (isLoading) {
-    return (
-      <div className="flex items-center justify-center min-h-[50vh]">
-        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
-      </div>
-    );
-  }
-
   return (
-    <div className="px-6 lg:px-8 py-8 w-full max-w-4xl mx-auto">
-      <div className="mb-6">
-        <Link
-          href={`/workspaces/${workspaceId}`}
-          className="inline-flex items-center text-sm text-muted-foreground hover:text-foreground transition-colors"
-        >
-          <ArrowLeft className="h-4 w-4 mr-1" />
-          Back to Workspace
-        </Link>
-      </div>
-
-      <div className="mb-8">
-        <h1 className="text-3xl font-bold tracking-tight">Members</h1>
-        <p className="text-muted-foreground mt-1">
-          Manage who has access to this workspace and all its projects
-        </p>
-      </div>
-
-      {/* Invite Form */}
-      <Card className="mb-8">
-        <CardHeader>
-          <CardTitle className="flex items-center gap-2">
-            <UserPlus className="h-5 w-5" />
-            Invite Member
-          </CardTitle>
-          <CardDescription>
-            Invite someone by email. They must have an account to be added.
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <form onSubmit={handleInvite} className="flex flex-col sm:flex-row gap-3 sm:items-end">
-            <div className="w-full sm:flex-1">
-              <Label htmlFor="email" className="mb-2 block">Email Address</Label>
-              <Input
-                id="email"
-                type="email"
-                placeholder="[email protected]"
-                value={inviteEmail}
-                onChange={(e) => setInviteEmail(e.target.value)}
-                required
-                disabled={isInviting}
-              />
-            </div>
-            <div className="w-full sm:w-40">
-              <Label className="mb-2 block">Role</Label>
-              <Select value={inviteRole} onValueChange={(v) => setInviteRole(v as 'ADMIN' | 'COMMENTATOR')}>
-                <SelectTrigger className="w-full">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="ADMIN">Admin</SelectItem>
-                  <SelectItem value="COMMENTATOR">Commentator</SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-            <Button type="submit" disabled={isInviting} className="w-full sm:w-auto">
-              {isInviting ? (
-                <Loader2 className="h-4 w-4 animate-spin" />
-              ) : (
-                <>
-                  <Plus className="h-4 w-4 mr-1" />
-                  Invite
-                </>
-              )}
-            </Button>
-          </form>
-
-          {error && (
-            <div className="mt-3 rounded-md bg-destructive/10 p-3 text-sm text-destructive">
-              {error}
-            </div>
-          )}
-          {success && (
-            <div className="mt-3 rounded-md bg-green-500/10 p-3 text-sm text-green-700 dark:text-green-400">
-              {success}
-            </div>
-          )}
-        </CardContent>
-      </Card>
-
-      {/* Members List */}
-      <Card>
-        <CardHeader>
-          <CardTitle>Current Members</CardTitle>
-          <CardDescription>
-            Admins can manage projects and members. Commentators can view and comment only.
-          </CardDescription>
-        </CardHeader>
-        <CardContent className="space-y-3">
-          {/* Owner */}
-          {owner && (
-            <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 sm:gap-0 p-3 rounded-lg bg-accent/30">
-              <div className="flex items-center gap-3">
-                <Avatar className="h-9 w-9">
-                  <AvatarImage src={owner.image ?? undefined} />
-                  <AvatarFallback>{owner.name?.charAt(0).toUpperCase() ?? 'U'}</AvatarFallback>
-                </Avatar>
-                <div>
-                  <p className="text-sm font-medium">{owner.name || 'Unnamed'}</p>
-                  <p className="text-xs text-muted-foreground">{owner.email}</p>
-                </div>
-              </div>
-              <Badge variant="default" className="flex items-center gap-1">
-                <Crown className="h-3 w-3" />
-                Owner
-              </Badge>
-            </div>
-          )}
-
-          {/* Members */}
-          {members.map((member) => (
-            <div key={member.id} className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 sm:gap-0 p-3 rounded-lg border">
-              <div className="flex items-center gap-3">
-                <Avatar className="h-9 w-9">
-                  <AvatarImage src={member.user.image ?? undefined} />
-                  <AvatarFallback>{member.user.name?.charAt(0).toUpperCase() ?? 'U'}</AvatarFallback>
-                </Avatar>
-                <div>
-                  <p className="text-sm font-medium">{member.user.name || 'Unnamed'}</p>
-                  <p className="text-xs text-muted-foreground">{member.user.email}</p>
-                </div>
-              </div>
-              <div className="flex items-center gap-2 w-full sm:w-auto">
-                <Select
-                  value={member.role}
-                  onValueChange={(v) => handleRoleChange(member.id, v)}
-                >
-                  <SelectTrigger className="w-full sm:w-36 h-8">
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="ADMIN">
-                      <span className="flex items-center gap-1.5">
-                        <Shield className="h-3.5 w-3.5" />
-                        Admin
-                      </span>
-                    </SelectItem>
-                    <SelectItem value="COMMENTATOR">
-                      <span className="flex items-center gap-1.5">
-                        <MessageSquare className="h-3.5 w-3.5" />
-                        Commentator
-                      </span>
-                    </SelectItem>
-                  </SelectContent>
-                </Select>
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  className="h-8 w-8 text-destructive hover:text-destructive"
-                  onClick={() => handleRemove(member.id)}
-                >
-                  <Trash2 className="h-4 w-4" />
-                </Button>
-              </div>
-            </div>
-          ))}
-
-          {members.length === 0 && (
-            <p className="text-sm text-muted-foreground text-center py-4">
-              No members yet. Invite someone above.
-            </p>
-          )}
-        </CardContent>
-      </Card>
-    </div>
+    <MembersManagementPage
+      apiBasePath={`/api/workspaces/${workspaceId}`}
+      backHref={`/workspaces/${workspaceId}`}
+      backLabel="Back to Workspace"
+      title="Members"
+      subtitle="Manage who has access to this workspace and all its projects"
+      membersDescription="Admins can manage projects and members. Commentators can view and comment only."
+      forbiddenRedirect="/workspaces"
+    />
   );
 }

app/(dashboard)/workspaces/[workspaceId]/settings/page.tsx

@@ -10,6 +10,17 @@ import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Textarea } from '@/components/ui/textarea';
 import { Separator } from '@/components/ui/separator';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from '@/components/ui/alert-dialog';
 
 interface WorkspaceData {
   id: string;
@@ -31,6 +42,7 @@ export default function WorkspaceSettingsPage() {
   const [error, setError] = useState('');
   const [success, setSuccess] = useState('');
   const [formData, setFormData] = useState({ name: '', description: '' });
+  const [deleteConfirmation, setDeleteConfirmation] = useState('');
 
   const fetchWorkspace = useCallback(async () => {
     try {
@@ -85,8 +97,8 @@ export default function WorkspaceSettingsPage() {
   };
 
   const handleDelete = async () => {
-    if (!confirm('Are you sure? This will NOT delete the projects inside, but they will be unlinked from this workspace.')) return;
-    if (!confirm('This action cannot be undone. Type the workspace name to confirm.')) return;
+    if (!workspace) return;
+    if (deleteConfirmation !== workspace.name) return;
 
     setIsDeleting(true);
     try {
@@ -203,23 +215,52 @@ export default function WorkspaceSettingsPage() {
           </CardDescription>
         </CardHeader>
         <CardContent>
-          <Button
-            variant="destructive"
-            onClick={handleDelete}
-            disabled={isDeleting}
-          >
-            {isDeleting ? (
-              <>
-                <Loader2 className="h-4 w-4 mr-2 animate-spin" />
-                Deleting...
-              </>
-            ) : (
-              <>
+          <AlertDialog>
+            <AlertDialogTrigger asChild>
+              <Button variant="destructive">
                 <Trash2 className="h-4 w-4 mr-2" />
                 Delete Workspace
-              </>
-            )}
-          </Button>
+              </Button>
+            </AlertDialogTrigger>
+            <AlertDialogContent>
+              <AlertDialogHeader>
+                <AlertDialogTitle>Delete &quot;{workspace.name}&quot;?</AlertDialogTitle>
+                <AlertDialogDescription asChild>
+                  <div className="space-y-4">
+                    <p>
+                      This will permanently delete this workspace and everything inside it
+                      (projects, videos, comments, images, and voice notes). This action cannot be undone.
+                    </p>
+                    <div className="space-y-2">
+                      <Label htmlFor="delete-workspace-confirm">
+                        Type <strong className="text-foreground">{workspace.name}</strong> to confirm
+                      </Label>
+                      <Input
+                        id="delete-workspace-confirm"
+                        value={deleteConfirmation}
+                        onChange={(e) => setDeleteConfirmation(e.target.value)}
+                        placeholder="Workspace name"
+                        className="h-11"
+                      />
+                    </div>
+                  </div>
+                </AlertDialogDescription>
+              </AlertDialogHeader>
+              <AlertDialogFooter>
+                <AlertDialogCancel onClick={() => setDeleteConfirmation('')}>
+                  Cancel
+                </AlertDialogCancel>
+                <AlertDialogAction
+                  onClick={handleDelete}
+                  disabled={deleteConfirmation !== workspace.name || isDeleting}
+                  className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+                >
+                  {isDeleting && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}
+                  Delete Workspace
+                </AlertDialogAction>
+              </AlertDialogFooter>
+            </AlertDialogContent>
+          </AlertDialog>
         </CardContent>
       </Card>
     </div>

app/api/approvals/[requestId]/cancel/route.ts

@@ -0,0 +1,93 @@
+import { NextRequest } from 'next/server';
+import { Prisma } from '@prisma/client';
+import { auth, checkProjectAccess } from '@/lib/auth';
+import { db } from '@/lib/db';
+import { rateLimit } from '@/lib/rate-limit';
+import { apiErrors, successResponse, withCacheControl } from '@/lib/api-response';
+
+type RouteParams = { params: Promise<{ requestId: string }> };
+
+function isSerializableConflict(error: unknown): boolean {
+  return error instanceof Prisma.PrismaClientKnownRequestError && error.code === 'P2034';
+}
+
+// POST /api/approvals/[requestId]/cancel
+export async function POST(request: NextRequest, { params }: RouteParams) {
+  try {
+    const limited = await rateLimit(request, 'mutate');
+    if (limited) return limited;
+
+    const session = await auth();
+    if (!session?.user?.id) return apiErrors.unauthorized();
+
+    const { requestId } = await params;
+    const approvalRequest = await db.approvalRequest.findUnique({
+      where: { id: requestId },
+      include: {
+        version: {
+          include: {
+            video: {
+              include: {
+                project: { select: { id: true, ownerId: true, workspaceId: true, visibility: true } },
+              },
+            },
+          },
+        },
+      },
+    });
+    if (!approvalRequest) return apiErrors.notFound('Approval request');
+
+    const access = await checkProjectAccess(approvalRequest.version.video.project, session.user.id, { intent: 'manage' });
+    const canCancel = approvalRequest.requestedById === session.user.id || access.canEdit;
+    if (!canCancel) return apiErrors.forbidden('Access denied');
+
+    if (approvalRequest.status !== 'PENDING') {
+      return apiErrors.conflict('Only pending approval requests can be canceled');
+    }
+
+    const updated = await db.$transaction(async (tx) => {
+      const current = await tx.approvalRequest.findUnique({
+        where: { id: requestId },
+        select: { status: true },
+      });
+      if (!current) throw new Error('__NOT_FOUND__');
+      if (current.status !== 'PENDING') throw new Error('__NOT_PENDING__');
+
+      return tx.approvalRequest.update({
+        where: { id: requestId },
+        data: {
+          status: 'CANCELED',
+          canceledAt: new Date(),
+          canceledById: session.user.id,
+        },
+        include: {
+          requestedBy: { select: { id: true, name: true, email: true, image: true } },
+          canceledBy: { select: { id: true, name: true, email: true, image: true } },
+          decisions: {
+            orderBy: { createdAt: 'asc' },
+            include: { approver: { select: { id: true, name: true, email: true, image: true } } },
+          },
+        },
+      });
+    }, {
+      isolationLevel: Prisma.TransactionIsolationLevel.Serializable,
+    });
+
+    const response = successResponse({ request: updated });
+    return withCacheControl(response, 'private, no-store');
+  } catch (error) {
+    if (error instanceof Error) {
+      if (error.message === '__NOT_PENDING__') {
+        return apiErrors.conflict('Only pending approval requests can be canceled');
+      }
+      if (error.message === '__NOT_FOUND__') {
+        return apiErrors.notFound('Approval request');
+      }
+    }
+    if (isSerializableConflict(error)) {
+      return apiErrors.conflict('Request state changed. Please try again.');
+    }
+    console.error('Error canceling approval request:', error);
+    return apiErrors.internalError('Failed to cancel approval request');
+  }
+}

app/api/approvals/[requestId]/decision/route.ts

@@ -0,0 +1,225 @@
+import { NextRequest } from 'next/server';
+import { Prisma } from '@prisma/client';
+import { auth, checkProjectAccess } from '@/lib/auth';
+import { db } from '@/lib/db';
+import { notifyUsers } from '@/lib/notifications';
+import { rateLimit } from '@/lib/rate-limit';
+import { apiErrors, successResponse, withCacheControl } from '@/lib/api-response';
+
+type RouteParams = { params: Promise<{ requestId: string }> };
+
+function isSerializableConflict(error: unknown): boolean {
+  return error instanceof Prisma.PrismaClientKnownRequestError && error.code === 'P2034';
+}
+
+// POST /api/approvals/[requestId]/decision
+export async function POST(request: NextRequest, { params }: RouteParams) {
+  try {
+    const limited = await rateLimit(request, 'mutate');
+    if (limited) return limited;
+
+    const session = await auth();
+    if (!session?.user?.id) return apiErrors.unauthorized();
+
+    const { requestId } = await params;
+    const body = await request.json().catch(() => ({}));
+    const decision = body.decision;
+    if (decision !== 'APPROVED' && decision !== 'REJECTED') {
+      return apiErrors.badRequest('Decision must be APPROVED or REJECTED');
+    }
+
+    const note = typeof body.note === 'string' ? body.note.trim() : '';
+    if (note.length > 2000) {
+      return apiErrors.badRequest('Note must be 2000 characters or fewer');
+    }
+
+    const approvalRequest = await db.approvalRequest.findUnique({
+      where: { id: requestId },
+      include: {
+        version: {
+          include: {
+            video: {
+              include: {
+                project: { select: { id: true, name: true, ownerId: true, workspaceId: true, visibility: true } },
+              },
+            },
+          },
+        },
+        decisions: {
+          where: { approverId: session.user.id },
+          select: { id: true, status: true },
+        },
+      },
+    });
+    if (!approvalRequest) return apiErrors.notFound('Approval request');
+
+    const access = await checkProjectAccess(approvalRequest.version.video.project, session.user.id);
+    if (!access.hasAccess) return apiErrors.forbidden('Access denied');
+
+    const myDecision = approvalRequest.decisions[0];
+    if (!myDecision) return apiErrors.forbidden('You are not an approver on this request');
+    if (approvalRequest.status !== 'PENDING') {
+      return apiErrors.conflict('This approval request is no longer pending');
+    }
+    if (myDecision.status !== 'PENDING') {
+      return apiErrors.conflict('You have already responded to this request');
+    }
+
+    const updated = await db.$transaction(async (tx) => {
+      const currentRequest = await tx.approvalRequest.findUnique({
+        where: { id: requestId },
+        include: {
+          decisions: {
+            orderBy: { createdAt: 'asc' },
+            include: {
+              approver: { select: { id: true, name: true, email: true, image: true } },
+            },
+          },
+          requestedBy: { select: { id: true, name: true, email: true, image: true } },
+          version: {
+            include: {
+              video: {
+                include: {
+                  project: { select: { id: true, name: true } },
+                },
+              },
+            },
+          },
+        },
+      });
+      if (!currentRequest) {
+        throw new Error('__NOT_FOUND__');
+      }
+      if (currentRequest.status !== 'PENDING') {
+        throw new Error('__NOT_PENDING__');
+      }
+
+      const decisionRow = await tx.approvalDecision.findUnique({
+        where: { requestId_approverId: { requestId, approverId: session.user.id } },
+        select: { status: true },
+      });
+      if (!decisionRow) throw new Error('__NOT_APPROVER__');
+      if (decisionRow.status !== 'PENDING') throw new Error('__ALREADY_RESPONDED__');
+
+      await tx.approvalDecision.update({
+        where: { requestId_approverId: { requestId, approverId: session.user.id } },
+        data: {
+          status: decision,
+          note: note || null,
+          respondedAt: new Date(),
+        },
+      });
+
+      if (decision === 'REJECTED') {
+        await tx.approvalRequest.update({
+          where: { id: requestId },
+          data: {
+            status: 'REJECTED',
+            resolvedAt: new Date(),
+          },
+        });
+      } else {
+        const pendingCount = await tx.approvalDecision.count({
+          where: { requestId, status: 'PENDING' },
+        });
+        const rejectedCount = await tx.approvalDecision.count({
+          where: { requestId, status: 'REJECTED' },
+        });
+        if (pendingCount === 0 && rejectedCount === 0) {
+          await tx.approvalRequest.update({
+            where: { id: requestId },
+            data: {
+              status: 'APPROVED',
+              resolvedAt: new Date(),
+            },
+          });
+        }
+      }
+
+      return tx.approvalRequest.findUnique({
+        where: { id: requestId },
+        include: {
+          requestedBy: { select: { id: true, name: true, email: true, image: true } },
+          canceledBy: { select: { id: true, name: true, email: true, image: true } },
+          decisions: {
+            orderBy: { createdAt: 'asc' },
+            include: {
+              approver: { select: { id: true, name: true, email: true, image: true } },
+            },
+          },
+          version: {
+            include: {
+              video: {
+                include: {
+                  project: { select: { id: true, name: true } },
+                },
+              },
+            },
+          },
+        },
+      });
+    }, {
+      isolationLevel: Prisma.TransactionIsolationLevel.Serializable,
+    });
+
+    if (!updated) return apiErrors.notFound('Approval request');
+
+    const actorName = session.user.name || 'A team member';
+    const versionLabel = updated.version.versionLabel || `Version ${updated.version.versionNumber}`;
+    const baseUrl = process.env.NEXTAUTH_URL || '';
+    const requestUrl = `${baseUrl}/projects/${updated.version.video.project.id}/videos/${updated.version.video.id}`;
+
+    notifyUsers([updated.requestedById], {
+      type: 'approval_action',
+      projectName: updated.version.video.project.name,
+      videoTitle: updated.version.video.title,
+      versionLabel,
+      actorName,
+      action: decision === 'APPROVED' ? 'approved' : 'rejected',
+      note: note || undefined,
+      url: requestUrl,
+    }).catch((error) => {
+      console.error('Approval action notification failed:', error);
+    });
+
+    if (updated.status === 'APPROVED') {
+      notifyUsers([updated.requestedById], {
+        type: 'approval_completed',
+        projectName: updated.version.video.project.name,
+        videoTitle: updated.version.video.title,
+        versionLabel,
+        approvedByCount: updated.decisions.filter((item) => item.status === 'APPROVED').length,
+        url: requestUrl,
+      }).catch((error) => {
+        console.error('Approval completed notification failed:', error);
+      });
+    } else if (updated.status === 'REJECTED') {
+      notifyUsers([updated.requestedById], {
+        type: 'approval_rejected',
+        projectName: updated.version.video.project.name,
+        videoTitle: updated.version.video.title,
+        versionLabel,
+        rejectedBy: actorName,
+        note: note || undefined,
+        url: requestUrl,
+      }).catch((error) => {
+        console.error('Approval rejected notification failed:', error);
+      });
+    }
+
+    const response = successResponse({ request: updated });
+    return withCacheControl(response, 'private, no-store');
+  } catch (error) {
+    if (error instanceof Error) {
+      if (error.message === '__NOT_PENDING__') return apiErrors.conflict('This approval request is no longer pending');
+      if (error.message === '__ALREADY_RESPONDED__') return apiErrors.conflict('You have already responded to this request');
+      if (error.message === '__NOT_APPROVER__') return apiErrors.forbidden('You are not an approver on this request');
+      if (error.message === '__NOT_FOUND__') return apiErrors.notFound('Approval request');
+    }
+    if (isSerializableConflict(error)) {
+      return apiErrors.conflict('Request state changed. Please try again.');
+    }
+    console.error('Error responding to approval request:', error);
+    return apiErrors.internalError('Failed to respond to approval request');
+  }
+}

app/api/auth/register/route.ts

@@ -1,6 +1,7 @@
 import { NextRequest } from 'next/server';
 import { db } from '@/lib/db';
 import bcrypt from 'bcryptjs';
+import { acceptInvitationTokenForUser, getValidInvitationByToken } from '@/lib/invitations';
 import { checkRateLimit, getClientIp, rateLimitHeaders, RATE_LIMIT_CONFIGS } from '@/lib/rate-limit';
 import { apiErrors, successResponse, withCacheControl } from '@/lib/api-response';
 
@@ -16,27 +17,7 @@ export async function POST(request: NextRequest) {
         }
 
         const body = await request.json();
-        const { name, email, password, inviteCode } = body;
-
-        // Validate invite code using constant-time comparison to prevent timing attacks
-        const validInviteCode = process.env.INVITE_CODE;
-        if (!validInviteCode || !inviteCode) {
-            return apiErrors.forbidden('Invalid invite code');
-        }
-
-        // Constant-time comparison
-        const { timingSafeEqual } = await import('crypto');
-        const validBuffer = Buffer.from(validInviteCode);
-        const providedBuffer = Buffer.from(String(inviteCode));
-
-        // Ensure same length for comparison (prevents length-based timing leak)
-        const isValidLength = validBuffer.length === providedBuffer.length;
-        const compareBuffer = isValidLength ? providedBuffer : validBuffer;
-        const isValidCode = isValidLength && timingSafeEqual(validBuffer, compareBuffer);
-
-        if (!isValidCode) {
-            return apiErrors.forbidden('Invalid invite code');
-        }
+        const { name, email, password, inviteCode, invitationToken } = body;
 
         // Validate required fields
         if (!name || typeof name !== 'string' || name.trim().length < 2) {
@@ -46,20 +27,57 @@ export async function POST(request: NextRequest) {
         if (!email || typeof email !== 'string') {
             return apiErrors.badRequest('Email is required');
         }
+        const normalizedEmail = email.toLowerCase().trim();
 
         // Basic email validation
         const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-        if (!emailRegex.test(email)) {
+        if (!emailRegex.test(normalizedEmail)) {
             return apiErrors.validationError('Invalid email format');
         }
 
+        // Allow registration via a valid invitation token OR global invite code.
+        let invitationIsValid = false;
+        let validatedInvitationToken: string | null = null;
+        if (typeof invitationToken === 'string' && invitationToken.trim()) {
+            const normalizedToken = invitationToken.trim();
+            const invitation = await getValidInvitationByToken(normalizedToken);
+            if (invitation && invitation.email === normalizedEmail) {
+                invitationIsValid = true;
+                validatedInvitationToken = normalizedToken;
+            } else {
+                return apiErrors.forbidden('Invalid or expired invitation token');
+            }
+        }
+
+        if (!invitationIsValid) {
+            // Validate invite code using constant-time comparison to prevent timing attacks
+            const validInviteCode = process.env.INVITE_CODE;
+            if (!validInviteCode || !inviteCode) {
+                return apiErrors.forbidden('Invalid invite code');
+            }
+
+            // Constant-time comparison
+            const { timingSafeEqual } = await import('crypto');
+            const validBuffer = Buffer.from(validInviteCode);
+            const providedBuffer = Buffer.from(String(inviteCode));
+
+            // Ensure same length for comparison (prevents length-based timing leak)
+            const isValidLength = validBuffer.length === providedBuffer.length;
+            const compareBuffer = isValidLength ? providedBuffer : validBuffer;
+            const isValidCode = isValidLength && timingSafeEqual(validBuffer, compareBuffer);
+
+            if (!isValidCode) {
+                return apiErrors.forbidden('Invalid invite code');
+            }
+        }
+
         if (!password || typeof password !== 'string' || password.length < 8) {
             return apiErrors.badRequest('Password must be at least 8 characters');
         }
 
         // Check if email already exists
         const existingUser = await db.user.findUnique({
-            where: { email: email.toLowerCase() },
+            where: { email: normalizedEmail },
         });
 
         if (existingUser) {
@@ -73,7 +91,7 @@ export async function POST(request: NextRequest) {
         const user = await db.user.create({
             data: {
                 name: name.trim(),
-                email: email.toLowerCase(),
+                email: normalizedEmail,
                 password: hashedPassword,
             },
             select: {
@@ -84,6 +102,18 @@ export async function POST(request: NextRequest) {
             },
         });
 
+        if (validatedInvitationToken) {
+            const result = await acceptInvitationTokenForUser({
+                token: validatedInvitationToken,
+                userId: user.id,
+                email: normalizedEmail,
+            });
+            if (result !== 'accepted') {
+                await db.user.delete({ where: { id: user.id } });
+                return apiErrors.conflict('Invitation could not be accepted. Please request a new invitation.');
+            }
+        }
+
         const response = successResponse(
             { message: 'Account created successfully', user },
             201

app/api/projects/[projectId]/approval-candidates/route.ts

@@ -0,0 +1,34 @@
+import { NextRequest } from 'next/server';
+import { auth, checkProjectAccess } from '@/lib/auth';
+import { db } from '@/lib/db';
+import { getApprovalCandidatesForProject } from '@/lib/approval-workflow';
+import { apiErrors, successResponse, withCacheControl } from '@/lib/api-response';
+
+type RouteParams = { params: Promise<{ projectId: string }> };
+
+// GET /api/projects/[projectId]/approval-candidates
+export async function GET(_request: NextRequest, { params }: RouteParams) {
+  try {
+    const session = await auth();
+    if (!session?.user?.id) return apiErrors.unauthorized();
+
+    const { projectId } = await params;
+    const project = await db.project.findUnique({
+      where: { id: projectId },
+      select: { id: true, ownerId: true, workspaceId: true, visibility: true },
+    });
+    if (!project) return apiErrors.notFound('Project');
+
+    const access = await checkProjectAccess(project, session.user.id, { intent: 'manage' });
+    if (!access.canEdit) return apiErrors.forbidden('Access denied');
+
+    const candidates = await getApprovalCandidatesForProject(projectId);
+    if (!candidates) return apiErrors.notFound('Project');
+
+    const response = successResponse({ candidates });
+    return withCacheControl(response, 'private, no-store');
+  } catch (error) {
+    console.error('Error fetching approval candidates:', error);
+    return apiErrors.internalError('Failed to fetch approval candidates');
+  }
+}

app/api/projects/[projectId]/members/invitations/[invitationId]/route.ts

@@ -0,0 +1,70 @@
+import { NextRequest } from 'next/server';
+import { InvitationStatus, ProjectMemberRole } from '@prisma/client';
+import { auth } from '@/lib/auth';
+import { db } from '@/lib/db';
+import { rateLimit } from '@/lib/rate-limit';
+import { apiErrors, successResponse, withCacheControl } from '@/lib/api-response';
+
+type RouteParams = { params: Promise<{ projectId: string; invitationId: string }> };
+
+// DELETE /api/projects/[projectId]/members/invitations/[invitationId] - Cancel a pending invitation
+export async function DELETE(request: NextRequest, { params }: RouteParams) {
+  try {
+    const limited = await rateLimit(request, 'manage-member');
+    if (limited) return limited;
+
+    const session = await auth();
+    const { projectId, invitationId } = await params;
+
+    if (!session?.user?.id) {
+      return apiErrors.unauthorized();
+    }
+
+    const project = await db.project.findUnique({
+      where: { id: projectId },
+      include: { members: { where: { userId: session.user.id } } },
+    });
+
+    if (!project) {
+      return apiErrors.notFound('Project');
+    }
+
+    const isOwner = project.ownerId === session.user.id;
+    const isAdmin = project.members[0]?.role === ProjectMemberRole.ADMIN;
+
+    if (!isOwner && !isAdmin) {
+      return apiErrors.forbidden('Only project owners and admins can cancel invitations');
+    }
+
+    const invitation = await db.invitation.findFirst({
+      where: {
+        id: invitationId,
+        projectId,
+        scope: 'PROJECT',
+      },
+      select: {
+        id: true,
+        status: true,
+      },
+    });
+
+    if (!invitation) {
+      return apiErrors.notFound('Invitation');
+    }
+
+    if (invitation.status !== InvitationStatus.PENDING) {
+      return apiErrors.conflict('Only pending invitations can be canceled');
+    }
+
+    await db.invitation.update({
+      where: { id: invitation.id },
+      data: { status: InvitationStatus.CANCELED },
+    });
+
+    const response = successResponse({ message: 'Invitation canceled' });
+    return withCacheControl(response, 'private, no-store');
+  } catch (error) {
+    console.error('Error canceling project invitation:', error);
+    return apiErrors.internalError('Failed to cancel invitation');
+  }
+}

app/api/projects/[projectId]/members/route.ts

@@ -1,8 +1,9 @@
 import { NextRequest } from 'next/server';
 import { db } from '@/lib/db';
 import { auth } from '@/lib/auth';
-import { ProjectMemberRole } from '@prisma/client';
+import { InvitationRole, ProjectMemberRole } from '@prisma/client';
 import { rateLimit } from '@/lib/rate-limit';
+import { buildInvitationUrl, createOrRefreshInvitation, sendInvitationEmail } from '@/lib/invitations';
 import { apiErrors, successResponse, withCacheControl } from '@/lib/api-response';
 
 type RouteParams = { params: Promise<{ projectId: string }> };
@@ -30,26 +31,51 @@ export async function GET(request: NextRequest, { params }: RouteParams) {
 
         const isOwner = project.ownerId === session.user.id;
         const isMember = project.members.length > 0;
+        const isAdmin = project.members[0]?.role === ProjectMemberRole.ADMIN;
 
         if (!isOwner && !isMember) {
             return apiErrors.forbidden('Access denied');
         }
 
-        const members = await db.projectMember.findMany({
-            where: { projectId },
-            include: {
-                user: { select: { id: true, name: true, email: true, image: true } },
-            },
-            orderBy: { createdAt: 'asc' },
-        });
+        const now = new Date();
+        const canViewPendingInvitations = isOwner || isAdmin;
+        const [members, owner, pendingInvitations] = await Promise.all([
+            db.projectMember.findMany({
+                where: { projectId },
+                include: {
+                    user: { select: { id: true, name: true, email: true, image: true } },
+                },
+                orderBy: { createdAt: 'asc' },
+            }),
+            db.user.findUnique({
+                where: { id: project.ownerId },
+                select: { id: true, name: true, email: true, image: true },
+            }),
+            canViewPendingInvitations
+                ? db.invitation.findMany({
+                    where: {
+                        projectId,
+                        scope: 'PROJECT',
+                        status: 'PENDING',
+                        expiresAt: { gt: now },
+                    },
+                    select: {
+                        id: true,
+                        email: true,
+                        role: true,
+                        createdAt: true,
+                        expiresAt: true,
+                        invitedBy: {
+                            select: { id: true, name: true, email: true },
+                        },
+                    },
+                    orderBy: { createdAt: 'desc' },
+                })
+                : Promise.resolve([]),
+        ]);
 
-        const owner = await db.user.findUnique({
-            where: { id: project.ownerId },
-            select: { id: true, name: true, email: true, image: true },
-        });
-
-        const response = successResponse({ members, owner });
-        return withCacheControl(response, 'private, max-age=60, stale-while-revalidate=120');
+        const response = successResponse({ members, owner, pendingInvitations });
+        return withCacheControl(response, 'private, no-store');
     } catch (error) {
         console.error('Error fetching project members:', error);
         return apiErrors.internalError('Failed to fetch members');
@@ -93,45 +119,55 @@ export async function POST(request: NextRequest, { params }: RouteParams) {
             return apiErrors.badRequest('Email is required');
         }
 
+        const normalizedEmail = email.toLowerCase().trim();
+        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+        if (!emailRegex.test(normalizedEmail)) {
+            return apiErrors.validationError('Invalid email format');
+        }
+
         // Validate role
         const validRoles = ['ADMIN', 'COMMENTATOR'];
         const memberRole = validRoles.includes(role) ? role : 'COMMENTATOR';
 
-        // Find user by email
+        // If this email belongs to an existing user, validate owner/member conflicts.
         const userToInvite = await db.user.findUnique({
-            where: { email: email.toLowerCase().trim() },
+            where: { email: normalizedEmail },
+            select: { id: true },
         });
 
-        if (!userToInvite) {
-            const response = successResponse({ message: 'If the user exists, an invitation has been sent.' });
-        return withCacheControl(response, 'private, no-store');
-        }
-
-        if (userToInvite.id === project.ownerId) {
+        if (userToInvite?.id === project.ownerId) {
             return apiErrors.badRequest('Cannot invite the project owner as a member');
         }
 
-        // Check if already a member
-        const existingMember = await db.projectMember.findUnique({
-            where: { projectId_userId: { projectId, userId: userToInvite.id } },
-        });
+        if (userToInvite) {
+            const existingMember = await db.projectMember.findUnique({
+                where: { projectId_userId: { projectId, userId: userToInvite.id } },
+            });
 
-        if (existingMember) {
-            return apiErrors.conflict('User is already a member of this project');
+            if (existingMember) {
+                return apiErrors.conflict('User is already a member of this project');
+            }
         }
 
-        const member = await db.projectMember.create({
-            data: {
-                projectId,
-                userId: userToInvite.id,
-                role: memberRole as ProjectMemberRole,
-            },
-            include: {
-                user: { select: { id: true, name: true, email: true, image: true } },
-            },
+        const invitation = await createOrRefreshInvitation({
+            email: normalizedEmail,
+            scope: 'PROJECT',
+            role: memberRole as InvitationRole,
+            invitedById: session.user.id,
+            projectId,
         });
 
-        const response = successResponse(member, 201);
+        const invitationUrl = buildInvitationUrl(invitation.token, normalizedEmail);
+        void sendInvitationEmail({
+            to: normalizedEmail,
+            inviterName: session.user.name || 'A team member',
+            role: invitation.role,
+            scope: invitation.scope,
+            targetName: project.name,
+            invitationUrl,
+        });
+
+        const response = successResponse({ message: 'Invitation email sent.' });
         return withCacheControl(response, 'private, no-store');
     } catch (error) {
         console.error('Error inviting project member:', error);

app/api/projects/[projectId]/videos/[videoId]/route.ts

@@ -125,6 +125,7 @@ export async function GET(request: NextRequest, { params }: RouteParams) {
             canDownload: access.hasAccess,
             canManageTags: access.canEdit,
             canResolveComments: access.canEdit,
+            canRequestApproval: access.canEdit,
         });
 
         return withCacheControl(response, 'private, no-cache');

app/api/settings/notifications/route.ts

@@ -29,6 +29,7 @@ export async function GET() {
                 onNewVersion: true,
                 onNewComment: true,
                 onNewReply: true,
+                onApprovalEvents: true,
                 timezone: 'UTC',
             }
         );
@@ -61,6 +62,7 @@ export async function PUT(request: NextRequest) {
             onNewVersion,
             onNewComment,
             onNewReply,
+            onApprovalEvents,
             timezone,
         } = body;
 
@@ -81,6 +83,7 @@ export async function PUT(request: NextRequest) {
                 onNewVersion: onNewVersion ?? true,
                 onNewComment: onNewComment ?? true,
                 onNewReply: onNewReply ?? true,
+                onApprovalEvents: onApprovalEvents ?? true,
                 timezone: timezone || 'UTC',
             },
             update: {
@@ -92,6 +95,7 @@ export async function PUT(request: NextRequest) {
                 onNewVersion: onNewVersion ?? true,
                 onNewComment: onNewComment ?? true,
                 onNewReply: onNewReply ?? true,
+                onApprovalEvents: onApprovalEvents ?? true,
                 timezone: timezone || 'UTC',
             },
         });

app/api/versions/[versionId]/approvals/route.ts

@@ -0,0 +1,183 @@
+import { NextRequest } from 'next/server';
+import { Prisma } from '@prisma/client';
+import { auth, checkProjectAccess } from '@/lib/auth';
+import { db } from '@/lib/db';
+import { getApprovalCandidatesForProject } from '@/lib/approval-workflow';
+import { notifyUsers } from '@/lib/notifications';
+import { rateLimit } from '@/lib/rate-limit';
+import { apiErrors, successResponse, withCacheControl } from '@/lib/api-response';
+
+type RouteParams = { params: Promise<{ versionId: string }> };
+
+function isSerializableConflict(error: unknown): boolean {
+  return error instanceof Prisma.PrismaClientKnownRequestError && error.code === 'P2034';
+}
+
+// GET /api/versions/[versionId]/approvals
+export async function GET(_request: NextRequest, { params }: RouteParams) {
+  try {
+    const session = await auth();
+    if (!session?.user?.id) return apiErrors.unauthorized();
+
+    const { versionId } = await params;
+    const version = await db.videoVersion.findUnique({
+      where: { id: versionId },
+      include: {
+        video: {
+          include: {
+            project: { select: { id: true, ownerId: true, workspaceId: true, visibility: true } },
+          },
+        },
+      },
+    });
+    if (!version) return apiErrors.notFound('Version');
+
+    const access = await checkProjectAccess(version.video.project, session.user.id);
+    const hasMembership = access.isOwner || access.isProjectMember || access.isWorkspaceMember;
+    if (!hasMembership) return apiErrors.forbidden('Access denied');
+
+    const requests = await db.approvalRequest.findMany({
+      where: { versionId },
+      orderBy: { createdAt: 'desc' },
+      include: {
+        requestedBy: { select: { id: true, name: true, email: true, image: true } },
+        canceledBy: { select: { id: true, name: true, email: true, image: true } },
+        decisions: {
+          orderBy: { createdAt: 'asc' },
+          include: {
+            approver: { select: { id: true, name: true, email: true, image: true } },
+          },
+        },
+      },
+    });
+
+    const response = successResponse({ requests });
+    return withCacheControl(response, 'private, no-store');
+  } catch (error) {
+    console.error('Error fetching approvals:', error);
+    return apiErrors.internalError('Failed to fetch approvals');
+  }
+}
+
+// POST /api/versions/[versionId]/approvals
+export async function POST(request: NextRequest, { params }: RouteParams) {
+  try {
+    const limited = await rateLimit(request, 'mutate');
+    if (limited) return limited;
+
+    const session = await auth();
+    if (!session?.user?.id) return apiErrors.unauthorized();
+
+    const { versionId } = await params;
+    const version = await db.videoVersion.findUnique({
+      where: { id: versionId },
+      include: {
+        video: {
+          include: {
+            project: { select: { id: true, name: true, ownerId: true, workspaceId: true, visibility: true } },
+          },
+        },
+      },
+    });
+    if (!version) return apiErrors.notFound('Version');
+
+    const access = await checkProjectAccess(version.video.project, session.user.id, { intent: 'manage' });
+    if (!access.canEdit) return apiErrors.forbidden('Access denied');
+
+    const body = await request.json().catch(() => ({})) as { approverIds?: unknown; message?: unknown };
+    const message = typeof body.message === 'string' ? body.message.trim() : '';
+    if (message.length > 2000) {
+      return apiErrors.badRequest('Message must be 2000 characters or fewer');
+    }
+
+    const rawApproverIds = Array.isArray(body.approverIds) ? body.approverIds : [];
+    const approverIds = Array.from(new Set(
+      rawApproverIds
+        .filter((approverId): approverId is string => typeof approverId === 'string' && approverId.trim().length > 0)
+        .map((approverId) => approverId.trim())
+    ));
+
+    if (approverIds.length === 0) {
+      return apiErrors.badRequest('At least one approver is required');
+    }
+
+    if (approverIds.includes(session.user.id)) {
+      return apiErrors.badRequest('Requester cannot be an approver');
+    }
+
+    const candidates = await getApprovalCandidatesForProject(version.video.project.id);
+    if (!candidates) return apiErrors.notFound('Project');
+    const candidateIds = new Set(candidates.map((candidate) => candidate.id));
+
+    if (approverIds.some((id) => !candidateIds.has(id))) {
+      return apiErrors.badRequest('One or more approvers are not eligible for this project');
+    }
+
+    const created = await db.$transaction(async (tx) => {
+      const existingPending = await tx.approvalRequest.findFirst({
+        where: { versionId, status: 'PENDING' },
+        select: { id: true },
+      });
+      if (existingPending) {
+        throw new Error('__PENDING_REQUEST_EXISTS__');
+      }
+
+      return tx.approvalRequest.create({
+        data: {
+          versionId,
+          requestedById: session.user.id,
+          message: message || null,
+          decisions: {
+            createMany: {
+              data: approverIds.map((approverId) => ({
+              approverId,
+              status: 'PENDING',
+              })),
+            },
+          },
+        },
+        include: {
+          requestedBy: { select: { id: true, name: true, email: true, image: true } },
+          canceledBy: { select: { id: true, name: true, email: true, image: true } },
+          decisions: {
+            orderBy: { createdAt: 'asc' },
+            include: {
+              approver: { select: { id: true, name: true, email: true, image: true } },
+            },
+          },
+        },
+      });
+    }, {
+      isolationLevel: Prisma.TransactionIsolationLevel.Serializable,
+    });
+
+    const requesterName = session.user.name || 'A team member';
+    const versionLabel = version.versionLabel || `Version ${version.versionNumber}`;
+    const baseUrl = process.env.NEXTAUTH_URL || '';
+    const requestUrl = `${baseUrl}/projects/${version.video.project.id}/videos/${version.video.id}`;
+
+    notifyUsers(approverIds, {
+      type: 'approval_requested',
+      projectName: version.video.project.name,
+      videoTitle: version.video.title,
+      versionLabel,
+      requestedBy: requesterName,
+      message: message || undefined,
+      url: requestUrl,
+    }).catch((error) => {
+      console.error('Approval request notification failed:', error);
+    });
+
+    const response = successResponse({ request: created }, 201);
+    return withCacheControl(response, 'private, no-store');
+  } catch (error) {
+    if (error instanceof Error && error.message === '__PENDING_REQUEST_EXISTS__') {
+      return apiErrors.conflict('An approval request is already pending for this version');
+    }
+    if (isSerializableConflict(error)) {
+      return apiErrors.conflict('Request state changed. Please try again.');
+    }
+    console.error('Error creating approval request:', error);
+    return apiErrors.internalError('Failed to create approval request');
+  }
+}

app/api/workspaces/[workspaceId]/members/invitations/[invitationId]/route.ts

@@ -0,0 +1,70 @@
+import { NextRequest } from 'next/server';
+import { InvitationStatus, WorkspaceMemberRole } from '@prisma/client';
+import { auth } from '@/lib/auth';
+import { db } from '@/lib/db';
+import { rateLimit } from '@/lib/rate-limit';
+import { apiErrors, successResponse, withCacheControl } from '@/lib/api-response';
+
+type RouteParams = { params: Promise<{ workspaceId: string; invitationId: string }> };
+
+// DELETE /api/workspaces/[workspaceId]/members/invitations/[invitationId] - Cancel a pending invitation
+export async function DELETE(request: NextRequest, { params }: RouteParams) {
+  try {
+    const limited = await rateLimit(request, 'manage-member');
+    if (limited) return limited;
+
+    const session = await auth();
+    const { workspaceId, invitationId } = await params;
+
+    if (!session?.user?.id) {
+      return apiErrors.unauthorized();
+    }
+
+    const workspace = await db.workspace.findUnique({
+      where: { id: workspaceId },
+      include: { members: { where: { userId: session.user.id } } },
+    });
+
+    if (!workspace) {
+      return apiErrors.notFound('Workspace');
+    }
+
+    const isOwner = workspace.ownerId === session.user.id;
+    const isAdmin = workspace.members[0]?.role === WorkspaceMemberRole.ADMIN;
+
+    if (!isOwner && !isAdmin) {
+      return apiErrors.forbidden('Only workspace owners and admins can cancel invitations');
+    }
+
+    const invitation = await db.invitation.findFirst({
+      where: {
+        id: invitationId,
+        workspaceId,
+        scope: 'WORKSPACE',
+      },
+      select: {
+        id: true,
+        status: true,
+      },
+    });
+
+    if (!invitation) {
+      return apiErrors.notFound('Invitation');
+    }
+
+    if (invitation.status !== InvitationStatus.PENDING) {
+      return apiErrors.conflict('Only pending invitations can be canceled');
+    }
+
+    await db.invitation.update({
+      where: { id: invitation.id },
+      data: { status: InvitationStatus.CANCELED },
+    });
+
+    const response = successResponse({ message: 'Invitation canceled' });
+    return withCacheControl(response, 'private, no-store');
+  } catch (error) {
+    console.error('Error canceling workspace invitation:', error);
+    return apiErrors.internalError('Failed to cancel invitation');
+  }
+}

app/api/workspaces/[workspaceId]/members/route.ts

@@ -1,8 +1,9 @@
 import { NextRequest } from 'next/server';
 import { db } from '@/lib/db';
 import { auth } from '@/lib/auth';
-import { WorkspaceMemberRole } from '@prisma/client';
+import { InvitationRole, WorkspaceMemberRole } from '@prisma/client';
 import { rateLimit } from '@/lib/rate-limit';
+import { buildInvitationUrl, createOrRefreshInvitation, sendInvitationEmail } from '@/lib/invitations';
 import { apiErrors, successResponse, withCacheControl } from '@/lib/api-response';
 
 type RouteParams = { params: Promise<{ workspaceId: string }> };
@@ -54,12 +55,15 @@ export async function GET(request: NextRequest, { params }: RouteParams) {
 
         const isOwner = workspace.ownerId === session.user.id;
         const isMember = workspace.members.length > 0;
+        const isAdmin = workspace.members[0]?.role === WorkspaceMemberRole.ADMIN;
 
         if (!isOwner && !isMember) {
             return apiErrors.forbidden('Access denied');
         }
 
-        const [members, total] = await Promise.all([
+        const now = new Date();
+        const canViewPendingInvitations = isOwner || isAdmin;
+        const [members, total, pendingInvitations] = await Promise.all([
             db.workspaceMember.findMany({
                 where: { workspaceId },
                 include: {
@@ -72,6 +76,27 @@ export async function GET(request: NextRequest, { params }: RouteParams) {
             db.workspaceMember.count({
                 where: { workspaceId },
             }),
+            canViewPendingInvitations
+                ? db.invitation.findMany({
+                    where: {
+                        workspaceId,
+                        scope: 'WORKSPACE',
+                        status: 'PENDING',
+                        expiresAt: { gt: now },
+                    },
+                    select: {
+                        id: true,
+                        email: true,
+                        role: true,
+                        createdAt: true,
+                        expiresAt: true,
+                        invitedBy: {
+                            select: { id: true, name: true, email: true },
+                        },
+                    },
+                    orderBy: { createdAt: 'desc' },
+                })
+                : Promise.resolve([]),
         ]);
 
         // Include the owner as well
@@ -81,7 +106,7 @@ export async function GET(request: NextRequest, { params }: RouteParams) {
         });
 
         const response = successResponse(
-            { members, owner },
+            { members, owner, pendingInvitations },
             200,
             {
                 page,
@@ -90,7 +115,7 @@ export async function GET(request: NextRequest, { params }: RouteParams) {
                 totalPages: Math.ceil(total / limit),
             }
         );
-        return withCacheControl(response, 'private, max-age=60, stale-while-revalidate=120');
+        return withCacheControl(response, 'private, no-store');
     } catch (error) {
         console.error('Error fetching workspace members:', error);
         return apiErrors.internalError('Failed to fetch members');
@@ -134,45 +159,55 @@ export async function POST(request: NextRequest, { params }: RouteParams) {
             return apiErrors.badRequest('Email is required');
         }
 
+        const normalizedEmail = email.toLowerCase().trim();
+        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+        if (!emailRegex.test(normalizedEmail)) {
+            return apiErrors.validationError('Invalid email format');
+        }
+
         // Validate role
         const validRoles = ['ADMIN', 'COMMENTATOR'];
         const memberRole = validRoles.includes(role) ? role : 'COMMENTATOR';
 
-        // Find user by email
+        // If this email belongs to an existing user, validate owner/member conflicts.
         const userToInvite = await db.user.findUnique({
-            where: { email: email.toLowerCase().trim() },
+            where: { email: normalizedEmail },
+            select: { id: true },
         });
 
-        if (!userToInvite) {
-            const response = successResponse({ message: 'If the user exists, an invitation has been sent.' });
-        return withCacheControl(response, 'private, no-store');
-        }
-
-        if (userToInvite.id === workspace.ownerId) {
+        if (userToInvite?.id === workspace.ownerId) {
             return apiErrors.badRequest('Cannot invite the workspace owner as a member');
         }
 
-        // Check if already a member
-        const existingMember = await db.workspaceMember.findUnique({
-            where: { workspaceId_userId: { workspaceId, userId: userToInvite.id } },
-        });
+        if (userToInvite) {
+            const existingMember = await db.workspaceMember.findUnique({
+                where: { workspaceId_userId: { workspaceId, userId: userToInvite.id } },
+            });
 
-        if (existingMember) {
-            return apiErrors.conflict('User is already a member of this workspace');
+            if (existingMember) {
+                return apiErrors.conflict('User is already a member of this workspace');
+            }
         }
 
-        const member = await db.workspaceMember.create({
-            data: {
-                workspaceId,
-                userId: userToInvite.id,
-                role: memberRole as WorkspaceMemberRole,
-            },
-            include: {
-                user: { select: { id: true, name: true, email: true, image: true } },
-            },
+        const invitation = await createOrRefreshInvitation({
+            email: normalizedEmail,
+            scope: 'WORKSPACE',
+            role: memberRole as InvitationRole,
+            invitedById: session.user.id,
+            workspaceId,
         });
 
-        const response = successResponse(member, 201);
+        const invitationUrl = buildInvitationUrl(invitation.token, normalizedEmail);
+        void sendInvitationEmail({
+            to: normalizedEmail,
+            inviterName: session.user.name || 'A team member',
+            role: invitation.role,
+            scope: invitation.scope,
+            targetName: workspace.name,
+            invitationUrl,
+        });
+
+        const response = successResponse({ message: 'Invitation email sent.' });
         return withCacheControl(response, 'private, no-store');
     } catch (error) {
         console.error('Error inviting workspace member:', error);

app/api/workspaces/[workspaceId]/route.ts

@@ -3,6 +3,7 @@ import { db } from '@/lib/db';
 import { auth } from '@/lib/auth';
 import { rateLimit } from '@/lib/rate-limit';
 import { cleanupWorkspaceMediaFiles } from '@/lib/r2-cleanup';
+import { cleanupBunnyStreamVideos } from '@/lib/bunny-stream-cleanup';
 import { apiErrors, successResponse, withCacheControl } from '@/lib/api-response';
 
 type RouteParams = { params: Promise<{ workspaceId: string }> };
@@ -164,6 +165,22 @@ export async function DELETE(request: NextRequest, { params }: RouteParams) {
             return apiErrors.forbidden('Only the workspace owner can delete it');
         }
 
+        // Delete Bunny provider videos first to avoid orphaned external assets.
+        const workspaceVersionRefs = await db.videoVersion.findMany({
+            where: {
+                video: {
+                    project: {
+                        workspaceId,
+                    },
+                },
+            },
+            select: {
+                providerId: true,
+                videoId: true,
+            },
+        });
+        await cleanupBunnyStreamVideos(workspaceVersionRefs);
+
         // Clean up voice files from R2 before cascade delete removes comment rows
         await cleanupWorkspaceMediaFiles(workspaceId);
 

app/invitations/accept/page.tsx

@@ -0,0 +1,47 @@
+import { redirect } from 'next/navigation';
+import { auth } from '@/lib/auth';
+import { acceptInvitationTokenForUser } from '@/lib/invitations';
+
+interface InvitationAcceptPageProps {
+  searchParams: Promise<{
+    token?: string;
+    email?: string;
+  }>;
+}
+
+export default async function InvitationAcceptPage({ searchParams }: InvitationAcceptPageProps) {
+  const resolvedSearchParams = await searchParams;
+  const token = resolvedSearchParams.token?.trim();
+
+  if (!token) {
+    redirect('/login?error=invalid_invitation');
+  }
+
+  const session = await auth();
+  if (!session?.user?.id) {
+    const callbackUrl = `/invitations/accept?token=${encodeURIComponent(token)}`;
+    redirect(`/login?callbackUrl=${encodeURIComponent(callbackUrl)}`);
+  }
+
+  const userEmail = session.user.email?.toLowerCase().trim();
+  if (!userEmail) {
+    redirect('/dashboard?invite=invalid_email');
+  }
+
+  const result = await acceptInvitationTokenForUser({
+    token,
+    userId: session.user.id,
+    email: userEmail,
+  });
+
+  if (result === 'accepted') {
+    redirect('/dashboard?invite=accepted');
+  }
+  if (result === 'expired') {
+    redirect('/dashboard?invite=expired');
+  }
+  if (result === 'forbidden') {
+    redirect('/dashboard?invite=wrong_account');
+  }
+  redirect('/dashboard?invite=not_found');
+}