feat(leads): Phase 5 & 6 — Insurance and Assignment sections
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
This commit is contained in:
Satyam
@@ -0,0 +1,235 @@
|
||||
import React from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { Calendar } from 'lucide-react';
|
||||
import { useMockStore } from '../../data/mockStore';
|
||||
import { useTheme } from '../../context/ThemeContext';
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Shared field primitives
|
||||
// ---------------------------------------------------------------------------
|
||||
function FieldLabel({ children }) {
|
||||
return (
|
||||
<label className="block text-[11px] uppercase tracking-widest font-bold text-zinc-400 dark:text-zinc-500 mb-1.5">
|
||||
{children}
|
||||
</label>
|
||||
);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Priority pill selector — Low / Medium / High
|
||||
// ---------------------------------------------------------------------------
|
||||
const PRIORITY_OPTIONS = [
|
||||
{ value: 'low', label: 'Low', darkColor: '#71717a', lightColor: '#71717a' },
|
||||
{ value: 'medium', label: 'Medium', darkColor: '#06B6D4', lightColor: '#0891b2' },
|
||||
{ value: 'high', label: 'High', darkColor: '#F59E0B', lightColor: '#d97706' },
|
||||
];
|
||||
|
||||
function PriorityPillSelector({ value, onChange }) {
|
||||
const { theme } = useTheme();
|
||||
const isDark = theme === 'dark';
|
||||
|
||||
return (
|
||||
<div className={`flex items-center p-1 rounded-xl ${isDark ? 'bg-zinc-900' : 'bg-zinc-100/80'}`}>
|
||||
{PRIORITY_OPTIONS.map(opt => {
|
||||
const isSelected = value === opt.value;
|
||||
return (
|
||||
<button
|
||||
key={opt.value}
|
||||
type="button"
|
||||
onClick={() => onChange(opt.value)}
|
||||
className="relative flex-1 flex items-center justify-center py-2.5 rounded-lg text-xs font-bold uppercase tracking-wider transition-colors duration-150"
|
||||
>
|
||||
{isSelected && (
|
||||
<motion.div
|
||||
layoutId="priority-pill-bg"
|
||||
className={`absolute inset-0.5 rounded-[7px] ${
|
||||
isDark
|
||||
? 'bg-zinc-700 shadow-lg ring-1 ring-white/10'
|
||||
: 'bg-white shadow-sm'
|
||||
}`}
|
||||
transition={{ type: 'spring', stiffness: 420, damping: 36 }}
|
||||
/>
|
||||
)}
|
||||
<span
|
||||
className="relative z-10 transition-colors duration-150"
|
||||
style={{
|
||||
color: isSelected
|
||||
? (isDark ? opt.darkColor : opt.lightColor)
|
||||
: isDark ? '#3f3f46' : '#a1a1aa',
|
||||
}}
|
||||
>
|
||||
{opt.label}
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Rep selector — role-aware
|
||||
// Agents: only their own name (self-assign toggle)
|
||||
// Admin/Owner: scrollable list of all field agents
|
||||
// ---------------------------------------------------------------------------
|
||||
function RepSelector({ value, onChange, currentUser, agents }) {
|
||||
const { theme } = useTheme();
|
||||
const isDark = theme === 'dark';
|
||||
const isAgent = currentUser?.role === 'FIELD_AGENT';
|
||||
|
||||
if (isAgent) {
|
||||
// Simplified self-assign for field agents
|
||||
const isSelf = value === currentUser.id;
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onChange(isSelf ? '' : currentUser.id)}
|
||||
className={`w-full flex items-center gap-3 px-4 py-3 rounded-xl border transition-all duration-150
|
||||
${isSelf
|
||||
? 'border-cyan-400 dark:border-cyan-500 ring-2 ring-cyan-100 dark:ring-cyan-500/20 bg-cyan-50 dark:bg-cyan-500/10'
|
||||
: 'border-zinc-200 dark:border-zinc-700 bg-white dark:bg-zinc-800/60'
|
||||
}`}
|
||||
>
|
||||
{/* Avatar circle */}
|
||||
<div
|
||||
className="w-8 h-8 rounded-full flex items-center justify-center text-xs font-black uppercase shrink-0 text-white"
|
||||
style={{ backgroundColor: '#06B6D4' }}
|
||||
>
|
||||
{currentUser.name.split(' ').map(n => n[0]).join('').slice(0, 2)}
|
||||
</div>
|
||||
<div className="flex-1 text-left">
|
||||
<p className={`text-sm font-semibold ${isSelf ? 'text-cyan-700 dark:text-cyan-300' : 'text-zinc-800 dark:text-white'}`}>
|
||||
{currentUser.name}
|
||||
</p>
|
||||
<p className="text-[11px] text-zinc-400 dark:text-zinc-500 uppercase tracking-wide">
|
||||
{currentUser.empId ?? 'Field Agent'}
|
||||
</p>
|
||||
</div>
|
||||
<div className={`w-4 h-4 rounded-full border-2 flex items-center justify-center shrink-0 transition-colors duration-150
|
||||
${isSelf ? 'border-cyan-500 bg-cyan-500' : 'border-zinc-300 dark:border-zinc-600'}`}
|
||||
>
|
||||
{isSelf && <div className="w-1.5 h-1.5 rounded-full bg-white" />}
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
// Admin / Owner — scrollable agent list
|
||||
return (
|
||||
<div className={`rounded-xl border overflow-hidden
|
||||
${isDark ? 'border-zinc-700 bg-zinc-800/60' : 'border-zinc-200 bg-white'}`}
|
||||
>
|
||||
<div className="max-h-48 overflow-y-auto divide-y divide-zinc-100 dark:divide-zinc-700/60">
|
||||
{/* Unassigned option */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onChange('')}
|
||||
className={`w-full flex items-center gap-3 px-4 py-2.5 text-left transition-colors duration-100
|
||||
${!value
|
||||
? 'bg-cyan-50 dark:bg-cyan-500/10'
|
||||
: 'hover:bg-zinc-50 dark:hover:bg-zinc-700/40'
|
||||
}`}
|
||||
>
|
||||
<div className="w-8 h-8 rounded-full flex items-center justify-center shrink-0
|
||||
bg-zinc-200 dark:bg-zinc-700 text-zinc-400 dark:text-zinc-500 text-xs font-bold">
|
||||
—
|
||||
</div>
|
||||
<span className={`text-sm font-medium ${!value ? 'text-cyan-700 dark:text-cyan-300' : 'text-zinc-500 dark:text-zinc-400'}`}>
|
||||
Unassigned
|
||||
</span>
|
||||
{!value && <div className="ml-auto w-1.5 h-1.5 rounded-full bg-cyan-500" />}
|
||||
</button>
|
||||
|
||||
{agents.map(agent => {
|
||||
const isSelected = value === agent.id;
|
||||
const initials = agent.name.split(' ').map(n => n[0]).join('').slice(0, 2);
|
||||
return (
|
||||
<button
|
||||
key={agent.id}
|
||||
type="button"
|
||||
onClick={() => onChange(agent.id)}
|
||||
className={`w-full flex items-center gap-3 px-4 py-2.5 text-left transition-colors duration-100
|
||||
${isSelected
|
||||
? 'bg-cyan-50 dark:bg-cyan-500/10'
|
||||
: 'hover:bg-zinc-50 dark:hover:bg-zinc-700/40'
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
className="w-8 h-8 rounded-full flex items-center justify-center text-xs font-black uppercase shrink-0 text-white"
|
||||
style={{ backgroundColor: '#06B6D4', opacity: isSelected ? 1 : 0.7 }}
|
||||
>
|
||||
{initials}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className={`text-sm font-semibold truncate
|
||||
${isSelected ? 'text-cyan-700 dark:text-cyan-300' : 'text-zinc-800 dark:text-white'}`}
|
||||
>
|
||||
{agent.name}
|
||||
</p>
|
||||
<p className="text-[11px] text-zinc-400 dark:text-zinc-500 uppercase tracking-wide">
|
||||
{agent.empId ?? 'Field Agent'}
|
||||
</p>
|
||||
</div>
|
||||
{isSelected && <div className="ml-auto w-1.5 h-1.5 rounded-full bg-cyan-500 shrink-0" />}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Assignment Section — Phase 6 (Full Form only)
|
||||
// ---------------------------------------------------------------------------
|
||||
export default function LeadAssignmentSection({ formData, updateField, currentUser }) {
|
||||
const { users } = useMockStore();
|
||||
const agents = users.filter(u => u.role === 'FIELD_AGENT');
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* Assign Rep */}
|
||||
<div>
|
||||
<FieldLabel>Assign Rep</FieldLabel>
|
||||
<RepSelector
|
||||
value={formData.assignedTo}
|
||||
onChange={v => updateField('assignedTo', v)}
|
||||
currentUser={currentUser}
|
||||
agents={agents}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Priority */}
|
||||
<div>
|
||||
<FieldLabel>Priority</FieldLabel>
|
||||
<PriorityPillSelector
|
||||
value={formData.priority}
|
||||
onChange={v => updateField('priority', v)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Follow-up Date */}
|
||||
<div>
|
||||
<FieldLabel>Follow-up Date</FieldLabel>
|
||||
<div className="flex items-center rounded-xl
|
||||
bg-white dark:bg-zinc-800/60
|
||||
border border-zinc-200 dark:border-zinc-700
|
||||
focus-within:border-cyan-400 dark:focus-within:border-cyan-500
|
||||
focus-within:ring-2 focus-within:ring-cyan-100 dark:focus-within:ring-cyan-500/20
|
||||
transition-all duration-150"
|
||||
>
|
||||
<Calendar size={14} className="ml-4 shrink-0 text-zinc-400 pointer-events-none" />
|
||||
<input
|
||||
type="date"
|
||||
value={formData.followUpDate}
|
||||
onChange={e => updateField('followUpDate', e.target.value)}
|
||||
className="flex-1 py-3 pl-3 pr-4 text-sm font-medium
|
||||
outline-none bg-transparent
|
||||
text-zinc-800 dark:text-white
|
||||
[color-scheme:light] dark:[color-scheme:dark]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,138 @@
|
||||
import React from 'react';
|
||||
import { Phone } from 'lucide-react';
|
||||
import { LEAD_FORM_OPTIONS } from '../../data/mockStore';
|
||||
import LeadCustomSelect from './LeadCustomSelect';
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Shared field primitives
|
||||
// ---------------------------------------------------------------------------
|
||||
function FieldLabel({ children }) {
|
||||
return (
|
||||
<label className="block text-[11px] uppercase tracking-widest font-bold text-zinc-400 dark:text-zinc-500 mb-1.5">
|
||||
{children}
|
||||
</label>
|
||||
);
|
||||
}
|
||||
|
||||
function LeadInput({ label, value, onChange, placeholder, type = 'text' }) {
|
||||
return (
|
||||
<div>
|
||||
<FieldLabel>{label}</FieldLabel>
|
||||
<input
|
||||
type={type}
|
||||
value={value}
|
||||
onChange={e => onChange(e.target.value)}
|
||||
placeholder={placeholder}
|
||||
className="w-full rounded-xl px-4 py-3 text-sm font-medium
|
||||
outline-none transition-all duration-150
|
||||
bg-white dark:bg-zinc-800/60
|
||||
border border-zinc-200 dark:border-zinc-700
|
||||
text-zinc-800 dark:text-white
|
||||
placeholder-zinc-400 dark:placeholder-zinc-500
|
||||
focus:border-purple-400 dark:focus:border-purple-500
|
||||
focus:ring-2 focus:ring-purple-100 dark:focus:ring-purple-500/20"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Phone input with (xxx) xxx-xxxx mask and purple focus ring
|
||||
function AdjusterPhoneInput({ label, value, onChange }) {
|
||||
const handleChange = (e) => {
|
||||
const digits = e.target.value.replace(/\D/g, '').slice(0, 10);
|
||||
let formatted = digits;
|
||||
if (digits.length >= 7) {
|
||||
formatted = `(${digits.slice(0, 3)}) ${digits.slice(3, 6)}-${digits.slice(6)}`;
|
||||
} else if (digits.length >= 4) {
|
||||
formatted = `(${digits.slice(0, 3)}) ${digits.slice(3)}`;
|
||||
} else if (digits.length >= 1) {
|
||||
formatted = `(${digits}`;
|
||||
}
|
||||
onChange(formatted);
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<FieldLabel>{label}</FieldLabel>
|
||||
<div className="flex items-center rounded-xl
|
||||
bg-white dark:bg-zinc-800/60
|
||||
border border-zinc-200 dark:border-zinc-700
|
||||
focus-within:border-purple-400 dark:focus-within:border-purple-500
|
||||
focus-within:ring-2 focus-within:ring-purple-100 dark:focus-within:ring-purple-500/20
|
||||
transition-all duration-150"
|
||||
>
|
||||
<Phone size={14} className="ml-4 shrink-0 text-zinc-400 pointer-events-none" />
|
||||
<input
|
||||
type="tel"
|
||||
value={value}
|
||||
onChange={handleChange}
|
||||
placeholder="(555) 000-0000"
|
||||
className="flex-1 py-3 pl-3 pr-4 text-sm font-medium
|
||||
outline-none bg-transparent
|
||||
text-zinc-800 dark:text-white
|
||||
placeholder-zinc-400 dark:placeholder-zinc-500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Insurance Section — Phase 5 (Full Form only)
|
||||
// ---------------------------------------------------------------------------
|
||||
export default function LeadInsuranceSection({ formData, updateField }) {
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* Row 1: Insurance Company (full width) */}
|
||||
<LeadCustomSelect
|
||||
label="Insurance Company"
|
||||
value={formData.insuranceCompany}
|
||||
onChange={v => updateField('insuranceCompany', v)}
|
||||
options={LEAD_FORM_OPTIONS.insuranceCompanies}
|
||||
placeholder="Select carrier…"
|
||||
accent="purple"
|
||||
/>
|
||||
|
||||
{/* Row 2: Claim Number + Claim Status */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<LeadInput
|
||||
label="Claim Number"
|
||||
value={formData.claimNumber}
|
||||
onChange={v => updateField('claimNumber', v)}
|
||||
placeholder="e.g. CLM-2026-00482"
|
||||
/>
|
||||
<LeadCustomSelect
|
||||
label="Claim Status"
|
||||
value={formData.claimStatus}
|
||||
onChange={v => updateField('claimStatus', v)}
|
||||
options={LEAD_FORM_OPTIONS.claimStatuses}
|
||||
placeholder="Select status…"
|
||||
accent="purple"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Row 3: Adjuster Name + Adjuster Phone */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<LeadInput
|
||||
label="Adjuster Name"
|
||||
value={formData.adjusterName}
|
||||
onChange={v => updateField('adjusterName', v)}
|
||||
placeholder="Full name"
|
||||
/>
|
||||
<AdjusterPhoneInput
|
||||
label="Adjuster Phone"
|
||||
value={formData.adjusterPhone}
|
||||
onChange={v => updateField('adjusterPhone', v)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Row 4: Policy Number (full width) */}
|
||||
<LeadInput
|
||||
label="Policy Number"
|
||||
value={formData.policyNumber}
|
||||
onChange={v => updateField('policyNumber', v)}
|
||||
placeholder="e.g. POL-7734892-A"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -11,6 +11,8 @@ import LeadSectionWrapper from '../components/leads/LeadSectionWrapper';
|
||||
import LeadJobSection from '../components/leads/LeadJobSection';
|
||||
import LeadContactSection from '../components/leads/LeadContactSection';
|
||||
import LeadPropertySection from '../components/leads/LeadPropertySection';
|
||||
import LeadInsuranceSection from '../components/leads/LeadInsuranceSection';
|
||||
import LeadAssignmentSection from '../components/leads/LeadAssignmentSection';
|
||||
import gsap from 'gsap';
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
@@ -59,23 +61,6 @@ const SECTIONS = [
|
||||
},
|
||||
];
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Animation variants
|
||||
// ---------------------------------------------------------------------------
|
||||
const containerVariants = {
|
||||
hidden: {},
|
||||
visible: { transition: { staggerChildren: 0.07 } },
|
||||
};
|
||||
|
||||
const sectionVariants = {
|
||||
hidden: { opacity: 0, y: 22 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: { type: 'spring', stiffness: 280, damping: 28 },
|
||||
},
|
||||
};
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Initial form state
|
||||
// ---------------------------------------------------------------------------
|
||||
@@ -144,8 +129,8 @@ export default function CreateLeadPage() {
|
||||
job: isQuickCapture
|
||||
? !!formData.leadSource
|
||||
: !!(formData.leadSource && formData.leadType && formData.workType),
|
||||
insurance: false, // Phase 5
|
||||
assignment: false, // Phase 6
|
||||
insurance: !!(formData.insuranceCompany && formData.claimStatus),
|
||||
assignment: !!(formData.assignedTo && formData.followUpDate),
|
||||
};
|
||||
|
||||
// Progress = % of visible sections that are complete
|
||||
@@ -213,20 +198,24 @@ export default function CreateLeadPage() {
|
||||
/>
|
||||
);
|
||||
}
|
||||
// Placeholder for sections not yet built
|
||||
return (
|
||||
<div className={`rounded-xl border-2 border-dashed px-6 py-8 flex flex-col items-center justify-center gap-2 text-center
|
||||
${isDark ? 'border-zinc-700' : 'border-zinc-200'}
|
||||
`}>
|
||||
<section.icon
|
||||
size={28}
|
||||
style={{ color: section.accentColor, opacity: 0.35 }}
|
||||
if (section.id === 'insurance') {
|
||||
return (
|
||||
<LeadInsuranceSection
|
||||
formData={formData}
|
||||
updateField={updateField}
|
||||
/>
|
||||
<p className="text-xs font-semibold uppercase tracking-widest text-zinc-400">
|
||||
{section.description}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
);
|
||||
}
|
||||
if (section.id === 'assignment') {
|
||||
return (
|
||||
<LeadAssignmentSection
|
||||
formData={formData}
|
||||
updateField={updateField}
|
||||
currentUser={user}
|
||||
/>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -325,17 +314,14 @@ export default function CreateLeadPage() {
|
||||
</div>
|
||||
|
||||
{/* --- Sections --- */}
|
||||
<motion.div
|
||||
variants={containerVariants}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
className="space-y-3"
|
||||
>
|
||||
<div className="space-y-3">
|
||||
<AnimatePresence mode="popLayout">
|
||||
{visibleSections.map(section => (
|
||||
<motion.div
|
||||
key={section.id}
|
||||
variants={sectionVariants}
|
||||
initial={{ opacity: 0, y: 22 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ type: 'spring', stiffness: 280, damping: 28 }}
|
||||
layout
|
||||
exit={{
|
||||
opacity: 0,
|
||||
@@ -357,7 +343,7 @@ export default function CreateLeadPage() {
|
||||
</motion.div>
|
||||
))}
|
||||
</AnimatePresence>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ----------------------------------------------------------------
|
||||
|
||||
Reference in New Issue
Block a user