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/projects/ProjectsPage.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useRef } from 'react';
 import {
   Title, Table, Group, Button, Stack, Text, Modal, TextInput,
   NumberInput, Select, Textarea, Badge, ActionIcon, Loader, Center,
@@ -8,9 +8,10 @@ import { DateInput } from '@mantine/dates';
 import { useForm } from '@mantine/form';
 import { useDisclosure } from '@mantine/hooks';
 import { notifications } from '@mantine/notifications';
-import { IconPlus, IconEdit } from '@tabler/icons-react';
+import { IconPlus, IconEdit, 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';
 
 // ---------------------------------------------------------------------------
 // Types & constants
@@ -75,6 +76,7 @@ export function ProjectsPage() {
   const [opened, { open, close }] = useDisclosure(false);
   const [editing, setEditing] = useState<Project | null>(null);
   const queryClient = useQueryClient();
+  const fileInputRef = useRef<HTMLInputElement>(null);
 
   // ---- Data fetching ----
 
@@ -191,6 +193,42 @@ export function ProjectsPage() {
     },
   });
 
+  const importMutation = useMutation({
+    mutationFn: async (rows: Record<string, string>[]) => {
+      const { data } = await api.post('/projects/import', rows);
+      return data;
+    },
+    onSuccess: (data) => {
+      queryClient.invalidateQueries({ queryKey: ['projects'] });
+      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 handleExport = async () => {
+    try {
+      const response = await api.get('/projects/export', { responseType: 'blob' });
+      downloadBlob(response.data, 'projects.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 = '';
+  };
+
   // ---- Handlers ----
 
   const handleEdit = (p: Project) => {
@@ -279,9 +317,19 @@ export function ProjectsPage() {
       {/* Header */}
       <Group justify="space-between">
         <Title order={2}>Projects</Title>
-        <Button leftSection={<IconPlus size={16} />} onClick={handleNew}>
-          + Add Project
-        </Button>
+        <Group>
+          <Button variant="light" leftSection={<IconDownload size={16} />} onClick={handleExport} disabled={projects.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} />
+          <Button leftSection={<IconPlus size={16} />} onClick={handleNew}>
+            + Add Project
+          </Button>
+        </Group>
       </Group>
 
       {/* Summary Cards */}