feat: UX enhancements, member limits, forecast fix, and menu cleanup (v2026.3.19)
- Onboarding wizard: add Reserve Account step between Operating and Assessments, redirect to Budget Planning on completion - Dashboard: health score pending state shows clickable links to set up missing items - Projects/Vendors: rich empty-state wizard screens with real-world examples and CTAs - Investment Planning: auto-refresh AI recommendations when empty or stale (>30 days) - Hide Invoices and Payments menus (see PARKING-LOT.md for re-enablement) - Send welcome email via Resend when new members are added to a tenant - Enforce 5-member limit for Starter/Standard/Professional plans (Enterprise unlimited) - Cash flow forecast: only mark months as "Actual" when journal entries exist, fixing the issue where months without data showed as actuals - Bump version to 2026.3.19 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
import {
|
||||
Title, Text, SimpleGrid, Card, Group, ThemeIcon, Stack, Table,
|
||||
Badge, Loader, Center, Divider, RingProgress, Tooltip, Button,
|
||||
Popover, List,
|
||||
Popover, List, Anchor,
|
||||
} from '@mantine/core';
|
||||
import {
|
||||
IconCash,
|
||||
@@ -18,6 +18,7 @@ import {
|
||||
} from '@tabler/icons-react';
|
||||
import { useState, useCallback } from 'react';
|
||||
import { useQuery, useQueryClient } from '@tanstack/react-query';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useAuthStore, useIsReadOnly } from '../../stores/authStore';
|
||||
import api from '../../services/api';
|
||||
|
||||
@@ -58,6 +59,28 @@ function TrajectoryIcon({ trajectory }: { trajectory: string | null }) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// Map missing data items to navigation links
|
||||
const missingDataLinks: Record<string, { label: string; path: string }> = {
|
||||
'reserve fund account': { label: 'Set up a reserve account', path: '/accounts' },
|
||||
'reserve account': { label: 'Set up a reserve account', path: '/accounts' },
|
||||
'reserve projects': { label: 'Add reserve projects', path: '/projects' },
|
||||
'capital projects': { label: 'Add capital projects', path: '/projects' },
|
||||
'projects': { label: 'Add projects', path: '/projects' },
|
||||
'budget': { label: 'Set up a budget', path: '/board-planning/budgets' },
|
||||
'operating budget': { label: 'Set up a budget', path: '/board-planning/budgets' },
|
||||
'reserve budget': { label: 'Set up a budget', path: '/board-planning/budgets' },
|
||||
'assessment groups': { label: 'Create assessment groups', path: '/assessment-groups' },
|
||||
'accounts': { label: 'Set up accounts', path: '/accounts' },
|
||||
};
|
||||
|
||||
function getMissingDataLink(item: string): { label: string; path: string } | null {
|
||||
const lower = item.toLowerCase();
|
||||
for (const [key, value] of Object.entries(missingDataLinks)) {
|
||||
if (lower.includes(key)) return value;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function HealthScoreCard({
|
||||
score,
|
||||
title,
|
||||
@@ -65,6 +88,7 @@ function HealthScoreCard({
|
||||
isRefreshing,
|
||||
onRefresh,
|
||||
lastFailed,
|
||||
onNavigate,
|
||||
}: {
|
||||
score: HealthScore | null;
|
||||
title: string;
|
||||
@@ -72,6 +96,7 @@ function HealthScoreCard({
|
||||
isRefreshing?: boolean;
|
||||
onRefresh?: () => void;
|
||||
lastFailed?: boolean;
|
||||
onNavigate?: (path: string) => void;
|
||||
}) {
|
||||
// No score at all yet
|
||||
if (!score) {
|
||||
@@ -118,9 +143,19 @@ function HealthScoreCard({
|
||||
<Stack align="center" gap="xs">
|
||||
<Badge color="gray" variant="light" size="lg">Pending</Badge>
|
||||
<Text size="xs" c="dimmed" ta="center">Missing data:</Text>
|
||||
{missingItems.map((item: string, i: number) => (
|
||||
<Text key={i} size="xs" c="dimmed" ta="center">{item}</Text>
|
||||
))}
|
||||
{missingItems.map((item: string, i: number) => {
|
||||
const link = getMissingDataLink(item);
|
||||
return link ? (
|
||||
<Anchor key={i} size="xs" href={link.path} onClick={(e: React.MouseEvent) => {
|
||||
e.preventDefault();
|
||||
onNavigate?.(link.path);
|
||||
}}>
|
||||
{item} → {link.label}
|
||||
</Anchor>
|
||||
) : (
|
||||
<Text key={i} size="xs" c="dimmed" ta="center">{item}</Text>
|
||||
);
|
||||
})}
|
||||
</Stack>
|
||||
</Center>
|
||||
</Card>
|
||||
@@ -315,6 +350,7 @@ export function DashboardPage() {
|
||||
const currentOrg = useAuthStore((s) => s.currentOrg);
|
||||
const isReadOnly = useIsReadOnly();
|
||||
const queryClient = useQueryClient();
|
||||
const navigate = useNavigate();
|
||||
|
||||
// Track whether a refresh is in progress (per score type) for async polling
|
||||
const [operatingRefreshing, setOperatingRefreshing] = useState(false);
|
||||
@@ -429,6 +465,7 @@ export function DashboardPage() {
|
||||
isRefreshing={operatingRefreshing}
|
||||
onRefresh={!isReadOnly ? handleRefreshOperating : undefined}
|
||||
lastFailed={!!healthScores?.operating_last_failed}
|
||||
onNavigate={navigate}
|
||||
/>
|
||||
<HealthScoreCard
|
||||
score={healthScores?.reserve || null}
|
||||
@@ -441,6 +478,7 @@ export function DashboardPage() {
|
||||
isRefreshing={reserveRefreshing}
|
||||
onRefresh={!isReadOnly ? handleRefreshReserve : undefined}
|
||||
lastFailed={!!healthScores?.reserve_last_failed}
|
||||
onNavigate={navigate}
|
||||
/>
|
||||
</SimpleGrid>
|
||||
|
||||
|
||||
@@ -559,6 +559,32 @@ export function InvestmentPlanningPage() {
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Auto-refresh: if no recommendations exist or they are older than 30 days, trigger automatically
|
||||
const autoRefreshTriggered = useRef(false);
|
||||
useEffect(() => {
|
||||
if (autoRefreshTriggered.current || isProcessing || isTriggering || isReadOnly) return;
|
||||
if (savedRec === undefined) return; // still loading
|
||||
|
||||
const shouldAutoRefresh = (() => {
|
||||
// No saved recommendation at all
|
||||
if (!savedRec) return true;
|
||||
// Error state with no cached data
|
||||
if (savedRec.status === 'error' && (!savedRec.recommendations || savedRec.recommendations.length === 0)) return true;
|
||||
// Recommendations older than 30 days
|
||||
if (savedRec.created_at) {
|
||||
const age = Date.now() - new Date(savedRec.created_at).getTime();
|
||||
const thirtyDays = 30 * 24 * 60 * 60 * 1000;
|
||||
if (age > thirtyDays) return true;
|
||||
}
|
||||
return false;
|
||||
})();
|
||||
|
||||
if (shouldAutoRefresh) {
|
||||
autoRefreshTriggered.current = true;
|
||||
handleTriggerAI();
|
||||
}
|
||||
}, [savedRec, isProcessing, isTriggering, isReadOnly, handleTriggerAI]);
|
||||
|
||||
// Build AI result from saved recommendation for display
|
||||
const aiResult: AIResponse | null = hasResults
|
||||
? {
|
||||
|
||||
@@ -214,6 +214,13 @@ export function OrgMembersPage() {
|
||||
As an organization administrator, you can add board members, property managers, and
|
||||
viewers to give them access to this tenant. Each member can log in with their own
|
||||
credentials and see the same financial data.
|
||||
{currentOrg?.planLevel && !['enterprise'].includes(currentOrg.planLevel) && (
|
||||
<Text size="sm" mt={6} fw={500}>
|
||||
Your {currentOrg.planLevel === 'professional' ? 'Professional' : 'Starter'} plan
|
||||
supports up to 5 user accounts ({activeMembers.length}/5 used).
|
||||
{activeMembers.length >= 5 && ' Upgrade to Enterprise for unlimited members.'}
|
||||
</Text>
|
||||
)}
|
||||
</Alert>
|
||||
|
||||
<Table striped highlightOnHover>
|
||||
|
||||
@@ -2,13 +2,13 @@ import { useState, useRef } from 'react';
|
||||
import {
|
||||
Title, Table, Group, Button, Stack, Text, Modal, TextInput,
|
||||
NumberInput, Select, Textarea, Badge, ActionIcon, Loader, Center,
|
||||
Card, SimpleGrid, Progress, Switch, Tooltip,
|
||||
Card, SimpleGrid, Progress, Switch, Tooltip, ThemeIcon, List,
|
||||
} from '@mantine/core';
|
||||
import { DateInput } from '@mantine/dates';
|
||||
import { useForm } from '@mantine/form';
|
||||
import { useDisclosure } from '@mantine/hooks';
|
||||
import { notifications } from '@mantine/notifications';
|
||||
import { IconPlus, IconEdit, IconUpload, IconDownload, IconLock, IconLockOpen } from '@tabler/icons-react';
|
||||
import { IconPlus, IconEdit, IconUpload, IconDownload, IconLock, IconLockOpen, IconShieldCheck, IconBulb, IconRocket } from '@tabler/icons-react';
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import api from '../../services/api';
|
||||
import { parseCSV, downloadBlob } from '../../utils/csv';
|
||||
@@ -465,10 +465,55 @@ export function ProjectsPage() {
|
||||
))}
|
||||
{projects.length === 0 && (
|
||||
<Table.Tr>
|
||||
<Table.Td colSpan={9}>
|
||||
<Text ta="center" c="dimmed" py="lg">
|
||||
No projects yet
|
||||
</Text>
|
||||
<Table.Td colSpan={9} p={0}>
|
||||
<Card p="xl" style={{ textAlign: 'center' }}>
|
||||
<ThemeIcon size={60} radius="xl" variant="gradient" gradient={{ from: 'violet', to: 'blue' }} mx="auto" mb="md">
|
||||
<IconShieldCheck size={32} />
|
||||
</ThemeIcon>
|
||||
<Title order={3} mb="xs">Capital Projects & Reserve Planning</Title>
|
||||
<Text c="dimmed" maw={550} mx="auto" mb="lg">
|
||||
Track your community's capital improvement projects, reserve fund allocations,
|
||||
and long-term maintenance schedule. This is where you build a comprehensive
|
||||
picture of your HOA's future capital needs.
|
||||
</Text>
|
||||
<Card withBorder p="md" maw={550} mx="auto" mb="lg" ta="left">
|
||||
<Text fw={600} mb="xs">
|
||||
<IconBulb size={16} style={{ verticalAlign: 'middle', marginRight: 6 }} />
|
||||
Common HOA Projects to Get Started
|
||||
</Text>
|
||||
<List size="sm" spacing="xs" c="dimmed">
|
||||
<List.Item><Text span fw={500} c="dark">Roof Replacement</Text> — Track the remaining useful life and reserve funding for your building's roof</List.Item>
|
||||
<List.Item><Text span fw={500} c="dark">Parking Lot / Paving</Text> — Plan for periodic seal-coating and resurfacing</List.Item>
|
||||
<List.Item><Text span fw={500} c="dark">Pool & Recreation</Text> — Budget for pool resurfacing, equipment, and amenity upgrades</List.Item>
|
||||
<List.Item><Text span fw={500} c="dark">Painting & Exterior</Text> — Schedule exterior painting cycles (typically every 5-7 years)</List.Item>
|
||||
<List.Item><Text span fw={500} c="dark">HVAC Systems</Text> — Track common-area heating and cooling equipment lifecycles</List.Item>
|
||||
<List.Item><Text span fw={500} c="dark">Elevator Modernization</Text> — Plan for required elevator upgrades and code compliance</List.Item>
|
||||
</List>
|
||||
</Card>
|
||||
<Group justify="center" gap="md">
|
||||
{!isReadOnly && (
|
||||
<>
|
||||
<Button
|
||||
size="md"
|
||||
leftSection={<IconRocket size={18} />}
|
||||
variant="gradient"
|
||||
gradient={{ from: 'violet', to: 'blue' }}
|
||||
onClick={handleNew}
|
||||
>
|
||||
Create Your First Project
|
||||
</Button>
|
||||
<Button
|
||||
size="md"
|
||||
variant="light"
|
||||
leftSection={<IconUpload size={16} />}
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
>
|
||||
Import from CSV
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</Group>
|
||||
</Card>
|
||||
</Table.Td>
|
||||
</Table.Tr>
|
||||
)}
|
||||
|
||||
62
frontend/src/pages/vendors/VendorsPage.tsx
vendored
62
frontend/src/pages/vendors/VendorsPage.tsx
vendored
@@ -1,13 +1,13 @@
|
||||
import { useState, useRef } from 'react';
|
||||
import {
|
||||
Title, Table, Group, Button, Stack, TextInput, Modal,
|
||||
Switch, Badge, ActionIcon, Text, Loader, Center,
|
||||
Switch, Badge, ActionIcon, Text, Loader, Center, Card, ThemeIcon, List,
|
||||
} from '@mantine/core';
|
||||
import { DateInput } from '@mantine/dates';
|
||||
import { useForm } from '@mantine/form';
|
||||
import { useDisclosure } from '@mantine/hooks';
|
||||
import { notifications } from '@mantine/notifications';
|
||||
import { IconPlus, IconEdit, IconSearch, IconUpload, IconDownload } from '@tabler/icons-react';
|
||||
import { IconPlus, IconEdit, IconSearch, IconUpload, IconDownload, IconUsers, IconBulb, IconRocket } from '@tabler/icons-react';
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import api from '../../services/api';
|
||||
import { useIsReadOnly } from '../../stores/authStore';
|
||||
@@ -153,7 +153,63 @@ export function VendorsPage() {
|
||||
<Table.Td>{!isReadOnly && <ActionIcon variant="subtle" onClick={() => handleEdit(v)}><IconEdit size={16} /></ActionIcon>}</Table.Td>
|
||||
</Table.Tr>
|
||||
))}
|
||||
{filtered.length === 0 && <Table.Tr><Table.Td colSpan={8}><Text ta="center" c="dimmed" py="lg">No vendors yet</Text></Table.Td></Table.Tr>}
|
||||
{filtered.length === 0 && vendors.length === 0 && (
|
||||
<Table.Tr>
|
||||
<Table.Td colSpan={8} p={0}>
|
||||
<Card p="xl" style={{ textAlign: 'center' }}>
|
||||
<ThemeIcon size={60} radius="xl" variant="gradient" gradient={{ from: 'orange', to: 'yellow' }} mx="auto" mb="md">
|
||||
<IconUsers size={32} />
|
||||
</ThemeIcon>
|
||||
<Title order={3} mb="xs">Vendor Management</Title>
|
||||
<Text c="dimmed" maw={550} mx="auto" mb="lg">
|
||||
Keep track of your HOA's service providers, contractors, and suppliers.
|
||||
Having a centralized vendor directory helps with 1099 reporting, contract
|
||||
renewal tracking, and comparing year-over-year spending.
|
||||
</Text>
|
||||
<Card withBorder p="md" maw={550} mx="auto" mb="lg" ta="left">
|
||||
<Text fw={600} mb="xs">
|
||||
<IconBulb size={16} style={{ verticalAlign: 'middle', marginRight: 6 }} />
|
||||
Common HOA Vendors to Track
|
||||
</Text>
|
||||
<List size="sm" spacing="xs" c="dimmed">
|
||||
<List.Item><Text span fw={500} c="dark">Landscaping Company</Text> — Lawn care, tree trimming, seasonal planting</List.Item>
|
||||
<List.Item><Text span fw={500} c="dark">Property Management</Text> — Day-to-day management and tenant communications</List.Item>
|
||||
<List.Item><Text span fw={500} c="dark">Insurance Provider</Text> — Master policy for buildings and common areas</List.Item>
|
||||
<List.Item><Text span fw={500} c="dark">Pool Maintenance</Text> — Weekly chemical testing, cleaning, and equipment repair</List.Item>
|
||||
<List.Item><Text span fw={500} c="dark">Snow Removal / Paving</Text> — Winter plowing and parking lot maintenance</List.Item>
|
||||
<List.Item><Text span fw={500} c="dark">Attorney / CPA</Text> — Legal counsel and annual financial review</List.Item>
|
||||
</List>
|
||||
</Card>
|
||||
<Group justify="center" gap="md">
|
||||
{!isReadOnly && (
|
||||
<>
|
||||
<Button
|
||||
size="md"
|
||||
leftSection={<IconRocket size={18} />}
|
||||
variant="gradient"
|
||||
gradient={{ from: 'orange', to: 'yellow' }}
|
||||
onClick={() => { setEditing(null); form.reset(); open(); }}
|
||||
>
|
||||
Add Your First Vendor
|
||||
</Button>
|
||||
<Button
|
||||
size="md"
|
||||
variant="light"
|
||||
leftSection={<IconUpload size={16} />}
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
>
|
||||
Import from CSV
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</Group>
|
||||
</Card>
|
||||
</Table.Td>
|
||||
</Table.Tr>
|
||||
)}
|
||||
{filtered.length === 0 && vendors.length > 0 && (
|
||||
<Table.Tr><Table.Td colSpan={8}><Text ta="center" c="dimmed" py="lg">No vendors match your search</Text></Table.Td></Table.Tr>
|
||||
)}
|
||||
</Table.Tbody>
|
||||
</Table>
|
||||
<Modal opened={opened} onClose={close} title={editing ? 'Edit Vendor' : 'New Vendor'}>
|
||||
|
||||
Reference in New Issue
Block a user