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.

app/(app)/members/members-client.tsx

@@ -10,6 +10,7 @@ import { useRouter } from 'next/navigation'
 import type { Tables } from '@/types/database'
 import { PageTitle } from '@/components/ui/page-title'
 import { useConfirm } from '@/components/ui/confirm'
+import { MemberCertificationsDialog } from '@/components/certifications/member-certifications-dialog'
 
 type Member = Tables<'space_members'>
 type AreaLeadRole = { id: string; area_name: string; lead_id: string | null }
@@ -22,6 +23,10 @@ interface Props {
   // so the members page is a real place to create and share a join link
   // (the first-run "Invite or add members" step lands here).
   inviteSlot?: ReactNode
+  // True when the viewer holds certifications.grant (the Instructor
+  // capability), independent of admin/board. Adds a per-member
+  // certifications panel reachable by non-admin instructors.
+  canGrantCerts?: boolean
 }
 
 const TIER_COLORS: Record<string, string> = {
@@ -33,8 +38,9 @@ const TIER_COLORS: Record<string, string> = {
 
 const isAdmin = (role: string) => role === 'admin' || role === 'board'
 
-export function MembersClient({ members: initialMembers, currentRole, areaLeadRoles = [], inviteSlot }: Props) {
+export function MembersClient({ members: initialMembers, currentRole, areaLeadRoles = [], inviteSlot, canGrantCerts = false }: Props) {
   const router = useRouter()
+  const [certMember, setCertMember] = useState<Member | null>(null)
   const confirm = useConfirm()
   const [members, setMembers] = useState<Member[]>(initialMembers)
 
@@ -271,6 +277,9 @@ export function MembersClient({ members: initialMembers, currentRole, areaLeadRo
                 <th className="px-4 py-3 text-left font-mono text-[10px] tracking-widest text-muted-foreground hidden md:table-cell">JOINED</th>
                 <th className="px-4 py-3 text-left font-mono text-[10px] tracking-widest text-muted-foreground hidden lg:table-cell">LAST PAYMENT</th>
                 <th className="px-4 py-3 text-left font-mono text-[10px] tracking-widest text-muted-foreground">STATUS</th>
+                {canGrantCerts && (
+                  <th className="px-4 py-3 text-left font-mono text-[10px] tracking-widest text-muted-foreground">CERTS</th>
+                )}
                 {isAdmin(currentRole) && (
                   <th className="px-4 py-3 text-left font-mono text-[10px] tracking-widest text-muted-foreground">ACTIONS</th>
                 )}
@@ -325,6 +334,16 @@ export function MembersClient({ members: initialMembers, currentRole, areaLeadRo
                         <span className="font-mono text-xs text-muted-foreground">{m.status}</span>
                       )}
                     </td>
+                    {canGrantCerts && (
+                      <td className="px-4 py-3">
+                        <button
+                          onClick={() => setCertMember(m)}
+                          className="font-mono text-[10px] border border-border px-3 py-2 min-h-[44px] rounded hover:border-primary hover:text-primary transition"
+                        >
+                          CERTS
+                        </button>
+                      </td>
+                    )}
                     {isAdmin(currentRole) && (
                       <td className="px-4 py-3">
                         <div className="flex items-center gap-2">
@@ -370,7 +389,7 @@ export function MembersClient({ members: initialMembers, currentRole, areaLeadRo
                 )
               }) : (
                 <tr>
-                  <td colSpan={isAdmin(currentRole) ? 6 : 5} className="p-0">
+                  <td colSpan={5 + (canGrantCerts ? 1 : 0) + (isAdmin(currentRole) ? 1 : 0)} className="p-0">
                     <Empty className="border-0">
                       <EmptyHeader>
                         <EmptyMedia variant="icon"><Users /></EmptyMedia>
@@ -424,6 +443,13 @@ export function MembersClient({ members: initialMembers, currentRole, areaLeadRo
           </form>
         </DialogContent>
       </Dialog>
+
+      {canGrantCerts && (
+        <MemberCertificationsDialog
+          member={certMember ? { id: certMember.id, display_name: certMember.display_name } : null}
+          onClose={() => setCertMember(null)}
+        />
+      )}
     </div>
   )
 }

app/(app)/members/page.tsx

@@ -87,10 +87,20 @@ export default async function MembersPage() {
         .order('created_at', { ascending: false })
     : { data: [] }
 
+  // certifications.grant (the Instructor capability) is independent of
+  // admin/board, so check it explicitly to decide whether to show the
+  // per-member certifications panel.
+  const { data: canGrantCerts } = await supabase.rpc('user_has_permission', {
+    uid: user.id,
+    sid: self.space_id,
+    perm: 'certifications.grant',
+  })
+
   return (
     <MembersClient
       members={members ?? []}
       currentRole={self.role}
+      canGrantCerts={!!canGrantCerts}
       areaLeadRoles={(areaLeadRoles ?? []) as Array<{ id: string; area_name: string; lead_id: string | null }>}
       inviteSlot={
         canInvite ? (

components/certifications/member-certifications-dialog.tsx

@@ -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&rsquo;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>
+  )
+}