docs: update README for Lead Creation all 8 phases complete

Author: Satyam Rastogi
This commit is contained in:
Satyam
2026-03-14 23:59:06 +05:30
parent 7a73c7bc38
commit 546c202b9f
+11 -4
View File
@@ -35,12 +35,16 @@
- Financial Summary sidebar with adjustable margin slider - Financial Summary sidebar with adjustable margin slider
- Full light/dark theme support - Full light/dark theme support
### Lead Creation Page _(Phases 14 complete, Phases 58 remaining)_ ### Lead Creation Page _(All 8 phases complete)_
- Quick Capture (essential fields only) for agents at the door; Full Form for the office - Quick Capture (essential fields only) for agents at the door; Full Form for the office
- 5 color-coded accordion sections: Contact (blue), Property (emerald), Job Details (amber), Insurance (purple), Assignment (cyan) - 5 color-coded accordion sections: Contact (blue), Property (emerald), Job Details (amber), Insurance (purple), Assignment (cyan)
- **Custom portaled dropdowns** (`LeadCustomSelect`) — dark zinc-900 panel, fully scrollable, escapes all `overflow:hidden` containers via `ReactDOM.createPortal`; scroll detection uses `e.composedPath()` for reliability across browsers and touch - **Custom portaled dropdowns** (`LeadCustomSelect`) — dark zinc-900 panel, fully scrollable, escapes all `overflow:hidden` containers via `ReactDOM.createPortal`; scroll detection uses `e.composedPath()` for reliability across browsers and touch
- **Fuzzy-search state combobox** (`LeadCombobox`) — type "tex" to find Texas, searches both abbreviation and full state name simultaneously - **Fuzzy-search state combobox** (`LeadCombobox`) — type "tex" to find Texas, searches both abbreviation and full state name simultaneously
- **Flex-wrapper icon pattern** for Phone/MapPin icons — eliminates z-index conflicts, icons are true flex siblings of the input - **Flex-wrapper icon pattern** for Phone/MapPin icons — eliminates z-index conflicts, icons are true flex siblings of the input
- **Insurance section** — carrier, claim number, claim status, adjuster name/phone, policy number (purple accent)
- **Assignment section** — role-aware rep selector (agents: self-assign toggle; admins/owners: full scrollable agent list), priority pill (Low/Medium/High), follow-up date picker (cyan accent)
- **Save action** — validates required fields, Sonner toast on success/failure, redirects to Leads list
- **Leads list page** (`/emp/fa/leads`) — card list with urgency/status badges, search bar, animated empty state
- Animated progress bar (GSAP), section completion checkmarks, spring height animations (Framer Motion) - Animated progress bar (GSAP), section completion checkmarks, spring height animations (Framer Motion)
- Mobile-first: sticky Save footer, responsive City/State/ZIP grid layout, ample bottom padding for footer clearance - Mobile-first: sticky Save footer, responsive City/State/ZIP grid layout, ample bottom padding for footer clearance
@@ -125,7 +129,8 @@ All select fields in the Lead Creation form use custom components rather than na
``` ```
src/ src/
├── pages/ ├── pages/
│ ├── CreateLeadPage.jsx # Lead creation orchestrator (form state, sections, progress) │ ├── CreateLeadPage.jsx # Lead creation orchestrator (form state, sections, progress, save)
│ ├── LeadsListPage.jsx # Leads list with search, cards, empty state
│ └── ... # Other role pages │ └── ... # Other role pages
├── components/ ├── components/
│ ├── leads/ │ ├── leads/
@@ -133,6 +138,8 @@ src/
│ │ ├── LeadContactSection.jsx # Name, dynamic phone rows, dynamic email rows │ │ ├── LeadContactSection.jsx # Name, dynamic phone rows, dynamic email rows
│ │ ├── LeadPropertySection.jsx # Address, city/state/zip, property type, site photos │ │ ├── LeadPropertySection.jsx # Address, city/state/zip, property type, site photos
│ │ ├── LeadJobSection.jsx # Lead source, type, work/trade type, urgency, notes │ │ ├── LeadJobSection.jsx # Lead source, type, work/trade type, urgency, notes
│ │ ├── LeadInsuranceSection.jsx # Carrier, claim #/status, adjuster name/phone, policy #
│ │ ├── LeadAssignmentSection.jsx # Role-aware rep selector, priority pill, follow-up date
│ │ ├── LeadCustomSelect.jsx # Portaled custom dropdown (accent + compact modes) │ │ ├── LeadCustomSelect.jsx # Portaled custom dropdown (accent + compact modes)
│ │ ├── LeadCombobox.jsx # Fuzzy-search combobox for state field │ │ ├── LeadCombobox.jsx # Fuzzy-search combobox for state field
│ │ ├── UrgencyPillSelector.jsx # Sliding pill with Framer Motion layoutId │ │ ├── UrgencyPillSelector.jsx # Sliding pill with Framer Motion layoutId
@@ -144,10 +151,10 @@ src/
│ └── ... # Layout, AnimatedCounter, shared components │ └── ... # Layout, AnimatedCounter, shared components
├── context/ # AuthContext, ThemeContext, GamificationContext ├── context/ # AuthContext, ThemeContext, GamificationContext
├── data/ ├── data/
│ └── mockStore.jsx # Central data layer + LEAD_FORM_OPTIONS │ └── mockStore.jsx # Central data layer + LEAD_FORM_OPTIONS + leads[] + addLead()
└── hooks/ # useGamification, custom hooks └── hooks/ # useGamification, custom hooks
``` ```
--- ---
**Maintained by Satyam Rastogi | Branch: revamp | Last updated: March 13, 2026** **Maintained by Satyam Rastogi | Branch: revamp | Last updated: March 14, 2026**