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

refactor(tender-details): integrate unixToDate for date formatting and enhance layout consistency

Browse Source 
- 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.
This commit is contained in:
AmirReza Jamali
2026-05-03 11:00:03 +03:30
parent 04bdb7bf0d
commit c38c226dbd
2 changed files with 69 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/tenders/[details]/page.tsx
+68 -21
View File
@@ -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'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
src/utils/shared.ts
+1 -1
View File
@@ -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");