feat: add organizations table

src/app/(dashboard)/dashboard/organizations/page.tsx

@@ -0,0 +1,21 @@
+import Breadcrumb from "@/components/breadcrumb";
+import ToolsTable from "@/components/organizations-table/tools-table";
+import { dummyOrganizations, dummyUsers } from "@/constants/data";
+import { Organization } from "@/types/organization";
+import { User } from "@/types/user";
+import React from "react";
+
+const breadcrumbItems = [
+  { title: "Dashboard", link: "#" },
+  { title: "Organizations" },
+];
+const Page = () => {
+  return (
+    <div className="flex-1 space-y-4  p-4 md:p-8 pt-6">
+      <Breadcrumb items={breadcrumbItems} />
+      <ToolsTable organizations={dummyOrganizations as Organization[]} />
+    </div>
+  );
+};
+
+export default Page;

src/app/(dashboard)/dashboard/users/page.tsx

@@ -1,5 +1,5 @@
 import Breadcrumb from '@/components/breadcrumb';
-import ToolsTable from '@/components/users/users-table/tools-table'
+import ToolsTable from '@/components/users-table/tools-table'
 import { dummyUsers } from '@/constants/data'
 import { User } from '@/types/user'
 import React from 'react'

src/components/mobile-sidebar-nav.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/components/ui/sheet";
+
+import { AlignJustify } from "lucide-react";
+import { useParams, usePathname } from "next/navigation";
+import { Separator } from "@/components/ui/separator";
+import { Icons } from "./icons";
+import { ExpandedItem } from "./sidebar-nav";
+import { Fragment } from "react";
+import { sideNavItems } from "@/config/nav";
+import { siteConfig } from "@/config/site";
+import { buttonVariants } from "./ui/button";
+import { ScrollArea, ScrollBar } from "./ui/scroll-area";
+
+export default function MobileSidebarNav() {
+  const params = useParams<{ workspaceId: string }>();
+  const path = usePathname();
+
+  const pathname = path.replace(`/${params.workspaceId}`, "") || "/";
+  const [_, currentPath] = pathname.split("/");
+
+  return (
+    <div className="flex lg:hidden">
+      <Sheet>
+        <SheetTrigger
+          className={buttonVariants({ variant: "outline", size: "icon" })}
+        >
+          <AlignJustify />
+        </SheetTrigger>
+        <SheetContent side={"left"} className="p-0">
+          <ScrollArea className="h-screen border p-4">
+            <SheetHeader>
+              <SheetTitle className="flex items-center space-x-2">
+                <Icons.logo />
+                <span className="inline-block font-urban text-xl font-bold">
+                  {siteConfig.name}
+                </span>
+              </SheetTitle>
+              <Separator className="mb-2 mt-2" />
+            </SheetHeader>
+
+            {sideNavItems.map((group, i) => {
+              return (
+                <Fragment key={i}>
+                  {/* <Separator className="mb-2 mt-2" /> */}
+                  <h4 className="rounded-md px-2 mt-2 text-sm font-semibold">
+                    {group.group}
+                  </h4>
+                  <div className="flex flex-col gap-1 p-2" key={group.group}>
+                    {group.items.map((link, idx) => {
+                      return (
+                        <ExpandedItem
+                          key={link.href + idx}
+                          item={link}
+                          currentPath={"/" + currentPath}
+                        />
+                      );
+                    })}
+                  </div>
+                </Fragment>
+              );
+            })}
+            <ScrollBar orientation="vertical" />
+          </ScrollArea>
+        </SheetContent>
+      </Sheet>
+    </div>
+  );
+}

src/components/organizations-table/cell-action.tsx

@@ -0,0 +1,69 @@
+"use client";
+import { AlertModal } from "@/components/alert-modal";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { useToast } from "@/components/ui/use-toast";
+import { Organization } from "@/types/organization";
+import { User } from "@/types/user";
+
+import { BookCheck, Edit, MoreHorizontal, Trash } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+interface CellActionProps {
+  data: Organization;
+}
+
+export const CellAction: React.FC<CellActionProps> = ({ data }) => {
+  const [loading, setLoading] = useState(false);
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+  const router = useRouter();
+  const { toast } = useToast();
+
+  const onDeleteConfirm = async () => {};
+
+  const handleUpdateStatus = async () => {};
+
+  return (
+    <>
+      <AlertModal
+        isOpen={isDeleteModalOpen}
+        onClose={() => setIsDeleteModalOpen(false)}
+        onConfirm={onDeleteConfirm}
+        loading={loading}
+      />
+      <DropdownMenu modal={false}>
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost" className="h-8 w-8 p-0">
+            <span className="sr-only">Open menu</span>
+            <MoreHorizontal className="h-4 w-4" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          <DropdownMenuLabel>Actions</DropdownMenuLabel>
+
+          <DropdownMenuItem
+            className="cursor-pointer"
+            // onClick={() =>
+            //   router.push(`#`)
+            // }
+          >
+            <Edit className="mr-2 h-4 w-4" /> Update
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            className="cursor-pointer"
+            onClick={() => setIsDeleteModalOpen(true)}
+          >
+            <Trash className="mr-2 h-4 w-4" /> Delete
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </>
+  );
+};

src/components/organizations-table/columns.tsx

@@ -0,0 +1,205 @@
+"use client";
+import { DataTableColumnHeader } from "./data-table-column-header";
+import { CellAction } from "./cell-action";
+
+import { ColumnDef } from "@tanstack/react-table";
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "@/components/ui/hover-card";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Organization } from "@/types/organization";
+import { formatDate } from "@/lib/format-date";
+
+export const columns: ColumnDef<Organization>[] = [
+  {
+    id: "select",
+    header: ({ table }) => (
+      <Checkbox
+        checked={
+          table.getIsAllPageRowsSelected() ||
+          (table.getIsSomePageRowsSelected() && "indeterminate")
+        }
+        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+        aria-label="Select all"
+        className="translate-y-[2px]"
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        onCheckedChange={(value) => row.toggleSelected(!!value)}
+        aria-label="Select row"
+        className="translate-y-[2px]"
+      />
+    ),
+    enableSorting: false,
+    enableHiding: false,
+  },
+
+  {
+    accessorKey: "name",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="NAME" />
+    ),
+    cell: ({ row }) => {
+      return (
+        <div className="w-fit">
+          <HoverCard>
+            <HoverCardTrigger>
+              {/* <p className="max-w-[100px] truncate font-medium">
+              {row.getValue("email")}
+            </p> */}
+              <p>{row.getValue("name")}</p>
+            </HoverCardTrigger>
+            <HoverCardContent>
+              {/* <ScrollArea className="w-64 p-4"> */}
+              {row.getValue("name")}
+              {/* <ScrollBar orientation="horizontal" /> */}
+              {/* </ScrollArea> */}
+            </HoverCardContent>
+          </HoverCard>
+        </div>
+      );
+    },
+  },
+  {
+    accessorKey: "industry",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="INDUSTRY" />
+    ),
+    cell: ({ row }) => {
+      return (
+        <div className="w-fit">
+          <HoverCard>
+            <HoverCardTrigger>
+              <p className="max-w-[100px] truncate font-medium">
+                {row.getValue("industry")}
+              </p>
+            </HoverCardTrigger>
+            <HoverCardContent
+            // className="p-0"
+            >
+              {/* <ScrollArea className="w-64 p-4"> */}
+              {row.getValue("industry")}
+              {/* <ScrollBar orientation="horizontal" /> */}
+              {/* </ScrollArea> */}
+            </HoverCardContent>
+          </HoverCard>
+        </div>
+      );
+    },
+    filterFn: (row, id, value) => {
+      return value.includes(row.getValue(id));
+    },
+  },
+  {
+    accessorKey: "contactPerson",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="CONTACT PERSON" />
+    ),
+    cell: ({ row }) => {
+      return (
+        <div className="w-fit">
+          <HoverCard>
+            <HoverCardTrigger>
+              <p>{row.getValue("contactPerson")}</p>
+              {/* <p className="max-w-[100px] truncate font-medium">
+                {row.getValue("contactPerson")}
+              </p> */}
+            </HoverCardTrigger>
+            <HoverCardContent
+            // className="p-0"
+            >
+              {/* <ScrollArea className="w-64 p-4"> */}
+              {row.getValue("contactPerson")}
+              {/* <ScrollBar orientation="horizontal" /> */}
+              {/* </ScrollArea> */}
+            </HoverCardContent>
+          </HoverCard>
+        </div>
+      );
+    },
+  },
+  {
+    accessorKey: "email",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="EMAIL" />
+    ),
+    cell: ({ row }) => {
+      return (
+        <div className="w-fit">
+          <HoverCard>
+            <HoverCardTrigger>
+              <p>{row.getValue("email")}</p>
+              {/* <p className="max-w-[100px] truncate font-medium">
+                {row.getValue("email")}
+              </p> */}
+            </HoverCardTrigger>
+            <HoverCardContent
+            // className="p-0"
+            >
+              {/* <ScrollArea className="w-64 p-4"> */}
+              {row.getValue("email")}
+              {/* <ScrollBar orientation="horizontal" /> */}
+              {/* </ScrollArea> */}
+            </HoverCardContent>
+          </HoverCard>
+        </div>
+      );
+    },
+  },
+  {
+    accessorKey: "phone",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="PHONE" />
+    ),
+    cell: ({ row }) => {
+      return (
+        <div className="w-fit">
+          <HoverCard>
+            <HoverCardTrigger>
+              <p>{row.getValue("phone")}</p>
+              {/* <p className="max-w-[100px] truncate font-medium">
+                {row.getValue("phone")}
+              </p> */}
+            </HoverCardTrigger>
+            <HoverCardContent
+            // className="p-0"
+            >
+              {/* <ScrollArea className="w-64 p-4"> */}
+              {row.getValue("phone")}
+              {/* <ScrollBar orientation="horizontal" /> */}
+              {/* </ScrollArea> */}
+            </HoverCardContent>
+          </HoverCard>
+        </div>
+      );
+    },
+    filterFn: (row, id, value) => {
+      return value.includes(row.getValue(id));
+    },
+  },
+
+  {
+    accessorKey: "created_at",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="CREATED AT" />
+    ),
+    cell: ({ row }) => {
+      return <p className="w-fit">{formatDate(row.getValue("created_at"))}</p>;
+    },
+    filterFn: (row, id, value) => {
+      return value.includes(row.getValue(id));
+    },
+  },
+
+  {
+    id: "actions",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="ACTIONS" />
+    ),
+    cell: ({ row }) => <CellAction data={row.original} />,
+  },
+];

src/components/organizations-table/data-table-toolbar.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import { Cross2Icon } from "@radix-ui/react-icons";
+import { Table } from "@tanstack/react-table";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+// import { DataTableViewOptions } from "./components/data-table-view-options"
+
+import { DataTableFacetedFilter } from "./data-table-faceted-filter";
+import { DataTableViewOptions } from "./data-table-view-options";
+import { userFilterLabels } from "@/constants/data";
+import { Organization } from "@/types/organization";
+
+interface DataTableToolbarProps<TData> {
+  table: Table<TData>;
+  data: Organization[];
+}
+
+export function DataTableToolbar<TData>({
+  table,
+  data,
+}: DataTableToolbarProps<TData>) {
+  const isFiltered = table.getState().columnFilters.length > 0;
+
+  const industryFilterOptions = Array.from(
+    new Set(data.map((d) => d.industry.toLocaleLowerCase()))
+  ).map((v) => ({
+    label: v.slice(0, 1).toLocaleUpperCase() + v.slice(1),
+    value: v.slice(0, 1).toLocaleUpperCase() + v.slice(1),
+  }));
+
+  return (
+    <div className="flex items-center justify-between">
+      <div className="flex flex-1 items-center gap-2 flex-wrap">
+        <Input
+          placeholder="Search name..."
+          value={(table.getColumn("name")?.getFilterValue() as string) ?? ""}
+          onChange={(event: any) =>
+            table.getColumn("name")?.setFilterValue(event.target.value)
+          }
+          className="h-8 w-[150px] lg:w-[250px]"
+        />
+        <Input
+          placeholder="Search contact person..."
+          value={
+            (table.getColumn("contactPerson")?.getFilterValue() as string) ?? ""
+          }
+          onChange={(event: any) =>
+            table.getColumn("contactPerson")?.setFilterValue(event.target.value)
+          }
+          className="h-8 w-[150px] lg:w-[250px]"
+        />
+
+        <Input
+          placeholder="Search email..."
+          value={(table.getColumn("email")?.getFilterValue() as string) ?? ""}
+          onChange={(event: any) =>
+            table.getColumn("email")?.setFilterValue(event.target.value)
+          }
+          className="h-8 w-[150px] lg:w-[250px]"
+        />
+
+        {table.getColumn("industry") && (
+          <DataTableFacetedFilter
+            column={table.getColumn("industry")}
+            title="Industry"
+            options={industryFilterOptions}
+          />
+        )}
+
+        {isFiltered && (
+          <Button
+            variant="ghost"
+            onClick={() => table.resetColumnFilters()}
+            className="h-8 px-2 lg:px-3"
+          >
+            Reset
+            <Cross2Icon className="ml-2 h-4 w-4" />
+          </Button>
+        )}
+      </div>
+      <DataTableViewOptions table={table} />
+    </div>
+  );
+}

src/components/organizations-table/data-table.tsx

@@ -0,0 +1,131 @@
+"use client";
+
+import * as React from "react";
+import {
+  ColumnDef,
+  ColumnFiltersState,
+  SortingState,
+  VisibilityState,
+  flexRender,
+  getCoreRowModel,
+  getFacetedRowModel,
+  getFacetedUniqueValues,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+
+import { DataTablePagination } from "./data-table-pagination";
+import { DataTableToolbar } from "./data-table-toolbar";
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
+import { Organization } from "@/types/organization";
+
+interface DataTableProps<TData, TValue> {
+  columns: ColumnDef<TData, TValue>[];
+  data: TData[];
+}
+
+export function DataTable<TData, TValue>({
+  columns,
+  data,
+}: DataTableProps<TData, TValue>) {
+  const [rowSelection, setRowSelection] = React.useState({});
+  const [columnVisibility, setColumnVisibility] =
+    React.useState<VisibilityState>({});
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
+    []
+  );
+  const [sorting, setSorting] = React.useState<SortingState>([]);
+
+  const table = useReactTable({
+    data,
+    columns,
+    state: {
+      sorting,
+      columnVisibility,
+      rowSelection,
+      columnFilters,
+    },
+    enableRowSelection: true,
+    onRowSelectionChange: setRowSelection,
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    onColumnVisibilityChange: setColumnVisibility,
+    getCoreRowModel: getCoreRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFacetedRowModel: getFacetedRowModel(),
+    getFacetedUniqueValues: getFacetedUniqueValues(),
+  });
+
+  return (
+    <div className="space-y-4">
+      <DataTableToolbar table={table} data={data as Organization[]} />
+      {/* <div className="rounded-md border"> */}
+      <ScrollArea className="rounded-md border h-[66vh]">
+        <Table>
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => {
+                  return (
+                    <TableHead key={header.id} colSpan={header.colSpan}>
+                      {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"}
+                >
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell key={cell.id}>
+                      {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>
+        <ScrollBar orientation="horizontal" />
+      </ScrollArea>
+      {/* </div> */}
+      <DataTablePagination table={table} />
+    </div>
+  );
+}

src/components/organizations-table/tools-table.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import { Heading } from "@/components/ui/heading";
+import { Separator } from "@/components/ui/separator";
+import React from "react";
+import { DataTable } from "./data-table";
+import { columns } from "./columns";
+import { User } from "@/types/user";
+import Link from "next/link";
+import { Plus } from "lucide-react";
+import { buttonVariants } from "@/components/ui/button";
+import { Organization } from "@/types/organization";
+
+const ToolsTable = ({ organizations }: { organizations: Organization[] }) => {
+  return (
+    <>
+      <div className="flex items-start justify-between">
+        <Heading
+          title={`Organizations (${organizations.length})`}
+          description="Manage Organizations"
+        />
+        <Link
+          href="#"
+          className={buttonVariants({
+            variant: "default",
+            // size: "sm",
+          })}
+          // className="text-xs md:text-sm"
+          // onClick={() => router.push(`/admin-dashboard/tools/add`)}
+        >
+          <Plus className="mr-2 h-4 w-4" /> Add Organization
+        </Link>
+      </div>
+      <Separator />
+      <DataTable data={organizations} columns={columns} />
+      {/* <DataTable data={tasks} columns={columns} /> */}
+    </>
+  );
+};
+
+export default ToolsTable;

src/components/top-nav.tsx

@@ -1,14 +1,16 @@
 import { UserNav } from "@/components/user-nav";
-import HamburgerMenu from "./hamburger-menu";
+// import HamburgerMenu from "./hamburger-menu";
 import { ThemeToggle } from "./theme-toggle";
-import { NavItem } from "@/config/nav";
+// import { NavItem } from "@/config/nav";
 import { siteConfig } from "@/config/site";
+import MobileSidebarNav from "./mobile-sidebar-nav";
 
 export const TopNav = () => {
   return (
     <nav className="flex h-[52px] items-center justify-between py-4 px-6 border-b">
       <div>
-        <HamburgerMenu />
+        {/* <HamburgerMenu /> */}
+        <MobileSidebarNav />
         <h1 className="font-cal hidden text-xl font-semibold capitalize leading-none lg:inline ml-4">
           {siteConfig.name}
         </h1>

src/components/users-table/columns.tsx

@@ -1,10 +1,5 @@
 "use client";
-import Image from "next/image";
 import { DataTableColumnHeader } from "./data-table-column-header";
-import { Badge } from "@/components/ui/badge";
-import { Button, buttonVariants } from "@/components/ui/button";
-import { ExternalLink } from "lucide-react";
-import Link from "next/link";
 import { CellAction } from "./cell-action";
 
 import { ColumnDef } from "@tanstack/react-table";
@@ -13,10 +8,9 @@ import {
   HoverCardContent,
   HoverCardTrigger,
 } from "@/components/ui/hover-card";
-import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
-import { formatDate } from "date-fns";
 import { User } from "@/types/user";
 import { Checkbox } from "@/components/ui/checkbox";
+import { formatDate } from "@/lib/format-date";
 
 export const columns: ColumnDef<User>[] = [
   {
@@ -133,6 +127,18 @@ export const columns: ColumnDef<User>[] = [
       return value.includes(row.getValue(id));
     },
   },
+  {
+    accessorKey: "created_at",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="CREATED AT" />
+    ),
+    cell: ({ row }) => {
+      return <p className="w-fit">{formatDate(row.getValue("created_at"))}</p>;
+    },
+    filterFn: (row, id, value) => {
+      return value.includes(row.getValue(id));
+    },
+  },
 
   {
     id: "actions",

src/components/users-table/data-table-column-header.tsx

@@ -0,0 +1,72 @@
+import {
+    ArrowDownIcon,
+    ArrowUpIcon,
+    CaretSortIcon,
+    EyeNoneIcon,
+  } from "@radix-ui/react-icons"
+  import { Column } from "@tanstack/react-table"
+  
+  import { cn } from "@/lib/utils"
+  import { Button } from "@/components/ui/button"
+  import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuSeparator,
+    DropdownMenuTrigger,
+  } from "@/components/ui/dropdown-menu"
+  
+  interface DataTableColumnHeaderProps<TData, TValue>
+    extends React.HTMLAttributes<HTMLDivElement> {
+    column: Column<TData, TValue>
+    title: string
+  }
+  
+  export function DataTableColumnHeader<TData, TValue>({
+    column,
+    title,
+    className,
+  }: DataTableColumnHeaderProps<TData, TValue>) {
+    if (!column.getCanSort()) {
+      return <div className={cn(className)}>{title}</div>
+    }
+
+  
+    return (
+      <div className={cn("flex items-center space-x-2", className)}>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              variant="ghost"
+              size="sm"
+              className="-ml-3 h-8 data-[state=open]:bg-accent"
+            >
+              <span>{title}</span>
+              {column.getIsSorted() === "desc" ? (
+                <ArrowDownIcon className="ml-2 h-4 w-4" />
+              ) : column.getIsSorted() === "asc" ? (
+                <ArrowUpIcon className="ml-2 h-4 w-4" />
+              ) : (
+                <CaretSortIcon className="ml-2 h-4 w-4" />
+              )}
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="start">
+            <DropdownMenuItem onClick={() => column.toggleSorting(false)}>
+              <ArrowUpIcon className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
+              Asc
+            </DropdownMenuItem>
+            <DropdownMenuItem onClick={() => column.toggleSorting(true)}>
+              <ArrowDownIcon className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
+              Desc
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem onClick={() => column.toggleVisibility(false)}>
+              <EyeNoneIcon className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
+              Hide
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    )
+  }

src/components/users-table/data-table-faceted-filter.tsx

@@ -0,0 +1,147 @@
+import * as React from "react"
+import { CheckIcon, PlusCircledIcon } from "@radix-ui/react-icons"
+import { Column } from "@tanstack/react-table"
+
+import { cn } from "@/lib/utils"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from "@/components/ui/command"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover"
+import { Separator } from "@/components/ui/separator"
+
+interface DataTableFacetedFilterProps<TData, TValue> {
+  column?: Column<TData, TValue>
+  title?: string
+  options: {
+    label: string
+    value: string
+    icon?: React.ComponentType<{ className?: string }>
+  }[]
+}
+
+export function DataTableFacetedFilter<TData, TValue>({
+  column,
+  title,
+  options,
+}: DataTableFacetedFilterProps<TData, TValue>) {
+  const facets = column?.getFacetedUniqueValues()
+  const selectedValues = new Set(column?.getFilterValue() as string[])
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button variant="outline" size="sm" className="h-8 border-dashed">
+          <PlusCircledIcon className="mr-2 h-4 w-4" />
+          {title}
+          {selectedValues?.size > 0 && (
+            <>
+              <Separator orientation="vertical" className="mx-2 h-4" />
+              <Badge
+                variant="secondary"
+                className="rounded-sm px-1 font-normal lg:hidden"
+              >
+                {selectedValues.size}
+              </Badge>
+              <div className="hidden space-x-1 lg:flex">
+                {selectedValues.size > 2 ? (
+                  <Badge
+                    variant="secondary"
+                    className="rounded-sm px-1 font-normal"
+                  >
+                    {selectedValues.size} selected
+                  </Badge>
+                ) : (
+                  options
+                    .filter((option) => selectedValues.has(option.value))
+                    .map((option) => (
+                      <Badge
+                        variant="secondary"
+                        key={option.value}
+                        className="rounded-sm px-1 font-normal"
+                      >
+                        {option.label}
+                      </Badge>
+                    ))
+                )}
+              </div>
+            </>
+          )}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[200px] p-0" align="start">
+        <Command>
+          <CommandInput placeholder={title} />
+          <CommandList>
+            <CommandEmpty>No results found.</CommandEmpty>
+            <CommandGroup>
+              {options.map((option) => {
+                const isSelected = selectedValues.has(option.value)
+                return (
+                  <CommandItem
+                    key={option.value}
+                    onSelect={() => {
+                      if (isSelected) {
+                        selectedValues.delete(option.value)
+                      } else {
+                        selectedValues.add(option.value)
+                      }
+                      const filterValues = Array.from(selectedValues)
+                      column?.setFilterValue(
+                        filterValues.length ? filterValues : undefined
+                      )
+                    }}
+                  >
+                    <div
+                      className={cn(
+                        "mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary",
+                        isSelected
+                          ? "bg-primary text-primary-foreground"
+                          : "opacity-50 [&_svg]:invisible"
+                      )}
+                    >
+                      <CheckIcon className={cn("h-4 w-4")} />
+                    </div>
+                    {option.icon && (
+                      <option.icon className="mr-2 h-4 w-4 text-muted-foreground" />
+                    )}
+                    <span>{option.label}</span>
+                    {facets?.get(option.value) && (
+                      <span className="ml-auto flex h-4 w-4 items-center justify-center font-mono text-xs">
+                        {facets.get(option.value)}
+                      </span>
+                    )}
+                  </CommandItem>
+                )
+              })}
+            </CommandGroup>
+            {selectedValues.size > 0 && (
+              <>
+                <CommandSeparator />
+                <CommandGroup>
+                  <CommandItem
+                    onSelect={() => column?.setFilterValue(undefined)}
+                    className="justify-center text-center"
+                  >
+                    Clear filters
+                  </CommandItem>
+                </CommandGroup>
+              </>
+            )}
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  )
+}

src/components/users-table/data-table-pagination.tsx

@@ -0,0 +1,97 @@
+import {
+    ChevronLeftIcon,
+    ChevronRightIcon,
+    DoubleArrowLeftIcon,
+    DoubleArrowRightIcon,
+  } from "@radix-ui/react-icons"
+  import { Table } from "@tanstack/react-table"
+  
+  import { Button } from "@/components/ui/button"
+  import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+  } from "@/components/ui/select"
+  
+  interface DataTablePaginationProps<TData> {
+    table: Table<TData>
+  }
+  
+  export function DataTablePagination<TData>({
+    table,
+  }: DataTablePaginationProps<TData>) {
+    return (
+      <div className="flex items-center justify-between px-2">
+        <div className="flex-1 text-sm text-muted-foreground">
+          {table.getFilteredSelectedRowModel().rows.length} of{" "}
+          {table.getFilteredRowModel().rows.length} row(s) selected.
+        </div>
+        <div className="flex items-center space-x-6 lg:space-x-8">
+          <div className="flex items-center space-x-2">
+            <p className="text-sm font-medium hidden md:block">Rows per page</p>
+            <Select
+              value={`${table.getState().pagination.pageSize}`}
+              onValueChange={(value) => {
+                table.setPageSize(Number(value))
+              }}
+            >
+              <SelectTrigger className="h-8 w-[70px]">
+                <SelectValue placeholder={table.getState().pagination.pageSize} />
+              </SelectTrigger>
+              <SelectContent side="top">
+                {[10, 20, 30, 40, 50].map((pageSize) => (
+                  <SelectItem key={pageSize} value={`${pageSize}`}>
+                    {pageSize}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="flex w-[100px] items-center justify-center text-sm font-medium">
+            Page {table.getState().pagination.pageIndex + 1} of{" "}
+            {table.getPageCount()}
+          </div>
+          <div className="flex items-center space-x-2">
+            <Button
+              variant="outline"
+              className="hidden h-8 w-8 p-0 lg:flex"
+              onClick={() => table.setPageIndex(0)}
+              disabled={!table.getCanPreviousPage()}
+            >
+              <span className="sr-only">Go to first page</span>
+              <DoubleArrowLeftIcon className="h-4 w-4" />
+            </Button>
+            <Button
+              variant="outline"
+              className="h-8 w-8 p-0"
+              onClick={() => table.previousPage()}
+              disabled={!table.getCanPreviousPage()}
+            >
+              <span className="sr-only">Go to previous page</span>
+              <ChevronLeftIcon className="h-4 w-4" />
+            </Button>
+            <Button
+              variant="outline"
+              className="h-8 w-8 p-0"
+              onClick={() => table.nextPage()}
+              disabled={!table.getCanNextPage()}
+            >
+              <span className="sr-only">Go to next page</span>
+              <ChevronRightIcon className="h-4 w-4" />
+            </Button>
+            <Button
+              variant="outline"
+              className="hidden h-8 w-8 p-0 lg:flex"
+              onClick={() => table.setPageIndex(table.getPageCount() - 1)}
+              disabled={!table.getCanNextPage()}
+            >
+              <span className="sr-only">Go to last page</span>
+              <DoubleArrowRightIcon className="h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+      </div>
+    )
+  }

src/components/users-table/data-table-toolbar.tsx

@@ -10,16 +10,28 @@ import { Input } from "@/components/ui/input";
 import { DataTableFacetedFilter } from "./data-table-faceted-filter";
 import { DataTableViewOptions } from "./data-table-view-options";
 import { userFilterLabels } from "@/constants/data";
+import { User } from "@/types/user";
 
 interface DataTableToolbarProps<TData> {
   table: Table<TData>;
+  data: User[];
 }
 
 export function DataTableToolbar<TData>({
   table,
+  data,
 }: DataTableToolbarProps<TData>) {
   const isFiltered = table.getState().columnFilters.length > 0;
 
+  const roleFilterOptions = Array.from(
+    new Set(data.map((d) => d.role.toLocaleLowerCase()))
+  ).map((v) => ({
+    label: v.toLocaleUpperCase(),
+    value: v.toLocaleUpperCase(),
+  }));
+
+  console.log(roleFilterOptions);
+
   return (
     <div className="flex items-center justify-between">
       <div className="flex flex-1 items-center gap-2 flex-wrap">
@@ -45,17 +57,10 @@ export function DataTableToolbar<TData>({
           <DataTableFacetedFilter
             column={table.getColumn("role")}
             title="Role"
-            options={userFilterLabels}
+            options={roleFilterOptions}
           />
         )}
-        {/* 
+
-        {table.getColumn("pricing_model") && (
-          <DataTableFacetedFilter
-            column={table.getColumn("pricing_model")}
-            title="Pricing Model"
-            options={pricingModel}
-          />
-        )} */}
         {isFiltered && (
           <Button
             variant="ghost"

src/components/users-table/data-table-view-options.tsx

@@ -0,0 +1,59 @@
+"use client"
+
+import { DropdownMenuTrigger } from "@radix-ui/react-dropdown-menu"
+import { MixerHorizontalIcon } from "@radix-ui/react-icons"
+import { Table } from "@tanstack/react-table"
+
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+} from "@/components/ui/dropdown-menu"
+
+interface DataTableViewOptionsProps<TData> {
+  table: Table<TData>
+}
+
+export function DataTableViewOptions<TData>({
+  table,
+}: DataTableViewOptionsProps<TData>) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="outline"
+          size="sm"
+          className="ml-auto hidden h-8 lg:flex"
+        >
+          <MixerHorizontalIcon className="mr-2 h-4 w-4" />
+          View
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-[150px]">
+        <DropdownMenuLabel>Toggle columns</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        {table
+          .getAllColumns()
+          .filter(
+            (column) =>
+              typeof column.accessorFn !== "undefined" && column.getCanHide()
+          )
+          .map((column) => {
+            return (
+              <DropdownMenuCheckboxItem
+                key={column.id}
+                className="capitalize"
+                checked={column.getIsVisible()}
+                onCheckedChange={(value) => column.toggleVisibility(!!value)}
+              >
+                {column.id}
+              </DropdownMenuCheckboxItem>
+            )
+          })}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

src/components/users-table/data-table.tsx

@@ -28,6 +28,7 @@ import {
 import { DataTablePagination } from "./data-table-pagination"
 import { DataTableToolbar } from "./data-table-toolbar"
 import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"
+import { User } from "@/types/user"
 
 interface DataTableProps<TData, TValue> {
   columns: ColumnDef<TData, TValue>[]
@@ -70,7 +71,7 @@ export function DataTable<TData, TValue>({
 
   return (
     <div className="space-y-4">
-      <DataTableToolbar table={table} />
+      <DataTableToolbar table={table} data={data as User[]} />
       {/* <div className="rounded-md border"> */}
       <ScrollArea className="rounded-md border h-[66vh]">
         <Table>

src/config/nav.ts

@@ -50,8 +50,8 @@ export const sideNavItems: GroupedNavItems[] = [
     group: "COURSE",
     items: [
       {
-        href: "/dashboard/course",
+        href: "/dashboard/courses",
-        title: "Your Course",
+        title: "Your Courses",
         icon: BookText,
       },
     ],
@@ -65,13 +65,13 @@ export const sideNavItems: GroupedNavItems[] = [
         icon: Users,
       },
       {
-        href: "/dashboard/organization",
+        href: "/dashboard/organizations",
-        title: "Organization",
+        title: "Organizations",
         icon: Building,
       },
       {
-        href: "/dashboard/account",
+        href: "/dashboard/accounts",
-        title: "Account",
+        title: "Accounts",
         icon: CircleUser,
       },
       {
@@ -80,8 +80,8 @@ export const sideNavItems: GroupedNavItems[] = [
         icon: Bolt,
       },
       {
-        href: "/dashboard/configuration",
+        href: "/dashboard/configurations",
-        title: "Configuration",
+        title: "Configurations",
         icon: Wrench,
       },
       {

src/constants/data.ts

@@ -1,3 +1,4 @@
+import { Organization } from "@/types/organization";
 import { User } from "@/types/user";
 import { UserRound, UserRoundCheck } from "lucide-react";
 
@@ -7,18 +8,21 @@ export const dummyUsers: User[] = [
     email: "john@gmail.com",
     fullName: "John Doe",
     role: "ADMIN",
+    created_at: new Date().toISOString(),
   },
   {
     id: 2,
     email: "linustorvalds@gmail.com",
     fullName: "Linus Torvalds",
     role: "USER",
+    created_at: new Date().toISOString(),
   },
   {
     id: 3,
     email: "ryandahl@gmail.com",
     fullName: "Ryan Dahl",
     role: "ADMIN",
+    created_at: new Date().toISOString(),
   },
 ];
 
@@ -34,3 +38,33 @@ export const userFilterLabels = [
     icon: UserRound,
   },
 ];
+
+export const dummyOrganizations: Organization[] = [
+  {
+    id: 1,
+    name: "XYZ Tech Inc.",
+    industry: "Technology",
+    contactPerson: "John Smith",
+    email: "john@gmail.com",
+    phone: "+1234567890",
+    created_at: new Date().toISOString(),
+  },
+  {
+    id: 2,
+    name: "ABC Solutions",
+    industry: "Finance",
+    contactPerson: "Sarah Johnson",
+    email: "sarah@example.com",
+    phone: "+1987654321",
+    created_at: new Date().toISOString(),
+  },
+  {
+    id: 3,
+    name: "Acme Corporation",
+    industry: "Manufacturing",
+    contactPerson: "Michael Brown",
+    email: "michael@example.com",
+    phone: "+1122334455",
+    created_at: new Date().toISOString(),
+  },
+];

src/types/organization.ts

@@ -0,0 +1,9 @@
+export interface Organization {
+  id: number;
+  name: string;
+  industry: string;
+  contactPerson: string;
+  email: string;
+  phone: string;
+  created_at: string;
+}

src/types/user.ts

@@ -2,5 +2,6 @@ export interface User {
     id: number;
     email: string;
     fullName: string;
-    role: string
+    role: string;
+    created_at: string;
 }