Build your first workspace feature

-- Tutorial-only additive migration. Apply in a dedicated hosted test installation.
create table public.workspace_notes (
  id uuid primary key,
  org_id uuid not null references public.organizations(id) on delete cascade,
  created_by uuid references auth.users(id) on delete set null,
  body text not null check (char_length(btrim(body)) between 1 and 2000),
  created_at timestamptz not null default now()
);
create index workspace_notes_org_created_idx on public.workspace_notes(org_id, created_at desc, id);
alter table public.workspace_notes enable row level security;
revoke all on public.workspace_notes from public, anon, authenticated;
grant select on public.workspace_notes to authenticated;
grant insert(id, org_id, created_by, body) on public.workspace_notes to authenticated;
create policy notes_read on public.workspace_notes for select to authenticated
  using ((select private.is_org_member(org_id)));
create policy notes_create on public.workspace_notes for insert to authenticated
  with check ((select private.can_manage_org(org_id)) and created_by = (select auth.uid()));
-- No update/delete grants: this tutorial implements create/list only.

import { z } from 'zod';
export const noteInput = z.strictObject({
  request_id: z.uuid(),
  org_id: z.uuid(),
  body: z.string().trim().min(1).max(2000),
});
export type Note = { id: string; body: string; created_at: string };
export type NoteState = { error?: string; success?: string };

'use server';
import { revalidatePath } from 'next/cache';
import { getWorkspace, requireUser } from '@/lib/auth';
import { noteInput, type NoteState } from '@/lib/notes-schema';

export async function createNote(_previous: NoteState, form: FormData): Promise<NoteState> {
  const parsed = noteInput.safeParse({ request_id: form.get('request_id'), org_id: form.get('org_id'), body: form.get('body') });
  if (!parsed.success) return { error: 'Enter a note of 1–2,000 characters.' };
  const { user, supabase } = await requireUser();
  const { org_id, request_id, body } = parsed.data;
  try {
    const { role } = await getWorkspace(org_id);
    if (role === 'member') return { error: 'Only owners and admins can create notes.' };
  } catch { return { error: 'Workspace access is no longer available.' }; }
  const result = await supabase.from('workspace_notes').insert({ id: request_id, org_id, created_by: user.id, body });
  if (result.error?.code === '23505') {
    const existing = await supabase.from('workspace_notes').select('id,body,created_by').eq('org_id', org_id).eq('id', request_id).maybeSingle();
    if (existing.error || existing.data?.created_by !== user.id || existing.data?.body !== body) return { error: 'This request was already used. Start a new note.' };
  } else if (result.error) return { error: 'The note could not be saved. Retry with the same request.' };
  revalidatePath('/dashboard/notes');
  return { success: 'Note saved.' };
}

'use client';
import { useActionState } from 'react';
import { createNote } from '@/app/actions/notes';
import type { NoteState } from '@/lib/notes-schema';
export function NoteForm({ workspaceId, requestId }: { workspaceId: string; requestId: string }) {
  const [state, action, pending] = useActionState<NoteState, FormData>(createNote, {});
  return <form action={action} className="grid gap-3 max-w-xl">
    <input type="hidden" name="org_id" value={workspaceId} />
    <input type="hidden" name="request_id" value={requestId} />
    <label htmlFor="note-body">New workspace note</label>
    <textarea id="note-body" name="body" required minLength={1} maxLength={2000} className="rounded-md border p-3" />
    <button type="submit" disabled={pending} className="rounded-md border px-4 py-2">{pending ? 'Saving…' : 'Save note'}</button>
    <p role="status" aria-live="polite">{state.error || state.success}</p>
  </form>;
}

import { randomUUID } from 'node:crypto';
import { getWorkspace, requireUser } from '@/lib/auth';
import { NoteForm } from '@/components/notes/note-form';
import type { Note } from '@/lib/notes-schema';
export default async function NotesPage() {
  const { organization, role } = await getWorkspace();
  const { supabase } = await requireUser();
  const { data, error } = await supabase.from('workspace_notes').select('id,body,created_at').eq('org_id', organization.id).order('created_at', { ascending: false }).order('id').limit(50);
  if (error) throw new Error('Notes could not be loaded. Check the notes migration and retry.');
  const notes = (data ?? []) as Note[];
  return <section className="grid gap-6 p-6">
    <header><h1 className="text-2xl font-semibold">Workspace notes</h1><p>Latest 50 notes for {organization.name}.</p></header>
    {role !== 'member' && <NoteForm key={organization.id} workspaceId={organization.id} requestId={randomUUID()} />}
    {notes.length ? <ul className="grid gap-3">{notes.map(note => <li key={note.id} className="rounded-md border p-4"><p className="whitespace-pre-wrap break-words">{note.body}</p><time className="text-xs text-muted-foreground" dateTime={note.created_at}>{note.created_at.slice(0, 10)}</time></li>)}</ul> : <p>No notes yet. An owner or admin can add the first one.</p>}
  </section>;
}