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,12 +1,12 @@
|
||||
import { useState } from 'react';
|
||||
import {
|
||||
Title, Table, Group, Button, Stack, TextInput, Modal,
|
||||
NumberInput, Select, Badge, ActionIcon, Text, Loader, Center,
|
||||
NumberInput, Select, Badge, ActionIcon, Text, Loader, Center, Tooltip,
|
||||
} 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 { IconPlus, IconEdit, IconSearch, IconTrash } from '@tabler/icons-react';
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import api from '../../services/api';
|
||||
|
||||
@@ -19,12 +19,24 @@ interface Unit {
|
||||
monthly_assessment: string;
|
||||
status: string;
|
||||
balance_due?: string;
|
||||
assessment_group_id?: string;
|
||||
assessment_group_name?: string;
|
||||
group_regular_assessment?: string;
|
||||
group_frequency?: string;
|
||||
}
|
||||
|
||||
interface AssessmentGroup {
|
||||
id: string;
|
||||
name: string;
|
||||
regular_assessment: string;
|
||||
frequency: string;
|
||||
}
|
||||
|
||||
export function UnitsPage() {
|
||||
const [opened, { open, close }] = useDisclosure(false);
|
||||
const [editing, setEditing] = useState<Unit | null>(null);
|
||||
const [search, setSearch] = useState('');
|
||||
const [deleteConfirm, setDeleteConfirm] = useState<Unit | null>(null);
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const { data: units = [], isLoading } = useQuery<Unit[]>({
|
||||
@@ -32,16 +44,25 @@ export function UnitsPage() {
|
||||
queryFn: async () => { const { data } = await api.get('/units'); return data; },
|
||||
});
|
||||
|
||||
const { data: assessmentGroups = [] } = useQuery<AssessmentGroup[]>({
|
||||
queryKey: ['assessment-groups'],
|
||||
queryFn: async () => { const { data } = await api.get('/assessment-groups'); return data; },
|
||||
});
|
||||
|
||||
const form = useForm({
|
||||
initialValues: {
|
||||
unit_number: '', address_line1: '', city: '', state: '', zip_code: '',
|
||||
owner_name: '', owner_email: '', owner_phone: '', monthly_assessment: 0,
|
||||
assessment_group_id: '' as string | null,
|
||||
},
|
||||
validate: { unit_number: (v) => (v.length > 0 ? null : 'Required') },
|
||||
});
|
||||
|
||||
const saveMutation = useMutation({
|
||||
mutationFn: (values: any) => editing ? api.put(`/units/${editing.id}`, values) : api.post('/units', values),
|
||||
mutationFn: (values: any) => {
|
||||
const payload = { ...values, assessment_group_id: values.assessment_group_id || null };
|
||||
return editing ? api.put(`/units/${editing.id}`, payload) : api.post('/units', payload);
|
||||
},
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['units'] });
|
||||
notifications.show({ message: editing ? 'Unit updated' : 'Unit created', color: 'green' });
|
||||
@@ -50,16 +71,40 @@ export function UnitsPage() {
|
||||
onError: (err: any) => { notifications.show({ message: err.response?.data?.message || 'Error', color: 'red' }); },
|
||||
});
|
||||
|
||||
const deleteMutation = useMutation({
|
||||
mutationFn: (id: string) => api.delete(`/units/${id}`),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['units'] });
|
||||
notifications.show({ message: 'Unit deleted', color: 'green' });
|
||||
setDeleteConfirm(null);
|
||||
},
|
||||
onError: (err: any) => {
|
||||
notifications.show({ message: err.response?.data?.message || 'Cannot delete unit', color: 'red' });
|
||||
setDeleteConfirm(null);
|
||||
},
|
||||
});
|
||||
|
||||
const handleEdit = (u: Unit) => {
|
||||
setEditing(u);
|
||||
form.setValues({
|
||||
unit_number: u.unit_number, address_line1: u.address_line1 || '',
|
||||
city: '', state: '', zip_code: '', owner_name: u.owner_name || '',
|
||||
owner_email: u.owner_email || '', owner_phone: '', monthly_assessment: parseFloat(u.monthly_assessment || '0'),
|
||||
assessment_group_id: u.assessment_group_id || '',
|
||||
});
|
||||
open();
|
||||
};
|
||||
|
||||
const handleGroupChange = (groupId: string | null) => {
|
||||
form.setFieldValue('assessment_group_id', groupId);
|
||||
if (groupId) {
|
||||
const group = assessmentGroups.find(g => g.id === groupId);
|
||||
if (group) {
|
||||
form.setFieldValue('monthly_assessment', parseFloat(group.regular_assessment || '0'));
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const filtered = units.filter((u) =>
|
||||
!search || u.unit_number.toLowerCase().includes(search.toLowerCase()) ||
|
||||
(u.owner_name || '').toLowerCase().includes(search.toLowerCase())
|
||||
@@ -77,9 +122,14 @@ export function UnitsPage() {
|
||||
<Table striped highlightOnHover>
|
||||
<Table.Thead>
|
||||
<Table.Tr>
|
||||
<Table.Th>Unit #</Table.Th><Table.Th>Address</Table.Th><Table.Th>Owner</Table.Th>
|
||||
<Table.Th>Email</Table.Th><Table.Th ta="right">Assessment</Table.Th>
|
||||
<Table.Th>Status</Table.Th><Table.Th></Table.Th>
|
||||
<Table.Th>Unit #</Table.Th>
|
||||
<Table.Th>Address</Table.Th>
|
||||
<Table.Th>Owner</Table.Th>
|
||||
<Table.Th>Email</Table.Th>
|
||||
<Table.Th>Group</Table.Th>
|
||||
<Table.Th ta="right">Assessment</Table.Th>
|
||||
<Table.Th>Status</Table.Th>
|
||||
<Table.Th></Table.Th>
|
||||
</Table.Tr>
|
||||
</Table.Thead>
|
||||
<Table.Tbody>
|
||||
@@ -89,15 +139,35 @@ export function UnitsPage() {
|
||||
<Table.Td>{u.address_line1}</Table.Td>
|
||||
<Table.Td>{u.owner_name}</Table.Td>
|
||||
<Table.Td>{u.owner_email}</Table.Td>
|
||||
<Table.Td>
|
||||
{u.assessment_group_name ? (
|
||||
<Badge variant="light" size="sm">{u.assessment_group_name}</Badge>
|
||||
) : (
|
||||
<Text size="xs" c="dimmed">-</Text>
|
||||
)}
|
||||
</Table.Td>
|
||||
<Table.Td ta="right" ff="monospace">${parseFloat(u.monthly_assessment || '0').toFixed(2)}</Table.Td>
|
||||
<Table.Td><Badge color={u.status === 'active' ? 'green' : 'gray'} size="sm">{u.status}</Badge></Table.Td>
|
||||
<Table.Td><ActionIcon variant="subtle" onClick={() => handleEdit(u)}><IconEdit size={16} /></ActionIcon></Table.Td>
|
||||
<Table.Td>
|
||||
<Group gap={4}>
|
||||
<ActionIcon variant="subtle" onClick={() => handleEdit(u)}>
|
||||
<IconEdit size={16} />
|
||||
</ActionIcon>
|
||||
<Tooltip label="Delete unit">
|
||||
<ActionIcon variant="subtle" color="red" onClick={() => setDeleteConfirm(u)}>
|
||||
<IconTrash size={16} />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
</Group>
|
||||
</Table.Td>
|
||||
</Table.Tr>
|
||||
))}
|
||||
{filtered.length === 0 && <Table.Tr><Table.Td colSpan={7}><Text ta="center" c="dimmed" py="lg">No units yet</Text></Table.Td></Table.Tr>}
|
||||
{filtered.length === 0 && <Table.Tr><Table.Td colSpan={8}><Text ta="center" c="dimmed" py="lg">No units yet</Text></Table.Td></Table.Tr>}
|
||||
</Table.Tbody>
|
||||
</Table>
|
||||
<Modal opened={opened} onClose={close} title={editing ? 'Edit Unit' : 'New Unit'}>
|
||||
|
||||
{/* Create/Edit Modal */}
|
||||
<Modal opened={opened} onClose={close} title={editing ? 'Edit Unit' : 'New Unit'} size="md">
|
||||
<form onSubmit={form.onSubmit((v) => saveMutation.mutate(v))}>
|
||||
<Stack>
|
||||
<TextInput label="Unit Number" required {...form.getInputProps('unit_number')} />
|
||||
@@ -110,11 +180,43 @@ export function UnitsPage() {
|
||||
<TextInput label="Owner Name" {...form.getInputProps('owner_name')} />
|
||||
<TextInput label="Owner Email" {...form.getInputProps('owner_email')} />
|
||||
<TextInput label="Owner Phone" {...form.getInputProps('owner_phone')} />
|
||||
<Select
|
||||
label="Assessment Group"
|
||||
placeholder="Select a group (optional)"
|
||||
data={assessmentGroups.map(g => ({
|
||||
value: g.id,
|
||||
label: `${g.name} — $${parseFloat(g.regular_assessment || '0').toFixed(2)}/${g.frequency || 'mo'}`,
|
||||
}))}
|
||||
value={form.values.assessment_group_id}
|
||||
onChange={handleGroupChange}
|
||||
clearable
|
||||
/>
|
||||
<NumberInput label="Monthly Assessment" prefix="$" decimalScale={2} min={0} {...form.getInputProps('monthly_assessment')} />
|
||||
<Button type="submit" loading={saveMutation.isPending}>{editing ? 'Update' : 'Create'}</Button>
|
||||
</Stack>
|
||||
</form>
|
||||
</Modal>
|
||||
|
||||
{/* Delete Confirmation Modal */}
|
||||
<Modal opened={!!deleteConfirm} onClose={() => setDeleteConfirm(null)} title="Delete Unit" size="sm">
|
||||
<Stack>
|
||||
<Text>
|
||||
Are you sure you want to delete unit <strong>{deleteConfirm?.unit_number}</strong>
|
||||
{deleteConfirm?.owner_name ? ` (${deleteConfirm.owner_name})` : ''}?
|
||||
</Text>
|
||||
<Text size="sm" c="dimmed">This action cannot be undone.</Text>
|
||||
<Group justify="flex-end">
|
||||
<Button variant="default" onClick={() => setDeleteConfirm(null)}>Cancel</Button>
|
||||
<Button
|
||||
color="red"
|
||||
loading={deleteMutation.isPending}
|
||||
onClick={() => deleteConfirm && deleteMutation.mutate(deleteConfirm.id)}
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Modal>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user