diff --git a/src/app/(dashboard)/dashboard/skills/page.tsx b/src/app/(dashboard)/dashboard/skills/page.tsx new file mode 100644 index 0000000..d16b07b --- /dev/null +++ b/src/app/(dashboard)/dashboard/skills/page.tsx @@ -0,0 +1,20 @@ +import Breadcrumb from "@/components/breadcrumb"; +import ToolsTable from "@/components/skills-table/tools-table"; +import { dummySkills } from "@/constants/data"; +import { Skill } from "@/types/skill"; +import React from "react"; + +const breadcrumbItems = [ + { title: "Dashboard", link: "#" }, + { title: "Skills" }, +]; +const Page = () => { + return ( +
+ + +
+ ); +}; + +export default Page; diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 3ccc44d..857ada1 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -18,7 +18,7 @@ export default function RootLayout({ children: React.ReactNode; }>) { return ( - + = ({ data }) => { + const [loading, setLoading] = useState(false); + const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false); + const router = useRouter(); + const { toast } = useToast(); + + const onDeleteConfirm = async () => {}; + + const handleUpdateStatus = async () => {}; + + return ( + <> + setIsDeleteModalOpen(false)} + onConfirm={onDeleteConfirm} + loading={loading} + /> + + + + + + Actions + + + // router.push(`#`) + // } + > + Edit + + setIsDeleteModalOpen(true)} + > + Delete + + + + + ); +}; diff --git a/src/components/skills-table/columns.tsx b/src/components/skills-table/columns.tsx new file mode 100644 index 0000000..59d9097 --- /dev/null +++ b/src/components/skills-table/columns.tsx @@ -0,0 +1,65 @@ +"use client"; +import { DataTableColumnHeader } from "./data-table-column-header"; +import { CellAction } from "./cell-action"; +import { ColumnDef } from "@tanstack/react-table"; +import { Checkbox } from "@/components/ui/checkbox"; +import { formatDate } from "@/lib/format-date"; +import { Skill } from "@/types/skill"; + +export const columns: ColumnDef[] = [ + { + id: "select", + header: ({ table }) => ( + table.toggleAllPageRowsSelected(!!value)} + aria-label="Select all" + className="translate-y-[2px]" + /> + ), + cell: ({ row }) => ( + row.toggleSelected(!!value)} + aria-label="Select row" + className="translate-y-[2px]" + /> + ), + enableSorting: false, + enableHiding: false, + }, + + { + accessorKey: "name", + header: ({ column }) => ( + + ), + cell: ({ row }) => { + return

{row.getValue("name")}

; + }, + }, + + { + 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", + header: ({ column }) => ( + + ), + cell: ({ row }) => , + }, +]; diff --git a/src/components/skills-table/data-table-column-header.tsx b/src/components/skills-table/data-table-column-header.tsx new file mode 100644 index 0000000..85df45e --- /dev/null +++ b/src/components/skills-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/skills-table/data-table-faceted-filter.tsx b/src/components/skills-table/data-table-faceted-filter.tsx new file mode 100644 index 0000000..a5efee2 --- /dev/null +++ b/src/components/skills-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/skills-table/data-table-pagination.tsx b/src/components/skills-table/data-table-pagination.tsx new file mode 100644 index 0000000..3c5a1d9 --- /dev/null +++ b/src/components/skills-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()} +
+
+ + + + +
+
+
+ ); +} diff --git a/src/components/skills-table/data-table-toolbar.tsx b/src/components/skills-table/data-table-toolbar.tsx new file mode 100644 index 0000000..53ddfcc --- /dev/null +++ b/src/components/skills-table/data-table-toolbar.tsx @@ -0,0 +1,32 @@ +"use client"; + +import { Table } from "@tanstack/react-table"; +import { Input } from "@/components/ui/input"; +import { DataTableViewOptions } from "./data-table-view-options"; +import { Skill } from "@/types/skill"; + +interface DataTableToolbarProps { + table: Table; + data: Skill[]; +} + +export function DataTableToolbar({ + table, + data, +}: DataTableToolbarProps) { + return ( +
+
+ + table.getColumn("name")?.setFilterValue(event.target.value) + } + className="h-8 w-[150px] lg:w-[250px]" + /> +
+ +
+ ); +} diff --git a/src/components/skills-table/data-table-view-options.tsx b/src/components/skills-table/data-table-view-options.tsx new file mode 100644 index 0000000..6d56347 --- /dev/null +++ b/src/components/skills-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 { + table: Table +} + +export function DataTableViewOptions({ + table, +}: DataTableViewOptionsProps) { + return ( + + + + + + Toggle columns + + {table + .getAllColumns() + .filter( + (column) => + typeof column.accessorFn !== "undefined" && column.getCanHide() + ) + .map((column) => { + return ( + column.toggleVisibility(!!value)} + > + {column.id} + + ) + })} + + + ) +} \ No newline at end of file diff --git a/src/components/skills-table/data-table.tsx b/src/components/skills-table/data-table.tsx new file mode 100644 index 0000000..519b90b --- /dev/null +++ b/src/components/skills-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 { Skill } from "@/types/skill"; + +interface DataTableProps { + columns: ColumnDef[]; + data: TData[]; +} + +export function DataTable({ + columns, + data, +}: DataTableProps) { + const [rowSelection, setRowSelection] = React.useState({}); + const [columnVisibility, setColumnVisibility] = + React.useState({}); + const [columnFilters, setColumnFilters] = React.useState( + [] + ); + const [sorting, setSorting] = React.useState([]); + + 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 ( +
+ + {/*
*/} + + + + {table.getHeaderGroups().map((headerGroup) => ( + + {headerGroup.headers.map((header) => { + return ( + + {header.isPlaceholder + ? null + : flexRender( + header.column.columnDef.header, + header.getContext() + )} + + ); + })} + + ))} + + + {table.getRowModel().rows?.length ? ( + table.getRowModel().rows.map((row) => ( + + {row.getVisibleCells().map((cell) => ( + + {flexRender( + cell.column.columnDef.cell, + cell.getContext() + )} + + ))} + + )) + ) : ( + + + No results. + + + )} + +
+ + + {/*
*/} + +
+ ); +} diff --git a/src/components/skills-table/tools-table.tsx b/src/components/skills-table/tools-table.tsx new file mode 100644 index 0000000..519d392 --- /dev/null +++ b/src/components/skills-table/tools-table.tsx @@ -0,0 +1,39 @@ +"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 Link from "next/link"; +import { Plus } from "lucide-react"; +import { buttonVariants } from "@/components/ui/button"; +import { Skill } from "@/types/skill"; + +const ToolsTable = ({ skillsData }: { skillsData: Skill[] }) => { + return ( + <> +
+ + router.push(`/admin-dashboard/tools/add`)} + > + Add Skill + +
+ + + + ); +}; + +export default ToolsTable; diff --git a/src/config/nav.ts b/src/config/nav.ts index dec64ac..75b006e 100644 --- a/src/config/nav.ts +++ b/src/config/nav.ts @@ -122,7 +122,7 @@ export const sideNavItems: GroupedNavItems[] = [ icon: Ruler, }, { - href: "/dashboard/skill", + href: "/dashboard/skills", title: "Skill", icon: Sparkles, }, diff --git a/src/constants/data.ts b/src/constants/data.ts index 0b1c16f..7f70fde 100644 --- a/src/constants/data.ts +++ b/src/constants/data.ts @@ -4,8 +4,10 @@ import { Configuration } from "@/types/configuration"; import { Criteria } from "@/types/criteria"; import { EvaluationStart } from "@/types/evaluation-start"; import { Organization } from "@/types/organization"; +import { Skill } from "@/types/skill"; import { User } from "@/types/user"; import { UserRound, UserRoundCheck } from "lucide-react"; +import { number } from "zod"; export const dummyUsers: User[] = [ { @@ -270,3 +272,16 @@ ONLY JSON IS ALLOWED as an answer. No explanation or other text is allowed. created_at: new Date().toISOString(), }, ]; + +export const dummySkills: Skill[] = [ + { + id: 1, + name: "JavaScript", + created_at: new Date().toISOString(), + }, + { + id: 2, + name: "Python", + created_at: new Date().toISOString(), + }, +]; diff --git a/src/types/skill.ts b/src/types/skill.ts new file mode 100644 index 0000000..99a847e --- /dev/null +++ b/src/types/skill.ts @@ -0,0 +1,5 @@ +export interface Skill { + id: number; + name: string; + created_at: string; +}