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

chore(env): update application version to 2.2.6 in production environment

Browse Source 
feat(tenders): enhance TendersTable with improved title truncation and tooltip support

- Updated TendersTable to include a tooltip for tender titles exceeding 40 characters, improving user experience by providing additional context.
- Refactored imports in TendersTable for better organization and clarity.
This commit is contained in:
AmirReza Jamali
2026-06-01 19:07:47 +03:30
parent 9424758af5
commit bb3695ee74
2 changed files with 126 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.env.production
+1 -1
View File
@@ -1,4 +1,4 @@
NEXT_PUBLIC_APP_VERSION=2.2.5 NEXT_PUBLIC_APP_VERSION=2.2.6
NEXT_PUBLIC_TOAST_AUTO_CLOSE_DURATION=2500 NEXT_PUBLIC_TOAST_AUTO_CLOSE_DURATION=2500
NEXT_PUBLIC_FIREBASE_API_KEY=AIzaSyCTjdsk2jE34IfnvSKP1JMTIf_Abd7tbt0 NEXT_PUBLIC_FIREBASE_API_KEY=AIzaSyCTjdsk2jE34IfnvSKP1JMTIf_Abd7tbt0
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=opplens-270d1.firebaseapp.com NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=opplens-270d1.firebaseapp.com
src/components/Tables/tenders/index.tsx
+125 -97
View File
@@ -2,6 +2,10 @@
import { ExclamationIcon, EyeIcon } from "@/assets/icons"; import { ExclamationIcon, EyeIcon } from "@/assets/icons";
import EmptyListWrapper from "@/components/HOC/EmptyListWrapper"; import EmptyListWrapper from "@/components/HOC/EmptyListWrapper";
import IsVisible from "@/components/ui/IsVisible";
import ListHeader from "@/components/ui/ListHeader";
import ListWrapper from "@/components/ui/ListWrapper";
import Pagination from "@/components/ui/pagination";
import Status from "@/components/ui/Status"; import Status from "@/components/ui/Status";
import { import {
Table, Table,
@@ -12,13 +16,10 @@ import {
TableRow, TableRow,
TableSortProvider, TableSortProvider,
} from "@/components/ui/table"; } from "@/components/ui/table";
import IsVisible from "@/components/ui/IsVisible";
import ListHeader from "@/components/ui/ListHeader";
import ListWrapper from "@/components/ui/ListWrapper";
import Pagination from "@/components/ui/pagination";
import TableSkeleton from "@/components/ui/TableSkeleton"; import TableSkeleton from "@/components/ui/TableSkeleton";
import { _TooltipDefaultParams } from "@/constants/tooltip"; import { _TooltipDefaultParams } from "@/constants/tooltip";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { truncateString } from "@/utils/shared";
import { Tooltip } from "react-tooltip"; import { Tooltip } from "react-tooltip";
import TenderListFilters from "./TenderListFilters"; import TenderListFilters from "./TenderListFilters";
import useTenderListPresenter from "./useTenderListPresenter"; import useTenderListPresenter from "./useTenderListPresenter";
@@ -78,102 +79,129 @@ const TendersTable = () => {
sortOrder={sortOrder} sortOrder={sortOrder}
onSortChange={handleSortChange} onSortChange={handleSortChange}
> >
<Table> <Table>
<TableHeader> <TableHeader>
<TableRow className="border-none uppercase [&>th]:text-start"> <TableRow className="border-none uppercase [&>th]:text-start">
{columns.map((column) => { {columns.map((column) => {
const sortKey = columnSortKeys[column]; const sortKey = columnSortKeys[column];
return ( return (
<TableHead <TableHead
key={column} key={column}
colSpan={100} colSpan={100}
sortable={Boolean(sortKey)} sortable={Boolean(sortKey)}
sortKey={sortKey} sortKey={sortKey}
defaultSortOrder={columnDefaultOrder[column]} defaultSortOrder={columnDefaultOrder[column]}
> >
{column} {column}
</TableHead> </TableHead>
); );
})} })}
</TableRow> </TableRow>
</TableHeader> </TableHeader>
{isPending ? ( {isPending ? (
<TableSkeleton ref={skeletonTbodyRef} column={columns.length} /> <TableSkeleton ref={skeletonTbodyRef} column={columns.length} />
) : ( ) : (
<TableBody ref={dataTbodyRef}> <TableBody ref={dataTbodyRef}>
<EmptyListWrapper <EmptyListWrapper
list={tendersList} list={tendersList}
columns={columns} columns={columns}
emptyMessage="No tenders were found" emptyMessage="No tenders were found"
isLoading={false} isLoading={false}
> >
{tendersList.map((item, index) => ( {tendersList.map((item, index) => (
<TableRow <TableRow
key={item.id} key={item.id}
className="odd:bg-gray-2 dark:odd:bg-gray-7" className="odd:bg-gray-2 dark:odd:bg-gray-7"
> >
<TableCell className="text-start" colSpan={100}> <TableCell className="text-start" colSpan={100}>
{getRowNumber(index)} {getRowNumber(index)}
</TableCell> </TableCell>
<TableCell className="text-start" colSpan={100}> <TableCell className="text-start" colSpan={100}>
{item.title} {item.title.length > 40 ? (
</TableCell> <span
<TableCell className="text-start" colSpan={100}> data-tooltip-id="tender-title"
{item.country_code} data-tooltip-content={item.title}
</TableCell> data-tooltip-place="top"
<TableCell className="text-start" colSpan={100}> className="cursor-help underline decoration-dotted decoration-1 underline-offset-4"
{formatDateTimeCell(item.publication_date)} >
</TableCell> {truncateString(item.title, 20, 20)}
<TableCell className="text-start" colSpan={100}> </span>
{formatDateTimeCell(item.submission_deadline)} ) : (
</TableCell> item.title
<TableCell className="text-start" colSpan={100}> )}
{formatDateTimeCell(item.tender_deadline)} </TableCell>
</TableCell> <TableCell className="text-start" colSpan={100}>
<TableCell className="text-start" colSpan={100}> {item.country_code}
{formatDateTimeCell(item?.created_at ?? 0)} </TableCell>
</TableCell> <TableCell className="text-start" colSpan={100}>
{formatDateTimeCell(item.publication_date)}
</TableCell>
<TableCell className="text-start" colSpan={100}>
{formatDateTimeCell(item.submission_deadline)}
</TableCell>
<TableCell className="text-start" colSpan={100}>
{formatDateTimeCell(item.tender_deadline)}
</TableCell>
<TableCell className="text-start" colSpan={100}>
{formatDateTimeCell(item?.created_at ?? 0)}
</TableCell>
<TableCell className={cn(`text capitalize`)} colSpan={100}> <TableCell
<Status status={item.status}>{item.status}</Status> className={cn(`text capitalize`)}
</TableCell> colSpan={100}
<TableCell className="capitalize" colSpan={100}> >
<div className="flex items-center gap-2"> <Status status={item.status}>{item.status}</Status>
<button </TableCell>
type="button" <TableCell className="capitalize" colSpan={100}>
data-tooltip-id="details" <div className="flex items-center gap-2">
data-tooltip-content="Details" <button
data-tooltip-place="top" type="button"
onClick={() => navigateToTenderDetails(item.id)} data-tooltip-id="details"
> data-tooltip-content="Details"
<Tooltip data-tooltip-place="top"
{..._TooltipDefaultParams({ onClick={() => navigateToTenderDetails(item.id)}
id: "details", >
})} <Tooltip
/> {..._TooltipDefaultParams({
<EyeIcon /> id: "details",
</button> })}
<button />
type="button" <EyeIcon />
data-tooltip-id="feedback" </button>
data-tooltip-content="Feedback" <button
data-tooltip-place="top" type="button"
className="text-gray-40 rounded-full bg-gray-dark bg-opacity-5 hover:text-green-dark dark:bg-gray dark:bg-opacity-5" data-tooltip-id="feedback"
onClick={() => navigateToTenderFeedback(item.id)} data-tooltip-content="Feedback"
> data-tooltip-place="top"
<Tooltip {..._TooltipDefaultParams({ id: "feedback" })} /> className="text-gray-40 rounded-full bg-gray-dark bg-opacity-5 hover:text-green-dark dark:bg-gray dark:bg-opacity-5"
<ExclamationIcon /> onClick={() => navigateToTenderFeedback(item.id)}
</button> >
</div> <Tooltip
</TableCell> {..._TooltipDefaultParams({ id: "feedback" })}
</TableRow> />
))} <ExclamationIcon />
</EmptyListWrapper> </button>
</TableBody> </div>
)} </TableCell>
</Table> </TableRow>
))}
</EmptyListWrapper>
</TableBody>
)}
</Table>
</TableSortProvider> </TableSortProvider>
<Tooltip
{..._TooltipDefaultParams({
id: "tender-title",
styles: {
maxWidth: "320px",
whiteSpace: "normal",
lineHeight: "1.5",
textAlign: "start",
},
})}
/>
</div> </div>
<IsVisible condition={shouldShowPagination}> <IsVisible condition={shouldShowPagination}>
<Pagination <Pagination