From c38c226dbd4e92631736566a9d6776bd3cd9f2a4 Mon Sep 17 00:00:00 2001
From: AmirReza Jamali <amir7jamali.ar@yahoo.com>
Date: Sun, 3 May 2026 11:00:03 +0330
Subject: [PATCH] refactor(tender-details): integrate unixToDate for date
 formatting and enhance layout consistency

- Replaced msToDate with unixToDate for application, publication, submission, and tender deadlines to ensure accurate date representation.
- Improved ShowcaseSection layout by adjusting class names for better visual consistency across various sections.
- Enhanced error message formatting for improved readability.
---
 src/app/tenders/[details]/page.tsx | 89 +++++++++++++++++++++++-------
 src/utils/shared.ts                |  2 +-
 2 files changed, 69 insertions(+), 22 deletions(-)

diff --git a/src/app/tenders/[details]/page.tsx b/src/app/tenders/[details]/page.tsx
index 3729900..7250468 100644
--- a/src/app/tenders/[details]/page.tsx
+++ b/src/app/tenders/[details]/page.tsx
@@ -7,7 +7,11 @@ import Status from "@/components/ui/Status";
 import { useTenderDetailQuery } from "@/hooks/queries";
 import { useGetFlagQuery } from "@/hooks/queries/useFlagsQueries";
 import { cn } from "@/lib/utils";
-import { isValidAlpha2CountryCode, msToDate, truncateString } from "@/utils/shared";
+import {
+  isValidAlpha2CountryCode,
+  truncateString,
+  unixToDate,
+} from "@/utils/shared";
 import getSymbolFromCurrency from "currency-symbol-map";
 import Link from "next/link";
 import { use } from "react";
@@ -82,11 +86,12 @@ const TenderDetails = ({ params }: IProps) => {
               We couldn&apos;t load this tender
             </p>
             <p className="max-w-sm text-sm text-dark-5 dark:text-dark-6">
-              Check your connection or try again. You can go back to the tender list anytime.
+              Check your connection or try again. You can go back to the tender
+              list anytime.
             </p>
             <Link
               href="/tenders"
-              className="mt-2 inline-flex items-center justify-center rounded-xl bg-primary px-5 py-2.5 text-sm font-medium text-white shadow-theme-xs transition hover:bg-primary/90"
+              className="shadow-theme-xs mt-2 inline-flex items-center justify-center rounded-xl bg-primary px-5 py-2.5 text-sm font-medium text-white transition hover:bg-primary/90"
             >
               Back to tenders
             </Link>
@@ -114,13 +119,15 @@ const TenderDetails = ({ params }: IProps) => {
               </h1>
             </div>
             <div className="flex shrink-0 flex-col gap-3 sm:flex-row sm:items-center sm:justify-end">
-              <Status status={tender.status ?? "Unknown"}>{tender.status}</Status>
+              <Status status={tender.status ?? "Unknown"}>
+                {tender.status}
+              </Status>
               {submissionUrl && (
                 <Link
                   href={submissionUrl}
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="inline-flex items-center justify-center gap-2 rounded-xl bg-primary px-4 py-2.5 text-sm font-medium text-white shadow-theme-xs transition hover:bg-primary/90 hover:shadow-md"
+                  className="shadow-theme-xs inline-flex items-center justify-center gap-2 rounded-xl bg-primary px-4 py-2.5 text-sm font-medium text-white transition hover:bg-primary/90 hover:shadow-md"
                 >
                   <span>Open submission</span>
                   <ExternalLinkIcon className="opacity-90" />
@@ -136,7 +143,9 @@ const TenderDetails = ({ params }: IProps) => {
             <SectionHeading>Procurement</SectionHeading>
             <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-5">
               <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
                 title="Buyer organization"
@@ -150,15 +159,26 @@ const TenderDetails = ({ params }: IProps) => {
                   {tender.buyer_organization.name}
                 </span>
               </ShowcaseSection>
-              <ShowcaseSection title="Notice publication ID" {...SHOWCASE_CENTERED_BODY}>
+              <ShowcaseSection
+                title="Notice publication ID"
+                {...SHOWCASE_CENTERED_BODY}
+              >
                 <span className="font-medium text-dark dark:text-white">
                   {tender.notice_publication_id}
                 </span>
               </ShowcaseSection>
-              <ShowcaseSection title="Procedure code" {...SHOWCASE_CENTERED_BODY}>
-                <span className="font-medium text-dark dark:text-white">{tender.procedure_code}</span>
+              <ShowcaseSection
+                title="Procedure code"
+                {...SHOWCASE_CENTERED_BODY}
+              >
+                <span className="font-medium text-dark dark:text-white">
+                  {tender.procedure_code}
+                </span>
               </ShowcaseSection>
-              <ShowcaseSection title="Procurement type" {...SHOWCASE_CENTERED_BODY}>
+              <ShowcaseSection
+                title="Procurement type"
+                {...SHOWCASE_CENTERED_BODY}
+              >
                 <span className="font-medium text-dark dark:text-white">
                   {tender.procurement_type_code}
                 </span>
@@ -169,28 +189,55 @@ const TenderDetails = ({ params }: IProps) => {
           <div>
             <SectionHeading>Timeline</SectionHeading>
             <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5">
-              <ShowcaseSection title="Application deadline" {...SHOWCASE_CENTERED_BODY}>
+              <ShowcaseSection
+                title="Application deadline"
+                {...SHOWCASE_CENTERED_BODY}
+              >
                 <time className="font-medium tabular-nums text-dark dark:text-white">
-                  {msToDate(tender.application_deadline ?? 0)}
+                  {unixToDate({
+                    unix: tender.application_deadline ?? 0,
+                    hasTime: true,
+                  })}
                 </time>
               </ShowcaseSection>
-              <ShowcaseSection title="Publication date" {...SHOWCASE_CENTERED_BODY}>
+              <ShowcaseSection
+                title="Publication date"
+                {...SHOWCASE_CENTERED_BODY}
+              >
                 <time className="font-medium tabular-nums text-dark dark:text-white">
-                  {msToDate(tender.publication_date ?? 0)}
+                  {unixToDate({
+                    unix: tender.publication_date ?? 0,
+                    hasTime: true,
+                  })}
                 </time>
               </ShowcaseSection>
-              <ShowcaseSection title="Submission deadline" {...SHOWCASE_CENTERED_BODY}>
+              <ShowcaseSection
+                title="Submission deadline"
+                {...SHOWCASE_CENTERED_BODY}
+              >
                 <time className="font-medium tabular-nums text-dark dark:text-white">
-                  {msToDate(tender.submission_deadline ?? 0)}
+                  {unixToDate({
+                    unix: tender.submission_deadline ?? 0,
+                    hasTime: true,
+                  })}
                 </time>
               </ShowcaseSection>
-              <ShowcaseSection title="Tender deadline" {...SHOWCASE_CENTERED_BODY}>
+              <ShowcaseSection
+                title="Tender deadline"
+                {...SHOWCASE_CENTERED_BODY}
+              >
                 <time className="font-medium tabular-nums text-dark dark:text-white">
-                  {msToDate(tender.tender_deadline ?? 0)}
+                  {unixToDate({
+                    unix: tender.tender_deadline ?? 0,
+                    hasTime: true,
+                  })}
                 </time>
               </ShowcaseSection>
               {submissionUrl && (
-                <ShowcaseSection title="Submission URL" {...SHOWCASE_CENTERED_BODY}>
+                <ShowcaseSection
+                  title="Submission URL"
+                  {...SHOWCASE_CENTERED_BODY}
+                >
                   <Link
                     href={submissionUrl}
                     target="_blank"
@@ -208,7 +255,7 @@ const TenderDetails = ({ params }: IProps) => {
           <div>
             <SectionHeading>Location & currency</SectionHeading>
             <div className="grid gap-4 sm:grid-cols-2 lg:max-w-3xl">
-              <div className="relative overflow-hidden rounded-2xl border border-stroke/70 bg-gradient-to-br from-white via-gray-2/30 to-primary/[0.06] p-5 shadow-theme-xs dark:border-dark-3 dark:from-gray-dark dark:via-gray-dark dark:to-primary/[0.12]">
+              <div className="shadow-theme-xs relative overflow-hidden rounded-2xl border border-stroke/70 bg-gradient-to-br from-white via-gray-2/30 to-primary/[0.06] p-5 dark:border-dark-3 dark:from-gray-dark dark:via-gray-dark dark:to-primary/[0.12]">
                 <div className="pointer-events-none absolute -right-8 top-0 h-24 w-24 rounded-full bg-primary/15 blur-2xl dark:bg-primary/25" />
                 <h3 className="mb-4 text-xs font-semibold uppercase tracking-wide text-dark-5 dark:text-dark-6">
                   Country
@@ -232,7 +279,7 @@ const TenderDetails = ({ params }: IProps) => {
               </div>
 
               {tender.currency && (
-                <div className="relative overflow-hidden rounded-2xl border border-stroke/70 bg-gradient-to-br from-white via-gray-2/30 to-purple-500/[0.06] p-5 shadow-theme-xs dark:border-dark-3 dark:from-gray-dark dark:via-gray-dark dark:to-purple-500/[0.12]">
+                <div className="shadow-theme-xs relative overflow-hidden rounded-2xl border border-stroke/70 bg-gradient-to-br from-white via-gray-2/30 to-purple-500/[0.06] p-5 dark:border-dark-3 dark:from-gray-dark dark:via-gray-dark dark:to-purple-500/[0.12]">
                   <div className="pointer-events-none absolute -left-6 bottom-0 h-20 w-20 rounded-full bg-purple-500/15 blur-2xl dark:bg-purple-500/25" />
                   <h3 className="mb-4 text-xs font-semibold uppercase tracking-wide text-dark-5 dark:text-dark-6">
                     Currency
diff --git a/src/utils/shared.ts b/src/utils/shared.ts
index 791f977..3c734ab 100644
--- a/src/utils/shared.ts
+++ b/src/utils/shared.ts
@@ -8,7 +8,7 @@ export const unixToDate = ({
   unix: number;
   hasTime?: boolean;
 }) => {
-  return moment.unix(unix).format(`YYYY/MM/DD - ${hasTime ? "HH:MM" : ""}`);
+  return unix === 0 ? "-" : moment.unix(unix).format(`YYYY/MM/DD - ${hasTime ? "HH:MM" : ""}`);
 };
 export const msToDate = (ms: number) => {
   return moment.default(ms).format("YYYY/MM/DD");