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

feat: implement dynamic work environment section and improve availability data mapping with backend-resolved labels

Browse Source
This commit is contained in:
pradeepkumar
2026-04-14 09:07:37 +05:30
parent 1eccde73e3
commit dc2b279947
3 changed files with 114 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/app/(agent)/agent/dashboard/page.tsx
View File

@@ -21,11 +21,12 @@ import { connectionRequestsService } from '@/services/connection-requests.servic
import { uploadService } from '@/services/upload.service';
import { usersService } from '@/services/users.service';
import { testimonialsService, Testimonial } from '@/services/testimonials.service';
import { mapFieldValuesToExperience, mapFieldValuesToProfileCard, mapFieldValuesToAvailability, mapFieldValuesToSpecializationFields, mapFieldValuesToContactInfo, ExperienceData, ProfileCardData, AvailabilityData, SpecializationFieldsData, ContactInfoData } from '@/utils/profileDataMapper';
import { mapFieldValuesToExperience, mapFieldValuesToProfileCard, mapFieldValuesToAvailability, mapFieldValuesToSpecializationFields, mapFieldValuesToContactInfo, mapFieldValuesToWorkEnvironment, ExperienceData, ProfileCardData, AvailabilityData, SpecializationFieldsData, ContactInfoData, WorkEnvironmentData } from '@/utils/profileDataMapper';
// Mock data for sections not yet available from API
const mockData = {
preferredWorkEnvironment: 'Preferred work environment includes on-site property visits, in-depth market research, client consultations, property tours, and active involvement in negotiations to ensure the best outcomes',
// Default work environment data
const defaultWorkEnvironmentData: WorkEnvironmentData = {
label: 'Preferred Work Environment',
content: '',
};
// Default experience data when no field values are available
@@ -59,6 +60,7 @@ const defaultProfileCardData: ProfileCardData = {
const defaultAvailabilityData: AvailabilityData = {
type: '',
schedule: [],
label: 'Availability',
};
// Default specialization fields data when no field values are available
@@ -79,6 +81,7 @@ export default function AgentDashboard() {
const [experienceData, setExperienceData] = useState<ExperienceData>(defaultExperience);
const [profileCardData, setProfileCardData] = useState<ProfileCardData>(defaultProfileCardData);
const [availabilityData, setAvailabilityData] = useState<AvailabilityData>(defaultAvailabilityData);
const [workEnvironmentData, setWorkEnvironmentData] = useState<WorkEnvironmentData>(defaultWorkEnvironmentData);
const [specializationFieldsData, setSpecializationFieldsData] = useState<SpecializationFieldsData>(defaultSpecializationFieldsData);
const [contactInfoData, setContactInfoData] = useState<ContactInfoData>(defaultContactInfoData);
const [loading, setLoading] = useState(true);
@@ -150,6 +153,10 @@ export default function AgentDashboard() {
const mappedAvailability = mapFieldValuesToAvailability(fieldValuesResponse.fieldValues);
setAvailabilityData(mappedAvailability);
// Map field values to work environment data
const mappedWorkEnv = mapFieldValuesToWorkEnvironment(fieldValuesResponse.fieldValues);
setWorkEnvironmentData(mappedWorkEnv);
// Map field values to specialization fields data (only fields from "Specialization" section)
const mappedSpecializationFields = mapFieldValuesToSpecializationFields(fieldValuesResponse.fieldValues);
setSpecializationFieldsData(mappedSpecializationFields);
@@ -452,11 +459,11 @@ export default function AgentDashboard() {
{/* Info Cards Section */}
<div className="flex flex-col lg:grid lg:grid-cols-3 gap-6">
<InfoCard
title="Availability"
title={availabilityData.label}
icon={
<Image
src="/assets/icons/availability-clock-icon.svg"
alt="Availability"
alt={availabilityData.label}
width={28}
height={31}
/>
@@ -478,18 +485,20 @@ export default function AgentDashboard() {
</div>
}
/>
{workEnvironmentData.content && (
<InfoCard
title=""
title={workEnvironmentData.label}
icon={
<Image
src="/assets/icons/work-environment-icon.svg"
alt="Work environment"
alt={workEnvironmentData.label}
width={28}
height={28}
/>
}
content={<p className="font-serif font-semibold text-[14px] leading-[19px] text-[#00293D]">{mockData.preferredWorkEnvironment}</p>}
content={<p className="font-serif font-semibold text-[14px] leading-[19px] text-[#00293D]">{workEnvironmentData.content}</p>}
/>
)}
{testimonials.length > 0 && (
<InfoCard
title=""

27
src/app/(user)/user/profile/[id]/page.tsx
View File

@@ -21,11 +21,12 @@ import { agentsService, AgentProfile, FieldValueResponse } from '@/services/agen
import { connectionRequestsService, ConnectionStatus } from '@/services/connection-requests.service';
import { uploadService } from '@/services/upload.service';
import { testimonialsService, Testimonial } from '@/services/testimonials.service';
import { mapFieldValuesToExperience, mapFieldValuesToSpecializationFields, mapFieldValuesToProfileCard, mapFieldValuesToContactInfo, mapFieldValuesToAvailability, ExperienceData, SpecializationFieldsData, ProfileCardData, ContactInfoData, AvailabilityData } from '@/utils/profileDataMapper';
import { mapFieldValuesToExperience, mapFieldValuesToSpecializationFields, mapFieldValuesToProfileCard, mapFieldValuesToContactInfo, mapFieldValuesToAvailability, mapFieldValuesToWorkEnvironment, ExperienceData, SpecializationFieldsData, ProfileCardData, ContactInfoData, AvailabilityData, WorkEnvironmentData } from '@/utils/profileDataMapper';
// Mock data for sections not yet available from API
const mockData = {
preferredWorkEnvironment: 'Preferred work environment includes on-site property visits, in-depth market research, client consultations, property tours, and active involvement in negotiations to ensure the best outcomes',
// Default work environment data
const defaultWorkEnvironmentData: WorkEnvironmentData = {
label: 'Preferred Work Environment',
content: '',
};
// Default experience data when no field values are available
@@ -70,6 +71,7 @@ const defaultContactInfoData: ContactInfoData = {
const defaultAvailabilityData: AvailabilityData = {
type: '',
schedule: [],
label: 'Availability',
};
export default function AgentProfileView() {
@@ -84,6 +86,7 @@ export default function AgentProfileView() {
const [profileCardData, setProfileCardData] = useState<ProfileCardData>(defaultProfileCardData);
const [contactInfoData, setContactInfoData] = useState<ContactInfoData>(defaultContactInfoData);
const [availabilityData, setAvailabilityData] = useState<AvailabilityData>(defaultAvailabilityData);
const [workEnvironmentData, setWorkEnvironmentData] = useState<WorkEnvironmentData>(defaultWorkEnvironmentData);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const [imageError, setImageError] = useState(false);
@@ -143,6 +146,10 @@ export default function AgentProfileView() {
const mappedAvailability = mapFieldValuesToAvailability(fieldValuesResponse.fieldValues);
setAvailabilityData(mappedAvailability);
// Map field values to work environment data
const mappedWorkEnv = mapFieldValuesToWorkEnvironment(fieldValuesResponse.fieldValues);
setWorkEnvironmentData(mappedWorkEnv);
// Map testimonials for TestimonialsSection
setTestimonials(
testimonialsData.map((t) => ({
@@ -380,11 +387,11 @@ export default function AgentProfileView() {
{/* Info Cards Section */}
<div className="flex flex-col lg:grid lg:grid-cols-3 gap-6">
<InfoCard
title="Availability"
title={availabilityData.label}
icon={
<Image
src="/assets/icons/availability-clock-icon.svg"
alt="Availability"
alt={availabilityData.label}
width={28}
height={31}
/>
@@ -406,18 +413,20 @@ export default function AgentProfileView() {
</div>
}
/>
{workEnvironmentData.content && (
<InfoCard
title=""
title={workEnvironmentData.label}
icon={
<Image
src="/assets/icons/work-environment-icon.svg"
alt="Work environment"
alt={workEnvironmentData.label}
width={28}
height={28}
/>
}
content={<p className="font-serif font-semibold text-[14px] leading-[19px] text-[#00293D]">{mockData.preferredWorkEnvironment}</p>}
content={<p className="font-serif font-semibold text-[14px] leading-[19px] text-[#00293D]">{workEnvironmentData.content}</p>}
/>
)}
{testimonials.length > 0 && (
<InfoCard
title=""

95
src/utils/profileDataMapper.ts
View File

@@ -219,60 +219,83 @@ export interface SpecializationFieldsData {
export interface AvailabilityData {
type: string;
schedule: string[];
label: string;
}
// Map availability option values to human-readable labels
const availabilityLabels: Record<string, string> = {
'mf_9_5': 'Monday - Friday, 9 AM - 5 PM',
'mf_8_6': 'Monday - Friday, 8 AM - 6 PM',
'weekends': 'Weekends',
'evenings': 'Evenings',
'flexible': 'Flexible Schedule',
'full_time': 'Full-time',
'part_time': 'Part-time',
'24_7': '24/7 Available',
'by_appointment': 'By Appointment Only',
'monday': 'Monday',
'tuesday': 'Tuesday',
'wednesday': 'Wednesday',
'thursday': 'Thursday',
'friday': 'Friday',
'saturday': 'Saturday',
'sunday': 'Sunday',
// Work environment data structure
export interface WorkEnvironmentData {
label: string;
content: string;
}
/**
* Maps field values to work environment data (label + content)
*/
export function mapFieldValuesToWorkEnvironment(fieldValues: FieldValueResponse[]): WorkEnvironmentData {
const field = fieldValues.find(f => f.fieldSlug === 'preferred_work_environment');
return {
label: field?.fieldName || 'Preferred Work Environment',
content: (field?.value as string | undefined)?.trim() || '',
};
}
// Type-determining values (business hours → Full-time, etc.)
const fullTimeKeywords = ['full_time', 'mf_9_5', 'mf_8_6', 'full time', '9-5', '9 am', '9am'];
const partTimeKeywords = ['part_time', 'part time'];
const flexibleKeywords = ['flexible'];
function matchesKeyword(value: string, keywords: string[]): boolean {
const normalized = value.toLowerCase();
return keywords.some(kw => normalized.includes(kw));
}
/**
* Maps field values to availability data
* Uses backend-resolved `valueLabel` and deduplicates by normalized label.
*/
export function mapFieldValuesToAvailability(fieldValues: FieldValueResponse[]): AvailabilityData {
const availabilityValues = getFieldValue(fieldValues, 'availability') as string[] | undefined;
const field = fieldValues.find(f => f.fieldSlug === 'availability');
const label = field?.fieldName || 'Availability';
if (!availabilityValues || availabilityValues.length === 0) {
return {
type: '',
schedule: [],
};
const rawValues = (field?.value as string[] | undefined) || [];
const labelValues = (field?.valueLabel as string[] | undefined) || [];
if (rawValues.length === 0) {
return { type: '', schedule: [], label };
}
// Map values to human-readable labels
const schedule = availabilityValues.map(val =>
availabilityLabels[val] || val.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase())
);
// Prefer backend-resolved labels, fall back to raw value with snake_case formatting
const resolvedLabels = rawValues.map((val, i) => {
const fromBackend = labelValues[i];
if (fromBackend && typeof fromBackend === 'string' && fromBackend.trim()) {
return fromBackend.trim();
}
return val.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
});
// Determine type based on values
// Deduplicate by normalized comparison (case/whitespace insensitive)
const seen = new Set<string>();
const schedule: string[] = [];
for (const item of resolvedLabels) {
const key = item.toLowerCase().replace(/[\s,.-]+/g, '');
if (!seen.has(key)) {
seen.add(key);
schedule.push(item);
}
}
// Determine availability type based on values OR resolved labels
const allValues = [...rawValues.map(v => String(v)), ...resolvedLabels];
let type = 'Available';
if (availabilityValues.includes('full_time') || availabilityValues.includes('mf_9_5') || availabilityValues.includes('mf_8_6')) {
if (allValues.some(v => matchesKeyword(v, fullTimeKeywords))) {
type = 'Full-time';
} else if (availabilityValues.includes('part_time')) {
} else if (allValues.some(v => matchesKeyword(v, partTimeKeywords))) {
type = 'Part-time';
} else if (availabilityValues.includes('flexible')) {
} else if (allValues.some(v => matchesKeyword(v, flexibleKeywords))) {
type = 'Flexible';
}
return {
type,
schedule,
};
return { type, schedule, label };
}
/**