tm_panel/src/components/Tables/tenders/index.tsx

"use client";

import useTenderListPresenter from "./useTenderListPresenter";
import Status from "@/components/ui/Status";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";

import { TendersSkeleton } from "./Skeleton";
import { cn } from "@/lib/utils";
import { getStatusColor } from "@/utils/shared";
import { ExclamationIcon } from "@/assets/icons";
import Pagination from "@/components/ui/pagination";
import Page from "../../../app/forms/form-layout/page";
import Link from "next/link";
const TendersTable = () => {
  const { allTenders, isPending, router, pathName, setParams } =
    useTenderListPresenter();

  return (
    <div className="flex flex-col rounded-[10px] bg-white px-7.5 pb-4 pt-7.5 shadow-1 dark:bg-gray-dark dark:shadow-card">
      <Table>
        <TableHeader>
          <TableRow className="border-none uppercase [&>th]:text-start">
            {/* <TableHead colSpan={100} className="text-start font-extrabold">
              Row
            </TableHead> */}
            <TableHead colSpan={100} className="text-start font-extrabold">
              Title
            </TableHead>
            <TableHead colSpan={100} className="text-start font-extrabold">
              Country Code
            </TableHead>
            <TableHead colSpan={100} className="text-start font-extrabold">
              Submission Url
            </TableHead>
            <TableHead colSpan={100} className="text-start font-extrabold">
              Status
            </TableHead>

            <TableHead colSpan={100} className="text-start font-extrabold">
              Actions
            </TableHead>
          </TableRow>
        </TableHeader>

        {isPending && <TendersSkeleton />}
        <TableBody>
          {allTenders?.data.tenders?.map((item, index) =>
            !item ? (
              <h6 key={index}>No tenders were found</h6>
            ) : (
              <TableRow
                key={item.id}
                className="odd:bg-gray-2 dark:odd:bg-gray-7"
              >
                {/* <TableCell className="text-start" colSpan={100}>
                  {index + 1}
                </TableCell> */}
                <TableCell className="text-start" colSpan={100}>
                  {item.title}
                </TableCell>
                <TableCell className="text-start" colSpan={100}>
                  {item.country_code}
                </TableCell>

                <TableCell className={cn(`text capitalize`)} colSpan={100}>
                  {item.submission_url ? (
                    <Link target="_blank" href={item.submission_url}>
                      {item.submission_url}
                    </Link>
                  ) : (
                    "-"
                  )}
                </TableCell>
                <TableCell className={cn(`text capitalize`)} colSpan={100}>
                  <Status status={item.status}>{item.status}</Status>
                </TableCell>
                <TableCell className={cn(`text capitalize`)} colSpan={100}>
                  <button
                    className="text-gray-40 rounded-full bg-gray-dark bg-opacity-5 hover:text-green-dark dark:bg-gray dark:bg-opacity-5"
                    onClick={() => {
                      router.push(`${pathName}/${item.id}`);
                    }}
                  >
                    <ExclamationIcon />
                  </button>
                </TableCell>
              </TableRow>
            ),
          )}
        </TableBody>
      </Table>
      <Pagination
        currentPage={allTenders?.meta?.page ? allTenders?.meta?.page - 1 : 0}
        totalPages={allTenders?.meta?.pages ?? 1}
        onPageChange={(e) => {
          setParams((currentParams) => ({
            ...currentParams,
            offset: e.selected * (allTenders?.meta?.limit ?? 10),
            limit: allTenders?.meta?.limit ?? 10,
          }));
        }}
      />
    </div>
  );
};

export default TendersTable;