diff --git a/src/app/(dashboard)/dashboard/api-communications/page.tsx b/src/app/(dashboard)/dashboard/api-communications/page.tsx new file mode 100644 index 0000000..bf5a472 --- /dev/null +++ b/src/app/(dashboard)/dashboard/api-communications/page.tsx @@ -0,0 +1,20 @@ +import ToolsTable from "@/components/api-communication-table/tools-table"; +import Breadcrumb from "@/components/breadcrumb"; +import { dummyApiCommunications } from "@/constants/data"; +import { ApiCommunication } from "@/types/api-communication"; +import React from "react"; + +const breadcrumbItems = [ + { title: "Dashboard", link: "#" }, + { title: "Api Communication" }, +]; +const Page = () => { + return ( +
+ + +
+ ); +}; + +export default Page; diff --git a/src/app/(dashboard)/dashboard/organizations/page.tsx b/src/app/(dashboard)/dashboard/organizations/page.tsx index 6988014..4dbb5cd 100644 --- a/src/app/(dashboard)/dashboard/organizations/page.tsx +++ b/src/app/(dashboard)/dashboard/organizations/page.tsx @@ -1,8 +1,7 @@ import Breadcrumb from "@/components/breadcrumb"; import ToolsTable from "@/components/organizations-table/tools-table"; -import { dummyOrganizations, dummyUsers } from "@/constants/data"; +import { dummyOrganizations } from "@/constants/data"; import { Organization } from "@/types/organization"; -import { User } from "@/types/user"; import React from "react"; const breadcrumbItems = [ diff --git a/src/components/accounts-table/data-table-pagination.tsx b/src/components/accounts-table/data-table-pagination.tsx index aec3adc..3c5a1d9 100644 --- a/src/components/accounts-table/data-table-pagination.tsx +++ b/src/components/accounts-table/data-table-pagination.tsx @@ -1,97 +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. + 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()}
-
-
-

Rows per page

- -
-
- Page {table.getState().pagination.pageIndex + 1} of{" "} - {table.getPageCount()} -
-
- - - - -
+
+ + + +
- ) - } \ No newline at end of file +
+ ); +} diff --git a/src/components/api-communication-table/cell-action.tsx b/src/components/api-communication-table/cell-action.tsx new file mode 100644 index 0000000..366a180 --- /dev/null +++ b/src/components/api-communication-table/cell-action.tsx @@ -0,0 +1,68 @@ +"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 { ApiCommunication } from "@/types/api-communication"; + +import { Edit, MoreHorizontal, Trash } from "lucide-react"; +import { useRouter } from "next/navigation"; +import { useState } from "react"; + +interface CellActionProps { + data: ApiCommunication; +} + +export const CellAction: React.FC = ({ 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(`#`) + // } + > + Update + + setIsDeleteModalOpen(true)} + > + Delete + + + + + ); +}; diff --git a/src/components/api-communication-table/columns.tsx b/src/components/api-communication-table/columns.tsx new file mode 100644 index 0000000..b4d5447 --- /dev/null +++ b/src/components/api-communication-table/columns.tsx @@ -0,0 +1,269 @@ +"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"; +import { ApiCommunication } from "@/types/api-communication"; +import { ScrollArea, ScrollBar } from "../ui/scroll-area"; + +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: "id", + header: ({ column }) => ( + + ), + cell: ({ row }) => { + return ( +
+ + +

{row.getValue("id")}

+
+ {row.getValue("id")} +
+
+ ); + }, + }, + { + accessorKey: "messages", + header: ({ column }) => ( + + ), + cell: ({ row }) => { + return ( +
+ + +

+ {row.getValue("messages")} +

+
+ + + {JSON.stringify(row.getValue("messages"), null, 2)} + + + +
+
+ ); + }, + }, + { + accessorKey: "completion", + header: ({ column }) => ( + + ), + cell: ({ row }) => { + return ( +
+ + +

+ {row.getValue("completion")} +

+
+ + + {row.getValue("completion")} + + + +
+
+ ); + }, + }, + { + accessorKey: "pt", + header: ({ column }) => ( + + ), + cell: ({ row }) => { + return ( +
+ + +

{row.getValue("pt")}

+ {/*

+ {row.getValue("pt")} +

*/} +
+ + {/* */} + {row.getValue("pt")} + {/* */} + {/* */} + +
+
+ ); + }, + }, + { + accessorKey: "ct", + header: ({ column }) => ( + + ), + cell: ({ row }) => { + return ( +
+ + +

{row.getValue("ct")}

+ {/*

+ {row.getValue("ct")} +

*/} +
+ + {/* */} + {row.getValue("ct")} + {/* */} + {/* */} + +
+
+ ); + }, + filterFn: (row, id, value) => { + return value.includes(row.getValue(id)); + }, + }, + { + accessorKey: "tt", + header: ({ column }) => ( + + ), + cell: ({ row }) => { + return ( +
+ + +

{row.getValue("tt")}

+ {/*

+ {row.getValue("tt")} +

*/} +
+ + {/* */} + {row.getValue("tt")} + {/* */} + {/* */} + +
+
+ ); + }, + filterFn: (row, id, value) => { + return value.includes(row.getValue(id)); + }, + }, + { + accessorKey: "status", + header: ({ column }) => ( + + ), + cell: ({ row }) => { + return ( +
+ + +

{row.getValue("status")}

+
+ {row.getValue("status")} +
+
+ ); + }, + filterFn: (row, id, value) => { + return value.includes(row.getValue(id)); + }, + }, + { + accessorKey: "evaluation", + header: ({ column }) => ( + + ), + cell: ({ row }) => { + return ( +
+ + + {/*

{row.getValue("evaluation")}

*/} +

+ {row.getValue("evaluation")} +

+
+ + + {row.getValue("evaluation")} + + + +
+
+ ); + }, + }, + + { + 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/api-communication-table/data-table-column-header.tsx b/src/components/api-communication-table/data-table-column-header.tsx new file mode 100644 index 0000000..85df45e --- /dev/null +++ b/src/components/api-communication-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/api-communication-table/data-table-faceted-filter.tsx b/src/components/api-communication-table/data-table-faceted-filter.tsx new file mode 100644 index 0000000..fce57fa --- /dev/null +++ b/src/components/api-communication-table/data-table-faceted-filter.tsx @@ -0,0 +1,152 @@ +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 + + + + )} +
+
+
+
+ ); +} diff --git a/src/components/api-communication-table/data-table-pagination.tsx b/src/components/api-communication-table/data-table-pagination.tsx new file mode 100644 index 0000000..3c5a1d9 --- /dev/null +++ b/src/components/api-communication-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/api-communication-table/data-table-toolbar.tsx b/src/components/api-communication-table/data-table-toolbar.tsx new file mode 100644 index 0000000..2461ec0 --- /dev/null +++ b/src/components/api-communication-table/data-table-toolbar.tsx @@ -0,0 +1,96 @@ +"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 { ApiCommunication } from "@/types/api-communication"; + +interface DataTableToolbarProps { + table: Table; + data: ApiCommunication[]; +} + +export function DataTableToolbar({ + table, + data, +}: DataTableToolbarProps) { + const isFiltered = table.getState().columnFilters.length > 0; + + const statusFilterOptions = Array.from( + new Set(data.map((d) => d.status.toLocaleLowerCase())) + ).map((v) => ({ + label: v, + value: v, + })); + // const statusFilterOptions = Array.from( + // new Set(data.map((d) => d.status.toLocaleLowerCase())) + // ).map((v) => ({ + // label: v.slice(0, 1).toLocaleUpperCase() + v.slice(1), + // value: v.slice(0, 1).toLocaleUpperCase() + v.slice(1), + // })); + + console.log(statusFilterOptions); + + return ( +
+
+ + table.getColumn("messages")?.setFilterValue(event.target.value) + } + className="h-8 w-[150px] lg:w-[250px]" + /> + + table.getColumn("completion")?.setFilterValue(event.target.value) + } + className="h-8 w-[150px] lg:w-[250px]" + /> + + table.getColumn("evaluation")?.setFilterValue(event.target.value) + } + className="h-8 w-[150px] lg:w-[250px]" + /> + + {table.getColumn("status") && ( + + )} + + {isFiltered && ( + + )} +
+ +
+ ); +} diff --git a/src/components/api-communication-table/data-table-view-options.tsx b/src/components/api-communication-table/data-table-view-options.tsx new file mode 100644 index 0000000..6d56347 --- /dev/null +++ b/src/components/api-communication-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/api-communication-table/data-table.tsx b/src/components/api-communication-table/data-table.tsx new file mode 100644 index 0000000..5879ceb --- /dev/null +++ b/src/components/api-communication-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 { + 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/api-communication-table/tools-table.tsx b/src/components/api-communication-table/tools-table.tsx new file mode 100644 index 0000000..3ba586f --- /dev/null +++ b/src/components/api-communication-table/tools-table.tsx @@ -0,0 +1,47 @@ +"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 { Organization } from "@/types/organization"; +import { ApiCommunication } from "@/types/api-communication"; + +const ToolsTable = ({ + apiCommunications, +}: { + apiCommunications: ApiCommunication[]; +}) => { + return ( + <> +
+ + router.push(`/admin-dashboard/tools/add`)} + > + {" "} + Add{" "} + Add ApiCommunication + +
+ + + {/* */} + + ); +}; + +export default ToolsTable; diff --git a/src/components/configurations-table/data-table-pagination.tsx b/src/components/configurations-table/data-table-pagination.tsx index aec3adc..3c5a1d9 100644 --- a/src/components/configurations-table/data-table-pagination.tsx +++ b/src/components/configurations-table/data-table-pagination.tsx @@ -1,97 +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. + 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()}
-
-
-

Rows per page

- -
-
- Page {table.getState().pagination.pageIndex + 1} of{" "} - {table.getPageCount()} -
-
- - - - -
+
+ + + +
- ) - } \ No newline at end of file +
+ ); +} diff --git a/src/components/mobile-sidebar-nav.tsx b/src/components/mobile-sidebar-nav.tsx index 8752681..0897597 100644 --- a/src/components/mobile-sidebar-nav.tsx +++ b/src/components/mobile-sidebar-nav.tsx @@ -13,13 +13,14 @@ 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 { Fragment, useState } 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 [isSheetOpen, setIsSheetOpen] = useState(false) const params = useParams<{ workspaceId: string }>(); const path = usePathname(); @@ -28,7 +29,7 @@ export default function MobileSidebarNav() { return (
- + setIsSheetOpen(v)}> @@ -60,6 +61,7 @@ export default function MobileSidebarNav() { key={link.href + idx} item={link} currentPath={"/" + currentPath} + onLinkClick={() => setIsSheetOpen(!isSheetOpen)} /> ); })} diff --git a/src/components/organizations-table/data-table-pagination.tsx b/src/components/organizations-table/data-table-pagination.tsx index aec3adc..3c5a1d9 100644 --- a/src/components/organizations-table/data-table-pagination.tsx +++ b/src/components/organizations-table/data-table-pagination.tsx @@ -1,97 +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. + 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()}
-
-
-

Rows per page

- -
-
- Page {table.getState().pagination.pageIndex + 1} of{" "} - {table.getPageCount()} -
-
- - - - -
+
+ + + +
- ) - } \ No newline at end of file +
+ ); +} diff --git a/src/components/sidebar-nav.tsx b/src/components/sidebar-nav.tsx index d2159a1..3733fb0 100644 --- a/src/components/sidebar-nav.tsx +++ b/src/components/sidebar-nav.tsx @@ -52,19 +52,22 @@ const CollapsedItem = ({ const ExpandedItem = ({ item, currentPath, + onLinkClick, }: { item: NavItem; currentPath: string; + onLinkClick?: Function; }) => { return ( onLinkClick && onLinkClick()} href={item.href} className={cn( buttonVariants({ variant: "ghost" }), "justify-start text-muted-foreground", currentPath === item.href ? "bg-primary text-primary-foreground hover:bg-primary/90 hover:text-primary-foreground" - : "transparent", + : "transparent" // "soon" === item.badge && "cursor-not-allowed opacity-80" )} > diff --git a/src/components/users-table/data-table-pagination.tsx b/src/components/users-table/data-table-pagination.tsx index aec3adc..3c5a1d9 100644 --- a/src/components/users-table/data-table-pagination.tsx +++ b/src/components/users-table/data-table-pagination.tsx @@ -1,97 +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. + 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()}
-
-
-

Rows per page

- -
-
- Page {table.getState().pagination.pageIndex + 1} of{" "} - {table.getPageCount()} -
-
- - - - -
+
+ + + +
- ) - } \ No newline at end of file +
+ ); +} diff --git a/src/config/nav.ts b/src/config/nav.ts index 85ad889..7d2ad2a 100644 --- a/src/config/nav.ts +++ b/src/config/nav.ts @@ -85,7 +85,7 @@ export const sideNavItems: GroupedNavItems[] = [ icon: Wrench, }, { - href: "/dashboard/api-communication", + href: "/dashboard/api-communications", title: "Api Communication", icon: Cloudy, }, diff --git a/src/constants/data.ts b/src/constants/data.ts index eb52743..eb6fd8a 100644 --- a/src/constants/data.ts +++ b/src/constants/data.ts @@ -1,4 +1,5 @@ import { Account } from "@/types/account"; +import { ApiCommunication } from "@/types/api-communication"; import { Configuration } from "@/types/configuration"; import { Organization } from "@/types/organization"; import { User } from "@/types/user"; @@ -130,3 +131,35 @@ export const dummyConfigurations: Configuration[] = [ created_at: new Date().toISOString(), }, ]; + +export const dummyApiCommunications: ApiCommunication[] = [ + { + id: 1, + messages: + "{"messages":[{"role":"system","content":"\n \n You are a professional language detection service.\n You are given a commit message or a commit diff.\n You have to answer with the programming languages and libraries the user input's code is written in.\n You have to ignore comments and strings in variables. \n You can detect up to 3 but you need to be 100% sure.\n \n Always answer in the following json format where "n" is the name of the detected language or library:\n \n [{"n":"PHP", {"n":"Symfony"}] or []\n \n ----------------------------------------\n \n ONLY JSON IS ALLOWED as an answer. No explanation or other text is allowed.\n \n \n"},{"role":"user","content":"Allow PHP 8\n\ndiff --git a/composer.json b/composer.json\nindex 7889d20..4c6382c 100644\n--- a/composer.json\n+++ b/composer.json\n@@ -13,7 +13,7 @@\n ],\n "minimum-stability": "dev",\n "require": {\n- "php": "^7.1.3",\n+ "php": ">=7.1.3",\n "doctrine/inflector": "^1.2",\n "nikic/php-parser": "^4.0",\n "symfony/config": "^3.4|^4.0|^5.0",\n"}]}", + completion: '"[{"n":"PHP"}]"', + pt: 287, + ct: 7, + tt: 294, + status: "skill_extraction_success", + type: "skill_extraction", + evaluation: + "Uploaded at: 2023-09-20 00:00:00 - Uploader: jschultz@php.net - Developer: fabien@potencier.org - Status: finished", + created_at: new Date().toISOString(), + }, + { + id: 2, + messages: + "{"messages":[{"role":"system","content":"\nThis is a training task for a developer who has the following skillMatrix:\n\nskill: PHP - score:7\nskill: Symfony - score: 7\nskill: EasyAdmin - score: 3\n\n===========================================================================\n\n--- task\ntaskTitle: Create a tabbed user administration page in symfony 6 using easy admin\ntaskDescription: \n\n -- index page\n\n - "List" all users that have a Role that matches or is below your own Role\n - "Create" a new user with a Role that matches or is below your own Role \n tab 1\n firstname, lastname, email\n tab 2\n roles with checkboxes\n tab 3\n change password\n - "Edit" a user with a Role that matches or is below your own Role \n tab 1\n form with firstname, lastname, email \n tab 2\n form with roles with checkboxes\n - "Change Password of exiting User"\n form with password and password confirmation \n\n You got 2 hours to finish this task starting from now.\n Document your findings and the challenges you faced. Adhere to the project's coding standards.\n \n===========================================================================\n\nThe user will give you another skill matrix and you need to create a task with a task title for training purposes. \n\nAlways answer in the following json format:\n\n{ "taskTitle": "", "taskDescription": "[15-20 sentences formatted in markdown]" }\n\ntaskDescription should be written in markdown with proper headlines and formatting.\n\nYou may use newlines in the json response values for formatting reasons.\n\nONLY JSON IS ALLOWED as an answer. No explanation or other text is allowed.\n"},{"role":"user","content":"PHP: 7\nSymfony: 7\n"}]}", + completion: + ""{ "taskTitle": "Develop a Blogging Platform using Symfony 6", "taskDescription": "\n\nYour task is to create a basic blogging platform using Symfony 6. The platform should have the following features:\n\n- `User Registration and Login`: Implement a user registration and login system using Symfony's security component. Users should be able to register with an email and password.\n\n- `Create Blog Post`: Authenticated users should be able to create a new blog post. A blog post should have a title, content, and the date of creation.\n\n- `List Blog Posts`: Create a page to list all blog posts. Each blog post listing should include the title, an excerpt of the content, and the date of creation. The list should be paginated.\n\n- `View Blog Post`: Users should be able to click on a blog post title in the list to view the full blog post. The full blog post view should include the title, full content, and the date of creation.\n\n- `Edit and Delete Blog Post`: Authenticated users should be able to edit and delete their own blog posts.\n\n- `Comments`: Authenticated users should be able to post comments on a blog post.\n\nYou are given 4 hours to complete this task. Document your findings and the challenges you faced. Adhere to the project's coding standards.\n\n" }"", + pt: 364, + ct: 271, + tt: 635, + status: "course_creation_success", + type: "course_creation", + evaluation: + " Uploaded at: 2023-09-20 00:00:00 - Uploader: jschultz@php.net - Developer: fabien@potencier.org - Status: finished", + created_at: new Date().toISOString(), + }, +]; diff --git a/src/types/api-communication.ts b/src/types/api-communication.ts new file mode 100644 index 0000000..356ef49 --- /dev/null +++ b/src/types/api-communication.ts @@ -0,0 +1,12 @@ +export interface ApiCommunication { + id: number; + messages: string; + completion: string; + pt: number; + ct: number; + tt: number; + status: string; + type: string; + evaluation: string; + created_at: string; +}