How to Build Team workspace with V0

1// Paste this prompt into V0's AI chat:
2// Create a Supabase schema for a team workspace:
3// 1. organizations table: id (uuid PK), name (text), slug (text UNIQUE), logo_url (text), created_at (timestamptz)
4// 2. org_members table: org_id (uuid FK), user_id (uuid FK), role (text — 'owner', 'admin', 'member'), joined_at (timestamptz), PRIMARY KEY(org_id, user_id)
5// 3. channels table: id (uuid PK), org_id (uuid FK), name (text), description (text), is_private (boolean DEFAULT false), created_at (timestamptz)
6// 4. messages table: id (uuid PK), channel_id (uuid FK), author_id (uuid FK), content (text), edited_at (timestamptz nullable), created_at (timestamptz)
7// 5. pages table: id (uuid PK), org_id (uuid FK), title (text), content (text — Markdown), author_id (uuid FK), parent_page_id (uuid FK nullable for nesting), updated_at (timestamptz)
8// RLS: all tables scoped through org_members — users must be a member to access any org data.
9// Enable Realtime on messages table.
10// Seed a sample org with 3 channels and 5 pages.

1import { createClient } from '@/lib/supabase/server'
2import { ScrollArea } from '@/components/ui/scroll-area'
3import { Button } from '@/components/ui/button'
4import { Separator } from '@/components/ui/separator'
5import Link from 'next/link'
6import { notFound } from 'next/navigation'
7
8export default async function WorkspaceLayout({
9  children,
10  params,
11}: {
12  children: React.ReactNode
13  params: Promise<{ org: string }>
14}) {
15  const { org } = await params
16  const supabase = await createClient()
17
18  const { data: organization } = await supabase
19    .from('organizations')
20    .select('*')
21    .eq('slug', org)
22    .single()
23
24  if (!organization) notFound()
25
26  const { data: channels } = await supabase
27    .from('channels')
28    .select('id, name')
29    .eq('org_id', organization.id)
30    .order('name')
31
32  const { data: pages } = await supabase
33    .from('pages')
34    .select('id, title, parent_page_id')
35    .eq('org_id', organization.id)
36    .is('parent_page_id', null)
37
38  return (
39    <div className="flex h-screen">
40      <aside className="w-64 border-r bg-muted/30">
41        <div className="p-4">
42          <h2 className="font-bold text-lg">{organization.name}</h2>
43        </div>
44        <Separator />
45        <ScrollArea className="flex-1 p-2">
46          <p className="text-xs font-semibold text-muted-foreground px-2 mb-1">Channels</p>
47          {channels?.map((ch) => (
48            <Link key={ch.id} href={`/${org}/channels/${ch.id}`}>
49              <Button variant="ghost" size="sm" className="w-full justify-start">
50                # {ch.name}
51              </Button>
52            </Link>
53          ))}
54          <Separator className="my-2" />
55          <p className="text-xs font-semibold text-muted-foreground px-2 mb-1">Pages</p>
56          {pages?.map((page) => (
57            <Link key={page.id} href={`/${org}/pages/${page.id}`}>
58              <Button variant="ghost" size="sm" className="w-full justify-start">
59                {page.title}
60              </Button>
61            </Link>
62          ))}
63        </ScrollArea>
64      </aside>
65      <main className="flex-1 overflow-auto">{children}</main>
66    </div>
67  )
68}

1'use client'
2
3import { useEffect, useState } from 'react'
4import { createClient } from '@/lib/supabase/client'
5import { Card, CardContent } from '@/components/ui/card'
6import { Avatar, AvatarFallback } from '@/components/ui/avatar'
7import { Textarea } from '@/components/ui/textarea'
8import { Button } from '@/components/ui/button'
9import { sendMessage } from '@/app/actions/workspace'
10
11type Message = {
12  id: string
13  content: string
14  author_id: string
15  created_at: string
16}
17
18export function ChannelChat({ channelId, initialMessages }: {
19  channelId: string
20  initialMessages: Message[]
21}) {
22  const [messages, setMessages] = useState(initialMessages)
23  const supabase = createClient()
24
25  useEffect(() => {
26    const channel = supabase
27      .channel(`channel-${channelId}`)
28      .on('postgres_changes', {
29        event: 'INSERT',
30        schema: 'public',
31        table: 'messages',
32        filter: `channel_id=eq.${channelId}`,
33      }, (payload) => {
34        setMessages((prev) => [...prev, payload.new as Message])
35      })
36      .subscribe()
37    return () => { supabase.removeChannel(channel) }
38  }, [supabase, channelId])
39
40  return (
41    <div className="flex flex-col h-full">
42      <div className="flex-1 overflow-y-auto p-4 space-y-3">
43        {messages.map((msg) => (
44          <div key={msg.id} className="flex gap-3">
45            <Avatar className="w-8 h-8">
46              <AvatarFallback>U</AvatarFallback>
47            </Avatar>
48            <div>
49              <p className="text-sm">{msg.content}</p>
50              <p className="text-xs text-muted-foreground">
51                {new Date(msg.created_at).toLocaleTimeString()}
52              </p>
53            </div>
54          </div>
55        ))}
56      </div>
57      <form action={sendMessage} className="p-4 border-t flex gap-2">
58        <input type="hidden" name="channelId" value={channelId} />
59        <Textarea name="content" placeholder="Type a message..." rows={1} className="flex-1" />
60        <Button type="submit">Send</Button>
61      </form>
62    </div>
63  )
64}

1// Paste this prompt into V0's AI chat:
2// Build an organization settings page at app/[org]/settings/page.tsx with:
3// 1. Member management Table showing: Avatar, display name, email, role Select (owner/admin/member), joined date, Remove Button
4// 2. "Invite Member" Button that opens a Dialog:
5//    - Generate a unique invite link using crypto.randomUUID()
6//    - Input field showing the link with a Copy button
7//    - Optional: Input for email to send invite directly
8// 3. Server Actions for: change role, remove member, create invite, accept invite
9// 4. AlertDialog for confirming member removal
10// 5. Organization details section: Input for org name, org logo upload area
11// 6. Use Tabs for Members and Settings sections
12// RLS ensures only admin+ roles can modify members.

1// Paste this prompt into V0's AI chat:
2// Build a wiki page system for the team workspace:
3// 1. Page view at app/[org]/pages/[id]/page.tsx:
4//    - Server Component fetching the page from Supabase
5//    - Breadcrumb navigation showing the page hierarchy (root > parent > current)
6//    - Markdown content rendered in prose styling
7//    - Edit Button, New Child Page Button
8//    - Sidebar showing child pages as links
9// 2. Page editor at app/[org]/pages/[id]/edit/page.tsx:
10//    - Input for title
11//    - Textarea for Markdown content (full-width)
12//    - Select for parent page (to reorganize hierarchy)
13//    - Save Button calling a Server Action
14// 3. Server Actions for: create page, update page, delete page, move page (change parent)
15// Use Breadcrumb, Input, Textarea, Select, Button from shadcn/ui.