web-humas-fe/components/table/master/master-module/master-module-table.tsx

"use client";
import {
  TableCell,
  TableRow,
  Table,
  TableHeader,
  TableColumn,
  TableBody,
  Pagination,
  Dropdown,
  DropdownTrigger,
  DropdownMenu,
  DropdownItem,
  Input,
  User,
  Card,
  Divider,
  Chip,
  ChipProps,
} from "@heroui/react";
import { Button } from "@heroui/button";
import React, { Key, useCallback, useMemo, useState } from "react";
import {
  AddIcon,
  CreateIconIon,
  DeleteIcon,
  DotsYIcon,
  EyeFilledIcon,
  EyeIconMdi,
} from "@/components/icons";
import Link from "next/link";

type UserObject = {
  id: number;
  name: string;
  status: string;
  description: string;
  pathUrl: string;
};

const statusColorMap = {
  active: "success",
  paused: "danger",
  vacation: "warning",
};

export default function MasterModuleTable() {
  type TableRow = (typeof masterModuleTable)[0];

  const columns = [
    { name: "No", uid: "no" },
    { name: "Name", uid: "name" },
    { name: "Description", uid: "description" },
    { name: "Path URL", uid: "pathUrl" },
    { name: "Status", uid: "status" },
    { name: "Action", uid: "actions" },
  ];

  const masterModuleTable = [
    {
      id: 1,
      name: "AI Journalist ",
      status: "active",
      description: "AI Journalist",
      pathUrl: "/admin/acts",
    },
    {
      id: 2,
      name: "AI Journalist ",
      status: "active",
      description: "AI Journalist",
      pathUrl: "/admin/acts",
    },
    {
      id: 3,
      name: "AI Journalist ",
      status: "active",
      description: "AI Journalist",
      pathUrl: "/admin/acts",
    },
    {
      id: 4,
      name: "AI Journalist ",
      status: "active",
      description: "AI Journalist",
      pathUrl: "/admin/acts",
    },
    {
      id: 5,
      name: "AI Journalist ",
      status: "active",
      description: "AI Journalist",
      pathUrl: "/admin/acts",
    },
  ];

  const renderCell = useCallback((masterModule: TableRow, columnKey: Key) => {
    const cellValue = masterModule[columnKey as keyof UserObject];
    const statusColorMap: Record<string, ChipProps["color"]> = {
      active: "success",
      cancel: "danger",
      pending: "warning",
    };

    switch (columnKey) {
      case "no":
        return <div>{masterModule.id}</div>;

      case "name":
        return <div className="w-[150px]">{masterModule.name}</div>;

      case "description":
        return <div className="">{masterModule.description}</div>;

      case "status":
        return (
          <Chip
            className="capitalize "
            color={statusColorMap[masterModule.status]}
            size="lg"
            variant="flat"
          >
            <div className="flex flex-row items-center gap-2 justify-center">
              {cellValue}
            </div>
          </Chip>
        );

      case "actions":
        return (
          <div className="relative flex justify-star items-center gap-2">
            <Dropdown className="lg:min-w-[150px] bg-black text-white shadow border ">
              <DropdownTrigger>
                <Button isIconOnly size="lg" variant="light">
                  <DotsYIcon className="text-default-300" />
                </Button>
              </DropdownTrigger>
              <DropdownMenu>
                <DropdownItem key="Detail">
                  <Link href={`/admin/magazine/detail`}>
                    <EyeIconMdi className="inline mr-2 mb-1" />
                    Detail
                  </Link>
                </DropdownItem>
                <DropdownItem key="Edit">
                  <Link href={`#`}>
                    <CreateIconIon className="inline mr-2 mb-1" />
                    Edit
                  </Link>
                </DropdownItem>
                <DropdownItem key="Delete">
                  <Link href={`#`}>
                    <DeleteIcon
                      width={20}
                      height={16}
                      className="inline mr-2 mb-1"
                    />
                    Delete
                  </Link>
                </DropdownItem>
              </DropdownMenu>
            </Dropdown>
          </div>
        );

      default:
        return cellValue;
    }
  }, []);

  return (
    <>
      <div className="mx-3 my-5">
        <Link href="/admin/master/master-module/create">
          <Button className="my-3 bg-blue-600 text-white">
            <CreateIconIon />
            Add Master Module
          </Button>
        </Link>
        <div className="flex flex-col items-center rounded-2xl">
          <Table
            // selectionMode="multiple"
            aria-label="micro issue table"
            className="rounded-xl"
            classNames={{
              th: "bg-white dark:bg-black text-black dark:text-white border-b-1 text-md",
              base: "bg-white dark:bg-black border",
              wrapper:
                "min-h-[50px] bg-transpararent text-black dark:text-white ",
            }}
          >
            <TableHeader columns={columns}>
              {(column) => (
                <TableColumn key={column.uid}>{column.name}</TableColumn>
              )}
            </TableHeader>
            <TableBody
              items={masterModuleTable}
              emptyContent={"No data to display."}
            >
              {(item) => (
                <TableRow key={item.id}>
                  {(columnKey) => (
                    <TableCell>{renderCell(item, columnKey)}</TableCell>
                  )}
                </TableRow>
              )}
            </TableBody>
          </Table>
        </div>
      </div>
    </>
  );
}