tm_panel/src/components/Tables/feedback-table/index.tsx

import { ExclamationIcon } from "@/assets/icons";
import EmptyListWrapper from "@/components/HOC/EmptyListWrapper";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import TableSkeleton from "@/components/ui/TableSkeleton";
import { cn } from "@/lib/utils";
import { capitalize, getPaginatedRowNumber, unixToDate } from "@/utils/shared";

import { ShowcaseSection } from "@/components/Layouts/showcase-section";
import useFeedbackTablePresenter from "./useFeedbackTablePresenter";
interface IProps {
  id: string;
  paramKey: "tender_id" | "company_id" | "customer_id";
}
const FeedbackTable = ({ id, paramKey }: IProps) => {
  const {
    columns,
    feedback,
    isLoading,
    pathName,
    router,
    getShowcaseSectionTitle,
  } = useFeedbackTablePresenter({ id, paramKey });

  return (
    <ShowcaseSection
      title={
        !isLoading &&
        `${capitalize(paramKey.slice(0, -3))}${getShowcaseSectionTitle()}`
      }
      className="flex flex-col rounded-[10px] bg-white px-7.5 pb-4 pt-7.5 capitalize shadow-1 dark:bg-gray-dark dark:shadow-card"
    >
      <Table>
        <TableHeader>
          <TableRow>
            {columns.map((column) => (
              <TableHead className="capitalize" key={column} colSpan={100}>
                {column}
              </TableHead>
            ))}
          </TableRow>
        </TableHeader>
        {isLoading && <TableSkeleton column={columns.length} />}

        <TableBody>
          <EmptyListWrapper
            list={feedback ?? []}
            columns={columns}
            emptyMessage="No feedback were found"
          >
            {(feedback ?? []).map((item, index) => (
              <TableRow
                key={item.id}
                className="odd:bg-gray-2 dark:odd:bg-gray-7"
              >
                <TableCell className="text-start" colSpan={100}>
                  {getPaginatedRowNumber({ index })}
                </TableCell>
                <TableCell className="uppercase" colSpan={100}>
                  {item.feedback_type}
                </TableCell>
                <TableCell className="uppercase" colSpan={100}>
                  {unixToDate({ unix: item.updated_at, hasTime: true })}
                </TableCell>

                <TableCell className="uppercase" colSpan={100}>
                  {unixToDate({ unix: item.created_at, hasTime: true })}
                </TableCell>
                <TableCell
                  className={cn(`text flex gap-2 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>
            ))}
          </EmptyListWrapper>
        </TableBody>
      </Table>
    </ShowcaseSection>
  );
};

export default FeedbackTable;