Add membership page

apps/api/src/controllers/Projects.ts

@@ -1,5 +1,6 @@
-import {Controller, Get, Middleware} from '@overnightjs/core';
+import {Controller, Delete, Get, Middleware, Patch, Post} from '@overnightjs/core';
 import type {NextFunction, Request, Response} from 'express';
+import {MembershipSchemas} from '@plunk/shared';
 
 import {prisma} from '../database/prisma.js';
 import {HttpException} from '../exceptions/index.js';
@@ -129,4 +130,254 @@ export class Projects {
       })),
     });
   }
+
+  /**
+   * Add a member to a project by email
+   * POST /projects/:id/members
+   * Body: { email: string, role?: 'ADMIN' | 'MEMBER' }
+   */
+  @Post(':id/members')
+  @Middleware([requireAuth])
+  @CatchAsync
+  private async addMember(req: Request, res: Response, _next: NextFunction) {
+    const auth = res.locals.auth as AuthResponse;
+    const {id} = req.params;
+
+    // Validate params
+    if (!id) {
+      throw new HttpException(400, 'Project ID is required');
+    }
+
+    // Validate and parse request body
+    const parseResult = MembershipSchemas.addMember.safeParse(req.body);
+    if (!parseResult.success) {
+      throw new HttpException(400, parseResult.error.errors[0]?.message || 'Invalid request body');
+    }
+
+    const {email, role} = parseResult.data;
+
+    // Verify current user is ADMIN or OWNER
+    const currentMembership = await prisma.membership.findFirst({
+      where: {
+        userId: auth.userId,
+        projectId: id,
+        role: {
+          in: ['ADMIN', 'OWNER'],
+        },
+      },
+    });
+
+    if (!currentMembership) {
+      throw new HttpException(403, 'Only project admins and owners can add members');
+    }
+
+    // Find user by email
+    const userToAdd = await prisma.user.findUnique({
+      where: {email: email.toLowerCase()},
+      select: {id: true, email: true},
+    });
+
+    if (!userToAdd) {
+      throw new HttpException(404, 'User with this email does not have an account');
+    }
+
+    // Check if user is already a member
+    const existingMembership = await prisma.membership.findUnique({
+      where: {
+        userId_projectId: {
+          userId: userToAdd.id,
+          projectId: id,
+        },
+      },
+    });
+
+    if (existingMembership) {
+      throw new HttpException(409, 'User is already a member of this project');
+    }
+
+    // Create membership
+    const newMembership = await prisma.membership.create({
+      data: {
+        userId: userToAdd.id,
+        projectId: id,
+        role,
+      },
+    });
+
+    return res.json({
+      success: true,
+      data: {
+        userId: userToAdd.id,
+        email: userToAdd.email,
+        role: newMembership.role,
+      },
+    });
+  }
+
+  /**
+   * Update a member's role
+   * PATCH /projects/:id/members/:userId
+   * Body: { role: 'ADMIN' | 'MEMBER' }
+   */
+  @Patch(':id/members/:userId')
+  @Middleware([requireAuth])
+  @CatchAsync
+  private async updateMemberRole(req: Request, res: Response, _next: NextFunction) {
+    const auth = res.locals.auth as AuthResponse;
+    const {id, userId} = req.params;
+
+    // Validate params
+    if (!id) {
+      throw new HttpException(400, 'Project ID is required');
+    }
+    if (!userId) {
+      throw new HttpException(400, 'User ID is required');
+    }
+
+    // Validate and parse request body
+    const parseResult = MembershipSchemas.updateRole.safeParse(req.body);
+    if (!parseResult.success) {
+      throw new HttpException(400, parseResult.error.errors[0]?.message || 'Invalid request body');
+    }
+
+    const {role} = parseResult.data;
+
+    // Verify current user is ADMIN or OWNER
+    const currentMembership = await prisma.membership.findFirst({
+      where: {
+        userId: auth.userId,
+        projectId: id,
+        role: {
+          in: ['ADMIN', 'OWNER'],
+        },
+      },
+    });
+
+    if (!currentMembership) {
+      throw new HttpException(403, 'Only project admins and owners can update member roles');
+    }
+
+    // Get target membership
+    const targetMembership = await prisma.membership.findUnique({
+      where: {
+        userId_projectId: {
+          userId,
+          projectId: id,
+        },
+      },
+    });
+
+    if (!targetMembership) {
+      throw new HttpException(404, 'Member not found');
+    }
+
+    // Cannot change OWNER role
+    if (targetMembership.role === 'OWNER') {
+      throw new HttpException(403, 'Cannot change the role of the project owner');
+    }
+
+    // Get user info
+    const user = await prisma.user.findUnique({
+      where: {id: userId},
+      select: {id: true, email: true},
+    });
+
+    if (!user) {
+      throw new HttpException(404, 'User not found');
+    }
+
+    // Update role
+    await prisma.membership.update({
+      where: {
+        userId_projectId: {
+          userId,
+          projectId: id,
+        },
+      },
+      data: {role},
+    });
+
+    return res.json({
+      success: true,
+      data: {
+        userId: user.id,
+        email: user.email,
+        role,
+      },
+    });
+  }
+
+  /**
+   * Remove a member from a project
+   * DELETE /projects/:id/members/:userId
+   */
+  @Delete(':id/members/:userId')
+  @Middleware([requireAuth])
+  @CatchAsync
+  private async removeMember(req: Request, res: Response, _next: NextFunction) {
+    const auth = res.locals.auth as AuthResponse;
+    const {id, userId} = req.params;
+
+    // Validate params
+    if (!id) {
+      throw new HttpException(400, 'Project ID is required');
+    }
+    if (!userId) {
+      throw new HttpException(400, 'User ID is required');
+    }
+
+    // Verify current user is ADMIN or OWNER
+    const currentMembership = await prisma.membership.findFirst({
+      where: {
+        userId: auth.userId,
+        projectId: id,
+        role: {
+          in: ['ADMIN', 'OWNER'],
+        },
+      },
+    });
+
+    if (!currentMembership) {
+      throw new HttpException(403, 'Only project admins and owners can remove members');
+    }
+
+    // Get target membership
+    const targetMembership = await prisma.membership.findUnique({
+      where: {
+        userId_projectId: {
+          userId,
+          projectId: id,
+        },
+      },
+    });
+
+    if (!targetMembership) {
+      throw new HttpException(404, 'Member not found');
+    }
+
+    // Cannot remove OWNER
+    if (targetMembership.role === 'OWNER') {
+      throw new HttpException(403, 'Cannot remove the project owner');
+    }
+
+    // Cannot remove yourself
+    if (userId === auth.userId) {
+      throw new HttpException(403, 'You cannot remove yourself from the project');
+    }
+
+    // Delete membership
+    await prisma.membership.delete({
+      where: {
+        userId_projectId: {
+          userId,
+          projectId: id,
+        },
+      },
+    });
+
+    return res.json({
+      success: true,
+      data: {message: 'Member removed successfully'},
+    });
+  }
 }

apps/landing/next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/types/routes.d.ts";
+import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.

apps/web/next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/types/routes.d.ts";
+import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.

apps/web/src/components/BillingInvoices.tsx

@@ -88,20 +88,20 @@ export function BillingInvoices({projectId, hasSubscription, onManageBilling}: B
   const getStatusBadge = (status: string, paid: boolean) => {
     // Stripe invoices have status 'paid' when paid, or paid boolean is true
     if (paid || status === 'paid') {
-      return <Badge className="bg-green-100 text-green-800 hover:bg-green-100">Paid</Badge>;
+      return <Badge variant="green">Paid</Badge>;
     }
 
     switch (status) {
       case 'open':
-        return <Badge className="bg-orange-100 text-orange-800 hover:bg-orange-100">Unpaid</Badge>;
+        return <Badge variant="orange">Unpaid</Badge>;
       case 'draft':
-        return <Badge className="bg-neutral-100 text-neutral-800 hover:bg-neutral-100">Draft</Badge>;
+        return <Badge variant="neutral">Draft</Badge>;
       case 'uncollectible':
-        return <Badge className="bg-red-100 text-red-800 hover:bg-red-100">Uncollectible</Badge>;
+        return <Badge variant="red">Uncollectible</Badge>;
       case 'void':
-        return <Badge className="bg-neutral-100 text-neutral-800 hover:bg-neutral-100">Void</Badge>;
+        return <Badge variant="neutral">Void</Badge>;
       default:
-        return <Badge className="bg-neutral-100 text-neutral-800 hover:bg-neutral-100">{status}</Badge>;
+        return <Badge variant="neutral">{status}</Badge>;
     }
   };
 

apps/web/src/components/TeamSettings.tsx

@@ -0,0 +1,399 @@
+import {useState} from 'react';
+import useSWR from 'swr';
+import {
+  Alert,
+  Badge,
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  Input,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@plunk/ui';
+import {MembershipSchemas} from '@plunk/shared';
+import {AlertTriangle, Mail, MoreVertical, Trash2, UserPlus} from 'lucide-react';
+import {useForm} from 'react-hook-form';
+import {zodResolver} from '@hookform/resolvers/zod';
+import type {z} from 'zod';
+import {network} from '../lib/network';
+
+interface Member {
+  userId: string;
+  email: string;
+  role: 'OWNER' | 'ADMIN' | 'MEMBER';
+}
+
+interface TeamSettingsProps {
+  projectId: string;
+  currentUserRole: 'OWNER' | 'ADMIN' | 'MEMBER';
+  currentUserId: string;
+}
+
+type AddMemberForm = z.infer<typeof MembershipSchemas.addMember>;
+
+export function TeamSettings({projectId, currentUserRole, currentUserId}: TeamSettingsProps) {
+  const [showAddDialog, setShowAddDialog] = useState(false);
+  const [memberToRemove, setMemberToRemove] = useState<Member | null>(null);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState<string | null>(null);
+
+  const {data, mutate, isLoading} = useSWR<{success: boolean; data: Member[]}>(
+    projectId ? `/projects/${projectId}/members` : null,
+    {revalidateOnFocus: false},
+  );
+
+  const members = data?.data || [];
+  const canManageMembers = currentUserRole === 'OWNER' || currentUserRole === 'ADMIN';
+
+  const form = useForm<AddMemberForm>({
+    resolver: zodResolver(MembershipSchemas.addMember),
+    defaultValues: {
+      email: '',
+      role: 'MEMBER',
+    },
+  });
+
+  const handleAddMember = async (values: AddMemberForm) => {
+    setIsSubmitting(true);
+    setError(null);
+    setSuccess(null);
+
+    try {
+      await network.fetch<void, typeof MembershipSchemas.addMember>('POST', `/projects/${projectId}/members`, values);
+      setSuccess('Member added successfully');
+      await mutate();
+      form.reset();
+      setShowAddDialog(false);
+
+      // Clear success message after 3 seconds
+      setTimeout(() => setSuccess(null), 3000);
+    } catch (err: unknown) {
+      if (err instanceof Error) {
+        setError(err.message);
+      } else {
+        setError('Failed to add member');
+      }
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleRemoveMember = async () => {
+    if (!memberToRemove) return;
+
+    setIsSubmitting(true);
+    setError(null);
+    setSuccess(null);
+
+    try {
+      await network.fetch('DELETE', `/projects/${projectId}/members/${memberToRemove.userId}`);
+      setSuccess('Member removed successfully');
+      await mutate();
+      setMemberToRemove(null);
+
+      // Clear success message after 3 seconds
+      setTimeout(() => setSuccess(null), 3000);
+    } catch (err: unknown) {
+      if (err instanceof Error) {
+        setError(err.message);
+      } else {
+        setError('Failed to remove member');
+      }
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleUpdateRole = async (userId: string, newRole: 'ADMIN' | 'MEMBER') => {
+    setError(null);
+    setSuccess(null);
+
+    try {
+      await network.fetch<void, typeof MembershipSchemas.updateRole>(
+        'PATCH',
+        `/projects/${projectId}/members/${userId}`,
+        {role: newRole},
+      );
+      setSuccess('Member role updated successfully');
+      await mutate();
+
+      // Clear success message after 3 seconds
+      setTimeout(() => setSuccess(null), 3000);
+    } catch (err: unknown) {
+      if (err instanceof Error) {
+        setError(err.message);
+      } else {
+        setError('Failed to update member role');
+      }
+    }
+  };
+
+  const getRoleBadgeVariant = (role: Member['role']) => {
+    switch (role) {
+      case 'OWNER':
+        return 'default';
+      case 'ADMIN':
+        return 'secondary';
+      case 'MEMBER':
+        return 'outline';
+      default:
+        return 'outline';
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      {success && (
+        <Alert>
+          <Mail className="h-4 w-4" />
+          <div className="ml-2">
+            <p className="text-sm font-medium">{success}</p>
+          </div>
+        </Alert>
+      )}
+
+      {error && (
+        <Alert variant="destructive">
+          <AlertTriangle className="h-4 w-4" />
+          <div className="ml-2">
+            <p className="text-sm font-medium">{error}</p>
+          </div>
+        </Alert>
+      )}
+
+      <Card>
+        <CardHeader>
+          <div className="flex items-center justify-between">
+            <div>
+              <CardTitle>Team Members</CardTitle>
+              <CardDescription>Manage who has access to this project</CardDescription>
+            </div>
+            {canManageMembers && (
+              <Button
+                onClick={() => {
+                  setError(null);
+                  setShowAddDialog(true);
+                }}
+              >
+                <UserPlus className="mr-2 h-4 w-4" />
+                Add Member
+              </Button>
+            )}
+          </div>
+        </CardHeader>
+        <CardContent>
+          {isLoading ? (
+            <div className="flex justify-center py-8">
+              <div className="h-8 w-8 animate-spin rounded-full border-4 border-gray-300 border-t-blue-600" />
+            </div>
+          ) : members.length === 0 ? (
+            <div className="py-8 text-center text-sm text-gray-500">No members found</div>
+          ) : (
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Email</TableHead>
+                  <TableHead>Role</TableHead>
+                  <TableHead className="w-[50px]" />
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {members.map(member => {
+                  const isCurrentUser = member.userId === currentUserId;
+                  const isOwner = member.role === 'OWNER';
+                  const canModify = canManageMembers && !isOwner && !isCurrentUser;
+
+                  return (
+                    <TableRow key={member.userId}>
+                      <TableCell>
+                        <div className="flex items-center gap-2">
+                          {member.email}
+                          {isCurrentUser && (
+                            <Badge variant="outline" className="text-xs">
+                              You
+                            </Badge>
+                          )}
+                        </div>
+                      </TableCell>
+                      <TableCell>
+                        {canModify ? (
+                          <Select
+                            value={member.role}
+                            onValueChange={value => handleUpdateRole(member.userId, value as 'ADMIN' | 'MEMBER')}
+                          >
+                            <SelectTrigger className="w-[120px]">
+                              <SelectValue />
+                            </SelectTrigger>
+                            <SelectContent>
+                              <SelectItem value="ADMIN">Admin</SelectItem>
+                              <SelectItem value="MEMBER">Member</SelectItem>
+                            </SelectContent>
+                          </Select>
+                        ) : (
+                          <Badge className={'capitalize'} variant={getRoleBadgeVariant(member.role)}>
+                            {member.role.toLowerCase()}
+                          </Badge>
+                        )}
+                      </TableCell>
+                      <TableCell>
+                        {canModify && (
+                          <DropdownMenu>
+                            <DropdownMenuTrigger asChild>
+                              <Button variant="ghost" size="sm">
+                                <MoreVertical className="h-4 w-4" />
+                              </Button>
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent align="end">
+                              <DropdownMenuItem
+                                className="text-red-600 focus:text-red-600"
+                                onClick={() => setMemberToRemove(member)}
+                              >
+                                <Trash2 className="mr-2 h-4 w-4" />
+                                Remove
+                              </DropdownMenuItem>
+                            </DropdownMenuContent>
+                          </DropdownMenu>
+                        )}
+                      </TableCell>
+                    </TableRow>
+                  );
+                })}
+              </TableBody>
+            </Table>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Add Member Dialog */}
+      <Dialog
+        open={showAddDialog}
+        onOpenChange={open => {
+          if (!open) {
+            setError(null);
+          }
+          setShowAddDialog(open);
+        }}
+      >
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Add Team Member</DialogTitle>
+            <DialogDescription>
+              Add a user to this project by their email address. They must have an existing account.
+            </DialogDescription>
+          </DialogHeader>
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(handleAddMember)} className="space-y-4">
+              {error && (
+                <Alert variant="destructive">
+                  <AlertTriangle className="h-4 w-4" />
+                  <div className="ml-2">
+                    <p className="text-sm font-medium">{error}</p>
+                  </div>
+                </Alert>
+              )}
+              <FormField
+                control={form.control}
+                name="email"
+                render={({field}) => (
+                  <FormItem>
+                    <FormLabel>Email Address</FormLabel>
+                    <FormControl>
+                      <Input type="email" placeholder="[email protected]" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="role"
+                render={({field}) => (
+                  <FormItem>
+                    <FormLabel>Role</FormLabel>
+                    <Select onValueChange={field.onChange} defaultValue={field.value}>
+                      <FormControl>
+                        <SelectTrigger>
+                          <SelectValue />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        <SelectItem value="MEMBER">Member - Can view and use the project</SelectItem>
+                        <SelectItem value="ADMIN">Admin - Can manage settings and members</SelectItem>
+                      </SelectContent>
+                    </Select>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <DialogFooter>
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={() => {
+                    setError(null);
+                    setShowAddDialog(false);
+                  }}
+                >
+                  Cancel
+                </Button>
+                <Button type="submit" disabled={isSubmitting}>
+                  {isSubmitting ? 'Adding...' : 'Add Member'}
+                </Button>
+              </DialogFooter>
+            </form>
+          </Form>
+        </DialogContent>
+      </Dialog>
+
+      {/* Remove Member Dialog */}
+      <Dialog open={!!memberToRemove} onOpenChange={() => setMemberToRemove(null)}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Remove Team Member</DialogTitle>
+            <DialogDescription>
+              Are you sure you want to remove <strong>{memberToRemove?.email}</strong> from this project? They will
+              immediately lose access.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setMemberToRemove(null)}>
+              Cancel
+            </Button>
+            <Button variant="destructive" onClick={handleRemoveMember} disabled={isSubmitting}>
+              {isSubmitting ? 'Removing...' : 'Remove Member'}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}

apps/web/src/pages/settings/index.tsx

@@ -32,7 +32,7 @@ import {
 } from '@plunk/ui';
 import {AnimatePresence, motion} from 'framer-motion';
 import {NextSeo} from 'next-seo';
-import {AlertTriangle, CreditCard, Database, Globe, Mail, Settings as SettingsIcon} from 'lucide-react';
+import {AlertTriangle, CreditCard, Database, Globe, Mail, Settings as SettingsIcon, Users} from 'lucide-react';
 import type {z} from 'zod';
 import {useRouter} from 'next/router';
 import {DashboardLayout} from '../../components/DashboardLayout';
@@ -44,12 +44,15 @@ import {UnpaidInvoiceBanner} from '../../components/UnpaidInvoiceBanner';
 import {ApiKeyDisplay} from '../../components/ApiKeyDisplay';
 import {SmtpSettings} from '../../components/SmtpSettings';
 import {DataManagementSettings} from '../../components/DataManagementSettings';
+import {TeamSettings} from '../../components/TeamSettings';
 import {useActiveProject} from '../../lib/contexts/ActiveProjectProvider';
 import {network} from '../../lib/network';
 import {useProjects} from '../../lib/hooks/useProject';
 import {useConfig} from '../../lib/hooks/useConfig';
+import {useUser} from '../../lib/hooks/useUser';
+import useSWR from 'swr';
 
-type TabId = 'general' | 'billing' | 'domains' | 'smtp' | 'data';
+type TabId = 'general' | 'billing' | 'domains' | 'smtp' | 'data' | 'team';
 
 interface Tab {
   id: TabId;
@@ -62,6 +65,7 @@ const buildTabs = (options: {billingEnabled: boolean; smtpEnabled: boolean}): Ta
   const {billingEnabled, smtpEnabled} = options;
   const allTabs: Tab[] = [
     {id: 'general', label: 'General', icon: SettingsIcon},
+    {id: 'team', label: 'Team', icon: Users},
     {id: 'billing', label: 'Billing', icon: CreditCard, condition: billingEnabled},
     {id: 'domains', label: 'Domains', icon: Globe},
     {id: 'smtp', label: 'SMTP', icon: Mail, condition: smtpEnabled},
@@ -75,6 +79,7 @@ export default function Settings() {
   const {activeProject, setActiveProject} = useActiveProject();
   const {mutate: projectsMutate} = useProjects();
   const {data: config} = useConfig();
+  const {data: user} = useUser();
   const [successMessage, setSuccessMessage] = useState<string | null>(null);
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
   const [showRegenerateDialog, setShowRegenerateDialog] = useState(false);
@@ -84,6 +89,15 @@ export default function Settings() {
   const [resetConfirmText, setResetConfirmText] = useState('');
   const [isLoadingBilling, setIsLoadingBilling] = useState(false);
 
+  // Fetch current user's membership for the active project
+  const {data: membershipData} = useSWR<{
+    success: boolean;
+    data: Array<{userId: string; email: string; role: 'OWNER' | 'ADMIN' | 'MEMBER'}>;
+  }>(activeProject?.id ? `/projects/${activeProject.id}/members` : null, {revalidateOnFocus: false});
+
+  const currentUserMembership = membershipData?.data.find(m => m.userId === user?.id);
+  const currentUserRole = currentUserMembership?.role || 'MEMBER';
+
   const billingEnabled = config?.features.billing.enabled ?? false;
   const smtpEnabled = config?.features.smtp.enabled ?? false;
   const trackingToggleEnabled = config?.features.email.trackingToggleEnabled ?? false;
@@ -639,6 +653,11 @@ export default function Settings() {
               </div>
             </TabsContent>
 
+            {/* Team Tab */}
+            <TabsContent value="team">
+              <TeamSettings projectId={activeProject.id} currentUserRole={currentUserRole} currentUserId={user?.id || ''} />
+            </TabsContent>
+
             {/* Domains Tab */}
             <TabsContent value="domains">
               <DomainsSettings projectId={activeProject.id} />

apps/web/src/pages/templates/index.tsx

@@ -1,4 +1,14 @@
-import {Button, Card, CardContent, CardDescription, CardHeader, CardTitle, ConfirmDialog, Input} from '@plunk/ui';
+import {
+  Badge,
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  ConfirmDialog,
+  Input,
+} from '@plunk/ui';
 import type {Template} from '@plunk/db';
 import {DashboardLayout} from '../../components/DashboardLayout';
 import {network} from '../../lib/network';
@@ -208,15 +218,12 @@ export default function TemplatesPage() {
                         <div className="flex-1">
                           <div className="flex items-center gap-3">
                             <CardTitle>{template.name}</CardTitle>
-                          <span
+                            <Badge
-                            className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
+                              className={'capitalize'}
-                              template.type === 'MARKETING'
+                              variant={template.type === 'MARKETING' ? 'info' : 'success'}
-                                ? 'bg-blue-100 text-blue-800'
-                                : 'bg-purple-100 text-purple-800'
-                            }`}
                             >
-                            {template.type}
+                              {template.type.toLowerCase()}
-                          </span>
+                            </Badge>
                           </div>
                           {template.description && (
                             <CardDescription className="mt-2">{template.description}</CardDescription>

apps/web/src/pages/workflows/index.tsx

@@ -1,4 +1,5 @@
 import {
+  Badge,
   Button,
   Card,
   CardContent,
@@ -188,11 +189,7 @@ export default function WorkflowsPage() {
                         <div className="flex-1">
                           <div className="flex items-center gap-3">
                             <CardTitle>{workflow.name}</CardTitle>
-                          <span
+                            <Badge variant={workflow.enabled ? 'green' : 'neutral'}>
-                            className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
-                              workflow.enabled ? 'bg-green-100 text-green-800' : 'bg-neutral-100 text-neutral-800'
-                            }`}
-                          >
                               {workflow.enabled ? (
                                 <>
                                   <Power className="h-3 w-3 mr-1" />
@@ -204,13 +201,12 @@ export default function WorkflowsPage() {
                                   Disabled
                                 </>
                               )}
-                          </span>
+                            </Badge>
+
                             {workflow.triggerConfig &&
                               typeof workflow.triggerConfig === 'object' &&
                               'eventName' in workflow.triggerConfig && (
-                              <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
+                                <Badge variant={'info'}>{String(workflow.triggerConfig.eventName)}</Badge>
-                                {String(workflow.triggerConfig.eventName)}
-                              </span>
                               )}
                           </div>
                           {workflow.description && (
@@ -440,7 +436,13 @@ function CreateWorkflowDialog({open, onOpenChange, onSuccess}: CreateWorkflowDia
           </div>
 
           <DialogFooter className="flex-col sm:flex-row gap-2">
-            <Button type="button" variant="outline" onClick={() => onOpenChange(false)} disabled={isSubmitting} className="w-full sm:w-auto">
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => onOpenChange(false)}
+              disabled={isSubmitting}
+              className="w-full sm:w-auto"
+            >
               Cancel
             </Button>
             <Button type="submit" disabled={isSubmitting} className="w-full sm:w-auto">

apps/wiki/next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/types/routes.d.ts";
+import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

packages/shared/src/schemas/index.ts

@@ -394,3 +394,13 @@ export const BillingLimitSchemas = {
     transactional: z.coerce.number().int().positive().nullable(),
   }),
 } as const;
+
+export const MembershipSchemas = {
+  addMember: z.object({
+    email,
+    role: z.enum(['ADMIN', 'MEMBER']).default('MEMBER'),
+  }),
+  updateRole: z.object({
+    role: z.enum(['ADMIN', 'MEMBER']),
+  }),
+} as const;

packages/ui/src/components/atoms/Badge.tsx

@@ -8,12 +8,18 @@ const badgeVariants = cva(
   {
     variants: {
       variant: {
-        default: 'border-transparent bg-neutral-900 text-neutral-50',
+        default: 'border-transparent bg-neutral-100 text-neutral-900',
         secondary: 'border-transparent bg-neutral-100 text-neutral-900',
         destructive: 'border-transparent bg-red-100 text-red-900',
         outline: 'text-neutral-950',
         success: 'border-transparent bg-green-100 text-green-900',
         warning: 'border-transparent bg-yellow-100 text-yellow-900',
+        // Additional semantic variants for common use cases
+        info: 'border-transparent bg-blue-100 text-blue-900',
+        orange: 'border-transparent bg-orange-100 text-orange-800',
+        green: 'border-transparent bg-green-100 text-green-800',
+        red: 'border-transparent bg-red-100 text-red-800',
+        neutral: 'border-transparent bg-neutral-50 text-neutral-600',
       },
     },
     defaultVariants: {