web-humas-fe/components/table/master/master-menu/menu-data/menu-data-table.tsx

"use client";
import {
    TableCell,
    TableRow,
    Table,
    TableHeader,
    TableColumn,
    TableBody,
    Pagination,
    Dropdown,
    DropdownTrigger,
    DropdownMenu,
    DropdownItem,
    Input,
    User,
    Card,
    Divider,
    Chip,
    ChipProps,
} from "@nextui-org/react";
import { Button } from "@nextui-org/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;
    moduleName: string;
    pathUrl: string;
};

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


export default function MenuDataTable() {
    type TableRow = (typeof menuDataTable)[0];

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

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

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

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

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

            case "description":
                return (
                    <div className="">{menuData.description}</div>
                )

            case "status":
                return (
                    <Chip
                        className="capitalize "
                        color={statusColorMap[menuData.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
                                >
                                    <Link
                                        href={`/admin/magazine/detail`}
                                    >
                                        <EyeIconMdi className="inline mr-2 mb-1" />
                                        Detail
                                    </Link>
                                </DropdownItem>
                                <DropdownItem
                                >
                                    <Link
                                        href={`#`}
                                    >
                                        <CreateIconIon className="inline mr-2 mb-1" />
                                        Edit
                                    </Link>
                                </DropdownItem>
                                <DropdownItem
                                >
                                    <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 mb-5 mt-3">
                <Link href="/admin/master/master-menu/menu-data/create" >
                    <Button className="my-3 bg-blue-600 text-white" ><CreateIconIon />Add Master Menu</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={menuDataTable} emptyContent={"No data to display."}>
                            {(item) => (
                                <TableRow key={item.id}>
                                    {(columnKey) => (
                                        <TableCell>{renderCell(item, columnKey)}</TableCell>
                                    )}
                                </TableRow>
                            )}
                        </TableBody>
                    </Table>
                </div>
            </div>

        </>
    );
}