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

"use client";
import Link from "next/link";
import { CompaniesSkeleton } from "./Skeleton";
import { useCompanyListPresenter } from "./useCompanyListPresenter";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { PencilSquareIcon, TrashIcon } from "@/assets/icons";
import ConfirmationModal from "@/components/ui/ConfirmationModal";

interface IProps {}

const CompaniesTable = ({}: IProps) => {
  const {
    isPending,
    pathName,
    columns,
    allCompanies,
    setIsModalOpen,
    router,
    isModalOpen,
    setCurrentCompany,
    onConfirmDelete,
    modalConfig,
  } = useCompanyListPresenter();
  if (isPending) return <CompaniesSkeleton />;
  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">
      <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 Company</Link>
      </button>
      <Table>
        <TableHeader>
          <TableRow>
            {columns.map((columns) => (
              <TableHead
                colSpan={100}
                className="text-start font-extrabold uppercase"
                key={columns}
              >
                {columns}
              </TableHead>
            ))}
          </TableRow>
        </TableHeader>

        <TableBody>
          {allCompanies.map((company, index) =>
            !company ? (
              <h6 key={index}>No Data was Found</h6>
            ) : (
              <TableRow
                key={company.id}
                className="odd:bg-gray-2 dark:odd:bg-gray-7"
              >
                <TableHead className="text-start" colSpan={100}>
                  {company.name}
                </TableHead>
                <TableHead className="text-start" colSpan={100}>
                  {company.email}
                </TableHead>
                <TableHead className="text-start" colSpan={100}>
                  {company.phone}
                </TableHead>
                <TableHead className="text-start" colSpan={100}>
                  {company.address.country}
                </TableHead>
                <TableHead className="text-start" colSpan={100}>
                  {company.address.state}
                </TableHead>
                <TableHead className="text-start" colSpan={100}>
                  {company.address.city}
                </TableHead>
                <TableHead className="text-start" colSpan={100}>
                  {company.address.postal_code}
                </TableHead>
                <TableHead className="text-start" colSpan={100}>
                  {company.language}
                </TableHead>
                <TableHead className="text-start" colSpan={100}>
                  {company.currency}
                </TableHead>
                <TableHead className="text-start" colSpan={100}>
                  {company.employee_count}
                </TableHead>
                <TableCell className="text-start xl:pr-7.5">
                  <div className="flex items-center justify-start gap-x-3.5">
                    <button
                      className="hover:text-red-500"
                      onClick={() => {
                        setCurrentCompany(company);
                        setIsModalOpen(true);
                      }}
                    >
                      <span className="sr-only">Delete Company </span>
                      <TrashIcon />
                    </button>
                    <button
                      className="hover:text-primary"
                      onClick={() =>
                        router.push(`${pathName}/edit/${company.id}`)
                      }
                    >
                      <span className="sr-only">Edit Company </span>
                      <PencilSquareIcon />
                    </button>
                  </div>
                </TableCell>
              </TableRow>
            ),
          )}
        </TableBody>
      </Table>
      {isModalOpen && (
        <ConfirmationModal
          isOpen={isModalOpen}
          title={modalConfig.title || "Confirm"}
          message={modalConfig.message || "Are you sure?"}
          variant={modalConfig.variant || "default"}
          size={modalConfig.size || "md"}
          confirmText={modalConfig.confirmText ?? "Confirm"}
          cancelText={modalConfig.cancelText ?? "Cancel"}
          onConfirm={() => {
            onConfirmDelete();
          }}
          onCancel={() => setIsModalOpen(false)}
        />
      )}
    </div>
  );
};

export default CompaniesTable;