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>
2026-03-18 14:47:04 -04:00
parent db8b520009
commit 66e2f87a96
14 changed files with 482 additions and 41 deletions
--- a/frontend/src/components/onboarding/OnboardingWizard.tsx
+++ b/frontend/src/components/onboarding/OnboardingWizard.tsx
@@ -9,8 +9,9 @@ import { notifications } from '@mantine/notifications';
 import {
  IconBuildingBank, IconUsers,
  IconPlus, IconTrash, IconCheck, IconRocket,
-  IconAlertCircle, IconFileSpreadsheet,
+  IconAlertCircle, IconFileSpreadsheet, IconPigMoney, IconX,
 } from '@tabler/icons-react';
+import { useNavigate } from 'react-router-dom';
 import api from '../../services/api';
 import { useAuthStore } from '../../stores/authStore';

@@ -26,12 +27,13 @@ interface UnitRow {
 }

 export function OnboardingWizard({ opened, onComplete }: OnboardingWizardProps) {
+  const navigate = useNavigate();
  const [active, setActive] = useState(0);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const setOrgSettings = useAuthStore((s) => s.setOrgSettings);

-  // ── Step 1: Account State ──
+  // ── Step 1: Operating Account State ──
  const [accountCreated, setAccountCreated] = useState(false);
  const [accountName, setAccountName] = useState('Operating Checking');
  const [accountNumber, setAccountNumber] = useState('1000');
@@ -39,7 +41,16 @@ export function OnboardingWizard({ opened, onComplete }: OnboardingWizardProps)
  const [initialBalance, setInitialBalance] = useState<number | string>(0);
  const [balanceDate, setBalanceDate] = useState<Date | null>(new Date());

-  // ── Step 2: Assessment Group State ──
+  // ── Step 2: Reserve Account State ──
+  const [reserveCreated, setReserveCreated] = useState(false);
+  const [reserveSkipped, setReserveSkipped] = useState(false);
+  const [reserveName, setReserveName] = useState('Reserve Savings');
+  const [reserveNumber, setReserveNumber] = useState('2000');
+  const [reserveDescription, setReserveDescription] = useState('');
+  const [reserveBalance, setReserveBalance] = useState<number | string>(0);
+  const [reserveBalanceDate, setReserveBalanceDate] = useState<Date | null>(new Date());
+
+  // ── Step 3: Assessment Group State ──
  const [groupCreated, setGroupCreated] = useState(false);
  const [groupName, setGroupName] = useState('Standard Assessment');
  const [regularAssessment, setRegularAssessment] = useState<number | string>(0);
@@ -48,7 +59,7 @@ export function OnboardingWizard({ opened, onComplete }: OnboardingWizardProps)
  const [units, setUnits] = useState<UnitRow[]>([]);
  const [unitsCreated, setUnitsCreated] = useState(false);

-  // ── Step 1: Create Account ──
+  // ── Step 1: Create Operating Account ──
  const handleCreateAccount = async () => {
    if (!accountName.trim()) {
      setError('Account name is required');
@@ -90,7 +101,53 @@ export function OnboardingWizard({ opened, onComplete }: OnboardingWizardProps)
    }
  };

-  // ── Step 2: Create Assessment Group ──
+  // ── Step 2: Create Reserve Account ──
+  const handleCreateReserve = async () => {
+    if (!reserveName.trim()) {
+      setError('Account name is required');
+      return;
+    }
+    if (!reserveNumber.trim()) {
+      setError('Account number is required');
+      return;
+    }
+    const balance = typeof reserveBalance === 'string' ? parseFloat(reserveBalance) : reserveBalance;
+    if (isNaN(balance)) {
+      setError('Initial balance must be a valid number');
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+    try {
+      await api.post('/accounts', {
+        accountNumber: reserveNumber.trim(),
+        name: reserveName.trim(),
+        description: reserveDescription.trim(),
+        accountType: 'asset',
+        fundType: 'reserve',
+        initialBalance: balance,
+        initialBalanceDate: reserveBalanceDate ? reserveBalanceDate.toISOString().split('T')[0] : undefined,
+      });
+      setReserveCreated(true);
+      notifications.show({
+        title: 'Reserve Account Created',
+        message: `${reserveName} has been created with an initial balance of $${balance.toLocaleString()}`,
+        color: 'green',
+      });
+    } catch (err: any) {
+      const msg = err.response?.data?.message || 'Failed to create reserve account';
+      setError(typeof msg === 'string' ? msg : JSON.stringify(msg));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSkipReserve = () => {
+    setReserveSkipped(true);
+  };
+
+  // ── Step 3: Create Assessment Group ──
  const handleCreateGroup = async () => {
    if (!groupName.trim()) {
      setError('Group name is required');
@@ -154,16 +211,19 @@ export function OnboardingWizard({ opened, onComplete }: OnboardingWizardProps)
    }
  };

-  // ── Finish Wizard ──
+  // ── Finish Wizard → Navigate to Budget Planning ──
  const handleFinish = async () => {
    setLoading(true);
    try {
      await api.patch('/organizations/settings', { onboardingComplete: true });
      setOrgSettings({ onboardingComplete: true });
      onComplete();
+      // Navigate to Budget Planning so user can set up their budget immediately
+      navigate('/board-planning/budgets');
    } catch {
      // Even if API fails, close the wizard — onboarding data is already created
      onComplete();
+      navigate('/board-planning/budgets');
    } finally {
      setLoading(false);
    }
@@ -187,13 +247,14 @@ export function OnboardingWizard({ opened, onComplete }: OnboardingWizardProps)
  // ── Navigation ──
  const canGoNext = () => {
    if (active === 0) return accountCreated;
-    if (active === 1) return groupCreated;
+    if (active === 1) return reserveCreated || reserveSkipped;
+    if (active === 2) return groupCreated;
    return false;
  };

  const nextStep = () => {
    setError(null);
-    if (active < 2) setActive(active + 1);
+    if (active < 3) setActive(active + 1);
  };

  return (
@@ -227,10 +288,16 @@ export function OnboardingWizard({ opened, onComplete }: OnboardingWizardProps)
        <Stepper active={active} size="sm" mb="xl">
          <Stepper.Step
            label="Operating Account"
-            description="Set up your primary bank account"
+            description="Primary bank account"
            icon={<IconBuildingBank size={18} />}
            completedIcon={<IconCheck size={18} />}
          />
+          <Stepper.Step
+            label="Reserve Account"
+            description={reserveSkipped ? 'Skipped' : 'Savings account'}
+            icon={<IconPigMoney size={18} />}
+            completedIcon={reserveSkipped ? <IconX size={18} /> : <IconCheck size={18} />}
+          />
          <Stepper.Step
            label="Assessment Group"
            description="Define homeowner assessments"
@@ -322,8 +389,103 @@ export function OnboardingWizard({ opened, onComplete }: OnboardingWizardProps)
          </Stack>
        )}

-        {/* ── Step 2: Assessment Group + Units ── */}
+        {/* ── Step 2: Reserve Account ── */}
        {active === 1 && (
+          <Stack gap="md">
+            <Card withBorder p="lg">
+              <Text fw={600} mb="xs">Set Up a Reserve Savings Account</Text>
+              <Text size="sm" c="dimmed" mb="md">
+                Most HOAs maintain a reserve fund for long-term capital projects like roof replacements,
+                paving, and major repairs. Setting this up now gives you a more complete financial picture
+                from the start.
+              </Text>
+
+              {reserveCreated ? (
+                <Alert icon={<IconCheck size={16} />} color="green" variant="light">
+                  <Text fw={500}>{reserveName} created successfully!</Text>
+                  <Text size="sm" c="dimmed">
+                    Initial balance: ${(typeof reserveBalance === 'number' ? reserveBalance : parseFloat(reserveBalance as string) || 0).toLocaleString()}
+                    {reserveBalanceDate && ` as of ${reserveBalanceDate.toLocaleDateString()}`}
+                  </Text>
+                </Alert>
+              ) : reserveSkipped ? (
+                <Alert icon={<IconX size={16} />} color="gray" variant="light">
+                  <Text fw={500}>Reserve account skipped</Text>
+                  <Text size="sm" c="dimmed">
+                    You can always add a reserve account later from the Accounts page.
+                  </Text>
+                </Alert>
+              ) : (
+                <>
+                  <SimpleGrid cols={2} mb="md">
+                    <TextInput
+                      label="Account Name"
+                      placeholder="e.g. Reserve Savings"
+                      value={reserveName}
+                      onChange={(e) => setReserveName(e.currentTarget.value)}
+                      required
+                    />
+                    <TextInput
+                      label="Account Number"
+                      placeholder="e.g. 2000"
+                      value={reserveNumber}
+                      onChange={(e) => setReserveNumber(e.currentTarget.value)}
+                      required
+                    />
+                  </SimpleGrid>
+                  <Textarea
+                    label="Description"
+                    placeholder="Optional description"
+                    value={reserveDescription}
+                    onChange={(e) => setReserveDescription(e.currentTarget.value)}
+                    mb="md"
+                    autosize
+                    minRows={2}
+                  />
+                  <SimpleGrid cols={2} mb="md">
+                    <NumberInput
+                      label="Current Balance"
+                      description="Enter the current balance of this reserve account"
+                      placeholder="0.00"
+                      value={reserveBalance}
+                      onChange={setReserveBalance}
+                      thousandSeparator=","
+                      prefix="$"
+                      decimalScale={2}
+                    />
+                    <DateInput
+                      label="Balance As-Of Date"
+                      description="Date this balance was accurate"
+                      value={reserveBalanceDate}
+                      onChange={setReserveBalanceDate}
+                      maxDate={new Date()}
+                      clearable={false}
+                    />
+                  </SimpleGrid>
+                  <Group>
+                    <Button
+                      onClick={handleCreateReserve}
+                      loading={loading}
+                      leftSection={<IconPigMoney size={16} />}
+                    >
+                      Create Reserve Account
+                    </Button>
+                    <Button
+                      variant="subtle"
+                      color="gray"
+                      onClick={handleSkipReserve}
+                    >
+                      No Reserve Account
+                    </Button>
+                  </Group>
+                </>
+              )}
+            </Card>
+          </Stack>
+        )}
+
+        {/* ── Step 3: Assessment Group + Units ── */}
+        {active === 2 && (
          <Stack gap="md">
            <Card withBorder p="lg">
              <Text fw={600} mb="xs">Create an Assessment Group</Text>
@@ -458,23 +620,32 @@ export function OnboardingWizard({ opened, onComplete }: OnboardingWizardProps)
        )}

        {/* ── Completion Screen ── */}
-        {active === 2 && (
+        {active === 3 && (
          <Card withBorder p="xl" style={{ textAlign: 'center' }}>
            <ThemeIcon size={60} radius="xl" variant="gradient" gradient={{ from: 'green', to: 'teal' }} mx="auto" mb="md">
              <IconCheck size={32} />
            </ThemeIcon>
            <Title order={3} mb="xs">You&apos;re All Set!</Title>
            <Text c="dimmed" mb="lg" maw={400} mx="auto">
-              Your organization is configured and ready to go. You can always update your accounts
-              and assessment groups from the sidebar navigation.
+              Your organization is configured and ready to go. The next step is to set up your annual
+              budget — we&apos;ll take you straight to Budget Planning.
            </Text>
-            <SimpleGrid cols={3} mb="xl" maw={500} mx="auto">
+            <SimpleGrid cols={4} mb="xl" maw={600} mx="auto">
              <Card withBorder p="sm" style={{ textAlign: 'center' }}>
                <ThemeIcon size={32} color="blue" variant="light" radius="xl" mx="auto" mb={4}>
                  <IconBuildingBank size={16} />
                </ThemeIcon>
                <Badge color="green" size="sm">Done</Badge>
-                <Text size="xs" mt={4}>Account</Text>
+                <Text size="xs" mt={4}>Operating</Text>
+              </Card>
+              <Card withBorder p="sm" style={{ textAlign: 'center' }}>
+                <ThemeIcon size={32} color="violet" variant="light" radius="xl" mx="auto" mb={4}>
+                  <IconPigMoney size={16} />
+                </ThemeIcon>
+                <Badge color={reserveSkipped ? 'gray' : 'green'} size="sm">
+                  {reserveSkipped ? 'Skipped' : 'Done'}
+                </Badge>
+                <Text size="xs" mt={4}>Reserve</Text>
              </Card>
              <Card withBorder p="sm" style={{ textAlign: 'center' }}>
                <ThemeIcon size={32} color="blue" variant="light" radius="xl" mx="auto" mb={4}>
@@ -484,7 +655,7 @@ export function OnboardingWizard({ opened, onComplete }: OnboardingWizardProps)
                <Text size="xs" mt={4}>Assessments</Text>
              </Card>
              <Card withBorder p="sm" style={{ textAlign: 'center' }}>
-                <ThemeIcon size={32} color="blue" variant="light" radius="xl" mx="auto" mb={4}>
+                <ThemeIcon size={32} color="cyan" variant="light" radius="xl" mx="auto" mb={4}>
                  <IconFileSpreadsheet size={16} />
                </ThemeIcon>
                <Badge color="cyan" size="sm">Up Next</Badge>
@@ -494,25 +665,26 @@ export function OnboardingWizard({ opened, onComplete }: OnboardingWizardProps)
            <Alert icon={<IconFileSpreadsheet size={16} />} color="blue" variant="light" mb="lg" ta="left">
              <Text size="sm" fw={500} mb={4}>Set Up Your Budget</Text>
              <Text size="sm" c="dimmed">
-                Head to <Text span fw={600}>Budget Planning</Text> from the sidebar to download a CSV template,
-                fill in your monthly amounts, and upload your budget. You can do this at any time.
+                Your budget is critical for accurate financial health scores, cash flow forecasting,
+                and investment planning. Click below to go directly to Budget Planning where you can
+                download a CSV template, fill in your monthly amounts, and upload your budget.
              </Text>
            </Alert>
            <Button
              size="lg"
              onClick={handleFinish}
              loading={loading}
-              leftSection={<IconRocket size={18} />}
+              leftSection={<IconFileSpreadsheet size={18} />}
              variant="gradient"
              gradient={{ from: 'blue', to: 'cyan' }}
            >
-              Start Using LedgerIQ
+              Set Up My Budget
            </Button>
          </Card>
        )}

        {/* ── Navigation Buttons ── */}
-        {active < 2 && (
+        {active < 3 && (
          <Group justify="flex-end" mt="xl">
            <Button
              onClick={nextStep}