Phase 2 tweaks: admin tenant creation, unit delete, frequency, UI overhaul
- Admin panel: create tenants with org + first user, manage org status (active/suspended/archived), contract number and plan level fields - Units: delete with invoice check, assessment group dropdown binding - Assessment groups: frequency field (monthly/quarterly/annual) with income calculations normalized to monthly equivalents - Sidebar: grouped nav sections (Financials, Assessments, Transactions, Planning, Reports, Admin), renamed Chart of Accounts to Accounts - Header: replaced text with SVG logo - Capital projects: Kanban as default view, table-only PDF export, Future category (beyond 5-year plan) - Auth: block login for suspended/archived organizations Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
import { useState } from 'react';
|
||||
import {
|
||||
Title, Text, Card, Table, SimpleGrid, Group, Stack, Badge, Loader, Center,
|
||||
ThemeIcon, Button, Modal, TextInput, NumberInput, Textarea, Switch, ActionIcon,
|
||||
ThemeIcon, Button, Modal, TextInput, NumberInput, Textarea, Select, ActionIcon,
|
||||
} from '@mantine/core';
|
||||
import { useForm } from '@mantine/form';
|
||||
import { useDisclosure } from '@mantine/hooks';
|
||||
@@ -19,6 +19,7 @@ interface AssessmentGroup {
|
||||
regular_assessment: string;
|
||||
special_assessment: string;
|
||||
unit_count: number;
|
||||
frequency: string;
|
||||
actual_unit_count: string;
|
||||
monthly_operating_income: string;
|
||||
monthly_reserve_income: string;
|
||||
@@ -34,6 +35,18 @@ interface Summary {
|
||||
total_units: string;
|
||||
}
|
||||
|
||||
const frequencyLabels: Record<string, string> = {
|
||||
monthly: 'Monthly',
|
||||
quarterly: 'Quarterly',
|
||||
annual: 'Annual',
|
||||
};
|
||||
|
||||
const frequencyColors: Record<string, string> = {
|
||||
monthly: 'blue',
|
||||
quarterly: 'teal',
|
||||
annual: 'violet',
|
||||
};
|
||||
|
||||
export function AssessmentGroupsPage() {
|
||||
const [opened, { open, close }] = useDisclosure(false);
|
||||
const [editing, setEditing] = useState<AssessmentGroup | null>(null);
|
||||
@@ -56,6 +69,7 @@ export function AssessmentGroupsPage() {
|
||||
regularAssessment: 0,
|
||||
specialAssessment: 0,
|
||||
unitCount: 0,
|
||||
frequency: 'monthly',
|
||||
},
|
||||
validate: {
|
||||
name: (v) => (v.length > 0 ? null : 'Required'),
|
||||
@@ -99,6 +113,7 @@ export function AssessmentGroupsPage() {
|
||||
regularAssessment: parseFloat(group.regular_assessment || '0'),
|
||||
specialAssessment: parseFloat(group.special_assessment || '0'),
|
||||
unitCount: group.unit_count || 0,
|
||||
frequency: group.frequency || 'monthly',
|
||||
});
|
||||
open();
|
||||
};
|
||||
@@ -112,6 +127,14 @@ export function AssessmentGroupsPage() {
|
||||
const fmt = (v: string | number) =>
|
||||
parseFloat(String(v || '0')).toLocaleString('en-US', { style: 'currency', currency: 'USD' });
|
||||
|
||||
const freqSuffix = (freq: string) => {
|
||||
switch (freq) {
|
||||
case 'quarterly': return '/qtr';
|
||||
case 'annual': return '/yr';
|
||||
default: return '/mo';
|
||||
}
|
||||
};
|
||||
|
||||
if (isLoading) return <Center h={300}><Loader /></Center>;
|
||||
|
||||
return (
|
||||
@@ -119,7 +142,7 @@ export function AssessmentGroupsPage() {
|
||||
<Group justify="space-between">
|
||||
<div>
|
||||
<Title order={2}>Assessment Groups</Title>
|
||||
<Text c="dimmed" size="sm">Manage property types with different assessment rates</Text>
|
||||
<Text c="dimmed" size="sm">Manage property types with different assessment rates and frequencies</Text>
|
||||
</div>
|
||||
<Button leftSection={<IconPlus size={16} />} onClick={handleNew}>
|
||||
Add Group
|
||||
@@ -152,7 +175,7 @@ export function AssessmentGroupsPage() {
|
||||
<Card withBorder padding="lg">
|
||||
<Group justify="space-between">
|
||||
<div>
|
||||
<Text size="xs" c="dimmed" tt="uppercase" fw={700}>Monthly Operating</Text>
|
||||
<Text size="xs" c="dimmed" tt="uppercase" fw={700}>Monthly Equiv. Operating</Text>
|
||||
<Text fw={700} size="xl">{fmt(summary?.total_monthly_operating || '0')}</Text>
|
||||
</div>
|
||||
<ThemeIcon color="teal" variant="light" size={48} radius="md">
|
||||
@@ -163,7 +186,7 @@ export function AssessmentGroupsPage() {
|
||||
<Card withBorder padding="lg">
|
||||
<Group justify="space-between">
|
||||
<div>
|
||||
<Text size="xs" c="dimmed" tt="uppercase" fw={700}>Monthly Reserve</Text>
|
||||
<Text size="xs" c="dimmed" tt="uppercase" fw={700}>Monthly Equiv. Reserve</Text>
|
||||
<Text fw={700} size="xl">{fmt(summary?.total_monthly_reserve || '0')}</Text>
|
||||
</div>
|
||||
<ThemeIcon color="violet" variant="light" size={48} radius="md">
|
||||
@@ -179,10 +202,10 @@ export function AssessmentGroupsPage() {
|
||||
<Table.Tr>
|
||||
<Table.Th>Group Name</Table.Th>
|
||||
<Table.Th ta="center">Units</Table.Th>
|
||||
<Table.Th>Frequency</Table.Th>
|
||||
<Table.Th ta="right">Regular Assessment</Table.Th>
|
||||
<Table.Th ta="right">Special Assessment</Table.Th>
|
||||
<Table.Th ta="right">Monthly Operating</Table.Th>
|
||||
<Table.Th ta="right">Monthly Reserve</Table.Th>
|
||||
<Table.Th ta="right">Monthly Equiv.</Table.Th>
|
||||
<Table.Th>Status</Table.Th>
|
||||
<Table.Th></Table.Th>
|
||||
</Table.Tr>
|
||||
@@ -208,14 +231,24 @@ export function AssessmentGroupsPage() {
|
||||
<Table.Td ta="center">
|
||||
<Badge variant="light">{g.actual_unit_count || g.unit_count}</Badge>
|
||||
</Table.Td>
|
||||
<Table.Td ta="right" ff="monospace">{fmt(g.regular_assessment)}</Table.Td>
|
||||
<Table.Td>
|
||||
<Badge
|
||||
color={frequencyColors[g.frequency] || 'blue'}
|
||||
variant="light"
|
||||
size="sm"
|
||||
>
|
||||
{frequencyLabels[g.frequency] || 'Monthly'}
|
||||
</Badge>
|
||||
</Table.Td>
|
||||
<Table.Td ta="right" ff="monospace">
|
||||
{fmt(g.regular_assessment)}{freqSuffix(g.frequency)}
|
||||
</Table.Td>
|
||||
<Table.Td ta="right" ff="monospace">
|
||||
{parseFloat(g.special_assessment || '0') > 0 ? (
|
||||
<Badge color="orange" variant="light">{fmt(g.special_assessment)}</Badge>
|
||||
<Badge color="orange" variant="light">{fmt(g.special_assessment)}{freqSuffix(g.frequency)}</Badge>
|
||||
) : '-'}
|
||||
</Table.Td>
|
||||
<Table.Td ta="right" ff="monospace">{fmt(g.monthly_operating_income)}</Table.Td>
|
||||
<Table.Td ta="right" ff="monospace">{fmt(g.monthly_reserve_income)}</Table.Td>
|
||||
<Table.Td ta="right" ff="monospace">{fmt(g.total_monthly_income)}</Table.Td>
|
||||
<Table.Td>
|
||||
<Badge color={g.is_active ? 'green' : 'gray'} variant="light" size="sm">
|
||||
{g.is_active ? 'Active' : 'Archived'}
|
||||
@@ -246,16 +279,26 @@ export function AssessmentGroupsPage() {
|
||||
<Stack>
|
||||
<TextInput label="Group Name" placeholder="e.g. Single Family Homes" required {...form.getInputProps('name')} />
|
||||
<Textarea label="Description" placeholder="Optional description" {...form.getInputProps('description')} />
|
||||
<Select
|
||||
label="Assessment Frequency"
|
||||
description="How often assessments are collected"
|
||||
data={[
|
||||
{ value: 'monthly', label: 'Monthly' },
|
||||
{ value: 'quarterly', label: 'Quarterly' },
|
||||
{ value: 'annual', label: 'Annual' },
|
||||
]}
|
||||
{...form.getInputProps('frequency')}
|
||||
/>
|
||||
<Group grow>
|
||||
<NumberInput
|
||||
label="Regular Assessment (per unit)"
|
||||
label={`Regular Assessment (per unit${freqSuffix(form.values.frequency)})`}
|
||||
prefix="$"
|
||||
decimalScale={2}
|
||||
min={0}
|
||||
{...form.getInputProps('regularAssessment')}
|
||||
/>
|
||||
<NumberInput
|
||||
label="Special Assessment (per unit)"
|
||||
label={`Special Assessment (per unit${freqSuffix(form.values.frequency)})`}
|
||||
prefix="$"
|
||||
decimalScale={2}
|
||||
min={0}
|
||||
|
||||
Reference in New Issue
Block a user