tm_panel/src/components/Tables/notification-history/index.tsx

"use client";
import { EyeIcon } from "@/assets/icons";
import { ShowcaseSection } from "@/components/Layouts/showcase-section";
import Pagination from "@/components/ui/pagination";
import Status from "@/components/ui/Status";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import TableSkeleton from "@/components/ui/TableSkeleton";
import { _TooltipDefaultParams } from "@/constants/tooltip";
import { truncateString, unixToDate } from "@/utils/shared";
import Link from "next/link";
import { Tooltip } from "react-tooltip";

import Boolean from "@/components/ui/Boolean";
import useNotificationHistoryTablePresenter from "./useNotificationHistoryTablePresenter";

const NotificationHistoryTable = () => {
  const {
    columns,
    isLoading,
    metadata,
    notificationHistory,
    pathName,
    router,
    setParams,
  } = useNotificationHistoryTablePresenter();

  return (
    <ShowcaseSection className="flex flex-col">
      <button className="mb-5 flex w-fit justify-center self-end rounded-lg bg-primary p-[13px] font-medium text-white hover:bg-opacity-90">
        <Link href={`${pathName}/create`}>Create Notification </Link>
      </button>
      <Table>
        <TableHeader>
          <TableRow>
            {columns.map((column) => (
              <TableHead colSpan={100} key={column}>
                {column}
              </TableHead>
            ))}
          </TableRow>
        </TableHeader>
        {isLoading && <TableSkeleton column={columns.length} />}
        <TableBody>
          {!notificationHistory?.length ? (
            <TableRow>
              <TableCell>
                <h2>No notifications</h2>
              </TableCell>
            </TableRow>
          ) : (
            notificationHistory.map((item, index) => (
              <TableRow key={item.id}>
                <TableCell colSpan={100}>{index + 1}</TableCell>
                <TableCell colSpan={100}>{item.title}</TableCell>
                <TableCell colSpan={100}>{item.event_type}</TableCell>
                <TableCell colSpan={100}>
                  {unixToDate({
                    hasTime: true,
                    unix: item.created_at,
                  })}
                </TableCell>
                <TableCell colSpan={100}>{item.recipient?.full_name}</TableCell>
                <TableCell colSpan={100} className="truncate">
                  {truncateString(item.message, 20, 20)}
                </TableCell>
                <TableCell className="capitalize" colSpan={100}>
                  {item.priority}
                </TableCell>
                <TableCell className="capitalize" colSpan={100}>
                  {item.type}
                </TableCell>
                <TableCell className="capitalize" colSpan={100}>
                  <Boolean value={item.seen} />
                </TableCell>
                <TableCell colSpan={100}>
                  <Status status={item.status}>{item.status}</Status>
                </TableCell>
                <TableCell colSpan={100}>
                  <button
                    data-tooltip-id="details"
                    data-tooltip-content="Details"
                    data-tooltip-place="top"
                    onClick={() => {
                      router.push(`${pathName}/${item.id}`);
                    }}
                  >
                    <Tooltip
                      {..._TooltipDefaultParams({
                        id: "details",
                      })}
                    />
                    <EyeIcon />
                  </button>
                </TableCell>
              </TableRow>
            ))
          )}
        </TableBody>
      </Table>
      <Pagination
        currentPage={metadata?.page ? metadata?.page - 1 : 0}
        totalPages={metadata?.pages ?? 1}
        onPageChange={(e) => {
          setParams((currentParams) => ({
            ...currentParams,
            offset: e.selected * (metadata?.limit ?? 10),
            limit: metadata?.limit ?? 10,
          }));
        }}
      />
    </ShowcaseSection>
  );
};

export default NotificationHistoryTable;