feat(certifications): per-member award/revoke panel on Members
A "Certs" column appears for anyone holding certifications.grant (the Instructor capability), independent of admin/board, so a non-admin instructor can reach it. The button opens a self-contained dialog that loads the member's grants and the active cert catalog, and supports award (with optional note + expiry override), soft revoke, and renew. Status badges come from the shared certifications-logic. The members server page resolves certifications.grant via the RPC and passes it in.
This commit is contained in:
Moheeb Zara
@@ -0,0 +1,240 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect, useState, useCallback } from 'react'
|
||||
import { toast } from 'sonner'
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
|
||||
import { useConfirm } from '@/components/ui/confirm'
|
||||
import {
|
||||
listMemberCertifications,
|
||||
listCertifications,
|
||||
grantCertification,
|
||||
revokeCertification,
|
||||
renewCertification,
|
||||
} from '@/lib/actions'
|
||||
import {
|
||||
certificationStatus,
|
||||
CERT_STATUS_LABEL,
|
||||
type CertStatus,
|
||||
} from '@/lib/certifications-logic'
|
||||
|
||||
type Grant = {
|
||||
id: string
|
||||
certification_id: string
|
||||
granted_at: string
|
||||
expires_at: string | null
|
||||
revoked_at: string | null
|
||||
revoked_reason: string | null
|
||||
note: string | null
|
||||
certifications: { name: string; validity_months: number | null; is_active: boolean } | null
|
||||
}
|
||||
|
||||
type CertType = {
|
||||
id: string
|
||||
name: string
|
||||
is_active: boolean
|
||||
}
|
||||
|
||||
const STATUS_CLASS: Record<CertStatus, string> = {
|
||||
active: 'text-primary bg-primary/10 border-primary/20',
|
||||
expiring_soon: 'text-amber-600 bg-amber-50 border-amber-200',
|
||||
expired: 'text-red-600 bg-red-50 border-red-200',
|
||||
revoked: 'text-muted-foreground bg-muted border-border',
|
||||
}
|
||||
|
||||
export function MemberCertificationsDialog({
|
||||
member,
|
||||
onClose,
|
||||
}: {
|
||||
member: { id: string; display_name: string | null } | null
|
||||
onClose: () => void
|
||||
}) {
|
||||
const confirm = useConfirm()
|
||||
const open = !!member
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [grants, setGrants] = useState<Grant[]>([])
|
||||
const [types, setTypes] = useState<CertType[]>([])
|
||||
const [certId, setCertId] = useState('')
|
||||
const [note, setNote] = useState('')
|
||||
const [expires, setExpires] = useState('')
|
||||
const [busy, setBusy] = useState(false)
|
||||
|
||||
const load = useCallback(async (memberId: string) => {
|
||||
setLoading(true)
|
||||
const [g, t] = await Promise.all([
|
||||
listMemberCertifications({ memberId }),
|
||||
listCertifications(),
|
||||
])
|
||||
setLoading(false)
|
||||
if ('error' in g && g.error) {
|
||||
toast.error(g.error)
|
||||
} else {
|
||||
setGrants(((g as { data: Grant[] }).data) ?? [])
|
||||
}
|
||||
if (!('error' in t) || !t.error) {
|
||||
setTypes(((t as { data: CertType[] }).data ?? []).filter(c => c.is_active))
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
if (member) {
|
||||
setCertId('')
|
||||
setNote('')
|
||||
setExpires('')
|
||||
load(member.id)
|
||||
}
|
||||
}, [member, load])
|
||||
|
||||
async function onGrant(e: React.FormEvent) {
|
||||
e.preventDefault()
|
||||
if (!member) return
|
||||
if (!certId) {
|
||||
toast.error('Pick a certification')
|
||||
return
|
||||
}
|
||||
setBusy(true)
|
||||
const res = await grantCertification({
|
||||
memberId: member.id,
|
||||
certificationId: certId,
|
||||
note: note.trim() || null,
|
||||
expires_at: expires || null,
|
||||
})
|
||||
setBusy(false)
|
||||
if ('error' in res && res.error) {
|
||||
toast.error(res.error)
|
||||
return
|
||||
}
|
||||
toast.success('Certification awarded')
|
||||
setCertId('')
|
||||
setNote('')
|
||||
setExpires('')
|
||||
load(member.id)
|
||||
}
|
||||
|
||||
async function onRevoke(g: Grant) {
|
||||
const ok = await confirm({
|
||||
title: 'Revoke certification',
|
||||
description: `Revoke "${g.certifications?.name ?? 'this certification'}" from ${member?.display_name ?? 'this member'}? The record is kept as history.`,
|
||||
confirmText: 'Revoke',
|
||||
destructive: true,
|
||||
})
|
||||
if (!ok || !member) return
|
||||
const res = await revokeCertification({ memberCertificationId: g.id })
|
||||
if ('error' in res && res.error) {
|
||||
toast.error(res.error)
|
||||
return
|
||||
}
|
||||
toast.success('Revoked')
|
||||
load(member.id)
|
||||
}
|
||||
|
||||
async function onRenew(g: Grant) {
|
||||
if (!member) return
|
||||
const res = await renewCertification({ memberCertificationId: g.id })
|
||||
if ('error' in res && res.error) {
|
||||
toast.error(res.error)
|
||||
return
|
||||
}
|
||||
toast.success('Renewed')
|
||||
load(member.id)
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={o => { if (!o) onClose() }}>
|
||||
<DialogContent className="sm:max-w-lg max-h-[90vh] overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Certifications — {member?.display_name ?? 'Member'}</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<form onSubmit={onGrant} className="space-y-2 border border-border rounded p-3 bg-background">
|
||||
<p className="font-mono text-[10px] uppercase tracking-widest text-muted-foreground">Award a certification</p>
|
||||
<select
|
||||
value={certId}
|
||||
onChange={e => setCertId(e.target.value)}
|
||||
className="w-full bg-background border border-border text-foreground font-sans text-sm rounded px-2 py-2 focus:outline-none focus:border-primary"
|
||||
>
|
||||
<option value="">Select a certification…</option>
|
||||
{types.map(t => (
|
||||
<option key={t.id} value={t.id}>{t.name}</option>
|
||||
))}
|
||||
</select>
|
||||
<input
|
||||
type="text"
|
||||
value={note}
|
||||
maxLength={2000}
|
||||
onChange={e => setNote(e.target.value)}
|
||||
placeholder="Note (optional, e.g. completed in class)"
|
||||
className="w-full bg-background border border-border text-foreground font-sans text-sm rounded px-2 py-2 focus:outline-none focus:border-primary"
|
||||
/>
|
||||
<label className="block font-mono text-[10px] text-muted-foreground">
|
||||
Expiry override (optional — defaults to the cert’s validity period)
|
||||
<input
|
||||
type="date"
|
||||
value={expires}
|
||||
onChange={e => setExpires(e.target.value)}
|
||||
className="mt-1 w-full bg-background border border-border text-foreground font-mono text-xs rounded px-2 py-2 focus:outline-none focus:border-primary"
|
||||
/>
|
||||
</label>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={busy}
|
||||
className="bg-primary text-white text-xs font-sans px-3 py-2 rounded hover:bg-primary/90 transition disabled:opacity-60"
|
||||
>
|
||||
Award certification
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div className="mt-2">
|
||||
{loading ? (
|
||||
<p className="font-mono text-xs text-muted-foreground py-4">Loading…</p>
|
||||
) : grants.length === 0 ? (
|
||||
<p className="font-mono text-xs text-muted-foreground py-4">No certifications yet.</p>
|
||||
) : (
|
||||
<ul className="divide-y divide-border">
|
||||
{grants.map(g => {
|
||||
const status = certificationStatus(g)
|
||||
return (
|
||||
<li key={g.id} className="py-3 flex items-start justify-between gap-3 flex-wrap">
|
||||
<div className="min-w-0">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<span className="font-sans text-sm font-medium text-foreground">
|
||||
{g.certifications?.name ?? 'Certification'}
|
||||
</span>
|
||||
<span className={`font-mono text-[10px] px-1.5 py-0.5 rounded border ${STATUS_CLASS[status]}`}>
|
||||
{CERT_STATUS_LABEL[status]}
|
||||
</span>
|
||||
</div>
|
||||
<p className="font-mono text-[10px] text-muted-foreground mt-0.5">
|
||||
granted {new Date(g.granted_at).toLocaleDateString()}
|
||||
{g.expires_at ? ` · expires ${new Date(g.expires_at).toLocaleDateString()}` : ' · no expiry'}
|
||||
{g.revoked_at ? ` · revoked ${new Date(g.revoked_at).toLocaleDateString()}` : ''}
|
||||
</p>
|
||||
{g.note && <p className="font-sans text-xs text-muted-foreground mt-0.5">{g.note}</p>}
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5">
|
||||
{!g.revoked_at && (
|
||||
<>
|
||||
<button
|
||||
onClick={() => onRenew(g)}
|
||||
className="font-mono text-[10px] border border-border px-2 py-1 rounded hover:border-primary hover:text-primary transition"
|
||||
>
|
||||
Renew
|
||||
</button>
|
||||
<button
|
||||
onClick={() => onRevoke(g)}
|
||||
className="font-mono text-[10px] border border-border px-2 py-1 rounded hover:border-red-500 hover:text-red-500 transition"
|
||||
>
|
||||
Revoke
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user