Re-Quest/frontend
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: Update form section card styling and enhance state licensing input with a removal option.

Browse Source
This commit is contained in:
pradeepkumar
2026-01-18 23:08:44 +05:30
parent b0411a53de
commit 7d5de4aa93
2 changed files with 71 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/(agent)/agent/edit/components/FormInput.tsx
View File

@@ -21,7 +21,7 @@ export function FormInput({ label, value, onChange, placeholder, type = 'text',
onChange={(e) => onChange(e.target.value)} onChange={(e) => onChange(e.target.value)}
placeholder={placeholder} placeholder={placeholder}
disabled={disabled} disabled={disabled}
className="w-full px-4 py-3 border border-[#00293D]/20 rounded-[10px] text-[14px] font-serif text-[#00293D] placeholder:text-[#00293D]/40 focus:outline-none focus:border-[#E58625] disabled:bg-gray-50 disabled:text-[#00293D]/50" className="w-full h-[40px] px-4 border border-[#00293D]/20 rounded-[15px] text-[14px] font-serif text-[#00293D] placeholder:text-[#00293D]/40 focus:outline-none focus:border-[#E58625] disabled:bg-gray-50 disabled:text-[#00293D]/50"
/> />
</div> </div>
); );

113
src/app/(agent)/agent/edit/page.tsx
View File

@@ -109,6 +109,7 @@ export default function EditProfilePage() {
const router = useRouter(); const router = useRouter();
const [formData, setFormData] = useState(initialFormData); const [formData, setFormData] = useState(initialFormData);
const scrollContainerRef = useRef<HTMLDivElement>(null); const scrollContainerRef = useRef<HTMLDivElement>(null);
const [stateInput, setStateInput] = useState('');
const handleCancel = () => { const handleCancel = () => {
router.push('/agent/dashboard'); router.push('/agent/dashboard');
@@ -124,6 +125,21 @@ export default function EditProfilePage() {
setFormData((prev) => ({ ...prev, [field]: value })); setFormData((prev) => ({ ...prev, [field]: value }));
}; };
const handleAddLicensedArea = (value: string) => {
const trimmedValue = value.trim();
if (trimmedValue && !formData.licensedAreas.includes(trimmedValue)) {
updateField('licensedAreas', [...formData.licensedAreas, trimmedValue]);
}
setStateInput('');
};
const handleStateInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
if (e.key === 'Enter' || e.key === ',') {
e.preventDefault();
handleAddLicensedArea(stateInput);
}
};
return ( return (
<div className="flex gap-6 h-[calc(100vh-180px)]"> <div className="flex gap-6 h-[calc(100vh-180px)]">
{/* Left Sidebar - Quick Links */} {/* Left Sidebar - Quick Links */}
@@ -134,7 +150,7 @@ export default function EditProfilePage() {
{/* Main Content - Scrollable */} {/* Main Content - Scrollable */}
<div ref={scrollContainerRef} className="flex-1 space-y-6 overflow-y-auto pr-2 scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-transparent"> <div ref={scrollContainerRef} className="flex-1 space-y-6 overflow-y-auto pr-2 scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-transparent">
{/* Basic Information */} {/* Basic Information */}
<div className="bg-white rounded-[20px] p-6"> <div className="bg-white rounded-[15px] border border-[#00293D]/20 shadow-[0px_10px_20px_#D9D9D9] p-6">
<FormSection id="basic-info" icon="/assets/icons/basic-information-icon.svg" title="Basic Information"> <FormSection id="basic-info" icon="/assets/icons/basic-information-icon.svg" title="Basic Information">
<div className="flex flex-col md:flex-row gap-4"> <div className="flex flex-col md:flex-row gap-4">
<FormInput <FormInput
@@ -154,7 +170,7 @@ export default function EditProfilePage() {
</div> </div>
{/* Contact Information */} {/* Contact Information */}
<div className="bg-white rounded-[20px] p-6"> <div className="bg-white rounded-[15px] border border-[#00293D]/20 shadow-[0px_10px_20px_#D9D9D9] p-6">
<FormSection id="contact-info" icon="/assets/icons/contact-icon.svg" title="Contact Information"> <FormSection id="contact-info" icon="/assets/icons/contact-icon.svg" title="Contact Information">
<div className="flex flex-col md:flex-row gap-4"> <div className="flex flex-col md:flex-row gap-4">
<FormInput <FormInput
@@ -176,7 +192,7 @@ export default function EditProfilePage() {
</div> </div>
{/* Professional Types */} {/* Professional Types */}
<div className="bg-white rounded-[20px] p-6"> <div className="bg-white rounded-[15px] border border-[#00293D]/20 shadow-[0px_10px_20px_#D9D9D9] p-6">
<FormSection id="professional-types" icon="/assets/icons/professional-icon.svg" title="Professional Types"> <FormSection id="professional-types" icon="/assets/icons/professional-icon.svg" title="Professional Types">
<div className="flex flex-wrap gap-6"> <div className="flex flex-wrap gap-6">
<FormCheckbox <FormCheckbox
@@ -205,7 +221,7 @@ export default function EditProfilePage() {
</div> </div>
{/* Upload Documents */} {/* Upload Documents */}
<div className="bg-white rounded-[20px] p-6"> <div className="bg-white rounded-[15px] border border-[#00293D]/20 shadow-[0px_10px_20px_#D9D9D9] p-6">
<FormSection id="upload-documents" icon="/assets/icons/upload-icon.svg" title="Upload Documents"> <FormSection id="upload-documents" icon="/assets/icons/upload-icon.svg" title="Upload Documents">
<FileUpload onFileSelect={(files) => console.log('Files selected:', files)} /> <FileUpload onFileSelect={(files) => console.log('Files selected:', files)} />
@@ -235,60 +251,61 @@ export default function EditProfilePage() {
</div> </div>
{/* Licensing & Areas */} {/* Licensing & Areas */}
<div className="bg-white rounded-[20px] p-6"> <div className="bg-white rounded-[15px] border border-[#00293D]/20 shadow-[0px_10px_20px_#D9D9D9] p-6">
<FormSection id="licensing-areas" icon="/assets/icons/professional-icon.svg" title="Licensing & Areas"> <FormSection id="licensing-areas" icon="/assets/icons/professional-icon.svg" title="Licensing & Areas">
<div className="space-y-4"> <div className="space-y-4">
<FormSelect
label="State Licensed"
value={formData.state}
onChange={(value) => updateField('state', value)}
options={[
{ value: 'Colorado', label: 'Colorado' },
{ value: 'Texas', label: 'Texas' },
{ value: 'California', label: 'California' },
]}
/>
<div> <div>
<label className="block text-[12px] font-medium text-[#00293D]/70 font-serif mb-2"> <label className="block text-[14px] font-semibold text-[#00293D] font-serif mb-2">
Licensed Areas What state(s) are you licensed in?
</label> </label>
<div className="relative">
<div className="absolute left-4 top-1/2 -translate-y-1/2">
<Image
src="/assets/icons/location-icon.svg"
alt="Location"
width={16}
height={16}
/>
</div>
<input
type="text"
value={stateInput}
onChange={(e) => setStateInput(e.target.value)}
onKeyDown={handleStateInputKeyDown}
placeholder="Enter state"
className="w-full h-[40px] pl-10 pr-4 border border-[#00293D]/20 rounded-[15px] text-[14px] font-serif text-[#00293D] placeholder:text-[#00293D]/40 focus:outline-none focus:border-[#E58625]"
/>
</div>
<p className="text-[12px] text-[#00293D]/60 font-serif mt-2">
Press Enter or comma to add a state.
</p>
</div>
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-2">
{formData.licensedAreas.map((area) => ( {formData.licensedAreas.map((area) => (
<span <span
key={area} key={area}
className="inline-flex items-center px-3 h-[28px] rounded-[15px] text-[14px] font-medium font-serif border-[0.7px] border-[#00293d] text-[#00293d]" className="inline-flex items-center gap-2 px-3 h-[32px] rounded-[15px] text-[14px] font-medium font-serif border border-[#00293d] text-[#00293d]"
> >
{area} {area}
</span> <button
))} onClick={() => {
</div> const newAreas = formData.licensedAreas.filter((a) => a !== area);
</div> updateField('licensedAreas', newAreas);
}}
<div> className="text-[#00293d] hover:text-[#E58625] transition-colors"
<div className="flex items-center justify-between mb-2">
<label className="text-[12px] font-medium text-[#00293D]/70 font-serif">
Expertise Years
</label>
<button className="text-[#E58625] text-[12px] font-medium font-serif">+ Edit</button>
</div>
<div className="flex flex-wrap gap-2">
{formData.expertiseYears.map((item, idx) => (
<span
key={idx}
className="inline-flex items-center px-3 h-[28px] rounded-[15px] text-[14px] font-medium font-serif border-[0.7px] border-[#00293d] text-[#00293d]"
> >
{item.area} - {item.years} ×
</button>
</span> </span>
))} ))}
</div> </div>
</div> </div>
</div>
</FormSection> </FormSection>
</div> </div>
{/* Biography */} {/* Biography */}
<div className="bg-white rounded-[20px] p-6"> <div className="bg-white rounded-[15px] border border-[#00293D]/20 shadow-[0px_10px_20px_#D9D9D9] p-6">
<FormSection id="biography" icon="/assets/icons/bio-icon.svg" title="Biography"> <FormSection id="biography" icon="/assets/icons/bio-icon.svg" title="Biography">
<div className="space-y-4"> <div className="space-y-4">
<FormTextarea <FormTextarea
@@ -311,7 +328,7 @@ export default function EditProfilePage() {
</div> </div>
{/* Expertise */} {/* Expertise */}
<div className="bg-white rounded-[20px] p-6"> <div className="bg-white rounded-[15px] border border-[#00293D]/20 shadow-[0px_10px_20px_#D9D9D9] p-6">
<FormSection id="expertise" icon="/assets/icons/professional-icon.svg" title="Expertise"> <FormSection id="expertise" icon="/assets/icons/professional-icon.svg" title="Expertise">
<TagInput <TagInput
tags={formData.expertise} tags={formData.expertise}
@@ -322,7 +339,7 @@ export default function EditProfilePage() {
</div> </div>
{/* Years In Business */} {/* Years In Business */}
<div className="bg-white rounded-[20px] p-6"> <div className="bg-white rounded-[15px] border border-[#00293D]/20 shadow-[0px_10px_20px_#D9D9D9] p-6">
<FormSection id="years-business" icon="/assets/icons/professional-icon.svg" title="Years In Business"> <FormSection id="years-business" icon="/assets/icons/professional-icon.svg" title="Years In Business">
<div className="flex flex-col md:flex-row gap-4"> <div className="flex flex-col md:flex-row gap-4">
<FormInput <FormInput
@@ -344,7 +361,7 @@ export default function EditProfilePage() {
</div> </div>
{/* Areas in expertise & Years */} {/* Areas in expertise & Years */}
<div className="bg-white rounded-[20px] p-6"> <div className="bg-white rounded-[15px] border border-[#00293D]/20 shadow-[0px_10px_20px_#D9D9D9] p-6">
<FormSection <FormSection
id="areas-expertise-years" id="areas-expertise-years"
icon="/assets/icons/basic-information-icon.svg" icon="/assets/icons/basic-information-icon.svg"
@@ -377,7 +394,7 @@ export default function EditProfilePage() {
</div> </div>
{/* Contracts Closed */} {/* Contracts Closed */}
<div className="bg-white rounded-[20px] p-6"> <div className="bg-white rounded-[15px] border border-[#00293D]/20 shadow-[0px_10px_20px_#D9D9D9] p-6">
<FormSection id="contracts-closed" icon="/assets/icons/professional-icon.svg" title="Contracts Closed"> <FormSection id="contracts-closed" icon="/assets/icons/professional-icon.svg" title="Contracts Closed">
<div className="space-y-3"> <div className="space-y-3">
<FormCheckbox <FormCheckbox
@@ -420,7 +437,7 @@ export default function EditProfilePage() {
</div> </div>
{/* Price Point */} {/* Price Point */}
<div className="bg-white rounded-[20px] p-6"> <div className="bg-white rounded-[15px] border border-[#00293D]/20 shadow-[0px_10px_20px_#D9D9D9] p-6">
<FormSection id="price-point" icon="/assets/icons/basic-information-icon.svg" title="Price Point"> <FormSection id="price-point" icon="/assets/icons/basic-information-icon.svg" title="Price Point">
<div className="space-y-3"> <div className="space-y-3">
<FormCheckbox <FormCheckbox
@@ -477,7 +494,7 @@ export default function EditProfilePage() {
</div> </div>
{/* Specialization */} {/* Specialization */}
<div className="bg-white rounded-[20px] p-6"> <div className="bg-white rounded-[15px] border border-[#00293D]/20 shadow-[0px_10px_20px_#D9D9D9] p-6">
<FormSection id="specialization" icon="/assets/icons/basic-information-icon.svg" title="Specialization"> <FormSection id="specialization" icon="/assets/icons/basic-information-icon.svg" title="Specialization">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{/* Client Localization */} {/* Client Localization */}
@@ -551,7 +568,7 @@ export default function EditProfilePage() {
</div> </div>
{/* Special Interests & Hobbies */} {/* Special Interests & Hobbies */}
<div className="bg-white rounded-[20px] p-6"> <div className="bg-white rounded-[15px] border border-[#00293D]/20 shadow-[0px_10px_20px_#D9D9D9] p-6">
<FormSection id="hobbies" icon="/assets/icons/hobbies-icon.svg" title="Special Interests & Hobbies"> <FormSection id="hobbies" icon="/assets/icons/hobbies-icon.svg" title="Special Interests & Hobbies">
<TagInput <TagInput
tags={formData.hobbies} tags={formData.hobbies}
@@ -562,7 +579,7 @@ export default function EditProfilePage() {
</div> </div>
{/* Certifications */} {/* Certifications */}
<div className="bg-white rounded-[20px] p-6"> <div className="bg-white rounded-[15px] border border-[#00293D]/20 shadow-[0px_10px_20px_#D9D9D9] p-6">
<FormSection id="certifications" icon="/assets/icons/certification-icon.svg" title="Professional Info"> <FormSection id="certifications" icon="/assets/icons/certification-icon.svg" title="Professional Info">
<p className="text-[12px] font-medium text-[#00293D]/70 font-serif mb-3">Certifications / Designations</p> <p className="text-[12px] font-medium text-[#00293D]/70 font-serif mb-3">Certifications / Designations</p>
<div className="space-y-2"> <div className="space-y-2">
@@ -577,7 +594,7 @@ export default function EditProfilePage() {
</div> </div>
{/* Availability */} {/* Availability */}
<div className="bg-white rounded-[20px] p-6"> <div className="bg-white rounded-[15px] border border-[#00293D]/20 shadow-[0px_10px_20px_#D9D9D9] p-6">
<FormSection id="availability" icon="/assets/icons/availability-clock-icon.svg" title="Availability"> <FormSection id="availability" icon="/assets/icons/availability-clock-icon.svg" title="Availability">
<div className="flex flex-col md:flex-row gap-4"> <div className="flex flex-col md:flex-row gap-4">
<FormSelect <FormSelect