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

feat: add agency information section and dynamic field labels to profile experience data

Browse Source
This commit is contained in:
pradeepkumar
2026-04-14 07:54:25 +05:30
parent 369c7a0ac8
commit 66b233159a
4 changed files with 76 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/components/profile/ExperienceSection.tsx
View File

@@ -2,14 +2,7 @@
import { useState } from 'react';
import { Tag } from './Tag';
interface ExperienceData {
years: string;
contracts: string;
licensingAreas: string[];
expertiseYears: { area: string; years: string }[];
certifications: { name: string; org: string }[];
}
import type { ExperienceData } from '@/utils/profileDataMapper';
interface ExperienceSectionProps {
experience: ExperienceData;
@@ -24,6 +17,13 @@ export function ExperienceSection({ experience }: ExperienceSectionProps) {
const [showAllExpertise, setShowAllExpertise] = useState(false);
const [showAllCertifications, setShowAllCertifications] = useState(false);
// Build agency display — append designation if flag is set
const agencyDisplay = experience.agencyName
? (experience.agencyShowDesignation && experience.agencyDesignation
? `${experience.agencyName} - ${experience.agencyDesignation}`
: experience.agencyName)
: '';
// Calculate how many more items are hidden
const licensingRemaining = experience.licensingAreas.length - INITIAL_DISPLAY_COUNT;
const expertiseRemaining = experience.expertiseYears.length - EXPERTISE_INITIAL_COUNT;
@@ -46,8 +46,22 @@ export function ExperienceSection({ experience }: ExperienceSectionProps) {
<div className="flex flex-col lg:flex-row gap-4 lg:gap-8">
{/* Left Column */}
<div className="flex-1 space-y-4">
{agencyDisplay && (
<>
<div>
<p className="font-fractul font-bold text-[14px] leading-[17px] text-[#00293D] mb-2">{experience.agencySectionLabel}</p>
<ul className="list-disc list-inside">
<li className="font-serif font-medium text-[15px] leading-[21px] text-[#00293D]">
{agencyDisplay}
</li>
</ul>
</div>
{/* Horizontal divider */}
<div className="w-full h-0 border-t-[0.5px] border-solid border-[#00293D]/20" />
</>
)}
<div>
<p className="font-fractul font-bold text-[14px] leading-[17px] text-[#00293D] mb-2">Years in Experience</p>
<p className="font-fractul font-bold text-[14px] leading-[17px] text-[#00293D] mb-2">{experience.yearsLabel}</p>
<ul className="list-disc list-inside">
<li className="font-serif font-medium text-[15px] leading-[21px] text-[#00293D]">
{experience.years !== '-' ? experience.years : <span className="text-[#00293D]/40">Not specified</span>}
@@ -57,7 +71,7 @@ export function ExperienceSection({ experience }: ExperienceSectionProps) {
{/* Horizontal divider */}
<div className="w-full h-0 border-t-[0.5px] border-solid border-[#00293D]/20" />
<div>
<p className="font-fractul font-bold text-[14px] leading-[17px] text-[#00293D] mb-2">Number of contracts closed</p>
<p className="font-fractul font-bold text-[14px] leading-[17px] text-[#00293D] mb-2">{experience.contractsLabel}</p>
<ul className="list-disc list-inside">
<li className="font-serif font-medium text-[15px] leading-[21px] text-[#00293D]">
{experience.contracts !== '-' ? experience.contracts : <span className="text-[#00293D]/40">Not specified</span>}
@@ -65,7 +79,7 @@ export function ExperienceSection({ experience }: ExperienceSectionProps) {
</ul>
</div>
<div>
<p className="font-fractul font-bold text-[14px] leading-[17px] text-[#00293D] mb-3">Licensing &amp; Areas</p>
<p className="font-fractul font-bold text-[14px] leading-[17px] text-[#00293D] mb-3">{experience.licensingAreasLabel}</p>
<div className="flex flex-wrap gap-2">
{experience.licensingAreas.length > 0 ? (
<>
@@ -105,7 +119,7 @@ export function ExperienceSection({ experience }: ExperienceSectionProps) {
{/* Right Column */}
<div className="flex-1 space-y-4">
<div>
<p className="font-fractul font-bold text-[14px] leading-[17px] text-[#00293D] mb-3">Areas in expertise &amp; Years</p>
<p className="font-fractul font-bold text-[14px] leading-[17px] text-[#00293D] mb-3">{experience.expertiseYearsLabel}</p>
<div className="flex flex-wrap gap-2">
{experience.expertiseYears.length > 0 ? (
<>
@@ -137,7 +151,7 @@ export function ExperienceSection({ experience }: ExperienceSectionProps) {
</div>
</div>
<div>
<p className="font-fractul font-bold text-[14px] leading-[17px] text-[#00293D] mb-3">Certifications</p>
<p className="font-fractul font-bold text-[14px] leading-[17px] text-[#00293D] mb-3">{experience.certificationsLabel}</p>
{experience.certifications.length > 0 ? (
<div>
<ul className="space-y-3">