feat: governance kernel, deployment hardening, local-dev stack
Adds proposals + proposal_votes + policies + incidents + incident_updates
tables with full RLS, async voting flow, dismissal-appeal pathway,
versioned policies with provenance, and an anonymous-incident token mode.
Adds per-space configurable areas, financial visibility settings, member
self-profile + COI disclosure, and a mission statement that renders in
the app footer.
Reorganises lib/actions.ts into per-domain files (tasks, projects,
members, payments, contacts, knowledge-base, secrets, area-leads,
settings, imports, proposals, incidents, policies, areas) plus a barrel.
Adds lib/permissions.ts and lib/auth-helpers.ts so action bodies stop
duplicating the user-to-member-to-role check. Wires every action that has
a Zod schema; introduces a flexibleDateTime preprocessor so HTML date
pickers no longer hit "Invalid datetime".
Hardens RLS: drops NOT NULL on space_members.user_id for offline members,
adds a privilege-escalation trigger that blocks self-edits to role / tier
/ status / approved / has_card_access / space_id, closes four
cross-tenant holes in the governance kernel, and adds a partial unique
index so two admins cannot concurrently activate two drafts of the same
policy slug.
Ships every deployment artifact: Dockerfile, docker-compose,
.do/app.yaml, .env.example, /api/health, plus a managed-Supabase guide
(docs/DEPLOYMENT.md), an end-to-end self-hosted Droplet guide
(docs/DEPLOY_DO_SELFHOSTED.md), and a Supabase-CLI local-dev quickstart
(docs/LOCAL_DEV.md). Replaces middleware.ts with proxy.ts for Next.js 16.
Adds scripts/schema.sql as the canonical idempotent full deploy plus
fourteen numbered incremental migrations.
Adds scripts/seed.sql so a fresh local DB renders something instead of
empty pages: a demo space, five members across all roles, a v1 code of
conduct, three proposals in different states with seven votes already
cast, an open incident, a project, three tasks, a KB entry, and matching
activity-log rows.
Replaces v0-generated test scaffolding with 266 real tests across
__tests__/{actions,auth-helpers,components,governance,permissions,
security,utils,validations}.test.ts. Adds react-markdown + remark-gfm
for proposal / incident / policy body rendering. Deletes four dead v0
fix-* scripts, the unused components/app-shell.tsx, and the duplicate
app/auth/login/page.tsx.
Routes (31 total): /api/health, /api/paypal/sync, /auth/callback, /,
/login, /signup, /signup/confirm, /dashboard, /tasks, /projects,
/members, /payments, /financials, /contacts, /ops, /ops/[id], /ops/new,
/proposals, /proposals/[id], /proposals/new, /incidents, /incidents/[id],
/incidents/new, /policies, /policies/[slug], /policies/new, /profile,
/recruitment, /settings, /comms, /import.
Full pass-by-pass history is in docs/HANDOFF.md; the roadmap is in
docs/GOVERNANCE_FEATURES.md.
This commit is contained in:
Moheeb Zara
@@ -26,7 +26,7 @@ export default async function DashboardPage() {
|
||||
|
||||
const { data: member } = await supabase
|
||||
.from('space_members')
|
||||
.select('space_id, display_name, role')
|
||||
.select('id, space_id, display_name, role')
|
||||
.eq('user_id', user.id)
|
||||
.in('status', ['current', 'unverified', 'late'])
|
||||
.maybeSingle()
|
||||
@@ -34,6 +34,8 @@ export default async function DashboardPage() {
|
||||
if (!member?.space_id) redirect('/signup')
|
||||
|
||||
const spaceId = member.space_id
|
||||
const memberId = (member as { id: string }).id
|
||||
const isAdminOrBoard = member.role === 'admin' || member.role === 'board'
|
||||
|
||||
const [
|
||||
{ count: activeMembers },
|
||||
@@ -42,15 +44,47 @@ export default async function DashboardPage() {
|
||||
{ data: tasks },
|
||||
{ data: projects },
|
||||
{ data: activity },
|
||||
{ data: openProposalsRaw },
|
||||
{ data: myVotesRaw },
|
||||
{ data: pendingIncidentsRaw },
|
||||
] = await Promise.all([
|
||||
supabase.from('space_members').select('*', { count: 'exact', head: true }).eq('space_id', spaceId).eq('status', 'current'),
|
||||
supabase.from('tasks').select('*', { count: 'exact', head: true }).eq('space_id', spaceId).in('status', ['open', 'claimed', 'in_progress']),
|
||||
supabase.from('payments').select('*', { count: 'exact', head: true }).eq('space_id', spaceId).eq('link_status', 'unlinked'),
|
||||
supabase.from('tasks').select('*').eq('space_id', spaceId).neq('status', 'done').order('due_date', { ascending: true, nullsFirst: false }).limit(5),
|
||||
supabase.from('tasks').select('*').eq('space_id', spaceId).in('status', ['open', 'claimed', 'in_progress', 'overdue', 'due_today', 'blocked']).order('due_date', { ascending: true, nullsFirst: false }).limit(5),
|
||||
supabase.from('projects').select('*').eq('space_id', spaceId).in('status', ['in_progress', 'blocked', 'review']).limit(3),
|
||||
supabase.from('activity_log').select('*').eq('space_id', spaceId).order('created_at', { ascending: false }).limit(6),
|
||||
supabase.from('proposals').select('*').eq('space_id', spaceId).eq('status', 'open').order('voting_closes_at', { ascending: true, nullsFirst: false }).limit(10),
|
||||
supabase.from('proposal_votes').select('proposal_id').eq('member_id', memberId),
|
||||
isAdminOrBoard
|
||||
? supabase.from('incidents').select('*').eq('space_id', spaceId).in('status', ['received', 'under_review']).order('created_at', { ascending: false }).limit(5)
|
||||
: Promise.resolve({ data: [] as unknown[] }),
|
||||
])
|
||||
|
||||
const votedProposalIds = new Set(
|
||||
((myVotesRaw ?? []) as Array<{ proposal_id: string }>).map(v => v.proposal_id),
|
||||
)
|
||||
type ProposalSummary = {
|
||||
id: string
|
||||
title: string
|
||||
voting_closes_at: string | null
|
||||
proposal_type: string
|
||||
quorum_required: number
|
||||
total_voters: number
|
||||
quorum_met: boolean | null
|
||||
}
|
||||
const pendingProposals = ((openProposalsRaw ?? []) as unknown as ProposalSummary[])
|
||||
.filter(p => !votedProposalIds.has(p.id))
|
||||
.slice(0, 5)
|
||||
const pendingIncidents = (pendingIncidentsRaw ?? []) as unknown as Array<{
|
||||
id: string
|
||||
title: string
|
||||
severity: string
|
||||
status: string
|
||||
sla_response_by: string | null
|
||||
created_at: string
|
||||
}>
|
||||
|
||||
const overdueTasks = (tasks ?? []).filter((t) => t.due_date && new Date(t.due_date) < new Date())
|
||||
|
||||
const stats = [
|
||||
@@ -84,6 +118,70 @@ export default async function DashboardPage() {
|
||||
))}
|
||||
</div>
|
||||
|
||||
{(pendingProposals.length > 0 || pendingIncidents.length > 0) && (
|
||||
<div className="grid md:grid-cols-2 gap-4">
|
||||
{pendingProposals.length > 0 && (
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<p className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase">Open proposals awaiting your vote</p>
|
||||
<Link href="/proposals" className="font-sans text-xs text-primary hover:underline">All</Link>
|
||||
</div>
|
||||
<div className="bg-card rounded border border-border divide-y divide-border">
|
||||
{pendingProposals.map(p => {
|
||||
const totalCounted = p.total_voters
|
||||
const quorumPct = p.quorum_required > 0
|
||||
? Math.min(100, Math.round((totalCounted / p.quorum_required) * 100))
|
||||
: 0
|
||||
return (
|
||||
<Link key={p.id} href={`/proposals/${p.id}`} className="block px-4 py-3 hover:bg-muted transition">
|
||||
<p className="font-sans text-sm text-foreground truncate">{p.title}</p>
|
||||
<p className="font-mono text-[10px] text-muted-foreground mt-0.5">
|
||||
{p.proposal_type.replace(/_/g, ' ')}
|
||||
{p.voting_closes_at ? ` · closes ${new Date(p.voting_closes_at).toLocaleString('en-US', { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })}` : ''}
|
||||
{' · '}
|
||||
<span className={p.quorum_met ? 'text-primary' : 'text-orange-600'}>
|
||||
quorum {quorumPct}%
|
||||
</span>
|
||||
</p>
|
||||
</Link>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isAdminOrBoard && pendingIncidents.length > 0 && (
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<p className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase">Incidents needing response</p>
|
||||
<Link href="/incidents" className="font-sans text-xs text-primary hover:underline">All</Link>
|
||||
</div>
|
||||
<div className="bg-card rounded border border-border divide-y divide-border">
|
||||
{pendingIncidents.map(i => {
|
||||
const overdueSla = i.sla_response_by && new Date(i.sla_response_by) < new Date()
|
||||
return (
|
||||
<Link key={i.id} href={`/incidents/${i.id}`} className="block px-4 py-3 hover:bg-muted transition">
|
||||
<p className="font-sans text-sm text-foreground truncate">{i.title}</p>
|
||||
<p className="font-mono text-[10px] text-muted-foreground mt-0.5">
|
||||
{i.severity} · {i.status.replace(/_/g, ' ')}
|
||||
{i.sla_response_by && (
|
||||
<>
|
||||
{' · '}
|
||||
<span className={overdueSla ? 'text-red-600' : 'text-muted-foreground'}>
|
||||
respond by {new Date(i.sla_response_by).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</p>
|
||||
</Link>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid lg:grid-cols-[1fr_280px] gap-6">
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
|
||||
@@ -0,0 +1,194 @@
|
||||
import { redirect } from 'next/navigation'
|
||||
import Link from 'next/link'
|
||||
import { createClient } from '@/lib/supabase/server'
|
||||
import type { FinancialVisibility, Payment, Space } from '@/lib/types'
|
||||
|
||||
export const dynamic = 'force-dynamic'
|
||||
|
||||
const DOLLAR = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' })
|
||||
|
||||
function isVisible(viz: FinancialVisibility, role: string | null): boolean {
|
||||
if (viz === 'all_members_visible') return true
|
||||
if (viz === 'board_visible') return role === 'admin' || role === 'board' || role === 'treasurer'
|
||||
// treasurer_only
|
||||
return role === 'admin' || role === 'board' || role === 'treasurer'
|
||||
}
|
||||
|
||||
export default async function FinancialsPage() {
|
||||
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'])
|
||||
.maybeSingle()
|
||||
if (!member?.space_id) redirect('/signup')
|
||||
|
||||
const { data: spaceRaw } = await supabase
|
||||
.from('spaces')
|
||||
.select('id, name, financial_visibility')
|
||||
.eq('id', member.space_id)
|
||||
.maybeSingle()
|
||||
const space = spaceRaw as unknown as Pick<Space, 'id' | 'name'> & { financial_visibility: FinancialVisibility } | null
|
||||
|
||||
if (!space) {
|
||||
return <PageShell title="Financials"><p className="font-sans text-sm">Space not found.</p></PageShell>
|
||||
}
|
||||
|
||||
if (!isVisible(space.financial_visibility, member.role)) {
|
||||
return (
|
||||
<PageShell title="Financials">
|
||||
<div className="bg-card rounded border border-border p-6 text-center">
|
||||
<p className="font-sans text-sm text-foreground mb-2">Financial data is not visible to your role.</p>
|
||||
<p className="font-mono text-[10px] text-muted-foreground">
|
||||
Visibility is currently set to <strong>{space.financial_visibility.replace(/_/g, ' ')}</strong>.
|
||||
Ask an admin to change it from Settings if your space wants broader transparency.
|
||||
</p>
|
||||
</div>
|
||||
</PageShell>
|
||||
)
|
||||
}
|
||||
|
||||
const { data: paymentsRaw } = await supabase
|
||||
.from('payments')
|
||||
.select('*')
|
||||
.eq('space_id', member.space_id)
|
||||
.order('transaction_date', { ascending: false })
|
||||
|
||||
const payments = (paymentsRaw ?? []) as unknown as Payment[]
|
||||
|
||||
const now = new Date()
|
||||
const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1)
|
||||
const startOfYear = new Date(now.getFullYear(), 0, 1)
|
||||
|
||||
let lifetime = 0
|
||||
let thisYear = 0
|
||||
let thisMonth = 0
|
||||
let linked = 0
|
||||
let unlinked = 0
|
||||
const byPlatform: Record<string, number> = {}
|
||||
const byMonth: Record<string, number> = {}
|
||||
|
||||
for (const p of payments) {
|
||||
const amount = Number(p.amount ?? 0)
|
||||
lifetime += amount
|
||||
const tx = p.transaction_date ? new Date(p.transaction_date) : null
|
||||
if (tx) {
|
||||
if (tx >= startOfYear) thisYear += amount
|
||||
if (tx >= startOfMonth) thisMonth += amount
|
||||
const key = `${tx.getFullYear()}-${String(tx.getMonth() + 1).padStart(2, '0')}`
|
||||
byMonth[key] = (byMonth[key] ?? 0) + amount
|
||||
}
|
||||
if (p.link_status === 'linked') linked++
|
||||
else unlinked++
|
||||
const platform = String(p.platform ?? 'unknown')
|
||||
byPlatform[platform] = (byPlatform[platform] ?? 0) + amount
|
||||
}
|
||||
|
||||
const monthlyRows = Object.entries(byMonth)
|
||||
.sort(([a], [b]) => b.localeCompare(a))
|
||||
.slice(0, 12)
|
||||
|
||||
const platformRows = Object.entries(byPlatform).sort(([, a], [, b]) => b - a)
|
||||
const maxPlatform = Math.max(1, ...platformRows.map(([, v]) => v))
|
||||
|
||||
return (
|
||||
<PageShell title={`Financials — ${space.name}`}>
|
||||
<p className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase mb-2">
|
||||
Visibility: {space.financial_visibility.replace(/_/g, ' ')}
|
||||
{member.role === 'admin' && (
|
||||
<>
|
||||
{' · '}
|
||||
<Link href="/settings" className="text-primary hover:underline normal-case tracking-normal">
|
||||
change in Settings
|
||||
</Link>
|
||||
</>
|
||||
)}
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-3 md:gap-4">
|
||||
<StatCard label="This Month" value={DOLLAR.format(thisMonth)} sub="received" />
|
||||
<StatCard label="This Year" value={DOLLAR.format(thisYear)} sub={`${now.getFullYear()}`} />
|
||||
<StatCard label="Lifetime" value={DOLLAR.format(lifetime)} sub="all payments" />
|
||||
<StatCard
|
||||
label="Reconciliation"
|
||||
value={`${linked}/${linked + unlinked}`}
|
||||
sub={`${unlinked} unlinked`}
|
||||
warn={unlinked > 0}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<section className="bg-card rounded border border-border p-5">
|
||||
<p className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase mb-3">
|
||||
By platform
|
||||
</p>
|
||||
{platformRows.length === 0 ? (
|
||||
<p className="font-sans text-sm text-muted-foreground">No payments recorded yet.</p>
|
||||
) : (
|
||||
<ul className="space-y-2">
|
||||
{platformRows.map(([platform, total]) => {
|
||||
const pct = Math.round((total / maxPlatform) * 100)
|
||||
return (
|
||||
<li key={platform}>
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<span className="font-sans text-sm capitalize text-foreground">{platform}</span>
|
||||
<span className="font-mono text-xs text-muted-foreground">{DOLLAR.format(total)}</span>
|
||||
</div>
|
||||
<div className="h-1.5 bg-border rounded-full overflow-hidden">
|
||||
<div className="h-full bg-primary rounded-full" style={{ width: `${pct}%` }} />
|
||||
</div>
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
)}
|
||||
</section>
|
||||
|
||||
<section className="bg-card rounded border border-border p-5">
|
||||
<p className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase mb-3">
|
||||
Last 12 months
|
||||
</p>
|
||||
{monthlyRows.length === 0 ? (
|
||||
<p className="font-sans text-sm text-muted-foreground">No monthly breakdown yet.</p>
|
||||
) : (
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-2">
|
||||
{monthlyRows.map(([month, total]) => {
|
||||
const [y, m] = month.split('-')
|
||||
const label = new Date(Number(y), Number(m) - 1, 1).toLocaleDateString('en-US', { year: 'numeric', month: 'short' })
|
||||
return (
|
||||
<div key={month} className="flex items-center justify-between bg-background rounded border border-border px-3 py-2">
|
||||
<span className="font-sans text-sm text-foreground">{label}</span>
|
||||
<span className="font-mono text-xs text-muted-foreground">{DOLLAR.format(total)}</span>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</PageShell>
|
||||
)
|
||||
}
|
||||
|
||||
function PageShell({ title, children }: { title: string; children: React.ReactNode }) {
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
<div className="bg-sidebar px-4 md:px-6 py-3">
|
||||
<h1 className="text-white font-sans text-lg font-semibold">{title}</h1>
|
||||
</div>
|
||||
<div className="p-4 md:p-6 space-y-6 max-w-4xl">{children}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function StatCard({ label, value, sub, warn }: { label: string; value: string; sub: string; warn?: boolean }) {
|
||||
return (
|
||||
<div className="bg-card rounded border border-border p-4 md:p-5">
|
||||
<p className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase mb-2">{label}</p>
|
||||
<p className={`text-2xl font-sans font-bold ${warn ? 'text-orange-500' : 'text-primary'}`}>{value}</p>
|
||||
<p className="font-sans text-xs text-muted-foreground mt-1">{sub}</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,190 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useTransition } from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import Link from 'next/link'
|
||||
import {
|
||||
updateIncidentStatus,
|
||||
addIncidentUpdate,
|
||||
appealIncident,
|
||||
} from '@/lib/actions'
|
||||
import type { IncidentStatus } from '@/lib/types'
|
||||
import { incidentStatuses, incidentUpdateVisibilities } from '@/lib/validations'
|
||||
|
||||
type Props = {
|
||||
incidentId: string
|
||||
status: IncidentStatus
|
||||
isAdminOrBoard: boolean
|
||||
isReporter: boolean
|
||||
hasAppeal: boolean
|
||||
appealProposalId: string | null
|
||||
}
|
||||
|
||||
export function IncidentActions({
|
||||
incidentId,
|
||||
status,
|
||||
isAdminOrBoard,
|
||||
isReporter,
|
||||
hasAppeal,
|
||||
appealProposalId,
|
||||
}: Props) {
|
||||
const router = useRouter()
|
||||
const [isPending, startTransition] = useTransition()
|
||||
const [error, setError] = useState('')
|
||||
|
||||
// Add-update form
|
||||
const [updateBody, setUpdateBody] = useState('')
|
||||
const [updateVisibility, setUpdateVisibility] = useState<string>('all_parties')
|
||||
|
||||
// Status transition form (admin/board)
|
||||
const [newStatus, setNewStatus] = useState<IncidentStatus>(status)
|
||||
const [disposition, setDisposition] = useState('')
|
||||
|
||||
// Appeal form (reporter)
|
||||
const [appealTitle, setAppealTitle] = useState('')
|
||||
const [appealBody, setAppealBody] = useState('')
|
||||
|
||||
function run<T>(fn: () => Promise<T>, after?: () => void) {
|
||||
setError('')
|
||||
startTransition(async () => {
|
||||
const r = (await fn()) as unknown as { error?: string }
|
||||
if (r && r.error) setError(r.error)
|
||||
else after?.()
|
||||
router.refresh()
|
||||
})
|
||||
}
|
||||
|
||||
const canAppeal = isReporter && status === 'decided' && !hasAppeal
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
{isAdminOrBoard && (
|
||||
<div className="bg-card rounded border border-border p-5">
|
||||
<p className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase mb-3">
|
||||
Update status
|
||||
</p>
|
||||
<div className="space-y-3">
|
||||
<select
|
||||
value={newStatus}
|
||||
onChange={e => setNewStatus(e.target.value as IncidentStatus)}
|
||||
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"
|
||||
>
|
||||
{incidentStatuses.map(s => (
|
||||
<option key={s} value={s}>{s.replace(/_/g, ' ')}</option>
|
||||
))}
|
||||
</select>
|
||||
{(newStatus === 'decided' || newStatus === 'closed') && (
|
||||
<textarea
|
||||
value={disposition}
|
||||
onChange={e => setDisposition(e.target.value)}
|
||||
rows={4}
|
||||
maxLength={20000}
|
||||
placeholder="Disposition / reasoning (visible to reporter)"
|
||||
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"
|
||||
/>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
disabled={isPending || newStatus === status}
|
||||
onClick={() =>
|
||||
run(() => updateIncidentStatus(incidentId, newStatus, disposition || null), () => setDisposition(''))
|
||||
}
|
||||
className="bg-primary text-white font-sans text-sm font-medium px-4 py-2 rounded hover:bg-primary/90 transition disabled:opacity-50"
|
||||
>
|
||||
{isPending ? 'Saving...' : 'Apply status'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="bg-card rounded border border-border p-5">
|
||||
<p className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase mb-3">
|
||||
Post an update
|
||||
</p>
|
||||
<div className="space-y-3">
|
||||
<textarea
|
||||
value={updateBody}
|
||||
onChange={e => setUpdateBody(e.target.value)}
|
||||
rows={4}
|
||||
maxLength={20000}
|
||||
placeholder="Add information, ask a question, share a decision."
|
||||
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"
|
||||
/>
|
||||
{isAdminOrBoard && (
|
||||
<select
|
||||
value={updateVisibility}
|
||||
onChange={e => setUpdateVisibility(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"
|
||||
>
|
||||
{incidentUpdateVisibilities.map(v => (
|
||||
<option key={v} value={v}>{v.replace(/_/g, ' ')}</option>
|
||||
))}
|
||||
</select>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
disabled={isPending || !updateBody.trim()}
|
||||
onClick={() =>
|
||||
run(
|
||||
() => addIncidentUpdate({ incidentId, body: updateBody, visibility: updateVisibility }),
|
||||
() => setUpdateBody(''),
|
||||
)
|
||||
}
|
||||
className="bg-primary text-white font-sans text-sm font-medium px-4 py-2 rounded hover:bg-primary/90 transition disabled:opacity-50"
|
||||
>
|
||||
{isPending ? 'Posting...' : 'Post update'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{canAppeal && (
|
||||
<div className="bg-card rounded border border-border p-5">
|
||||
<p className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase mb-3">
|
||||
Request membership appeal
|
||||
</p>
|
||||
<p className="font-sans text-xs text-muted-foreground mb-3">
|
||||
Creates a draft proposal that members can vote on. You will still need to open it
|
||||
for voting; that gives you time to refine the language.
|
||||
</p>
|
||||
<div className="space-y-3">
|
||||
<input
|
||||
type="text"
|
||||
value={appealTitle}
|
||||
onChange={e => setAppealTitle(e.target.value)}
|
||||
maxLength={200}
|
||||
placeholder="Appeal of dismissed complaint"
|
||||
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"
|
||||
/>
|
||||
<textarea
|
||||
value={appealBody}
|
||||
onChange={e => setAppealBody(e.target.value)}
|
||||
rows={4}
|
||||
maxLength={20000}
|
||||
placeholder="Why the membership should overturn the board's decision."
|
||||
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"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
disabled={isPending || !appealTitle.trim()}
|
||||
onClick={() => run(() => appealIncident({ incidentId, title: appealTitle, body: appealBody }))}
|
||||
className="bg-primary text-white font-sans text-sm font-medium px-4 py-2 rounded hover:bg-primary/90 transition disabled:opacity-50"
|
||||
>
|
||||
{isPending ? 'Filing appeal...' : 'File appeal'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{hasAppeal && appealProposalId && (
|
||||
<div className="bg-card rounded border border-border p-5">
|
||||
<p className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase mb-2">Appeal</p>
|
||||
<Link href={`/proposals/${appealProposalId}`} className="font-sans text-sm text-primary hover:underline">
|
||||
View the appeal proposal →
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{error && <p className="font-mono text-xs text-red-500">{error}</p>}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,123 @@
|
||||
import Link from 'next/link'
|
||||
import { redirect, notFound } from 'next/navigation'
|
||||
import { createClient } from '@/lib/supabase/server'
|
||||
import type { Incident, IncidentUpdateRow } from '@/lib/types'
|
||||
import { IncidentActions } from './incident-actions'
|
||||
import { MarkdownBody } from '@/components/markdown'
|
||||
|
||||
export const dynamic = 'force-dynamic'
|
||||
|
||||
export default async function IncidentDetailPage({ params }: { params: Promise<{ id: string }> }) {
|
||||
const { id } = await params
|
||||
const supabase = await createClient()
|
||||
const { data: { user } } = await supabase.auth.getUser()
|
||||
if (!user) redirect('/login')
|
||||
|
||||
const { data: member } = await supabase
|
||||
.from('space_members')
|
||||
.select('id, space_id, role, display_name')
|
||||
.eq('user_id', user.id)
|
||||
.in('status', ['current', 'unverified', 'late'])
|
||||
.maybeSingle()
|
||||
if (!member?.space_id) redirect('/signup')
|
||||
|
||||
const { data: incidentRaw } = await supabase
|
||||
.from('incidents')
|
||||
.select('*')
|
||||
.eq('id', id)
|
||||
.eq('space_id', member.space_id)
|
||||
.maybeSingle()
|
||||
if (!incidentRaw) notFound()
|
||||
|
||||
const incident = incidentRaw as unknown as Incident
|
||||
const isAdminOrBoard = member.role === 'admin' || member.role === 'board'
|
||||
const isReporter = incident.reporter_id === member.id
|
||||
|
||||
const { data: updatesRaw } = await supabase
|
||||
.from('incident_updates')
|
||||
.select('*')
|
||||
.eq('incident_id', incident.id)
|
||||
.order('created_at', { ascending: true })
|
||||
|
||||
const updates = (updatesRaw ?? []) as unknown as IncidentUpdateRow[]
|
||||
|
||||
const decisionMakers = incident.decision_maker_ids.length
|
||||
? await supabase
|
||||
.from('space_members')
|
||||
.select('id, display_name')
|
||||
.in('id', incident.decision_maker_ids)
|
||||
: { data: [] as Array<{ id: string; display_name: string | null }> }
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
<div className="bg-sidebar px-4 md:px-6 py-3 flex items-center gap-3">
|
||||
<Link href="/incidents" className="text-white/70 hover:text-white font-sans text-sm">
|
||||
← Incidents
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="p-4 md:p-6 max-w-3xl space-y-6">
|
||||
<header className="bg-card rounded border border-border p-5">
|
||||
<h1 className="font-sans text-xl font-semibold text-foreground mb-2">{incident.title}</h1>
|
||||
<p className="font-mono text-[10px] text-muted-foreground mb-4">
|
||||
{incident.category} · {incident.severity} · status: {incident.status.replace(/_/g, ' ')}
|
||||
{incident.is_anonymous ? ' · filed anonymously' : ''}
|
||||
{' · '}
|
||||
filed {new Date(incident.created_at).toLocaleString()}
|
||||
</p>
|
||||
<MarkdownBody content={incident.body} />
|
||||
</header>
|
||||
|
||||
{incident.disposition && (
|
||||
<section className="bg-card rounded border border-border p-5">
|
||||
<p className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase mb-3">
|
||||
Disposition
|
||||
</p>
|
||||
<MarkdownBody content={incident.disposition} />
|
||||
{decisionMakers.data && decisionMakers.data.length > 0 && (
|
||||
<p className="font-mono text-[10px] text-muted-foreground mt-3">
|
||||
Decision: {decisionMakers.data.map(m => m.display_name ?? 'Unknown').join(', ')}
|
||||
{incident.decided_at ? ` · ${new Date(incident.decided_at).toLocaleString()}` : ''}
|
||||
</p>
|
||||
)}
|
||||
</section>
|
||||
)}
|
||||
|
||||
<section className="bg-card rounded border border-border p-5">
|
||||
<p className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase mb-3">
|
||||
Updates ({updates.length})
|
||||
</p>
|
||||
{updates.length === 0 ? (
|
||||
<p className="font-sans text-sm text-muted-foreground">No updates posted yet.</p>
|
||||
) : (
|
||||
<ul className="divide-y divide-border">
|
||||
{updates.map(u => (
|
||||
<li key={u.id} className="py-3">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<span className="font-sans text-sm font-medium text-foreground">{u.author_name ?? 'Unknown'}</span>
|
||||
<span className="font-mono text-[10px] text-muted-foreground">
|
||||
{u.visibility.replace(/_/g, ' ')}
|
||||
</span>
|
||||
<span className="font-mono text-[10px] text-muted-foreground/60 ml-auto">
|
||||
{new Date(u.created_at).toLocaleString()}
|
||||
</span>
|
||||
</div>
|
||||
<MarkdownBody content={u.body} />
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</section>
|
||||
|
||||
<IncidentActions
|
||||
incidentId={incident.id}
|
||||
status={incident.status}
|
||||
isAdminOrBoard={isAdminOrBoard}
|
||||
isReporter={isReporter}
|
||||
hasAppeal={incident.appeal_proposal_id !== null}
|
||||
appealProposalId={incident.appeal_proposal_id}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,199 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import Link from 'next/link'
|
||||
import { fileIncident } from '@/lib/actions'
|
||||
import { incidentSeverities } from '@/lib/validations'
|
||||
|
||||
type Member = { id: string; display_name: string | null }
|
||||
|
||||
export function IncidentForm({ members }: { members: Member[] }) {
|
||||
const router = useRouter()
|
||||
const [title, setTitle] = useState('')
|
||||
const [body, setBody] = useState('')
|
||||
const [category, setCategory] = useState('general')
|
||||
const [severity, setSeverity] = useState<string>('medium')
|
||||
const [subjects, setSubjects] = useState<string[]>([])
|
||||
const [isAnonymous, setIsAnonymous] = useState(false)
|
||||
const [error, setError] = useState('')
|
||||
const [submitting, setSubmitting] = useState(false)
|
||||
const [token, setToken] = useState<string | null>(null)
|
||||
|
||||
function toggleSubject(id: string) {
|
||||
setSubjects(prev => (prev.includes(id) ? prev.filter(x => x !== id) : [...prev, id]))
|
||||
}
|
||||
|
||||
async function handleSubmit(e: React.FormEvent) {
|
||||
e.preventDefault()
|
||||
setSubmitting(true)
|
||||
setError('')
|
||||
|
||||
const result = await fileIncident({
|
||||
title,
|
||||
body,
|
||||
category,
|
||||
severity,
|
||||
subjects,
|
||||
is_anonymous: isAnonymous,
|
||||
})
|
||||
|
||||
if ('error' in result && result.error) {
|
||||
setError(result.error)
|
||||
setSubmitting(false)
|
||||
return
|
||||
}
|
||||
|
||||
if (isAnonymous && 'token' in result && result.token) {
|
||||
setToken(result.token as string)
|
||||
setSubmitting(false)
|
||||
return
|
||||
}
|
||||
|
||||
if ('data' in result && result.data) {
|
||||
router.push(`/incidents/${(result.data as { id: string }).id}`)
|
||||
} else {
|
||||
router.push('/incidents')
|
||||
}
|
||||
}
|
||||
|
||||
if (token) {
|
||||
return (
|
||||
<div className="bg-card rounded border border-border p-5 space-y-3">
|
||||
<p className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase">Report filed anonymously</p>
|
||||
<p className="font-sans text-sm text-foreground">
|
||||
Save this tracking token. It is the only way to look the report up later. We never email
|
||||
or display it elsewhere.
|
||||
</p>
|
||||
<pre className="bg-background border border-border rounded p-3 font-mono text-sm break-all">{token}</pre>
|
||||
<Link
|
||||
href="/incidents"
|
||||
className="inline-block bg-primary text-white font-sans text-sm font-medium px-4 py-2 rounded hover:bg-primary/90 transition"
|
||||
>
|
||||
Done
|
||||
</Link>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="space-y-5 bg-card rounded border border-border p-5">
|
||||
<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
|
||||
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"
|
||||
placeholder="Brief summary"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase block mb-1">
|
||||
What happened
|
||||
</label>
|
||||
<textarea
|
||||
value={body}
|
||||
onChange={e => setBody(e.target.value)}
|
||||
rows={8}
|
||||
maxLength={20000}
|
||||
required
|
||||
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"
|
||||
placeholder="When, where, who was present, what was said or done."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase block mb-1">
|
||||
Category
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={category}
|
||||
onChange={e => setCategory(e.target.value)}
|
||||
maxLength={50}
|
||||
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"
|
||||
placeholder="general, safety, harassment, theft..."
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase block mb-1">
|
||||
Severity
|
||||
</label>
|
||||
<select
|
||||
value={severity}
|
||||
onChange={e => setSeverity(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"
|
||||
>
|
||||
{incidentSeverities.map(s => (
|
||||
<option key={s} value={s}>{s}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase block mb-2">
|
||||
Subjects (optional)
|
||||
</label>
|
||||
<div className="bg-background border border-border rounded p-3 max-h-48 overflow-y-auto">
|
||||
{members.length === 0 ? (
|
||||
<p className="font-sans text-xs text-muted-foreground">No other members in the space.</p>
|
||||
) : (
|
||||
members.map(m => (
|
||||
<label key={m.id} className="flex items-center gap-2 py-1 text-sm">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={subjects.includes(m.id)}
|
||||
onChange={() => toggleSubject(m.id)}
|
||||
className="rounded border-border"
|
||||
/>
|
||||
<span className="font-sans">{m.display_name ?? 'Unnamed'}</span>
|
||||
</label>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="flex items-start gap-2 text-sm">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={isAnonymous}
|
||||
onChange={e => setIsAnonymous(e.target.checked)}
|
||||
className="rounded border-border mt-0.5"
|
||||
/>
|
||||
<span className="font-sans">
|
||||
File anonymously. Your name is omitted from the record. You will get a tracking
|
||||
token in exchange. Be aware: an admin with direct database access can still see
|
||||
the row exists; this is not cryptographic anonymity.
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{error && <p className="font-mono text-xs text-red-500">{error}</p>}
|
||||
|
||||
<div className="flex items-center justify-end gap-3">
|
||||
<Link
|
||||
href="/incidents"
|
||||
className="font-sans text-sm text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
Cancel
|
||||
</Link>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={submitting || !title.trim() || !body.trim()}
|
||||
className="bg-primary text-white font-sans text-sm font-medium px-4 py-2 rounded hover:bg-primary/90 transition disabled:opacity-50"
|
||||
>
|
||||
{submitting ? 'Submitting...' : 'File report'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
import { redirect } from 'next/navigation'
|
||||
import { createClient } from '@/lib/supabase/server'
|
||||
import { IncidentForm } from './incident-form'
|
||||
|
||||
export const dynamic = 'force-dynamic'
|
||||
|
||||
export default async function NewIncidentPage() {
|
||||
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')
|
||||
.eq('user_id', user.id)
|
||||
.in('status', ['current', 'unverified', 'late'])
|
||||
.maybeSingle()
|
||||
if (!member?.space_id) redirect('/signup')
|
||||
|
||||
// Pull members in the same space so the reporter can name subjects.
|
||||
const { data: members } = await supabase
|
||||
.from('space_members')
|
||||
.select('id, display_name')
|
||||
.eq('space_id', member.space_id)
|
||||
.order('display_name')
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
<div className="bg-sidebar px-4 md:px-6 py-3">
|
||||
<h1 className="text-white font-sans text-lg font-semibold">File a report</h1>
|
||||
</div>
|
||||
<div className="p-4 md:p-6 max-w-2xl">
|
||||
<IncidentForm members={(members ?? []) as Array<{ id: string; display_name: string | null }>} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,108 @@
|
||||
import Link from 'next/link'
|
||||
import { redirect } from 'next/navigation'
|
||||
import { createClient } from '@/lib/supabase/server'
|
||||
import type { Incident, IncidentStatus } from '@/lib/types'
|
||||
|
||||
export const dynamic = 'force-dynamic'
|
||||
|
||||
const STATUS_STYLE: Record<IncidentStatus, string> = {
|
||||
received: 'text-orange-600 bg-orange-50',
|
||||
under_review: 'text-blue-600 bg-blue-50',
|
||||
decided: 'text-primary bg-primary/10',
|
||||
appealed: 'text-purple-600 bg-purple-50',
|
||||
closed: 'text-muted-foreground bg-muted',
|
||||
}
|
||||
|
||||
export default async function IncidentsPage() {
|
||||
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'])
|
||||
.maybeSingle()
|
||||
if (!member?.space_id) redirect('/signup')
|
||||
|
||||
const isAdminOrBoard = member.role === 'admin' || member.role === 'board'
|
||||
|
||||
// RLS filters to admin/board view or reporter view automatically.
|
||||
const { data: incidents } = await supabase
|
||||
.from('incidents')
|
||||
.select('*')
|
||||
.eq('space_id', member.space_id)
|
||||
.order('created_at', { ascending: false })
|
||||
|
||||
const list = (incidents ?? []) as unknown as Incident[]
|
||||
|
||||
const open = list.filter(i => ['received', 'under_review'].includes(i.status))
|
||||
const decided = list.filter(i => ['decided', 'appealed'].includes(i.status))
|
||||
const closed = list.filter(i => i.status === 'closed')
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
<div className="bg-sidebar px-4 md:px-6 py-3 flex items-center justify-between">
|
||||
<h1 className="text-white font-sans text-lg font-semibold">Incidents</h1>
|
||||
<Link
|
||||
href="/incidents/new"
|
||||
className="bg-primary text-white text-xs font-sans px-3 py-1.5 rounded hover:bg-primary/90 transition"
|
||||
>
|
||||
File a report
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="p-4 md:p-6 space-y-8 max-w-4xl">
|
||||
{!isAdminOrBoard && (
|
||||
<p className="font-sans text-sm text-muted-foreground">
|
||||
You see incidents you have reported here. Admins and board members see all incidents in their space.
|
||||
</p>
|
||||
)}
|
||||
|
||||
<Section title="Open" empty="No open incidents." rows={open} />
|
||||
<Section title="Decided / under appeal" empty="None." rows={decided} />
|
||||
<Section title="Closed" empty="None." rows={closed} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function Section({ title, empty, rows }: { title: string; empty: string; rows: Incident[] }) {
|
||||
return (
|
||||
<div>
|
||||
<p className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase mb-3">{title}</p>
|
||||
<div className="bg-card rounded border border-border divide-y divide-border">
|
||||
{rows.length === 0 ? (
|
||||
<div className="px-4 py-8 text-center text-muted-foreground font-sans text-sm">{empty}</div>
|
||||
) : (
|
||||
rows.map(i => (
|
||||
<Link key={i.id} href={`/incidents/${i.id}`} className="block px-4 py-3 hover:bg-muted transition">
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<p className="font-sans text-sm font-medium text-foreground truncate">{i.title}</p>
|
||||
<span className={`font-mono text-[10px] tracking-widest uppercase px-1.5 py-0.5 rounded ${STATUS_STYLE[i.status]}`}>
|
||||
{i.status.replace(/_/g, ' ')}
|
||||
</span>
|
||||
</div>
|
||||
<p className="font-mono text-[10px] text-muted-foreground">
|
||||
{i.category} · {i.severity}
|
||||
{i.is_anonymous ? ' · anonymous' : ''}
|
||||
{' · '}
|
||||
filed {new Date(i.created_at).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}
|
||||
</p>
|
||||
</div>
|
||||
{i.sla_response_by && i.status === 'received' && (
|
||||
<span className="font-mono text-[10px] text-orange-600 flex-shrink-0">
|
||||
response by {new Date(i.sla_response_by).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</Link>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
+12
-2
@@ -45,8 +45,18 @@ export default async function AppLayout({ children }: { children: React.ReactNod
|
||||
taskBadge={taskCount ?? 0}
|
||||
paymentBadge={paymentCount ?? 0}
|
||||
/>
|
||||
<main className="flex-1 overflow-y-auto pt-[52px] md:pt-0">
|
||||
{children}
|
||||
<main className="flex-1 overflow-y-auto pt-[52px] md:pt-0 flex flex-col">
|
||||
<div className="flex-1">{children}</div>
|
||||
{member.spaces && (member.spaces as { mission_statement?: string | null }).mission_statement && (
|
||||
<footer className="border-t border-border bg-card px-4 md:px-6 py-3">
|
||||
<p className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase mb-1">
|
||||
{member.spaces.name}
|
||||
</p>
|
||||
<p className="font-sans text-xs text-muted-foreground italic">
|
||||
{(member.spaces as { mission_statement: string }).mission_statement}
|
||||
</p>
|
||||
</footer>
|
||||
)}
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -0,0 +1,108 @@
|
||||
import Link from 'next/link'
|
||||
import { redirect, notFound } from 'next/navigation'
|
||||
import { createClient } from '@/lib/supabase/server'
|
||||
import type { Policy } from '@/lib/types'
|
||||
import { PolicyActions } from './policy-actions'
|
||||
import { MarkdownBody } from '@/components/markdown'
|
||||
|
||||
export const dynamic = 'force-dynamic'
|
||||
|
||||
export default async function PolicyDetailPage({ params }: { params: Promise<{ slug: string }> }) {
|
||||
const { slug } = await params
|
||||
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'])
|
||||
.maybeSingle()
|
||||
if (!member?.space_id) redirect('/signup')
|
||||
|
||||
const { data: versionsRaw } = await supabase
|
||||
.from('policies')
|
||||
.select('*')
|
||||
.eq('space_id', member.space_id)
|
||||
.eq('slug', slug)
|
||||
.order('version', { ascending: false })
|
||||
|
||||
const versions = (versionsRaw ?? []) as unknown as Policy[]
|
||||
if (versions.length === 0) notFound()
|
||||
|
||||
// Pick the currently-active version, or the latest version, for the primary view.
|
||||
const current = versions.find(p => p.status === 'active') ?? versions[0]
|
||||
const isAdminOrBoard = member.role === 'admin' || member.role === 'board'
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
<div className="bg-sidebar px-4 md:px-6 py-3 flex items-center gap-3">
|
||||
<Link href="/policies" className="text-white/70 hover:text-white font-sans text-sm">
|
||||
← Policies
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="p-4 md:p-6 max-w-3xl space-y-6">
|
||||
<header className="bg-card rounded border border-border p-5">
|
||||
<h1 className="font-sans text-xl font-semibold text-foreground mb-1">{current.title}</h1>
|
||||
<p className="font-mono text-[10px] text-muted-foreground">
|
||||
{current.slug}
|
||||
{current.section_ref ? ` · §${current.section_ref}` : ''}
|
||||
{' · v'}{current.version}
|
||||
{' · '}
|
||||
{current.status}
|
||||
{current.effective_at ? ` · effective ${new Date(current.effective_at).toLocaleDateString()}` : ''}
|
||||
</p>
|
||||
</header>
|
||||
|
||||
{current.body_plain && (
|
||||
<section className="bg-card rounded border border-border p-5">
|
||||
<p className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase mb-2">
|
||||
Plain language
|
||||
</p>
|
||||
<MarkdownBody content={current.body_plain} />
|
||||
</section>
|
||||
)}
|
||||
|
||||
<section className="bg-card rounded border border-border p-5">
|
||||
<p className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase mb-2">
|
||||
Formal text
|
||||
</p>
|
||||
<MarkdownBody content={current.body_formal} />
|
||||
</section>
|
||||
|
||||
{isAdminOrBoard && (
|
||||
<PolicyActions policy={current} />
|
||||
)}
|
||||
|
||||
<section className="bg-card rounded border border-border p-5">
|
||||
<p className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase mb-3">
|
||||
Version history ({versions.length})
|
||||
</p>
|
||||
<ul className="divide-y divide-border">
|
||||
{versions.map(v => (
|
||||
<li key={v.id} className="py-2 flex items-center justify-between">
|
||||
<div>
|
||||
<p className="font-sans text-sm">v{v.version} · {v.status}</p>
|
||||
<p className="font-mono text-[10px] text-muted-foreground">
|
||||
created {new Date(v.created_at).toLocaleDateString()}
|
||||
{v.effective_at ? ` · effective ${new Date(v.effective_at).toLocaleDateString()}` : ''}
|
||||
{v.adopted_by_proposal_id ? (
|
||||
<>
|
||||
{' · '}
|
||||
<Link href={`/proposals/${v.adopted_by_proposal_id}`} className="text-primary hover:underline">
|
||||
adopted by proposal
|
||||
</Link>
|
||||
</>
|
||||
) : ''}
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,134 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useTransition } from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import { supersedePolicy, updatePolicyStatus } from '@/lib/actions'
|
||||
import { policyStatuses } from '@/lib/validations'
|
||||
import type { Policy } from '@/lib/types'
|
||||
|
||||
export function PolicyActions({ policy }: { policy: Policy }) {
|
||||
const router = useRouter()
|
||||
const [isPending, startTransition] = useTransition()
|
||||
const [error, setError] = useState('')
|
||||
const [showSupersede, setShowSupersede] = useState(false)
|
||||
const [newBody, setNewBody] = useState(policy.body_formal)
|
||||
const [newPlain, setNewPlain] = useState(policy.body_plain ?? '')
|
||||
|
||||
function run<T>(fn: () => Promise<T>, after?: () => void) {
|
||||
setError('')
|
||||
startTransition(async () => {
|
||||
const r = (await fn()) as unknown as { error?: string }
|
||||
if (r && r.error) setError(r.error)
|
||||
else after?.()
|
||||
router.refresh()
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
<div className="bg-card rounded border border-border p-5">
|
||||
<p className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase mb-3">
|
||||
Manage
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{policy.status !== 'active' && (
|
||||
<button
|
||||
type="button"
|
||||
disabled={isPending}
|
||||
onClick={() => run(() => updatePolicyStatus(policy.id, 'active'))}
|
||||
className="font-sans text-xs border border-border px-3 py-1.5 rounded hover:border-primary hover:text-primary"
|
||||
>
|
||||
Activate v{policy.version}
|
||||
</button>
|
||||
)}
|
||||
{policy.status === 'active' && (
|
||||
<>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowSupersede(s => !s)}
|
||||
className="font-sans text-xs border border-border px-3 py-1.5 rounded hover:border-primary hover:text-primary"
|
||||
>
|
||||
{showSupersede ? 'Cancel supersede' : 'Supersede with new version'}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
disabled={isPending}
|
||||
onClick={() => run(() => updatePolicyStatus(policy.id, 'deprecated'))}
|
||||
className="font-sans text-xs border border-border px-3 py-1.5 rounded hover:border-orange-500 hover:text-orange-600"
|
||||
>
|
||||
Deprecate
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
{policyStatuses
|
||||
.filter(s => s !== policy.status && s !== 'active')
|
||||
.map(s => (
|
||||
<button
|
||||
key={s}
|
||||
type="button"
|
||||
disabled={isPending}
|
||||
onClick={() => run(() => updatePolicyStatus(policy.id, s))}
|
||||
className="font-sans text-xs border border-border px-3 py-1.5 rounded text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
Set {s}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{showSupersede && (
|
||||
<div className="bg-card rounded border border-border p-5">
|
||||
<p className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase mb-3">
|
||||
Supersede v{policy.version} with v{policy.version + 1}
|
||||
</p>
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<label className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase block mb-1">
|
||||
Plain language (optional)
|
||||
</label>
|
||||
<textarea
|
||||
value={newPlain}
|
||||
onChange={e => setNewPlain(e.target.value)}
|
||||
rows={4}
|
||||
maxLength={100000}
|
||||
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">
|
||||
Formal text
|
||||
</label>
|
||||
<textarea
|
||||
value={newBody}
|
||||
onChange={e => setNewBody(e.target.value)}
|
||||
rows={12}
|
||||
maxLength={100000}
|
||||
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>
|
||||
<button
|
||||
type="button"
|
||||
disabled={isPending}
|
||||
onClick={() =>
|
||||
run(
|
||||
() =>
|
||||
supersedePolicy({
|
||||
policyId: policy.id,
|
||||
body_formal: newBody,
|
||||
body_plain: newPlain || null,
|
||||
}),
|
||||
() => setShowSupersede(false),
|
||||
)
|
||||
}
|
||||
className="bg-primary text-white font-sans text-sm font-medium px-4 py-2 rounded hover:bg-primary/90 transition disabled:opacity-50"
|
||||
>
|
||||
{isPending ? 'Creating draft...' : 'Create draft v' + (policy.version + 1)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{error && <p className="font-mono text-xs text-red-500">{error}</p>}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,135 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import Link from 'next/link'
|
||||
import { createPolicy } from '@/lib/actions'
|
||||
|
||||
export function NewPolicyForm() {
|
||||
const router = useRouter()
|
||||
const [slug, setSlug] = useState('')
|
||||
const [title, setTitle] = useState('')
|
||||
const [sectionRef, setSectionRef] = useState('')
|
||||
const [bodyFormal, setBodyFormal] = useState('')
|
||||
const [bodyPlain, setBodyPlain] = useState('')
|
||||
const [error, setError] = useState('')
|
||||
const [submitting, setSubmitting] = useState(false)
|
||||
|
||||
async function handleSubmit(e: React.FormEvent) {
|
||||
e.preventDefault()
|
||||
setSubmitting(true)
|
||||
setError('')
|
||||
|
||||
const result = await createPolicy({
|
||||
slug,
|
||||
title,
|
||||
section_ref: sectionRef || null,
|
||||
body_formal: bodyFormal,
|
||||
body_plain: bodyPlain || null,
|
||||
})
|
||||
|
||||
if ('error' in result && result.error) {
|
||||
setError(result.error)
|
||||
setSubmitting(false)
|
||||
return
|
||||
}
|
||||
|
||||
router.push(`/policies/${slug}`)
|
||||
}
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="space-y-5 bg-card rounded border border-border p-5">
|
||||
<div className="grid md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase block mb-1">
|
||||
Slug
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={slug}
|
||||
onChange={e => setSlug(e.target.value.toLowerCase().replace(/[^a-z0-9-]/g, ''))}
|
||||
maxLength={80}
|
||||
required
|
||||
pattern="[a-z0-9-]+"
|
||||
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"
|
||||
placeholder="bylaws"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase block mb-1">
|
||||
Section reference (optional)
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={sectionRef}
|
||||
onChange={e => setSectionRef(e.target.value)}
|
||||
maxLength={80}
|
||||
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"
|
||||
placeholder="Article III §2"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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
|
||||
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"
|
||||
placeholder="Bylaws"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase block mb-1">
|
||||
Plain-language summary (optional)
|
||||
</label>
|
||||
<textarea
|
||||
value={bodyPlain}
|
||||
onChange={e => setBodyPlain(e.target.value)}
|
||||
rows={4}
|
||||
maxLength={100000}
|
||||
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"
|
||||
placeholder="In short: be excellent to each other and pay your dues."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase block mb-1">
|
||||
Formal text
|
||||
</label>
|
||||
<textarea
|
||||
value={bodyFormal}
|
||||
onChange={e => setBodyFormal(e.target.value)}
|
||||
rows={16}
|
||||
maxLength={100000}
|
||||
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 font-mono"
|
||||
placeholder="WHEREAS..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
{error && <p className="font-mono text-xs text-red-500">{error}</p>}
|
||||
|
||||
<div className="flex items-center justify-end gap-3">
|
||||
<Link
|
||||
href="/policies"
|
||||
className="font-sans text-sm text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
Cancel
|
||||
</Link>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={submitting || !slug.trim() || !title.trim()}
|
||||
className="bg-primary text-white font-sans text-sm font-medium px-4 py-2 rounded hover:bg-primary/90 transition disabled:opacity-50"
|
||||
>
|
||||
{submitting ? 'Saving...' : 'Save as draft v1'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
import { redirect } from 'next/navigation'
|
||||
import { createClient } from '@/lib/supabase/server'
|
||||
import { NewPolicyForm } from './new-policy-form'
|
||||
|
||||
export const dynamic = 'force-dynamic'
|
||||
|
||||
export default async function NewPolicyPage() {
|
||||
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'])
|
||||
.maybeSingle()
|
||||
if (!member?.space_id) redirect('/signup')
|
||||
if (member.role !== 'admin' && member.role !== 'board') redirect('/policies')
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
<div className="bg-sidebar px-4 md:px-6 py-3">
|
||||
<h1 className="text-white font-sans text-lg font-semibold">New policy</h1>
|
||||
</div>
|
||||
<div className="p-4 md:p-6 max-w-2xl">
|
||||
<NewPolicyForm />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,101 @@
|
||||
import Link from 'next/link'
|
||||
import { redirect } from 'next/navigation'
|
||||
import { createClient } from '@/lib/supabase/server'
|
||||
import type { Policy, PolicyStatus } from '@/lib/types'
|
||||
|
||||
export const dynamic = 'force-dynamic'
|
||||
|
||||
const STATUS_STYLE: Record<PolicyStatus, string> = {
|
||||
draft: 'text-muted-foreground bg-muted',
|
||||
active: 'text-primary bg-primary/10',
|
||||
deprecated: 'text-orange-600 bg-orange-50',
|
||||
superseded: 'text-muted-foreground bg-muted',
|
||||
}
|
||||
|
||||
export default async function PoliciesPage() {
|
||||
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'])
|
||||
.maybeSingle()
|
||||
if (!member?.space_id) redirect('/signup')
|
||||
|
||||
const { data: policiesRaw } = await supabase
|
||||
.from('policies')
|
||||
.select('*')
|
||||
.eq('space_id', member.space_id)
|
||||
.order('slug', { ascending: true })
|
||||
.order('version', { ascending: false })
|
||||
|
||||
const all = (policiesRaw ?? []) as unknown as Policy[]
|
||||
|
||||
// For each slug, show the highest-version active row; fall back to highest-version overall.
|
||||
const bySlug = new Map<string, Policy>()
|
||||
for (const p of all) {
|
||||
const existing = bySlug.get(p.slug)
|
||||
if (!existing) bySlug.set(p.slug, p)
|
||||
else if (p.status === 'active' && existing.status !== 'active') bySlug.set(p.slug, p)
|
||||
else if (p.status === existing.status && p.version > existing.version) bySlug.set(p.slug, p)
|
||||
}
|
||||
|
||||
const summary = Array.from(bySlug.values()).sort((a, b) => a.slug.localeCompare(b.slug))
|
||||
const isAdminOrBoard = member.role === 'admin' || member.role === 'board'
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
<div className="bg-sidebar px-4 md:px-6 py-3 flex items-center justify-between">
|
||||
<h1 className="text-white font-sans text-lg font-semibold">Policies</h1>
|
||||
{isAdminOrBoard && (
|
||||
<Link
|
||||
href="/policies/new"
|
||||
className="bg-primary text-white text-xs font-sans px-3 py-1.5 rounded hover:bg-primary/90 transition"
|
||||
>
|
||||
New policy
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="p-4 md:p-6 max-w-4xl">
|
||||
<div className="bg-card rounded border border-border divide-y divide-border">
|
||||
{summary.length === 0 ? (
|
||||
<div className="px-4 py-12 text-center">
|
||||
<p className="font-sans text-sm text-muted-foreground mb-1">No policies yet.</p>
|
||||
<p className="font-mono text-[10px] text-muted-foreground">
|
||||
Bylaws, code of conduct, station rules. Each lives here with full version history.
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
summary.map(p => (
|
||||
<Link
|
||||
key={p.slug}
|
||||
href={`/policies/${p.slug}`}
|
||||
className="block px-4 py-3 hover:bg-muted transition"
|
||||
>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<p className="font-sans text-sm font-medium text-foreground truncate">{p.title}</p>
|
||||
<span className={`font-mono text-[10px] tracking-widest uppercase px-1.5 py-0.5 rounded ${STATUS_STYLE[p.status]}`}>
|
||||
{p.status}
|
||||
</span>
|
||||
</div>
|
||||
<p className="font-mono text-[10px] text-muted-foreground">
|
||||
{p.slug}
|
||||
{p.section_ref ? ` · §${p.section_ref}` : ''}
|
||||
{' · v'}{p.version}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useTransition } from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import { discloseAffiliations } from '@/lib/actions'
|
||||
import { ChipInput } from './chip-input'
|
||||
|
||||
export function AffiliationsForm({ initial }: { initial: { affiliations: string[] } }) {
|
||||
const router = useRouter()
|
||||
const [affiliations, setAffiliations] = useState<string[]>(initial.affiliations)
|
||||
const [error, setError] = useState('')
|
||||
const [status, setStatus] = useState<'idle' | 'saved'>('idle')
|
||||
const [isPending, startTransition] = useTransition()
|
||||
|
||||
function handleSubmit(e: React.FormEvent) {
|
||||
e.preventDefault()
|
||||
setError('')
|
||||
setStatus('idle')
|
||||
startTransition(async () => {
|
||||
const r = await discloseAffiliations({ affiliations })
|
||||
if ('error' in r && r.error) setError(r.error)
|
||||
else {
|
||||
setStatus('saved')
|
||||
router.refresh()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="bg-card rounded border border-border p-5 space-y-4">
|
||||
<div>
|
||||
<label className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase block mb-2">
|
||||
Outside affiliations
|
||||
</label>
|
||||
<ChipInput
|
||||
values={affiliations}
|
||||
onChange={setAffiliations}
|
||||
placeholder='add an affiliation and press enter, e.g. "ACME Robotics, contractor"'
|
||||
maxLength={200}
|
||||
maxItems={50}
|
||||
/>
|
||||
<p className="font-mono text-[10px] text-muted-foreground mt-1">
|
||||
Organizations, businesses, or roles outside this space that could intersect with space
|
||||
decisions. Visible to all members. Submitting stamps your disclosure date.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{error && <p className="font-mono text-xs text-red-500">{error}</p>}
|
||||
{status === 'saved' && !error && (
|
||||
<p className="font-mono text-xs text-primary">Disclosed. Your timestamp is updated.</p>
|
||||
)}
|
||||
|
||||
<div className="flex items-center justify-end">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isPending}
|
||||
className="bg-primary text-white font-sans text-sm font-medium px-4 py-2 rounded hover:bg-primary/90 transition disabled:opacity-50"
|
||||
>
|
||||
{isPending ? 'Disclosing...' : 'Disclose now'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,100 @@
|
||||
'use client'
|
||||
|
||||
import { useState, type KeyboardEvent } from 'react'
|
||||
|
||||
type Props = {
|
||||
values: string[]
|
||||
onChange: (next: string[]) => void
|
||||
placeholder?: string
|
||||
maxLength?: number
|
||||
maxItems?: number
|
||||
suggestions?: string[]
|
||||
}
|
||||
|
||||
/**
|
||||
* Minimal chip / token input. Press Enter or comma to commit the current
|
||||
* value. Backspace on an empty input removes the last chip. Optional
|
||||
* suggestion list shows un-used suggestions as click-to-add chips below.
|
||||
*/
|
||||
export function ChipInput({
|
||||
values,
|
||||
onChange,
|
||||
placeholder,
|
||||
maxLength = 80,
|
||||
maxItems = 50,
|
||||
suggestions,
|
||||
}: Props) {
|
||||
const [draft, setDraft] = useState('')
|
||||
|
||||
function commit(raw: string) {
|
||||
const v = raw.trim()
|
||||
if (!v) return
|
||||
if (values.includes(v)) return
|
||||
if (values.length >= maxItems) return
|
||||
onChange([...values, v.slice(0, maxLength)])
|
||||
setDraft('')
|
||||
}
|
||||
|
||||
function remove(idx: number) {
|
||||
onChange(values.filter((_, i) => i !== idx))
|
||||
}
|
||||
|
||||
function handleKeyDown(e: KeyboardEvent<HTMLInputElement>) {
|
||||
if (e.key === 'Enter' || e.key === ',') {
|
||||
e.preventDefault()
|
||||
commit(draft)
|
||||
} else if (e.key === 'Backspace' && draft === '' && values.length > 0) {
|
||||
e.preventDefault()
|
||||
onChange(values.slice(0, -1))
|
||||
}
|
||||
}
|
||||
|
||||
const remainingSuggestions = (suggestions ?? []).filter(s => !values.includes(s))
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex flex-wrap items-center gap-1.5 bg-background border border-border rounded px-2 py-1.5 focus-within:border-primary">
|
||||
{values.map((v, i) => (
|
||||
<span
|
||||
key={`${v}-${i}`}
|
||||
className="inline-flex items-center gap-1 bg-muted rounded px-2 py-0.5 font-mono text-xs"
|
||||
>
|
||||
{v}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => remove(i)}
|
||||
className="text-muted-foreground hover:text-foreground"
|
||||
aria-label={`Remove ${v}`}
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</span>
|
||||
))}
|
||||
<input
|
||||
type="text"
|
||||
value={draft}
|
||||
onChange={e => setDraft(e.target.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
onBlur={() => commit(draft)}
|
||||
placeholder={values.length === 0 ? placeholder : ''}
|
||||
maxLength={maxLength}
|
||||
className="flex-1 min-w-[120px] bg-transparent text-foreground font-sans text-sm py-1 px-1 focus:outline-none"
|
||||
/>
|
||||
</div>
|
||||
{remainingSuggestions.length > 0 && (
|
||||
<div className="flex flex-wrap gap-1.5 mt-2">
|
||||
{remainingSuggestions.map(s => (
|
||||
<button
|
||||
key={s}
|
||||
type="button"
|
||||
onClick={() => commit(s)}
|
||||
className="font-mono text-[10px] tracking-widest border border-border text-muted-foreground hover:text-foreground hover:border-primary rounded px-2 py-0.5"
|
||||
>
|
||||
+ {s}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,100 @@
|
||||
import { redirect } from 'next/navigation'
|
||||
import { createClient } from '@/lib/supabase/server'
|
||||
import { ProfileForm } from './profile-form'
|
||||
import { AffiliationsForm } from './affiliations-form'
|
||||
|
||||
export const dynamic = 'force-dynamic'
|
||||
|
||||
export default async function ProfilePage() {
|
||||
const supabase = await createClient()
|
||||
const { data: { user } } = await supabase.auth.getUser()
|
||||
if (!user) redirect('/login')
|
||||
|
||||
const { data: memberRaw } = await supabase
|
||||
.from('space_members')
|
||||
.select('*')
|
||||
.eq('user_id', user.id)
|
||||
.in('status', ['current', 'unverified', 'late'])
|
||||
.maybeSingle()
|
||||
if (!memberRaw) redirect('/signup')
|
||||
|
||||
const member = memberRaw as unknown as {
|
||||
id: string
|
||||
display_name: string | null
|
||||
handle: string | null
|
||||
phone: string | null
|
||||
role: string
|
||||
tier: string
|
||||
skills: string[]
|
||||
interests: string[]
|
||||
willing_to: string[]
|
||||
affiliations: string[]
|
||||
coi_last_disclosed_at: string | null
|
||||
email: string | null
|
||||
}
|
||||
|
||||
const privilegedRoles = ['admin', 'board', 'treasurer']
|
||||
const isPrivileged = privilegedRoles.includes(member.role)
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
<div className="bg-sidebar px-4 md:px-6 py-3">
|
||||
<h1 className="text-white font-sans text-lg font-semibold">My profile</h1>
|
||||
</div>
|
||||
|
||||
<div className="p-4 md:p-6 space-y-6 max-w-3xl">
|
||||
<header className="bg-card rounded border border-border p-5">
|
||||
<p className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase mb-1">
|
||||
Account
|
||||
</p>
|
||||
<p className="font-sans text-sm text-foreground">{member.email}</p>
|
||||
<p className="font-mono text-[10px] text-muted-foreground mt-1">
|
||||
role: {member.role} · tier: {member.tier}
|
||||
</p>
|
||||
<p className="font-mono text-[10px] text-muted-foreground mt-2">
|
||||
Role and tier can only be changed by an admin or board member. The privilege-escalation
|
||||
trigger blocks self-edits to those fields at the database level.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<section>
|
||||
<p className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase mb-3">
|
||||
Profile
|
||||
</p>
|
||||
<ProfileForm
|
||||
initial={{
|
||||
display_name: member.display_name ?? '',
|
||||
handle: member.handle ?? '',
|
||||
phone: member.phone ?? '',
|
||||
skills: member.skills ?? [],
|
||||
interests: member.interests ?? [],
|
||||
willing_to: member.willing_to ?? [],
|
||||
}}
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div className="flex items-baseline justify-between mb-3">
|
||||
<p className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase">
|
||||
Conflict-of-interest disclosure
|
||||
</p>
|
||||
{member.coi_last_disclosed_at && (
|
||||
<p className="font-mono text-[10px] text-muted-foreground">
|
||||
last disclosed {new Date(member.coi_last_disclosed_at).toLocaleDateString()}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
{isPrivileged && !member.coi_last_disclosed_at && (
|
||||
<div className="bg-orange-50 border border-orange-200 rounded p-3 mb-3">
|
||||
<p className="font-sans text-sm text-orange-900">
|
||||
You hold a privileged role ({member.role}). Please disclose any outside affiliations
|
||||
that could conflict with space governance. Disclosure is visible to other members.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
<AffiliationsForm initial={{ affiliations: member.affiliations ?? [] }} />
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,155 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useTransition } from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import { updateMyProfile } from '@/lib/actions'
|
||||
import { ChipInput } from './chip-input'
|
||||
|
||||
type Props = {
|
||||
initial: {
|
||||
display_name: string
|
||||
handle: string
|
||||
phone: string
|
||||
skills: string[]
|
||||
interests: string[]
|
||||
willing_to: string[]
|
||||
}
|
||||
}
|
||||
|
||||
const WILLING_TO_SUGGESTIONS = [
|
||||
'board_candidate',
|
||||
'treasurer_candidate',
|
||||
'host_volunteer',
|
||||
'area_lead_candidate',
|
||||
'event_organizer',
|
||||
'safety_committee',
|
||||
'docs_steward',
|
||||
]
|
||||
|
||||
export function ProfileForm({ initial }: Props) {
|
||||
const router = useRouter()
|
||||
const [displayName, setDisplayName] = useState(initial.display_name)
|
||||
const [handle, setHandle] = useState(initial.handle)
|
||||
const [phone, setPhone] = useState(initial.phone)
|
||||
const [skills, setSkills] = useState<string[]>(initial.skills)
|
||||
const [interests, setInterests] = useState<string[]>(initial.interests)
|
||||
const [willingTo, setWillingTo] = useState<string[]>(initial.willing_to)
|
||||
const [error, setError] = useState('')
|
||||
const [status, setStatus] = useState<'idle' | 'saved'>('idle')
|
||||
const [isPending, startTransition] = useTransition()
|
||||
|
||||
function handleSubmit(e: React.FormEvent) {
|
||||
e.preventDefault()
|
||||
setError('')
|
||||
setStatus('idle')
|
||||
startTransition(async () => {
|
||||
const r = await updateMyProfile({
|
||||
display_name: displayName,
|
||||
handle: handle || null,
|
||||
phone: phone || null,
|
||||
skills,
|
||||
interests,
|
||||
willing_to: willingTo,
|
||||
})
|
||||
if ('error' in r && r.error) setError(r.error)
|
||||
else {
|
||||
setStatus('saved')
|
||||
router.refresh()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="bg-card rounded border border-border p-5 space-y-5">
|
||||
<div className="grid md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase block mb-1">
|
||||
Display name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={displayName}
|
||||
onChange={e => setDisplayName(e.target.value)}
|
||||
maxLength={100}
|
||||
required
|
||||
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">
|
||||
Handle
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={handle}
|
||||
onChange={e => setHandle(e.target.value)}
|
||||
maxLength={50}
|
||||
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>
|
||||
|
||||
<div>
|
||||
<label className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase block mb-1">
|
||||
Phone
|
||||
</label>
|
||||
<input
|
||||
type="tel"
|
||||
value={phone}
|
||||
onChange={e => setPhone(e.target.value)}
|
||||
maxLength={20}
|
||||
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">
|
||||
Skills
|
||||
</label>
|
||||
<ChipInput values={skills} onChange={setSkills} placeholder="add a skill and press enter" maxLength={60} maxItems={40} />
|
||||
<p className="font-mono text-[10px] text-muted-foreground mt-1">
|
||||
Examples: woodworking, laser, electronics, accounting, grant writing.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase block mb-1">
|
||||
Interests
|
||||
</label>
|
||||
<ChipInput values={interests} onChange={setInterests} placeholder="add an interest and press enter" maxLength={60} maxItems={40} />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase block mb-1">
|
||||
Willing to do
|
||||
</label>
|
||||
<ChipInput
|
||||
values={willingTo}
|
||||
onChange={setWillingTo}
|
||||
placeholder="add a role and press enter"
|
||||
maxLength={60}
|
||||
maxItems={20}
|
||||
suggestions={WILLING_TO_SUGGESTIONS}
|
||||
/>
|
||||
<p className="font-mono text-[10px] text-muted-foreground mt-1">
|
||||
Used by the recruitment view (board only) when looking for members willing to take on a role.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{error && <p className="font-mono text-xs text-red-500">{error}</p>}
|
||||
{status === 'saved' && !error && (
|
||||
<p className="font-mono text-xs text-primary">Saved.</p>
|
||||
)}
|
||||
|
||||
<div className="flex items-center justify-end">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isPending}
|
||||
className="bg-primary text-white font-sans text-sm font-medium px-4 py-2 rounded hover:bg-primary/90 transition disabled:opacity-50"
|
||||
>
|
||||
{isPending ? 'Saving...' : 'Save profile'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
@@ -10,8 +10,18 @@ export default async function ProjectsPage() {
|
||||
.from('space_members').select('space_id').eq('user_id', user.id).in('status', ['current', 'unverified', 'late']).single()
|
||||
if (!member) return null
|
||||
|
||||
const { data: projects } = await supabase
|
||||
.from('projects').select('*').eq('space_id', member.space_id).order('created_at', { ascending: false })
|
||||
const [{ data: projects }, { data: areasRaw }] = await Promise.all([
|
||||
supabase.from('projects').select('*').eq('space_id', member.space_id).order('created_at', { ascending: false }),
|
||||
supabase
|
||||
.from('space_areas')
|
||||
.select('name')
|
||||
.eq('space_id', member.space_id)
|
||||
.eq('is_archived', false)
|
||||
.order('sort_order', { ascending: true })
|
||||
.order('name', { ascending: true }),
|
||||
])
|
||||
|
||||
return <ProjectsClient projects={projects ?? []} spaceId={member.space_id} />
|
||||
const areas = (areasRaw ?? []).map((a: { name: string }) => a.name)
|
||||
|
||||
return <ProjectsClient projects={projects ?? []} spaceId={member.space_id} areas={areas} />
|
||||
}
|
||||
|
||||
@@ -14,9 +14,14 @@ const STATUS_COLS = [
|
||||
{ key: 'done', label: 'DONE', color: 'text-muted-foreground', dot: 'bg-muted-foreground' },
|
||||
]
|
||||
|
||||
const AREAS = ['3D Printing', 'Electronics', 'Woodshop', 'Laser', 'Metal Shop', 'Facilities', 'Admin', 'Software', 'General']
|
||||
const DEFAULT_AREAS = ['3D Printing', 'Electronics', 'Woodshop', 'Laser', 'Metal Shop', 'Facilities', 'Admin', 'Software', 'General']
|
||||
|
||||
export function ProjectsClient({ projects: initialProjects, spaceId }: { projects: Project[], spaceId: string }) {
|
||||
export function ProjectsClient({
|
||||
projects: initialProjects,
|
||||
spaceId,
|
||||
areas,
|
||||
}: { projects: Project[]; spaceId: string; areas?: string[] }) {
|
||||
const AREAS = areas && areas.length > 0 ? areas : DEFAULT_AREAS
|
||||
const [projects, setProjects] = useState<Project[]>(initialProjects)
|
||||
const [showCreate, setShowCreate] = useState(false)
|
||||
const [form, setForm] = useState({ title: '', description: '', area: '', tags: '', due_date: '' })
|
||||
|
||||
@@ -0,0 +1,175 @@
|
||||
import Link from 'next/link'
|
||||
import { redirect, notFound } from 'next/navigation'
|
||||
import { createClient } from '@/lib/supabase/server'
|
||||
import type { Proposal, ProposalVote } from '@/lib/types'
|
||||
import { ProposalStatusBadge } from '../proposal-badges'
|
||||
import { ProposalActions } from './proposal-actions'
|
||||
import { MarkdownBody } from '@/components/markdown'
|
||||
|
||||
export const dynamic = 'force-dynamic'
|
||||
|
||||
export default async function ProposalDetailPage({ params }: { params: Promise<{ id: string }> }) {
|
||||
const { id } = await params
|
||||
const supabase = await createClient()
|
||||
const { data: { user } } = await supabase.auth.getUser()
|
||||
if (!user) redirect('/login')
|
||||
|
||||
const { data: member } = await supabase
|
||||
.from('space_members')
|
||||
.select('id, space_id, role, display_name')
|
||||
.eq('user_id', user.id)
|
||||
.in('status', ['current', 'unverified', 'late'])
|
||||
.maybeSingle()
|
||||
if (!member?.space_id) redirect('/signup')
|
||||
|
||||
const { data: proposalRaw } = await supabase
|
||||
.from('proposals')
|
||||
.select('*')
|
||||
.eq('id', id)
|
||||
.eq('space_id', member.space_id)
|
||||
.maybeSingle()
|
||||
if (!proposalRaw) notFound()
|
||||
|
||||
const proposal = proposalRaw as unknown as Proposal
|
||||
|
||||
const { data: votesRaw } = await supabase
|
||||
.from('proposal_votes')
|
||||
.select('*')
|
||||
.eq('proposal_id', proposal.id)
|
||||
.order('voted_at', { ascending: false })
|
||||
|
||||
const votes = (votesRaw ?? []) as unknown as ProposalVote[]
|
||||
|
||||
// Resolve voter display names from space_members.
|
||||
const voterIds = Array.from(new Set(votes.map(v => v.member_id)))
|
||||
const { data: voters } = voterIds.length
|
||||
? await supabase
|
||||
.from('space_members')
|
||||
.select('id, display_name')
|
||||
.in('id', voterIds)
|
||||
: { data: [] as Array<{ id: string; display_name: string | null }> }
|
||||
|
||||
const voterNames = new Map((voters ?? []).map(m => [m.id, m.display_name]))
|
||||
|
||||
const myVote = votes.find(v => v.member_id === (member as { id: string }).id) ?? null
|
||||
const isAdminOrBoard = member.role === 'admin' || member.role === 'board'
|
||||
const votingOpen =
|
||||
proposal.status === 'open' &&
|
||||
proposal.voting_opens_at !== null &&
|
||||
proposal.voting_closes_at !== null &&
|
||||
new Date(proposal.voting_opens_at) <= new Date() &&
|
||||
new Date(proposal.voting_closes_at) > new Date()
|
||||
|
||||
const totalCounted = proposal.outcome_yes + proposal.outcome_no + proposal.outcome_abstain
|
||||
const quorumPct = proposal.quorum_required > 0
|
||||
? Math.min(100, Math.round((totalCounted / proposal.quorum_required) * 100))
|
||||
: 0
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
<div className="bg-sidebar px-4 md:px-6 py-3 flex items-center gap-3">
|
||||
<Link href="/proposals" className="text-white/70 hover:text-white font-sans text-sm">
|
||||
← Proposals
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="p-4 md:p-6 max-w-4xl space-y-6">
|
||||
<header className="bg-card rounded border border-border p-5">
|
||||
<div className="flex items-start justify-between gap-3 mb-3">
|
||||
<h1 className="font-sans text-xl font-semibold text-foreground flex-1">{proposal.title}</h1>
|
||||
<ProposalStatusBadge status={proposal.status} />
|
||||
</div>
|
||||
<p className="font-mono text-[10px] text-muted-foreground">
|
||||
{proposal.proposal_type.replace(/_/g, ' ')}
|
||||
{proposal.proposer_name ? ` · proposed by ${proposal.proposer_name}` : ''}
|
||||
{' · '}
|
||||
{proposal.threshold.replace(/_/g, ' ')} required
|
||||
</p>
|
||||
{proposal.body && <MarkdownBody className="mt-4" content={proposal.body} />}
|
||||
</header>
|
||||
|
||||
<section className="bg-card rounded border border-border p-5">
|
||||
<p className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase mb-3">
|
||||
Tally
|
||||
</p>
|
||||
<div className="grid grid-cols-4 gap-3 mb-4">
|
||||
<Tally label="Yes" value={proposal.outcome_yes} accent="text-primary" />
|
||||
<Tally label="No" value={proposal.outcome_no} accent="text-orange-600" />
|
||||
<Tally label="Abstain" value={proposal.outcome_abstain} accent="text-muted-foreground" />
|
||||
<Tally label="Recused" value={proposal.outcome_recused} accent="text-muted-foreground" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase">
|
||||
Quorum
|
||||
</span>
|
||||
<span className="font-sans text-xs">
|
||||
{totalCounted} of {proposal.quorum_required}
|
||||
{' · '}
|
||||
<span className={proposal.quorum_met ? 'text-primary' : 'text-orange-600'}>
|
||||
{proposal.quorum_met ? 'met' : 'not met'}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div className="h-1 bg-border rounded-full overflow-hidden">
|
||||
<div className={`h-full rounded-full ${proposal.quorum_met ? 'bg-primary' : 'bg-orange-400'}`} style={{ width: `${quorumPct}%` }} />
|
||||
</div>
|
||||
{proposal.status === 'decided' && (
|
||||
<p className="font-mono text-[10px] text-muted-foreground pt-1">
|
||||
Outcome: <span className={proposal.passed ? 'text-primary' : 'text-orange-600'}>{proposal.passed ? 'PASSED' : 'DID NOT PASS'}</span>
|
||||
{proposal.decided_at ? ` · ${new Date(proposal.decided_at).toLocaleString()}` : ''}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<ProposalActions
|
||||
proposalId={proposal.id}
|
||||
status={proposal.status}
|
||||
isAdminOrBoard={isAdminOrBoard}
|
||||
isProposer={proposal.proposer_id === member.id}
|
||||
votingOpen={votingOpen}
|
||||
myVote={myVote}
|
||||
/>
|
||||
|
||||
<section className="bg-card rounded border border-border p-5">
|
||||
<p className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase mb-3">
|
||||
Votes ({votes.length})
|
||||
</p>
|
||||
{votes.length === 0 ? (
|
||||
<p className="font-sans text-sm text-muted-foreground">No votes cast yet.</p>
|
||||
) : (
|
||||
<ul className="divide-y divide-border">
|
||||
{votes.map(v => (
|
||||
<li key={v.id} className="py-2 flex items-start gap-3">
|
||||
<span className="font-mono text-[10px] tracking-widest uppercase w-16 flex-shrink-0 mt-1">
|
||||
{v.position}
|
||||
</span>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="font-sans text-sm text-foreground">{voterNames.get(v.member_id) ?? 'Unknown member'}</p>
|
||||
{v.comment && <p className="font-sans text-xs text-muted-foreground mt-0.5">{v.comment}</p>}
|
||||
{v.recusal_reason && (
|
||||
<p className="font-sans text-xs text-muted-foreground italic mt-0.5">Recused: {v.recusal_reason}</p>
|
||||
)}
|
||||
</div>
|
||||
<span className="font-mono text-[10px] text-muted-foreground/60 flex-shrink-0 mt-1">
|
||||
{new Date(v.voted_at).toLocaleString('en-US', { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })}
|
||||
</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function Tally({ label, value, accent }: { label: string; value: number; accent: string }) {
|
||||
return (
|
||||
<div>
|
||||
<p className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase mb-1">{label}</p>
|
||||
<p className={`font-sans text-2xl font-semibold ${accent}`}>{value}</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,161 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useTransition } from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import {
|
||||
castVote,
|
||||
decideProposal,
|
||||
openProposal,
|
||||
withdrawProposal,
|
||||
} from '@/lib/actions'
|
||||
import type { ProposalStatus, ProposalVote, VotePosition } from '@/lib/types'
|
||||
import { votePositions } from '@/lib/validations'
|
||||
|
||||
type Props = {
|
||||
proposalId: string
|
||||
status: ProposalStatus
|
||||
isAdminOrBoard: boolean
|
||||
isProposer: boolean
|
||||
votingOpen: boolean
|
||||
myVote: ProposalVote | null
|
||||
}
|
||||
|
||||
export function ProposalActions({
|
||||
proposalId,
|
||||
status,
|
||||
isAdminOrBoard,
|
||||
isProposer,
|
||||
votingOpen,
|
||||
myVote,
|
||||
}: Props) {
|
||||
const router = useRouter()
|
||||
const [isPending, startTransition] = useTransition()
|
||||
const [error, setError] = useState('')
|
||||
|
||||
// Voting form state
|
||||
const [position, setPosition] = useState<VotePosition>(myVote?.position ?? 'yes')
|
||||
const [recusalReason, setRecusalReason] = useState(myVote?.recusal_reason ?? '')
|
||||
const [comment, setComment] = useState(myVote?.comment ?? '')
|
||||
|
||||
function run<T>(fn: () => Promise<T>) {
|
||||
setError('')
|
||||
startTransition(async () => {
|
||||
const r = (await fn()) as unknown as { error?: string }
|
||||
if (r && r.error) setError(r.error)
|
||||
router.refresh()
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
{votingOpen && (
|
||||
<div className="bg-card rounded border border-border p-5">
|
||||
<p className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase mb-3">
|
||||
{myVote ? 'Update your vote' : 'Cast your vote'}
|
||||
</p>
|
||||
<div className="grid grid-cols-4 gap-2 mb-3">
|
||||
{votePositions.map(p => (
|
||||
<button
|
||||
key={p}
|
||||
type="button"
|
||||
onClick={() => setPosition(p)}
|
||||
className={`font-mono text-xs tracking-widest uppercase py-2 rounded border transition ${
|
||||
position === p
|
||||
? 'bg-primary text-white border-primary'
|
||||
: 'border-border text-foreground hover:border-primary'
|
||||
}`}
|
||||
>
|
||||
{p}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
{position === 'recused' && (
|
||||
<div className="mb-3">
|
||||
<label className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase block mb-1">
|
||||
Recusal reason (required)
|
||||
</label>
|
||||
<textarea
|
||||
value={recusalReason}
|
||||
onChange={e => setRecusalReason(e.target.value)}
|
||||
rows={2}
|
||||
maxLength={1000}
|
||||
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="mb-3">
|
||||
<label className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase block mb-1">
|
||||
Comment (optional, public)
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={comment}
|
||||
onChange={e => setComment(e.target.value)}
|
||||
maxLength={2000}
|
||||
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>
|
||||
<button
|
||||
type="button"
|
||||
disabled={isPending || (position === 'recused' && recusalReason.trim().length === 0)}
|
||||
onClick={() =>
|
||||
run(() =>
|
||||
castVote({
|
||||
proposalId,
|
||||
position,
|
||||
recusal_reason: position === 'recused' ? recusalReason : null,
|
||||
comment: comment || null,
|
||||
}),
|
||||
)
|
||||
}
|
||||
className="bg-primary text-white font-sans text-sm font-medium px-4 py-2 rounded hover:bg-primary/90 transition disabled:opacity-50"
|
||||
>
|
||||
{isPending ? 'Saving...' : myVote ? 'Update vote' : 'Submit vote'}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{(isAdminOrBoard || isProposer) && (
|
||||
<div className="bg-card rounded border border-border p-5">
|
||||
<p className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase mb-3">
|
||||
Manage
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{status === 'draft' && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => run(() => openProposal(proposalId))}
|
||||
disabled={isPending}
|
||||
className="font-sans text-xs border border-border px-3 py-1.5 rounded hover:border-primary hover:text-primary"
|
||||
>
|
||||
Open for voting
|
||||
</button>
|
||||
)}
|
||||
{(status === 'draft' || status === 'open') && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => run(() => withdrawProposal(proposalId))}
|
||||
disabled={isPending}
|
||||
className="font-sans text-xs border border-border px-3 py-1.5 rounded hover:border-orange-500 hover:text-orange-600"
|
||||
>
|
||||
Withdraw
|
||||
</button>
|
||||
)}
|
||||
{status === 'open' && isAdminOrBoard && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => run(() => decideProposal(proposalId))}
|
||||
disabled={isPending}
|
||||
className="font-sans text-xs border border-border px-3 py-1.5 rounded hover:border-primary hover:text-primary"
|
||||
>
|
||||
Mark decided
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{error && <p className="font-mono text-xs text-red-500">{error}</p>}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,146 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import Link from 'next/link'
|
||||
import { createProposal } from '@/lib/actions'
|
||||
import {
|
||||
proposalTypes,
|
||||
thresholdRules,
|
||||
} from '@/lib/validations'
|
||||
|
||||
export function NewProposalForm() {
|
||||
const router = useRouter()
|
||||
const [title, setTitle] = useState('')
|
||||
const [body, setBody] = useState('')
|
||||
const [proposalType, setProposalType] = useState<string>('advisory_poll')
|
||||
const [threshold, setThreshold] = useState<string>('simple_majority')
|
||||
const [openImmediately, setOpenImmediately] = useState(false)
|
||||
const [error, setError] = useState('')
|
||||
const [submitting, setSubmitting] = useState(false)
|
||||
|
||||
async function handleSubmit(e: React.FormEvent) {
|
||||
e.preventDefault()
|
||||
setSubmitting(true)
|
||||
setError('')
|
||||
|
||||
const result = await createProposal({
|
||||
title,
|
||||
body,
|
||||
proposal_type: proposalType,
|
||||
threshold,
|
||||
open_immediately: openImmediately,
|
||||
})
|
||||
|
||||
if ('error' in result && result.error) {
|
||||
setError(result.error)
|
||||
setSubmitting(false)
|
||||
return
|
||||
}
|
||||
|
||||
if ('data' in result && result.data) {
|
||||
router.push(`/proposals/${(result.data as { id: string }).id}`)
|
||||
} else {
|
||||
router.push('/proposals')
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="space-y-5 bg-card rounded border border-border p-5">
|
||||
<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
|
||||
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"
|
||||
placeholder="Approve new laser station rules"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase block mb-1">
|
||||
Body
|
||||
</label>
|
||||
<textarea
|
||||
value={body}
|
||||
onChange={e => setBody(e.target.value)}
|
||||
rows={10}
|
||||
maxLength={20000}
|
||||
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"
|
||||
placeholder="Describe the proposal, the change being proposed, and the rationale."
|
||||
/>
|
||||
<p className="font-mono text-[10px] text-muted-foreground mt-1">Markdown is rendered on the detail page.</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase block mb-1">
|
||||
Type
|
||||
</label>
|
||||
<select
|
||||
value={proposalType}
|
||||
onChange={e => setProposalType(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"
|
||||
>
|
||||
{proposalTypes.map(t => (
|
||||
<option key={t} value={t}>
|
||||
{t.replace(/_/g, ' ')}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase block mb-1">
|
||||
Threshold to pass
|
||||
</label>
|
||||
<select
|
||||
value={threshold}
|
||||
onChange={e => setThreshold(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"
|
||||
>
|
||||
{thresholdRules.map(t => (
|
||||
<option key={t} value={t}>
|
||||
{t.replace(/_/g, ' ')}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="flex items-center gap-2 text-sm">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={openImmediately}
|
||||
onChange={e => setOpenImmediately(e.target.checked)}
|
||||
className="rounded border-border"
|
||||
/>
|
||||
<span className="font-sans">Open voting immediately. Quorum and voting window come from space defaults.</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{error && <p className="font-mono text-xs text-red-500">{error}</p>}
|
||||
|
||||
<div className="flex items-center justify-end gap-3">
|
||||
<Link
|
||||
href="/proposals"
|
||||
className="font-sans text-sm text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
Cancel
|
||||
</Link>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={submitting || !title.trim()}
|
||||
className="bg-primary text-white font-sans text-sm font-medium px-4 py-2 rounded hover:bg-primary/90 transition disabled:opacity-50"
|
||||
>
|
||||
{submitting ? 'Saving...' : 'Save proposal'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
import { redirect } from 'next/navigation'
|
||||
import { createClient } from '@/lib/supabase/server'
|
||||
import { NewProposalForm } from './new-proposal-form'
|
||||
|
||||
export const dynamic = 'force-dynamic'
|
||||
|
||||
export default async function NewProposalPage() {
|
||||
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')
|
||||
.eq('user_id', user.id)
|
||||
.in('status', ['current', 'unverified', 'late'])
|
||||
.maybeSingle()
|
||||
if (!member?.space_id) redirect('/signup')
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
<div className="bg-sidebar px-4 md:px-6 py-3">
|
||||
<h1 className="text-white font-sans text-lg font-semibold">New proposal</h1>
|
||||
</div>
|
||||
<div className="p-4 md:p-6 max-w-2xl">
|
||||
<NewProposalForm />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,99 @@
|
||||
import Link from 'next/link'
|
||||
import { redirect } from 'next/navigation'
|
||||
import { createClient } from '@/lib/supabase/server'
|
||||
import type { Proposal } from '@/lib/types'
|
||||
import { ProposalStatusBadge } from './proposal-badges'
|
||||
|
||||
export const dynamic = 'force-dynamic'
|
||||
|
||||
export default async function ProposalsPage() {
|
||||
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')
|
||||
.eq('user_id', user.id)
|
||||
.in('status', ['current', 'unverified', 'late'])
|
||||
.maybeSingle()
|
||||
if (!member?.space_id) redirect('/signup')
|
||||
|
||||
const { data: proposals } = await supabase
|
||||
.from('proposals')
|
||||
.select('*')
|
||||
.eq('space_id', member.space_id)
|
||||
.order('created_at', { ascending: false })
|
||||
|
||||
const list = (proposals ?? []) as unknown as Proposal[]
|
||||
|
||||
const open = list.filter(p => p.status === 'open')
|
||||
const drafts = list.filter(p => p.status === 'draft')
|
||||
const decided = list.filter(p => ['decided', 'withdrawn', 'expired'].includes(p.status))
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
<div className="bg-sidebar px-4 md:px-6 py-3 flex items-center justify-between">
|
||||
<h1 className="text-white font-sans text-lg font-semibold">Proposals</h1>
|
||||
<Link
|
||||
href="/proposals/new"
|
||||
className="bg-primary text-white text-xs font-sans px-3 py-1.5 rounded hover:bg-primary/90 transition"
|
||||
>
|
||||
New proposal
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="p-4 md:p-6 space-y-8 max-w-4xl">
|
||||
<Section title="Open for voting" empty="No proposals are currently open." proposals={open} />
|
||||
<Section title="Drafts" empty="No drafts." proposals={drafts} />
|
||||
<Section title="Archive" empty="No decided or withdrawn proposals." proposals={decided} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function Section({ title, empty, proposals }: { title: string; empty: string; proposals: Proposal[] }) {
|
||||
return (
|
||||
<div>
|
||||
<p className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase mb-3">{title}</p>
|
||||
<div className="bg-card rounded border border-border divide-y divide-border">
|
||||
{proposals.length === 0 ? (
|
||||
<div className="px-4 py-8 text-center text-muted-foreground font-sans text-sm">{empty}</div>
|
||||
) : (
|
||||
proposals.map(p => <ProposalRow key={p.id} p={p} />)
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function ProposalRow({ p }: { p: Proposal }) {
|
||||
const totalVotes = p.outcome_yes + p.outcome_no + p.outcome_abstain
|
||||
return (
|
||||
<Link href={`/proposals/${p.id}`} className="block px-4 py-3 hover:bg-muted transition">
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<p className="font-sans text-sm font-medium text-foreground truncate">{p.title}</p>
|
||||
<ProposalStatusBadge status={p.status} />
|
||||
</div>
|
||||
<p className="font-mono text-[10px] text-muted-foreground">
|
||||
{p.proposal_type.replace(/_/g, ' ')}
|
||||
{p.proposer_name ? ` · proposed by ${p.proposer_name}` : ''}
|
||||
{p.voting_closes_at && p.status === 'open'
|
||||
? ` · closes ${new Date(p.voting_closes_at).toLocaleString('en-US', { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })}`
|
||||
: ''}
|
||||
</p>
|
||||
</div>
|
||||
<div className="text-right flex-shrink-0">
|
||||
<p className="font-mono text-[10px] text-muted-foreground tracking-widest uppercase">
|
||||
{p.outcome_yes} y · {p.outcome_no} n · {p.outcome_abstain} a
|
||||
</p>
|
||||
<p className="font-mono text-[10px] text-muted-foreground mt-0.5">
|
||||
{totalVotes}/{p.quorum_required} for quorum
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
import type { ProposalStatus } from '@/lib/types'
|
||||
|
||||
const STATUS_STYLE: Record<ProposalStatus, string> = {
|
||||
draft: 'text-muted-foreground bg-muted',
|
||||
open: 'text-primary bg-primary/10',
|
||||
decided: 'text-blue-600 bg-blue-50',
|
||||
withdrawn: 'text-muted-foreground bg-muted',
|
||||
expired: 'text-orange-600 bg-orange-50',
|
||||
}
|
||||
|
||||
export function ProposalStatusBadge({ status }: { status: ProposalStatus }) {
|
||||
return (
|
||||
<span className={`font-mono text-[10px] tracking-widest uppercase px-1.5 py-0.5 rounded ${STATUS_STYLE[status]}`}>
|
||||
{status.replace(/_/g, ' ')}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,147 @@
|
||||
import Link from 'next/link'
|
||||
import { redirect } from 'next/navigation'
|
||||
import { createClient } from '@/lib/supabase/server'
|
||||
|
||||
export const dynamic = 'force-dynamic'
|
||||
|
||||
type SkilledMember = {
|
||||
id: string
|
||||
display_name: string | null
|
||||
handle: string | null
|
||||
role: string
|
||||
tier: string
|
||||
skills: string[]
|
||||
interests: string[]
|
||||
willing_to: string[]
|
||||
coi_last_disclosed_at: string | null
|
||||
}
|
||||
|
||||
export default async function RecruitmentPage() {
|
||||
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'])
|
||||
.maybeSingle()
|
||||
if (!member?.space_id) redirect('/signup')
|
||||
if (member.role !== 'admin' && member.role !== 'board') redirect('/dashboard')
|
||||
|
||||
const { data: rowsRaw } = await supabase
|
||||
.from('space_members')
|
||||
.select('id, display_name, handle, role, tier, skills, interests, willing_to, coi_last_disclosed_at')
|
||||
.eq('space_id', member.space_id)
|
||||
.in('status', ['current', 'unverified', 'late'])
|
||||
.eq('approved', true)
|
||||
.order('display_name', { ascending: true })
|
||||
|
||||
const members = ((rowsRaw ?? []) as unknown as SkilledMember[]).filter(
|
||||
m => m.willing_to.length > 0 || m.skills.length > 0,
|
||||
)
|
||||
|
||||
// Group by willing_to role.
|
||||
const byRole = new Map<string, SkilledMember[]>()
|
||||
for (const m of members) {
|
||||
for (const w of m.willing_to) {
|
||||
if (!byRole.has(w)) byRole.set(w, [])
|
||||
byRole.get(w)!.push(m)
|
||||
}
|
||||
}
|
||||
const roleGroups = Array.from(byRole.entries()).sort(([a], [b]) => a.localeCompare(b))
|
||||
|
||||
// Members who only declared skills but no willing_to.
|
||||
const skillsOnly = members.filter(m => m.willing_to.length === 0 && m.skills.length > 0)
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
<div className="bg-sidebar px-4 md:px-6 py-3">
|
||||
<h1 className="text-white font-sans text-lg font-semibold">Recruitment</h1>
|
||||
</div>
|
||||
|
||||
<div className="p-4 md:p-6 max-w-4xl space-y-6">
|
||||
<p className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase">
|
||||
Board / admin view. Read-only.
|
||||
</p>
|
||||
|
||||
{members.length === 0 ? (
|
||||
<div className="bg-card rounded border border-border p-8 text-center">
|
||||
<p className="font-sans text-sm text-foreground mb-1">No members have declared willingness or skills yet.</p>
|
||||
<p className="font-mono text-[10px] text-muted-foreground">
|
||||
Members opt in from their <Link href="/profile" className="text-primary hover:underline">profile</Link> page.
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{roleGroups.length > 0 && (
|
||||
<section>
|
||||
<p className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase mb-3">
|
||||
Willing to take on
|
||||
</p>
|
||||
<div className="space-y-3">
|
||||
{roleGroups.map(([role, list]) => (
|
||||
<div key={role} className="bg-card rounded border border-border p-4">
|
||||
<p className="font-mono text-xs tracking-widest uppercase text-primary mb-2">
|
||||
{role.replace(/_/g, ' ')}
|
||||
</p>
|
||||
<ul className="divide-y divide-border">
|
||||
{list.map(m => (
|
||||
<li key={m.id} className="py-2 flex items-start gap-3">
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="font-sans text-sm text-foreground">
|
||||
{m.display_name ?? 'Unnamed'}
|
||||
{m.handle ? <span className="font-mono text-[10px] text-muted-foreground"> · @{m.handle}</span> : null}
|
||||
</p>
|
||||
<p className="font-mono text-[10px] text-muted-foreground">
|
||||
{m.role} · {m.tier}
|
||||
{m.skills.length > 0 ? ` · skills: ${m.skills.join(', ')}` : ''}
|
||||
</p>
|
||||
</div>
|
||||
{(m.role === 'admin' || m.role === 'board' || m.role === 'treasurer') && (
|
||||
<span
|
||||
className={`font-mono text-[10px] tracking-widest uppercase px-1.5 py-0.5 rounded ${
|
||||
m.coi_last_disclosed_at
|
||||
? 'text-primary bg-primary/10'
|
||||
: 'text-orange-600 bg-orange-50'
|
||||
}`}
|
||||
>
|
||||
{m.coi_last_disclosed_at ? 'COI on file' : 'no COI'}
|
||||
</span>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{skillsOnly.length > 0 && (
|
||||
<section>
|
||||
<p className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase mb-3">
|
||||
Skills declared (no role opt-in)
|
||||
</p>
|
||||
<div className="bg-card rounded border border-border divide-y divide-border">
|
||||
{skillsOnly.map(m => (
|
||||
<div key={m.id} className="p-4">
|
||||
<p className="font-sans text-sm text-foreground">
|
||||
{m.display_name ?? 'Unnamed'}
|
||||
{m.handle ? <span className="font-mono text-[10px] text-muted-foreground"> · @{m.handle}</span> : null}
|
||||
</p>
|
||||
<p className="font-mono text-[10px] text-muted-foreground mt-0.5">
|
||||
skills: {m.skills.join(', ')}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -18,6 +18,13 @@ export default async function SettingsPage() {
|
||||
const { data: integrations } = await supabase
|
||||
.from('integrations').select('*').eq('space_id', member.space_id)
|
||||
|
||||
const { data: areas } = await supabase
|
||||
.from('space_areas')
|
||||
.select('id, code, name, icon, sort_order, is_archived')
|
||||
.eq('space_id', member.space_id)
|
||||
.order('sort_order', { ascending: true })
|
||||
.order('name', { ascending: true })
|
||||
|
||||
const isAdmin = member?.role === 'admin'
|
||||
|
||||
return (
|
||||
@@ -26,6 +33,14 @@ export default async function SettingsPage() {
|
||||
isAdmin={isAdmin}
|
||||
integrations={integrations ?? []}
|
||||
currentRole={member.role}
|
||||
areas={(areas ?? []) as Array<{
|
||||
id: string
|
||||
code: string
|
||||
name: string
|
||||
icon: string | null
|
||||
sort_order: number
|
||||
is_archived: boolean
|
||||
}>}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -2,7 +2,17 @@
|
||||
|
||||
import { useState } from 'react'
|
||||
import { X, Check, Copy, Eye, EyeOff, RotateCcw } from 'lucide-react'
|
||||
import { updateSpaceSettings, saveIntegration, disconnectIntegration, rotateWebhookSecret } from '@/lib/actions'
|
||||
import { updateSpaceSettings, saveIntegration, disconnectIntegration, rotateWebhookSecret, updateSpaceVisibility, createArea, updateArea, deleteArea } from '@/lib/actions'
|
||||
import { financialVisibilities, directoryVisibilities } from '@/lib/validations'
|
||||
|
||||
type Area = {
|
||||
id: string
|
||||
code: string
|
||||
name: string
|
||||
icon: string | null
|
||||
sort_order: number
|
||||
is_archived: boolean
|
||||
}
|
||||
import type { Tables } from '@/types/database'
|
||||
|
||||
type Space = Tables<'spaces'>
|
||||
@@ -13,6 +23,7 @@ interface Props {
|
||||
isAdmin: boolean
|
||||
integrations: Integration[]
|
||||
currentRole: string
|
||||
areas: Area[]
|
||||
}
|
||||
|
||||
const ROLES_INFO = [
|
||||
@@ -87,18 +98,32 @@ const INTEGRATIONS_CONFIG = [
|
||||
},
|
||||
]
|
||||
|
||||
export default function SettingsClient({ space, isAdmin, integrations, currentRole }: Props) {
|
||||
export default function SettingsClient({ space, isAdmin, integrations, currentRole, areas: initialAreas }: Props) {
|
||||
const [activeTab, setActiveTab] = useState<'space' | 'roles' | 'integrations' | 'webhooks'>('space')
|
||||
const [areas, setAreas] = useState<Area[]>(initialAreas)
|
||||
const [newArea, setNewArea] = useState({ code: '', name: '' })
|
||||
const [saving, setSaving] = useState(false)
|
||||
const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null)
|
||||
|
||||
// Space form
|
||||
// Space form (basic + mission statement)
|
||||
const spaceExt = space as Space & {
|
||||
mission_statement?: string | null
|
||||
financial_visibility?: string
|
||||
member_directory_visibility?: string
|
||||
}
|
||||
const [spaceForm, setSpaceForm] = useState({
|
||||
name: space.name || '',
|
||||
slug: space.slug || '',
|
||||
city: space.city || '',
|
||||
require_approval: space.require_approval ?? true,
|
||||
public_member_directory: space.public_member_directory ?? false,
|
||||
mission_statement: spaceExt.mission_statement || '',
|
||||
})
|
||||
|
||||
// Visibility form (governance) — separate server action, separate save.
|
||||
const [visibilityForm, setVisibilityForm] = useState({
|
||||
financial_visibility: (spaceExt.financial_visibility as string | undefined) || 'board_visible',
|
||||
member_directory_visibility: (spaceExt.member_directory_visibility as string | undefined) || 'members_visible',
|
||||
})
|
||||
|
||||
// Integration config modal
|
||||
@@ -124,6 +149,20 @@ export default function SettingsClient({ space, isAdmin, integrations, currentRo
|
||||
setSaving(false)
|
||||
}
|
||||
|
||||
async function handleSaveVisibility(e: React.FormEvent) {
|
||||
e.preventDefault()
|
||||
if (!isAdmin) return
|
||||
setSaving(true)
|
||||
setMessage(null)
|
||||
const result = await updateSpaceVisibility(visibilityForm)
|
||||
if ('error' in result && result.error) {
|
||||
setMessage({ type: 'error', text: result.error })
|
||||
} else {
|
||||
setMessage({ type: 'success', text: 'Visibility updated.' })
|
||||
}
|
||||
setSaving(false)
|
||||
}
|
||||
|
||||
async function handleSaveIntegration(e: React.FormEvent) {
|
||||
e.preventDefault()
|
||||
if (!editingIntegration || !isAdmin) return
|
||||
@@ -284,6 +323,19 @@ export default function SettingsClient({ space, isAdmin, integrations, currentRo
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pt-4 border-t border-border">
|
||||
<label className="font-sans text-sm text-foreground block mb-1.5">Mission statement</label>
|
||||
<textarea
|
||||
value={spaceForm.mission_statement}
|
||||
onChange={e => setSpaceForm(f => ({ ...f, mission_statement: e.target.value }))}
|
||||
disabled={!isAdmin}
|
||||
maxLength={5000}
|
||||
rows={4}
|
||||
placeholder="One or two sentences. Rendered at the foot of every page as a reminder to members and the platform itself."
|
||||
className="w-full bg-background border border-border rounded px-3 py-2 font-sans text-sm text-foreground disabled:opacity-50 focus:outline-none focus:border-primary"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="pt-4 border-t border-border">
|
||||
<p className="font-sans text-sm text-foreground mb-1.5">Invite code</p>
|
||||
<div className="flex items-center gap-2">
|
||||
@@ -317,6 +369,233 @@ export default function SettingsClient({ space, isAdmin, integrations, currentRo
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Governance Visibility (still under Space tab) */}
|
||||
{activeTab === 'space' && (
|
||||
<div className="bg-card rounded border border-border p-6 mt-6">
|
||||
<p className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase mb-1">Visibility</p>
|
||||
<p className="font-mono text-[10px] text-muted-foreground mb-6">
|
||||
Who sees financial data and the member directory. These flags propagate to the
|
||||
/financials page and (in a future pass) to the members directory.
|
||||
</p>
|
||||
|
||||
<form onSubmit={handleSaveVisibility} className="space-y-6">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label className="font-sans text-sm text-foreground block mb-1.5">Financial data visibility</label>
|
||||
<select
|
||||
value={visibilityForm.financial_visibility}
|
||||
onChange={e => setVisibilityForm(f => ({ ...f, financial_visibility: e.target.value }))}
|
||||
disabled={!isAdmin}
|
||||
className="w-full bg-background border border-border rounded px-3 py-2 font-sans text-sm text-foreground disabled:opacity-50 focus:outline-none focus:border-primary"
|
||||
>
|
||||
{financialVisibilities.map(v => (
|
||||
<option key={v} value={v}>{v.replace(/_/g, ' ')}</option>
|
||||
))}
|
||||
</select>
|
||||
<p className="font-mono text-[10px] text-muted-foreground mt-1">
|
||||
Treasurer-only is the default in cooperatives historically. Board-visible is
|
||||
the recommended default. All-members-visible is full transparency.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<label className="font-sans text-sm text-foreground block mb-1.5">Member directory visibility</label>
|
||||
<select
|
||||
value={visibilityForm.member_directory_visibility}
|
||||
onChange={e => setVisibilityForm(f => ({ ...f, member_directory_visibility: e.target.value }))}
|
||||
disabled={!isAdmin}
|
||||
className="w-full bg-background border border-border rounded px-3 py-2 font-sans text-sm text-foreground disabled:opacity-50 focus:outline-none focus:border-primary"
|
||||
>
|
||||
{directoryVisibilities.map(v => (
|
||||
<option key={v} value={v}>{v.replace(/_/g, ' ')}</option>
|
||||
))}
|
||||
</select>
|
||||
<p className="font-mono text-[10px] text-muted-foreground mt-1">
|
||||
Public-members-visible exposes the directory at a public URL. Count-only
|
||||
surfaces the headcount but no individual names.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isAdmin && (
|
||||
<div>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={saving}
|
||||
className="bg-primary text-white font-sans text-sm px-6 py-2 rounded hover:bg-primary/90 transition disabled:opacity-50"
|
||||
>
|
||||
{saving ? 'Saving...' : 'Save visibility'}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</form>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Areas (still under Space tab) */}
|
||||
{activeTab === 'space' && (
|
||||
<div className="bg-card rounded border border-border p-6 mt-6">
|
||||
<p className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase mb-1">Areas</p>
|
||||
<p className="font-mono text-[10px] text-muted-foreground mb-6">
|
||||
Areas appear in the Tasks, Projects, and KB dropdowns. Defaults are seeded when a space
|
||||
is created. Rename, reorder, or archive freely; existing tasks tagged with the old
|
||||
name will not auto-rename.
|
||||
</p>
|
||||
|
||||
<ul className="divide-y divide-border mb-6">
|
||||
{areas.length === 0 ? (
|
||||
<li className="py-3 font-sans text-sm text-muted-foreground">No areas yet.</li>
|
||||
) : (
|
||||
areas.map(area => (
|
||||
<li key={area.id} className="py-2 flex items-center gap-3">
|
||||
<input
|
||||
type="number"
|
||||
value={area.sort_order}
|
||||
onChange={async e => {
|
||||
const next = parseInt(e.target.value || '0', 10)
|
||||
setAreas(prev => prev.map(a => (a.id === area.id ? { ...a, sort_order: next } : a)))
|
||||
}}
|
||||
onBlur={async e => {
|
||||
if (!isAdmin) return
|
||||
const next = parseInt(e.target.value || '0', 10)
|
||||
await updateArea({ areaId: area.id, sort_order: next })
|
||||
}}
|
||||
disabled={!isAdmin}
|
||||
className="w-14 bg-background border border-border rounded px-2 py-1 font-mono text-xs text-foreground disabled:opacity-50 focus:outline-none focus:border-primary"
|
||||
aria-label="Sort order"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
value={area.name}
|
||||
onChange={e => {
|
||||
const next = e.target.value
|
||||
setAreas(prev => prev.map(a => (a.id === area.id ? { ...a, name: next } : a)))
|
||||
}}
|
||||
onBlur={async e => {
|
||||
if (!isAdmin) return
|
||||
const next = e.target.value.trim()
|
||||
if (!next || next === area.name) return
|
||||
const result = await updateArea({ areaId: area.id, name: next })
|
||||
if ('error' in result && result.error) {
|
||||
setMessage({ type: 'error', text: result.error })
|
||||
}
|
||||
}}
|
||||
disabled={!isAdmin}
|
||||
maxLength={80}
|
||||
className={`flex-1 bg-background border border-border rounded px-3 py-1.5 font-sans text-sm rounded ${
|
||||
area.is_archived ? 'text-muted-foreground line-through' : 'text-foreground'
|
||||
} disabled:opacity-50 focus:outline-none focus:border-primary`}
|
||||
/>
|
||||
<span className="font-mono text-[10px] text-muted-foreground/60 w-24 truncate" title={area.code}>
|
||||
{area.code}
|
||||
</span>
|
||||
{isAdmin && (
|
||||
<>
|
||||
<button
|
||||
type="button"
|
||||
onClick={async () => {
|
||||
const result = await updateArea({ areaId: area.id, is_archived: !area.is_archived })
|
||||
if ('error' in result && result.error) {
|
||||
setMessage({ type: 'error', text: result.error })
|
||||
} else {
|
||||
setAreas(prev =>
|
||||
prev.map(a =>
|
||||
a.id === area.id ? { ...a, is_archived: !a.is_archived } : a,
|
||||
),
|
||||
)
|
||||
}
|
||||
}}
|
||||
className="font-mono text-[10px] tracking-widest uppercase border border-border text-muted-foreground hover:text-foreground rounded px-2 py-1"
|
||||
>
|
||||
{area.is_archived ? 'restore' : 'archive'}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={async () => {
|
||||
if (!confirm(`Delete area "${area.name}" entirely? Existing tagged items keep the name as plain text. Use Archive instead if it has been used.`)) return
|
||||
const result = await deleteArea(area.id)
|
||||
if ('error' in result && result.error) {
|
||||
setMessage({ type: 'error', text: result.error })
|
||||
} else {
|
||||
setAreas(prev => prev.filter(a => a.id !== area.id))
|
||||
}
|
||||
}}
|
||||
className="font-mono text-[10px] tracking-widest uppercase border border-border text-muted-foreground hover:text-red-500 hover:border-red-500 rounded px-2 py-1"
|
||||
>
|
||||
delete
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</li>
|
||||
))
|
||||
)}
|
||||
</ul>
|
||||
|
||||
{isAdmin && (
|
||||
<form
|
||||
onSubmit={async e => {
|
||||
e.preventDefault()
|
||||
const code = newArea.code.trim().toLowerCase()
|
||||
const name = newArea.name.trim()
|
||||
if (!code || !name) return
|
||||
setSaving(true)
|
||||
const result = await createArea({ code, name })
|
||||
if ('error' in result && result.error) {
|
||||
setMessage({ type: 'error', text: result.error })
|
||||
} else if ('data' in result && result.data) {
|
||||
setAreas(prev =>
|
||||
[...prev, result.data as Area].sort(
|
||||
(a, b) => a.sort_order - b.sort_order || a.name.localeCompare(b.name),
|
||||
),
|
||||
)
|
||||
setNewArea({ code: '', name: '' })
|
||||
}
|
||||
setSaving(false)
|
||||
}}
|
||||
className="border-t border-border pt-4 grid grid-cols-1 sm:grid-cols-[1fr_2fr_auto] gap-3 items-end"
|
||||
>
|
||||
<div>
|
||||
<label className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase block mb-1">
|
||||
Code
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={newArea.code}
|
||||
onChange={e =>
|
||||
setNewArea(f => ({
|
||||
...f,
|
||||
code: e.target.value.toLowerCase().replace(/[^a-z0-9-]/g, ''),
|
||||
}))
|
||||
}
|
||||
maxLength={40}
|
||||
placeholder="leather"
|
||||
className="w-full bg-background border border-border rounded px-3 py-2 font-mono text-sm text-foreground focus:outline-none focus:border-primary"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase block mb-1">
|
||||
Display name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={newArea.name}
|
||||
onChange={e => setNewArea(f => ({ ...f, name: e.target.value }))}
|
||||
maxLength={80}
|
||||
placeholder="Leatherwork"
|
||||
className="w-full bg-background border border-border rounded px-3 py-2 font-sans text-sm text-foreground focus:outline-none focus:border-primary"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={saving || !newArea.code.trim() || !newArea.name.trim()}
|
||||
className="bg-primary text-white font-sans text-sm px-4 py-2 rounded hover:bg-primary/90 transition disabled:opacity-50"
|
||||
>
|
||||
Add area
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Users & Roles Tab */}
|
||||
{activeTab === 'roles' && (
|
||||
<div className="bg-card rounded border border-border p-6">
|
||||
|
||||
@@ -16,10 +16,27 @@ export default async function TasksPage() {
|
||||
const spaceId = member?.space_id
|
||||
if (!spaceId) return null
|
||||
|
||||
const [{ data: tasks }, { data: members }] = await Promise.all([
|
||||
const [{ data: tasks }, { data: members }, { data: areasRaw }] = await Promise.all([
|
||||
supabase.from('tasks').select('*').eq('space_id', spaceId).order('created_at', { ascending: false }),
|
||||
supabase.from('space_members').select('id, display_name, user_id').eq('space_id', spaceId).in('status', ['current', 'late']),
|
||||
supabase
|
||||
.from('space_areas')
|
||||
.select('name')
|
||||
.eq('space_id', spaceId)
|
||||
.eq('is_archived', false)
|
||||
.order('sort_order', { ascending: true })
|
||||
.order('name', { ascending: true }),
|
||||
])
|
||||
|
||||
return <TasksClient tasks={tasks ?? []} members={members ?? []} currentUserId={user.id} spaceId={spaceId} />
|
||||
const areas = (areasRaw ?? []).map((a: { name: string }) => a.name)
|
||||
|
||||
return (
|
||||
<TasksClient
|
||||
tasks={tasks ?? []}
|
||||
members={members ?? []}
|
||||
currentUserId={user.id}
|
||||
spaceId={spaceId}
|
||||
areas={areas}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -12,12 +12,15 @@ interface Props {
|
||||
members: Pick<Tables<'space_members'>, 'id' | 'display_name' | 'user_id'>[]
|
||||
currentUserId: string
|
||||
spaceId: string
|
||||
/** Per-space area names. Sourced from `space_areas` server-side. */
|
||||
areas?: string[]
|
||||
}
|
||||
|
||||
const AREAS = ['3D Printing', 'Electronics', 'Woodshop', 'Laser', 'Metal Shop', 'Facilities', 'Admin', 'Kitchen', 'General']
|
||||
const DEFAULT_AREAS = ['3D Printing', 'Electronics', 'Woodshop', 'Laser', 'Metal Shop', 'Facilities', 'Admin', 'Kitchen', 'General']
|
||||
const RECURRENCES = ['none', 'daily', 'weekly', 'biweekly', 'monthly']
|
||||
|
||||
export function TasksClient({ tasks: initialTasks, members, currentUserId, spaceId }: Props) {
|
||||
export function TasksClient({ tasks: initialTasks, members, currentUserId, spaceId, areas }: Props) {
|
||||
const AREAS = areas && areas.length > 0 ? areas : DEFAULT_AREAS
|
||||
const [tasks, setTasks] = useState<Task[]>(initialTasks)
|
||||
const [activeTab, setActiveTab] = useState<'chores' | 'ongoing' | 'mine' | 'done'>('chores')
|
||||
const [filterArea, setFilterArea] = useState('')
|
||||
|
||||
Reference in New Issue
Block a user