Goutam/LynkedUpPro_CRM
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

responsive new lead forms

Browse Source
This commit is contained in:
Satyam Rastogi
2026-05-15 14:30:37 +05:30
parent 949d96a7c7
commit d2be9b1abf
2 changed files with 24 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/CreateLeadPage.jsx
+23 -12
View File
@@ -170,7 +170,15 @@ export default function CreateLeadPage() {
};
const toggleSection = (id) => {
setOpenSections(prev => ({ ...prev, [id]: !prev[id] }));
setOpenSections(prev => {
const isOpening = !prev[id];
const next = Object.keys(prev).reduce((acc, key) => {
acc[key] = false;
return acc;
}, {});
next[id] = isOpening;
return next;
});
};
const handleSave = () => {
@@ -187,13 +195,16 @@ export default function CreateLeadPage() {
if (missingFields.length > 0) {
setValidationError(`Required: ${missingFields.join(', ')}`);
// Open the first incomplete section
// Open the first incomplete section (close others for accordion behavior)
const openOnly = (id) => setOpenSections(prev =>
Object.keys(prev).reduce((acc, key) => ({ ...acc, [key]: key === id }), {})
);
if (!formData.firstName || !formData.lastName || !formData.phones.some(p => p.number.replace(/\D/g, '').length >= 10)) {
setOpenSections(prev => ({ ...prev, contact: true }));
openOnly('contact');
} else if (!formData.address || !formData.city) {
setOpenSections(prev => ({ ...prev, property: true }));
openOnly('property');
} else {
setOpenSections(prev => ({ ...prev, job: true }));
openOnly('job');
}
toast.error(`Missing required fields: ${missingFields.join(', ')}`);
return;
@@ -288,7 +299,7 @@ export default function CreateLeadPage() {
{/* ----------------------------------------------------------------
Page content
---------------------------------------------------------------- */}
<div className="max-w-3xl mx-auto px-4 sm:px-6 py-6 lg:py-10 pb-44 md:pb-10">
<div className="max-w-3xl mx-auto px-4 sm:px-6 py-6 lg:py-10 pb-44 md:pb-40">
{/* --- Page Header --- */}
<div className="mb-7">
@@ -301,13 +312,13 @@ export default function CreateLeadPage() {
Leads
</button>
<div className="flex items-start justify-between gap-4">
<div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3 sm:gap-4">
{/* Title */}
<div>
<h1 className="font-['Barlow_Condensed'] font-black uppercase tracking-widest text-4xl leading-none text-zinc-900 dark:text-white">
<div className="min-w-0">
<h1 className="font-['Barlow_Condensed'] font-black uppercase tracking-widest text-3xl sm:text-4xl leading-none text-zinc-900 dark:text-white">
New Lead
</h1>
<p className="text-sm text-zinc-500 dark:text-zinc-400 mt-1.5">
<p className="text-xs sm:text-sm text-zinc-500 dark:text-zinc-400 mt-1.5">
{isQuickCapture
? 'Essential fields only — fastest capture at the door.'
: 'Full lead profile with insurance and assignment details.'}
@@ -315,7 +326,7 @@ export default function CreateLeadPage() {
</div>
{/* Quick / Full Form toggle */}
<div className={`flex items-center p-1 rounded-xl gap-0.5 shrink-0
<div className={`self-start sm:self-auto flex items-center p-1 rounded-xl gap-0.5 shrink-0
${isDark ? 'bg-zinc-800' : 'bg-zinc-200/80'}
`}>
<button
@@ -368,7 +379,7 @@ export default function CreateLeadPage() {
</div>
{/* --- Sections --- */}
<div className="space-y-3">
<div className="space-y-3 mb-8">
<AnimatePresence mode="popLayout">
{visibleSections.map(section => (
<motion.div