olsch01
243770cea5
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>
92 lines
3.5 KiB
TypeScript
92 lines
3.5 KiB
TypeScript
import { useState } from 'react';
|
|
import {
|
|
Title, Table, Group, Stack, Text, Card, Loader, Center, Divider, Badge,
|
|
} from '@mantine/core';
|
|
import { DateInput } from '@mantine/dates';
|
|
import { useQuery } from '@tanstack/react-query';
|
|
import api from '../../services/api';
|
|
|
|
interface AccountLine { account_number: number; name: string; amount: string; fund_type: string; }
|
|
interface IncomeStatementData {
|
|
from: string; to: string;
|
|
income: AccountLine[]; expenses: AccountLine[];
|
|
total_income: string; total_expenses: string; net_income: string;
|
|
}
|
|
|
|
export function IncomeStatementPage() {
|
|
const [from, setFrom] = useState(new Date(new Date().getFullYear(), 0, 1));
|
|
const [to, setTo] = useState(new Date());
|
|
|
|
const { data, isLoading } = useQuery<IncomeStatementData>({
|
|
queryKey: ['income-statement', from.toISOString().split('T')[0], to.toISOString().split('T')[0]],
|
|
queryFn: async () => {
|
|
const { data } = await api.get(`/reports/income-statement?from=${from.toISOString().split('T')[0]}&to=${to.toISOString().split('T')[0]}`);
|
|
return data;
|
|
},
|
|
});
|
|
|
|
const fmt = (v: string | number) => parseFloat(String(v || '0')).toLocaleString('en-US', { style: 'currency', currency: 'USD' });
|
|
|
|
if (isLoading) return <Center h={300}><Loader /></Center>;
|
|
|
|
const netIncome = parseFloat(data?.net_income || '0');
|
|
|
|
return (
|
|
<Stack>
|
|
<Group justify="space-between">
|
|
<Title order={2}>Income Statement</Title>
|
|
<Group>
|
|
<DateInput label="From" value={from} onChange={(v) => v && setFrom(v)} w={160} />
|
|
<DateInput label="To" value={to} onChange={(v) => v && setTo(v)} w={160} />
|
|
</Group>
|
|
</Group>
|
|
|
|
<Card withBorder>
|
|
<Title order={4} mb="md" c="green">Income</Title>
|
|
<Table>
|
|
<Table.Tbody>
|
|
{(data?.income || []).map((a) => (
|
|
<Table.Tr key={a.account_number}>
|
|
<Table.Td w={80}>{a.account_number}</Table.Td>
|
|
<Table.Td>{a.name} <Badge size="xs" variant="light">{a.fund_type}</Badge></Table.Td>
|
|
<Table.Td ta="right" ff="monospace" w={140}>{fmt(a.amount)}</Table.Td>
|
|
</Table.Tr>
|
|
))}
|
|
</Table.Tbody>
|
|
<Table.Tfoot>
|
|
<Table.Tr><Table.Td colSpan={2} fw={700}>Total Income</Table.Td>
|
|
<Table.Td ta="right" fw={700} ff="monospace" c="green">{fmt(data?.total_income || '0')}</Table.Td></Table.Tr>
|
|
</Table.Tfoot>
|
|
</Table>
|
|
|
|
<Divider my="md" />
|
|
|
|
<Title order={4} mb="md" c="red">Expenses</Title>
|
|
<Table>
|
|
<Table.Tbody>
|
|
{(data?.expenses || []).map((a) => (
|
|
<Table.Tr key={a.account_number}>
|
|
<Table.Td w={80}>{a.account_number}</Table.Td>
|
|
<Table.Td>{a.name} <Badge size="xs" variant="light">{a.fund_type}</Badge></Table.Td>
|
|
<Table.Td ta="right" ff="monospace" w={140}>{fmt(a.amount)}</Table.Td>
|
|
</Table.Tr>
|
|
))}
|
|
</Table.Tbody>
|
|
<Table.Tfoot>
|
|
<Table.Tr><Table.Td colSpan={2} fw={700}>Total Expenses</Table.Td>
|
|
<Table.Td ta="right" fw={700} ff="monospace" c="red">{fmt(data?.total_expenses || '0')}</Table.Td></Table.Tr>
|
|
</Table.Tfoot>
|
|
</Table>
|
|
|
|
<Divider my="md" />
|
|
<Group justify="space-between" px="sm">
|
|
<Text fw={700} size="xl">Net Income</Text>
|
|
<Text fw={700} size="xl" ff="monospace" c={netIncome >= 0 ? 'green' : 'red'}>
|
|
{fmt(data?.net_income || '0')}
|
|
</Text>
|
|
</Group>
|
|
</Card>
|
|
</Stack>
|
|
);
|
|
}
|