-
+ {/*
*/}
+
{siteConfig.name}
diff --git a/src/components/users/users-table/cell-action.tsx b/src/components/users-table/cell-action.tsx
similarity index 100%
rename from src/components/users/users-table/cell-action.tsx
rename to src/components/users-table/cell-action.tsx
diff --git a/src/components/users/users-table/columns.tsx b/src/components/users-table/columns.tsx
similarity index 90%
rename from src/components/users/users-table/columns.tsx
rename to src/components/users-table/columns.tsx
index c84a615..6a89029 100644
--- a/src/components/users/users-table/columns.tsx
+++ b/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
[] = [
{
@@ -133,6 +127,18 @@ export const columns: ColumnDef[] = [
return value.includes(row.getValue(id));
},
},
+ {
+ accessorKey: "created_at",
+ header: ({ column }) => (
+
+ ),
+ cell: ({ row }) => {
+ return {formatDate(row.getValue("created_at"))}
;
+ },
+ filterFn: (row, id, value) => {
+ return value.includes(row.getValue(id));
+ },
+ },
{
id: "actions",
diff --git a/src/components/users-table/data-table-column-header.tsx b/src/components/users-table/data-table-column-header.tsx
new file mode 100644
index 0000000..85df45e
--- /dev/null
+++ b/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
+ extends React.HTMLAttributes {
+ column: Column
+ title: string
+ }
+
+ export function DataTableColumnHeader({
+ column,
+ title,
+ className,
+ }: DataTableColumnHeaderProps) {
+ if (!column.getCanSort()) {
+ return {title}
+ }
+
+
+ return (
+
+
+
+
+
+
+ column.toggleSorting(false)}>
+
+ Asc
+
+ column.toggleSorting(true)}>
+
+ Desc
+
+
+ column.toggleVisibility(false)}>
+
+ Hide
+
+
+
+
+ )
+ }
\ No newline at end of file
diff --git a/src/components/users-table/data-table-faceted-filter.tsx b/src/components/users-table/data-table-faceted-filter.tsx
new file mode 100644
index 0000000..a5efee2
--- /dev/null
+++ b/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 {
+ column?: Column
+ title?: string
+ options: {
+ label: string
+ value: string
+ icon?: React.ComponentType<{ className?: string }>
+ }[]
+}
+
+export function DataTableFacetedFilter({
+ column,
+ title,
+ options,
+}: DataTableFacetedFilterProps) {
+ const facets = column?.getFacetedUniqueValues()
+ const selectedValues = new Set(column?.getFilterValue() as string[])
+
+ return (
+
+
+
+
+
+
+
+
+ No results found.
+
+ {options.map((option) => {
+ const isSelected = selectedValues.has(option.value)
+ return (
+ {
+ if (isSelected) {
+ selectedValues.delete(option.value)
+ } else {
+ selectedValues.add(option.value)
+ }
+ const filterValues = Array.from(selectedValues)
+ column?.setFilterValue(
+ filterValues.length ? filterValues : undefined
+ )
+ }}
+ >
+
+
+
+ {option.icon && (
+
+ )}
+ {option.label}
+ {facets?.get(option.value) && (
+
+ {facets.get(option.value)}
+
+ )}
+
+ )
+ })}
+
+ {selectedValues.size > 0 && (
+ <>
+
+
+ column?.setFilterValue(undefined)}
+ className="justify-center text-center"
+ >
+ Clear filters
+
+
+ >
+ )}
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/users-table/data-table-pagination.tsx b/src/components/users-table/data-table-pagination.tsx
new file mode 100644
index 0000000..aec3adc
--- /dev/null
+++ b/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 {
+ table: Table
+ }
+
+ export function DataTablePagination({
+ table,
+ }: DataTablePaginationProps) {
+ return (
+
+
+ {table.getFilteredSelectedRowModel().rows.length} of{" "}
+ {table.getFilteredRowModel().rows.length} row(s) selected.
+
+
+
+
Rows per page
+
+
+
+ Page {table.getState().pagination.pageIndex + 1} of{" "}
+ {table.getPageCount()}
+
+
+
+
+
+
+
+
+
+ )
+ }
\ No newline at end of file
diff --git a/src/components/users/users-table/data-table-toolbar.tsx b/src/components/users-table/data-table-toolbar.tsx
similarity index 85%
rename from src/components/users/users-table/data-table-toolbar.tsx
rename to src/components/users-table/data-table-toolbar.tsx
index 9e7951a..7fcc5bc 100644
--- a/src/components/users/users-table/data-table-toolbar.tsx
+++ b/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 {
table: Table;
+ data: User[];
}
export function DataTableToolbar({
table,
+ data,
}: DataTableToolbarProps) {
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 (
@@ -45,17 +57,10 @@ export function DataTableToolbar
({
)}
- {/*
- {table.getColumn("pricing_model") && (
-
- )} */}
+
{isFiltered && (