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:
118
frontend/src/pages/vendors/VendorsPage.tsx
vendored
Normal file
118
frontend/src/pages/vendors/VendorsPage.tsx
vendored
Normal file
@@ -0,0 +1,118 @@
|
||||
import { useState } from 'react';
|
||||
import {
|
||||
Title, Table, Group, Button, Stack, TextInput, Modal,
|
||||
Switch, Badge, ActionIcon, Text, Loader, Center,
|
||||
} from '@mantine/core';
|
||||
import { useForm } from '@mantine/form';
|
||||
import { useDisclosure } from '@mantine/hooks';
|
||||
import { notifications } from '@mantine/notifications';
|
||||
import { IconPlus, IconEdit, IconSearch } from '@tabler/icons-react';
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import api from '../../services/api';
|
||||
|
||||
interface Vendor {
|
||||
id: string; name: string; contact_name: string; email: string; phone: string;
|
||||
address_line1: string; city: string; state: string; zip_code: string;
|
||||
tax_id: string; is_1099_eligible: boolean; is_active: boolean; ytd_payments: string;
|
||||
}
|
||||
|
||||
export function VendorsPage() {
|
||||
const [opened, { open, close }] = useDisclosure(false);
|
||||
const [editing, setEditing] = useState<Vendor | null>(null);
|
||||
const [search, setSearch] = useState('');
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const { data: vendors = [], isLoading } = useQuery<Vendor[]>({
|
||||
queryKey: ['vendors'],
|
||||
queryFn: async () => { const { data } = await api.get('/vendors'); return data; },
|
||||
});
|
||||
|
||||
const form = useForm({
|
||||
initialValues: {
|
||||
name: '', contact_name: '', email: '', phone: '',
|
||||
address_line1: '', city: '', state: '', zip_code: '',
|
||||
tax_id: '', is_1099_eligible: false,
|
||||
},
|
||||
validate: { name: (v) => (v.length > 0 ? null : 'Required') },
|
||||
});
|
||||
|
||||
const saveMutation = useMutation({
|
||||
mutationFn: (values: any) => editing ? api.put(`/vendors/${editing.id}`, values) : api.post('/vendors', values),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['vendors'] });
|
||||
notifications.show({ message: editing ? 'Vendor updated' : 'Vendor created', color: 'green' });
|
||||
close(); setEditing(null); form.reset();
|
||||
},
|
||||
onError: (err: any) => { notifications.show({ message: err.response?.data?.message || 'Error', color: 'red' }); },
|
||||
});
|
||||
|
||||
const handleEdit = (v: Vendor) => {
|
||||
setEditing(v);
|
||||
form.setValues({
|
||||
name: v.name, contact_name: v.contact_name || '', email: v.email || '',
|
||||
phone: v.phone || '', address_line1: v.address_line1 || '', city: v.city || '',
|
||||
state: v.state || '', zip_code: v.zip_code || '', tax_id: v.tax_id || '',
|
||||
is_1099_eligible: v.is_1099_eligible,
|
||||
});
|
||||
open();
|
||||
};
|
||||
|
||||
const filtered = vendors.filter((v) => !search || v.name.toLowerCase().includes(search.toLowerCase()));
|
||||
|
||||
if (isLoading) return <Center h={300}><Loader /></Center>;
|
||||
|
||||
return (
|
||||
<Stack>
|
||||
<Group justify="space-between">
|
||||
<Title order={2}>Vendors</Title>
|
||||
<Button leftSection={<IconPlus size={16} />} onClick={() => { setEditing(null); form.reset(); open(); }}>Add Vendor</Button>
|
||||
</Group>
|
||||
<TextInput placeholder="Search vendors..." leftSection={<IconSearch size={16} />}
|
||||
value={search} onChange={(e) => setSearch(e.currentTarget.value)} />
|
||||
<Table striped highlightOnHover>
|
||||
<Table.Thead>
|
||||
<Table.Tr>
|
||||
<Table.Th>Name</Table.Th><Table.Th>Contact</Table.Th><Table.Th>Email</Table.Th>
|
||||
<Table.Th>Phone</Table.Th><Table.Th>1099</Table.Th>
|
||||
<Table.Th ta="right">YTD Payments</Table.Th><Table.Th></Table.Th>
|
||||
</Table.Tr>
|
||||
</Table.Thead>
|
||||
<Table.Tbody>
|
||||
{filtered.map((v) => (
|
||||
<Table.Tr key={v.id}>
|
||||
<Table.Td fw={500}>{v.name}</Table.Td>
|
||||
<Table.Td>{v.contact_name}</Table.Td>
|
||||
<Table.Td>{v.email}</Table.Td>
|
||||
<Table.Td>{v.phone}</Table.Td>
|
||||
<Table.Td>{v.is_1099_eligible && <Badge color="orange" size="sm">1099</Badge>}</Table.Td>
|
||||
<Table.Td ta="right" ff="monospace">${parseFloat(v.ytd_payments || '0').toFixed(2)}</Table.Td>
|
||||
<Table.Td><ActionIcon variant="subtle" onClick={() => handleEdit(v)}><IconEdit size={16} /></ActionIcon></Table.Td>
|
||||
</Table.Tr>
|
||||
))}
|
||||
{filtered.length === 0 && <Table.Tr><Table.Td colSpan={7}><Text ta="center" c="dimmed" py="lg">No vendors yet</Text></Table.Td></Table.Tr>}
|
||||
</Table.Tbody>
|
||||
</Table>
|
||||
<Modal opened={opened} onClose={close} title={editing ? 'Edit Vendor' : 'New Vendor'}>
|
||||
<form onSubmit={form.onSubmit((v) => saveMutation.mutate(v))}>
|
||||
<Stack>
|
||||
<TextInput label="Vendor Name" required {...form.getInputProps('name')} />
|
||||
<TextInput label="Contact Name" {...form.getInputProps('contact_name')} />
|
||||
<Group grow>
|
||||
<TextInput label="Email" {...form.getInputProps('email')} />
|
||||
<TextInput label="Phone" {...form.getInputProps('phone')} />
|
||||
</Group>
|
||||
<TextInput label="Address" {...form.getInputProps('address_line1')} />
|
||||
<Group grow>
|
||||
<TextInput label="City" {...form.getInputProps('city')} />
|
||||
<TextInput label="State" {...form.getInputProps('state')} />
|
||||
<TextInput label="ZIP" {...form.getInputProps('zip_code')} />
|
||||
</Group>
|
||||
<TextInput label="Tax ID (EIN/SSN)" {...form.getInputProps('tax_id')} />
|
||||
<Switch label="1099 Eligible" {...form.getInputProps('is_1099_eligible', { type: 'checkbox' })} />
|
||||
<Button type="submit" loading={saveMutation.isPending}>{editing ? 'Update' : 'Create'}</Button>
|
||||
</Stack>
|
||||
</form>
|
||||
</Modal>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user