door knock and referral attribution

src/pages/CreateLeadPage.jsx

@@ -69,6 +69,9 @@ const SECTIONS = [
 const INITIAL_FORM = {
     // Job Details
     leadSource: '',
+    canvasserId: '',
+    canvasserName: '',
+    referralNote: '',
     leadType: '',
     workType: '',
     tradeType: '',
@@ -156,7 +159,14 @@ export default function CreateLeadPage() {
     }, [progress]);
 
     const updateField = (field, value) => {
-        setFormData(prev => ({ ...prev, [field]: value }));
+        setFormData(prev => {
+            const next = { ...prev, [field]: value };
+            if (field === 'leadSource') {
+                if (value !== 'Door Knock') { next.canvasserId = ''; next.canvasserName = ''; }
+                if (value !== 'Referral') { next.referralNote = ''; }
+            }
+            return next;
+        });
     };
 
     const toggleSection = (id) => {
@@ -173,6 +183,7 @@ export default function CreateLeadPage() {
         if (!formData.address) missingFields.push('Street Address');
         if (!formData.city) missingFields.push('City');
         if (!formData.leadSource) missingFields.push('Lead Source');
+        if (formData.leadSource === 'Door Knock' && !formData.canvasserId) missingFields.push('Canvasser');
 
         if (missingFields.length > 0) {
             setValidationError(`Required: ${missingFields.join(', ')}`);

src/pages/LeadsListPage.jsx

@@ -8,6 +8,7 @@ import PermissionGate from '../components/PermissionGate';
 import {
     Plus, Search, MapPin, Phone, Zap, FileText,
     Clock, User, ChevronRight, Filter, Lock,
+    DoorOpen, MessageSquare,
 } from 'lucide-react';
 
 // ---------------------------------------------------------------------------
@@ -117,6 +118,18 @@ function LeadCard({ lead, index }) {
                             {lead.leadSource}
                         </span>
                     )}
+                    {lead.canvasserName && (
+                        <span className="flex items-center gap-1 text-xs text-emerald-600 dark:text-emerald-400">
+                            <DoorOpen size={10} className="shrink-0" />
+                            {lead.canvasserName}
+                        </span>
+                    )}
+                    {lead.referralNote && (
+                        <span className="flex items-center gap-1 text-xs text-purple-600 dark:text-purple-400 max-w-[200px] truncate">
+                            <MessageSquare size={10} className="shrink-0" />
+                            {lead.referralNote}
+                        </span>
+                    )}
                 </div>
             </div>