feat: add workspace management features including member invitations and role updates

- Implemented API endpoints for managing workspace members (GET, POST, PATCH, DELETE). - Added workspace creation and retrieval functionalities. - Enhanced project model to associate with workspaces. - Updated project member roles and access control logic. - Created sign-out page and updated authentication flow. - Modified header to include navigation to workspaces. - Updated Prisma schema to include workspace and member models. - Seed script updated to create demo workspaces and associated members.
2026-09-11 17:46:06 +00:00 · 2026-02-07 07:41:12 +03:00
parent d90ce4e1f6
commit 6e95f667e3
28 changed files with 2891 additions and 138 deletions
@@ -0,0 +1,331 @@
+'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;
+}
+
+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.members);
+      setOwner(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;
+      }
+
+      setSuccess(`Invited ${data.user.name || data.user.email} as ${inviteRole.toLowerCase()}`);
+      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 gap-3 items-end">
+            <div className="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-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}>
+              {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 items-center justify-between 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 items-center justify-between 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">
+                <Select
+                  value={member.role}
+                  onValueChange={(v) => handleRoleChange(member.id, v)}
+                >
+                  <SelectTrigger className="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>
+  );
+}
@@ -9,6 +9,8 @@ import {
  Globe,
  Lock,
  UserPlus,
+  Users,
+  Building2,
 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
@@ -61,6 +63,7 @@ export default async function ProjectPage({ params }: ProjectPageProps) {
  const project = await db.project.findUnique({
    where: { id: projectId },
    include: {
+      workspace: { select: { id: true, name: true } },
      owner: { select: { id: true, name: true } },
      members: {
        where: { userId: session?.user?.id || '' },
@@ -91,7 +94,29 @@ export default async function ProjectPage({ params }: ProjectPageProps) {
  const isMember = project.members.length > 0;
  const isPublicOrLink = project.visibility !== 'PRIVATE';

-  if (!isOwner && !isMember && !isPublicOrLink) {
+  // Check workspace membership
+  let isWorkspaceMember = false;
+  let workspaceRole: string | null = null;
+  if (session?.user?.id) {
+    const wsMember = await db.workspaceMember.findUnique({
+      where: {
+        workspaceId_userId: {
+          workspaceId: project.workspaceId,
+          userId: session.user.id,
+        },
+      },
+    });
+    const ws = await db.workspace.findUnique({
+      where: { id: project.workspaceId },
+      select: { ownerId: true },
+    });
+    if (ws?.ownerId === session.user.id || wsMember) {
+      isWorkspaceMember = true;
+      workspaceRole = ws?.ownerId === session.user.id ? 'OWNER' : wsMember?.role || null;
+    }
+  }
+
+  if (!isOwner && !isMember && !isPublicOrLink && !isWorkspaceMember) {
    redirect('/dashboard');
  }

@@ -109,7 +134,7 @@ export default async function ProjectPage({ params }: ProjectPageProps) {
    };
  });

-  const canEdit = isOwner || project.members[0]?.role === 'ADMIN' || project.members[0]?.role === 'EDITOR';
+  const canEdit = isOwner || project.members[0]?.role === 'ADMIN' || workspaceRole === 'OWNER' || workspaceRole === 'ADMIN';

  return (
    <div className="px-6 lg:px-8 py-8 w-full">
@@ -134,9 +159,19 @@ export default async function ProjectPage({ params }: ProjectPageProps) {
              {project.visibility.toLowerCase()}
            </Badge>
          </div>
-          {project.description && (
-            <p className="text-muted-foreground">{project.description}</p>
-          )}
+          <div className="flex items-center gap-2">
+            {project.workspace && (
+              <Link href={`/workspaces/${project.workspace.id}`}>
+                <Badge variant="secondary" className="flex items-center gap-1 hover:bg-accent transition-colors">
+                  <Building2 className="h-3 w-3" />
+                  {project.workspace.name}
+                </Badge>
+              </Link>
+            )}
+            {project.description && (
+              <span className="text-muted-foreground">{project.description}</span>
+            )}
+          </div>
        </div>

        <div className="flex items-center gap-2">
@@ -147,12 +182,20 @@ export default async function ProjectPage({ params }: ProjectPageProps) {
            </Link>
          </Button>
          {(isOwner || project.members[0]?.role === 'ADMIN') && (
-            <Button variant="outline" size="sm" asChild>
-              <Link href={`/projects/${projectId}/settings`}>
-                <Settings className="h-4 w-4 mr-2" />
-                Settings
-              </Link>
-            </Button>
+            <>
+              <Button variant="outline" size="sm" asChild>
+                <Link href={`/projects/${projectId}/members`}>
+                  <Users className="h-4 w-4 mr-2" />
+                  Members
+                </Link>
+              </Button>
+              <Button variant="outline" size="sm" asChild>
+                <Link href={`/projects/${projectId}/settings`}>
+                  <Settings className="h-4 w-4 mr-2" />
+                  Settings
+                </Link>
+              </Button>
+            </>
          )}
          {canEdit && (
            <Button size="sm" asChild>