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

- 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.

src/app/tenders/[details]/components/tender-procurement-section.tsx

@@ -50,15 +50,21 @@ function formatAddressLines(addr: TTenderAddress | undefined): string[] {
   return lines;
 }
 
-export function TenderProcurementSection({ tender }: TenderProcurementSectionProps) {
-  const relatedNoticeIds = uniqueTrimmedNoticeIds(tender.related_notice_publication_ids);
+export function TenderProcurementSection({
+  tender,
+}: TenderProcurementSectionProps) {
+  const relatedNoticeIds = uniqueTrimmedNoticeIds(
+    tender.related_notice_publication_ids,
+  );
   const noticeTypeCode = tender.notice_type_code?.trim();
   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 durationParts = [tender.duration?.trim(), tender.duration_unit?.trim()].filter(
-    Boolean,
-  );
+  const durationParts = [
+    tender.duration?.trim(),
+    tender.duration_unit?.trim(),
+  ].filter(Boolean);
   const durationLabel = durationParts.join(" ");
 
   const buyer = tender.buyer_organization;
@@ -67,15 +73,14 @@ export function TenderProcurementSection({ tender }: TenderProcurementSectionPro
   const showBuyerExtended = hasBuyerExtendedDetails(tender);
 
   return (
-    <div
-      id={TENDER_SECTION_IDS.procurement}
-      className={HEADER_SCROLL_MARGIN}
-    >
+    <div id={TENDER_SECTION_IDS.procurement} className={HEADER_SCROLL_MARGIN}>
       <SectionHeading>Procurement</SectionHeading>
       <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-5">
         {isNonEmptyTrimmed(tender.tender_id) ? (
           <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>
         ) : null}
 
@@ -96,12 +101,17 @@ export function TenderProcurementSection({ tender }: TenderProcurementSectionPro
               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>
         ) : null}
 
         {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">
               <Link
                 href={`${TED_NOTICE_DETAIL}/${noticePubId}`}
@@ -115,7 +125,10 @@ export function TenderProcurementSection({ tender }: TenderProcurementSectionPro
         ) : null}
 
         {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">
               {tender.procurement_project_id}
             </span>
@@ -123,7 +136,10 @@ export function TenderProcurementSection({ tender }: TenderProcurementSectionPro
         ) : null}
 
         {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">
               {tender.contract_folder_id}
             </span>
@@ -131,7 +147,10 @@ export function TenderProcurementSection({ tender }: TenderProcurementSectionPro
         ) : null}
 
         {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">
               {tender.contract_notice_id}
             </span>
@@ -139,7 +158,10 @@ export function TenderProcurementSection({ tender }: TenderProcurementSectionPro
         ) : null}
 
         {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">
               {tender.notice_identifier}
             </span>
@@ -156,18 +178,25 @@ export function TenderProcurementSection({ tender }: TenderProcurementSectionPro
 
         {isNonEmptyTrimmed(tender.gazette_id) ? (
           <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>
         ) : null}
 
         {isNonEmptyTrimmed(tender.form_type) ? (
           <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>
         ) : null}
 
         {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">
               {tender.notice_sub_type_code}
             </span>
@@ -176,13 +205,17 @@ export function TenderProcurementSection({ tender }: TenderProcurementSectionPro
 
         {isNonEmptyTrimmed(tender.source) ? (
           <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>
         ) : null}
 
         {isNonEmptyTrimmed(tender.procedure_code) ? (
           <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>
         ) : null}
 
@@ -196,18 +229,28 @@ export function TenderProcurementSection({ tender }: TenderProcurementSectionPro
 
         {noticeTypeCode ? (
           <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>
         ) : null}
 
         {mainCpv ? (
-          <ShowcaseSection title="Main classification (CPV)" {...SHOWCASE_CENTERED_BODY}>
-            <span className="font-medium text-dark dark:text-white">{mainCpv}</span>
+          <ShowcaseSection
+            title="Main classification (CPV)"
+            {...SHOWCASE_CENTERED_BODY}
+          >
+            <span className="font-medium text-dark dark:text-white">
+              {mainCpv}
+            </span>
           </ShowcaseSection>
         ) : null}
 
         {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">
               {tender.estimated_value_vat_basis}
             </span>
@@ -216,7 +259,9 @@ export function TenderProcurementSection({ tender }: TenderProcurementSectionPro
 
         {durationLabel ? (
           <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>
         ) : 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">
             {isNonEmptyTrimmed(buyer.company_id) ? (
               <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>
             ) : null}
             {isValidHttpUrl(buyer.website_uri) ? (
-              <ShowcaseSection title="Buyer website" {...SHOWCASE_CENTERED_BODY}>
+              <ShowcaseSection
+                title="Buyer website"
+                {...SHOWCASE_CENTERED_BODY}
+              >
                 <Link
                   href={buyer.website_uri!.trim()}
                   target="_blank"
@@ -278,14 +328,20 @@ export function TenderProcurementSection({ tender }: TenderProcurementSectionPro
               </ShowcaseSection>
             ) : null}
             {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">
                   {buyer.contact_telephone}
                 </span>
               </ShowcaseSection>
             ) : null}
             {isNonEmptyTrimmed(buyer.contact_email) ? (
-              <ShowcaseSection title="Contact email" {...SHOWCASE_CENTERED_BODY}>
+              <ShowcaseSection
+                title="Contact email"
+                {...SHOWCASE_CENTERED_BODY}
+              >
                 <a
                   href={`mailto:${buyer.contact_email!.trim()}`}
                   className="break-all font-medium text-primary underline-offset-4 hover:underline"