Add notification preferences and alternate dues payment options

Notification preferences (migration 048):
- Per-member opt-out of muteable categories (bookings, classes, forms,
  admin alerts); billing is always-on. Opt-out model, default on.
- Dispatcher reads prefs and marks muted outbox rows 'skipped' instead
  of sending; pure isMuted logic, fail-open on a prefs lookup error.
- notification_preferences table (default-deny RLS); /me toggles and
  self-view via validated service-client actions.

Alternate dues payment methods (migration 049):
- Admin sets external pay-here URLs per platform (PayPal/Zeffy/Venmo)
  in /settings; members see active ones on /me and pay off-platform;
  the treasurer reconciles manually (platform pre-tagged). https-only.
- dues_payment_methods table (SELECT space member, write admin/board).

/me visual pass:
- Restore the chip/preset profile editor (skills/interests/willing-to/
  affiliations); promote ChipInput and presets to shared modules.
- Gate the Stripe pay-dues button on whether the space has Stripe
  configured; show external links or a contact-admin note otherwise.

app/(app)/me/me-portal-client.tsx

@@ -10,9 +10,11 @@ import {
 import { SIGNUP_STATUS_LABEL, SESSION_STATUS_LABEL } from '@/lib/classes-logic'
 import { RESERVATION_STATUS_LABEL } from '@/lib/equipment-logic'
 import { presenceStatus } from '@/lib/presence-logic'
-import { DuesCard } from '@/components/billing/dues-card'
+import { DuesCard, type DuesMethod } from '@/components/billing/dues-card'
 import { ProfileForm, type ProfileInitial } from './profile-form'
 import { CancelAction } from './cancel-action'
+import { NotificationPrefs } from './notification-prefs'
+import type { PrefMap } from '@/lib/notifications-prefs-logic'
 import { cancelMySignup, cancelReservation } from '@/lib/actions'
 
 const STATUS_VARIANT: Record<CertStatus, 'default' | 'outline'> = {
@@ -54,15 +56,17 @@ export type MyVisit = { id: string; checked_in_at: string; checked_out_at: strin
 export type MyNotif = { id: string; type: string; subject: string; status: string; createdAt: string; sentAt: string | null }
 export type MyPayment = { id: string; amount: number; currency: string; platform: string; description: string | null; status: string; date: string }
 export type HeldPermission = { code: string; label: string }
-export type Billing = { status: string | null; currentPeriodEnd: string | null; hasCustomer: boolean } | null
+export type Billing = { status: string | null; currentPeriodEnd: string | null; hasCustomer: boolean; configured: boolean } | null
 
 type Props = {
   profile: ProfileInitial
   grants: Grant[]
   held: HeldPermission[]
   billing: Billing
+  duesMethods: DuesMethod[]
   payments: MyPayment[]
   notifs: MyNotif[]
+  notifPrefs: PrefMap
   classSignups: ClassSignup[]
   reservations: Reservation[]
   myCards: MyCard[]
@@ -76,8 +80,10 @@ export function MePortalClient({
   grants,
   held,
   billing,
+  duesMethods,
   payments,
   notifs,
+  notifPrefs,
   classSignups,
   reservations,
   myCards,
@@ -135,7 +141,7 @@ export function MePortalClient({
         <TabsContent value="membership" className="space-y-8">
           <section>
             <h2 className={sectionH}>Dues</h2>
-            <DuesCard billing={billing} />
+            <DuesCard billing={billing} methods={duesMethods} />
           </section>
 
           <section>
@@ -210,6 +216,14 @@ export function MePortalClient({
         </TabsContent>
 
         <TabsContent value="activity" className="space-y-8">
+          <section>
+            <h2 className={sectionH}>Email preferences</h2>
+            <NotificationPrefs initial={notifPrefs} />
+            <p className="font-sans text-xs text-muted-foreground mt-3">
+              Billing emails (dues receipts, payment alerts) are always sent.
+            </p>
+          </section>
+
           <section>
             <h2 className={sectionH}>Notifications</h2>
             {notifs.length === 0 ? (
@@ -228,7 +242,13 @@ export function MePortalClient({
                       </p>
                     </div>
                     <Badge variant={n.status === 'sent' ? 'default' : 'outline'}>
-                      {n.status === 'sent' ? 'Sent' : n.status === 'failed' ? 'Failed' : 'Queued'}
+                      {n.status === 'sent'
+                        ? 'Sent'
+                        : n.status === 'failed'
+                          ? 'Failed'
+                          : n.status === 'skipped'
+                            ? 'Muted'
+                            : 'Queued'}
                     </Badge>
                   </li>
                 ))}

app/(app)/me/notification-prefs.tsx

@@ -0,0 +1,52 @@
+'use client'
+
+import { useState, useTransition } from 'react'
+import { toast } from 'sonner'
+import { Switch } from '@/components/ui/switch'
+import {
+  CATEGORY_META,
+  type PrefMap,
+  type NotificationCategory,
+} from '@/lib/notifications-prefs-logic'
+import { setMyNotificationPreference } from '@/lib/actions'
+
+// Per-category email opt-out toggles. Optimistic: the switch flips immediately
+// and reverts if the server action fails. Billing is never shown (always on).
+export function NotificationPrefs({ initial }: { initial: PrefMap }) {
+  const [prefs, setPrefs] = useState<PrefMap>(initial)
+  const [pending, startTransition] = useTransition()
+
+  function toggle(category: NotificationCategory, next: boolean) {
+    const prev = prefs[category] ?? true
+    setPrefs(p => ({ ...p, [category]: next }))
+    startTransition(async () => {
+      const res = await setMyNotificationPreference({ category, enabled: next })
+      if ('error' in res) {
+        setPrefs(p => ({ ...p, [category]: prev }))
+        toast.error(res.error)
+      }
+    })
+  }
+
+  return (
+    <ul className="divide-y rounded-lg border border-border">
+      {CATEGORY_META.map(meta => {
+        const enabled = prefs[meta.category] ?? true
+        return (
+          <li key={meta.category} className="p-4 flex items-center justify-between gap-4">
+            <div className="min-w-0">
+              <span className="font-sans text-sm text-foreground">{meta.label}</span>
+              <p className="font-sans text-xs text-muted-foreground mt-0.5">{meta.description}</p>
+            </div>
+            <Switch
+              checked={enabled}
+              disabled={pending}
+              onCheckedChange={next => toggle(meta.category, next)}
+              aria-label={`Email me about ${meta.label}`}
+            />
+          </li>
+        )
+      })}
+    </ul>
+  )
+}

app/(app)/me/page.tsx

@@ -3,7 +3,9 @@ import { createClient } from '@/lib/supabase/server'
 import { createAdminClient } from '@/lib/supabase/admin'
 import { PageHeader, PageTitle } from '@/components/ui/page-title'
 import { PERMISSIONS, PERMISSION_CODES } from '@/lib/permissions-catalog'
-import { getMyClassSignups, getMyReservations, getMyCards, getMyVisits, getMyBilling, getMyNotifications, getMyPayments } from '@/lib/actions'
+import { getMyClassSignups, getMyReservations, getMyCards, getMyVisits, getMyBilling, getMyNotifications, getMyNotificationPreferences, getMyPayments, listActiveDuesPaymentMethods } from '@/lib/actions'
+import type { PrefMap } from '@/lib/notifications-prefs-logic'
+import type { DuesMethod } from '@/components/billing/dues-card'
 import {
   MePortalClient,
   type Grant,
@@ -107,12 +109,20 @@ export default async function MePage() {
 
   const billingRes = await getMyBilling()
   const billing = ('data' in billingRes ? billingRes.data : null) as
-    | { status: string | null; currentPeriodEnd: string | null; hasCustomer: boolean }
+    | { status: string | null; currentPeriodEnd: string | null; hasCustomer: boolean; configured: boolean }
     | null
 
+  const duesMethodsRes = await listActiveDuesPaymentMethods()
+  const duesMethods: DuesMethod[] = 'data' in duesMethodsRes
+    ? duesMethodsRes.data.map(m => ({ platform: m.platform, url: m.url, instructions: m.instructions }))
+    : []
+
   const notifsRes = await getMyNotifications()
   const notifs: MyNotif[] = 'data' in notifsRes ? (notifsRes.data as MyNotif[]) : []
 
+  const notifPrefsRes = await getMyNotificationPreferences()
+  const notifPrefs: PrefMap = 'data' in notifPrefsRes ? notifPrefsRes.data : {}
+
   const paymentsRes = await getMyPayments()
   const payments: MyPayment[] = 'data' in paymentsRes ? (paymentsRes.data as MyPayment[]) : []
 
@@ -127,8 +137,10 @@ export default async function MePage() {
         grants={grants}
         held={held}
         billing={billing}
+        duesMethods={duesMethods}
         payments={payments}
         notifs={notifs}
+        notifPrefs={notifPrefs}
         classSignups={classSignups}
         reservations={reservations}
         myCards={myCards}

app/(app)/me/profile-form.tsx

@@ -7,6 +7,8 @@ import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { Textarea } from '@/components/ui/textarea'
+import { ChipInput } from '@/components/chip-input'
+import { WILLING_TO_SUGGESTIONS } from '@/lib/profile-presets'
 import { updateMyProfile, discloseAffiliations, requestEmailChange } from '@/lib/actions'
 
 export type ProfileInitial = {
@@ -21,11 +23,11 @@ export type ProfileInitial = {
   affiliations: string[]
 }
 
-const toList = (s: string): string[] =>
-  s.split(',').map(x => x.trim()).filter(Boolean)
 const sameList = (a: string[], b: string[]) =>
   a.length === b.length && a.every((x, i) => x === b[i])
 
+const fieldLabel = 'font-mono text-[10px] tracking-widest text-muted-foreground uppercase'
+
 export function ProfileForm({ initial }: { initial: ProfileInitial }) {
   const router = useRouter()
   const [busy, setBusy] = useState(false)
@@ -35,10 +37,10 @@ export function ProfileForm({ initial }: { initial: ProfileInitial }) {
   const [handle, setHandle] = useState(initial.handle)
   const [phone, setPhone] = useState(initial.phone)
   const [bio, setBio] = useState(initial.bio)
-  const [skills, setSkills] = useState(initial.skills.join(', '))
-  const [interests, setInterests] = useState(initial.interests.join(', '))
-  const [willingTo, setWillingTo] = useState(initial.willing_to.join(', '))
-  const [affiliations, setAffiliations] = useState(initial.affiliations.join(', '))
+  const [skills, setSkills] = useState<string[]>(initial.skills)
+  const [interests, setInterests] = useState<string[]>(initial.interests)
+  const [willingTo, setWillingTo] = useState<string[]>(initial.willing_to)
+  const [affiliations, setAffiliations] = useState<string[]>(initial.affiliations)
 
   async function save() {
     if (!displayName.trim()) return toast.error('Display name is required.')
@@ -49,9 +51,9 @@ export function ProfileForm({ initial }: { initial: ProfileInitial }) {
       handle: handle.trim() || null,
       phone: phone.trim() || null,
       bio: bio.trim() || null,
-      skills: toList(skills),
-      interests: toList(interests),
-      willing_to: toList(willingTo),
+      skills,
+      interests,
+      willing_to: willingTo,
     })
     if ('error' in res && res.error) {
       setBusy(false)
@@ -60,9 +62,8 @@ export function ProfileForm({ initial }: { initial: ProfileInitial }) {
 
     // Only re-disclose affiliations when they actually changed, so the
     // conflict-of-interest disclosure timestamp is not reset on every save.
-    const nextAffiliations = toList(affiliations)
-    if (!sameList(nextAffiliations, initial.affiliations)) {
-      const aff = await discloseAffiliations({ affiliations: nextAffiliations })
+    if (!sameList(affiliations, initial.affiliations)) {
+      const aff = await discloseAffiliations({ affiliations })
       if ('error' in aff && aff.error) {
         setBusy(false)
         return toast.error(aff.error)
@@ -88,83 +89,94 @@ export function ProfileForm({ initial }: { initial: ProfileInitial }) {
   }
 
   return (
-   <div className="space-y-4">
-    <div className="bg-card rounded border border-border p-4 space-y-4">
-      <div className="grid gap-4 sm:grid-cols-2">
-        <div className="space-y-1.5">
-          <Label htmlFor="pf-name">Display name</Label>
-          <Input id="pf-name" value={displayName} onChange={e => setDisplayName(e.target.value)} maxLength={100} />
+    <div className="space-y-4">
+      <div className="bg-card rounded-lg border border-border p-5 space-y-5">
+        <div className="grid gap-4 sm:grid-cols-2">
+          <div className="space-y-1.5">
+            <Label htmlFor="pf-name">Display name</Label>
+            <Input id="pf-name" value={displayName} onChange={e => setDisplayName(e.target.value)} maxLength={100} />
+          </div>
+          <div className="space-y-1.5">
+            <Label htmlFor="pf-handle">Handle</Label>
+            <Input id="pf-handle" value={handle} onChange={e => setHandle(e.target.value)} maxLength={50} placeholder="optional" />
+          </div>
+          <div className="space-y-1.5">
+            <Label htmlFor="pf-phone">Phone</Label>
+            <Input id="pf-phone" value={phone} onChange={e => setPhone(e.target.value)} maxLength={20} placeholder="optional" />
+          </div>
         </div>
-        <div className="space-y-1.5">
-          <Label htmlFor="pf-handle">Handle</Label>
-          <Input id="pf-handle" value={handle} onChange={e => setHandle(e.target.value)} maxLength={50} placeholder="optional" />
-        </div>
-        <div className="space-y-1.5">
-          <Label htmlFor="pf-phone">Phone</Label>
-          <Input id="pf-phone" value={phone} onChange={e => setPhone(e.target.value)} maxLength={20} placeholder="optional" />
-        </div>
-      </div>
 
-      <div className="space-y-1.5">
-        <Label htmlFor="pf-bio">Bio</Label>
-        <Textarea id="pf-bio" value={bio} onChange={e => setBio(e.target.value)} maxLength={2000} rows={3} placeholder="optional" />
-      </div>
+        <div className="space-y-1.5">
+          <Label htmlFor="pf-bio">Bio</Label>
+          <Textarea id="pf-bio" value={bio} onChange={e => setBio(e.target.value)} maxLength={2000} rows={3} placeholder="optional" />
+        </div>
 
-      <div className="grid gap-4 sm:grid-cols-2">
         <div className="space-y-1.5">
-          <Label htmlFor="pf-skills">Skills</Label>
-          <Input id="pf-skills" value={skills} onChange={e => setSkills(e.target.value)} placeholder="comma, separated" />
+          <span className={fieldLabel}>Skills</span>
+          <ChipInput values={skills} onChange={setSkills} placeholder="add a skill and press enter" maxLength={60} maxItems={40} />
         </div>
-        <div className="space-y-1.5">
-          <Label htmlFor="pf-interests">Interests</Label>
-          <Input id="pf-interests" value={interests} onChange={e => setInterests(e.target.value)} placeholder="comma, separated" />
-        </div>
-        <div className="space-y-1.5">
-          <Label htmlFor="pf-willing">Willing to</Label>
-          <Input id="pf-willing" value={willingTo} onChange={e => setWillingTo(e.target.value)} placeholder="comma, separated" />
-        </div>
-        <div className="space-y-1.5">
-          <Label htmlFor="pf-aff">Affiliations (conflict-of-interest)</Label>
-          <Input id="pf-aff" value={affiliations} onChange={e => setAffiliations(e.target.value)} placeholder="comma, separated" />
-        </div>
-      </div>
 
-      <div className="flex justify-end">
-        <Button size="sm" disabled={busy} onClick={save}>
-          {busy ? 'Saving…' : 'Save profile'}
-        </Button>
-      </div>
-    </div>
-
-    <div className="bg-card rounded border border-border p-4 space-y-3">
-      <div>
-        <p className="font-sans text-sm font-medium text-foreground">Login email</p>
-        <p className="font-mono text-[10px] text-muted-foreground mt-0.5">
-          {initial.email || 'not set'}
-        </p>
-      </div>
-      <div className="grid gap-4 sm:grid-cols-2">
         <div className="space-y-1.5">
-          <Label htmlFor="pf-email">New email</Label>
-          <Input
-            id="pf-email"
-            type="email"
-            value={newEmail}
-            onChange={e => setNewEmail(e.target.value)}
-            maxLength={254}
-            placeholder="new@email.com"
+          <span className={fieldLabel}>Interests</span>
+          <ChipInput values={interests} onChange={setInterests} placeholder="add an interest and press enter" maxLength={60} maxItems={40} />
+        </div>
+
+        <div className="space-y-1.5">
+          <span className={fieldLabel}>Willing to do</span>
+          <ChipInput
+            values={willingTo}
+            onChange={setWillingTo}
+            placeholder="add a role and press enter"
+            maxLength={60}
+            maxItems={20}
+            suggestions={WILLING_TO_SUGGESTIONS}
           />
+          <p className="font-sans text-xs text-muted-foreground">
+            Used by the board-only recruitment view when looking for members willing to take on a role.
+          </p>
+        </div>
+
+        <div className="space-y-1.5">
+          <span className={fieldLabel}>Affiliations (conflict-of-interest)</span>
+          <ChipInput values={affiliations} onChange={setAffiliations} placeholder="add an affiliation and press enter" maxLength={200} maxItems={50} />
+        </div>
+
+        <div className="flex justify-end">
+          <Button size="sm" disabled={busy} onClick={save}>
+            {busy ? 'Saving…' : 'Save profile'}
+          </Button>
         </div>
       </div>
-      <div className="flex items-center justify-between gap-3 flex-wrap">
-        <p className="font-sans text-xs text-muted-foreground">
-          You must confirm via links sent to both your current and new address.
-        </p>
-        <Button size="sm" variant="outline" disabled={emailBusy} onClick={changeEmail}>
-          {emailBusy ? 'Sending…' : 'Change email'}
-        </Button>
+
+      <div className="bg-card rounded-lg border border-border p-5 space-y-3">
+        <div>
+          <p className="font-sans text-sm font-medium text-foreground">Login email</p>
+          <p className="font-mono text-[10px] text-muted-foreground mt-0.5">
+            {initial.email || 'not set'}
+          </p>
+        </div>
+        <div className="grid gap-4 sm:grid-cols-2">
+          <div className="space-y-1.5">
+            <Label htmlFor="pf-email">New email</Label>
+            <Input
+              id="pf-email"
+              type="email"
+              value={newEmail}
+              onChange={e => setNewEmail(e.target.value)}
+              maxLength={254}
+              placeholder="new@email.com"
+            />
+          </div>
+        </div>
+        <div className="flex items-center justify-between gap-3 flex-wrap">
+          <p className="font-sans text-xs text-muted-foreground">
+            You must confirm via links sent to both your current and new address.
+          </p>
+          <Button size="sm" variant="outline" disabled={emailBusy} onClick={changeEmail}>
+            {emailBusy ? 'Sending…' : 'Change email'}
+          </Button>
+        </div>
       </div>
     </div>
-   </div>
   )
 }