feat(forms): per-member 'Forms submitted' view on the members page

listMemberSubmissions (forms.manage, RLS-honoring, metadata only) + a
FORMS column/button -> MemberFormsDialog listing the member's
submissions (title, kind, version, date) with a link to the audited
forms results surface. Gated by forms.manage (matches existing
submission-read RLS; no new exposure).
This commit is contained in:
Moheeb Zara
2026-05-16 23:50:52 -07:00
parent 832a0aeba2
commit ed8d629472
5 changed files with 162 additions and 2 deletions
+27 -2
View File
@@ -12,6 +12,7 @@ import { PageTitle } from '@/components/ui/page-title'
import { useConfirm } from '@/components/ui/confirm' import { useConfirm } from '@/components/ui/confirm'
import { MemberCertificationsDialog } from '@/components/certifications/member-certifications-dialog' import { MemberCertificationsDialog } from '@/components/certifications/member-certifications-dialog'
import { MemberCardsDialog } from '@/components/door/member-cards-dialog' import { MemberCardsDialog } from '@/components/door/member-cards-dialog'
import { MemberFormsDialog } from '@/components/forms/member-forms-dialog'
type Member = Tables<'space_members'> type Member = Tables<'space_members'>
type AreaLeadRole = { id: string; area_name: string; lead_id: string | null } type AreaLeadRole = { id: string; area_name: string; lead_id: string | null }
@@ -31,6 +32,9 @@ interface Props {
// True when the viewer holds door.manage. Adds a per-member access-cards // True when the viewer holds door.manage. Adds a per-member access-cards
// panel (card UID is a credential; managers only). // panel (card UID is a credential; managers only).
canManageCards?: boolean canManageCards?: boolean
// True when the viewer holds forms.manage. Adds a per-member panel
// listing the forms that member has submitted.
canViewForms?: boolean
} }
const TIER_COLORS: Record<string, string> = { const TIER_COLORS: Record<string, string> = {
@@ -42,10 +46,11 @@ const TIER_COLORS: Record<string, string> = {
const isAdmin = (role: string) => role === 'admin' || role === 'board' const isAdmin = (role: string) => role === 'admin' || role === 'board'
export function MembersClient({ members: initialMembers, currentRole, areaLeadRoles = [], inviteSlot, canGrantCerts = false, canManageCards = false }: Props) { export function MembersClient({ members: initialMembers, currentRole, areaLeadRoles = [], inviteSlot, canGrantCerts = false, canManageCards = false, canViewForms = false }: Props) {
const router = useRouter() const router = useRouter()
const [certMember, setCertMember] = useState<Member | null>(null) const [certMember, setCertMember] = useState<Member | null>(null)
const [cardMember, setCardMember] = useState<Member | null>(null) const [cardMember, setCardMember] = useState<Member | null>(null)
const [formsMember, setFormsMember] = useState<Member | null>(null)
const confirm = useConfirm() const confirm = useConfirm()
const [members, setMembers] = useState<Member[]>(initialMembers) const [members, setMembers] = useState<Member[]>(initialMembers)
@@ -288,6 +293,9 @@ export function MembersClient({ members: initialMembers, currentRole, areaLeadRo
{canManageCards && ( {canManageCards && (
<th className="px-4 py-3 text-left font-mono text-[10px] tracking-widest text-muted-foreground">CARDS</th> <th className="px-4 py-3 text-left font-mono text-[10px] tracking-widest text-muted-foreground">CARDS</th>
)} )}
{canViewForms && (
<th className="px-4 py-3 text-left font-mono text-[10px] tracking-widest text-muted-foreground">FORMS</th>
)}
{isAdmin(currentRole) && ( {isAdmin(currentRole) && (
<th className="px-4 py-3 text-left font-mono text-[10px] tracking-widest text-muted-foreground">ACTIONS</th> <th className="px-4 py-3 text-left font-mono text-[10px] tracking-widest text-muted-foreground">ACTIONS</th>
)} )}
@@ -362,6 +370,16 @@ export function MembersClient({ members: initialMembers, currentRole, areaLeadRo
</button> </button>
</td> </td>
)} )}
{canViewForms && (
<td className="px-4 py-3">
<button
onClick={() => setFormsMember(m)}
className="font-mono text-[10px] border border-border px-3 py-2 min-h-[44px] rounded hover:border-primary hover:text-primary transition"
>
FORMS
</button>
</td>
)}
{isAdmin(currentRole) && ( {isAdmin(currentRole) && (
<td className="px-4 py-3"> <td className="px-4 py-3">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
@@ -407,7 +425,7 @@ export function MembersClient({ members: initialMembers, currentRole, areaLeadRo
) )
}) : ( }) : (
<tr> <tr>
<td colSpan={5 + (canGrantCerts ? 1 : 0) + (canManageCards ? 1 : 0) + (isAdmin(currentRole) ? 1 : 0)} className="p-0"> <td colSpan={5 + (canGrantCerts ? 1 : 0) + (canManageCards ? 1 : 0) + (canViewForms ? 1 : 0) + (isAdmin(currentRole) ? 1 : 0)} className="p-0">
<Empty className="border-0"> <Empty className="border-0">
<EmptyHeader> <EmptyHeader>
<EmptyMedia variant="icon"><Users /></EmptyMedia> <EmptyMedia variant="icon"><Users /></EmptyMedia>
@@ -475,6 +493,13 @@ export function MembersClient({ members: initialMembers, currentRole, areaLeadRo
onClose={() => setCardMember(null)} onClose={() => setCardMember(null)}
/> />
)} )}
{canViewForms && (
<MemberFormsDialog
member={formsMember ? { id: formsMember.id, display_name: formsMember.display_name } : null}
onClose={() => setFormsMember(null)}
/>
)}
</div> </div>
) )
} }
+6
View File
@@ -100,6 +100,11 @@ export default async function MembersPage() {
sid: self.space_id, sid: self.space_id,
perm: 'door.manage', perm: 'door.manage',
}) })
const { data: canViewForms } = await supabase.rpc('user_has_permission', {
uid: user.id,
sid: self.space_id,
perm: 'forms.manage',
})
return ( return (
<MembersClient <MembersClient
@@ -107,6 +112,7 @@ export default async function MembersPage() {
currentRole={self.role} currentRole={self.role}
canGrantCerts={!!canGrantCerts} canGrantCerts={!!canGrantCerts}
canManageCards={!!canManageCards} canManageCards={!!canManageCards}
canViewForms={!!canViewForms}
areaLeadRoles={(areaLeadRoles ?? []) as Array<{ id: string; area_name: string; lead_id: string | null }>} areaLeadRoles={(areaLeadRoles ?? []) as Array<{ id: string; area_name: string; lead_id: string | null }>}
inviteSlot={ inviteSlot={
canInvite ? ( canInvite ? (
+86
View File
@@ -0,0 +1,86 @@
'use client'
import { useEffect, useState, useCallback } from 'react'
import Link from 'next/link'
import { toast } from 'sonner'
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
import { Badge } from '@/components/ui/badge'
import { listMemberSubmissions } from '@/lib/actions'
type Submission = {
id: string
formId: string
title: string
kind: string
version: number
submittedAt: string
}
export function MemberFormsDialog({
member,
onClose,
}: {
member: { id: string; display_name: string | null } | null
onClose: () => void
}) {
const open = !!member
const [loading, setLoading] = useState(false)
const [rows, setRows] = useState<Submission[]>([])
const load = useCallback(async (memberId: string) => {
setLoading(true)
const res = await listMemberSubmissions({ memberId })
setLoading(false)
if ('error' in res && res.error) {
toast.error(res.error)
return
}
setRows(((res as { data: Submission[] }).data) ?? [])
}, [])
useEffect(() => {
if (member) load(member.id)
}, [member, load])
return (
<Dialog open={open} onOpenChange={o => { if (!o) onClose() }}>
<DialogContent className="sm:max-w-lg max-h-[90vh] overflow-y-auto">
<DialogHeader>
<DialogTitle>Forms submitted — {member?.display_name ?? 'Member'}</DialogTitle>
</DialogHeader>
{loading ? (
<p className="font-mono text-[11px] text-muted-foreground py-4">Loading…</p>
) : rows.length === 0 ? (
<p className="font-sans text-sm text-muted-foreground py-4">
This member has no submitted forms on record. Submissions link automatically
when the submitter email matches the member.
</p>
) : (
<ul className="divide-y divide-border rounded border border-border">
{rows.map(s => (
<li key={s.id} className="flex items-center justify-between gap-3 px-3 py-2.5">
<div className="min-w-0">
<div className="flex items-center gap-2 flex-wrap">
<span className="font-sans text-sm text-foreground truncate">{s.title}</span>
{s.kind === 'waiver' && <Badge variant="outline">waiver</Badge>}
<span className="font-mono text-[10px] text-muted-foreground">v{s.version}</span>
</div>
<p className="font-mono text-[10px] text-muted-foreground mt-0.5">
{new Date(s.submittedAt).toLocaleString()}
</p>
</div>
<Link
href={`/forms/${s.formId}/results`}
className="font-mono text-[10px] border border-border px-3 py-2 rounded hover:border-primary hover:text-primary transition shrink-0"
>
View
</Link>
</li>
))}
</ul>
)}
</DialogContent>
</Dialog>
)
}
+39
View File
@@ -19,6 +19,7 @@ import {
formIdSchema, formIdSchema,
submitFormSchema, submitFormSchema,
linkSubmissionsSchema, linkSubmissionsSchema,
memberSubmissionsSchema,
getPublicFormSchema, getPublicFormSchema,
} from '@/lib/validations' } from '@/lib/validations'
import { parseFormSchema, validateAnswers } from '@/lib/forms-schema' import { parseFormSchema, validateAnswers } from '@/lib/forms-schema'
@@ -538,3 +539,41 @@ export async function linkSubmissionsForMember(input: unknown) {
) )
return { data: { linked: linked?.length ?? 0 } } return { data: { linked: linked?.length ?? 0 } }
} }
/**
* The forms a given member has submitted (for the per-member panel on the
* members page). forms.manage gated; the gate's client honors the
* form_submissions/forms RLS (forms.manage), so no service-client bypass.
* Metadata only -- answers stay in the audited results surface.
*/
export async function listMemberSubmissions(input: unknown) {
const gate = await requireFormsManager()
if (!gate.ok) return { error: gate.error }
const { supabase, member } = gate
const v = parseInput(memberSubmissionsSchema, input)
if (!v.ok) return { error: v.error }
const { data, error } = await supabase
.from('form_submissions')
.select('id, form_id, form_version, created_at, forms(title, kind, slug)')
.eq('space_id', member.space_id)
.eq('member_id', v.data.memberId)
.order('created_at', { ascending: false })
if (error) return { error: error.message }
return {
data: (data ?? []).map(s => {
const f = s.forms as { title: string; kind: string; slug: string } | { title: string; kind: string; slug: string }[] | null
const form = Array.isArray(f) ? f[0] : f
return {
id: s.id as string,
formId: s.form_id as string,
title: form?.title ?? 'Form',
kind: form?.kind ?? 'form',
version: s.form_version as number,
submittedAt: s.created_at as string,
}
}),
}
}
+4
View File
@@ -673,6 +673,10 @@ export const linkSubmissionsSchema = z.object({
email: emailField(), email: emailField(),
}) })
export const memberSubmissionsSchema = z.object({
memberId: z.string().uuid('Invalid member ID'),
})
export const getPublicFormSchema = z.object({ export const getPublicFormSchema = z.object({
space: z.string().min(1).max(100), space: z.string().min(1).max(100),
slug: formSlug, slug: formSlug,