web-humas-fe/components/table/master/master-user-level/master-user-level-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, useEffect, useMemo, useState } from "react";
import {
    AddIcon,
    CreateIconIon,
    DeleteIcon,
    DotsYIcon,
    EyeFilledIcon,
    EyeIconMdi,
} from "@/components/icons";
import Link from "next/link";
import { getAllUserLevels } from "@/services/user-levels/user-levels-service";

type UserObject = {
    id: number;
    name: string;
    levelNumber: string;
    aliasName: string;
    parentLevelId: string;
    provinceId: string;
    status: string;
};

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


export default function MasterUserLevelTable() {
    const [totalPage, setTotalPage] = useState(1);
    const [masterUserLevelTable, setmasterUserLevel] = useState<UserObject[]>([]);

    type TableRow = (typeof masterUserLevelTable)[0];

    const columns = [
        { name: "No", uid: "no" },
        { name: "Name", uid: "name" },
        { name: "User Name", uid: "alias_name" },
        { name: "Level Number", uid: "level_number" },
        { name: "Parent Level", uid: "parent_level_id" },
        { name: "Province", uid: "province_id" },
        { name: "Status", uid: "is_active" },
        { name: "Action", uid: "actions" },
    ];

    const [page, setPage] = useState(1);

    useEffect(() => {
        fetchData();
    }, []);

    async function fetchData() {
        const request = {
            page: page,
            limit: 10,

        };
        const res = await getAllUserLevels(request);
        const data = res?.data?.data;
        setTotalPage(Math.ceil(res?.data?.total / 10));
        initUserData(10, data);
    }

    function initUserData(limit: number, data?: any) {
        if (data) {
            console.log(data);
            const startIndex = limit * (page - 1);
            let iterate = 0;
            const newData = data.map((value: any) => {
                iterate++;
                value.no = startIndex + iterate;
                return value;
            });
            console.log("Data ::", newData);
            setmasterUserLevel(newData);
        }
    }

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

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

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

            case "alias_Name":
                return (
                    <div className="">{masterUserLevel.aliasName}</div>
                )
            case "is_active":
                return (
                    <Chip
                        className="capitalize "
                        color={statusColorMap[masterUserLevel.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-user-level/create" >
                    <Button className="my-3 bg-blue-600 text-white" ><CreateIconIon />Create New User Level</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={masterUserLevelTable} emptyContent={"No data to display."}>
                            {(item) => (
                                <TableRow key={item.id}>
                                    {(columnKey) => (
                                        <TableCell>{renderCell(item, columnKey)}</TableCell>
                                    )}
                                </TableRow>
                            )}
                        </TableBody>
                    </Table>
                    <div className="mt-2">
                        <Pagination
                            isCompact
                            showControls
                            showShadow
                            color="primary"
                            classNames={{
                                base: "bg-transparent",
                                wrapper: "bg-transparent",
                            }}
                            page={page}
                            total={totalPage}
                            onChange={(page) => setPage(page)}
                        />
                    </div>
                </div>
            </div>

        </>
    );
}