From 0dd68ff1aa3e2ef73b871cd97c102f7b9dd0a43c Mon Sep 17 00:00:00 2001
From: Jennie Robinson Faber <jennie@jenniefaber.com>
Date: Sat, 23 May 2026 15:47:10 +0100
Subject: [PATCH] fix(display): cadence-aware contribution suffix across UI +
 admin dashboard

Add formatContribution helper in app/config/contributions.js and route
all member-facing and admin contribution displays through cadence-aware
expressions so annual members see /yr instead of /mo. Normalize annual
amounts to monthly equivalents in the admin dashboard revenue
aggregate now that contributionAmount is stored in cadence units.
---
 app/config/contributions.js       |  9 +++++++++
 app/pages/admin/members/[id].vue  |  2 +-
 app/pages/admin/members/index.vue | 10 ++++++----
 app/pages/join.vue                |  4 ++--
 app/pages/member/dashboard.vue    |  6 ++++--
 server/api/admin/dashboard.get.js | 10 +++++++---
 6 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/app/config/contributions.js b/app/config/contributions.js
index 73005f1..ea60f98 100644
--- a/app/config/contributions.js
+++ b/app/config/contributions.js
@@ -20,3 +20,12 @@ export const getGuidanceLabel = (amount) => {
   const match = CONTRIBUTION_PRESETS.findLast(p => p.amount <= n)
   return match?.label ?? null
 }
+
+// Format a contribution amount with cadence-aware suffix.
+// amount is interpreted in cadence units (e.g. 180 + 'annual' → "$180/yr").
+export const formatContribution = (amount, cadence) => {
+  const n = Number(amount) || 0
+  if (n === 0) return '$0'
+  const suffix = cadence === 'annual' ? '/yr' : '/mo'
+  return `$${n}${suffix}`
+}
diff --git a/app/pages/admin/members/[id].vue b/app/pages/admin/members/[id].vue
index e082be7..76d650b 100644
--- a/app/pages/admin/members/[id].vue
+++ b/app/pages/admin/members/[id].vue
@@ -54,7 +54,7 @@
                 </select>
               </div>
               <div class="field">
-                <label>Contribution ($/mo)</label>
+                <label>Contribution ({{ member.billingCadence === 'annual' ? '$/yr' : '$/mo' }})</label>
                 <input v-model.number="form.contributionAmount" type="number" min="0" step="1">
                 <p class="field-hint field-hint--warn">
                   Writes to our database only. If the member is on a paid plan, also update <code>recurringAmount</code> in the Helcim dashboard — this form does not sync.
diff --git a/app/pages/admin/members/index.vue b/app/pages/admin/members/index.vue
index d602447..eefc723 100644
--- a/app/pages/admin/members/index.vue
+++ b/app/pages/admin/members/index.vue
@@ -111,7 +111,7 @@
             <td>
               <CircleBadge :circle="member.circle" />
             </td>
-            <td class="col-mono">${{ member.contributionAmount ?? 0 }}/mo</td>
+            <td class="col-mono">${{ member.contributionAmount ?? 0 }}{{ member.billingCadence === 'annual' ? '/yr' : '/mo' }}</td>
             <td>
               <span class="badge status" :class="`status-${member.status || 'pending_payment'}`">{{ statusLabel(member.status) }}</span>
             </td>
@@ -192,7 +192,7 @@
             </select>
           </div>
           <div class="field">
-            <label>Contribution ($/mo)</label>
+            <label>Contribution ({{ newMember.billingCadence === 'annual' ? '$/yr' : '$/mo' }})</label>
             <input v-model.number="newMember.contributionAmount" type="number" min="0" step="1">
           </div>
           <div class="modal-actions">
@@ -286,7 +286,7 @@
                     <td>{{ row.name }}</td>
                     <td class="col-email">{{ row.email }}</td>
                     <td>{{ row.circle }}</td>
-                    <td>${{ row.contributionAmount }}/mo</td>
+                    <td>${{ row.contributionAmount }}{{ row.billingCadence === 'annual' ? '/yr' : '/mo' }}</td>
                   </tr>
                 </tbody>
               </table>
@@ -366,7 +366,7 @@
             </select>
           </div>
           <div class="field">
-            <label>Contribution ($/mo)</label>
+            <label>Contribution ({{ editingMember.billingCadence === 'annual' ? '$/yr' : '$/mo' }})</label>
             <input v-model.number="editingMember.contributionAmount" type="number" min="0" step="1">
           </div>
           <div class="field">
@@ -860,6 +860,7 @@ const editingMember = reactive({
   email: "",
   circle: "community",
   contributionAmount: 0,
+  billingCadence: "monthly",
   status: "pending_payment",
 });
 
@@ -870,6 +871,7 @@ const editMember = (member) => {
     email: member.email,
     circle: member.circle,
     contributionAmount: member.contributionAmount ?? 0,
+    billingCadence: member.billingCadence || "monthly",
     status: member.status || "pending_payment",
   });
   showEditModal.value = true;
diff --git a/app/pages/join.vue b/app/pages/join.vue
index 8fbcd75..51d5eab 100644
--- a/app/pages/join.vue
+++ b/app/pages/join.vue
@@ -32,7 +32,7 @@
           <DashedBox :hoverable="false">
             <div class="section-label">Contribution</div>
             <div class="info-value">
-              ${{ memberData?.contributionAmount ?? 0 }} CAD/month
+              {{ formatContribution(memberData?.contributionAmount ?? 0, memberData?.billingCadence) }} CAD
             </div>
           </DashedBox>
         </div>
@@ -308,7 +308,7 @@
 <script setup>
 import { reactive, ref, computed, onMounted, onUnmounted } from "vue";
 import { getCircleOptions } from "~/config/circles";
-import { requiresPayment } from "~/config/contributions";
+import { requiresPayment, formatContribution } from "~/config/contributions";
 
 useSiteMeta({
   title: "Join",
diff --git a/app/pages/member/dashboard.vue b/app/pages/member/dashboard.vue
index a1f45e5..4fad78a 100644
--- a/app/pages/member/dashboard.vue
+++ b/app/pages/member/dashboard.vue
@@ -36,7 +36,7 @@
           <PageHeader :title="welcomeTitle">
             <div class="dashboard-meta">
               <CircleBadge :circle="memberData?.circle || 'community'" />
-              <span>${{ memberData?.contributionAmount ?? 0 }} CAD/mo</span>
+              <span>{{ formatContribution(memberData?.contributionAmount ?? 0, memberData?.billingCadence) }} CAD</span>
             </div>
             <p v-if="showSlackComingNote" class="slack-coming-note">
               Slack workspace access is part of your membership. Invitations are
@@ -171,7 +171,7 @@
               <div class="membership-row">
                 <span class="key">Contribution</span>
                 <span class="val"
-                  >${{ memberData?.contributionAmount ?? 0 }} CAD/month</span
+                  >{{ formatContribution(memberData?.contributionAmount ?? 0, memberData?.billingCadence) }} CAD</span
                 >
               </div>
               <div class="membership-row">
@@ -220,6 +220,8 @@
 </template>
 
 <script setup>
+import { formatContribution } from '~/config/contributions';
+
 useSiteMeta({ title: 'Dashboard', noindex: true });
 
 const { memberData, checkMemberStatus } = useAuth();
diff --git a/server/api/admin/dashboard.get.js b/server/api/admin/dashboard.get.js
index 41fe694..5e392b7 100644
--- a/server/api/admin/dashboard.get.js
+++ b/server/api/admin/dashboard.get.js
@@ -16,10 +16,14 @@ export default defineEventHandler(async (event) => {
       endDate: { $gte: now }
     })
 
-    // Calculate monthly revenue from member contributions
-    const members = await Member.find({}, 'contributionAmount').lean()
+    // Calculate monthly revenue from member contributions.
+    // contributionAmount is stored in cadence units (monthly = $/mo, annual = $/yr),
+    // so normalize annual amounts to monthly equivalents before summing.
+    const members = await Member.find({}, 'contributionAmount billingCadence').lean()
     const monthlyRevenue = members.reduce((total, member) => {
-      return total + (member.contributionAmount || 0)
+      const amt = member.contributionAmount || 0
+      const monthlyEquivalent = member.billingCadence === 'annual' ? amt / 12 : amt
+      return total + monthlyEquivalent
     }, 0)
 
     const pendingSlackInvites = await Member.countDocuments({ slackInvited: false })