When a canvasser taps "Create Lead from Zone" in the Storm Intel detail drawer,
router state carries the storm context into CreateLeadPage:
- CreateLeadPage reads stormSource from location.state; initialises the form with
city=Plano, state=TX, leadSource=Door Knock, urgency=high for significant/severe
storms, and a pre-filled notes field with zone name, hail size, and date
- Amber storm banner renders below the page header showing zone name, hail size,
and a note that urgency was auto-set; dismissible with X
- stormSource is saved on the lead object via the existing addLead spread
- LeadsListPage LeadCard shows an amber "Storm Zone" badge when lead.stormSource exists
- KanbanCard footer shows a compact amber "Storm" label for storm-sourced leads
Save action (CreateLeadPage):
- Validate required fields: first/last name, 10-digit phone, address, city, lead source
- On failure: Sonner error toast + auto-opens first incomplete section
- On success: Sonner success toast with name + address, redirects to /emp/fa/leads
- Desktop save bar with progress % indicator and validation error message
- Back button navigates to /emp/fa/leads instead of browser history
Leads List page (LeadsListPage.jsx):
- Route: /emp/fa/leads (FIELD_AGENT, ADMIN, OWNER)
- Lead cards: name, urgency + status badges, address, phone, lead source, time ago, creator
- Search bar: filters by name, address, city, source, status
- Empty state with CTA when no leads saved yet
- Animated card entrance with staggered spring transitions
mockStore:
- Add leads[] state and addLead() action — prepends new lead with id, createdAt, status: New
Navigation:
- Sidebar "New Lead" replaced with "Leads" (ClipboardList icon) for all roles
- New Lead button lives on the list page header
Author: Satyam Rastogi
Phase 5 — Insurance (purple #8B5CF6):
- Insurance Company custom select, Claim Number + Claim Status (2-col grid)
- Adjuster Name + Adjuster Phone (2-col grid, flex-wrapper with Phone icon + mask)
- Policy Number full-width input, all focus rings use purple accent
Phase 6 — Assignment (cyan #06B6D4):
- Role-aware rep selector: Field Agents see self-assign toggle, Admins/Owners
see scrollable list of all field agents with Unassigned option
- Priority pill selector (Low/Medium/High) with Framer Motion layoutId slide
- Follow-up Date: flex-wrapper with Calendar icon + color-scheme fix
- sectionCompletion wired for both sections
Fix: replace Framer Motion variant inheritance with explicit initial/animate on
each section motion.div — inherited variants from already-animated parent caused
Insurance and Assignment to render stuck at opacity:0 when added dynamically
Author: Satyam Rastogi
- LeadPropertySection: Street Address (with pin icon), City/State/ZIP row (flex layout, ZIP auto-strips non-digits to 5 chars, state defaults to TX), Property Type dropdown and Site Photos (Full Form only, animate in/out)
- Photo upload: dashed zone with Camera + Image icons, hover highlight in emerald, hidden file input with capture=environment (opens camera on mobile), multiple selection allowed
- Thumbnails: 4-col grid, spring scale-in animation, hover overlay with X to remove individual photos
- Focus ring accent changed to emerald to match section color identity (blue=contact, emerald=property)
- CreateLeadPage: propertyPhotos added to INITIAL_FORM, sectionCompletion.property live (address + city required), LeadPropertySection wired into renderSectionContent
- LeadContactSection: First/Last name grid, dynamic phone list, dynamic email list (Full Form only), all with spring height animations and LayoutGroup for coordinated layout shifts
- PhoneEntryRow: phone input with (555) 000-0000 mask, type selector (Mobile/Home/Work/Other), amber star primary toggle, red X remove — type+star hidden in Quick Capture mode
- EmailEntryRow: email input, type selector, star primary toggle, remove button
- Add Phone / Add Email buttons animate in when switching to Full Form; rows slide in/out with spring height collapse
- CreateLeadPage: sectionCompletion.contact now live (firstName + lastName + 10-digit phone), progress bar switched to section-completion-based percentage (completed sections / visible sections)
- UrgencyPillSelector: 3-pill selector (Standard/High/Emergency) with Framer Motion layoutId sliding background, spring physics, color transition on text
- LeadJobSection: full Job Details fields — Lead Source (always), Lead Type / Work Type / Trade Type (Full Form only, each row animates in/out with spring height collapse), Urgency pill (always), Notes textarea (Full Form only)
- Full Form fields use overflow-hidden + height:auto spring animation — no phantom gaps since spacing is managed via pt-4 inside each animated block
- CreateLeadPage: formData state tracking all sections (scaffold for Phase 3-6 fields), updateField handler, sectionCompletion map, GSAP progress bar now driven by real field completion percentage, Job Details section wired up with live data
- CreateLeadPage.jsx: full page shell with Quick Capture / Full Form toggle, Barlow Condensed header, breadcrumb nav, GSAP progress bar stub, mobile sticky save footer
- LeadSectionWrapper.jsx: collapsible section component with Framer Motion height animation, spring chevron rotation, completion dot, dual light/dark header design matching GlassPanel language
- 5 sections wired up: Contact (blue), Property (emerald), Job Details (amber), Insurance (violet), Assignment (cyan) — Quick Capture shows first 3, Full Form shows all 5
- Section indicator pills in header dim gracefully when hidden in Quick Capture mode
- LEAD_FORM_OPTIONS added to mockStore: lead types, sources, work types, trade types, urgency/priority levels, insurance companies, claim statuses, phone/email types, US states
- Route /emp/fa/leads/new added (FIELD_AGENT, ADMIN, OWNER)
- New Lead nav item added to sidebar for all 3 roles
Mayur Shinde