Add "Add a contact" form to Leads and Deals detail panels

Mirrors the Companies page's existing "Add a contact" box via a new shared
AddContactForm component, using the generic POST /api/contacts route (rather
than the Companies-specific one) so it works even before a Lead/Deal's
company has synced into a Company row. Refreshes the associated-contacts
list automatically after a save.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

frontend/src/components/workspace/AddContactForm.jsx

@@ -0,0 +1,118 @@
+import React, { useState } from 'react';
+import { Loader2 } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { apiFetch } from '@/lib/api';
+
+const EMPTY_DRAFT = { first_name: '', last_name: '', email: '', title: '', phone: '' };
+
+/**
+ * "Add a contact" mini-form for the associated-contacts section of a company-scoped detail
+ * panel (Companies / Leads / Deals). Creates the contact via the generic POST /api/contacts
+ * route with `company` locked to `companyName` — unlike the Companies page's own
+ * /api/companies/{id}/contacts route, this doesn't require an existing Company row, so it
+ * works even when the lead/deal's company hasn't synced into one yet.
+ */
+export default function AddContactForm({ companyName, onAdded, className }) {
+    const [draft, setDraft] = useState(EMPTY_DRAFT);
+    const [saving, setSaving] = useState(false);
+    const [error, setError] = useState('');
+
+    const setField = (key, value) => setDraft((d) => ({ ...d, [key]: value }));
+
+    const save = async () => {
+        const email = draft.email.trim();
+        if (!email) {
+            setError('Email is required');
+            return;
+        }
+        if (!email.includes('@')) {
+            setError('Enter a valid email address');
+            return;
+        }
+        setSaving(true);
+        setError('');
+        try {
+            const res = await apiFetch('/api/contacts', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    first_name: draft.first_name.trim(),
+                    last_name: draft.last_name.trim(),
+                    email,
+                    title: draft.title.trim(),
+                    phone: draft.phone.trim(),
+                    company: companyName,
+                }),
+            });
+            const data = await res.json().catch(() => ({}));
+            if (!res.ok) {
+                setError(typeof data.detail === 'string' ? data.detail : 'Could not save contact');
+                return;
+            }
+            setDraft(EMPTY_DRAFT);
+            onAdded && onAdded(data);
+        } catch (e) {
+            console.error(e);
+            setError('Network error');
+        } finally {
+            setSaving(false);
+        }
+    };
+
+    return (
+        <div className={className || 'rounded-xl border border-slate-200 bg-slate-50/50 p-4'}>
+            <h5 className="mb-3 text-sm font-semibold text-slate-700">Add a contact</h5>
+            <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
+                <Input
+                    className="bg-white text-sm"
+                    placeholder="First name"
+                    value={draft.first_name}
+                    onChange={(e) => setField('first_name', e.target.value)}
+                    disabled={saving}
+                />
+                <Input
+                    className="bg-white text-sm"
+                    placeholder="Last name"
+                    value={draft.last_name}
+                    onChange={(e) => setField('last_name', e.target.value)}
+                    disabled={saving}
+                />
+                <Input
+                    className="bg-white text-sm sm:col-span-2"
+                    type="email"
+                    placeholder="Email"
+                    value={draft.email}
+                    onChange={(e) => setField('email', e.target.value)}
+                    disabled={saving}
+                />
+                <Input
+                    className="bg-white text-sm"
+                    placeholder="Title"
+                    value={draft.title}
+                    onChange={(e) => setField('title', e.target.value)}
+                    disabled={saving}
+                />
+                <Input
+                    className="bg-white text-sm"
+                    type="tel"
+                    placeholder="Contact number"
+                    value={draft.phone}
+                    onChange={(e) => setField('phone', e.target.value)}
+                    disabled={saving}
+                />
+            </div>
+            {error ? <p className="mt-2 text-xs text-red-600">{error}</p> : null}
+            <Button type="button" className="mt-3 w-full" onClick={save} disabled={saving}>
+                {saving ? (
+                    <>
+                        <Loader2 className="mr-2 h-4 w-4 animate-spin" aria-hidden />
+                        Saving…
+                    </>
+                ) : (
+                    'Add contact'
+                )}
+            </Button>
+        </div>
+    );
+}

frontend/src/pages/Deals.jsx

@@ -11,6 +11,7 @@ import SlideOverPanel from '@/components/workspace/SlideOverPanel';
 import WonBillingModal from '@/components/workspace/WonBillingModal';
 import CompanyDetailsEditor from '@/components/workspace/CompanyDetailsEditor';
 import AssociatedContactsList from '@/components/workspace/AssociatedContactsList';
+import AddContactForm from '@/components/workspace/AddContactForm';
 import ActivityTimeline from '@/components/workspace/ActivityTimeline';
 import ContactIdentityEditor from '@/components/workspace/ContactIdentityEditor';
 import { DealContactSearch, DealCompanySearch } from '@/components/workspace/DealLinkSearch';
@@ -1311,27 +1312,32 @@ export default function Deals() {
         setAssociatedContacts([]);
     };
 
-    useEffect(() => {
-        const name = (dealDetail?.account_name || '').trim();
+    const refreshAssociatedContacts = useCallback(async (companyName) => {
+        const name = (companyName || '').trim();
         if (!name) {
             setAssociatedContacts([]);
             return;
         }
+        try {
+            const res = await apiFetch(`/api/contacts/by-company?company=${encodeURIComponent(name)}`);
+            if (!res.ok) return;
+            const data = await res.json();
+            setAssociatedContacts(data.contacts || []);
+        } catch (e) {
+            console.error(e);
+        }
+    }, []);
+
+    useEffect(() => {
         let cancelled = false;
         (async () => {
-            try {
-                const res = await apiFetch(`/api/contacts/by-company?company=${encodeURIComponent(name)}`);
-                if (!res.ok) return;
-                const data = await res.json();
-                if (!cancelled) setAssociatedContacts(data.contacts || []);
-            } catch (e) {
-                console.error(e);
-            }
+            if (cancelled) return;
+            await refreshAssociatedContacts(dealDetail?.account_name);
         })();
         return () => {
             cancelled = true;
         };
-    }, [dealDetail?.account_name]);
+    }, [dealDetail?.account_name, refreshAssociatedContacts]);
 
     const bulkDeleteDeals = async () => {
         if (selectedDealIds.length === 0) return;
@@ -2168,6 +2174,11 @@ export default function Deals() {
                                     contacts={associatedContacts}
                                     onContactClick={(c) => navigate(`/contacts?contact=${c.id}`)}
                                     onActivityLogged={() => setActivityRefreshKey((k) => k + 1)}
+                                    className="mb-4"
+                                />
+                                <AddContactForm
+                                    companyName={dealDetail.account_name}
+                                    onAdded={() => refreshAssociatedContacts(dealDetail.account_name)}
                                 />
                             </section>
                         ) : null}

frontend/src/pages/Leads.jsx

@@ -20,6 +20,7 @@ import SlideOverPanel from '@/components/workspace/SlideOverPanel';
 import CompanyDetailsEditor from '@/components/workspace/CompanyDetailsEditor';
 import ContactIdentityEditor from '@/components/workspace/ContactIdentityEditor';
 import AssociatedContactsList from '@/components/workspace/AssociatedContactsList';
+import AddContactForm from '@/components/workspace/AddContactForm';
 import ActivityTimeline from '@/components/workspace/ActivityTimeline';
 import { EditableCell } from '@/components/workspace/EditableCell';
 import { cn } from '@/lib/utils';
@@ -259,27 +260,32 @@ export default function Leads() {
         setAssociatedContacts([]);
     };
 
-    useEffect(() => {
-        const name = (selected?.company_name || '').trim();
+    const refreshAssociatedContacts = useCallback(async (companyName) => {
+        const name = (companyName || '').trim();
         if (!name) {
             setAssociatedContacts([]);
             return;
         }
+        try {
+            const res = await apiFetch(`/api/contacts/by-company?company=${encodeURIComponent(name)}`);
+            if (!res.ok) return;
+            const data = await res.json();
+            setAssociatedContacts(data.contacts || []);
+        } catch (e) {
+            console.error(e);
+        }
+    }, []);
+
+    useEffect(() => {
         let cancelled = false;
         (async () => {
-            try {
-                const res = await apiFetch(`/api/contacts/by-company?company=${encodeURIComponent(name)}`);
-                if (!res.ok) return;
-                const data = await res.json();
-                if (!cancelled) setAssociatedContacts(data.contacts || []);
-            } catch (e) {
-                console.error(e);
-            }
+            if (cancelled) return;
+            await refreshAssociatedContacts(selected?.company_name);
         })();
         return () => {
             cancelled = true;
         };
-    }, [selected?.company_name]);
+    }, [selected?.company_name, refreshAssociatedContacts]);
 
     const toggleRow = (id) => {
         setRowSelection((prev) => ({ ...prev, [id]: !prev[id] }));
@@ -1035,6 +1041,11 @@ export default function Leads() {
                                     contacts={associatedContacts}
                                     onContactClick={(c) => navigate(`/contacts?contact=${c.id}`)}
                                     onActivityLogged={() => setActivityRefreshKey((k) => k + 1)}
+                                    className="mb-4"
+                                />
+                                <AddContactForm
+                                    companyName={selected.company_name}
+                                    onAdded={() => refreshAssociatedContacts(selected.company_name)}
                                 />
                             </div>
                         ) : null}