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
@@ -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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user