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