Initial commit: HOA Financial Intelligence Platform MVP
Multi-tenant financial management platform for homeowner associations featuring: - NestJS backend with 16 modules (auth, accounts, transactions, budgets, units, invoices, payments, vendors, reserves, investments, capital projects, reports) - React + Mantine frontend with dashboard, CRUD pages, and financial reports - Schema-per-tenant PostgreSQL isolation with JWT-based tenant resolution - Docker Compose infrastructure (nginx, backend, frontend, postgres, redis) - Comprehensive seed data for Sunrise Valley HOA demo - 39 API endpoints with Swagger documentation - Double-entry bookkeeping with journal entries - Budget vs actual reporting and Sankey cash flow visualization Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
125
frontend/src/pages/payments/PaymentsPage.tsx
Normal file
125
frontend/src/pages/payments/PaymentsPage.tsx
Normal file
@@ -0,0 +1,125 @@
|
||||
import { useState } from 'react';
|
||||
import {
|
||||
Title, Table, Group, Button, Stack, Text, Badge, Modal,
|
||||
NumberInput, Select, TextInput, Loader, Center,
|
||||
} from '@mantine/core';
|
||||
import { DateInput } from '@mantine/dates';
|
||||
import { useForm } from '@mantine/form';
|
||||
import { useDisclosure } from '@mantine/hooks';
|
||||
import { notifications } from '@mantine/notifications';
|
||||
import { IconPlus } from '@tabler/icons-react';
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import api from '../../services/api';
|
||||
|
||||
interface Payment {
|
||||
id: string; unit_id: string; unit_number: string; invoice_id: string;
|
||||
invoice_number: string; payment_date: string; amount: string;
|
||||
payment_method: string; reference_number: string; status: string;
|
||||
}
|
||||
|
||||
export function PaymentsPage() {
|
||||
const [opened, { open, close }] = useDisclosure(false);
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const { data: payments = [], isLoading } = useQuery<Payment[]>({
|
||||
queryKey: ['payments'],
|
||||
queryFn: async () => { const { data } = await api.get('/payments'); return data; },
|
||||
});
|
||||
|
||||
const { data: invoices = [] } = useQuery<any[]>({
|
||||
queryKey: ['invoices-unpaid'],
|
||||
queryFn: async () => {
|
||||
const { data } = await api.get('/invoices');
|
||||
return data.filter((i: any) => i.status !== 'paid' && i.status !== 'void');
|
||||
},
|
||||
});
|
||||
|
||||
const form = useForm({
|
||||
initialValues: {
|
||||
invoice_id: '', amount: 0, payment_method: 'check',
|
||||
reference_number: '', payment_date: new Date(),
|
||||
},
|
||||
});
|
||||
|
||||
const createMutation = useMutation({
|
||||
mutationFn: (values: any) => {
|
||||
const inv = invoices.find((i: any) => i.id === values.invoice_id);
|
||||
return api.post('/payments', {
|
||||
...values,
|
||||
unit_id: inv?.unit_id,
|
||||
payment_date: values.payment_date.toISOString().split('T')[0],
|
||||
});
|
||||
},
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['payments'] });
|
||||
queryClient.invalidateQueries({ queryKey: ['invoices'] });
|
||||
queryClient.invalidateQueries({ queryKey: ['invoices-unpaid'] });
|
||||
queryClient.invalidateQueries({ queryKey: ['accounts'] });
|
||||
notifications.show({ message: 'Payment recorded', color: 'green' });
|
||||
close(); form.reset();
|
||||
},
|
||||
onError: (err: any) => { notifications.show({ message: err.response?.data?.message || 'Error', color: 'red' }); },
|
||||
});
|
||||
|
||||
const fmt = (v: string) => parseFloat(v || '0').toLocaleString('en-US', { style: 'currency', currency: 'USD' });
|
||||
|
||||
const invoiceOptions = invoices.map((i: any) => ({
|
||||
value: i.id,
|
||||
label: `${i.invoice_number} - ${i.unit_number || 'Unit'} - Balance: $${parseFloat(i.balance_due || i.amount).toFixed(2)}`,
|
||||
}));
|
||||
|
||||
if (isLoading) return <Center h={300}><Loader /></Center>;
|
||||
|
||||
return (
|
||||
<Stack>
|
||||
<Group justify="space-between">
|
||||
<Title order={2}>Payments</Title>
|
||||
<Button leftSection={<IconPlus size={16} />} onClick={open}>Record Payment</Button>
|
||||
</Group>
|
||||
<Table striped highlightOnHover>
|
||||
<Table.Thead>
|
||||
<Table.Tr>
|
||||
<Table.Th>Date</Table.Th><Table.Th>Unit</Table.Th><Table.Th>Invoice</Table.Th>
|
||||
<Table.Th ta="right">Amount</Table.Th><Table.Th>Method</Table.Th>
|
||||
<Table.Th>Reference</Table.Th><Table.Th>Status</Table.Th>
|
||||
</Table.Tr>
|
||||
</Table.Thead>
|
||||
<Table.Tbody>
|
||||
{payments.map((p) => (
|
||||
<Table.Tr key={p.id}>
|
||||
<Table.Td>{new Date(p.payment_date).toLocaleDateString()}</Table.Td>
|
||||
<Table.Td>{p.unit_number}</Table.Td>
|
||||
<Table.Td>{p.invoice_number}</Table.Td>
|
||||
<Table.Td ta="right" ff="monospace" fw={500}>{fmt(p.amount)}</Table.Td>
|
||||
<Table.Td><Badge size="sm" variant="light">{p.payment_method}</Badge></Table.Td>
|
||||
<Table.Td>{p.reference_number}</Table.Td>
|
||||
<Table.Td><Badge color={p.status === 'completed' ? 'green' : 'yellow'} size="sm">{p.status}</Badge></Table.Td>
|
||||
</Table.Tr>
|
||||
))}
|
||||
{payments.length === 0 && (
|
||||
<Table.Tr><Table.Td colSpan={7}><Text ta="center" c="dimmed" py="lg">No payments recorded yet</Text></Table.Td></Table.Tr>
|
||||
)}
|
||||
</Table.Tbody>
|
||||
</Table>
|
||||
<Modal opened={opened} onClose={close} title="Record Payment">
|
||||
<form onSubmit={form.onSubmit((v) => createMutation.mutate(v))}>
|
||||
<Stack>
|
||||
<Select label="Invoice" required data={invoiceOptions} searchable
|
||||
{...form.getInputProps('invoice_id')} />
|
||||
<DateInput label="Payment Date" required {...form.getInputProps('payment_date')} />
|
||||
<NumberInput label="Amount" required prefix="$" decimalScale={2} min={0.01}
|
||||
{...form.getInputProps('amount')} />
|
||||
<Select label="Payment Method" data={[
|
||||
{ value: 'check', label: 'Check' }, { value: 'ach', label: 'ACH' },
|
||||
{ value: 'credit_card', label: 'Credit Card' }, { value: 'cash', label: 'Cash' },
|
||||
{ value: 'wire', label: 'Wire' }, { value: 'other', label: 'Other' },
|
||||
]} {...form.getInputProps('payment_method')} />
|
||||
<TextInput label="Reference Number" placeholder="Check # or transaction ID"
|
||||
{...form.getInputProps('reference_number')} />
|
||||
<Button type="submit" loading={createMutation.isPending}>Record Payment</Button>
|
||||
</Stack>
|
||||
</form>
|
||||
</Modal>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user