mazyar/tm_panel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(tender-procurement-section): improve code readability and formatting

Browse Source 
- Reformatted the TenderProcurementSection component for better readability by adjusting indentation and line breaks.
- Enhanced the structure of related notice IDs and duration parts for clarity.
- Updated ShowcaseSection components to maintain consistent formatting and improve visual alignment.
- Ensured consistent use of props and improved overall code organization.
This commit is contained in:
AmirReza Jamali
2026-05-17 11:04:51 +03:30
parent 0d8300493e
commit a6bb481ab1
1 changed files with 87 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/tenders/[details]/components/tender-procurement-section.tsx
+87 -31
View File
@@ -50,15 +50,21 @@ function formatAddressLines(addr: TTenderAddress | undefined): string[] {
return lines; return lines;
} }
export function TenderProcurementSection({ tender }: TenderProcurementSectionProps) { export function TenderProcurementSection({
const relatedNoticeIds = uniqueTrimmedNoticeIds(tender.related_notice_publication_ids); tender,
}: TenderProcurementSectionProps) {
const relatedNoticeIds = uniqueTrimmedNoticeIds(
tender.related_notice_publication_ids,
);
const noticeTypeCode = tender.notice_type_code?.trim(); const noticeTypeCode = tender.notice_type_code?.trim();
const mainCpv = const mainCpv =
tender.main_classification_display?.trim() || tender.main_classification?.trim(); tender.main_classification_display?.trim() ||
tender.main_classification?.trim();
const noticePubId = tender.notice_publication_id?.trim(); const noticePubId = tender.notice_publication_id?.trim();
const durationParts = [tender.duration?.trim(), tender.duration_unit?.trim()].filter( const durationParts = [
Boolean, tender.duration?.trim(),
); tender.duration_unit?.trim(),
].filter(Boolean);
const durationLabel = durationParts.join(" "); const durationLabel = durationParts.join(" ");
const buyer = tender.buyer_organization; const buyer = tender.buyer_organization;
@@ -67,15 +73,14 @@ export function TenderProcurementSection({ tender }: TenderProcurementSectionPro
const showBuyerExtended = hasBuyerExtendedDetails(tender); const showBuyerExtended = hasBuyerExtendedDetails(tender);
return ( return (
<div <div id={TENDER_SECTION_IDS.procurement} className={HEADER_SCROLL_MARGIN}>
id={TENDER_SECTION_IDS.procurement}
className={HEADER_SCROLL_MARGIN}
>
<SectionHeading>Procurement</SectionHeading> <SectionHeading>Procurement</SectionHeading>
<div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-5"> <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-5">
{isNonEmptyTrimmed(tender.tender_id) ? ( {isNonEmptyTrimmed(tender.tender_id) ? (
<ShowcaseSection title="Tender ID" {...SHOWCASE_CENTERED_BODY}> <ShowcaseSection title="Tender ID" {...SHOWCASE_CENTERED_BODY}>
<span className="font-medium text-dark dark:text-white">{tender.tender_id}</span> <span className="font-medium text-dark dark:text-white">
{tender.tender_id}
</span>
</ShowcaseSection> </ShowcaseSection>
) : null} ) : null}
@@ -96,12 +101,17 @@ export function TenderProcurementSection({ tender }: TenderProcurementSectionPro
SHOWCASE_CENTERED_BODY.className, SHOWCASE_CENTERED_BODY.className,
)} )}
> >
<span className="font-medium text-dark dark:text-white">{buyer.name}</span> <span className="font-medium text-dark dark:text-white">
{buyer.name}
</span>
</ShowcaseSection> </ShowcaseSection>
) : null} ) : null}
{noticePubId ? ( {noticePubId ? (
<ShowcaseSection title="Notice publication ID" {...SHOWCASE_CENTERED_BODY}> <ShowcaseSection
title="Notice publication ID"
{...SHOWCASE_CENTERED_BODY}
>
<span className="font-medium text-primary underline-offset-4 hover:underline"> <span className="font-medium text-primary underline-offset-4 hover:underline">
<Link <Link
href={`${TED_NOTICE_DETAIL}/${noticePubId}`} href={`${TED_NOTICE_DETAIL}/${noticePubId}`}
@@ -115,7 +125,10 @@ export function TenderProcurementSection({ tender }: TenderProcurementSectionPro
) : null} ) : null}
{isNonEmptyTrimmed(tender.procurement_project_id) ? ( {isNonEmptyTrimmed(tender.procurement_project_id) ? (
<ShowcaseSection title="Procurement project ID" {...SHOWCASE_CENTERED_BODY}> <ShowcaseSection
title="Procurement project ID"
{...SHOWCASE_CENTERED_BODY}
>
<span className="break-all font-medium text-dark dark:text-white"> <span className="break-all font-medium text-dark dark:text-white">
{tender.procurement_project_id} {tender.procurement_project_id}
</span> </span>
@@ -123,7 +136,10 @@ export function TenderProcurementSection({ tender }: TenderProcurementSectionPro
) : null} ) : null}
{isNonEmptyTrimmed(tender.contract_folder_id) ? ( {isNonEmptyTrimmed(tender.contract_folder_id) ? (
<ShowcaseSection title="Contract folder ID" {...SHOWCASE_CENTERED_BODY}> <ShowcaseSection
title="Procedure Identifier"
{...SHOWCASE_CENTERED_BODY}
>
<span className="break-all font-medium text-dark dark:text-white"> <span className="break-all font-medium text-dark dark:text-white">
{tender.contract_folder_id} {tender.contract_folder_id}
</span> </span>
@@ -131,7 +147,10 @@ export function TenderProcurementSection({ tender }: TenderProcurementSectionPro
) : null} ) : null}
{isNonEmptyTrimmed(tender.contract_notice_id) ? ( {isNonEmptyTrimmed(tender.contract_notice_id) ? (
<ShowcaseSection title="Contract notice ID" {...SHOWCASE_CENTERED_BODY}> <ShowcaseSection
title="Contract notice ID"
{...SHOWCASE_CENTERED_BODY}
>
<span className="break-all font-medium text-dark dark:text-white"> <span className="break-all font-medium text-dark dark:text-white">
{tender.contract_notice_id} {tender.contract_notice_id}
</span> </span>
@@ -139,7 +158,10 @@ export function TenderProcurementSection({ tender }: TenderProcurementSectionPro
) : null} ) : null}
{isNonEmptyTrimmed(tender.notice_identifier) ? ( {isNonEmptyTrimmed(tender.notice_identifier) ? (
<ShowcaseSection title="Notice identifier" {...SHOWCASE_CENTERED_BODY}> <ShowcaseSection
title="Notice identifier"
{...SHOWCASE_CENTERED_BODY}
>
<span className="break-all font-medium text-dark dark:text-white"> <span className="break-all font-medium text-dark dark:text-white">
{tender.notice_identifier} {tender.notice_identifier}
</span> </span>
@@ -156,18 +178,25 @@ export function TenderProcurementSection({ tender }: TenderProcurementSectionPro
{isNonEmptyTrimmed(tender.gazette_id) ? ( {isNonEmptyTrimmed(tender.gazette_id) ? (
<ShowcaseSection title="Gazette ID" {...SHOWCASE_CENTERED_BODY}> <ShowcaseSection title="Gazette ID" {...SHOWCASE_CENTERED_BODY}>
<span className="font-medium text-dark dark:text-white">{tender.gazette_id}</span> <span className="font-medium text-dark dark:text-white">
{tender.gazette_id}
</span>
</ShowcaseSection> </ShowcaseSection>
) : null} ) : null}
{isNonEmptyTrimmed(tender.form_type) ? ( {isNonEmptyTrimmed(tender.form_type) ? (
<ShowcaseSection title="Form type" {...SHOWCASE_CENTERED_BODY}> <ShowcaseSection title="Form type" {...SHOWCASE_CENTERED_BODY}>
<span className="font-medium text-dark dark:text-white">{tender.form_type}</span> <span className="font-medium text-dark dark:text-white">
{tender.form_type}
</span>
</ShowcaseSection> </ShowcaseSection>
) : null} ) : null}
{isNonEmptyTrimmed(tender.notice_sub_type_code) ? ( {isNonEmptyTrimmed(tender.notice_sub_type_code) ? (
<ShowcaseSection title="Notice sub-type code" {...SHOWCASE_CENTERED_BODY}> <ShowcaseSection
title="Notice sub-type code"
{...SHOWCASE_CENTERED_BODY}
>
<span className="font-medium text-dark dark:text-white"> <span className="font-medium text-dark dark:text-white">
{tender.notice_sub_type_code} {tender.notice_sub_type_code}
</span> </span>
@@ -176,13 +205,17 @@ export function TenderProcurementSection({ tender }: TenderProcurementSectionPro
{isNonEmptyTrimmed(tender.source) ? ( {isNonEmptyTrimmed(tender.source) ? (
<ShowcaseSection title="Source" {...SHOWCASE_CENTERED_BODY}> <ShowcaseSection title="Source" {...SHOWCASE_CENTERED_BODY}>
<span className="font-medium text-dark dark:text-white">{tender.source}</span> <span className="font-medium text-dark dark:text-white">
{tender.source}
</span>
</ShowcaseSection> </ShowcaseSection>
) : null} ) : null}
{isNonEmptyTrimmed(tender.procedure_code) ? ( {isNonEmptyTrimmed(tender.procedure_code) ? (
<ShowcaseSection title="Procedure code" {...SHOWCASE_CENTERED_BODY}> <ShowcaseSection title="Procedure code" {...SHOWCASE_CENTERED_BODY}>
<span className="font-medium text-dark dark:text-white">{tender.procedure_code}</span> <span className="font-medium text-dark dark:text-white">
{tender.procedure_code}
</span>
</ShowcaseSection> </ShowcaseSection>
) : null} ) : null}
@@ -196,18 +229,28 @@ export function TenderProcurementSection({ tender }: TenderProcurementSectionPro
{noticeTypeCode ? ( {noticeTypeCode ? (
<ShowcaseSection title="Notice type code" {...SHOWCASE_CENTERED_BODY}> <ShowcaseSection title="Notice type code" {...SHOWCASE_CENTERED_BODY}>
<span className="font-medium text-dark dark:text-white">{noticeTypeCode}</span> <span className="font-medium text-dark dark:text-white">
{noticeTypeCode}
</span>
</ShowcaseSection> </ShowcaseSection>
) : null} ) : null}
{mainCpv ? ( {mainCpv ? (
<ShowcaseSection title="Main classification (CPV)" {...SHOWCASE_CENTERED_BODY}> <ShowcaseSection
<span className="font-medium text-dark dark:text-white">{mainCpv}</span> title="Main classification (CPV)"
{...SHOWCASE_CENTERED_BODY}
>
<span className="font-medium text-dark dark:text-white">
{mainCpv}
</span>
</ShowcaseSection> </ShowcaseSection>
) : null} ) : null}
{isNonEmptyTrimmed(tender.estimated_value_vat_basis) ? ( {isNonEmptyTrimmed(tender.estimated_value_vat_basis) ? (
<ShowcaseSection title="Estimated value (VAT basis)" {...SHOWCASE_CENTERED_BODY}> <ShowcaseSection
title="Estimated value (VAT basis)"
{...SHOWCASE_CENTERED_BODY}
>
<span className="font-medium text-dark dark:text-white"> <span className="font-medium text-dark dark:text-white">
{tender.estimated_value_vat_basis} {tender.estimated_value_vat_basis}
</span> </span>
@@ -216,7 +259,9 @@ export function TenderProcurementSection({ tender }: TenderProcurementSectionPro
{durationLabel ? ( {durationLabel ? (
<ShowcaseSection title="Duration" {...SHOWCASE_CENTERED_BODY}> <ShowcaseSection title="Duration" {...SHOWCASE_CENTERED_BODY}>
<span className="font-medium text-dark dark:text-white">{durationLabel}</span> <span className="font-medium text-dark dark:text-white">
{durationLabel}
</span>
</ShowcaseSection> </ShowcaseSection>
) : null} ) : null}
@@ -255,11 +300,16 @@ export function TenderProcurementSection({ tender }: TenderProcurementSectionPro
<div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-5"> <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-5">
{isNonEmptyTrimmed(buyer.company_id) ? ( {isNonEmptyTrimmed(buyer.company_id) ? (
<ShowcaseSection title="Company ID" {...SHOWCASE_CENTERED_BODY}> <ShowcaseSection title="Company ID" {...SHOWCASE_CENTERED_BODY}>
<span className="font-medium text-dark dark:text-white">{buyer.company_id}</span> <span className="font-medium text-dark dark:text-white">
{buyer.company_id}
</span>
</ShowcaseSection> </ShowcaseSection>
) : null} ) : null}
{isValidHttpUrl(buyer.website_uri) ? ( {isValidHttpUrl(buyer.website_uri) ? (
<ShowcaseSection title="Buyer website" {...SHOWCASE_CENTERED_BODY}> <ShowcaseSection
title="Buyer website"
{...SHOWCASE_CENTERED_BODY}
>
<Link <Link
href={buyer.website_uri!.trim()} href={buyer.website_uri!.trim()}
target="_blank" target="_blank"
@@ -278,14 +328,20 @@ export function TenderProcurementSection({ tender }: TenderProcurementSectionPro
</ShowcaseSection> </ShowcaseSection>
) : null} ) : null}
{isNonEmptyTrimmed(buyer.contact_telephone) ? ( {isNonEmptyTrimmed(buyer.contact_telephone) ? (
<ShowcaseSection title="Contact telephone" {...SHOWCASE_CENTERED_BODY}> <ShowcaseSection
title="Contact telephone"
{...SHOWCASE_CENTERED_BODY}
>
<span className="font-medium text-dark dark:text-white"> <span className="font-medium text-dark dark:text-white">
{buyer.contact_telephone} {buyer.contact_telephone}
</span> </span>
</ShowcaseSection> </ShowcaseSection>
) : null} ) : null}
{isNonEmptyTrimmed(buyer.contact_email) ? ( {isNonEmptyTrimmed(buyer.contact_email) ? (
<ShowcaseSection title="Contact email" {...SHOWCASE_CENTERED_BODY}> <ShowcaseSection
title="Contact email"
{...SHOWCASE_CENTERED_BODY}
>
<a <a
href={`mailto:${buyer.contact_email!.trim()}`} href={`mailto:${buyer.contact_email!.trim()}`}
className="break-all font-medium text-primary underline-offset-4 hover:underline" className="break-all font-medium text-primary underline-offset-4 hover:underline"