Quality-of-life enhancements: CSV import/export, opening balances, interest rates, mobile UX

- CSV import/export for Units, Projects, and Vendors with match-on-name/number upsert
- Cash Flow report toggle for Cash Only vs Cash + Investments
- Per-account and bulk opening balance setting with as-of date
- Interest rate field on normal accounts with estimated monthly/annual interest display
- Mobile sidebar auto-close on navigation
- Shared CSV parsing/export utility extracted to frontend/src/utils/csv.ts

DB migration needed for existing tenants:
  ALTER TABLE accounts ADD COLUMN IF NOT EXISTS interest_rate DECIMAL(6,4);

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/src/pages/units/UnitsPage.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useRef } from 'react';
 import {
   Title, Table, Group, Button, Stack, TextInput, Modal,
   Select, Badge, ActionIcon, Text, Loader, Center, Tooltip, Alert,
@@ -6,9 +6,10 @@ import {
 import { useForm } from '@mantine/form';
 import { useDisclosure } from '@mantine/hooks';
 import { notifications } from '@mantine/notifications';
-import { IconPlus, IconEdit, IconSearch, IconTrash, IconInfoCircle } from '@tabler/icons-react';
+import { IconPlus, IconEdit, IconSearch, IconTrash, IconInfoCircle, IconUpload, IconDownload } from '@tabler/icons-react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import api from '../../services/api';
+import { parseCSV, downloadBlob } from '../../utils/csv';
 
 interface Unit {
   id: string;
@@ -39,6 +40,7 @@ export function UnitsPage() {
   const [search, setSearch] = useState('');
   const [deleteConfirm, setDeleteConfirm] = useState<Unit | null>(null);
   const queryClient = useQueryClient();
+  const fileInputRef = useRef<HTMLInputElement>(null);
 
   const { data: units = [], isLoading } = useQuery<Unit[]>({
     queryKey: ['units'],
@@ -91,6 +93,20 @@ export function UnitsPage() {
     },
   });
 
+  const importMutation = useMutation({
+    mutationFn: async (rows: Record<string, string>[]) => {
+      const { data } = await api.post('/units/import', rows);
+      return data;
+    },
+    onSuccess: (data) => {
+      queryClient.invalidateQueries({ queryKey: ['units'] });
+      let msg = `Imported: ${data.created} created, ${data.updated} updated`;
+      if (data.errors?.length) msg += `. ${data.errors.length} error(s): ${data.errors.slice(0, 3).join('; ')}`;
+      notifications.show({ message: msg, color: data.errors?.length ? 'yellow' : 'green', autoClose: 10000 });
+    },
+    onError: (err: any) => { notifications.show({ message: err.response?.data?.message || 'Import failed', color: 'red' }); },
+  });
+
   const handleEdit = (u: Unit) => {
     setEditing(u);
     form.setValues({
@@ -105,13 +121,32 @@ export function UnitsPage() {
   const handleNew = () => {
     setEditing(null);
     form.reset();
-    // Pre-populate with default group
-    if (defaultGroup) {
-      form.setFieldValue('assessment_group_id', defaultGroup.id);
-    }
+    if (defaultGroup) form.setFieldValue('assessment_group_id', defaultGroup.id);
     open();
   };
 
+  const handleExport = async () => {
+    try {
+      const response = await api.get('/units/export', { responseType: 'blob' });
+      downloadBlob(response.data, 'units.csv');
+    } catch { notifications.show({ message: 'Export failed', color: 'red' }); }
+  };
+
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      const text = e.target?.result as string;
+      if (!text) { notifications.show({ message: 'Could not read file', color: 'red' }); return; }
+      const rows = parseCSV(text);
+      if (!rows.length) { notifications.show({ message: 'No data rows found', color: 'red' }); return; }
+      importMutation.mutate(rows);
+    };
+    reader.readAsText(file);
+    event.target.value = '';
+  };
+
   const filtered = units.filter((u) =>
     !search || u.unit_number.toLowerCase().includes(search.toLowerCase()) ||
     (u.owner_name || '').toLowerCase().includes(search.toLowerCase())
@@ -123,13 +158,23 @@ export function UnitsPage() {
     <Stack>
       <Group justify="space-between">
         <Title order={2}>Units / Homeowners</Title>
-        {hasGroups ? (
-          <Button leftSection={<IconPlus size={16} />} onClick={handleNew}>Add Unit</Button>
-        ) : (
-          <Tooltip label="Create an assessment group first">
-            <Button leftSection={<IconPlus size={16} />} disabled>Add Unit</Button>
-          </Tooltip>
-        )}
+        <Group>
+          <Button variant="light" leftSection={<IconDownload size={16} />} onClick={handleExport} disabled={units.length === 0}>
+            Export CSV
+          </Button>
+          <Button variant="light" leftSection={<IconUpload size={16} />} onClick={() => fileInputRef.current?.click()}
+            loading={importMutation.isPending}>
+            Import CSV
+          </Button>
+          <input type="file" ref={fileInputRef} accept=".csv,.txt" style={{ display: 'none' }} onChange={handleFileChange} />
+          {hasGroups ? (
+            <Button leftSection={<IconPlus size={16} />} onClick={handleNew}>Add Unit</Button>
+          ) : (
+            <Tooltip label="Create an assessment group first">
+              <Button leftSection={<IconPlus size={16} />} disabled>Add Unit</Button>
+            </Tooltip>
+          )}
+        </Group>
       </Group>
 
       {!hasGroups && (