From adc1c620c1a3ad0cfd0b48468cec4f33c3d16b19 Mon Sep 17 00:00:00 2001
From: FeimeiChen <54688836+FeimeiChen@users.noreply.github.com>
Date: Tue, 6 Aug 2024 17:43:17 -1000
Subject: [PATCH] Create GroupingsTable.tsx component

---
 ui/package.json                               |   7 +
 ui/src/app/groupings/page.tsx                 |  28 ++-
 .../components/layout/navbar/navbar-menu.tsx  |  18 +-
 ui/src/components/table/GroupingsTable.tsx    | 132 +++++++++++
 .../table/table-element/ColumnSettings.tsx    |  78 ++++++
 .../table/table-element/GlobalFilter.tsx      |  18 ++
 .../table/table-element/GroupingPathCell.tsx  |  53 +++++
 .../table-element/GroupingsTableHeaders.tsx   |  20 ++
 .../table/table-element/Pagination.tsx        | 108 +++++++++
 .../table/table-element/SortArrow.tsx         |  18 ++
 ui/src/components/ui/button.tsx               |  10 +-
 ui/src/components/ui/dropdown-menu.tsx        | 222 ++++++++++++++++++
 ui/src/components/ui/pagination.tsx           | 117 +++++++++
 ui/src/components/ui/switch.tsx               |  36 +++
 ui/src/components/ui/table.tsx                | 119 ++++++++++
 ui/src/components/ui/tooltip.tsx              |  35 +++
 ui/tailwind.config.ts                         |   8 +-
 .../(home)/_components/login-button.test.tsx  |  15 +-
 .../_components/feedback-form.test.tsx        |  31 ++-
 ui/tests/app/groupings/page.test.tsx          |  54 ++++-
 .../components/table/GroupingsTable.test.tsx  | 194 +++++++++++++++
 .../table-element/ColumnSettings.test.tsx     | 119 ++++++++++
 .../table/table-element/GlobalFilter.test.tsx |  20 ++
 .../table-element/GroupingPathCell.test.tsx   |  61 +++++
 .../table/table-element/Pagination.test.tsx   | 128 ++++++++++
 .../table/table-element/SortArrow.test.tsx    |  26 ++
 26 files changed, 1633 insertions(+), 42 deletions(-)
 create mode 100644 ui/src/components/table/GroupingsTable.tsx
 create mode 100644 ui/src/components/table/table-element/ColumnSettings.tsx
 create mode 100644 ui/src/components/table/table-element/GlobalFilter.tsx
 create mode 100644 ui/src/components/table/table-element/GroupingPathCell.tsx
 create mode 100644 ui/src/components/table/table-element/GroupingsTableHeaders.tsx
 create mode 100644 ui/src/components/table/table-element/Pagination.tsx
 create mode 100644 ui/src/components/table/table-element/SortArrow.tsx
 create mode 100644 ui/src/components/ui/dropdown-menu.tsx
 create mode 100644 ui/src/components/ui/pagination.tsx
 create mode 100644 ui/src/components/ui/switch.tsx
 create mode 100644 ui/src/components/ui/table.tsx
 create mode 100644 ui/src/components/ui/tooltip.tsx
 create mode 100644 ui/tests/components/table/GroupingsTable.test.tsx
 create mode 100644 ui/tests/components/table/table-element/ColumnSettings.test.tsx
 create mode 100644 ui/tests/components/table/table-element/GlobalFilter.test.tsx
 create mode 100644 ui/tests/components/table/table-element/GroupingPathCell.test.tsx
 create mode 100644 ui/tests/components/table/table-element/Pagination.test.tsx
 create mode 100644 ui/tests/components/table/table-element/SortArrow.test.tsx

diff --git a/ui/package.json b/ui/package.json
index 9c2f6650..78121f4c 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -13,13 +13,20 @@
         "test:watch": "jest --watch"
     },
     "dependencies": {
+        "@fortawesome/free-solid-svg-icons": "^6.6.0",
+        "@fortawesome/react-fontawesome": "^0.2.2",
         "@hookform/resolvers": "^3.3.4",
         "@radix-ui/react-alert-dialog": "^1.0.5",
         "@radix-ui/react-dialog": "^1.0.5",
+        "@radix-ui/react-dropdown-menu": "^2.1.1",
+        "@radix-ui/react-icons": "^1.3.0",
         "@radix-ui/react-label": "^2.0.2",
         "@radix-ui/react-select": "^1.0.2",
         "@radix-ui/react-slot": "^1.0.2",
+        "@radix-ui/react-switch": "^1.1.0",
         "@radix-ui/react-tabs": "^1.0.4",
+        "@radix-ui/react-tooltip": "^1.1.2",
+        "@tanstack/react-table": "^8.20.1",
         "camaro": "^6.2.2",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.0",
diff --git a/ui/src/app/groupings/page.tsx b/ui/src/app/groupings/page.tsx
index 6d6dba73..8192f488 100644
--- a/ui/src/app/groupings/page.tsx
+++ b/ui/src/app/groupings/page.tsx
@@ -1,9 +1,27 @@
-const Groupings = () => {
+import GroupingsTable from '@/components/table/GroupingsTable';
+import {ownerGroupings} from '@/actions/groupings-api';
+
+const Groupings = async () => {
+    const res = await ownerGroupings();
+    const groupingPaths = res.groupingPaths;
     return (
-        <div className="bg-white">
-            <div className="container">{/* GroupingsTable goes here */}</div>
-        </div>
+        <main>
+            <div className="bg-seafoam pt-3">
+                <div className="container">
+                    <h1 className="mb-1 font-bold text-[2rem] text-center md:text-left">Manage My Groupings</h1>
+                    <p className="pb-3 text-xl text-center md:text-left">
+                        View and manage groupings I own. Manage members,
+                        configure grouping options and sync destinations.
+                    </p>
+                </div>
+                <div className="bg-white">
+                    <div className="container">
+                        <GroupingsTable data={groupingPaths}/>
+                    </div>
+                </div>
+            </div>
+        </main>
     );
-};
+}
 
 export default Groupings;
diff --git a/ui/src/components/layout/navbar/navbar-menu.tsx b/ui/src/components/layout/navbar/navbar-menu.tsx
index 8066d4b7..f8b8067b 100644
--- a/ui/src/components/layout/navbar/navbar-menu.tsx
+++ b/ui/src/components/layout/navbar/navbar-menu.tsx
@@ -1,12 +1,13 @@
 'use client';
 
-import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
+import { Sheet, SheetContent, SheetTitle, SheetTrigger } from '@/components/ui/sheet';
 import User from '@/access/user';
 import Link from 'next/link';
 import { NavbarLinks } from './navbar-links';
-import { useState } from 'react';
+import React, { useState } from 'react';
 import Role from '@/access/role';
 import NavbarMenuIcon from './navbar-menu-icon';
+import {VisuallyHidden} from "@radix-ui/react-visually-hidden";
 
 const NavbarMenu = ({ currentUser }: { currentUser: User }) => {
     const [open, setOpen] = useState(false);
@@ -20,13 +21,20 @@ const NavbarMenu = ({ currentUser }: { currentUser: User }) => {
                 <NavbarMenuIcon open={open} aria-hidden="true" />
             </SheetTrigger>
 
-            <SheetContent className="mt-[3.9rem] text-xl pt-5 lg:hidden" side="top" onClickOutside={handleClick}>
+            <SheetContent
+                className="mt-[3.9rem] text-xl pt-5 lg:hidden"
+                side="top"
+                aria-describedby="menu-description"
+                onClickOutside={handleClick}>
+                <VisuallyHidden>
+                    <SheetTitle>Main Navigation Menu</SheetTitle>
+                </VisuallyHidden>
                 <nav className="container flex flex-col space-y-5 h-1/4">
                     {NavbarLinks
                         .filter((navbarLink) =>
-                            currentUser.roles.includes(Role.ADMIN) || 
+                            currentUser.roles.includes(Role.ADMIN) ||
                             currentUser.roles.includes(navbarLink.role))
-                        .map((navbarLink) => 
+                        .map((navbarLink) =>
                             <Link href={navbarLink.link} key={navbarLink.name} className="hover:text-uh-teal">
                                 {navbarLink.name}
                             </Link>)}
diff --git a/ui/src/components/table/GroupingsTable.tsx b/ui/src/components/table/GroupingsTable.tsx
new file mode 100644
index 00000000..20c57bbe
--- /dev/null
+++ b/ui/src/components/table/GroupingsTable.tsx
@@ -0,0 +1,132 @@
+'use client';
+import {
+    useReactTable,
+    flexRender,
+    getCoreRowModel,
+    getPaginationRowModel,
+    getFilteredRowModel,
+    getSortedRowModel,
+    SortingState
+} from '@tanstack/react-table';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
+import ColumnSettings from '@/components/table/table-element/ColumnSettings';
+import GroupingsTableHeaders from '@/components/table/table-element/GroupingsTableHeaders';
+import PaginationBar from '@/components/table/table-element/Pagination';
+import GlobalFilter from '@/components/table/table-element/GlobalFilter';
+import SortArrow from '@/components/table/table-element/SortArrow';
+import { useState } from 'react';
+import { SquarePen } from 'lucide-react';
+import GroupingPathCell from '@/components/table/table-element/GroupingPathCell';
+import { GroupingPath } from '@/models/groupings-api-results';
+
+interface GroupingTableProps {
+    data: GroupingPath[];
+}
+
+const GroupingsTable = ({ data }: GroupingTableProps) => {
+    const [globalFilter, setGlobalFilter] = useState('');
+    const [sorting, setSorting] = useState<SortingState>([]);
+
+    const table = useReactTable({
+        columns: GroupingsTableHeaders,
+        data: data,
+        getCoreRowModel: getCoreRowModel(),
+        getPaginationRowModel: getPaginationRowModel(),
+        getFilteredRowModel: getFilteredRowModel(),
+        getSortedRowModel: getSortedRowModel(),
+        state: { globalFilter, sorting },
+        initialState: {pagination: {pageSize: 20}},
+        onGlobalFilterChange: setGlobalFilter,
+        onSortingChange: setSorting
+    });
+
+    const columnCount = table.getHeaderGroups()[0].headers.length;
+
+    return (
+        <div className="px-2">
+            <div className="flex flex-col md:flex-row md:justify-between pt-5 mb-4">
+                <h1 className="text-[2rem] font-medium text-text-color text-center pt-3">Manage Groupings</h1>
+                <div className="flex items-center space-x-2">
+                    <GlobalFilter filter={globalFilter} setFilter={setGlobalFilter}/>
+                    <div className="hidden sm:block">
+                        <ColumnSettings table={table}/>
+                    </div>
+                </div>
+            </div>
+            <Table className="relative overflow-x-auto">
+                <TableHeader>
+                    {table.getHeaderGroups().map(headerGroup => (
+                        <TableRow key={headerGroup.id}>
+                            {headerGroup.headers.map((header, index) => (
+                                <TableHead
+                                    key={header.id}
+                                    onClick={header.column.getToggleSortingHandler()}
+                                    className={`font-semibold text-uh-black border-solid 
+                                    border-t-[1px] border-b-[2px] py-3 size-[0.1rem] ${
+                                        columnCount === 2 && index === 1 ? 'w-2/3' : 'w-1/3'
+                                    } ${header.column.id !== 'GROUPING NAME' ? 'hidden sm:table-cell' : ''}`}
+                                >
+                                    <div className="flex items-center text-[0.8rem] font-bold">
+                                        {flexRender(header.column.columnDef.header, header.getContext())}
+                                        {header.column.getIsSorted() && (
+                                            <SortArrow direction={header.column.getIsSorted()}/>
+                                        )}
+                                    </div>
+                                </TableHead>
+                            ))}
+                        </TableRow>
+                    ))}
+                </TableHeader>
+                <TableBody>
+                    {table.getRowModel().rows.map((row, index) => (
+                        <TableRow key={row.id} className={index % 2 === 0 ? 'bg-light-grey' : ''}>
+                            {row.getVisibleCells().map(cell => (
+                                <TableCell
+                                    key={cell.id}
+                                    className={`p-0 ${cell.column.id !== 'GROUPING NAME' ?
+                                        'hidden sm:table-cell' : ''}`}
+                                    width={cell.column.columnDef.size}
+                                >
+                                    <div className="flex items-center pl-2 pr-2 text-[15.5px]
+                                    overflow-hidden whitespace-nowrap">
+                                        <div className="m-2">
+                                            {cell.column.id === 'GROUPING NAME' && (
+                                                <div className="flex">
+                                                    <SquarePen className="text-text-primary w-[1.25em] h-[1.25em]"
+                                                               data-testid={`square-pen-icon-${row.id}`}/>
+                                                    <div className="text-table-text text-[1rem] pl-2">
+                                                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                                                    </div>
+                                                </div>
+                                            )}
+                                        </div>
+
+                                        {cell.column.id === 'DESCRIPTION' && (
+                                            <div
+                                                className={`text-table-text text-[1rem] 
+                                                ${columnCount === 3 ?
+                                                    'truncate sm:max-w-[calc(6ch+1em)] md:max-w-none' : ''}`}>
+                                                {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                                            </div>
+                                        )}
+
+                                        {cell.column.id === 'GROUPING PATH' && (
+                                            <GroupingPathCell data={cell.row.getValue('GROUPING PATH')}
+                                                          uniqueId={cell.row.id}/>
+                                        )}
+                                    </div>
+                                </TableCell>
+                            ))}
+                        </TableRow>
+                    ))}
+                </TableBody>
+            </Table>
+            <PaginationBar table={table}/>
+        </div>
+    );
+};
+
+export default GroupingsTable;
+
+
+
diff --git a/ui/src/components/table/table-element/ColumnSettings.tsx b/ui/src/components/table/table-element/ColumnSettings.tsx
new file mode 100644
index 00000000..fe23b0ea
--- /dev/null
+++ b/ui/src/components/table/table-element/ColumnSettings.tsx
@@ -0,0 +1,78 @@
+'use client';
+import { Label } from '@/components/ui/label';
+import { Switch } from '@/components/ui/switch';
+import { useState } from 'react';
+import { GroupingPath } from '@/models/groupings-api-results';
+import { Button } from '@/components/ui/button';
+import {
+    DropdownMenu,
+    DropdownMenuTrigger,
+    DropdownMenuContent,
+    DropdownMenuRadioGroup,
+    DropdownMenuRadioItem
+} from '@/components/ui/dropdown-menu';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faSliders } from '@fortawesome/free-solid-svg-icons';
+import {Table} from '@tanstack/table-core';
+
+interface ToggleProps {
+    table: Table<GroupingPath>;
+}
+const ColumnSettings = ({ table } : ToggleProps) => {
+
+    interface ColumnVisibilityState {
+        DESCRIPTION: boolean;
+        'GROUPING PATH': boolean;
+    }
+
+    const [columnVisibility, setColumnVisibility] = useState<ColumnVisibilityState>({
+        DESCRIPTION: true,
+        'GROUPING PATH': true,
+    })
+
+    const toggleColumnVisibility = (columnKey: keyof ColumnVisibilityState) => (checked: boolean) => {
+        setColumnVisibility((prevState) => {
+            const newState = checked;
+            table.getColumn(columnKey)?.toggleVisibility(newState);
+            return { ...prevState, [columnKey]: newState };
+        });
+    };
+
+    return (
+        <div>
+            <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                    <Button variant="outline"
+                            className="border border-gray-300 hover:bg-transparent"
+                            data-testid="column-settings-button">
+                        <FontAwesomeIcon icon={faSliders} className="w-5 h-5 text-text-color"/>
+                    </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent>
+                    <DropdownMenuRadioGroup>
+                        <DropdownMenuRadioItem value="description" className="px-2">
+                            <div className="flex items-center space-x-2">
+                                <Switch id="description" checked={columnVisibility.DESCRIPTION}
+                                        onCheckedChange={toggleColumnVisibility('DESCRIPTION')}
+                                        className="data-[state=checked]:bg-uh-teal" data-testid="description-switch" />
+                                <Label htmlFor="description">Description</Label>
+                            </div>
+                        </DropdownMenuRadioItem>
+                        <DropdownMenuRadioItem value="grouping path" className="px-2">
+                            <div className="flex items-center space-x-2">
+                                <Switch id="grouping-path" checked={columnVisibility['GROUPING PATH']}
+                                        onCheckedChange={toggleColumnVisibility('GROUPING PATH')}
+                                        className="data-[state=checked]:bg-uh-teal"
+                                        data-testid="grouping-path-switch"/>
+                                <Label htmlFor="grouping-path">Grouping Path</Label>
+                            </div>
+                        </DropdownMenuRadioItem>
+                    </DropdownMenuRadioGroup>
+                </DropdownMenuContent>
+            </DropdownMenu>
+        </div>
+    );
+};
+
+export default ColumnSettings;
+
diff --git a/ui/src/components/table/table-element/GlobalFilter.tsx b/ui/src/components/table/table-element/GlobalFilter.tsx
new file mode 100644
index 00000000..29e73d62
--- /dev/null
+++ b/ui/src/components/table/table-element/GlobalFilter.tsx
@@ -0,0 +1,18 @@
+import { Input } from '@/components/ui/input'
+import { Dispatch, SetStateAction } from 'react';
+
+interface FilterProps {
+    filter: string;
+    setFilter:  Dispatch<SetStateAction<string>>;
+}
+const GlobalFilter = ( {filter, setFilter} : FilterProps) => (
+    <Input
+        placeholder='Filter Groupings...'
+        value={filter || ''}
+        onChange={e => setFilter(e.target.value)}
+    />
+
+);
+
+export default GlobalFilter;
+
diff --git a/ui/src/components/table/table-element/GroupingPathCell.tsx b/ui/src/components/table/table-element/GroupingPathCell.tsx
new file mode 100644
index 00000000..d9215335
--- /dev/null
+++ b/ui/src/components/table/table-element/GroupingPathCell.tsx
@@ -0,0 +1,53 @@
+import { ClipboardIcon } from 'lucide-react';
+import { Input } from '@/components/ui/input';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import { useState } from 'react';
+
+const GroupingPathCell = ({data, uniqueId}: { data: string, uniqueId: string }) => {
+    const [tooltipContent, setTooltipContent] = useState('copy');
+    const [tooltipVisible, setTooltipVisible] = useState(false);
+
+    const handleClick = async () => {
+        await navigator.clipboard.writeText(data);
+        setTooltipContent('copied!');
+        setTooltipVisible(true);
+
+        setTimeout(() => {
+            setTooltipContent('copy');
+            setTooltipVisible(false);
+        }, 2000);
+    };
+
+    return (
+        <div className="flex items-center w-full outline outline-1 rounded h-6 m-1">
+            <Input
+                id={`dataInput-${uniqueId}`}
+                value={data}
+                readOnly
+                className="flex-1 h-6 text-input-text-grey text-[0.875rem]
+                 border-none rounded-none w-[161] truncate"
+            />
+            <TooltipProvider>
+                <Tooltip open={tooltipVisible} onOpenChange={setTooltipVisible}>
+                    <TooltipTrigger asChild>
+                        <button
+                            onClick={handleClick}
+                            className="relative flex-shrink-0 flex items-center
+                             justify-center hover:bg-green-blue h-6 p-2"
+                            data-testid={`clipboard-button-${uniqueId}`}
+                        >
+                            <ClipboardIcon className="h-4 w-4 text-gray-600"
+                                           data-testid={`clipboard-icon-${uniqueId}`}/>
+                        </button>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                        <p data-testid="tooltip">{tooltipContent}</p>
+                    </TooltipContent>
+                </Tooltip>
+            </TooltipProvider>
+        </div>
+    );
+};
+
+export default GroupingPathCell;
+
diff --git a/ui/src/components/table/table-element/GroupingsTableHeaders.tsx b/ui/src/components/table/table-element/GroupingsTableHeaders.tsx
new file mode 100644
index 00000000..e344715c
--- /dev/null
+++ b/ui/src/components/table/table-element/GroupingsTableHeaders.tsx
@@ -0,0 +1,20 @@
+const GroupingsTableHeaders = [
+    {
+        header: 'GROUPING NAME',
+        accessorKey: 'name',
+        id: 'GROUPING NAME'
+    },
+    {
+        header: 'DESCRIPTION',
+        accessorKey: 'description',
+        id: 'DESCRIPTION',
+    },
+    {
+        header: 'GROUPING PATH',
+        accessorKey: 'path',
+        id: 'GROUPING PATH',
+    }
+];
+
+export default GroupingsTableHeaders;
+
diff --git a/ui/src/components/table/table-element/Pagination.tsx b/ui/src/components/table/table-element/Pagination.tsx
new file mode 100644
index 00000000..c8d22795
--- /dev/null
+++ b/ui/src/components/table/table-element/Pagination.tsx
@@ -0,0 +1,108 @@
+import {
+    Pagination,
+    PaginationContent,
+    PaginationItem,
+    PaginationLink,
+    PaginationNext,
+    PaginationPrevious
+} from '@/components/ui/pagination';
+import { DoubleArrowLeftIcon, DoubleArrowRightIcon } from '@radix-ui/react-icons';
+import { useState } from 'react';
+import { GroupingPath } from '@/models/groupings-api-results';
+import {Table} from '@tanstack/table-core';
+
+interface PaginationProps {
+    table: Table<GroupingPath>;
+}
+
+const PaginationBar = ({ table }: PaginationProps) => {
+    const [activePage, setActivePage] = useState(0);
+    const pageRange = 2;
+    const startPage = Math.max(0, activePage - pageRange);
+    const endPage = Math.min(table.getPageCount() - 1, activePage + pageRange);
+
+    return (
+        <Pagination className="flex justify-end pt-3 pb-3 text-green-blue">
+            <PaginationContent className="border rounded gap-0">
+                <PaginationItem key={'first'} className="px-2">
+                    <PaginationLink
+                        onClick={() => {
+                            if (table.getCanPreviousPage()) {
+                                table.firstPage();
+                                setActivePage(0);
+                            }
+                        }}
+                        className={`${
+                            !table.getCanPreviousPage() ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'
+                        } hover:bg-light-grey`}
+                    >
+                        <DoubleArrowLeftIcon />
+                        First
+                    </PaginationLink>
+                </PaginationItem>
+                <PaginationItem key={'prev'} className="border-l">
+                    <PaginationPrevious
+                        onClick={() => {
+                            if (table.getCanPreviousPage()) {
+                                table.previousPage();
+                                setActivePage(activePage - 1);
+                            }
+                        }}
+                        className={`${
+                            !table.getCanPreviousPage() ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'
+                        }`}
+                    />
+                </PaginationItem>
+                {Array.from({ length: endPage - startPage + 1 }, (_, i) => startPage + i).map((i) => (
+                    <PaginationItem key={i} className="border-x">
+                        <PaginationLink
+                            onClick={() => {
+                                table.setPageIndex(i);
+                                setActivePage(i);
+                            }}
+                            className={`rounded-none border-transparent ${
+                                i === activePage
+                                    ? 'bg-light-green text-black cursor-default'
+                                    : 'hover:bg-light-grey'
+                            }`}
+                        >
+                            {i + 1}
+                        </PaginationLink>
+                    </PaginationItem>
+                ))}
+                <PaginationItem key={'next'}>
+                    <PaginationNext
+                        onClick={() => {
+                            if (table.getCanNextPage()) {
+                                table.nextPage();
+                                setActivePage(activePage + 1);
+                            }
+                        }}
+                        className={`${
+                            !table.getCanNextPage() ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'
+                        }`}
+                    />
+                </PaginationItem>
+                <PaginationItem key={'last'} className="px-2 border-l">
+                    <PaginationLink
+                        onClick={() => {
+                            if (table.getCanNextPage()) {
+                                table.lastPage();
+                                setActivePage(table.getPageCount() - 1);
+                            }
+                        }}
+                        className={`${
+                            !table.getCanNextPage() ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'
+                        } hover:bg-light-grey`}
+                    >
+                        <span className="pr-1">Last</span>
+                        <DoubleArrowRightIcon />
+                    </PaginationLink>
+                </PaginationItem>
+            </PaginationContent>
+        </Pagination>
+    );
+};
+
+export default PaginationBar;
+
diff --git a/ui/src/components/table/table-element/SortArrow.tsx b/ui/src/components/table/table-element/SortArrow.tsx
new file mode 100644
index 00000000..e976ea7b
--- /dev/null
+++ b/ui/src/components/table/table-element/SortArrow.tsx
@@ -0,0 +1,18 @@
+import { ChevronUp, ChevronDown } from 'lucide-react';
+
+interface SortArrowProps {
+    direction: string | boolean;
+}
+
+const SortArrow = ({ direction }: SortArrowProps) => (
+    <div>
+        {direction === 'asc' ? (
+            <ChevronUp size={15} strokeWidth={3} data-testid="chevron-up-icon"/>
+        ) : direction === 'desc' ? (
+            <ChevronDown size={15} strokeWidth={3} data-testid="chevron-down-icon" />
+        ) : null}
+    </div>
+);
+
+export default SortArrow;
+
diff --git a/ui/src/components/ui/button.tsx b/ui/src/components/ui/button.tsx
index aba0b678..cf0684d6 100644
--- a/ui/src/components/ui/button.tsx
+++ b/ui/src/components/ui/button.tsx
@@ -5,12 +5,16 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from '@/components/ui/utils';
 
 const buttonVariants = cva(
-    `inline-flex items-center justify-center whitespace-nowrap rounded-[0.25rem] text-base font-normal ring-offset-white
-        transition-colors focus-visible:border-blue-300 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-blue-200 disabled:pointer-events-none disabled:opacity-50 dark:ring-offset-slate-950 dark:focus-visible:ring-slate-300`,
+    `inline-flex items-center justify-center whitespace-nowrap rounded-[0.25rem] text-base font-normal
+     ring-offset-white transition-colors focus-visible:border-blue-300 focus-visible:outline-none
+      focus-visible:ring-[3px] focus-visible:ring-blue-200 disabled:pointer-events-none
+          disabled:opacity-50 dark:ring-offset-slate-950 dark:focus-visible:ring-slate-300`,
     {
         variants: {
             variant: {
-                default: `btn-gradient text-white bg-[#6fa9be] border border-transparent text-slate-50 [text-shadow:_0_1px_1px_#444] border-x-black/[.1] border-t-black/[.1] border-b-black/[.25] bg-repeat-x`,
+                default: `btn-gradient text-white bg-[#6fa9be] border
+                 border-transparent text-slate-50 [text-shadow:_0_1px_1px_#444]
+                  border-x-black/[.1] border-t-black/[.1] border-b-black/[.25] bg-repeat-x`,
                 destructive: `bg-red-500 text-slate-50 hover:bg-red-500/90 dark:bg-red-900 dark:text-slate-50
                     dark:hover:bg-red-900/90`,
                 outline: `border border-green-blue bg-white hover:bg-green-blue hover:text-white text-uh-teal`,
diff --git a/ui/src/components/ui/dropdown-menu.tsx b/ui/src/components/ui/dropdown-menu.tsx
new file mode 100644
index 00000000..41b2fe77
--- /dev/null
+++ b/ui/src/components/ui/dropdown-menu.tsx
@@ -0,0 +1,222 @@
+'use client'
+
+import * as React from 'react'
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
+import { Check, ChevronRight, Circle } from 'lucide-react'
+
+import { cn } from '@/components/ui/utils'
+
+const DropdownMenu = DropdownMenuPrimitive.Root
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      `flex cursor-default select-none items-center rounded-sm px-2 py-1.5
+       text-sm outline-none focus:bg-slate-100 data-[state=open]:bg-slate-100
+        dark:focus:bg-slate-800 dark:data-[state=open]:bg-slate-800`,
+      inset && 'pl-8',
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </DropdownMenuPrimitive.SubTrigger>
+))
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      `z-50 min-w-[8rem] overflow-hidden rounded-md border border-slate-200 bg-white p-1
+       text-slate-950 shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out
+        data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95
+         data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2
+          data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2
+           data-[side=top]:slide-in-from-bottom-2 dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50`,
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        `z-50 min-w-[8rem] overflow-hidden rounded-md border border-slate-200
+         bg-white p-1 text-slate-950 shadow-md data-[state=open]:animate-in
+          data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0
+           data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95
+            data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2
+             data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2
+              dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50`,
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+))
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      `relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm
+       outline-none transition-colors focus:bg-slate-100 focus:text-slate-900
+        data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-slate-800
+        dark:focus:text-slate-50`,
+      inset && 'pl-8',
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      `relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2
+       text-sm outline-none transition-colors focus:bg-slate-100 focus:text-slate-900
+        data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-slate-800
+         dark:focus:text-slate-50`,
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+))
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      `relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2
+       text-sm outline-none transition-colors focus:bg-slate-100 focus:text-slate-900
+        data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-slate-800
+         dark:focus:text-slate-50`,
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+))
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      'px-2 py-1.5 text-sm font-semibold',
+      inset && 'pl-8',
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn('-mx-1 my-1 h-px bg-slate-100 dark:bg-slate-800', className)}
+    {...props}
+  />
+))
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn('ml-auto text-xs tracking-widest opacity-60', className)}
+      {...props}
+    />
+  )
+}
+DropdownMenuShortcut.displayName = 'DropdownMenuShortcut'
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+}
diff --git a/ui/src/components/ui/pagination.tsx b/ui/src/components/ui/pagination.tsx
new file mode 100644
index 00000000..d746dfbe
--- /dev/null
+++ b/ui/src/components/ui/pagination.tsx
@@ -0,0 +1,117 @@
+import * as React from 'react'
+import { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react'
+
+import { cn } from '@/components/ui/utils'
+import { ButtonProps, buttonVariants } from '@/components/ui/button'
+
+const Pagination = ({ className, ...props }: React.ComponentProps<'nav'>) => (
+  <nav
+    role="navigation"
+    aria-label="pagination"
+    className={cn('mx-auto flex w-full justify-center', className)}
+    {...props}
+  />
+)
+Pagination.displayName = 'Pagination'
+
+const PaginationContent = React.forwardRef<
+  HTMLUListElement,
+  React.ComponentProps<'ul'>
+>(({ className, ...props }, ref) => (
+  <ul
+    ref={ref}
+    className={cn('flex flex-row items-center gap-1', className)}
+    {...props}
+  />
+))
+PaginationContent.displayName = 'PaginationContent'
+
+const PaginationItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentProps<'li'>
+>(({ className, ...props }, ref) => (
+  <li ref={ref} className={cn('', className)} {...props} />
+))
+PaginationItem.displayName = 'PaginationItem'
+
+type PaginationLinkProps = {
+  isActive?: boolean
+} & Pick<ButtonProps, 'size'> &
+  React.ComponentProps<'a'>
+
+const PaginationLink = ({
+  className,
+  isActive,
+  size = 'icon',
+  ...props
+}: PaginationLinkProps) => (
+  <a
+    aria-current={isActive ? 'page' : undefined}
+    className={cn(
+      buttonVariants({
+        variant: isActive ? 'outline' : 'ghost',
+        size,
+      }),
+      className
+    )}
+    {...props}
+  />
+)
+PaginationLink.displayName = 'PaginationLink'
+
+const PaginationPrevious = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to previous page"
+    size="default"
+    className={cn('gap-1 pl-2.5', className)}
+    {...props}
+  >
+    <ChevronLeft className="h-4 w-4" />
+    <span>Previous</span>
+  </PaginationLink>
+)
+PaginationPrevious.displayName = 'PaginationPrevious'
+
+const PaginationNext = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to next page"
+    size="default"
+    className={cn('gap-1 pr-2.5', className)}
+    {...props}
+  >
+    <span>Next</span>
+    <ChevronRight className="h-4 w-4" />
+  </PaginationLink>
+)
+PaginationNext.displayName = 'PaginationNext'
+
+const PaginationEllipsis = ({
+  className,
+  ...props
+}: React.ComponentProps<'span'>) => (
+  <span
+    aria-hidden
+    className={cn('flex h-9 w-9 items-center justify-center', className)}
+    {...props}
+  >
+    <MoreHorizontal className="h-4 w-4" />
+    <span className="sr-only">More pages</span>
+  </span>
+)
+PaginationEllipsis.displayName = 'PaginationEllipsis'
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+}
diff --git a/ui/src/components/ui/switch.tsx b/ui/src/components/ui/switch.tsx
new file mode 100644
index 00000000..638a8c3f
--- /dev/null
+++ b/ui/src/components/ui/switch.tsx
@@ -0,0 +1,36 @@
+'use client'
+
+import * as React from 'react'
+import * as SwitchPrimitives from '@radix-ui/react-switch'
+
+import { cn } from '@/components/ui/utils'
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      `peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent
+       transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950
+        focus-visible:ring-offset-2 focus-visible:ring-offset-white disabled:cursor-not-allowed
+         disabled:opacity-50 data-[state=checked]:bg-slate-900 data-[state=unchecked]:bg-slate-200 
+         dark:focus-visible:ring-slate-300 dark:focus-visible:ring-offset-slate-950
+          dark:data-[state=checked]:bg-slate-50 dark:data-[state=unchecked]:bg-slate-800`,
+      className
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        `pointer-events-none block h-5 w-5 rounded-full bg-white shadow-lg ring-0
+         transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0
+          dark:bg-slate-950`
+      )}
+    />
+  </SwitchPrimitives.Root>
+))
+Switch.displayName = SwitchPrimitives.Root.displayName
+
+export { Switch }
diff --git a/ui/src/components/ui/table.tsx b/ui/src/components/ui/table.tsx
new file mode 100644
index 00000000..fe2d78d9
--- /dev/null
+++ b/ui/src/components/ui/table.tsx
@@ -0,0 +1,119 @@
+import * as React from 'react'
+
+import { cn } from '@/components/ui/utils'
+
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className="relative w-full overflow-auto">
+    <table
+      ref={ref}
+      className={cn('w-full caption-bottom text-sm', className)}
+      {...props}
+    />
+  </div>
+))
+Table.displayName = 'Table'
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn('[&_tr]:border-b', className)} {...props} />
+))
+TableHeader.displayName = 'TableHeader'
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn('[&_tr:last-child]:border-0', className)}
+    {...props}
+  />
+))
+TableBody.displayName = 'TableBody'
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn(
+      'border-t bg-slate-100/50 font-medium [&>tr]:last:border-b-0 dark:bg-slate-800/50',
+      className
+    )}
+    {...props}
+  />
+))
+TableFooter.displayName = 'TableFooter'
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      `border-b transition-colors hover:bg-slate-100/50
+       data-[state=selected]:bg-slate-100 dark:hover:bg-slate-800/50
+        dark:data-[state=selected]:bg-slate-800`,
+      className
+    )}
+    {...props}
+  />
+))
+TableRow.displayName = 'TableRow'
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      'h-12 px-4 text-left align-middle font-medium text-slate-500 [&:has([role=checkbox])]:pr-0 dark:text-slate-400',
+      className
+    )}
+    {...props}
+  />
+))
+TableHead.displayName = 'TableHead'
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn('p-4 align-middle [&:has([role=checkbox])]:pr-0', className)}
+    {...props}
+  />
+))
+TableCell.displayName = 'TableCell'
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn('mt-4 text-sm text-slate-500 dark:text-slate-400', className)}
+    {...props}
+  />
+))
+TableCaption.displayName = 'TableCaption'
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}
diff --git a/ui/src/components/ui/tooltip.tsx b/ui/src/components/ui/tooltip.tsx
new file mode 100644
index 00000000..949b469a
--- /dev/null
+++ b/ui/src/components/ui/tooltip.tsx
@@ -0,0 +1,35 @@
+'use client'
+
+import * as React from 'react'
+import * as TooltipPrimitive from '@radix-ui/react-tooltip'
+
+import { cn } from '@/components/ui/utils'
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      `z-50 overflow-hidden rounded-md border border-slate-200 bg-white px-3 py-1.5
+       text-sm text-slate-950 shadow-md animate-in fade-in-0 zoom-in-95
+        data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95
+         data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2
+          data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2
+           dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50`,
+      className
+    )}
+    {...props}
+  />
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
diff --git a/ui/tailwind.config.ts b/ui/tailwind.config.ts
index 21cf3651..e4abfd90 100644
--- a/ui/tailwind.config.ts
+++ b/ui/tailwind.config.ts
@@ -31,7 +31,11 @@ const config = {
                 'text-primary': '#004252',
                 'link-color' : '#006ffa',
                 'link-hover-color' : '#0056b3',
-                'blue-background': '#00a6b2'
+                'blue-background': '#00a6b2',
+                'light-grey': '#f2f2f2',
+                'light-green': '#c7e7e0',
+                'input-text-grey': '#495057',
+                'table-text': '#212529'
             },
             fontFamily: {
                 'source-sans-3': ['var(--font-source-sans-3)', 'Helvetica', 'Arial', 'sans-serif'],
@@ -64,4 +68,4 @@ const config = {
     ],
 } satisfies Config
 
-export default config;
+export default config;
\ No newline at end of file
diff --git a/ui/tests/app/(home)/_components/login-button.test.tsx b/ui/tests/app/(home)/_components/login-button.test.tsx
index ee3c42ed..573b3605 100644
--- a/ui/tests/app/(home)/_components/login-button.test.tsx
+++ b/ui/tests/app/(home)/_components/login-button.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { redirect } from 'next/navigation';
 import User, { AnonymousUser } from '@/access/user';
@@ -14,13 +14,18 @@ describe('LoginButton', () => {
         it('should render a Login button', () => {
             render(<LoginButton currentUser={AnonymousUser} />);
 
-            expect(screen.getByRole('button', { name: 'Login Here' })).toBeInTheDocument;
+            expect(screen.getByRole('button', { name: 'Login Here' })).toBeInTheDocument();
+
         });
+
         it('should visit the CAS login url on click', async () => {
             render(<LoginButton currentUser={AnonymousUser} />);
 
             const casLoginUrl = `${casUrl}/login?service=${encodeURIComponent(`${baseUrl}/api/cas/login`)}`;
-            await userEvent.click(screen.getByRole('button', { name: 'Login Here' }));
+            await waitFor(async () => {
+                await userEvent.click(screen.getByRole('button', { name: 'Login Here' }));
+            });
+
             expect(redirect).toHaveBeenCalledWith(casLoginUrl);
         });
     });
@@ -33,9 +38,11 @@ describe('LoginButton', () => {
         it('should render a Logout button with the uid of the logged-in user', () => {
             render(<LoginButton currentUser={testUser} />);
 
-            expect(screen.getByRole('button', { name: 'Logout' })).toBeInTheDocument;
+            // Correct the assertion by calling toBeInTheDocument as a function
+            expect(screen.getByRole('button', { name: 'Logout' })).toBeInTheDocument();
         });
 
+
         it('should visit the CAS logout url on click', async () => {
             render(<LoginButton currentUser={testUser} />);
 
diff --git a/ui/tests/app/feedback/_components/feedback-form.test.tsx b/ui/tests/app/feedback/_components/feedback-form.test.tsx
index 974d136b..41d4892f 100644
--- a/ui/tests/app/feedback/_components/feedback-form.test.tsx
+++ b/ui/tests/app/feedback/_components/feedback-form.test.tsx
@@ -29,8 +29,10 @@ describe('FeedbackForm', () => {
             text: 'text'
         });
 
-        await user.type(screen.getByRole('textbox', { name: 'Your Feedback: *' }), text);
-        await user.click(screen.getByRole('button', { name: 'Submit' }));
+        await waitFor(async () => {
+            await user.type(screen.getByRole('textbox', { name: 'Your Feedback: *' }), text);
+            await user.click(screen.getByRole('button', { name: 'Submit' }));
+        }, { timeout: 3000 });
 
         expect(screen.getByRole('alert')).toBeInTheDocument();
         expect(screen.getByRole('heading', { name: 'Thank You!' })).toBeInTheDocument();
@@ -51,8 +53,11 @@ describe('FeedbackForm', () => {
             text: 'text'
         });
 
-        await user.type(screen.getByRole('textbox', { name: 'Your Feedback: *' }), text);
-        await user.click(screen.getByRole('button', { name: 'Submit' }));
+        await waitFor(async () => {
+            await user.type(screen.getByRole('textbox', { name: 'Your Feedback: *' }), text);
+            await user.click(screen.getByRole('button', { name: 'Submit' }));
+        }, { timeout: 3000 });
+
 
         expect(screen.getByRole('alert')).toBeInTheDocument();
         expect(screen.getByRole('heading', { name: 'Oops!' })).toBeInTheDocument();
@@ -79,17 +84,23 @@ describe('FeedbackForm', () => {
             text: 'text'
         });
 
-        await user.type(
-            screen.getByRole('textbox', { name: 'Your Feedback: *' }),
-            'This is a test to see if only one alert displays at a time.'
-        );
-        await user.click(screen.getByRole('button', { name: 'Submit' }));
+        await waitFor(async () => {
+            await user.type(
+                screen.getByRole('textbox', { name: 'Your Feedback: *' }),
+                'This is a test to see if only one alert displays at a time.'
+            );
+            await user.click(screen.getByRole('button', { name: 'Submit' }));
+        }, { timeout: 3000 });
+
+
 
         expect(screen.getByRole('alert')).toBeInTheDocument();
         expect(screen.getByRole('heading', { name: 'Oops!' })).toBeInTheDocument();
         expect(screen.queryByRole('heading', { name: 'Thank You!' })).not.toBeInTheDocument();
 
-        await user.click(screen.getByRole('button', { name: 'Submit' }));
+        await waitFor(async () => {
+            await user.click(screen.getByRole('button', { name: 'Submit' }));
+        }, { timeout: 3000 });
 
         expect(screen.getByRole('alert')).toBeInTheDocument();
         await waitFor(() => {
diff --git a/ui/tests/app/groupings/page.test.tsx b/ui/tests/app/groupings/page.test.tsx
index 3f84d173..8076af4b 100644
--- a/ui/tests/app/groupings/page.test.tsx
+++ b/ui/tests/app/groupings/page.test.tsx
@@ -1,21 +1,49 @@
 import { render, screen } from '@testing-library/react';
 import Groupings from '@/app/groupings/page';
-import GroupingsLayout from '@/app/groupings/layout';
+import * as GroupingsApiService from '@/actions/groupings-api';
+
+// Mock the `ownerGroupings` function
+jest.mock('@/actions/groupings-api', () => ({
+    ownerGroupings: jest.fn()
+}));
+
+// Define the expected types
+interface GroupingPaths {
+    groupingPaths: { path: string; name: string; description: string; }[];
+}
+
+interface ApiError {
+    resultCode: string;
+}
+
+// Combine types to fit the expected response
+const mockData: GroupingPaths & ApiError = {
+    resultCode: 'SUCCESS',
+    groupingPaths: Array.from({length: 10}, (_, i) => ({
+        path: `tmp:example:example-${i}`,
+        name: `example-${i}`,
+        description: `Test Description ${i}`
+    }))
+};
+
+beforeEach(() => {
+    (GroupingsApiService.ownerGroupings as jest.Mock).mockResolvedValue(mockData);
+});
 
 describe('Groupings', () => {
-    it('should render the Groupings page with the appropriate header', () => {
-        render(
-            <GroupingsLayout>
-                <Groupings />
-            </GroupingsLayout>
-        );
+    it('should render the Groupings page with the appropriate header and group data', async () => {
+        render(await Groupings());
+
+        // Verify page elements
         expect(screen.getByRole('main')).toBeInTheDocument();
+        expect(screen.getByRole('heading', { name: /Manage My Groupings/i })).toBeInTheDocument();
+        expect(screen.getByText(/View and manage groupings I own. Manage members, configure grouping options and sync destinations./i)).toBeInTheDocument();
+        expect(screen.getByRole('table')).toBeInTheDocument();
 
-        expect(screen.getByRole('heading', { name: 'Manage My Groupings' })).toBeInTheDocument();
-        expect(
-            screen.getByText(
-                'View and manage groupings I own. Manage members, configure grouping options and sync destinations.'
-            )
-        ).toBeInTheDocument();
+        // check if specific group names are present
+        mockData.groupingPaths.forEach(group => {
+            expect(screen.getByText(group.name)).toBeInTheDocument();
+        });
     });
 });
+
diff --git a/ui/tests/components/table/GroupingsTable.test.tsx b/ui/tests/components/table/GroupingsTable.test.tsx
new file mode 100644
index 00000000..e1f25179
--- /dev/null
+++ b/ui/tests/components/table/GroupingsTable.test.tsx
@@ -0,0 +1,194 @@
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import GroupingsTable from "@/components/table/GroupingsTable";
+import userEvent from '@testing-library/user-event';
+
+
+const generateSampleData = Array.from({length: 200}, (_, i) => ({
+    path: `tmp:example:example-${i}`,
+    name: `example-${i}`,
+    description: `Test Description ${i}`
+}));
+
+const clickAndWaitForSorting = async (
+    headerText: string,
+    expectedOrder: string[],
+    isAscending = true
+) => {
+    fireEvent.click(screen.getByText(headerText));
+    await waitFor(() => {
+        const chevronIcon = screen.getByTestId(isAscending ? 'chevron-up-icon' : 'chevron-down-icon');
+        expect(chevronIcon).toBeInTheDocument();
+    });
+    const rows = screen.getAllByRole('row');
+    expectedOrder.forEach((item, index) => {
+        expect(rows[index + 1]).toHaveTextContent(item);
+    });
+};
+
+describe('GroupingsTable', () => {
+    test('renders table correctly', () => {
+        render(<GroupingsTable data={generateSampleData}/>);
+
+        // Check for "Manage Groupings", filter, and column settings
+        expect(screen.getByText('Manage Groupings')).toBeInTheDocument();
+        expect(screen.getByPlaceholderText('Filter Groupings...')).toBeInTheDocument();
+        expect(screen.getByTestId('column-settings-button')).toBeInTheDocument();
+
+        // check for table column headers
+        expect(screen.getByText('GROUPING NAME')).toBeInTheDocument();
+        expect(screen.getByText('DESCRIPTION')).toBeInTheDocument();
+        expect(screen.getByText('GROUPING PATH')).toBeInTheDocument();
+        expect(screen.queryByTestId('chevron-up-icon')).not.toBeInTheDocument();
+        expect(screen.queryByTestId('chevron-down-icon')).not.toBeInTheDocument();
+
+        expect(screen.getAllByRole('row').length).toBeLessThanOrEqual(generateSampleData.length);
+
+        const first20Groupings = generateSampleData.slice(0, 20); // table has 20 rows
+        first20Groupings.forEach((group,index) => {
+            expect(screen.getByTestId(`square-pen-icon-${index}`)).toBeInTheDocument();
+            expect(screen.getByText(group.name)).toBeInTheDocument();
+            expect(screen.getByText(group.description)).toBeInTheDocument();
+            expect(screen.getByDisplayValue(group.path)).toBeInTheDocument();
+            expect(screen.getByTestId(`clipboard-button-${index}`)).toBeInTheDocument();
+            expect(screen.getByTestId(`clipboard-icon-${index}`)).toBeInTheDocument();
+        });
+
+        // check for pagination
+        expect(screen.getByText('First')).toBeInTheDocument();
+        expect(screen.getByText('Previous')).toBeInTheDocument();
+        expect(screen.getByText(1)).toBeInTheDocument();
+        expect(screen.getByText('Next')).toBeInTheDocument();
+        expect(screen.getByText('Last')).toBeInTheDocument();
+    });
+
+    it('filters data correctly using global filter', () => {
+        render(<GroupingsTable data={generateSampleData}/>);
+
+        const filterInput = screen.getByPlaceholderText('Filter Groupings...');
+        fireEvent.change(filterInput, {target: {value: '1'}});
+
+        expect(screen.getByText('example-1')).toBeInTheDocument();
+        expect(screen.queryByText('example-0')).not.toBeInTheDocument();
+
+        fireEvent.change(filterInput, {target: {value: '0'}});
+        expect(screen.getByText('example-0')).toBeInTheDocument();
+        expect(screen.queryByText('example-1')).not.toBeInTheDocument();
+    });
+
+    it('sorts data when header is clicked', async () => {
+        render(<GroupingsTable data={generateSampleData} />);
+
+        // Sort by grouping name
+        await clickAndWaitForSorting('GROUPING NAME', [
+            'example-0',
+            'example-1'
+        ], true);
+
+        // Descending order
+        await clickAndWaitForSorting('GROUPING NAME', [
+            `example-${generateSampleData.length - 1}`,
+            `example-${generateSampleData.length - 2}`
+        ], false);
+
+        // Sort by description
+        await clickAndWaitForSorting('DESCRIPTION', [
+            'Test Description 0',
+            'Test Description 1'
+        ], true);
+
+        // Descending order
+        await clickAndWaitForSorting('DESCRIPTION', [
+            `Test Description ${generateSampleData.length - 1}`,
+            `Test Description ${generateSampleData.length - 2}`
+        ], false);
+
+        // Sort by grouping path
+        await clickAndWaitForSorting('GROUPING PATH', [
+            'example-0',
+            'example-1'
+        ], true);
+
+        // Descending order
+        await clickAndWaitForSorting('GROUPING PATH', [
+            `example-${generateSampleData.length - 1}`,
+            `example-${generateSampleData.length - 2}`
+        ], false);
+    });
+
+    it('column settings', async () => {
+        render(<GroupingsTable data={generateSampleData}/>);
+        const button = screen.getByTestId('column-settings-button');
+        const user = userEvent.setup();
+
+        const toggleColumnVisibility = async (columnTestId: string, isVisible: boolean) => {
+            await waitFor(async () => {
+                await user.click(button);
+            })
+            fireEvent.click(screen.getByTestId(columnTestId));
+            if (isVisible) {
+                // check getByText('DESCRIPTION') or getBYText('GROUPING PATH') to be in document
+                expect(screen.getByText(columnTestId.replace('-switch', '').replace('-', ' ').toUpperCase())).toBeInTheDocument();
+            } else {
+                expect(screen.queryByText(columnTestId.replace('-switch', '').replace('-', ' ').toUpperCase())).not.toBeInTheDocument();
+            }
+        };
+        // Toggle description column
+        await toggleColumnVisibility('description-switch', false);
+        await toggleColumnVisibility('description-switch', true);
+
+        // Toggle grouping path column
+        await toggleColumnVisibility('grouping-path-switch', false);
+        await toggleColumnVisibility('grouping-path-switch', true);
+    });
+
+    it('clipboard buttons work correctly when clicked', async () => {
+        if (!navigator.clipboard) {
+            Object.defineProperty(navigator, 'clipboard', {
+                value: {
+                    writeText: jest.fn(() => Promise.resolve()),
+                },
+                writable: true,
+            });
+        } else {
+            jest.spyOn(navigator.clipboard, 'writeText').mockImplementation(() => Promise.resolve());
+        }
+
+        render(<GroupingsTable data={generateSampleData} />);
+
+        const clipboardIcon0 = screen.getByTestId('clipboard-icon-0');
+        const clipboardIcon1 = screen.getByTestId('clipboard-icon-1');
+
+        fireEvent.click(clipboardIcon0);
+        await waitFor(() => {
+            expect(screen.getAllByText('copied!')[0]).toBeInTheDocument();
+            expect(navigator.clipboard.writeText).toHaveBeenCalledWith('tmp:example:example-0');
+        });
+
+        fireEvent.click(clipboardIcon1);
+        await waitFor(() => {
+            expect(screen.getAllByText('copied!')[0]).toBeInTheDocument();
+            expect(navigator.clipboard.writeText).toHaveBeenCalledWith('tmp:example:example-1');
+        });
+    });
+
+    it('Pagination buttons work correctly', async () => {
+        const pageSize = 20;
+        render(<GroupingsTable data={generateSampleData}/>);
+
+        const checkPageContent = async(
+            buttonText: string,
+            expectedRowStart: number,
+            expectedRowEnd: number,
+        ) => {
+            fireEvent.click(screen.getByText(buttonText));
+            const rows = screen.getAllByRole('row');
+            expect(rows.length).toBe(pageSize + 1); // +1 for header row
+            expect(screen.getByText(`example-${expectedRowStart}`)).toBeInTheDocument();
+            expect(screen.getByText(`example-${expectedRowEnd}`)).toBeInTheDocument();
+        }
+        await checkPageContent('First', 0, pageSize - 1);
+        await checkPageContent('Next', pageSize, pageSize * 2 - 1);
+        await checkPageContent('Last', generateSampleData.length - pageSize, generateSampleData.length - 1);
+        await checkPageContent('Previous', generateSampleData.length - (pageSize * 2) , generateSampleData.length - pageSize -1);
+    });
+});
diff --git a/ui/tests/components/table/table-element/ColumnSettings.test.tsx b/ui/tests/components/table/table-element/ColumnSettings.test.tsx
new file mode 100644
index 00000000..3cf3cff9
--- /dev/null
+++ b/ui/tests/components/table/table-element/ColumnSettings.test.tsx
@@ -0,0 +1,119 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import ColumnSettings from '@/components/table/table-element/ColumnSettings';
+import { Table } from '@tanstack/table-core';
+import { GroupingPath } from '@/models/groupings-api-results';
+
+const mockVisibilityState = {
+    DESCRIPTION: true,
+    'GROUPING PATH': true,
+};
+
+const mockToggleVisibility = jest.fn((columnKey: 'DESCRIPTION' | 'GROUPING PATH', newState) => {
+    mockVisibilityState[columnKey] = newState;
+});
+
+const columnMocks = {
+    DESCRIPTION: {
+        toggleVisibility: (newState: boolean) => mockToggleVisibility('DESCRIPTION', newState),
+    },
+    'GROUPING PATH': {
+        toggleVisibility: (newState: boolean) => mockToggleVisibility('GROUPING PATH', newState),
+    },
+};
+
+const mockTable = {
+    getColumn: jest.fn().mockImplementation((columnKey: 'DESCRIPTION' | 'GROUPING PATH') => {
+        return {
+            toggleVisibility: columnMocks[columnKey].toggleVisibility,
+        };
+    }),
+} as unknown as Table<GroupingPath>;
+
+describe('ColumnSettings', () => {
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it('toggles description column visibility with dropdown menu', async () => {
+        render(<ColumnSettings table={mockTable} />);
+        const user = userEvent.setup();
+
+        // Open the dropdown menu
+        const button = screen.getByTestId('column-settings-button');
+        await waitFor(async () => {
+            await user.click(button);
+        });
+
+        // Verify switches are visible and their initial state
+        const descriptionSwitch = await screen.findByTestId('description-switch');
+        expect(descriptionSwitch).toBeVisible();
+        expect(descriptionSwitch).toHaveAttribute('aria-checked', 'true');
+
+        // Click the switch to toggle it
+        await waitFor(async () => {
+            await user.click(descriptionSwitch);
+        });
+
+        expect(mockToggleVisibility).toHaveBeenCalledWith('DESCRIPTION', false);
+        expect(descriptionSwitch).toHaveAttribute('aria-checked', 'false');
+
+        // Ensure dropdown menu has closed and then Reopen the dropdown menu
+        await waitFor(async () => {
+            expect(screen.queryByTestId('description-switch')).not.toBeInTheDocument();
+            await user.click(button);
+        });
+
+        // Click the switch again to toggle it back to true
+        const reopenedDescriptionSwitch = await screen.findByTestId('description-switch');
+        await waitFor(async () => {
+            await user.click(reopenedDescriptionSwitch);
+        })
+
+        expect(mockToggleVisibility).toHaveBeenCalledWith('DESCRIPTION', true);
+        expect(reopenedDescriptionSwitch).toHaveAttribute('aria-checked', 'true');
+    });
+
+    it('toggles grouping path column visibility with dropdown menu', async () => {
+        render(<ColumnSettings table={mockTable} />);
+        const user = userEvent.setup();
+
+        // Open the dropdown menu
+        const button = screen.getByTestId('column-settings-button');
+
+        await waitFor(async () => {
+            await user.click(button);
+        })
+
+
+        // Verify switches are visible and their initial state
+        const groupingPathSwitch = await screen.findByTestId('grouping-path-switch');
+        expect(groupingPathSwitch).toBeVisible();
+        expect(groupingPathSwitch).toHaveAttribute('aria-checked', 'true');
+
+        // Click the switch to toggle it
+        await waitFor(async () => {
+            await user.click(groupingPathSwitch);
+        });
+
+        expect(mockToggleVisibility).toHaveBeenCalledWith('GROUPING PATH', false);
+        expect(groupingPathSwitch).toHaveAttribute('aria-checked', 'false');
+
+        // Ensure dropdown menu has closed and then Reopen the dropdown menu
+        await waitFor(async () => {
+            expect(screen.queryByTestId('grouping-path-switch')).not.toBeInTheDocument();
+            await user.click(button);
+        });
+
+        // Click the switch again to toggle it back to true
+        const reopenedGroupingPathSwitch = await screen.findByTestId('grouping-path-switch');
+
+        await waitFor(async () => {
+            await user.click(reopenedGroupingPathSwitch);
+        });
+
+        expect(mockToggleVisibility).toHaveBeenCalledWith('GROUPING PATH', true);
+        expect(reopenedGroupingPathSwitch).toHaveAttribute('aria-checked', 'true');
+    });
+});
+
diff --git a/ui/tests/components/table/table-element/GlobalFilter.test.tsx b/ui/tests/components/table/table-element/GlobalFilter.test.tsx
new file mode 100644
index 00000000..edc9512d
--- /dev/null
+++ b/ui/tests/components/table/table-element/GlobalFilter.test.tsx
@@ -0,0 +1,20 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import GlobalFilter from '@/components/table/table-element/GlobalFilter';
+
+describe('GlobalFilter', () => {
+    const mockSetFilter = jest.fn();
+
+    it('renders the input with correct placeholder and value', () => {
+        render(<GlobalFilter filter={'test'} setFilter={mockSetFilter}/>);
+        expect(screen.getByPlaceholderText('Filter Groupings...')).toHaveValue('test');
+    });
+
+    it('renders call setFilter when the input value changes', () => {
+        render(<GlobalFilter filter="" setFilter={mockSetFilter}/>);
+
+        fireEvent.change(screen.getByPlaceholderText('Filter Groupings...'), {target: {value : 'new test'}});
+        expect(mockSetFilter).toHaveBeenCalledWith('new test');
+    });
+
+});
+
diff --git a/ui/tests/components/table/table-element/GroupingPathCell.test.tsx b/ui/tests/components/table/table-element/GroupingPathCell.test.tsx
new file mode 100644
index 00000000..5d34bf44
--- /dev/null
+++ b/ui/tests/components/table/table-element/GroupingPathCell.test.tsx
@@ -0,0 +1,61 @@
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import GroupingPathCell from "@/components/table/table-element/GroupingPathCell";
+import userEvent from "@testing-library/user-event";
+
+beforeEach(() => {
+    if (!navigator.clipboard) {
+        Object.defineProperty(navigator, 'clipboard', {
+            value: {
+                writeText: jest.fn(() => Promise.resolve()),
+            },
+            writable: true,
+        });
+    } else {
+        jest.spyOn(navigator.clipboard, 'writeText').mockImplementation(() => Promise.resolve());
+    }
+});
+
+describe('GroupingPathCell', () => {
+    const data = 'tmp:example:example-aux';
+    const uniqueId = "1";
+
+    it('renders the component with correct data and clipboard button', async () => {
+        render(<GroupingPathCell data={data} uniqueId={uniqueId} />);
+        const inputElement = screen.getByRole('textbox');
+        expect(inputElement).toHaveValue(data);
+
+        const clipboardButton = screen.getByRole('button');
+        expect(clipboardButton).toBeInTheDocument();
+        expect(screen.getByTestId(`clipboard-icon-${uniqueId}`)).toBeInTheDocument();
+
+        await waitFor(() => {
+            userEvent.hover(clipboardButton);
+            expect(screen.getAllByText('copy')[0]).toBeInTheDocument();
+        })
+    });
+
+    it('shows tooltip correctly when copying to clipboard', async () => {
+        render(<GroupingPathCell data={data} uniqueId={uniqueId} />);
+        const clipboardButton = screen.getByRole('button');
+
+        // Verify clipboard action and tooltip appearance
+        fireEvent.click(clipboardButton);
+        await waitFor(() => {
+            expect(screen.getAllByText('copied!')[0]).toBeInTheDocument();
+            expect(navigator.clipboard.writeText).toHaveBeenCalledWith(data);
+        });
+
+        // Wait for the 'copied!' text to disappear
+        await waitFor(() => {
+            expect(screen.queryByText('copied!')).not.toBeInTheDocument();
+        }, { timeout: 2000 });
+
+        // Check the 'copy' text appears again
+        await userEvent.hover(clipboardButton);
+        await waitFor(() => {
+            expect(screen.getAllByText('copy')[0]).toBeInTheDocument();
+        })
+
+    });
+});
+
diff --git a/ui/tests/components/table/table-element/Pagination.test.tsx b/ui/tests/components/table/table-element/Pagination.test.tsx
new file mode 100644
index 00000000..ac7a487a
--- /dev/null
+++ b/ui/tests/components/table/table-element/Pagination.test.tsx
@@ -0,0 +1,128 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { Table } from "@tanstack/table-core";
+import { GroupingPath } from "@/models/groupings-api-results";
+import PaginationBar from "@/components/table/table-element/Pagination";
+
+const mockGetPageCount = jest.fn();
+const mockGetCanPreviousPage = jest.fn();
+const mockGetCanNextPage = jest.fn();
+const mockFirstPage = jest.fn();
+const mockPreviousPage = jest.fn();
+const mockSetPageIndex = jest.fn();
+const mockNextPage = jest.fn();
+const mockLastPage = jest.fn();
+
+const mockTable = {
+    getPageCount: mockGetPageCount,
+    getCanPreviousPage: mockGetCanPreviousPage,
+    getCanNextPage: mockGetCanNextPage,
+    firstPage: mockFirstPage,
+    previousPage: mockPreviousPage,
+    setPageIndex: mockSetPageIndex,
+    nextPage: mockNextPage,
+    lastPage: mockLastPage,
+} as unknown as Table<GroupingPath>;
+
+describe("Pagination", () => {
+
+    it('renders pagination Bar correctly', () => {
+        mockGetPageCount.mockReturnValue(6);
+        mockGetCanPreviousPage.mockReturnValue(true);
+        mockGetCanNextPage.mockReturnValue(true);
+
+        render(<PaginationBar table={mockTable}/>)
+
+        // Ensure page numbers and buttons are rendered
+        fireEvent.click(screen.getByText('3'));
+        expect(screen.getByText('First')).toBeInTheDocument();
+        expect(screen.getByText('Previous')).toBeInTheDocument();
+        expect(screen.getByText('1')).toBeInTheDocument();
+        expect(screen.getByText('2')).toBeInTheDocument();
+        expect(screen.getByText('3')).toBeInTheDocument();
+        expect(screen.getByText('4')).toBeInTheDocument();
+        expect(screen.getByText('5')).toBeInTheDocument();
+        expect(screen.queryByText('6')).not.toBeInTheDocument(); // 6 should not be rendered
+        expect(screen.getByText('Next')).toBeInTheDocument();
+        expect(screen.getByText('Last')).toBeInTheDocument();
+    });
+
+    it('navigates to a specific page when the page number is clicked', async () => {
+        mockGetPageCount.mockReturnValue(5);
+        mockGetCanPreviousPage.mockReturnValue(true);
+        mockGetCanNextPage.mockReturnValue(true);
+
+        render(<PaginationBar table={mockTable} />);
+
+        // Navigate to a specific page
+        fireEvent.click(screen.getByText('3'));
+        expect(mockSetPageIndex).toHaveBeenCalledWith(2); // Page index 2 corresponds to page 3
+    });
+
+
+    it('navigates to the first page when "First" is clicked', () => {
+        mockGetPageCount.mockReturnValue(5);
+        mockGetCanPreviousPage.mockReturnValue(true);
+
+        render(<PaginationBar table={mockTable}/>);
+
+        fireEvent.click(screen.getByText('First'));
+        expect(mockFirstPage).toHaveBeenCalled();
+    });
+
+    it('navigates to the previous page when "Previous" is clicked', () => {
+        mockGetPageCount.mockReturnValue(5);
+        mockGetCanPreviousPage.mockReturnValue(true);
+
+        render(<PaginationBar table={mockTable}/>);
+
+        fireEvent.click(screen.getByText('Previous'));
+        expect(mockPreviousPage).toHaveBeenCalled();
+    });
+
+    it('navigates to the next page when "next" is clicked', () => {
+        mockGetPageCount.mockReturnValue(5);
+        mockGetCanNextPage.mockReturnValue(true);
+
+        render(<PaginationBar table={mockTable}/>);
+
+        fireEvent.click(screen.getByText('Next'));
+        expect(mockNextPage).toHaveBeenCalled();
+    });
+
+    it('navigates to the last page when "last" is clicked', () => {
+        mockGetPageCount.mockReturnValue(5);
+        mockGetCanNextPage.mockReturnValue(true);
+
+        render(<PaginationBar table={mockTable}/>);
+
+        fireEvent.click(screen.getByText('Last'));
+        expect(mockLastPage).toHaveBeenCalled();
+    });
+
+    it('disables "Previous" and "First" buttons when on the first page', () => {
+        mockGetPageCount.mockReturnValue(1);
+        mockGetCanPreviousPage.mockReturnValue(false);
+
+        render(<PaginationBar table={mockTable}/>);
+
+        fireEvent.click( screen.getByText('First'));
+        expect(mockFirstPage).not.toHaveBeenCalled();
+
+        fireEvent.click(screen.getByText('Previous'));
+        expect(mockPreviousPage).not.toHaveBeenCalled();
+    });
+
+    it('disables "Next" and "Last" buttons when on the last page', () => {
+        mockGetPageCount.mockReturnValue(1);
+        mockGetCanNextPage.mockReturnValue(false);
+
+        render(<PaginationBar table={mockTable}/>);
+
+        fireEvent.click(screen.getByText('Next'));
+        expect(mockNextPage).not.toHaveBeenCalled();
+
+        fireEvent.click(screen.getByText('Last'));
+        expect(mockLastPage).not.toHaveBeenCalled();
+        expect(mockGetPageCount).toHaveBeenCalled();
+    });
+});
diff --git a/ui/tests/components/table/table-element/SortArrow.test.tsx b/ui/tests/components/table/table-element/SortArrow.test.tsx
new file mode 100644
index 00000000..9c675823
--- /dev/null
+++ b/ui/tests/components/table/table-element/SortArrow.test.tsx
@@ -0,0 +1,26 @@
+import { render, screen } from '@testing-library/react';
+import SortArrow from '@/components/table/table-element/SortArrow';
+
+describe('SortArrow', ()=>{
+
+    it('render ChevronUp icon when direction is "asc"', () => {
+        render(<SortArrow direction={'asc'}/>);
+        expect(screen.getByTestId('chevron-up-icon'));
+    });
+
+    it('render ChevronDown icon when direction is "desc"', () => {
+        render(<SortArrow direction={'desc'}/>);
+        expect(screen.getByTestId('chevron-down-icon') );
+    });
+
+    it('render nothing when direction is not provide', () => {
+        render(<SortArrow direction={'undefined'}/>);
+
+        expect(screen.queryByTestId('chevron-up-icon') ).toBeNull();
+        expect(screen.queryByTestId('chevron-down-icon') ).toBeNull();
+    });
+
+});
+
+
+