631 lines
26 KiB
TypeScript
631 lines
26 KiB
TypeScript
'use client';
|
||
|
||
import { useState, useRef } from 'react';
|
||
import { useRouter } from 'next/navigation';
|
||
import Image from 'next/image';
|
||
import {
|
||
QuickLinks,
|
||
FormSection,
|
||
FormInput,
|
||
FormCheckbox,
|
||
FormTextarea,
|
||
FormSelect,
|
||
FileUpload,
|
||
AttachedFile,
|
||
TagInput,
|
||
} from './components';
|
||
|
||
// Initial form data - in production this would come from API
|
||
const initialFormData = {
|
||
firstName: 'Brian',
|
||
lastName: 'Neeland',
|
||
email: 'brian@requestnetwork.com',
|
||
phone: '+9195003837493',
|
||
professionalTypes: {
|
||
firstTime: true,
|
||
solo: false,
|
||
team: false,
|
||
},
|
||
attachedDocuments: ['Brian_Photo_1_Blue_Coat.pdf'],
|
||
state: 'Colorado',
|
||
licensedAreas: ['Colorado Springs', 'Monument'],
|
||
expertiseYears: [
|
||
{ area: 'Colorado', years: '10 yrs' },
|
||
{ area: 'Falcon', years: '10 yrs' },
|
||
],
|
||
biography: "Brian brings eight years of hands-on experience helping clients confidently buy, sell, and invest in real estate. He combines strong analytical skills with deep market knowledge to identify the right opportunities and guide clients through every step of the process. With a data-driven approach and clear communication, Brian ensures smooth transactions and informed decisions tailored to each client's goals.",
|
||
testimonialHighlight: "The most amazing experience I've had as a real estate professional is helping a family secure their dream home and seeing their happiness when they received the keys.",
|
||
expertise: ['Buyers', 'Sellers', 'Divorce', 'Luxury', 'Retirement', 'Historical', 'Condo', 'Rural'],
|
||
yearsInBusiness: {
|
||
totalYears: '10 Years',
|
||
totalTransactions: '100+',
|
||
},
|
||
contractsClosed: {
|
||
lessThan10: false,
|
||
between10And25: false,
|
||
between26And50: true,
|
||
between51And75: false,
|
||
moreThan75: false,
|
||
},
|
||
pricePoint: {
|
||
under100k: false,
|
||
between100kAnd200k: false,
|
||
between200kAnd400k: true,
|
||
between400kAnd600k: true,
|
||
between600kAnd800k: false,
|
||
between800kAnd1m: false,
|
||
above1m: false,
|
||
},
|
||
specialization: {
|
||
clientLocalization: {
|
||
local: true,
|
||
national: false,
|
||
international: false,
|
||
},
|
||
clientTypeWorkedWith: {
|
||
firstTimeBuyer: true,
|
||
firstTimeSeller: false,
|
||
},
|
||
propertyType: {
|
||
sfr: true,
|
||
condo: false,
|
||
luxury: false,
|
||
townhome: false,
|
||
commercial: false,
|
||
},
|
||
transactionType: {
|
||
relocation: true,
|
||
probate: false,
|
||
taxLien: false,
|
||
traditional: false,
|
||
newConstruction: false,
|
||
},
|
||
loanType: {
|
||
conventional: true,
|
||
fha: false,
|
||
va: false,
|
||
usda: false,
|
||
reverse: false,
|
||
},
|
||
lifestyleSpecialties: {
|
||
boating: true,
|
||
horses: false,
|
||
rv: false,
|
||
automotive: false,
|
||
aviation: false,
|
||
},
|
||
},
|
||
hobbies: ['Boating', 'Horses'],
|
||
certifications: [
|
||
{ name: 'Certified Residential Specialist (CRS)', org: 'Residential Real Estate Council' },
|
||
],
|
||
availability: {
|
||
type: 'Full Time Weekend',
|
||
workFrom: 'Work from Method',
|
||
},
|
||
};
|
||
|
||
export default function EditProfilePage() {
|
||
const router = useRouter();
|
||
const [formData, setFormData] = useState(initialFormData);
|
||
const scrollContainerRef = useRef<HTMLDivElement>(null);
|
||
|
||
const handleCancel = () => {
|
||
router.push('/agent/dashboard');
|
||
};
|
||
|
||
const handleSave = () => {
|
||
// In production, this would save to API
|
||
console.log('Saving form data:', formData);
|
||
router.push('/agent/dashboard');
|
||
};
|
||
|
||
const updateField = (field: string, value: any) => {
|
||
setFormData((prev) => ({ ...prev, [field]: value }));
|
||
};
|
||
|
||
return (
|
||
<div className="flex gap-6 h-[calc(100vh-180px)]">
|
||
{/* Left Sidebar - Quick Links */}
|
||
<div className="w-[220px] flex-shrink-0 hidden lg:block h-full overflow-y-auto scrollbar-thin">
|
||
<QuickLinks scrollContainerRef={scrollContainerRef} />
|
||
</div>
|
||
|
||
{/* 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">
|
||
{/* Basic Information */}
|
||
<div className="bg-white rounded-[20px] p-6">
|
||
<FormSection id="basic-info" icon="/assets/icons/user-icon.svg" title="Basic Information">
|
||
<div className="flex flex-col md:flex-row gap-4">
|
||
<FormInput
|
||
label="First Name"
|
||
value={formData.firstName}
|
||
onChange={(value) => updateField('firstName', value)}
|
||
placeholder="Enter first name"
|
||
/>
|
||
<FormInput
|
||
label="Last Name"
|
||
value={formData.lastName}
|
||
onChange={(value) => updateField('lastName', value)}
|
||
placeholder="Enter last name"
|
||
/>
|
||
</div>
|
||
</FormSection>
|
||
</div>
|
||
|
||
{/* Contact Information */}
|
||
<div className="bg-white rounded-[20px] p-6">
|
||
<FormSection id="contact-info" icon="/assets/icons/contact-icon.svg" title="Contact Information">
|
||
<div className="flex flex-col md:flex-row gap-4">
|
||
<FormInput
|
||
label="Email Address"
|
||
value={formData.email}
|
||
onChange={(value) => updateField('email', value)}
|
||
placeholder="Enter email"
|
||
type="email"
|
||
/>
|
||
<FormInput
|
||
label="Phone Number"
|
||
value={formData.phone}
|
||
onChange={(value) => updateField('phone', value)}
|
||
placeholder="Enter phone"
|
||
type="tel"
|
||
/>
|
||
</div>
|
||
</FormSection>
|
||
</div>
|
||
|
||
{/* Professional Types */}
|
||
<div className="bg-white rounded-[20px] p-6">
|
||
<FormSection id="professional-types" icon="/assets/icons/professional-icon.svg" title="Professional Types">
|
||
<div className="flex flex-wrap gap-6">
|
||
<FormCheckbox
|
||
label="First Time"
|
||
checked={formData.professionalTypes.firstTime}
|
||
onChange={(checked) =>
|
||
updateField('professionalTypes', { ...formData.professionalTypes, firstTime: checked })
|
||
}
|
||
/>
|
||
<FormCheckbox
|
||
label="Solo"
|
||
checked={formData.professionalTypes.solo}
|
||
onChange={(checked) =>
|
||
updateField('professionalTypes', { ...formData.professionalTypes, solo: checked })
|
||
}
|
||
/>
|
||
<FormCheckbox
|
||
label="Team"
|
||
checked={formData.professionalTypes.team}
|
||
onChange={(checked) =>
|
||
updateField('professionalTypes', { ...formData.professionalTypes, team: checked })
|
||
}
|
||
/>
|
||
</div>
|
||
</FormSection>
|
||
</div>
|
||
|
||
{/* Upload Documents */}
|
||
<div className="bg-white rounded-[20px] p-6">
|
||
<FormSection id="upload-documents" icon="/assets/icons/upload-icon.svg" title="Upload Documents">
|
||
<FileUpload onFileSelect={(files) => console.log('Files selected:', files)} />
|
||
|
||
{/* Attached Documents */}
|
||
{formData.attachedDocuments.length > 0 && (
|
||
<div className="mt-6">
|
||
<h4 className="text-[14px] font-semibold text-[#00293D] font-fractul mb-3 flex items-center gap-2">
|
||
<Image src="/assets/icons/attachment-icon.svg" alt="Attached" width={16} height={16} />
|
||
Attached Documents
|
||
</h4>
|
||
<div className="space-y-2">
|
||
{formData.attachedDocuments.map((doc, idx) => (
|
||
<AttachedFile
|
||
key={idx}
|
||
fileName={doc}
|
||
onRemove={() => {
|
||
const newDocs = [...formData.attachedDocuments];
|
||
newDocs.splice(idx, 1);
|
||
updateField('attachedDocuments', newDocs);
|
||
}}
|
||
/>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</FormSection>
|
||
</div>
|
||
|
||
{/* Licensing & Areas */}
|
||
<div className="bg-white rounded-[20px] p-6">
|
||
<FormSection id="licensing-areas" icon="/assets/icons/location-icon.svg" title="Licensing & Areas">
|
||
<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>
|
||
<label className="block text-[12px] font-medium text-[#00293D]/70 font-serif mb-2">
|
||
Licensed Areas
|
||
</label>
|
||
<div className="flex flex-wrap gap-2">
|
||
{formData.licensedAreas.map((area) => (
|
||
<span
|
||
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]"
|
||
>
|
||
{area}
|
||
</span>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<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}
|
||
</span>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</FormSection>
|
||
</div>
|
||
|
||
{/* Biography */}
|
||
<div className="bg-white rounded-[20px] p-6">
|
||
<FormSection id="biography" icon="/assets/icons/bio-icon.svg" title="Biography">
|
||
<div className="space-y-4">
|
||
<FormTextarea
|
||
value={formData.biography}
|
||
onChange={(value) => updateField('biography', value)}
|
||
placeholder="Write your biography..."
|
||
rows={5}
|
||
maxLength={500}
|
||
/>
|
||
<FormTextarea
|
||
label="Write a few sentences that explain yourself and also a good memorable thought."
|
||
value={formData.testimonialHighlight}
|
||
onChange={(value) => updateField('testimonialHighlight', value)}
|
||
placeholder="Write your memorable experience..."
|
||
rows={3}
|
||
maxLength={250}
|
||
/>
|
||
</div>
|
||
</FormSection>
|
||
</div>
|
||
|
||
{/* Expertise */}
|
||
<div className="bg-white rounded-[20px] p-6">
|
||
<FormSection id="expertise" icon="/assets/icons/expertise-icon.svg" title="Expertise">
|
||
<TagInput
|
||
tags={formData.expertise}
|
||
onChange={(tags) => updateField('expertise', tags)}
|
||
placeholder="Add expertise..."
|
||
/>
|
||
</FormSection>
|
||
</div>
|
||
|
||
{/* Years In Business */}
|
||
<div className="bg-white rounded-[20px] p-6">
|
||
<FormSection id="years-business" icon="/assets/icons/business-icon.svg" title="Years In Business">
|
||
<div className="flex flex-col md:flex-row gap-4">
|
||
<FormInput
|
||
label="Total Years"
|
||
value={formData.yearsInBusiness.totalYears}
|
||
onChange={(value) =>
|
||
updateField('yearsInBusiness', { ...formData.yearsInBusiness, totalYears: value })
|
||
}
|
||
/>
|
||
<FormInput
|
||
label="Total Transactions"
|
||
value={formData.yearsInBusiness.totalTransactions}
|
||
onChange={(value) =>
|
||
updateField('yearsInBusiness', { ...formData.yearsInBusiness, totalTransactions: value })
|
||
}
|
||
/>
|
||
</div>
|
||
</FormSection>
|
||
</div>
|
||
|
||
{/* Areas in expertise & Years */}
|
||
<div className="bg-white rounded-[20px] p-6">
|
||
<FormSection
|
||
id="areas-expertise-years"
|
||
icon="/assets/icons/areas-icon.svg"
|
||
title="Areas in expertise & Years"
|
||
showEdit
|
||
onEdit={() => console.log('Edit areas')}
|
||
>
|
||
<div className="flex flex-col md:flex-row gap-4">
|
||
<FormSelect
|
||
label="Select State"
|
||
value={formData.state}
|
||
onChange={(value) => updateField('state', value)}
|
||
options={[
|
||
{ value: 'Colorado', label: 'Colorado' },
|
||
{ value: 'Texas', label: 'Texas' },
|
||
]}
|
||
/>
|
||
<FormSelect
|
||
label="Select Years"
|
||
value="10"
|
||
onChange={() => {}}
|
||
options={[
|
||
{ value: '5', label: '5 Years' },
|
||
{ value: '10', label: '10 Years' },
|
||
{ value: '15', label: '15 Years' },
|
||
]}
|
||
/>
|
||
</div>
|
||
</FormSection>
|
||
</div>
|
||
|
||
{/* Contracts Closed */}
|
||
<div className="bg-white rounded-[20px] p-6">
|
||
<FormSection id="contracts-closed" icon="/assets/icons/contract-icon.svg" title="Contracts Closed">
|
||
<div className="space-y-3">
|
||
<FormCheckbox
|
||
label="< 10"
|
||
checked={formData.contractsClosed.lessThan10}
|
||
onChange={(checked) =>
|
||
updateField('contractsClosed', { ...formData.contractsClosed, lessThan10: checked })
|
||
}
|
||
/>
|
||
<FormCheckbox
|
||
label="10 to 25"
|
||
checked={formData.contractsClosed.between10And25}
|
||
onChange={(checked) =>
|
||
updateField('contractsClosed', { ...formData.contractsClosed, between10And25: checked })
|
||
}
|
||
/>
|
||
<FormCheckbox
|
||
label="26 to 50"
|
||
checked={formData.contractsClosed.between26And50}
|
||
onChange={(checked) =>
|
||
updateField('contractsClosed', { ...formData.contractsClosed, between26And50: checked })
|
||
}
|
||
/>
|
||
<FormCheckbox
|
||
label="51 to 75"
|
||
checked={formData.contractsClosed.between51And75}
|
||
onChange={(checked) =>
|
||
updateField('contractsClosed', { ...formData.contractsClosed, between51And75: checked })
|
||
}
|
||
/>
|
||
<FormCheckbox
|
||
label="75+"
|
||
checked={formData.contractsClosed.moreThan75}
|
||
onChange={(checked) =>
|
||
updateField('contractsClosed', { ...formData.contractsClosed, moreThan75: checked })
|
||
}
|
||
/>
|
||
</div>
|
||
</FormSection>
|
||
</div>
|
||
|
||
{/* Price Point */}
|
||
<div className="bg-white rounded-[20px] p-6">
|
||
<FormSection id="price-point" icon="/assets/icons/price-icon.svg" title="Price Point">
|
||
<div className="space-y-3">
|
||
<FormCheckbox
|
||
label="Under $100K"
|
||
checked={formData.pricePoint.under100k}
|
||
onChange={(checked) =>
|
||
updateField('pricePoint', { ...formData.pricePoint, under100k: checked })
|
||
}
|
||
/>
|
||
<FormCheckbox
|
||
label="$100K – $200K"
|
||
checked={formData.pricePoint.between100kAnd200k}
|
||
onChange={(checked) =>
|
||
updateField('pricePoint', { ...formData.pricePoint, between100kAnd200k: checked })
|
||
}
|
||
/>
|
||
<FormCheckbox
|
||
label="$200K – $400K"
|
||
checked={formData.pricePoint.between200kAnd400k}
|
||
onChange={(checked) =>
|
||
updateField('pricePoint', { ...formData.pricePoint, between200kAnd400k: checked })
|
||
}
|
||
/>
|
||
<FormCheckbox
|
||
label="$400K – $600K"
|
||
checked={formData.pricePoint.between400kAnd600k}
|
||
onChange={(checked) =>
|
||
updateField('pricePoint', { ...formData.pricePoint, between400kAnd600k: checked })
|
||
}
|
||
/>
|
||
<FormCheckbox
|
||
label="$600K – $800K"
|
||
checked={formData.pricePoint.between600kAnd800k}
|
||
onChange={(checked) =>
|
||
updateField('pricePoint', { ...formData.pricePoint, between600kAnd800k: checked })
|
||
}
|
||
/>
|
||
<FormCheckbox
|
||
label="$800K – $1M"
|
||
checked={formData.pricePoint.between800kAnd1m}
|
||
onChange={(checked) =>
|
||
updateField('pricePoint', { ...formData.pricePoint, between800kAnd1m: checked })
|
||
}
|
||
/>
|
||
<FormCheckbox
|
||
label="$1M and above"
|
||
checked={formData.pricePoint.above1m}
|
||
onChange={(checked) =>
|
||
updateField('pricePoint', { ...formData.pricePoint, above1m: checked })
|
||
}
|
||
/>
|
||
</div>
|
||
</FormSection>
|
||
</div>
|
||
|
||
{/* Specialization */}
|
||
<div className="bg-white rounded-[20px] p-6">
|
||
<FormSection id="specialization" icon="/assets/icons/specialization-icon.svg" title="Specialization">
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||
{/* Client Localization */}
|
||
<div>
|
||
<h4 className="text-[14px] font-semibold text-[#00293D] font-fractul mb-3">Client Localization</h4>
|
||
<div className="space-y-2">
|
||
<FormCheckbox label="Local" checked={formData.specialization.clientLocalization.local} onChange={() => {}} />
|
||
<FormCheckbox label="National" checked={formData.specialization.clientLocalization.national} onChange={() => {}} />
|
||
<FormCheckbox label="International" checked={formData.specialization.clientLocalization.international} onChange={() => {}} />
|
||
</div>
|
||
</div>
|
||
|
||
{/* Client Type Worked With */}
|
||
<div>
|
||
<h4 className="text-[14px] font-semibold text-[#00293D] font-fractul mb-3">Client Type Worked With</h4>
|
||
<div className="space-y-2">
|
||
<FormCheckbox label="First Time Buyer" checked={formData.specialization.clientTypeWorkedWith.firstTimeBuyer} onChange={() => {}} />
|
||
<FormCheckbox label="First Time Seller" checked={formData.specialization.clientTypeWorkedWith.firstTimeSeller} onChange={() => {}} />
|
||
</div>
|
||
</div>
|
||
|
||
{/* Property Type */}
|
||
<div>
|
||
<h4 className="text-[14px] font-semibold text-[#00293D] font-fractul mb-3">Property Type</h4>
|
||
<div className="space-y-2">
|
||
<FormCheckbox label="SFR" checked={formData.specialization.propertyType.sfr} onChange={() => {}} />
|
||
<FormCheckbox label="Condo" checked={formData.specialization.propertyType.condo} onChange={() => {}} />
|
||
<FormCheckbox label="Luxury" checked={formData.specialization.propertyType.luxury} onChange={() => {}} />
|
||
<FormCheckbox label="Townhome" checked={formData.specialization.propertyType.townhome} onChange={() => {}} />
|
||
<FormCheckbox label="Commercial" checked={formData.specialization.propertyType.commercial} onChange={() => {}} />
|
||
</div>
|
||
</div>
|
||
|
||
{/* Transaction Type */}
|
||
<div>
|
||
<h4 className="text-[14px] font-semibold text-[#00293D] font-fractul mb-3">Transaction Type</h4>
|
||
<div className="space-y-2">
|
||
<FormCheckbox label="Relocation" checked={formData.specialization.transactionType.relocation} onChange={() => {}} />
|
||
<FormCheckbox label="Probate" checked={formData.specialization.transactionType.probate} onChange={() => {}} />
|
||
<FormCheckbox label="Tax Lien" checked={formData.specialization.transactionType.taxLien} onChange={() => {}} />
|
||
<FormCheckbox label="Traditional" checked={formData.specialization.transactionType.traditional} onChange={() => {}} />
|
||
<FormCheckbox label="New Construction" checked={formData.specialization.transactionType.newConstruction} onChange={() => {}} />
|
||
</div>
|
||
</div>
|
||
|
||
{/* Loan Type */}
|
||
<div>
|
||
<h4 className="text-[14px] font-semibold text-[#00293D] font-fractul mb-3">Loan Type</h4>
|
||
<div className="space-y-2">
|
||
<FormCheckbox label="Conventional" checked={formData.specialization.loanType.conventional} onChange={() => {}} />
|
||
<FormCheckbox label="FHA" checked={formData.specialization.loanType.fha} onChange={() => {}} />
|
||
<FormCheckbox label="VA" checked={formData.specialization.loanType.va} onChange={() => {}} />
|
||
<FormCheckbox label="USDA" checked={formData.specialization.loanType.usda} onChange={() => {}} />
|
||
<FormCheckbox label="Reverse" checked={formData.specialization.loanType.reverse} onChange={() => {}} />
|
||
</div>
|
||
</div>
|
||
|
||
{/* Lifestyle Specialties */}
|
||
<div>
|
||
<h4 className="text-[14px] font-semibold text-[#00293D] font-fractul mb-3">Lifestyle Specialties</h4>
|
||
<div className="space-y-2">
|
||
<FormCheckbox label="Boating" checked={formData.specialization.lifestyleSpecialties.boating} onChange={() => {}} />
|
||
<FormCheckbox label="Horses" checked={formData.specialization.lifestyleSpecialties.horses} onChange={() => {}} />
|
||
<FormCheckbox label="RV" checked={formData.specialization.lifestyleSpecialties.rv} onChange={() => {}} />
|
||
<FormCheckbox label="Automotive" checked={formData.specialization.lifestyleSpecialties.automotive} onChange={() => {}} />
|
||
<FormCheckbox label="Aviation" checked={formData.specialization.lifestyleSpecialties.aviation} onChange={() => {}} />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</FormSection>
|
||
</div>
|
||
|
||
{/* Special Interests & Hobbies */}
|
||
<div className="bg-white rounded-[20px] p-6">
|
||
<FormSection id="hobbies" icon="/assets/icons/hobbies-icon.svg" title="Special Interests & Hobbies">
|
||
<TagInput
|
||
tags={formData.hobbies}
|
||
onChange={(tags) => updateField('hobbies', tags)}
|
||
placeholder="Add hobby..."
|
||
/>
|
||
</FormSection>
|
||
</div>
|
||
|
||
{/* Certifications */}
|
||
<div className="bg-white rounded-[20px] p-6">
|
||
<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>
|
||
<div className="space-y-2">
|
||
{formData.certifications.map((cert, idx) => (
|
||
<div key={idx} className="p-3 bg-gray-50 rounded-[10px]">
|
||
<p className="text-[14px] font-semibold text-[#00293D] font-serif">{cert.name}</p>
|
||
<p className="text-[12px] text-[#00293D]/70 font-serif">{cert.org}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</FormSection>
|
||
</div>
|
||
|
||
{/* Availability */}
|
||
<div className="bg-white rounded-[20px] p-6">
|
||
<FormSection id="availability" icon="/assets/icons/availability-clock-icon.svg" title="Availability">
|
||
<div className="flex flex-col md:flex-row gap-4">
|
||
<FormSelect
|
||
label="Availability"
|
||
value={formData.availability.type}
|
||
onChange={(value) =>
|
||
updateField('availability', { ...formData.availability, type: value })
|
||
}
|
||
options={[
|
||
{ value: 'Full Time Weekend', label: 'Full Time Weekend' },
|
||
{ value: 'Part Time', label: 'Part Time' },
|
||
{ value: 'Weekdays Only', label: 'Weekdays Only' },
|
||
]}
|
||
/>
|
||
<FormSelect
|
||
label="Work From Method"
|
||
value={formData.availability.workFrom}
|
||
onChange={(value) =>
|
||
updateField('availability', { ...formData.availability, workFrom: value })
|
||
}
|
||
options={[
|
||
{ value: 'Work from Method', label: 'Work from Method' },
|
||
{ value: 'Remote', label: 'Remote' },
|
||
{ value: 'In Office', label: 'In Office' },
|
||
{ value: 'Hybrid', label: 'Hybrid' },
|
||
]}
|
||
/>
|
||
</div>
|
||
</FormSection>
|
||
</div>
|
||
|
||
{/* Action Buttons */}
|
||
<div className="flex justify-end gap-4 pb-6">
|
||
<button
|
||
onClick={handleCancel}
|
||
className="px-8 py-3 border border-[#00293D]/20 rounded-full text-[14px] font-semibold font-serif text-[#00293D] hover:bg-gray-50 transition-colors"
|
||
>
|
||
Cancel
|
||
</button>
|
||
<button
|
||
onClick={handleSave}
|
||
className="px-8 py-3 bg-[#E58625] rounded-full text-[14px] font-semibold font-serif text-white hover:bg-[#E58625]/90 transition-colors"
|
||
>
|
||
Save
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|