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

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>