web-humas-fe/components/table/users-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 {
    AccIcon,
    CloseIcon,
    CreateIconIon,
    DeleteIcon,
    DotsXIcon,
    DotsYIcon,
    EyeIconMdi,
    OfflineIcon,
    OnlineIcon,
    RefundIcon,
    SearchIcon,
} from "@/components/icons";
import Link from "next/link";

type UserObject = {
    id: number;
    user: string;
    status: string;
    projectName: string;
    avatar: string;

};

export default function UsersTable() {
    type TableRow = (typeof usersTable)[0];

    const columns = [

        { name: "Users", uid: "user" },
        { name: "ProjectName", uid: "projectName" },
        { name: "Team", uid: "team" },
        { name: "Status", uid: "status" },
        { name: "Budget", uid: "budget" },
    ];


    const usersTable = [
        {
            id: 1,
            user: "Sunil Joshi",
            description: "Web Designer",
            team: "S",
            status: "Active",
            projectName: "Elite admin",
            budget: "$3.9k",
            avatar: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSa8Luglga9J2R3Bxt_PsWZISUHQWODD6_ZTAJ5mIQgxYCAE-YbkY81faTqp-hSA_jVPTs&usqp=CAU",
        },
        {
            id: 2,
            user: "AndrewMcDownland",
            description: "Project Manager",
            team: "T",
            status: "Pending",
            projectName: "Real Homes WP Theme",
            budget: "$24.5k",
            avatar: "https://cdn.icon-icons.com/icons2/2859/PNG/512/avatar_face_man_boy_male_profile_smiley_happy_people_icon_181661.png",
        },
        {
            id: 3,
            user: "Cristopher jamil",
            description: "Project Manager",
            team: "X",
            status: "Completed",
            projectName: "MediacalPro WP Theme",
            budget: "$12.8k",
            avatar: "https://cdn.icon-icons.com/icons2/2859/PNG/512/avatar_face_man_boy_male_profile_smiley_happy_people_icon_181657.png",
        },
        {
            id: 4,
            user: "Nirav Joshi",
            description: "Frontend Engineer",
            team: "A",
            status: "Active",
            projectName: "Hosting Press HTML",
            budget: "$2.4k",
            avatar: "https://cdn.icon-icons.com/icons2/3708/PNG/512/man_person_people_avatar_icon_230017.png",
        },
        {
            id: 5,
            user: "MichealDoe",
            description: "Content Writer",
            team: "S",
            status: "Cancel",
            projectName: "Helping Hands WP Theme",
            budget: "$9.3k",
            avatar: "https://cdn.icon-icons.com/icons2/1736/PNG/512/4043275-avatar-man-person-punk_113271.png",
        },


    ];

    const renderCell = useCallback((basic: TableRow, columnKey: Key) => {
        const cellValue = basic[columnKey as keyof UserObject];
        const statusColorMap: Record<string, ChipProps["color"]> = {
            Active: "success",
            Cancel: "danger",
            Pending: "warning",
            Completed: "primary"
        };

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

            case "user":
                return (
                    <User
                        avatarProps={{ radius: "lg", src: basic.avatar }}
                        description={basic.description}
                        name={cellValue}
                    >
                        {basic.description}
                    </User>
                )

            case "team":
                return (
                    <div className="bg-blue-400 h-11 w-11 flex flex-row justify-center items-center text-lg rounded-full">{cellValue}</div>
                )

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

            case "budget":
                return (
                    <div className="relative flex justify-star items-center gap-2">
                        <p className="text-lg font-semibold font-serif">{cellValue}</p>
                    </div>
                );

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

    return (
        <>

            <div className="mx-5 my-5">
                <div className="flex flex-col items-center rounded-2xl">
                    <Table
                        // selectionMode="multiple"
                        aria-label="micro issue table"
                        className="rounded-3xl"
                        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={usersTable} emptyContent={"No data to display."}>
                            {(item) => (
                                <TableRow key={item.id}>
                                    {(columnKey) => (
                                        <TableCell>{renderCell(item, columnKey)}</TableCell>
                                    )}
                                </TableRow>
                            )}
                        </TableBody>
                    </Table>
                </div>
            </div>

        </>
    );
}