feat: Customize hub + roles editor, terminal logo, invite links
IA refactor and the custom-roles editor pass 11 left as data-only. Customize hub: - New /customize (admin/board) with a left section rail: Roles, Membership tiers, Areas, Invite codes, Onboarding. - One focused module per panel under app/(app)/customize/panels/ plus a shared card and types file. The client shell is ~75 lines; each panel is self-contained (smart separation of concerns). - Settings slimmed to Space, Integrations, Webhooks. Removed the Roles/Tiers/Invites/Onboarding tabs and the Areas block from settings-client.tsx (~700 lines) and the matching fetches from settings/page.tsx. Dead props/state/types removed. - Sidebar: added a Customize NavLink (admin/board). Roles editor: - Rename/recolor the five built-in roles (upsertRoleLabel) and full CRUD on custom org roles. Adds the read path the audit flagged as missing: lib/role-labels.ts (getRoleLabelMap/roleDisplayName) is consumed in (app)/layout.tsx so the sidebar shows the renamed role. Logo: - Reverted the brand mark to the terminal >_ glyph (components/brand-mark.tsx) on the landing nav/footer, onboarding header, and favicon (public/logo.svg). Removed the dead local IcoTerminal. AtlasLogo stays only on the resources project page. Invite links: - InvitesPanel has Copy code and Copy link (/signup?invite=CODE). signup reads ?invite= on mount, prefills the code, preselects join. Deferred and tracked in HANDOFF: types/database.ts sync, renamed-role display on the members table, splitting the still-large settings-client.tsx, custom-role assignment UI. 266/266 tests pass. Production build clean; /customize, /onboarding, slimmed /settings all in the route table. No migration this pass.
This commit is contained in:
Moheeb Zara
@@ -0,0 +1,68 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { RolesPanel } from './panels/roles-panel'
|
||||
import { TiersPanel } from './panels/tiers-panel'
|
||||
import { AreasPanel } from './panels/areas-panel'
|
||||
import { InvitesPanel } from './panels/invites-panel'
|
||||
import { OnboardingPanel } from './panels/onboarding-panel'
|
||||
import type { RoleLabelRow, CustomRole, Tier, Invite, Step, Area } from './panels/types'
|
||||
|
||||
type Section = 'roles' | 'tiers' | 'areas' | 'invites' | 'onboarding'
|
||||
|
||||
const SECTIONS: { key: Section; label: string }[] = [
|
||||
{ key: 'roles', label: 'Roles' },
|
||||
{ key: 'tiers', label: 'Membership tiers' },
|
||||
{ key: 'areas', label: 'Areas' },
|
||||
{ key: 'invites', label: 'Invite codes' },
|
||||
{ key: 'onboarding', label: 'Onboarding' },
|
||||
]
|
||||
|
||||
interface Props {
|
||||
isAdmin: boolean
|
||||
roleLabels: RoleLabelRow[]
|
||||
customRoles: CustomRole[]
|
||||
tiers: Tier[]
|
||||
invites: Invite[]
|
||||
onboardingSteps: Step[]
|
||||
areas: Area[]
|
||||
}
|
||||
|
||||
export function CustomizeClient(props: Props) {
|
||||
const [section, setSection] = useState<Section>('roles')
|
||||
|
||||
return (
|
||||
<div className="p-4 md:p-6 max-w-6xl">
|
||||
<div className="mb-6">
|
||||
<h1 className="font-mono text-sm tracking-widest uppercase text-muted-foreground mb-1">Customize</h1>
|
||||
<p className="font-sans text-sm text-muted-foreground">
|
||||
Make the space yours. Operational settings (identity, integrations, webhooks) live under Settings.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col md:flex-row gap-6">
|
||||
<nav className="md:w-56 shrink-0 flex md:flex-col gap-1 overflow-x-auto md:overflow-visible">
|
||||
{SECTIONS.map(s => (
|
||||
<button
|
||||
key={s.key}
|
||||
onClick={() => setSection(s.key)}
|
||||
className={`text-left px-3 py-2 rounded text-sm font-sans transition whitespace-nowrap ${
|
||||
section === s.key ? 'bg-primary/10 text-primary' : 'text-foreground/70 hover:bg-muted hover:text-foreground'
|
||||
}`}
|
||||
>
|
||||
{s.label}
|
||||
</button>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
<div className="flex-1 min-w-0">
|
||||
{section === 'roles' && <RolesPanel isAdmin={props.isAdmin} roleLabels={props.roleLabels} customRoles={props.customRoles} />}
|
||||
{section === 'tiers' && <TiersPanel isAdmin={props.isAdmin} tiers={props.tiers} />}
|
||||
{section === 'areas' && <AreasPanel isAdmin={props.isAdmin} areas={props.areas} />}
|
||||
{section === 'invites' && <InvitesPanel isAdmin={props.isAdmin} invites={props.invites} />}
|
||||
{section === 'onboarding' && <OnboardingPanel isAdmin={props.isAdmin} steps={props.onboardingSteps} />}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
import { redirect } from 'next/navigation'
|
||||
import { createClient } from '@/lib/supabase/server'
|
||||
import { CustomizeClient } from './customize-client'
|
||||
|
||||
export const dynamic = 'force-dynamic'
|
||||
|
||||
export default async function CustomizePage() {
|
||||
const supabase = await createClient()
|
||||
const { data: { user } } = await supabase.auth.getUser()
|
||||
if (!user) redirect('/login')
|
||||
|
||||
const { data: member } = await supabase
|
||||
.from('space_members')
|
||||
.select('space_id, role')
|
||||
.eq('user_id', user.id)
|
||||
.in('status', ['current', 'unverified', 'late'])
|
||||
.single()
|
||||
if (!member) redirect('/login')
|
||||
|
||||
const isAdmin = member.role === 'admin'
|
||||
const canCustomize = member.role === 'admin' || member.role === 'board'
|
||||
if (!canCustomize) redirect('/dashboard')
|
||||
|
||||
const [
|
||||
{ data: roleLabels },
|
||||
{ data: customRoles },
|
||||
{ data: tiers },
|
||||
{ data: invites },
|
||||
{ data: onboardingSteps },
|
||||
{ data: areas },
|
||||
] = await Promise.all([
|
||||
supabase.from('space_role_labels').select('role, display_name, description, color').eq('space_id', member.space_id),
|
||||
supabase.from('space_custom_roles').select('id, slug, name, description, color, sort_order').eq('space_id', member.space_id).order('sort_order'),
|
||||
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'),
|
||||
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 }),
|
||||
supabase.from('space_onboarding_steps').select('id, step_key, step_type, title, body, config, is_enabled, is_required, is_system, sort_order').eq('space_id', member.space_id).order('sort_order'),
|
||||
supabase.from('space_areas').select('id, code, name, icon, sort_order, is_archived').eq('space_id', member.space_id).order('sort_order').order('name'),
|
||||
])
|
||||
|
||||
return (
|
||||
<CustomizeClient
|
||||
isAdmin={isAdmin}
|
||||
roleLabels={(roleLabels ?? []) as Array<{ role: string; display_name: string | null; description: string | null; color: string | null }>}
|
||||
customRoles={(customRoles ?? []) as Array<{ id: string; slug: string; name: string; description: string | null; color: string | null; sort_order: number }>}
|
||||
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 }>}
|
||||
onboardingSteps={(onboardingSteps ?? []) as Array<{ id: string; step_key: string; step_type: 'welcome' | 'code_of_conduct' | 'profile' | 'payment' | 'content'; title: string; body: string | null; config: Record<string, unknown>; is_enabled: boolean; is_required: boolean; is_system: boolean; sort_order: number }>}
|
||||
areas={(areas ?? []) as Array<{ id: string; code: string; name: string; icon: string | null; sort_order: number; is_archived: boolean }>}
|
||||
/>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { toast } from 'sonner'
|
||||
import { createArea, updateArea, deleteArea } from '@/lib/actions'
|
||||
import { Card } from './card'
|
||||
import type { Area } from './types'
|
||||
|
||||
export function AreasPanel({ isAdmin, areas: initial }: { isAdmin: boolean; areas: Area[] }) {
|
||||
const [areas, setAreas] = useState<Area[]>(initial)
|
||||
const [showNew, setShowNew] = useState(false)
|
||||
const [d, setD] = useState({ code: '', name: '', icon: '' })
|
||||
|
||||
return (
|
||||
<Card
|
||||
title="Areas"
|
||||
blurb="Shop areas tag tasks, projects, and knowledge base entries. Archive to hide from pickers without losing history."
|
||||
action={isAdmin ? <button onClick={() => setShowNew(v => !v)} className="font-mono text-[10px] border border-border px-3 py-1.5 rounded hover:border-primary hover:text-primary transition whitespace-nowrap">{showNew ? 'Cancel' : '+ New area'}</button> : undefined}
|
||||
>
|
||||
{showNew && (
|
||||
<form
|
||||
onSubmit={async e => {
|
||||
e.preventDefault()
|
||||
const result = await createArea({ code: d.code.trim().toLowerCase(), name: d.name.trim(), icon: d.icon.trim() || undefined })
|
||||
if ('error' in result && result.error) { toast.error(result.error); return }
|
||||
toast.success('Area created')
|
||||
const created = result as { data?: { id: string } }
|
||||
setAreas(prev => [...prev, { id: created.data?.id ?? crypto.randomUUID(), code: d.code.trim().toLowerCase(), name: d.name.trim(), icon: d.icon.trim() || null, sort_order: 100, is_archived: false }])
|
||||
setShowNew(false); setD({ code: '', name: '', icon: '' })
|
||||
}}
|
||||
className="mb-4 p-4 border border-border rounded bg-background grid grid-cols-1 md:grid-cols-3 gap-3"
|
||||
>
|
||||
<input type="text" required value={d.code} onChange={e => setD({ ...d, code: e.target.value.toLowerCase().replace(/[^a-z0-9-]/g, '-') })} placeholder="code" 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" required value={d.name} onChange={e => setD({ ...d, name: e.target.value })} placeholder="Display name" 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="text" value={d.icon} onChange={e => setD({ ...d, icon: e.target.value })} placeholder="Icon (emoji, optional)" className="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-3 bg-primary text-white text-xs font-sans px-3 py-1.5 rounded hover:bg-primary/90 transition">Create area</button>
|
||||
</form>
|
||||
)}
|
||||
<ul className="divide-y divide-border">
|
||||
{areas.length === 0 && <li className="py-6 text-center font-sans text-sm text-muted-foreground">No areas yet.</li>}
|
||||
{[...areas].sort((a, b) => a.sort_order - b.sort_order).map(a => (
|
||||
<li key={a.id} className={`py-3 flex items-center gap-3 flex-wrap ${a.is_archived ? 'opacity-50' : ''}`}>
|
||||
<input type="number" defaultValue={a.sort_order} disabled={!isAdmin} onBlur={async e => { const n = parseInt(e.target.value, 10); if (isNaN(n) || n === a.sort_order) return; const res = await updateArea({ areaId: a.id, sort_order: n }); if (res.error) { toast.error(res.error); return } setAreas(prev => prev.map(x => x.id === a.id ? { ...x, sort_order: n } : x)) }} className="w-14 bg-background border border-border text-foreground font-mono text-xs rounded px-2 py-1 focus:outline-none focus:border-primary" />
|
||||
{a.icon && <span>{a.icon}</span>}
|
||||
<input type="text" defaultValue={a.name} disabled={!isAdmin} onBlur={async e => { const v = e.target.value.trim(); if (!v || v === a.name) return; const res = await updateArea({ areaId: a.id, name: v }); if (res.error) { toast.error(res.error); return } setAreas(prev => prev.map(x => x.id === a.id ? { ...x, name: v } : x)); toast.success('Saved') }} className="flex-1 min-w-[140px] bg-background border border-border text-foreground font-sans text-sm rounded px-2 py-1 focus:outline-none focus:border-primary" />
|
||||
<span className="font-mono text-[10px] px-1.5 py-0.5 rounded bg-muted text-muted-foreground">{a.code}</span>
|
||||
{isAdmin && (
|
||||
<div className="flex items-center gap-1.5">
|
||||
<button onClick={async () => { const res = await updateArea({ areaId: a.id, is_archived: !a.is_archived }); if (res.error) { toast.error(res.error); return } setAreas(prev => prev.map(x => x.id === a.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">{a.is_archived ? 'Restore' : 'Archive'}</button>
|
||||
<button onClick={async () => { if (!confirm(`Delete area "${a.name}"?`)) return; const res = await deleteArea(a.id); if (res.error) { toast.error(res.error); return } setAreas(prev => prev.filter(x => x.id !== a.id)); toast.success('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>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
// Shared section card chrome for every Customize panel.
|
||||
export function Card({
|
||||
title,
|
||||
blurb,
|
||||
action,
|
||||
children,
|
||||
}: {
|
||||
title: string
|
||||
blurb: string
|
||||
action?: React.ReactNode
|
||||
children: React.ReactNode
|
||||
}) {
|
||||
return (
|
||||
<div className="bg-card border border-border rounded p-6">
|
||||
<div className="flex items-start justify-between gap-3 mb-4">
|
||||
<div>
|
||||
<p className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase">{title}</p>
|
||||
<p className="font-sans text-sm text-muted-foreground mt-1">{blurb}</p>
|
||||
</div>
|
||||
{action}
|
||||
</div>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,78 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { toast } from 'sonner'
|
||||
import { createInvite, updateInvite, deleteInvite } from '@/lib/actions'
|
||||
import { Card } from './card'
|
||||
import type { Invite } from './types'
|
||||
|
||||
function inviteLink(code: string) {
|
||||
const origin = typeof window !== 'undefined' ? window.location.origin : ''
|
||||
return `${origin}/signup?invite=${encodeURIComponent(code)}`
|
||||
}
|
||||
|
||||
export function InvitesPanel({ isAdmin, invites: initial }: { isAdmin: boolean; invites: Invite[] }) {
|
||||
const [invites, setInvites] = useState<Invite[]>(initial)
|
||||
const [showNew, setShowNew] = useState(false)
|
||||
const [d, setD] = useState({ code: '', label: '', expires_at: '', max_uses: '' })
|
||||
|
||||
return (
|
||||
<Card
|
||||
title="Invite codes"
|
||||
blurb="Generate codes for new members. Share the code or the one-click join link. Set an expiry, a max-use cap, or leave both blank for a permanent code. Disable to revoke."
|
||||
action={isAdmin ? <button onClick={() => setShowNew(v => !v)} className="font-mono text-[10px] border border-border px-3 py-1.5 rounded hover:border-primary hover:text-primary transition whitespace-nowrap">{showNew ? 'Cancel' : '+ New invite'}</button> : undefined}
|
||||
>
|
||||
{showNew && (
|
||||
<form
|
||||
onSubmit={async e => {
|
||||
e.preventDefault()
|
||||
const result = await createInvite({ code: d.code.trim().toUpperCase() || undefined, label: d.label.trim() || undefined, expires_at: d.expires_at || undefined, max_uses: d.max_uses ? Number(d.max_uses) : undefined })
|
||||
if ('error' in result && result.error) { toast.error(result.error); return }
|
||||
const c = result as { id: string; code: string }
|
||||
toast.success(`Invite created: ${c.code}`)
|
||||
setInvites(prev => [{ id: c.id, code: c.code, label: d.label.trim() || null, expires_at: d.expires_at || null, max_uses: d.max_uses ? Number(d.max_uses) : null, uses_count: 0, is_enabled: true, created_at: new Date().toISOString() }, ...prev])
|
||||
setShowNew(false); setD({ 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" maxLength={32} value={d.code} onChange={e => setD({ ...d, code: e.target.value.toUpperCase().replace(/[^A-Z0-9-]/g, '') })} placeholder="CODE (blank = auto)" 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" maxLength={100} value={d.label} onChange={e => setD({ ...d, label: e.target.value })} placeholder="Label (optional)" 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={d.expires_at} onChange={e => setD({ ...d, 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={d.max_uses} onChange={e => setD({ ...d, 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('Code copied') }} className="font-mono text-[10px] border border-border px-2 py-1 rounded hover:border-primary hover:text-primary transition">Copy code</button>
|
||||
<button onClick={() => { navigator.clipboard.writeText(inviteLink(inv.code)); toast.success('Invite link copied') }} className="font-mono text-[10px] border border-border px-2 py-1 rounded hover:border-primary hover:text-primary transition">Copy link</button>
|
||||
{isAdmin && (
|
||||
<>
|
||||
<button onClick={async () => { const res = await updateInvite(inv.id, { is_enabled: !inv.is_enabled }); if (res.error) { toast.error(res.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 res = await deleteInvite(inv.id); if (res.error) { toast.error(res.error); return } setInvites(prev => prev.filter(x => x.id !== inv.id)); toast.success('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>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { toast } from 'sonner'
|
||||
import { createOnboardingStep, updateOnboardingStep, deleteOnboardingStep } from '@/lib/actions'
|
||||
import { Card } from './card'
|
||||
import type { Step } from './types'
|
||||
|
||||
export function OnboardingPanel({ isAdmin, steps: initial }: { isAdmin: boolean; steps: Step[] }) {
|
||||
const [steps, setSteps] = useState<Step[]>(initial)
|
||||
|
||||
return (
|
||||
<Card
|
||||
title="New member onboarding"
|
||||
blurb="These steps run, in order, the first time a new member opens the app. Reorder with the number. Disable to hide. Built-in steps cannot be deleted, only disabled. Body supports markdown and a safe subset of HTML."
|
||||
action={isAdmin ? (
|
||||
<button
|
||||
onClick={async () => {
|
||||
const result = await createOnboardingStep({ step_type: 'content', title: 'New step', body: 'Edit this content in Customize, Onboarding.', sort_order: steps.reduce((m, s) => Math.max(m, s.sort_order), 0) + 1 })
|
||||
if ('error' in result && result.error) { toast.error(result.error); return }
|
||||
toast.success('Step added')
|
||||
const id = (result as { id: string }).id
|
||||
setSteps(prev => [...prev, { id, step_key: `custom-${id.slice(0, 12)}`, step_type: 'content', title: 'New step', body: 'Edit this content in Customize, Onboarding.', config: {}, is_enabled: true, is_required: false, is_system: false, sort_order: prev.reduce((m, s) => Math.max(m, s.sort_order), 0) + 1 }])
|
||||
}}
|
||||
className="font-mono text-[10px] border border-border px-3 py-1.5 rounded hover:border-primary hover:text-primary transition whitespace-nowrap"
|
||||
>
|
||||
+ Custom step
|
||||
</button>
|
||||
) : undefined}
|
||||
>
|
||||
<ul className="space-y-3">
|
||||
{[...steps].sort((a, b) => a.sort_order - b.sort_order).map(s => (
|
||||
<li key={s.id} className="border border-border rounded p-4">
|
||||
<div className="flex items-center gap-3 mb-3 flex-wrap">
|
||||
<input type="number" defaultValue={s.sort_order} disabled={!isAdmin} onBlur={async e => { const n = parseInt(e.target.value, 10); if (isNaN(n) || n === s.sort_order) return; const res = await updateOnboardingStep(s.id, { sort_order: n }); if (res.error) { toast.error(res.error); return } setSteps(prev => prev.map(x => x.id === s.id ? { ...x, sort_order: n } : x)) }} className="w-14 bg-background border border-border text-foreground font-mono text-xs rounded px-2 py-1 focus:outline-none focus:border-primary" />
|
||||
<span className="font-mono text-[10px] px-1.5 py-0.5 rounded bg-muted text-muted-foreground uppercase">{s.step_type.replace(/_/g, ' ')}</span>
|
||||
<input type="text" defaultValue={s.title} disabled={!isAdmin} onBlur={async e => { const v = e.target.value.trim(); if (!v || v === s.title) return; const res = await updateOnboardingStep(s.id, { title: v }); if (res.error) { toast.error(res.error); return } setSteps(prev => prev.map(x => x.id === s.id ? { ...x, title: v } : x)) }} className="flex-1 min-w-[160px] bg-background border border-border text-foreground font-sans text-sm rounded px-2 py-1 focus:outline-none focus:border-primary" />
|
||||
{s.is_system && <span className="font-mono text-[10px] text-amber-600">built-in</span>}
|
||||
</div>
|
||||
{(s.step_type === 'welcome' || s.step_type === 'code_of_conduct' || s.step_type === 'payment' || s.step_type === 'content') && (
|
||||
<textarea defaultValue={s.body ?? ''} disabled={!isAdmin} rows={4} maxLength={50000} onBlur={async e => { const v = e.target.value; if (v === (s.body ?? '')) return; const res = await updateOnboardingStep(s.id, { body: v }); if (res.error) { toast.error(res.error); return } setSteps(prev => prev.map(x => x.id === s.id ? { ...x, body: v } : x)) }} placeholder="Markdown / safe HTML" className="w-full bg-background border border-border text-foreground font-mono text-xs rounded px-2 py-2 focus:outline-none focus:border-primary mb-3" />
|
||||
)}
|
||||
{s.step_type === 'payment' && (
|
||||
<input type="url" defaultValue={(s.config?.payment_url as string) ?? ''} disabled={!isAdmin} placeholder="Payment link (https://...)" onBlur={async e => { const v = e.target.value.trim(); if (v === ((s.config?.payment_url as string) ?? '')) return; const res = await updateOnboardingStep(s.id, { config: { ...s.config, payment_url: v } }); if (res.error) { toast.error(res.error); return } setSteps(prev => prev.map(x => x.id === s.id ? { ...x, config: { ...x.config, payment_url: v } } : x)) }} className="w-full bg-background border border-border text-foreground font-mono text-xs rounded px-2 py-2 focus:outline-none focus:border-primary mb-3" />
|
||||
)}
|
||||
{isAdmin && (
|
||||
<div className="flex items-center gap-4 flex-wrap">
|
||||
<label className="flex items-center gap-1.5 cursor-pointer">
|
||||
<input type="checkbox" checked={s.is_enabled} onChange={async e => { const res = await updateOnboardingStep(s.id, { is_enabled: e.target.checked }); if (res.error) { toast.error(res.error); return } setSteps(prev => prev.map(x => x.id === s.id ? { ...x, is_enabled: e.target.checked } : x)) }} />
|
||||
<span className="font-mono text-[10px] text-muted-foreground uppercase tracking-widest">Enabled</span>
|
||||
</label>
|
||||
<label className="flex items-center gap-1.5 cursor-pointer">
|
||||
<input type="checkbox" checked={s.is_required} onChange={async e => { const res = await updateOnboardingStep(s.id, { is_required: e.target.checked }); if (res.error) { toast.error(res.error); return } setSteps(prev => prev.map(x => x.id === s.id ? { ...x, is_required: e.target.checked } : x)) }} />
|
||||
<span className="font-mono text-[10px] text-muted-foreground uppercase tracking-widest">Required</span>
|
||||
</label>
|
||||
{!s.is_system && (
|
||||
<button onClick={async () => { if (!confirm(`Delete step "${s.title}"?`)) return; const res = await deleteOnboardingStep(s.id); if (res.error) { toast.error(res.error); return } setSteps(prev => prev.filter(x => x.id !== s.id)); toast.success('Deleted') }} className="ml-auto 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>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,150 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import { toast } from 'sonner'
|
||||
import { upsertRoleLabel, createCustomRole, updateCustomRole, deleteCustomRole } from '@/lib/actions'
|
||||
import { BUILTIN_ROLES, DEFAULT_ROLE_LABELS } from '@/lib/role-labels'
|
||||
import { Card } from './card'
|
||||
import type { RoleLabelRow, CustomRole } from './types'
|
||||
|
||||
export function RolesPanel({ isAdmin, roleLabels, customRoles: initial }: { isAdmin: boolean; roleLabels: RoleLabelRow[]; customRoles: CustomRole[] }) {
|
||||
const router = useRouter()
|
||||
const [customRoles, setCustomRoles] = useState<CustomRole[]>(initial)
|
||||
const [showNew, setShowNew] = useState(false)
|
||||
const [draft, setDraft] = useState({ slug: '', name: '', color: '#d4ff00', description: '' })
|
||||
|
||||
function labelFor(role: string) {
|
||||
const row = roleLabels.find(r => r.role === role)
|
||||
const def = DEFAULT_ROLE_LABELS[role as keyof typeof DEFAULT_ROLE_LABELS]
|
||||
return {
|
||||
name: row?.display_name ?? def?.name ?? role,
|
||||
description: row?.description ?? '',
|
||||
color: row?.color ?? def?.color ?? '#e5e7eb',
|
||||
}
|
||||
}
|
||||
|
||||
async function saveLabel(role: string, patch: { display_name?: string; description?: string; color?: string }) {
|
||||
const cur = labelFor(role)
|
||||
const result = await upsertRoleLabel({
|
||||
role: role as 'admin' | 'board' | 'treasurer' | 'member' | 'associate',
|
||||
display_name: patch.display_name ?? cur.name,
|
||||
description: patch.description ?? cur.description,
|
||||
color: patch.color ?? cur.color,
|
||||
})
|
||||
if (result.error) { toast.error(result.error); return }
|
||||
toast.success('Role updated')
|
||||
router.refresh()
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<Card title="Built-in roles" blurb="The five permission roles are fixed, but you can rename and recolor them to match your space's vocabulary. The new label shows everywhere a role is displayed.">
|
||||
<ul className="divide-y divide-border">
|
||||
{BUILTIN_ROLES.map(role => {
|
||||
const l = labelFor(role)
|
||||
return (
|
||||
<li key={role} className="py-3 flex items-center gap-3 flex-wrap">
|
||||
<span className="font-mono text-[10px] px-1.5 py-0.5 rounded bg-muted text-muted-foreground w-20 text-center">{role}</span>
|
||||
<input
|
||||
type="text"
|
||||
defaultValue={l.name}
|
||||
disabled={!isAdmin}
|
||||
onBlur={e => { const v = e.target.value.trim(); if (v && v !== l.name) saveLabel(role, { display_name: v }) }}
|
||||
className="bg-background border border-border text-foreground font-sans text-sm rounded px-2 py-1 focus:outline-none focus:border-primary"
|
||||
/>
|
||||
<input
|
||||
type="color"
|
||||
defaultValue={l.color}
|
||||
disabled={!isAdmin}
|
||||
onBlur={e => { if (e.target.value !== l.color) saveLabel(role, { color: e.target.value }) }}
|
||||
className="w-9 h-8 bg-background border border-border rounded cursor-pointer"
|
||||
title="Badge color"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
defaultValue={l.description}
|
||||
disabled={!isAdmin}
|
||||
placeholder="Short description (optional)"
|
||||
onBlur={e => { if (e.target.value !== l.description) saveLabel(role, { description: e.target.value }) }}
|
||||
className="flex-1 min-w-[160px] bg-background border border-border text-foreground font-sans text-sm rounded px-2 py-1 focus:outline-none focus:border-primary"
|
||||
/>
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
</Card>
|
||||
|
||||
<Card
|
||||
title="Custom roles"
|
||||
blurb="Extra labels for org structure (committees, area leads, mentors). Display-only; they do not change permissions."
|
||||
action={isAdmin ? (
|
||||
<button onClick={() => setShowNew(v => !v)} className="font-mono text-[10px] border border-border px-3 py-1.5 rounded hover:border-primary hover:text-primary transition whitespace-nowrap">
|
||||
{showNew ? 'Cancel' : '+ Custom role'}
|
||||
</button>
|
||||
) : undefined}
|
||||
>
|
||||
{showNew && (
|
||||
<form
|
||||
onSubmit={async e => {
|
||||
e.preventDefault()
|
||||
const result = await createCustomRole({
|
||||
slug: draft.slug.trim().toLowerCase(),
|
||||
name: draft.name.trim(),
|
||||
color: draft.color,
|
||||
description: draft.description.trim() || undefined,
|
||||
})
|
||||
if ('error' in result && result.error) { toast.error(result.error); return }
|
||||
toast.success('Custom role created')
|
||||
setCustomRoles(prev => [...prev, { id: (result as { id: string }).id, slug: draft.slug.trim().toLowerCase(), name: draft.name.trim(), color: draft.color, description: draft.description.trim() || null, sort_order: 100 }])
|
||||
setShowNew(false)
|
||||
setDraft({ slug: '', name: '', color: '#d4ff00', description: '' })
|
||||
}}
|
||||
className="mb-4 p-4 border border-border rounded bg-background grid grid-cols-1 md:grid-cols-2 gap-3"
|
||||
>
|
||||
<input type="text" required maxLength={50} value={draft.slug} onChange={e => setDraft({ ...draft, slug: e.target.value.toLowerCase().replace(/[^a-z0-9_-]/g, '-') })} placeholder="slug" 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" required maxLength={100} value={draft.name} onChange={e => setDraft({ ...draft, name: e.target.value })} placeholder="Display name" 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="color" value={draft.color} onChange={e => setDraft({ ...draft, color: e.target.value })} className="w-9 h-8 bg-background border border-border rounded cursor-pointer" />
|
||||
<input type="text" maxLength={500} value={draft.description} onChange={e => setDraft({ ...draft, description: e.target.value })} placeholder="Description (optional)" className="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</button>
|
||||
</form>
|
||||
)}
|
||||
{customRoles.length === 0 ? (
|
||||
<p className="font-sans text-sm text-muted-foreground py-2">No custom roles yet.</p>
|
||||
) : (
|
||||
<ul className="divide-y divide-border">
|
||||
{customRoles.map(r => (
|
||||
<li key={r.id} className="py-3 flex items-center gap-3 flex-wrap">
|
||||
<span className="w-3 h-3 rounded-full shrink-0" style={{ backgroundColor: r.color ?? '#888' }} />
|
||||
<input
|
||||
type="text"
|
||||
defaultValue={r.name}
|
||||
disabled={!isAdmin}
|
||||
onBlur={async e => { const v = e.target.value.trim(); if (!v || v === r.name) return; const res = await updateCustomRole(r.id, { name: v }); if (res.error) { toast.error(res.error); return } setCustomRoles(prev => prev.map(x => x.id === r.id ? { ...x, name: v } : x)); toast.success('Saved') }}
|
||||
className="bg-background border border-border text-foreground font-sans text-sm rounded px-2 py-1 focus:outline-none focus:border-primary"
|
||||
/>
|
||||
<span className="font-mono text-[10px] px-1.5 py-0.5 rounded bg-muted text-muted-foreground">{r.slug}</span>
|
||||
<input
|
||||
type="text"
|
||||
defaultValue={r.description ?? ''}
|
||||
disabled={!isAdmin}
|
||||
placeholder="Description"
|
||||
onBlur={async e => { const v = e.target.value; if (v === (r.description ?? '')) return; const res = await updateCustomRole(r.id, { description: v }); if (res.error) { toast.error(res.error); return } setCustomRoles(prev => prev.map(x => x.id === r.id ? { ...x, description: v } : x)) }}
|
||||
className="flex-1 min-w-[140px] bg-background border border-border text-foreground font-sans text-sm rounded px-2 py-1 focus:outline-none focus:border-primary"
|
||||
/>
|
||||
{isAdmin && (
|
||||
<button
|
||||
onClick={async () => { if (!confirm(`Delete role "${r.name}"?`)) return; const res = await deleteCustomRole(r.id); if (res.error) { toast.error(res.error); return } setCustomRoles(prev => prev.filter(x => x.id !== r.id)); toast.success('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>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { toast } from 'sonner'
|
||||
import { createTier, updateTier, deleteTier } from '@/lib/actions'
|
||||
import { Card } from './card'
|
||||
import type { Tier } from './types'
|
||||
|
||||
export function TiersPanel({ isAdmin, tiers: initial }: { isAdmin: boolean; tiers: Tier[] }) {
|
||||
const [tiers, setTiers] = useState<Tier[]>(initial)
|
||||
const [showNew, setShowNew] = useState(false)
|
||||
const [d, setD] = useState({ slug: '', name: '', dollars: '0', cadence: 'monthly' as Tier['billing_cadence'], description: '' })
|
||||
|
||||
return (
|
||||
<Card
|
||||
title="Membership tiers"
|
||||
blurb="Built-in plus/basic/associate seed every space. Add your own, set prices and cadence. Built-in tiers can be archived but not deleted."
|
||||
action={isAdmin ? <button onClick={() => setShowNew(v => !v)} className="font-mono text-[10px] border border-border px-3 py-1.5 rounded hover:border-primary hover:text-primary transition whitespace-nowrap">{showNew ? 'Cancel' : '+ New tier'}</button> : undefined}
|
||||
>
|
||||
{showNew && (
|
||||
<form
|
||||
onSubmit={async e => {
|
||||
e.preventDefault()
|
||||
const cents = Math.round(parseFloat(d.dollars || '0') * 100)
|
||||
const result = await createTier({ slug: d.slug.trim().toLowerCase(), name: d.name.trim(), description: d.description.trim() || undefined, monthly_price_cents: isNaN(cents) ? 0 : cents, billing_cadence: d.cadence })
|
||||
if ('error' in result && result.error) { toast.error(result.error); return }
|
||||
toast.success('Tier created')
|
||||
setTiers(prev => [...prev, { id: (result as { id: string }).id, slug: d.slug.trim().toLowerCase(), name: d.name.trim(), description: d.description.trim() || null, monthly_price_cents: isNaN(cents) ? 0 : cents, billing_cadence: d.cadence, is_system: false, is_archived: false, sort_order: 100 }])
|
||||
setShowNew(false); setD({ slug: '', name: '', dollars: '0', cadence: 'monthly', description: '' })
|
||||
}}
|
||||
className="mb-4 p-4 border border-border rounded bg-background grid grid-cols-1 md:grid-cols-2 gap-3"
|
||||
>
|
||||
<input type="text" required maxLength={50} value={d.slug} onChange={e => setD({ ...d, slug: e.target.value.toLowerCase().replace(/[^a-z0-9_-]/g, '-') })} placeholder="slug" 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" required maxLength={100} value={d.name} onChange={e => setD({ ...d, name: e.target.value })} placeholder="Display name" 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={d.dollars} onChange={e => setD({ ...d, dollars: e.target.value })} placeholder="Price (USD)" 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={d.cadence} onChange={e => setD({ ...d, cadence: e.target.value as Tier['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" maxLength={2000} value={d.description} onChange={e => setD({ ...d, description: e.target.value })} placeholder="Description (optional)" 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 flex-wrap">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<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 res = await updateTier(t.id, { monthly_price_cents: cents }); if (res.error) { toast.error(res.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 () => { const res = await updateTier(t.id, { is_archived: !t.is_archived }); if (res.error) { toast.error(res.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>
|
||||
) : (
|
||||
<button onClick={async () => { if (!confirm(`Delete tier "${t.name}"?`)) return; const res = await deleteTier(t.id); if (res.error) { toast.error(res.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>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,65 @@
|
||||
// Shared shapes for the Customize hub panels. The DB tables are loosely typed
|
||||
// in queries; these are the props contracts between the page and the panels.
|
||||
|
||||
export interface RoleLabelRow {
|
||||
role: string
|
||||
display_name: string | null
|
||||
description: string | null
|
||||
color: string | null
|
||||
}
|
||||
|
||||
export interface CustomRole {
|
||||
id: string
|
||||
slug: string
|
||||
name: string
|
||||
description: string | null
|
||||
color: string | null
|
||||
sort_order: number
|
||||
}
|
||||
|
||||
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
|
||||
}
|
||||
|
||||
export type OnboardingStepType = 'welcome' | 'code_of_conduct' | 'profile' | 'payment' | 'content'
|
||||
|
||||
export interface Step {
|
||||
id: string
|
||||
step_key: string
|
||||
step_type: OnboardingStepType
|
||||
title: string
|
||||
body: string | null
|
||||
config: Record<string, unknown>
|
||||
is_enabled: boolean
|
||||
is_required: boolean
|
||||
is_system: boolean
|
||||
sort_order: number
|
||||
}
|
||||
|
||||
export interface Area {
|
||||
id: string
|
||||
code: string
|
||||
name: string
|
||||
icon: string | null
|
||||
sort_order: number
|
||||
is_archived: boolean
|
||||
}
|
||||
Reference in New Issue
Block a user