mirror of
https://github.com/renee-png/acmcc.git
synced 2026-06-21 09:50:01 +00:00
admin
2c723410a4
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>
120 lines
5.3 KiB
TypeScript
120 lines
5.3 KiB
TypeScript
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' }
|