feat: add flexible billing frequency support for invoices
Assessment groups can now define billing frequency (monthly, quarterly, annual) with configurable due months and due day. Invoice generation respects each group's schedule - only generating invoices when the selected month is a billing month for that group. Adds a generation preview showing which groups will be billed, period tracking on invoices, and billing period context in the payments UI. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -2,6 +2,7 @@ import { useState } from 'react';
|
||||
import {
|
||||
Title, Text, Card, Table, SimpleGrid, Group, Stack, Badge, Loader, Center,
|
||||
ThemeIcon, Button, Modal, TextInput, NumberInput, Textarea, Select, ActionIcon, Tooltip,
|
||||
MultiSelect,
|
||||
} from '@mantine/core';
|
||||
import { useForm } from '@mantine/form';
|
||||
import { useDisclosure } from '@mantine/hooks';
|
||||
@@ -21,6 +22,8 @@ interface AssessmentGroup {
|
||||
special_assessment: string;
|
||||
unit_count: number;
|
||||
frequency: string;
|
||||
due_months: number[];
|
||||
due_day: number;
|
||||
actual_unit_count: string;
|
||||
monthly_operating_income: string;
|
||||
monthly_reserve_income: string;
|
||||
@@ -49,6 +52,29 @@ const frequencyColors: Record<string, string> = {
|
||||
annual: 'violet',
|
||||
};
|
||||
|
||||
const MONTH_OPTIONS = [
|
||||
{ value: '1', label: 'January' },
|
||||
{ value: '2', label: 'February' },
|
||||
{ value: '3', label: 'March' },
|
||||
{ value: '4', label: 'April' },
|
||||
{ value: '5', label: 'May' },
|
||||
{ value: '6', label: 'June' },
|
||||
{ value: '7', label: 'July' },
|
||||
{ value: '8', label: 'August' },
|
||||
{ value: '9', label: 'September' },
|
||||
{ value: '10', label: 'October' },
|
||||
{ value: '11', label: 'November' },
|
||||
{ value: '12', label: 'December' },
|
||||
];
|
||||
|
||||
const MONTH_ABBREV = ['', 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
|
||||
|
||||
const DEFAULT_DUE_MONTHS: Record<string, string[]> = {
|
||||
monthly: ['1','2','3','4','5','6','7','8','9','10','11','12'],
|
||||
quarterly: ['1','4','7','10'],
|
||||
annual: ['1'],
|
||||
};
|
||||
|
||||
export function AssessmentGroupsPage() {
|
||||
const [opened, { open, close }] = useDisclosure(false);
|
||||
const [editing, setEditing] = useState<AssessmentGroup | null>(null);
|
||||
@@ -73,18 +99,31 @@ export function AssessmentGroupsPage() {
|
||||
specialAssessment: 0,
|
||||
unitCount: 0,
|
||||
frequency: 'monthly',
|
||||
dueMonths: DEFAULT_DUE_MONTHS.monthly,
|
||||
dueDay: 1,
|
||||
},
|
||||
validate: {
|
||||
name: (v) => (v.length > 0 ? null : 'Required'),
|
||||
regularAssessment: (v) => (v >= 0 ? null : 'Must be >= 0'),
|
||||
dueMonths: (v, values) => {
|
||||
if (values.frequency === 'quarterly' && v.length !== 4) return 'Quarterly requires exactly 4 months';
|
||||
if (values.frequency === 'annual' && v.length !== 1) return 'Annual requires exactly 1 month';
|
||||
return null;
|
||||
},
|
||||
dueDay: (v) => (v >= 1 && v <= 28 ? null : 'Must be 1-28'),
|
||||
},
|
||||
});
|
||||
|
||||
const saveMutation = useMutation({
|
||||
mutationFn: (values: any) =>
|
||||
editing
|
||||
? api.put(`/assessment-groups/${editing.id}`, values)
|
||||
: api.post('/assessment-groups', values),
|
||||
mutationFn: (values: any) => {
|
||||
const payload = {
|
||||
...values,
|
||||
dueMonths: values.dueMonths.map(Number),
|
||||
};
|
||||
return editing
|
||||
? api.put(`/assessment-groups/${editing.id}`, payload)
|
||||
: api.post('/assessment-groups', payload);
|
||||
},
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['assessment-groups'] });
|
||||
queryClient.invalidateQueries({ queryKey: ['assessment-groups-summary'] });
|
||||
@@ -121,6 +160,9 @@ export function AssessmentGroupsPage() {
|
||||
|
||||
const handleEdit = (group: AssessmentGroup) => {
|
||||
setEditing(group);
|
||||
const dueMonths = group.due_months
|
||||
? group.due_months.map(String)
|
||||
: DEFAULT_DUE_MONTHS[group.frequency] || DEFAULT_DUE_MONTHS.monthly;
|
||||
form.setValues({
|
||||
name: group.name,
|
||||
description: group.description || '',
|
||||
@@ -128,6 +170,8 @@ export function AssessmentGroupsPage() {
|
||||
specialAssessment: parseFloat(group.special_assessment || '0'),
|
||||
unitCount: group.unit_count || 0,
|
||||
frequency: group.frequency || 'monthly',
|
||||
dueMonths,
|
||||
dueDay: group.due_day || 1,
|
||||
});
|
||||
open();
|
||||
};
|
||||
@@ -138,6 +182,12 @@ export function AssessmentGroupsPage() {
|
||||
open();
|
||||
};
|
||||
|
||||
const handleFrequencyChange = (value: string | null) => {
|
||||
if (!value) return;
|
||||
form.setFieldValue('frequency', value);
|
||||
form.setFieldValue('dueMonths', DEFAULT_DUE_MONTHS[value] || DEFAULT_DUE_MONTHS.monthly);
|
||||
};
|
||||
|
||||
const fmt = (v: string | number) =>
|
||||
parseFloat(String(v || '0')).toLocaleString('en-US', { style: 'currency', currency: 'USD' });
|
||||
|
||||
@@ -149,6 +199,11 @@ export function AssessmentGroupsPage() {
|
||||
}
|
||||
};
|
||||
|
||||
const formatDueMonths = (months: number[], frequency: string) => {
|
||||
if (!months || frequency === 'monthly') return 'Every month';
|
||||
return months.map((m) => MONTH_ABBREV[m]).join(', ');
|
||||
};
|
||||
|
||||
if (isLoading) return <Center h={300}><Loader /></Center>;
|
||||
|
||||
return (
|
||||
@@ -219,6 +274,7 @@ export function AssessmentGroupsPage() {
|
||||
<Table.Th>Group Name</Table.Th>
|
||||
<Table.Th ta="center">Units</Table.Th>
|
||||
<Table.Th>Frequency</Table.Th>
|
||||
<Table.Th>Due Months</Table.Th>
|
||||
<Table.Th ta="right">Regular Assessment</Table.Th>
|
||||
<Table.Th ta="right">Special Assessment</Table.Th>
|
||||
<Table.Th ta="right">Monthly Equiv.</Table.Th>
|
||||
@@ -229,7 +285,7 @@ export function AssessmentGroupsPage() {
|
||||
<Table.Tbody>
|
||||
{groups.length === 0 && (
|
||||
<Table.Tr>
|
||||
<Table.Td colSpan={8}>
|
||||
<Table.Td colSpan={9}>
|
||||
<Text ta="center" c="dimmed" py="lg">
|
||||
No assessment groups yet. Create groups like "Single Family Homes", "Condos", etc.
|
||||
</Text>
|
||||
@@ -263,6 +319,9 @@ export function AssessmentGroupsPage() {
|
||||
{frequencyLabels[g.frequency] || 'Monthly'}
|
||||
</Badge>
|
||||
</Table.Td>
|
||||
<Table.Td>
|
||||
<Text size="xs" c="dimmed">{formatDueMonths(g.due_months, g.frequency)}</Text>
|
||||
</Table.Td>
|
||||
<Table.Td ta="right" ff="monospace">
|
||||
{fmt(g.regular_assessment)}{freqSuffix(g.frequency)}
|
||||
</Table.Td>
|
||||
@@ -322,8 +381,22 @@ export function AssessmentGroupsPage() {
|
||||
{ value: 'quarterly', label: 'Quarterly' },
|
||||
{ value: 'annual', label: 'Annual' },
|
||||
]}
|
||||
{...form.getInputProps('frequency')}
|
||||
value={form.values.frequency}
|
||||
onChange={handleFrequencyChange}
|
||||
/>
|
||||
{form.values.frequency !== 'monthly' && (
|
||||
<MultiSelect
|
||||
label={form.values.frequency === 'quarterly' ? 'Billing Quarters (select 4 months)' : 'Due Month'}
|
||||
description={form.values.frequency === 'quarterly'
|
||||
? 'Select the first month of each quarter when assessments are due'
|
||||
: 'Select the month when the annual assessment is due'}
|
||||
data={MONTH_OPTIONS}
|
||||
value={form.values.dueMonths}
|
||||
onChange={(v) => form.setFieldValue('dueMonths', v)}
|
||||
error={form.errors.dueMonths}
|
||||
maxValues={form.values.frequency === 'annual' ? 1 : 4}
|
||||
/>
|
||||
)}
|
||||
<Group grow>
|
||||
<NumberInput
|
||||
label={`Regular Assessment (per unit${freqSuffix(form.values.frequency)})`}
|
||||
@@ -340,7 +413,16 @@ export function AssessmentGroupsPage() {
|
||||
{...form.getInputProps('specialAssessment')}
|
||||
/>
|
||||
</Group>
|
||||
<NumberInput label="Expected Unit Count" min={0} {...form.getInputProps('unitCount')} />
|
||||
<Group grow>
|
||||
<NumberInput label="Expected Unit Count" min={0} {...form.getInputProps('unitCount')} />
|
||||
<NumberInput
|
||||
label="Due Day of Month"
|
||||
description="Day invoices are due (1-28)"
|
||||
min={1}
|
||||
max={28}
|
||||
{...form.getInputProps('dueDay')}
|
||||
/>
|
||||
</Group>
|
||||
<Button type="submit" loading={saveMutation.isPending}>
|
||||
{editing ? 'Update' : 'Create'}
|
||||
</Button>
|
||||
|
||||
Reference in New Issue
Block a user