feat: forum, polymorphic comments, custom tiers, multi-invite, secrets encryption
Big feature batch driven by the super-audit findings and the user's follow-up requests. Schema migration 021 (folded into schema.sql Section 13): - forum_threads + polymorphic comments table keyed on (entity_type, entity_id). Entity types: forum_thread, proposal, incident, policy. Trigger maintains forum_threads.comment_count and last_comment_at. - space_tiers per-space with monthly_price_cents, billing_cadence, is_system, sort_order. Trigger seeds plus/basic/associate on every space INSERT and backfills existing spaces. space_members.tier_id FK added and backfilled from the legacy enum value. - space_role_labels (rename/recolor built-in roles per space). space_custom_roles + space_member_custom_roles for non-privileged extra labels. RLS gates by admin/board. - space_invites: multi-code invites with expires_at, max_uses, uses_count, is_enabled. Legacy spaces.invite_code backfilled as a permanent enabled invite. - secrets.encrypted_value bytea + encryption_version. Secrets RLS tightened. New comms_channels INSERT policy: any member can create; default channels are protected from deletion. - knowledge_base.render_markdown boolean (default true). Secrets encryption-at-rest: - AES-256-GCM in lib/secrets/crypto.ts. Master key from SECRETS_ENCRYPTION_KEY env (64 hex chars). - New revealSecret(id) server action: only path to plaintext, writes secret.revealed to activity_log. - /ops/page.tsx no longer selects value or encrypted_value on the list endpoint - the original screenshot bug where ciphertext was already in the page bundle before "Reveal" is fixed. UI: - /forum index, /forum/new, /forum/[id]. Pin/lock/delete actions for admin/board. - CommentThread component embedded on /proposals/[id], /incidents/[id], /policies/[slug]. Markdown rendering via react-markdown + remark-gfm. - /comms sidebar: inline "+ New channel" form. - /ops KB: row click opens markdown-rendering viewer modal. - /settings: new Tiers tab and Invites tab. Inline price edit and archive/delete on tiers; copy/enable/disable/delete on invites. - AtlasLogo replaces the terminal icon on the landing nav and footer. public/logo.svg wired as the favicon in app/layout.tsx metadata. - Sidebar has a Forum nav link. Server actions added: - lib/actions/forum.ts, comms.ts, tiers.ts, roles.ts, invites.ts. - lib/actions/secrets.ts rewritten with updateSecret + revealSecret. Auth flow: - joinSpace honors codes from space_invites first (enabled, expiry, use cap), falls back to legacy spaces.invite_code, increments uses_count on success. Env: - SECRETS_ENCRYPTION_KEY documented in .env.example and set on the Droplet's /opt/hackerspace-ops/.env.production. README: live site link added (https://hackerspace.sh). 266/266 unit tests pass. Production build clean. Migration 021 will be applied on the next deploy via /opt/hackerspace-ops/deploy.sh's idempotent migration runner.
This commit is contained in:
Moheeb Zara
@@ -1,8 +1,11 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useEffect, useRef } from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import { toast } from 'sonner'
|
||||
import { createClient } from '@/lib/supabase/client'
|
||||
import { Hash, Users2, Send, ChevronLeft } from 'lucide-react'
|
||||
import { Hash, Users2, Send, ChevronLeft, Plus } from 'lucide-react'
|
||||
import { createChannel } from '@/lib/actions'
|
||||
import type { Tables } from '@/types/database'
|
||||
|
||||
type Channel = Tables<'comms_channels'>
|
||||
@@ -15,9 +18,33 @@ interface Props {
|
||||
}
|
||||
|
||||
export default function CommsClient({ member, space, channels }: Props) {
|
||||
const router = useRouter()
|
||||
const [selectedChannel, setSelectedChannel] = useState<Channel | null>(channels[0] || null)
|
||||
const [messages, setMessages] = useState<Message[]>([])
|
||||
const [newMessage, setNewMessage] = useState('')
|
||||
const [showNewChannel, setShowNewChannel] = useState(false)
|
||||
const [newChannelName, setNewChannelName] = useState('')
|
||||
const [newChannelDescription, setNewChannelDescription] = useState('')
|
||||
const [newChannelType, setNewChannelType] = useState<'general' | 'area' | 'project'>('general')
|
||||
const [creatingChannel, setCreatingChannel] = useState(false)
|
||||
|
||||
async function handleCreateChannel(e: React.FormEvent) {
|
||||
e.preventDefault()
|
||||
if (!newChannelName.trim()) return
|
||||
setCreatingChannel(true)
|
||||
const result = await createChannel({
|
||||
name: newChannelName.trim().toLowerCase(),
|
||||
description: newChannelDescription.trim() || undefined,
|
||||
channel_type: newChannelType,
|
||||
})
|
||||
setCreatingChannel(false)
|
||||
if ('error' in result && result.error) { toast.error(result.error); return }
|
||||
toast.success('Channel created')
|
||||
setNewChannelName('')
|
||||
setNewChannelDescription('')
|
||||
setShowNewChannel(false)
|
||||
router.refresh()
|
||||
}
|
||||
const [sending, setSending] = useState(false)
|
||||
const [showChannelList, setShowChannelList] = useState(true)
|
||||
const messagesEndRef = useRef<HTMLDivElement>(null)
|
||||
@@ -238,6 +265,65 @@ export default function CommsClient({ member, space, channels }: Props) {
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* New channel inline form */}
|
||||
<div className="mt-4 border-t border-border pt-3">
|
||||
{!showNewChannel ? (
|
||||
<button
|
||||
onClick={() => setShowNewChannel(true)}
|
||||
className="w-full flex items-center gap-1.5 px-2 py-1.5 rounded text-sm font-sans text-muted-foreground hover:bg-muted hover:text-foreground transition"
|
||||
>
|
||||
<Plus className="w-3.5 h-3.5" />
|
||||
New channel
|
||||
</button>
|
||||
) : (
|
||||
<form onSubmit={handleCreateChannel} className="space-y-2 px-2">
|
||||
<input
|
||||
type="text"
|
||||
value={newChannelName}
|
||||
onChange={e => setNewChannelName(e.target.value.toLowerCase().replace(/[^a-z0-9-]/g, '-'))}
|
||||
placeholder="channel-name"
|
||||
autoFocus
|
||||
maxLength={50}
|
||||
required
|
||||
className="w-full bg-background border border-border text-foreground font-mono text-xs rounded px-2 py-1.5 focus:outline-none focus:border-primary"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
value={newChannelDescription}
|
||||
onChange={e => setNewChannelDescription(e.target.value)}
|
||||
placeholder="Optional description"
|
||||
maxLength={500}
|
||||
className="w-full bg-background border border-border text-foreground font-sans text-xs rounded px-2 py-1.5 focus:outline-none focus:border-primary"
|
||||
/>
|
||||
<select
|
||||
value={newChannelType}
|
||||
onChange={e => setNewChannelType(e.target.value as 'general' | 'area' | 'project')}
|
||||
className="w-full bg-background border border-border text-foreground font-mono text-xs rounded px-2 py-1.5 focus:outline-none focus:border-primary"
|
||||
>
|
||||
<option value="general">General</option>
|
||||
<option value="area">Area</option>
|
||||
<option value="project">Project</option>
|
||||
</select>
|
||||
<div className="flex gap-1.5">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={creatingChannel || !newChannelName.trim()}
|
||||
className="flex-1 bg-primary text-white text-xs font-sans px-2 py-1.5 rounded hover:bg-primary/90 transition disabled:opacity-50"
|
||||
>
|
||||
{creatingChannel ? 'Creating...' : 'Create'}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => { setShowNewChannel(false); setNewChannelName(''); setNewChannelDescription('') }}
|
||||
className="text-muted-foreground hover:text-foreground text-xs px-2 py-1.5 transition"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
|
||||
@@ -0,0 +1,94 @@
|
||||
import Link from 'next/link'
|
||||
import { notFound } from 'next/navigation'
|
||||
import ReactMarkdown from 'react-markdown'
|
||||
import remarkGfm from 'remark-gfm'
|
||||
import { Pin, Lock } from 'lucide-react'
|
||||
import { createClient } from '@/lib/supabase/server'
|
||||
import { CommentThread } from '@/components/comments/comment-thread'
|
||||
import { loadComments } from '@/components/comments/load-comments'
|
||||
import { ThreadActions } from './thread-actions'
|
||||
|
||||
export default async function ForumThreadPage({ params }: { params: Promise<{ id: string }> }) {
|
||||
const { id } = await params
|
||||
const supabase = await createClient()
|
||||
const { data: { user } } = await supabase.auth.getUser()
|
||||
if (!user) return null
|
||||
|
||||
const { data: self } = await supabase
|
||||
.from('space_members')
|
||||
.select('id, space_id, role, display_name')
|
||||
.eq('user_id', user.id)
|
||||
.in('status', ['current', 'unverified', 'late'])
|
||||
.single()
|
||||
if (!self) return null
|
||||
|
||||
const { data: thread } = await supabase
|
||||
.from('forum_threads')
|
||||
.select('id, title, body, category, pinned, locked, comment_count, created_at, author_id, space_id')
|
||||
.eq('id', id)
|
||||
.single()
|
||||
if (!thread) notFound()
|
||||
if (thread.space_id !== self.space_id) notFound()
|
||||
|
||||
let authorName = 'Member'
|
||||
if (thread.author_id) {
|
||||
const { data: a } = await supabase
|
||||
.from('space_members')
|
||||
.select('display_name')
|
||||
.eq('id', thread.author_id)
|
||||
.single()
|
||||
if (a?.display_name) authorName = a.display_name
|
||||
}
|
||||
|
||||
const comments = await loadComments(supabase, 'forum_thread', thread.id)
|
||||
const isAuthor = self.id === thread.author_id
|
||||
const canModerate = self.role === 'admin' || self.role === 'board'
|
||||
const canEditThread = isAuthor || canModerate
|
||||
|
||||
return (
|
||||
<div className="p-4 md:p-6 max-w-4xl space-y-5">
|
||||
<div>
|
||||
<Link href="/forum" className="font-mono text-[11px] tracking-widest text-muted-foreground hover:text-foreground uppercase">
|
||||
← Forum
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<header className="bg-card border border-border rounded p-5">
|
||||
<div className="flex items-start justify-between gap-4 mb-2">
|
||||
<div className="flex items-center gap-2 flex-wrap min-w-0">
|
||||
{thread.pinned && <Pin className="w-4 h-4 text-amber-500 shrink-0" />}
|
||||
{thread.locked && <Lock className="w-4 h-4 text-muted-foreground shrink-0" />}
|
||||
<h1 className="font-sans text-xl font-semibold text-foreground">{thread.title}</h1>
|
||||
<span className="font-mono text-[10px] px-1.5 py-0.5 rounded bg-muted text-muted-foreground uppercase tracking-widest">{thread.category}</span>
|
||||
</div>
|
||||
{canEditThread && (
|
||||
<ThreadActions
|
||||
threadId={thread.id}
|
||||
pinned={thread.pinned}
|
||||
locked={thread.locked}
|
||||
canModerate={canModerate}
|
||||
isAuthor={isAuthor}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<p className="font-mono text-[11px] text-muted-foreground">
|
||||
{authorName} · {new Date(thread.created_at).toLocaleString()}
|
||||
</p>
|
||||
{thread.body && (
|
||||
<div className="prose prose-sm prose-neutral dark:prose-invert max-w-none mt-4 break-words">
|
||||
<ReactMarkdown remarkPlugins={[remarkGfm]}>{thread.body}</ReactMarkdown>
|
||||
</div>
|
||||
)}
|
||||
</header>
|
||||
|
||||
<CommentThread
|
||||
entityType="forum_thread"
|
||||
entityId={thread.id}
|
||||
comments={comments}
|
||||
currentMemberId={self.id}
|
||||
canModerate={canModerate}
|
||||
locked={thread.locked}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,72 @@
|
||||
'use client'
|
||||
|
||||
import { useRouter } from 'next/navigation'
|
||||
import { toast } from 'sonner'
|
||||
import { Pin, Lock, Trash2 } from 'lucide-react'
|
||||
import { updateForumThread, deleteForumThread } from '@/lib/actions'
|
||||
|
||||
interface Props {
|
||||
threadId: string
|
||||
pinned: boolean
|
||||
locked: boolean
|
||||
canModerate: boolean
|
||||
isAuthor: boolean
|
||||
}
|
||||
|
||||
export function ThreadActions({ threadId, pinned, locked, canModerate, isAuthor }: Props) {
|
||||
const router = useRouter()
|
||||
|
||||
async function togglePinned() {
|
||||
const result = await updateForumThread(threadId, { pinned: !pinned })
|
||||
if (result.error) { toast.error(result.error); return }
|
||||
router.refresh()
|
||||
}
|
||||
|
||||
async function toggleLocked() {
|
||||
const result = await updateForumThread(threadId, { locked: !locked })
|
||||
if (result.error) { toast.error(result.error); return }
|
||||
router.refresh()
|
||||
}
|
||||
|
||||
async function handleDelete() {
|
||||
if (!confirm('Delete this thread? All comments are deleted too.')) return
|
||||
const result = await deleteForumThread(threadId)
|
||||
if (result.error) { toast.error(result.error); return }
|
||||
toast.success('Thread deleted')
|
||||
router.push('/forum')
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-1 shrink-0">
|
||||
{canModerate && (
|
||||
<>
|
||||
<button
|
||||
onClick={togglePinned}
|
||||
className={`font-mono text-[10px] border border-border px-2 py-1 rounded transition flex items-center gap-1 ${pinned ? 'text-amber-600 bg-amber-50' : 'hover:border-amber-500 hover:text-amber-600'}`}
|
||||
title={pinned ? 'Unpin' : 'Pin'}
|
||||
>
|
||||
<Pin className="w-3 h-3" />
|
||||
{pinned ? 'Pinned' : 'Pin'}
|
||||
</button>
|
||||
<button
|
||||
onClick={toggleLocked}
|
||||
className={`font-mono text-[10px] border border-border px-2 py-1 rounded transition flex items-center gap-1 ${locked ? 'text-muted-foreground bg-muted' : 'hover:border-primary hover:text-primary'}`}
|
||||
title={locked ? 'Unlock' : 'Lock'}
|
||||
>
|
||||
<Lock className="w-3 h-3" />
|
||||
{locked ? 'Locked' : 'Lock'}
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
{(isAuthor || canModerate) && (
|
||||
<button
|
||||
onClick={handleDelete}
|
||||
className="text-muted-foreground hover:text-red-500 transition p-1.5"
|
||||
title="Delete"
|
||||
>
|
||||
<Trash2 className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,83 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import { toast } from 'sonner'
|
||||
import { createForumThread } from '@/lib/actions'
|
||||
|
||||
const CATEGORIES = [
|
||||
{ value: 'general', label: 'General' },
|
||||
{ value: 'announcements', label: 'Announcements' },
|
||||
{ value: 'projects', label: 'Projects' },
|
||||
{ value: 'help', label: 'Help' },
|
||||
{ value: 'feedback', label: 'Feedback' },
|
||||
{ value: 'off-topic', label: 'Off topic' },
|
||||
]
|
||||
|
||||
export function NewThreadForm() {
|
||||
const router = useRouter()
|
||||
const [title, setTitle] = useState('')
|
||||
const [body, setBody] = useState('')
|
||||
const [category, setCategory] = useState('general')
|
||||
const [saving, setSaving] = useState(false)
|
||||
|
||||
async function handleSubmit(e: React.FormEvent) {
|
||||
e.preventDefault()
|
||||
if (!title.trim()) return
|
||||
setSaving(true)
|
||||
const result = await createForumThread({ title: title.trim(), body: body.trim() || undefined, category })
|
||||
setSaving(false)
|
||||
if ('error' in result && result.error) { toast.error(result.error); return }
|
||||
if ('id' in result && result.id) {
|
||||
toast.success('Thread created')
|
||||
router.push(`/forum/${result.id}`)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="bg-card border border-border rounded p-5 space-y-4">
|
||||
<div>
|
||||
<label className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase block mb-1">Title</label>
|
||||
<input
|
||||
type="text"
|
||||
value={title}
|
||||
onChange={e => setTitle(e.target.value)}
|
||||
maxLength={200}
|
||||
required
|
||||
autoFocus
|
||||
className="w-full bg-background border border-border text-foreground font-sans text-sm rounded px-3 py-2 focus:outline-none focus:border-primary"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase block mb-1">Category</label>
|
||||
<select
|
||||
value={category}
|
||||
onChange={e => setCategory(e.target.value)}
|
||||
className="w-full bg-background border border-border text-foreground font-sans text-sm rounded px-3 py-2 focus:outline-none focus:border-primary"
|
||||
>
|
||||
{CATEGORIES.map(c => <option key={c.value} value={c.value}>{c.label}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase block mb-1">Body (markdown)</label>
|
||||
<textarea
|
||||
value={body}
|
||||
onChange={e => setBody(e.target.value)}
|
||||
rows={8}
|
||||
maxLength={20000}
|
||||
placeholder="Markdown supported. Headings, lists, code blocks, links."
|
||||
className="w-full bg-background border border-border text-foreground font-sans text-sm rounded px-3 py-2 focus:outline-none focus:border-primary"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 justify-end">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={saving || !title.trim()}
|
||||
className="bg-primary text-white text-xs font-sans px-3 py-1.5 rounded hover:bg-primary/90 transition disabled:opacity-50"
|
||||
>
|
||||
{saving ? 'Posting...' : 'Post thread'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
import Link from 'next/link'
|
||||
import { NewThreadForm } from './new-thread-form'
|
||||
|
||||
export default function NewThreadPage() {
|
||||
return (
|
||||
<div className="p-4 md:p-6 max-w-3xl">
|
||||
<div className="mb-6">
|
||||
<Link href="/forum" className="font-mono text-[11px] tracking-widest text-muted-foreground hover:text-foreground uppercase">
|
||||
← Forum
|
||||
</Link>
|
||||
<h1 className="font-mono text-sm tracking-widest uppercase text-muted-foreground mt-2">New thread</h1>
|
||||
</div>
|
||||
<NewThreadForm />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,93 @@
|
||||
import Link from 'next/link'
|
||||
import { createClient } from '@/lib/supabase/server'
|
||||
import { Pin, Lock, MessagesSquare, Plus } from 'lucide-react'
|
||||
|
||||
export default async function ForumIndexPage() {
|
||||
const supabase = await createClient()
|
||||
const { data: { user } } = await supabase.auth.getUser()
|
||||
if (!user) return null
|
||||
|
||||
const { data: self } = await supabase
|
||||
.from('space_members')
|
||||
.select('space_id, role, display_name, id')
|
||||
.eq('user_id', user.id)
|
||||
.in('status', ['current', 'unverified', 'late'])
|
||||
.single()
|
||||
if (!self) return null
|
||||
|
||||
const { data: threads } = await supabase
|
||||
.from('forum_threads')
|
||||
.select('id, title, category, pinned, locked, comment_count, last_comment_at, created_at, author_id')
|
||||
.eq('space_id', self.space_id)
|
||||
.order('pinned', { ascending: false })
|
||||
.order('last_comment_at', { ascending: false, nullsFirst: false })
|
||||
.order('created_at', { ascending: false })
|
||||
.limit(200)
|
||||
|
||||
const authorIds = Array.from(new Set((threads ?? []).map(t => t.author_id).filter(Boolean) as string[]))
|
||||
const authorMap: Record<string, string> = {}
|
||||
if (authorIds.length > 0) {
|
||||
const { data: authors } = await supabase
|
||||
.from('space_members')
|
||||
.select('id, display_name')
|
||||
.in('id', authorIds)
|
||||
for (const a of authors ?? []) authorMap[a.id] = a.display_name ?? 'Member'
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="p-4 md:p-6 max-w-5xl">
|
||||
<div className="flex items-center justify-between mb-6 gap-4">
|
||||
<div>
|
||||
<h1 className="font-mono text-sm tracking-widest uppercase text-muted-foreground mb-1">Forum</h1>
|
||||
<p className="font-sans text-sm text-muted-foreground">Long-form discussion, announcements, and proposals before they become proposals.</p>
|
||||
</div>
|
||||
<Link
|
||||
href="/forum/new"
|
||||
className="flex items-center gap-1.5 bg-primary text-white text-xs font-sans px-3 py-1.5 rounded hover:bg-primary/90 transition shrink-0"
|
||||
>
|
||||
<Plus className="w-3.5 h-3.5" /> New thread
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{threads && threads.length > 0 ? (
|
||||
<div className="bg-card border border-border rounded divide-y divide-border">
|
||||
{threads.map(t => (
|
||||
<Link
|
||||
key={t.id}
|
||||
href={`/forum/${t.id}`}
|
||||
className="flex items-center gap-3 px-4 py-3 hover:bg-muted/30 transition"
|
||||
>
|
||||
<MessagesSquare className="w-4 h-4 text-muted-foreground shrink-0" />
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
{t.pinned && <Pin className="w-3 h-3 text-amber-500" aria-label="Pinned" />}
|
||||
{t.locked && <Lock className="w-3 h-3 text-muted-foreground" aria-label="Locked" />}
|
||||
<span className="font-sans text-sm font-medium text-foreground truncate">{t.title}</span>
|
||||
<span className="font-mono text-[10px] px-1.5 py-0.5 rounded bg-muted text-muted-foreground uppercase tracking-widest">{t.category}</span>
|
||||
</div>
|
||||
<p className="font-mono text-[11px] text-muted-foreground mt-0.5">
|
||||
{(t.author_id && authorMap[t.author_id]) ?? 'Member'}
|
||||
{' · '}
|
||||
{t.comment_count} {t.comment_count === 1 ? 'reply' : 'replies'}
|
||||
{t.last_comment_at && <> · last activity {new Date(t.last_comment_at).toLocaleString()}</>}
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="bg-card border border-border rounded p-10 text-center">
|
||||
<MessagesSquare className="w-8 h-8 text-muted-foreground mx-auto mb-3" />
|
||||
<p className="font-sans text-sm text-foreground mb-1">No threads yet.</p>
|
||||
<p className="font-sans text-sm text-muted-foreground mb-4">Start the conversation.</p>
|
||||
<Link
|
||||
href="/forum/new"
|
||||
className="inline-flex items-center gap-1.5 bg-primary text-white text-xs font-sans px-3 py-1.5 rounded hover:bg-primary/90 transition"
|
||||
>
|
||||
<Plus className="w-3.5 h-3.5" /> Start a thread
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -4,6 +4,8 @@ import { createClient } from '@/lib/supabase/server'
|
||||
import type { Incident, IncidentUpdateRow } from '@/lib/types'
|
||||
import { IncidentActions } from './incident-actions'
|
||||
import { MarkdownBody } from '@/components/markdown'
|
||||
import { CommentThread } from '@/components/comments/comment-thread'
|
||||
import { loadComments } from '@/components/comments/load-comments'
|
||||
|
||||
export const dynamic = 'force-dynamic'
|
||||
|
||||
@@ -33,6 +35,8 @@ export default async function IncidentDetailPage({ params }: { params: Promise<{
|
||||
const isAdminOrBoard = member.role === 'admin' || member.role === 'board'
|
||||
const isReporter = incident.reporter_id === member.id
|
||||
|
||||
const comments = await loadComments(supabase, 'incident', incident.id)
|
||||
|
||||
const { data: updatesRaw } = await supabase
|
||||
.from('incident_updates')
|
||||
.select('*')
|
||||
@@ -117,6 +121,14 @@ export default async function IncidentDetailPage({ params }: { params: Promise<{
|
||||
hasAppeal={incident.appeal_proposal_id !== null}
|
||||
appealProposalId={incident.appeal_proposal_id}
|
||||
/>
|
||||
|
||||
<CommentThread
|
||||
entityType="incident"
|
||||
entityId={incident.id}
|
||||
comments={comments}
|
||||
currentMemberId={member.id}
|
||||
canModerate={isAdminOrBoard}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -3,7 +3,10 @@
|
||||
import { useState, useMemo } from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import { Plus, Search, Lock, Pin, Eye, EyeOff, Pencil, Trash2, X, ChevronDown, Users2 } from 'lucide-react'
|
||||
import ReactMarkdown from 'react-markdown'
|
||||
import remarkGfm from 'remark-gfm'
|
||||
import { createKbEntry, updateKbEntry, deleteKbEntry } from '@/lib/actions'
|
||||
import { revealSecret, deleteSecret } from '@/lib/actions/secrets'
|
||||
import { createClient } from '@/lib/supabase/client'
|
||||
import { toast } from 'sonner'
|
||||
import type { Tables, TablesInsert } from '@/types/database'
|
||||
@@ -345,19 +348,19 @@ function SecretRow({ secret, onDelete }: { secret: Secret; onDelete: (id: string
|
||||
const [loading, setLoading] = useState(false)
|
||||
|
||||
async function reveal() {
|
||||
if (revealed) { setRevealed(false); return }
|
||||
if (revealed) { setRevealed(false); setValue(null); return }
|
||||
setLoading(true)
|
||||
const supabase = createClient()
|
||||
const { data } = await supabase.from('secrets').select('value').eq('id', secret.id).single()
|
||||
const result = await revealSecret(secret.id)
|
||||
setLoading(false)
|
||||
if (data) { setValue(data.value); setRevealed(true) }
|
||||
if (result.error) { toast.error(result.error); return }
|
||||
setValue(result.value ?? '')
|
||||
setRevealed(true)
|
||||
}
|
||||
|
||||
async function handleDelete() {
|
||||
if (!confirm(`Delete secret "${secret.title}"? This cannot be undone.`)) return
|
||||
const supabase = createClient()
|
||||
const { error } = await supabase.from('secrets').delete().eq('id', secret.id)
|
||||
if (error) { toast.error(error.message); return }
|
||||
const result = await deleteSecret(secret.id)
|
||||
if (result.error) { toast.error(result.error); return }
|
||||
toast.success('Secret deleted')
|
||||
onDelete(secret.id)
|
||||
}
|
||||
@@ -402,7 +405,10 @@ function KbEntryRow({
|
||||
onEdit: (e: KbEntry) => void
|
||||
onDelete: (id: string) => void
|
||||
}) {
|
||||
async function handleDelete() {
|
||||
const [viewing, setViewing] = useState(false)
|
||||
|
||||
async function handleDelete(e: React.MouseEvent) {
|
||||
e.stopPropagation()
|
||||
if (!confirm(`Delete "${entry.title}"?`)) return
|
||||
const result = await deleteKbEntry(entry.id)
|
||||
if ('error' in result && result.error) { toast.error(result.error); return }
|
||||
@@ -410,44 +416,90 @@ function KbEntryRow({
|
||||
onDelete(entry.id)
|
||||
}
|
||||
|
||||
function handleEdit(e: React.MouseEvent) {
|
||||
e.stopPropagation()
|
||||
onEdit(entry)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`flex items-start gap-3 px-4 py-4 hover:bg-muted/20 transition group border-l-4 ${
|
||||
entry.is_pinned
|
||||
? entry.visibility === 'admin_only' ? 'border-l-red-400' : entry.visibility === 'board' ? 'border-l-amber-400' : 'border-l-primary'
|
||||
: 'border-l-transparent'
|
||||
}`}>
|
||||
<div className="w-8 h-8 rounded bg-muted flex items-center justify-center flex-shrink-0 text-base">
|
||||
{entry.icon || (
|
||||
<svg className="w-4 h-4 text-muted-foreground" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||
</svg>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-0.5">
|
||||
<p className="font-sans text-sm font-medium text-foreground">{entry.title}</p>
|
||||
{entry.is_pinned && <Pin className="w-3 h-3 text-primary flex-shrink-0" />}
|
||||
<>
|
||||
<div
|
||||
onClick={() => setViewing(true)}
|
||||
className={`flex items-start gap-3 px-4 py-4 hover:bg-muted/20 transition group border-l-4 cursor-pointer ${
|
||||
entry.is_pinned
|
||||
? entry.visibility === 'admin_only' ? 'border-l-red-400' : entry.visibility === 'board' ? 'border-l-amber-400' : 'border-l-primary'
|
||||
: 'border-l-transparent'
|
||||
}`}
|
||||
>
|
||||
<div className="w-8 h-8 rounded bg-muted flex items-center justify-center flex-shrink-0 text-base">
|
||||
{entry.icon || (
|
||||
<svg className="w-4 h-4 text-muted-foreground" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||
</svg>
|
||||
)}
|
||||
</div>
|
||||
<p className="font-mono text-[10px] text-muted-foreground line-clamp-2">{entry.content?.slice(0, 120)}</p>
|
||||
<p className="font-mono text-[10px] text-muted-foreground/60 mt-1">
|
||||
{entry.area && <span>{entry.area} · </span>}
|
||||
updated {new Date(entry.updated_at).toLocaleDateString()} by {entry.updated_by_name}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5 flex-shrink-0">
|
||||
<span className={`font-mono text-[10px] px-2 py-0.5 rounded border whitespace-nowrap ${VISIBILITY_COLORS[entry.visibility] ?? 'text-muted-foreground bg-muted border-border'}`}>
|
||||
{VISIBILITY_LABELS[entry.visibility] ?? entry.visibility}
|
||||
</span>
|
||||
<div className="flex gap-1 opacity-0 group-hover:opacity-100 transition">
|
||||
<button onClick={() => onEdit(entry)} className="text-muted-foreground hover:text-primary transition p-1" title="Edit">
|
||||
<Pencil className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
<button onClick={handleDelete} className="text-muted-foreground hover:text-red-500 transition p-1" title="Delete">
|
||||
<Trash2 className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-0.5">
|
||||
<p className="font-sans text-sm font-medium text-foreground">{entry.title}</p>
|
||||
{entry.is_pinned && <Pin className="w-3 h-3 text-primary flex-shrink-0" />}
|
||||
</div>
|
||||
<p className="font-mono text-[10px] text-muted-foreground line-clamp-2">{entry.content?.slice(0, 120)}</p>
|
||||
<p className="font-mono text-[10px] text-muted-foreground/60 mt-1">
|
||||
{entry.area && <span>{entry.area} · </span>}
|
||||
updated {new Date(entry.updated_at).toLocaleDateString()} by {entry.updated_by_name}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5 flex-shrink-0">
|
||||
<span className={`font-mono text-[10px] px-2 py-0.5 rounded border whitespace-nowrap ${VISIBILITY_COLORS[entry.visibility] ?? 'text-muted-foreground bg-muted border-border'}`}>
|
||||
{VISIBILITY_LABELS[entry.visibility] ?? entry.visibility}
|
||||
</span>
|
||||
<div className="flex gap-1 opacity-0 group-hover:opacity-100 transition">
|
||||
<button onClick={handleEdit} className="text-muted-foreground hover:text-primary transition p-1" title="Edit">
|
||||
<Pencil className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
<button onClick={handleDelete} className="text-muted-foreground hover:text-red-500 transition p-1" title="Delete">
|
||||
<Trash2 className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{viewing && (
|
||||
<div className="fixed inset-0 z-50 bg-black/50 flex items-center justify-center p-4" onClick={() => setViewing(false)}>
|
||||
<div
|
||||
onClick={e => e.stopPropagation()}
|
||||
className="bg-card rounded border border-border w-full max-w-3xl max-h-[90vh] overflow-y-auto"
|
||||
>
|
||||
<div className="sticky top-0 bg-card border-b border-border px-5 py-3 flex items-start gap-3">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
{entry.icon && <span className="text-lg">{entry.icon}</span>}
|
||||
<h2 className="font-sans text-lg font-semibold text-foreground">{entry.title}</h2>
|
||||
{entry.is_pinned && <Pin className="w-3.5 h-3.5 text-primary" />}
|
||||
</div>
|
||||
<p className="font-mono text-[10px] text-muted-foreground mt-1">
|
||||
{entry.area && <span>{entry.area} · </span>}
|
||||
{VISIBILITY_LABELS[entry.visibility] ?? entry.visibility}
|
||||
{' · '}
|
||||
updated {new Date(entry.updated_at).toLocaleDateString()} by {entry.updated_by_name ?? 'unknown'}
|
||||
</p>
|
||||
</div>
|
||||
<button onClick={() => onEdit(entry)} className="text-muted-foreground hover:text-primary transition p-1" title="Edit">
|
||||
<Pencil className="w-4 h-4" />
|
||||
</button>
|
||||
<button onClick={() => setViewing(false)} className="text-muted-foreground hover:text-foreground transition p-1" title="Close">
|
||||
<X className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="px-5 py-5">
|
||||
<div className="prose prose-sm prose-neutral dark:prose-invert max-w-none break-words">
|
||||
<ReactMarkdown remarkPlugins={[remarkGfm]}>{entry.content ?? ''}</ReactMarkdown>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@@ -17,7 +17,10 @@ export default async function OpsPage() {
|
||||
supabase.from('knowledge_base').select('*').eq('space_id', member.space_id).order('is_pinned', { ascending: false }).order('created_at', { ascending: false }),
|
||||
supabase.from('area_leads').select('*').eq('space_id', member.space_id).order('area_name'),
|
||||
canSeeSecrets
|
||||
? supabase.from('secrets').select('id, title, area, created_at, label, value, description, icon, space_id, created_by, updated_at, category, notes').eq('space_id', member.space_id)
|
||||
// CRITICAL: never select `value` or `encrypted_value` here. The list
|
||||
// endpoint only returns metadata; the plaintext is fetched on demand
|
||||
// through the revealSecret() server action.
|
||||
? supabase.from('secrets').select('id, title, area, created_at, label, description, icon, space_id, created_by, updated_at, category, notes, encryption_version').eq('space_id', member.space_id)
|
||||
: Promise.resolve({ data: [] as Tables<'secrets'>[] }),
|
||||
])
|
||||
|
||||
|
||||
@@ -4,6 +4,8 @@ import { createClient } from '@/lib/supabase/server'
|
||||
import type { Policy } from '@/lib/types'
|
||||
import { PolicyActions } from './policy-actions'
|
||||
import { MarkdownBody } from '@/components/markdown'
|
||||
import { CommentThread } from '@/components/comments/comment-thread'
|
||||
import { loadComments } from '@/components/comments/load-comments'
|
||||
|
||||
export const dynamic = 'force-dynamic'
|
||||
|
||||
@@ -35,6 +37,19 @@ export default async function PolicyDetailPage({ params }: { params: Promise<{ s
|
||||
const current = versions.find(p => p.status === 'active') ?? versions[0]
|
||||
const isAdminOrBoard = member.role === 'admin' || member.role === 'board'
|
||||
|
||||
// Find the member's own id (needed for the discussion thread).
|
||||
const { data: self } = await supabase
|
||||
.from('space_members')
|
||||
.select('id')
|
||||
.eq('user_id', user.id)
|
||||
.eq('space_id', member.space_id)
|
||||
.maybeSingle()
|
||||
|
||||
// Comments are attached to the policy slug across all versions, so we anchor
|
||||
// on the slug-stable version id of the current row (v1 baseline).
|
||||
const baseId = versions[versions.length - 1].id
|
||||
const comments = await loadComments(supabase, 'policy', baseId)
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
<div className="bg-sidebar px-4 md:px-6 py-3 flex items-center gap-3">
|
||||
@@ -102,6 +117,14 @@ export default async function PolicyDetailPage({ params }: { params: Promise<{ s
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<CommentThread
|
||||
entityType="policy"
|
||||
entityId={baseId}
|
||||
comments={comments}
|
||||
currentMemberId={self?.id ?? null}
|
||||
canModerate={isAdminOrBoard}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -5,6 +5,8 @@ import type { Proposal, ProposalVote } from '@/lib/types'
|
||||
import { ProposalStatusBadge } from '../proposal-badges'
|
||||
import { ProposalActions } from './proposal-actions'
|
||||
import { MarkdownBody } from '@/components/markdown'
|
||||
import { CommentThread } from '@/components/comments/comment-thread'
|
||||
import { loadComments } from '@/components/comments/load-comments'
|
||||
|
||||
export const dynamic = 'force-dynamic'
|
||||
|
||||
@@ -65,6 +67,8 @@ export default async function ProposalDetailPage({ params }: { params: Promise<{
|
||||
? Math.min(100, Math.round((totalCounted / proposal.quorum_required) * 100))
|
||||
: 0
|
||||
|
||||
const comments = await loadComments(supabase, 'proposal', proposal.id)
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
<div className="bg-sidebar px-4 md:px-6 py-3 flex items-center gap-3">
|
||||
@@ -160,6 +164,14 @@ export default async function ProposalDetailPage({ params }: { params: Promise<{
|
||||
</ul>
|
||||
)}
|
||||
</section>
|
||||
|
||||
<CommentThread
|
||||
entityType="proposal"
|
||||
entityId={proposal.id}
|
||||
comments={comments}
|
||||
currentMemberId={(member as { id: string }).id}
|
||||
canModerate={isAdminOrBoard}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -25,6 +25,18 @@ export default async function SettingsPage() {
|
||||
.order('sort_order', { ascending: true })
|
||||
.order('name', { ascending: true })
|
||||
|
||||
const { data: tiers } = await supabase
|
||||
.from('space_tiers')
|
||||
.select('id, slug, name, description, monthly_price_cents, billing_cadence, is_system, is_archived, sort_order')
|
||||
.eq('space_id', member.space_id)
|
||||
.order('sort_order', { ascending: true })
|
||||
|
||||
const { data: invites } = await supabase
|
||||
.from('space_invites')
|
||||
.select('id, code, label, expires_at, max_uses, uses_count, is_enabled, created_at')
|
||||
.eq('space_id', member.space_id)
|
||||
.order('created_at', { ascending: false })
|
||||
|
||||
const isAdmin = member?.role === 'admin'
|
||||
|
||||
return (
|
||||
@@ -41,6 +53,27 @@ export default async function SettingsPage() {
|
||||
sort_order: number
|
||||
is_archived: boolean
|
||||
}>}
|
||||
tiers={(tiers ?? []) as Array<{
|
||||
id: string
|
||||
slug: string
|
||||
name: string
|
||||
description: string | null
|
||||
monthly_price_cents: number
|
||||
billing_cadence: string
|
||||
is_system: boolean
|
||||
is_archived: boolean
|
||||
sort_order: number
|
||||
}>}
|
||||
invites={(invites ?? []) as Array<{
|
||||
id: string
|
||||
code: string
|
||||
label: string | null
|
||||
expires_at: string | null
|
||||
max_uses: number | null
|
||||
uses_count: number
|
||||
is_enabled: boolean
|
||||
created_at: string
|
||||
}>}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -2,7 +2,8 @@
|
||||
|
||||
import { useState } from 'react'
|
||||
import { X, Check, Copy, Eye, EyeOff, RotateCcw } from 'lucide-react'
|
||||
import { updateSpaceSettings, saveIntegration, disconnectIntegration, rotateWebhookSecret, updateSpaceVisibility, createArea, updateArea, deleteArea } from '@/lib/actions'
|
||||
import { updateSpaceSettings, saveIntegration, disconnectIntegration, rotateWebhookSecret, updateSpaceVisibility, createArea, updateArea, deleteArea, createTier, updateTier, deleteTier, createInvite, updateInvite, deleteInvite } from '@/lib/actions'
|
||||
import { toast } from 'sonner'
|
||||
import { financialVisibilities, directoryVisibilities } from '@/lib/validations'
|
||||
|
||||
type Area = {
|
||||
@@ -24,6 +25,31 @@ interface Props {
|
||||
integrations: Integration[]
|
||||
currentRole: string
|
||||
areas: Area[]
|
||||
tiers: Tier[]
|
||||
invites: Invite[]
|
||||
}
|
||||
|
||||
export interface Tier {
|
||||
id: string
|
||||
slug: string
|
||||
name: string
|
||||
description: string | null
|
||||
monthly_price_cents: number
|
||||
billing_cadence: string
|
||||
is_system: boolean
|
||||
is_archived: boolean
|
||||
sort_order: number
|
||||
}
|
||||
|
||||
export interface Invite {
|
||||
id: string
|
||||
code: string
|
||||
label: string | null
|
||||
expires_at: string | null
|
||||
max_uses: number | null
|
||||
uses_count: number
|
||||
is_enabled: boolean
|
||||
created_at: string
|
||||
}
|
||||
|
||||
const ROLES_INFO = [
|
||||
@@ -98,9 +124,15 @@ const INTEGRATIONS_CONFIG = [
|
||||
},
|
||||
]
|
||||
|
||||
export default function SettingsClient({ space, isAdmin, integrations, currentRole, areas: initialAreas }: Props) {
|
||||
const [activeTab, setActiveTab] = useState<'space' | 'roles' | 'integrations' | 'webhooks'>('space')
|
||||
export default function SettingsClient({ space, isAdmin, integrations, currentRole, areas: initialAreas, tiers: initialTiers, invites: initialInvites }: Props) {
|
||||
const [activeTab, setActiveTab] = useState<'space' | 'roles' | 'tiers' | 'invites' | 'integrations' | 'webhooks'>('space')
|
||||
const [areas, setAreas] = useState<Area[]>(initialAreas)
|
||||
const [tiers, setTiers] = useState<Tier[]>(initialTiers)
|
||||
const [invites, setInvites] = useState<Invite[]>(initialInvites)
|
||||
const [showNewTier, setShowNewTier] = useState(false)
|
||||
const [newTier, setNewTier] = useState({ slug: '', name: '', description: '', monthly_price_cents: 0, billing_cadence: 'monthly' as 'monthly' | 'quarterly' | 'annual' | 'one_time' | 'custom' })
|
||||
const [showNewInvite, setShowNewInvite] = useState(false)
|
||||
const [newInvite, setNewInvite] = useState({ code: '', label: '', expires_at: '', max_uses: '' })
|
||||
const [newArea, setNewArea] = useState({ code: '', name: '' })
|
||||
const [saving, setSaving] = useState(false)
|
||||
const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null)
|
||||
@@ -236,11 +268,11 @@ export default function SettingsClient({ space, isAdmin, integrations, currentRo
|
||||
<div className="flex-1 p-4 md:p-6">
|
||||
{/* Tabs */}
|
||||
<div className="bg-card border-b border-border flex gap-4 md:gap-6 px-2 mb-6 rounded-t overflow-x-auto">
|
||||
{(['space', 'roles', 'integrations', 'webhooks'] as const).map(tab => (
|
||||
{(['space', 'roles', 'tiers', 'invites', 'integrations', 'webhooks'] as const).map(tab => (
|
||||
<button
|
||||
key={tab}
|
||||
onClick={() => setActiveTab(tab)}
|
||||
className={`font-sans text-sm py-3 border-b-2 transition capitalize ${
|
||||
className={`font-sans text-sm py-3 border-b-2 transition capitalize whitespace-nowrap ${
|
||||
activeTab === tab ? 'border-primary text-primary' : 'border-transparent text-muted-foreground hover:text-foreground'
|
||||
}`}
|
||||
>
|
||||
@@ -681,6 +713,331 @@ export default function SettingsClient({ space, isAdmin, integrations, currentRo
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Tiers Tab */}
|
||||
{activeTab === 'tiers' && (
|
||||
<div className="bg-card rounded border border-border p-6">
|
||||
<div className="flex items-center justify-between mb-4 gap-3">
|
||||
<div>
|
||||
<p className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase">Membership Tiers</p>
|
||||
<p className="font-sans text-sm text-muted-foreground mt-1">
|
||||
Customize tier names, prices, and billing cadence. Every space starts with the built-in plus, basic, and associate tiers.
|
||||
</p>
|
||||
</div>
|
||||
{isAdmin && (
|
||||
<button
|
||||
onClick={() => setShowNewTier(v => !v)}
|
||||
className="font-mono text-[10px] border border-border px-3 py-1.5 rounded hover:border-primary hover:text-primary transition flex items-center gap-1 whitespace-nowrap"
|
||||
>
|
||||
{showNewTier ? 'Cancel' : '+ New tier'}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{showNewTier && (
|
||||
<form
|
||||
onSubmit={async e => {
|
||||
e.preventDefault()
|
||||
const cents = Math.round(parseFloat(String(newTier.monthly_price_cents) || '0') * 100)
|
||||
const result = await createTier({
|
||||
slug: newTier.slug.trim().toLowerCase(),
|
||||
name: newTier.name.trim(),
|
||||
description: newTier.description.trim() || undefined,
|
||||
monthly_price_cents: isNaN(cents) ? 0 : cents,
|
||||
billing_cadence: newTier.billing_cadence,
|
||||
})
|
||||
if ('error' in result && result.error) { toast.error(result.error); return }
|
||||
toast.success('Tier created')
|
||||
setShowNewTier(false)
|
||||
setNewTier({ slug: '', name: '', description: '', monthly_price_cents: 0, billing_cadence: 'monthly' })
|
||||
setTiers(prev => [...prev, {
|
||||
id: (result as { id: string }).id,
|
||||
slug: newTier.slug.trim().toLowerCase(),
|
||||
name: newTier.name.trim(),
|
||||
description: newTier.description.trim() || null,
|
||||
monthly_price_cents: isNaN(cents) ? 0 : cents,
|
||||
billing_cadence: newTier.billing_cadence,
|
||||
is_system: false,
|
||||
is_archived: false,
|
||||
sort_order: 100,
|
||||
}])
|
||||
}}
|
||||
className="mb-4 p-4 border border-border rounded bg-background grid grid-cols-1 md:grid-cols-2 gap-3"
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
value={newTier.slug}
|
||||
onChange={e => setNewTier({ ...newTier, slug: e.target.value.toLowerCase().replace(/[^a-z0-9_-]/g, '-') })}
|
||||
placeholder="slug (lowercase)"
|
||||
maxLength={50}
|
||||
required
|
||||
className="bg-background border border-border text-foreground font-mono text-xs rounded px-2 py-1.5 focus:outline-none focus:border-primary"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
value={newTier.name}
|
||||
onChange={e => setNewTier({ ...newTier, name: e.target.value })}
|
||||
placeholder="Display name"
|
||||
maxLength={100}
|
||||
required
|
||||
className="bg-background border border-border text-foreground font-sans text-sm rounded px-2 py-1.5 focus:outline-none focus:border-primary"
|
||||
/>
|
||||
<input
|
||||
type="number"
|
||||
step="0.01"
|
||||
min="0"
|
||||
value={newTier.monthly_price_cents as unknown as string}
|
||||
onChange={e => setNewTier({ ...newTier, monthly_price_cents: parseFloat(e.target.value || '0') as unknown as number })}
|
||||
placeholder="Price in dollars"
|
||||
className="bg-background border border-border text-foreground font-mono text-xs rounded px-2 py-1.5 focus:outline-none focus:border-primary"
|
||||
/>
|
||||
<select
|
||||
value={newTier.billing_cadence}
|
||||
onChange={e => setNewTier({ ...newTier, billing_cadence: e.target.value as typeof newTier.billing_cadence })}
|
||||
className="bg-background border border-border text-foreground font-mono text-xs rounded px-2 py-1.5 focus:outline-none focus:border-primary"
|
||||
>
|
||||
<option value="monthly">Monthly</option>
|
||||
<option value="quarterly">Quarterly</option>
|
||||
<option value="annual">Annual</option>
|
||||
<option value="one_time">One time</option>
|
||||
<option value="custom">Custom</option>
|
||||
</select>
|
||||
<input
|
||||
type="text"
|
||||
value={newTier.description}
|
||||
onChange={e => setNewTier({ ...newTier, description: e.target.value })}
|
||||
placeholder="Description (optional)"
|
||||
maxLength={2000}
|
||||
className="md:col-span-2 bg-background border border-border text-foreground font-sans text-sm rounded px-2 py-1.5 focus:outline-none focus:border-primary"
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
className="md:col-span-2 bg-primary text-white text-xs font-sans px-3 py-1.5 rounded hover:bg-primary/90 transition"
|
||||
>
|
||||
Create tier
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
|
||||
<ul className="divide-y divide-border">
|
||||
{tiers.length === 0 && (
|
||||
<li className="py-6 text-center font-sans text-sm text-muted-foreground">No tiers yet.</li>
|
||||
)}
|
||||
{tiers.map(t => (
|
||||
<li key={t.id} className="py-3 flex items-center gap-3">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-sans text-sm font-medium text-foreground">{t.name}</span>
|
||||
<span className="font-mono text-[10px] px-1.5 py-0.5 rounded bg-muted text-muted-foreground">{t.slug}</span>
|
||||
{t.is_system && <span className="font-mono text-[10px] text-amber-600">built-in</span>}
|
||||
{t.is_archived && <span className="font-mono text-[10px] text-muted-foreground">archived</span>}
|
||||
</div>
|
||||
{t.description && <p className="font-sans text-xs text-muted-foreground mt-0.5">{t.description}</p>}
|
||||
<p className="font-mono text-[10px] text-muted-foreground/70 mt-0.5">
|
||||
${(t.monthly_price_cents / 100).toFixed(2)} / {t.billing_cadence.replace('_', ' ')}
|
||||
</p>
|
||||
</div>
|
||||
{isAdmin && (
|
||||
<div className="flex items-center gap-1.5">
|
||||
<input
|
||||
type="number"
|
||||
step="0.01"
|
||||
min="0"
|
||||
defaultValue={(t.monthly_price_cents / 100).toFixed(2)}
|
||||
onBlur={async e => {
|
||||
const cents = Math.round(parseFloat(e.target.value || '0') * 100)
|
||||
if (cents === t.monthly_price_cents) return
|
||||
const result = await updateTier(t.id, { monthly_price_cents: cents })
|
||||
if (result.error) { toast.error(result.error); return }
|
||||
setTiers(prev => prev.map(x => x.id === t.id ? { ...x, monthly_price_cents: cents } : x))
|
||||
toast.success('Price updated')
|
||||
}}
|
||||
className="w-24 bg-background border border-border text-foreground font-mono text-xs rounded px-2 py-1 focus:outline-none focus:border-primary"
|
||||
/>
|
||||
{!t.is_system && (
|
||||
<button
|
||||
onClick={async () => {
|
||||
if (!confirm(`Delete tier "${t.name}"?`)) return
|
||||
const result = await deleteTier(t.id)
|
||||
if (result.error) { toast.error(result.error); return }
|
||||
setTiers(prev => prev.filter(x => x.id !== t.id))
|
||||
toast.success('Tier deleted')
|
||||
}}
|
||||
className="font-mono text-[10px] border border-border px-2 py-1 rounded hover:border-red-500 hover:text-red-500 transition"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
)}
|
||||
{t.is_system && (
|
||||
<button
|
||||
onClick={async () => {
|
||||
const result = await updateTier(t.id, { is_archived: !t.is_archived })
|
||||
if (result.error) { toast.error(result.error); return }
|
||||
setTiers(prev => prev.map(x => x.id === t.id ? { ...x, is_archived: !x.is_archived } : x))
|
||||
}}
|
||||
className="font-mono text-[10px] border border-border px-2 py-1 rounded hover:border-primary hover:text-primary transition"
|
||||
>
|
||||
{t.is_archived ? 'Restore' : 'Archive'}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Invites Tab */}
|
||||
{activeTab === 'invites' && (
|
||||
<div className="bg-card rounded border border-border p-6">
|
||||
<div className="flex items-center justify-between mb-4 gap-3">
|
||||
<div>
|
||||
<p className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase">Invite Codes</p>
|
||||
<p className="font-sans text-sm text-muted-foreground mt-1">
|
||||
Generate codes for new members to join this space. Set an expiry, a max-use cap, or leave both blank for a permanent code. Toggle off to revoke.
|
||||
</p>
|
||||
</div>
|
||||
{isAdmin && (
|
||||
<button
|
||||
onClick={() => setShowNewInvite(v => !v)}
|
||||
className="font-mono text-[10px] border border-border px-3 py-1.5 rounded hover:border-primary hover:text-primary transition flex items-center gap-1 whitespace-nowrap"
|
||||
>
|
||||
{showNewInvite ? 'Cancel' : '+ New invite'}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{showNewInvite && (
|
||||
<form
|
||||
onSubmit={async e => {
|
||||
e.preventDefault()
|
||||
const result = await createInvite({
|
||||
code: newInvite.code.trim().toUpperCase() || undefined,
|
||||
label: newInvite.label.trim() || undefined,
|
||||
expires_at: newInvite.expires_at || undefined,
|
||||
max_uses: newInvite.max_uses ? Number(newInvite.max_uses) : undefined,
|
||||
})
|
||||
if ('error' in result && result.error) { toast.error(result.error); return }
|
||||
const created = result as { id: string; code: string }
|
||||
toast.success(`Invite created: ${created.code}`)
|
||||
setShowNewInvite(false)
|
||||
setInvites(prev => [{
|
||||
id: created.id,
|
||||
code: created.code,
|
||||
label: newInvite.label.trim() || null,
|
||||
expires_at: newInvite.expires_at || null,
|
||||
max_uses: newInvite.max_uses ? Number(newInvite.max_uses) : null,
|
||||
uses_count: 0,
|
||||
is_enabled: true,
|
||||
created_at: new Date().toISOString(),
|
||||
}, ...prev])
|
||||
setNewInvite({ code: '', label: '', expires_at: '', max_uses: '' })
|
||||
}}
|
||||
className="mb-4 p-4 border border-border rounded bg-background grid grid-cols-1 md:grid-cols-2 gap-3"
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
value={newInvite.code}
|
||||
onChange={e => setNewInvite({ ...newInvite, code: e.target.value.toUpperCase().replace(/[^A-Z0-9-]/g, '') })}
|
||||
placeholder="CODE (blank = auto-generate)"
|
||||
maxLength={32}
|
||||
className="bg-background border border-border text-foreground font-mono text-xs rounded px-2 py-1.5 focus:outline-none focus:border-primary"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
value={newInvite.label}
|
||||
onChange={e => setNewInvite({ ...newInvite, label: e.target.value })}
|
||||
placeholder="Label (e.g., open house 2026)"
|
||||
maxLength={100}
|
||||
className="bg-background border border-border text-foreground font-sans text-sm rounded px-2 py-1.5 focus:outline-none focus:border-primary"
|
||||
/>
|
||||
<input
|
||||
type="datetime-local"
|
||||
value={newInvite.expires_at}
|
||||
onChange={e => setNewInvite({ ...newInvite, expires_at: e.target.value })}
|
||||
className="bg-background border border-border text-foreground font-mono text-xs rounded px-2 py-1.5 focus:outline-none focus:border-primary"
|
||||
/>
|
||||
<input
|
||||
type="number"
|
||||
min="1"
|
||||
value={newInvite.max_uses}
|
||||
onChange={e => setNewInvite({ ...newInvite, max_uses: e.target.value })}
|
||||
placeholder="Max uses (blank = unlimited)"
|
||||
className="bg-background border border-border text-foreground font-mono text-xs rounded px-2 py-1.5 focus:outline-none focus:border-primary"
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
className="md:col-span-2 bg-primary text-white text-xs font-sans px-3 py-1.5 rounded hover:bg-primary/90 transition"
|
||||
>
|
||||
Create invite
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
|
||||
<ul className="divide-y divide-border">
|
||||
{invites.length === 0 && (
|
||||
<li className="py-6 text-center font-sans text-sm text-muted-foreground">No invites yet.</li>
|
||||
)}
|
||||
{invites.map(inv => {
|
||||
const expired = inv.expires_at ? new Date(inv.expires_at) < new Date() : false
|
||||
const usedUp = inv.max_uses !== null && inv.uses_count >= inv.max_uses
|
||||
return (
|
||||
<li key={inv.id} className="py-3 flex items-center gap-3 flex-wrap">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<code className="font-mono text-sm font-semibold text-primary bg-primary/10 px-2 py-0.5 rounded">{inv.code}</code>
|
||||
{inv.label && <span className="font-sans text-sm text-foreground">{inv.label}</span>}
|
||||
{!inv.is_enabled && <span className="font-mono text-[10px] text-red-500">disabled</span>}
|
||||
{expired && <span className="font-mono text-[10px] text-red-500">expired</span>}
|
||||
{usedUp && <span className="font-mono text-[10px] text-red-500">at cap</span>}
|
||||
</div>
|
||||
<p className="font-mono text-[10px] text-muted-foreground/70 mt-0.5">
|
||||
{inv.expires_at ? `expires ${new Date(inv.expires_at).toLocaleString()}` : 'permanent'}
|
||||
{' · '}
|
||||
uses {inv.uses_count}{inv.max_uses ? ` / ${inv.max_uses}` : ' (unlimited)'}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<button
|
||||
onClick={() => { navigator.clipboard.writeText(inv.code); toast.success('Copied') }}
|
||||
className="font-mono text-[10px] border border-border px-2 py-1 rounded hover:border-primary hover:text-primary transition"
|
||||
>
|
||||
Copy
|
||||
</button>
|
||||
{isAdmin && (
|
||||
<>
|
||||
<button
|
||||
onClick={async () => {
|
||||
const result = await updateInvite(inv.id, { is_enabled: !inv.is_enabled })
|
||||
if (result.error) { toast.error(result.error); return }
|
||||
setInvites(prev => prev.map(x => x.id === inv.id ? { ...x, is_enabled: !x.is_enabled } : x))
|
||||
}}
|
||||
className="font-mono text-[10px] border border-border px-2 py-1 rounded hover:border-primary hover:text-primary transition"
|
||||
>
|
||||
{inv.is_enabled ? 'Disable' : 'Enable'}
|
||||
</button>
|
||||
<button
|
||||
onClick={async () => {
|
||||
if (!confirm(`Delete invite "${inv.code}"?`)) return
|
||||
const result = await deleteInvite(inv.id)
|
||||
if (result.error) { toast.error(result.error); return }
|
||||
setInvites(prev => prev.filter(x => x.id !== inv.id))
|
||||
toast.success('Invite deleted')
|
||||
}}
|
||||
className="font-mono text-[10px] border border-border px-2 py-1 rounded hover:border-red-500 hover:text-red-500 transition"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Webhooks Tab */}
|
||||
{activeTab === 'webhooks' && (
|
||||
<div className="bg-card rounded border border-border p-6 space-y-6">
|
||||
|
||||
Reference in New Issue
Block a user