Bill approvals: surface approvers, fix email path, schema cleanup

UI - Dashboard BillApprovalsCard: render approver name chips (color-coded by vote status) per pending bill instead of leaving the approver identity invisible. - BillDetailPage: collapse the duplicate "Requested Approvers" card into the existing "Approvers" table. Approve/deny handler now stamps approved_by = auth.uid() for audit trail. - MasterBoardDashboardPage: the "pending approvals for me" count was filtering on a non-existent bill_approvals.approver_user_id column. Replaced with a board_members.member_name -> bill_approvals.approver_name join (matches the RLS policy). - BillApprovalRequestDialog + AIInvoiceParserPage: bill_approvals inserts now set created_by. Database - Rename public.bill_approvals.vendor_name -> approver_name. RLS policies auto-rewritten by ALTER TABLE RENAME COLUMN; the column was misnamed (it stores the approver's board-member name, never a vendor). - Restore the bill_approval_email_tokens table + lookup_/record_ bill_approval_by_token RPCs. The original 20260520153409 migration was never applied successfully; rewrote it to use approver_name and to populate approved_by/created_by from board_members.user_id on token-driven votes. Added the v2 migration that matches the live DB state. - accounting trigger: void on accounting.bills cascades to public.bills.status='cancelled' (existing forward sync then drops the accounting row per accounting.bill_should_mirror). Edge function - send-transactional-email: add bill-approval-request and bill-approval-vote-invite templates (caller paths in BillApprovalsPage + send-bill-approval-invites referenced templates that weren't in the registry, so every email 404'd). Restored the local copies of election-invite, board-vote-invite, and the missing registry.ts so the repo matches what's deployed. Deployed to send-transactional-email v35. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-06-21 09:50:01 +00:00 · 2026-06-04 17:17:05 -04:00
parent bd5caf5415
commit 2c723410a4
18 changed files with 796 additions and 95 deletions
@@ -0,0 +1,59 @@
+import * as React from 'npm:react@18.3.1'
+import { Body, Button, Container, Head, Heading, Html, Preview, Section, Text } from 'npm:@react-email/components@0.0.22'
+import type { TemplateEntry } from './registry.ts'
+
+const SITE_NAME = 'Avria Community Management'
+
+interface Props {
+  recipientName?: string
+  associationName?: string
+  link?: string
+}
+
+const BillApprovalRequestEmail = ({ recipientName, associationName, link }: Props) => (
+  <Html lang="en" dir="ltr">
+    <Head />
+    <Preview>Bills awaiting your approval{associationName ? ` — ${associationName}` : ''}</Preview>
+    <Body style={main}>
+      <Container style={container}>
+        <Section style={brandBar} />
+        <Heading style={h1}>Bills awaiting your approval</Heading>
+        <Text style={text}>Hello {recipientName || 'Board Member'},</Text>
+        <Text style={text}>
+          One or more bills have been uploaded{associationName ? ` for ${associationName}` : ''} that
+          require your review and approval. You will receive a separate email for each individual bill
+          with secure approve / deny links, or you can review them together using the dashboard link below.
+        </Text>
+        {link && <Button href={link} style={button}>Review bills</Button>}
+        <Text style={smallText}>
+          You may also have received individual emails for each bill — those contain one-click approve and
+          deny buttons tied uniquely to your seat.
+        </Text>
+        <Text style={footer}>
+          If you weren't expecting this email, please contact your association manager. — {SITE_NAME}
+        </Text>
+      </Container>
+    </Body>
+  </Html>
+)
+
+export const template = {
+  component: BillApprovalRequestEmail,
+  subject: (d: Record<string, any>) =>
+    `Bills awaiting your approval${d.associationName ? ` — ${d.associationName}` : ''}`,
+  displayName: 'Bill approval request (summary)',
+  previewData: {
+    recipientName: 'Jane Director',
+    associationName: 'Sunset Hills HOA',
+    link: 'https://avria.cloud/dashboard/bill-approvals',
+  },
+} satisfies TemplateEntry
+
+const main = { backgroundColor: '#ffffff', fontFamily: 'Inter, Arial, sans-serif' }
+const container = { maxWidth: '600px', margin: '0 auto', padding: '28px 24px' }
+const brandBar = { height: '5px', backgroundColor: '#2563eb', borderRadius: '6px', marginBottom: '24px' }
+const h1 = { color: '#111827', fontSize: '24px', lineHeight: '32px', margin: '0 0 14px', fontWeight: '700' }
+const text = { color: '#374151', fontSize: '15px', lineHeight: '24px', margin: '0 0 18px' }
+const smallText = { color: '#6b7280', fontSize: '13px', lineHeight: '20px', margin: '14px 0 0' }
+const button = { backgroundColor: '#2563eb', color: '#ffffff', borderRadius: '6px', fontSize: '14px', fontWeight: '600', textDecoration: 'none', padding: '12px 18px' }
+const footer = { color: '#6b7280', fontSize: '12px', lineHeight: '18px', margin: '28px 0 0' }
@@ -0,0 +1,119 @@
+import * as React from 'npm:react@18.3.1'
+import { Body, Button, Container, Head, Heading, Html, Preview, Section, Text } from 'npm:@react-email/components@0.0.22'
+import type { TemplateEntry } from './registry.ts'
+
+const SITE_NAME = 'Avria Community Management'
+
+interface Props {
+  memberName?: string
+  associationName?: string
+  vendorName?: string
+  invoiceNumber?: string
+  amount?: string
+  billDate?: string
+  dueDate?: string
+  description?: string
+  approveLink?: string
+  denyLink?: string
+  reviewLink?: string
+}
+
+const BillApprovalVoteInviteEmail = ({
+  memberName, associationName, vendorName, invoiceNumber, amount, billDate, dueDate, description,
+  approveLink, denyLink, reviewLink,
+}: Props) => (
+  <Html lang="en" dir="ltr">
+    <Head />
+    <Preview>Approve or deny: {vendorName || 'Bill'} {invoiceNumber || ''}</Preview>
+    <Body style={main}>
+      <Container style={container}>
+        <Section style={brandBar} />
+        <Heading style={h1}>Bill approval requested</Heading>
+        <Text style={text}>Hello {memberName || 'Board Member'},</Text>
+        <Text style={text}>
+          A bill{associationName ? ` for ${associationName}` : ''} requires your approval.
+        </Text>
+
+        <Section style={panel}>
+          <Text style={label}>Vendor</Text>
+          <Text style={value}>{vendorName || '—'}</Text>
+          {invoiceNumber && (
+            <>
+              <Text style={label}>Invoice #</Text>
+              <Text style={value}>{invoiceNumber}</Text>
+            </>
+          )}
+          <Text style={label}>Amount</Text>
+          <Text style={value}>{amount || '—'}</Text>
+          {(billDate || dueDate) && (
+            <>
+              <Text style={label}>{billDate ? 'Bill date' : ''}{billDate && dueDate ? ' · Due date' : (dueDate ? 'Due date' : '')}</Text>
+              <Text style={meta}>
+                {billDate || ''}{billDate && dueDate ? ' · ' : ''}{dueDate || ''}
+              </Text>
+            </>
+          )}
+          {description && (
+            <>
+              <Text style={label}>Description</Text>
+              <Text style={meta}>{description}</Text>
+            </>
+          )}
+        </Section>
+
+        <Section style={buttonRow}>
+          {approveLink && <Button href={approveLink} style={approveButton}>Approve</Button>}
+          {denyLink && <Button href={denyLink} style={denyButton}>Deny</Button>}
+        </Section>
+
+        {reviewLink && (
+          <Text style={smallText}>
+            Prefer to review the full bill first? <a href={reviewLink} style={link}>Open it here</a>.
+          </Text>
+        )}
+        <Text style={smallText}>
+          🔒 These approve / deny links are tied uniquely to your board seat. Please do not share or forward them.
+        </Text>
+        <Text style={footer}>
+          If you weren't expecting this email, please contact your association manager. — {SITE_NAME}
+        </Text>
+      </Container>
+    </Body>
+  </Html>
+)
+
+export const template = {
+  component: BillApprovalVoteInviteEmail,
+  subject: (d: Record<string, any>) =>
+    `Approve or deny: ${d.vendorName || 'Bill'}${d.invoiceNumber ? ` ${d.invoiceNumber}` : ''}`,
+  displayName: 'Bill approval vote invite',
+  previewData: {
+    memberName: 'John Director',
+    associationName: 'Sunset Hills HOA',
+    vendorName: 'Acme Plumbing',
+    invoiceNumber: 'INV-1042',
+    amount: '$1,250.00',
+    billDate: '2026-05-01',
+    dueDate: '2026-05-31',
+    description: 'Quarterly pump-station maintenance',
+    approveLink: 'https://avria.cloud/bill-approve/xxx?token=yyy&action=approve',
+    denyLink: 'https://avria.cloud/bill-approve/xxx?token=yyy&action=deny',
+    reviewLink: 'https://avria.cloud/bill-approve/xxx?token=yyy',
+  },
+} satisfies TemplateEntry
+
+const main = { backgroundColor: '#ffffff', fontFamily: 'Inter, Arial, sans-serif' }
+const container = { maxWidth: '600px', margin: '0 auto', padding: '28px 24px' }
+const brandBar = { height: '5px', backgroundColor: '#2563eb', borderRadius: '6px', marginBottom: '24px' }
+const h1 = { color: '#111827', fontSize: '24px', lineHeight: '32px', margin: '0 0 14px', fontWeight: '700' }
+const text = { color: '#374151', fontSize: '15px', lineHeight: '24px', margin: '0 0 14px' }
+const panel = { backgroundColor: '#f8fafc', border: '1px solid #e5e7eb', borderRadius: '8px', padding: '16px', margin: '14px 0 22px' }
+const label = { color: '#6b7280', fontSize: '11px', textTransform: 'uppercase' as const, letterSpacing: '0.04em', margin: '8px 0 2px' }
+const value = { color: '#111827', fontSize: '15px', lineHeight: '22px', fontWeight: '600', margin: '0' }
+const meta = { color: '#374151', fontSize: '14px', lineHeight: '22px', margin: '0', whiteSpace: 'pre-wrap' as const }
+const buttonRow = { margin: '0 0 18px' }
+const approveButton = { backgroundColor: '#16a34a', color: '#ffffff', borderRadius: '6px', fontSize: '14px', fontWeight: '600', textDecoration: 'none', padding: '12px 18px', marginRight: '10px' }
+const denyButton = { backgroundColor: '#dc2626', color: '#ffffff', borderRadius: '6px', fontSize: '14px', fontWeight: '600', textDecoration: 'none', padding: '12px 18px' }
+const smallText = { color: '#6b7280', fontSize: '13px', lineHeight: '20px', margin: '0 0 10px' }
+const link = { color: '#2563eb', textDecoration: 'underline' }
+const footer = { color: '#6b7280', fontSize: '12px', lineHeight: '18px', margin: '28px 0 0' }
@@ -0,0 +1,52 @@
+import * as React from 'npm:react@18.3.1'
+import { Body, Container, Head, Heading, Html, Preview, Text, Button } from 'npm:@react-email/components@0.0.22'
+import type { TemplateEntry } from './registry.ts'
+
+const SITE_NAME = 'Avria Community Management'
+
+interface Props {
+  memberName?: string
+  voteTitle?: string
+  voteDescription?: string
+  associationName?: string
+  link?: string
+}
+
+const BoardVoteInviteEmail = ({ memberName, voteTitle, voteDescription, associationName, link }: Props) => (
+  <Html lang="en" dir="ltr">
+    <Head />
+    <Preview>Board vote — {voteTitle || 'Cast your vote'}</Preview>
+    <Body style={main}>
+      <Container style={container}>
+        <Heading style={h1}>Board Vote: {voteTitle || 'New vote'}</Heading>
+        <Text style={text}>Hello {memberName || 'Board Member'},</Text>
+        <Text style={text}>
+          A board vote has been opened{associationName ? ` for ${associationName}` : ''}:
+        </Text>
+        {voteDescription && <Text style={descBox}>{voteDescription}</Text>}
+        <Text style={text}>Please cast your vote using the secure link below.</Text>
+        <Button href={link || '#'} style={button}>Cast Your Vote</Button>
+        <Text style={smallText}><strong>🔒 This is a secure link</strong> tied uniquely to your board seat. Please do not share or forward it.</Text>
+        <Text style={smallText}><strong>For recording purposes only:</strong> This electronic vote will be formally ratified at a later board meeting.</Text>
+        <Text style={footer}>If you did not expect this email, please contact your association manager. — {SITE_NAME}</Text>
+      </Container>
+    </Body>
+  </Html>
+)
+
+export const template = {
+  component: BoardVoteInviteEmail,
+  subject: (d: Record<string, any>) =>
+    `Board Vote — ${d.voteTitle || 'New vote'}${d.associationName ? ` (${d.associationName})` : ''}`,
+  displayName: 'Board vote invite',
+  previewData: { memberName: 'John Director', voteTitle: 'Approve 2026 Budget', voteDescription: 'Approve the proposed 2026 operating budget as presented.', associationName: 'Sample HOA', link: 'https://avria.cloud/board-vote/xxx?token=yyy' },
+} satisfies TemplateEntry
+
+const main = { backgroundColor: '#ffffff', fontFamily: 'Inter, Arial, sans-serif' }
+const container = { maxWidth: '600px', margin: '0 auto', padding: '28px 24px' }
+const h1 = { color: '#111827', fontSize: '22px', lineHeight: '30px', margin: '0 0 14px', fontWeight: '700' }
+const text = { color: '#374151', fontSize: '15px', lineHeight: '24px', margin: '0 0 12px' }
+const descBox = { background: '#f6f7f9', border: '1px solid #e5e7eb', borderRadius: '6px', padding: '12px 14px', color: '#374151', fontSize: '14px', whiteSpace: 'pre-wrap' as const, margin: '0 0 16px' }
+const smallText = { color: '#6b7280', fontSize: '13px', lineHeight: '20px', margin: '0 0 10px' }
+const button = { backgroundColor: '#2941a4', color: '#ffffff', borderRadius: '6px', fontSize: '14px', fontWeight: '600', textDecoration: 'none', padding: '12px 18px', margin: '12px 0 18px' }
+const footer = { color: '#6b7280', fontSize: '12px', lineHeight: '18px', margin: '28px 0 0' }
@@ -0,0 +1,51 @@
+import * as React from 'npm:react@18.3.1'
+import { Body, Container, Head, Heading, Html, Preview, Text, Button } from 'npm:@react-email/components@0.0.22'
+import type { TemplateEntry } from './registry.ts'
+
+const SITE_NAME = 'Avria Community Management'
+
+interface Props {
+  ownerName?: string
+  electionTitle?: string
+  associationName?: string
+  deadline?: string
+  votingUrl?: string
+}
+
+const ElectionInviteEmail = ({ ownerName, electionTitle, associationName, deadline, votingUrl }: Props) => (
+  <Html lang="en" dir="ltr">
+    <Head />
+    <Preview>Cast your vote — {electionTitle || 'Election'}</Preview>
+    <Body style={main}>
+      <Container style={container}>
+        <Heading style={h1}>Election Ballot — {electionTitle || 'Election'}</Heading>
+        <Text style={text}>Dear {ownerName || 'Owner'},</Text>
+        <Text style={text}>
+          You are eligible to vote in the <strong>{electionTitle || 'election'}</strong>
+          {associationName ? ` for ${associationName}` : ''}.
+        </Text>
+        {deadline && <Text style={text}>⏰ <strong>Deadline:</strong> {deadline}</Text>}
+        <Button href={votingUrl || '#'} style={button}>Cast Your Vote</Button>
+        <Text style={smallText}>This is a secure, tokenized link tied to your unit. Your vote is anonymous — we record that you voted but not how you voted.</Text>
+        <Text style={smallText}>You may change your vote until the deadline by clicking the link again.</Text>
+        <Text style={footer}>If you did not expect this email, please contact your association manager. — {SITE_NAME}</Text>
+      </Container>
+    </Body>
+  </Html>
+)
+
+export const template = {
+  component: ElectionInviteEmail,
+  subject: (d: Record<string, any>) =>
+    `Vote Now: ${d.electionTitle || 'Election'}${d.associationName ? ` — ${d.associationName}` : ''}`,
+  displayName: 'Election invite',
+  previewData: { ownerName: 'Jane Owner', electionTitle: '2026 Board Election', associationName: 'Sample HOA', deadline: 'January 15, 2026 5:00 PM', votingUrl: 'https://avria.cloud/vote/xxx?token=yyy' },
+} satisfies TemplateEntry
+
+const main = { backgroundColor: '#ffffff', fontFamily: 'Inter, Arial, sans-serif' }
+const container = { maxWidth: '600px', margin: '0 auto', padding: '28px 24px' }
+const h1 = { color: '#111827', fontSize: '22px', lineHeight: '30px', margin: '0 0 14px', fontWeight: '700' }
+const text = { color: '#374151', fontSize: '15px', lineHeight: '24px', margin: '0 0 14px' }
+const smallText = { color: '#6b7280', fontSize: '13px', lineHeight: '20px', margin: '0 0 10px' }
+const button = { backgroundColor: '#2941a4', color: '#ffffff', borderRadius: '6px', fontSize: '14px', fontWeight: '600', textDecoration: 'none', padding: '12px 18px', margin: '12px 0 18px' }
+const footer = { color: '#6b7280', fontSize: '12px', lineHeight: '18px', margin: '28px 0 0' }
@@ -0,0 +1,35 @@
+/// <reference types="npm:@types/react@18.3.1" />
+import * as React from 'npm:react@18.3.1'
+
+export interface TemplateEntry {
+  component: React.ComponentType<any>
+  subject: string | ((data: Record<string, any>) => string)
+  to?: string
+  displayName?: string
+  previewData?: Record<string, any>
+}
+import { template as tenantInfoRequest } from './tenant-info-request.tsx'
+import { template as ticketSubmitted } from './ticket-submitted.tsx'
+import { template as ticketResponse } from './ticket-response.tsx'
+import { template as vendorInsuranceRequest } from './vendor-insurance-request.tsx'
+import { template as vendorProfileRequest } from './vendor-profile-request.tsx'
+import { template as signupCodeInvite } from './signup-code-invite.tsx'
+import { template as taskNotification } from './task-notification.tsx'
+import { template as electionInvite } from './election-invite.tsx'
+import { template as boardVoteInvite } from './board-vote-invite.tsx'
+import { template as billApprovalRequest } from './bill-approval-request.tsx'
+import { template as billApprovalVoteInvite } from './bill-approval-vote-invite.tsx'
+
+export const TEMPLATES: Record<string, TemplateEntry> = {
+  'ticket-submitted': ticketSubmitted,
+  'ticket-response': ticketResponse,
+  'vendor-insurance-request': vendorInsuranceRequest,
+  'vendor-profile-request': vendorProfileRequest,
+  'signup-code-invite': signupCodeInvite,
+  'task-notification': taskNotification,
+  'election-invite': electionInvite,
+  'board-vote-invite': boardVoteInvite,
+  'tenant-info-request': tenantInfoRequest,
+  'bill-approval-request': billApprovalRequest,
+  'bill-approval-vote-invite': billApprovalVoteInvite,
+}