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/vendors/VendorsPage.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useRef } from 'react';
 import {
   Title, Table, Group, Button, Stack, TextInput, Modal,
   Switch, Badge, ActionIcon, Text, Loader, Center,
@@ -6,9 +6,10 @@ import {
 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, 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 Vendor {
   id: string; name: string; contact_name: string; email: string; phone: string;
@@ -21,6 +22,7 @@ export function VendorsPage() {
   const [editing, setEditing] = useState<Vendor | null>(null);
   const [search, setSearch] = useState('');
   const queryClient = useQueryClient();
+  const fileInputRef = useRef<HTMLInputElement>(null);
 
   const { data: vendors = [], isLoading } = useQuery<Vendor[]>({
     queryKey: ['vendors'],
@@ -46,6 +48,42 @@ export function VendorsPage() {
     onError: (err: any) => { notifications.show({ message: err.response?.data?.message || 'Error', color: 'red' }); },
   });
 
+  const importMutation = useMutation({
+    mutationFn: async (rows: Record<string, string>[]) => {
+      const { data } = await api.post('/vendors/import', rows);
+      return data;
+    },
+    onSuccess: (data) => {
+      queryClient.invalidateQueries({ queryKey: ['vendors'] });
+      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('/vendors/export', { responseType: 'blob' });
+      downloadBlob(response.data, 'vendors.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 handleEdit = (v: Vendor) => {
     setEditing(v);
     form.setValues({
@@ -65,7 +103,17 @@ export function VendorsPage() {
     <Stack>
       <Group justify="space-between">
         <Title order={2}>Vendors</Title>
-        <Button leftSection={<IconPlus size={16} />} onClick={() => { setEditing(null); form.reset(); open(); }}>Add Vendor</Button>
+        <Group>
+          <Button variant="light" leftSection={<IconDownload size={16} />} onClick={handleExport} disabled={vendors.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={() => { setEditing(null); form.reset(); open(); }}>Add Vendor</Button>
+        </Group>
       </Group>
       <TextInput placeholder="Search vendors..." leftSection={<IconSearch size={16} />}
         value={search} onChange={(e) => setSearch(e.currentTarget.value)} />