import * as React from "react";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";
import {
ColumnDef,
SortingState,
VisibilityState,
flexRender,
getCoreRowModel,
getFilteredRowModel,
getPaginationRowModel,
getSortedRowModel,
useReactTable,
} from "@tanstack/react-table";
import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
import { BsTrash } from "react-icons/bs";
import {
Dialog,
DialogClose,
DialogContent,
DialogTrigger,
} from "@/components/ui/dialog";
import { TbCaretUpDownFilled } from "react-icons/tb";
import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectLabel,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import {
Pagination,
PaginationContent,
PaginationItem,
PaginationLink,
} from "@/components/ui/pagination";
import { FaXmark } from "react-icons/fa6";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { FaEdit } from "react-icons/fa";
import { Button } from "@/components/ui/button";
import { BsThreeDots } from "react-icons/bs";
import { useNavigate } from "react-router-dom";
import { useState } from "react";
import {
Sheet,
SheetContent,
SheetHeader,
SheetTrigger,
} from "@/components/ui/sheet";
import PermissonDrawer from "./PermissonDrawer";
import { useRef } from "react";
import { Input } from "../ui/input";
import { IoSearchOutline } from "react-icons/io5";
export type Permission = {
permission: string;
};
export type RoleData = {
role_id: string;
role: string;
permissions: Permission[];
};
const data: RoleData[] = [
{
role_id: "1",
role: "Internal Admin",
permissions: [
{ permission: "View Homepage" },
{ permission: "View Manage Service" },
{ permission: "View Add a Service" },
{ permission: "View Quote a Service" },
{ permission: "Support Desk" },
{ permission: "Profile" },
],
},
{
role_id: "2",
role: "Internal Admin",
permissions: [
{ permission: "View Homepage" },
{ permission: "View Manage Service" },
{ permission: "View Add a Service" },
{ permission: "View Quote a Service" },
{ permission: "Support Desk" },
{ permission: "Profile" },
],
},
{
role_id: "3",
role: "Internal Admin",
permissions: [
{ permission: "View Homepage" },
{ permission: "View Manage Service" },
{ permission: "View Add a Service" },
{ permission: "View Quote a Service" },
{ permission: "Support Desk" },
{ permission: "Profile" },
],
},
{
role_id: "4",
role: "Internal Admin",
permissions: [
{ permission: "View Homepage" },
{ permission: "View Manage Service" },
{ permission: "View Add a Service" },
{ permission: "View Quote a Service" },
{ permission: "Support Desk" },
{ permission: "Profile" },
],
},
{
role_id: "5",
role: "Internal Admin",
permissions: [
{ permission: "View Homepage" },
{ permission: "View Manage Service" },
{ permission: "View Add a Service" },
{ permission: "View Quote a Service" },
{ permission: "Support Desk" },
{ permission: "Profile" },
],
},
{
role_id: "6",
role: "Customer Admin",
permissions: [
{ permission: "View Homepage" },
{ permission: "View Manage Service" },
{ permission: "View Add a Service" },
{ permission: "View Quote a Service" },
{ permission: "Support Desk" },
{ permission: "Profile" },
],
},
];
export const columns: ColumnDef<RoleData>[] = [
{
accessorKey: "role",
header: ({ column }: any) => {
return (
<div className="py-1.5">
<Button
className="text-[13px] px-0 text-[#5E6E82] dark:text-[#D8E2EF] whitespace-nowrap font-medium"
variant="ghost"
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
>
Role
<TbCaretUpDownFilled className="h-2.5 w-2.5 text-[#5E6E82] dark:text-[#D8E2EF]" />
</Button>
</div>
);
},
cell: ({ row }: any) => {
return (
<div className="text-[13px] px-0 text-[#5E6E82] dark:text-[#D8E2EF] py-2 flex gap-2 items-center whitespace-nowrap">
<span className=" px-3 py-2 text-[13px] border rounded-md">
{row.getValue("role")}
</span>
</div>
);
},
},
{
accessorKey: "permissions",
header: ({ column }: any) => {
return (
<div className="py-1.5">
<Button
className="text-[13px] px-0 text-[#5E6E82] dark:text-[#D8E2EF]"
variant="ghost"
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
>
Permissions
<TbCaretUpDownFilled className="h-2.5 w-2.5 text-[#5E6E82] dark:text-[#D8E2EF]" />
</Button>
</div>
);
},
cell: ({ row }: { row: any }) => {
const permissions = row.original.permissions as Permission[];
return (
<div className="text-[13px] px-0 text-[#5E6E82] dark:text-[#D8E2EF] py-2 flex gap-2 items-center whitespace-nowrap">
<span className=" px-3 py-2 text-[13px] border rounded-md">
{permissions.map((permission, index) => (
<span key={index}>
{permission.permission}
{index < permissions.length - 1 && ", "}
</span>
))}
</span>
</div>
);
},
},
{
accessorKey: "Action",
header: ({ column }) => {
return (
<div className="py-1.5 flex justify-end pr-6 md:pr-6">
<Button
className="text-[13px] px-0 text-[#5E6E82] dark:text-[#D8E2EF] text-right"
variant="ghost"
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
>
Action
<TbCaretUpDownFilled className="h-2.5 w-2.5 text-[#5E6E82] dark:text-[#D8E2EF]" />
</Button>
</div>
);
},
cell: () => {
const [isEditing, setIsEditing] = useState(false);
const [RoleName, setRoleName] = useState("John Doe");
const inputRef = useRef<HTMLInputElement>(null);
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setRoleName(event.target.value);
};
return (
<span
onClick={(event) => {
event.stopPropagation(); // Prevents row click event
}}
className={`rounded-md py-1 text-[11px] font-semibold flex justify-end px-4`}
>
<DropdownMenu>
<DropdownMenuTrigger className="outline-0 ring-0 text-[#5E6E82] dark:text-[#F5F7FA] ml-auto pr-4 md:pr-4 mb-auto">
<BsThreeDots
className="text-[#138CF7] dark:text-[#D8E2EF] "
size={16}
/>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem className="text-sm ">
<Sheet>
<SheetTrigger
onClick={(e) => {
e.stopPropagation();
}}
asChild
>
<button className="hover:dark:text-[#138CF7] hover:text-[#1062AB] flex items-center">
<FaEdit className="mr-2" /> Edit Role
</button>
</SheetTrigger>
<SheetContent
onClick={(e) => {
e.stopPropagation();
}}
>
<SheetHeader className="bg-[#F6F7FA] dark:bg-[#1F2A3B] px-6 py-4">
<div className="flex justify-between mr-5 items-center">
<div>
{isEditing ? (
<input
ref={inputRef}
type="text"
value={RoleName}
onChange={handleChange}
className="dark:bg-background bg-white rounded p-1 text-base md:text-[22px] font-semibold text-[#1062AB] dark:text-[#F6F7FA] border w-[220px] md:w-[300px]"
/>
) : (
<span
// onClick={handleNameClick}
className="cursor-pointer text-base md:text-[22px] font-semibold text-[#1062AB] dark:text-[#F6F7FA]"
>
{RoleName}
</span>
)}
</div>
<Button
variant="default"
onClick={() => setIsEditing(!isEditing)}
className="text-[13px] h-[35px] flex items-center gap-1.5 bg-[#1062AB]"
>
Update Role
</Button>
</div>
</SheetHeader>
<div
className="p-6"
// onClick={() => setIsEditing(!isEditing)}
>
<PermissonDrawer />
</div>
</SheetContent>
</Sheet>
</DropdownMenuItem>
<DropdownMenuItem className="text-xs">
<Dialog>
<DialogTrigger asChild>
<button
onClick={(e) => {
e.stopPropagation();
}}
className=" text-sm flex items-center gap-2 hover:text-[#C42F4A]"
>
<BsTrash />
Delete
</button>
</DialogTrigger>
<DialogContent className="md:max-w-lg">
<div className="">
<div className="bg-[#1062AB] dark:bg-[#138CF7] rounded-t-md p-4 md:p-6 flex justify-between items-center text-white">
<h1 className="text-base md:text-[19px] font-semibold leading-6">
Delete Role
</h1>
<DialogClose asChild>
<button type="button">
<FaXmark className="h-5 w-5" />
</button>
</DialogClose>
</div>
<div className="p-6">
<p>Are you sure you want to delete this Role?</p>
</div>
<div className="flex justify-end p-4 md:p-6">
<DialogClose asChild>
<Button
variant={"outline"}
className="text-[#1062AB] hover:text-[#1062AB] dark:text-[#F5F7FA] shadow px-7 h-[29px] "
>
Cancel
</Button>
</DialogClose>
<Button className="bg-[#E63757] dark:bg-[#FBDBE1] ml-2 text-[#fff] dark:text-[#E63757] shadow px-5 h-[29px] rounded">
Delete
</Button>
</div>
</div>
</DialogContent>
</Dialog>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</span>
);
},
},
];
export default function RoleTable() {
const navigate = useNavigate();
const [isDone, setisDone] = useState(false);
const [RoleName, setRoleName] = useState("");
const inputRef = useRef<HTMLInputElement>(null);
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setRoleName(event.target.value);
};
const [sorting, setSorting] = React.useState<SortingState>([]);
const [columnVisibility, setColumnVisibility] =
React.useState<VisibilityState>({});
const [pageSize, setPageSize] = React.useState(5);
const table = useReactTable({
data,
columns,
onSortingChange: setSorting,
getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(),
getSortedRowModel: getSortedRowModel(),
getFilteredRowModel: getFilteredRowModel(),
onColumnVisibilityChange: setColumnVisibility,
state: {
sorting,
columnVisibility,
},
});
// Update page size dynamically
React.useEffect(() => {
table.setPageSize(pageSize);
table.setPageIndex(0);
}, [pageSize, table]);
// Handle pagination
const pageCount = table.getPageCount();
const pageIndex = table.getState().pagination.pageIndex;
const handleRowClick = (rowId: string) => {
navigate(`/dashboard/permission/role/${rowId}`);
};
return (
<div className="border rounded-md mt-6 overflow-hidden">
<div className="px-5 py-4 flex justify-between flex-wrap items-center border-b dark:text-[#F5F7FA] bg-[#F5F7FA] dark:bg-[#232E3C]">
<div className="flex justify-between md:justify-start gap-2 items-center w-full md:w-1/2">
<h4 className="text-sm md:text-base font-semibold text-[#232E3C] dark:text-[#D9E7FA]">
Roles & Permissions ({data?.length})
</h4>
<div className="relative">
<Input
placeholder="Search by Role..."
value={
(table.getColumn("role")?.getFilterValue() as string) ?? ""
}
onChange={(event) =>
table.getColumn("role")?.setFilterValue(event.target.value)
}
className="lg:w-[270px] placeholder:text-[13px] font-light pl-3 bg-white dark:bg-background"
/>
<IoSearchOutline className="absolute top-1/2 -translate-y-1/2 right-4 " />
</div>
</div>
<Sheet>
<SheetTrigger
onClick={(e) => {
e.stopPropagation();
}}
asChild
>
<Button className="hover:dark:text-[#138CF7] hover:text-[#1062AB] flex items-center">
Add New Role
</Button>
</SheetTrigger>
<SheetContent
onClick={(e) => {
e.stopPropagation();
}}
>
<SheetHeader className="bg-[#F6F7FA] dark:bg-[#1F2A3B] px-6 py-4">
<div className="flex justify-between mr-5 items-center">
<div>
{isDone === false ? (
<input
ref={inputRef}
type="text"
value={RoleName}
placeholder="Enter role name"
onChange={handleChange}
className="dark:bg-background bg-white h-10 rounded pl-2
text-base md:text-[20px] font-semibold text-[#1062AB] dark:text-[#F6F7FA] border w-[220px] md:w-[300px]"
/>
) : (
<span
// onClick={handleNameClick}
className="cursor-pointer text-base md:text-[22px] font-semibold text-[#1062AB] dark:text-[#F6F7FA]"
>
{RoleName}
</span>
)}
</div>
<Button
variant="default"
onClick={() => setisDone(true)}
className="text-[13px] h-[35px] flex items-center gap-1.5 bg-[#1062AB]"
>
Add Role
</Button>
</div>
</SheetHeader>
<div className="p-6">
<PermissonDrawer />
</div>
</SheetContent>
</Sheet>
</div>
<div className="border-b">
<Table>
<TableHeader>
{table.getHeaderGroups().map((headerGroup) => (
<TableRow key={headerGroup.id}>
{headerGroup.headers.map((header) => {
return (
<TableHead key={header.id} className="pl-6">
{header.isPlaceholder
? null
: flexRender(
header.column.columnDef.header,
header.getContext()
)}
</TableHead>
);
})}
</TableRow>
))}
</TableHeader>
<TableBody>
{table.getRowModel().rows?.length ? (
table.getRowModel().rows.map((row) => (
<TableRow
key={row.id}
data-state={row.getIsSelected() && "selected"}
onClick={() => handleRowClick(row.original?.role_id)}
className="cursor-pointer"
>
{row.getVisibleCells().map((cell) => (
<TableCell key={cell.id} className="pl-6">
{flexRender(
cell.column.columnDef.cell,
cell.getContext()
)}
</TableCell>
))}
</TableRow>
))
) : (
<TableRow>
<TableCell
colSpan={columns.length}
className="h-24 text-center"
>
No results.
</TableCell>
</TableRow>
)}
</TableBody>
</Table>
</div>
<div className="flex items-center flex-wrap justify-center md:justify-between md:space-x-2 py-4 px-6">
<div className="flex gap-4 items-center mb-4 md:mb-0">
<div className="flex items-center space-x-2">
<span className="text-sm whitespace-nowrap text-[#5E6E82] dark:text-[#F5F7FA]">
Rows per page:
</span>
<Select onValueChange={(value) => setPageSize(Number(value))}>
<SelectTrigger>
<SelectValue placeholder={`${pageSize}`} />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectLabel className="text-[#5E6E82] dark:text-[#F5F7FA]">
Rows per page
</SelectLabel>
{[5, 10, 15].map((size) => (
<SelectItem key={size} value={String(size)}>
<span className="text-[#5E6E82] dark:text-[#F5F7FA]">
{" "}
{size}
</span>
</SelectItem>
))}
</SelectGroup>
</SelectContent>
</Select>
</div>
<div className="md:space-x-2 flex items-center">
<span className="text-sm whitespace-nowrap text-[#5E6E82] dark:text-[#F5F7FA]">
Page {table.getState().pagination.pageIndex + 1} of{" "}
{table.getPageCount()}
</span>
</div>
</div>
<div>
<Pagination>
<PaginationContent>
<PaginationItem>
<Button
variant="outline"
size="icon"
onClick={() => table.previousPage()}
disabled={!table.getCanPreviousPage()}
>
<ChevronLeftIcon className="h-4 w-4" />
</Button>
</PaginationItem>
{[...Array(pageCount)].map((_, index) => (
<PaginationItem key={index}>
<PaginationLink
className={`${
pageIndex === index
? "border rounded-md border-[#1062AB] text-[#1062AB]"
: "text-[#5E6E82] dark:text-[#F5F7FA]"
}`}
href="#"
isActive={index === pageIndex}
onClick={() => table.setPageIndex(index)}
>
{index + 1}
</PaginationLink>
</PaginationItem>
))}
<PaginationItem>
<Button
variant="outline"
size="icon"
onClick={() => table.nextPage()}
disabled={!table.getCanNextPage()}
>
<ChevronRightIcon className="h-4 w-4" />
</Button>
</PaginationItem>
</PaginationContent>
</Pagination>
</div>
</div>
</div>
);
}