feat: add organizations table

This commit is contained in:
mehedi-hasan 2024-04-13 18:23:00 +06:00
parent dad01cd7a8
commit b9b6a5bc24
26 changed files with 1092 additions and 30 deletions

View File

@ -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;

View File

@ -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'

View File

@ -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>
);
}

View File

@ -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>
</>
);
};

View File

@ -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} />,
},
];

View File

@ -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>
);
}

View File

@ -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>
);
}

View File

@ -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;

View File

@ -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>

View File

@ -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",

View File

@ -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>
)
}

View File

@ -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>
)
}

View File

@ -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>
)
}

View File

@ -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"

View File

@ -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>
)
}

View File

@ -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>

View File

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

View File

@ -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(),
},
];

View File

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

View File

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